@wordpress/components 25.0.0 → 25.1.1

package/build/navigable-container/tabbable.js

@@ -11,8 +11,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _container = _interopRequireDefault(require("./container"));
 
 /**
@@ -26,12 +24,10 @@ var _container = _interopRequireDefault(require("./container"));
 /**
  * Internal dependencies
  */
-function UnforwardedTabbableContainer(_ref, ref) {
-  let {
-    eventToOffset,
-    ...props
-  } = _ref;
-
+function UnforwardedTabbableContainer({
+  eventToOffset,
+  ...props
+}, ref) {
   const innerEventToOffset = evt => {
     const {
       code,
@@ -60,12 +56,13 @@ function UnforwardedTabbableContainer(_ref, ref) {
     return undefined;
   };
 
-  return (0, _element.createElement)(_container.default, (0, _extends2.default)({
+  return (0, _element.createElement)(_container.default, {
     ref: ref,
     stopNavigationEvents: true,
     onlyBrowserTabstops: true,
-    eventToOffset: innerEventToOffset
-  }, props));
+    eventToOffset: innerEventToOffset,
+    ...props
+  });
 }
 /**
  * A container for tabbable elements.

package/build/navigable-container/tabbable.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigable-container/tabbable.tsx"],"names":["UnforwardedTabbableContainer","ref","eventToOffset","props","innerEventToOffset","evt","code","shiftKey","undefined","TabbableContainer"],"mappings":";;;;;;;;;;;AAQA;;;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIO,SAASA,4BAAT,OAENC,GAFM,EAGL;AAAA,MAFD;AAAEC,IAAAA,aAAF;AAAiB,OAAGC;AAApB,GAEC;;AACD,QAAMC,kBAAkB,GAAKC,GAAF,IAA0B;AACpD,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAqBF,GAA3B;;AACA,QAAK,UAAUC,IAAf,EAAsB;AACrB,aAAOC,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAAvB;AACA,KAJmD,CAMpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,QAAKL,aAAL,EAAqB;AACpB,aAAOA,aAAa,CAAEG,GAAF,CAApB;AACA;;AAED,WAAOG,SAAP;AACA,GAtBD;;AAwBA,SACC,4BAAC,kBAAD;AACC,IAAA,GAAG,EAAGP,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,aAAa,EAAGG;AAJjB,KAKMD,KALN,EADD;AASA;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;;;AACO,MAAMM,iBAAiB,GAAG,yBAAYT,4BAAZ,CAA1B;;eAEQS,iB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { TabbableContainerProps } from './types';\n\nexport function UnforwardedTabbableContainer(\n\t{ eventToOffset, ...props }: TabbableContainerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst innerEventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\n/**\n * A container for tabbable elements.\n *\n *  ```jsx\n *  import {\n *    TabbableContainer,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyTabbableContainer = () => (\n *    <div>\n *      <span>Tabbable Container:</span>\n *      <TabbableContainer onNavigate={ onNavigate }>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 1\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 2\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 3\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 4\n *        </Button>\n *      </TabbableContainer>\n *    </div>\n *  );\n *  ```\n */\nexport const TabbableContainer = forwardRef( UnforwardedTabbableContainer );\n\nexport default TabbableContainer;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigable-container/tabbable.tsx"],"names":["UnforwardedTabbableContainer","eventToOffset","props","ref","innerEventToOffset","evt","code","shiftKey","undefined","TabbableContainer"],"mappings":";;;;;;;;;;;AAQA;;AAKA;;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAIO,SAASA,4BAAT,CACN;AAAEC,EAAAA,aAAF;AAAiB,KAAGC;AAApB,CADM,EAENC,GAFM,EAGL;AACD,QAAMC,kBAAkB,GAAKC,GAAF,IAA0B;AACpD,UAAM;AAAEC,MAAAA,IAAF;AAAQC,MAAAA;AAAR,QAAqBF,GAA3B;;AACA,QAAK,UAAUC,IAAf,EAAsB;AACrB,aAAOC,QAAQ,GAAG,CAAC,CAAJ,GAAQ,CAAvB;AACA,KAJmD,CAMpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,QAAKN,aAAL,EAAqB;AACpB,aAAOA,aAAa,CAAEI,GAAF,CAApB;AACA;;AAED,WAAOG,SAAP;AACA,GAtBD;;AAwBA,SACC,4BAAC,kBAAD;AACC,IAAA,GAAG,EAAGL,GADP;AAEC,IAAA,oBAAoB,MAFrB;AAGC,IAAA,mBAAmB,MAHpB;AAIC,IAAA,aAAa,EAAGC,kBAJjB;AAAA,OAKMF;AALN,IADD;AASA;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;;;AACO,MAAMO,iBAAiB,GAAG,yBAAYT,4BAAZ,CAA1B;;eAEQS,iB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport NavigableContainer from './container';\nimport type { TabbableContainerProps } from './types';\n\nexport function UnforwardedTabbableContainer(\n\t{ eventToOffset, ...props }: TabbableContainerProps,\n\tref: ForwardedRef< any >\n) {\n\tconst innerEventToOffset = ( evt: KeyboardEvent ) => {\n\t\tconst { code, shiftKey } = evt;\n\t\tif ( 'Tab' === code ) {\n\t\t\treturn shiftKey ? -1 : 1;\n\t\t}\n\n\t\t// Allow custom handling of keys besides Tab.\n\t\t//\n\t\t// By default, TabbableContainer will move focus forward on Tab and\n\t\t// backward on Shift+Tab. The handler below will be used for all other\n\t\t// events. The semantics for `eventToOffset`'s return\n\t\t// values are the following:\n\t\t//\n\t\t// - +1: move focus forward\n\t\t// - -1: move focus backward\n\t\t// -  0: don't move focus, but acknowledge event and thus stop it\n\t\t// - undefined: do nothing, let the event propagate.\n\t\tif ( eventToOffset ) {\n\t\t\treturn eventToOffset( evt );\n\t\t}\n\n\t\treturn undefined;\n\t};\n\n\treturn (\n\t\t<NavigableContainer\n\t\t\tref={ ref }\n\t\t\tstopNavigationEvents\n\t\t\tonlyBrowserTabstops\n\t\t\teventToOffset={ innerEventToOffset }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\n/**\n * A container for tabbable elements.\n *\n *  ```jsx\n *  import {\n *    TabbableContainer,\n *    Button,\n *  } from '@wordpress/components';\n *\n *  function onNavigate( index, target ) {\n *    console.log( `Navigates to ${ index }`, target );\n *  }\n *\n *  const MyTabbableContainer = () => (\n *    <div>\n *      <span>Tabbable Container:</span>\n *      <TabbableContainer onNavigate={ onNavigate }>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 1\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 2\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 3\n *        </Button>\n *        <Button variant=\"secondary\" tabIndex=\"0\">\n *          Section 4\n *        </Button>\n *      </TabbableContainer>\n *    </div>\n *  );\n *  ```\n */\nexport const TabbableContainer = forwardRef( UnforwardedTabbableContainer );\n\nexport default TabbableContainer;\n"]}

package/build/navigation/back-button/index.js

@@ -30,22 +30,19 @@ var _navigationStyles = require("../styles/navigation-styles");
 /**
  * Internal dependencies
  */
-function UnforwardedNavigationBackButton(_ref, ref) {
-  var _navigationTree$getMe;
-
-  let {
-    backButtonLabel,
-    className,
-    href,
-    onClick,
-    parentMenu
-  } = _ref;
+function UnforwardedNavigationBackButton({
+  backButtonLabel,
+  className,
+  href,
+  onClick,
+  parentMenu
+}, ref) {
   const {
     setActiveMenu,
     navigationTree
   } = (0, _context.useNavigationContext)();
   const classes = (0, _classnames.default)('components-navigation__back-button', className);
-  const parentMenuTitle = parentMenu !== undefined ? (_navigationTree$getMe = navigationTree.getMenu(parentMenu)) === null || _navigationTree$getMe === void 0 ? void 0 : _navigationTree$getMe.title : undefined;
+  const parentMenuTitle = parentMenu !== undefined ? navigationTree.getMenu(parentMenu)?.title : undefined;
 
   const handleOnClick = event => {
     if (typeof onClick === 'function') {

package/build/navigation/back-button/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/back-button/index.tsx"],"names":["UnforwardedNavigationBackButton","ref","backButtonLabel","className","href","onClick","parentMenu","setActiveMenu","navigationTree","classes","parentMenuTitle","undefined","getMenu","title","handleOnClick","event","animationDirection","defaultPrevented","icon","chevronRight","chevronLeft","NavigationBackButton"],"mappings":";;;;;;;;;AAOA;;AAJA;;AAKA;;AACA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAEA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,+BAAT,OAQCC,GARD,EASE;AAAA;;AAAA,MARD;AACCC,IAAAA,eADD;AAECC,IAAAA,SAFD;AAGCC,IAAAA,IAHD;AAICC,IAAAA,OAJD;AAKCC,IAAAA;AALD,GAQC;AACD,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAoC,oCAA1C;AAEA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfN,SAFe,CAAhB;AAKA,QAAMO,eAAe,GACpBJ,UAAU,KAAKK,SAAf,4BACGH,cAAc,CAACI,OAAf,CAAwBN,UAAxB,CADH,0DACG,sBAAsCO,KADzC,GAEGF,SAHJ;;AAKA,QAAMG,aAAqD,GAAKC,KAAF,IAAa;AAC1E,QAAK,OAAOV,OAAP,KAAmB,UAAxB,EAAqC;AACpCA,MAAAA,OAAO,CAAEU,KAAF,CAAP;AACA;;AAED,UAAMC,kBAAkB,GAAG,qBAAU,MAAV,GAAmB,OAA9C;;AACA,QAAKV,UAAU,IAAI,CAAES,KAAK,CAACE,gBAA3B,EAA8C;AAC7CV,MAAAA,aAAa,CAAED,UAAF,EAAcU,kBAAd,CAAb;AACA;AACD,GATD;;AAUA,QAAME,IAAI,GAAG,qBAAUC,mBAAV,GAAyBC,kBAAtC;AACA,SACC,4BAAC,kCAAD;AACC,IAAA,SAAS,EAAGX,OADb;AAEC,IAAA,IAAI,EAAGL,IAFR;AAGC,IAAA,OAAO,EAAC,UAHT;AAIC,IAAA,GAAG,EAAGH,GAJP;AAKC,IAAA,OAAO,EAAGa;AALX,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGI;AAAb,IAPD,EAQGhB,eAAe,IAAIQ,eAAnB,IAAsC,cAAI,MAAJ,CARzC,CADD;AAYA;;AAEM,MAAMW,oBAAoB,GAAG,yBACnCrB,+BADmC,CAA7B;;eAIQqB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\n\nimport type { NavigationBackButtonProps } from '../types';\n\nfunction UnforwardedNavigationBackButton(\n\t{\n\t\tbackButtonLabel,\n\t\tclassName,\n\t\thref,\n\t\tonClick,\n\t\tparentMenu,\n\t}: NavigationBackButtonProps,\n\tref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >\n) {\n\tconst { setActiveMenu, navigationTree } = useNavigationContext();\n\n\tconst classes = classnames(\n\t\t'components-navigation__back-button',\n\t\tclassName\n\t);\n\n\tconst parentMenuTitle =\n\t\tparentMenu !== undefined\n\t\t\t? navigationTree.getMenu( parentMenu )?.title\n\t\t\t: undefined;\n\n\tconst handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {\n\t\tif ( typeof onClick === 'function' ) {\n\t\t\tonClick( event );\n\t\t}\n\n\t\tconst animationDirection = isRTL() ? 'left' : 'right';\n\t\tif ( parentMenu && ! event.defaultPrevented ) {\n\t\t\tsetActiveMenu( parentMenu, animationDirection );\n\t\t}\n\t};\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\treturn (\n\t\t<MenuBackButtonUI\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tvariant=\"tertiary\"\n\t\t\tref={ ref }\n\t\t\tonClick={ handleOnClick }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t\t{ backButtonLabel || parentMenuTitle || __( 'Back' ) }\n\t\t</MenuBackButtonUI>\n\t);\n}\n\nexport const NavigationBackButton = forwardRef(\n\tUnforwardedNavigationBackButton\n);\n\nexport default NavigationBackButton;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/back-button/index.tsx"],"names":["UnforwardedNavigationBackButton","backButtonLabel","className","href","onClick","parentMenu","ref","setActiveMenu","navigationTree","classes","parentMenuTitle","undefined","getMenu","title","handleOnClick","event","animationDirection","defaultPrevented","icon","chevronRight","chevronLeft","NavigationBackButton"],"mappings":";;;;;;;;;AAOA;;AAJA;;AAKA;;AACA;;AAKA;;AACA;;AAfA;AACA;AACA;;AAEA;AACA;AACA;;AAKA;AACA;AACA;AAMA,SAASA,+BAAT,CACC;AACCC,EAAAA,eADD;AAECC,EAAAA,SAFD;AAGCC,EAAAA,IAHD;AAICC,EAAAA,OAJD;AAKCC,EAAAA;AALD,CADD,EAQCC,GARD,EASE;AACD,QAAM;AAAEC,IAAAA,aAAF;AAAiBC,IAAAA;AAAjB,MAAoC,oCAA1C;AAEA,QAAMC,OAAO,GAAG,yBACf,oCADe,EAEfP,SAFe,CAAhB;AAKA,QAAMQ,eAAe,GACpBL,UAAU,KAAKM,SAAf,GACGH,cAAc,CAACI,OAAf,CAAwBP,UAAxB,GAAsCQ,KADzC,GAEGF,SAHJ;;AAKA,QAAMG,aAAqD,GAAKC,KAAF,IAAa;AAC1E,QAAK,OAAOX,OAAP,KAAmB,UAAxB,EAAqC;AACpCA,MAAAA,OAAO,CAAEW,KAAF,CAAP;AACA;;AAED,UAAMC,kBAAkB,GAAG,qBAAU,MAAV,GAAmB,OAA9C;;AACA,QAAKX,UAAU,IAAI,CAAEU,KAAK,CAACE,gBAA3B,EAA8C;AAC7CV,MAAAA,aAAa,CAAEF,UAAF,EAAcW,kBAAd,CAAb;AACA;AACD,GATD;;AAUA,QAAME,IAAI,GAAG,qBAAUC,mBAAV,GAAyBC,kBAAtC;AACA,SACC,4BAAC,kCAAD;AACC,IAAA,SAAS,EAAGX,OADb;AAEC,IAAA,IAAI,EAAGN,IAFR;AAGC,IAAA,OAAO,EAAC,UAHT;AAIC,IAAA,GAAG,EAAGG,GAJP;AAKC,IAAA,OAAO,EAAGQ;AALX,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGI;AAAb,IAPD,EAQGjB,eAAe,IAAIS,eAAnB,IAAsC,cAAI,MAAJ,CARzC,CADD;AAYA;;AAEM,MAAMW,oBAAoB,GAAG,yBACnCrB,+BADmC,CAA7B;;eAIQqB,oB","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n/**\n * WordPress dependencies\n */\nimport { forwardRef } from '@wordpress/element';\nimport { __, isRTL } from '@wordpress/i18n';\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { MenuBackButtonUI } from '../styles/navigation-styles';\n\nimport type { NavigationBackButtonProps } from '../types';\n\nfunction UnforwardedNavigationBackButton(\n\t{\n\t\tbackButtonLabel,\n\t\tclassName,\n\t\thref,\n\t\tonClick,\n\t\tparentMenu,\n\t}: NavigationBackButtonProps,\n\tref: React.ForwardedRef< HTMLAnchorElement | HTMLButtonElement >\n) {\n\tconst { setActiveMenu, navigationTree } = useNavigationContext();\n\n\tconst classes = classnames(\n\t\t'components-navigation__back-button',\n\t\tclassName\n\t);\n\n\tconst parentMenuTitle =\n\t\tparentMenu !== undefined\n\t\t\t? navigationTree.getMenu( parentMenu )?.title\n\t\t\t: undefined;\n\n\tconst handleOnClick: React.MouseEventHandler< HTMLElement > = ( event ) => {\n\t\tif ( typeof onClick === 'function' ) {\n\t\t\tonClick( event );\n\t\t}\n\n\t\tconst animationDirection = isRTL() ? 'left' : 'right';\n\t\tif ( parentMenu && ! event.defaultPrevented ) {\n\t\t\tsetActiveMenu( parentMenu, animationDirection );\n\t\t}\n\t};\n\tconst icon = isRTL() ? chevronRight : chevronLeft;\n\treturn (\n\t\t<MenuBackButtonUI\n\t\t\tclassName={ classes }\n\t\t\thref={ href }\n\t\t\tvariant=\"tertiary\"\n\t\t\tref={ ref }\n\t\t\tonClick={ handleOnClick }\n\t\t>\n\t\t\t<Icon icon={ icon } />\n\t\t\t{ backButtonLabel || parentMenuTitle || __( 'Back' ) }\n\t\t</MenuBackButtonUI>\n\t);\n}\n\nexport const NavigationBackButton = forwardRef(\n\tUnforwardedNavigationBackButton\n);\n\nexport default NavigationBackButton;\n"]}

package/build/navigation/group/index.js

@@ -31,12 +31,11 @@ var _context2 = require("../context");
  */
 let uniqueId = 0;
 
-function NavigationGroup(_ref) {
-  let {
-    children,
-    className,
-    title
-  } = _ref;
+function NavigationGroup({
+  children,
+  className,
+  title
+}) {
   const [groupId] = (0, _element.useState)(`group-${++uniqueId}`);
   const {
     navigationTree: {

package/build/navigation/group/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/group/index.tsx"],"names":["uniqueId","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","Object","values","some","item","_isVisible","groupTitleId","classes"],"mappings":";;;;;;;;;;AAQA;;AALA;;AAUA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,IAAIA,QAAQ,GAAG,CAAf;;AAEO,SAASC,eAAT,OAImB;AAAA,MAJO;AAChCC,IAAAA,QADgC;AAEhCC,IAAAA,SAFgC;AAGhCC,IAAAA;AAHgC,GAIP;AACzB,QAAM,CAAEC,OAAF,IAAc,uBAAW,SAAS,EAAEL,QAAU,EAAhC,CAApB;AACA,QAAM;AACLM,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,qCAFJ;AAIA,QAAMC,OAAO,GAAG;AAAEC,IAAAA,KAAK,EAAEJ;AAAT,GAAhB,CANyB,CAQzB;;AACA,MACC,CAAEK,MAAM,CAACC,MAAP,CAAeJ,KAAf,EAAuBK,IAAvB,CACCC,IAAF,IAAYA,IAAI,CAACJ,KAAL,KAAeJ,OAAf,IAA0BQ,IAAI,CAACC,UAD1C,CADH,EAIE;AACD,WACC,4BAAC,+BAAD,CAAwB,QAAxB;AAAiC,MAAA,KAAK,EAAGN;AAAzC,OACGN,QADH,CADD;AAKA;;AAED,QAAMa,YAAY,GAAI,sCAAsCV,OAAS,EAArE;AACA,QAAMW,OAAO,GAAG,yBAAY,8BAAZ,EAA4Cb,SAA5C,CAAhB;AAEA,SACC,4BAAC,+BAAD,CAAwB,QAAxB;AAAiC,IAAA,KAAK,EAAGK;AAAzC,KACC;AAAI,IAAA,SAAS,EAAGQ;AAAhB,KACGZ,KAAK,IACN,4BAAC,8BAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGW,YAFN;AAGC,IAAA,KAAK,EAAG;AAHT,KAKGX,KALH,CAFF,EAUC;AAAI,uBAAkBW,YAAtB;AAAqC,IAAA,IAAI,EAAC;AAA1C,KACGb,QADH,CAVD,CADD,CADD;AAkBA;;eAEcD,e","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nimport type { NavigationGroupProps } from '../types';\n\nlet uniqueId = 0;\n\nexport function NavigationGroup( {\n\tchildren,\n\tclassName,\n\ttitle,\n}: NavigationGroupProps ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n\nexport default NavigationGroup;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/group/index.tsx"],"names":["uniqueId","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","Object","values","some","item","_isVisible","groupTitleId","classes"],"mappings":";;;;;;;;;;AAQA;;AALA;;AAUA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,IAAIA,QAAQ,GAAG,CAAf;;AAEO,SAASC,eAAT,CAA0B;AAChCC,EAAAA,QADgC;AAEhCC,EAAAA,SAFgC;AAGhCC,EAAAA;AAHgC,CAA1B,EAImB;AACzB,QAAM,CAAEC,OAAF,IAAc,uBAAW,SAAS,EAAEL,QAAU,EAAhC,CAApB;AACA,QAAM;AACLM,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,qCAFJ;AAIA,QAAMC,OAAO,GAAG;AAAEC,IAAAA,KAAK,EAAEJ;AAAT,GAAhB,CANyB,CAQzB;;AACA,MACC,CAAEK,MAAM,CAACC,MAAP,CAAeJ,KAAf,EAAuBK,IAAvB,CACCC,IAAF,IAAYA,IAAI,CAACJ,KAAL,KAAeJ,OAAf,IAA0BQ,IAAI,CAACC,UAD1C,CADH,EAIE;AACD,WACC,4BAAC,+BAAD,CAAwB,QAAxB;AAAiC,MAAA,KAAK,EAAGN;AAAzC,OACGN,QADH,CADD;AAKA;;AAED,QAAMa,YAAY,GAAI,sCAAsCV,OAAS,EAArE;AACA,QAAMW,OAAO,GAAG,yBAAY,8BAAZ,EAA4Cb,SAA5C,CAAhB;AAEA,SACC,4BAAC,+BAAD,CAAwB,QAAxB;AAAiC,IAAA,KAAK,EAAGK;AAAzC,KACC;AAAI,IAAA,SAAS,EAAGQ;AAAhB,KACGZ,KAAK,IACN,4BAAC,8BAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGW,YAFN;AAGC,IAAA,KAAK,EAAG;AAHT,KAKGX,KALH,CAFF,EAUC;AAAI,uBAAkBW,YAAtB;AAAqC,IAAA,IAAI,EAAC;AAA1C,KACGb,QADH,CAVD,CADD,CADD;AAkBA;;eAEcD,e","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nimport type { NavigationGroupProps } from '../types';\n\nlet uniqueId = 0;\n\nexport function NavigationGroup( {\n\tchildren,\n\tclassName,\n\ttitle,\n}: NavigationGroupProps ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n\nexport default NavigationGroup;\n"]}

package/build/navigation/index.js

@@ -79,22 +79,19 @@ const noop = () => {};
  */
 
 
-function Navigation(_ref) {
-  let {
-    activeItem,
-    activeMenu = _constants.ROOT_MENU,
-    children,
-    className,
-    onActivateMenu = noop
-  } = _ref;
+function Navigation({
+  activeItem,
+  activeMenu = _constants.ROOT_MENU,
+  children,
+  className,
+  onActivateMenu = noop
+}) {
   const [menu, setMenu] = (0, _element.useState)(activeMenu);
   const [slideOrigin, setSlideOrigin] = (0, _element.useState)();
   const navigationTree = (0, _useCreateNavigationTree.useCreateNavigationTree)();
   const defaultSlideOrigin = (0, _i18n.isRTL)() ? 'right' : 'left';
 
-  const setActiveMenu = function (menuId) {
-    let slideInOrigin = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultSlideOrigin;
-
+  const setActiveMenu = (menuId, slideInOrigin = defaultSlideOrigin) => {
     if (!navigationTree.getMenu(menuId)) {
       return;
     }

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/index.tsx"],"names":["noop","Navigation","activeItem","activeMenu","ROOT_MENU","children","className","onActivateMenu","menu","setMenu","slideOrigin","setSlideOrigin","navigationTree","defaultSlideOrigin","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","current","context","classes","animateClassName","type","origin","undefined"],"mappings":";;;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAYA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,UAAT,OAMc;AAAA,MANO;AAC3BC,IAAAA,UAD2B;AAE3BC,IAAAA,UAAU,GAAGC,oBAFc;AAG3BC,IAAAA,QAH2B;AAI3BC,IAAAA,SAJ2B;AAK3BC,IAAAA,cAAc,GAAGP;AALU,GAMP;AACpB,QAAM,CAAEQ,IAAF,EAAQC,OAAR,IAAoB,uBAAUN,UAAV,CAA1B;AACA,QAAM,CAAEO,WAAF,EAAeC,cAAf,IAAkC,wBAAxC;AACA,QAAMC,cAAc,GAAG,uDAAvB;AACA,QAAMC,kBAAkB,GAAG,qBAAU,OAAV,GAAoB,MAA/C;;AAEA,QAAMC,aAAuD,GAAG,UAC/DC,MAD+D,EAG3D;AAAA,QADJC,aACI,uEADYH,kBACZ;;AACJ,QAAK,CAAED,cAAc,CAACK,OAAf,CAAwBF,MAAxB,CAAP,EAA0C;AACzC;AACA;;AAEDJ,IAAAA,cAAc,CAAEK,aAAF,CAAd;AACAP,IAAAA,OAAO,CAAEM,MAAF,CAAP;AACAR,IAAAA,cAAc,CAAEQ,MAAF,CAAd;AACA,GAXD,CANoB,CAmBpB;;;AACA,QAAMG,SAAS,GAAG,qBAAQ,KAAR,CAAlB;AACA,0BAAW,MAAM;AAChB,QAAK,CAAEA,SAAS,CAACC,OAAjB,EAA2B;AAC1BD,MAAAA,SAAS,CAACC,OAAV,GAAoB,IAApB;AACA;AACD,GAJD,EAIG,EAJH;AAMA,0BAAW,MAAM;AAChB,QAAKhB,UAAU,KAAKK,IAApB,EAA2B;AAC1BM,MAAAA,aAAa,CAAEX,UAAF,CAAb;AACA,KAHe,CAIhB;AACA;AACA;;AACA,GAPD,EAOG,CAAEA,UAAF,CAPH;AASA,QAAMiB,OAAO,GAAG;AACflB,IAAAA,UADe;AAEfC,IAAAA,UAAU,EAAEK,IAFG;AAGfM,IAAAA,aAHe;AAIfF,IAAAA;AAJe,GAAhB;AAOA,QAAMS,OAAO,GAAG,yBAAY,uBAAZ,EAAqCf,SAArC,CAAhB;AACA,QAAMgB,gBAAgB,GAAG,kCAAqB;AAC7CC,IAAAA,IAAI,EAAE,UADuC;AAE7CC,IAAAA,MAAM,EAAEd;AAFqC,GAArB,CAAzB;AAKA,SACC,4BAAC,8BAAD;AAAc,IAAA,SAAS,EAAGW;AAA1B,KACC;AACC,IAAA,GAAG,EAAGb,IADP;AAEC,IAAA,SAAS,EACRc,gBAAgB,GACb,yBAAY;AACZ,OAAEA,gBAAF,GACCJ,SAAS,CAACC,OAAV,IAAqBT;AAFV,KAAZ,CADa,GAKbe;AARL,KAWC,4BAAC,0BAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGL;AAApC,KACGf,QADH,CAXD,CADD,CADD;AAmBA;;eAEcJ,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../animate';\nimport { ROOT_MENU } from './constants';\nimport { NavigationContext } from './context';\nimport { NavigationUI } from './styles/navigation-styles';\nimport { useCreateNavigationTree } from './use-create-navigation-tree';\n\nimport type {\n\tNavigationProps,\n\tNavigationContext as NavigationContextType,\n} from './types';\n\nconst noop = () => {};\n\n/**\n * Render a navigation list with optional groupings and hierarchy.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigation as Navigation,\n *   __experimentalNavigationGroup as NavigationGroup,\n *   __experimentalNavigationItem as NavigationItem,\n *   __experimentalNavigationMenu as NavigationMenu,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n *   <Navigation>\n *     <NavigationMenu title=\"Home\">\n *       <NavigationGroup title=\"Group 1\">\n *         <NavigationItem item=\"item-1\" title=\"Item 1\" />\n *         <NavigationItem item=\"item-2\" title=\"Item 2\" />\n *       </NavigationGroup>\n *       <NavigationGroup title=\"Group 2\">\n *         <NavigationItem\n *           item=\"item-3\"\n *           navigateToMenu=\"category\"\n *           title=\"Category\"\n *         />\n *       </NavigationGroup>\n *     </NavigationMenu>\n *\n *     <NavigationMenu\n *       backButtonLabel=\"Home\"\n *       menu=\"category\"\n *       parentMenu=\"root\"\n *       title=\"Category\"\n *     >\n *       <NavigationItem badge=\"1\" item=\"child-1\" title=\"Child 1\" />\n *       <NavigationItem item=\"child-2\" title=\"Child 2\" />\n *     </NavigationMenu>\n *   </Navigation>\n * );\n * ```\n */\nexport function Navigation( {\n\tactiveItem,\n\tactiveMenu = ROOT_MENU,\n\tchildren,\n\tclassName,\n\tonActivateMenu = noop,\n}: NavigationProps ) {\n\tconst [ menu, setMenu ] = useState( activeMenu );\n\tconst [ slideOrigin, setSlideOrigin ] = useState< 'left' | 'right' >();\n\tconst navigationTree = useCreateNavigationTree();\n\tconst defaultSlideOrigin = isRTL() ? 'right' : 'left';\n\n\tconst setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (\n\t\tmenuId,\n\t\tslideInOrigin = defaultSlideOrigin\n\t) => {\n\t\tif ( ! navigationTree.getMenu( menuId ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetSlideOrigin( slideInOrigin );\n\t\tsetMenu( menuId );\n\t\tonActivateMenu( menuId );\n\t};\n\n\t// Used to prevent the sliding animation on mount\n\tconst isMounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( ! isMounted.current ) {\n\t\t\tisMounted.current = true;\n\t\t}\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( activeMenu !== menu ) {\n\t\t\tsetActiveMenu( activeMenu );\n\t\t}\n\t\t// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41612 for context.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ activeMenu ] );\n\n\tconst context = {\n\t\tactiveItem,\n\t\tactiveMenu: menu,\n\t\tsetActiveMenu,\n\t\tnavigationTree,\n\t};\n\n\tconst classes = classnames( 'components-navigation', className );\n\tconst animateClassName = getAnimateClassName( {\n\t\ttype: 'slide-in',\n\t\torigin: slideOrigin,\n\t} );\n\n\treturn (\n\t\t<NavigationUI className={ classes }>\n\t\t\t<div\n\t\t\t\tkey={ menu }\n\t\t\t\tclassName={\n\t\t\t\t\tanimateClassName\n\t\t\t\t\t\t? classnames( {\n\t\t\t\t\t\t\t\t[ animateClassName ]:\n\t\t\t\t\t\t\t\t\tisMounted.current && slideOrigin,\n\t\t\t\t\t\t  } )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<NavigationContext.Provider value={ context }>\n\t\t\t\t\t{ children }\n\t\t\t\t</NavigationContext.Provider>\n\t\t\t</div>\n\t\t</NavigationUI>\n\t);\n}\n\nexport default Navigation;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/index.tsx"],"names":["noop","Navigation","activeItem","activeMenu","ROOT_MENU","children","className","onActivateMenu","menu","setMenu","slideOrigin","setSlideOrigin","navigationTree","defaultSlideOrigin","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","current","context","classes","animateClassName","type","origin","undefined"],"mappings":";;;;;;;;;;AAQA;;AALA;;AAMA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AAYA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACO,SAASC,UAAT,CAAqB;AAC3BC,EAAAA,UAD2B;AAE3BC,EAAAA,UAAU,GAAGC,oBAFc;AAG3BC,EAAAA,QAH2B;AAI3BC,EAAAA,SAJ2B;AAK3BC,EAAAA,cAAc,GAAGP;AALU,CAArB,EAMc;AACpB,QAAM,CAAEQ,IAAF,EAAQC,OAAR,IAAoB,uBAAUN,UAAV,CAA1B;AACA,QAAM,CAAEO,WAAF,EAAeC,cAAf,IAAkC,wBAAxC;AACA,QAAMC,cAAc,GAAG,uDAAvB;AACA,QAAMC,kBAAkB,GAAG,qBAAU,OAAV,GAAoB,MAA/C;;AAEA,QAAMC,aAAuD,GAAG,CAC/DC,MAD+D,EAE/DC,aAAa,GAAGH,kBAF+C,KAG3D;AACJ,QAAK,CAAED,cAAc,CAACK,OAAf,CAAwBF,MAAxB,CAAP,EAA0C;AACzC;AACA;;AAEDJ,IAAAA,cAAc,CAAEK,aAAF,CAAd;AACAP,IAAAA,OAAO,CAAEM,MAAF,CAAP;AACAR,IAAAA,cAAc,CAAEQ,MAAF,CAAd;AACA,GAXD,CANoB,CAmBpB;;;AACA,QAAMG,SAAS,GAAG,qBAAQ,KAAR,CAAlB;AACA,0BAAW,MAAM;AAChB,QAAK,CAAEA,SAAS,CAACC,OAAjB,EAA2B;AAC1BD,MAAAA,SAAS,CAACC,OAAV,GAAoB,IAApB;AACA;AACD,GAJD,EAIG,EAJH;AAMA,0BAAW,MAAM;AAChB,QAAKhB,UAAU,KAAKK,IAApB,EAA2B;AAC1BM,MAAAA,aAAa,CAAEX,UAAF,CAAb;AACA,KAHe,CAIhB;AACA;AACA;;AACA,GAPD,EAOG,CAAEA,UAAF,CAPH;AASA,QAAMiB,OAAO,GAAG;AACflB,IAAAA,UADe;AAEfC,IAAAA,UAAU,EAAEK,IAFG;AAGfM,IAAAA,aAHe;AAIfF,IAAAA;AAJe,GAAhB;AAOA,QAAMS,OAAO,GAAG,yBAAY,uBAAZ,EAAqCf,SAArC,CAAhB;AACA,QAAMgB,gBAAgB,GAAG,kCAAqB;AAC7CC,IAAAA,IAAI,EAAE,UADuC;AAE7CC,IAAAA,MAAM,EAAEd;AAFqC,GAArB,CAAzB;AAKA,SACC,4BAAC,8BAAD;AAAc,IAAA,SAAS,EAAGW;AAA1B,KACC;AACC,IAAA,GAAG,EAAGb,IADP;AAEC,IAAA,SAAS,EACRc,gBAAgB,GACb,yBAAY;AACZ,OAAEA,gBAAF,GACCJ,SAAS,CAACC,OAAV,IAAqBT;AAFV,KAAZ,CADa,GAKbe;AARL,KAWC,4BAAC,0BAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGL;AAApC,KACGf,QADH,CAXD,CADD,CADD;AAmBA;;eAEcJ,U","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../animate';\nimport { ROOT_MENU } from './constants';\nimport { NavigationContext } from './context';\nimport { NavigationUI } from './styles/navigation-styles';\nimport { useCreateNavigationTree } from './use-create-navigation-tree';\n\nimport type {\n\tNavigationProps,\n\tNavigationContext as NavigationContextType,\n} from './types';\n\nconst noop = () => {};\n\n/**\n * Render a navigation list with optional groupings and hierarchy.\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigation as Navigation,\n *   __experimentalNavigationGroup as NavigationGroup,\n *   __experimentalNavigationItem as NavigationItem,\n *   __experimentalNavigationMenu as NavigationMenu,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n *   <Navigation>\n *     <NavigationMenu title=\"Home\">\n *       <NavigationGroup title=\"Group 1\">\n *         <NavigationItem item=\"item-1\" title=\"Item 1\" />\n *         <NavigationItem item=\"item-2\" title=\"Item 2\" />\n *       </NavigationGroup>\n *       <NavigationGroup title=\"Group 2\">\n *         <NavigationItem\n *           item=\"item-3\"\n *           navigateToMenu=\"category\"\n *           title=\"Category\"\n *         />\n *       </NavigationGroup>\n *     </NavigationMenu>\n *\n *     <NavigationMenu\n *       backButtonLabel=\"Home\"\n *       menu=\"category\"\n *       parentMenu=\"root\"\n *       title=\"Category\"\n *     >\n *       <NavigationItem badge=\"1\" item=\"child-1\" title=\"Child 1\" />\n *       <NavigationItem item=\"child-2\" title=\"Child 2\" />\n *     </NavigationMenu>\n *   </Navigation>\n * );\n * ```\n */\nexport function Navigation( {\n\tactiveItem,\n\tactiveMenu = ROOT_MENU,\n\tchildren,\n\tclassName,\n\tonActivateMenu = noop,\n}: NavigationProps ) {\n\tconst [ menu, setMenu ] = useState( activeMenu );\n\tconst [ slideOrigin, setSlideOrigin ] = useState< 'left' | 'right' >();\n\tconst navigationTree = useCreateNavigationTree();\n\tconst defaultSlideOrigin = isRTL() ? 'right' : 'left';\n\n\tconst setActiveMenu: NavigationContextType[ 'setActiveMenu' ] = (\n\t\tmenuId,\n\t\tslideInOrigin = defaultSlideOrigin\n\t) => {\n\t\tif ( ! navigationTree.getMenu( menuId ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetSlideOrigin( slideInOrigin );\n\t\tsetMenu( menuId );\n\t\tonActivateMenu( menuId );\n\t};\n\n\t// Used to prevent the sliding animation on mount\n\tconst isMounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( ! isMounted.current ) {\n\t\t\tisMounted.current = true;\n\t\t}\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( activeMenu !== menu ) {\n\t\t\tsetActiveMenu( activeMenu );\n\t\t}\n\t\t// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41612 for context.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ activeMenu ] );\n\n\tconst context = {\n\t\tactiveItem,\n\t\tactiveMenu: menu,\n\t\tsetActiveMenu,\n\t\tnavigationTree,\n\t};\n\n\tconst classes = classnames( 'components-navigation', className );\n\tconst animateClassName = getAnimateClassName( {\n\t\ttype: 'slide-in',\n\t\torigin: slideOrigin,\n\t} );\n\n\treturn (\n\t\t<NavigationUI className={ classes }>\n\t\t\t<div\n\t\t\t\tkey={ menu }\n\t\t\t\tclassName={\n\t\t\t\t\tanimateClassName\n\t\t\t\t\t\t? classnames( {\n\t\t\t\t\t\t\t\t[ animateClassName ]:\n\t\t\t\t\t\t\t\t\tisMounted.current && slideOrigin,\n\t\t\t\t\t\t  } )\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t<NavigationContext.Provider value={ context }>\n\t\t\t\t\t{ children }\n\t\t\t\t</NavigationContext.Provider>\n\t\t\t</div>\n\t\t</NavigationUI>\n\t);\n}\n\nexport default Navigation;\n"]}

package/build/navigation/item/base.js

@@ -9,8 +9,6 @@ exports.default = NavigationItemBase;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _context = require("../context");
@@ -33,8 +31,6 @@ var _navigationStyles = require("../styles/navigation-styles");
 let uniqueId = 0;
 
 function NavigationItemBase(props) {
-  var _navigationTree$getIt;
-
   // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
   const {
     children,
@@ -49,13 +45,14 @@ function NavigationItemBase(props) {
     navigationTree
   } = (0, _context.useNavigationContext)();
 
-  if (!((_navigationTree$getIt = navigationTree.getItem(itemId)) !== null && _navigationTree$getIt !== void 0 && _navigationTree$getIt._isVisible)) {
+  if (!navigationTree.getItem(itemId)?._isVisible) {
     return null;
   }
 
   const classes = (0, _classnames.default)('components-navigation__item', className);
-  return (0, _element.createElement)(_navigationStyles.ItemBaseUI, (0, _extends2.default)({
-    className: classes
-  }, restProps), children);
+  return (0, _element.createElement)(_navigationStyles.ItemBaseUI, {
+    className: classes,
+    ...restProps
+  }, children);
 }
 //# sourceMappingURL=base.js.map

package/build/navigation/item/base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/base.tsx"],"names":["uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","navigationTree","getItem","_isVisible","classes"],"mappings":";;;;;;;;;AAQA;;;;AALA;;AAUA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,IAAIA,QAAQ,GAAG,CAAf;;AAEe,SAASC,kBAAT,CAA6BC,KAA7B,EAA8D;AAAA;;AAC5E;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,KAAvB;AAA8BC,IAAAA,IAA9B;AAAoC,OAAGC;AAAvC,MAAqDL,KAA3D;AAEA,QAAM,CAAEM,MAAF,IAAa,uBAAW,QAAQ,EAAER,QAAU,EAA/B,CAAnB;AAEA,oDAAuBQ,MAAvB,EAA+BN,KAA/B;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,oCAA3B;;AAEA,MAAK,2BAAEA,cAAc,CAACC,OAAf,CAAwBF,MAAxB,CAAF,kDAAE,sBAAkCG,UAApC,CAAL,EAAsD;AACrD,WAAO,IAAP;AACA;;AAED,QAAMC,OAAO,GAAG,yBAAY,6BAAZ,EAA2CR,SAA3C,CAAhB;AAEA,SACC,4BAAC,4BAAD;AAAY,IAAA,SAAS,EAAGQ;AAAxB,KAAuCL,SAAvC,GACGJ,QADH,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeItem } from './use-navigation-tree-item';\nimport { ItemBaseUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseProps } from '../types';\n\nlet uniqueId = 0;\n\nexport default function NavigationItemBase( props: NavigationItemBaseProps ) {\n\t// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.\n\tconst { children, className, title, href, ...restProps } = props;\n\n\tconst [ itemId ] = useState( `item-${ ++uniqueId }` );\n\n\tuseNavigationTreeItem( itemId, props );\n\tconst { navigationTree } = useNavigationContext();\n\n\tif ( ! navigationTree.getItem( itemId )?._isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( 'components-navigation__item', className );\n\n\treturn (\n\t\t<ItemBaseUI className={ classes } { ...restProps }>\n\t\t\t{ children }\n\t\t</ItemBaseUI>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/base.tsx"],"names":["uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","navigationTree","getItem","_isVisible","classes"],"mappings":";;;;;;;;;AAQA;;AALA;;AAUA;;AACA;;AACA;;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AAOA,IAAIA,QAAQ,GAAG,CAAf;;AAEe,SAASC,kBAAT,CAA6BC,KAA7B,EAA8D;AAC5E;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,KAAvB;AAA8BC,IAAAA,IAA9B;AAAoC,OAAGC;AAAvC,MAAqDL,KAA3D;AAEA,QAAM,CAAEM,MAAF,IAAa,uBAAW,QAAQ,EAAER,QAAU,EAA/B,CAAnB;AAEA,oDAAuBQ,MAAvB,EAA+BN,KAA/B;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAqB,oCAA3B;;AAEA,MAAK,CAAEA,cAAc,CAACC,OAAf,CAAwBF,MAAxB,GAAkCG,UAAzC,EAAsD;AACrD,WAAO,IAAP;AACA;;AAED,QAAMC,OAAO,GAAG,yBAAY,6BAAZ,EAA2CR,SAA3C,CAAhB;AAEA,SACC,4BAAC,4BAAD;AAAY,IAAA,SAAS,EAAGQ,OAAxB;AAAA,OAAuCL;AAAvC,KACGJ,QADH,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeItem } from './use-navigation-tree-item';\nimport { ItemBaseUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseProps } from '../types';\n\nlet uniqueId = 0;\n\nexport default function NavigationItemBase( props: NavigationItemBaseProps ) {\n\t// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.\n\tconst { children, className, title, href, ...restProps } = props;\n\n\tconst [ itemId ] = useState( `item-${ ++uniqueId }` );\n\n\tuseNavigationTreeItem( itemId, props );\n\tconst { navigationTree } = useNavigationContext();\n\n\tif ( ! navigationTree.getItem( itemId )?._isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( 'components-navigation__item', className );\n\n\treturn (\n\t\t<ItemBaseUI className={ classes } { ...restProps }>\n\t\t\t{ children }\n\t\t</ItemBaseUI>\n\t);\n}\n"]}

package/build/navigation/item/index.js

@@ -10,8 +10,6 @@ exports.default = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _icons = require("@wordpress/icons");
@@ -94,9 +92,10 @@ function NavigationItem(props) {
     'aria-current': isActive ? 'page' : undefined,
     ...restProps
   };
-  return (0, _element.createElement)(_base.default, (0, _extends2.default)({}, baseProps, {
+  return (0, _element.createElement)(_base.default, { ...baseProps,
     className: classes
-  }), children || (0, _element.createElement)(_navigationStyles.ItemUI, itemProps, icon && (0, _element.createElement)(_navigationStyles.ItemIconUI, null, (0, _element.createElement)(_icons.Icon, {
+  }, children || (0, _element.createElement)(_navigationStyles.ItemUI, { ...itemProps
+  }, icon && (0, _element.createElement)(_navigationStyles.ItemIconUI, null, (0, _element.createElement)(_icons.Icon, {
     icon: icon
   })), (0, _element.createElement)(_baseContent.default, {
     title: title,

package/build/navigation/item/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/index.tsx"],"names":["noop","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","isActive","classes","onItemClick","event","navigationIcon","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button"],"mappings":";;;;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEO,SAASC,cAAT,CAAyBC,KAAzB,EAAsD;AAC5D,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGT,IAPL;AAQLU,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFZ,KAbJ;AAeA,QAAM;AACLa,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIF,oCAJJ,CAhB4D,CAsB5D;AACA;AACA;;AACA,MACCN,qBAAqB,IACrBJ,cADA,IAEAU,WAAW,CAAEV,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMW,QAAQ,GAAGZ,IAAI,IAAIQ,UAAU,KAAKR,IAAxC;AAEA,QAAMa,OAAO,GAAG,yBAAYf,SAAZ,EAAuB;AACtC,iBAAac;AADyB,GAAvB,CAAhB;;AAIA,QAAME,WAEL,GAAKC,KAAF,IAAa;AAChB,QAAKd,cAAL,EAAsB;AACrBQ,MAAAA,aAAa,CAAER,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEa,KAAF,CAAP;AACA,GARD;;AASA,QAAMC,cAAc,GAAG,qBAAUC,kBAAV,GAAwBC,mBAA/C;AACA,QAAMC,SAAS,GAAGtB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEkB;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGf,MAAM,GACrBC,SADqB,GAErB;AACAe,IAAAA,EAAE,EAAEC,eADJ;AAEAxB,IAAAA,IAFA;AAGAG,IAAAA,OAAO,EAAEY,WAHT;AAIA,oBAAgBF,QAAQ,GAAG,MAAH,GAAYQ,SAJpC;AAKA,OAAGb;AALH,GAFH;AAUA,SACC,4BAAC,aAAD,6BAAyBY,SAAzB;AAAqC,IAAA,SAAS,EAAGN;AAAjD,MACGhB,QAAQ,IACT,4BAAC,wBAAD,EAAawB,SAAb,EACGjB,IAAI,IACL,4BAAC,4BAAD,QACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGP;AAFT,IAPD,EAYGK,cAAc,IAAI,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGe;AAAb,IAZrB,CAFF,CADD;AAoBA;;eAEctB,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nimport type { NavigationItemProps } from '../types';\n\nconst noop = () => {};\n\nexport function NavigationItem( props: NavigationItemProps ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item.\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isActive = item && activeItem === item;\n\n\tconst classes = classnames( className, {\n\t\t'is-active': isActive,\n\t} );\n\n\tconst onItemClick: React.MouseEventHandler<\n\t\tHTMLButtonElement | HTMLAnchorElement\n\t> = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: {\n\t\t\t\tas: Button,\n\t\t\t\thref,\n\t\t\t\tonClick: onItemClick,\n\t\t\t\t'aria-current': isActive ? 'page' : undefined,\n\t\t\t\t...restProps,\n\t\t  };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n\nexport default NavigationItem;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/index.tsx"],"names":["noop","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","isActive","classes","onItemClick","event","navigationIcon","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button"],"mappings":";;;;;;;;;;;;AAGA;;AAKA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AASA,MAAMA,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEO,SAASC,cAAT,CAAyBC,KAAzB,EAAsD;AAC5D,QAAM;AACLC,IAAAA,KADK;AAELC,IAAAA,QAFK;AAGLC,IAAAA,SAHK;AAILC,IAAAA,IAJK;AAKLC,IAAAA,IALK;AAMLC,IAAAA,cANK;AAOLC,IAAAA,OAAO,GAAGT,IAPL;AAQLU,IAAAA,KARK;AASLC,IAAAA,IATK;AAULC,IAAAA,qBAVK;AAWLC,IAAAA,MAXK;AAYL,OAAGC;AAZE,MAaFZ,KAbJ;AAeA,QAAM;AACLa,IAAAA,UADK;AAELC,IAAAA,aAFK;AAGLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AAHX,MAIF,oCAJJ,CAhB4D,CAsB5D;AACA;AACA;;AACA,MACCN,qBAAqB,IACrBJ,cADA,IAEAU,WAAW,CAAEV,cAAF,CAHZ,EAIE;AACD,WAAO,IAAP;AACA;;AAED,QAAMW,QAAQ,GAAGZ,IAAI,IAAIQ,UAAU,KAAKR,IAAxC;AAEA,QAAMa,OAAO,GAAG,yBAAYf,SAAZ,EAAuB;AACtC,iBAAac;AADyB,GAAvB,CAAhB;;AAIA,QAAME,WAEL,GAAKC,KAAF,IAAa;AAChB,QAAKd,cAAL,EAAsB;AACrBQ,MAAAA,aAAa,CAAER,cAAF,CAAb;AACA;;AAEDC,IAAAA,OAAO,CAAEa,KAAF,CAAP;AACA,GARD;;AASA,QAAMC,cAAc,GAAG,qBAAUC,kBAAV,GAAwBC,mBAA/C;AACA,QAAMC,SAAS,GAAGtB,QAAQ,GAAGF,KAAH,GAAW,EAAE,GAAGA,KAAL;AAAYO,IAAAA,OAAO,EAAEkB;AAArB,GAArC;AACA,QAAMC,SAAS,GAAGf,MAAM,GACrBC,SADqB,GAErB;AACAe,IAAAA,EAAE,EAAEC,eADJ;AAEAxB,IAAAA,IAFA;AAGAG,IAAAA,OAAO,EAAEY,WAHT;AAIA,oBAAgBF,QAAQ,GAAG,MAAH,GAAYQ,SAJpC;AAKA,OAAGb;AALH,GAFH;AAUA,SACC,4BAAC,aAAD,OAAyBY,SAAzB;AAAqC,IAAA,SAAS,EAAGN;AAAjD,KACGhB,QAAQ,IACT,4BAAC,wBAAD,OAAawB;AAAb,KACGjB,IAAI,IACL,4BAAC,4BAAD,QACC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGA;AAAb,IADD,CAFF,EAOC,4BAAC,oBAAD;AACC,IAAA,KAAK,EAAGD,KADT;AAEC,IAAA,KAAK,EAAGP;AAFT,IAPD,EAYGK,cAAc,IAAI,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGe;AAAb,IAZrB,CAFF,CADD;AAoBA;;eAEctB,c","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Icon, chevronLeft, chevronRight } from '@wordpress/icons';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport Button from '../../button';\nimport { useNavigationContext } from '../context';\nimport { ItemUI, ItemIconUI } from '../styles/navigation-styles';\nimport NavigationItemBaseContent from './base-content';\nimport NavigationItemBase from './base';\n\nimport type { NavigationItemProps } from '../types';\n\nconst noop = () => {};\n\nexport function NavigationItem( props: NavigationItemProps ) {\n\tconst {\n\t\tbadge,\n\t\tchildren,\n\t\tclassName,\n\t\thref,\n\t\titem,\n\t\tnavigateToMenu,\n\t\tonClick = noop,\n\t\ttitle,\n\t\ticon,\n\t\thideIfTargetMenuEmpty,\n\t\tisText,\n\t\t...restProps\n\t} = props;\n\n\tconst {\n\t\tactiveItem,\n\t\tsetActiveMenu,\n\t\tnavigationTree: { isMenuEmpty },\n\t} = useNavigationContext();\n\n\t// If hideIfTargetMenuEmpty prop is true\n\t// And the menu we are supposed to navigate to\n\t// Is marked as empty, then we skip rendering the item.\n\tif (\n\t\thideIfTargetMenuEmpty &&\n\t\tnavigateToMenu &&\n\t\tisMenuEmpty( navigateToMenu )\n\t) {\n\t\treturn null;\n\t}\n\n\tconst isActive = item && activeItem === item;\n\n\tconst classes = classnames( className, {\n\t\t'is-active': isActive,\n\t} );\n\n\tconst onItemClick: React.MouseEventHandler<\n\t\tHTMLButtonElement | HTMLAnchorElement\n\t> = ( event ) => {\n\t\tif ( navigateToMenu ) {\n\t\t\tsetActiveMenu( navigateToMenu );\n\t\t}\n\n\t\tonClick( event );\n\t};\n\tconst navigationIcon = isRTL() ? chevronLeft : chevronRight;\n\tconst baseProps = children ? props : { ...props, onClick: undefined };\n\tconst itemProps = isText\n\t\t? restProps\n\t\t: {\n\t\t\t\tas: Button,\n\t\t\t\thref,\n\t\t\t\tonClick: onItemClick,\n\t\t\t\t'aria-current': isActive ? 'page' : undefined,\n\t\t\t\t...restProps,\n\t\t  };\n\n\treturn (\n\t\t<NavigationItemBase { ...baseProps } className={ classes }>\n\t\t\t{ children || (\n\t\t\t\t<ItemUI { ...itemProps }>\n\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t<ItemIconUI>\n\t\t\t\t\t\t\t<Icon icon={ icon } />\n\t\t\t\t\t\t</ItemIconUI>\n\t\t\t\t\t) }\n\n\t\t\t\t\t<NavigationItemBaseContent\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t\tbadge={ badge }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ navigateToMenu && <Icon icon={ navigationIcon } /> }\n\t\t\t\t</ItemUI>\n\t\t\t) }\n\t\t</NavigationItemBase>\n\t);\n}\n\nexport default NavigationItem;\n"]}

package/build/navigation/menu/menu-title-search.js

@@ -28,14 +28,13 @@ var _constants = require("../constants");
 /**
  * Internal dependencies
  */
-function MenuTitleSearch(_ref) {
-  let {
-    debouncedSpeak,
-    onCloseSearch,
-    onSearch,
-    search,
-    title
-  } = _ref;
+function MenuTitleSearch({
+  debouncedSpeak,
+  onCloseSearch,
+  onSearch,
+  search,
+  title
+}) {
   const {
     navigationTree: {
       items
@@ -49,9 +48,7 @@ function MenuTitleSearch(_ref) {
 
   (0, _element.useEffect)(() => {
     const delayedFocus = setTimeout(() => {
-      var _inputRef$current;
-
-      (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+      inputRef.current?.focus();
     }, _constants.SEARCH_FOCUS_DELAY);
     return () => {
       clearTimeout(delayedFocus);
@@ -71,7 +68,7 @@ function MenuTitleSearch(_ref) {
   }, [items, search]);
 
   const onClose = () => {
-    onSearch === null || onSearch === void 0 ? void 0 : onSearch('');
+    onSearch?.('');
     onCloseSearch();
   };
 
@@ -85,14 +82,14 @@ function MenuTitleSearch(_ref) {
   const inputId = `components-navigation__menu-title-search-${menu}`;
   const placeholder = (0, _i18n.sprintf)(
   /* translators: placeholder for menu search box. %s: menu title */
-  (0, _i18n.__)('Search %s'), title === null || title === void 0 ? void 0 : title.toLowerCase()).trim();
+  (0, _i18n.__)('Search %s'), title?.toLowerCase()).trim();
   return (0, _element.createElement)("div", {
     className: "components-navigation__menu-title-search"
   }, (0, _element.createElement)(_navigationStyles.MenuTitleSearchUI, {
     autoComplete: "off",
     className: "components-navigation__menu-search-input",
     id: inputId,
-    onChange: value => onSearch === null || onSearch === void 0 ? void 0 : onSearch(value),
+    onChange: value => onSearch?.(value),
     onKeyDown: onKeyDown,
     placeholder: placeholder,
     onClose: onClose,

package/build/navigation/menu/menu-title-search.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title-search.tsx"],"names":["MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","menu","inputRef","delayedFocus","setTimeout","current","focus","SEARCH_FOCUS_DELAY","clearTimeout","count","Object","values","filter","item","_isVisible","length","resultsFoundMessage","onClose","onKeyDown","event","code","defaultPrevented","preventDefault","inputId","placeholder","toLowerCase","trim","value"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,OAMoC;AAAA,MANV;AACzBC,IAAAA,cADyB;AAEzBC,IAAAA,aAFyB;AAGzBC,IAAAA,QAHyB;AAIzBC,IAAAA,MAJyB;AAKzBC,IAAAA;AALyB,GAMU;AACnC,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,qCAFJ;AAGA,QAAM;AAAEC,IAAAA;AAAF,MAAW,wCAAjB;AACA,QAAMC,QAAQ,GAAG,qBAA4B,IAA5B,CAAjB,CALmC,CAOnC;AACA;;AACA,0BAAW,MAAM;AAChB,UAAMC,YAAY,GAAGC,UAAU,CAAE,MAAM;AAAA;;AACtC,2BAAAF,QAAQ,CAACG,OAAT,wEAAkBC,KAAlB;AACA,KAF8B,EAE5BC,6BAF4B,CAA/B;AAIA,WAAO,MAAM;AACZC,MAAAA,YAAY,CAAEL,YAAF,CAAZ;AACA,KAFD;AAGA,GARD,EAQG,EARH;AAUA,0BAAW,MAAM;AAChB,QAAK,CAAEN,MAAP,EAAgB;AACf;AACA;;AAED,UAAMY,KAAK,GAAGC,MAAM,CAACC,MAAP,CAAeX,KAAf,EAAuBY,MAAvB,CACXC,IAAF,IAAYA,IAAI,CAACC,UADJ,EAEZC,MAFF;AAGA,UAAMC,mBAAmB,GAAG;AAC3B;AACA,kBAAI,kBAAJ,EAAwB,mBAAxB,EAA6CP,KAA7C,CAF2B,EAG3BA,KAH2B,CAA5B;AAKAf,IAAAA,cAAc,CAAEsB,mBAAF,CAAd,CAbgB,CAchB;AACA;AACA,GAhBD,EAgBG,CAAEhB,KAAF,EAASH,MAAT,CAhBH;;AAkBA,QAAMoB,OAAO,GAAG,MAAM;AACrBrB,IAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAI,EAAJ,CAAR;AACAD,IAAAA,aAAa;AACb,GAHD;;AAKA,QAAMuB,SAAyD,GAC9DC,KADiE,IAE7D;AACJ,QAAKA,KAAK,CAACC,IAAN,KAAe,QAAf,IAA2B,CAAED,KAAK,CAACE,gBAAxC,EAA2D;AAC1DF,MAAAA,KAAK,CAACG,cAAN;AACAL,MAAAA,OAAO;AACP;AACD,GAPD;;AASA,QAAMM,OAAO,GAAI,4CAA4CtB,IAAM,EAAnE;AACA,QAAMuB,WAAW,GAAG;AACnB;AACA,gBAAI,WAAJ,CAFmB,EAGnB1B,KAHmB,aAGnBA,KAHmB,uBAGnBA,KAAK,CAAE2B,WAAP,EAHmB,EAIlBC,IAJkB,EAApB;AAMA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,mCAAD;AACC,IAAA,YAAY,EAAC,KADd;AAEC,IAAA,SAAS,EAAC,0CAFX;AAGC,IAAA,EAAE,EAAGH,OAHN;AAIC,IAAA,QAAQ,EAAKI,KAAF,IAAa/B,QAAb,aAAaA,QAAb,uBAAaA,QAAQ,CAAI+B,KAAJ,CAJjC;AAKC,IAAA,SAAS,EAAGT,SALb;AAMC,IAAA,WAAW,EAAGM,WANf;AAOC,IAAA,OAAO,EAAGP,OAPX;AAQC,IAAA,GAAG,EAAGf,QARP;AASC,IAAA,IAAI,EAAC,QATN;AAUC,IAAA,KAAK,EAAGL;AAVT,IADD,CADD;AAgBA;;eAEc,iCAAoBJ,eAApB,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport withSpokenMessages from '../../higher-order/with-spoken-messages';\nimport { useNavigationMenuContext } from './context';\nimport { useNavigationContext } from '../context';\nimport { MenuTitleSearchUI } from '../styles/navigation-styles';\nimport { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleSearchProps } from '../types';\n\nfunction MenuTitleSearch( {\n\tdebouncedSpeak,\n\tonCloseSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n}: NavigationMenuTitleSearchProps ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\tconst { menu } = useNavigationMenuContext();\n\tconst inputRef = useRef< HTMLInputElement >( null );\n\n\t// Wait for the slide-in animation to complete before autofocusing the input.\n\t// This prevents scrolling to the input during the animation.\n\tuseEffect( () => {\n\t\tconst delayedFocus = setTimeout( () => {\n\t\t\tinputRef.current?.focus();\n\t\t}, SEARCH_FOCUS_DELAY );\n\n\t\treturn () => {\n\t\t\tclearTimeout( delayedFocus );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst count = Object.values( items ).filter(\n\t\t\t( item ) => item._isVisible\n\t\t).length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t\t// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ items, search ] );\n\n\tconst onClose = () => {\n\t\tonSearch?.( '' );\n\t\tonCloseSearch();\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tif ( event.code === 'Escape' && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t};\n\n\tconst inputId = `components-navigation__menu-title-search-${ menu }`;\n\tconst placeholder = sprintf(\n\t\t/* translators: placeholder for menu search box. %s: menu title */\n\t\t__( 'Search %s' ),\n\t\ttitle?.toLowerCase()\n\t).trim();\n\n\treturn (\n\t\t<div className=\"components-navigation__menu-title-search\">\n\t\t\t<MenuTitleSearchUI\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tclassName=\"components-navigation__menu-search-input\"\n\t\t\t\tid={ inputId }\n\t\t\t\tonChange={ ( value ) => onSearch?.( value ) }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tonClose={ onClose }\n\t\t\t\tref={ inputRef }\n\t\t\t\ttype=\"search\"\n\t\t\t\tvalue={ search }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title-search.tsx"],"names":["MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","menu","inputRef","delayedFocus","setTimeout","current","focus","SEARCH_FOCUS_DELAY","clearTimeout","count","Object","values","filter","item","_isVisible","length","resultsFoundMessage","onClose","onKeyDown","event","code","defaultPrevented","preventDefault","inputId","placeholder","toLowerCase","trim","value"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AACA;;AAbA;AACA;AACA;;AAIA;AACA;AACA;AASA,SAASA,eAAT,CAA0B;AACzBC,EAAAA,cADyB;AAEzBC,EAAAA,aAFyB;AAGzBC,EAAAA,QAHyB;AAIzBC,EAAAA,MAJyB;AAKzBC,EAAAA;AALyB,CAA1B,EAMoC;AACnC,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,qCAFJ;AAGA,QAAM;AAAEC,IAAAA;AAAF,MAAW,wCAAjB;AACA,QAAMC,QAAQ,GAAG,qBAA4B,IAA5B,CAAjB,CALmC,CAOnC;AACA;;AACA,0BAAW,MAAM;AAChB,UAAMC,YAAY,GAAGC,UAAU,CAAE,MAAM;AACtCF,MAAAA,QAAQ,CAACG,OAAT,EAAkBC,KAAlB;AACA,KAF8B,EAE5BC,6BAF4B,CAA/B;AAIA,WAAO,MAAM;AACZC,MAAAA,YAAY,CAAEL,YAAF,CAAZ;AACA,KAFD;AAGA,GARD,EAQG,EARH;AAUA,0BAAW,MAAM;AAChB,QAAK,CAAEN,MAAP,EAAgB;AACf;AACA;;AAED,UAAMY,KAAK,GAAGC,MAAM,CAACC,MAAP,CAAeX,KAAf,EAAuBY,MAAvB,CACXC,IAAF,IAAYA,IAAI,CAACC,UADJ,EAEZC,MAFF;AAGA,UAAMC,mBAAmB,GAAG;AAC3B;AACA,kBAAI,kBAAJ,EAAwB,mBAAxB,EAA6CP,KAA7C,CAF2B,EAG3BA,KAH2B,CAA5B;AAKAf,IAAAA,cAAc,CAAEsB,mBAAF,CAAd,CAbgB,CAchB;AACA;AACA,GAhBD,EAgBG,CAAEhB,KAAF,EAASH,MAAT,CAhBH;;AAkBA,QAAMoB,OAAO,GAAG,MAAM;AACrBrB,IAAAA,QAAQ,GAAI,EAAJ,CAAR;AACAD,IAAAA,aAAa;AACb,GAHD;;AAKA,QAAMuB,SAAyD,GAC9DC,KADiE,IAE7D;AACJ,QAAKA,KAAK,CAACC,IAAN,KAAe,QAAf,IAA2B,CAAED,KAAK,CAACE,gBAAxC,EAA2D;AAC1DF,MAAAA,KAAK,CAACG,cAAN;AACAL,MAAAA,OAAO;AACP;AACD,GAPD;;AASA,QAAMM,OAAO,GAAI,4CAA4CtB,IAAM,EAAnE;AACA,QAAMuB,WAAW,GAAG;AACnB;AACA,gBAAI,WAAJ,CAFmB,EAGnB1B,KAAK,EAAE2B,WAAP,EAHmB,EAIlBC,IAJkB,EAApB;AAMA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,4BAAC,mCAAD;AACC,IAAA,YAAY,EAAC,KADd;AAEC,IAAA,SAAS,EAAC,0CAFX;AAGC,IAAA,EAAE,EAAGH,OAHN;AAIC,IAAA,QAAQ,EAAKI,KAAF,IAAa/B,QAAQ,GAAI+B,KAAJ,CAJjC;AAKC,IAAA,SAAS,EAAGT,SALb;AAMC,IAAA,WAAW,EAAGM,WANf;AAOC,IAAA,OAAO,EAAGP,OAPX;AAQC,IAAA,GAAG,EAAGf,QARP;AASC,IAAA,IAAI,EAAC,QATN;AAUC,IAAA,KAAK,EAAGL;AAVT,IADD,CADD;AAgBA;;eAEc,iCAAoBJ,eAApB,C","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport withSpokenMessages from '../../higher-order/with-spoken-messages';\nimport { useNavigationMenuContext } from './context';\nimport { useNavigationContext } from '../context';\nimport { MenuTitleSearchUI } from '../styles/navigation-styles';\nimport { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleSearchProps } from '../types';\n\nfunction MenuTitleSearch( {\n\tdebouncedSpeak,\n\tonCloseSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n}: NavigationMenuTitleSearchProps ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\tconst { menu } = useNavigationMenuContext();\n\tconst inputRef = useRef< HTMLInputElement >( null );\n\n\t// Wait for the slide-in animation to complete before autofocusing the input.\n\t// This prevents scrolling to the input during the animation.\n\tuseEffect( () => {\n\t\tconst delayedFocus = setTimeout( () => {\n\t\t\tinputRef.current?.focus();\n\t\t}, SEARCH_FOCUS_DELAY );\n\n\t\treturn () => {\n\t\t\tclearTimeout( delayedFocus );\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( ! search ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst count = Object.values( items ).filter(\n\t\t\t( item ) => item._isVisible\n\t\t).length;\n\t\tconst resultsFoundMessage = sprintf(\n\t\t\t/* translators: %d: number of results. */\n\t\t\t_n( '%d result found.', '%d results found.', count ),\n\t\t\tcount\n\t\t);\n\t\tdebouncedSpeak( resultsFoundMessage );\n\t\t// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/44090\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ items, search ] );\n\n\tconst onClose = () => {\n\t\tonSearch?.( '' );\n\t\tonCloseSearch();\n\t};\n\n\tconst onKeyDown: React.KeyboardEventHandler< HTMLInputElement > = (\n\t\tevent\n\t) => {\n\t\tif ( event.code === 'Escape' && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t};\n\n\tconst inputId = `components-navigation__menu-title-search-${ menu }`;\n\tconst placeholder = sprintf(\n\t\t/* translators: placeholder for menu search box. %s: menu title */\n\t\t__( 'Search %s' ),\n\t\ttitle?.toLowerCase()\n\t).trim();\n\n\treturn (\n\t\t<div className=\"components-navigation__menu-title-search\">\n\t\t\t<MenuTitleSearchUI\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tclassName=\"components-navigation__menu-search-input\"\n\t\t\t\tid={ inputId }\n\t\t\t\tonChange={ ( value ) => onSearch?.( value ) }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tonClose={ onClose }\n\t\t\t\tref={ inputRef }\n\t\t\t\ttype=\"search\"\n\t\t\t\tvalue={ search }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"]}

package/build/navigation/menu/menu-title.js

@@ -32,14 +32,13 @@ var _constants = require("../constants");
 /**
  * Internal dependencies
  */
-function NavigationMenuTitle(_ref) {
-  let {
-    hasSearch,
-    onSearch,
-    search,
-    title,
-    titleAction
-  } = _ref;
+function NavigationMenuTitle({
+  hasSearch,
+  onSearch,
+  search,
+  title,
+  titleAction
+}) {
   const [isSearching, setIsSearching] = (0, _element.useState)(false);
   const {
     menu
@@ -55,9 +54,7 @@ function NavigationMenuTitle(_ref) {
     // eslint-disable-next-line @wordpress/react-no-unsafe-timeout
 
     setTimeout(() => {
-      var _searchButtonRef$curr;
-
-      (_searchButtonRef$curr = searchButtonRef.current) === null || _searchButtonRef$curr === void 0 ? void 0 : _searchButtonRef$curr.focus();
+      searchButtonRef.current?.focus();
     }, _constants.SEARCH_FOCUS_DELAY);
   };
 

package/build/navigation/menu/menu-title.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title.tsx"],"names":["NavigationMenuTitle","hasSearch","onSearch","search","title","titleAction","isSearching","setIsSearching","menu","searchButtonRef","onCloseSearch","setTimeout","current","focus","SEARCH_FOCUS_DELAY","menuTitleId","searchButtonLabel","searchIcon","type","origin"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAnBA;AACA;AACA;;AAKA;AACA;AACA;AAce,SAASA,mBAAT,OAMe;AAAA,MANe;AAC5CC,IAAAA,SAD4C;AAE5CC,IAAAA,QAF4C;AAG5CC,IAAAA,MAH4C;AAI5CC,IAAAA,KAJ4C;AAK5CC,IAAAA;AAL4C,GAMf;AAC7B,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAW,wCAAjB;AACA,QAAMC,eAAe,GAAG,qBAAuB,IAAvB,CAAxB;;AAEA,MAAK,CAAEL,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,QAAMM,aAAa,GAAG,MAAM;AAC3BH,IAAAA,cAAc,CAAE,KAAF,CAAd,CAD2B,CAG3B;AACA;;AACAI,IAAAA,UAAU,CAAE,MAAM;AAAA;;AACjB,+BAAAF,eAAe,CAACG,OAAhB,gFAAyBC,KAAzB;AACA,KAFS,EAEPC,6BAFO,CAAV;AAGA,GARD;;AAUA,QAAMC,WAAW,GAAI,qCAAqCP,IAAM,EAAhE;AACA;;AACA,QAAMQ,iBAAiB,GAAG,mBAAS,cAAI,cAAJ,CAAT,EAA+BZ,KAA/B,CAA1B;AAEA,SACC,4BAAC,6BAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACG,CAAEE,WAAF,IACD,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,IADJ;AAEC,IAAA,SAAS,EAAC,2CAFX;AAGC,IAAA,KAAK,EAAG;AAHT,KAKC;AAAM,IAAA,EAAE,EAAGS;AAAX,KAA2BX,KAA3B,CALD,EAOG,CAAEH,SAAS,IAAII,WAAf,KACD,4BAAC,oCAAD,QACGA,WADH,EAGGJ,SAAS,IACV,4BAAC,eAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAC,UAFT;AAGC,IAAA,KAAK,EAAGe,iBAHT;AAIC,IAAA,OAAO,EAAG,MAAMT,cAAc,CAAE,IAAF,CAJ/B;AAKC,IAAA,GAAG,EAAGE;AALP,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPD,CAJF,CARF,CAFF,EA6BGX,WAAW,IACZ;AACC,IAAA,SAAS,EAAG,kCAAqB;AAChCY,MAAAA,IAAI,EAAE,UAD0B;AAEhCC,MAAAA,MAAM,EAAE;AAFwB,KAArB;AADb,KAMC,4BAAC,wBAAD;AACC,IAAA,aAAa,EAAGT,aADjB;AAEC,IAAA,QAAQ,EAAGR,QAFZ;AAGC,IAAA,MAAM,EAAGC,MAHV;AAIC,IAAA,KAAK,EAAGC;AAJT,IAND,CA9BF,CADD;AA+CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, search as searchIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../../animate';\nimport Button from '../../button';\nimport MenuTitleSearch from './menu-title-search';\nimport {\n\tGroupTitleUI,\n\tMenuTitleActionsUI,\n\tMenuTitleUI,\n} from '../styles/navigation-styles';\nimport { useNavigationMenuContext } from './context';\nimport { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleProps } from '../types';\n\nexport default function NavigationMenuTitle( {\n\thasSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n\ttitleAction,\n}: NavigationMenuTitleProps ) {\n\tconst [ isSearching, setIsSearching ] = useState( false );\n\tconst { menu } = useNavigationMenuContext();\n\tconst searchButtonRef = useRef< HTMLElement >( null );\n\n\tif ( ! title ) {\n\t\treturn null;\n\t}\n\n\tconst onCloseSearch = () => {\n\t\tsetIsSearching( false );\n\n\t\t// Wait for the slide-in animation to complete before focusing the search button.\n\t\t// eslint-disable-next-line @wordpress/react-no-unsafe-timeout\n\t\tsetTimeout( () => {\n\t\t\tsearchButtonRef.current?.focus();\n\t\t}, SEARCH_FOCUS_DELAY );\n\t};\n\n\tconst menuTitleId = `components-navigation__menu-title-${ menu }`;\n\t/* translators: search button label for menu search box. %s: menu title */\n\tconst searchButtonLabel = sprintf( __( 'Search in %s' ), title );\n\n\treturn (\n\t\t<MenuTitleUI className=\"components-navigation__menu-title\">\n\t\t\t{ ! isSearching && (\n\t\t\t\t<GroupTitleUI\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t\tclassName=\"components-navigation__menu-title-heading\"\n\t\t\t\t\tlevel={ 3 }\n\t\t\t\t>\n\t\t\t\t\t<span id={ menuTitleId }>{ title }</span>\n\n\t\t\t\t\t{ ( hasSearch || titleAction ) && (\n\t\t\t\t\t\t<MenuTitleActionsUI>\n\t\t\t\t\t\t\t{ titleAction }\n\n\t\t\t\t\t\t\t{ hasSearch && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tlabel={ searchButtonLabel }\n\t\t\t\t\t\t\t\t\tonClick={ () => setIsSearching( true ) }\n\t\t\t\t\t\t\t\t\tref={ searchButtonRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon={ searchIcon } />\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</MenuTitleActionsUI>\n\t\t\t\t\t) }\n\t\t\t\t</GroupTitleUI>\n\t\t\t) }\n\n\t\t\t{ isSearching && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ getAnimateClassName( {\n\t\t\t\t\t\ttype: 'slide-in',\n\t\t\t\t\t\torigin: 'left',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<MenuTitleSearch\n\t\t\t\t\t\tonCloseSearch={ onCloseSearch }\n\t\t\t\t\t\tonSearch={ onSearch }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</MenuTitleUI>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title.tsx"],"names":["NavigationMenuTitle","hasSearch","onSearch","search","title","titleAction","isSearching","setIsSearching","menu","searchButtonRef","onCloseSearch","setTimeout","current","focus","SEARCH_FOCUS_DELAY","menuTitleId","searchButtonLabel","searchIcon","type","origin"],"mappings":";;;;;;;;;AAGA;;AACA;;AACA;;AAKA;;AACA;;AACA;;AACA;;AAKA;;AACA;;AAnBA;AACA;AACA;;AAKA;AACA;AACA;AAce,SAASA,mBAAT,CAA8B;AAC5CC,EAAAA,SAD4C;AAE5CC,EAAAA,QAF4C;AAG5CC,EAAAA,MAH4C;AAI5CC,EAAAA,KAJ4C;AAK5CC,EAAAA;AAL4C,CAA9B,EAMe;AAC7B,QAAM,CAAEC,WAAF,EAAeC,cAAf,IAAkC,uBAAU,KAAV,CAAxC;AACA,QAAM;AAAEC,IAAAA;AAAF,MAAW,wCAAjB;AACA,QAAMC,eAAe,GAAG,qBAAuB,IAAvB,CAAxB;;AAEA,MAAK,CAAEL,KAAP,EAAe;AACd,WAAO,IAAP;AACA;;AAED,QAAMM,aAAa,GAAG,MAAM;AAC3BH,IAAAA,cAAc,CAAE,KAAF,CAAd,CAD2B,CAG3B;AACA;;AACAI,IAAAA,UAAU,CAAE,MAAM;AACjBF,MAAAA,eAAe,CAACG,OAAhB,EAAyBC,KAAzB;AACA,KAFS,EAEPC,6BAFO,CAAV;AAGA,GARD;;AAUA,QAAMC,WAAW,GAAI,qCAAqCP,IAAM,EAAhE;AACA;;AACA,QAAMQ,iBAAiB,GAAG,mBAAS,cAAI,cAAJ,CAAT,EAA+BZ,KAA/B,CAA1B;AAEA,SACC,4BAAC,6BAAD;AAAa,IAAA,SAAS,EAAC;AAAvB,KACG,CAAEE,WAAF,IACD,4BAAC,8BAAD;AACC,IAAA,EAAE,EAAC,IADJ;AAEC,IAAA,SAAS,EAAC,2CAFX;AAGC,IAAA,KAAK,EAAG;AAHT,KAKC;AAAM,IAAA,EAAE,EAAGS;AAAX,KAA2BX,KAA3B,CALD,EAOG,CAAEH,SAAS,IAAII,WAAf,KACD,4BAAC,oCAAD,QACGA,WADH,EAGGJ,SAAS,IACV,4BAAC,eAAD;AACC,IAAA,OAAO,MADR;AAEC,IAAA,OAAO,EAAC,UAFT;AAGC,IAAA,KAAK,EAAGe,iBAHT;AAIC,IAAA,OAAO,EAAG,MAAMT,cAAc,CAAE,IAAF,CAJ/B;AAKC,IAAA,GAAG,EAAGE;AALP,KAOC,4BAAC,WAAD;AAAM,IAAA,IAAI,EAAGQ;AAAb,IAPD,CAJF,CARF,CAFF,EA6BGX,WAAW,IACZ;AACC,IAAA,SAAS,EAAG,kCAAqB;AAChCY,MAAAA,IAAI,EAAE,UAD0B;AAEhCC,MAAAA,MAAM,EAAE;AAFwB,KAArB;AADb,KAMC,4BAAC,wBAAD;AACC,IAAA,aAAa,EAAGT,aADjB;AAEC,IAAA,QAAQ,EAAGR,QAFZ;AAGC,IAAA,MAAM,EAAGC,MAHV;AAIC,IAAA,KAAK,EAAGC;AAJT,IAND,CA9BF,CADD;AA+CA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useState } from '@wordpress/element';\nimport { __, sprintf } from '@wordpress/i18n';\nimport { Icon, search as searchIcon } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../../animate';\nimport Button from '../../button';\nimport MenuTitleSearch from './menu-title-search';\nimport {\n\tGroupTitleUI,\n\tMenuTitleActionsUI,\n\tMenuTitleUI,\n} from '../styles/navigation-styles';\nimport { useNavigationMenuContext } from './context';\nimport { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleProps } from '../types';\n\nexport default function NavigationMenuTitle( {\n\thasSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n\ttitleAction,\n}: NavigationMenuTitleProps ) {\n\tconst [ isSearching, setIsSearching ] = useState( false );\n\tconst { menu } = useNavigationMenuContext();\n\tconst searchButtonRef = useRef< HTMLElement >( null );\n\n\tif ( ! title ) {\n\t\treturn null;\n\t}\n\n\tconst onCloseSearch = () => {\n\t\tsetIsSearching( false );\n\n\t\t// Wait for the slide-in animation to complete before focusing the search button.\n\t\t// eslint-disable-next-line @wordpress/react-no-unsafe-timeout\n\t\tsetTimeout( () => {\n\t\t\tsearchButtonRef.current?.focus();\n\t\t}, SEARCH_FOCUS_DELAY );\n\t};\n\n\tconst menuTitleId = `components-navigation__menu-title-${ menu }`;\n\t/* translators: search button label for menu search box. %s: menu title */\n\tconst searchButtonLabel = sprintf( __( 'Search in %s' ), title );\n\n\treturn (\n\t\t<MenuTitleUI className=\"components-navigation__menu-title\">\n\t\t\t{ ! isSearching && (\n\t\t\t\t<GroupTitleUI\n\t\t\t\t\tas=\"h2\"\n\t\t\t\t\tclassName=\"components-navigation__menu-title-heading\"\n\t\t\t\t\tlevel={ 3 }\n\t\t\t\t>\n\t\t\t\t\t<span id={ menuTitleId }>{ title }</span>\n\n\t\t\t\t\t{ ( hasSearch || titleAction ) && (\n\t\t\t\t\t\t<MenuTitleActionsUI>\n\t\t\t\t\t\t\t{ titleAction }\n\n\t\t\t\t\t\t\t{ hasSearch && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tisSmall\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tlabel={ searchButtonLabel }\n\t\t\t\t\t\t\t\t\tonClick={ () => setIsSearching( true ) }\n\t\t\t\t\t\t\t\t\tref={ searchButtonRef }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<Icon icon={ searchIcon } />\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</MenuTitleActionsUI>\n\t\t\t\t\t) }\n\t\t\t\t</GroupTitleUI>\n\t\t\t) }\n\n\t\t\t{ isSearching && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={ getAnimateClassName( {\n\t\t\t\t\t\ttype: 'slide-in',\n\t\t\t\t\t\torigin: 'left',\n\t\t\t\t\t} ) }\n\t\t\t\t>\n\t\t\t\t\t<MenuTitleSearch\n\t\t\t\t\t\tonCloseSearch={ onCloseSearch }\n\t\t\t\t\t\tonSearch={ onSearch }\n\t\t\t\t\t\tsearch={ search }\n\t\t\t\t\t\ttitle={ title }\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\t\t\t) }\n\t\t</MenuTitleUI>\n\t);\n}\n"]}

package/build/navigation/menu/search-no-results-found.js

@@ -20,10 +20,9 @@ var _navigationStyles = require("../styles/navigation-styles");
 /**
  * Internal dependencies
  */
-function NavigationSearchNoResultsFound(_ref) {
-  let {
-    search
-  } = _ref;
+function NavigationSearchNoResultsFound({
+  search
+}) {
   const {
     navigationTree: {
       items

package/build/navigation/menu/search-no-results-found.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.tsx"],"names":["NavigationSearchNoResultsFound","search","navigationTree","items","resultsCount","Object","values","filter","item","_isVisible","length"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,8BAAT,OAE0B;AAAA,MAFe;AACvDC,IAAAA;AADuD,GAEf;AACxC,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,oCAFJ;AAIA,QAAMC,YAAY,GAAGC,MAAM,CAACC,MAAP,CAAeH,KAAf,EAAuBI,MAAvB,CAClBC,IAAF,IAAYA,IAAI,CAACC,UADG,EAEnBC,MAFF;;AAIA,MAAK,CAAET,MAAF,IAAY,CAAC,CAAEG,YAApB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,4BAAD,QACC,4BAAC,wBAAD,QAAU,cAAI,mBAAJ,CAAV,MADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { ItemBaseUI, ItemUI } from '../styles/navigation-styles';\n\nimport type { NavigationSearchNoResultsFoundProps } from '../types';\n\nexport default function NavigationSearchNoResultsFound( {\n\tsearch,\n}: NavigationSearchNoResultsFoundProps ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst resultsCount = Object.values( items ).filter(\n\t\t( item ) => item._isVisible\n\t).length;\n\n\tif ( ! search || !! resultsCount ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ItemBaseUI>\n\t\t\t<ItemUI>{ __( 'No results found.' ) } </ItemUI>\n\t\t</ItemBaseUI>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.tsx"],"names":["NavigationSearchNoResultsFound","search","navigationTree","items","resultsCount","Object","values","filter","item","_isVisible","length"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AATA;AACA;AACA;;AAGA;AACA;AACA;AAMe,SAASA,8BAAT,CAAyC;AACvDC,EAAAA;AADuD,CAAzC,EAE0B;AACxC,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEF,oCAFJ;AAIA,QAAMC,YAAY,GAAGC,MAAM,CAACC,MAAP,CAAeH,KAAf,EAAuBI,MAAvB,CAClBC,IAAF,IAAYA,IAAI,CAACC,UADG,EAEnBC,MAFF;;AAIA,MAAK,CAAET,MAAF,IAAY,CAAC,CAAEG,YAApB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,SACC,4BAAC,4BAAD,QACC,4BAAC,wBAAD,QAAU,cAAI,mBAAJ,CAAV,MADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { ItemBaseUI, ItemUI } from '../styles/navigation-styles';\n\nimport type { NavigationSearchNoResultsFoundProps } from '../types';\n\nexport default function NavigationSearchNoResultsFound( {\n\tsearch,\n}: NavigationSearchNoResultsFoundProps ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst resultsCount = Object.values( items ).filter(\n\t\t( item ) => item._isVisible\n\t).length;\n\n\tif ( ! search || !! resultsCount ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ItemBaseUI>\n\t\t\t<ItemUI>{ __( 'No results found.' ) } </ItemUI>\n\t\t</ItemBaseUI>\n\t);\n}\n"]}

package/build/navigator/navigator-back-button/component.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.NavigatorBackButton = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../../ui/context");
 
 var _view = require("../../view");
@@ -26,9 +22,10 @@ var _hook = require("./hook");
  */
 function UnconnectedNavigatorBackButton(props, forwardedRef) {
   const navigatorBackButtonProps = (0, _hook.useNavigatorBackButton)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({
-    ref: forwardedRef
-  }, navigatorBackButtonProps));
+  return (0, _element.createElement)(_view.View, {
+    ref: forwardedRef,
+    ...navigatorBackButtonProps
+  });
 }
 /**
  * The `NavigatorBackButton` component can be used to navigate to a screen and

package/build/navigator/navigator-back-button/component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","NavigatorBackButton"],"mappings":";;;;;;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,8BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,wBAAwB,GAAG,kCAAwBF,KAAxB,CAAjC;AAEA,SAAO,4BAAC,UAAD;AAAM,IAAA,GAAG,EAAGC;AAAZ,KAAgCC,wBAAhC,EAAP;AACA;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;;;AACO,MAAMC,mBAAmB,GAAG,6BAClCJ,8BADkC,EAElC,qBAFkC,CAA5B;;eAKQI,mB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalNavigatorButton as NavigatorButton,\n *   __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *        <NavigatorButton path=\"/child\">\n *          Navigate to child screen.\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *\n *     <NavigatorScreen path=\"/child\">\n *       <p>This is the child screen.</p>\n *       <NavigatorBackButton>\n *         Go back\n *       </NavigatorBackButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/component.tsx"],"names":["UnconnectedNavigatorBackButton","props","forwardedRef","navigatorBackButtonProps","NavigatorBackButton"],"mappings":";;;;;;;;;AAQA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMA,SAASA,8BAAT,CACCC,KADD,EAECC,YAFD,EAGE;AACD,QAAMC,wBAAwB,GAAG,kCAAwBF,KAAxB,CAAjC;AAEA,SAAO,4BAAC,UAAD;AAAM,IAAA,GAAG,EAAGC,YAAZ;AAAA,OAAgCC;AAAhC,IAAP;AACA;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;;;AACO,MAAMC,mBAAmB,GAAG,6BAClCJ,8BADkC,EAElC,qBAFkC,CAA5B;;eAKQI,mB","sourcesContent":["/**\n * External dependencies\n */\nimport type { ForwardedRef } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { contextConnect, WordPressComponentProps } from '../../ui/context';\nimport { View } from '../../view';\nimport { useNavigatorBackButton } from './hook';\nimport type { NavigatorBackButtonProps } from '../types';\n\nfunction UnconnectedNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonProps, 'button' >,\n\tforwardedRef: ForwardedRef< any >\n) {\n\tconst navigatorBackButtonProps = useNavigatorBackButton( props );\n\n\treturn <View ref={ forwardedRef } { ...navigatorBackButtonProps } />;\n}\n\n/**\n * The `NavigatorBackButton` component can be used to navigate to a screen and\n * should be used in combination with the `NavigatorProvider`, the\n * `NavigatorScreen` and the `NavigatorButton` components (or the `useNavigator`\n * hook).\n *\n * @example\n * ```jsx\n * import {\n *   __experimentalNavigatorProvider as NavigatorProvider,\n *   __experimentalNavigatorScreen as NavigatorScreen,\n *   __experimentalNavigatorButton as NavigatorButton,\n *   __experimentalNavigatorBackButton as NavigatorBackButton,\n * } from '@wordpress/components';\n *\n * const MyNavigation = () => (\n *   <NavigatorProvider initialPath=\"/\">\n *     <NavigatorScreen path=\"/\">\n *       <p>This is the home screen.</p>\n *        <NavigatorButton path=\"/child\">\n *          Navigate to child screen.\n *       </NavigatorButton>\n *     </NavigatorScreen>\n *\n *     <NavigatorScreen path=\"/child\">\n *       <p>This is the child screen.</p>\n *       <NavigatorBackButton>\n *         Go back\n *       </NavigatorBackButton>\n *     </NavigatorScreen>\n *   </NavigatorProvider>\n * );\n * ```\n */\nexport const NavigatorBackButton = contextConnect(\n\tUnconnectedNavigatorBackButton,\n\t'NavigatorBackButton'\n);\n\nexport default NavigatorBackButton;\n"]}

package/build/navigator/navigator-back-button/hook.js

@@ -42,7 +42,7 @@ function useNavigatorBackButton(props) {
       goBack();
     }
 
-    onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    onClick?.(e);
   }, [goToParentProp, goToParent, goBack, onClick]);
   return {
     as,

package/build/navigator/navigator-back-button/hook.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"names":["useNavigatorBackButton","props","onClick","as","Button","goToParent","goToParentProp","otherProps","goBack","handleClick","e","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMO,SAASA,sBAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,OADK;AAELC,IAAAA,EAAE,GAAGC,eAFA;AAGLC,IAAAA,UAAU,EAAEC,cAAc,GAAG,KAHxB;AAIL,OAAGC;AAJE,MAKF,+BAAkBN,KAAlB,EAAyB,qBAAzB,CALJ;AAOA,QAAM;AAAEO,IAAAA,MAAF;AAAUH,IAAAA;AAAV,MAAyB,4BAA/B;AACA,QAAMI,WAAyD,GAC9D,0BACGC,CAAF,IAAS;AACRA,IAAAA,CAAC,CAACC,cAAF;;AACA,QAAKL,cAAL,EAAsB;AACrBD,MAAAA,UAAU;AACV,KAFD,MAEO;AACNG,MAAAA,MAAM;AACN;;AACDN,IAAAA,OAAO,SAAP,IAAAA,OAAO,WAAP,YAAAA,OAAO,CAAIQ,CAAJ,CAAP;AACA,GATF,EAUC,CAAEJ,cAAF,EAAkBD,UAAlB,EAA8BG,MAA9B,EAAsCN,OAAtC,CAVD,CADD;AAcA,SAAO;AACNC,IAAAA,EADM;AAEND,IAAAA,OAAO,EAAEO,WAFH;AAGN,OAAGF;AAHG,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport Button from '../../button';\nimport useNavigator from '../use-navigator';\nimport type { NavigatorBackButtonHookProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\t\tgoToParent: goToParentProp = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorBackButton' );\n\n\tconst { goBack, goToParent } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tif ( goToParentProp ) {\n\t\t\t\t\tgoToParent();\n\t\t\t\t} else {\n\t\t\t\t\tgoBack();\n\t\t\t\t}\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goToParentProp, goToParent, goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigator/navigator-back-button/hook.ts"],"names":["useNavigatorBackButton","props","onClick","as","Button","goToParent","goToParentProp","otherProps","goBack","handleClick","e","preventDefault"],"mappings":";;;;;;;;;AAGA;;AAKA;;AACA;;AACA;;AAVA;AACA;AACA;;AAGA;AACA;AACA;AAMO,SAASA,sBAAT,CACNC,KADM,EAEL;AACD,QAAM;AACLC,IAAAA,OADK;AAELC,IAAAA,EAAE,GAAGC,eAFA;AAGLC,IAAAA,UAAU,EAAEC,cAAc,GAAG,KAHxB;AAIL,OAAGC;AAJE,MAKF,+BAAkBN,KAAlB,EAAyB,qBAAzB,CALJ;AAOA,QAAM;AAAEO,IAAAA,MAAF;AAAUH,IAAAA;AAAV,MAAyB,4BAA/B;AACA,QAAMI,WAAyD,GAC9D,0BACGC,CAAF,IAAS;AACRA,IAAAA,CAAC,CAACC,cAAF;;AACA,QAAKL,cAAL,EAAsB;AACrBD,MAAAA,UAAU;AACV,KAFD,MAEO;AACNG,MAAAA,MAAM;AACN;;AACDN,IAAAA,OAAO,GAAIQ,CAAJ,CAAP;AACA,GATF,EAUC,CAAEJ,cAAF,EAAkBD,UAAlB,EAA8BG,MAA9B,EAAsCN,OAAtC,CAVD,CADD;AAcA,SAAO;AACNC,IAAAA,EADM;AAEND,IAAAA,OAAO,EAAEO,WAFH;AAGN,OAAGF;AAHG,GAAP;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useContextSystem, WordPressComponentProps } from '../../ui/context';\nimport Button from '../../button';\nimport useNavigator from '../use-navigator';\nimport type { NavigatorBackButtonHookProps } from '../types';\n\nexport function useNavigatorBackButton(\n\tprops: WordPressComponentProps< NavigatorBackButtonHookProps, 'button' >\n) {\n\tconst {\n\t\tonClick,\n\t\tas = Button,\n\t\tgoToParent: goToParentProp = false,\n\t\t...otherProps\n\t} = useContextSystem( props, 'NavigatorBackButton' );\n\n\tconst { goBack, goToParent } = useNavigator();\n\tconst handleClick: React.MouseEventHandler< HTMLButtonElement > =\n\t\tuseCallback(\n\t\t\t( e ) => {\n\t\t\t\te.preventDefault();\n\t\t\t\tif ( goToParentProp ) {\n\t\t\t\t\tgoToParent();\n\t\t\t\t} else {\n\t\t\t\t\tgoBack();\n\t\t\t\t}\n\t\t\t\tonClick?.( e );\n\t\t\t},\n\t\t\t[ goToParentProp, goToParent, goBack, onClick ]\n\t\t);\n\n\treturn {\n\t\tas,\n\t\tonClick: handleClick,\n\t\t...otherProps,\n\t};\n}\n"]}

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

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.default = exports.NavigatorButton = void 0;
 
 var _element = require("@wordpress/element");
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _context = require("../../ui/context");
 
 var _view = require("../../view");
@@ -26,9 +22,10 @@ var _hook = require("./hook");
  */
 function UnconnectedNavigatorButton(props, forwardedRef) {
   const navigatorButtonProps = (0, _hook.useNavigatorButton)(props);
-  return (0, _element.createElement)(_view.View, (0, _extends2.default)({
-    ref: forwardedRef
-  }, navigatorButtonProps));
+  return (0, _element.createElement)(_view.View, {
+    ref: forwardedRef,
+    ...navigatorButtonProps
+  });
 }
 /**
  * The `NavigatorButton` component can be used to navigate to a screen and should