npm - @coveord/plasma-mantine - Versions diffs - 52.6.0 → 52.7.1 - Mend

@coveord/plasma-mantine 52.6.0 → 52.7.1

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.

Files changed (128) hide show

package/dist/esm/components/table/layouts/RowLayout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/table/layouts/RowLayout.tsx"],"sourcesContent":["import {ListSize16Px} from '@coveord/plasma-react-icons';\nimport {Box, Collapse, createStyles} from '@mantine/core';\nimport {flexRender} from '@tanstack/react-table';\nimport {defaultColumnSizing} from '@tanstack/table-core';\nimport {Fragment} from 'react';\nimport {TableLayout, TableLayoutProps} from '../Table.types';\nimport {TableCollapsibleColumn} from '../TableCollapsibleColumn';\nimport {useTable} from '../TableContext';\nimport {TableLoading} from '../TableLoading';\nimport {Th} from '../Th';\n\ninterface TableStylesParams {\n multiRowSelectionEnabled: boolean;\n disableRowSelection: boolean;\n}\n\nconst useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {\n const rowBackgroundColor =\n theme.colorScheme === 'dark'\n ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)\n : theme.colors[theme.primaryColor][0];\n return {\n headerColumns: {\n '& th:first-of-type > *': {\n paddingLeft: theme.spacing.xl,\n },\n\n '& input[type=checkbox]': {\n backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,\n borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,\n pointerEvents: disableRowSelection ? 'none' : 'auto',\n cursor: disableRowSelection ? 'not-allowed' : 'default',\n\n '& + svg': {\n color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',\n },\n },\n },\n\n rowSelected: {\n backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,\n },\n\n rowUnselectable: {\n '& input[type=checkbox]': {\n backgroundColor: `${theme.colors.gray[2]}`,\n borderColor: `${theme.colors.gray[3]}`,\n pointerEvents: 'none',\n cursor: 'not-allowed',\n\n '&:checked + svg': {\n color: `${theme.colors.gray[5]}`,\n },\n },\n },\n\n rowCollapsibleButtonCell: {\n textAlign: 'right',\n padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,\n },\n\n row: {\n '&:hover': {\n backgroundColor: rowBackgroundColor,\n },\n },\n };\n});\n\nconst RowLayoutHeader = <T,>({table}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n const headers = table.getHeaderGroups().map((headerGroup) => (\n <tr key={headerGroup.id} className={classes.headerColumns}>\n {headerGroup.headers.map((columnHeader) => (\n <Th key={columnHeader.id} header={columnHeader} />\n ))}\n </tr>\n ));\n return <>{headers}</>;\n};\n\nconst RowLayoutBody = <T,>({table, doubleClickAction, getExpandChildren, loading}: TableLayoutProps<T>) => {\n const {multiRowSelectionEnabled, disableRowSelection} = useTable();\n const {classes, cx} = useStyles({disableRowSelection, multiRowSelectionEnabled});\n\n const rows = table.getRowModel().rows.map((row) => {\n const rowChildren = getExpandChildren?.(row.original) ?? null;\n const isSelected = !!row.getIsSelected();\n\n return (\n <Fragment key={row.id}>\n <tr\n onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}\n onDoubleClick={() => doubleClickAction?.(row.original)}\n className={cx(classes.row, {\n [classes.rowSelected]: isSelected,\n [classes.rowUnselectable]: disableRowSelection,\n })}\n aria-selected={isSelected}\n >\n {row.getVisibleCells().map((cell) => {\n const size = cell.column.getSize();\n const width = size !== defaultColumnSizing.size ? size : undefined;\n return (\n <td\n key={cell.id}\n style={{width}}\n className={cx({\n [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,\n })}\n >\n <TableLoading visible={loading}>\n {flexRender(cell.column.columnDef.cell, cell.getContext())}\n </TableLoading>\n </td>\n );\n })}\n </tr>\n {rowChildren ? (\n <tr>\n <td\n colSpan={table.getAllColumns().length}\n style={{\n padding: 0,\n borderTop: row.getIsExpanded() ? undefined : 'none',\n borderBottom: row.getIsExpanded() ? undefined : 'none',\n }}\n >\n <Collapse in={row.getIsExpanded()}>\n <Box px=\"sm\" py=\"xs\">\n {rowChildren}\n </Box>\n </Collapse>\n </td>\n </tr>\n ) : null}\n </Fragment>\n );\n });\n\n return <>{rows}</>;\n};\n\nexport const RowLayout: TableLayout = {\n name: 'Rows',\n icon: ListSize16Px,\n Header: RowLayoutHeader,\n Body: RowLayoutBody,\n};\n"],"names":["ListSize16Px","Box","Collapse","createStyles","flexRender","defaultColumnSizing","Fragment","TableCollapsibleColumn","useTable","TableLoading","Th","useStyles","theme","multiRowSelectionEnabled","disableRowSelection","rowBackgroundColor","colorScheme","fn","rgba","colors","primaryColor","headerColumns","paddingLeft","spacing","xl","backgroundColor","gray","undefined","borderColor","pointerEvents","cursor","color","rowSelected","rowUnselectable","rowCollapsibleButtonCell","textAlign","padding","xs","sm","row","RowLayoutHeader","table","classes","headers","getHeaderGroups","map","headerGroup","tr","className","columnHeader","header","id","RowLayoutBody","doubleClickAction","getExpandChildren","loading","cx","rows","getRowModel","rowChildren","original","isSelected","getIsSelected","onClick","toggleSelected","onDoubleClick","aria-selected","getVisibleCells","cell","size","column","getSize","width","td","style","visible","columnDef","getContext","colSpan","getAllColumns","length","borderTop","getIsExpanded","borderBottom","in","px","py","RowLayout","name","icon","Header","Body"],"mappings":";;AAAA,SAAQA,YAAY,QAAO,8BAA8B;AACzD,SAAQC,GAAG,EAAEC,QAAQ,EAAEC,YAAY,QAAO,gBAAgB;AAC1D,SAAQC,UAAU,QAAO,wBAAwB;AACjD,SAAQC,mBAAmB,QAAO,uBAAuB;AACzD,SAAQC,QAAQ,QAAO,QAAQ;AAE/B,SAAQC,sBAAsB,QAAO,4BAA4B;AACjE,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,SAAQC,YAAY,QAAO,kBAAkB;AAC7C,SAAQC,EAAE,QAAO,QAAQ;AAOzB,IAAMC,YAAYR,aAAwC,SAACS;QAAQC,iCAAAA,0BAA0BC,4BAAAA;IACzF,IAAMC,qBACFH,MAAMI,gBAAgB,SAChBJ,MAAMK,GAAGC,KAAKN,MAAMO,MAAM,CAACP,MAAMQ,aAAa,CAAC,EAAE,EAAE,OACnDR,MAAMO,MAAM,CAACP,MAAMQ,aAAa,CAAC,EAAE;IAC7C,OAAO;QACHC,eAAe;YACX,0BAA0B;gBACtBC,aAAaV,MAAMW,QAAQC;YAC/B;YAEA,0BAA0B;gBACtBC,iBAAiBX,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAKC;gBACnEC,aAAad,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAK,AAAC,GAAuB,OAArBd,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACtFG,eAAef,sBAAsB,SAAS;gBAC9CgB,QAAQhB,sBAAsB,gBAAgB;gBAE9C,WAAW;oBACPiB,OAAOjB,sBAAsB,AAAC,GAAuB,OAArBF,MAAMO,OAAOO,IAAI,CAAC,EAAE,IAAK;gBAC7D;YACJ;QACJ;QAEAM,aAAa;YACTP,iBAAiBZ,2BAA2Bc,YAAYZ;QAC5D;QAEAkB,iBAAiB;YACb,0BAA0B;gBACtBR,iBAAiB,AAAC,GAAuB,OAArBb,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACxCE,aAAa,AAAC,GAAuB,OAArBhB,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBACpCG,eAAe;gBACfC,QAAQ;gBAER,mBAAmB;oBACfC,OAAO,AAAC,GAAuB,OAArBnB,MAAMO,OAAOO,IAAI,CAAC,EAAE;gBAClC;YACJ;QACJ;QAEAQ,0BAA0B;YACtBC,WAAW;YACXC,SAAS,AAAC,QAA8BxB,OAAvBA,MAAMW,QAAQc,IAAG,QAAuB,OAAjBzB,MAAMW,QAAQe,IAAG;QAC7D;QAEAC,KAAK;YACD,WAAW;gBACPd,iBAAiBV;YACrB;QACJ;IACJ;AACJ;AAEA,IAAMyB,kBAAkB;QAAMC,cAAAA;IAC1B,IAAwDjC,YAAAA,YAAjDK,2BAAiDL,UAAjDK,0BAA0BC,sBAAuBN,UAAvBM;IACjC,IAAM,AAAC4B,UAAW/B,UAAU;QAACG,qBAAAA;QAAqBD,0BAAAA;IAAwB,GAAnE6B;IACP,IAAMC,UAAUF,MAAMG,kBAAkBC,IAAI,SAACC;6BACzC,KAACC;YAAwBC,WAAWN,QAAQrB;sBACvCyB,YAAYH,QAAQE,IAAI,SAACI;qCACtB,KAACvC;oBAAyBwC,QAAQD;mBAAzBA,aAAaE;;WAFrBL,YAAYK;;IAMzB,qBAAO;kBAAGR;;AACd;AAEA,IAAMS,gBAAgB;QAAMX,cAAAA,OAAOY,0BAAAA,mBAAmBC,0BAAAA,mBAAmBC,gBAAAA;IACrE,IAAwD/C,YAAAA,YAAjDK,2BAAiDL,UAAjDK,0BAA0BC,sBAAuBN,UAAvBM;IACjC,IAAsBH,aAAAA,UAAU;QAACG,qBAAAA;QAAqBD,0BAAAA;IAAwB,IAAvE6B,UAAe/B,WAAf+B,SAASc,KAAM7C,WAAN6C;IAEhB,IAAMC,OAAOhB,MAAMiB,cAAcD,KAAKZ,IAAI,SAACN;YACnBe;QAApB,IAAMK,cAAcL,CAAAA,qBAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBf,IAAIqB,uBAAxBN,gCAAAA,qBAAqC;QACzD,IAAMO,aAAa,CAAC,CAACtB,IAAIuB;YAOc;QALvC,qBACI,MAACxD;;8BACG,KAACyC;oBACGgB,SAAS;+BAAOjD,sBAAsBa,YAAYY,IAAIyB;;oBACtDC,eAAe;wBAAMZ,OAAAA,8BAAAA,+BAAAA,KAAAA,IAAAA,kBAAoBd,IAAIqB;;oBAC7CZ,WAAWQ,GAAGd,QAAQH,MAAK,WACvB,iBADuB,MACtBG,QAAQV,aAAc6B,aACvB,iBAFuB,MAEtBnB,QAAQT,iBAAkBnB,sBAFJ;oBAI3BoD,iBAAeL;8BAEdtB,IAAI4B,kBAAkBtB,IAAI,SAACuB;wBACxB,IAAMC,OAAOD,KAAKE,OAAOC;wBACzB,IAAMC,QAAQH,SAAShE,oBAAoBgE,OAAOA,OAAO1C;wBACzD,qBACI,KAAC8C;4BAEGC,OAAO;gCAACF,OAAAA;4BAAK;4BACbxB,WAAWQ,GACP,qBAACd,QAAQR,0BAA2BkC,KAAKE,OAAOnB,OAAO5C,uBAAuB4C;sCAGlF,cAAA,KAAC1C;gCAAakE,SAASpB;0CAClBnD,WAAWgE,KAAKE,OAAOM,UAAUR,MAAMA,KAAKS;;2BAP5CT,KAAKjB;oBAWtB;;gBAEHQ,4BACG,KAACZ;8BACG,cAAA,KAAC0B;wBACGK,SAASrC,MAAMsC,gBAAgBC;wBAC/BN,OAAO;4BACHtC,SAAS;4BACT6C,WAAW1C,IAAI2C,kBAAkBvD,YAAY;4BAC7CwD,cAAc5C,IAAI2C,kBAAkBvD,YAAY;wBACpD;kCAEA,cAAA,KAACzB;4BAASkF,IAAI7C,IAAI2C;sCACd,cAAA,KAACjF;gCAAIoF,IAAG;gCAAKC,IAAG;0CACX3B;;;;qBAKjB;;WA7COpB,IAAIY;IAgD3B;IAEA,qBAAO;kBAAGM;;AACd;AAEA,OAAO,IAAM8B,YAAyB;IAClCC,MAAM;IACNC,MAAMzF;IACN0F,QAAQlD;IACRmD,MAAMvC;AACV,EAAE"}

package/dist/esm/components/table/layouts/TableLayouts.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+export declare const TableLayouts: {
+    Rows: import("..").TableLayout;
+};
+//# sourceMappingURL=TableLayouts.d.ts.map

package/dist/esm/components/table/layouts/TableLayouts.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TableLayouts.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY;;CAExB,CAAC"}

package/dist/esm/components/table/layouts/TableLayouts.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { RowLayout } from "./RowLayout";
+export var TableLayouts = {
+    Rows: RowLayout
+};
+//# sourceMappingURL=TableLayouts.js.map

package/dist/esm/components/table/layouts/TableLayouts.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"sources":["../../../../../src/components/table/layouts/TableLayouts.tsx"],"sourcesContent":["import {RowLayout} from './RowLayout';\n\nexport const TableLayouts = {\n Rows: RowLayout,\n};\n"],"names":["RowLayout","TableLayouts","Rows"],"mappings":"AAAA,SAAQA,SAAS,QAAO,cAAc;AAEtC,OAAO,IAAMC,eAAe;IACxBC,MAAMF;AACV,EAAE"}

package/dist/esm/theme/Theme.js CHANGED Viewed

@@ -329,11 +329,13 @@ export var plasmaTheme = {
                 }
             }
         },
-        Segmented: {
-            styles: {
-                control: {
-                    zIndex: "unset"
-                }
+        SegmentedControl: {
+            styles: function(theme) {
+                return {
+                    root: {
+                        backgroundColor: theme.colors.gray[2]
+                    }
+                };
             }
         },
         Stepper: {

package/dist/esm/theme/Theme.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n getSize,\n rem,\n type MantineThemeOverride,\n type NotificationProps,\n type StepperStylesParams,\n type TabsStylesParams,\n} 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, padding}, {size, variant}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(432),\n sm: rem(664),\n md: rem(896),\n lg: rem(1120),\n xl: rem('88%'),\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 header: {\n borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null,\n },\n body: {\n '&:not(:only-child)': {\n paddingTop: variant === 'prompt' ? 0 : getSize({size: padding, sizes: plasmaTheme.spacing}),\n },\n },\n }),\n },\n ModalOverlay: {\n defaultProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\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 Stepper: {\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n styles: (theme, {}: StepperStylesParams, {size}) => ({\n step: {\n '&[disabled]': {\n color: theme.colors.gray[5],\n '& .mantine-Stepper-stepDescription': {\n color: theme.colors.gray[5],\n },\n '& .mantine-Stepper-stepIcon': {\n borderColor: theme.colors.gray[1],\n },\n },\n },\n stepIcon: {\n fontWeight: 500,\n backgroundColor: theme.colors.gray[1],\n color: 'inherit',\n border: `${rem(1)} solid ${theme.colors.gray[3]}`,\n '&[data-progress]': {\n backgroundColor: theme.white,\n },\n\n '&[data-completed]': {\n backgroundColor: theme.white,\n borderColor: theme.colors.lime[6],\n color: theme.colors.lime[6],\n },\n },\n stepCompletedIcon: {\n color: theme.colors.lime[6],\n fontSize: rem(16),\n },\n stepDescription: {\n color: theme.colors.gray[7],\n fontSize: getSize({size, sizes: theme.fontSizes}),\n },\n separator: {\n height: rem(1),\n backgroundColor: theme.colors.gray[3],\n },\n separatorActive: {\n backgroundColor: theme.colors.gray[3],\n },\n verticalSeparator: {\n borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`,\n },\n verticalSeparatorActive: {\n borderColor: theme.colors.gray[3],\n },\n }),\n },\n Tabs: {\n styles: (theme, {orientation}: TabsStylesParams) => ({\n tabsList: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${\n theme.colors.gray[3]\n }`,\n },\n tab: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,\n [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1),\n },\n }),\n },\n },\n};\n"],"names":["CheckSize16Px","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","padding","variant","content","flex","overflow","width","header","borderBottom","body","paddingTop","ModalOverlay","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","Segmented","control","Stepper","completedIcon","step","stepIcon","border","white","lime","stepCompletedIcon","stepDescription","separator","separatorActive","verticalSeparator","borderLeft","verticalSeparatorActive","Tabs","orientation","tabsList","tab"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/theme/Theme.tsx"],"sourcesContent":["import {CheckSize16Px, InfoSize24Px} from '@coveord/plasma-react-icons';\nimport {color} from '@coveord/plasma-tokens';\nimport {\n getSize,\n rem,\n type MantineThemeOverride,\n type NotificationProps,\n type StepperStylesParams,\n type TabsStylesParams,\n} 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, padding}, {size, variant}) => ({\n content: {\n flex: fullScreen\n ? '0 0 100%'\n : `0 0 ${getSize({\n size,\n sizes: {\n xs: rem(432),\n sm: rem(664),\n md: rem(896),\n lg: rem(1120),\n xl: rem('88%'),\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 header: {\n borderBottom: variant !== 'prompt' ? `1px solid ${color.primary.gray[3]}` : null,\n },\n body: {\n '&:not(:only-child)': {\n paddingTop: variant === 'prompt' ? 0 : getSize({size: padding, sizes: plasmaTheme.spacing}),\n },\n },\n }),\n },\n ModalOverlay: {\n defaultProps: {\n color: color.primary.navy[9],\n opacity: 0.9,\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 SegmentedControl: {\n styles: (theme) => ({\n root: {\n backgroundColor: theme.colors.gray[2],\n },\n }),\n },\n Stepper: {\n defaultProps: {\n size: 'xs',\n completedIcon: <CheckSize16Px />,\n },\n styles: (theme, {}: StepperStylesParams, {size}) => ({\n step: {\n '&[disabled]': {\n color: theme.colors.gray[5],\n '& .mantine-Stepper-stepDescription': {\n color: theme.colors.gray[5],\n },\n '& .mantine-Stepper-stepIcon': {\n borderColor: theme.colors.gray[1],\n },\n },\n },\n stepIcon: {\n fontWeight: 500,\n backgroundColor: theme.colors.gray[1],\n color: 'inherit',\n border: `${rem(1)} solid ${theme.colors.gray[3]}`,\n '&[data-progress]': {\n backgroundColor: theme.white,\n },\n\n '&[data-completed]': {\n backgroundColor: theme.white,\n borderColor: theme.colors.lime[6],\n color: theme.colors.lime[6],\n },\n },\n stepCompletedIcon: {\n color: theme.colors.lime[6],\n fontSize: rem(16),\n },\n stepDescription: {\n color: theme.colors.gray[7],\n fontSize: getSize({size, sizes: theme.fontSizes}),\n },\n separator: {\n height: rem(1),\n backgroundColor: theme.colors.gray[3],\n },\n separatorActive: {\n backgroundColor: theme.colors.gray[3],\n },\n verticalSeparator: {\n borderLeft: `${rem(1)} solid ${theme.colors.gray[3]}`,\n },\n verticalSeparatorActive: {\n borderColor: theme.colors.gray[3],\n },\n }),\n },\n Tabs: {\n styles: (theme, {orientation}: TabsStylesParams) => ({\n tabsList: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid ${\n theme.colors.gray[3]\n }`,\n },\n tab: {\n [orientation === 'horizontal' ? 'borderBottom' : 'borderRight']: `${rem(1)} solid transparent`,\n [orientation === 'horizontal' ? 'marginBottom' : 'marginRight']: rem(-1),\n },\n }),\n },\n },\n};\n"],"names":["CheckSize16Px","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","padding","variant","content","flex","overflow","width","header","borderBottom","body","paddingTop","ModalOverlay","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","withArrow","withinPortal","multiline","zIndex","Loader","DateRangePicker","cell","textAlign","Anchor","fn","hover","textDecoration","action","Checkbox","List","listStyleType","Radio","labelWrapper","display","alignItems","Popover","shadow","Badge","textTransform","ColorSwatch","withShadow","MenuItem","fw","Notification","notificationType","boxShadow","paddingLeft","marginRight","closeButton","margin","Skeleton","visible","SegmentedControl","Stepper","completedIcon","step","stepIcon","border","white","lime","stepCompletedIcon","stepDescription","separator","separatorActive","verticalSeparator","borderLeft","verticalSeparatorActive","Tabs","orientation","tabsList","tab"],"mappings":";;;;AAAA,SAAQA,aAAa,EAAEC,YAAY,QAAO,8BAA8B;AACxE,SAAQC,KAAK,QAAO,yBAAyB;AAC7C,SACIC,OAAO,EACPC,GAAG,QAKA,gBAAgB;AAEvB,SAAQC,YAAY,QAAO,iBAAiB;AAE5C,OAAO,IAAMC,cAAoC;IAC7C,2HAA2H;IAC3HC,aAAa;IACbC,YAAY;IACZC,OAAOP,MAAMQ,QAAQC,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;4BAAMxB,OAAOuB,MAAME;wBAAS;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,YAAYC,gBAAAA,SAAWR,cAAAA,MAAMS,iBAAAA;uBAAc;oBACxDC,SAAS;wBACLC,MAAMJ,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;wBACNuD,UAAU;oBACd;oBACAnB,OAAO;wBACHoB,OAAO;wBACPnC,UAAUqB,MAAMzB,SAASE,MAAMK,GAAGH;wBAClCZ,YAAYiC,MAAMzB,SAASE,MAAMK,GAAGf;wBACpCS,YAAY;oBAChB;oBACAuC,QAAQ;wBACJC,cAAcN,YAAY,WAAW,AAAC,aAAkC,OAAtBtD,MAAMQ,QAAQC,IAAI,CAAC,EAAE,IAAK;oBAChF;oBACAoD,MAAM;wBACF,sBAAsB;4BAClBC,YAAYR,YAAY,WAAW,IAAIrD,QAAQ;gCAAC4C,MAAMQ;gCAAShC,OAAOjB,YAAYQ;4BAAO;wBAC7F;oBACJ;gBACJ;;QACJ;QACAmD,cAAc;YACV7B,cAAc;gBACVlC,OAAOA,MAAMQ,QAAQwD,IAAI,CAAC,EAAE;gBAC5BC,SAAS;YACb;QACJ;QACAC,cAAc;YACVhC,cAAc;gBACViC,cAAc;YAClB;YACA9B,QAAQ,SAACO;uBAAW;oBAChBwB,OAAO;wBACHC,cAAczB,MAAMhC,QAAQC;oBAChC;oBACAyD,aAAa;wBACT/C,UAAUqB,MAAME,UAAUhC;wBAC1Bd,OAAO4C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBAC3B4D,cAAczB,MAAMhC,QAAQC;oBAChC;oBACA0D,SAAS;wBACLvE,OAAO4C,MAAMb,OAAOyC,GAAG,CAAC,EAAE;wBAC1BC,aAAa7B,MAAMb,OAAOyC,GAAG,CAAC,EAAE;oBACpC;oBACAE,OAAO;wBACH1E,OAAO4C,MAAMb,OAAOyC,GAAG,CAAC,EAAE;oBAC9B;gBACJ;;QACJ;QACAG,WAAW;YACPzC,cAAc;gBACV0C,QAAQ;YACZ;QACJ;QACAC,SAAS;YACL3C,cAAc;gBACVlC,OAAO;gBACP8E,WAAW;gBACXC,cAAc;gBACdC,WAAW;gBACXC,QAAQ;YACZ;QACJ;QACAC,QAAQ;YACJhD,cAAc;gBACVoB,SAAS;gBACTtD,OAAO;YACX;QACJ;QACAmF,iBAAiB;YACb9C,QAAQ;gBACJ+C,MAAM;oBACFC,WAAW;gBACf;YACJ;QACJ;QACAC,QAAQ;YACJpD,cAAc;gBACVlC,OAAO;YACX;YACAqC,QAAQ,SAACO;uBAAW;oBAChBJ,MAAM,mBACCI,MAAM2C,GAAGC,MAAM;wBACdC,gBAAgB;wBAChBzF,OAAO4C,MAAMb,OAAO2D,MAAM,CAAC,EAAE;oBACjC;gBAER;;QACJ;QACAC,UAAU;YACNzD,cAAc;gBACV0C,QAAQ;YACZ;YACAvC,QAAQ,SAACO;uBAAW;oBAChBwB,OAAO;wBACH7C,UAAUqB,MAAME,UAAUhC;wBAC1BM,YAAY;oBAChB;gBACJ;;QACJ;QACAwE,MAAM;YACFvD,QAAQ;uBAAO;oBACXG,MAAM;wBACFqD,eAAe;oBACnB;gBACJ;;QACJ;QACAC,OAAO;YACHzD,QAAQ;gBACJ0D,cAAc;oBACVC,SAAS;oBACTC,YAAY;gBAChB;YACJ;QACJ;QACAC,SAAS;YACLhE,cAAc;gBACViE,QAAQ;gBACRrB,WAAW;YACf;QACJ;QACAsB,OAAO;YACH/D,QAAQ;gBACJG,MAAM;oBACF6D,eAAe;oBACfhD,SAAS;oBACTjC,YAAY;gBAChB;YACJ;QACJ;QACAkF,aAAa;YACTpE,cAAc;gBACVW,MAAM;gBACN0D,YAAY;YAChB;QACJ;QACAC,UAAU;YACNtE,cAAc;gBACVuE,IAAI;YACR;QACJ;QACAC,cAAc;YACVrE,QAAQ,SAACO;oBAAQ5C,AAAO2G,yBAAP3G;oBAaF4C;gBAbmD,OAAA;oBAC9DJ,MAAM;wBACFiC,aAAa7B,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBACjCyC,iBAAiBN,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBACrCmG,WAAWhE,MAAMd,QAAQd;wBACzBqC,SAAST,MAAMhC,QAAQE;wBACvB,qBAAqB;4BACjB+F,aAAajE,MAAMhC,QAAQE;wBAC/B;oBACJ;oBACAqB,MAAM;wBACFe,iBAAiB;wBACjB4D,aAAalE,MAAMhC,QAAQE;wBAC3Bd,KAAK,EAAE4C,CAAAA,gBAAAA,MAAMb,oBAANa,2BAAAA,KAAAA,IAAAA,aAAc,CAAC+D,iBAAiB,CAAC,EAAE;oBAC9C;oBACAI,aAAa;wBACTC,QAAQpE,MAAMhC,QAAQC;wBACtBb,OAAO4C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBAC/B;gBACJ;;YACAyB,cAAc;gBACVC,oBAAM,KAACpC;oBAAaqC,QAAQ;;gBAC5BpC,OAAO;YACX;QACJ;QACAiH,UAAU;YACN5E,QAAQ;gBACJ6E,SAAS;oBACL,aAAa;wBAACjC,QAAQ;oBAAO;oBAC7B,YAAY;wBAACA,QAAQ;oBAAO;gBAChC;YACJ;QACJ;QACAkC,kBAAkB;YACd9E,QAAQ,SAACO;uBAAW;oBAChBJ,MAAM;wBACFU,iBAAiBN,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBACzC;gBACJ;;QACJ;QACA2G,SAAS;YACLlF,cAAc;gBACVW,MAAM;gBACNwE,6BAAe,KAACvH;YACpB;YACAuC,QAAQ,SAACO;oBAAO,0CAA0BC,cAAAA;uBAAW;oBACjDyE,MAAM;wBACF,eAAe;4BACXtH,OAAO4C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;4BAC3B,sCAAsC;gCAClCT,OAAO4C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;4BAC/B;4BACA,+BAA+B;gCAC3BgE,aAAa7B,MAAMb,OAAOtB,IAAI,CAAC,EAAE;4BACrC;wBACJ;oBACJ;oBACA8G,UAAU;wBACNnG,YAAY;wBACZ8B,iBAAiBN,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBACrCT,OAAO;wBACPwH,QAAQ,AAAC,GAAkB5E,OAAhB1C,IAAI,IAAG,WAA8B,OAArB0C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBAC/C,oBAAoB;4BAChByC,iBAAiBN,MAAM6E;wBAC3B;wBAEA,qBAAqB;4BACjBvE,iBAAiBN,MAAM6E;4BACvBhD,aAAa7B,MAAMb,OAAO2F,IAAI,CAAC,EAAE;4BACjC1H,OAAO4C,MAAMb,OAAO2F,IAAI,CAAC,EAAE;wBAC/B;oBACJ;oBACAC,mBAAmB;wBACf3H,OAAO4C,MAAMb,OAAO2F,IAAI,CAAC,EAAE;wBAC3BnG,UAAUrB,IAAI;oBAClB;oBACA0H,iBAAiB;wBACb5H,OAAO4C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;wBAC3Bc,UAAUtB,QAAQ;4BAAC4C,MAAAA;4BAAMxB,OAAOuB,MAAME;wBAAS;oBACnD;oBACA+E,WAAW;wBACPzF,QAAQlC,IAAI;wBACZgD,iBAAiBN,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBACzC;oBACAqH,iBAAiB;wBACb5E,iBAAiBN,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBACzC;oBACAsH,mBAAmB;wBACfC,YAAY,AAAC,GAAkBpF,OAAhB1C,IAAI,IAAG,WAA8B,OAArB0C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBACvD;oBACAwH,yBAAyB;wBACrBxD,aAAa7B,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBACrC;gBACJ;;QACJ;QACAyH,MAAM;YACF7F,QAAQ,SAACO;oBAAQuF,oBAAAA;oBAMR;uBAN4C;oBACjDC,UACI,qBAACD,gBAAgB,eAAe,iBAAiB,eAAgB,AAAC,GAC9DvF,OADgE1C,IAAI,IAAG,WAE1E,OADG0C,MAAMb,OAAOtB,IAAI,CAAC,EAAE;oBAG5B4H,GAAG,GAAE,WACD,iBADC,MACAF,gBAAgB,eAAe,iBAAiB,eAAgB,AAAC,GAAS,OAAPjI,IAAI,IAAG,wBAC3E,iBAFC,MAEAiI,gBAAgB,eAAe,iBAAiB,eAAgBjI,IAAI,CAAC,KAFrE;gBAIT;;QACJ;IACJ;AACJ,EAAE"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.6.0",
+  "version": "52.7.1",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -41,8 +41,8 @@
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.38.0",
-    "@coveord/plasma-react-icons": "52.6.0",
-    "@coveord/plasma-tokens": "52.6.0"
+    "@coveord/plasma-react-icons": "52.7.0",
+    "@coveord/plasma-tokens": "52.7.0"
   },
   "devDependencies": {
     "@emotion/react": "11.11.0",
@@ -54,7 +54,7 @@
     "@mantine/modals": "6.0.11",
     "@mantine/notifications": "6.0.11",
     "@swc/cli": "0.1.62",
-    "@swc/core": "1.3.59",
+    "@swc/core": "1.3.60",
     "@swc/jest": "0.2.26",
     "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "13.4.0",
@@ -80,8 +80,8 @@
     "react-dom": "18.2.0",
     "rimraf": "3.0.2",
     "tslib": "2.5.2",
-    "typescript": "5.0.3",
-    "vitest": "0.31.0"
+    "typescript": "5.0.4",
+    "vitest": "0.31.1"
   },
   "peerDependencies": {
     "@emotion/react": "^11.10.0",

package/src/components/table/Table.styles.ts CHANGED Viewed

@@ -1,99 +1,44 @@
 import {createStyles} from '@mantine/core';
-interface TableStylesParams {
-    multiRowSelectionEnabled: boolean;
-    disableRowSelection: boolean;
-}
-const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled, disableRowSelection}) => {
-    const rowBackgroundColor =
-        theme.colorScheme === 'dark'
-            ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
-            : theme.colors[theme.primaryColor][0];
-    return {
-        table: {
-            width: '100%',
-            '& thead tr th': {
-                borderBottom: 'none',
-            },
-            '& td:first-of-type': {
-                paddingLeft: theme.spacing.xl,
-            },
-            '& tbody td': {
-                verticalAlign: 'top',
-            },
-        },
-        header: {
-            position: 'sticky',
-            top: 0,
-            backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
-            transition: 'box-shadow 150ms ease',
-            zIndex: 1,
-            '&::after': {
-                content: '""',
-                position: 'absolute',
-                left: 0,
-                right: 0,
-                bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[3]}`,
-            },
-        },
-        headerColumns: {
-            '& th:first-of-type > *': {
-                paddingLeft: theme.spacing.xl,
-            },
-            '& input[type=checkbox]': {
-                backgroundColor: disableRowSelection ? `${theme.colors.gray[2]}` : undefined,
-                borderColor: disableRowSelection ? `${theme.colors.gray[3]}` : `${theme.colors.gray[4]}`,
-                pointerEvents: disableRowSelection ? 'none' : 'auto',
-                cursor: disableRowSelection ? 'not-allowed' : 'default',
-                '& + svg': {
-                    color: disableRowSelection ? `${theme.colors.gray[5]}` : 'inherit',
-                },
-            },
+const useStyles = createStyles<string>((theme) => ({
+    table: {
+        width: '100%',
+        '& thead tr th': {
+            borderBottom: 'none',
         },
-        rowSelected: {
-            backgroundColor: multiRowSelectionEnabled ? undefined : rowBackgroundColor,
+        '& td:first-of-type': {
+            paddingLeft: theme.spacing.xl,
         },
-        rowUnselectable: {
-            '& input[type=checkbox]': {
-                backgroundColor: `${theme.colors.gray[2]}`,
-                borderColor: `${theme.colors.gray[3]}`,
-                pointerEvents: 'none',
-                cursor: 'not-allowed',
-                '&:checked + svg': {
-                    color: `${theme.colors.gray[5]}`,
-                },
-            },
+        '& tbody td': {
+            verticalAlign: 'top',
         },
-        rowCollapsibleButtonCell: {
-            textAlign: 'right',
-            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,
-        },
-        row: {
-            '&:hover': {
-                backgroundColor: rowBackgroundColor,
-            },
+    },
+    header: {
+        position: 'sticky',
+        top: 0,
+        backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
+        transition: 'box-shadow 150ms ease',
+        zIndex: 1,
+        '&::after': {
+            content: '""',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            borderBottom: `1px solid ${theme.colors.gray[3]}`,
         },
-    };
-});
+    },
+}));
 export const TableComponentsOrder = {
-    MultiSelectInfo: 5,
-    Actions: 4,
-    Predicate: 3,
-    Filter: 2,
-    DateRangePicker: 1,
+    MultiSelectInfo: 6,
+    Actions: 5,
+    Predicate: 4,
+    Filter: 3,
+    DateRangePicker: 2,
+    LayoutControl: 1,
 };
 export default useStyles;

package/src/components/table/Table.tsx CHANGED Viewed

@@ -1,18 +1,10 @@
-import {Box, Center, Collapse, Loader, Table as MantineTable, Skeleton, SkeletonProps} from '@mantine/core';
+import {Box, Center, Loader, Table as MantineTable} from '@mantine/core';
 import {useForm} from '@mantine/form';
 import {useDidUpdate} from '@mantine/hooks';
-import {
-    ColumnDef,
-    Row,
-    TableState as TanstackTableState,
-    defaultColumnSizing,
-    flexRender,
-    getCoreRowModel,
-    useReactTable,
-} from '@tanstack/react-table';
+import {ColumnDef, Row, TableState as TanstackTableState, getCoreRowModel, useReactTable} from '@tanstack/react-table';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Dispatch, FC, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';
+import {Children, Dispatch, ReactElement, useCallback, useEffect, useState} from 'react';
 import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
@@ -28,14 +20,9 @@ import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
 import {TableSelectableColumn} from './TableSelectableColumn';
-import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
-const LoadingSkeleton: FC<SkeletonProps> = (props) => (
-    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>
-        {props.children}
-    </Skeleton>
-);
+import {TableLoading} from './TableLoading';
+import {TableLayouts} from './layouts/TableLayouts';
 export const Table: TableType = <T,>({
     data,
@@ -44,6 +31,7 @@ export const Table: TableType = <T,>({
     getExpandChildren,
     initialState = {},
     columns,
+    layouts = [TableLayouts.Rows],
     onMount,
     onChange,
     children,
@@ -61,9 +49,13 @@ export const Table: TableType = <T,>({
     const {predicates, dateRange, ...initialStateWithoutForm} = initialState;
     const form = useForm<TableFormType>({
-        initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
+        initialValues: {
+            predicates: initialState?.predicates ?? {},
+            dateRange: initialState?.dateRange ?? [null, null],
+            layout: initialState?.layout ?? layouts[0].name,
+        },
     });
-    const {cx, classes} = useStyles({multiRowSelectionEnabled, disableRowSelection});
+    const {classes} = useStyles();
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -108,7 +100,13 @@ export const Table: TableType = <T,>({
         if (!multiRowSelectionEnabled) {
             clearSelection();
         }
-    }, [state.globalFilter, state.pagination, state.sorting, form.values]);
+    }, [
+        state.globalFilter,
+        state.pagination,
+        state.sorting,
+        JSON.stringify(form.values.dateRange),
+        JSON.stringify(form.values.predicates),
+    ]);
     const clearFilters = useCallback(() => {
         form.setFieldValue('predicates', initialState.predicates ?? {});
@@ -123,60 +121,8 @@ export const Table: TableType = <T,>({
         );
     }
-    const rows = table.getRowModel().rows.map((row) => {
-        const rowChildren = getExpandChildren?.(row.original) ?? null;
-        const isSelected = !!row.getIsSelected();
-        return (
-            <Fragment key={row.id}>
-                <tr
-                    onClick={() => (disableRowSelection ? undefined : row.toggleSelected())}
-                    onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {
-                        [classes.rowSelected]: isSelected,
-                        [classes.rowUnselectable]: disableRowSelection,
-                    })}
-                    aria-selected={isSelected}
-                >
-                    {row.getVisibleCells().map((cell) => {
-                        const size = cell.column.getSize();
-                        const width = size !== defaultColumnSizing.size ? size : undefined;
-                        return (
-                            <td
-                                key={cell.id}
-                                style={{width}}
-                                className={cx({
-                                    [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,
-                                })}
-                            >
-                                <LoadingSkeleton visible={loading}>
-                                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                                </LoadingSkeleton>
-                            </td>
-                        );
-                    })}
-                </tr>
-                {rowChildren ? (
-                    <tr>
-                        <td
-                            colSpan={table.getAllColumns().length}
-                            style={{
-                                padding: 0,
-                                borderTop: row.getIsExpanded() ? undefined : 'none',
-                                borderBottom: row.getIsExpanded() ? undefined : 'none',
-                            }}
-                        >
-                            <Collapse in={row.getIsExpanded()}>
-                                <Box px="sm" py="xs">
-                                    {rowChildren}
-                                </Box>
-                            </Collapse>
-                        </td>
-                    </tr>
-                ) : null}
-            </Fragment>
-        );
-    });
+    const Layout = layouts.find(({name}) => name === form.values.layout);
+    const hasRows = table.getRowModel().rows.length > 0;
     return (
         <Box ref={outsideClickRef}>
@@ -195,10 +141,11 @@ export const Table: TableType = <T,>({
                     multiRowSelectionEnabled,
                     getPageCount: table.getPageCount,
                     disableRowSelection,
+                    layouts,
                 }}
             >
                 {consumer}
-                {!rows.length && !isFiltered && !loading ? (
+                {!hasRows && !isFiltered && !loading ? (
                     noDataChildren
                 ) : (
                     <>
@@ -215,21 +162,25 @@ export const Table: TableType = <T,>({
                                         </th>
                                     </tr>
                                 ) : null}
-                                {table.getHeaderGroups().map((headerGroup) => (
-                                    <tr key={headerGroup.id} className={classes.headerColumns}>
-                                        {headerGroup.headers.map((columnHeader) => (
-                                            <Th key={columnHeader.id} header={columnHeader} />
-                                        ))}
-                                    </tr>
-                                ))}
+                                <Layout.Header
+                                    table={table}
+                                    doubleClickAction={doubleClickAction}
+                                    getExpandChildren={getExpandChildren}
+                                    loading={loading}
+                                />
                             </thead>
                             <tbody>
-                                {rows.length ? (
-                                    rows
+                                {hasRows ? (
+                                    <Layout.Body
+                                        table={table}
+                                        doubleClickAction={doubleClickAction}
+                                        getExpandChildren={getExpandChildren}
+                                        loading={loading}
+                                    />
                                 ) : (
                                     <tr>
                                         <td colSpan={table.getAllColumns().length}>
-                                            <LoadingSkeleton visible={loading}>{noDataChildren}</LoadingSkeleton>
+                                            <TableLoading visible={loading}>{noDataChildren}</TableLoading>
                                         </td>
                                     </tr>
                                 )}
@@ -255,3 +206,5 @@ Table.CollapsibleColumn = TableCollapsibleColumn;
 Table.AccordionColumn = TableAccordionColumn;
 Table.DateRangePicker = TableDateRangePicker;
 Table.Consumer = TableConsumer;
+Table.Loading = TableLoading;
+Table.Layouts = TableLayouts;

package/src/components/table/Table.types.ts CHANGED Viewed

@@ -2,12 +2,14 @@ import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
+    Table,
     TableOptions,
     InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
+import {Icon} from '@coveord/plasma-react-icons';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
@@ -16,9 +18,11 @@ import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
+import {TableLayouts} from './layouts/TableLayouts';
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -34,6 +38,45 @@ export interface InitialTableState<TData>
 export type onTableChangeEvent<TData> = (params: TableState<TData> & TableFormType) => void;
+export interface TableLayout {
+    /**
+     * Name of the layout.
+     * Will be displayed in the layout control
+     */
+    name: string;
+    /**
+     * Icon illustrating the layout.
+     * Will be displayed in the layout control
+     */
+    icon?: Icon;
+    /**
+     * Header portion of the table.
+     * In the standard row layout that is where column headers would be displayed.
+     */
+    Header: <T>(props: TableLayoutProps<T>) => ReactElement;
+    /**
+     * Body portion of the table.
+     * In the standard row layout that is where the rows would be displayed.
+     */
+    Body: <T>(props: TableLayoutProps<T>) => ReactElement;
+}
+export interface TableLayoutProps<T = unknown> {
+    table: Table<T>;
+    loading?: boolean;
+    /**
+     * Action passed when user double clicks on a row
+     */
+    doubleClickAction?: (datum: T) => void;
+    /**
+     * Function that generates the expandable content of a row
+     * Return null for rows that don't need to be expandable
+     *
+     * @param datum the row for which the children should be generated.
+     */
+    getExpandChildren?: (datum: T) => ReactNode;
+}
 export type TableFormType = {
     /**
      * Object containing the table predicates and their selected values
@@ -47,6 +90,10 @@ export type TableFormType = {
      * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
      */
     dateRange: DateRangePickerValue;
+    /**
+     * Selected layout name
+     */
+    layout: TableLayout['name'];
 };
 export type TableContextType<TData> = {
@@ -105,6 +152,10 @@ export type TableContextType<TData> = {
      * Function that returns the number of pages
      */
     getPageCount: () => number;
+    /**
+     * Available layouts. When more than one layout is provided, it will display a layout control to switch between them.
+     */
+    layouts: TableLayout[];
 };
 export interface TableProps<T> {
@@ -122,6 +173,12 @@ export interface TableProps<T> {
      * @see https://tanstack.com/table/v8/docs/guide/column-defs
      */
     columns: Array<ColumnDef<T>>;
+    /**
+     * Available layouts
+     *
+     * @default [Table.Layouts.Rows]
+     */
+    layouts?: TableLayout[];
     /**
      * Function called when the table mounts
      *
@@ -218,4 +275,6 @@ export interface TableType {
     CollapsibleColumn: typeof TableCollapsibleColumn;
     AccordionColumn: typeof TableAccordionColumn;
     Consumer: typeof TableConsumer;
+    Loading: typeof TableLoading;
+    Layouts: typeof TableLayouts;
 }