@wordpress/components 19.13.0 → 19.16.0

package/build-module/modal/index.js

@@ -10,11 +10,11 @@ import classnames from 'classnames';
  * WordPress dependencies
  */
 
-import { createPortal, useEffect, useRef, forwardRef } from '@wordpress/element';
+import { createPortal, useCallback, useEffect, useRef, useState, forwardRef } from '@wordpress/element';
 import { useInstanceId, useFocusReturn, useFocusOnMount, __experimentalUseFocusOutside as useFocusOutside, useConstrainedTabbing, useMergeRefs } from '@wordpress/compose';
 import { ESCAPE } from '@wordpress/keycodes';
 import { __ } from '@wordpress/i18n';
-import { closeSmall } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
@@ -59,6 +59,7 @@ function Modal(props, forwardedRef) {
   const constrainedTabbingRef = useConstrainedTabbing();
   const focusReturnRef = useFocusReturn();
   const focusOutsideProps = useFocusOutside(onRequestClose);
+  const [hasScrolledContent, setHasScrolledContent] = useState(false);
   useEffect(() => {
     openModalCount++;
 
@@ -87,6 +88,17 @@ function Modal(props, forwardedRef) {
     }
   }
 
+  const onContentContainerScroll = useCallback(e => {
+    var _e$target$scrollTop, _e$target;
+
+    const scrollY = (_e$target$scrollTop = e === null || e === void 0 ? void 0 : (_e$target = e.target) === null || _e$target === void 0 ? void 0 : _e$target.scrollTop) !== null && _e$target$scrollTop !== void 0 ? _e$target$scrollTop : -1;
+
+    if (!hasScrolledContent && scrollY > 0) {
+      setHasScrolledContent(true);
+    } else if (hasScrolledContent && scrollY <= 0) {
+      setHasScrolledContent(false);
+    }
+  }, [hasScrolledContent]);
   return createPortal( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
   createElement("div", {
     ref: useMergeRefs([ref, forwardedRef]),
@@ -109,9 +121,11 @@ function Modal(props, forwardedRef) {
     onKeyDown: onKeyDown
   }), createElement("div", {
     className: classnames('components-modal__content', {
-      'hide-header': __experimentalHideHeader
+      'hide-header': __experimentalHideHeader,
+      'has-scrolled-content': hasScrolledContent
     }),
-    role: "document"
+    role: "document",
+    onScroll: onContentContainerScroll
   }, !__experimentalHideHeader && createElement("div", {
     className: "components-modal__header"
   }, createElement("div", {
@@ -124,7 +138,7 @@ function Modal(props, forwardedRef) {
     className: "components-modal__header-heading"
   }, title)), isDismissible && createElement(Button, {
     onClick: onRequestClose,
-    icon: closeSmall,
+    icon: close,
     label: closeButtonLabel || __('Close dialog')
   })), children)))), document.body);
 }

