@coveord/plasma-mantine 54.0.0 → 54.0.2

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

@@ -109,7 +109,7 @@ describe('TableColumnsSelector', () => {
         render(<Fixture />);
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
-        const dropdown = screen.getByRole('dialog', {name: 'Edit columns'});
+        const dropdown = await screen.findByRole('dialog', {name: 'Edit columns'});
         const columnsCheckboxes = within(dropdown).getAllByRole('checkbox');
 
         expect(columnsCheckboxes).toHaveLength(4);
@@ -135,7 +135,7 @@ describe('TableColumnsSelector', () => {
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(await screen.findByRole('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();
@@ -163,7 +163,7 @@ describe('TableColumnsSelector', () => {
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        expect(screen.queryByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(await screen.findByRole('checkbox', {name: 'Name'})).toBeChecked();
         expect(screen.getByRole('checkbox', {name: 'Email'})).toBeChecked();
         expect(screen.getByRole('checkbox', {name: 'Phone'})).toBeChecked();
 
@@ -192,7 +192,7 @@ describe('TableColumnsSelector', () => {
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        expect(screen.getByRole('checkbox', {name: 'Name'})).toBeChecked();
+        expect(await screen.findByRole('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();
@@ -214,7 +214,7 @@ describe('TableColumnsSelector', () => {
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        const nameCheckBox = screen.getByRole('checkbox', {name: /name/i});
+        const nameCheckBox = await screen.findByRole('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});
@@ -252,7 +252,7 @@ describe('TableColumnsSelector', () => {
 
         await user.click(screen.getByRole('button', {name: 'Edit columns'}));
 
-        const emailCheckBoxWrapper = screen.getByRole('checkbox', {name: /email/i}).parentElement;
+        const emailCheckBoxWrapper = (await screen.findByRole('checkbox', {name: /email/i})).parentElement;
 
         await user.hover(emailCheckBoxWrapper);
 

package/src/components/table/table-actions/TableHeaderActions.tsx

@@ -1,8 +1,7 @@
 import {Factory, factory, Grid, GridColProps, Group, useProps} from '@mantine/core';
-import {ReactElement} from 'react';
+import {ReactElement, useMemo} from 'react';
 
 import {TableComponentsOrder} from '../Table';
-import {TableAction} from '../Table.types';
 import {useTableContext} from '../TableContext';
 import {TableActionsList} from './TableActionsList';
 
@@ -27,12 +26,15 @@ export const TableHeaderActions = factory<TableHeaderActionsFactory>(
             defaultProps,
             props,
         );
-        const selectedRows = store.getSelectedRows();
-        if (selectedRows.length === 0) {
-            return null;
-        }
 
-        const actions: TableAction[] = getRowActions(selectedRows);
+        const actions = useMemo(() => {
+            const selectedRows = store.getSelectedRows();
+            if (selectedRows.length === 0) {
+                return [];
+            }
+            return getRowActions(selectedRows);
+        }, [store.state.rowSelection]);
+
         if (actions.length === 0) {
             return null;
         }

package/src/theme/Theme.tsx

@@ -42,7 +42,6 @@ import {
     Tabs,
     Text,
     TextInput,
-    Title,
     Tooltip,
     createTheme,
 } from '@mantine/core';
@@ -71,7 +70,6 @@ import SkeletonClasses from '../styles/Skeleton.module.css';
 import StepperClasses from '../styles/Stepper.module.css';
 import TabsClasses from '../styles/Tabs.module.css';
 import TextClasses from '../styles/Text.module.css';
-import TitleClasses from '../styles/Title.module.css';
 import {NotificationVars} from '../vars/Notification.vars';
 import {TextVars} from '../vars/Text.vars';
 import {PlasmaColors} from './PlasmaColors';
@@ -278,9 +276,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
                 radius: 8,
             },
         }),
-        Title: Title.extend({
-            classNames: {root: TitleClasses.root},
-        }),
         Tooltip: Tooltip.extend({
             defaultProps: {
                 color: 'navy',

package/dist/cjs/styles/Title.module.css

@@ -1,5 +0,0 @@
-.root {
-    &:is(h1, h2, h3, h4, h5, h6) {
-        letter-spacing: 0.011em;
-    }
-}

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

@@ -1,5 +0,0 @@
-.root {
-    &:is(h1, h2, h3, h4, h5, h6) {
-        letter-spacing: 0.011em;
-    }
-}

package/src/styles/Title.module.css

@@ -1,5 +0,0 @@
-.root {
-    &:is(h1, h2, h3, h4, h5, h6) {
-        letter-spacing: 0.011em;
-    }
-}