npm - @coveord/plasma-mantine - Versions diffs - 52.26.6 → 52.27.1 - Mend

@coveord/plasma-mantine 52.26.6 → 52.27.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 (66) hide show

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.tsx"],"sourcesContent":["import {Button, Checkbox, Divider, Grid, Popover, ScrollArea, Stack, Tooltip} from '@mantine/core';\nimport {FunctionComponent} from 'react';\n\nimport {TableComponentsOrder} from '../Table.styles';\nimport {useTable} from '../TableContext';\nimport useStyles from './TableColumnsSelector.styles';\nimport {TableColumnsSelectorProps} from './TableColumnsSelector.types';\n\nconst COLUMNS_IDS_TO_EXCLUDE = ['collapsible', 'select'];\n\nexport const TableColumnsSelector: FunctionComponent<TableColumnsSelectorProps> = ({\n classNames,\n styles,\n unstyled,\n label = 'Edit columns',\n buttonVariant = 'outline',\n showVisibleCountLabel = false,\n nonHideableColumns = [],\n maxSelectableColumns,\n footer,\n limitReachedTooltip = 'You have reached the maximum display limit.',\n columnNames,\n}) => {\n const {classes} = useStyles(null, {name: 'TableColumnsSelector', classNames, styles, unstyled});\n const {getAllColumns} = useTable();\n\n const columnsToExclude = [...nonHideableColumns, ...COLUMNS_IDS_TO_EXCLUDE];\n\n const filteredColumns = getAllColumns().filter((column) => !columnsToExclude.includes(column.id));\n\n const selectedColumnsCount = filteredColumns.filter((column) => column.getIsVisible()).length;\n\n if (filteredColumns.length <= 0) {\n return null;\n }\n\n return (\n <Grid.Col span=\"content\" order={TableComponentsOrder.ColumnsSelector} py=\"sm\" className={classes.root}>\n <Popover withinPortal position=\"bottom\" shadow=\"md\">\n <Popover.Target>\n <Button variant={buttonVariant}>{`${label}${\n showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''\n }`}</Button>\n </Popover.Target>\n <Popover.Dropdown miw={240}>\n <ScrollArea.Autosize mah={154}>\n <Stack>\n {filteredColumns.map((column) => {\n const isDisabled =\n selectedColumnsCount >= maxSelectableColumns && !column.getIsVisible();\n return (\n <Tooltip label={limitReachedTooltip} disabled={!isDisabled} position=\"left\">\n <div>\n <Checkbox\n key={column.id}\n label={columnNames?.[column.id] || column.id}\n name={column.id}\n checked={column.getIsVisible()}\n disabled={isDisabled}\n onChange={column.getToggleVisibilityHandler()}\n />\n </div>\n </Tooltip>\n );\n })}\n </Stack>\n </ScrollArea.Autosize>\n {maxSelectableColumns && (\n <>\n <Divider mb=\"xs\" mt=\"sm\" />\n {footer}\n </>\n )}\n </Popover.Dropdown>\n </Popover>\n </Grid.Col>\n );\n};\n"],"names":["Button","Checkbox","Divider","Grid","Popover","ScrollArea","Stack","Tooltip","TableComponentsOrder","useTable","useStyles","COLUMNS_IDS_TO_EXCLUDE","TableColumnsSelector","classNames","styles","unstyled","label","buttonVariant","showVisibleCountLabel","nonHideableColumns","maxSelectableColumns","footer","limitReachedTooltip","columnNames","classes","name","getAllColumns","columnsToExclude","filteredColumns","filter","column","includes","id","selectedColumnsCount","getIsVisible","length","Col","span","order","ColumnsSelector","py","className","root","withinPortal","position","shadow","Target","variant","Dropdown","miw","Autosize","mah","map","isDisabled","disabled","div","checked","onChange","getToggleVisibilityHandler","mb","mt"],"mappings":";AAAA,SAAQA,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,IAAI,EAAEC,OAAO,EAAEC,UAAU,EAAEC,KAAK,EAAEC,OAAO,QAAO,gBAAgB;AAGnG,SAAQC,oBAAoB,QAAO,kBAAkB;AACrD,SAAQC,QAAQ,QAAO,kBAAkB;AACzC,OAAOC,eAAe,gCAAgC;AAGtD,MAAMC,yBAAyB;IAAC;IAAe;CAAS;AAExD,OAAO,MAAMC,uBAAqE,CAAC,EAC/EC,UAAU,EACVC,MAAM,EACNC,QAAQ,EACRC,QAAQ,cAAc,EACtBC,gBAAgB,SAAS,EACzBC,wBAAwB,KAAK,EAC7BC,qBAAqB,EAAE,EACvBC,oBAAoB,EACpBC,MAAM,EACNC,sBAAsB,6CAA6C,EACnEC,WAAW,EACd;IACG,MAAM,EAACC,OAAO,EAAC,GAAGd,UAAU,MAAM;QAACe,MAAM;QAAwBZ;QAAYC;QAAQC;IAAQ;IAC7F,MAAM,EAACW,aAAa,EAAC,GAAGjB;IAExB,MAAMkB,mBAAmB;WAAIR;WAAuBR;KAAuB;IAE3E,MAAMiB,kBAAkBF,gBAAgBG,MAAM,CAAC,CAACC,SAAW,CAACH,iBAAiBI,QAAQ,CAACD,OAAOE,EAAE;IAE/F,MAAMC,uBAAuBL,gBAAgBC,MAAM,CAAC,CAACC,SAAWA,OAAOI,YAAY,IAAIC,MAAM;IAE7F,IAAIP,gBAAgBO,MAAM,IAAI,GAAG;QAC7B,OAAO;IACX;IAEA,qBACI,KAAChC,KAAKiC,GAAG;QAACC,MAAK;QAAUC,OAAO9B,qBAAqB+B,eAAe;QAAEC,IAAG;QAAKC,WAAWjB,QAAQkB,IAAI;kBACjG,cAAA,MAACtC;YAAQuC,YAAY;YAACC,UAAS;YAASC,QAAO;;8BAC3C,KAACzC,QAAQ0C,MAAM;8BACX,cAAA,KAAC9C;wBAAO+C,SAAS9B;kCAAgB,CAAC,EAAED,MAAM,EACtCE,wBAAwB,CAAC,EAAE,EAAEe,qBAAqB,CAAC,CAAC,GAAG,GAC1D,CAAC;;;8BAEN,MAAC7B,QAAQ4C,QAAQ;oBAACC,KAAK;;sCACnB,KAAC5C,WAAW6C,QAAQ;4BAACC,KAAK;sCACtB,cAAA,KAAC7C;0CACIsB,gBAAgBwB,GAAG,CAAC,CAACtB;oCAClB,MAAMuB,aACFpB,wBAAwBb,wBAAwB,CAACU,OAAOI,YAAY;oCACxE,qBACI,KAAC3B;wCAAQS,OAAOM;wCAAqBgC,UAAU,CAACD;wCAAYT,UAAS;kDACjE,cAAA,KAACW;sDACG,cAAA,KAACtD;gDAEGe,OAAOO,aAAa,CAACO,OAAOE,EAAE,CAAC,IAAIF,OAAOE,EAAE;gDAC5CP,MAAMK,OAAOE,EAAE;gDACfwB,SAAS1B,OAAOI,YAAY;gDAC5BoB,UAAUD;gDACVI,UAAU3B,OAAO4B,0BAA0B;+CALtC5B,OAAOE,EAAE;;;gCAUlC;;;wBAGPZ,sCACG;;8CACI,KAAClB;oCAAQyD,IAAG;oCAAKC,IAAG;;gCACnBvC;;;;;;;;AAO7B,EAAE"}

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.styles.d.ts ADDED Viewed

