@coveord/plasma-mantine 49.3.5 → 49.4.0

package/src/components/table/Table.tsx

@@ -1,24 +1,24 @@
 import {Box, Center, Collapse, Loader, Skeleton, Table as MantineTable} from '@mantine/core';
 import {useForm} from '@mantine/form';
-import {useClickOutside, useDidUpdate} from '@mantine/hooks';
+import {useDidUpdate} from '@mantine/hooks';
 import {
     ColumnDef,
     defaultColumnSizing,
     flexRender,
     getCoreRowModel,
     Row,
-    TableState,
+    TableState as TanstackTableState,
     useReactTable,
 } from '@tanstack/react-table';
-import {CoreOptions, InitialTableState, TableOptions} from '@tanstack/table-core';
 import debounce from 'lodash.debounce';
 import defaultsDeep from 'lodash.defaultsdeep';
-import {Children, Fragment, ReactElement, ReactNode, useCallback, useEffect, useState} from 'react';
+import {Children, Dispatch, Fragment, ReactElement, useCallback, useEffect, useState} from 'react';
 
 import useStyles from './Table.styles';
+import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
-import {onTableChangeEvent, TableContext, TableFormType} from './TableContext';
+import {TableContext} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
@@ -30,104 +30,6 @@ import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
 
-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;
-    /**
-     * Function called when the table should update
-     *
-     * @param state the state of the table
-     */
-    onChange?: onTableChangeEvent;
-    /**
-     * 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 & Partial<TableFormType>;
-    /**
-     * 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;
-
-    options?: Omit<
-        Partial<TableOptions<T>>,
-        | 'initialState'
-        | 'data'
-        | 'columns'
-        | 'manualPagination'
-        | 'enableMultiRowSelection'
-        | 'getRowId'
-        | 'getRowCanExpand'
-        | 'enableRowSelection'
-    >;
-}
-
-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;
-}
-
 export const Table: TableType = <T,>({
     data,
     getRowId,
@@ -165,13 +67,15 @@ export const Table: TableType = <T,>({
         enableRowSelection: !loading,
         ...options,
     });
-    const [state, setState] = useState<TableState>(table.initialState);
+    const [state, setState] = useState<TableState<T>>(table.initialState as TableState<T>);
     table.setOptions((prev) => ({
         ...prev,
-        state,
-        onStateChange: setState,
+        state: state as TanstackTableState,
+        onStateChange: setState as Dispatch<React.SetStateAction<TanstackTableState>>,
     }));
-    const {clearSelection, getSelectedRow, getSelectedRows} = useRowSelection(table);
+    const {clearSelection, getSelectedRow, getSelectedRows, outsideClickRef} = useRowSelection(table, {
+        multiRowSelectionEnabled,
+    });
     const isFiltered =
         !!state.globalFilter ||
         Object.keys(form.values?.predicates ?? {}).some((predicate) => !!form.values.predicates[predicate]) ||
@@ -199,12 +103,6 @@ export const Table: TableType = <T,>({
         setState((prevState) => ({...prevState, globalFilter: ''}));
     }, []);
 
-    const outsideClickRef = useClickOutside(() => {
-        if (!multiRowSelectionEnabled) {
-            clearSelection();
-        }
-    });
-
     if (!data) {
         return (
             <Center sx={{flexGrow: 1}}>
@@ -215,14 +113,15 @@ export const Table: TableType = <T,>({
 
     const rows = table.getRowModel().rows.map((row) => {
         const rowChildren = getExpandChildren?.(row.original) ?? null;
+        const isSelected = !!row.getIsSelected();
 
         return (
             <Fragment key={row.id}>
                 <tr
                     onClick={() => row.toggleSelected()}
                     onDoubleClick={() => doubleClickAction?.(row.original)}
-                    className={cx(classes.row, {[classes.rowSelected]: row.getIsSelected()})}
-                    aria-selected={row.getIsSelected()}
+                    className={cx(classes.row, {[classes.rowSelected]: isSelected})}
+                    aria-selected={isSelected}
                 >
                     {row.getVisibleCells().map((cell) => {
                         const size = cell.column.getSize();
@@ -245,7 +144,7 @@ export const Table: TableType = <T,>({
                 {rowChildren ? (
                     <tr>
                         <td
-                            colSpan={columns.length + 1}
+                            colSpan={table.getAllColumns().length}
                             style={{
                                 padding: 0,
                                 borderTop: row.getIsExpanded() ? undefined : 'none',
@@ -302,7 +201,7 @@ export const Table: TableType = <T,>({
                                     rows
                                 ) : (
                                     <tr>
-                                        <td colSpan={columns.length}>{noDataChildren}</td>
+                                        <td colSpan={table.getAllColumns().length}>{noDataChildren}</td>
                                     </tr>
                                 )}
                             </tbody>

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 {
     /**