@wordpress/components 18.0.0 → 19.0.3

package/build/navigator/navigator-provider/component.js

@@ -11,35 +11,44 @@ var _element = require("@wordpress/element");
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _react = require("@emotion/react");
+
 var _context = require("../../ui/context");
 
+var _useCx = require("../../utils/hooks/use-cx");
+
 var _view = require("../../view");
 
 var _context2 = require("../context");
 
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
+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)."; }
 
-/**
- * WordPress dependencies
- */
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "15bx5k",
+  styles: "overflow-x:hidden"
+} : {
+  name: "192ebb7-classes",
+  styles: "overflow-x:hidden;label:classes;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1wcm92aWRlci9jb21wb25lbnQudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTJDWSIsImZpbGUiOiJAd29yZHByZXNzL2NvbXBvbmVudHMvc3JjL25hdmlnYXRvci9uYXZpZ2F0b3ItcHJvdmlkZXIvY29tcG9uZW50LnRzeCIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogRXh0ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBuby1yZXN0cmljdGVkLWltcG9ydHNcbmltcG9ydCB0eXBlIHsgUmVmIH0gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuXG4vKipcbiAqIFdvcmRQcmVzcyBkZXBlbmRlbmNpZXNcbiAqL1xuaW1wb3J0IHsgdXNlTWVtbywgdXNlU3RhdGUgfSBmcm9tICdAd29yZHByZXNzL2VsZW1lbnQnO1xuXG4vKipcbiAqIEludGVybmFsIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQge1xuXHRjb250ZXh0Q29ubmVjdCxcblx0dXNlQ29udGV4dFN5c3RlbSxcblx0V29yZFByZXNzQ29tcG9uZW50UHJvcHMsXG59IGZyb20gJy4uLy4uL3VpL2NvbnRleHQnO1xuaW1wb3J0IHsgdXNlQ3ggfSBmcm9tICcuLi8uLi91dGlscy9ob29rcy91c2UtY3gnO1xuaW1wb3J0IHsgVmlldyB9IGZyb20gJy4uLy4uL3ZpZXcnO1xuaW1wb3J0IHsgTmF2aWdhdG9yQ29udGV4dCB9IGZyb20gJy4uL2NvbnRleHQnO1xuaW1wb3J0IHR5cGUgeyBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCBOYXZpZ2F0b3JQYXRoIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5mdW5jdGlvbiBOYXZpZ2F0b3JQcm92aWRlcihcblx0cHJvcHM6IFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JQcm92aWRlclByb3BzLCAnZGl2JyA+LFxuXHRmb3J3YXJkZWRSZWY6IFJlZjwgYW55ID5cbikge1xuXHRjb25zdCB7XG5cdFx0aW5pdGlhbFBhdGgsXG5cdFx0Y2hpbGRyZW4sXG5cdFx0Y2xhc3NOYW1lLFxuXHRcdC4uLm90aGVyUHJvcHNcblx0fSA9IHVzZUNvbnRleHRTeXN0ZW0oIHByb3BzLCAnTmF2aWdhdG9yUHJvdmlkZXInICk7XG5cblx0Y29uc3QgWyBwYXRoLCBzZXRQYXRoIF0gPSB1c2VTdGF0ZTwgTmF2aWdhdG9yUGF0aCA+KCB7XG5cdFx0cGF0aDogaW5pdGlhbFBhdGgsXG5cdH0gKTtcblxuXHRjb25zdCBjeCA9IHVzZUN4KCk7XG5cdGNvbnN0IGNsYXNzZXMgPSB1c2VNZW1vKFxuXHRcdC8vIFByZXZlbnRzIGhvcml6b250YWwgb3ZlcmZsb3cgd2hpbGUgYW5pbWF0aW5nIHNjcmVlbiB0cmFuc2l0aW9uc1xuXHRcdCgpID0+IGN4KCBjc3MoIHsgb3ZlcmZsb3dYOiAnaGlkZGVuJyB9ICksIGNsYXNzTmFtZSApLFxuXHRcdFsgY2xhc3NOYW1lIF1cblx0KTtcblxuXHRyZXR1cm4gKFxuXHRcdDxWaWV3IHJlZj17IGZvcndhcmRlZFJlZiB9IGNsYXNzTmFtZT17IGNsYXNzZXMgfSB7IC4uLm90aGVyUHJvcHMgfT5cblx0XHRcdDxOYXZpZ2F0b3JDb250ZXh0LlByb3ZpZGVyIHZhbHVlPXsgWyBwYXRoLCBzZXRQYXRoIF0gfT5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L05hdmlnYXRvckNvbnRleHQuUHJvdmlkZXI+XG5cdFx0PC9WaWV3PlxuXHQpO1xufVxuXG4vKipcbiAqIFRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudCBhbGxvd3MgcmVuZGVyaW5nIG5lc3RlZCBwYW5lbHMgb3IgbWVudXMgKHZpYSB0aGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50KSBhbmQgbmF2aWdhdGUgYmV0d2VlbiB0aGVzZSBkaWZmZXJlbnQgc3RhdGVzICh2aWEgdGhlIGB1c2VOYXZpZ2F0b3JgIGhvb2spLlxuICogVGhlIEdsb2JhbCBTdHlsZXMgc2lkZWJhciBpcyBhbiBleGFtcGxlIG9mIHRoaXMuIFRoZSBgTmF2aWdhdG9yKmAgZmFtaWx5IG9mIGNvbXBvbmVudHMgaXMgX25vdF8gb3BpbmlvbmF0ZWQgaW4gdGVybXMgb2YgVUksIGFuZCBjYW4gYmUgY29tcG9zZWQgd2l0aCBhbnkgVUkgY29tcG9uZW50cyB0byBuYXZpZ2F0ZSBiZXR3ZWVuIHRoZSBuZXN0ZWQgc2NyZWVucy5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsVXNlTmF2aWdhdG9yIGFzIHVzZU5hdmlnYXRvcixcbiAqIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCdXR0b24oIHtcbiAqICAgcGF0aCxcbiAqICAgaXNCYWNrID0gZmFsc2UsXG4gKiAgIC4uLnByb3BzXG4gKiB9ICkge1xuICogICBjb25zdCBuYXZpZ2F0b3IgPSB1c2VOYXZpZ2F0b3IoKTtcbiAqICAgcmV0dXJuIChcbiAqICAgXHQ8QnV0dG9uXG4gKiAgIFx0ICBvbkNsaWNrPXsgKCkgPT4gbmF2aWdhdG9yLnB1c2goIHBhdGgsIHsgaXNCYWNrIH0gKSB9XG4gKiAgIFx0ICB7IC4uLnByb3BzIH1cbiAqICAgXHQvPlxuICogICApO1xuICogfVxuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgXHQgICA8TmF2aWdhdG9yQnV0dG9uIGlzUHJpbWFyeSBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICAgICBOYXZpZ2F0ZSB0byBjaGlsZCBzY3JlZW4uXG4gKiAgICAgICA8L05hdmlnYXRvckJ1dHRvbj5cbiAqICAgICA8L05hdmlnYXRvclNjcmVlbj5cbiAqXG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICA8cD5UaGlzIGlzIHRoZSBjaGlsZCBzY3JlZW4uPC9wPlxuICogICAgICAgPE5hdmlnYXRvckJ1dHRvbiBpc1ByaW1hcnkgcGF0aD1cIi9cIiBpc0JhY2s+XG4gKiAgICAgICAgIEdvIGJhY2tcbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JQcm92aWRlciA9IGNvbnRleHRDb25uZWN0KFxuXHROYXZpZ2F0b3JQcm92aWRlcixcblx0J05hdmlnYXRvclByb3ZpZGVyJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yUHJvdmlkZXI7XG4iXX0= */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 
-/**
- * Internal dependencies
- */
 function NavigatorProvider(props, forwardedRef) {
   const {
     initialPath,
     children,
+    className,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'NavigatorProvider');
   const [path, setPath] = (0, _element.useState)({
     path: initialPath
   });
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)( // Prevents horizontal overflow while animating screen transitions
+  () => cx(_ref, className), [className]);
   return (0, _element.createElement)(_view.View, (0, _extends2.default)({
-    ref: forwardedRef
+    ref: forwardedRef,
+    className: classes
   }, otherProps), (0, _element.createElement)(_context2.NavigatorContext.Provider, {
     value: [path, setPath]
   }, children));

package/build/navigator/navigator-provider/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["NavigatorProvider","props","forwardedRef","initialPath","children","otherProps","path","setPath","ConnectedNavigatorProvider"],"mappings":";;;;;;;;;AASA;;;;AAKA;;AAKA;;AACA;;AApBA;AACA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAUA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,QAAf;AAAyB,OAAGC;AAA5B,MAA2C,+BAChDJ,KADgD,EAEhD,mBAFgD,CAAjD;AAKA,QAAM,CAAEK,IAAF,EAAQC,OAAR,IAAoB,uBAA2B;AACpDD,IAAAA,IAAI,EAAEH;AAD8C,GAA3B,CAA1B;AAIA,SACC,4BAAC,UAAD;AAAM,IAAA,GAAG,EAAGD;AAAZ,KAAgCG,UAAhC,GACC,4BAAC,0BAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAG,CAAEC,IAAF,EAAQC,OAAR;AAAnC,KACGH,QADH,CADD,CADD;AAOA;AAED;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMI,0BAA0B,GAAG,6BAClCR,iBADkC,EAElC,mBAFkC,CAAnC;eAKeQ,0B","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorProviderProps, NavigatorPath } from '../types';\n\nfunction NavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: Ref< any >\n) {\n\tconst { initialPath, children, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorProvider'\n\t);\n\n\tconst [ path, setPath ] = useState< NavigatorPath >( {\n\t\tpath: initialPath,\n\t} );\n\n\treturn (\n\t\t<View ref={ forwardedRef } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ [ path, setPath ] }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\n/**\n * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).\n * The Global Styles sidebar is an example of this. The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalUseNavigator as useNavigator,\n * } from '@wordpress/components';\n *\n * function NavigatorButton( {\n *   path,\n *   isBack = false,\n *   ...props\n * } ) {\n *   const navigator = useNavigator();\n *   return (\n *   \t<Button\n *   \t  onClick={ () => navigator.push( path, { isBack } ) }\n *   \t  { ...props }\n *   \t/>\n *   );\n * }\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *   \t   <NavigatorButton isPrimary 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 *       <NavigatorButton isPrimary path=\"/\" isBack>\n *         Go back\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorProvider = contextConnect(\n\tNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default ConnectedNavigatorProvider;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["NavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","path","setPath","cx","classes","ConnectedNavigatorProvider"],"mappings":";;;;;;;;;AAUA;;;;AALA;;AAUA;;AAKA;;AACA;;AACA;;;;;;;;;;;;;;AAGA,SAASA,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,WADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAIL,OAAGC;AAJE,MAKF,+BAAkBL,KAAlB,EAAyB,mBAAzB,CALJ;AAOA,QAAM,CAAEM,IAAF,EAAQC,OAAR,IAAoB,uBAA2B;AACpDD,IAAAA,IAAI,EAAEJ;AAD8C,GAA3B,CAA1B;AAIA,QAAMM,EAAE,GAAG,mBAAX;AACA,QAAMC,OAAO,GAAG,uBACf;AACA,QAAMD,EAAE,OAAkCJ,SAAlC,CAFO,EAGf,CAAEA,SAAF,CAHe,CAAhB;AAMA,SACC,4BAAC,UAAD;AAAM,IAAA,GAAG,EAAGH,YAAZ;AAA2B,IAAA,SAAS,EAAGQ;AAAvC,KAAsDJ,UAAtD,GACC,4BAAC,0BAAD,CAAkB,QAAlB;AAA2B,IAAA,KAAK,EAAG,CAAEC,IAAF,EAAQC,OAAR;AAAnC,KACGJ,QADH,CADD,CADD;AAOA;AAED;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,MAAMO,0BAA0B,GAAG,6BAClCX,iBADkC,EAElC,mBAFkC,CAAnC;eAKeW,0B","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useMemo, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorProviderProps, NavigatorPath } from '../types';\n\nfunction NavigatorProvider(\n\tprops: WordPressComponentProps< NavigatorProviderProps, 'div' >,\n\tforwardedRef: Ref< any >\n) {\n\tconst {\n\t\tinitialPath,\n\t\tchildren,\n\t\tclassName,\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorProvider' );\n\n\tconst [ path, setPath ] = useState< NavigatorPath >( {\n\t\tpath: initialPath,\n\t} );\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t// Prevents horizontal overflow while animating screen transitions\n\t\t() => cx( css( { overflowX: 'hidden' } ), className ),\n\t\t[ className ]\n\t);\n\n\treturn (\n\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t<NavigatorContext.Provider value={ [ path, setPath ] }>\n\t\t\t\t{ children }\n\t\t\t</NavigatorContext.Provider>\n\t\t</View>\n\t);\n}\n\n/**\n * The `NavigatorProvider` component allows rendering nested panels or menus (via the `NavigatorScreen` component) and navigate between these different states (via the `useNavigator` hook).\n * The Global Styles sidebar is an example of this. The `Navigator*` family of components is _not_ opinionated in terms of UI, and can be composed with any UI components to navigate between the nested screens.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalUseNavigator as useNavigator,\n * } from '@wordpress/components';\n *\n * function NavigatorButton( {\n *   path,\n *   isBack = false,\n *   ...props\n * } ) {\n *   const navigator = useNavigator();\n *   return (\n *   \t<Button\n *   \t  onClick={ () => navigator.push( path, { isBack } ) }\n *   \t  { ...props }\n *   \t/>\n *   );\n * }\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *   \t   <NavigatorButton isPrimary 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 *       <NavigatorButton isPrimary path=\"/\" isBack>\n *         Go back\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorProvider = contextConnect(\n\tNavigatorProvider,\n\t'NavigatorProvider'\n);\n\nexport default ConnectedNavigatorProvider;\n"]}

package/build/navigator/navigator-screen/component.js

@@ -13,45 +13,51 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _framerMotion = require("framer-motion");
 
+var _react = require("@emotion/react");
+
 var _compose = require("@wordpress/compose");
 
 var _i18n = require("@wordpress/i18n");
 
 var _context = require("../../ui/context");
 
+var _useCx = require("../../utils/hooks/use-cx");
+
 var _view = require("../../view");
 
 var _context2 = require("../context");
 
-/**
- * External dependencies
- */
-// eslint-disable-next-line no-restricted-imports
-// eslint-disable-next-line no-restricted-imports
-
-/**
- * WordPress dependencies
- */
+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)."; }
 
-/**
- * Internal dependencies
- */
 const animationEnterDelay = 0;
 const animationEnterDuration = 0.14;
 const animationExitDuration = 0.14;
 const animationExitDelay = 0; // Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,
 // as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)
 
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "14x3t6z",
+  styles: "overflow-x:auto;max-height:100%"
+} : {
+  name: "1ulogbc-classes",
+  styles: "overflow-x:auto;max-height:100%;label:classes;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkB3b3JkcHJlc3MvY29tcG9uZW50cy9zcmMvbmF2aWdhdG9yL25hdmlnYXRvci1zY3JlZW4vY29tcG9uZW50LnRzeCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUF3REkiLCJmaWxlIjoiQHdvcmRwcmVzcy9jb21wb25lbnRzL3NyYy9uYXZpZ2F0b3IvbmF2aWdhdG9yLXNjcmVlbi9jb21wb25lbnQudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBFeHRlcm5hbCBkZXBlbmRlbmNpZXNcbiAqL1xuLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLXJlc3RyaWN0ZWQtaW1wb3J0c1xuaW1wb3J0IHR5cGUgeyBSZWYgfSBmcm9tICdyZWFjdCc7XG4vLyBlc2xpbnQtZGlzYWJsZS1uZXh0LWxpbmUgbm8tcmVzdHJpY3RlZC1pbXBvcnRzXG5pbXBvcnQgeyBtb3Rpb24sIE1vdGlvblByb3BzIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbi8qKlxuICogV29yZFByZXNzIGRlcGVuZGVuY2llc1xuICovXG5pbXBvcnQgeyB1c2VDb250ZXh0LCB1c2VFZmZlY3QsIHVzZVN0YXRlLCB1c2VNZW1vIH0gZnJvbSAnQHdvcmRwcmVzcy9lbGVtZW50JztcbmltcG9ydCB7IHVzZVJlZHVjZWRNb3Rpb24sIHVzZUZvY3VzT25Nb3VudCB9IGZyb20gJ0B3b3JkcHJlc3MvY29tcG9zZSc7XG5pbXBvcnQgeyBpc1JUTCB9IGZyb20gJ0B3b3JkcHJlc3MvaTE4bic7XG5cbi8qKlxuICogSW50ZXJuYWwgZGVwZW5kZW5jaWVzXG4gKi9cbmltcG9ydCB7XG5cdGNvbnRleHRDb25uZWN0LFxuXHR1c2VDb250ZXh0U3lzdGVtLFxuXHRXb3JkUHJlc3NDb21wb25lbnRQcm9wcyxcbn0gZnJvbSAnLi4vLi4vdWkvY29udGV4dCc7XG5pbXBvcnQgeyB1c2VDeCB9IGZyb20gJy4uLy4uL3V0aWxzL2hvb2tzL3VzZS1jeCc7XG5pbXBvcnQgeyBWaWV3IH0gZnJvbSAnLi4vLi4vdmlldyc7XG5pbXBvcnQgeyBOYXZpZ2F0b3JDb250ZXh0IH0gZnJvbSAnLi4vY29udGV4dCc7XG5pbXBvcnQgdHlwZSB7IE5hdmlnYXRvclNjcmVlblByb3BzIH0gZnJvbSAnLi4vdHlwZXMnO1xuXG5jb25zdCBhbmltYXRpb25FbnRlckRlbGF5ID0gMDtcbmNvbnN0IGFuaW1hdGlvbkVudGVyRHVyYXRpb24gPSAwLjE0O1xuY29uc3QgYW5pbWF0aW9uRXhpdER1cmF0aW9uID0gMC4xNDtcbmNvbnN0IGFuaW1hdGlvbkV4aXREZWxheSA9IDA7XG5cbi8vIFByb3BzIHNwZWNpZmljIHRvIGBmcmFtZXItbW90aW9uYCBjYW4ndCBiZSBjdXJyZW50bHkgcGFzc2VkIHRvIGBOYXZpZ2F0b3JTY3JlZW5gLFxuLy8gYXMgc29tZSBvZiB0aGVtIHdvdWxkIG92ZXJsYXAgd2l0aCBIVE1MIHByb3BzIChlLmcuIGBvbkFuaW1hdGlvblN0YXJ0YCwgLi4uKVxudHlwZSBQcm9wcyA9IE9taXQ8XG5cdFdvcmRQcmVzc0NvbXBvbmVudFByb3BzPCBOYXZpZ2F0b3JTY3JlZW5Qcm9wcywgJ2RpdicsIGZhbHNlID4sXG5cdGtleW9mIE1vdGlvblByb3BzXG4+O1xuXG5mdW5jdGlvbiBOYXZpZ2F0b3JTY3JlZW4oIHByb3BzOiBQcm9wcywgZm9yd2FyZGVkUmVmOiBSZWY8IGFueSA+ICkge1xuXHRjb25zdCB7IGNoaWxkcmVuLCBjbGFzc05hbWUsIHBhdGgsIC4uLm90aGVyUHJvcHMgfSA9IHVzZUNvbnRleHRTeXN0ZW0oXG5cdFx0cHJvcHMsXG5cdFx0J05hdmlnYXRvclNjcmVlbidcblx0KTtcblxuXHRjb25zdCBwcmVmZXJzUmVkdWNlZE1vdGlvbiA9IHVzZVJlZHVjZWRNb3Rpb24oKTtcblx0Y29uc3QgWyBjdXJyZW50UGF0aCBdID0gdXNlQ29udGV4dCggTmF2aWdhdG9yQ29udGV4dCApO1xuXHRjb25zdCBpc01hdGNoID0gY3VycmVudFBhdGgucGF0aCA9PT0gcGF0aDtcblx0Y29uc3QgcmVmID0gdXNlRm9jdXNPbk1vdW50KCk7XG5cblx0Y29uc3QgY3ggPSB1c2VDeCgpO1xuXHRjb25zdCBjbGFzc2VzID0gdXNlTWVtbyhcblx0XHQoKSA9PlxuXHRcdFx0Y3goXG5cdFx0XHRcdGNzcygge1xuXHRcdFx0XHRcdC8vIEVuc3VyZXMgaG9yaXpvbnRhbCBvdmVyZmxvdyBpcyB2aXN1YWxseSBhY2Nlc3NpYmxlXG5cdFx0XHRcdFx0b3ZlcmZsb3dYOiAnYXV0bycsXG5cdFx0XHRcdFx0Ly8gSW4gY2FzZSB0aGUgcm9vdCBoYXMgYSBoZWlnaHQsIGl0IHNob3VsZCBub3QgYmUgZXhjZWVkZWRcblx0XHRcdFx0XHRtYXhIZWlnaHQ6ICcxMDAlJyxcblx0XHRcdFx0fSApLFxuXHRcdFx0XHRjbGFzc05hbWVcblx0XHRcdCksXG5cdFx0WyBjbGFzc05hbWUgXVxuXHQpO1xuXG5cdC8vIFRoaXMgZmxhZyBpcyB1c2VkIHRvIG9ubHkgYXBwbHkgdGhlIGZvY3VzIG9uIG1vdW50IHdoZW4gdGhlIGFjdHVhbCBwYXRoIGNoYW5nZXMuXG5cdC8vIEl0IGF2b2lkcyB0aGUgZm9jdXMgdG8gaGFwcGVuIG9uIHRoZSBmaXJzdCByZW5kZXIuXG5cdGNvbnN0IFsgaGFzUGF0aENoYW5nZWQsIHNldEhhc1BhdGhDaGFuZ2VkIF0gPSB1c2VTdGF0ZSggZmFsc2UgKTtcblx0dXNlRWZmZWN0KCAoKSA9PiB7XG5cdFx0c2V0SGFzUGF0aENoYW5nZWQoIHRydWUgKTtcblx0fSwgWyBwYXRoIF0gKTtcblxuXHRpZiAoICEgaXNNYXRjaCApIHtcblx0XHRyZXR1cm4gbnVsbDtcblx0fVxuXG5cdGlmICggcHJlZmVyc1JlZHVjZWRNb3Rpb24gKSB7XG5cdFx0cmV0dXJuIChcblx0XHRcdDxWaWV3IHJlZj17IGZvcndhcmRlZFJlZiB9IGNsYXNzTmFtZT17IGNsYXNzZXMgfSB7IC4uLm90aGVyUHJvcHMgfT5cblx0XHRcdFx0eyBjaGlsZHJlbiB9XG5cdFx0XHQ8L1ZpZXc+XG5cdFx0KTtcblx0fVxuXG5cdGNvbnN0IGFuaW1hdGUgPSB7XG5cdFx0b3BhY2l0eTogMSxcblx0XHR0cmFuc2l0aW9uOiB7XG5cdFx0XHRkZWxheTogYW5pbWF0aW9uRW50ZXJEZWxheSxcblx0XHRcdGR1cmF0aW9uOiBhbmltYXRpb25FbnRlckR1cmF0aW9uLFxuXHRcdFx0ZWFzZTogJ2Vhc2VJbk91dCcsXG5cdFx0fSxcblx0XHR4OiAwLFxuXHR9O1xuXHRjb25zdCBpbml0aWFsID0ge1xuXHRcdG9wYWNpdHk6IDAsXG5cdFx0eDpcblx0XHRcdCggaXNSVEwoKSAmJiBjdXJyZW50UGF0aC5pc0JhY2sgKSB8fFxuXHRcdFx0KCAhIGlzUlRMKCkgJiYgISBjdXJyZW50UGF0aC5pc0JhY2sgKVxuXHRcdFx0XHQ/IDUwXG5cdFx0XHRcdDogLTUwLFxuXHR9O1xuXHRjb25zdCBleGl0ID0ge1xuXHRcdGRlbGF5OiBhbmltYXRpb25FeGl0RGVsYXksXG5cdFx0b3BhY2l0eTogMCxcblx0XHR4OlxuXHRcdFx0KCAhIGlzUlRMKCkgJiYgY3VycmVudFBhdGguaXNCYWNrICkgfHxcblx0XHRcdCggaXNSVEwoKSAmJiAhIGN1cnJlbnRQYXRoLmlzQmFjayApXG5cdFx0XHRcdD8gNTBcblx0XHRcdFx0OiAtNTAsXG5cdFx0dHJhbnNpdGlvbjoge1xuXHRcdFx0ZHVyYXRpb246IGFuaW1hdGlvbkV4aXREdXJhdGlvbixcblx0XHRcdGVhc2U6ICdlYXNlSW5PdXQnLFxuXHRcdH0sXG5cdH07XG5cblx0Y29uc3QgYW5pbWF0ZWRQcm9wcyA9IHtcblx0XHRhbmltYXRlLFxuXHRcdGV4aXQsXG5cdFx0aW5pdGlhbCxcblx0fTtcblxuXHRyZXR1cm4gKFxuXHRcdDxtb3Rpb24uZGl2XG5cdFx0XHRyZWY9eyBoYXNQYXRoQ2hhbmdlZCA/IHJlZiA6IHVuZGVmaW5lZCB9XG5cdFx0XHRjbGFzc05hbWU9eyBjbGFzc2VzIH1cblx0XHRcdHsgLi4ub3RoZXJQcm9wcyB9XG5cdFx0XHR7IC4uLmFuaW1hdGVkUHJvcHMgfVxuXHRcdD5cblx0XHRcdHsgY2hpbGRyZW4gfVxuXHRcdDwvbW90aW9uLmRpdj5cblx0KTtcbn1cblxuLyoqXG4gKiBUaGUgYE5hdmlnYXRvclNjcmVlbmAgY29tcG9uZW50IHJlcHJlc2VudHMgYSBzaW5nbGUgdmlldy9zY3JlZW4vcGFuZWwvbWVudSBhbmQgaXMgc3VwcG9zZWQgdG8gYmUgdXNlZCBpbiBjb21iaW5hdGlvbiB3aXRoIHRoZSBgTmF2aWdhdG9yUHJvdmlkZXJgIGNvbXBvbmVudC5cbiAqXG4gKiBAZXhhbXBsZVxuICogYGBganN4XG4gKiBpbXBvcnQge1xuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclByb3ZpZGVyIGFzIE5hdmlnYXRvclByb3ZpZGVyLFxuICogICBfX2V4cGVyaW1lbnRhbE5hdmlnYXRvclNjcmVlbiBhcyBOYXZpZ2F0b3JTY3JlZW4sXG4gKiAgIF9fZXhwZXJpbWVudGFsVXNlTmF2aWdhdG9yIGFzIHVzZU5hdmlnYXRvcixcbiAqIH0gZnJvbSAnQHdvcmRwcmVzcy9jb21wb25lbnRzJztcbiAqXG4gKiBmdW5jdGlvbiBOYXZpZ2F0b3JCdXR0b24oIHtcbiAqICAgcGF0aCxcbiAqICAgaXNCYWNrID0gZmFsc2UsXG4gKiAgIC4uLnByb3BzXG4gKiB9ICkge1xuICogICBjb25zdCBuYXZpZ2F0b3IgPSB1c2VOYXZpZ2F0b3IoKTtcbiAqICAgcmV0dXJuIChcbiAqICAgXHQ8QnV0dG9uXG4gKiAgIFx0ICBvbkNsaWNrPXsgKCkgPT4gbmF2aWdhdG9yLnB1c2goIHBhdGgsIHsgaXNCYWNrIH0gKSB9XG4gKiAgIFx0ICB7IC4uLnByb3BzIH1cbiAqICAgXHQvPlxuICogICApO1xuICogfVxuICpcbiAqIGNvbnN0IE15TmF2aWdhdGlvbiA9ICgpID0+IChcbiAqICAgPE5hdmlnYXRvclByb3ZpZGVyIGluaXRpYWxQYXRoPVwiL1wiPlxuICogICAgIDxOYXZpZ2F0b3JTY3JlZW4gcGF0aD1cIi9cIj5cbiAqICAgICAgIDxwPlRoaXMgaXMgdGhlIGhvbWUgc2NyZWVuLjwvcD5cbiAqICAgXHQgICA8TmF2aWdhdG9yQnV0dG9uIGlzUHJpbWFyeSBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICAgICBOYXZpZ2F0ZSB0byBjaGlsZCBzY3JlZW4uXG4gKiAgICAgICA8L05hdmlnYXRvckJ1dHRvbj5cbiAqICAgICA8L05hdmlnYXRvclNjcmVlbj5cbiAqXG4gKiAgICAgPE5hdmlnYXRvclNjcmVlbiBwYXRoPVwiL2NoaWxkXCI+XG4gKiAgICAgICA8cD5UaGlzIGlzIHRoZSBjaGlsZCBzY3JlZW4uPC9wPlxuICogICAgICAgPE5hdmlnYXRvckJ1dHRvbiBpc1ByaW1hcnkgcGF0aD1cIi9cIiBpc0JhY2s+XG4gKiAgICAgICAgIEdvIGJhY2tcbiAqICAgICAgIDwvTmF2aWdhdG9yQnV0dG9uPlxuICogICAgIDwvTmF2aWdhdG9yU2NyZWVuPlxuICogICA8L05hdmlnYXRvclByb3ZpZGVyPlxuICogKTtcbiAqIGBgYFxuICovXG5jb25zdCBDb25uZWN0ZWROYXZpZ2F0b3JTY3JlZW4gPSBjb250ZXh0Q29ubmVjdChcblx0TmF2aWdhdG9yU2NyZWVuLFxuXHQnTmF2aWdhdG9yU2NyZWVuJ1xuKTtcblxuZXhwb3J0IGRlZmF1bHQgQ29ubmVjdGVkTmF2aWdhdG9yU2NyZWVuO1xuIl19 */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
 function NavigatorScreen(props, forwardedRef) {
   const {
     children,
+    className,
     path,
     ...otherProps
   } = (0, _context.useContextSystem)(props, 'NavigatorScreen');
   const prefersReducedMotion = (0, _compose.useReducedMotion)();
   const [currentPath] = (0, _element.useContext)(_context2.NavigatorContext);
   const isMatch = currentPath.path === path;
-  const ref = (0, _compose.useFocusOnMount)(); // This flag is used to only apply the focus on mount when the actual path changes.
+  const ref = (0, _compose.useFocusOnMount)();
+  const cx = (0, _useCx.useCx)();
+  const classes = (0, _element.useMemo)(() => cx(_ref, className), [className]); // This flag is used to only apply the focus on mount when the actual path changes.
   // It avoids the focus to happen on the first render.
 
   const [hasPathChanged, setHasPathChanged] = (0, _element.useState)(false);
@@ -65,7 +71,8 @@ function NavigatorScreen(props, forwardedRef) {
 
   if (prefersReducedMotion) {
     return (0, _element.createElement)(_view.View, (0, _extends2.default)({
-      ref: forwardedRef
+      ref: forwardedRef,
+      className: classes
     }, otherProps), children);
   }
 
@@ -97,7 +104,8 @@ function NavigatorScreen(props, forwardedRef) {
     initial
   };
   return (0, _element.createElement)(_framerMotion.motion.div, (0, _extends2.default)({
-    ref: hasPathChanged ? ref : undefined
+    ref: hasPathChanged ? ref : undefined,
+    className: classes
   }, otherProps, animatedProps), children);
 }
 /**

package/build/navigator/navigator-screen/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","path","otherProps","prefersReducedMotion","currentPath","NavigatorContext","isMatch","ref","hasPathChanged","setHasPathChanged","animate","opacity","transition","delay","duration","ease","x","initial","isBack","exit","animatedProps","undefined","ConnectedNavigatorScreen"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState } from '@wordpress/element';\nimport { useReducedMotion, useFocusOnMount } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {\n\tconst { children, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst [ currentPath ] = useContext( NavigatorContext );\n\tconst isMatch = currentPath.path === path;\n\tconst ref = useFocusOnMount();\n\n\t// This flag is used to only apply the focus on mount when the actual path changes.\n\t// It avoids the focus to happen on the first render.\n\tconst [ hasPathChanged, setHasPathChanged ] = useState( false );\n\tuseEffect( () => {\n\t\tsetHasPathChanged( true );\n\t}, [ path ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View ref={ forwardedRef } { ...otherProps }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && currentPath.isBack ) ||\n\t\t\t( ! isRTL() && ! currentPath.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && currentPath.isBack ) ||\n\t\t\t( isRTL() && ! currentPath.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ hasPathChanged ? ref : undefined }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with the `NavigatorProvider` component.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalUseNavigator as useNavigator,\n * } from '@wordpress/components';\n *\n * function NavigatorButton( {\n *   path,\n *   isBack = false,\n *   ...props\n * } ) {\n *   const navigator = useNavigator();\n *   return (\n *   \t<Button\n *   \t  onClick={ () => navigator.push( path, { isBack } ) }\n *   \t  { ...props }\n *   \t/>\n *   );\n * }\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *   \t   <NavigatorButton isPrimary 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 *       <NavigatorButton isPrimary path=\"/\" isBack>\n *         Go back\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorScreen = contextConnect(\n\tNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default ConnectedNavigatorScreen;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","currentPath","NavigatorContext","isMatch","ref","cx","classes","hasPathChanged","setHasPathChanged","animate","opacity","transition","delay","duration","ease","x","initial","isBack","exit","animatedProps","undefined","ConnectedNavigatorScreen"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\n// eslint-disable-next-line no-restricted-imports\nimport type { Ref } from 'react';\n// eslint-disable-next-line no-restricted-imports\nimport { motion, MotionProps } from 'framer-motion';\nimport { css } from '@emotion/react';\n\n/**\n * WordPress dependencies\n */\nimport { useContext, useEffect, useState, useMemo } from '@wordpress/element';\nimport { useReducedMotion, useFocusOnMount } from '@wordpress/compose';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcontextConnect,\n\tuseContextSystem,\n\tWordPressComponentProps,\n} from '../../ui/context';\nimport { useCx } from '../../utils/hooks/use-cx';\nimport { View } from '../../view';\nimport { NavigatorContext } from '../context';\nimport type { NavigatorScreenProps } from '../types';\n\nconst animationEnterDelay = 0;\nconst animationEnterDuration = 0.14;\nconst animationExitDuration = 0.14;\nconst animationExitDelay = 0;\n\n// Props specific to `framer-motion` can't be currently passed to `NavigatorScreen`,\n// as some of them would overlap with HTML props (e.g. `onAnimationStart`, ...)\ntype Props = Omit<\n\tWordPressComponentProps< NavigatorScreenProps, 'div', false >,\n\tkeyof MotionProps\n>;\n\nfunction NavigatorScreen( props: Props, forwardedRef: Ref< any > ) {\n\tconst { children, className, path, ...otherProps } = useContextSystem(\n\t\tprops,\n\t\t'NavigatorScreen'\n\t);\n\n\tconst prefersReducedMotion = useReducedMotion();\n\tconst [ currentPath ] = useContext( NavigatorContext );\n\tconst isMatch = currentPath.path === path;\n\tconst ref = useFocusOnMount();\n\n\tconst cx = useCx();\n\tconst classes = useMemo(\n\t\t() =>\n\t\t\tcx(\n\t\t\t\tcss( {\n\t\t\t\t\t// Ensures horizontal overflow is visually accessible\n\t\t\t\t\toverflowX: 'auto',\n\t\t\t\t\t// In case the root has a height, it should not be exceeded\n\t\t\t\t\tmaxHeight: '100%',\n\t\t\t\t} ),\n\t\t\t\tclassName\n\t\t\t),\n\t\t[ className ]\n\t);\n\n\t// This flag is used to only apply the focus on mount when the actual path changes.\n\t// It avoids the focus to happen on the first render.\n\tconst [ hasPathChanged, setHasPathChanged ] = useState( false );\n\tuseEffect( () => {\n\t\tsetHasPathChanged( true );\n\t}, [ path ] );\n\n\tif ( ! isMatch ) {\n\t\treturn null;\n\t}\n\n\tif ( prefersReducedMotion ) {\n\t\treturn (\n\t\t\t<View ref={ forwardedRef } className={ classes } { ...otherProps }>\n\t\t\t\t{ children }\n\t\t\t</View>\n\t\t);\n\t}\n\n\tconst animate = {\n\t\topacity: 1,\n\t\ttransition: {\n\t\t\tdelay: animationEnterDelay,\n\t\t\tduration: animationEnterDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t\tx: 0,\n\t};\n\tconst initial = {\n\t\topacity: 0,\n\t\tx:\n\t\t\t( isRTL() && currentPath.isBack ) ||\n\t\t\t( ! isRTL() && ! currentPath.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t};\n\tconst exit = {\n\t\tdelay: animationExitDelay,\n\t\topacity: 0,\n\t\tx:\n\t\t\t( ! isRTL() && currentPath.isBack ) ||\n\t\t\t( isRTL() && ! currentPath.isBack )\n\t\t\t\t? 50\n\t\t\t\t: -50,\n\t\ttransition: {\n\t\t\tduration: animationExitDuration,\n\t\t\tease: 'easeInOut',\n\t\t},\n\t};\n\n\tconst animatedProps = {\n\t\tanimate,\n\t\texit,\n\t\tinitial,\n\t};\n\n\treturn (\n\t\t<motion.div\n\t\t\tref={ hasPathChanged ? ref : undefined }\n\t\t\tclassName={ classes }\n\t\t\t{ ...otherProps }\n\t\t\t{ ...animatedProps }\n\t\t>\n\t\t\t{ children }\n\t\t</motion.div>\n\t);\n}\n\n/**\n * The `NavigatorScreen` component represents a single view/screen/panel/menu and is supposed to be used in combination with the `NavigatorProvider` component.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalUseNavigator as useNavigator,\n * } from '@wordpress/components';\n *\n * function NavigatorButton( {\n *   path,\n *   isBack = false,\n *   ...props\n * } ) {\n *   const navigator = useNavigator();\n *   return (\n *   \t<Button\n *   \t  onClick={ () => navigator.push( path, { isBack } ) }\n *   \t  { ...props }\n *   \t/>\n *   );\n * }\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *   \t   <NavigatorButton isPrimary 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 *       <NavigatorButton isPrimary path=\"/\" isBack>\n *         Go back\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nconst ConnectedNavigatorScreen = contextConnect(\n\tNavigatorScreen,\n\t'NavigatorScreen'\n);\n\nexport default ConnectedNavigatorScreen;\n"]}

package/build/navigator/types.js

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

package/build/notice/index.js

@@ -73,21 +73,22 @@ function getDefaultPoliteness(status) {
   }
 }
 
