@wordpress/interface 4.21.0 → 5.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/build/components/interface-skeleton/index.js +10 -16
- package/build/components/interface-skeleton/index.js.map +1 -1
- package/build/components/navigable-region/index.js +3 -9
- package/build/components/navigable-region/index.js.map +1 -1
- package/build-module/components/interface-skeleton/index.js +11 -17
- package/build-module/components/interface-skeleton/index.js.map +1 -1
- package/build-module/components/navigable-region/index.js +3 -8
- package/build-module/components/navigable-region/index.js.map +1 -1
- package/build-style/style-rtl.css +19 -6
- package/build-style/style.css +19 -6
- package/package.json +15 -15
- package/src/components/interface-skeleton/index.js +11 -18
- package/src/components/interface-skeleton/style.scss +10 -8
- package/src/components/navigable-region/README.md +5 -7
- package/src/components/navigable-region/index.js +3 -9
package/CHANGELOG.md
CHANGED
|
@@ -57,18 +57,16 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
57
57
|
secondarySidebar,
|
|
58
58
|
notices,
|
|
59
59
|
content,
|
|
60
|
-
drawer,
|
|
61
60
|
actions,
|
|
62
61
|
labels,
|
|
63
62
|
className,
|
|
63
|
+
// Todo: does this need to be a prop.
|
|
64
|
+
// Can we use a dependency to keyboard-shortcuts directly?
|
|
64
65
|
shortcuts
|
|
65
66
|
} = _ref;
|
|
66
67
|
const navigateRegionsProps = (0, _components.__unstableUseNavigateRegions)(shortcuts);
|
|
67
68
|
useHTMLClass('interface-interface-skeleton__html-container');
|
|
68
69
|
const defaultLabels = {
|
|
69
|
-
/* translators: accessibility text for the nav bar landmark region. */
|
|
70
|
-
drawer: (0, _i18n.__)('Drawer'),
|
|
71
|
-
|
|
72
70
|
/* translators: accessibility text for the top bar landmark region. */
|
|
73
71
|
header: (0, _i18n.__)('Header'),
|
|
74
72
|
|
|
@@ -108,22 +106,18 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
108
106
|
return (0, _element.createElement)("div", (0, _extends2.default)({}, navigateRegionsProps, {
|
|
109
107
|
ref: (0, _compose.useMergeRefs)([ref, navigateRegionsProps.ref]),
|
|
110
108
|
className: (0, _classnames.default)(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
111
|
-
}),
|
|
112
|
-
className: "interface-interface-skeleton__drawer",
|
|
113
|
-
ariaLabel: mergedLabels.drawer
|
|
114
|
-
}, drawer), (0, _element.createElement)("div", {
|
|
109
|
+
}), (0, _element.createElement)("div", {
|
|
115
110
|
className: "interface-interface-skeleton__editor"
|
|
116
111
|
}, !!header && isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
|
|
112
|
+
as: _components.__unstableMotion.div,
|
|
117
113
|
className: "interface-interface-skeleton__header",
|
|
118
114
|
"aria-label": mergedLabels.header,
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
delay: 0.8
|
|
126
|
-
}
|
|
115
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
116
|
+
whileHover: "hover",
|
|
117
|
+
variants: headerVariants,
|
|
118
|
+
transition: {
|
|
119
|
+
type: 'tween',
|
|
120
|
+
delay: 0.8
|
|
127
121
|
}
|
|
128
122
|
}, header), !!header && !isDistractionFree && (0, _element.createElement)(_navigableRegion.default, {
|
|
129
123
|
className: "interface-interface-skeleton__header",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","motion","div"],"mappings":"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","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} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\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\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\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 navigateRegionsProps = useNavigateRegions( shortcuts );\n\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: __( 'Header' ),\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\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\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 && isDistractionFree && (\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={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\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{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\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{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\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"]}
|
|
@@ -13,29 +13,23 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
13
13
|
|
|
14
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
15
|
|
|
16
|
-
var _components = require("@wordpress/components");
|
|
17
|
-
|
|
18
16
|
/**
|
|
19
17
|
* External dependencies
|
|
20
18
|
*/
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* WordPress dependencies
|
|
24
|
-
*/
|
|
25
19
|
function NavigableRegion(_ref) {
|
|
26
20
|
let {
|
|
27
21
|
children,
|
|
28
22
|
className,
|
|
29
23
|
ariaLabel,
|
|
30
|
-
|
|
24
|
+
as: Tag = 'div',
|
|
25
|
+
...props
|
|
31
26
|
} = _ref;
|
|
32
|
-
const Tag = Object.keys(motionProps).length ? _components.__unstableMotion.div : 'div';
|
|
33
27
|
return (0, _element.createElement)(Tag, (0, _extends2.default)({
|
|
34
28
|
className: (0, _classnames.default)('interface-navigable-region', className),
|
|
35
29
|
"aria-label": ariaLabel,
|
|
36
30
|
role: "region",
|
|
37
31
|
tabIndex: "-1"
|
|
38
|
-
},
|
|
32
|
+
}, props), (0, _element.createElement)("div", {
|
|
39
33
|
className: "interface-navigable-region__stacker"
|
|
40
34
|
}, children));
|
|
41
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;;;;;;;;;;;AAGA;;AAHA;AACA;AACA;AAGe,SAASA,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,4BAAC,GAAD;AACC,IAAA,SAAS,EAAG,yBAAY,4BAAZ,EAA0CJ,SAA1C,CADb;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,QADH,CAPD,CADD;AAaA","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<div className=\"interface-navigable-region__stacker\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Tag>\n\t);\n}\n"]}
|
|
@@ -10,7 +10,7 @@ import classnames from 'classnames';
|
|
|
10
10
|
*/
|
|
11
11
|
|
|
12
12
|
import { forwardRef, useEffect } from '@wordpress/element';
|
|
13
|
-
import { __unstableUseNavigateRegions as useNavigateRegions } from '@wordpress/components';
|
|
13
|
+
import { __unstableUseNavigateRegions as useNavigateRegions, __unstableMotion as motion } from '@wordpress/components';
|
|
14
14
|
import { __ } from '@wordpress/i18n';
|
|
15
15
|
import { useMergeRefs } from '@wordpress/compose';
|
|
16
16
|
/**
|
|
@@ -44,18 +44,16 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
44
44
|
secondarySidebar,
|
|
45
45
|
notices,
|
|
46
46
|
content,
|
|
47
|
-
drawer,
|
|
48
47
|
actions,
|
|
49
48
|
labels,
|
|
50
49
|
className,
|
|
50
|
+
// Todo: does this need to be a prop.
|
|
51
|
+
// Can we use a dependency to keyboard-shortcuts directly?
|
|
51
52
|
shortcuts
|
|
52
53
|
} = _ref;
|
|
53
54
|
const navigateRegionsProps = useNavigateRegions(shortcuts);
|
|
54
55
|
useHTMLClass('interface-interface-skeleton__html-container');
|
|
55
56
|
const defaultLabels = {
|
|
56
|
-
/* translators: accessibility text for the nav bar landmark region. */
|
|
57
|
-
drawer: __('Drawer'),
|
|
58
|
-
|
|
59
57
|
/* translators: accessibility text for the top bar landmark region. */
|
|
60
58
|
header: __('Header'),
|
|
61
59
|
|
|
@@ -95,22 +93,18 @@ function InterfaceSkeleton(_ref, ref) {
|
|
|
95
93
|
return createElement("div", _extends({}, navigateRegionsProps, {
|
|
96
94
|
ref: useMergeRefs([ref, navigateRegionsProps.ref]),
|
|
97
95
|
className: classnames(className, 'interface-interface-skeleton', navigateRegionsProps.className, !!footer && 'has-footer')
|
|
98
|
-
}),
|
|
99
|
-
className: "interface-interface-skeleton__drawer",
|
|
100
|
-
ariaLabel: mergedLabels.drawer
|
|
101
|
-
}, drawer), createElement("div", {
|
|
96
|
+
}), createElement("div", {
|
|
102
97
|
className: "interface-interface-skeleton__editor"
|
|
103
98
|
}, !!header && isDistractionFree && createElement(NavigableRegion, {
|
|
99
|
+
as: motion.div,
|
|
104
100
|
className: "interface-interface-skeleton__header",
|
|
105
101
|
"aria-label": mergedLabels.header,
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
delay: 0.8
|
|
113
|
-
}
|
|
102
|
+
initial: isDistractionFree ? 'hidden' : 'hover',
|
|
103
|
+
whileHover: "hover",
|
|
104
|
+
variants: headerVariants,
|
|
105
|
+
transition: {
|
|
106
|
+
type: 'tween',
|
|
107
|
+
delay: 0.8
|
|
114
108
|
}
|
|
115
109
|
}, header), !!header && !isDistractionFree && createElement(NavigableRegion, {
|
|
116
110
|
className: "interface-interface-skeleton__header",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/interface-skeleton/index.js"],"names":["classnames","forwardRef","useEffect","__unstableUseNavigateRegions","useNavigateRegions","__unstableMotion","motion","__","useMergeRefs","NavigableRegion","useHTMLClass","className","element","document","querySelector","classList","toggle","InterfaceSkeleton","ref","isDistractionFree","footer","header","editorNotices","sidebar","secondarySidebar","notices","content","actions","labels","shortcuts","navigateRegionsProps","defaultLabels","body","mergedLabels","headerVariants","hidden","opacity","hover","transition","type","delay","delayChildren","div"],"mappings":"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","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} from '@wordpress/components';\nimport { __ } from '@wordpress/i18n';\nimport { useMergeRefs } from '@wordpress/compose';\n\n/**\n * Internal dependencies\n */\nimport NavigableRegion from '../navigable-region';\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\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\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 navigateRegionsProps = useNavigateRegions( shortcuts );\n\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: __( 'Header' ),\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\tconst headerVariants = {\n\t\thidden: isDistractionFree ? { opacity: 0 } : { opacity: 1 },\n\t\thover: {\n\t\t\topacity: 1,\n\t\t\ttransition: { type: 'tween', delay: 0.2, delayChildren: 0.2 },\n\t\t},\n\t};\n\n\treturn (\n\t\t<div\n\t\t\t{ ...navigateRegionsProps }\n\t\t\tref={ useMergeRefs( [ ref, navigateRegionsProps.ref ] ) }\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 && isDistractionFree && (\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={ isDistractionFree ? 'hidden' : 'hover' }\n\t\t\t\t\t\twhileHover=\"hover\"\n\t\t\t\t\t\tvariants={ headerVariants }\n\t\t\t\t\t\ttransition={ { type: 'tween', delay: 0.8 } }\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{ !! header && ! isDistractionFree && (\n\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\tclassName=\"interface-interface-skeleton__header\"\n\t\t\t\t\t\tariaLabel={ mergedLabels.header }\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{ !! secondarySidebar && (\n\t\t\t\t\t\t<NavigableRegion\n\t\t\t\t\t\t\tclassName=\"interface-interface-skeleton__secondary-sidebar\"\n\t\t\t\t\t\t\tariaLabel={ mergedLabels.secondarySidebar }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ secondarySidebar }\n\t\t\t\t\t\t</NavigableRegion>\n\t\t\t\t\t) }\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"]}
|
|
@@ -5,25 +5,20 @@ import { createElement } from "@wordpress/element";
|
|
|
5
5
|
* External dependencies
|
|
6
6
|
*/
|
|
7
7
|
import classnames from 'classnames';
|
|
8
|
-
/**
|
|
9
|
-
* WordPress dependencies
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
import { __unstableMotion as motion } from '@wordpress/components';
|
|
13
8
|
export default function NavigableRegion(_ref) {
|
|
14
9
|
let {
|
|
15
10
|
children,
|
|
16
11
|
className,
|
|
17
12
|
ariaLabel,
|
|
18
|
-
|
|
13
|
+
as: Tag = 'div',
|
|
14
|
+
...props
|
|
19
15
|
} = _ref;
|
|
20
|
-
const Tag = Object.keys(motionProps).length ? motion.div : 'div';
|
|
21
16
|
return createElement(Tag, _extends({
|
|
22
17
|
className: classnames('interface-navigable-region', className),
|
|
23
18
|
"aria-label": ariaLabel,
|
|
24
19
|
role: "region",
|
|
25
20
|
tabIndex: "-1"
|
|
26
|
-
},
|
|
21
|
+
}, props), createElement("div", {
|
|
27
22
|
className: "interface-navigable-region__stacker"
|
|
28
23
|
}, children));
|
|
29
24
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","
|
|
1
|
+
{"version":3,"sources":["@wordpress/interface/src/components/navigable-region/index.js"],"names":["classnames","NavigableRegion","children","className","ariaLabel","as","Tag","props"],"mappings":";;;AAAA;AACA;AACA;AACA,OAAOA,UAAP,MAAuB,YAAvB;AAEA,eAAe,SAASC,eAAT,OAMX;AAAA,MANqC;AACxCC,IAAAA,QADwC;AAExCC,IAAAA,SAFwC;AAGxCC,IAAAA,SAHwC;AAIxCC,IAAAA,EAAE,EAAEC,GAAG,GAAG,KAJ8B;AAKxC,OAAGC;AALqC,GAMrC;AACH,SACC,cAAC,GAAD;AACC,IAAA,SAAS,EAAGP,UAAU,CAAE,4BAAF,EAAgCG,SAAhC,CADvB;AAEC,kBAAaC,SAFd;AAGC,IAAA,IAAI,EAAC,QAHN;AAIC,IAAA,QAAQ,EAAC;AAJV,KAKMG,KALN,GAOC;AAAK,IAAA,SAAS,EAAC;AAAf,KACGL,QADH,CAPD,CADD;AAaA","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<div className=\"interface-navigable-region__stacker\">\n\t\t\t\t{ children }\n\t\t\t</div>\n\t\t</Tag>\n\t);\n}\n"]}
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts a hex value into the rgb equivalent.
|
|
3
|
+
*
|
|
4
|
+
* @param {string} hex - the hexadecimal value to convert
|
|
5
|
+
* @return {string} comma separated rgb values
|
|
6
|
+
*/
|
|
1
7
|
/**
|
|
2
8
|
* Colors
|
|
3
9
|
*/
|
|
@@ -11,6 +17,12 @@
|
|
|
11
17
|
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
|
12
18
|
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
|
13
19
|
*/
|
|
20
|
+
/**
|
|
21
|
+
* Converts a hex value into the rgb equivalent.
|
|
22
|
+
*
|
|
23
|
+
* @param {string} hex - the hexadecimal value to convert
|
|
24
|
+
* @return {string} comma separated rgb values
|
|
25
|
+
*/
|
|
14
26
|
/**
|
|
15
27
|
* Colors
|
|
16
28
|
*/
|
|
@@ -82,6 +94,8 @@
|
|
|
82
94
|
--wp-admin-theme-color-darker-20: #005a87;
|
|
83
95
|
--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
|
|
84
96
|
--wp-admin-border-width-focus: 2px;
|
|
97
|
+
--wp-block-synced-color: #7a00df;
|
|
98
|
+
--wp-block-synced-color--rgb: 122, 0, 223;
|
|
85
99
|
}
|
|
86
100
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
87
101
|
:root {
|
|
@@ -308,6 +322,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
308
322
|
}
|
|
309
323
|
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
310
324
|
flex-grow: 1;
|
|
325
|
+
display: flex;
|
|
326
|
+
flex-direction: column;
|
|
311
327
|
}
|
|
312
328
|
|
|
313
329
|
.interface-interface-skeleton__secondary-sidebar,
|
|
@@ -343,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
343
359
|
}
|
|
344
360
|
}
|
|
345
361
|
|
|
362
|
+
.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
|
|
363
|
+
height: 100%;
|
|
364
|
+
}
|
|
346
365
|
@media (min-width: 782px) {
|
|
347
366
|
.interface-interface-skeleton__secondary-sidebar {
|
|
348
367
|
border-left: 1px solid #e0e0e0;
|
|
@@ -400,12 +419,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
400
419
|
bottom: 0;
|
|
401
420
|
}
|
|
402
421
|
|
|
403
|
-
@media (min-width: 782px) {
|
|
404
|
-
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
|
|
405
|
-
height: calc(100% - 25px);
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
|
|
409
422
|
.interface-more-menu-dropdown {
|
|
410
423
|
margin-right: -4px;
|
|
411
424
|
}
|
package/build-style/style.css
CHANGED
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Converts a hex value into the rgb equivalent.
|
|
3
|
+
*
|
|
4
|
+
* @param {string} hex - the hexadecimal value to convert
|
|
5
|
+
* @return {string} comma separated rgb values
|
|
6
|
+
*/
|
|
1
7
|
/**
|
|
2
8
|
* Colors
|
|
3
9
|
*/
|
|
@@ -11,6 +17,12 @@
|
|
|
11
17
|
* Don't add to this sheet unless you're pretty sure the value will be reused in many places.
|
|
12
18
|
* For example, don't add rules to this sheet that affect block visuals. It's purely for UI.
|
|
13
19
|
*/
|
|
20
|
+
/**
|
|
21
|
+
* Converts a hex value into the rgb equivalent.
|
|
22
|
+
*
|
|
23
|
+
* @param {string} hex - the hexadecimal value to convert
|
|
24
|
+
* @return {string} comma separated rgb values
|
|
25
|
+
*/
|
|
14
26
|
/**
|
|
15
27
|
* Colors
|
|
16
28
|
*/
|
|
@@ -82,6 +94,8 @@
|
|
|
82
94
|
--wp-admin-theme-color-darker-20: #005a87;
|
|
83
95
|
--wp-admin-theme-color-darker-20--rgb: 0, 90, 135;
|
|
84
96
|
--wp-admin-border-width-focus: 2px;
|
|
97
|
+
--wp-block-synced-color: #7a00df;
|
|
98
|
+
--wp-block-synced-color--rgb: 122, 0, 223;
|
|
85
99
|
}
|
|
86
100
|
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
|
|
87
101
|
:root {
|
|
@@ -308,6 +322,8 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
308
322
|
}
|
|
309
323
|
.interface-interface-skeleton__content .interface-navigable-region__stacker {
|
|
310
324
|
flex-grow: 1;
|
|
325
|
+
display: flex;
|
|
326
|
+
flex-direction: column;
|
|
311
327
|
}
|
|
312
328
|
|
|
313
329
|
.interface-interface-skeleton__secondary-sidebar,
|
|
@@ -343,6 +359,9 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
343
359
|
}
|
|
344
360
|
}
|
|
345
361
|
|
|
362
|
+
.interface-interface-skeleton__secondary-sidebar .interface-navigable-region__stacker {
|
|
363
|
+
height: 100%;
|
|
364
|
+
}
|
|
346
365
|
@media (min-width: 782px) {
|
|
347
366
|
.interface-interface-skeleton__secondary-sidebar {
|
|
348
367
|
border-right: 1px solid #e0e0e0;
|
|
@@ -400,12 +419,6 @@ body.is-fullscreen-mode .interface-interface-skeleton {
|
|
|
400
419
|
bottom: 0;
|
|
401
420
|
}
|
|
402
421
|
|
|
403
|
-
@media (min-width: 782px) {
|
|
404
|
-
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
|
|
405
|
-
height: calc(100% - 25px);
|
|
406
|
-
}
|
|
407
|
-
}
|
|
408
|
-
|
|
409
422
|
.interface-more-menu-dropdown {
|
|
410
423
|
margin-left: -4px;
|
|
411
424
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wordpress/interface",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "5.0.0",
|
|
4
4
|
"description": "Interface module for WordPress. The package contains shared functionality across the modern JavaScript-based WordPress screens.",
|
|
5
5
|
"author": "The WordPress Contributors",
|
|
6
6
|
"license": "GPL-2.0-or-later",
|
|
@@ -32,25 +32,25 @@
|
|
|
32
32
|
],
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@babel/runtime": "^7.16.0",
|
|
35
|
-
"@wordpress/a11y": "^3.
|
|
36
|
-
"@wordpress/components": "^
|
|
37
|
-
"@wordpress/compose": "^
|
|
38
|
-
"@wordpress/data": "^
|
|
39
|
-
"@wordpress/deprecated": "^3.
|
|
40
|
-
"@wordpress/element": "^
|
|
41
|
-
"@wordpress/i18n": "^4.
|
|
42
|
-
"@wordpress/icons": "^9.
|
|
43
|
-
"@wordpress/plugins": "^
|
|
44
|
-
"@wordpress/preferences": "^
|
|
45
|
-
"@wordpress/viewport": "^
|
|
35
|
+
"@wordpress/a11y": "^3.23.0",
|
|
36
|
+
"@wordpress/components": "^23.0.0",
|
|
37
|
+
"@wordpress/compose": "^6.0.0",
|
|
38
|
+
"@wordpress/data": "^8.0.0",
|
|
39
|
+
"@wordpress/deprecated": "^3.23.0",
|
|
40
|
+
"@wordpress/element": "^5.0.0",
|
|
41
|
+
"@wordpress/i18n": "^4.23.0",
|
|
42
|
+
"@wordpress/icons": "^9.14.0",
|
|
43
|
+
"@wordpress/plugins": "^5.0.0",
|
|
44
|
+
"@wordpress/preferences": "^3.0.0",
|
|
45
|
+
"@wordpress/viewport": "^5.0.0",
|
|
46
46
|
"classnames": "^2.3.1"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"react": "^
|
|
50
|
-
"react-dom": "^
|
|
49
|
+
"react": "^18.0.0",
|
|
50
|
+
"react-dom": "^18.0.0"
|
|
51
51
|
},
|
|
52
52
|
"publishConfig": {
|
|
53
53
|
"access": "public"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "1eb65aabe6738097f4c062e78f69ae8f05879848"
|
|
56
56
|
}
|
|
@@ -7,7 +7,10 @@ import classnames from 'classnames';
|
|
|
7
7
|
* WordPress dependencies
|
|
8
8
|
*/
|
|
9
9
|
import { forwardRef, useEffect } from '@wordpress/element';
|
|
10
|
-
import {
|
|
10
|
+
import {
|
|
11
|
+
__unstableUseNavigateRegions as useNavigateRegions,
|
|
12
|
+
__unstableMotion as motion,
|
|
13
|
+
} from '@wordpress/components';
|
|
11
14
|
import { __ } from '@wordpress/i18n';
|
|
12
15
|
import { useMergeRefs } from '@wordpress/compose';
|
|
13
16
|
|
|
@@ -40,10 +43,11 @@ function InterfaceSkeleton(
|
|
|
40
43
|
secondarySidebar,
|
|
41
44
|
notices,
|
|
42
45
|
content,
|
|
43
|
-
drawer,
|
|
44
46
|
actions,
|
|
45
47
|
labels,
|
|
46
48
|
className,
|
|
49
|
+
// Todo: does this need to be a prop.
|
|
50
|
+
// Can we use a dependency to keyboard-shortcuts directly?
|
|
47
51
|
shortcuts,
|
|
48
52
|
},
|
|
49
53
|
ref
|
|
@@ -53,8 +57,6 @@ function InterfaceSkeleton(
|
|
|
53
57
|
useHTMLClass( 'interface-interface-skeleton__html-container' );
|
|
54
58
|
|
|
55
59
|
const defaultLabels = {
|
|
56
|
-
/* translators: accessibility text for the nav bar landmark region. */
|
|
57
|
-
drawer: __( 'Drawer' ),
|
|
58
60
|
/* translators: accessibility text for the top bar landmark region. */
|
|
59
61
|
header: __( 'Header' ),
|
|
60
62
|
/* translators: accessibility text for the content landmark region. */
|
|
@@ -90,25 +92,16 @@ function InterfaceSkeleton(
|
|
|
90
92
|
!! footer && 'has-footer'
|
|
91
93
|
) }
|
|
92
94
|
>
|
|
93
|
-
{ !! drawer && (
|
|
94
|
-
<NavigableRegion
|
|
95
|
-
className="interface-interface-skeleton__drawer"
|
|
96
|
-
ariaLabel={ mergedLabels.drawer }
|
|
97
|
-
>
|
|
98
|
-
{ drawer }
|
|
99
|
-
</NavigableRegion>
|
|
100
|
-
) }
|
|
101
95
|
<div className="interface-interface-skeleton__editor">
|
|
102
96
|
{ !! header && isDistractionFree && (
|
|
103
97
|
<NavigableRegion
|
|
98
|
+
as={ motion.div }
|
|
104
99
|
className="interface-interface-skeleton__header"
|
|
105
100
|
aria-label={ mergedLabels.header }
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
transition: { type: 'tween', delay: 0.8 },
|
|
111
|
-
} }
|
|
101
|
+
initial={ isDistractionFree ? 'hidden' : 'hover' }
|
|
102
|
+
whileHover="hover"
|
|
103
|
+
variants={ headerVariants }
|
|
104
|
+
transition={ { type: 'tween', delay: 0.8 } }
|
|
112
105
|
>
|
|
113
106
|
{ header }
|
|
114
107
|
</NavigableRegion>
|
|
@@ -73,7 +73,13 @@ html.interface-interface-skeleton__html-container {
|
|
|
73
73
|
|
|
74
74
|
.interface-interface-skeleton__content {
|
|
75
75
|
.interface-navigable-region__stacker {
|
|
76
|
+
// It's a flex item within a flex container with flex-direction column.
|
|
77
|
+
// Make sure it takes all the available height.
|
|
76
78
|
flex-grow: 1;
|
|
79
|
+
// Allow its flex items (the visual editor area) to take all the available
|
|
80
|
+
// height by making it also a flex container.
|
|
81
|
+
display: flex;
|
|
82
|
+
flex-direction: column;
|
|
77
83
|
}
|
|
78
84
|
|
|
79
85
|
flex-grow: 1;
|
|
@@ -92,7 +98,6 @@ html.interface-interface-skeleton__html-container {
|
|
|
92
98
|
// to "bleed" through the header.
|
|
93
99
|
// See https://github.com/WordPress/gutenberg/issues/32631
|
|
94
100
|
z-index: z-index(".interface-interface-skeleton__content");
|
|
95
|
-
|
|
96
101
|
}
|
|
97
102
|
|
|
98
103
|
.interface-interface-skeleton__secondary-sidebar,
|
|
@@ -130,6 +135,10 @@ html.interface-interface-skeleton__html-container {
|
|
|
130
135
|
}
|
|
131
136
|
|
|
132
137
|
.interface-interface-skeleton__secondary-sidebar {
|
|
138
|
+
.interface-navigable-region__stacker {
|
|
139
|
+
height: 100%;
|
|
140
|
+
}
|
|
141
|
+
|
|
133
142
|
@include break-medium() {
|
|
134
143
|
border-right: $border-width solid $gray-200;
|
|
135
144
|
}
|
|
@@ -188,10 +197,3 @@ html.interface-interface-skeleton__html-container {
|
|
|
188
197
|
bottom: 0;
|
|
189
198
|
}
|
|
190
199
|
}
|
|
191
|
-
|
|
192
|
-
// Footer is visible from medium so we subtract footer's height
|
|
193
|
-
.interface-interface-skeleton.has-footer .interface-interface-skeleton__drawer {
|
|
194
|
-
@include break-medium() {
|
|
195
|
-
height: calc(100% - #{$button-size-small + $border-width});
|
|
196
|
-
}
|
|
197
|
-
}
|
|
@@ -4,8 +4,6 @@
|
|
|
4
4
|
|
|
5
5
|
It also renders a child `div` element that is responsible to set a negative `z-index` stack level, to make sure the focus style is always visible, regardless of other elements that may cut-off the focus style outline otherwise.
|
|
6
6
|
|
|
7
|
-
It can use a CSS animation via the `motion` component.
|
|
8
|
-
|
|
9
7
|
## Props
|
|
10
8
|
|
|
11
9
|
### children
|
|
@@ -29,10 +27,10 @@ A meaningful name for the ARIA landmark region.
|
|
|
29
27
|
- Type: `String`
|
|
30
28
|
- Required: Yes
|
|
31
29
|
|
|
32
|
-
###
|
|
30
|
+
### as
|
|
33
31
|
|
|
34
|
-
|
|
32
|
+
The component used as the root of the region. Defaults to a `div` element.
|
|
35
33
|
|
|
36
|
-
- Type: `
|
|
37
|
-
- Required:
|
|
38
|
-
- Default: `
|
|
34
|
+
- Type: `Component`
|
|
35
|
+
- Required: no
|
|
36
|
+
- Default: `div`
|
|
@@ -3,26 +3,20 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import classnames from 'classnames';
|
|
5
5
|
|
|
6
|
-
/**
|
|
7
|
-
* WordPress dependencies
|
|
8
|
-
*/
|
|
9
|
-
import { __unstableMotion as motion } from '@wordpress/components';
|
|
10
|
-
|
|
11
6
|
export default function NavigableRegion( {
|
|
12
7
|
children,
|
|
13
8
|
className,
|
|
14
9
|
ariaLabel,
|
|
15
|
-
|
|
10
|
+
as: Tag = 'div',
|
|
11
|
+
...props
|
|
16
12
|
} ) {
|
|
17
|
-
const Tag = Object.keys( motionProps ).length ? motion.div : 'div';
|
|
18
|
-
|
|
19
13
|
return (
|
|
20
14
|
<Tag
|
|
21
15
|
className={ classnames( 'interface-navigable-region', className ) }
|
|
22
16
|
aria-label={ ariaLabel }
|
|
23
17
|
role="region"
|
|
24
18
|
tabIndex="-1"
|
|
25
|
-
{ ...
|
|
19
|
+
{ ...props }
|
|
26
20
|
>
|
|
27
21
|
<div className="interface-navigable-region__stacker">
|
|
28
22
|
{ children }
|