@wordpress/interface 9.17.0 → 9.17.1-next.ff1cebbba.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/build/components/action-item/index.js +68 -66
- package/build/components/action-item/index.js.map +7 -1
- package/build/components/complementary-area/index.js +215 -194
- package/build/components/complementary-area/index.js.map +7 -1
- package/build/components/complementary-area-header/index.js +53 -33
- package/build/components/complementary-area-header/index.js.map +7 -1
- package/build/components/complementary-area-more-menu-item/index.js +60 -39
- package/build/components/complementary-area-more-menu-item/index.js.map +7 -1
- package/build/components/complementary-area-toggle/index.js +61 -50
- package/build/components/complementary-area-toggle/index.js.map +7 -1
- package/build/components/fullscreen-mode/index.js +33 -27
- package/build/components/fullscreen-mode/index.js.map +7 -1
- package/build/components/index.js +52 -55
- package/build/components/index.js.map +7 -1
- package/build/components/interface-skeleton/index.js +156 -132
- package/build/components/interface-skeleton/index.js.map +7 -1
- package/build/components/pinned-items/index.js +48 -39
- package/build/components/pinned-items/index.js.map +7 -1
- package/build/index.js +27 -24
- package/build/index.js.map +7 -1
- package/build/store/actions.js +94 -165
- package/build/store/actions.js.map +7 -1
- package/build/store/constants.js +27 -12
- package/build/store/constants.js.map +7 -1
- package/build/store/deprecated.js +55 -29
- package/build/store/deprecated.js.map +7 -1
- package/build/store/index.js +44 -32
- package/build/store/index.js.map +7 -1
- package/build/store/reducer.js +49 -51
- package/build/store/reducer.js.map +7 -1
- package/build/store/selectors.js +96 -93
- package/build/store/selectors.js.map +7 -1
- package/build-module/components/action-item/index.js +49 -59
- package/build-module/components/action-item/index.js.map +7 -1
- package/build-module/components/complementary-area/index.js +185 -174
- package/build-module/components/complementary-area/index.js.map +7 -1
- package/build-module/components/complementary-area-header/index.js +25 -26
- package/build-module/components/complementary-area-header/index.js.map +7 -1
- package/build-module/components/complementary-area-more-menu-item/index.js +33 -33
- package/build-module/components/complementary-area-more-menu-item/index.js.map +7 -1
- package/build-module/components/complementary-area-toggle/index.js +41 -44
- package/build-module/components/complementary-area-toggle/index.js.map +7 -1
- package/build-module/components/fullscreen-mode/index.js +13 -19
- package/build-module/components/fullscreen-mode/index.js.map +7 -1
- package/build-module/components/index.js +15 -8
- package/build-module/components/index.js.map +7 -1
- package/build-module/components/interface-skeleton/index.js +132 -122
- package/build-module/components/interface-skeleton/index.js.map +7 -1
- package/build-module/components/pinned-items/index.js +20 -32
- package/build-module/components/pinned-items/index.js.map +7 -1
- package/build-module/index.js +6 -3
- package/build-module/index.js.map +7 -1
- package/build-module/store/actions.js +47 -138
- package/build-module/store/actions.js.map +7 -1
- package/build-module/store/constants.js +5 -7
- package/build-module/store/constants.js.map +7 -1
- package/build-module/store/deprecated.js +21 -20
- package/build-module/store/deprecated.js.map +7 -1
- package/build-module/store/index.js +10 -22
- package/build-module/store/index.js.map +7 -1
- package/build-module/store/reducer.js +28 -45
- package/build-module/store/reducer.js.map +7 -1
- package/build-module/store/selectors.js +64 -87
- package/build-module/store/selectors.js.map +7 -1
- package/build-style/style-rtl.css +87 -85
- package/build-style/style.css +87 -85
- package/package.json +21 -15
- package/src/components/complementary-area/style.scss +5 -0
- package/src/components/complementary-area-header/style.scss +3 -0
- package/src/components/fullscreen-mode/style.scss +3 -0
- package/src/components/index.js +0 -1
- package/src/components/interface-skeleton/index.js +1 -5
- package/src/components/interface-skeleton/style.scss +6 -0
- package/src/components/pinned-items/style.scss +3 -0
- package/src/style.scss +6 -5
- package/build/components/index.native.js +0 -21
- package/build/components/index.native.js.map +0 -1
- package/build/components/navigable-region/index.js +0 -38
- package/build/components/navigable-region/index.js.map +0 -1
- package/build-module/components/index.native.js +0 -3
- package/build-module/components/index.native.js.map +0 -1
- package/build-module/components/navigable-region/index.js +0 -30
- package/build-module/components/navigable-region/index.js.map +0 -1
- package/src/components/navigable-region/README.md +0 -36
- package/src/components/navigable-region/index.js +0 -29
|
@@ -1,15 +1,8 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
|
|
7
|
-
/**
|
|
8
|
-
* Internal dependencies
|
|
9
|
-
*/
|
|
10
|
-
import ComplementaryAreaToggle from '../complementary-area-toggle';
|
|
11
|
-
import ActionItem from '../action-item';
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { check } from "@wordpress/icons";
|
|
3
|
+
import { MenuItem } from "@wordpress/components";
|
|
4
|
+
import ComplementaryAreaToggle from "../complementary-area-toggle";
|
|
5
|
+
import ActionItem from "../action-item";
|
|
13
6
|
const PluginsMenuItem = ({
|
|
14
7
|
// Menu item is marked with unstable prop for backward compatibility.
|
|
15
8
|
// They are removed so they don't leak to DOM elements.
|
|
@@ -17,30 +10,37 @@ const PluginsMenuItem = ({
|
|
|
17
10
|
__unstableExplicitMenuItem,
|
|
18
11
|
__unstableTarget,
|
|
19
12
|
...restProps
|
|
20
|
-
}) =>
|
|
21
|
-
|
|
22
|
-
});
|
|
23
|
-
export default function ComplementaryAreaMoreMenuItem({
|
|
13
|
+
}) => /* @__PURE__ */ jsx(MenuItem, { ...restProps });
|
|
14
|
+
function ComplementaryAreaMoreMenuItem({
|
|
24
15
|
scope,
|
|
25
16
|
target,
|
|
26
17
|
__unstableExplicitMenuItem,
|
|
27
18
|
...props
|
|
28
19
|
}) {
|
|
29
|
-
return
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
21
|
+
ComplementaryAreaToggle,
|
|
22
|
+
{
|
|
23
|
+
as: (toggleProps) => {
|
|
24
|
+
return /* @__PURE__ */ jsx(
|
|
25
|
+
ActionItem,
|
|
26
|
+
{
|
|
27
|
+
__unstableExplicitMenuItem,
|
|
28
|
+
__unstableTarget: `${scope}/${target}`,
|
|
29
|
+
as: PluginsMenuItem,
|
|
30
|
+
name: `${scope}/plugin-more-menu`,
|
|
31
|
+
...toggleProps
|
|
32
|
+
}
|
|
33
|
+
);
|
|
34
|
+
},
|
|
35
|
+
role: "menuitemcheckbox",
|
|
36
|
+
selectedIcon: check,
|
|
37
|
+
name: target,
|
|
38
|
+
scope,
|
|
39
|
+
...props
|
|
40
|
+
}
|
|
41
|
+
);
|
|
45
42
|
}
|
|
46
|
-
|
|
43
|
+
export {
|
|
44
|
+
ComplementaryAreaMoreMenuItem as default
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/complementary-area-more-menu-item/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { check } from '@wordpress/icons';\nimport { MenuItem } from '@wordpress/components';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport ActionItem from '../action-item';\n\nconst PluginsMenuItem = ( {\n\t// Menu item is marked with unstable prop for backward compatibility.\n\t// They are removed so they don't leak to DOM elements.\n\t// @see https://github.com/WordPress/gutenberg/issues/14457\n\t__unstableExplicitMenuItem,\n\t__unstableTarget,\n\t...restProps\n} ) => <MenuItem { ...restProps } />;\n\nexport default function ComplementaryAreaMoreMenuItem( {\n\tscope,\n\ttarget,\n\t__unstableExplicitMenuItem,\n\t...props\n} ) {\n\treturn (\n\t\t<ComplementaryAreaToggle\n\t\t\tas={ ( toggleProps ) => {\n\t\t\t\treturn (\n\t\t\t\t\t<ActionItem\n\t\t\t\t\t\t__unstableExplicitMenuItem={\n\t\t\t\t\t\t\t__unstableExplicitMenuItem\n\t\t\t\t\t\t}\n\t\t\t\t\t\t__unstableTarget={ `${ scope }/${ target }` }\n\t\t\t\t\t\tas={ PluginsMenuItem }\n\t\t\t\t\t\tname={ `${ scope }/plugin-more-menu` }\n\t\t\t\t\t\t{ ...toggleProps }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t} }\n\t\t\trole=\"menuitemcheckbox\"\n\t\t\tselectedIcon={ check }\n\t\t\tname={ target }\n\t\t\tscope={ scope }\n\t\t\t{ ...props }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "AAmBO;AAhBP,SAAS,aAAa;AACtB,SAAS,gBAAgB;AAKzB,OAAO,6BAA6B;AACpC,OAAO,gBAAgB;AAEvB,MAAM,kBAAkB,CAAE;AAAA;AAAA;AAAA;AAAA,EAIzB;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAO,oBAAC,YAAW,GAAG,WAAY;AAEnB,SAAR,8BAAgD;AAAA,EACtD;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,SACC;AAAA,IAAC;AAAA;AAAA,MACA,IAAK,CAAE,gBAAiB;AACvB,eACC;AAAA,UAAC;AAAA;AAAA,YACA;AAAA,YAGA,kBAAmB,GAAI,KAAM,IAAK,MAAO;AAAA,YACzC,IAAK;AAAA,YACL,MAAO,GAAI,KAAM;AAAA,YACf,GAAG;AAAA;AAAA,QACN;AAAA,MAEF;AAAA,MACA,MAAK;AAAA,MACL,cAAe;AAAA,MACf,MAAO;AAAA,MACP;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,27 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import { usePluginContext } from '@wordpress/plugins';
|
|
7
|
-
|
|
8
|
-
/**
|
|
9
|
-
* Internal dependencies
|
|
10
|
-
*/
|
|
11
|
-
import { store as interfaceStore } from '../../store';
|
|
12
|
-
|
|
13
|
-
/**
|
|
14
|
-
* Whether the role supports checked state.
|
|
15
|
-
*
|
|
16
|
-
* @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked
|
|
17
|
-
* @param {import('react').AriaRole} role Role.
|
|
18
|
-
* @return {boolean} Whether the role supports checked state.
|
|
19
|
-
*/
|
|
20
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "@wordpress/components";
|
|
3
|
+
import { useDispatch, useSelect } from "@wordpress/data";
|
|
4
|
+
import { usePluginContext } from "@wordpress/plugins";
|
|
5
|
+
import { store as interfaceStore } from "../../store";
|
|
21
6
|
function roleSupportsCheckedState(role) {
|
|
22
|
-
return [
|
|
7
|
+
return [
|
|
8
|
+
"checkbox",
|
|
9
|
+
"option",
|
|
10
|
+
"radio",
|
|
11
|
+
"switch",
|
|
12
|
+
"menuitemcheckbox",
|
|
13
|
+
"menuitemradio",
|
|
14
|
+
"treeitem"
|
|
15
|
+
].includes(role);
|
|
23
16
|
}
|
|
24
|
-
|
|
17
|
+
function ComplementaryAreaToggle({
|
|
25
18
|
as = Button,
|
|
26
19
|
scope,
|
|
27
20
|
identifier: identifierProp,
|
|
@@ -35,26 +28,30 @@ export default function ComplementaryAreaToggle({
|
|
|
35
28
|
const context = usePluginContext();
|
|
36
29
|
const icon = iconProp || context.icon;
|
|
37
30
|
const identifier = identifierProp || `${context.name}/${name}`;
|
|
38
|
-
const isSelected = useSelect(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} = useDispatch(interfaceStore);
|
|
43
|
-
return
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
31
|
+
const isSelected = useSelect(
|
|
32
|
+
(select) => select(interfaceStore).getActiveComplementaryArea(scope) === identifier,
|
|
33
|
+
[identifier, scope]
|
|
34
|
+
);
|
|
35
|
+
const { enableComplementaryArea, disableComplementaryArea } = useDispatch(interfaceStore);
|
|
36
|
+
return /* @__PURE__ */ jsx(
|
|
37
|
+
ComponentToUse,
|
|
38
|
+
{
|
|
39
|
+
icon: selectedIcon && isSelected ? selectedIcon : icon,
|
|
40
|
+
"aria-controls": identifier.replace("/", ":"),
|
|
41
|
+
"aria-checked": roleSupportsCheckedState(props.role) ? isSelected : void 0,
|
|
42
|
+
onClick: () => {
|
|
43
|
+
if (isSelected) {
|
|
44
|
+
disableComplementaryArea(scope);
|
|
45
|
+
} else {
|
|
46
|
+
enableComplementaryArea(scope, identifier);
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
shortcut,
|
|
50
|
+
...props
|
|
51
|
+
}
|
|
52
|
+
);
|
|
59
53
|
}
|
|
60
|
-
|
|
54
|
+
export {
|
|
55
|
+
ComplementaryAreaToggle as default
|
|
56
|
+
};
|
|
57
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/complementary-area-toggle/index.js"],
|
|
4
|
+
"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 * @see https://www.w3.org/TR/wai-aria-1.1/#aria-checked\n * @param {import('react').AriaRole} role Role.\n * @return {boolean} Whether the role supports checked state.\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"],
|
|
5
|
+
"mappings": "AAwDE;AArDF,SAAS,cAAc;AACvB,SAAS,aAAa,iBAAiB;AACvC,SAAS,wBAAwB;AAKjC,SAAS,SAAS,sBAAsB;AASxC,SAAS,yBAA0B,MAAO;AACzC,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,EAAE,SAAU,IAAK;AAClB;AAEe,SAAR,wBAA0C;AAAA,EAChD,KAAK;AAAA,EACL;AAAA,EACA,YAAY;AAAA,EACZ,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,GAAI;AACH,QAAM,iBAAiB;AACvB,QAAM,UAAU,iBAAiB;AACjC,QAAM,OAAO,YAAY,QAAQ;AACjC,QAAM,aAAa,kBAAkB,GAAI,QAAQ,IAAK,IAAK,IAAK;AAChE,QAAM,aAAa;AAAA,IAClB,CAAE,WACD,OAAQ,cAAe,EAAE,2BAA4B,KAAM,MAC3D;AAAA,IACD,CAAE,YAAY,KAAM;AAAA,EACrB;AAEA,QAAM,EAAE,yBAAyB,yBAAyB,IACzD,YAAa,cAAe;AAE7B,SACC;AAAA,IAAC;AAAA;AAAA,MACA,MAAO,gBAAgB,aAAa,eAAe;AAAA,MACnD,iBAAgB,WAAW,QAAS,KAAK,GAAI;AAAA,MAE7C,gBACC,yBAA0B,MAAM,IAAK,IAAI,aAAa;AAAA,MAEvD,SAAU,MAAM;AACf,YAAK,YAAa;AACjB,mCAA0B,KAAM;AAAA,QACjC,OAAO;AACN,kCAAyB,OAAO,UAAW;AAAA,QAC5C;AAAA,MACD;AAAA,MACA;AAAA,MACE,GAAG;AAAA;AAAA,EACN;AAEF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,39 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
*/
|
|
4
|
-
import { useEffect } from '@wordpress/element';
|
|
5
|
-
const FullscreenMode = ({
|
|
6
|
-
isActive
|
|
7
|
-
}) => {
|
|
1
|
+
import { useEffect } from "@wordpress/element";
|
|
2
|
+
const FullscreenMode = ({ isActive }) => {
|
|
8
3
|
useEffect(() => {
|
|
9
4
|
let isSticky = false;
|
|
10
|
-
|
|
11
|
-
// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled
|
|
12
|
-
// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as
|
|
13
|
-
// a consequence of the FullscreenMode setup.
|
|
14
|
-
if (document.body.classList.contains('sticky-menu')) {
|
|
5
|
+
if (document.body.classList.contains("sticky-menu")) {
|
|
15
6
|
isSticky = true;
|
|
16
|
-
document.body.classList.remove(
|
|
7
|
+
document.body.classList.remove("sticky-menu");
|
|
17
8
|
}
|
|
18
9
|
return () => {
|
|
19
10
|
if (isSticky) {
|
|
20
|
-
document.body.classList.add(
|
|
11
|
+
document.body.classList.add("sticky-menu");
|
|
21
12
|
}
|
|
22
13
|
};
|
|
23
14
|
}, []);
|
|
24
15
|
useEffect(() => {
|
|
25
16
|
if (isActive) {
|
|
26
|
-
document.body.classList.add(
|
|
17
|
+
document.body.classList.add("is-fullscreen-mode");
|
|
27
18
|
} else {
|
|
28
|
-
document.body.classList.remove(
|
|
19
|
+
document.body.classList.remove("is-fullscreen-mode");
|
|
29
20
|
}
|
|
30
21
|
return () => {
|
|
31
22
|
if (isActive) {
|
|
32
|
-
document.body.classList.remove(
|
|
23
|
+
document.body.classList.remove("is-fullscreen-mode");
|
|
33
24
|
}
|
|
34
25
|
};
|
|
35
26
|
}, [isActive]);
|
|
36
27
|
return null;
|
|
37
28
|
};
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
var fullscreen_mode_default = FullscreenMode;
|
|
30
|
+
export {
|
|
31
|
+
fullscreen_mode_default as default
|
|
32
|
+
};
|
|
33
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/fullscreen-mode/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\nconst FullscreenMode = ( { isActive } ) => {\n\tuseEffect( () => {\n\t\tlet isSticky = false;\n\t\t// `is-fullscreen-mode` is set in PHP as a body class by Gutenberg, and this causes\n\t\t// `sticky-menu` to be applied by WordPress and prevents the admin menu being scrolled\n\t\t// even if `is-fullscreen-mode` is then removed. Let's remove `sticky-menu` here as\n\t\t// a consequence of the FullscreenMode setup.\n\t\tif ( document.body.classList.contains( 'sticky-menu' ) ) {\n\t\t\tisSticky = true;\n\t\t\tdocument.body.classList.remove( 'sticky-menu' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isSticky ) {\n\t\t\t\tdocument.body.classList.add( 'sticky-menu' );\n\t\t\t}\n\t\t};\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( isActive ) {\n\t\t\tdocument.body.classList.add( 'is-fullscreen-mode' );\n\t\t} else {\n\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t}\n\n\t\treturn () => {\n\t\t\tif ( isActive ) {\n\t\t\t\tdocument.body.classList.remove( 'is-fullscreen-mode' );\n\t\t\t}\n\t\t};\n\t}, [ isActive ] );\n\n\treturn null;\n};\nexport default FullscreenMode;\n"],
|
|
5
|
+
"mappings": "AAGA,SAAS,iBAAiB;AAE1B,MAAM,iBAAiB,CAAE,EAAE,SAAS,MAAO;AAC1C,YAAW,MAAM;AAChB,QAAI,WAAW;AAKf,QAAK,SAAS,KAAK,UAAU,SAAU,aAAc,GAAI;AACxD,iBAAW;AACX,eAAS,KAAK,UAAU,OAAQ,aAAc;AAAA,IAC/C;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,IAAK,aAAc;AAAA,MAC5C;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AAEN,YAAW,MAAM;AAChB,QAAK,UAAW;AACf,eAAS,KAAK,UAAU,IAAK,oBAAqB;AAAA,IACnD,OAAO;AACN,eAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,IACtD;AAEA,WAAO,MAAM;AACZ,UAAK,UAAW;AACf,iBAAS,KAAK,UAAU,OAAQ,oBAAqB;AAAA,MACtD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,QAAS,CAAE;AAEhB,SAAO;AACR;AACA,IAAO,0BAAQ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
export {
|
|
8
|
-
|
|
1
|
+
import { default as default2 } from "./complementary-area";
|
|
2
|
+
import { default as default3 } from "./complementary-area-more-menu-item";
|
|
3
|
+
import { default as default4 } from "./fullscreen-mode";
|
|
4
|
+
import { default as default5 } from "./interface-skeleton";
|
|
5
|
+
import { default as default6 } from "./pinned-items";
|
|
6
|
+
import { default as default7 } from "./action-item";
|
|
7
|
+
export {
|
|
8
|
+
default7 as ActionItem,
|
|
9
|
+
default2 as ComplementaryArea,
|
|
10
|
+
default3 as ComplementaryAreaMoreMenuItem,
|
|
11
|
+
default4 as FullscreenMode,
|
|
12
|
+
default5 as InterfaceSkeleton,
|
|
13
|
+
default6 as PinnedItems
|
|
14
|
+
};
|
|
15
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/components/index.js"],
|
|
4
|
+
"sourcesContent": ["export { default as ComplementaryArea } from './complementary-area';\nexport { default as ComplementaryAreaMoreMenuItem } from './complementary-area-more-menu-item';\nexport { default as FullscreenMode } from './fullscreen-mode';\nexport { default as InterfaceSkeleton } from './interface-skeleton';\nexport { default as PinnedItems } from './pinned-items';\nexport { default as ActionItem } from './action-item';\n"],
|
|
5
|
+
"mappings": "AAAA,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgD;AACzD,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAA8B;AACvC,SAAoB,WAAXA,gBAA6B;",
|
|
6
|
+
"names": ["default"]
|
|
7
|
+
}
|
|
@@ -1,24 +1,20 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
import NavigableRegion from '../navigable-region';
|
|
18
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { NavigableRegion } from "@wordpress/admin-ui";
|
|
4
|
+
import { forwardRef, useEffect } from "@wordpress/element";
|
|
5
|
+
import {
|
|
6
|
+
__unstableMotion as motion,
|
|
7
|
+
__unstableAnimatePresence as AnimatePresence
|
|
8
|
+
} from "@wordpress/components";
|
|
9
|
+
import { __, _x } from "@wordpress/i18n";
|
|
10
|
+
import {
|
|
11
|
+
useReducedMotion,
|
|
12
|
+
useViewportMatch,
|
|
13
|
+
useResizeObserver
|
|
14
|
+
} from "@wordpress/compose";
|
|
19
15
|
const ANIMATION_DURATION = 0.25;
|
|
20
16
|
const commonTransition = {
|
|
21
|
-
type:
|
|
17
|
+
type: "tween",
|
|
22
18
|
duration: ANIMATION_DURATION,
|
|
23
19
|
ease: [0.6, 0, 0.4, 1]
|
|
24
20
|
};
|
|
@@ -35,14 +31,8 @@ function useHTMLClass(className) {
|
|
|
35
31
|
}, [className]);
|
|
36
32
|
}
|
|
37
33
|
const headerVariants = {
|
|
38
|
-
hidden: {
|
|
39
|
-
|
|
40
|
-
marginTop: -60
|
|
41
|
-
},
|
|
42
|
-
visible: {
|
|
43
|
-
opacity: 1,
|
|
44
|
-
marginTop: 0
|
|
45
|
-
},
|
|
34
|
+
hidden: { opacity: 1, marginTop: -60 },
|
|
35
|
+
visible: { opacity: 1, marginTop: 0 },
|
|
46
36
|
distractionFreeHover: {
|
|
47
37
|
opacity: 1,
|
|
48
38
|
marginTop: 0,
|
|
@@ -79,113 +69,133 @@ function InterfaceSkeleton({
|
|
|
79
69
|
className
|
|
80
70
|
}, ref) {
|
|
81
71
|
const [secondarySidebarResizeListener, secondarySidebarSize] = useResizeObserver();
|
|
82
|
-
const isMobileViewport = useViewportMatch(
|
|
72
|
+
const isMobileViewport = useViewportMatch("medium", "<");
|
|
83
73
|
const disableMotion = useReducedMotion();
|
|
84
74
|
const defaultTransition = {
|
|
85
|
-
type:
|
|
75
|
+
type: "tween",
|
|
86
76
|
duration: disableMotion ? 0 : ANIMATION_DURATION,
|
|
87
77
|
ease: [0.6, 0, 0.4, 1]
|
|
88
78
|
};
|
|
89
|
-
useHTMLClass(
|
|
79
|
+
useHTMLClass("interface-interface-skeleton__html-container");
|
|
90
80
|
const defaultLabels = {
|
|
91
81
|
/* translators: accessibility text for the top bar landmark region. */
|
|
92
|
-
header: _x(
|
|
82
|
+
header: _x("Header", "header landmark area"),
|
|
93
83
|
/* translators: accessibility text for the content landmark region. */
|
|
94
|
-
body: __(
|
|
84
|
+
body: __("Content"),
|
|
95
85
|
/* translators: accessibility text for the secondary sidebar landmark region. */
|
|
96
|
-
secondarySidebar: __(
|
|
86
|
+
secondarySidebar: __("Block Library"),
|
|
97
87
|
/* translators: accessibility text for the settings landmark region. */
|
|
98
|
-
sidebar: _x(
|
|
88
|
+
sidebar: _x("Settings", "settings landmark area"),
|
|
99
89
|
/* translators: accessibility text for the publish landmark region. */
|
|
100
|
-
actions: __(
|
|
90
|
+
actions: __("Publish"),
|
|
101
91
|
/* translators: accessibility text for the footer landmark region. */
|
|
102
|
-
footer: __(
|
|
103
|
-
};
|
|
104
|
-
const mergedLabels = {
|
|
105
|
-
...defaultLabels,
|
|
106
|
-
...labels
|
|
92
|
+
footer: __("Footer")
|
|
107
93
|
};
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
className: "interface-interface-skeleton__body",
|
|
132
|
-
children: [/*#__PURE__*/_jsx(AnimatePresence, {
|
|
133
|
-
initial: false,
|
|
134
|
-
children: !!secondarySidebar && /*#__PURE__*/_jsx(NavigableRegion, {
|
|
135
|
-
className: "interface-interface-skeleton__secondary-sidebar",
|
|
136
|
-
ariaLabel: mergedLabels.secondarySidebar,
|
|
137
|
-
as: motion.div,
|
|
138
|
-
initial: "closed",
|
|
139
|
-
animate: "open",
|
|
140
|
-
exit: "closed",
|
|
141
|
-
variants: {
|
|
142
|
-
open: {
|
|
143
|
-
width: secondarySidebarSize.width
|
|
144
|
-
},
|
|
145
|
-
closed: {
|
|
146
|
-
width: 0
|
|
147
|
-
}
|
|
148
|
-
},
|
|
149
|
-
transition: defaultTransition,
|
|
150
|
-
children: /*#__PURE__*/_jsxs(motion.div, {
|
|
151
|
-
style: {
|
|
152
|
-
position: 'absolute',
|
|
153
|
-
width: isMobileViewport ? '100vw' : 'fit-content',
|
|
154
|
-
height: '100%',
|
|
155
|
-
left: 0
|
|
156
|
-
},
|
|
157
|
-
variants: {
|
|
158
|
-
open: {
|
|
159
|
-
x: 0
|
|
160
|
-
},
|
|
161
|
-
closed: {
|
|
162
|
-
x: '-100%'
|
|
163
|
-
}
|
|
164
|
-
},
|
|
94
|
+
const mergedLabels = { ...defaultLabels, ...labels };
|
|
95
|
+
return /* @__PURE__ */ jsxs(
|
|
96
|
+
"div",
|
|
97
|
+
{
|
|
98
|
+
ref,
|
|
99
|
+
className: clsx(
|
|
100
|
+
className,
|
|
101
|
+
"interface-interface-skeleton",
|
|
102
|
+
!!footer && "has-footer"
|
|
103
|
+
),
|
|
104
|
+
children: [
|
|
105
|
+
/* @__PURE__ */ jsxs("div", { className: "interface-interface-skeleton__editor", children: [
|
|
106
|
+
/* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !!header && /* @__PURE__ */ jsx(
|
|
107
|
+
NavigableRegion,
|
|
108
|
+
{
|
|
109
|
+
as: motion.div,
|
|
110
|
+
className: "interface-interface-skeleton__header",
|
|
111
|
+
"aria-label": mergedLabels.header,
|
|
112
|
+
initial: isDistractionFree && !isMobileViewport ? "distractionFreeHidden" : "hidden",
|
|
113
|
+
whileHover: isDistractionFree && !isMobileViewport ? "distractionFreeHover" : "visible",
|
|
114
|
+
animate: isDistractionFree && !isMobileViewport ? "distractionFreeDisabled" : "visible",
|
|
115
|
+
exit: isDistractionFree && !isMobileViewport ? "distractionFreeHidden" : "hidden",
|
|
116
|
+
variants: headerVariants,
|
|
165
117
|
transition: defaultTransition,
|
|
166
|
-
children:
|
|
167
|
-
}
|
|
168
|
-
})
|
|
169
|
-
|
|
170
|
-
className: "interface-interface-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
118
|
+
children: header
|
|
119
|
+
}
|
|
120
|
+
) }),
|
|
121
|
+
isDistractionFree && /* @__PURE__ */ jsx("div", { className: "interface-interface-skeleton__header", children: editorNotices }),
|
|
122
|
+
/* @__PURE__ */ jsxs("div", { className: "interface-interface-skeleton__body", children: [
|
|
123
|
+
/* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: !!secondarySidebar && /* @__PURE__ */ jsx(
|
|
124
|
+
NavigableRegion,
|
|
125
|
+
{
|
|
126
|
+
className: "interface-interface-skeleton__secondary-sidebar",
|
|
127
|
+
ariaLabel: mergedLabels.secondarySidebar,
|
|
128
|
+
as: motion.div,
|
|
129
|
+
initial: "closed",
|
|
130
|
+
animate: "open",
|
|
131
|
+
exit: "closed",
|
|
132
|
+
variants: {
|
|
133
|
+
open: { width: secondarySidebarSize.width },
|
|
134
|
+
closed: { width: 0 }
|
|
135
|
+
},
|
|
136
|
+
transition: defaultTransition,
|
|
137
|
+
children: /* @__PURE__ */ jsxs(
|
|
138
|
+
motion.div,
|
|
139
|
+
{
|
|
140
|
+
style: {
|
|
141
|
+
position: "absolute",
|
|
142
|
+
width: isMobileViewport ? "100vw" : "fit-content",
|
|
143
|
+
height: "100%",
|
|
144
|
+
left: 0
|
|
145
|
+
},
|
|
146
|
+
variants: {
|
|
147
|
+
open: { x: 0 },
|
|
148
|
+
closed: { x: "-100%" }
|
|
149
|
+
},
|
|
150
|
+
transition: defaultTransition,
|
|
151
|
+
children: [
|
|
152
|
+
secondarySidebarResizeListener,
|
|
153
|
+
secondarySidebar
|
|
154
|
+
]
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
) }),
|
|
159
|
+
/* @__PURE__ */ jsx(
|
|
160
|
+
NavigableRegion,
|
|
161
|
+
{
|
|
162
|
+
className: "interface-interface-skeleton__content",
|
|
163
|
+
ariaLabel: mergedLabels.body,
|
|
164
|
+
children: content
|
|
165
|
+
}
|
|
166
|
+
),
|
|
167
|
+
!!sidebar && /* @__PURE__ */ jsx(
|
|
168
|
+
NavigableRegion,
|
|
169
|
+
{
|
|
170
|
+
className: "interface-interface-skeleton__sidebar",
|
|
171
|
+
ariaLabel: mergedLabels.sidebar,
|
|
172
|
+
children: sidebar
|
|
173
|
+
}
|
|
174
|
+
),
|
|
175
|
+
!!actions && /* @__PURE__ */ jsx(
|
|
176
|
+
NavigableRegion,
|
|
177
|
+
{
|
|
178
|
+
className: "interface-interface-skeleton__actions",
|
|
179
|
+
ariaLabel: mergedLabels.actions,
|
|
180
|
+
children: actions
|
|
181
|
+
}
|
|
182
|
+
)
|
|
183
|
+
] })
|
|
184
|
+
] }),
|
|
185
|
+
!!footer && /* @__PURE__ */ jsx(
|
|
186
|
+
NavigableRegion,
|
|
187
|
+
{
|
|
188
|
+
className: "interface-interface-skeleton__footer",
|
|
189
|
+
ariaLabel: mergedLabels.footer,
|
|
190
|
+
children: footer
|
|
191
|
+
}
|
|
192
|
+
)
|
|
193
|
+
]
|
|
194
|
+
}
|
|
195
|
+
);
|
|
189
196
|
}
|
|
190
|
-
|
|
191
|
-
|
|
197
|
+
var interface_skeleton_default = forwardRef(InterfaceSkeleton);
|
|
198
|
+
export {
|
|
199
|
+
interface_skeleton_default as default
|
|
200
|
+
};
|
|
201
|
+
//# sourceMappingURL=index.js.map
|