@wordpress/compose 7.31.1-next.f56bd8138.0 → 7.32.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.
- package/CHANGELOG.md +2 -0
- package/build/higher-order/compose.js +25 -20
- package/build/higher-order/compose.js.map +7 -1
- package/build/higher-order/if-condition/index.js +35 -41
- package/build/higher-order/if-condition/index.js.map +7 -1
- package/build/higher-order/pipe.js +32 -66
- package/build/higher-order/pipe.js.map +7 -1
- package/build/higher-order/pure/index.js +44 -37
- package/build/higher-order/pure/index.js.map +7 -1
- package/build/higher-order/with-global-events/index.js +64 -73
- package/build/higher-order/with-global-events/index.js.map +7 -1
- package/build/higher-order/with-global-events/listener.js +34 -21
- package/build/higher-order/with-global-events/listener.js.map +7 -1
- package/build/higher-order/with-instance-id/index.js +45 -27
- package/build/higher-order/with-instance-id/index.js.map +7 -1
- package/build/higher-order/with-safe-timeout/index.js +70 -66
- package/build/higher-order/with-safe-timeout/index.js.map +7 -1
- package/build/higher-order/with-state/index.js +52 -40
- package/build/higher-order/with-state/index.js.map +7 -1
- package/build/hooks/use-async-list/index.js +38 -42
- package/build/hooks/use-async-list/index.js.map +7 -1
- package/build/hooks/use-constrained-tabbing/index.js +54 -75
- package/build/hooks/use-constrained-tabbing/index.js.map +7 -1
- package/build/hooks/use-copy-on-click/index.js +46 -56
- package/build/hooks/use-copy-on-click/index.js.map +7 -1
- package/build/hooks/use-copy-to-clipboard/index.js +41 -51
- package/build/hooks/use-copy-to-clipboard/index.js.map +7 -1
- package/build/hooks/use-debounce/index.js +30 -37
- package/build/hooks/use-debounce/index.js.map +7 -1
- package/build/hooks/use-debounced-input/index.js +39 -27
- package/build/hooks/use-debounced-input/index.js.map +7 -1
- package/build/hooks/use-dialog/index.js +63 -55
- package/build/hooks/use-dialog/index.js.map +7 -1
- package/build/hooks/use-disabled/index.js +74 -82
- package/build/hooks/use-disabled/index.js.map +7 -1
- package/build/hooks/use-dragging/index.js +51 -48
- package/build/hooks/use-dragging/index.js.map +7 -1
- package/build/hooks/use-drop-zone/index.js +133 -168
- package/build/hooks/use-drop-zone/index.js.map +7 -1
- package/build/hooks/use-event/index.js +33 -45
- package/build/hooks/use-event/index.js.map +7 -1
- package/build/hooks/use-fixed-window-list/index.js +109 -97
- package/build/hooks/use-fixed-window-list/index.js.map +7 -1
- package/build/hooks/use-focus-on-mount/index.js +44 -57
- package/build/hooks/use-focus-on-mount/index.js.map +7 -1
- package/build/hooks/use-focus-outside/index.js +44 -102
- package/build/hooks/use-focus-outside/index.js.map +7 -1
- package/build/hooks/use-focus-return/index.js +35 -56
- package/build/hooks/use-focus-return/index.js.map +7 -1
- package/build/hooks/use-focusable-iframe/index.js +38 -35
- package/build/hooks/use-focusable-iframe/index.js.map +7 -1
- package/build/hooks/use-instance-id/index.js +26 -42
- package/build/hooks/use-instance-id/index.js.map +7 -1
- package/build/hooks/use-isomorphic-layout-effect/index.js +25 -17
- package/build/hooks/use-isomorphic-layout-effect/index.js.map +7 -1
- package/build/hooks/use-keyboard-shortcut/index.js +72 -69
- package/build/hooks/use-keyboard-shortcut/index.js.map +7 -1
- package/build/hooks/use-media-query/index.js +39 -35
- package/build/hooks/use-media-query/index.js.map +7 -1
- package/build/hooks/use-merge-refs/index.js +34 -102
- package/build/hooks/use-merge-refs/index.js.map +7 -1
- package/build/hooks/use-observable-value/index.js +31 -28
- package/build/hooks/use-observable-value/index.js.map +7 -1
- package/build/hooks/use-preferred-color-scheme/index.android.js +31 -23
- package/build/hooks/use-preferred-color-scheme/index.android.js.map +7 -1
- package/build/hooks/use-preferred-color-scheme/index.ios.js +25 -17
- package/build/hooks/use-preferred-color-scheme/index.ios.js.map +7 -1
- package/build/hooks/use-previous/index.js +26 -25
- package/build/hooks/use-previous/index.js.map +7 -1
- package/build/hooks/use-reduced-motion/index.js +35 -18
- package/build/hooks/use-reduced-motion/index.js.map +7 -1
- package/build/hooks/use-ref-effect/index.js +25 -35
- package/build/hooks/use-ref-effect/index.js.map +7 -1
- package/build/hooks/use-resize-observer/index.js +35 -67
- package/build/hooks/use-resize-observer/index.js.map +7 -1
- package/build/hooks/use-resize-observer/legacy/index.js +47 -103
- package/build/hooks/use-resize-observer/legacy/index.js.map +7 -1
- package/build/hooks/use-resize-observer/use-resize-observer.js +44 -36
- package/build/hooks/use-resize-observer/use-resize-observer.js.map +7 -1
- package/build/hooks/use-state-with-history/index.js +68 -63
- package/build/hooks/use-state-with-history/index.js.map +7 -1
- package/build/hooks/use-throttle/index.js +30 -37
- package/build/hooks/use-throttle/index.js.map +7 -1
- package/build/hooks/use-viewport-match/index.js +51 -70
- package/build/hooks/use-viewport-match/index.js.map +7 -1
- package/build/hooks/use-warn-on-change/index.js +50 -40
- package/build/hooks/use-warn-on-change/index.js.map +7 -1
- package/build/index.js +156 -358
- package/build/index.js.map +7 -1
- package/build/utils/create-higher-order-component/index.js +30 -34
- package/build/utils/create-higher-order-component/index.js.map +7 -1
- package/build/utils/debounce/index.js +38 -99
- package/build/utils/debounce/index.js.map +7 -1
- package/build/utils/observable-map/index.js +29 -19
- package/build/utils/observable-map/index.js.map +7 -1
- package/build/utils/throttle/index.js +30 -81
- package/build/utils/throttle/index.js.map +7 -1
- package/build-module/higher-order/compose.js +6 -15
- package/build-module/higher-order/compose.js.map +7 -1
- package/build-module/higher-order/if-condition/index.js +16 -37
- package/build-module/higher-order/if-condition/index.js.map +7 -1
- package/build-module/higher-order/pipe.js +10 -62
- package/build-module/higher-order/pipe.js.map +7 -1
- package/build-module/higher-order/pure/index.js +12 -29
- package/build-module/higher-order/pure/index.js.map +7 -1
- package/build-module/higher-order/with-global-events/index.js +34 -67
- package/build-module/higher-order/with-global-events/index.js.map +7 -1
- package/build-module/higher-order/with-global-events/listener.js +16 -17
- package/build-module/higher-order/with-global-events/listener.js.map +7 -1
- package/build-module/higher-order/with-instance-id/index.js +17 -22
- package/build-module/higher-order/with-instance-id/index.js.map +7 -1
- package/build-module/higher-order/with-safe-timeout/index.js +52 -62
- package/build-module/higher-order/with-safe-timeout/index.js.map +7 -1
- package/build-module/higher-order/with-state/index.js +23 -35
- package/build-module/higher-order/with-state/index.js.map +7 -1
- package/build-module/hooks/use-async-list/index.js +16 -33
- package/build-module/hooks/use-async-list/index.js.map +7 -1
- package/build-module/hooks/use-constrained-tabbing/index.js +26 -70
- package/build-module/hooks/use-constrained-tabbing/index.js.map +7 -1
- package/build-module/hooks/use-copy-on-click/index.js +14 -47
- package/build-module/hooks/use-copy-on-click/index.js.map +7 -1
- package/build-module/hooks/use-copy-to-clipboard/index.js +11 -44
- package/build-module/hooks/use-copy-to-clipboard/index.js.map +7 -1
- package/build-module/hooks/use-debounce/index.js +12 -33
- package/build-module/hooks/use-debounce/index.js.map +7 -1
- package/build-module/hooks/use-debounced-input/index.js +7 -18
- package/build-module/hooks/use-debounced-input/index.js.map +7 -1
- package/build-module/hooks/use-dialog/index.js +29 -43
- package/build-module/hooks/use-dialog/index.js.map +7 -1
- package/build-module/hooks/use-disabled/index.js +47 -78
- package/build-module/hooks/use-disabled/index.js.map +7 -1
- package/build-module/hooks/use-dragging/index.js +19 -39
- package/build-module/hooks/use-dragging/index.js.map +7 -1
- package/build-module/hooks/use-drop-zone/index.js +100 -158
- package/build-module/hooks/use-drop-zone/index.js.map +7 -1
- package/build-module/hooks/use-event/index.js +13 -39
- package/build-module/hooks/use-event/index.js.map +7 -1
- package/build-module/hooks/use-fixed-window-list/index.js +86 -87
- package/build-module/hooks/use-fixed-window-list/index.js.map +7 -1
- package/build-module/hooks/use-focus-on-mount/index.js +12 -48
- package/build-module/hooks/use-focus-on-mount/index.js.map +7 -1
- package/build-module/hooks/use-focus-outside/index.js +21 -93
- package/build-module/hooks/use-focus-outside/index.js.map +7 -1
- package/build-module/hooks/use-focus-return/index.js +13 -48
- package/build-module/hooks/use-focus-return/index.js.map +7 -1
- package/build-module/hooks/use-focusable-iframe/index.js +11 -31
- package/build-module/hooks/use-focusable-iframe/index.js.map +7 -1
- package/build-module/hooks/use-instance-id/index.js +7 -36
- package/build-module/hooks/use-instance-id/index.js.map +7 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js +7 -13
- package/build-module/hooks/use-isomorphic-layout-effect/index.js.map +7 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +40 -60
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +7 -1
- package/build-module/hooks/use-media-query/index.js +21 -30
- package/build-module/hooks/use-media-query/index.js.map +7 -1
- package/build-module/hooks/use-merge-refs/index.js +10 -92
- package/build-module/hooks/use-merge-refs/index.js.map +7 -1
- package/build-module/hooks/use-observable-value/index.js +13 -24
- package/build-module/hooks/use-observable-value/index.js.map +7 -1
- package/build-module/hooks/use-preferred-color-scheme/index.android.js +15 -18
- package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +7 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js +6 -12
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js.map +7 -1
- package/build-module/hooks/use-previous/index.js +7 -20
- package/build-module/hooks/use-previous/index.js.map +7 -1
- package/build-module/hooks/use-reduced-motion/index.js +7 -13
- package/build-module/hooks/use-reduced-motion/index.js.map +7 -1
- package/build-module/hooks/use-ref-effect/index.js +7 -31
- package/build-module/hooks/use-ref-effect/index.js.map +7 -1
- package/build-module/hooks/use-resize-observer/index.js +7 -61
- package/build-module/hooks/use-resize-observer/index.js.map +7 -1
- package/build-module/hooks/use-resize-observer/legacy/index.js +28 -96
- package/build-module/hooks/use-resize-observer/legacy/index.js.map +7 -1
- package/build-module/hooks/use-resize-observer/use-resize-observer.js +10 -28
- package/build-module/hooks/use-resize-observer/use-resize-observer.js.map +7 -1
- package/build-module/hooks/use-state-with-history/index.js +47 -55
- package/build-module/hooks/use-state-with-history/index.js.map +7 -1
- package/build-module/hooks/use-throttle/index.js +12 -33
- package/build-module/hooks/use-throttle/index.js.map +7 -1
- package/build-module/hooks/use-viewport-match/index.js +22 -64
- package/build-module/hooks/use-viewport-match/index.js.map +7 -1
- package/build-module/hooks/use-warn-on-change/index.js +21 -34
- package/build-module/hooks/use-warn-on-change/index.js.map +7 -1
- package/build-module/index.js +83 -53
- package/build-module/index.js.map +7 -1
- package/build-module/utils/create-higher-order-component/index.js +9 -30
- package/build-module/utils/create-higher-order-component/index.js.map +7 -1
- package/build-module/utils/debounce/index.js +17 -95
- package/build-module/utils/debounce/index.js.map +7 -1
- package/build-module/utils/observable-map/index.js +8 -16
- package/build-module/utils/observable-map/index.js.map +7 -1
- package/build-module/utils/throttle/index.js +8 -75
- package/build-module/utils/throttle/index.js.map +7 -1
- package/package.json +17 -10
- package/src/hooks/use-debounce/index.js +1 -1
- package/tsconfig.tsbuildinfo +1 -1
- package/build/higher-order/with-network-connectivity/index.native.js +0 -27
- package/build/higher-order/with-network-connectivity/index.native.js.map +0 -1
- package/build/higher-order/with-preferred-color-scheme/index.native.js +0 -37
- package/build/higher-order/with-preferred-color-scheme/index.native.js.map +0 -1
- package/build/hooks/use-constrained-tabbing/index.native.js +0 -20
- package/build/hooks/use-constrained-tabbing/index.native.js.map +0 -1
- package/build/hooks/use-focus-outside/index.native.js +0 -175
- package/build/hooks/use-focus-outside/index.native.js.map +0 -1
- package/build/hooks/use-keyboard-shortcut/index.native.js +0 -9
- package/build/hooks/use-keyboard-shortcut/index.native.js.map +0 -1
- package/build/hooks/use-network-connectivity/index.native.js +0 -58
- package/build/hooks/use-network-connectivity/index.native.js.map +0 -1
- package/build/hooks/use-preferred-color-scheme-style/index.native.js +0 -42
- package/build/hooks/use-preferred-color-scheme-style/index.native.js.map +0 -1
- package/build/hooks/use-resize-observer/index.native.js +0 -14
- package/build/hooks/use-resize-observer/index.native.js.map +0 -1
- package/build/hooks/use-resize-observer/legacy/index.native.js +0 -62
- package/build/hooks/use-resize-observer/legacy/index.native.js.map +0 -1
- package/build/index.native.js +0 -297
- package/build/index.native.js.map +0 -1
- package/build-module/higher-order/with-network-connectivity/index.native.js +0 -19
- package/build-module/higher-order/with-network-connectivity/index.native.js.map +0 -1
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js +0 -29
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +0 -1
- package/build-module/hooks/use-constrained-tabbing/index.native.js +0 -13
- package/build-module/hooks/use-constrained-tabbing/index.native.js.map +0 -1
- package/build-module/hooks/use-focus-outside/index.native.js +0 -169
- package/build-module/hooks/use-focus-outside/index.native.js.map +0 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js +0 -3
- package/build-module/hooks/use-keyboard-shortcut/index.native.js.map +0 -1
- package/build-module/hooks/use-network-connectivity/index.native.js +0 -52
- package/build-module/hooks/use-network-connectivity/index.native.js.map +0 -1
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js +0 -35
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js.map +0 -1
- package/build-module/hooks/use-resize-observer/index.native.js +0 -2
- package/build-module/hooks/use-resize-observer/index.native.js.map +0 -1
- package/build-module/hooks/use-resize-observer/legacy/index.native.js +0 -56
- package/build-module/hooks/use-resize-observer/legacy/index.native.js.map +0 -1
- package/build-module/index.native.js +0 -45
- package/build-module/index.native.js.map +0 -1
|
@@ -1,74 +1,82 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
Object.
|
|
5
|
-
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var use_dialog_exports = {};
|
|
30
|
+
__export(use_dialog_exports, {
|
|
31
|
+
default: () => use_dialog_default
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
var
|
|
12
|
-
var
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
/**
|
|
16
|
-
* External dependencies
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* WordPress dependencies
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* Internal dependencies
|
|
25
|
-
*/
|
|
26
|
-
|
|
27
|
-
/**
|
|
28
|
-
* Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:
|
|
29
|
-
* - constrained tabbing.
|
|
30
|
-
* - focus on mount.
|
|
31
|
-
* - return focus on unmount.
|
|
32
|
-
* - focus outside.
|
|
33
|
-
*
|
|
34
|
-
* @param options Dialog Options.
|
|
35
|
-
*/
|
|
33
|
+
module.exports = __toCommonJS(use_dialog_exports);
|
|
34
|
+
var import_element = require("@wordpress/element");
|
|
35
|
+
var import_keycodes = require("@wordpress/keycodes");
|
|
36
|
+
var import_use_constrained_tabbing = __toESM(require("../use-constrained-tabbing"));
|
|
37
|
+
var import_use_focus_on_mount = __toESM(require("../use-focus-on-mount"));
|
|
38
|
+
var import_use_focus_return = __toESM(require("../use-focus-return"));
|
|
39
|
+
var import_use_focus_outside = __toESM(require("../use-focus-outside"));
|
|
40
|
+
var import_use_merge_refs = __toESM(require("../use-merge-refs"));
|
|
36
41
|
function useDialog(options) {
|
|
37
|
-
const currentOptions = (0,
|
|
38
|
-
const {
|
|
39
|
-
|
|
40
|
-
} = options;
|
|
41
|
-
(0, _element.useEffect)(() => {
|
|
42
|
+
const currentOptions = (0, import_element.useRef)();
|
|
43
|
+
const { constrainTabbing = options.focusOnMount !== false } = options;
|
|
44
|
+
(0, import_element.useEffect)(() => {
|
|
42
45
|
currentOptions.current = options;
|
|
43
46
|
}, Object.values(options));
|
|
44
|
-
const constrainedTabbingRef = (0,
|
|
45
|
-
const focusOnMountRef = (0,
|
|
46
|
-
const focusReturnRef = (0,
|
|
47
|
-
const focusOutsideProps = (0,
|
|
48
|
-
// This unstable prop is here only to manage backward compatibility
|
|
49
|
-
// for the Popover component otherwise, the onClose should be enough.
|
|
47
|
+
const constrainedTabbingRef = (0, import_use_constrained_tabbing.default)();
|
|
48
|
+
const focusOnMountRef = (0, import_use_focus_on_mount.default)(options.focusOnMount);
|
|
49
|
+
const focusReturnRef = (0, import_use_focus_return.default)();
|
|
50
|
+
const focusOutsideProps = (0, import_use_focus_outside.default)((event) => {
|
|
50
51
|
if (currentOptions.current?.__unstableOnClose) {
|
|
51
|
-
currentOptions.current.__unstableOnClose(
|
|
52
|
+
currentOptions.current.__unstableOnClose("focus-outside", event);
|
|
52
53
|
} else if (currentOptions.current?.onClose) {
|
|
53
54
|
currentOptions.current.onClose();
|
|
54
55
|
}
|
|
55
56
|
});
|
|
56
|
-
const closeOnEscapeRef = (0,
|
|
57
|
+
const closeOnEscapeRef = (0, import_element.useCallback)((node) => {
|
|
57
58
|
if (!node) {
|
|
58
59
|
return;
|
|
59
60
|
}
|
|
60
|
-
node.addEventListener(
|
|
61
|
-
|
|
62
|
-
if (event.keyCode === _keycodes.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
|
|
61
|
+
node.addEventListener("keydown", (event) => {
|
|
62
|
+
if (event.keyCode === import_keycodes.ESCAPE && !event.defaultPrevented && currentOptions.current?.onClose) {
|
|
63
63
|
event.preventDefault();
|
|
64
64
|
currentOptions.current.onClose();
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
67
|
}, []);
|
|
68
|
-
return [
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
68
|
+
return [
|
|
69
|
+
(0, import_use_merge_refs.default)([
|
|
70
|
+
constrainTabbing ? constrainedTabbingRef : null,
|
|
71
|
+
options.focusOnMount !== false ? focusReturnRef : null,
|
|
72
|
+
options.focusOnMount !== false ? focusOnMountRef : null,
|
|
73
|
+
closeOnEscapeRef
|
|
74
|
+
]),
|
|
75
|
+
{
|
|
76
|
+
...focusOutsideProps,
|
|
77
|
+
tabIndex: -1
|
|
78
|
+
}
|
|
79
|
+
];
|
|
72
80
|
}
|
|
73
|
-
var
|
|
74
|
-
//# sourceMappingURL=index.js.map
|
|
81
|
+
var use_dialog_default = useDialog;
|
|
82
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-dialog/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport useFocusOnMount from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines whether focus should be automatically moved to the popover\n\t * when it mounts. `false` causes no focus shift, `true` causes the popover\n\t * itself to gain focus, and `firstElement` focuses the first focusable\n\t * element within the popover.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n * - constrained tabbing.\n * - focus on mount.\n * - return focus on unmount.\n * - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions | undefined >();\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+C;AAC/C,sBAAuB;AAKvB,qCAAkC;AAClC,gCAA4B;AAC5B,8BAA2B;AAC3B,+BAA4B;AAC5B,4BAAyB;AAiDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,qBAAiB,uBAAoC;AAC3D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,gCAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,4BAAwB,+BAAAA,SAAsB;AACpD,QAAM,sBAAkB,0BAAAC,SAAiB,QAAQ,YAAa;AAC9D,QAAM,qBAAiB,wBAAAC,SAAe;AACtC,QAAM,wBAAoB,yBAAAC,SAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,uBAAmB,4BAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,0BAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,QACN,sBAAAC,SAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
|
|
6
|
+
"names": ["useConstrainedTabbing", "useFocusOnMount", "useFocusReturn", "useFocusOutside", "useMergeRefs"]
|
|
7
|
+
}
|
|
@@ -1,89 +1,81 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
Object.
|
|
5
|
-
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var use_disabled_exports = {};
|
|
30
|
+
__export(use_disabled_exports, {
|
|
31
|
+
default: () => useDisabled
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
/**
|
|
11
|
-
* Internal dependencies
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* In some circumstances, such as block previews, all focusable DOM elements
|
|
16
|
-
* (input fields, links, buttons, etc.) need to be disabled. This hook adds the
|
|
17
|
-
* behavior to disable nested DOM elements to the returned ref.
|
|
18
|
-
*
|
|
19
|
-
* If you can, prefer the use of the inert HTML attribute.
|
|
20
|
-
*
|
|
21
|
-
* @param {Object} config Configuration object.
|
|
22
|
-
* @param {boolean=} config.isDisabled Whether the element should be disabled.
|
|
23
|
-
* @return {import('react').RefCallback<HTMLElement>} Element Ref.
|
|
24
|
-
*
|
|
25
|
-
* @example
|
|
26
|
-
* ```js
|
|
27
|
-
* import { useDisabled } from '@wordpress/compose';
|
|
28
|
-
*
|
|
29
|
-
* const DisabledExample = () => {
|
|
30
|
-
* const disabledRef = useDisabled();
|
|
31
|
-
* return (
|
|
32
|
-
* <div ref={ disabledRef }>
|
|
33
|
-
* <a href="#">This link will have tabindex set to -1</a>
|
|
34
|
-
* <input placeholder="This input will have the disabled attribute added to it." type="text" />
|
|
35
|
-
* </div>
|
|
36
|
-
* );
|
|
37
|
-
* };
|
|
38
|
-
* ```
|
|
39
|
-
*/
|
|
33
|
+
module.exports = __toCommonJS(use_disabled_exports);
|
|
34
|
+
var import_debounce = require("../../utils/debounce");
|
|
35
|
+
var import_use_ref_effect = __toESM(require("../use-ref-effect"));
|
|
40
36
|
function useDisabled({
|
|
41
37
|
isDisabled: isDisabledProp = false
|
|
42
38
|
} = {}) {
|
|
43
|
-
return (0,
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
/** A variable keeping track of the previous updates in order to restore them. */
|
|
53
|
-
const updates = [];
|
|
54
|
-
const disable = () => {
|
|
55
|
-
node.childNodes.forEach(child => {
|
|
56
|
-
if (!(child instanceof defaultView.HTMLElement)) {
|
|
57
|
-
return;
|
|
58
|
-
}
|
|
59
|
-
if (!child.getAttribute('inert')) {
|
|
60
|
-
child.setAttribute('inert', 'true');
|
|
61
|
-
updates.push(() => {
|
|
62
|
-
child.removeAttribute('inert');
|
|
63
|
-
});
|
|
64
|
-
}
|
|
65
|
-
});
|
|
66
|
-
};
|
|
67
|
-
|
|
68
|
-
// Debounce re-disable since disabling process itself will incur
|
|
69
|
-
// additional mutations which should be ignored.
|
|
70
|
-
const debouncedDisable = (0, _debounce.debounce)(disable, 0, {
|
|
71
|
-
leading: true
|
|
72
|
-
});
|
|
73
|
-
disable();
|
|
74
|
-
|
|
75
|
-
/** @type {MutationObserver | undefined} */
|
|
76
|
-
const observer = new window.MutationObserver(debouncedDisable);
|
|
77
|
-
observer.observe(node, {
|
|
78
|
-
childList: true
|
|
79
|
-
});
|
|
80
|
-
return () => {
|
|
81
|
-
if (observer) {
|
|
82
|
-
observer.disconnect();
|
|
39
|
+
return (0, import_use_ref_effect.default)(
|
|
40
|
+
(node) => {
|
|
41
|
+
if (isDisabledProp) {
|
|
42
|
+
return;
|
|
43
|
+
}
|
|
44
|
+
const defaultView = node?.ownerDocument?.defaultView;
|
|
45
|
+
if (!defaultView) {
|
|
46
|
+
return;
|
|
83
47
|
}
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
48
|
+
const updates = [];
|
|
49
|
+
const disable = () => {
|
|
50
|
+
node.childNodes.forEach((child) => {
|
|
51
|
+
if (!(child instanceof defaultView.HTMLElement)) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
if (!child.getAttribute("inert")) {
|
|
55
|
+
child.setAttribute("inert", "true");
|
|
56
|
+
updates.push(() => {
|
|
57
|
+
child.removeAttribute("inert");
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
};
|
|
62
|
+
const debouncedDisable = (0, import_debounce.debounce)(disable, 0, {
|
|
63
|
+
leading: true
|
|
64
|
+
});
|
|
65
|
+
disable();
|
|
66
|
+
const observer = new window.MutationObserver(debouncedDisable);
|
|
67
|
+
observer.observe(node, {
|
|
68
|
+
childList: true
|
|
69
|
+
});
|
|
70
|
+
return () => {
|
|
71
|
+
if (observer) {
|
|
72
|
+
observer.disconnect();
|
|
73
|
+
}
|
|
74
|
+
debouncedDisable.cancel();
|
|
75
|
+
updates.forEach((update) => update());
|
|
76
|
+
};
|
|
77
|
+
},
|
|
78
|
+
[isDisabledProp]
|
|
79
|
+
);
|
|
88
80
|
}
|
|
89
|
-
//# sourceMappingURL=index.js.map
|
|
81
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-disabled/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * If you can, prefer the use of the inert HTML attribute.\n *\n * @param {Object} config Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {import('react').RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useDisabled } from '@wordpress/compose';\n *\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled( {\n\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst defaultView = node?.ownerDocument?.defaultView;\n\t\t\tif ( ! defaultView ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\tconst updates: Function[] = [];\n\t\t\tconst disable = () => {\n\t\t\t\tnode.childNodes.forEach( ( child ) => {\n\t\t\t\t\tif ( ! ( child instanceof defaultView.HTMLElement ) ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! child.getAttribute( 'inert' ) ) {\n\t\t\t\t\t\tchild.setAttribute( 'inert', 'true' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tchild.removeAttribute( 'inert' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAyB;AACzB,4BAAyB;AA4BV,SAAR,YAA8B;AAAA,EACpC,YAAY,iBAAiB;AAC9B,IAAI,CAAC,GAAI;AACR,aAAO,sBAAAA;AAAA,IACN,CAAE,SAAU;AACX,UAAK,gBAAiB;AACrB;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,eAAe;AACzC,UAAK,CAAE,aAAc;AACpB;AAAA,MACD;AAGA,YAAM,UAAsB,CAAC;AAC7B,YAAM,UAAU,MAAM;AACrB,aAAK,WAAW,QAAS,CAAE,UAAW;AACrC,cAAK,EAAI,iBAAiB,YAAY,cAAgB;AACrD;AAAA,UACD;AACA,cAAK,CAAE,MAAM,aAAc,OAAQ,GAAI;AACtC,kBAAM,aAAc,SAAS,MAAO;AACpC,oBAAQ,KAAM,MAAM;AACnB,oBAAM,gBAAiB,OAAQ;AAAA,YAChC,CAAE;AAAA,UACH;AAAA,QACD,CAAE;AAAA,MACH;AAIA,YAAM,uBAAmB,0BAAU,SAAS,GAAG;AAAA,QAC9C,SAAS;AAAA,MACV,CAAE;AACF,cAAQ;AAGR,YAAM,WAAW,IAAI,OAAO,iBAAkB,gBAAiB;AAC/D,eAAS,QAAS,MAAM;AAAA,QACvB,WAAW;AAAA,MACZ,CAAE;AAEF,aAAO,MAAM;AACZ,YAAK,UAAW;AACf,mBAAS,WAAW;AAAA,QACrB;AACA,yBAAiB,OAAO;AACxB,gBAAQ,QAAS,CAAE,WAAY,OAAO,CAAE;AAAA,MACzC;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AACD;",
|
|
6
|
+
"names": ["useRefEffect"]
|
|
7
|
+
}
|
|
@@ -1,72 +1,75 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
Object.
|
|
5
|
-
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
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
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var use_dragging_exports = {};
|
|
30
|
+
__export(use_dragging_exports, {
|
|
31
|
+
default: () => useDragging
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
// Event handlers that are triggered from `document` listeners accept a MouseEvent,
|
|
19
|
-
// while those triggered from React listeners accept a React.MouseEvent.
|
|
20
|
-
/**
|
|
21
|
-
* @param {Object} props
|
|
22
|
-
* @param {(e: import('react').MouseEvent) => void} props.onDragStart
|
|
23
|
-
* @param {(e: MouseEvent) => void} props.onDragMove
|
|
24
|
-
* @param {(e?: MouseEvent) => void} props.onDragEnd
|
|
25
|
-
*/
|
|
26
|
-
function useDragging({
|
|
27
|
-
onDragStart,
|
|
28
|
-
onDragMove,
|
|
29
|
-
onDragEnd
|
|
30
|
-
}) {
|
|
31
|
-
const [isDragging, setIsDragging] = (0, _element.useState)(false);
|
|
32
|
-
const eventsRef = (0, _element.useRef)({
|
|
33
|
+
module.exports = __toCommonJS(use_dragging_exports);
|
|
34
|
+
var import_element = require("@wordpress/element");
|
|
35
|
+
var import_use_isomorphic_layout_effect = __toESM(require("../use-isomorphic-layout-effect"));
|
|
36
|
+
function useDragging({ onDragStart, onDragMove, onDragEnd }) {
|
|
37
|
+
const [isDragging, setIsDragging] = (0, import_element.useState)(false);
|
|
38
|
+
const eventsRef = (0, import_element.useRef)({
|
|
33
39
|
onDragStart,
|
|
34
40
|
onDragMove,
|
|
35
41
|
onDragEnd
|
|
36
42
|
});
|
|
37
|
-
(0,
|
|
43
|
+
(0, import_use_isomorphic_layout_effect.default)(() => {
|
|
38
44
|
eventsRef.current.onDragStart = onDragStart;
|
|
39
45
|
eventsRef.current.onDragMove = onDragMove;
|
|
40
46
|
eventsRef.current.onDragEnd = onDragEnd;
|
|
41
47
|
}, [onDragStart, onDragMove, onDragEnd]);
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
const endDrag = (0,
|
|
48
|
+
const onMouseMove = (0, import_element.useCallback)(
|
|
49
|
+
(event) => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event),
|
|
50
|
+
[]
|
|
51
|
+
);
|
|
52
|
+
const endDrag = (0, import_element.useCallback)((event) => {
|
|
47
53
|
if (eventsRef.current.onDragEnd) {
|
|
48
54
|
eventsRef.current.onDragEnd(event);
|
|
49
55
|
}
|
|
50
|
-
document.removeEventListener(
|
|
51
|
-
document.removeEventListener(
|
|
56
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
57
|
+
document.removeEventListener("mouseup", endDrag);
|
|
52
58
|
setIsDragging(false);
|
|
53
59
|
}, []);
|
|
54
|
-
|
|
55
|
-
const startDrag = (0, _element.useCallback)(event => {
|
|
60
|
+
const startDrag = (0, import_element.useCallback)((event) => {
|
|
56
61
|
if (eventsRef.current.onDragStart) {
|
|
57
62
|
eventsRef.current.onDragStart(event);
|
|
58
63
|
}
|
|
59
|
-
document.addEventListener(
|
|
60
|
-
document.addEventListener(
|
|
64
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
65
|
+
document.addEventListener("mouseup", endDrag);
|
|
61
66
|
setIsDragging(true);
|
|
62
67
|
}, []);
|
|
63
|
-
|
|
64
|
-
// Remove the global events when unmounting if needed.
|
|
65
|
-
(0, _element.useEffect)(() => {
|
|
68
|
+
(0, import_element.useEffect)(() => {
|
|
66
69
|
return () => {
|
|
67
70
|
if (isDragging) {
|
|
68
|
-
document.removeEventListener(
|
|
69
|
-
document.removeEventListener(
|
|
71
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
72
|
+
document.removeEventListener("mouseup", endDrag);
|
|
70
73
|
}
|
|
71
74
|
};
|
|
72
75
|
}, [isDragging]);
|
|
@@ -76,4 +79,4 @@ function useDragging({
|
|
|
76
79
|
isDragging
|
|
77
80
|
};
|
|
78
81
|
}
|
|
79
|
-
//# sourceMappingURL=index.js.map
|
|
82
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-dragging/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';\n\n// Event handlers that are triggered from `document` listeners accept a MouseEvent,\n// while those triggered from React listeners accept a React.MouseEvent.\n/**\n * @param {Object} props\n * @param {(e: import('react').MouseEvent) => void} props.onDragStart\n * @param {(e: MouseEvent) => void} props.onDragMove\n * @param {(e?: MouseEvent) => void} props.onDragEnd\n */\nexport default function useDragging( { onDragStart, onDragMove, onDragEnd } ) {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\n\tconst eventsRef = useRef( {\n\t\tonDragStart,\n\t\tonDragMove,\n\t\tonDragEnd,\n\t} );\n\tuseIsomorphicLayoutEffect( () => {\n\t\teventsRef.current.onDragStart = onDragStart;\n\t\teventsRef.current.onDragMove = onDragMove;\n\t\teventsRef.current.onDragEnd = onDragEnd;\n\t}, [ onDragStart, onDragMove, onDragEnd ] );\n\n\t/** @type {(e: MouseEvent) => void} */\n\tconst onMouseMove = useCallback(\n\t\t( event ) =>\n\t\t\teventsRef.current.onDragMove &&\n\t\t\teventsRef.current.onDragMove( event ),\n\t\t[]\n\t);\n\t/** @type {(e?: MouseEvent) => void} */\n\tconst endDrag = useCallback( ( event ) => {\n\t\tif ( eventsRef.current.onDragEnd ) {\n\t\t\teventsRef.current.onDragEnd( event );\n\t\t}\n\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( false );\n\t}, [] );\n\t/** @type {(e: import('react').MouseEvent) => void} */\n\tconst startDrag = useCallback( ( event ) => {\n\t\tif ( eventsRef.current.onDragStart ) {\n\t\t\teventsRef.current.onDragStart( event );\n\t\t}\n\t\tdocument.addEventListener( 'mousemove', onMouseMove );\n\t\tdocument.addEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( true );\n\t}, [] );\n\n\t// Remove the global events when unmounting if needed.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging ) {\n\t\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\t\t}\n\t\t};\n\t}, [ isDragging ] );\n\n\treturn {\n\t\tstartDrag,\n\t\tendDrag,\n\t\tisDragging,\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyD;AAKzD,0CAAsC;AAUvB,SAAR,YAA8B,EAAE,aAAa,YAAY,UAAU,GAAI;AAC7E,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,QAAM,gBAAY,uBAAQ;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,0CAAAA,SAA2B,MAAM;AAChC,cAAU,QAAQ,cAAc;AAChC,cAAU,QAAQ,aAAa;AAC/B,cAAU,QAAQ,YAAY;AAAA,EAC/B,GAAG,CAAE,aAAa,YAAY,SAAU,CAAE;AAG1C,QAAM,kBAAc;AAAA,IACnB,CAAE,UACD,UAAU,QAAQ,cAClB,UAAU,QAAQ,WAAY,KAAM;AAAA,IACrC,CAAC;AAAA,EACF;AAEA,QAAM,cAAU,4BAAa,CAAE,UAAW;AACzC,QAAK,UAAU,QAAQ,WAAY;AAClC,gBAAU,QAAQ,UAAW,KAAM;AAAA,IACpC;AACA,aAAS,oBAAqB,aAAa,WAAY;AACvD,aAAS,oBAAqB,WAAW,OAAQ;AACjD,kBAAe,KAAM;AAAA,EACtB,GAAG,CAAC,CAAE;AAEN,QAAM,gBAAY,4BAAa,CAAE,UAAW;AAC3C,QAAK,UAAU,QAAQ,aAAc;AACpC,gBAAU,QAAQ,YAAa,KAAM;AAAA,IACtC;AACA,aAAS,iBAAkB,aAAa,WAAY;AACpD,aAAS,iBAAkB,WAAW,OAAQ;AAC9C,kBAAe,IAAK;AAAA,EACrB,GAAG,CAAC,CAAE;AAGN,gCAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,YAAa;AACjB,iBAAS,oBAAqB,aAAa,WAAY;AACvD,iBAAS,oBAAqB,WAAW,OAAQ;AAAA,MAClD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,UAAW,CAAE;AAElB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
|
|
6
|
+
"names": ["useIsomorphicLayoutEffect"]
|
|
7
|
+
}
|