@coveord/plasma-mantine 52.0.0 → 52.1.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.
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "CopyToClipboard", {
8
8
  return CopyToClipboard;
9
9
  }
10
10
  });
11
- var _interopRequireDefault = require("@swc/helpers/lib/_interop_require_default.js").default;
11
+ var _objectSpread = require("@swc/helpers/lib/_object_spread.js").default;
12
+ var _objectWithoutProperties = require("@swc/helpers/lib/_object_without_properties.js").default;
12
13
  var _jsxRuntime = require("react/jsx-runtime");
13
- var _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
14
14
  var _plasmaReactIcons = require("@coveord/plasma-react-icons");
15
15
  var _core = require("@mantine/core");
16
16
  var useStyles = (0, _core.createStyles)(function(theme) {
@@ -21,40 +21,43 @@ var useStyles = (0, _core.createStyles)(function(theme) {
21
21
  };
22
22
  });
23
23
  var CopyToClipboardButton = function(param) {
24
- var value = param.value;
25
- return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.CopyButton, {
24
+ var value = param.value, onCopy = param.onCopy;
25
+ /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_core.CopyButton, {
26
26
  value: value,
27
27
  timeout: 2000,
28
28
  children: function(param) {
29
29
  var copied = param.copied, copy = param.copy;
30
- return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.Tooltip, {
30
+ /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_core.Tooltip, {
31
31
  label: copied ? "Copied" : "Copy",
32
- withArrow: true,
33
- position: "top",
34
32
  children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.ActionIcon, {
35
- color: copied ? "teal" : "gray",
36
- onClick: copy,
37
- children: copied ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CheckSize24Px, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CopySize24Px, {})
33
+ color: copied ? "success" : "gray",
34
+ onClick: function() {
35
+ copy();
36
+ onCopy === null || onCopy === void 0 ? void 0 : onCopy();
37
+ },
38
+ children: copied ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CheckSize16Px, {
39
+ height: 16
40
+ }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_plasmaReactIcons.CopySize16Px, {
41
+ height: 16
42
+ })
38
43
  })
39
44
  });
40
45
  }
41
46
  });
42
47
  };
43
- var CopyToClipboard = function(param) {
44
- var value = param.value, withLabel = param.withLabel;
48
+ var CopyToClipboard = function(_param) {
49
+ var withLabel = _param.withLabel, others = _objectWithoutProperties(_param, [
50
+ "withLabel"
51
+ ]);
45
52
  var classes = useStyles().classes;
46
53
  return withLabel ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_core.TextInput, {
47
54
  classNames: {
48
55
  input: classes.input
49
56
  },
50
- value: value,
57
+ value: others.value,
51
58
  readOnly: true,
52
- rightSection: /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, {
53
- value: value
54
- })
55
- }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, {
56
- value: value
57
- });
59
+ rightSection: /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, _objectSpread({}, others))
60
+ }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(CopyToClipboardButton, _objectSpread({}, others));
58
61
  };
59
62
 
60
63
  //# sourceMappingURL=CopyToClipboard.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React from 'react';\n\nimport {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';\nimport {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n input: {\n color: theme.colors.gray[7],\n },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"top\">\n <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>\n {copied ? <CheckSize24Px /> : <CopySize24Px />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {\n const {classes} = useStyles();\n\n return withLabel ? (\n <TextInput\n classNames={{\n input: classes.input,\n }}\n value={value}\n readOnly\n rightSection={<CopyToClipboardButton value={value} />}\n />\n ) : (\n <CopyToClipboardButton value={value} />\n );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","CopyButton","timeout","copied","copy","Tooltip","label","withArrow","position","ActionIcon","onClick","CheckSize24Px","CopySize24Px","withLabel","classes","TextInput","classNames","readOnly","rightSection"],"mappings":";;;;+BAoCaA;;;eAAAA;;;;;0DApCK;gCAEwB;oBAC6B;AAevE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAAkE;QAAEC,cAAAA;yBACtE,qBAACC,gBAAU;QAACD,OAAOA;QAAOE,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW,MAAM;gBAAEI,SAAS;gBAACC,UAAS;0BAC3D,cAAA,qBAACC,gBAAU;oBAACb,OAAOO,SAAS,SAAS,MAAM;oBAAEO,SAASN;8BACjDD,uBAAS,qBAACQ,+BAAa,sBAAM,qBAACC,8BAAY,KAAG;;;;;;AAO3D,IAAMrB,kBAAiE,gBAAwB;QAAtBS,cAAAA,OAAOa,kBAAAA;IACnF,IAAM,AAACC,UAAWtB,YAAXsB;IAEP,OAAOD,0BACH,qBAACE,eAAS;QACNC,YAAY;YACRrB,OAAOmB,QAAQnB,KAAK;QACxB;QACAK,OAAOA;QACPiB,QAAQ;QACRC,4BAAc,qBAACnB;YAAsBC,OAAOA;;uBAGhD,qBAACD;QAAsBC,OAAOA;MACjC;AACL"}
