@contentful/f36-copybutton 4.24.0 → 4.25.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/README.mdx +8 -0
- package/dist/esm/index.js +5 -6
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.ts +43 -5
- package/dist/index.js +6 -9
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/README.mdx
CHANGED
|
@@ -45,6 +45,14 @@ To read more about all possible values of `tooltipProps` object, refer to [Toolt
|
|
|
45
45
|
|
|
46
46
|
```
|
|
47
47
|
|
|
48
|
+
### Using with promises
|
|
49
|
+
|
|
50
|
+
Sometimes you want to await a Promise before know the value to copy to the clipboard. You can do this in the code where the copy button is implemented.
|
|
51
|
+
|
|
52
|
+
```jsx file=examples/CopyButtonWithPromiseExample.tsx
|
|
53
|
+
|
|
54
|
+
```
|
|
55
|
+
|
|
48
56
|
## Accessibility
|
|
49
57
|
|
|
50
58
|
You can pass a custom `aria-label` through the `label` prop.
|
package/dist/esm/index.js
CHANGED
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import n, { useState, useRef, useCallback } from 'react';
|
|
3
|
-
import j from 'react-copy-to-clipboard';
|
|
1
|
+
import m, { useState, useCallback } from 'react';
|
|
4
2
|
import { CopyIcon } from '@contentful/f36-icons';
|
|
5
3
|
import { Tooltip } from '@contentful/f36-tooltip';
|
|
6
|
-
import
|
|
4
|
+
import { Button } from '@contentful/f36-button';
|
|
5
|
+
import { cx, css } from 'emotion';
|
|
7
6
|
|
|
8
|
-
var
|
|
7
|
+
var S=Object.defineProperty,D=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var P=(t,o,e)=>o in t?S(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))b.call(o,e)&&P(t,e,o[e]);if(c)for(var e of c(o))g.call(o,e)&&P(t,e,o[e]);return t},C=(t,o)=>D(t,L(o));var h=(t,o)=>{var e={};for(var r in t)b.call(t,r)&&o.indexOf(r)<0&&(e[r]=t[r]);if(t!=null&&c)for(var r of c(t))o.indexOf(r)<0&&g.call(t,r)&&(e[r]=t[r]);return e};var T=(t,o,e)=>new Promise((r,i)=>{var p=n=>{try{s(e.next(n));}catch(a){i(a);}},l=n=>{try{s(e.throw(n));}catch(a){i(a);}},s=n=>n.done?r(n.value):Promise.resolve(n.value).then(p,l);s((e=e.apply(t,o)).next());});var v=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:css({height:o,minHeight:"auto",minWidth:"auto",width:o})}};function E(q,I){var B=q,{className:t,isDisabled:o=!1,isLoading:e=!1,label:r,onBlur:i,onCopy:p,size:l="medium",testId:s="cf-ui-copy-button",tooltipCopiedText:n="Copied!",tooltipProps:a,tooltipText:H="Copy to clipboard",value:u}=B,w=h(B,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value"]);let M=v({size:l}),[d,x]=useState(!1),k=useCallback(()=>T(this,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(y){console.error(y);return}p==null||p(u),x(!0);}),[p,u]),z=y=>{d&&x(!1),i==null||i(y);};return m.createElement(Tooltip,C(f({content:d?n:H},a),{isDisabled:o}),m.createElement(Button,C(f({"aria-label":d?"Value copied to clipboard":r!=null?r:"Copy to clipboard","aria-live":"assertive",className:cx(M.button,t),isDisabled:e||o,isLoading:e,onBlur:z,testId:s},w),{onClick:k,ref:I,startIcon:m.createElement(CopyIcon,{variant:"muted",size:l==="small"?"tiny":"small"}),variant:"secondary"})))}E.displayName="CopyButton";var j=m.forwardRef(E);
|
|
9
8
|
|
|
10
|
-
export {
|
|
9
|
+
export { j as CopyButton };
|
|
11
10
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/CopyButton.tsx","../../src/CopyButton.styles.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../../src/CopyButton.tsx","../../src/CopyButton.styles.ts"],"names":["React","useCallback","useState","CopyIcon","Tooltip","Button","css","getCopyButtonStyles","size","buttonSize","cx","_CopyButton","_a","ref","_b","className","isDisabled","isLoading","label","onBlur","onCopy","testId","tooltipCopiedText","tooltipProps","tooltipText","value","otherProps","__objRest","styles","copied","setCopied","handleClick","__async","error","handleBlur","event","__spreadProps","__spreadValues","CopyButton"],"mappings":"4xBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAGK,QACP,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,UAAAC,MAAgC,yBCTzC,OAAS,OAAAC,MAAW,UAGb,IAAMC,EAAsB,CAAC,CAClC,KAAAC,CACF,IAAqC,CACnC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,OAAQF,EAAI,CACV,OAAQG,EACR,UAAW,OACX,SAAU,OACV,MAAOA,CACT,CAAC,CACH,CACF,EDLA,OAAS,MAAAC,MAAU,UA6CnB,SAASC,EACPC,EAeAC,EACA,CAhBA,IAAAC,EAAAF,EACE,WAAAG,EACA,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAZ,EAAO,SACP,OAAAa,EAAS,oBACT,kBAAAC,EAAoB,UACpB,aAAAC,EACA,YAAAC,EAAc,oBACd,MAAAC,CArEJ,EAyDEX,EAaKY,EAAAC,EAbLb,EAaK,CAZH,YACA,aACA,YACA,QACA,SACA,SACA,OACA,SACA,oBACA,eACA,cACA,UAKF,IAAMc,EAASrB,EAAoB,CAAE,KAAAC,CAAK,CAAC,EACrC,CAACqB,EAAQC,CAAS,EAAI5B,EAAS,EAAK,EAEpC6B,EAAc9B,EAElB,IAAY+B,EAAA,sBACZ,GAAI,CACF,MAAM,OAAO,UAAU,UAAU,UAAUP,CAAK,CAClD,OAASQ,EAAP,CACA,QAAQ,MAAMA,CAAK,EACnB,MACF,CAEAb,GAAA,MAAAA,EAASK,GACTK,EAAU,EAAI,CAChB,GAAG,CAACV,EAAQK,CAAK,CAAC,EAEZS,EAAoDC,GAAU,CAC9DN,GACFC,EAAU,EAAK,EAGjBX,GAAA,MAAAA,EAASgB,EACX,EAEA,OACEnC,EAAA,cAACI,EAAAgC,EAAAC,EAAA,CACC,QAASR,EAASP,EAAoBE,GAClCD,GAFL,CAGC,WAAYP,IAEZhB,EAAA,cAACK,EAAA+B,EAAAC,EAAA,CACC,aACER,EAAS,4BAA8BX,GAAA,KAAAA,EAAS,oBAElD,YAAU,YACV,UAAWR,EAAGkB,EAAO,OAAQb,CAAS,EACtC,WAAYE,GAAaD,EACzB,UAAWC,EACX,OAAQiB,EACR,OAAQb,GACJK,GAVL,CAWC,QAASK,EACT,IAAKlB,EACL,UACEb,EAAA,cAACG,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,EAEF,QAAQ,aACV,CACF,CAEJ,CAEAG,EAAY,YAAc,aAEnB,IAAM2B,EAAatC,EAAM,WAAWW,CAAW","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { Button, type ButtonProps } from '@contentful/f36-button';\nimport { getCopyButtonStyles } from './CopyButton.styles';\nimport { cx } from 'emotion';\n\nexport type CopyButtonProps = Omit<\n ButtonProps,\n 'children' | 'endIcon' | 'startIcon' | 'isDisabed' | 'size'\n> & {\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 * Label to be used on aria-label for the button\n * @default Copy 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 * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n};\n\nfunction _CopyButton(\n {\n className,\n isDisabled = false,\n isLoading = false,\n label,\n onBlur,\n onCopy,\n size = 'medium',\n testId = 'cf-ui-copy-button',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n tooltipText = 'Copy to clipboard',\n value,\n ...otherProps\n }: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const styles = getCopyButtonStyles({ size });\n const [copied, setCopied] = useState(false);\n\n const handleClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(async () => {\n try {\n await window.navigator.clipboard.writeText(value);\n } catch (error) {\n console.error(error);\n return;\n }\n\n onCopy?.(value);\n setCopied(true);\n }, [onCopy, value]);\n\n const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n if (copied) {\n setCopied(false);\n }\n\n onBlur?.(event);\n };\n\n return (\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <Button\n aria-label={\n copied ? 'Value copied to clipboard' : label ?? `Copy to clipboard`\n }\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n {...otherProps}\n onClick={handleClick}\n ref={ref}\n startIcon={\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n />\n </Tooltip>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport { CopyButtonProps } from './CopyButton';\n\nexport const getCopyButtonStyles = ({\n size,\n}: Pick<CopyButtonProps, 'size'>) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n button: css({\n height: buttonSize,\n minHeight: 'auto',\n minWidth: 'auto',\n width: buttonSize,\n }),\n };\n};\n"]}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { CommonProps } from '@contentful/f36-core';
|
|
3
2
|
import { TooltipProps } from '@contentful/f36-tooltip';
|
|
3
|
+
import { ButtonProps } from '@contentful/f36-button';
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
declare type CopyButtonProps = Omit<ButtonProps, 'children' | 'endIcon' | 'startIcon' | 'isDisabed' | 'size'> & {
|
|
6
6
|
/**
|
|
7
7
|
* Function that gets called when the button is clicked
|
|
8
8
|
*/
|
|
@@ -21,13 +21,48 @@ interface CopyButtonProps extends CommonProps {
|
|
|
21
21
|
* Props that are passed to the tooltip component
|
|
22
22
|
*/
|
|
23
23
|
tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
|
|
24
|
+
/**
|
|
25
|
+
* Label to be used on aria-label for the button
|
|
26
|
+
* @default Copy to clipboard
|
|
27
|
+
*/
|
|
28
|
+
label?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Allows to disable the copy button, when true the tooltip would not be shown
|
|
31
|
+
* @default false
|
|
32
|
+
*/
|
|
33
|
+
isDisabled?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Allows setting size of the copy button to small
|
|
36
|
+
* @default medium
|
|
37
|
+
*/
|
|
38
|
+
size?: 'small' | 'medium';
|
|
24
39
|
/**
|
|
25
40
|
* Value that will be copied to clipboard when the button is clicked
|
|
26
41
|
*/
|
|
27
42
|
value: string;
|
|
43
|
+
};
|
|
44
|
+
declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"button">, "children" | "size" | "startIcon" | "endIcon" | "isDisabed"> & {
|
|
45
|
+
/**
|
|
46
|
+
* Function that gets called when the button is clicked
|
|
47
|
+
*/
|
|
48
|
+
onCopy?: (string: any) => void;
|
|
49
|
+
/**
|
|
50
|
+
* Text to be shown when the button is clicked
|
|
51
|
+
* @default Copied!
|
|
52
|
+
*/
|
|
53
|
+
tooltipCopiedText?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Text to be shown when button is hovered or focused
|
|
56
|
+
* @default Copy to clipboard
|
|
57
|
+
*/
|
|
58
|
+
tooltipText?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Props that are passed to the tooltip component
|
|
61
|
+
*/
|
|
62
|
+
tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
|
|
28
63
|
/**
|
|
29
64
|
* Label to be used on aria-label for the button
|
|
30
|
-
* @default Copy
|
|
65
|
+
* @default Copy to clipboard
|
|
31
66
|
*/
|
|
32
67
|
label?: string;
|
|
33
68
|
/**
|
|
@@ -40,7 +75,10 @@ interface CopyButtonProps extends CommonProps {
|
|
|
40
75
|
* @default medium
|
|
41
76
|
*/
|
|
42
77
|
size?: 'small' | 'medium';
|
|
43
|
-
|
|
44
|
-
|
|
78
|
+
/**
|
|
79
|
+
* Value that will be copied to clipboard when the button is clicked
|
|
80
|
+
*/
|
|
81
|
+
value: string;
|
|
82
|
+
} & React.RefAttributes<HTMLButtonElement>>;
|
|
45
83
|
|
|
46
84
|
export { CopyButton, CopyButtonProps };
|
package/dist/index.js
CHANGED
|
@@ -2,20 +2,17 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var
|
|
6
|
-
var n = require('react');
|
|
7
|
-
var j = require('react-copy-to-clipboard');
|
|
5
|
+
var m = require('react');
|
|
8
6
|
var f36Icons = require('@contentful/f36-icons');
|
|
9
7
|
var f36Tooltip = require('@contentful/f36-tooltip');
|
|
10
|
-
var
|
|
8
|
+
var f36Button = require('@contentful/f36-button');
|
|
9
|
+
var emotion = require('emotion');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
14
|
-
var
|
|
15
|
-
var j__default = /*#__PURE__*/_interopDefaultLegacy(j);
|
|
16
|
-
var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
|
|
13
|
+
var m__default = /*#__PURE__*/_interopDefaultLegacy(m);
|
|
17
14
|
|
|
18
|
-
var
|
|
15
|
+
var S=Object.defineProperty,D=Object.defineProperties;var L=Object.getOwnPropertyDescriptors;var c=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var P=(t,o,e)=>o in t?S(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))b.call(o,e)&&P(t,e,o[e]);if(c)for(var e of c(o))g.call(o,e)&&P(t,e,o[e]);return t},C=(t,o)=>D(t,L(o));var h=(t,o)=>{var e={};for(var r in t)b.call(t,r)&&o.indexOf(r)<0&&(e[r]=t[r]);if(t!=null&&c)for(var r of c(t))o.indexOf(r)<0&&g.call(t,r)&&(e[r]=t[r]);return e};var T=(t,o,e)=>new Promise((r,i)=>{var p=n=>{try{s(e.next(n));}catch(a){i(a);}},l=n=>{try{s(e.throw(n));}catch(a){i(a);}},s=n=>n.done?r(n.value):Promise.resolve(n.value).then(p,l);s((e=e.apply(t,o)).next());});var v=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:emotion.css({height:o,minHeight:"auto",minWidth:"auto",width:o})}};function E(q,I){var B=q,{className:t,isDisabled:o=!1,isLoading:e=!1,label:r,onBlur:i,onCopy:p,size:l="medium",testId:s="cf-ui-copy-button",tooltipCopiedText:n="Copied!",tooltipProps:a,tooltipText:H="Copy to clipboard",value:u}=B,w=h(B,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value"]);let M=v({size:l}),[d,x]=m.useState(!1),k=m.useCallback(()=>T(this,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(y){console.error(y);return}p==null||p(u),x(!0);}),[p,u]),z=y=>{d&&x(!1),i==null||i(y);};return m__default["default"].createElement(f36Tooltip.Tooltip,C(f({content:d?n:H},a),{isDisabled:o}),m__default["default"].createElement(f36Button.Button,C(f({"aria-label":d?"Value copied to clipboard":r!=null?r:"Copy to clipboard","aria-live":"assertive",className:emotion.cx(M.button,t),isDisabled:e||o,isLoading:e,onBlur:z,testId:s},w),{onClick:k,ref:I,startIcon:m__default["default"].createElement(f36Icons.CopyIcon,{variant:"muted",size:l==="small"?"tiny":"small"}),variant:"secondary"})))}E.displayName="CopyButton";var j=m__default["default"].forwardRef(E);
|
|
19
16
|
|
|
20
|
-
exports.CopyButton =
|
|
17
|
+
exports.CopyButton = j;
|
|
21
18
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["
|
|
1
|
+
{"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["React","useCallback","useState","CopyIcon","Tooltip","Button","css","getCopyButtonStyles","size","buttonSize","cx","_CopyButton","_a","ref","_b","className","isDisabled","isLoading","label","onBlur","onCopy","testId","tooltipCopiedText","tooltipProps","tooltipText","value","otherProps","__objRest","styles","copied","setCopied","handleClick","__async","error","handleBlur","event","__spreadProps","__spreadValues","CopyButton"],"mappings":"4xBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAGK,QACP,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,UAAAC,MAAgC,yBCTzC,OAAS,OAAAC,MAAW,UAGb,IAAMC,EAAsB,CAAC,CAClC,KAAAC,CACF,IAAqC,CACnC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,OAAQF,EAAI,CACV,OAAQG,EACR,UAAW,OACX,SAAU,OACV,MAAOA,CACT,CAAC,CACH,CACF,EDLA,OAAS,MAAAC,MAAU,UA6CnB,SAASC,EACPC,EAeAC,EACA,CAhBA,IAAAC,EAAAF,EACE,WAAAG,EACA,WAAAC,EAAa,GACb,UAAAC,EAAY,GACZ,MAAAC,EACA,OAAAC,EACA,OAAAC,EACA,KAAAZ,EAAO,SACP,OAAAa,EAAS,oBACT,kBAAAC,EAAoB,UACpB,aAAAC,EACA,YAAAC,EAAc,oBACd,MAAAC,CArEJ,EAyDEX,EAaKY,EAAAC,EAbLb,EAaK,CAZH,YACA,aACA,YACA,QACA,SACA,SACA,OACA,SACA,oBACA,eACA,cACA,UAKF,IAAMc,EAASrB,EAAoB,CAAE,KAAAC,CAAK,CAAC,EACrC,CAACqB,EAAQC,CAAS,EAAI5B,EAAS,EAAK,EAEpC6B,EAAc9B,EAElB,IAAY+B,EAAA,sBACZ,GAAI,CACF,MAAM,OAAO,UAAU,UAAU,UAAUP,CAAK,CAClD,OAASQ,EAAP,CACA,QAAQ,MAAMA,CAAK,EACnB,MACF,CAEAb,GAAA,MAAAA,EAASK,GACTK,EAAU,EAAI,CAChB,GAAG,CAACV,EAAQK,CAAK,CAAC,EAEZS,EAAoDC,GAAU,CAC9DN,GACFC,EAAU,EAAK,EAGjBX,GAAA,MAAAA,EAASgB,EACX,EAEA,OACEnC,EAAA,cAACI,EAAAgC,EAAAC,EAAA,CACC,QAASR,EAASP,EAAoBE,GAClCD,GAFL,CAGC,WAAYP,IAEZhB,EAAA,cAACK,EAAA+B,EAAAC,EAAA,CACC,aACER,EAAS,4BAA8BX,GAAA,KAAAA,EAAS,oBAElD,YAAU,YACV,UAAWR,EAAGkB,EAAO,OAAQb,CAAS,EACtC,WAAYE,GAAaD,EACzB,UAAWC,EACX,OAAQiB,EACR,OAAQb,GACJK,GAVL,CAWC,QAASK,EACT,IAAKlB,EACL,UACEb,EAAA,cAACG,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,EAEF,QAAQ,aACV,CACF,CAEJ,CAEAG,EAAY,YAAc,aAEnB,IAAM2B,EAAatC,EAAM,WAAWW,CAAW","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { Button, type ButtonProps } from '@contentful/f36-button';\nimport { getCopyButtonStyles } from './CopyButton.styles';\nimport { cx } from 'emotion';\n\nexport type CopyButtonProps = Omit<\n ButtonProps,\n 'children' | 'endIcon' | 'startIcon' | 'isDisabed' | 'size'\n> & {\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 * Label to be used on aria-label for the button\n * @default Copy 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 * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n};\n\nfunction _CopyButton(\n {\n className,\n isDisabled = false,\n isLoading = false,\n label,\n onBlur,\n onCopy,\n size = 'medium',\n testId = 'cf-ui-copy-button',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n tooltipText = 'Copy to clipboard',\n value,\n ...otherProps\n }: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLButtonElement>,\n) {\n const styles = getCopyButtonStyles({ size });\n const [copied, setCopied] = useState(false);\n\n const handleClick = useCallback<\n MouseEventHandler<HTMLButtonElement>\n >(async () => {\n try {\n await window.navigator.clipboard.writeText(value);\n } catch (error) {\n console.error(error);\n return;\n }\n\n onCopy?.(value);\n setCopied(true);\n }, [onCopy, value]);\n\n const handleBlur: FocusEventHandler<HTMLButtonElement> = (event) => {\n if (copied) {\n setCopied(false);\n }\n\n onBlur?.(event);\n };\n\n return (\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <Button\n aria-label={\n copied ? 'Value copied to clipboard' : label ?? `Copy to clipboard`\n }\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n {...otherProps}\n onClick={handleClick}\n ref={ref}\n startIcon={\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n />\n </Tooltip>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport { CopyButtonProps } from './CopyButton';\n\nexport const getCopyButtonStyles = ({\n size,\n}: Pick<CopyButtonProps, 'size'>) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n button: css({\n height: buttonSize,\n minHeight: 'auto',\n minWidth: 'auto',\n width: buttonSize,\n }),\n };\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-copybutton",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.25.0",
|
|
4
4
|
"description": "Forma 36: CopyButton component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-
|
|
9
|
+
"@contentful/f36-button": "^4.25.0",
|
|
10
|
+
"@contentful/f36-core": "^4.25.0",
|
|
10
11
|
"@contentful/f36-icons": "^4.23.2",
|
|
11
12
|
"@contentful/f36-tokens": "^4.0.1",
|
|
12
|
-
"@contentful/f36-tooltip": "^4.
|
|
13
|
-
"emotion": "^10.0.17"
|
|
14
|
-
"react-copy-to-clipboard": "^5.1.0"
|
|
13
|
+
"@contentful/f36-tooltip": "^4.25.0",
|
|
14
|
+
"emotion": "^10.0.17"
|
|
15
15
|
},
|
|
16
16
|
"peerDependencies": {
|
|
17
17
|
"react": ">=16.8",
|