@wordpress/interface 5.34.0 → 6.0.0

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

@@ -1,8 +1,7 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -16,7 +15,14 @@ import { useMergeRefs, useReducedMotion, useViewportMatch, useResizeObserver } f
  * Internal dependencies
  */
 import NavigableRegion from '../navigable-region';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const ANIMATION_DURATION = 0.25;
+const commonTransition = {
+  type: 'tween',
+  duration: ANIMATION_DURATION,
+  ease: [0.6, 0, 0.4, 1]
+};
 function useHTMLClass(className) {
   useEffect(() => {
     const element = document && document.querySelector(`html:not(.${className})`);
@@ -31,20 +37,33 @@ function useHTMLClass(className) {
 }
 const headerVariants = {
   hidden: {
-    opacity: 0
+    opacity: 1,
+    marginTop: -60
+  },
+  visible: {
+    opacity: 1,
+    marginTop: 0
   },
-  hover: {
+  distractionFreeHover: {
     opacity: 1,
+    marginTop: 0,
     transition: {
-      type: 'tween',
+      ...commonTransition,
       delay: 0.2,
       delayChildren: 0.2
     }
   },
-  distractionFreeInactive: {
-    opacity: 1,
+  distractionFreeHidden: {
+    opacity: 0,
+    marginTop: -60
+  },
+  distractionFreeDisabled: {
+    opacity: 0,
+    marginTop: 0,
     transition: {
-      delay: 0
+      ...commonTransition,
+      delay: 0.8,
+      delayChildren: 0.8
     }
   }
 };
@@ -55,7 +74,6 @@ function InterfaceSkeleton({
   editorNotices,
   sidebar,
   secondarySidebar,
-  notices,
   content,
   actions,
   labels,
@@ -93,71 +111,82 @@ function InterfaceSkeleton({
     ...defaultLabels,
     ...labels
   };
-  return createElement("div", {
+  return /*#__PURE__*/_jsxs("div", {
     ...(enableRegionNavigation ? navigateRegionsProps : {}),
     ref: useMergeRefs([ref, enableRegionNavigation ? navigateRegionsProps.ref : undefined]),
-    className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
-  }, createElement("div", {
-    className: "interface-interface-skeleton__editor"
-  }, !!header && createElement(NavigableRegion, {
-    as: motion.div,
-    className: "interface-interface-skeleton__header",
-    "aria-label": mergedLabels.header,
-    initial: isDistractionFree ? 'hidden' : 'distractionFreeInactive',
-    whileHover: isDistractionFree ? 'hover' : 'distractionFreeInactive',
-    animate: isDistractionFree ? 'hidden' : 'distractionFreeInactive',
-    variants: headerVariants,
-    transition: isDistractionFree ? {
-      type: 'tween',
-      delay: 0.8
-    } : undefined
-  }, header), isDistractionFree && createElement("div", {
-    className: "interface-interface-skeleton__header"
-  }, editorNotices), createElement("div", {
-    className: "interface-interface-skeleton__body"
-  }, createElement(AnimatePresence, {
-    initial: false
-  }, !!secondarySidebar && createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__secondary-sidebar",
-    ariaLabel: mergedLabels.secondarySidebar,
-    as: motion.div,
-    initial: "closed",
-    animate: isMobileViewport ? 'mobileOpen' : 'open',
-    exit: "closed",
-    variants: {
-      open: {
-        width: secondarySidebarSize.width
-      },
-      closed: {
-        width: 0
-      },
-      mobileOpen: {
-        width: '100vw'
-      }
-    },
-    transition: defaultTransition
-  }, createElement("div", {
-    style: {
-      position: 'absolute',
-      width: isMobileViewport ? '100vw' : 'fit-content',
-      height: '100%',
-      right: 0
-    }
-  }, secondarySidebarResizeListener, secondarySidebar))), !!notices && createElement("div", {
-    className: "interface-interface-skeleton__notices"
-  }, notices), createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__content",
-    ariaLabel: mergedLabels.body
-  }, content), !!sidebar && createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__sidebar",
-    ariaLabel: mergedLabels.sidebar
-  }, sidebar), !!actions && createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__actions",
-    ariaLabel: mergedLabels.actions
-  }, actions))), !!footer && createElement(NavigableRegion, {
-    className: "interface-interface-skeleton__footer",
-    ariaLabel: mergedLabels.footer
-  }, footer));
+    className: clsx(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer'),
+    children: [/*#__PURE__*/_jsxs("div", {
+      className: "interface-interface-skeleton__editor",
+      children: [/*#__PURE__*/_jsx(AnimatePresence, {
+        initial: false,
+        children: !!header && /*#__PURE__*/_jsx(NavigableRegion, {
+          as: motion.div,
+          className: "interface-interface-skeleton__header",
+          "aria-label": mergedLabels.header,
+          initial: isDistractionFree ? 'distractionFreeHidden' : 'hidden',
+          whileHover: isDistractionFree ? 'distractionFreeHover' : 'visible',
+          animate: isDistractionFree ? 'distractionFreeDisabled' : 'visible',
+          exit: isDistractionFree ? 'distractionFreeHidden' : 'hidden',
+          variants: headerVariants,
+          transition: defaultTransition,
+          children: header
+        })
+      }), isDistractionFree && /*#__PURE__*/_jsx("div", {
+        className: "interface-interface-skeleton__header",
+        children: editorNotices
+      }), /*#__PURE__*/_jsxs("div", {
+        className: "interface-interface-skeleton__body",
+        children: [/*#__PURE__*/_jsx(AnimatePresence, {
+          initial: false,
+          children: !!secondarySidebar && /*#__PURE__*/_jsx(NavigableRegion, {
+            className: "interface-interface-skeleton__secondary-sidebar",
+            ariaLabel: mergedLabels.secondarySidebar,
+            as: motion.div,
+            initial: "closed",
+            animate: isMobileViewport ? 'mobileOpen' : 'open',
+            exit: "closed",
+            variants: {
+              open: {
+                width: secondarySidebarSize.width
+              },
+              closed: {
+                width: 0
+              },
+              mobileOpen: {
+                width: '100vw'
+              }
+            },
+            transition: defaultTransition,
+            children: /*#__PURE__*/_jsxs("div", {
+              style: {
+                position: 'absolute',
+                width: isMobileViewport ? '100vw' : 'fit-content',
+                height: '100%',
+                right: 0
+              },
+              children: [secondarySidebarResizeListener, secondarySidebar]
+            })
+          })
+        }), /*#__PURE__*/_jsx(NavigableRegion, {
+          className: "interface-interface-skeleton__content",
+          ariaLabel: mergedLabels.body,
+          children: content
+        }), !!sidebar && /*#__PURE__*/_jsx(NavigableRegion, {
+          className: "interface-interface-skeleton__sidebar",
+          ariaLabel: mergedLabels.sidebar,
+          children: sidebar
+        }), !!actions && /*#__PURE__*/_jsx(NavigableRegion, {
+          className: "interface-interface-skeleton__actions",
+          ariaLabel: mergedLabels.actions,
+          children: actions
+        })]
+      })]
+    }), !!footer && /*#__PURE__*/_jsx(NavigableRegion, {
+      className: "interface-interface-skeleton__footer",
+      ariaLabel: mergedLabels.footer,
+      children: footer
+    })]
+  });
 }
 export default forwardRef(InterfaceSkeleton);
 //# sourceMappingURL=index.js.map

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

