@veeqo/ui 15.19.0 → 15.20.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/dist/components/CopyToClipboard/CopyToClipboard.cjs +4 -4
- package/dist/components/CopyToClipboard/CopyToClipboard.cjs.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.js +4 -4
- package/dist/components/CopyToClipboard/CopyToClipboard.js.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.module.scss.cjs +2 -2
- package/dist/components/CopyToClipboard/CopyToClipboard.module.scss.cjs.map +1 -1
- package/dist/components/CopyToClipboard/CopyToClipboard.module.scss.js +2 -2
- package/dist/components/CopyToClipboard/CopyToClipboard.module.scss.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var Tooltip = require('../Tooltip/Tooltip.cjs');
|
|
5
|
-
var colors = require('../../theme/modules/colors.cjs');
|
|
6
4
|
var ClipboardIcon = require('../../icons/design-system/components/ClipboardIcon.cjs');
|
|
7
5
|
var SuccessIcon = require('../../icons/design-system/components/SuccessIcon.cjs');
|
|
6
|
+
var colors = require('../../theme/modules/colors.cjs');
|
|
8
7
|
var sizes = require('../../theme/modules/sizes.cjs');
|
|
9
|
-
var Button = require('../Button/Button.cjs');
|
|
10
8
|
var buildClassnames = require('../../utils/buildClassnames.cjs');
|
|
9
|
+
var Action = require('../Action/Action.cjs');
|
|
10
|
+
var Tooltip = require('../Tooltip/Tooltip.cjs');
|
|
11
11
|
var CopyToClipboard_module = require('./CopyToClipboard.module.scss.cjs');
|
|
12
12
|
|
|
13
13
|
function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
|
|
@@ -28,7 +28,7 @@ const CopyToClipboard = ({ className, text, onCopy }) => {
|
|
|
28
28
|
setTimeout(() => setCopied(false), 2500);
|
|
29
29
|
}, [onCopy, text]);
|
|
30
30
|
return (React__default.default.createElement(Tooltip.Tooltip, { text: copied ? 'Copied!' : 'Copy to clipboard' },
|
|
31
|
-
React__default.default.createElement(
|
|
31
|
+
React__default.default.createElement(Action.Action, { variant: "flat", size: "sm", className: buildClassnames.buildClassnames([CopyToClipboard_module.xsAction, className]), "aria-label": `${copied ? 'Copied' : 'Copy'} "${text}" to clipboard`, iconSlot: copied ? (React__default.default.createElement(SuccessIcon.ReactComponent, { color: colors.colors.secondary.green.base, ...iconSizes })) : (React__default.default.createElement(ClipboardIcon.ReactComponent, { color: colors.colors.secondary.blue.base, ...iconSizes })), onClick: handleCopy })));
|
|
32
32
|
};
|
|
33
33
|
|
|
34
34
|
exports.CopyToClipboard = CopyToClipboard;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ClipboardIcon, SuccessIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { Action } from '../Action';\nimport { Tooltip } from '../Tooltip';\nimport styles from './CopyToClipboard.module.scss';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/**\n * A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <Action\n variant=\"flat\"\n size=\"sm\"\n className={buildClassnames([styles.xsAction, className])}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["sizes","React","useCallback","Tooltip","Action","buildClassnames","styles","SuccessIcon","colors","ClipboardIcon"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAEA,WAAK,CAAC,IAAI,EAAE,MAAM,EAAEA,WAAK,CAAC,IAAI,EAAE;AAE3D;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGC,sBAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAGC,iBAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACED,sBAAA,CAAA,aAAA,CAACE,eAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAF,sBAAA,CAAA,aAAA,CAACG,aAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAEC,+BAAe,CAAC,CAACC,sBAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,gBAC5C,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAA,cAAA,CAAgB,EAClE,QAAQ,EACN,MAAM,IACJL,sBAAA,CAAA,aAAA,CAACM,0BAAW,EAAA,EAAC,KAAK,EAAEC,aAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,KAElEP,sBAAA,CAAA,aAAA,CAACQ,4BAAa,EAAA,EAAC,KAAK,EAAED,aAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,CACpE,EAEH,OAAO,EAAE,UAAU,EAAA,CACnB,CACM;AAEd;;;;"}
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import React__default, { useCallback } from 'react';
|
|
2
|
-
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
3
|
-
import { colors } from '../../theme/modules/colors.js';
|
|
4
2
|
import { ReactComponent as ClipboardIcon } from '../../icons/design-system/components/ClipboardIcon.js';
|
|
5
3
|
import { ReactComponent as SuccessIcon } from '../../icons/design-system/components/SuccessIcon.js';
|
|
4
|
+
import { colors } from '../../theme/modules/colors.js';
|
|
6
5
|
import { sizes } from '../../theme/modules/sizes.js';
|
|
7
|
-
import { Button } from '../Button/Button.js';
|
|
8
6
|
import { buildClassnames } from '../../utils/buildClassnames.js';
|
|
7
|
+
import { Action } from '../Action/Action.js';
|
|
8
|
+
import { Tooltip } from '../Tooltip/Tooltip.js';
|
|
9
9
|
import styles from './CopyToClipboard.module.scss.js';
|
|
10
10
|
|
|
11
11
|
const iconSizes = { width: sizes.base, height: sizes.base };
|
|
@@ -22,7 +22,7 @@ const CopyToClipboard = ({ className, text, onCopy }) => {
|
|
|
22
22
|
setTimeout(() => setCopied(false), 2500);
|
|
23
23
|
}, [onCopy, text]);
|
|
24
24
|
return (React__default.createElement(Tooltip, { text: copied ? 'Copied!' : 'Copy to clipboard' },
|
|
25
|
-
React__default.createElement(
|
|
25
|
+
React__default.createElement(Action, { variant: "flat", size: "sm", className: buildClassnames([styles.xsAction, className]), "aria-label": `${copied ? 'Copied' : 'Copy'} "${text}" to clipboard`, iconSlot: copied ? (React__default.createElement(SuccessIcon, { color: colors.secondary.green.base, ...iconSizes })) : (React__default.createElement(ClipboardIcon, { color: colors.secondary.blue.base, ...iconSizes })), onClick: handleCopy })));
|
|
26
26
|
};
|
|
27
27
|
|
|
28
28
|
export { CopyToClipboard };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport {
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\n\nimport { ClipboardIcon, SuccessIcon } from '../../icons';\nimport { colors } from '../../theme/modules/colors';\nimport { sizes } from '../../theme/modules/sizes';\nimport { buildClassnames } from '../../utils/buildClassnames';\nimport { Action } from '../Action';\nimport { Tooltip } from '../Tooltip';\nimport styles from './CopyToClipboard.module.scss';\n\nexport interface CopyToClipboardProps {\n className?: string;\n text: string;\n onCopy?: () => void;\n}\n\nconst iconSizes = { width: sizes.base, height: sizes.base };\n\n/**\n * A dynamic button to facilitate copying text to a users' keyboard when clicked.\n */\nexport const CopyToClipboard = ({ className, text, onCopy }: CopyToClipboardProps) => {\n const [copied, setCopied] = React.useState(false);\n\n const handleCopy = useCallback(() => {\n navigator.clipboard.writeText(text);\n if (onCopy) onCopy();\n setCopied(true);\n setTimeout(() => setCopied(false), 2500);\n }, [onCopy, text]);\n\n return (\n <Tooltip text={copied ? 'Copied!' : 'Copy to clipboard'}>\n <Action\n variant=\"flat\"\n size=\"sm\"\n className={buildClassnames([styles.xsAction, className])}\n aria-label={`${copied ? 'Copied' : 'Copy'} \"${text}\" to clipboard`}\n iconSlot={\n copied ? (\n <SuccessIcon color={colors.secondary.green.base} {...iconSizes} />\n ) : (\n <ClipboardIcon color={colors.secondary.blue.base} {...iconSizes} />\n )\n }\n onClick={handleCopy}\n />\n </Tooltip>\n );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;AAgBA,MAAM,SAAS,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,CAAC,IAAI,EAAE;AAE3D;;AAEG;AACI,MAAM,eAAe,GAAG,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,EAAwB,KAAI;AACnF,IAAA,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAGA,cAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;AAEjD,IAAA,MAAM,UAAU,GAAG,WAAW,CAAC,MAAK;AAClC,QAAA,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,IAAI,CAAC;AACnC,QAAA,IAAI,MAAM;AAAE,YAAA,MAAM,EAAE;QACpB,SAAS,CAAC,IAAI,CAAC;QACf,UAAU,CAAC,MAAM,SAAS,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC;AAC1C,IAAA,CAAC,EAAE,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;AAElB,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,OAAO,EAAA,EAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG,mBAAmB,EAAA;AACrD,QAAAA,cAAA,CAAA,aAAA,CAAC,MAAM,EAAA,EACL,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,IAAI,EACT,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,QAAQ,EAAE,SAAS,CAAC,CAAC,gBAC5C,CAAA,EAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAA,EAAA,EAAK,IAAI,CAAA,cAAA,CAAgB,EAClE,QAAQ,EACN,MAAM,IACJA,cAAA,CAAA,aAAA,CAAC,WAAW,EAAA,EAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,KAElEA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EAAC,KAAK,EAAE,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,EAAA,GAAM,SAAS,EAAA,CAAI,CACpE,EAEH,OAAO,EAAE,UAAU,EAAA,CACnB,CACM;AAEd;;;;"}
|
|
@@ -2,8 +2,8 @@
|
|
|
2
2
|
|
|
3
3
|
var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
|
|
4
4
|
|
|
5
|
-
___$insertStyle(".
|
|
6
|
-
var styles = {"
|
|
5
|
+
___$insertStyle("._xsAction_4p8bg_1 {\n padding: 1px;\n height: unset;\n}\n._xsAction_4p8bg_1 span {\n height: var(--sizes-base);\n width: var(--sizes-base);\n top: unset;\n}");
|
|
6
|
+
var styles = {"xsAction":"_xsAction_4p8bg_1"};
|
|
7
7
|
|
|
8
8
|
module.exports = styles;
|
|
9
9
|
//# sourceMappingURL=CopyToClipboard.module.scss.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.module.scss.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.module.scss.cjs","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".xsAction {\n padding: 1px;\n height: unset;\n\n span {\n height: var(--sizes-base);\n width: var(--sizes-base);\n top: unset;\n }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,oKAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import insertStyle from '../../_virtual/____insertStyle.js';
|
|
2
2
|
|
|
3
|
-
insertStyle(".
|
|
4
|
-
var styles = {"
|
|
3
|
+
insertStyle("._xsAction_4p8bg_1 {\n padding: 1px;\n height: unset;\n}\n._xsAction_4p8bg_1 span {\n height: var(--sizes-base);\n width: var(--sizes-base);\n top: unset;\n}");
|
|
4
|
+
var styles = {"xsAction":"_xsAction_4p8bg_1"};
|
|
5
5
|
|
|
6
6
|
export { styles as default };
|
|
7
7
|
//# sourceMappingURL=CopyToClipboard.module.scss.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyToClipboard.module.scss.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".
|
|
1
|
+
{"version":3,"file":"CopyToClipboard.module.scss.js","sources":["../../../src/components/CopyToClipboard/CopyToClipboard.module.scss"],"sourcesContent":[".xsAction {\n padding: 1px;\n height: unset;\n\n span {\n height: var(--sizes-base);\n width: var(--sizes-base);\n top: unset;\n }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,oKAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA;;;;"}
|