@cfx-dev/ui-components 2.1.15 → 2.1.16

package/dist/components/ClipboardButton/ClipboardButton.d.ts

@@ -1,15 +1,9 @@
 import { default as React } from 'react';
 import { ButtonProps } from '../Button/Button';
 import { FixedOn } from '../Title/Title';
+import { UseClipboardProps } from '../../utils/hooks';
 
-export declare const CLIPBOARD_TITLE_APPEARANCE = 1000;
-export interface ClipboardButtonOnlyProps {
-    hoverTitle?: string;
-    copiedTitle: string;
-    textToCopy: string;
-    titleAppearanceTimeout?: number;
-}
-export type ClipboardButtonProps = ButtonProps & ClipboardButtonOnlyProps & {
+export type ClipboardButtonProps = ButtonProps & UseClipboardProps & {
     fixedOn?: FixedOn;
 };
 declare const _default: React.NamedExoticComponent<ClipboardButtonProps>;

package/dist/components/ClipboardButton/ClipboardButton.js

@@ -1,50 +1,43 @@
-import { jsx as u } from "react/jsx-runtime";
-import t from "react";
-import { Button as R } from "../Button/Button.js";
-import { Title as x } from "../Title/Title.js";
-import { clsx as A } from "../../utils/clsx.js";
-import { noop as E } from "../../utils/functional.js";
-import '../../assets/ClipboardButton.css';const h = "_root_185u8_1", P = "_copied_185u8_1", s = {
-  root: h,
-  copied: P
-}, k = 1e3;
-function w(p) {
+import { jsx as r } from "react/jsx-runtime";
+import c from "react";
+import { Button as C } from "../Button/Button.js";
+import { Title as f } from "../Title/Title.js";
+import { clsx as u } from "../../utils/clsx.js";
+import { noop as _ } from "../../utils/functional.js";
+import "../../utils/hooks/useGlobalKeyboardEvent.js";
+import "../../utils/hooks/useKeyboardClose.js";
+import "../../index-2hJuj4UN.js";
+import { useClipboardComponent as k } from "../../utils/hooks/useClipboardComponent.js";
+import '../../assets/ClipboardButton.css';const b = "_root_185u8_1", h = "_copied_185u8_1", e = {
+  root: b,
+  copied: h
+};
+function x(o) {
   const {
-    hoverTitle: a,
-    copiedTitle: f,
-    textToCopy: r,
-    titleAppearanceTimeout: n = k,
-    fixedOn: m,
-    onClick: i = E,
-    ...d
-  } = p, [c, l] = t.useState(!1), o = t.useRef(null), e = t.useRef(null), C = t.useCallback((b) => {
-    if (i(b), e.current === null)
-      throw new Error("Clipboard API is not supported in this browser");
-    e.current.writeText(r), o.current !== null && clearTimeout(o.current), o.current = setTimeout(() => {
-      o.current = null, l(!1);
-    }, n), l(!0);
-  }, [i, r, n]);
-  t.useEffect(() => ("clipboard" in navigator && (e.current = navigator.clipboard), () => {
-    e.current = null;
-  }), []), t.useEffect(
-    () => () => {
-      o.current !== null && clearTimeout(o.current);
-    },
-    []
-  );
-  const T = c ? f : a, _ = A(s.root, { [s.copied]: c });
-  return /* @__PURE__ */ u(
-    x,
+    hoverTitle: T,
+    copiedTitle: B,
+    textToCopy: j,
+    fixedOn: n,
+    onClick: t = _,
+    ...l
+  } = o, {
+    copied: p,
+    handleClick: i,
+    title: m
+  } = k(o), d = c.useCallback((a) => {
+    t(a), i();
+  }, [i, t]), s = u(e.root, { [e.copied]: p });
+  return /* @__PURE__ */ r(
+    f,
     {
-      title: T,
-      fixedOn: m,
-      rootClassName: _,
-      children: /* @__PURE__ */ u(R, { ...d, onClick: C })
+      title: m,
+      fixedOn: n,
+      rootClassName: s,
+      children: /* @__PURE__ */ r(C, { ...l, onClick: d })
     }
   );
 }
-const O = t.memo(w);
+const z = c.memo(x);
 export {
-  k as CLIPBOARD_TITLE_APPEARANCE,
-  O as default
+  z as default
 };

package/dist/components/ClipboardButton/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ClipboardButton, CLIPBOARD_TITLE_APPEARANCE } from './ClipboardButton';
+export { default as ClipboardButton } from './ClipboardButton';
 export type { ClipboardButtonProps } from './ClipboardButton';

package/dist/components/ClipboardButton/index.js

@@ -1,5 +1,4 @@
-import { CLIPBOARD_TITLE_APPEARANCE as A, default as a } from "./ClipboardButton.js";
+import { default as a } from "./ClipboardButton.js";
 export {
-  A as CLIPBOARD_TITLE_APPEARANCE,
   a as ClipboardButton
 };

package/dist/main.d.ts

@@ -1,7 +1,7 @@
 export { mergeRefs } from './utils/mergeRefs';
 export { clsx } from './utils/clsx';
 export { getValue } from './utils/getValue';
-export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, usePopoverController, } from './utils/hooks';
+export { useInstance, useDynamicRef, useGlobalKeyboardEvent, useKeyboardClose, useWindowResize, useOutlet, usePopoverController, useClipboardComponent, CLIPBOARD_TITLE_APPEARANCE, } from './utils/hooks';
 export { noop, returnTrue, returnFalse, identity, invoke, } from './utils/functional';
 export { isExternalUrl, matchLinks, matchLinkNodes, defaultLinkReplacerx, defaultLinkReplacer, linkifyx, linkify, Linkify, } from './utils/links';
 export { clamp01, clamp, } from './utils/math';