-function Notice({
-  className,
-  status = 'info',
-  children,
-  spokenMessage = children,
-  onRemove = _lodash.noop,
-  isDismissible = true,
-  actions = [],
-  politeness = getDefaultPoliteness(status),
-  __unstableHTML,
-  // onDismiss is a callback executed when the notice is dismissed.
-  // It is distinct from onRemove, which _looks_ like a callback but is
-  // actually the function to call to remove the notice from the UI.
-  onDismiss = _lodash.noop
-}) {
+function Notice(_ref) {
+  let {
+    className,
+    status = 'info',
+    children,
+    spokenMessage = children,
+    onRemove = _lodash.noop,
+    isDismissible = true,
+    actions = [],
+    politeness = getDefaultPoliteness(status),
+    __unstableHTML,
+    // onDismiss is a callback executed when the notice is dismissed.
+    // It is distinct from onRemove, which _looks_ like a callback but is
+    // actually the function to call to remove the notice from the UI.
+    onDismiss = _lodash.noop
+  } = _ref;
   useSpokenMessage(spokenMessage, politeness);
   const classes = (0, _classnames.default)(className, 'components-notice', 'is-' + status, {
     'is-dismissible': isDismissible
@@ -111,15 +112,16 @@ function Notice({
     className: "components-notice__content"
   }, children, (0, _element.createElement)("div", {
     className: "components-notice__actions"
-  }, actions.map(({
-    className: buttonCustomClasses,
-    label,
-    isPrimary,
-    variant,
-    noDefaultClasses = false,
-    onClick,
-    url
-  }, index) => {
+  }, actions.map((_ref2, index) => {
+    let {
+      className: buttonCustomClasses,
+      label,
+      isPrimary,
+      variant,
+      noDefaultClasses = false,
+      onClick,
+      url
+    } = _ref2;
     let computedVariant = variant;
 
     if (variant !== 'primary' && !noDefaultClasses) {

package/build/notice/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/index.js"],"names":["useSpokenMessage","message","politeness","spokenMessage","getDefaultPoliteness","status","Notice","className","children","onRemove","noop","isDismissible","actions","__unstableHTML","onDismiss","classes","onDismissNotice","event","preventDefault","map","buttonCustomClasses","label","isPrimary","variant","noDefaultClasses","onClick","url","index","computedVariant","undefined","close"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RawHTML, useEffect, renderToString } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement}     [message]  Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\n/**\n * Given a notice status, returns an assumed default politeness for the status.\n * Defaults to 'assertive'.\n *\n * @param {string} [status] Notice status.\n *\n * @return {'polite'|'assertive'} Notice politeness.\n */\nfunction getDefaultPoliteness( status ) {\n\tswitch ( status ) {\n\t\tcase 'success':\n\t\tcase 'warning':\n\t\tcase 'info':\n\t\t\treturn 'polite';\n\n\t\tcase 'error':\n\t\tdefault:\n\t\t\treturn 'assertive';\n\t}\n}\n\nfunction Notice( {\n\tclassName,\n\tstatus = 'info',\n\tchildren,\n\tspokenMessage = children,\n\tonRemove = noop,\n\tisDismissible = true,\n\tactions = [],\n\tpoliteness = getDefaultPoliteness( status ),\n\t__unstableHTML,\n\t// onDismiss is a callback executed when the notice is dismissed.\n\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t// actually the function to call to remove the notice from the UI.\n\tonDismiss = noop,\n} ) {\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-notice',\n\t\t'is-' + status,\n\t\t{\n\t\t\t'is-dismissible': isDismissible,\n\t\t}\n\t);\n\n\tif ( __unstableHTML ) {\n\t\tchildren = <RawHTML>{ children }</RawHTML>;\n\t}\n\n\tconst onDismissNotice = ( event ) => {\n\t\tevent?.preventDefault?.();\n\t\tonDismiss();\n\t\tonRemove();\n\t};\n\n\treturn (\n\t\t<div className={ classes }>\n\t\t\t<div className=\"components-notice__content\">\n\t\t\t\t{ children }\n\t\t\t\t<div className=\"components-notice__actions\">\n\t\t\t\t\t{ actions.map(\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: buttonCustomClasses,\n\t\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\t\tisPrimary,\n\t\t\t\t\t\t\t\tvariant,\n\t\t\t\t\t\t\t\tnoDefaultClasses = false,\n\t\t\t\t\t\t\t\tonClick,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tlet computedVariant = variant;\n\t\t\t\t\t\t\tif ( variant !== 'primary' && ! noDefaultClasses ) {\n\t\t\t\t\t\t\t\tcomputedVariant = ! url ? 'secondary' : 'link';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\ttypeof computedVariant === 'undefined' &&\n\t\t\t\t\t\t\t\tisPrimary\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcomputedVariant = 'primary';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\t\t\tvariant={ computedVariant }\n\t\t\t\t\t\t\t\t\tonClick={ url ? undefined : onClick }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-notice__action',\n\t\t\t\t\t\t\t\t\t\tbuttonCustomClasses\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ isDismissible && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-notice__dismiss\"\n\t\t\t\t\ticon={ close }\n\t\t\t\t\tlabel={ __( 'Dismiss this notice' ) }\n\t\t\t\t\tonClick={ onDismissNotice }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default Notice;\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/index.js"],"names":["useSpokenMessage","message","politeness","spokenMessage","getDefaultPoliteness","status","Notice","className","children","onRemove","noop","isDismissible","actions","__unstableHTML","onDismiss","classes","onDismissNotice","event","preventDefault","map","index","buttonCustomClasses","label","isPrimary","variant","noDefaultClasses","onClick","url","computedVariant","undefined","close"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { noop } from 'lodash';\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\nimport { RawHTML, useEffect, renderToString } from '@wordpress/element';\nimport { speak } from '@wordpress/a11y';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { Button } from '../';\n\n/** @typedef {import('@wordpress/element').WPElement} WPElement */\n\n/**\n * Custom hook which announces the message with the given politeness, if a\n * valid message is provided.\n *\n * @param {string|WPElement}     [message]  Message to announce.\n * @param {'polite'|'assertive'} politeness Politeness to announce.\n */\nfunction useSpokenMessage( message, politeness ) {\n\tconst spokenMessage =\n\t\ttypeof message === 'string' ? message : renderToString( message );\n\n\tuseEffect( () => {\n\t\tif ( spokenMessage ) {\n\t\t\tspeak( spokenMessage, politeness );\n\t\t}\n\t}, [ spokenMessage, politeness ] );\n}\n\n/**\n * Given a notice status, returns an assumed default politeness for the status.\n * Defaults to 'assertive'.\n *\n * @param {string} [status] Notice status.\n *\n * @return {'polite'|'assertive'} Notice politeness.\n */\nfunction getDefaultPoliteness( status ) {\n\tswitch ( status ) {\n\t\tcase 'success':\n\t\tcase 'warning':\n\t\tcase 'info':\n\t\t\treturn 'polite';\n\n\t\tcase 'error':\n\t\tdefault:\n\t\t\treturn 'assertive';\n\t}\n}\n\nfunction Notice( {\n\tclassName,\n\tstatus = 'info',\n\tchildren,\n\tspokenMessage = children,\n\tonRemove = noop,\n\tisDismissible = true,\n\tactions = [],\n\tpoliteness = getDefaultPoliteness( status ),\n\t__unstableHTML,\n\t// onDismiss is a callback executed when the notice is dismissed.\n\t// It is distinct from onRemove, which _looks_ like a callback but is\n\t// actually the function to call to remove the notice from the UI.\n\tonDismiss = noop,\n} ) {\n\tuseSpokenMessage( spokenMessage, politeness );\n\n\tconst classes = classnames(\n\t\tclassName,\n\t\t'components-notice',\n\t\t'is-' + status,\n\t\t{\n\t\t\t'is-dismissible': isDismissible,\n\t\t}\n\t);\n\n\tif ( __unstableHTML ) {\n\t\tchildren = <RawHTML>{ children }</RawHTML>;\n\t}\n\n\tconst onDismissNotice = ( event ) => {\n\t\tevent?.preventDefault?.();\n\t\tonDismiss();\n\t\tonRemove();\n\t};\n\n\treturn (\n\t\t<div className={ classes }>\n\t\t\t<div className=\"components-notice__content\">\n\t\t\t\t{ children }\n\t\t\t\t<div className=\"components-notice__actions\">\n\t\t\t\t\t{ actions.map(\n\t\t\t\t\t\t(\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\tclassName: buttonCustomClasses,\n\t\t\t\t\t\t\t\tlabel,\n\t\t\t\t\t\t\t\tisPrimary,\n\t\t\t\t\t\t\t\tvariant,\n\t\t\t\t\t\t\t\tnoDefaultClasses = false,\n\t\t\t\t\t\t\t\tonClick,\n\t\t\t\t\t\t\t\turl,\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t\tindex\n\t\t\t\t\t\t) => {\n\t\t\t\t\t\t\tlet computedVariant = variant;\n\t\t\t\t\t\t\tif ( variant !== 'primary' && ! noDefaultClasses ) {\n\t\t\t\t\t\t\t\tcomputedVariant = ! url ? 'secondary' : 'link';\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif (\n\t\t\t\t\t\t\t\ttypeof computedVariant === 'undefined' &&\n\t\t\t\t\t\t\t\tisPrimary\n\t\t\t\t\t\t\t) {\n\t\t\t\t\t\t\t\tcomputedVariant = 'primary';\n\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tkey={ index }\n\t\t\t\t\t\t\t\t\thref={ url }\n\t\t\t\t\t\t\t\t\tvariant={ computedVariant }\n\t\t\t\t\t\t\t\t\tonClick={ url ? undefined : onClick }\n\t\t\t\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\t\t\t\t'components-notice__action',\n\t\t\t\t\t\t\t\t\t\tbuttonCustomClasses\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ isDismissible && (\n\t\t\t\t<Button\n\t\t\t\t\tclassName=\"components-notice__dismiss\"\n\t\t\t\t\ticon={ close }\n\t\t\t\t\tlabel={ __( 'Dismiss this notice' ) }\n\t\t\t\t\tonClick={ onDismissNotice }\n\t\t\t\t\tshowTooltip={ false }\n\t\t\t\t/>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default Notice;\n"]}

package/build/notice/index.native.js

@@ -28,12 +28,13 @@ var _style = _interopRequireDefault(require("./style.scss"));
 /**
  * Internal dependencies
  */
-const Notice = ({
-  onNoticeHidden,
-  content,
-  id,
-  status
-}) => {
+const Notice = _ref => {
+  let {
+    onNoticeHidden,
+    content,
+    id,
+    status
+  } = _ref;
   const [width, setWidth] = (0, _element.useState)(_reactNative.Dimensions.get('window').width);
   const [visible, setVisible] = (0, _element.useState)(true);
   const animationValue = (0, _element.useRef)(new _reactNative.Animated.Value(0)).current;

package/build/notice/index.native.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/index.native.js"],"names":["Notice","onNoticeHidden","content","id","status","width","setWidth","Dimensions","get","visible","setVisible","animationValue","Animated","Value","current","timer","isIOS","Platform","OS","onDimensionsChange","addEventListener","removeEventListener","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","Easing","out","quad","start","setTimeout","noticeSolidStyles","styles","noticeSolid","noticeSolidDark","successTextStyles","successText","successTextDark","errorTextStyles","errorText","errorTextDark","textStyles","notice","transform","translateY","interpolate","inputRange","outputRange","noticeContent","blurBackground"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAnimated,\n\tEasing,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n\tDimensions,\n\tPlatform,\n} from 'react-native';\nimport { BlurView } from '@react-native-community/blur';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Notice = ( { onNoticeHidden, content, id, status } ) => {\n\tconst [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );\n\tconst [ visible, setVisible ] = useState( true );\n\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst timer = useRef( null );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst onDimensionsChange = () => {\n\t\tsetWidth( Dimensions.get( 'window' ).width );\n\t};\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onDimensionsChange );\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onDimensionsChange );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t\treturn () => {\n\t\t\tclearTimeout( timer?.current );\n\t\t};\n\t}, [ visible, id ] );\n\n\tconst onHide = () => {\n\t\tsetVisible( false );\n\t};\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( () => {\n\t\t\tif ( visible && onNoticeHidden ) {\n\t\t\t\ttimer.current = setTimeout( () => {\n\t\t\t\t\tonHide();\n\t\t\t\t}, 3000 );\n\t\t\t}\n\n\t\t\tif ( ! visible && onNoticeHidden ) {\n\t\t\t\tonNoticeHidden( id );\n\t\t\t}\n\t\t} );\n\t};\n\n\tconst noticeSolidStyles = usePreferredColorSchemeStyle(\n\t\tstyles.noticeSolid,\n\t\tstyles.noticeSolidDark\n\t);\n\n\tconst successTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.successText,\n\t\tstyles.successTextDark\n\t);\n\n\tconst errorTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.errorText,\n\t\tstyles.errorTextDark\n\t);\n\n\tconst textStyles = [\n\t\tstatus === 'success' && successTextStyles,\n\t\tstatus === 'error' && errorTextStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Animated.View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles.notice,\n\t\t\t\t\t! isIOS && noticeSolidStyles,\n\t\t\t\t\t{\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\t\t\toutputRange: [ -24, 0 ],\n\t\t\t\t\t\t\t\t} ),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<TouchableWithoutFeedback onPress={ onHide }>\n\t\t\t\t\t<View style={ styles.noticeContent }>\n\t\t\t\t\t\t<Text numberOfLines={ 3 } style={ textStyles }>\n\t\t\t\t\t\t\t{ content }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ isIOS && (\n\t\t\t\t\t<BlurView\n\t\t\t\t\t\tstyle={ styles.blurBackground }\n\t\t\t\t\t\tblurType=\"prominent\"\n\t\t\t\t\t\tblurAmount={ 10 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Animated.View>\n\t\t</>\n\t);\n};\n\nexport default Notice;\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/index.native.js"],"names":["Notice","onNoticeHidden","content","id","status","width","setWidth","Dimensions","get","visible","setVisible","animationValue","Animated","Value","current","timer","isIOS","Platform","OS","onDimensionsChange","addEventListener","removeEventListener","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","Easing","out","quad","start","setTimeout","noticeSolidStyles","styles","noticeSolid","noticeSolidDark","successTextStyles","successText","successTextDark","errorTextStyles","errorText","errorTextDark","textStyles","notice","transform","translateY","interpolate","inputRange","outputRange","noticeContent","blurBackground"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport {\n\tAnimated,\n\tEasing,\n\tText,\n\tTouchableWithoutFeedback,\n\tView,\n\tDimensions,\n\tPlatform,\n} from 'react-native';\nimport { BlurView } from '@react-native-community/blur';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { usePreferredColorSchemeStyle } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport styles from './style.scss';\n\nconst Notice = ( { onNoticeHidden, content, id, status } ) => {\n\tconst [ width, setWidth ] = useState( Dimensions.get( 'window' ).width );\n\tconst [ visible, setVisible ] = useState( true );\n\n\tconst animationValue = useRef( new Animated.Value( 0 ) ).current;\n\tconst timer = useRef( null );\n\tconst isIOS = Platform.OS === 'ios';\n\n\tconst onDimensionsChange = () => {\n\t\tsetWidth( Dimensions.get( 'window' ).width );\n\t};\n\n\tuseEffect( () => {\n\t\tDimensions.addEventListener( 'change', onDimensionsChange );\n\t\treturn () => {\n\t\t\tDimensions.removeEventListener( 'change', onDimensionsChange );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tstartAnimation();\n\t\treturn () => {\n\t\t\tclearTimeout( timer?.current );\n\t\t};\n\t}, [ visible, id ] );\n\n\tconst onHide = () => {\n\t\tsetVisible( false );\n\t};\n\n\tconst startAnimation = () => {\n\t\tAnimated.timing( animationValue, {\n\t\t\ttoValue: visible ? 1 : 0,\n\t\t\tduration: visible ? 300 : 150,\n\t\t\tuseNativeDriver: true,\n\t\t\teasing: Easing.out( Easing.quad ),\n\t\t} ).start( () => {\n\t\t\tif ( visible && onNoticeHidden ) {\n\t\t\t\ttimer.current = setTimeout( () => {\n\t\t\t\t\tonHide();\n\t\t\t\t}, 3000 );\n\t\t\t}\n\n\t\t\tif ( ! visible && onNoticeHidden ) {\n\t\t\t\tonNoticeHidden( id );\n\t\t\t}\n\t\t} );\n\t};\n\n\tconst noticeSolidStyles = usePreferredColorSchemeStyle(\n\t\tstyles.noticeSolid,\n\t\tstyles.noticeSolidDark\n\t);\n\n\tconst successTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.successText,\n\t\tstyles.successTextDark\n\t);\n\n\tconst errorTextStyles = usePreferredColorSchemeStyle(\n\t\tstyles.errorText,\n\t\tstyles.errorTextDark\n\t);\n\n\tconst textStyles = [\n\t\tstatus === 'success' && successTextStyles,\n\t\tstatus === 'error' && errorTextStyles,\n\t];\n\n\treturn (\n\t\t<>\n\t\t\t<Animated.View\n\t\t\t\tstyle={ [\n\t\t\t\t\tstyles.notice,\n\t\t\t\t\t! isIOS && noticeSolidStyles,\n\t\t\t\t\t{\n\t\t\t\t\t\twidth,\n\t\t\t\t\t\ttransform: [\n\t\t\t\t\t\t\t{\n\t\t\t\t\t\t\t\ttranslateY: animationValue.interpolate( {\n\t\t\t\t\t\t\t\t\tinputRange: [ 0, 1 ],\n\t\t\t\t\t\t\t\t\toutputRange: [ -24, 0 ],\n\t\t\t\t\t\t\t\t} ),\n\t\t\t\t\t\t\t},\n\t\t\t\t\t\t],\n\t\t\t\t\t},\n\t\t\t\t] }\n\t\t\t>\n\t\t\t\t<TouchableWithoutFeedback onPress={ onHide }>\n\t\t\t\t\t<View style={ styles.noticeContent }>\n\t\t\t\t\t\t<Text numberOfLines={ 3 } style={ textStyles }>\n\t\t\t\t\t\t\t{ content }\n\t\t\t\t\t\t</Text>\n\t\t\t\t\t</View>\n\t\t\t\t</TouchableWithoutFeedback>\n\t\t\t\t{ isIOS && (\n\t\t\t\t\t<BlurView\n\t\t\t\t\t\tstyle={ styles.blurBackground }\n\t\t\t\t\t\tblurType=\"prominent\"\n\t\t\t\t\t\tblurAmount={ 10 }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\t\t\t</Animated.View>\n\t\t</>\n\t);\n};\n\nexport default Notice;\n"]}

package/build/notice/list.js

@@ -36,12 +36,14 @@ var _ = _interopRequireDefault(require("./"));
  *
  * @return {Object} The rendered notices list.
  */
-function NoticeList({
-  notices,
-  onRemove = _lodash.noop,
-  className,
-  children
-}) {
+function NoticeList(_ref) {
+  let {
+    notices,
+    onRemove = _lodash.noop,
+    className,
+    children
+  } = _ref;
+
   const removeNotice = id => () => onRemove(id);
 
   className = (0, _classnames.default)('components-notice-list', className);

package/build/notice/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/list.js"],"names":["NoticeList","notices","onRemove","noop","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,CAAqB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,QAAQ,GAAGC,YAAtB;AAA4BC,EAAAA,SAA5B;AAAuCC,EAAAA;AAAvC,CAArB,EAAyE;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAML,QAAQ,CAAEK,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAG,yBAAY,wBAAZ,EAAsCA,SAAtC,CAAZ;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGJ,OAAL,EAAeO,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,4BAAC,SAAD,6BACM,kBAAMA,MAAN,EAAc,CAAE,SAAF,CAAd,CADN;AAEC,IAAA,GAAG,EAAGA,MAAM,CAACH,EAFd;AAGC,IAAA,QAAQ,EAAGD,YAAY,CAAEI,MAAM,CAACH,EAAT;AAHxB,MAKGG,MAAM,CAACC,OALV,CADC,CAFH,CADD;AAcA;;eAEcX,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, omit } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction NoticeList( { notices, onRemove = noop, className, children } ) {\n\tconst removeNotice = ( id ) => () => onRemove( id );\n\n\tclassName = classnames( 'components-notice-list', className );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ children }\n\t\t\t{ [ ...notices ].reverse().map( ( notice ) => (\n\t\t\t\t<Notice\n\t\t\t\t\t{ ...omit( notice, [ 'content' ] ) }\n\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\tonRemove={ removeNotice( notice.id ) }\n\t\t\t\t>\n\t\t\t\t\t{ notice.content }\n\t\t\t\t</Notice>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default NoticeList;\n"]}
+{"version":3,"sources":["@wordpress/components/src/notice/list.js"],"names":["NoticeList","notices","onRemove","noop","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;;;;;;;;;;;AAGA;;AACA;;AAKA;;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,UAAT,OAAyE;AAAA,MAApD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAQ,GAAGC,YAAtB;AAA4BC,IAAAA,SAA5B;AAAuCC,IAAAA;AAAvC,GAAoD;;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAML,QAAQ,CAAEK,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAG,yBAAY,wBAAZ,EAAsCA,SAAtC,CAAZ;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGJ,OAAL,EAAeO,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,4BAAC,SAAD,6BACM,kBAAMA,MAAN,EAAc,CAAE,SAAF,CAAd,CADN;AAEC,IAAA,GAAG,EAAGA,MAAM,CAACH,EAFd;AAGC,IAAA,QAAQ,EAAGD,YAAY,CAAEI,MAAM,CAACH,EAAT;AAHxB,MAKGG,MAAM,CAACC,OALV,CADC,CAFH,CADD;AAcA;;eAEcX,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { noop, omit } from 'lodash';\n\n/**\n * Internal dependencies\n */\nimport Notice from './';\n\n/**\n * Renders a list of notices.\n *\n * @param {Object}   $0           Props passed to the component.\n * @param {Array}    $0.notices   Array of notices to render.\n * @param {Function} $0.onRemove  Function called when a notice should be removed / dismissed.\n * @param {Object}   $0.className Name of the class used by the component.\n * @param {Object}   $0.children  Array of children to be rendered inside the notice list.\n *\n * @return {Object} The rendered notices list.\n */\nfunction NoticeList( { notices, onRemove = noop, className, children } ) {\n\tconst removeNotice = ( id ) => () => onRemove( id );\n\n\tclassName = classnames( 'components-notice-list', className );\n\n\treturn (\n\t\t<div className={ className }>\n\t\t\t{ children }\n\t\t\t{ [ ...notices ].reverse().map( ( notice ) => (\n\t\t\t\t<Notice\n\t\t\t\t\t{ ...omit( notice, [ 'content' ] ) }\n\t\t\t\t\tkey={ notice.id }\n\t\t\t\t\tonRemove={ removeNotice( notice.id ) }\n\t\t\t\t>\n\t\t\t\t\t{ notice.content }\n\t\t\t\t</Notice>\n\t\t\t) ) }\n\t\t</div>\n\t);\n}\n\nexport default NoticeList;\n"]}

package/build/number-control/index.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -26,10 +24,12 @@ var _reducer = require("../input-control/reducer/reducer");
 
 var _math = require("../utils/math");
 
-var _hooks = require("../utils/hooks");
-
 var _values = require("../utils/values");
 
+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; }
+
 // @ts-nocheck
 
 /**
@@ -43,29 +43,33 @@ var _values = require("../utils/values");
 /**
  * Internal dependencies
  */
-function NumberControl({
-  __unstableStateReducer: stateReducer = state => state,
-  className,
-  dragDirection = 'n',
-  hideHTMLArrows = false,
-  isDragEnabled = true,
-  isShiftStepEnabled = true,
-  label,
-  max = Infinity,
-  min = -Infinity,
-  required = false,
-  shiftStep = 10,
-  step = 1,
-  type: typeProp = 'number',
-  value: valueProp,
-  ...props
-}, ref) {
-  const baseValue = (0, _math.roundClamp)(0, min, max, step);
-  const jumpStep = (0, _hooks.useJumpStep)({
-    step,
-    shiftStep,
-    isShiftStepEnabled
-  });
+function NumberControl(_ref, ref) {
+  let {
+    __unstableStateReducer: stateReducer = state => state,
+    className,
+    dragDirection = 'n',
+    hideHTMLArrows = false,
+    isDragEnabled = true,
+    isShiftStepEnabled = true,
+    label,
+    max = Infinity,
+    min = -Infinity,
+    required = false,
+    shiftStep = 10,
+    step = 1,
+    type: typeProp = 'number',
+    value: valueProp,
+    ...props
+  } = _ref;
+  const isStepAny = step === 'any';
+  const baseStep = isStepAny ? 1 : parseFloat(step);
+  const baseValue = (0, _math.roundClamp)(0, min, max, baseStep);
+
+  const constrainValue = (value, stepOverride) => {
+    // When step is "any" clamp the value, otherwise round and clamp it
+    return isStepAny ? Math.min(max, Math.max(min, value)) : (0, _math.roundClamp)(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
+  };
+
   const autoComplete = typeProp === 'number' ? 'off' : null;
   const classes = (0, _classnames.default)('components-number-control', className);
   /**
@@ -91,7 +95,7 @@ function NumberControl({
 
     if (type === inputControlActionTypes.PRESS_UP || type === inputControlActionTypes.PRESS_DOWN) {
       const enableShift = event.shiftKey && isShiftStepEnabled;
-      const incrementalValue = enableShift ? parseFloat(shiftStep) * parseFloat(step) : parseFloat(step);
+      const incrementalValue = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
       let nextValue = (0, _values.isValueEmpty)(currentValue) ? baseValue : currentValue;
 
       if (event !== null && event !== void 0 && event.preventDefault) {
@@ -106,8 +110,7 @@ function NumberControl({
         nextValue = (0, _math.subtract)(nextValue, incrementalValue);
       }
 
-      nextValue = (0, _math.roundClamp)(nextValue, min, max, incrementalValue);
-      state.value = nextValue;
+      state.value = constrainValue(nextValue, enableShift ? incrementalValue : null);
     }
     /**
      * Handles drag to update events
@@ -115,43 +118,38 @@ function NumberControl({
 
 
     if (type === inputControlActionTypes.DRAG && isDragEnabled) {
-      const {
-        delta,
-        shiftKey
-      } = payload;
-      const [x, y] = delta;
-      const modifier = shiftKey ? parseFloat(shiftStep) * parseFloat(step) : parseFloat(step);
+      const [x, y] = payload.delta;
+      const enableShift = payload.shiftKey && isShiftStepEnabled;
+      const modifier = enableShift ? parseFloat(shiftStep) * baseStep : baseStep;
       let directionModifier;
-      let directionBaseValue;
+      let delta;
 
       switch (dragDirection) {
         case 'n':
-          directionBaseValue = y;
+          delta = y;
           directionModifier = -1;
           break;
 
         case 'e':
-          directionBaseValue = x;
+          delta = x;
           directionModifier = (0, _i18n.isRTL)() ? -1 : 1;
           break;
 
         case 's':
-          directionBaseValue = y;
+          delta = y;
           directionModifier = 1;
           break;
 
         case 'w':
-          directionBaseValue = x;
+          delta = x;
           directionModifier = (0, _i18n.isRTL)() ? 1 : -1;
           break;
       }
 
-      const distance = directionBaseValue * modifier * directionModifier;
-      let nextValue;
-
-      if (distance !== 0) {
-        nextValue = (0, _math.roundClamp)((0, _math.add)(currentValue, distance), min, max, modifier);
-        state.value = nextValue;
+      if (delta !== 0) {
+        delta = Math.ceil(Math.abs(delta)) * Math.sign(delta);
+        const distance = delta * modifier * directionModifier;
+        state.value = constrainValue((0, _math.add)(currentValue, distance), enableShift ? modifier : null);
       }
     }
     /**
@@ -161,7 +159,7 @@ function NumberControl({
 
     if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
       const applyEmptyValue = required === false && currentValue === '';
-      state.value = applyEmptyValue ? currentValue : (0, _math.roundClamp)(currentValue, min, max, step);
+      state.value = applyEmptyValue ? currentValue : constrainValue(currentValue);
     }
 
     return state;
@@ -180,7 +178,7 @@ function NumberControl({
     min: min,
     ref: ref,
     required: required,
-    step: jumpStep,
+    step: step,
     type: typeProp,
     value: valueProp,
     __unstableStateReducer: (0, _reducer.composeStateReducers)(numberControlStateReducer, stateReducer)