@coveord/plasma-mantine 49.3.4 → 49.3.6

package/src/components/table/Table.types.ts

@@ -0,0 +1,203 @@
+import {DateRangePickerValue} from '@mantine/dates';
+import {UseFormReturnType} from '@mantine/form';
+import {
+    ColumnDef,
+    CoreOptions,
+    InitialTableState as TanstackInitialTableState,
+    TableOptions,
+    TableState as TanstackTableState,
+} from '@tanstack/table-core';
+import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
+
+import {TableActions} from './TableActions';
+import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableDateRangePicker} from './TableDateRangePicker';
+import {TableFilter} from './TableFilter';
+import {TableFooter} from './TableFooter';
+import {TableHeader} from './TableHeader';
+import {TablePagination} from './TablePagination';
+import {TablePerPage} from './TablePerPage';
+import {TablePredicate} from './TablePredicate';
+
+export type RowSelectionWithData<TData> = Record<string, TData>;
+export interface RowSelectionState<TData> {
+    rowSelection: RowSelectionWithData<TData>;
+}
+
+export interface TableState<TData> extends Omit<TanstackTableState, 'rowSelection'>, RowSelectionState<TData> {}
+
+export interface InitialTableState<TData>
+    extends Omit<TanstackInitialTableState, 'rowSelection'>,
+        Partial<RowSelectionState<TData>>,
+        Partial<TableFormType> {}
+
+export type onTableChangeEvent<TData> = (params: TableState<TData> & TableFormType) => void;
+
+export type TableFormType = {
+    /**
+     * Object containing the table predicates and their selected values
+     *
+     * @example {type: "LONG", origin: "system"}
+     */
+    predicates: Record<string, string>;
+    /**
+     * Selected date range in the table
+     *
+     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
+     */
+    dateRange: DateRangePickerValue;
+};
+
+export type TableContextType<TData> = {
+    /**
+     * Function to call when the table needs an update
+     */
+    onChange: () => void;
+    /**
+     * Internal state of the table
+     *
+     * @see https://tanstack.com/table/v8/docs/api/core/table#state
+     */
+    state: TableState<TData>;
+    /**
+     * Function to update the table state
+     */
+    setState: Dispatch<(prevState: TableState<TData>) => TableState<TData>>;
+    /**
+     * 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
+     */
+    clearFilters: () => void;
+    /**
+     * Function that returns the selected row if any.
+     */
+    getSelectedRow: () => TData | null;
+    /**
+     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.
+     */
+    getSelectedRows: () => TData[];
+    /**
+     * Function that clear the selected row
+     */
+    clearSelection: () => void;
+    /**
+     * Form used to handle predicates and dateRange
+     */
+    form: UseFormReturnType<TableFormType>;
+    /**
+     * Table container ref
+     */
+    containerRef: RefObject<HTMLDivElement>;
+    /**
+     * Whether multi row selection is activated
+     */
+    multiRowSelectionEnabled: boolean;
+    /**
+     * Function that returns the number of pages
+     */
+    getPageCount: () => number;
+};
+
+export interface TableProps<T> {
+    /**
+     * Data to display in the table
+     */
+    data: T[];
+    /**
+     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
+     */
+    getRowId?: CoreOptions<T>['getRowId'];
+    /**
+     * Columns to display in the table.
+     *
+     * @see https://tanstack.com/table/v8/docs/guide/column-defs
+     */
+    columns: Array<ColumnDef<T>>;
+    /**
+     * Function called when the table mounts
+     *
+     * @param state the state of the table
+     */
+    onMount?: onTableChangeEvent<T>;
+    /**
+     * Function called when the table should update
+     *
+     * @param state the state of the table
+     */
+    onChange?: onTableChangeEvent<T>;
+    /**
+     * Function that generates the expandable content of a row
+     * Return null for rows that don't need to be expandable
+     *
+     * @param datum the row for which the children should be generated.
+     */
+    getExpandChildren?: (datum: T) => ReactNode;
+    /**
+     * React children to show when the table has no rows to show. You can leverage useTable to get the state of the table
+     */
+    noDataChildren?: ReactNode;
+    /**
+     * Whether the table is loading or not
+     *
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
+     *
+     * @example
+     * <Table ...>
+     *     <Table.Header>
+     *         <div>Hello</div>
+     *     </Table.Header>
+     * </Table>
+     */
+    children?: ReactNode;
+    /**
+     * Initial state of the table
+     */
+    initialState?: InitialTableState<T>;
+    /**
+     * Action passed when user double clicks on a row
+     */
+    doubleClickAction?: (datum: T) => void;
+    /**
+     * Whether the user can select multiple rows in order to perform actions in bulk
+     *
+     * @default false
+     */
+    multiRowSelectionEnabled?: boolean;
+    /**
+     * Additional options that can be passed to the table
+     */
+    options?: Omit<
+        Partial<TableOptions<T>>,
+        | 'initialState'
+        | 'data'
+        | 'columns'
+        | 'manualPagination'
+        | 'enableMultiRowSelection'
+        | 'getRowId'
+        | 'getRowCanExpand'
+        | 'enableRowSelection'
+        | 'onRowSelectionChange'
+    >;
+}
+
+export interface TableType {
+    <T>(props: TableProps<T>): ReactElement;
+    Actions: typeof TableActions;
+    Filter: typeof TableFilter;
+    Footer: typeof TableFooter;
+    Header: typeof TableHeader;
+    Pagination: typeof TablePagination;
+    PerPage: typeof TablePerPage;
+    Predicate: typeof TablePredicate;
+    DateRangePicker: typeof TableDateRangePicker;
+    CollapsibleColumn: typeof TableCollapsibleColumn;
+    AccordionColumn: typeof TableAccordionColumn;
+}