@@ -0,0 +1,10 @@
+declare const _default: (params: void, options?: import("@mantine/core").UseStylesOptions<string>) => {
+    classes: {
+        root: string;
+        wrapper: string;
+    };
+    cx: (...args: any) => string;
+    theme: import("@mantine/core").MantineTheme;
+};
+export default _default;
+//# sourceMappingURL=TableColumnsSelector.styles.d.ts.map

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.styles.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"TableColumnsSelector.styles.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.styles.ts"],"names":[],"mappings":";;;;;;;;AAEA,wBAKI"}

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.styles.js ADDED Viewed

@@ -0,0 +1,11 @@
+import { createStyles } from '@mantine/core';
+export default createStyles((theme)=>({
+        root: {
+            maxWidth: '100%'
+        },
+        wrapper: {
+            display: 'inline-flex'
+        }
+    }));
+//# sourceMappingURL=TableColumnsSelector.styles.js.map

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.styles.ts"],"sourcesContent":["import {createStyles} from '@mantine/core';\n\nexport default createStyles((theme) => ({\n root: {maxWidth: '100%'},\n wrapper: {\n display: 'inline-flex',\n },\n}));\n"],"names":["createStyles","theme","root","maxWidth","wrapper","display"],"mappings":"AAAA,SAAQA,YAAY,QAAO,gBAAgB;AAE3C,eAAeA,aAAa,CAACC,QAAW,CAAA;QACpCC,MAAM;YAACC,UAAU;QAAM;QACvBC,SAAS;YACLC,SAAS;QACb;IACJ,CAAA,GAAI"}

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.types.d.ts ADDED Viewed

