@contentful/f36-copybutton 4.21.1 → 4.21.3
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/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
package/dist/esm/index.js
CHANGED
|
@@ -5,7 +5,7 @@ import { CopyIcon } from '@contentful/f36-icons';
|
|
|
5
5
|
import { Tooltip } from '@contentful/f36-tooltip';
|
|
6
6
|
import i from '@contentful/f36-tokens';
|
|
7
7
|
|
|
8
|
-
var N=Object.defineProperty,$=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var b=(o,t,e)=>t in o?N(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,u=(o,t)=>{for(var e in t||(t={}))f.call(t,e)&&b(o,e,t[e]);if(s)for(var e of s(t))C.call(t,e)&&b(o,e,t[e]);return o},g=(o,t)=>$(o,I(t));var x=(o,t)=>{var e={};for(var r in o)f.call(o,r)&&t.indexOf(r)<0&&(e[r]=o[r]);if(o!=null&&s)for(var r of s(o))t.indexOf(r)<0&&C.call(o,r)&&(e[r]=o[r]);return e};var h=({size:o})=>{let t=o==="small"?"32px":"40px";return {wrapper:css({display:"inline-block",height:t,position:"relative",width:t}),copyButton:css({alignItems:"center",background:i.colorWhite,border:`1px solid ${i.gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,transition:`background ${i.transitionDurationShort} ${i.transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:i.gray100,cursor:"pointer"},"&:active":{backgroundColor:i.gray200,cursor:"pointer"},"&:focus":{boxShadow:i.glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i.glowMuted}}),copyButtonDisabled:css({cursor:"not-allowed",backgroundColor:i.gray100,"&:hover":{cursor:"not-allowed",backgroundColor:i.gray100},"&:focus":{borderColor:i.gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:i.gray300,boxShadow:"none"}})}};function w(o,t){let y=o,{onCopy:e,value:r,className:B,testId:T="cf-ui-copy-button",tooltipText:P="Copy to clipboard",tooltipCopiedText:S="Copied!",tooltipProps:k,isDisabled:p=!1,size:c="medium"}=y,D=x(y,["onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","size"]),l=h({size:c}),[E,m]=useState(!1),a=useRef(null),z=useCallback(M=>{e&&e(M),m(!0),setTimeout(()=>{m(!1),a.current&&a.current.blur();},1e3);},[e]);return n.createElement("div",u({ref:t,"data-test-id":T,className:cx(l.wrapper,B)},D),n.createElement(j,{text:r,onCopy:z},n.createElement(Tooltip,g(u({content:E?S:P},k),{isDisabled:p}),n.createElement("button",{type:"button",ref:a,className:cx(l.copyButton,{[l.copyButtonDisabled]:p}),"aria-label":`Copy ${r} to clipboard`,disabled:p,"aria-live":"assertive"},n.createElement(CopyIcon,{variant:"muted",size:c==="small"?"tiny":"small"})))))}w.displayName="CopyButton";var q=n.forwardRef(w);
|
|
8
|
+
var N=Object.defineProperty,$=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var b=(o,t,e)=>t in o?N(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,u=(o,t)=>{for(var e in t||(t={}))f.call(t,e)&&b(o,e,t[e]);if(s)for(var e of s(t))C.call(t,e)&&b(o,e,t[e]);return o},g=(o,t)=>$(o,I(t));var x=(o,t)=>{var e={};for(var r in o)f.call(o,r)&&t.indexOf(r)<0&&(e[r]=o[r]);if(o!=null&&s)for(var r of s(o))t.indexOf(r)<0&&C.call(o,r)&&(e[r]=o[r]);return e};var h=({size:o})=>{let t=o==="small"?"32px":"40px";return {wrapper:css({display:"inline-block",height:t,position:"relative",width:t}),copyButton:css({alignItems:"center",background:i.colorWhite,border:`1px solid ${i.gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,margin:0,transition:`background ${i.transitionDurationShort} ${i.transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:i.gray100,cursor:"pointer"},"&:active":{backgroundColor:i.gray200,cursor:"pointer"},"&:focus":{boxShadow:i.glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i.glowMuted}}),copyButtonDisabled:css({cursor:"not-allowed",backgroundColor:i.gray100,"&:hover":{cursor:"not-allowed",backgroundColor:i.gray100},"&:focus":{borderColor:i.gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:i.gray300,boxShadow:"none"}})}};function w(o,t){let y=o,{onCopy:e,value:r,className:B,testId:T="cf-ui-copy-button",tooltipText:P="Copy to clipboard",tooltipCopiedText:S="Copied!",tooltipProps:k,isDisabled:p=!1,size:c="medium"}=y,D=x(y,["onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","size"]),l=h({size:c}),[E,m]=useState(!1),a=useRef(null),z=useCallback(M=>{e&&e(M),m(!0),setTimeout(()=>{m(!1),a.current&&a.current.blur();},1e3);},[e]);return n.createElement("div",u({ref:t,"data-test-id":T,className:cx(l.wrapper,B)},D),n.createElement(j,{text:r,onCopy:z},n.createElement(Tooltip,g(u({content:E?S:P},k),{isDisabled:p}),n.createElement("button",{type:"button",ref:a,className:cx(l.copyButton,{[l.copyButtonDisabled]:p}),"aria-label":`Copy ${r} to clipboard`,disabled:p,"aria-live":"assertive"},n.createElement(CopyIcon,{variant:"muted",size:c==="small"?"tiny":"small"})))))}w.displayName="CopyButton";var q=n.forwardRef(w);
|
|
9
9
|
|
|
10
10
|
export { q as CopyButton };
|
|
11
11
|
//# 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":["cx","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","Tooltip","css","tokens","getStyles","size","buttonSize","_CopyButton","props","ref","_a","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","__objRest","styles","copied","setCopied","button","handleOnCopy","e","__spreadValues","__spreadProps","CopyButton"],"mappings":"+kBAAA,OAAS,MAAAA,MAAU,UACnB,OAAOC,GAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QACrD,OAAOC,MAAqB,0BAC5B,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BCL3C,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAM,CACrC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,QAASH,EAAI,CACX,QAAS,eACT,OAAQI,EACR,SAAU,WACV,MAAOA,CACT,CAAC,EACD,WAAYJ,EAAI,CACd,WAAY,SACZ,WAAYC,EAAO,WACnB,OAAQ,aAAaA,EAAO,UAC5B,QAAS,cACT,OAAQ,OACR,eAAgB,SAChB,QAAS,OACT,QAAS,EACT,WAAY,cAAcA,EAAO,2BAA2BA,EAAO,0BACnE,MAAO,OACP,UAAW,CACT,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,WAAY,CACV,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,UAAW,CACT,UAAWA,EAAO,SACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,SACpB,CACF,CAAC,EACD,mBAAoBD,EAAI,CACtB,OAAQ,cACR,gBAAiBC,EAAO,QAExB,UAAW,CACT,OAAQ,cACR,gBAAiBA,EAAO,OAC1B,EAEA,UAAW,CACT,YAAaA,EAAO,QACpB,UAAW,MACb,EAEA,2BAA4B,CAC1B,YAAaA,EAAO,QACpB,UAAW,MACb,CACF,CAAC,CACH,CACF,
|
|
1
|
+
{"version":3,"sources":["../../src/CopyButton.tsx","../../src/CopyButton.styles.ts"],"names":["cx","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","Tooltip","css","tokens","getStyles","size","buttonSize","_CopyButton","props","ref","_a","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","__objRest","styles","copied","setCopied","button","handleOnCopy","e","__spreadValues","__spreadProps","CopyButton"],"mappings":"+kBAAA,OAAS,MAAAA,MAAU,UACnB,OAAOC,GAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QACrD,OAAOC,MAAqB,0BAC5B,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BCL3C,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAM,CACrC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,QAASH,EAAI,CACX,QAAS,eACT,OAAQI,EACR,SAAU,WACV,MAAOA,CACT,CAAC,EACD,WAAYJ,EAAI,CACd,WAAY,SACZ,WAAYC,EAAO,WACnB,OAAQ,aAAaA,EAAO,UAC5B,QAAS,cACT,OAAQ,OACR,eAAgB,SAChB,QAAS,OACT,QAAS,EACT,OAAQ,EACR,WAAY,cAAcA,EAAO,2BAA2BA,EAAO,0BACnE,MAAO,OACP,UAAW,CACT,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,WAAY,CACV,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,UAAW,CACT,UAAWA,EAAO,SACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,SACpB,CACF,CAAC,EACD,mBAAoBD,EAAI,CACtB,OAAQ,cACR,gBAAiBC,EAAO,QAExB,UAAW,CACT,OAAQ,cACR,gBAAiBA,EAAO,OAC1B,EAEA,UAAW,CACT,YAAaA,EAAO,QACpB,UAAW,MACb,EAEA,2BAA4B,CAC1B,YAAaA,EAAO,QACpB,UAAW,MACb,CACF,CAAC,CACH,CACF,EDfA,SAASI,EACPC,EACAC,EACA,CACA,IAWIC,EAAAF,EAVF,QAAAG,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,oBACT,YAAAC,EAAc,oBACd,kBAAAC,EAAoB,UACpB,aAAAC,EACA,WAAAC,EAAa,GACb,KAAAb,EAAO,QA7DX,EA+DMK,EADCS,EAAAC,EACDV,EADC,CATH,SACA,QACA,YACA,SACA,cACA,oBACA,eACA,aACA,SAGIW,EAASjB,EAAU,CAAE,KAAAC,CAAK,CAAC,EAE3B,CAACiB,EAAQC,CAAS,EAAI3B,EAAS,EAAK,EACpC4B,EAAS1B,EAAiC,IAAI,EAC9C2B,EAAe5B,EAClB6B,GAAc,CACTf,GACFA,EAAOe,CAAC,EAGVH,EAAU,EAAI,EAEd,WAAW,IAAM,CACfA,EAAU,EAAK,EACXC,EAAO,SACTA,EAAO,QAAQ,KAAK,CAExB,EAAG,GAAI,CACT,EACA,CAACb,CAAM,CACT,EAEA,OACEhB,EAAA,cAAC,MAAAgC,EAAA,CACC,IAAKlB,EACL,eAAcK,EACd,UAAWpB,EAAG2B,EAAO,QAASR,CAAS,GACnCM,GAEJxB,EAAA,cAACI,EAAA,CAAgB,KAAMa,EAAO,OAAQa,GACpC9B,EAAA,cAACM,EAAA2B,EAAAD,EAAA,CACC,QAASL,EAASN,EAAoBD,GAClCE,GAFL,CAGC,WAAYC,IAEZvB,EAAA,cAAC,UACC,KAAK,SACL,IAAK6B,EACL,UAAW9B,EAAG2B,EAAO,WAAY,CAC/B,CAACA,EAAO,oBAAqBH,CAC/B,CAAC,EACD,aAAY,QAAQN,iBACpB,SAAUM,EACV,YAAU,aAEVvB,EAAA,cAACK,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,CACF,CACF,CACF,CACF,CAEJ,CAEAE,EAAY,YAAc,aAEnB,IAAMsB,EAAalC,EAAM,WAAWY,CAAW","sourcesContent":["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 margin: 0, // remove the default button margin in Safari.\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"]}
|
package/dist/index.js
CHANGED
|
@@ -15,7 +15,7 @@ var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
|
|
|
15
15
|
var j__default = /*#__PURE__*/_interopDefaultLegacy(j);
|
|
16
16
|
var i__default = /*#__PURE__*/_interopDefaultLegacy(i);
|
|
17
17
|
|
|
18
|
-
var N=Object.defineProperty,$=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var b=(o,t,e)=>t in o?N(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,u=(o,t)=>{for(var e in t||(t={}))f.call(t,e)&&b(o,e,t[e]);if(s)for(var e of s(t))C.call(t,e)&&b(o,e,t[e]);return o},g=(o,t)=>$(o,I(t));var x=(o,t)=>{var e={};for(var r in o)f.call(o,r)&&t.indexOf(r)<0&&(e[r]=o[r]);if(o!=null&&s)for(var r of s(o))t.indexOf(r)<0&&C.call(o,r)&&(e[r]=o[r]);return e};var h=({size:o})=>{let t=o==="small"?"32px":"40px";return {wrapper:emotion.css({display:"inline-block",height:t,position:"relative",width:t}),copyButton:emotion.css({alignItems:"center",background:i__default["default"].colorWhite,border:`1px solid ${i__default["default"].gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,transition:`background ${i__default["default"].transitionDurationShort} ${i__default["default"].transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:i__default["default"].gray100,cursor:"pointer"},"&:active":{backgroundColor:i__default["default"].gray200,cursor:"pointer"},"&:focus":{boxShadow:i__default["default"].glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i__default["default"].glowMuted}}),copyButtonDisabled:emotion.css({cursor:"not-allowed",backgroundColor:i__default["default"].gray100,"&:hover":{cursor:"not-allowed",backgroundColor:i__default["default"].gray100},"&:focus":{borderColor:i__default["default"].gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:i__default["default"].gray300,boxShadow:"none"}})}};function w(o,t){let y=o,{onCopy:e,value:r,className:B,testId:T="cf-ui-copy-button",tooltipText:P="Copy to clipboard",tooltipCopiedText:S="Copied!",tooltipProps:k,isDisabled:p=!1,size:c="medium"}=y,D=x(y,["onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","size"]),l=h({size:c}),[E,m]=n.useState(!1),a=n.useRef(null),z=n.useCallback(M=>{e&&e(M),m(!0),setTimeout(()=>{m(!1),a.current&&a.current.blur();},1e3);},[e]);return n__default["default"].createElement("div",u({ref:t,"data-test-id":T,className:emotion.cx(l.wrapper,B)},D),n__default["default"].createElement(j__default["default"],{text:r,onCopy:z},n__default["default"].createElement(f36Tooltip.Tooltip,g(u({content:E?S:P},k),{isDisabled:p}),n__default["default"].createElement("button",{type:"button",ref:a,className:emotion.cx(l.copyButton,{[l.copyButtonDisabled]:p}),"aria-label":`Copy ${r} to clipboard`,disabled:p,"aria-live":"assertive"},n__default["default"].createElement(f36Icons.CopyIcon,{variant:"muted",size:c==="small"?"tiny":"small"})))))}w.displayName="CopyButton";var q=n__default["default"].forwardRef(w);
|
|
18
|
+
var N=Object.defineProperty,$=Object.defineProperties;var I=Object.getOwnPropertyDescriptors;var s=Object.getOwnPropertySymbols;var f=Object.prototype.hasOwnProperty,C=Object.prototype.propertyIsEnumerable;var b=(o,t,e)=>t in o?N(o,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[t]=e,u=(o,t)=>{for(var e in t||(t={}))f.call(t,e)&&b(o,e,t[e]);if(s)for(var e of s(t))C.call(t,e)&&b(o,e,t[e]);return o},g=(o,t)=>$(o,I(t));var x=(o,t)=>{var e={};for(var r in o)f.call(o,r)&&t.indexOf(r)<0&&(e[r]=o[r]);if(o!=null&&s)for(var r of s(o))t.indexOf(r)<0&&C.call(o,r)&&(e[r]=o[r]);return e};var h=({size:o})=>{let t=o==="small"?"32px":"40px";return {wrapper:emotion.css({display:"inline-block",height:t,position:"relative",width:t}),copyButton:emotion.css({alignItems:"center",background:i__default["default"].colorWhite,border:`1px solid ${i__default["default"].gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,margin:0,transition:`background ${i__default["default"].transitionDurationShort} ${i__default["default"].transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:i__default["default"].gray100,cursor:"pointer"},"&:active":{backgroundColor:i__default["default"].gray200,cursor:"pointer"},"&:focus":{boxShadow:i__default["default"].glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:i__default["default"].glowMuted}}),copyButtonDisabled:emotion.css({cursor:"not-allowed",backgroundColor:i__default["default"].gray100,"&:hover":{cursor:"not-allowed",backgroundColor:i__default["default"].gray100},"&:focus":{borderColor:i__default["default"].gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:i__default["default"].gray300,boxShadow:"none"}})}};function w(o,t){let y=o,{onCopy:e,value:r,className:B,testId:T="cf-ui-copy-button",tooltipText:P="Copy to clipboard",tooltipCopiedText:S="Copied!",tooltipProps:k,isDisabled:p=!1,size:c="medium"}=y,D=x(y,["onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","size"]),l=h({size:c}),[E,m]=n.useState(!1),a=n.useRef(null),z=n.useCallback(M=>{e&&e(M),m(!0),setTimeout(()=>{m(!1),a.current&&a.current.blur();},1e3);},[e]);return n__default["default"].createElement("div",u({ref:t,"data-test-id":T,className:emotion.cx(l.wrapper,B)},D),n__default["default"].createElement(j__default["default"],{text:r,onCopy:z},n__default["default"].createElement(f36Tooltip.Tooltip,g(u({content:E?S:P},k),{isDisabled:p}),n__default["default"].createElement("button",{type:"button",ref:a,className:emotion.cx(l.copyButton,{[l.copyButtonDisabled]:p}),"aria-label":`Copy ${r} to clipboard`,disabled:p,"aria-live":"assertive"},n__default["default"].createElement(f36Icons.CopyIcon,{variant:"muted",size:c==="small"?"tiny":"small"})))))}w.displayName="CopyButton";var q=n__default["default"].forwardRef(w);
|
|
19
19
|
|
|
20
20
|
exports.CopyButton = q;
|
|
21
21
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["cx","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","Tooltip","css","tokens","getStyles","size","buttonSize","_CopyButton","props","ref","_a","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","__objRest","styles","copied","setCopied","button","handleOnCopy","e","__spreadValues","__spreadProps","CopyButton"],"mappings":"+kBAAA,OAAS,MAAAA,MAAU,UACnB,OAAOC,GAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QACrD,OAAOC,MAAqB,0BAC5B,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BCL3C,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAM,CACrC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,QAASH,EAAI,CACX,QAAS,eACT,OAAQI,EACR,SAAU,WACV,MAAOA,CACT,CAAC,EACD,WAAYJ,EAAI,CACd,WAAY,SACZ,WAAYC,EAAO,WACnB,OAAQ,aAAaA,EAAO,UAC5B,QAAS,cACT,OAAQ,OACR,eAAgB,SAChB,QAAS,OACT,QAAS,EACT,WAAY,cAAcA,EAAO,2BAA2BA,EAAO,0BACnE,MAAO,OACP,UAAW,CACT,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,WAAY,CACV,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,UAAW,CACT,UAAWA,EAAO,SACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,SACpB,CACF,CAAC,EACD,mBAAoBD,EAAI,CACtB,OAAQ,cACR,gBAAiBC,EAAO,QAExB,UAAW,CACT,OAAQ,cACR,gBAAiBA,EAAO,OAC1B,EAEA,UAAW,CACT,YAAaA,EAAO,QACpB,UAAW,MACb,EAEA,2BAA4B,CAC1B,YAAaA,EAAO,QACpB,UAAW,MACb,CACF,CAAC,CACH,CACF,
|
|
1
|
+
{"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["cx","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","Tooltip","css","tokens","getStyles","size","buttonSize","_CopyButton","props","ref","_a","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","__objRest","styles","copied","setCopied","button","handleOnCopy","e","__spreadValues","__spreadProps","CopyButton"],"mappings":"+kBAAA,OAAS,MAAAA,MAAU,UACnB,OAAOC,GAAS,YAAAC,EAAU,eAAAC,EAAa,UAAAC,MAAc,QACrD,OAAOC,MAAqB,0BAC5B,OAAS,YAAAC,MAAgB,wBAEzB,OAAS,WAAAC,MAAkC,0BCL3C,OAAS,OAAAC,MAAW,UACpB,OAAOC,MAAY,yBAEZ,IAAMC,EAAY,CAAC,CAAE,KAAAC,CAAK,IAAM,CACrC,IAAMC,EAAaD,IAAS,QAAU,OAAS,OAE/C,MAAO,CACL,QAASH,EAAI,CACX,QAAS,eACT,OAAQI,EACR,SAAU,WACV,MAAOA,CACT,CAAC,EACD,WAAYJ,EAAI,CACd,WAAY,SACZ,WAAYC,EAAO,WACnB,OAAQ,aAAaA,EAAO,UAC5B,QAAS,cACT,OAAQ,OACR,eAAgB,SAChB,QAAS,OACT,QAAS,EACT,OAAQ,EACR,WAAY,cAAcA,EAAO,2BAA2BA,EAAO,0BACnE,MAAO,OACP,UAAW,CACT,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,WAAY,CACV,gBAAiBA,EAAO,QACxB,OAAQ,SACV,EACA,UAAW,CACT,UAAWA,EAAO,SACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,SACpB,CACF,CAAC,EACD,mBAAoBD,EAAI,CACtB,OAAQ,cACR,gBAAiBC,EAAO,QAExB,UAAW,CACT,OAAQ,cACR,gBAAiBA,EAAO,OAC1B,EAEA,UAAW,CACT,YAAaA,EAAO,QACpB,UAAW,MACb,EAEA,2BAA4B,CAC1B,YAAaA,EAAO,QACpB,UAAW,MACb,CACF,CAAC,CACH,CACF,EDfA,SAASI,EACPC,EACAC,EACA,CACA,IAWIC,EAAAF,EAVF,QAAAG,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,oBACT,YAAAC,EAAc,oBACd,kBAAAC,EAAoB,UACpB,aAAAC,EACA,WAAAC,EAAa,GACb,KAAAb,EAAO,QA7DX,EA+DMK,EADCS,EAAAC,EACDV,EADC,CATH,SACA,QACA,YACA,SACA,cACA,oBACA,eACA,aACA,SAGIW,EAASjB,EAAU,CAAE,KAAAC,CAAK,CAAC,EAE3B,CAACiB,EAAQC,CAAS,EAAI3B,EAAS,EAAK,EACpC4B,EAAS1B,EAAiC,IAAI,EAC9C2B,EAAe5B,EAClB6B,GAAc,CACTf,GACFA,EAAOe,CAAC,EAGVH,EAAU,EAAI,EAEd,WAAW,IAAM,CACfA,EAAU,EAAK,EACXC,EAAO,SACTA,EAAO,QAAQ,KAAK,CAExB,EAAG,GAAI,CACT,EACA,CAACb,CAAM,CACT,EAEA,OACEhB,EAAA,cAAC,MAAAgC,EAAA,CACC,IAAKlB,EACL,eAAcK,EACd,UAAWpB,EAAG2B,EAAO,QAASR,CAAS,GACnCM,GAEJxB,EAAA,cAACI,EAAA,CAAgB,KAAMa,EAAO,OAAQa,GACpC9B,EAAA,cAACM,EAAA2B,EAAAD,EAAA,CACC,QAASL,EAASN,EAAoBD,GAClCE,GAFL,CAGC,WAAYC,IAEZvB,EAAA,cAAC,UACC,KAAK,SACL,IAAK6B,EACL,UAAW9B,EAAG2B,EAAO,WAAY,CAC/B,CAACA,EAAO,oBAAqBH,CAC/B,CAAC,EACD,aAAY,QAAQN,iBACpB,SAAUM,EACV,YAAU,aAEVvB,EAAA,cAACK,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,CACF,CACF,CACF,CACF,CAEJ,CAEAE,EAAY,YAAc,aAEnB,IAAMsB,EAAalC,EAAM,WAAWY,CAAW","sourcesContent":["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 margin: 0, // remove the default button margin in Safari.\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"]}
|
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-copybutton",
|
|
3
|
-
"version": "4.21.
|
|
3
|
+
"version": "4.21.3",
|
|
4
4
|
"description": "Forma 36: CopyButton component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-core": "^4.21.
|
|
10
|
-
"@contentful/f36-icons": "^4.21.
|
|
9
|
+
"@contentful/f36-core": "^4.21.3",
|
|
10
|
+
"@contentful/f36-icons": "^4.21.3",
|
|
11
11
|
"@contentful/f36-tokens": "^4.0.1",
|
|
12
|
-
"@contentful/f36-tooltip": "^4.21.
|
|
12
|
+
"@contentful/f36-tooltip": "^4.21.3",
|
|
13
13
|
"emotion": "^10.0.17",
|
|
14
14
|
"react-copy-to-clipboard": "^5.1.0"
|
|
15
15
|
},
|