@box/copy-input 1.39.8 → 1.39.10

package/dist/esm/lib/copy-input.js

@@ -1,96 +1,99 @@
-import { useUniqueId as _, BaseTextInput as F, Button as O, InlineError as q, Text as w } from "@box/blueprint-web";
-import c from "clsx";
-import { forwardRef as z, useCallback as f } from "react";
-import { useIntl as H } from "react-intl";
-import { messages as I } from "./messages.js";
-import { useClipboardCopy as U } from "./utils.js";
-import { jsxs as h, jsx as n } from "react/jsx-runtime";
-import '../../styles/copy-input.css';const A = "_formWrapper_241a0_2", G = "_hasError_241a0_7", J = "_copyInputWrapper_241a0_17", K = "_copied_241a0_21", P = "_copyButton_241a0_38", Q = "_copyInput_241a0_17", V = "_subtext_241a0_70", X = "_inlineError_241a0_71", e = {
-  formWrapper: A,
+import i from "clsx";
+import { forwardRef as k, useCallback as _ } from "react";
+import { useIntl as F } from "react-intl";
+import { useUniqueId as y, BaseTextInput as M, Button as O, InlineError as z, Text as H } from "@box/blueprint-web";
+import { useCopyToClipboard as U } from "./utils.js";
+import f from "./messages.js";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import '../../styles/copy-input.css';const A = "_container_17qpw_1", G = "_hasError_17qpw_6", J = "_copyInput_17qpw_16", K = "_input_17qpw_20", P = "_button_17qpw_28", Q = "_isCopied_17qpw_45", V = "_error_17qpw_66", W = "_subtext_17qpw_67", t = {
+  container: A,
   hasError: G,
-  copyInputWrapper: J,
-  copied: K,
-  copyButton: P,
-  copyInput: Q,
-  subtext: V,
-  inlineError: X
-}, Y = /* @__PURE__ */ z((x, g) => {
+  copyInput: J,
+  input: K,
+  button: P,
+  isCopied: Q,
+  error: V,
+  subtext: W
+}, X = /* @__PURE__ */ k((I, x) => {
   const {
-    ariaLive: E,
-    "data-target-id": B,
-    disabled: o,
-    error: a,
-    hideLabel: C,
-    id: Z,
+    ariaLive: C,
+    "aria-describedby": g,
+    "data-target-id": q,
+    disabled: r,
+    error: s,
+    hideLabel: w,
+    id: Y,
     label: v,
     onCopy: L,
-    subtext: p,
-    successStateDuration: W,
+    subtext: c,
+    successStateDuration: E,
     value: N,
-    ...l
-  } = x, d = H(), S = d.formatMessage(I.copyButtonLabel), T = d.formatMessage(I.copyButtonCopiedLabel), u = _("inline-error-"), y = _("subtext-"), {
-    copied: m,
-    handleCopy: b,
-    inputRef: D
-  } = U(o, L, W), M = f((r) => {
-    r.target.select();
-  }, []), R = f((r) => {
-    r.target instanceof HTMLInputElement && r.target.setSelectionRange(0, r.target.value.length);
-  }, []), t = !!a && !o, s = !a && !!p, j = t || s;
-  let i = "";
-  t ? i = u : s && (i = y);
-  const k = c(l["aria-describedby"], {
-    [i]: j
-  });
-  return /* @__PURE__ */ h("div", {
-    className: c(e.formWrapper, {
-      [e.hasError]: a
+    ...T
+  } = I, {
+    formatMessage: p
+  } = F(), B = p(f.copyButtonLabel), S = p(f.copyButtonCopiedLabel), d = y("error-"), l = y("subtext-"), {
+    copyToClipboard: u,
+    inputRef: D,
+    isCopied: b
+  } = U({
+    copyTimeout: E,
+    isDisabled: r,
+    onCopy: L
+  }), R = _((o) => {
+    o.target.select();
+  }, []), j = _((o) => {
+    o.target instanceof HTMLInputElement && o.target.setSelectionRange(0, o.target.value.length);
+  }, []), e = !!s && !r, m = !s && !!c;
+  let n;
+  return m && (n = l), e && (n = d), /* @__PURE__ */ h("div", {
+    className: i(t.container, {
+      [t.hasError]: e
     }),
     children: [/* @__PURE__ */ h("div", {
-      className: c(e.copyInputWrapper, {
-        [e.copied]: m
+      className: i(t.copyInput, {
+        [t.isCopied]: b
       }),
-      children: [/* @__PURE__ */ n(F, {
-        ...l,
+      children: [/* @__PURE__ */ a(M, {
+        ...T,
         ref: D,
-        "aria-describedby": k || void 0,
-        "aria-invalid": t,
-        className: e.copyInput,
-        disabled: o,
-        hideLabel: C,
-        invalid: t,
+        "aria-describedby": i(g, n),
+        "aria-invalid": e,
+        className: t.input,
+        disabled: r,
+        hideLabel: w,
+        invalid: e,
         label: v,
-        onCopy: b,
-        onFocus: M,
-        onSelect: R,
+        onCopy: u,
+        onFocus: R,
+        onSelect: j,
         readOnly: !0,
         value: N
-      }), /* @__PURE__ */ n(O, {
-        ref: g,
-        "aria-live": E,
-        className: e.copyButton,
-        "data-target-id": B,
-        disabled: o,
-        onClick: b,
+      }), /* @__PURE__ */ a(O, {
+        ref: x,
+        "aria-live": C,
+        className: t.button,
+        "data-target-id": q,
+        disabled: r,
+        onClick: u,
         size: "large",
         variant: "secondary",
-        children: m ? T : S
+        children: b ? S : B
       })]
-    }), t ? /* @__PURE__ */ n(q, {
-      className: e.inlineError,
-      id: u,
-      children: a
-    }) : s && /* @__PURE__ */ n(w, {
+    }), e && /* @__PURE__ */ a(z, {
+      className: t.error,
+      id: d,
+      children: s
+    }), m && !e && /* @__PURE__ */ a(H, {
       as: "p",
-      className: e.subtext,
+      className: t.subtext,
       color: "textOnLightSecondary",
-      id: y,
+      id: l,
       variant: "caption",
-      children: p
+      children: c
     })]
   });
 });
-Y.displayName = "CopyInput";
+X.displayName = "CopyInput";
 export {
-  Y as CopyInput
+  X as CopyInput
 };

package/dist/esm/lib/messages.js

@@ -10,5 +10,5 @@ const t = e({
   }
 });
 export {
-  t as messages
+  t as default
 };

package/dist/esm/lib/utils.js

@@ -1,21 +1,29 @@
-import { useState as a, useRef as f, useCallback as T } from "react";
-const m = 3e3, h = (r, e, n, c = !1) => {
-  const [t, s] = a(c), o = f(null), i = T(() => {
-    if (t || r)
-      return;
-    const p = n || m, u = o.current?.value || "";
-    navigator.clipboard.writeText(u).then(() => {
-      o.current?.select(), e?.(u), s(!0), setTimeout(() => s(!1), p);
-    }).catch((l) => {
-      e?.(l);
-    });
-  }, [t, r, e, n]);
+import { useRef as n, useState as s, useCallback as l } from "react";
+const p = 3e3, m = ({
+  copyTimeout: o = p,
+  isDisabled: c,
+  onCopy: e
+}) => {
+  const r = n(null), [t, a] = s(!1);
   return {
-    inputRef: o,
-    handleCopy: i,
-    copied: t
+    copyToClipboard: l(async () => {
+      if (!r.current || t || c)
+        return;
+      if (!navigator.clipboard && !document.queryCommandSupported("copy")) {
+        e && e(new Error("Copying to clipboard is not supported"));
+        return;
+      }
+      const i = r.current.value ?? "";
+      try {
+        navigator.clipboard ? (await navigator.clipboard.writeText(i), r.current.select()) : (r.current.select(), document.execCommand("copy")), e && e(i), a(!0), setTimeout(() => a(!1), o);
+      } catch (u) {
+        e && e(u);
+      }
+    }, [o, t, c, e]),
+    inputRef: r,
+    isCopied: t
   };
 };
 export {
-  h as useClipboardCopy
+  m as useCopyToClipboard
 };

package/dist/styles/copy-input.css

@@ -1 +1 @@
-._formWrapper_241a0_2{--border-collapsible-border: var(--border-cta-border-secondary);display:flex;flex-direction:column}._formWrapper_241a0_2._hasError_241a0_7 input:not(:focus-visible){border-color:var(--border-input-border-error)!important;border-width:2px!important}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17{--text-input-disabled-opacity-api: .3;display:flex}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17._copied_241a0_21{--border-collapsible-border: var(--green-light-120);--surface-cta-surface-secondary: var(--green-light-50);--surface-cta-surface-secondary-hover: var(--green-light-50)}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17._copied_241a0_21 input{border-color:var(--green-light-120)!important;border-width:1px!important}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17._copied_241a0_21 input:focus{border-color:var(--outline-focus-on-light)!important;border-width:2px!important}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17._copied_241a0_21 ._copyButton_241a0_38._copyButton_241a0_38{background-color:var(--green-light-50);border-color:var(--green-light-120)}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17 ._copyInput_241a0_17._copyInput_241a0_17{position:relative;left:1px;flex-grow:1}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17 ._copyInput_241a0_17._copyInput_241a0_17:not(._noButton_241a0_47) input{border-top-right-radius:0;border-bottom-right-radius:0}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17 ._copyButton_241a0_38._copyButton_241a0_38{flex-grow:0;align-self:flex-end;border-start-start-radius:0;border-end-start-radius:0}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17 ._copyButton_241a0_38._copyButton_241a0_38:focus-visible{z-index:1}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17 ._copyButton_241a0_38._copyButton_241a0_38[data-modern=true]{border-end-end-radius:var(--bp-radius-06);border-start-end-radius:var(--bp-radius-06)}._formWrapper_241a0_2 ._copyInputWrapper_241a0_17:not(._copied_241a0_21) ._copyButton_241a0_38._copyButton_241a0_38[data-modern=true]{border-color:var(--bp-gray-20)}._formWrapper_241a0_2 ._subtext_241a0_70,._formWrapper_241a0_2 ._inlineError_241a0_71{margin-block-start:var(--space-2)}
+._container_17qpw_1._container_17qpw_1{--border-collapsible-border: var(--border-cta-border-secondary);display:flex;flex-direction:column}._container_17qpw_1._container_17qpw_1._hasError_17qpw_6 input:not(:focus-visible){border-color:var(--bp-border-input-border-error)!important;border-width:var(--bp-border-02)!important}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16{--text-input-disabled-opacity-api: .3;display:flex}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._input_17qpw_20{z-index:1;flex-grow:1}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._input_17qpw_20 input{border-top-right-radius:0;border-bottom-right-radius:0}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._button_17qpw_28{align-self:flex-end;margin-left:-1px;border-top-left-radius:0;border-bottom-left-radius:0}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._button_17qpw_28[data-modern=true]{border-color:var(--bp-gray-20);border-top-right-radius:var(--bp-radius-06);border-bottom-right-radius:var(--bp-radius-06)}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._button_17qpw_28:disabled{border-color:var(--bp-border-input-border)}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16 ._button_17qpw_28:focus-visible{z-index:1}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16._isCopied_17qpw_45{--border-collapsible-border: var(--green-light-120);--surface-cta-surface-secondary: var(--green-light-50);--surface-cta-surface-secondary-hover: var(--green-light-50)}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16._isCopied_17qpw_45 input{border-color:var(--green-light-120)!important;border-width:var(--bp-border-01)!important}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16._isCopied_17qpw_45 input:focus{border-color:var(--outline-focus-on-light)!important;border-width:var(--bp-border-02)!important}._container_17qpw_1._container_17qpw_1 ._copyInput_17qpw_16._isCopied_17qpw_45 ._button_17qpw_28{background-color:var(--green-light-50);border-color:var(--green-light-120)}._container_17qpw_1._container_17qpw_1 ._error_17qpw_66,._container_17qpw_1._container_17qpw_1 ._subtext_17qpw_67{margin-block-start:var(--bp-space-020)}

package/dist/types/index.d.ts

@@ -1,2 +1 @@
 export * from './lib/copy-input';
-export * from './lib/types';

package/dist/types/lib/copy-input.d.ts

@@ -1,2 +1,30 @@
-import { CopyInputProps } from './types';
+import { TextInputProps } from '@box/blueprint-web';
+export interface CopyInputProps extends Omit<TextInputProps, 'onCopy'> {
+    /**
+     * The aria-live attribute for the copy button.
+     */
+    ariaLive?: 'off' | 'assertive' | 'polite';
+    /**
+     * Focus the input when the component loads.
+     */
+    autoFocus?: boolean;
+    /**
+     * The targeting ID for the copy button.
+     */
+    'data-target-id'?: string;
+    /**
+     * Callback called with the result of copying to the clipboard.
+     */
+    onCopy?: (result: string | Error) => void;
+    /**
+     * The duration in milliseconds to show the copy success state.
+     *
+     * @default 3000
+     */
+    successStateDuration?: number;
+    /**
+     * The text value to display in the input field.
+     */
+    value: string;
+}
 export declare const CopyInput: import('react').ForwardRefExoticComponent<Omit<CopyInputProps, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/types/lib/messages.d.ts

@@ -1,4 +1,4 @@
-export declare const messages: {
+declare const messages: {
     copyButtonLabel: {
         defaultMessage: string;
         description: string;
@@ -10,3 +10,4 @@ export declare const messages: {
         id: string;
     };
 };
+export default messages;

package/dist/types/lib/stories/shared.d.ts

@@ -0,0 +1,3 @@
+import { CopyInputProps } from '../copy-input';
+export declare const defaultArgs: Omit<CopyInputProps, 'ref'>;
+export declare const CopyInputTemplate: (args: Omit<CopyInputProps, "ref">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/utils.d.ts

@@ -1,6 +1,11 @@
-import { CopyInputProps } from '@box/copy-input';
-export declare const useClipboardCopy: (disabled: CopyInputProps["disabled"], onCopyCallback: CopyInputProps["onCopy"], successStateDuration: CopyInputProps["successStateDuration"], defaultCopied?: boolean) => {
+interface UseCopyToClipboardProps {
+    copyTimeout?: number;
+    isDisabled?: boolean;
+    onCopy?: (result: string | Error) => void;
+}
+export declare const useCopyToClipboard: ({ copyTimeout, isDisabled, onCopy }: UseCopyToClipboardProps) => {
+    copyToClipboard: () => Promise<void>;
     inputRef: import('react').MutableRefObject<HTMLInputElement | null>;
-    handleCopy: () => void;
-    copied: boolean;
+    isCopied: boolean;
 };
+export {};

package/package.json

@@ -1,18 +1,18 @@
 {
     "name": "@box/copy-input",
-    "version": "1.39.8",
+    "version": "1.39.10",
     "license": "SEE LICENSE IN LICENSE",
     "peerDependencies": {
-        "@box/blueprint-web": "^13.5.3",
-        "@box/blueprint-web-assets": "^4.102.0",
+        "@box/blueprint-web": "^13.5.5",
+        "@box/blueprint-web-assets": "^4.104.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
         "react-intl": "^6.4.2"
     },
     "devDependencies": {
-        "@box/blueprint-web": "^13.5.3",
-        "@box/blueprint-web-assets": "^4.102.0",
-        "@box/storybook-utils": "0.16.59",
+        "@box/blueprint-web": "^13.5.5",
+        "@box/blueprint-web-assets": "^4.104.0",
+        "@box/storybook-utils": "0.16.61",
         "@box/eslint-plugin-blueprint": "1.1.1",
         "react-intl": "^6.4.2"
     },

package/dist/types/lib/types.d.ts

@@ -1,20 +0,0 @@
-import { Labelable, TextInputProps } from '@box/blueprint-web';
-export type CopyInputProps = Omit<TextInputProps, 'onCopy'> & {
-    /** Text value of the input field */
-    value: string;
-    /** Set the focus to input when component loads */
-    autoFocus?: boolean;
-    /** Label displayed for the text input */
-    label: Labelable['label'];
-    /** When true label text is hidden */
-    hideLabel?: boolean;
-    /** Aria-live for the button */
-    ariaLive?: 'off' | 'polite' | 'assertive';
-    /** Targeting id attribute for copy button */
-    'data-target-id'?: string;
-    /** Duration (milliseconds) in which to show the copy success state.
-     * @default 3000 [ms] */
-    successStateDuration?: number;
-    /** Callback called with the result of copying to clipboard */
-    onCopy?: (result: Error | string) => void;
-};