@wordpress/interface 7.0.0 → 8.1.0

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","closeSmall","ComplementaryAreaToggle","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","ComplementaryAreaHeader","smallScreenTitle","children","className","toggleButtonProps","toggleButton","icon","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;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA,EAAAC,QAAA,IAAAC,SAAA;AAEnE,MAAMC,uBAAuB,GAAGA,CAAE;EACjCC,gBAAgB;EAChBC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,gBACjBV,IAAA,CAACF,uBAAuB;IAACa,IAAI,EAAGd,UAAY;IAAA,GAAMY;EAAiB,CAAI,CACvE;EACD,oBACCP,KAAA,CAAAE,SAAA;IAAAG,QAAA,gBACCL,KAAA;MAAKM,SAAS,EAAC,qEAAqE;MAAAD,QAAA,GACjFD,gBAAgB,iBACjBN,IAAA;QAAIQ,SAAS,EAAC,kDAAkD;QAAAD,QAAA,EAC7DD;MAAgB,CACf,CACJ,EACCI,YAAY;IAAA,CACV,CAAC,eACNR,KAAA;MACCM,SAAS,EAAGZ,IAAI,CACf,0BAA0B,EAC1B,qCAAqC,EACrCY,SACD,CAAG;MACHI,QAAQ,EAAG,CAAC,CAAG;MAAAL,QAAA,GAEbA,QAAQ,EACRG,YAAY;IAAA,CACV,CAAC;EAAA,CACL,CAAC;AAEL,CAAC;AAED,eAAeL,uBAAuB","ignoreList":[]}
+{"version":3,"names":["clsx","closeSmall","ComplementaryAreaToggle","jsx","_jsx","jsxs","_jsxs","ComplementaryAreaHeader","children","className","toggleButtonProps","toggleButton","icon","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\tchildren,\n\tclassName,\n\ttoggleButtonProps,\n} ) => {\n\tconst toggleButton = (\n\t\t<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />\n\t);\n\treturn (\n\t\t<div\n\t\t\tclassName={ clsx(\n\t\t\t\t'components-panel__header',\n\t\t\t\t'interface-complementary-area-header',\n\t\t\t\tclassName\n\t\t\t) }\n\t\t\ttabIndex={ -1 }\n\t\t>\n\t\t\t{ children }\n\t\t\t{ toggleButton }\n\t\t</div>\n\t);\n};\n\nexport default ComplementaryAreaHeader;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,QAAQ,kBAAkB;;AAE7C;AACA;AACA;AACA,OAAOC,uBAAuB,MAAM,8BAA8B;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAEnE,MAAMC,uBAAuB,GAAGA,CAAE;EACjCC,QAAQ;EACRC,SAAS;EACTC;AACD,CAAC,KAAM;EACN,MAAMC,YAAY,gBACjBP,IAAA,CAACF,uBAAuB;IAACU,IAAI,EAAGX,UAAY;IAAA,GAAMS;EAAiB,CAAI,CACvE;EACD,oBACCJ,KAAA;IACCG,SAAS,EAAGT,IAAI,CACf,0BAA0B,EAC1B,qCAAqC,EACrCS,SACD,CAAG;IACHI,QAAQ,EAAG,CAAC,CAAG;IAAAL,QAAA,GAEbA,QAAQ,EACRG,YAAY;EAAA,CACV,CAAC;AAER,CAAC;AAED,eAAeJ,uBAAuB","ignoreList":[]}

package/build-module/components/complementary-area-toggle/index.js

@@ -3,12 +3,12 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
 /**
  * Whether the role supports checked state.
@@ -21,17 +21,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 function roleSupportsCheckedState(role) {
   return ['checkbox', 'option', 'radio', 'switch', 'menuitemcheckbox', 'menuitemradio', 'treeitem'].includes(role);
 }
-function ComplementaryAreaToggle({
+export default function ComplementaryAreaToggle({
   as = Button,
   scope,
-  identifier,
-  icon,
+  identifier: identifierProp,
+  icon: iconProp,
   selectedIcon,
   name,
   shortcut,
   ...props
 }) {
   const ComponentToUse = as;
+  const context = usePluginContext();
+  const icon = iconProp || context.icon;
+  const identifier = identifierProp || `${context.name}/${name}`;
   const isSelected = useSelect(select => select(interfaceStore).getActiveComplementaryArea(scope) === identifier, [identifier, scope]);
   const {
     enableComplementaryArea,
@@ -54,5 +57,4 @@ function ComplementaryAreaToggle({
     ...props
   });
 }
-export default complementaryAreaContext(ComplementaryAreaToggle);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["Button","useDispatch","useSelect","store","interfaceStore","complementaryAreaContext","jsx","_jsx","roleSupportsCheckedState","role","includes","ComplementaryAreaToggle","as","scope","identifier","icon","selectedIcon","name","shortcut","props","ComponentToUse","isSelected","select","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","replace","undefined","onClick"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\nimport complementaryAreaContext from '../complementary-area-context';\n\n/**\n * Whether the role supports checked state.\n *\n * @param {import('react').AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\n * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n */\nfunction roleSupportsCheckedState( role ) {\n\treturn [\n\t\t'checkbox',\n\t\t'option',\n\t\t'radio',\n\t\t'switch',\n\t\t'menuitemcheckbox',\n\t\t'menuitemradio',\n\t\t'treeitem',\n\t].includes( role );\n}\n\nfunction ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier,\n\ticon,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\troleSupportsCheckedState( props.role ) ? isSelected : undefined\n\t\t\t}\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n\nexport default complementaryAreaContext( ComplementaryAreaToggle );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;;AAExD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,cAAc,QAAQ,aAAa;AACrD,OAAOC,wBAAwB,MAAM,+BAA+B;;AAEpE;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAOA,SAASC,wBAAwBA,CAAEC,IAAI,EAAG;EACzC,OAAO,CACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV,CAACC,QAAQ,CAAED,IAAK,CAAC;AACnB;AAEA,SAASE,uBAAuBA,CAAE;EACjCC,EAAE,GAAGZ,MAAM;EACXa,KAAK;EACLC,UAAU;EACVC,IAAI;EACJC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGR,EAAE;EACzB,MAAMS,UAAU,GAAGnB,SAAS,CACzBoB,MAAM,IACPA,MAAM,CAAElB,cAAe,CAAC,CAACmB,0BAA0B,CAAEV,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEW,uBAAuB;IAAEC;EAAyB,CAAC,GAC1DxB,WAAW,CAAEG,cAAe,CAAC;EAE9B,oBACCG,IAAA,CAACa,cAAc;IACdL,IAAI,EAAGC,YAAY,IAAIK,UAAU,GAAGL,YAAY,GAAGD,IAAM;IACzD,iBAAgBD,UAAU,CAACY,OAAO,CAAE,GAAG,EAAE,GAAI;IAC7C;IAAA;IACA,gBACClB,wBAAwB,CAAEW,KAAK,CAACV,IAAK,CAAC,GAAGY,UAAU,GAAGM,SACtD;IACDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKP,UAAU,EAAG;QACjBI,wBAAwB,CAAEZ,KAAM,CAAC;MAClC,CAAC,MAAM;QACNW,uBAAuB,CAAEX,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHI,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ;AAEA,eAAed,wBAAwB,CAAEM,uBAAwB,CAAC","ignoreList":[]}
+{"version":3,"names":["Button","useDispatch","useSelect","usePluginContext","store","interfaceStore","jsx","_jsx","roleSupportsCheckedState","role","includes","ComplementaryAreaToggle","as","scope","identifier","identifierProp","icon","iconProp","selectedIcon","name","shortcut","props","ComponentToUse","context","isSelected","select","getActiveComplementaryArea","enableComplementaryArea","disableComplementaryArea","replace","undefined","onClick"],"sources":["@wordpress/interface/src/components/complementary-area-toggle/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Button } from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { usePluginContext } from '@wordpress/plugins';\n\n/**\n * Internal dependencies\n */\nimport { store as interfaceStore } from '../../store';\n\n/**\n * Whether the role supports checked state.\n *\n * @param {import('react').AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\n * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n */\nfunction roleSupportsCheckedState( role ) {\n\treturn [\n\t\t'checkbox',\n\t\t'option',\n\t\t'radio',\n\t\t'switch',\n\t\t'menuitemcheckbox',\n\t\t'menuitemradio',\n\t\t'treeitem',\n\t].includes( role );\n}\n\nexport default function ComplementaryAreaToggle( {\n\tas = Button,\n\tscope,\n\tidentifier: identifierProp,\n\ticon: iconProp,\n\tselectedIcon,\n\tname,\n\tshortcut,\n\t...props\n} ) {\n\tconst ComponentToUse = as;\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\tconst isSelected = useSelect(\n\t\t( select ) =>\n\t\t\tselect( interfaceStore ).getActiveComplementaryArea( scope ) ===\n\t\t\tidentifier,\n\t\t[ identifier, scope ]\n\t);\n\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\n\treturn (\n\t\t<ComponentToUse\n\t\t\ticon={ selectedIcon && isSelected ? selectedIcon : icon }\n\t\t\taria-controls={ identifier.replace( '/', ':' ) }\n\t\t\t// Make sure aria-checked matches spec https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n\t\t\taria-checked={\n\t\t\t\troleSupportsCheckedState( props.role ) ? isSelected : undefined\n\t\t\t}\n\t\t\tonClick={ () => {\n\t\t\t\tif ( isSelected ) {\n\t\t\t\t\tdisableComplementaryArea( scope );\n\t\t\t\t} else {\n\t\t\t\t\tenableComplementaryArea( scope, identifier );\n\t\t\t\t}\n\t\t\t} }\n\t\t\tshortcut={ shortcut }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,WAAW,EAAEC,SAAS,QAAQ,iBAAiB;AACxD,SAASC,gBAAgB,QAAQ,oBAAoB;;AAErD;AACA;AACA;AACA,SAASC,KAAK,IAAIC,cAAc,QAAQ,aAAa;;AAErD;AACA;AACA;AACA;AACA;AACA;AACA;AANA,SAAAC,GAAA,IAAAC,IAAA;AAOA,SAASC,wBAAwBA,CAAEC,IAAI,EAAG;EACzC,OAAO,CACN,UAAU,EACV,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,kBAAkB,EAClB,eAAe,EACf,UAAU,CACV,CAACC,QAAQ,CAAED,IAAK,CAAC;AACnB;AAEA,eAAe,SAASE,uBAAuBA,CAAE;EAChDC,EAAE,GAAGZ,MAAM;EACXa,KAAK;EACLC,UAAU,EAAEC,cAAc;EAC1BC,IAAI,EAAEC,QAAQ;EACdC,YAAY;EACZC,IAAI;EACJC,QAAQ;EACR,GAAGC;AACJ,CAAC,EAAG;EACH,MAAMC,cAAc,GAAGV,EAAE;EACzB,MAAMW,OAAO,GAAGpB,gBAAgB,CAAC,CAAC;EAClC,MAAMa,IAAI,GAAGC,QAAQ,IAAIM,OAAO,CAACP,IAAI;EACrC,MAAMF,UAAU,GAAGC,cAAc,IAAI,GAAIQ,OAAO,CAACJ,IAAI,IAAMA,IAAI,EAAG;EAClE,MAAMK,UAAU,GAAGtB,SAAS,CACzBuB,MAAM,IACPA,MAAM,CAAEpB,cAAe,CAAC,CAACqB,0BAA0B,CAAEb,KAAM,CAAC,KAC5DC,UAAU,EACX,CAAEA,UAAU,EAAED,KAAK,CACpB,CAAC;EAED,MAAM;IAAEc,uBAAuB;IAAEC;EAAyB,CAAC,GAC1D3B,WAAW,CAAEI,cAAe,CAAC;EAE9B,oBACCE,IAAA,CAACe,cAAc;IACdN,IAAI,EAAGE,YAAY,IAAIM,UAAU,GAAGN,YAAY,GAAGF,IAAM;IACzD,iBAAgBF,UAAU,CAACe,OAAO,CAAE,GAAG,EAAE,GAAI;IAC7C;IAAA;IACA,gBACCrB,wBAAwB,CAAEa,KAAK,CAACZ,IAAK,CAAC,GAAGe,UAAU,GAAGM,SACtD;IACDC,OAAO,EAAGA,CAAA,KAAM;MACf,IAAKP,UAAU,EAAG;QACjBI,wBAAwB,CAAEf,KAAM,CAAC;MAClC,CAAC,MAAM;QACNc,uBAAuB,CAAEd,KAAK,EAAEC,UAAW,CAAC;MAC7C;IACD,CAAG;IACHM,QAAQ,EAAGA,QAAU;IAAA,GAChBC;EAAK,CACV,CAAC;AAEJ","ignoreList":[]}

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

@@ -95,7 +95,7 @@ function InterfaceSkeleton({
     /* translators: accessibility text for the secondary sidebar landmark region. */
     secondarySidebar: __('Block Library'),
     /* translators: accessibility text for the settings landmark region. */
-    sidebar: __('Settings'),
+    sidebar: _x('Settings', 'settings landmark area'),
     /* translators: accessibility text for the publish landmark region. */
     actions: __('Publish'),
     /* translators: accessibility text for the footer landmark region. */

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

@@ -1 +1 @@
-{"version":3,"names":["clsx","forwardRef","useEffect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","jsx","_jsx","jsxs","_jsxs","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","defaultLabels","body","mergedLabels","children","initial","as","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","style","position","height","left","x"],"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__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\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;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ 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\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\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\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} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\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\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,UAAU,EAAEC,SAAS,QAAQ,oBAAoB;AAC1D,SACCC,gBAAgB,IAAIC,MAAM,EAC1BC,yBAAyB,IAAIC,eAAe,QACtC,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC,SACCC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,QACX,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,eAAe,MAAM,qBAAqB;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAElD,MAAMC,kBAAkB,GAAG,IAAI;AAC/B,MAAMC,gBAAgB,GAAG;EACxBC,IAAI,EAAE,OAAO;EACbC,QAAQ,EAAEH,kBAAkB;EAC5BI,IAAI,EAAE,CAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;AACvB,CAAC;AAED,SAASC,YAAYA,CAAEC,SAAS,EAAG;EAClCrB,SAAS,CAAE,MAAM;IAChB,MAAMsB,OAAO,GACZC,QAAQ,IAAIA,QAAQ,CAACC,aAAa,CAAE,aAAcH,SAAS,GAAK,CAAC;IAClE,IAAK,CAAEC,OAAO,EAAG;MAChB;IACD;IACAA,OAAO,CAACG,SAAS,CAACC,MAAM,CAAEL,SAAU,CAAC;IACrC,OAAO,MAAM;MACZC,OAAO,CAACG,SAAS,CAACC,MAAM,CAAEL,SAAU,CAAC;IACtC,CAAC;EACF,CAAC,EAAE,CAAEA,SAAS,CAAG,CAAC;AACnB;AAEA,MAAMM,cAAc,GAAG;EACtBC,MAAM,EAAE;IAAEC,OAAO,EAAE,CAAC;IAAEC,SAAS,EAAE,CAAC;EAAG,CAAC;EACtCC,OAAO,EAAE;IAAEF,OAAO,EAAE,CAAC;IAAEC,SAAS,EAAE;EAAE,CAAC;EACrCE,oBAAoB,EAAE;IACrBH,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,CAAC;IACZG,UAAU,EAAE;MACX,GAAGjB,gBAAgB;MACnBkB,KAAK,EAAE,GAAG;MACVC,aAAa,EAAE;IAChB;EACD,CAAC;EACDC,qBAAqB,EAAE;IACtBP,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,CAAC;EACb,CAAC;EACDO,uBAAuB,EAAE;IACxBR,OAAO,EAAE,CAAC;IACVC,SAAS,EAAE,CAAC;IACZG,UAAU,EAAE;MACX,GAAGjB,gBAAgB;MACnBkB,KAAK,EAAE,GAAG;MACVC,aAAa,EAAE;IAChB;EACD;AACD,CAAC;AAED,SAASG,iBAAiBA,CACzB;EACCC,iBAAiB;EACjBC,MAAM;EACNC,MAAM;EACNC,aAAa;EACbC,OAAO;EACPC,gBAAgB;EAChBC,OAAO;EACPC,OAAO;EACPC,MAAM;EACN1B;AACD,CAAC,EACD2B,GAAG,EACF;EACD,MAAM,CAAEC,8BAA8B,EAAEC,oBAAoB,CAAE,GAC7DzC,iBAAiB,CAAC,CAAC;EACpB,MAAM0C,gBAAgB,GAAG3C,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D,MAAM4C,aAAa,GAAG7C,gBAAgB,CAAC,CAAC;EACxC,MAAM8C,iBAAiB,GAAG;IACzBpC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAEkC,aAAa,GAAG,CAAC,GAAGrC,kBAAkB;IAChDI,IAAI,EAAE,CAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;EACvB,CAAC;EACDC,YAAY,CAAE,8CAA+C,CAAC;EAE9D,MAAMkC,aAAa,GAAG;IACrB;IACAb,MAAM,EAAEnC,EAAE,CAAE,QAAQ,EAAE,sBAAuB,CAAC;IAC9C;IACAiD,IAAI,EAAElD,EAAE,CAAE,SAAU,CAAC;IACrB;IACAuC,gBAAgB,EAAEvC,EAAE,CAAE,eAAgB,CAAC;IACvC;IACAsC,OAAO,EAAEtC,EAAE,CAAE,UAAW,CAAC;IACzB;IACAyC,OAAO,EAAEzC,EAAE,CAAE,SAAU,CAAC;IACxB;IACAmC,MAAM,EAAEnC,EAAE,CAAE,QAAS;EACtB,CAAC;EAED,MAAMmD,YAAY,GAAG;IAAE,GAAGF,aAAa;IAAE,GAAGP;EAAO,CAAC;EAEpD,oBACCjC,KAAA;IACCkC,GAAG,EAAGA,GAAK;IACX3B,SAAS,EAAGvB,IAAI,CACfuB,SAAS,EACT,8BAA8B,EAC9B,CAAC,CAAEmB,MAAM,IAAI,YACd,CAAG;IAAAiB,QAAA,gBAEH3C,KAAA;MAAKO,SAAS,EAAC,sCAAsC;MAAAoC,QAAA,gBACpD7C,IAAA,CAACR,eAAe;QAACsD,OAAO,EAAG,KAAO;QAAAD,QAAA,EAC/B,CAAC,CAAEhB,MAAM,iBACV7B,IAAA,CAACF,eAAe;UACfiD,EAAE,EAAGzD,MAAM,CAAC0D,GAAK;UACjBvC,SAAS,EAAC,sCAAsC;UAChD,cAAamC,YAAY,CAACf,MAAQ;UAClCiB,OAAO,EACNnB,iBAAiB,IAAI,CAAEY,gBAAgB,GACpC,uBAAuB,GACvB,QACH;UACDU,UAAU,EACTtB,iBAAiB,IAAI,CAAEY,gBAAgB,GACpC,sBAAsB,GACtB,SACH;UACDW,OAAO,EACNvB,iBAAiB,IAAI,CAAEY,gBAAgB,GACpC,yBAAyB,GACzB,SACH;UACDY,IAAI,EACHxB,iBAAiB,IAAI,CAAEY,gBAAgB,GACpC,uBAAuB,GACvB,QACH;UACDa,QAAQ,EAAGrC,cAAgB;UAC3BM,UAAU,EAAGoB,iBAAmB;UAAAI,QAAA,EAE9BhB;QAAM,CACQ;MACjB,CACe,CAAC,EAChBF,iBAAiB,iBAClB3B,IAAA;QAAKS,SAAS,EAAC,sCAAsC;QAAAoC,QAAA,EAClDf;MAAa,CACX,CACL,eACD5B,KAAA;QAAKO,SAAS,EAAC,oCAAoC;QAAAoC,QAAA,gBAClD7C,IAAA,CAACR,eAAe;UAACsD,OAAO,EAAG,KAAO;UAAAD,QAAA,EAC/B,CAAC,CAAEb,gBAAgB,iBACpBhC,IAAA,CAACF,eAAe;YACfW,SAAS,EAAC,iDAAiD;YAC3D4C,SAAS,EAAGT,YAAY,CAACZ,gBAAkB;YAC3Ce,EAAE,EAAGzD,MAAM,CAAC0D,GAAK;YACjBF,OAAO,EAAC,QAAQ;YAChBI,OAAO,EAAC,MAAM;YACdC,IAAI,EAAC,QAAQ;YACbC,QAAQ,EAAG;cACVE,IAAI,EAAE;gBAAEC,KAAK,EAAEjB,oBAAoB,CAACiB;cAAM,CAAC;cAC3CC,MAAM,EAAE;gBAAED,KAAK,EAAE;cAAE;YACpB,CAAG;YACHlC,UAAU,EAAGoB,iBAAmB;YAAAI,QAAA,eAEhC3C,KAAA,CAACZ,MAAM,CAAC0D,GAAG;cACVS,KAAK,EAAG;gBACPC,QAAQ,EAAE,UAAU;gBACpBH,KAAK,EAAEhB,gBAAgB,GACpB,OAAO,GACP,aAAa;gBAChBoB,MAAM,EAAE,MAAM;gBACdC,IAAI,EAAE;cACP,CAAG;cACHR,QAAQ,EAAG;gBACVE,IAAI,EAAE;kBAAEO,CAAC,EAAE;gBAAE,CAAC;gBACdL,MAAM,EAAE;kBAAEK,CAAC,EAAE;gBAAQ;cACtB,CAAG;cACHxC,UAAU,EAAGoB,iBAAmB;cAAAI,QAAA,GAE9BR,8BAA8B,EAC9BL,gBAAgB;YAAA,CACP;UAAC,CACG;QACjB,CACe,CAAC,eAClBhC,IAAA,CAACF,eAAe;UACfW,SAAS,EAAC,uCAAuC;UACjD4C,SAAS,EAAGT,YAAY,CAACD,IAAM;UAAAE,QAAA,EAE7BZ;QAAO,CACO,CAAC,EAChB,CAAC,CAAEF,OAAO,iBACX/B,IAAA,CAACF,eAAe;UACfW,SAAS,EAAC,uCAAuC;UACjD4C,SAAS,EAAGT,YAAY,CAACb,OAAS;UAAAc,QAAA,EAEhCd;QAAO,CACO,CACjB,EACC,CAAC,CAAEG,OAAO,iBACXlC,IAAA,CAACF,eAAe;UACfW,SAAS,EAAC,uCAAuC;UACjD4C,SAAS,EAAGT,YAAY,CAACV,OAAS;UAAAW,QAAA,EAEhCX;QAAO,CACO,CACjB;MAAA,CACG,CAAC;IAAA,CACF,CAAC,EACJ,CAAC,CAAEN,MAAM,iBACV5B,IAAA,CAACF,eAAe;MACfW,SAAS,EAAC,sCAAsC;MAChD4C,SAAS,EAAGT,YAAY,CAAChB,MAAQ;MAAAiB,QAAA,EAE/BjB;IAAM,CACQ,CACjB;EAAA,CACG,CAAC;AAER;AAEA,eAAezC,UAAU,CAAEuC,iBAAkB,CAAC","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","useEffect","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useReducedMotion","useViewportMatch","useResizeObserver","NavigableRegion","jsx","_jsx","jsxs","_jsxs","ANIMATION_DURATION","commonTransition","type","duration","ease","useHTMLClass","className","element","document","querySelector","classList","toggle","headerVariants","hidden","opacity","marginTop","visible","distractionFreeHover","transition","delay","delayChildren","distractionFreeHidden","distractionFreeDisabled","InterfaceSkeleton","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","content","actions","labels","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","defaultLabels","body","mergedLabels","children","initial","as","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","style","position","height","left","x"],"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__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\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;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ 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\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: _x( 'Settings', 'settings landmark area' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\tref={ ref }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t{ !! header && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\t\taria-label={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\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} }\n\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\t\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\tleft: 0,\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\tvariants={ {\n\t\t\t\t\t\t\t\t\t\topen: { x: 0 },\n\t\t\t\t\t\t\t\t\t\tclosed: { x: '-100%' },\n\t\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ secondarySidebarResizeListener }\n\t\t\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t\t\t</motion.div>\n\t\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t\t) }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}

package/build-style/style-rtl.css

@@ -116,42 +116,13 @@
   }
 }
 
-.components-panel__header.interface-complementary-area-header__small {
-  background: #fff;
-  padding-left: 4px;
-}
-.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-}
-@media (min-width: 782px) {
-  .components-panel__header.interface-complementary-area-header__small {
-    display: none;
-  }
-}
-
 .interface-complementary-area-header {
   background: #fff;
-  padding-left: 12px;
-  gap: 8px;
+  padding-left: 8px;
+  gap: 4px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
-  margin: 0;
-}
-.interface-complementary-area-header .components-button.has-icon {
-  display: none;
-  margin-right: auto;
-}
-.interface-complementary-area-header .components-button.has-icon ~ .components-button {
-  margin-right: 0;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area-header .components-button.has-icon {
-    display: flex;
-  }
+  margin: 0 0 0 auto;
 }
 
 .interface-complementary-area {
@@ -181,12 +152,7 @@
   z-index: 1;
 }
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-  top: 48px;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-    top: 0;
-  }
+  top: 0;
 }
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;

