@wordpress/compose 8.1.1 → 8.2.0

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+## 8.2.0 (2026-06-24)
+
 ## 8.1.1 (2026-06-16)
 
 ## 8.1.0 (2026-06-10)

package/README.md

@@ -198,23 +198,23 @@ In Dialogs/modals, the tabbing must be constrained to the content of the wrapper
 
 _Usage_
 
-```js
+```ts
 import { useConstrainedTabbing } from '@wordpress/compose';
 
 const ConstrainedTabbingExample = () => {
-	const constrainedTabbingRef = useConstrainedTabbing();
-	return (
-		<div ref={ constrainedTabbingRef }>
-			<Button />
-			<Button />
-		</div>
-	);
-};
+    const constrainedTabbingRef = useConstrainedTabbing()
+    return (
+        <div ref={ constrainedTabbingRef }>
+            <Button />
+            <Button />
+        </div>
+    );
+}
 ```
 
 _Returns_
 
--   `React.RefCallback<Element>`: Element Ref.
+-   `React.RefCallback< Element >`: Element Ref.
 
 ### useCopyOnClick
 
@@ -256,12 +256,12 @@ _Related_
 _Parameters_
 
 -   _fn_ `TFunc`: The function to debounce.
--   _wait_ `[number]`: The number of milliseconds to delay.
--   _options_ `[import('../../utils/debounce').DebounceOptions]`: The options object.
+-   _wait_ `number`: The number of milliseconds to delay.
+-   _options_ `DebounceOptions`: The options object.
 
 _Returns_
 
--   `import('../../utils/debounce').DebouncedFunc<TFunc>`: Debounced function.
+-   `DebouncedFunc< TFunc >`: Debounced function.
 
 ### useDebouncedInput
 
@@ -374,27 +374,27 @@ Adds the unmount behavior of returning focus to the element which had it previou
 
 _Usage_
 
-```js
+```ts
 import { useFocusReturn } from '@wordpress/compose';
 
 const WithFocusReturn = () => {
-	const ref = useFocusReturn();
-	return (
-		<div ref={ ref }>
-			<Button />
-			<Button />
-		</div>
-	);
-};
+    const ref = useFocusReturn()
+    return (
+        <div ref={ ref }>
+            <Button />
+            <Button />
+        </div>
+    );
+}
 ```
 
 _Parameters_
 
--   _onFocusReturn_ `[() => void]`: Overrides the default return behavior.
+-   _onFocusReturn_ `() => void`: Overrides the default return behavior.
 
 _Returns_
 
--   `React.RefCallback<HTMLElement>`: Element Ref.
+-   `React.RefCallback< HTMLElement >`: Element Ref.
 
 ### useInstanceId
 
@@ -424,9 +424,13 @@ _Related_
 
 _Parameters_
 
--   _shortcuts_ `string[]|string`: Keyboard Shortcuts.
--   _callback_ `(e: Mousetrap.ExtendedKeyboardEvent, combo: string) => void`: Shortcut callback.
--   _options_ `WPKeyboardShortcutConfig`: Shortcut options.
+-   _shortcuts_ `string[] | string`: Keyboard Shortcuts.
+-   _callback_ `( e: ExtendedKeyboardEvent, combo: string ) => void`: Shortcut callback.
+-   _options_ `Partial< KeyboardShortcutConfig >`: Shortcut options.
+-   _options.bindGlobal_ `Partial< KeyboardShortcutConfig >[ 'bindGlobal' ]`:
+-   _options.eventName_ `Partial< KeyboardShortcutConfig >[ 'eventName' ]`:
+-   _options.isDisabled_ `Partial< KeyboardShortcutConfig >[ 'isDisabled' ]`:
+-   _options.target_ `Partial< KeyboardShortcutConfig >[ 'target' ]`:
 
 ### useMediaQuery
 
@@ -575,12 +579,12 @@ _Related_
 _Parameters_
 
 -   _fn_ `TFunc`: The function to throttle.
--   _wait_ `[number]`: The number of milliseconds to throttle invocations to.
--   _options_ `[import('../../utils/throttle').ThrottleOptions]`: The options object. See linked documentation for details.
+-   _wait_ `number`: The number of milliseconds to throttle invocations to.
+-   _options_ `ThrottleOptions`: The options object.
 
 _Returns_
 
--   `import('../../utils/debounce').DebouncedFunc<TFunc>`: Throttled function.
+-   `DebouncedFunc< TFunc >`: Throttled function.
 
 ### useViewportMatch
 
@@ -588,16 +592,16 @@ Returns true if the viewport matches the given query, or false otherwise.
 
 _Usage_
 
