fix: prevent asset conflicts between React and Grid.js versions

Add coexistence checks to all enqueue methods to prevent loading
both React and Grid.js assets simultaneously.

Changes:
- ReactAdmin.php: Only enqueue React assets when ?react=1
- Init.php: Skip Grid.js when React active on admin pages
- Form.php, Coupon.php, Access.php: Restore classic assets when ?react=0
- Customer.php, Product.php, License.php: Add coexistence checks

Now the toggle between Classic and React versions works correctly.

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
dwindown
2026-04-18 17:02:14 +07:00
parent bd9cdac02e
commit e8fbfb14c1
74973 changed files with 6658406 additions and 71 deletions

View File

@@ -0,0 +1,23 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NavigatorContext = void 0;
var _element = require("@wordpress/element");
/**
* WordPress dependencies
*/
const initialContextValue = {
location: {},
goTo: () => {},
goBack: () => {},
goToParent: () => {},
addScreen: () => {},
removeScreen: () => {},
params: {}
};
const NavigatorContext = (0, _element.createContext)(initialContextValue);
exports.NavigatorContext = NavigatorContext;
//# sourceMappingURL=context.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","initialContextValue","location","goTo","goBack","goToParent","addScreen","removeScreen","params","NavigatorContext","createContext","exports"],"sources":["@wordpress/components/src/navigator/context.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { createContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { NavigatorContext as NavigatorContextType } from './types';\n\nconst initialContextValue: NavigatorContextType = {\n\tlocation: {},\n\tgoTo: () => {},\n\tgoBack: () => {},\n\tgoToParent: () => {},\n\taddScreen: () => {},\n\tremoveScreen: () => {},\n\tparams: {},\n};\nexport const NavigatorContext = createContext( initialContextValue );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQA,MAAMC,mBAAyC,GAAG;EACjDC,QAAQ,EAAE,CAAC,CAAC;EACZC,IAAI,EAAEA,CAAA,KAAM,CAAC,CAAC;EACdC,MAAM,EAAEA,CAAA,KAAM,CAAC,CAAC;EAChBC,UAAU,EAAEA,CAAA,KAAM,CAAC,CAAC;EACpBC,SAAS,EAAEA,CAAA,KAAM,CAAC,CAAC;EACnBC,YAAY,EAAEA,CAAA,KAAM,CAAC,CAAC;EACtBC,MAAM,EAAE,CAAC;AACV,CAAC;AACM,MAAMC,gBAAgB,GAAG,IAAAC,sBAAa,EAAET,mBAAoB,CAAC;AAACU,OAAA,CAAAF,gBAAA,GAAAA,gBAAA"}

View File