package/build-style/style.css

@@ -116,42 +116,13 @@
   }
 }
 
-.components-panel__header.interface-complementary-area-header__small {
-  background: #fff;
-  padding-right: 4px;
-}
-.components-panel__header.interface-complementary-area-header__small .interface-complementary-area-header__small-title {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 100%;
-  margin: 0;
-}
-@media (min-width: 782px) {
-  .components-panel__header.interface-complementary-area-header__small {
-    display: none;
-  }
-}
-
 .interface-complementary-area-header {
   background: #fff;
-  padding-right: 12px;
-  gap: 8px;
+  padding-right: 8px;
+  gap: 4px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
-  margin: 0;
-}
-.interface-complementary-area-header .components-button.has-icon {
-  display: none;
-  margin-left: auto;
-}
-.interface-complementary-area-header .components-button.has-icon ~ .components-button {
-  margin-left: 0;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area-header .components-button.has-icon {
-    display: flex;
-  }
+  margin: 0 auto 0 0;
 }
 
 .interface-complementary-area {
@@ -181,12 +152,7 @@
   z-index: 1;
 }
 .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-  top: 48px;
-}
-@media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
-    top: 0;
-  }
+  top: 0;
 }
 .interface-complementary-area p:not(.components-base-control__help, .components-form-token-field__help) {
   margin-top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "7.0.0",
+	"version": "8.1.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",
@@ -26,6 +26,7 @@
 	"main": "build/index.js",
 	"module": "build-module/index.js",
 	"react-native": "src/index",
+	"wpScript": true,
 	"sideEffects": [
 		"build-style/**",
 		"src/**/*.scss",
@@ -33,18 +34,17 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "7.25.7",
-		"@wordpress/a11y": "^4.10.0",
-		"@wordpress/components": "^28.10.0",
-		"@wordpress/compose": "^7.10.0",
-		"@wordpress/data": "^10.10.0",
-		"@wordpress/deprecated": "^4.10.0",
-		"@wordpress/element": "^6.10.0",
-		"@wordpress/i18n": "^5.10.0",
-		"@wordpress/icons": "^10.10.0",
-		"@wordpress/plugins": "^7.10.0",
-		"@wordpress/preferences": "^4.10.0",
-		"@wordpress/private-apis": "^1.10.0",
-		"@wordpress/viewport": "^6.10.0",
+		"@wordpress/a11y": "*",
+		"@wordpress/components": "*",
+		"@wordpress/compose": "*",
+		"@wordpress/data": "*",
+		"@wordpress/deprecated": "*",
+		"@wordpress/element": "*",
+		"@wordpress/i18n": "*",
+		"@wordpress/icons": "*",
+		"@wordpress/plugins": "*",
+		"@wordpress/preferences": "*",
+		"@wordpress/viewport": "*",
 		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
@@ -54,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "ab34a7ac935fd1478eac63b596242d83270897ee"
+	"gitHead": "510540d99f3d222a96f08d3d7b66c9e7a726f705"
 }

package/src/components/complementary-area/README.md

@@ -84,14 +84,6 @@ The scope of the complementary area e.g: "core", "myplugin/custom-screen-a",
 -   Type: `String`
 -   Required: Yes
 
-### smallScreenTitle
-
-In small screens, the complementary area may take up the entire screen.
-`smallScreenTitle` allows displaying a title above the complementary area, so the user is more aware of what the area refers to.
-
--   Type: `String`
--   Required: No
-
 ### title
 
 Human friendly title of the complementary area.

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

@@ -25,6 +25,7 @@ import {
 	useViewportMatch,
 	usePrevious,
 } from '@wordpress/compose';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
@@ -32,7 +33,6 @@ import {
 import ComplementaryAreaHeader from '../complementary-area-header';
 import ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
-import withComplementaryAreaContext from '../complementary-area-context';
 import PinnedItems from '../pinned-items';
 import { store as interfaceStore } from '../../store';
 
@@ -171,19 +171,22 @@ function ComplementaryArea( {
 	children,
 	className,
 	closeLabel = __( 'Close plugin' ),
-	identifier,
+	identifier: identifierProp,
 	header,
 	headerClassName,
-	icon,
+	icon: iconProp,
 	isPinnable = true,
 	panelClassName,
 	scope,
 	name,
-	smallScreenTitle,
 	title,
 	toggleShortcut,
 	isActiveByDefault,
 } ) {
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
+
 	// This state is used to delay the rendering of the Fill
 	// until the initial effect runs.
 	// This prevents the animation from running on mount if
@@ -220,6 +223,9 @@ function ComplementaryArea( {
 		},
 		[ identifier, scope ]
 	);
+
+	const isMobileViewport = useViewportMatch( 'medium', '<' );
+
 	useAdjustComplementaryListener(
 		scope,
 		identifier,
@@ -300,10 +306,9 @@ function ComplementaryArea( {
 					className={ headerClassName }
 					closeLabel={ closeLabel }
 					onClose={ () => disableComplementaryArea( scope ) }
-					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
-						size: 'small',
+						size: 'compact',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,
@@ -314,7 +319,7 @@ function ComplementaryArea( {
 							<h2 className="interface-complementary-area-header__title">
 								{ title }
 							</h2>
-							{ isPinnable && (
+							{ isPinnable && ! isMobileViewport && (
 								<Button
 									className="interface-complementary-area__pin-unpin-item"
 									icon={ isPinned ? starFilled : starEmpty }
@@ -343,9 +348,6 @@ function ComplementaryArea( {
 	);
 }
 
-const ComplementaryAreaWrapped =
-	withComplementaryAreaContext( ComplementaryArea );
-
-ComplementaryAreaWrapped.Slot = ComplementaryAreaSlot;
+ComplementaryArea.Slot = ComplementaryAreaSlot;
 
-export default ComplementaryAreaWrapped;
+export default ComplementaryArea;

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

@@ -25,11 +25,7 @@
 		z-index: z-index(".interface-complementary-area .components-panel__header");
 
 		&.editor-sidebar__panel-tabs {
-			top: $panel-header-height;
-
-			@include break-medium() {
-				top: 0;
-			}
+			top: 0;
 		}
 	}
 

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

@@ -14,7 +14,6 @@ import { closeSmall } from '@wordpress/icons';
 import ComplementaryAreaToggle from '../complementary-area-toggle';
 
 const ComplementaryAreaHeader = ( {
-	smallScreenTitle,
 	children,
 	className,
 	toggleButtonProps,
@@ -23,27 +22,17 @@ const ComplementaryAreaHeader = ( {
 		<ComplementaryAreaToggle icon={ closeSmall } { ...toggleButtonProps } />
 	);
 	return (
-		<>
-			<div className="components-panel__header interface-complementary-area-header__small">
-				{ smallScreenTitle && (
-					<h2 className="interface-complementary-area-header__small-title">
-						{ smallScreenTitle }
-					</h2>
-				) }
-				{ toggleButton }
-			</div>
-			<div
-				className={ clsx(
-					'components-panel__header',
-					'interface-complementary-area-header',
-					className
-				) }
-				tabIndex={ -1 }
-			>
-				{ children }
-				{ toggleButton }
-			</div>
-		</>
+		<div
+			className={ clsx(
+				'components-panel__header',
+				'interface-complementary-area-header',
+				className
+			) }
+			tabIndex={ -1 }
+		>
+			{ children }
+			{ toggleButton }
+		</div>
 	);
 };
 

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

@@ -1,39 +1,9 @@
-.components-panel__header.interface-complementary-area-header__small {
-	background: $white;
-	padding-right: $grid-unit-05;
-
-	.interface-complementary-area-header__small-title {
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-		width: 100%;
-		margin: 0;
-	}
-
-	@include break-medium() {
-		display: none;
-	}
-}
-
 .interface-complementary-area-header {
 	background: $white;
-	padding-right: $grid-unit-15; // Reduced padding to account for close buttons.
-	gap: $grid-unit-10; // Always ensure space between contents and close buttons.
+	padding-right: $grid-unit-10; // Reduced padding to account for close buttons.
+	gap: $grid-unit-05; // Always ensure space between contents and close buttons.
 
 	.interface-complementary-area-header__title {
-		margin: 0;
-	}
-
-	.components-button.has-icon {
-		display: none;
-		margin-left: auto;
-
-		~ .components-button {
-			margin-left: 0;
-		}
-
-		@include break-medium() {
-			display: flex;
-		}
+		margin: 0 auto 0 0;
 	}
 }

package/src/components/complementary-area-toggle/index.js

@@ -3,12 +3,12 @@
  */
 import { Button } from '@wordpress/components';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { usePluginContext } from '@wordpress/plugins';
 
 /**
  * Internal dependencies
  */
 import { store as interfaceStore } from '../../store';
-import complementaryAreaContext from '../complementary-area-context';
 
 /**
  * Whether the role supports checked state.
@@ -29,17 +29,20 @@ function roleSupportsCheckedState( role ) {
 	].includes( role );
 }
 
-function ComplementaryAreaToggle( {
+export default function ComplementaryAreaToggle( {
 	as = Button,
 	scope,
-	identifier,
-	icon,
+	identifier: identifierProp,
+	icon: iconProp,
 	selectedIcon,
 	name,
 	shortcut,
 	...props
 } ) {
 	const ComponentToUse = as;
+	const context = usePluginContext();
+	const icon = iconProp || context.icon;
+	const identifier = identifierProp || `${ context.name }/${ name }`;
 	const isSelected = useSelect(
 		( select ) =>
 			select( interfaceStore ).getActiveComplementaryArea( scope ) ===
@@ -70,5 +73,3 @@ function ComplementaryAreaToggle( {
 		/>
 	);
 }
-
-export default complementaryAreaContext( ComplementaryAreaToggle );

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

@@ -105,7 +105,7 @@ function InterfaceSkeleton(
 		/* translators: accessibility text for the secondary sidebar landmark region. */
 		secondarySidebar: __( 'Block Library' ),
 		/* translators: accessibility text for the settings landmark region. */
-		sidebar: __( 'Settings' ),
+		sidebar: _x( 'Settings', 'settings landmark area' ),
 		/* translators: accessibility text for the publish landmark region. */
 		actions: __( 'Publish' ),
 		/* translators: accessibility text for the footer landmark region. */

package/build/components/complementary-area-context/index.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _plugins = require("@wordpress/plugins");
-/**
- * WordPress dependencies
- */
-var _default = exports.default = (0, _plugins.withPluginContext)((context, ownProps) => {
-  return {
-    icon: ownProps.icon || context.icon,
-    identifier: ownProps.identifier || `${context.name}/${ownProps.name}`
-  };
-});
-//# sourceMappingURL=index.js.map

package/build/components/complementary-area-context/index.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["_plugins","require","_default","exports","default","withPluginContext","context","ownProps","icon","identifier","name"],"sources":["@wordpress/interface/src/components/complementary-area-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { withPluginContext } from '@wordpress/plugins';\n\nexport default withPluginContext( ( context, ownProps ) => {\n\treturn {\n\t\ticon: ownProps.icon || context.icon,\n\t\tidentifier:\n\t\t\townProps.identifier || `${ context.name }/${ ownProps.name }`,\n\t};\n} );\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;AAFA,IAAAC,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAKe,IAAAC,0BAAiB,EAAE,CAAEC,OAAO,EAAEC,QAAQ,KAAM;EAC1D,OAAO;IACNC,IAAI,EAAED,QAAQ,CAACC,IAAI,IAAIF,OAAO,CAACE,IAAI;IACnCC,UAAU,EACTF,QAAQ,CAACE,UAAU,IAAI,GAAIH,OAAO,CAACI,IAAI,IAAMH,QAAQ,CAACG,IAAI;EAC5D,CAAC;AACF,CAAE,CAAC","ignoreList":[]}

package/build-module/components/complementary-area-context/index.js

@@ -1,11 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-export default withPluginContext((context, ownProps) => {
-  return {
-    icon: ownProps.icon || context.icon,
-    identifier: ownProps.identifier || `${context.name}/${ownProps.name}`
-  };
-});
-//# sourceMappingURL=index.js.map

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

@@ -1 +0,0 @@
-{"version":3,"names":["withPluginContext","context","ownProps","icon","identifier","name"],"sources":["@wordpress/interface/src/components/complementary-area-context/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { withPluginContext } from '@wordpress/plugins';\n\nexport default withPluginContext( ( context, ownProps ) => {\n\treturn {\n\t\ticon: ownProps.icon || context.icon,\n\t\tidentifier:\n\t\t\townProps.identifier || `${ context.name }/${ ownProps.name }`,\n\t};\n} );\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,iBAAiB,QAAQ,oBAAoB;AAEtD,eAAeA,iBAAiB,CAAE,CAAEC,OAAO,EAAEC,QAAQ,KAAM;EAC1D,OAAO;IACNC,IAAI,EAAED,QAAQ,CAACC,IAAI,IAAIF,OAAO,CAACE,IAAI;IACnCC,UAAU,EACTF,QAAQ,CAACE,UAAU,IAAI,GAAIH,OAAO,CAACI,IAAI,IAAMH,QAAQ,CAACG,IAAI;EAC5D,CAAC;AACF,CAAE,CAAC","ignoreList":[]}

package/complementary-area-context/index.js

@@ -1,12 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { withPluginContext } from '@wordpress/plugins';
-
-export default withPluginContext( ( context, ownProps ) => {
-	return {
-		icon: ownProps.icon || context.icon,
-		identifier:
-			ownProps.identifier || `${ context.name }/${ ownProps.name }`,
-	};
-} );