@wordpress/components 18.0.0 → 19.0.3

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

@@ -1,34 +1,53 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+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)."; }
+
 /**
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
-
+import { css } from '@emotion/react';
 /**
  * WordPress dependencies
  */
-import { useState } from '@wordpress/element';
+
+import { useMemo, useState } from '@wordpress/element';
 /**
  * Internal dependencies
  */
 
 import { contextConnect, useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 
+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__
+};
+
 function NavigatorProvider(props, forwardedRef) {
   const {
     initialPath,
     children,
+    className,
     ...otherProps
   } = useContextSystem(props, 'NavigatorProvider');
   const [path, setPath] = useState({
     path: initialPath
   });
+  const cx = useCx();
+  const classes = useMemo( // Prevents horizontal overflow while animating screen transitions
+  () => cx(_ref, className), [className]);
   return createElement(View, _extends({
-    ref: forwardedRef
+    ref: forwardedRef,
+    className: classes
   }, otherProps), createElement(NavigatorContext.Provider, {
     value: [path, setPath]
   }, children));

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-provider/component.tsx"],"names":["useState","contextConnect","useContextSystem","View","NavigatorContext","NavigatorProvider","props","forwardedRef","initialPath","children","otherProps","path","setPath","ConnectedNavigatorProvider"],"mappings":";;;AAAA;AACA;AACA;AACA;;AAGA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,gBAAT,QAAiC,YAAjC;;AAGA,SAASC,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,QAAf;AAAyB,OAAGC;AAA5B,MAA2CR,gBAAgB,CAChEI,KADgE,EAEhE,mBAFgE,CAAjE;AAKA,QAAM,CAAEK,IAAF,EAAQC,OAAR,IAAoBZ,QAAQ,CAAmB;AACpDW,IAAAA,IAAI,EAAEH;AAD8C,GAAnB,CAAlC;AAIA,SACC,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGD;AAAZ,KAAgCG,UAAhC,GACC,cAAC,gBAAD,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,GAAGZ,cAAc,CAChDI,iBADgD,EAEhD,mBAFgD,CAAjD;AAKA,eAAeQ,0BAAf","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":["css","useMemo","useState","contextConnect","useContextSystem","useCx","View","NavigatorContext","NavigatorProvider","props","forwardedRef","initialPath","children","className","otherProps","path","setPath","cx","classes","ConnectedNavigatorProvider"],"mappings":";;;;;AAAA;AACA;AACA;AACA;AAEA,SAASA,GAAT,QAAoB,gBAApB;AAEA;AACA;AACA;;AACA,SAASC,OAAT,EAAkBC,QAAlB,QAAkC,oBAAlC;AAEA;AACA;AACA;;AACA,SACCC,cADD,EAECC,gBAFD,QAIO,kBAJP;AAKA,SAASC,KAAT,QAAsB,0BAAtB;AACA,SAASC,IAAT,QAAqB,YAArB;AACA,SAASC,gBAAT,QAAiC,YAAjC;;;;;;;;;;;;AAGA,SAASC,iBAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAM;AACLC,IAAAA,WADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAIL,OAAGC;AAJE,MAKFV,gBAAgB,CAAEK,KAAF,EAAS,mBAAT,CALpB;AAOA,QAAM,CAAEM,IAAF,EAAQC,OAAR,IAAoBd,QAAQ,CAAmB;AACpDa,IAAAA,IAAI,EAAEJ;AAD8C,GAAnB,CAAlC;AAIA,QAAMM,EAAE,GAAGZ,KAAK,EAAhB;AACA,QAAMa,OAAO,GAAGjB,OAAO,EACtB;AACA,QAAMgB,EAAE,OAAkCJ,SAAlC,CAFc,EAGtB,CAAEA,SAAF,CAHsB,CAAvB;AAMA,SACC,cAAC,IAAD;AAAM,IAAA,GAAG,EAAGH,YAAZ;AAA2B,IAAA,SAAS,EAAGQ;AAAvC,KAAsDJ,UAAtD,GACC,cAAC,gBAAD,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,GAAGhB,cAAc,CAChDK,iBADgD,EAEhD,mBAFgD,CAAjD;AAKA,eAAeW,0BAAf","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-module/navigator/navigator-screen/component.js

@@ -1,17 +1,20 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
+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)."; }
+
 /**
  * External dependencies
  */
 // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line no-restricted-imports
 import { motion } from 'framer-motion';
+import { css } from '@emotion/react';
 /**
  * WordPress dependencies
  */
 
