@wordpress/interface 5.11.0 → 5.12.1

package/build-module/components/interface-skeleton/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -34,24 +33,23 @@ function useHTMLClass(className) {
   }, [className]);
 }
 
-function InterfaceSkeleton(_ref, ref) {
-  let {
-    isDistractionFree,
-    footer,
-    header,
-    editorNotices,
-    sidebar,
-    secondarySidebar,
-    notices,
-    content,
-    actions,
-    labels,
-    className,
-    enableRegionNavigation = true,
-    // Todo: does this need to be a prop.
-    // Can we use a dependency to keyboard-shortcuts directly?
-    shortcuts
-  } = _ref;
+function InterfaceSkeleton({
+  isDistractionFree,
+  footer,
+  header,
+  editorNotices,
+  sidebar,
+  secondarySidebar,
+  notices,
+  content,
+  actions,
+  labels,
+  className,
+  enableRegionNavigation = true,
+  // Todo: does this need to be a prop.
+  // Can we use a dependency to keyboard-shortcuts directly?
+  shortcuts
+}, ref) {
   const navigateRegionsProps = useNavigateRegions(shortcuts);
   useHTMLClass('interface-interface-skeleton__html-container');
   const defaultLabels = {
@@ -77,10 +75,8 @@ function InterfaceSkeleton(_ref, ref) {
     ...labels
   };
   const headerVariants = {
-    hidden: isDistractionFree ? {
+    hidden: {
       opacity: 0
-    } : {
-      opacity: 1
     },
     hover: {
       opacity: 1,
@@ -89,27 +85,31 @@ function InterfaceSkeleton(_ref, ref) {
         delay: 0.2,
         delayChildren: 0.2
       }
+    },
+    distractionFreeInactive: {
+      opacity: 1,
+      transition: {
+        delay: 0
+      }
     }
   };
-  return createElement("div", _extends({}, enableRegionNavigation ? navigateRegionsProps : {}, {
+  return createElement("div", { ...(enableRegionNavigation ? navigateRegionsProps : {}),
     ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
     className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
-  }), createElement("div", {
+  }, createElement("div", {
     className: "interface-interface-skeleton__editor"
-  }, !!header && isDistractionFree && createElement(NavigableRegion, {
+  }, !!header && createElement(NavigableRegion, {
     as: motion.div,
     className: "interface-interface-skeleton__header",
     "aria-label": mergedLabels.header,
-    initial: isDistractionFree ? 'hidden' : 'hover',
-    whileHover: "hover",
+    initial: isDistractionFree ? 'hidden' : 'distractionFreeInactive',
+    whileHover: isDistractionFree ? 'hover' : 'distractionFreeInactive',
+    animate: isDistractionFree ? 'hidden' : 'distractionFreeInactive',
     variants: headerVariants,
-    transition: {
+    transition: isDistractionFree ? {
       type: 'tween',
       delay: 0.8
-    }
-  }, header), !!header && !isDistractionFree && createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__header",
-    ariaLabel: mergedLabels.header
+    } : undefined
   }, header), isDistractionFree && createElement("div", {
     className: "interface-interface-skeleton__header"
   }, editorNotices), createElement("div", {

package/build-module/components/interface-skeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","undefined","div"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","undefined","div"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: __( 'Header' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\tconst headerVariants = {\n\t\thidden: { opacity: 0 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"]}

package/build-module/components/more-menu-dropdown/index.js

@@ -11,17 +11,16 @@ import classnames from 'classnames';
 import { DropdownMenu } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { moreVertical } from '@wordpress/icons';
-export default function MoreMenuDropdown(_ref) {
-  let {
-    as: DropdownComponent = DropdownMenu,
-    className,
+export default function MoreMenuDropdown({
+  as: DropdownComponent = DropdownMenu,
+  className,
 
-    /* translators: button label text should, if possible, be under 16 characters. */
-    label = __('Options'),
-    popoverProps,
-    toggleProps,
-    children
-  } = _ref;
+  /* translators: button label text should, if possible, be under 16 characters. */
+  label = __('Options'),
+  popoverProps,
+  toggleProps,
+  children
+}) {
   return createElement(DropdownComponent, {
     className: classnames('interface-more-menu-dropdown', className),
     icon: moreVertical,
@@ -29,7 +28,7 @@ export default function MoreMenuDropdown(_ref) {
     popoverProps: {
       placement: 'bottom-end',
       ...popoverProps,
-      className: classnames('interface-more-menu-dropdown__content', popoverProps === null || popoverProps === void 0 ? void 0 : popoverProps.className)
+      className: classnames('interface-more-menu-dropdown__content', popoverProps?.className)
     },
     toggleProps: {
       tooltipPosition: 'bottom',

package/build-module/components/more-menu-dropdown/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/more-menu-dropdown/index.js"],"names":["classnames","DropdownMenu","__","moreVertical","MoreMenuDropdown","as","DropdownComponent","className","label","popoverProps","toggleProps","children","placement","tooltipPosition","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AAEA,eAAe,SAASC,gBAAT,OAQX;AAAA,MARsC;AACzCC,IAAAA,EAAE,EAAEC,iBAAiB,GAAGL,YADiB;AAEzCM,IAAAA,SAFyC;;AAGzC;AACAC,IAAAA,KAAK,GAAGN,EAAE,CAAE,SAAF,CAJ+B;AAKzCO,IAAAA,YALyC;AAMzCC,IAAAA,WANyC;AAOzCC,IAAAA;AAPyC,GAQtC;AACH,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,8BADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,IAAI,EAAGJ,YALR;AAMC,IAAA,KAAK,EAAGK,KANT;AAOC,IAAA,YAAY,EAAG;AACdI,MAAAA,SAAS,EAAE,YADG;AAEd,SAAGH,YAFW;AAGdF,MAAAA,SAAS,EAAEP,UAAU,CACpB,uCADoB,EAEpBS,YAFoB,aAEpBA,YAFoB,uBAEpBA,YAAY,CAAEF,SAFM;AAHP,KAPhB;AAeC,IAAA,WAAW,EAAG;AACbM,MAAAA,eAAe,EAAE,QADJ;AAEb,SAAGH;AAFU;AAff,KAoBKI,OAAF,IAAeH,QAAQ,CAAEG,OAAF,CApB1B,CADD;AAwBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { DropdownMenu } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nexport default function MoreMenuDropdown( {\n\tas: DropdownComponent = DropdownMenu,\n\tclassName,\n\t/* translators: button label text should, if possible, be under 16 characters. */\n\tlabel = __( 'Options' ),\n\tpopoverProps,\n\ttoggleProps,\n\tchildren,\n} ) {\n\treturn (\n\t\t<DropdownComponent\n\t\t\tclassName={ classnames(\n\t\t\t\t'interface-more-menu-dropdown',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ label }\n\t\t\tpopoverProps={ {\n\t\t\t\tplacement: 'bottom-end',\n\t\t\t\t...popoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'interface-more-menu-dropdown__content',\n\t\t\t\t\tpopoverProps?.className\n\t\t\t\t),\n\t\t\t} }\n\t\t\ttoggleProps={ {\n\t\t\t\ttooltipPosition: 'bottom',\n\t\t\t\t...toggleProps,\n\t\t\t} }\n\t\t>\n\t\t\t{ ( onClose ) => children( onClose ) }\n\t\t</DropdownComponent>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/more-menu-dropdown/index.js"],"names":["classnames","DropdownMenu","__","moreVertical","MoreMenuDropdown","as","DropdownComponent","className","label","popoverProps","toggleProps","children","placement","tooltipPosition","onClose"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,YAAT,QAA6B,uBAA7B;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,YAAT,QAA6B,kBAA7B;AAEA,eAAe,SAASC,gBAAT,CAA2B;AACzCC,EAAAA,EAAE,EAAEC,iBAAiB,GAAGL,YADiB;AAEzCM,EAAAA,SAFyC;;AAGzC;AACAC,EAAAA,KAAK,GAAGN,EAAE,CAAE,SAAF,CAJ+B;AAKzCO,EAAAA,YALyC;AAMzCC,EAAAA,WANyC;AAOzCC,EAAAA;AAPyC,CAA3B,EAQX;AACH,SACC,cAAC,iBAAD;AACC,IAAA,SAAS,EAAGX,UAAU,CACrB,8BADqB,EAErBO,SAFqB,CADvB;AAKC,IAAA,IAAI,EAAGJ,YALR;AAMC,IAAA,KAAK,EAAGK,KANT;AAOC,IAAA,YAAY,EAAG;AACdI,MAAAA,SAAS,EAAE,YADG;AAEd,SAAGH,YAFW;AAGdF,MAAAA,SAAS,EAAEP,UAAU,CACpB,uCADoB,EAEpBS,YAAY,EAAEF,SAFM;AAHP,KAPhB;AAeC,IAAA,WAAW,EAAG;AACbM,MAAAA,eAAe,EAAE,QADJ;AAEb,SAAGH;AAFU;AAff,KAoBKI,OAAF,IAAeH,QAAQ,CAAEG,OAAF,CApB1B,CADD;AAwBA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { DropdownMenu } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { moreVertical } from '@wordpress/icons';\n\nexport default function MoreMenuDropdown( {\n\tas: DropdownComponent = DropdownMenu,\n\tclassName,\n\t/* translators: button label text should, if possible, be under 16 characters. */\n\tlabel = __( 'Options' ),\n\tpopoverProps,\n\ttoggleProps,\n\tchildren,\n} ) {\n\treturn (\n\t\t<DropdownComponent\n\t\t\tclassName={ classnames(\n\t\t\t\t'interface-more-menu-dropdown',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ticon={ moreVertical }\n\t\t\tlabel={ label }\n\t\t\tpopoverProps={ {\n\t\t\t\tplacement: 'bottom-end',\n\t\t\t\t...popoverProps,\n\t\t\t\tclassName: classnames(\n\t\t\t\t\t'interface-more-menu-dropdown__content',\n\t\t\t\t\tpopoverProps?.className\n\t\t\t\t),\n\t\t\t} }\n\t\t\ttoggleProps={ {\n\t\t\t\ttooltipPosition: 'bottom',\n\t\t\t\t...toggleProps,\n\t\t\t} }\n\t\t>\n\t\t\t{ ( onClose ) => children( onClose ) }\n\t\t</DropdownComponent>\n\t);\n}\n"]}

package/build-module/components/more-menu-feature-toggle/index.js

@@ -13,16 +13,15 @@ import { speak } from '@wordpress/a11y';
  */
 
 import { store as interfaceStore } from '../../store';
-export default function MoreMenuFeatureToggle(_ref) {
-  let {
-    scope,
-    label,
-    info,
-    messageActivated,
-    messageDeactivated,
-    shortcut,
-    feature
-  } = _ref;
+export default function MoreMenuFeatureToggle({
+  scope,
+  label,
+  info,
+  messageActivated,
+  messageDeactivated,
+  shortcut,
+  feature
+}) {
   const isActive = useSelect(select => select(interfaceStore).isFeatureActive(scope, feature), [feature]);
   const {
     toggleFeature

package/build-module/components/more-menu-feature-toggle/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/more-menu-feature-toggle/index.js"],"names":["useSelect","useDispatch","MenuItem","__","check","speak","store","interfaceStore","MoreMenuFeatureToggle","scope","label","info","messageActivated","messageDeactivated","shortcut","feature","isActive","select","isFeatureActive","toggleFeature","speakMessage"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,QAAT,QAAyB,uBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,cAAlB,QAAwC,aAAxC;AAEA,eAAe,SAASC,qBAAT,OAQX;AAAA,MAR2C;AAC9CC,IAAAA,KAD8C;AAE9CC,IAAAA,KAF8C;AAG9CC,IAAAA,IAH8C;AAI9CC,IAAAA,gBAJ8C;AAK9CC,IAAAA,kBAL8C;AAM9CC,IAAAA,QAN8C;AAO9CC,IAAAA;AAP8C,GAQ3C;AACH,QAAMC,QAAQ,GAAGhB,SAAS,CACvBiB,MAAF,IACCA,MAAM,CAAEV,cAAF,CAAN,CAAyBW,eAAzB,CAA0CT,KAA1C,EAAiDM,OAAjD,CAFwB,EAGzB,CAAEA,OAAF,CAHyB,CAA1B;AAKA,QAAM;AAAEI,IAAAA;AAAF,MAAoBlB,WAAW,CAAEM,cAAF,CAArC;;AACA,QAAMa,YAAY,GAAG,MAAM;AAC1B,QAAKJ,QAAL,EAAgB;AACfX,MAAAA,KAAK,CAAEQ,kBAAkB,IAAIV,EAAE,CAAE,qBAAF,CAA1B,CAAL;AACA,KAFD,MAEO;AACNE,MAAAA,KAAK,CAAEO,gBAAgB,IAAIT,EAAE,CAAE,mBAAF,CAAxB,CAAL;AACA;AACD,GAND;;AAQA,SACC,cAAC,QAAD;AACC,IAAA,IAAI,EAAGa,QAAQ,IAAIZ,KADpB;AAEC,IAAA,UAAU,EAAGY,QAFd;AAGC,IAAA,OAAO,EAAG,MAAM;AACfG,MAAAA,aAAa,CAAEV,KAAF,EAASM,OAAT,CAAb;AACAK,MAAAA,YAAY;AACZ,KANF;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,IAAI,EAAGT,IARR;AASC,IAAA,QAAQ,EAAGG;AATZ,KAWGJ,KAXH,CADD;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\n\nexport default function MoreMenuFeatureToggle( {\n\tscope,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\tfeature,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).isFeatureActive( scope, feature ),\n\t\t[ feature ]\n\t);\n\tconst { toggleFeature } = useDispatch( interfaceStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tspeak( messageDeactivated || __( 'Feature deactivated' ) );\n\t\t} else {\n\t\t\tspeak( messageActivated || __( 'Feature activated' ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\ttoggleFeature( scope, feature );\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/more-menu-feature-toggle/index.js"],"names":["useSelect","useDispatch","MenuItem","__","check","speak","store","interfaceStore","MoreMenuFeatureToggle","scope","label","info","messageActivated","messageDeactivated","shortcut","feature","isActive","select","isFeatureActive","toggleFeature","speakMessage"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,SAAT,EAAoBC,WAApB,QAAuC,iBAAvC;AACA,SAASC,QAAT,QAAyB,uBAAzB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AACA,SAASC,KAAT,QAAsB,kBAAtB;AACA,SAASC,KAAT,QAAsB,iBAAtB;AAEA;AACA;AACA;;AACA,SAASC,KAAK,IAAIC,cAAlB,QAAwC,aAAxC;AAEA,eAAe,SAASC,qBAAT,CAAgC;AAC9CC,EAAAA,KAD8C;AAE9CC,EAAAA,KAF8C;AAG9CC,EAAAA,IAH8C;AAI9CC,EAAAA,gBAJ8C;AAK9CC,EAAAA,kBAL8C;AAM9CC,EAAAA,QAN8C;AAO9CC,EAAAA;AAP8C,CAAhC,EAQX;AACH,QAAMC,QAAQ,GAAGhB,SAAS,CACvBiB,MAAF,IACCA,MAAM,CAAEV,cAAF,CAAN,CAAyBW,eAAzB,CAA0CT,KAA1C,EAAiDM,OAAjD,CAFwB,EAGzB,CAAEA,OAAF,CAHyB,CAA1B;AAKA,QAAM;AAAEI,IAAAA;AAAF,MAAoBlB,WAAW,CAAEM,cAAF,CAArC;;AACA,QAAMa,YAAY,GAAG,MAAM;AAC1B,QAAKJ,QAAL,EAAgB;AACfX,MAAAA,KAAK,CAAEQ,kBAAkB,IAAIV,EAAE,CAAE,qBAAF,CAA1B,CAAL;AACA,KAFD,MAEO;AACNE,MAAAA,KAAK,CAAEO,gBAAgB,IAAIT,EAAE,CAAE,mBAAF,CAAxB,CAAL;AACA;AACD,GAND;;AAQA,SACC,cAAC,QAAD;AACC,IAAA,IAAI,EAAGa,QAAQ,IAAIZ,KADpB;AAEC,IAAA,UAAU,EAAGY,QAFd;AAGC,IAAA,OAAO,EAAG,MAAM;AACfG,MAAAA,aAAa,CAAEV,KAAF,EAASM,OAAT,CAAb;AACAK,MAAAA,YAAY;AACZ,KANF;AAOC,IAAA,IAAI,EAAC,kBAPN;AAQC,IAAA,IAAI,EAAGT,IARR;AASC,IAAA,QAAQ,EAAGG;AATZ,KAWGJ,KAXH,CADD;AAeA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect, useDispatch } from '@wordpress/data';\nimport { MenuItem } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { check } from '@wordpress/icons';\nimport { speak } from '@wordpress/a11y';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\n\nexport default function MoreMenuFeatureToggle( {\n\tscope,\n\tlabel,\n\tinfo,\n\tmessageActivated,\n\tmessageDeactivated,\n\tshortcut,\n\tfeature,\n} ) {\n\tconst isActive = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).isFeatureActive( scope, feature ),\n\t\t[ feature ]\n\t);\n\tconst { toggleFeature } = useDispatch( interfaceStore );\n\tconst speakMessage = () => {\n\t\tif ( isActive ) {\n\t\t\tspeak( messageDeactivated || __( 'Feature deactivated' ) );\n\t\t} else {\n\t\t\tspeak( messageActivated || __( 'Feature activated' ) );\n\t\t}\n\t};\n\n\treturn (\n\t\t<MenuItem\n\t\t\ticon={ isActive && check }\n\t\t\tisSelected={ isActive }\n\t\t\tonClick={ () => {\n\t\t\t\ttoggleFeature( scope, feature );\n\t\t\t\tspeakMessage();\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tinfo={ info }\n\t\t\tshortcut={ shortcut }\n\t\t>\n\t\t\t{ label }\n\t\t</MenuItem>\n\t);\n}\n"]}

package/build-module/components/navigable-region/index.js

@@ -1,23 +1,22 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
  * External dependencies
  */
 import classnames from 'classnames';
-export default function NavigableRegion(_ref) {
-  let {
-    children,
-    className,
-    ariaLabel,
-    as: Tag = 'div',
-    ...props
-  } = _ref;
-  return createElement(Tag, _extends({
+export default function NavigableRegion({
+  children,
+  className,
+  ariaLabel,
+  as: Tag = 'div',
+  ...props
+}) {
+  return createElement(Tag, {
     className: classnames('interface-navigable-region', className),
     "aria-label": ariaLabel,
     role: "region",
-    tabIndex: "-1"
-  }, props), children);
+    tabIndex: "-1",
+    ...props
+  }, children);
 }
 //# sourceMappingURL=index.js.map

package/build-module/components/navigable-region/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOGL,QAPH,CADD;AAWA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,CAA0B;AACxCC,EAAAA,QADwC;AAExCC,EAAAA,SAFwC;AAGxCC,EAAAA,SAHwC;AAIxCC,EAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,KAAGC;AALqC,CAA1B,EAMX;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC,IAJV;AAAA,OAKMG;AALN,KAOGL,QAPH,CADD;AAWA","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ classnames( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"]}

package/build-module/components/pinned-items/index.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 import { createElement } from "@wordpress/element";
 
 /**
@@ -11,25 +10,25 @@ import classnames from 'classnames';
 
 import { Slot, Fill } from '@wordpress/components';
 
-function PinnedItems(_ref) {
-  let {
-    scope,
+function PinnedItems({
+  scope,
+  ...props
+}) {
+  return createElement(Fill, {
+    name: `PinnedItems/${scope}`,
     ...props
-  } = _ref;
-  return createElement(Fill, _extends({
-    name: `PinnedItems/${scope}`
-  }, props));
+  });
 }
 
-function PinnedItemsSlot(_ref2) {
-  let {
-    scope,
-    className,
+function PinnedItemsSlot({
+  scope,
+  className,
+  ...props
+}) {
+  return createElement(Slot, {
+    name: `PinnedItems/${scope}`,
     ...props
-  } = _ref2;
-  return createElement(Slot, _extends({
-    name: `PinnedItems/${scope}`
-  }, props), fills => (fills === null || fills === void 0 ? void 0 : fills.length) > 0 && createElement("div", {
+  }, fills => fills?.length > 0 && createElement("div", {
     className: classnames(className, 'interface-pinned-items')
   }, fills));
 }

package/build-module/components/pinned-items/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"names":["classnames","Slot","Fill","PinnedItems","scope","props","PinnedItemsSlot","className","fills","length"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,uBAA3B;;AAEA,SAASC,WAAT,OAA4C;AAAA,MAAtB;AAAEC,IAAAA,KAAF;AAAS,OAAGC;AAAZ,GAAsB;AAC3C,SAAO,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,eAAeD,KAAO;AAApC,KAA6CC,KAA7C,EAAP;AACA;;AAED,SAASC,eAAT,QAA2D;AAAA,MAAjC;AAAEF,IAAAA,KAAF;AAASG,IAAAA,SAAT;AAAoB,OAAGF;AAAvB,GAAiC;AAC1D,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,eAAeD,KAAO;AAApC,KAA6CC,KAA7C,GACKG,KAAF,IACD,CAAAA,KAAK,SAAL,IAAAA,KAAK,WAAL,YAAAA,KAAK,CAAEC,MAAP,IAAgB,CAAhB,IACC;AACC,IAAA,SAAS,EAAGT,UAAU,CACrBO,SADqB,EAErB,wBAFqB;AADvB,KAMGC,KANH,CAHH,CADD;AAgBA;;AAEDL,WAAW,CAACF,IAAZ,GAAmBK,eAAnB;AAEA,eAAeH,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"names":["classnames","Slot","Fill","PinnedItems","scope","props","PinnedItemsSlot","className","fills","length"],"mappings":";;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA;AACA;AACA;;AACA,SAASC,IAAT,EAAeC,IAAf,QAA2B,uBAA3B;;AAEA,SAASC,WAAT,CAAsB;AAAEC,EAAAA,KAAF;AAAS,KAAGC;AAAZ,CAAtB,EAA4C;AAC3C,SAAO,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,eAAeD,KAAO,EAApC;AAAA,OAA6CC;AAA7C,IAAP;AACA;;AAED,SAASC,eAAT,CAA0B;AAAEF,EAAAA,KAAF;AAASG,EAAAA,SAAT;AAAoB,KAAGF;AAAvB,CAA1B,EAA2D;AAC1D,SACC,cAAC,IAAD;AAAM,IAAA,IAAI,EAAI,eAAeD,KAAO,EAApC;AAAA,OAA6CC;AAA7C,KACKG,KAAF,IACDA,KAAK,EAAEC,MAAP,GAAgB,CAAhB,IACC;AACC,IAAA,SAAS,EAAGT,UAAU,CACrBO,SADqB,EAErB,wBAFqB;AADvB,KAMGC,KANH,CAHH,CADD;AAgBA;;AAEDL,WAAW,CAACF,IAAZ,GAAmBK,eAAnB;AAEA,eAAeH,WAAf","sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"]}

package/build-module/components/preferences-modal/index.js

@@ -5,11 +5,10 @@ import { createElement } from "@wordpress/element";
  */
 import { Modal } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-export default function PreferencesModal(_ref) {
-  let {
-    closeModal,
-    children
-  } = _ref;
+export default function PreferencesModal({
+  closeModal,
+  children
+}) {
   return createElement(Modal, {
     className: "interface-preferences-modal",
     title: __('Preferences'),

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

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal/index.js"],"names":["Modal","__","PreferencesModal","closeModal","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,KAAT,QAAsB,uBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,SAASC,gBAAT,OAAsD;AAAA,MAA3B;AAAEC,IAAAA,UAAF;AAAcC,IAAAA;AAAd,GAA2B;AACpE,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAGH,EAAE,CAAE,aAAF,CAFX;AAGC,IAAA,cAAc,EAAGE;AAHlB,KAKGC,QALH,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function PreferencesModal( { closeModal, children } ) {\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"interface-preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal/index.js"],"names":["Modal","__","PreferencesModal","closeModal","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,KAAT,QAAsB,uBAAtB;AACA,SAASC,EAAT,QAAmB,iBAAnB;AAEA,eAAe,SAASC,gBAAT,CAA2B;AAAEC,EAAAA,UAAF;AAAcC,EAAAA;AAAd,CAA3B,EAAsD;AACpE,SACC,cAAC,KAAD;AACC,IAAA,SAAS,EAAC,6BADX;AAEC,IAAA,KAAK,EAAGH,EAAE,CAAE,aAAF,CAFX;AAGC,IAAA,cAAc,EAAGE;AAHlB,KAKGC,QALH,CADD;AASA","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Modal } from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\n\nexport default function PreferencesModal( { closeModal, children } ) {\n\treturn (\n\t\t<Modal\n\t\t\tclassName=\"interface-preferences-modal\"\n\t\t\ttitle={ __( 'Preferences' ) }\n\t\t\tonRequestClose={ closeModal }\n\t\t>\n\t\t\t{ children }\n\t\t</Modal>\n\t);\n}\n"]}

package/build-module/components/preferences-modal-base-option/index.js

@@ -5,14 +5,13 @@ import { createElement } from "@wordpress/element";
  */
 import { ToggleControl } from '@wordpress/components';
 
-function BaseOption(_ref) {
-  let {
-    help,
-    label,
-    isChecked,
-    onChange,
-    children
-  } = _ref;
+function BaseOption({
+  help,
+  label,
+  isChecked,
+  onChange,
+  children
+}) {
   return createElement("div", {
     className: "interface-preferences-modal__option"
   }, createElement(ToggleControl, {

package/build-module/components/preferences-modal-base-option/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;;AAEA,SAASC,UAAT,OAAsE;AAAA,MAAjD;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,KAAR;AAAeC,IAAAA,SAAf;AAA0BC,IAAAA,QAA1B;AAAoCC,IAAAA;AAApC,GAAiD;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,OAAO,EAAGC,SAJX;AAKC,IAAA,QAAQ,EAAGC;AALZ,IADD,EAQGC,QARH,CADD;AAYA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-base-option/index.js"],"names":["ToggleControl","BaseOption","help","label","isChecked","onChange","children"],"mappings":";;AAAA;AACA;AACA;AACA,SAASA,aAAT,QAA8B,uBAA9B;;AAEA,SAASC,UAAT,CAAqB;AAAEC,EAAAA,IAAF;AAAQC,EAAAA,KAAR;AAAeC,EAAAA,SAAf;AAA0BC,EAAAA,QAA1B;AAAoCC,EAAAA;AAApC,CAArB,EAAsE;AACrE,SACC;AAAK,IAAA,SAAS,EAAC;AAAf,KACC,cAAC,aAAD;AACC,IAAA,uBAAuB,MADxB;AAEC,IAAA,IAAI,EAAGJ,IAFR;AAGC,IAAA,KAAK,EAAGC,KAHT;AAIC,IAAA,OAAO,EAAGC,SAJX;AAKC,IAAA,QAAQ,EAAGC;AALZ,IADD,EAQGC,QARH,CADD;AAYA;;AAED,eAAeL,UAAf","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { ToggleControl } from '@wordpress/components';\n\nfunction BaseOption( { help, label, isChecked, onChange, children } ) {\n\treturn (\n\t\t<div className=\"interface-preferences-modal__option\">\n\t\t\t<ToggleControl\n\t\t\t\t__nextHasNoMarginBottom\n\t\t\t\thelp={ help }\n\t\t\t\tlabel={ label }\n\t\t\t\tchecked={ isChecked }\n\t\t\t\tonChange={ onChange }\n\t\t\t/>\n\t\t\t{ children }\n\t\t</div>\n\t);\n}\n\nexport default BaseOption;\n"]}

package/build-module/components/preferences-modal-section/index.js

@@ -1,21 +1,18 @@
 import { createElement } from "@wordpress/element";
 
-const Section = _ref => {
-  let {
-    description,
-    title,
-    children
-  } = _ref;
-  return createElement("fieldset", {
-    className: "interface-preferences-modal__section"
-  }, createElement("legend", {
-    className: "interface-preferences-modal__section-legend"
-  }, createElement("h2", {
-    className: "interface-preferences-modal__section-title"
-  }, title), description && createElement("p", {
-    className: "interface-preferences-modal__section-description"
-  }, description)), children);
-};
+const Section = ({
+  description,
+  title,
+  children
+}) => createElement("fieldset", {
+  className: "interface-preferences-modal__section"
+}, createElement("legend", {
+  className: "interface-preferences-modal__section-legend"
+}, createElement("h2", {
+  className: "interface-preferences-modal__section-title"
+}, title), description && createElement("p", {
+  className: "interface-preferences-modal__section-description"
+}, description)), children);
 
 export default Section;
 //# sourceMappingURL=index.js.map

package/build-module/components/preferences-modal-section/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;AAAA,MAAMA,OAAO,GAAG;AAAA,MAAE;AAAEC,IAAAA,WAAF;AAAeC,IAAAA,KAAf;AAAsBC,IAAAA;AAAtB,GAAF;AAAA,SACf;AAAU,IAAA,SAAS,EAAC;AAApB,KACC;AAAQ,IAAA,SAAS,EAAC;AAAlB,KACC;AAAI,IAAA,SAAS,EAAC;AAAd,KACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,IAAA,SAAS,EAAC;AAAb,KACGA,WADH,CALF,CADD,EAWGE,QAXH,CADe;AAAA,CAAhB;;AAgBA,eAAeH,OAAf","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend className=\"interface-preferences-modal__section-legend\">\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-section/index.js"],"names":["Section","description","title","children"],"mappings":";;AAAA,MAAMA,OAAO,GAAG,CAAE;AAAEC,EAAAA,WAAF;AAAeC,EAAAA,KAAf;AAAsBC,EAAAA;AAAtB,CAAF,KACf;AAAU,EAAA,SAAS,EAAC;AAApB,GACC;AAAQ,EAAA,SAAS,EAAC;AAAlB,GACC;AAAI,EAAA,SAAS,EAAC;AAAd,GACGD,KADH,CADD,EAIGD,WAAW,IACZ;AAAG,EAAA,SAAS,EAAC;AAAb,GACGA,WADH,CALF,CADD,EAWGE,QAXH,CADD;;AAgBA,eAAeH,OAAf","sourcesContent":["const Section = ( { description, title, children } ) => (\n\t<fieldset className=\"interface-preferences-modal__section\">\n\t\t<legend className=\"interface-preferences-modal__section-legend\">\n\t\t\t<h2 className=\"interface-preferences-modal__section-title\">\n\t\t\t\t{ title }\n\t\t\t</h2>\n\t\t\t{ description && (\n\t\t\t\t<p className=\"interface-preferences-modal__section-description\">\n\t\t\t\t\t{ description }\n\t\t\t\t</p>\n\t\t\t) }\n\t\t</legend>\n\t\t{ children }\n\t</fieldset>\n);\n\nexport default Section;\n"]}

package/build-module/components/preferences-modal-tabs/index.js

@@ -9,10 +9,9 @@ import { useMemo, useCallback, useState } from '@wordpress/element';
 import { chevronLeft, chevronRight, Icon } from '@wordpress/icons';
 import { isRTL, __ } from '@wordpress/i18n';
 const PREFERENCES_MENU = 'preferences-menu';
-export default function PreferencesModalTabs(_ref) {
-  let {
-    sections
-  } = _ref;
+export default function PreferencesModalTabs({
+  sections
+}) {
   const isLargeViewport = useViewportMatch('medium'); // This is also used to sync the two different rendered components
   // between small and large viewports.
 
@@ -33,12 +32,11 @@ export default function PreferencesModalTabs(_ref) {
     };
 
     if (sections.length) {
-      mappedTabs = sections.reduce((accumulator, _ref2) => {
-        let {
-          name,
-          tabLabel: title,
-          content
-        } = _ref2;
+      mappedTabs = sections.reduce((accumulator, {
+        name,
+        tabLabel: title,
+        content
+      }) => {
         accumulator.tabs.push({
           name,
           title

package/build-module/components/preferences-modal-tabs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-tabs/index.js"],"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","TabPanel","Card","CardHeader","CardBody","useMemo","useCallback","useState","chevronLeft","chevronRight","Icon","isRTL","__","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","getCurrentTab","tab","modalContent","undefined","map","section"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tTabPanel,\n\tCard,\n\tCardHeader,\n\tCardBody,\n} from '@wordpress/components';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => sectionsContentMap[ tab.name ] || null,\n\t\t[ sectionsContentMap ]\n\t);\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"interface-preferences__tabs\"\n\t\t\t\ttabs={ tabs }\n\t\t\t\tinitialTabName={\n\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t}\n\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\torientation=\"vertical\"\n\t\t\t>\n\t\t\t\t{ getCurrentTab }\n\t\t\t</TabPanel>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"interface-preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\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</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"]}
+{"version":3,"sources":["@wordpress/interface/src/components/preferences-modal-tabs/index.js"],"names":["useViewportMatch","__experimentalNavigatorProvider","NavigatorProvider","__experimentalNavigatorScreen","NavigatorScreen","__experimentalNavigatorButton","NavigatorButton","__experimentalNavigatorBackButton","NavigatorBackButton","__experimentalItemGroup","ItemGroup","__experimentalItem","Item","__experimentalHStack","HStack","__experimentalText","Text","__experimentalTruncate","Truncate","FlexItem","TabPanel","Card","CardHeader","CardBody","useMemo","useCallback","useState","chevronLeft","chevronRight","Icon","isRTL","__","PREFERENCES_MENU","PreferencesModalTabs","sections","isLargeViewport","activeMenu","setActiveMenu","tabs","sectionsContentMap","mappedTabs","length","reduce","accumulator","name","tabLabel","title","content","push","getCurrentTab","tab","modalContent","undefined","map","section"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useViewportMatch } from '@wordpress/compose';\nimport {\n\t__experimentalNavigatorProvider as NavigatorProvider,\n\t__experimentalNavigatorScreen as NavigatorScreen,\n\t__experimentalNavigatorButton as NavigatorButton,\n\t__experimentalNavigatorBackButton as NavigatorBackButton,\n\t__experimentalItemGroup as ItemGroup,\n\t__experimentalItem as Item,\n\t__experimentalHStack as HStack,\n\t__experimentalText as Text,\n\t__experimentalTruncate as Truncate,\n\tFlexItem,\n\tTabPanel,\n\tCard,\n\tCardHeader,\n\tCardBody,\n} from '@wordpress/components';\nimport { useMemo, useCallback, useState } from '@wordpress/element';\nimport { chevronLeft, chevronRight, Icon } from '@wordpress/icons';\nimport { isRTL, __ } from '@wordpress/i18n';\n\nconst PREFERENCES_MENU = 'preferences-menu';\n\nexport default function PreferencesModalTabs( { sections } ) {\n\tconst isLargeViewport = useViewportMatch( 'medium' );\n\n\t// This is also used to sync the two different rendered components\n\t// between small and large viewports.\n\tconst [ activeMenu, setActiveMenu ] = useState( PREFERENCES_MENU );\n\t/**\n\t * Create helper objects from `sections` for easier data handling.\n\t * `tabs` is used for creating the `TabPanel` and `sectionsContentMap`\n\t * is used for easier access to active tab's content.\n\t */\n\tconst { tabs, sectionsContentMap } = useMemo( () => {\n\t\tlet mappedTabs = {\n\t\t\ttabs: [],\n\t\t\tsectionsContentMap: {},\n\t\t};\n\t\tif ( sections.length ) {\n\t\t\tmappedTabs = sections.reduce(\n\t\t\t\t( accumulator, { name, tabLabel: title, content } ) => {\n\t\t\t\t\taccumulator.tabs.push( { name, title } );\n\t\t\t\t\taccumulator.sectionsContentMap[ name ] = content;\n\t\t\t\t\treturn accumulator;\n\t\t\t\t},\n\t\t\t\t{ tabs: [], sectionsContentMap: {} }\n\t\t\t);\n\t\t}\n\t\treturn mappedTabs;\n\t}, [ sections ] );\n\n\tconst getCurrentTab = useCallback(\n\t\t( tab ) => sectionsContentMap[ tab.name ] || null,\n\t\t[ sectionsContentMap ]\n\t);\n\n\tlet modalContent;\n\t// We render different components based on the viewport size.\n\tif ( isLargeViewport ) {\n\t\tmodalContent = (\n\t\t\t<TabPanel\n\t\t\t\tclassName=\"interface-preferences__tabs\"\n\t\t\t\ttabs={ tabs }\n\t\t\t\tinitialTabName={\n\t\t\t\t\tactiveMenu !== PREFERENCES_MENU ? activeMenu : undefined\n\t\t\t\t}\n\t\t\t\tonSelect={ setActiveMenu }\n\t\t\t\torientation=\"vertical\"\n\t\t\t>\n\t\t\t\t{ getCurrentTab }\n\t\t\t</TabPanel>\n\t\t);\n\t} else {\n\t\tmodalContent = (\n\t\t\t<NavigatorProvider\n\t\t\t\tinitialPath=\"/\"\n\t\t\t\tclassName=\"interface-preferences__provider\"\n\t\t\t>\n\t\t\t\t<NavigatorScreen path=\"/\">\n\t\t\t\t\t<Card isBorderless size=\"small\">\n\t\t\t\t\t\t<CardBody>\n\t\t\t\t\t\t\t<ItemGroup>\n\t\t\t\t\t\t\t\t{ tabs.map( ( tab ) => {\n\t\t\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t\t\t<NavigatorButton\n\t\t\t\t\t\t\t\t\t\t\tkey={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tpath={ tab.name }\n\t\t\t\t\t\t\t\t\t\t\tas={ Item }\n\t\t\t\t\t\t\t\t\t\t\tisAction\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<HStack justify=\"space-between\">\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t{ tab.title }\n\t\t\t\t\t\t\t\t\t\t\t\t\t</Truncate>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t<FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t\t\t</FlexItem>\n\t\t\t\t\t\t\t\t\t\t\t</HStack>\n\t\t\t\t\t\t\t\t\t\t</NavigatorButton>\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</ItemGroup>\n\t\t\t\t\t\t</CardBody>\n\t\t\t\t\t</Card>\n\t\t\t\t</NavigatorScreen>\n\t\t\t\t{ sections.length &&\n\t\t\t\t\tsections.map( ( section ) => {\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<NavigatorScreen\n\t\t\t\t\t\t\t\tkey={ `${ section.name }-menu` }\n\t\t\t\t\t\t\t\tpath={ section.name }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Card isBorderless size=\"large\">\n\t\t\t\t\t\t\t\t\t<CardHeader\n\t\t\t\t\t\t\t\t\t\tisBorderless={ false }\n\t\t\t\t\t\t\t\t\t\tjustify=\"left\"\n\t\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\t\tgap=\"6\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<NavigatorBackButton\n\t\t\t\t\t\t\t\t\t\t\ticon={\n\t\t\t\t\t\t\t\t\t\t\t\tisRTL()\n\t\t\t\t\t\t\t\t\t\t\t\t\t? chevronRight\n\t\t\t\t\t\t\t\t\t\t\t\t\t: chevronLeft\n\t\t\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\t\t\taria-label={ __(\n\t\t\t\t\t\t\t\t\t\t\t\t'Navigate to the previous view'\n\t\t\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t<Text size=\"16\">\n\t\t\t\t\t\t\t\t\t\t\t{ section.tabLabel }\n\t\t\t\t\t\t\t\t\t\t</Text>\n\t\t\t\t\t\t\t\t\t</CardHeader>\n\t\t\t\t\t\t\t\t\t<CardBody>{ section.content }</CardBody>\n\t\t\t\t\t\t\t\t</Card>\n\t\t\t\t\t\t\t</NavigatorScreen>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t</NavigatorProvider>\n\t\t);\n\t}\n\n\treturn modalContent;\n}\n"]}