@wordpress/compose 5.16.0 → 5.17.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/README.md +36 -3
- package/build/higher-order/with-global-events/listener.js +7 -7
- package/build/higher-order/with-global-events/listener.js.map +1 -1
- package/build/higher-order/with-safe-timeout/index.js +1 -7
- package/build/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build/hooks/use-disabled/index.js +1 -7
- package/build/hooks/use-disabled/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js +2 -10
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.js +2 -8
- package/build/hooks/use-focus-outside/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.native.js +2 -8
- package/build/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js +2 -3
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-merge-refs/index.js +4 -2
- package/build/hooks/use-merge-refs/index.js.map +1 -1
- package/build/hooks/use-throttle/index.js +12 -8
- package/build/hooks/use-throttle/index.js.map +1 -1
- package/build/index.js +14 -0
- package/build/index.js.map +1 -1
- package/build/index.native.js +14 -0
- package/build/index.native.js.map +1 -1
- package/build/utils/throttle/index.js +98 -0
- package/build/utils/throttle/index.js.map +1 -0
- package/build-module/higher-order/with-global-events/listener.js +7 -6
- package/build-module/higher-order/with-global-events/listener.js.map +1 -1
- package/build-module/higher-order/with-safe-timeout/index.js +1 -6
- package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js +1 -6
- package/build-module/hooks/use-disabled/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js +2 -10
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.js +2 -7
- package/build-module/hooks/use-focus-outside/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js +2 -7
- package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +2 -2
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-merge-refs/index.js +4 -2
- package/build-module/hooks/use-merge-refs/index.js.map +1 -1
- package/build-module/hooks/use-throttle/index.js +11 -7
- package/build-module/hooks/use-throttle/index.js.map +1 -1
- package/build-module/index.js +3 -1
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +3 -1
- package/build-module/index.native.js.map +1 -1
- package/build-module/utils/throttle/index.js +88 -0
- package/build-module/utils/throttle/index.js.map +1 -0
- package/build-types/higher-order/with-global-events/listener.d.ts.map +1 -1
- package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
- package/build-types/hooks/use-drop-zone/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-outside/index.d.ts.map +1 -1
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
- package/build-types/hooks/use-merge-refs/index.d.ts.map +1 -1
- package/build-types/hooks/use-throttle/index.d.ts +6 -6
- package/build-types/hooks/use-throttle/index.d.ts.map +1 -1
- package/build-types/index.d.ts +1 -0
- package/build-types/utils/throttle/index.d.ts +77 -0
- package/build-types/utils/throttle/index.d.ts.map +1 -0
- package/package.json +8 -10
- package/src/higher-order/with-global-events/listener.js +6 -8
- package/src/higher-order/with-safe-timeout/index.tsx +1 -6
- package/src/hooks/use-disabled/index.js +1 -7
- package/src/hooks/use-drop-zone/index.js +4 -13
- package/src/hooks/use-focus-outside/index.js +2 -8
- package/src/hooks/use-focus-outside/index.native.js +2 -8
- package/src/hooks/use-keyboard-shortcut/index.js +4 -2
- package/src/hooks/use-merge-refs/index.js +6 -1
- package/src/hooks/use-merge-refs/test/index.js +44 -0
- package/src/hooks/use-throttle/index.js +11 -7
- package/src/index.js +2 -0
- package/src/index.native.js +2 -0
- package/src/utils/throttle/index.ts +95 -0
- package/src/utils/throttle/test/index.ts +256 -0
- package/tsconfig.tsbuildinfo +1 -1
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -161,6 +161,39 @@ _Related_
|
|
|
161
161
|
Given a component returns the enhanced component augmented with a component
|
|
162
162
|
only re-rendering when its props/state change
|
|
163
163
|
|
|
164
|
+
### throttle
|
|
165
|
+
|
|
166
|
+
A simplified and properly typed version of lodash's `throttle`, that
|
|
167
|
+
always uses timers instead of sometimes using rAF.
|
|
168
|
+
|
|
169
|
+
Creates a throttled function that only invokes `func` at most once per
|
|
170
|
+
every `wait` milliseconds. The throttled function comes with a `cancel`
|
|
171
|
+
method to cancel delayed `func` invocations and a `flush` method to
|
|
172
|
+
immediately invoke them. Provide `options` to indicate whether `func`
|
|
173
|
+
should be invoked on the leading and/or trailing edge of the `wait`
|
|
174
|
+
timeout. The `func` is invoked with the last arguments provided to the
|
|
175
|
+
throttled function. Subsequent calls to the throttled function return
|
|
176
|
+
the result of the last `func` invocation.
|
|
177
|
+
|
|
178
|
+
**Note:** If `leading` and `trailing` options are `true`, `func` is
|
|
179
|
+
invoked on the trailing edge of the timeout only if the throttled function
|
|
180
|
+
is invoked more than once during the `wait` timeout.
|
|
181
|
+
|
|
182
|
+
If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
|
|
183
|
+
until the next tick, similar to `setTimeout` with a timeout of `0`.
|
|
184
|
+
|
|
185
|
+
_Parameters_
|
|
186
|
+
|
|
187
|
+
- _func_ `Function`: The function to throttle.
|
|
188
|
+
- _wait_ `number`: The number of milliseconds to throttle invocations to.
|
|
189
|
+
- _options_ `Partial< ThrottleOptions >`: The options object.
|
|
190
|
+
- _options.leading_ `boolean`: Specify invoking on the leading edge of the timeout.
|
|
191
|
+
- _options.trailing_ `boolean`: Specify invoking on the trailing edge of the timeout.
|
|
192
|
+
|
|
193
|
+
_Returns_
|
|
194
|
+
|
|
195
|
+
- Returns the new throttled function.
|
|
196
|
+
|
|
164
197
|
### useAsyncList
|
|
165
198
|
|
|
166
199
|
React hook returns an array which items get asynchronously appended from a source array.
|
|
@@ -511,7 +544,7 @@ const App = () => {
|
|
|
511
544
|
|
|
512
545
|
### useThrottle
|
|
513
546
|
|
|
514
|
-
Throttles a function
|
|
547
|
+
Throttles a function similar to Lodash's `throttle`. A new throttled function will
|
|
515
548
|
be returned and any scheduled calls cancelled if any of the arguments change,
|
|
516
549
|
including the function to throttle, so please wrap functions created on
|
|
517
550
|
render in components in `useCallback`.
|
|
@@ -524,11 +557,11 @@ _Parameters_
|
|
|
524
557
|
|
|
525
558
|
- _fn_ `TFunc`: The function to throttle.
|
|
526
559
|
- _wait_ `[number]`: The number of milliseconds to throttle invocations to.
|
|
527
|
-
- _options_ `[import('
|
|
560
|
+
- _options_ `[import('../../utils/throttle').ThrottleOptions]`: The options object. See linked documentation for details.
|
|
528
561
|
|
|
529
562
|
_Returns_
|
|
530
563
|
|
|
531
|
-
- `import('
|
|
564
|
+
- `import('../../utils/debounce').DebouncedFunc<TFunc>`: Throttled function.
|
|
532
565
|
|
|
533
566
|
### useViewportMatch
|
|
534
567
|
|
|
@@ -5,12 +5,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
|
|
8
|
-
var _lodash = require("lodash");
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* External dependencies
|
|
12
|
-
*/
|
|
13
|
-
|
|
14
8
|
/**
|
|
15
9
|
* Class responsible for orchestrating event handling on the global window,
|
|
16
10
|
* binding a single event to be shared across all handling instances, and
|
|
@@ -42,7 +36,13 @@ class Listener {
|
|
|
42
36
|
eventType,
|
|
43
37
|
/** @type {any} */
|
|
44
38
|
instance) {
|
|
45
|
-
|
|
39
|
+
if (!this.listeners[eventType]) {
|
|
40
|
+
return;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
this.listeners[eventType] = this.listeners[eventType].filter((
|
|
44
|
+
/** @type {any} */
|
|
45
|
+
listener) => listener !== instance);
|
|
46
46
|
|
|
47
47
|
if (!this.listeners[eventType].length) {
|
|
48
48
|
// Removing last listener for this type, so unbind event.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/higher-order/with-global-events/listener.js"],"names":["Listener","constructor","listeners","handleEvent","bind","add","eventType","instance","window","addEventListener","push","remove","length","removeEventListener","event","type","forEach"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/higher-order/with-global-events/listener.js"],"names":["Listener","constructor","listeners","handleEvent","bind","add","eventType","instance","window","addEventListener","push","remove","filter","listener","length","removeEventListener","event","type","forEach"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAN,CAAe;AACdC,EAAAA,WAAW,GAAG;AACb;AACA,SAAKC,SAAL,GAAiB,EAAjB;AAEA,SAAKC,WAAL,GAAmB,KAAKA,WAAL,CAAiBC,IAAjB,CAAuB,IAAvB,CAAnB;AACA;;AAEDC,EAAAA,GAAG;AAAE;AAAmBC,EAAAA,SAArB;AAAgC;AAAmBC,EAAAA,QAAnD,EAA8D;AAChE,QAAK,CAAE,KAAKL,SAAL,CAAgBI,SAAhB,CAAP,EAAqC;AACpC;AACAE,MAAAA,MAAM,CAACC,gBAAP,CAAyBH,SAAzB,EAAoC,KAAKH,WAAzC;AACA,WAAKD,SAAL,CAAgBI,SAAhB,IAA8B,EAA9B;AACA;;AAED,SAAKJ,SAAL,CAAgBI,SAAhB,EAA4BI,IAA5B,CAAkCH,QAAlC;AACA;;AAEDI,EAAAA,MAAM;AAAE;AAAmBL,EAAAA,SAArB;AAAgC;AAAmBC,EAAAA,QAAnD,EAA8D;AACnE,QAAK,CAAE,KAAKL,SAAL,CAAgBI,SAAhB,CAAP,EAAqC;AACpC;AACA;;AAED,SAAKJ,SAAL,CAAgBI,SAAhB,IAA8B,KAAKJ,SAAL,CAAgBI,SAAhB,EAA4BM,MAA5B,CAC7B;AAAE;AAAmBC,IAAAA,QAArB,KAAmCA,QAAQ,KAAKN,QADnB,CAA9B;;AAIA,QAAK,CAAE,KAAKL,SAAL,CAAgBI,SAAhB,EAA4BQ,MAAnC,EAA4C;AAC3C;AACAN,MAAAA,MAAM,CAACO,mBAAP,CAA4BT,SAA5B,EAAuC,KAAKH,WAA5C;AACA,aAAO,KAAKD,SAAL,CAAgBI,SAAhB,CAAP;AACA;AACD;;AAEDH,EAAAA,WAAW;AAAE;AAAmBa,EAAAA,KAArB,EAA6B;AAAA;;AACvC,kCAAKd,SAAL,CAAgBc,KAAK,CAACC,IAAtB,iFAA8BC,OAA9B,CACC;AAAE;AAAmBX,IAAAA,QAArB,KAAmC;AAClCA,MAAAA,QAAQ,CAACJ,WAAT,CAAsBa,KAAtB;AACA,KAHF;AAKA;;AAxCa;;eA2CAhB,Q","sourcesContent":["/**\n * Class responsible for orchestrating event handling on the global window,\n * binding a single event to be shared across all handling instances, and\n * removing the handler when no instances are listening for the event.\n */\nclass Listener {\n\tconstructor() {\n\t\t/** @type {any} */\n\t\tthis.listeners = {};\n\n\t\tthis.handleEvent = this.handleEvent.bind( this );\n\t}\n\n\tadd( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\t// Adding first listener for this type, so bind event.\n\t\t\twindow.addEventListener( eventType, this.handleEvent );\n\t\t\tthis.listeners[ eventType ] = [];\n\t\t}\n\n\t\tthis.listeners[ eventType ].push( instance );\n\t}\n\n\tremove( /** @type {any} */ eventType, /** @type {any} */ instance ) {\n\t\tif ( ! this.listeners[ eventType ] ) {\n\t\t\treturn;\n\t\t}\n\n\t\tthis.listeners[ eventType ] = this.listeners[ eventType ].filter(\n\t\t\t( /** @type {any} */ listener ) => listener !== instance\n\t\t);\n\n\t\tif ( ! this.listeners[ eventType ].length ) {\n\t\t\t// Removing last listener for this type, so unbind event.\n\t\t\twindow.removeEventListener( eventType, this.handleEvent );\n\t\t\tdelete this.listeners[ eventType ];\n\t\t}\n\t}\n\n\thandleEvent( /** @type {any} */ event ) {\n\t\tthis.listeners[ event.type ]?.forEach(\n\t\t\t( /** @type {any} */ instance ) => {\n\t\t\t\tinstance.handleEvent( event );\n\t\t\t}\n\t\t);\n\t}\n}\n\nexport default Listener;\n"]}
|
|
@@ -11,14 +11,8 @@ var _element = require("@wordpress/element");
|
|
|
11
11
|
|
|
12
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
13
13
|
|
|
14
|
-
var _lodash = require("lodash");
|
|
15
|
-
|
|
16
14
|
var _createHigherOrderComponent = require("../../utils/create-higher-order-component");
|
|
17
15
|
|
|
18
|
-
/**
|
|
19
|
-
* External dependencies
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
16
|
/**
|
|
23
17
|
* WordPress dependencies
|
|
24
18
|
*/
|
|
@@ -55,7 +49,7 @@ const withSafeTimeout = (0, _createHigherOrderComponent.createHigherOrderCompone
|
|
|
55
49
|
|
|
56
50
|
clearTimeout(id) {
|
|
57
51
|
clearTimeout(id);
|
|
58
|
-
this.timeouts
|
|
52
|
+
this.timeouts.filter(timeoutId => timeoutId !== id);
|
|
59
53
|
}
|
|
60
54
|
|
|
61
55
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"names":["withSafeTimeout","OriginalComponent","WrappedComponent","Component","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","render"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"names":["withSafeTimeout","OriginalComponent","WrappedComponent","Component","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","filter","timeoutId","render"],"mappings":";;;;;;;;;AAGA;;;;AAKA;;AARA;AACA;AACA;;AAGA;AACA;AACA;;AAoBA;AACA;AACA;AACA;AACA,MAAMA,eAAe,GAAG,4DAEtBC,iBADD,IAEK;AAEJ,SAAO,MAAMC,gBAAN,SAA+BC,kBAA/B,CAAyD;AAG/DC,IAAAA,WAAW,CAAEC,KAAF,EAAwB;AAClC,YAAOA,KAAP;AACA,WAAKC,QAAL,GAAgB,EAAhB;AACA,WAAKC,UAAL,GAAkB,KAAKA,UAAL,CAAgBC,IAAhB,CAAsB,IAAtB,CAAlB;AACA,WAAKC,YAAL,GAAoB,KAAKA,YAAL,CAAkBD,IAAlB,CAAwB,IAAxB,CAApB;AACA;;AAEDE,IAAAA,oBAAoB,GAAG;AACtB,WAAKJ,QAAL,CAAcK,OAAd,CAAuBF,YAAvB;AACA;;AAEDF,IAAAA,UAAU,CAAEK,EAAF,EAAkBC,KAAlB,EAAkC;AAC3C,YAAMC,EAAE,GAAGP,UAAU,CAAE,MAAM;AAC5BK,QAAAA,EAAE;AACF,aAAKH,YAAL,CAAmBK,EAAnB;AACA,OAHoB,EAGlBD,KAHkB,CAArB;AAIA,WAAKP,QAAL,CAAcS,IAAd,CAAoBD,EAApB;AACA,aAAOA,EAAP;AACA;;AAEDL,IAAAA,YAAY,CAAEK,EAAF,EAAe;AAC1BL,MAAAA,YAAY,CAAEK,EAAF,CAAZ;AACA,WAAKR,QAAL,CAAcU,MAAd,CAAwBC,SAAF,IAAiBA,SAAS,KAAKH,EAArD;AACA;;AAEDI,IAAAA,MAAM,GAAG;AACR,aACC;AACA,oCAAC,iBAAD,6BACM,KAAKb,KADX;AAEC,UAAA,UAAU,EAAG,KAAKE,UAFnB;AAGC,UAAA,YAAY,EAAG,KAAKE;AAHrB;AAFD;AAQA;;AArC8D,GAAhE;AAuCA,CA5CsB,EA6CvB,iBA7CuB,CAAxB;eAgDeT,e","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport {\n\tcreateHigherOrderComponent,\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\n\n/**\n * We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`\n * types here because those functions include functionality that is not handled\n * by this component, like the ability to pass extra arguments.\n *\n * In the case of this component, we only handle the simplest case where\n * `setTimeout` only accepts a function (not a string) and an optional delay.\n */\ninterface TimeoutProps {\n\tsetTimeout: ( fn: () => void, delay: number ) => number;\n\tclearTimeout: ( id: number ) => void;\n}\n\n/**\n * A higher-order component used to provide and manage delayed function calls\n * that ought to be bound to a component's lifecycle.\n */\nconst withSafeTimeout = createHigherOrderComponent(\n\t< C extends WithInjectedProps< C, TimeoutProps > >(\n\t\tOriginalComponent: C\n\t) => {\n\t\ttype WrappedProps = WithoutInjectedProps< C, TimeoutProps >;\n\t\treturn class WrappedComponent extends Component< WrappedProps > {\n\t\t\ttimeouts: number[];\n\n\t\t\tconstructor( props: WrappedProps ) {\n\t\t\t\tsuper( props );\n\t\t\t\tthis.timeouts = [];\n\t\t\t\tthis.setTimeout = this.setTimeout.bind( this );\n\t\t\t\tthis.clearTimeout = this.clearTimeout.bind( this );\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tthis.timeouts.forEach( clearTimeout );\n\t\t\t}\n\n\t\t\tsetTimeout( fn: () => void, delay: number ) {\n\t\t\t\tconst id = setTimeout( () => {\n\t\t\t\t\tfn();\n\t\t\t\t\tthis.clearTimeout( id );\n\t\t\t\t}, delay );\n\t\t\t\tthis.timeouts.push( id );\n\t\t\t\treturn id;\n\t\t\t}\n\n\t\t\tclearTimeout( id: number ) {\n\t\t\t\tclearTimeout( id );\n\t\t\t\tthis.timeouts.filter( ( timeoutId ) => timeoutId !== id );\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t<OriginalComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\tsetTimeout={ this.setTimeout }\n\t\t\t\t\t\tclearTimeout={ this.clearTimeout }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t},\n\t'withSafeTimeout'\n);\n\nexport default withSafeTimeout;\n"]}
|
|
@@ -7,18 +7,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
});
|
|
8
8
|
exports.default = useDisabled;
|
|
9
9
|
|
|
10
|
-
var _lodash = require("lodash");
|
|
11
|
-
|
|
12
10
|
var _dom = require("@wordpress/dom");
|
|
13
11
|
|
|
14
12
|
var _debounce = require("../../utils/debounce");
|
|
15
13
|
|
|
16
14
|
var _useRefEffect = _interopRequireDefault(require("../use-ref-effect"));
|
|
17
15
|
|
|
18
|
-
/**
|
|
19
|
-
* External dependencies
|
|
20
|
-
*/
|
|
21
|
-
|
|
22
16
|
/**
|
|
23
17
|
* WordPress dependencies
|
|
24
18
|
*/
|
|
@@ -94,7 +88,7 @@ function useDisabled() {
|
|
|
94
88
|
_dom.focus.focusable.find(node).forEach(focusable => {
|
|
95
89
|
var _node$ownerDocument$d;
|
|
96
90
|
|
|
97
|
-
if (
|
|
91
|
+
if (DISABLED_ELIGIBLE_NODE_NAMES.includes(focusable.nodeName) && // @ts-ignore
|
|
98
92
|
!focusable.disabled) {
|
|
99
93
|
focusable.setAttribute('disabled', '');
|
|
100
94
|
updates.push(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focus","focusable","find","forEach","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":"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","sourcesContent":["/**\n * External dependencies\n */\nimport { includes } from 'lodash';\n\n/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\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 * @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 * 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\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\t/** @type {Function[]} */\n\t\t\tconst updates = [];\n\n\t\t\tconst disable = () => {\n\t\t\t\tif ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {\n\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\tnode.style.getPropertyValue( 'user-select' );\n\t\t\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\tif ( ! node.isConnected ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnode.style.setProperty( 'user-select', previousValue );\n\t\t\t\t\t\tnode.style.setProperty(\n\t\t\t\t\t\t\t'-webkit-user-select',\n\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tincludes(\n\t\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES,\n\t\t\t\t\t\t\tfocusable.nodeName\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t! focusable.disabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t\tfocusable.disabled = false;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.nodeName === 'A' &&\n\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' ) !== '-1'\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' );\n\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( ! previousValue ) {\n\t\t\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusable.setAttribute(\n\t\t\t\t\t\t\t\t\t'tabindex',\n\t\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', tabIndex );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.hasAttribute( 'contenteditable' ) &&\n\t\t\t\t\t\tfocusable.getAttribute( 'contenteditable' ) !== 'false'\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'true' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.style.getPropertyValue(\n\t\t\t\t\t\t\t\t'pointer-events'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.style.setProperty(\n\t\t\t\t\t\t\t\t'pointer-events',\n\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\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\tattributes: true,\n\t\t\t\tsubtree: 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"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-disabled/index.js"],"names":["DISABLED_ELIGIBLE_NODE_NAMES","useDisabled","isDisabled","isDisabledProp","node","updates","disable","style","getPropertyValue","previousValue","setProperty","push","isConnected","focus","focusable","find","forEach","includes","nodeName","disabled","setAttribute","getAttribute","removeAttribute","tabIndex","hasAttribute","ownerDocument","defaultView","HTMLElement","debouncedDisable","leading","observer","window","MutationObserver","observe","childList","attributes","subtree","disconnect","cancel","update"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Names of control nodes which qualify for disabled behavior.\n *\n * See WHATWG HTML Standard: 4.10.18.5: \"Enabling and disabling form controls: the disabled attribute\".\n *\n * @see https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#enabling-and-disabling-form-controls:-the-disabled-attribute\n *\n * @type {string[]}\n */\nconst DISABLED_ELIGIBLE_NODE_NAMES = [\n\t'BUTTON',\n\t'FIELDSET',\n\t'INPUT',\n\t'OPTGROUP',\n\t'OPTION',\n\t'SELECT',\n\t'TEXTAREA',\n];\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 * @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 * 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\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\t/** @type {Function[]} */\n\t\t\tconst updates = [];\n\n\t\t\tconst disable = () => {\n\t\t\t\tif ( node.style.getPropertyValue( 'user-select' ) !== 'none' ) {\n\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\tnode.style.getPropertyValue( 'user-select' );\n\t\t\t\t\tnode.style.setProperty( 'user-select', 'none' );\n\t\t\t\t\tnode.style.setProperty( '-webkit-user-select', 'none' );\n\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\tif ( ! node.isConnected ) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tnode.style.setProperty( 'user-select', previousValue );\n\t\t\t\t\t\tnode.style.setProperty(\n\t\t\t\t\t\t\t'-webkit-user-select',\n\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t);\n\t\t\t\t\t} );\n\t\t\t\t}\n\n\t\t\t\tfocus.focusable.find( node ).forEach( ( focusable ) => {\n\t\t\t\t\tif (\n\t\t\t\t\t\tDISABLED_ELIGIBLE_NODE_NAMES.includes(\n\t\t\t\t\t\t\tfocusable.nodeName\n\t\t\t\t\t\t) &&\n\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t! focusable.disabled\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'disabled', '' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t// @ts-ignore\n\t\t\t\t\t\t\tfocusable.disabled = false;\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.nodeName === 'A' &&\n\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' ) !== '-1'\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.getAttribute( 'tabindex' );\n\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', '-1' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tif ( ! previousValue ) {\n\t\t\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\t\t} else {\n\t\t\t\t\t\t\t\tfocusable.setAttribute(\n\t\t\t\t\t\t\t\t\t'tabindex',\n\t\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t\t);\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tconst tabIndex = focusable.getAttribute( 'tabindex' );\n\t\t\t\t\tif ( tabIndex !== null && tabIndex !== '-1' ) {\n\t\t\t\t\t\tfocusable.removeAttribute( 'tabindex' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'tabindex', tabIndex );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tfocusable.hasAttribute( 'contenteditable' ) &&\n\t\t\t\t\t\tfocusable.getAttribute( 'contenteditable' ) !== 'false'\n\t\t\t\t\t) {\n\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'false' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.setAttribute( 'contenteditable', 'true' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\n\t\t\t\t\tif (\n\t\t\t\t\t\tnode.ownerDocument.defaultView?.HTMLElement &&\n\t\t\t\t\t\tfocusable instanceof\n\t\t\t\t\t\t\tnode.ownerDocument.defaultView.HTMLElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst previousValue =\n\t\t\t\t\t\t\tfocusable.style.getPropertyValue(\n\t\t\t\t\t\t\t\t'pointer-events'\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\tfocusable.style.setProperty( 'pointer-events', 'none' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tif ( ! focusable.isConnected ) {\n\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\tfocusable.style.setProperty(\n\t\t\t\t\t\t\t\t'pointer-events',\n\t\t\t\t\t\t\t\tpreviousValue\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\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\tattributes: true,\n\t\t\t\tsubtree: 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"]}
|
|
@@ -122,8 +122,7 @@ function useDropZone(_ref) {
|
|
|
122
122
|
return;
|
|
123
123
|
}
|
|
124
124
|
|
|
125
|
-
isDragging = true;
|
|
126
|
-
ownerDocument.removeEventListener('dragenter', maybeDragStart); // Note that `dragend` doesn't fire consistently for file and
|
|
125
|
+
isDragging = true; // Note that `dragend` doesn't fire consistently for file and
|
|
127
126
|
// HTML drag events where the drag origin is outside the browser
|
|
128
127
|
// window. In Firefox it may also not fire if the originating
|
|
129
128
|
// node is removed.
|
|
@@ -219,7 +218,6 @@ function useDropZone(_ref) {
|
|
|
219
218
|
}
|
|
220
219
|
|
|
221
220
|
isDragging = false;
|
|
222
|
-
ownerDocument.addEventListener('dragenter', maybeDragStart);
|
|
223
221
|
ownerDocument.removeEventListener('dragend', maybeDragEnd);
|
|
224
222
|
ownerDocument.removeEventListener('mousemove', maybeDragEnd);
|
|
225
223
|
|
|
@@ -237,12 +235,6 @@ function useDropZone(_ref) {
|
|
|
237
235
|
|
|
238
236
|
ownerDocument.addEventListener('dragenter', maybeDragStart);
|
|
239
237
|
return () => {
|
|
240
|
-
onDropRef.current = null;
|
|
241
|
-
onDragStartRef.current = null;
|
|
242
|
-
onDragEnterRef.current = null;
|
|
243
|
-
onDragLeaveRef.current = null;
|
|
244
|
-
onDragEndRef.current = null;
|
|
245
|
-
onDragOverRef.current = null;
|
|
246
238
|
delete element.dataset.isDropZone;
|
|
247
239
|
element.removeEventListener('drop', onDrop);
|
|
248
240
|
element.removeEventListener('dragenter', onDragEnter);
|
|
@@ -250,7 +242,7 @@ function useDropZone(_ref) {
|
|
|
250
242
|
element.removeEventListener('dragleave', onDragLeave);
|
|
251
243
|
ownerDocument.removeEventListener('dragend', maybeDragEnd);
|
|
252
244
|
ownerDocument.removeEventListener('mousemove', maybeDragEnd);
|
|
253
|
-
ownerDocument.
|
|
245
|
+
ownerDocument.removeEventListener('dragenter', maybeDragStart);
|
|
254
246
|
};
|
|
255
247
|
}, [isDisabled]);
|
|
256
248
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","removeEventListener","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T|null>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object} props Named parameters.\n * @param {boolean} [props.isDisabled] Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void} [props.onDragStart] Called when dragging has started.\n * @param {(e: DragEvent) => void} [props.onDragEnter] Called when the zone is entered.\n * @param {(e: DragEvent) => void} [props.onDragOver] Called when the zone is moved within.\n * @param {(e: DragEvent) => void} [props.onDragLeave] Called when the zone is left.\n * @param {(e: MouseEvent) => void} [props.onDragEnd] Called when dragging has ended.\n * @param {(e: DragEvent) => void} [props.onDrop] Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tonDropRef.current = null;\n\t\t\t\tonDragStartRef.current = null;\n\t\t\t\tonDragEnterRef.current = null;\n\t\t\t\tonDragLeaveRef.current = null;\n\t\t\t\tonDragEndRef.current = null;\n\t\t\t\tonDragOverRef.current = null;\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"names":["useFreshRef","value","ref","current","useDropZone","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length","removeEventListener"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T|null>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object} props Named parameters.\n * @param {boolean} [props.isDisabled] Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void} [props.onDragStart] Called when dragging has started.\n * @param {(e: DragEvent) => void} [props.onDragEnter] Called when the zone is entered.\n * @param {(e: DragEvent) => void} [props.onDragOver] Called when the zone is moved within.\n * @param {(e: DragEvent) => void} [props.onDragLeave] Called when the zone is left.\n * @param {(e: MouseEvent) => void} [props.onDragEnd] Called when dragging has ended.\n * @param {(e: DragEvent) => void} [props.onDrop] Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( element ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\t\t\t};\n\t\t},\n\t\t[ isDisabled ]\n\t);\n}\n"]}
|
|
@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useFocusOutside;
|
|
7
7
|
|
|
8
|
-
var _lodash = require("lodash");
|
|
9
|
-
|
|
10
8
|
var _element = require("@wordpress/element");
|
|
11
9
|
|
|
12
|
-
/**
|
|
13
|
-
* External dependencies
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
10
|
/**
|
|
17
11
|
* WordPress dependencies
|
|
18
12
|
*/
|
|
@@ -53,7 +47,7 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
53
47
|
return true;
|
|
54
48
|
|
|
55
49
|
case 'INPUT':
|
|
56
|
-
return
|
|
50
|
+
return INPUT_BUTTON_TYPES.includes(
|
|
57
51
|
/** @type {HTMLInputElement} */
|
|
58
52
|
eventTarget.type);
|
|
59
53
|
}
|
|
@@ -148,7 +142,7 @@ function useFocusOutside(onFocusOutside) {
|
|
|
148
142
|
type,
|
|
149
143
|
target
|
|
150
144
|
} = event;
|
|
151
|
-
const isInteractionEnd =
|
|
145
|
+
const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
|
|
152
146
|
|
|
153
147
|
if (isInteractionEnd) {
|
|
154
148
|
preventBlurCheck.current = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.js"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":";;;;;;;AAGA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.js"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"]}
|
|
@@ -5,14 +5,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.default = useFocusOutside;
|
|
7
7
|
|
|
8
|
-
var _lodash = require("lodash");
|
|
9
|
-
|
|
10
8
|
var _element = require("@wordpress/element");
|
|
11
9
|
|
|
12
|
-
/**
|
|
13
|
-
* External dependencies
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
10
|
/**
|
|
17
11
|
* WordPress dependencies
|
|
18
12
|
*/
|
|
@@ -49,7 +43,7 @@ function isFocusNormalizedButton(eventTarget) {
|
|
|
49
43
|
return true;
|
|
50
44
|
|
|
51
45
|
case 'INPUT':
|
|
52
|
-
return
|
|
46
|
+
return INPUT_BUTTON_TYPES.includes(
|
|
53
47
|
/** @type {HTMLInputElement} */
|
|
54
48
|
eventTarget.type);
|
|
55
49
|
}
|
|
@@ -144,7 +138,7 @@ function useFocusOutside(onFocusOutside) {
|
|
|
144
138
|
type,
|
|
145
139
|
target
|
|
146
140
|
} = event;
|
|
147
|
-
const isInteractionEnd =
|
|
141
|
+
const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
|
|
148
142
|
|
|
149
143
|
if (isInteractionEnd) {
|
|
150
144
|
preventBlurCheck.current = false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":";;;;;;;AAGA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.native.js"],"names":["INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","setTimeout","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n *\n * @type {string[]}\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * @typedef {HTMLButtonElement | HTMLLinkElement | HTMLInputElement} FocusNormalizedButton\n */\n\n// Disable reason: Rule doesn't support predicate return types.\n/* eslint-disable jsdoc/valid-types */\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param {EventTarget} eventTarget The target from a mouse or touch event.\n *\n * @return {eventTarget is FocusNormalizedButton} Whether element is a button.\n */\nfunction isFocusNormalizedButton( eventTarget ) {\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t/** @type {HTMLInputElement} */ ( eventTarget ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n/* eslint-enable jsdoc/valid-types */\n\n/**\n * @typedef {import('react').SyntheticEvent} SyntheticEvent\n */\n\n/**\n * @callback EventCallback\n * @param {SyntheticEvent} event input related event.\n */\n\n/**\n * @typedef FocusOutsideReactElement\n * @property {EventCallback} handleFocusOutside callback for a focus outside event.\n */\n\n/**\n * @typedef {import('react').MutableRefObject<FocusOutsideReactElement | undefined>} FocusOutsideRef\n */\n\n/**\n * @typedef {Object} FocusOutsideReturnValue\n * @property {EventCallback} onFocus An event handler for focus events.\n * @property {EventCallback} onBlur An event handler for blur events.\n * @property {EventCallback} onMouseDown An event handler for mouse down events.\n * @property {EventCallback} onMouseUp An event handler for mouse up events.\n * @property {EventCallback} onTouchStart An event handler for touch start events.\n * @property {EventCallback} onTouchEnd An event handler for touch end events.\n */\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param {EventCallback} onFocusOutside A callback triggered when focus moves outside\n * the element the event handlers are bound to.\n *\n * @return {FocusOutsideReturnValue} An object containing event handlers. Bind the event handlers\n * to a wrapping element element to capture when focus moves\n * outside that element.\n */\nexport default function useFocusOutside( onFocusOutside ) {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\t/**\n\t * @type {import('react').MutableRefObject<number | undefined>}\n\t */\n\tconst blurCheckTimeoutId = useRef();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t *\n\t * @param {SyntheticEvent} event Event for mousedown or mouseup.\n\t */\n\tconst normalizeButtonFocus = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t *\n\t * @param {SyntheticEvent} event Blur event.\n\t */\n\tconst queueBlurCheck = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"]}
|
|
@@ -11,8 +11,6 @@ var _mousetrap = _interopRequireDefault(require("mousetrap"));
|
|
|
11
11
|
|
|
12
12
|
require("mousetrap/plugins/global-bind/mousetrap-global-bind");
|
|
13
13
|
|
|
14
|
-
var _lodash = require("lodash");
|
|
15
|
-
|
|
16
14
|
var _element = require("@wordpress/element");
|
|
17
15
|
|
|
18
16
|
var _keycodes = require("@wordpress/keycodes");
|
|
@@ -74,7 +72,8 @@ shortcuts, callback) {
|
|
|
74
72
|
|
|
75
73
|
/** @type {unknown} */
|
|
76
74
|
document);
|
|
77
|
-
|
|
75
|
+
const shortcutsArray = Array.isArray(shortcuts) ? shortcuts : [shortcuts];
|
|
76
|
+
shortcutsArray.forEach(shortcut => {
|
|
78
77
|
const keys = shortcut.split('+'); // Determines whether a key is a modifier by the length of the string.
|
|
79
78
|
// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that
|
|
80
79
|
// the modifiers are Shift and Cmd because they're not a single character.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"names":["useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","Mousetrap","document","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","reset"],"mappings":";;;;;;;;;AAGA;;AACA;;
|
|
1
|
+
{"version":3,"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"names":["useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","current","mousetrap","Mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","size","Error","bindFn","reset"],"mappings":";;;;;;;;;AAGA;;AACA;;AAKA;;AACA;;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,mBAAT;AACC;AACAC,SAFD,EAGCC,QAHD,EAUE;AAAA,MAND;AACCC,IAAAA,UAAU,GAAG,KADd;AAECC,IAAAA,SAAS,GAAG,SAFb;AAGCC,IAAAA,UAAU,GAAG,KAHd;AAGqB;AACpBC,IAAAA;AAJD,GAMC,uEADG,EACH;AACD,QAAMC,eAAe,GAAG,qBAAQL,QAAR,CAAxB;AACA,0BAAW,MAAM;AAChBK,IAAAA,eAAe,CAACC,OAAhB,GAA0BN,QAA1B;AACA,GAFD,EAEG,CAAEA,QAAF,CAFH;AAIA,0BAAW,MAAM;AAChB,QAAKG,UAAL,EAAkB;AACjB;AACA;;AACD,UAAMI,SAAS,GAAG,IAAIC,kBAAJ,CACjBJ,MAAM,IAAIA,MAAM,CAACE,OAAjB,GACGF,MAAM,CAACE,OADV,GAEG;AACA;AACA;;AACA;;AAAyB;AAAyBG,IAAAA,QANpC,CAAlB;AAQA,UAAMC,cAAc,GAAGC,KAAK,CAACC,OAAN,CAAeb,SAAf,IACpBA,SADoB,GAEpB,CAAEA,SAAF,CAFH;AAGAW,IAAAA,cAAc,CAACG,OAAf,CAA0BC,QAAF,IAAgB;AACvC,YAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAT,CAAgB,GAAhB,CAAb,CADuC,CAEvC;AACA;AACA;;AACA,YAAMC,SAAS,GAAG,IAAIC,GAAJ,CACjBH,IAAI,CAACI,MAAL,CAAeC,KAAF,IAAaA,KAAK,CAACC,MAAN,GAAe,CAAzC,CADiB,CAAlB;AAGA,YAAMC,MAAM,GAAGL,SAAS,CAACM,GAAV,CAAe,KAAf,CAAf;AACA,YAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAV,CAAe,OAAf,CAAjB,CATuC,CAWvC;;AACA,UACC,+BACIN,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAA1B,IACCL,SAAS,CAACQ,IAAV,KAAmB,CAAnB,IAAwBH,MAAxB,IAAkCE,QAFrC,CADD,EAIE;AACD,cAAM,IAAIE,KAAJ,CACJ,eAAeZ,QAAU,iEADrB,CAAN;AAGA;;AAED,YAAMa,MAAM,GAAG1B,UAAU,GAAG,YAAH,GAAkB,MAA3C,CAtBuC,CAuBvC;;AACAM,MAAAA,SAAS,CAAEoB,MAAF,CAAT,CACCb,QADD,EAEC;AAAA;AAIC;AACAT,UAAAA,eAAe,CAACC,OAAhB,CAAyB,YAAzB;AALD;AAAA,OAFD,EAQCJ,SARD;AAUA,KAlCD;AAoCA,WAAO,MAAM;AACZK,MAAAA,SAAS,CAACqB,KAAV;AACA,KAFD;AAGA,GAtDD,EAsDG,CAAE7B,SAAF,EAAaE,UAAb,EAAyBC,SAAzB,EAAoCE,MAApC,EAA4CD,UAA5C,CAtDH;AAuDA;;eAEcL,mB","sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {import('react').RefObject<HTMLElement>} [target] React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"]}
|
|
@@ -83,6 +83,7 @@ function assignRef(ref, value) {
|
|
|
83
83
|
|
|
84
84
|
function useMergeRefs(refs) {
|
|
85
85
|
const element = (0, _element.useRef)();
|
|
86
|
+
const isAttached = (0, _element.useRef)(false);
|
|
86
87
|
const didElementChange = (0, _element.useRef)(false);
|
|
87
88
|
/* eslint-disable jsdoc/no-undefined-types */
|
|
88
89
|
|
|
@@ -99,7 +100,7 @@ function useMergeRefs(refs) {
|
|
|
99
100
|
// which case the ref callbacks will already have been called.
|
|
100
101
|
|
|
101
102
|
(0, _element.useLayoutEffect)(() => {
|
|
102
|
-
if (didElementChange.current === false) {
|
|
103
|
+
if (didElementChange.current === false && isAttached.current === true) {
|
|
103
104
|
refs.forEach((ref, index) => {
|
|
104
105
|
const previousRef = previousRefs.current[index];
|
|
105
106
|
|
|
@@ -123,7 +124,8 @@ function useMergeRefs(refs) {
|
|
|
123
124
|
// Update the element so it can be used when calling ref callbacks on a
|
|
124
125
|
// dependency change.
|
|
125
126
|
assignRef(element, value);
|
|
126
|
-
didElementChange.current = true;
|
|
127
|
+
didElementChange.current = true;
|
|
128
|
+
isAttached.current = value !== null; // When an element changes, the current ref callback should be called
|
|
127
129
|
// with the new element and the previous one with `null`.
|
|
128
130
|
|
|
129
131
|
const refsToAssign = value ? currentRefs.current : previousRefs.current; // Update the latest refs.
|