@wordpress/interface 9.17.0 → 9.17.1-next.47f435fc9.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.
Files changed (85) hide show
  1. package/build/components/action-item/index.js +68 -66
  2. package/build/components/action-item/index.js.map +7 -1
  3. package/build/components/complementary-area/index.js +215 -194
  4. package/build/components/complementary-area/index.js.map +7 -1
  5. package/build/components/complementary-area-header/index.js +53 -33
  6. package/build/components/complementary-area-header/index.js.map +7 -1
  7. package/build/components/complementary-area-more-menu-item/index.js +60 -39
  8. package/build/components/complementary-area-more-menu-item/index.js.map +7 -1
  9. package/build/components/complementary-area-toggle/index.js +61 -50
  10. package/build/components/complementary-area-toggle/index.js.map +7 -1
  11. package/build/components/fullscreen-mode/index.js +33 -27
  12. package/build/components/fullscreen-mode/index.js.map +7 -1
  13. package/build/components/index.js +52 -55
  14. package/build/components/index.js.map +7 -1
  15. package/build/components/interface-skeleton/index.js +156 -132
  16. package/build/components/interface-skeleton/index.js.map +7 -1
  17. package/build/components/pinned-items/index.js +48 -39
  18. package/build/components/pinned-items/index.js.map +7 -1
  19. package/build/index.js +27 -24
  20. package/build/index.js.map +7 -1
  21. package/build/store/actions.js +94 -165
  22. package/build/store/actions.js.map +7 -1
  23. package/build/store/constants.js +27 -12
  24. package/build/store/constants.js.map +7 -1
  25. package/build/store/deprecated.js +55 -29
  26. package/build/store/deprecated.js.map +7 -1
  27. package/build/store/index.js +44 -32
  28. package/build/store/index.js.map +7 -1
  29. package/build/store/reducer.js +49 -51
  30. package/build/store/reducer.js.map +7 -1
  31. package/build/store/selectors.js +96 -93
  32. package/build/store/selectors.js.map +7 -1
  33. package/build-module/components/action-item/index.js +49 -59
  34. package/build-module/components/action-item/index.js.map +7 -1
  35. package/build-module/components/complementary-area/index.js +185 -174
  36. package/build-module/components/complementary-area/index.js.map +7 -1
  37. package/build-module/components/complementary-area-header/index.js +25 -26
  38. package/build-module/components/complementary-area-header/index.js.map +7 -1
  39. package/build-module/components/complementary-area-more-menu-item/index.js +33 -33
  40. package/build-module/components/complementary-area-more-menu-item/index.js.map +7 -1
  41. package/build-module/components/complementary-area-toggle/index.js +41 -44
  42. package/build-module/components/complementary-area-toggle/index.js.map +7 -1
  43. package/build-module/components/fullscreen-mode/index.js +13 -19
  44. package/build-module/components/fullscreen-mode/index.js.map +7 -1
  45. package/build-module/components/index.js +15 -8
  46. package/build-module/components/index.js.map +7 -1
  47. package/build-module/components/interface-skeleton/index.js +132 -122
  48. package/build-module/components/interface-skeleton/index.js.map +7 -1
  49. package/build-module/components/pinned-items/index.js +20 -32
  50. package/build-module/components/pinned-items/index.js.map +7 -1
  51. package/build-module/index.js +6 -3
  52. package/build-module/index.js.map +7 -1
  53. package/build-module/store/actions.js +47 -138
  54. package/build-module/store/actions.js.map +7 -1
  55. package/build-module/store/constants.js +5 -7
  56. package/build-module/store/constants.js.map +7 -1
  57. package/build-module/store/deprecated.js +21 -20
  58. package/build-module/store/deprecated.js.map +7 -1
  59. package/build-module/store/index.js +10 -22
  60. package/build-module/store/index.js.map +7 -1
  61. package/build-module/store/reducer.js +28 -45
  62. package/build-module/store/reducer.js.map +7 -1
  63. package/build-module/store/selectors.js +64 -87
  64. package/build-module/store/selectors.js.map +7 -1
  65. package/build-style/style-rtl.css +87 -85
  66. package/build-style/style.css +87 -85
  67. package/package.json +21 -15
  68. package/src/components/complementary-area/style.scss +5 -0
  69. package/src/components/complementary-area-header/style.scss +3 -0
  70. package/src/components/fullscreen-mode/style.scss +3 -0
  71. package/src/components/index.js +0 -1
  72. package/src/components/interface-skeleton/index.js +1 -5
  73. package/src/components/interface-skeleton/style.scss +6 -0
  74. package/src/components/pinned-items/style.scss +3 -0
  75. package/src/style.scss +6 -5
  76. package/build/components/index.native.js +0 -21
  77. package/build/components/index.native.js.map +0 -1
  78. package/build/components/navigable-region/index.js +0 -38
  79. package/build/components/navigable-region/index.js.map +0 -1
  80. package/build-module/components/index.native.js +0 -3
  81. package/build-module/components/index.native.js.map +0 -1
  82. package/build-module/components/navigable-region/index.js +0 -30
  83. package/build-module/components/navigable-region/index.js.map +0 -1
  84. package/src/components/navigable-region/README.md +0 -36
  85. package/src/components/navigable-region/index.js +0 -29
