@contentful/f36-copybutton 4.14.0 → 4.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.
- package/CHANGELOG.md +27 -0
- package/dist/main.js +53 -53
- package/dist/main.js.map +1 -1
- package/dist/module.js +53 -53
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,32 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 4.16.0
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies []:
|
|
8
|
+
- @contentful/f36-icons@4.16.0
|
|
9
|
+
- @contentful/f36-tooltip@4.16.0
|
|
10
|
+
- @contentful/f36-core@4.16.0
|
|
11
|
+
|
|
12
|
+
## 4.15.1
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- Updated dependencies []:
|
|
17
|
+
- @contentful/f36-icons@4.15.1
|
|
18
|
+
- @contentful/f36-tooltip@4.15.1
|
|
19
|
+
- @contentful/f36-core@4.15.1
|
|
20
|
+
|
|
21
|
+
## 4.15.0
|
|
22
|
+
|
|
23
|
+
### Patch Changes
|
|
24
|
+
|
|
25
|
+
- Updated dependencies []:
|
|
26
|
+
- @contentful/f36-icons@4.15.0
|
|
27
|
+
- @contentful/f36-tooltip@4.15.0
|
|
28
|
+
- @contentful/f36-core@4.15.0
|
|
29
|
+
|
|
3
30
|
## 4.14.0
|
|
4
31
|
|
|
5
32
|
### Patch Changes
|
package/dist/main.js
CHANGED
|
@@ -21,57 +21,57 @@ $parcel$export(module.exports, "CopyButton", () => $7cfc52ec8d291deb$export$4f25
|
|
|
21
21
|
|
|
22
22
|
|
|
23
23
|
const $a21422a7510521de$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
24
|
-
const buttonSize = size ===
|
|
24
|
+
const buttonSize = size === "small" ? "32px" : "40px";
|
|
25
25
|
return {
|
|
26
|
-
wrapper: /*#__PURE__*/ $2mOCL$emotion.css({
|
|
27
|
-
display:
|
|
26
|
+
wrapper: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
|
|
27
|
+
display: "inline-block",
|
|
28
28
|
height: buttonSize,
|
|
29
|
-
position:
|
|
29
|
+
position: "relative",
|
|
30
30
|
width: buttonSize
|
|
31
31
|
}),
|
|
32
|
-
copyButton: /*#__PURE__*/ $2mOCL$emotion.css({
|
|
33
|
-
alignItems:
|
|
34
|
-
background: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).colorWhite,
|
|
35
|
-
border: `1px solid ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300}`,
|
|
36
|
-
display:
|
|
37
|
-
height:
|
|
38
|
-
justifyContent:
|
|
39
|
-
outline:
|
|
32
|
+
copyButton: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
|
|
33
|
+
alignItems: "center",
|
|
34
|
+
background: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).colorWhite,
|
|
35
|
+
border: `1px solid ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300}`,
|
|
36
|
+
display: "inline-flex",
|
|
37
|
+
height: "100%",
|
|
38
|
+
justifyContent: "center",
|
|
39
|
+
outline: "none",
|
|
40
40
|
padding: 0,
|
|
41
|
-
transition: `background ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).transitionDurationShort} ${($parcel$interopDefault($2mOCL$contentfulf36tokens)).transitionEasingDefault}`,
|
|
42
|
-
width:
|
|
43
|
-
|
|
44
|
-
backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100,
|
|
45
|
-
cursor:
|
|
41
|
+
transition: `background ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).transitionEasingDefault}`,
|
|
42
|
+
width: "100%",
|
|
43
|
+
"&:hover": {
|
|
44
|
+
backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100,
|
|
45
|
+
cursor: "pointer"
|
|
46
46
|
},
|
|
47
|
-
|
|
48
|
-
backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray200,
|
|
49
|
-
cursor:
|
|
47
|
+
"&:active": {
|
|
48
|
+
backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray200,
|
|
49
|
+
cursor: "pointer"
|
|
50
50
|
},
|
|
51
|
-
|
|
52
|
-
boxShadow: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).glowMuted
|
|
51
|
+
"&:focus": {
|
|
52
|
+
boxShadow: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).glowMuted
|
|
53
53
|
},
|
|
54
|
-
|
|
55
|
-
boxShadow:
|
|
54
|
+
"&:focus:not(:focus-visible)": {
|
|
55
|
+
boxShadow: "unset"
|
|
56
56
|
},
|
|
57
|
-
|
|
58
|
-
boxShadow: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).glowMuted
|
|
57
|
+
"&:focus-visible": {
|
|
58
|
+
boxShadow: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).glowMuted
|
|
59
59
|
}
|
|
60
60
|
}),
|
|
61
|
-
copyButtonDisabled: /*#__PURE__*/ $2mOCL$emotion.css({
|
|
62
|
-
cursor:
|
|
63
|
-
backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100,
|
|
64
|
-
|
|
65
|
-
cursor:
|
|
66
|
-
backgroundColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray100
|
|
61
|
+
copyButtonDisabled: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
|
|
62
|
+
cursor: "not-allowed",
|
|
63
|
+
backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100,
|
|
64
|
+
"&:hover": {
|
|
65
|
+
cursor: "not-allowed",
|
|
66
|
+
backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100
|
|
67
67
|
},
|
|
68
|
-
|
|
69
|
-
borderColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300,
|
|
70
|
-
boxShadow:
|
|
68
|
+
"&:focus": {
|
|
69
|
+
borderColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300,
|
|
70
|
+
boxShadow: "none"
|
|
71
71
|
},
|
|
72
|
-
|
|
73
|
-
borderColor: ($parcel$interopDefault($2mOCL$contentfulf36tokens)).gray300,
|
|
74
|
-
boxShadow:
|
|
72
|
+
"&:active, &:active:hover": {
|
|
73
|
+
borderColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300,
|
|
74
|
+
boxShadow: "none"
|
|
75
75
|
}
|
|
76
76
|
})
|
|
77
77
|
};
|
|
@@ -79,13 +79,13 @@ const $a21422a7510521de$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
|
79
79
|
|
|
80
80
|
|
|
81
81
|
function $7cfc52ec8d291deb$var$_CopyButton(props, ref) {
|
|
82
|
-
const { onCopy: onCopy , value: value , className: className , testId: testId =
|
|
83
|
-
const styles = $a21422a7510521de$export$ffd58b7f6f099a57({
|
|
82
|
+
const { onCopy: onCopy , value: value , className: className , testId: testId = "cf-ui-copy-button" , tooltipText: tooltipText = "Copy to clipboard" , tooltipCopiedText: tooltipCopiedText = "Copied!" , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = "medium" , ...otherProps } = props;
|
|
83
|
+
const styles = (0, $a21422a7510521de$export$ffd58b7f6f099a57)({
|
|
84
84
|
size: size
|
|
85
85
|
});
|
|
86
|
-
const [copied, setCopied] = $2mOCL$react.useState(false);
|
|
87
|
-
const button = $2mOCL$react.useRef(null);
|
|
88
|
-
const handleOnCopy = $2mOCL$react.useCallback((e)=>{
|
|
86
|
+
const [copied, setCopied] = (0, $2mOCL$react.useState)(false);
|
|
87
|
+
const button = (0, $2mOCL$react.useRef)(null);
|
|
88
|
+
const handleOnCopy = (0, $2mOCL$react.useCallback)((e)=>{
|
|
89
89
|
if (onCopy) onCopy(e);
|
|
90
90
|
setCopied(true);
|
|
91
91
|
setTimeout(()=>{
|
|
@@ -95,34 +95,34 @@ function $7cfc52ec8d291deb$var$_CopyButton(props, ref) {
|
|
|
95
95
|
}, [
|
|
96
96
|
onCopy
|
|
97
97
|
]);
|
|
98
|
-
return /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement("div", {
|
|
98
|
+
return /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement("div", {
|
|
99
99
|
ref: ref,
|
|
100
100
|
"data-test-id": testId,
|
|
101
|
-
className: $2mOCL$emotion.cx(styles.wrapper, className),
|
|
101
|
+
className: (0, $2mOCL$emotion.cx)(styles.wrapper, className),
|
|
102
102
|
...otherProps
|
|
103
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement(($parcel$interopDefault($2mOCL$reactcopytoclipboard)), {
|
|
103
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, ($parcel$interopDefault($2mOCL$reactcopytoclipboard))), {
|
|
104
104
|
text: value,
|
|
105
105
|
onCopy: handleOnCopy
|
|
106
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement($2mOCL$contentfulf36tooltip.Tooltip, {
|
|
106
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, $2mOCL$contentfulf36tooltip.Tooltip), {
|
|
107
107
|
content: copied ? tooltipCopiedText : tooltipText,
|
|
108
108
|
...tooltipProps,
|
|
109
109
|
isDisabled: isDisabled
|
|
110
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement("button", {
|
|
110
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement("button", {
|
|
111
111
|
type: "button",
|
|
112
112
|
ref: button,
|
|
113
|
-
className: $2mOCL$emotion.cx(styles.copyButton, {
|
|
113
|
+
className: (0, $2mOCL$emotion.cx)(styles.copyButton, {
|
|
114
114
|
[styles.copyButtonDisabled]: isDisabled
|
|
115
115
|
}),
|
|
116
116
|
"aria-label": `Copy ${value} to clipboard`,
|
|
117
117
|
disabled: isDisabled,
|
|
118
118
|
"aria-live": "assertive"
|
|
119
|
-
}, /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).createElement($2mOCL$contentfulf36icons.CopyIcon, {
|
|
119
|
+
}, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, $2mOCL$contentfulf36icons.CopyIcon), {
|
|
120
120
|
variant: "muted",
|
|
121
|
-
size: size ===
|
|
121
|
+
size: size === "small" ? "tiny" : "small"
|
|
122
122
|
})))));
|
|
123
123
|
}
|
|
124
|
-
$7cfc52ec8d291deb$var$_CopyButton.displayName =
|
|
125
|
-
const $7cfc52ec8d291deb$export$4f2558dd25106ae2 = /*#__PURE__*/ ($parcel$interopDefault($2mOCL$react)).forwardRef($7cfc52ec8d291deb$var$_CopyButton);
|
|
124
|
+
$7cfc52ec8d291deb$var$_CopyButton.displayName = "CopyButton";
|
|
125
|
+
const $7cfc52ec8d291deb$export$4f2558dd25106ae2 = /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).forwardRef($7cfc52ec8d291deb$var$_CopyButton);
|
|
126
126
|
|
|
127
127
|
|
|
128
128
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;;;;;;A;;;;;A;;AEGO,MAAMY,yCAAS,GAAG,CAAC,
|
|
1
|
+
{"mappings":";;;;;;;;;;;;;;;A;;;;;A;;AEGO,MAAMY,yCAAS,GAAG,CAAC,QAAEU,IAAAA,CAAAA,EAAH,GAAc;IACrC,MAAMyB,UAAU,GAAGzB,IAAI,KAAK,OAAT,GAAmB,MAAnB,GAA4B,MAA/C,AAAA;IAEA,OAAO;QACLmB,OAAO,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACXO,OAAO,EAAE,cADE;YAEXC,MAAM,EAAEF,UAFG;YAGXG,QAAQ,EAAE,UAHC;YAIXC,KAAK,EAAEJ,UAAPI;SAJO,CADJ;QAOLT,UAAU,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACdU,UAAU,EAAE,QADE;YAEdC,UAAU,EAAEP,CAAAA,GAAAA,oDAAM,CAAA,CAACQ,UAFL;YAGdC,MAAM,EAAG,CAAA,UAAA,EAAYT,CAAAA,GAAAA,oDAAM,CAAA,CAACU,OAAQ,CAAA,CAHtB;YAIdR,OAAO,EAAE,aAJK;YAKdC,MAAM,EAAE,MALM;YAMdQ,cAAc,EAAE,QANF;YAOdC,OAAO,EAAE,MAPK;YAQdC,OAAO,EAAE,CARK;YASdC,UAAU,EAAG,CAAA,WAAA,EAAad,CAAAA,GAAAA,oDAAM,CAAA,CAACe,uBAAwB,CAAA,CAAA,EAAGf,CAAAA,GAAAA,oDAAM,CAAA,CAACgB,uBAAwB,CAAA,CAT7E;YAUdX,KAAK,EAAE,MAVO;YAWd,SAAA,EAAW;gBACTY,eAAe,EAAEjB,CAAAA,GAAAA,oDAAM,CAAA,CAACkB,OADf;gBAETC,MAAM,EAAE,SAARA;aAbY;YAed,UAAA,EAAY;gBACVF,eAAe,EAAEjB,CAAAA,GAAAA,oDAAM,CAAA,CAACoB,OADd;gBAEVD,MAAM,EAAE,SAARA;aAjBY;YAmBd,SAAA,EAAW;gBACTE,SAAS,EAAErB,CAAAA,GAAAA,oDAAM,CAAA,CAACsB,SAAlBD;aApBY;YAsBd,6BAAA,EAA+B;gBAC7BA,SAAS,EAAE,OAAXA;aAvBY;YAyBd,iBAAA,EAAmB;gBACjBA,SAAS,EAAErB,CAAAA,GAAAA,oDAAM,CAAA,CAACsB,SAAlBD;aADiB;SAzBT,CAPP;QAoCLxB,kBAAkB,EAAA,aAAE,CAAA,CAAA,GAAA,kBAAA,CAAA,CAAI;YACtBsB,MAAM,EAAE,aADc;YAEtBF,eAAe,EAAEjB,CAAAA,GAAAA,oDAAM,CAAA,CAACkB,OAFF;YAItB,SAAA,EAAW;gBACTC,MAAM,EAAE,aADC;gBAETF,eAAe,EAAEjB,CAAAA,GAAAA,oDAAM,CAAA,CAACkB,OAAxBD;aANoB;YAStB,SAAA,EAAW;gBACTM,WAAW,EAAEvB,CAAAA,GAAAA,oDAAM,CAAA,CAACU,OADX;gBAETW,SAAS,EAAE,MAAXA;aAXoB;YActB,0BAAA,EAA4B;gBAC1BE,WAAW,EAAEvB,CAAAA,GAAAA,oDAAM,CAAA,CAACU,OADM;gBAE1BW,SAAS,EAAE,MAAXA;aAF0B;SAdV,CAAI;KApC1B,CAAO;CAHF,AA2DN;;;ADdD,SAAS5C,iCAAT,CACEC,KADF,EAEEC,GAFF,EAGE;IACA,MAAM,UACJZ,MADI,CAAA,SAEJM,KAFI,CAAA,aAGJS,SAHI,CAAA,UAIJC,MAAM,GAAG,mBAJL,gBAKJb,WAAW,GAAG,mBALV,sBAMJD,iBAAiB,GAAG,SANhB,iBAOJE,YAPI,CAAA,cAQJI,UAAU,GAAG,KART,SASJC,IAAI,GAAG,QATH,GAUJ,GAAGQ,UAAH,EAVI,GAWFN,KAXJ,AAAM;IAYN,MAAMO,MAAM,GAAGnB,CAAAA,GAAAA,yCAAS,CAAA,CAAC;cAAEU,IAAAA;KAAH,CAAxB,AAAyB;IAEzB,MAAM,CAACU,MAAD,EAASC,SAAT,CAAA,GAAsB9B,CAAAA,GAAAA,qBAAQ,CAAA,CAAC,KAAD,CAApC,AAAA;IACA,MAAM+B,MAAM,GAAG7B,CAAAA,GAAAA,mBAAM,CAAA,CAA2B,IAA3B,CAArB,AAAA;IACA,MAAM+B,YAAY,GAAGhC,CAAAA,GAAAA,wBAAW,CAAA,CAC9B,CAACiC,CAAD,GAAe;QACb,IAAIxB,MAAJ,EACEA,MAAM,CAACwB,CAAD,CAAN,CAAAxB;QAGFoB,SAAS,CAAC,IAAD,CAAT,CAAAA;QAEAK,UAAU,CAAC,IAAM;YACfL,SAAS,CAAC,KAAD,CAAT,CAAAA;YACA,IAAIC,MAAM,CAACK,OAAX,EACEL,MAAM,CAACK,OAAP,CAAeC,IAAf,EAAAN,CAAAA;SAHM,EAKP,IALO,CAAV,CAKC;KAb2B,EAe9B;QAACrB,MAAD;KAf8B,CAAhC,AAcG;IAIH,qBACE,0DAAC,KAAD;QACE,GAAA,EAAKY,GAAD;QACJ,cAAA,EAAcI,MAAD;QACb,SAAA,EAAW,CAAA,GAAA,iBAAA,CAAA,CAAGE,MAAM,CAACU,OAAV,EAAmBb,SAAnB,CAAD;QACV,GAAIE,UAAJ;qBAEA,0DAAC,CAAA,GAAA,qDAAD,CAAA;QAAiB,IAAA,EAAMX,KAAD;QAAQ,MAAA,EAAQiB,YAAD;qBACnC,0DAAC,CAAA,GAAA,mCAAD,CAAA;QACE,OAAA,EAASJ,MAAM,GAAGjB,iBAAH,GAAuBC,WAA9B;QACR,GAAIC,YAAJ;QACA,UAAA,EAAYI,UAAD;qBAEX,0DAAC,QAAD;QACE,IAAA,EAAK,QADP;QAEE,GAAA,EAAKa,MAAD;QACJ,SAAA,EAAW,CAAA,GAAA,iBAAA,CAAA,CAAGH,MAAM,CAACW,UAAV,EAAsB;YAC/B,CAACX,MAAM,CAACY,kBAAR,CAAA,EAA6BtB,UAA7B;SADS,CAAD;QAGV,YAAA,EAAa,CAAA,KAAA,EAAOF,KAAM,CAAA,aAAA,CAAf;QACX,QAAA,EAAUE,UAAD;QACT,WAAA,EAAU,WARZ;qBAUE,0DAAC,CAAA,GAAA,kCAAD,CAAA;QACE,OAAA,EAAQ,OADV;QAEE,IAAA,EAAMC,IAAI,KAAK,OAAT,GAAmB,MAAnB,GAA4B,OAA7B;MAFnB,CAIA,CACA,CACA,CA7BE,CA8BF;CAEC;AAEDC,iCAAW,CAACqB,WAAZ,GAA0B,YAA1B,CAAArB;AAEO,MAAMvB,yCAAU,iBAAGE,CAAAA,GAAAA,sCAAK,CAAA,CAAC2C,UAAN,CAAiBtB,iCAAjB,CAAnB,AAAP;;AD1HA","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n /**\n * Function that gets called when the button is clicked\n */\n onCopy?: (string) => void;\n /**\n * Text to be shown when the button is clicked\n * @default Copied!\n */\n tooltipCopiedText?: string;\n /**\n * Text to be shown when button is hovered or focused\n * @default Copy to clipboard\n */\n tooltipText?: string;\n /**\n * Props that are passed to the tooltip component\n */\n tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n /**\n * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n /**\n * Label to be used on aria-label for the button\n * @default Copy {value} to clipboard\n */\n label?: string;\n /**\n * Allows to disable the copy button, when true the tooltip would not be shown\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Allows setting size of the copy button to small\n * @default medium\n */\n size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n props: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n onCopy,\n value,\n className,\n testId = 'cf-ui-copy-button',\n tooltipText = 'Copy to clipboard',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n isDisabled = false,\n size = 'medium',\n ...otherProps\n } = props;\n const styles = getStyles({ size });\n\n const [copied, setCopied] = useState(false);\n const button = useRef<HTMLButtonElement | null>(null);\n const handleOnCopy = useCallback(\n (e: string) => {\n if (onCopy) {\n onCopy(e);\n }\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n if (button.current) {\n button.current.blur();\n }\n }, 1000);\n },\n [onCopy],\n );\n\n return (\n <div\n ref={ref}\n data-test-id={testId}\n className={cx(styles.wrapper, className)}\n {...otherProps}\n >\n <CopyToClipboard text={value} onCopy={handleOnCopy}>\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <button\n type=\"button\"\n ref={button}\n className={cx(styles.copyButton, {\n [styles.copyButtonDisabled]: isDisabled,\n })}\n aria-label={`Copy ${value} to clipboard`}\n disabled={isDisabled}\n aria-live=\"assertive\"\n >\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n </button>\n </Tooltip>\n </CopyToClipboard>\n </div>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n wrapper: css({\n display: 'inline-block',\n height: buttonSize,\n position: 'relative',\n width: buttonSize,\n }),\n copyButton: css({\n alignItems: 'center',\n background: tokens.colorWhite,\n border: `1px solid ${tokens.gray300}`,\n display: 'inline-flex',\n height: '100%',\n justifyContent: 'center',\n outline: 'none',\n padding: 0,\n transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n width: '100%',\n '&:hover': {\n backgroundColor: tokens.gray100,\n cursor: 'pointer',\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n cursor: 'pointer',\n },\n '&:focus': {\n boxShadow: tokens.glowMuted,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowMuted,\n },\n }),\n copyButtonDisabled: css({\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n\n '&:hover': {\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n },\n\n '&:focus': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n\n '&:active, &:active:hover': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n }),\n };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"main.js.map"}
|
package/dist/module.js
CHANGED
|
@@ -13,57 +13,57 @@ import $dnnsg$contentfulf36tokens from "@contentful/f36-tokens";
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
const $c5d0896db030b9aa$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
16
|
-
const buttonSize = size ===
|
|
16
|
+
const buttonSize = size === "small" ? "32px" : "40px";
|
|
17
17
|
return {
|
|
18
|
-
wrapper: /*#__PURE__*/ $dnnsg$css({
|
|
19
|
-
display:
|
|
18
|
+
wrapper: /*#__PURE__*/ (0, $dnnsg$css)({
|
|
19
|
+
display: "inline-block",
|
|
20
20
|
height: buttonSize,
|
|
21
|
-
position:
|
|
21
|
+
position: "relative",
|
|
22
22
|
width: buttonSize
|
|
23
23
|
}),
|
|
24
|
-
copyButton: /*#__PURE__*/ $dnnsg$css({
|
|
25
|
-
alignItems:
|
|
26
|
-
background: $dnnsg$contentfulf36tokens.colorWhite,
|
|
27
|
-
border: `1px solid ${$dnnsg$contentfulf36tokens.gray300}`,
|
|
28
|
-
display:
|
|
29
|
-
height:
|
|
30
|
-
justifyContent:
|
|
31
|
-
outline:
|
|
24
|
+
copyButton: /*#__PURE__*/ (0, $dnnsg$css)({
|
|
25
|
+
alignItems: "center",
|
|
26
|
+
background: (0, $dnnsg$contentfulf36tokens).colorWhite,
|
|
27
|
+
border: `1px solid ${(0, $dnnsg$contentfulf36tokens).gray300}`,
|
|
28
|
+
display: "inline-flex",
|
|
29
|
+
height: "100%",
|
|
30
|
+
justifyContent: "center",
|
|
31
|
+
outline: "none",
|
|
32
32
|
padding: 0,
|
|
33
|
-
transition: `background ${$dnnsg$contentfulf36tokens.transitionDurationShort} ${$dnnsg$contentfulf36tokens.transitionEasingDefault}`,
|
|
34
|
-
width:
|
|
35
|
-
|
|
36
|
-
backgroundColor: $dnnsg$contentfulf36tokens.gray100,
|
|
37
|
-
cursor:
|
|
33
|
+
transition: `background ${(0, $dnnsg$contentfulf36tokens).transitionDurationShort} ${(0, $dnnsg$contentfulf36tokens).transitionEasingDefault}`,
|
|
34
|
+
width: "100%",
|
|
35
|
+
"&:hover": {
|
|
36
|
+
backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100,
|
|
37
|
+
cursor: "pointer"
|
|
38
38
|
},
|
|
39
|
-
|
|
40
|
-
backgroundColor: $dnnsg$contentfulf36tokens.gray200,
|
|
41
|
-
cursor:
|
|
39
|
+
"&:active": {
|
|
40
|
+
backgroundColor: (0, $dnnsg$contentfulf36tokens).gray200,
|
|
41
|
+
cursor: "pointer"
|
|
42
42
|
},
|
|
43
|
-
|
|
44
|
-
boxShadow: $dnnsg$contentfulf36tokens.glowMuted
|
|
43
|
+
"&:focus": {
|
|
44
|
+
boxShadow: (0, $dnnsg$contentfulf36tokens).glowMuted
|
|
45
45
|
},
|
|
46
|
-
|
|
47
|
-
boxShadow:
|
|
46
|
+
"&:focus:not(:focus-visible)": {
|
|
47
|
+
boxShadow: "unset"
|
|
48
48
|
},
|
|
49
|
-
|
|
50
|
-
boxShadow: $dnnsg$contentfulf36tokens.glowMuted
|
|
49
|
+
"&:focus-visible": {
|
|
50
|
+
boxShadow: (0, $dnnsg$contentfulf36tokens).glowMuted
|
|
51
51
|
}
|
|
52
52
|
}),
|
|
53
|
-
copyButtonDisabled: /*#__PURE__*/ $dnnsg$css({
|
|
54
|
-
cursor:
|
|
55
|
-
backgroundColor: $dnnsg$contentfulf36tokens.gray100,
|
|
56
|
-
|
|
57
|
-
cursor:
|
|
58
|
-
backgroundColor: $dnnsg$contentfulf36tokens.gray100
|
|
53
|
+
copyButtonDisabled: /*#__PURE__*/ (0, $dnnsg$css)({
|
|
54
|
+
cursor: "not-allowed",
|
|
55
|
+
backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100,
|
|
56
|
+
"&:hover": {
|
|
57
|
+
cursor: "not-allowed",
|
|
58
|
+
backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100
|
|
59
59
|
},
|
|
60
|
-
|
|
61
|
-
borderColor: $dnnsg$contentfulf36tokens.gray300,
|
|
62
|
-
boxShadow:
|
|
60
|
+
"&:focus": {
|
|
61
|
+
borderColor: (0, $dnnsg$contentfulf36tokens).gray300,
|
|
62
|
+
boxShadow: "none"
|
|
63
63
|
},
|
|
64
|
-
|
|
65
|
-
borderColor: $dnnsg$contentfulf36tokens.gray300,
|
|
66
|
-
boxShadow:
|
|
64
|
+
"&:active, &:active:hover": {
|
|
65
|
+
borderColor: (0, $dnnsg$contentfulf36tokens).gray300,
|
|
66
|
+
boxShadow: "none"
|
|
67
67
|
}
|
|
68
68
|
})
|
|
69
69
|
};
|
|
@@ -71,13 +71,13 @@ const $c5d0896db030b9aa$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
|
71
71
|
|
|
72
72
|
|
|
73
73
|
function $b6698237aa721326$var$_CopyButton(props, ref) {
|
|
74
|
-
const { onCopy: onCopy , value: value , className: className , testId: testId =
|
|
75
|
-
const styles = $c5d0896db030b9aa$export$ffd58b7f6f099a57({
|
|
74
|
+
const { onCopy: onCopy , value: value , className: className , testId: testId = "cf-ui-copy-button" , tooltipText: tooltipText = "Copy to clipboard" , tooltipCopiedText: tooltipCopiedText = "Copied!" , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = "medium" , ...otherProps } = props;
|
|
75
|
+
const styles = (0, $c5d0896db030b9aa$export$ffd58b7f6f099a57)({
|
|
76
76
|
size: size
|
|
77
77
|
});
|
|
78
|
-
const [copied, setCopied] = $dnnsg$useState(false);
|
|
79
|
-
const button = $dnnsg$useRef(null);
|
|
80
|
-
const handleOnCopy = $dnnsg$useCallback((e)=>{
|
|
78
|
+
const [copied, setCopied] = (0, $dnnsg$useState)(false);
|
|
79
|
+
const button = (0, $dnnsg$useRef)(null);
|
|
80
|
+
const handleOnCopy = (0, $dnnsg$useCallback)((e)=>{
|
|
81
81
|
if (onCopy) onCopy(e);
|
|
82
82
|
setCopied(true);
|
|
83
83
|
setTimeout(()=>{
|
|
@@ -87,34 +87,34 @@ function $b6698237aa721326$var$_CopyButton(props, ref) {
|
|
|
87
87
|
}, [
|
|
88
88
|
onCopy
|
|
89
89
|
]);
|
|
90
|
-
return /*#__PURE__*/ $dnnsg$react.createElement("div", {
|
|
90
|
+
return /*#__PURE__*/ (0, $dnnsg$react).createElement("div", {
|
|
91
91
|
ref: ref,
|
|
92
92
|
"data-test-id": testId,
|
|
93
|
-
className: $dnnsg$cx(styles.wrapper, className),
|
|
93
|
+
className: (0, $dnnsg$cx)(styles.wrapper, className),
|
|
94
94
|
...otherProps
|
|
95
|
-
}, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$reactcopytoclipboard, {
|
|
95
|
+
}, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$reactcopytoclipboard), {
|
|
96
96
|
text: value,
|
|
97
97
|
onCopy: handleOnCopy
|
|
98
|
-
}, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$Tooltip, {
|
|
98
|
+
}, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$Tooltip), {
|
|
99
99
|
content: copied ? tooltipCopiedText : tooltipText,
|
|
100
100
|
...tooltipProps,
|
|
101
101
|
isDisabled: isDisabled
|
|
102
|
-
}, /*#__PURE__*/ $dnnsg$react.createElement("button", {
|
|
102
|
+
}, /*#__PURE__*/ (0, $dnnsg$react).createElement("button", {
|
|
103
103
|
type: "button",
|
|
104
104
|
ref: button,
|
|
105
|
-
className: $dnnsg$cx(styles.copyButton, {
|
|
105
|
+
className: (0, $dnnsg$cx)(styles.copyButton, {
|
|
106
106
|
[styles.copyButtonDisabled]: isDisabled
|
|
107
107
|
}),
|
|
108
108
|
"aria-label": `Copy ${value} to clipboard`,
|
|
109
109
|
disabled: isDisabled,
|
|
110
110
|
"aria-live": "assertive"
|
|
111
|
-
}, /*#__PURE__*/ $dnnsg$react.createElement($dnnsg$CopyIcon, {
|
|
111
|
+
}, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$CopyIcon), {
|
|
112
112
|
variant: "muted",
|
|
113
|
-
size: size ===
|
|
113
|
+
size: size === "small" ? "tiny" : "small"
|
|
114
114
|
})))));
|
|
115
115
|
}
|
|
116
|
-
$b6698237aa721326$var$_CopyButton.displayName =
|
|
117
|
-
const $b6698237aa721326$export$4f2558dd25106ae2 = /*#__PURE__*/ $dnnsg$react.forwardRef($b6698237aa721326$var$_CopyButton);
|
|
116
|
+
$b6698237aa721326$var$_CopyButton.displayName = "CopyButton";
|
|
117
|
+
const $b6698237aa721326$export$4f2558dd25106ae2 = /*#__PURE__*/ (0, $dnnsg$react).forwardRef($b6698237aa721326$var$_CopyButton);
|
|
118
118
|
|
|
119
119
|
|
|
120
120
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;A;;;;;A;;AEGO,MAAMY,yCAAS,GAAG,CAAC,
|
|
1
|
+
{"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n /**\n * Function that gets called when the button is clicked\n */\n onCopy?: (string) => void;\n /**\n * Text to be shown when the button is clicked\n * @default Copied!\n */\n tooltipCopiedText?: string;\n /**\n * Text to be shown when button is hovered or focused\n * @default Copy to clipboard\n */\n tooltipText?: string;\n /**\n * Props that are passed to the tooltip component\n */\n tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n /**\n * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n /**\n * Label to be used on aria-label for the button\n * @default Copy {value} to clipboard\n */\n label?: string;\n /**\n * Allows to disable the copy button, when true the tooltip would not be shown\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Allows setting size of the copy button to small\n * @default medium\n */\n size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n props: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n onCopy,\n value,\n className,\n testId = 'cf-ui-copy-button',\n tooltipText = 'Copy to clipboard',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n isDisabled = false,\n size = 'medium',\n ...otherProps\n } = props;\n const styles = getStyles({ size });\n\n const [copied, setCopied] = useState(false);\n const button = useRef<HTMLButtonElement | null>(null);\n const handleOnCopy = useCallback(\n (e: string) => {\n if (onCopy) {\n onCopy(e);\n }\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n if (button.current) {\n button.current.blur();\n }\n }, 1000);\n },\n [onCopy],\n );\n\n return (\n <div\n ref={ref}\n data-test-id={testId}\n className={cx(styles.wrapper, className)}\n {...otherProps}\n >\n <CopyToClipboard text={value} onCopy={handleOnCopy}>\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <button\n type=\"button\"\n ref={button}\n className={cx(styles.copyButton, {\n [styles.copyButtonDisabled]: isDisabled,\n })}\n aria-label={`Copy ${value} to clipboard`}\n disabled={isDisabled}\n aria-live=\"assertive\"\n >\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n </button>\n </Tooltip>\n </CopyToClipboard>\n </div>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n wrapper: css({\n display: 'inline-block',\n height: buttonSize,\n position: 'relative',\n width: buttonSize,\n }),\n copyButton: css({\n alignItems: 'center',\n background: tokens.colorWhite,\n border: `1px solid ${tokens.gray300}`,\n display: 'inline-flex',\n height: '100%',\n justifyContent: 'center',\n outline: 'none',\n padding: 0,\n transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n width: '100%',\n '&:hover': {\n backgroundColor: tokens.gray100,\n cursor: 'pointer',\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n cursor: 'pointer',\n },\n '&:focus': {\n boxShadow: tokens.glowMuted,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowMuted,\n },\n }),\n copyButtonDisabled: css({\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n\n '&:hover': {\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n },\n\n '&:focus': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n\n '&:active, &:active:hover': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n }),\n };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"module.js.map"}
|
package/dist/types.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;
|
|
1
|
+
{"mappings":";;;ACQA,gCAAiC,SAAQ,WAAW;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AA4ED,OAAO,MAAM,kGAA0C,CAAC","sources":["packages/components/copybutton/src/src/CopyButton.styles.ts","packages/components/copybutton/src/src/CopyButton.tsx","packages/components/copybutton/src/src/index.ts","packages/components/copybutton/src/index.ts"],"sourcesContent":[null,null,null,"export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
|
package/package.json
CHANGED
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-copybutton",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.16.0",
|
|
4
4
|
"description": "Forma 36: CopyButton component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "parcel build"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"@babel/runtime": "^7.6.2",
|
|
10
|
-
"@contentful/f36-core": "^4.
|
|
11
|
-
"@contentful/f36-icons": "^4.
|
|
10
|
+
"@contentful/f36-core": "^4.16.0",
|
|
11
|
+
"@contentful/f36-icons": "^4.16.0",
|
|
12
12
|
"@contentful/f36-tokens": "^4.0.1",
|
|
13
|
-
"@contentful/f36-tooltip": "^4.
|
|
13
|
+
"@contentful/f36-tooltip": "^4.16.0",
|
|
14
14
|
"emotion": "^10.0.17",
|
|
15
|
-
"react-copy-to-clipboard": "^5.0
|
|
15
|
+
"react-copy-to-clipboard": "^5.1.0"
|
|
16
16
|
},
|
|
17
17
|
"peerDependencies": {
|
|
18
18
|
"react": ">=16.8"
|