@wordpress/compose 8.8.2-next.v.202609171837.0 → 8.10.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.
Files changed (49) hide show
  1. package/CHANGELOG.md +11 -1
  2. package/README.md +1 -1
  3. package/build/hooks/use-copy-on-click/index.cjs.map +1 -1
  4. package/build/hooks/use-debounce/index.cjs +3 -2
  5. package/build/hooks/use-debounce/index.cjs.map +2 -2
  6. package/build/hooks/use-disabled/index.cjs +1 -1
  7. package/build/hooks/use-disabled/index.cjs.map +1 -1
  8. package/build/hooks/use-dragging/index.cjs +2 -2
  9. package/build/hooks/use-dragging/index.cjs.map +3 -3
  10. package/build/hooks/use-keyboard-shortcut/index.cjs.map +1 -1
  11. package/build/hooks/use-merge-refs/index.cjs.map +2 -2
  12. package/build/hooks/use-resize-observer/use-resize-observer.cjs.map +2 -2
  13. package/build/hooks/use-throttle/index.cjs +1 -2
  14. package/build/hooks/use-throttle/index.cjs.map +2 -2
  15. package/build-module/hooks/use-copy-on-click/index.mjs.map +1 -1
  16. package/build-module/hooks/use-debounce/index.mjs +4 -3
  17. package/build-module/hooks/use-debounce/index.mjs.map +2 -2
  18. package/build-module/hooks/use-disabled/index.mjs +1 -1
  19. package/build-module/hooks/use-disabled/index.mjs.map +1 -1
  20. package/build-module/hooks/use-dragging/index.mjs +2 -2
  21. package/build-module/hooks/use-dragging/index.mjs.map +3 -3
  22. package/build-module/hooks/use-keyboard-shortcut/index.mjs.map +1 -1
  23. package/build-module/hooks/use-merge-refs/index.mjs.map +2 -2
  24. package/build-module/hooks/use-resize-observer/use-resize-observer.mjs.map +2 -2
  25. package/build-module/hooks/use-throttle/index.mjs +2 -3
  26. package/build-module/hooks/use-throttle/index.mjs.map +2 -2
  27. package/build-types/higher-order/with-safe-timeout/index.d.ts +1 -3
  28. package/build-types/higher-order/with-safe-timeout/index.d.ts.map +1 -1
  29. package/build-types/hooks/use-copy-on-click/index.d.ts +1 -1
  30. package/build-types/hooks/use-copy-on-click/index.d.ts.map +1 -1
  31. package/build-types/hooks/use-debounce/index.d.ts.map +1 -1
  32. package/build-types/hooks/use-keyboard-shortcut/index.d.ts +1 -1
  33. package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
  34. package/build-types/hooks/use-merge-refs/index.d.ts.map +1 -1
  35. package/build-types/hooks/use-throttle/index.d.ts.map +1 -1
  36. package/package.json +22 -18
  37. package/src/higher-order/pure/test/index.jsdom.test.jsx +5 -11
  38. package/src/higher-order/with-global-events/test/index.jsdom.test.jsx +5 -0
  39. package/src/hooks/use-copy-on-click/index.ts +1 -1
  40. package/src/hooks/use-copy-on-click/test/index.jsdom.test.tsx +1 -1
  41. package/src/hooks/use-copy-to-clipboard/test/index.jsdom.test.tsx +2 -2
  42. package/src/hooks/use-debounce/index.ts +4 -3
  43. package/src/hooks/use-disabled/index.ts +1 -1
  44. package/src/hooks/use-disabled/test/index.jsdom.test.jsx +4 -4
  45. package/src/hooks/use-dragging/index.ts +2 -2
  46. package/src/hooks/use-keyboard-shortcut/index.ts +1 -1
  47. package/src/hooks/use-merge-refs/index.ts +2 -2
  48. package/src/hooks/use-resize-observer/use-resize-observer.ts +1 -1
  49. package/src/hooks/use-throttle/index.ts +2 -3
package/CHANGELOG.md CHANGED
@@ -2,7 +2,17 @@
2
2
 
3
3
  ## Unreleased
4
4
 
