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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (41) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/build/components/action-item/index.cjs +18 -42
  3. package/build/components/action-item/index.cjs.map +3 -3
  4. package/build/components/complementary-area/index.cjs +5 -4
  5. package/build/components/complementary-area/index.cjs.map +4 -4
  6. package/build/components/complementary-area-header/index.cjs +1 -1
  7. package/build/components/complementary-area-header/index.cjs.map +1 -1
  8. package/build/components/complementary-area-more-menu-item/index.cjs +53 -25
  9. package/build/components/complementary-area-more-menu-item/index.cjs.map +3 -3
  10. package/build/components/complementary-area-toggle/index.cjs +1 -1
  11. package/build/components/complementary-area-toggle/index.cjs.map +1 -1
  12. package/build/components/interface-skeleton/index.cjs +1 -1
  13. package/build/components/interface-skeleton/index.cjs.map +1 -1
  14. package/build/components/pinned-items/index.cjs +1 -1
  15. package/build/components/pinned-items/index.cjs.map +1 -1
  16. package/build-module/components/action-item/index.mjs +19 -43
  17. package/build-module/components/action-item/index.mjs.map +3 -3
  18. package/build-module/components/complementary-area/index.mjs +8 -4
  19. package/build-module/components/complementary-area/index.mjs.map +3 -3
  20. package/build-module/components/complementary-area-header/index.mjs +1 -1
  21. package/build-module/components/complementary-area-header/index.mjs.map +1 -1
  22. package/build-module/components/complementary-area-more-menu-item/index.mjs +48 -25
  23. package/build-module/components/complementary-area-more-menu-item/index.mjs.map +3 -3
  24. package/build-module/components/complementary-area-toggle/index.mjs +1 -1
  25. package/build-module/components/complementary-area-toggle/index.mjs.map +1 -1
  26. package/build-module/components/interface-skeleton/index.mjs +1 -1
  27. package/build-module/components/interface-skeleton/index.mjs.map +1 -1
  28. package/build-module/components/pinned-items/index.mjs +1 -1
  29. package/build-module/components/pinned-items/index.mjs.map +1 -1
  30. package/package.json +14 -15
  31. package/src/components/action-item/README.md +17 -10
  32. package/src/components/action-item/index.jsx +64 -0
  33. package/src/components/complementary-area/{index.js → index.jsx} +8 -4
  34. package/src/components/complementary-area-more-menu-item/index.jsx +70 -0
  35. package/src/components/action-item/index.js +0 -82
  36. package/src/components/complementary-area-more-menu-item/index.js +0 -43
  37. /package/src/components/complementary-area-header/{index.js → index.jsx} +0 -0
  38. /package/src/components/complementary-area-toggle/{index.js → index.jsx} +0 -0
  39. /package/src/components/fullscreen-mode/test/{index.js → index.jsx} +0 -0
  40. /package/src/components/interface-skeleton/{index.js → index.jsx} +0 -0
  41. /package/src/components/pinned-items/{index.js → index.jsx} +0 -0
package/build-module/components/complementary-area/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // packages/interface/src/components/complementary-area/index.js
1
+ // packages/interface/src/components/complementary-area/index.jsx
2
2
  import clsx from "clsx";
3
3
  import {
4
4
  Button,
@@ -27,7 +27,10 @@ import {
27
27
  } from "@wordpress/compose";
28
28
  import { usePluginContext } from "@wordpress/plugins";
29
29
  import ComplementaryAreaHeader from "../complementary-area-header/index.mjs";
30
- import ComplementaryAreaMoreMenuItem from "../complementary-area-more-menu-item/index.mjs";
30
+ import {
31
+ DefaultComplementaryAreaMoreMenuItem,
32
+ useHasComplementaryAreaMenuItem
33
+ } from "../complementary-area-more-menu-item/index.mjs";
31
34
  import ComplementaryAreaToggle from "../complementary-area-toggle/index.mjs";
32
35
  import PinnedItems from "../pinned-items/index.mjs";
33
36
  import { store as interfaceStore } from "../../store/index.mjs";
@@ -177,6 +180,7 @@ function ComplementaryArea({
177
180
  },
178
181
  [identifier, scope]
179
182
  );
183
+ const hasMenuItem = useHasComplementaryAreaMenuItem(scope, name);
180
184
  const isMobileViewport = useViewportMatch("medium", "<");
181
185
  useAdjustComplementaryListener(
182
186
  scope,
@@ -227,8 +231,8 @@ function ComplementaryArea({
227
231
  shortcut: toggleShortcut
228
232
  }
229
233
  ) }),
