@box/copy-input 1.40.32 → 1.40.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/copy-input.js +76 -0
- package/dist/esm/index.js +2 -4
- package/dist/esm/lib/copy-input.js +2 -99
- package/dist/esm/lib/messages.js +10 -12
- package/dist/esm/lib/utils.js +26 -28
- package/dist/styles/copy-input.css +1 -1
- package/package.json +6 -6
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
import { useCopyToClipboard as e } from "../esm/lib/utils.js";
|
|
2
|
+
import t from "../esm/lib/messages.js";
|
|
3
|
+
import n from "clsx";
|
|
4
|
+
import { forwardRef as r, useCallback as i } from "react";
|
|
5
|
+
import { useIntl as a } from "react-intl";
|
|
6
|
+
import { BaseTextInput as o, Button as s, InlineError as c, Text as l, useUniqueId as u } from "@box/blueprint-web";
|
|
7
|
+
import { jsx as d, jsxs as f } from "react/jsx-runtime";
|
|
8
|
+
import '../styles/copy-input.css';var p = {
|
|
9
|
+
container: "_container_17qpw_1",
|
|
10
|
+
hasError: "_hasError_17qpw_6",
|
|
11
|
+
copyInput: "_copyInput_17qpw_16",
|
|
12
|
+
input: "_input_17qpw_20",
|
|
13
|
+
button: "_button_17qpw_28",
|
|
14
|
+
isCopied: "_isCopied_17qpw_45",
|
|
15
|
+
error: "_error_17qpw_66",
|
|
16
|
+
subtext: "_subtext_17qpw_67"
|
|
17
|
+
}, m = /* @__PURE__ */ r((r, m) => {
|
|
18
|
+
let { ariaLive: h, "aria-describedby": g, "data-target-id": _, disabled: v, error: y, hideLabel: b, id: x, label: S, onCopy: C, subtext: w, successStateDuration: T, value: E, ...D } = r, { formatMessage: O } = a(), k = O(t.copyButtonLabel), A = O(t.copyButtonCopiedLabel), j = u("error-"), M = u("subtext-"), { copyToClipboard: N, inputRef: P, isCopied: F } = e({
|
|
19
|
+
copyTimeout: T,
|
|
20
|
+
isDisabled: v,
|
|
21
|
+
onCopy: C
|
|
22
|
+
}), I = i((e) => {
|
|
23
|
+
e.target.select();
|
|
24
|
+
}, []), L = i((e) => {
|
|
25
|
+
e.target instanceof HTMLInputElement && e.target.setSelectionRange(0, e.target.value.length);
|
|
26
|
+
}, []), R = !!y && !v, z = !y && !!w, B;
|
|
27
|
+
return z && (B = M), R && (B = j), /* @__PURE__ */ f("div", {
|
|
28
|
+
className: n(p.container, { [p.hasError]: R }),
|
|
29
|
+
children: [
|
|
30
|
+
/* @__PURE__ */ f("div", {
|
|
31
|
+
className: n(p.copyInput, { [p.isCopied]: F }),
|
|
32
|
+
children: [/* @__PURE__ */ d(o, {
|
|
33
|
+
...D,
|
|
34
|
+
ref: P,
|
|
35
|
+
"aria-describedby": n(g, B),
|
|
36
|
+
"aria-invalid": R,
|
|
37
|
+
className: p.input,
|
|
38
|
+
disabled: v,
|
|
39
|
+
hideLabel: b,
|
|
40
|
+
invalid: R,
|
|
41
|
+
label: S,
|
|
42
|
+
onCopy: N,
|
|
43
|
+
onFocus: I,
|
|
44
|
+
onSelect: L,
|
|
45
|
+
readOnly: !0,
|
|
46
|
+
value: E
|
|
47
|
+
}), /* @__PURE__ */ d(s, {
|
|
48
|
+
ref: m,
|
|
49
|
+
"aria-live": h,
|
|
50
|
+
className: p.button,
|
|
51
|
+
"data-target-id": _,
|
|
52
|
+
disabled: v,
|
|
53
|
+
onClick: N,
|
|
54
|
+
size: "large",
|
|
55
|
+
variant: "secondary",
|
|
56
|
+
children: F ? A : k
|
|
57
|
+
})]
|
|
58
|
+
}),
|
|
59
|
+
R && /* @__PURE__ */ d(c, {
|
|
60
|
+
className: p.error,
|
|
61
|
+
id: j,
|
|
62
|
+
children: y
|
|
63
|
+
}),
|
|
64
|
+
z && !R && /* @__PURE__ */ d(l, {
|
|
65
|
+
as: "p",
|
|
66
|
+
className: p.subtext,
|
|
67
|
+
color: "textOnLightSecondary",
|
|
68
|
+
id: M,
|
|
69
|
+
variant: "caption",
|
|
70
|
+
children: w
|
|
71
|
+
})
|
|
72
|
+
]
|
|
73
|
+
});
|
|
74
|
+
});
|
|
75
|
+
m.displayName = "CopyInput";
|
|
76
|
+
export { m as t };
|
package/dist/esm/index.js
CHANGED
|
@@ -1,99 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
import { useIntl as F } from "react-intl";
|
|
4
|
-
import { useUniqueId as y, BaseTextInput as M, Button as O, InlineError as z, Text as H } from "@box/blueprint-web";
|
|
5
|
-
import { useCopyToClipboard as U } from "./utils.js";
|
|
6
|
-
import f from "./messages.js";
|
|
7
|
-
import { jsxs as h, jsx as a } from "react/jsx-runtime";
|
|
8
|
-
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 = {
|
|
9
|
-
container: A,
|
|
10
|
-
hasError: G,
|
|
11
|
-
copyInput: J,
|
|
12
|
-
input: K,
|
|
13
|
-
button: P,
|
|
14
|
-
isCopied: Q,
|
|
15
|
-
error: V,
|
|
16
|
-
subtext: W
|
|
17
|
-
}, X = /* @__PURE__ */ k((I, x) => {
|
|
18
|
-
const {
|
|
19
|
-
ariaLive: C,
|
|
20
|
-
"aria-describedby": g,
|
|
21
|
-
"data-target-id": q,
|
|
22
|
-
disabled: r,
|
|
23
|
-
error: s,
|
|
24
|
-
hideLabel: w,
|
|
25
|
-
id: Y,
|
|
26
|
-
label: v,
|
|
27
|
-
onCopy: L,
|
|
28
|
-
subtext: c,
|
|
29
|
-
successStateDuration: E,
|
|
30
|
-
value: N,
|
|
31
|
-
...T
|
|
32
|
-
} = I, {
|
|
33
|
-
formatMessage: p
|
|
34
|
-
} = F(), B = p(f.copyButtonLabel), S = p(f.copyButtonCopiedLabel), d = y("error-"), l = y("subtext-"), {
|
|
35
|
-
copyToClipboard: u,
|
|
36
|
-
inputRef: D,
|
|
37
|
-
isCopied: b
|
|
38
|
-
} = U({
|
|
39
|
-
copyTimeout: E,
|
|
40
|
-
isDisabled: r,
|
|
41
|
-
onCopy: L
|
|
42
|
-
}), R = _((o) => {
|
|
43
|
-
o.target.select();
|
|
44
|
-
}, []), j = _((o) => {
|
|
45
|
-
o.target instanceof HTMLInputElement && o.target.setSelectionRange(0, o.target.value.length);
|
|
46
|
-
}, []), e = !!s && !r, m = !s && !!c;
|
|
47
|
-
let n;
|
|
48
|
-
return m && (n = l), e && (n = d), /* @__PURE__ */ h("div", {
|
|
49
|
-
className: i(t.container, {
|
|
50
|
-
[t.hasError]: e
|
|
51
|
-
}),
|
|
52
|
-
children: [/* @__PURE__ */ h("div", {
|
|
53
|
-
className: i(t.copyInput, {
|
|
54
|
-
[t.isCopied]: b
|
|
55
|
-
}),
|
|
56
|
-
children: [/* @__PURE__ */ a(M, {
|
|
57
|
-
...T,
|
|
58
|
-
ref: D,
|
|
59
|
-
"aria-describedby": i(g, n),
|
|
60
|
-
"aria-invalid": e,
|
|
61
|
-
className: t.input,
|
|
62
|
-
disabled: r,
|
|
63
|
-
hideLabel: w,
|
|
64
|
-
invalid: e,
|
|
65
|
-
label: v,
|
|
66
|
-
onCopy: u,
|
|
67
|
-
onFocus: R,
|
|
68
|
-
onSelect: j,
|
|
69
|
-
readOnly: !0,
|
|
70
|
-
value: N
|
|
71
|
-
}), /* @__PURE__ */ a(O, {
|
|
72
|
-
ref: x,
|
|
73
|
-
"aria-live": C,
|
|
74
|
-
className: t.button,
|
|
75
|
-
"data-target-id": q,
|
|
76
|
-
disabled: r,
|
|
77
|
-
onClick: u,
|
|
78
|
-
size: "large",
|
|
79
|
-
variant: "secondary",
|
|
80
|
-
children: b ? S : B
|
|
81
|
-
})]
|
|
82
|
-
}), e && /* @__PURE__ */ a(z, {
|
|
83
|
-
className: t.error,
|
|
84
|
-
id: d,
|
|
85
|
-
children: s
|
|
86
|
-
}), m && !e && /* @__PURE__ */ a(H, {
|
|
87
|
-
as: "p",
|
|
88
|
-
className: t.subtext,
|
|
89
|
-
color: "textOnLightSecondary",
|
|
90
|
-
id: l,
|
|
91
|
-
variant: "caption",
|
|
92
|
-
children: c
|
|
93
|
-
})]
|
|
94
|
-
});
|
|
95
|
-
});
|
|
96
|
-
X.displayName = "CopyInput";
|
|
97
|
-
export {
|
|
98
|
-
X as CopyInput
|
|
99
|
-
};
|
|
1
|
+
import { t as e } from "../../chunks/copy-input.js";
|
|
2
|
+
export { e as CopyInput };
|
package/dist/esm/lib/messages.js
CHANGED
|
@@ -1,14 +1,12 @@
|
|
|
1
1
|
import { defineMessages as e } from "react-intl";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
2
|
+
var t = e({
|
|
3
|
+
copyButtonLabel: {
|
|
4
|
+
id: "groupSharedFeatures.copyButton.copyButtonLabel",
|
|
5
|
+
defaultMessage: "Copy"
|
|
6
|
+
},
|
|
7
|
+
copyButtonCopiedLabel: {
|
|
8
|
+
id: "groupSharedFeatures.copyButton.copyButtonCopiedLabel",
|
|
9
|
+
defaultMessage: "Copied"
|
|
10
|
+
}
|
|
11
11
|
});
|
|
12
|
-
export {
|
|
13
|
-
t as default
|
|
14
|
-
};
|
|
12
|
+
export { t as default };
|
package/dist/esm/lib/utils.js
CHANGED
|
@@ -1,29 +1,27 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
};
|
|
27
|
-
export {
|
|
28
|
-
m as useCopyToClipboard
|
|
1
|
+
import { useCallback as e, useRef as t, useState as n } from "react";
|
|
2
|
+
var r = 3e3, i = ({ copyTimeout: i = r, isDisabled: a, onCopy: o }) => {
|
|
3
|
+
let s = t(null), [c, l] = n(!1);
|
|
4
|
+
return {
|
|
5
|
+
copyToClipboard: e(async () => {
|
|
6
|
+
if (!s.current || c || a) return;
|
|
7
|
+
if (!navigator.clipboard && !document.queryCommandSupported("copy")) {
|
|
8
|
+
o && o(/* @__PURE__ */ Error("Copying to clipboard is not supported"));
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
let e = s.current.value ?? "";
|
|
12
|
+
try {
|
|
13
|
+
navigator.clipboard ? (await navigator.clipboard.writeText(e), s.current.select()) : (s.current.select(), document.execCommand("copy")), o && o(e), l(!0), setTimeout(() => l(!1), i);
|
|
14
|
+
} catch (e) {
|
|
15
|
+
o && o(e);
|
|
16
|
+
}
|
|
17
|
+
}, [
|
|
18
|
+
i,
|
|
19
|
+
c,
|
|
20
|
+
a,
|
|
21
|
+
o
|
|
22
|
+
]),
|
|
23
|
+
inputRef: s,
|
|
24
|
+
isCopied: c
|
|
25
|
+
};
|
|
29
26
|
};
|
|
27
|
+
export { i as useCopyToClipboard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._container_17qpw_1._container_17qpw_1{--border-collapsible-border:
|
|
1
|
+
._container_17qpw_1._container_17qpw_1{--border-collapsible-border:var(--border-cta-border-secondary);flex-direction:column;display:flex}._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{border-top-left-radius:0;border-bottom-left-radius:0;align-self:flex-end;margin-left:-1px}._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/package.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/copy-input",
|
|
3
|
-
"version": "1.40.
|
|
3
|
+
"version": "1.40.33",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@box/blueprint-web": "^14.
|
|
7
|
-
"@box/blueprint-web-assets": "^4.112.
|
|
6
|
+
"@box/blueprint-web": "^14.6.0",
|
|
7
|
+
"@box/blueprint-web-assets": "^4.112.2",
|
|
8
8
|
"react": "^18.0.0",
|
|
9
9
|
"react-dom": "^18.0.0",
|
|
10
10
|
"react-intl": "^6.4.2"
|
|
11
11
|
},
|
|
12
12
|
"devDependencies": {
|
|
13
|
-
"@box/blueprint-web": "^14.
|
|
14
|
-
"@box/blueprint-web-assets": "^4.112.
|
|
13
|
+
"@box/blueprint-web": "^14.6.0",
|
|
14
|
+
"@box/blueprint-web-assets": "^4.112.2",
|
|
15
15
|
"@box/eslint-plugin-blueprint": "1.1.12",
|
|
16
|
-
"@box/storybook-utils": "0.17.
|
|
16
|
+
"@box/storybook-utils": "0.17.29",
|
|
17
17
|
"react-intl": "^6.4.2"
|
|
18
18
|
},
|
|
19
19
|
"publishConfig": {
|