@@ -0,0 +1,46 @@
+import { DefaultProps, Selectors } from '@mantine/core';
+import { ReactNode } from 'react';
+import useStyles from './TableColumnsSelector.styles';
+type TableColumnsSelectorStylesNames = Selectors<typeof useStyles>;
+export interface TableColumnsSelectorProps extends DefaultProps<TableColumnsSelectorStylesNames> {
+    /**
+     * The label of the button
+     * @default 'Edit columns'
+     */
+    label?: ReactNode;
+    /**
+     * The style variant of the button
+     * @default 'outline'
+     */
+    buttonVariant?: string;
+    /**
+     * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.
+     * @default []
+     */
+    nonHideableColumns?: string[];
+    /**
+     * Whether the count of visible columns is shown in the button label.
+     * @default false
+     */
+    showVisibleCountLabel?: boolean;
+    /**
+     * The maximum number of columns that can be selected at the same time.
+     * If defined a footer will render with the remaining number of columns that can be selected.
+     */
+    maxSelectableColumns?: number;
+    /**
+     * A dictionary of column ids and names to use for the checkbox labels.
+     */
+    columnNames: Record<string, string>;
+    /**
+     * The content to display in the footer when maxSelectableColumns is defined.
+     */
+    footer?: ReactNode;
+    /**
+     * The tooltip to display when the user hovers over a disabled checkbox.
+     * @default 'You have reached the maximum display limit.'
+     */
+    limitReachedTooltip?: string;
+}
+export {};
+//# sourceMappingURL=TableColumnsSelector.types.d.ts.map

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.types.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"TableColumnsSelector.types.d.ts","sourceRoot":"","sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,YAAY,EAAE,SAAS,EAAC,MAAM,eAAe,CAAC;AACtD,OAAO,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAChC,OAAO,SAAS,MAAM,+BAA+B,CAAC;AAEtD,KAAK,+BAA+B,GAAG,SAAS,CAAC,OAAO,SAAS,CAAC,CAAC;AAEnE,MAAM,WAAW,yBAA0B,SAAQ,YAAY,CAAC,+BAA+B,CAAC;IAC5F;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B;;;OAGG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACpC;;OAEG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAChC"}

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.types.js ADDED Viewed

@@ -0,0 +1,3 @@
+export { };
+//# sourceMappingURL=TableColumnsSelector.types.js.map

package/dist/esm/components/table/table-columns-selector/TableColumnsSelector.types.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"sources":["../../../../../src/components/table/table-columns-selector/TableColumnsSelector.types.ts"],"sourcesContent":["import {DefaultProps, Selectors} from '@mantine/core';\nimport {ReactNode} from 'react';\nimport useStyles from './TableColumnsSelector.styles';\n\ntype TableColumnsSelectorStylesNames = Selectors<typeof useStyles>;\n\nexport interface TableColumnsSelectorProps extends DefaultProps<TableColumnsSelectorStylesNames> {\n /**\n * The label of the button\n * @default 'Edit columns'\n */\n label?: ReactNode;\n /**\n * The style variant of the button\n * @default 'outline'\n */\n buttonVariant?: string;\n /**\n * An array of column ids that the user cannot hide. This is useful for columns that are required for the table to function properly.\n * @default []\n */\n nonHideableColumns?: string[];\n /**\n * Whether the count of visible columns is shown in the button label.\n * @default false\n */\n showVisibleCountLabel?: boolean;\n /**\n * The maximum number of columns that can be selected at the same time.\n * If defined a footer will render with the remaining number of columns that can be selected.\n */\n maxSelectableColumns?: number;\n /**\n * A dictionary of column ids and names to use for the checkbox labels.\n */\n columnNames: Record<string, string>;\n /**\n * The content to display in the footer when maxSelectableColumns is defined.\n */\n footer?: ReactNode;\n /**\n * The tooltip to display when the user hovers over a disabled checkbox.\n * @default 'You have reached the maximum display limit.'\n */\n limitReachedTooltip?: string;\n}\n"],"names":[],"mappings":"AAAA,WA6CC"}

