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

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

package/CHANGELOG.md CHANGED Viewed

@@ -2,6 +2,8 @@
 ## Unreleased
+## 5.34.0 (2024-05-02)
 ## 5.33.0 (2024-04-19)
 ## 5.32.0 (2024-04-03)

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

@@ -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,

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":["_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\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={ 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":[]}

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

@@ -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":["_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: 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/complementary-area/index.js CHANGED Viewed

@@ -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,

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":"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","ignoreList":[]}
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\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={ 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":[]}

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

@@ -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":["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: 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-style/style-rtl.css CHANGED Viewed

@@ -150,6 +150,8 @@
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -215,6 +217,10 @@
   right: auto;
 }
+.interface-complementary-area__fill {
+  height: 100%;
+}
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -307,6 +313,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +362,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

@@ -150,6 +150,8 @@
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
+  height: 100%;
+  overflow: auto;
 }
 @media (min-width: 600px) {
   .interface-complementary-area {
@@ -215,6 +217,10 @@
   left: auto;
 }
+.interface-complementary-area__fill {
+  height: 100%;
+}
 @media (min-width: 782px) {
   body.js.is-fullscreen-mode {
     margin-top: -32px;
@@ -307,6 +313,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 .interface-interface-skeleton__body {
+  position: relative;
   flex-grow: 1;
   display: flex;
   overflow: auto;
@@ -355,7 +362,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.34.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,18 +32,18 @@
 	],
 	"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",
+		"@wordpress/a11y": "^3.57.0",
+		"@wordpress/components": "^27.5.0",
+		"@wordpress/compose": "^6.34.0",
+		"@wordpress/data": "^9.27.0",
+		"@wordpress/deprecated": "^3.57.0",
+		"@wordpress/element": "^5.34.0",
+		"@wordpress/i18n": "^4.57.0",
+		"@wordpress/icons": "^9.48.0",
+		"@wordpress/plugins": "^6.25.0",
+		"@wordpress/preferences": "^3.34.0",
+		"@wordpress/private-apis": "^0.39.0",
+		"@wordpress/viewport": "^5.34.0",
 		"classnames": "^2.3.1"
 	},
 	"peerDependencies": {
@@ -53,5 +53,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "280403b4c1cf6cc2c55a6c4d56f9ef91145e4191"
+	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
 }

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

@@ -92,6 +92,7 @@ function ComplementaryAreaFill( {
 						animate={ isMobileViewport ? 'mobileOpen' : 'open' }
 						exit="closed"
 						transition={ transition }
+						className="interface-complementary-area__fill"
 					>
 						<div
 							id={ id }

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;
@@ -72,3 +74,7 @@
 		left: auto;
 	}
 }
+.interface-complementary-area__fill {
+	height: 100%;
+}

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

@@ -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

@@ -43,6 +43,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 +115,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 +123,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;