@coveord/plasma-mantine 53.1.4 → 54.0.1

package/src/components/table/table-date-range-picker/TableDateRangePicker.tsx

@@ -1,6 +1,5 @@
 import {CalendarSize16Px} from '@coveord/plasma-react-icons';
-import {BoxProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {BoxProps, CompoundStylesApiProps, Factory, Grid, InputBase, Popover, factory, useProps} from '@mantine/core';
 import dayjs from 'dayjs';
 
 import {useState} from 'react';
@@ -11,7 +10,7 @@ import {
     DateRangePickerValue,
 } from '../../date-range-picker';
 import {TableComponentsOrder} from '../Table';
-import {useTable, useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableDateRangePickerStylesNames = 'dateRangeRoot';
 
@@ -45,17 +44,16 @@ const defaultProps: Partial<TableDateRangePickerProps> = {
 };
 
 export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props, ref) => {
-    const ctx = useTableStyles();
+    const {store, getStyles} = useTableContext();
     const {presets, rangeCalendarProps, classNames, className, styles, style, vars, ...others} = useProps(
         'PlasmaTableDateRangePicker',
         defaultProps,
         props,
     );
     const [opened, setOpened] = useState(false);
-    const {form} = useTable();
 
     const onApply = (dates: DateRangePickerValue) => {
-        form.setFieldValue('dateRange', dates);
+        store.setDateRange(dates);
         setOpened(false);
     };
     const onCancel = () => {
@@ -63,8 +61,8 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
     };
 
     const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
-    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
-    const dateRangeInitialized = form.values.dateRange.every((date) => date instanceof Date);
+    const formattedRange = `${formatDate(store.state.dateRange[0])} - ${formatDate(store.state.dateRange[1])}`;
+    const dateRangeInitialized = store.state.dateRange.every((date) => date instanceof Date);
 
     const stylesApiProps = {classNames, styles};
 
@@ -73,10 +71,10 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
             span="content"
             order={TableComponentsOrder.DateRangePicker}
             ref={ref}
-            {...ctx.getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}
+            {...getStyles('dateRangeRoot', {className, style, ...stylesApiProps})}
             {...others}
         >
-            <Popover withinPortal opened={opened}>
+            <Popover withinPortal opened={opened} onChange={setOpened}>
                 <Popover.Target>
                     <InputBase
                         component="button"
@@ -89,7 +87,7 @@ export const TableDateRangePicker = factory<TableDateRangePickerFactory>((props,
                 </Popover.Target>
                 <Popover.Dropdown p={0}>
                     <DateRangePickerInlineCalendar
-                        initialRange={form.values.dateRange}
+                        initialRange={store.state.dateRange}
                         onApply={onApply}
                         onCancel={onCancel}
                         presets={presets}

package/src/components/table/table-filter/TableFilter.tsx

@@ -1,11 +1,10 @@
 import {CrossSize16Px, FilterSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, BoxProps, factory, Factory, Grid, TextInput, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {ActionIcon, BoxProps, CompoundStylesApiProps, Factory, Grid, TextInput, factory, useProps} from '@mantine/core';
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
 import {ChangeEventHandler, MouseEventHandler, useEffect, useState} from 'react';
 
 import {TableComponentsOrder} from '../Table';
-import {useTable, useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableFilterStylesNames = 'filterRoot' | 'filterWrapper' | 'filterEmpty';
 
@@ -30,24 +29,19 @@ const defaultProps: Partial<TableFilterProps> = {
 };
 
 export const TableFilter = factory<TableFilterFactory>((props, ref) => {
-    const ctx = useTableStyles();
+    const {store, getStyles} = useTableContext();
     const {placeholder, classNames, className, styles, style, vars, ...others} = useProps(
         'PlasmaTableFilter',
         defaultProps,
         props,
     );
-    const {state, setState} = useTable();
-    const [filter, setFilter] = useState(state.globalFilter);
+    const [filter, setFilter] = useState(store.state.globalFilter);
     const [debounced, cancel] = useDebouncedValue(filter, 300);
 
     useDidUpdate(() => {
-        setState((prevState) => ({
-            ...prevState,
-            pagination: prevState.pagination
-                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}
-                : prevState.pagination,
-            globalFilter: debounced,
-        }));
+        store.setGlobalFilter(debounced);
+        store.setPagination({pageIndex: 0, pageSize: store.state.pagination.pageSize});
+
         return cancel;
     }, [debounced]);
 
@@ -61,8 +55,8 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
     };
 
     useEffect(() => {
-        setFilter(state.globalFilter);
-    }, [state.globalFilter]);
+        setFilter(store.state.globalFilter);
+    }, [store.state.globalFilter]);
 
     const stylesApiProps = {classNames, styles};
 
@@ -71,11 +65,11 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
             span="content"
             order={TableComponentsOrder.Filter}
             ref={ref}
-            {...ctx.getStyles('filterRoot', {className, style, ...stylesApiProps})}
+            {...getStyles('filterRoot', {className, style, ...stylesApiProps})}
             {...others}
         >
             <TextInput
-                {...ctx.getStyles('filterWrapper', stylesApiProps)}
+                {...getStyles('filterWrapper', stylesApiProps)}
                 placeholder={placeholder}
                 autoComplete="off"
                 rightSection={
@@ -84,7 +78,7 @@ export const TableFilter = factory<TableFilterFactory>((props, ref) => {
                             <CrossSize16Px height={16} />
                         </ActionIcon>
                     ) : (
-                        <FilterSize16Px height={16} {...ctx.getStyles('filterEmpty', stylesApiProps)} />
+                        <FilterSize16Px height={16} {...getStyles('filterEmpty', stylesApiProps)} />
                     )
                 }
                 value={filter}

package/src/components/table/table-header/TableHeader.tsx

@@ -1,12 +1,12 @@
 import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {Box, BoxProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {Box, BoxProps, CompoundStylesApiProps, factory, Factory, Grid, Tooltip, useProps} from '@mantine/core';
 import {ReactNode} from 'react';
 
 import {Button} from '../../button';
 import {TableLayoutControl} from '../layouts/TableLayoutControl';
 import {TableComponentsOrder} from '../Table';
-import {useTable, useTableStyles} from '../TableContext';
+import {TableHeaderActions} from '../table-actions';
+import {useTableContext} from '../TableContext';
 
 export type TableHeaderStylesNames = 'headerRoot' | 'headerGrid' | 'headerGridInner' | 'headerCol';
 
@@ -17,6 +17,12 @@ export interface TableHeaderProps
     children?: ReactNode;
     unselectAllLabel?: string;
     selectedCountLabel?: (count: number) => string;
+    /**
+     * Whether to show actions when rows are selected
+     *
+     * default true
+     */
+    showActions?: boolean;
 }
 
 export type TableHeaderFactory = Factory<{
@@ -29,38 +35,48 @@ export type TableHeaderFactory = Factory<{
 const defaultProps: Partial<TableHeaderProps> = {
     unselectAllLabel: 'Unselect all',
     selectedCountLabel: (count) => `${count} selected`,
+    showActions: true,
 };
 
 export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
-    const ctx = useTableStyles();
-    const {unselectAllLabel, selectedCountLabel, children, classNames, className, styles, style, vars, ...others} =
-        useProps('PlasmaTableHeader', defaultProps, props);
-    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();
-    const selectedRows = getSelectedRows();
+    const {store, getStyles} = useTableContext();
+    const {
+        showActions,
+        unselectAllLabel,
+        selectedCountLabel,
+        children,
+        classNames,
+        className,
+        styles,
+        style,
+        vars: _vars,
+        ...others
+    } = useProps('PlasmaTableHeader', defaultProps, props);
+    const selectedRows = store.getSelectedRows();
 
     const stylesApiProps = {classNames, styles};
-    const innerStyles = ctx.getStyles('headerGridInner', stylesApiProps);
-    const gridStyles = ctx.getStyles('headerGrid', stylesApiProps);
+    const innerStyles = getStyles('headerGridInner', stylesApiProps);
+    const gridStyles = getStyles('headerGrid', stylesApiProps);
 
     return (
-        <Box ref={ref} {...ctx.getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>
+        <Box ref={ref} {...getStyles('headerRoot', {className, style, ...stylesApiProps})} {...others}>
             <Grid
                 justify="flex-start"
                 align="center"
                 classNames={{inner: innerStyles.className, root: gridStyles.className}}
                 styles={{inner: innerStyles.style, root: gridStyles.style}}
             >
-                {multiRowSelectionEnabled && selectedRows.length > 0 ? (
+                {store.multiRowSelectionEnabled && selectedRows.length > 0 ? (
                     <Grid.Col
                         span="auto"
-                        {...ctx.getStyles('headerCol', stylesApiProps)}
+                        {...getStyles('headerCol', stylesApiProps)}
                         order={TableComponentsOrder.MultiSelectInfo}
                     >
                         <Tooltip label={unselectAllLabel}>
                             <Button
-                                onClick={clearSelection}
+                                onClick={store.clearRowSelection}
                                 variant="subtle"
-                                disabled={disableRowSelection}
+                                disabled={!store.rowSelectionEnabled}
                                 leftSection={<CrossSize16Px height={16} />}
                             >
                                 {selectedCountLabel(selectedRows.length)}
@@ -69,6 +85,7 @@ export const TableHeader = factory<TableHeaderFactory>((props, ref) => {
                     </Grid.Col>
                 ) : null}
                 {children}
+                {showActions ? <TableHeaderActions /> : null}
                 <TableLayoutControl />
             </Grid>
         </Box>

package/src/components/table/table-header/Th.tsx

@@ -1,10 +1,9 @@
 import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
-import {BoxProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
-import {defaultColumnSizing, flexRender, Header} from '@tanstack/react-table';
+import {BoxProps, CompoundStylesApiProps, Factory, Group, UnstyledButton, useProps} from '@mantine/core';
+import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
 import {AriaAttributes, ComponentType, ForwardedRef, SVGProps} from 'react';
 import {CustomComponentThemeExtend, identity} from '../../../utils';
-import {useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableThStylesNames = 'th';
 
@@ -39,7 +38,7 @@ const defaultProps: Partial<ThProps> = {
 };
 
 export const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElement>}) => {
-    const ctx = useTableStyles();
+    const {getStyles} = useTableContext();
     const {header, sortingIcons, classNames, className, styles, style, vars, ...others} = useProps(
         'PlasmaTableTh',
         defaultProps as Partial<ThProps<T>>,
@@ -53,7 +52,7 @@ export const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElem
         maxSize: header.column.columnDef.maxSize,
     };
 
-    const thStyles = ctx.getStyles('th', {classNames, className, styles, style});
+    const thStyles = getStyles('th', {classNames, className, styles, style});
 
     if (header.isPlaceholder) {
         return null;
@@ -71,7 +70,9 @@ export const Th = <T,>(props: ThProps<T> & {ref?: ForwardedRef<HTMLTableCellElem
                 }}
                 {...others}
             >
-                {flexRender(header.column.columnDef.header, header.getContext())}
+                <Group wrap="nowrap" gap="xs">
+                    {flexRender(header.column.columnDef.header, header.getContext())}
+                </Group>
             </th>
         );
     }

package/src/components/table/table-last-updated/TableLastUpdated.tsx

@@ -1,9 +1,8 @@
-import {BoxProps, factory, Factory, Group, Text, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {BoxProps, CompoundStylesApiProps, factory, Factory, Group, Text, useProps} from '@mantine/core';
 import {useDidUpdate} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {useState} from 'react';
-import {useTable, useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TableLastUpdatedStylesNames = 'lastUpdatedRoot' | 'lastUpdatedLabel';
 
@@ -14,7 +13,6 @@ export interface TableLastUpdatedProps extends BoxProps, CompoundStylesApiProps<
      * @default "Last update:"
      */
     label?: string;
-    dependencies?: never;
 }
 export type TableLastUpdatedFactory = Factory<{
     props: TableLastUpdatedProps;
@@ -28,18 +26,17 @@ const defaultProps: Partial<TableLastUpdatedProps> = {
 };
 
 export const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) => {
-    const ctx = useTableStyles();
-    const {label, dependencies, classNames, className, styles, style, vars, ...others} = useProps(
+    const {table, getStyles} = useTableContext();
+    const {label, classNames, className, styles, style, vars, ...others} = useProps(
         'PlasmaTableLastUpdated',
         defaultProps,
         props,
     );
-    const {state} = useTable();
     const [time, setTime] = useState(new Date());
 
     useDidUpdate(() => {
         setTime(new Date());
-    }, [state, ...dependencies]);
+    }, [table.options.data]);
 
     const stylesApiProps = {classNames, styles};
 
@@ -48,10 +45,10 @@ export const TableLastUpdated = factory<TableLastUpdatedFactory>((props, ref) =>
             px="xl"
             justify="right"
             ref={ref}
-            {...ctx.getStyles('lastUpdatedRoot', {className, style, ...stylesApiProps})}
+            {...getStyles('lastUpdatedRoot', {className, style, ...stylesApiProps})}
             {...others}
         >
-            <Text size="xs" {...ctx.getStyles('lastUpdatedLabel', {className, style, ...stylesApiProps})}>
+            <Text size="xs" {...getStyles('lastUpdatedLabel', {className, style, ...stylesApiProps})}>
                 {label}
                 <span role="timer">{dayjs(time).format('h:mm:ss A')}</span>
             </Text>

package/src/components/table/table-no-data/TableNoData.tsx

@@ -0,0 +1,7 @@
+import {FunctionComponent, ReactNode} from 'react';
+
+export interface TableNoDataProps {
+    children: ReactNode;
+}
+
+export const TableNoData: FunctionComponent<TableNoDataProps> = ({children}) => <>{children}</>;

package/src/components/table/table-pagination/TablePagination.tsx

@@ -2,32 +2,29 @@ import {Pagination} from '@mantine/core';
 import {useDidUpdate} from '@mantine/hooks';
 import {FunctionComponent} from 'react';
 
-import {useTable} from '../TableContext';
 import {TablePaginationProps} from './TablePagination.types';
+import {useTableContext} from '../TableContext';
 
-export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
-    const {state, setState, containerRef, getPageCount} = useTable();
+export const TablePagination: FunctionComponent<TablePaginationProps> = ({onPageChange}) => {
+    const {store, table, containerRef} = useTableContext();
 
     const updatePage = (newPage: number) => {
         onPageChange?.(newPage - 1);
-        setState((prevState) => ({
-            ...prevState,
-            pagination: {...prevState.pagination, pageIndex: newPage - 1},
-        }));
+        store.setPagination((prev) => ({...prev, pageIndex: newPage - 1}));
         containerRef.current.scrollIntoView({behavior: 'smooth'});
     };
 
-    const total = totalPages == null ? getPageCount() : totalPages;
+    const total = table.getPageCount();
 
     useDidUpdate(() => {
-        if (state.pagination.pageIndex + 1 > total && total > 0) {
+        if (store.state.pagination.pageIndex + 1 > total && total > 0) {
             updatePage(total);
         }
-    }, [state.pagination.pageIndex, total]);
+    }, [store.state.pagination.pageIndex, total]);
 
     return (
         <Pagination
-            value={state.pagination.pageIndex + 1}
+            value={store.state.pagination.pageIndex + 1}
             onChange={updatePage}
             total={total}
             boundaries={0}

package/src/components/table/table-pagination/TablePagination.types.ts

@@ -1,8 +1,4 @@
 export interface TablePaginationProps {
-    /**
-     * The total number of page. Use null only if your table is paginated client side
-     */
-    totalPages: number | null;
     /**
      * The callback if the current page is changed.
      *

package/src/components/table/table-per-page/TablePerPage.tsx

@@ -1,7 +1,7 @@
 import {Group, SegmentedControl, Text} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {FunctionComponent, useMemo} from 'react';
 
-import {useTable} from '../TableContext';
+import {useTableContext} from '../TableContext';
 import {TablePerPageProps} from './TablePerPage.types';
 
 export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({
@@ -9,23 +9,21 @@ export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE:
     values = [25, 50, 100],
     onPerPageChange,
 }) => {
-    const {state, setState, getPageCount} = useTable();
+    const {store, table} = useTableContext();
+    const choices = useMemo(() => values.map((value) => value.toString()), [values]);
 
     const updatePerPage = (newPerPage: string) => {
         onPerPageChange?.(Number(newPerPage));
-        setState((prevState) => ({
-            ...prevState,
-            pagination: {pageIndex: 0, pageSize: parseInt(newPerPage, 10)},
-        }));
+        store.setPagination({pageIndex: 0, pageSize: parseInt(newPerPage, 10)});
     };
 
-    return getPageCount() > 0 ? (
+    return table.getPageCount() > 0 ? (
         <Group gap="sm">
             <Text fw={500}>{label}</Text>
             <SegmentedControl
-                value={state.pagination.pageSize.toString() ?? values?.[1].toString()}
+                value={store.state.pagination.pageSize.toString() ?? choices[1] ?? choices[0]}
                 onChange={updatePerPage}
-                data={values.map((value) => value.toString())}
+                data={choices}
                 size="sm"
             />
         </Group>

package/src/components/table/table-predicate/TablePredicate.tsx

@@ -1,9 +1,19 @@
-import {BoxProps, ComboboxData, factory, Factory, Grid, Group, Select, Text, useProps} from '@mantine/core';
-import {CompoundStylesApiProps} from '@mantine/core/lib/core/styles-api/styles-api.types';
+import {
+    BoxProps,
+    ComboboxData,
+    CompoundStylesApiProps,
+    factory,
+    Factory,
+    Grid,
+    Group,
+    Select,
+    Text,
+    useProps,
+} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
 import {TableComponentsOrder} from '../Table';
-import {useTable, useTableStyles} from '../TableContext';
+import {useTableContext} from '../TableContext';
 
 export type TablePredicateStylesNames = 'predicate' | 'predicateWrapper' | 'predicateLabel' | 'predicateSelect';
 
@@ -34,22 +44,16 @@ export type TablePredicateFactory = Factory<{
 const defaultProps: Partial<TablePredicateProps> = {};
 
 export const TablePredicate: FunctionComponent<TablePredicateProps> = factory<TablePredicateFactory>((props, ref) => {
-    const ctx = useTableStyles();
+    const {store, getStyles} = useTableContext();
     const {id, data, label, classNames, className, styles, style, vars, ...others} = useProps(
         'PlasmaTablePredicate',
         defaultProps,
         props,
     );
-    const {form, setState} = useTable();
 
     const handleChange = (newValue: string) => {
-        form.setFieldValue('predicates', {...form.values.predicates, [id]: newValue});
-        setState((prevState) => ({
-            ...prevState,
-            pagination: prevState.pagination
-                ? {pageIndex: 0, pageSize: prevState.pagination.pageSize}
-                : prevState.pagination,
-        }));
+        store.setPredicates((prev) => ({...prev, [id]: newValue}));
+        store.setPagination((prev) => ({...prev, pageIndex: 0}));
     };
 
     const stylesApiProps = {classNames, styles};
@@ -59,19 +63,19 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = factory<Ta
             span="content"
             order={TableComponentsOrder.Predicate}
             ref={ref}
-            {...ctx.getStyles('predicate', {className, style, ...stylesApiProps})}
+            {...getStyles('predicate', {className, style, ...stylesApiProps})}
             {...others}
         >
-            <Group gap="xs" {...ctx.getStyles('predicateWrapper', stylesApiProps)}>
-                {label ? <Text {...ctx.getStyles('predicateLabel', stylesApiProps)}>{label}:</Text> : null}
+            <Group gap="xs" {...getStyles('predicateWrapper', stylesApiProps)}>
+                {label ? <Text {...getStyles('predicateLabel', stylesApiProps)}>{label}:</Text> : null}
                 <Select
                     comboboxProps={{withinPortal: true}}
-                    value={form.values.predicates[id]}
+                    value={store.state.predicates[id]}
                     onChange={handleChange}
                     data={data}
                     aria-label={label ?? id}
                     searchable={data.length > 7}
-                    {...ctx.getStyles('predicateSelect', stylesApiProps)}
+                    {...getStyles('predicateSelect', stylesApiProps)}
                 />
             </Group>
         </Grid.Col>