@wordpress/compose 7.41.0 → 7.41.1-next.v.202603161435.0

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
 

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-module/hooks/use-copy-on-click/index.mjs

@@ -1,40 +1,65 @@
-// packages/compose/src/hooks/use-copy-on-click/index.js
-import Clipboard from "clipboard";
-import { useRef, useEffect, useState } from "@wordpress/element";
+// packages/compose/src/hooks/use-copy-on-click/index.ts
+import { useEffect, useState } from "@wordpress/element";
 import deprecated from "@wordpress/deprecated";
+import { clearSelection, copyToClipboard } from "../use-copy-to-clipboard/index.mjs";
 function useCopyOnClick(ref, text, timeout = 4e3) {
   deprecated("wp.compose.useCopyOnClick", {
     since: "5.8",
     alternative: "wp.compose.useCopyToClipboard"
   });
-  const clipboardRef = useRef(void 0);
   const [hasCopied, setHasCopied] = useState(false);
   useEffect(() => {
+    let isActive = true;
     let timeoutId;
     if (!ref.current) {
       return;
     }
-    clipboardRef.current = new Clipboard(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 copyToClipboard(
+        typeof text === "function" ? text() : text || "",
+        trigger
+      );
+      if (!isActive) {
+        return;
       }
-    });
+      if (success) {
+        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;
 }
 export {

package/build-module/hooks/use-copy-on-click/index.mjs.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": ";AAGA,OAAO,eAAe;AAKtB,SAAS,QAAQ,WAAW,gBAAgB;AAC5C,OAAO,gBAAgB;AAeR,SAAR,eAAiC,KAAK,MAAM,UAAU,KAAO;AACnE,aAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAGF,QAAM,eAAe,OAAQ,MAAU;AACvC,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAEpD,YAAW,MAAM;AAEhB,QAAI;AAEJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAGA,iBAAa,UAAU,IAAI,UAAW,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;",
+  "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": ";AAGA,SAAS,WAAW,gBAAgB;AACpC,OAAO,gBAAgB;AAMvB,SAAS,gBAAgB,uBAAuB;AAajC,SAAR,eACN,KACA,MACA,UAAkB,KACR;AACV,aAAY,6BAA6B;AAAA,IACxC,OAAO;AAAA,IACP,aAAa;AAAA,EACd,CAAE;AAEF,QAAM,CAAE,WAAW,YAAa,IAAI,SAAU,KAAM;AAEpD,YAAW,MAAM;AAEhB,QAAI,WAAW;AACf,QAAI;AACJ,QAAK,CAAE,IAAI,SAAU;AACpB;AAAA,IACD;AAEA,QAAI;AACJ,QAAK,OAAO,IAAI,YAAY,UAAW;AACtC,gBACC,OAAO,aAAa,cACjB,MAAM,KAAM,SAAS,iBAAkB,IAAI,OAAQ,CAAE,IACrD,CAAC;AAAA,IACN,WACC,YAAY,IAAI,WAChB,OAAO,IAAI,QAAQ,WAAW,UAC7B;AACD,gBAAU,MAAM,KAAM,IAAI,OAAQ;AAAA,IACnC,OAAO;AACN,gBAAU,CAAE,IAAI,OAAmB;AAAA,IACpC;AAEA,QAAK,QAAQ,WAAW,GAAI;AAC3B;AAAA,IACD;AAEA,UAAM,cAAc,OAAQ,UAAkB;AAC7C,YAAM,UAAU,MAAM;AACtB,UAAK,CAAE,SAAU;AAChB;AAAA,MACD;AACA,YAAM,UAAU,MAAM;AAAA,QACrB,OAAO,SAAS,aAAa,KAAK,IAAI,QAAQ;AAAA,QAC9C;AAAA,MACD;AACA,UAAK,CAAE,UAAW;AACjB;AAAA,MACD;AACA,UAAK,SAAU;AACd,uBAAgB,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": []
 }

package/build-module/hooks/use-copy-to-clipboard/index.mjs

@@ -1,7 +1,41 @@
-// packages/compose/src/hooks/use-copy-to-clipboard/index.js
-import Clipboard from "clipboard";
+// packages/compose/src/hooks/use-copy-to-clipboard/index.ts
 import { useRef, useLayoutEffect } from "@wordpress/element";
 import useRefEffect from "../use-ref-effect/index.mjs";
+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 = useRef(value);
   useLayoutEffect(() => {
@@ -13,23 +47,30 @@ function useCopyToClipboard(text, onSuccess) {
   const textRef = useUpdatedRef(text);
   const onSuccessRef = useUpdatedRef(onSuccess);
   return useRefEffect((node) => {
-    const clipboard = new Clipboard(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);
     };
   }, []);
 }
 export {
+  clearSelection,
+  copyToClipboard,
   useCopyToClipboard as default
 };
 //# sourceMappingURL=index.mjs.map

package/build-module/hooks/use-copy-to-clipboard/index.mjs.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": ";AAGA,OAAO,eAAe;AAKtB,SAAS,QAAQ,uBAAuB;AAKxC,OAAO,kBAAkB;AAOzB,SAAS,cAAe,OAAQ;AAC/B,QAAM,MAAM,OAAQ,KAAM;AAC1B,kBAAiB,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,SAAO,aAAc,CAAE,SAAU;AAEhC,UAAM,YAAY,IAAI,UAAW,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;",
+  "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": ";AAGA,SAAS,QAAQ,uBAAuB;AAMxC,OAAO,kBAAkB;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,MAAM,OAAa,KAAM;AAC/B,kBAAiB,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,SAAO,aAAc,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": []
 }

package/build-types/hooks/use-copy-on-click/index.d.ts

@@ -1,15 +1,14 @@
+import type { RefObject } from 'react';
 /**
  * Copies the text to the clipboard when the element is clicked.
  *
  * @deprecated
- *
- * @param {React.RefObject<string | Element | NodeListOf<Element>>} ref       Reference with the element.
- * @param {string|Function}                                         text      The text to copy.
- * @param {number}                                                  [timeout] Optional timeout to reset the returned
- *                                                                            state. 4 seconds by default.
- *
- * @return {boolean} Whether or not the text has been copied. Resets after the
- *                   timeout.
+ * @param ref      Reference with the element.
+ * @param text    The text to copy.
+ * @param timeout Optional timeout to reset the returned
+ *                state. 4 seconds by default.
+ * @return   Whether or not the text has been copied. Resets after the
+ *           timeout.
  */
-export default function useCopyOnClick(ref: React.RefObject<string | Element | NodeListOf<Element>>, text: string | Function, timeout?: number): boolean;
+export default function useCopyOnClick(ref: RefObject<string | Element | NodeListOf<Element>>, text: string | (() => string), timeout?: number): boolean;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-copy-on-click/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-on-click/index.js"],"names":[],"mappings":"AAWA;;;;;;;;;;;;GAYG;AACH,4CARW,KAAK,CAAC,SAAS,CAAC,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,CAAC,QACvD,MAAM,WAAS,YACf,MAAM,GAGL,OAAO,CAqDlB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-on-click/index.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOvC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CACrC,GAAG,EAAE,SAAS,CAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAE,OAAO,CAAE,CAAE,EAC1D,IAAI,EAAE,MAAM,GAAG,CAAE,MAAM,MAAM,CAAE,EAC/B,OAAO,GAAE,MAAa,GACpB,OAAO,CAyET"}

package/build-types/hooks/use-copy-to-clipboard/index.d.ts

@@ -1,12 +1,28 @@
+import type { RefCallback } from 'react';
+/**
+ * Copies text to the clipboard using the Clipboard API when available,
+ * with a fallback for non-secure contexts (e.g. HTTP) and older browsers.
+ *
+ * @param text    The text to copy.
+ * @param trigger The element that triggered the copy.
+ * @return Resolves to true if successful, false otherwise.
+ */
+export declare function copyToClipboard(text: string, trigger: Element | null): Promise<boolean>;
+/**
+ * Clears the current selection and restores focus to the trigger element.
+ *
+ * @param trigger The element that triggered the copy.
+ */
+export declare function clearSelection(trigger: Element): void;
 /**
  * Copies the given text to the clipboard when the element is clicked.
  *
- * @template {HTMLElement} TElementType
- * @param {string | (() => string)} text      The text to copy. Use a function if not
- *                                            already available and expensive to compute.
- * @param {Function}                onSuccess Called when to text is copied.
+ * @template T
+ * @param    text      The text to copy. Use a function if not
+ *                     already available and expensive to compute.
+ * @param    onSuccess Called when to text is copied.
  *
- * @return {React.Ref<TElementType>} A ref to assign to the target element.
+ * @return   A ref to assign to the target element.
  */
-export default function useCopyToClipboard<TElementType extends HTMLElement>(text: string | (() => string), onSuccess: Function): React.Ref<TElementType>;
+export default function useCopyToClipboard<T extends HTMLElement>(text: string | (() => string), onSuccess?: () => void): RefCallback<T>;
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-copy-to-clipboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-to-clipboard/index.js"],"names":[],"mappings":"AA4BA;;;;;;;;;GASG;AACH,2CAP2B,YAAY,SAAzB,WAAY,QACf,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,wBAItB,KAAK,CAAC,GAAG,CAAC,YAAY,CAAC,CAgClC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-copy-to-clipboard/index.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAoB,WAAW,EAAE,MAAM,OAAO,CAAC;AAO3D;;;;;;;GAOG;AACH,wBAAsB,eAAe,CACpC,IAAI,EAAE,MAAM,EACZ,OAAO,EAAE,OAAO,GAAG,IAAI,GACrB,OAAO,CAAE,OAAO,CAAE,CA6BpB;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAE,OAAO,EAAE,OAAO,GAAI,IAAI,CAKvD;AAeD;;;;;;;;;GASG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAE,CAAC,SAAS,WAAW,EAChE,IAAI,EAAE,MAAM,GAAG,CAAE,MAAM,MAAM,CAAE,EAC/B,SAAS,CAAC,EAAE,MAAM,IAAI,GACpB,WAAW,CAAE,CAAC,CAAE,CA4BlB"}

package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts

@@ -4,6 +4,6 @@ export default useIsomorphicLayoutEffect;
  * server rendered components (SSR) because currently React
  * throws a warning when using useLayoutEffect in that environment.
  */
-declare const useIsomorphicLayoutEffect: typeof useEffect;
-import { useEffect } from '@wordpress/element';
+declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;
+import { useLayoutEffect } from '@wordpress/element';
 //# sourceMappingURL=index.d.ts.map

package/build-types/hooks/use-isomorphic-layout-effect/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-isomorphic-layout-effect/index.js"],"names":[],"mappings":";AAKA;;;;GAIG;AACH,0DAC6D;0BARlB,oBAAoB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-isomorphic-layout-effect/index.js"],"names":[],"mappings":";AAKA;;;;GAIG;AACH,gEAC6D;gCARlB,oBAAoB"}