@wordpress/components 27.6.0 → 28.0.0

package/build/navigation/group/index.js

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationGroup = NavigationGroup;
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _context = require("./context");
 var _navigationStyles = require("../styles/navigation-styles");
 var _context2 = require("../context");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -46,24 +46,29 @@ function NavigationGroup({
 
   // Keep the children rendered to make sure invisible items are included in the navigation tree.
   if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
-    return (0, _react.createElement)(_context.NavigationGroupContext.Provider, {
-      value: context
-    }, children);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationGroupContext.Provider, {
+      value: context,
+      children: children
+    });
   }
   const groupTitleId = `components-navigation__group-title-${groupId}`;
   const classes = (0, _clsx.default)('components-navigation__group', className);
-  return (0, _react.createElement)(_context.NavigationGroupContext.Provider, {
-    value: context
-  }, (0, _react.createElement)("li", {
-    className: classes
-  }, title && (0, _react.createElement)(_navigationStyles.GroupTitleUI, {
-    className: "components-navigation__group-title",
-    id: groupTitleId,
-    level: 3
-  }, title), (0, _react.createElement)("ul", {
-    "aria-labelledby": groupTitleId,
-    role: "group"
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationGroupContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("li", {
+      className: classes,
+      children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.GroupTitleUI, {
+        className: "components-navigation__group-title",
+        id: groupTitleId,
+        level: 3,
+        children: title
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        "aria-labelledby": groupTitleId,
+        role: "group",
+        children: children
+      })]
+    })
+  });
 }
 var _default = exports.default = NavigationGroup;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_context","_navigationStyles","_context2","uniqueId","NavigationGroup","children","className","title","groupId","useState","navigationTree","items","useNavigationContext","context","group","Object","values","some","item","_isVisible","_react","createElement","NavigationGroupContext","Provider","value","groupTitleId","classes","clsx","GroupTitleUI","id","level","role","_default","exports","default"],"sources":["@wordpress/components/src/navigation/group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\n/**\n * @deprecated Use `Navigator` instead.\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 = clsx( '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"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIK,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACO,SAASC,eAAeA,CAAE;EAChCC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAG;EACzB,MAAM,CAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAG,SAAS,EAAEN,QAAU,EAAE,CAAC;EACvD,MAAM;IACLO,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,8BAAoB,EAAC,CAAC;EAE1B,MAAMC,OAAO,GAAG;IAAEC,KAAK,EAAEN;EAAQ,CAAC;;EAElC;EACA,IACC,CAAEO,MAAM,CAACC,MAAM,CAAEL,KAAM,CAAC,CAACM,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACJ,KAAK,KAAKN,OAAO,IAAIU,IAAI,CAACC,UAC5C,CAAC,EACA;IACD,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;MAACC,KAAK,EAAGX;IAAS,GAC/CR,QAC8B,CAAC;EAEpC;EAEA,MAAMoB,YAAY,GAAI,sCAAsCjB,OAAS,EAAC;EACtE,MAAMkB,OAAO,GAAG,IAAAC,aAAI,EAAE,8BAA8B,EAAErB,SAAU,CAAC;EAEjE,OACC,IAAAc,MAAA,CAAAC,aAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;IAACC,KAAK,EAAGX;EAAS,GACjD,IAAAO,MAAA,CAAAC,aAAA;IAAIf,SAAS,EAAGoB;EAAS,GACtBnB,KAAK,IACN,IAAAa,MAAA,CAAAC,aAAA,EAACpB,iBAAA,CAAA2B,YAAY;IACZtB,SAAS,EAAC,oCAAoC;IAC9CuB,EAAE,EAAGJ,YAAc;IACnBK,KAAK,EAAG;EAAG,GAETvB,KACW,CACd,EACD,IAAAa,MAAA,CAAAC,aAAA;IAAI,mBAAkBI,YAAc;IAACM,IAAI,EAAC;EAAO,GAC9C1B,QACC,CACD,CAC4B,CAAC;AAEpC;AAAC,IAAA2B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc9B,eAAe","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_context","_navigationStyles","_context2","_jsxRuntime","uniqueId","NavigationGroup","children","className","title","groupId","useState","navigationTree","items","useNavigationContext","context","group","Object","values","some","item","_isVisible","jsx","NavigationGroupContext","Provider","value","groupTitleId","classes","clsx","jsxs","GroupTitleUI","id","level","role","_default","exports","default"],"sources":["@wordpress/components/src/navigation/group/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\n/**\n * @deprecated Use `Navigator` instead.\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 = clsx( '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"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,SAAA,GAAAJ,OAAA;AAAkD,IAAAK,WAAA,GAAAL,OAAA;AAflD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIM,QAAQ,GAAG,CAAC;;AAEhB;AACA;AACA;AACO,SAASC,eAAeA,CAAE;EAChCC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAG;EACzB,MAAM,CAAEC,OAAO,CAAE,GAAG,IAAAC,iBAAQ,EAAG,SAAS,EAAEN,QAAU,EAAE,CAAC;EACvD,MAAM;IACLO,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,8BAAoB,EAAC,CAAC;EAE1B,MAAMC,OAAO,GAAG;IAAEC,KAAK,EAAEN;EAAQ,CAAC;;EAElC;EACA,IACC,CAAEO,MAAM,CAACC,MAAM,CAAEL,KAAM,CAAC,CAACM,IAAI,CAC1BC,IAAI,IAAMA,IAAI,CAACJ,KAAK,KAAKN,OAAO,IAAIU,IAAI,CAACC,UAC5C,CAAC,EACA;IACD,oBACC,IAAAjB,WAAA,CAAAkB,GAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;MAACC,KAAK,EAAGV,OAAS;MAAAR,QAAA,EAC/CA;IAAQ,CACsB,CAAC;EAEpC;EAEA,MAAMmB,YAAY,GAAI,sCAAsChB,OAAS,EAAC;EACtE,MAAMiB,OAAO,GAAG,IAAAC,aAAI,EAAE,8BAA8B,EAAEpB,SAAU,CAAC;EAEjE,oBACC,IAAAJ,WAAA,CAAAkB,GAAA,EAACrB,QAAA,CAAAsB,sBAAsB,CAACC,QAAQ;IAACC,KAAK,EAAGV,OAAS;IAAAR,QAAA,eACjD,IAAAH,WAAA,CAAAyB,IAAA;MAAIrB,SAAS,EAAGmB,OAAS;MAAApB,QAAA,GACtBE,KAAK,iBACN,IAAAL,WAAA,CAAAkB,GAAA,EAACpB,iBAAA,CAAA4B,YAAY;QACZtB,SAAS,EAAC,oCAAoC;QAC9CuB,EAAE,EAAGL,YAAc;QACnBM,KAAK,EAAG,CAAG;QAAAzB,QAAA,EAETE;MAAK,CACM,CACd,eACD,IAAAL,WAAA,CAAAkB,GAAA;QAAI,mBAAkBI,YAAc;QAACO,IAAI,EAAC,OAAO;QAAA1B,QAAA,EAC9CA;MAAQ,CACP,CAAC;IAAA,CACF;EAAC,CAC2B,CAAC;AAEpC;AAAC,IAAA2B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEc9B,eAAe","ignoreList":[]}

package/build/navigation/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Navigation = Navigation;
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
@@ -15,6 +14,7 @@ var _constants = require("./constants");
 var _context = require("./context");
 var _navigationStyles = require("./styles/navigation-styles");
 var _useCreateNavigationTree = require("./use-create-navigation-tree");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -117,16 +117,18 @@ function Navigation({
     type: 'slide-in',
     origin: slideOrigin
   });
-  return (0, _react.createElement)(_navigationStyles.NavigationUI, {
-    className: classes
-  }, (0, _react.createElement)("div", {
-    key: menu,
-    className: animateClassName ? (0, _clsx.default)({
-      [animateClassName]: isMounted.current && slideOrigin
-    }) : undefined
-  }, (0, _react.createElement)(_context.NavigationContext.Provider, {
-    value: context
-  }, children)));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.NavigationUI, {
+    className: classes,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: animateClassName ? (0, _clsx.default)({
+        [animateClassName]: isMounted.current && slideOrigin
+      }) : undefined,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationContext.Provider, {
+        value: context,
+        children: children
+      })
+    }, menu)
+  });
 }
 var _default = exports.default = Navigation;
 //# sourceMappingURL=index.js.map

package/build/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_animate","_constants","_context","_navigationStyles","_useCreateNavigationTree","noop","Navigation","activeItem","activeMenu","ROOT_MENU","children","className","onActivateMenu","menu","setMenu","useState","slideOrigin","setSlideOrigin","navigationTree","useCreateNavigationTree","defaultSlideOrigin","isRTL","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","useRef","useEffect","current","context","classes","clsx","animateClassName","getAnimateClassName","type","origin","_react","createElement","NavigationUI","key","undefined","NavigationContext","Provider","value","_default","exports","default"],"sources":["@wordpress/components/src/navigation/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 * @deprecated Use `Navigator` instead.\n *\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 = clsx( '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? clsx( {\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"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_i18n","_animate","_constants","_context","_navigationStyles","_useCreateNavigationTree","_jsxRuntime","noop","Navigation","activeItem","activeMenu","ROOT_MENU","children","className","onActivateMenu","menu","setMenu","useState","slideOrigin","setSlideOrigin","navigationTree","useCreateNavigationTree","defaultSlideOrigin","isRTL","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","useRef","useEffect","current","context","classes","clsx","animateClassName","getAnimateClassName","type","origin","jsx","NavigationUI","undefined","NavigationContext","Provider","value","_default","exports","default"],"sources":["@wordpress/components/src/navigation/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 * @deprecated Use `Navigator` instead.\n *\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 = clsx( '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? clsx( {\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"],"mappings":"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","ignoreList":[]}

package/build/navigation/item/base-content.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavigationItemBaseContent;
-var _react = require("react");
 var _navigationStyles = require("../styles/navigation-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Internal dependencies
  */
