@wordpress/interface 9.17.0 → 9.17.1-next.b8c8708f3.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,59 +1,60 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
Object.
|
|
5
|
-
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __export = (target, all) => {
|
|
8
|
+
for (var name in all)
|
|
9
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
10
|
+
};
|
|
11
|
+
var __copyProps = (to, from, except, desc) => {
|
|
12
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
13
|
+
for (let key of __getOwnPropNames(from))
|
|
14
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
15
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
16
|
+
}
|
|
17
|
+
return to;
|
|
18
|
+
};
|
|
19
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
+
mod
|
|
26
|
+
));
|
|
27
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
|
+
var complementary_area_exports = {};
|
|
29
|
+
__export(complementary_area_exports, {
|
|
30
|
+
default: () => complementary_area_default
|
|
6
31
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
16
|
-
var
|
|
17
|
-
var
|
|
18
|
-
var
|
|
19
|
-
var
|
|
20
|
-
var
|
|
21
|
-
var
|
|
22
|
-
var
|
|
23
|
-
var
|
|
24
|
-
/**
|
|
25
|
-
* External dependencies
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
/**
|
|
29
|
-
* WordPress dependencies
|
|
30
|
-
*/
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Internal dependencies
|
|
34
|
-
*/
|
|
35
|
-
|
|
32
|
+
module.exports = __toCommonJS(complementary_area_exports);
|
|
33
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
34
|
+
var import_clsx = __toESM(require("clsx"));
|
|
35
|
+
var import_components = require("@wordpress/components");
|
|
36
|
+
var import_data = require("@wordpress/data");
|
|
37
|
+
var import_i18n = require("@wordpress/i18n");
|
|
38
|
+
var import_icons = require("@wordpress/icons");
|
|
39
|
+
var import_element = require("@wordpress/element");
|
|
40
|
+
var import_viewport = require("@wordpress/viewport");
|
|
41
|
+
var import_preferences = require("@wordpress/preferences");
|
|
42
|
+
var import_compose = require("@wordpress/compose");
|
|
43
|
+
var import_plugins = require("@wordpress/plugins");
|
|
44
|
+
var import_complementary_area_header = __toESM(require("../complementary-area-header"));
|
|
45
|
+
var import_complementary_area_more_menu_item = __toESM(require("../complementary-area-more-menu-item"));
|
|
46
|
+
var import_complementary_area_toggle = __toESM(require("../complementary-area-toggle"));
|
|
47
|
+
var import_pinned_items = __toESM(require("../pinned-items"));
|
|
48
|
+
var import_store = require("../../store");
|
|
36
49
|
const ANIMATION_DURATION = 0.3;
|
|
37
|
-
function ComplementaryAreaSlot({
|
|
38
|
-
scope
|
|
39
|
-
...props
|
|
40
|
-
}) {
|
|
41
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Slot, {
|
|
42
|
-
name: `ComplementaryArea/${scope}`,
|
|
43
|
-
...props
|
|
44
|
-
});
|
|
50
|
+
function ComplementaryAreaSlot({ scope, ...props }) {
|
|
51
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Slot, { name: `ComplementaryArea/${scope}`, ...props });
|
|
45
52
|
}
|
|
46
53
|
const SIDEBAR_WIDTH = 280;
|
|
47
54
|
const variants = {
|
|
48
|
-
open: {
|
|
49
|
-
|
|
50
|
-
}
|
|
51
|
-
closed: {
|
|
52
|
-
width: 0
|
|
53
|
-
},
|
|
54
|
-
mobileOpen: {
|
|
55
|
-
width: '100vw'
|
|
56
|
-
}
|
|
55
|
+
open: { width: SIDEBAR_WIDTH },
|
|
56
|
+
closed: { width: 0 },
|
|
57
|
+
mobileOpen: { width: "100vw" }
|
|
57
58
|
};
|
|
58
59
|
function ComplementaryAreaFill({
|
|
59
60
|
activeArea,
|
|
@@ -63,86 +64,83 @@ function ComplementaryAreaFill({
|
|
|
63
64
|
className,
|
|
64
65
|
id
|
|
65
66
|
}) {
|
|
66
|
-
const disableMotion = (0,
|
|
67
|
-
const isMobileViewport = (0,
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
const previousActiveArea = (0, _compose.usePrevious)(activeArea);
|
|
73
|
-
const previousIsActive = (0, _compose.usePrevious)(isActive);
|
|
74
|
-
const [, setState] = (0, _element.useState)({});
|
|
75
|
-
(0, _element.useEffect)(() => {
|
|
67
|
+
const disableMotion = (0, import_compose.useReducedMotion)();
|
|
68
|
+
const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
|
|
69
|
+
const previousActiveArea = (0, import_compose.usePrevious)(activeArea);
|
|
70
|
+
const previousIsActive = (0, import_compose.usePrevious)(isActive);
|
|
71
|
+
const [, setState] = (0, import_element.useState)({});
|
|
72
|
+
(0, import_element.useEffect)(() => {
|
|
76
73
|
setState({});
|
|
77
74
|
}, [isActive]);
|
|
78
75
|
const transition = {
|
|
79
|
-
type:
|
|
76
|
+
type: "tween",
|
|
80
77
|
duration: disableMotion || isMobileViewport || !!previousActiveArea && !!activeArea && activeArea !== previousActiveArea ? 0 : ANIMATION_DURATION,
|
|
81
78
|
ease: [0.6, 0, 0.4, 1]
|
|
82
79
|
};
|
|
83
|
-
return
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
id
|
|
96
|
-
className
|
|
80
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Fill, { name: `ComplementaryArea/${scope}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.__unstableAnimatePresence, { initial: false, children: (previousIsActive || isActive) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
81
|
+
import_components.__unstableMotion.div,
|
|
82
|
+
{
|
|
83
|
+
variants,
|
|
84
|
+
initial: "closed",
|
|
85
|
+
animate: isMobileViewport ? "mobileOpen" : "open",
|
|
86
|
+
exit: "closed",
|
|
87
|
+
transition,
|
|
88
|
+
className: "interface-complementary-area__fill",
|
|
89
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
90
|
+
"div",
|
|
91
|
+
{
|
|
92
|
+
id,
|
|
93
|
+
className,
|
|
97
94
|
style: {
|
|
98
|
-
width: isMobileViewport ?
|
|
95
|
+
width: isMobileViewport ? "100vw" : SIDEBAR_WIDTH
|
|
99
96
|
},
|
|
100
|
-
children
|
|
101
|
-
}
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
});
|
|
97
|
+
children
|
|
98
|
+
}
|
|
99
|
+
)
|
|
100
|
+
}
|
|
101
|
+
) }) });
|
|
105
102
|
}
|
|
106
103
|
function useAdjustComplementaryListener(scope, identifier, activeArea, isActive, isSmall) {
|
|
107
|
-
const previousIsSmallRef = (0,
|
|
108
|
-
const shouldOpenWhenNotSmallRef = (0,
|
|
109
|
-
const {
|
|
110
|
-
|
|
111
|
-
disableComplementaryArea
|
|
112
|
-
} = (0, _data.useDispatch)(_store.store);
|
|
113
|
-
(0, _element.useEffect)(() => {
|
|
114
|
-
// If the complementary area is active and the editor is switching from
|
|
115
|
-
// a big to a small window size.
|
|
104
|
+
const previousIsSmallRef = (0, import_element.useRef)(false);
|
|
105
|
+
const shouldOpenWhenNotSmallRef = (0, import_element.useRef)(false);
|
|
106
|
+
const { enableComplementaryArea, disableComplementaryArea } = (0, import_data.useDispatch)(import_store.store);
|
|
107
|
+
(0, import_element.useEffect)(() => {
|
|
116
108
|
if (isActive && isSmall && !previousIsSmallRef.current) {
|
|
117
109
|
disableComplementaryArea(scope);
|
|
118
|
-
// Flag the complementary area to be reopened when the window size
|
|
119
|
-
// goes from small to big.
|
|
120
110
|
shouldOpenWhenNotSmallRef.current = true;
|
|
121
111
|
} else if (
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
// enabled.
|
|
112
|
+
// If there is a flag indicating the complementary area should be
|
|
113
|
+
// enabled when we go from small to big window size and we are going
|
|
114
|
+
// from a small to big window size.
|
|
115
|
+
shouldOpenWhenNotSmallRef.current && !isSmall && previousIsSmallRef.current
|
|
116
|
+
) {
|
|
128
117
|
shouldOpenWhenNotSmallRef.current = false;
|
|
129
118
|
enableComplementaryArea(scope, identifier);
|
|
130
119
|
} else if (
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
120
|
+
// If the flag is indicating the current complementary should be
|
|
121
|
+
// reopened but another complementary area becomes active, remove
|
|
122
|
+
// the flag.
|
|
123
|
+
shouldOpenWhenNotSmallRef.current && activeArea && activeArea !== identifier
|
|
124
|
+
) {
|
|
135
125
|
shouldOpenWhenNotSmallRef.current = false;
|
|
136
126
|
}
|
|
137
127
|
if (isSmall !== previousIsSmallRef.current) {
|
|
138
128
|
previousIsSmallRef.current = isSmall;
|
|
139
129
|
}
|
|
140
|
-
}, [
|
|
130
|
+
}, [
|
|
131
|
+
isActive,
|
|
132
|
+
isSmall,
|
|
133
|
+
scope,
|
|
134
|
+
identifier,
|
|
135
|
+
activeArea,
|
|
136
|
+
disableComplementaryArea,
|
|
137
|
+
enableComplementaryArea
|
|
138
|
+
]);
|
|
141
139
|
}
|
|
142
140
|
function ComplementaryArea({
|
|
143
141
|
children,
|
|
144
142
|
className,
|
|
145
|
-
closeLabel = (0,
|
|
143
|
+
closeLabel = (0, import_i18n.__)("Close plugin"),
|
|
146
144
|
identifier: identifierProp,
|
|
147
145
|
header,
|
|
148
146
|
headerClassName,
|
|
@@ -155,15 +153,10 @@ function ComplementaryArea({
|
|
|
155
153
|
toggleShortcut,
|
|
156
154
|
isActiveByDefault
|
|
157
155
|
}) {
|
|
158
|
-
const context = (0,
|
|
156
|
+
const context = (0, import_plugins.usePluginContext)();
|
|
159
157
|
const icon = iconProp || context.icon;
|
|
160
158
|
const identifier = identifierProp || `${context.name}/${name}`;
|
|
161
|
-
|
|
162
|
-
// This state is used to delay the rendering of the Fill
|
|
163
|
-
// until the initial effect runs.
|
|
164
|
-
// This prevents the animation from running on mount if
|
|
165
|
-
// the complementary area is active by default.
|
|
166
|
-
const [isReady, setIsReady] = (0, _element.useState)(false);
|
|
159
|
+
const [isReady, setIsReady] = (0, import_element.useState)(false);
|
|
167
160
|
const {
|
|
168
161
|
isLoading,
|
|
169
162
|
isActive,
|
|
@@ -172,106 +165,134 @@ function ComplementaryArea({
|
|
|
172
165
|
isSmall,
|
|
173
166
|
isLarge,
|
|
174
167
|
showIconLabels
|
|
175
|
-
} = (0,
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
get
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
}
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
168
|
+
} = (0, import_data.useSelect)(
|
|
169
|
+
(select) => {
|
|
170
|
+
const {
|
|
171
|
+
getActiveComplementaryArea,
|
|
172
|
+
isComplementaryAreaLoading,
|
|
173
|
+
isItemPinned
|
|
174
|
+
} = select(import_store.store);
|
|
175
|
+
const { get } = select(import_preferences.store);
|
|
176
|
+
const _activeArea = getActiveComplementaryArea(scope);
|
|
177
|
+
return {
|
|
178
|
+
isLoading: isComplementaryAreaLoading(scope),
|
|
179
|
+
isActive: _activeArea === identifier,
|
|
180
|
+
isPinned: isItemPinned(scope, identifier),
|
|
181
|
+
activeArea: _activeArea,
|
|
182
|
+
isSmall: select(import_viewport.store).isViewportMatch("< medium"),
|
|
183
|
+
isLarge: select(import_viewport.store).isViewportMatch("large"),
|
|
184
|
+
showIconLabels: get("core", "showIconLabels")
|
|
185
|
+
};
|
|
186
|
+
},
|
|
187
|
+
[identifier, scope]
|
|
188
|
+
);
|
|
189
|
+
const isMobileViewport = (0, import_compose.useViewportMatch)("medium", "<");
|
|
190
|
+
useAdjustComplementaryListener(
|
|
191
|
+
scope,
|
|
192
|
+
identifier,
|
|
193
|
+
activeArea,
|
|
194
|
+
isActive,
|
|
195
|
+
isSmall
|
|
196
|
+
);
|
|
197
197
|
const {
|
|
198
198
|
enableComplementaryArea,
|
|
199
199
|
disableComplementaryArea,
|
|
200
200
|
pinItem,
|
|
201
201
|
unpinItem
|
|
202
|
-
} = (0,
|
|
203
|
-
(0,
|
|
204
|
-
|
|
205
|
-
// default. For small screens, always initially disable.
|
|
206
|
-
if (isActiveByDefault && activeArea === undefined && !isSmall) {
|
|
202
|
+
} = (0, import_data.useDispatch)(import_store.store);
|
|
203
|
+
(0, import_element.useEffect)(() => {
|
|
204
|
+
if (isActiveByDefault && activeArea === void 0 && !isSmall) {
|
|
207
205
|
enableComplementaryArea(scope, identifier);
|
|
208
|
-
} else if (activeArea ===
|
|
206
|
+
} else if (activeArea === void 0 && isSmall) {
|
|
209
207
|
disableComplementaryArea(scope, identifier);
|
|
210
208
|
}
|
|
211
209
|
setIsReady(true);
|
|
212
|
-
}, [
|
|
210
|
+
}, [
|
|
211
|
+
activeArea,
|
|
212
|
+
isActiveByDefault,
|
|
213
|
+
scope,
|
|
214
|
+
identifier,
|
|
215
|
+
isSmall,
|
|
216
|
+
enableComplementaryArea,
|
|
217
|
+
disableComplementaryArea
|
|
218
|
+
]);
|
|
213
219
|
if (!isReady) {
|
|
214
220
|
return;
|
|
215
221
|
}
|
|
216
|
-
return
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
scope
|
|
221
|
-
identifier
|
|
222
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
223
|
+
isPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pinned_items.default, { scope, children: isPinned && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
224
|
+
import_complementary_area_toggle.default,
|
|
225
|
+
{
|
|
226
|
+
scope,
|
|
227
|
+
identifier,
|
|
222
228
|
isPressed: isActive && (!showIconLabels || isLarge),
|
|
223
229
|
"aria-expanded": isActive,
|
|
224
230
|
"aria-disabled": isLoading,
|
|
225
231
|
label: title,
|
|
226
|
-
icon: showIconLabels ?
|
|
232
|
+
icon: showIconLabels ? import_icons.check : icon,
|
|
227
233
|
showTooltip: !showIconLabels,
|
|
228
|
-
variant: showIconLabels ?
|
|
234
|
+
variant: showIconLabels ? "tertiary" : void 0,
|
|
229
235
|
size: "compact",
|
|
230
236
|
shortcut: toggleShortcut
|
|
231
|
-
}
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
237
|
+
}
|
|
238
|
+
) }),
|
|
239
|
+
name && isPinnable && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
240
|
+
import_complementary_area_more_menu_item.default,
|
|
241
|
+
{
|
|
242
|
+
target: name,
|
|
243
|
+
scope,
|
|
244
|
+
icon,
|
|
245
|
+
children: title
|
|
246
|
+
}
|
|
247
|
+
),
|
|
248
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
249
|
+
ComplementaryAreaFill,
|
|
250
|
+
{
|
|
251
|
+
activeArea,
|
|
252
|
+
isActive,
|
|
253
|
+
className: (0, import_clsx.default)("interface-complementary-area", className),
|
|
254
|
+
scope,
|
|
255
|
+
id: identifier.replace("/", ":"),
|
|
256
|
+
children: [
|
|
257
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
258
|
+
import_complementary_area_header.default,
|
|
259
|
+
{
|
|
260
|
+
className: headerClassName,
|
|
261
|
+
closeLabel,
|
|
262
|
+
onClose: () => disableComplementaryArea(scope),
|
|
263
|
+
toggleButtonProps: {
|
|
264
|
+
label: closeLabel,
|
|
265
|
+
size: "compact",
|
|
266
|
+
shortcut: toggleShortcut,
|
|
267
|
+
scope,
|
|
268
|
+
identifier
|
|
269
|
+
},
|
|
270
|
+
children: header || /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
|
|
271
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "interface-complementary-area-header__title", children: title }),
|
|
272
|
+
isPinnable && !isMobileViewport && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
273
|
+
import_components.Button,
|
|
274
|
+
{
|
|
275
|
+
className: "interface-complementary-area__pin-unpin-item",
|
|
276
|
+
icon: isPinned ? import_icons.starFilled : import_icons.starEmpty,
|
|
277
|
+
label: isPinned ? (0, import_i18n.__)("Unpin from toolbar") : (0, import_i18n.__)("Pin to toolbar"),
|
|
278
|
+
onClick: () => (isPinned ? unpinItem : pinItem)(
|
|
279
|
+
scope,
|
|
280
|
+
identifier
|
|
281
|
+
),
|
|
282
|
+
isPressed: isPinned,
|
|
283
|
+
"aria-expanded": isPinned,
|
|
284
|
+
size: "compact"
|
|
285
|
+
}
|
|
286
|
+
)
|
|
287
|
+
] })
|
|
288
|
+
}
|
|
289
|
+
),
|
|
290
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Panel, { className: panelClassName, children })
|
|
291
|
+
]
|
|
292
|
+
}
|
|
293
|
+
)
|
|
294
|
+
] });
|
|
274
295
|
}
|
|
275
296
|
ComplementaryArea.Slot = ComplementaryAreaSlot;
|
|
276
|
-
var
|
|
277
|
-
//# sourceMappingURL=index.js.map
|
|
297
|
+
var complementary_area_default = ComplementaryArea;
|
|
298
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{"version":3,"names":["_clsx","_interopRequireDefault","require","_components","_data","_i18n","_icons","_element","_viewport","_preferences","_compose","_plugins","_complementaryAreaHeader","_complementaryAreaMoreMenuItem","_complementaryAreaToggle","_pinnedItems","_store","_jsxRuntime","ANIMATION_DURATION","ComplementaryAreaSlot","scope","props","jsx","Slot","name","SIDEBAR_WIDTH","variants","open","width","closed","mobileOpen","ComplementaryAreaFill","activeArea","isActive","children","className","id","disableMotion","useReducedMotion","isMobileViewport","useViewportMatch","previousActiveArea","usePrevious","previousIsActive","setState","useState","useEffect","transition","type","duration","ease","Fill","__unstableAnimatePresence","initial","__unstableMotion","div","animate","exit","style","useAdjustComplementaryListener","identifier","isSmall","previousIsSmallRef","useRef","shouldOpenWhenNotSmallRef","enableComplementaryArea","disableComplementaryArea","useDispatch","interfaceStore","current","ComplementaryArea","closeLabel","__","identifierProp","header","headerClassName","icon","iconProp","isPinnable","panelClassName","title","toggleShortcut","isActiveByDefault","context","usePluginContext","isReady","setIsReady","isLoading","isPinned","isLarge","showIconLabels","useSelect","select","getActiveComplementaryArea","isComplementaryAreaLoading","isItemPinned","get","preferencesStore","_activeArea","viewportStore","isViewportMatch","pinItem","unpinItem","undefined","jsxs","Fragment","default","isPressed","label","check","showTooltip","variant","size","shortcut","target","clsx","replace","onClose","toggleButtonProps","Button","starFilled","starEmpty","onClick","Panel","_default","exports"],"sources":["@wordpress/interface/src/components/complementary-area/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst SIDEBAR_WIDTH = 280;\nconst variants = {\n\topen: { width: SIDEBAR_WIDTH },\n\tclosed: { width: 0 },\n\tmobileOpen: { width: '100vw' },\n};\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// This is used to delay the exit animation to the next tick.\n\t// The reason this is done is to allow us to apply the right transition properties\n\t// When we switch from an open sidebar to another open sidebar.\n\t// we don't want to animate in this case.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst previousIsActive = usePrevious( isActive );\n\tconst [ , setState ] = useState( {} );\n\tuseEffect( () => {\n\t\tsetState( {} );\n\t}, [ isActive ] );\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion ||\n\t\t\tisMobileViewport ||\n\t\t\t( !! previousActiveArea &&\n\t\t\t\t!! activeArea &&\n\t\t\t\tactiveArea !== previousActiveArea )\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t{ ( previousIsActive || isActive ) && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate={ isMobileViewport ? 'mobileOpen' : 'open' }\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t: SIDEBAR_WIDTH,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/complementary-area/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tPanel,\n\tSlot,\n\tFill,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\nimport { useDispatch, useSelect } from '@wordpress/data';\nimport { __ } from '@wordpress/i18n';\nimport { check, starEmpty, starFilled } from '@wordpress/icons';\nimport { useEffect, useRef, useState } from '@wordpress/element';\nimport { store as viewportStore } from '@wordpress/viewport';\nimport { store as preferencesStore } from '@wordpress/preferences';\nimport {\n\tuseReducedMotion,\n\tuseViewportMatch,\n\tusePrevious,\n} from '@wordpress/compose';\nimport { usePluginContext } from '@wordpress/plugins';\n\n/**\n * Internal dependencies\n */\nimport ComplementaryAreaHeader from '../complementary-area-header';\nimport ComplementaryAreaMoreMenuItem from '../complementary-area-more-menu-item';\nimport ComplementaryAreaToggle from '../complementary-area-toggle';\nimport PinnedItems from '../pinned-items';\nimport { store as interfaceStore } from '../../store';\n\nconst ANIMATION_DURATION = 0.3;\n\nfunction ComplementaryAreaSlot( { scope, ...props } ) {\n\treturn <Slot name={ `ComplementaryArea/${ scope }` } { ...props } />;\n}\n\nconst SIDEBAR_WIDTH = 280;\nconst variants = {\n\topen: { width: SIDEBAR_WIDTH },\n\tclosed: { width: 0 },\n\tmobileOpen: { width: '100vw' },\n};\n\nfunction ComplementaryAreaFill( {\n\tactiveArea,\n\tisActive,\n\tscope,\n\tchildren,\n\tclassName,\n\tid,\n} ) {\n\tconst disableMotion = useReducedMotion();\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\t// This is used to delay the exit animation to the next tick.\n\t// The reason this is done is to allow us to apply the right transition properties\n\t// When we switch from an open sidebar to another open sidebar.\n\t// we don't want to animate in this case.\n\tconst previousActiveArea = usePrevious( activeArea );\n\tconst previousIsActive = usePrevious( isActive );\n\tconst [ , setState ] = useState( {} );\n\tuseEffect( () => {\n\t\tsetState( {} );\n\t}, [ isActive ] );\n\tconst transition = {\n\t\ttype: 'tween',\n\t\tduration:\n\t\t\tdisableMotion ||\n\t\t\tisMobileViewport ||\n\t\t\t( !! previousActiveArea &&\n\t\t\t\t!! activeArea &&\n\t\t\t\tactiveArea !== previousActiveArea )\n\t\t\t\t? 0\n\t\t\t\t: ANIMATION_DURATION,\n\t\tease: [ 0.6, 0, 0.4, 1 ],\n\t};\n\n\treturn (\n\t\t<Fill name={ `ComplementaryArea/${ scope }` }>\n\t\t\t<AnimatePresence initial={ false }>\n\t\t\t\t{ ( previousIsActive || isActive ) && (\n\t\t\t\t\t<motion.div\n\t\t\t\t\t\tvariants={ variants }\n\t\t\t\t\t\tinitial=\"closed\"\n\t\t\t\t\t\tanimate={ isMobileViewport ? 'mobileOpen' : 'open' }\n\t\t\t\t\t\texit=\"closed\"\n\t\t\t\t\t\ttransition={ transition }\n\t\t\t\t\t\tclassName=\"interface-complementary-area__fill\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<div\n\t\t\t\t\t\t\tid={ id }\n\t\t\t\t\t\t\tclassName={ className }\n\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\twidth: isMobileViewport\n\t\t\t\t\t\t\t\t\t? '100vw'\n\t\t\t\t\t\t\t\t\t: SIDEBAR_WIDTH,\n\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ children }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</motion.div>\n\t\t\t\t) }\n\t\t\t</AnimatePresence>\n\t\t</Fill>\n\t);\n}\n\nfunction useAdjustComplementaryListener(\n\tscope,\n\tidentifier,\n\tactiveArea,\n\tisActive,\n\tisSmall\n) {\n\tconst previousIsSmallRef = useRef( false );\n\tconst shouldOpenWhenNotSmallRef = useRef( false );\n\tconst { enableComplementaryArea, disableComplementaryArea } =\n\t\tuseDispatch( interfaceStore );\n\tuseEffect( () => {\n\t\t// If the complementary area is active and the editor is switching from\n\t\t// a big to a small window size.\n\t\tif ( isActive && isSmall && ! previousIsSmallRef.current ) {\n\t\t\tdisableComplementaryArea( scope );\n\t\t\t// Flag the complementary area to be reopened when the window size\n\t\t\t// goes from small to big.\n\t\t\tshouldOpenWhenNotSmallRef.current = true;\n\t\t} else if (\n\t\t\t// If there is a flag indicating the complementary area should be\n\t\t\t// enabled when we go from small to big window size and we are going\n\t\t\t// from a small to big window size.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\t! isSmall &&\n\t\t\tpreviousIsSmallRef.current\n\t\t) {\n\t\t\t// Remove the flag indicating the complementary area should be\n\t\t\t// enabled.\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if (\n\t\t\t// If the flag is indicating the current complementary should be\n\t\t\t// reopened but another complementary area becomes active, remove\n\t\t\t// the flag.\n\t\t\tshouldOpenWhenNotSmallRef.current &&\n\t\t\tactiveArea &&\n\t\t\tactiveArea !== identifier\n\t\t) {\n\t\t\tshouldOpenWhenNotSmallRef.current = false;\n\t\t}\n\t\tif ( isSmall !== previousIsSmallRef.current ) {\n\t\t\tpreviousIsSmallRef.current = isSmall;\n\t\t}\n\t}, [\n\t\tisActive,\n\t\tisSmall,\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tdisableComplementaryArea,\n\t\tenableComplementaryArea,\n\t] );\n}\n\nfunction ComplementaryArea( {\n\tchildren,\n\tclassName,\n\tcloseLabel = __( 'Close plugin' ),\n\tidentifier: identifierProp,\n\theader,\n\theaderClassName,\n\ticon: iconProp,\n\tisPinnable = true,\n\tpanelClassName,\n\tscope,\n\tname,\n\ttitle,\n\ttoggleShortcut,\n\tisActiveByDefault,\n} ) {\n\tconst context = usePluginContext();\n\tconst icon = iconProp || context.icon;\n\tconst identifier = identifierProp || `${ context.name }/${ name }`;\n\n\t// This state is used to delay the rendering of the Fill\n\t// until the initial effect runs.\n\t// This prevents the animation from running on mount if\n\t// the complementary area is active by default.\n\tconst [ isReady, setIsReady ] = useState( false );\n\tconst {\n\t\tisLoading,\n\t\tisActive,\n\t\tisPinned,\n\t\tactiveArea,\n\t\tisSmall,\n\t\tisLarge,\n\t\tshowIconLabels,\n\t} = useSelect(\n\t\t( select ) => {\n\t\t\tconst {\n\t\t\t\tgetActiveComplementaryArea,\n\t\t\t\tisComplementaryAreaLoading,\n\t\t\t\tisItemPinned,\n\t\t\t} = select( interfaceStore );\n\t\t\tconst { get } = select( preferencesStore );\n\n\t\t\tconst _activeArea = getActiveComplementaryArea( scope );\n\n\t\t\treturn {\n\t\t\t\tisLoading: isComplementaryAreaLoading( scope ),\n\t\t\t\tisActive: _activeArea === identifier,\n\t\t\t\tisPinned: isItemPinned( scope, identifier ),\n\t\t\t\tactiveArea: _activeArea,\n\t\t\t\tisSmall: select( viewportStore ).isViewportMatch( '< medium' ),\n\t\t\t\tisLarge: select( viewportStore ).isViewportMatch( 'large' ),\n\t\t\t\tshowIconLabels: get( 'core', 'showIconLabels' ),\n\t\t\t};\n\t\t},\n\t\t[ identifier, scope ]\n\t);\n\n\tconst isMobileViewport = useViewportMatch( 'medium', '<' );\n\n\tuseAdjustComplementaryListener(\n\t\tscope,\n\t\tidentifier,\n\t\tactiveArea,\n\t\tisActive,\n\t\tisSmall\n\t);\n\tconst {\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t\tpinItem,\n\t\tunpinItem,\n\t} = useDispatch( interfaceStore );\n\n\tuseEffect( () => {\n\t\t// Set initial visibility: For large screens, enable if it's active by\n\t\t// default. For small screens, always initially disable.\n\t\tif ( isActiveByDefault && activeArea === undefined && ! isSmall ) {\n\t\t\tenableComplementaryArea( scope, identifier );\n\t\t} else if ( activeArea === undefined && isSmall ) {\n\t\t\tdisableComplementaryArea( scope, identifier );\n\t\t}\n\t\tsetIsReady( true );\n\t}, [\n\t\tactiveArea,\n\t\tisActiveByDefault,\n\t\tscope,\n\t\tidentifier,\n\t\tisSmall,\n\t\tenableComplementaryArea,\n\t\tdisableComplementaryArea,\n\t] );\n\n\tif ( ! isReady ) {\n\t\treturn;\n\t}\n\n\treturn (\n\t\t<>\n\t\t\t{ isPinnable && (\n\t\t\t\t<PinnedItems scope={ scope }>\n\t\t\t\t\t{ isPinned && (\n\t\t\t\t\t\t<ComplementaryAreaToggle\n\t\t\t\t\t\t\tscope={ scope }\n\t\t\t\t\t\t\tidentifier={ identifier }\n\t\t\t\t\t\t\tisPressed={\n\t\t\t\t\t\t\t\tisActive && ( ! showIconLabels || isLarge )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\taria-expanded={ isActive }\n\t\t\t\t\t\t\taria-disabled={ isLoading }\n\t\t\t\t\t\t\tlabel={ title }\n\t\t\t\t\t\t\ticon={ showIconLabels ? check : icon }\n\t\t\t\t\t\t\tshowTooltip={ ! showIconLabels }\n\t\t\t\t\t\t\tvariant={ showIconLabels ? 'tertiary' : undefined }\n\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\tshortcut={ toggleShortcut }\n\t\t\t\t\t\t/>\n\t\t\t\t\t) }\n\t\t\t\t</PinnedItems>\n\t\t\t) }\n\t\t\t{ name && isPinnable && (\n\t\t\t\t<ComplementaryAreaMoreMenuItem\n\t\t\t\t\ttarget={ name }\n\t\t\t\t\tscope={ scope }\n\t\t\t\t\ticon={ icon }\n\t\t\t\t>\n\t\t\t\t\t{ title }\n\t\t\t\t</ComplementaryAreaMoreMenuItem>\n\t\t\t) }\n\t\t\t<ComplementaryAreaFill\n\t\t\t\tactiveArea={ activeArea }\n\t\t\t\tisActive={ isActive }\n\t\t\t\tclassName={ clsx( 'interface-complementary-area', className ) }\n\t\t\t\tscope={ scope }\n\t\t\t\tid={ identifier.replace( '/', ':' ) }\n\t\t\t>\n\t\t\t\t<ComplementaryAreaHeader\n\t\t\t\t\tclassName={ headerClassName }\n\t\t\t\t\tcloseLabel={ closeLabel }\n\t\t\t\t\tonClose={ () => disableComplementaryArea( scope ) }\n\t\t\t\t\ttoggleButtonProps={ {\n\t\t\t\t\t\tlabel: closeLabel,\n\t\t\t\t\t\tsize: 'compact',\n\t\t\t\t\t\tshortcut: toggleShortcut,\n\t\t\t\t\t\tscope,\n\t\t\t\t\t\tidentifier,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ header || (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<h2 className=\"interface-complementary-area-header__title\">\n\t\t\t\t\t\t\t\t{ title }\n\t\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t\t{ isPinnable && ! isMobileViewport && (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"interface-complementary-area__pin-unpin-item\"\n\t\t\t\t\t\t\t\t\ticon={ isPinned ? starFilled : starEmpty }\n\t\t\t\t\t\t\t\t\tlabel={\n\t\t\t\t\t\t\t\t\t\tisPinned\n\t\t\t\t\t\t\t\t\t\t\t? __( 'Unpin from toolbar' )\n\t\t\t\t\t\t\t\t\t\t\t: __( 'Pin to toolbar' )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\t( isPinned ? unpinItem : pinItem )(\n\t\t\t\t\t\t\t\t\t\t\tscope,\n\t\t\t\t\t\t\t\t\t\t\tidentifier\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tisPressed={ isPinned }\n\t\t\t\t\t\t\t\t\taria-expanded={ isPinned }\n\t\t\t\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t</>\n\t\t\t\t\t) }\n\t\t\t\t</ComplementaryAreaHeader>\n\t\t\t\t<Panel className={ panelClassName }>{ children }</Panel>\n\t\t\t</ComplementaryAreaFill>\n\t\t</>\n\t);\n}\n\nComplementaryArea.Slot = ComplementaryAreaSlot;\n\nexport default ComplementaryArea;\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["AnimatePresence", "motion", "interfaceStore", "preferencesStore", "viewportStore", "PinnedItems", "ComplementaryAreaToggle", "ComplementaryAreaMoreMenuItem", "clsx", "ComplementaryAreaHeader"]
|
|
7
|
+
}
|