230
- name && isPinnable && /* @__PURE__ */ jsx(
231
- ComplementaryAreaMoreMenuItem,
234
+ name && isPinnable && !hasMenuItem && /* @__PURE__ */ jsx(
235
+ DefaultComplementaryAreaMoreMenuItem,
232
236
  {
233
237
  target: name,
234
238
  scope,
package/build-module/components/complementary-area/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/complementary-area/index.js"],
4
- "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"],
5
- "mappings": ";AAAA,OAAO,UAAU;AACjB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,aAAa,iBAAiB;AACvC,SAAS,UAAU;AACnB,SAAS,OAAO,WAAW,kBAAkB;AAC7C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,SAAS,qBAAqB;AACvC,SAAS,SAAS,wBAAwB;AAC1C;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AACP,SAAS,wBAAwB;AACjC,OAAO,6BAA6B;AACpC,OAAO,mCAAmC;AAC1C,OAAO,6BAA6B;AACpC,OAAO,iBAAiB;AACxB,SAAS,SAAS,sBAAsB;AAKhC,SAmSF,UAnSE,KAmSF,YAnSE;AAHR,IAAM,qBAAqB;AAE3B,SAAS,sBAAuB,EAAE,OAAO,GAAG,MAAM,GAAI;AACrD,SAAO,oBAAC,QAAK,MAAO,qBAAsB,KAAM,IAAO,GAAG,OAAQ;AACnE;AAEA,IAAM,WAAW;AAAA;AAAA;AAAA;AAAA,EAIhB,MAAM,EAAE,OAAO,OAAO;AAAA;AAAA;AAAA,EAGtB,QAAQ,CAAE,gBAAkB,EAAE,OAAO,GAAG,WAAW;AACpD;AAYA,SAAS,gBAAiB,QAAQ,OAAQ;AACzC,MAAK,eAAgB,MAAO,GAAI;AAC/B,WAAO,aAAc,QAAQ;AAAA,MAC5B,GAAG;AAAA,MACH,WAAW,KAAM,OAAO,MAAM,WAAW,MAAM,SAAU;AAAA,MACzD,OAAO,EAAE,GAAG,OAAO,MAAM,OAAO,GAAG,MAAM,MAAM;AAAA,IAChD,CAAE;AAAA,EACH;AAEA,SAAO,oBAAC,SAAM,GAAG,OAAQ;AAC1B;AAEA,SAAS,sBAAuB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAEzD,QAAM,qBAAqB,YAAa,UAAW;AACnD,QAAM,mBACL,CAAC,CAAE,sBACH,CAAC,CAAE,cACH,eAAe;AAChB,QAAM,aAAa;AAAA,IAClB,MAAM;AAAA,IACN,UACC,iBAAiB,oBAAoB,mBAClC,IACA;AAAA,IACJ,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AAAA,EACxB;AAEA,SACC,oBAAC,QAAK,MAAO,qBAAsB,KAAM,IACxC,8BAAC,mBAAgB,SAAU,OAAQ,QAAS,YACzC,sBACD;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA;AAAA,MACA,SAAQ;AAAA,MACR,SAAQ;AAAA,MACR,MAAK;AAAA,MACL;AAAA,MACA,WAAU;AAAA,MAER,0BAAiB,QAAQ;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,MACD,CAAE;AAAA;AAAA,EACH,GAEF,GACD;AAEF;AAEA,SAAS,+BACR,OACA,YACA,YACA,UACA,SACC;AACD,QAAM,qBAAqB,OAAQ,KAAM;AACzC,QAAM,4BAA4B,OAAQ,KAAM;AAChD,QAAM,EAAE,yBAAyB,yBAAyB,IACzD,YAAa,cAAe;AAC7B,YAAW,MAAM;AAGhB,QAAK,YAAY,WAAW,CAAE,mBAAmB,SAAU;AAC1D,+BAA0B,KAAM;AAGhC,gCAA0B,UAAU;AAAA,IACrC;AAAA;AAAA;AAAA;AAAA,MAIC,0BAA0B,WAC1B,CAAE,WACF,mBAAmB;AAAA,MAClB;AAGD,gCAA0B,UAAU;AACpC,8BAAyB,OAAO,UAAW;AAAA,IAC5C;AAAA;AAAA;AAAA;AAAA,MAIC,0BAA0B,WAC1B,cACA,eAAe;AAAA,MACd;AACD,gCAA0B,UAAU;AAAA,IACrC;AACA,QAAK,YAAY,mBAAmB,SAAU;AAC7C,yBAAmB,UAAU;AAAA,IAC9B;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACH;AAEA,SAAS,kBAAmB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA,aAAa,GAAI,cAAe;AAAA,EAChC,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAI;AACH,QAAM,UAAU,iBAAiB;AACjC,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,aAAa,kBAAkB,GAAI,QAAQ,IAAK,IAAK,IAAK;AAMhE,QAAM,CAAE,SAAS,UAAW,IAAI,SAAU,KAAM;AAChD,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI;AAAA,IACH,CAAE,WAAY;AACb,YAAM;AAAA,QACL;AAAA,QACA;AAAA,QACA;AAAA,MACD,IAAI,OAAQ,cAAe;AAC3B,YAAM,EAAE,IAAI,IAAI,OAAQ,gBAAiB;AAEzC,YAAM,cAAc,2BAA4B,KAAM;AAEtD,aAAO;AAAA,QACN,WAAW,2BAA4B,KAAM;AAAA,QAC7C,UAAU,gBAAgB;AAAA,QAC1B,UAAU,aAAc,OAAO,UAAW;AAAA,QAC1C,YAAY;AAAA,QACZ,SAAS,OAAQ,aAAc,EAAE,gBAAiB,UAAW;AAAA,QAC7D,SAAS,OAAQ,aAAc,EAAE,gBAAiB,OAAQ;AAAA,QAC1D,gBAAgB,IAAK,QAAQ,gBAAiB;AAAA,MAC/C;AAAA,IACD;AAAA,IACA,CAAE,YAAY,KAAM;AAAA,EACrB;AAEA,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AAEzD;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACA,QAAM;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,IAAI,YAAa,cAAe;AAEhC,YAAW,MAAM;AAGhB,QAAK,qBAAqB,eAAe,UAAa,CAAE,SAAU;AACjE,8BAAyB,OAAO,UAAW;AAAA,IAC5C,WAAY,eAAe,UAAa,SAAU;AACjD,+BAA0B,OAAO,UAAW;AAAA,IAC7C;AACA,eAAY,IAAK;AAAA,EAClB,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,MAAK,CAAE,SAAU;AAChB;AAAA,EACD;AAEA,SACC,iCACG;AAAA,kBACD,oBAAC,eAAY,OACV,sBACD;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WACC,aAAc,CAAE,kBAAkB;AAAA,QAEnC,iBAAgB;AAAA,QAChB,iBAAgB;AAAA,QAChB,OAAQ;AAAA,QACR,MAAO,iBAAiB,QAAQ;AAAA,QAChC,aAAc,CAAE;AAAA,QAChB,SAAU,iBAAiB,aAAa;AAAA,QACxC,MAAK;AAAA,QACL,UAAW;AAAA;AAAA,IACZ,GAEF;AAAA,IAEC,QAAQ,cACT;AAAA,MAAC;AAAA;AAAA,QACA,QAAS;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QAEE;AAAA;AAAA,IACH;AAAA,IAED;AAAA,MAAC;AAAA;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAY,KAAM,gCAAgC,SAAU;AAAA,QAC5D;AAAA,QACA,IAAK,WAAW,QAAS,KAAK,GAAI;AAAA,QAClC;AAAA,QAEA;AAAA;AAAA,YAAC;AAAA;AAAA,cACA,WAAY;AAAA,cACZ;AAAA,cACA,SAAU,MAAM,yBAA0B,KAAM;AAAA,cAChD,mBAAoB;AAAA,gBACnB,OAAO;AAAA,gBACP,MAAM;AAAA,gBACN,UAAU;AAAA,gBACV;AAAA,gBACA;AAAA,cACD;AAAA,cAEE,oBACD,iCACC;AAAA,oCAAC,QAAG,WAAU,8CACX,iBACH;AAAA,gBACE,cAAc,CAAE,oBACjB;AAAA,kBAAC;AAAA;AAAA,oBACA,WAAU;AAAA,oBACV,MAAO,WAAW,aAAa;AAAA,oBAC/B,OACC,WACG,GAAI,oBAAqB,IACzB,GAAI,gBAAiB;AAAA,oBAEzB,SAAU,OACP,WAAW,YAAY;AAAA,sBACxB;AAAA,sBACA;AAAA,oBACD;AAAA,oBAED,WAAY;AAAA,oBACZ,MAAK;AAAA;AAAA,gBACN;AAAA,iBAEF;AAAA;AAAA,UAEF;AAAA,UACA,oBAAC,SAAM,WAAY,gBAAmB,UAAU;AAAA;AAAA;AAAA,IACjD;AAAA,KACD;AAEF;AAEA,kBAAkB,OAAO;AAEzB,IAAO,6BAAQ;",
3
+ "sources": ["../../../src/components/complementary-area/index.jsx"],
4
+ "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"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/build-module/components/complementary-area-header/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // packages/interface/src/components/complementary-area-header/index.js
1
+ // packages/interface/src/components/complementary-area-header/index.jsx
2
2
  import clsx from "clsx";
3
3
  import { closeSmall } from "@wordpress/icons";
4
4
  import ComplementaryAreaToggle from "../complementary-area-toggle/index.mjs";
package/build-module/components/complementary-area-header/index.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/complementary-area-header/index.js"],
3
+ "sources": ["../../../src/components/complementary-area-header/index.jsx"],
4
4
  "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"],
5
5
  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,OAAO,6BAA6B;AAQlC,cAGA,YAHA;AANF,IAAM,0BAA0B,CAAE;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AACD,MAAO;AACN,QAAM,eACL,oBAAC,2BAAwB,MAAO,YAAe,GAAG,mBAAoB;AAEvE,SACC;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,QACA;AAAA,MACD;AAAA,MACA,UAAW;AAAA,MAET;AAAA;AAAA,QACA;AAAA;AAAA;AAAA,EACH;AAEF;AAEA,IAAO,oCAAQ;",
6
6
  "names": []
package/build-module/components/complementary-area-more-menu-item/index.mjs CHANGED
@@ -1,38 +1,29 @@
1
- // packages/interface/src/components/complementary-area-more-menu-item/index.js
1
+ // packages/interface/src/components/complementary-area-more-menu-item/index.jsx
2
+ import { observableMap, useObservableValue } from "@wordpress/compose";
3
+ import { useLayoutEffect } from "@wordpress/element";
2
4
  import { check } from "@wordpress/icons";
3
- import { MenuItem } from "@wordpress/components";
4
5
  import ComplementaryAreaToggle from "../complementary-area-toggle/index.mjs";
5
6
  import ActionItem from "../action-item/index.mjs";
6
7
  import { jsx } from "react/jsx-runtime";
7
- var PluginsMenuItem = ({
8
- // Menu item is marked with unstable prop for backward compatibility.
9
- // They are removed so they don't leak to DOM elements.
10
- // @see https://github.com/WordPress/gutenberg/issues/14457
11
- __unstableExplicitMenuItem,
12
- __unstableTarget,
13
- ...restProps
14
- }) => /* @__PURE__ */ jsx(MenuItem, { ...restProps });
15
- function ComplementaryAreaMoreMenuItem({
8
+ var menuItems = observableMap();
9
+ function useHasComplementaryAreaMenuItem(scope, target) {
10
+ return !!useObservableValue(menuItems, `${scope}/${target}`);
11
+ }
12
+ function DefaultComplementaryAreaMoreMenuItem({
16
13
  scope,
17
14
  target,
18
- __unstableExplicitMenuItem,
19
15
  ...props
20
16
  }) {
21
17
  return /* @__PURE__ */ jsx(
22
18
  ComplementaryAreaToggle,
23
19
  {
24
- as: (toggleProps) => {
25
- return /* @__PURE__ */ jsx(
26
- ActionItem,
27
- {
28
- __unstableExplicitMenuItem,
29
- __unstableTarget: `${scope}/${target}`,
30
- as: PluginsMenuItem,
31
- name: `${scope}/plugin-more-menu`,
32
- ...toggleProps
33
- }
34
- );
35
- },
20
+ as: (toggleProps) => /* @__PURE__ */ jsx(
21
+ ActionItem,
22
+ {
23
+ name: `${scope}/plugin-more-menu`,
24
+ ...toggleProps
25
+ }
26
+ ),
36
27
  role: "menuitemcheckbox",
37
28
  selectedIcon: check,
38
29
  name: target,
@@ -41,7 +32,39 @@ function ComplementaryAreaMoreMenuItem({
41
32
  }
42
33
  );
43
34
  }
35
+ function ComplementaryAreaMoreMenuItem({
36
+ scope,
37
+ target,
38
+ // Accepted so they don't leak to DOM elements. Registering the menu item is
39
+ // what keeps `ComplementaryArea` from injecting a second one.
40
+ __unstableExplicitMenuItem,
41
+ __unstableTarget,
42
+ ...props
43
+ }) {
44
+ useLayoutEffect(() => {
45
+ const key = `${scope}/${target}`;
46
+ menuItems.set(key, (menuItems.get(key) ?? 0) + 1);
47
+ return () => {
48
+ const count = menuItems.get(key) - 1;
49
+ if (count) {
50
+ menuItems.set(key, count);
51
+ } else {
52
+ menuItems.delete(key);
53
+ }
54
+ };
55
+ }, [scope, target]);
56
+ return /* @__PURE__ */ jsx(
57
+ DefaultComplementaryAreaMoreMenuItem,
58
+ {
59
+ scope,
60
+ target,
61
+ ...props
62
+ }
63
+ );
64
+ }
44
65
  export {
45
- ComplementaryAreaMoreMenuItem as default
66
+ DefaultComplementaryAreaMoreMenuItem,
67
+ ComplementaryAreaMoreMenuItem as default,
68
+ useHasComplementaryAreaMenuItem
46
69
  };
47
70
  //# sourceMappingURL=index.mjs.map
package/build-module/components/complementary-area-more-menu-item/index.mjs.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/complementary-area-more-menu-item/index.js"],
4
- "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"],
5
- "mappings": ";AAAA,SAAS,aAAa;AACtB,SAAS,gBAAgB;AACzB,OAAO,6BAA6B;AACpC,OAAO,gBAAgB;AAShB;AAPP,IAAM,kBAAkB,CAAE;AAAA;AAAA;AAAA;AAAA,EAIzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAO,oBAAC,YAAW,GAAG,WAAY;AAEnB,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,CAAE,gBAAiB;AACvB,eACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YAGA,kBAAmB,GAAI,KAAM,IAAK,MAAO;AAAA,YACzC,IAAK;AAAA,YACL,MAAO,GAAI,KAAM;AAAA,YACf,GAAG;AAAA;AAAA,QACN;AAAA,MAEF;AAAA,MACA,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
3
+ "sources": ["../../../src/components/complementary-area-more-menu-item/index.jsx"],
4
+ "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"],
5
+ "mappings": ";AAAA,SAAS,eAAe,0BAA0B;AAClD,SAAS,uBAAuB;AAChC,SAAS,aAAa;AACtB,OAAO,6BAA6B;AACpC,OAAO,gBAAgB;AAqBnB;AAjBJ,IAAM,YAAY,cAAc;AAEzB,SAAS,gCAAiC,OAAO,QAAS;AAChE,SAAO,CAAC,CAAE,mBAAoB,WAAW,GAAI,KAAM,IAAK,MAAO,EAAG;AACnE;AAKO,SAAS,qCAAsC;AAAA,EACrD;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,CAAE,gBACN;AAAA,QAAC;AAAA;AAAA,UACA,MAAO,GAAI,KAAM;AAAA,UACf,GAAG;AAAA;AAAA,MACN;AAAA,MAED,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;AAEe,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA;AAAA;AAAA,EAGA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,kBAAiB,MAAM;AACtB,UAAM,MAAM,GAAI,KAAM,IAAK,MAAO;AAClC,cAAU,IAAK,MAAO,UAAU,IAAK,GAAI,KAAK,KAAM,CAAE;AAEtD,WAAO,MAAM;AACZ,YAAM,QAAQ,UAAU,IAAK,GAAI,IAAI;AACrC,UAAK,OAAQ;AACZ,kBAAU,IAAK,KAAK,KAAM;AAAA,MAC3B,OAAO;AACN,kBAAU,OAAQ,GAAI;AAAA,MACvB;AAAA,IACD;AAAA,EACD,GAAG,CAAE,OAAO,MAAO,CAAE;AAErB,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
6
6
  "names": []
7
7
  }
package/build-module/components/complementary-area-toggle/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // packages/interface/src/components/complementary-area-toggle/index.js
1
+ // packages/interface/src/components/complementary-area-toggle/index.jsx
2
2
  import { Button } from "@wordpress/components";
3
3
  import { useDispatch, useSelect } from "@wordpress/data";
4
4
  import { usePluginContext } from "@wordpress/plugins";
package/build-module/components/complementary-area-toggle/index.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/complementary-area-toggle/index.js"],
3
+ "sources": ["../../../src/components/complementary-area-toggle/index.jsx"],
4
4
  "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"],
5
5
  "mappings": ";AAAA,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AACvC,SAAS,wBAAwB;AACjC,SAAS,SAAS,sBAAsB;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,UAAU,iBAAiB;AACjC,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,aAAa,kBAAkB,GAAI,QAAQ,IAAK,IAAK,IAAK;AAChE,QAAM,aAAa;AAAA,IAClB,CAAE,WACD,OAAQ,cAAe,EAAE,2BAA4B,KAAM,MAC3D;AAAA,IACD,CAAE,YAAY,KAAM;AAAA,EACrB;AAEA,QAAM,EAAE,yBAAyB,yBAAyB,IACzD,YAAa,cAAe;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;",
6
6
  "names": []
package/build-module/components/interface-skeleton/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // packages/interface/src/components/interface-skeleton/index.js
1
+ // packages/interface/src/components/interface-skeleton/index.jsx
2
2
  import clsx from "clsx";
3
3
  import { NavigableRegion } from "@wordpress/admin-ui";
4
4
  import { forwardRef, useEffect } from "@wordpress/element";
package/build-module/components/interface-skeleton/index.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/interface-skeleton/index.js"],
3
+ "sources": ["../../../src/components/interface-skeleton/index.jsx"],
4
4
  "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"],
