@wordpress/interface/build/components/interface-skeleton/index.cjs.map

Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.

{
  "version": 3,
  "sources": ["../../../src/components/interface-skeleton/index.js"],
  "sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { NavigableRegion } from '@wordpress/admin-ui';\nimport { forwardRef, useEffect } from '@wordpress/element';\nimport {\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { __, _x } from '@wordpress/i18n';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tuseResizeObserver,\n} from '@wordpress/compose';\n\nconst ANIMATION_DURATION = 0.25;\nconst commonTransition = {\n\ttype: 'tween',\n\tduration: ANIMATION_DURATION,\n\tease: [ 0.6, 0, 0.4, 1 ],\n};\n\nfunction useHTMLClass( className ) {\n\tuseEffect( () => {\n\t\tconst element =\n\t\t\tdocument && document.querySelector( `html:not(.${ className })` );\n\t\tif ( ! element ) {\n\t\t\treturn;\n\t\t}\n\t\telement.classList.toggle( className );\n\t\treturn () => {\n\t\t\telement.classList.toggle( className );\n\t\t};\n\t}, [ className ] );\n}\n\nconst headerVariants = {\n\thidden: { opacity: 1, marginTop: -60 },\n\tvisible: { opacity: 1, marginTop: 0 },\n\tdistractionFreeHover: {\n\t\topacity: 1,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.2,\n\t\t\tdelayChildren: 0.2,\n\t\t},\n\t},\n\tdistractionFreeHidden: {\n\t\topacity: 0,\n\t\tmarginTop: -60,\n\t},\n\tdistractionFreeDisabled: {\n\t\topacity: 0,\n\t\tmarginTop: 0,\n\t\ttransition: {\n\t\t\t...commonTransition,\n\t\t\tdelay: 0.8,\n\t\t\tdelayChildren: 0.8,\n\t\t},\n\t},\n};\n\nfunction InterfaceSkeleton(\n\t{\n\t\tisDistractionFree,\n\t\tfooter,\n\t\theader,\n\t\teditorNotices,\n\t\tsidebar,\n\t\tsecondarySidebar,\n\t\tcontent,\n\t\tactions,\n\t\tlabels,\n\t\tclassName,\n\t},\n\tref\n) {\n\tconst [ 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\tariaLabel={ mergedLabels.header }\n\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\twhileHover={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHover'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tanimate={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeDisabled'\n\t\t\t\t\t\t\t\t\t: 'visible'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\tisDistractionFree && ! isMobileViewport\n\t\t\t\t\t\t\t\t\t? 'distractionFreeHidden'\n\t\t\t\t\t\t\t\t\t: 'hidden'\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\t\ttransition={ defaultTransition }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ header }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\n\t\t\t\t</AnimatePresence>\n\t\t\t\t{ isDistractionFree && (\n\t\t\t\t\t<div className=\"interface-interface-skeleton__header\">\n\t\t\t\t\t\t{ editorNotices }\n\t\t\t\t\t</div>\n\t\t\t\t) }\n\t\t\t\t<div className=\"interface-interface-skeleton__body\">\n\t\t\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t\t\t{ !! secondarySidebar && (\n\t\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t\t\tas={ motion.div }\n\t\t\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\t\t\tanimate=\"open\"\n\t\t\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\t\t\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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",
  "names": ["clsx", "AnimatePresence", "motion"]
}