-import { useContext, useEffect, useState } from '@wordpress/element';
+import { useContext, useEffect, useState, useMemo } from '@wordpress/element';
 import { useReducedMotion, useFocusOnMount } from '@wordpress/compose';
 import { isRTL } from '@wordpress/i18n';
 /**
@@ -19,6 +22,7 @@ import { isRTL } from '@wordpress/i18n';
  */
 
 import { contextConnect, useContextSystem } from '../../ui/context';
+import { useCx } from '../../utils/hooks/use-cx';
 import { View } from '../../view';
 import { NavigatorContext } from '../context';
 const animationEnterDelay = 0;
@@ -27,16 +31,29 @@ 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
   } = useContextSystem(props, 'NavigatorScreen');
   const prefersReducedMotion = useReducedMotion();
   const [currentPath] = useContext(NavigatorContext);
   const isMatch = currentPath.path === path;
-  const ref = useFocusOnMount(); // This flag is used to only apply the focus on mount when the actual path changes.
+  const ref = useFocusOnMount();
+  const cx = useCx();
+  const classes = 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] = useState(false);
@@ -50,7 +67,8 @@ function NavigatorScreen(props, forwardedRef) {
 
   if (prefersReducedMotion) {
     return createElement(View, _extends({
-      ref: forwardedRef
+      ref: forwardedRef,
+      className: classes
     }, otherProps), children);
   }
 
@@ -82,7 +100,8 @@ function NavigatorScreen(props, forwardedRef) {
     initial
   };
   return createElement(motion.div, _extends({
-    ref: hasPathChanged ? ref : undefined
+    ref: hasPathChanged ? ref : undefined,
+    className: classes
   }, otherProps, animatedProps), children);
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-screen/component.tsx"],"names":["motion","useContext","useEffect","useState","useReducedMotion","useFocusOnMount","isRTL","contextConnect","useContextSystem","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","path","otherProps","prefersReducedMotion","currentPath","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":["motion","css","useContext","useEffect","useState","useMemo","useReducedMotion","useFocusOnMount","isRTL","contextConnect","useContextSystem","useCx","View","NavigatorContext","animationEnterDelay","animationEnterDuration","animationExitDuration","animationExitDelay","NavigatorScreen","props","forwardedRef","children","className","path","otherProps","prefersReducedMotion","currentPath","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-module/navigator/types.js

@@ -1,2 +1,2 @@
-
+export {};
 //# sourceMappingURL=types.js.map

package/build-module/notice/index.js

@@ -59,21 +59,22 @@ function getDefaultPoliteness(status) {
   }
 }
 
