@contentful/f36-copybutton 4.0.1-beta.2543 → 4.0.1-beta.2590
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/main.js +28 -21
- package/dist/main.js.map +1 -1
- package/dist/module.js +28 -21
- package/dist/module.js.map +1 -1
- package/dist/types.d.ts +13 -1
- package/dist/types.d.ts.map +1 -1
- package/package.json +6 -6
package/dist/main.js
CHANGED
|
@@ -3,6 +3,7 @@ var $2mOCL$react = require("react");
|
|
|
3
3
|
var $2mOCL$reactcopytoclipboard = require("react-copy-to-clipboard");
|
|
4
4
|
var $2mOCL$contentfulf36icons = require("@contentful/f36-icons");
|
|
5
5
|
var $2mOCL$contentfulf36tooltip = require("@contentful/f36-tooltip");
|
|
6
|
+
var $2mOCL$reactjsxruntime = require("react/jsx-runtime");
|
|
6
7
|
var $2mOCL$contentfulf36tokens = require("@contentful/f36-tokens");
|
|
7
8
|
|
|
8
9
|
function $parcel$export(e, n, v, s) {
|
|
@@ -20,6 +21,7 @@ $parcel$export(module.exports, "CopyButton", () => $7cfc52ec8d291deb$export$4f25
|
|
|
20
21
|
|
|
21
22
|
|
|
22
23
|
|
|
24
|
+
|
|
23
25
|
const $a21422a7510521de$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
24
26
|
const buttonSize = size === 'small' ? '32px' : '40px';
|
|
25
27
|
return {
|
|
@@ -89,30 +91,35 @@ function $7cfc52ec8d291deb$var$_CopyButton(props, ref) {
|
|
|
89
91
|
}, [
|
|
90
92
|
onCopy
|
|
91
93
|
]);
|
|
92
|
-
return(/*#__PURE__*/ $
|
|
94
|
+
return(/*#__PURE__*/ $2mOCL$reactjsxruntime.jsx("div", {
|
|
93
95
|
ref: ref,
|
|
94
96
|
"data-test-id": testId,
|
|
95
97
|
className: $2mOCL$emotion.cx(styles.wrapper, className),
|
|
96
|
-
...otherProps
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
98
|
+
...otherProps,
|
|
99
|
+
children: /*#__PURE__*/ $2mOCL$reactjsxruntime.jsx($parcel$interopDefault($2mOCL$reactcopytoclipboard), {
|
|
100
|
+
text: value,
|
|
101
|
+
onCopy: handleOnCopy,
|
|
102
|
+
children: /*#__PURE__*/ $2mOCL$reactjsxruntime.jsx($2mOCL$contentfulf36tooltip.Tooltip, {
|
|
103
|
+
content: copied ? tooltipCopiedText : tooltipText,
|
|
104
|
+
...tooltipProps,
|
|
105
|
+
isDisabled: isDisabled,
|
|
106
|
+
children: /*#__PURE__*/ $2mOCL$reactjsxruntime.jsx("button", {
|
|
107
|
+
type: "button",
|
|
108
|
+
ref: button,
|
|
109
|
+
className: $2mOCL$emotion.cx(styles.copyButton, {
|
|
110
|
+
[styles.copyButtonDisabled]: isDisabled
|
|
111
|
+
}),
|
|
112
|
+
"aria-label": `Copy ${value} to clipboard`,
|
|
113
|
+
disabled: isDisabled,
|
|
114
|
+
"aria-live": "assertive",
|
|
115
|
+
children: /*#__PURE__*/ $2mOCL$reactjsxruntime.jsx($2mOCL$contentfulf36icons.CopyIcon, {
|
|
116
|
+
variant: "muted",
|
|
117
|
+
size: size === 'small' ? 'tiny' : 'small'
|
|
118
|
+
})
|
|
119
|
+
})
|
|
120
|
+
})
|
|
121
|
+
})
|
|
122
|
+
}));
|
|
116
123
|
}
|
|
117
124
|
const $7cfc52ec8d291deb$export$4f2558dd25106ae2 = /*#__PURE__*/ $parcel$interopDefault($2mOCL$react).forwardRef($7cfc52ec8d291deb$var$_CopyButton);
|
|
118
125
|
|
package/dist/main.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
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\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 }),\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","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
CHANGED
|
@@ -3,6 +3,7 @@ import $dnnsg$react, {useState as $dnnsg$useState, useRef as $dnnsg$useRef, useC
|
|
|
3
3
|
import $dnnsg$reactcopytoclipboard from "react-copy-to-clipboard";
|
|
4
4
|
import {CopyIcon as $dnnsg$CopyIcon} from "@contentful/f36-icons";
|
|
5
5
|
import {Tooltip as $dnnsg$Tooltip} from "@contentful/f36-tooltip";
|
|
6
|
+
import {jsx as $dnnsg$jsx} from "react/jsx-runtime";
|
|
6
7
|
import $dnnsg$contentfulf36tokens from "@contentful/f36-tokens";
|
|
7
8
|
|
|
8
9
|
|
|
@@ -12,6 +13,7 @@ import $dnnsg$contentfulf36tokens from "@contentful/f36-tokens";
|
|
|
12
13
|
|
|
13
14
|
|
|
14
15
|
|
|
16
|
+
|
|
15
17
|
const $c5d0896db030b9aa$export$ffd58b7f6f099a57 = ({ size: size })=>{
|
|
16
18
|
const buttonSize = size === 'small' ? '32px' : '40px';
|
|
17
19
|
return {
|
|
@@ -81,30 +83,35 @@ function $b6698237aa721326$var$_CopyButton(props, ref) {
|
|
|
81
83
|
}, [
|
|
82
84
|
onCopy
|
|
83
85
|
]);
|
|
84
|
-
return(/*#__PURE__*/ $dnnsg$
|
|
86
|
+
return(/*#__PURE__*/ $dnnsg$jsx("div", {
|
|
85
87
|
ref: ref,
|
|
86
88
|
"data-test-id": testId,
|
|
87
89
|
className: $dnnsg$cx(styles.wrapper, className),
|
|
88
|
-
...otherProps
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
90
|
+
...otherProps,
|
|
91
|
+
children: /*#__PURE__*/ $dnnsg$jsx($dnnsg$reactcopytoclipboard, {
|
|
92
|
+
text: value,
|
|
93
|
+
onCopy: handleOnCopy,
|
|
94
|
+
children: /*#__PURE__*/ $dnnsg$jsx($dnnsg$Tooltip, {
|
|
95
|
+
content: copied ? tooltipCopiedText : tooltipText,
|
|
96
|
+
...tooltipProps,
|
|
97
|
+
isDisabled: isDisabled,
|
|
98
|
+
children: /*#__PURE__*/ $dnnsg$jsx("button", {
|
|
99
|
+
type: "button",
|
|
100
|
+
ref: button,
|
|
101
|
+
className: $dnnsg$cx(styles.copyButton, {
|
|
102
|
+
[styles.copyButtonDisabled]: isDisabled
|
|
103
|
+
}),
|
|
104
|
+
"aria-label": `Copy ${value} to clipboard`,
|
|
105
|
+
disabled: isDisabled,
|
|
106
|
+
"aria-live": "assertive",
|
|
107
|
+
children: /*#__PURE__*/ $dnnsg$jsx($dnnsg$CopyIcon, {
|
|
108
|
+
variant: "muted",
|
|
109
|
+
size: size === 'small' ? 'tiny' : 'small'
|
|
110
|
+
})
|
|
111
|
+
})
|
|
112
|
+
})
|
|
113
|
+
})
|
|
114
|
+
}));
|
|
108
115
|
}
|
|
109
116
|
const $b6698237aa721326$export$4f2558dd25106ae2 = /*#__PURE__*/ $dnnsg$react.forwardRef($b6698237aa721326$var$_CopyButton);
|
|
110
117
|
|
package/dist/module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"
|
|
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\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 }),\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","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
CHANGED
|
@@ -40,6 +40,18 @@ export interface CopyButtonProps extends CommonProps {
|
|
|
40
40
|
*/
|
|
41
41
|
size?: 'small' | 'medium';
|
|
42
42
|
}
|
|
43
|
-
export const CopyButton: React.ForwardRefExoticComponent<
|
|
43
|
+
export const CopyButton: React.ForwardRefExoticComponent<{
|
|
44
|
+
onCopy?: (string: any) => void;
|
|
45
|
+
tooltipCopiedText?: string;
|
|
46
|
+
tooltipText?: string;
|
|
47
|
+
tooltipProps?: Omit<TooltipProps, 'content' | 'children'>;
|
|
48
|
+
value: string;
|
|
49
|
+
label?: string;
|
|
50
|
+
isDisabled?: boolean;
|
|
51
|
+
size?: 'small' | 'medium';
|
|
52
|
+
className?: string;
|
|
53
|
+
testId?: string;
|
|
54
|
+
style?: React.CSSProperties;
|
|
55
|
+
} & React.RefAttributes<HTMLDivElement>>;
|
|
44
56
|
|
|
45
57
|
//# sourceMappingURL=types.d.ts.map
|
package/dist/types.d.ts.map
CHANGED
|
@@ -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;
|
|
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;AA0ED,OAAO,MAAM;8BA5GU,IAAI;wBAKL,MAAM;kBAKZ,MAAM;mBAIL,KAAK,YAAY,EAAE,SAAS,GAAG,UAAU,CAAC;WAIlD,MAAM;YAKL,MAAM;iBAKD,OAAO;WAKb,OAAO,GAAG,QAAQ;;;;wCA2E4B,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,16 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-copybutton",
|
|
3
|
-
"version": "4.0.1-beta.
|
|
3
|
+
"version": "4.0.1-beta.2590+bfd9a9a5",
|
|
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.0.1-beta.
|
|
11
|
-
"@contentful/f36-icons": "4.0.1-beta.
|
|
12
|
-
"@contentful/f36-tokens": "4.0.1-beta.
|
|
13
|
-
"@contentful/f36-tooltip": "4.0.1-beta.
|
|
10
|
+
"@contentful/f36-core": "4.0.1-beta.2590+bfd9a9a5",
|
|
11
|
+
"@contentful/f36-icons": "4.0.1-beta.2590+bfd9a9a5",
|
|
12
|
+
"@contentful/f36-tokens": "4.0.1-beta.2590+bfd9a9a5",
|
|
13
|
+
"@contentful/f36-tooltip": "4.0.1-beta.2590+bfd9a9a5",
|
|
14
14
|
"emotion": "^10.0.17",
|
|
15
15
|
"react-copy-to-clipboard": "^5.0.3"
|
|
16
16
|
},
|
|
@@ -34,5 +34,5 @@
|
|
|
34
34
|
"publishConfig": {
|
|
35
35
|
"access": "public"
|
|
36
36
|
},
|
|
37
|
-
"gitHead": "
|
|
37
|
+
"gitHead": "bfd9a9a5affcb943abbc97639ebae3abc67844fd"
|
|
38
38
|
}
|