-```js
+```ts
 useViewportMatch( 'huge', '<' );
 useViewportMatch( 'medium' );
 ```
 
 _Parameters_
 
--   _breakpoint_ `WPBreakpoint`: Breakpoint size name.
--   _operator_ `[WPViewportOperator]`: Viewport operator.
--   _view_ `[Window|undefined]`: Window instance in which to perform viewport matching.
+-   _breakpoint_ `Breakpoint`: Breakpoint size name.
+-   _operator_ `ViewportOperator`: Viewport operator.
+-   _view_ `Window | undefined`: Window instance in which to perform viewport matching.
 
 _Returns_
 
@@ -605,12 +609,12 @@ _Returns_
 
 ### useWarnOnChange
 
-Hook that performs a shallow comparison between the preview 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.
+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.
 
 _Usage_
 
-```jsx
-function MyComponent( props ) {
+```tsx
+function MyComponent( props: Record< string, any > ) {
 	useWarnOnChange( props );
 
 	return 'Something';
@@ -619,7 +623,7 @@ function MyComponent( props ) {
 
 _Parameters_
 
--   _object_ `object`: Object which changes to compare.
+-   _object_ `Record< string, any > | any[]`: Object which changes to compare.
 -   _prefix_ `string`: Just a prefix to show when console logging.
 
 ### withGlobalEvents

package/build/hooks/use-constrained-tabbing/index.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-constrained-tabbing/index.js
+// packages/compose/src/hooks/use-constrained-tabbing/index.ts
 var use_constrained_tabbing_exports = {};
 __export(use_constrained_tabbing_exports, {
   default: () => use_constrained_tabbing_default
@@ -43,14 +43,8 @@ function useConstrainedTabbing() {
         return;
       }
       const action = shiftKey ? "findPrevious" : "findNext";
-      const nextElement = import_dom.focus.tabbable[action](
-        /** @type {HTMLElement} */
-        target
-      ) || null;
-      if (
-        /** @type {HTMLElement} */
-        target.contains(nextElement)
-      ) {
+      const nextElement = import_dom.focus.tabbable[action](target) || null;
+      if (target.contains(nextElement)) {
         event.preventDefault();
         nextElement?.focus();
         return;

package/build/hooks/use-constrained-tabbing/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-constrained-tabbing/index.js"],
-  "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 {React.RefCallback<Element>} Element Ref.\n *\n * @example\n * ```js\n * import { useConstrainedTabbing } from '@wordpress/compose';\n *\n * const ConstrainedTabbingExample = () => {\n *     const constrainedTabbingRef = useConstrainedTabbing()\n *     return (\n *         <div ref={ constrainedTabbingRef }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nfunction useConstrainedTabbing() {\n\treturn useRefEffect( ( /** @type {HTMLElement} */ node ) => {\n\t\tfunction onKeyDown( /** @type {KeyboardEvent} */ event ) {\n\t\t\tconst { key, shiftKey, target } = event;\n\n\t\t\tif ( key !== 'Tab' ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tconst action = shiftKey ? 'findPrevious' : 'findNext';\n\t\t\tconst nextElement =\n\t\t\t\tfocus.tabbable[ action ](\n\t\t\t\t\t/** @type {HTMLElement} */ ( target )\n\t\t\t\t) || null;\n\n\t\t\t// When the target element contains the element that is about to\n\t\t\t// receive focus, for example when the target is a tabbable\n\t\t\t// container, browsers may disagree on where to move focus next.\n\t\t\t// In this case we can't rely on native browsers behavior. We need\n\t\t\t// to manage focus instead.\n\t\t\t// See https://github.com/WordPress/gutenberg/issues/46041.\n\t\t\tif (\n\t\t\t\t/** @type {HTMLElement} */ ( target ).contains( nextElement )\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tnextElement?.focus();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is inside the\n\t\t\t// area, rely on native browsers behavior and let tabbing follow\n\t\t\t// the native tab sequence.\n\t\t\tif ( node.contains( nextElement ) ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If the element that is about to receive focus is outside the\n\t\t\t// area, move focus to a div and insert it at the start or end of\n\t\t\t// the area, depending on the direction. Without preventing default\n\t\t\t// behaviour, the browser will then move focus to the next element.\n\t\t\tconst domAction = shiftKey ? 'append' : 'prepend';\n\t\t\tconst { ownerDocument } = node;\n\t\t\tconst trap = ownerDocument.createElement( 'div' );\n\n\t\t\ttrap.tabIndex = -1;\n\t\t\tnode[ domAction ]( trap );\n\n\t\t\t// Remove itself when the trap loses focus.\n\t\t\ttrap.addEventListener( 'blur', () => node.removeChild( trap ) );\n\n\t\t\ttrap.focus();\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', onKeyDown );\n\t\treturn () => {\n\t\t\tnode.removeEventListener( 'keydown', onKeyDown );\n\t\t};\n\t}, [] );\n}\n\nexport default useConstrainedTabbing;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAAsB;AAKtB,4BAAyB;AAuBzB,SAAS,wBAAwB;AAChC,aAAO,sBAAAA,SAAc,CAA6B,SAAU;AAC3D,aAAS,UAAwC,OAAQ;AACxD,YAAM,EAAE,KAAK,UAAU,OAAO,IAAI;AAElC,UAAK,QAAQ,OAAQ;AACpB;AAAA,MACD;AAEA,YAAM,SAAS,WAAW,iBAAiB;AAC3C,YAAM,cACL,iBAAM,SAAU,MAAO;AAAA;AAAA,QACO;AAAA,MAC9B,KAAK;AAQN;AAAA;AAAA,QAC8B,OAAS,SAAU,WAAY;AAAA,QAC3D;AACD,cAAM,eAAe;AACrB,qBAAa,MAAM;AACnB;AAAA,MACD;AAKA,UAAK,KAAK,SAAU,WAAY,GAAI;AACnC;AAAA,MACD;AAMA,YAAM,YAAY,WAAW,WAAW;AACxC,YAAM,EAAE,cAAc,IAAI;AAC1B,YAAM,OAAO,cAAc,cAAe,KAAM;AAEhD,WAAK,WAAW;AAChB,WAAM,SAAU,EAAG,IAAK;AAGxB,WAAK,iBAAkB,QAAQ,MAAM,KAAK,YAAa,IAAK,CAAE;AAE9D,WAAK,MAAM;AAAA,IACZ;AAEA,SAAK,iBAAkB,WAAW,SAAU;AAC5C,WAAO,MAAM;AACZ,WAAK,oBAAqB,WAAW,SAAU;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;AAEA,IAAO,kCAAQ;",
+  "sources": ["../../../src/hooks/use-constrained-tabbing/index.ts"],
+  "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"],
+  "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;",
   "names": ["useRefEffect"]
 }

package/build/hooks/use-debounce/index.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-debounce/index.js
+// packages/compose/src/hooks/use-debounce/index.ts
 var use_debounce_exports = {};
 __export(use_debounce_exports, {
   default: () => useDebounce

package/build/hooks/use-debounce/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-debounce/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { debounce } from '../../utils/debounce';\n\n/**\n * Debounces a function similar to Lodash's `debounce`. A new debounced function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to debounce, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#debounce\n *\n * @template {(...args: any[]) => void} TFunc\n *\n * @param {TFunc}                                          fn        The function to debounce.\n * @param {number}                                         [wait]    The number of milliseconds to delay.\n * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.\n */\nexport default function useDebounce( fn, wait, options ) {\n\tconst debounced = useMemoOne(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options?.leading, options?.trailing, options?.maxWait ]\n\t);\n\tuseEffect( () => () => debounced.cancel(), [ debounced ] );\n\treturn debounced;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,0BAA2B;AAK3B,qBAA0B;AAK1B,sBAAyB;AAiBV,SAAR,YAA8B,IAAI,MAAM,SAAU;AACxD,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,SAAS,SAAS,SAAS,UAAU,SAAS,OAAQ;AAAA,EACnE;AACA,gCAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
+  "sources": ["../../../src/hooks/use-debounce/index.ts"],
+  "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"],
+  "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;",
   "names": []
 }

package/build/hooks/use-disabled/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-disabled/index.ts"],
-  "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: Function[] = [];\n\t\t\tconst disable = () => {\n\t\t\t\tnode.childNodes.forEach( ( child ) => {\n\t\t\t\t\tif ( ! ( child instanceof defaultView.HTMLElement ) ) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif ( ! child.getAttribute( 'inert' ) ) {\n\t\t\t\t\t\tchild.setAttribute( 'inert', 'true' );\n\t\t\t\t\t\tupdates.push( () => {\n\t\t\t\t\t\t\tchild.removeAttribute( 'inert' );\n\t\t\t\t\t\t} );\n\t\t\t\t\t}\n\t\t\t\t} );\n\t\t\t};\n\n\t\t\t// Debounce re-disable since disabling process itself will incur\n\t\t\t// additional mutations which should be ignored.\n\t\t\tconst debouncedDisable = debounce( disable, 0, {\n\t\t\t\tleading: true,\n\t\t\t} );\n\t\t\tdisable();\n\n\t\t\t/** @type {MutationObserver | undefined} */\n\t\t\tconst observer = new window.MutationObserver( debouncedDisable );\n\t\t\tobserver.observe( node, {\n\t\t\t\tchildList: true,\n\t\t\t} );\n\n\t\t\treturn () => {\n\t\t\t\tif ( observer ) {\n\t\t\t\t\tobserver.disconnect();\n\t\t\t\t}\n\t\t\t\tdebouncedDisable.cancel();\n\t\t\t\tupdates.forEach( ( update ) => update() );\n\t\t\t};\n\t\t},\n\t\t[ isDisabledProp ]\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,sBAAyB;AACzB,4BAAyB;AA4BV,SAAR,YAA8B;AAAA,EACpC,YAAY,iBAAiB;AAC9B,IAAI,CAAC,GAAI;AACR,aAAO,sBAAAA;AAAA,IACN,CAAE,SAAU;AACX,UAAK,gBAAiB;AACrB;AAAA,MACD;AAEA,YAAM,cAAc,MAAM,eAAe;AACzC,UAAK,CAAE,aAAc;AACpB;AAAA,MACD;AAGA,YAAM,UAAsB,CAAC;AAC7B,YAAM,UAAU,MAAM;AACrB,aAAK,WAAW,QAAS,CAAE,UAAW;AACrC,cAAK,EAAI,iBAAiB,YAAY,cAAgB;AACrD;AAAA,UACD;AACA,cAAK,CAAE,MAAM,aAAc,OAAQ,GAAI;AACtC,kBAAM,aAAc,SAAS,MAAO;AACpC,oBAAQ,KAAM,MAAM;AACnB,oBAAM,gBAAiB,OAAQ;AAAA,YAChC,CAAE;AAAA,UACH;AAAA,QACD,CAAE;AAAA,MACH;AAIA,YAAM,uBAAmB,0BAAU,SAAS,GAAG;AAAA,QAC9C,SAAS;AAAA,MACV,CAAE;AACF,cAAQ;AAGR,YAAM,WAAW,IAAI,OAAO,iBAAkB,gBAAiB;AAC/D,eAAS,QAAS,MAAM;AAAA,QACvB,WAAW;AAAA,MACZ,CAAE;AAEF,aAAO,MAAM;AACZ,YAAK,UAAW;AACf,mBAAS,WAAW;AAAA,QACrB;AACA,yBAAiB,OAAO;AACxB,gBAAQ,QAAS,CAAE,WAAY,OAAO,CAAE;AAAA,MACzC;AAAA,IACD;AAAA,IACA,CAAE,cAAe;AAAA,EAClB;AACD;",
+  "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"],
+  "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;",
   "names": ["useRefEffect"]
 }

package/build/hooks/use-dragging/index.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-dragging/index.js
+// packages/compose/src/hooks/use-dragging/index.ts
 var use_dragging_exports = {};
 __export(use_dragging_exports, {
   default: () => useDragging
@@ -35,7 +35,11 @@ __export(use_dragging_exports, {
 module.exports = __toCommonJS(use_dragging_exports);
 var import_element = require("@wordpress/element");
 var import_use_isomorphic_layout_effect = __toESM(require("../use-isomorphic-layout-effect/index.cjs"));
-function useDragging({ onDragStart, onDragMove, onDragEnd }) {
+function useDragging({
+  onDragStart,
+  onDragMove,
+  onDragEnd
+}) {
   const [isDragging, setIsDragging] = (0, import_element.useState)(false);
   const eventsRef = (0, import_element.useRef)({
     onDragStart,
@@ -47,26 +51,27 @@ function useDragging({ onDragStart, onDragMove, onDragEnd }) {
     eventsRef.current.onDragMove = onDragMove;
     eventsRef.current.onDragEnd = onDragEnd;
   }, [onDragStart, onDragMove, onDragEnd]);
-  const onMouseMove = (0, import_element.useCallback)(
-    (event) => eventsRef.current.onDragMove && eventsRef.current.onDragMove(event),
-    []
-  );
-  const endDrag = (0, import_element.useCallback)((event) => {
-    if (eventsRef.current.onDragEnd) {
-      eventsRef.current.onDragEnd(event);
-    }
-    document.removeEventListener("mousemove", onMouseMove);
-    document.removeEventListener("mouseup", endDrag);
-    setIsDragging(false);
-  }, []);
-  const startDrag = (0, import_element.useCallback)((event) => {
-    if (eventsRef.current.onDragStart) {
-      eventsRef.current.onDragStart(event);
-    }
-    document.addEventListener("mousemove", onMouseMove);
-    document.addEventListener("mouseup", endDrag);
-    setIsDragging(true);
+  const onMouseMove = (0, import_element.useCallback)((event) => {
+    eventsRef.current.onDragMove?.(event);
   }, []);
+  const endDrag = (0, import_element.useCallback)(
+    function endDrag2(event) {
+      eventsRef.current.onDragEnd?.(event);
+      document.removeEventListener("mousemove", onMouseMove);
+      document.removeEventListener("mouseup", endDrag2);
+      setIsDragging(false);
+    },
+    [onMouseMove]
+  );
+  const startDrag = (0, import_element.useCallback)(
+    (event) => {
+      eventsRef.current.onDragStart?.(event);
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", endDrag);
+      setIsDragging(true);
+    },
+    [onMouseMove, endDrag]
+  );
   (0, import_element.useEffect)(() => {
     return () => {
       if (isDragging) {
@@ -74,7 +79,7 @@ function useDragging({ onDragStart, onDragMove, onDragEnd }) {
         document.removeEventListener("mouseup", endDrag);
       }
     };
-  }, [isDragging]);
+  }, [isDragging, onMouseMove, endDrag]);
   return {
     startDrag,
     endDrag,

package/build/hooks/use-dragging/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-dragging/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef, useState } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useIsomorphicLayoutEffect from '../use-isomorphic-layout-effect';\n\n// Event handlers that are triggered from `document` listeners accept a MouseEvent,\n// while those triggered from React listeners accept a React.MouseEvent.\n/**\n * @param {Object}                        props\n * @param {(e: React.MouseEvent) => void} props.onDragStart\n * @param {(e: MouseEvent) => void}       props.onDragMove\n * @param {(e?: MouseEvent) => void}      props.onDragEnd\n */\nexport default function useDragging( { onDragStart, onDragMove, onDragEnd } ) {\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\n\tconst eventsRef = useRef( {\n\t\tonDragStart,\n\t\tonDragMove,\n\t\tonDragEnd,\n\t} );\n\tuseIsomorphicLayoutEffect( () => {\n\t\teventsRef.current.onDragStart = onDragStart;\n\t\teventsRef.current.onDragMove = onDragMove;\n\t\teventsRef.current.onDragEnd = onDragEnd;\n\t}, [ onDragStart, onDragMove, onDragEnd ] );\n\n\t/** @type {(e: MouseEvent) => void} */\n\tconst onMouseMove = useCallback(\n\t\t( event ) =>\n\t\t\teventsRef.current.onDragMove &&\n\t\t\teventsRef.current.onDragMove( event ),\n\t\t[]\n\t);\n\t/** @type {(e?: MouseEvent) => void} */\n\tconst endDrag = useCallback( ( event ) => {\n\t\tif ( eventsRef.current.onDragEnd ) {\n\t\t\teventsRef.current.onDragEnd( event );\n\t\t}\n\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( false );\n\t}, [] );\n\t/** @type {(e: React.MouseEvent) => void} */\n\tconst startDrag = useCallback( ( event ) => {\n\t\tif ( eventsRef.current.onDragStart ) {\n\t\t\teventsRef.current.onDragStart( event );\n\t\t}\n\t\tdocument.addEventListener( 'mousemove', onMouseMove );\n\t\tdocument.addEventListener( 'mouseup', endDrag );\n\t\tsetIsDragging( true );\n\t}, [] );\n\n\t// Remove the global events when unmounting if needed.\n\tuseEffect( () => {\n\t\treturn () => {\n\t\t\tif ( isDragging ) {\n\t\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\t\tdocument.removeEventListener( 'mouseup', endDrag );\n\t\t\t}\n\t\t};\n\t}, [ isDragging ] );\n\n\treturn {\n\t\tstartDrag,\n\t\tendDrag,\n\t\tisDragging,\n\t};\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAyD;AAKzD,0CAAsC;AAUvB,SAAR,YAA8B,EAAE,aAAa,YAAY,UAAU,GAAI;AAC7E,QAAM,CAAE,YAAY,aAAc,QAAI,yBAAU,KAAM;AAEtD,QAAM,gBAAY,uBAAQ;AAAA,IACzB;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,0CAAAA,SAA2B,MAAM;AAChC,cAAU,QAAQ,cAAc;AAChC,cAAU,QAAQ,aAAa;AAC/B,cAAU,QAAQ,YAAY;AAAA,EAC/B,GAAG,CAAE,aAAa,YAAY,SAAU,CAAE;AAG1C,QAAM,kBAAc;AAAA,IACnB,CAAE,UACD,UAAU,QAAQ,cAClB,UAAU,QAAQ,WAAY,KAAM;AAAA,IACrC,CAAC;AAAA,EACF;AAEA,QAAM,cAAU,4BAAa,CAAE,UAAW;AACzC,QAAK,UAAU,QAAQ,WAAY;AAClC,gBAAU,QAAQ,UAAW,KAAM;AAAA,IACpC;AACA,aAAS,oBAAqB,aAAa,WAAY;AACvD,aAAS,oBAAqB,WAAW,OAAQ;AACjD,kBAAe,KAAM;AAAA,EACtB,GAAG,CAAC,CAAE;AAEN,QAAM,gBAAY,4BAAa,CAAE,UAAW;AAC3C,QAAK,UAAU,QAAQ,aAAc;AACpC,gBAAU,QAAQ,YAAa,KAAM;AAAA,IACtC;AACA,aAAS,iBAAkB,aAAa,WAAY;AACpD,aAAS,iBAAkB,WAAW,OAAQ;AAC9C,kBAAe,IAAK;AAAA,EACrB,GAAG,CAAC,CAAE;AAGN,gCAAW,MAAM;AAChB,WAAO,MAAM;AACZ,UAAK,YAAa;AACjB,iBAAS,oBAAqB,aAAa,WAAY;AACvD,iBAAS,oBAAqB,WAAW,OAAQ;AAAA,MAClD;AAAA,IACD;AAAA,EACD,GAAG,CAAE,UAAW,CAAE;AAElB,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;",
-  "names": ["useIsomorphicLayoutEffect"]
+  "sources": ["../../../src/hooks/use-dragging/index.ts"],
+  "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"],
+  "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;",
+  "names": ["useIsomorphicLayoutEffect", "endDrag"]
 }

package/build/hooks/use-dragging/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/compose/src/hooks/use-dragging/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/hooks/use-dragging/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-dragging/types.ts"],
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/hooks/use-drop-zone/index.cjs

@@ -27,7 +27,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-drop-zone/index.js
+// packages/compose/src/hooks/use-drop-zone/index.ts
 var use_drop_zone_exports = {};
 __export(use_drop_zone_exports, {
   default: () => useDropZone
@@ -85,10 +85,7 @@ function useDropZone({
       }
       function onDragEnter(event) {
         event.preventDefault();
-        if (element.contains(
-          /** @type {Node} */
-          event.relatedTarget
-        )) {
+        if (element.contains(event.relatedTarget)) {
           return;
         }
         if (_onDragEnter) {

package/build/hooks/use-drop-zone/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-drop-zone/index.js"],
-  "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 {Object}                  props                   Named parameters.\n * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.\n * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.\n * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.\n * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.\n * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.\n * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.\n * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.\n *\n * @return {React.RefCallback<HTMLElement>} 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} ) {\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 ) => {\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( targetToCheck ) {\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\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( _onDragStart ) {\n\t\t\t\t\tonDragStartEvent( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( _onDragEnter ) {\n\t\t\t\t\tonDragEnterEvent( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && _onDragOver ) {\n\t\t\t\t\tonDragOverEvent( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\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( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( _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( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( _onDragEnd ) {\n\t\t\t\t\tonDragEndEvent( event );\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"],
-  "mappings": "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",
+  "sources": ["../../../src/hooks/use-drop-zone/index.ts"],
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,4BAAyB;AACzB,uBAAqB;AASN,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,aAAa;AAAA,EACb,aAAa;AAAA,EACb,WAAW;AAAA,EACX,YAAY;AACb,GAAwD;AACvD,QAAM,kBAAc,iBAAAA,SAAU,OAAQ;AACtC,QAAM,uBAAmB,iBAAAA,SAAU,YAAa;AAChD,QAAM,uBAAmB,iBAAAA,SAAU,YAAa;AAChD,QAAM,uBAAmB,iBAAAA,SAAU,YAAa;AAChD,QAAM,qBAAiB,iBAAAA,SAAU,UAAW;AAC5C,QAAM,sBAAkB,iBAAAA,SAAU,WAAY;AAE9C,aAAO,sBAAAC;AAAA,IACN,CAAE,SAAuB;AACxB,UAAK,YAAa;AACjB;AAAA,MACD;AAKA,YAAM,UAAU,mBAAmB;AAEnC,UAAI,aAAa;AAEjB,YAAM,EAAE,cAAc,IAAI;AAS1B,eAAS,gBACR,eACU;AACV,cAAM,EAAE,YAAY,IAAI;AAExB,YACC,CAAE,iBACF,CAAE,eACF,EAAI,yBAAyB,YAAY,gBACzC,CAAE,QAAQ,SAAU,aAAc,GACjC;AACD,iBAAO;AAAA,QACR;AAEA,YAAI,iBAAqC;AAEzC,WAAG;AACF,cAAK,eAAe,QAAQ,YAAa;AACxC,mBAAO,mBAAmB;AAAA,UAC3B;AAAA,QACD,SAAY,iBAAiB,eAAe;AAE5C,eAAO;AAAA,MACR;AAEA,eAAS,eAAgB,OAAyB;AACjD,YAAK,YAAa;AACjB;AAAA,QACD;AAEA,qBAAa;AAMb,sBAAc,iBAAkB,WAAW,YAAa;AACxD,sBAAc,iBAAkB,aAAa,YAAa;AAE1D,YAAK,cAAe;AACnB,2BAAkB,KAAM;AAAA,QACzB;AAAA,MACD;AAEA,eAAS,YAAa,OAAyB;AAC9C,cAAM,eAAe;AAMrB,YAAK,QAAQ,SAAU,MAAM,aAAsB,GAAI;AACtD;AAAA,QACD;AAEA,YAAK,cAAe;AACnB,2BAAkB,KAAM;AAAA,QACzB;AAAA,MACD;AAEA,eAAS,WAAY,OAAyB;AAC7C,YAAK,CAAE,MAAM,oBAAoB,aAAc;AAC9C,0BAAiB,KAAM;AAAA,QACxB;AAEA,cAAM,eAAe;AAAA,MACtB;AAEA,eAAS,YAAa,OAAyB;AAS9C,YAAK,gBAAiB,MAAM,aAAc,GAAI;AAC7C;AAAA,QACD;AAEA,YAAK,cAAe;AACnB,2BAAkB,KAAM;AAAA,QACzB;AAAA,MACD;AAEA,eAAS,OAAQ,OAAyB;AAEzC,YAAK,MAAM,kBAAmB;AAC7B;AAAA,QACD;AAIA,cAAM,eAAe;AAMrB,cAAM,gBAAgB,MAAM,aAAa,MAAM;AAE/C,YAAK,SAAU;AACd,sBAAa,KAAM;AAAA,QACpB;AAEA,qBAAc,KAAM;AAAA,MACrB;AAEA,eAAS,aAAc,OAAqB;AAC3C,YAAK,CAAE,YAAa;AACnB;AAAA,QACD;AAEA,qBAAa;AAEb,sBAAc,oBAAqB,WAAW,YAAa;AAC3D,sBAAc,oBAAqB,aAAa,YAAa;AAE7D,YAAK,YAAa;AACjB,yBAAgB,KAAoB;AAAA,QACrC;AAAA,MACD;AAEA,cAAQ,aAAc,qBAAqB,MAAO;AAClD,cAAQ,iBAAkB,QAAQ,MAAO;AACzC,cAAQ,iBAAkB,aAAa,WAAY;AACnD,cAAQ,iBAAkB,YAAY,UAAW;AACjD,cAAQ,iBAAkB,aAAa,WAAY;AAGnD,oBAAc,iBAAkB,aAAa,cAAe;AAE5D,aAAO,MAAM;AACZ,gBAAQ,gBAAiB,mBAAoB;AAC7C,gBAAQ,oBAAqB,QAAQ,MAAO;AAC5C,gBAAQ,oBAAqB,aAAa,WAAY;AACtD,gBAAQ,oBAAqB,YAAY,UAAW;AACpD,gBAAQ,oBAAqB,aAAa,WAAY;AACtD,sBAAc,oBAAqB,WAAW,YAAa;AAC3D,sBAAc,oBAAqB,aAAa,YAAa;AAC7D,sBAAc;AAAA,UACb;AAAA,UACA;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAAA,IACA,CAAE,YAAY,eAAgB;AAAA;AAAA,EAC/B;AACD;",
   "names": ["useEvent", "useRefEffect"]
 }

package/build/hooks/use-drop-zone/types.cjs

@@ -0,0 +1,19 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// packages/compose/src/hooks/use-drop-zone/types.ts
+var types_exports = {};
+module.exports = __toCommonJS(types_exports);
+//# sourceMappingURL=types.cjs.map

package/build/hooks/use-drop-zone/types.cjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/hooks/use-drop-zone/types.ts"],
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;AAAA;AAAA;",
+  "names": []
+}

package/build/hooks/use-fixed-window-list/index.cjs

@@ -17,7 +17,7 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-fixed-window-list/index.js
+// packages/compose/src/hooks/use-fixed-window-list/index.ts
 var use_fixed_window_list_exports = {};
 __export(use_fixed_window_list_exports, {
   default: () => useFixedWindowList
@@ -31,14 +31,16 @@ var DEFAULT_INIT_WINDOW_SIZE = 30;
 function useFixedWindowList(elementRef, itemHeight, totalItems, options) {
   const initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;
   const useWindowing = options?.useWindowing ?? true;
-  const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)({
-    visibleItems: initWindowSize,
-    start: 0,
-    end: initWindowSize,
-    itemInView: (index) => {
-      return index >= 0 && index <= initWindowSize;
+  const [fixedListWindow, setFixedListWindow] = (0, import_element.useState)(
+    {
+      visibleItems: initWindowSize,
+      start: 0,
+      end: initWindowSize,
+      itemInView: (index) => {
+        return index >= 0 && index <= initWindowSize;
+      }
     }
-  });
+  );
   (0, import_element.useLayoutEffect)(() => {
     if (!useWindowing) {
       return;

package/build/hooks/use-fixed-window-list/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-fixed-window-list/index.js"],
-  "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\n/**\n * @typedef {Object} WPFixedWindowList\n *\n * @property {number}                  visibleItems Items visible in the current viewport\n * @property {number}                  start        Start index of the window\n * @property {number}                  end          End index of the window\n * @property {(index:number)=>boolean} itemInView   Returns true if item is in the window\n */\n\n/**\n * @typedef {Object} WPFixedWindowListOptions\n *\n * @property {number}  [windowOverscan] Renders windowOverscan number of items before and after the calculated visible window.\n * @property {boolean} [useWindowing]   When false avoids calculating the window size\n * @property {number}  [initWindowSize] Initial window size to use on first render before we can calculate the window size.\n * @property {any}     [expandedState]  Used to recalculate the window size when the expanded state of a list changes.\n */\n\n/**\n *\n * @param {React.RefObject<HTMLElement>} elementRef Used to find the closest scroll container that contains element.\n * @param { number }                     itemHeight Fixed item height in pixels\n * @param { number }                     totalItems Total items in list\n * @param { WPFixedWindowListOptions }   [options]  Options object\n * @return {[ WPFixedWindowList, setFixedListWindow:(nextWindow:WPFixedWindowList)=>void]} Array with the fixed window list and setter\n */\nexport default function useFixedWindowList(\n\telementRef,\n\titemHeight,\n\ttotalItems,\n\toptions\n) {\n\tconst initWindowSize = options?.initWindowSize ?? DEFAULT_INIT_WINDOW_SIZE;\n\tconst useWindowing = options?.useWindowing ?? true;\n\n\tconst [ fixedListWindow, setFixedListWindow ] = useState( {\n\t\tvisibleItems: initWindowSize,\n\t\tstart: 0,\n\t\tend: initWindowSize,\n\t\titemInView: ( /** @type {number} */ index ) => {\n\t\t\treturn index >= 0 && index <= initWindowSize;\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 ) => {\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: ( /** @type {number} */ index ) => {\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 = ( /** @type {KeyboardEvent} */ event ) => {\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"],
-  "mappings": "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",
+  "sources": ["../../../src/hooks/use-fixed-window-list/index.ts"],
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAC1C,iBAAmC;AACnC,sBAA4C;AAK5C,sBAAyB;AAEzB,IAAM,2BAA2B;AAgClB,SAAR,mBACN,YACA,YACA,YACA,SAIC;AACD,QAAM,iBAAiB,SAAS,kBAAkB;AAClD,QAAM,eAAe,SAAS,gBAAgB;AAE9C,QAAM,CAAE,iBAAiB,kBAAmB,QAAI;AAAA,IAC/C;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,KAAK;AAAA,MACL,YAAY,CAAE,UAAmB;AAChC,eAAO,SAAS,KAAK,SAAS;AAAA,MAC/B;AAAA,IACD;AAAA,EACD;AAEA,sCAAiB,MAAM;AACtB,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AACA,UAAM,sBAAkB,+BAAoB,WAAW,OAAQ;AAO/D,UAAM,gBAAgB,CAAE,eAA0B;AACjD,UAAK,CAAE,iBAAkB;AACxB;AAAA,MACD;AACA,YAAM,eAAe,KAAK;AAAA,QACzB,gBAAgB,eAAe;AAAA,MAChC;AAEA,YAAM,iBAAiB,aACpB,eACA,SAAS,kBAAkB;AAC9B,YAAM,qBAAqB,KAAK;AAAA,QAC/B,gBAAgB,YAAY;AAAA,MAC7B;AACA,YAAM,QAAQ,KAAK,IAAK,GAAG,qBAAqB,cAAe;AAC/D,YAAM,MAAM,KAAK;AAAA,QAChB,aAAa;AAAA,QACb,qBAAqB,eAAe;AAAA,MACrC;AACA,yBAAoB,CAAE,eAAgB;AACrC,cAAM,aAAa;AAAA,UAClB;AAAA,UACA;AAAA,UACA;AAAA,UACA,YAAY,CAAE,UAAmB;AAChC,mBAAO,SAAS,SAAS,SAAS;AAAA,UACnC;AAAA,QACD;AACA,YACC,WAAW,UAAU,WAAW,SAChC,WAAW,QAAQ,WAAW,OAC9B,WAAW,iBAAiB,WAAW,cACtC;AACD,iBAAO;AAAA,QACR;AACA,eAAO;AAAA,MACR,CAAE;AAAA,IACH;AAEA,kBAAe,IAAK;AACpB,UAAM,0BAAsB,0BAAU,MAAM;AAC3C,oBAAc;AAAA,IACf,GAAG,EAAG;AACN,qBAAiB,iBAAkB,UAAU,mBAAoB;AACjE,qBAAiB,eAAe,aAAa;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,qBAAiB,eAAe,aAAa;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AAEA,WAAO,MAAM;AACZ,uBAAiB;AAAA,QAChB;AAAA,QACA;AAAA,MACD;AACA,uBAAiB,eAAe,aAAa;AAAA,QAC5C;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,SAAS;AAAA,IACT;AAAA,EACD,CAAE;AAEF,sCAAiB,MAAM;AACtB,QAAK,CAAE,cAAe;AACrB;AAAA,IACD;AACA,UAAM,sBAAkB,+BAAoB,WAAW,OAAQ;AAC/D,UAAM,gBAAgB,CAAE,UAA0B;AACjD,cAAS,MAAM,SAAU;AAAA,QACxB,KAAK,sBAAM;AACV,iBAAO,iBAAiB,SAAU,EAAE,KAAK,EAAE,CAAE;AAAA,QAC9C;AAAA,QACA,KAAK,qBAAK;AACT,iBAAO,iBAAiB,SAAU;AAAA,YACjC,KAAK,aAAa;AAAA,UACnB,CAAE;AAAA,QACH;AAAA,QACA,KAAK,wBAAQ;AACZ,iBAAO,iBAAiB,SAAU;AAAA,YACjC,KACC,gBAAgB,YAChB,gBAAgB,eAAe;AAAA,UACjC,CAAE;AAAA,QACH;AAAA,QACA,KAAK,0BAAU;AACd,iBAAO,iBAAiB,SAAU;AAAA,YACjC,KACC,gBAAgB,YAChB,gBAAgB,eAAe;AAAA,UACjC,CAAE;AAAA,QACH;AAAA,MACD;AAAA,IACD;AACA,qBAAiB,eAAe,aAAa;AAAA,MAC5C;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM;AACZ,uBAAiB,eAAe,aAAa;AAAA,QAC5C;AAAA,QACA;AAAA,MACD;AAAA,IACD;AAAA,EACD,GAAG;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,SAAS;AAAA,EACV,CAAE;AAEF,SAAO,CAAE,iBAAiB,kBAAmB;AAC9C;",
   "names": []
 }