@coveord/plasma-mantine 52.5.0 → 52.7.0

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

@@ -2,23 +2,27 @@ import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
     CoreOptions,
-    InitialTableState as TanstackInitialTableState,
+    Table,
     TableOptions,
+    InitialTableState as TanstackInitialTableState,
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
 
+import {Icon} from '@coveord/plasma-react-icons';
 import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
 import {TableFooter} from './TableFooter';
 import {TableHeader} from './TableHeader';
+import {TableLoading} from './TableLoading';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
+import {TableLayouts} from './layouts/TableLayouts';
 
 export type RowSelectionWithData<TData> = Record<string, TData>;
 export interface RowSelectionState<TData> {
@@ -34,6 +38,45 @@ export interface InitialTableState<TData>
 
 export type onTableChangeEvent<TData> = (params: TableState<TData> & TableFormType) => void;
 
+export interface TableLayout {
+    /**
+     * Name of the layout.
+     * Will be displayed in the layout control
+     */
+    name: string;
+    /**
+     * Icon illustrating the layout.
+     * Will be displayed in the layout control
+     */
+    icon?: Icon;
+    /**
+     * Header portion of the table.
+     * In the standard row layout that is where column headers would be displayed.
+     */
+    Header: <T>(props: TableLayoutProps<T>) => 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;
+}
+
+export interface TableLayoutProps<T = unknown> {
+    table: Table<T>;
+    loading?: boolean;
+    /**
+     * Action passed when user double clicks on a row
+     */
+    doubleClickAction?: (datum: T) => void;
+    /**
+     * 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;
+}
+
 export type TableFormType = {
     /**
      * Object containing the table predicates and their selected values
@@ -47,6 +90,10 @@ export type TableFormType = {
      * @example [new Date(2022, 0, 1), new Date(2022, 0, 31)]
      */
     dateRange: DateRangePickerValue;
+    /**
+     * Selected layout name
+     */
+    layout: TableLayout['name'];
 };
 
 export type TableContextType<TData> = {
@@ -97,10 +144,18 @@ export type TableContextType<TData> = {
      * 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> {
@@ -118,6 +173,12 @@ export interface TableProps<T> {
      * @see https://tanstack.com/table/v8/docs/guide/column-defs
      */
     columns: Array<ColumnDef<T>>;
+    /**
+     * Available layouts
+     *
+     * @default [Table.Layouts.Rows]
+     */
+    layouts?: TableLayout[];
     /**
      * Function called when the table mounts
      *
@@ -178,6 +239,12 @@ export interface TableProps<T> {
      * @default false
      */
     multiRowSelectionEnabled?: boolean;
+    /**
+     * Whether row selection is enabled or not
+     *
+     * @default false
+     */
+    disableRowSelection?: boolean;
     /**
      * Additional options that can be passed to the table
      */
@@ -208,4 +275,6 @@ export interface TableType {
     CollapsibleColumn: typeof TableCollapsibleColumn;
     AccordionColumn: typeof TableAccordionColumn;
     Consumer: typeof TableConsumer;
+    Loading: typeof TableLoading;
+    Layouts: typeof TableLayouts;
 }

package/src/components/table/TableActions.tsx

@@ -1,10 +1,19 @@
-import {Grid, Group} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Selectors} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
-interface TableActionsProps<T> {
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {
+        display: 'inline-flex',
+    },
+}));
+
+type TableActionsStylesNames = Selectors<typeof useStyles>;
+
+interface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {
     /**
      * Function that return components for the selected row or selected rows when multi row selection is enabled
      *
@@ -27,7 +36,14 @@ interface TableActionsProps<T> {
     children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
 }
 
-export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement => {
+export const TableActions = <T,>({
+    children,
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}: TableActionsProps<T>): ReactElement => {
+    const {classes} = useStyles(null, {name: 'TableActions', classNames, styles, unstyled});
     const {getSelectedRows, multiRowSelectionEnabled} = useTable<T>();
     const selectedRows = getSelectedRows();
 
@@ -36,8 +52,8 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
     }
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm">
-            <Group spacing="xs" style={{display: 'inline-flex'}}>
+        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm" className={classes.root} {...others}>
+            <Group spacing="xs" className={classes.wrapper}>
                 {multiRowSelectionEnabled
                     ? (children as (data: T[]) => ReactNode)(selectedRows)
                     : (children as (datum: T) => ReactNode)(selectedRows[0])}

package/src/components/table/TableDateRangePicker.tsx

@@ -1,7 +1,8 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {Grid, Group, Popover, Text} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Popover, Selectors, Text} from '@mantine/core';
+import {useToggle} from '@mantine/hooks';
 import dayjs from 'dayjs';
-import {FunctionComponent, useState} from 'react';
+import {FunctionComponent} from 'react';
 
 import {Button} from '../button';
 import {
@@ -13,8 +14,16 @@ import {
 import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+}));
+
+type TableDateRangePickerStylesNames = Selectors<typeof useStyles>;
 interface TableDateRangePickerProps
-    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'> {
+    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>,
+        DefaultProps<TableDateRangePickerStylesNames> {
     /**
      * An object containing date presets.
      * If empty the preset dropdown won't be shown
@@ -32,28 +41,41 @@ interface TableDateRangePickerProps
 export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({
     presets = {},
     rangeCalendarProps,
+    classNames,
+    styles,
+    unstyled,
+    ...others
 }) => {
-    const [opened, setOpened] = useState(false);
+    const {classes} = useStyles(null, {name: 'TableDateRangePicker', classNames, styles, unstyled});
+    const [opened, toggleOpened] = useToggle();
     const {form} = useTable();
 
     const onApply = (dates: DateRangePickerValue) => {
         form.setFieldValue('dateRange', dates);
-        setOpened(false);
+        toggleOpened(false);
     };
     const onCancel = () => {
-        setOpened(false);
+        toggleOpened(false);
     };
 
     const formatDate = (date: Date) => dayjs(date).format('MMM DD, YYYY');
-    const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
+    const formattedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
-            <Group spacing="xs">
-                <Text span>{formatedRange}</Text>
-                <Popover opened={opened} onChange={setOpened} withinPortal>
+        <Grid.Col
+            span="content"
+            order={TableComponentsOrder.DateRangePicker}
+            py="sm"
+            className={classes.root}
+            {...others}
+        >
+            <Group spacing="xs" className={classes.wrapper}>
+                <Text span className={classes.label}>
+                    {formattedRange}
+                </Text>
+                <Popover opened={opened} onChange={toggleOpened} withinPortal>
                     <Popover.Target>
-                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                        <Button variant="outline" color="gray" onClick={() => toggleOpened()} px="xs">
                             <CalendarSize24Px width={24} height={24} />
                         </Button>
                     </Popover.Target>

package/src/components/table/TableFilter.tsx

@@ -1,11 +1,12 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
 import {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
+    root: {},
     wrapper: {
         marginBottom: '0 !important',
     },
@@ -31,7 +32,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     unstyled,
     ...others
 }) => {
-    const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
+    const {classes} = useStyles(null, {name: 'TableFilter', classNames, styles, unstyled});
     const {state, setState} = useTable();
 
     const changeFilterValue = (value: string) => {
@@ -54,7 +55,7 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     };
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm">
+        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm" className={classes.root}>
             <TextInput
                 className={classes.wrapper}
                 placeholder={placeholder}

package/src/components/table/TableHeader.tsx

@@ -5,6 +5,7 @@ import {FunctionComponent, ReactNode} from 'react';
 import {Button} from '../button';
 import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
+import {TableLayoutControl} from './TableLayoutControl';
 
 const useStyles = createStyles((theme) => ({
     root: {
@@ -30,9 +31,10 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     children,
     ...others
 }) => {
-    const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
+    const {getSelectedRows, multiRowSelectionEnabled, clearSelection, disableRowSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
+
     return (
         <Grid
             justify="flex-start"
@@ -53,13 +55,19 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
                     order={TableComponentsOrder.MultiSelectInfo}
                 >
                     <Tooltip label="Unselect all">
-                        <Button onClick={clearSelection} variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
+                        <Button
+                            onClick={clearSelection}
+                            variant="subtle"
+                            disabled={disableRowSelection}
+                            leftIcon={<CrossSize16Px height={16} />}
+                        >
                             {selectedRows.length} selected
                         </Button>
                     </Tooltip>
                 </Grid.Col>
             ) : null}
             {children}
+            <TableLayoutControl />
         </Grid>
     );
 };

package/src/components/table/TableLayoutControl.tsx

@@ -0,0 +1,29 @@
+import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';
+import {TableComponentsOrder} from './Table.styles';
+import {useTable} from './TableContext';
+
+export const TableLayoutControl = () => {
+    const {form, layouts} = useTable();
+    return layouts.length > 1 ? (
+        <Grid.Col order={TableComponentsOrder.LayoutControl} span="content">
+            <SegmentedControl
+                color="action"
+                data={layouts.map(({name, icon: Icon}) => ({
+                    value: name,
+                    label: (
+                        <Center>
+                            {Icon ? (
+                                <>
+                                    <Icon height={16} />
+                                    <Space w="xs" />
+                                </>
+                            ) : null}
+                            <Box>{name}</Box>
+                        </Center>
+                    ),
+                }))}
+                {...form.getInputProps('layout')}
+            />
+        </Grid.Col>
+    ) : null;
+};

package/src/components/table/TableLoading.tsx

@@ -0,0 +1,8 @@
+import {Skeleton, SkeletonProps} from '@mantine/core';
+import {FunctionComponent} from 'react';
+
+export const TableLoading: FunctionComponent<SkeletonProps> = (props) => (
+    <Skeleton style={{display: 'inline-block'}} {...props} sx={!props.visible ? {borderRadius: 0} : undefined}>
+        {props.children}
+    </Skeleton>
+);

package/src/components/table/TablePredicate.tsx

@@ -1,10 +1,18 @@
-import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
-import {TableComponentsOrder} from './Table.styles';
 
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
-interface TablePredicateProps {
+const useStyles = createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+}));
+
+type TablePredicateStylesNames = Selectors<typeof useStyles>;
+
+interface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {
     /**
      * Unique identifier for this predicate. Will be used to access the selected value in the table state
      */
@@ -21,7 +29,16 @@ interface TablePredicateProps {
     label?: string;
 }
 
-export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data, label}) => {
+export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
+    id,
+    data,
+    label,
+    classNames,
+    styles,
+    unstyled,
+    ...others
+}) => {
+    const {classes} = useStyles(null, {name: 'TablePredicate', classNames, styles, unstyled});
     const {onChange, form} = useTable();
 
     const onUpdate = (newValue: string) => {
@@ -30,9 +47,9 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data
     };
 
     return (
-        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm">
-            <Group spacing="xs">
-                {label ? <Text>{label}:</Text> : null}
+        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm" className={classes.root} {...others}>
+            <Group spacing="xs" className={classes.wrapper}>
+                {label ? <Text className={classes.label}>{label}:</Text> : null}
                 <Select
                     withinPortal
                     value={form.values.predicates[id]}

package/src/components/table/Th.tsx

@@ -7,6 +7,7 @@ const useStyles = createStyles((theme) => ({
         fontWeight: '400 !important' as any,
         padding: '0 !important',
         verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
     },
 
     control: {