@wordpress/compose 7.40.1-next.v.202602271551.0 → 7.40.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+### New Features
+
+-   Hooks `useMediaQuery` and `useViewportMatch` accept a new optional `view` argument of type `Window`, which enables consumers to perform media queries in a window other than the global one (e.g. an iframe) ([#76446](https://github.com/WordPress/gutenberg/pull/76446)).
+
 ## 7.40.0 (2026-02-18)
 
 ## 7.39.0 (2026-01-29)

package/README.md

@@ -220,9 +220,9 @@ Copies the text to the clipboard when the element is clicked.
 
 _Parameters_
 
--   _ref_ `React.RefObject<string | Element | NodeListOf<Element>>`: Reference with the element.
--   _text_ `string|Function`: The text to copy.
--   _timeout_ `[number]`: Optional timeout to reset the returned state. 4 seconds by default.
+-   _ref_ `RefObject< string | Element | NodeListOf< Element > >`: Reference with the element.
+-   _text_ `string | ( () => string )`: The text to copy.
+-   _timeout_ `number`: Optional timeout to reset the returned state. 4 seconds by default.
 
 _Returns_
 
@@ -234,12 +234,12 @@ Copies the given text to the clipboard when the element is clicked.
 
 _Parameters_
 
--   _text_ `string | (() => string)`: The text to copy. Use a function if not already available and expensive to compute.
--   _onSuccess_ `Function`: Called when to text is copied.
+-   _text_ `string | ( () => string )`: The text to copy. Use a function if not already available and expensive to compute.
+-   _onSuccess_ `() => void`: Called when to text is copied.
 
 _Returns_
 
--   `React.Ref<TElementType>`: A ref to assign to the target element.
+-   `RefCallback< T >`: A ref to assign to the target element.
 
 ### useDebounce
 
@@ -338,7 +338,7 @@ _Returns_
 
 ### useFocusOnMount
 
-Determines focus behavior when the element mounts.
+Hook used to focus the first tabbable element on mount.
 
 _Usage_
 
@@ -358,11 +358,11 @@ const WithFocusOnMount = () => {
 
 _Parameters_
 
--   _focusOnMount_ `useFocusOnMount.Mode`: Behavioral mode. Defaults to `"firstElement"` which focuses the first tabbable element within; `"firstInputElement"` focuses the first value control within; `true` focuses the element itself; `false` does nothing.
+-   _focusOnMount_ `boolean | 'firstElement' | 'firstInputElement'`: Focus on mount mode.
 
 _Returns_
 
--   Ref callback.
+-   `React.RefCallback<HTMLElement>`: Ref callback.
 
 ### useFocusReturn
 
@@ -431,6 +431,7 @@ Runs a media query and returns its value when it changes.
 _Parameters_
 
 -   _query_ `[string]`: Media Query.
+-   _view_ `[Window]`: Window instance, else default to global window
 
 _Returns_
 
@@ -592,6 +593,7 @@ _Parameters_
 
 -   _breakpoint_ `WPBreakpoint`: Breakpoint size name.
 -   _operator_ `[WPViewportOperator]`: Viewport operator.
+-   _view_ `[Window]`: Window instance in which to perform viewport matching.
 
 _Returns_
 

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

@@ -27,48 +27,73 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-copy-on-click/index.js
+// packages/compose/src/hooks/use-copy-on-click/index.ts
 var use_copy_on_click_exports = {};
 __export(use_copy_on_click_exports, {
   default: () => useCopyOnClick
 });
 module.exports = __toCommonJS(use_copy_on_click_exports);
-var import_clipboard = __toESM(require("clipboard"));
 var import_element = require("@wordpress/element");
 var import_deprecated = __toESM(require("@wordpress/deprecated"));
+var import_use_copy_to_clipboard = require("../use-copy-to-clipboard/index.cjs");
 function useCopyOnClick(ref, text, timeout = 4e3) {
   (0, import_deprecated.default)("wp.compose.useCopyOnClick", {
     since: "5.8",
     alternative: "wp.compose.useCopyToClipboard"
   });
-  const clipboardRef = (0, import_element.useRef)(void 0);
   const [hasCopied, setHasCopied] = (0, import_element.useState)(false);
   (0, import_element.useEffect)(() => {
+    let isActive = true;
     let timeoutId;
     if (!ref.current) {
       return;
     }
-    clipboardRef.current = new import_clipboard.default(ref.current, {
-      text: () => typeof text === "function" ? text() : text
-    });
-    clipboardRef.current.on("success", ({ clearSelection, trigger }) => {
-      clearSelection();
-      if (trigger) {
-        trigger.focus();
+    let targets;
+    if (typeof ref.current === "string") {
+      targets = typeof document !== "undefined" ? Array.from(document.querySelectorAll(ref.current)) : [];
+    } else if ("length" in ref.current && typeof ref.current.length === "number") {
+      targets = Array.from(ref.current);
+    } else {
+      targets = [ref.current];
+    }
+    if (targets.length === 0) {
+      return;
+    }
+    const handleClick = async (event) => {
+      const trigger = event.currentTarget;
+      if (!trigger) {
+        return;
       }
-      if (timeout) {
-        setHasCopied(true);
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => setHasCopied(false), timeout);
+      const success = await (0, import_use_copy_to_clipboard.copyToClipboard)(
+        typeof text === "function" ? text() : text || "",
+        trigger
+      );
+      if (!isActive) {
+        return;
       }
-    });
+      if (success) {
+        (0, import_use_copy_to_clipboard.clearSelection)(trigger);
+        if (timeout) {
+          setHasCopied(true);
+          clearTimeout(timeoutId);
+          timeoutId = setTimeout(
+            () => setHasCopied(false),
+            timeout
+          );
+        }
+      }
+    };
+    for (const target of targets) {
+      target.addEventListener("click", handleClick);
+    }
     return () => {
-      if (clipboardRef.current) {
-        clipboardRef.current.destroy();
+      isActive = false;
+      for (const target of targets) {
+        target.removeEventListener("click", handleClick);
       }
       clearTimeout(timeoutId);
     };
-  }, [text, timeout, setHasCopied]);
+  }, [ref, text, timeout]);
   return hasCopied;
 }
 //# sourceMappingURL=index.cjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../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/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n *\n * @param {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\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\t/** @type {React.MutableRefObject<Clipboard | undefined>} */\n\tconst clipboardRef = useRef( undefined );\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AAKtB,qBAA4C;AAC5C,wBAAuB;AAeR,SAAR,eAAiC,KAAK,MAAM,UAAU,KAAO;AACnE,wBAAAA,SAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAGF,QAAM,mBAAe,uBAAQ,MAAU;AACvC,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAEpD,gCAAW,MAAM;AAEhB,QAAI;AAEJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAGA,iBAAa,UAAU,IAAI,iBAAAC,QAAW,IAAI,SAAS;AAAA,MAClD,MAAM,MAAQ,OAAO,SAAS,aAAa,KAAK,IAAI;AAAA,IACrD,CAAE;AAEF,iBAAa,QAAQ,GAAI,WAAW,CAAE,EAAE,gBAAgB,QAAQ,MAAO;AAItE,qBAAe;AAGf,UAAK,SAAU;AACa,QAAE,QAAU,MAAM;AAAA,MAC9C;AAEA,UAAK,SAAU;AACd,qBAAc,IAAK;AACnB,qBAAc,SAAU;AACxB,oBAAY,WAAY,MAAM,aAAc,KAAM,GAAG,OAAQ;AAAA,MAC9D;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,UAAK,aAAa,SAAU;AAC3B,qBAAa,QAAQ,QAAQ;AAAA,MAC9B;AACA,mBAAc,SAAU;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,MAAM,SAAS,YAAa,CAAE;AAEnC,SAAO;AACR;",
-  "names": ["deprecated", "Clipboard"]
+  "sources": ["../../../src/hooks/use-copy-on-click/index.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useEffect, useState } from '@wordpress/element';\nimport deprecated from '@wordpress/deprecated';\nimport type { RefObject } from 'react';\n\n/**\n * Internal dependencies\n */\nimport { clearSelection, copyToClipboard } from '../use-copy-to-clipboard';\n\n/**\n * Copies the text to the clipboard when the element is clicked.\n *\n * @deprecated\n * @param ref      Reference with the element.\n * @param text    The text to copy.\n * @param timeout Optional timeout to reset the returned\n *                state. 4 seconds by default.\n * @return   Whether or not the text has been copied. Resets after the\n *           timeout.\n */\nexport default function useCopyOnClick(\n\tref: RefObject< string | Element | NodeListOf< Element > >,\n\ttext: string | ( () => string ),\n\ttimeout: number = 4000\n): boolean {\n\tdeprecated( 'wp.compose.useCopyOnClick', {\n\t\tsince: '5.8',\n\t\talternative: 'wp.compose.useCopyToClipboard',\n\t} );\n\n\tconst [ hasCopied, setHasCopied ] = useState( false );\n\n\tuseEffect( () => {\n\t\t// Flag to prevent state updates after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tlet timeoutId: ReturnType< typeof setTimeout > | undefined;\n\t\tif ( ! ref.current ) {\n\t\t\treturn;\n\t\t}\n\n\t\tlet targets: Element[];\n\t\tif ( typeof ref.current === 'string' ) {\n\t\t\ttargets =\n\t\t\t\ttypeof document !== 'undefined'\n\t\t\t\t\t? Array.from( document.querySelectorAll( ref.current ) )\n\t\t\t\t\t: [];\n\t\t} else if (\n\t\t\t'length' in ref.current &&\n\t\t\ttypeof ref.current.length === 'number'\n\t\t) {\n\t\t\ttargets = Array.from( ref.current );\n\t\t} else {\n\t\t\ttargets = [ ref.current as Element ];\n\t\t}\n\n\t\tif ( targets.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleClick = async ( event: Event ) => {\n\t\t\tconst trigger = event.currentTarget as Element;\n\t\t\tif ( ! trigger ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst success = await copyToClipboard(\n\t\t\t\ttypeof text === 'function' ? text() : text || '',\n\t\t\t\ttrigger\n\t\t\t);\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\tclearSelection( trigger );\n\t\t\t\tif ( timeout ) {\n\t\t\t\t\tsetHasCopied( true );\n\t\t\t\t\tclearTimeout( timeoutId );\n\t\t\t\t\ttimeoutId = setTimeout(\n\t\t\t\t\t\t() => setHasCopied( false ),\n\t\t\t\t\t\ttimeout\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\n\t\tfor ( const target of targets ) {\n\t\t\ttarget.addEventListener( 'click', handleClick );\n\t\t}\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tfor ( const target of targets ) {\n\t\t\t\ttarget.removeEventListener( 'click', handleClick );\n\t\t\t}\n\t\t\tclearTimeout( timeoutId );\n\t\t};\n\t}, [ ref, text, timeout ] );\n\n\treturn hasCopied;\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAoC;AACpC,wBAAuB;AAMvB,mCAAgD;AAajC,SAAR,eACN,KACA,MACA,UAAkB,KACR;AACV,wBAAAA,SAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAEF,QAAM,CAAE,WAAW,YAAa,QAAI,yBAAU,KAAM;AAEpD,gCAAW,MAAM;AAEhB,QAAI,WAAW;AACf,QAAI;AACJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAEA,QAAI;AACJ,QAAK,OAAO,IAAI,YAAY,UAAW;AACtC,gBACC,OAAO,aAAa,cACjB,MAAM,KAAM,SAAS,iBAAkB,IAAI,OAAQ,CAAE,IACrD,CAAC;AAAA,IACN,WACC,YAAY,IAAI,WAChB,OAAO,IAAI,QAAQ,WAAW,UAC7B;AACD,gBAAU,MAAM,KAAM,IAAI,OAAQ;AAAA,IACnC,OAAO;AACN,gBAAU,CAAE,IAAI,OAAmB;AAAA,IACpC;AAEA,QAAK,QAAQ,WAAW,GAAI;AAC3B;AAAA,IACD;AAEA,UAAM,cAAc,OAAQ,UAAkB;AAC7C,YAAM,UAAU,MAAM;AACtB,UAAK,CAAE,SAAU;AAChB;AAAA,MACD;AACA,YAAM,UAAU,UAAM;AAAA,QACrB,OAAO,SAAS,aAAa,KAAK,IAAI,QAAQ;AAAA,QAC9C;AAAA,MACD;AACA,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AACA,UAAK,SAAU;AACd,yDAAgB,OAAQ;AACxB,YAAK,SAAU;AACd,uBAAc,IAAK;AACnB,uBAAc,SAAU;AACxB,sBAAY;AAAA,YACX,MAAM,aAAc,KAAM;AAAA,YAC1B;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,IACD;AAEA,eAAY,UAAU,SAAU;AAC/B,aAAO,iBAAkB,SAAS,WAAY;AAAA,IAC/C;AACA,WAAO,MAAM;AACZ,iBAAW;AACX,iBAAY,UAAU,SAAU;AAC/B,eAAO,oBAAqB,SAAS,WAAY;AAAA,MAClD;AACA,mBAAc,SAAU;AAAA,IACzB;AAAA,EACD,GAAG,CAAE,KAAK,MAAM,OAAQ,CAAE;AAE1B,SAAO;AACR;",
+  "names": ["deprecated"]
 }

package/build/hooks/use-copy-to-clipboard/index.cjs

@@ -27,15 +27,51 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-copy-to-clipboard/index.js
+// packages/compose/src/hooks/use-copy-to-clipboard/index.ts
 var use_copy_to_clipboard_exports = {};
 __export(use_copy_to_clipboard_exports, {
+  clearSelection: () => clearSelection,
+  copyToClipboard: () => copyToClipboard,
   default: () => useCopyToClipboard
 });
 module.exports = __toCommonJS(use_copy_to_clipboard_exports);
-var import_clipboard = __toESM(require("clipboard"));
 var import_element = require("@wordpress/element");
 var import_use_ref_effect = __toESM(require("../use-ref-effect/index.cjs"));
+async function copyToClipboard(text, trigger) {
+  if (!trigger) {
+    return false;
+  }
+  const { ownerDocument } = trigger;
+  if (!ownerDocument) {
+    return false;
+  }
+  const { defaultView } = ownerDocument;
+  try {
+    if (defaultView?.navigator?.clipboard?.writeText) {
+      await defaultView.navigator.clipboard.writeText(text);
+      return true;
+    }
+    const textarea = ownerDocument.createElement("textarea");
+    textarea.value = text;
+    textarea.setAttribute("readonly", "");
+    textarea.style.position = "fixed";
+    textarea.style.left = "-9999px";
+    textarea.style.top = "-9999px";
+    ownerDocument.body.appendChild(textarea);
+    textarea.select();
+    const success = ownerDocument.execCommand("copy");
+    textarea.remove();
+    return success;
+  } catch {
+    return false;
+  }
+}
+function clearSelection(trigger) {
+  if ("focus" in trigger && typeof trigger.focus === "function") {
+    trigger.focus();
+  }
+  trigger.ownerDocument?.defaultView?.getSelection()?.removeAllRanges();
+}
 function useUpdatedRef(value) {
   const ref = (0, import_element.useRef)(value);
   (0, import_element.useLayoutEffect)(() => {
@@ -47,20 +83,30 @@ function useCopyToClipboard(text, onSuccess) {
   const textRef = useUpdatedRef(text);
   const onSuccessRef = useUpdatedRef(onSuccess);
   return (0, import_use_ref_effect.default)((node) => {
-    const clipboard = new import_clipboard.default(node, {
-      text() {
-        return typeof textRef.current === "function" ? textRef.current() : textRef.current || "";
+    let isActive = true;
+    const handleClick = async () => {
+      const textToCopy = typeof textRef.current === "function" ? textRef.current() : textRef.current || "";
+      const success = await copyToClipboard(textToCopy, node);
+      if (!isActive) {
+        return;
       }
-    });
-    clipboard.on("success", ({ clearSelection }) => {
-      clearSelection();
-      if (onSuccessRef.current) {
-        onSuccessRef.current();
+      if (success) {
+        clearSelection(node);
+        if (onSuccessRef.current) {
+          onSuccessRef.current();
+        }
       }
-    });
+    };
+    node.addEventListener("click", handleClick);
     return () => {
-      clipboard.destroy();
+      isActive = false;
+      node.removeEventListener("click", handleClick);
     };
   }, []);
 }
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  clearSelection,
+  copyToClipboard
+});
 //# sourceMappingURL=index.cjs.map

package/build/hooks/use-copy-to-clipboard/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-copy-to-clipboard/index.js"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport Clipboard from 'clipboard';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * @template T\n * @param {T} value\n * @return {React.RefObject<T>} The updated ref\n */\nfunction useUpdatedRef( value ) {\n\tconst ref = useRef( value );\n\tuseLayoutEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] );\n\treturn ref;\n}\n\n/**\n * Copies the given text to the clipboard when the element is clicked.\n *\n * @template {HTMLElement} TElementType\n * @param {string | (() => string)} text      The text to copy. Use a function if not\n *                                            already available and expensive to compute.\n * @param {Function}                onSuccess Called when to text is copied.\n *\n * @return {React.Ref<TElementType>} A ref to assign to the target element.\n */\nexport default function useCopyToClipboard( text, onSuccess ) {\n\t// Store the dependencies as refs and continuously update them so they're\n\t// fresh when the callback is called.\n\tconst textRef = useUpdatedRef( text );\n\tconst onSuccessRef = useUpdatedRef( onSuccess );\n\treturn useRefEffect( ( node ) => {\n\t\t// Clipboard listens to click events.\n\t\tconst clipboard = new Clipboard( node, {\n\t\t\ttext() {\n\t\t\t\treturn typeof textRef.current === 'function'\n\t\t\t\t\t? textRef.current()\n\t\t\t\t\t: textRef.current || '';\n\t\t\t},\n\t\t} );\n\n\t\tclipboard.on( 'success', ( { clearSelection } ) => {\n\t\t\t// Clearing selection will move focus back to the triggering\n\t\t\t// button, ensuring that it is not reset to the body, and\n\t\t\t// further that it is kept within the rendered node.\n\t\t\tclearSelection();\n\n\t\t\tif ( onSuccessRef.current ) {\n\t\t\t\tonSuccessRef.current();\n\t\t\t}\n\t\t} );\n\n\t\treturn () => {\n\t\t\tclipboard.destroy();\n\t\t};\n\t}, [] );\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAsB;AAKtB,qBAAwC;AAKxC,4BAAyB;AAOzB,SAAS,cAAe,OAAQ;AAC/B,QAAM,UAAM,uBAAQ,KAAM;AAC1B,sCAAiB,MAAM;AACtB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AACb,SAAO;AACR;AAYe,SAAR,mBAAqC,MAAM,WAAY;AAG7D,QAAM,UAAU,cAAe,IAAK;AACpC,QAAM,eAAe,cAAe,SAAU;AAC9C,aAAO,sBAAAA,SAAc,CAAE,SAAU;AAEhC,UAAM,YAAY,IAAI,iBAAAC,QAAW,MAAM;AAAA,MACtC,OAAO;AACN,eAAO,OAAO,QAAQ,YAAY,aAC/B,QAAQ,QAAQ,IAChB,QAAQ,WAAW;AAAA,MACvB;AAAA,IACD,CAAE;AAEF,cAAU,GAAI,WAAW,CAAE,EAAE,eAAe,MAAO;AAIlD,qBAAe;AAEf,UAAK,aAAa,SAAU;AAC3B,qBAAa,QAAQ;AAAA,MACtB;AAAA,IACD,CAAE;AAEF,WAAO,MAAM;AACZ,gBAAU,QAAQ;AAAA,IACnB;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
-  "names": ["useRefEffect", "Clipboard"]
+  "sources": ["../../../src/hooks/use-copy-to-clipboard/index.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useRef, useLayoutEffect } from '@wordpress/element';\nimport type { MutableRefObject, RefCallback } from 'react';\n\n/**\n * Internal dependencies\n */\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Copies text to the clipboard using the Clipboard API when available,\n * with a fallback for non-secure contexts (e.g. HTTP) and older browsers.\n *\n * @param text    The text to copy.\n * @param trigger The element that triggered the copy.\n * @return Resolves to true if successful, false otherwise.\n */\nexport async function copyToClipboard(\n\ttext: string,\n\ttrigger: Element | null\n): Promise< boolean > {\n\tif ( ! trigger ) {\n\t\treturn false;\n\t}\n\tconst { ownerDocument } = trigger;\n\tif ( ! ownerDocument ) {\n\t\treturn false;\n\t}\n\tconst { defaultView } = ownerDocument;\n\ttry {\n\t\tif ( defaultView?.navigator?.clipboard?.writeText ) {\n\t\t\tawait defaultView.navigator.clipboard.writeText( text );\n\t\t\treturn true;\n\t\t}\n\t\t// Fallback for non-secure contexts (HTTP) and older browsers.\n\t\tconst textarea = ownerDocument.createElement( 'textarea' );\n\t\ttextarea.value = text;\n\t\ttextarea.setAttribute( 'readonly', '' );\n\t\ttextarea.style.position = 'fixed';\n\t\ttextarea.style.left = '-9999px';\n\t\ttextarea.style.top = '-9999px';\n\t\townerDocument.body.appendChild( textarea );\n\t\ttextarea.select();\n\t\tconst success = ownerDocument.execCommand( 'copy' );\n\t\ttextarea.remove();\n\t\treturn success;\n\t} catch {\n\t\treturn false;\n\t}\n}\n\n/**\n * Clears the current selection and restores focus to the trigger element.\n *\n * @param trigger The element that triggered the copy.\n */\nexport function clearSelection( trigger: Element ): void {\n\tif ( 'focus' in trigger && typeof trigger.focus === 'function' ) {\n\t\ttrigger.focus();\n\t}\n\ttrigger.ownerDocument?.defaultView?.getSelection()?.removeAllRanges();\n}\n\n/**\n * @template T\n * @param    value\n * @return   A ref to assign to the target element.\n */\nfunction useUpdatedRef< T >( value: T ): MutableRefObject< T > {\n\tconst ref = useRef< T >( value );\n\tuseLayoutEffect( () => {\n\t\tref.current = value;\n\t}, [ value ] );\n\treturn ref;\n}\n\n/**\n * Copies the given text to the clipboard when the element is clicked.\n *\n * @template T\n * @param    text      The text to copy. Use a function if not\n *                     already available and expensive to compute.\n * @param    onSuccess Called when to text is copied.\n *\n * @return   A ref to assign to the target element.\n */\nexport default function useCopyToClipboard< T extends HTMLElement >(\n\ttext: string | ( () => string ),\n\tonSuccess?: () => void\n): RefCallback< T > {\n\tconst textRef = useUpdatedRef( text );\n\tconst onSuccessRef = useUpdatedRef( onSuccess );\n\treturn useRefEffect( ( node ) => {\n\t\t// Flag to prevent callbacks after unmount when the Promise resolves.\n\t\tlet isActive = true;\n\t\tconst handleClick = async () => {\n\t\t\tconst textToCopy =\n\t\t\t\ttypeof textRef.current === 'function'\n\t\t\t\t\t? textRef.current()\n\t\t\t\t\t: textRef.current || '';\n\t\t\tconst success = await copyToClipboard( textToCopy, node );\n\t\t\tif ( ! isActive ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tif ( success ) {\n\t\t\t\tclearSelection( node );\n\t\t\t\tif ( onSuccessRef.current ) {\n\t\t\t\t\tonSuccessRef.current();\n\t\t\t\t}\n\t\t\t}\n\t\t};\n\t\tnode.addEventListener( 'click', handleClick );\n\t\treturn () => {\n\t\t\tisActive = false;\n\t\t\tnode.removeEventListener( 'click', handleClick );\n\t\t};\n\t}, [] );\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAwC;AAMxC,4BAAyB;AAUzB,eAAsB,gBACrB,MACA,SACqB;AACrB,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AACA,QAAM,EAAE,cAAc,IAAI;AAC1B,MAAK,CAAE,eAAgB;AACtB,WAAO;AAAA,EACR;AACA,QAAM,EAAE,YAAY,IAAI;AACxB,MAAI;AACH,QAAK,aAAa,WAAW,WAAW,WAAY;AACnD,YAAM,YAAY,UAAU,UAAU,UAAW,IAAK;AACtD,aAAO;AAAA,IACR;AAEA,UAAM,WAAW,cAAc,cAAe,UAAW;AACzD,aAAS,QAAQ;AACjB,aAAS,aAAc,YAAY,EAAG;AACtC,aAAS,MAAM,WAAW;AAC1B,aAAS,MAAM,OAAO;AACtB,aAAS,MAAM,MAAM;AACrB,kBAAc,KAAK,YAAa,QAAS;AACzC,aAAS,OAAO;AAChB,UAAM,UAAU,cAAc,YAAa,MAAO;AAClD,aAAS,OAAO;AAChB,WAAO;AAAA,EACR,QAAQ;AACP,WAAO;AAAA,EACR;AACD;AAOO,SAAS,eAAgB,SAAyB;AACxD,MAAK,WAAW,WAAW,OAAO,QAAQ,UAAU,YAAa;AAChE,YAAQ,MAAM;AAAA,EACf;AACA,UAAQ,eAAe,aAAa,aAAa,GAAG,gBAAgB;AACrE;AAOA,SAAS,cAAoB,OAAkC;AAC9D,QAAM,UAAM,uBAAa,KAAM;AAC/B,sCAAiB,MAAM;AACtB,QAAI,UAAU;AAAA,EACf,GAAG,CAAE,KAAM,CAAE;AACb,SAAO;AACR;AAYe,SAAR,mBACN,MACA,WACmB;AACnB,QAAM,UAAU,cAAe,IAAK;AACpC,QAAM,eAAe,cAAe,SAAU;AAC9C,aAAO,sBAAAA,SAAc,CAAE,SAAU;AAEhC,QAAI,WAAW;AACf,UAAM,cAAc,YAAY;AAC/B,YAAM,aACL,OAAO,QAAQ,YAAY,aACxB,QAAQ,QAAQ,IAChB,QAAQ,WAAW;AACvB,YAAM,UAAU,MAAM,gBAAiB,YAAY,IAAK;AACxD,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AACA,UAAK,SAAU;AACd,uBAAgB,IAAK;AACrB,YAAK,aAAa,SAAU;AAC3B,uBAAa,QAAQ;AAAA,QACtB;AAAA,MACD;AAAA,IACD;AACA,SAAK,iBAAkB,SAAS,WAAY;AAC5C,WAAO,MAAM;AACZ,iBAAW;AACX,WAAK,oBAAqB,SAAS,WAAY;AAAA,IAChD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "names": ["useRefEffect"]
 }

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

@@ -36,7 +36,7 @@ module.exports = __toCommonJS(use_dialog_exports);
 var import_element = require("@wordpress/element");
 var import_keycodes = require("@wordpress/keycodes");
 var import_use_constrained_tabbing = __toESM(require("../use-constrained-tabbing/index.cjs"));
-var import_use_focus_on_mount = require("../use-focus-on-mount/index.cjs");
+var import_use_focus_on_mount = __toESM(require("../use-focus-on-mount/index.cjs"));
 var import_use_focus_return = __toESM(require("../use-focus-return/index.cjs"));
 var import_use_focus_outside = __toESM(require("../use-focus-outside/index.cjs"));
 var import_use_merge_refs = __toESM(require("../use-merge-refs/index.cjs"));
@@ -47,7 +47,7 @@ function useDialog(options) {
     currentOptions.current = options;
   }, Object.values(options));
   const constrainedTabbingRef = (0, import_use_constrained_tabbing.default)();
-  const focusOnMountRef = (0, import_use_focus_on_mount.useFocusOnMount)(options.focusOnMount);
+  const focusOnMountRef = (0, import_use_focus_on_mount.default)(options.focusOnMount);
   const focusReturnRef = (0, import_use_focus_return.default)();
   const focusOutsideProps = (0, import_use_focus_outside.default)((event) => {
     if (currentOptions.current?.__unstableOnClose) {

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-dialog/index.ts"],
-  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport { useFocusOnMount } from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines focus behavior when the dialog mounts.\n\t *\n\t * - `\"firstElement\"` focuses the first tabbable element within.\n\t * - `\"firstInputElement\"` focuses the first value control within.\n\t * - `true` focuses the element itself.\n\t * - `false` does nothing and _should not be used unless an accessible\n\t *    substitute behavior is implemented_.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: useFocusOnMount.Mode;\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+C;AAC/C,sBAAuB;AAKvB,qCAAkC;AAClC,gCAAgC;AAChC,8BAA2B;AAC3B,+BAA4B;AAC5B,4BAAyB;AAoDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,qBAAiB,uBAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,gCAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,4BAAwB,+BAAAA,SAAsB;AACpD,QAAM,sBAAkB,2CAAiB,QAAQ,YAAa;AAC9D,QAAM,qBAAiB,wBAAAC,SAAe;AACtC,QAAM,wBAAoB,yBAAAC,SAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,uBAAmB,4BAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,0BAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,QACN,sBAAAC,SAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
-  "names": ["useConstrainedTabbing", "useFocusReturn", "useFocusOutside", "useMergeRefs"]
+  "sourcesContent": ["/**\n * External dependencies\n */\nimport type { RefCallback, SyntheticEvent } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { useRef, useEffect, useCallback } from '@wordpress/element';\nimport { ESCAPE } from '@wordpress/keycodes';\n\n/**\n * Internal dependencies\n */\nimport useConstrainedTabbing from '../use-constrained-tabbing';\nimport useFocusOnMount from '../use-focus-on-mount';\nimport useFocusReturn from '../use-focus-return';\nimport useFocusOutside from '../use-focus-outside';\nimport useMergeRefs from '../use-merge-refs';\n\ntype DialogOptions = {\n\t/**\n\t * Determines whether focus should be automatically moved to the popover\n\t * when it mounts. `false` causes no focus shift, `true` causes the popover\n\t * itself to gain focus, and `firstElement` focuses the first focusable\n\t * element within the popover.\n\t *\n\t * @default 'firstElement'\n\t */\n\tfocusOnMount?: Parameters< typeof useFocusOnMount >[ 0 ];\n\t/**\n\t * Determines whether tabbing is constrained to within the popover,\n\t * preventing keyboard focus from leaving the popover content without\n\t * explicit focus elsewhere, or whether the popover remains part of the\n\t * wider tab order.\n\t * If no value is passed, it will be derived from `focusOnMount`.\n\t *\n\t * @see focusOnMount\n\t * @default `focusOnMount` !== false\n\t */\n\tconstrainTabbing?: boolean;\n\tonClose?: () => void;\n\t/**\n\t * Use the `onClose` prop instead.\n\t *\n\t * @deprecated\n\t */\n\t__unstableOnClose?: (\n\t\ttype: string | undefined,\n\t\tevent: SyntheticEvent\n\t) => void;\n};\n\ntype useDialogReturn = [\n\tRefCallback< HTMLElement >,\n\tReturnType< typeof useFocusOutside > & Pick< HTMLElement, 'tabIndex' >,\n];\n\n/**\n * Returns a ref and props to apply to a dialog wrapper to enable the following behaviors:\n *  - constrained tabbing.\n *  - focus on mount.\n *  - return focus on unmount.\n *  - focus outside.\n *\n * @param options Dialog Options.\n */\nfunction useDialog( options: DialogOptions ): useDialogReturn {\n\tconst currentOptions = useRef< DialogOptions >( undefined );\n\tconst { constrainTabbing = options.focusOnMount !== false } = options;\n\tuseEffect( () => {\n\t\tcurrentOptions.current = options;\n\t}, Object.values( options ) );\n\tconst constrainedTabbingRef = useConstrainedTabbing();\n\tconst focusOnMountRef = useFocusOnMount( options.focusOnMount );\n\tconst focusReturnRef = useFocusReturn();\n\tconst focusOutsideProps = useFocusOutside( ( event ) => {\n\t\t// This unstable prop  is here only to manage backward compatibility\n\t\t// for the Popover component otherwise, the onClose should be enough.\n\t\tif ( currentOptions.current?.__unstableOnClose ) {\n\t\t\tcurrentOptions.current.__unstableOnClose( 'focus-outside', event );\n\t\t} else if ( currentOptions.current?.onClose ) {\n\t\t\tcurrentOptions.current.onClose();\n\t\t}\n\t} );\n\tconst closeOnEscapeRef = useCallback( ( node: HTMLElement ) => {\n\t\tif ( ! node ) {\n\t\t\treturn;\n\t\t}\n\n\t\tnode.addEventListener( 'keydown', ( event: KeyboardEvent ) => {\n\t\t\t// Close on escape.\n\t\t\tif (\n\t\t\t\tevent.keyCode === ESCAPE &&\n\t\t\t\t! event.defaultPrevented &&\n\t\t\t\tcurrentOptions.current?.onClose\n\t\t\t) {\n\t\t\t\tevent.preventDefault();\n\t\t\t\tcurrentOptions.current.onClose();\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn [\n\t\tuseMergeRefs( [\n\t\t\tconstrainTabbing ? constrainedTabbingRef : null,\n\t\t\toptions.focusOnMount !== false ? focusReturnRef : null,\n\t\t\toptions.focusOnMount !== false ? focusOnMountRef : null,\n\t\t\tcloseOnEscapeRef,\n\t\t] ),\n\t\t{\n\t\t\t...focusOutsideProps,\n\t\t\ttabIndex: -1,\n\t\t},\n\t];\n}\n\nexport default useDialog;\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAQA,qBAA+C;AAC/C,sBAAuB;AAKvB,qCAAkC;AAClC,gCAA4B;AAC5B,8BAA2B;AAC3B,+BAA4B;AAC5B,4BAAyB;AAiDzB,SAAS,UAAW,SAA0C;AAC7D,QAAM,qBAAiB,uBAAyB,MAAU;AAC1D,QAAM,EAAE,mBAAmB,QAAQ,iBAAiB,MAAM,IAAI;AAC9D,gCAAW,MAAM;AAChB,mBAAe,UAAU;AAAA,EAC1B,GAAG,OAAO,OAAQ,OAAQ,CAAE;AAC5B,QAAM,4BAAwB,+BAAAA,SAAsB;AACpD,QAAM,sBAAkB,0BAAAC,SAAiB,QAAQ,YAAa;AAC9D,QAAM,qBAAiB,wBAAAC,SAAe;AACtC,QAAM,wBAAoB,yBAAAC,SAAiB,CAAE,UAAW;AAGvD,QAAK,eAAe,SAAS,mBAAoB;AAChD,qBAAe,QAAQ,kBAAmB,iBAAiB,KAAM;AAAA,IAClE,WAAY,eAAe,SAAS,SAAU;AAC7C,qBAAe,QAAQ,QAAQ;AAAA,IAChC;AAAA,EACD,CAAE;AACF,QAAM,uBAAmB,4BAAa,CAAE,SAAuB;AAC9D,QAAK,CAAE,MAAO;AACb;AAAA,IACD;AAEA,SAAK,iBAAkB,WAAW,CAAE,UAA0B;AAE7D,UACC,MAAM,YAAY,0BAClB,CAAE,MAAM,oBACR,eAAe,SAAS,SACvB;AACD,cAAM,eAAe;AACrB,uBAAe,QAAQ,QAAQ;AAAA,MAChC;AAAA,IACD,CAAE;AAAA,EACH,GAAG,CAAC,CAAE;AAEN,SAAO;AAAA,QACN,sBAAAC,SAAc;AAAA,MACb,mBAAmB,wBAAwB;AAAA,MAC3C,QAAQ,iBAAiB,QAAQ,iBAAiB;AAAA,MAClD,QAAQ,iBAAiB,QAAQ,kBAAkB;AAAA,MACnD;AAAA,IACD,CAAE;AAAA,IACF;AAAA,MACC,GAAG;AAAA,MACH,UAAU;AAAA,IACX;AAAA,EACD;AACD;AAEA,IAAO,qBAAQ;",
+  "names": ["useConstrainedTabbing", "useFocusOnMount", "useFocusReturn", "useFocusOutside", "useMergeRefs"]
 }

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

@@ -27,14 +27,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-focus-on-mount/index.ts
+// packages/compose/src/hooks/use-focus-on-mount/index.js
 var use_focus_on_mount_exports = {};
 __export(use_focus_on_mount_exports, {
-  useFocusOnMount: () => useFocusOnMount
+  default: () => useFocusOnMount
 });
 module.exports = __toCommonJS(use_focus_on_mount_exports);
-var import_dom = require("@wordpress/dom");
 var import_element = require("@wordpress/element");
+var import_dom = require("@wordpress/dom");
 var import_use_ref_effect = __toESM(require("../use-ref-effect/index.cjs"));
 function useFocusOnMount(focusOnMount = "firstElement") {
   const focusOnMountRef = (0, import_element.useRef)(focusOnMount);
@@ -46,11 +46,12 @@ function useFocusOnMount(focusOnMount = "firstElement") {
       preventScroll: true
     });
   };
+  const timerIdRef = (0, import_element.useRef)(void 0);
   (0, import_element.useEffect)(() => {
     focusOnMountRef.current = focusOnMount;
   }, [focusOnMount]);
   return (0, import_use_ref_effect.default)((node) => {
-    if (focusOnMountRef.current === false) {
+    if (!node || focusOnMountRef.current === false) {
       return;
     }
     if (node.contains(node.ownerDocument?.activeElement ?? null)) {
@@ -60,11 +61,14 @@ function useFocusOnMount(focusOnMount = "firstElement") {
       setFocus(node);
       return;
     }
-    const timerId = setTimeout(() => {
+    timerIdRef.current = setTimeout(() => {
       if (focusOnMountRef.current === "firstInputElement") {
-        const formInput = node.querySelector(
-          'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled])'
-        );
+        let formInput = null;
+        if (typeof window !== "undefined" && node instanceof window.Element) {
+          formInput = node.querySelector(
+            'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled])'
+          );
+        }
         if (formInput) {
           setFocus(formInput);
           return;
@@ -76,12 +80,10 @@ function useFocusOnMount(focusOnMount = "firstElement") {
       }
     }, 0);
     return () => {
-      clearTimeout(timerId);
+      if (timerIdRef.current) {
+        clearTimeout(timerIdRef.current);
+      }
     };
   }, []);
 }
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useFocusOnMount
-});
 //# sourceMappingURL=index.cjs.map

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-focus-on-mount/index.ts"],
-  "sourcesContent": ["import { focus } from '@wordpress/dom';\nimport { useEffect, useRef } from '@wordpress/element';\nimport useRefEffect from '../use-ref-effect';\n\n/**\n * Determines focus behavior when the element mounts.\n *\n * @param focusOnMount Behavioral mode. Defaults to `\"firstElement\"` which focuses the\n *                     first tabbable element within; `\"firstInputElement\"` focuses the\n *                     first value control within; `true` focuses the element itself;\n *                     `false` does nothing.\n * @return 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 function useFocusOnMount(\n\tfocusOnMount: useFocusOnMount.Mode = 'firstElement'\n) {\n\tconst focusOnMountRef = useRef( focusOnMount );\n\n\t/**\n\t * Sets focus on a DOM element.\n\t *\n\t * @param target The DOM element to set focus to.\n\t */\n\tconst setFocus = ( target: HTMLElement ): void => {\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\tuseEffect( () => {\n\t\tfocusOnMountRef.current = focusOnMount;\n\t}, [ focusOnMount ] );\n\n\treturn useRefEffect< HTMLElement >( ( node ) => {\n\t\tif ( 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 (\n\t\t\tfocusOnMountRef.current !== 'firstElement' &&\n\t\t\tfocusOnMountRef.current !== 'firstInputElement'\n\t\t) {\n\t\t\tsetFocus( node );\n\t\t\treturn;\n\t\t}\n\n\t\tconst timerId = setTimeout( () => {\n\t\t\t// For 'firstInputElement' mode, try to find a form input element first\n\t\t\tif ( focusOnMountRef.current === 'firstInputElement' ) {\n\t\t\t\tconst formInput = node.querySelector< HTMLElement >(\n\t\t\t\t\t'input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled])'\n\t\t\t\t);\n\n\t\t\t\tif ( formInput ) {\n\t\t\t\t\tsetFocus( formInput );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Fallback to the first tabbable element\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\tclearTimeout( timerId );\n\t\t};\n\t}, [] );\n}\n\nexport namespace useFocusOnMount {\n\texport type Mode = boolean | 'firstElement' | 'firstInputElement';\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAAsB;AACtB,qBAAkC;AAClC,4BAAyB;AA0BlB,SAAS,gBACf,eAAqC,gBACpC;AACD,QAAM,sBAAkB,uBAAQ,YAAa;AAO7C,QAAM,WAAW,CAAE,WAA+B;AACjD,WAAO,MAAO;AAAA;AAAA;AAAA;AAAA,MAIb,eAAe;AAAA,IAChB,CAAE;AAAA,EACH;AAEA,gCAAW,MAAM;AAChB,oBAAgB,UAAU;AAAA,EAC3B,GAAG,CAAE,YAAa,CAAE;AAEpB,aAAO,sBAAAA,SAA6B,CAAE,SAAU;AAC/C,QAAK,gBAAgB,YAAY,OAAQ;AACxC;AAAA,IACD;AAEA,QAAK,KAAK,SAAU,KAAK,eAAe,iBAAiB,IAAK,GAAI;AACjE;AAAA,IACD;AAEA,QACC,gBAAgB,YAAY,kBAC5B,gBAAgB,YAAY,qBAC3B;AACD,eAAU,IAAK;AACf;AAAA,IACD;AAEA,UAAM,UAAU,WAAY,MAAM;AAEjC,UAAK,gBAAgB,YAAY,qBAAsB;AACtD,cAAM,YAAY,KAAK;AAAA,UACtB;AAAA,QACD;AAEA,YAAK,WAAY;AAChB,mBAAU,SAAU;AACpB;AAAA,QACD;AAAA,MACD;AAGA,YAAM,gBAAgB,iBAAM,SAAS,KAAM,IAAK,EAAG,CAAE;AACrD,UAAK,eAAgB;AACpB,iBAAU,aAAc;AAAA,MACzB;AAAA,IACD,GAAG,CAAE;AAEL,WAAO,MAAM;AACZ,mBAAc,OAAQ;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
+  "sources": ["../../../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' | 'firstInputElement'} focusOnMount Focus on mount mode.\n * @return {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 {React.MutableRefObject<ReturnType<setTimeout> | undefined>} */\n\tconst timerIdRef = useRef( undefined );\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 (\n\t\t\tfocusOnMountRef.current !== 'firstElement' &&\n\t\t\tfocusOnMountRef.current !== 'firstInputElement'\n\t\t) {\n\t\t\tsetFocus( node );\n\t\t\treturn;\n\t\t}\n\n\t\ttimerIdRef.current = setTimeout( () => {\n\t\t\t// For 'firstInputElement' mode, try to find a form input element first\n\t\t\tif ( focusOnMountRef.current === 'firstInputElement' ) {\n\t\t\t\t/** @type {HTMLElement | null} */\n\t\t\t\tlet formInput = null;\n\t\t\t\tif (\n\t\t\t\t\ttypeof window !== 'undefined' &&\n\t\t\t\t\tnode instanceof window.Element\n\t\t\t\t) {\n\t\t\t\t\tformInput = node.querySelector(\n\t\t\t\t\t\t'input:not([type=\"hidden\"]):not([disabled]), select:not([disabled]), textarea:not([disabled])'\n\t\t\t\t\t);\n\t\t\t\t}\n\n\t\t\t\tif ( formInput ) {\n\t\t\t\t\tsetFocus( formInput );\n\t\t\t\t\treturn;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t// Fallback to the first tabbable element\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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAAkC;AAClC,iBAAsB;AAKtB,4BAAyB;AAuBV,SAAR,gBAAkC,eAAe,gBAAiB;AACxE,QAAM,sBAAkB,uBAAQ,YAAa;AAQ7C,QAAM,WAAW,CAAE,WAAY;AAC9B,WAAO,MAAO;AAAA;AAAA;AAAA;AAAA,MAIb,eAAe;AAAA,IAChB,CAAE;AAAA,EACH;AAGA,QAAM,iBAAa,uBAAQ,MAAU;AAErC,gCAAW,MAAM;AAChB,oBAAgB,UAAU;AAAA,EAC3B,GAAG,CAAE,YAAa,CAAE;AAEpB,aAAO,sBAAAA,SAAc,CAAE,SAAU;AAChC,QAAK,CAAE,QAAQ,gBAAgB,YAAY,OAAQ;AAClD;AAAA,IACD;AAEA,QAAK,KAAK,SAAU,KAAK,eAAe,iBAAiB,IAAK,GAAI;AACjE;AAAA,IACD;AAEA,QACC,gBAAgB,YAAY,kBAC5B,gBAAgB,YAAY,qBAC3B;AACD,eAAU,IAAK;AACf;AAAA,IACD;AAEA,eAAW,UAAU,WAAY,MAAM;AAEtC,UAAK,gBAAgB,YAAY,qBAAsB;AAEtD,YAAI,YAAY;AAChB,YACC,OAAO,WAAW,eAClB,gBAAgB,OAAO,SACtB;AACD,sBAAY,KAAK;AAAA,YAChB;AAAA,UACD;AAAA,QACD;AAEA,YAAK,WAAY;AAChB,mBAAU,SAAU;AACpB;AAAA,QACD;AAAA,MACD;AAGA,YAAM,gBAAgB,iBAAM,SAAS,KAAM,IAAK,EAAG,CAAE;AACrD,UAAK,eAAgB;AACpB,iBAAU,aAAc;AAAA,MACzB;AAAA,IACD,GAAG,CAAE;AAEL,WAAO,MAAM;AACZ,UAAK,WAAW,SAAU;AACzB,qBAAc,WAAW,OAAQ;AAAA,MAClC;AAAA,IACD;AAAA,EACD,GAAG,CAAC,CAAE;AACP;",
   "names": ["useRefEffect"]
 }

package/build/hooks/use-media-query/index.cjs

@@ -17,34 +17,37 @@ var __copyProps = (to, from, except, desc) => {
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-// packages/compose/src/hooks/use-media-query/index.js
+// packages/compose/src/hooks/use-media-query/index.ts
 var use_media_query_exports = {};
 __export(use_media_query_exports, {
   default: () => useMediaQuery
 });
 module.exports = __toCommonJS(use_media_query_exports);
 var import_element = require("@wordpress/element");
-var matchMediaCache = /* @__PURE__ */ new Map();
-function getMediaQueryList(query) {
+var perWindowCache = /* @__PURE__ */ new WeakMap();
+function getMediaQueryList(view, query) {
   if (!query) {
     return null;
   }
+  const matchMediaCache = perWindowCache.get(view) ?? /* @__PURE__ */ new Map();
+  if (!perWindowCache.has(view)) {
+    perWindowCache.set(view, matchMediaCache);
+  }
   let match = matchMediaCache.get(query);
   if (match) {
     return match;
   }
-  if (typeof window !== "undefined" && typeof window.matchMedia === "function") {
-    match = window.matchMedia(query);
+  if (typeof view?.matchMedia === "function") {
+    match = view.matchMedia(query);
     matchMediaCache.set(query, match);
     return match;
   }
   return null;
 }
-function useMediaQuery(query) {
+function useMediaQuery(query, view = window) {
   const source = (0, import_element.useMemo)(() => {
-    const mediaQueryList = getMediaQueryList(query);
+    const mediaQueryList = getMediaQueryList(view, query);
     return {
-      /** @type {(onStoreChange: () => void) => () => void} */
       subscribe(onStoreChange) {
         if (!mediaQueryList) {
           return () => {
@@ -62,7 +65,7 @@ function useMediaQuery(query) {
         return mediaQueryList?.matches ?? false;
       }
     };
-  }, [query]);
+  }, [view, query]);
   return (0, import_element.useSyncExternalStore)(
     source.subscribe,
     source.getValue,

package/build/hooks/use-media-query/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../src/hooks/use-media-query/index.js"],
-  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\nconst matchMediaCache = new Map();\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param {string} [query] Media Query.\n * @return {MediaQueryList|null} A new object for the media query\n */\nfunction getMediaQueryList( query ) {\n\tif ( ! query ) {\n\t\treturn null;\n\t}\n\n\tlet match = matchMediaCache.get( query );\n\n\tif ( match ) {\n\t\treturn match;\n\t}\n\n\tif (\n\t\ttypeof window !== 'undefined' &&\n\t\ttypeof window.matchMedia === 'function'\n\t) {\n\t\tmatch = window.matchMedia( query );\n\t\tmatchMediaCache.set( query, match );\n\t\treturn match;\n\t}\n\n\treturn null;\n}\n\n/**\n * Runs a media query and returns its value when it changes.\n *\n * @param {string} [query] Media Query.\n * @return {boolean} return value of the media query.\n */\nexport default function useMediaQuery( query ) {\n\tconst source = useMemo( () => {\n\t\tconst mediaQueryList = getMediaQueryList( query );\n\n\t\treturn {\n\t\t\t/** @type {(onStoreChange: () => void) => () => void} */\n\t\t\tsubscribe( onStoreChange ) {\n\t\t\t\tif ( ! mediaQueryList ) {\n\t\t\t\t\treturn () => {};\n\t\t\t\t}\n\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', onStoreChange );\n\t\t\t\treturn () => {\n\t\t\t\t\tmediaQueryList.removeEventListener?.(\n\t\t\t\t\t\t'change',\n\t\t\t\t\t\tonStoreChange\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetValue() {\n\t\t\t\treturn mediaQueryList?.matches ?? false;\n\t\t\t},\n\t\t};\n\t}, [ query ] );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAE9C,IAAM,kBAAkB,oBAAI,IAAI;AAQhC,SAAS,kBAAmB,OAAQ;AACnC,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,MAAI,QAAQ,gBAAgB,IAAK,KAAM;AAEvC,MAAK,OAAQ;AACZ,WAAO;AAAA,EACR;AAEA,MACC,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,YAC5B;AACD,YAAQ,OAAO,WAAY,KAAM;AACjC,oBAAgB,IAAK,OAAO,KAAM;AAClC,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AAQe,SAAR,cAAgC,OAAQ;AAC9C,QAAM,aAAS,wBAAS,MAAM;AAC7B,UAAM,iBAAiB,kBAAmB,KAAM;AAEhD,WAAO;AAAA;AAAA,MAEN,UAAW,eAAgB;AAC1B,YAAK,CAAE,gBAAiB;AACvB,iBAAO,MAAM;AAAA,UAAC;AAAA,QACf;AAGA,uBAAe,mBAAoB,UAAU,aAAc;AAC3D,eAAO,MAAM;AACZ,yBAAe;AAAA,YACd;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,WAAW;AACV,eAAO,gBAAgB,WAAW;AAAA,MACnC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,KAAM,CAAE;AAEb,aAAO;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;",
+  "sources": ["../../../src/hooks/use-media-query/index.ts"],
+  "sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { useMemo, useSyncExternalStore } from '@wordpress/element';\n\ntype MQLCache = Map< string, MediaQueryList >;\n\nconst perWindowCache = new WeakMap< Window, MQLCache >();\n\n/**\n * A new MediaQueryList object for the media query\n *\n * @param view    Window.\n * @param [query] Media Query.\n */\nfunction getMediaQueryList(\n\tview: Window,\n\tquery?: string\n): MediaQueryList | null {\n\tif ( ! query ) {\n\t\treturn null;\n\t}\n\n\tconst matchMediaCache: MQLCache = perWindowCache.get( view ) ?? new Map();\n\n\tif ( ! perWindowCache.has( view ) ) {\n\t\tperWindowCache.set( view, matchMediaCache );\n\t}\n\n\tlet match = matchMediaCache.get( query );\n\n\tif ( match ) {\n\t\treturn match;\n\t}\n\n\tif ( typeof view?.matchMedia === 'function' ) {\n\t\tmatch = view.matchMedia( query );\n\t\tmatchMediaCache.set( query, match );\n\t\treturn match;\n\t}\n\n\treturn null;\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 = useMemo( () => {\n\t\tconst mediaQueryList = getMediaQueryList( view, query );\n\n\t\treturn {\n\t\t\tsubscribe( onStoreChange: any ) {\n\t\t\t\tif ( ! mediaQueryList ) {\n\t\t\t\t\treturn () => {};\n\t\t\t\t}\n\n\t\t\t\t// Avoid a fatal error when browsers don't support `addEventListener` on MediaQueryList.\n\t\t\t\tmediaQueryList.addEventListener?.( 'change', onStoreChange );\n\t\t\t\treturn () => {\n\t\t\t\t\tmediaQueryList.removeEventListener?.(\n\t\t\t\t\t\t'change',\n\t\t\t\t\t\tonStoreChange\n\t\t\t\t\t);\n\t\t\t\t};\n\t\t\t},\n\t\t\tgetValue() {\n\t\t\t\treturn mediaQueryList?.matches ?? false;\n\t\t\t},\n\t\t};\n\t}, [ view, query ] );\n\n\treturn useSyncExternalStore(\n\t\tsource.subscribe,\n\t\tsource.getValue,\n\t\t() => false\n\t);\n}\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA8C;AAI9C,IAAM,iBAAiB,oBAAI,QAA4B;AAQvD,SAAS,kBACR,MACA,OACwB;AACxB,MAAK,CAAE,OAAQ;AACd,WAAO;AAAA,EACR;AAEA,QAAM,kBAA4B,eAAe,IAAK,IAAK,KAAK,oBAAI,IAAI;AAExE,MAAK,CAAE,eAAe,IAAK,IAAK,GAAI;AACnC,mBAAe,IAAK,MAAM,eAAgB;AAAA,EAC3C;AAEA,MAAI,QAAQ,gBAAgB,IAAK,KAAM;AAEvC,MAAK,OAAQ;AACZ,WAAO;AAAA,EACR;AAEA,MAAK,OAAO,MAAM,eAAe,YAAa;AAC7C,YAAQ,KAAK,WAAY,KAAM;AAC/B,oBAAgB,IAAK,OAAO,KAAM;AAClC,WAAO;AAAA,EACR;AAEA,SAAO;AACR;AASe,SAAR,cACN,OACA,OAAe,QACL;AACV,QAAM,aAAS,wBAAS,MAAM;AAC7B,UAAM,iBAAiB,kBAAmB,MAAM,KAAM;AAEtD,WAAO;AAAA,MACN,UAAW,eAAqB;AAC/B,YAAK,CAAE,gBAAiB;AACvB,iBAAO,MAAM;AAAA,UAAC;AAAA,QACf;AAGA,uBAAe,mBAAoB,UAAU,aAAc;AAC3D,eAAO,MAAM;AACZ,yBAAe;AAAA,YACd;AAAA,YACA;AAAA,UACD;AAAA,QACD;AAAA,MACD;AAAA,MACA,WAAW;AACV,eAAO,gBAAgB,WAAW;AAAA,MACnC;AAAA,IACD;AAAA,EACD,GAAG,CAAE,MAAM,KAAM,CAAE;AAEnB,aAAO;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA,EACP;AACD;",
   "names": []
 }

package/build/hooks/use-viewport-match/index.cjs

@@ -58,10 +58,10 @@ var ViewportMatchWidthContext = (0, import_element.createContext)(
   null
 );
 ViewportMatchWidthContext.displayName = "ViewportMatchWidthContext";
-var useViewportMatch = (breakpoint, operator = ">=") => {
+var useViewportMatch = (breakpoint, operator = ">=", view = window) => {
   const simulatedWidth = (0, import_element.useContext)(ViewportMatchWidthContext);
   const mediaQuery = !simulatedWidth && `(${CONDITIONS[operator]}: ${BREAKPOINTS[breakpoint]}px)`;
-  const mediaQueryResult = (0, import_use_media_query.default)(mediaQuery || void 0);
+  const mediaQueryResult = (0, import_use_media_query.default)(mediaQuery || void 0, view);
   if (simulatedWidth) {
     return OPERATOR_EVALUATORS[operator](
       BREAKPOINTS[breakpoint],

package/build/hooks/use-viewport-match/index.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/use-viewport-match/index.js"],
-  "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 *\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 = '>=' ) => {\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 );\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,6BAA0B;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,gCAA4B;AAAA;AAAA,EACF;AAChC;AACA,0BAA0B,cAAc;AAiBxC,IAAM,mBAAmB,CAAE,YAAY,WAAW,SAAU;AAC3D,QAAM,qBAAiB,2BAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,uBAAmB,uBAAAA,SAAe,cAAc,MAAU;AAChE,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;",
+  "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"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,qBAA0C;AAK1C,6BAA0B;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,gCAA4B;AAAA;AAAA,EACF;AAChC;AACA,0BAA0B,cAAc;AAkBxC,IAAM,mBAAmB,CAAE,YAAY,WAAW,MAAM,OAAO,WAAY;AAC1E,QAAM,qBAAiB,2BAAY,yBAA0B;AAC7D,QAAM,aACL,CAAE,kBACF,IAAK,WAAY,QAAS,CAAE,KAAM,YAAa,UAAW,CAAE;AAC7D,QAAM,uBAAmB,uBAAAA,SAAe,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;",
   "names": ["useMediaQuery"]
 }