@wordpress/interface 9.37.0 → 10.0.0

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 ## 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
+
+-   `ComplementaryArea`: Add a `render` prop to replace the default container element with a given React element ([#81054](https://github.com/WordPress/gutenberg/pull/81054)).
+
+### Bug Fixes
+
+-   `ComplementaryArea`: Remove incorrect `aria-expanded` attribute from the "Pin to toolbar" toggle button, which already exposes its state via `aria-pressed` ([#79874](https://github.com/WordPress/gutenberg/pull/79874)).
+-   `InterfaceSkeleton`: Increase the footer height from 24px to 32px to prevent the focus ring from being clipped ([#81145](https://github.com/WordPress/gutenberg/pull/81145)).
+-   `InterfaceSkeleton`: Stop the secondary sidebar from animating itself into place on page load when it is already open, for example with the "Always open List View" preference enabled ([#81362](https://github.com/WordPress/gutenberg/pull/81362)).
+
+### Internal
+
+-   `ComplementaryArea`: Take the panel width from the stylesheet instead of a hardcoded inline style, and resolve the exit transition through `AnimatePresence`'s `custom` prop instead of a forced re-render ([#81363](https://github.com/WordPress/gutenberg/pull/81363)).
+-   Remove obsolete dependency grouping comments as part of the repository-wide separator-free import migration. ([#81248](https://github.com/WordPress/gutenberg/pull/81248))
+
 ## 9.37.0 (2026-07-29)
 
 ### Internal

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": ["/**\n * WordPress dependencies\n */\nimport { 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;AAGA,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");
@@ -52,53 +52,57 @@ var ANIMATION_DURATION = 0.3;
 function ComplementaryAreaSlot({ scope, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Slot, { name: `ComplementaryArea/${scope}`, ...props });
 }
-var SIDEBAR_WIDTH = 280;
 var variants = {
-  open: { width: SIDEBAR_WIDTH },
-  closed: { width: 0 },
-  mobileOpen: { width: "100vw" }
+  // `auto` leaves the width to the area's own stylesheet, so it stays in one
+  // place. framer-motion measures the element to animate, then restores
+  // `auto`.
+  open: { width: "auto" },
+  // Resolved with the `custom` value passed to `AnimatePresence`, which is
+  // the only way an already removed element can be given a fresh transition.
+  closed: (transition) => ({ width: 0, transition })
 };
+function renderContainer(render, props) {
+  if ((0, import_element.isValidElement)(render)) {
+    return (0, import_element.cloneElement)(render, {
+      ...props,
+      className: (0, import_clsx.default)(render.props.className, props.className),
+      style: { ...render.props.style, ...props.style }
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...props });
+}
 function ComplementaryAreaFill({
   activeArea,
   isActive,
   scope,
   children,
   className,
-  id
+  id,
+  render
 }) {
   const disableMotion = (0, import_compose.useReducedMotion)();
   const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
   const previousActiveArea = (0, import_compose.usePrevious)(activeArea);
-  const previousIsActive = (0, import_compose.usePrevious)(isActive);
-  const [, setState] = (0, import_element.useState)({});
-  (0, import_element.useEffect)(() => {
-    setState({});
-  }, [isActive]);
+  const isSwitchingAreas = !!previousActiveArea && !!activeArea && activeArea !== previousActiveArea;
   const transition = {
     type: "tween",
-    duration: disableMotion || isMobileViewport || !!previousActiveArea && !!activeArea && activeArea !== previousActiveArea ? 0 : ANIMATION_DURATION,
+    duration: disableMotion || isMobileViewport || isSwitchingAreas ? 0 : ANIMATION_DURATION,
     ease: [0.6, 0, 0.4, 1]
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Fill, { name: `ComplementaryArea/${scope}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__unstableAnimatePresence, { initial: false, children: (previousIsActive || isActive) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Fill, { name: `ComplementaryArea/${scope}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__unstableAnimatePresence, { initial: false, custom: transition, children: isActive && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_components.__unstableMotion.div,
     {
       variants,
       initial: "closed",
-      animate: isMobileViewport ? "mobileOpen" : "open",
+      animate: "open",
       exit: "closed",
       transition,
       className: "interface-complementary-area__fill",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "div",
-        {
-          id,
-          className,
-          style: {
-            width: isMobileViewport ? "100vw" : SIDEBAR_WIDTH
-          },
-          children
-        }
-      )
+      children: renderContainer(render, {
+        id,
+        className,
+        children
+      })
     }
   ) }) });
 }
@@ -149,6 +153,7 @@ function ComplementaryArea({
   icon: iconProp,
   isPinnable = true,
   panelClassName,
+  render,
   scope,
   name,
   title,
@@ -188,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,
@@ -238,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,
@@ -256,6 +262,7 @@ function ComplementaryArea({
         className: (0, import_clsx.default)("interface-complementary-area", className),
         scope,
         id: identifier.replace("/", ":"),
+        render,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
             import_complementary_area_header.default,
@@ -283,7 +290,6 @@ function ComplementaryArea({
                       identifier
                     ),
                     isPressed: isPinned,
-                    "aria-expanded": isPinned,
                     size: "compact"
                   }
                 )

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\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 { useEffect, useRef, useState } 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';\n\n/**\n * Internal dependencies\n */\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 SIDEBAR_WIDTH = 280;\nconst variants = {\n\topen: { width: SIDEBAR_WIDTH },\n\tclosed: { width: 0 },\n\tmobileOpen: { width: '100vw' },\n};\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// This is used to delay the exit animation to the next tick.\n\t// The reason this is done is to allow us to apply the right transition properties\n\t// When we switch from an open sidebar to another open sidebar.\n\t// we don't want to animate in this case.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst previousIsActive = usePrevious( isActive );\n\tconst [ , setState ] = useState( {} );\n\tuseEffect( () => {\n\t\tsetState( {} );\n\t}, [ isActive ] );\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion ||\n\t\t\tisMobileViewport ||\n\t\t\t( !! previousActiveArea &&\n\t\t\t\t!! activeArea &&\n\t\t\t\tactiveArea !== previousActiveArea )\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 }>\n\t\t\t\t{ ( previousIsActive || 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={ isMobileViewport ? 'mobileOpen' : '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<div\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t: SIDEBAR_WIDTH,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\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\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>\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\taria-expanded={ 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": ["AnimatePresence", "motion", "interfaceStore", "preferencesStore", "viewportStore", "PinnedItems", "ComplementaryAreaToggle", "ComplementaryAreaMoreMenuItem", "clsx", "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-header/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area-header/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { closeSmall } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\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;AAGA,kBAAiB;AAKjB,mBAA2B;AAK3B,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;",
+  "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

@@ -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": ["/**\n * WordPress dependencies\n */\nimport { check } from '@wordpress/icons';\nimport { MenuItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\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;AAGA,mBAAsB;AACtB,wBAAyB;AAKzB,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/components/complementary-area-toggle/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/complementary-area-toggle/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { usePluginContext } from '@wordpress/plugins';\n\n/**\n * Internal dependencies\n */\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;AAGA,wBAAuB;AACvB,kBAAuC;AACvC,qBAAiC;AAKjC,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;",
+  "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/fullscreen-mode/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/fullscreen-mode/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup.\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0B;AAE1B,IAAM,iBAAiB,CAAE,EAAE,SAAS,MAAO;AAC1C,gCAAW,MAAM;AAChB,QAAI,WAAW;AAKf,QAAK,SAAS,KAAK,UAAU,SAAU,aAAc,GAAI;AACxD,iBAAW;AACX,eAAS,KAAK,UAAU,OAAQ,aAAc;AAAA,IAC/C;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,IAAK,aAAc;AAAA,MAC5C;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,gCAAW,MAAM;AAChB,QAAK,UAAW;AACf,eAAS,KAAK,UAAU,IAAK,oBAAqB;AAAA,IACnD,OAAO;AACN,eAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,IACtD;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,MACtD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,SAAO;AACR;AACA,IAAO,0BAAQ;",
+  "sourcesContent": ["import { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup.\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA0B;AAE1B,IAAM,iBAAiB,CAAE,EAAE,SAAS,MAAO;AAC1C,gCAAW,MAAM;AAChB,QAAI,WAAW;AAKf,QAAK,SAAS,KAAK,UAAU,SAAU,aAAc,GAAI;AACxD,iBAAW;AACX,eAAS,KAAK,UAAU,OAAQ,aAAc;AAAA,IAC/C;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,IAAK,aAAc;AAAA,MAC5C;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,gCAAW,MAAM;AAChB,QAAK,UAAW;AACf,eAAS,KAAK,UAAU,IAAK,oBAAqB;AAAA,IACnD,OAAO;AACN,eAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,IACtD;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,MACtD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,SAAO;AACR;AACA,IAAO,0BAAQ;",
   "names": []
 }

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

@@ -95,7 +95,6 @@ function InterfaceSkeleton({
   labels,
   className
 }, ref) {
-  const [secondarySidebarResizeListener, secondarySidebarSize] = (0, import_compose.useResizeObserver)();
   const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
   const disableMotion = (0, import_compose.useReducedMotion)();
   const defaultTransition = {
@@ -157,28 +156,23 @@ function InterfaceSkeleton({
                 animate: "open",
                 exit: "closed",
                 variants: {
-                  open: { width: secondarySidebarSize.width },
+                  open: { width: "auto" },
                   closed: { width: 0 }
                 },
                 transition: defaultTransition,
-                children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
                   import_components.__unstableMotion.div,
                   {
                     style: {
-                      position: "absolute",
-                      width: isMobileViewport ? "100vw" : "fit-content",
-                      height: "100%",
-                      left: 0
+                      width: isMobileViewport ? "100vw" : "max-content",
+                      height: "100%"
                     },
                     variants: {
                       open: { x: 0 },
                       closed: { x: "-100%" }
                     },
                     transition: defaultTransition,
-                    children: [
-                      secondarySidebarResizeListener,
-                      secondarySidebar
-                    ]
+                    children: secondarySidebar
                   }
                 )
               }