@uva-glass/component-library 3.53.6 → 3.53.7
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.
|
@@ -7,5 +7,7 @@ export interface CopyableTextProps {
|
|
|
7
7
|
ariaLabelCopy?: string;
|
|
8
8
|
/** ARIA label for the copied state */
|
|
9
9
|
ariaLabelHasBeenCopied?: string;
|
|
10
|
+
/** custom value to be copied in place of the display text */
|
|
11
|
+
customCopyValue?: string;
|
|
10
12
|
}
|
|
11
|
-
export declare const CopyableText: ({ text, additionalClassName, ariaLabelCopy, ariaLabelHasBeenCopied, }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
export declare const CopyableText: ({ text, additionalClassName, ariaLabelCopy, ariaLabelHasBeenCopied, customCopyValue, }: CopyableTextProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,25 +1,26 @@
|
|
|
1
1
|
import { jsxs as u, jsx as y } from "react/jsx-runtime";
|
|
2
2
|
import { c as b } from "../../clsx-OuTLNxxd.js";
|
|
3
|
-
import { useState as f, useRef as m, useEffect as
|
|
4
|
-
import { Icon as
|
|
3
|
+
import { useState as f, useRef as m, useEffect as C } from "react";
|
|
4
|
+
import { Icon as _ } from "../Icon/Icon.js";
|
|
5
5
|
import '../../assets/CopyableText.css';const a = {
|
|
6
6
|
"copyable-text-container": "_copyable-text-container_l97qt_1",
|
|
7
7
|
"copyable-text-copy-button": "_copyable-text-copy-button_l97qt_8",
|
|
8
8
|
"copyable-text-copy-visually-hidden": "_copyable-text-copy-visually-hidden_l97qt_32"
|
|
9
|
-
},
|
|
10
|
-
text:
|
|
9
|
+
}, v = 2e3, g = ({
|
|
10
|
+
text: n,
|
|
11
11
|
additionalClassName: r = "",
|
|
12
12
|
ariaLabelCopy: s,
|
|
13
|
-
ariaLabelHasBeenCopied: p
|
|
13
|
+
ariaLabelHasBeenCopied: p,
|
|
14
|
+
customCopyValue: x
|
|
14
15
|
}) => {
|
|
15
|
-
const [
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
const [o, c] = f(!1), l = m(null), d = m(null), [h, e] = f(!1);
|
|
17
|
+
C(() => () => {
|
|
18
|
+
l.current && clearTimeout(l.current);
|
|
18
19
|
}, []);
|
|
19
|
-
const i = () => {
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
},
|
|
20
|
+
const i = (t) => {
|
|
21
|
+
t.stopPropagation(), t.preventDefault(), c(!0), l.current = setTimeout(() => {
|
|
22
|
+
c(!1), e(!1);
|
|
23
|
+
}, v), navigator.clipboard.writeText(x ?? n).catch(() => c(!1));
|
|
23
24
|
};
|
|
24
25
|
return /* @__PURE__ */ u(
|
|
25
26
|
"span",
|
|
@@ -27,29 +28,29 @@ import '../../assets/CopyableText.css';const a = {
|
|
|
27
28
|
className: b(a["copyable-text-container"], r),
|
|
28
29
|
role: "button",
|
|
29
30
|
tabIndex: 0,
|
|
30
|
-
onFocus: () =>
|
|
31
|
-
onBlur: () => !
|
|
32
|
-
onKeyDown: (
|
|
33
|
-
|
|
31
|
+
onFocus: () => e(!0),
|
|
32
|
+
onBlur: () => !o && e(!1),
|
|
33
|
+
onKeyDown: (t) => {
|
|
34
|
+
e(!0), (t.key === "Enter" || t.key === " ") && (t.preventDefault(), i(t));
|
|
34
35
|
},
|
|
35
|
-
onMouseEnter: () =>
|
|
36
|
-
onMouseLeave: () => !
|
|
36
|
+
onMouseEnter: () => e(!0),
|
|
37
|
+
onMouseLeave: () => !o && e(!1),
|
|
37
38
|
children: [
|
|
38
|
-
|
|
39
|
-
|
|
39
|
+
n,
|
|
40
|
+
h && /* @__PURE__ */ u(
|
|
40
41
|
"button",
|
|
41
42
|
{
|
|
42
|
-
ref:
|
|
43
|
+
ref: d,
|
|
43
44
|
className: b(a["copyable-text-copy-button"], r),
|
|
44
45
|
onClick: i,
|
|
45
46
|
type: "button",
|
|
46
47
|
"aria-keyshortcuts": "Enter Space",
|
|
47
|
-
"aria-label":
|
|
48
|
+
"aria-label": o ? p ?? "Copied" : s ?? "Copy to clipboard",
|
|
48
49
|
tabIndex: -1,
|
|
49
50
|
children: [
|
|
50
|
-
|
|
51
|
-
/* @__PURE__ */ y(
|
|
52
|
-
/* @__PURE__ */ y("span", { className: a["copyable-text-copy-visually-hidden"], "aria-live": "polite", children:
|
|
51
|
+
n,
|
|
52
|
+
/* @__PURE__ */ y(_, { name: o ? "CheckSmall" : "Copy", size: 20 }),
|
|
53
|
+
/* @__PURE__ */ y("span", { className: a["copyable-text-copy-visually-hidden"], "aria-live": "polite", children: o ? p ?? "Copied" : s ?? "Copy to clipboard" })
|
|
53
54
|
]
|
|
54
55
|
}
|
|
55
56
|
)
|
|
@@ -58,6 +59,6 @@ import '../../assets/CopyableText.css';const a = {
|
|
|
58
59
|
);
|
|
59
60
|
};
|
|
60
61
|
export {
|
|
61
|
-
|
|
62
|
+
g as CopyableText
|
|
62
63
|
};
|
|
63
64
|
//# sourceMappingURL=CopyableText.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyableText.js","sources":["../../../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n /** The text to be copied */\r\n text: string;\r\n /** Additional class name to style the text so it suits the design */\r\n additionalClassName?: string;\r\n /** ARIA label for the copy button */\r\n ariaLabelCopy?: string;\r\n /** ARIA label for the copied state */\r\n ariaLabelHasBeenCopied?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n text,\r\n additionalClassName = '',\r\n ariaLabelCopy,\r\n ariaLabelHasBeenCopied,\r\n}: CopyableTextProps) => {\r\n const [isCopying, setIsCopying] = useState(false);\r\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n const [buttonActive, setButtonActive] = useState(false);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n };\r\n }, []);\r\n\r\n const handleCopy = () => {\r\n setIsCopying(true);\r\n timeoutRef.current = setTimeout(() => {\r\n setIsCopying(false);\r\n setButtonActive(false);\r\n }, COPYTIME);\r\n navigator.clipboard.writeText(text).catch(() => setIsCopying(false));\r\n };\r\n\r\n return (\r\n <span\r\n className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n role=\"button\"\r\n tabIndex={0}\r\n onFocus={() => setButtonActive(true)}\r\n onBlur={() => !isCopying && setButtonActive(false)}\r\n onKeyDown={(event) => {\r\n setButtonActive(true);\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n handleCopy();\r\n }\r\n }}\r\n onMouseEnter={() => setButtonActive(true)}\r\n onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n >\r\n {text}\r\n {buttonActive && (\r\n <button\r\n ref={buttonRef}\r\n className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n onClick={handleCopy}\r\n type=\"button\"\r\n aria-keyshortcuts=\"Enter Space\"\r\n aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n tabIndex={-1}\r\n >\r\n {text}\r\n <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n </span>\r\n </button>\r\n )}\r\n </span>\r\n );\r\n};\r\n"],"names":["COPYTIME","CopyableText","text","additionalClassName","ariaLabelCopy","ariaLabelHasBeenCopied","isCopying","setIsCopying","useState","timeoutRef","useRef","buttonRef","buttonActive","setButtonActive","useEffect","handleCopy","jsxs","clsx","styles","
|
|
1
|
+
{"version":3,"file":"CopyableText.js","sources":["../../../src/components/CopyableText/CopyableText.tsx"],"sourcesContent":["import { clsx } from 'clsx';\r\nimport { useState, useRef, useEffect } from 'react';\r\n\r\nimport type { KeyboardEvent, MouseEvent } from 'react';\r\n\r\nimport styles from './CopyableText.module.css';\r\n\r\nimport { Icon } from 'components/Icon';\r\n\r\nexport interface CopyableTextProps {\r\n /** The text to be copied */\r\n text: string;\r\n /** Additional class name to style the text so it suits the design */\r\n additionalClassName?: string;\r\n /** ARIA label for the copy button */\r\n ariaLabelCopy?: string;\r\n /** ARIA label for the copied state */\r\n ariaLabelHasBeenCopied?: string;\r\n /** custom value to be copied in place of the display text */\r\n customCopyValue?: string;\r\n}\r\n\r\nconst COPYTIME = 2000;\r\n\r\nexport const CopyableText = ({\r\n text,\r\n additionalClassName = '',\r\n ariaLabelCopy,\r\n ariaLabelHasBeenCopied,\r\n customCopyValue,\r\n}: CopyableTextProps) => {\r\n const [isCopying, setIsCopying] = useState(false);\r\n const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\r\n const buttonRef = useRef<HTMLButtonElement | null>(null);\r\n const [buttonActive, setButtonActive] = useState(false);\r\n\r\n useEffect(() => {\r\n return () => {\r\n if (timeoutRef.current) clearTimeout(timeoutRef.current);\r\n };\r\n }, []);\r\n\r\n const handleCopy = (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLSpanElement>) => {\r\n // prevent event bubbling if placed inside another clikable element\r\n event.stopPropagation();\r\n event.preventDefault();\r\n\r\n setIsCopying(true);\r\n timeoutRef.current = setTimeout(() => {\r\n setIsCopying(false);\r\n setButtonActive(false);\r\n }, COPYTIME);\r\n navigator.clipboard.writeText(customCopyValue ?? text).catch(() => setIsCopying(false));\r\n };\r\n\r\n return (\r\n <span\r\n className={clsx(styles['copyable-text-container'], additionalClassName)}\r\n role=\"button\"\r\n tabIndex={0}\r\n onFocus={() => setButtonActive(true)}\r\n onBlur={() => !isCopying && setButtonActive(false)}\r\n onKeyDown={(event) => {\r\n setButtonActive(true);\r\n if (event.key === 'Enter' || event.key === ' ') {\r\n event.preventDefault();\r\n handleCopy(event);\r\n }\r\n }}\r\n onMouseEnter={() => setButtonActive(true)}\r\n onMouseLeave={() => !isCopying && setButtonActive(false)}\r\n >\r\n {text}\r\n {buttonActive && (\r\n <button\r\n ref={buttonRef}\r\n className={clsx(styles['copyable-text-copy-button'], additionalClassName)}\r\n onClick={handleCopy}\r\n type=\"button\"\r\n aria-keyshortcuts=\"Enter Space\"\r\n aria-label={isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n tabIndex={-1}\r\n >\r\n {text}\r\n <Icon name={isCopying ? 'CheckSmall' : 'Copy'} size={20} />\r\n <span className={styles['copyable-text-copy-visually-hidden']} aria-live=\"polite\">\r\n {isCopying ? (ariaLabelHasBeenCopied ?? 'Copied') : (ariaLabelCopy ?? 'Copy to clipboard')}\r\n </span>\r\n </button>\r\n )}\r\n </span>\r\n );\r\n};\r\n"],"names":["COPYTIME","CopyableText","text","additionalClassName","ariaLabelCopy","ariaLabelHasBeenCopied","customCopyValue","isCopying","setIsCopying","useState","timeoutRef","useRef","buttonRef","buttonActive","setButtonActive","useEffect","handleCopy","event","jsxs","clsx","styles","Icon","jsx"],"mappings":";;;;;;;;GAsBMA,IAAW,KAEJC,IAAe,CAAC;AAAA,EAC3B,MAAAC;AAAA,EACA,qBAAAC,IAAsB;AAAA,EACtB,eAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,iBAAAC;AACF,MAAyB;AACvB,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAC1CC,IAAaC,EAA6C,IAAI,GAC9DC,IAAYD,EAAiC,IAAI,GACjD,CAACE,GAAcC,CAAe,IAAIL,EAAS,EAAK;AAEtD,EAAAM,EAAU,MACD,MAAM;AACX,IAAIL,EAAW,WAAS,aAAaA,EAAW,OAAO;AAAA,EACzD,GACC,CAAA,CAAE;AAEL,QAAMM,IAAa,CAACC,MAA0E;AAE5F,IAAAA,EAAM,gBAAA,GACNA,EAAM,eAAA,GAENT,EAAa,EAAI,GACjBE,EAAW,UAAU,WAAW,MAAM;AACpC,MAAAF,EAAa,EAAK,GAClBM,EAAgB,EAAK;AAAA,IACvB,GAAGd,CAAQ,GACX,UAAU,UAAU,UAAUM,KAAmBJ,CAAI,EAAE,MAAM,MAAMM,EAAa,EAAK,CAAC;AAAA,EACxF;AAEA,SACE,gBAAAU;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKC,EAAO,yBAAyB,GAAGjB,CAAmB;AAAA,MACtE,MAAK;AAAA,MACL,UAAU;AAAA,MACV,SAAS,MAAMW,EAAgB,EAAI;AAAA,MACnC,QAAQ,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MACjD,WAAW,CAACG,MAAU;AACpB,QAAAH,EAAgB,EAAI,IAChBG,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACzCA,EAAM,eAAA,GACND,EAAWC,CAAK;AAAA,MAEpB;AAAA,MACA,cAAc,MAAMH,EAAgB,EAAI;AAAA,MACxC,cAAc,MAAM,CAACP,KAAaO,EAAgB,EAAK;AAAA,MAEtD,UAAA;AAAA,QAAAZ;AAAA,QACAW,KACC,gBAAAK;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,KAAKN;AAAA,YACL,WAAWO,EAAKC,EAAO,2BAA2B,GAAGjB,CAAmB;AAAA,YACxE,SAASa;AAAA,YACT,MAAK;AAAA,YACL,qBAAkB;AAAA,YAClB,cAAYT,IAAaF,KAA0B,WAAaD,KAAiB;AAAA,YACjF,UAAU;AAAA,YAET,UAAA;AAAA,cAAAF;AAAA,gCACAmB,GAAA,EAAK,MAAMd,IAAY,eAAe,QAAQ,MAAM,IAAI;AAAA,cACzD,gBAAAe,EAAC,QAAA,EAAK,WAAWF,EAAO,oCAAoC,GAAG,aAAU,UACtE,UAAAb,IAAaF,KAA0B,WAAaD,KAAiB,oBAAA,CACxE;AAAA,YAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAIR;"}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@uva-glass/component-library",
|
|
3
3
|
"author": "Team Glass - Frontend vrienden",
|
|
4
4
|
"private": false,
|
|
5
|
-
"version": "3.53.
|
|
5
|
+
"version": "3.53.7",
|
|
6
6
|
"type": "module",
|
|
7
7
|
"main": "dist/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
"@testing-library/jest-dom": "^6.9.1",
|
|
62
62
|
"@testing-library/react": "^16.3.1",
|
|
63
63
|
"@types/jest": "^30.0.0",
|
|
64
|
-
"@types/node": "^25.0.
|
|
64
|
+
"@types/node": "^25.0.5",
|
|
65
65
|
"@types/react": "^19.2.7",
|
|
66
66
|
"@types/react-dom": "^19.2.3",
|
|
67
67
|
"@uva-glass/eslint-config": "^1.3.11",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"vite-plugin-lib-inject-css": "^2.2.2",
|
|
97
97
|
"vite-plugin-static-copy": "^3.1.4",
|
|
98
98
|
"vite-plugin-svgr": "^4.5.0",
|
|
99
|
-
"vite-tsconfig-paths": "^6.0.
|
|
99
|
+
"vite-tsconfig-paths": "^6.0.4"
|
|
100
100
|
},
|
|
101
101
|
"dependencies": {
|
|
102
102
|
"@babel/preset-env": "^7.28.5",
|