@wordpress/interface 9.38.0 → 10.0.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 ## Unreleased
 
+## 10.0.0 (2026-08-26)
+
+### Breaking Changes
+
+-   `ActionItem`: `as` now defaults to `MenuItem` instead of `Button` ([#81507](https://github.com/WordPress/gutenberg/pull/81507)).
+-   `ActionItem.Slot`: Remove the `bubblesVirtually` prop ([#81507](https://github.com/WordPress/gutenberg/pull/81507)).
+
 ## 9.38.0 (2026-08-12)
 
 ### Enhancements

package/build/components/action-item/index.cjs

@@ -25,58 +25,34 @@ module.exports = __toCommonJS(action_item_exports);
 var import_components = require("@wordpress/components");
 var import_element = require("@wordpress/element");
 var import_jsx_runtime = require("react/jsx-runtime");
-var noop = () => {
-};
 function ActionItemSlot({
   name,
   as: Component = import_components.MenuGroup,
   fillProps = {},
-  bubblesVirtually,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_components.Slot,
-    {
-      name,
-      bubblesVirtually,
-      fillProps,
-      children: (fills) => {
-        if (!import_element.Children.toArray(fills).length) {
-          return null;
-        }
-        const initializedByPlugins = [];
-        import_element.Children.forEach(
-          fills,
-          ({
-            props: { __unstableExplicitMenuItem, __unstableTarget }
-          }) => {
-            if (__unstableTarget && __unstableExplicitMenuItem) {
-              initializedByPlugins.push(__unstableTarget);
-            }
-          }
-        );
-        const children = import_element.Children.map(fills, (child) => {
-          if (!child.props.__unstableExplicitMenuItem && initializedByPlugins.includes(
-            child.props.__unstableTarget
-          )) {
-            return null;
-          }
-          return child;
-        });
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, children });
-      }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Slot, { name, fillProps, children: (fills) => {
+    const items = import_element.Children.toArray(fills);
+    if (!items.length) {
+      return null;
     }
-  );
+    if (typeof children === "function") {
+      return children(items);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ...props, children: items });
+  } });
 }
-function ActionItem({ name, as: Component = import_components.Button, onClick, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Fill, { name, children: ({ onClick: fpOnClick }) => {
+function ActionItem({ name, as, onClick, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Fill, { name, children: ({ as: slotAs = import_components.MenuItem, onClick: slotOnClick }) => {
+    const Component = as ?? slotAs;
+    const handlers = [onClick, slotOnClick].filter(Boolean);
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       Component,
       {
-        onClick: onClick || fpOnClick ? (...args) => {
-          (onClick || noop)(...args);
-          (fpOnClick || noop)(...args);
-        } : void 0,
+        onClick: handlers.length ? (...args) => handlers.forEach(
+          (handler) => handler(...args)
+        ) : void 0,
         ...props
       }
     );

package/build/components/action-item/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/action-item/index.js"],
-  "sourcesContent": ["import { MenuGroup, Button, Slot, Fill } from '@wordpress/components';\nimport { Children } from '@wordpress/element';\n\nconst noop = () => {};\n\nfunction ActionItemSlot( {\n\tname,\n\tas: Component = MenuGroup,\n\tfillProps = {},\n\tbubblesVirtually,\n\t...props\n} ) {\n\treturn (\n\t\t<Slot\n\t\t\tname={ name }\n\t\t\tbubblesVirtually={ bubblesVirtually }\n\t\t\tfillProps={ fillProps }\n\t\t>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif ( ! Children.toArray( fills ).length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\t// Special handling exists for backward compatibility.\n\t\t\t\t// It ensures that menu items created by plugin authors aren't\n\t\t\t\t// duplicated with automatically injected menu items coming\n\t\t\t\t// from pinnable plugin sidebars.\n\t\t\t\t// @see https://github.com/WordPress/gutenberg/issues/14457\n\t\t\t\tconst initializedByPlugins = [];\n\t\t\t\tChildren.forEach(\n\t\t\t\t\tfills,\n\t\t\t\t\t( {\n\t\t\t\t\t\tprops: { __unstableExplicitMenuItem, __unstableTarget },\n\t\t\t\t\t} ) => {\n\t\t\t\t\t\tif ( __unstableTarget && __unstableExplicitMenuItem ) {\n\t\t\t\t\t\t\tinitializedByPlugins.push( __unstableTarget );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tconst children = Children.map( fills, ( child ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\t! child.props.__unstableExplicitMenuItem &&\n\t\t\t\t\t\tinitializedByPlugins.includes(\n\t\t\t\t\t\t\tchild.props.__unstableTarget\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn child;\n\t\t\t\t} );\n\n\t\t\t\treturn <Component { ...props }>{ children }</Component>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n\nfunction ActionItem( { name, as: Component = Button, onClick, ...props } ) {\n\treturn (\n\t\t<Fill name={ name }>\n\t\t\t{ ( { onClick: fpOnClick } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tonClick || fpOnClick\n\t\t\t\t\t\t\t\t? ( ...args ) => {\n\t\t\t\t\t\t\t\t\t\t( onClick || noop )( ...args );\n\t\t\t\t\t\t\t\t\t\t( fpOnClick || noop )( ...args );\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Fill>\n\t);\n}\n\nActionItem.Slot = ActionItemSlot;\n\nexport default ActionItem;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAA8C;AAC9C,qBAAyB;AAkDd;AAhDX,IAAM,OAAO,MAAM;AAAC;AAEpB,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,YAAY,CAAC;AAAA,EACb;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,WAAE,UAAW;AACd,YAAK,CAAE,wBAAS,QAAS,KAAM,EAAE,QAAS;AACzC,iBAAO;AAAA,QACR;AAOA,cAAM,uBAAuB,CAAC;AAC9B,gCAAS;AAAA,UACR;AAAA,UACA,CAAE;AAAA,YACD,OAAO,EAAE,4BAA4B,iBAAiB;AAAA,UACvD,MAAO;AACN,gBAAK,oBAAoB,4BAA6B;AACrD,mCAAqB,KAAM,gBAAiB;AAAA,YAC7C;AAAA,UACD;AAAA,QACD;AACA,cAAM,WAAW,wBAAS,IAAK,OAAO,CAAE,UAAW;AAClD,cACC,CAAE,MAAM,MAAM,8BACd,qBAAqB;AAAA,YACpB,MAAM,MAAM;AAAA,UACb,GACC;AACD,mBAAO;AAAA,UACR;AACA,iBAAO;AAAA,QACR,CAAE;AAEF,eAAO,4CAAC,aAAY,GAAG,OAAU,UAAU;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,WAAY,EAAE,MAAM,IAAI,YAAY,0BAAQ,SAAS,GAAG,MAAM,GAAI;AAC1E,SACC,4CAAC,0BAAK,MACH,WAAE,EAAE,SAAS,UAAU,MAAO;AAC/B,WACC;AAAA,MAAC;AAAA;AAAA,QACA,SACC,WAAW,YACR,IAAK,SAAU;AACf,WAAE,WAAW,MAAQ,GAAG,IAAK;AAC7B,WAAE,aAAa,MAAQ,GAAG,IAAK;AAAA,QAC/B,IACA;AAAA,QAEF,GAAG;AAAA;AAAA,IACN;AAAA,EAEF,GACD;AAEF;AAEA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
+  "sourcesContent": ["import { MenuGroup, MenuItem, Slot, Fill } from '@wordpress/components';\nimport { Children } from '@wordpress/element';\n\nfunction ActionItemSlot( {\n\tname,\n\tas: Component = MenuGroup,\n\tfillProps = {},\n\tchildren,\n\t...props\n} ) {\n\treturn (\n\t\t<Slot name={ name } fillProps={ fillProps }>\n\t\t\t{ ( fills ) => {\n\t\t\t\t// Each fill renders an array of its own, so flatten them into a\n\t\t\t\t// single list before handing them over.\n\t\t\t\tconst items = Children.toArray( fills );\n\n\t\t\t\tif ( ! items.length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( typeof children === 'function' ) {\n\t\t\t\t\treturn children( items );\n\t\t\t\t}\n\n\t\t\t\treturn <Component { ...props }>{ items }</Component>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n\nfunction ActionItem( { name, as, onClick, ...props } ) {\n\treturn (\n\t\t<Fill name={ name }>\n\t\t\t{ ( { as: slotAs = MenuItem, onClick: slotOnClick } ) => {\n\t\t\t\t// The slot provides the component to render the item with, so\n\t\t\t\t// that it fits the menu it ends up in, and an onClick handler,\n\t\t\t\t// for example one that closes that menu. The `as` prop\n\t\t\t\t// replaces the component. The `onClick` prop does not replace\n\t\t\t\t// the handler: both run.\n\t\t\t\tconst Component = as ?? slotAs;\n\t\t\t\tconst handlers = [ onClick, slotOnClick ].filter( Boolean );\n\n\t\t\t\treturn (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\thandlers.length\n\t\t\t\t\t\t\t\t? ( ...args ) =>\n\t\t\t\t\t\t\t\t\t\thandlers.forEach( ( handler ) =>\n\t\t\t\t\t\t\t\t\t\t\thandler( ...args )\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Fill>\n\t);\n}\n\nActionItem.Slot = ActionItemSlot;\n\nexport default ActionItem;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAgD;AAChD,qBAAyB;AAwBd;AAtBX,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,YAAY,CAAC;AAAA,EACb;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC,4CAAC,0BAAK,MAAc,WACjB,WAAE,UAAW;AAGd,UAAM,QAAQ,wBAAS,QAAS,KAAM;AAEtC,QAAK,CAAE,MAAM,QAAS;AACrB,aAAO;AAAA,IACR;AAEA,QAAK,OAAO,aAAa,YAAa;AACrC,aAAO,SAAU,KAAM;AAAA,IACxB;AAEA,WAAO,4CAAC,aAAY,GAAG,OAAU,iBAAO;AAAA,EACzC,GACD;AAEF;AAEA,SAAS,WAAY,EAAE,MAAM,IAAI,SAAS,GAAG,MAAM,GAAI;AACtD,SACC,4CAAC,0BAAK,MACH,WAAE,EAAE,IAAI,SAAS,4BAAU,SAAS,YAAY,MAAO;AAMxD,UAAM,YAAY,MAAM;AACxB,UAAM,WAAW,CAAE,SAAS,WAAY,EAAE,OAAQ,OAAQ;AAE1D,WACC;AAAA,MAAC;AAAA;AAAA,QACA,SACC,SAAS,SACN,IAAK,SACL,SAAS;AAAA,UAAS,CAAE,YACnB,QAAS,GAAG,IAAK;AAAA,QAClB,IACA;AAAA,QAEF,GAAG;AAAA;AAAA,IACN;AAAA,EAEF,GACD;AAEF;AAEA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
   "names": []
 }

package/build/components/complementary-area/index.cjs

@@ -43,7 +43,7 @@ var import_preferences = require("@wordpress/preferences");
 var import_compose = require("@wordpress/compose");
 var import_plugins = require("@wordpress/plugins");
 var import_complementary_area_header = __toESM(require("../complementary-area-header/index.cjs"));
-var import_complementary_area_more_menu_item = __toESM(require("../complementary-area-more-menu-item/index.cjs"));
+var import_complementary_area_more_menu_item = require("../complementary-area-more-menu-item/index.cjs");
 var import_complementary_area_toggle = __toESM(require("../complementary-area-toggle/index.cjs"));
 var import_pinned_items = __toESM(require("../pinned-items/index.cjs"));
 var import_store = require("../../store/index.cjs");
@@ -193,6 +193,7 @@ function ComplementaryArea({
     },
     [identifier, scope]
   );
+  const hasMenuItem = (0, import_complementary_area_more_menu_item.useHasComplementaryAreaMenuItem)(scope, name);
   const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
   useAdjustComplementaryListener(
     scope,
@@ -243,8 +244,8 @@ function ComplementaryArea({
         shortcut: toggleShortcut
       }
     ) }),
-    name && isPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_complementary_area_more_menu_item.default,
+    name && isPinnable && !hasMenuItem && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_complementary_area_more_menu_item.DefaultComplementaryAreaMoreMenuItem,
       {
         target: name,
         scope,

package/build/components/complementary-area/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area/index.js"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport {\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst variants = {\n\t// `auto` leaves the width to the area's own stylesheet, so it stays in one\n\t// place. framer-motion measures the element to animate, then restores\n\t// `auto`.\n\topen: { width: 'auto' },\n\t// Resolved with the `custom` value passed to `AnimatePresence`, which is\n\t// the only way an already removed element can be given a fresh transition.\n\tclosed: ( transition ) => ( { width: 0, transition } ),\n};\n\n/**\n * Renders the complementary area container, replacing the default `div` with\n * the element given via the `render` prop.\n *\n * `className` and `style` are composed rather than overwritten, since the\n * container is also the scroll container for the sidebar.\n *\n * @param {Object} [render] Replacement element.\n * @param {Object} props    Props for the container.\n */\nfunction renderContainer( render, props ) {\n\tif ( isValidElement( render ) ) {\n\t\treturn cloneElement( render, {\n\t\t\t...props,\n\t\t\tclassName: clsx( render.props.className, props.className ),\n\t\t\tstyle: { ...render.props.style, ...props.style },\n\t\t} );\n\t}\n\n\treturn <div { ...props } />;\n}\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n\trender,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// Swapping one open area straight for another should not animate.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst isSwitchingAreas =\n\t\t!! previousActiveArea &&\n\t\t!! activeArea &&\n\t\tactiveArea !== previousActiveArea;\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion || isMobileViewport || isSwitchingAreas\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false } custom={ transition }>\n\t\t\t\t{ isActive && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderContainer( render, {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\trender,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\trender={ render }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\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\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],
-  "mappings": "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",
-  "names": ["clsx", "AnimatePresence", "motion", "interfaceStore", "preferencesStore", "viewportStore", "PinnedItems", "ComplementaryAreaToggle", "ComplementaryAreaMoreMenuItem", "ComplementaryAreaHeader"]
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport {\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport {\n\tDefaultComplementaryAreaMoreMenuItem,\n\tuseHasComplementaryAreaMenuItem,\n} from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst variants = {\n\t// `auto` leaves the width to the area's own stylesheet, so it stays in one\n\t// place. framer-motion measures the element to animate, then restores\n\t// `auto`.\n\topen: { width: 'auto' },\n\t// Resolved with the `custom` value passed to `AnimatePresence`, which is\n\t// the only way an already removed element can be given a fresh transition.\n\tclosed: ( transition ) => ( { width: 0, transition } ),\n};\n\n/**\n * Renders the complementary area container, replacing the default `div` with\n * the element given via the `render` prop.\n *\n * `className` and `style` are composed rather than overwritten, since the\n * container is also the scroll container for the sidebar.\n *\n * @param {Object} [render] Replacement element.\n * @param {Object} props    Props for the container.\n */\nfunction renderContainer( render, props ) {\n\tif ( isValidElement( render ) ) {\n\t\treturn cloneElement( render, {\n\t\t\t...props,\n\t\t\tclassName: clsx( render.props.className, props.className ),\n\t\t\tstyle: { ...render.props.style, ...props.style },\n\t\t} );\n\t}\n\n\treturn <div { ...props } />;\n}\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n\trender,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// Swapping one open area straight for another should not animate.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst isSwitchingAreas =\n\t\t!! previousActiveArea &&\n\t\t!! activeArea &&\n\t\tactiveArea !== previousActiveArea;\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion || isMobileViewport || isSwitchingAreas\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false } custom={ transition }>\n\t\t\t\t{ isActive && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderContainer( render, {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\trender,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst hasMenuItem = useHasComplementaryAreaMenuItem( scope, name );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && ! hasMenuItem && (\n\t\t\t\t<DefaultComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</DefaultComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\trender={ render }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\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\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],
+  "mappings": "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",
+  "names": ["clsx", "AnimatePresence", "motion", "interfaceStore", "preferencesStore", "viewportStore", "PinnedItems", "ComplementaryAreaToggle", "ComplementaryAreaHeader"]
 }

package/build/components/complementary-area-more-menu-item/index.cjs

@@ -29,43 +29,36 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // packages/interface/src/components/complementary-area-more-menu-item/index.js
 var complementary_area_more_menu_item_exports = {};
 __export(complementary_area_more_menu_item_exports, {
-  default: () => ComplementaryAreaMoreMenuItem
+  DefaultComplementaryAreaMoreMenuItem: () => DefaultComplementaryAreaMoreMenuItem,
+  default: () => ComplementaryAreaMoreMenuItem,
+  useHasComplementaryAreaMenuItem: () => useHasComplementaryAreaMenuItem
 });
 module.exports = __toCommonJS(complementary_area_more_menu_item_exports);
+var import_compose = require("@wordpress/compose");
+var import_element = require("@wordpress/element");
 var import_icons = require("@wordpress/icons");
-var import_components = require("@wordpress/components");
 var import_complementary_area_toggle = __toESM(require("../complementary-area-toggle/index.cjs"));
 var import_action_item = __toESM(require("../action-item/index.cjs"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var PluginsMenuItem = ({
-  // Menu item is marked with unstable prop for backward compatibility.
-  // They are removed so they don't leak to DOM elements.
-  // @see https://github.com/WordPress/gutenberg/issues/14457
-  __unstableExplicitMenuItem,
-  __unstableTarget,
-  ...restProps
-}) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.MenuItem, { ...restProps });
-function ComplementaryAreaMoreMenuItem({
+var menuItems = (0, import_compose.observableMap)();
+function useHasComplementaryAreaMenuItem(scope, target) {
+  return !!(0, import_compose.useObservableValue)(menuItems, `${scope}/${target}`);
+}
+function DefaultComplementaryAreaMoreMenuItem({
   scope,
   target,
-  __unstableExplicitMenuItem,
   ...props
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_complementary_area_toggle.default,
     {
-      as: (toggleProps) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          import_action_item.default,
-          {
-            __unstableExplicitMenuItem,
-            __unstableTarget: `${scope}/${target}`,
-            as: PluginsMenuItem,
-            name: `${scope}/plugin-more-menu`,
-            ...toggleProps
-          }
-        );
-      },
+      as: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_action_item.default,
+        {
+          name: `${scope}/plugin-more-menu`,
+          ...toggleProps
+        }
+      ),
       role: "menuitemcheckbox",
       selectedIcon: import_icons.check,
       name: target,
@@ -74,4 +67,39 @@ function ComplementaryAreaMoreMenuItem({
     }
   );
 }
+function ComplementaryAreaMoreMenuItem({
+  scope,
+  target,
+  // Accepted so they don't leak to DOM elements. Registering the menu item is
+  // what keeps `ComplementaryArea` from injecting a second one.
+  __unstableExplicitMenuItem,
+  __unstableTarget,
+  ...props
+}) {
+  (0, import_element.useLayoutEffect)(() => {
+    const key = `${scope}/${target}`;
+    menuItems.set(key, (menuItems.get(key) ?? 0) + 1);
+    return () => {
+      const count = menuItems.get(key) - 1;
+      if (count) {
+        menuItems.set(key, count);
+      } else {
+        menuItems.delete(key);
+      }
+    };
+  }, [scope, target]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    DefaultComplementaryAreaMoreMenuItem,
+    {
+      scope,
+      target,
+      ...props
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DefaultComplementaryAreaMoreMenuItem,
+  useHasComplementaryAreaMenuItem
+});
 //# sourceMappingURL=index.cjs.map

package/build/components/complementary-area-more-menu-item/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area-more-menu-item/index.js"],
-  "sourcesContent": ["import { check } from '@wordpress/icons';\nimport { MenuItem } from '@wordpress/components';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport ActionItem from '../action-item';\n\nconst PluginsMenuItem = ( {\n\t// Menu item is marked with unstable prop for backward compatibility.\n\t// They are removed so they don't leak to DOM elements.\n\t// @see https://github.com/WordPress/gutenberg/issues/14457\n\t__unstableExplicitMenuItem,\n\t__unstableTarget,\n\t...restProps\n} ) => <MenuItem { ...restProps } />;\n\nexport default function ComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t__unstableExplicitMenuItem,\n\t...props\n} ) {\n\treturn (\n\t\t<ComplementaryAreaToggle\n\t\t\tas={ ( toggleProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ActionItem\n\t\t\t\t\t\t__unstableExplicitMenuItem={\n\t\t\t\t\t\t\t__unstableExplicitMenuItem\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstableTarget={ `${ scope }/${ target }` }\n\t\t\t\t\t\tas={ PluginsMenuItem }\n\t\t\t\t\t\tname={ `${ scope }/plugin-more-menu` }\n\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tselectedIcon={ check }\n\t\t\tname={ target }\n\t\t\tscope={ scope }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAsB;AACtB,wBAAyB;AACzB,uCAAoC;AACpC,yBAAuB;AAShB;AAPP,IAAM,kBAAkB,CAAE;AAAA;AAAA;AAAA;AAAA,EAIzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAO,4CAAC,8BAAW,GAAG,WAAY;AAEnB,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC,iCAAAA;AAAA,IAAA;AAAA,MACA,IAAK,CAAE,gBAAiB;AACvB,eACC;AAAA,UAAC,mBAAAC;AAAA,UAAA;AAAA,YACA;AAAA,YAGA,kBAAmB,GAAI,KAAM,IAAK,MAAO;AAAA,YACzC,IAAK;AAAA,YACL,MAAO,GAAI,KAAM;AAAA,YACf,GAAG;AAAA;AAAA,QACN;AAAA,MAEF;AAAA,MACA,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["import { observableMap, useObservableValue } from '@wordpress/compose';\nimport { useLayoutEffect } from '@wordpress/element';\nimport { check } from '@wordpress/icons';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport ActionItem from '../action-item';\n\n// How many more menu items are rendered for a complementary area, by\n// `scope/target`.\nconst menuItems = observableMap();\n\nexport function useHasComplementaryAreaMenuItem( scope, target ) {\n\treturn !! useObservableValue( menuItems, `${ scope }/${ target }` );\n}\n\n// The more menu item `ComplementaryArea` injects for every pinnable area. It is\n// left out while a plugin renders one of its own for the same area.\n// @see https://github.com/WordPress/gutenberg/issues/14457\nexport function DefaultComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t...props\n} ) {\n\treturn (\n\t\t<ComplementaryAreaToggle\n\t\t\tas={ ( toggleProps ) => (\n\t\t\t\t<ActionItem\n\t\t\t\t\tname={ `${ scope }/plugin-more-menu` }\n\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tselectedIcon={ check }\n\t\t\tname={ target }\n\t\t\tscope={ scope }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t// Accepted so they don't leak to DOM elements. Registering the menu item is\n\t// what keeps `ComplementaryArea` from injecting a second one.\n\t__unstableExplicitMenuItem,\n\t__unstableTarget,\n\t...props\n} ) {\n\tuseLayoutEffect( () => {\n\t\tconst key = `${ scope }/${ target }`;\n\t\tmenuItems.set( key, ( menuItems.get( key ) ?? 0 ) + 1 );\n\n\t\treturn () => {\n\t\t\tconst count = menuItems.get( key ) - 1;\n\t\t\tif ( count ) {\n\t\t\t\tmenuItems.set( key, count );\n\t\t\t} else {\n\t\t\t\tmenuItems.delete( key );\n\t\t\t}\n\t\t};\n\t}, [ scope, target ] );\n\n\treturn (\n\t\t<DefaultComplementaryAreaMoreMenuItem\n\t\t\tscope={ scope }\n\t\t\ttarget={ target }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkD;AAClD,qBAAgC;AAChC,mBAAsB;AACtB,uCAAoC;AACpC,yBAAuB;AAqBnB;AAjBJ,IAAM,gBAAY,8BAAc;AAEzB,SAAS,gCAAiC,OAAO,QAAS;AAChE,SAAO,CAAC,KAAE,mCAAoB,WAAW,GAAI,KAAM,IAAK,MAAO,EAAG;AACnE;AAKO,SAAS,qCAAsC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC,iCAAAA;AAAA,IAAA;AAAA,MACA,IAAK,CAAE,gBACN;AAAA,QAAC,mBAAAC;AAAA,QAAA;AAAA,UACA,MAAO,GAAI,KAAM;AAAA,UACf,GAAG;AAAA;AAAA,MACN;AAAA,MAED,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;AAEe,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,sCAAiB,MAAM;AACtB,UAAM,MAAM,GAAI,KAAM,IAAK,MAAO;AAClC,cAAU,IAAK,MAAO,UAAU,IAAK,GAAI,KAAK,KAAM,CAAE;AAEtD,WAAO,MAAM;AACZ,YAAM,QAAQ,UAAU,IAAK,GAAI,IAAI;AACrC,UAAK,OAAQ;AACZ,kBAAU,IAAK,KAAK,KAAM;AAAA,MAC3B,OAAO;AACN,kBAAU,OAAQ,GAAI;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,OAAO,MAAO,CAAE;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": ["ComplementaryAreaToggle", "ActionItem"]
 }

package/build-module/components/action-item/index.mjs

@@ -1,59 +1,35 @@
 // packages/interface/src/components/action-item/index.js
-import { MenuGroup, Button, Slot, Fill } from "@wordpress/components";
+import { MenuGroup, MenuItem, Slot, Fill } from "@wordpress/components";
 import { Children } from "@wordpress/element";
 import { jsx } from "react/jsx-runtime";
-var noop = () => {
-};
 function ActionItemSlot({
   name,
   as: Component = MenuGroup,
   fillProps = {},
-  bubblesVirtually,
+  children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
-    Slot,
-    {
-      name,
-      bubblesVirtually,
-      fillProps,
-      children: (fills) => {
-        if (!Children.toArray(fills).length) {
-          return null;
-        }
-        const initializedByPlugins = [];
-        Children.forEach(
-          fills,
-          ({
-            props: { __unstableExplicitMenuItem, __unstableTarget }
-          }) => {
-            if (__unstableTarget && __unstableExplicitMenuItem) {
-              initializedByPlugins.push(__unstableTarget);
-            }
-          }
-        );
-        const children = Children.map(fills, (child) => {
-          if (!child.props.__unstableExplicitMenuItem && initializedByPlugins.includes(
-            child.props.__unstableTarget
-          )) {
-            return null;
-          }
-          return child;
-        });
-        return /* @__PURE__ */ jsx(Component, { ...props, children });
-      }
+  return /* @__PURE__ */ jsx(Slot, { name, fillProps, children: (fills) => {
+    const items = Children.toArray(fills);
+    if (!items.length) {
+      return null;
     }
-  );
+    if (typeof children === "function") {
+      return children(items);
+    }
+    return /* @__PURE__ */ jsx(Component, { ...props, children: items });
+  } });
 }
-function ActionItem({ name, as: Component = Button, onClick, ...props }) {
-  return /* @__PURE__ */ jsx(Fill, { name, children: ({ onClick: fpOnClick }) => {
+function ActionItem({ name, as, onClick, ...props }) {
+  return /* @__PURE__ */ jsx(Fill, { name, children: ({ as: slotAs = MenuItem, onClick: slotOnClick }) => {
+    const Component = as ?? slotAs;
+    const handlers = [onClick, slotOnClick].filter(Boolean);
     return /* @__PURE__ */ jsx(
       Component,
       {
-        onClick: onClick || fpOnClick ? (...args) => {
-          (onClick || noop)(...args);
-          (fpOnClick || noop)(...args);
-        } : void 0,
+        onClick: handlers.length ? (...args) => handlers.forEach(
+          (handler) => handler(...args)
+        ) : void 0,
         ...props
       }
     );

package/build-module/components/action-item/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/action-item/index.js"],
-  "sourcesContent": ["import { MenuGroup, Button, Slot, Fill } from '@wordpress/components';\nimport { Children } from '@wordpress/element';\n\nconst noop = () => {};\n\nfunction ActionItemSlot( {\n\tname,\n\tas: Component = MenuGroup,\n\tfillProps = {},\n\tbubblesVirtually,\n\t...props\n} ) {\n\treturn (\n\t\t<Slot\n\t\t\tname={ name }\n\t\t\tbubblesVirtually={ bubblesVirtually }\n\t\t\tfillProps={ fillProps }\n\t\t>\n\t\t\t{ ( fills ) => {\n\t\t\t\tif ( ! Children.toArray( fills ).length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\t// Special handling exists for backward compatibility.\n\t\t\t\t// It ensures that menu items created by plugin authors aren't\n\t\t\t\t// duplicated with automatically injected menu items coming\n\t\t\t\t// from pinnable plugin sidebars.\n\t\t\t\t// @see https://github.com/WordPress/gutenberg/issues/14457\n\t\t\t\tconst initializedByPlugins = [];\n\t\t\t\tChildren.forEach(\n\t\t\t\t\tfills,\n\t\t\t\t\t( {\n\t\t\t\t\t\tprops: { __unstableExplicitMenuItem, __unstableTarget },\n\t\t\t\t\t} ) => {\n\t\t\t\t\t\tif ( __unstableTarget && __unstableExplicitMenuItem ) {\n\t\t\t\t\t\t\tinitializedByPlugins.push( __unstableTarget );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t);\n\t\t\t\tconst children = Children.map( fills, ( child ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\t! child.props.__unstableExplicitMenuItem &&\n\t\t\t\t\t\tinitializedByPlugins.includes(\n\t\t\t\t\t\t\tchild.props.__unstableTarget\n\t\t\t\t\t\t)\n\t\t\t\t\t) {\n\t\t\t\t\t\treturn null;\n\t\t\t\t\t}\n\t\t\t\t\treturn child;\n\t\t\t\t} );\n\n\t\t\t\treturn <Component { ...props }>{ children }</Component>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n\nfunction ActionItem( { name, as: Component = Button, onClick, ...props } ) {\n\treturn (\n\t\t<Fill name={ name }>\n\t\t\t{ ( { onClick: fpOnClick } ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\tonClick || fpOnClick\n\t\t\t\t\t\t\t\t? ( ...args ) => {\n\t\t\t\t\t\t\t\t\t\t( onClick || noop )( ...args );\n\t\t\t\t\t\t\t\t\t\t( fpOnClick || noop )( ...args );\n\t\t\t\t\t\t\t\t  }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Fill>\n\t);\n}\n\nActionItem.Slot = ActionItemSlot;\n\nexport default ActionItem;\n"],
-  "mappings": ";AAAA,SAAS,WAAW,QAAQ,MAAM,YAAY;AAC9C,SAAS,gBAAgB;AAkDd;AAhDX,IAAM,OAAO,MAAM;AAAC;AAEpB,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,YAAY,CAAC;AAAA,EACb;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MAEE,WAAE,UAAW;AACd,YAAK,CAAE,SAAS,QAAS,KAAM,EAAE,QAAS;AACzC,iBAAO;AAAA,QACR;AAOA,cAAM,uBAAuB,CAAC;AAC9B,iBAAS;AAAA,UACR;AAAA,UACA,CAAE;AAAA,YACD,OAAO,EAAE,4BAA4B,iBAAiB;AAAA,UACvD,MAAO;AACN,gBAAK,oBAAoB,4BAA6B;AACrD,mCAAqB,KAAM,gBAAiB;AAAA,YAC7C;AAAA,UACD;AAAA,QACD;AACA,cAAM,WAAW,SAAS,IAAK,OAAO,CAAE,UAAW;AAClD,cACC,CAAE,MAAM,MAAM,8BACd,qBAAqB;AAAA,YACpB,MAAM,MAAM;AAAA,UACb,GACC;AACD,mBAAO;AAAA,UACR;AACA,iBAAO;AAAA,QACR,CAAE;AAEF,eAAO,oBAAC,aAAY,GAAG,OAAU,UAAU;AAAA,MAC5C;AAAA;AAAA,EACD;AAEF;AAEA,SAAS,WAAY,EAAE,MAAM,IAAI,YAAY,QAAQ,SAAS,GAAG,MAAM,GAAI;AAC1E,SACC,oBAAC,QAAK,MACH,WAAE,EAAE,SAAS,UAAU,MAAO;AAC/B,WACC;AAAA,MAAC;AAAA;AAAA,QACA,SACC,WAAW,YACR,IAAK,SAAU;AACf,WAAE,WAAW,MAAQ,GAAG,IAAK;AAC7B,WAAE,aAAa,MAAQ,GAAG,IAAK;AAAA,QAC/B,IACA;AAAA,QAEF,GAAG;AAAA;AAAA,IACN;AAAA,EAEF,GACD;AAEF;AAEA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
+  "sourcesContent": ["import { MenuGroup, MenuItem, Slot, Fill } from '@wordpress/components';\nimport { Children } from '@wordpress/element';\n\nfunction ActionItemSlot( {\n\tname,\n\tas: Component = MenuGroup,\n\tfillProps = {},\n\tchildren,\n\t...props\n} ) {\n\treturn (\n\t\t<Slot name={ name } fillProps={ fillProps }>\n\t\t\t{ ( fills ) => {\n\t\t\t\t// Each fill renders an array of its own, so flatten them into a\n\t\t\t\t// single list before handing them over.\n\t\t\t\tconst items = Children.toArray( fills );\n\n\t\t\t\tif ( ! items.length ) {\n\t\t\t\t\treturn null;\n\t\t\t\t}\n\n\t\t\t\tif ( typeof children === 'function' ) {\n\t\t\t\t\treturn children( items );\n\t\t\t\t}\n\n\t\t\t\treturn <Component { ...props }>{ items }</Component>;\n\t\t\t} }\n\t\t</Slot>\n\t);\n}\n\nfunction ActionItem( { name, as, onClick, ...props } ) {\n\treturn (\n\t\t<Fill name={ name }>\n\t\t\t{ ( { as: slotAs = MenuItem, onClick: slotOnClick } ) => {\n\t\t\t\t// The slot provides the component to render the item with, so\n\t\t\t\t// that it fits the menu it ends up in, and an onClick handler,\n\t\t\t\t// for example one that closes that menu. The `as` prop\n\t\t\t\t// replaces the component. The `onClick` prop does not replace\n\t\t\t\t// the handler: both run.\n\t\t\t\tconst Component = as ?? slotAs;\n\t\t\t\tconst handlers = [ onClick, slotOnClick ].filter( Boolean );\n\n\t\t\t\treturn (\n\t\t\t\t\t<Component\n\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\thandlers.length\n\t\t\t\t\t\t\t\t? ( ...args ) =>\n\t\t\t\t\t\t\t\t\t\thandlers.forEach( ( handler ) =>\n\t\t\t\t\t\t\t\t\t\t\thandler( ...args )\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\t{ ...props }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t</Fill>\n\t);\n}\n\nActionItem.Slot = ActionItemSlot;\n\nexport default ActionItem;\n"],
+  "mappings": ";AAAA,SAAS,WAAW,UAAU,MAAM,YAAY;AAChD,SAAS,gBAAgB;AAwBd;AAtBX,SAAS,eAAgB;AAAA,EACxB;AAAA,EACA,IAAI,YAAY;AAAA,EAChB,YAAY,CAAC;AAAA,EACb;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC,oBAAC,QAAK,MAAc,WACjB,WAAE,UAAW;AAGd,UAAM,QAAQ,SAAS,QAAS,KAAM;AAEtC,QAAK,CAAE,MAAM,QAAS;AACrB,aAAO;AAAA,IACR;AAEA,QAAK,OAAO,aAAa,YAAa;AACrC,aAAO,SAAU,KAAM;AAAA,IACxB;AAEA,WAAO,oBAAC,aAAY,GAAG,OAAU,iBAAO;AAAA,EACzC,GACD;AAEF;AAEA,SAAS,WAAY,EAAE,MAAM,IAAI,SAAS,GAAG,MAAM,GAAI;AACtD,SACC,oBAAC,QAAK,MACH,WAAE,EAAE,IAAI,SAAS,UAAU,SAAS,YAAY,MAAO;AAMxD,UAAM,YAAY,MAAM;AACxB,UAAM,WAAW,CAAE,SAAS,WAAY,EAAE,OAAQ,OAAQ;AAE1D,WACC;AAAA,MAAC;AAAA;AAAA,QACA,SACC,SAAS,SACN,IAAK,SACL,SAAS;AAAA,UAAS,CAAE,YACnB,QAAS,GAAG,IAAK;AAAA,QAClB,IACA;AAAA,QAEF,GAAG;AAAA;AAAA,IACN;AAAA,EAEF,GACD;AAEF;AAEA,WAAW,OAAO;AAElB,IAAO,sBAAQ;",
   "names": []
 }

package/build-module/components/complementary-area/index.mjs

@@ -27,7 +27,10 @@ import {
 } from "@wordpress/compose";
 import { usePluginContext } from "@wordpress/plugins";
 import ComplementaryAreaHeader from "../complementary-area-header/index.mjs";
-import ComplementaryAreaMoreMenuItem from "../complementary-area-more-menu-item/index.mjs";
+import {
+  DefaultComplementaryAreaMoreMenuItem,
+  useHasComplementaryAreaMenuItem
+} from "../complementary-area-more-menu-item/index.mjs";
 import ComplementaryAreaToggle from "../complementary-area-toggle/index.mjs";
 import PinnedItems from "../pinned-items/index.mjs";
 import { store as interfaceStore } from "../../store/index.mjs";
@@ -177,6 +180,7 @@ function ComplementaryArea({
     },
     [identifier, scope]
   );
+  const hasMenuItem = useHasComplementaryAreaMenuItem(scope, name);
   const isMobileViewport = useViewportMatch("medium", "<");
   useAdjustComplementaryListener(
     scope,
@@ -227,8 +231,8 @@ function ComplementaryArea({
         shortcut: toggleShortcut
       }
     ) }),
-    name && isPinnable && /* @__PURE__ */ jsx(
-      ComplementaryAreaMoreMenuItem,
+    name && isPinnable && !hasMenuItem && /* @__PURE__ */ jsx(
+      DefaultComplementaryAreaMoreMenuItem,
       {
         target: name,
         scope,

package/build-module/components/complementary-area/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area/index.js"],
-  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport {\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst variants = {\n\t// `auto` leaves the width to the area's own stylesheet, so it stays in one\n\t// place. framer-motion measures the element to animate, then restores\n\t// `auto`.\n\topen: { width: 'auto' },\n\t// Resolved with the `custom` value passed to `AnimatePresence`, which is\n\t// the only way an already removed element can be given a fresh transition.\n\tclosed: ( transition ) => ( { width: 0, transition } ),\n};\n\n/**\n * Renders the complementary area container, replacing the default `div` with\n * the element given via the `render` prop.\n *\n * `className` and `style` are composed rather than overwritten, since the\n * container is also the scroll container for the sidebar.\n *\n * @param {Object} [render] Replacement element.\n * @param {Object} props    Props for the container.\n */\nfunction renderContainer( render, props ) {\n\tif ( isValidElement( render ) ) {\n\t\treturn cloneElement( render, {\n\t\t\t...props,\n\t\t\tclassName: clsx( render.props.className, props.className ),\n\t\t\tstyle: { ...render.props.style, ...props.style },\n\t\t} );\n\t}\n\n\treturn <div { ...props } />;\n}\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n\trender,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// Swapping one open area straight for another should not animate.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst isSwitchingAreas =\n\t\t!! previousActiveArea &&\n\t\t!! activeArea &&\n\t\tactiveArea !== previousActiveArea;\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion || isMobileViewport || isSwitchingAreas\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false } custom={ transition }>\n\t\t\t\t{ isActive && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderContainer( render, {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\trender,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\trender={ render }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\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\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],
-  "mappings": "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",
+  "sourcesContent": ["import clsx from 'clsx';\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport {\n\tcloneElement,\n\tisValidElement,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport {\n\tDefaultComplementaryAreaMoreMenuItem,\n\tuseHasComplementaryAreaMenuItem,\n} from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst variants = {\n\t// `auto` leaves the width to the area's own stylesheet, so it stays in one\n\t// place. framer-motion measures the element to animate, then restores\n\t// `auto`.\n\topen: { width: 'auto' },\n\t// Resolved with the `custom` value passed to `AnimatePresence`, which is\n\t// the only way an already removed element can be given a fresh transition.\n\tclosed: ( transition ) => ( { width: 0, transition } ),\n};\n\n/**\n * Renders the complementary area container, replacing the default `div` with\n * the element given via the `render` prop.\n *\n * `className` and `style` are composed rather than overwritten, since the\n * container is also the scroll container for the sidebar.\n *\n * @param {Object} [render] Replacement element.\n * @param {Object} props    Props for the container.\n */\nfunction renderContainer( render, props ) {\n\tif ( isValidElement( render ) ) {\n\t\treturn cloneElement( render, {\n\t\t\t...props,\n\t\t\tclassName: clsx( render.props.className, props.className ),\n\t\t\tstyle: { ...render.props.style, ...props.style },\n\t\t} );\n\t}\n\n\treturn <div { ...props } />;\n}\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n\trender,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// Swapping one open area straight for another should not animate.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst isSwitchingAreas =\n\t\t!! previousActiveArea &&\n\t\t!! activeArea &&\n\t\tactiveArea !== previousActiveArea;\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion || isMobileViewport || isSwitchingAreas\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false } custom={ transition }>\n\t\t\t\t{ isActive && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ renderContainer( render, {\n\t\t\t\t\t\t\tid,\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\tchildren,\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\trender,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst hasMenuItem = useHasComplementaryAreaMenuItem( scope, name );\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && ! hasMenuItem && (\n\t\t\t\t<DefaultComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</DefaultComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t\trender={ render }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\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\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],
+  "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,aAAa,iBAAiB;AACvC,SAAS,UAAU;AACnB,SAAS,OAAO,WAAW,kBAAkB;AAC7C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,qBAAqB;AACvC,SAAS,SAAS,wBAAwB;AAC1C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,OAAO,6BAA6B;AACpC;AAAA,EACC;AAAA,EACA;AAAA,OACM;AACP,OAAO,6BAA6B;AACpC,OAAO,iBAAiB;AACxB,SAAS,SAAS,sBAAsB;AAKhC,SAoSF,UApSE,KAoSF,YApSE;AAHR,IAAM,qBAAqB;AAE3B,SAAS,sBAAuB,EAAE,OAAO,GAAG,MAAM,GAAI;AACrD,SAAO,oBAAC,QAAK,MAAO,qBAAsB,KAAM,IAAO,GAAG,OAAQ;AACnE;AAEA,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIhB,MAAM,EAAE,OAAO,OAAO;AAAA;AAAA;AAAA,EAGtB,QAAQ,CAAE,gBAAkB,EAAE,OAAO,GAAG,WAAW;AACpD;AAYA,SAAS,gBAAiB,QAAQ,OAAQ;AACzC,MAAK,eAAgB,MAAO,GAAI;AAC/B,WAAO,aAAc,QAAQ;AAAA,MAC5B,GAAG;AAAA,MACH,WAAW,KAAM,OAAO,MAAM,WAAW,MAAM,SAAU;AAAA,MACzD,OAAO,EAAE,GAAG,OAAO,MAAM,OAAO,GAAG,MAAM,MAAM;AAAA,IAChD,CAAE;AAAA,EACH;AAEA,SAAO,oBAAC,SAAM,GAAG,OAAQ;AAC1B;AAEA,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAEzD,QAAM,qBAAqB,YAAa,UAAW;AACnD,QAAM,mBACL,CAAC,CAAE,sBACH,CAAC,CAAE,cACH,eAAe;AAChB,QAAM,aAAa;AAAA,IAClB,MAAM;AAAA,IACN,UACC,iBAAiB,oBAAoB,mBAClC,IACA;AAAA,IACJ,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AAAA,EACxB;AAEA,SACC,oBAAC,QAAK,MAAO,qBAAsB,KAAM,IACxC,8BAAC,mBAAgB,SAAU,OAAQ,QAAS,YACzC,sBACD;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,WAAU;AAAA,MAER,0BAAiB,QAAQ;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAE;AAAA;AAAA,EACH,GAEF,GACD;AAEF;AAEA,SAAS,+BACR,OACA,YACA,YACA,UACA,SACC;AACD,QAAM,qBAAqB,OAAQ,KAAM;AACzC,QAAM,4BAA4B,OAAQ,KAAM;AAChD,QAAM,EAAE,yBAAyB,yBAAyB,IACzD,YAAa,cAAe;AAC7B,YAAW,MAAM;AAGhB,QAAK,YAAY,WAAW,CAAE,mBAAmB,SAAU;AAC1D,+BAA0B,KAAM;AAGhC,gCAA0B,UAAU;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA,MAIC,0BAA0B,WAC1B,CAAE,WACF,mBAAmB;AAAA,MAClB;AAGD,gCAA0B,UAAU;AACpC,8BAAyB,OAAO,UAAW;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA,MAIC,0BAA0B,WAC1B,cACA,eAAe;AAAA,MACd;AACD,gCAA0B,UAAU;AAAA,IACrC;AACA,QAAK,YAAY,mBAAmB,SAAU;AAC7C,yBAAmB,UAAU;AAAA,IAC9B;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAEA,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,aAAa,GAAI,cAAe;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,UAAU,iBAAiB;AACjC,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,aAAa,kBAAkB,GAAI,QAAQ,IAAK,IAAK,IAAK;AAMhE,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,KAAM;AAChD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,cAAe;AAC3B,YAAM,EAAE,IAAI,IAAI,OAAQ,gBAAiB;AAEzC,YAAM,cAAc,2BAA4B,KAAM;AAEtD,aAAO;AAAA,QACN,WAAW,2BAA4B,KAAM;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,UAAU,aAAc,OAAO,UAAW;AAAA,QAC1C,YAAY;AAAA,QACZ,SAAS,OAAQ,aAAc,EAAE,gBAAiB,UAAW;AAAA,QAC7D,SAAS,OAAQ,aAAc,EAAE,gBAAiB,OAAQ;AAAA,QAC1D,gBAAgB,IAAK,QAAQ,gBAAiB;AAAA,MAC/C;AAAA,IACD;AAAA,IACA,CAAE,YAAY,KAAM;AAAA,EACrB;AAEA,QAAM,cAAc,gCAAiC,OAAO,IAAK;AACjE,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAEzD;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,cAAe;AAEhC,YAAW,MAAM;AAGhB,QAAK,qBAAqB,eAAe,UAAa,CAAE,SAAU;AACjE,8BAAyB,OAAO,UAAW;AAAA,IAC5C,WAAY,eAAe,UAAa,SAAU;AACjD,+BAA0B,OAAO,UAAW;AAAA,IAC7C;AACA,eAAY,IAAK;AAAA,EAClB,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,MAAK,CAAE,SAAU;AAChB;AAAA,EACD;AAEA,SACC,iCACG;AAAA,kBACD,oBAAC,eAAY,OACV,sBACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WACC,aAAc,CAAE,kBAAkB;AAAA,QAEnC,iBAAgB;AAAA,QAChB,iBAAgB;AAAA,QAChB,OAAQ;AAAA,QACR,MAAO,iBAAiB,QAAQ;AAAA,QAChC,aAAc,CAAE;AAAA,QAChB,SAAU,iBAAiB,aAAa;AAAA,QACxC,MAAK;AAAA,QACL,UAAW;AAAA;AAAA,IACZ,GAEF;AAAA,IAEC,QAAQ,cAAc,CAAE,eACzB;AAAA,MAAC;AAAA;AAAA,QACA,QAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAY,KAAM,gCAAgC,SAAU;AAAA,QAC5D;AAAA,QACA,IAAK,WAAW,QAAS,KAAK,GAAI;AAAA,QAClC;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,cACZ;AAAA,cACA,SAAU,MAAM,yBAA0B,KAAM;AAAA,cAChD,mBAAoB;AAAA,gBACnB,OAAO;AAAA,gBACP,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,cACD;AAAA,cAEE,oBACD,iCACC;AAAA,oCAAC,QAAG,WAAU,8CACX,iBACH;AAAA,gBACE,cAAc,CAAE,oBACjB;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBACV,MAAO,WAAW,aAAa;AAAA,oBAC/B,OACC,WACG,GAAI,oBAAqB,IACzB,GAAI,gBAAiB;AAAA,oBAEzB,SAAU,OACP,WAAW,YAAY;AAAA,sBACxB;AAAA,sBACA;AAAA,oBACD;AAAA,oBAED,WAAY;AAAA,oBACZ,MAAK;AAAA;AAAA,gBACN;AAAA,iBAEF;AAAA;AAAA,UAEF;AAAA,UACA,oBAAC,SAAM,WAAY,gBAAmB,UAAU;AAAA;AAAA;AAAA,IACjD;AAAA,KACD;AAEF;AAEA,kBAAkB,OAAO;AAEzB,IAAO,6BAAQ;",
   "names": []
 }

package/build-module/components/complementary-area-more-menu-item/index.mjs

@@ -1,38 +1,29 @@
 // packages/interface/src/components/complementary-area-more-menu-item/index.js
+import { observableMap, useObservableValue } from "@wordpress/compose";
+import { useLayoutEffect } from "@wordpress/element";
 import { check } from "@wordpress/icons";
-import { MenuItem } from "@wordpress/components";
 import ComplementaryAreaToggle from "../complementary-area-toggle/index.mjs";
 import ActionItem from "../action-item/index.mjs";
 import { jsx } from "react/jsx-runtime";
-var PluginsMenuItem = ({
-  // Menu item is marked with unstable prop for backward compatibility.
-  // They are removed so they don't leak to DOM elements.
-  // @see https://github.com/WordPress/gutenberg/issues/14457
-  __unstableExplicitMenuItem,
-  __unstableTarget,
-  ...restProps
-}) => /* @__PURE__ */ jsx(MenuItem, { ...restProps });
-function ComplementaryAreaMoreMenuItem({
+var menuItems = observableMap();
+function useHasComplementaryAreaMenuItem(scope, target) {
+  return !!useObservableValue(menuItems, `${scope}/${target}`);
+}
+function DefaultComplementaryAreaMoreMenuItem({
   scope,
   target,
-  __unstableExplicitMenuItem,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
     ComplementaryAreaToggle,
     {
-      as: (toggleProps) => {
-        return /* @__PURE__ */ jsx(
-          ActionItem,
-          {
-            __unstableExplicitMenuItem,
-            __unstableTarget: `${scope}/${target}`,
-            as: PluginsMenuItem,
-            name: `${scope}/plugin-more-menu`,
-            ...toggleProps
-          }
-        );
-      },
+      as: (toggleProps) => /* @__PURE__ */ jsx(
+        ActionItem,
+        {
+          name: `${scope}/plugin-more-menu`,
+          ...toggleProps
+        }
+      ),
       role: "menuitemcheckbox",
       selectedIcon: check,
       name: target,
@@ -41,7 +32,39 @@ function ComplementaryAreaMoreMenuItem({
     }
   );
 }
+function ComplementaryAreaMoreMenuItem({
+  scope,
+  target,
+  // Accepted so they don't leak to DOM elements. Registering the menu item is
+  // what keeps `ComplementaryArea` from injecting a second one.
+  __unstableExplicitMenuItem,
+  __unstableTarget,
+  ...props
+}) {
+  useLayoutEffect(() => {
+    const key = `${scope}/${target}`;
+    menuItems.set(key, (menuItems.get(key) ?? 0) + 1);
+    return () => {
+      const count = menuItems.get(key) - 1;
+      if (count) {
+        menuItems.set(key, count);
+      } else {
+        menuItems.delete(key);
+      }
+    };
+  }, [scope, target]);
+  return /* @__PURE__ */ jsx(
+    DefaultComplementaryAreaMoreMenuItem,
+    {
+      scope,
+      target,
+      ...props
+    }
+  );
+}
 export {
-  ComplementaryAreaMoreMenuItem as default
+  DefaultComplementaryAreaMoreMenuItem,
+  ComplementaryAreaMoreMenuItem as default,
+  useHasComplementaryAreaMenuItem
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/components/complementary-area-more-menu-item/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area-more-menu-item/index.js"],
-  "sourcesContent": ["import { check } from '@wordpress/icons';\nimport { MenuItem } from '@wordpress/components';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport ActionItem from '../action-item';\n\nconst PluginsMenuItem = ( {\n\t// Menu item is marked with unstable prop for backward compatibility.\n\t// They are removed so they don't leak to DOM elements.\n\t// @see https://github.com/WordPress/gutenberg/issues/14457\n\t__unstableExplicitMenuItem,\n\t__unstableTarget,\n\t...restProps\n} ) => <MenuItem { ...restProps } />;\n\nexport default function ComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t__unstableExplicitMenuItem,\n\t...props\n} ) {\n\treturn (\n\t\t<ComplementaryAreaToggle\n\t\t\tas={ ( toggleProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ActionItem\n\t\t\t\t\t\t__unstableExplicitMenuItem={\n\t\t\t\t\t\t\t__unstableExplicitMenuItem\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstableTarget={ `${ scope }/${ target }` }\n\t\t\t\t\t\tas={ PluginsMenuItem }\n\t\t\t\t\t\tname={ `${ scope }/plugin-more-menu` }\n\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tselectedIcon={ check }\n\t\t\tname={ target }\n\t\t\tscope={ scope }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
-  "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,6BAA6B;AACpC,OAAO,gBAAgB;AAShB;AAPP,IAAM,kBAAkB,CAAE;AAAA;AAAA;AAAA;AAAA,EAIzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAO,oBAAC,YAAW,GAAG,WAAY;AAEnB,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,CAAE,gBAAiB;AACvB,eACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YAGA,kBAAmB,GAAI,KAAM,IAAK,MAAO;AAAA,YACzC,IAAK;AAAA,YACL,MAAO,GAAI,KAAM;AAAA,YACf,GAAG;AAAA;AAAA,QACN;AAAA,MAEF;AAAA,MACA,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
+  "sourcesContent": ["import { observableMap, useObservableValue } from '@wordpress/compose';\nimport { useLayoutEffect } from '@wordpress/element';\nimport { check } from '@wordpress/icons';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport ActionItem from '../action-item';\n\n// How many more menu items are rendered for a complementary area, by\n// `scope/target`.\nconst menuItems = observableMap();\n\nexport function useHasComplementaryAreaMenuItem( scope, target ) {\n\treturn !! useObservableValue( menuItems, `${ scope }/${ target }` );\n}\n\n// The more menu item `ComplementaryArea` injects for every pinnable area. It is\n// left out while a plugin renders one of its own for the same area.\n// @see https://github.com/WordPress/gutenberg/issues/14457\nexport function DefaultComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t...props\n} ) {\n\treturn (\n\t\t<ComplementaryAreaToggle\n\t\t\tas={ ( toggleProps ) => (\n\t\t\t\t<ActionItem\n\t\t\t\t\tname={ `${ scope }/plugin-more-menu` }\n\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t/>\n\t\t\t) }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tselectedIcon={ check }\n\t\t\tname={ target }\n\t\t\tscope={ scope }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default function ComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t// Accepted so they don't leak to DOM elements. Registering the menu item is\n\t// what keeps `ComplementaryArea` from injecting a second one.\n\t__unstableExplicitMenuItem,\n\t__unstableTarget,\n\t...props\n} ) {\n\tuseLayoutEffect( () => {\n\t\tconst key = `${ scope }/${ target }`;\n\t\tmenuItems.set( key, ( menuItems.get( key ) ?? 0 ) + 1 );\n\n\t\treturn () => {\n\t\t\tconst count = menuItems.get( key ) - 1;\n\t\t\tif ( count ) {\n\t\t\t\tmenuItems.set( key, count );\n\t\t\t} else {\n\t\t\t\tmenuItems.delete( key );\n\t\t\t}\n\t\t};\n\t}, [ scope, target ] );\n\n\treturn (\n\t\t<DefaultComplementaryAreaMoreMenuItem\n\t\t\tscope={ scope }\n\t\t\ttarget={ target }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
+  "mappings": ";AAAA,SAAS,eAAe,0BAA0B;AAClD,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,OAAO,6BAA6B;AACpC,OAAO,gBAAgB;AAqBnB;AAjBJ,IAAM,YAAY,cAAc;AAEzB,SAAS,gCAAiC,OAAO,QAAS;AAChE,SAAO,CAAC,CAAE,mBAAoB,WAAW,GAAI,KAAM,IAAK,MAAO,EAAG;AACnE;AAKO,SAAS,qCAAsC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,CAAE,gBACN;AAAA,QAAC;AAAA;AAAA,UACA,MAAO,GAAI,KAAM;AAAA,UACf,GAAG;AAAA;AAAA,MACN;AAAA,MAED,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;AAEe,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,kBAAiB,MAAM;AACtB,UAAM,MAAM,GAAI,KAAM,IAAK,MAAO;AAClC,cAAU,IAAK,MAAO,UAAU,IAAK,GAAI,KAAK,KAAM,CAAE;AAEtD,WAAO,MAAM;AACZ,YAAM,QAAQ,UAAU,IAAK,GAAI,IAAI;AACrC,UAAK,OAAQ;AACZ,kBAAU,IAAK,KAAK,KAAM;AAAA,MAC3B,OAAO;AACN,kBAAU,OAAQ,GAAI;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,OAAO,MAAO,CAAE;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "9.38.0",
+	"version": "10.0.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -52,19 +52,19 @@
 		"build-module/store/index.mjs"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.53.0",
-		"@wordpress/admin-ui": "^2.8.0",
-		"@wordpress/base-styles": "^12.1.0",
-		"@wordpress/components": "^39.0.0",
-		"@wordpress/compose": "^8.6.0",
-		"@wordpress/data": "^10.53.0",
-		"@wordpress/deprecated": "^4.53.0",
-		"@wordpress/element": "^8.5.0",
-		"@wordpress/i18n": "^6.26.0",
-		"@wordpress/icons": "^15.4.0",
-		"@wordpress/plugins": "^7.53.0",
-		"@wordpress/preferences": "^4.53.0",
-		"@wordpress/viewport": "^6.53.0",
+		"@wordpress/a11y": "^4.54.0",
+		"@wordpress/admin-ui": "^2.9.0",
+		"@wordpress/base-styles": "^13.0.0",
+		"@wordpress/components": "^40.0.0",
+		"@wordpress/compose": "^8.7.0",
+		"@wordpress/data": "^10.54.0",
+		"@wordpress/deprecated": "^4.54.0",
+		"@wordpress/element": "^8.6.0",
+		"@wordpress/i18n": "^6.27.0",
+		"@wordpress/icons": "^15.5.0",
+		"@wordpress/plugins": "^7.54.0",
+		"@wordpress/preferences": "^4.54.0",
+		"@wordpress/viewport": "^6.54.0",
 		"clsx": "^2.1.1"
 	},
 	"devDependencies": {
@@ -78,5 +78,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "989764d42ff93e33684aaf0b96a5b7f3d9bbff52"
+	"gitHead": "5ef24f60261976bb198ad035db24bf81c1fb92b4"
 }

package/src/components/action-item/README.md

@@ -4,7 +4,7 @@
 
 ## ActionItem.Slot
 
-The props not referred below are passed to the container component.
+Renders nothing when no fill is present. The props not referred below are passed to the container component.
 
 ## Props
 
@@ -15,13 +15,6 @@ The name of the slot and fill pair passed to the `Slot` component.
 -   Type: `String`
 -   Required: Yes
 
-### bubblesVirtually
-
-Property used to change the event bubbling behavior, passed to the `Slot` component.
-
--   Type: `boolean`
--   Required: no
-
 ### as
 
 The component used as the container of the fills. Defaults to the `MenuGroup` component.
@@ -30,6 +23,20 @@ The component used as the container of the fills. Defaults to the `MenuGroup` co
 -   Required: no
 -   Default: `MenuGroup`
 
+### fillProps
+
+Props passed to every fill. An `as` among them provides the component the items render as, unless the item asks for one of its own.
+
+-   Type: `Object`
+-   Required: no
+
+### children
+
+A function receiving the rendered fills as a flat array. Use it when the container has to wrap each fill rather than just group them. Takes precedence over `as`.
+
+-   Type: `Function`
+-   Required: no
+
 ## ActionItem
 
 The props not referred below are passed to the item component.
@@ -50,8 +57,8 @@ Callback function executed when a click on the item happens.
 
 ### as
 
-The component that is going to be used to render an action item. Defaults to the `Button` component.
+The component that is going to be used to render an action item. Defaults to the `as` the slot provides through `fillProps`, or to the `MenuItem` component, so that it nests in the `MenuGroup` the slot renders by default.
 
 -   Type: `Component`
 -   Required: no
--   Default: `Button`
+-   Default: `MenuItem`

package/src/components/action-item/index.js

@@ -1,72 +1,54 @@
-import { MenuGroup, Button, Slot, Fill } from '@wordpress/components';
+import { MenuGroup, MenuItem, Slot, Fill } from '@wordpress/components';
 import { Children } from '@wordpress/element';
 
-const noop = () => {};
-
 function ActionItemSlot( {
 	name,
 	as: Component = MenuGroup,
 	fillProps = {},
-	bubblesVirtually,
+	children,
 	...props
 } ) {
 	return (
-		<Slot
-			name={ name }
-			bubblesVirtually={ bubblesVirtually }
-			fillProps={ fillProps }
-		>
+		<Slot name={ name } fillProps={ fillProps }>
 			{ ( fills ) => {
-				if ( ! Children.toArray( fills ).length ) {
+				// Each fill renders an array of its own, so flatten them into a
+				// single list before handing them over.
+				const items = Children.toArray( fills );
+
+				if ( ! items.length ) {
 					return null;
 				}
 
-				// Special handling exists for backward compatibility.
-				// It ensures that menu items created by plugin authors aren't
-				// duplicated with automatically injected menu items coming
-				// from pinnable plugin sidebars.
-				// @see https://github.com/WordPress/gutenberg/issues/14457
-				const initializedByPlugins = [];
-				Children.forEach(
-					fills,
-					( {
-						props: { __unstableExplicitMenuItem, __unstableTarget },
-					} ) => {
-						if ( __unstableTarget && __unstableExplicitMenuItem ) {
-							initializedByPlugins.push( __unstableTarget );
-						}
-					}
-				);
-				const children = Children.map( fills, ( child ) => {
-					if (
-						! child.props.__unstableExplicitMenuItem &&
-						initializedByPlugins.includes(
-							child.props.__unstableTarget
-						)
-					) {
-						return null;
-					}
-					return child;
-				} );
+				if ( typeof children === 'function' ) {
+					return children( items );
+				}
 
-				return <Component { ...props }>{ children }</Component>;
+				return <Component { ...props }>{ items }</Component>;
 			} }
 		</Slot>
 	);
 }
 
-function ActionItem( { name, as: Component = Button, onClick, ...props } ) {
+function ActionItem( { name, as, onClick, ...props } ) {
 	return (
 		<Fill name={ name }>
-			{ ( { onClick: fpOnClick } ) => {
+			{ ( { as: slotAs = MenuItem, onClick: slotOnClick } ) => {
+				// The slot provides the component to render the item with, so
+				// that it fits the menu it ends up in, and an onClick handler,
+				// for example one that closes that menu. The `as` prop
+				// replaces the component. The `onClick` prop does not replace
+				// the handler: both run.
+				const Component = as ?? slotAs;
+				const handlers = [ onClick, slotOnClick ].filter( Boolean );
+
 				return (
 					<Component
 						onClick={
-							onClick || fpOnClick
-								? ( ...args ) => {
-										( onClick || noop )( ...args );
-										( fpOnClick || noop )( ...args );
-								  }
+							handlers.length
+								? ( ...args ) =>
+										handlers.forEach( ( handler ) =>
+											handler( ...args )
+										)
 								: undefined
 						}
 						{ ...props }

package/src/components/complementary-area/index.js

@@ -26,7 +26,10 @@ import {
 } from '@wordpress/compose';
 import { usePluginContext } from '@wordpress/plugins';
 import ComplementaryAreaHeader from '../complementary-area-header';
-import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
+import {
+	DefaultComplementaryAreaMoreMenuItem,
+	useHasComplementaryAreaMenuItem,
+} from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
@@ -232,6 +235,7 @@ function ComplementaryArea( {
 		[ identifier, scope ]
 	);
 
+	const hasMenuItem = useHasComplementaryAreaMenuItem( scope, name );
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 
 	useAdjustComplementaryListener(
@@ -294,15 +298,15 @@ function ComplementaryArea( {
 					) }
 				</PinnedItems>
 			) }
-			{ name && isPinnable && (
-				<ComplementaryAreaMoreMenuItem
+			{ name && isPinnable && ! hasMenuItem && (
+				<DefaultComplementaryAreaMoreMenuItem
 					target={ name }
 					scope={ scope }
 					icon={ icon }
 					identifier={ identifier }
 				>
 					{ title }
-				</ComplementaryAreaMoreMenuItem>
+				</DefaultComplementaryAreaMoreMenuItem>
 			) }
 			<ComplementaryAreaFill
 				activeArea={ activeArea }

package/src/components/complementary-area-more-menu-item/index.js

@@ -1,38 +1,33 @@
+import { observableMap, useObservableValue } from '@wordpress/compose';
+import { useLayoutEffect } from '@wordpress/element';
 import { check } from '@wordpress/icons';
-import { MenuItem } from '@wordpress/components';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 import ActionItem from '../action-item';
 
-const PluginsMenuItem = ( {
-	// Menu item is marked with unstable prop for backward compatibility.
-	// They are removed so they don't leak to DOM elements.
-	// @see https://github.com/WordPress/gutenberg/issues/14457
-	__unstableExplicitMenuItem,
-	__unstableTarget,
-	...restProps
-} ) => <MenuItem { ...restProps } />;
+// How many more menu items are rendered for a complementary area, by
+// `scope/target`.
+const menuItems = observableMap();
 
-export default function ComplementaryAreaMoreMenuItem( {
+export function useHasComplementaryAreaMenuItem( scope, target ) {
+	return !! useObservableValue( menuItems, `${ scope }/${ target }` );
+}
+
+// The more menu item `ComplementaryArea` injects for every pinnable area. It is
+// left out while a plugin renders one of its own for the same area.
+// @see https://github.com/WordPress/gutenberg/issues/14457
+export function DefaultComplementaryAreaMoreMenuItem( {
 	scope,
 	target,
-	__unstableExplicitMenuItem,
 	...props
 } ) {
 	return (
 		<ComplementaryAreaToggle
-			as={ ( toggleProps ) => {
-				return (
-					<ActionItem
-						__unstableExplicitMenuItem={
-							__unstableExplicitMenuItem
-						}
-						__unstableTarget={ `${ scope }/${ target }` }
-						as={ PluginsMenuItem }
-						name={ `${ scope }/plugin-more-menu` }
-						{ ...toggleProps }
-					/>
-				);
-			} }
+			as={ ( toggleProps ) => (
+				<ActionItem
+					name={ `${ scope }/plugin-more-menu` }
+					{ ...toggleProps }
+				/>
+			) }
 			role="menuitemcheckbox"
 			selectedIcon={ check }
 			name={ target }
@@ -41,3 +36,35 @@ export default function ComplementaryAreaMoreMenuItem( {
 		/>
 	);
 }
+
+export default function ComplementaryAreaMoreMenuItem( {
+	scope,
+	target,
+	// Accepted so they don't leak to DOM elements. Registering the menu item is
+	// what keeps `ComplementaryArea` from injecting a second one.
+	__unstableExplicitMenuItem,
+	__unstableTarget,
+	...props
+} ) {
+	useLayoutEffect( () => {
+		const key = `${ scope }/${ target }`;
+		menuItems.set( key, ( menuItems.get( key ) ?? 0 ) + 1 );
+
+		return () => {
+			const count = menuItems.get( key ) - 1;
+			if ( count ) {
+				menuItems.set( key, count );
+			} else {
+				menuItems.delete( key );
+			}
+		};
+	}, [ scope, target ] );
+
+	return (
+		<DefaultComplementaryAreaMoreMenuItem
+			scope={ scope }
+			target={ target }
+			{ ...props }
+		/>
+	);
+}