@contentful/f36-copybutton 5.8.0 → 6.0.0-alpha.2

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.
Files changed (7) hide show
  1. package/dist/esm/index.js +1 -11
  2. package/dist/esm/index.js.map +1 -1
  3. package/dist/index.d.mts +5 -5
  4. package/dist/index.d.ts +5 -5
  5. package/dist/index.js +1 -18
  6. package/dist/index.js.map +1 -1
  7. package/package.json +9 -9
package/dist/esm/index.js CHANGED
@@ -1,12 +1,2 @@
1
- import d, { useState, useCallback } from 'react';
2
- import V from '@contentful/f36-tokens';
3
- import { CopySimpleIcon } from '@contentful/f36-icons';
4
- import { Tooltip } from '@contentful/f36-tooltip';
5
- import { Button } from '@contentful/f36-button';
6
- import { cx, css } from 'emotion';
7
-
8
- var L=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var x=(t,o,e)=>o in t?L(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))v.call(o,e)&&x(t,e,o[e]);if(m)for(var e of m(o))E.call(o,e)&&x(t,e,o[e]);return t},C=(t,o)=>F(t,N(o));var w=(t,o)=>{var e={};for(var n in t)v.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&m)for(var n of m(t))o.indexOf(n)<0&&E.call(t,n)&&(e[n]=t[n]);return e};var T=(t,o,e)=>new Promise((n,s)=>{var i=r=>{try{a(e.next(r));}catch(l){s(l);}},c=r=>{try{a(e.throw(r));}catch(l){s(l);}},a=r=>r.done?n(r.value):Promise.resolve(r.value).then(i,c);a((e=e.apply(t,o)).next());});var H=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:css({height:o,minWidth:"auto",width:o,"span:first-child":{marginRight:0}})}};function k(G,S){var P=G,{className:t,isDisabled:o=!1,isLoading:e=!1,label:n,onBlur:s,onCopy:i,size:c="medium",testId:a="cf-ui-copy-button",tooltipCopiedText:r="Value copied to clipboard",tooltipProps:l,tooltipText:B="Copy to clipboard",value:u}=P,M=w(P,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value"]);let z=H({size:c}),[y,b]=useState(!1),I=useCallback(()=>T(this,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(g){let p=document.createElement("input");p.style.display="none",document.body.appendChild(p),p.value=u,p.focus(),p.select();let h=document.execCommand("copy");if(h==="unsuccessful")throw new Error("Unable to copy value",{cause:h});p.remove();return}i==null||i(u),b(!0);}),[i,u]),D=g=>{y&&b(!1),s==null||s(g);};return d.createElement(Tooltip,C(f({content:y?r:B},l),{isDisabled:o}),d.createElement(Button,C(f({"aria-label":y?r:n!=null?n:B,"aria-live":"assertive",className:cx(z.button,t),isDisabled:e||o,isLoading:e,onBlur:D,testId:a,startIcon:d.createElement(CopySimpleIcon,{color:V.gray600,size:c==="small"?"tiny":"small"}),variant:"secondary"},M),{onClick:I,ref:S})))}k.displayName="CopyButton";var A=d.forwardRef(k);
9
-
10
- export { A as CopyButton };
11
- //# sourceMappingURL=out.js.map
1
+ import C,{useState,useCallback}from'react';import V from'@contentful/f36-tokens';import {CopySimpleIcon}from'@contentful/f36-icons';import {IconButton}from'@contentful/f36-button';import {cx,css}from'@emotion/css';var L=Object.defineProperty,R=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var g=(t,o,e)=>o in t?L(t,o,{enumerable:true,configurable:true,writable:true,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))x.call(o,e)&&g(t,e,o[e]);if(m)for(var e of m(o))v.call(o,e)&&g(t,e,o[e]);return t},E=(t,o)=>R(t,F(o));var w=(t,o)=>{var e={};for(var n in t)x.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&m)for(var n of m(t))o.indexOf(n)<0&&v.call(t,n)&&(e[n]=t[n]);return e};var H=(t,o,e)=>new Promise((n,s)=>{var i=r=>{try{a(e.next(r));}catch(c){s(c);}},l=r=>{try{a(e.throw(r));}catch(c){s(c);}},a=r=>r.done?n(r.value):Promise.resolve(r.value).then(i,l);a((e=e.apply(t,o)).next());});var T=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:css({height:o,minWidth:"auto",width:o,"span:first-child":{marginRight:0}})}};function k(J,S){var h=J,{className:t,isDisabled:o=false,isLoading:e=false,label:n,onBlur:s,onCopy:i,size:l="medium",testId:a="cf-ui-copy-button",tooltipCopiedText:r="Value copied to clipboard",tooltipProps:c,tooltipText:B="Copy to clipboard",value:u,children:G}=h,M=w(h,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value","children"]);let z=T({size:l}),[d,P]=useState(false),I=useCallback(()=>H(null,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(y){let p=document.createElement("input");p.style.display="none",document.body.appendChild(p),p.value=u,p.focus(),p.select();let b=document.execCommand("copy");if(b==="unsuccessful")throw console.warn(y),new Error("Unable to copy value",{cause:b});p.remove();return}i==null||i(u),P(true);}),[i,u]),D=y=>{d&&P(false),s==null||s(y);};return C.createElement(IconButton,E(f({},M),{"aria-label":d?r:n!=null?n:B,"aria-live":"assertive",className:cx(z.button,t),isDisabled:e||o,isLoading:e,onBlur:D,testId:a,icon:C.createElement(CopySimpleIcon,{color:V.gray600,size:l==="small"?"tiny":"small"}),variant:"secondary",onClick:I,ref:S,withTooltip:true,tooltipProps:f({content:d?r:B,isDisabled:o},c)}))}k.displayName="CopyButton";var A=C.forwardRef(k);export{A as CopyButton};//# sourceMappingURL=index.js.map
12
2
  //# 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":["React","useCallback","useState","tokens","CopySimpleIcon","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","input","result","handleBlur","event","__spreadProps","__spreadValues","CopyButton"],"mappings":"4xBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAGK,QACP,OAAOC,MAAY,yBACnB,OAAS,kBAAAC,MAAsB,wBAE/B,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,UAAAC,MAAgC,yBCVzC,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,SAAU,OACV,MAAOA,EAEP,mBAAoB,CAAE,YAAa,CAAE,CACvC,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,4BACpB,aAAAC,EACA,YAAAC,EAAc,oBACd,MAAAC,CAtEJ,EA0DEX,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,EAAI7B,EAAS,EAAK,EAEpC8B,EAAc/B,EAElB,IAAYgC,EAAA,sBACZ,GAAI,CACF,MAAM,OAAO,UAAU,UAAU,UAAUP,CAAK,CAClD,OAASQ,EAAO,CAGd,IAAMC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,MAAM,QAAU,OACtB,SAAS,KAAK,YAAYA,CAAK,EAC/BA,EAAM,MAAQT,EACdS,EAAM,MAAM,EACZA,EAAM,OAAO,EACb,IAAMC,EAAS,SAAS,YAAY,MAAM,EAG1C,GAAIA,IAAW,eACb,MAAM,IAAI,MAAM,uBAAwB,CAAE,MAAOA,CAAO,CAAC,EAE3DD,EAAM,OAAO,EAEb,MACF,CAEAd,GAAA,MAAAA,EAASK,GACTK,EAAU,EAAI,CAChB,GAAG,CAACV,EAAQK,CAAK,CAAC,EAEZW,EAAoDC,GAAU,CAC9DR,GACFC,EAAU,EAAK,EAGjBX,GAAA,MAAAA,EAASkB,EACX,EAEA,OACEtC,EAAA,cAACK,EAAAkC,EAAAC,EAAA,CACC,QAASV,EAASP,EAAoBE,GAClCD,GAFL,CAGC,WAAYP,IAEZjB,EAAA,cAACM,EAAAiC,EAAAC,EAAA,CACC,aAAYV,EAASP,EAAoBJ,GAAA,KAAAA,EAASM,EAClD,YAAU,YACV,UAAWd,EAAGkB,EAAO,OAAQb,CAAS,EACtC,WAAYE,GAAaD,EACzB,UAAWC,EACX,OAAQmB,EACR,OAAQf,EACR,UACEtB,EAAA,cAACI,EAAA,CACC,MAAOD,EAAO,QACd,KAAMM,IAAS,QAAU,OAAS,QACpC,EAEF,QAAQ,aACJkB,GAfL,CAgBC,QAASK,EACT,IAAKlB,GACP,CACF,CAEJ,CAEAF,EAAY,YAAc,aAEnB,IAAM6B,EAAazC,EAAM,WAAWY,CAAW","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { CopySimpleIcon } 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 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'\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 = 'Value copied to clipboard',\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 // Chrome requires specific permissions on iframes using the async clipboard\n // API. We can't control that so we fall back to this\n const input = document.createElement('input');\n input.style.display = 'none';\n document.body.appendChild(input);\n input.value = value;\n input.focus();\n input.select();\n const result = document.execCommand('copy');\n\n // @ts-expect-error -- The return type of `execCommand` can also be string\n if (result === 'unsuccessful') {\n throw new Error('Unable to copy value', { cause: result });\n }\n input.remove();\n\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={copied ? tooltipCopiedText : label ?? tooltipText}\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n startIcon={\n <CopySimpleIcon\n color={tokens.gray600}\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n {...otherProps}\n onClick={handleClick}\n ref={ref}\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 minWidth: 'auto',\n width: buttonSize,\n\n 'span:first-child': { marginRight: 0 },\n }),\n };\n};\n"]}
1
+ {"version":3,"sources":["../../src/CopyButton.tsx","../../src/CopyButton.styles.ts"],"names":["getCopyButtonStyles","size","buttonSize","css","CopyButtonBase","_a","ref","_b","className","isDisabled","isLoading","label","onBlur","onCopy","testId","tooltipCopiedText","tooltipProps","tooltipText","value","children","otherProps","__objRest","styles","copied","setCopied","useState","handleClick","useCallback","__async","error","input","result","handleBlur","event","React","IconButton","__spreadProps","__spreadValues","cx","CopySimpleIcon","tokens","CopyButton"],"mappings":"sNAAA,IAAA,CAAA,CAAA,MAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,gBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,yBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,qBAAA,CAAA,IAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,cAAA,CAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA,oBAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,UAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,QAAA,CAAA,IAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,GAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,EAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,CAAA,IAAA,IAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,OAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,IAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,EAAA,CAAA,MAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,OAAA,CAAA,OAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,IAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,EAAA,CAAA,CAAA,CCGO,IAAMA,EAAsB,CAAC,CAClC,IAAA,CAAAC,CACF,IAAqC,CACnC,IAAMC,CAAAA,CAAaD,CAAAA,GAAS,QAAU,MAAA,CAAS,MAAA,CAE/C,OAAO,CACL,MAAA,CAAQE,GAAAA,CAAI,CACV,MAAA,CAAQD,EACR,QAAA,CAAU,MAAA,CACV,KAAA,CAAOA,CAAAA,CAEP,mBAAoB,CAAE,WAAA,CAAa,CAAE,CACvC,CAAC,CACH,CACF,CAAA,CDwCA,SAASE,EACPC,CAAAA,CAgBAC,CAAAA,CACA,CAjBA,IAAAC,EAAAF,CAAAA,CACE,CAAA,SAAA,CAAAG,CAAAA,CACA,UAAA,CAAAC,EAAa,KAAA,CACb,SAAA,CAAAC,CAAAA,CAAY,KAAA,CACZ,KAAA,CAAAC,CAAAA,CACA,MAAA,CAAAC,CAAAA,CACA,OAAAC,CAAAA,CACA,IAAA,CAAAZ,CAAAA,CAAO,QAAA,CACP,OAAAa,CAAAA,CAAS,mBAAA,CACT,iBAAA,CAAAC,CAAAA,CAAoB,4BACpB,YAAA,CAAAC,CAAAA,CACA,WAAA,CAAAC,CAAAA,CAAc,mBAAA,CACd,KAAA,CAAAC,CAAAA,CACA,QAAA,CAAAC,CAvEJ,CAAA,CA0DEZ,CAAAA,CAcKa,CAAAA,CAAAC,CAAAA,CAdLd,EAcK,CAbH,WAAA,CACA,YAAA,CACA,WAAA,CACA,QACA,QAAA,CACA,QAAA,CACA,MAAA,CACA,QAAA,CACA,mBAAA,CACA,cAAA,CACA,aAAA,CACA,OAAA,CACA,aAKF,IAAMe,CAAAA,CAAStB,CAAAA,CAAoB,CAAE,KAAAC,CAAK,CAAC,CAAA,CACrC,CAACsB,EAAQC,CAAS,CAAA,CAAIC,QAAAA,CAAS,KAAK,CAAA,CAEpCC,CAAAA,CAAcC,WAAAA,CAElB,IAAYC,EAAA,IAAA,CAAA,IAAA,CAAA,WAAA,CACZ,GAAI,CACF,MAAM,OAAO,SAAA,CAAU,SAAA,CAAU,SAAA,CAAUV,CAAK,EAClD,CAAA,MAASW,CAAAA,CAAO,CAGd,IAAMC,CAAAA,CAAQ,QAAA,CAAS,aAAA,CAAc,OAAO,EAC5CA,CAAAA,CAAM,KAAA,CAAM,OAAA,CAAU,MAAA,CACtB,SAAS,IAAA,CAAK,WAAA,CAAYA,CAAK,CAAA,CAC/BA,EAAM,KAAA,CAAQZ,CAAAA,CACdY,CAAAA,CAAM,KAAA,EAAM,CACZA,CAAAA,CAAM,MAAA,EAAO,CACb,IAAMC,CAAAA,CAAS,QAAA,CAAS,WAAA,CAAY,MAAM,EAG1C,GAAIA,CAAAA,GAAW,cAAA,CAEb,MAAA,OAAA,CAAQ,KAAKF,CAAK,CAAA,CACZ,IAAI,KAAA,CAAM,sBAAA,CAAwB,CAAE,KAAA,CAAOE,CAAO,CAAC,CAAA,CAE3DD,CAAAA,CAAM,MAAA,EAAO,CAEb,MACF,CAEAjB,CAAAA,EAAA,IAAA,EAAAA,CAAAA,CAASK,GACTM,CAAAA,CAAU,IAAI,EAChB,CAAA,CAAA,CAAG,CAACX,CAAAA,CAAQK,CAAK,CAAC,EAEZc,CAAAA,CAAoDC,CAAAA,EAAU,CAC9DV,CAAAA,EACFC,EAAU,KAAK,CAAA,CAGjBZ,CAAAA,EAAA,IAAA,EAAAA,EAASqB,CAAAA,EACX,CAAA,CAEA,OACEC,CAAAA,CAAA,aAAA,CAACC,UAAAA,CAAAC,CAAAA,CAAAC,CAAAA,CAAA,GACKjB,CAAAA,CAAAA,CADL,CAEC,YAAA,CAAYG,CAAAA,CAASR,EAAqBJ,CAAAA,EAAA,IAAA,CAAAA,CAAAA,CAASM,CAAAA,CACnD,YAAU,WAAA,CACV,SAAA,CAAWqB,EAAAA,CAAGhB,CAAAA,CAAO,MAAA,CAAQd,CAAS,CAAA,CACtC,UAAA,CAAYE,GAAaD,CAAAA,CACzB,SAAA,CAAWC,CAAAA,CACX,MAAA,CAAQsB,EACR,MAAA,CAAQlB,CAAAA,CACR,IAAA,CACEoB,CAAAA,CAAA,cAACK,cAAAA,CAAA,CACC,KAAA,CAAOC,CAAAA,CAAO,OAAA,CACd,IAAA,CAAMvC,CAAAA,GAAS,OAAA,CAAU,OAAS,OAAA,CACpC,CAAA,CAEF,OAAA,CAAQ,WAAA,CACR,QAASyB,CAAAA,CACT,GAAA,CAAKpB,CAAAA,CACL,WAAA,CAAW,KACX,YAAA,CAAc+B,CAAAA,CAAA,CACZ,OAAA,CAASd,CAAAA,CAASR,CAAAA,CAAoBE,CAAAA,CACtC,UAAA,CAAYR,GACTO,CAAAA,CAAAA,CAAAA,CAEP,CAEJ,CAEAZ,CAAAA,CAAe,YAAc,YAAA,CAEtB,IAAMqC,CAAAA,CAAaP,CAAAA,CAAM,WAAW9B,CAAc","file":"index.js","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { CopySimpleIcon } from '@contentful/f36-icons';\nimport { type ExpandProps } from '@contentful/f36-core';\nimport { type TooltipProps } from '@contentful/f36-tooltip';\nimport { IconButton, type ButtonProps } from '@contentful/f36-button';\nimport { getCopyButtonStyles } from './CopyButton.styles';\nimport { cx } from '@emotion/css';\n\nexport type CopyButtonProps = Omit<\n ButtonProps,\n 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'\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 CopyButtonBase(\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 = 'Value copied to clipboard',\n tooltipProps,\n tooltipText = 'Copy to clipboard',\n value,\n children,\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 // Chrome requires specific permissions on iframes using the async clipboard\n // API. We can't control that so we fall back to this\n const input = document.createElement('input');\n input.style.display = 'none';\n document.body.appendChild(input);\n input.value = value;\n input.focus();\n input.select();\n const result = document.execCommand('copy');\n\n // @ts-expect-error -- The return type of `execCommand` can also be string\n if (result === 'unsuccessful') {\n // eslint-disable-next-line no-console\n console.warn(error);\n throw new Error('Unable to copy value', { cause: result });\n }\n input.remove();\n\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 <IconButton\n {...otherProps}\n aria-label={copied ? tooltipCopiedText : (label ?? tooltipText)}\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n icon={\n <CopySimpleIcon\n color={tokens.gray600}\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n onClick={handleClick}\n ref={ref}\n withTooltip\n tooltipProps={{\n content: copied ? tooltipCopiedText : tooltipText,\n isDisabled: isDisabled,\n ...tooltipProps,\n }}\n />\n );\n}\n\nCopyButtonBase.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(CopyButtonBase);\n","import { css } from '@emotion/css';\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 minWidth: 'auto',\n width: buttonSize,\n\n 'span:first-child': { marginRight: 0 },\n }),\n };\n};\n"]}
package/dist/index.d.mts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { TooltipProps } from '@contentful/f36-tooltip';
3
3
  import { ButtonProps } from '@contentful/f36-button';
4
4
 
5
- declare type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'> & {
5
+ type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'> & {
6
6
  /**
7
7
  * Function that gets called when the button is clicked
8
8
  */
@@ -41,7 +41,7 @@ declare type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick
41
41
  */
42
42
  value: string;
43
43
  };
