@wordpress/compose 6.16.0 → 6.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/build/higher-order/compose.js +0 -2
- package/build/higher-order/compose.js.map +1 -1
- package/build/higher-order/if-condition/index.js +2 -6
- package/build/higher-order/if-condition/index.js.map +1 -1
- package/build/higher-order/pipe.js +1 -5
- package/build/higher-order/pipe.js.map +1 -1
- package/build/higher-order/pure/index.js +2 -10
- package/build/higher-order/pure/index.js.map +1 -1
- package/build/higher-order/with-global-events/index.js +13 -32
- package/build/higher-order/with-global-events/index.js.map +1 -1
- package/build/higher-order/with-global-events/listener.js +5 -28
- package/build/higher-order/with-global-events/listener.js.map +1 -1
- package/build/higher-order/with-instance-id/index.js +4 -8
- package/build/higher-order/with-instance-id/index.js.map +1 -1
- package/build/higher-order/with-preferred-color-scheme/index.native.js +3 -6
- package/build/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build/higher-order/with-safe-timeout/index.js +4 -14
- package/build/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build/higher-order/with-state/index.js +3 -11
- package/build/higher-order/with-state/index.js.map +1 -1
- package/build/hooks/use-async-list/index.js +1 -14
- package/build/hooks/use-async-list/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.js +14 -30
- package/build/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build/hooks/use-constrained-tabbing/index.native.js +4 -4
- package/build/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build/hooks/use-copy-on-click/index.js +6 -15
- package/build/hooks/use-copy-on-click/index.js.map +1 -1
- package/build/hooks/use-copy-to-clipboard/index.js +3 -11
- package/build/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build/hooks/use-debounce/index.js +0 -4
- package/build/hooks/use-debounce/index.js.map +1 -1
- package/build/hooks/use-dialog/index.js +2 -12
- package/build/hooks/use-dialog/index.js.map +1 -1
- package/build/hooks/use-disabled/index.js +5 -15
- package/build/hooks/use-disabled/index.js.map +1 -1
- package/build/hooks/use-dragging/index.js +4 -11
- package/build/hooks/use-dragging/index.js.map +1 -1
- package/build/hooks/use-drop-zone/index.js +27 -66
- package/build/hooks/use-drop-zone/index.js.map +1 -1
- package/build/hooks/use-fixed-window-list/index.js +8 -34
- package/build/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build/hooks/use-focus-on-mount/index.js +3 -14
- package/build/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.js +13 -19
- package/build/hooks/use-focus-outside/index.js.map +1 -1
- package/build/hooks/use-focus-outside/index.native.js +13 -21
- package/build/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build/hooks/use-focus-return/index.js +7 -15
- package/build/hooks/use-focus-return/index.js.map +1 -1
- package/build/hooks/use-focusable-iframe/index.js +1 -5
- package/build/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build/hooks/use-instance-id/index.js +3 -5
- package/build/hooks/use-instance-id/index.js.map +1 -1
- package/build/hooks/use-isomorphic-layout-effect/index.js +0 -2
- package/build/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.js +12 -28
- package/build/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.native.js +0 -2
- package/build/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build/hooks/use-media-query/index.js +1 -9
- package/build/hooks/use-media-query/index.js.map +1 -1
- package/build/hooks/use-merge-refs/index.js +18 -24
- package/build/hooks/use-merge-refs/index.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.android.js +0 -5
- package/build/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme/index.ios.js +0 -2
- package/build/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build/hooks/use-preferred-color-scheme-style/index.native.js +2 -5
- package/build/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build/hooks/use-previous/index.js +3 -4
- package/build/hooks/use-previous/index.js.map +1 -1
- package/build/hooks/use-reduced-motion/index.js +0 -4
- package/build/hooks/use-reduced-motion/index.js.map +1 -1
- package/build/hooks/use-ref-effect/index.js +0 -2
- package/build/hooks/use-ref-effect/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.js +23 -30
- package/build/hooks/use-resize-observer/index.js.map +1 -1
- package/build/hooks/use-resize-observer/index.native.js +0 -6
- package/build/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build/hooks/use-throttle/index.js +0 -4
- package/build/hooks/use-throttle/index.js.map +1 -1
- package/build/hooks/use-viewport-match/index.js +4 -13
- package/build/hooks/use-viewport-match/index.js.map +1 -1
- package/build/hooks/use-warn-on-change/index.js +4 -14
- package/build/hooks/use-warn-on-change/index.js.map +1 -1
- package/build/index.js +0 -41
- package/build/index.js.map +1 -1
- package/build/index.native.js +0 -33
- package/build/index.native.js.map +1 -1
- package/build/utils/create-higher-order-component/index.js +1 -4
- package/build/utils/create-higher-order-component/index.js.map +1 -1
- package/build/utils/debounce/index.js +12 -37
- package/build/utils/debounce/index.js.map +1 -1
- package/build/utils/throttle/index.js +0 -5
- package/build/utils/throttle/index.js.map +1 -1
- package/build-module/higher-order/compose.js +1 -1
- package/build-module/higher-order/compose.js.map +1 -1
- package/build-module/higher-order/if-condition/index.js +3 -5
- package/build-module/higher-order/if-condition/index.js.map +1 -1
- package/build-module/higher-order/pipe.js +1 -4
- package/build-module/higher-order/pipe.js.map +1 -1
- package/build-module/higher-order/pure/index.js +4 -8
- package/build-module/higher-order/pure/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/index.js +15 -29
- package/build-module/higher-order/with-global-events/index.js.map +1 -1
- package/build-module/higher-order/with-global-events/listener.js +5 -27
- package/build-module/higher-order/with-global-events/listener.js.map +1 -1
- package/build-module/higher-order/with-instance-id/index.js +5 -5
- package/build-module/higher-order/with-instance-id/index.js.map +1 -1
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js +3 -3
- package/build-module/higher-order/with-preferred-color-scheme/index.native.js.map +1 -1
- package/build-module/higher-order/with-safe-timeout/index.js +6 -8
- package/build-module/higher-order/with-safe-timeout/index.js.map +1 -1
- package/build-module/higher-order/with-state/index.js +5 -9
- package/build-module/higher-order/with-state/index.js.map +1 -1
- package/build-module/hooks/use-async-list/index.js +1 -12
- package/build-module/hooks/use-async-list/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.js +16 -27
- package/build-module/hooks/use-constrained-tabbing/index.js.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.native.js +3 -3
- package/build-module/hooks/use-constrained-tabbing/index.native.js.map +1 -1
- package/build-module/hooks/use-copy-on-click/index.js +8 -12
- package/build-module/hooks/use-copy-on-click/index.js.map +1 -1
- package/build-module/hooks/use-copy-to-clipboard/index.js +6 -9
- package/build-module/hooks/use-copy-to-clipboard/index.js.map +1 -1
- package/build-module/hooks/use-debounce/index.js +3 -3
- package/build-module/hooks/use-debounce/index.js.map +1 -1
- package/build-module/hooks/use-dialog/index.js +3 -5
- package/build-module/hooks/use-dialog/index.js.map +1 -1
- package/build-module/hooks/use-disabled/index.js +6 -12
- package/build-module/hooks/use-disabled/index.js.map +1 -1
- package/build-module/hooks/use-dragging/index.js +6 -9
- package/build-module/hooks/use-dragging/index.js.map +1 -1
- package/build-module/hooks/use-drop-zone/index.js +29 -64
- package/build-module/hooks/use-drop-zone/index.js.map +1 -1
- package/build-module/hooks/use-fixed-window-list/index.js +8 -30
- package/build-module/hooks/use-fixed-window-list/index.js.map +1 -1
- package/build-module/hooks/use-focus-on-mount/index.js +4 -12
- package/build-module/hooks/use-focus-on-mount/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.js +14 -18
- package/build-module/hooks/use-focus-outside/index.js.map +1 -1
- package/build-module/hooks/use-focus-outside/index.native.js +14 -20
- package/build-module/hooks/use-focus-outside/index.native.js.map +1 -1
- package/build-module/hooks/use-focus-return/index.js +8 -14
- package/build-module/hooks/use-focus-return/index.js.map +1 -1
- package/build-module/hooks/use-focusable-iframe/index.js +2 -3
- package/build-module/hooks/use-focusable-iframe/index.js.map +1 -1
- package/build-module/hooks/use-instance-id/index.js +2 -3
- package/build-module/hooks/use-instance-id/index.js.map +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.js +14 -24
- package/build-module/hooks/use-keyboard-shortcut/index.js.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js +0 -1
- package/build-module/hooks/use-keyboard-shortcut/index.native.js.map +1 -1
- package/build-module/hooks/use-media-query/index.js +2 -8
- package/build-module/hooks/use-media-query/index.js.map +1 -1
- package/build-module/hooks/use-merge-refs/index.js +19 -23
- package/build-module/hooks/use-merge-refs/index.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.android.js +1 -3
- package/build-module/hooks/use-preferred-color-scheme/index.android.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js +1 -1
- package/build-module/hooks/use-preferred-color-scheme/index.ios.js.map +1 -1
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js +3 -3
- package/build-module/hooks/use-preferred-color-scheme-style/index.native.js.map +1 -1
- package/build-module/hooks/use-previous/index.js +4 -3
- package/build-module/hooks/use-previous/index.js.map +1 -1
- package/build-module/hooks/use-reduced-motion/index.js +1 -2
- package/build-module/hooks/use-reduced-motion/index.js.map +1 -1
- package/build-module/hooks/use-ref-effect/index.js +1 -1
- package/build-module/hooks/use-ref-effect/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.js +22 -30
- package/build-module/hooks/use-resize-observer/index.js.map +1 -1
- package/build-module/hooks/use-resize-observer/index.native.js +1 -6
- package/build-module/hooks/use-resize-observer/index.native.js.map +1 -1
- package/build-module/hooks/use-throttle/index.js +3 -3
- package/build-module/hooks/use-throttle/index.js.map +1 -1
- package/build-module/hooks/use-viewport-match/index.js +6 -11
- package/build-module/hooks/use-viewport-match/index.js.map +1 -1
- package/build-module/hooks/use-warn-on-change/index.js +6 -12
- package/build-module/hooks/use-warn-on-change/index.js.map +1 -1
- package/build-module/index.js +10 -7
- package/build-module/index.js.map +1 -1
- package/build-module/index.native.js +10 -7
- package/build-module/index.native.js.map +1 -1
- package/build-module/utils/create-higher-order-component/index.js +1 -2
- package/build-module/utils/create-higher-order-component/index.js.map +1 -1
- package/build-module/utils/debounce/index.js +12 -35
- package/build-module/utils/debounce/index.js.map +1 -1
- package/build-module/utils/throttle/index.js +0 -3
- package/build-module/utils/throttle/index.js.map +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts +1 -1
- package/build-types/higher-order/with-instance-id/index.d.ts.map +1 -1
- package/build-types/higher-order/with-safe-timeout/index.d.ts +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 +1 -1
- package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-viewport-match/index.d.ts +1 -1
- package/package.json +8 -8
- package/src/higher-order/with-instance-id/index.tsx +2 -2
- package/src/higher-order/with-safe-timeout/index.tsx +2 -2
- package/src/hooks/use-resize-observer/index.native.js +0 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["isShallowEqual","Component","createHigherOrderComponent","pure","WrappedComponent","prototype","shouldComponentUpdate","nextProps","nextState","props","state","render","createElement"],"sources":["@wordpress/compose/src/higher-order/pure/index.tsx"],"sourcesContent":["/**\n * External dependencies\n */\nimport type { ComponentType, ComponentClass } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport isShallowEqual from '@wordpress/is-shallow-equal';\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * Given a component returns the enhanced component augmented with a component\n * only re-rendering when its props/state change\n */\nconst pure = createHigherOrderComponent( function < Props extends {} >(\n\tWrappedComponent: ComponentType< Props >\n): ComponentType< Props > {\n\tif ( WrappedComponent.prototype instanceof Component ) {\n\t\treturn class extends ( WrappedComponent as ComponentClass< Props > ) {\n\t\t\tshouldComponentUpdate( nextProps: Props, nextState: any ) {\n\t\t\t\treturn (\n\t\t\t\t\t! isShallowEqual( nextProps, this.props ) ||\n\t\t\t\t\t! isShallowEqual( nextState, this.state )\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}\n\n\treturn class extends Component< Props > {\n\t\tshouldComponentUpdate( nextProps: Props ) {\n\t\t\treturn ! isShallowEqual( nextProps, this.props );\n\t\t}\n\n\t\trender() {\n\t\t\treturn <WrappedComponent { ...this.props } />;\n\t\t}\n\t};\n},\n'pure' );\n\nexport default pure;\n"],"mappings":";AAAA;AACA;AACA;;AAGA;AACA;AACA;AACA,OAAOA,cAAc,MAAM,6BAA6B;AACxD,SAASC,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA,MAAMC,IAAI,GAAGD,0BAA0B,CAAE,UACxCE,gBAAwC,EACf;EACzB,IAAKA,gBAAgB,CAACC,SAAS,YAAYJ,SAAS,EAAG;IACtD,OAAO,cAAgBG,gBAAgB,CAA8B;MACpEE,qBAAqBA,CAAEC,SAAgB,EAAEC,SAAc,EAAG;QACzD,OACC,CAAER,cAAc,CAAEO,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC,IACzC,CAAET,cAAc,CAAEQ,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC;MAE3C;IACD,CAAC;EACF;EAEA,OAAO,cAAcT,SAAS,CAAU;IACvCK,qBAAqBA,CAAEC,SAAgB,EAAG;MACzC,OAAO,CAAEP,cAAc,CAAEO,SAAS,EAAE,IAAI,CAACE,KAAM,CAAC;IACjD;IAEAE,MAAMA,CAAA,EAAG;MACR,OAAOC,aAAA,CAACR,gBAAgB;QAAA,GAAM,IAAI,CAACK;MAAK,CAAI,CAAC;IAC9C;EACD,CAAC;AACF,CAAC,EACD,MAAO,CAAC;AAER,eAAeN,IAAI"}
|
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* WordPress dependencies
|
|
5
4
|
*/
|
|
6
5
|
import { Component, forwardRef } from '@wordpress/element';
|
|
7
6
|
import deprecated from '@wordpress/deprecated';
|
|
7
|
+
|
|
8
8
|
/**
|
|
9
9
|
* Internal dependencies
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
11
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
13
12
|
import Listener from './listener';
|
|
13
|
+
|
|
14
14
|
/**
|
|
15
15
|
* Listener instance responsible for managing document event handling.
|
|
16
16
|
*/
|
|
17
|
-
|
|
18
17
|
const listener = new Listener();
|
|
19
|
-
/* eslint-disable jsdoc/no-undefined-types */
|
|
20
18
|
|
|
19
|
+
/* eslint-disable jsdoc/no-undefined-types */
|
|
21
20
|
/**
|
|
22
21
|
* Higher-order component creator which, given an object of DOM event types and
|
|
23
22
|
* values corresponding to a callback function name on the component, will
|
|
@@ -37,69 +36,56 @@ const listener = new Listener();
|
|
|
37
36
|
*
|
|
38
37
|
* @return {any} Higher-order component.
|
|
39
38
|
*/
|
|
40
|
-
|
|
41
39
|
export default function withGlobalEvents(eventTypesToHandlers) {
|
|
42
40
|
deprecated('wp.compose.withGlobalEvents', {
|
|
43
41
|
since: '5.7',
|
|
44
42
|
alternative: 'useEffect'
|
|
45
|
-
});
|
|
43
|
+
});
|
|
46
44
|
|
|
45
|
+
// @ts-ignore We don't need to fix the type-related issues because this is deprecated.
|
|
47
46
|
return createHigherOrderComponent(WrappedComponent => {
|
|
48
47
|
class Wrapper extends Component {
|
|
49
|
-
constructor(
|
|
50
|
-
/** @type {any} */
|
|
51
|
-
props) {
|
|
48
|
+
constructor( /** @type {any} */props) {
|
|
52
49
|
super(props);
|
|
53
50
|
this.handleEvent = this.handleEvent.bind(this);
|
|
54
51
|
this.handleRef = this.handleRef.bind(this);
|
|
55
52
|
}
|
|
56
|
-
|
|
57
53
|
componentDidMount() {
|
|
58
54
|
Object.keys(eventTypesToHandlers).forEach(eventType => {
|
|
59
55
|
listener.add(eventType, this);
|
|
60
56
|
});
|
|
61
57
|
}
|
|
62
|
-
|
|
63
58
|
componentWillUnmount() {
|
|
64
59
|
Object.keys(eventTypesToHandlers).forEach(eventType => {
|
|
65
60
|
listener.remove(eventType, this);
|
|
66
61
|
});
|
|
67
62
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
/** @type {any} */
|
|
71
|
-
event) {
|
|
72
|
-
const handler = eventTypesToHandlers[
|
|
73
|
-
/** @type {keyof GlobalEventHandlersEventMap} */
|
|
63
|
+
handleEvent( /** @type {any} */event) {
|
|
64
|
+
const handler = eventTypesToHandlers[/** @type {keyof GlobalEventHandlersEventMap} */
|
|
74
65
|
event.type
|
|
75
|
-
|
|
76
|
-
];
|
|
66
|
+
|
|
67
|
+
/* eslint-enable jsdoc/no-undefined-types */];
|
|
77
68
|
|
|
78
69
|
if (typeof this.wrappedRef[handler] === 'function') {
|
|
79
70
|
this.wrappedRef[handler](event);
|
|
80
71
|
}
|
|
81
72
|
}
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
el) {
|
|
86
|
-
this.wrappedRef = el; // Any component using `withGlobalEvents` that is not setting a `ref`
|
|
73
|
+
handleRef( /** @type {any} */el) {
|
|
74
|
+
this.wrappedRef = el;
|
|
75
|
+
// Any component using `withGlobalEvents` that is not setting a `ref`
|
|
87
76
|
// will cause `this.props.forwardedRef` to be `null`, so we need this
|
|
88
77
|
// check.
|
|
89
|
-
|
|
90
78
|
if (this.props.forwardedRef) {
|
|
91
79
|
this.props.forwardedRef(el);
|
|
92
80
|
}
|
|
93
81
|
}
|
|
94
|
-
|
|
95
82
|
render() {
|
|
96
|
-
return createElement(WrappedComponent, {
|
|
83
|
+
return createElement(WrappedComponent, {
|
|
84
|
+
...this.props.ownProps,
|
|
97
85
|
ref: this.handleRef
|
|
98
86
|
});
|
|
99
87
|
}
|
|
100
|
-
|
|
101
88
|
}
|
|
102
|
-
|
|
103
89
|
return forwardRef((props, ref) => {
|
|
104
90
|
return createElement(Wrapper, {
|
|
105
91
|
ownProps: props,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Component","forwardRef","deprecated","createHigherOrderComponent","Listener","listener","withGlobalEvents","eventTypesToHandlers","since","alternative","WrappedComponent","Wrapper","constructor","props","handleEvent","bind","handleRef","componentDidMount","Object","keys","forEach","eventType","add","componentWillUnmount","remove","event","handler","type","wrappedRef","el","forwardedRef","render","createElement","ownProps","ref"],"sources":["@wordpress/compose/src/higher-order/with-global-events/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component, forwardRef } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport Listener from './listener';\n\n/**\n * Listener instance responsible for managing document event handling.\n */\nconst listener = new Listener();\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Higher-order component creator which, given an object of DOM event types and\n * values corresponding to a callback function name on the component, will\n * create or update a window event handler to invoke the callback when an event\n * occurs. On behalf of the consuming developer, the higher-order component\n * manages unbinding when the component unmounts, and binding at most a single\n * event handler for the entire application.\n *\n * @deprecated\n *\n * @param {Record<keyof GlobalEventHandlersEventMap, string>} eventTypesToHandlers Object with keys of DOM\n * event type, the value a\n * name of the function on\n * the original component's\n * instance which handles\n * the event.\n *\n * @return {any} Higher-order component.\n */\nexport default function withGlobalEvents( eventTypesToHandlers ) {\n\tdeprecated( 'wp.compose.withGlobalEvents', {\n\t\tsince: '5.7',\n\t\talternative: 'useEffect',\n\t} );\n\n\t// @ts-ignore We don't need to fix the type-related issues because this is deprecated.\n\treturn createHigherOrderComponent( ( WrappedComponent ) => {\n\t\tclass Wrapper extends Component {\n\t\t\tconstructor( /** @type {any} */ props ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tthis.handleEvent = this.handleEvent.bind( this );\n\t\t\t\tthis.handleRef = this.handleRef.bind( this );\n\t\t\t}\n\n\t\t\tcomponentDidMount() {\n\t\t\t\tObject.keys( eventTypesToHandlers ).forEach( ( eventType ) => {\n\t\t\t\t\tlistener.add( eventType, this );\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\tcomponentWillUnmount() {\n\t\t\t\tObject.keys( eventTypesToHandlers ).forEach( ( eventType ) => {\n\t\t\t\t\tlistener.remove( eventType, this );\n\t\t\t\t} );\n\t\t\t}\n\n\t\t\thandleEvent( /** @type {any} */ event ) {\n\t\t\t\tconst handler =\n\t\t\t\t\teventTypesToHandlers[\n\t\t\t\t\t\t/** @type {keyof GlobalEventHandlersEventMap} */ (\n\t\t\t\t\t\t\tevent.type\n\t\t\t\t\t\t)\n\t\t\t\t\t\t/* eslint-enable jsdoc/no-undefined-types */\n\t\t\t\t\t];\n\t\t\t\tif ( typeof this.wrappedRef[ handler ] === 'function' ) {\n\t\t\t\t\tthis.wrappedRef[ handler ]( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\thandleRef( /** @type {any} */ el ) {\n\t\t\t\tthis.wrappedRef = el;\n\t\t\t\t// Any component using `withGlobalEvents` that is not setting a `ref`\n\t\t\t\t// will cause `this.props.forwardedRef` to be `null`, so we need this\n\t\t\t\t// check.\n\t\t\t\tif ( this.props.forwardedRef ) {\n\t\t\t\t\tthis.props.forwardedRef( el );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t<WrappedComponent\n\t\t\t\t\t\t{ ...this.props.ownProps }\n\t\t\t\t\t\tref={ this.handleRef }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\n\t\treturn forwardRef( ( props, ref ) => {\n\t\t\treturn <Wrapper ownProps={ props } forwardedRef={ ref } />;\n\t\t} );\n\t}, 'withGlobalEvents' );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,UAAU,QAAQ,oBAAoB;AAC1D,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,QAAQ,MAAM,YAAY;;AAEjC;AACA;AACA;AACA,MAAMC,QAAQ,GAAG,IAAID,QAAQ,CAAC,CAAC;;AAE/B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASE,gBAAgBA,CAAEC,oBAAoB,EAAG;EAChEL,UAAU,CAAE,6BAA6B,EAAE;IAC1CM,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;;EAEH;EACA,OAAON,0BAA0B,CAAIO,gBAAgB,IAAM;IAC1D,MAAMC,OAAO,SAASX,SAAS,CAAC;MAC/BY,WAAWA,CAAA,CAAE,kBAAmBC,KAAK,EAAG;QACvC,KAAK,CAAEA,KAAM,CAAC;QAEd,IAAI,CAACC,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAE,IAAK,CAAC;QAChD,IAAI,CAACC,SAAS,GAAG,IAAI,CAACA,SAAS,CAACD,IAAI,CAAE,IAAK,CAAC;MAC7C;MAEAE,iBAAiBA,CAAA,EAAG;QACnBC,MAAM,CAACC,IAAI,CAAEZ,oBAAqB,CAAC,CAACa,OAAO,CAAIC,SAAS,IAAM;UAC7DhB,QAAQ,CAACiB,GAAG,CAAED,SAAS,EAAE,IAAK,CAAC;QAChC,CAAE,CAAC;MACJ;MAEAE,oBAAoBA,CAAA,EAAG;QACtBL,MAAM,CAACC,IAAI,CAAEZ,oBAAqB,CAAC,CAACa,OAAO,CAAIC,SAAS,IAAM;UAC7DhB,QAAQ,CAACmB,MAAM,CAAEH,SAAS,EAAE,IAAK,CAAC;QACnC,CAAE,CAAC;MACJ;MAEAP,WAAWA,CAAA,CAAE,kBAAmBW,KAAK,EAAG;QACvC,MAAMC,OAAO,GACZnB,oBAAoB,CACnB;QACCkB,KAAK,CAACE;;QAEP,6CACA;;QACF,IAAK,OAAO,IAAI,CAACC,UAAU,CAAEF,OAAO,CAAE,KAAK,UAAU,EAAG;UACvD,IAAI,CAACE,UAAU,CAAEF,OAAO,CAAE,CAAED,KAAM,CAAC;QACpC;MACD;MAEAT,SAASA,CAAA,CAAE,kBAAmBa,EAAE,EAAG;QAClC,IAAI,CAACD,UAAU,GAAGC,EAAE;QACpB;QACA;QACA;QACA,IAAK,IAAI,CAAChB,KAAK,CAACiB,YAAY,EAAG;UAC9B,IAAI,CAACjB,KAAK,CAACiB,YAAY,CAAED,EAAG,CAAC;QAC9B;MACD;MAEAE,MAAMA,CAAA,EAAG;QACR,OACCC,aAAA,CAACtB,gBAAgB;UAAA,GACX,IAAI,CAACG,KAAK,CAACoB,QAAQ;UACxBC,GAAG,EAAG,IAAI,CAAClB;QAAW,CACtB,CAAC;MAEJ;IACD;IAEA,OAAOf,UAAU,CAAE,CAAEY,KAAK,EAAEqB,GAAG,KAAM;MACpC,OAAOF,aAAA,CAACrB,OAAO;QAACsB,QAAQ,EAAGpB,KAAO;QAACiB,YAAY,EAAGI;MAAK,CAAE,CAAC;IAC3D,CAAE,CAAC;EACJ,CAAC,EAAE,kBAAmB,CAAC;AACxB"}
|
|
@@ -9,52 +9,30 @@ class Listener {
|
|
|
9
9
|
this.listeners = {};
|
|
10
10
|
this.handleEvent = this.handleEvent.bind(this);
|
|
11
11
|
}
|
|
12
|
-
|
|
13
|
-
add(
|
|
14
|
-
/** @type {any} */
|
|
15
|
-
eventType,
|
|
16
|
-
/** @type {any} */
|
|
17
|
-
instance) {
|
|
12
|
+
add( /** @type {any} */eventType, /** @type {any} */instance) {
|
|
18
13
|
if (!this.listeners[eventType]) {
|
|
19
14
|
// Adding first listener for this type, so bind event.
|
|
20
15
|
window.addEventListener(eventType, this.handleEvent);
|
|
21
16
|
this.listeners[eventType] = [];
|
|
22
17
|
}
|
|
23
|
-
|
|
24
18
|
this.listeners[eventType].push(instance);
|
|
25
19
|
}
|
|
26
|
-
|
|
27
|
-
remove(
|
|
28
|
-
/** @type {any} */
|
|
29
|
-
eventType,
|
|
30
|
-
/** @type {any} */
|
|
31
|
-
instance) {
|
|
20
|
+
remove( /** @type {any} */eventType, /** @type {any} */instance) {
|
|
32
21
|
if (!this.listeners[eventType]) {
|
|
33
22
|
return;
|
|
34
23
|
}
|
|
35
|
-
|
|
36
|
-
this.listeners[eventType] = this.listeners[eventType].filter((
|
|
37
|
-
/** @type {any} */
|
|
38
|
-
listener) => listener !== instance);
|
|
39
|
-
|
|
24
|
+
this.listeners[eventType] = this.listeners[eventType].filter(( /** @type {any} */listener) => listener !== instance);
|
|
40
25
|
if (!this.listeners[eventType].length) {
|
|
41
26
|
// Removing last listener for this type, so unbind event.
|
|
42
27
|
window.removeEventListener(eventType, this.handleEvent);
|
|
43
28
|
delete this.listeners[eventType];
|
|
44
29
|
}
|
|
45
30
|
}
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
/** @type {any} */
|
|
49
|
-
event) {
|
|
50
|
-
this.listeners[event.type]?.forEach((
|
|
51
|
-
/** @type {any} */
|
|
52
|
-
instance) => {
|
|
31
|
+
handleEvent( /** @type {any} */event) {
|
|
32
|
+
this.listeners[event.type]?.forEach(( /** @type {any} */instance) => {
|
|
53
33
|
instance.handleEvent(event);
|
|
54
34
|
});
|
|
55
35
|
}
|
|
56
|
-
|
|
57
36
|
}
|
|
58
|
-
|
|
59
37
|
export default Listener;
|
|
60
38
|
//# sourceMappingURL=listener.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Listener","constructor","listeners","handleEvent","bind","add","eventType","instance","window","addEventListener","push","remove","filter","listener","length","removeEventListener","event","type","forEach"],"sources":["@wordpress/compose/src/higher-order/with-global-events/listener.js"],"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"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,MAAMA,QAAQ,CAAC;EACdC,WAAWA,CAAA,EAAG;IACb;IACA,IAAI,CAACC,SAAS,GAAG,CAAC,CAAC;IAEnB,IAAI,CAACC,WAAW,GAAG,IAAI,CAACA,WAAW,CAACC,IAAI,CAAE,IAAK,CAAC;EACjD;EAEAC,GAAGA,CAAA,CAAE,kBAAmBC,SAAS,EAAE,kBAAmBC,QAAQ,EAAG;IAChE,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,EAAG;MACpC;MACAE,MAAM,CAACC,gBAAgB,CAAEH,SAAS,EAAE,IAAI,CAACH,WAAY,CAAC;MACtD,IAAI,CAACD,SAAS,CAAEI,SAAS,CAAE,GAAG,EAAE;IACjC;IAEA,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,CAACI,IAAI,CAAEH,QAAS,CAAC;EAC7C;EAEAI,MAAMA,CAAA,CAAE,kBAAmBL,SAAS,EAAE,kBAAmBC,QAAQ,EAAG;IACnE,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,EAAG;MACpC;IACD;IAEA,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,GAAG,IAAI,CAACJ,SAAS,CAAEI,SAAS,CAAE,CAACM,MAAM,CAC/D,EAAE,kBAAmBC,QAAQ,KAAMA,QAAQ,KAAKN,QACjD,CAAC;IAED,IAAK,CAAE,IAAI,CAACL,SAAS,CAAEI,SAAS,CAAE,CAACQ,MAAM,EAAG;MAC3C;MACAN,MAAM,CAACO,mBAAmB,CAAET,SAAS,EAAE,IAAI,CAACH,WAAY,CAAC;MACzD,OAAO,IAAI,CAACD,SAAS,CAAEI,SAAS,CAAE;IACnC;EACD;EAEAH,WAAWA,CAAA,CAAE,kBAAmBa,KAAK,EAAG;IACvC,IAAI,CAACd,SAAS,CAAEc,KAAK,CAACC,IAAI,CAAE,EAAEC,OAAO,CACpC,EAAE,kBAAmBX,QAAQ,KAAM;MAClCA,QAAQ,CAACJ,WAAW,CAAEa,KAAM,CAAC;IAC9B,CACD,CAAC;EACF;AACD;AAEA,eAAehB,QAAQ"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* Internal dependencies
|
|
5
4
|
*/
|
|
5
|
+
|
|
6
6
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
7
7
|
import useInstanceId from '../../hooks/use-instance-id';
|
|
8
|
-
|
|
9
8
|
/**
|
|
10
9
|
* A Higher Order Component used to be provide a unique instance ID by
|
|
11
10
|
* component.
|
|
12
11
|
*/
|
|
13
12
|
const withInstanceId = createHigherOrderComponent(WrappedComponent => {
|
|
14
13
|
return props => {
|
|
15
|
-
const instanceId = useInstanceId(WrappedComponent);
|
|
16
|
-
|
|
17
|
-
return createElement(WrappedComponent, {
|
|
14
|
+
const instanceId = useInstanceId(WrappedComponent);
|
|
15
|
+
// @ts-ignore
|
|
16
|
+
return createElement(WrappedComponent, {
|
|
17
|
+
...props,
|
|
18
18
|
instanceId: instanceId
|
|
19
19
|
});
|
|
20
20
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","useInstanceId","withInstanceId","WrappedComponent","props","instanceId","createElement"],"sources":["@wordpress/compose/src/higher-order/with-instance-id/index.tsx"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport type {\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport useInstanceId from '../../hooks/use-instance-id';\n\ntype InstanceIdProps = { instanceId: string | number };\n\n/**\n * A Higher Order Component used to be provide a unique instance ID by\n * component.\n */\nconst withInstanceId = createHigherOrderComponent(\n\t< C extends WithInjectedProps< C, InstanceIdProps > >(\n\t\tWrappedComponent: C\n\t) => {\n\t\treturn ( props: WithoutInjectedProps< C, InstanceIdProps > ) => {\n\t\t\tconst instanceId = useInstanceId( WrappedComponent );\n\t\t\t// @ts-ignore\n\t\t\treturn <WrappedComponent { ...props } instanceId={ instanceId } />;\n\t\t};\n\t},\n\t'instanceId'\n);\n\nexport default withInstanceId;\n"],"mappings":";AAAA;AACA;AACA;;AAKA,SAASA,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,aAAa,MAAM,6BAA6B;AAIvD;AACA;AACA;AACA;AACA,MAAMC,cAAc,GAAGF,0BAA0B,CAE/CG,gBAAmB,IACf;EACJ,OAASC,KAAiD,IAAM;IAC/D,MAAMC,UAAU,GAAGJ,aAAa,CAAEE,gBAAiB,CAAC;IACpD;IACA,OAAOG,aAAA,CAACH,gBAAgB;MAAA,GAAMC,KAAK;MAAGC,UAAU,EAAGA;IAAY,CAAE,CAAC;EACnE,CAAC;AACF,CAAC,EACD,YACD,CAAC;AAED,eAAeH,cAAc"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* Internal dependencies
|
|
5
4
|
*/
|
|
6
5
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
7
6
|
import usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';
|
|
7
|
+
|
|
8
8
|
/**
|
|
9
9
|
* WordPress dependencies
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
11
|
import { useCallback } from '@wordpress/element';
|
|
13
12
|
const withPreferredColorScheme = createHigherOrderComponent(WrappedComponent => props => {
|
|
14
13
|
const colorScheme = usePreferredColorScheme();
|
|
15
14
|
const isDarkMode = colorScheme === 'dark';
|
|
16
15
|
const getStyles = useCallback((lightStyles, darkStyles) => {
|
|
17
|
-
const finalDarkStyles = {
|
|
16
|
+
const finalDarkStyles = {
|
|
17
|
+
...lightStyles,
|
|
18
18
|
...darkStyles
|
|
19
19
|
};
|
|
20
20
|
return isDarkMode ? finalDarkStyles : lightStyles;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["createHigherOrderComponent","usePreferredColorScheme","useCallback","withPreferredColorScheme","WrappedComponent","props","colorScheme","isDarkMode","getStyles","lightStyles","darkStyles","finalDarkStyles","createElement","preferredColorScheme","getStylesFromColorScheme"],"sources":["@wordpress/compose/src/higher-order/with-preferred-color-scheme/index.native.js"],"sourcesContent":["/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\nimport usePreferredColorScheme from '../../hooks/use-preferred-color-scheme';\n\n/**\n * WordPress dependencies\n */\nimport { useCallback } from '@wordpress/element';\n\nconst withPreferredColorScheme = createHigherOrderComponent(\n\t( WrappedComponent ) => ( props ) => {\n\t\tconst colorScheme = usePreferredColorScheme();\n\t\tconst isDarkMode = colorScheme === 'dark';\n\n\t\tconst getStyles = useCallback(\n\t\t\t( lightStyles, darkStyles ) => {\n\t\t\t\tconst finalDarkStyles = {\n\t\t\t\t\t...lightStyles,\n\t\t\t\t\t...darkStyles,\n\t\t\t\t};\n\n\t\t\t\treturn isDarkMode ? finalDarkStyles : lightStyles;\n\t\t\t},\n\t\t\t[ isDarkMode ]\n\t\t);\n\n\t\treturn (\n\t\t\t<WrappedComponent\n\t\t\t\tpreferredColorScheme={ colorScheme }\n\t\t\t\tgetStylesFromColorScheme={ getStyles }\n\t\t\t\t{ ...props }\n\t\t\t/>\n\t\t);\n\t},\n\t'withPreferredColorScheme'\n);\n\nexport default withPreferredColorScheme;\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,0BAA0B,QAAQ,2CAA2C;AACtF,OAAOC,uBAAuB,MAAM,wCAAwC;;AAE5E;AACA;AACA;AACA,SAASC,WAAW,QAAQ,oBAAoB;AAEhD,MAAMC,wBAAwB,GAAGH,0BAA0B,CACxDI,gBAAgB,IAAQC,KAAK,IAAM;EACpC,MAAMC,WAAW,GAAGL,uBAAuB,CAAC,CAAC;EAC7C,MAAMM,UAAU,GAAGD,WAAW,KAAK,MAAM;EAEzC,MAAME,SAAS,GAAGN,WAAW,CAC5B,CAAEO,WAAW,EAAEC,UAAU,KAAM;IAC9B,MAAMC,eAAe,GAAG;MACvB,GAAGF,WAAW;MACd,GAAGC;IACJ,CAAC;IAED,OAAOH,UAAU,GAAGI,eAAe,GAAGF,WAAW;EAClD,CAAC,EACD,CAAEF,UAAU,CACb,CAAC;EAED,OACCK,aAAA,CAACR,gBAAgB;IAChBS,oBAAoB,EAAGP,WAAa;IACpCQ,wBAAwB,EAAGN,SAAW;IAAA,GACjCH;EAAK,CACV,CAAC;AAEJ,CAAC,EACD,0BACD,CAAC;AAED,eAAeF,wBAAwB"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* WordPress dependencies
|
|
5
4
|
*/
|
|
6
5
|
import { Component } from '@wordpress/element';
|
|
6
|
+
|
|
7
7
|
/**
|
|
8
8
|
* Internal dependencies
|
|
9
9
|
*/
|
|
10
10
|
|
|
11
11
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
12
|
+
|
|
12
13
|
/**
|
|
13
14
|
* We cannot use the `Window['setTimeout']` and `Window['clearTimeout']`
|
|
14
15
|
* types here because those functions include functionality that is not handled
|
|
@@ -30,11 +31,9 @@ const withSafeTimeout = createHigherOrderComponent(OriginalComponent => {
|
|
|
30
31
|
this.setTimeout = this.setTimeout.bind(this);
|
|
31
32
|
this.clearTimeout = this.clearTimeout.bind(this);
|
|
32
33
|
}
|
|
33
|
-
|
|
34
34
|
componentWillUnmount() {
|
|
35
35
|
this.timeouts.forEach(clearTimeout);
|
|
36
36
|
}
|
|
37
|
-
|
|
38
37
|
setTimeout(fn, delay) {
|
|
39
38
|
const id = setTimeout(() => {
|
|
40
39
|
fn();
|
|
@@ -43,21 +42,20 @@ const withSafeTimeout = createHigherOrderComponent(OriginalComponent => {
|
|
|
43
42
|
this.timeouts.push(id);
|
|
44
43
|
return id;
|
|
45
44
|
}
|
|
46
|
-
|
|
47
45
|
clearTimeout(id) {
|
|
48
46
|
clearTimeout(id);
|
|
49
47
|
this.timeouts = this.timeouts.filter(timeoutId => timeoutId !== id);
|
|
50
48
|
}
|
|
51
|
-
|
|
52
49
|
render() {
|
|
53
|
-
return (
|
|
54
|
-
|
|
50
|
+
return (
|
|
51
|
+
// @ts-ignore
|
|
52
|
+
createElement(OriginalComponent, {
|
|
53
|
+
...this.props,
|
|
55
54
|
setTimeout: this.setTimeout,
|
|
56
55
|
clearTimeout: this.clearTimeout
|
|
57
56
|
})
|
|
58
57
|
);
|
|
59
58
|
}
|
|
60
|
-
|
|
61
59
|
};
|
|
62
60
|
}, 'withSafeTimeout');
|
|
63
61
|
export default withSafeTimeout;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Component","createHigherOrderComponent","withSafeTimeout","OriginalComponent","WrappedComponent","constructor","props","timeouts","setTimeout","bind","clearTimeout","componentWillUnmount","forEach","fn","delay","id","push","filter","timeoutId","render","createElement"],"sources":["@wordpress/compose/src/higher-order/with-safe-timeout/index.tsx"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type {\n\tWithInjectedProps,\n\tWithoutInjectedProps,\n} from '../../utils/create-higher-order-component';\nimport { createHigherOrderComponent } 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 = this.timeouts.filter(\n\t\t\t\t\t( timeoutId ) => timeoutId !== id\n\t\t\t\t);\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"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;;AAE9C;AACA;AACA;;AAKA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA,MAAMC,eAAe,GAAGD,0BAA0B,CAEhDE,iBAAoB,IAChB;EAEJ,OAAO,MAAMC,gBAAgB,SAASJ,SAAS,CAAiB;IAG/DK,WAAWA,CAAEC,KAAmB,EAAG;MAClC,KAAK,CAAEA,KAAM,CAAC;MACd,IAAI,CAACC,QAAQ,GAAG,EAAE;MAClB,IAAI,CAACC,UAAU,GAAG,IAAI,CAACA,UAAU,CAACC,IAAI,CAAE,IAAK,CAAC;MAC9C,IAAI,CAACC,YAAY,GAAG,IAAI,CAACA,YAAY,CAACD,IAAI,CAAE,IAAK,CAAC;IACnD;IAEAE,oBAAoBA,CAAA,EAAG;MACtB,IAAI,CAACJ,QAAQ,CAACK,OAAO,CAAEF,YAAa,CAAC;IACtC;IAEAF,UAAUA,CAAEK,EAAc,EAAEC,KAAa,EAAG;MAC3C,MAAMC,EAAE,GAAGP,UAAU,CAAE,MAAM;QAC5BK,EAAE,CAAC,CAAC;QACJ,IAAI,CAACH,YAAY,CAAEK,EAAG,CAAC;MACxB,CAAC,EAAED,KAAM,CAAC;MACV,IAAI,CAACP,QAAQ,CAACS,IAAI,CAAED,EAAG,CAAC;MACxB,OAAOA,EAAE;IACV;IAEAL,YAAYA,CAAEK,EAAU,EAAG;MAC1BL,YAAY,CAAEK,EAAG,CAAC;MAClB,IAAI,CAACR,QAAQ,GAAG,IAAI,CAACA,QAAQ,CAACU,MAAM,CACjCC,SAAS,IAAMA,SAAS,KAAKH,EAChC,CAAC;IACF;IAEAI,MAAMA,CAAA,EAAG;MACR;QACC;QACAC,aAAA,CAACjB,iBAAiB;UAAA,GACZ,IAAI,CAACG,KAAK;UACfE,UAAU,EAAG,IAAI,CAACA,UAAY;UAC9BE,YAAY,EAAG,IAAI,CAACA;QAAc,CAClC;MAAC;IAEJ;EACD,CAAC;AACF,CAAC,EACD,iBACD,CAAC;AAED,eAAeR,eAAe"}
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { createElement } from "@wordpress/element";
|
|
2
|
-
|
|
3
2
|
/**
|
|
4
3
|
* WordPress dependencies
|
|
5
4
|
*/
|
|
6
5
|
import { Component } from '@wordpress/element';
|
|
7
6
|
import deprecated from '@wordpress/deprecated';
|
|
7
|
+
|
|
8
8
|
/**
|
|
9
9
|
* Internal dependencies
|
|
10
10
|
*/
|
|
11
|
-
|
|
12
11
|
import { createHigherOrderComponent } from '../../utils/create-higher-order-component';
|
|
12
|
+
|
|
13
13
|
/**
|
|
14
14
|
* A Higher Order Component used to provide and manage internal component state
|
|
15
15
|
* via props.
|
|
@@ -20,7 +20,6 @@ import { createHigherOrderComponent } from '../../utils/create-higher-order-comp
|
|
|
20
20
|
*
|
|
21
21
|
* @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.
|
|
22
22
|
*/
|
|
23
|
-
|
|
24
23
|
export default function withState(initialState = {}) {
|
|
25
24
|
deprecated('wp.compose.withState', {
|
|
26
25
|
since: '5.8',
|
|
@@ -28,21 +27,18 @@ export default function withState(initialState = {}) {
|
|
|
28
27
|
});
|
|
29
28
|
return createHigherOrderComponent(OriginalComponent => {
|
|
30
29
|
return class WrappedComponent extends Component {
|
|
31
|
-
constructor(
|
|
32
|
-
/** @type {any} */
|
|
33
|
-
props) {
|
|
30
|
+
constructor( /** @type {any} */props) {
|
|
34
31
|
super(props);
|
|
35
32
|
this.setState = this.setState.bind(this);
|
|
36
33
|
this.state = initialState;
|
|
37
34
|
}
|
|
38
|
-
|
|
39
35
|
render() {
|
|
40
|
-
return createElement(OriginalComponent, {
|
|
36
|
+
return createElement(OriginalComponent, {
|
|
37
|
+
...this.props,
|
|
41
38
|
...this.state,
|
|
42
39
|
setState: this.setState
|
|
43
40
|
});
|
|
44
41
|
}
|
|
45
|
-
|
|
46
42
|
};
|
|
47
43
|
}, 'withState');
|
|
48
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["Component","deprecated","createHigherOrderComponent","withState","initialState","since","alternative","OriginalComponent","WrappedComponent","constructor","props","setState","bind","state","render","createElement"],"sources":["@wordpress/compose/src/higher-order/with-state/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { Component } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/**\n * Internal dependencies\n */\nimport { createHigherOrderComponent } from '../../utils/create-higher-order-component';\n\n/**\n * A Higher Order Component used to provide and manage internal component state\n * via props.\n *\n * @deprecated Use `useState` instead.\n *\n * @param {any} initialState Optional initial state of the component.\n *\n * @return {any} A higher order component wrapper accepting a component that takes the state props + its own props + `setState` and returning a component that only accepts the own props.\n */\nexport default function withState( initialState = {} ) {\n\tdeprecated( 'wp.compose.withState', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.element.useState',\n\t} );\n\n\treturn createHigherOrderComponent( ( OriginalComponent ) => {\n\t\treturn class WrappedComponent extends Component {\n\t\t\tconstructor( /** @type {any} */ props ) {\n\t\t\t\tsuper( props );\n\n\t\t\t\tthis.setState = this.setState.bind( this );\n\n\t\t\t\tthis.state = initialState;\n\t\t\t}\n\n\t\t\trender() {\n\t\t\t\treturn (\n\t\t\t\t\t<OriginalComponent\n\t\t\t\t\t\t{ ...this.props }\n\t\t\t\t\t\t{ ...this.state }\n\t\t\t\t\t\tsetState={ this.setState }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\t\t};\n\t}, 'withState' );\n}\n"],"mappings":";AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,oBAAoB;AAC9C,OAAOC,UAAU,MAAM,uBAAuB;;AAE9C;AACA;AACA;AACA,SAASC,0BAA0B,QAAQ,2CAA2C;;AAEtF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASC,SAASA,CAAEC,YAAY,GAAG,CAAC,CAAC,EAAG;EACtDH,UAAU,CAAE,sBAAsB,EAAE;IACnCI,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;EAEH,OAAOJ,0BAA0B,CAAIK,iBAAiB,IAAM;IAC3D,OAAO,MAAMC,gBAAgB,SAASR,SAAS,CAAC;MAC/CS,WAAWA,CAAA,CAAE,kBAAmBC,KAAK,EAAG;QACvC,KAAK,CAAEA,KAAM,CAAC;QAEd,IAAI,CAACC,QAAQ,GAAG,IAAI,CAACA,QAAQ,CAACC,IAAI,CAAE,IAAK,CAAC;QAE1C,IAAI,CAACC,KAAK,GAAGT,YAAY;MAC1B;MAEAU,MAAMA,CAAA,EAAG;QACR,OACCC,aAAA,CAACR,iBAAiB;UAAA,GACZ,IAAI,CAACG,KAAK;UAAA,GACV,IAAI,CAACG,KAAK;UACfF,QAAQ,EAAG,IAAI,CAACA;QAAU,CAC1B,CAAC;MAEJ;IACD,CAAC;EACF,CAAC,EAAE,WAAY,CAAC;AACjB"}
|
|
@@ -3,7 +3,6 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { flushSync, useEffect, useState } from '@wordpress/element';
|
|
5
5
|
import { createQueue } from '@wordpress/priority-queue';
|
|
6
|
-
|
|
7
6
|
/**
|
|
8
7
|
* Returns the first items from list that are present on state.
|
|
9
8
|
*
|
|
@@ -13,19 +12,16 @@ import { createQueue } from '@wordpress/priority-queue';
|
|
|
13
12
|
*/
|
|
14
13
|
function getFirstItemsPresentInState(list, state) {
|
|
15
14
|
const firstItems = [];
|
|
16
|
-
|
|
17
15
|
for (let i = 0; i < list.length; i++) {
|
|
18
16
|
const item = list[i];
|
|
19
|
-
|
|
20
17
|
if (!state.includes(item)) {
|
|
21
18
|
break;
|
|
22
19
|
}
|
|
23
|
-
|
|
24
20
|
firstItems.push(item);
|
|
25
21
|
}
|
|
26
|
-
|
|
27
22
|
return firstItems;
|
|
28
23
|
}
|
|
24
|
+
|
|
29
25
|
/**
|
|
30
26
|
* React hook returns an array which items get asynchronously appended from a source array.
|
|
31
27
|
* This behavior is useful if we want to render a list of items asynchronously for performance reasons.
|
|
@@ -35,8 +31,6 @@ function getFirstItemsPresentInState(list, state) {
|
|
|
35
31
|
*
|
|
36
32
|
* @return Async array.
|
|
37
33
|
*/
|
|
38
|
-
|
|
39
|
-
|
|
40
34
|
function useAsyncList(list, config = {
|
|
41
35
|
step: 1
|
|
42
36
|
}) {
|
|
@@ -47,14 +41,11 @@ function useAsyncList(list, config = {
|
|
|
47
41
|
useEffect(() => {
|
|
48
42
|
// On reset, we keep the first items that were previously rendered.
|
|
49
43
|
let firstItems = getFirstItemsPresentInState(list, current);
|
|
50
|
-
|
|
51
44
|
if (firstItems.length < step) {
|
|
52
45
|
firstItems = firstItems.concat(list.slice(firstItems.length, step));
|
|
53
46
|
}
|
|
54
|
-
|
|
55
47
|
setCurrent(firstItems);
|
|
56
48
|
const asyncQueue = createQueue();
|
|
57
|
-
|
|
58
49
|
for (let i = firstItems.length; i < list.length; i += step) {
|
|
59
50
|
asyncQueue.add({}, () => {
|
|
60
51
|
flushSync(() => {
|
|
@@ -62,11 +53,9 @@ function useAsyncList(list, config = {
|
|
|
62
53
|
});
|
|
63
54
|
});
|
|
64
55
|
}
|
|
65
|
-
|
|
66
56
|
return () => asyncQueue.reset();
|
|
67
57
|
}, [list]);
|
|
68
58
|
return current;
|
|
69
59
|
}
|
|
70
|
-
|
|
71
60
|
export default useAsyncList;
|
|
72
61
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"
|
|
1
|
+
{"version":3,"names":["flushSync","useEffect","useState","createQueue","getFirstItemsPresentInState","list","state","firstItems","i","length","item","includes","push","useAsyncList","config","step","current","setCurrent","concat","slice","asyncQueue","add","reset"],"sources":["@wordpress/compose/src/hooks/use-async-list/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { flushSync, useEffect, useState } from '@wordpress/element';\nimport { createQueue } from '@wordpress/priority-queue';\n\ntype AsyncListConfig = {\n\tstep: number;\n};\n\n/**\n * Returns the first items from list that are present on state.\n *\n * @param list New array.\n * @param state Current state.\n * @return First items present iin state.\n */\nfunction getFirstItemsPresentInState< T >( list: T[], state: T[] ): T[] {\n\tconst firstItems = [];\n\n\tfor ( let i = 0; i < list.length; i++ ) {\n\t\tconst item = list[ i ];\n\t\tif ( ! state.includes( item ) ) {\n\t\t\tbreak;\n\t\t}\n\n\t\tfirstItems.push( item );\n\t}\n\n\treturn firstItems;\n}\n\n/**\n * React hook returns an array which items get asynchronously appended from a source array.\n * This behavior is useful if we want to render a list of items asynchronously for performance reasons.\n *\n * @param list Source array.\n * @param config Configuration object.\n *\n * @return Async array.\n */\nfunction useAsyncList< T >(\n\tlist: T[],\n\tconfig: AsyncListConfig = { step: 1 }\n): T[] {\n\tconst { step = 1 } = config;\n\tconst [ current, setCurrent ] = useState< T[] >( [] );\n\n\tuseEffect( () => {\n\t\t// On reset, we keep the first items that were previously rendered.\n\t\tlet firstItems = getFirstItemsPresentInState( list, current );\n\t\tif ( firstItems.length < step ) {\n\t\t\tfirstItems = firstItems.concat(\n\t\t\t\tlist.slice( firstItems.length, step )\n\t\t\t);\n\t\t}\n\t\tsetCurrent( firstItems );\n\n\t\tconst asyncQueue = createQueue();\n\t\tfor ( let i = firstItems.length; i < list.length; i += step ) {\n\t\t\tasyncQueue.add( {}, () => {\n\t\t\t\tflushSync( () => {\n\t\t\t\t\tsetCurrent( ( state ) => [\n\t\t\t\t\t\t...state,\n\t\t\t\t\t\t...list.slice( i, i + step ),\n\t\t\t\t\t] );\n\t\t\t\t} );\n\t\t\t} );\n\t\t}\n\n\t\treturn () => asyncQueue.reset();\n\t}, [ list ] );\n\n\treturn current;\n}\n\nexport default useAsyncList;\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,oBAAoB;AACnE,SAASC,WAAW,QAAQ,2BAA2B;AAMvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,2BAA2BA,CAAOC,IAAS,EAAEC,KAAU,EAAQ;EACvE,MAAMC,UAAU,GAAG,EAAE;EAErB,KAAM,IAAIC,CAAC,GAAG,CAAC,EAAEA,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,EAAE,EAAG;IACvC,MAAME,IAAI,GAAGL,IAAI,CAAEG,CAAC,CAAE;IACtB,IAAK,CAAEF,KAAK,CAACK,QAAQ,CAAED,IAAK,CAAC,EAAG;MAC/B;IACD;IAEAH,UAAU,CAACK,IAAI,CAAEF,IAAK,CAAC;EACxB;EAEA,OAAOH,UAAU;AAClB;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASM,YAAYA,CACpBR,IAAS,EACTS,MAAuB,GAAG;EAAEC,IAAI,EAAE;AAAE,CAAC,EAC/B;EACN,MAAM;IAAEA,IAAI,GAAG;EAAE,CAAC,GAAGD,MAAM;EAC3B,MAAM,CAAEE,OAAO,EAAEC,UAAU,CAAE,GAAGf,QAAQ,CAAS,EAAG,CAAC;EAErDD,SAAS,CAAE,MAAM;IAChB;IACA,IAAIM,UAAU,GAAGH,2BAA2B,CAAEC,IAAI,EAAEW,OAAQ,CAAC;IAC7D,IAAKT,UAAU,CAACE,MAAM,GAAGM,IAAI,EAAG;MAC/BR,UAAU,GAAGA,UAAU,CAACW,MAAM,CAC7Bb,IAAI,CAACc,KAAK,CAAEZ,UAAU,CAACE,MAAM,EAAEM,IAAK,CACrC,CAAC;IACF;IACAE,UAAU,CAAEV,UAAW,CAAC;IAExB,MAAMa,UAAU,GAAGjB,WAAW,CAAC,CAAC;IAChC,KAAM,IAAIK,CAAC,GAAGD,UAAU,CAACE,MAAM,EAAED,CAAC,GAAGH,IAAI,CAACI,MAAM,EAAED,CAAC,IAAIO,IAAI,EAAG;MAC7DK,UAAU,CAACC,GAAG,CAAE,CAAC,CAAC,EAAE,MAAM;QACzBrB,SAAS,CAAE,MAAM;UAChBiB,UAAU,CAAIX,KAAK,IAAM,CACxB,GAAGA,KAAK,EACR,GAAGD,IAAI,CAACc,KAAK,CAAEX,CAAC,EAAEA,CAAC,GAAGO,IAAK,CAAC,CAC3B,CAAC;QACJ,CAAE,CAAC;MACJ,CAAE,CAAC;IACJ;IAEA,OAAO,MAAMK,UAAU,CAACE,KAAK,CAAC,CAAC;EAChC,CAAC,EAAE,CAAEjB,IAAI,CAAG,CAAC;EAEb,OAAOW,OAAO;AACf;AAEA,eAAeH,YAAY"}
|
|
@@ -3,11 +3,12 @@
|
|
|
3
3
|
*/
|
|
4
4
|
import { TAB } from '@wordpress/keycodes';
|
|
5
5
|
import { focus } from '@wordpress/dom';
|
|
6
|
+
|
|
6
7
|
/**
|
|
7
8
|
* Internal dependencies
|
|
8
9
|
*/
|
|
9
|
-
|
|
10
10
|
import useRefEffect from '../use-ref-effect';
|
|
11
|
+
|
|
11
12
|
/**
|
|
12
13
|
* In Dialogs/modals, the tabbing must be constrained to the content of
|
|
13
14
|
* the wrapper element. This hook adds the behavior to the returned ref.
|
|
@@ -29,73 +30,61 @@ import useRefEffect from '../use-ref-effect';
|
|
|
29
30
|
* }
|
|
30
31
|
* ```
|
|
31
32
|
*/
|
|
32
|
-
|
|
33
33
|
function useConstrainedTabbing() {
|
|
34
|
-
return useRefEffect((
|
|
35
|
-
|
|
36
|
-
node) => {
|
|
37
|
-
function onKeyDown(
|
|
38
|
-
/** @type {KeyboardEvent} */
|
|
39
|
-
event) {
|
|
34
|
+
return useRefEffect(( /** @type {HTMLElement} */node) => {
|
|
35
|
+
function onKeyDown( /** @type {KeyboardEvent} */event) {
|
|
40
36
|
const {
|
|
41
37
|
keyCode,
|
|
42
38
|
shiftKey,
|
|
43
39
|
target
|
|
44
40
|
} = event;
|
|
45
|
-
|
|
46
41
|
if (keyCode !== TAB) {
|
|
47
42
|
return;
|
|
48
43
|
}
|
|
49
|
-
|
|
50
44
|
const action = shiftKey ? 'findPrevious' : 'findNext';
|
|
51
|
-
const nextElement = focus.tabbable[action](
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
const nextElement = focus.tabbable[action]( /** @type {HTMLElement} */target) || null;
|
|
46
|
+
|
|
47
|
+
// When the target element contains the element that is about to
|
|
54
48
|
// receive focus, for example when the target is a tabbable
|
|
55
49
|
// container, browsers may disagree on where to move focus next.
|
|
56
50
|
// In this case we can't rely on native browsers behavior. We need
|
|
57
51
|
// to manage focus instead.
|
|
58
52
|
// See https://github.com/WordPress/gutenberg/issues/46041.
|
|
59
|
-
|
|
60
|
-
if (
|
|
61
|
-
/** @type {HTMLElement} */
|
|
62
|
-
target.contains(nextElement)) {
|
|
53
|
+
if ( /** @type {HTMLElement} */target.contains(nextElement)) {
|
|
63
54
|
event.preventDefault();
|
|
64
55
|
/** @type {HTMLElement} */
|
|
65
|
-
|
|
66
56
|
nextElement?.focus();
|
|
67
57
|
return;
|
|
68
|
-
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
// If the element that is about to receive focus is inside the
|
|
69
61
|
// area, rely on native browsers behavior and let tabbing follow
|
|
70
62
|
// the native tab sequence.
|
|
71
|
-
|
|
72
|
-
|
|
73
63
|
if (node.contains(nextElement)) {
|
|
74
64
|
return;
|
|
75
|
-
}
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
// If the element that is about to receive focus is outside the
|
|
76
68
|
// area, move focus to a div and insert it at the start or end of
|
|
77
69
|
// the area, depending on the direction. Without preventing default
|
|
78
70
|
// behaviour, the browser will then move focus to the next element.
|
|
79
|
-
|
|
80
|
-
|
|
81
71
|
const domAction = shiftKey ? 'append' : 'prepend';
|
|
82
72
|
const {
|
|
83
73
|
ownerDocument
|
|
84
74
|
} = node;
|
|
85
75
|
const trap = ownerDocument.createElement('div');
|
|
86
76
|
trap.tabIndex = -1;
|
|
87
|
-
node[domAction](trap);
|
|
77
|
+
node[domAction](trap);
|
|
88
78
|
|
|
79
|
+
// Remove itself when the trap loses focus.
|
|
89
80
|
trap.addEventListener('blur', () => node.removeChild(trap));
|
|
90
81
|
trap.focus();
|
|
91
82
|
}
|
|
92
|
-
|
|
93
83
|
node.addEventListener('keydown', onKeyDown);
|
|
94
84
|
return () => {
|
|
95
85
|
node.removeEventListener('keydown', onKeyDown);
|
|
96
86
|
};
|
|
97
87
|
}, []);
|
|
98
88
|
}
|
|
99
|
-
|
|
100
89
|
export default useConstrainedTabbing;
|
|
101
90
|
//# sourceMappingURL=index.js.map
|