@coveord/plasma-mantine 52.12.1 → 52.13.1

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

@@ -22,7 +22,7 @@ describe('Table.LastUpdated', () => {
         const {rerender} = render(
             <Table data={[{name: 'fruit'}]} columns={columns}>
                 <Table.LastUpdated />
-            </Table>
+            </Table>,
         );
 
         expect(screen.getByText('Last update:')).toBeVisible();
@@ -31,7 +31,7 @@ describe('Table.LastUpdated', () => {
         rerender(
             <Table data={[{name: 'fruit'}]} columns={columns}>
                 <Table.LastUpdated label="CUSTOM label:" />
-            </Table>
+            </Table>,
         );
 
         expect(screen.queryByText('Last update:')).not.toBeInTheDocument();

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

@@ -23,7 +23,7 @@ describe('Table.Pagination', () => {
                 <Table.Footer>
                     <Table.Pagination totalPages={3} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         const buttons = screen.getAllByRole('button');
@@ -43,7 +43,7 @@ describe('Table.Pagination', () => {
                 <Table.Footer>
                     <Table.Pagination totalPages={5} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         onChange.mockReset();
@@ -52,7 +52,7 @@ describe('Table.Pagination', () => {
 
         await waitFor(() => {
             expect(onChange).toHaveBeenCalledWith(
-                expect.objectContaining({pagination: expect.objectContaining({pageIndex: 1})})
+                expect.objectContaining({pagination: expect.objectContaining({pageIndex: 1})}),
             );
         });
     });
@@ -77,7 +77,7 @@ describe('Table.Pagination', () => {
                 <Table.Footer>
                     <Table.Pagination totalPages={null} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         expect(screen.getByText('fruits')).toBeVisible();
@@ -111,7 +111,7 @@ describe('Table.Pagination', () => {
                     <Table.PerPage />
                     <Table.Pagination totalPages={5} onPageChange={onChangePage} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         onChangePage.mockReset();
@@ -130,7 +130,7 @@ describe('Table.Pagination', () => {
                 <Table.Footer data-testid="table-footer">
                     <Table.Pagination totalPages={0} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });

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

@@ -21,7 +21,7 @@ describe('Table.PerPage', () => {
                 <Table.Footer>
                     <Table.PerPage label="Per page" />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         expect(screen.getByText('Per page')).toBeVisible();
@@ -37,7 +37,7 @@ describe('Table.PerPage', () => {
                 <Table.Footer>
                     <Table.PerPage label="Per page" values={[2, 7, 12, 17]} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         const radios = screen.getAllByRole('radio');
@@ -60,11 +60,11 @@ describe('Table.PerPage', () => {
                 <Table.Footer>
                     <Table.PerPage />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         expect(onMount).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})
+            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})}),
         );
     });
 
@@ -76,13 +76,13 @@ describe('Table.PerPage', () => {
                 <Table.Footer>
                     <Table.PerPage />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         await user.click(screen.queryByRole('radio', {name: '100'}));
         vi.advanceTimersByTime(500);
         expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})})
+            expect.objectContaining({pagination: expect.objectContaining({pageSize: 100})}),
         );
     });
 
@@ -100,13 +100,13 @@ describe('Table.PerPage', () => {
                     <Table.Pagination totalPages={2} />
                     <Table.PerPage />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         await user.click(screen.queryByRole('radio', {name: '100'}));
         vi.advanceTimersByTime(500);
         expect(onChange).toHaveBeenCalledWith(
-            expect.objectContaining({pagination: expect.objectContaining({pageIndex: 0})})
+            expect.objectContaining({pagination: expect.objectContaining({pageIndex: 0})}),
         );
     });
 
@@ -123,7 +123,7 @@ describe('Table.PerPage', () => {
                     <Table.Pagination totalPages={2} />
                     <Table.PerPage onPerPageChange={onPerPageChange} />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
 
         onPerPageChange.mockReset();
@@ -141,7 +141,7 @@ describe('Table.PerPage', () => {
                 <Table.Footer data-testid="table-footer">
                     <Table.PerPage />
                 </Table.Footer>
-            </Table>
+            </Table>,
         );
         expect(screen.getByTestId('table-footer')).toBeEmptyDOMElement();
     });

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

@@ -27,7 +27,7 @@ describe('Table.Predicate', () => {
                         ]}
                     />
                 </Table.Header>
-            </Table>
+            </Table>,
         );
 
         await waitFor(() => {
@@ -50,7 +50,7 @@ describe('Table.Predicate', () => {
                         ]}
                     />
                 </Table.Header>
-            </Table>
+            </Table>,
         );
 
         await user.click(screen.getByRole('searchbox', {name: 'rank'}));

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

@@ -158,6 +158,7 @@ const RowLayoutBody = <T,>({
                                     width: columnSizing.size ?? 'auto',
                                     minWidth: columnSizing.minSize,
                                     maxWidth: columnSizing.maxSize,
+                                    overflowWrap: 'break-word',
                                 }}
                                 className={cx(classes.cell, {
                                     [classes.rowCollapsibleButtonCell]: cell.column.id === TableCollapsibleColumn.id,

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

@@ -19,7 +19,7 @@ describe('RowLayout', () => {
                 getRowId={({id}) => id}
                 data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                 columns={columns}
-            />
+            />,
         );
 
         expect(screen.getByRole('columnheader', {name: 'firstName'})).toBeVisible();
@@ -28,12 +28,12 @@ describe('RowLayout', () => {
         expect(
             screen.getByRole('cell', {
                 name: /first/i,
-            })
+            }),
         ).toBeVisible();
         expect(
             screen.getByRole('cell', {
                 name: /last/i,
-            })
+            }),
         ).toBeVisible();
     });
 
@@ -72,7 +72,7 @@ describe('RowLayout', () => {
                     {id: 'gary', firstName: 'Gary', lastName: 'Oak'},
                 ]}
                 columns={customColumns}
-            />
+            />,
         );
 
         expect(screen.getByTestId('ash')).toBeVisible();
@@ -99,7 +99,7 @@ describe('RowLayout', () => {
                 data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
-            />
+            />,
         );
 
         // wait for the collapsible icon to show
@@ -135,7 +135,7 @@ describe('RowLayout', () => {
                 ]}
                 getExpandChildren={(row: RowData) => (row.lastName === 'Skywalker' ? <Fixture row={row} /> : null)}
                 columns={customColumns}
-            />
+            />,
         );
 
         // wait for the collapsible icon to show
@@ -163,7 +163,7 @@ describe('RowLayout', () => {
                 ]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
-            />
+            />,
         );
 
         // wait for the collapsible icon to show
@@ -198,7 +198,7 @@ describe('RowLayout', () => {
                 ]}
                 columns={columns}
                 doubleClickAction={doubleClickSpy}
-            ></Table>
+            ></Table>,
         );
         await user.dblClick(screen.getByRole('cell', {name: 'Mario'}));
         expect(doubleClickSpy).toHaveBeenCalledTimes(1);
@@ -218,7 +218,7 @@ describe('RowLayout', () => {
                     ]}
                     columns={columns}
                 />
-            </div>
+            </div>,
         );
 
         await user.click(screen.getByRole('row', {name: /patate king/i}));
@@ -249,7 +249,7 @@ describe('RowLayout', () => {
                         },
                     ]}
                 />
-            </div>
+            </div>,
         );
 
         await user.click(screen.getByRole('row', {name: /patate king/i}));