package/dist/esm/theme/Theme.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,oBAAoB,EAI5B,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,EAAE,~~oBAwZzB~~,CAAC"}
1	+ {"version":3,"file":"Theme.d.ts","sourceRoot":"","sources":["../../../src/theme/Theme.tsx"],"names":[],"mappings":"AAEA,OAAO,EAIH,KAAK,oBAAoB,EAI5B,MAAM,eAAe,CAAC;AAIvB,eAAO,MAAM,WAAW,EAAE,oBAgazB,CAAC"}

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

@@ -17,6 +17,14 @@ export const plasmaTheme = {
         lg: '32px',
         xl: '40px'
     },
+    globalStyles: (theme)=>({
+            body: {
+                ...theme.fn.fontStyles(),
+                fontSize: theme.fontSizes.sm,
+                lineHeight: theme.lineHeight,
+                fontWeight: 300
+            }
+        }),
     primaryColor: 'action',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',

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 getStylesRef,\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 lineHeight: theme.lineHeight,\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 lineHeight: theme.lineHeight,\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n maw: 300,\n multiline: true,\n withArrow: true,\n withinPortal: 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 Select: {\n styles: (theme) => ({\n input: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n },\n item: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n\n '&[data-hovered]': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],\n },\n\n '&[data-selected]': {\n backgroundColor: theme.fn.variant({variant: 'light'}).background,\n color: theme.fn.variant({variant: 'light'}).color,\n ...theme.fn.hover({backgroundColor: theme.fn.variant({variant: 'light'}).hover}),\n },\n },\n }),\n },\n NavLink: {\n styles: (theme) => ({\n root: {\n color: theme.colors.gray[6],\n borderRadius: `${theme.defaultRadius}px 0px 0px ${theme.defaultRadius}px`,\n ...theme.fn.hover({\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],\n }),\n },\n label: {\n ref: getStylesRef('label'),\n fontWeight: 500,\n },\n children: {\n [`.${getStylesRef('label')}`]: {\n fontWeight: 300,\n },\n },\n }),\n },\n Navbar: {\n styles: (theme) => ({\n root: {\n borderColor: theme.colors.gray[3],\n },\n }),\n },\n ScrollArea: {\n styles: {\n viewport: {\n // https://github.com/radix-ui/primitives/issues/926\n '&[data-radix-scroll-area-viewport]': {\n '& > :first-of-type': {\n display: 'block !important',\n },\n },\n },\n },\n },\n Divider: {\n defaultProps: {\n color: 'gray.3',\n },\n },\n },\n};\n"],"names":["CheckSize16Px","InfoSize24Px","color","getSize","getStylesRef","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","maw","multiline","withArrow","withinPortal","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","Select","input","dark","item","background","NavLink","borderRadius","ref","children","Navbar","ScrollArea","viewport","Divider"],"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 getStylesRef,\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 globalStyles: (theme) => ({\n body: {\n ...theme.fn.fontStyles(),\n fontSize: theme.fontSizes.sm,\n lineHeight: theme.lineHeight,\n fontWeight: 300,\n },\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 lineHeight: theme.lineHeight,\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 lineHeight: theme.lineHeight,\n },\n }),\n },\n TextInput: {\n defaultProps: {\n radius: 8,\n },\n },\n Tooltip: {\n defaultProps: {\n color: 'navy',\n maw: 300,\n multiline: true,\n withArrow: true,\n withinPortal: 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 Select: {\n styles: (theme) => ({\n input: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n },\n item: {\n color: theme.colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.gray[7],\n\n '&[data-hovered]': {\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[1],\n },\n\n '&[data-selected]': {\n backgroundColor: theme.fn.variant({variant: 'light'}).background,\n color: theme.fn.variant({variant: 'light'}).color,\n ...theme.fn.hover({backgroundColor: theme.fn.variant({variant: 'light'}).hover}),\n },\n },\n }),\n },\n NavLink: {\n styles: (theme) => ({\n root: {\n color: theme.colors.gray[6],\n borderRadius: `${theme.defaultRadius}px 0px 0px ${theme.defaultRadius}px`,\n ...theme.fn.hover({\n backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],\n }),\n },\n label: {\n ref: getStylesRef('label'),\n fontWeight: 500,\n },\n children: {\n [`.${getStylesRef('label')}`]: {\n fontWeight: 300,\n },\n },\n }),\n },\n Navbar: {\n styles: (theme) => ({\n root: {\n borderColor: theme.colors.gray[3],\n },\n }),\n },\n ScrollArea: {\n styles: {\n viewport: {\n // https://github.com/radix-ui/primitives/issues/926\n '&[data-radix-scroll-area-viewport]': {\n '& > :first-of-type': {\n display: 'block !important',\n },\n },\n },\n },\n },\n Divider: {\n defaultProps: {\n color: 'gray.3',\n },\n },\n },\n};\n"],"names":["CheckSize16Px","InfoSize24Px","color","getSize","getStylesRef","rem","PlasmaColors","plasmaTheme","colorScheme","fontFamily","black","primary","gray","defaultRadius","lineHeight","spacing","xs","sm","md","lg","xl","globalStyles","theme","body","fn","fontStyles","fontSize","fontSizes","fontWeight","primaryColor","headings","sizes","h1","undefined","h2","h3","h4","h5","h6","shadows","colors","components","Alert","defaultProps","icon","height","styles","title","Title","root","letterSpacing","Text","weight","size","Button","variants","outline","backgroundColor","Modal","fullScreen","padding","variant","content","flex","overflow","width","header","borderBottom","paddingTop","ModalOverlay","navy","opacity","InputWrapper","withAsterisk","label","marginBottom","description","invalid","red","borderColor","error","TextInput","radius","Tooltip","maw","multiline","withArrow","withinPortal","zIndex","Loader","DateRangePicker","cell","textAlign","Anchor","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","Select","input","dark","item","background","NavLink","borderRadius","ref","children","Navbar","ScrollArea","viewport","Divider"],"mappings":"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"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "52.26.6",
+  "version": "52.27.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.41.0",
-    "@coveord/plasma-react-icons": "52.26.1",
-    "@coveord/plasma-tokens": "52.23.1"
+    "@coveord/plasma-tokens": "52.23.1",
+    "@coveord/plasma-react-icons": "52.26.1"
   },
   "devDependencies": {
     "@emotion/react": "11.11.1",

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

@@ -26,11 +26,12 @@ const useStyles = createStyles<string>((theme) => ({
 }));
 export const TableComponentsOrder = {
-    MultiSelectInfo: 6,
-    Actions: 5,
-    Predicate: 4,
-    Filter: 3,
-    DateRangePicker: 2,
+    MultiSelectInfo: 7,
+    Actions: 6,
+    Predicate: 5,
+    Filter: 4,
+    DateRangePicker: 3,
+    ColumnsSelector: 2,
     LayoutControl: 1,
 };

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

@@ -21,6 +21,7 @@ import {TableLayouts} from './layouts/TableLayouts';
 import {TableActions} from './table-actions/TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';
 import {TableSelectableColumn} from './table-column/TableSelectableColumn';
+import {TableColumnsSelector} from './table-columns-selector/TableColumnsSelector';
 import {TableConsumer} from './table-consumer/TableConsumer';
 import {TableDateRangePicker} from './table-date-range-picker/TableDateRangePicker';
 import {TableFilter} from './table-filter/TableFilter';
@@ -91,6 +92,8 @@ export const Table: TableType = <T,>({
         ...options,
     });
+    const getAllColumns = table.getAllFlatColumns;
     const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
@@ -144,7 +147,7 @@ export const Table: TableType = <T,>({
     }
     const Layout = layouts.find(({name}) => name === form.values.layout);
-    const hasRows = table.getRowModel().rows.length > 0;
+    const hasRows = table.getRowModel()?.rows.length > 0;
     return (
         <Box ref={outsideClickRef}>
@@ -164,6 +167,7 @@ export const Table: TableType = <T,>({
                     getPageCount: table.getPageCount,
                     disableRowSelection,
                     layouts,
+                    getAllColumns,
                 }}
             >
                 {consumer}
@@ -217,6 +221,7 @@ export const Table: TableType = <T,>({
     );
 };
+Table.ColumnsSelector = TableColumnsSelector;
 Table.Actions = TableActions;
 Table.Filter = TableFilter;
 Table.Footer = TableFooter;

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

@@ -2,6 +2,7 @@ import {Icon} from '@coveord/plasma-react-icons';
 import {DefaultProps, Selectors} from '@mantine/core';
 import {UseFormReturnType} from '@mantine/form';
 import {
+    Column,
     ColumnDef,
     CoreOptions,
     TableOptions,
@@ -11,10 +12,12 @@ import {
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
+import useStyles from './Table.styles';
 import {TableLayoutProps} from './layouts/RowLayout.types'; // TODO https://coveord.atlassian.net/browse/ADUI-9182
 import {TableLayouts} from './layouts/TableLayouts';
 import {TableActions} from './table-actions/TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './table-column/TableCollapsibleColumn';
+import {TableColumnsSelector} from './table-columns-selector/TableColumnsSelector';
 import {TableConsumer} from './table-consumer/TableConsumer';
 import {TableDateRangePicker} from './table-date-range-picker/TableDateRangePicker';
 import {TableFilter} from './table-filter/TableFilter';
@@ -25,7 +28,6 @@ import {TableLoading} from './table-loading/TableLoading';
 import {TablePagination} from './table-pagination/TablePagination';
 import {TablePerPage} from './table-per-page/TablePerPage';
 import {TablePredicate} from './table-predicate/TablePredicate';
-import useStyles from './Table.styles';
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -84,6 +86,10 @@ export type TableFormType = {
 };
 export type TableContextType<TData> = {
+    /**
+     * Returns all flat columns in the table.
+     */
+    getAllColumns: () => Array<Column<TData, unknown>>;
     /**
      * Function to call when the table needs an update
      */
@@ -262,6 +268,7 @@ export interface TableProps<T> extends DefaultProps<TableStylesNames> {
 export interface TableType {
     <T>(props: TableProps<T>): ReactElement;
+    ColumnsSelector: typeof TableColumnsSelector;
     Actions: typeof TableActions;
     Filter: typeof TableFilter;
     Footer: typeof TableFooter;

package/src/components/table/__tests__/TableColumnsSelector.spec.tsx ADDED Viewed

@@ -0,0 +1,260 @@
+import {Box} from '@mantine/core';
+import {ColumnDef, createColumnHelper} from '@tanstack/table-core';
+import {render, screen, userEvent} from '@test-utils';
+import {Table} from '../Table';
+import {TableColumnsSelector} from '../table-columns-selector/TableColumnsSelector';
+const mockData = [
+    {
+        name: 'John Doe',
+        age: 30,
+        email: 'john.doe@example.com',
+        phone: '123-456-7890',
+        body: 'coucou',
+    },
+    {
+        name: 'Jane Doe',
+        age: 25,
+        email: 'jane.doe@example.com',
+        phone: '098-765-4321',
+        body: 'coucou 2',
+    },
+];
+const columnNames: Record<string, string> = {
+    name: 'Name',
+    age: 'Age',
+    email: 'Email',
+    phone: 'Phone',
+};
+type RowData = {
+    name: string;
+    age: number;
+    email: string;
+    phone: string;
+    body: string;
+};
+const columnHelper = createColumnHelper<RowData>();
+const columns: Array<ColumnDef<RowData>> = [
+    columnHelper.accessor('name', {enableSorting: false}),
+    columnHelper.accessor('age', {enableSorting: false}),
+    columnHelper.accessor('email', {enableSorting: false}),
+    columnHelper.accessor('phone', {enableSorting: false}),
+    Table.CollapsibleColumn as ColumnDef<RowData>,
+];
+describe('TableColumnsSelector', () => {
+    it('render the edit button in the table header', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+        expect(screen.getByRole('button', {name: 'Edit columns'})).toBeVisible();
+        expect(screen.queryByRole('button', {name: 'Edit columns (4)'})).not.toBeInTheDocument();
+    });
+    it('renders the custom label when defined', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} label="Custom label" />
+                </Table.Header>
+            </Table>,
+        );
+        expect(screen.getByRole('button', {name: 'Custom label'})).toBeVisible();
+    });
+    it('renders the count of visible columns if showVisibleCountLabel is true', () => {
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} showVisibleCountLabel />
+                </Table.Header>
+            </Table>,
+        );
+        expect(screen.getByRole('button', {name: 'Edit columns (4)'})).toBeVisible();
+    });
+    it('renders all columns in the dropdown, except the collapsible and the multiselectRow by default', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table
+                data={mockData}
+                columns={columns}
+                multiRowSelectionEnabled
+                getExpandChildren={(datum) => <Box py="xs">{datum.body}</Box>}
+            >
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        // columns are rendered
+        expect(screen.getAllByRole('button', {name: /arrowheaddown/i})).toHaveLength(2);
+        expect(screen.getAllByRole('checkbox', {name: /select row/i})).toHaveLength(2);
+        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeVisible();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeVisible();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeVisible();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeVisible();
+        // columns are not in the dropdown
+        expect(screen.queryByRole('checkbox', {name: /collapsible/i})).not.toBeInTheDocument();
+        expect(screen.queryByRole('checkbox', {name: 'select'})).not.toBeInTheDocument();
+    });
+    it('renders all checkboxes checked by default', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+    it('does not render the checkboxes for the columns that are in the nonHideableColumns prop', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} nonHideableColumns={['name']} />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        expect(screen.queryByRole('checkbox', {name: 'Name'})).not.toBeInTheDocument();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+    it('renders unchecked checkboxes for the columns that are not visible in the inital state of the table', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Age'})).toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Email'})).not.toBeChecked();
+        expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
+    });
+    it('renders disabled checkboxes when the maxSelectableColumns is set and the maximum number of columns is checked', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector columnNames={columnNames} maxSelectableColumns={3} />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        const nameCheckBox = screen.getByRole('checkbox', {name: /name/i});
+        const ageCheckBox = screen.getByRole('checkbox', {name: /age/i});
+        const emailCheckBox = screen.getByRole('checkbox', {name: /email/i});
+        const phoneCheckBox = screen.getByRole('checkbox', {name: /phone/i});
+        expect(nameCheckBox).toBeChecked();
+        expect(nameCheckBox).toBeEnabled();
+        expect(ageCheckBox).toBeChecked();
+        expect(ageCheckBox).toBeEnabled();
+        expect(emailCheckBox).not.toBeChecked();
+        expect(emailCheckBox).toBeDisabled();
+        expect(phoneCheckBox).toBeChecked();
+        expect(phoneCheckBox).toBeEnabled();
+        await user.click(nameCheckBox);
+        expect(nameCheckBox).toBeEnabled();
+    });
+    it('renders a tooltip when the maxSelectableColumns is set and the maximum number of columns is checked and the user hover a disabled checkbox', async () => {
+        const user = userEvent.setup();
+        render(
+            <Table data={mockData} columns={columns} initialState={{columnVisibility: {email: false}}}>
+                <Table.Header>
+                    <TableColumnsSelector
+                        columnNames={columnNames}
+                        maxSelectableColumns={3}
+                        limitReachedTooltip="You can display up to 3 columns"
+                    />
+                </Table.Header>
+            </Table>,
+        );
+        await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+        const emailCheckBoxWrapper = screen.getByRole('checkbox', {name: /email/i}).parentElement;
+        await user.hover(emailCheckBoxWrapper);
+        expect(screen.getByText('You can display up to 3 columns')).toBeVisible();
+    });
+    describe('footer', () => {
+        it('does not render the footer when maxSelectableColumns is not defined', async () => {
+            const user = userEvent.setup();
+            render(
+                <Table data={mockData} columns={columns}>
+                    <Table.Header>
+                        <TableColumnsSelector columnNames={columnNames} />
+                    </Table.Header>
+                </Table>,
+            );
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+            expect(screen.queryByText('You can display up to 3 columns')).not.toBeInTheDocument();
+        });
+        it('renders the footer when maxSelectableColumns is defined and footer is defined', async () => {
+            const user = userEvent.setup();
+            render(
+                <Table data={mockData} columns={columns}>
+                    <Table.Header>
+                        <TableColumnsSelector
+                            columnNames={columnNames}
+                            maxSelectableColumns={3}
+                            footer="You can display so many patate"
+                        />
+                    </Table.Header>
+                </Table>,
+            );
+            await user.click(screen.getByRole('button', {name: 'Edit columns'}));
+            expect(screen.getByText('You can display so many patate')).toBeVisible();
+        });
+    });
+});