@@ -15,11 +15,15 @@ function NavigationItemBaseContent(props) {
     badge,
     title
   } = props;
-  return (0, _react.createElement)(_react.Fragment, null, title && (0, _react.createElement)(_navigationStyles.ItemTitleUI, {
-    className: "components-navigation__item-title",
-    as: "span"
-  }, title), badge && (0, _react.createElement)(_navigationStyles.ItemBadgeUI, {
-    className: "components-navigation__item-badge"
-  }, badge));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.ItemTitleUI, {
+      className: "components-navigation__item-title",
+      as: "span",
+      children: title
+    }), badge && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.ItemBadgeUI, {
+      className: "components-navigation__item-badge",
+      children: badge
+    })]
+  });
 }
 //# sourceMappingURL=base-content.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_navigationStyles","require","NavigationItemBaseContent","props","badge","title","_react","createElement","Fragment","ItemTitleUI","className","as","ItemBadgeUI"],"sources":["@wordpress/components/src/navigation/item/base-content.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseContentProps } from '../types';\n\nexport default function NavigationItemBaseContent(\n\tprops: NavigationItemBaseContentProps\n) {\n\tconst { badge, title } = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ title && (\n\t\t\t\t<ItemTitleUI\n\t\t\t\t\tclassName=\"components-navigation__item-title\"\n\t\t\t\t\tas=\"span\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ItemTitleUI>\n\t\t\t) }\n\n\t\t\t{ badge && (\n\t\t\t\t<ItemBadgeUI className=\"components-navigation__item-badge\">\n\t\t\t\t\t{ badge }\n\t\t\t\t</ItemBadgeUI>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,iBAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAKe,SAASC,yBAAyBA,CAChDC,KAAqC,EACpC;EACD,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAE9B,OACC,IAAAG,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAE,QAAA,QACGH,KAAK,IACN,IAAAC,MAAA,CAAAC,aAAA,EAACP,iBAAA,CAAAS,WAAW;IACXC,SAAS,EAAC,mCAAmC;IAC7CC,EAAE,EAAC;EAAM,GAEPN,KACU,CACb,EAECD,KAAK,IACN,IAAAE,MAAA,CAAAC,aAAA,EAACP,iBAAA,CAAAY,WAAW;IAACF,SAAS,EAAC;EAAmC,GACvDN,KACU,CAEb,CAAC;AAEL","ignoreList":[]}