5
5
  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,uBAAuB;AAChC,SAAS,YAAY,iBAAiB;AACtC;AAAA,EACC,oBAAoB;AAAA,EACpB,6BAA6B;AAAA,OACvB;AACP,SAAS,IAAI,UAAU;AACvB,SAAS,kBAAkB,wBAAwB;AAuG7C,cAoCF,YApCE;AArGN,IAAM,qBAAqB;AAC3B,IAAM,mBAAmB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AACxB;AAEA,SAAS,aAAc,WAAY;AAClC,YAAW,MAAM;AAChB,UAAM,UACL,YAAY,SAAS,cAAe,aAAc,SAAU,GAAI;AACjE,QAAK,CAAE,SAAU;AAChB;AAAA,IACD;AACA,YAAQ,UAAU,OAAQ,SAAU;AACpC,WAAO,MAAM;AACZ,cAAQ,UAAU,OAAQ,SAAU;AAAA,IACrC;AAAA,EACD,GAAG,CAAE,SAAU,CAAE;AAClB;AAEA,IAAM,iBAAiB;AAAA,EACtB,QAAQ,EAAE,SAAS,GAAG,WAAW,IAAI;AAAA,EACrC,SAAS,EAAE,SAAS,GAAG,WAAW,EAAE;AAAA,EACpC,sBAAsB;AAAA,IACrB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,MACX,GAAG;AAAA,MACH,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,EACD;AAAA,EACA,uBAAuB;AAAA,IACtB,SAAS;AAAA,IACT,WAAW;AAAA,EACZ;AAAA,EACA,yBAAyB;AAAA,IACxB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,MACX,GAAG;AAAA,MACH,OAAO;AAAA,MACP,eAAe;AAAA,IAChB;AAAA,EACD;AACD;AAEA,SAAS,kBACR;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GACA,KACC;AACD,QAAM,mBAAmB,iBAAkB,UAAU,GAAI;AACzD,QAAM,gBAAgB,iBAAiB;AACvC,QAAM,oBAAoB;AAAA,IACzB,MAAM;AAAA,IACN,UAAU,gBAAgB,IAAI;AAAA,IAC9B,MAAM,CAAE,KAAK,GAAG,KAAK,CAAE;AAAA,EACxB;AACA,eAAc,8CAA+C;AAE7D,QAAM,gBAAgB;AAAA;AAAA,IAErB,QAAQ,GAAI,UAAU,sBAAuB;AAAA;AAAA,IAE7C,MAAM,GAAI,SAAU;AAAA;AAAA,IAEpB,kBAAkB,GAAI,eAAgB;AAAA;AAAA,IAEtC,SAAS,GAAI,YAAY,wBAAyB;AAAA;AAAA,IAElD,SAAS,GAAI,SAAU;AAAA;AAAA,IAEvB,QAAQ,GAAI,QAAS;AAAA,EACtB;AAEA,QAAM,eAAe,EAAE,GAAG,eAAe,GAAG,OAAO;AAEnD,SACC;AAAA,IAAC;AAAA;AAAA,MACA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,QACA,CAAC,CAAE,UAAU;AAAA,MACd;AAAA,MAEA;AAAA,6BAAC,SAAI,WAAU,wCACd;AAAA,8BAAC,mBAAgB,SAAU,OACxB,WAAC,CAAE,UACJ;AAAA,YAAC;AAAA;AAAA,cACA,IAAK,OAAO;AAAA,cACZ,WAAU;AAAA,cACV,WAAY,aAAa;AAAA,cACzB,SACC,qBAAqB,CAAE,mBACpB,0BACA;AAAA,cAEJ,YACC,qBAAqB,CAAE,mBACpB,yBACA;AAAA,cAEJ,SACC,qBAAqB,CAAE,mBACpB,4BACA;AAAA,cAEJ,MACC,qBAAqB,CAAE,mBACpB,0BACA;AAAA,cAEJ,UAAW;AAAA,cACX,YAAa;AAAA,cAEX;AAAA;AAAA,UACH,GAEF;AAAA,UACE,qBACD,oBAAC,SAAI,WAAU,wCACZ,yBACH;AAAA,UAED,qBAAC,SAAI,WAAU,sCACd;AAAA,gCAAC,mBAAgB,SAAU,OACxB,WAAC,CAAE,oBACJ;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,WAAY,aAAa;AAAA,gBACzB,IAAK,OAAO;AAAA,gBACZ,SAAQ;AAAA,gBACR,SAAQ;AAAA,gBACR,MAAK;AAAA,gBAML,UAAW;AAAA,kBACV,MAAM,EAAE,OAAO,OAAO;AAAA,kBACtB,QAAQ,EAAE,OAAO,EAAE;AAAA,gBACpB;AAAA,gBACA,YAAa;AAAA,gBAEb;AAAA,kBAAC,OAAO;AAAA,kBAAP;AAAA,oBACA,OAAQ;AAAA,sBACP,OAAO,mBACJ,UACA;AAAA,sBACH,QAAQ;AAAA,oBACT;AAAA,oBACA,UAAW;AAAA,sBACV,MAAM,EAAE,GAAG,EAAE;AAAA,sBACb,QAAQ,EAAE,GAAG,QAAQ;AAAA,oBACtB;AAAA,oBACA,YAAa;AAAA,oBAEX;AAAA;AAAA,gBACH;AAAA;AAAA,YACD,GAEF;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,WAAY,aAAa;AAAA,gBAEvB;AAAA;AAAA,YACH;AAAA,YACE,CAAC,CAAE,WACJ;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,WAAY,aAAa;AAAA,gBAEvB;AAAA;AAAA,YACH;AAAA,YAEC,CAAC,CAAE,WACJ;AAAA,cAAC;AAAA;AAAA,gBACA,WAAU;AAAA,gBACV,WAAY,aAAa;AAAA,gBAEvB;AAAA;AAAA,YACH;AAAA,aAEF;AAAA,WACD;AAAA,QACE,CAAC,CAAE,UACJ;AAAA,UAAC;AAAA;AAAA,YACA,WAAU;AAAA,YACV,WAAY,aAAa;AAAA,YAEvB;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEF;AAEF;AAEA,IAAO,6BAAQ,WAAY,iBAAkB;",