1
+ {"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n /**\n * Called each time the value is copied to the clipboard\n */\n onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n input: {\n color: theme.colors.gray[7],\n },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'}>\n <ActionIcon\n color={copied ? 'success' : 'gray'}\n onClick={() => {\n copy();\n onCopy?.();\n }}\n >\n {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n const {classes} = useStyles();\n\n return withLabel ? (\n <TextInput\n classNames={{\n input: classes.input,\n }}\n value={others.value}\n readOnly\n rightSection={<CopyToClipboardButton {...others} />}\n />\n ) : (\n <CopyToClipboardButton {...others} />\n );\n};\n"],"names":["CopyToClipboard","useStyles","createStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","CopyButton","timeout","copied","copy","Tooltip","label","ActionIcon","onClick","CheckSize16Px","height","CopySize16Px","withLabel","others","classes","TextInput","classNames","readOnly","rightSection"],"mappings":";;;;+BA4CaA;;;eAAAA;;;;;;gCA5C6B;oBAC6B;AAmBvE,IAAMC,YAAYC,IAAAA,kBAAY,EAAC,SAACC;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;kBACrG,OAAA,qBAACC,gBAAU;QAACF,OAAOA;QAAOG,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;0BACP,OAAA,qBAACC,aAAO;gBAACC,OAAOH,SAAS,WAAW,MAAM;0BACtC,cAAA,qBAACI,gBAAU;oBACPZ,OAAOQ,SAAS,YAAY,MAAM;oBAClCK,SAAS,WAAM;wBACXJ;wBACAJ,mBAAAA,oBAAAA,KAAAA,IAAAA;oBACJ;8BAECG,uBAAS,qBAACM,+BAAa;wBAACC,QAAQ;uCAAS,qBAACC,8BAAY;wBAACD,QAAQ;sBAAM;;;;;;AAOnF,IAAMpB,kBAAiE,iBAA4B;QAA1BsB,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWvB,YAAXuB;IAEP,OAAOF,0BACH,qBAACG,eAAS;QACNC,YAAY;YACRtB,OAAOoB,QAAQpB,KAAK;QACxB;QACAK,OAAOc,OAAOd,KAAK;QACnBkB,QAAQ;QACRC,4BAAc,qBAACpB,yCAA0Be;uBAG7C,qBAACf,yCAA0Be,QAC9B;AACL"}
@@ -197,7 +197,8 @@ var plasmaTheme = {
197
197
  color: "navy",
198
198
  withArrow: true,
199
199
  withinPortal: true,
200
- multiline: true
200
+ multiline: true,
201
+ zIndex: 10000
201
202
  }
202
203
  },
203
204
  Loader: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","getSize","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","rem","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","zIndex","Segmented","control"],"mappings":"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"}
1
+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n zIndex: 10000,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["plasmaTheme","colorScheme","fontFamily","black","color","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","PlasmaColors","components","Alert","defaultProps","icon","InfoSize24Px","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","getSize","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","rem","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","Segmented","control"],"mappings":"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"}
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  export interface CopyToClipboardProps {
3
3
  /**
4
4
  * The value to be copied to the clipboard.
@@ -10,6 +10,10 @@ export interface CopyToClipboardProps {
10
10
  * @default false
11
11
  */
12
12
  withLabel?: boolean;
13
+ /**
14
+ * Called each time the value is copied to the clipboard
15
+ */
16
+ onCopy?: () => void;
13
17
  }
14
18
  export declare const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps>;
15
19
  //# sourceMappingURL=CopyToClipboard.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAoBD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAezE,CAAC"}
