@contentful/f36-copybutton 4.15.0 → 4.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,32 @@
1
1
  # Change Log
2
2
 
3
+ ## 4.17.0
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @contentful/f36-icons@4.17.0
9
+ - @contentful/f36-tooltip@4.17.0
10
+ - @contentful/f36-core@4.17.0
11
+
12
+ ## 4.16.0
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies []:
17
+ - @contentful/f36-icons@4.16.0
18
+ - @contentful/f36-tooltip@4.16.0
19
+ - @contentful/f36-core@4.16.0
20
+
21
+ ## 4.15.1
22
+
23
+ ### Patch Changes
24
+
25
+ - Updated dependencies []:
26
+ - @contentful/f36-icons@4.15.1
27
+ - @contentful/f36-tooltip@4.15.1
28
+ - @contentful/f36-core@4.15.1
29
+
3
30
  ## 4.15.0
4
31
 
5
32
  ### Patch Changes
package/dist/main.js.map CHANGED
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport 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"}
1
+ {"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n /**\n * Function that gets called when the button is clicked\n */\n onCopy?: (string) => void;\n /**\n * Text to be shown when the button is clicked\n * @default Copied!\n */\n tooltipCopiedText?: string;\n /**\n * Text to be shown when button is hovered or focused\n * @default Copy to clipboard\n */\n tooltipText?: string;\n /**\n * Props that are passed to the tooltip component\n */\n tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n /**\n * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n /**\n * Label to be used on aria-label for the button\n * @default Copy {value} to clipboard\n */\n label?: string;\n /**\n * Allows to disable the copy button, when true the tooltip would not be shown\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Allows setting size of the copy button to small\n * @default medium\n */\n size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n props: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n onCopy,\n value,\n className,\n testId = 'cf-ui-copy-button',\n tooltipText = 'Copy to clipboard',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n isDisabled = false,\n size = 'medium',\n ...otherProps\n } = props;\n const styles = getStyles({ size });\n\n const [copied, setCopied] = useState(false);\n const button = useRef<HTMLButtonElement | null>(null);\n const handleOnCopy = useCallback(\n (e: string) => {\n if (onCopy) {\n onCopy(e);\n }\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n if (button.current) {\n button.current.blur();\n }\n }, 1000);\n },\n [onCopy],\n );\n\n return (\n <div\n ref={ref}\n data-test-id={testId}\n className={cx(styles.wrapper, className)}\n {...otherProps}\n >\n <CopyToClipboard text={value} onCopy={handleOnCopy}>\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <button\n type=\"button\"\n ref={button}\n className={cx(styles.copyButton, {\n [styles.copyButtonDisabled]: isDisabled,\n })}\n aria-label={`Copy ${value} to clipboard`}\n disabled={isDisabled}\n aria-live=\"assertive\"\n >\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n </button>\n </Tooltip>\n </CopyToClipboard>\n </div>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n wrapper: css({\n display: 'inline-block',\n height: buttonSize,\n position: 'relative',\n width: buttonSize,\n }),\n copyButton: css({\n alignItems: 'center',\n background: tokens.colorWhite,\n border: `1px solid ${tokens.gray300}`,\n display: 'inline-flex',\n height: '100%',\n justifyContent: 'center',\n outline: 'none',\n padding: 0,\n transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n width: '100%',\n '&:hover': {\n backgroundColor: tokens.gray100,\n cursor: 'pointer',\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n cursor: 'pointer',\n },\n '&:focus': {\n boxShadow: tokens.glowMuted,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowMuted,\n },\n }),\n copyButtonDisabled: css({\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n\n '&:hover': {\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n },\n\n '&:focus': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n\n '&:active, &:active:hover': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n }),\n };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"main.js.map"}
@@ -1 +1 @@
1
- {"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip } from '@contentful/f36-tooltip';\nimport 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"}
1
+ {"mappings":"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","sources":["packages/components/copybutton/src/index.ts","packages/components/copybutton/src/CopyButton.tsx","packages/components/copybutton/src/CopyButton.styles.ts"],"sourcesContent":["export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n","import { cx } from 'emotion';\nimport React, { useState, useCallback, useRef } from 'react';\nimport CopyToClipboard from 'react-copy-to-clipboard';\nimport { CopyIcon } from '@contentful/f36-icons';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { Tooltip, type TooltipProps } from '@contentful/f36-tooltip';\nimport { getStyles } from './CopyButton.styles';\n\nexport interface CopyButtonProps extends CommonProps {\n /**\n * Function that gets called when the button is clicked\n */\n onCopy?: (string) => void;\n /**\n * Text to be shown when the button is clicked\n * @default Copied!\n */\n tooltipCopiedText?: string;\n /**\n * Text to be shown when button is hovered or focused\n * @default Copy to clipboard\n */\n tooltipText?: string;\n /**\n * Props that are passed to the tooltip component\n */\n tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;\n /**\n * Value that will be copied to clipboard when the button is clicked\n */\n value: string;\n /**\n * Label to be used on aria-label for the button\n * @default Copy {value} to clipboard\n */\n label?: string;\n /**\n * Allows to disable the copy button, when true the tooltip would not be shown\n * @default false\n */\n isDisabled?: boolean;\n /**\n * Allows setting size of the copy button to small\n * @default medium\n */\n size?: 'small' | 'medium';\n}\n\nfunction _CopyButton(\n props: ExpandProps<CopyButtonProps>,\n ref: React.Ref<HTMLDivElement>,\n) {\n const {\n onCopy,\n value,\n className,\n testId = 'cf-ui-copy-button',\n tooltipText = 'Copy to clipboard',\n tooltipCopiedText = 'Copied!',\n tooltipProps,\n isDisabled = false,\n size = 'medium',\n ...otherProps\n } = props;\n const styles = getStyles({ size });\n\n const [copied, setCopied] = useState(false);\n const button = useRef<HTMLButtonElement | null>(null);\n const handleOnCopy = useCallback(\n (e: string) => {\n if (onCopy) {\n onCopy(e);\n }\n\n setCopied(true);\n\n setTimeout(() => {\n setCopied(false);\n if (button.current) {\n button.current.blur();\n }\n }, 1000);\n },\n [onCopy],\n );\n\n return (\n <div\n ref={ref}\n data-test-id={testId}\n className={cx(styles.wrapper, className)}\n {...otherProps}\n >\n <CopyToClipboard text={value} onCopy={handleOnCopy}>\n <Tooltip\n content={copied ? tooltipCopiedText : tooltipText}\n {...tooltipProps}\n isDisabled={isDisabled}\n >\n <button\n type=\"button\"\n ref={button}\n className={cx(styles.copyButton, {\n [styles.copyButtonDisabled]: isDisabled,\n })}\n aria-label={`Copy ${value} to clipboard`}\n disabled={isDisabled}\n aria-live=\"assertive\"\n >\n <CopyIcon\n variant=\"muted\"\n size={size === 'small' ? 'tiny' : 'small'}\n />\n </button>\n </Tooltip>\n </CopyToClipboard>\n </div>\n );\n}\n\n_CopyButton.displayName = 'CopyButton';\n\nexport const CopyButton = React.forwardRef(_CopyButton);\n","import { css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = ({ size }) => {\n const buttonSize = size === 'small' ? '32px' : '40px';\n\n return {\n wrapper: css({\n display: 'inline-block',\n height: buttonSize,\n position: 'relative',\n width: buttonSize,\n }),\n copyButton: css({\n alignItems: 'center',\n background: tokens.colorWhite,\n border: `1px solid ${tokens.gray300}`,\n display: 'inline-flex',\n height: '100%',\n justifyContent: 'center',\n outline: 'none',\n padding: 0,\n transition: `background ${tokens.transitionDurationShort} ${tokens.transitionEasingDefault}`,\n width: '100%',\n '&:hover': {\n backgroundColor: tokens.gray100,\n cursor: 'pointer',\n },\n '&:active': {\n backgroundColor: tokens.gray200,\n cursor: 'pointer',\n },\n '&:focus': {\n boxShadow: tokens.glowMuted,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowMuted,\n },\n }),\n copyButtonDisabled: css({\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n\n '&:hover': {\n cursor: 'not-allowed',\n backgroundColor: tokens.gray100,\n },\n\n '&:focus': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n\n '&:active, &:active:hover': {\n borderColor: tokens.gray300,\n boxShadow: 'none',\n },\n }),\n };\n};\n"],"names":["CopyButton","CopyButtonProps","React","useState","useCallback","useRef","CopyToClipboard","CopyIcon","CommonProps","ExpandProps","Tooltip","TooltipProps","getStyles","onCopy","string","tooltipCopiedText","tooltipText","tooltipProps","Omit","value","label","isDisabled","size","_CopyButton","props","ref","Ref","HTMLDivElement","className","testId","otherProps","styles","copied","setCopied","button","HTMLButtonElement","handleOnCopy","e","setTimeout","current","blur","wrapper","copyButton","copyButtonDisabled","displayName","forwardRef","tokens","buttonSize","display","height","position","width","alignItems","background","colorWhite","border","gray300","justifyContent","outline","padding","transition","transitionDurationShort","transitionEasingDefault","backgroundColor","gray100","cursor","gray200","boxShadow","glowMuted","borderColor"],"version":3,"file":"module.js.map"}
@@ -1 +1 @@
1
- {"mappings":";;;ACSA,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"}
1
+ {"mappings":";;;ACQA,gCAAiC,SAAQ,WAAW;IAClD;;OAEG;IACH,MAAM,CAAC,EAAE,CAAC,MAAM,KAAA,KAAK,IAAI,CAAC;IAC1B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,IAAI,CAAC,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC,CAAC;IAC1D;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC3B;AA4ED,OAAO,MAAM,kGAA0C,CAAC","sources":["packages/components/copybutton/src/src/CopyButton.styles.ts","packages/components/copybutton/src/src/CopyButton.tsx","packages/components/copybutton/src/src/index.ts","packages/components/copybutton/src/index.ts"],"sourcesContent":[null,null,null,"export { CopyButton } from './CopyButton';\nexport type { CopyButtonProps } from './CopyButton';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
package/package.json CHANGED
@@ -1,18 +1,18 @@
1
1
  {
2
2
  "name": "@contentful/f36-copybutton",
3
- "version": "4.15.0",
3
+ "version": "4.17.0",
4
4
  "description": "Forma 36: CopyButton component",
5
5
  "scripts": {
6
6
  "build": "parcel build"
7
7
  },
8
8
  "dependencies": {
9
9
  "@babel/runtime": "^7.6.2",
10
- "@contentful/f36-core": "^4.15.0",
11
- "@contentful/f36-icons": "^4.15.0",
10
+ "@contentful/f36-core": "^4.17.0",
11
+ "@contentful/f36-icons": "^4.17.0",
12
12
  "@contentful/f36-tokens": "^4.0.1",
13
- "@contentful/f36-tooltip": "^4.15.0",
13
+ "@contentful/f36-tooltip": "^4.17.0",
14
14
  "emotion": "^10.0.17",
15
- "react-copy-to-clipboard": "^5.0.3"
15
+ "react-copy-to-clipboard": "^5.1.0"
16
16
  },
17
17
  "peerDependencies": {
18
18
  "react": ">=16.8"