package/src/components/table/TableActions.tsx

@@ -1,6 +1,7 @@
 import {Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
-import {useTable} from './useTable';
+
+import {useTable} from './TableContext';
 
 interface TableActionsProps<T> {
     /**
@@ -26,12 +27,18 @@ interface TableActionsProps<T> {
 }
 
 export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {
-    const {getSelectedRows, multiRowSelectionEnabled} = useTable();
+    const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();
     const selectedRows = getSelectedRows();
 
     if (selectedRows.length <= 0) {
         return null;
     }
 
-    return <Group spacing="xs">{children(multiRowSelectionEnabled ? selectedRows : selectedRows[0])}</Group>;
+    return (
+        <Group spacing="xs">
+            {multiRowSelectionEnabled
+                ? (children as (data: T[]) => ReactNode)(selectedRows)
+                : (children as (datum: T) => ReactNode)(selectedRows[0])}
+        </Group>
+    );
 };

package/src/components/table/TableContext.tsx

@@ -1,75 +1,14 @@
-import {DateRangePickerValue} from '@mantine/dates';
-import {UseFormReturnType} from '@mantine/form';
-import {TableState} from '@tanstack/react-table';
-import {createContext, Dispatch, RefObject} from 'react';
+import {createContext, useContext} from 'react';
 
-export type onTableChangeEvent = (params: TableState & TableFormType) => void;
+import {TableContextType} from './Table.types';
 
-export type TableFormType = {
-    /**
-     * Object containing the table predicates and their selected values
-     *
-     * @example {type: "LONG", origin: "system"}
-     */
-    predicates: Record<string, string>;
-    /**
-     * Selected date range in the table
-     *
-     * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
-     */
-    dateRange: DateRangePickerValue;
-};
+export const TableContext = createContext<TableContextType<any> | null>(null);
 
-type TableContextType = {
-    /**
-     * Function to call when the table needs an update
-     */
-    onChange: () => void;
-    /**
-     * Internal state of the table
-     *
-     * @see https://tanstack.com/table/v8/docs/api/core/table#state
-     */
-    state: TableState;
-    /**
-     * 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
-     */
-    clearFilters: () => void;
-    /**
-     * Function that returns the selected row if any.
-     */
-    getSelectedRow: () => any | null;
-    /**
-     * Function that returns an array of the selected rows. Most useful when multi row selection is enabled.
-     */
-    getSelectedRows: () => any[];
-    /**
-     * Function that clear the selected row
-     */
-    clearSelection: () => void;
-    /**
-     * Form used to handle predicates and dateRange
-     */
-    form: UseFormReturnType<TableFormType>;
-    /**
-     * Table container ref
-     */
-    containerRef: RefObject<HTMLDivElement>;
-    multiRowSelectionEnabled: boolean;
+export const useTable = <T,>(): TableContextType<T> => {
+    const ctx = useContext(TableContext);
+    if (ctx === null) {
+        throw new Error('useTable must be used inside of a TableContext.Provider');
+    }
 
-    /**
-     * Function that returns the number of pages
-     */
-    getPageCount: () => number;
+    return ctx;
 };
-
-export const TableContext = createContext<TableContextType | null>(null);

package/src/components/table/TableDateRangePicker.tsx

@@ -7,7 +7,7 @@ import {FunctionComponent, useState} from 'react';
 import {Button} from '../button';
 import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';
 import {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';
-import {useTable} from './useTable';
+import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps
     extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {

package/src/components/table/TableFilter.tsx

@@ -1,9 +1,8 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
 import {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';
-import {TableState} from '@tanstack/react-table';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
 
-import {useTable} from './useTable';
+import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
     wrapper: {
@@ -35,7 +34,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     const {state, setState} = useTable();
 
     const changeFilterValue = (value: string) => {
-        setState((prevState: TableState) => ({
+        setState((prevState) => ({
             ...prevState,
             pagination: prevState.pagination
                 ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}

package/src/components/table/TableHeader.tsx

@@ -3,7 +3,7 @@ import {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@man
 import {FunctionComponent, ReactNode} from 'react';
 
 import {Button} from '../button';
-import {useTable} from './useTable';
+import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
     root: {

package/src/components/table/TablePagination.tsx

@@ -1,7 +1,7 @@
 import {Pagination} from '@mantine/core';
-import {TableState} from '@tanstack/react-table';
 import {FunctionComponent} from 'react';
-import {useTable} from './useTable';
+
+import {useTable} from './TableContext';
 
 interface TablePaginationProps {
     /**
@@ -13,7 +13,7 @@ interface TablePaginationProps {
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages}) => {
     const {state, setState, containerRef, getPageCount} = useTable();
     const updatePage = (newPage: number) => {
-        setState((prevState: TableState) => ({
+        setState((prevState) => ({
             ...prevState,
             pagination: {...prevState.pagination, pageIndex: newPage - 1},
         }));

package/src/components/table/TablePerPage.tsx

@@ -1,8 +1,7 @@
 import {Group, SegmentedControl, Text} from '@mantine/core';
-import {TableState} from '@tanstack/react-table';
 import {FunctionComponent} from 'react';
 
-import {useTable} from './useTable';
+import {useTable} from './TableContext';
 
 interface TablePerPageProps {
     /**
@@ -26,7 +25,7 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
     const {state, setState} = useTable();
 
     const updatePerPage = (newPerPage: string) => {
-        setState((prevState: TableState) => ({
+        setState((prevState) => ({
             ...prevState,
             pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},
         }));

package/src/components/table/TablePredicate.tsx

@@ -1,6 +1,7 @@
-import {Select, SelectItem, Group, Text} from '@mantine/core';
+import {Group, Select, SelectItem, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
-import {useTable} from './useTable';
+
+import {useTable} from './TableContext';
 
 interface TablePredicateProps {
     /**

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

@@ -3,9 +3,9 @@ import {render, screen, userEvent, waitFor, within} from '@test-utils';
 import {FunctionComponent} from 'react';
 
 import {Table} from '../Table';
-import {useTable} from '../useTable';
+import {useTable} from '../TableContext';
 
-type RowData = {firstName: string; lastName?: string};
+type RowData = {id: string; firstName: string; lastName?: string};
 
 const columnHelper = createColumnHelper<RowData>();
 const columns: Array<ColumnDef<RowData>> = [
@@ -15,7 +15,13 @@ const columns: Array<ColumnDef<RowData>> = [
 
 describe('Table', () => {
     it('renders the data', () => {
-        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={columns} />);
+        render(
+            <Table
+                getRowId={({id}) => id}
+                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
+                columns={columns}
+            />
+        );
 
         expect(screen.getByRole('columnheader', {name: 'firstName'})).toBeVisible();
         expect(screen.getByRole('columnheader', {name: 'lastName'})).toBeVisible();
@@ -45,7 +51,7 @@ describe('Table', () => {
                 enableSorting: false,
             }),
         ];
-        render(<Table data={[{firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
+        render(<Table data={[{id: '🆔', firstName: 'first', lastName: 'last'}]} columns={customColumns} />);
 
         expect(screen.getByRole('columnheader', {name: 'First Name'})).toBeVisible();
         expect(screen.getByRole('columnheader', {name: 'Last Name'})).toBeVisible();
@@ -141,7 +147,8 @@ describe('Table', () => {
         ];
         render(
             <Table
-                data={[{firstName: 'first', lastName: 'last'}]}
+                getRowId={({id}) => id}
+                data={[{id: '🆔', firstName: 'first', lastName: 'last'}]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
             />
@@ -172,10 +179,11 @@ describe('Table', () => {
         ];
         render(
             <Table
+                getRowId={({id}) => id}
                 data={[
-                    {firstName: 'Luke', lastName: 'Skywalker'},
-                    {firstName: 'Lea', lastName: 'Skywalker'},
-                    {firstName: 'Han', lastName: 'Solo'},
+                    {id: '🆔-1', firstName: 'Luke', lastName: 'Skywalker'},
+                    {id: '🆔-2', firstName: 'Lea', lastName: 'Skywalker'},
+                    {id: '🆔-3', firstName: 'Han', lastName: 'Solo'},
                 ]}
                 getExpandChildren={(row: RowData) => (row.lastName === 'Skywalker' ? <Fixture row={row} /> : null)}
                 columns={customColumns}
@@ -200,9 +208,10 @@ describe('Table', () => {
         ];
         render(
             <Table
+                getRowId={({id}) => id}
                 data={[
-                    {firstName: 'Jack', lastName: 'Russel'},
-                    {firstName: 'Golden', lastName: 'Retriever'},
+                    {id: '🆔-1', firstName: 'Jack', lastName: 'Russel'},
+                    {id: '🆔-2', firstName: 'Golden', lastName: 'Retriever'},
                 ]}
                 getExpandChildren={(row: RowData) => <Fixture row={row} />}
                 columns={customColumns}
@@ -234,14 +243,18 @@ describe('Table', () => {
         const doubleClickSpy = vi.fn();
         render(
             <Table<RowData>
-                data={[{firstName: 'Mario'}, {firstName: 'Luigi'}]}
+                getRowId={({id}) => id}
+                data={[
+                    {id: '🆔-1', firstName: 'Mario'},
+                    {id: '🆔-2', firstName: 'Luigi'},
+                ]}
                 columns={columns}
                 doubleClickAction={doubleClickSpy}
             ></Table>
         );
         await user.dblClick(screen.getByRole('cell', {name: 'Mario'}));
         expect(doubleClickSpy).toHaveBeenCalledTimes(1);
-        expect(doubleClickSpy).toHaveBeenCalledWith({firstName: 'Mario'});
+        expect(doubleClickSpy).toHaveBeenCalledWith({id: '🆔-1', firstName: 'Mario'});
     });
 
     it('reset row selection when user click outside the table', async () => {
@@ -250,9 +263,10 @@ describe('Table', () => {
             <div>
                 <div>I'm a header</div>
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'first', lastName: 'last'},
-                        {firstName: 'patate', lastName: 'king'},
+                        {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                        {id: '🆔-2', firstName: 'patate', lastName: 'king'},
                     ]}
                     columns={columns}
                 />
@@ -276,9 +290,10 @@ describe('Table', () => {
         it('displays a checkbox as the first cell of each row', () => {
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
@@ -293,13 +308,33 @@ describe('Table', () => {
             });
         });
 
+        it('selects the rows specified in the initial state on mount', () => {
+            render(
+                <Table
+                    getRowId={({id}) => id}
+                    data={[
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
+                    ]}
+                    columns={columns}
+                    multiRowSelectionEnabled
+                    initialState={{
+                        rowSelection: {'🆔-2': {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'}},
+                    }}
+                />
+            );
+
+            expect(screen.getByRole('row', {name: /jane doe/i, selected: true})).toBeInTheDocument();
+        });
+
         it('selects all rows of the current page when clicking on the checkbox that is in the column header', async () => {
             const user = userEvent.setup({delay: null});
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled
@@ -321,9 +356,10 @@ describe('Table', () => {
                 <div>
                     <div>I'm a header</div>
                     <Table
+                        getRowId={({id}) => id}
                         data={[
-                            {firstName: 'first', lastName: 'last'},
-                            {firstName: 'patate', lastName: 'king'},
+                            {id: '🆔-1', firstName: 'first', lastName: 'last'},
+                            {id: '🆔-2', firstName: 'patate', lastName: 'king'},
                         ]}
                         columns={columns}
                         multiRowSelectionEnabled
@@ -348,9 +384,10 @@ describe('Table', () => {
             const user = userEvent.setup({delay: null});
             render(
                 <Table
+                    getRowId={({id}) => id}
                     data={[
-                        {firstName: 'John', lastName: 'Smith'},
-                        {firstName: 'Jane', lastName: 'Doe'},
+                        {id: '🆔-1', firstName: 'John', lastName: 'Smith'},
+                        {id: '🆔-2', firstName: 'Jane', lastName: 'Doe'},
                     ]}
                     columns={columns}
                     multiRowSelectionEnabled

package/src/components/table/index.ts

@@ -1,3 +1,3 @@
 export * from './Table';
-export {type onTableChangeEvent} from './TableContext';
-export * from './useTable';
+export {useTable} from './TableContext';
+export {type onTableChangeEvent, type InitialTableState, type TableState, type TableProps} from './Table.types';