@wordpress/compose 8.1.0 → 8.1.2-next.v.202606191442.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (148) hide show
  1. package/CHANGELOG.md +20 -1
  2. package/README.md +46 -42
  3. package/build/higher-order/pure/index.cjs +15 -0
  4. package/build/higher-order/pure/index.cjs.map +3 -3
  5. package/build/hooks/use-constrained-tabbing/index.cjs +3 -9
  6. package/build/hooks/use-constrained-tabbing/index.cjs.map +3 -3
  7. package/build/hooks/use-debounce/index.cjs +1 -1
  8. package/build/hooks/use-debounce/index.cjs.map +3 -3
  9. package/build/hooks/use-disabled/index.cjs.map +2 -2
  10. package/build/hooks/use-dragging/index.cjs +27 -22
  11. package/build/hooks/use-dragging/index.cjs.map +4 -4
  12. package/build/hooks/use-dragging/types.cjs +19 -0
  13. package/build/hooks/use-dragging/types.cjs.map +7 -0
  14. package/build/hooks/use-drop-zone/index.cjs +2 -5
  15. package/build/hooks/use-drop-zone/index.cjs.map +3 -3
  16. package/build/hooks/use-drop-zone/types.cjs +19 -0
  17. package/build/hooks/use-drop-zone/types.cjs.map +7 -0
  18. package/build/hooks/use-fixed-window-list/index.cjs +10 -8
  19. package/build/hooks/use-fixed-window-list/index.cjs.map +3 -3
  20. package/build/hooks/use-focus-return/index.cjs +12 -9
  21. package/build/hooks/use-focus-return/index.cjs.map +3 -3
  22. package/build/hooks/use-isomorphic-layout-effect/index.cjs +1 -1
  23. package/build/hooks/use-isomorphic-layout-effect/index.cjs.map +1 -1
  24. package/build/hooks/use-keyboard-shortcut/index.cjs +1 -4
  25. package/build/hooks/use-keyboard-shortcut/index.cjs.map +3 -3
  26. package/build/hooks/use-media-query/index.cjs +2 -2
  27. package/build/hooks/use-media-query/index.cjs.map +2 -2
  28. package/build/hooks/use-merge-refs/index.cjs +28 -8
  29. package/build/hooks/use-merge-refs/index.cjs.map +2 -2
  30. package/build/hooks/use-reduced-motion/index.cjs +1 -1
  31. package/build/hooks/use-reduced-motion/index.cjs.map +2 -2
  32. package/build/hooks/use-throttle/index.cjs +1 -1
  33. package/build/hooks/use-throttle/index.cjs.map +3 -3
  34. package/build/hooks/use-viewport-match/index.cjs +3 -6
  35. package/build/hooks/use-viewport-match/index.cjs.map +3 -3
  36. package/build/hooks/use-warn-on-change/index.cjs +3 -10
  37. package/build/hooks/use-warn-on-change/index.cjs.map +3 -3
  38. package/build/utils/subscribe-delegated-listener/index.cjs.map +1 -1
  39. package/build-module/higher-order/pure/index.mjs +5 -0
  40. package/build-module/higher-order/pure/index.mjs.map +2 -2
  41. package/build-module/hooks/use-constrained-tabbing/index.mjs +3 -9
  42. package/build-module/hooks/use-constrained-tabbing/index.mjs.map +3 -3
  43. package/build-module/hooks/use-debounce/index.mjs +1 -1
  44. package/build-module/hooks/use-debounce/index.mjs.map +3 -3
  45. package/build-module/hooks/use-disabled/index.mjs.map +2 -2
  46. package/build-module/hooks/use-dragging/index.mjs +27 -22
  47. package/build-module/hooks/use-dragging/index.mjs.map +4 -4
  48. package/build-module/hooks/use-dragging/types.mjs +1 -0
  49. package/build-module/hooks/use-dragging/types.mjs.map +7 -0
  50. package/build-module/hooks/use-drop-zone/index.mjs +2 -5
  51. package/build-module/hooks/use-drop-zone/index.mjs.map +3 -3
  52. package/build-module/hooks/use-drop-zone/types.mjs +1 -0
  53. package/build-module/hooks/use-drop-zone/types.mjs.map +7 -0
  54. package/build-module/hooks/use-fixed-window-list/index.mjs +10 -8
  55. package/build-module/hooks/use-fixed-window-list/index.mjs.map +3 -3
  56. package/build-module/hooks/use-focus-return/index.mjs +12 -9
  57. package/build-module/hooks/use-focus-return/index.mjs.map +3 -3
  58. package/build-module/hooks/use-isomorphic-layout-effect/index.mjs +1 -1
  59. package/build-module/hooks/use-isomorphic-layout-effect/index.mjs.map +1 -1
  60. package/build-module/hooks/use-keyboard-shortcut/index.mjs +1 -4
  61. package/build-module/hooks/use-keyboard-shortcut/index.mjs.map +3 -3
  62. package/build-module/hooks/use-media-query/index.mjs +2 -2
  63. package/build-module/hooks/use-media-query/index.mjs.map +2 -2
  64. package/build-module/hooks/use-merge-refs/index.mjs +28 -8
  65. package/build-module/hooks/use-merge-refs/index.mjs.map +2 -2
  66. package/build-module/hooks/use-reduced-motion/index.mjs +1 -1
  67. package/build-module/hooks/use-reduced-motion/index.mjs.map +2 -2
  68. package/build-module/hooks/use-throttle/index.mjs +1 -1
  69. package/build-module/hooks/use-throttle/index.mjs.map +3 -3
  70. package/build-module/hooks/use-viewport-match/index.mjs +3 -6
  71. package/build-module/hooks/use-viewport-match/index.mjs.map +3 -3
  72. package/build-module/hooks/use-warn-on-change/index.mjs +3 -10
  73. package/build-module/hooks/use-warn-on-change/index.mjs.map +3 -3
  74. package/build-module/utils/subscribe-delegated-listener/index.mjs.map +1 -1
  75. package/build-types/higher-order/pure/index.d.ts.map +1 -1
  76. package/build-types/hooks/use-constrained-tabbing/index.d.ts +2 -2
  77. package/build-types/hooks/use-constrained-tabbing/index.d.ts.map +1 -1
  78. package/build-types/hooks/use-debounce/index.d.ts +7 -6
  79. package/build-types/hooks/use-debounce/index.d.ts.map +1 -1
  80. package/build-types/hooks/use-disabled/index.d.ts +1 -1
  81. package/build-types/hooks/use-disabled/index.d.ts.map +1 -1
  82. package/build-types/hooks/use-dragging/index.d.ts +9 -13
  83. package/build-types/hooks/use-dragging/index.d.ts.map +1 -1
  84. package/build-types/hooks/use-dragging/types.d.ts +11 -0
  85. package/build-types/hooks/use-dragging/types.d.ts.map +1 -0
  86. package/build-types/hooks/use-drop-zone/index.d.ts +4 -21
  87. package/build-types/hooks/use-drop-zone/index.d.ts.map +1 -1
  88. package/build-types/hooks/use-drop-zone/types.d.ts +35 -0
  89. package/build-types/hooks/use-drop-zone/types.d.ts.map +1 -0
  90. package/build-types/hooks/use-fixed-window-list/index.d.ts +22 -26
  91. package/build-types/hooks/use-fixed-window-list/index.d.ts.map +1 -1
  92. package/build-types/hooks/use-focus-return/index.d.ts +3 -3
  93. package/build-types/hooks/use-focus-return/index.d.ts.map +1 -1
  94. package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map +1 -1
  95. package/build-types/hooks/use-keyboard-shortcut/index.d.ts +29 -23
  96. package/build-types/hooks/use-keyboard-shortcut/index.d.ts.map +1 -1
  97. package/build-types/hooks/use-media-query/index.d.ts +1 -1
  98. package/build-types/hooks/use-media-query/index.d.ts.map +1 -1
  99. package/build-types/hooks/use-merge-refs/index.d.ts +7 -5
  100. package/build-types/hooks/use-merge-refs/index.d.ts.map +1 -1
  101. package/build-types/hooks/use-reduced-motion/index.d.ts +1 -1
  102. package/build-types/hooks/use-reduced-motion/index.d.ts.map +1 -1
  103. package/build-types/hooks/use-throttle/index.d.ts +8 -6
  104. package/build-types/hooks/use-throttle/index.d.ts.map +1 -1
  105. package/build-types/hooks/use-viewport-match/index.d.ts +3 -3
  106. package/build-types/hooks/use-viewport-match/index.d.ts.map +1 -1
  107. package/build-types/hooks/use-warn-on-change/index.d.ts +7 -7
  108. package/build-types/hooks/use-warn-on-change/index.d.ts.map +1 -1
  109. package/package.json +21 -12
  110. package/src/higher-order/pure/index.tsx +6 -0
  111. package/src/higher-order/pure/test/index.js +14 -81
  112. package/src/hooks/use-constrained-tabbing/{index.js → index.ts} +7 -11
  113. package/src/hooks/use-debounce/{index.js → index.ts} +11 -6
  114. package/src/hooks/use-disabled/index.ts +3 -1
  115. package/src/hooks/use-dragging/index.ts +78 -0
  116. package/src/hooks/use-dragging/types.ts +11 -0
  117. package/src/hooks/use-drop-zone/README.md +1 -1
  118. package/src/hooks/use-drop-zone/{index.js → index.ts} +17 -31
  119. package/src/hooks/use-drop-zone/types.ts +34 -0
  120. package/src/hooks/use-fixed-window-list/{index.js → index.ts} +46 -37
  121. package/src/hooks/use-focus-return/{index.js → index.ts} +26 -21
  122. package/src/hooks/use-keyboard-shortcut/{index.js → index.ts} +43 -28
  123. package/src/hooks/use-media-query/index.ts +10 -3
  124. package/src/hooks/use-media-query/test/ssr.js +47 -0
  125. package/src/hooks/use-merge-refs/index.ts +49 -18
  126. package/src/hooks/use-merge-refs/test/index.js +288 -0
  127. package/src/hooks/use-reduced-motion/{index.js → index.ts} +2 -2
  128. package/src/hooks/use-throttle/{index.js → index.ts} +12 -6
  129. package/src/hooks/use-viewport-match/{index.js → index.ts} +33 -26
  130. package/src/hooks/use-warn-on-change/index.ts +42 -0
  131. package/src/higher-order/with-network-connectivity/README.md +0 -20
  132. package/src/higher-order/with-network-connectivity/index.native.js +0 -19
  133. package/src/higher-order/with-preferred-color-scheme/index.native.js +0 -40
  134. package/src/hooks/use-constrained-tabbing/index.native.js +0 -14
  135. package/src/hooks/use-dragging/index.js +0 -74
  136. package/src/hooks/use-focus-outside/index.native.js +0 -170
  137. package/src/hooks/use-keyboard-shortcut/index.native.js +0 -2
  138. package/src/hooks/use-network-connectivity/index.native.js +0 -59
  139. package/src/hooks/use-network-connectivity/test/index.native.js +0 -87
  140. package/src/hooks/use-preferred-color-scheme/index.android.js +0 -30
  141. package/src/hooks/use-preferred-color-scheme/index.ios.js +0 -13
  142. package/src/hooks/use-preferred-color-scheme-style/index.native.js +0 -33
  143. package/src/hooks/use-resize-observer/index.native.js +0 -1
  144. package/src/hooks/use-resize-observer/legacy/index.native.js +0 -59
  145. package/src/hooks/use-resize-observer/legacy/test/index.native.js +0 -46
  146. package/src/hooks/use-warn-on-change/index.js +0 -43
  147. package/src/index.native.js +0 -44
  148. /package/src/hooks/use-isomorphic-layout-effect/{index.js → index.ts} +0 -0
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/hooks/use-keyboard-shortcut/index.js"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect, useRef } from '@wordpress/element';\nimport { isAppleOS } from '@wordpress/keycodes';\n\n/**\n * A block selection object.\n *\n * @typedef {Object} WPKeyboardShortcutConfig\n *\n * @property {boolean} [bindGlobal] Handle keyboard events anywhere including inside textarea/input fields.\n * @property {string} [eventName] Event name used to trigger the handler, defaults to keydown.\n * @property {boolean} [isDisabled] Disables the keyboard handler if the value is true.\n * @property {React.RefObject<HTMLElement | null>} [target] React reference to the DOM element used to catch the keyboard event.\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 {string[]|string} shortcuts Keyboard Shortcuts.\n * @param {(e: Mousetrap.ExtendedKeyboardEvent, combo: string) => void} callback Shortcut callback.\n * @param {WPKeyboardShortcutConfig} options Shortcut options.\n */\nfunction useKeyboardShortcut(\n\tshortcuts,\n\tcallback,\n\t{\n\t\tbindGlobal = false,\n\t\teventName = 'keydown',\n\t\tisDisabled = false, // This is important for performance considerations.\n\t\ttarget,\n\t} = {}\n) {\n\tconst currentCallbackRef = useRef( callback );\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\t\tconst mousetrap = new Mousetrap(\n\t\t\ttarget && target.current\n\t\t\t\t? target.current\n\t\t\t\t: // We were passing `document` here previously, so to successfully cast it to Element we must cast it first to `unknown`.\n\t\t\t\t // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t /** @type {Element} */ ( /** @type {unknown} */ ( document ) )\n\t\t);\n\t\tconst shortcutsArray = Array.isArray( shortcuts )\n\t\t\t? shortcuts\n\t\t\t: [ shortcuts ];\n\t\tshortcutsArray.forEach( ( shortcut ) => {\n\t\t\tconst keys = shortcut.split( '+' );\n\t\t\t// Determines whether a key is a modifier by the length of the string.\n\t\t\t// E.g. if I add a pass a shortcut Shift+Cmd+M, it'll determine that\n\t\t\t// the modifiers are Shift and Cmd because they're not a single character.\n\t\t\tconst modifiers = new Set(\n\t\t\t\tkeys.filter( ( value ) => value.length > 1 )\n\t\t\t);\n\t\t\tconst hasAlt = modifiers.has( 'alt' );\n\t\t\tconst hasShift = modifiers.has( 'shift' );\n\n\t\t\t// This should be better moved to the shortcut registration instead.\n\t\t\tif (\n\t\t\t\tisAppleOS() &&\n\t\t\t\t( ( modifiers.size === 1 && hasAlt ) ||\n\t\t\t\t\t( modifiers.size === 2 && hasAlt && hasShift ) )\n\t\t\t) {\n\t\t\t\tthrow new Error(\n\t\t\t\t\t`Cannot bind ${ shortcut }. Alt and Shift+Alt modifiers are reserved for character input.`\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst bindFn = bindGlobal ? 'bindGlobal' : 'bind';\n\t\t\t// @ts-ignore `bindGlobal` is an undocumented property\n\t\t\tmousetrap[ bindFn ](\n\t\t\t\tshortcut,\n\t\t\t\t(\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) => currentCallbackRef.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
- "mappings": ";AAGA,OAAO,eAAe;AACtB,OAAO;AAKP,SAAS,WAAW,cAAc;AAClC,SAAS,iBAAiB;AAsB1B,SAAS,oBACR,WACA,UACA;AAAA,EACC,aAAa;AAAA,EACb,YAAY;AAAA,EACZ,aAAa;AAAA;AAAA,EACb;AACD,IAAI,CAAC,GACJ;AACD,QAAM,qBAAqB,OAAQ,QAAS;AAC5C,YAAW,MAAM;AAChB,uBAAmB,UAAU;AAAA,EAC9B,GAAG,CAAE,QAAS,CAAE;AAEhB,YAAW,MAAM;AAChB,QAAK,YAAa;AACjB;AAAA,IACD;AACA,UAAM,YAAY,IAAI;AAAA,MACrB,UAAU,OAAO,UACd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAI2C;AAAA;AAAA,IACtD;AACA,UAAM,iBAAiB,MAAM,QAAS,SAAU,IAC7C,YACA,CAAE,SAAU;AACf,mBAAe,QAAS,CAAE,aAAc;AACvC,YAAM,OAAO,SAAS,MAAO,GAAI;AAIjC,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;AAGxC,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;AAE3C,gBAAW,MAAO;AAAA,QACjB;AAAA,QACA,IACiF,SAC5E,mBAAmB,QAAS,GAAG,IAAK;AAAA,QACzC;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;",
3
+ "sources": ["../../../src/hooks/use-keyboard-shortcut/index.ts"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind.js';\nimport type { ExtendedKeyboardEvent } from 'mousetrap';\n\n/**\n * WordPress dependencies\n */\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 // Not sure if this is a mistake but it was the behavior previous to the addition of types so we're just doing what's\n\t\t\t\t // necessary to maintain the existing behavior.\n\t\t\t\t ( 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
+ "mappings": ";AAGA,OAAO,eAAe;AACtB,OAAO;AAOP,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,QAIL;AAAA;AAAA,IACN;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
  }
