@wordpress/compose 7.6.0 → 7.8.1-next.1f6eadc42.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 ## Unreleased
 
+## 7.8.0-next.0 (2024-09-13)
+
+### New Features
+
+-   `useEvent`: a new utility that creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
+-   `useResizeObserver`: new and improved version of the utility (legacy API is still supported) ([#64943](https://github.com/WordPress/gutenberg/pull/64943)).
+
+## 7.7.0 (2024-09-05)
+
 ## 7.6.0 (2024-08-21)
 
 ## 7.5.0 (2024-08-07)
@@ -203,8 +212,8 @@
 
 ### Breaking Changes
 
--   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/.
--   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at https://nodejs.org/en/about/releases/.
+-   Drop support for Internet Explorer 11 ([#31110](https://github.com/WordPress/gutenberg/pull/31110)). Learn more at <https://make.wordpress.org/core/2021/04/22/ie-11-support-phase-out-plan/>.
+-   Increase the minimum Node.js version to v12 matching Long Term Support releases ([#31270](https://github.com/WordPress/gutenberg/pull/31270)). Learn more at <https://nodejs.org/en/about/releases/>.
 
 ## 3.25.0 (2021-03-17)
 

package/README.md

@@ -305,6 +305,29 @@ _Returns_
 
 -   `import('react').RefCallback<HTMLElement>`: Element Ref.
 
+### useEvent
+
+Creates a stable callback function that has access to the latest state and can be used within event handlers and effect callbacks. Throws when used in the render phase.
+
+_Usage_
+
+```tsx
+function Component( props ) {
+	const onClick = useEvent( props.onClick );
+	useEffect( () => {
+		onClick();
+		// Won't trigger the effect again when props.onClick is updated.
+	}, [ onClick ] );
+	// Won't re-render Button when props.onClick is updated (if `Button` is
+	// wrapped in `React.memo`).
+	return <Button onClick={ onClick } />;
+}
+```
+
+_Parameters_
+
+-   _callback_ `T`: The callback function to wrap.
+
 ### useFocusableIframe
 
 Dispatches a bubbling focus event when the iframe receives focus. Use `onFocus` as usual on the iframe or a parent element.
@@ -500,23 +523,30 @@ _Returns_
 
 ### useResizeObserver
 
-Hook which allows to listen the resize event of any target element when it changes sizes. \_Note: `useResizeObserver` will report `null` until after first render.
+Sets up a [`ResizeObserver`](https://developer.mozilla.org/en-US/docs/Web/API/Resize_Observer_API) for an HTML or SVG element.
+
+Pass the returned setter as a callback ref to the React element you want to observe, or use it in layout effects for advanced use cases.
 
 _Usage_
 
-```js
-const App = () => {
-	const [ resizeListener, sizes ] = useResizeObserver();
+```tsx
+const setElement = useResizeObserver(
+	( resizeObserverEntries ) => console.log( resizeObserverEntries ),
+	{ box: 'border-box' }
+);
+<div ref={ setElement } />;
 
-	return (
-		<div>
-			{ resizeListener }
-			Your content here
-		</div>
-	);
-};
+// The setter can be used in other ways, for example:
+useLayoutEffect( () => {
+	setElement( document.querySelector( `data-element-id="${ elementId }"` ) );
+}, [ elementId ] );
 ```
 
+_Parameters_
+
+-   _callback_ `ResizeObserverCallback`: The `ResizeObserver` callback - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/ResizeObserver#callback).
+-   _options_ `ResizeObserverOptions`: Options passed to `ResizeObserver.observe` when called - [MDN docs](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver/observe#options). Changes will be ignored.
+
 ### useStateWithHistory
 
 useState with undo/redo history.

package/build/hooks/use-copy-on-click/index.js

@@ -38,7 +38,7 @@ function useCopyOnClick(ref, text, timeout = 4000) {
   });
 
   /** @type {import('react').MutableRefObject<Clipboard | undefined>} */
-  const clipboard = (0, _element.useRef)();
+  const clipboardRef = (0, _element.useRef)();
   const [hasCopied, setHasCopied] = (0, _element.useState)(false);
   (0, _element.useEffect)(() => {
     /** @type {number | undefined} */
@@ -48,10 +48,10 @@ function useCopyOnClick(ref, text, timeout = 4000) {
     }
 
     // Clipboard listens to click events.
-    clipboard.current = new _clipboard.default(ref.current, {
+    clipboardRef.current = new _clipboard.default(ref.current, {
       text: () => typeof text === 'function' ? text() : text
     });
-    clipboard.current.on('success', ({
+    clipboardRef.current.on('success', ({
       clearSelection,
       trigger
     }) => {
@@ -71,8 +71,8 @@ function useCopyOnClick(ref, text, timeout = 4000) {
       }
     });
     return () => {
-      if (clipboard.current) {
-        clipboard.current.destroy();
+      if (clipboardRef.current) {
+        clipboardRef.current.destroy();
       }
       clearTimeout(timeoutId);
     };

package/build/hooks/use-copy-on-click/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_clipboard","_interopRequireDefault","require","_element","_deprecated","useCopyOnClick","ref","text","timeout","deprecated","since","alternative","clipboard","useRef","hasCopied","setHasCopied","useState","useEffect","timeoutId","current","Clipboard","on","clearSelection","trigger","focus","clearTimeout","setTimeout","destroy"],"sources":["@wordpress/compose/src/hooks/use-copy-on-click/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n *\n * @param {import('react').RefObject<string | Element | NodeListOf<Element>>} ref       Reference with the element.\n * @param {string|Function}                                                   text      The text to copy.\n * @param {number}                                                            [timeout] Optional timeout to reset the returned\n *                                                                                      state. 4 seconds by default.\n *\n * @return {boolean} Whether or not the text has been copied. Resets after the\n *                   timeout.\n */\nexport default function useCopyOnClick( ref, text, timeout = 4000 ) {\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\t/** @type {import('react').MutableRefObject<Clipboard | undefined>} */\n\tconst clipboard = useRef();\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t/** @type {number | undefined} */\n\t\tlet timeoutId;\n\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clipboard listens to click events.\n\t\tclipboard.current = new Clipboard( ref.current, {\n\t\t\ttext: () => ( typeof text === 'function' ? text() : text ),\n\t\t} );\n\n\t\tclipboard.current.on( 'success', ( { clearSelection, trigger } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering button,\n\t\t\t// ensuring that it is not reset to the body, and further that it is\n\t\t\t// kept within the rendered node.\n\t\t\tclearSelection();\n\n\t\t\t// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680\n\t\t\tif ( trigger ) {\n\t\t\t\t/** @type {HTMLElement} */ ( trigger ).focus();\n\t\t\t}\n\n\t\t\tif ( timeout ) {\n\t\t\t\tsetHasCopied( true );\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\ttimeoutId = setTimeout( () => setHasCopied( false ), timeout );\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tif ( clipboard.current ) {\n\t\t\t\tclipboard.current.destroy();\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ text, timeout, setHasCopied ] );\n\n\treturn hasCopied;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,cAAcA,CAAEC,GAAG,EAAEC,IAAI,EAAEC,OAAO,GAAG,IAAI,EAAG;EACnE;EACA,IAAAC,mBAAU,EAAE,2BAA2B,EAAE;IACxCC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;;EAEH;EACA,MAAMC,SAAS,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC1B,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAErD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,IAAIC,SAAS;IAEb,IAAK,CAAEZ,GAAG,CAACa,OAAO,EAAG;MACpB;IACD;;IAEA;IACAP,SAAS,CAACO,OAAO,GAAG,IAAIC,kBAAS,CAAEd,GAAG,CAACa,OAAO,EAAE;MAC/CZ,IAAI,EAAEA,CAAA,KAAQ,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAC,CAAC,GAAGA;IACrD,CAAE,CAAC;IAEHK,SAAS,CAACO,OAAO,CAACE,EAAE,CAAE,SAAS,EAAE,CAAE;MAAEC,cAAc;MAAEC;IAAQ,CAAC,KAAM;MACnE;MACA;MACA;MACAD,cAAc,CAAC,CAAC;;MAEhB;MACA,IAAKC,OAAO,EAAG;QACd,0BAA6BA,OAAO,CAAGC,KAAK,CAAC,CAAC;MAC/C;MAEA,IAAKhB,OAAO,EAAG;QACdO,YAAY,CAAE,IAAK,CAAC;QACpBU,YAAY,CAAEP,SAAU,CAAC;QACzBA,SAAS,GAAGQ,UAAU,CAAE,MAAMX,YAAY,CAAE,KAAM,CAAC,EAAEP,OAAQ,CAAC;MAC/D;IACD,CAAE,CAAC;IAEH,OAAO,MAAM;MACZ,IAAKI,SAAS,CAACO,OAAO,EAAG;QACxBP,SAAS,CAACO,OAAO,CAACQ,OAAO,CAAC,CAAC;MAC5B;MACAF,YAAY,CAAEP,SAAU,CAAC;IAC1B,CAAC;EACF,CAAC,EAAE,CAAEX,IAAI,EAAEC,OAAO,EAAEO,YAAY,CAAG,CAAC;EAEpC,OAAOD,SAAS;AACjB","ignoreList":[]}
+{"version":3,"names":["_clipboard","_interopRequireDefault","require","_element","_deprecated","useCopyOnClick","ref","text","timeout","deprecated","since","alternative","clipboardRef","useRef","hasCopied","setHasCopied","useState","useEffect","timeoutId","current","Clipboard","on","clearSelection","trigger","focus","clearTimeout","setTimeout","destroy"],"sources":["@wordpress/compose/src/hooks/use-copy-on-click/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\n\n/* eslint-disable jsdoc/no-undefined-types */\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n *\n * @param {import('react').RefObject<string | Element | NodeListOf<Element>>} ref       Reference with the element.\n * @param {string|Function}                                                   text      The text to copy.\n * @param {number}                                                            [timeout] Optional timeout to reset the returned\n *                                                                                      state. 4 seconds by default.\n *\n * @return {boolean} Whether or not the text has been copied. Resets after the\n *                   timeout.\n */\nexport default function useCopyOnClick( ref, text, timeout = 4000 ) {\n\t/* eslint-enable jsdoc/no-undefined-types */\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\t/** @type {import('react').MutableRefObject<Clipboard | undefined>} */\n\tconst clipboardRef = useRef();\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t/** @type {number | undefined} */\n\t\tlet timeoutId;\n\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Clipboard listens to click events.\n\t\tclipboardRef.current = new Clipboard( ref.current, {\n\t\t\ttext: () => ( typeof text === 'function' ? text() : text ),\n\t\t} );\n\n\t\tclipboardRef.current.on( 'success', ( { clearSelection, trigger } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering button,\n\t\t\t// ensuring that it is not reset to the body, and further that it is\n\t\t\t// kept within the rendered node.\n\t\t\tclearSelection();\n\n\t\t\t// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680\n\t\t\tif ( trigger ) {\n\t\t\t\t/** @type {HTMLElement} */ ( trigger ).focus();\n\t\t\t}\n\n\t\t\tif ( timeout ) {\n\t\t\t\tsetHasCopied( true );\n\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\ttimeoutId = setTimeout( () => setHasCopied( false ), timeout );\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tif ( clipboardRef.current ) {\n\t\t\t\tclipboardRef.current.destroy();\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ text, timeout, setHasCopied ] );\n\n\treturn hasCopied;\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,WAAA,GAAAH,sBAAA,CAAAC,OAAA;AATA;AACA;AACA;;AAGA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASG,cAAcA,CAAEC,GAAG,EAAEC,IAAI,EAAEC,OAAO,GAAG,IAAI,EAAG;EACnE;EACA,IAAAC,mBAAU,EAAE,2BAA2B,EAAE;IACxCC,KAAK,EAAE,KAAK;IACZC,WAAW,EAAE;EACd,CAAE,CAAC;;EAEH;EACA,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAAC,CAAC;EAC7B,MAAM,CAAEC,SAAS,EAAEC,YAAY,CAAE,GAAG,IAAAC,iBAAQ,EAAE,KAAM,CAAC;EAErD,IAAAC,kBAAS,EAAE,MAAM;IAChB;IACA,IAAIC,SAAS;IAEb,IAAK,CAAEZ,GAAG,CAACa,OAAO,EAAG;MACpB;IACD;;IAEA;IACAP,YAAY,CAACO,OAAO,GAAG,IAAIC,kBAAS,CAAEd,GAAG,CAACa,OAAO,EAAE;MAClDZ,IAAI,EAAEA,CAAA,KAAQ,OAAOA,IAAI,KAAK,UAAU,GAAGA,IAAI,CAAC,CAAC,GAAGA;IACrD,CAAE,CAAC;IAEHK,YAAY,CAACO,OAAO,CAACE,EAAE,CAAE,SAAS,EAAE,CAAE;MAAEC,cAAc;MAAEC;IAAQ,CAAC,KAAM;MACtE;MACA;MACA;MACAD,cAAc,CAAC,CAAC;;MAEhB;MACA,IAAKC,OAAO,EAAG;QACd,0BAA6BA,OAAO,CAAGC,KAAK,CAAC,CAAC;MAC/C;MAEA,IAAKhB,OAAO,EAAG;QACdO,YAAY,CAAE,IAAK,CAAC;QACpBU,YAAY,CAAEP,SAAU,CAAC;QACzBA,SAAS,GAAGQ,UAAU,CAAE,MAAMX,YAAY,CAAE,KAAM,CAAC,EAAEP,OAAQ,CAAC;MAC/D;IACD,CAAE,CAAC;IAEH,OAAO,MAAM;MACZ,IAAKI,YAAY,CAACO,OAAO,EAAG;QAC3BP,YAAY,CAACO,OAAO,CAACQ,OAAO,CAAC,CAAC;MAC/B;MACAF,YAAY,CAAEP,SAAU,CAAC;IAC1B,CAAC;EACF,CAAC,EAAE,CAAEX,IAAI,EAAEC,OAAO,EAAEO,YAAY,CAAG,CAAC;EAEpC,OAAOD,SAAS;AACjB","ignoreList":[]}

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

@@ -154,6 +154,7 @@ function useDropZone({
       // zone.
       // Note: This is not entirely reliable in Safari due to this bug
       // https://bugs.webkit.org/show_bug.cgi?id=66547
+
       if (isElementInZone(event.relatedTarget)) {
         return;
       }

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

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_useRefEffect","_interopRequireDefault","useFreshRef","value","ref","useRef","current","useDropZone","dropZoneElement","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","useRefEffect","elem","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T|null>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object}                  props                   Named parameters.\n * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.\n * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.\n * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.\n * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.\n * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.\n * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.\n * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tdropZoneElement,\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( elem ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If a custom dropZoneRef is passed, use that instead of the element.\n\t\t\t// This allows the dropzone to cover an expanded area, rather than\n\t\t\t// be restricted to the area of the ref returned by this hook.\n\t\t\tconst element = dropZoneElement ?? elem;\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\t\t\t};\n\t\t},\n\t\t[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.\n\t);\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_element","require","_useRefEffect","_interopRequireDefault","useFreshRef","value","ref","useRef","current","useDropZone","dropZoneElement","isDisabled","onDrop","_onDrop","onDragStart","_onDragStart","onDragEnter","_onDragEnter","onDragLeave","_onDragLeave","onDragEnd","_onDragEnd","onDragOver","_onDragOver","onDropRef","onDragStartRef","onDragEnterRef","onDragLeaveRef","onDragEndRef","onDragOverRef","useRefEffect","elem","element","isDragging","ownerDocument","isElementInZone","targetToCheck","defaultView","HTMLElement","contains","elementToCheck","dataset","isDropZone","parentElement","maybeDragStart","event","addEventListener","maybeDragEnd","preventDefault","relatedTarget","defaultPrevented","dataTransfer","files","length","removeEventListener"],"sources":["@wordpress/compose/src/hooks/use-drop-zone/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/* eslint-disable jsdoc/valid-types */\n/**\n * @template T\n * @param {T} value\n * @return {import('react').MutableRefObject<T|null>} A ref with the value.\n */\nfunction useFreshRef( value ) {\n\t/* eslint-enable jsdoc/valid-types */\n\t/* eslint-disable jsdoc/no-undefined-types */\n\t/** @type {import('react').MutableRefObject<T>} */\n\t/* eslint-enable jsdoc/no-undefined-types */\n\t// Disable reason: We're doing something pretty JavaScript-y here where the\n\t// ref will always have a current value that is not null or undefined but it\n\t// needs to start as undefined. We don't want to change the return type so\n\t// it's easier to just ts-ignore this specific line that's complaining about\n\t// undefined not being part of T.\n\t// @ts-ignore\n\tconst ref = useRef();\n\tref.current = value;\n\treturn ref;\n}\n\n/**\n * A hook to facilitate drag and drop handling.\n *\n * @param {Object}                  props                   Named parameters.\n * @param {?HTMLElement}            [props.dropZoneElement] Optional element to be used as the drop zone.\n * @param {boolean}                 [props.isDisabled]      Whether or not to disable the drop zone.\n * @param {(e: DragEvent) => void}  [props.onDragStart]     Called when dragging has started.\n * @param {(e: DragEvent) => void}  [props.onDragEnter]     Called when the zone is entered.\n * @param {(e: DragEvent) => void}  [props.onDragOver]      Called when the zone is moved within.\n * @param {(e: DragEvent) => void}  [props.onDragLeave]     Called when the zone is left.\n * @param {(e: MouseEvent) => void} [props.onDragEnd]       Called when dragging has ended.\n * @param {(e: DragEvent) => void}  [props.onDrop]          Called when dropping in the zone.\n *\n * @return {import('react').RefCallback<HTMLElement>} Ref callback to be passed to the drop zone element.\n */\nexport default function useDropZone( {\n\tdropZoneElement,\n\tisDisabled,\n\tonDrop: _onDrop,\n\tonDragStart: _onDragStart,\n\tonDragEnter: _onDragEnter,\n\tonDragLeave: _onDragLeave,\n\tonDragEnd: _onDragEnd,\n\tonDragOver: _onDragOver,\n} ) {\n\tconst onDropRef = useFreshRef( _onDrop );\n\tconst onDragStartRef = useFreshRef( _onDragStart );\n\tconst onDragEnterRef = useFreshRef( _onDragEnter );\n\tconst onDragLeaveRef = useFreshRef( _onDragLeave );\n\tconst onDragEndRef = useFreshRef( _onDragEnd );\n\tconst onDragOverRef = useFreshRef( _onDragOver );\n\n\treturn useRefEffect(\n\t\t( elem ) => {\n\t\t\tif ( isDisabled ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\t// If a custom dropZoneRef is passed, use that instead of the element.\n\t\t\t// This allows the dropzone to cover an expanded area, rather than\n\t\t\t// be restricted to the area of the ref returned by this hook.\n\t\t\tconst element = dropZoneElement ?? elem;\n\n\t\t\tlet isDragging = false;\n\n\t\t\tconst { ownerDocument } = element;\n\n\t\t\t/**\n\t\t\t * Checks if an element is in the drop zone.\n\t\t\t *\n\t\t\t * @param {EventTarget|null} targetToCheck\n\t\t\t *\n\t\t\t * @return {boolean} True if in drop zone, false if not.\n\t\t\t */\n\t\t\tfunction isElementInZone( targetToCheck ) {\n\t\t\t\tconst { defaultView } = ownerDocument;\n\n\t\t\t\tif (\n\t\t\t\t\t! targetToCheck ||\n\t\t\t\t\t! defaultView ||\n\t\t\t\t\t! ( targetToCheck instanceof defaultView.HTMLElement ) ||\n\t\t\t\t\t! element.contains( targetToCheck )\n\t\t\t\t) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t/** @type {HTMLElement|null} */\n\t\t\t\tlet elementToCheck = targetToCheck;\n\n\t\t\t\tdo {\n\t\t\t\t\tif ( elementToCheck.dataset.isDropZone ) {\n\t\t\t\t\t\treturn elementToCheck === element;\n\t\t\t\t\t}\n\t\t\t\t} while ( ( elementToCheck = elementToCheck.parentElement ) );\n\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tfunction maybeDragStart( /** @type {DragEvent} */ event ) {\n\t\t\t\tif ( isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = true;\n\n\t\t\t\t// Note that `dragend` doesn't fire consistently for file and\n\t\t\t\t// HTML drag events where the drag origin is outside the browser\n\t\t\t\t// window. In Firefox it may also not fire if the originating\n\t\t\t\t// node is removed.\n\t\t\t\townerDocument.addEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.addEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragStartRef.current ) {\n\t\t\t\t\tonDragStartRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragEnter( /** @type {DragEvent} */ event ) {\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// The `dragenter` event will also fire when entering child\n\t\t\t\t// elements, but we only want to call `onDragEnter` when\n\t\t\t\t// entering the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been left) should be outside the drop zone.\n\t\t\t\tif (\n\t\t\t\t\telement.contains(\n\t\t\t\t\t\t/** @type {Node} */ ( event.relatedTarget )\n\t\t\t\t\t)\n\t\t\t\t) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragEnterRef.current ) {\n\t\t\t\t\tonDragEnterRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDragOver( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Only call onDragOver for the innermost hovered drop zones.\n\t\t\t\tif ( ! event.defaultPrevented && onDragOverRef.current ) {\n\t\t\t\t\tonDragOverRef.current( event );\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDragOver` is already handled.\n\t\t\t\tevent.preventDefault();\n\t\t\t}\n\n\t\t\tfunction onDragLeave( /** @type {DragEvent} */ event ) {\n\t\t\t\t// The `dragleave` event will also fire when leaving child\n\t\t\t\t// elements, but we only want to call `onDragLeave` when\n\t\t\t\t// leaving the drop zone, which means the `relatedTarget`\n\t\t\t\t// (element that has been entered) should be outside the drop\n\t\t\t\t// zone.\n\t\t\t\t// Note: This is not entirely reliable in Safari due to this bug\n\t\t\t\t// https://bugs.webkit.org/show_bug.cgi?id=66547\n\n\t\t\t\tif ( isElementInZone( event.relatedTarget ) ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tif ( onDragLeaveRef.current ) {\n\t\t\t\t\tonDragLeaveRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tfunction onDrop( /** @type {DragEvent} */ event ) {\n\t\t\t\t// Don't handle drop if an inner drop zone already handled it.\n\t\t\t\tif ( event.defaultPrevented ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\t// Prevent the browser default while also signalling to parent\n\t\t\t\t// drop zones that `onDrop` is already handled.\n\t\t\t\tevent.preventDefault();\n\n\t\t\t\t// This seemingly useless line has been shown to resolve a\n\t\t\t\t// Safari issue where files dragged directly from the dock are\n\t\t\t\t// not recognized.\n\t\t\t\t// eslint-disable-next-line no-unused-expressions\n\t\t\t\tevent.dataTransfer && event.dataTransfer.files.length;\n\n\t\t\t\tif ( onDropRef.current ) {\n\t\t\t\t\tonDropRef.current( event );\n\t\t\t\t}\n\n\t\t\t\tmaybeDragEnd( event );\n\t\t\t}\n\n\t\t\tfunction maybeDragEnd( /** @type {MouseEvent} */ event ) {\n\t\t\t\tif ( ! isDragging ) {\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tisDragging = false;\n\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\n\t\t\t\tif ( onDragEndRef.current ) {\n\t\t\t\t\tonDragEndRef.current( event );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\telement.dataset.isDropZone = 'true';\n\t\t\telement.addEventListener( 'drop', onDrop );\n\t\t\telement.addEventListener( 'dragenter', onDragEnter );\n\t\t\telement.addEventListener( 'dragover', onDragOver );\n\t\t\telement.addEventListener( 'dragleave', onDragLeave );\n\t\t\t// The `dragstart` event doesn't fire if the drag started outside\n\t\t\t// the document.\n\t\t\townerDocument.addEventListener( 'dragenter', maybeDragStart );\n\n\t\t\treturn () => {\n\t\t\t\tdelete element.dataset.isDropZone;\n\t\t\t\telement.removeEventListener( 'drop', onDrop );\n\t\t\t\telement.removeEventListener( 'dragenter', onDragEnter );\n\t\t\t\telement.removeEventListener( 'dragover', onDragOver );\n\t\t\t\telement.removeEventListener( 'dragleave', onDragLeave );\n\t\t\t\townerDocument.removeEventListener( 'dragend', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener( 'mousemove', maybeDragEnd );\n\t\t\t\townerDocument.removeEventListener(\n\t\t\t\t\t'dragenter',\n\t\t\t\t\tmaybeDragStart\n\t\t\t\t);\n\t\t\t};\n\t\t},\n\t\t[ isDisabled, dropZoneElement ] // Refresh when the passed in dropZoneElement changes.\n\t);\n}\n"],"mappings":"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","ignoreList":[]}

package/build/hooks/use-event/index.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useEvent;
+var _element = require("@wordpress/element");
+/**
+ * WordPress dependencies
+ */
+
+/**
+ * Any function.
+ */
+
+/**
+ * Creates a stable callback function that has access to the latest state and
+ * can be used within event handlers and effect callbacks. Throws when used in
+ * the render phase.
+ *
+ * @param callback The callback function to wrap.
+ *
+ * @example
+ *
+ * ```tsx
+ * function Component( props ) {
+ *   const onClick = useEvent( props.onClick );
+ *   useEffect( () => {
+ *     onClick();
+ *     // Won't trigger the effect again when props.onClick is updated.
+ *   }, [ onClick ] );
+ *   // Won't re-render Button when props.onClick is updated (if `Button` is
+ *   // wrapped in `React.memo`).
+ *   return <Button onClick={ onClick } />;
+ * }
+ * ```
+ */
+function useEvent(
+/**
+ * The callback function to wrap.
+ */
+callback) {
+  const ref = (0, _element.useRef)(() => {
+    throw new Error('Callbacks created with `useEvent` cannot be called during rendering.');
+  });
+  (0, _element.useInsertionEffect)(() => {
+    ref.current = callback;
+  });
+  return (0, _element.useCallback)((...args) => ref.current?.(...args), []);
+}
+//# sourceMappingURL=index.js.map

package/build/hooks/use-event/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_element","require","useEvent","callback","ref","useRef","Error","useInsertionEffect","current","useCallback","args"],"sources":["@wordpress/compose/src/hooks/use-event/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useInsertionEffect, useCallback } from '@wordpress/element';\n\n/**\n * Any function.\n */\nexport type AnyFunction = ( ...args: any ) => any;\n\n/**\n * Creates a stable callback function that has access to the latest state and\n * can be used within event handlers and effect callbacks. Throws when used in\n * the render phase.\n *\n * @param callback The callback function to wrap.\n *\n * @example\n *\n * ```tsx\n * function Component( props ) {\n *   const onClick = useEvent( props.onClick );\n *   useEffect( () => {\n *     onClick();\n *     // Won't trigger the effect again when props.onClick is updated.\n *   }, [ onClick ] );\n *   // Won't re-render Button when props.onClick is updated (if `Button` is\n *   // wrapped in `React.memo`).\n *   return <Button onClick={ onClick } />;\n * }\n * ```\n */\nexport default function useEvent< T extends AnyFunction >(\n\t/**\n\t * The callback function to wrap.\n\t */\n\tcallback?: T\n) {\n\tconst ref = useRef< AnyFunction | undefined >( () => {\n\t\tthrow new Error(\n\t\t\t'Callbacks created with `useEvent` cannot be called during rendering.'\n\t\t);\n\t} );\n\tuseInsertionEffect( () => {\n\t\tref.current = callback;\n\t} );\n\treturn useCallback< AnyFunction >(\n\t\t( ...args ) => ref.current?.( ...args ),\n\t\t[]\n\t) as T;\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,QAAQA;AAC/B;AACD;AACA;AACCC,QAAY,EACX;EACD,MAAMC,GAAG,GAAG,IAAAC,eAAM,EAA6B,MAAM;IACpD,MAAM,IAAIC,KAAK,CACd,sEACD,CAAC;EACF,CAAE,CAAC;EACH,IAAAC,2BAAkB,EAAE,MAAM;IACzBH,GAAG,CAACI,OAAO,GAAGL,QAAQ;EACvB,CAAE,CAAC;EACH,OAAO,IAAAM,oBAAW,EACjB,CAAE,GAAGC,IAAI,KAAMN,GAAG,CAACI,OAAO,GAAI,GAAGE,IAAK,CAAC,EACvC,EACD,CAAC;AACF","ignoreList":[]}

package/build/hooks/use-focus-on-mount/index.js

@@ -56,7 +56,7 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
   };
 
   /** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */
-  const timerId = (0, _element.useRef)();
+  const timerIdRef = (0, _element.useRef)();
   (0, _element.useEffect)(() => {
     focusOnMountRef.current = focusOnMount;
   }, [focusOnMount]);
@@ -68,19 +68,19 @@ function useFocusOnMount(focusOnMount = 'firstElement') {
     if (node.contains((_node$ownerDocument$a = node.ownerDocument?.activeElement) !== null && _node$ownerDocument$a !== void 0 ? _node$ownerDocument$a : null)) {
       return;
     }
-    if (focusOnMountRef.current === 'firstElement') {
-      timerId.current = setTimeout(() => {
-        const firstTabbable = _dom.focus.tabbable.find(node)[0];
-        if (firstTabbable) {
-          setFocus(firstTabbable);
-        }
-      }, 0);
+    if (focusOnMountRef.current !== 'firstElement') {
+      setFocus(node);
       return;
     }
-    setFocus(node);
+    timerIdRef.current = setTimeout(() => {
+      const firstTabbable = _dom.focus.tabbable.find(node)[0];
+      if (firstTabbable) {
+        setFocus(firstTabbable);
+      }
+    }, 0);
     return () => {
-      if (timerId.current) {
-        clearTimeout(timerId.current);
+      if (timerIdRef.current) {
+        clearTimeout(timerIdRef.current);
       }
     };
   }, []);

package/build/hooks/use-focus-on-mount/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","_dom","_useRefEffect","_interopRequireDefault","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerId","useEffect","current","useRefEffect","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find","clearTimeout"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerId = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current === 'firstElement' ) {\n\t\t\ttimerId.current = setTimeout( () => {\n\t\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\n\t\t\t\tif ( firstTabbable ) {\n\t\t\t\t\tsetFocus( firstTabbable );\n\t\t\t\t}\n\t\t\t}, 0 );\n\n\t\t\treturn;\n\t\t}\n\n\t\tsetFocus( node );\n\n\t\treturn () => {\n\t\t\tif ( timerId.current ) {\n\t\t\t\tclearTimeout( timerId.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEF,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAMG,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACC,KAAK,CAAE;MACb;MACA;MACA;MACAC,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,OAAO,GAAG,IAAAL,eAAM,EAAC,CAAC;EAExB,IAAAM,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAACQ,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OAAO,IAAAU,qBAAY,EAAIC,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAChC,IAAK,CAAED,IAAI,IAAIV,eAAe,CAACQ,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKE,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKX,eAAe,CAACQ,OAAO,KAAK,cAAc,EAAG;MACjDF,OAAO,CAACE,OAAO,GAAGO,UAAU,CAAE,MAAM;QACnC,MAAMC,aAAa,GAAGZ,UAAK,CAACa,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;QAEtD,IAAKM,aAAa,EAAG;UACpBd,QAAQ,CAAEc,aAAc,CAAC;QAC1B;MACD,CAAC,EAAE,CAAE,CAAC;MAEN;IACD;IAEAd,QAAQ,CAAEQ,IAAK,CAAC;IAEhB,OAAO,MAAM;MACZ,IAAKJ,OAAO,CAACE,OAAO,EAAG;QACtBW,YAAY,CAAEb,OAAO,CAACE,OAAQ,CAAC;MAChC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}
+{"version":3,"names":["_element","require","_dom","_useRefEffect","_interopRequireDefault","useFocusOnMount","focusOnMount","focusOnMountRef","useRef","setFocus","target","focus","preventScroll","timerIdRef","useEffect","current","useRefEffect","node","_node$ownerDocument$a","contains","ownerDocument","activeElement","setTimeout","firstTabbable","tabbable","find","clearTimeout"],"sources":["@wordpress/compose/src/hooks/use-focus-on-mount/index.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useRef, useEffect } from '@wordpress/element';\nimport { focus } from '@wordpress/dom';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Hook used to focus the first tabbable element on mount.\n *\n * @param {boolean | 'firstElement'} focusOnMount Focus on mount mode.\n * @return {import('react').RefCallback<HTMLElement>} Ref callback.\n *\n * @example\n * ```js\n * import { useFocusOnMount } from '@wordpress/compose';\n *\n * const WithFocusOnMount = () => {\n *     const ref = useFocusOnMount()\n *     return (\n *         <div ref={ ref }>\n *             <Button />\n *             <Button />\n *         </div>\n *     );\n * }\n * ```\n */\nexport default function useFocusOnMount( focusOnMount = 'firstElement' ) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param {HTMLElement} target The DOM element to set focus to.\n\t * @return {void}\n\t */\n\tconst setFocus = ( target ) => {\n\t\ttarget.focus( {\n\t\t\t// When focusing newly mounted dialogs,\n\t\t\t// the position of the popover is often not right on the first render\n\t\t\t// This prevents the layout shifts when focusing the dialogs.\n\t\t\tpreventScroll: true,\n\t\t} );\n\t};\n\n\t/** @type {import('react').MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerIdRef = useRef();\n\n\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect( ( node ) => {\n\t\tif ( ! node || focusOnMountRef.current === false ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( node.contains( node.ownerDocument?.activeElement ?? null ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( focusOnMountRef.current !== 'firstElement' ) {\n\t\t\tsetFocus( node );\n\t\t\treturn;\n\t\t}\n\n\t\ttimerIdRef.current = setTimeout( () => {\n\t\t\tconst firstTabbable = focus.tabbable.find( node )[ 0 ];\n\t\t\tif ( firstTabbable ) {\n\t\t\t\tsetFocus( firstTabbable );\n\t\t\t}\n\t\t}, 0 );\n\n\t\treturn () => {\n\t\t\tif ( timerIdRef.current ) {\n\t\t\t\tclearTimeout( timerIdRef.current );\n\t\t\t}\n\t\t};\n\t}, [] );\n}\n"],"mappings":";;;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AACA,IAAAC,IAAA,GAAAD,OAAA;AAKA,IAAAE,aAAA,GAAAC,sBAAA,CAAAH,OAAA;AATA;AACA;AACA;;AAIA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASI,eAAeA,CAAEC,YAAY,GAAG,cAAc,EAAG;EACxE,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEF,YAAa,CAAC;;EAE9C;AACD;AACA;AACA;AACA;AACA;EACC,MAAMG,QAAQ,GAAKC,MAAM,IAAM;IAC9BA,MAAM,CAACC,KAAK,CAAE;MACb;MACA;MACA;MACAC,aAAa,EAAE;IAChB,CAAE,CAAC;EACJ,CAAC;;EAED;EACA,MAAMC,UAAU,GAAG,IAAAL,eAAM,EAAC,CAAC;EAE3B,IAAAM,kBAAS,EAAE,MAAM;IAChBP,eAAe,CAACQ,OAAO,GAAGT,YAAY;EACvC,CAAC,EAAE,CAAEA,YAAY,CAAG,CAAC;EAErB,OAAO,IAAAU,qBAAY,EAAIC,IAAI,IAAM;IAAA,IAAAC,qBAAA;IAChC,IAAK,CAAED,IAAI,IAAIV,eAAe,CAACQ,OAAO,KAAK,KAAK,EAAG;MAClD;IACD;IAEA,IAAKE,IAAI,CAACE,QAAQ,EAAAD,qBAAA,GAAED,IAAI,CAACG,aAAa,EAAEC,aAAa,cAAAH,qBAAA,cAAAA,qBAAA,GAAI,IAAK,CAAC,EAAG;MACjE;IACD;IAEA,IAAKX,eAAe,CAACQ,OAAO,KAAK,cAAc,EAAG;MACjDN,QAAQ,CAAEQ,IAAK,CAAC;MAChB;IACD;IAEAJ,UAAU,CAACE,OAAO,GAAGO,UAAU,CAAE,MAAM;MACtC,MAAMC,aAAa,GAAGZ,UAAK,CAACa,QAAQ,CAACC,IAAI,CAAER,IAAK,CAAC,CAAE,CAAC,CAAE;MACtD,IAAKM,aAAa,EAAG;QACpBd,QAAQ,CAAEc,aAAc,CAAC;MAC1B;IACD,CAAC,EAAE,CAAE,CAAC;IAEN,OAAO,MAAM;MACZ,IAAKV,UAAU,CAACE,OAAO,EAAG;QACzBW,YAAY,CAAEb,UAAU,CAACE,OAAQ,CAAC;MACnC;IACD,CAAC;EACF,CAAC,EAAE,EAAG,CAAC;AACR","ignoreList":[]}

package/build/hooks/use-focus-outside/index.js

@@ -55,18 +55,18 @@ function isFocusNormalizedButton(eventTarget) {
  * wrapping element element to capture when focus moves outside that element.
  */
 function useFocusOutside(onFocusOutside) {
-  const currentOnFocusOutside = (0, _element.useRef)(onFocusOutside);
+  const currentOnFocusOutsideRef = (0, _element.useRef)(onFocusOutside);
   (0, _element.useEffect)(() => {
-    currentOnFocusOutside.current = onFocusOutside;
+    currentOnFocusOutsideRef.current = onFocusOutside;
   }, [onFocusOutside]);
-  const preventBlurCheck = (0, _element.useRef)(false);
-  const blurCheckTimeoutId = (0, _element.useRef)();
+  const preventBlurCheckRef = (0, _element.useRef)(false);
+  const blurCheckTimeoutIdRef = (0, _element.useRef)();
 
   /**
    * Cancel a blur check timeout.
    */
   const cancelBlurCheck = (0, _element.useCallback)(() => {
-    clearTimeout(blurCheckTimeoutId.current);
+    clearTimeout(blurCheckTimeoutIdRef.current);
   }, []);
 
   // Cancel blur checks on unmount.
@@ -98,9 +98,9 @@ function useFocusOutside(onFocusOutside) {
     } = event;
     const isInteractionEnd = ['mouseup', 'touchend'].includes(type);
     if (isInteractionEnd) {
-      preventBlurCheck.current = false;
+      preventBlurCheckRef.current = false;
     } else if (isFocusNormalizedButton(target)) {
-      preventBlurCheck.current = true;
+      preventBlurCheckRef.current = true;
     }
   }, []);
 
@@ -117,7 +117,7 @@ function useFocusOutside(onFocusOutside) {
     event.persist();
 
     // Skip blur check if clicking button. See `normalizeButtonFocus`.
-    if (preventBlurCheck.current) {
+    if (preventBlurCheckRef.current) {
       return;
     }
 
@@ -132,7 +132,7 @@ function useFocusOutside(onFocusOutside) {
     if (ignoreForRelatedTarget && event.relatedTarget?.closest(ignoreForRelatedTarget)) {
       return;
     }
-    blurCheckTimeoutId.current = setTimeout(() => {
+    blurCheckTimeoutIdRef.current = setTimeout(() => {
       // If document is not focused then focus should remain
       // inside the wrapped component and therefore we cancel
       // this blur event thereby leaving focus in place.
@@ -141,8 +141,8 @@ function useFocusOutside(onFocusOutside) {
         event.preventDefault();
         return;
       }
-      if ('function' === typeof currentOnFocusOutside.current) {
-        currentOnFocusOutside.current(event);
+      if ('function' === typeof currentOnFocusOutsideRef.current) {
+        currentOnFocusOutsideRef.current(event);
       }
     }, 0);
   }, []);

package/build/hooks/use-focus-outside/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_element","require","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutside","useRef","useEffect","current","preventBlurCheck","blurCheckTimeoutId","cancelBlurCheck","useCallback","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n *                       the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutside = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutside.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheck = useRef( false );\n\n\tconst blurCheckTimeoutId = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutId.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheck.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheck.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheck.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutId.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutside.current ) {\n\t\t\t\tcurrentOnFocusOutside.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAQ,EAAE,QAAQ,CAAE;;AAEjD;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAC/BC,WAAwB,EACe;EACvC,IAAK,EAAIA,WAAW,YAAYC,MAAM,CAACC,WAAW,CAAE,EAAG;IACtD,OAAO,KAAK;EACb;EACA,QAASF,WAAW,CAACG,QAAQ;IAC5B,KAAK,GAAG;IACR,KAAK,QAAQ;MACZ,OAAO,IAAI;IAEZ,KAAK,OAAO;MACX,OAAOL,kBAAkB,CAACM,QAAQ,CAC/BJ,WAAW,CAAuBK,IACrC,CAAC;EACH;EAEA,OAAO,KAAK;AACb;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,eAAeA,CACtCC,cAAmE,EAC3C;EACxB,MAAMC,qBAAqB,GAAG,IAAAC,eAAM,EAAEF,cAAe,CAAC;EACtD,IAAAG,kBAAS,EAAE,MAAM;IAChBF,qBAAqB,CAACG,OAAO,GAAGJ,cAAc;EAC/C,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,MAAMK,gBAAgB,GAAG,IAAAH,eAAM,EAAE,KAAM,CAAC;EAExC,MAAMI,kBAAkB,GAAG,IAAAJ,eAAM,EAAuB,CAAC;;EAEzD;AACD;AACA;EACC,MAAMK,eAAe,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC1CC,YAAY,CAAEH,kBAAkB,CAACF,OAAQ,CAAC;EAC3C,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,IAAAD,kBAAS,EAAE,MAAM;IAChB,OAAO,MAAMI,eAAe,CAAC,CAAC;EAC/B,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,IAAAJ,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAEH,cAAc,EAAG;MACvBO,eAAe,CAAC,CAAC;IAClB;EACD,CAAC,EAAE,CAAEP,cAAc,EAAEO,eAAe,CAAG,CAAC;;EAExC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMG,oBAEL,GAAG,IAAAF,oBAAW,EAAIG,KAAK,IAAM;IAC7B,MAAM;MAAEb,IAAI;MAAEc;IAAO,CAAC,GAAGD,KAAK;IAC9B,MAAME,gBAAgB,GAAG,CAAE,SAAS,EAAE,UAAU,CAAE,CAAChB,QAAQ,CAAEC,IAAK,CAAC;IAEnE,IAAKe,gBAAgB,EAAG;MACvBR,gBAAgB,CAACD,OAAO,GAAG,KAAK;IACjC,CAAC,MAAM,IAAKZ,uBAAuB,CAAEoB,MAAO,CAAC,EAAG;MAC/CP,gBAAgB,CAACD,OAAO,GAAG,IAAI;IAChC;EACD,CAAC,EAAE,EAAG,CAAC;;EAEP;AACD;AACA;AACA;AACA;AACA;AACA;EACC,MAAMU,cAAuC,GAAG,IAAAN,oBAAW,EAAIG,KAAK,IAAM;IACzE;IACA;IACAA,KAAK,CAACI,OAAO,CAAC,CAAC;;IAEf;IACA,IAAKV,gBAAgB,CAACD,OAAO,EAAG;MAC/B;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMY,sBAAsB,GAAGL,KAAK,CAACC,MAAM,CAACK,YAAY,CACvD,sDACD,CAAC;IACD,IACCD,sBAAsB,IACtBL,KAAK,CAACO,aAAa,EAAEC,OAAO,CAAEH,sBAAuB,CAAC,EACrD;MACD;IACD;IAEAV,kBAAkB,CAACF,OAAO,GAAGgB,UAAU,CAAE,MAAM;MAC9C;MACA;MACA;MACA;MACA,IAAK,CAAEC,QAAQ,CAACC,QAAQ,CAAC,CAAC,EAAG;QAC5BX,KAAK,CAACY,cAAc,CAAC,CAAC;QACtB;MACD;MAEA,IAAK,UAAU,KAAK,OAAOtB,qBAAqB,CAACG,OAAO,EAAG;QAC1DH,qBAAqB,CAACG,OAAO,CAAEO,KAAM,CAAC;MACvC;IACD,CAAC,EAAE,CAAE,CAAC;EACP,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO;IACNa,OAAO,EAAEjB,eAAe;IACxBkB,WAAW,EAAEf,oBAAoB;IACjCgB,SAAS,EAAEhB,oBAAoB;IAC/BiB,YAAY,EAAEjB,oBAAoB;IAClCkB,UAAU,EAAElB,oBAAoB;IAChCmB,MAAM,EAAEf;EACT,CAAC;AACF","ignoreList":[]}
+{"version":3,"names":["_element","require","INPUT_BUTTON_TYPES","isFocusNormalizedButton","eventTarget","window","HTMLElement","nodeName","includes","type","useFocusOutside","onFocusOutside","currentOnFocusOutsideRef","useRef","useEffect","current","preventBlurCheckRef","blurCheckTimeoutIdRef","cancelBlurCheck","useCallback","clearTimeout","normalizeButtonFocus","event","target","isInteractionEnd","queueBlurCheck","persist","ignoreForRelatedTarget","getAttribute","relatedTarget","closest","setTimeout","document","hasFocus","preventDefault","onFocus","onMouseDown","onMouseUp","onTouchStart","onTouchEnd","onBlur"],"sources":["@wordpress/compose/src/hooks/use-focus-outside/index.ts"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useCallback, useEffect, useRef } from '@wordpress/element';\n\n/**\n * Input types which are classified as button types, for use in considering\n * whether element is a (focus-normalized) button.\n */\nconst INPUT_BUTTON_TYPES = [ 'button', 'submit' ];\n\n/**\n * List of HTML button elements subject to focus normalization\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n */\ntype FocusNormalizedButton =\n\t| HTMLButtonElement\n\t| HTMLLinkElement\n\t| HTMLInputElement;\n\n/**\n * Returns true if the given element is a button element subject to focus\n * normalization, or false otherwise.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n *\n * @param eventTarget The target from a mouse or touch event.\n *\n * @return Whether the element is a button element subject to focus normalization.\n */\nfunction isFocusNormalizedButton(\n\teventTarget: EventTarget\n): eventTarget is FocusNormalizedButton {\n\tif ( ! ( eventTarget instanceof window.HTMLElement ) ) {\n\t\treturn false;\n\t}\n\tswitch ( eventTarget.nodeName ) {\n\t\tcase 'A':\n\t\tcase 'BUTTON':\n\t\t\treturn true;\n\n\t\tcase 'INPUT':\n\t\t\treturn INPUT_BUTTON_TYPES.includes(\n\t\t\t\t( eventTarget as HTMLInputElement ).type\n\t\t\t);\n\t}\n\n\treturn false;\n}\n\ntype UseFocusOutsideReturn = {\n\tonFocus: React.FocusEventHandler;\n\tonMouseDown: React.MouseEventHandler;\n\tonMouseUp: React.MouseEventHandler;\n\tonTouchStart: React.TouchEventHandler;\n\tonTouchEnd: React.TouchEventHandler;\n\tonBlur: React.FocusEventHandler;\n};\n\n/**\n * A react hook that can be used to check whether focus has moved outside the\n * element the event handlers are bound to.\n *\n * @param onFocusOutside A callback triggered when focus moves outside\n *                       the element the event handlers are bound to.\n *\n * @return An object containing event handlers. Bind the event handlers to a\n * wrapping element element to capture when focus moves outside that element.\n */\nexport default function useFocusOutside(\n\tonFocusOutside: ( ( event: React.FocusEvent ) => void ) | undefined\n): UseFocusOutsideReturn {\n\tconst currentOnFocusOutsideRef = useRef( onFocusOutside );\n\tuseEffect( () => {\n\t\tcurrentOnFocusOutsideRef.current = onFocusOutside;\n\t}, [ onFocusOutside ] );\n\n\tconst preventBlurCheckRef = useRef( false );\n\n\tconst blurCheckTimeoutIdRef = useRef< number | undefined >();\n\n\t/**\n\t * Cancel a blur check timeout.\n\t */\n\tconst cancelBlurCheck = useCallback( () => {\n\t\tclearTimeout( blurCheckTimeoutIdRef.current );\n\t}, [] );\n\n\t// Cancel blur checks on unmount.\n\tuseEffect( () => {\n\t\treturn () => cancelBlurCheck();\n\t}, [] );\n\n\t// Cancel a blur check if the callback or ref is no longer provided.\n\tuseEffect( () => {\n\t\tif ( ! onFocusOutside ) {\n\t\t\tcancelBlurCheck();\n\t\t}\n\t}, [ onFocusOutside, cancelBlurCheck ] );\n\n\t/**\n\t * Handles a mousedown or mouseup event to respectively assign and\n\t * unassign a flag for preventing blur check on button elements. Some\n\t * browsers, namely Firefox and Safari, do not emit a focus event on\n\t * button elements when clicked, while others do. The logic here\n\t * intends to normalize this as treating click on buttons as focus.\n\t *\n\t * @param event\n\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n\t */\n\tconst normalizeButtonFocus: React.EventHandler<\n\t\tReact.MouseEvent | React.TouchEvent\n\t> = useCallback( ( event ) => {\n\t\tconst { type, target } = event;\n\t\tconst isInteractionEnd = [ 'mouseup', 'touchend' ].includes( type );\n\n\t\tif ( isInteractionEnd ) {\n\t\t\tpreventBlurCheckRef.current = false;\n\t\t} else if ( isFocusNormalizedButton( target ) ) {\n\t\t\tpreventBlurCheckRef.current = true;\n\t\t}\n\t}, [] );\n\n\t/**\n\t * A callback triggered when a blur event occurs on the element the handler\n\t * is bound to.\n\t *\n\t * Calls the `onFocusOutside` callback in an immediate timeout if focus has\n\t * move outside the bound element and is still within the document.\n\t */\n\tconst queueBlurCheck: React.FocusEventHandler = useCallback( ( event ) => {\n\t\t// React does not allow using an event reference asynchronously\n\t\t// due to recycling behavior, except when explicitly persisted.\n\t\tevent.persist();\n\n\t\t// Skip blur check if clicking button. See `normalizeButtonFocus`.\n\t\tif ( preventBlurCheckRef.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// The usage of this attribute should be avoided. The only use case\n\t\t// would be when we load modals that are not React components and\n\t\t// therefore don't exist in the React tree. An example is opening\n\t\t// the Media Library modal from another dialog.\n\t\t// This attribute should contain a selector of the related target\n\t\t// we want to ignore, because we still need to trigger the blur event\n\t\t// on all other cases.\n\t\tconst ignoreForRelatedTarget = event.target.getAttribute(\n\t\t\t'data-unstable-ignore-focus-outside-for-relatedtarget'\n\t\t);\n\t\tif (\n\t\t\tignoreForRelatedTarget &&\n\t\t\tevent.relatedTarget?.closest( ignoreForRelatedTarget )\n\t\t) {\n\t\t\treturn;\n\t\t}\n\n\t\tblurCheckTimeoutIdRef.current = setTimeout( () => {\n\t\t\t// If document is not focused then focus should remain\n\t\t\t// inside the wrapped component and therefore we cancel\n\t\t\t// this blur event thereby leaving focus in place.\n\t\t\t// https://developer.mozilla.org/en-US/docs/Web/API/Document/hasFocus.\n\t\t\tif ( ! document.hasFocus() ) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tif ( 'function' === typeof currentOnFocusOutsideRef.current ) {\n\t\t\t\tcurrentOnFocusOutsideRef.current( event );\n\t\t\t}\n\t\t}, 0 );\n\t}, [] );\n\n\treturn {\n\t\tonFocus: cancelBlurCheck,\n\t\tonMouseDown: normalizeButtonFocus,\n\t\tonMouseUp: normalizeButtonFocus,\n\t\tonTouchStart: normalizeButtonFocus,\n\t\tonTouchEnd: normalizeButtonFocus,\n\t\tonBlur: queueBlurCheck,\n\t};\n}\n"],"mappings":";;;;;;AAGA,IAAAA,QAAA,GAAAC,OAAA;AAHA;AACA;AACA;;AAGA;AACA;AACA;AACA;AACA,MAAMC,kBAAkB,GAAG,CAAE,QAAQ,EAAE,QAAQ,CAAE;;AAEjD;AACA;AACA;AACA;AACA;;AAMA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,uBAAuBA,CAC/BC,WAAwB,EACe;EACvC,IAAK,EAAIA,WAAW,YAAYC,MAAM,CAACC,WAAW,CAAE,EAAG;IACtD,OAAO,KAAK;EACb;EACA,QAASF,WAAW,CAACG,QAAQ;IAC5B,KAAK,GAAG;IACR,KAAK,QAAQ;MACZ,OAAO,IAAI;IAEZ,KAAK,OAAO;MACX,OAAOL,kBAAkB,CAACM,QAAQ,CAC/BJ,WAAW,CAAuBK,IACrC,CAAC;EACH;EAEA,OAAO,KAAK;AACb;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACe,SAASC,eAAeA,CACtCC,cAAmE,EAC3C;EACxB,MAAMC,wBAAwB,GAAG,IAAAC,eAAM,EAAEF,cAAe,CAAC;EACzD,IAAAG,kBAAS,EAAE,MAAM;IAChBF,wBAAwB,CAACG,OAAO,GAAGJ,cAAc;EAClD,CAAC,EAAE,CAAEA,cAAc,CAAG,CAAC;EAEvB,MAAMK,mBAAmB,GAAG,IAAAH,eAAM,EAAE,KAAM,CAAC;EAE3C,MAAMI,qBAAqB,GAAG,IAAAJ,eAAM,EAAuB,CAAC;;EAE5D;AACD;AACA;EACC,MAAMK,eAAe,GAAG,IAAAC,oBAAW,EAAE,MAAM;IAC1CC,YAAY,CAAEH,qBAAqB,CAACF,OAAQ,CAAC;EAC9C,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,IAAAD,kBAAS,EAAE,MAAM;IAChB,OAAO,MAAMI,eAAe,CAAC,CAAC;EAC/B,CAAC,EAAE,EAAG,CAAC;;EAEP;EACA,IAAAJ,kBAAS,EAAE,MAAM;IAChB,IAAK,CAAEH,cAAc,EAAG;MACvBO,eAAe,CAAC,CAAC;IAClB;EACD,CAAC,EAAE,CAAEP,cAAc,EAAEO,eAAe,CAAG,CAAC;;EAExC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;EACC,MAAMG,oBAEL,GAAG,IAAAF,oBAAW,EAAIG,KAAK,IAAM;IAC7B,MAAM;MAAEb,IAAI;MAAEc;IAAO,CAAC,GAAGD,KAAK;IAC9B,MAAME,gBAAgB,GAAG,CAAE,SAAS,EAAE,UAAU,CAAE,CAAChB,QAAQ,CAAEC,IAAK,CAAC;IAEnE,IAAKe,gBAAgB,EAAG;MACvBR,mBAAmB,CAACD,OAAO,GAAG,KAAK;IACpC,CAAC,MAAM,IAAKZ,uBAAuB,CAAEoB,MAAO,CAAC,EAAG;MAC/CP,mBAAmB,CAACD,OAAO,GAAG,IAAI;IACnC;EACD,CAAC,EAAE,EAAG,CAAC;;EAEP;AACD;AACA;AACA;AACA;AACA;AACA;EACC,MAAMU,cAAuC,GAAG,IAAAN,oBAAW,EAAIG,KAAK,IAAM;IACzE;IACA;IACAA,KAAK,CAACI,OAAO,CAAC,CAAC;;IAEf;IACA,IAAKV,mBAAmB,CAACD,OAAO,EAAG;MAClC;IACD;;IAEA;IACA;IACA;IACA;IACA;IACA;IACA;IACA,MAAMY,sBAAsB,GAAGL,KAAK,CAACC,MAAM,CAACK,YAAY,CACvD,sDACD,CAAC;IACD,IACCD,sBAAsB,IACtBL,KAAK,CAACO,aAAa,EAAEC,OAAO,CAAEH,sBAAuB,CAAC,EACrD;MACD;IACD;IAEAV,qBAAqB,CAACF,OAAO,GAAGgB,UAAU,CAAE,MAAM;MACjD;MACA;MACA;MACA;MACA,IAAK,CAAEC,QAAQ,CAACC,QAAQ,CAAC,CAAC,EAAG;QAC5BX,KAAK,CAACY,cAAc,CAAC,CAAC;QACtB;MACD;MAEA,IAAK,UAAU,KAAK,OAAOtB,wBAAwB,CAACG,OAAO,EAAG;QAC7DH,wBAAwB,CAACG,OAAO,CAAEO,KAAM,CAAC;MAC1C;IACD,CAAC,EAAE,CAAE,CAAC;EACP,CAAC,EAAE,EAAG,CAAC;EAEP,OAAO;IACNa,OAAO,EAAEjB,eAAe;IACxBkB,WAAW,EAAEf,oBAAoB;IACjCgB,SAAS,EAAEhB,oBAAoB;IAC/BiB,YAAY,EAAEjB,oBAAoB;IAClCkB,UAAU,EAAElB,oBAAoB;IAChCmB,MAAM,EAAEf;EACT,CAAC;AACF","ignoreList":[]}

package/build/hooks/use-keyboard-shortcut/index.js

@@ -46,9 +46,9 @@ shortcuts, callback, {
   // This is important for performance considerations.
   target
 } = {}) {
-  const currentCallback = (0, _element.useRef)(callback);
+  const currentCallbackRef = (0, _element.useRef)(callback);
   (0, _element.useEffect)(() => {
-    currentCallback.current = callback;
+    currentCallbackRef.current = callback;
   }, [callback]);
   (0, _element.useEffect)(() => {
     if (isDisabled) {
@@ -78,7 +78,7 @@ shortcuts, callback, {
       // @ts-ignore `bindGlobal` is an undocumented property
       mousetrap[bindFn](shortcut, ( /* eslint-disable jsdoc/valid-types */
       /** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */...args) => /* eslint-enable jsdoc/valid-types */
-      currentCallback.current(...args), eventName);
+      currentCallbackRef.current(...args), eventName);
     });
     return () => {
       mousetrap.reset();

package/build/hooks/use-keyboard-shortcut/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_mousetrap","_interopRequireDefault","require","_element","_keycodes","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallback","useRef","useEffect","current","mousetrap","Mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","isAppleOS","size","Error","bindFn","args","reset","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\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 {import('react').RefObject<HTMLElement>} [target]     React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\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: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback  Shortcut callback.\n * @param {WPKeyboardShortcutConfig}                                              options   Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\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 currentCallback = useRef( callback );\n\tuseEffect( () => {\n\t\tcurrentCallback.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/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\n\t\t\t\t\tcurrentCallback.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"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,eAAe,GAAG,IAAAC,eAAM,EAAEN,QAAS,CAAC;EAC1C,IAAAO,kBAAS,EAAE,MAAM;IAChBF,eAAe,CAACG,OAAO,GAAGR,QAAQ;EACnC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,IAAAO,kBAAS,EAAE,MAAM;IAChB,IAAKJ,UAAU,EAAG;MACjB;IACD;IACA,MAAMM,SAAS,GAAG,IAAIC,kBAAS,CAC9BN,MAAM,IAAIA,MAAM,CAACI,OAAO,GACrBJ,MAAM,CAACI,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBG,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEf,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBa,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACC,IAAAE,mBAAS,EAAC,CAAC,KACPR,SAAS,CAACS,IAAI,KAAK,CAAC,IAAIJ,MAAM,IAC/BL,SAAS,CAACS,IAAI,KAAK,CAAC,IAAIJ,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIG,KAAK,CACb,eAAeb,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMc,MAAM,GAAG7B,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAQ,SAAS,CAAEqB,MAAM,CAAE,CAClBd,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGe,IAAI,KAEpF;MACA1B,eAAe,CAACG,OAAO,CAAE,GAAGuB,IAAK,CAAC,EACnC7B,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZO,SAAS,CAACuB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAEjC,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrC,mBAAmB","ignoreList":[]}
+{"version":3,"names":["_mousetrap","_interopRequireDefault","require","_element","_keycodes","useKeyboardShortcut","shortcuts","callback","bindGlobal","eventName","isDisabled","target","currentCallbackRef","useRef","useEffect","current","mousetrap","Mousetrap","document","shortcutsArray","Array","isArray","forEach","shortcut","keys","split","modifiers","Set","filter","value","length","hasAlt","has","hasShift","isAppleOS","size","Error","bindFn","args","reset","_default","exports","default"],"sources":["@wordpress/compose/src/hooks/use-keyboard-shortcut/index.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport Mousetrap from 'mousetrap';\nimport 'mousetrap/plugins/global-bind/mousetrap-global-bind';\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 {import('react').RefObject<HTMLElement>} [target]     React reference to the DOM element used to catch the keyboard event.\n */\n\n/* eslint-disable jsdoc/valid-types */\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: import('mousetrap').ExtendedKeyboardEvent, combo: string) => void} callback  Shortcut callback.\n * @param {WPKeyboardShortcutConfig}                                              options   Shortcut options.\n */\nfunction useKeyboardShortcut(\n\t/* eslint-enable jsdoc/valid-types */\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/* eslint-disable jsdoc/valid-types */\n\t\t\t\t\t/** @type {[e: import('mousetrap').ExtendedKeyboardEvent, combo: string]} */ ...args\n\t\t\t\t) =>\n\t\t\t\t\t/* eslint-enable jsdoc/valid-types */\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"],"mappings":";;;;;;;AAGA,IAAAA,UAAA,GAAAC,sBAAA,CAAAC,OAAA;AACAA,OAAA;AAKA,IAAAC,QAAA,GAAAD,OAAA;AACA,IAAAE,SAAA,GAAAF,OAAA;AAVA;AACA;AACA;;AAIA;AACA;AACA;;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASG,mBAAmBA,CAAA,CAC3B;AACAC,SAAS,EACTC,QAAQ,EACR;EACCC,UAAU,GAAG,KAAK;EAClBC,SAAS,GAAG,SAAS;EACrBC,UAAU,GAAG,KAAK;EAAE;EACpBC;AACD,CAAC,GAAG,CAAC,CAAC,EACL;EACD,MAAMC,kBAAkB,GAAG,IAAAC,eAAM,EAAEN,QAAS,CAAC;EAC7C,IAAAO,kBAAS,EAAE,MAAM;IAChBF,kBAAkB,CAACG,OAAO,GAAGR,QAAQ;EACtC,CAAC,EAAE,CAAEA,QAAQ,CAAG,CAAC;EAEjB,IAAAO,kBAAS,EAAE,MAAM;IAChB,IAAKJ,UAAU,EAAG;MACjB;IACD;IACA,MAAMM,SAAS,GAAG,IAAIC,kBAAS,CAC9BN,MAAM,IAAIA,MAAM,CAACI,OAAO,GACrBJ,MAAM,CAACI,OAAO;IACd;IACA;IACA;IACA,uBAAyB;IAAyBG,QACtD,CAAC;IACD,MAAMC,cAAc,GAAGC,KAAK,CAACC,OAAO,CAAEf,SAAU,CAAC,GAC9CA,SAAS,GACT,CAAEA,SAAS,CAAE;IAChBa,cAAc,CAACG,OAAO,CAAIC,QAAQ,IAAM;MACvC,MAAMC,IAAI,GAAGD,QAAQ,CAACE,KAAK,CAAE,GAAI,CAAC;MAClC;MACA;MACA;MACA,MAAMC,SAAS,GAAG,IAAIC,GAAG,CACxBH,IAAI,CAACI,MAAM,CAAIC,KAAK,IAAMA,KAAK,CAACC,MAAM,GAAG,CAAE,CAC5C,CAAC;MACD,MAAMC,MAAM,GAAGL,SAAS,CAACM,GAAG,CAAE,KAAM,CAAC;MACrC,MAAMC,QAAQ,GAAGP,SAAS,CAACM,GAAG,CAAE,OAAQ,CAAC;;MAEzC;MACA,IACC,IAAAE,mBAAS,EAAC,CAAC,KACPR,SAAS,CAACS,IAAI,KAAK,CAAC,IAAIJ,MAAM,IAC/BL,SAAS,CAACS,IAAI,KAAK,CAAC,IAAIJ,MAAM,IAAIE,QAAU,CAAE,EAChD;QACD,MAAM,IAAIG,KAAK,CACb,eAAeb,QAAU,iEAC3B,CAAC;MACF;MAEA,MAAMc,MAAM,GAAG7B,UAAU,GAAG,YAAY,GAAG,MAAM;MACjD;MACAQ,SAAS,CAAEqB,MAAM,CAAE,CAClBd,QAAQ,EACR,EACC;MACA,4EAA6E,GAAGe,IAAI,KAEpF;MACA1B,kBAAkB,CAACG,OAAO,CAAE,GAAGuB,IAAK,CAAC,EACtC7B,SACD,CAAC;IACF,CAAE,CAAC;IAEH,OAAO,MAAM;MACZO,SAAS,CAACuB,KAAK,CAAC,CAAC;IAClB,CAAC;EACF,CAAC,EAAE,CAAEjC,SAAS,EAAEE,UAAU,EAAEC,SAAS,EAAEE,MAAM,EAAED,UAAU,CAAG,CAAC;AAC9D;AAAC,IAAA8B,QAAA,GAAAC,OAAA,CAAAC,OAAA,GAEcrC,mBAAmB","ignoreList":[]}

package/build/hooks/use-merge-refs/index.js

@@ -76,38 +76,38 @@ function assignRef(ref, value) {
  */
 function useMergeRefs(refs) {
   const element = (0, _element.useRef)();
-  const isAttached = (0, _element.useRef)(false);
-  const didElementChange = (0, _element.useRef)(false);
+  const isAttachedRef = (0, _element.useRef)(false);
+  const didElementChangeRef = (0, _element.useRef)(false);
   /* eslint-disable jsdoc/no-undefined-types */
   /** @type {import('react').MutableRefObject<TRef[]>} */
   /* eslint-enable jsdoc/no-undefined-types */
-  const previousRefs = (0, _element.useRef)([]);
-  const currentRefs = (0, _element.useRef)(refs);
+  const previousRefsRef = (0, _element.useRef)([]);
+  const currentRefsRef = (0, _element.useRef)(refs);
 
   // Update on render before the ref callback is called, so the ref callback
   // always has access to the current refs.
-  currentRefs.current = refs;
+  currentRefsRef.current = refs;
 
   // If any of the refs change, call the previous ref with `null` and the new
   // ref with the node, except when the element changes in the same cycle, in
   // which case the ref callbacks will already have been called.
   (0, _element.useLayoutEffect)(() => {
-    if (didElementChange.current === false && isAttached.current === true) {
+    if (didElementChangeRef.current === false && isAttachedRef.current === true) {
       refs.forEach((ref, index) => {
-        const previousRef = previousRefs.current[index];
+        const previousRef = previousRefsRef.current[index];
         if (ref !== previousRef) {
           assignRef(previousRef, null);
           assignRef(ref, element.current);
         }
       });
     }
-    previousRefs.current = refs;
+    previousRefsRef.current = refs;
   }, refs);
 
   // No dependencies, must be reset after every render so ref callbacks are
   // correctly called after a ref change.
   (0, _element.useLayoutEffect)(() => {
-    didElementChange.current = false;
+    didElementChangeRef.current = false;
   });
 
   // There should be no dependencies so that `callback` is only called when
@@ -116,12 +116,12 @@ function useMergeRefs(refs) {
     // Update the element so it can be used when calling ref callbacks on a
     // dependency change.
     assignRef(element, value);
-    didElementChange.current = true;
-    isAttached.current = value !== null;
+    didElementChangeRef.current = true;
+    isAttachedRef.current = value !== null;
 
     // When an element changes, the current ref callback should be called
     // with the new element and the previous one with `null`.
-    const refsToAssign = value ? currentRefs.current : previousRefs.current;
+    const refsToAssign = value ? currentRefsRef.current : previousRefsRef.current;
 
     // Update the latest refs.
     for (const ref of refsToAssign) {