@wordpress/compose 8.1.1 → 8.1.2-next.v.202606191442.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/README.md +42 -38
- package/build/hooks/use-constrained-tabbing/index.cjs +3 -9
- package/build/hooks/use-constrained-tabbing/index.cjs.map +3 -3
- package/build/hooks/use-debounce/index.cjs +1 -1
- package/build/hooks/use-debounce/index.cjs.map +3 -3
- package/build/hooks/use-disabled/index.cjs.map +2 -2
- package/build/hooks/use-dragging/index.cjs +27 -22
- package/build/hooks/use-dragging/index.cjs.map +4 -4
- package/build/hooks/use-dragging/types.cjs +19 -0
- package/build/hooks/use-dragging/types.cjs.map +7 -0
- package/build/hooks/use-drop-zone/index.cjs +2 -5
- package/build/hooks/use-drop-zone/index.cjs.map +3 -3
- package/build/hooks/use-drop-zone/types.cjs +19 -0
- package/build/hooks/use-drop-zone/types.cjs.map +7 -0
- package/build/hooks/use-fixed-window-list/index.cjs +10 -8
- package/build/hooks/use-fixed-window-list/index.cjs.map +3 -3
- package/build/hooks/use-focus-return/index.cjs +12 -9
- package/build/hooks/use-focus-return/index.cjs.map +3 -3
- package/build/hooks/use-isomorphic-layout-effect/index.cjs +1 -1
- package/build/hooks/use-isomorphic-layout-effect/index.cjs.map +1 -1
- package/build/hooks/use-keyboard-shortcut/index.cjs +1 -4
- package/build/hooks/use-keyboard-shortcut/index.cjs.map +3 -3
- package/build/hooks/use-reduced-motion/index.cjs +1 -1
- package/build/hooks/use-reduced-motion/index.cjs.map +2 -2
- package/build/hooks/use-throttle/index.cjs +1 -1
- package/build/hooks/use-throttle/index.cjs.map +3 -3
- package/build/hooks/use-viewport-match/index.cjs +2 -5
- package/build/hooks/use-viewport-match/index.cjs.map +3 -3
- package/build/hooks/use-warn-on-change/index.cjs +3 -10
- package/build/hooks/use-warn-on-change/index.cjs.map +3 -3
- package/build/utils/subscribe-delegated-listener/index.cjs.map +1 -1
- package/build-module/hooks/use-constrained-tabbing/index.mjs +3 -9
- package/build-module/hooks/use-constrained-tabbing/index.mjs.map +3 -3
- package/build-module/hooks/use-debounce/index.mjs +1 -1
- package/build-module/hooks/use-debounce/index.mjs.map +3 -3
- package/build-module/hooks/use-disabled/index.mjs.map +2 -2
- package/build-module/hooks/use-dragging/index.mjs +27 -22
- package/build-module/hooks/use-dragging/index.mjs.map +4 -4
- package/build-module/hooks/use-dragging/types.mjs +1 -0
- package/build-module/hooks/use-dragging/types.mjs.map +7 -0
- package/build-module/hooks/use-drop-zone/index.mjs +2 -5
- package/build-module/hooks/use-drop-zone/index.mjs.map +3 -3
- package/build-module/hooks/use-drop-zone/types.mjs +1 -0
- package/build-module/hooks/use-drop-zone/types.mjs.map +7 -0
- package/build-module/hooks/use-fixed-window-list/index.mjs +10 -8
- package/build-module/hooks/use-fixed-window-list/index.mjs.map +3 -3
- package/build-module/hooks/use-focus-return/index.mjs +12 -9
- package/build-module/hooks/use-focus-return/index.mjs.map +3 -3
- package/build-module/hooks/use-isomorphic-layout-effect/index.mjs +1 -1
- package/build-module/hooks/use-isomorphic-layout-effect/index.mjs.map +1 -1
- package/build-module/hooks/use-keyboard-shortcut/index.mjs +1 -4
- package/build-module/hooks/use-keyboard-shortcut/index.mjs.map +3 -3
- package/build-module/hooks/use-reduced-motion/index.mjs +1 -1
- package/build-module/hooks/use-reduced-motion/index.mjs.map +2 -2
- package/build-module/hooks/use-throttle/index.mjs +1 -1
- package/build-module/hooks/use-throttle/index.mjs.map +3 -3
- package/build-module/hooks/use-viewport-match/index.mjs +2 -5
- package/build-module/hooks/use-viewport-match/index.mjs.map +3 -3
- package/build-module/hooks/use-warn-on-change/index.mjs +3 -10
- package/build-module/hooks/use-warn-on-change/index.mjs.map +3 -3
- package/build-module/utils/subscribe-delegated-listener/index.mjs.map +1 -1
- package/build-types/hooks/use-constrained-tabbing/index.d.ts +2 -2
- package/build-types/hooks/use-constrained-tabbing/index.d.ts.map +1 -1
- package/build-types/hooks/use-debounce/index.d.ts +7 -6
- package/build-types/hooks/use-debounce/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-dragging/index.d.ts +9 -13
- package/build-types/hooks/use-dragging/index.d.ts.map +1 -1
- package/build-types/hooks/use-dragging/types.d.ts +11 -0
- package/build-types/hooks/use-dragging/types.d.ts.map +1 -0
- package/build-types/hooks/use-drop-zone/index.d.ts +4 -21
- package/build-types/hooks/use-drop-zone/index.d.ts.map +1 -1
- package/build-types/hooks/use-drop-zone/types.d.ts +35 -0
- package/build-types/hooks/use-drop-zone/types.d.ts.map +1 -0
- package/build-types/hooks/use-fixed-window-list/index.d.ts +22 -26
- package/build-types/hooks/use-fixed-window-list/index.d.ts.map +1 -1
- package/build-types/hooks/use-focus-return/index.d.ts +3 -3
- package/build-types/hooks/use-focus-return/index.d.ts.map +1 -1
- package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts +29 -23
- package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
- package/build-types/hooks/use-reduced-motion/index.d.ts +1 -1
- package/build-types/hooks/use-reduced-motion/index.d.ts.map +1 -1
- package/build-types/hooks/use-throttle/index.d.ts +8 -6
- package/build-types/hooks/use-throttle/index.d.ts.map +1 -1
- package/build-types/hooks/use-viewport-match/index.d.ts +3 -3
- package/build-types/hooks/use-viewport-match/index.d.ts.map +1 -1
- package/build-types/hooks/use-warn-on-change/index.d.ts +7 -7
- package/build-types/hooks/use-warn-on-change/index.d.ts.map +1 -1
- package/package.json +16 -11
- package/src/hooks/use-constrained-tabbing/{index.js → index.ts} +7 -11
- package/src/hooks/use-debounce/{index.js → index.ts} +11 -6
- package/src/hooks/use-disabled/index.ts +3 -1
- package/src/hooks/use-dragging/index.ts +78 -0
- package/src/hooks/use-dragging/types.ts +11 -0
- package/src/hooks/use-drop-zone/{index.js → index.ts} +17 -31
- package/src/hooks/use-drop-zone/types.ts +34 -0
- package/src/hooks/use-fixed-window-list/{index.js → index.ts} +46 -37
- package/src/hooks/use-focus-return/{index.js → index.ts} +26 -21
- package/src/hooks/use-keyboard-shortcut/{index.js → index.ts} +43 -28
- package/src/hooks/use-reduced-motion/{index.js → index.ts} +2 -2
- package/src/hooks/use-throttle/{index.js → index.ts} +12 -6
- package/src/hooks/use-viewport-match/{index.js → index.ts} +30 -29
- package/src/hooks/use-warn-on-change/index.ts +42 -0
- package/src/hooks/use-dragging/index.js +0 -74
- package/src/hooks/use-warn-on-change/index.js +0 -43
- /package/src/hooks/use-isomorphic-layout-effect/{index.js → index.ts} +0 -0
package/README.md
CHANGED
|
@@ -198,23 +198,23 @@ In Dialogs/modals, the tabbing must be constrained to the content of the wrapper
|
|
|
198
198
|
|
|
199
199
|
_Usage_
|
|
200
200
|
|
|
201
|
-
```
|
|
201
|
+
```ts
|
|
202
202
|
import { useConstrainedTabbing } from '@wordpress/compose';
|
|
203
203
|
|
|
204
204
|
const ConstrainedTabbingExample = () => {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
}
|
|
205
|
+
const constrainedTabbingRef = useConstrainedTabbing()
|
|
206
|
+
return (
|
|
207
|
+
<div ref={ constrainedTabbingRef }>
|
|
208
|
+
<Button />
|
|
209
|
+
<Button />
|
|
210
|
+
</div>
|
|
211
|
+
);
|
|
212
|
+
}
|
|
213
213
|
```
|
|
214
214
|
|
|
215
215
|
_Returns_
|
|
216
216
|
|
|
217
|
-
- `React.RefCallback<Element>`: Element Ref.
|
|
217
|
+
- `React.RefCallback< Element >`: Element Ref.
|
|
218
218
|
|
|
219
219
|
### useCopyOnClick
|
|
220
220
|
|
|
@@ -256,12 +256,12 @@ _Related_
|
|
|
256
256
|
_Parameters_
|
|
257
257
|
|
|
258
258
|
- _fn_ `TFunc`: The function to debounce.
|
|
259
|
-
- _wait_ `
|
|
260
|
-
- _options_ `
|
|
259
|
+
- _wait_ `number`: The number of milliseconds to delay.
|
|
260
|
+
- _options_ `DebounceOptions`: The options object.
|
|
261
261
|
|
|
262
262
|
_Returns_
|
|
263
263
|
|
|
264
|
-
- `
|
|
264
|
+
- `DebouncedFunc< TFunc >`: Debounced function.
|
|
265
265
|
|
|
266
266
|
### useDebouncedInput
|
|
267
267
|
|
|
@@ -374,27 +374,27 @@ Adds the unmount behavior of returning focus to the element which had it previou
|
|
|
374
374
|
|
|
375
375
|
_Usage_
|
|
376
376
|
|
|
377
|
-
```
|
|
377
|
+
```ts
|
|
378
378
|
import { useFocusReturn } from '@wordpress/compose';
|
|
379
379
|
|
|
380
380
|
const WithFocusReturn = () => {
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
}
|
|
381
|
+
const ref = useFocusReturn()
|
|
382
|
+
return (
|
|
383
|
+
<div ref={ ref }>
|
|
384
|
+
<Button />
|
|
385
|
+
<Button />
|
|
386
|
+
</div>
|
|
387
|
+
);
|
|
388
|
+
}
|
|
389
389
|
```
|
|
390
390
|
|
|
391
391
|
_Parameters_
|
|
392
392
|
|
|
393
|
-
- _onFocusReturn_ `
|
|
393
|
+
- _onFocusReturn_ `() => void`: Overrides the default return behavior.
|
|
394
394
|
|
|
395
395
|
_Returns_
|
|
396
396
|
|
|
397
|
-
- `React.RefCallback<HTMLElement>`: Element Ref.
|
|
397
|
+
- `React.RefCallback< HTMLElement >`: Element Ref.
|
|
398
398
|
|
|
399
399
|
### useInstanceId
|
|
400
400
|
|
|
@@ -424,9 +424,13 @@ _Related_
|
|
|
424
424
|
|
|
425
425
|
_Parameters_
|
|
426
426
|
|
|
427
|
-
- _shortcuts_ `string[]|string`: Keyboard Shortcuts.
|
|
428
|
-
- _callback_ `(e:
|
|
429
|
-
- _options_ `
|
|
427
|
+
- _shortcuts_ `string[] | string`: Keyboard Shortcuts.
|
|
428
|
+
- _callback_ `( e: ExtendedKeyboardEvent, combo: string ) => void`: Shortcut callback.
|
|
429
|
+
- _options_ `Partial< KeyboardShortcutConfig >`: Shortcut options.
|
|
430
|
+
- _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`:
|
|
431
|
+
- _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`:
|
|
432
|
+
- _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`:
|
|
433
|
+
- _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`:
|
|
430
434
|
|
|
431
435
|
### useMediaQuery
|
|
432
436
|
|
|
@@ -575,12 +579,12 @@ _Related_
|
|
|
575
579
|
_Parameters_
|
|
576
580
|
|
|
577
581
|
- _fn_ `TFunc`: The function to throttle.
|
|
578
|
-
- _wait_ `
|
|
579
|
-
- _options_ `
|
|
582
|
+
- _wait_ `number`: The number of milliseconds to throttle invocations to.
|
|
583
|
+
- _options_ `ThrottleOptions`: The options object.
|
|
580
584
|
|
|
581
585
|
_Returns_
|
|
582
586
|
|
|
583
|
-
- `
|
|
587
|
+
- `DebouncedFunc< TFunc >`: Throttled function.
|
|
584
588
|
|
|
585
589
|
### useViewportMatch
|
|
586
590
|
|
|
@@ -588,16 +592,16 @@ Returns true if the viewport matches the given query, or false otherwise.
|
|
|
588
592
|
|
|
589
593
|
_Usage_
|
|
590
594
|
|
|
591
|
-
```
|
|
595
|
+
```ts
|
|
592
596
|
useViewportMatch( 'huge', '<' );
|
|
593
597
|
useViewportMatch( 'medium' );
|
|
594
598
|
```
|
|
595
599
|
|
|
596
600
|
_Parameters_
|
|
597
601
|
|
|
598
|
-
- _breakpoint_ `
|
|
599
|
-
- _operator_ `
|
|
600
|
-
- _view_ `
|
|
602
|
+
- _breakpoint_ `Breakpoint`: Breakpoint size name.
|
|
603
|
+
- _operator_ `ViewportOperator`: Viewport operator.
|
|
604
|
+
- _view_ `Window | undefined`: Window instance in which to perform viewport matching.
|
|
601
605
|
|
|
602
606
|
_Returns_
|
|
603
607
|
|
|
@@ -605,12 +609,12 @@ _Returns_
|
|
|
605
609
|
|
|
606
610
|
### useWarnOnChange
|
|
607
611
|
|
|
608
|
-
Hook that performs a shallow comparison between the
|
|
612
|
+
Hook that performs a shallow comparison between the previous value of an object and the new one, if there's a difference, it prints it to the console. This is useful in performance related work, to check why a component re-renders.
|
|
609
613
|
|
|
610
614
|
_Usage_
|
|
611
615
|
|
|
612
|
-
```
|
|
613
|
-
function MyComponent( props ) {
|
|
616
|
+
```tsx
|
|
617
|
+
function MyComponent( props: Record< string, any > ) {
|
|
614
618
|
useWarnOnChange( props );
|
|
615
619
|
|
|
616
620
|
return 'Something';
|
|
@@ -619,7 +623,7 @@ function MyComponent( props ) {
|
|
|
619
623
|
|
|
620
624
|
_Parameters_
|
|
621
625
|
|
|
622
|
-
- _object_ `
|
|
626
|
+
- _object_ `Record< string, any > | any[]`: Object which changes to compare.
|
|
623
627
|
- _prefix_ `string`: Just a prefix to show when console logging.
|
|
624
628
|
|
|
625
629
|
### withGlobalEvents
|
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// packages/compose/src/hooks/use-constrained-tabbing/index.
|
|
30
|
+
// packages/compose/src/hooks/use-constrained-tabbing/index.ts
|
|
31
31
|
var use_constrained_tabbing_exports = {};
|
|
32
32
|
__export(use_constrained_tabbing_exports, {
|
|
33
33
|
default: () => use_constrained_tabbing_default
|
|
@@ -43,14 +43,8 @@ function useConstrainedTabbing() {
|
|
|
43
43
|
return;
|
|
44
44
|
}
|
|
45
45
|
const action = shiftKey ? "findPrevious" : "findNext";
|
|
46
|
-
const nextElement = import_dom.focus.tabbable[action](
|
|
47
|
-
|
|
48
|
-
target
|
|
49
|
-
) || null;
|
|
50
|
-
if (
|
|
51
|
-
/** @type {HTMLElement} */
|
|
52
|
-
target.contains(nextElement)
|
|
53
|
-
) {
|
|
46
|
+
const nextElement = import_dom.focus.tabbable[action](target) || null;
|
|
47
|
+
if (target.contains(nextElement)) {
|
|
54
48
|
event.preventDefault();
|
|
55
49
|
nextElement?.focus();
|
|
56
50
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/use-constrained-tabbing/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In Dialogs/modals, the tabbing must be constrained to the content of\n * the wrapper element. This hook adds the behavior to the returned ref.\n *\n * @return
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAsB;AAKtB,4BAAyB;AAuBzB,SAAS,
|
|
3
|
+
"sources": ["../../../src/hooks/use-constrained-tabbing/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In Dialogs/modals, the tabbing must be constrained to the content of\n * the wrapper element. This hook adds the behavior to the returned ref.\n *\n * @return Element Ref.\n *\n * @example\n * ```ts\n * import { useConstrainedTabbing } from '@wordpress/compose';\n *\n * const ConstrainedTabbingExample = () => {\n * const constrainedTabbingRef = useConstrainedTabbing()\n * return (\n * <div ref={ constrainedTabbingRef }>\n * <Button />\n * <Button />\n * </div>\n * );\n * }\n * ```\n */\nfunction useConstrainedTabbing(): React.RefCallback< Element > {\n\treturn useRefEffect( ( node: HTMLElement ) => {\n\t\tfunction onKeyDown( event: KeyboardEvent ): void {\n\t\t\tconst { key, shiftKey, target } = event;\n\n\t\t\tif ( key !== 'Tab' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = shiftKey ? 'findPrevious' : 'findNext';\n\t\t\tconst nextElement =\n\t\t\t\tfocus.tabbable[ action ]( target as HTMLElement ) || null;\n\n\t\t\t// When the target element contains the element that is about to\n\t\t\t// receive focus, for example when the target is a tabbable\n\t\t\t// container, browsers may disagree on where to move focus next.\n\t\t\t// In this case we can't rely on native browsers behavior. We need\n\t\t\t// to manage focus instead.\n\t\t\t// See https://github.com/WordPress/gutenberg/issues/46041.\n\t\t\tif ( ( target as HTMLElement ).contains( nextElement ) ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tnextElement?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is inside the\n\t\t\t// area, rely on native browsers behavior and let tabbing follow\n\t\t\t// the native tab sequence.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is outside the\n\t\t\t// area, move focus to a div and insert it at the start or end of\n\t\t\t// the area, depending on the direction. Without preventing default\n\t\t\t// behaviour, the browser will then move focus to the next element.\n\t\t\tconst domAction = shiftKey ? 'append' : 'prepend';\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst trap = ownerDocument.createElement( 'div' );\n\n\t\t\ttrap.tabIndex = -1;\n\t\t\tnode[ domAction ]( trap );\n\n\t\t\t// Remove itself when the trap loses focus.\n\t\t\ttrap.addEventListener( 'blur', () => node.removeChild( trap ) );\n\n\t\t\ttrap.focus();\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAsB;AAKtB,4BAAyB;AAuBzB,SAAS,wBAAsD;AAC9D,aAAO,sBAAAA,SAAc,CAAE,SAAuB;AAC7C,aAAS,UAAW,OAA6B;AAChD,YAAM,EAAE,KAAK,UAAU,OAAO,IAAI;AAElC,UAAK,QAAQ,OAAQ;AACpB;AAAA,MACD;AAEA,YAAM,SAAS,WAAW,iBAAiB;AAC3C,YAAM,cACL,iBAAM,SAAU,MAAO,EAAG,MAAsB,KAAK;AAQtD,UAAO,OAAwB,SAAU,WAAY,GAAI;AACxD,cAAM,eAAe;AACrB,qBAAa,MAAM;AACnB;AAAA,MACD;AAKA,UAAK,KAAK,SAAU,WAAY,GAAI;AACnC;AAAA,MACD;AAMA,YAAM,YAAY,WAAW,WAAW;AACxC,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,OAAO,cAAc,cAAe,KAAM;AAEhD,WAAK,WAAW;AAChB,WAAM,SAAU,EAAG,IAAK;AAGxB,WAAK,iBAAkB,QAAQ,MAAM,KAAK,YAAa,IAAK,CAAE;AAE9D,WAAK,MAAM;AAAA,IACZ;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAC5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAEA,IAAO,kCAAQ;",
|
|
6
6
|
"names": ["useRefEffect"]
|
|
7
7
|
}
|
|
@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
|
|
20
|
-
// packages/compose/src/hooks/use-debounce/index.
|
|
20
|
+
// packages/compose/src/hooks/use-debounce/index.ts
|
|
21
21
|
var use_debounce_exports = {};
|
|
22
22
|
__export(use_debounce_exports, {
|
|
23
23
|
default: () => useDebounce
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/use-debounce/index.
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#debounce\n *\n * @template
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA2B;AAK3B,qBAA0B;AAK1B,sBAAyB;
|
|
3
|
+
"sources": ["../../../src/hooks/use-debounce/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport type { DebounceOptions, DebouncedFunc } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#debounce\n *\n * @template TFunc\n *\n * @param fn The function to debounce.\n * @param wait The number of milliseconds to delay.\n * @param options The options object.\n * @return Debounced function.\n */\nexport default function useDebounce< TFunc extends ( ...args: any[] ) => void >(\n\tfn: TFunc,\n\twait?: number,\n\toptions?: DebounceOptions\n): DebouncedFunc< TFunc > {\n\tconst debounced = useMemoOne(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options?.leading, options?.trailing, options?.maxWait ]\n\t);\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA2B;AAK3B,qBAA0B;AAK1B,sBAAyB;AAkBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,SAAS,SAAS,SAAS,UAAU,SAAS,OAAQ;AAAA,EACnE;AACA,gCAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/use-disabled/index.ts"],
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * If you can, prefer the use of the inert HTML attribute.\n *\n * @param {Object} config Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {React.RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useDisabled } from '@wordpress/compose';\n *\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled( {\n\tisDisabled: isDisabledProp = false,\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst defaultView = node?.ownerDocument?.defaultView;\n\t\t\tif ( ! defaultView ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\tconst updates:
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAyB;AACzB,4BAAyB;AA4BV,SAAR,YAA8B;AAAA,EACpC,YAAY,iBAAiB;AAC9B,
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * In some circumstances, such as block previews, all focusable DOM elements\n * (input fields, links, buttons, etc.) need to be disabled. This hook adds the\n * behavior to disable nested DOM elements to the returned ref.\n *\n * If you can, prefer the use of the inert HTML attribute.\n *\n * @param {Object} config Configuration object.\n * @param {boolean=} config.isDisabled Whether the element should be disabled.\n * @return {React.RefCallback<HTMLElement>} Element Ref.\n *\n * @example\n * ```js\n * import { useDisabled } from '@wordpress/compose';\n *\n * const DisabledExample = () => {\n * \tconst disabledRef = useDisabled();\n *\treturn (\n *\t\t<div ref={ disabledRef }>\n *\t\t\t<a href=\"#\">This link will have tabindex set to -1</a>\n *\t\t\t<input placeholder=\"This input will have the disabled attribute added to it.\" type=\"text\" />\n *\t\t</div>\n *\t);\n * };\n * ```\n */\nexport default function useDisabled( {\n\tisDisabled: isDisabledProp = false,\n}: {\n\tisDisabled?: boolean;\n} = {} ) {\n\treturn useRefEffect(\n\t\t( node ) => {\n\t\t\tif ( isDisabledProp ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst defaultView = node?.ownerDocument?.defaultView;\n\t\t\tif ( ! defaultView ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t/** A variable keeping track of the previous updates in order to restore them. */\n\t\t\tconst updates: ( () => void )[] = [];\n\t\t\tconst disable = () => {\n\t\t\t\tnode.childNodes.forEach( ( child ) => {\n\t\t\t\t\tif ( ! ( child instanceof defaultView.HTMLElement ) ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! child.getAttribute( 'inert' ) ) {\n\t\t\t\t\t\tchild.setAttribute( 'inert', 'true' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tchild.removeAttribute( 'inert' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAyB;AACzB,4BAAyB;AA4BV,SAAR,YAA8B;AAAA,EACpC,YAAY,iBAAiB;AAC9B,IAEI,CAAC,GAAI;AACR,aAAO,sBAAAA;AAAA,IACN,CAAE,SAAU;AACX,UAAK,gBAAiB;AACrB;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,eAAe;AACzC,UAAK,CAAE,aAAc;AACpB;AAAA,MACD;AAGA,YAAM,UAA4B,CAAC;AACnC,YAAM,UAAU,MAAM;AACrB,aAAK,WAAW,QAAS,CAAE,UAAW;AACrC,cAAK,EAAI,iBAAiB,YAAY,cAAgB;AACrD;AAAA,UACD;AACA,cAAK,CAAE,MAAM,aAAc,OAAQ,GAAI;AACtC,kBAAM,aAAc,SAAS,MAAO;AACpC,oBAAQ,KAAM,MAAM;AACnB,oBAAM,gBAAiB,OAAQ;AAAA,YAChC,CAAE;AAAA,UACH;AAAA,QACD,CAAE;AAAA,MACH;AAIA,YAAM,uBAAmB,0BAAU,SAAS,GAAG;AAAA,QAC9C,SAAS;AAAA,MACV,CAAE;AACF,cAAQ;AAGR,YAAM,WAAW,IAAI,OAAO,iBAAkB,gBAAiB;AAC/D,eAAS,QAAS,MAAM;AAAA,QACvB,WAAW;AAAA,MACZ,CAAE;AAEF,aAAO,MAAM;AACZ,YAAK,UAAW;AACf,mBAAS,WAAW;AAAA,QACrB;AACA,yBAAiB,OAAO;AACxB,gBAAQ,QAAS,CAAE,WAAY,OAAO,CAAE;AAAA,MACzC;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AACD;",
|
|
6
6
|
"names": ["useRefEffect"]
|
|
7
7
|
}
|
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// packages/compose/src/hooks/use-dragging/index.
|
|
30
|
+
// packages/compose/src/hooks/use-dragging/index.ts
|
|
31
31
|
var use_dragging_exports = {};
|
|
32
32
|
__export(use_dragging_exports, {
|
|
33
33
|
default: () => useDragging
|
|
@@ -35,7 +35,11 @@ __export(use_dragging_exports, {
|
|
|
35
35
|
module.exports = __toCommonJS(use_dragging_exports);
|
|
36
36
|
var import_element = require("@wordpress/element");
|
|
37
37
|
var import_use_isomorphic_layout_effect = __toESM(require("../use-isomorphic-layout-effect/index.cjs"));
|
|
38
|
-
function useDragging({
|
|
38
|
+
function useDragging({
|
|
39
|
+
onDragStart,
|
|
40
|
+
onDragMove,
|
|
41
|
+
onDragEnd
|
|
42
|
+
}) {
|
|
39
43
|
const [isDragging, setIsDragging] = (0, import_element.useState)(false);
|
|
40
44
|
const eventsRef = (0, import_element.useRef)({
|
|
41
45
|
onDragStart,
|
|
@@ -47,26 +51,27 @@ function useDragging({ onDragStart, onDragMove, onDragEnd }) {
|
|
|
47
51
|
eventsRef.current.onDragMove = onDragMove;
|
|
48
52
|
eventsRef.current.onDragEnd = onDragEnd;
|
|
49
53
|
}, [onDragStart, onDragMove, onDragEnd]);
|
|
50
|
-
const onMouseMove = (0, import_element.useCallback)(
|
|
51
|
-
|
|
52
|
-
[]
|
|
53
|
-
);
|
|
54
|
-
const endDrag = (0, import_element.useCallback)((event) => {
|
|
55
|
-
if (eventsRef.current.onDragEnd) {
|
|
56
|
-
eventsRef.current.onDragEnd(event);
|
|
57
|
-
}
|
|
58
|
-
document.removeEventListener("mousemove", onMouseMove);
|
|
59
|
-
document.removeEventListener("mouseup", endDrag);
|
|
60
|
-
setIsDragging(false);
|
|
61
|
-
}, []);
|
|
62
|
-
const startDrag = (0, import_element.useCallback)((event) => {
|
|
63
|
-
if (eventsRef.current.onDragStart) {
|
|
64
|
-
eventsRef.current.onDragStart(event);
|
|
65
|
-
}
|
|
66
|
-
document.addEventListener("mousemove", onMouseMove);
|
|
67
|
-
document.addEventListener("mouseup", endDrag);
|
|
68
|
-
setIsDragging(true);
|
|
54
|
+
const onMouseMove = (0, import_element.useCallback)((event) => {
|
|
55
|
+
eventsRef.current.onDragMove?.(event);
|
|
69
56
|
}, []);
|
|
57
|
+
const endDrag = (0, import_element.useCallback)(
|
|
58
|
+
function endDrag2(event) {
|
|
59
|
+
eventsRef.current.onDragEnd?.(event);
|
|
60
|
+
document.removeEventListener("mousemove", onMouseMove);
|
|
61
|
+
document.removeEventListener("mouseup", endDrag2);
|
|
62
|
+
setIsDragging(false);
|
|
63
|
+
},
|
|
64
|
+
[onMouseMove]
|
|
65
|
+
);
|
|
66
|
+
const startDrag = (0, import_element.useCallback)(
|
|
67
|
+
(event) => {
|
|
68
|
+
eventsRef.current.onDragStart?.(event);
|
|
69
|
+
document.addEventListener("mousemove", onMouseMove);
|
|
70
|
+
document.addEventListener("mouseup", endDrag);
|
|
71
|
+
setIsDragging(true);
|
|
72
|
+
},
|
|
73
|
+
[onMouseMove, endDrag]
|
|
74
|
+
);
|
|
70
75
|
(0, import_element.useEffect)(() => {
|
|
71
76
|
return () => {
|
|
72
77
|
if (isDragging) {
|
|
@@ -74,7 +79,7 @@ function useDragging({ onDragStart, onDragMove, onDragEnd }) {
|
|
|
74
79
|
document.removeEventListener("mouseup", endDrag);
|
|
75
80
|
}
|
|
76
81
|
};
|
|
77
|
-
}, [isDragging]);
|
|
82
|
+
}, [isDragging, onMouseMove, endDrag]);
|
|
78
83
|
return {
|
|
79
84
|
startDrag,
|
|
80
85
|
endDrag,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/use-dragging/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyD;AAKzD,0CAAsC;
|
|
6
|
-
"names": ["useIsomorphicLayoutEffect"]
|
|
3
|
+
"sources": ["../../../src/hooks/use-dragging/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';\nimport type { DraggingProps, DraggingReturn } from './types';\n\n/**\n * Hook to manage drag events with proper event handling\n *\n * @param props Drag handlers\n * @param props.onDragStart\n * @param props.onDragMove\n * @param props.onDragEnd\n * @return Drag state and handlers\n */\nexport default function useDragging( {\n\tonDragStart,\n\tonDragMove,\n\tonDragEnd,\n}: DraggingProps ): DraggingReturn {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\n\tconst eventsRef = useRef< DraggingProps >( {\n\t\tonDragStart,\n\t\tonDragMove,\n\t\tonDragEnd,\n\t} );\n\tuseIsomorphicLayoutEffect( () => {\n\t\teventsRef.current.onDragStart = onDragStart;\n\t\teventsRef.current.onDragMove = onDragMove;\n\t\teventsRef.current.onDragEnd = onDragEnd;\n\t}, [ onDragStart, onDragMove, onDragEnd ] );\n\n\tconst onMouseMove = useCallback( ( event: MouseEvent ): void => {\n\t\teventsRef.current.onDragMove?.( event );\n\t}, [] );\n\n\tconst endDrag = useCallback(\n\t\tfunction endDrag( event?: MouseEvent ): void {\n\t\t\teventsRef.current.onDragEnd?.( event );\n\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\t\tsetIsDragging( false );\n\t\t},\n\t\t[ onMouseMove ]\n\t);\n\n\tconst startDrag = useCallback(\n\t\t( event: React.MouseEvent ): void => {\n\t\t\teventsRef.current.onDragStart?.( event );\n\t\t\tdocument.addEventListener( 'mousemove', onMouseMove );\n\t\t\tdocument.addEventListener( 'mouseup', endDrag );\n\t\t\tsetIsDragging( true );\n\t\t},\n\t\t[ onMouseMove, endDrag ]\n\t);\n\n\t// Remove the global events when unmounting if needed.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging ) {\n\t\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\t\t}\n\t\t};\n\t}, [ isDragging, onMouseMove, endDrag ] );\n\n\treturn {\n\t\tstartDrag,\n\t\tendDrag,\n\t\tisDragging,\n\t};\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyD;AAKzD,0CAAsC;AAYvB,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,QAAM,gBAAY,uBAAyB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,0CAAAA,SAA2B,MAAM;AAChC,cAAU,QAAQ,cAAc;AAChC,cAAU,QAAQ,aAAa;AAC/B,cAAU,QAAQ,YAAY;AAAA,EAC/B,GAAG,CAAE,aAAa,YAAY,SAAU,CAAE;AAE1C,QAAM,kBAAc,4BAAa,CAAE,UAA6B;AAC/D,cAAU,QAAQ,aAAc,KAAM;AAAA,EACvC,GAAG,CAAC,CAAE;AAEN,QAAM,cAAU;AAAA,IACf,SAASC,SAAS,OAA2B;AAC5C,gBAAU,QAAQ,YAAa,KAAM;AACrC,eAAS,oBAAqB,aAAa,WAAY;AACvD,eAAS,oBAAqB,WAAWA,QAAQ;AACjD,oBAAe,KAAM;AAAA,IACtB;AAAA,IACA,CAAE,WAAY;AAAA,EACf;AAEA,QAAM,gBAAY;AAAA,IACjB,CAAE,UAAmC;AACpC,gBAAU,QAAQ,cAAe,KAAM;AACvC,eAAS,iBAAkB,aAAa,WAAY;AACpD,eAAS,iBAAkB,WAAW,OAAQ;AAC9C,oBAAe,IAAK;AAAA,IACrB;AAAA,IACA,CAAE,aAAa,OAAQ;AAAA,EACxB;AAGA,gCAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,YAAa;AACjB,iBAAS,oBAAqB,aAAa,WAAY;AACvD,iBAAS,oBAAqB,WAAW,OAAQ;AAAA,MAClD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,YAAY,aAAa,OAAQ,CAAE;AAExC,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
|
|
6
|
+
"names": ["useIsomorphicLayoutEffect", "endDrag"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// packages/compose/src/hooks/use-dragging/types.ts
|
|
17
|
+
var types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(types_exports);
|
|
19
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-dragging/types.ts"],
|
|
4
|
+
"sourcesContent": ["export interface DraggingProps {\n\tonDragStart?: ( e: React.MouseEvent ) => void;\n\tonDragMove?: ( e: MouseEvent ) => void;\n\tonDragEnd?: ( e?: MouseEvent ) => void;\n}\n\nexport interface DraggingReturn {\n\tstartDrag: ( e: React.MouseEvent ) => void;\n\tendDrag: ( e?: MouseEvent ) => void;\n\tisDragging: boolean;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
|
|
|
27
27
|
));
|
|
28
28
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
29
|
|
|
30
|
-
// packages/compose/src/hooks/use-drop-zone/index.
|
|
30
|
+
// packages/compose/src/hooks/use-drop-zone/index.ts
|
|
31
31
|
var use_drop_zone_exports = {};
|
|
32
32
|
__export(use_drop_zone_exports, {
|
|
33
33
|
default: () => useDropZone
|
|
@@ -85,10 +85,7 @@ function useDropZone({
|
|
|
85
85
|
}
|
|
86
86
|
function onDragEnter(event) {
|
|
87
87
|
event.preventDefault();
|
|
88
|
-
if (element.contains(
|
|
89
|
-
/** @type {Node} */
|
|
90
|
-
event.relatedTarget
|
|
91
|
-
)) {
|
|
88
|
+
if (element.contains(event.relatedTarget)) {
|
|
92
89
|
return;
|
|
93
90
|
}
|
|
94
91
|
if (_onDragEnter) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/use-drop-zone/index.
|
|
4
|
-
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\nimport useEvent from '../use-event';\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAAyB;AACzB,uBAAqB;
|
|
3
|
+
"sources": ["../../../src/hooks/use-drop-zone/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\nimport useEvent from '../use-event';\nimport type { UseDropZoneProps } from './types';\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {UseDropZoneProps} props Hook options\n * @return Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tdropZoneElement,\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n}: UseDropZoneProps ): React.RefCallback< HTMLElement > {\n\tconst onDropEvent = useEvent( _onDrop );\n\tconst onDragStartEvent = useEvent( _onDragStart );\n\tconst onDragEnterEvent = useEvent( _onDragEnter );\n\tconst onDragLeaveEvent = useEvent( _onDragLeave );\n\tconst onDragEndEvent = useEvent( _onDragEnd );\n\tconst onDragOverEvent = useEvent( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( elem: HTMLElement ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If a custom dropZoneRef is passed, use that instead of the element.\n\t\t\t// This allows the dropzone to cover an expanded area, rather than\n\t\t\t// be restricted to the area of the ref returned by this hook.\n\t\t\tconst element = dropZoneElement ?? elem;\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(\n\t\t\t\ttargetToCheck: EventTarget | null\n\t\t\t): boolean {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\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\tlet elementToCheck: HTMLElement | null = 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( event: DragEvent ): void {\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 ( _onDragStart ) {\n\t\t\t\t\tonDragStartEvent( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( event: DragEvent ): void {\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 ( element.contains( event.relatedTarget as Node ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( _onDragEnter ) {\n\t\t\t\t\tonDragEnterEvent( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( event: DragEvent ): void {\n\t\t\t\tif ( ! event.defaultPrevented && _onDragOver ) {\n\t\t\t\t\tonDragOverEvent( event );\n\t\t\t\t}\n\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( event: DragEvent ): void {\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\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 ( _onDragLeave ) {\n\t\t\t\t\tonDragLeaveEvent( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( event: DragEvent ): void {\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 ( _onDrop ) {\n\t\t\t\t\tonDropEvent( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( event: Event ): void {\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 ( _onDragEnd ) {\n\t\t\t\t\tonDragEndEvent( event as MouseEvent );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.setAttribute( 'data-is-drop-zone', '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\telement.removeAttribute( 'data-is-drop-zone' );\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, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["useEvent", "useRefEffect"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __copyProps = (to, from, except, desc) => {
|
|
7
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
8
|
+
for (let key of __getOwnPropNames(from))
|
|
9
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
10
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
11
|
+
}
|
|
12
|
+
return to;
|
|
13
|
+
};
|
|
14
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
+
|
|
16
|
+
// packages/compose/src/hooks/use-drop-zone/types.ts
|
|
17
|
+
var types_exports = {};
|
|
18
|
+
module.exports = __toCommonJS(types_exports);
|
|
19
|
+
//# sourceMappingURL=types.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/hooks/use-drop-zone/types.ts"],
|
|
4
|
+
"sourcesContent": ["export interface UseDropZoneProps {\n\t/**\n\t * Optional element to be used as the drop zone.\n\t */\n\tdropZoneElement?: HTMLElement | null;\n\t/**\n\t * Whether or not to disable the drop zone.\n\t */\n\tisDisabled?: boolean;\n\t/**\n\t * Called when dragging has started.\n\t */\n\tonDragStart?: ( e: DragEvent ) => void;\n\t/**\n\t * Called when the zone is entered.\n\t */\n\tonDragEnter?: ( e: DragEvent ) => void;\n\t/**\n\t * Called when the zone is moved within.\n\t */\n\tonDragOver?: ( e: DragEvent ) => void;\n\t/**\n\t * Called when the zone is left.\n\t */\n\tonDragLeave?: ( e: DragEvent ) => void;\n\t/**\n\t * Called when dragging has ended.\n\t */\n\tonDragEnd?: ( e: MouseEvent ) => void;\n\t/**\n\t * Called when dropping in the zone.\n\t */\n\tonDrop?: ( e: DragEvent ) => void;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
17
|
};
|
|
18
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
19
|
|
|
20
|
-
// packages/compose/src/hooks/use-fixed-window-list/index.
|
|
20
|
+
// packages/compose/src/hooks/use-fixed-window-list/index.ts
|
|
21
21
|
var use_fixed_window_list_exports = {};
|
|
22
22
|
__export(use_fixed_window_list_exports, {
|
|
23
23
|
default: () => useFixedWindowList
|
|
@@ -31,14 +31,16 @@ var DEFAULT_INIT_WINDOW_SIZE = 30;
|
|
|
31
31
|
function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
|
|
32
32
|
const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
|
|
33
33
|
const useWindowing = options?.useWindowing ?? true;
|
|
34
|
-
const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)(
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
34
|
+
const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)(
|
|
35
|
+
{
|
|
36
|
+
visibleItems: initWindowSize,
|
|
37
|
+
start: 0,
|
|
38
|
+
end: initWindowSize,
|
|
39
|
+
itemInView: (index) => {
|
|
40
|
+
return index >= 0 && index <= initWindowSize;
|
|
41
|
+
}
|
|
40
42
|
}
|
|
41
|
-
|
|
43
|
+
);
|
|
42
44
|
(0, import_element.useLayoutEffect)(() => {
|
|
43
45
|
if (!useWindowing) {
|
|
44
46
|
return;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/hooks/use-fixed-window-list/index.
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAC1C,iBAAmC;AACnC,sBAA4C;AAK5C,sBAAyB;AAEzB,IAAM,2BAA2B;
|
|
3
|
+
"sources": ["../../../src/hooks/use-fixed-window-list/index.ts"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useState, useLayoutEffect } from '@wordpress/element';\nimport { getScrollContainer } from '@wordpress/dom';\nimport { PAGEUP, PAGEDOWN, HOME, END } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\nconst DEFAULT_INIT_WINDOW_SIZE = 30;\n\ninterface FixedWindowList {\n\t/** Items visible in the current viewport */\n\tvisibleItems: number;\n\t/** Start index of the window */\n\tstart: number;\n\t/** End index of the window */\n\tend: number;\n\t/** Returns true if item is in the window */\n\titemInView: ( index: number ) => boolean;\n}\n\ninterface FixedWindowListOptions {\n\t/** Renders windowOverscan number of items before and after the calculated visible window. */\n\twindowOverscan?: number;\n\t/** When false avoids calculating the window size */\n\tuseWindowing?: boolean;\n\t/** Initial window size to use on first render before we can calculate the window size. */\n\tinitWindowSize?: number;\n\t/** Used to recalculate the window size when the expanded state of a list changes. */\n\texpandedState?: any;\n}\n\n/**\n *\n * @param elementRef Used to find the closest scroll container that contains element.\n * @param itemHeight Fixed item height in pixels\n * @param totalItems Total items in list\n * @param [options] Options object\n * @return Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef: React.RefObject< HTMLElement >,\n\titemHeight: number,\n\ttotalItems: number,\n\toptions?: FixedWindowListOptions\n): [\n\tFixedWindowList,\n\tReact.Dispatch< React.SetStateAction< FixedWindowList > >,\n] {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState< FixedWindowList >(\n\t\t{\n\t\t\tvisibleItems: initWindowSize,\n\t\t\tstart: 0,\n\t\t\tend: initWindowSize,\n\t\t\titemInView: ( index: number ) => {\n\t\t\t\treturn index >= 0 && index <= initWindowSize;\n\t\t\t},\n\t\t}\n\t);\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\t/**\n\t\t * Measures and sets the window of items to render based on the scroll position\n\t\t *\n\t\t * @param {boolean} [initRender] Indicates if this is the initial render\n\t\t * @return {void}\n\t\t */\n\t\tconst measureWindow = ( initRender?: boolean ) => {\n\t\t\tif ( ! scrollContainer ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst visibleItems = Math.ceil(\n\t\t\t\tscrollContainer.clientHeight / itemHeight\n\t\t\t);\n\t\t\t// Aim to keep opening list view fast, afterward we can optimize for scrolling.\n\t\t\tconst windowOverscan = initRender\n\t\t\t\t? visibleItems\n\t\t\t\t: options?.windowOverscan ?? visibleItems;\n\t\t\tconst firstViewableIndex = Math.floor(\n\t\t\t\tscrollContainer.scrollTop / itemHeight\n\t\t\t);\n\t\t\tconst start = Math.max( 0, firstViewableIndex - windowOverscan );\n\t\t\tconst end = Math.min(\n\t\t\t\ttotalItems - 1,\n\t\t\t\tfirstViewableIndex + visibleItems + windowOverscan\n\t\t\t);\n\t\t\tsetFixedListWindow( ( lastWindow ) => {\n\t\t\t\tconst nextWindow = {\n\t\t\t\t\tvisibleItems,\n\t\t\t\t\tstart,\n\t\t\t\t\tend,\n\t\t\t\t\titemInView: ( index: number ) => {\n\t\t\t\t\t\treturn start <= index && index <= end;\n\t\t\t\t\t},\n\t\t\t\t};\n\t\t\t\tif (\n\t\t\t\t\tlastWindow.start !== nextWindow.start ||\n\t\t\t\t\tlastWindow.end !== nextWindow.end ||\n\t\t\t\t\tlastWindow.visibleItems !== nextWindow.visibleItems\n\t\t\t\t) {\n\t\t\t\t\treturn nextWindow;\n\t\t\t\t}\n\t\t\t\treturn lastWindow;\n\t\t\t} );\n\t\t};\n\n\t\tmeasureWindow( true );\n\t\tconst debounceMeasureList = debounce( () => {\n\t\t\tmeasureWindow();\n\t\t}, 16 );\n\t\tscrollContainer?.addEventListener( 'scroll', debounceMeasureList );\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'resize',\n\t\t\tdebounceMeasureList\n\t\t);\n\n\t\treturn () => {\n\t\t\tscrollContainer?.removeEventListener(\n\t\t\t\t'scroll',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'resize',\n\t\t\t\tdebounceMeasureList\n\t\t\t);\n\t\t};\n\t}, [\n\t\titemHeight,\n\t\telementRef,\n\t\ttotalItems,\n\t\toptions?.expandedState,\n\t\toptions?.windowOverscan,\n\t\tuseWindowing,\n\t] );\n\n\tuseLayoutEffect( () => {\n\t\tif ( ! useWindowing ) {\n\t\t\treturn;\n\t\t}\n\t\tconst scrollContainer = getScrollContainer( elementRef.current );\n\t\tconst handleKeyDown = ( event: KeyboardEvent ) => {\n\t\t\tswitch ( event.keyCode ) {\n\t\t\t\tcase HOME: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( { top: 0 } );\n\t\t\t\t}\n\t\t\t\tcase END: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop: totalItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEUP: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop -\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t\tcase PAGEDOWN: {\n\t\t\t\t\treturn scrollContainer?.scrollTo( {\n\t\t\t\t\t\ttop:\n\t\t\t\t\t\t\tscrollContainer.scrollTop +\n\t\t\t\t\t\t\tfixedListWindow.visibleItems * itemHeight,\n\t\t\t\t\t} );\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tscrollContainer?.ownerDocument?.defaultView?.addEventListener(\n\t\t\t'keydown',\n\t\t\thandleKeyDown\n\t\t);\n\t\treturn () => {\n\t\t\tscrollContainer?.ownerDocument?.defaultView?.removeEventListener(\n\t\t\t\t'keydown',\n\t\t\t\thandleKeyDown\n\t\t\t);\n\t\t};\n\t}, [\n\t\ttotalItems,\n\t\titemHeight,\n\t\telementRef,\n\t\tfixedListWindow.visibleItems,\n\t\tuseWindowing,\n\t\toptions?.expandedState,\n\t] );\n\n\treturn [ fixedListWindow, setFixedListWindow ];\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|