@@ -0,0 +1,49 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorBackButton", {
enumerable: true,
get: function () {
return _navigatorBackButton.NavigatorBackButton;
}
});
Object.defineProperty(exports, "NavigatorButton", {
enumerable: true,
get: function () {
return _navigatorButton.NavigatorButton;
}
});
Object.defineProperty(exports, "NavigatorProvider", {
enumerable: true,
get: function () {
return _navigatorProvider.NavigatorProvider;
}
});
Object.defineProperty(exports, "NavigatorScreen", {
enumerable: true,
get: function () {
return _navigatorScreen.NavigatorScreen;
}
});
Object.defineProperty(exports, "NavigatorToParentButton", {
enumerable: true,
get: function () {
return _navigatorToParentButton.NavigatorToParentButton;
}
});
Object.defineProperty(exports, "useNavigator", {
enumerable: true,
get: function () {
return _useNavigator.default;
}
});
var _navigatorProvider = require("./navigator-provider");
var _navigatorScreen = require("./navigator-screen");
var _navigatorButton = require("./navigator-button");
var _navigatorBackButton = require("./navigator-back-button");
var _navigatorToParentButton = require("./navigator-to-parent-button");
var _useNavigator = _interopRequireDefault(require("./use-navigator"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_navigatorProvider","require","_navigatorScreen","_navigatorButton","_navigatorBackButton","_navigatorToParentButton","_useNavigator","_interopRequireDefault"],"sources":["@wordpress/components/src/navigator/index.ts"],"sourcesContent":["export { NavigatorProvider } from './navigator-provider';\nexport { NavigatorScreen } from './navigator-screen';\nexport { NavigatorButton } from './navigator-button';\nexport { NavigatorBackButton } from './navigator-back-button';\nexport { NavigatorToParentButton } from './navigator-to-parent-button';\nexport { default as useNavigator } from './use-navigator';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,gBAAA,GAAAD,OAAA;AACA,IAAAE,gBAAA,GAAAF,OAAA;AACA,IAAAG,oBAAA,GAAAH,OAAA;AACA,IAAAI,wBAAA,GAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAC,sBAAA,CAAAN,OAAA"}

View File

@@ -0,0 +1,65 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigatorBackButton = void 0;
var _react = require("react");
var _context = require("../../context");
var _view = require("../../view");
var _hook = require("./hook");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function UnconnectedNavigatorBackButton(props, forwardedRef) {
const navigatorBackButtonProps = (0, _hook.useNavigatorBackButton)(props);
return (0, _react.createElement)(_view.View, {
ref: forwardedRef,
...navigatorBackButtonProps
});
}
/**
* The `NavigatorBackButton` component can be used to navigate to a screen and
* should be used in combination with the `NavigatorProvider`, the
* `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
* hook).
*
* @example
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorBackButton as NavigatorBackButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
* Go back
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
const NavigatorBackButton = (0, _context.contextConnect)(UnconnectedNavigatorBackButton, 'NavigatorBackButton');
exports.NavigatorBackButton = NavigatorBackButton;
var _default = NavigatorBackButton;
exports.default = _default;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","require","_view","_hook","UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","useNavigatorBackButton","_react","createElement","View","ref","NavigatorBackButton","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,8BAA8BA,CACtCC,KAAoE,EACpEC,YAAiC,EAChC;EACD,MAAMC,wBAAwB,GAAG,IAAAC,4BAAsB,EAAEH,KAAM,CAAC;EAEhE,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGN,YAAc;IAAA,GAAMC;EAAwB,CAAI,CAAC;AACrE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,mBAAmB,GAAG,IAAAC,uBAAc,EAChDV,8BAA8B,EAC9B,qBACD,CAAC;AAACW,OAAA,CAAAF,mBAAA,GAAAA,mBAAA;AAAA,IAAAG,QAAA,GAEaH,mBAAmB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,42 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigatorBackButton = useNavigatorBackButton;
var _element = require("@wordpress/element");
var _context = require("../../context");
var _button = _interopRequireDefault(require("../../button"));
var _useNavigator = _interopRequireDefault(require("../use-navigator"));
/**
* WordPress dependencies
*/
function useNavigatorBackButton(props) {
const {
onClick,
as = _button.default,
goToParent: goToParentProp = false,
...otherProps
} = (0, _context.useContextSystem)(props, 'NavigatorBackButton');
const {
goBack,
goToParent
} = (0, _useNavigator.default)();
const handleClick = (0, _element.useCallback)(e => {
e.preventDefault();
if (goToParentProp) {
goToParent();
} else {
goBack();
}
onClick?.(e);
}, [goToParentProp, goToParent, goBack, onClick]);
return {
as,
onClick: handleClick,
...otherProps
};
}
//# sourceMappingURL=hook.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","_button","_interopRequireDefault","_useNavigator","useNavigatorBackButton","props","onClick","as","Button","goToParent","goToParentProp","otherProps","useContextSystem","goBack","useNavigator","handleClick","useCallback","e","preventDefault"],"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport useNavigator from '../use-navigator';\nimport type { NavigatorBackButtonHookProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\t\tgoToParent: goToParentProp = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorBackButton' );\n\n\tconst { goBack, goToParent } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tif ( goToParentProp ) {\n\t\t\t\t\tgoToParent();\n\t\t\t\t} else {\n\t\t\t\t\tgoBack();\n\t\t\t\t}\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goToParentProp, goToParent, goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAMA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,OAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,aAAA,GAAAD,sBAAA,CAAAH,OAAA;AAXA;AACA;AACA;;AAYO,SAASK,sBAAsBA,CACrCC,KAAwE,EACvE;EACD,MAAM;IACLC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,UAAU,EAAEC,cAAc,GAAG,KAAK;IAClC,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,qBAAsB,CAAC;EAEpD,MAAM;IAAEQ,MAAM;IAAEJ;EAAW,CAAC,GAAG,IAAAK,qBAAY,EAAC,CAAC;EAC7C,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClB,IAAKR,cAAc,EAAG;MACrBD,UAAU,CAAC,CAAC;IACb,CAAC,MAAM;MACNI,MAAM,CAAC,CAAC;IACT;IACAP,OAAO,GAAIW,CAAE,CAAC;EACf,CAAC,EACD,CAAEP,cAAc,EAAED,UAAU,EAAEI,MAAM,EAAEP,OAAO,CAC9C,CAAC;EAEF,OAAO;IACNC,EAAE;IACFD,OAAO,EAAES,WAAW;IACpB,GAAGJ;EACJ,CAAC;AACF"}

View File

@@ -0,0 +1,14 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorBackButton", {
enumerable: true,
get: function () {
return _component.default;
}
});
var _component = _interopRequireDefault(require("./component"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/navigator/navigator-back-button/index.ts"],"sourcesContent":["export { default as NavigatorBackButton } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

View File

@@ -0,0 +1,64 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigatorButton = void 0;
var _react = require("react");
var _context = require("../../context");
var _view = require("../../view");
var _hook = require("./hook");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function UnconnectedNavigatorButton(props, forwardedRef) {
const navigatorButtonProps = (0, _hook.useNavigatorButton)(props);
return (0, _react.createElement)(_view.View, {
ref: forwardedRef,
...navigatorButtonProps
});
}
/**
* The `NavigatorButton` component can be used to navigate to a screen and should
* be used in combination with the `NavigatorProvider`, the `NavigatorScreen`
* and the `NavigatorBackButton` components (or the `useNavigator` hook).
*
* @example
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorBackButton as NavigatorBackButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
* Go back
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
const NavigatorButton = (0, _context.contextConnect)(UnconnectedNavigatorButton, 'NavigatorButton');
exports.NavigatorButton = NavigatorButton;
var _default = NavigatorButton;
exports.default = _default;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","require","_view","_hook","UnconnectedNavigatorButton","props","forwardedRef","navigatorButtonProps","useNavigatorButton","_react","createElement","View","ref","NavigatorButton","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/navigator/navigator-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorButton } from './hook';\nimport type { NavigatorButtonProps } from '../types';\n\nfunction UnconnectedNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorButtonProps = useNavigatorButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorButtonProps } />;\n}\n\n/**\n * The `NavigatorButton` component can be used to navigate to a screen and should\n * be used in combination with the `NavigatorProvider`, the `NavigatorScreen`\n * and the `NavigatorBackButton` components (or the `useNavigator` hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorBackButton>\n * Go back\n * </NavigatorBackButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorButton = contextConnect(\n\tUnconnectedNavigatorButton,\n\t'NavigatorButton'\n);\n\nexport default NavigatorButton;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,0BAA0BA,CAClCC,KAAgE,EAChEC,YAAiC,EAChC;EACD,MAAMC,oBAAoB,GAAG,IAAAC,wBAAkB,EAAEH,KAAM,CAAC;EAExD,OAAO,IAAAI,MAAA,CAAAC,aAAA,EAACR,KAAA,CAAAS,IAAI;IAACC,GAAG,EAAGN,YAAc;IAAA,GAAMC;EAAoB,CAAI,CAAC;AACjE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMM,eAAe,GAAG,IAAAC,uBAAc,EAC5CV,0BAA0B,EAC1B,iBACD,CAAC;AAACW,OAAA,CAAAF,eAAA,GAAAA,eAAA;AAAA,IAAAG,QAAA,GAEaH,eAAe;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,44 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useNavigatorButton = useNavigatorButton;
var _element = require("@wordpress/element");
var _escapeHtml = require("@wordpress/escape-html");
var _context = require("../../context");
var _button = _interopRequireDefault(require("../../button"));
var _useNavigator = _interopRequireDefault(require("../use-navigator"));
/**
* WordPress dependencies
*/
const cssSelectorForAttribute = (attrName, attrValue) => `[${attrName}="${attrValue}"]`;
function useNavigatorButton(props) {
const {
path,
onClick,
as = _button.default,
attributeName = 'id',
...otherProps
} = (0, _context.useContextSystem)(props, 'NavigatorButton');
const escapedPath = (0, _escapeHtml.escapeAttribute)(path);
const {
goTo
} = (0, _useNavigator.default)();
const handleClick = (0, _element.useCallback)(e => {
e.preventDefault();
goTo(escapedPath, {
focusTargetSelector: cssSelectorForAttribute(attributeName, escapedPath)
});
onClick?.(e);
}, [goTo, onClick, attributeName, escapedPath]);
return {
as,
onClick: handleClick,
...otherProps,
[attributeName]: escapedPath
};
}
//# sourceMappingURL=hook.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_escapeHtml","_context","_button","_interopRequireDefault","_useNavigator","cssSelectorForAttribute","attrName","attrValue","useNavigatorButton","props","path","onClick","as","Button","attributeName","otherProps","useContextSystem","escapedPath","escapeAttribute","goTo","useNavigator","handleClick","useCallback","e","preventDefault","focusTargetSelector"],"sources":["@wordpress/components/src/navigator/navigator-button/hook.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\nimport { escapeAttribute } from '@wordpress/escape-html';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { useContextSystem } from '../../context';\nimport Button from '../../button';\nimport useNavigator from '../use-navigator';\nimport type { NavigatorButtonProps } from '../types';\n\nconst cssSelectorForAttribute = ( attrName: string, attrValue: string ) =>\n\t`[${ attrName }=\"${ attrValue }\"]`;\n\nexport function useNavigatorButton(\n\tprops: WordPressComponentProps< NavigatorButtonProps, 'button' >\n) {\n\tconst {\n\t\tpath,\n\t\tonClick,\n\t\tas = Button,\n\t\tattributeName = 'id',\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorButton' );\n\n\tconst escapedPath = escapeAttribute( path );\n\n\tconst { goTo } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tgoTo( escapedPath, {\n\t\t\t\t\tfocusTargetSelector: cssSelectorForAttribute(\n\t\t\t\t\t\tattributeName,\n\t\t\t\t\t\tescapedPath\n\t\t\t\t\t),\n\t\t\t\t} );\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goTo, onClick, attributeName, escapedPath ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t\t[ attributeName ]: escapedPath,\n\t};\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,WAAA,GAAAD,OAAA;AAMA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,OAAA,GAAAC,sBAAA,CAAAJ,OAAA;AACA,IAAAK,aAAA,GAAAD,sBAAA,CAAAJ,OAAA;AAZA;AACA;AACA;;AAaA,MAAMM,uBAAuB,GAAGA,CAAEC,QAAgB,EAAEC,SAAiB,KACnE,IAAID,QAAU,KAAKC,SAAW,IAAG;AAE5B,SAASC,kBAAkBA,CACjCC,KAAgE,EAC/D;EACD,MAAM;IACLC,IAAI;IACJC,OAAO;IACPC,EAAE,GAAGC,eAAM;IACXC,aAAa,GAAG,IAAI;IACpB,GAAGC;EACJ,CAAC,GAAG,IAAAC,yBAAgB,EAAEP,KAAK,EAAE,iBAAkB,CAAC;EAEhD,MAAMQ,WAAW,GAAG,IAAAC,2BAAe,EAAER,IAAK,CAAC;EAE3C,MAAM;IAAES;EAAK,CAAC,GAAG,IAAAC,qBAAY,EAAC,CAAC;EAC/B,MAAMC,WAAyD,GAC9D,IAAAC,oBAAW,EACRC,CAAC,IAAM;IACRA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBL,IAAI,CAAEF,WAAW,EAAE;MAClBQ,mBAAmB,EAAEpB,uBAAuB,CAC3CS,aAAa,EACbG,WACD;IACD,CAAE,CAAC;IACHN,OAAO,GAAIY,CAAE,CAAC;EACf,CAAC,EACD,CAAEJ,IAAI,EAAER,OAAO,EAAEG,aAAa,EAAEG,WAAW,CAC5C,CAAC;EAEF,OAAO;IACNL,EAAE;IACFD,OAAO,EAAEU,WAAW;IACpB,GAAGN,UAAU;IACb,CAAED,aAAa,GAAIG;EACpB,CAAC;AACF"}

View File

@@ -0,0 +1,14 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorButton", {
enumerable: true,
get: function () {
return _component.default;
}
});
var _component = _interopRequireDefault(require("./component"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/navigator/navigator-button/index.ts"],"sourcesContent":["export { default as NavigatorButton } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

View File

@@ -0,0 +1,210 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigatorProvider = void 0;
var _react = require("react");
var _element = require("@wordpress/element");
var _isShallowEqual = _interopRequireDefault(require("@wordpress/is-shallow-equal"));
var _context = require("../../context");
var _useCx = require("../../utils/hooks/use-cx");
var _router = require("../utils/router");
var _view = require("../../view");
var _context2 = require("../context");
var styles = _interopRequireWildcard(require("../styles"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
const MAX_HISTORY_LENGTH = 50;
function screensReducer(state = [], action) {
switch (action.type) {
case 'add':
return [...state, action.screen];
case 'remove':
return state.filter(s => s.id !== action.screen.id);
}
return state;
}
function UnconnectedNavigatorProvider(props, forwardedRef) {
const {
initialPath,
children,
className,
...otherProps
} = (0, _context.useContextSystem)(props, 'NavigatorProvider');
const [locationHistory, setLocationHistory] = (0, _element.useState)([{
path: initialPath
}]);
const currentLocationHistory = (0, _element.useRef)([]);
const [screens, dispatch] = (0, _element.useReducer)(screensReducer, []);
const currentScreens = (0, _element.useRef)([]);
(0, _element.useEffect)(() => {
currentScreens.current = screens;
}, [screens]);
(0, _element.useEffect)(() => {
currentLocationHistory.current = locationHistory;
}, [locationHistory]);
const currentMatch = (0, _element.useRef)();
const matchedPath = (0, _element.useMemo)(() => {
let currentPath;
if (locationHistory.length === 0 || (currentPath = locationHistory[locationHistory.length - 1].path) === undefined) {
currentMatch.current = undefined;
return undefined;
}
const resolvePath = path => {
const newMatch = (0, _router.patternMatch)(path, screens);
// If the new match is the same as the current match,
// return the previous one for performance reasons.
if (currentMatch.current && newMatch && (0, _isShallowEqual.default)(newMatch.params, currentMatch.current.params) && newMatch.id === currentMatch.current.id) {
return currentMatch.current;
}
return newMatch;
};
const newMatch = resolvePath(currentPath);
currentMatch.current = newMatch;
return newMatch;
}, [screens, locationHistory]);
const addScreen = (0, _element.useCallback)(screen => dispatch({
type: 'add',
screen
}), []);
const removeScreen = (0, _element.useCallback)(screen => dispatch({
type: 'remove',
screen
}), []);
const goBack = (0, _element.useCallback)(() => {
setLocationHistory(prevLocationHistory => {
if (prevLocationHistory.length <= 1) {
return prevLocationHistory;
}
return [...prevLocationHistory.slice(0, -2), {
...prevLocationHistory[prevLocationHistory.length - 2],
isBack: true,
hasRestoredFocus: false
}];
});
}, []);
const goTo = (0, _element.useCallback)((path, options = {}) => {
const {
focusTargetSelector,
isBack = false,
skipFocus = false,
replace = false,
...restOptions
} = options;
const isNavigatingToPreviousPath = isBack && currentLocationHistory.current.length > 1 && currentLocationHistory.current[currentLocationHistory.current.length - 2].path === path;
if (isNavigatingToPreviousPath) {
goBack();
return;
}
setLocationHistory(prevLocationHistory => {
const newLocation = {
...restOptions,
path,
isBack,
hasRestoredFocus: false,
skipFocus
};
if (prevLocationHistory.length === 0) {
return replace ? [] : [newLocation];
}
const newLocationHistory = prevLocationHistory.slice(prevLocationHistory.length > MAX_HISTORY_LENGTH - 1 ? 1 : 0, -1);
if (!replace) {
newLocationHistory.push(
// Assign `focusTargetSelector` to the previous location in history
// (the one we just navigated from).
{
...prevLocationHistory[prevLocationHistory.length - 1],
focusTargetSelector
});
}
newLocationHistory.push(newLocation);
return newLocationHistory;
});
}, [goBack]);
const goToParent = (0, _element.useCallback)((options = {}) => {
const currentPath = currentLocationHistory.current[currentLocationHistory.current.length - 1].path;
if (currentPath === undefined) {
return;
}
const parentPath = (0, _router.findParent)(currentPath, currentScreens.current);
if (parentPath === undefined) {
return;
}
goTo(parentPath, {
...options,
isBack: true
});
}, [goTo]);
const navigatorContextValue = (0, _element.useMemo)(() => ({
location: {
...locationHistory[locationHistory.length - 1],
isInitial: locationHistory.length === 1
},
params: matchedPath ? matchedPath.params : {},
match: matchedPath ? matchedPath.id : undefined,
goTo,
goBack,
goToParent,
addScreen,
removeScreen
}), [locationHistory, matchedPath, goTo, goBack, goToParent, addScreen, removeScreen]);
const cx = (0, _useCx.useCx)();
const classes = (0, _element.useMemo)(() => cx(styles.navigatorProviderWrapper, className), [className, cx]);
return (0, _react.createElement)(_view.View, {
ref: forwardedRef,
className: classes,
...otherProps
}, (0, _react.createElement)(_context2.NavigatorContext.Provider, {
value: navigatorContextValue
}, children));
}
/**
* The `NavigatorProvider` component allows rendering nested views/panels/menus
* (via the `NavigatorScreen` component and navigate between these different
* view (via the `NavigatorButton` and `NavigatorBackButton` components or the
* `useNavigator` hook).
*
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorBackButton as NavigatorBackButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
* Go back
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
const NavigatorProvider = (0, _context.contextConnect)(UnconnectedNavigatorProvider, 'NavigatorProvider');
exports.NavigatorProvider = NavigatorProvider;
var _default = NavigatorProvider;
exports.default = _default;
//# sourceMappingURL=component.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorProvider", {
enumerable: true,
get: function () {
return _component.default;
}
});
var _component = _interopRequireDefault(require("./component"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/navigator/navigator-provider/index.ts"],"sourcesContent":["export { default as NavigatorProvider } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

View File

@@ -0,0 +1,150 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigatorScreen = void 0;
var _react = require("react");
var _dom = require("@wordpress/dom");
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _i18n = require("@wordpress/i18n");
var _escapeHtml = require("@wordpress/escape-html");
var _context = require("../../context");
var _useCx = require("../../utils/hooks/use-cx");
var _view = require("../../view");
var _context2 = require("../context");
var styles = _interopRequireWildcard(require("../styles"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
function UnconnectedNavigatorScreen(props, forwardedRef) {
const screenId = (0, _element.useId)();
const {
children,
className,
path,
...otherProps
} = (0, _context.useContextSystem)(props, 'NavigatorScreen');
const {
location,
match,
addScreen,
removeScreen
} = (0, _element.useContext)(_context2.NavigatorContext);
const isMatch = match === screenId;
const wrapperRef = (0, _element.useRef)(null);
(0, _element.useEffect)(() => {
const screen = {
id: screenId,
path: (0, _escapeHtml.escapeAttribute)(path)
};
addScreen(screen);
return () => removeScreen(screen);
}, [screenId, path, addScreen, removeScreen]);
const isRTL = (0, _i18n.isRTL)();
const {
isInitial,
isBack
} = location;
const cx = (0, _useCx.useCx)();
const classes = (0, _element.useMemo)(() => cx(styles.navigatorScreen({
isInitial,
isBack,
isRTL
}), className), [className, cx, isInitial, isBack, isRTL]);
const locationRef = (0, _element.useRef)(location);
(0, _element.useEffect)(() => {
locationRef.current = location;
}, [location]);
// Focus restoration
const isInitialLocation = location.isInitial && !location.isBack;
(0, _element.useEffect)(() => {
// Only attempt to restore focus:
// - if the current location is not the initial one (to avoid moving focus on page load)
// - when the screen becomes visible
// - if the wrapper ref has been assigned
// - if focus hasn't already been restored for the current location
// - if the `skipFocus` option is not set to `true`. This is useful when we trigger the navigation outside of NavigatorScreen.
if (isInitialLocation || !isMatch || !wrapperRef.current || locationRef.current.hasRestoredFocus || location.skipFocus) {
return;
}
const activeElement = wrapperRef.current.ownerDocument.activeElement;
// If an element is already focused within the wrapper do not focus the
// element. This prevents inputs or buttons from losing focus unnecessarily.
if (wrapperRef.current.contains(activeElement)) {
return;
}
let elementToFocus = null;
// When navigating back, if a selector is provided, use it to look for the
// target element (assumed to be a node inside the current NavigatorScreen)
if (location.isBack && location?.focusTargetSelector) {
elementToFocus = wrapperRef.current.querySelector(location.focusTargetSelector);
}
// If the previous query didn't run or find any element to focus, fallback
// to the first tabbable element in the screen (or the screen itself).
if (!elementToFocus) {
const firstTabbable = _dom.focus.tabbable.find(wrapperRef.current)[0];
elementToFocus = firstTabbable !== null && firstTabbable !== void 0 ? firstTabbable : wrapperRef.current;
}
locationRef.current.hasRestoredFocus = true;
elementToFocus.focus();
}, [isInitialLocation, isMatch, location.isBack, location.focusTargetSelector, location.skipFocus]);
const mergedWrapperRef = (0, _compose.useMergeRefs)([forwardedRef, wrapperRef]);
return isMatch ? (0, _react.createElement)(_view.View, {
ref: mergedWrapperRef,
className: classes,
...otherProps
}, children) : null;
}
/**
* The `NavigatorScreen` component represents a single view/screen/panel and
* should be used in combination with the `NavigatorProvider`, the
* `NavigatorButton` and the `NavigatorBackButton` components (or the `useNavigator`
* hook).
*
* @example
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorBackButton as NavigatorBackButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorBackButton>
* Go back
* </NavigatorBackButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
const NavigatorScreen = (0, _context.contextConnect)(UnconnectedNavigatorScreen, 'NavigatorScreen');
exports.NavigatorScreen = NavigatorScreen;
var _default = NavigatorScreen;
exports.default = _default;
//# sourceMappingURL=component.js.map

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,14 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorScreen", {
enumerable: true,
get: function () {
return _component.default;
}
});
var _component = _interopRequireDefault(require("./component"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/navigator/navigator-screen/index.ts"],"sourcesContent":["export { default as NavigatorScreen } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

View File

@@ -0,0 +1,68 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.NavigatorToParentButton = void 0;
var _react = require("react");
var _context = require("../../context");
var _view = require("../../view");
var _hook = require("../navigator-back-button/hook");
/**
* External dependencies
*/
/**
* Internal dependencies
*/
function UnconnectedNavigatorToParentButton(props, forwardedRef) {
const navigatorToParentButtonProps = (0, _hook.useNavigatorBackButton)({
...props,
goToParent: true
});
return (0, _react.createElement)(_view.View, {
ref: forwardedRef,
...navigatorToParentButtonProps
});
}
/*
* The `NavigatorToParentButton` component can be used to navigate to a screen and
* should be used in combination with the `NavigatorProvider`, the
* `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`
* hook).
*
* @example
* ```jsx
* import {
* __experimentalNavigatorProvider as NavigatorProvider,
* __experimentalNavigatorScreen as NavigatorScreen,
* __experimentalNavigatorButton as NavigatorButton,
* __experimentalNavigatorToParentButton as NavigatorToParentButton,
* } from '@wordpress/components';
*
* const MyNavigation = () => (
* <NavigatorProvider initialPath="/">
* <NavigatorScreen path="/">
* <p>This is the home screen.</p>
* <NavigatorButton path="/child">
* Navigate to child screen.
* </NavigatorButton>
* </NavigatorScreen>
*
* <NavigatorScreen path="/child">
* <p>This is the child screen.</p>
* <NavigatorToParentButton>
* Go to parent
* </NavigatorToParentButton>
* </NavigatorScreen>
* </NavigatorProvider>
* );
* ```
*/
const NavigatorToParentButton = (0, _context.contextConnect)(UnconnectedNavigatorToParentButton, 'NavigatorToParentButton');
exports.NavigatorToParentButton = NavigatorToParentButton;
var _default = NavigatorToParentButton;
exports.default = _default;
//# sourceMappingURL=component.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_context","require","_view","_hook","UnconnectedNavigatorToParentButton","props","forwardedRef","navigatorToParentButtonProps","useNavigatorBackButton","goToParent","_react","createElement","View","ref","NavigatorToParentButton","contextConnect","exports","_default","default"],"sources":["@wordpress/components/src/navigator/navigator-to-parent-button/component.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { WordPressComponentProps } from '../../context';\nimport { contextConnect } from '../../context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from '../navigator-back-button/hook';\nimport type { NavigatorToParentButtonProps } from '../types';\n\nfunction UnconnectedNavigatorToParentButton(\n\tprops: WordPressComponentProps< NavigatorToParentButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorToParentButtonProps = useNavigatorBackButton( {\n\t\t...props,\n\t\tgoToParent: true,\n\t} );\n\n\treturn <View ref={ forwardedRef } { ...navigatorToParentButtonProps } />;\n}\n\n/*\n * The `NavigatorToParentButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n * __experimentalNavigatorProvider as NavigatorProvider,\n * __experimentalNavigatorScreen as NavigatorScreen,\n * __experimentalNavigatorButton as NavigatorButton,\n * __experimentalNavigatorToParentButton as NavigatorToParentButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n * <NavigatorProvider initialPath=\"/\">\n * <NavigatorScreen path=\"/\">\n * <p>This is the home screen.</p>\n * <NavigatorButton path=\"/child\">\n * Navigate to child screen.\n * </NavigatorButton>\n * </NavigatorScreen>\n *\n * <NavigatorScreen path=\"/child\">\n * <p>This is the child screen.</p>\n * <NavigatorToParentButton>\n * Go to parent\n * </NavigatorToParentButton>\n * </NavigatorScreen>\n * </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorToParentButton = contextConnect(\n\tUnconnectedNavigatorToParentButton,\n\t'NavigatorToParentButton'\n);\n\nexport default NavigatorToParentButton;\n"],"mappings":";;;;;;;AASA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAXA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,SAASG,kCAAkCA,CAC1CC,KAAwE,EACxEC,YAAiC,EAChC;EACD,MAAMC,4BAA4B,GAAG,IAAAC,4BAAsB,EAAE;IAC5D,GAAGH,KAAK;IACRI,UAAU,EAAE;EACb,CAAE,CAAC;EAEH,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACT,KAAA,CAAAU,IAAI;IAACC,GAAG,EAAGP,YAAc;IAAA,GAAMC;EAA4B,CAAI,CAAC;AACzE;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMO,uBAAuB,GAAG,IAAAC,uBAAc,EACpDX,kCAAkC,EAClC,yBACD,CAAC;AAACY,OAAA,CAAAF,uBAAA,GAAAA,uBAAA;AAAA,IAAAG,QAAA,GAEaH,uBAAuB;AAAAE,OAAA,CAAAE,OAAA,GAAAD,QAAA"}

View File

@@ -0,0 +1,14 @@
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "NavigatorToParentButton", {
enumerable: true,
get: function () {
return _component.default;
}
});
var _component = _interopRequireDefault(require("./component"));
//# sourceMappingURL=index.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_component","_interopRequireDefault","require"],"sources":["@wordpress/components/src/navigator/navigator-to-parent-button/index.ts"],"sourcesContent":["export { default as NavigatorToParentButton } from './component';\n"],"mappings":";;;;;;;;;;;;AAAA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA"}

View File

@@ -0,0 +1,52 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.navigatorScreen = exports.navigatorProviderWrapper = void 0;
var _react = require("@emotion/react");
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
const navigatorProviderWrapper = process.env.NODE_ENV === "production" ? {
name: "xpkswc",
styles: "overflow-x:hidden;contain:content"
} : {
name: "1qbsmur-navigatorProviderWrapper",
styles: "overflow-x:hidden;contain:content;label:navigatorProviderWrapper;",
map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLMkMiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3Ivc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBuYXZpZ2F0b3JQcm92aWRlcldyYXBwZXIgPSBjc3NgXG5cdC8qIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9ucyAqL1xuXHRvdmVyZmxvdy14OiBoaWRkZW47XG5cdC8qIE1hcmsgdGhpcyBzdWJzZWN0aW9uIG9mIHRoZSBET00gYXMgaXNvbGF0ZWQsIHByb3ZpZGluZyBwZXJmb3JtYW5jZSBiZW5lZml0c1xuXHQgKiBieSBsaW1pdGluZyBjYWxjdWxhdGlvbnMgb2YgbGF5b3V0LCBzdHlsZSBhbmQgcGFpbnQgdG8gYSBET00gc3VidHJlZSByYXRoZXJcblx0ICogdGhhbiB0aGUgZW50aXJlIHBhZ2UuXG5cdCAqL1xuXHRjb250YWluOiBjb250ZW50O1xuYDtcblxuY29uc3QgZmFkZUluRnJvbVJpZ2h0ID0ga2V5ZnJhbWVzKCB7XG5cdCcwJSc6IHtcblx0XHRvcGFjaXR5OiAwLFxuXHRcdHRyYW5zZm9ybTogYHRyYW5zbGF0ZVgoIDUwcHggKWAsXG5cdH0sXG5cdCcxMDAlJzogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdub25lJyB9LFxufSApO1xuXG5jb25zdCBmYWRlSW5Gcm9tTGVmdCA9IGtleWZyYW1lcygge1xuXHQnMCUnOiB7XG5cdFx0b3BhY2l0eTogMCxcblx0XHR0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKCAtNTBweCApYCxcblx0fSxcblx0JzEwMCUnOiB7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ25vbmUnIH0sXG59ICk7XG5cbnR5cGUgTmF2aWdhdG9yU2NyZWVuQW5pbWF0aW9uUHJvcHMgPSB7XG5cdGlzSW5pdGlhbD86IGJvb2xlYW47XG5cdGlzQmFjaz86IGJvb2xlYW47XG5cdGlzUlRMOiBib29sZWFuO1xufTtcblxuY29uc3QgbmF2aWdhdG9yU2NyZWVuQW5pbWF0aW9uID0gKCB7XG5cdGlzSW5pdGlhbCxcblx0aXNCYWNrLFxuXHRpc1JUTCxcbn06IE5hdmlnYXRvclNjcmVlbkFuaW1hdGlvblByb3BzICkgPT4ge1xuXHRpZiAoIGlzSW5pdGlhbCAmJiAhIGlzQmFjayApIHtcblx0XHRyZXR1cm47XG5cdH1cblxuXHRjb25zdCBhbmltYXRpb25OYW1lID1cblx0XHQoIGlzUlRMICYmIGlzQmFjayApIHx8ICggISBpc1JUTCAmJiAhIGlzQmFjayApXG5cdFx0XHQ/IGZhZGVJbkZyb21SaWdodFxuXHRcdFx0OiBmYWRlSW5Gcm9tTGVmdDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xNHM7XG5cdFx0YW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7XG5cdFx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybSwgb3BhY2l0eTtcblx0XHRhbmltYXRpb24tbmFtZTogJHsgYW5pbWF0aW9uTmFtZSB9O1xuXG5cdFx0QG1lZGlhICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHRcdGFuaW1hdGlvbi1kdXJhdGlvbjogMHM7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IG5hdmlnYXRvclNjcmVlbiA9ICggcHJvcHM6IE5hdmlnYXRvclNjcmVlbkFuaW1hdGlvblByb3BzICkgPT4gY3NzYFxuXHQvKiBFbnN1cmVzIGhvcml6b250YWwgb3ZlcmZsb3cgaXMgdmlzdWFsbHkgYWNjZXNzaWJsZSAqL1xuXHRvdmVyZmxvdy14OiBhdXRvO1xuXHQvKiBJbiBjYXNlIHRoZSByb290IGhhcyBhIGhlaWdodCwgaXQgc2hvdWxkIG5vdCBiZSBleGNlZWRlZCAqL1xuXHRtYXgtaGVpZ2h0OiAxMDAlO1xuXG5cdCR7IG5hdmlnYXRvclNjcmVlbkFuaW1hdGlvbiggcHJvcHMgKSB9XG5gO1xuIl19 */",
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
};
exports.navigatorProviderWrapper = navigatorProviderWrapper;
const fadeInFromRight = (0, _react.keyframes)({
'0%': {
opacity: 0,
transform: `translateX( 50px )`
},
'100%': {
opacity: 1,
transform: 'none'
}
});
const fadeInFromLeft = (0, _react.keyframes)({
'0%': {
opacity: 0,
transform: `translateX( -50px )`
},
'100%': {
opacity: 1,
transform: 'none'
}
});
const navigatorScreenAnimation = ({
isInitial,
isBack,
isRTL
}) => {
if (isInitial && !isBack) {
return;
}
const animationName = isRTL && isBack || !isRTL && !isBack ? fadeInFromRight : fadeInFromLeft;
return /*#__PURE__*/(0, _react.css)("animation-duration:0.14s;animation-timing-function:ease-in-out;will-change:transform,opacity;animation-name:", animationName, ";@media ( prefers-reduced-motion ){animation-duration:0s;}" + (process.env.NODE_ENV === "production" ? "" : ";label:navigatorScreenAnimation;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFtRFciLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3Ivc3R5bGVzLnRzIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgY3NzLCBrZXlmcmFtZXMgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmV4cG9ydCBjb25zdCBuYXZpZ2F0b3JQcm92aWRlcldyYXBwZXIgPSBjc3NgXG5cdC8qIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9ucyAqL1xuXHRvdmVyZmxvdy14OiBoaWRkZW47XG5cdC8qIE1hcmsgdGhpcyBzdWJzZWN0aW9uIG9mIHRoZSBET00gYXMgaXNvbGF0ZWQsIHByb3ZpZGluZyBwZXJmb3JtYW5jZSBiZW5lZml0c1xuXHQgKiBieSBsaW1pdGluZyBjYWxjdWxhdGlvbnMgb2YgbGF5b3V0LCBzdHlsZSBhbmQgcGFpbnQgdG8gYSBET00gc3VidHJlZSByYXRoZXJcblx0ICogdGhhbiB0aGUgZW50aXJlIHBhZ2UuXG5cdCAqL1xuXHRjb250YWluOiBjb250ZW50O1xuYDtcblxuY29uc3QgZmFkZUluRnJvbVJpZ2h0ID0ga2V5ZnJhbWVzKCB7XG5cdCcwJSc6IHtcblx0XHRvcGFjaXR5OiAwLFxuXHRcdHRyYW5zZm9ybTogYHRyYW5zbGF0ZVgoIDUwcHggKWAsXG5cdH0sXG5cdCcxMDAlJzogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdub25lJyB9LFxufSApO1xuXG5jb25zdCBmYWRlSW5Gcm9tTGVmdCA9IGtleWZyYW1lcygge1xuXHQnMCUnOiB7XG5cdFx0b3BhY2l0eTogMCxcblx0XHR0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKCAtNTBweCApYCxcblx0fSxcblx0JzEwMCUnOiB7IG9wYWNpdHk6IDEsIHRyYW5zZm9ybTogJ25vbmUnIH0sXG59ICk7XG5cbnR5cGUgTmF2aWdhdG9yU2NyZWVuQW5pbWF0aW9uUHJvcHMgPSB7XG5cdGlzSW5pdGlhbD86IGJvb2xlYW47XG5cdGlzQmFjaz86IGJvb2xlYW47XG5cdGlzUlRMOiBib29sZWFuO1xufTtcblxuY29uc3QgbmF2aWdhdG9yU2NyZWVuQW5pbWF0aW9uID0gKCB7XG5cdGlzSW5pdGlhbCxcblx0aXNCYWNrLFxuXHRpc1JUTCxcbn06IE5hdmlnYXRvclNjcmVlbkFuaW1hdGlvblByb3BzICkgPT4ge1xuXHRpZiAoIGlzSW5pdGlhbCAmJiAhIGlzQmFjayApIHtcblx0XHRyZXR1cm47XG5cdH1cblxuXHRjb25zdCBhbmltYXRpb25OYW1lID1cblx0XHQoIGlzUlRMICYmIGlzQmFjayApIHx8ICggISBpc1JUTCAmJiAhIGlzQmFjayApXG5cdFx0XHQ/IGZhZGVJbkZyb21SaWdodFxuXHRcdFx0OiBmYWRlSW5Gcm9tTGVmdDtcblxuXHRyZXR1cm4gY3NzYFxuXHRcdGFuaW1hdGlvbi1kdXJhdGlvbjogMC4xNHM7XG5cdFx0YW5pbWF0aW9uLXRpbWluZy1mdW5jdGlvbjogZWFzZS1pbi1vdXQ7XG5cdFx0d2lsbC1jaGFuZ2U6IHRyYW5zZm9ybSwgb3BhY2l0eTtcblx0XHRhbmltYXRpb24tbmFtZTogJHsgYW5pbWF0aW9uTmFtZSB9O1xuXG5cdFx0QG1lZGlhICggcHJlZmVycy1yZWR1Y2VkLW1vdGlvbiApIHtcblx0XHRcdGFuaW1hdGlvbi1kdXJhdGlvbjogMHM7XG5cdFx0fVxuXHRgO1xufTtcblxuZXhwb3J0IGNvbnN0IG5hdmlnYXRvclNjcmVlbiA9ICggcHJvcHM6IE5hdmlnYXRvclNjcmVlbkFuaW1hdGlvblByb3BzICkgPT4gY3NzYFxuXHQvKiBFbnN1cmVzIGhvcml6b250YWwgb3ZlcmZsb3cgaXMgdmlzdWFsbHkgYWNjZXNzaWJsZSAqL1xuXHRvdmVyZmxvdy14OiBhdXRvO1xuXHQvKiBJbiBjYXNlIHRoZSByb290IGhhcyBhIGhlaWdodCwgaXQgc2hvdWxkIG5vdCBiZSBleGNlZWRlZCAqL1xuXHRtYXgtaGVpZ2h0OiAxMDAlO1xuXG5cdCR7IG5hdmlnYXRvclNjcmVlbkFuaW1hdGlvbiggcHJvcHMgKSB9XG5gO1xuIl19 */");
};
const navigatorScreen = props => /*#__PURE__*/(0, _react.css)("overflow-x:auto;max-height:100%;", navigatorScreenAnimation(props), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:navigatorScreen;"), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL3N0eWxlcy50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUErRDhFIiwiZmlsZSI6IkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL3N0eWxlcy50cyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7IGNzcywga2V5ZnJhbWVzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG5leHBvcnQgY29uc3QgbmF2aWdhdG9yUHJvdmlkZXJXcmFwcGVyID0gY3NzYFxuXHQvKiBQcmV2ZW50cyBob3Jpem9udGFsIG92ZXJmbG93IHdoaWxlIGFuaW1hdGluZyBzY3JlZW4gdHJhbnNpdGlvbnMgKi9cblx0b3ZlcmZsb3cteDogaGlkZGVuO1xuXHQvKiBNYXJrIHRoaXMgc3Vic2VjdGlvbiBvZiB0aGUgRE9NIGFzIGlzb2xhdGVkLCBwcm92aWRpbmcgcGVyZm9ybWFuY2UgYmVuZWZpdHNcblx0ICogYnkgbGltaXRpbmcgY2FsY3VsYXRpb25zIG9mIGxheW91dCwgc3R5bGUgYW5kIHBhaW50IHRvIGEgRE9NIHN1YnRyZWUgcmF0aGVyXG5cdCAqIHRoYW4gdGhlIGVudGlyZSBwYWdlLlxuXHQgKi9cblx0Y29udGFpbjogY29udGVudDtcbmA7XG5cbmNvbnN0IGZhZGVJbkZyb21SaWdodCA9IGtleWZyYW1lcygge1xuXHQnMCUnOiB7XG5cdFx0b3BhY2l0eTogMCxcblx0XHR0cmFuc2Zvcm06IGB0cmFuc2xhdGVYKCA1MHB4IClgLFxuXHR9LFxuXHQnMTAwJSc6IHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiAnbm9uZScgfSxcbn0gKTtcblxuY29uc3QgZmFkZUluRnJvbUxlZnQgPSBrZXlmcmFtZXMoIHtcblx0JzAlJzoge1xuXHRcdG9wYWNpdHk6IDAsXG5cdFx0dHJhbnNmb3JtOiBgdHJhbnNsYXRlWCggLTUwcHggKWAsXG5cdH0sXG5cdCcxMDAlJzogeyBvcGFjaXR5OiAxLCB0cmFuc2Zvcm06ICdub25lJyB9LFxufSApO1xuXG50eXBlIE5hdmlnYXRvclNjcmVlbkFuaW1hdGlvblByb3BzID0ge1xuXHRpc0luaXRpYWw/OiBib29sZWFuO1xuXHRpc0JhY2s/OiBib29sZWFuO1xuXHRpc1JUTDogYm9vbGVhbjtcbn07XG5cbmNvbnN0IG5hdmlnYXRvclNjcmVlbkFuaW1hdGlvbiA9ICgge1xuXHRpc0luaXRpYWwsXG5cdGlzQmFjayxcblx0aXNSVEwsXG59OiBOYXZpZ2F0b3JTY3JlZW5BbmltYXRpb25Qcm9wcyApID0+IHtcblx0aWYgKCBpc0luaXRpYWwgJiYgISBpc0JhY2sgKSB7XG5cdFx0cmV0dXJuO1xuXHR9XG5cblx0Y29uc3QgYW5pbWF0aW9uTmFtZSA9XG5cdFx0KCBpc1JUTCAmJiBpc0JhY2sgKSB8fCAoICEgaXNSVEwgJiYgISBpc0JhY2sgKVxuXHRcdFx0PyBmYWRlSW5Gcm9tUmlnaHRcblx0XHRcdDogZmFkZUluRnJvbUxlZnQ7XG5cblx0cmV0dXJuIGNzc2Bcblx0XHRhbmltYXRpb24tZHVyYXRpb246IDAuMTRzO1xuXHRcdGFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb246IGVhc2UtaW4tb3V0O1xuXHRcdHdpbGwtY2hhbmdlOiB0cmFuc2Zvcm0sIG9wYWNpdHk7XG5cdFx0YW5pbWF0aW9uLW5hbWU6ICR7IGFuaW1hdGlvbk5hbWUgfTtcblxuXHRcdEBtZWRpYSAoIHByZWZlcnMtcmVkdWNlZC1tb3Rpb24gKSB7XG5cdFx0XHRhbmltYXRpb24tZHVyYXRpb246IDBzO1xuXHRcdH1cblx0YDtcbn07XG5cbmV4cG9ydCBjb25zdCBuYXZpZ2F0b3JTY3JlZW4gPSAoIHByb3BzOiBOYXZpZ2F0b3JTY3JlZW5BbmltYXRpb25Qcm9wcyApID0+IGNzc2Bcblx0LyogRW5zdXJlcyBob3Jpem9udGFsIG92ZXJmbG93IGlzIHZpc3VhbGx5IGFjY2Vzc2libGUgKi9cblx0b3ZlcmZsb3cteDogYXV0bztcblx0LyogSW4gY2FzZSB0aGUgcm9vdCBoYXMgYSBoZWlnaHQsIGl0IHNob3VsZCBub3QgYmUgZXhjZWVkZWQgKi9cblx0bWF4LWhlaWdodDogMTAwJTtcblxuXHQkeyBuYXZpZ2F0b3JTY3JlZW5BbmltYXRpb24oIHByb3BzICkgfVxuYDtcbiJdfQ== */");
exports.navigatorScreen = navigatorScreen;
//# sourceMappingURL=styles.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_react","require","_EMOTION_STRINGIFIED_CSS_ERROR__","navigatorProviderWrapper","process","env","NODE_ENV","name","styles","map","toString","exports","fadeInFromRight","keyframes","opacity","transform","fadeInFromLeft","navigatorScreenAnimation","isInitial","isBack","isRTL","animationName","css","navigatorScreen","props"],"sources":["@wordpress/components/src/navigator/styles.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { css, keyframes } from '@emotion/react';\n\nexport const navigatorProviderWrapper = css`\n\t/* Prevents horizontal overflow while animating screen transitions */\n\toverflow-x: hidden;\n\t/* Mark this subsection of the DOM as isolated, providing performance benefits\n\t * by limiting calculations of layout, style and paint to a DOM subtree rather\n\t * than the entire page.\n\t */\n\tcontain: content;\n`;\n\nconst fadeInFromRight = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX( 50px )`,\n\t},\n\t'100%': { opacity: 1, transform: 'none' },\n} );\n\nconst fadeInFromLeft = keyframes( {\n\t'0%': {\n\t\topacity: 0,\n\t\ttransform: `translateX( -50px )`,\n\t},\n\t'100%': { opacity: 1, transform: 'none' },\n} );\n\ntype NavigatorScreenAnimationProps = {\n\tisInitial?: boolean;\n\tisBack?: boolean;\n\tisRTL: boolean;\n};\n\nconst navigatorScreenAnimation = ( {\n\tisInitial,\n\tisBack,\n\tisRTL,\n}: NavigatorScreenAnimationProps ) => {\n\tif ( isInitial && ! isBack ) {\n\t\treturn;\n\t}\n\n\tconst animationName =\n\t\t( isRTL && isBack ) || ( ! isRTL && ! isBack )\n\t\t\t? fadeInFromRight\n\t\t\t: fadeInFromLeft;\n\n\treturn css`\n\t\tanimation-duration: 0.14s;\n\t\tanimation-timing-function: ease-in-out;\n\t\twill-change: transform, opacity;\n\t\tanimation-name: ${ animationName };\n\n\t\t@media ( prefers-reduced-motion ) {\n\t\t\tanimation-duration: 0s;\n\t\t}\n\t`;\n};\n\nexport const navigatorScreen = ( props: NavigatorScreenAnimationProps ) => css`\n\t/* Ensures horizontal overflow is visually accessible */\n\toverflow-x: auto;\n\t/* In case the root has a height, it should not be exceeded */\n\tmax-height: 100%;\n\n\t${ navigatorScreenAnimation( props ) }\n`;\n"],"mappings":";;;;;;AAGA,IAAAA,MAAA,GAAAC,OAAA;AAAgD,SAAAC,iCAAA;AAEzC,MAAMC,wBAAwB,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAR;AAAA,CAQpC;AAACS,OAAA,CAAAR,wBAAA,GAAAA,wBAAA;AAEF,MAAMS,eAAe,GAAG,IAAAC,gBAAS,EAAE;EAClC,IAAI,EAAE;IACLC,OAAO,EAAE,CAAC;IACVC,SAAS,EAAG;EACb,CAAC;EACD,MAAM,EAAE;IAAED,OAAO,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAO;AACzC,CAAE,CAAC;AAEH,MAAMC,cAAc,GAAG,IAAAH,gBAAS,EAAE;EACjC,IAAI,EAAE;IACLC,OAAO,EAAE,CAAC;IACVC,SAAS,EAAG;EACb,CAAC;EACD,MAAM,EAAE;IAAED,OAAO,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAO;AACzC,CAAE,CAAC;AAQH,MAAME,wBAAwB,GAAGA,CAAE;EAClCC,SAAS;EACTC,MAAM;EACNC;AAC8B,CAAC,KAAM;EACrC,IAAKF,SAAS,IAAI,CAAEC,MAAM,EAAG;IAC5B;EACD;EAEA,MAAME,aAAa,GAChBD,KAAK,IAAID,MAAM,IAAQ,CAAEC,KAAK,IAAI,CAAED,MAAQ,GAC3CP,eAAe,GACfI,cAAc;EAElB,wBAAOM,UAAG,kHAIUD,aAAa,kEAAAjB,OAAA,CAAAC,GAAA,CAAAC,QAAA,8DAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA;AAMlC,CAAC;AAEM,MAAMiB,eAAe,GAAKC,KAAoC,qBAAMF,UAAG,sCAM1EL,wBAAwB,CAAEO,KAAM,CAAC,SAAApB,OAAA,CAAAC,GAAA,CAAAC,QAAA,qDAAAF,OAAA,CAAAC,GAAA,CAAAC,QAAA,mnFACpC;AAACK,OAAA,CAAAY,eAAA,GAAAA,eAAA"}

View File

@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
//# sourceMappingURL=types.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":[],"sources":["@wordpress/components/src/navigator/types.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ReactNode } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { ButtonAsButtonProps } from '../button/types';\n\nexport type MatchParams = Record< string, string | string[] >;\n\nexport type NavigateOptions = {\n\tfocusTargetSelector?: string;\n\tisBack?: boolean;\n\tskipFocus?: boolean;\n\treplace?: boolean;\n};\n\nexport type NavigateToParentOptions = Omit< NavigateOptions, 'isBack' >;\n\nexport type NavigatorLocation = NavigateOptions & {\n\tisInitial?: boolean;\n\tpath?: string;\n\thasRestoredFocus?: boolean;\n};\n\n// Returned by the `useNavigator` hook.\nexport type Navigator = {\n\tlocation: NavigatorLocation;\n\tparams: MatchParams;\n\tgoTo: ( path: string, options?: NavigateOptions ) => void;\n\tgoBack: () => void;\n\tgoToParent: ( options?: NavigateToParentOptions ) => void;\n};\n\nexport type NavigatorContext = Navigator & {\n\taddScreen: ( screen: Screen ) => void;\n\tremoveScreen: ( screen: Screen ) => void;\n\tmatch?: string;\n};\n\nexport type NavigatorProviderProps = {\n\t/**\n\t * The initial active path.\n\t */\n\tinitialPath: string;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n};\n\nexport type NavigatorScreenProps = {\n\t/**\n\t * The screen's path, matched against the current path stored in the navigator.\n\t */\n\tpath: string;\n\t/**\n\t * The children elements.\n\t */\n\tchildren: ReactNode;\n};\n\nexport type NavigatorBackButtonProps = ButtonAsButtonProps;\n\nexport type NavigatorBackButtonHookProps = NavigatorBackButtonProps & {\n\t/**\n\t * Whether we should navigate to the parent screen.\n\t *\n\t * @default 'false'\n\t */\n\tgoToParent?: boolean;\n};\n\nexport type NavigatorToParentButtonProps = NavigatorBackButtonProps;\n\nexport type NavigatorButtonProps = NavigatorBackButtonProps & {\n\t/**\n\t * The path of the screen to navigate to. The value of this prop needs to be\n\t * a valid value for an HTML attribute.\n\t */\n\tpath: string;\n\t/**\n\t * The HTML attribute used to identify the `NavigatorButton`, which is used\n\t * by `Navigator` to restore focus.\n\t *\n\t * @default 'id'\n\t */\n\tattributeName?: string;\n};\n\nexport type Screen = {\n\tid: string;\n\tpath: string;\n};\n"],"mappings":""}

View File

@@ -0,0 +1,38 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _element = require("@wordpress/element");
var _context = require("./context");
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* Retrieves a `navigator` instance.
*/
function useNavigator() {
const {
location,
params,
goTo,
goBack,
goToParent
} = (0, _element.useContext)(_context.NavigatorContext);
return {
location,
goTo,
goBack,
goToParent,
params
};
}
var _default = useNavigator;
exports.default = _default;
//# sourceMappingURL=use-navigator.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_element","require","_context","useNavigator","location","params","goTo","goBack","goToParent","useContext","NavigatorContext","_default","exports","default"],"sources":["@wordpress/components/src/navigator/use-navigator.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigatorContext } from './context';\nimport type { Navigator } from './types';\n\n/**\n * Retrieves a `navigator` instance.\n */\nfunction useNavigator(): Navigator {\n\tconst { location, params, goTo, goBack, goToParent } =\n\t\tuseContext( NavigatorContext );\n\n\treturn {\n\t\tlocation,\n\t\tgoTo,\n\t\tgoBack,\n\t\tgoToParent,\n\t\tparams,\n\t};\n}\n\nexport default useNavigator;\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA,SAASE,YAAYA,CAAA,EAAc;EAClC,MAAM;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAW,CAAC,GACnD,IAAAC,mBAAU,EAAEC,yBAAiB,CAAC;EAE/B,OAAO;IACNN,QAAQ;IACRE,IAAI;IACJC,MAAM;IACNC,UAAU;IACVH;EACD,CAAC;AACF;AAAC,IAAAM,QAAA,GAEcR,YAAY;AAAAS,OAAA,CAAAC,OAAA,GAAAF,QAAA"}

View File

@@ -0,0 +1,48 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.findParent = findParent;
exports.patternMatch = patternMatch;
var _pathToRegexp = require("path-to-regexp");
/**
* External dependencies
*/
function matchPath(path, pattern) {
const matchingFunction = (0, _pathToRegexp.match)(pattern, {
decode: decodeURIComponent
});
return matchingFunction(path);
}
function patternMatch(path, screens) {
for (const screen of screens) {
const matched = matchPath(path, screen.path);
if (matched) {
return {
params: matched.params,
id: screen.id
};
}
}
return undefined;
}
function findParent(path, screens) {
if (!path.startsWith('/')) {
return undefined;
}
const pathParts = path.split('/');
let parentPath;
while (pathParts.length > 1 && parentPath === undefined) {
pathParts.pop();
const potentialParentPath = pathParts.join('/') === '' ? '/' : pathParts.join('/');
if (screens.find(screen => {
return matchPath(potentialParentPath, screen.path) !== false;
})) {
parentPath = potentialParentPath;
}
}
return parentPath;
}
//# sourceMappingURL=router.js.map

View File

@@ -0,0 +1 @@
{"version":3,"names":["_pathToRegexp","require","matchPath","path","pattern","matchingFunction","match","decode","decodeURIComponent","patternMatch","screens","screen","matched","params","id","undefined","findParent","startsWith","pathParts","split","parentPath","length","pop","potentialParentPath","join","find"],"sources":["@wordpress/components/src/navigator/utils/router.ts"],"sourcesContent":["/**\n * External dependencies\n */\nimport { match } from 'path-to-regexp';\n\n/**\n * Internal dependencies\n */\nimport type { Screen, MatchParams } from '../types';\n\nfunction matchPath( path: string, pattern: string ) {\n\tconst matchingFunction = match< MatchParams >( pattern, {\n\t\tdecode: decodeURIComponent,\n\t} );\n\treturn matchingFunction( path );\n}\n\nexport function patternMatch( path: string, screens: Screen[] ) {\n\tfor ( const screen of screens ) {\n\t\tconst matched = matchPath( path, screen.path );\n\t\tif ( matched ) {\n\t\t\treturn { params: matched.params, id: screen.id };\n\t\t}\n\t}\n\n\treturn undefined;\n}\n\nexport function findParent( path: string, screens: Screen[] ) {\n\tif ( ! path.startsWith( '/' ) ) {\n\t\treturn undefined;\n\t}\n\tconst pathParts = path.split( '/' );\n\tlet parentPath;\n\twhile ( pathParts.length > 1 && parentPath === undefined ) {\n\t\tpathParts.pop();\n\t\tconst potentialParentPath =\n\t\t\tpathParts.join( '/' ) === '' ? '/' : pathParts.join( '/' );\n\t\tif (\n\t\t\tscreens.find( ( screen ) => {\n\t\t\t\treturn matchPath( potentialParentPath, screen.path ) !== false;\n\t\t\t} )\n\t\t) {\n\t\t\tparentPath = potentialParentPath;\n\t\t}\n\t}\n\n\treturn parentPath;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,aAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAQA,SAASC,SAASA,CAAEC,IAAY,EAAEC,OAAe,EAAG;EACnD,MAAMC,gBAAgB,GAAG,IAAAC,mBAAK,EAAiBF,OAAO,EAAE;IACvDG,MAAM,EAAEC;EACT,CAAE,CAAC;EACH,OAAOH,gBAAgB,CAAEF,IAAK,CAAC;AAChC;AAEO,SAASM,YAAYA,CAAEN,IAAY,EAAEO,OAAiB,EAAG;EAC/D,KAAM,MAAMC,MAAM,IAAID,OAAO,EAAG;IAC/B,MAAME,OAAO,GAAGV,SAAS,CAAEC,IAAI,EAAEQ,MAAM,CAACR,IAAK,CAAC;IAC9C,IAAKS,OAAO,EAAG;MACd,OAAO;QAAEC,MAAM,EAAED,OAAO,CAACC,MAAM;QAAEC,EAAE,EAAEH,MAAM,CAACG;MAAG,CAAC;IACjD;EACD;EAEA,OAAOC,SAAS;AACjB;AAEO,SAASC,UAAUA,CAAEb,IAAY,EAAEO,OAAiB,EAAG;EAC7D,IAAK,CAAEP,IAAI,CAACc,UAAU,CAAE,GAAI,CAAC,EAAG;IAC/B,OAAOF,SAAS;EACjB;EACA,MAAMG,SAAS,GAAGf,IAAI,CAACgB,KAAK,CAAE,GAAI,CAAC;EACnC,IAAIC,UAAU;EACd,OAAQF,SAAS,CAACG,MAAM,GAAG,CAAC,IAAID,UAAU,KAAKL,SAAS,EAAG;IAC1DG,SAAS,CAACI,GAAG,CAAC,CAAC;IACf,MAAMC,mBAAmB,GACxBL,SAAS,CAACM,IAAI,CAAE,GAAI,CAAC,KAAK,EAAE,GAAG,GAAG,GAAGN,SAAS,CAACM,IAAI,CAAE,GAAI,CAAC;IAC3D,IACCd,OAAO,CAACe,IAAI,CAAId,MAAM,IAAM;MAC3B,OAAOT,SAAS,CAAEqB,mBAAmB,EAAEZ,MAAM,CAACR,IAAK,CAAC,KAAK,KAAK;IAC/D,CAAE,CAAC,EACF;MACDiB,UAAU,GAAGG,mBAAmB;IACjC;EACD;EAEA,OAAOH,UAAU;AAClB"}