@@ -7,7 +7,7 @@ var EMPTY_SUBSCRIBER = {
7
7
  getValue: () => false
8
8
  };
9
9
  function getMQLSubscriber(view, query) {
10
- if (!query || typeof view?.matchMedia !== "function") {
10
+ if (!view || !query || typeof view.matchMedia !== "function") {
11
11
  return EMPTY_SUBSCRIBER;
12
12
  }
13
13
  let queryCache = perWindowCache.get(view);
@@ -46,7 +46,7 @@ function getMQLSubscriber(view, query) {
46
46
  queryCache.set(query, subscriber);
47
47
  return subscriber;
48
48
  }
49
- function useMediaQuery(query, view = window) {
49
+ function useMediaQuery(query, view = typeof window !== "undefined" ? window : void 0) {
50
50
  const source = getMQLSubscriber(view, query);
51
51
  return useSyncExternalStore(
52
52
  source.subscribe,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-media-query/index.ts"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSyncExternalStore } from '@wordpress/element';\n\ntype MQLSubscriber = {\n\tsubscribe: ( onStoreChange: () => void ) => () => void;\n\tgetValue: () => boolean;\n};\n\n// One subscriber per (window, query). The underlying MediaQueryList lives\n// inside the subscriber's closure; a single `change` listener fans out to\n// every React consumer via an in-JS `Set` to avoid the per-consumer\n// `addEventListener` cost (~85 ms during a large-post editor mount).\nconst perWindowCache = new WeakMap< Window, Map< string, MQLSubscriber > >();\n\nconst EMPTY_SUBSCRIBER: MQLSubscriber = {\n\tsubscribe: () => () => {},\n\tgetValue: () => false,\n};\n\nfunction getMQLSubscriber( view: Window, query?: string ): MQLSubscriber {\n\tif ( ! query || typeof view?.matchMedia !== 'function' ) {\n\t\treturn EMPTY_SUBSCRIBER;\n\t}\n\n\tlet queryCache = perWindowCache.get( view );\n\tif ( ! queryCache ) {\n\t\tqueryCache = new Map();\n\t\tperWindowCache.set( view, queryCache );\n\t}\n\n\tconst cached = queryCache.get( query );\n\tif ( cached ) {\n\t\treturn cached;\n\t}\n\n\tconst mediaQueryList = view.matchMedia( query );\n\tconst listeners = new Set< () => void >();\n\tconst notify = () => {\n\t\tfor ( const listener of listeners ) {\n\t\t\tlistener();\n\t\t}\n\t};\n\n\tconst subscriber: MQLSubscriber = {\n\t\tsubscribe( onStoreChange ) {\n\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', notify );\n\t\t\t}\n\t\t\tlisteners.add( onStoreChange );\n\t\t\treturn () => {\n\t\t\t\tlisteners.delete( onStoreChange );\n\t\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t\tmediaQueryList.removeEventListener?.( 'change', notify );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\tgetValue() {\n\t\t\treturn mediaQueryList.matches;\n\t\t},\n\t};\n\n\tqueryCache.set( query, subscriber );\n\treturn subscriber;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param [query] Media Query.\n * @param [view] Window instance, else default to global window\n * @return return value of the media query.\n */\nexport default function useMediaQuery(\n\tquery?: string,\n\tview: Window = window\n): boolean {\n\tconst source = getMQLSubscriber( view, query );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],
5
- "mappings": ";AAGA,SAAS,4BAA4B;AAWrC,IAAM,iBAAiB,oBAAI,QAAgD;AAE3E,IAAM,mBAAkC;AAAA,EACvC,WAAW,MAAM,MAAM;AAAA,EAAC;AAAA,EACxB,UAAU,MAAM;AACjB;AAEA,SAAS,iBAAkB,MAAc,OAAgC;AACxE,MAAK,CAAE,SAAS,OAAO,MAAM,eAAe,YAAa;AACxD,WAAO;AAAA,EACR;AAEA,MAAI,aAAa,eAAe,IAAK,IAAK;AAC1C,MAAK,CAAE,YAAa;AACnB,iBAAa,oBAAI,IAAI;AACrB,mBAAe,IAAK,MAAM,UAAW;AAAA,EACtC;AAEA,QAAM,SAAS,WAAW,IAAK,KAAM;AACrC,MAAK,QAAS;AACb,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,KAAK,WAAY,KAAM;AAC9C,QAAM,YAAY,oBAAI,IAAkB;AACxC,QAAM,SAAS,MAAM;AACpB,eAAY,YAAY,WAAY;AACnC,eAAS;AAAA,IACV;AAAA,EACD;AAEA,QAAM,aAA4B;AAAA,IACjC,UAAW,eAAgB;AAC1B,UAAK,UAAU,SAAS,GAAI;AAE3B,uBAAe,mBAAoB,UAAU,MAAO;AAAA,MACrD;AACA,gBAAU,IAAK,aAAc;AAC7B,aAAO,MAAM;AACZ,kBAAU,OAAQ,aAAc;AAChC,YAAK,UAAU,SAAS,GAAI;AAC3B,yBAAe,sBAAuB,UAAU,MAAO;AAAA,QACxD;AAAA,MACD;AAAA,IACD;AAAA,IACA,WAAW;AACV,aAAO,eAAe;AAAA,IACvB;AAAA,EACD;AAEA,aAAW,IAAK,OAAO,UAAW;AAClC,SAAO;AACR;AASe,SAAR,cACN,OACA,OAAe,QACL;AACV,QAAM,SAAS,iBAAkB,MAAM,KAAM;AAE7C,SAAO;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useSyncExternalStore } from '@wordpress/element';\n\ntype MQLSubscriber = {\n\tsubscribe: ( onStoreChange: () => void ) => () => void;\n\tgetValue: () => boolean;\n};\n\n// One subscriber per (window, query). The underlying MediaQueryList lives\n// inside the subscriber's closure; a single `change` listener fans out to\n// every React consumer via an in-JS `Set` to avoid the per-consumer\n// `addEventListener` cost (~85 ms during a large-post editor mount).\nconst perWindowCache = new WeakMap< Window, Map< string, MQLSubscriber > >();\n\nconst EMPTY_SUBSCRIBER: MQLSubscriber = {\n\tsubscribe: () => () => {},\n\tgetValue: () => false,\n};\n\nfunction getMQLSubscriber(\n\tview: Window | undefined,\n\tquery?: string\n): MQLSubscriber {\n\tif ( ! view || ! query || typeof view.matchMedia !== 'function' ) {\n\t\treturn EMPTY_SUBSCRIBER;\n\t}\n\n\tlet queryCache = perWindowCache.get( view );\n\tif ( ! queryCache ) {\n\t\tqueryCache = new Map();\n\t\tperWindowCache.set( view, queryCache );\n\t}\n\n\tconst cached = queryCache.get( query );\n\tif ( cached ) {\n\t\treturn cached;\n\t}\n\n\tconst mediaQueryList = view.matchMedia( query );\n\tconst listeners = new Set< () => void >();\n\tconst notify = () => {\n\t\tfor ( const listener of listeners ) {\n\t\t\tlistener();\n\t\t}\n\t};\n\n\tconst subscriber: MQLSubscriber = {\n\t\tsubscribe( onStoreChange ) {\n\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', notify );\n\t\t\t}\n\t\t\tlisteners.add( onStoreChange );\n\t\t\treturn () => {\n\t\t\t\tlisteners.delete( onStoreChange );\n\t\t\t\tif ( listeners.size === 0 ) {\n\t\t\t\t\tmediaQueryList.removeEventListener?.( 'change', notify );\n\t\t\t\t}\n\t\t\t};\n\t\t},\n\t\tgetValue() {\n\t\t\treturn mediaQueryList.matches;\n\t\t},\n\t};\n\n\tqueryCache.set( query, subscriber );\n\treturn subscriber;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param [query] Media Query.\n * @param [view] Window instance, else default to global window\n * @return return value of the media query.\n */\nexport default function useMediaQuery(\n\tquery?: string,\n\t// Resolve the default lazily so SSR (where `window` is undeclared) does not\n\t// throw a ReferenceError when this default expression is evaluated.\n\tview: Window | undefined = typeof window !== 'undefined'\n\t\t? window\n\t\t: undefined\n): boolean {\n\tconst source = getMQLSubscriber( view, query );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],
5
+ "mappings": ";AAGA,SAAS,4BAA4B;AAWrC,IAAM,iBAAiB,oBAAI,QAAgD;AAE3E,IAAM,mBAAkC;AAAA,EACvC,WAAW,MAAM,MAAM;AAAA,EAAC;AAAA,EACxB,UAAU,MAAM;AACjB;AAEA,SAAS,iBACR,MACA,OACgB;AAChB,MAAK,CAAE,QAAQ,CAAE,SAAS,OAAO,KAAK,eAAe,YAAa;AACjE,WAAO;AAAA,EACR;AAEA,MAAI,aAAa,eAAe,IAAK,IAAK;AAC1C,MAAK,CAAE,YAAa;AACnB,iBAAa,oBAAI,IAAI;AACrB,mBAAe,IAAK,MAAM,UAAW;AAAA,EACtC;AAEA,QAAM,SAAS,WAAW,IAAK,KAAM;AACrC,MAAK,QAAS;AACb,WAAO;AAAA,EACR;AAEA,QAAM,iBAAiB,KAAK,WAAY,KAAM;AAC9C,QAAM,YAAY,oBAAI,IAAkB;AACxC,QAAM,SAAS,MAAM;AACpB,eAAY,YAAY,WAAY;AACnC,eAAS;AAAA,IACV;AAAA,EACD;AAEA,QAAM,aAA4B;AAAA,IACjC,UAAW,eAAgB;AAC1B,UAAK,UAAU,SAAS,GAAI;AAE3B,uBAAe,mBAAoB,UAAU,MAAO;AAAA,MACrD;AACA,gBAAU,IAAK,aAAc;AAC7B,aAAO,MAAM;AACZ,kBAAU,OAAQ,aAAc;AAChC,YAAK,UAAU,SAAS,GAAI;AAC3B,yBAAe,sBAAuB,UAAU,MAAO;AAAA,QACxD;AAAA,MACD;AAAA,IACD;AAAA,IACA,WAAW;AACV,aAAO,eAAe;AAAA,IACvB;AAAA,EACD;AAEA,aAAW,IAAK,OAAO,UAAW;AAClC,SAAO;AACR;AASe,SAAR,cACN,OAGA,OAA2B,OAAO,WAAW,cAC1C,SACA,QACO;AACV,QAAM,SAAS,iBAAkB,MAAM,KAAM;AAE7C,SAAO;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;",
6
6
  "names": []
7
7
  }
@@ -2,25 +2,40 @@
2
2
  import { useRef, useCallback, useLayoutEffect } from "@wordpress/element";
3
3
  function assignRef(ref, value) {
4
4
  if (typeof ref === "function") {
5
- ref(value);
5
+ const returned = ref(value);
6
+ return typeof returned === "function" ? returned : void 0;
6
7
  } else if (ref && ref.hasOwnProperty("current")) {
7
8
  ref.current = value;
8
9
  }
10
+ return void 0;
11
+ }
12
+ function detachRef(ref, index, cleanups) {
13
+ const cleanup = cleanups[index];
14
+ if (cleanup) {
15
+ cleanups[index] = void 0;
16
+ cleanup();
17
+ } else {
18
+ assignRef(ref, null);
19
+ }
9
20
  }
10
21
  function useMergeRefs(refs) {
11
- const element = useRef(null);
22
+ const elementRef = useRef(null);
12
23
  const isAttachedRef = useRef(false);
13
24
  const didElementChangeRef = useRef(false);
14
25
  const previousRefsRef = useRef([]);
15
26
  const currentRefsRef = useRef(refs);
27
+ const cleanupsRef = useRef([]);
16
28
  currentRefsRef.current = refs;
17
29
  useLayoutEffect(() => {
18
30
  if (didElementChangeRef.current === false && isAttachedRef.current === true) {
19
31
  refs.forEach((ref, index) => {
20
32
  const previousRef = previousRefsRef.current[index];
21
33
  if (ref !== previousRef) {
22
- assignRef(previousRef, null);
23
- assignRef(ref, element.current);
34
+ detachRef(previousRef, index, cleanupsRef.current);
35
+ cleanupsRef.current[index] = assignRef(
36
+ ref,
37
+ elementRef.current
38
+ );
24
39
  }
25
40
  });
26
41
  }
@@ -30,12 +45,17 @@ function useMergeRefs(refs) {
30
45
  didElementChangeRef.current = false;
31
46
  });
32
47
  return useCallback((value) => {
33
- assignRef(element, value);
48
+ elementRef.current = value;
34
49
  didElementChangeRef.current = true;
35
50
  isAttachedRef.current = value !== null;
36
- const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current;
37
- for (const ref of refsToAssign) {
38
- assignRef(ref, value);
51
+ if (value === null) {
52
+ previousRefsRef.current.forEach((ref, index) => {
53
+ detachRef(ref, index, cleanupsRef.current);
54
+ });
55
+ } else {
56
+ currentRefsRef.current.forEach((ref, index) => {
57
+ cleanupsRef.current[index] = assignRef(ref, value);
58
+ });
39
59
  }
40
60
  }, []);
41
61
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/hooks/use-merge-refs/index.ts"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useCallback, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, Ref, RefCallback } from 'react';\n\nfunction assignRef< T >( ref: Ref< T >, value: T ) {\n\tif ( typeof ref === 'function' ) {\n\t\tref( value );\n\t} else if ( ref && ref.hasOwnProperty( 'current' ) ) {\n\t\t( ref as MutableRefObject< T > ).current = value;\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 * To make ref callbacks easier to use, you can also pass the result of\n * `useRefEffect`, which makes cleanup easier by allowing you to return a\n * cleanup function instead of handling `null`.\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 = useRefEffect( ( 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 element = useRef( null );\n\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = useRef< Ref< T >[] >( [] );\n\tconst currentRefsRef = useRef( refs );\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 previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tassignRef( previousRef, null );\n\t\t\t\t\tassignRef( ref, element.current );\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\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\tassignRef( element, value );\n\n\t\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tconst refsToAssign = value\n\t\t\t? currentRefsRef.current\n\t\t\t: previousRefsRef.current;\n\n\t\t// Update the latest refs.\n\t\tfor ( const ref of refsToAssign ) {\n\t\t\tassignRef( ref, value );\n\t\t}\n\t}, [] );\n}\n"],
5
- "mappings": ";AAGA,SAAS,QAAQ,aAAa,uBAAuB;AAGrD,SAAS,UAAgB,KAAe,OAAW;AAClD,MAAK,OAAO,QAAQ,YAAa;AAChC,QAAK,KAAM;AAAA,EACZ,WAAY,OAAO,IAAI,eAAgB,SAAU,GAAI;AACpD,IAAE,IAA+B,UAAU;AAAA,EAC5C;AACD;AA2Ce,SAAR,aACN,MACmB;AACnB,QAAM,UAAU,OAAQ,IAAK;AAC7B,QAAM,gBAAgB,OAAQ,KAAM;AACpC,QAAM,sBAAsB,OAAQ,KAAM;AAC1C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,iBAAe,UAAU;AAKzB,kBAAiB,MAAM;AACtB,QACC,oBAAoB,YAAY,SAChC,cAAc,YAAY,MACzB;AACD,WAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,cAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,YAAK,QAAQ,aAAc;AAC1B,oBAAW,aAAa,IAAK;AAC7B,oBAAW,KAAK,QAAQ,OAAQ;AAAA,QACjC;AAAA,MACD,CAAE;AAAA,IACH;AAEA,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,kBAAiB,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAC/B,CAAE;AAIF,SAAO,YAAa,CAAE,UAAqB;AAG1C,cAAW,SAAS,KAAM;AAE1B,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,UAAM,eAAe,QAClB,eAAe,UACf,gBAAgB;AAGnB,eAAY,OAAO,cAAe;AACjC,gBAAW,KAAK,KAAM;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { 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\tconst isAttachedRef = useRef( false );\n\tconst didElementChangeRef = useRef( false );\n\tconst previousRefsRef = 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 previous ref with `null` and the new\n\t// ref with the node, except when the element changes in the same cycle, in\n\t// which case the ref callbacks will already have been called.\n\tuseLayoutEffect( () => {\n\t\tif (\n\t\t\tdidElementChangeRef.current === false &&\n\t\t\tisAttachedRef.current === true\n\t\t) {\n\t\t\trefs.forEach( ( ref, index ) => {\n\t\t\t\tconst previousRef = previousRefsRef.current[ index ];\n\t\t\t\tif ( ref !== previousRef ) {\n\t\t\t\t\tdetachRef( previousRef, index, cleanupsRef.current );\n\t\t\t\t\tcleanupsRef.current[ index ] = assignRef(\n\t\t\t\t\t\tref,\n\t\t\t\t\t\telementRef.current as T\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t} );\n\t\t}\n\n\t\tpreviousRefsRef.current = refs;\n\t}, refs );\n\n\t// No dependencies, must be reset after every render so ref callbacks are\n\t// correctly called after a ref change.\n\tuseLayoutEffect( () => {\n\t\tdidElementChangeRef.current = false;\n\t} );\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\tdidElementChangeRef.current = true;\n\t\tisAttachedRef.current = value !== null;\n\n\t\t// When an element changes, the current ref callback should be called\n\t\t// with the new element and the previous one with `null`.\n\t\tif ( value === null ) {\n\t\t\tpreviousRefsRef.current.forEach( ( ref, index ) => {\n\t\t\t\tdetachRef( ref, index, cleanupsRef.current );\n\t\t\t} );\n\t\t} else {\n\t\t\tcurrentRefsRef.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": ";AAGA,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;AAC5C,QAAM,gBAAgB,OAAQ,KAAM;AACpC,QAAM,sBAAsB,OAAQ,KAAM;AAC1C,QAAM,kBAAkB,OAAsB,CAAC,CAAE;AACjD,QAAM,iBAAiB,OAAQ,IAAK;AAIpC,QAAM,cAAc,OAA+C,CAAC,CAAE;AAItE,iBAAe,UAAU;AAKzB,kBAAiB,MAAM;AACtB,QACC,oBAAoB,YAAY,SAChC,cAAc,YAAY,MACzB;AACD,WAAK,QAAS,CAAE,KAAK,UAAW;AAC/B,cAAM,cAAc,gBAAgB,QAAS,KAAM;AACnD,YAAK,QAAQ,aAAc;AAC1B,oBAAW,aAAa,OAAO,YAAY,OAAQ;AACnD,sBAAY,QAAS,KAAM,IAAI;AAAA,YAC9B;AAAA,YACA,WAAW;AAAA,UACZ;AAAA,QACD;AAAA,MACD,CAAE;AAAA,IACH;AAEA,oBAAgB,UAAU;AAAA,EAC3B,GAAG,IAAK;AAIR,kBAAiB,MAAM;AACtB,wBAAoB,UAAU;AAAA,EAC/B,CAAE;AAIF,SAAO,YAAa,CAAE,UAAqB;AAG1C,eAAW,UAAU;AAErB,wBAAoB,UAAU;AAC9B,kBAAc,UAAU,UAAU;AAIlC,QAAK,UAAU,MAAO;AACrB,sBAAgB,QAAQ,QAAS,CAAE,KAAK,UAAW;AAClD,kBAAW,KAAK,OAAO,YAAY,OAAQ;AAAA,MAC5C,CAAE;AAAA,IACH,OAAO;AACN,qBAAe,QAAQ,QAAS,CAAE,KAAK,UAAW;AACjD,oBAAY,QAAS,KAAM,IAAI,UAAW,KAAK,KAAM;AAAA,MACtD,CAAE;AAAA,IACH;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
- // packages/compose/src/hooks/use-reduced-motion/index.js
1
+ // packages/compose/src/hooks/use-reduced-motion/index.ts
2
2
  import useMediaQuery from "../use-media-query/index.mjs";
3
3
  var useReducedMotion = () => useMediaQuery("(prefers-reduced-motion: reduce)");
4
4
  var use_reduced_motion_default = useReducedMotion;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/hooks/use-reduced-motion/index.js"],
4
- "sourcesContent": ["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return {boolean} Reduced motion preference value.\n */\nconst useReducedMotion = () =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],
3
+ "sources": ["../../../src/hooks/use-reduced-motion/index.ts"],
4
+ "sourcesContent": ["/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * Hook returning whether the user has a preference for reduced motion.\n *\n * @return Reduced motion preference value.\n */\nconst useReducedMotion = (): boolean =>\n\tuseMediaQuery( '(prefers-reduced-motion: reduce)' );\n\nexport default useReducedMotion;\n"],
5
5
  "mappings": ";AAGA,OAAO,mBAAmB;AAO1B,IAAM,mBAAmB,MACxB,cAAe,kCAAmC;AAEnD,IAAO,6BAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
- // packages/compose/src/hooks/use-throttle/index.js
1
+ // packages/compose/src/hooks/use-throttle/index.ts
2
2
  import { useMemoOne } from "use-memo-one";
3
3
  import { useEffect } from "@wordpress/element";
4
4
  import { throttle } from "../../utils/throttle/index.mjs";
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/hooks/use-throttle/index.js"],
4
- "sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { throttle } from '../../utils/throttle';\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 {(...args: any[]) => void} TFunc\n *\n * @param {TFunc} fn The function to throttle.\n * @param {number} [wait] The number of milliseconds to throttle invocations to.\n * @param {import('../../utils/throttle').ThrottleOptions} [options] The options object. See linked documentation for details.\n * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Throttled function.\n */\nexport default function useThrottle( fn, wait, options ) {\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": ";AAGA,SAAS,kBAAkB;AAK3B,SAAS,iBAAiB;AAK1B,SAAS,gBAAgB;AAiBV,SAAR,YAA8B,IAAI,MAAM,SAAU;AACxD,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;",
3
+ "sources": ["../../../src/hooks/use-throttle/index.ts"],
4
+ "sourcesContent": ["/**\n * External dependencies\n */\nimport { useMemoOne } from 'use-memo-one';\n\n/**\n * WordPress dependencies\n */\nimport { useEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport { 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": ";AAGA,SAAS,kBAAkB;AAK3B,SAAS,iBAAiB;AAK1B,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
  }
@@ -1,4 +1,4 @@
1
- // packages/compose/src/hooks/use-viewport-match/index.js
1
+ // packages/compose/src/hooks/use-viewport-match/index.ts
2
2
  import { createContext, useContext } from "@wordpress/element";
3
3
  import useMediaQuery from "../use-media-query/index.mjs";
4
4
  var BREAKPOINTS = {
@@ -19,12 +19,9 @@ var OPERATOR_EVALUATORS = {
19
19
  ">=": (breakpointValue, width) => width >= breakpointValue,
20
20
  "<": (breakpointValue, width) => width < breakpointValue
21
21
  };
22
- var ViewportMatchWidthContext = createContext(
23
- /** @type {null | number} */
24
- null
25
- );
22
+ var ViewportMatchWidthContext = createContext(null);
26
23
  ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
27
- var useViewportMatch = (breakpoint, operator = ">=", view = window) => {
24
+ var useViewportMatch = (breakpoint, operator = ">=", view = typeof window !== "undefined" ? window : void 0) => {
28
25
  const simulatedWidth = useContext(ViewportMatchWidthContext);
29
26
  const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
30
27
  const mediaQueryResult = useMediaQuery(mediaQuery || void 0, view);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/hooks/use-viewport-match/index.js"],
4
- "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\n/**\n * @typedef {\"xhuge\" | \"huge\" | \"wide\" | \"xlarge\" | \"large\" | \"medium\" | \"small\" | \"mobile\"} WPBreakpoint\n */\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n *\n * @type {Record<WPBreakpoint, number>}\n */\nconst BREAKPOINTS = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * @typedef {\">=\" | \"<\"} WPViewportOperator\n */\n\n/**\n * Object mapping media query operators to the condition to be used.\n *\n * @type {Record<WPViewportOperator, string>}\n */\nconst CONDITIONS = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that given a breakpointValue and a width evaluates if the operator matches the values.\n *\n * @type {Record<WPViewportOperator, (breakpointValue: number, width: number) => boolean>}\n */\nconst OPERATOR_EVALUATORS = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext(\n\t/** @type {null | number} */ ( null )\n);\nViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param {WPBreakpoint} breakpoint Breakpoint size name.\n * @param {WPViewportOperator} [operator=\">=\"] Viewport operator.\n * @param {Window} [view=window] Window instance in which to perform viewport matching.\n *\n * @example\n *\n * ```js\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return {boolean} Whether viewport matches query.\n */\nconst useViewportMatch = ( breakpoint, operator = '>=', view = window ) => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined, view );\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],
5
- "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AAK1C,OAAO,mBAAmB;AAa1B,IAAM,cAAc;AAAA,EACnB,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACT;AAWA,IAAM,aAAa;AAAA,EAClB,MAAM;AAAA,EACN,KAAK;AACN;AAOA,IAAM,sBAAsB;AAAA,EAC3B,MAAM,CAAE,iBAAiB,UAAW,SAAS;AAAA,EAC7C,KAAK,CAAE,iBAAiB,UAAW,QAAQ;AAC5C;AAEA,IAAM,4BAA4B;AAAA;AAAA,EACF;AAChC;AACA,0BAA0B,cAAc;AAkBxC,IAAM,mBAAmB,CAAE,YAAY,WAAW,MAAM,OAAO,WAAY;AAC1E,QAAM,iBAAiB,WAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,mBAAmB,cAAe,cAAc,QAAW,IAAK;AACtE,MAAK,gBAAiB;AACrB,WAAO,oBAAqB,QAAS;AAAA,MACpC,YAAa,UAAW;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,iBAAiB,8BAChB,0BAA0B;AAE3B,IAAO,6BAAQ;",
3
+ "sources": ["../../../src/hooks/use-viewport-match/index.ts"],
4
+ "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { createContext, useContext } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useMediaQuery from '../use-media-query';\n\ntype Breakpoint =\n\t| 'xhuge'\n\t| 'huge'\n\t| 'wide'\n\t| 'xlarge'\n\t| 'large'\n\t| 'medium'\n\t| 'small'\n\t| 'mobile';\ntype ViewportOperator = '>=' | '<';\n\n/**\n * Hash of breakpoint names with pixel width at which it becomes effective.\n *\n * @see _breakpoints.scss\n */\nconst BREAKPOINTS: Record< Breakpoint, number > = {\n\txhuge: 1920,\n\thuge: 1440,\n\twide: 1280,\n\txlarge: 1080,\n\tlarge: 960,\n\tmedium: 782,\n\tsmall: 600,\n\tmobile: 480,\n};\n\n/**\n * Object mapping media query operators to the condition to be used.\n */\nconst CONDITIONS: Record< ViewportOperator, string > = {\n\t'>=': 'min-width',\n\t'<': 'max-width',\n};\n\n/**\n * Object mapping media query operators to a function that evaluates if the operator matches.\n */\nconst OPERATOR_EVALUATORS: Record<\n\tViewportOperator,\n\t( breakpointValue: number, width: number ) => boolean\n> = {\n\t'>=': ( breakpointValue, width ) => width >= breakpointValue,\n\t'<': ( breakpointValue, width ) => width < breakpointValue,\n};\n\nconst ViewportMatchWidthContext = createContext< number | null >( null );\nViewportMatchWidthContext.displayName = 'ViewportMatchWidthContext';\n\n/**\n * Returns true if the viewport matches the given query, or false otherwise.\n *\n * @param breakpoint Breakpoint size name.\n * @param operator Viewport operator.\n * @param view Window instance in which to perform viewport matching.\n *\n * @example\n *\n * ```ts\n * useViewportMatch( 'huge', '<' );\n * useViewportMatch( 'medium' );\n * ```\n *\n * @return Whether viewport matches query.\n */\nconst useViewportMatch = (\n\tbreakpoint: Breakpoint,\n\toperator: ViewportOperator = '>=',\n\t// Resolve the default lazily so SSR (where `window` is undeclared) does not\n\t// throw a ReferenceError when this default expression is evaluated.\n\tview: Window | undefined = typeof window !== 'undefined'\n\t\t? window\n\t\t: undefined\n): boolean => {\n\tconst simulatedWidth = useContext( ViewportMatchWidthContext );\n\tconst mediaQuery =\n\t\t! simulatedWidth &&\n\t\t`(${ CONDITIONS[ operator ] }: ${ BREAKPOINTS[ breakpoint ] }px)`;\n\tconst mediaQueryResult = useMediaQuery( mediaQuery || undefined, view );\n\n\tif ( simulatedWidth ) {\n\t\treturn OPERATOR_EVALUATORS[ operator ](\n\t\t\tBREAKPOINTS[ breakpoint ],\n\t\t\tsimulatedWidth\n\t\t);\n\t}\n\treturn mediaQueryResult;\n};\n\nuseViewportMatch.__experimentalWidthProvider =\n\tViewportMatchWidthContext.Provider;\n\nexport default useViewportMatch;\n"],
5
+ "mappings": ";AAGA,SAAS,eAAe,kBAAkB;AAK1C,OAAO,mBAAmB;AAkB1B,IAAM,cAA4C;AAAA,EACjD,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AAAA,EACP,QAAQ;AACT;AAKA,IAAM,aAAiD;AAAA,EACtD,MAAM;AAAA,EACN,KAAK;AACN;AAKA,IAAM,sBAGF;AAAA,EACH,MAAM,CAAE,iBAAiB,UAAW,SAAS;AAAA,EAC7C,KAAK,CAAE,iBAAiB,UAAW,QAAQ;AAC5C;AAEA,IAAM,4BAA4B,cAAgC,IAAK;AACvE,0BAA0B,cAAc;AAkBxC,IAAM,mBAAmB,CACxB,YACA,WAA6B,MAG7B,OAA2B,OAAO,WAAW,cAC1C,SACA,WACU;AACb,QAAM,iBAAiB,WAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,mBAAmB,cAAe,cAAc,QAAW,IAAK;AAEtE,MAAK,gBAAiB;AACrB,WAAO,oBAAqB,QAAS;AAAA,MACpC,YAAa,UAAW;AAAA,MACxB;AAAA,IACD;AAAA,EACD;AACA,SAAO;AACR;AAEA,iBAAiB,8BAChB,0BAA0B;AAE3B,IAAO,6BAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,20 +1,13 @@
1
- // packages/compose/src/hooks/use-warn-on-change/index.js
1
+ // packages/compose/src/hooks/use-warn-on-change/index.ts
2
2
  import usePrevious from "../use-previous/index.mjs";
3
3
  function useWarnOnChange(object, prefix = "Change detection") {
4
4
  const previousValues = usePrevious(object);
5
5
  Object.entries(previousValues ?? []).forEach(([key, value]) => {
6
- if (value !== object[
7
- /** @type {keyof typeof object} */
8
- key
9
- ]) {
6
+ if (value !== object[key]) {
10
7
  console.warn(
11
8
  `${prefix}: ${key} key changed:`,
12
9
  value,
13
- object[
14
- /** @type {keyof typeof object} */
15
- key
16
- ]
17
- /* eslint-enable jsdoc/check-types */
10
+ object[key]
18
11
  );
19
12
  }
20
13
  });
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
- "sources": ["../../../src/hooks/use-warn-on-change/index.js"],
4
- "sourcesContent": ["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n// Disable reason: Object and object are distinctly different types in TypeScript and we mean the lowercase object in this case\n// but eslint wants to force us to use `Object`. See https://stackoverflow.com/questions/49464634/difference-between-object-and-object-in-typescript\n/* eslint-disable jsdoc/check-types */\n/**\n * Hook that performs a shallow comparison between the preview value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * this is useful in performance related work, to check why a component re-renders.\n *\n * @example\n *\n * ```jsx\n * function MyComponent(props) {\n * useWarnOnChange(props);\n *\n * return \"Something\";\n * }\n * ```\n *\n * @param {object} object Object which changes to compare.\n * @param {string} prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange( object, prefix = 'Change detection' ) {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ /** @type {keyof typeof object} */ ( key ) ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ /** @type {keyof typeof object} */ ( key ) ]\n\t\t\t\t/* eslint-enable jsdoc/check-types */\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"],
5
- "mappings": ";AAGA,OAAO,iBAAiB;AAuBxB,SAAS,gBAAiB,QAAQ,SAAS,oBAAqB;AAC/D,QAAM,iBAAiB,YAAa,MAAO;AAE3C,SAAO,QAAS,kBAAkB,CAAC,CAAE,EAAE,QAAS,CAAE,CAAE,KAAK,KAAM,MAAO;AACrE,QAAK,UAAU;AAAA;AAAA,MAA6C;AAAA,IAAM,GAAI;AAErE,cAAQ;AAAA,QACP,GAAI,MAAO,KAAM,GAAI;AAAA,QACrB;AAAA,QACA;AAAA;AAAA,UAA6C;AAAA,QAAM;AAAA;AAAA,MAEpD;AAAA,IACD;AAAA,EACD,CAAE;AACH;AAEA,IAAO,6BAAQ;",
3
+ "sources": ["../../../src/hooks/use-warn-on-change/index.ts"],
4
+ "sourcesContent": ["/**\n * Internal dependencies\n */\nimport usePrevious from '../use-previous';\n\n/**\n * Hook that performs a shallow comparison between the previous value of an object\n * and the new one, if there's a difference, it prints it to the console.\n * This is useful in performance related work, to check why a component re-renders.\n *\n * @example\n *\n * ```tsx\n * function MyComponent(props: Record<string, any>) {\n * useWarnOnChange(props);\n *\n * return \"Something\";\n * }\n * ```\n *\n * @param object Object which changes to compare.\n * @param prefix Just a prefix to show when console logging.\n */\nfunction useWarnOnChange(\n\tobject: Record< string, any > | any[],\n\tprefix: string = 'Change detection'\n): void {\n\tconst previousValues = usePrevious( object );\n\n\tObject.entries( previousValues ?? [] ).forEach( ( [ key, value ] ) => {\n\t\tif ( value !== object[ key as keyof typeof object ] ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`${ prefix }: ${ key } key changed:`,\n\t\t\t\tvalue,\n\t\t\t\tobject[ key as keyof typeof object ]\n\t\t\t);\n\t\t}\n\t} );\n}\n\nexport default useWarnOnChange;\n"],
5
+ "mappings": ";AAGA,OAAO,iBAAiB;AAoBxB,SAAS,gBACR,QACA,SAAiB,oBACV;AACP,QAAM,iBAAiB,YAAa,MAAO;AAE3C,SAAO,QAAS,kBAAkB,CAAC,CAAE,EAAE,QAAS,CAAE,CAAE,KAAK,KAAM,MAAO;AACrE,QAAK,UAAU,OAAQ,GAA2B,GAAI;AAErD,cAAQ;AAAA,QACP,GAAI,MAAO,KAAM,GAAI;AAAA,QACrB;AAAA,QACA,OAAQ,GAA2B;AAAA,MACpC;AAAA,IACD;AAAA,EACD,CAAE;AACH;AAEA,IAAO,6BAAQ;",
6
6
  "names": []
7
7
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../src/utils/subscribe-delegated-listener/index.ts"],
4
- "sourcesContent": ["/**\n * Adds a callback to a shared `addEventListener`. Only one underlying\n * native listener is attached per (root, event type, phase); subscribers\n * join an in-JS registry that dispatches events along the DOM ancestry\n * of `event.target`.\n *\n * The model mirrors React's synthetic event system: a single root\n * listener handles every event of a given type, and callbacks bound to\n * an `Element` only fire when that element is on the target's path.\n * Callbacks bound to a `Document` always fire (document is the root of\n * every event in that document); callbacks bound to a `Window` always\n * fire as a flat fan-out, since `window` isn't on the DOM tree.\n *\n * @param target `Element`, `Document`, or `Window` to bind the\n * callback to. For `Element`, the callback only fires\n * when the event happens on the element or a\n * descendant.\n * @param eventType DOM event name.\n * @param callback Listener to be invoked with the event.\n * @param capture Use the capture phase. Required when ancestor\n * listeners gate on `event.defaultPrevented`, since a\n * bubble-phase root listener fires after them. Defaults\n * to `false`.\n * @return Unsubscribe function.\n */\n// root -> eventTypeKey -> subscribedTarget -> Set<callback>\n//\n// Inner registry is a `WeakMap`: element subscribers are held weakly so\n// an iframe removal lets the iframe's Elements (and through them, its\n// `ownerDocument`) be garbage-collected. The native listener is\n// attached to the document itself, so it goes when the document goes.\nconst registries = new WeakMap<\n\tEventTarget,\n\tMap< string, WeakMap< EventTarget, Set< EventListener > > >\n>();\n\nexport default function subscribeDelegatedListener(\n\ttarget: EventTarget,\n\teventType: string,\n\tcallback: EventListener,\n\tcapture: boolean = false\n): () => void {\n\t// Where the native listener is attached:\n\t// Element \u2192 its `ownerDocument`\n\t// Document \u2192 itself (own `ownerDocument` is `null`)\n\t// Window \u2192 itself (no `ownerDocument` property)\n\t// `undefined` (Window) \u2192 use a fan-out branch on dispatch since\n\t// events bubble *to* window but never *from* it via `parentNode`.\n\tconst ownerDoc = ( target as Node ).ownerDocument;\n\tconst root = ownerDoc ?? target;\n\tconst isWindow = ownerDoc === undefined;\n\n\tlet perRoot = registries.get( root );\n\tif ( ! perRoot ) {\n\t\tperRoot = new Map();\n\t\tregistries.set( root, perRoot );\n\t}\n\tconst key = capture ? `${ eventType }:capture` : eventType;\n\tlet perEvent = perRoot.get( key );\n\tif ( ! perEvent ) {\n\t\tperEvent = new WeakMap< EventTarget, Set< EventListener > >();\n\t\tperRoot.set( key, perEvent );\n\t\tconst subscribers = perEvent;\n\t\troot.addEventListener(\n\t\t\teventType,\n\t\t\t( event ) => {\n\t\t\t\tif ( isWindow ) {\n\t\t\t\t\t// Window has no DOM ancestry \u2014 all subscribers share\n\t\t\t\t\t// the window key; fetch its set and fan out.\n\t\t\t\t\tconst set = subscribers.get( root );\n\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Walk the target \u2192 root ancestry, dispatching callbacks\n\t\t\t\t// for any node in the path. Bubble order matches the walk\n\t\t\t\t// direction, so dispatch inline (no path array). Capture\n\t\t\t\t// has to materialise the path to iterate in reverse.\n\t\t\t\tif ( capture ) {\n\t\t\t\t\tconst path: Array< Node | Document > = [];\n\t\t\t\t\tlet current: Node | null = event.target as Node | null;\n\t\t\t\t\twhile ( current ) {\n\t\t\t\t\t\tpath.push( current );\n\t\t\t\t\t\tif ( current === root ) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrent = current.parentNode;\n\t\t\t\t\t}\n\t\t\t\t\tfor ( let i = path.length - 1; i >= 0; i-- ) {\n\t\t\t\t\t\tconst set = subscribers.get( path[ i ] );\n\t\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tlet current: Node | null = event.target as Node | null;\n\t\t\t\t\twhile ( current ) {\n\t\t\t\t\t\tconst set = subscribers.get( current );\n\t\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( current === root ) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrent = current.parentNode;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tcapture\n\t\t);\n\t}\n\tlet set = perEvent.get( target );\n\tif ( ! set ) {\n\t\tset = new Set();\n\t\tperEvent.set( target, set );\n\t}\n\tset.add( callback );\n\treturn () => {\n\t\tset.delete( callback );\n\t};\n}\n"],
4
+ "sourcesContent": ["/**\n * Adds a callback to a shared `addEventListener`. Only one underlying\n * native listener is attached per (root, event type, phase); subscribers\n * join an in-JS registry that dispatches events along the DOM ancestry\n * of `event.target`.\n *\n * The model mirrors React's synthetic event system: a single root\n * listener handles every event of a given type, and callbacks bound to\n * an `Element` only fire when that element is on the target's path.\n * Callbacks bound to a `Document` always fire (document is the root of\n * every event in that document); callbacks bound to a `Window` always\n * fire as a flat fan-out, since `window` isn't on the DOM tree.\n *\n * @param target `Element`, `Document`, or `Window` to bind the\n * callback to. For `Element`, the callback only fires\n * when the event happens on the element or a\n * descendant.\n * @param eventType DOM event name.\n * @param callback Listener to be invoked with the event.\n * @param capture Use the capture phase. Required when ancestor\n * listeners gate on `event.defaultPrevented`, since a\n * bubble-phase root listener fires after them. Defaults\n * to `false`.\n * @return Unsubscribe function.\n */\n// root -> eventTypeKey -> subscribedTarget -> Set<callback>\n//\n// Inner registry is a `WeakMap`: element subscribers are held weakly so\n// an iframe removal lets the iframe's Elements (and through them, its\n// `ownerDocument`) be garbage-collected. The native listener is\n// attached to the document itself, so it goes when the document goes.\nconst registries = new WeakMap<\n\tEventTarget,\n\tMap< string, WeakMap< EventTarget, Set< EventListener > > >\n>();\n\nexport default function subscribeDelegatedListener(\n\ttarget: EventTarget,\n\teventType: string,\n\tcallback: EventListener,\n\tcapture: boolean = false\n): () => void {\n\t// Where the native listener is attached:\n\t// Element its `ownerDocument`\n\t// Document itself (own `ownerDocument` is `null`)\n\t// Window itself (no `ownerDocument` property)\n\t// `undefined` (Window) use a fan-out branch on dispatch since\n\t// events bubble *to* window but never *from* it via `parentNode`.\n\tconst ownerDoc = ( target as Node ).ownerDocument;\n\tconst root = ownerDoc ?? target;\n\tconst isWindow = ownerDoc === undefined;\n\n\tlet perRoot = registries.get( root );\n\tif ( ! perRoot ) {\n\t\tperRoot = new Map();\n\t\tregistries.set( root, perRoot );\n\t}\n\tconst key = capture ? `${ eventType }:capture` : eventType;\n\tlet perEvent = perRoot.get( key );\n\tif ( ! perEvent ) {\n\t\tperEvent = new WeakMap< EventTarget, Set< EventListener > >();\n\t\tperRoot.set( key, perEvent );\n\t\tconst subscribers = perEvent;\n\t\troot.addEventListener(\n\t\t\teventType,\n\t\t\t( event ) => {\n\t\t\t\tif ( isWindow ) {\n\t\t\t\t\t// Window has no DOM ancestry all subscribers share\n\t\t\t\t\t// the window key; fetch its set and fan out.\n\t\t\t\t\tconst set = subscribers.get( root );\n\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t\t// Walk the target root ancestry, dispatching callbacks\n\t\t\t\t// for any node in the path. Bubble order matches the walk\n\t\t\t\t// direction, so dispatch inline (no path array). Capture\n\t\t\t\t// has to materialise the path to iterate in reverse.\n\t\t\t\tif ( capture ) {\n\t\t\t\t\tconst path: Array< Node | Document > = [];\n\t\t\t\t\tlet current: Node | null = event.target as Node | null;\n\t\t\t\t\twhile ( current ) {\n\t\t\t\t\t\tpath.push( current );\n\t\t\t\t\t\tif ( current === root ) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrent = current.parentNode;\n\t\t\t\t\t}\n\t\t\t\t\tfor ( let i = path.length - 1; i >= 0; i-- ) {\n\t\t\t\t\t\tconst set = subscribers.get( path[ i ] );\n\t\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tlet current: Node | null = event.target as Node | null;\n\t\t\t\t\twhile ( current ) {\n\t\t\t\t\t\tconst set = subscribers.get( current );\n\t\t\t\t\t\tif ( set ) {\n\t\t\t\t\t\t\tfor ( const cb of set ) {\n\t\t\t\t\t\t\t\tcb( event );\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif ( current === root ) {\n\t\t\t\t\t\t\tbreak;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tcurrent = current.parentNode;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t},\n\t\t\tcapture\n\t\t);\n\t}\n\tlet set = perEvent.get( target );\n\tif ( ! set ) {\n\t\tset = new Set();\n\t\tperEvent.set( target, set );\n\t}\n\tset.add( callback );\n\treturn () => {\n\t\tset.delete( callback );\n\t};\n}\n"],
5
5
  "mappings": ";AA+BA,IAAM,aAAa,oBAAI,QAGrB;AAEa,SAAR,2BACN,QACA,WACA,UACA,UAAmB,OACN;AAOb,QAAM,WAAa,OAAiB;AACpC,QAAM,OAAO,YAAY;AACzB,QAAM,WAAW,aAAa;AAE9B,MAAI,UAAU,WAAW,IAAK,IAAK;AACnC,MAAK,CAAE,SAAU;AAChB,cAAU,oBAAI,IAAI;AAClB,eAAW,IAAK,MAAM,OAAQ;AAAA,EAC/B;AACA,QAAM,MAAM,UAAU,GAAI,SAAU,aAAa;AACjD,MAAI,WAAW,QAAQ,IAAK,GAAI;AAChC,MAAK,CAAE,UAAW;AACjB,eAAW,oBAAI,QAA6C;AAC5D,YAAQ,IAAK,KAAK,QAAS;AAC3B,UAAM,cAAc;AACpB,SAAK;AAAA,MACJ;AAAA,MACA,CAAE,UAAW;AACZ,YAAK,UAAW;AAGf,gBAAMA,OAAM,YAAY,IAAK,IAAK;AAClC,cAAKA,MAAM;AACV,uBAAY,MAAMA,MAAM;AACvB,iBAAI,KAAM;AAAA,YACX;AAAA,UACD;AACA;AAAA,QACD;AAKA,YAAK,SAAU;AACd,gBAAM,OAAiC,CAAC;AACxC,cAAI,UAAuB,MAAM;AACjC,iBAAQ,SAAU;AACjB,iBAAK,KAAM,OAAQ;AACnB,gBAAK,YAAY,MAAO;AACvB;AAAA,YACD;AACA,sBAAU,QAAQ;AAAA,UACnB;AACA,mBAAU,IAAI,KAAK,SAAS,GAAG,KAAK,GAAG,KAAM;AAC5C,kBAAMA,OAAM,YAAY,IAAK,KAAM,CAAE,CAAE;AACvC,gBAAKA,MAAM;AACV,yBAAY,MAAMA,MAAM;AACvB,mBAAI,KAAM;AAAA,cACX;AAAA,YACD;AAAA,UACD;AAAA,QACD,OAAO;AACN,cAAI,UAAuB,MAAM;AACjC,iBAAQ,SAAU;AACjB,kBAAMA,OAAM,YAAY,IAAK,OAAQ;AACrC,gBAAKA,MAAM;AACV,yBAAY,MAAMA,MAAM;AACvB,mBAAI,KAAM;AAAA,cACX;AAAA,YACD;AACA,gBAAK,YAAY,MAAO;AACvB;AAAA,YACD;AACA,sBAAU,QAAQ;AAAA,UACnB;AAAA,QACD;AAAA,MACD;AAAA,MACA;AAAA,IACD;AAAA,EACD;AACA,MAAI,MAAM,SAAS,IAAK,MAAO;AAC/B,MAAK,CAAE,KAAM;AACZ,UAAM,oBAAI,IAAI;AACd,aAAS,IAAK,QAAQ,GAAI;AAAA,EAC3B;AACA,MAAI,IAAK,QAAS;AAClB,SAAO,MAAM;AACZ,QAAI,OAAQ,QAAS;AAAA,EACtB;AACD;",
6
6
  "names": ["set"]
7
7
  }
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAa3D;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAA0C,KAAK,SAAS,EAAE,sDAuBzD,CAAC;eAEG,IAAI"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/higher-order/pure/index.tsx"],"names":[],"mappings":"AAAA;;GAEG;AACH,OAAO,KAAK,EAAE,aAAa,EAAkB,MAAM,OAAO,CAAC;AAc3D;;;;;GAKG;AACH,QAAA,MAAM,IAAI,GAA0C,KAAK,SAAS,EAAE,sDA4BzD,CAAC;eAEG,IAAI"}
@@ -2,10 +2,10 @@
2
2
  * In Dialogs/modals, the tabbing must be constrained to the content of
3
3
  * the wrapper element. This hook adds the behavior to the returned ref.
4
4
  *
5
- * @return {React.RefCallback<Element>} Element Ref.
5
+ * @return Element Ref.
6
6
  *
7
7
  * @example
8
- * ```js
8
+ * ```ts
9
9
  * import { useConstrainedTabbing } from '@wordpress/compose';
10
10
  *
11
11
  * const ConstrainedTabbingExample = () => {
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-constrained-tabbing/index.js"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,qBAAqB,IAjBlB,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CA2ErC;eAEc,qBAAqB"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-constrained-tabbing/index.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,qBAAqB,IAAI,KAAK,CAAC,WAAW,CAAE,OAAO,CAAE,CAsD7D;eAEc,qBAAqB"}
@@ -1,3 +1,4 @@
1
+ import type { DebounceOptions, DebouncedFunc } from '../../utils/debounce';
1
2
  /**
2
3
  * Debounces a function similar to Lodash's `debounce`. A new debounced function will
3
4
  * be returned and any scheduled calls cancelled if any of the arguments change,
@@ -6,12 +7,12 @@
6
7
  *
7
8
  * @see https://lodash.com/docs/4#debounce
8
9
  *
9
- * @template {(...args: any[]) => void} TFunc
10
+ * @template TFunc
10
11
  *
11
- * @param {TFunc} fn The function to debounce.
12
- * @param {number} [wait] The number of milliseconds to delay.
13
- * @param {import('../../utils/debounce').DebounceOptions} [options] The options object.
14
- * @return {import('../../utils/debounce').DebouncedFunc<TFunc>} Debounced function.
12
+ * @param fn The function to debounce.
13
+ * @param wait The number of milliseconds to delay.
14
+ * @param options The options object.
15
+ * @return Debounced function.
15
16
  */
16
- export default function useDebounce<TFunc extends (...args: any[]) => void>(fn: TFunc, wait?: number, options?: import('../../utils/debounce').DebounceOptions): import('../../utils/debounce').DebouncedFunc<TFunc>;
17
+ export default function useDebounce<TFunc extends (...args: any[]) => void>(fn: TFunc, wait?: number, options?: DebounceOptions): DebouncedFunc<TFunc>;
17
18
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.js"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAPK,KAAK,SAA/B,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAW,EAOR,EAAE,EAL5B,KAK4B,EAAE,IAAI,AAJ1C,CACA,EADQ,MAIkC,EAAE,OAAO,AAHnD,CACA,EADQ,OAAO,sBAAsB,EAAE,eAGY,GAF1C,OAAO,sBAAsB,EAAE,aAAa,CAAC,KAAK,CAAC,CAS9D"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-debounce/index.ts"],"names":[],"mappings":"AAcA,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"}
@@ -25,6 +25,6 @@
25
25
  * ```
26
26
  */
27
27
  export default function useDisabled({ isDisabled: isDisabledProp }?: {
28
- isDisabled?: boolean | undefined;
28
+ isDisabled?: boolean;
29
29
  }): import("react").RefCallback<Node | null>;
30
30
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,EAClC;;CAAK,4CAmDL"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-disabled/index.ts"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,UAAU,EAAE,cAAsB,EAClC,GAAE;IACF,UAAU,CAAC,EAAE,OAAO,CAAC;CAChB,4CAmDL"}
@@ -1,16 +1,12 @@
1
+ import type { DraggingProps, DraggingReturn } from './types';
1
2
  /**
2
- * @param {Object} props
3
- * @param {(e: React.MouseEvent) => void} props.onDragStart
4
- * @param {(e: MouseEvent) => void} props.onDragMove
5
- * @param {(e?: MouseEvent) => void} props.onDragEnd
3
+ * Hook to manage drag events with proper event handling
4
+ *
5
+ * @param props Drag handlers
6
+ * @param props.onDragStart
7
+ * @param props.onDragMove
8
+ * @param props.onDragEnd
9
+ * @return Drag state and handlers
6
10
  */
7
- export default function useDragging({ onDragStart, onDragMove, onDragEnd }: {
8
- onDragStart: (e: React.MouseEvent) => void;
9
- onDragMove: (e: MouseEvent) => void;
10
- onDragEnd: (e?: MouseEvent) => void;
11
- }): {
12
- startDrag: (e: React.MouseEvent) => void;
13
- endDrag: (e?: MouseEvent) => void;
14
- isDragging: boolean;
15
- };
11
+ export default function useDragging({ onDragStart, onDragMove, onDragEnd }: DraggingProps): DraggingReturn;
16
12
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dragging/index.js"],"names":[],"mappings":"AAYA;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,EAJxE;IAA6C,WAAW,EAAhD,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CACrC;IAA6C,UAAU,EAA/C,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAC/B;IAA6C,SAAS,EAA9C,CAAC,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAClC;CAC0E;mBA8B3D,KAAK,CAAC,UAAU,KAAK,IAAI;kBATxB,UAAU,KAAK,IAAI;;EAkCnC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dragging/index.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAE7D;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,WAAW,EACX,UAAU,EACV,SAAS,EACT,EAAE,aAAa,GAAI,cAAc,CAqDjC"}
@@ -0,0 +1,11 @@
1
+ export interface DraggingProps {
2
+ onDragStart?: (e: React.MouseEvent) => void;
3
+ onDragMove?: (e: MouseEvent) => void;
4
+ onDragEnd?: (e?: MouseEvent) => void;
5
+ }
6
+ export interface DraggingReturn {
7
+ startDrag: (e: React.MouseEvent) => void;
8
+ endDrag: (e?: MouseEvent) => void;
9
+ isDragging: boolean;
10
+ }
11
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-dragging/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,aAAa;IAC7B,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAM,IAAI,CAAC;IAC9C,UAAU,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,CAAE,CAAC,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;CACvC;AAED,MAAM,WAAW,cAAc;IAC9B,SAAS,EAAE,CAAE,CAAC,EAAE,KAAK,CAAC,UAAU,KAAM,IAAI,CAAC;IAC3C,OAAO,EAAE,CAAE,CAAC,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;IACpC,UAAU,EAAE,OAAO,CAAC;CACpB"}
@@ -1,26 +1,9 @@
1
+ import type { UseDropZoneProps } from './types';
1
2
  /**
2
3
  * A hook to facilitate drag and drop handling.
3
4
  *
4
- * @param {Object} props Named parameters.
5
- * @param {?HTMLElement} [props.dropZoneElement] Optional element to be used as the drop zone.
6
- * @param {boolean} [props.isDisabled] Whether or not to disable the drop zone.
7
- * @param {(e: DragEvent) => void} [props.onDragStart] Called when dragging has started.
8
- * @param {(e: DragEvent) => void} [props.onDragEnter] Called when the zone is entered.
9
- * @param {(e: DragEvent) => void} [props.onDragOver] Called when the zone is moved within.
10
- * @param {(e: DragEvent) => void} [props.onDragLeave] Called when the zone is left.
11
- * @param {(e: MouseEvent) => void} [props.onDragEnd] Called when dragging has ended.
12
- * @param {(e: DragEvent) => void} [props.onDrop] Called when dropping in the zone.
13
- *
14
- * @return {React.RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.
5
+ * @param {UseDropZoneProps} props Hook options
6
+ * @return Ref callback to be passed to the drop zone element.
15
7
  */
16
- export default function useDropZone({ dropZoneElement, isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver }: {
17
- dropZoneElement?: HTMLElement | null;
18
- isDisabled?: boolean;
19
- onDragStart?: (e: DragEvent) => void;
20
- onDragEnter?: (e: DragEvent) => void;
21
- onDragOver?: (e: DragEvent) => void;
22
- onDragLeave?: (e: DragEvent) => void;
23
- onDragEnd?: (e: MouseEvent) => void;
24
- onDrop?: (e: DragEvent) => void;
25
- }): React.RefCallback<HTMLElement>;
8
+ export default function useDropZone({ dropZoneElement, isDisabled, onDrop: _onDrop, onDragStart: _onDragStart, onDragEnter: _onDragEnter, onDragLeave: _onDragLeave, onDragEnd: _onDragEnd, onDragOver: _onDragOver }: UseDropZoneProps): React.RefCallback<HTMLElement>;
26
9
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.js"],"names":[],"mappings":"AAMA;;;;;;;;;;;;;;GAcG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,eAAe,EACf,UAAU,EACV,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,EACvB,EApBE;IAAwC,eAAe,AAAvD,CACA,EADS,WAAW,OAAA,CACpB;IAAwC,UAAU,AAAlD,CACA,EADQ,OAAO,CACf;IAAwC,WAAW,AAAnD,CACA,EADQ,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAC9B;IAAwC,WAAW,AAAnD,CACA,EADQ,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAC9B;IAAwC,UAAU,AAAlD,CACA,EADQ,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAC9B;IAAwC,WAAW,AAAnD,CACA,EADQ,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAC9B;IAAwC,SAAS,AAAjD,CACA,EADQ,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAC/B;IAAwC,MAAM,AAA9C,CAEA,EAFQ,CAAC,CAAC,EAAE,SAAS,KAAK,IAAI,CAE9B;CAWF,GAXW,KAAK,CAAC,WAAW,CAAC,WAAW,CAAC,CAoMzC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAEhD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,WAAW,CAAE,EACpC,eAAe,EACf,UAAU,EACV,MAAM,EAAE,OAAO,EACf,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,WAAW,EAAE,YAAY,EACzB,SAAS,EAAE,UAAU,EACrB,UAAU,EAAE,WAAW,EACvB,EAAE,gBAAgB,GAAI,KAAK,CAAC,WAAW,CAAE,WAAW,CAAE,CAmLtD"}
@@ -0,0 +1,35 @@
1
+ export interface UseDropZoneProps {
2
+ /**
3
+ * Optional element to be used as the drop zone.
4
+ */
5
+ dropZoneElement?: HTMLElement | null;
6
+ /**
7
+ * Whether or not to disable the drop zone.
8
+ */
9
+ isDisabled?: boolean;
10
+ /**
11
+ * Called when dragging has started.
12
+ */
13
+ onDragStart?: (e: DragEvent) => void;
14
+ /**
15
+ * Called when the zone is entered.
16
+ */
17
+ onDragEnter?: (e: DragEvent) => void;
18
+ /**
19
+ * Called when the zone is moved within.
20
+ */
21
+ onDragOver?: (e: DragEvent) => void;
22
+ /**
23
+ * Called when the zone is left.
24
+ */
25
+ onDragLeave?: (e: DragEvent) => void;
26
+ /**
27
+ * Called when dragging has ended.
28
+ */
29
+ onDragEnd?: (e: MouseEvent) => void;
30
+ /**
31
+ * Called when dropping in the zone.
32
+ */
33
+ onDrop?: (e: DragEvent) => void;
34
+ }
35
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-drop-zone/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IACrC;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,SAAS,KAAM,IAAI,CAAC;IACvC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,SAAS,KAAM,IAAI,CAAC;IACvC;;OAEG;IACH,UAAU,CAAC,EAAE,CAAE,CAAC,EAAE,SAAS,KAAM,IAAI,CAAC;IACtC;;OAEG;IACH,WAAW,CAAC,EAAE,CAAE,CAAC,EAAE,SAAS,KAAM,IAAI,CAAC;IACvC;;OAEG;IACH,SAAS,CAAC,EAAE,CAAE,CAAC,EAAE,UAAU,KAAM,IAAI,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,CAAE,CAAC,EAAE,SAAS,KAAM,IAAI,CAAC;CAClC"}