@wordpress/compose 7.32.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/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,95 +1,74 @@
|
|
|
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_constrained_tabbing_exports = {};
|
|
30
|
+
__export(use_constrained_tabbing_exports, {
|
|
31
|
+
default: () => use_constrained_tabbing_default
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
/**
|
|
11
|
-
* WordPress dependencies
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* In Dialogs/modals, the tabbing must be constrained to the content of
|
|
20
|
-
* the wrapper element. This hook adds the behavior to the returned ref.
|
|
21
|
-
*
|
|
22
|
-
* @return {import('react').RefCallback<Element>} Element Ref.
|
|
23
|
-
*
|
|
24
|
-
* @example
|
|
25
|
-
* ```js
|
|
26
|
-
* import { useConstrainedTabbing } from '@wordpress/compose';
|
|
27
|
-
*
|
|
28
|
-
* const ConstrainedTabbingExample = () => {
|
|
29
|
-
* const constrainedTabbingRef = useConstrainedTabbing()
|
|
30
|
-
* return (
|
|
31
|
-
* <div ref={ constrainedTabbingRef }>
|
|
32
|
-
* <Button />
|
|
33
|
-
* <Button />
|
|
34
|
-
* </div>
|
|
35
|
-
* );
|
|
36
|
-
* }
|
|
37
|
-
* ```
|
|
38
|
-
*/
|
|
33
|
+
module.exports = __toCommonJS(use_constrained_tabbing_exports);
|
|
34
|
+
var import_dom = require("@wordpress/dom");
|
|
35
|
+
var import_use_ref_effect = __toESM(require("../use-ref-effect"));
|
|
39
36
|
function useConstrainedTabbing() {
|
|
40
|
-
return (0,
|
|
41
|
-
function onKeyDown(
|
|
42
|
-
const {
|
|
43
|
-
|
|
44
|
-
shiftKey,
|
|
45
|
-
target
|
|
46
|
-
} = event;
|
|
47
|
-
if (key !== 'Tab') {
|
|
37
|
+
return (0, import_use_ref_effect.default)((node) => {
|
|
38
|
+
function onKeyDown(event) {
|
|
39
|
+
const { key, shiftKey, target } = event;
|
|
40
|
+
if (key !== "Tab") {
|
|
48
41
|
return;
|
|
49
42
|
}
|
|
50
|
-
const action = shiftKey ?
|
|
51
|
-
const nextElement =
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
if (/** @type {HTMLElement} */target.contains(nextElement)) {
|
|
43
|
+
const action = shiftKey ? "findPrevious" : "findNext";
|
|
44
|
+
const nextElement = import_dom.focus.tabbable[action](
|
|
45
|
+
/** @type {HTMLElement} */
|
|
46
|
+
target
|
|
47
|
+
) || null;
|
|
48
|
+
if (
|
|
49
|
+
/** @type {HTMLElement} */
|
|
50
|
+
target.contains(nextElement)
|
|
51
|
+
) {
|
|
60
52
|
event.preventDefault();
|
|
61
53
|
nextElement?.focus();
|
|
62
54
|
return;
|
|
63
55
|
}
|
|
64
|
-
|
|
65
|
-
// If the element that is about to receive focus is inside the
|
|
66
|
-
// area, rely on native browsers behavior and let tabbing follow
|
|
67
|
-
// the native tab sequence.
|
|
68
56
|
if (node.contains(nextElement)) {
|
|
69
57
|
return;
|
|
70
58
|
}
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
// the area, depending on the direction. Without preventing default
|
|
75
|
-
// behaviour, the browser will then move focus to the next element.
|
|
76
|
-
const domAction = shiftKey ? 'append' : 'prepend';
|
|
77
|
-
const {
|
|
78
|
-
ownerDocument
|
|
79
|
-
} = node;
|
|
80
|
-
const trap = ownerDocument.createElement('div');
|
|
59
|
+
const domAction = shiftKey ? "append" : "prepend";
|
|
60
|
+
const { ownerDocument } = node;
|
|
61
|
+
const trap = ownerDocument.createElement("div");
|
|
81
62
|
trap.tabIndex = -1;
|
|
82
63
|
node[domAction](trap);
|
|
83
|
-
|
|
84
|
-
// Remove itself when the trap loses focus.
|
|
85
|
-
trap.addEventListener('blur', () => node.removeChild(trap));
|
|
64
|
+
trap.addEventListener("blur", () => node.removeChild(trap));
|
|
86
65
|
trap.focus();
|
|
87
66
|
}
|
|
88
|
-
node.addEventListener(
|
|
67
|
+
node.addEventListener("keydown", onKeyDown);
|
|
89
68
|
return () => {
|
|
90
|
-
node.removeEventListener(
|
|
69
|
+
node.removeEventListener("keydown", onKeyDown);
|
|
91
70
|
};
|
|
92
71
|
}, []);
|
|
93
72
|
}
|
|
94
|
-
var
|
|
95
|
-
//# sourceMappingURL=index.js.map
|
|
73
|
+
var use_constrained_tabbing_default = useConstrainedTabbing;
|
|
74
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-constrained-tabbing/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In Dialogs/modals, the tabbing must be constrained to the content of\n * the wrapper element. This hook adds the behavior to the returned ref.\n *\n * @return {import('react').RefCallback<Element>} Element Ref.\n *\n * @example\n * ```js\n * import { useConstrainedTabbing } from '@wordpress/compose';\n *\n * const ConstrainedTabbingExample = () => {\n * const constrainedTabbingRef = useConstrainedTabbing()\n * return (\n * <div ref={ constrainedTabbingRef }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useConstrainedTabbing() {\n\treturn useRefEffect( ( /** @type {HTMLElement} */ node ) => {\n\t\tfunction onKeyDown( /** @type {KeyboardEvent} */ event ) {\n\t\t\tconst { key, shiftKey, target } = event;\n\n\t\t\tif ( key !== 'Tab' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = shiftKey ? 'findPrevious' : 'findNext';\n\t\t\tconst nextElement =\n\t\t\t\tfocus.tabbable[ action ](\n\t\t\t\t\t/** @type {HTMLElement} */ ( target )\n\t\t\t\t) || null;\n\n\t\t\t// When the target element contains the element that is about to\n\t\t\t// receive focus, for example when the target is a tabbable\n\t\t\t// container, browsers may disagree on where to move focus next.\n\t\t\t// In this case we can't rely on native browsers behavior. We need\n\t\t\t// to manage focus instead.\n\t\t\t// See https://github.com/WordPress/gutenberg/issues/46041.\n\t\t\tif (\n\t\t\t\t/** @type {HTMLElement} */ ( target ).contains( nextElement )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tnextElement?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is inside the\n\t\t\t// area, rely on native browsers behavior and let tabbing follow\n\t\t\t// the native tab sequence.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is outside the\n\t\t\t// area, move focus to a div and insert it at the start or end of\n\t\t\t// the area, depending on the direction. Without preventing default\n\t\t\t// behaviour, the browser will then move focus to the next element.\n\t\t\tconst domAction = shiftKey ? 'append' : 'prepend';\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst trap = ownerDocument.createElement( 'div' );\n\n\t\t\ttrap.tabIndex = -1;\n\t\t\tnode[ domAction ]( trap );\n\n\t\t\t// Remove itself when the trap loses focus.\n\t\t\ttrap.addEventListener( 'blur', () => node.removeChild( trap ) );\n\n\t\t\ttrap.focus();\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAsB;AAKtB,4BAAyB;AAuBzB,SAAS,wBAAwB;AAChC,aAAO,sBAAAA,SAAc,CAA6B,SAAU;AAC3D,aAAS,UAAwC,OAAQ;AACxD,YAAM,EAAE,KAAK,UAAU,OAAO,IAAI;AAElC,UAAK,QAAQ,OAAQ;AACpB;AAAA,MACD;AAEA,YAAM,SAAS,WAAW,iBAAiB;AAC3C,YAAM,cACL,iBAAM,SAAU,MAAO;AAAA;AAAA,QACO;AAAA,MAC9B,KAAK;AAQN;AAAA;AAAA,QAC8B,OAAS,SAAU,WAAY;AAAA,QAC3D;AACD,cAAM,eAAe;AACrB,qBAAa,MAAM;AACnB;AAAA,MACD;AAKA,UAAK,KAAK,SAAU,WAAY,GAAI;AACnC;AAAA,MACD;AAMA,YAAM,YAAY,WAAW,WAAW;AACxC,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,OAAO,cAAc,cAAe,KAAM;AAEhD,WAAK,WAAW;AAChB,WAAM,SAAU,EAAG,IAAK;AAGxB,WAAK,iBAAkB,QAAQ,MAAM,KAAK,YAAa,IAAK,CAAE;AAE9D,WAAK,MAAM;AAAA,IACZ;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAC5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAEA,IAAO,kCAAQ;",
|
|
6
|
+
"names": ["useRefEffect"]
|
|
7
|
+
}
|
|
@@ -1,68 +1,58 @@
|
|
|
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_copy_on_click_exports = {};
|
|
30
|
+
__export(use_copy_on_click_exports, {
|
|
31
|
+
default: () => useCopyOnClick
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* WordPress dependencies
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/* eslint-disable jsdoc/no-undefined-types */
|
|
20
|
-
/**
|
|
21
|
-
* Copies the text to the clipboard when the element is clicked.
|
|
22
|
-
*
|
|
23
|
-
* @deprecated
|
|
24
|
-
*
|
|
25
|
-
* @param {import('react').RefObject<string | Element | NodeListOf<Element>>} ref Reference with the element.
|
|
26
|
-
* @param {string|Function} text The text to copy.
|
|
27
|
-
* @param {number} [timeout] Optional timeout to reset the returned
|
|
28
|
-
* state. 4 seconds by default.
|
|
29
|
-
*
|
|
30
|
-
* @return {boolean} Whether or not the text has been copied. Resets after the
|
|
31
|
-
* timeout.
|
|
32
|
-
*/
|
|
33
|
-
function useCopyOnClick(ref, text, timeout = 4000) {
|
|
34
|
-
/* eslint-enable jsdoc/no-undefined-types */
|
|
35
|
-
(0, _deprecated.default)('wp.compose.useCopyOnClick', {
|
|
36
|
-
since: '5.8',
|
|
37
|
-
alternative: 'wp.compose.useCopyToClipboard'
|
|
33
|
+
module.exports = __toCommonJS(use_copy_on_click_exports);
|
|
34
|
+
var import_clipboard = __toESM(require("clipboard"));
|
|
35
|
+
var import_element = require("@wordpress/element");
|
|
36
|
+
var import_deprecated = __toESM(require("@wordpress/deprecated"));
|
|
37
|
+
function useCopyOnClick(ref, text, timeout = 4e3) {
|
|
38
|
+
(0, import_deprecated.default)("wp.compose.useCopyOnClick", {
|
|
39
|
+
since: "5.8",
|
|
40
|
+
alternative: "wp.compose.useCopyToClipboard"
|
|
38
41
|
});
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
const [hasCopied, setHasCopied] = (0, _element.useState)(false);
|
|
43
|
-
(0, _element.useEffect)(() => {
|
|
44
|
-
/** @type {number | undefined} */
|
|
42
|
+
const clipboardRef = (0, import_element.useRef)();
|
|
43
|
+
const [hasCopied, setHasCopied] = (0, import_element.useState)(false);
|
|
44
|
+
(0, import_element.useEffect)(() => {
|
|
45
45
|
let timeoutId;
|
|
46
46
|
if (!ref.current) {
|
|
47
47
|
return;
|
|
48
48
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
clipboardRef.current = new _clipboard.default(ref.current, {
|
|
52
|
-
text: () => typeof text === 'function' ? text() : text
|
|
49
|
+
clipboardRef.current = new import_clipboard.default(ref.current, {
|
|
50
|
+
text: () => typeof text === "function" ? text() : text
|
|
53
51
|
});
|
|
54
|
-
clipboardRef.current.on(
|
|
55
|
-
clearSelection,
|
|
56
|
-
trigger
|
|
57
|
-
}) => {
|
|
58
|
-
// Clearing selection will move focus back to the triggering button,
|
|
59
|
-
// ensuring that it is not reset to the body, and further that it is
|
|
60
|
-
// kept within the rendered node.
|
|
52
|
+
clipboardRef.current.on("success", ({ clearSelection, trigger }) => {
|
|
61
53
|
clearSelection();
|
|
62
|
-
|
|
63
|
-
// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
|
|
64
54
|
if (trigger) {
|
|
65
|
-
|
|
55
|
+
trigger.focus();
|
|
66
56
|
}
|
|
67
57
|
if (timeout) {
|
|
68
58
|
setHasCopied(true);
|
|
@@ -79,4 +69,4 @@ function useCopyOnClick(ref, text, timeout = 4000) {
|
|
|
79
69
|
}, [text, timeout, setHasCopied]);
|
|
80
70
|
return hasCopied;
|
|
81
71
|
}
|
|
82
|
-
//# sourceMappingURL=index.js.map
|
|
72
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-copy-on-click/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n *\n * @param {import('react').RefObject<string | Element | NodeListOf<Element>>} ref Reference with the element.\n * @param {string|Function} text The text to copy.\n * @param {number} [timeout] Optional timeout to reset the returned\n * state. 4 seconds by default.\n *\n * @return {boolean} Whether or not the text has been copied. Resets after the\n * timeout.\n */\nexport default function useCopyOnClick( ref, text, timeout = 4000 ) {\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\t/** @type {import('react').MutableRefObject<Clipboard | undefined>} */\n\tconst clipboardRef = useRef();\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t/** @type {number | undefined} */\n\t\tlet timeoutId;\n\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clipboard listens to click events.\n\t\tclipboardRef.current = new Clipboard( ref.current, {\n\t\t\ttext: () => ( typeof text === 'function' ? text() : text ),\n\t\t} );\n\n\t\tclipboardRef.current.on( 'success', ( { clearSelection, trigger } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering button,\n\t\t\t// ensuring that it is not reset to the body, and further that it is\n\t\t\t// kept within the rendered node.\n\t\t\tclearSelection();\n\n\t\t\t// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680\n\t\t\tif ( trigger ) {\n\t\t\t\t/** @type {HTMLElement} */ ( trigger ).focus();\n\t\t\t}\n\n\t\t\tif ( timeout ) {\n\t\t\t\tsetHasCopied( true );\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\ttimeoutId = setTimeout( () => setHasCopied( false ), timeout );\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tif ( clipboardRef.current ) {\n\t\t\t\tclipboardRef.current.destroy();\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ text, timeout, setHasCopied ] );\n\n\treturn hasCopied;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AAKtB,qBAA4C;AAC5C,wBAAuB;AAgBR,SAAR,eAAiC,KAAK,MAAM,UAAU,KAAO;AAEnE,wBAAAA,SAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAGF,QAAM,mBAAe,uBAAO;AAC5B,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAEpD,gCAAW,MAAM;AAEhB,QAAI;AAEJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAGA,iBAAa,UAAU,IAAI,iBAAAC,QAAW,IAAI,SAAS;AAAA,MAClD,MAAM,MAAQ,OAAO,SAAS,aAAa,KAAK,IAAI;AAAA,IACrD,CAAE;AAEF,iBAAa,QAAQ,GAAI,WAAW,CAAE,EAAE,gBAAgB,QAAQ,MAAO;AAItE,qBAAe;AAGf,UAAK,SAAU;AACa,QAAE,QAAU,MAAM;AAAA,MAC9C;AAEA,UAAK,SAAU;AACd,qBAAc,IAAK;AACnB,qBAAc,SAAU;AACxB,oBAAY,WAAY,MAAM,aAAc,KAAM,GAAG,OAAQ;AAAA,MAC9D;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,UAAK,aAAa,SAAU;AAC3B,qBAAa,QAAQ,QAAQ;AAAA,MAC9B;AACA,mBAAc,SAAU;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,MAAM,SAAS,YAAa,CAAE;AAEnC,SAAO;AACR;",
|
|
6
|
+
"names": ["deprecated", "Clipboard"]
|
|
7
|
+
}
|
|
@@ -1,66 +1,56 @@
|
|
|
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_copy_to_clipboard_exports = {};
|
|
30
|
+
__export(use_copy_to_clipboard_exports, {
|
|
31
|
+
default: () => useCopyToClipboard
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
var
|
|
11
|
-
/**
|
|
12
|
-
* External dependencies
|
|
13
|
-
*/
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* WordPress dependencies
|
|
17
|
-
*/
|
|
18
|
-
|
|
19
|
-
/**
|
|
20
|
-
* Internal dependencies
|
|
21
|
-
*/
|
|
22
|
-
|
|
23
|
-
/**
|
|
24
|
-
* @template T
|
|
25
|
-
* @param {T} value
|
|
26
|
-
* @return {import('react').RefObject<T>} The updated ref
|
|
27
|
-
*/
|
|
33
|
+
module.exports = __toCommonJS(use_copy_to_clipboard_exports);
|
|
34
|
+
var import_clipboard = __toESM(require("clipboard"));
|
|
35
|
+
var import_element = require("@wordpress/element");
|
|
36
|
+
var import_use_ref_effect = __toESM(require("../use-ref-effect"));
|
|
28
37
|
function useUpdatedRef(value) {
|
|
29
|
-
const ref = (0,
|
|
30
|
-
(0,
|
|
38
|
+
const ref = (0, import_element.useRef)(value);
|
|
39
|
+
(0, import_element.useLayoutEffect)(() => {
|
|
31
40
|
ref.current = value;
|
|
32
41
|
}, [value]);
|
|
33
42
|
return ref;
|
|
34
43
|
}
|
|
35
|
-
|
|
36
|
-
/**
|
|
37
|
-
* Copies the given text to the clipboard when the element is clicked.
|
|
38
|
-
*
|
|
39
|
-
* @template {HTMLElement} TElementType
|
|
40
|
-
* @param {string | (() => string)} text The text to copy. Use a function if not
|
|
41
|
-
* already available and expensive to compute.
|
|
42
|
-
* @param {Function} onSuccess Called when to text is copied.
|
|
43
|
-
*
|
|
44
|
-
* @return {import('react').Ref<TElementType>} A ref to assign to the target element.
|
|
45
|
-
*/
|
|
46
44
|
function useCopyToClipboard(text, onSuccess) {
|
|
47
|
-
// Store the dependencies as refs and continuously update them so they're
|
|
48
|
-
// fresh when the callback is called.
|
|
49
45
|
const textRef = useUpdatedRef(text);
|
|
50
46
|
const onSuccessRef = useUpdatedRef(onSuccess);
|
|
51
|
-
return (0,
|
|
52
|
-
|
|
53
|
-
const clipboard = new _clipboard.default(node, {
|
|
47
|
+
return (0, import_use_ref_effect.default)((node) => {
|
|
48
|
+
const clipboard = new import_clipboard.default(node, {
|
|
54
49
|
text() {
|
|
55
|
-
return typeof textRef.current ===
|
|
50
|
+
return typeof textRef.current === "function" ? textRef.current() : textRef.current || "";
|
|
56
51
|
}
|
|
57
52
|
});
|
|
58
|
-
clipboard.on(
|
|
59
|
-
clearSelection
|
|
60
|
-
}) => {
|
|
61
|
-
// Clearing selection will move focus back to the triggering
|
|
62
|
-
// button, ensuring that it is not reset to the body, and
|
|
63
|
-
// further that it is kept within the rendered node.
|
|
53
|
+
clipboard.on("success", ({ clearSelection }) => {
|
|
64
54
|
clearSelection();
|
|
65
55
|
if (onSuccessRef.current) {
|
|
66
56
|
onSuccessRef.current();
|
|
@@ -71,4 +61,4 @@ function useCopyToClipboard(text, onSuccess) {
|
|
|
71
61
|
};
|
|
72
62
|
}, []);
|
|
73
63
|
}
|
|
74
|
-
//# sourceMappingURL=index.js.map
|
|
64
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-copy-to-clipboard/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * @template T\n * @param {T} value\n * @return {import('react').RefObject<T>} The updated ref\n */\nfunction useUpdatedRef( value ) {\n\tconst ref = useRef( value );\n\tuseLayoutEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] );\n\treturn ref;\n}\n\n/**\n * Copies the given text to the clipboard when the element is clicked.\n *\n * @template {HTMLElement} TElementType\n * @param {string | (() => string)} text The text to copy. Use a function if not\n * already available and expensive to compute.\n * @param {Function} onSuccess Called when to text is copied.\n *\n * @return {import('react').Ref<TElementType>} A ref to assign to the target element.\n */\nexport default function useCopyToClipboard( text, onSuccess ) {\n\t// Store the dependencies as refs and continuously update them so they're\n\t// fresh when the callback is called.\n\tconst textRef = useUpdatedRef( text );\n\tconst onSuccessRef = useUpdatedRef( onSuccess );\n\treturn useRefEffect( ( node ) => {\n\t\t// Clipboard listens to click events.\n\t\tconst clipboard = new Clipboard( node, {\n\t\t\ttext() {\n\t\t\t\treturn typeof textRef.current === 'function'\n\t\t\t\t\t? textRef.current()\n\t\t\t\t\t: textRef.current || '';\n\t\t\t},\n\t\t} );\n\n\t\tclipboard.on( 'success', ( { clearSelection } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering\n\t\t\t// button, ensuring that it is not reset to the body, and\n\t\t\t// further that it is kept within the rendered node.\n\t\t\tclearSelection();\n\n\t\t\tif ( onSuccessRef.current ) {\n\t\t\t\tonSuccessRef.current();\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tclipboard.destroy();\n\t\t};\n\t}, [] );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AAKtB,qBAAwC;AAKxC,4BAAyB;AAOzB,SAAS,cAAe,OAAQ;AAC/B,QAAM,UAAM,uBAAQ,KAAM;AAC1B,sCAAiB,MAAM;AACtB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AACb,SAAO;AACR;AAYe,SAAR,mBAAqC,MAAM,WAAY;AAG7D,QAAM,UAAU,cAAe,IAAK;AACpC,QAAM,eAAe,cAAe,SAAU;AAC9C,aAAO,sBAAAA,SAAc,CAAE,SAAU;AAEhC,UAAM,YAAY,IAAI,iBAAAC,QAAW,MAAM;AAAA,MACtC,OAAO;AACN,eAAO,OAAO,QAAQ,YAAY,aAC/B,QAAQ,QAAQ,IAChB,QAAQ,WAAW;AAAA,MACvB;AAAA,IACD,CAAE;AAEF,cAAU,GAAI,WAAW,CAAE,EAAE,eAAe,MAAO;AAIlD,qBAAe;AAEf,UAAK,aAAa,SAAU;AAC3B,qBAAa,QAAQ;AAAA,MACtB;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,QAAQ;AAAA,IACnB;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
|
|
6
|
+
"names": ["useRefEffect", "Clipboard"]
|
|
7
|
+
}
|
|
@@ -1,42 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.
|
|
4
|
-
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var use_debounce_exports = {};
|
|
20
|
+
__export(use_debounce_exports, {
|
|
21
|
+
default: () => useDebounce
|
|
5
22
|
});
|
|
6
|
-
exports
|
|
7
|
-
var
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
/**
|
|
11
|
-
* External dependencies
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
|
-
/**
|
|
15
|
-
* WordPress dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Internal dependencies
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Debounces a function similar to Lodash's `debounce`. A new debounced function will
|
|
24
|
-
* be returned and any scheduled calls cancelled if any of the arguments change,
|
|
25
|
-
* including the function to debounce, so please wrap functions created on
|
|
26
|
-
* render in components in `useCallback`.
|
|
27
|
-
*
|
|
28
|
-
* @see https://lodash.com/docs/4#debounce
|
|
29
|
-
*
|
|
30
|
-
* @template {(...args: any[]) => void} TFunc
|
|
31
|
-
*
|
|
32
|
-
* @param {TFunc} fn The function to debounce.
|
|
33
|
-
* @param {number} [wait] The number of milliseconds to delay.
|
|
34
|
-
* @param {import('../../utils/debounce').DebounceOptions} [options] The options object.
|
|
35
|
-
* @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.
|
|
36
|
-
*/
|
|
23
|
+
module.exports = __toCommonJS(use_debounce_exports);
|
|
24
|
+
var import_use_memo_one = require("use-memo-one");
|
|
25
|
+
var import_element = require("@wordpress/element");
|
|
26
|
+
var import_debounce = require("../../utils/debounce");
|
|
37
27
|
function useDebounce(fn, wait, options) {
|
|
38
|
-
const debounced = (0,
|
|
39
|
-
|
|
28
|
+
const debounced = (0, import_use_memo_one.useMemoOne)(
|
|
29
|
+
() => (0, import_debounce.debounce)(fn, wait ?? 0, options),
|
|
30
|
+
[fn, wait, options?.leading, options?.trailing, options?.maxWait]
|
|
31
|
+
);
|
|
32
|
+
(0, import_element.useEffect)(() => () => debounced.cancel(), [debounced]);
|
|
40
33
|
return debounced;
|
|
41
34
|
}
|
|
42
|
-
//# sourceMappingURL=index.js.map
|
|
35
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-debounce/index.js"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#debounce\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc} fn The function to debounce.\n * @param {number} [wait] The number of milliseconds to delay.\n * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\tconst debounced = useMemoOne(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options?.leading, options?.trailing, options?.maxWait ]\n\t);\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA2B;AAK3B,qBAA0B;AAK1B,sBAAyB;AAiBV,SAAR,YAA8B,IAAI,MAAM,SAAU;AACxD,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,SAAS,SAAS,SAAS,UAAU,SAAS,OAAQ;AAAA,EACnE;AACA,gCAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,33 +1,45 @@
|
|
|
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_debounced_input_exports = {};
|
|
30
|
+
__export(use_debounced_input_exports, {
|
|
31
|
+
default: () => useDebouncedInput
|
|
6
32
|
});
|
|
7
|
-
exports
|
|
8
|
-
var
|
|
9
|
-
var
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
* Internal dependencies
|
|
16
|
-
*/
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* Helper hook for input fields that need to debounce the value before using it.
|
|
20
|
-
*
|
|
21
|
-
* @param defaultValue The default value to use.
|
|
22
|
-
* @return The input value, the setter and the debounced input value.
|
|
23
|
-
*/
|
|
24
|
-
function useDebouncedInput(defaultValue = '') {
|
|
25
|
-
const [input, setInput] = (0, _element.useState)(defaultValue);
|
|
26
|
-
const [debouncedInput, setDebouncedState] = (0, _element.useState)(defaultValue);
|
|
27
|
-
const setDebouncedInput = (0, _useDebounce.default)(setDebouncedState, 250);
|
|
28
|
-
(0, _element.useEffect)(() => {
|
|
33
|
+
module.exports = __toCommonJS(use_debounced_input_exports);
|
|
34
|
+
var import_element = require("@wordpress/element");
|
|
35
|
+
var import_use_debounce = __toESM(require("../use-debounce"));
|
|
36
|
+
function useDebouncedInput(defaultValue = "") {
|
|
37
|
+
const [input, setInput] = (0, import_element.useState)(defaultValue);
|
|
38
|
+
const [debouncedInput, setDebouncedState] = (0, import_element.useState)(defaultValue);
|
|
39
|
+
const setDebouncedInput = (0, import_use_debounce.default)(setDebouncedState, 250);
|
|
40
|
+
(0, import_element.useEffect)(() => {
|
|
29
41
|
setDebouncedInput(input);
|
|
30
42
|
}, [input, setDebouncedInput]);
|
|
31
43
|
return [input, setInput, debouncedInput];
|
|
32
44
|
}
|
|
33
|
-
//# sourceMappingURL=index.js.map
|
|
45
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1,7 @@
|
|
|
1
|
-
{
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-debounced-input/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useDebounce from '../use-debounce';\n\n/**\n * Helper hook for input fields that need to debounce the value before using it.\n *\n * @param defaultValue The default value to use.\n * @return The input value, the setter and the debounced input value.\n */\nexport default function useDebouncedInput(\n\tdefaultValue = ''\n): [ string, ( value: string ) => void, string ] {\n\tconst [ input, setInput ] = useState< string >( defaultValue );\n\tconst [ debouncedInput, setDebouncedState ] = useState( defaultValue );\n\n\tconst setDebouncedInput = useDebounce( setDebouncedState, 250 );\n\n\tuseEffect( () => {\n\t\tsetDebouncedInput( input );\n\t}, [ input, setDebouncedInput ] );\n\n\treturn [ input, setInput, debouncedInput ];\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoC;AAKpC,0BAAwB;AAQT,SAAR,kBACN,eAAe,IACiC;AAChD,QAAM,CAAE,OAAO,QAAS,QAAI,yBAAoB,YAAa;AAC7D,QAAM,CAAE,gBAAgB,iBAAkB,QAAI,yBAAU,YAAa;AAErE,QAAM,wBAAoB,oBAAAA,SAAa,mBAAmB,GAAI;AAE9D,gCAAW,MAAM;AAChB,sBAAmB,KAAM;AAAA,EAC1B,GAAG,CAAE,OAAO,iBAAkB,CAAE;AAEhC,SAAO,CAAE,OAAO,UAAU,cAAe;AAC1C;",
|
|
6
|
+
"names": ["useDebounce"]
|
|
7
|
+
}
|