+{"version":3,"names":["_navigationStyles","require","_jsxRuntime","NavigationItemBaseContent","props","badge","title","jsxs","Fragment","children","jsx","ItemTitleUI","className","as","ItemBadgeUI"],"sources":["@wordpress/components/src/navigation/item/base-content.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { ItemBadgeUI, ItemTitleUI } from '../styles/navigation-styles';\n\nimport type { NavigationItemBaseContentProps } from '../types';\n\nexport default function NavigationItemBaseContent(\n\tprops: NavigationItemBaseContentProps\n) {\n\tconst { badge, title } = props;\n\n\treturn (\n\t\t<>\n\t\t\t{ title && (\n\t\t\t\t<ItemTitleUI\n\t\t\t\t\tclassName=\"components-navigation__item-title\"\n\t\t\t\t\tas=\"span\"\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ItemTitleUI>\n\t\t\t) }\n\n\t\t\t{ badge && (\n\t\t\t\t<ItemBadgeUI className=\"components-navigation__item-badge\">\n\t\t\t\t\t{ badge }\n\t\t\t\t</ItemBadgeUI>\n\t\t\t) }\n\t\t</>\n\t);\n}\n"],"mappings":";;;;;;AAGA,IAAAA,iBAAA,GAAAC,OAAA;AAAuE,IAAAC,WAAA,GAAAD,OAAA;AAHvE;AACA;AACA;;AAKe,SAASE,yBAAyBA,CAChDC,KAAqC,EACpC;EACD,MAAM;IAAEC,KAAK;IAAEC;EAAM,CAAC,GAAGF,KAAK;EAE9B,oBACC,IAAAF,WAAA,CAAAK,IAAA,EAAAL,WAAA,CAAAM,QAAA;IAAAC,QAAA,GACGH,KAAK,iBACN,IAAAJ,WAAA,CAAAQ,GAAA,EAACV,iBAAA,CAAAW,WAAW;MACXC,SAAS,EAAC,mCAAmC;MAC7CC,EAAE,EAAC,MAAM;MAAAJ,QAAA,EAEPH;IAAK,CACK,CACb,EAECD,KAAK,iBACN,IAAAH,WAAA,CAAAQ,GAAA,EAACV,iBAAA,CAAAc,WAAW;MAACF,SAAS,EAAC,mCAAmC;MAAAH,QAAA,EACvDJ;IAAK,CACK,CACb;EAAA,CACA,CAAC;AAEL","ignoreList":[]}

package/build/navigation/item/base.js

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavigationItemBase;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _context = require("../context");
 var _useNavigationTreeItem = require("./use-navigation-tree-item");
 var _navigationStyles = require("../styles/navigation-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -42,9 +42,10 @@ function NavigationItemBase(props) {
     return null;
   }
   const classes = (0, _clsx.default)('components-navigation__item', className);