6
6
  "names": []
package/build-module/components/pinned-items/index.mjs CHANGED
@@ -1,4 +1,4 @@
1
- // packages/interface/src/components/pinned-items/index.js
1
+ // packages/interface/src/components/pinned-items/index.jsx
2
2
  import clsx from "clsx";
3
3
  import { Slot, Fill } from "@wordpress/components";
4
4
  import { jsx } from "react/jsx-runtime";
package/build-module/components/pinned-items/index.mjs.map CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/components/pinned-items/index.js"],
3
+ "sources": ["../../../src/components/pinned-items/index.jsx"],
4
4
  "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"],
5
5
  "mappings": ";AAAA,OAAO,UAAU;AACjB,SAAS,MAAM,YAAY;AAGnB;AADR,SAAS,YAAa,EAAE,OAAO,GAAG,MAAM,GAAI;AAC3C,SAAO,oBAAC,QAAK,MAAO,eAAgB,KAAM,IAAO,GAAG,OAAQ;AAC7D;AAEA,SAAS,gBAAiB,EAAE,OAAO,WAAW,GAAG,MAAM,GAAI;AAC1D,SACC,oBAAC,QAAK,MAAO,eAAgB,KAAM,IAAO,GAAG,OAC1C,WAAE,UACH,OAAO,SAAS,KACf;AAAA,IAAC;AAAA;AAAA,MACA,WAAY;AAAA,QACX;AAAA,QACA;AAAA,MACD;AAAA,MAEE;AAAA;AAAA,EACH,GAGH;AAEF;AAEA,YAAY,OAAO;AAEnB,IAAO,uBAAQ;",
