@coveord/plasma-mantine 53.1.4 → 54.0.0

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

@@ -1,33 +1,16 @@
 import {Icon} from '@coveord/plasma-react-icons';
 import {BoxProps, StylesApiProps} from '@mantine/core';
-import {UseFormReturnType} from '@mantine/form';
-import {
-    Column,
-    ColumnDef,
-    CoreOptions,
-    InitialTableState as TanstackInitialTableState,
-    TableOptions,
-    TableState as TanstackTableState,
-} from '@tanstack/table-core';
-import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
+import {ColumnDef, CoreOptions, Row, TableOptions} from '@tanstack/table-core';
+import {ReactElement, ReactNode} from 'react';
 
-import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
-import {TableLayoutProps} from './layouts/TableLayouts';
 import {type PlasmaTableFactory} from './Table';
+import {TableStore} from './use-table';
 
-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 TableLayoutProps<TData = unknown> = Pick<
+    TableProps<TData>,
+    'getRowExpandedContent' | 'getRowAttributes' | 'loading'
+> &
+    TableProps<TData>['layoutProps'];
 
 export interface TableLayout {
     (props: {children: ReactNode}): ReactElement;
@@ -45,114 +28,50 @@ export interface TableLayout {
      * Header portion of the table.
      * In the standard row layout that is where column headers would be displayed.
      */
-    Header: <T>(props: TableLayoutProps<T>) => ReactElement;
+    Header: <TData>(props: TableLayoutProps<TData>) => ReactElement;
     /**
      * Body portion of the table.
      * In the standard row layout that is where the rows would be displayed.
      */
-    Body: <T>(props: TableLayoutProps<T>) => ReactElement;
+    Body: <TData>(props: TableLayoutProps<TData>) => ReactElement;
 }
 
-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 interface TableProps<TData> extends BoxProps, StylesApiProps<PlasmaTableFactory> {
+    store: TableStore<TData>;
     /**
-     * Selected layout name
+     * Data to display in the table. Use `null` when the table is initially loading.
      */
-    layout: TableLayout['name'];
-};
-
-export type TableContextType<TData> = {
+    data: TData[] | null;
     /**
-     * Returns all flat columns in the table.
+     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
      */
-    getAllColumns: () => Array<Column<TData, unknown>>;
+    getRowId?: CoreOptions<TData>['getRowId'];
     /**
-     * Function to call when the table needs an update
+     * Allows to define html attributes that will be passed down to each row.
      */
-    onChange: () => void;
+    getRowAttributes?: (datum: TData, index: number, row: Row<TData>) => Record<string, unknown>;
     /**
-     * Internal state of the table
+     * Function that generates the expandable content of a row
+     * Return null for rows that don't need to be expandable
      *
-     * @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;
-    /**
-     * Whether row selection is enabled or not
-     */
-    disableRowSelection: boolean;
-    /**
-     * Function that returns the number of pages
-     */
-    getPageCount: () => number;
-    /**
-     * Available layouts. When more than one layout is provided, it will display a layout control to switch between them.
-     */
-    layouts: TableLayout[];
-};
-
-export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFactory> {
-    /**
-     * Data to display in the table. Use `null` when the table is initially loading.
+     * @param datum the row for which the children should be generated.
      */
-    data: T[] | null;
+    getRowExpandedContent?: (datum: TData, index: number, row: Row<TData>) => ReactNode;
     /**
-     * Defines how each row is uniquely identified. It is highly recommended that you specify this prop to an ID that makes sense.
+     * Function that generates the actions for the selected rows
+     * If the table doesn't support multi selection, access the data[0]
+     * Return an empty array for rows that don't have actions
+     *
+     * @param datum the row for which the children should be generated.
+     * @default []
      */
-    getRowId?: CoreOptions<T>['getRowId'];
+    getRowActions?: (data: TData[]) => TableAction[];
     /**
      * Columns to display in the table.
      *
      * @see https://tanstack.com/table/v8/docs/guide/column-defs
      */
-    columns: Array<ColumnDef<T>>;
+    columns: Array<ColumnDef<TData>>;
     /**
      * Available layouts
      *
@@ -160,28 +79,18 @@ export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFacto
      */
     layouts?: TableLayout[];
     /**
-     * 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.
+     * Props passed down to the active layout Header and Body components
      */
-    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;
+    layoutProps?: {
+        /**
+         * Called by the table layout when a row is double clicked.
+         * @param selectedRow The data of the row that was double clicked
+         * @param index The index of the row that was double clicked
+         * @param row The row object that was double clicked
+         * @returns
+         */
+        onRowDoubleClick?: (selectedRow: TData, index: number, row: Row<TData>) => void;
+    } & Record<string, any>;
     /**
      * Whether the table is loading or not
      *
@@ -189,7 +98,7 @@ export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFacto
      */
     loading?: boolean;
     /**
-     * Childrens to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
+     * Children to display in the table. They need to be wrap in either `Table.Header` or `Table.Footer`
      *
      * @example
      * <Table ...>
@@ -199,32 +108,6 @@ export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFacto
      * </Table>
      */
     children?: ReactNode;
-    /**
-     * Initial state of the table
-     */
-    initialState?: InitialTableState<T>;
-    /**
-     * Action passed when user double clicks on a row
-     */
-    doubleClickAction?: (datum: T) => void;
-    /**
-     * Function called whenever the row selection changes
-     *
-     * @param selectedRows The selected rows
-     */
-    onRowSelectionChange?: (selectedRows: T[]) => void;
-    /**
-     * Whether the user can select multiple rows in order to perform actions in bulk
-     *
-     * @default false
-     */
-    multiRowSelectionEnabled?: boolean;
-    /**
-     * Whether row selection is enabled or not
-     *
-     * @default false
-     */
-    disableRowSelection?: boolean;
     /**
      * Nodes that are considered inside the table.
      *
@@ -238,7 +121,7 @@ export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFacto
      * Additional options that can be passed to the table
      */
     options?: Omit<
-        Partial<TableOptions<T>>,
+        Partial<TableOptions<TData>>,
         | 'initialState'
         | 'data'
         | 'columns'
@@ -250,3 +133,17 @@ export interface TableProps<T> extends BoxProps, StylesApiProps<PlasmaTableFacto
         | 'onRowSelectionChange'
     >;
 }
+
+export interface TableAction {
+    /**
+     * Group to which the action belongs
+     * $$primary is reserved for primary actions
+     * $$confirmPrompt is reserved for InlineConfirm.Prompt, it will hide other actions when prompt is opened
+     * other string will be considered secondary custom group
+     */
+    group: '$$primary' | '$$confirmPrompt' | (string & {});
+    /**
+     * Component to render, should be either `Table.PrimaryAction` or `Table.SecondaryAction`
+     */
+    component: ReactNode;
+}

package/src/components/table/TableContext.tsx

@@ -1,23 +1,24 @@
 import {createSafeContext, GetStylesApi} from '@mantine/core';
-import {createContext, useContext} from 'react';
+import {Table} from '@tanstack/table-core';
+import {MutableRefObject, ReactElement} from 'react';
 import {type PlasmaTableFactory} from './Table';
-import {TableContextType} from './Table.types';
+import {TableAction, TableLayout} from './Table.types';
+import {TableStore} from './use-table';
 
-export const TableContext = createContext<TableContextType<any> | null>(null);
-
-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');
-    }
-
-    return ctx;
-};
-
-interface TableStyleContextType {
+export interface TableContextValue<TData = unknown> {
     getStyles: GetStylesApi<PlasmaTableFactory>;
+    store: TableStore<TData>;
+    layouts: TableLayout[];
+    getRowActions: (datum: TData[]) => TableAction[];
+    table: Table<TData>;
+    containerRef: MutableRefObject<HTMLDivElement>;
+}
+
+export interface TableProviderProps<T> {
+    value: TableContextValue<T>;
+    children: JSX.Element;
 }
 
-export const [TableStylesProvider, useTableStyles] = createSafeContext<TableStyleContextType>(
+export const [TableProvider, useTableContext] = createSafeContext<TableContextValue>(
     'Table component was not found in the tree',
-);
+) as [<TData>(props: TableProviderProps<TData>) => ReactElement, <TData>() => TableContextValue<TData>];