@contentful/f36-copybutton 4.17.0 → 4.19.1

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 4.19.1
+
+### Patch Changes
+
+- [#2209](https://github.com/contentful/forma-36/pull/2209) [`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c) Thanks [@denkristoffer](https://github.com/denkristoffer)! - build: build ESM to JS file - legacy output
+  fix(notification): use type imports
+- Updated dependencies [[`42f0c321`](https://github.com/contentful/forma-36/commit/42f0c3218965137191842f492fe5dbf4bd10784c)]:
+  - @contentful/f36-icons@4.19.1
+  - @contentful/f36-tooltip@4.19.1
+  - @contentful/f36-core@4.19.1
+
+## 4.19.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.19.0
+  - @contentful/f36-tooltip@4.19.0
+  - @contentful/f36-core@4.19.0
+
+## 4.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.18.0
+  - @contentful/f36-tooltip@4.18.0
+  - @contentful/f36-core@4.18.0
+
 ## 4.17.0
 
 ### Patch Changes

package/dist/esm/index.js

@@ -0,0 +1,11 @@
+import { cx, css } from 'emotion';
+import t, { useState, useRef, useCallback } from 'react';
+import k from 'react-copy-to-clipboard';
+import { CopyIcon } from '@contentful/f36-icons';
+import { Tooltip } from '@contentful/f36-tooltip';
+import o from '@contentful/f36-tokens';
+
+var c=({size:r})=>{let e=r==="small"?"32px":"40px";return {wrapper:css({display:"inline-block",height:e,position:"relative",width:e}),copyButton:css({alignItems:"center",background:o.colorWhite,border:`1px solid ${o.gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:o.gray100,cursor:"pointer"},"&:active":{backgroundColor:o.gray200,cursor:"pointer"},"&:focus":{boxShadow:o.glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o.glowMuted}}),copyButtonDisabled:css({cursor:"not-allowed",backgroundColor:o.gray100,"&:hover":{cursor:"not-allowed",backgroundColor:o.gray100},"&:focus":{borderColor:o.gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:o.gray300,boxShadow:"none"}})}};function y(r,e){let{onCopy:i,value:a,className:b,testId:f="cf-ui-copy-button",tooltipText:C="Copy to clipboard",tooltipCopiedText:g="Copied!",tooltipProps:x,isDisabled:n=!1,size:u="medium",...h}=r,s=c({size:u}),[v,d]=useState(!1),p=useRef(null),w=useCallback(B=>{i&&i(B),d(!0),setTimeout(()=>{d(!1),p.current&&p.current.blur();},1e3);},[i]);return t.createElement("div",{ref:e,"data-test-id":f,className:cx(s.wrapper,b),...h},t.createElement(k,{text:a,onCopy:w},t.createElement(Tooltip,{content:v?g:C,...x,isDisabled:n},t.createElement("button",{type:"button",ref:p,className:cx(s.copyButton,{[s.copyButtonDisabled]:n}),"aria-label":`Copy ${a} to clipboard`,disabled:n,"aria-live":"assertive"},t.createElement(CopyIcon,{variant:"muted",size:u==="small"?"tiny":"small"})))))}y.displayName="CopyButton";var z=t.forwardRef(y);
+
+export { z as CopyButton };
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +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","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","styles","copied","setCopied","button","handleOnCopy","e","CopyButton"],"mappings":"AAAA,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,EDdA,SAASI,EACPC,EACAC,EACA,CACA,GAAM,CACJ,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,oBACT,YAAAC,EAAc,oBACd,kBAAAC,EAAoB,UACpB,aAAAC,EACA,WAAAC,EAAa,GACb,KAAAZ,EAAO,YACJa,CACL,EAAIV,EACEW,EAASf,EAAU,CAAE,KAAAC,CAAK,CAAC,EAE3B,CAACe,EAAQC,CAAS,EAAIzB,EAAS,EAAK,EACpC0B,EAASxB,EAAiC,IAAI,EAC9CyB,EAAe1B,EAClB2B,GAAc,CACTd,GACFA,EAAOc,CAAC,EAGVH,EAAU,EAAI,EAEd,WAAW,IAAM,CACfA,EAAU,EAAK,EACXC,EAAO,SACTA,EAAO,QAAQ,KAAK,CAExB,EAAG,GAAI,CACT,EACA,CAACZ,CAAM,CACT,EAEA,OACEf,EAAA,cAAC,OACC,IAAKc,EACL,eAAcI,EACd,UAAWnB,EAAGyB,EAAO,QAASP,CAAS,EACtC,GAAGM,GAEJvB,EAAA,cAACI,EAAA,CAAgB,KAAMY,EAAO,OAAQY,GACpC5B,EAAA,cAACM,EAAA,CACC,QAASmB,EAASL,EAAoBD,EACrC,GAAGE,EACJ,WAAYC,GAEZtB,EAAA,cAAC,UACC,KAAK,SACL,IAAK2B,EACL,UAAW5B,EAAGyB,EAAO,WAAY,CAC/B,CAACA,EAAO,oBAAqBF,CAC/B,CAAC,EACD,aAAY,QAAQN,iBACpB,SAAUM,EACV,YAAU,aAEVtB,EAAA,cAACK,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,CACF,CACF,CACF,CACF,CAEJ,CAEAE,EAAY,YAAc,aAEnB,IAAMkB,EAAa9B,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      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/{types.d.ts → index.d.ts}

@@ -1,7 +1,8 @@
-import React from "react";
-import { CommonProps } from "@contentful/f36-core";
-import { TooltipProps } from "@contentful/f36-tooltip";
-export interface CopyButtonProps extends CommonProps {
+import React from 'react';
+import { CommonProps } from '@contentful/f36-core';
+import { TooltipProps } from '@contentful/f36-tooltip';
+
+interface CopyButtonProps extends CommonProps {
     /**
      * Function that gets called when the button is clicked
      */
@@ -40,6 +41,6 @@ export interface CopyButtonProps extends CommonProps {
      */
     size?: 'small' | 'medium';
 }
-export const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLDivElement>>;
+declare const CopyButton: React.ForwardRefExoticComponent<CopyButtonProps & React.RefAttributes<HTMLDivElement>>;
 
-//# sourceMappingURL=types.d.ts.map
+export { CopyButton, CopyButtonProps };

package/dist/index.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var emotion = require('emotion');
+var t = require('react');
+var k = require('react-copy-to-clipboard');
+var f36Icons = require('@contentful/f36-icons');
+var f36Tooltip = require('@contentful/f36-tooltip');
+var o = require('@contentful/f36-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
+var k__default = /*#__PURE__*/_interopDefaultLegacy(k);
+var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
+
+var c=({size:r})=>{let e=r==="small"?"32px":"40px";return {wrapper:emotion.css({display:"inline-block",height:e,position:"relative",width:e}),copyButton:emotion.css({alignItems:"center",background:o__default["default"].colorWhite,border:`1px solid ${o__default["default"].gray300}`,display:"inline-flex",height:"100%",justifyContent:"center",outline:"none",padding:0,transition:`background ${o__default["default"].transitionDurationShort} ${o__default["default"].transitionEasingDefault}`,width:"100%","&:hover":{backgroundColor:o__default["default"].gray100,cursor:"pointer"},"&:active":{backgroundColor:o__default["default"].gray200,cursor:"pointer"},"&:focus":{boxShadow:o__default["default"].glowMuted},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:o__default["default"].glowMuted}}),copyButtonDisabled:emotion.css({cursor:"not-allowed",backgroundColor:o__default["default"].gray100,"&:hover":{cursor:"not-allowed",backgroundColor:o__default["default"].gray100},"&:focus":{borderColor:o__default["default"].gray300,boxShadow:"none"},"&:active, &:active:hover":{borderColor:o__default["default"].gray300,boxShadow:"none"}})}};function y(r,e){let{onCopy:i,value:a,className:b,testId:f="cf-ui-copy-button",tooltipText:C="Copy to clipboard",tooltipCopiedText:g="Copied!",tooltipProps:x,isDisabled:n=!1,size:u="medium",...h}=r,s=c({size:u}),[v,d]=t.useState(!1),p=t.useRef(null),w=t.useCallback(B=>{i&&i(B),d(!0),setTimeout(()=>{d(!1),p.current&&p.current.blur();},1e3);},[i]);return t__default["default"].createElement("div",{ref:e,"data-test-id":f,className:emotion.cx(s.wrapper,b),...h},t__default["default"].createElement(k__default["default"],{text:a,onCopy:w},t__default["default"].createElement(f36Tooltip.Tooltip,{content:v?g:C,...x,isDisabled:n},t__default["default"].createElement("button",{type:"button",ref:p,className:emotion.cx(s.copyButton,{[s.copyButtonDisabled]:n}),"aria-label":`Copy ${a} to clipboard`,disabled:n,"aria-live":"assertive"},t__default["default"].createElement(f36Icons.CopyIcon,{variant:"muted",size:u==="small"?"tiny":"small"})))))}y.displayName="CopyButton";var z=t__default["default"].forwardRef(y);
+
+exports.CopyButton = z;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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","onCopy","value","className","testId","tooltipText","tooltipCopiedText","tooltipProps","isDisabled","otherProps","styles","copied","setCopied","button","handleOnCopy","e","CopyButton"],"mappings":"AAAA,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,EDdA,SAASI,EACPC,EACAC,EACA,CACA,GAAM,CACJ,OAAAC,EACA,MAAAC,EACA,UAAAC,EACA,OAAAC,EAAS,oBACT,YAAAC,EAAc,oBACd,kBAAAC,EAAoB,UACpB,aAAAC,EACA,WAAAC,EAAa,GACb,KAAAZ,EAAO,YACJa,CACL,EAAIV,EACEW,EAASf,EAAU,CAAE,KAAAC,CAAK,CAAC,EAE3B,CAACe,EAAQC,CAAS,EAAIzB,EAAS,EAAK,EACpC0B,EAASxB,EAAiC,IAAI,EAC9CyB,EAAe1B,EAClB2B,GAAc,CACTd,GACFA,EAAOc,CAAC,EAGVH,EAAU,EAAI,EAEd,WAAW,IAAM,CACfA,EAAU,EAAK,EACXC,EAAO,SACTA,EAAO,QAAQ,KAAK,CAExB,EAAG,GAAI,CACT,EACA,CAACZ,CAAM,CACT,EAEA,OACEf,EAAA,cAAC,OACC,IAAKc,EACL,eAAcI,EACd,UAAWnB,EAAGyB,EAAO,QAASP,CAAS,EACtC,GAAGM,GAEJvB,EAAA,cAACI,EAAA,CAAgB,KAAMY,EAAO,OAAQY,GACpC5B,EAAA,cAACM,EAAA,CACC,QAASmB,EAASL,EAAoBD,EACrC,GAAGE,EACJ,WAAYC,GAEZtB,EAAA,cAAC,UACC,KAAK,SACL,IAAK2B,EACL,UAAW5B,EAAGyB,EAAO,WAAY,CAC/B,CAACA,EAAO,oBAAqBF,CAC/B,CAAC,EACD,aAAY,QAAQN,iBACpB,SAAUM,EACV,YAAU,aAEVtB,EAAA,cAACK,EAAA,CACC,QAAQ,QACR,KAAMK,IAAS,QAAU,OAAS,QACpC,CACF,CACF,CACF,CACF,CAEJ,CAEAE,EAAY,YAAc,aAEnB,IAAMkB,EAAa9B,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      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

@@ -1,16 +1,16 @@
 {
   "name": "@contentful/f36-copybutton",
-  "version": "4.17.0",
+  "version": "4.19.1",
   "description": "Forma 36: CopyButton component",
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.17.0",
-    "@contentful/f36-icons": "^4.17.0",
+    "@contentful/f36-core": "^4.19.1",
+    "@contentful/f36-icons": "^4.19.1",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-tooltip": "^4.17.0",
+    "@contentful/f36-tooltip": "^4.19.1",
     "emotion": "^10.0.17",
     "react-copy-to-clipboard": "^5.1.0"
   },
@@ -21,9 +21,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",

package/dist/main.js

@@ -1,130 +0,0 @@
-var $2mOCL$emotion = require("emotion");
-var $2mOCL$react = require("react");
-var $2mOCL$reactcopytoclipboard = require("react-copy-to-clipboard");
-var $2mOCL$contentfulf36icons = require("@contentful/f36-icons");
-var $2mOCL$contentfulf36tooltip = require("@contentful/f36-tooltip");
-var $2mOCL$contentfulf36tokens = require("@contentful/f36-tokens");
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-$parcel$export(module.exports, "CopyButton", () => $7cfc52ec8d291deb$export$4f2558dd25106ae2);
-
-
-
-
-
-
-
-const $a21422a7510521de$export$ffd58b7f6f099a57 = ({ size: size  })=>{
-    const buttonSize = size === "small" ? "32px" : "40px";
-    return {
-        wrapper: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
-            display: "inline-block",
-            height: buttonSize,
-            position: "relative",
-            width: buttonSize
-        }),
-        copyButton: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
-            alignItems: "center",
-            background: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).colorWhite,
-            border: `1px solid ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300}`,
-            display: "inline-flex",
-            height: "100%",
-            justifyContent: "center",
-            outline: "none",
-            padding: 0,
-            transition: `background ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).transitionDurationShort} ${(0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).transitionEasingDefault}`,
-            width: "100%",
-            "&:hover": {
-                backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100,
-                cursor: "pointer"
-            },
-            "&:active": {
-                backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray200,
-                cursor: "pointer"
-            },
-            "&:focus": {
-                boxShadow: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).glowMuted
-            },
-            "&:focus:not(:focus-visible)": {
-                boxShadow: "unset"
-            },
-            "&:focus-visible": {
-                boxShadow: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).glowMuted
-            }
-        }),
-        copyButtonDisabled: /*#__PURE__*/ (0, $2mOCL$emotion.css)({
-            cursor: "not-allowed",
-            backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100,
-            "&:hover": {
-                cursor: "not-allowed",
-                backgroundColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray100
-            },
-            "&:focus": {
-                borderColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300,
-                boxShadow: "none"
-            },
-            "&:active, &:active:hover": {
-                borderColor: (0, ($parcel$interopDefault($2mOCL$contentfulf36tokens))).gray300,
-                boxShadow: "none"
-            }
-        })
-    };
-};
-
-
-function $7cfc52ec8d291deb$var$_CopyButton(props, ref) {
-    const { onCopy: onCopy , value: value , className: className , testId: testId = "cf-ui-copy-button" , tooltipText: tooltipText = "Copy to clipboard" , tooltipCopiedText: tooltipCopiedText = "Copied!" , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = "medium" , ...otherProps } = props;
-    const styles = (0, $a21422a7510521de$export$ffd58b7f6f099a57)({
-        size: size
-    });
-    const [copied, setCopied] = (0, $2mOCL$react.useState)(false);
-    const button = (0, $2mOCL$react.useRef)(null);
-    const handleOnCopy = (0, $2mOCL$react.useCallback)((e)=>{
-        if (onCopy) onCopy(e);
-        setCopied(true);
-        setTimeout(()=>{
-            setCopied(false);
-            if (button.current) button.current.blur();
-        }, 1000);
-    }, [
-        onCopy
-    ]);
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement("div", {
-        ref: ref,
-        "data-test-id": testId,
-        className: (0, $2mOCL$emotion.cx)(styles.wrapper, className),
-        ...otherProps
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, ($parcel$interopDefault($2mOCL$reactcopytoclipboard))), {
-        text: value,
-        onCopy: handleOnCopy
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, $2mOCL$contentfulf36tooltip.Tooltip), {
-        content: copied ? tooltipCopiedText : tooltipText,
-        ...tooltipProps,
-        isDisabled: isDisabled
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement("button", {
-        type: "button",
-        ref: button,
-        className: (0, $2mOCL$emotion.cx)(styles.copyButton, {
-            [styles.copyButtonDisabled]: isDisabled
-        }),
-        "aria-label": `Copy ${value} to clipboard`,
-        disabled: isDisabled,
-        "aria-live": "assertive"
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).createElement((0, $2mOCL$contentfulf36icons.CopyIcon), {
-        variant: "muted",
-        size: size === "small" ? "tiny" : "small"
-    })))));
-}
-$7cfc52ec8d291deb$var$_CopyButton.displayName = "CopyButton";
-const $7cfc52ec8d291deb$export$4f2558dd25106ae2 = /*#__PURE__*/ (0, ($parcel$interopDefault($2mOCL$react))).forwardRef($7cfc52ec8d291deb$var$_CopyButton);
-
-
-
-
-//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n  /**\n   * Function that gets called when the button is clicked\n   */\n  onCopy?: (string) => void;\n  /**\n   * Text to be shown when the button is clicked\n   * @default Copied!\n   */\n  tooltipCopiedText?: string;\n  /**\n   * Text to be shown when button is hovered or focused\n   * @default Copy to clipboard\n   */\n  tooltipText?: string;\n  /**\n   * Props that are passed to the tooltip component\n   */\n  tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n  /**\n   * Value that will be copied to clipboard when the button is clicked\n   */\n  value: string;\n  /**\n   * Label to be used on aria-label for the button\n   * @default Copy {value} to clipboard\n   */\n  label?: string;\n  /**\n   * Allows to disable the copy button, when true the tooltip would not be shown\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Allows setting size of the copy button to small\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n  props: ExpandProps<CopyButtonProps>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    onCopy,\n    value,\n    className,\n    testId = 'cf-ui-copy-button',\n    tooltipText = 'Copy to clipboard',\n    tooltipCopiedText = 'Copied!',\n    tooltipProps,\n    isDisabled = false,\n    size = 'medium',\n    ...otherProps\n  } = props;\n  const styles = getStyles({ size });\n\n  const [copied, setCopied] = useState(false);\n  const button = useRef<HTMLButtonElement | null>(null);\n  const handleOnCopy = useCallback(\n    (e: string) => {\n      if (onCopy) {\n        onCopy(e);\n      }\n\n      setCopied(true);\n\n      setTimeout(() => {\n        setCopied(false);\n        if (button.current) {\n          button.current.blur();\n        }\n      }, 1000);\n    },\n    [onCopy],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-test-id={testId}\n      className={cx(styles.wrapper, className)}\n      {...otherProps}\n    >\n      <CopyToClipboard text={value} onCopy={handleOnCopy}>\n        <Tooltip\n          content={copied ? tooltipCopiedText : tooltipText}\n          {...tooltipProps}\n          isDisabled={isDisabled}\n        >\n          <button\n            type=\"button\"\n            ref={button}\n            className={cx(styles.copyButton, {\n              [styles.copyButtonDisabled]: isDisabled,\n            })}\n            aria-label={`Copy ${value} to clipboard`}\n            disabled={isDisabled}\n            aria-live=\"assertive\"\n          >\n            <CopyIcon\n              variant=\"muted\"\n              size={size === 'small' ? 'tiny' : 'small'}\n            />\n          </button>\n        </Tooltip>\n      </CopyToClipboard>\n    </div>\n  );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n  const buttonSize = size === 'small' ? '32px' : '40px';\n\n  return {\n    wrapper: css({\n      display: 'inline-block',\n      height: buttonSize,\n      position: 'relative',\n      width: buttonSize,\n    }),\n    copyButton: css({\n      alignItems: 'center',\n      background: tokens.colorWhite,\n      border: `1px solid ${tokens.gray300}`,\n      display: 'inline-flex',\n      height: '100%',\n      justifyContent: 'center',\n      outline: 'none',\n      padding: 0,\n      transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      width: '100%',\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n        cursor: 'pointer',\n      },\n      '&:active': {\n        backgroundColor: tokens.gray200,\n        cursor: 'pointer',\n      },\n      '&:focus': {\n        boxShadow: tokens.glowMuted,\n      },\n      '&:focus:not(:focus-visible)': {\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        boxShadow: tokens.glowMuted,\n      },\n    }),\n    copyButtonDisabled: css({\n      cursor: 'not-allowed',\n      backgroundColor: tokens.gray100,\n\n      '&:hover': {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.gray100,\n      },\n\n      '&:focus': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n\n      '&:active, &:active:hover': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n    }),\n  };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,123 +0,0 @@
-import {cx as $dnnsg$cx, css as $dnnsg$css} from "emotion";
-import $dnnsg$react, {useState as $dnnsg$useState, useRef as $dnnsg$useRef, useCallback as $dnnsg$useCallback} from "react";
-import $dnnsg$reactcopytoclipboard from "react-copy-to-clipboard";
-import {CopyIcon as $dnnsg$CopyIcon} from "@contentful/f36-icons";
-import {Tooltip as $dnnsg$Tooltip} from "@contentful/f36-tooltip";
-import $dnnsg$contentfulf36tokens from "@contentful/f36-tokens";
-
-
-
-
-
-
-
-
-const $c5d0896db030b9aa$export$ffd58b7f6f099a57 = ({ size: size  })=>{
-    const buttonSize = size === "small" ? "32px" : "40px";
-    return {
-        wrapper: /*#__PURE__*/ (0, $dnnsg$css)({
-            display: "inline-block",
-            height: buttonSize,
-            position: "relative",
-            width: buttonSize
-        }),
-        copyButton: /*#__PURE__*/ (0, $dnnsg$css)({
-            alignItems: "center",
-            background: (0, $dnnsg$contentfulf36tokens).colorWhite,
-            border: `1px solid ${(0, $dnnsg$contentfulf36tokens).gray300}`,
-            display: "inline-flex",
-            height: "100%",
-            justifyContent: "center",
-            outline: "none",
-            padding: 0,
-            transition: `background ${(0, $dnnsg$contentfulf36tokens).transitionDurationShort} ${(0, $dnnsg$contentfulf36tokens).transitionEasingDefault}`,
-            width: "100%",
-            "&:hover": {
-                backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100,
-                cursor: "pointer"
-            },
-            "&:active": {
-                backgroundColor: (0, $dnnsg$contentfulf36tokens).gray200,
-                cursor: "pointer"
-            },
-            "&:focus": {
-                boxShadow: (0, $dnnsg$contentfulf36tokens).glowMuted
-            },
-            "&:focus:not(:focus-visible)": {
-                boxShadow: "unset"
-            },
-            "&:focus-visible": {
-                boxShadow: (0, $dnnsg$contentfulf36tokens).glowMuted
-            }
-        }),
-        copyButtonDisabled: /*#__PURE__*/ (0, $dnnsg$css)({
-            cursor: "not-allowed",
-            backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100,
-            "&:hover": {
-                cursor: "not-allowed",
-                backgroundColor: (0, $dnnsg$contentfulf36tokens).gray100
-            },
-            "&:focus": {
-                borderColor: (0, $dnnsg$contentfulf36tokens).gray300,
-                boxShadow: "none"
-            },
-            "&:active, &:active:hover": {
-                borderColor: (0, $dnnsg$contentfulf36tokens).gray300,
-                boxShadow: "none"
-            }
-        })
-    };
-};
-
-
-function $b6698237aa721326$var$_CopyButton(props, ref) {
-    const { onCopy: onCopy , value: value , className: className , testId: testId = "cf-ui-copy-button" , tooltipText: tooltipText = "Copy to clipboard" , tooltipCopiedText: tooltipCopiedText = "Copied!" , tooltipProps: tooltipProps , isDisabled: isDisabled = false , size: size = "medium" , ...otherProps } = props;
-    const styles = (0, $c5d0896db030b9aa$export$ffd58b7f6f099a57)({
-        size: size
-    });
-    const [copied, setCopied] = (0, $dnnsg$useState)(false);
-    const button = (0, $dnnsg$useRef)(null);
-    const handleOnCopy = (0, $dnnsg$useCallback)((e)=>{
-        if (onCopy) onCopy(e);
-        setCopied(true);
-        setTimeout(()=>{
-            setCopied(false);
-            if (button.current) button.current.blur();
-        }, 1000);
-    }, [
-        onCopy
-    ]);
-    return /*#__PURE__*/ (0, $dnnsg$react).createElement("div", {
-        ref: ref,
-        "data-test-id": testId,
-        className: (0, $dnnsg$cx)(styles.wrapper, className),
-        ...otherProps
-    }, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$reactcopytoclipboard), {
-        text: value,
-        onCopy: handleOnCopy
-    }, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$Tooltip), {
-        content: copied ? tooltipCopiedText : tooltipText,
-        ...tooltipProps,
-        isDisabled: isDisabled
-    }, /*#__PURE__*/ (0, $dnnsg$react).createElement("button", {
-        type: "button",
-        ref: button,
-        className: (0, $dnnsg$cx)(styles.copyButton, {
-            [styles.copyButtonDisabled]: isDisabled
-        }),
-        "aria-label": `Copy ${value} to clipboard`,
-        disabled: isDisabled,
-        "aria-live": "assertive"
-    }, /*#__PURE__*/ (0, $dnnsg$react).createElement((0, $dnnsg$CopyIcon), {
-        variant: "muted",
-        size: size === "small" ? "tiny" : "small"
-    })))));
-}
-$b6698237aa721326$var$_CopyButton.displayName = "CopyButton";
-const $b6698237aa721326$export$4f2558dd25106ae2 = /*#__PURE__*/ (0, $dnnsg$react).forwardRef($b6698237aa721326$var$_CopyButton);
-
-
-
-
-export {$b6698237aa721326$export$4f2558dd25106ae2 as CopyButton};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n  /**\n   * Function that gets called when the button is clicked\n   */\n  onCopy?: (string) => void;\n  /**\n   * Text to be shown when the button is clicked\n   * @default Copied!\n   */\n  tooltipCopiedText?: string;\n  /**\n   * Text to be shown when button is hovered or focused\n   * @default Copy to clipboard\n   */\n  tooltipText?: string;\n  /**\n   * Props that are passed to the tooltip component\n   */\n  tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n  /**\n   * Value that will be copied to clipboard when the button is clicked\n   */\n  value: string;\n  /**\n   * Label to be used on aria-label for the button\n   * @default Copy {value} to clipboard\n   */\n  label?: string;\n  /**\n   * Allows to disable the copy button, when true the tooltip would not be shown\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Allows setting size of the copy button to small\n   * @default medium\n   */\n  size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n  props: ExpandProps<CopyButtonProps>,\n  ref: React.Ref<HTMLDivElement>,\n) {\n  const {\n    onCopy,\n    value,\n    className,\n    testId = 'cf-ui-copy-button',\n    tooltipText = 'Copy to clipboard',\n    tooltipCopiedText = 'Copied!',\n    tooltipProps,\n    isDisabled = false,\n    size = 'medium',\n    ...otherProps\n  } = props;\n  const styles = getStyles({ size });\n\n  const [copied, setCopied] = useState(false);\n  const button = useRef<HTMLButtonElement | null>(null);\n  const handleOnCopy = useCallback(\n    (e: string) => {\n      if (onCopy) {\n        onCopy(e);\n      }\n\n      setCopied(true);\n\n      setTimeout(() => {\n        setCopied(false);\n        if (button.current) {\n          button.current.blur();\n        }\n      }, 1000);\n    },\n    [onCopy],\n  );\n\n  return (\n    <div\n      ref={ref}\n      data-test-id={testId}\n      className={cx(styles.wrapper, className)}\n      {...otherProps}\n    >\n      <CopyToClipboard text={value} onCopy={handleOnCopy}>\n        <Tooltip\n          content={copied ? tooltipCopiedText : tooltipText}\n          {...tooltipProps}\n          isDisabled={isDisabled}\n        >\n          <button\n            type=\"button\"\n            ref={button}\n            className={cx(styles.copyButton, {\n              [styles.copyButtonDisabled]: isDisabled,\n            })}\n            aria-label={`Copy ${value} to clipboard`}\n            disabled={isDisabled}\n            aria-live=\"assertive\"\n          >\n            <CopyIcon\n              variant=\"muted\"\n              size={size === 'small' ? 'tiny' : 'small'}\n            />\n          </button>\n        </Tooltip>\n      </CopyToClipboard>\n    </div>\n  );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n  const buttonSize = size === 'small' ? '32px' : '40px';\n\n  return {\n    wrapper: css({\n      display: 'inline-block',\n      height: buttonSize,\n      position: 'relative',\n      width: buttonSize,\n    }),\n    copyButton: css({\n      alignItems: 'center',\n      background: tokens.colorWhite,\n      border: `1px solid ${tokens.gray300}`,\n      display: 'inline-flex',\n      height: '100%',\n      justifyContent: 'center',\n      outline: 'none',\n      padding: 0,\n      transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n      width: '100%',\n      '&:hover': {\n        backgroundColor: tokens.gray100,\n        cursor: 'pointer',\n      },\n      '&:active': {\n        backgroundColor: tokens.gray200,\n        cursor: 'pointer',\n      },\n      '&:focus': {\n        boxShadow: tokens.glowMuted,\n      },\n      '&:focus:not(:focus-visible)': {\n        boxShadow: 'unset',\n      },\n      '&:focus-visible': {\n        boxShadow: tokens.glowMuted,\n      },\n    }),\n    copyButtonDisabled: css({\n      cursor: 'not-allowed',\n      backgroundColor: tokens.gray100,\n\n      '&:hover': {\n        cursor: 'not-allowed',\n        backgroundColor: tokens.gray100,\n      },\n\n      '&:focus': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n\n      '&:active, &:active:hover': {\n        borderColor: tokens.gray300,\n        boxShadow: 'none',\n      },\n    }),\n  };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;;ACQA,gCAAiC,SAAQ,WAAW;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AA4ED,OAAO,MAAM,kGAA0C,CAAC","sources":["packages/components/copybutton/src/src/CopyButton.styles.ts","packages/components/copybutton/src/src/CopyButton.tsx","packages/components/copybutton/src/src/index.ts","packages/components/copybutton/src/index.ts"],"sourcesContent":[null,null,null,"export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n"],"names":[],"version":3,"file":"types.d.ts.map"}