@@ -10,12 +10,12 @@ export { debounce, throttle, } from './utils/execution';
 export { getColor } from './utils/color';
 export type { ValueOrGetter } from './utils/getValue';
 export type { ILinkSubstitute, ILinkMatch, LinkifyProps, } from './utils/links';
-export type { OutletPosition } from './utils/hooks';
+export type { OutletPosition, UseClipboardProps, } from './utils/hooks';
 export type { SetTimeoutReturn } from './utils/execution';
 export type { GetColorProps } from './utils/color';
 export { IconButton } from './components/IconButton';
 export { Accordion, AccordionTrigger, AccordionHeader, AccordionItem, AccordionContent, } from './components/Accordion';
-export { ClipboardButton, CLIPBOARD_TITLE_APPEARANCE } from './components/ClipboardButton';
+export { ClipboardButton } from './components/ClipboardButton';
 export { Checkbox } from './components/Checkbox';
 export { Button } from './components/Button/Button';
 export { LinkButton } from './components/Button/LinkButton';

package/dist/main.js

@@ -3,182 +3,184 @@ import { clsx as f } from "./utils/clsx.js";
 import { getValue as m } from "./utils/getValue.js";
 import { usePopoverController as l } from "./utils/hooks/usePopoverController.js";
 import { useInstance as i } from "./utils/hooks/useInstance.js";
-import { useDynamicRef as s } from "./utils/hooks/useDynamicRef.js";
+import { useDynamicRef as u } from "./utils/hooks/useDynamicRef.js";
 import { useGlobalKeyboardEvent as d } from "./utils/hooks/useGlobalKeyboardEvent.js";
 import { useKeyboardClose as T } from "./utils/hooks/useKeyboardClose.js";
 import { useWindowResize as B } from "./utils/hooks/useWindowResize.js";
