@wordpress/interface 9.38.0 → 10.0.2-next.v.202608281122.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## Unreleased
 
+## 10.0.1-next.0 (2026-08-28)
+
+### Internal
+
+-   Remove unused dependency `@wordpress/a11y` ([#82103](https://github.com/WordPress/gutenberg/pull/82103)).
+-   Use the `.jsx` extension for JavaScript source files that contain JSX ([#80990](https://github.com/WordPress/gutenberg/pull/80990)).
+
+## 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

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/action-item/index.js
+// packages/interface/src/components/action-item/index.jsx
 var action_item_exports = {};
 __export(action_item_exports, {
   default: () => action_item_default
@@ -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;",
+  "sources": ["../../../src/components/action-item/index.jsx"],
+  "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

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/complementary-area/index.js
+// packages/interface/src/components/complementary-area/index.jsx
 var complementary_area_exports = {};
 __export(complementary_area_exports, {
   default: () => complementary_area_default
@@ -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"]
+  "sources": ["../../../src/components/complementary-area/index.jsx"],
+  "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-header/index.cjs

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/complementary-area-header/index.js
+// packages/interface/src/components/complementary-area-header/index.jsx
 var complementary_area_header_exports = {};
 __export(complementary_area_header_exports, {
   default: () => complementary_area_header_default

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/complementary-area-header/index.js"],
+  "sources": ["../../../src/components/complementary-area-header/index.jsx"],
   "sourcesContent": ["import clsx from 'clsx';\nimport { closeSmall } from '@wordpress/icons';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\n\nconst ComplementaryAreaHeader = ( {\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-panel__header',\n\t\t\t\t'interface-complementary-area-header',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ toggleButton }\n\t\t</div>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,mBAA2B;AAC3B,uCAAoC;AAQlC;AANF,IAAM,0BAA0B,CAAE;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,MAAO;AACN,QAAM,eACL,4CAAC,iCAAAA,SAAA,EAAwB,MAAO,yBAAe,GAAG,mBAAoB;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAC;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,UAAW;AAAA,MAET;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,oCAAQ;",
   "names": ["ComplementaryAreaToggle", "clsx"]

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

@@ -26,46 +26,39 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/complementary-area-more-menu-item/index.js
+// packages/interface/src/components/complementary-area-more-menu-item/index.jsx
 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;",
+  "sources": ["../../../src/components/complementary-area-more-menu-item/index.jsx"],
+  "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/components/complementary-area-toggle/index.cjs

@@ -16,7 +16,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/complementary-area-toggle/index.js
+// packages/interface/src/components/complementary-area-toggle/index.jsx
 var complementary_area_toggle_exports = {};
 __export(complementary_area_toggle_exports, {
   default: () => ComplementaryAreaToggle

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

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/complementary-area-toggle/index.js"],
+  "sources": ["../../../src/components/complementary-area-toggle/index.jsx"],
   "sourcesContent": ["import { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { usePluginContext } from '@wordpress/plugins';\nimport { store as interfaceStore } from '../../store';\n\n/**\n * Whether the role supports checked state.\n *\n * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n * @param {React.AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\n */\nfunction roleSupportsCheckedState( role ) {\n\treturn [\n\t\t'checkbox',\n\t\t'option',\n\t\t'radio',\n\t\t'switch',\n\t\t'menuitemcheckbox',\n\t\t'menuitemradio',\n\t\t'treeitem',\n\t].includes( role );\n}\n\nexport default function ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier: identifierProp,\n\ticon: iconProp,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\troleSupportsCheckedState( props.role ) ? isSelected : undefined\n\t\t\t}\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAAuB;AACvB,kBAAuC;AACvC,qBAAiC;AACjC,mBAAwC;AA8CtC;AArCF,SAAS,yBAA0B,MAAO;AACzC,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,SAAU,IAAK;AAClB;AAEe,SAAR,wBAA0C;AAAA,EAChD,KAAK;AAAA,EACL;AAAA,EACA,YAAY;AAAA,EACZ,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,iBAAiB;AACvB,QAAM,cAAU,iCAAiB;AACjC,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,aAAa,kBAAkB,GAAI,QAAQ,IAAK,IAAK,IAAK;AAChE,QAAM,iBAAa;AAAA,IAClB,CAAE,WACD,OAAQ,aAAAA,KAAe,EAAE,2BAA4B,KAAM,MAC3D;AAAA,IACD,CAAE,YAAY,KAAM;AAAA,EACrB;AAEA,QAAM,EAAE,yBAAyB,yBAAyB,QACzD,yBAAa,aAAAA,KAAe;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,gBAAgB,aAAa,eAAe;AAAA,MACnD,iBAAgB,WAAW,QAAS,KAAK,GAAI;AAAA,MAE7C,gBACC,yBAA0B,MAAM,IAAK,IAAI,aAAa;AAAA,MAEvD,SAAU,MAAM;AACf,YAAK,YAAa;AACjB,mCAA0B,KAAM;AAAA,QACjC,OAAO;AACN,kCAAyB,OAAO,UAAW;AAAA,QAC5C;AAAA,MACD;AAAA,MACA;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
   "names": ["interfaceStore"]

package/build/components/interface-skeleton/index.cjs

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/interface-skeleton/index.js
+// packages/interface/src/components/interface-skeleton/index.jsx
 var interface_skeleton_exports = {};
 __export(interface_skeleton_exports, {
   default: () => interface_skeleton_default

package/build/components/interface-skeleton/index.cjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/interface-skeleton/index.js"],
+  "sources": ["../../../src/components/interface-skeleton/index.jsx"],
   "sourcesContent": ["import clsx from 'clsx';\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport { useReducedMotion, useViewportMatch } from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\t// `auto` leaves the open width to the panel, so a\n\t\t\t\t\t\t\t\t// sidebar that is already open on page load is\n\t\t\t\t\t\t\t\t// at its full width on the first paint instead\n\t\t\t\t\t\t\t\t// of animating there. framer-motion measures\n\t\t\t\t\t\t\t\t// the element to animate, then restores `auto`.\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: 'auto' },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t\t\t: 'max-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],
   "mappings": "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",
   "names": ["clsx", "AnimatePresence", "motion"]

package/build/components/pinned-items/index.cjs

@@ -26,7 +26,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/interface/src/components/pinned-items/index.js
+// packages/interface/src/components/pinned-items/index.jsx
 var pinned_items_exports = {};
 __export(pinned_items_exports, {
   default: () => pinned_items_default

package/build/components/pinned-items/index.cjs.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../src/components/pinned-items/index.js"],
+  "sources": ["../../../src/components/pinned-items/index.jsx"],
   "sourcesContent": ["import clsx from 'clsx';\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],
   "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAiB;AACjB,wBAA2B;AAGnB;AADR,SAAS,YAAa,EAAE,OAAO,GAAG,MAAM,GAAI;AAC3C,SAAO,4CAAC,0BAAK,MAAO,eAAgB,KAAM,IAAO,GAAG,OAAQ;AAC7D;AAEA,SAAS,gBAAiB,EAAE,OAAO,WAAW,GAAG,MAAM,GAAI;AAC1D,SACC,4CAAC,0BAAK,MAAO,eAAgB,KAAM,IAAO,GAAG,OAC1C,WAAE,UACH,OAAO,SAAS,KACf;AAAA,IAAC;AAAA;AAAA,MACA,eAAY,YAAAA;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MAEE;AAAA;AAAA,EACH,GAGH;AAEF;AAEA,YAAY,OAAO;AAEnB,IAAO,uBAAQ;",
   "names": ["clsx"]

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";
+// packages/interface/src/components/action-item/index.jsx
+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;",
+  "sources": ["../../../src/components/action-item/index.jsx"],
+  "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": []
 }