-  return (0, _react.createElement)(_navigationStyles.ItemBaseUI, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.ItemBaseUI, {
     className: classes,
-    ...restProps
-  }, children);
+    ...restProps,
+    children: children
+  });
 }
 //# sourceMappingURL=base.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_context","_useNavigationTreeItem","_navigationStyles","uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","useState","useNavigationTreeItem","navigationTree","useNavigationContext","getItem","_isVisible","classes","clsx","_react","createElement","ItemBaseUI"],"sources":["@wordpress/components/src/navigation/item/base.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx( '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"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAfA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIK,QAAQ,GAAG,CAAC;AAED,SAASC,kBAAkBA,CAAEC,KAA8B,EAAG;EAC5E;EACA,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAE,GAAGC;EAAU,CAAC,GAAGL,KAAK;EAEhE,MAAM,CAAEM,MAAM,CAAE,GAAG,IAAAC,iBAAQ,EAAG,QAAQ,EAAET,QAAU,EAAE,CAAC;EAErD,IAAAU,4CAAqB,EAAEF,MAAM,EAAEN,KAAM,CAAC;EACtC,MAAM;IAAES;EAAe,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAEjD,IAAK,CAAED,cAAc,CAACE,OAAO,CAAEL,MAAO,CAAC,EAAEM,UAAU,EAAG;IACrD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,6BAA6B,EAAEZ,SAAU,CAAC;EAEhE,OACC,IAAAa,MAAA,CAAAC,aAAA,EAACnB,iBAAA,CAAAoB,UAAU;IAACf,SAAS,EAAGW,OAAS;IAAA,GAAMR;EAAS,GAC7CJ,QACS,CAAC;AAEf","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_context","_useNavigationTreeItem","_navigationStyles","_jsxRuntime","uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","useState","useNavigationTreeItem","navigationTree","useNavigationContext","getItem","_isVisible","classes","clsx","jsx","ItemBaseUI"],"sources":["@wordpress/components/src/navigation/item/base.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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 = clsx( '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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AAKA,IAAAE,QAAA,GAAAF,OAAA;AACA,IAAAG,sBAAA,GAAAH,OAAA;AACA,IAAAI,iBAAA,GAAAJ,OAAA;AAAyD,IAAAK,WAAA,GAAAL,OAAA;AAfzD;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAOA,IAAIM,QAAQ,GAAG,CAAC;AAED,SAASC,kBAAkBA,CAAEC,KAA8B,EAAG;EAC5E;EACA,MAAM;IAAEC,QAAQ;IAAEC,SAAS;IAAEC,KAAK;IAAEC,IAAI;IAAE,GAAGC;EAAU,CAAC,GAAGL,KAAK;EAEhE,MAAM,CAAEM,MAAM,CAAE,GAAG,IAAAC,iBAAQ,EAAG,QAAQ,EAAET,QAAU,EAAE,CAAC;EAErD,IAAAU,4CAAqB,EAAEF,MAAM,EAAEN,KAAM,CAAC;EACtC,MAAM;IAAES;EAAe,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAEjD,IAAK,CAAED,cAAc,CAACE,OAAO,CAAEL,MAAO,CAAC,EAAEM,UAAU,EAAG;IACrD,OAAO,IAAI;EACZ;EAEA,MAAMC,OAAO,GAAG,IAAAC,aAAI,EAAE,6BAA6B,EAAEZ,SAAU,CAAC;EAEhE,oBACC,IAAAL,WAAA,CAAAkB,GAAA,EAACnB,iBAAA,CAAAoB,UAAU;IAACd,SAAS,EAAGW,OAAS;IAAA,GAAMR,SAAS;IAAAJ,QAAA,EAC7CA;EAAQ,CACC,CAAC;AAEf","ignoreList":[]}

package/build/navigation/item/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationItem = NavigationItem;
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
@@ -15,6 +14,7 @@ var _context = require("../context");
 var _navigationStyles = require("../styles/navigation-styles");
 var _baseContent = _interopRequireDefault(require("./base-content"));
 var _base = _interopRequireDefault(require("./base"));
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -83,19 +83,23 @@ function NavigationItem(props) {
     'aria-current': isActive ? 'page' : undefined,
     ...restProps
   };