44
- declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"button">, "size" | "isDisabled" | "endIcon" | "value" | "onCopy" | "onClick"> & {
44
+ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "isDisabled" | "endIcon" | "value" | "onCopy" | "onClick"> & {
45
45
  /**
46
46
  * Function that gets called when the button is clicked
47
47
  */
@@ -59,7 +59,7 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"butt
59
59
  /**
60
60
  * Props that are passed to the tooltip component
61
61
  */
62
- tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
62
+ tooltipProps?: Omit<TooltipProps, "content" | "children">;
63
63
  /**
64
64
  * Label to be used on aria-label for the button
65
65
  * @default Copy to clipboard
@@ -74,11 +74,11 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"butt
74
74
  * Allows setting size of the copy button to small
75
75
  * @default medium
76
76
  */
77
- size?: 'small' | 'medium';
77
+ size?: "small" | "medium";
78
78
  /**
79
79
  * Value that will be copied to clipboard when the button is clicked
80
80
  */
81
81
  value: string;
82
82
  } & React.RefAttributes<HTMLButtonElement>>;
83
83
 
84
- export { CopyButton, CopyButtonProps };
84
+ export { CopyButton, type CopyButtonProps };
package/dist/index.d.ts CHANGED
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import { TooltipProps } from '@contentful/f36-tooltip';
3
3
  import { ButtonProps } from '@contentful/f36-button';
4
4
 
5
- declare type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'> & {
5
+ type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'> & {
6
6
  /**
7
7
  * Function that gets called when the button is clicked
8
8
  */
@@ -41,7 +41,7 @@ declare type CopyButtonProps = Omit<ButtonProps, 'endIcon' | 'onCopy' | 'onClick
41
41
  */
42
42
  value: string;
43
43
  };