1
+ {"version":3,"file":"CopyToClipboard.d.ts","sourceRoot":"","sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,oBAAoB;IACjC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AA0BD,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,iBAAiB,CAAC,oBAAoB,CAezE,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,oBAAoB,EAAyB,MAAM,eAAe,CAAC;AAIpF,eAAO,MAAM,WAAW,EAAE,oBAwQzB,CAAC"}
1
+ {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,oBAAoB,EAAyB,MAAM,eAAe,CAAC;AAIpF,eAAO,MAAM,WAAW,EAAE,oBAyQzB,CAAC"}
@@ -1,7 +1,8 @@
1
+ import _object_spread from "@swc/helpers/src/_object_spread.mjs";
2
+ import _object_without_properties from "@swc/helpers/src/_object_without_properties.mjs";
1
3
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import React from "react";
3
- import { CheckSize24Px, CopySize24Px } from "@coveord/plasma-react-icons";
4
- import { TextInput, CopyButton, Tooltip, ActionIcon, createStyles } from "@mantine/core";
4
+ import { CheckSize16Px, CopySize16Px } from "@coveord/plasma-react-icons";
5
+ import { ActionIcon, CopyButton, createStyles, TextInput, Tooltip } from "@mantine/core";
5
6
  var useStyles = createStyles(function(theme) {
6
7
  return {
7
8
  input: {
@@ -10,40 +11,43 @@ var useStyles = createStyles(function(theme) {
10
11
  };
11
12
  });
12
13
  var CopyToClipboardButton = function(param) {
13
- var value = param.value;
14
- return /*#__PURE__*/ _jsx(CopyButton, {
14
+ var value = param.value, onCopy = param.onCopy;
15
+ /*#__PURE__*/ return _jsx(CopyButton, {
15
16
  value: value,
16
17
  timeout: 2000,
17
18
  children: function(param) {
18
19
  var copied = param.copied, copy = param.copy;
19
- return /*#__PURE__*/ _jsx(Tooltip, {
20
+ /*#__PURE__*/ return _jsx(Tooltip, {
20
21
  label: copied ? "Copied" : "Copy",
21
- withArrow: true,
22
- position: "top",
23
22
  children: /*#__PURE__*/ _jsx(ActionIcon, {
24
- color: copied ? "teal" : "gray",
25
- onClick: copy,
26
- children: copied ? /*#__PURE__*/ _jsx(CheckSize24Px, {}) : /*#__PURE__*/ _jsx(CopySize24Px, {})
23
+ color: copied ? "success" : "gray",
24
+ onClick: function() {
25
+ copy();
26
+ onCopy === null || onCopy === void 0 ? void 0 : onCopy();
27
+ },
28
+ children: copied ? /*#__PURE__*/ _jsx(CheckSize16Px, {
29
+ height: 16
30
+ }) : /*#__PURE__*/ _jsx(CopySize16Px, {
31
+ height: 16
32
+ })
27
33
  })
28
34
  });
29
35
  }
30
36
  });
31
37
  };
32
- export var CopyToClipboard = function(param) {
33
- var value = param.value, withLabel = param.withLabel;
38
+ export var CopyToClipboard = function(_param) {
39
+ var withLabel = _param.withLabel, others = _object_without_properties(_param, [
40
+ "withLabel"
41
+ ]);
34
42
  var classes = useStyles().classes;
35
43
  return withLabel ? /*#__PURE__*/ _jsx(TextInput, {
36
44
  classNames: {
37
45
  input: classes.input
38
46
  },
39
- value: value,
47
+ value: others.value,
40
48
  readOnly: true,
41
- rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton, {
42
- value: value
43
- })
44
- }) : /*#__PURE__*/ _jsx(CopyToClipboardButton, {
45
- value: value
46
- });
49
+ rightSection: /*#__PURE__*/ _jsx(CopyToClipboardButton, _object_spread({}, others))
50
+ }) : /*#__PURE__*/ _jsx(CopyToClipboardButton, _object_spread({}, others));
47
51
  };
48
52
 
49
53
  //# sourceMappingURL=CopyToClipboard.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import React from 'react';\n\nimport {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';\nimport {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n}\n\nconst useStyles = createStyles((theme) => ({\n input: {\n color: theme.colors.gray[7],\n },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position=\"top\">\n <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>\n {copied ? <CheckSize24Px /> : <CopySize24Px />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {\n const {classes} = useStyles();\n\n return withLabel ? (\n <TextInput\n classNames={{\n input: classes.input,\n }}\n value={value}\n readOnly\n rightSection={<CopyToClipboardButton value={value} />}\n />\n ) : (\n <CopyToClipboardButton value={value} />\n );\n};\n"],"names":["React","CheckSize24Px","CopySize24Px","TextInput","CopyButton","Tooltip","ActionIcon","createStyles","useStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","timeout","copied","copy","label","withArrow","position","onClick","CopyToClipboard","withLabel","classes","classNames","readOnly","rightSection"],"mappings":";AAAA,OAAOA,WAAW,QAAQ;AAE1B,SAAQC,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,SAAS,EAAEC,UAAU,EAAEC,OAAO,EAAEC,UAAU,EAAEC,YAAY,QAAO,gBAAgB;AAevF,IAAMC,YAAYD,aAAa,SAACE;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAAkE;QAAEC,cAAAA;yBACtE,KAACX;QAAWW,OAAOA;QAAOC,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;iCACP,KAACb;gBAAQc,OAAOF,SAAS,WAAW,MAAM;gBAAEG,SAAS;gBAACC,UAAS;0BAC3D,cAAA,KAACf;oBAAWK,OAAOM,SAAS,SAAS,MAAM;oBAAEK,SAASJ;8BACjDD,uBAAS,KAAChB,mCAAmB,KAACC,iBAAe;;;;;;AAOlE,OAAO,IAAMqB,kBAAiE,gBAAwB;QAAtBR,cAAAA,OAAOS,kBAAAA;IACnF,IAAM,AAACC,UAAWjB,YAAXiB;IAEP,OAAOD,0BACH,KAACrB;QACGuB,YAAY;YACRhB,OAAOe,QAAQf,KAAK;QACxB;QACAK,OAAOA;QACPY,QAAQ;QACRC,4BAAc,KAACd;YAAsBC,OAAOA;;uBAGhD,KAACD;QAAsBC,OAAOA;MACjC;AACL,EAAE"}
1
+ {"version":3,"sources":["../../../../src/components/copyToClipboard/CopyToClipboard.tsx"],"sourcesContent":["import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';\nimport {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';\n\nexport interface CopyToClipboardProps {\n /**\n * The value to be copied to the clipboard.\n */\n value: string;\n /**\n * Whether to display the string to be copied alongside the button.\n *\n * @default false\n */\n withLabel?: boolean;\n /**\n * Called each time the value is copied to the clipboard\n */\n onCopy?: () => void;\n}\n\nconst useStyles = createStyles((theme) => ({\n input: {\n color: theme.colors.gray[7],\n },\n}));\n\nconst CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (\n <CopyButton value={value} timeout={2000}>\n {({copied, copy}) => (\n <Tooltip label={copied ? 'Copied' : 'Copy'}>\n <ActionIcon\n color={copied ? 'success' : 'gray'}\n onClick={() => {\n copy();\n onCopy?.();\n }}\n >\n {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}\n </ActionIcon>\n </Tooltip>\n )}\n </CopyButton>\n);\n\nexport const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {\n const {classes} = useStyles();\n\n return withLabel ? (\n <TextInput\n classNames={{\n input: classes.input,\n }}\n value={others.value}\n readOnly\n rightSection={<CopyToClipboardButton {...others} />}\n />\n ) : (\n <CopyToClipboardButton {...others} />\n );\n};\n"],"names":["CheckSize16Px","CopySize16Px","ActionIcon","CopyButton","createStyles","TextInput","Tooltip","useStyles","theme","input","color","colors","gray","CopyToClipboardButton","value","onCopy","timeout","copied","copy","label","onClick","height","CopyToClipboard","withLabel","others","classes","classNames","readOnly","rightSection"],"mappings":";;;AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,UAAU,EAAEC,UAAU,EAAEC,YAAY,EAAEC,SAAS,EAAEC,OAAO,QAAO,gBAAgB;AAmBvF,IAAMC,YAAYH,aAAa,SAACI;WAAW;QACvCC,OAAO;YACHC,OAAOF,MAAMG,MAAM,CAACC,IAAI,CAAC,EAAE;QAC/B;IACJ;;AAEA,IAAMC,wBAA0F;QAAEC,cAAAA,OAAOC,eAAAA;kBACrG,OAAA,KAACZ;QAAWW,OAAOA;QAAOE,SAAS;kBAC9B;gBAAEC,eAAAA,QAAQC,aAAAA;0BACP,OAAA,KAACZ;gBAAQa,OAAOF,SAAS,WAAW,MAAM;0BACtC,cAAA,KAACf;oBACGQ,OAAOO,SAAS,YAAY,MAAM;oBAClCG,SAAS,WAAM;wBACXF;wBACAH,mBAAAA,oBAAAA,KAAAA,IAAAA;oBACJ;8BAECE,uBAAS,KAACjB;wBAAcqB,QAAQ;uCAAS,KAACpB;wBAAaoB,QAAQ;sBAAM;;;;;;AAO1F,OAAO,IAAMC,kBAAiE,iBAA4B;QAA1BC,mBAAAA,WAAcC;QAAdD;;IAC5E,IAAM,AAACE,UAAWlB,YAAXkB;IAEP,OAAOF,0BACH,KAAClB;QACGqB,YAAY;YACRjB,OAAOgB,QAAQhB,KAAK;QACxB;QACAK,OAAOU,OAAOV,KAAK;QACnBa,QAAQ;QACRC,4BAAc,KAACf,0CAA0BW;uBAG7C,KAACX,0CAA0BW,QAC9B;AACL,EAAE"}
@@ -187,7 +187,8 @@ export var plasmaTheme = {
187
187
  color: "navy",
188
188
  withArrow: true,
189
189
  withinPortal: true,
190
- multiline: true
190
+ multiline: true,
191
+ zIndex: 10000
191
192
  }
192
193
  },
193
194
  Loader: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","zIndex","Segmented","control"],"mappings":";;;AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,KAAK,QAAO,yBAAyB;AAC7C,SAAQC,OAAO,EAA2CC,GAAG,QAAO,gBAAgB;AAEpF,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;IAC7C,2HAA2H;IAC3HC,aAAa;IACbC,YAAY;IACZC,OAAOP,MAAMQ,OAAO,CAACC,IAAI,CAAC,EAAE;IAC5BC,eAAe;IACfC,YAAY;IACZC,SAAS;QACLC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAC,cAAc;IACdC,UAAU;QACNb,YAAY;QACZc,YAAY;QACZC,OAAO;YACHC,IAAI;gBAACC,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;YAC7DK,IAAI;gBAACF,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;YAC7DM,IAAI;gBAACH,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;YAC7DO,IAAI;gBAACJ,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;YAC7DQ,IAAI;gBAACL,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;YAC7DS,IAAI;gBAACN,UAAU;gBAAQZ,YAAYa;gBAAWJ,YAAY;YAAG;QACjE;IACJ;IACAU,SAAS;QACLjB,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;QACJC,IAAI;IACR;IACAc,QAAQ5B;IACR6B,YAAY;QACRC,OAAO;YACHC,cAAc;gBACVC,oBAAM,KAACpC;oBAAaqC,QAAQ;;gBAC5BpC,OAAO;YACX;YACAqC,QAAQ;gBACJC,OAAO;oBACHlB,YAAY;gBAChB;YACJ;QACJ;QACAmB,OAAO;YACHF,QAAQ;gBACJG,MAAM;oBACF,2BAA2B;wBAACC,eAAe;oBAAS;gBACxD;YACJ;QACJ;QACAC,MAAM;YACFR,cAAc;gBACVS,QAAQ;YACZ;YACAN,QAAQ,SAACO;oBAAO,0CAAKC,cAAAA;uBAAW;oBAC5BL,MAAM;wBACFjB,UAAUtB,QAAQ;4BAAC4C,MAAMA,iBAAAA,kBAAAA,OAAQ,IAAI;4BAAExB,OAAOuB,MAAME,SAAS;wBAAA;oBACjE;gBACJ;;QACJ;QACAC,QAAQ;YACJV,QAAQ;uBAAO;oBACXG,MAAM;wBACFpB,YAAY;oBAChB;gBACJ;;YACA4B,UAAU;gBACNC,SAAS;2BAAO;wBACZT,MAAM;4BACFU,iBAAiB;wBACrB;oBACJ;;YACJ;QACJ;QACAC,OAAO;YACHd,QAAQ,SAACO;oBAAQQ,mBAAAA,YAAcP,cAAAA;uBAAW;oBACtCQ,SAAS;wBACLC,MAAMF,aACA,aACA,AAAC,OASE,OATInD,QAAQ;4BACX4C,MAAAA;4BACAxB,OAAO;gCACHR,IAAIX,IAAI;gCACRY,IAAIZ,IAAI;gCACRa,IAAIb,IAAI;gCACRc,IAAId,IAAI;gCACRe,IAAIf,IAAI;4BACZ;wBACJ,GAAI;wBACVqD,UAAU;oBACd;oBACAjB,OAAO;wBACHkB,OAAO;wBACPjC,UAAUqB,MAAMzB,QAAQ,CAACE,KAAK,CAACK,EAAE,CAACH,QAAQ;wBAC1CZ,YAAYiC,MAAMzB,QAAQ,CAACE,KAAK,CAACK,EAAE,CAACf,UAAU;wBAC9CS,YAAY;oBAChB;gBACJ;;YACAc,cAAc;gBACVuB,cAAc;oBACVzD,OAAOA,MAAMQ,OAAO,CAACkD,IAAI,CAAC,EAAE;oBAC5BC,SAAS;gBACb;YACJ;QACJ;QACAC,cAAc;YACV1B,cAAc;gBACV2B,cAAc,KAAK;YACvB;YACAxB,QAAQ,SAACO;uBAAW;oBAChBkB,OAAO;wBACHC,cAAcnB,MAAMhC,OAAO,CAACC,EAAE;oBAClC;oBACAmD,aAAa;wBACTzC,UAAUqB,MAAME,SAAS,CAAChC,EAAE;wBAC5Bd,OAAO4C,MAAMb,MAAM,CAACtB,IAAI,CAAC,EAAE;wBAC3BsD,cAAcnB,MAAMhC,OAAO,CAACC,EAAE;oBAClC;oBACAoD,SAAS;wBACLjE,OAAO4C,MAAMb,MAAM,CAACmC,GAAG,CAAC,EAAE;wBAC1BC,aAAavB,MAAMb,MAAM,CAACmC,GAAG,CAAC,EAAE;oBACpC;oBACAE,OAAO;wBACHpE,OAAO4C,MAAMb,MAAM,CAACmC,GAAG,CAAC,EAAE;oBAC9B;gBACJ;;QACJ;QACAG,WAAW;YACPnC,cAAc;gBACVoC,QAAQ;YACZ;QACJ;QACAC,SAAS;YACLrC,cAAc;gBACVlC,OAAO;gBACPwE,WAAW,IAAI;gBACfC,cAAc,IAAI;gBAClBC,WAAW,IAAI;YACnB;QACJ;QACAC,QAAQ;YACJzC,cAAc;gBACV0C,SAAS;gBACT5E,OAAO;YACX;QACJ;QACA6E,iBAAiB;YACbxC,QAAQ;gBACJyC,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;YACJ9C,cAAc;gBACVlC,OAAO;YACX;YACAqC,QAAQ,SAACO;uBAAW;oBAChBJ,MAAM,mBACCI,MAAMqC,EAAE,CAACC,KAAK,CAAC;wBACdC,gBAAgB;wBAChBnF,OAAO4C,MAAMb,MAAM,CAACqD,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;YACNnD,cAAc;gBACVoC,QAAQ;YACZ;YACAjC,QAAQ,SAACO;uBAAW;oBAChBkB,OAAO;wBACHvC,UAAUqB,MAAME,SAAS,CAAChC,EAAE;wBAC5BM,YAAY;oBAChB;gBACJ;;QACJ;QACAkE,MAAM;YACFjD,QAAQ;uBAAO;oBACXG,MAAM;wBACF+C,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;YACHnD,QAAQ;gBACJoD,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;YACL1D,cAAc;gBACV2D,QAAQ;gBACRrB,WAAW,IAAI;YACnB;QACJ;QACAsB,OAAO;YACHzD,QAAQ;gBACJG,MAAM;oBACFuD,eAAe;oBACfC,SAAS;oBACT5E,YAAY;gBAChB;YACJ;QACJ;QACA6E,aAAa;YACT/D,cAAc;gBACVW,MAAM;gBACNqD,YAAY,KAAK;YACrB;QACJ;QACAC,UAAU;YACNjE,cAAc;gBACVkE,IAAI;YACR;QACJ;QACAC,cAAc;YACVhE,QAAQ,SAACO;oBAAQ5C,AAAOsG,yBAAPtG;oBAaF4C;gBAbmD,OAAA;oBAC9DJ,MAAM;wBACF2B,aAAavB,MAAMb,MAAM,CAACtB,IAAI,CAAC,EAAE;wBACjCyC,iBAAiBN,MAAMb,MAAM,CAACtB,IAAI,CAAC,EAAE;wBACrC8F,WAAW3D,MAAMd,OAAO,CAACd,EAAE;wBAC3BgF,SAASpD,MAAMhC,OAAO,CAACE,EAAE;wBACzB,qBAAqB;4BACjB0F,aAAa5D,MAAMhC,OAAO,CAACE,EAAE;wBACjC;oBACJ;oBACAqB,MAAM;wBACFe,iBAAiB;wBACjBuD,aAAa7D,MAAMhC,OAAO,CAACE,EAAE;wBAC7Bd,KAAK,EAAE4C,CAAAA,gBAAAA,MAAMb,MAAM,cAAZa,2BAAAA,KAAAA,IAAAA,aAAc,CAAC0D,iBAAiB,CAAC,EAAE;oBAC9C;oBACAI,aAAa;wBACTC,QAAQ/D,MAAMhC,OAAO,CAACC,EAAE;wBACxBb,OAAO4C,MAAMb,MAAM,CAACtB,IAAI,CAAC,EAAE;oBAC/B;gBACJ;;YACAyB,cAAc;gBACVC,oBAAM,KAACpC;oBAAaqC,QAAQ;;gBAC5BpC,OAAO;YACX;QACJ;QACA4G,UAAU;YACNvE,QAAQ;gBACJwE,SAAS;oBACL,aAAa;wBAACC,QAAQ;oBAAO;oBAC7B,YAAY;wBAACA,QAAQ;oBAAO;gBAChC;YACJ;QACJ;QACAC,WAAW;YACP1E,QAAQ;gBACJ2E,SAAS;oBACLF,QAAQ;gBACZ;YACJ;QACJ;IACJ;AACJ,EAAE"}
1
+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {getSize, MantineThemeOverride, NotificationProps, rem} from '@mantine/core';\n\nimport {PlasmaColors} from './PlasmaColors';\n\nexport const plasmaTheme: MantineThemeOverride = {\n // These are overrides over https://github.com/mantinedev/mantine/blob/master/src/mantine-styles/src/theme/default-theme.ts\n colorScheme: 'light',\n fontFamily: 'canada-type-gibson, sans-serif',\n black: color.primary.gray[9],\n defaultRadius: 8,\n lineHeight: 1.5,\n spacing: {\n xs: '8px',\n sm: '16px',\n md: '24px',\n lg: '32px',\n xl: '40px',\n },\n primaryColor: 'action',\n headings: {\n fontFamily: 'canada-type-gibson, sans-serif',\n fontWeight: 500,\n sizes: {\n h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},\n h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},\n h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},\n h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},\n h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},\n h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},\n },\n },\n shadows: {\n xs: '0px 1px 0px rgba(4, 8, 31, 0.08)',\n sm: '0px 2px 4px rgba(4, 8, 31, 0.12)',\n md: '0px 4px 8px rgba(4, 8, 31, 0.08)',\n lg: '0px 8px 16px rgba(7, 12, 41, 0.06)',\n xl: '0px 16px 24px rgba(4, 8, 31, 0.06)',\n },\n colors: PlasmaColors,\n components: {\n Alert: {\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'navy',\n },\n styles: {\n title: {\n fontWeight: 500,\n },\n },\n },\n Title: {\n styles: {\n root: {\n '&:is(h1,h2,h3,h4,h5,h6)': {letterSpacing: '0.011em'},\n },\n },\n },\n Text: {\n defaultProps: {\n weight: 300,\n },\n styles: (theme, {}, {size}) => ({\n root: {\n fontSize: getSize({size: size ?? 'sm', sizes: theme.fontSizes}),\n },\n }),\n },\n Button: {\n styles: () => ({\n root: {\n fontWeight: 400,\n },\n }),\n variants: {\n outline: () => ({\n root: {\n backgroundColor: 'white',\n },\n }),\n },\n },\n Modal: {\n styles: (theme, {fullScreen}, {size}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(440),\n sm: rem(550),\n md: rem(800),\n lg: rem(1334),\n xl: rem('85%'),\n },\n })}`,\n overflow: 'auto',\n },\n title: {\n width: '100%',\n fontSize: theme.headings.sizes.h3.fontSize,\n lineHeight: theme.headings.sizes.h3.lineHeight,\n fontWeight: 500,\n },\n }),\n defaultProps: {\n overlayProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\n },\n },\n },\n InputWrapper: {\n defaultProps: {\n withAsterisk: false,\n },\n styles: (theme) => ({\n label: {\n marginBottom: theme.spacing.xs,\n },\n description: {\n fontSize: theme.fontSizes.sm,\n color: theme.colors.gray[7],\n marginBottom: theme.spacing.xs,\n },\n invalid: {\n color: theme.colors.red[9],\n borderColor: theme.colors.red[6],\n },\n error: {\n color: theme.colors.red[9],\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n withArrow: true,\n withinPortal: true,\n multiline: true,\n zIndex: 10000,\n },\n },\n Loader: {\n defaultProps: {\n variant: 'dots',\n color: 'action',\n },\n },\n DateRangePicker: {\n styles: {\n cell: {\n textAlign: 'center',\n },\n },\n },\n Anchor: {\n defaultProps: {\n color: 'action.6',\n },\n styles: (theme) => ({\n root: {\n ...theme.fn.hover({\n textDecoration: 'underline',\n color: theme.colors.action[8],\n }),\n },\n }),\n },\n Checkbox: {\n defaultProps: {\n radius: 'sm',\n },\n styles: (theme) => ({\n label: {\n fontSize: theme.fontSizes.sm,\n fontWeight: 300,\n },\n }),\n },\n List: {\n styles: () => ({\n root: {\n listStyleType: 'disc',\n },\n }),\n },\n Radio: {\n styles: {\n labelWrapper: {\n display: 'flex',\n alignItems: 'flex-start',\n },\n },\n },\n Popover: {\n defaultProps: {\n shadow: 'md',\n withArrow: true,\n },\n },\n Badge: {\n styles: {\n root: {\n textTransform: 'none',\n padding: '4px 8px',\n fontWeight: 500,\n },\n },\n },\n ColorSwatch: {\n defaultProps: {\n size: 8,\n withShadow: false,\n },\n },\n MenuItem: {\n defaultProps: {\n fw: 300,\n },\n },\n Notification: {\n styles: (theme, {color: notificationType}: NotificationProps) => ({\n root: {\n borderColor: theme.colors.gray[3],\n backgroundColor: theme.colors.gray[0],\n boxShadow: theme.shadows.lg,\n padding: theme.spacing.sm,\n '&[data-with-icon]': {\n paddingLeft: theme.spacing.sm,\n },\n },\n icon: {\n backgroundColor: 'transparent',\n marginRight: theme.spacing.sm,\n color: theme.colors?.[notificationType][6],\n },\n closeButton: {\n margin: theme.spacing.xs,\n color: theme.colors.gray[5],\n },\n }),\n defaultProps: {\n icon: <InfoSize24Px height={24} />,\n color: 'info',\n },\n },\n Skeleton: {\n styles: {\n visible: {\n '&::before': {zIndex: 'unset'},\n '&::after': {zIndex: 'unset'},\n },\n },\n },\n Segmented: {\n styles: {\n control: {\n zIndex: 'unset',\n },\n },\n },\n },\n};\n"],"names":["InfoSize24Px","color","getSize","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","primaryColor","headings","fontWeight","sizes","h1","fontSize","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","theme","size","fontSizes","Button","variants","outline","backgroundColor","Modal","fullScreen","content","flex","overflow","width","overlayProps","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","variant","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","padding","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","Segmented","control"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coveord/plasma-mantine",
3
- "version": "52.0.0",
3
+ "version": "52.1.0",
4
4
  "description": "A Plasma flavoured Mantine theme",
5
5
  "keywords": [
6
6
  "plasma",
@@ -25,7 +25,7 @@
25
25
  "lodash.defaultsdeep": "4.6.1",
26
26
  "monaco-editor": "0.34.0",
27
27
  "react-beautiful-dnd": "13.1.1",
28
- "@coveord/plasma-react-icons": "52.0.0",
28
+ "@coveord/plasma-react-icons": "52.1.0",
29
29
  "@coveord/plasma-tokens": "52.0.0"
30
30
  },
31
31
  "devDependencies": {
@@ -47,9 +47,9 @@
47
47
  "@types/jest": "29.1.2",
48
48
  "@types/lodash.debounce": "^4.0.7",
49
49
  "@types/lodash.defaultsdeep": "4.6.7",
50
- "@types/react": "18.0.21",
50
+ "@types/react": "18.0.33",
51
51
  "@types/react-beautiful-dnd": "13.1.4",
52
- "@types/react-dom": "18.0.6",
52
+ "@types/react-dom": "18.0.11",
53
53
  "@types/testing-library__jest-dom": "5.14.5",
54
54
  "csstype": "3.1.2",
55
55
  "embla-carousel-react": "7.1.0",
@@ -1,7 +1,5 @@
1
- import React from 'react';
2
-
3
- import {CheckSize24Px, CopySize24Px} from '@coveord/plasma-react-icons';
4
- import {TextInput, CopyButton, Tooltip, ActionIcon, createStyles} from '@mantine/core';
1
+ import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
2
+ import {ActionIcon, CopyButton, createStyles, TextInput, Tooltip} from '@mantine/core';
5
3
 
6
4
  export interface CopyToClipboardProps {
7
5
  /**
@@ -14,6 +12,10 @@ export interface CopyToClipboardProps {
14
12
  * @default false
15
13
  */
16
14
  withLabel?: boolean;
15
+ /**
16
+ * Called each time the value is copied to the clipboard
17
+ */
18
+ onCopy?: () => void;
17
19
  }
18
20
 
19
21
  const useStyles = createStyles((theme) => ({
@@ -22,19 +24,25 @@ const useStyles = createStyles((theme) => ({
22
24
  },
23
25
  }));
24
26
 
25
- const CopyToClipboardButton: React.FunctionComponent<{value: string}> = ({value}) => (
27
+ const CopyToClipboardButton: React.FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy}) => (
26
28
  <CopyButton value={value} timeout={2000}>
27
29
  {({copied, copy}) => (
28
- <Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="top">
29
- <ActionIcon color={copied ? 'teal' : 'gray'} onClick={copy}>
30
- {copied ? <CheckSize24Px /> : <CopySize24Px />}
30
+ <Tooltip label={copied ? 'Copied' : 'Copy'}>
31
+ <ActionIcon
32
+ color={copied ? 'success' : 'gray'}
33
+ onClick={() => {
34
+ copy();
35
+ onCopy?.();
36
+ }}
37
+ >
38
+ {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
31
39
  </ActionIcon>
32
40
  </Tooltip>
33
41
  )}
34
42
  </CopyButton>
35
43
  );
36
44
 
37
- export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({value, withLabel}) => {
45
+ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({withLabel, ...others}) => {
38
46
  const {classes} = useStyles();
39
47
 
40
48
  return withLabel ? (
@@ -42,11 +50,11 @@ export const CopyToClipboard: React.FunctionComponent<CopyToClipboardProps> = ({
42
50
  classNames={{
43
51
  input: classes.input,
44
52
  }}
45
- value={value}
53
+ value={others.value}
46
54
  readOnly
47
- rightSection={<CopyToClipboardButton value={value} />}
55
+ rightSection={<CopyToClipboardButton {...others} />}
48
56
  />
49
57
  ) : (
50
- <CopyToClipboardButton value={value} />
58
+ <CopyToClipboardButton {...others} />
51
59
  );
52
60
  };
@@ -1,9 +1,9 @@
1
- import {render, screen} from '@test-utils';
1
+ import {render, screen, userEvent} from '@test-utils';
2
2
 
3
3
  import {CopyToClipboard} from '../CopyToClipboard';
4
4
 
5
5
  describe('CopyToClipboard', () => {
6
- it('should display only a button by default', () => {
6
+ it('displays only a button by default', () => {
7
7
  const testValue = 'text value';
8
8
  render(<CopyToClipboard value={testValue} />);
9
9
 
@@ -22,4 +22,14 @@ describe('CopyToClipboard', () => {
22
22
  expect(document.querySelector('input')).toBeInTheDocument();
23
23
  });
24
24
  });
25
+
26
+ it('calls onCopy callback when the users copy the value to the clipboard', async () => {
27
+ const onCopySpy = vi.fn();
28
+ const user = userEvent.setup();
29
+ render(<CopyToClipboard value="whatever" onCopy={onCopySpy} />);
30
+
31
+ await user.click(screen.getByRole('button', {name: /copy/i}));
32
+
33
+ expect(onCopySpy).toHaveBeenCalled();
34
+ });
25
35
  });
@@ -146,6 +146,7 @@ export const plasmaTheme: MantineThemeOverride = {
146
146
  withArrow: true,
147
147
  withinPortal: true,
148
148
  multiline: true,
149
+ zIndex: 10000,
149
150
  },
150
151
  },
151
152
  Loader: {