-import { useOutlet as y } from "./utils/hooks/useOutlet.js";
-import { identity as S, invoke as C, noop as A, returnFalse as b, returnTrue as k } from "./utils/functional.js";
-import { Linkify as P, defaultLinkReplacer as E, defaultLinkReplacerx as D, isExternalUrl as _, linkify as h, linkifyx as v, matchLinkNodes as F, matchLinks as U } from "./utils/links.js";
-import { clamp as K, clamp01 as N } from "./utils/math.js";
-import { isFalseString as w, isTrueString as G, normalizeSlashes as Y, replaceRange as H, splitByIndices as M, unicodeCharAt as W } from "./utils/string.js";
-import { debounce as q, throttle as J } from "./utils/execution.js";
-import { getColor as X } from "./utils/color.js";
-import { default as $ } from "./components/IconButton/IconButton.js";
-import { Accordion as ro, AccordionContent as eo, AccordionHeader as to, AccordionItem as po, AccordionTrigger as fo } from "./components/Accordion/Accordion.js";
-import { CLIPBOARD_TITLE_APPEARANCE as mo, default as ao } from "./components/ClipboardButton/ClipboardButton.js";
-import { default as no } from "./components/Checkbox/Checkbox.js";
+import { useOutlet as C } from "./utils/hooks/useOutlet.js";
+import { CLIPBOARD_TITLE_APPEARANCE as R, useClipboardComponent as S } from "./utils/hooks/useClipboardComponent.js";
+import { identity as A, invoke as k, noop as O, returnFalse as P, returnTrue as E } from "./utils/functional.js";
+import { Linkify as _, defaultLinkReplacer as h, defaultLinkReplacerx as v, isExternalUrl as F, linkify as U, linkifyx as z, matchLinkNodes as K, matchLinks as N } from "./utils/links.js";
+import { clamp as w, clamp01 as G } from "./utils/math.js";
+import { isFalseString as H, isTrueString as M, normalizeSlashes as W, replaceRange as j, splitByIndices as q, unicodeCharAt as J } from "./utils/string.js";
+import { debounce as X, throttle as Z } from "./utils/execution.js";
+import { getColor as oo } from "./utils/color.js";
+import { default as eo } from "./components/IconButton/IconButton.js";
+import { Accordion as po, AccordionContent as fo, AccordionHeader as xo, AccordionItem as mo, AccordionTrigger as ao } from "./components/Accordion/Accordion.js";
+import { default as no } from "./components/ClipboardButton/ClipboardButton.js";
+import { default as so } from "./components/Checkbox/Checkbox.js";
 import { Button as co } from "./components/Button/Button.js";
