@coveord/plasma-mantine 49.3.3 → 49.3.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coveord/plasma-mantine",
-  "version": "49.3.3",
+  "version": "49.3.4",
   "description": "A Plasma flavoured Mantine theme",
   "keywords": [
     "plasma",

package/src/__tests__/VitestSetup.ts

@@ -1,5 +1,10 @@
-import matchers from '@testing-library/jest-dom/matchers';
+import matchers, {TestingLibraryMatchers} from '@testing-library/jest-dom/matchers';
 import {cleanup} from '@testing-library/react';
+declare global {
+    namespace Vi {
+        interface JestAssertion<T = any> extends jest.Matchers<void, T>, TestingLibraryMatchers<T, void> {}
+    }
+}
 expect.extend(matchers);
 Object.defineProperty(window, 'matchMedia', {
     writable: true,

package/src/components/table/Table.tsx

@@ -226,6 +226,11 @@ export const Table: TableType = <T,>({
         onStateChange: setState,
     }));
     const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);
+    const isFiltered =
+        !!state.globalFilter ||
+        Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||
+        !!form.values.dateRange?.[0] ||
+        !!form.values.dateRange?.[1];
 
     const triggerChange = debounce(() => onChange?.({...state, ...form.values}), 500);
 
@@ -244,7 +249,7 @@ export const Table: TableType = <T,>({
     }, [state.globalFilter, state.pagination, state.sorting, form.values]);
 
     const clearFilters = useCallback(() => {
-        form.setFieldValue('predicates', {});
+        form.setFieldValue('predicates', initialState.predicates ?? {});
         setState((prevState) => ({...prevState, globalFilter: ''}));
     }, []);
 
@@ -319,6 +324,7 @@ export const Table: TableType = <T,>({
                 value={{
                     onChange: triggerChange,
                     state,
+                    isFiltered,
                     setState,
                     clearFilters,
                     getSelectedRow,
@@ -330,28 +336,34 @@ export const Table: TableType = <T,>({
                     getPageCount: table.getPageCount,
                 }}
             >
-                {header}
-                <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
-                    <thead className={classes.header}>
-                        {table.getHeaderGroups().map((headerGroup) => (
-                            <tr key={headerGroup.id}>
-                                {headerGroup.headers.map((columnHeader) => (
-                                    <Th key={columnHeader.id} header={columnHeader} />
+                {!rows.length && !isFiltered && !loading ? (
+                    noDataChildren
+                ) : (
+                    <>
+                        {header}
+                        <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
+                            <thead className={classes.header}>
+                                {table.getHeaderGroups().map((headerGroup) => (
+                                    <tr key={headerGroup.id}>
+                                        {headerGroup.headers.map((columnHeader) => (
+                                            <Th key={columnHeader.id} header={columnHeader} />
+                                        ))}
+                                    </tr>
                                 ))}
-                            </tr>
-                        ))}
-                    </thead>
-                    <tbody>
-                        {rows.length ? (
-                            rows
-                        ) : (
-                            <tr>
-                                <td colSpan={columns.length}>{noDataChildren}</td>
-                            </tr>
-                        )}
-                    </tbody>
-                </MantineTable>
-                {footer}
+                            </thead>
+                            <tbody>
+                                {rows.length ? (
+                                    rows
+                                ) : (
+                                    <tr>
+                                        <td colSpan={columns.length}>{noDataChildren}</td>
+                                    </tr>
+                                )}
+                            </tbody>
+                        </MantineTable>
+                        {footer}
+                    </>
+                )}
             </TableContext.Provider>
         </Box>
     );

package/src/components/table/TableContext.tsx

@@ -35,6 +35,11 @@ type TableContextType = {
      * Function to update the table state
      */
     setState: Dispatch<(prevState: TableState) => TableState>;
+    /**
+     * Whether the table currently as any kind of filter applied.
+     * Useful to determine if the noDataChildren is an empty state or just the result of a filter
+     */
+    isFiltered: boolean;
     /**
      * Function that clears the filter and predicates
      */

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

@@ -3,6 +3,7 @@ import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {FunctionComponent} from 'react';
 
 import {Table} from '../Table';
+import {useTable} from '../useTable';
 
 type RowData = {firstName: string; lastName?: string};
 
@@ -68,6 +69,67 @@ describe('Table', () => {
         expect(screen.getByRole('button', {name: 'Hello'})).toBeVisible();
     });
 
+    it('hides the footer and header when the table is empty and not filtered', () => {
+        const NoData = () => <span data-testid="empty-state" />;
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                header: () => 'First Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+            columnHelper.accessor('lastName', {
+                header: () => 'Last Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+        ];
+        render(
+            <Table data={[]} columns={customColumns} noDataChildren={<NoData />}>
+                <Table.Header data-testid="table-header">header</Table.Header>
+                <Table.Footer data-testid="table-footer">footer</Table.Footer>
+            </Table>
+        );
+
+        expect(screen.queryByTestId('table-header')).not.toBeInTheDocument();
+        expect(screen.queryByTestId('table-footer')).not.toBeInTheDocument();
+        expect(screen.getByTestId('empty-state')).toBeInTheDocument();
+    });
+
+    it('does not hide the footer and header when the table is empty and filtered', () => {
+        const NoData = () => {
+            const {isFiltered} = useTable();
+            return isFiltered ? <span data-testid="filtered-empty-state" /> : <span data-testid="empty-state" />;
+        };
+        const customColumns: Array<ColumnDef<RowData>> = [
+            columnHelper.accessor('firstName', {
+                header: () => 'First Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+            columnHelper.accessor('lastName', {
+                header: () => 'Last Name',
+                cell: (info) => info.getValue().toUpperCase(),
+                enableSorting: false,
+            }),
+        ];
+        render(
+            <Table
+                data={[]}
+                columns={customColumns}
+                noDataChildren={<NoData />}
+                initialState={{globalFilter: 'something'}}
+            >
+                <Table.Header data-testid="table-header">header</Table.Header>
+                <Table.Footer data-testid="table-footer">footer</Table.Footer>
+            </Table>
+        );
+
+        expect(screen.getByTestId('table-header')).toBeInTheDocument();
+        expect(screen.getByTestId('table-footer')).toBeInTheDocument();
+        expect(screen.getByTestId('filtered-empty-state')).toBeInTheDocument();
+        expect(screen.queryByTestId('empty-state')).not.toBeInTheDocument();
+    });
+
     it('opens the collapsible rows when the user click on the toggle', async () => {
         const user = userEvent.setup({delay: null});
         const Fixture: FunctionComponent<{row: RowData}> = ({row}) => <div>Collapsible content: {row.lastName}</div>;