@wordpress/components 25.8.3 → 25.9.0

package/build/navigation/item/index.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationItem = NavigationItem;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _icons = require("@wordpress/icons");
 var _i18n = require("@wordpress/i18n");
@@ -79,17 +79,17 @@ function NavigationItem(props) {
     'aria-current': isActive ? 'page' : undefined,
     ...restProps
   };
-  return (0, _element.createElement)(_base.default, {
+  return (0, _react.createElement)(_base.default, {
     ...baseProps,
     className: classes
-  }, children || (0, _element.createElement)(_navigationStyles.ItemUI, {
+  }, children || (0, _react.createElement)(_navigationStyles.ItemUI, {
     ...itemProps
-  }, icon && (0, _element.createElement)(_navigationStyles.ItemIconUI, null, (0, _element.createElement)(_icons.Icon, {
+  }, icon && (0, _react.createElement)(_navigationStyles.ItemIconUI, null, (0, _react.createElement)(_icons.Icon, {
     icon: icon
-  })), (0, _element.createElement)(_baseContent.default, {
+  })), (0, _react.createElement)(_baseContent.default, {
     title: title,
     badge: badge
-  }), navigateToMenu && (0, _element.createElement)(_icons.Icon, {
+  }), navigateToMenu && (0, _react.createElement)(_icons.Icon, {
     icon: navigationIcon
   })));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_classnames","_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","classnames","onItemClick","event","navigationIcon","isRTL","chevronLeft","chevronRight","baseProps","undefined","itemProps","as","Button","_element","createElement","default","ItemUI","ItemIconUI","Icon","_default","exports"],"sources":["@wordpress/components/src/navigation/item/index.tsx"],"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"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,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;AAEd,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,mBAAU,EAAEjB,SAAS,EAAE;IACtC,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,QAAA,CAAAC,aAAA,EAACpC,KAAA,CAAAqC,OAAkB;IAAA,GAAMP,SAAS;IAAGxB,SAAS,EAAGgB;EAAS,GACvDjB,QAAQ,IACT,IAAA8B,QAAA,CAAAC,aAAA,EAACtC,iBAAA,CAAAwC,MAAM;IAAA,GAAMN;EAAS,GACnBpB,IAAI,IACL,IAAAuB,QAAA,CAAAC,aAAA,EAACtC,iBAAA,CAAAyC,UAAU,QACV,IAAAJ,QAAA,CAAAC,aAAA,EAAC1C,MAAA,CAAA8C,IAAI;IAAC5B,IAAI,EAAGA;EAAM,CAAE,CACV,CACZ,EAED,IAAAuB,QAAA,CAAAC,aAAA,EAACrC,YAAA,CAAAsC,OAAyB;IACzB1B,KAAK,EAAGA,KAAO;IACfP,KAAK,EAAGA;EAAO,CACf,CAAC,EAEAK,cAAc,IAAI,IAAA0B,QAAA,CAAAC,aAAA,EAAC1C,MAAA,CAAA8C,IAAI;IAAC5B,IAAI,EAAGc;EAAgB,CAAE,CAC5C,CAEU,CAAC;AAEvB;AAAC,IAAAe,QAAA,GAEcvC,cAAc;AAAAwC,OAAA,CAAAL,OAAA,GAAAI,QAAA"}
+{"version":3,"names":["_classnames","_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","classnames","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 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"],"mappings":";;;;;;;;;AAGA,IAAAA,WAAA,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;AAEd,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,mBAAU,EAAEjB,SAAS,EAAE;IACtC,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,GAEcvC,cAAc;AAAAwC,OAAA,CAAAL,OAAA,GAAAI,QAAA"}

package/build/navigation/menu/index.js

@@ -6,8 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NavigationMenu = NavigationMenu;
 exports.default = void 0;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _classnames = _interopRequireDefault(require("classnames"));
+var _element = require("@wordpress/element");
 var _constants = require("../constants");
 var _context = require("./context");
 var _context2 = require("../context");
@@ -56,7 +57,7 @@ function NavigationMenu(props) {
 
   // Keep the children rendered to make sure invisible items are included in the navigation tree.
   if (activeMenu !== menu) {
-    return (0, _element.createElement)(_context.NavigationMenuContext.Provider, {
+    return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
       value: context
     }, children);
   }
@@ -65,23 +66,23 @@ function NavigationMenu(props) {
   const onSearch = isControlledSearch ? setControlledSearch : setUncontrolledSearch;
   const menuTitleId = `components-navigation__menu-title-${menu}`;
   const classes = (0, _classnames.default)('components-navigation__menu', className);
-  return (0, _element.createElement)(_context.NavigationMenuContext.Provider, {
+  return (0, _react.createElement)(_context.NavigationMenuContext.Provider, {
     value: context
-  }, (0, _element.createElement)(_navigationStyles.MenuUI, {
+  }, (0, _react.createElement)(_navigationStyles.MenuUI, {
     className: classes
-  }, (parentMenu || onBackButtonClick) && (0, _element.createElement)(_backButton.default, {
+  }, (parentMenu || onBackButtonClick) && (0, _react.createElement)(_backButton.default, {
     backButtonLabel: backButtonLabel,
     parentMenu: parentMenu,
     onClick: onBackButtonClick
-  }), title && (0, _element.createElement)(_menuTitle.default, {
+  }), title && (0, _react.createElement)(_menuTitle.default, {
     hasSearch: hasSearch,
     onSearch: onSearch,
     search: search,
     title: title,
     titleAction: titleAction
-  }), (0, _element.createElement)(_navigableContainer.NavigableMenu, null, (0, _element.createElement)("ul", {
+  }), (0, _react.createElement)(_navigableContainer.NavigableMenu, null, (0, _react.createElement)("ul", {
     "aria-labelledby": menuTitleId
-  }, children, search && !isSearchDebouncing && (0, _element.createElement)(_searchNoResultsFound.default, {
+  }, children, search && !isSearchDebouncing && (0, _react.createElement)(_searchNoResultsFound.default, {
     search: search
   })))));
 }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_classnames","_interopRequireDefault","_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","createElement","NavigationMenuContext","Provider","value","isControlledSearch","menuTitleId","classes","classnames","MenuUI","default","onClick","NavigableMenu","_default","exports"],"sources":["@wordpress/components/src/navigation/menu/index.tsx"],"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 { 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\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 = classnames( '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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"}
+{"version":3,"names":["_classnames","_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","classnames","MenuUI","default","onClick","NavigableMenu","_default","exports"],"sources":["@wordpress/components/src/navigation/menu/index.tsx"],"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 { 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\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 = classnames( '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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"}

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

@@ -5,6 +5,7 @@ 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"));
@@ -71,9 +72,9 @@ 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, _element.createElement)("div", {
+  return (0, _react.createElement)("div", {
     className: "components-navigation__menu-title-search"
-  }, (0, _element.createElement)(_navigationStyles.MenuTitleSearchUI, {
+  }, (0, _react.createElement)(_navigationStyles.MenuTitleSearchUI, {
     autoComplete: "off",
     className: "components-navigation__menu-search-input",
     id: inputId,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_withSpokenMessages","_interopRequireDefault","_context","_context2","_navigationStyles","_constants","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","createElement","className","MenuTitleSearchUI","autoComplete","id","onChange","value","ref","type","_default","withSpokenMessages","exports","default"],"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 { 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"],"mappings":"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"}
+{"version":3,"names":["_element","require","_i18n","_withSpokenMessages","_interopRequireDefault","_context","_context2","_navigationStyles","_constants","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","className","MenuTitleSearchUI","autoComplete","id","onChange","value","ref","type","_default","withSpokenMessages","exports","default"],"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 { 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"],"mappings":"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"}

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavigationMenuTitle;
+var _react = require("react");
 var _element = require("@wordpress/element");
 var _i18n = require("@wordpress/i18n");
 var _icons = require("@wordpress/icons");
@@ -49,28 +50,28 @@ function NavigationMenuTitle({
   const menuTitleId = `components-navigation__menu-title-${menu}`;
   /* translators: search button label for menu search box. %s: menu title */
   const searchButtonLabel = (0, _i18n.sprintf)((0, _i18n.__)('Search in %s'), title);
-  return (0, _element.createElement)(_navigationStyles.MenuTitleUI, {
+  return (0, _react.createElement)(_navigationStyles.MenuTitleUI, {
     className: "components-navigation__menu-title"
-  }, !isSearching && (0, _element.createElement)(_navigationStyles.GroupTitleUI, {
+  }, !isSearching && (0, _react.createElement)(_navigationStyles.GroupTitleUI, {
     as: "h2",
     className: "components-navigation__menu-title-heading",
     level: 3
-  }, (0, _element.createElement)("span", {
+  }, (0, _react.createElement)("span", {
     id: menuTitleId
-  }, title), (hasSearch || titleAction) && (0, _element.createElement)(_navigationStyles.MenuTitleActionsUI, null, titleAction, hasSearch && (0, _element.createElement)(_button.default, {
+  }, title), (hasSearch || titleAction) && (0, _react.createElement)(_navigationStyles.MenuTitleActionsUI, null, titleAction, hasSearch && (0, _react.createElement)(_button.default, {
     isSmall: true,
     variant: "tertiary",
     label: searchButtonLabel,
     onClick: () => setIsSearching(true),
     ref: searchButtonRef
-  }, (0, _element.createElement)(_icons.Icon, {
+  }, (0, _react.createElement)(_icons.Icon, {
     icon: _icons.search
-  })))), isSearching && (0, _element.createElement)("div", {
+  })))), isSearching && (0, _react.createElement)("div", {
     className: (0, _animate.getAnimateClassName)({
       type: 'slide-in',
       origin: 'left'
     })
-  }, (0, _element.createElement)(_menuTitleSearch.default, {
+  }, (0, _react.createElement)(_menuTitleSearch.default, {
     onCloseSearch: onCloseSearch,
     onSearch: onSearch,
     search: search,

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_i18n","_icons","_animate","_button","_interopRequireDefault","_menuTitleSearch","_navigationStyles","_context","_constants","NavigationMenuTitle","hasSearch","onSearch","search","title","titleAction","isSearching","setIsSearching","useState","menu","useNavigationMenuContext","searchButtonRef","useRef","onCloseSearch","setTimeout","current","focus","SEARCH_FOCUS_DELAY","menuTitleId","searchButtonLabel","sprintf","__","createElement","MenuTitleUI","className","GroupTitleUI","as","level","id","MenuTitleActionsUI","default","isSmall","variant","label","onClick","ref","Icon","icon","searchIcon","getAnimateClassName","type","origin"],"sources":["@wordpress/components/src/navigation/menu/menu-title.tsx"],"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"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,iBAAA,GAAAP,OAAA;AAKA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAnBA;AACA;AACA;;AAKA;AACA;AACA;;AAce,SAASU,mBAAmBA,CAAE;EAC5CC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,KAAK;EACLC;AACyB,CAAC,EAAG;EAC7B,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACzD,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,iCAAwB,EAAC,CAAC;EAC3C,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAiB,IAAK,CAAC;EAErD,IAAK,CAAER,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,MAAMS,aAAa,GAAGA,CAAA,KAAM;IAC3BN,cAAc,CAAE,KAAM,CAAC;;IAEvB;IACA;IACAO,UAAU,CAAE,MAAM;MACjBH,eAAe,CAACI,OAAO,EAAEC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAEC,6BAAmB,CAAC;EACxB,CAAC;EAED,MAAMC,WAAW,GAAI,qCAAqCT,IAAM,EAAC;EACjE;EACA,MAAMU,iBAAiB,GAAG,IAAAC,aAAO,EAAE,IAAAC,QAAE,EAAE,cAAe,CAAC,EAAEjB,KAAM,CAAC;EAEhE,OACC,IAAAf,QAAA,CAAAiC,aAAA,EAACzB,iBAAA,CAAA0B,WAAW;IAACC,SAAS,EAAC;EAAmC,GACvD,CAAElB,WAAW,IACd,IAAAjB,QAAA,CAAAiC,aAAA,EAACzB,iBAAA,CAAA4B,YAAY;IACZC,EAAE,EAAC,IAAI;IACPF,SAAS,EAAC,2CAA2C;IACrDG,KAAK,EAAG;EAAG,GAEX,IAAAtC,QAAA,CAAAiC,aAAA;IAAMM,EAAE,EAAGV;EAAa,GAAGd,KAAa,CAAC,EAEvC,CAAEH,SAAS,IAAII,WAAW,KAC3B,IAAAhB,QAAA,CAAAiC,aAAA,EAACzB,iBAAA,CAAAgC,kBAAkB,QAChBxB,WAAW,EAEXJ,SAAS,IACV,IAAAZ,QAAA,CAAAiC,aAAA,EAAC5B,OAAA,CAAAoC,OAAM;IACNC,OAAO;IACPC,OAAO,EAAC,UAAU;IAClBC,KAAK,EAAGd,iBAAmB;IAC3Be,OAAO,EAAGA,CAAA,KAAM3B,cAAc,CAAE,IAAK,CAAG;IACxC4B,GAAG,EAAGxB;EAAiB,GAEvB,IAAAtB,QAAA,CAAAiC,aAAA,EAAC9B,MAAA,CAAA4C,IAAI;IAACC,IAAI,EAAGC;EAAY,CAAE,CACpB,CAEU,CAER,CACd,EAEChC,WAAW,IACZ,IAAAjB,QAAA,CAAAiC,aAAA;IACCE,SAAS,EAAG,IAAAe,4BAAmB,EAAE;MAChCC,IAAI,EAAE,UAAU;MAChBC,MAAM,EAAE;IACT,CAAE;EAAG,GAEL,IAAApD,QAAA,CAAAiC,aAAA,EAAC1B,gBAAA,CAAAkC,OAAe;IACfjB,aAAa,EAAGA,aAAe;IAC/BX,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA;EAAO,CACf,CACG,CAEM,CAAC;AAEhB"}
+{"version":3,"names":["_element","require","_i18n","_icons","_animate","_button","_interopRequireDefault","_menuTitleSearch","_navigationStyles","_context","_constants","NavigationMenuTitle","hasSearch","onSearch","search","title","titleAction","isSearching","setIsSearching","useState","menu","useNavigationMenuContext","searchButtonRef","useRef","onCloseSearch","setTimeout","current","focus","SEARCH_FOCUS_DELAY","menuTitleId","searchButtonLabel","sprintf","__","_react","createElement","MenuTitleUI","className","GroupTitleUI","as","level","id","MenuTitleActionsUI","default","isSmall","variant","label","onClick","ref","Icon","icon","searchIcon","getAnimateClassName","type","origin"],"sources":["@wordpress/components/src/navigation/menu/menu-title.tsx"],"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"],"mappings":";;;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AAKA,IAAAG,QAAA,GAAAH,OAAA;AACA,IAAAI,OAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,gBAAA,GAAAD,sBAAA,CAAAL,OAAA;AACA,IAAAO,iBAAA,GAAAP,OAAA;AAKA,IAAAQ,QAAA,GAAAR,OAAA;AACA,IAAAS,UAAA,GAAAT,OAAA;AAnBA;AACA;AACA;;AAKA;AACA;AACA;;AAce,SAASU,mBAAmBA,CAAE;EAC5CC,SAAS;EACTC,QAAQ;EACRC,MAAM;EACNC,KAAK;EACLC;AACyB,CAAC,EAAG;EAC7B,MAAM,CAAEC,WAAW,EAAEC,cAAc,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EACzD,MAAM;IAAEC;EAAK,CAAC,GAAG,IAAAC,iCAAwB,EAAC,CAAC;EAC3C,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAiB,IAAK,CAAC;EAErD,IAAK,CAAER,KAAK,EAAG;IACd,OAAO,IAAI;EACZ;EAEA,MAAMS,aAAa,GAAGA,CAAA,KAAM;IAC3BN,cAAc,CAAE,KAAM,CAAC;;IAEvB;IACA;IACAO,UAAU,CAAE,MAAM;MACjBH,eAAe,CAACI,OAAO,EAAEC,KAAK,CAAC,CAAC;IACjC,CAAC,EAAEC,6BAAmB,CAAC;EACxB,CAAC;EAED,MAAMC,WAAW,GAAI,qCAAqCT,IAAM,EAAC;EACjE;EACA,MAAMU,iBAAiB,GAAG,IAAAC,aAAO,EAAE,IAAAC,QAAE,EAAE,cAAe,CAAC,EAAEjB,KAAM,CAAC;EAEhE,OACC,IAAAkB,MAAA,CAAAC,aAAA,EAAC1B,iBAAA,CAAA2B,WAAW;IAACC,SAAS,EAAC;EAAmC,GACvD,CAAEnB,WAAW,IACd,IAAAgB,MAAA,CAAAC,aAAA,EAAC1B,iBAAA,CAAA6B,YAAY;IACZC,EAAE,EAAC,IAAI;IACPF,SAAS,EAAC,2CAA2C;IACrDG,KAAK,EAAG;EAAG,GAEX,IAAAN,MAAA,CAAAC,aAAA;IAAMM,EAAE,EAAGX;EAAa,GAAGd,KAAa,CAAC,EAEvC,CAAEH,SAAS,IAAII,WAAW,KAC3B,IAAAiB,MAAA,CAAAC,aAAA,EAAC1B,iBAAA,CAAAiC,kBAAkB,QAChBzB,WAAW,EAEXJ,SAAS,IACV,IAAAqB,MAAA,CAAAC,aAAA,EAAC7B,OAAA,CAAAqC,OAAM;IACNC,OAAO;IACPC,OAAO,EAAC,UAAU;IAClBC,KAAK,EAAGf,iBAAmB;IAC3BgB,OAAO,EAAGA,CAAA,KAAM5B,cAAc,CAAE,IAAK,CAAG;IACxC6B,GAAG,EAAGzB;EAAiB,GAEvB,IAAAW,MAAA,CAAAC,aAAA,EAAC/B,MAAA,CAAA6C,IAAI;IAACC,IAAI,EAAGC;EAAY,CAAE,CACpB,CAEU,CAER,CACd,EAECjC,WAAW,IACZ,IAAAgB,MAAA,CAAAC,aAAA;IACCE,SAAS,EAAG,IAAAe,4BAAmB,EAAE;MAChCC,IAAI,EAAE,UAAU;MAChBC,MAAM,EAAE;IACT,CAAE;EAAG,GAEL,IAAApB,MAAA,CAAAC,aAAA,EAAC3B,gBAAA,CAAAmC,OAAe;IACflB,aAAa,EAAGA,aAAe;IAC/BX,QAAQ,EAAGA,QAAU;IACrBC,MAAM,EAAGA,MAAQ;IACjBC,KAAK,EAAGA;EAAO,CACf,CACG,CAEM,CAAC;AAEhB"}

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = NavigationSearchNoResultsFound;
-var _element = require("@wordpress/element");
+var _react = require("react");
 var _i18n = require("@wordpress/i18n");
 var _context = require("../context");
 var _navigationStyles = require("../styles/navigation-styles");
@@ -28,6 +28,6 @@ function NavigationSearchNoResultsFound({
   if (!search || !!resultsCount) {
     return null;
   }
-  return (0, _element.createElement)(_navigationStyles.ItemBaseUI, null, (0, _element.createElement)(_navigationStyles.ItemUI, null, (0, _i18n.__)('No results found.'), " "));
+  return (0, _react.createElement)(_navigationStyles.ItemBaseUI, null, (0, _react.createElement)(_navigationStyles.ItemUI, null, (0, _i18n.__)('No results found.'), " "));
 }
 //# sourceMappingURL=search-no-results-found.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["_i18n","require","_context","_navigationStyles","NavigationSearchNoResultsFound","search","navigationTree","items","useNavigationContext","resultsCount","Object","values","filter","item","_isVisible","length","_element","createElement","ItemBaseUI","ItemUI","__"],"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.tsx"],"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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASG,8BAA8BA,CAAE;EACvDC;AACoC,CAAC,EAAG;EACxC,MAAM;IACLC,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAE1B,MAAMC,YAAY,GAAGC,MAAM,CAACC,MAAM,CAAEJ,KAAM,CAAC,CAACK,MAAM,CAC/CC,IAAI,IAAMA,IAAI,CAACC,UAClB,CAAC,CAACC,MAAM;EAER,IAAK,CAAEV,MAAM,IAAI,CAAC,CAAEI,YAAY,EAAG;IAClC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAO,QAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAe,UAAU,QACV,IAAAF,QAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAgB,MAAM,QAAG,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAE,GAAS,CACnC,CAAC;AAEf"}
+{"version":3,"names":["_i18n","require","_context","_navigationStyles","NavigationSearchNoResultsFound","search","navigationTree","items","useNavigationContext","resultsCount","Object","values","filter","item","_isVisible","length","_react","createElement","ItemBaseUI","ItemUI","__"],"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.tsx"],"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"],"mappings":";;;;;;;AAGA,IAAAA,KAAA,GAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,iBAAA,GAAAF,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAMe,SAASG,8BAA8BA,CAAE;EACvDC;AACoC,CAAC,EAAG;EACxC,MAAM;IACLC,cAAc,EAAE;MAAEC;IAAM;EACzB,CAAC,GAAG,IAAAC,6BAAoB,EAAC,CAAC;EAE1B,MAAMC,YAAY,GAAGC,MAAM,CAACC,MAAM,CAAEJ,KAAM,CAAC,CAACK,MAAM,CAC/CC,IAAI,IAAMA,IAAI,CAACC,UAClB,CAAC,CAACC,MAAM;EAER,IAAK,CAAEV,MAAM,IAAI,CAAC,CAAEI,YAAY,EAAG;IAClC,OAAO,IAAI;EACZ;EAEA,OACC,IAAAO,MAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAe,UAAU,QACV,IAAAF,MAAA,CAAAC,aAAA,EAACd,iBAAA,CAAAgB,MAAM,QAAG,IAAAC,QAAE,EAAE,mBAAoB,CAAC,EAAE,GAAS,CACnC,CAAC;AAEf"}