-  return (0, _react.createElement)(_base.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_base.default, {
     ...baseProps,
-    className: classes
-  }, children || (0, _react.createElement)(_navigationStyles.ItemUI, {
-    ...itemProps
-  }, icon && (0, _react.createElement)(_navigationStyles.ItemIconUI, null, (0, _react.createElement)(_icons.Icon, {
-    icon: icon
-  })), (0, _react.createElement)(_baseContent.default, {
-    title: title,
-    badge: badge
-  }), navigateToMenu && (0, _react.createElement)(_icons.Icon, {
-    icon: navigationIcon
-  })));
+    className: classes,
+    children: children || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.ItemUI, {
+      ...itemProps,
+      children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.ItemIconUI, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+          icon: icon
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_baseContent.default, {
+        title: title,
+        badge: badge
+      }), navigateToMenu && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.Icon, {
+        icon: navigationIcon
+      })]
+    })
+  });
 }
 var _default = exports.default = NavigationItem;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_i18n","_button","_context","_navigationStyles","_baseContent","_base","noop","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","useNavigationContext","isActive","classes","clsx","onItemClick","event","navigationIcon","isRTL","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button","_react","createElement","default","ItemUI","ItemIconUI","Icon","_default","exports"],"sources":["@wordpress/components/src/navigation/item/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\n/**\n * @deprecated Use `Navigator` instead.\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 = clsx( 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"],"mappings":";;;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AAKA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AACA,IAAAK,iBAAA,GAAAL,OAAA;AACA,IAAAM,YAAA,GAAAP,sBAAA,CAAAC,OAAA;AACA,IAAAO,KAAA,GAAAR,sBAAA,CAAAC,OAAA;AAlBA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;;AASA,MAAMQ,IAAI,GAAGA,CAAA,KAAM,CAAC,CAAC;;AAErB;AACA;AACA;AACO,SAASC,cAAcA,CAAEC,KAA0B,EAAG;EAC5D,MAAM;IACLC,KAAK;IACLC,QAAQ;IACRC,SAAS;IACTC,IAAI;IACJC,IAAI;IACJC,cAAc;IACdC,OAAO,GAAGT,IAAI;IACdU,KAAK;IACLC,IAAI;IACJC,qBAAqB;IACrBC,MAAM;IACN,GAAGC;EACJ,CAAC,GAAGZ,KAAK;EAET,MAAM;IACLa,UAAU;IACVC,aAAa;IACbC,cAAc,EAAE;MAAEC;IAAY;EAC/B,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;;EAE1B;EACA;EACA;EACA,IACCP,qBAAqB,IACrBJ,cAAc,IACdU,WAAW,CAAEV,cAAe,CAAC,EAC5B;IACD,OAAO,IAAI;EACZ;EAEA,MAAMY,QAAQ,GAAGb,IAAI,IAAIQ,UAAU,KAAKR,IAAI;EAE5C,MAAMc,OAAO,GAAG,IAAAC,aAAI,EAAEjB,SAAS,EAAE;IAChC,WAAW,EAAEe;EACd,CAAE,CAAC;EAEH,MAAMG,WAEL,GAAKC,KAAK,IAAM;IAChB,IAAKhB,cAAc,EAAG;MACrBQ,aAAa,CAAER,cAAe,CAAC;IAChC;IAEAC,OAAO,CAAEe,KAAM,CAAC;EACjB,CAAC;EACD,MAAMC,cAAc,GAAG,IAAAC,WAAK,EAAC,CAAC,GAAGC,kBAAW,GAAGC,mBAAY;EAC3D,MAAMC,SAAS,GAAGzB,QAAQ,GAAGF,KAAK,GAAG;IAAE,GAAGA,KAAK;IAAEO,OAAO,EAAEqB;EAAU,CAAC;EACrE,MAAMC,SAAS,GAAGlB,MAAM,GACrBC,SAAS,GACT;IACAkB,EAAE,EAAEC,eAAM;IACV3B,IAAI;IACJG,OAAO,EAAEc,WAAW;IACpB,cAAc,EAAEH,QAAQ,GAAG,MAAM,GAAGU,SAAS;IAC7C,GAAGhB;EACH,CAAC;EAEJ,OACC,IAAAoB,MAAA,CAAAC,aAAA,EAACpC,KAAA,CAAAqC,OAAkB;IAAA,GAAMP,SAAS;IAAGxB,SAAS,EAAGgB;EAAS,GACvDjB,QAAQ,IACT,IAAA8B,MAAA,CAAAC,aAAA,EAACtC,iBAAA,CAAAwC,MAAM;IAAA,GAAMN;EAAS,GACnBpB,IAAI,IACL,IAAAuB,MAAA,CAAAC,aAAA,EAACtC,iBAAA,CAAAyC,UAAU,QACV,IAAAJ,MAAA,CAAAC,aAAA,EAAC1C,MAAA,CAAA8C,IAAI;IAAC5B,IAAI,EAAGA;EAAM,CAAE,CACV,CACZ,EAED,IAAAuB,MAAA,CAAAC,aAAA,EAACrC,YAAA,CAAAsC,OAAyB;IACzB1B,KAAK,EAAGA,KAAO;IACfP,KAAK,EAAGA;EAAO,CACf,CAAC,EAEAK,cAAc,IAAI,IAAA0B,MAAA,CAAAC,aAAA,EAAC1C,MAAA,CAAA8C,IAAI;IAAC5B,IAAI,EAAGc;EAAgB,CAAE,CAC5C,CAEU,CAAC;AAEvB;AAAC,IAAAe,QAAA,GAAAC,OAAA,CAAAL,OAAA,GAEcnC,cAAc","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_i18n","_button","_context","_navigationStyles","_baseContent","_base","_jsxRuntime","noop","NavigationItem","props","badge","children","className","href","item","navigateToMenu","onClick","title","icon","hideIfTargetMenuEmpty","isText","restProps","activeItem","setActiveMenu","navigationTree","isMenuEmpty","useNavigationContext","isActive","classes","clsx","onItemClick","event","navigationIcon","isRTL","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button","jsx","default","jsxs","ItemUI","ItemIconUI","Icon","_default","exports"],"sources":["@wordpress/components/src/navigation/item/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\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\n/**\n * @deprecated Use `Navigator` instead.\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 = clsx( 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"],"mappings":"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","ignoreList":[]}

package/build/navigation/menu/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenu = NavigationMenu;
 exports.default = void 0;
-var _react = require("react");
 var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _constants = require("../constants");
@@ -18,6 +17,7 @@ var _menuTitle = _interopRequireDefault(require("./menu-title"));
 var _searchNoResultsFound = _interopRequireDefault(require("./search-no-results-found"));
 var _navigableContainer = require("../../navigable-container");
 var _navigationStyles = require("../styles/navigation-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * External dependencies
  */