6
6
  "names": []
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/interface",
3
- "version": "9.38.0",
3
+ "version": "10.0.2-next.v.202608281122.0",
4
4
  "description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -52,19 +52,18 @@
52
52
  "build-module/store/index.mjs"
53
53
  ],
54
54
  "dependencies": {
55
- "@wordpress/a11y": "^4.53.0",
56
- "@wordpress/admin-ui": "^2.8.0",
57
- "@wordpress/base-styles": "^12.1.0",
58
- "@wordpress/components": "^39.0.0",
59
- "@wordpress/compose": "^8.6.0",
60
- "@wordpress/data": "^10.53.0",
61
- "@wordpress/deprecated": "^4.53.0",
62
- "@wordpress/element": "^8.5.0",
63
- "@wordpress/i18n": "^6.26.0",
64
- "@wordpress/icons": "^15.4.0",
65
- "@wordpress/plugins": "^7.53.0",
66
- "@wordpress/preferences": "^4.53.0",
67
- "@wordpress/viewport": "^6.53.0",
55
+ "@wordpress/admin-ui": "^2.9.1-next.v.202608281122.0",
56
+ "@wordpress/base-styles": "^13.0.1-next.v.202608281122.0",
57
+ "@wordpress/components": "^40.1.1-next.v.202608281122.0",
58
+ "@wordpress/compose": "^8.7.2-next.v.202608281122.0",
59
+ "@wordpress/data": "^10.54.2-next.v.202608281122.0",
60
+ "@wordpress/deprecated": "^4.54.1-next.v.202608281122.0",
61
+ "@wordpress/element": "^8.6.2-next.v.202608281122.0",
62
+ "@wordpress/i18n": "^6.27.1-next.v.202608281122.0",
63
+ "@wordpress/icons": "^15.5.1-next.v.202608281122.0",
64
+ "@wordpress/plugins": "^7.54.1-next.v.202608281122.0",
65
+ "@wordpress/preferences": "^4.54.2-next.v.202608281122.0",
66
+ "@wordpress/viewport": "^6.54.1-next.v.202608281122.0",
68
67
  "clsx": "^2.1.1"
69
68
  },