44
- declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"button">, "size" | "isDisabled" | "endIcon" | "value" | "onCopy" | "onClick"> & {
44
+ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "isDisabled" | "endIcon" | "value" | "onCopy" | "onClick"> & {
45
45
  /**
46
46
  * Function that gets called when the button is clicked
47
47
  */
@@ -59,7 +59,7 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"butt
59
59
  /**
60
60
  * Props that are passed to the tooltip component
61
61
  */
62
- tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
62
+ tooltipProps?: Omit<TooltipProps, "content" | "children">;
63
63
  /**
64
64
  * Label to be used on aria-label for the button
65
65
  * @default Copy to clipboard
@@ -74,11 +74,11 @@ declare const CopyButton: React.ForwardRefExoticComponent<Omit<ButtonProps<"butt
74
74
  * Allows setting size of the copy button to small
75
75
  * @default medium
76
76
  */
77
- size?: 'small' | 'medium';
77
+ size?: "small" | "medium";
78
78
  /**
79
79
  * Value that will be copied to clipboard when the button is clicked
80
80
  */
81
81
  value: string;
82
82
  } & React.RefAttributes<HTMLButtonElement>>;
83
83
 
84
- export { CopyButton, CopyButtonProps };
84
+ export { CopyButton, type CopyButtonProps };
package/dist/index.js CHANGED
@@ -1,19 +1,2 @@
1
- 'use strict';
2
-
3
- var d = require('react');
4
- var V = require('@contentful/f36-tokens');
5
- var f36Icons = require('@contentful/f36-icons');
6
- var f36Tooltip = require('@contentful/f36-tooltip');
7
- var f36Button = require('@contentful/f36-button');
8
- var emotion = require('emotion');
9
-
10
- function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
11
-
12
- var d__default = /*#__PURE__*/_interopDefault(d);
13
- var V__default = /*#__PURE__*/_interopDefault(V);
14
-
15
- var L=Object.defineProperty,F=Object.defineProperties;var N=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable;var x=(t,o,e)=>o in t?L(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))v.call(o,e)&&x(t,e,o[e]);if(m)for(var e of m(o))E.call(o,e)&&x(t,e,o[e]);return t},C=(t,o)=>F(t,N(o));var w=(t,o)=>{var e={};for(var n in t)v.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&m)for(var n of m(t))o.indexOf(n)<0&&E.call(t,n)&&(e[n]=t[n]);return e};var T=(t,o,e)=>new Promise((n,s)=>{var i=r=>{try{a(e.next(r));}catch(l){s(l);}},c=r=>{try{a(e.throw(r));}catch(l){s(l);}},a=r=>r.done?n(r.value):Promise.resolve(r.value).then(i,c);a((e=e.apply(t,o)).next());});var H=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:emotion.css({height:o,minWidth:"auto",width:o,"span:first-child":{marginRight:0}})}};function k(G,S){var P=G,{className:t,isDisabled:o=!1,isLoading:e=!1,label:n,onBlur:s,onCopy:i,size:c="medium",testId:a="cf-ui-copy-button",tooltipCopiedText:r="Value copied to clipboard",tooltipProps:l,tooltipText:B="Copy to clipboard",value:u}=P,M=w(P,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value"]);let z=H({size:c}),[y,b]=d.useState(!1),I=d.useCallback(()=>T(this,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(g){let p=document.createElement("input");p.style.display="none",document.body.appendChild(p),p.value=u,p.focus(),p.select();let h=document.execCommand("copy");if(h==="unsuccessful")throw new Error("Unable to copy value",{cause:h});p.remove();return}i==null||i(u),b(!0);}),[i,u]),D=g=>{y&&b(!1),s==null||s(g);};return d__default.default.createElement(f36Tooltip.Tooltip,C(f({content:y?r:B},l),{isDisabled:o}),d__default.default.createElement(f36Button.Button,C(f({"aria-label":y?r:n!=null?n:B,"aria-live":"assertive",className:emotion.cx(z.button,t),isDisabled:e||o,isLoading:e,onBlur:D,testId:a,startIcon:d__default.default.createElement(f36Icons.CopySimpleIcon,{color:V__default.default.gray600,size:c==="small"?"tiny":"small"}),variant:"secondary"},M),{onClick:I,ref:S})))}k.displayName="CopyButton";var A=d__default.default.forwardRef(k);
16
-
17
- exports.CopyButton = A;
18
- //# sourceMappingURL=out.js.map
1
+ 'use strict';var C=require('react'),V=require('@contentful/f36-tokens'),f36Icons=require('@contentful/f36-icons'),f36Button=require('@contentful/f36-button'),css=require('@emotion/css');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var C__default=/*#__PURE__*/_interopDefault(C);var V__default=/*#__PURE__*/_interopDefault(V);var L=Object.defineProperty,R=Object.defineProperties;var F=Object.getOwnPropertyDescriptors;var m=Object.getOwnPropertySymbols;var x=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var g=(t,o,e)=>o in t?L(t,o,{enumerable:true,configurable:true,writable:true,value:e}):t[o]=e,f=(t,o)=>{for(var e in o||(o={}))x.call(o,e)&&g(t,e,o[e]);if(m)for(var e of m(o))v.call(o,e)&&g(t,e,o[e]);return t},E=(t,o)=>R(t,F(o));var w=(t,o)=>{var e={};for(var n in t)x.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&m)for(var n of m(t))o.indexOf(n)<0&&v.call(t,n)&&(e[n]=t[n]);return e};var H=(t,o,e)=>new Promise((n,s)=>{var i=r=>{try{a(e.next(r));}catch(c){s(c);}},l=r=>{try{a(e.throw(r));}catch(c){s(c);}},a=r=>r.done?n(r.value):Promise.resolve(r.value).then(i,l);a((e=e.apply(t,o)).next());});var T=({size:t})=>{let o=t==="small"?"32px":"40px";return {button:css.css({height:o,minWidth:"auto",width:o,"span:first-child":{marginRight:0}})}};function k(J,S){var h=J,{className:t,isDisabled:o=false,isLoading:e=false,label:n,onBlur:s,onCopy:i,size:l="medium",testId:a="cf-ui-copy-button",tooltipCopiedText:r="Value copied to clipboard",tooltipProps:c,tooltipText:B="Copy to clipboard",value:u,children:G}=h,M=w(h,["className","isDisabled","isLoading","label","onBlur","onCopy","size","testId","tooltipCopiedText","tooltipProps","tooltipText","value","children"]);let z=T({size:l}),[d,P]=C.useState(false),I=C.useCallback(()=>H(null,null,function*(){try{yield window.navigator.clipboard.writeText(u);}catch(y){let p=document.createElement("input");p.style.display="none",document.body.appendChild(p),p.value=u,p.focus(),p.select();let b=document.execCommand("copy");if(b==="unsuccessful")throw console.warn(y),new Error("Unable to copy value",{cause:b});p.remove();return}i==null||i(u),P(true);}),[i,u]),D=y=>{d&&P(false),s==null||s(y);};return C__default.default.createElement(f36Button.IconButton,E(f({},M),{"aria-label":d?r:n!=null?n:B,"aria-live":"assertive",className:css.cx(z.button,t),isDisabled:e||o,isLoading:e,onBlur:D,testId:a,icon:C__default.default.createElement(f36Icons.CopySimpleIcon,{color:V__default.default.gray600,size:l==="small"?"tiny":"small"}),variant:"secondary",onClick:I,ref:S,withTooltip:true,tooltipProps:f({content:d?r:B,isDisabled:o},c)}))}k.displayName="CopyButton";var A=C__default.default.forwardRef(k);exports.CopyButton=A;//# sourceMappingURL=index.js.map
19
2
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["React","useCallback","useState","tokens","CopySimpleIcon","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","input","result","handleBlur","event","__spreadProps","__spreadValues","CopyButton"],"mappings":"4xBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAGK,QACP,OAAOC,MAAY,yBACnB,OAAS,kBAAAC,MAAsB,wBAE/B,OAAS,WAAAC,MAAkC,0BAC3C,OAAS,UAAAC,MAAgC,yBCVzC,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,SAAU,OACV,MAAOA,EAEP,mBAAoB,CAAE,YAAa,CAAE,CACvC,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,4BACpB,aAAAC,EACA,YAAAC,EAAc,oBACd,MAAAC,CAtEJ,EA0DEX,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,EAAI7B,EAAS,EAAK,EAEpC8B,EAAc/B,EAElB,IAAYgC,EAAA,sBACZ,GAAI,CACF,MAAM,OAAO,UAAU,UAAU,UAAUP,CAAK,CAClD,OAASQ,EAAO,CAGd,IAAMC,EAAQ,SAAS,cAAc,OAAO,EAC5CA,EAAM,MAAM,QAAU,OACtB,SAAS,KAAK,YAAYA,CAAK,EAC/BA,EAAM,MAAQT,EACdS,EAAM,MAAM,EACZA,EAAM,OAAO,EACb,IAAMC,EAAS,SAAS,YAAY,MAAM,EAG1C,GAAIA,IAAW,eACb,MAAM,IAAI,MAAM,uBAAwB,CAAE,MAAOA,CAAO,CAAC,EAE3DD,EAAM,OAAO,EAEb,MACF,CAEAd,GAAA,MAAAA,EAASK,GACTK,EAAU,EAAI,CAChB,GAAG,CAACV,EAAQK,CAAK,CAAC,EAEZW,EAAoDC,GAAU,CAC9DR,GACFC,EAAU,EAAK,EAGjBX,GAAA,MAAAA,EAASkB,EACX,EAEA,OACEtC,EAAA,cAACK,EAAAkC,EAAAC,EAAA,CACC,QAASV,EAASP,EAAoBE,GAClCD,GAFL,CAGC,WAAYP,IAEZjB,EAAA,cAACM,EAAAiC,EAAAC,EAAA,CACC,aAAYV,EAASP,EAAoBJ,GAAA,KAAAA,EAASM,EAClD,YAAU,YACV,UAAWd,EAAGkB,EAAO,OAAQb,CAAS,EACtC,WAAYE,GAAaD,EACzB,UAAWC,EACX,OAAQmB,EACR,OAAQf,EACR,UACEtB,EAAA,cAACI,EAAA,CACC,MAAOD,EAAO,QACd,KAAMM,IAAS,QAAU,OAAS,QACpC,EAEF,QAAQ,aACJkB,GAfL,CAgBC,QAASK,EACT,IAAKlB,GACP,CACF,CAEJ,CAEAF,EAAY,YAAc,aAEnB,IAAM6B,EAAazC,EAAM,WAAWY,CAAW","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { CopySimpleIcon } 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 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'\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 = 'Value copied to clipboard',\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 // Chrome requires specific permissions on iframes using the async clipboard\n // API. We can't control that so we fall back to this\n const input = document.createElement('input');\n input.style.display = 'none';\n document.body.appendChild(input);\n input.value = value;\n input.focus();\n input.select();\n const result = document.execCommand('copy');\n\n // @ts-expect-error -- The return type of `execCommand` can also be string\n if (result === 'unsuccessful') {\n throw new Error('Unable to copy value', { cause: result });\n }\n input.remove();\n\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={copied ? tooltipCopiedText : label ?? tooltipText}\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n startIcon={\n <CopySimpleIcon\n color={tokens.gray600}\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n {...otherProps}\n onClick={handleClick}\n ref={ref}\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 minWidth: 'auto',\n width: buttonSize,\n\n 'span:first-child': { marginRight: 0 },\n }),\n };\n};\n"]}
1
+ {"version":3,"sources":["../src/CopyButton.tsx","../src/CopyButton.styles.ts"],"names":["getCopyButtonStyles","size","buttonSize","css","CopyButtonBase","_a","ref","_b","className","isDisabled","isLoading","label","onBlur","onCopy","testId","tooltipCopiedText","tooltipProps","tooltipText","value","children","otherProps","__objRest","styles","copied","setCopied","useState","handleClick","useCallback","__async","error","input","result","handleBlur","event","React","IconButton","__spreadProps","__spreadValues","cx","CopySimpleIcon","tokens","CopyButton"],"mappings":"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","file":"index.js","sourcesContent":["import React, {\n useCallback,\n useState,\n type MouseEventHandler,\n type FocusEventHandler,\n} from 'react';\nimport tokens from '@contentful/f36-tokens';\nimport { CopySimpleIcon } from '@contentful/f36-icons';\nimport { type ExpandProps } from '@contentful/f36-core';\nimport { type TooltipProps } from '@contentful/f36-tooltip';\nimport { IconButton, type ButtonProps } from '@contentful/f36-button';\nimport { getCopyButtonStyles } from './CopyButton.styles';\nimport { cx } from '@emotion/css';\n\nexport type CopyButtonProps = Omit<\n ButtonProps,\n 'endIcon' | 'onCopy' | 'onClick' | 'isDisabled' | 'size' | 'value'\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 CopyButtonBase(\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 = 'Value copied to clipboard',\n tooltipProps,\n tooltipText = 'Copy to clipboard',\n value,\n children,\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 // Chrome requires specific permissions on iframes using the async clipboard\n // API. We can't control that so we fall back to this\n const input = document.createElement('input');\n input.style.display = 'none';\n document.body.appendChild(input);\n input.value = value;\n input.focus();\n input.select();\n const result = document.execCommand('copy');\n\n // @ts-expect-error -- The return type of `execCommand` can also be string\n if (result === 'unsuccessful') {\n // eslint-disable-next-line no-console\n console.warn(error);\n throw new Error('Unable to copy value', { cause: result });\n }\n input.remove();\n\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 <IconButton\n {...otherProps}\n aria-label={copied ? tooltipCopiedText : (label ?? tooltipText)}\n aria-live=\"assertive\"\n className={cx(styles.button, className)}\n isDisabled={isLoading || isDisabled}\n isLoading={isLoading}\n onBlur={handleBlur}\n testId={testId}\n icon={\n <CopySimpleIcon\n color={tokens.gray600}\n size={size === 'small' ? 'tiny' : 'small'}\n />\n }\n variant=\"secondary\"\n onClick={handleClick}\n ref={ref}\n withTooltip\n tooltipProps={{\n content: copied ? tooltipCopiedText : tooltipText,\n isDisabled: isDisabled,\n ...tooltipProps,\n }}\n />\n );\n}\n\nCopyButtonBase.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(CopyButtonBase);\n","import { css } from '@emotion/css';\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 minWidth: 'auto',\n width: buttonSize,\n\n 'span:first-child': { marginRight: 0 },\n }),\n };\n};\n"]}
package/package.json CHANGED
@@ -1,21 +1,21 @@
1
1
  {
2
2
  "name": "@contentful/f36-copybutton",
3
- "version": "5.8.0",
3
+ "version": "6.0.0-alpha.2",
4
4
  "description": "Forma 36: CopyButton component",
5
5
  "scripts": {
6
6
  "build": "tsup"
7
7
  },
8
8
  "dependencies": {
9
- "@contentful/f36-button": "^5.8.0",
10
- "@contentful/f36-core": "^5.8.0",
11
- "@contentful/f36-icons": "^5.8.0",
12
- "@contentful/f36-tokens": "^5.1.0",
13
- "@contentful/f36-tooltip": "^5.8.0",
14
- "emotion": "^10.0.17"
9
+ "@contentful/f36-button": "^6.0.0-alpha.0",
10
+ "@contentful/f36-core": "^6.0.0-alpha.0",
11
+ "@contentful/f36-icons": "^6.0.0-alpha.0",
12
+ "@contentful/f36-tokens": "^6.0.0-alpha.0",
13
+ "@contentful/f36-tooltip": "^6.0.0-alpha.0",
14
+ "@emotion/css": "^11.13.5"
15
15
  },
16
16
  "peerDependencies": {
17
- "react": ">=16.8",
18
- "react-dom": ">=16.8"
17
+ "react": ">=19.1.0",
18
+ "react-dom": ">=19.1.0"
19
19
  },
20
20
  "license": "MIT",
21
21
  "files": [