@@ -280,7 +280,7 @@ describe('RowLayout', () => {
                         },
                     ]}
                 />
-            </div>
+            </div>,
         );
 
         await user.click(screen.getByRole('row', {name: /patate king/i}));
@@ -305,7 +305,7 @@ describe('RowLayout', () => {
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
-                />
+                />,
             );
 
             expect(screen.getByRole('columnheader', {name: /select all from this page/i})).toBeInTheDocument();
@@ -329,7 +329,7 @@ describe('RowLayout', () => {
                     initialState={{
                         rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
                     }}
-                />
+                />,
             );
 
             expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).toBeInTheDocument();
@@ -346,7 +346,7 @@ describe('RowLayout', () => {
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
-                />
+                />,
             );
 
             const selectAll = screen.getByRole('checkbox', {name: /select all from this page/i});
@@ -373,7 +373,7 @@ describe('RowLayout', () => {
                         multiRowSelectionEnabled
                         disableRowSelection
                     />
-                </div>
+                </div>,
             );
 
             await user.click(screen.getByRole('row', {name: /patate king/i}));
@@ -396,7 +396,7 @@ describe('RowLayout', () => {
                     columns={columns}
                     multiRowSelectionEnabled
                     disableRowSelection
-                />
+                />,
             );
 
             expect(screen.getByRole('checkbox', {name: /select all/i})).toHaveStyle('pointerEvents: none');

package/src/components/table/useRowSelection.ts

@@ -11,7 +11,7 @@ export const useRowSelection = <T>(
         onRowSelectionChange,
         multiRowSelectionEnabled,
         additionalRootNodes = [],
-    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>
+    }: Pick<TableProps<T>, 'onRowSelectionChange' | 'multiRowSelectionEnabled' | 'additionalRootNodes'>,
 ) => {
     const outsideClickRef = useRef<HTMLDivElement>();
     useClickOutside(
@@ -21,7 +21,7 @@ export const useRowSelection = <T>(
             }
         },
         null,
-        [outsideClickRef.current, ...additionalRootNodes]
+        [outsideClickRef.current, ...additionalRootNodes],
     );
 
     // Need to call this outside of the onRowSelectionChange of the table to avoid rendering conflicts if the callback queues an update in a parent component.
@@ -36,7 +36,7 @@ export const useRowSelection = <T>(
             table.setState((old) => {
                 const newRowSelection = functionalUpdate(
                     rowSelectionUpdater,
-                    old['rowSelection']
+                    old['rowSelection'],
                 ) as RowSelectionWithData<T>;
 
                 if (isEqual(old['rowSelection'], newRowSelection)) {
@@ -49,7 +49,7 @@ export const useRowSelection = <T>(
                     if (newRowSelection[rowId] === true) {
                         if (!rows[rowId]) {
                             console.error(
-                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.'
+                                'The table was not initialized properly, the rowSelection state should contain an object of type Record<string, TData>.',
                             );
                         }
                         newRowSelection[rowId] = rows[rowId]?.original ?? (true as T);

package/src/form/FormProvider.tsx

@@ -11,7 +11,7 @@ export interface FormProviderProps<Form> {
 
 export function createFormContext<
     Values,
-    TransformValues extends _TransformValues<Values> = (values: Values) => Values
+    TransformValues extends _TransformValues<Values> = (values: Values) => Values,
 >() {
     type Form = UseFormReturnType<Values, TransformValues>;
 
@@ -33,6 +33,6 @@ export function createFormContext<
     return [FormProvider, useFormContext, useForm] as [
         React.FC<FormProviderProps<Form>>,
         () => Form,
-        UseForm<Values, TransformValues>
+        UseForm<Values, TransformValues>,
     ];
 }

package/src/form/useForm.ts

@@ -6,7 +6,7 @@ export const useForm: typeof useMantineForm = (options) => {
 
     const getInputProps: GetInputProps<Record<string, unknown>> = (
         path,
-        {type = 'input', withError = type === 'input', withFocus = true} = {}
+        {type = 'input', withError = type === 'input', withFocus = true} = {},
     ) => {
         const originalPayload = form.getInputProps(path, {type, withError, withFocus});
         if (Array.isArray(originalPayload.value)) {

package/src/theme/Theme.tsx

@@ -7,6 +7,7 @@ import {
     type NotificationProps,
     type StepperStylesParams,
     type TabsStylesParams,
+    getStylesRef,
 } from '@mantine/core';
 
 import {PlasmaColors} from './PlasmaColors';
@@ -140,6 +141,7 @@ export const plasmaTheme: MantineThemeOverride = {
                     fontSize: theme.fontSizes.sm,
                     color: theme.colors.gray[7],
                     marginBottom: theme.spacing.xs,
+                    lineHeight: theme.lineHeight,
                 },
                 invalid: {
                     color: theme.colors.red[9],
@@ -147,6 +149,7 @@ export const plasmaTheme: MantineThemeOverride = {
                 },
                 error: {
                     color: theme.colors.red[9],
+                    lineHeight: theme.lineHeight,
                 },
             }),
         },
@@ -371,5 +374,22 @@ export const plasmaTheme: MantineThemeOverride = {
                 },
             }),
         },
+        NavLink: {
+            styles: (theme) => ({
+                root: {
+                    color: theme.colors.gray[6],
+                    borderRadius: `${theme.defaultRadius}px 0px 0px ${theme.defaultRadius}px`,
+                },
+                label: {
+                    ref: getStylesRef('label'),
+                    fontWeight: 500,
+                },
+                children: {
+                    [`.${getStylesRef('label')}`]: {
+                        fontWeight: 300,
+                    },
+                },
+            }),
+        },
     },
 };

package/src/utils/overrideComponent.ts

@@ -8,10 +8,10 @@
  */
 export const overrideComponent = <
     Component extends (...args: Parameters<Component>) => ReturnType<Component>,
-    StaticProperties = Record<keyof Component, never>
+    StaticProperties = Record<keyof Component, never>,
 >(
     component: Component,
-    properties: StaticProperties
+    properties: StaticProperties,
 ): ((...args: Parameters<Component>) => ReturnType<Component>) & Component & StaticProperties => {
     const componentClone = (...args: Parameters<Component>) => component(...args);
     return Object.assign(componentClone, component, properties);