@@ -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: 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":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,UAAU,EAAEC,SAAS,QAAQ,oBAAoB;AAC1D,SACCC,4BAA4B,IAAIC,kBAAkB,EAClDC,gBAAgB,IAAIC,MAAM,EAC1BC,yBAAyB,IAAIC,eAAe,QACtC,uBAAuB;AAC9B,SAASC,EAAE,EAAEC,EAAE,QAAQ,iBAAiB;AACxC,SACCC,YAAY,EACZC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,QACX,oBAAoB;;AAE3B;AACA;AACA;AACA,OAAOC,eAAe,MAAM,qBAAqB;AAEjD,MAAMC,kBAAkB,GAAG,IAAI;AAE/B,SAASC,YAAYA,CAAEC,SAAS,EAAG;EAClChB,SAAS,CAAE,MAAM;IAChB,MAAMiB,OAAO,GACZC,QAAQ,IAAIA,QAAQ,CAACC,aAAa,CAAG,aAAaH,SAAW,GAAG,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;EAAE,CAAC;EACtBC,KAAK,EAAE;IACND,OAAO,EAAE,CAAC;IACVE,UAAU,EAAE;MAAEC,IAAI,EAAE,OAAO;MAAEC,KAAK,EAAE,GAAG;MAAEC,aAAa,EAAE;IAAI;EAC7D,CAAC;EACDC,uBAAuB,EAAE;IAAEN,OAAO,EAAE,CAAC;IAAEE,UAAU,EAAE;MAAEE,KAAK,EAAE;IAAE;EAAE;AACjE,CAAC;AAED,SAASG,iBAAiBA,CACzB;EACCC,iBAAiB;EACjBC,MAAM;EACNC,MAAM;EACNC,aAAa;EACbC,OAAO;EACPC,gBAAgB;EAChBC,OAAO;EACPC,OAAO;EACPC,OAAO;EACPC,MAAM;EACNzB,SAAS;EACT0B,sBAAsB,GAAG,IAAI;EAC7B;EACA;EACAC;AACD,CAAC,EACDC,GAAG,EACF;EACD,MAAM,CAAEC,8BAA8B,EAAEC,oBAAoB,CAAE,GAC7DlC,iBAAiB,CAAC,CAAC;EACpB,MAAMmC,gBAAgB,GAAGpC,gBAAgB,CAAE,QAAQ,EAAE,GAAI,CAAC;EAC1D,MAAMqC,aAAa,GAAGtC,gBAAgB,CAAC,CAAC;EACxC,MAAMuC,iBAAiB,GAAG;IACzBtB,IAAI,EAAE,OAAO;IACbuB,QAAQ,EAAEF,aAAa,GAAG,CAAC,GAAGlC,kBAAkB;IAChDqC,IAAI,EAAE,CAAE,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;EACvB,CAAC;EACD,MAAMC,oBAAoB,GAAGlD,kBAAkB,CAAEyC,SAAU,CAAC;EAC5D5B,YAAY,CAAE,8CAA+C,CAAC;EAE9D,MAAMsC,aAAa,GAAG;IACrB;IACAnB,MAAM,EAAE1B,EAAE,CAAE,QAAQ,EAAE,sBAAuB,CAAC;IAC9C;IACA8C,IAAI,EAAE/C,EAAE,CAAE,SAAU,CAAC;IACrB;IACA8B,gBAAgB,EAAE9B,EAAE,CAAE,eAAgB,CAAC;IACvC;IACA6B,OAAO,EAAE7B,EAAE,CAAE,UAAW,CAAC;IACzB;IACAiC,OAAO,EAAEjC,EAAE,CAAE,SAAU,CAAC;IACxB;IACA0B,MAAM,EAAE1B,EAAE,CAAE,QAAS;EACtB,CAAC;EAED,MAAMgD,YAAY,GAAG;IAAE,GAAGF,aAAa;IAAE,GAAGZ;EAAO,CAAC;EAEpD,OACCe,aAAA;IAAA,IACQd,sBAAsB,GAAGU,oBAAoB,GAAG,CAAC,CAAC;IACzDR,GAAG,EAAGnC,YAAY,CAAE,CACnBmC,GAAG,EACHF,sBAAsB,GAAGU,oBAAoB,CAACR,GAAG,GAAGa,SAAS,CAC5D,CAAG;IACLzC,SAAS,EAAGlB,UAAU,CACrBkB,SAAS,EACT,8BAA8B,EAC9BoC,oBAAoB,CAACpC,SAAS,EAC9B,CAAC,CAAEiB,MAAM,IAAI,YACd;EAAG,GAEHuB,aAAA;IAAKxC,SAAS,EAAC;EAAsC,GAClD,CAAC,CAAEkB,MAAM,IACVsB,aAAA,CAAC3C,eAAe;IACf6C,EAAE,EAAGtD,MAAM,CAACuD,GAAK;IACjB3C,SAAS,EAAC,sCAAsC;IAChD,cAAauC,YAAY,CAACrB,MAAQ;IAClC0B,OAAO,EACN5B,iBAAiB,GACd,QAAQ,GACR,yBACH;IACD6B,UAAU,EACT7B,iBAAiB,GACd,OAAO,GACP,yBACH;IACD8B,OAAO,EACN9B,iBAAiB,GACd,QAAQ,GACR,yBACH;IACD+B,QAAQ,EAAGzC,cAAgB;IAC3BI,UAAU,EACTM,iBAAiB,GACd;MAAEL,IAAI,EAAE,OAAO;MAAEC,KAAK,EAAE;IAAI,CAAC,GAC7B6B;EACH,GAECvB,MACc,CACjB,EACCF,iBAAiB,IAClBwB,aAAA;IAAKxC,SAAS,EAAC;EAAsC,GAClDmB,aACE,CACL,EACDqB,aAAA;IAAKxC,SAAS,EAAC;EAAoC,GAClDwC,aAAA,CAAClD,eAAe;IAACsD,OAAO,EAAG;EAAO,GAC/B,CAAC,CAAEvB,gBAAgB,IACpBmB,aAAA,CAAC3C,eAAe;IACfG,SAAS,EAAC,iDAAiD;IAC3DgD,SAAS,EAAGT,YAAY,CAAClB,gBAAkB;IAC3CqB,EAAE,EAAGtD,MAAM,CAACuD,GAAK;IACjBC,OAAO,EAAC,QAAQ;IAChBE,OAAO,EACNf,gBAAgB,GAAG,YAAY,GAAG,MAClC;IACDkB,IAAI,EAAC,QAAQ;IACbF,QAAQ,EAAG;MACVG,IAAI,EAAE;QAAEC,KAAK,EAAErB,oBAAoB,CAACqB;MAAM,CAAC;MAC3CC,MAAM,EAAE;QAAED,KAAK,EAAE;MAAE,CAAC;MACpBE,UAAU,EAAE;QAAEF,KAAK,EAAE;MAAQ;IAC9B,CAAG;IACHzC,UAAU,EAAGuB;EAAmB,GAEhCO,aAAA;IACCc,KAAK,EAAG;MACPC,QAAQ,EAAE,UAAU;MACpBJ,KAAK,EAAEpB,gBAAgB,GACpB,OAAO,GACP,aAAa;MAChByB,MAAM,EAAE,MAAM;MACdC,KAAK,EAAE;IACR;EAAG,GAED5B,8BAA8B,EAC9BR,gBACE,CACW,CAEF,CAAC,EAChB,CAAC,CAAEC,OAAO,IACXkB,aAAA;IAAKxC,SAAS,EAAC;EAAuC,GACnDsB,OACE,CACL,EACDkB,aAAA,CAAC3C,eAAe;IACfG,SAAS,EAAC,uCAAuC;IACjDgD,SAAS,EAAGT,YAAY,CAACD;EAAM,GAE7Bf,OACc,CAAC,EAChB,CAAC,CAAEH,OAAO,IACXoB,aAAA,CAAC3C,eAAe;IACfG,SAAS,EAAC,uCAAuC;IACjDgD,SAAS,EAAGT,YAAY,CAACnB;EAAS,GAEhCA,OACc,CACjB,EACC,CAAC,CAAEI,OAAO,IACXgB,aAAA,CAAC3C,eAAe;IACfG,SAAS,EAAC,uCAAuC;IACjDgD,SAAS,EAAGT,YAAY,CAACf;EAAS,GAEhCA,OACc,CAEd,CACD,CAAC,EACJ,CAAC,CAAEP,MAAM,IACVuB,aAAA,CAAC3C,eAAe;IACfG,SAAS,EAAC,sCAAsC;IAChDgD,SAAS,EAAGT,YAAY,CAACtB;EAAQ,GAE/BA,MACc,CAEd,CAAC;AAER;AAEA,eAAelC,UAAU,CAAEgC,iBAAkB,CAAC","ignoreList":[]}
+{"version":3,"names":["clsx","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","__","_x","useMergeRefs","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","enableRegionNavigation","shortcuts","ref","secondarySidebarResizeListener","secondarySidebarSize","isMobileViewport","disableMotion","defaultTransition","navigateRegionsProps","defaultLabels","body","mergedLabels","undefined","children","initial","as","div","whileHover","animate","exit","variants","ariaLabel","open","width","closed","mobileOpen","style","position","height","right"],"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableUseNavigateRegions as useNavigateRegions,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseMergeRefs,\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\n\nconst ANIMATION_DURATION = 0.25;\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\tenableRegionNavigation = true,\n\t\t// Todo: does this need to be a prop.\n\t\t// Can we use a dependency to keyboard-shortcuts directly?\n\t\tshortcuts,\n\t},\n\tref\n) {\n\tconst [ secondarySidebarResizeListener, secondarySidebarSize ] =\n\t\tuseResizeObserver();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\tconst disableMotion = useReducedMotion();\n\tconst defaultTransition = {\n\t\ttype: 'tween',\n\t\tduration: disableMotion ? 0 : ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\tconst navigateRegionsProps = useNavigateRegions( shortcuts );\n\tuseHTMLClass( 'interface-interface-skeleton__html-container' );\n\n\tconst defaultLabels = {\n\t\t/* translators: accessibility text for the top bar landmark region. */\n\t\theader: _x( 'Header', 'header landmark area' ),\n\t\t/* translators: accessibility text for the content landmark region. */\n\t\tbody: __( 'Content' ),\n\t\t/* translators: accessibility text for the secondary sidebar landmark region. */\n\t\tsecondarySidebar: __( 'Block Library' ),\n\t\t/* translators: accessibility text for the settings landmark region. */\n\t\tsidebar: __( 'Settings' ),\n\t\t/* translators: accessibility text for the publish landmark region. */\n\t\tactions: __( 'Publish' ),\n\t\t/* translators: accessibility text for the footer landmark region. */\n\t\tfooter: __( 'Footer' ),\n\t};\n\n\tconst mergedLabels = { ...defaultLabels, ...labels };\n\n\treturn (\n\t\t<div\n\t\t\t{ ...( enableRegionNavigation ? navigateRegionsProps : {} ) }\n\t\t\tref={ useMergeRefs( [\n\t\t\t\tref,\n\t\t\t\tenableRegionNavigation ? navigateRegionsProps.ref : undefined,\n\t\t\t] ) }\n\t\t\tclassName={ clsx(\n\t\t\t\tclassName,\n\t\t\t\t'interface-interface-skeleton',\n\t\t\t\tnavigateRegionsProps.className,\n\t\t\t\t!! footer && 'has-footer'\n\t\t\t) }\n\t\t>\n\t\t\t<div className=\"interface-interface-skeleton__editor\">\n\t\t\t\t<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\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\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\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\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={\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<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__content\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.body }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ content }\n\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t{ !! sidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.sidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ sidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t\t{ !! actions && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__actions\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.actions }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ actions }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{ !! footer && (\n\t\t\t\t<NavigableRegion\n\t\t\t\t\tclassName=\"interface-interface-skeleton__footer\"\n\t\t\t\t\tariaLabel={ mergedLabels.footer }\n\t\t\t\t>\n\t\t\t\t\t{ footer }\n\t\t\t\t</NavigableRegion>\n\t\t\t) }\n\t\t</div>\n\t);\n}\n\nexport default forwardRef( InterfaceSkeleton );\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,8 +1,8 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
+import { jsx as _jsx } from "react/jsx-runtime";
 export default function NavigableRegion({
   children,
   className,
@@ -10,12 +10,13 @@ export default function NavigableRegion({
   as: Tag = 'div',
   ...props
 }) {
-  return createElement(Tag, {
-    className: classnames('interface-navigable-region', className),
+  return /*#__PURE__*/_jsx(Tag, {
+    className: clsx('interface-navigable-region', className),
     "aria-label": ariaLabel,
     role: "region",
     tabIndex: "-1",
-    ...props
-  }, children);
+    ...props,
+    children: children
+  });
 }
 //# sourceMappingURL=index.js.map

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

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

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

@@ -1,18 +1,18 @@
-import { createElement } from "react";
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
  */
 import { Slot, Fill } from '@wordpress/components';
+import { jsx as _jsx } from "react/jsx-runtime";
 function PinnedItems({
   scope,
   ...props
 }) {
-  return createElement(Fill, {
+  return /*#__PURE__*/_jsx(Fill, {
     name: `PinnedItems/${scope}`,
     ...props
   });
@@ -22,12 +22,14 @@ function PinnedItemsSlot({
   className,
   ...props
 }) {
-  return createElement(Slot, {
+  return /*#__PURE__*/_jsx(Slot, {
     name: `PinnedItems/${scope}`,
-    ...props
-  }, fills => fills?.length > 0 && createElement("div", {
-    className: classnames(className, 'interface-pinned-items')
-  }, fills));
+    ...props,
+    children: fills => fills?.length > 0 && /*#__PURE__*/_jsx("div", {
+      className: clsx(className, 'interface-pinned-items'),
+      children: fills
+    })
+  });
 }
 PinnedItems.Slot = PinnedItemsSlot;
 export default PinnedItems;

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

@@ -1 +1 @@
-{"version":3,"names":["classnames","Slot","Fill","PinnedItems","scope","props","createElement","name","PinnedItemsSlot","className","fills","length"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport classnames from 'classnames';\n\n/**\n * WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ classnames(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":";AAAA;AACA;AACA;AACA,OAAOA,UAAU,MAAM,YAAY;;AAEnC;AACA;AACA;AACA,SAASC,IAAI,EAAEC,IAAI,QAAQ,uBAAuB;AAElD,SAASC,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,OAAOC,aAAA,CAACJ,IAAI;IAACK,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASG,eAAeA,CAAE;EAAEJ,KAAK;EAAEK,SAAS;EAAE,GAAGJ;AAAM,CAAC,EAAG;EAC1D,OACCC,aAAA,CAACL,IAAI;IAACM,IAAI,EAAI,eAAeH,KAAO,EAAG;IAAA,GAAMC;EAAK,GAC7CK,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,IAChBL,aAAA;IACCG,SAAS,EAAGT,UAAU,CACrBS,SAAS,EACT,wBACD;EAAG,GAEDC,KACE,CAGF,CAAC;AAET;AAEAP,WAAW,CAACF,IAAI,GAAGO,eAAe;AAElC,eAAeL,WAAW","ignoreList":[]}
+{"version":3,"names":["clsx","Slot","Fill","jsx","_jsx","PinnedItems","scope","props","name","PinnedItemsSlot","className","children","fills","length"],"sources":["@wordpress/interface/src/components/pinned-items/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { Slot, Fill } from '@wordpress/components';\n\nfunction PinnedItems( { scope, ...props } ) {\n\treturn <Fill name={ `PinnedItems/${ scope }` } { ...props } />;\n}\n\nfunction PinnedItemsSlot( { scope, className, ...props } ) {\n\treturn (\n\t\t<Slot name={ `PinnedItems/${ scope }` } { ...props }>\n\t\t\t{ ( fills ) =>\n\t\t\t\tfills?.length > 0 && (\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\tclassName,\n\t\t\t\t\t\t\t'interface-pinned-items'\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ fills }\n\t\t\t\t\t</div>\n\t\t\t\t)\n\t\t\t}\n\t\t</Slot>\n\t);\n}\n\nPinnedItems.Slot = PinnedItemsSlot;\n\nexport default PinnedItems;\n"],"mappings":"AAAA;AACA;AACA;AACA,OAAOA,IAAI,MAAM,MAAM;;AAEvB;AACA;AACA;AACA,SAASC,IAAI,EAAEC,IAAI,QAAQ,uBAAuB;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAEnD,SAASC,WAAWA,CAAE;EAAEC,KAAK;EAAE,GAAGC;AAAM,CAAC,EAAG;EAC3C,oBAAOH,IAAA,CAACF,IAAI;IAACM,IAAI,EAAI,eAAeF,KAAO,EAAG;IAAA,GAAMC;EAAK,CAAI,CAAC;AAC/D;AAEA,SAASE,eAAeA,CAAE;EAAEH,KAAK;EAAEI,SAAS;EAAE,GAAGH;AAAM,CAAC,EAAG;EAC1D,oBACCH,IAAA,CAACH,IAAI;IAACO,IAAI,EAAI,eAAeF,KAAO,EAAG;IAAA,GAAMC,KAAK;IAAAI,QAAA,EAC7CC,KAAK,IACRA,KAAK,EAAEC,MAAM,GAAG,CAAC,iBAChBT,IAAA;MACCM,SAAS,EAAGV,IAAI,CACfU,SAAS,EACT,wBACD,CAAG;MAAAC,QAAA,EAEDC;IAAK,CACH;EACL,CAEG,CAAC;AAET;AAEAP,WAAW,CAACJ,IAAI,GAAGQ,eAAe;AAElC,eAAeJ,WAAW","ignoreList":[]}

package/build-style/style-rtl.css

@@ -123,7 +123,8 @@
 
 .interface-complementary-area-header {
   background: #fff;
-  padding-left: 4px;
+  padding-left: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,12 +142,6 @@
   }
 }
 
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -173,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -186,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -241,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -362,29 +358,34 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__sidebar {
+  border-top: 1px solid #e0e0e0;
   overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
-    border-right: 1px solid #e0e0e0;
+    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
+    outline: 1px solid transparent;
   }
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+  border-top: 1px solid #e0e0e0;
   left: 0;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
-    border-left: 1px solid #e0e0e0;
+    box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.133);
+    outline: 1px solid transparent;
   }
 }
 
 .interface-interface-skeleton__header {
   flex-shrink: 0;
   height: auto;
-  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
   z-index: 30;
   color: #1e1e1e;
+  outline: 1px solid transparent;
 }
 
 .interface-interface-skeleton__footer {

package/build-style/style.css

@@ -123,7 +123,8 @@
 
 .interface-complementary-area-header {
   background: #fff;
-  padding-right: 4px;
+  padding-right: 12px;
+  gap: 8px;
 }
 .interface-complementary-area-header .interface-complementary-area-header__title {
   margin: 0;
@@ -141,12 +142,6 @@
   }
 }
 
-@media (min-width: 782px) {
-  .components-panel__header + .interface-complementary-area-header {
-    margin-top: 0;
-  }
-}
-
 .interface-complementary-area {
   background: #fff;
   color: #1e1e1e;
@@ -173,11 +168,11 @@
   top: 0;
   z-index: 1;
 }
-.interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+.interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
   top: 48px;
 }
 @media (min-width: 782px) {
-  .interface-complementary-area .components-panel__header.edit-post-sidebar__panel-tabs {
+  .interface-complementary-area .components-panel__header.editor-sidebar__panel-tabs {
     top: 0;
   }
 }
@@ -186,6 +181,7 @@
 }
 .interface-complementary-area h2 {
   font-size: 13px;
+  font-weight: 500;
   color: #1e1e1e;
   margin-bottom: 1.5em;
 }
@@ -241,7 +237,7 @@ html.interface-interface-skeleton__html-container {
   width: 100%;
 }
 @media (min-width: 782px) {
-  html.interface-interface-skeleton__html-container {
+  html.interface-interface-skeleton__html-container:not(:has(.is-zoom-out)) {
     position: initial;
     width: initial;
   }
@@ -362,29 +358,34 @@ body.is-fullscreen-mode .interface-interface-skeleton {
 }
 
 .interface-interface-skeleton__sidebar {
+  border-top: 1px solid #e0e0e0;
   overflow: hidden;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__sidebar {
-    border-left: 1px solid #e0e0e0;
+    box-shadow: -1px 1px 0 0 rgba(0, 0, 0, 0.133);
+    outline: 1px solid transparent;
   }
 }
 
 .interface-interface-skeleton__secondary-sidebar {
+  border-top: 1px solid #e0e0e0;
   right: 0;
 }
 @media (min-width: 782px) {
   .interface-interface-skeleton__secondary-sidebar {
-    border-right: 1px solid #e0e0e0;
+    box-shadow: 1px 1px 0 0 rgba(0, 0, 0, 0.133);
+    outline: 1px solid transparent;
   }
 }
 
 .interface-interface-skeleton__header {
   flex-shrink: 0;
   height: auto;
-  border-bottom: 1px solid #e0e0e0;
+  box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.133);
   z-index: 30;
   color: #1e1e1e;
+  outline: 1px solid transparent;
 }
 
 .interface-interface-skeleton__footer {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/interface",
-	"version": "5.34.0",
+	"version": "6.0.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",
@@ -20,7 +20,8 @@
 		"url": "https://github.com/WordPress/gutenberg/issues"
 	},
 	"engines": {
-		"node": ">=12"
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
 	},
 	"main": "build/index.js",
 	"module": "build-module/index.js",
@@ -32,19 +33,19 @@
 	],
 	"dependencies": {
 		"@babel/runtime": "^7.16.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"
+		"@wordpress/a11y": "^4.0.0",
+		"@wordpress/components": "^28.0.0",
+		"@wordpress/compose": "^7.0.0",
+		"@wordpress/data": "^10.0.0",
+		"@wordpress/deprecated": "^4.0.0",
+		"@wordpress/element": "^6.0.0",
+		"@wordpress/i18n": "^5.0.0",
+		"@wordpress/icons": "^10.0.0",
+		"@wordpress/plugins": "^7.0.0",
+		"@wordpress/preferences": "^4.0.0",
+		"@wordpress/private-apis": "^1.0.0",
+		"@wordpress/viewport": "^6.0.0",
+		"clsx": "^2.1.1"
 	},
 	"peerDependencies": {
 		"react": "^18.0.0",
@@ -53,5 +54,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "581d8a5580dba8f600b7268d51eb554771ae482c"
+	"gitHead": "2f30cddff15723ac7017fd009fc5913b7b419400"
 }

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import classnames from 'classnames';
+import clsx from 'clsx';
 
 /**
  * WordPress dependencies
@@ -291,10 +291,7 @@ function ComplementaryArea( {
 			<ComplementaryAreaFill
 				activeArea={ activeArea }
 				isActive={ isActive }
-				className={ classnames(
-					'interface-complementary-area',
-					className
-				) }
+				className={ clsx( 'interface-complementary-area', className ) }
 				scope={ scope }
 				id={ identifier.replace( '/', ':' ) }
 			>
@@ -305,6 +302,7 @@ function ComplementaryArea( {
 					smallScreenTitle={ smallScreenTitle }
 					toggleButtonProps={ {
 						label: closeLabel,
+						size: 'small',
 						shortcut: toggleShortcut,
 						scope,
 						identifier,
@@ -332,6 +330,7 @@ function ComplementaryArea( {
 									}
 									isPressed={ isPinned }
 									aria-expanded={ isPinned }
+									size="compact"
 								/>
 							) }
 						</>