@coveord/plasma-mantine 54.1.2 → 54.2.0

package/dist/esm/styles/NavLink.module.css

@@ -1,7 +1,7 @@
 .root {
     color: var(--mantine-color-gray-6);
     line-height: var(--mantine-line-height);
-    border-radius: var(--mantine-radius-default) 0px 0px var(--mantine-radius-default);
+    border-radius: var(--mantine-radius-default) 0 0 var(--mantine-radius-default);
 
     &[data-active] {
         color: var(--mantine-primary-color-6);

package/dist/esm/styles/Notification.module.css

@@ -3,6 +3,7 @@
     background-color: var(--mantine-color-gray-0);
     box-shadow: var(--mantine-shadow-lg);
     padding: var(--mantine-spacing-sm);
+
     &[data-with-icon] {
         padding-left: var(--mantine-spacing-sm);
     }

package/dist/esm/styles/Pagination.module.css

@@ -1,5 +1,6 @@
 .root {
     --pagination-control-fz: var(--mantine-font-size-sm);
+
     color: var(--mantine-color-gray-6);
 }
 
@@ -8,6 +9,7 @@
 
     @mixin light {
         border-color: var(--mantine-color-gray-3);
+
         @mixin hover {
             &:where(:not(:disabled, [data-disabled])) {
                 background-color: var(--mantine-primary-color-1);
@@ -19,6 +21,7 @@
         @mixin light {
             border-color: var(--pagination-active-bg);
             color: var(--pagination-active-color, var(--mantine-color-white));
+
             @mixin hover {
                 background-color: var(--pagination-active-bg);
             }

package/dist/esm/styles/Select.module.css

@@ -2,6 +2,7 @@
     @mixin light {
         color: var(--mantine-color-gray-7);
     }
+
     @mixin dark {
         color: var(--mantine-color-dark-0);
     }
@@ -9,24 +10,30 @@
 
 .option {
     padding: 12px 16px;
+
     @mixin light {
         color: var(--mantine-color-gray-7);
+
         @mixin hover {
             background-color: var(--mantine-color-gray-1);
         }
     }
+
     @mixin dark {
         color: var(--mantine-color-dark-0);
+
         @mixin hover {
             background-color: var(--mantine-color-dark-4);
         }
     }
+
     &[aria-selected='true'] {
         background-color: var(--mantine-color-action-1);
         color: var(--mantine-color-action-6);
+
         @mixin hover {
             color: var(--mantine-color-action-6);
-            background-color: rgb(237, 246, 255, 0.65);
+            background-color: rgb(237 246 255 / 65%);
         }
     }
 }

package/dist/esm/styles/Skeleton.module.css

@@ -3,6 +3,7 @@
         &::before {
             z-index: unset;
         }
+
         &::after {
             z-index: unset;
         }

package/dist/esm/styles/Stepper.module.css

@@ -1,55 +1,69 @@
 .step {
     &[disabled] {
         color: var(--mantine-color-gray-5);
+
         & .mantine-Stepper-stepDescription {
             color: var(--mantine-color-gray-5);
         }
+
         & .mantine-Stepper-stepIcon {
             border-color: var(--mantine-color-gray-1);
         }
     }
 }
+
 .stepIcon {
     font-weight: 500;
     background-color: var(--mantine-color-gray-1);
     color: inherit;
     border: rem(1) solid var(--mantine-color-gray-3);
+
     &[data-progress] {
         background-color: var(--mantine-color-white);
         border-color: var(--step-color);
     }
+
     &[data-completed] {
         background-color: var(--mantine-color-white);
         border-color: var(--mantine-color-lime-6);
         color: var(--mantine-color-lime-6);
     }
 }
+
 .stepCompletedIcon {
     color: var(--mantine-color-lime-6);
     font-size: rem(16);
 }
+
 .stepDescription {
     color: var(--mantine-color-gray-7);
+
     &[data-size='xs'] {
         font-size: var(--mantine-font-size-xs);
     }
+
     &[data-size='sm'] {
         font-size: var(--mantine-font-size-sm);
     }
+
     &[data-size='md'] {
         font-size: var(--mantine-font-size-md);
     }
+
     &[data-size='lg'] {
         font-size: var(--mantine-font-size-lg);
     }
+
     &[data-size='xl'] {
         font-size: var(--mantine-font-size-xl);
     }
 }
+
 .separator {
     height: rem(1);
     background-color: var(--mantine-color-gray-3);
 }
+
 .verticalSeparator {
     border-left: rem(1) solid var(--mantine-color-gray-3);
 }

package/dist/esm/styles/Tabs.module.css

@@ -3,12 +3,15 @@
         &::before {
             border-style: none;
         }
+
         border-bottom: rem(1) solid var(--mantine-color-gray-3);
     }
+
     &[data-orientation='vertical'] {
         &::before {
             border-style: none;
         }
+
         border-right: rem(1) solid var(--mantine-color-gray-3);
     }
 }
@@ -17,20 +20,25 @@
     &[data-orientation='horizontal'] {
         border-bottom: rem(1) solid transparent;
         margin-bottom: rem(-1);
+
         &[data-active] {
             border-bottom: rem(1) solid var(--mantine-primary-color-6);
         }
     }
+
     &[data-orientation='vertical'] {
         border-right: rem(1) solid transparent;
         margin-right: rem(-1);
+
         &[data-active] {
             border-bottom: rem(1) solid var(--mantine-primary-color-6);
         }
     }
+
     & :hover {
         background-color: var(--mantine-color-gray-0);
     }
+
     &:not([data-active]):hover {
         border-color: var(--mantine-color-gray-3);
     }

package/dist/esm/theme/__tests__/mergeCSSVariablesResolvers.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=mergeCSSVariablesResolvers.spec.d.ts.map

package/dist/esm/theme/__tests__/mergeCSSVariablesResolvers.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mergeCSSVariablesResolvers.spec.d.ts","sourceRoot":"","sources":["../../../../src/theme/__tests__/mergeCSSVariablesResolvers.spec.ts"],"names":[],"mappings":""}

package/dist/esm/theme/__tests__/plasmaCSSVariablesResolver.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=plasmaCSSVariablesResolver.spec.d.ts.map

package/dist/esm/theme/__tests__/plasmaCSSVariablesResolver.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"plasmaCSSVariablesResolver.spec.d.ts","sourceRoot":"","sources":["../../../../src/theme/__tests__/plasmaCSSVariablesResolver.spec.ts"],"names":[],"mappings":""}

package/dist/esm/utils/__tests__/overrideComponent.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=overrideComponent.spec.d.ts.map

package/dist/esm/utils/__tests__/overrideComponent.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overrideComponent.spec.d.ts","sourceRoot":"","sources":["../../../../src/utils/__tests__/overrideComponent.spec.tsx"],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "54.1.2",
+  "version": "54.2.0",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",
@@ -31,33 +31,33 @@
     "@dnd-kit/modifiers": "7.0.0",
     "@dnd-kit/sortable": "8.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@mantine/utils": "6.0.21",
+    "@mantine/utils": "6.0.22",
     "@monaco-editor/react": "4.6.0",
-    "@swc/helpers": "0.5.11",
-    "@tanstack/react-table": "8.17.3",
-    "@tanstack/table-core": "8.17.3",
+    "@swc/helpers": "0.5.12",
+    "@tanstack/react-table": "8.20.1",
+    "@tanstack/table-core": "8.20.1",
     "clsx": "2.1.1",
-    "dayjs": "1.11.11",
+    "dayjs": "1.11.12",
     "fast-deep-equal": "3.1.3",
     "lodash.debounce": "4.0.8",
     "lodash.defaultsdeep": "4.6.1",
     "monaco-editor": "0.50.0",
-    "@coveord/plasma-react-icons": "54.1.1",
-    "@coveord/plasma-tokens": "54.1.1"
+    "@coveord/plasma-react-icons": "54.2.0",
+    "@coveord/plasma-tokens": "54.2.0"
   },
   "devDependencies": {
-    "@mantine/carousel": "7.11.0",
-    "@mantine/code-highlight": "7.11.0",
-    "@mantine/core": "7.11.0",
-    "@mantine/dates": "7.11.0",
-    "@mantine/form": "7.11.0",
-    "@mantine/hooks": "7.11.0",
-    "@mantine/modals": "7.11.0",
-    "@mantine/notifications": "7.11.0",
-    "@swc/cli": "0.3.14",
-    "@swc/core": "1.6.5",
-    "@testing-library/dom": "10.2.0",
-    "@testing-library/jest-dom": "6.4.6",
+    "@mantine/carousel": "7.12.0",
+    "@mantine/code-highlight": "7.12.0",
+    "@mantine/core": "7.12.0",
+    "@mantine/dates": "7.12.0",
+    "@mantine/form": "7.12.0",
+    "@mantine/hooks": "7.12.0",
+    "@mantine/modals": "7.12.0",
+    "@mantine/notifications": "7.12.0",
+    "@swc/cli": "0.4.0",
+    "@swc/core": "1.7.6",
+    "@testing-library/dom": "10.4.0",
+    "@testing-library/jest-dom": "6.4.8",
     "@testing-library/react": "16.0.0",
     "@testing-library/user-event": "14.5.2",
     "@types/lodash.debounce": "4.0.9",
@@ -65,23 +65,19 @@
     "@types/react": "18.3.3",
     "@types/react-dom": "18.3.0",
     "embla-carousel-react": "7.1.0",
-    "eslint-plugin-testing-library": "6.2.2",
-    "eslint-plugin-vitest": "0.5.4",
-    "eslint-plugin-vitest-globals": "1.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jsdom": "24.1.0",
-    "postcss": "8.4.38",
+    "jsdom": "24.1.1",
+    "postcss": "8.4.40",
     "postcss-preset-mantine": "^1.11.0",
     "postcss-simple-vars": "^7.0.1",
-    "publint": "0.2.8",
+    "publint": "0.2.9",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "rimraf": "5.0.7",
-    "sass": "1.77.6",
+    "rimraf": "6.0.1",
+    "sass": "1.77.8",
     "tslib": "2.6.3",
-    "typescript": "5.5.2",
-    "vitest": "1.6.0",
-    "eslint-config-plasma": "54.1.1"
+    "typescript": "5.5.4",
+    "vitest": "2.0.5"
   },
   "peerDependencies": {
     "@mantine/carousel": "^7.6.1",
@@ -122,7 +118,7 @@
   "scripts": {
     "build": "node ../../scripts/build",
     "clean": "rimraf dist",
-    "lintfix": "../../node_modules/.bin/prettier --write \"**/*.{scss,ts,tsx,js,jsx,json,md,yml,html}\" && ../../node_modules/.bin/eslint -c ./.eslintrc.js \"src/**/*.{ts,tsx}\" --fix",
+    "lintfix": "../../node_modules/.bin/prettier --write \"**/*.{scss,ts,tsx,js,jsx,json,md,yml,html}\" && ../../node_modules/.bin/eslint \"src/**/*.{ts,tsx}\" --fix",
     "start": "node ../../scripts/start",
     "test": "TZ=UTC vitest run",
     "test:watch": "TZ=UTC vitest"

package/src/components/action-icon/ActionIcon.tsx

@@ -1,7 +1,7 @@
 import {
     ActionIcon as MantineActionIcon,
     ActionIconCssVariables,
-    ActionIconGroup,
+    type ActionIconGroup,
     type ActionIconProps as MantineActionIconProps,
     ActionIconStylesNames,
     ActionIconVariant,

package/src/components/button/Button.tsx

@@ -1,11 +1,11 @@
 import {
+    Button as MantineButton,
     ButtonCssVariables,
-    ButtonGroup,
+    type ButtonGroup,
+    ButtonProps as MantineButtonProps,
     ButtonStylesNames,
     ButtonVariant,
     Factory,
-    Button as MantineButton,
-    ButtonProps as MantineButtonProps,
     polymorphicFactory,
 } from '@mantine/core';
 import {MouseEventHandler} from 'react';

package/src/components/code-editor/CodeEditor.module.css

@@ -8,6 +8,7 @@
     @mixin light {
         background-color: var(--mantine-color-white);
     }
+
     @mixin dark {
         background-color: var(--mantine-color-black);
     }

package/src/components/collection/Collection.module.css

@@ -1,8 +1,10 @@
 .root {
     position: relative;
 }
+
 .item {
     align-items: baseline;
+
     &[data-isdragging='true'] {
         box-shadow: var(--mantine-shadow-md);
         z-index: 2;

package/src/components/collection/__tests__/Collection.spec.tsx

@@ -46,13 +46,12 @@ describe('Collection', () => {
         render(<Fixture />);
         let items = screen.getAllByTestId('item');
         expect(items).toHaveLength(2);
-        /* eslint-disable-next-line testing-library/no-node-access */
+
         const removeBanana = await within(items[0].parentElement).findByRole('button', {name: /remove/i});
 
         await user.click(removeBanana);
 
         items = screen.getAllByTestId('item');
-        // eslint-disable-next-line jest-dom/prefer-in-document
         expect(screen.getAllByTestId('item')).toHaveLength(1);
         expect(items[0]).toHaveTextContent('orange');
         expect(screen.getByTestId('form-state')).toHaveTextContent('{"fruits":["orange"]}');
@@ -76,7 +75,7 @@ describe('Collection', () => {
         render(<Fixture />);
         let items = screen.getAllByTestId('item');
         expect(items).toHaveLength(2);
-        /* eslint-disable-next-line testing-library/no-node-access */
+
         const removeOrange = await within(items[1].parentElement).findByRole('button', {name: /remove/i});
         await user.click(removeOrange);
 
@@ -187,7 +186,6 @@ describe('Collection', () => {
             expect(screen.queryByRole('button', {name: /remove/i})).not.toBeInTheDocument();
 
             const items = screen.getAllByTestId('item');
-            // eslint-disable-next-line jest-dom/prefer-in-document
             expect(items).toHaveLength(1);
             expect(items[0]).toHaveTextContent('banana');
         });
@@ -207,7 +205,7 @@ describe('Collection', () => {
 
             render(<Fixture />);
             await screen.findAllByRole('button', {name: /remove/i});
-            /* eslint-disable-next-line testing-library/no-node-access */
+
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
@@ -234,7 +232,7 @@ describe('Collection', () => {
             render(<Fixture />);
 
             await screen.findAllByRole('button', {name: /remove/i});
-            /* eslint-disable-next-line testing-library/no-node-access */
+
             const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
             expect(removeButtons).toHaveLength(2);
 
@@ -295,7 +293,7 @@ describe('Collection', () => {
                 render(<Fixture />);
 
                 await screen.findAllByRole('button', {name: /remove/i});
-                /* eslint-disable-next-line testing-library/no-node-access */
+
                 const removeButtons = screen.queryAllByRole('button', {name: /remove/i});
                 expect(removeButtons).toHaveLength(2);
 

package/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx

@@ -7,7 +7,7 @@ import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
 
-interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
+interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
     defaultValue?: DateRangePickerValue;
     /** Value for controlled input */
@@ -35,7 +35,7 @@ interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangeP
     >;
 }
 
-export const DateRangePickerPopoverCalendar = <T extends unknown>({
+export const DateRangePickerPopoverCalendar = ({
     presets,
     value,
     defaultValue,
@@ -43,7 +43,7 @@ export const DateRangePickerPopoverCalendar = <T extends unknown>({
     startProps,
     endProps,
     rangeCalendarProps,
-}: DateRangePickerPopoverCalendarProps<T>) => {
+}: DateRangePickerPopoverCalendarProps) => {
     const [opened, setOpened] = useState(false);
     const ref = useClickOutside(() => setOpened(false));
 

package/src/components/date-range-picker/DateRangePickerPresetSelect.tsx

@@ -8,25 +8,25 @@ export interface DateRangePickerPreset {
     range: DateRangePickerValue;
 }
 
-interface DateRangePickerPresetsSelectProps<T> {
+interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
     value: DateRangePickerValue;
     onChange?(value: DateRangePickerValue): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 
-export const DateRangePickerPresetSelect = <T extends unknown>({
+export const DateRangePickerPresetSelect = ({
     presets,
     value,
     onChange,
     selectProps = {},
-}: DateRangePickerPresetsSelectProps<T>) => {
+}: DateRangePickerPresetsSelectProps) => {
     const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));
 
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             const selected = Object.entries(presets).find(
-                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!),
+                ([, {range}]) => dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]),
             );
             if (selected) {
                 return selected[0];

package/src/components/header/Header.module.css

@@ -3,6 +3,7 @@
         padding: var(--mantine-spacing-xl);
         padding-bottom: var(--mantine-spacing-lg);
     }
+
     & .description {
         color: var(--mantine-color-gray-6);
         font-weight: 300;
@@ -11,9 +12,11 @@
 
 .title {
     word-break: break-word;
+
     &[data-variant='primary'] {
         color: var(--mantine-color-gray-5);
     }
+
     line-height: var(--mantine-line-height-md);
 }
 

package/src/components/sticky-footer/StickyFooter.module.css

@@ -8,10 +8,8 @@
     &[data-variant='modal-footer'] {
         border-top: 1px solid var(--mantine-color-gray-3);
         padding-bottom: 0;
-        margin-top: var(--mb-padding);
-        margin-bottom: calc(var(--mantine-spacing-md) - var(--mb-padding));
-        margin-left: calc(-1 * var(--mb-padding));
-        margin-right: calc(-1 * var(--mb-padding));
+        margin: var(--mb-padding) calc(-1 * var(--mb-padding)) calc(var(--mantine-spacing-md) - var(--mb-padding))
+            calc(-1 * var(--mb-padding));
     }
 }
 

package/src/components/table/Table.module.css

@@ -23,6 +23,7 @@
 .actionsDropdown {
     text-align: left;
 }
+
 .actionsGroup {
     &:has(.actionsGroupItems:empty) {
         /* Hide empty groups */
@@ -34,6 +35,7 @@
 .filterWrapper {
     width: 20rem;
 }
+
 .filterEmpty {
     color: var(--mantine-color-gray-5);
 }
@@ -85,6 +87,7 @@
 .lastUpdatedRoot {
     min-height: 98px;
 }
+
 .lastUpdatedLabel {
     color: var(--mantine-color-gray-6);
 }

package/src/components/table/Table.tsx

@@ -150,7 +150,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
         manualPagination: options?.getPaginationRowModel === undefined,
         enableMultiRowSelection: !!store.multiRowSelectionEnabled,
         getRowId,
-        getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row) ?? false,
+        getRowCanExpand: (row: Row<T>) => !!getRowExpandedContent?.(row.original, row.index, row),
         enableRowSelection: !loading,
         defaultColumn: {
             size: undefined,
@@ -247,7 +247,7 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
                         <>
                             <Box component="table" {...getStyles('table')} mod={{loading}}>
                                 <thead {...getStyles('header')}>
-                                    {!!header ? (
+                                    {header ? (
                                         <tr>
                                             <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
                                                 {header}

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

@@ -8,7 +8,7 @@ import {TableStore} from './use-table';
 
 export type TableLayoutProps<TData = unknown> = Pick<
     TableProps<TData>,
-    'getRowExpandedContent' | 'getRowAttributes' | 'loading'
+    'getRowExpandedContent' | 'getRowAttributes' | 'getRowActions' | 'loading'
 > &
     TableProps<TData>['layoutProps'];
 
@@ -90,7 +90,7 @@ export interface TableProps<TData> extends BoxProps, StylesApiProps<PlasmaTableF
          * @returns
          */
         onRowDoubleClick?: (selectedRow: TData, index: number, row: Row<TData>) => void;
-    } & Record<string, any>;
+    } & Record<string, unknown>;
     /**
      * Whether the table is loading or not
      *

package/src/components/table/__tests__/Table.spec.tsx

@@ -319,7 +319,7 @@ describe('Table', () => {
             expect(screen.queryAllByRole('row', {selected: true})).toEqual([]);
         });
 
-        it('does not display number of selected rows if disableRowSelection is true', async () => {
+        it('does not display number of selected rows if disableRowSelection is true', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({
                     enableMultiRowSelection: true,

package/src/components/table/__tests__/TableDateRangePicker.spec.tsx

@@ -10,7 +10,7 @@ const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [columnHelper.accessor('name', {enableSorting: false})];
 
 describe('Table.DateRangePicker', () => {
-    it('displays the initial dates', async () => {
+    it('displays the initial dates', () => {
         const Fixture = () => {
             const store = useTable<RowData>({initialState: {dateRange: [new Date(2022, 0, 1), new Date(2022, 0, 7)]}});
             return (
@@ -23,6 +23,6 @@ describe('Table.DateRangePicker', () => {
         };
         render(<Fixture />);
 
-        expect(screen.getByRole('button', {name: /jan 01, 2022 \- jan 07, 2022/i})).toBeVisible();
+        expect(screen.getByRole('button', {name: /jan 01, 2022 - jan 07, 2022/i})).toBeVisible();
     });
 });

package/src/components/table/__tests__/TableLastUpdated.spec.tsx

@@ -34,7 +34,7 @@ describe('Table.LastUpdated', () => {
         expect(screen.getByRole('timer')).toHaveTextContent('1:05:50 PM');
     });
 
-    it('displays the label and time', () => {
+    it('displays the custom label and time', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
             return (

package/src/components/table/__tests__/Th.spec.tsx

@@ -16,7 +16,7 @@ const columns: Array<ColumnDef<RowData>> = [
 ];
 
 describe('Th', () => {
-    it('displays the sort icon for every sortable column', async () => {
+    it('displays the sort icon for every sortable column', () => {
         const data: RowData[] = [
             {name: 'apple', type: 'fruit', colors: ['red', 'green']},
             {name: 'potato', type: 'vegetable', colors: ['brown', 'blue', 'yellow']},