70
69
  "devDependencies": {
@@ -78,5 +77,5 @@
78
77
  "publishConfig": {
79
78
  "access": "public"
80
79
  },
81
- "gitHead": "989764d42ff93e33684aaf0b96a5b7f3d9bbff52"
80
+ "gitHead": "de479d415171765f7b573c81aeec5334ff506a12"
82
81
  }
package/src/components/action-item/README.md CHANGED
@@ -4,7 +4,7 @@
4
4
 
5
5
  ## ActionItem.Slot
6
6
 
7
- The props not referred below are passed to the container component.
7
+ Renders nothing when no fill is present. The props not referred below are passed to the container component.
8
8
 
9
9
  ## Props
10
10
 
@@ -15,13 +15,6 @@ The name of the slot and fill pair passed to the `Slot` component.
15
15
  - Type: `String`
16
16
  - Required: Yes
17
17
 
18
- ### bubblesVirtually
19
-
20
- Property used to change the event bubbling behavior, passed to the `Slot` component.
21
-
22
- - Type: `boolean`
23
- - Required: no
24
-
25
18
  ### as
26
19
 
27
20
  The component used as the container of the fills. Defaults to the `MenuGroup` component.
@@ -30,6 +23,20 @@ The component used as the container of the fills. Defaults to the `MenuGroup` co
30
23
  - Required: no
