@coveord/plasma-mantine 54.1.2 → 54.2.0

package/src/components/table/layouts/__tests__/RowLayout.spec.tsx

@@ -219,7 +219,7 @@ describe('RowLayout', () => {
         const Fixture = () => {
             const store = useTable<RowData>();
             return (
-                <Table
+                <Table<RowData>
                     store={store}
                     getRowId={({id}) => id}
                     data={data}
@@ -398,11 +398,9 @@ describe('RowLayout', () => {
             expect(onClick).not.toHaveBeenCalled();
 
             const rows = screen.getAllByRole('row');
-            rows.forEach(async (row) => {
-                await user.click(within(row).getByRole('checkbox', {name: /select/i}));
+            await user.click(within(rows[0]).getByRole('checkbox', {name: /select/i}));
 
-                expect(onClick).not.toHaveBeenCalled();
-            });
+            expect(onClick).not.toHaveBeenCalled();
         });
     });
 

package/src/components/table/layouts/row-layout/RowLayout.module.css

@@ -10,6 +10,7 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         & + svg {
             color: var(--mantine-color-gray-5);
         }
@@ -18,9 +19,11 @@
 
 .row {
     overflow-wrap: anywhere;
+
     & td:first-of-type {
         padding-left: 40px;
     }
+
     @mixin hover {
         background-color: var(--mantine-color-gray-1);
     }
@@ -30,14 +33,17 @@
         border-color: var(--mantine-color-gray-3);
         pointer-events: none;
         cursor: not-allowed;
+
         &:checked + svg {
             color: var(--mantine-color-gray-5);
         }
     }
+
     &[data-selected='true'] {
         &[data-multi-selection='false'] {
             background-color: var(--mantine-color-gray-1);
         }
+
         &[data-multi-selection='true'] {
             background-color: transparent;
         }
@@ -51,7 +57,8 @@
 
 .cell {
     vertical-align: middle;
-    /* We must use height instead of minHeight here, otherwise it doesn’t apply*/
+
+    /* We must use height instead of minHeight here, otherwise it doesn’t apply */
     height: 56px;
     padding: var(--mantine-spacing-xs) var(--mantine-spacing-sm);
     border-bottom: rem(1) solid var(--mantine-color-gray-3);

package/src/components/table/layouts/row-layout/RowLayout.tsx

@@ -19,7 +19,7 @@ export type RowLayoutFactory = Factory<{
 }>;
 const defaultProps: Partial<RowLayoutProps> = {};
 
-export const RowLayout = factory<RowLayoutFactory>((props, ref) => {
+export const RowLayout = factory<RowLayoutFactory>((props) => {
     const {children, styles, classNames, unstyled} = useProps('PlasmaRowLayout', defaultProps, props);
     const getStyles = useStyles<RowLayoutFactory>({
         name: 'PlasmaRowLayout',

package/src/components/table/layouts/row-layout/RowLayoutBody.tsx

@@ -94,7 +94,7 @@ export const RowLayoutBody = <T,>(props: RowLayoutBodyProps<T> & {ref?: Forwarde
                                 data-testid={cell.id}
                                 className={ctx.getStyles('cell', {classNames, styles}).className}
                                 style={{
-                                    width: `${columnSizing.size}px` ?? 'auto',
+                                    width: columnSizing.size ? `${columnSizing.size}px` : 'auto',
                                     minWidth: `${columnSizing.minSize}px`,
                                     maxWidth: `${columnSizing.maxSize}px`,
                                     ...ctx.getStyles('cell', {classNames, styles}).style,

package/src/components/table/table-columns-selector/TableColumnsSelector.tsx

@@ -111,9 +111,10 @@ export const TableColumnsSelector = factory<TableColumnsSelectorFactory>((props,
         >
             <Popover withinPortal position="bottom" shadow="md">
                 <Popover.Target>
-                    <Button variant={buttonVariant}>{`${label}${
-                        showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''
-                    }`}</Button>
+                    <Button variant={buttonVariant}>
+                        {label}
+                        {showVisibleCountLabel ? ` (${selectedColumnsCount})` : ''}
+                    </Button>
                 </Popover.Target>
                 <Popover.Dropdown miw={240}>
                     <ScrollArea.Autosize mah={154}>

package/src/components/table/use-table.ts

@@ -1,7 +1,7 @@
 import {useDidUpdate} from '@mantine/hooks';
-import {type PaginationState, type SortingState, type ExpandedState} from '@tanstack/table-core';
+import {type ExpandedState, type PaginationState, type SortingState} from '@tanstack/table-core';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {useCallback, useMemo, useState} from 'react';
+import {Dispatch, SetStateAction, useCallback, useMemo, useState} from 'react';
 import {type DateRangePickerValue} from '../date-range-picker';
 
 // Create a deeply optional version of another type
@@ -85,43 +85,43 @@ export interface TableStore<TData = unknown> {
     /**
      * Allows to change the pagination state.
      */
-    setPagination: React.Dispatch<React.SetStateAction<TableState<TData>['pagination']>>;
+    setPagination: Dispatch<SetStateAction<TableState<TData>['pagination']>>;
     /**
      * Allows to change the total number of entries.
      */
-    setTotalEntries: React.Dispatch<React.SetStateAction<TableState<TData>['totalEntries']>>;
+    setTotalEntries: Dispatch<SetStateAction<TableState<TData>['totalEntries']>>;
     /**
      * Allows to change the sorting state.
      */
-    setSorting: React.Dispatch<React.SetStateAction<TableState<TData>['sorting']>>;
+    setSorting: Dispatch<SetStateAction<TableState<TData>['sorting']>>;
     /**
      * Allows to change the global filter value.
      */
-    setGlobalFilter: React.Dispatch<React.SetStateAction<TableState<TData>['globalFilter']>>;
+    setGlobalFilter: Dispatch<SetStateAction<TableState<TData>['globalFilter']>>;
     /**
      * Allows to change the rows expanded state.
      */
-    setExpanded: React.Dispatch<React.SetStateAction<TableState<TData>['expanded']>>;
+    setExpanded: Dispatch<SetStateAction<TableState<TData>['expanded']>>;
     /**
      * Allows to change the predicates values.
      */
-    setPredicates: React.Dispatch<React.SetStateAction<TableState<TData>['predicates']>>;
+    setPredicates: Dispatch<SetStateAction<TableState<TData>['predicates']>>;
     /**
      * Allows to change the selected layout.
      */
-    setLayout: React.Dispatch<React.SetStateAction<TableState<TData>['layout']>>;
+    setLayout: Dispatch<SetStateAction<TableState<TData>['layout']>>;
     /**
      * Allows to change the selected date range.
      */
-    setDateRange: React.Dispatch<React.SetStateAction<TableState<TData>['dateRange']>>;
+    setDateRange: Dispatch<SetStateAction<TableState<TData>['dateRange']>>;
     /**
      * Allows to change the current row selection.
      */
-    setRowSelection: React.Dispatch<React.SetStateAction<TableState<TData>['rowSelection']>>;
+    setRowSelection: Dispatch<SetStateAction<TableState<TData>['rowSelection']>>;
     /**
      * Allows to change the visible columns.
      */
-    setColumnVisibility: React.Dispatch<React.SetStateAction<TableState<TData>['columnVisibility']>>;
+    setColumnVisibility: Dispatch<SetStateAction<TableState<TData>['columnVisibility']>>;
     /**
      * Whether the table is currently filtered.
      */
@@ -210,19 +210,17 @@ const defaultState: Partial<TableState> = {
 };
 
 export const useTable = <TData>(userOptions: UseTableOptions<TData> = {}): TableStore<TData> => {
-    const options: UseTableOptions<TData> = defaultsDeep({}, userOptions, defaultOptions);
-    const initialState: TableState<TData> = defaultsDeep({}, options.initialState, defaultState);
+    const options = defaultsDeep({}, userOptions, defaultOptions) as UseTableOptions<TData>;
+    const initialState = defaultsDeep({}, options.initialState, defaultState) as TableState<TData>;
 
-    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(
-        initialState.pagination as PaginationState,
-    );
+    const [pagination, setPagination] = useState<TableState<TData>['pagination']>(initialState.pagination);
     const [totalEntries, _setTotalEntries] = useState<TableState<TData>['totalEntries']>(initialState.totalEntries);
     const [unfilteredTotalEntries, setUnfilteredTotalEntries] = useState<TableState<TData>['totalEntries']>(
         initialState.totalEntries,
     );
-    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting as SortingState);
+    const [sorting, setSorting] = useState<TableState<TData>['sorting']>(initialState.sorting);
     const [globalFilter, setGlobalFilter] = useState<TableState<TData>['globalFilter']>(initialState.globalFilter);
-    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded as ExpandedState);
+    const [expanded, setExpanded] = useState<TableState<TData>['expanded']>(initialState.expanded);
     const [predicates, setPredicates] = useState<TableState<TData>['predicates']>(initialState.predicates);
     const [layout, setLayout] = useState<TableState<TData>['layout']>(initialState.layout);
     const [dateRange, setDateRange] = useState<TableState<TData>['dateRange']>(initialState.dateRange);

package/src/hooks/useParentHeight.ts

@@ -1,4 +1,4 @@
-import {useEffect, useRef, useState} from 'react';
+import {MutableRefObject, useEffect, useRef, useState} from 'react';
 
 const getElementInnerHeight = (el: HTMLElement): number => {
     const fullHeight = el.getBoundingClientRect().height;
@@ -11,7 +11,7 @@ const getElementInnerHeight = (el: HTMLElement): number => {
 /**
  * Computes the available height of the parent element on mount
  */
-export const useParentHeight = (): [number, React.MutableRefObject<HTMLDivElement>] => {
+export const useParentHeight = (): [number, MutableRefObject<HTMLDivElement>] => {
     const [height, setHeight] = useState(-1);
     const ref = useRef<HTMLDivElement>();
 

package/src/index.ts

@@ -1,7 +1,6 @@
-import {MantineColorsTuple} from '@mantine/core';
-
-import {noop} from '@mantine/core';
-import {PlasmaColors} from './theme/PlasmaColors';
+import {MantineColorsTuple, noop} from '@mantine/core';
+import {type RowData} from '@tanstack/table-core';
+import {type PlasmaColors} from './theme/PlasmaColors';
 
 export * from '@mantine/carousel';
 export * from '@mantine/core';
@@ -36,13 +35,12 @@ export * from './theme';
 
 declare module '@mantine/core' {
     export interface MantineThemeColorsOverride {
-        // eslint-disable-next-line @typescript-eslint/ban-types
         colors: Record<keyof typeof PlasmaColors | (string & {}), MantineColorsTuple>;
     }
 }
 
 declare module '@tanstack/react-table' {
-    interface ColumnMeta<TData extends unknown, TValue> {
+    interface ColumnMeta<TData extends RowData, TValue> {
         /**
          * Whether the column is a control column.
          * Control columns are columns that are not part of the data but are used to control the table.

package/src/styles/Alert.module.css

@@ -1,5 +1,6 @@
 .root {
     padding: var(--mantine-spacing-sm);
+
     &:not(&[data-variant]) {
         border-color: color-mix(in srgb, var(--alert-color), var(--alert-bg) 85%);
     }
@@ -22,6 +23,7 @@
 .message {
     @mixin light {
         color: var(--mantine-color-gray-7);
+
         &:where([data-variant='filled']) {
             color: var(--alert-color);
         }

package/src/styles/Checkbox.module.css

@@ -7,6 +7,7 @@
     &[data-indeterminate] {
         background-color: var(--mantine-color-pureWhite);
         border-color: var(--mantine-color-gray-4);
+
         & + svg {
             color: var(--mantine-color-gray-6);
         }

package/src/styles/Combobox.module.css

@@ -4,6 +4,7 @@
     border: 1px solid;
     width: 100%;
     border-color: var(--mantine-color-gray-4);
+
     &:focus {
         border-color: var(--mantine-primary-color-filled);
     }

package/src/styles/Modal.module.css

@@ -4,31 +4,37 @@
             flex: 0 0 100%;
         }
     }
+
     &[data-size='xs'] {
         .content {
             flex: 0 0 rem(432px);
         }
     }
+
     &[data-size='sm'] {
         .content {
             flex: 0 0 rem(664px);
         }
     }
+
     &[data-size='md'] {
         .content {
             flex: 0 0 rem(896px);
         }
     }
+
     &[data-size='lg'] {
         .content {
             flex: 0 0 rem(1120px);
         }
     }
+
     &[data-size='xl'] {
         .content {
             flex: 0 0 rem(88%);
         }
     }
+
     &:not([data-size]) {
         .content {
             flex: 0 0 rem(896px);

package/src/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/src/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/src/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/src/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/src/styles/Skeleton.module.css

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

package/src/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/src/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/tsconfig.json

@@ -1,14 +1,9 @@
 {
     "extends": "../tsconfig-base.json",
     "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-        "tsBuildInfoFile": "./dist/.tsbuildinfo",
-        "baseUrl": ".",
         "paths": {
             "@test-utils": ["./src/__tests__/Utils.tsx"]
         },
         "types": ["vitest/globals"]
-    },
-    "include": ["src", "__mocks__"]
+    }
 }

package/tsconfig.test.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+        "noEmit": true,
+        "declaration": false
+    },
+    "include": ["__mocks__"]
+}

package/vitest.config.ts

@@ -6,7 +6,7 @@ export default defineConfig({
         alias: [
             {
                 find: '@test-utils',
-                replacement: resolve(__dirname, './src/__tests__/Utils.tsx'),
+                replacement: resolve(import.meta.dirname, './src/__tests__/Utils.tsx'),
             },
         ],
     },
@@ -20,8 +20,5 @@ export default defineConfig({
                 replacement: 'monaco-editor/esm/vs/editor/editor.main.js',
             },
         ],
-        deps: {
-            registerNodeLoader: true,
-        },
     },
 });

package/.eslintrc.js

@@ -1,28 +0,0 @@
-module.exports = {
-    env: {
-        browser: true,
-    },
-    extends: ['plasma'],
-    parserOptions: {
-        project: './tsconfig.json',
-        tsconfigRootDir: __dirname,
-        sourceType: 'module',
-    },
-    ignorePatterns: ['.eslintrc.js', 'node_modules', 'dist', '.turbo', 'vitest.config.ts', 'postcss.config.cjs'],
-    rules: {
-        'no-underscore-dangle': 'off',
-    },
-    plugins: ['vitest'],
-    overrides: [
-        {
-            files: ['**/*.spec.*'],
-            env: {
-                'vitest-globals/env': true,
-            },
-            extends: ['plugin:vitest-globals/recommended', 'plugin:testing-library/react'],
-            rules: {
-                'vitest/expect-expect': ['warn'],
-            },
-        },
-    ],
-};

package/tsconfig.build.json

@@ -1,5 +0,0 @@
-{
-    "extends": "./tsconfig.json",
-    "exclude": ["**/*.spec.*", "**/__tests__"],
-    "include": ["src"]
-}