-import { LinkButton as uo } from "./components/Button/LinkButton.js";
-import { ButtonBar as To } from "./components/Button/ButtonBar.js";
-import { Avatar as Bo } from "./components/Avatar/Avatar.js";
-import { BACKDROP_OUTLET_ID as yo, BackdropPortal as Ro } from "./components/BackdropPortal/BackdropPortal.js";
-import { Badge as Co } from "./components/Badge/Badge.js";
-import { ControlBox as bo } from "./components/ControlBox/ControlBox.js";
-import { CountryFlag as Oo } from "./components/CountryFlag/CountryFlag.js";
-import { Decorate as Eo } from "./components/Decorate/Decorate.js";
-import { Dot as _o } from "./components/Dot/Dot.js";
-import { FLYOUT_OUTLET_ID as vo, Flyout as Fo } from "./components/Flyout/Flyout.js";
-import { Logos as zo } from "./components/Logos/index.js";
-import { I as No } from "./cfxIcons-BlbKR-zU.js";
-import { I as wo } from "./cfxIconsBig-CNY8zL27.js";
-import { Icon as Yo } from "./components/Icon/Icon.js";
-import { IconBig as Mo } from "./components/IconBig/IconBig.js";
-import { Indicator as jo } from "./components/Indicator/Indicator.js";
-import { default as Jo } from "./components/InfoPanel/InfoPanel.js";
-import { default as Xo } from "./components/Input/Input.js";
-import { default as $o } from "./components/Input/RichInput.js";
-import { Interactive as rr } from "./components/Interactive/Interactive.js";
-import { Island as tr } from "./components/Island/Island.js";
-import { Box as fr } from "./components/Layout/Box/Box.js";
-import { Center as mr } from "./components/Layout/Center/Center.js";
-import { Flex as lr } from "./components/Layout/Flex/Flex.js";
-import { FlexRestricter as ir } from "./components/Layout/Flex/FlexRestricter.js";
-import { Pad as sr } from "./components/Layout/Pad/Pad.js";
-import { Page as dr } from "./components/Layout/Page/Page.js";
-import { R as Tr } from "./Rail-nVRissv6.js";
-import { Scrollable as Br } from "./components/Layout/Scrollable/Scrollable.js";
-import { VirtualScrollable as yr } from "./components/Layout/Scrollable/VirtualScrollable.js";
-import { Loaf as Sr } from "./components/Loaf/Loaf.js";
-import { Modal as Ar } from "./components/Modal/Modal.js";
-import { NavList as kr } from "./components/NavList/NavList.js";
-import { OVERLAY_OUTLET_ID as Pr, Overlay as Er } from "./components/Overlay/Overlay.js";
-import { Popover as _r } from "./components/Popover/Popover.js";
-import { PremiumBadge as vr } from "./components/PremiumBadge/PremiumBadge.js";
-import { Prose as Ur } from "./components/Prose/Prose.js";
-import { Radio as Kr } from "./components/Radio/Radio.js";
-import { Select as Vr } from "./components/Select/Select.js";
-import { Separator as Gr } from "./components/Separator/Separator.js";
-import { Shroud as Hr } from "./components/Shroud/Shroud.js";
-import { Spacer as Wr } from "./components/Spacer/Spacer.js";
-import { Style as qr, useContextualStyle as Jr } from "./components/Style/Style.js";
-import { default as Xr } from "./components/Switch/Switch.js";
-import { ToggleGroup as $r } from "./components/ToggleGroup/ToggleGroup.js";
-import { Tabular as re } from "./components/Tabular/Tabular.js";
-import { Table as te, TableIconButton as pe } from "./components/Table/Table.js";
-import { Text as xe, TextBlock as me, getTextOpacity as ae } from "./components/Text/Text.js";
-import { Textarea as ne } from "./components/Textarea/Textarea.js";
-import { TITLE_OUTLET_ID as ce, Title as se } from "./components/Title/Title.js";
-import { default as de } from "./components/InputDropzone/InputDropzone.js";
+import { LinkButton as To } from "./components/Button/LinkButton.js";
+import { ButtonBar as Bo } from "./components/Button/ButtonBar.js";
+import { Avatar as Co } from "./components/Avatar/Avatar.js";
+import { BACKDROP_OUTLET_ID as Ro, BackdropPortal as So } from "./components/BackdropPortal/BackdropPortal.js";
+import { Badge as Ao } from "./components/Badge/Badge.js";
+import { ControlBox as Oo } from "./components/ControlBox/ControlBox.js";
+import { CountryFlag as Eo } from "./components/CountryFlag/CountryFlag.js";
+import { Decorate as _o } from "./components/Decorate/Decorate.js";
+import { Dot as vo } from "./components/Dot/Dot.js";
+import { FLYOUT_OUTLET_ID as Uo, Flyout as zo } from "./components/Flyout/Flyout.js";
+import { Logos as No } from "./components/Logos/index.js";
+import { I as wo } from "./cfxIcons-BlbKR-zU.js";
+import { I as Yo } from "./cfxIconsBig-CNY8zL27.js";
+import { Icon as Mo } from "./components/Icon/Icon.js";
+import { IconBig as jo } from "./components/IconBig/IconBig.js";
+import { Indicator as Jo } from "./components/Indicator/Indicator.js";
+import { default as Xo } from "./components/InfoPanel/InfoPanel.js";
+import { default as $o } from "./components/Input/Input.js";
+import { default as rr } from "./components/Input/RichInput.js";
+import { Interactive as tr } from "./components/Interactive/Interactive.js";
+import { Island as fr } from "./components/Island/Island.js";
+import { Box as mr } from "./components/Layout/Box/Box.js";
+import { Center as lr } from "./components/Layout/Center/Center.js";
+import { Flex as ir } from "./components/Layout/Flex/Flex.js";
+import { FlexRestricter as ur } from "./components/Layout/Flex/FlexRestricter.js";
+import { Pad as dr } from "./components/Layout/Pad/Pad.js";
+import { Page as Tr } from "./components/Layout/Page/Page.js";
+import { R as Br } from "./Rail-nVRissv6.js";
+import { Scrollable as Cr } from "./components/Layout/Scrollable/Scrollable.js";
+import { VirtualScrollable as Rr } from "./components/Layout/Scrollable/VirtualScrollable.js";
+import { Loaf as br } from "./components/Loaf/Loaf.js";
+import { Modal as kr } from "./components/Modal/Modal.js";
+import { NavList as Pr } from "./components/NavList/NavList.js";
+import { OVERLAY_OUTLET_ID as Dr, Overlay as _r } from "./components/Overlay/Overlay.js";
+import { Popover as vr } from "./components/Popover/Popover.js";
+import { PremiumBadge as Ur } from "./components/PremiumBadge/PremiumBadge.js";
+import { Prose as Kr } from "./components/Prose/Prose.js";
+import { Radio as Vr } from "./components/Radio/Radio.js";
+import { Select as Gr } from "./components/Select/Select.js";
+import { Separator as Hr } from "./components/Separator/Separator.js";
+import { Shroud as Wr } from "./components/Shroud/Shroud.js";
+import { Spacer as qr } from "./components/Spacer/Spacer.js";
+import { Style as Qr, useContextualStyle as Xr } from "./components/Style/Style.js";
+import { default as $r } from "./components/Switch/Switch.js";
+import { ToggleGroup as re } from "./components/ToggleGroup/ToggleGroup.js";
+import { Tabular as te } from "./components/Tabular/Tabular.js";
+import { Table as fe, TableIconButton as xe } from "./components/Table/Table.js";
+import { Text as ae, TextBlock as le, getTextOpacity as ne } from "./components/Text/Text.js";
+import { Textarea as se } from "./components/Textarea/Textarea.js";
+import { TITLE_OUTLET_ID as ce, Title as de } from "./components/Title/Title.js";
+import { default as Te } from "./components/InputDropzone/InputDropzone.js";
 import "./components/InputDropzone/ItemPreview.js";