31
24
  - Default: `MenuGroup`
32
25
 
26
+ ### fillProps
27
+
28
+ Props passed to every fill. An `as` among them provides the component the items render as, unless the item asks for one of its own.
29
+
30
+ - Type: `Object`
31
+ - Required: no
32
+
33
+ ### children
34
+
35
+ A function receiving the rendered fills as a flat array. Use it when the container has to wrap each fill rather than just group them. Takes precedence over `as`.
36
+
37
+ - Type: `Function`
38
+ - Required: no
39
+
33
40
  ## ActionItem
34
41
 
35
42
  The props not referred below are passed to the item component.
@@ -50,8 +57,8 @@ Callback function executed when a click on the item happens.
50
57
 
51
58
  ### as
52
59
 
53
- The component that is going to be used to render an action item. Defaults to the `Button` component.
60
+ The component that is going to be used to render an action item. Defaults to the `as` the slot provides through `fillProps`, or to the `MenuItem` component, so that it nests in the `MenuGroup` the slot renders by default.
54
61
 
55
62
  - Type: `Component`
56
63
  - Required: no
57
- - Default: `Button`
64
+ - Default: `MenuItem`
package/src/components/action-item/index.jsx ADDED
@@ -0,0 +1,64 @@
1
+ import { MenuGroup, MenuItem, Slot, Fill } from '@wordpress/components';
2
+ import { Children } from '@wordpress/element';
3
+
4
+ function ActionItemSlot( {
5
+ name,
6
+ as: Component = MenuGroup,
7
+ fillProps = {},
8
+ children,
9
+ ...props
10
+ } ) {
11
+ return (
12
+ <Slot name={ name } fillProps={ fillProps }>
13
+ { ( fills ) => {
14
+ // Each fill renders an array of its own, so flatten them into a
15
+ // single list before handing them over.
16
+ const items = Children.toArray( fills );
17
+
18
+ if ( ! items.length ) {
19
+ return null;
20
+ }
21
+
22
+ if ( typeof children === 'function' ) {
23
+ return children( items );
24
+ }
25
+
26
+ return <Component { ...props }>{ items }</Component>;
27
+ } }
28
+ </Slot>
29
+ );
30
+ }
31
+
32
+ function ActionItem( { name, as, onClick, ...props } ) {
33
+ return (
34
+ <Fill name={ name }>
35
+ { ( { as: slotAs = MenuItem, onClick: slotOnClick } ) => {
36
+ // The slot provides the component to render the item with, so
37
+ // that it fits the menu it ends up in, and an onClick handler,
38
+ // for example one that closes that menu. The `as` prop
39
+ // replaces the component. The `onClick` prop does not replace
40
+ // the handler: both run.
41
+ const Component = as ?? slotAs;
42
+ const handlers = [ onClick, slotOnClick ].filter( Boolean );
43
+
44
+ return (
45
+ <Component
46
+ onClick={
47
+ handlers.length
48
+ ? ( ...args ) =>
49
+ handlers.forEach( ( handler ) =>
50
+ handler( ...args )
51
+ )
52
+ : undefined
53
+ }
54
+ { ...props }
55
+ />
56
+ );
57
+ } }
58
+ </Fill>
59
+ );
60
+ }
61
+
62
+ ActionItem.Slot = ActionItemSlot;
63
+
64
+ export default ActionItem;
package/src/components/complementary-area/{index.js → index.jsx} RENAMED
@@ -26,7 +26,10 @@ import {
26
26
  } from '@wordpress/compose';
