@wordpress/compose 8.5.0 → 8.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/build/higher-order/compose.cjs.map +2 -2
- package/build/higher-order/if-condition/index.cjs.map +2 -2
- package/build/higher-order/pure/index.cjs.map +2 -2
- package/build/higher-order/with-global-events/index.cjs.map +2 -2
- package/build/higher-order/with-instance-id/index.cjs.map +2 -2
- package/build/higher-order/with-safe-timeout/index.cjs +1 -1
- package/build/higher-order/with-safe-timeout/index.cjs.map +2 -2
- package/build/higher-order/with-state/index.cjs.map +2 -2
- package/build/hooks/use-async-list/index.cjs.map +2 -2
- package/build/hooks/use-constrained-tabbing/index.cjs.map +2 -2
- package/build/hooks/use-copy-on-click/index.cjs.map +2 -2
- package/build/hooks/use-copy-to-clipboard/index.cjs.map +2 -2
- package/build/hooks/use-debounce/index.cjs.map +2 -2
- package/build/hooks/use-debounced-input/index.cjs.map +2 -2
- package/build/hooks/use-dialog/index.cjs.map +2 -2
- package/build/hooks/use-disabled/index.cjs.map +2 -2
- package/build/hooks/use-dragging/index.cjs.map +2 -2
- package/build/hooks/use-drop-zone/index.cjs.map +2 -2
- package/build/hooks/use-event/index.cjs.map +2 -2
- package/build/hooks/use-fixed-window-list/index.cjs +98 -92
- package/build/hooks/use-fixed-window-list/index.cjs.map +3 -3
- package/build/hooks/use-focus-outside/index.cjs.map +2 -2
- package/build/hooks/use-focus-return/index.cjs.map +2 -2
- package/build/hooks/use-focusable-iframe/index.cjs.map +2 -2
- package/build/hooks/use-instance-id/index.cjs.map +2 -2
- package/build/hooks/use-isomorphic-layout-effect/index.cjs.map +2 -2
- package/build/hooks/use-keyboard-shortcut/index.cjs.map +2 -2
- package/build/hooks/use-media-query/index.cjs.map +2 -2
- package/build/hooks/use-merge-refs/index.cjs.map +2 -2
- package/build/hooks/use-observable-value/index.cjs.map +2 -2
- package/build/hooks/use-previous/index.cjs.map +2 -2
- package/build/hooks/use-reduced-motion/index.cjs.map +2 -2
- package/build/hooks/use-ref-effect/index.cjs.map +2 -2
- package/build/hooks/use-resize-observer/index.cjs.map +2 -2
- package/build/hooks/use-resize-observer/legacy/index.cjs.map +2 -2
- package/build/hooks/use-resize-observer/use-resize-observer.cjs.map +2 -2
- package/build/hooks/use-state-with-history/index.cjs.map +2 -2
- package/build/hooks/use-throttle/index.cjs.map +2 -2
- package/build/hooks/use-viewport-match/index.cjs +1 -1
- package/build/hooks/use-viewport-match/index.cjs.map +2 -2
- package/build/hooks/use-warn-on-change/index.cjs.map +2 -2
- package/build/lock-unlock.cjs.map +2 -2
- package/build/private-apis.cjs.map +2 -2
- package/build/utils/create-higher-order-component/index.cjs.map +2 -2
- package/build/utils/throttle/index.cjs.map +2 -2
- package/build-module/higher-order/compose.mjs.map +2 -2
- package/build-module/higher-order/if-condition/index.mjs.map +2 -2
- package/build-module/higher-order/pure/index.mjs.map +2 -2
- package/build-module/higher-order/with-global-events/index.mjs.map +2 -2
- package/build-module/higher-order/with-instance-id/index.mjs.map +2 -2
- package/build-module/higher-order/with-safe-timeout/index.mjs +1 -1
- package/build-module/higher-order/with-safe-timeout/index.mjs.map +2 -2
- package/build-module/higher-order/with-state/index.mjs.map +2 -2
- package/build-module/hooks/use-async-list/index.mjs.map +2 -2
- package/build-module/hooks/use-constrained-tabbing/index.mjs.map +2 -2
- package/build-module/hooks/use-copy-on-click/index.mjs.map +2 -2
- package/build-module/hooks/use-copy-to-clipboard/index.mjs.map +2 -2
- package/build-module/hooks/use-debounce/index.mjs.map +2 -2
- package/build-module/hooks/use-debounced-input/index.mjs.map +2 -2
- package/build-module/hooks/use-dialog/index.mjs.map +2 -2
- package/build-module/hooks/use-disabled/index.mjs.map +2 -2
- package/build-module/hooks/use-dragging/index.mjs.map +2 -2
- package/build-module/hooks/use-drop-zone/index.mjs.map +2 -2
- package/build-module/hooks/use-event/index.mjs.map +2 -2
- package/build-module/hooks/use-fixed-window-list/index.mjs +89 -93
- package/build-module/hooks/use-fixed-window-list/index.mjs.map +2 -2
- package/build-module/hooks/use-focus-outside/index.mjs.map +2 -2
- package/build-module/hooks/use-focus-return/index.mjs.map +2 -2
- package/build-module/hooks/use-focusable-iframe/index.mjs.map +2 -2
- package/build-module/hooks/use-instance-id/index.mjs.map +2 -2
- package/build-module/hooks/use-isomorphic-layout-effect/index.mjs.map +2 -2
- package/build-module/hooks/use-keyboard-shortcut/index.mjs.map +2 -2
- package/build-module/hooks/use-media-query/index.mjs.map +2 -2
- package/build-module/hooks/use-merge-refs/index.mjs.map +2 -2
- package/build-module/hooks/use-observable-value/index.mjs.map +2 -2
- package/build-module/hooks/use-previous/index.mjs.map +2 -2
- package/build-module/hooks/use-reduced-motion/index.mjs.map +2 -2
- package/build-module/hooks/use-ref-effect/index.mjs.map +2 -2
- package/build-module/hooks/use-resize-observer/index.mjs.map +2 -2
- package/build-module/hooks/use-resize-observer/legacy/index.mjs.map +2 -2
- package/build-module/hooks/use-resize-observer/use-resize-observer.mjs.map +2 -2
- package/build-module/hooks/use-state-with-history/index.mjs.map +2 -2
- package/build-module/hooks/use-throttle/index.mjs.map +2 -2
- package/build-module/hooks/use-viewport-match/index.mjs +1 -1
- package/build-module/hooks/use-viewport-match/index.mjs.map +2 -2
- package/build-module/hooks/use-warn-on-change/index.mjs.map +2 -2
- package/build-module/lock-unlock.mjs.map +2 -2
- package/build-module/private-apis.mjs.map +2 -2
- package/build-module/utils/create-higher-order-component/index.mjs.map +2 -2
- package/build-module/utils/throttle/index.mjs.map +2 -2
- package/build-types/higher-order/compose.d.ts.map +1 -1
- package/build-types/higher-order/if-condition/index.d.ts +0 -3
- package/build-types/higher-order/if-condition/index.d.ts.map +1 -1
- package/build-types/higher-order/pure/index.d.ts +0 -3
- package/build-types/higher-order/pure/index.d.ts.map +1 -1
- package/build-types/higher-order/with-global-events/index.d.ts.map +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts +0 -3
- package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
- package/build-types/higher-order/with-safe-timeout/index.d.ts +0 -3
- package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
- package/build-types/higher-order/with-state/index.d.ts.map +1 -1
- package/build-types/hooks/use-async-list/index.d.ts.map +1 -1
- package/build-types/hooks/use-constrained-tabbing/index.d.ts.map +1 -1
- package/build-types/hooks/use-copy-on-click/index.d.ts.map +1 -1
- package/build-types/hooks/use-copy-to-clipboard/index.d.ts.map +1 -1
- package/build-types/hooks/use-debounce/index.d.ts.map +1 -1
- package/build-types/hooks/use-debounced-input/index.d.ts.map +1 -1
- package/build-types/hooks/use-dialog/index.d.ts +0 -3
- package/build-types/hooks/use-dialog/index.d.ts.map +1 -1
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
- package/build-types/hooks/use-dragging/index.d.ts.map +1 -1
- package/build-types/hooks/use-drop-zone/index.d.ts.map +1 -1
- package/build-types/hooks/use-event/index.d.ts.map +1 -1
- package/build-types/hooks/use-fixed-window-list/index.d.ts +1 -1
- package/build-types/hooks/use-fixed-window-list/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-outside/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-return/index.d.ts.map +1 -1
- package/build-types/hooks/use-focusable-iframe/index.d.ts +0 -3
- package/build-types/hooks/use-focusable-iframe/index.d.ts.map +1 -1
- package/build-types/hooks/use-instance-id/index.d.ts.map +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts +0 -3
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts +0 -3
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
- package/build-types/hooks/use-media-query/index.d.ts.map +1 -1
- package/build-types/hooks/use-merge-refs/index.d.ts.map +1 -1
- package/build-types/hooks/use-observable-value/index.d.ts +0 -3
- package/build-types/hooks/use-observable-value/index.d.ts.map +1 -1
- package/build-types/hooks/use-previous/index.d.ts.map +1 -1
- package/build-types/hooks/use-reduced-motion/index.d.ts.map +1 -1
- package/build-types/hooks/use-ref-effect/index.d.ts +0 -3
- package/build-types/hooks/use-ref-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-resize-observer/index.d.ts +1 -4
- package/build-types/hooks/use-resize-observer/index.d.ts.map +1 -1
- package/build-types/hooks/use-resize-observer/legacy/index.d.ts +0 -3
- package/build-types/hooks/use-resize-observer/legacy/index.d.ts.map +1 -1
- package/build-types/hooks/use-resize-observer/use-resize-observer.d.ts.map +1 -1
- package/build-types/hooks/use-state-with-history/index.d.ts.map +1 -1
- package/build-types/hooks/use-throttle/index.d.ts.map +1 -1
- package/build-types/hooks/use-viewport-match/index.d.ts.map +1 -1
- package/build-types/hooks/use-warn-on-change/index.d.ts.map +1 -1
- package/build-types/lock-unlock.d.ts.map +1 -1
- package/build-types/private-apis.d.ts.map +1 -1
- package/build-types/utils/create-higher-order-component/index.d.ts.map +1 -1
- package/build-types/utils/throttle/index.d.ts +0 -39
- package/build-types/utils/throttle/index.d.ts.map +1 -1
- package/package.json +10 -10
- package/src/higher-order/compose.ts +0 -3
- package/src/higher-order/if-condition/index.tsx +0 -7
- package/src/higher-order/pure/index.tsx +0 -11
- package/src/higher-order/pure/test/index.js +0 -11
- package/src/higher-order/test/compose.ts +0 -3
- package/src/higher-order/test/pipe.ts +0 -3
- package/src/higher-order/with-global-events/index.js +0 -8
- package/src/higher-order/with-global-events/test/index.js +0 -11
- package/src/higher-order/with-global-events/test/listener.js +0 -3
- package/src/higher-order/with-instance-id/README.md +0 -3
- package/src/higher-order/with-instance-id/index.tsx +1 -4
- package/src/higher-order/with-instance-id/test/index.js +0 -7
- package/src/higher-order/with-safe-timeout/README.md +0 -3
- package/src/higher-order/with-safe-timeout/index.tsx +1 -8
- package/src/higher-order/with-state/README.md +0 -3
- package/src/higher-order/with-state/index.js +0 -7
- package/src/higher-order/with-state/test/index.js +0 -7
- package/src/hooks/use-async-list/index.ts +0 -3
- package/src/hooks/use-constrained-tabbing/index.ts +0 -7
- package/src/hooks/use-copy-on-click/index.ts +0 -7
- package/src/hooks/use-copy-on-click/test/index.tsx +0 -11
- package/src/hooks/use-copy-to-clipboard/index.ts +0 -7
- package/src/hooks/use-copy-to-clipboard/test/index.tsx +0 -7
- package/src/hooks/use-debounce/index.ts +0 -11
- package/src/hooks/use-debounced-input/index.ts +0 -7
- package/src/hooks/use-dialog/index.ts +0 -11
- package/src/hooks/use-dialog/test/index.tsx +0 -7
- package/src/hooks/use-disabled/index.ts +0 -3
- package/src/hooks/use-disabled/test/index.js +0 -11
- package/src/hooks/use-dragging/README.md +0 -3
- package/src/hooks/use-dragging/index.ts +0 -7
- package/src/hooks/use-drop-zone/index.ts +0 -3
- package/src/hooks/use-drop-zone/test/index.js +0 -11
- package/src/hooks/use-event/index.ts +0 -3
- package/src/hooks/use-fixed-window-list/index.ts +128 -116
- package/src/hooks/use-focus-outside/index.ts +0 -3
- package/src/hooks/use-focus-outside/test/index.js +0 -7
- package/src/hooks/use-focus-return/index.ts +0 -3
- package/src/hooks/use-focusable-iframe/index.ts +0 -7
- package/src/hooks/use-instance-id/README.md +0 -3
- package/src/hooks/use-instance-id/index.ts +0 -3
- package/src/hooks/use-instance-id/test/index.js +0 -7
- package/src/hooks/use-isomorphic-layout-effect/index.ts +0 -3
- package/src/hooks/use-keyboard-shortcut/index.ts +0 -7
- package/src/hooks/use-media-query/index.ts +0 -3
- package/src/hooks/use-media-query/test/index.js +0 -7
- package/src/hooks/use-media-query/test/ssr.js +0 -8
- package/src/hooks/use-merge-refs/index.ts +0 -3
- package/src/hooks/use-merge-refs/test/index.js +0 -11
- package/src/hooks/use-observable-value/index.ts +0 -7
- package/src/hooks/use-observable-value/test/index.js +0 -7
- package/src/hooks/use-previous/README.md +0 -3
- package/src/hooks/use-previous/index.ts +0 -3
- package/src/hooks/use-reduced-motion/index.ts +0 -3
- package/src/hooks/use-ref-effect/index.ts +0 -7
- package/src/hooks/use-resize-observer/index.ts +1 -7
- package/src/hooks/use-resize-observer/legacy/index.tsx +0 -10
- package/src/hooks/use-resize-observer/use-resize-observer.ts +0 -6
- package/src/hooks/use-state-with-history/index.ts +0 -3
- package/src/hooks/use-state-with-history/test/index.js +0 -7
- package/src/hooks/use-throttle/index.ts +0 -11
- package/src/hooks/use-viewport-match/index.ts +3 -8
- package/src/hooks/use-viewport-match/test/index.js +6 -15
- package/src/hooks/use-warn-on-change/index.ts +0 -3
- package/src/lock-unlock.ts +0 -3
- package/src/private-apis.ts +0 -3
- package/src/utils/create-higher-order-component/index.ts +0 -3
- package/src/utils/create-higher-order-component/test/index.js +0 -7
- package/src/utils/debounce/test/index.ts +0 -3
- package/src/utils/observable-map/test/index.js +0 -3
- package/src/utils/subscribe-delegated-listener/test/index.js +0 -3
- package/src/utils/throttle/index.ts +0 -4
- package/src/utils/throttle/test/index.ts +0 -3
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
2
3
|
var __defProp = Object.defineProperty;
|
|
3
4
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
5
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
5
7
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
8
|
var __export = (target, all) => {
|
|
7
9
|
for (var name in all)
|
|
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
15
17
|
}
|
|
16
18
|
return to;
|
|
17
19
|
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
18
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
29
|
|
|
20
30
|
// packages/compose/src/hooks/use-fixed-window-list/index.ts
|
|
@@ -26,11 +36,15 @@ module.exports = __toCommonJS(use_fixed_window_list_exports);
|
|
|
26
36
|
var import_element = require("@wordpress/element");
|
|
27
37
|
var import_dom = require("@wordpress/dom");
|
|
28
38
|
var import_keycodes = require("@wordpress/keycodes");
|
|
29
|
-
var
|
|
39
|
+
var import_use_event = __toESM(require("../use-event/index.cjs"));
|
|
30
40
|
var DEFAULT_INIT_WINDOW_SIZE = 30;
|
|
31
41
|
function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
|
|
32
|
-
const
|
|
33
|
-
|
|
42
|
+
const {
|
|
43
|
+
windowOverscan,
|
|
44
|
+
useWindowing = true,
|
|
45
|
+
initWindowSize = DEFAULT_INIT_WINDOW_SIZE,
|
|
46
|
+
expandedState
|
|
47
|
+
} = options ?? {};
|
|
34
48
|
const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)(
|
|
35
49
|
{
|
|
36
50
|
visibleItems: initWindowSize,
|
|
@@ -41,117 +55,109 @@ function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
|
|
|
41
55
|
}
|
|
42
56
|
}
|
|
43
57
|
);
|
|
44
|
-
(0, import_element.
|
|
45
|
-
|
|
58
|
+
const visibleItemsRef = (0, import_element.useRef)(initWindowSize);
|
|
59
|
+
const isFirstMeasurementRef = (0, import_element.useRef)(true);
|
|
60
|
+
const measureWindow = (0, import_use_event.default)((initRender) => {
|
|
61
|
+
const scrollContainer = (0, import_dom.getScrollContainer)(elementRef.current);
|
|
62
|
+
if (!scrollContainer) {
|
|
46
63
|
return;
|
|
47
64
|
}
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
if (!scrollContainer) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
const visibleItems = Math.ceil(
|
|
54
|
-
scrollContainer.clientHeight / itemHeight
|
|
55
|
-
);
|
|
56
|
-
const windowOverscan = initRender ? visibleItems : options?.windowOverscan ?? visibleItems;
|
|
57
|
-
const firstViewableIndex = Math.floor(
|
|
58
|
-
scrollContainer.scrollTop / itemHeight
|
|
59
|
-
);
|
|
60
|
-
const start = Math.max(0, firstViewableIndex - windowOverscan);
|
|
61
|
-
const end = Math.min(
|
|
62
|
-
totalItems - 1,
|
|
63
|
-
firstViewableIndex + visibleItems + windowOverscan
|
|
64
|
-
);
|
|
65
|
-
setFixedListWindow((lastWindow) => {
|
|
66
|
-
const nextWindow = {
|
|
67
|
-
visibleItems,
|
|
68
|
-
start,
|
|
69
|
-
end,
|
|
70
|
-
itemInView: (index) => {
|
|
71
|
-
return start <= index && index <= end;
|
|
72
|
-
}
|
|
73
|
-
};
|
|
74
|
-
if (lastWindow.start !== nextWindow.start || lastWindow.end !== nextWindow.end || lastWindow.visibleItems !== nextWindow.visibleItems) {
|
|
75
|
-
return nextWindow;
|
|
76
|
-
}
|
|
77
|
-
return lastWindow;
|
|
78
|
-
});
|
|
79
|
-
};
|
|
80
|
-
measureWindow(true);
|
|
81
|
-
const debounceMeasureList = (0, import_debounce.debounce)(() => {
|
|
82
|
-
measureWindow();
|
|
83
|
-
}, 16);
|
|
84
|
-
scrollContainer?.addEventListener("scroll", debounceMeasureList);
|
|
85
|
-
scrollContainer?.ownerDocument?.defaultView?.addEventListener(
|
|
86
|
-
"resize",
|
|
87
|
-
debounceMeasureList
|
|
65
|
+
const visibleItems = Math.ceil(
|
|
66
|
+
scrollContainer.clientHeight / itemHeight
|
|
88
67
|
);
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
68
|
+
visibleItemsRef.current = visibleItems;
|
|
69
|
+
const isFirstMeasurement = isFirstMeasurementRef.current;
|
|
70
|
+
isFirstMeasurementRef.current = false;
|
|
71
|
+
const overscan = initRender ? visibleItems : windowOverscan ?? visibleItems;
|
|
72
|
+
const firstViewableIndex = Math.floor(
|
|
73
|
+
scrollContainer.scrollTop / itemHeight
|
|
92
74
|
);
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
75
|
+
const start = Math.max(0, firstViewableIndex - overscan);
|
|
76
|
+
const end = Math.min(
|
|
77
|
+
totalItems - 1,
|
|
78
|
+
firstViewableIndex + visibleItems + overscan
|
|
79
|
+
);
|
|
80
|
+
setFixedListWindow((lastWindow) => {
|
|
81
|
+
if (lastWindow.start <= start && lastWindow.end >= end) {
|
|
82
|
+
return lastWindow;
|
|
83
|
+
}
|
|
84
|
+
if (isFirstMeasurement && lastWindow.start <= firstViewableIndex && lastWindow.end >= firstViewableIndex + visibleItems) {
|
|
85
|
+
return lastWindow;
|
|
86
|
+
}
|
|
87
|
+
return {
|
|
88
|
+
visibleItems,
|
|
89
|
+
start,
|
|
90
|
+
end,
|
|
91
|
+
itemInView: (index) => {
|
|
92
|
+
return start <= index && index <= end;
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
});
|
|
96
|
+
});
|
|
97
|
+
const handleKeyDown = (0, import_use_event.default)(
|
|
98
|
+
(event, scrollContainer) => {
|
|
117
99
|
switch (event.keyCode) {
|
|
118
100
|
case import_keycodes.HOME: {
|
|
119
|
-
return scrollContainer
|
|
101
|
+
return scrollContainer.scrollTo({ top: 0 });
|
|
120
102
|
}
|
|
121
103
|
case import_keycodes.END: {
|
|
122
|
-
return scrollContainer
|
|
104
|
+
return scrollContainer.scrollTo({
|
|
123
105
|
top: totalItems * itemHeight
|
|
124
106
|
});
|
|
125
107
|
}
|
|
126
108
|
case import_keycodes.PAGEUP: {
|
|
127
|
-
return scrollContainer
|
|
128
|
-
top: scrollContainer.scrollTop -
|
|
109
|
+
return scrollContainer.scrollTo({
|
|
110
|
+
top: scrollContainer.scrollTop - visibleItemsRef.current * itemHeight
|
|
129
111
|
});
|
|
130
112
|
}
|
|
131
113
|
case import_keycodes.PAGEDOWN: {
|
|
132
|
-
return scrollContainer
|
|
133
|
-
top: scrollContainer.scrollTop +
|
|
114
|
+
return scrollContainer.scrollTo({
|
|
115
|
+
top: scrollContainer.scrollTop + visibleItemsRef.current * itemHeight
|
|
134
116
|
});
|
|
135
117
|
}
|
|
136
118
|
}
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
(0, import_element.useLayoutEffect)(() => {
|
|
122
|
+
if (!useWindowing) {
|
|
123
|
+
return;
|
|
124
|
+
}
|
|
125
|
+
measureWindow(true);
|
|
126
|
+
}, [
|
|
127
|
+
useWindowing,
|
|
128
|
+
measureWindow,
|
|
129
|
+
itemHeight,
|
|
130
|
+
totalItems,
|
|
131
|
+
windowOverscan,
|
|
132
|
+
expandedState
|
|
133
|
+
]);
|
|
134
|
+
(0, import_element.useLayoutEffect)(() => {
|
|
135
|
+
if (!useWindowing) {
|
|
136
|
+
return;
|
|
137
|
+
}
|
|
138
|
+
const scrollContainer = (0, import_dom.getScrollContainer)(elementRef.current);
|
|
139
|
+
if (!scrollContainer) {
|
|
140
|
+
return;
|
|
141
|
+
}
|
|
142
|
+
const { defaultView } = scrollContainer.ownerDocument;
|
|
143
|
+
const onMeasure = () => measureWindow();
|
|
144
|
+
const onKeyDown = (event) => handleKeyDown(event, scrollContainer);
|
|
145
|
+
scrollContainer.addEventListener("scroll", onMeasure);
|
|
146
|
+
defaultView?.addEventListener("resize", onMeasure);
|
|
147
|
+
defaultView?.addEventListener("keydown", onKeyDown);
|
|
142
148
|
return () => {
|
|
143
|
-
scrollContainer
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
);
|
|
149
|
+
scrollContainer.removeEventListener("scroll", onMeasure);
|
|
150
|
+
defaultView?.removeEventListener("resize", onMeasure);
|
|
151
|
+
defaultView?.removeEventListener("keydown", onKeyDown);
|
|
147
152
|
};
|
|
148
153
|
}, [
|
|
149
|
-
totalItems,
|
|
150
|
-
itemHeight,
|
|
151
|
-
elementRef,
|
|
152
|
-
fixedListWindow.visibleItems,
|
|
153
154
|
useWindowing,
|
|
154
|
-
|
|
155
|
+
elementRef,
|
|
156
|
+
itemHeight,
|
|
157
|
+
totalItems,
|
|
158
|
+
expandedState,
|
|
159
|
+
measureWindow,
|
|
160
|
+
handleKeyDown
|
|
155
161
|
]);
|
|
156
162
|
return [fixedListWindow, setFixedListWindow];
|
|
157
163
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-fixed-window-list/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": []
|
|
4
|
+
"sourcesContent": ["import { useState, useLayoutEffect, useRef } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\nimport useEvent from '../use-event';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\ninterface FixedWindowList {\n\t/** Items visible in the viewport, as of the last rendered window */\n\tvisibleItems: number;\n\t/** Start index of the window */\n\tstart: number;\n\t/** End index of the window */\n\tend: number;\n\t/** Returns true if item is in the window */\n\titemInView: ( index: number ) => boolean;\n}\n\ninterface FixedWindowListOptions {\n\t/** Renders windowOverscan number of items before and after the calculated visible window. */\n\twindowOverscan?: number;\n\t/** When false avoids calculating the window size */\n\tuseWindowing?: boolean;\n\t/** Initial window size to use on first render before we can calculate the window size. */\n\tinitWindowSize?: number;\n\t/** Used to recalculate the window size when the expanded state of a list changes. */\n\texpandedState?: any;\n}\n\n/**\n *\n * @param elementRef Used to find the closest scroll container that contains element.\n * @param itemHeight Fixed item height in pixels\n * @param totalItems Total items in list\n * @param [options] Options object\n * @return Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef: React.RefObject< HTMLElement >,\n\titemHeight: number,\n\ttotalItems: number,\n\toptions?: FixedWindowListOptions\n): [\n\tFixedWindowList,\n\tReact.Dispatch< React.SetStateAction< FixedWindowList > >,\n] {\n\tconst {\n\t\twindowOverscan,\n\t\tuseWindowing = true,\n\t\tinitWindowSize = DEFAULT_INIT_WINDOW_SIZE,\n\t\texpandedState,\n\t} = options ?? {};\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState< FixedWindowList >(\n\t\t{\n\t\t\tvisibleItems: initWindowSize,\n\t\t\tstart: 0,\n\t\t\tend: initWindowSize,\n\t\t\titemInView: ( index: number ) => {\n\t\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t\t},\n\t\t}\n\t);\n\n\t// Kept out of state so that measuring the list does not, on its own, force a\n\t// re-render. Only the rendered window does that.\n\tconst visibleItemsRef = useRef( initWindowSize );\n\n\t// The measuring effect re-runs whenever the list changes, so the effect\n\t// running can't on its own tell the very first measurement from later ones.\n\tconst isFirstMeasurementRef = useRef( true );\n\n\t// Stable identity, so the listeners below never have to be re-attached, and\n\t// reads the latest props on every call.\n\tconst measureWindow = useEvent( ( initRender?: boolean ) => {\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst visibleItems = Math.ceil(\n\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t);\n\t\tvisibleItemsRef.current = visibleItems;\n\t\tconst isFirstMeasurement = isFirstMeasurementRef.current;\n\t\tisFirstMeasurementRef.current = false;\n\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\tconst overscan = initRender\n\t\t\t? visibleItems\n\t\t\t: windowOverscan ?? visibleItems;\n\t\tconst firstViewableIndex = Math.floor(\n\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t);\n\t\tconst start = Math.max( 0, firstViewableIndex - overscan );\n\t\tconst end = Math.min(\n\t\t\ttotalItems - 1,\n\t\t\tfirstViewableIndex + visibleItems + overscan\n\t\t);\n\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t// Rendering the window is the expensive part, and for the items in\n\t\t\t// `lastWindow` it is already paid for. When the next window has\n\t\t\t// nothing to add, keep the current one: a window that only shrinks\n\t\t\t// drops nodes that are known to be needed again and forces another\n\t\t\t// style recalculation, with nothing new to show for it.\n\t\t\tif ( lastWindow.start <= start && lastWindow.end >= end ) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\t// The first window is rendered before the list can be measured, so\n\t\t\t// it is sized by `initWindowSize` rather than by the viewport, and\n\t\t\t// the measured window is normally wider than it by the overscan.\n\t\t\t// Nothing has painted yet though, so there is no scrolling for the\n\t\t\t// overscan to absorb: covering the visible items is enough, and\n\t\t\t// keeping that window saves a render pass while the list opens.\n\t\t\tif (\n\t\t\t\tisFirstMeasurement &&\n\t\t\t\tlastWindow.start <= firstViewableIndex &&\n\t\t\t\tlastWindow.end >= firstViewableIndex + visibleItems\n\t\t\t) {\n\t\t\t\treturn lastWindow;\n\t\t\t}\n\t\t\treturn {\n\t\t\t\tvisibleItems,\n\t\t\t\tstart,\n\t\t\t\tend,\n\t\t\t\titemInView: ( index: number ) => {\n\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t},\n\t\t\t};\n\t\t} );\n\t} );\n\n\tconst handleKeyDown = useEvent(\n\t\t( event: KeyboardEvent, scrollContainer: Element ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tvisibleItemsRef.current * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t);\n\n\t// Measure whenever something that the window is derived from changes.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tmeasureWindow( true );\n\t}, [\n\t\tuseWindowing,\n\t\tmeasureWindow,\n\t\titemHeight,\n\t\ttotalItems,\n\t\twindowOverscan,\n\t\texpandedState,\n\t] );\n\n\t// Only ever attaches and detaches listeners. The deps are the things that\n\t// can change which element the scroll container is, or whether there is one\n\t// at all: a list that is too short to overflow has no scroll container to\n\t// attach to, and it grows into one by gaining items or by being expanded.\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tif ( ! scrollContainer ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { defaultView } = scrollContainer.ownerDocument;\n\t\t// `scroll` and `resize` already fire at about the rendering rate, so\n\t\t// there is nothing to gain from debouncing them.\n\t\tconst onMeasure = () => measureWindow();\n\t\tconst onKeyDown = ( event: KeyboardEvent ) =>\n\t\t\thandleKeyDown( event, scrollContainer );\n\n\t\tscrollContainer.addEventListener( 'scroll', onMeasure );\n\t\tdefaultView?.addEventListener( 'resize', onMeasure );\n\t\tdefaultView?.addEventListener( 'keydown', onKeyDown );\n\n\t\treturn () => {\n\t\t\tscrollContainer.removeEventListener( 'scroll', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'resize', onMeasure );\n\t\t\tdefaultView?.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [\n\t\tuseWindowing,\n\t\telementRef,\n\t\titemHeight,\n\t\ttotalItems,\n\t\texpandedState,\n\t\tmeasureWindow,\n\t\thandleKeyDown,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkD;AAClD,iBAAmC;AACnC,sBAA4C;AAC5C,uBAAqB;AAErB,IAAM,2BAA2B;AAgClB,SAAR,mBACN,YACA,YACA,YACA,SAIC;AACD,QAAM;AAAA,IACL;AAAA,IACA,eAAe;AAAA,IACf,iBAAiB;AAAA,IACjB;AAAA,EACD,IAAI,WAAW,CAAC;AAEhB,QAAM,CAAE,iBAAiB,kBAAmB,QAAI;AAAA,IAC/C;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,KAAK;AAAA,MACL,YAAY,CAAE,UAAmB;AAChC,eAAO,SAAS,KAAK,SAAS;AAAA,MAC/B;AAAA,IACD;AAAA,EACD;AAIA,QAAM,sBAAkB,uBAAQ,cAAe;AAI/C,QAAM,4BAAwB,uBAAQ,IAAK;AAI3C,QAAM,oBAAgB,iBAAAA,SAAU,CAAE,eAA0B;AAC3D,UAAM,sBAAkB,+BAAoB,WAAW,OAAQ;AAC/D,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AACA,UAAM,eAAe,KAAK;AAAA,MACzB,gBAAgB,eAAe;AAAA,IAChC;AACA,oBAAgB,UAAU;AAC1B,UAAM,qBAAqB,sBAAsB;AACjD,0BAAsB,UAAU;AAEhC,UAAM,WAAW,aACd,eACA,kBAAkB;AACrB,UAAM,qBAAqB,KAAK;AAAA,MAC/B,gBAAgB,YAAY;AAAA,IAC7B;AACA,UAAM,QAAQ,KAAK,IAAK,GAAG,qBAAqB,QAAS;AACzD,UAAM,MAAM,KAAK;AAAA,MAChB,aAAa;AAAA,MACb,qBAAqB,eAAe;AAAA,IACrC;AACA,uBAAoB,CAAE,eAAgB;AAMrC,UAAK,WAAW,SAAS,SAAS,WAAW,OAAO,KAAM;AACzD,eAAO;AAAA,MACR;AAOA,UACC,sBACA,WAAW,SAAS,sBACpB,WAAW,OAAO,qBAAqB,cACtC;AACD,eAAO;AAAA,MACR;AACA,aAAO;AAAA,QACN;AAAA,QACA;AAAA,QACA;AAAA,QACA,YAAY,CAAE,UAAmB;AAChC,iBAAO,SAAS,SAAS,SAAS;AAAA,QACnC;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH,CAAE;AAEF,QAAM,oBAAgB,iBAAAA;AAAA,IACrB,CAAE,OAAsB,oBAA8B;AACrD,cAAS,MAAM,SAAU;AAAA,QACxB,KAAK,sBAAM;AACV,iBAAO,gBAAgB,SAAU,EAAE,KAAK,EAAE,CAAE;AAAA,QAC7C;AAAA,QACA,KAAK,qBAAK;AACT,iBAAO,gBAAgB,SAAU;AAAA,YAChC,KAAK,aAAa;AAAA,UACnB,CAAE;AAAA,QACH;AAAA,QACA,KAAK,wBAAQ;AACZ,iBAAO,gBAAgB,SAAU;AAAA,YAChC,KACC,gBAAgB,YAChB,gBAAgB,UAAU;AAAA,UAC5B,CAAE;AAAA,QACH;AAAA,QACA,KAAK,0BAAU;AACd,iBAAO,gBAAgB,SAAU;AAAA,YAChC,KACC,gBAAgB,YAChB,gBAAgB,UAAU;AAAA,UAC5B,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD;AAAA,EACD;AAGA,sCAAiB,MAAM;AACtB,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AACA,kBAAe,IAAK;AAAA,EACrB,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAMF,sCAAiB,MAAM;AACtB,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AACA,UAAM,sBAAkB,+BAAoB,WAAW,OAAQ;AAC/D,QAAK,CAAE,iBAAkB;AACxB;AAAA,IACD;AACA,UAAM,EAAE,YAAY,IAAI,gBAAgB;AAGxC,UAAM,YAAY,MAAM,cAAc;AACtC,UAAM,YAAY,CAAE,UACnB,cAAe,OAAO,eAAgB;AAEvC,oBAAgB,iBAAkB,UAAU,SAAU;AACtD,iBAAa,iBAAkB,UAAU,SAAU;AACnD,iBAAa,iBAAkB,WAAW,SAAU;AAEpD,WAAO,MAAM;AACZ,sBAAgB,oBAAqB,UAAU,SAAU;AACzD,mBAAa,oBAAqB,UAAU,SAAU;AACtD,mBAAa,oBAAqB,WAAW,SAAU;AAAA,IACxD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AAEF,SAAO,CAAE,iBAAiB,kBAAmB;AAC9C;",
|
|
6
|
+
"names": ["useEvent"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-focus-outside/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutsideRef = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutsideRef.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheckRef = useRef( false );\n\n\tconst blurCheckTimeoutIdRef = useRef< number >( undefined );\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutIdRef.current );\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheckRef.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheckRef.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheckRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutIdRef.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutsideRef.current ) {\n\t\t\t\tcurrentOnFocusOutsideRef.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+C;AAM/C,IAAM,qBAAqB,CAAE,UAAU,QAAS;AAsBhD,SAAS,wBACR,aACuC;AACvC,MAAK,EAAI,uBAAuB,OAAO,cAAgB;AACtD,WAAO;AAAA,EACR;AACA,UAAS,YAAY,UAAW;AAAA,IAC/B,KAAK;AAAA,IACL,KAAK;AACJ,aAAO;AAAA,IAER,KAAK;AACJ,aAAO,mBAAmB;AAAA,QACvB,YAAkC;AAAA,MACrC;AAAA,EACF;AAEA,SAAO;AACR;AAqBe,SAAR,gBACN,gBACwB;AACxB,QAAM,+BAA2B,uBAAQ,cAAe;AACxD,gCAAW,MAAM;AAChB,6BAAyB,UAAU;AAAA,EACpC,GAAG,CAAE,cAAe,CAAE;AAEtB,QAAM,0BAAsB,uBAAQ,KAAM;AAE1C,QAAM,4BAAwB,uBAAkB,MAAU;AAK1D,QAAM,sBAAkB,4BAAa,MAAM;AAC1C,iBAAc,sBAAsB,OAAQ;AAAA,EAC7C,GAAG,CAAC,CAAE;AAGN,gCAAW,MAAM;AAChB,QAAK,CAAE,gBAAiB;AACvB,sBAAgB;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,gBAAgB,eAAgB,CAAE;AAYvC,QAAM,2BAEF,4BAAa,CAAE,UAAW;AAC7B,UAAM,EAAE,MAAM,OAAO,IAAI;AACzB,UAAM,mBAAmB,CAAE,WAAW,UAAW,EAAE,SAAU,IAAK;AAElE,QAAK,kBAAmB;AACvB,0BAAoB,UAAU;AAAA,IAC/B,WAAY,wBAAyB,MAAO,GAAI;AAC/C,0BAAoB,UAAU;AAAA,IAC/B;AAAA,EACD,GAAG,CAAC,CAAE;AASN,QAAM,qBAA0C,4BAAa,CAAE,UAAW;AAGzE,UAAM,QAAQ;AAGd,QAAK,oBAAoB,SAAU;AAClC;AAAA,IACD;AASA,UAAM,yBAAyB,MAAM,OAAO;AAAA,MAC3C;AAAA,IACD;AACA,QACC,0BACA,MAAM,eAAe,QAAS,sBAAuB,GACpD;AACD;AAAA,IACD;AAEA,0BAAsB,UAAU,WAAY,MAAM;AAKjD,UAAK,CAAE,SAAS,SAAS,GAAI;AAC5B,cAAM,eAAe;AACrB;AAAA,MACD;AAEA,UAAK,eAAe,OAAO,yBAAyB,SAAU;AAC7D,iCAAyB,QAAS,KAAM;AAAA,MACzC;AAAA,IACD,GAAG,CAAE;AAAA,EACN,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,IACN,SAAS;AAAA,IACT,aAAa;AAAA,IACb,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,QAAQ;AAAA,EACT;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-focus-return/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useRef, useEffect, useCallback } from '@wordpress/element';\n\nlet origin: Element | null = null;\n\n/**\n * Adds the unmount behavior of returning focus to the element which had it\n * previously as is expected for roles like menus or dialogs.\n *\n * @param onFocusReturn Overrides the default return behavior.\n * @return Element Ref.\n *\n * @example\n * ```ts\n * import { useFocusReturn } from '@wordpress/compose';\n *\n * const WithFocusReturn = () => {\n * const ref = useFocusReturn()\n * return (\n * <div ref={ ref }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useFocusReturn(\n\tonFocusReturn?: () => void\n): React.RefCallback< HTMLElement > {\n\tconst ref = useRef< HTMLElement | null >( null );\n\tconst focusedBeforeMountRef = useRef< Element | null >( null );\n\tconst onFocusReturnRef = useRef< ( () => void ) | undefined >(\n\t\tonFocusReturn\n\t);\n\n\tuseEffect( () => {\n\t\tonFocusReturnRef.current = onFocusReturn;\n\t}, [ onFocusReturn ] );\n\n\treturn useCallback( ( node: HTMLElement | null ) => {\n\t\tif ( node ) {\n\t\t\t// Set ref to be used when unmounting.\n\t\t\tref.current = node;\n\n\t\t\t// Only set when the node mounts.\n\t\t\tif ( focusedBeforeMountRef.current ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst activeDocument =\n\t\t\t\tnode.ownerDocument.activeElement instanceof\n\t\t\t\twindow.HTMLIFrameElement\n\t\t\t\t\t? node.ownerDocument.activeElement.contentDocument\n\t\t\t\t\t: node.ownerDocument;\n\n\t\t\tfocusedBeforeMountRef.current =\n\t\t\t\tactiveDocument?.activeElement ?? null;\n\t\t} else if ( focusedBeforeMountRef.current ) {\n\t\t\tconst isFocused = ref.current?.contains(\n\t\t\t\tref.current?.ownerDocument.activeElement ?? null\n\t\t\t);\n\n\t\t\tif ( ref.current?.isConnected && ! isFocused ) {\n\t\t\t\torigin ??= focusedBeforeMountRef.current;\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// Defer to the component's own explicit focus return behavior, if\n\t\t\t// specified. This allows for support that the `onFocusReturn`\n\t\t\t// decides to allow the default behavior to occur under some\n\t\t\t// conditions.\n\t\t\tif ( onFocusReturnRef.current ) {\n\t\t\t\tonFocusReturnRef.current();\n\t\t\t} else {\n\t\t\t\tconst elementToFocus = (\n\t\t\t\t\t! focusedBeforeMountRef.current.isConnected\n\t\t\t\t\t\t? origin\n\t\t\t\t\t\t: focusedBeforeMountRef.current\n\t\t\t\t) as HTMLElement | SVGElement | null;\n\n\t\t\t\telementToFocus?.focus();\n\t\t\t}\n\t\t\torigin = null;\n\t\t}\n\t}, [] );\n}\n\nexport default useFocusReturn;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA+C;AAE/C,IAAI,SAAyB;AAwB7B,SAAS,eACR,eACmC;AACnC,QAAM,UAAM,uBAA8B,IAAK;AAC/C,QAAM,4BAAwB,uBAA0B,IAAK;AAC7D,QAAM,uBAAmB;AAAA,IACxB;AAAA,EACD;AAEA,gCAAW,MAAM;AAChB,qBAAiB,UAAU;AAAA,EAC5B,GAAG,CAAE,aAAc,CAAE;AAErB,aAAO,4BAAa,CAAE,SAA8B;AACnD,QAAK,MAAO;AAEX,UAAI,UAAU;AAGd,UAAK,sBAAsB,SAAU;AACpC;AAAA,MACD;AAEA,YAAM,iBACL,KAAK,cAAc,yBACnB,OAAO,oBACJ,KAAK,cAAc,cAAc,kBACjC,KAAK;AAET,4BAAsB,UACrB,gBAAgB,iBAAiB;AAAA,IACnC,WAAY,sBAAsB,SAAU;AAC3C,YAAM,YAAY,IAAI,SAAS;AAAA,QAC9B,IAAI,SAAS,cAAc,iBAAiB;AAAA,MAC7C;AAEA,UAAK,IAAI,SAAS,eAAe,CAAE,WAAY;AAC9C,mBAAW,sBAAsB;AACjC;AAAA,MACD;AAMA,UAAK,iBAAiB,SAAU;AAC/B,yBAAiB,QAAQ;AAAA,MAC1B,OAAO;AACN,cAAM,iBACL,CAAE,sBAAsB,QAAQ,cAC7B,SACA,sBAAsB;AAG1B,wBAAgB,MAAM;AAAA,MACvB;AACA,eAAS;AAAA,IACV;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAEA,IAAO,2BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-focusable-iframe/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import type { RefCallback } from 'react';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Dispatches a bubbling focus event when the iframe receives focus. Use\n * `onFocus` as usual on the iframe or a parent element.\n *\n * @return Ref to pass to the iframe.\n */\nexport default function useFocusableIframe(): RefCallback< HTMLIFrameElement > {\n\treturn useRefEffect( ( element ) => {\n\t\tconst { ownerDocument } = element;\n\t\tif ( ! ownerDocument ) {\n\t\t\treturn;\n\t\t}\n\t\tconst { defaultView } = ownerDocument;\n\t\tif ( ! defaultView ) {\n\t\t\treturn;\n\t\t}\n\n\t\t/**\n\t\t * Checks whether the iframe is the activeElement, inferring that it has\n\t\t * then received focus, and dispatches a focus event.\n\t\t */\n\t\tfunction checkFocus() {\n\t\t\tif ( ownerDocument && ownerDocument.activeElement === element ) {\n\t\t\t\t( element as HTMLElement ).focus();\n\t\t\t}\n\t\t}\n\n\t\tdefaultView.addEventListener( 'blur', checkFocus );\n\t\treturn () => {\n\t\t\tdefaultView.removeEventListener( 'blur', checkFocus );\n\t\t};\n\t}, [] );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,4BAAyB;AAQV,SAAR,qBAAwE;AAC9E,aAAO,sBAAAA,SAAc,CAAE,YAAa;AACnC,UAAM,EAAE,cAAc,IAAI;AAC1B,QAAK,CAAE,eAAgB;AACtB;AAAA,IACD;AACA,UAAM,EAAE,YAAY,IAAI;AACxB,QAAK,CAAE,aAAc;AACpB;AAAA,IACD;AAMA,aAAS,aAAa;AACrB,UAAK,iBAAiB,cAAc,kBAAkB,SAAU;AAC/D,QAAE,QAAyB,MAAM;AAAA,MAClC;AAAA,IACD;AAEA,gBAAY,iBAAkB,QAAQ,UAAW;AACjD,WAAO,MAAM;AACZ,kBAAY,oBAAqB,QAAQ,UAAW;AAAA,IACrD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
|
|
6
6
|
"names": ["useRefEffect"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-instance-id/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useMemo } from '@wordpress/element';\n\nconst instanceMap = new WeakMap< object, number >();\n\n/**\n * Creates a new id for a given object.\n *\n * @param object Object reference to create an id for.\n * @return The instance id (index).\n */\nfunction createId( object: object ): number {\n\tconst instances = instanceMap.get( object ) || 0;\n\tinstanceMap.set( object, instances + 1 );\n\treturn instances;\n}\n\n/**\n * Specify the useInstanceId *function* signatures.\n *\n * More accurately, useInstanceId distinguishes between three different\n * signatures:\n *\n * 1. When only object is given, the returned value is a number\n * 2. When object and prefix is given, the returned value is a string\n * 3. When preferredId is given, the returned value is the type of preferredId\n *\n * @param object Object reference to create an id for.\n */\nfunction useInstanceId( object: object ): number;\nfunction useInstanceId( object: object, prefix: string ): string;\nfunction useInstanceId< T extends string | number >(\n\tobject: object,\n\tprefix: string,\n\tpreferredId?: T\n): T;\n\n/**\n * Provides a unique instance ID.\n *\n * @param object Object reference to create an id for.\n * @param [prefix] Prefix for the unique id.\n * @param [preferredId] Default ID to use.\n * @return The unique instance id.\n */\nfunction useInstanceId(\n\tobject: object,\n\tprefix?: string,\n\tpreferredId?: string | number\n): string | number {\n\treturn useMemo( () => {\n\t\tif ( preferredId ) {\n\t\t\treturn preferredId;\n\t\t}\n\t\tconst id = createId( object );\n\n\t\treturn prefix ? `${ prefix }-${ id }` : id;\n\t}, [ object, preferredId, prefix ] );\n}\n\nexport default useInstanceId;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAwB;AAExB,IAAM,cAAc,oBAAI,QAA0B;AAQlD,SAAS,SAAU,QAAyB;AAC3C,QAAM,YAAY,YAAY,IAAK,MAAO,KAAK;AAC/C,cAAY,IAAK,QAAQ,YAAY,CAAE;AACvC,SAAO;AACR;AA8BA,SAAS,cACR,QACA,QACA,aACkB;AAClB,aAAO,wBAAS,MAAM;AACrB,QAAK,aAAc;AAClB,aAAO;AAAA,IACR;AACA,UAAM,KAAK,SAAU,MAAO;AAE5B,WAAO,SAAS,GAAI,MAAO,IAAK,EAAG,KAAK;AAAA,EACzC,GAAG,CAAE,QAAQ,aAAa,MAAO,CAAE;AACpC;AAEA,IAAO,0BAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-isomorphic-layout-effect/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useEffect, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Preferred over direct usage of `useLayoutEffect` when supporting\n * server rendered components (SSR) because currently React\n * throws a warning when using useLayoutEffect in that environment.\n */\nconst useIsomorphicLayoutEffect =\n\ttypeof window !== 'undefined' ? useLayoutEffect : useEffect;\n\nexport default useIsomorphicLayoutEffect;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA2C;AAO3C,IAAM,4BACL,OAAO,WAAW,cAAc,iCAAkB;AAEnD,IAAO,uCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-keyboard-shortcut/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts Keyboard Shortcuts.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t ( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,mCAAO;AAGP,qBAAkC;AAClC,sBAA0B;AAkC1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACD,IAAuC,CAAC,GACvC;AACD,QAAM,yBAAqB,uBAAQ,QAAS;AAE5C,gCAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,gCAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,UAAM,YAAY,IAAI,iBAAAA;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA,QAIL;AAAA;AAAA,IACN;AAEA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AAEf,mBAAe,QAAS,CAAE,aAAsB;AAC/C,YAAM,OAAO,SAAS,MAAO,GAAI;AACjC,YAAM,YAAY,IAAI;AAAA,QACrB,KAAK,OAAQ,CAAE,UAAW,MAAM,SAAS,CAAE;AAAA,MAC5C;AACA,YAAM,SAAS,UAAU,IAAK,KAAM;AACpC,YAAM,WAAW,UAAU,IAAK,OAAQ;AAExC,cACC,2BAAU,MACN,UAAU,SAAS,KAAK,UACzB,UAAU,SAAS,KAAK,UAAU,WACpC;AACD,cAAM,IAAI;AAAA,UACT,eAAgB,QAAS;AAAA,QAC1B;AAAA,MACD;AAEA,YAAM,SAAS,aAAa,eAAe;AAI3C,MAAE,UAAoB,MAAO;AAAA,QAC5B;AAAA,QACA,IAAK,SACJ,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,WAAW,YAAY,WAAW,QAAQ,UAAW,CAAE;AAC7D;AAEA,IAAO,gCAAQ;",
|
|
6
6
|
"names": ["Mousetrap"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-media-query/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useSyncExternalStore } from '@wordpress/element';\n\ntype MQLSubscriber = {\n\tsubscribe: ( onStoreChange: () => void ) => () => void;\n\tgetValue: () => boolean;\n};\n\n// One subscriber per (window, query). The underlying MediaQueryList lives\n// inside the subscriber's closure; a single `change` listener fans out to\n// every React consumer via an in-JS `Set` to avoid the per-consumer\n// `addEventListener` cost (~85 ms during a large-post editor mount).\nconst perWindowCache = new WeakMap< Window, Map< string, MQLSubscriber > >();\n\nconst EMPTY_SUBSCRIBER: MQLSubscriber = {\n\tsubscribe: () => () => {},\n\tgetValue: () => false,\n};\n\nfunction getMQLSubscriber(\n\tview: Window | undefined,\n\tquery?: string\n): MQLSubscriber {\n\tif ( ! view || ! query || typeof view.matchMedia !== 'function' ) {\n\t\treturn EMPTY_SUBSCRIBER;\n\t}\n\n\tlet queryCache = perWindowCache.get( view );\n\tif ( ! queryCache ) {\n\t\tqueryCache = new Map();\n\t\tperWindowCache.set( view, queryCache );\n\t}\n\n\tconst cached = queryCache.get( query );\n\tif ( cached ) {\n\t\treturn cached;\n\t}\n\n\tconst mediaQueryList = view.matchMedia( query );\n\tconst listeners = new Set< () => void >();\n\tconst notify = () => {\n\t\tfor ( const listener of listeners ) {\n\t\t\tlistener();\n\t\t}\n\t};\n\n\tconst subscriber: MQLSubscriber = {\n\t\tsubscribe( onStoreChange ) {\n\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', notify );\n\t\t\t}\n\t\t\tlisteners.add( onStoreChange );\n\t\t\treturn () => {\n\t\t\t\tlisteners.delete( onStoreChange );\n\t\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t\tmediaQueryList.removeEventListener?.( 'change', notify );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\tgetValue() {\n\t\t\treturn mediaQueryList.matches;\n\t\t},\n\t};\n\n\tqueryCache.set( query, subscriber );\n\treturn subscriber;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param [query] Media Query.\n * @param [view] Window instance, else default to global window\n * @return return value of the media query.\n */\nexport default function useMediaQuery(\n\tquery?: string,\n\t// Resolve the default lazily so SSR (where `window` is undeclared) does not\n\t// throw a ReferenceError when this default expression is evaluated.\n\tview: Window | undefined = typeof window !== 'undefined'\n\t\t? window\n\t\t: undefined\n): boolean {\n\tconst source = getMQLSubscriber( view, query );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqC;AAWrC,IAAM,iBAAiB,oBAAI,QAAgD;AAE3E,IAAM,mBAAkC;AAAA,EACvC,WAAW,MAAM,MAAM;AAAA,EAAC;AAAA,EACxB,UAAU,MAAM;AACjB;AAEA,SAAS,iBACR,MACA,OACgB;AAChB,MAAK,CAAE,QAAQ,CAAE,SAAS,OAAO,KAAK,eAAe,YAAa;AACjE,WAAO;AAAA,EACR;AAEA,MAAI,aAAa,eAAe,IAAK,IAAK;AAC1C,MAAK,CAAE,YAAa;AACnB,iBAAa,oBAAI,IAAI;AACrB,mBAAe,IAAK,MAAM,UAAW;AAAA,EACtC;AAEA,QAAM,SAAS,WAAW,IAAK,KAAM;AACrC,MAAK,QAAS;AACb,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,KAAK,WAAY,KAAM;AAC9C,QAAM,YAAY,oBAAI,IAAkB;AACxC,QAAM,SAAS,MAAM;AACpB,eAAY,YAAY,WAAY;AACnC,eAAS;AAAA,IACV;AAAA,EACD;AAEA,QAAM,aAA4B;AAAA,IACjC,UAAW,eAAgB;AAC1B,UAAK,UAAU,SAAS,GAAI;AAE3B,uBAAe,mBAAoB,UAAU,MAAO;AAAA,MACrD;AACA,gBAAU,IAAK,aAAc;AAC7B,aAAO,MAAM;AACZ,kBAAU,OAAQ,aAAc;AAChC,YAAK,UAAU,SAAS,GAAI;AAC3B,yBAAe,sBAAuB,UAAU,MAAO;AAAA,QACxD;AAAA,MACD;AAAA,IACD;AAAA,IACA,WAAW;AACV,aAAO,eAAe;AAAA,IACvB;AAAA,EACD;AAEA,aAAW,IAAK,OAAO,UAAW;AAClC,SAAO;AACR;AASe,SAAR,cACN,OAGA,OAA2B,OAAO,WAAW,cAC1C,SACA,QACO;AACV,QAAM,SAAS,iBAAkB,MAAM,KAAM;AAE7C,aAAO;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-merge-refs/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqD;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,iBAAa,uBAAoB,IAAK;AAG5C,QAAM,sBAAkB,uBAAsB,CAAC,CAAE;AACjD,QAAM,qBAAiB,uBAAQ,IAAK;AAIpC,QAAM,kBAAc,uBAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,sCAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,aAAO,4BAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-observable-value/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useMemo, useSyncExternalStore } from '@wordpress/element';\nimport type { ObservableMap } from '../../utils/observable-map';\n\n/**\n * React hook that lets you observe an entry in an `ObservableMap`. The hook returns the\n * current value corresponding to the key, or `undefined` when there is no value stored.\n * It also observes changes to the value and triggers an update of the calling component\n * in case the value changes.\n *\n * @template K The type of the keys in the map.\n * @template V The type of the values in the map.\n * @param map The `ObservableMap` to observe.\n * @param name The map key to observe.\n * @return The value corresponding to the map key requested.\n */\nexport default function useObservableValue< K, V >(\n\tmap: ObservableMap< K, V >,\n\tname: K\n): V | undefined {\n\tconst [ subscribe, getValue ] = useMemo(\n\t\t() => [\n\t\t\t( listener: () => void ) => map.subscribe( name, listener ),\n\t\t\t() => map.get( name ),\n\t\t],\n\t\t[ map, name ]\n\t);\n\treturn useSyncExternalStore( subscribe, getValue, getValue );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAA8C;AAe/B,SAAR,mBACN,KACA,MACgB;AAChB,QAAM,CAAE,WAAW,QAAS,QAAI;AAAA,IAC/B,MAAM;AAAA,MACL,CAAE,aAA0B,IAAI,UAAW,MAAM,QAAS;AAAA,MAC1D,MAAM,IAAI,IAAK,IAAK;AAAA,IACrB;AAAA,IACA,CAAE,KAAK,IAAK;AAAA,EACb;AACA,aAAO,qCAAsB,WAAW,UAAU,QAAS;AAC5D;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-previous/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\n\n/**\n * Use something's value from the previous render.\n * Based on https://usehooks.com/usePrevious/.\n *\n * @param value The value to track.\n *\n * @return The value from the previous render.\n */\nexport default function usePrevious< T >( value: T ): T | undefined {\n\tconst ref = useRef< T >( undefined );\n\n\t// Store current value in ref.\n\tuseEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] ); // Re-run when value changes.\n\n\t// Return previous value (happens before update in useEffect above).\n\treturn ref.current;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkC;AAUnB,SAAR,YAAmC,OAA0B;AACnE,QAAM,UAAM,uBAAa,MAAU;AAGnC,gCAAW,MAAM;AAChB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AAGb,SAAO,IAAI;AACZ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-reduced-motion/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return Reduced motion preference value.\n */\nconst useReducedMotion = (): boolean =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAA0B;AAO1B,IAAM,mBAAmB,UACxB,uBAAAA,SAAe,kCAAmC;AAEnD,IAAO,6BAAQ;",
|
|
6
6
|
"names": ["useMediaQuery"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-ref-effect/index.ts"],
|
|
4
|
-
"sourcesContent": ["
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
4
|
+
"sourcesContent": ["import type { DependencyList, RefCallback } from 'react';\nimport { useCallback, useRef } from '@wordpress/element';\n\n/**\n * Effect-like ref callback. Just like with `useEffect`, this allows you to\n * return a cleanup function to be run if the ref changes or one of the\n * dependencies changes. The ref is provided as an argument to the callback\n * functions. The main difference between this and `useEffect` is that\n * the `useEffect` callback is not called when the ref changes, but this is.\n * Pass the returned ref callback as the component's ref and merge multiple refs\n * with `useMergeRefs`.\n *\n * It's worth noting that if the dependencies array is empty, there's not\n * strictly a need to clean up event handlers for example, because the node is\n * to be removed. It *is* necessary if you add dependencies because the ref\n * callback will be called multiple times for the same node.\n *\n * @param callback Callback with ref as argument.\n * @param dependencies Dependencies of the callback.\n *\n * @return Ref callback.\n */\nexport default function useRefEffect< TElement = Node >(\n\tcallback: ( node: TElement ) => ( () => void ) | void,\n\tdependencies: DependencyList\n): RefCallback< TElement | null > {\n\tconst cleanupRef = useRef< ( () => void ) | void >( undefined );\n\treturn useCallback( ( node: TElement | null ) => {\n\t\tif ( node ) {\n\t\t\tcleanupRef.current = callback( node );\n\t\t} else if ( cleanupRef.current ) {\n\t\t\tcleanupRef.current();\n\t\t}\n\t}, dependencies );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,qBAAoC;AAqBrB,SAAR,aACN,UACA,cACiC;AACjC,QAAM,iBAAa,uBAAiC,MAAU;AAC9D,aAAO,4BAAa,CAAE,SAA2B;AAChD,QAAK,MAAO;AACX,iBAAW,UAAU,SAAU,IAAK;AAAA,IACrC,WAAY,WAAW,SAAU;AAChC,iBAAW,QAAQ;AAAA,IACpB;AAAA,EACD,GAAG,YAAa;AACjB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|