-function Notice({
-  className,
-  status = 'info',
-  children,
-  spokenMessage = children,
-  onRemove = 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 = noop
-}) {
+function Notice(_ref) {
+  let {
+    className,
+    status = 'info',
+    children,
+    spokenMessage = children,
+    onRemove = 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 = noop
+  } = _ref;
   useSpokenMessage(spokenMessage, politeness);
   const classes = classnames(className, 'components-notice', 'is-' + status, {
     'is-dismissible': isDismissible
@@ -97,15 +98,16 @@ function Notice({
     className: "components-notice__content"
   }, children, 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-module/notice/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/index.js"],"names":["noop","classnames","__","RawHTML","useEffect","renderToString","speak","close","Button","useSpokenMessage","message","politeness","spokenMessage","getDefaultPoliteness","status","Notice","className","children","onRemove","isDismissible","actions","__unstableHTML","onDismiss","classes","onDismissNotice","event","preventDefault","map","buttonCustomClasses","label","isPrimary","variant","noDefaultClasses","onClick","url","index","computedVariant","undefined"],"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":["noop","classnames","__","RawHTML","useEffect","renderToString","speak","close","Button","useSpokenMessage","message","politeness","spokenMessage","getDefaultPoliteness","status","Notice","className","children","onRemove","isDismissible","actions","__unstableHTML","onDismiss","classes","onDismissNotice","event","preventDefault","map","index","buttonCustomClasses","label","isPrimary","variant","noDefaultClasses","onClick","url","computedVariant","undefined"],"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-module/notice/index.native.js

@@ -17,12 +17,13 @@ import { usePreferredColorSchemeStyle } from '@wordpress/compose';
 
 import styles from './style.scss';
 
-const Notice = ({
-  onNoticeHidden,
-  content,
-  id,
-  status
-}) => {
+const Notice = _ref => {
+  let {
+    onNoticeHidden,
+    content,
+    id,
+    status
+  } = _ref;
   const [width, setWidth] = useState(Dimensions.get('window').width);
   const [visible, setVisible] = useState(true);
   const animationValue = useRef(new Animated.Value(0)).current;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/index.native.js"],"names":["Animated","Easing","Text","TouchableWithoutFeedback","View","Dimensions","Platform","BlurView","useEffect","useRef","useState","usePreferredColorSchemeStyle","styles","Notice","onNoticeHidden","content","id","status","width","setWidth","get","visible","setVisible","animationValue","Value","current","timer","isIOS","OS","onDimensionsChange","addEventListener","removeEventListener","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","out","quad","start","setTimeout","noticeSolidStyles","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":["Animated","Easing","Text","TouchableWithoutFeedback","View","Dimensions","Platform","BlurView","useEffect","useRef","useState","usePreferredColorSchemeStyle","styles","Notice","onNoticeHidden","content","id","status","width","setWidth","get","visible","setVisible","animationValue","Value","current","timer","isIOS","OS","onDimensionsChange","addEventListener","removeEventListener","startAnimation","clearTimeout","onHide","timing","toValue","duration","useNativeDriver","easing","out","quad","start","setTimeout","noticeSolidStyles","noticeSolid","noticeSolidDark","successTextStyles","successText","successTextDark","errorTextStyles","errorText","errorTextDark","textStyles","notice","transform","translateY","interpolate","inputRange","outputRange","noticeContent","blurBackground"],"mappings":";;AAAA;AACA;AACA;AACA,SACCA,QADD,EAECC,MAFD,EAGCC,IAHD,EAICC,wBAJD,EAKCC,IALD,EAMCC,UAND,EAOCC,QAPD,QAQO,cARP;AASA,SAASC,QAAT,QAAyB,8BAAzB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,oBAA5C;AACA,SAASC,4BAAT,QAA6C,oBAA7C;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,cAAnB;;AAEA,MAAMC,MAAM,GAAG,QAA+C;AAAA,MAA7C;AAAEC,IAAAA,cAAF;AAAkBC,IAAAA,OAAlB;AAA2BC,IAAAA,EAA3B;AAA+BC,IAAAA;AAA/B,GAA6C;AAC7D,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsBT,QAAQ,CAAEL,UAAU,CAACe,GAAX,CAAgB,QAAhB,EAA2BF,KAA7B,CAApC;AACA,QAAM,CAAEG,OAAF,EAAWC,UAAX,IAA0BZ,QAAQ,CAAE,IAAF,CAAxC;AAEA,QAAMa,cAAc,GAAGd,MAAM,CAAE,IAAIT,QAAQ,CAACwB,KAAb,CAAoB,CAApB,CAAF,CAAN,CAAkCC,OAAzD;AACA,QAAMC,KAAK,GAAGjB,MAAM,CAAE,IAAF,CAApB;AACA,QAAMkB,KAAK,GAAGrB,QAAQ,CAACsB,EAAT,KAAgB,KAA9B;;AAEA,QAAMC,kBAAkB,GAAG,MAAM;AAChCV,IAAAA,QAAQ,CAAEd,UAAU,CAACe,GAAX,CAAgB,QAAhB,EAA2BF,KAA7B,CAAR;AACA,GAFD;;AAIAV,EAAAA,SAAS,CAAE,MAAM;AAChBH,IAAAA,UAAU,CAACyB,gBAAX,CAA6B,QAA7B,EAAuCD,kBAAvC;AACA,WAAO,MAAM;AACZxB,MAAAA,UAAU,CAAC0B,mBAAX,CAAgC,QAAhC,EAA0CF,kBAA1C;AACA,KAFD;AAGA,GALQ,EAKN,EALM,CAAT;AAOArB,EAAAA,SAAS,CAAE,MAAM;AAChBwB,IAAAA,cAAc;AACd,WAAO,MAAM;AACZC,MAAAA,YAAY,CAAEP,KAAF,aAAEA,KAAF,uBAAEA,KAAK,CAAED,OAAT,CAAZ;AACA,KAFD;AAGA,GALQ,EAKN,CAAEJ,OAAF,EAAWL,EAAX,CALM,CAAT;;AAOA,QAAMkB,MAAM,GAAG,MAAM;AACpBZ,IAAAA,UAAU,CAAE,KAAF,CAAV;AACA,GAFD;;AAIA,QAAMU,cAAc,GAAG,MAAM;AAC5BhC,IAAAA,QAAQ,CAACmC,MAAT,CAAiBZ,cAAjB,EAAiC;AAChCa,MAAAA,OAAO,EAAEf,OAAO,GAAG,CAAH,GAAO,CADS;AAEhCgB,MAAAA,QAAQ,EAAEhB,OAAO,GAAG,GAAH,GAAS,GAFM;AAGhCiB,MAAAA,eAAe,EAAE,IAHe;AAIhCC,MAAAA,MAAM,EAAEtC,MAAM,CAACuC,GAAP,CAAYvC,MAAM,CAACwC,IAAnB;AAJwB,KAAjC,EAKIC,KALJ,CAKW,MAAM;AAChB,UAAKrB,OAAO,IAAIP,cAAhB,EAAiC;AAChCY,QAAAA,KAAK,CAACD,OAAN,GAAgBkB,UAAU,CAAE,MAAM;AACjCT,UAAAA,MAAM;AACN,SAFyB,EAEvB,IAFuB,CAA1B;AAGA;;AAED,UAAK,CAAEb,OAAF,IAAaP,cAAlB,EAAmC;AAClCA,QAAAA,cAAc,CAAEE,EAAF,CAAd;AACA;AACD,KAfD;AAgBA,GAjBD;;AAmBA,QAAM4B,iBAAiB,GAAGjC,4BAA4B,CACrDC,MAAM,CAACiC,WAD8C,EAErDjC,MAAM,CAACkC,eAF8C,CAAtD;AAKA,QAAMC,iBAAiB,GAAGpC,4BAA4B,CACrDC,MAAM,CAACoC,WAD8C,EAErDpC,MAAM,CAACqC,eAF8C,CAAtD;AAKA,QAAMC,eAAe,GAAGvC,4BAA4B,CACnDC,MAAM,CAACuC,SAD4C,EAEnDvC,MAAM,CAACwC,aAF4C,CAApD;AAKA,QAAMC,UAAU,GAAG,CAClBpC,MAAM,KAAK,SAAX,IAAwB8B,iBADN,EAElB9B,MAAM,KAAK,OAAX,IAAsBiC,eAFJ,CAAnB;AAKA,SACC,8BACC,cAAC,QAAD,CAAU,IAAV;AACC,IAAA,KAAK,EAAG,CACPtC,MAAM,CAAC0C,MADA,EAEP,CAAE3B,KAAF,IAAWiB,iBAFJ,EAGP;AACC1B,MAAAA,KADD;AAECqC,MAAAA,SAAS,EAAE,CACV;AACCC,QAAAA,UAAU,EAAEjC,cAAc,CAACkC,WAAf,CAA4B;AACvCC,UAAAA,UAAU,EAAE,CAAE,CAAF,EAAK,CAAL,CAD2B;AAEvCC,UAAAA,WAAW,EAAE,CAAE,CAAC,EAAH,EAAO,CAAP;AAF0B,SAA5B;AADb,OADU;AAFZ,KAHO;AADT,KAiBC,cAAC,wBAAD;AAA0B,IAAA,OAAO,EAAGzB;AAApC,KACC,cAAC,IAAD;AAAM,IAAA,KAAK,EAAGtB,MAAM,CAACgD;AAArB,KACC,cAAC,IAAD;AAAM,IAAA,aAAa,EAAG,CAAtB;AAA0B,IAAA,KAAK,EAAGP;AAAlC,KACGtC,OADH,CADD,CADD,CAjBD,EAwBGY,KAAK,IACN,cAAC,QAAD;AACC,IAAA,KAAK,EAAGf,MAAM,CAACiD,cADhB;AAEC,IAAA,QAAQ,EAAC,WAFV;AAGC,IAAA,UAAU,EAAG;AAHd,IAzBF,CADD,CADD;AAoCA,CAzGD;;AA2GA,eAAehD,MAAf","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-module/notice/list.js

@@ -23,12 +23,14 @@ import Notice from './';
  * @return {Object} The rendered notices list.
  */
 
-function NoticeList({
-  notices,
-  onRemove = noop,
-  className,
-  children
-}) {
+function NoticeList(_ref) {
+  let {
+    notices,
+    onRemove = noop,
+    className,
+    children
+  } = _ref;
+
   const removeNotice = id => () => onRemove(id);
 
   className = classnames('components-notice-list', className);

package/build-module/notice/list.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/notice/list.js"],"names":["classnames","noop","omit","Notice","NoticeList","notices","onRemove","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,QAA3B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,IAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,UAAT,CAAqB;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,QAAQ,GAAGL,IAAtB;AAA4BM,EAAAA,SAA5B;AAAuCC,EAAAA;AAAvC,CAArB,EAAyE;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAMJ,QAAQ,CAAEI,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAGP,UAAU,CAAE,wBAAF,EAA4BO,SAA5B,CAAtB;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGH,OAAL,EAAeM,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,cAAC,MAAD,eACMX,IAAI,CAAEW,MAAF,EAAU,CAAE,SAAF,CAAV,CADV;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;;AAED,eAAeV,UAAf","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":["classnames","noop","omit","Notice","NoticeList","notices","onRemove","className","children","removeNotice","id","reverse","map","notice","content"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,QAA3B;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,IAAnB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,SAASC,UAAT,OAAyE;AAAA,MAApD;AAAEC,IAAAA,OAAF;AAAWC,IAAAA,QAAQ,GAAGL,IAAtB;AAA4BM,IAAAA,SAA5B;AAAuCC,IAAAA;AAAvC,GAAoD;;AACxE,QAAMC,YAAY,GAAKC,EAAF,IAAU,MAAMJ,QAAQ,CAAEI,EAAF,CAA7C;;AAEAH,EAAAA,SAAS,GAAGP,UAAU,CAAE,wBAAF,EAA4BO,SAA5B,CAAtB;AAEA,SACC;AAAK,IAAA,SAAS,EAAGA;AAAjB,KACGC,QADH,EAEG,CAAE,GAAGH,OAAL,EAAeM,OAAf,GAAyBC,GAAzB,CAAgCC,MAAF,IAC/B,cAAC,MAAD,eACMX,IAAI,CAAEW,MAAF,EAAU,CAAE,SAAF,CAAV,CADV;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;;AAED,eAAeV,UAAf","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-module/number-control/index.js

@@ -20,31 +20,34 @@ import { Input } from './styles/number-control-styles';
 import * as inputControlActionTypes from '../input-control/reducer/actions';
 import { composeStateReducers } from '../input-control/reducer/reducer';
 import { add, subtract, roundClamp } from '../utils/math';
-import { useJumpStep } from '../utils/hooks';
 import { isValueEmpty } from '../utils/values';
-export 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 = roundClamp(0, min, max, step);
-  const jumpStep = useJumpStep({
-    step,
-    shiftStep,
-    isShiftStepEnabled
-  });
+export 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 = 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)) : roundClamp(value, min, max, stepOverride !== null && stepOverride !== void 0 ? stepOverride : baseStep);
+  };
+
   const autoComplete = typeProp === 'number' ? 'off' : null;
   const classes = classNames('components-number-control', className);
   /**
@@ -70,7 +73,7 @@ export 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 = isValueEmpty(currentValue) ? baseValue : currentValue;
 
       if (event !== null && event !== void 0 && event.preventDefault) {
@@ -85,8 +88,7 @@ export function NumberControl({
         nextValue = subtract(nextValue, incrementalValue);
       }
 
-      nextValue = roundClamp(nextValue, min, max, incrementalValue);
-      state.value = nextValue;
+      state.value = constrainValue(nextValue, enableShift ? incrementalValue : null);
     }
     /**
      * Handles drag to update events
@@ -94,43 +96,38 @@ export 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 = isRTL() ? -1 : 1;
           break;
 
         case 's':
-          directionBaseValue = y;
+          delta = y;
           directionModifier = 1;
           break;
 
         case 'w':
-          directionBaseValue = x;
+          delta = x;
           directionModifier = isRTL() ? 1 : -1;
           break;
       }
 
-      const distance = directionBaseValue * modifier * directionModifier;
-      let nextValue;
-
-      if (distance !== 0) {
-        nextValue = roundClamp(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(add(currentValue, distance), enableShift ? modifier : null);
       }
     }
     /**
@@ -140,7 +137,7 @@ export function NumberControl({
 
     if (type === inputControlActionTypes.PRESS_ENTER || type === inputControlActionTypes.COMMIT) {
       const applyEmptyValue = required === false && currentValue === '';
-      state.value = applyEmptyValue ? currentValue : roundClamp(currentValue, min, max, step);
+      state.value = applyEmptyValue ? currentValue : constrainValue(currentValue);
     }
 
     return state;
@@ -159,7 +156,7 @@ export function NumberControl({
     min: min,
     ref: ref,
     required: required,
-    step: jumpStep,
+    step: step,
     type: typeProp,
     value: valueProp,
     __unstableStateReducer: composeStateReducers(numberControlStateReducer, stateReducer)