27
27
  import { usePluginContext } from '@wordpress/plugins';
28
28
  import ComplementaryAreaHeader from '../complementary-area-header';
29
- import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
29
+ import {
30
+ DefaultComplementaryAreaMoreMenuItem,
31
+ useHasComplementaryAreaMenuItem,
32
+ } from '../complementary-area-more-menu-item';
30
33
  import ComplementaryAreaToggle from '../complementary-area-toggle';
31
34
  import PinnedItems from '../pinned-items';
32
35
  import { store as interfaceStore } from '../../store';
@@ -232,6 +235,7 @@ function ComplementaryArea( {
232
235
  [ identifier, scope ]
233
236
  );
234
237
 
238
+ const hasMenuItem = useHasComplementaryAreaMenuItem( scope, name );
235
239
  const isMobileViewport = useViewportMatch( 'medium', '<' );
236
240
 
237
241
  useAdjustComplementaryListener(
@@ -294,15 +298,15 @@ function ComplementaryArea( {
294
298
  ) }
295
299
  </PinnedItems>
296
300
  ) }
297
- { name && isPinnable && (
298
- <ComplementaryAreaMoreMenuItem
301
+ { name && isPinnable && ! hasMenuItem && (
302
+ <DefaultComplementaryAreaMoreMenuItem
299
303
  target={ name }
300
304
  scope={ scope }
301
305
  icon={ icon }
302
306
  identifier={ identifier }
303
307
  >
304
308
  { title }
305
- </ComplementaryAreaMoreMenuItem>
309
+ </DefaultComplementaryAreaMoreMenuItem>
306
310
  ) }
307
311
  <ComplementaryAreaFill
308
312
  activeArea={ activeArea }
package/src/components/complementary-area-more-menu-item/index.jsx ADDED
@@ -0,0 +1,70 @@
1
+ import { observableMap, useObservableValue } from '@wordpress/compose';
2
+ import { useLayoutEffect } from '@wordpress/element';
3
+ import { check } from '@wordpress/icons';
4
+ import ComplementaryAreaToggle from '../complementary-area-toggle';
5
+ import ActionItem from '../action-item';
6
+
7
+ // How many more menu items are rendered for a complementary area, by
8
+ // `scope/target`.
9
+ const menuItems = observableMap();
10
+
11
+ export function useHasComplementaryAreaMenuItem( scope, target ) {
12
+ return !! useObservableValue( menuItems, `${ scope }/${ target }` );
13
+ }
14
+
15
+ // The more menu item `ComplementaryArea` injects for every pinnable area. It is
16
+ // left out while a plugin renders one of its own for the same area.
17
+ // @see https://github.com/WordPress/gutenberg/issues/14457
18
+ export function DefaultComplementaryAreaMoreMenuItem( {
19
+ scope,
20
+ target,
21
+ ...props
22
+ } ) {
23
+ return (
24
+ <ComplementaryAreaToggle
25
+ as={ ( toggleProps ) => (
26
+ <ActionItem
27
+ name={ `${ scope }/plugin-more-menu` }
28
+ { ...toggleProps }
29
+ />
30
+ ) }
31
+ role="menuitemcheckbox"
32
+ selectedIcon={ check }
33
+ name={ target }
34
+ scope={ scope }
35
+ { ...props }
36
+ />
37
+ );
38
+ }
39
+
40
+ export default function ComplementaryAreaMoreMenuItem( {
41
+ scope,
42
+ target,
43
+ // Accepted so they don't leak to DOM elements. Registering the menu item is
44
+ // what keeps `ComplementaryArea` from injecting a second one.
45
+ __unstableExplicitMenuItem,
46
+ __unstableTarget,
47
+ ...props
48
+ } ) {
49
+ useLayoutEffect( () => {
50
+ const key = `${ scope }/${ target }`;
51
+ menuItems.set( key, ( menuItems.get( key ) ?? 0 ) + 1 );
52
+
53
+ return () => {
54
+ const count = menuItems.get( key ) - 1;
55
+ if ( count ) {
56
+ menuItems.set( key, count );
57
+ } else {
58
+ menuItems.delete( key );
59
+ }
60
+ };
61
+ }, [ scope, target ] );
62
+
63
+ return (
64
+ <DefaultComplementaryAreaMoreMenuItem
65
+ scope={ scope }
66
+ target={ target }
67
+ { ...props }
68
+ />
69
+ );
70
+ }