@@ -1,59 +1,60 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
- Object.defineProperty(exports, "__esModule", {
5
- value: true
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.default = void 0;
8
- var _clsx = _interopRequireDefault(require("clsx"));
9
- var _components = require("@wordpress/components");
10
- var _data = require("@wordpress/data");
11
- var _i18n = require("@wordpress/i18n");
12
- var _icons = require("@wordpress/icons");
13
- var _element = require("@wordpress/element");
14
- var _viewport = require("@wordpress/viewport");
15
- var _preferences = require("@wordpress/preferences");
16
- var _compose = require("@wordpress/compose");
17
- var _plugins = require("@wordpress/plugins");
18
- var _complementaryAreaHeader = _interopRequireDefault(require("../complementary-area-header"));
19
- var _complementaryAreaMoreMenuItem = _interopRequireDefault(require("../complementary-area-more-menu-item"));
20
- var _complementaryAreaToggle = _interopRequireDefault(require("../complementary-area-toggle"));
21
- var _pinnedItems = _interopRequireDefault(require("../pinned-items"));
22
- var _store = require("../../store");
23
- var _jsxRuntime = require("react/jsx-runtime");
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
- width: SIDEBAR_WIDTH
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, _compose.useReducedMotion)();
67
- const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
68
- // This is used to delay the exit animation to the next tick.
69
- // The reason this is done is to allow us to apply the right transition properties
70
- // When we switch from an open sidebar to another open sidebar.
71
- // we don't want to animate in this case.
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: 'tween',
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 /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Fill, {
84
- name: `ComplementaryArea/${scope}`,
85
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableAnimatePresence, {
86
- initial: false,
87
- children: (previousIsActive || isActive) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__unstableMotion.div, {
88
- variants: variants,
89
- initial: "closed",
90
- animate: isMobileViewport ? 'mobileOpen' : 'open',
91
- exit: "closed",
92
- transition: transition,
93
- className: "interface-complementary-area__fill",
94
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
95
- id: id,
96
- className: 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 ? '100vw' : SIDEBAR_WIDTH
95
+ width: isMobileViewport ? "100vw" : SIDEBAR_WIDTH
99
96
  },
100
- children: 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, _element.useRef)(false);
108
- const shouldOpenWhenNotSmallRef = (0, _element.useRef)(false);
109
- const {
110
- enableComplementaryArea,
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
- // If there is a flag indicating the complementary area should be
123
- // enabled when we go from small to big window size and we are going
124
- // from a small to big window size.
125
- shouldOpenWhenNotSmallRef.current && !isSmall && previousIsSmallRef.current) {
126
- // Remove the flag indicating the complementary area should be
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
- // If the flag is indicating the current complementary should be
132
- // reopened but another complementary area becomes active, remove
133
- // the flag.
134
- shouldOpenWhenNotSmallRef.current && activeArea && activeArea !== identifier) {
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
- }, [isActive, isSmall, scope, identifier, activeArea, disableComplementaryArea, enableComplementaryArea]);
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, _i18n.__)('Close plugin'),
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, _plugins.usePluginContext)();
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, _data.useSelect)(select => {
176
- const {
177
- getActiveComplementaryArea,
178
- isComplementaryAreaLoading,
179
- isItemPinned
180
- } = select(_store.store);
181
- const {
182
- get
183
- } = select(_preferences.store);
184
- const _activeArea = getActiveComplementaryArea(scope);
185
- return {
186
- isLoading: isComplementaryAreaLoading(scope),
187
- isActive: _activeArea === identifier,
188
- isPinned: isItemPinned(scope, identifier),
189
- activeArea: _activeArea,
190
- isSmall: select(_viewport.store).isViewportMatch('< medium'),
191
- isLarge: select(_viewport.store).isViewportMatch('large'),
192
- showIconLabels: get('core', 'showIconLabels')
193
- };
194
- }, [identifier, scope]);
195
- const isMobileViewport = (0, _compose.useViewportMatch)('medium', '<');
196
- useAdjustComplementaryListener(scope, identifier, activeArea, isActive, isSmall);
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, _data.useDispatch)(_store.store);
203
- (0, _element.useEffect)(() => {
204
- // Set initial visibility: For large screens, enable if it's active by
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 === undefined && isSmall) {
206
+ } else if (activeArea === void 0 && isSmall) {
209
207
  disableComplementaryArea(scope, identifier);
210
208
  }
211
209
  setIsReady(true);
212
- }, [activeArea, isActiveByDefault, scope, identifier, isSmall, enableComplementaryArea, disableComplementaryArea]);
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 /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
217
- children: [isPinnable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_pinnedItems.default, {
218
- scope: scope,
219
- children: isPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)(_complementaryAreaToggle.default, {
220
- scope: scope,
221
- identifier: 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 ? _icons.check : icon,
232
+ icon: showIconLabels ? import_icons.check : icon,
227
233
  showTooltip: !showIconLabels,
228
- variant: showIconLabels ? 'tertiary' : undefined,
234
+ variant: showIconLabels ? "tertiary" : void 0,
229
235
  size: "compact",
230
236
  shortcut: toggleShortcut
231
- })
232
- }), name && isPinnable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_complementaryAreaMoreMenuItem.default, {
233
- target: name,
234
- scope: scope,
235
- icon: icon,
236
- children: title
237
- }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(ComplementaryAreaFill, {
238
- activeArea: activeArea,
239
- isActive: isActive,
240
- className: (0, _clsx.default)('interface-complementary-area', className),
241
- scope: scope,
242
- id: identifier.replace('/', ':'),
243
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_complementaryAreaHeader.default, {
244
- className: headerClassName,
245
- closeLabel: closeLabel,
246
- onClose: () => disableComplementaryArea(scope),
247
- toggleButtonProps: {
248
- label: closeLabel,
249
- size: 'compact',
250
- shortcut: toggleShortcut,
251
- scope,
252
- identifier
253
- },
254
- children: header || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
255
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h2", {
256
- className: "interface-complementary-area-header__title",
257
- children: title
258
- }), isPinnable && !isMobileViewport && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Button, {
259
- className: "interface-complementary-area__pin-unpin-item",
260
- icon: isPinned ? _icons.starFilled : _icons.starEmpty,
261
- label: isPinned ? (0, _i18n.__)('Unpin from toolbar') : (0, _i18n.__)('Pin to toolbar'),
262
- onClick: () => (isPinned ? unpinItem : pinItem)(scope, identifier),
263
- isPressed: isPinned,
264
- "aria-expanded": isPinned,
265
- size: "compact"
266
- })]
267
- })
268
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Panel, {
269
- className: panelClassName,
270
- children: children
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 _default = exports.default = ComplementaryArea;
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
+ }