-import { OnScreenSensor as Te } from "./components/OnScreenSensor.js";
-import { ui as Be } from "./components/ui.js";
-import { Symbols as ye } from "./components/Symbols.js";
+import { OnScreenSensor as Be } from "./components/OnScreenSensor.js";
+import { ui as Ce } from "./components/ui.js";
+import { Symbols as Re } from "./components/Symbols.js";
 export {
-  ro as Accordion,
-  eo as AccordionContent,
-  to as AccordionHeader,
-  po as AccordionItem,
-  fo as AccordionTrigger,
-  Bo as Avatar,
-  yo as BACKDROP_OUTLET_ID,
-  Ro as BackdropPortal,
-  Co as Badge,
-  fr as Box,
+  po as Accordion,
+  fo as AccordionContent,
+  xo as AccordionHeader,
+  mo as AccordionItem,
+  ao as AccordionTrigger,
+  Co as Avatar,
+  Ro as BACKDROP_OUTLET_ID,
+  So as BackdropPortal,
+  Ao as Badge,
+  mr as Box,
   co as Button,
-  To as ButtonBar,
-  mo as CLIPBOARD_TITLE_APPEARANCE,
-  mr as Center,
-  no as Checkbox,
-  ao as ClipboardButton,
-  bo as ControlBox,
-  Oo as CountryFlag,
-  Eo as Decorate,
-  _o as Dot,
-  vo as FLYOUT_OUTLET_ID,
-  lr as Flex,
-  ir as FlexRestricter,
-  Fo as Flyout,
-  Yo as Icon,
-  Mo as IconBig,
-  $ as IconButton,
-  No as Icons,
-  wo as IconsBig,
-  jo as Indicator,
-  Jo as InfoPanel,
-  Xo as Input,
-  de as InputDropzone,
-  rr as Interactive,
-  tr as Island,
-  uo as LinkButton,
-  P as Linkify,
-  Sr as Loaf,
-  zo as Logos,
-  Ar as Modal,
-  kr as NavList,
-  Pr as OVERLAY_OUTLET_ID,
-  Te as OnScreenSensor,
-  Er as Overlay,
-  sr as Pad,
-  dr as Page,
-  _r as Popover,
-  vr as PremiumBadge,
-  Ur as Prose,
-  Kr as Radio,
-  Tr as Rail,
-  $o as RichInput,
-  Br as Scrollable,
-  Vr as Select,
-  Gr as Separator,
-  Hr as Shroud,
-  Wr as Spacer,
-  qr as Style,
-  Xr as Switch,
-  ye as Symbols,
+  Bo as ButtonBar,
+  R as CLIPBOARD_TITLE_APPEARANCE,
+  lr as Center,
+  so as Checkbox,
+  no as ClipboardButton,
+  Oo as ControlBox,
+  Eo as CountryFlag,
+  _o as Decorate,
+  vo as Dot,
+  Uo as FLYOUT_OUTLET_ID,
+  ir as Flex,
+  ur as FlexRestricter,
+  zo as Flyout,
+  Mo as Icon,
+  jo as IconBig,
+  eo as IconButton,
+  wo as Icons,
+  Yo as IconsBig,
+  Jo as Indicator,
+  Xo as InfoPanel,
+  $o as Input,
+  Te as InputDropzone,
+  tr as Interactive,
+  fr as Island,
+  To as LinkButton,
+  _ as Linkify,
+  br as Loaf,
+  No as Logos,
+  kr as Modal,
+  Pr as NavList,
+  Dr as OVERLAY_OUTLET_ID,
+  Be as OnScreenSensor,
+  _r as Overlay,
+  dr as Pad,
+  Tr as Page,
+  vr as Popover,
+  Ur as PremiumBadge,
+  Kr as Prose,
+  Vr as Radio,
+  Br as Rail,
+  rr as RichInput,
+  Cr as Scrollable,
+  Gr as Select,
+  Hr as Separator,
+  Wr as Shroud,
+  qr as Spacer,
+  Qr as Style,
+  $r as Switch,
+  Re as Symbols,
   ce as TITLE_OUTLET_ID,
-  te as Table,
-  pe as TableIconButton,
-  re as Tabular,
-  xe as Text,
-  me as TextBlock,
-  ne as Textarea,
-  se as Title,
-  $r as ToggleGroup,
-  yr as VirtualScrollable,
-  K as clamp,
-  N as clamp01,
+  fe as Table,
+  xe as TableIconButton,
+  te as Tabular,
+  ae as Text,
+  le as TextBlock,
+  se as Textarea,
+  de as Title,
+  re as ToggleGroup,
+  Rr as VirtualScrollable,
+  w as clamp,
+  G as clamp01,
   f as clsx,
-  q as debounce,
-  E as defaultLinkReplacer,
-  D as defaultLinkReplacerx,
-  X as getColor,
-  ae as getTextOpacity,
+  X as debounce,
+  h as defaultLinkReplacer,
+  v as defaultLinkReplacerx,
+  oo as getColor,
+  ne as getTextOpacity,
   m as getValue,
-  S as identity,
-  C as invoke,
-  _ as isExternalUrl,
-  w as isFalseString,
-  G as isTrueString,
-  h as linkify,
-  v as linkifyx,
-  F as matchLinkNodes,
-  U as matchLinks,
+  A as identity,
+  k as invoke,
+  F as isExternalUrl,
+  H as isFalseString,
+  M as isTrueString,
+  U as linkify,
+  z as linkifyx,
+  K as matchLinkNodes,
+  N as matchLinks,
   t as mergeRefs,
-  A as noop,
-  Y as normalizeSlashes,
-  H as replaceRange,
-  b as returnFalse,
-  k as returnTrue,
-  M as splitByIndices,
-  J as throttle,
-  Be as ui,
-  W as unicodeCharAt,
-  Jr as useContextualStyle,
-  s as useDynamicRef,
+  O as noop,
+  W as normalizeSlashes,
+  j as replaceRange,
+  P as returnFalse,
+  E as returnTrue,
+  q as splitByIndices,
+  Z as throttle,
+  Ce as ui,
+  J as unicodeCharAt,
+  S as useClipboardComponent,
+  Xr as useContextualStyle,
+  u as useDynamicRef,
   d as useGlobalKeyboardEvent,
   i as useInstance,
   T as useKeyboardClose,
-  y as useOutlet,
+  C as useOutlet,
   l as usePopoverController,
   B as useWindowResize
 };

