npm - @wordpress/interface - Versions diffs - 5.33.0 → 5.35.0 - Mend

@wordpress/interface 5.33.0 → 5.35.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 (32) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,14 @@
 ## Unreleased
+## 5.35.0 (2024-05-16)
+### Internal
+-   Replaced `classnames` package with the faster and smaller `clsx` package ([#61138](https://github.com/WordPress/gutenberg/pull/61138)).
+## 5.34.0 (2024-05-02)
 ## 5.33.0 (2024-04-19)
 ## 5.32.0 (2024-04-03)
@@ -144,8 +152,8 @@
 ### Breaking Changes
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 ## 2.0.0 (2021-04-06)

package/build/components/complementary-area/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _components = require("@wordpress/components");
 var _data = require("@wordpress/data");
 var _i18n = require("@wordpress/i18n");
@@ -89,7 +89,8 @@ function ComplementaryAreaFill({
     initial: "closed",
     animate: isMobileViewport ? 'mobileOpen' : 'open',
     exit: "closed",
-    transition: transition
+    transition: transition,
+    className: "interface-complementary-area__fill"
   }, (0, _react.createElement)("div", {
     id: id,
     className: className,
@@ -224,7 +225,7 @@ function ComplementaryArea({
   }, title), (0, _react.createElement)(ComplementaryAreaFill, {
     activeArea: activeArea,
     isActive: isActive,
-    className: (0, _classnames.default)('interface-complementary-area', className),
+    className: (0, _clsx.default)('interface-complementary-area', className),
     scope: scope,
     id: identifier.replace('/', ':')
   }, (0, _react.createElement)(_complementaryAreaHeader.default, {
@@ -234,6 +235,7 @@ function ComplementaryArea({
     smallScreenTitle: smallScreenTitle,
     toggleButtonProps: {
       label: closeLabel,
+      size: 'small',
       shortcut: toggleShortcut,
       scope,
       identifier
@@ -246,7 +248,8 @@ function ComplementaryArea({
     label: isPinned ? (0, _i18n.__)('Unpin from toolbar') : (0, _i18n.__)('Pin to toolbar'),
     onClick: () => (isPinned ? unpinItem : pinItem)(scope, identifier),
     isPressed: isPinned,
-    "aria-expanded": isPinned
+    "aria-expanded": isPinned,
+    size: "compact"
   }))), (0, _react.createElement)(_components.Panel, {
     className: panelClassName
   }, children)));

package/build/components/complementary-area/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_components","_data","_i18n","_icons","_element","_viewport","_preferences","_compose","_complementaryAreaHeader","_complementaryAreaMoreMenuItem","_complementaryAreaToggle","_complementaryAreaContext","_pinnedItems","_store","ANIMATION_DURATION","ComplementaryAreaSlot","scope","props","_react","createElement","Slot","name","SIDEBAR_WIDTH","variants","open","width","closed","mobileOpen","ComplementaryAreaFill","activeArea","isActive","children","className","id","disableMotion","useReducedMotion","isMobileViewport","useViewportMatch","previousActiveArea","usePrevious","previousIsActive","setState","useState","useEffect","transition","type","duration","ease","Fill","__unstableAnimatePresence","initial","__unstableMotion","div","animate","exit","style","useAdjustComplementaryListener","identifier","isSmall","previousIsSmall","useRef","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","useDispatch","interfaceStore","current","ComplementaryArea","closeLabel","__","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isReady","setIsReady","isLoading","isPinned","isLarge","showIconLabels","useSelect","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","preferencesStore","_activeArea","viewportStore","isViewportMatch","pinItem","unpinItem","undefined","Fragment","default","isPressed","label","check","showTooltip","variant","size","target","classnames","replace","onClose","toggleButtonProps","shortcut","Button","starFilled","starEmpty","onClick","Panel","ComplementaryAreaWrapped","withComplementaryAreaContext","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\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';\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 withComplementaryAreaContext from '../complementary-area-context';\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>\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 previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = 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 && ! previousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.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,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\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\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/>\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>\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={ classnames(\n\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\tclassName\n\t\t\t\t) }\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\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\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 && (\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/>\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\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_data","_i18n","_icons","_element","_viewport","_preferences","_compose","_complementaryAreaHeader","_complementaryAreaMoreMenuItem","_complementaryAreaToggle","_complementaryAreaContext","_pinnedItems","_store","ANIMATION_DURATION","ComplementaryAreaSlot","scope","props","_react","createElement","Slot","name","SIDEBAR_WIDTH","variants","open","width","closed","mobileOpen","ComplementaryAreaFill","activeArea","isActive","children","className","id","disableMotion","useReducedMotion","isMobileViewport","useViewportMatch","previousActiveArea","usePrevious","previousIsActive","setState","useState","useEffect","transition","type","duration","ease","Fill","__unstableAnimatePresence","initial","__unstableMotion","div","animate","exit","style","useAdjustComplementaryListener","identifier","isSmall","previousIsSmall","useRef","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","useDispatch","interfaceStore","current","ComplementaryArea","closeLabel","__","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isReady","setIsReady","isLoading","isPinned","isLarge","showIconLabels","useSelect","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","preferencesStore","_activeArea","viewportStore","isViewportMatch","pinItem","unpinItem","undefined","Fragment","default","isPressed","label","check","showTooltip","variant","size","target","clsx","replace","onClose","toggleButtonProps","shortcut","Button","starFilled","starEmpty","onClick","Panel","ComplementaryAreaWrapped","withComplementaryAreaContext","_default","exports"],"sources":["@wordpress/interface/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';\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 withComplementaryAreaContext from '../complementary-area-context';\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 previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = 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 && ! previousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.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,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\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\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/>\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>\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\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'small',\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 && (\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\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":"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","ignoreList":[]}

package/build/components/complementary-area-header/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _icons = require("@wordpress/icons");
 var _complementaryAreaToggle = _interopRequireDefault(require("../complementary-area-toggle"));
 /**
@@ -36,7 +36,7 @@ const ComplementaryAreaHeader = ({
   }, smallScreenTitle && (0, _react.createElement)("h2", {
     className: "interface-complementary-area-header__small-title"
   }, smallScreenTitle), toggleButton), (0, _react.createElement)("div", {
-    className: (0, _classnames.default)('components-panel__header', 'interface-complementary-area-header', className),
+    className: (0, _clsx.default)('components-panel__header', 'interface-complementary-area-header', className),
     tabIndex: -1
   }, children, toggleButton));
 };

package/build/components/complementary-area-header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_icons","_complementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","_react","createElement","default","icon","closeSmall","Fragment","~~classnames~~","tabIndex","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\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\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ ~~classnames~~(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,wBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMG,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjB,IAAAC,MAAA,CAAAC,aAAA,EAACR,wBAAA,CAAAS,OAAuB;IAACC,IAAI,EAAGC,iBAAY;IAAA,GAAMN;EAAiB,CAAI,CACvE;EACD,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjB,IAAAK,MAAA,CAAAC,aAAA;IAAIJ,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACN,IAAAC,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAS,~~mBAAU~~,~~EACrB~~,0BAA0B,EAC1B,qCAAqC,EACrCT,SACD,CAAG;IACHU,QAAQ,EAAG,CAAC;EAAG,GAEbX,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEaR,uBAAuB","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_icons","_complementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","_react","createElement","default","icon","closeSmall","Fragment","clsx","tabIndex","_default","exports"],"sources":["@wordpress/interface/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\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,MAAA,GAAAD,OAAA;AAKA,IAAAE,wBAAA,GAAAH,sBAAA,CAAAC,OAAA;AAbA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,MAAMG,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjB,IAAAC,MAAA,CAAAC,aAAA,EAACR,wBAAA,CAAAS,OAAuB;IAACC,IAAI,EAAGC,iBAAY;IAAA,GAAMN;EAAiB,CAAI,CACvE;EACD,OACC,IAAAE,MAAA,CAAAC,aAAA,EAAAD,MAAA,CAAAK,QAAA,QACC,IAAAL,MAAA,CAAAC,aAAA;IAAKJ,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjB,IAAAK,MAAA,CAAAC,aAAA;IAAIJ,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACN,IAAAC,MAAA,CAAAC,aAAA;IACCJ,SAAS,EAAG,IAAAS,aAAI,EACf,0BAA0B,EAC1B,qCAAqC,EACrCT,SACD,CAAG;IACHU,QAAQ,EAAG,CAAC;EAAG,GAEbX,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAAC,IAAAS,QAAA,GAAAC,OAAA,CAAAP,OAAA,GAEaR,uBAAuB","ignoreList":[]}

package/build/components/interface-skeleton/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _element = require("@wordpress/element");
 var _components = require("@wordpress/components");
 var _i18n = require("@wordpress/i18n");
@@ -104,7 +104,7 @@ function InterfaceSkeleton({
   return (0, _react.createElement)("div", {
     ...(enableRegionNavigation ? navigateRegionsProps : {}),
     ref: (0, _compose.useMergeRefs)([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
-    className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
+    className: (0, _clsx.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
   }, (0, _react.createElement)("div", {
     className: "interface-interface-skeleton__editor"
   }, !!header && (0, _react.createElement)(_navigableRegion.default, {
@@ -147,7 +147,7 @@ function InterfaceSkeleton({
   }, (0, _react.createElement)("div", {
     style: {
       position: 'absolute',
-      width: 'fit-content',
+      width: isMobileViewport ? '100vw' : 'fit-content',
       height: '100%',
       right: 0
     }

package/build/components/interface-skeleton/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["_classnames","_interopRequireDefault","require","_element","_components","_i18n","_compose","_navigableRegion","ANIMATION_DURATION","useHTMLClass","className","useEffect","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","useResizeObserver","isMobileViewport","useViewportMatch","disableMotion","useReducedMotion","defaultTransition","duration","ease","navigateRegionsProps","useNavigateRegions","defaultLabels","_x","body","__","mergedLabels","_react","createElement","useMergeRefs","undefined","classnames","default","as","motion","div","initial","whileHover","animate","variants","__unstableAnimatePresence","ariaLabel","exit","open","width","closed","mobileOpen","style","position","height","right","_default","exports","forwardRef"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\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: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\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\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: __( 'Settings' ),\n\t\t/ translators: accessibility text for the publish landmark region. /\n\t\tactions: __( 'Publish' ),\n\t\t/ translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<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={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\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<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</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{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_element","_components","_i18n","_compose","_navigableRegion","ANIMATION_DURATION","useHTMLClass","className","useEffect","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","useResizeObserver","isMobileViewport","useViewportMatch","disableMotion","useReducedMotion","defaultTransition","duration","ease","navigateRegionsProps","useNavigateRegions","defaultLabels","_x","body","__","mergedLabels","_react","createElement","useMergeRefs","undefined","clsx","default","as","motion","div","initial","whileHover","animate","variants","__unstableAnimatePresence","ariaLabel","exit","open","width","closed","mobileOpen","style","position","height","right","_default","exports","forwardRef"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\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: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\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\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: __( 'Settings' ),\n\t\t/ translators: accessibility text for the publish landmark region. /\n\t\tactions: __( 'Publish' ),\n\t\t/ translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<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={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\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<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\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: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</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{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}

package/build/components/navigable-region/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = NavigableRegion;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 /**
  * External dependencies
  */
@@ -19,7 +19,7 @@ function NavigableRegion({
   ...props
 }) {
   return (0, _react.createElement)(Tag, {
-    className: (0, _classnames.default)('interface-navigable-region', className),
+    className: (0, _clsx.default)('interface-navigable-region', className),
     "aria-label": ariaLabel,
     role: "region",
     tabIndex: "-1",

package/build/components/navigable-region/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","NavigableRegion","children","className","ariaLabel","as","Tag","props","_react","createElement","~~classnames~~","role","tabIndex"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/*\n External dependencies\n */\nimport ~~classnames~~ from '~~classnames~~';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ ~~classnames~~( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGe,SAASC,eAAeA,CAAE;EACxCC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,EAAE,EAAEC,GAAG,GAAG,KAAK;EACf,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACH,GAAG;IACHH,SAAS,EAAG,IAAAO,~~mBAAU~~,EAAE,4BAA4B,EAAEP,SAAU,CAAG;~~IACnE~~,cAAaC,SAAW;IACxBO,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRL;EAAK,GAERL,QACE,CAAC;AAER","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","NavigableRegion","children","className","ariaLabel","as","Tag","props","_react","createElement","clsx","role","tabIndex"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/*\n External dependencies\n */\nimport clsx from 'clsx';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ clsx( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAHA;AACA;AACA;;AAGe,SAASC,eAAeA,CAAE;EACxCC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,EAAE,EAAEC,GAAG,GAAG,KAAK;EACf,GAAGC;AACJ,CAAC,EAAG;EACH,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACH,GAAG;IACHH,SAAS,EAAG,IAAAO,aAAI,EAAE,4BAA4B,EAAEP,SAAU,CAAG;IAC7D,cAAaC,SAAW;IACxBO,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRL;EAAK,GAERL,QACE,CAAC;AAER","ignoreList":[]}

package/build/components/pinned-items/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("react");
-var _classnames = _interopRequireDefault(require("classnames"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _components = require("@wordpress/components");
 /**
  * External dependencies
@@ -34,7 +34,7 @@ function PinnedItemsSlot({
     name: `PinnedItems/${scope}`,
     ...props
   }, fills => fills?.length > 0 && (0, _react.createElement)("div", {
-    className: (0, _classnames.default)(className, 'interface-pinned-items')
+    className: (0, _clsx.default)(className, 'interface-pinned-items')
   }, fills));
 }
 PinnedItems.Slot = PinnedItemsSlot;

package/build/components/pinned-items/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~_classnames~~","_interopRequireDefault","require","_components","PinnedItems","scope","props","_react","createElement","Fill","name","PinnedItemsSlot","className","Slot","fills","length","~~classnames~~","_default","exports","default"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ ~~classnames~~(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":";;;;;;;;AAGA,IAAAA,~~WAAA~~,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASE,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAM,IAAI;IAACC,IAAI,EAAI,eAAeL,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASK,eAAeA,CAAE;EAAEN,KAAK;EAAEO,SAAS;EAAE,GAAGN;AAAM,CAAC,EAAG;EAC1D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAU,IAAI;IAACH,IAAI,EAAI,eAAeL,KAAO,EAAG;IAAA,GAAMC;EAAK,GAC7CQ,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,IAChB,IAAAR,MAAA,CAAAC,aAAA;IACCI,SAAS,EAAG,IAAAI,~~mBAAU~~,~~EACrBJ~~,SAAS,EACT,wBACD;EAAG,GAEDE,KACE,CAGF,CAAC;AAET;AAEAV,WAAW,CAACS,IAAI,GAAGF,eAAe;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEpBf,WAAW","ignoreList":[]}
1	+ {"version":3,"names":["_clsx","_interopRequireDefault","require","_components","PinnedItems","scope","props","_react","createElement","Fill","name","PinnedItemsSlot","className","Slot","fills","length","clsx","_default","exports","default"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":";;;;;;;;AAGA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,WAAA,GAAAD,OAAA;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAGA,SAASE,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,OAAO,IAAAC,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAM,IAAI;IAACC,IAAI,EAAI,eAAeL,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASK,eAAeA,CAAE;EAAEN,KAAK;EAAEO,SAAS;EAAE,GAAGN;AAAM,CAAC,EAAG;EAC1D,OACC,IAAAC,MAAA,CAAAC,aAAA,EAACL,WAAA,CAAAU,IAAI;IAACH,IAAI,EAAI,eAAeL,KAAO,EAAG;IAAA,GAAMC;EAAK,GAC7CQ,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,IAChB,IAAAR,MAAA,CAAAC,aAAA;IACCI,SAAS,EAAG,IAAAI,aAAI,EACfJ,SAAS,EACT,wBACD;EAAG,GAEDE,KACE,CAGF,CAAC;AAET;AAEAV,WAAW,CAACS,IAAI,GAAGF,eAAe;AAAC,IAAAM,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEpBf,WAAW","ignoreList":[]}

package/build-module/components/complementary-area/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -81,7 +81,8 @@ function ComplementaryAreaFill({
     initial: "closed",
     animate: isMobileViewport ? 'mobileOpen' : 'open',
     exit: "closed",
-    transition: transition
+    transition: transition,
+    className: "interface-complementary-area__fill"
   }, createElement("div", {
     id: id,
     className: className,
@@ -216,7 +217,7 @@ function ComplementaryArea({
   }, title), createElement(ComplementaryAreaFill, {
     activeArea: activeArea,
     isActive: isActive,
-    className: classnames('interface-complementary-area', className),
+    className: clsx('interface-complementary-area', className),
     scope: scope,
     id: identifier.replace('/', ':')
   }, createElement(ComplementaryAreaHeader, {
@@ -226,6 +227,7 @@ function ComplementaryArea({
     smallScreenTitle: smallScreenTitle,
     toggleButtonProps: {
       label: closeLabel,
+      size: 'small',
       shortcut: toggleShortcut,
       scope,
       identifier
@@ -238,7 +240,8 @@ function ComplementaryArea({
     label: isPinned ? __('Unpin from toolbar') : __('Pin to toolbar'),
     onClick: () => (isPinned ? unpinItem : pinItem)(scope, identifier),
     isPressed: isPinned,
-    "aria-expanded": isPinned
+    "aria-expanded": isPinned,
+    size: "compact"
   }))), createElement(Panel, {
     className: panelClassName
   }, children)));

package/build-module/components/complementary-area/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["classnames","Button","Panel","Slot","Fill","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","useDispatch","useSelect","__","check","starEmpty","starFilled","useEffect","useRef","useState","store","viewportStore","preferencesStore","useReducedMotion","useViewportMatch","usePrevious","ComplementaryAreaHeader","ComplementaryAreaMoreMenuItem","ComplementaryAreaToggle","withComplementaryAreaContext","PinnedItems","interfaceStore","ANIMATION_DURATION","ComplementaryAreaSlot","scope","props","createElement","name","SIDEBAR_WIDTH","variants","open","width","closed","mobileOpen","ComplementaryAreaFill","activeArea","isActive","children","className","id","disableMotion","isMobileViewport","previousActiveArea","previousIsActive","setState","transition","type","duration","ease","initial","div","animate","exit","style","useAdjustComplementaryListener","identifier","isSmall","previousIsSmall","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","current","ComplementaryArea","closeLabel","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isReady","setIsReady","isLoading","isPinned","isLarge","showIconLabels","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","_activeArea","isViewportMatch","pinItem","unpinItem","undefined","Fragment","isPressed","label","showTooltip","variant","size","target","replace","onClose","toggleButtonProps","shortcut","onClick","ComplementaryAreaWrapped"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\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';\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 withComplementaryAreaContext from '../complementary-area-context';\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>\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 previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = 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 && ! previousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.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,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\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\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/>\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>\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={ classnames(\n\t\t\t\t\t'interface-complementary-area',\n\t\t\t\t\tclassName\n\t\t\t\t) }\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\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\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 && (\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/>\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\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SACCC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,gBAAgB,IAAIC,MAAM,EAC1BC,yBAAyB,IAAIC,eAAe,QACtC,uBAAuB;AAC9B,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,kBAAkB;AAC/D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;AAChE,SAASC,KAAK,IAAIC,aAAa,QAAQ,qBAAqB;AAC5D,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,wBAAwB;AAClE,SACCC,gBAAgB,EAChBC,gBAAgB,EAChBC,WAAW,QACL,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,OAAOC,6BAA6B,MAAM,sCAAsC;AAChF,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,OAAOC,4BAA4B,MAAM,+BAA+B;AACxE,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASV,KAAK,IAAIW,cAAc,QAAQ,aAAa;AAErD,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,SAASC,qBAAqBA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EACrD,OAAOC,aAAA,CAAC/B,IAAI;IAACgC,IAAI,EAAI,qBAAqBH,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AACrE;AAEA,MAAMG,aAAa,GAAG,GAAG;AACzB,MAAMC,QAAQ,GAAG;EAChBC,IAAI,EAAE;IAAEC,KAAK,EAAEH;EAAc,CAAC;EAC9BI,MAAM,EAAE;IAAED,KAAK,EAAE;EAAE,CAAC;EACpBE,UAAU,EAAE;IAAEF,KAAK,EAAE;EAAQ;AAC9B,CAAC;AAED,SAASG,qBAAqBA,CAAE;EAC/BC,UAAU;EACVC,QAAQ;EACRZ,KAAK;EACLa,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,aAAa,GAAG3B,gBAAgB,CAAC,CAAC;EACxC,MAAM4B,gBAAgB,GAAG3B,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D;EACA;EACA;EACA;EACA,MAAM4B,kBAAkB,GAAG3B,WAAW,CAAEoB,UAAW,CAAC;EACpD,MAAMQ,gBAAgB,GAAG5B,WAAW,CAAEqB,QAAS,CAAC;EAChD,MAAM,GAAIQ,QAAQ,CAAE,GAAGnC,QAAQ,CAAE,CAAC,CAAE,CAAC;EACrCF,SAAS,CAAE,MAAM;IAChBqC,QAAQ,CAAE,CAAC,CAAE,CAAC;EACf,CAAC,EAAE,CAAER,QAAQ,CAAG,CAAC;EACjB,MAAMS,UAAU,GAAG;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EACPP,aAAa,IACbC,gBAAgB,IACd,CAAC,CAAEC,kBAAkB,IACtB,CAAC,CAAEP,UAAU,IACbA,UAAU,KAAKO,kBAAoB,GACjC,CAAC,GACDpB,kBAAkB;IACtB0B,IAAI,EAAE,CAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;EACvB,CAAC;EAED,OACCtB,aAAA,CAAC9B,IAAI;IAAC+B,IAAI,EAAI,qBAAqBH,KAAO;EAAG,GAC5CE,aAAA,CAAC1B,eAAe;IAACiD,OAAO,EAAG;EAAO,GAC/B,CAAEN,gBAAgB,IAAIP,QAAQ,KAC/BV,aAAA,CAAC5B,MAAM,CAACoD,GAAG;IACVrB,QAAQ,EAAGA,QAAU;IACrBoB,OAAO,EAAC,QAAQ;IAChBE,OAAO,EAAGV,gBAAgB,GAAG,YAAY,GAAG,MAAQ;IACpDW,IAAI,EAAC,QAAQ;IACbP,UAAU,EAAGA;EAAY,GAEzBnB,aAAA;IACCa,EAAE,EAAGA,EAAI;IACTD,SAAS,EAAGA,SAAW;IACvBe,KAAK,EAAG;MACPtB,KAAK,EAAEU,gBAAgB,GACpB,OAAO,GACPb;IACJ;EAAG,GAEDS,QACE,CACM,CAEG,CACZ,CAAC;AAET;AAEA,SAASiB,8BAA8BA,CACtC9B,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVC,QAAQ,EACRoB,OAAO,EACN;EACD,MAAMC,eAAe,GAAGjD,MAAM,CAAE,KAAM,CAAC;EACvC,MAAMkD,sBAAsB,GAAGlD,MAAM,CAAE,KAAM,CAAC;EAC9C,MAAM;IAAEmD,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D3D,WAAW,CAAEoB,cAAe,CAAC;EAC9Bd,SAAS,CAAE,MAAM;IAChB;IACA;IACA,IAAK6B,QAAQ,IAAIoB,OAAO,IAAI,CAAEC,eAAe,CAACI,OAAO,EAAG;MACvDD,wBAAwB,CAAEpC,KAAM,CAAC;MACjC;MACA;MACAkC,sBAAsB,CAACG,OAAO,GAAG,IAAI;IACtC,CAAC,MAAM;IACN;IACA;IACA;IACAH,sBAAsB,CAACG,OAAO,IAC9B,CAAEL,OAAO,IACTC,eAAe,CAACI,OAAO,EACtB;MACD;MACA;MACAH,sBAAsB,CAACG,OAAO,GAAG,KAAK;MACtCF,uBAAuB,CAAEnC,KAAK,EAAE+B,UAAW,CAAC;IAC7C,CAAC,MAAM;IACN;IACA;IACA;IACAG,sBAAsB,CAACG,OAAO,IAC9B1B,UAAU,IACVA,UAAU,KAAKoB,UAAU,EACxB;MACDG,sBAAsB,CAACG,OAAO,GAAG,KAAK;IACvC;IACA,IAAKL,OAAO,KAAKC,eAAe,CAACI,OAAO,EAAG;MAC1CJ,eAAe,CAACI,OAAO,GAAGL,OAAO;IAClC;EACD,CAAC,EAAE,CACFpB,QAAQ,EACRoB,OAAO,EACPhC,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVyB,wBAAwB,EACxBD,uBAAuB,CACtB,CAAC;AACJ;AAEA,SAASG,iBAAiBA,CAAE;EAC3BzB,QAAQ;EACRC,SAAS;EACTyB,UAAU,GAAG5D,EAAE,CAAE,cAAe,CAAC;EACjCoD,UAAU;EACVS,MAAM;EACNC,eAAe;EACfC,IAAI;EACJC,UAAU,GAAG,IAAI;EACjBC,cAAc;EACd5C,KAAK;EACLG,IAAI;EACJ0C,gBAAgB;EAChBC,KAAK;EACLC,cAAc;EACdC;AACD,CAAC,EAAG;EACH;EACA;EACA;EACA;EACA,MAAM,CAAEC,OAAO,EAAEC,UAAU,CAAE,GAAGjE,QAAQ,CAAE,KAAM,CAAC;EACjD,MAAM;IACLkE,SAAS;IACTvC,QAAQ;IACRwC,QAAQ;IACRzC,UAAU;IACVqB,OAAO;IACPqB,OAAO;IACPC;EACD,CAAC,GAAG5E,SAAS,CACV6E,MAAM,IAAM;IACb,MAAM;MACLC,0BAA0B;MAC1BC,0BAA0B;MAC1BC;IACD,CAAC,GAAGH,MAAM,CAAE1D,cAAe,CAAC;IAC5B,MAAM;MAAE8D;IAAI,CAAC,GAAGJ,MAAM,CAAEnE,gBAAiB,CAAC;IAE1C,MAAMwE,WAAW,GAAGJ,0BAA0B,CAAExD,KAAM,CAAC;IAEvD,OAAO;MACNmD,SAAS,EAAEM,0BAA0B,CAAEzD,KAAM,CAAC;MAC9CY,QAAQ,EAAEgD,WAAW,KAAK7B,UAAU;MACpCqB,QAAQ,EAAEM,YAAY,CAAE1D,KAAK,EAAE+B,UAAW,CAAC;MAC3CpB,UAAU,EAAEiD,WAAW;MACvB5B,OAAO,EAAEuB,MAAM,CAAEpE,aAAc,CAAC,CAAC0E,eAAe,CAAE,UAAW,CAAC;MAC9DR,OAAO,EAAEE,MAAM,CAAEpE,aAAc,CAAC,CAAC0E,eAAe,CAAE,OAAQ,CAAC;MAC3DP,cAAc,EAAEK,GAAG,CAAE,MAAM,EAAE,gBAAiB;IAC/C,CAAC;EACF,CAAC,EACD,CAAE5B,UAAU,EAAE/B,KAAK,CACpB,CAAC;EACD8B,8BAA8B,CAC7B9B,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVC,QAAQ,EACRoB,OACD,CAAC;EACD,MAAM;IACLG,uBAAuB;IACvBC,wBAAwB;IACxB0B,OAAO;IACPC;EACD,CAAC,GAAGtF,WAAW,CAAEoB,cAAe,CAAC;EAEjCd,SAAS,CAAE,MAAM;IAChB;IACA;IACA,IAAKiE,iBAAiB,IAAIrC,UAAU,KAAKqD,SAAS,IAAI,CAAEhC,OAAO,EAAG;MACjEG,uBAAuB,CAAEnC,KAAK,EAAE+B,UAAW,CAAC;IAC7C,CAAC,MAAM,IAAKpB,UAAU,KAAKqD,SAAS,IAAIhC,OAAO,EAAG;MACjDI,wBAAwB,CAAEpC,KAAK,EAAE+B,UAAW,CAAC;IAC9C;IACAmB,UAAU,CAAE,IAAK,CAAC;EACnB,CAAC,EAAE,CACFvC,UAAU,EACVqC,iBAAiB,EACjBhD,KAAK,EACL+B,UAAU,EACVC,OAAO,EACPG,uBAAuB,EACvBC,wBAAwB,CACvB,CAAC;EAEH,IAAK,CAAEa,OAAO,EAAG;IAChB;EACD;EAEA,OACC/C,aAAA,CAAA+D,QAAA,QACGtB,UAAU,IACXzC,aAAA,CAACN,WAAW;IAACI,KAAK,EAAGA;EAAO,GACzBoD,QAAQ,IACTlD,aAAA,CAACR,uBAAuB;IACvBM,KAAK,EAAGA,KAAO;IACf+B,UAAU,EAAGA,UAAY;IACzBmC,SAAS,EACRtD,QAAQ,KAAM,CAAE0C,cAAc,IAAID,OAAO,CACzC;IACD,iBAAgBzC,QAAU;IAC1B,iBAAgBuC,SAAW;IAC3BgB,KAAK,EAAGrB,KAAO;IACfJ,IAAI,EAAGY,cAAc,GAAG1E,KAAK,GAAG8D,IAAM;IACtC0B,WAAW,EAAG,CAAEd,cAAgB;IAChCe,OAAO,EAAGf,cAAc,GAAG,UAAU,GAAGU,SAAW;IACnDM,IAAI,EAAC;EAAS,CACd,CAEU,CACb,EACCnE,IAAI,IAAIwC,UAAU,IACnBzC,aAAA,CAACT,6BAA6B;IAC7B8E,MAAM,EAAGpE,IAAM;IACfH,KAAK,EAAGA,KAAO;IACf0C,IAAI,EAAGA;EAAM,GAEXI,KAC4B,CAC/B,EACD5C,aAAA,CAACQ,qBAAqB;IACrBC,UAAU,EAAGA,UAAY;IACzBC,QAAQ,EAAGA,QAAU;IACrBE,SAAS,EAAG9C,UAAU,CACrB,8BAA8B,EAC9B8C,SACD,CAAG;IACHd,KAAK,EAAGA,KAAO;IACfe,EAAE,EAAGgB,UAAU,CAACyC,OAAO,CAAE,GAAG,EAAE,GAAI;EAAG,GAErCtE,aAAA,CAACV,uBAAuB;IACvBsB,SAAS,EAAG2B,eAAiB;IAC7BF,UAAU,EAAGA,UAAY;IACzBkC,OAAO,EAAGA,CAAA,KAAMrC,wBAAwB,CAAEpC,KAAM,CAAG;IACnD6C,gBAAgB,EAAGA,gBAAkB;IACrC6B,iBAAiB,EAAG;MACnBP,KAAK,EAAE5B,UAAU;MACjBoC,QAAQ,EAAE5B,cAAc;MACxB/C,KAAK;MACL+B;IACD;EAAG,GAEDS,MAAM,IACPtC,aAAA,CAAA+D,QAAA,QACC/D,aAAA;IAAIY,SAAS,EAAC;EAA4C,GACvDgC,KACC,CAAC,EACHH,UAAU,IACXzC,aAAA,CAACjC,MAAM;IACN6C,SAAS,EAAC,8CAA8C;IACxD4B,IAAI,EAAGU,QAAQ,GAAGtE,UAAU,GAAGD,SAAW;IAC1CsF,KAAK,EACJf,QAAQ,GACLzE,EAAE,CAAE,oBAAqB,CAAC,GAC1BA,EAAE,CAAE,gBAAiB,CACxB;IACDiG,OAAO,EAAGA,CAAA,KACT,CAAExB,QAAQ,GAAGW,SAAS,GAAGD,OAAO,EAC/B9D,KAAK,EACL+B,UACD,CACA;IACDmC,SAAS,EAAGd,QAAU;IACtB,iBAAgBA;EAAU,CAC1B,CAED,CAEqB,CAAC,EAC1BlD,aAAA,CAAChC,KAAK;IAAC4C,SAAS,EAAG8B;EAAgB,GAAG/B,QAAiB,CACjC,CACtB,CAAC;AAEL;AAEA,MAAMgE,wBAAwB,GAC7BlF,4BAA4B,CAAE2C,iBAAkB,CAAC;AAElDuC,wBAAwB,CAAC1G,IAAI,GAAG4B,qBAAqB;AAErD,eAAe8E,wBAAwB","ignoreList":[]}
1	+ {"version":3,"names":["clsx","Button","Panel","Slot","Fill","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","useDispatch","useSelect","__","check","starEmpty","starFilled","useEffect","useRef","useState","store","viewportStore","preferencesStore","useReducedMotion","useViewportMatch","usePrevious","ComplementaryAreaHeader","ComplementaryAreaMoreMenuItem","ComplementaryAreaToggle","withComplementaryAreaContext","PinnedItems","interfaceStore","ANIMATION_DURATION","ComplementaryAreaSlot","scope","props","createElement","name","SIDEBAR_WIDTH","variants","open","width","closed","mobileOpen","ComplementaryAreaFill","activeArea","isActive","children","className","id","disableMotion","isMobileViewport","previousActiveArea","previousIsActive","setState","transition","type","duration","ease","initial","div","animate","exit","style","useAdjustComplementaryListener","identifier","isSmall","previousIsSmall","shouldOpenWhenNotSmall","enableComplementaryArea","disableComplementaryArea","current","ComplementaryArea","closeLabel","header","headerClassName","icon","isPinnable","panelClassName","smallScreenTitle","title","toggleShortcut","isActiveByDefault","isReady","setIsReady","isLoading","isPinned","isLarge","showIconLabels","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","_activeArea","isViewportMatch","pinItem","unpinItem","undefined","Fragment","isPressed","label","showTooltip","variant","size","target","replace","onClose","toggleButtonProps","shortcut","onClick","ComplementaryAreaWrapped"],"sources":["@wordpress/interface/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';\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 withComplementaryAreaContext from '../complementary-area-context';\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 previousIsSmall = useRef( false );\n\tconst shouldOpenWhenNotSmall = 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 && ! previousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmall.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\tshouldOpenWhenNotSmall.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\tshouldOpenWhenNotSmall.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmall.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmall.current ) {\n\t\t\tpreviousIsSmall.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,\n\theader,\n\theaderClassName,\n\ticon,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\tsmallScreenTitle,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\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\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/>\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>\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\tsmallScreenTitle={ smallScreenTitle }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'small',\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 && (\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\nconst ComplementaryAreaWrapped =\n\twithComplementaryAreaContext( ComplementaryArea );\n\nComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryAreaWrapped;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SACCC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,IAAI,EACJC,gBAAgB,IAAIC,MAAM,EAC1BC,yBAAyB,IAAIC,eAAe,QACtC,uBAAuB;AAC9B,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,EAAE,QAAQ,iBAAiB;AACpC,SAASC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,kBAAkB;AAC/D,SAASC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,oBAAoB;AAChE,SAASC,KAAK,IAAIC,aAAa,QAAQ,qBAAqB;AAC5D,SAASD,KAAK,IAAIE,gBAAgB,QAAQ,wBAAwB;AAClE,SACCC,gBAAgB,EAChBC,gBAAgB,EAChBC,WAAW,QACL,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,OAAOC,6BAA6B,MAAM,sCAAsC;AAChF,OAAOC,uBAAuB,MAAM,8BAA8B;AAClE,OAAOC,4BAA4B,MAAM,+BAA+B;AACxE,OAAOC,WAAW,MAAM,iBAAiB;AACzC,SAASV,KAAK,IAAIW,cAAc,QAAQ,aAAa;AAErD,MAAMC,kBAAkB,GAAG,GAAG;AAE9B,SAASC,qBAAqBA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EACrD,OAAOC,aAAA,CAAC/B,IAAI;IAACgC,IAAI,EAAI,qBAAqBH,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AACrE;AAEA,MAAMG,aAAa,GAAG,GAAG;AACzB,MAAMC,QAAQ,GAAG;EAChBC,IAAI,EAAE;IAAEC,KAAK,EAAEH;EAAc,CAAC;EAC9BI,MAAM,EAAE;IAAED,KAAK,EAAE;EAAE,CAAC;EACpBE,UAAU,EAAE;IAAEF,KAAK,EAAE;EAAQ;AAC9B,CAAC;AAED,SAASG,qBAAqBA,CAAE;EAC/BC,UAAU;EACVC,QAAQ;EACRZ,KAAK;EACLa,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,EAAG;EACH,MAAMC,aAAa,GAAG3B,gBAAgB,CAAC,CAAC;EACxC,MAAM4B,gBAAgB,GAAG3B,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D;EACA;EACA;EACA;EACA,MAAM4B,kBAAkB,GAAG3B,WAAW,CAAEoB,UAAW,CAAC;EACpD,MAAMQ,gBAAgB,GAAG5B,WAAW,CAAEqB,QAAS,CAAC;EAChD,MAAM,GAAIQ,QAAQ,CAAE,GAAGnC,QAAQ,CAAE,CAAC,CAAE,CAAC;EACrCF,SAAS,CAAE,MAAM;IAChBqC,QAAQ,CAAE,CAAC,CAAE,CAAC;EACf,CAAC,EAAE,CAAER,QAAQ,CAAG,CAAC;EACjB,MAAMS,UAAU,GAAG;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EACPP,aAAa,IACbC,gBAAgB,IACd,CAAC,CAAEC,kBAAkB,IACtB,CAAC,CAAEP,UAAU,IACbA,UAAU,KAAKO,kBAAoB,GACjC,CAAC,GACDpB,kBAAkB;IACtB0B,IAAI,EAAE,CAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;EACvB,CAAC;EAED,OACCtB,aAAA,CAAC9B,IAAI;IAAC+B,IAAI,EAAI,qBAAqBH,KAAO;EAAG,GAC5CE,aAAA,CAAC1B,eAAe;IAACiD,OAAO,EAAG;EAAO,GAC/B,CAAEN,gBAAgB,IAAIP,QAAQ,KAC/BV,aAAA,CAAC5B,MAAM,CAACoD,GAAG;IACVrB,QAAQ,EAAGA,QAAU;IACrBoB,OAAO,EAAC,QAAQ;IAChBE,OAAO,EAAGV,gBAAgB,GAAG,YAAY,GAAG,MAAQ;IACpDW,IAAI,EAAC,QAAQ;IACbP,UAAU,EAAGA,UAAY;IACzBP,SAAS,EAAC;EAAoC,GAE9CZ,aAAA;IACCa,EAAE,EAAGA,EAAI;IACTD,SAAS,EAAGA,SAAW;IACvBe,KAAK,EAAG;MACPtB,KAAK,EAAEU,gBAAgB,GACpB,OAAO,GACPb;IACJ;EAAG,GAEDS,QACE,CACM,CAEG,CACZ,CAAC;AAET;AAEA,SAASiB,8BAA8BA,CACtC9B,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVC,QAAQ,EACRoB,OAAO,EACN;EACD,MAAMC,eAAe,GAAGjD,MAAM,CAAE,KAAM,CAAC;EACvC,MAAMkD,sBAAsB,GAAGlD,MAAM,CAAE,KAAM,CAAC;EAC9C,MAAM;IAAEmD,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D3D,WAAW,CAAEoB,cAAe,CAAC;EAC9Bd,SAAS,CAAE,MAAM;IAChB;IACA;IACA,IAAK6B,QAAQ,IAAIoB,OAAO,IAAI,CAAEC,eAAe,CAACI,OAAO,EAAG;MACvDD,wBAAwB,CAAEpC,KAAM,CAAC;MACjC;MACA;MACAkC,sBAAsB,CAACG,OAAO,GAAG,IAAI;IACtC,CAAC,MAAM;IACN;IACA;IACA;IACAH,sBAAsB,CAACG,OAAO,IAC9B,CAAEL,OAAO,IACTC,eAAe,CAACI,OAAO,EACtB;MACD;MACA;MACAH,sBAAsB,CAACG,OAAO,GAAG,KAAK;MACtCF,uBAAuB,CAAEnC,KAAK,EAAE+B,UAAW,CAAC;IAC7C,CAAC,MAAM;IACN;IACA;IACA;IACAG,sBAAsB,CAACG,OAAO,IAC9B1B,UAAU,IACVA,UAAU,KAAKoB,UAAU,EACxB;MACDG,sBAAsB,CAACG,OAAO,GAAG,KAAK;IACvC;IACA,IAAKL,OAAO,KAAKC,eAAe,CAACI,OAAO,EAAG;MAC1CJ,eAAe,CAACI,OAAO,GAAGL,OAAO;IAClC;EACD,CAAC,EAAE,CACFpB,QAAQ,EACRoB,OAAO,EACPhC,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVyB,wBAAwB,EACxBD,uBAAuB,CACtB,CAAC;AACJ;AAEA,SAASG,iBAAiBA,CAAE;EAC3BzB,QAAQ;EACRC,SAAS;EACTyB,UAAU,GAAG5D,EAAE,CAAE,cAAe,CAAC;EACjCoD,UAAU;EACVS,MAAM;EACNC,eAAe;EACfC,IAAI;EACJC,UAAU,GAAG,IAAI;EACjBC,cAAc;EACd5C,KAAK;EACLG,IAAI;EACJ0C,gBAAgB;EAChBC,KAAK;EACLC,cAAc;EACdC;AACD,CAAC,EAAG;EACH;EACA;EACA;EACA;EACA,MAAM,CAAEC,OAAO,EAAEC,UAAU,CAAE,GAAGjE,QAAQ,CAAE,KAAM,CAAC;EACjD,MAAM;IACLkE,SAAS;IACTvC,QAAQ;IACRwC,QAAQ;IACRzC,UAAU;IACVqB,OAAO;IACPqB,OAAO;IACPC;EACD,CAAC,GAAG5E,SAAS,CACV6E,MAAM,IAAM;IACb,MAAM;MACLC,0BAA0B;MAC1BC,0BAA0B;MAC1BC;IACD,CAAC,GAAGH,MAAM,CAAE1D,cAAe,CAAC;IAC5B,MAAM;MAAE8D;IAAI,CAAC,GAAGJ,MAAM,CAAEnE,gBAAiB,CAAC;IAE1C,MAAMwE,WAAW,GAAGJ,0BAA0B,CAAExD,KAAM,CAAC;IAEvD,OAAO;MACNmD,SAAS,EAAEM,0BAA0B,CAAEzD,KAAM,CAAC;MAC9CY,QAAQ,EAAEgD,WAAW,KAAK7B,UAAU;MACpCqB,QAAQ,EAAEM,YAAY,CAAE1D,KAAK,EAAE+B,UAAW,CAAC;MAC3CpB,UAAU,EAAEiD,WAAW;MACvB5B,OAAO,EAAEuB,MAAM,CAAEpE,aAAc,CAAC,CAAC0E,eAAe,CAAE,UAAW,CAAC;MAC9DR,OAAO,EAAEE,MAAM,CAAEpE,aAAc,CAAC,CAAC0E,eAAe,CAAE,OAAQ,CAAC;MAC3DP,cAAc,EAAEK,GAAG,CAAE,MAAM,EAAE,gBAAiB;IAC/C,CAAC;EACF,CAAC,EACD,CAAE5B,UAAU,EAAE/B,KAAK,CACpB,CAAC;EACD8B,8BAA8B,CAC7B9B,KAAK,EACL+B,UAAU,EACVpB,UAAU,EACVC,QAAQ,EACRoB,OACD,CAAC;EACD,MAAM;IACLG,uBAAuB;IACvBC,wBAAwB;IACxB0B,OAAO;IACPC;EACD,CAAC,GAAGtF,WAAW,CAAEoB,cAAe,CAAC;EAEjCd,SAAS,CAAE,MAAM;IAChB;IACA;IACA,IAAKiE,iBAAiB,IAAIrC,UAAU,KAAKqD,SAAS,IAAI,CAAEhC,OAAO,EAAG;MACjEG,uBAAuB,CAAEnC,KAAK,EAAE+B,UAAW,CAAC;IAC7C,CAAC,MAAM,IAAKpB,UAAU,KAAKqD,SAAS,IAAIhC,OAAO,EAAG;MACjDI,wBAAwB,CAAEpC,KAAK,EAAE+B,UAAW,CAAC;IAC9C;IACAmB,UAAU,CAAE,IAAK,CAAC;EACnB,CAAC,EAAE,CACFvC,UAAU,EACVqC,iBAAiB,EACjBhD,KAAK,EACL+B,UAAU,EACVC,OAAO,EACPG,uBAAuB,EACvBC,wBAAwB,CACvB,CAAC;EAEH,IAAK,CAAEa,OAAO,EAAG;IAChB;EACD;EAEA,OACC/C,aAAA,CAAA+D,QAAA,QACGtB,UAAU,IACXzC,aAAA,CAACN,WAAW;IAACI,KAAK,EAAGA;EAAO,GACzBoD,QAAQ,IACTlD,aAAA,CAACR,uBAAuB;IACvBM,KAAK,EAAGA,KAAO;IACf+B,UAAU,EAAGA,UAAY;IACzBmC,SAAS,EACRtD,QAAQ,KAAM,CAAE0C,cAAc,IAAID,OAAO,CACzC;IACD,iBAAgBzC,QAAU;IAC1B,iBAAgBuC,SAAW;IAC3BgB,KAAK,EAAGrB,KAAO;IACfJ,IAAI,EAAGY,cAAc,GAAG1E,KAAK,GAAG8D,IAAM;IACtC0B,WAAW,EAAG,CAAEd,cAAgB;IAChCe,OAAO,EAAGf,cAAc,GAAG,UAAU,GAAGU,SAAW;IACnDM,IAAI,EAAC;EAAS,CACd,CAEU,CACb,EACCnE,IAAI,IAAIwC,UAAU,IACnBzC,aAAA,CAACT,6BAA6B;IAC7B8E,MAAM,EAAGpE,IAAM;IACfH,KAAK,EAAGA,KAAO;IACf0C,IAAI,EAAGA;EAAM,GAEXI,KAC4B,CAC/B,EACD5C,aAAA,CAACQ,qBAAqB;IACrBC,UAAU,EAAGA,UAAY;IACzBC,QAAQ,EAAGA,QAAU;IACrBE,SAAS,EAAG9C,IAAI,CAAE,8BAA8B,EAAE8C,SAAU,CAAG;IAC/Dd,KAAK,EAAGA,KAAO;IACfe,EAAE,EAAGgB,UAAU,CAACyC,OAAO,CAAE,GAAG,EAAE,GAAI;EAAG,GAErCtE,aAAA,CAACV,uBAAuB;IACvBsB,SAAS,EAAG2B,eAAiB;IAC7BF,UAAU,EAAGA,UAAY;IACzBkC,OAAO,EAAGA,CAAA,KAAMrC,wBAAwB,CAAEpC,KAAM,CAAG;IACnD6C,gBAAgB,EAAGA,gBAAkB;IACrC6B,iBAAiB,EAAG;MACnBP,KAAK,EAAE5B,UAAU;MACjB+B,IAAI,EAAE,OAAO;MACbK,QAAQ,EAAE5B,cAAc;MACxB/C,KAAK;MACL+B;IACD;EAAG,GAEDS,MAAM,IACPtC,aAAA,CAAA+D,QAAA,QACC/D,aAAA;IAAIY,SAAS,EAAC;EAA4C,GACvDgC,KACC,CAAC,EACHH,UAAU,IACXzC,aAAA,CAACjC,MAAM;IACN6C,SAAS,EAAC,8CAA8C;IACxD4B,IAAI,EAAGU,QAAQ,GAAGtE,UAAU,GAAGD,SAAW;IAC1CsF,KAAK,EACJf,QAAQ,GACLzE,EAAE,CAAE,oBAAqB,CAAC,GAC1BA,EAAE,CAAE,gBAAiB,CACxB;IACDiG,OAAO,EAAGA,CAAA,KACT,CAAExB,QAAQ,GAAGW,SAAS,GAAGD,OAAO,EAC/B9D,KAAK,EACL+B,UACD,CACA;IACDmC,SAAS,EAAGd,QAAU;IACtB,iBAAgBA,QAAU;IAC1BkB,IAAI,EAAC;EAAS,CACd,CAED,CAEqB,CAAC,EAC1BpE,aAAA,CAAChC,KAAK;IAAC4C,SAAS,EAAG8B;EAAgB,GAAG/B,QAAiB,CACjC,CACtB,CAAC;AAEL;AAEA,MAAMgE,wBAAwB,GAC7BlF,4BAA4B,CAAE2C,iBAAkB,CAAC;AAElDuC,wBAAwB,CAAC1G,IAAI,GAAG4B,qBAAqB;AAErD,eAAe8E,wBAAwB","ignoreList":[]}

package/build-module/components/complementary-area-header/index.js CHANGED Viewed

@@ -2,7 +2,7 @@ import { createElement, Fragment } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -28,7 +28,7 @@ const ComplementaryAreaHeader = ({
   }, smallScreenTitle && createElement("h2", {
     className: "interface-complementary-area-header__small-title"
   }, smallScreenTitle), toggleButton), createElement("div", {
-    className: classnames('components-panel__header', 'interface-complementary-area-header', className),
+    className: clsx('components-panel__header', 'interface-complementary-area-header', className),
     tabIndex: -1
   }, children, toggleButton));
 };

package/build-module/components/complementary-area-header/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["~~classnames~~","closeSmall","ComplementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","createElement","icon","Fragment","tabIndex"],"sources":["@wordpress/interface/src/components/complementary-area-header/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\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\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ ~~classnames~~(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,~~UAAU~~,MAAM,~~YAAY~~;;~~AAEnC~~;AACA;AACA;AACA,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAElE,MAAMC,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjBC,aAAA,CAACP,uBAAuB;IAACQ,IAAI,EAAGT,UAAY;IAAA,GAAMM;EAAiB,CAAI,CACvE;EACD,OACCE,aAAA,CAAAE,QAAA,QACCF,aAAA;IAAKH,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjBK,aAAA;IAAIH,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACNC,aAAA;IACCH,SAAS,EAAGN,~~UAAU~~,~~CACrB~~,0BAA0B,EAC1B,qCAAqC,EACrCM,SACD,CAAG;IACHM,QAAQ,EAAG,CAAC;EAAG,GAEbP,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAED,eAAeL,uBAAuB","ignoreList":[]}
1	+ {"version":3,"names":["clsx","closeSmall","ComplementaryAreaToggle","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","createElement","icon","Fragment","tabIndex"],"sources":["@wordpress/interface/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\tsmallScreenTitle,\n\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<>\n\t\t\t<div className=\"components-panel__header interface-complementary-area-header__small\">\n\t\t\t\t{ smallScreenTitle && (\n\t\t\t\t\t<h2 className=\"interface-complementary-area-header__small-title\">\n\t\t\t\t\t\t{ smallScreenTitle }\n\t\t\t\t\t</h2>\n\t\t\t\t) }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tclassName={ clsx(\n\t\t\t\t\t'components-panel__header',\n\t\t\t\t\t'interface-complementary-area-header',\n\t\t\t\t\tclassName\n\t\t\t\t) }\n\t\t\t\ttabIndex={ -1 }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t\t{ toggleButton }\n\t\t\t</div>\n\t\t</>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAElE,MAAMC,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,GACjBC,aAAA,CAACP,uBAAuB;IAACQ,IAAI,EAAGT,UAAY;IAAA,GAAMM;EAAiB,CAAI,CACvE;EACD,OACCE,aAAA,CAAAE,QAAA,QACCF,aAAA;IAAKH,SAAS,EAAC;EAAqE,GACjFF,gBAAgB,IACjBK,aAAA;IAAIH,SAAS,EAAC;EAAkD,GAC7DF,gBACC,CACJ,EACCI,YACE,CAAC,EACNC,aAAA;IACCH,SAAS,EAAGN,IAAI,CACf,0BAA0B,EAC1B,qCAAqC,EACrCM,SACD,CAAG;IACHM,QAAQ,EAAG,CAAC;EAAG,GAEbP,QAAQ,EACRG,YACE,CACJ,CAAC;AAEL,CAAC;AAED,eAAeL,uBAAuB","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -96,7 +96,7 @@ function InterfaceSkeleton({
   return createElement("div", {
     ...(enableRegionNavigation ? navigateRegionsProps : {}),
     ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
-    className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
+    className: clsx(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
   }, createElement("div", {
     className: "interface-interface-skeleton__editor"
   }, !!header && createElement(NavigableRegion, {
@@ -139,7 +139,7 @@ function InterfaceSkeleton({
   }, createElement("div", {
     style: {
       position: 'absolute',
-      width: 'fit-content',
+      width: isMobileViewport ? '100vw' : 'fit-content',
       height: '100%',
       right: 0
     }

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

	@@ -1 +1 @@
1	- {"version":3,"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useMergeRefs","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","ANIMATION_DURATION","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","duration","ease","navigateRegionsProps","defaultLabels","body","mergedLabels","createElement","undefined","as","div","initial","whileHover","animate","variants","ariaLabel","exit","open","width","closed","mobileOpen","style","position","height","right"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport classnames from 'classnames';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\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: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\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\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: __( 'Settings' ),\n\t\t/ translators: accessibility text for the publish landmark region. /\n\t\tactions: __( 'Publish' ),\n\t\t/ translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ classnames(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<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={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\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<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\n\t\t\t\t\t\t\t\t\t\twidth: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</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{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}
1	+ {"version":3,"names":["clsx","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useMergeRefs","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","ANIMATION_DURATION","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","distractionFreeInactive","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","duration","ease","navigateRegionsProps","defaultLabels","body","mergedLabels","createElement","undefined","as","div","initial","whileHover","animate","variants","ariaLabel","exit","open","width","closed","mobileOpen","style","position","height","right"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n /\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/\n Internal dependencies\n /\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\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: 0 },\n\thover: {\n\t\topacity: 1,\n\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t},\n\tdistractionFreeInactive: { opacity: 1, transition: { delay: 0 } },\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tnotices,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\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\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\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: __( 'Settings' ),\n\t\t/ translators: accessibility text for the publish landmark region. /\n\t\tactions: __( 'Publish' ),\n\t\t/ translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t{ !! header && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hover'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? 'hidden'\n\t\t\t\t\t\t\t\t: 'distractionFreeInactive'\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={\n\t\t\t\t\t\t\tisDistractionFree\n\t\t\t\t\t\t\t\t? { type: 'tween', delay: 0.8 }\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t>\n\t\t\t\t\t\t{ header }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t) }\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<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={\n\t\t\t\t\t\t\t\t\tisMobileViewport ? 'mobileOpen' : 'open'\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\topen: { width: secondarySidebarSize.width },\n\t\t\t\t\t\t\t\t\tclosed: { width: 0 },\n\t\t\t\t\t\t\t\t\tmobileOpen: { width: '100vw' },\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<div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\tposition: 'absolute',\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: 'fit-content',\n\t\t\t\t\t\t\t\t\t\theight: '100%',\n\t\t\t\t\t\t\t\t\t\tright: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</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{ !! notices && (\n\t\t\t\t\t\t<div className=\"interface-interface-skeleton__notices\">\n\t\t\t\t\t\t\t{ notices }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 export default function NavigableRegion({
   children,
   className,
@@ -11,7 +11,7 @@ export default function NavigableRegion({
   ...props
 }) {
   return createElement(Tag, {
-    className: classnames('interface-navigable-region', className),
+    className: clsx('interface-navigable-region', className),
     "aria-label": ariaLabel,
     role: "region",
     tabIndex: "-1",

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

	@@ -1 +1 @@
1	- {"version":3,"names":["~~classnames~~","NavigableRegion","children","className","ariaLabel","as","Tag","props","createElement","role","tabIndex"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/*\n External dependencies\n */\nimport ~~classnames~~ from '~~classnames~~';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ ~~classnames~~( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,~~UAAU~~,MAAM,~~YAAY~~;~~AAEnC~~,eAAe,SAASC,eAAeA,CAAE;EACxCC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,EAAE,EAAEC,GAAG,GAAG,KAAK;EACf,GAAGC;AACJ,CAAC,EAAG;EACH,OACCC,aAAA,CAACF,GAAG;IACHH,SAAS,EAAGH,~~UAAU~~,CAAE,4BAA4B,EAAEG,SAAU,CAAG;~~IACnE~~,cAAaC,SAAW;IACxBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRH;EAAK,GAERL,QACE,CAAC;AAER","ignoreList":[]}
1	+ {"version":3,"names":["clsx","NavigableRegion","children","className","ariaLabel","as","Tag","props","createElement","role","tabIndex"],"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"sourcesContent":["/*\n External dependencies\n */\nimport clsx from 'clsx';\n\nexport default function NavigableRegion( {\n\tchildren,\n\tclassName,\n\tariaLabel,\n\tas: Tag = 'div',\n\t...props\n} ) {\n\treturn (\n\t\t<Tag\n\t\t\tclassName={ clsx( 'interface-navigable-region', className ) }\n\t\t\taria-label={ ariaLabel }\n\t\t\trole=\"region\"\n\t\t\ttabIndex=\"-1\"\n\t\t\t{ ...props }\n\t\t>\n\t\t\t{ children }\n\t\t</Tag>\n\t);\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;AAEvB,eAAe,SAASC,eAAeA,CAAE;EACxCC,QAAQ;EACRC,SAAS;EACTC,SAAS;EACTC,EAAE,EAAEC,GAAG,GAAG,KAAK;EACf,GAAGC;AACJ,CAAC,EAAG;EACH,OACCC,aAAA,CAACF,GAAG;IACHH,SAAS,EAAGH,IAAI,CAAE,4BAA4B,EAAEG,SAAU,CAAG;IAC7D,cAAaC,SAAW;IACxBK,IAAI,EAAC,QAAQ;IACbC,QAAQ,EAAC,IAAI;IAAA,GACRH;EAAK,GAERL,QACE,CAAC;AAER","ignoreList":[]}

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

@@ -2,7 +2,7 @@ import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -26,7 +26,7 @@ function PinnedItemsSlot({
     name: `PinnedItems/${scope}`,
     ...props
   }, fills => fills?.length > 0 && createElement("div", {
-    className: classnames(className, 'interface-pinned-items')
+    className: clsx(className, 'interface-pinned-items')
   }, fills));
 }
 PinnedItems.Slot = PinnedItemsSlot;

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

	@@ -1 +1 @@
1	- {"version":3,"names":["~~classnames~~","Slot","Fill","PinnedItems","scope","props","createElement","name","PinnedItemsSlot","className","fills","length"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport ~~classnames~~ from '~~classnames~~';\n\n/\n WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ ~~classnames~~(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,~~UAAU~~,MAAM,~~YAAY~~;;~~AAEnC~~;AACA;AACA;AACA,SAASC,IAAI,EAAEC,IAAI,QAAQ,uBAAuB;AAElD,SAASC,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,OAAOC,aAAA,CAACJ,IAAI;IAACK,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASG,eAAeA,CAAE;EAAEJ,KAAK;EAAEK,SAAS;EAAE,GAAGJ;AAAM,CAAC,EAAG;EAC1D,OACCC,aAAA,CAACL,IAAI;IAACM,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,GAC7CK,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,IAChBL,aAAA;IACCG,SAAS,EAAGT,~~UAAU~~,~~CACrBS~~,SAAS,EACT,wBACD;EAAG,GAEDC,KACE,CAGF,CAAC;AAET;AAEAP,WAAW,CAACF,IAAI,GAAGO,eAAe;AAElC,eAAeL,WAAW","ignoreList":[]}
1	+ {"version":3,"names":["clsx","Slot","Fill","PinnedItems","scope","props","createElement","name","PinnedItemsSlot","className","fills","length"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/*\n External dependencies\n /\nimport clsx from 'clsx';\n\n/\n WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,EAAEC,IAAI,QAAQ,uBAAuB;AAElD,SAASC,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,OAAOC,aAAA,CAACJ,IAAI;IAACK,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASG,eAAeA,CAAE;EAAEJ,KAAK;EAAEK,SAAS;EAAE,GAAGJ;AAAM,CAAC,EAAG;EAC1D,OACCC,aAAA,CAACL,IAAI;IAACM,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,GAC7CK,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,IAChBL,aAAA;IACCG,SAAS,EAAGT,IAAI,CACfS,SAAS,EACT,wBACD;EAAG,GAEDC,KACE,CAGF,CAAC;AAET;AAEAP,WAAW,CAACF,IAAI,GAAGO,eAAe;AAElC,eAAeL,WAAW","ignoreList":[]}

package/build-style/style-rtl.css CHANGED Viewed

@@ -123,7 +123,8 @@
 .interface-complementary-area-header {
   background: #fff;
-  padding-left: 4px;
+  padding-left: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,15 +142,11 @@
   }
 }
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -171,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -184,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -215,6 +213,10 @@
   right: auto;
 }
+.interface-complementary-area__fill {
+  height: 100%;
+}
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -235,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -307,6 +309,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +358,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__sidebar {
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {

package/build-style/style.css CHANGED Viewed

@@ -123,7 +123,8 @@
 .interface-complementary-area-header {
   background: #fff;
-  padding-right: 4px;
+  padding-right: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,15 +142,11 @@
   }
 }
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -171,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -184,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -215,6 +213,10 @@
   left: auto;
 }
+.interface-complementary-area__fill {
+  height: 100%;
+}
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -235,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -307,6 +309,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +358,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__sidebar {
-  overflow: auto;
+  overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "5.33.0",
+	"version": "5.35.0",
 	"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -32,19 +32,19 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.56.0",
-		"@wordpress/components": "^27.4.0",
-		"@wordpress/compose": "^6.33.0",
-		"@wordpress/data": "^9.26.0",
-		"@wordpress/deprecated": "^3.56.0",
-		"@wordpress/element": "^5.33.0",
-		"@wordpress/i18n": "^4.56.0",
-		"@wordpress/icons": "^9.47.0",
-		"@wordpress/plugins": "^6.24.0",
-		"@wordpress/preferences": "^3.33.0",
-		"@wordpress/private-apis": "^0.38.0",
-		"@wordpress/viewport": "^5.33.0",
-		"classnames": "^2.3.1"
+		"@wordpress/a11y": "^3.58.0",
+		"@wordpress/components": "^27.6.0",
+		"@wordpress/compose": "^6.35.0",
+		"@wordpress/data": "^9.28.0",
+		"@wordpress/deprecated": "^3.58.0",
+		"@wordpress/element": "^5.35.0",
+		"@wordpress/i18n": "^4.58.0",
+		"@wordpress/icons": "^9.49.0",
+		"@wordpress/plugins": "^6.26.0",
+		"@wordpress/preferences": "^3.35.0",
+		"@wordpress/private-apis": "^0.40.0",
+		"@wordpress/viewport": "^5.35.0",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -53,5 +53,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "42f38f287506a6b3ed8ccba839b18ad066821044"
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -92,6 +92,7 @@ function ComplementaryAreaFill( {
 						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
 						exit="closed"
 						transition={ transition }
+						className="interface-complementary-area__fill"
 					>
 						<div
 							id={ id }
@@ -290,10 +291,7 @@ function ComplementaryArea( {
 			<ComplementaryAreaFill
 				activeArea={ activeArea }
 				isActive={ isActive }
-				className={ classnames(
-					'interface-complementary-area',
-					className
-				) }
+				className={ clsx( 'interface-complementary-area', className ) }
 				scope={ scope }
 				id={ identifier.replace( '/', ':' ) }
 			>
@@ -304,6 +302,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
+						size: 'small',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,
@@ -331,6 +330,7 @@ function ComplementaryArea( {
 									}
 									isPressed={ isPinned }
 									aria-expanded={ isPinned }
+									size="compact"
 								/>
 							) }
 						</>

package/src/components/complementary-area/style.scss CHANGED Viewed

@@ -1,6 +1,8 @@
 .interface-complementary-area {
 	background: $white;
 	color: $gray-900;
+	height: 100%;
+	overflow: auto;
 	@include break-small() {
 		-webkit-overflow-scrolling: touch;
@@ -22,7 +24,7 @@
 		top: 0;
 		z-index: z-index(".interface-complementary-area .components-panel__header");
-		&.edit-post-sidebar__panel-tabs {
+		&.editor-sidebar__panel-tabs {
 			top: $panel-header-height;
 			@include break-medium() {
@@ -37,6 +39,7 @@
 	h2 {
 		font-size: $default-font-size;
+		font-weight: 500;
 		color: $gray-900;
 		margin-bottom: 1.5em;
 	}
@@ -72,3 +75,7 @@
 		left: auto;
 	}
 }
+.interface-complementary-area__fill {
+	height: 100%;
+}

package/src/components/complementary-area-header/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -33,7 +33,7 @@ const ComplementaryAreaHeader = ( {
 				{ toggleButton }
 			</div>
 			<div
-				className={ classnames(
+				className={ clsx(
 					'components-panel__header',
 					'interface-complementary-area-header',
 					className

package/src/components/complementary-area-header/style.scss CHANGED Viewed

@@ -17,7 +17,8 @@
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-05;
+	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
+	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
 	.interface-complementary-area-header__title {
 		margin: 0;
@@ -36,11 +37,3 @@
 		}
 	}
 }
-// This overrides the negative margins between two consecutives panels.
-// since the first panel is hidden.
-.components-panel__header + .interface-complementary-area-header {
-	@include break-medium() {
-		margin-top: 0;
-	}
-}

package/src/components/interface-skeleton/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -106,7 +106,7 @@ function InterfaceSkeleton(
 				ref,
 				enableRegionNavigation ? navigateRegionsProps.ref : undefined,
 			] ) }
-			className={ classnames(
+			className={ clsx(
 				className,
 				'interface-interface-skeleton',
 				navigateRegionsProps.className,
@@ -171,7 +171,9 @@ function InterfaceSkeleton(
 								<div
 									style={ {
 										position: 'absolute',
-										width: 'fit-content',
+										width: isMobileViewport
+											? '100vw'
+											: 'fit-content',
 										height: '100%',
 										right: 0,
 									} }

package/src/components/interface-skeleton/style.scss CHANGED Viewed

@@ -5,8 +5,10 @@ html.interface-interface-skeleton__html-container {
 	width: 100%;
 	@include break-medium() {
-		position: initial;
-		width: initial;
+		&:not(:has(.is-zoom-out)) {
+			position: initial;
+			width: initial;
+		}
 	}
 }
@@ -43,6 +45,7 @@ html.interface-interface-skeleton__html-container {
 @include editor-left(".interface-interface-skeleton");
 .interface-interface-skeleton__body {
+	position: relative;
 	flex-grow: 1;
 	display: flex;
@@ -114,7 +117,7 @@ html.interface-interface-skeleton__html-container {
 		// Set this z-index only when the sidebar is opened. When it's closed, the
 		// button to open the sidebar that is shown when navigating regions needs to
-		// be above the footer. See `edit-post-layout__toggle-sidebar-panel`.
+		// be above the footer. See `editor-layout__toggle-sidebar-panel`.
 		.is-sidebar-opened & {
 			z-index: z-index(".interface-interface-skeleton__sidebar {greater than small}");
 		}
@@ -122,7 +125,7 @@ html.interface-interface-skeleton__html-container {
 }
 .interface-interface-skeleton__sidebar {
-	overflow: auto;
+	overflow: hidden;
 	@include break-medium() {
 		border-left: $border-width solid $gray-200;

package/src/components/navigable-region/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 export default function NavigableRegion( {
 	children,
@@ -12,7 +12,7 @@ export default function NavigableRegion( {
 } ) {
 	return (
 		<Tag
-			className={ classnames( 'interface-navigable-region', className ) }
+			className={ clsx( 'interface-navigable-region', className ) }
 			aria-label={ ariaLabel }
 			role="region"
 			tabIndex="-1"

package/src/components/pinned-items/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 /**
  * WordPress dependencies
@@ -18,7 +18,7 @@ function PinnedItemsSlot( { scope, className, ...props } ) {
 			{ ( fills ) =>
 				fills?.length > 0 && (
 					<div
-						className={ classnames(
+						className={ clsx(
 							className,
 							'interface-pinned-items'
 						) }