@box/copy-input 1.15.3 → 1.16.0
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.
|
@@ -1,85 +1,84 @@
|
|
|
1
|
-
import { useUniqueId as
|
|
1
|
+
import { useUniqueId as _, BaseTextInput as k, Button as F, InlineError as O, Text as q } from "@box/blueprint-web";
|
|
2
2
|
import i from "clsx";
|
|
3
3
|
import { forwardRef as w, useCallback as f } from "react";
|
|
4
4
|
import { useIntl as z } from "react-intl";
|
|
5
5
|
import { messages as h } from "./messages.js";
|
|
6
6
|
import { useClipboardCopy as H } from "./utils.js";
|
|
7
|
-
import { jsxs as
|
|
8
|
-
import '../../styles/copy-input.css';const U = "
|
|
7
|
+
import { jsxs as I, jsx as n } from "react/jsx-runtime";
|
|
8
|
+
import '../../styles/copy-input.css';const U = "_formWrapper_241a0_2", A = "_hasError_241a0_7", G = "_copyInputWrapper_241a0_17", J = "_copied_241a0_21", K = "_copyButton_241a0_38", P = "_copyInput_241a0_17", Q = "_subtext_241a0_70", V = "_inlineError_241a0_71", e = {
|
|
9
9
|
formWrapper: U,
|
|
10
10
|
hasError: A,
|
|
11
11
|
copyInputWrapper: G,
|
|
12
12
|
copied: J,
|
|
13
13
|
copyButton: K,
|
|
14
14
|
copyInput: P,
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}, Y = /* @__PURE__ */ w((I, x) => {
|
|
15
|
+
subtext: Q,
|
|
16
|
+
inlineError: V
|
|
17
|
+
}, X = /* @__PURE__ */ w((x, E) => {
|
|
19
18
|
const {
|
|
20
|
-
id:
|
|
21
|
-
value:
|
|
19
|
+
id: Y,
|
|
20
|
+
value: g,
|
|
22
21
|
subtext: p,
|
|
23
|
-
error:
|
|
24
|
-
disabled:
|
|
25
|
-
ariaLive:
|
|
26
|
-
successStateDuration:
|
|
27
|
-
label:
|
|
22
|
+
error: o,
|
|
23
|
+
disabled: a,
|
|
24
|
+
ariaLive: B,
|
|
25
|
+
successStateDuration: C,
|
|
26
|
+
label: v,
|
|
28
27
|
onCopy: L,
|
|
29
28
|
hideLabel: W,
|
|
30
29
|
...l
|
|
31
|
-
} =
|
|
30
|
+
} = x, d = z(), N = d.formatMessage(h.copyButtonLabel), S = d.formatMessage(h.copyButtonCopiedLabel), u = _("inline-error-"), y = _("subtext-"), {
|
|
32
31
|
copied: m,
|
|
33
|
-
handleCopy:
|
|
32
|
+
handleCopy: b,
|
|
34
33
|
inputRef: T
|
|
35
|
-
} = H(
|
|
36
|
-
|
|
37
|
-
}, []), M = f((
|
|
38
|
-
|
|
39
|
-
}, []),
|
|
34
|
+
} = H(a, L, C), D = f((t) => {
|
|
35
|
+
t.target.select();
|
|
36
|
+
}, []), M = f((t) => {
|
|
37
|
+
t.target instanceof HTMLInputElement && t.target.setSelectionRange(0, t.target.value.length);
|
|
38
|
+
}, []), r = !!o && !a, s = !o && !!p, R = r || s;
|
|
40
39
|
let c = "";
|
|
41
|
-
|
|
40
|
+
r ? c = u : s && (c = y);
|
|
42
41
|
const j = i(l["aria-describedby"], {
|
|
43
42
|
[c]: R
|
|
44
43
|
});
|
|
45
|
-
return /* @__PURE__ */
|
|
44
|
+
return /* @__PURE__ */ I("div", {
|
|
46
45
|
className: i(e.formWrapper, {
|
|
47
|
-
[e.hasError]:
|
|
46
|
+
[e.hasError]: o
|
|
48
47
|
}),
|
|
49
|
-
children: [/* @__PURE__ */
|
|
48
|
+
children: [/* @__PURE__ */ I("div", {
|
|
50
49
|
className: i(e.copyInputWrapper, {
|
|
51
50
|
[e.copied]: m
|
|
52
51
|
}),
|
|
53
|
-
children: [/* @__PURE__ */
|
|
52
|
+
children: [/* @__PURE__ */ n(k, {
|
|
54
53
|
...l,
|
|
55
54
|
ref: T,
|
|
56
55
|
"aria-describedby": j || void 0,
|
|
57
|
-
"aria-invalid":
|
|
56
|
+
"aria-invalid": r,
|
|
58
57
|
className: e.copyInput,
|
|
59
|
-
disabled:
|
|
58
|
+
disabled: a,
|
|
60
59
|
hideLabel: W,
|
|
61
|
-
invalid:
|
|
62
|
-
label:
|
|
63
|
-
onCopy:
|
|
60
|
+
invalid: r,
|
|
61
|
+
label: v,
|
|
62
|
+
onCopy: b,
|
|
64
63
|
onFocus: D,
|
|
65
64
|
onSelect: M,
|
|
66
65
|
readOnly: !0,
|
|
67
|
-
value:
|
|
68
|
-
}), /* @__PURE__ */
|
|
69
|
-
ref:
|
|
70
|
-
"aria-live":
|
|
66
|
+
value: g
|
|
67
|
+
}), /* @__PURE__ */ n(F, {
|
|
68
|
+
ref: E,
|
|
69
|
+
"aria-live": B,
|
|
71
70
|
className: e.copyButton,
|
|
72
|
-
disabled:
|
|
73
|
-
onClick:
|
|
71
|
+
disabled: a,
|
|
72
|
+
onClick: b,
|
|
74
73
|
size: "large",
|
|
75
74
|
variant: "secondary",
|
|
76
75
|
children: m ? S : N
|
|
77
76
|
})]
|
|
78
|
-
}),
|
|
77
|
+
}), r ? /* @__PURE__ */ n(O, {
|
|
79
78
|
className: e.inlineError,
|
|
80
|
-
id:
|
|
81
|
-
children:
|
|
82
|
-
}) :
|
|
79
|
+
id: u,
|
|
80
|
+
children: o
|
|
81
|
+
}) : s && /* @__PURE__ */ n(q, {
|
|
83
82
|
as: "p",
|
|
84
83
|
className: e.subtext,
|
|
85
84
|
color: "textOnLightSecondary",
|
|
@@ -89,7 +88,7 @@ import '../../styles/copy-input.css';const U = "_formWrapper_1181v_2", A = "_has
|
|
|
89
88
|
})]
|
|
90
89
|
});
|
|
91
90
|
});
|
|
92
|
-
|
|
91
|
+
X.displayName = "CopyInput";
|
|
93
92
|
export {
|
|
94
|
-
|
|
93
|
+
X as CopyInput
|
|
95
94
|
};
|
package/dist/esm/lib/utils.js
CHANGED
|
@@ -1,23 +1,21 @@
|
|
|
1
|
-
import { useState as
|
|
2
|
-
const
|
|
3
|
-
const [
|
|
4
|
-
|
|
5
|
-
if (r || u)
|
|
1
|
+
import { useState as a, useRef as f, useCallback as T } from "react";
|
|
2
|
+
const m = 3e3, h = (r, e, n, c = !1) => {
|
|
3
|
+
const [t, s] = a(c), o = f(null), i = T(() => {
|
|
4
|
+
if (t || r)
|
|
6
5
|
return;
|
|
7
|
-
const
|
|
8
|
-
navigator.clipboard.writeText(
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
e == null || e(t);
|
|
6
|
+
const p = n || m, u = o.current?.value || "";
|
|
7
|
+
navigator.clipboard.writeText(u).then(() => {
|
|
8
|
+
o.current?.select(), e?.(u), s(!0), setTimeout(() => s(!1), p);
|
|
9
|
+
}).catch((l) => {
|
|
10
|
+
e?.(l);
|
|
13
11
|
});
|
|
14
|
-
}, [
|
|
12
|
+
}, [t, r, e, n]);
|
|
15
13
|
return {
|
|
16
|
-
inputRef:
|
|
17
|
-
handleCopy:
|
|
18
|
-
copied:
|
|
14
|
+
inputRef: o,
|
|
15
|
+
handleCopy: i,
|
|
16
|
+
copied: t
|
|
19
17
|
};
|
|
20
18
|
};
|
|
21
19
|
export {
|
|
22
|
-
|
|
20
|
+
h as useClipboardCopy
|
|
23
21
|
};
|
package/dist/i18n/en-x-pseudo.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export default {
|
|
2
|
-
"groupSharedFeatures.copyButton.copyButtonCopiedLabel": "⟦萬
|
|
3
|
-
"groupSharedFeatures.copyButton.copyButtonLabel": "⟦萬
|
|
2
|
+
"groupSharedFeatures.copyButton.copyButtonCopiedLabel": "⟦萬 ĈôΡĩěď 國⟧",
|
|
3
|
+
"groupSharedFeatures.copyButton.copyButtonLabel": "⟦萬 ÇŏΡУ 國⟧"
|
|
4
4
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
# Label for a call-to-action button in its active state. Button was clicked and text input's contents was copied the user's clipboard.
|
|
2
|
-
groupSharedFeatures.copyButton.copyButtonCopiedLabel = ⟦萬
|
|
2
|
+
groupSharedFeatures.copyButton.copyButtonCopiedLabel = ⟦萬 ĈôΡĩěď 國⟧
|
|
3
3
|
# Label for a call-to-action button in its default state. Clicking the button copies text input's contents to the user's clipboard.
|
|
4
|
-
groupSharedFeatures.copyButton.copyButtonLabel = ⟦萬
|
|
4
|
+
groupSharedFeatures.copyButton.copyButtonLabel = ⟦萬 ÇŏΡУ 國⟧
|
|
@@ -1 +1 @@
|
|
|
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)}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/copy-input",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.16.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@box/blueprint-web": "^
|
|
7
|
-
"@box/blueprint-web-assets": "^4.
|
|
6
|
+
"@box/blueprint-web": "^12.103.3",
|
|
7
|
+
"@box/blueprint-web-assets": "^4.86.3",
|
|
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": "^12.103.
|
|
14
|
-
"@box/blueprint-web-assets": "^4.86.
|
|
15
|
-
"@box/storybook-utils": "0.14.
|
|
13
|
+
"@box/blueprint-web": "^12.103.3",
|
|
14
|
+
"@box/blueprint-web-assets": "^4.86.3",
|
|
15
|
+
"@box/storybook-utils": "0.14.24",
|
|
16
16
|
"@box/eslint-plugin-blueprint": "1.0.5",
|
|
17
17
|
"react-intl": "^6.4.2"
|
|
18
18
|
},
|