package/dist/utils/hooks/index.d.ts

@@ -5,4 +5,6 @@ export { useGlobalKeyboardEvent } from './useGlobalKeyboardEvent';
 export { useKeyboardClose } from './useKeyboardClose';
 export { useWindowResize } from './useWindowResize';
 export { useOutlet } from './useOutlet';
+export { useClipboardComponent, CLIPBOARD_TITLE_APPEARANCE } from './useClipboardComponent';
 export type { OutletPosition } from './useOutlet';
+export type { UseClipboardProps } from './useClipboardComponent';

package/dist/utils/hooks/index.js

@@ -1,16 +1,19 @@
 import { usePopoverController as r } from "./usePopoverController.js";
-import { useInstance as s } from "./useInstance.js";
+import { useInstance as p } from "./useInstance.js";
 import { useDynamicRef as m } from "./useDynamicRef.js";
 import { useGlobalKeyboardEvent as u } from "./useGlobalKeyboardEvent.js";
-import { useKeyboardClose as l } from "./useKeyboardClose.js";
+import { useKeyboardClose as x } from "./useKeyboardClose.js";
 import { useWindowResize as a } from "./useWindowResize.js";
-import { useOutlet as d } from "./useOutlet.js";
+import { useOutlet as b } from "./useOutlet.js";
+import { CLIPBOARD_TITLE_APPEARANCE as i, useClipboardComponent as A } from "./useClipboardComponent.js";
 export {
+  i as CLIPBOARD_TITLE_APPEARANCE,
+  A as useClipboardComponent,
   m as useDynamicRef,
   u as useGlobalKeyboardEvent,
-  s as useInstance,
-  l as useKeyboardClose,
-  d as useOutlet,
+  p as useInstance,
+  x as useKeyboardClose,
+  b as useOutlet,
   r as usePopoverController,
   a as useWindowResize
 };