@@ -60,34 +60,40 @@ function NavigationMenu(props) {
 
   // Keep the children rendered to make sure invisible items are included in the navigation tree.
   if (activeMenu !== menu) {
-    return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
-      value: context
-    }, children);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationMenuContext.Provider, {
+      value: context,
+      children: children
+    });
   }
   const isControlledSearch = !!setControlledSearch;
   const search = isControlledSearch ? controlledSearch : uncontrolledSearch;
   const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
   const menuTitleId = `components-navigation__menu-title-${menu}`;
   const classes = (0, _clsx.default)('components-navigation__menu', className);
-  return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
-    value: context
-  }, (0, _react.createElement)(_navigationStyles.MenuUI, {
-    className: classes
-  }, (parentMenu || onBackButtonClick) && (0, _react.createElement)(_backButton.default, {
-    backButtonLabel: backButtonLabel,
-    parentMenu: parentMenu,
-    onClick: onBackButtonClick
-  }), title && (0, _react.createElement)(_menuTitle.default, {
-    hasSearch: hasSearch,
-    onSearch: onSearch,
-    search: search,
-    title: title,
-    titleAction: titleAction
-  }), (0, _react.createElement)(_navigableContainer.NavigableMenu, null, (0, _react.createElement)("ul", {
-    "aria-labelledby": menuTitleId
-  }, children, search && !isSearchDebouncing && (0, _react.createElement)(_searchNoResultsFound.default, {
-    search: search
-  })))));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.NavigationMenuContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_navigationStyles.MenuUI, {
+      className: classes,
+      children: [(parentMenu || onBackButtonClick) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_backButton.default, {
+        backButtonLabel: backButtonLabel,
+        parentMenu: parentMenu,
+        onClick: onBackButtonClick
+      }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_menuTitle.default, {
+        hasSearch: hasSearch,
+        onSearch: onSearch,
+        search: search,
+        title: title,
+        titleAction: titleAction
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigableContainer.NavigableMenu, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("ul", {
+          "aria-labelledby": menuTitleId,
+          children: [children, search && !isSearchDebouncing && /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchNoResultsFound.default, {
+            search: search
+          })]
+        })
+      })]
+    })
+  });
 }
 var _default = exports.default = NavigationMenu;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_constants","_context","_context2","_useNavigationTreeMenu","_backButton","_menuTitle","_searchNoResultsFound","_navigableContainer","_navigationStyles","NavigationMenu","props","backButtonLabel","children","className","hasSearch","menu","ROOT_MENU","onBackButtonClick","onSearch","setControlledSearch","parentMenu","search","controlledSearch","isSearchDebouncing","title","titleAction","uncontrolledSearch","setUncontrolledSearch","useState","useNavigationTreeMenu","activeMenu","useNavigationContext","context","_react","createElement","NavigationMenuContext","Provider","value","isControlledSearch","menuTitleId","classes","clsx","MenuUI","default","onClick","NavigableMenu","_default","exports"],"sources":["@wordpress/components/src/navigation/menu/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ROOT_MENU } from '../constants';\nimport { NavigationMenuContext } from './context';\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeMenu } from './use-navigation-tree-menu';\nimport NavigationBackButton from '../back-button';\nimport NavigationMenuTitle from './menu-title';\nimport NavigationSearchNoResultsFound from './search-no-results-found';\nimport { NavigableMenu } from '../../navigable-container';\nimport { MenuUI } from '../styles/navigation-styles';\n\nimport type { NavigationMenuProps } from '../types';\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport function NavigationMenu( props: NavigationMenuProps ) {\n\tconst {\n\t\tbackButtonLabel,\n\t\tchildren,\n\t\tclassName,\n\t\thasSearch,\n\t\tmenu = ROOT_MENU,\n\t\tonBackButtonClick,\n\t\tonSearch: setControlledSearch,\n\t\tparentMenu,\n\t\tsearch: controlledSearch,\n\t\tisSearchDebouncing,\n\t\ttitle,\n\t\ttitleAction,\n\t} = props;\n\tconst [ uncontrolledSearch, setUncontrolledSearch ] = useState( '' );\n\tuseNavigationTreeMenu( props );\n\tconst { activeMenu } = useNavigationContext();\n\n\tconst context = {\n\t\tmenu,\n\t\tsearch: uncontrolledSearch,\n\t};\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif ( activeMenu !== menu ) {\n\t\treturn (\n\t\t\t<NavigationMenuContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationMenuContext.Provider>\n\t\t);\n\t}\n\n\tconst isControlledSearch = !! setControlledSearch;\n\tconst search = isControlledSearch ? controlledSearch : uncontrolledSearch;\n\tconst onSearch = isControlledSearch\n\t\t? setControlledSearch\n\t\t: setUncontrolledSearch;\n\n\tconst menuTitleId = `components-navigation__menu-title-${ menu }`;\n\tconst classes = clsx( 'components-navigation__menu', className );\n\n\treturn (\n\t\t<NavigationMenuContext.Provider value={ context }>\n\t\t\t<MenuUI className={ classes }>\n\t\t\t\t{ ( parentMenu || onBackButtonClick ) && (\n\t\t\t\t\t<NavigationBackButton\n\t\t\t\t\t\tbackButtonLabel={ backButtonLabel }\n\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\tonClick={ onBackButtonClick }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ title && (\n\t\t\t\t\t<NavigationMenuTitle\n\t\t\t\t\t\thasSearch={ hasSearch }\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\ttitleAction={ titleAction }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t<NavigableMenu>\n\t\t\t\t\t<ul aria-labelledby={ menuTitleId }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t{ search && ! isSearchDebouncing && (\n\t\t\t\t\t\t\t<NavigationSearchNoResultsFound search={ search } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ul>\n\t\t\t\t</NavigableMenu>\n\t\t\t</MenuUI>\n\t\t</NavigationMenuContext.Provider>\n\t);\n}\n\nexport default NavigationMenu;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_constants","_context","_context2","_useNavigationTreeMenu","_backButton","_menuTitle","_searchNoResultsFound","_navigableContainer","_navigationStyles","_jsxRuntime","NavigationMenu","props","backButtonLabel","children","className","hasSearch","menu","ROOT_MENU","onBackButtonClick","onSearch","setControlledSearch","parentMenu","search","controlledSearch","isSearchDebouncing","title","titleAction","uncontrolledSearch","setUncontrolledSearch","useState","useNavigationTreeMenu","activeMenu","useNavigationContext","context","jsx","NavigationMenuContext","Provider","value","isControlledSearch","menuTitleId","classes","clsx","jsxs","MenuUI","default","onClick","NavigableMenu","_default","exports"],"sources":["@wordpress/components/src/navigation/menu/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { ROOT_MENU } from '../constants';\nimport { NavigationMenuContext } from './context';\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeMenu } from './use-navigation-tree-menu';\nimport NavigationBackButton from '../back-button';\nimport NavigationMenuTitle from './menu-title';\nimport NavigationSearchNoResultsFound from './search-no-results-found';\nimport { NavigableMenu } from '../../navigable-container';\nimport { MenuUI } from '../styles/navigation-styles';\n\nimport type { NavigationMenuProps } from '../types';\n\n/**\n * @deprecated Use `Navigator` instead.\n */\nexport function NavigationMenu( props: NavigationMenuProps ) {\n\tconst {\n\t\tbackButtonLabel,\n\t\tchildren,\n\t\tclassName,\n\t\thasSearch,\n\t\tmenu = ROOT_MENU,\n\t\tonBackButtonClick,\n\t\tonSearch: setControlledSearch,\n\t\tparentMenu,\n\t\tsearch: controlledSearch,\n\t\tisSearchDebouncing,\n\t\ttitle,\n\t\ttitleAction,\n\t} = props;\n\tconst [ uncontrolledSearch, setUncontrolledSearch ] = useState( '' );\n\tuseNavigationTreeMenu( props );\n\tconst { activeMenu } = useNavigationContext();\n\n\tconst context = {\n\t\tmenu,\n\t\tsearch: uncontrolledSearch,\n\t};\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif ( activeMenu !== menu ) {\n\t\treturn (\n\t\t\t<NavigationMenuContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationMenuContext.Provider>\n\t\t);\n\t}\n\n\tconst isControlledSearch = !! setControlledSearch;\n\tconst search = isControlledSearch ? controlledSearch : uncontrolledSearch;\n\tconst onSearch = isControlledSearch\n\t\t? setControlledSearch\n\t\t: setUncontrolledSearch;\n\n\tconst menuTitleId = `components-navigation__menu-title-${ menu }`;\n\tconst classes = clsx( 'components-navigation__menu', className );\n\n\treturn (\n\t\t<NavigationMenuContext.Provider value={ context }>\n\t\t\t<MenuUI className={ classes }>\n\t\t\t\t{ ( parentMenu || onBackButtonClick ) && (\n\t\t\t\t\t<NavigationBackButton\n\t\t\t\t\t\tbackButtonLabel={ backButtonLabel }\n\t\t\t\t\t\tparentMenu={ parentMenu }\n\t\t\t\t\t\tonClick={ onBackButtonClick }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t{ title && (\n\t\t\t\t\t<NavigationMenuTitle\n\t\t\t\t\t\thasSearch={ hasSearch }\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\ttitleAction={ titleAction }\n\t\t\t\t\t/>\n\t\t\t\t) }\n\n\t\t\t\t<NavigableMenu>\n\t\t\t\t\t<ul aria-labelledby={ menuTitleId }>\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t{ search && ! isSearchDebouncing && (\n\t\t\t\t\t\t\t<NavigationSearchNoResultsFound search={ search } />\n\t\t\t\t\t\t) }\n\t\t\t\t\t</ul>\n\t\t\t\t</NavigableMenu>\n\t\t\t</MenuUI>\n\t\t</NavigationMenuContext.Provider>\n\t);\n}\n\nexport default NavigationMenu;\n"],"mappings":"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","ignoreList":[]}

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

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _withSpokenMessages = _interopRequireDefault(require("../../higher-order/with-spoken-messages"));
@@ -14,6 +13,7 @@ var _context2 = require("../context");
 var _constants = require("../constants");
 var _searchControl = _interopRequireDefault(require("../../search-control"));
 var _navigationStyles = require("../styles/navigation-styles");
+var _jsxRuntime = require("react/jsx-runtime");
 /**
  * WordPress dependencies
  */
@@ -73,17 +73,19 @@ function MenuTitleSearch({
   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?.toLowerCase()).trim();
-  return (0, _react.createElement)(_navigationStyles.MenuTitleSearchControlWrapper, null, (0, _react.createElement)(_searchControl.default, {
-    __nextHasNoMarginBottom: true,
-    className: "components-navigation__menu-search-input",
-    id: inputId,
-    onChange: value => onSearch?.(value),
-    onKeyDown: onKeyDown,
-    placeholder: placeholder,
-    onClose: onClose,
-    ref: inputRef,
-    value: search
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_navigationStyles.MenuTitleSearchControlWrapper, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_searchControl.default, {
+      __nextHasNoMarginBottom: true,
+      className: "components-navigation__menu-search-input",
+      id: inputId,
+      onChange: value => onSearch?.(value),
+      onKeyDown: onKeyDown,
+      placeholder: placeholder,
+      onClose: onClose,
+      ref: inputRef,
+      value: search
+    })
+  });
 }
 var _default = exports.default = (0, _withSpokenMessages.default)(MenuTitleSearch);
 //# sourceMappingURL=menu-title-search.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_withSpokenMessages","_interopRequireDefault","_context","_context2","_constants","_searchControl","_navigationStyles","MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","useNavigationContext","menu","useNavigationMenuContext","inputRef","useRef","useEffect","delayedFocus","setTimeout","current","focus","SEARCH_FOCUS_DELAY","clearTimeout","count","Object","values","filter","item","_isVisible","length","resultsFoundMessage","sprintf","_n","onClose","onKeyDown","event","code","defaultPrevented","preventDefault","inputId","placeholder","__","toLowerCase","trim","_react","createElement","MenuTitleSearchControlWrapper","default","__nextHasNoMarginBottom","className","id","onChange","value","ref","_default","exports","withSpokenMessages"],"sources":["@wordpress/components/src/navigation/menu/menu-title-search.tsx"],"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 { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleSearchProps } from '../types';\nimport SearchControl from '../../search-control';\nimport { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';\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<MenuTitleSearchControlWrapper>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\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\tvalue={ search }\n\t\t\t/>\n\t\t</MenuTitleSearchControlWrapper>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_i18n","_withSpokenMessages","_interopRequireDefault","_context","_context2","_constants","_searchControl","_navigationStyles","_jsxRuntime","MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","useNavigationContext","menu","useNavigationMenuContext","inputRef","useRef","useEffect","delayedFocus","setTimeout","current","focus","SEARCH_FOCUS_DELAY","clearTimeout","count","Object","values","filter","item","_isVisible","length","resultsFoundMessage","sprintf","_n","onClose","onKeyDown","event","code","defaultPrevented","preventDefault","inputId","placeholder","__","toLowerCase","trim","jsx","MenuTitleSearchControlWrapper","children","default","__nextHasNoMarginBottom","className","id","onChange","value","ref","_default","exports","withSpokenMessages"],"sources":["@wordpress/components/src/navigation/menu/menu-title-search.tsx"],"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 { SEARCH_FOCUS_DELAY } from '../constants';\n\nimport type { NavigationMenuTitleSearchProps } from '../types';\nimport SearchControl from '../../search-control';\nimport { MenuTitleSearchControlWrapper } from '../styles/navigation-styles';\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<MenuTitleSearchControlWrapper>\n\t\t\t<SearchControl\n\t\t\t\t__nextHasNoMarginBottom\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\tvalue={ search }\n\t\t\t/>\n\t\t</MenuTitleSearchControlWrapper>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"],"mappings":"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","ignoreList":[]}