5
- ## 8.8.1-next.0 (2026-09-17)
5
+ ## 8.10.0 (2026-10-07)
6
+
7
+ ### Bug Fixes
8
+
9
+ - Declare `react-dom` and `@types/react-dom` as peer dependencies, forwarding the peers of `@wordpress/element`, so strict package managers such as Yarn PnP can resolve them ([#83765](https://github.com/WordPress/gutenberg/pull/83765)).
10
+
11
+ ### Internal
12
+
13
+ - `useDebounce`, `useThrottle`: Use `useMemo` instead of the unmaintained `use-memo-one` dependency ([#83952](https://github.com/WordPress/gutenberg/pull/83952)).
14
+
15
+ ## 8.9.0 (2026-09-23)
6
16
 
7
17
  ### Bug Fixes
8
18
 
package/README.md CHANGED
@@ -224,7 +224,7 @@ Copies the text to the clipboard when the element is clicked.
224
224
 
225
225
  _Parameters_
226
226
 
227
- - _ref_ `RefObject< string | Element | NodeListOf< Element > >`: Reference with the element.
227
+ - _ref_ `RefObject< string | Element | NodeListOf< Element > | null >`: Reference with the element.
228
228
  - _text_ `string | ( () => string )`: The text to copy.
229
229
  - _timeout_ `number`: Optional timeout to reset the returned state. 4 seconds by default.
230
230
 
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-copy-on-click/index.ts"],
4
- "sourcesContent": ["import { useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport type { RefObject } from 'react';\nimport { restoreFocus, copyToClipboard } from '../use-copy-to-clipboard';\n\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n * @param ref Reference with the element.\n * @param text The text to copy.\n * @param timeout Optional timeout to reset the returned\n * state. 4 seconds by default.\n * @return Whether or not the text has been copied. Resets after the\n * timeout.\n */\nexport default function useCopyOnClick(\n\tref: RefObject< string | Element | NodeListOf< Element > >,\n\ttext: string | ( () => string ),\n\ttimeout: number = 4000\n): boolean {\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Flag to prevent state updates after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tlet timeoutId: ReturnType< typeof setTimeout > | undefined;\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet targets: Element[];\n\t\tif ( typeof ref.current === 'string' ) {\n\t\t\ttargets =\n\t\t\t\ttypeof document !== 'undefined'\n\t\t\t\t\t? Array.from( document.querySelectorAll( ref.current ) )\n\t\t\t\t\t: [];\n\t\t} else if (\n\t\t\t'length' in ref.current &&\n\t\t\ttypeof ref.current.length === 'number'\n\t\t) {\n\t\t\ttargets = Array.from( ref.current );\n\t\t} else {\n\t\t\ttargets = [ ref.current as Element ];\n\t\t}\n\n\t\tif ( targets.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleClick = async ( event: Event ) => {\n\t\t\tconst trigger = event.currentTarget as Element;\n\t\t\tif ( ! trigger ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst success = await copyToClipboard(\n\t\t\t\ttypeof text === 'function' ? text() : text || '',\n\t\t\t\ttrigger\n\t\t\t);\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\trestoreFocus( trigger );\n\t\t\t\tif ( timeout ) {\n\t\t\t\t\tsetHasCopied( true );\n\t\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\t\ttimeoutId = setTimeout(\n\t\t\t\t\t\t() => setHasCopied( false ),\n\t\t\t\t\t\ttimeout\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfor ( const target of targets ) {\n\t\t\ttarget.addEventListener( 'click', handleClick );\n\t\t}\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tfor ( const target of targets ) {\n\t\t\t\ttarget.removeEventListener( 'click', handleClick );\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ ref, text, timeout ] );\n\n\treturn hasCopied;\n}\n"],
4
+ "sourcesContent": ["import { useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport type { RefObject } from 'react';\nimport { restoreFocus, copyToClipboard } from '../use-copy-to-clipboard';\n\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n * @param ref Reference with the element.\n * @param text The text to copy.\n * @param timeout Optional timeout to reset the returned\n * state. 4 seconds by default.\n * @return Whether or not the text has been copied. Resets after the\n * timeout.\n */\nexport default function useCopyOnClick(\n\tref: RefObject< string | Element | NodeListOf< Element > | null >,\n\ttext: string | ( () => string ),\n\ttimeout: number = 4000\n): boolean {\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Flag to prevent state updates after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tlet timeoutId: ReturnType< typeof setTimeout > | undefined;\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet targets: Element[];\n\t\tif ( typeof ref.current === 'string' ) {\n\t\t\ttargets =\n\t\t\t\ttypeof document !== 'undefined'\n\t\t\t\t\t? Array.from( document.querySelectorAll( ref.current ) )\n\t\t\t\t\t: [];\n\t\t} else if (\n\t\t\t'length' in ref.current &&\n\t\t\ttypeof ref.current.length === 'number'\n\t\t) {\n\t\t\ttargets = Array.from( ref.current );\n\t\t} else {\n\t\t\ttargets = [ ref.current as Element ];\n\t\t}\n\n\t\tif ( targets.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleClick = async ( event: Event ) => {\n\t\t\tconst trigger = event.currentTarget as Element;\n\t\t\tif ( ! trigger ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst success = await copyToClipboard(\n\t\t\t\ttypeof text === 'function' ? text() : text || '',\n\t\t\t\ttrigger\n\t\t\t);\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\trestoreFocus( trigger );\n\t\t\t\tif ( timeout ) {\n\t\t\t\t\tsetHasCopied( true );\n\t\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\t\ttimeoutId = setTimeout(\n\t\t\t\t\t\t() => setHasCopied( false ),\n\t\t\t\t\t\ttimeout\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfor ( const target of targets ) {\n\t\t\ttarget.addEventListener( 'click', handleClick );\n\t\t}\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tfor ( const target of targets ) {\n\t\t\t\ttarget.removeEventListener( 'click', handleClick );\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ ref, text, timeout ] );\n\n\treturn hasCopied;\n}\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAoC;AACpC,wBAAuB;AAEvB,mCAA8C;AAa/B,SAAR,eACN,KACA,MACA,UAAkB,KACR;AACV,wBAAAA,SAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAEF,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAEpD,gCAAW,MAAM;AAEhB,QAAI,WAAW;AACf,QAAI;AACJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAEA,QAAI;AACJ,QAAK,OAAO,IAAI,YAAY,UAAW;AACtC,gBACC,OAAO,aAAa,cACjB,MAAM,KAAM,SAAS,iBAAkB,IAAI,OAAQ,CAAE,IACrD,CAAC;AAAA,IACN,WACC,YAAY,IAAI,WAChB,OAAO,IAAI,QAAQ,WAAW,UAC7B;AACD,gBAAU,MAAM,KAAM,IAAI,OAAQ;AAAA,IACnC,OAAO;AACN,gBAAU,CAAE,IAAI,OAAmB;AAAA,IACpC;AAEA,QAAK,QAAQ,WAAW,GAAI;AAC3B;AAAA,IACD;AAEA,UAAM,cAAc,OAAQ,UAAkB;AAC7C,YAAM,UAAU,MAAM;AACtB,UAAK,CAAE,SAAU;AAChB;AAAA,MACD;AACA,YAAM,UAAU,UAAM;AAAA,QACrB,OAAO,SAAS,aAAa,KAAK,IAAI,QAAQ;AAAA,QAC9C;AAAA,MACD;AACA,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AACA,UAAK,SAAU;AACd,uDAAc,OAAQ;AACtB,YAAK,SAAU;AACd,uBAAc,IAAK;AACnB,uBAAc,SAAU;AACxB,sBAAY;AAAA,YACX,MAAM,aAAc,KAAM;AAAA,YAC1B;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,eAAY,UAAU,SAAU;AAC/B,aAAO,iBAAkB,SAAS,WAAY;AAAA,IAC/C;AACA,WAAO,MAAM;AACZ,iBAAW;AACX,iBAAY,UAAU,SAAU;AAC/B,eAAO,oBAAqB,SAAS,WAAY;AAAA,MAClD;AACA,mBAAc,SAAU;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,KAAK,MAAM,OAAQ,CAAE;AAE1B,SAAO;AACR;",
6
6
  "names": ["deprecated"]
7
7
  }
@@ -23,12 +23,13 @@ __export(use_debounce_exports, {
23
23
  default: () => useDebounce
24
24
  });
25
25
  module.exports = __toCommonJS(use_debounce_exports);
26
- var import_use_memo_one = require("use-memo-one");
27
26
  var import_element = require("@wordpress/element");
28
27
  var import_debounce = require("../../utils/debounce/index.cjs");
29
28
  function useDebounce(fn, wait, options) {
30
- const debounced = (0, import_use_memo_one.useMemoOne)(
29
+ const debounced = (0, import_element.useMemo)(
31
30
  () => (0, import_debounce.debounce)(fn, wait ?? 0, options),
31
+ // Depends on the individual options rather than the `options` object.
32
+ // eslint-disable-next-line react-hooks/exhaustive-deps
32
33
  [fn, wait, options?.leading, options?.trailing, options?.maxWait]
33
34
  );
34
35
  (0, import_element.useEffect)(() => () => debounced.cancel(), [debounced]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-debounce/index.ts"],
4
- "sourcesContent": ["import { useMemoOne } from 'use-memo-one';\nimport { useEffect } from '@wordpress/element';\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;AAAA,0BAA2B;AAC3B,qBAA0B;AAC1B,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;",
4
+ "sourcesContent": ["import { useEffect, useMemo } from '@wordpress/element';\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 = useMemo(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t// Depends on the individual options rather than the `options` object.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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;AAAA,qBAAmC;AACnC,sBAAyB;AAkBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA;AAAA;AAAA,IAGvC,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
  }
@@ -53,7 +53,7 @@ function useDisabled({
53
53
  if (!(child instanceof defaultView.HTMLElement)) {
54
54
  return;
55
55
  }
56
- if (!child.getAttribute("inert")) {
56
+ if (!child.hasAttribute("inert")) {
57
57
  child.setAttribute("inert", "true");
58
58
  updates.push(() => {
59
59
  child.removeAttribute("inert");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-disabled/index.ts"],
4
- "sourcesContent": ["import { 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"],
4
+ "sourcesContent": ["import { 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.hasAttribute( '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
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,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
  }
@@ -55,10 +55,10 @@ function useDragging({
55
55
  eventsRef.current.onDragMove?.(event);
56
56
  }, []);
57
57
  const endDrag = (0, import_element.useCallback)(
58
- function endDrag2(event) {
58
+ function handleEndDrag(event) {
59
59
  eventsRef.current.onDragEnd?.(event);
60
60
  document.removeEventListener("mousemove", onMouseMove);
61
- document.removeEventListener("mouseup", endDrag2);
61
+ document.removeEventListener("mouseup", handleEndDrag);
62
62
  setIsDragging(false);
63
63
  },
64
64
  [onMouseMove]
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-dragging/index.ts"],
4
- "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from '@wordpress/element';\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;AAAA,qBAAyD;AACzD,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"]
4
+ "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from '@wordpress/element';\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 handleEndDrag( event?: MouseEvent ): void {\n\t\t\teventsRef.current.onDragEnd?.( event );\n\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\tdocument.removeEventListener( 'mouseup', handleEndDrag );\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;AAAA,qBAAyD;AACzD,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,SAAS,cAAe,OAA2B;AAClD,gBAAU,QAAQ,YAAa,KAAM;AACrC,eAAS,oBAAqB,aAAa,WAAY;AACvD,eAAS,oBAAqB,WAAW,aAAc;AACvD,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"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-keyboard-shortcut/index.ts"],
4
- "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts Keyboard Shortcuts.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t\t// Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t\t// necessary to maintain the existing behavior.\n\t\t\t\t\t( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
4
+ "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement | null >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts Keyboard Shortcuts.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t\t// Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t\t// necessary to maintain the existing behavior.\n\t\t\t\t\t( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
5
5
  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,uBAAsB;AACtB,mCAAO;AAGP,qBAAkC;AAClC,sBAA0B;AAkC1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACD,IAAuC,CAAC,GACvC;AACD,QAAM,yBAAqB,uBAAQ,QAAS;AAE5C,gCAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,gCAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,UAAM,YAAY,IAAI,iBAAAA;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA,QAIN;AAAA;AAAA,IACL;AAEA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AAEf,mBAAe,QAAS,CAAE,aAAsB;AAC/C,YAAM,OAAO,SAAS,MAAO,GAAI;AACjC,YAAM,YAAY,IAAI;AAAA,QACrB,KAAK,OAAQ,CAAE,UAAW,MAAM,SAAS,CAAE;AAAA,MAC5C;AACA,YAAM,SAAS,UAAU,IAAK,KAAM;AACpC,YAAM,WAAW,UAAU,IAAK,OAAQ;AAExC,cACC,2BAAU,MACN,UAAU,SAAS,KAAK,UACzB,UAAU,SAAS,KAAK,UAAU,WACpC;AACD,cAAM,IAAI;AAAA,UACT,eAAgB,QAAS;AAAA,QAC1B;AAAA,MACD;AAEA,YAAM,SAAS,aAAa,eAAe;AAI3C,MAAE,UAAoB,MAAO;AAAA,QAC5B;AAAA,QACA,IAAK,SACJ,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,WAAW,YAAY,WAAW,QAAQ,UAAW,CAAE;AAC7D;AAEA,IAAO,gCAAQ;",
6
6
  "names": ["Mousetrap"]
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-merge-refs/index.ts"],
4
- "sourcesContent": ["import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqD;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,iBAAa,uBAAoB,IAAK;AAG5C,QAAM,sBAAkB,uBAAsB,CAAC,CAAE;AACjD,QAAM,qBAAiB,uBAAQ,IAAK;AAIpC,QAAM,kBAAc,uBAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,sCAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,aAAO,4BAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
4
+ "sourcesContent": ["import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\tref.current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAqD;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,QAAI,UAAU;AAAA,EACf;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,iBAAa,uBAAoB,IAAK;AAG5C,QAAM,sBAAkB,uBAAsB,CAAC,CAAE;AACjD,QAAM,qBAAiB,uBAAQ,IAAK;AAIpC,QAAM,kBAAc,uBAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,sCAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,aAAO,4BAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
4
- "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkC;AAClC,uBAAqB;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,oBAAgB,iBAAAA,SAAU,QAAS;AAEzC,QAAM,yBAAqB,uBAAoB,IAAK;AACpD,QAAM,wBAAoB,uBAA0B,MAAU;AAC9D,gCAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,aAAO,iBAAAA,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
4
+ "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAkC;AAClC,uBAAqB;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,oBAAgB,iBAAAA,SAAU,QAAS;AAEzC,QAAM,yBAAqB,uBAAa,IAAK;AAC7C,QAAM,wBAAoB,uBAA0B,MAAU;AAC9D,gCAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,aAAO,iBAAAA,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
6
6
  "names": ["useEvent"]
7
7
  }
@@ -23,11 +23,10 @@ __export(use_throttle_exports, {
23
23
  default: () => useThrottle
24
24
  });
25
25
  module.exports = __toCommonJS(use_throttle_exports);
26
- var import_use_memo_one = require("use-memo-one");
27
26
  var import_element = require("@wordpress/element");
28
27
  var import_throttle = require("../../utils/throttle/index.cjs");
29
28
  function useThrottle(fn, wait, options) {
30
- const throttled = (0, import_use_memo_one.useMemoOne)(
29
+ const throttled = (0, import_element.useMemo)(
31
30
  () => (0, import_throttle.throttle)(fn, wait ?? 0, options),
32
31
  [fn, wait, options]
33
32
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-throttle/index.ts"],
4
- "sourcesContent": ["import { useMemoOne } from 'use-memo-one';\nimport { useEffect } from '@wordpress/element';\nimport { throttle } from '../../utils/throttle';\nimport type { ThrottleOptions } from '../../utils/throttle';\nimport type { DebouncedFunc } from '../../utils/debounce';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#throttle\n *\n * @template TFunc\n *\n * @param fn The function to throttle.\n * @param wait The number of milliseconds to throttle invocations to.\n * @param options The options object.\n * @return Throttled function.\n */\nexport default function useThrottle< TFunc extends ( ...args: any[] ) => void >(\n\tfn: TFunc,\n\twait?: number,\n\toptions?: ThrottleOptions\n): DebouncedFunc< TFunc > {\n\tconst throttled = useMemoOne(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAA2B;AAC3B,qBAA0B;AAC1B,sBAAyB;AAmBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,OAAQ;AAAA,EACrB;AACA,gCAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
4
+ "sourcesContent": ["import { useEffect, useMemo } from '@wordpress/element';\nimport { throttle } from '../../utils/throttle';\nimport type { ThrottleOptions } from '../../utils/throttle';\nimport type { DebouncedFunc } from '../../utils/debounce';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#throttle\n *\n * @template TFunc\n *\n * @param fn The function to throttle.\n * @param wait The number of milliseconds to throttle invocations to.\n * @param options The options object.\n * @return Throttled function.\n */\nexport default function useThrottle< TFunc extends ( ...args: any[] ) => void >(\n\tfn: TFunc,\n\twait?: number,\n\toptions?: ThrottleOptions\n): DebouncedFunc< TFunc > {\n\tconst throttled = useMemo(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,sBAAyB;AAmBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,gBAAY;AAAA,IACjB,UAAM,0BAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,OAAQ;AAAA,EACrB;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-copy-on-click/index.ts"],
4
- "sourcesContent": ["import { useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport type { RefObject } from 'react';\nimport { restoreFocus, copyToClipboard } from '../use-copy-to-clipboard';\n\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n * @param ref Reference with the element.\n * @param text The text to copy.\n * @param timeout Optional timeout to reset the returned\n * state. 4 seconds by default.\n * @return Whether or not the text has been copied. Resets after the\n * timeout.\n */\nexport default function useCopyOnClick(\n\tref: RefObject< string | Element | NodeListOf< Element > >,\n\ttext: string | ( () => string ),\n\ttimeout: number = 4000\n): boolean {\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Flag to prevent state updates after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tlet timeoutId: ReturnType< typeof setTimeout > | undefined;\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet targets: Element[];\n\t\tif ( typeof ref.current === 'string' ) {\n\t\t\ttargets =\n\t\t\t\ttypeof document !== 'undefined'\n\t\t\t\t\t? Array.from( document.querySelectorAll( ref.current ) )\n\t\t\t\t\t: [];\n\t\t} else if (\n\t\t\t'length' in ref.current &&\n\t\t\ttypeof ref.current.length === 'number'\n\t\t) {\n\t\t\ttargets = Array.from( ref.current );\n\t\t} else {\n\t\t\ttargets = [ ref.current as Element ];\n\t\t}\n\n\t\tif ( targets.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleClick = async ( event: Event ) => {\n\t\t\tconst trigger = event.currentTarget as Element;\n\t\t\tif ( ! trigger ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst success = await copyToClipboard(\n\t\t\t\ttypeof text === 'function' ? text() : text || '',\n\t\t\t\ttrigger\n\t\t\t);\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\trestoreFocus( trigger );\n\t\t\t\tif ( timeout ) {\n\t\t\t\t\tsetHasCopied( true );\n\t\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\t\ttimeoutId = setTimeout(\n\t\t\t\t\t\t() => setHasCopied( false ),\n\t\t\t\t\t\ttimeout\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfor ( const target of targets ) {\n\t\t\ttarget.addEventListener( 'click', handleClick );\n\t\t}\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tfor ( const target of targets ) {\n\t\t\t\ttarget.removeEventListener( 'click', handleClick );\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ ref, text, timeout ] );\n\n\treturn hasCopied;\n}\n"],
4
+ "sourcesContent": ["import { useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport type { RefObject } from 'react';\nimport { restoreFocus, copyToClipboard } from '../use-copy-to-clipboard';\n\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n * @param ref Reference with the element.\n * @param text The text to copy.\n * @param timeout Optional timeout to reset the returned\n * state. 4 seconds by default.\n * @return Whether or not the text has been copied. Resets after the\n * timeout.\n */\nexport default function useCopyOnClick(\n\tref: RefObject< string | Element | NodeListOf< Element > | null >,\n\ttext: string | ( () => string ),\n\ttimeout: number = 4000\n): boolean {\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Flag to prevent state updates after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tlet timeoutId: ReturnType< typeof setTimeout > | undefined;\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet targets: Element[];\n\t\tif ( typeof ref.current === 'string' ) {\n\t\t\ttargets =\n\t\t\t\ttypeof document !== 'undefined'\n\t\t\t\t\t? Array.from( document.querySelectorAll( ref.current ) )\n\t\t\t\t\t: [];\n\t\t} else if (\n\t\t\t'length' in ref.current &&\n\t\t\ttypeof ref.current.length === 'number'\n\t\t) {\n\t\t\ttargets = Array.from( ref.current );\n\t\t} else {\n\t\t\ttargets = [ ref.current as Element ];\n\t\t}\n\n\t\tif ( targets.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleClick = async ( event: Event ) => {\n\t\t\tconst trigger = event.currentTarget as Element;\n\t\t\tif ( ! trigger ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst success = await copyToClipboard(\n\t\t\t\ttypeof text === 'function' ? text() : text || '',\n\t\t\t\ttrigger\n\t\t\t);\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\trestoreFocus( trigger );\n\t\t\t\tif ( timeout ) {\n\t\t\t\t\tsetHasCopied( true );\n\t\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\t\ttimeoutId = setTimeout(\n\t\t\t\t\t\t() => setHasCopied( false ),\n\t\t\t\t\t\ttimeout\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfor ( const target of targets ) {\n\t\t\ttarget.addEventListener( 'click', handleClick );\n\t\t}\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tfor ( const target of targets ) {\n\t\t\t\ttarget.removeEventListener( 'click', handleClick );\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ ref, text, timeout ] );\n\n\treturn hasCopied;\n}\n"],
5
5
  "mappings": ";AAAA,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AAEvB,SAAS,cAAc,uBAAuB;AAa/B,SAAR,eACN,KACA,MACA,UAAkB,KACR;AACV,aAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAEF,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAEpD,YAAW,MAAM;AAEhB,QAAI,WAAW;AACf,QAAI;AACJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAEA,QAAI;AACJ,QAAK,OAAO,IAAI,YAAY,UAAW;AACtC,gBACC,OAAO,aAAa,cACjB,MAAM,KAAM,SAAS,iBAAkB,IAAI,OAAQ,CAAE,IACrD,CAAC;AAAA,IACN,WACC,YAAY,IAAI,WAChB,OAAO,IAAI,QAAQ,WAAW,UAC7B;AACD,gBAAU,MAAM,KAAM,IAAI,OAAQ;AAAA,IACnC,OAAO;AACN,gBAAU,CAAE,IAAI,OAAmB;AAAA,IACpC;AAEA,QAAK,QAAQ,WAAW,GAAI;AAC3B;AAAA,IACD;AAEA,UAAM,cAAc,OAAQ,UAAkB;AAC7C,YAAM,UAAU,MAAM;AACtB,UAAK,CAAE,SAAU;AAChB;AAAA,MACD;AACA,YAAM,UAAU,MAAM;AAAA,QACrB,OAAO,SAAS,aAAa,KAAK,IAAI,QAAQ;AAAA,QAC9C;AAAA,MACD;AACA,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AACA,UAAK,SAAU;AACd,qBAAc,OAAQ;AACtB,YAAK,SAAU;AACd,uBAAc,IAAK;AACnB,uBAAc,SAAU;AACxB,sBAAY;AAAA,YACX,MAAM,aAAc,KAAM;AAAA,YAC1B;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,eAAY,UAAU,SAAU;AAC/B,aAAO,iBAAkB,SAAS,WAAY;AAAA,IAC/C;AACA,WAAO,MAAM;AACZ,iBAAW;AACX,iBAAY,UAAU,SAAU;AAC/B,eAAO,oBAAqB,SAAS,WAAY;AAAA,MAClD;AACA,mBAAc,SAAU;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,KAAK,MAAM,OAAQ,CAAE;AAE1B,SAAO;AACR;",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,11 @@
1
1
  // packages/compose/src/hooks/use-debounce/index.ts
2
- import { useMemoOne } from "use-memo-one";
3
- import { useEffect } from "@wordpress/element";
2
+ import { useEffect, useMemo } from "@wordpress/element";
4
3
  import { debounce } from "../../utils/debounce/index.mjs";
5
4
  function useDebounce(fn, wait, options) {
6
- const debounced = useMemoOne(
5
+ const debounced = useMemo(
7
6
  () => debounce(fn, wait ?? 0, options),
7
+ // Depends on the individual options rather than the `options` object.
8
+ // eslint-disable-next-line react-hooks/exhaustive-deps
8
9
  [fn, wait, options?.leading, options?.trailing, options?.maxWait]
9
10
  );
10
11
  useEffect(() => () => debounced.cancel(), [debounced]);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-debounce/index.ts"],
4
- "sourcesContent": ["import { useMemoOne } from 'use-memo-one';\nimport { useEffect } from '@wordpress/element';\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,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAkBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,YAAY;AAAA,IACjB,MAAM,SAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,SAAS,SAAS,SAAS,UAAU,SAAS,OAAQ;AAAA,EACnE;AACA,YAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
4
+ "sourcesContent": ["import { useEffect, useMemo } from '@wordpress/element';\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 = useMemo(\n\t\t() => debounce( fn, wait ?? 0, options ),\n\t\t// Depends on the individual options rather than the `options` object.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\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,SAAS,WAAW,eAAe;AACnC,SAAS,gBAAgB;AAkBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,YAAY;AAAA,IACjB,MAAM,SAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA;AAAA;AAAA,IAGvC,CAAE,IAAI,MAAM,SAAS,SAAS,SAAS,UAAU,SAAS,OAAQ;AAAA,EACnE;AACA,YAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
6
6
  "names": []
7
7
  }
@@ -19,7 +19,7 @@ function useDisabled({
19
19
  if (!(child instanceof defaultView.HTMLElement)) {
20
20
  return;
21
21
  }
22
- if (!child.getAttribute("inert")) {
22
+ if (!child.hasAttribute("inert")) {
23
23
  child.setAttribute("inert", "true");
24
24
  updates.push(() => {
25
25
  child.removeAttribute("inert");
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-disabled/index.ts"],
4
- "sourcesContent": ["import { 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"],
4
+ "sourcesContent": ["import { 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.hasAttribute( '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
5
  "mappings": ";AAAA,SAAS,gBAAgB;AACzB,OAAO,kBAAkB;AA4BV,SAAR,YAA8B;AAAA,EACpC,YAAY,iBAAiB;AAC9B,IAEI,CAAC,GAAI;AACR,SAAO;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,mBAAmB,SAAU,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": []
7
7
  }
@@ -21,10 +21,10 @@ function useDragging({
21
21
  eventsRef.current.onDragMove?.(event);
22
22
  }, []);
23
23
  const endDrag = useCallback(
24
- function endDrag2(event) {
24
+ function handleEndDrag(event) {
25
25
  eventsRef.current.onDragEnd?.(event);
26
26
  document.removeEventListener("mousemove", onMouseMove);
27
- document.removeEventListener("mouseup", endDrag2);
27
+ document.removeEventListener("mouseup", handleEndDrag);
28
28
  setIsDragging(false);
29
29
  },
30
30
  [onMouseMove]
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-dragging/index.ts"],
4
- "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from '@wordpress/element';\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,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,OAAO,+BAA+B;AAYvB,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,KAAM;AAEtD,QAAM,YAAY,OAAyB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,4BAA2B,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,cAAc,YAAa,CAAE,UAA6B;AAC/D,cAAU,QAAQ,aAAc,KAAM;AAAA,EACvC,GAAG,CAAC,CAAE;AAEN,QAAM,UAAU;AAAA,IACf,SAASA,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,YAAY;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,YAAW,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": ["endDrag"]
4
+ "sourcesContent": ["import { useCallback, useEffect, useRef, useState } from '@wordpress/element';\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 handleEndDrag( event?: MouseEvent ): void {\n\t\t\teventsRef.current.onDragEnd?.( event );\n\t\t\tdocument.removeEventListener( 'mousemove', onMouseMove );\n\t\t\tdocument.removeEventListener( 'mouseup', handleEndDrag );\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,SAAS,aAAa,WAAW,QAAQ,gBAAgB;AACzD,OAAO,+BAA+B;AAYvB,SAAR,YAA8B;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AACD,GAAmC;AAClC,QAAM,CAAE,YAAY,aAAc,IAAI,SAAU,KAAM;AAEtD,QAAM,YAAY,OAAyB;AAAA,IAC1C;AAAA,IACA;AAAA,IACA;AAAA,EACD,CAAE;AACF,4BAA2B,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,cAAc,YAAa,CAAE,UAA6B;AAC/D,cAAU,QAAQ,aAAc,KAAM;AAAA,EACvC,GAAG,CAAC,CAAE;AAEN,QAAM,UAAU;AAAA,IACf,SAAS,cAAe,OAA2B;AAClD,gBAAU,QAAQ,YAAa,KAAM;AACrC,eAAS,oBAAqB,aAAa,WAAY;AACvD,eAAS,oBAAqB,WAAW,aAAc;AACvD,oBAAe,KAAM;AAAA,IACtB;AAAA,IACA,CAAE,WAAY;AAAA,EACf;AAEA,QAAM,YAAY;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,YAAW,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": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-keyboard-shortcut/index.ts"],
4
- "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts Keyboard Shortcuts.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t\t// Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t\t// necessary to maintain the existing behavior.\n\t\t\t\t\t( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
4
+ "sourcesContent": ["import Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\nimport type { RefObject } from '@wordpress/element';\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\ntype KeyboardShortcutConfig = {\n\t/**\n\t * Handle keyboard events anywhere including inside textarea/input fields.\n\t */\n\tbindGlobal: boolean;\n\t/**\n\t * Event name used to trigger the handler, defaults to keydown.\n\t */\n\teventName: string;\n\t/**\n\t * Disables the keyboard handler if the value is true.\n\t */\n\tisDisabled: boolean;\n\t/**\n\t * React reference to the DOM element used to catch the keyboard event.\n\t */\n\ttarget: RefObject< HTMLElement | null >;\n};\n\n/**\n * Attach a keyboard shortcut handler.\n *\n * @see https://craig.is/killing/mice#api.bind for information about the `callback` parameter.\n *\n * @param shortcuts Keyboard Shortcuts.\n * @param callback Shortcut callback.\n * @param options Shortcut options.\n * @param options.bindGlobal\n * @param options.eventName\n * @param options.isDisabled\n * @param options.target\n */\nfunction useKeyboardShortcut(\n\tshortcuts: string[] | string,\n\tcallback: ( e: ExtendedKeyboardEvent, combo: string ) => void,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false,\n\t\ttarget,\n\t}: Partial< KeyboardShortcutConfig > = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\n\n\tuseEffect( () => {\n\t\tcurrentCallbackRef.current = callback;\n\t}, [ callback ] );\n\n\tuseEffect( () => {\n\t\tif ( isDisabled ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t\t// Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t\t// necessary to maintain the existing behavior.\n\t\t\t\t\t( document as unknown as Element )\n\t\t);\n\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\n\t\tshortcutsArray.forEach( ( shortcut: string ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// `@ts-expect-error` Mousetrap typings don’t include `bindGlobal`\n\t\t\t// It exists at runtime via the plugin\n\t\t\t// `any` is used here to allow dynamic access via `bindFn`\n\t\t\t( mousetrap as any )[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t( ...args: [ Mousetrap.ExtendedKeyboardEvent, string ] ) =>\n\t\t\t\t\tcurrentCallbackRef.current( ...args ),\n\t\t\t\teventName\n\t\t\t);\n\t\t} );\n\n\t\treturn () => {\n\t\t\tmousetrap.reset();\n\t\t};\n\t}, [ shortcuts, bindGlobal, eventName, target, isDisabled ] );\n}\n\nexport default useKeyboardShortcut;\n"],
5
5
  "mappings": ";AAAA,OAAO,eAAe;AACtB,OAAO;AAGP,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAkC1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA,EACb;AACD,IAAuC,CAAC,GACvC;AACD,QAAM,qBAAqB,OAAQ,QAAS;AAE5C,YAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AAEA,UAAM,YAAY,IAAI;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA,QAIN;AAAA;AAAA,IACL;AAEA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AAEf,mBAAe,QAAS,CAAE,aAAsB;AAC/C,YAAM,OAAO,SAAS,MAAO,GAAI;AACjC,YAAM,YAAY,IAAI;AAAA,QACrB,KAAK,OAAQ,CAAE,UAAW,MAAM,SAAS,CAAE;AAAA,MAC5C;AACA,YAAM,SAAS,UAAU,IAAK,KAAM;AACpC,YAAM,WAAW,UAAU,IAAK,OAAQ;AAExC,UACC,UAAU,MACN,UAAU,SAAS,KAAK,UACzB,UAAU,SAAS,KAAK,UAAU,WACpC;AACD,cAAM,IAAI;AAAA,UACT,eAAgB,QAAS;AAAA,QAC1B;AAAA,MACD;AAEA,YAAM,SAAS,aAAa,eAAe;AAI3C,MAAE,UAAoB,MAAO;AAAA,QAC5B;AAAA,QACA,IAAK,SACJ,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACrC;AAAA,MACD;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,MAAM;AAAA,IACjB;AAAA,EACD,GAAG,CAAE,WAAW,YAAY,WAAW,QAAQ,UAAW,CAAE;AAC7D;AAEA,IAAO,gCAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-merge-refs/index.ts"],
4
- "sourcesContent": ["import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
5
- "mappings": ";AAAA,SAAS,QAAQ,aAAa,uBAAuB;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,aAAa,OAAoB,IAAK;AAG5C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,QAAM,cAAc,OAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,kBAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,SAAO,YAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
4
+ "sourcesContent": ["import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { Ref, RefCallback } from 'react';\n\n// Returns a cleanup function if the ref callback returned one (React 19 ref\n// callback cleanup pattern), otherwise `undefined`. Object refs never have a\n// cleanup and only set `.current`.\nfunction assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {\n\tif ( typeof ref === 'function' ) {\n\t\tconst returned = ref( value );\n\t\treturn typeof returned === 'function' ? returned : undefined;\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\tref.current = value;\n\t}\n\treturn undefined;\n}\n\n// Tear down a ref at the given index: prefer the stored cleanup; otherwise\n// fall back to calling the ref with `null`.\nfunction detachRef< T >(\n\tref: Ref< T >,\n\tindex: number,\n\tcleanups: Array< ( () => void ) | undefined >\n): void {\n\tconst cleanup = cleanups[ index ];\n\tif ( cleanup ) {\n\t\tcleanups[ index ] = undefined;\n\t\tcleanup();\n\t} else {\n\t\tassignRef( ref, null );\n\t}\n}\n\n/**\n * Merges refs into one ref callback.\n *\n * It also ensures that the merged ref callbacks are only called when they\n * change (as a result of a `useCallback` dependency update) OR when the ref\n * value changes, just as React does when passing a single ref callback to the\n * component.\n *\n * As expected, if you pass a new function on every render, the ref callback\n * will be called after every render.\n *\n * If you don't wish a ref callback to be called after every render, wrap it\n * with `useCallback( callback, dependencies )`. When a dependency changes, the\n * old ref callback will be called with `null` and the new ref callback will be\n * called with the same value.\n *\n * Inner ref callbacks may return a cleanup function (React 19's ref callback\n * cleanup pattern). When a ref callback returns a function, that function is\n * invoked at teardown (node change, dependency change, or unmount) **instead\n * of** the callback being called with `null`. Callbacks that do not return a\n * cleanup continue to receive `null` on teardown as before.\n *\n * It's also possible to _disable_ a ref (and its behaviour) by simply not\n * passing the ref.\n *\n * ```jsx\n * const ref = useCallback( ( node ) => {\n * node.addEventListener( ... );\n * return () => {\n * node.removeEventListener( ... );\n * };\n * }, [ ...dependencies ] );\n * const otherRef = useRef();\n * const mergedRefs = useMergeRefs( [\n * enabled && ref,\n * otherRef,\n * ] );\n * return <div ref={ mergedRefs } />;\n * ```\n *\n * @param refs The refs to be merged.\n * @return The merged ref callback.\n */\nexport default function useMergeRefs< T >(\n\trefs: Ref< T >[]\n): RefCallback< T > {\n\tconst elementRef = useRef< T | null >( null );\n\t// The refs that are attached to the element: set when the element\n\t// attaches, and kept in sync when a changed ref is swapped on render.\n\tconst attachedRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\n\t// Position-indexed cleanups returned by inner ref callbacks. A slot is\n\t// `undefined` when the ref at that position did not return a cleanup (or\n\t// is an object ref / disabled).\n\tconst cleanupsRef = useRef< Array< ( () => void ) | undefined > >( [] );\n\n\t// Update on render before the ref callback is called, so the ref callback\n\t// always has access to the current refs.\n\tcurrentRefsRef.current = refs;\n\n\t// If any of the refs change, call the attached ref with `null` and the\n\t// new ref with the node. Comparing against the refs that are attached to\n\t// the element, rather than the previous render's refs, also covers an\n\t// element that attaches outside a render of this component (a merged ref\n\t// passed to a child that mounts the element in its own commit): the\n\t// change is still detected on the next render. When the element attached\n\t// during this commit, the ref callback has already been called with the\n\t// current refs, which compare equal here.\n\tuseLayoutEffect( () => {\n\t\tconst element = elementRef.current;\n\n\t\tif ( element === null ) {\n\t\t\treturn;\n\t\t}\n\n\t\trefs.forEach( ( ref, index ) => {\n\t\t\tconst attachedRef = attachedRefsRef.current[ index ];\n\t\t\tif ( ref !== attachedRef ) {\n\t\t\t\tdetachRef( attachedRef, index, cleanupsRef.current );\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, element );\n\t\t\t}\n\t\t} );\n\n\t\tattachedRefsRef.current = refs;\n\t}, refs );\n\n\t// There should be no dependencies so that `callback` is only called when\n\t// the node changes.\n\treturn useCallback( ( value: T | null ) => {\n\t\t// Update the element so it can be used when calling ref callbacks on a\n\t\t// dependency change.\n\t\telementRef.current = value;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the attached one with `null`.\n\t\tif ( value === null ) {\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t\tattachedRefsRef.current = [];\n\t\t} else {\n\t\t\tattachedRefsRef.current = currentRefsRef.current;\n\t\t\tattachedRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tcleanupsRef.current[ index ] = assignRef( ref, value );\n\t\t\t} );\n\t\t}\n\t}, [] );\n}\n"],
5
+ "mappings": ";AAAA,SAAS,QAAQ,aAAa,uBAAuB;AAMrD,SAAS,UAAgB,KAAe,OAAuC;AAC9E,MAAK,OAAO,QAAQ,YAAa;AAChC,UAAM,WAAW,IAAK,KAAM;AAC5B,WAAO,OAAO,aAAa,aAAa,WAAW;AAAA,EACpD,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,QAAI,UAAU;AAAA,EACf;AACA,SAAO;AACR;AAIA,SAAS,UACR,KACA,OACA,UACO;AACP,QAAM,UAAU,SAAU,KAAM;AAChC,MAAK,SAAU;AACd,aAAU,KAAM,IAAI;AACpB,YAAQ;AAAA,EACT,OAAO;AACN,cAAW,KAAK,IAAK;AAAA,EACtB;AACD;AA6Ce,SAAR,aACN,MACmB;AACnB,QAAM,aAAa,OAAoB,IAAK;AAG5C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,QAAM,cAAc,OAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAUzB,kBAAiB,MAAM;AACtB,UAAM,UAAU,WAAW;AAE3B,QAAK,YAAY,MAAO;AACvB;AAAA,IACD;AAEA,SAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,YAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,UAAK,QAAQ,aAAc;AAC1B,kBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,OAAQ;AAAA,MACxD;AAAA,IACD,CAAE;AAEF,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,SAAO,YAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAIrB,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AACF,sBAAgB,UAAU,CAAC;AAAA,IAC5B,OAAO;AACN,sBAAgB,UAAU,eAAe;AACzC,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-resize-observer/use-resize-observer.ts"],
4
- "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T | null >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
5
- "mappings": ";AAAA,SAAS,WAAW,cAAc;AAClC,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAoB,IAAK;AACpD,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,YAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
4
+ "sourcesContent": ["import { useEffect, useRef } from '@wordpress/element';\nimport useEvent from '../use-event';\n\n// This is the current implementation of `useResizeObserver`.\n//\n// The legacy implementation is still supported for backwards compatibility.\n// This is achieved by overloading the exported function with both signatures,\n// and detecting which API is being used at runtime.\nexport function useResizeObserver< T extends HTMLElement >(\n\tcallback: ResizeObserverCallback,\n\tresizeObserverOptions: ResizeObserverOptions = {}\n): ( element?: T | null ) => void {\n\tconst callbackEvent = useEvent( callback );\n\n\tconst observedElementRef = useRef< T >( null );\n\tconst resizeObserverRef = useRef< ResizeObserver >( undefined );\n\tuseEffect( () => {\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserverRef.current?.observe(\n\t\t\t\tobservedElementRef.current,\n\t\t\t\tresizeObserverOptions\n\t\t\t);\n\t\t}\n\t\treturn () => resizeObserverRef.current?.disconnect();\n\t\t// This effect owns the observer lifecycle. The returned ref handles\n\t\t// element and option changes without recreating the observer.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [] );\n\treturn useEvent( ( element?: T | null ) => {\n\t\tif ( element === observedElementRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Set up `ResizeObserver`.\n\t\tresizeObserverRef.current ??= new ResizeObserver( callbackEvent );\n\t\tconst { current: resizeObserver } = resizeObserverRef;\n\n\t\t// Unobserve previous element.\n\t\tif ( observedElementRef.current ) {\n\t\t\tresizeObserver.unobserve( observedElementRef.current );\n\t\t}\n\n\t\t// Observe new element.\n\t\tobservedElementRef.current = element ?? null;\n\t\tif ( element ) {\n\t\t\tresizeObserver.observe( element, resizeObserverOptions );\n\t\t}\n\t} );\n}\n"],
5
+ "mappings": ";AAAA,SAAS,WAAW,cAAc;AAClC,OAAO,cAAc;AAOd,SAAS,kBACf,UACA,wBAA+C,CAAC,GACf;AACjC,QAAM,gBAAgB,SAAU,QAAS;AAEzC,QAAM,qBAAqB,OAAa,IAAK;AAC7C,QAAM,oBAAoB,OAA0B,MAAU;AAC9D,YAAW,MAAM;AAChB,QAAK,mBAAmB,SAAU;AACjC,wBAAkB,SAAS;AAAA,QAC1B,mBAAmB;AAAA,QACnB;AAAA,MACD;AAAA,IACD;AACA,WAAO,MAAM,kBAAkB,SAAS,WAAW;AAAA,EAIpD,GAAG,CAAC,CAAE;AACN,SAAO,SAAU,CAAE,YAAwB;AAC1C,QAAK,YAAY,mBAAmB,SAAU;AAC7C;AAAA,IACD;AAGA,sBAAkB,YAAY,IAAI,eAAgB,aAAc;AAChE,UAAM,EAAE,SAAS,eAAe,IAAI;AAGpC,QAAK,mBAAmB,SAAU;AACjC,qBAAe,UAAW,mBAAmB,OAAQ;AAAA,IACtD;AAGA,uBAAmB,UAAU,WAAW;AACxC,QAAK,SAAU;AACd,qBAAe,QAAS,SAAS,qBAAsB;AAAA,IACxD;AAAA,EACD,CAAE;AACH;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,8 @@
1
1
  // packages/compose/src/hooks/use-throttle/index.ts
2
- import { useMemoOne } from "use-memo-one";
3
- import { useEffect } from "@wordpress/element";
2
+ import { useEffect, useMemo } from "@wordpress/element";
4
3
  import { throttle } from "../../utils/throttle/index.mjs";
5
4
  function useThrottle(fn, wait, options) {
6
- const throttled = useMemoOne(
5
+ const throttled = useMemo(
7
6
  () => throttle(fn, wait ?? 0, options),
8
7
  [fn, wait, options]
9
8
  );
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-throttle/index.ts"],
4
- "sourcesContent": ["import { useMemoOne } from 'use-memo-one';\nimport { useEffect } from '@wordpress/element';\nimport { throttle } from '../../utils/throttle';\nimport type { ThrottleOptions } from '../../utils/throttle';\nimport type { DebouncedFunc } from '../../utils/debounce';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#throttle\n *\n * @template TFunc\n *\n * @param fn The function to throttle.\n * @param wait The number of milliseconds to throttle invocations to.\n * @param options The options object.\n * @return Throttled function.\n */\nexport default function useThrottle< TFunc extends ( ...args: any[] ) => void >(\n\tfn: TFunc,\n\twait?: number,\n\toptions?: ThrottleOptions\n): DebouncedFunc< TFunc > {\n\tconst throttled = useMemoOne(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],
5
- "mappings": ";AAAA,SAAS,kBAAkB;AAC3B,SAAS,iBAAiB;AAC1B,SAAS,gBAAgB;AAmBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,YAAY;AAAA,IACjB,MAAM,SAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,OAAQ;AAAA,EACrB;AACA,YAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
4
+ "sourcesContent": ["import { useEffect, useMemo } from '@wordpress/element';\nimport { throttle } from '../../utils/throttle';\nimport type { ThrottleOptions } from '../../utils/throttle';\nimport type { DebouncedFunc } from '../../utils/debounce';\n\n/**\n * Throttles a function similar to Lodash's `throttle`. A new throttled function will\n * be returned and any scheduled calls cancelled if any of the arguments change,\n * including the function to throttle, so please wrap functions created on\n * render in components in `useCallback`.\n *\n * @see https://lodash.com/docs/4#throttle\n *\n * @template TFunc\n *\n * @param fn The function to throttle.\n * @param wait The number of milliseconds to throttle invocations to.\n * @param options The options object.\n * @return Throttled function.\n */\nexport default function useThrottle< TFunc extends ( ...args: any[] ) => void >(\n\tfn: TFunc,\n\twait?: number,\n\toptions?: ThrottleOptions\n): DebouncedFunc< TFunc > {\n\tconst throttled = useMemo(\n\t\t() => throttle( fn, wait ?? 0, options ),\n\t\t[ fn, wait, options ]\n\t);\n\tuseEffect( () => () => throttled.cancel(), [ throttled ] );\n\treturn throttled;\n}\n"],
5
+ "mappings": ";AAAA,SAAS,WAAW,eAAe;AACnC,SAAS,gBAAgB;AAmBV,SAAR,YACN,IACA,MACA,SACyB;AACzB,QAAM,YAAY;AAAA,IACjB,MAAM,SAAU,IAAI,QAAQ,GAAG,OAAQ;AAAA,IACvC,CAAE,IAAI,MAAM,OAAQ;AAAA,EACrB;AACA,YAAW,MAAM,MAAM,UAAU,OAAO,GAAG,CAAE,SAAU,CAAE;AACzD,SAAO;AACR;",
6
6
  "names": []
7
7
  }
@@ -27,9 +27,6 @@ declare const withSafeTimeout: <C extends WithInjectedProps<C, TimeoutProps>>(In
27
27
  forceUpdate(callback?: (() => void) | undefined): void;
28
28
  readonly props: Readonly<WithoutInjectedProps<C, TimeoutProps>>;
29
29
  state: Readonly<{}>;
30
- refs: {
31
- [key: string]: import("react").ReactInstance;
32
- };
33
30
  componentDidMount?(): void;
34
31
  shouldComponentUpdate?(nextProps: Readonly<WithoutInjectedProps<C, TimeoutProps>>, nextState: Readonly<{}>, nextContext: any): boolean;
35
32
  componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
@@ -43,6 +40,7 @@ declare const withSafeTimeout: <C extends WithInjectedProps<C, TimeoutProps>>(In
43
40
  UNSAFE_componentWillUpdate?(nextProps: Readonly<WithoutInjectedProps<C, TimeoutProps>>, nextState: Readonly<{}>, nextContext: any): void;
44
41
  };
45
42
  contextType?: import("react").Context<any> | undefined;
43
+ propTypes?: any;
46
44
  };
47
45
  export default withSafeTimeout;
48
46
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAGnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe,GAClB,CAAC,SAAS,iBAAiB,CAAE,CAAC,EAAE,YAAY,CAAE;;kBAKpC,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;;;CAoB1B,CAAC;eAEa,eAAe"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/with-safe-timeout/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,iBAAiB,EACjB,oBAAoB,EACpB,MAAM,2CAA2C,CAAC;AAGnD;;;;;;;GAOG;AACH,UAAU,YAAY;IACrB,UAAU,EAAE,CAAE,EAAE,EAAE,MAAM,IAAI,EAAE,KAAK,EAAE,MAAM,KAAM,MAAM,CAAC;IACxD,YAAY,EAAE,CAAE,EAAE,EAAE,MAAM,KAAM,IAAI,CAAC;CACrC;AAED;;;GAGG;AACH,QAAA,MAAM,eAAe,GAClB,CAAC,SAAS,iBAAiB,CAAE,CAAC,EAAE,YAAY,CAAE;;kBAKpC,MAAM,EAAE;;uBAaF,MAAM,IAAI,SAAS,MAAM;yBASvB,MAAM;;;;;;;;;;;;;;;;;;;;;CAoB1B,CAAC;eAEa,eAAe"}
@@ -10,5 +10,5 @@ import type { RefObject } from 'react';
10
10
  * @return Whether or not the text has been copied. Resets after the
11
11
  * timeout.
12
12
  */
13
- export default function useCopyOnClick(ref: RefObject<string | Element | NodeListOf<Element>>, text: string | (() => string), timeout?: number): boolean;
13
+ export default function useCopyOnClick(ref: RefObject<string | Element | NodeListOf<Element> | null>, text: string | (() => string), timeout?: number): boolean;
14
14
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-on-click/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,GAAG,EAAE,SAAS,CAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAE,OAAO,CAAE,CAAE,EAC1D,IAAI,EAAE,MAAM,GAAG,CAAE,MAAM,MAAM,CAAE,EAC/B,OAAO,GAAE,MAAa,GACpB,OAAO,CAyET"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-on-click/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,GAAG,EAAE,SAAS,CAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAE,OAAO,CAAE,GAAG,IAAI,CAAE,EACjE,IAAI,EAAE,MAAM,GAAG,CAAE,MAAM,MAAM,CAAE,EAC/B,OAAO,GAAE,MAAa,GACpB,OAAO,CAyET"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,SAAS,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,IAAI,EAC5E,EAAE,EAAE,KAAK,EACT,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GACvB,aAAa,CAAE,KAAK,CAAE,CAOxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE3E;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,SAAS,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,IAAI,EAC5E,EAAE,EAAE,KAAK,EACT,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GACvB,aAAa,CAAE,KAAK,CAAE,CASxB"}
@@ -17,7 +17,7 @@ type KeyboardShortcutConfig = {
17
17
  /**
18
18
  * React reference to the DOM element used to catch the keyboard event.
19
19
  */
20
- target: RefObject<HTMLElement>;
20
+ target: RefObject<HTMLElement | null>;
21
21
  };
22
22
  /**
23
23
  * Attach a keyboard shortcut handler.
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.ts"],"names":[],"mappings":"AACA,OAAO,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,sBAAsB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAE,WAAW,CAAE,CAAC;CACjC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAC5B,QAAQ,EAAE,CAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAC7D,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAClB,MAAM,GACN,GAAE,OAAO,CAAE,sBAAsB,CAAO,QA4DzC;eAEc,mBAAmB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-keyboard-shortcut/index.ts"],"names":[],"mappings":"AACA,OAAO,wDAAwD,CAAC;AAChE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,WAAW,CAAC;AACvD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAIpD,KAAK,sBAAsB,GAAG;IAC7B;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;OAEG;IACH,UAAU,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,EAAE,SAAS,CAAE,WAAW,GAAG,IAAI,CAAE,CAAC;CACxC,CAAC;AAEF;;;;;;;;;;;;GAYG;AACH,iBAAS,mBAAmB,CAC3B,SAAS,EAAE,MAAM,EAAE,GAAG,MAAM,EAC5B,QAAQ,EAAE,CAAE,CAAC,EAAE,qBAAqB,EAAE,KAAK,EAAE,MAAM,KAAM,IAAI,EAC7D,EACC,UAAkB,EAClB,SAAqB,EACrB,UAAkB,EAClB,MAAM,GACN,GAAE,OAAO,CAAE,sBAAsB,CAAO,QA4DzC;eAEc,mBAAmB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAoB,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA+BhE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CA8DlB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-merge-refs/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,GAAG,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AA+B9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,OAAO,UAAU,YAAY,CAAE,CAAC,EACtC,IAAI,EAAE,GAAG,CAAE,CAAC,CAAE,EAAE,GACd,WAAW,CAAE,CAAC,CAAE,CA8DlB"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-throttle/index.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,SAAS,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,IAAI,EAC5E,EAAE,EAAE,KAAK,EACT,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GACvB,aAAa,CAAE,KAAK,CAAE,CAOxB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-throttle/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAC5D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAE1D;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,KAAK,SAAS,CAAE,GAAG,IAAI,EAAE,GAAG,EAAE,KAAM,IAAI,EAC5E,EAAE,EAAE,KAAK,EACT,IAAI,CAAC,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,eAAe,GACvB,aAAa,CAAE,KAAK,CAAE,CAOxB"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@wordpress/compose",
3
- "version": "8.8.2-next.v.202609171837.0",
3
+ "version": "8.10.0",
4
4
  "description": "WordPress higher-order components (HOCs).",
5
5
  "author": "The WordPress Contributors",
6
6
  "license": "GPL-2.0-or-later",
@@ -21,8 +21,7 @@
21
21
  "url": "https://github.com/WordPress/gutenberg/issues"
22
22
  },
23
23
  "engines": {
24
- "node": ">=18.12.0",
25
- "npm": ">=8.19.2"
24
+ "node": ">=18.12.0"
26
25
  },
27
26
  "files": [
28
27
  "src",
@@ -46,38 +45,43 @@
46
45
  "sideEffects": false,
47
46
  "dependencies": {
48
47
  "@types/mousetrap": "^1.6.8",
49
- "@wordpress/deprecated": "^4.55.1-next.v.202609171837.0",
50
- "@wordpress/dom": "^4.55.2-next.v.202609171837.0",
51
- "@wordpress/element": "^8.7.1-next.v.202609171837.0",
52
- "@wordpress/is-shallow-equal": "^5.55.1-next.v.202609171837.0",
53
- "@wordpress/keycodes": "^4.56.1-next.v.202609171837.0",
54
- "@wordpress/priority-queue": "^3.55.1-next.v.202609171837.0",
55
- "@wordpress/private-apis": "^1.55.1-next.v.202609171837.0",
56
- "@wordpress/undo-manager": "^1.55.1-next.v.202609171837.0",
48
+ "@wordpress/deprecated": "^4.57.0",
49
+ "@wordpress/dom": "^4.57.0",
50
+ "@wordpress/element": "^9.0.0",
51
+ "@wordpress/is-shallow-equal": "^5.57.0",
52
+ "@wordpress/keycodes": "^4.57.0",
53
+ "@wordpress/priority-queue": "^3.57.0",
54
+ "@wordpress/private-apis": "^2.0.0",
55
+ "@wordpress/undo-manager": "^1.57.0",
57
56
  "change-case": "^4.1.2",
58
- "mousetrap": "^1.6.5",
59
- "use-memo-one": "^1.1.1"
57
+ "mousetrap": "^1.6.5"
60
58
  },
61
59
  "devDependencies": {
62
- "@testing-library/dom": "^10.4.1",
60
+ "@testing-library/dom": "^10.4.2",
63
61
  "@testing-library/react": "^16.3.3",
64
62
  "@testing-library/user-event": "^14.6.1",
63
+ "@types/react-dom": "^19.3.0",
65
64
  "mock-match-media": "^0.4.2",
66
- "react-dom": "^18.3.1",
67
- "vitest": "^5.0.0",
65
+ "react-dom": "^19.3.0",
66
+ "vitest": "^5.0.3",
68
67
  "vitest-browser-react": "^2.3.0"
69
68
  },
70
69
  "peerDependencies": {
71
70
  "@types/react": "^18 || ^19",
72
- "react": "^18 || ^19"
71
+ "@types/react-dom": "^18 || ^19",
72
+ "react": "^18 || ^19",
73
+ "react-dom": "^18 || ^19"
73
74
  },
74
75
  "peerDependenciesMeta": {
75
76
  "@types/react": {
76
77
  "optional": true
78
+ },
79
+ "@types/react-dom": {
80
+ "optional": true
77
81
  }
78
82
  },
79
83
  "publishConfig": {
80
84
  "access": "public"
81
85
  },
82
- "gitHead": "7fc9f6676debc888d2f071d17cb71837040d4b48"
86
+ "gitHead": "12441e2520c78b2254a792a8cba40c34110be060"
83
87
  }
@@ -1,23 +1,17 @@
1
- import { afterEach, describe, expect, it } from 'vitest';
1
+ import { describe, expect, it } from 'vitest';
2
2
  import { render, screen } from '@testing-library/react';
3
- import { logged } from '@wordpress/deprecated';
4
3
  import pure from '../';
5
4
 
6
- describe( 'pure', () => {
7
- afterEach( () => {
8
- for ( const key in logged ) {
9
- delete logged[ key ];
10
- }
11
- } );
5
+ const DEPRECATION_MESSAGE =
6
+ 'wp.compose.pure is deprecated since version 7.1. Please use Use `memo` or `PureComponent` instead instead.';
12
7
 
8
+ describe( 'pure', () => {
13
9
  it( 'wraps a component and logs a deprecation warning', () => {
14
10
  const MyComp = pure( () => <p data-testid="content">content</p> );
15
11
 
16
12
  render( <MyComp /> );
17
13
 
18
- expect( console ).toHaveWarnedWith(
19
- 'wp.compose.pure is deprecated since version 7.1. Please use Use `memo` or `PureComponent` instead instead.'
20
- );
14
+ expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
21
15
  expect( screen.getByTestId( 'content' ) ).toHaveTextContent(
22
16
  'content'
23
17
  );
@@ -22,6 +22,9 @@ vi.mock( import( '../listener' ), async ( importOriginal ) => {
22
22
  } );
23
23
 
24
24
  describe( 'withGlobalEvents', () => {
25
+ const DEPRECATION_MESSAGE =
26
+ 'wp.compose.withGlobalEvents is deprecated since version 5.7. Please use useEffect instead.';
27
+
25
28
  class OriginalComponent extends Component {
26
29
  handleResize( event ) {
27
30
  this.props.onResize( event );
@@ -59,6 +62,7 @@ describe( 'withGlobalEvents', () => {
59
62
 
60
63
  render( <EnhancedComponent ref={ () => {} }>Hello</EnhancedComponent> );
61
64
 
65
+ expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
62
66
  expect( Listener._instance.add ).toHaveBeenCalledWith(
63
67
  'resize',
64
68
  // If not `undefined`, then we consider handlers were properly bound to the wrapper component.
@@ -77,6 +81,7 @@ describe( 'withGlobalEvents', () => {
77
81
  Hello
78
82
  </EnhancedComponent>
79
83
  );
84
+ expect( console ).toHaveWarnedWith( DEPRECATION_MESSAGE );
80
85
 
81
86
  const event = { type: 'resize' };
82
87
 
@@ -15,7 +15,7 @@ import { restoreFocus, copyToClipboard } from '../use-copy-to-clipboard';
15
15
  * timeout.
16
16
  */
17
17
  export default function useCopyOnClick(
18
- ref: RefObject< string | Element | NodeListOf< Element > >,
18
+ ref: RefObject< string | Element | NodeListOf< Element > | null >,
19
19
  text: string | ( () => string ),
20
20
  timeout: number = 4000
21
21
  ): boolean {
@@ -111,6 +111,7 @@ describe( 'useCopyOnClick', () => {
111
111
  } );
112
112
 
113
113
  it( 'should not update hasCopied after unmount', async () => {
114
+ const user = userEvent.setup();
114
115
  const renderSpy = vi.fn();
115
116
 
116
117
  const SpyComponent = ( { text }: { text: string } ) => {
@@ -132,7 +133,6 @@ describe( 'useCopyOnClick', () => {
132
133
  delayedPromise as Promise< void >
133
134
  );
134
135
 
135
- const user = userEvent.setup();
136
136
  const { unmount } = render( <SpyComponent text="test" /> );
137
137
 
138
138
  expect( renderSpy ).toHaveBeenLastCalledWith( false );
@@ -63,6 +63,7 @@ describe( 'useCopyToClipboard', () => {
63
63
  } );
64
64
 
65
65
  it( 'should call onSuccess after the node unmounts', async () => {
66
+ const user = userEvent.setup();
66
67
  let resolvePromise: () => void;
67
68
  const delayedPromise = new Promise< void >( ( resolve ) => {
68
69
  resolvePromise = resolve;
@@ -71,7 +72,6 @@ describe( 'useCopyToClipboard', () => {
71
72
  delayedPromise
72
73
  );
73
74
 
74
- const user = userEvent.setup();
75
75
  const onSuccess = vi.fn();
76
76
  const { unmount } = render(
77
77
  <TestComponent text="test" onSuccess={ onSuccess } />
@@ -89,6 +89,7 @@ describe( 'useCopyToClipboard', () => {
89
89
  } );
90
90
 
91
91
  it( 'should not restore focus after the node unmounts', async () => {
92
+ const user = userEvent.setup();
92
93
  let resolvePromise: () => void;
93
94
  const delayedPromise = new Promise< void >( ( resolve ) => {
94
95
  resolvePromise = resolve;
@@ -97,7 +98,6 @@ describe( 'useCopyToClipboard', () => {
97
98
  delayedPromise
98
99
  );
99
100
 
100
- const user = userEvent.setup();
101
101
  const { unmount } = render( <TestComponent text="test" /> );
102
102
 
103
103
  const button = screen.getByRole( 'button' );
@@ -1,5 +1,4 @@
1
- import { useMemoOne } from 'use-memo-one';
2
- import { useEffect } from '@wordpress/element';
1
+ import { useEffect, useMemo } from '@wordpress/element';
3
2
  import { debounce } from '../../utils/debounce';
4
3
  import type { DebounceOptions, DebouncedFunc } from '../../utils/debounce';
5
4
 
@@ -23,8 +22,10 @@ export default function useDebounce< TFunc extends ( ...args: any[] ) => void >(
23
22
  wait?: number,
24
23
  options?: DebounceOptions
25
24
  ): DebouncedFunc< TFunc > {
26
- const debounced = useMemoOne(
25
+ const debounced = useMemo(
27
26
  () => debounce( fn, wait ?? 0, options ),
27
+ // Depends on the individual options rather than the `options` object.
28
+ // eslint-disable-next-line react-hooks/exhaustive-deps
28
29
  [ fn, wait, options?.leading, options?.trailing, options?.maxWait ]
29
30
  );
30
31
  useEffect( () => () => debounced.cancel(), [ debounced ] );
@@ -50,7 +50,7 @@ export default function useDisabled( {
50
50
  if ( ! ( child instanceof defaultView.HTMLElement ) ) {
51
51
  return;
52
52
  }
53
- if ( ! child.getAttribute( 'inert' ) ) {
53
+ if ( ! child.hasAttribute( 'inert' ) ) {
54
54
  child.setAttribute( 'inert', 'true' );
55
55
  updates.push( () => {
56
56
  child.removeAttribute( 'inert' );
@@ -27,9 +27,9 @@ describe( 'useDisabled', () => {
27
27
  const link = screen.getByRole( 'link' );
28
28
  const p = screen.getByRole( 'document' );
29
29
 
30
- expect( input ).toHaveAttribute( 'inert', 'true' );
31
- expect( link ).toHaveAttribute( 'inert', 'true' );
32
- expect( p ).toHaveAttribute( 'inert', 'true' );
30
+ expect( input ).toHaveAttribute( 'inert' );
31
+ expect( link ).toHaveAttribute( 'inert' );
32
+ expect( p ).toHaveAttribute( 'inert' );
33
33
  } );
34
34
 
35
35
  it( 'will disable an element rendered in an update to the component', async () => {
@@ -42,7 +42,7 @@ describe( 'useDisabled', () => {
42
42
 
43
43
  const button = screen.getByText( 'Button' );
44
44
  await waitFor( () => {
45
- expect( button ).toHaveAttribute( 'inert', 'true' );
45
+ expect( button ).toHaveAttribute( 'inert' );
46
46
  } );
47
47
  } );
48
48
  } );
@@ -34,10 +34,10 @@ export default function useDragging( {
34
34
  }, [] );
35
35
 
36
36
  const endDrag = useCallback(
37
- function endDrag( event?: MouseEvent ): void {
37
+ function handleEndDrag( event?: MouseEvent ): void {
38
38
  eventsRef.current.onDragEnd?.( event );
39
39
  document.removeEventListener( 'mousemove', onMouseMove );
40
- document.removeEventListener( 'mouseup', endDrag );
40
+ document.removeEventListener( 'mouseup', handleEndDrag );
41
41
  setIsDragging( false );
42
42
  },
43
43
  [ onMouseMove ]
@@ -21,7 +21,7 @@ type KeyboardShortcutConfig = {
21
21
  /**
22
22
  * React reference to the DOM element used to catch the keyboard event.
23
23
  */
24
- target: RefObject< HTMLElement >;
24
+ target: RefObject< HTMLElement | null >;
25
25
  };
26
26
 
27
27
  /**
@@ -1,5 +1,5 @@
1
1
  import { useRef, useCallback, useLayoutEffect } from '@wordpress/element';
2
- import type { MutableRefObject, Ref, RefCallback } from 'react';
2
+ import type { Ref, RefCallback } from 'react';
3
3
 
4
4
  // Returns a cleanup function if the ref callback returned one (React 19 ref
5
5
  // callback cleanup pattern), otherwise `undefined`. Object refs never have a
@@ -9,7 +9,7 @@ function assignRef< T >( ref: Ref< T >, value: T ): ( () => void ) | undefined {
9
9
  const returned = ref( value );
10
10
  return typeof returned === 'function' ? returned : undefined;
11
11
  } else if ( ref && ref.hasOwnProperty( 'current' ) ) {
12
- ( ref as MutableRefObject< T > ).current = value;
12
+ ref.current = value;
13
13
  }
14
14
  return undefined;
15
15
  }
@@ -12,7 +12,7 @@ export function useResizeObserver< T extends HTMLElement >(
12
12
  ): ( element?: T | null ) => void {
13
13
  const callbackEvent = useEvent( callback );
14
14
 
15
- const observedElementRef = useRef< T | null >( null );
15
+ const observedElementRef = useRef< T >( null );
16
16
  const resizeObserverRef = useRef< ResizeObserver >( undefined );
17
17
  useEffect( () => {
18
18
  if ( observedElementRef.current ) {
@@ -1,5 +1,4 @@
1
- import { useMemoOne } from 'use-memo-one';
2
- import { useEffect } from '@wordpress/element';
1
+ import { useEffect, useMemo } from '@wordpress/element';
3
2
  import { throttle } from '../../utils/throttle';
4
3
  import type { ThrottleOptions } from '../../utils/throttle';
5
4
  import type { DebouncedFunc } from '../../utils/debounce';
@@ -24,7 +23,7 @@ export default function useThrottle< TFunc extends ( ...args: any[] ) => void >(
24
23
  wait?: number,
25
24
  options?: ThrottleOptions
26
25
  ): DebouncedFunc< TFunc > {
27
- const throttled = useMemoOne(
26
+ const throttled = useMemo(
28
27
  () => throttle( fn, wait ?? 0, options ),
29
28
  [ fn, wait, options ]
30
29
  );