@coveord/plasma-mantine 59.7.0 → 59.7.1

package/src/__tests__/Utils.tsx

@@ -2,27 +2,11 @@ import {render, RenderOptions, RenderResult} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import {FunctionComponent, PropsWithChildren, ReactElement} from 'react';
 
-import {Combobox, createTheme, Popover} from '@mantine/core';
 import {Plasmantine} from '../theme/Plasmantine.js';
 
-const testTheme = createTheme({
-    components: {
-        Popover: Popover.extend({
-            defaultProps: {
-                middlewares: {inline: true},
-            },
-        }),
-        Combobox: Combobox.extend({
-            defaultProps: {
-                middlewares: {inline: true},
-            },
-        }),
-    },
-});
-
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>): RenderResult => {
     const TestWrapper: FunctionComponent<PropsWithChildren> = ({children}) => (
-        <Plasmantine withCssVariables={false} theme={testTheme}>
+        <Plasmantine withCssVariables={false} env="test">
             {children}
         </Plasmantine>
     );

package/src/components/DateRangePicker/__tests__/DateRangePicker.spec.tsx

@@ -70,7 +70,7 @@ describe('DateRangePicker', () => {
 
         expect(onChange).toHaveBeenCalledTimes(1);
         expect(onChange).toHaveBeenCalledWith(['2022-01-02T00:00:00.000Z', '2022-01-08T23:59:59.999Z']);
-        expect(screen.queryByRole('dialog')).not.toBeVisible();
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
     });
 
     it('closes popover when Cancel is clicked', async () => {
@@ -81,7 +81,7 @@ describe('DateRangePicker', () => {
         await screen.findByRole('dialog');
         await user.click(screen.getByRole('button', {name: 'Cancel'}));
 
-        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeVisible());
+        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument());
     });
 
     it('calls onCancel when Cancel button is clicked', async () => {

package/src/components/DateRangePicker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -55,8 +55,8 @@ describe('DateRangePickerPopoverCalendar', () => {
         await user.click(screen.getByRole('button', {name: '14 February 2022'}));
 
         // hides the calendar when the second date is clicked
-        await waitFor(() => expect(screen.queryByRole('button', {name: '8 January 2022'})).not.toBeVisible());
-        expect(screen.queryByRole('button', {name: '8 February 2022'})).not.toBeVisible();
+        await waitFor(() => expect(screen.queryByRole('button', {name: '8 January 2022'})).not.toBeInTheDocument());
+        expect(screen.queryByRole('button', {name: '8 February 2022'})).not.toBeInTheDocument();
 
         expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-02-14T00:00:00.000Z"]');
 

package/src/components/Table/Table.tsx

@@ -252,12 +252,14 @@ export const Table = <T,>(props: TableProps<T> & {ref?: ForwardedRef<HTMLDivElem
                                             </th>
                                         </tr>
                                     ) : null}
-                                    <Layout.Header
-                                        getRowExpandedContent={getRowExpandedContent}
-                                        getRowAttributes={getRowAttributes}
-                                        loading={loading}
-                                        {...layoutProps}
-                                    />
+                                    {hasRows || loading ? (
+                                        <Layout.Header
+                                            getRowExpandedContent={getRowExpandedContent}
+                                            getRowAttributes={getRowAttributes}
+                                            loading={loading}
+                                            {...layoutProps}
+                                        />
+                                    ) : null}
                                 </thead>
                                 <tbody {...getStyles('body')}>
                                     {hasRows ? (
@@ -297,20 +299,66 @@ export const TableComponentsOrder = {
     LayoutControl: 1,
 };
 
+/**
+ * Generic column to use when your table needs an accordion (collapsible rows, but only one open at a time).
+ */
 Table.AccordionColumn = TableAccordionColumn;
+/**
+ * Generic column to use when your table needs actions on rows
+ */
 Table.ActionsColumn = TableActionsColumn;
+/**
+ * An action to display when a row is selected in the table. Can be displayed as a primary action or menu item.
+ */
 Table.ActionItem = TableActionItem;
+/**
+ * Generic column to use when your table needs collapsible rows
+ */
 Table.CollapsibleColumn = TableCollapsibleColumn;
+/**
+ * A date range picker integrated with the table store that resets pagination on change.
+ */
 Table.DateRangePicker = TableDateRangePicker;
+/**
+ * A search input that filters table rows by matching against any field.
+ * The filter value is debounced and resets pagination to the first page on change.
+ */
 Table.Filter = TableFilter;
+/**
+ * Container for elements displayed below the table body, typically pagination and per-page controls.
+ */
 Table.Footer = TableFooter;
+/**
+ * Container for elements displayed above the table body such as filters, predicates, and actions.
+ */
 Table.Header = TableHeader;
+/**
+ * Displays the time of the last data update, automatically refreshing when table data changes.
+ */
 Table.LastUpdated = TableLastUpdated;
+/**
+ * Available table layout configurations (e.g., Rows, Cards).
+ */
 Table.Layouts = TableLayouts;
+/**
+ * Skeleton overlay displayed while the table data is loading.
+ */
 Table.Loading = TableLoading;
+/**
+ * Container displayed when the table has no data to show.
+ */
 Table.NoData = TableNoData;
+/**
+ * Page navigation control that syncs with the table store and scrolls to the table on page change.
+ */
 Table.Pagination = TablePagination;
+/**
+ * Control allowing users to choose how many results are displayed per page.
+ */
 Table.PerPage = TablePerPage;
+/**
+ * A dropdown that filters table data by a predefined set of values and resets pagination on change.
+ */
 Table.Predicate = TablePredicate;
 
 Table.extend = identity as CustomComponentThemeExtend<PlasmaTableFactory>;

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

@@ -39,6 +39,25 @@ describe('Table', () => {
             expect(screen.getByTestId('empty-state')).toBeVisible();
         });
 
+        it('hides column headers when filtered, not loading, and showing no data', () => {
+            const Fixture = () => {
+                const store = useTable<RowData>({initialState: {globalFilter: 'something'}});
+                return (
+                    <Table store={store} data={[]} columns={columns}>
+                        <Table.Header data-testid="table-header">header</Table.Header>
+                        <Table.NoData>
+                            <EmptyState isFiltered={store.isFiltered} />
+                        </Table.NoData>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
+
+            expect(screen.queryByRole('columnheader', {name: /firstName/i})).not.toBeInTheDocument();
+            expect(screen.queryByRole('columnheader', {name: /lastName/i})).not.toBeInTheDocument();
+            expect(screen.getByTestId('filtered-empty-state')).toBeVisible();
+        });
+
         it('does not hide the footer and header if the table is filtered', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({initialState: {globalFilter: 'something'}});
@@ -73,6 +92,23 @@ describe('Table', () => {
             expect(screen.getByRole('table')).not.toHaveAttribute('data-loading');
         });
 
+        it('keeps column headers visible when loading with no rows', () => {
+            const Fixture = () => {
+                const store = useTable<RowData>({initialState: {globalFilter: 'something'}});
+                return (
+                    <Table store={store} loading data={[]} columns={columns}>
+                        <Table.NoData>
+                            <EmptyState isFiltered={store.isFiltered} />
+                        </Table.NoData>
+                    </Table>
+                );
+            };
+            render(<Fixture />);
+
+            expect(screen.getByRole('columnheader', {name: /firstName/i})).toBeVisible();
+            expect(screen.getByRole('columnheader', {name: /lastName/i})).toBeVisible();
+        });
+
         it('shows a loading animation over the no data children (filtered)', () => {
             const Fixture = () => {
                 const store = useTable<RowData>({initialState: {globalFilter: 'something'}});

package/src/theme/Plasmantine.tsx

@@ -1,22 +1,40 @@
 import '../styles/global.css';
 
-import {MantineProvider, MantineProviderProps, mergeThemeOverrides} from '@mantine/core';
+import {
+    Combobox,
+    createTheme,
+    MantineProvider,
+    MantineProviderProps,
+    mergeThemeOverrides,
+    Popover,
+} from '@mantine/core';
 import {FunctionComponent} from 'react';
 import {mergeCSSVariablesResolvers} from './mergeCSSVariablesResolvers.js';
 import {plasmaCSSVariablesResolver} from './plasmaCSSVariablesResolver.js';
 import {plasmaTheme} from './Theme.js';
 
+const testThemeOverride = createTheme({
+    components: {
+        Combobox: Combobox.extend({defaultProps: {middlewares: {inline: true}}}),
+        Popover: Popover.extend({defaultProps: {middlewares: {inline: true}}}),
+    },
+});
+
 export const Plasmantine: FunctionComponent<MantineProviderProps> = ({
     children,
     theme: externalTheme,
     cssVariablesResolver: externalCSSVariablesResolver,
+    env,
     ...others
 }) => {
-    const theme = mergeThemeOverrides(plasmaTheme, externalTheme);
+    const theme =
+        env === 'test'
+            ? mergeThemeOverrides(plasmaTheme, testThemeOverride, externalTheme)
+            : mergeThemeOverrides(plasmaTheme, externalTheme);
     const cssVariablesResolver = mergeCSSVariablesResolvers(plasmaCSSVariablesResolver, externalCSSVariablesResolver);
 
     return (
-        <MantineProvider theme={theme} cssVariablesResolver={cssVariablesResolver} {...others}>
+        <MantineProvider theme={theme} cssVariablesResolver={cssVariablesResolver} env={env} {...others}>
             {children}
         </MantineProvider>
     );

package/src/theme/Theme.tsx

@@ -284,9 +284,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         }),
         Combobox: Combobox.extend({
             classNames: ComboboxClasses,
-            defaultProps: {
-                middlewares: {inline: true},
-            },
         }),
         ComboboxChevron: ComboboxChevron.extend({
             defaultProps: {
@@ -443,7 +440,6 @@ export const plasmaTheme: MantineThemeOverride = createTheme({
         Popover: Popover.extend({
             classNames: PopoverClasses,
             defaultProps: {
-                middlewares: {inline: true},
                 position: 'bottom-start',
             },
         }),

package/src/theme/__tests__/Plasmantine.spec.tsx

@@ -0,0 +1,48 @@
+import {MantineThemeOverride, useMantineTheme} from '@mantine/core';
+import {render} from '@testing-library/react';
+import {describe, expect, it} from 'vitest';
+
+import {plasmaTheme} from '../Theme.js';
+import {Plasmantine} from '../Plasmantine.js';
+
+describe('Plasmantine', () => {
+    it('does not include inline middlewares in the base theme', () => {
+        const components = (plasmaTheme as MantineThemeOverride).components;
+        expect(components?.Combobox?.defaultProps?.middlewares).toBeUndefined();
+        expect(components?.Popover?.defaultProps?.middlewares).toBeUndefined();
+    });
+
+    it('injects inline middlewares when env="test"', () => {
+        let theme: ReturnType<typeof useMantineTheme> | undefined;
+        const Spy = () => {
+            theme = useMantineTheme();
+            return null;
+        };
+
+        render(
+            <Plasmantine withCssVariables={false} env="test">
+                <Spy />
+            </Plasmantine>,
+        );
+
+        expect(theme!.components?.Combobox?.defaultProps?.middlewares).toEqual({inline: true});
+        expect(theme!.components?.Popover?.defaultProps?.middlewares).toEqual({inline: true});
+    });
+
+    it('does not inject inline middlewares without env="test"', () => {
+        let theme: ReturnType<typeof useMantineTheme> | undefined;
+        const Spy = () => {
+            theme = useMantineTheme();
+            return null;
+        };
+
+        render(
+            <Plasmantine withCssVariables={false}>
+                <Spy />
+            </Plasmantine>,
+        );
+
+        expect(theme!.components?.Combobox?.defaultProps?.middlewares).toBeUndefined();
+        expect(theme!.components?.Popover?.defaultProps?.middlewares).toBeUndefined();
+    });
+});