package/dist/utils/hooks/useClipboardComponent.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+
+export interface UseClipboardProps {
+    hoverTitle?: string;
+    copiedTitle: string;
+    textToCopy: string;
+    titleAppearanceTimeout?: number;
+}
+export declare const CLIPBOARD_TITLE_APPEARANCE = 1000;
+export declare function useClipboardComponent(props: UseClipboardProps): {
+    handleClick: () => void;
+    title: string | undefined;
+    copied: boolean;
+    clipboardRef: React.MutableRefObject<Clipboard | null>;
+};

package/dist/utils/hooks/useClipboardComponent.js

@@ -0,0 +1,33 @@
+import t from "react";
+const f = 1e3;
+function T(i) {
+  const {
+    hoverTitle: c,
+    copiedTitle: s,
+    textToCopy: n,
+    titleAppearanceTimeout: o = f
+  } = i, [u, l] = t.useState(!1), e = t.useRef(null), r = t.useRef(null), a = t.useCallback(() => {
+    if (r.current === null)
+      throw new Error("Clipboard API is not supported in this browser");
+    r.current.writeText(n), e.current !== null && clearTimeout(e.current), e.current = setTimeout(() => {
+      e.current = null, l(!1);
+    }, o), l(!0);
+  }, [n, o]);
+  return t.useEffect(() => ("clipboard" in navigator && (r.current = navigator.clipboard), () => {
+    r.current = null;
+  }), []), t.useEffect(
+    () => () => {
+      e.current !== null && clearTimeout(e.current);
+    },
+    []
+  ), {
+    handleClick: a,
+    title: u ? s : c,
+    copied: u,
+    clipboardRef: r
+  };
+}
+export {
+  f as CLIPBOARD_TITLE_APPEARANCE,
+  T as useClipboardComponent
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "2.1.15",
+  "version": "2.1.16",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",