package/build-module/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/modal/index.js"],"names":["classnames","createPortal","useEffect","useRef","forwardRef","useInstanceId","useFocusReturn","useFocusOnMount","__experimentalUseFocusOutside","useFocusOutside","useConstrainedTabbing","useMergeRefs","ESCAPE","__","closeSmall","ariaHelper","Button","StyleProvider","openModalCount","Modal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","__experimentalHideHeader","ref","instanceId","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","focusOutsideProps","hideApp","current","document","body","classList","add","remove","showApp","handleEscapeKeyDown","event","keyCode","defaultPrevented","preventDefault"],"mappings":"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","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseEffect,\n\tuseRef,\n\tforwardRef,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { __ } from '@wordpress/i18n';\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction Modal( props, forwardedRef ) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: null,\n\t\t\tdescribedby: null,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\tfunction handleEscapeKeyDown( event ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? null : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ closeSmall }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel ||\n\t\t\t\t\t\t\t\t\t\t\t__( 'Close dialog' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\nexport default forwardRef( Modal );\n"]}
+{"version":3,"sources":["@wordpress/components/src/modal/index.js"],"names":["classnames","createPortal","useCallback","useEffect","useRef","useState","forwardRef","useInstanceId","useFocusReturn","useFocusOnMount","__experimentalUseFocusOutside","useFocusOutside","useConstrainedTabbing","useMergeRefs","ESCAPE","__","close","ariaHelper","Button","StyleProvider","openModalCount","Modal","props","forwardedRef","bodyOpenClassName","role","title","focusOnMount","shouldCloseOnEsc","shouldCloseOnClickOutside","isDismissible","aria","labelledby","describedby","onRequestClose","icon","closeButtonLabel","children","style","overlayClassName","className","contentLabel","onKeyDown","isFullScreen","__experimentalHideHeader","ref","instanceId","headingId","focusOnMountRef","constrainedTabbingRef","focusReturnRef","focusOutsideProps","hasScrolledContent","setHasScrolledContent","hideApp","current","document","body","classList","add","remove","showApp","handleEscapeKeyDown","event","keyCode","defaultPrevented","preventDefault","onContentContainerScroll","e","scrollY","target","scrollTop"],"mappings":";;AAAA;;AAEA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SACCC,YADD,EAECC,WAFD,EAGCC,SAHD,EAICC,MAJD,EAKCC,QALD,EAMCC,UAND,QAOO,oBAPP;AAQA,SACCC,aADD,EAECC,cAFD,EAGCC,eAHD,EAICC,6BAA6B,IAAIC,eAJlC,EAKCC,qBALD,EAMCC,YAND,QAOO,oBAPP;AAQA,SAASC,MAAT,QAAuB,qBAAvB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,QAAsB,kBAAtB;AAEA;AACA;AACA;;AACA,OAAO,KAAKC,UAAZ,MAA4B,eAA5B;AACA,OAAOC,MAAP,MAAmB,WAAnB;AACA,OAAOC,aAAP,MAA0B,mBAA1B,C,CAEA;;AACA,IAAIC,cAAc,GAAG,CAArB;;AAEA,SAASC,KAAT,CAAgBC,KAAhB,EAAuBC,YAAvB,EAAsC;AACrC,QAAM;AACLC,IAAAA,iBAAiB,GAAG,YADf;AAELC,IAAAA,IAAI,GAAG,QAFF;AAGLC,IAAAA,KAAK,GAAG,IAHH;AAILC,IAAAA,YAAY,GAAG,IAJV;AAKLC,IAAAA,gBAAgB,GAAG,IALd;AAMLC,IAAAA,yBAAyB,GAAG,IANvB;AAOLC,IAAAA,aAAa,GAAG,IAPX;;AAQL;AACAC,IAAAA,IAAI,GAAG;AACNC,MAAAA,UAAU,EAAE,IADN;AAENC,MAAAA,WAAW,EAAE;AAFP,KATF;AAaLC,IAAAA,cAbK;AAcLC,IAAAA,IAdK;AAeLC,IAAAA,gBAfK;AAgBLC,IAAAA,QAhBK;AAiBLC,IAAAA,KAjBK;AAkBLC,IAAAA,gBAlBK;AAmBLC,IAAAA,SAnBK;AAoBLC,IAAAA,YApBK;AAqBLC,IAAAA,SArBK;AAsBLC,IAAAA,YAAY,GAAG,KAtBV;AAuBLC,IAAAA,wBAAwB,GAAG;AAvBtB,MAwBFtB,KAxBJ;AA0BA,QAAMuB,GAAG,GAAGzC,MAAM,EAAlB;AACA,QAAM0C,UAAU,GAAGvC,aAAa,CAAEc,KAAF,CAAhC;AACA,QAAM0B,SAAS,GAAGrB,KAAK,GACnB,2BAA2BoB,UAAY,EADpB,GAEpBf,IAAI,CAACC,UAFR;AAGA,QAAMgB,eAAe,GAAGvC,eAAe,CAAEkB,YAAF,CAAvC;AACA,QAAMsB,qBAAqB,GAAGrC,qBAAqB,EAAnD;AACA,QAAMsC,cAAc,GAAG1C,cAAc,EAArC;AACA,QAAM2C,iBAAiB,GAAGxC,eAAe,CAAEuB,cAAF,CAAzC;AAEA,QAAM,CAAEkB,kBAAF,EAAsBC,qBAAtB,IAAgDhD,QAAQ,CAAE,KAAF,CAA9D;AAEAF,EAAAA,SAAS,CAAE,MAAM;AAChBiB,IAAAA,cAAc;;AAEd,QAAKA,cAAc,KAAK,CAAxB,EAA4B;AAC3BH,MAAAA,UAAU,CAACqC,OAAX,CAAoBT,GAAG,CAACU,OAAxB;AACAC,MAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBC,GAAxB,CAA6BnC,iBAA7B;AACA;;AAED,WAAO,MAAM;AACZJ,MAAAA,cAAc;;AAEd,UAAKA,cAAc,KAAK,CAAxB,EAA4B;AAC3BoC,QAAAA,QAAQ,CAACC,IAAT,CAAcC,SAAd,CAAwBE,MAAxB,CAAgCpC,iBAAhC;AACAP,QAAAA,UAAU,CAAC4C,OAAX;AACA;AACD,KAPD;AAQA,GAhBQ,EAgBN,CAAErC,iBAAF,CAhBM,CAAT;;AAkBA,WAASsC,mBAAT,CAA8BC,KAA9B,EAAsC;AACrC,QACCnC,gBAAgB,IAChBmC,KAAK,CAACC,OAAN,KAAkBlD,MADlB,IAEA,CAAEiD,KAAK,CAACE,gBAHT,EAIE;AACDF,MAAAA,KAAK,CAACG,cAAN;;AACA,UAAKhC,cAAL,EAAsB;AACrBA,QAAAA,cAAc,CAAE6B,KAAF,CAAd;AACA;AACD;AACD;;AAED,QAAMI,wBAAwB,GAAGjE,WAAW,CACzCkE,CAAF,IAAS;AAAA;;AACR,UAAMC,OAAO,0BAAGD,CAAH,aAAGA,CAAH,oCAAGA,CAAC,CAAEE,MAAN,8CAAG,UAAWC,SAAd,qEAA2B,CAAC,CAAzC;;AAEA,QAAK,CAAEnB,kBAAF,IAAwBiB,OAAO,GAAG,CAAvC,EAA2C;AAC1ChB,MAAAA,qBAAqB,CAAE,IAAF,CAArB;AACA,KAFD,MAEO,IAAKD,kBAAkB,IAAIiB,OAAO,IAAI,CAAtC,EAA0C;AAChDhB,MAAAA,qBAAqB,CAAE,KAAF,CAArB;AACA;AACD,GAT0C,EAU3C,CAAED,kBAAF,CAV2C,CAA5C;AAaA,SAAOnD,YAAY,EAClB;AACA;AACC,IAAA,GAAG,EAAGY,YAAY,CAAE,CAAEgC,GAAF,EAAOtB,YAAP,CAAF,CADnB;AAEC,IAAA,SAAS,EAAGvB,UAAU,CACrB,kCADqB,EAErBuC,gBAFqB,CAFvB;AAMC,IAAA,SAAS,EAAGuB;AANb,KAQC,cAAC,aAAD;AAAe,IAAA,QAAQ,EAAGN;AAA1B,KACC;AACC,IAAA,SAAS,EAAGxD,UAAU,CACrB,yBADqB,EAErBwC,SAFqB,EAGrB;AACC,wBAAkBG;AADnB,KAHqB,CADvB;AAQC,IAAA,KAAK,EAAGL,KART;AASC,IAAA,GAAG,EAAGzB,YAAY,CAAE,CACnBoC,qBADmB,EAEnBC,cAFmB,EAGnBF,eAHmB,CAAF,CATnB;AAcC,IAAA,IAAI,EAAGvB,IAdR;AAeC,kBAAagB,YAfd;AAgBC,uBAAkBA,YAAY,GAAG,IAAH,GAAUM,SAhBzC;AAiBC,wBAAmBhB,IAAI,CAACE,WAjBzB;AAkBC,IAAA,QAAQ,EAAC;AAlBV,KAmBQJ,yBAAyB,GAC7BsB,iBAD6B,GAE7B,EArBJ;AAsBC,IAAA,SAAS,EAAGT;AAtBb,MAwBC;AACC,IAAA,SAAS,EAAG1C,UAAU,CAAE,2BAAF,EAA+B;AACpD,qBAAe4C,wBADqC;AAEpD,8BAAwBQ;AAF4B,KAA/B,CADvB;AAKC,IAAA,IAAI,EAAC,UALN;AAMC,IAAA,QAAQ,EAAGe;AANZ,KAQG,CAAEvB,wBAAF,IACD;AAAK,IAAA,SAAS,EAAC;AAAf,KACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGT,IAAI,IACL;AACC,IAAA,SAAS,EAAC,kCADX;AAEC;AAFD,KAIGA,IAJH,CAFF,EASGT,KAAK,IACN;AACC,IAAA,EAAE,EAAGqB,SADN;AAEC,IAAA,SAAS,EAAC;AAFX,KAIGrB,KAJH,CAVF,CADD,EAmBGI,aAAa,IACd,cAAC,MAAD;AACC,IAAA,OAAO,EAAGI,cADX;AAEC,IAAA,IAAI,EAAGlB,KAFR;AAGC,IAAA,KAAK,EACJoB,gBAAgB,IAChBrB,EAAE,CAAE,cAAF;AALJ,IApBF,CATF,EAwCGsB,QAxCH,CAxBD,CADD,CARD,CAFkB,EAgFlBmB,QAAQ,CAACC,IAhFS,CAAnB;AAkFA;;AAED,eAAenD,UAAU,CAAEe,KAAF,CAAzB","sourcesContent":["// @ts-nocheck\n\n/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreatePortal,\n\tuseCallback,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n\tforwardRef,\n} from '@wordpress/element';\nimport {\n\tuseInstanceId,\n\tuseFocusReturn,\n\tuseFocusOnMount,\n\t__experimentalUseFocusOutside as useFocusOutside,\n\tuseConstrainedTabbing,\n\tuseMergeRefs,\n} from '@wordpress/compose';\nimport { ESCAPE } from '@wordpress/keycodes';\nimport { __ } from '@wordpress/i18n';\nimport { close } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport * as ariaHelper from './aria-helper';\nimport Button from '../button';\nimport StyleProvider from '../style-provider';\n\n// Used to count the number of open modals.\nlet openModalCount = 0;\n\nfunction Modal( props, forwardedRef ) {\n\tconst {\n\t\tbodyOpenClassName = 'modal-open',\n\t\trole = 'dialog',\n\t\ttitle = null,\n\t\tfocusOnMount = true,\n\t\tshouldCloseOnEsc = true,\n\t\tshouldCloseOnClickOutside = true,\n\t\tisDismissible = true,\n\t\t/* Accessibility. */\n\t\taria = {\n\t\t\tlabelledby: null,\n\t\t\tdescribedby: null,\n\t\t},\n\t\tonRequestClose,\n\t\ticon,\n\t\tcloseButtonLabel,\n\t\tchildren,\n\t\tstyle,\n\t\toverlayClassName,\n\t\tclassName,\n\t\tcontentLabel,\n\t\tonKeyDown,\n\t\tisFullScreen = false,\n\t\t__experimentalHideHeader = false,\n\t} = props;\n\n\tconst ref = useRef();\n\tconst instanceId = useInstanceId( Modal );\n\tconst headingId = title\n\t\t? `components-modal-header-${ instanceId }`\n\t\t: aria.labelledby;\n\tconst focusOnMountRef = useFocusOnMount( focusOnMount );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( onRequestClose );\n\n\tconst [ hasScrolledContent, setHasScrolledContent ] = useState( false );\n\n\tuseEffect( () => {\n\t\topenModalCount++;\n\n\t\tif ( openModalCount === 1 ) {\n\t\t\tariaHelper.hideApp( ref.current );\n\t\t\tdocument.body.classList.add( bodyOpenClassName );\n\t\t}\n\n\t\treturn () => {\n\t\t\topenModalCount--;\n\n\t\t\tif ( openModalCount === 0 ) {\n\t\t\t\tdocument.body.classList.remove( bodyOpenClassName );\n\t\t\t\tariaHelper.showApp();\n\t\t\t}\n\t\t};\n\t}, [ bodyOpenClassName ] );\n\n\tfunction handleEscapeKeyDown( event ) {\n\t\tif (\n\t\t\tshouldCloseOnEsc &&\n\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t! event.defaultPrevented\n\t\t) {\n\t\t\tevent.preventDefault();\n\t\t\tif ( onRequestClose ) {\n\t\t\t\tonRequestClose( event );\n\t\t\t}\n\t\t}\n\t}\n\n\tconst onContentContainerScroll = useCallback(\n\t\t( e ) => {\n\t\t\tconst scrollY = e?.target?.scrollTop ?? -1;\n\n\t\t\tif ( ! hasScrolledContent && scrollY > 0 ) {\n\t\t\t\tsetHasScrolledContent( true );\n\t\t\t} else if ( hasScrolledContent && scrollY <= 0 ) {\n\t\t\t\tsetHasScrolledContent( false );\n\t\t\t}\n\t\t},\n\t\t[ hasScrolledContent ]\n\t);\n\n\treturn createPortal(\n\t\t// eslint-disable-next-line jsx-a11y/no-static-element-interactions\n\t\t<div\n\t\t\tref={ useMergeRefs( [ ref, forwardedRef ] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\t'components-modal__screen-overlay',\n\t\t\t\toverlayClassName\n\t\t\t) }\n\t\t\tonKeyDown={ handleEscapeKeyDown }\n\t\t>\n\t\t\t<StyleProvider document={ document }>\n\t\t\t\t<div\n\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t'components-modal__frame',\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\t'is-full-screen': isFullScreen,\n\t\t\t\t\t\t}\n\t\t\t\t\t) }\n\t\t\t\t\tstyle={ style }\n\t\t\t\t\tref={ useMergeRefs( [\n\t\t\t\t\t\tconstrainedTabbingRef,\n\t\t\t\t\t\tfocusReturnRef,\n\t\t\t\t\t\tfocusOnMountRef,\n\t\t\t\t\t] ) }\n\t\t\t\t\trole={ role }\n\t\t\t\t\taria-label={ contentLabel }\n\t\t\t\t\taria-labelledby={ contentLabel ? null : headingId }\n\t\t\t\t\taria-describedby={ aria.describedby }\n\t\t\t\t\ttabIndex=\"-1\"\n\t\t\t\t\t{ ...( shouldCloseOnClickOutside\n\t\t\t\t\t\t? focusOutsideProps\n\t\t\t\t\t\t: {} ) }\n\t\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\t>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames( 'components-modal__content', {\n\t\t\t\t\t\t\t'hide-header': __experimentalHideHeader,\n\t\t\t\t\t\t\t'has-scrolled-content': hasScrolledContent,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\trole=\"document\"\n\t\t\t\t\t\tonScroll={ onContentContainerScroll }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ ! __experimentalHideHeader && (\n\t\t\t\t\t\t\t<div className=\"components-modal__header\">\n\t\t\t\t\t\t\t\t<div className=\"components-modal__header-heading-container\">\n\t\t\t\t\t\t\t\t\t{ icon && (\n\t\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__icon-container\"\n\t\t\t\t\t\t\t\t\t\t\taria-hidden\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ icon }\n\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t{ title && (\n\t\t\t\t\t\t\t\t\t\t<h1\n\t\t\t\t\t\t\t\t\t\t\tid={ headingId }\n\t\t\t\t\t\t\t\t\t\t\tclassName=\"components-modal__header-heading\"\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t\t\t\t</h1>\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t\t{ isDismissible && (\n\t\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\t\tonClick={ onRequestClose }\n\t\t\t\t\t\t\t\t\t\ticon={ close }\n\t\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\t\tcloseButtonLabel ||\n\t\t\t\t\t\t\t\t\t\t\t__( 'Close dialog' )\n\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t{ children }\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</StyleProvider>\n\t\t</div>,\n\t\tdocument.body\n\t);\n}\n\nexport default forwardRef( Modal );\n"]}

package/build-module/navigation/group/index.js

@@ -4,7 +4,6 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import { find, uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -17,13 +16,14 @@ import { useState } from '@wordpress/element';
 import { NavigationGroupContext } from './context';
 import { GroupTitleUI } from '../styles/navigation-styles';
 import { useNavigationContext } from '../context';
+let uniqueId = 0;
 export default function NavigationGroup(_ref) {
   let {
     children,
     className,
     title
   } = _ref;
-  const [groupId] = useState(uniqueId('group-'));
+  const [groupId] = useState(`group-${++uniqueId}`);
   const {
     navigationTree: {
       items
@@ -33,10 +33,7 @@ export default function NavigationGroup(_ref) {
     group: groupId
   }; // Keep the children rendered to make sure invisible items are included in the navigation tree.
 
-  if (!find(items, {
-    group: groupId,
-    _isVisible: true
-  })) {
+  if (!Object.values(items).some(item => item.group === groupId && item._isVisible)) {
     return createElement(NavigationGroupContext.Provider, {
       value: context
     }, children);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/group/index.js"],"names":["classnames","find","uniqueId","useState","NavigationGroupContext","GroupTitleUI","useNavigationContext","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","_isVisible","groupTitleId","classes"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,IAAT,EAAeC,QAAf,QAA+B,QAA/B;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SAASC,sBAAT,QAAuC,WAAvC;AACA,SAASC,YAAT,QAA6B,6BAA7B;AACA,SAASC,oBAAT,QAAqC,YAArC;AAEA,eAAe,SAASC,eAAT,OAA2D;AAAA,MAAjC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA;AAAvB,GAAiC;AACzE,QAAM,CAAEC,OAAF,IAAcR,QAAQ,CAAED,QAAQ,CAAE,QAAF,CAAV,CAA5B;AACA,QAAM;AACLU,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEFP,oBAAoB,EAFxB;AAIA,QAAMQ,OAAO,GAAG;AAAEC,IAAAA,KAAK,EAAEJ;AAAT,GAAhB,CANyE,CAQzE;;AACA,MAAK,CAAEV,IAAI,CAAEY,KAAF,EAAS;AAAEE,IAAAA,KAAK,EAAEJ,OAAT;AAAkBK,IAAAA,UAAU,EAAE;AAA9B,GAAT,CAAX,EAA6D;AAC5D,WACC,cAAC,sBAAD,CAAwB,QAAxB;AAAiC,MAAA,KAAK,EAAGF;AAAzC,OACGN,QADH,CADD;AAKA;;AAED,QAAMS,YAAY,GAAI,sCAAsCN,OAAS,EAArE;AACA,QAAMO,OAAO,GAAGlB,UAAU,CAAE,8BAAF,EAAkCS,SAAlC,CAA1B;AAEA,SACC,cAAC,sBAAD,CAAwB,QAAxB;AAAiC,IAAA,KAAK,EAAGK;AAAzC,KACC;AAAI,IAAA,SAAS,EAAGI;AAAhB,KACGR,KAAK,IACN,cAAC,YAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGO,YAFN;AAGC,IAAA,KAAK,EAAG;AAHT,KAKGP,KALH,CAFF,EAUC;AAAI,uBAAkBO,YAAtB;AAAqC,IAAA,IAAI,EAAC;AAA1C,KACGT,QADH,CAVD,CADD,CADD;AAkBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { find, uniqueId } from 'lodash';\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\nexport default function NavigationGroup( { children, className, title } ) {\n\tconst [ groupId ] = useState( uniqueId( 'group-' ) );\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 ( ! find( items, { group: groupId, _isVisible: true } ) ) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/group/index.js"],"names":["classnames","useState","NavigationGroupContext","GroupTitleUI","useNavigationContext","uniqueId","NavigationGroup","children","className","title","groupId","navigationTree","items","context","group","Object","values","some","item","_isVisible","groupTitleId","classes"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SAASC,sBAAT,QAAuC,WAAvC;AACA,SAASC,YAAT,QAA6B,6BAA7B;AACA,SAASC,oBAAT,QAAqC,YAArC;AAEA,IAAIC,QAAQ,GAAG,CAAf;AAEA,eAAe,SAASC,eAAT,OAA2D;AAAA,MAAjC;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA;AAAvB,GAAiC;AACzE,QAAM,CAAEC,OAAF,IAAcT,QAAQ,CAAG,SAAS,EAAEI,QAAU,EAAxB,CAA5B;AACA,QAAM;AACLM,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEFR,oBAAoB,EAFxB;AAIA,QAAMS,OAAO,GAAG;AAAEC,IAAAA,KAAK,EAAEJ;AAAT,GAAhB,CANyE,CAQzE;;AACA,MACC,CAAEK,MAAM,CAACC,MAAP,CAAeJ,KAAf,EAAuBK,IAAvB,CACCC,IAAF,IAAYA,IAAI,CAACJ,KAAL,KAAeJ,OAAf,IAA0BQ,IAAI,CAACC,UAD1C,CADH,EAIE;AACD,WACC,cAAC,sBAAD,CAAwB,QAAxB;AAAiC,MAAA,KAAK,EAAGN;AAAzC,OACGN,QADH,CADD;AAKA;;AAED,QAAMa,YAAY,GAAI,sCAAsCV,OAAS,EAArE;AACA,QAAMW,OAAO,GAAGrB,UAAU,CAAE,8BAAF,EAAkCQ,SAAlC,CAA1B;AAEA,SACC,cAAC,sBAAD,CAAwB,QAAxB;AAAiC,IAAA,KAAK,EAAGK;AAAzC,KACC;AAAI,IAAA,SAAS,EAAGQ;AAAhB,KACGZ,KAAK,IACN,cAAC,YAAD;AACC,IAAA,SAAS,EAAC,oCADX;AAEC,IAAA,EAAE,EAAGW,YAFN;AAGC,IAAA,KAAK,EAAG;AAHT,KAKGX,KALH,CAFF,EAUC;AAAI,uBAAkBW,YAAtB;AAAqC,IAAA,IAAI,EAAC;AAA1C,KACGb,QADH,CAVD,CADD,CADD;AAkBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { NavigationGroupContext } from './context';\nimport { GroupTitleUI } from '../styles/navigation-styles';\nimport { useNavigationContext } from '../context';\n\nlet uniqueId = 0;\n\nexport default function NavigationGroup( { children, className, title } ) {\n\tconst [ groupId ] = useState( `group-${ ++uniqueId }` );\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst context = { group: groupId };\n\n\t// Keep the children rendered to make sure invisible items are included in the navigation tree.\n\tif (\n\t\t! Object.values( items ).some(\n\t\t\t( item ) => item.group === groupId && item._isVisible\n\t\t)\n\t) {\n\t\treturn (\n\t\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t\t{ children }\n\t\t\t</NavigationGroupContext.Provider>\n\t\t);\n\t}\n\n\tconst groupTitleId = `components-navigation__group-title-${ groupId }`;\n\tconst classes = classnames( 'components-navigation__group', className );\n\n\treturn (\n\t\t<NavigationGroupContext.Provider value={ context }>\n\t\t\t<li className={ classes }>\n\t\t\t\t{ title && (\n\t\t\t\t\t<GroupTitleUI\n\t\t\t\t\t\tclassName=\"components-navigation__group-title\"\n\t\t\t\t\t\tid={ groupTitleId }\n\t\t\t\t\t\tlevel={ 3 }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ title }\n\t\t\t\t\t</GroupTitleUI>\n\t\t\t\t) }\n\t\t\t\t<ul aria-labelledby={ groupTitleId } role=\"group\">\n\t\t\t\t\t{ children }\n\t\t\t\t</ul>\n\t\t\t</li>\n\t\t</NavigationGroupContext.Provider>\n\t);\n}\n"]}

package/build-module/navigation/index.js

@@ -57,7 +57,10 @@ export default function Navigation(_ref) {
   useEffect(() => {
     if (activeMenu !== menu) {
       setActiveMenu(activeMenu);
-    }
+    } // Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.
+    // See https://github.com/WordPress/gutenberg/pull/41612 for context.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
   }, [activeMenu]);
   const context = {
     activeItem,

package/build-module/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/index.js"],"names":["classnames","useEffect","useRef","useState","isRTL","getAnimateClassName","ROOT_MENU","NavigationContext","NavigationUI","useCreateNavigationTree","noop","Navigation","activeItem","activeMenu","children","className","onActivateMenu","menu","setMenu","slideOrigin","setSlideOrigin","navigationTree","defaultSlideOrigin","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","current","context","classes","animateClassName","type","origin"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,oBAA5C;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,YAApC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,SAASC,YAAT,QAA6B,4BAA7B;AACA,SAASC,uBAAT,QAAwC,8BAAxC;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,UAAT,OAMX;AAAA,MANgC;AACnCC,IAAAA,UADmC;AAEnCC,IAAAA,UAAU,GAAGP,SAFsB;AAGnCQ,IAAAA,QAHmC;AAInCC,IAAAA,SAJmC;AAKnCC,IAAAA,cAAc,GAAGN;AALkB,GAMhC;AACH,QAAM,CAAEO,IAAF,EAAQC,OAAR,IAAoBf,QAAQ,CAAEU,UAAF,CAAlC;AACA,QAAM,CAAEM,WAAF,EAAeC,cAAf,IAAkCjB,QAAQ,EAAhD;AACA,QAAMkB,cAAc,GAAGZ,uBAAuB,EAA9C;AACA,QAAMa,kBAAkB,GAAGlB,KAAK,KAAK,OAAL,GAAe,MAA/C;;AAEA,QAAMmB,aAAa,GAAG,UAAEC,MAAF,EAAkD;AAAA,QAAxCC,aAAwC,uEAAxBH,kBAAwB;;AACvE,QAAK,CAAED,cAAc,CAACK,OAAf,CAAwBF,MAAxB,CAAP,EAA0C;AACzC;AACA;;AAEDJ,IAAAA,cAAc,CAAEK,aAAF,CAAd;AACAP,IAAAA,OAAO,CAAEM,MAAF,CAAP;AACAR,IAAAA,cAAc,CAAEQ,MAAF,CAAd;AACA,GARD,CANG,CAgBH;;;AACA,QAAMG,SAAS,GAAGzB,MAAM,CAAE,KAAF,CAAxB;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAE0B,SAAS,CAACC,OAAjB,EAA2B;AAC1BD,MAAAA,SAAS,CAACC,OAAV,GAAoB,IAApB;AACA;AACD,GAJQ,EAIN,EAJM,CAAT;AAMA3B,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKY,UAAU,KAAKI,IAApB,EAA2B;AAC1BM,MAAAA,aAAa,CAAEV,UAAF,CAAb;AACA;AACD,GAJQ,EAIN,CAAEA,UAAF,CAJM,CAAT;AAMA,QAAMgB,OAAO,GAAG;AACfjB,IAAAA,UADe;AAEfC,IAAAA,UAAU,EAAEI,IAFG;AAGfM,IAAAA,aAHe;AAIfF,IAAAA;AAJe,GAAhB;AAOA,QAAMS,OAAO,GAAG9B,UAAU,CAAE,uBAAF,EAA2Be,SAA3B,CAA1B;AACA,QAAMgB,gBAAgB,GAAG1B,mBAAmB,CAAE;AAC7C2B,IAAAA,IAAI,EAAE,UADuC;AAE7CC,IAAAA,MAAM,EAAEd;AAFqC,GAAF,CAA5C;AAKA,SACC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGW;AAA1B,KACC;AACC,IAAA,GAAG,EAAGb,IADP;AAEC,IAAA,SAAS,EAAGjB,UAAU,CAAE;AACvB,OAAE+B,gBAAF,GAAsBJ,SAAS,CAACC,OAAV,IAAqBT;AADpB,KAAF;AAFvB,KAMC,cAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGU;AAApC,KACGf,QADH,CAND,CADD,CADD;AAcA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../animate';\nimport { ROOT_MENU } from './constants';\nimport { NavigationContext } from './context';\nimport { NavigationUI } from './styles/navigation-styles';\nimport { useCreateNavigationTree } from './use-create-navigation-tree';\n\nconst noop = () => {};\n\nexport default function Navigation( {\n\tactiveItem,\n\tactiveMenu = ROOT_MENU,\n\tchildren,\n\tclassName,\n\tonActivateMenu = noop,\n} ) {\n\tconst [ menu, setMenu ] = useState( activeMenu );\n\tconst [ slideOrigin, setSlideOrigin ] = useState();\n\tconst navigationTree = useCreateNavigationTree();\n\tconst defaultSlideOrigin = isRTL() ? 'right' : 'left';\n\n\tconst setActiveMenu = ( menuId, slideInOrigin = defaultSlideOrigin ) => {\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}, [ activeMenu ] );\n\n\tconst context = {\n\t\tactiveItem,\n\t\tactiveMenu: menu,\n\t\tsetActiveMenu,\n\t\tnavigationTree,\n\t};\n\n\tconst classes = classnames( 'components-navigation', className );\n\tconst animateClassName = getAnimateClassName( {\n\t\ttype: 'slide-in',\n\t\torigin: slideOrigin,\n\t} );\n\n\treturn (\n\t\t<NavigationUI className={ classes }>\n\t\t\t<div\n\t\t\t\tkey={ menu }\n\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t[ animateClassName ]: isMounted.current && slideOrigin,\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"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/index.js"],"names":["classnames","useEffect","useRef","useState","isRTL","getAnimateClassName","ROOT_MENU","NavigationContext","NavigationUI","useCreateNavigationTree","noop","Navigation","activeItem","activeMenu","children","className","onActivateMenu","menu","setMenu","slideOrigin","setSlideOrigin","navigationTree","defaultSlideOrigin","setActiveMenu","menuId","slideInOrigin","getMenu","isMounted","current","context","classes","animateClassName","type","origin"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,SAAT,EAAoBC,MAApB,EAA4BC,QAA5B,QAA4C,oBAA5C;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,mBAAT,QAAoC,YAApC;AACA,SAASC,SAAT,QAA0B,aAA1B;AACA,SAASC,iBAAT,QAAkC,WAAlC;AACA,SAASC,YAAT,QAA6B,4BAA7B;AACA,SAASC,uBAAT,QAAwC,8BAAxC;;AAEA,MAAMC,IAAI,GAAG,MAAM,CAAE,CAArB;;AAEA,eAAe,SAASC,UAAT,OAMX;AAAA,MANgC;AACnCC,IAAAA,UADmC;AAEnCC,IAAAA,UAAU,GAAGP,SAFsB;AAGnCQ,IAAAA,QAHmC;AAInCC,IAAAA,SAJmC;AAKnCC,IAAAA,cAAc,GAAGN;AALkB,GAMhC;AACH,QAAM,CAAEO,IAAF,EAAQC,OAAR,IAAoBf,QAAQ,CAAEU,UAAF,CAAlC;AACA,QAAM,CAAEM,WAAF,EAAeC,cAAf,IAAkCjB,QAAQ,EAAhD;AACA,QAAMkB,cAAc,GAAGZ,uBAAuB,EAA9C;AACA,QAAMa,kBAAkB,GAAGlB,KAAK,KAAK,OAAL,GAAe,MAA/C;;AAEA,QAAMmB,aAAa,GAAG,UAAEC,MAAF,EAAkD;AAAA,QAAxCC,aAAwC,uEAAxBH,kBAAwB;;AACvE,QAAK,CAAED,cAAc,CAACK,OAAf,CAAwBF,MAAxB,CAAP,EAA0C;AACzC;AACA;;AAEDJ,IAAAA,cAAc,CAAEK,aAAF,CAAd;AACAP,IAAAA,OAAO,CAAEM,MAAF,CAAP;AACAR,IAAAA,cAAc,CAAEQ,MAAF,CAAd;AACA,GARD,CANG,CAgBH;;;AACA,QAAMG,SAAS,GAAGzB,MAAM,CAAE,KAAF,CAAxB;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAE0B,SAAS,CAACC,OAAjB,EAA2B;AAC1BD,MAAAA,SAAS,CAACC,OAAV,GAAoB,IAApB;AACA;AACD,GAJQ,EAIN,EAJM,CAAT;AAMA3B,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAKY,UAAU,KAAKI,IAApB,EAA2B;AAC1BM,MAAAA,aAAa,CAAEV,UAAF,CAAb;AACA,KAHe,CAIhB;AACA;AACA;;AACA,GAPQ,EAON,CAAEA,UAAF,CAPM,CAAT;AASA,QAAMgB,OAAO,GAAG;AACfjB,IAAAA,UADe;AAEfC,IAAAA,UAAU,EAAEI,IAFG;AAGfM,IAAAA,aAHe;AAIfF,IAAAA;AAJe,GAAhB;AAOA,QAAMS,OAAO,GAAG9B,UAAU,CAAE,uBAAF,EAA2Be,SAA3B,CAA1B;AACA,QAAMgB,gBAAgB,GAAG1B,mBAAmB,CAAE;AAC7C2B,IAAAA,IAAI,EAAE,UADuC;AAE7CC,IAAAA,MAAM,EAAEd;AAFqC,GAAF,CAA5C;AAKA,SACC,cAAC,YAAD;AAAc,IAAA,SAAS,EAAGW;AAA1B,KACC;AACC,IAAA,GAAG,EAAGb,IADP;AAEC,IAAA,SAAS,EAAGjB,UAAU,CAAE;AACvB,OAAE+B,gBAAF,GAAsBJ,SAAS,CAACC,OAAV,IAAqBT;AADpB,KAAF;AAFvB,KAMC,cAAC,iBAAD,CAAmB,QAAnB;AAA4B,IAAA,KAAK,EAAGU;AAApC,KACGf,QADH,CAND,CADD,CADD;AAcA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { isRTL } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getAnimateClassName } from '../animate';\nimport { ROOT_MENU } from './constants';\nimport { NavigationContext } from './context';\nimport { NavigationUI } from './styles/navigation-styles';\nimport { useCreateNavigationTree } from './use-create-navigation-tree';\n\nconst noop = () => {};\n\nexport default function Navigation( {\n\tactiveItem,\n\tactiveMenu = ROOT_MENU,\n\tchildren,\n\tclassName,\n\tonActivateMenu = noop,\n} ) {\n\tconst [ menu, setMenu ] = useState( activeMenu );\n\tconst [ slideOrigin, setSlideOrigin ] = useState();\n\tconst navigationTree = useCreateNavigationTree();\n\tconst defaultSlideOrigin = isRTL() ? 'right' : 'left';\n\n\tconst setActiveMenu = ( menuId, slideInOrigin = defaultSlideOrigin ) => {\n\t\tif ( ! navigationTree.getMenu( menuId ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tsetSlideOrigin( slideInOrigin );\n\t\tsetMenu( menuId );\n\t\tonActivateMenu( menuId );\n\t};\n\n\t// Used to prevent the sliding animation on mount\n\tconst isMounted = useRef( false );\n\tuseEffect( () => {\n\t\tif ( ! isMounted.current ) {\n\t\t\tisMounted.current = true;\n\t\t}\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( activeMenu !== menu ) {\n\t\t\tsetActiveMenu( activeMenu );\n\t\t}\n\t\t// Ignore exhaustive-deps here, as it would require either a larger refactor or some questionable workarounds.\n\t\t// See https://github.com/WordPress/gutenberg/pull/41612 for context.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ activeMenu ] );\n\n\tconst context = {\n\t\tactiveItem,\n\t\tactiveMenu: menu,\n\t\tsetActiveMenu,\n\t\tnavigationTree,\n\t};\n\n\tconst classes = classnames( 'components-navigation', className );\n\tconst animateClassName = getAnimateClassName( {\n\t\ttype: 'slide-in',\n\t\torigin: slideOrigin,\n\t} );\n\n\treturn (\n\t\t<NavigationUI className={ classes }>\n\t\t\t<div\n\t\t\t\tkey={ menu }\n\t\t\t\tclassName={ classnames( {\n\t\t\t\t\t[ animateClassName ]: isMounted.current && slideOrigin,\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"]}

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

@@ -5,7 +5,6 @@ import { createElement } from "@wordpress/element";
  * External dependencies
  */
 import classnames from 'classnames';
-import { uniqueId } from 'lodash';
 /**
  * WordPress dependencies
  */
@@ -18,15 +17,19 @@ import { useState } from '@wordpress/element';
 import { useNavigationContext } from '../context';
 import { useNavigationTreeItem } from './use-navigation-tree-item';
 import { ItemBaseUI } from '../styles/navigation-styles';
+let uniqueId = 0;
 export default function NavigationItemBase(props) {
   var _navigationTree$getIt;
 
+  // Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.
   const {
     children,
     className,
+    title,
+    href,
     ...restProps
   } = props;
-  const [itemId] = useState(uniqueId('item-'));
+  const [itemId] = useState(`item-${++uniqueId}`);
   useNavigationTreeItem(itemId, props);
   const {
     navigationTree

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/base.js"],"names":["classnames","uniqueId","useState","useNavigationContext","useNavigationTreeItem","ItemBaseUI","NavigationItemBase","props","children","className","restProps","itemId","navigationTree","getItem","_isVisible","classes"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AACA,SAASC,QAAT,QAAyB,QAAzB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,qBAAT,QAAsC,4BAAtC;AACA,SAASC,UAAT,QAA2B,6BAA3B;AAEA,eAAe,SAASC,kBAAT,CAA6BC,KAA7B,EAAqC;AAAA;;AACnD,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuB,OAAGC;AAA1B,MAAwCH,KAA9C;AAEA,QAAM,CAAEI,MAAF,IAAaT,QAAQ,CAAED,QAAQ,CAAE,OAAF,CAAV,CAA3B;AAEAG,EAAAA,qBAAqB,CAAEO,MAAF,EAAUJ,KAAV,CAArB;AACA,QAAM;AAAEK,IAAAA;AAAF,MAAqBT,oBAAoB,EAA/C;;AAEA,MAAK,2BAAES,cAAc,CAACC,OAAf,CAAwBF,MAAxB,CAAF,kDAAE,sBAAkCG,UAApC,CAAL,EAAsD;AACrD,WAAO,IAAP;AACA;;AAED,QAAMC,OAAO,GAAGf,UAAU,CAAE,6BAAF,EAAiCS,SAAjC,CAA1B;AAEA,SACC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGM;AAAxB,KAAuCL,SAAvC,GACGF,QADH,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\nimport { uniqueId } from 'lodash';\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\nexport default function NavigationItemBase( props ) {\n\tconst { children, className, ...restProps } = props;\n\n\tconst [ itemId ] = useState( uniqueId( 'item-' ) );\n\n\tuseNavigationTreeItem( itemId, props );\n\tconst { navigationTree } = useNavigationContext();\n\n\tif ( ! navigationTree.getItem( itemId )?._isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( 'components-navigation__item', className );\n\n\treturn (\n\t\t<ItemBaseUI className={ classes } { ...restProps }>\n\t\t\t{ children }\n\t\t</ItemBaseUI>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/base.js"],"names":["classnames","useState","useNavigationContext","useNavigationTreeItem","ItemBaseUI","uniqueId","NavigationItemBase","props","children","className","title","href","restProps","itemId","navigationTree","getItem","_isVisible","classes"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,qBAAT,QAAsC,4BAAtC;AACA,SAASC,UAAT,QAA2B,6BAA3B;AAEA,IAAIC,QAAQ,GAAG,CAAf;AAEA,eAAe,SAASC,kBAAT,CAA6BC,KAA7B,EAAqC;AAAA;;AACnD;AACA,QAAM;AAAEC,IAAAA,QAAF;AAAYC,IAAAA,SAAZ;AAAuBC,IAAAA,KAAvB;AAA8BC,IAAAA,IAA9B;AAAoC,OAAGC;AAAvC,MAAqDL,KAA3D;AAEA,QAAM,CAAEM,MAAF,IAAaZ,QAAQ,CAAG,QAAQ,EAAEI,QAAU,EAAvB,CAA3B;AAEAF,EAAAA,qBAAqB,CAAEU,MAAF,EAAUN,KAAV,CAArB;AACA,QAAM;AAAEO,IAAAA;AAAF,MAAqBZ,oBAAoB,EAA/C;;AAEA,MAAK,2BAAEY,cAAc,CAACC,OAAf,CAAwBF,MAAxB,CAAF,kDAAE,sBAAkCG,UAApC,CAAL,EAAsD;AACrD,WAAO,IAAP;AACA;;AAED,QAAMC,OAAO,GAAGjB,UAAU,CAAE,6BAAF,EAAiCS,SAAjC,CAA1B;AAEA,SACC,cAAC,UAAD;AAAY,IAAA,SAAS,EAAGQ;AAAxB,KAAuCL,SAAvC,GACGJ,QADH,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationTreeItem } from './use-navigation-tree-item';\nimport { ItemBaseUI } from '../styles/navigation-styles';\n\nlet uniqueId = 0;\n\nexport default function NavigationItemBase( props ) {\n\t// Also avoid to pass the `title` and `href` props to the ItemBaseUI styled component.\n\tconst { children, className, title, href, ...restProps } = props;\n\n\tconst [ itemId ] = useState( `item-${ ++uniqueId }` );\n\n\tuseNavigationTreeItem( itemId, props );\n\tconst { navigationTree } = useNavigationContext();\n\n\tif ( ! navigationTree.getItem( itemId )?._isVisible ) {\n\t\treturn null;\n\t}\n\n\tconst classes = classnames( 'components-navigation__item', className );\n\n\treturn (\n\t\t<ItemBaseUI className={ classes } { ...restProps }>\n\t\t\t{ children }\n\t\t</ItemBaseUI>\n\t);\n}\n"]}

package/build-module/navigation/item/use-navigation-tree-item.js

@@ -35,7 +35,8 @@ export const useNavigationTreeItem = (itemId, props) => {
     });
     return () => {
       removeItem(itemId);
-    };
+    }; // Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [activeMenu, search]);
 };
 //# sourceMappingURL=use-navigation-tree-item.js.map

package/build-module/navigation/item/use-navigation-tree-item.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/item/use-navigation-tree-item.js"],"names":["useEffect","useNavigationContext","useNavigationGroupContext","useNavigationMenuContext","normalizedSearch","useNavigationTreeItem","itemId","props","activeMenu","navigationTree","addItem","removeItem","group","menu","search","isMenuActive","isItemVisible","title","_isVisible"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,yBAAT,QAA0C,kBAA1C;AACA,SAASC,wBAAT,QAAyC,iBAAzC;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAEA,OAAO,MAAMC,qBAAqB,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACzD,QAAM;AACLC,IAAAA,UADK;AAELC,IAAAA,cAAc,EAAE;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX;AAFX,MAGFV,oBAAoB,EAHxB;AAIA,QAAM;AAAEW,IAAAA;AAAF,MAAYV,yBAAyB,EAA3C;AACA,QAAM;AAAEW,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAmBX,wBAAwB,EAAjD;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMe,YAAY,GAAGP,UAAU,KAAKK,IAApC;AACA,UAAMG,aAAa,GAClB,CAAEF,MAAF,IAAYV,gBAAgB,CAAEG,KAAK,CAACU,KAAR,EAAeH,MAAf,CAD7B;AAGAJ,IAAAA,OAAO,CAAEJ,MAAF,EAAU,EAChB,GAAGC,KADa;AAEhBK,MAAAA,KAFgB;AAGhBC,MAAAA,IAHgB;AAIhBK,MAAAA,UAAU,EAAEH,YAAY,IAAIC;AAJZ,KAAV,CAAP;AAOA,WAAO,MAAM;AACZL,MAAAA,UAAU,CAAEL,MAAF,CAAV;AACA,KAFD;AAGA,GAfQ,EAeN,CAAEE,UAAF,EAAcM,MAAd,CAfM,CAAT;AAgBA,CAxBM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationGroupContext } from '../group/context';\nimport { useNavigationMenuContext } from '../menu/context';\nimport { normalizedSearch } from '../utils';\n\nexport const useNavigationTreeItem = ( itemId, props ) => {\n\tconst {\n\t\tactiveMenu,\n\t\tnavigationTree: { addItem, removeItem },\n\t} = useNavigationContext();\n\tconst { group } = useNavigationGroupContext();\n\tconst { menu, search } = useNavigationMenuContext();\n\n\tuseEffect( () => {\n\t\tconst isMenuActive = activeMenu === menu;\n\t\tconst isItemVisible =\n\t\t\t! search || normalizedSearch( props.title, search );\n\n\t\taddItem( itemId, {\n\t\t\t...props,\n\t\t\tgroup,\n\t\t\tmenu,\n\t\t\t_isVisible: isMenuActive && isItemVisible,\n\t\t} );\n\n\t\treturn () => {\n\t\t\tremoveItem( itemId );\n\t\t};\n\t}, [ activeMenu, search ] );\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/item/use-navigation-tree-item.js"],"names":["useEffect","useNavigationContext","useNavigationGroupContext","useNavigationMenuContext","normalizedSearch","useNavigationTreeItem","itemId","props","activeMenu","navigationTree","addItem","removeItem","group","menu","search","isMenuActive","isItemVisible","title","_isVisible"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAT,QAA0B,oBAA1B;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,yBAAT,QAA0C,kBAA1C;AACA,SAASC,wBAAT,QAAyC,iBAAzC;AACA,SAASC,gBAAT,QAAiC,UAAjC;AAEA,OAAO,MAAMC,qBAAqB,GAAG,CAAEC,MAAF,EAAUC,KAAV,KAAqB;AACzD,QAAM;AACLC,IAAAA,UADK;AAELC,IAAAA,cAAc,EAAE;AAAEC,MAAAA,OAAF;AAAWC,MAAAA;AAAX;AAFX,MAGFV,oBAAoB,EAHxB;AAIA,QAAM;AAAEW,IAAAA;AAAF,MAAYV,yBAAyB,EAA3C;AACA,QAAM;AAAEW,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAmBX,wBAAwB,EAAjD;AAEAH,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMe,YAAY,GAAGP,UAAU,KAAKK,IAApC;AACA,UAAMG,aAAa,GAClB,CAAEF,MAAF,IAAYV,gBAAgB,CAAEG,KAAK,CAACU,KAAR,EAAeH,MAAf,CAD7B;AAGAJ,IAAAA,OAAO,CAAEJ,MAAF,EAAU,EAChB,GAAGC,KADa;AAEhBK,MAAAA,KAFgB;AAGhBC,MAAAA,IAHgB;AAIhBK,MAAAA,UAAU,EAAEH,YAAY,IAAIC;AAJZ,KAAV,CAAP;AAOA,WAAO,MAAM;AACZL,MAAAA,UAAU,CAAEL,MAAF,CAAV;AACA,KAFD,CAZgB,CAehB;AACA;AACA,GAjBQ,EAiBN,CAAEE,UAAF,EAAcM,MAAd,CAjBM,CAAT;AAkBA,CA1BM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { useNavigationGroupContext } from '../group/context';\nimport { useNavigationMenuContext } from '../menu/context';\nimport { normalizedSearch } from '../utils';\n\nexport const useNavigationTreeItem = ( itemId, props ) => {\n\tconst {\n\t\tactiveMenu,\n\t\tnavigationTree: { addItem, removeItem },\n\t} = useNavigationContext();\n\tconst { group } = useNavigationGroupContext();\n\tconst { menu, search } = useNavigationMenuContext();\n\n\tuseEffect( () => {\n\t\tconst isMenuActive = activeMenu === menu;\n\t\tconst isItemVisible =\n\t\t\t! search || normalizedSearch( props.title, search );\n\n\t\taddItem( itemId, {\n\t\t\t...props,\n\t\t\tgroup,\n\t\t\tmenu,\n\t\t\t_isVisible: isMenuActive && isItemVisible,\n\t\t} );\n\n\t\treturn () => {\n\t\t\tremoveItem( itemId );\n\t\t};\n\t\t// Ignore exhaustive-deps rule for now. See https://github.com/WordPress/gutenberg/pull/41639\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ activeMenu, search ] );\n};\n"]}

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

@@ -1,13 +1,8 @@
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
 /**
  * WordPress dependencies
  */
-
 import { useEffect, useRef } from '@wordpress/element';
 import { __, _n, sprintf } from '@wordpress/i18n';
 import { ESCAPE } from '@wordpress/keycodes';
@@ -53,7 +48,7 @@ function MenuTitleSearch(_ref) {
       return;
     }
 
-    const count = filter(items, '_isVisible').length;
+    const count = Object.values(items).filter(item => item._isVisible).length;
     const resultsFoundMessage = sprintf(
     /* translators: %d: number of results. */
     _n('%d result found.', '%d results found.', count), count);

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title-search.js"],"names":["filter","useEffect","useRef","__","_n","sprintf","ESCAPE","withSpokenMessages","useNavigationMenuContext","useNavigationContext","MenuTitleSearchUI","SEARCH_FOCUS_DELAY","MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","menu","inputRef","delayedFocus","setTimeout","current","focus","clearTimeout","count","length","resultsFoundMessage","onClose","onKeyDown","event","keyCode","defaultPrevented","preventDefault","inputId","placeholder","toLowerCase","trim","value"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { filter } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { ESCAPE } from '@wordpress/keycodes';\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\nfunction MenuTitleSearch( {\n\tdebouncedSpeak,\n\tonCloseSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n} ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\tconst { menu } = useNavigationMenuContext();\n\tconst inputRef = useRef();\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 = filter( items, '_isVisible' ).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}, [ items, search ] );\n\n\tconst onClose = () => {\n\t\tonSearch( '' );\n\t\tonCloseSearch();\n\t};\n\n\tfunction onKeyDown( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\tconst inputId = `components-navigation__menu-title-search-${ menu }`;\n\tconst placeholder = sprintf(\n\t\t/* translators: placeholder for menu search box. %s: menu title */\n\t\t__( 'Search %s' ),\n\t\ttitle?.toLowerCase()\n\t).trim();\n\n\treturn (\n\t\t<div className=\"components-navigation__menu-title-search\">\n\t\t\t<MenuTitleSearchUI\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tclassName=\"components-navigation__menu-search-input\"\n\t\t\t\tid={ inputId }\n\t\t\t\tonChange={ ( value ) => onSearch( value ) }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tonClose={ onClose }\n\t\t\t\tref={ inputRef }\n\t\t\t\ttype=\"search\"\n\t\t\t\tvalue={ search }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/menu/menu-title-search.js"],"names":["useEffect","useRef","__","_n","sprintf","ESCAPE","withSpokenMessages","useNavigationMenuContext","useNavigationContext","MenuTitleSearchUI","SEARCH_FOCUS_DELAY","MenuTitleSearch","debouncedSpeak","onCloseSearch","onSearch","search","title","navigationTree","items","menu","inputRef","delayedFocus","setTimeout","current","focus","clearTimeout","count","Object","values","filter","item","_isVisible","length","resultsFoundMessage","onClose","onKeyDown","event","keyCode","defaultPrevented","preventDefault","inputId","placeholder","toLowerCase","trim","value"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,MAApB,QAAkC,oBAAlC;AACA,SAASC,EAAT,EAAaC,EAAb,EAAiBC,OAAjB,QAAgC,iBAAhC;AACA,SAASC,MAAT,QAAuB,qBAAvB;AAEA;AACA;AACA;;AACA,OAAOC,kBAAP,MAA+B,yCAA/B;AACA,SAASC,wBAAT,QAAyC,WAAzC;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,iBAAT,QAAkC,6BAAlC;AACA,SAASC,kBAAT,QAAmC,cAAnC;;AAEA,SAASC,eAAT,OAMI;AAAA,MANsB;AACzBC,IAAAA,cADyB;AAEzBC,IAAAA,aAFyB;AAGzBC,IAAAA,QAHyB;AAIzBC,IAAAA,MAJyB;AAKzBC,IAAAA;AALyB,GAMtB;AACH,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEFV,oBAAoB,EAFxB;AAGA,QAAM;AAAEW,IAAAA;AAAF,MAAWZ,wBAAwB,EAAzC;AACA,QAAMa,QAAQ,GAAGnB,MAAM,EAAvB,CALG,CAOH;AACA;;AACAD,EAAAA,SAAS,CAAE,MAAM;AAChB,UAAMqB,YAAY,GAAGC,UAAU,CAAE,MAAM;AACtCF,MAAAA,QAAQ,CAACG,OAAT,CAAiBC,KAAjB;AACA,KAF8B,EAE5Bd,kBAF4B,CAA/B;AAIA,WAAO,MAAM;AACZe,MAAAA,YAAY,CAAEJ,YAAF,CAAZ;AACA,KAFD;AAGA,GARQ,EAQN,EARM,CAAT;AAUArB,EAAAA,SAAS,CAAE,MAAM;AAChB,QAAK,CAAEe,MAAP,EAAgB;AACf;AACA;;AAED,UAAMW,KAAK,GAAGC,MAAM,CAACC,MAAP,CAAeV,KAAf,EAAuBW,MAAvB,CACXC,IAAF,IAAYA,IAAI,CAACC,UADJ,EAEZC,MAFF;AAGA,UAAMC,mBAAmB,GAAG7B,OAAO;AAClC;AACAD,IAAAA,EAAE,CAAE,kBAAF,EAAsB,mBAAtB,EAA2CuB,KAA3C,CAFgC,EAGlCA,KAHkC,CAAnC;AAKAd,IAAAA,cAAc,CAAEqB,mBAAF,CAAd;AACA,GAdQ,EAcN,CAAEf,KAAF,EAASH,MAAT,CAdM,CAAT;;AAgBA,QAAMmB,OAAO,GAAG,MAAM;AACrBpB,IAAAA,QAAQ,CAAE,EAAF,CAAR;AACAD,IAAAA,aAAa;AACb,GAHD;;AAKA,WAASsB,SAAT,CAAoBC,KAApB,EAA4B;AAC3B,QAAKA,KAAK,CAACC,OAAN,KAAkBhC,MAAlB,IAA4B,CAAE+B,KAAK,CAACE,gBAAzC,EAA4D;AAC3DF,MAAAA,KAAK,CAACG,cAAN;AACAL,MAAAA,OAAO;AACP;AACD;;AAED,QAAMM,OAAO,GAAI,4CAA4CrB,IAAM,EAAnE;AACA,QAAMsB,WAAW,GAAGrC,OAAO;AAC1B;AACAF,EAAAA,EAAE,CAAE,WAAF,CAFwB,EAG1Bc,KAH0B,aAG1BA,KAH0B,uBAG1BA,KAAK,CAAE0B,WAAP,EAH0B,CAAP,CAIlBC,IAJkB,EAApB;AAMA,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,iBAAD;AACC,IAAA,YAAY,EAAC,KADd;AAEC,IAAA,SAAS,EAAC,0CAFX;AAGC,IAAA,EAAE,EAAGH,OAHN;AAIC,IAAA,QAAQ,EAAKI,KAAF,IAAa9B,QAAQ,CAAE8B,KAAF,CAJjC;AAKC,IAAA,SAAS,EAAGT,SALb;AAMC,IAAA,WAAW,EAAGM,WANf;AAOC,IAAA,OAAO,EAAGP,OAPX;AAQC,IAAA,GAAG,EAAGd,QARP;AASC,IAAA,IAAI,EAAC,QATN;AAUC,IAAA,KAAK,EAAGL;AAVT,IADD,CADD;AAgBA;;AAED,eAAeT,kBAAkB,CAAEK,eAAF,CAAjC","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { __, _n, sprintf } from '@wordpress/i18n';\nimport { ESCAPE } from '@wordpress/keycodes';\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\nfunction MenuTitleSearch( {\n\tdebouncedSpeak,\n\tonCloseSearch,\n\tonSearch,\n\tsearch,\n\ttitle,\n} ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\tconst { menu } = useNavigationMenuContext();\n\tconst inputRef = useRef();\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}, [ items, search ] );\n\n\tconst onClose = () => {\n\t\tonSearch( '' );\n\t\tonCloseSearch();\n\t};\n\n\tfunction onKeyDown( event ) {\n\t\tif ( event.keyCode === ESCAPE && ! event.defaultPrevented ) {\n\t\t\tevent.preventDefault();\n\t\t\tonClose();\n\t\t}\n\t}\n\n\tconst inputId = `components-navigation__menu-title-search-${ menu }`;\n\tconst placeholder = sprintf(\n\t\t/* translators: placeholder for menu search box. %s: menu title */\n\t\t__( 'Search %s' ),\n\t\ttitle?.toLowerCase()\n\t).trim();\n\n\treturn (\n\t\t<div className=\"components-navigation__menu-title-search\">\n\t\t\t<MenuTitleSearchUI\n\t\t\t\tautoComplete=\"off\"\n\t\t\t\tclassName=\"components-navigation__menu-search-input\"\n\t\t\t\tid={ inputId }\n\t\t\t\tonChange={ ( value ) => onSearch( value ) }\n\t\t\t\tonKeyDown={ onKeyDown }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tonClose={ onClose }\n\t\t\t\tref={ inputRef }\n\t\t\t\ttype=\"search\"\n\t\t\t\tvalue={ search }\n\t\t\t/>\n\t\t</div>\n\t);\n}\n\nexport default withSpokenMessages( MenuTitleSearch );\n"]}

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

@@ -1,13 +1,8 @@
 import { createElement } from "@wordpress/element";
 
-/**
- * External dependencies
- */
-import { filter } from 'lodash';
 /**
  * WordPress dependencies
  */
-
 import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
@@ -24,7 +19,7 @@ export default function NavigationSearchNoResultsFound(_ref) {
       items
     }
   } = useNavigationContext();
-  const resultsCount = filter(items, '_isVisible').length;
+  const resultsCount = Object.values(items).filter(item => item._isVisible).length;
 
   if (!search || !!resultsCount) {
     return null;

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.js"],"names":["filter","__","useNavigationContext","ItemBaseUI","ItemUI","NavigationSearchNoResultsFound","search","navigationTree","items","resultsCount","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,QAAvB;AAEA;AACA;AACA;;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,UAAT,EAAqBC,MAArB,QAAmC,6BAAnC;AAEA,eAAe,SAASC,8BAAT,OAAsD;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AACpE,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEFN,oBAAoB,EAFxB;AAIA,QAAMO,YAAY,GAAGT,MAAM,CAAEQ,KAAF,EAAS,YAAT,CAAN,CAA8BE,MAAnD;;AAEA,MAAK,CAAEJ,MAAF,IAAY,CAAC,CAAEG,YAApB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,SACC,cAAC,UAAD,QACC,cAAC,MAAD,QAAUR,EAAE,CAAE,mBAAF,CAAZ,MADD,CADD;AAKA","sourcesContent":["/**\n * External dependencies\n */\nimport { filter } from 'lodash';\n\n/**\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\nexport default function NavigationSearchNoResultsFound( { search } ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst resultsCount = filter( items, '_isVisible' ).length;\n\n\tif ( ! search || !! resultsCount ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ItemBaseUI>\n\t\t\t<ItemUI>{ __( 'No results found.' ) } </ItemUI>\n\t\t</ItemBaseUI>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/menu/search-no-results-found.js"],"names":["__","useNavigationContext","ItemBaseUI","ItemUI","NavigationSearchNoResultsFound","search","navigationTree","items","resultsCount","Object","values","filter","item","_isVisible","length"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,EAAT,QAAmB,iBAAnB;AAEA;AACA;AACA;;AACA,SAASC,oBAAT,QAAqC,YAArC;AACA,SAASC,UAAT,EAAqBC,MAArB,QAAmC,6BAAnC;AAEA,eAAe,SAASC,8BAAT,OAAsD;AAAA,MAAb;AAAEC,IAAAA;AAAF,GAAa;AACpE,QAAM;AACLC,IAAAA,cAAc,EAAE;AAAEC,MAAAA;AAAF;AADX,MAEFN,oBAAoB,EAFxB;AAIA,QAAMO,YAAY,GAAGC,MAAM,CAACC,MAAP,CAAeH,KAAf,EAAuBI,MAAvB,CAClBC,IAAF,IAAYA,IAAI,CAACC,UADG,EAEnBC,MAFF;;AAIA,MAAK,CAAET,MAAF,IAAY,CAAC,CAAEG,YAApB,EAAmC;AAClC,WAAO,IAAP;AACA;;AAED,SACC,cAAC,UAAD,QACC,cAAC,MAAD,QAAUR,EAAE,CAAE,mBAAF,CAAZ,MADD,CADD;AAKA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { __ } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { useNavigationContext } from '../context';\nimport { ItemBaseUI, ItemUI } from '../styles/navigation-styles';\n\nexport default function NavigationSearchNoResultsFound( { search } ) {\n\tconst {\n\t\tnavigationTree: { items },\n\t} = useNavigationContext();\n\n\tconst resultsCount = Object.values( items ).filter(\n\t\t( item ) => item._isVisible\n\t).length;\n\n\tif ( ! search || !! resultsCount ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<ItemBaseUI>\n\t\t\t<ItemUI>{ __( 'No results found.' ) } </ItemUI>\n\t\t</ItemBaseUI>\n\t);\n}\n"]}

package/build-module/navigation/use-navigation-tree-nodes.js

@@ -1,22 +1,31 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
 /**
  * WordPress dependencies
  */
-
 import { useState } from '@wordpress/element';
 export const useNavigationTreeNodes = () => {
   const [nodes, setNodes] = useState({});
 
   const getNode = key => nodes[key];
 
-  const addNode = (key, value) => setNodes(original => ({ ...original,
-    [key]: omit(value, 'children')
-  }));
+  const addNode = (key, value) => {
+    const {
+      children,
+      ...newNode
+    } = value;
+    return setNodes(original => ({ ...original,
+      [key]: newNode
+    }));
+  };
 
-  const removeNode = key => setNodes(original => omit(original, key));
+  const removeNode = key => {
+    return setNodes(original => {
+      const {
+        [key]: removedNode,
+        ...remainingNodes
+      } = original;
+      return remainingNodes;
+    });
+  };
 
   return {
     nodes,

package/build-module/navigation/use-navigation-tree-nodes.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/use-navigation-tree-nodes.js"],"names":["omit","useState","useNavigationTreeNodes","nodes","setNodes","getNode","key","addNode","value","original","removeNode"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,IAAT,QAAqB,QAArB;AAEA;AACA;AACA;;AACA,SAASC,QAAT,QAAyB,oBAAzB;AAEA,OAAO,MAAMC,sBAAsB,GAAG,MAAM;AAC3C,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsBH,QAAQ,CAAE,EAAF,CAApC;;AAEA,QAAMI,OAAO,GAAKC,GAAF,IAAWH,KAAK,CAAEG,GAAF,CAAhC;;AAEA,QAAMC,OAAO,GAAG,CAAED,GAAF,EAAOE,KAAP,KACfJ,QAAQ,CAAIK,QAAF,KAAkB,EAC3B,GAAGA,QADwB;AAE3B,KAAEH,GAAF,GAASN,IAAI,CAAEQ,KAAF,EAAS,UAAT;AAFc,GAAlB,CAAF,CADT;;AAMA,QAAME,UAAU,GAAKJ,GAAF,IAClBF,QAAQ,CAAIK,QAAF,IAAgBT,IAAI,CAAES,QAAF,EAAYH,GAAZ,CAAtB,CADT;;AAGA,SAAO;AAAEH,IAAAA,KAAF;AAASE,IAAAA,OAAT;AAAkBE,IAAAA,OAAlB;AAA2BG,IAAAA;AAA3B,GAAP;AACA,CAfM","sourcesContent":["/**\n * External dependencies\n */\nimport { omit } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\nexport const useNavigationTreeNodes = () => {\n\tconst [ nodes, setNodes ] = useState( {} );\n\n\tconst getNode = ( key ) => nodes[ key ];\n\n\tconst addNode = ( key, value ) =>\n\t\tsetNodes( ( original ) => ( {\n\t\t\t...original,\n\t\t\t[ key ]: omit( value, 'children' ),\n\t\t} ) );\n\n\tconst removeNode = ( key ) =>\n\t\tsetNodes( ( original ) => omit( original, key ) );\n\n\treturn { nodes, getNode, addNode, removeNode };\n};\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/use-navigation-tree-nodes.js"],"names":["useState","useNavigationTreeNodes","nodes","setNodes","getNode","key","addNode","value","children","newNode","original","removeNode","removedNode","remainingNodes"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,QAAT,QAAyB,oBAAzB;AAEA,OAAO,MAAMC,sBAAsB,GAAG,MAAM;AAC3C,QAAM,CAAEC,KAAF,EAASC,QAAT,IAAsBH,QAAQ,CAAE,EAAF,CAApC;;AAEA,QAAMI,OAAO,GAAKC,GAAF,IAAWH,KAAK,CAAEG,GAAF,CAAhC;;AAEA,QAAMC,OAAO,GAAG,CAAED,GAAF,EAAOE,KAAP,KAAkB;AACjC,UAAM;AAAEC,MAAAA,QAAF;AAAY,SAAGC;AAAf,QAA2BF,KAAjC;AACA,WAAOJ,QAAQ,CAAIO,QAAF,KAAkB,EAClC,GAAGA,QAD+B;AAElC,OAAEL,GAAF,GAASI;AAFyB,KAAlB,CAAF,CAAf;AAIA,GAND;;AAQA,QAAME,UAAU,GAAKN,GAAF,IAAW;AAC7B,WAAOF,QAAQ,CAAIO,QAAF,IAAgB;AAChC,YAAM;AAAE,SAAEL,GAAF,GAASO,WAAX;AAAwB,WAAGC;AAA3B,UAA8CH,QAApD;AACA,aAAOG,cAAP;AACA,KAHc,CAAf;AAIA,GALD;;AAOA,SAAO;AAAEX,IAAAA,KAAF;AAASE,IAAAA,OAAT;AAAkBE,IAAAA,OAAlB;AAA2BK,IAAAA;AAA3B,GAAP;AACA,CArBM","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\n\nexport const useNavigationTreeNodes = () => {\n\tconst [ nodes, setNodes ] = useState( {} );\n\n\tconst getNode = ( key ) => nodes[ key ];\n\n\tconst addNode = ( key, value ) => {\n\t\tconst { children, ...newNode } = value;\n\t\treturn setNodes( ( original ) => ( {\n\t\t\t...original,\n\t\t\t[ key ]: newNode,\n\t\t} ) );\n\t};\n\n\tconst removeNode = ( key ) => {\n\t\treturn setNodes( ( original ) => {\n\t\t\tconst { [ key ]: removedNode, ...remainingNodes } = original;\n\t\t\treturn remainingNodes;\n\t\t} );\n\t};\n\n\treturn { nodes, getNode, addNode, removeNode };\n};\n"]}

package/build-module/navigation/utils.js

@@ -1,8 +1,8 @@
 /**
  * External dependencies
  */
-import { deburr } from 'lodash'; // @see packages/block-editor/src/components/inserter/search-items.js
+import removeAccents from 'remove-accents'; // @see packages/block-editor/src/components/inserter/search-items.js
 
-export const normalizeInput = input => deburr(input).replace(/^\//, '').toLowerCase();
+export const normalizeInput = input => removeAccents(input).replace(/^\//, '').toLowerCase();
 export const normalizedSearch = (title, search) => -1 !== normalizeInput(title).indexOf(normalizeInput(search));
 //# sourceMappingURL=utils.js.map

package/build-module/navigation/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/components/src/navigation/utils.js"],"names":["deburr","normalizeInput","input","replace","toLowerCase","normalizedSearch","title","search","indexOf"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAT,QAAuB,QAAvB,C,CAEA;;AACA,OAAO,MAAMC,cAAc,GAAKC,KAAF,IAC7BF,MAAM,CAAEE,KAAF,CAAN,CAAgBC,OAAhB,CAAyB,KAAzB,EAAgC,EAAhC,EAAqCC,WAArC,EADM;AAGP,OAAO,MAAMC,gBAAgB,GAAG,CAAEC,KAAF,EAASC,MAAT,KAC/B,CAAC,CAAD,KAAON,cAAc,CAAEK,KAAF,CAAd,CAAwBE,OAAxB,CAAiCP,cAAc,CAAEM,MAAF,CAA/C,CADD","sourcesContent":["/**\n * External dependencies\n */\nimport { deburr } from 'lodash';\n\n// @see packages/block-editor/src/components/inserter/search-items.js\nexport const normalizeInput = ( input ) =>\n\tdeburr( input ).replace( /^\\//, '' ).toLowerCase();\n\nexport const normalizedSearch = ( title, search ) =>\n\t-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );\n"]}
+{"version":3,"sources":["@wordpress/components/src/navigation/utils.js"],"names":["removeAccents","normalizeInput","input","replace","toLowerCase","normalizedSearch","title","search","indexOf"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,aAAP,MAA0B,gBAA1B,C,CAEA;;AACA,OAAO,MAAMC,cAAc,GAAKC,KAAF,IAC7BF,aAAa,CAAEE,KAAF,CAAb,CAAuBC,OAAvB,CAAgC,KAAhC,EAAuC,EAAvC,EAA4CC,WAA5C,EADM;AAGP,OAAO,MAAMC,gBAAgB,GAAG,CAAEC,KAAF,EAASC,MAAT,KAC/B,CAAC,CAAD,KAAON,cAAc,CAAEK,KAAF,CAAd,CAAwBE,OAAxB,CAAiCP,cAAc,CAAEM,MAAF,CAA/C,CADD","sourcesContent":["/**\n * External dependencies\n */\nimport removeAccents from 'remove-accents';\n\n// @see packages/block-editor/src/components/inserter/search-items.js\nexport const normalizeInput = ( input ) =>\n\tremoveAccents( input ).replace( /^\\//, '' ).toLowerCase();\n\nexport const normalizedSearch = ( title, search ) =>\n\t-1 !== normalizeInput( title ).indexOf( normalizeInput( search ) );\n"]}

package/build-module/popover/index.js

@@ -113,6 +113,7 @@ const Popover = (_ref, ref) => {
   }
 
   const arrowRef = useRef(null);
+  const anchorRefFallback = useRef(null);
   const isMobileViewport = useViewportMatch('medium', '<');
   const isExpanded = expandOnMobile && isMobileViewport;
   const hasArrow = !isExpanded && !noArrow;
@@ -132,13 +133,13 @@ const Popover = (_ref, ref) => {
     } else if (getAnchorRect) {
       var _getAnchorRect$ownerD, _getAnchorRect;
 
-      return (_getAnchorRect$ownerD = (_getAnchorRect = getAnchorRect()) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument) !== null && _getAnchorRect$ownerD !== void 0 ? _getAnchorRect$ownerD : document;
+      return (_getAnchorRect$ownerD = (_getAnchorRect = getAnchorRect(anchorRefFallback.current)) === null || _getAnchorRect === void 0 ? void 0 : _getAnchorRect.ownerDocument) !== null && _getAnchorRect$ownerD !== void 0 ? _getAnchorRect$ownerD : document;
     }
 
     return document;
   }, [anchorRef, anchorRect, getAnchorRect]);
   /**
-   * Offsets the the position of the popover when the anchor is inside an iframe.
+   * Offsets the position of the popover when the anchor is inside an iframe.
    */
 
   const frameOffset = useMemo(() => {
@@ -191,21 +192,23 @@ const Popover = (_ref, ref) => {
   }) : undefined, hasArrow ? arrow({
     element: arrowRef
   }) : undefined].filter(m => !!m);
-  const anchorRefFallback = useRef(null);
 
   const slotName = useContext(slotNameContext) || __unstableSlotName;
 
   const slot = useSlot(slotName);
-
-  const onDialogClose = (type, event) => {
-    // Ideally the popover should have just a single onClose prop and
-    // not three props that potentially do the same thing.
-    if (type === 'focus-outside' && onFocusOutside) {
-      onFocusOutside(event);
-    } else if (onClose) {
-      onClose();
-    }
-  };
+  let onDialogClose;
+
+  if (onClose || onFocusOutside) {
+    onDialogClose = (type, event) => {
+      // Ideally the popover should have just a single onClose prop and
+      // not three props that potentially do the same thing.
+      if (type === 'focus-outside' && onFocusOutside) {
+        onFocusOutside(event);
+      } else if (onClose) {
+        onClose();
+      }
+    };
+  }
 
   const [dialogRef, dialogProps] = useDialog({
     focusOnMount,
@@ -265,7 +268,7 @@ const Popover = (_ref, ref) => {
         getBoundingClientRect() {
           var _rect$x, _rect$y, _rect$width, _rect$height;
 
-          const rect = getAnchorRect();
+          const rect = getAnchorRect(anchorRefFallback.current);
           return new window.DOMRect((_rect$x = rect.x) !== null && _rect$x !== void 0 ? _rect$x : rect.left, (_rect$y = rect.y) !== null && _rect$y !== void 0 ? _rect$y : rect.top, (_rect$width = rect.width) !== null && _rect$width !== void 0 ? _rect$width : rect.right - rect.left, (_rect$height = rect.height) !== null && _rect$height !== void 0 ? _rect$height : rect.bottom - rect.top);
         }