@coveord/plasma-mantine 52.16.2 → 52.17.1

package/src/components/table/layouts/RowLayout.types.ts

@@ -0,0 +1,27 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {Table} from '@tanstack/table-core';
+import {ReactNode} from 'react';
+import useStyles, {RowLayoutStylesParams} from './RowLayout.styles';
+
+type RowLayoutStylesNames = Selectors<typeof useStyles>;
+
+// TODO https://coveord.atlassian.net/browse/ADUI-9182
+export interface TableLayoutProps<T = unknown> extends DefaultProps<RowLayoutStylesNames, RowLayoutStylesParams> {
+    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;
+    /**
+     * Whether clicking on a selected row will deselect the row or not.
+     */
+    keepSelection?: boolean;
+}

package/src/components/table/{TableLayoutControl.tsx → layouts/TableLayoutControl.tsx}

@@ -1,6 +1,6 @@
 import {Box, Center, Grid, SegmentedControl, Space} from '@mantine/core';
-import {TableComponentsOrder} from './Table.styles';
-import {useTable} from './TableContext';
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
 
 export const TableLayoutControl = () => {
     const {form, layouts} = useTable();

package/src/components/table/table-actions/TableActions.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {},
+    wrapper: {
+        display: 'inline-flex',
+    },
+}));

package/src/components/table/table-actions/TableActions.tsx

@@ -0,0 +1,33 @@
+import {Grid, Group} from '@mantine/core';
+import {ReactElement, ReactNode} from 'react';
+
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableActions.styles';
+import {TableActionsProps} from './TableActions.types';
+
+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();
+
+    if (selectedRows.length <= 0) {
+        return null;
+    }
+
+    return (
+        <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])}
+            </Group>
+        </Grid.Col>
+    );
+};

package/src/components/table/table-actions/TableActions.types.ts

@@ -0,0 +1,28 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {ReactNode} from 'react';
+import useStyles from './TableActions.styles';
+
+type TableActionsStylesNames = Selectors<typeof useStyles>;
+
+export interface TableActionsProps<T> extends DefaultProps<TableActionsStylesNames> {
+    /**
+     * Function that return components for the selected row or selected rows when multi row selection is enabled
+     *
+     * @param datum the data of the selected row(s)
+     * @example
+     * <Table.Actions<MyType>>
+     *     {(datum: MyType) => (
+     *         <Button
+     *             component={Link}
+     *             to={`edit/${datum.id}`}
+     *             leftIcon={<EditSize24Px />}
+     *             variant="subtle"
+     *             color="navyBlue.8"
+     *         >
+     *             Edit
+     *         </Button>
+     *     )}
+     * </Table.Actions>
+     */
+    children: ((datum: T) => ReactNode) | ((data: T[]) => ReactNode);
+}

package/src/components/table/table-date-range-picker/TableDateRangePicker.styles.ts

@@ -0,0 +1,7 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+}));

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

@@ -1,42 +1,15 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {createStyles, DefaultProps, Grid, Group, Popover, Selectors, Text} from '@mantine/core';
+import {Grid, Group, Popover, Text} from '@mantine/core';
 import {useToggle} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {FunctionComponent} from 'react';
 
-import {Button} from '../button';
-import {
-    DateRangePickerInlineCalendar,
-    DateRangePickerInlineCalendarProps,
-    DateRangePickerPreset,
-    DateRangePickerValue,
-} from '../date-range-picker';
-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'>,
-        DefaultProps<TableDateRangePickerStylesNames> {
-    /**
-     * An object containing date presets.
-     * If empty the preset dropdown won't be shown
-     *
-     * @example
-     * {
-     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
-     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
-     * }
-     * @default {}
-     */
-    presets?: Record<string, DateRangePickerPreset>;
-}
+import {Button} from '../../button';
+import {DateRangePickerInlineCalendar, DateRangePickerValue} from '../../date-range-picker';
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableDateRangePicker.styles';
+import {TableDateRangePickerProps} from './TableDateRangePicker.types';
 
 export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps> = ({
     presets = {},

package/src/components/table/table-date-range-picker/TableDateRangePicker.types.ts

@@ -0,0 +1,22 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {DateRangePickerInlineCalendarProps, DateRangePickerPreset} from '../../date-range-picker';
+import useStyles from './TableDateRangePicker.styles';
+
+type TableDateRangePickerStylesNames = Selectors<typeof useStyles>;
+
+export interface TableDateRangePickerProps
+    extends Pick<DateRangePickerInlineCalendarProps, 'startProps' | 'endProps' | 'rangeCalendarProps'>,
+        DefaultProps<TableDateRangePickerStylesNames> {
+    /**
+     * An object containing date presets.
+     * If empty the preset dropdown won't be shown
+     *
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1), new Date(2022, 0, 31)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1), new Date(2022, 1, 28)]}
+     * }
+     * @default {}
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}

package/src/components/table/table-filter/TableFilter.styles.ts

@@ -0,0 +1,11 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {},
+    wrapper: {
+        marginBottom: '0 !important',
+    },
+    empty: {
+        color: theme.colors.gray[4],
+    },
+}));

package/src/components/table/{TableFilter.tsx → table-filter/TableFilter.tsx}

@@ -1,30 +1,12 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, DefaultProps, Grid, Selectors, TextInput, createStyles} from '@mantine/core';
+import {ActionIcon, Grid, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler, useState} from 'react';
 
 import {useDebouncedValue, useDidUpdate} from '@mantine/hooks';
-import {TableComponentsOrder} from './Table.styles';
-import {useTable} from './TableContext';
-
-const useStyles = createStyles((theme) => ({
-    root: {},
-    wrapper: {
-        marginBottom: '0 !important',
-    },
-    empty: {
-        color: theme.colors.gray[4],
-    },
-}));
-
-type TableFilterStylesNames = Selectors<typeof useStyles>;
-interface TableFilterProps extends DefaultProps<TableFilterStylesNames> {
-    /**
-     * The placeholder for the filter input
-     *
-     * @default "Search by any field"
-     */
-    placeholder?: string;
-}
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableFilter.styles';
+import {TableFilterProps} from './TableFilter.types';
 
 export const TableFilter: FunctionComponent<TableFilterProps> = ({
     placeholder = 'Search by any field',

package/src/components/table/table-filter/TableFilter.types.ts

@@ -0,0 +1,13 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import useStyles from './TableFilter.styles';
+
+type TableFilterStylesNames = Selectors<typeof useStyles>;
+
+export interface TableFilterProps extends DefaultProps<TableFilterStylesNames> {
+    /**
+     * The placeholder for the filter input
+     *
+     * @default "Search by any field"
+     */
+    placeholder?: string;
+}

package/src/components/table/{TableFooter.tsx → table-footer/TableFooter.tsx}

@@ -1,9 +1,7 @@
-import {Group, DefaultProps} from '@mantine/core';
-import {FunctionComponent, ReactNode} from 'react';
+import {Group} from '@mantine/core';
+import {FunctionComponent} from 'react';
+import {TableFooterProps} from './TableFooter.types';
 
-interface TableFooterProps extends DefaultProps {
-    children?: ReactNode;
-}
 export const TableFooter: FunctionComponent<TableFooterProps> = ({children, ...others}) => (
     <Group position="apart" px="xl" py="md" {...others}>
         {children}

package/src/components/table/table-footer/TableFooter.types.ts

@@ -0,0 +1,6 @@
+import {DefaultProps} from '@mantine/core';
+import {ReactNode} from 'react';
+
+export interface TableFooterProps extends DefaultProps {
+    children?: ReactNode;
+}

package/src/components/table/table-header/TableHeader.styles.ts

@@ -0,0 +1,13 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {
+        flexDirection: 'row-reverse',
+        flexWrap: 'wrap-reverse',
+        background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,
+        borderBottom: `1px solid ${theme.colors.gray[3]}`,
+    },
+    multiSelectInfo: {
+        display: 'flex',
+    },
+}));

package/src/components/table/{TableHeader.tsx → table-header/TableHeader.tsx}

@@ -1,29 +1,14 @@
 import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';
-import {FunctionComponent, ReactNode} from 'react';
+import {Grid, Tooltip} from '@mantine/core';
+import {FunctionComponent} from 'react';
 
-import {Button} from '../button';
-import {TableComponentsOrder} from './Table.styles';
-import {useTable} from './TableContext';
-import {TableLayoutControl} from './TableLayoutControl';
+import {Button} from '../../button';
+import {TableLayoutControl} from '../layouts/TableLayoutControl';
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TableHeader.styles';
+import {TableHeaderProps} from './TableHeader.types';
 
-const useStyles = createStyles((theme) => ({
-    root: {
-        flexDirection: 'row-reverse',
-        flexWrap: 'wrap-reverse',
-        background: `repeating-linear-gradient(${theme.colors.gray[1]}, ${theme.colors.gray[1]} 68px, ${theme.colors.gray[3]} 68px, ${theme.colors.gray[3]} 69px)`,
-        borderBottom: `1px solid ${theme.colors.gray[3]}`,
-    },
-    multiSelectInfo: {
-        display: 'flex',
-    },
-}));
-
-type TableHeaderStylesNames = Selectors<typeof useStyles>;
-interface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {
-    /* Children of header (ie: actions, datepicker, etc.) */
-    children?: ReactNode;
-}
 export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     classNames,
     styles,

package/src/components/table/table-header/TableHeader.types.ts

@@ -0,0 +1,10 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import {ReactNode} from 'react';
+import useStyles from './TableHeader.styles';
+
+type TableHeaderStylesNames = Selectors<typeof useStyles>;
+
+export interface TableHeaderProps extends DefaultProps<TableHeaderStylesNames> {
+    /* Children of header (ie: actions, datepicker, etc.) */
+    children?: ReactNode;
+}

package/src/components/table/table-header/Th.styles.ts

@@ -0,0 +1,27 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({
+    th: {
+        fontWeight: '400 !important' as any,
+        padding: '0 !important',
+        verticalAlign: 'middle',
+        whiteSpace: 'nowrap',
+        textAlign: 'left',
+        color: theme.colors.gray[6],
+        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
+        width: columnSizing.size ?? 'auto',
+        minWidth: columnSizing.minSize,
+        maxWidth: columnSizing.maxSize,
+    },
+
+    control: {
+        color: 'inherit',
+        whiteSpace: 'inherit',
+        fontWeight: 'inherit',
+        width: '100%',
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
+        '&:hover': {
+            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
+        },
+    },
+}));

package/src/components/table/{Th.tsx → table-header/Th.tsx}

@@ -1,36 +1,8 @@
 import {ArrowDownSize16Px, ArrowUpSize16Px, DoubleArrowHeadVSize16Px} from '@coveord/plasma-react-icons';
-import {Center, Group, Text, UnstyledButton, createStyles} from '@mantine/core';
-import {Header, defaultColumnSizing, flexRender} from '@tanstack/react-table';
-
-const useStyles = createStyles((theme, columnSizing: {size: number; minSize: number; maxSize: number}) => ({
-    th: {
-        fontWeight: '400 !important' as any,
-        padding: '0 !important',
-        verticalAlign: 'middle',
-        whiteSpace: 'nowrap',
-        textAlign: 'left',
-        color: theme.colors.gray[6],
-        backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[8] : theme.colors.gray[0],
-        width: columnSizing.size ?? 'auto',
-        minWidth: columnSizing.minSize,
-        maxWidth: columnSizing.maxSize,
-    },
-
-    control: {
-        color: 'inherit',
-        whiteSpace: 'inherit',
-        fontWeight: 'inherit',
-        width: '100%',
-        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
-        '&:hover': {
-            backgroundColor: theme.colorScheme === 'dark' ? theme.colors.gray[7] : theme.colors.gray[1],
-        },
-    },
-}));
-
-interface ThProps<T> {
-    header: Header<T, unknown>;
-}
+import {Center, Group, Text, UnstyledButton} from '@mantine/core';
+import {defaultColumnSizing, flexRender} from '@tanstack/react-table';
+import useStyles from './Th.styles';
+import {ThProps} from './Th.types';
 
 const SortingIcons = {
     asc: ArrowUpSize16Px,

package/src/components/table/table-header/Th.types.ts

@@ -0,0 +1,5 @@
+import {Header} from '@tanstack/react-table';
+
+export interface ThProps<T> {
+    header: Header<T, unknown>;
+}

package/src/components/table/table-last-updated/TableLastUpdated.styles.ts

@@ -0,0 +1,10 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {
+        minHeight: '98px',
+    },
+    label: {
+        color: theme.colors.gray[6],
+    },
+}));

package/src/components/table/{TableLastUpdated.tsx → table-last-updated/TableLastUpdated.tsx}

@@ -1,28 +1,10 @@
-import {createStyles, DefaultProps, Group, Selectors, Text} from '@mantine/core';
+import {Group, Text} from '@mantine/core';
 import {useDidUpdate} from '@mantine/hooks';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
-import {useTable} from './TableContext';
-
-const useStyles = createStyles((theme) => ({
-    root: {
-        minHeight: '98px',
-    },
-    label: {
-        color: theme.colors.gray[6],
-    },
-}));
-
-type TableLastUpdatedStylesNames = Selectors<typeof useStyles>;
-
-interface TableLastUpdatedProps extends DefaultProps<TableLastUpdatedStylesNames> {
-    /**
-     * Label to contextualize the date
-     *
-     * @default "Last update:"
-     */
-    label?: string;
-}
+import {useTable} from '../TableContext';
+import useStyles from './TableLastUpdated.styles';
+import {TableLastUpdatedProps} from './TableLastUpdated.types';
 
 export const TableLastUpdated: FunctionComponent<TableLastUpdatedProps & {dependencies?: never}> = ({
     label = 'Last update:',

package/src/components/table/table-last-updated/TableLastUpdated.types.ts

@@ -0,0 +1,13 @@
+import {DefaultProps, Selectors} from '@mantine/core';
+import useStyles from './TableLastUpdated.styles';
+
+type TableLastUpdatedStylesNames = Selectors<typeof useStyles>;
+
+export interface TableLastUpdatedProps extends DefaultProps<TableLastUpdatedStylesNames> {
+    /**
+     * Label to contextualize the date
+     *
+     * @default "Last update:"
+     */
+    label?: string;
+}

package/src/components/table/{TablePagination.tsx → table-pagination/TablePagination.tsx}

@@ -1,20 +1,8 @@
 import {Pagination} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
-import {useTable} from './TableContext';
-
-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.
-     *
-     * @param pageIndex The index of the updated page.
-     */
-    onPageChange?: (pageIndex: number) => void;
-}
+import {useTable} from '../TableContext';
+import {TablePaginationProps} from './TablePagination.types';
 
 export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalPages, onPageChange}) => {
     const {state, setState, containerRef, getPageCount} = useTable();

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

@@ -0,0 +1,12 @@
+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.
+     *
+     * @param pageIndex The index of the updated page.
+     */
+    onPageChange?: (pageIndex: number) => void;
+}

package/src/components/table/{TablePerPage.tsx → table-per-page/TablePerPage.tsx}

@@ -1,28 +1,8 @@
 import {Group, SegmentedControl, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
-import {useTable} from './TableContext';
-
-interface TablePerPageProps {
-    /**
-     * The label displayed before the control
-     *
-     * @default Results per page
-     */
-    label?: string;
-    /**
-     * The per page choices to display
-     *
-     * @default [25, 50, 100]
-     */
-    values?: number[];
-    /**
-     * The callback if the entries per page is changed.
-     *
-     * @param perPage the new number of entries per page
-     */
-    onPerPageChange?: (perPage: number) => void;
-}
+import {useTable} from '../TableContext';
+import {TablePerPageProps} from './TablePerPage.types';
 
 export const TablePerPage: FunctionComponent<TablePerPageProps> & {DEFAULT_SIZE: number} = ({
     label = 'Results per page',

package/src/components/table/table-per-page/TablePerPage.types.ts

@@ -0,0 +1,20 @@
+export interface TablePerPageProps {
+    /**
+     * The label displayed before the control
+     *
+     * @default Results per page
+     */
+    label?: string;
+    /**
+     * The per page choices to display
+     *
+     * @default [25, 50, 100]
+     */
+    values?: number[];
+    /**
+     * The callback if the entries per page is changed.
+     *
+     * @param perPage the new number of entries per page
+     */
+    onPerPageChange?: (perPage: number) => void;
+}

package/src/components/table/table-predicate/TablePredicate.styles.ts

@@ -0,0 +1,8 @@
+import {createStyles} from '@mantine/core';
+
+export default createStyles((theme) => ({
+    root: {},
+    wrapper: {},
+    label: {},
+    select: {},
+}));

package/src/components/table/{TablePredicate.tsx → table-predicate/TablePredicate.tsx}

@@ -1,34 +1,10 @@
-import {createStyles, DefaultProps, Grid, Group, Select, SelectItem, Selectors, Text} from '@mantine/core';
+import {Grid, Group, Select, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
 
-import {TableComponentsOrder} from './Table.styles';
-import {useTable} from './TableContext';
-
-const useStyles = createStyles((theme) => ({
-    root: {},
-    wrapper: {},
-    label: {},
-    select: {},
-}));
-
-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
-     */
-    id: string;
-    /**
-     * The values to display in the predicate
-     */
-    data: SelectItem[];
-    /**
-     * Input label (not displayed for now)
-     *
-     * @default default to the predicate id
-     */
-    label?: string;
-}
+import {TableComponentsOrder} from '../Table.styles';
+import {useTable} from '../TableContext';
+import useStyles from './TablePredicate.styles';
+import {TablePredicateProps} from './TablePredicate.types';
 
 export const TablePredicate: FunctionComponent<TablePredicateProps> = ({
     id,

package/src/components/table/table-predicate/TablePredicate.types.ts

@@ -0,0 +1,21 @@
+import {DefaultProps, SelectItem, Selectors} from '@mantine/core';
+import useStyles from './TablePredicate.styles';
+
+type TablePredicateStylesNames = Selectors<typeof useStyles>;
+
+export interface TablePredicateProps extends DefaultProps<TablePredicateStylesNames> {
+    /**
+     * Unique identifier for this predicate. Will be used to access the selected value in the table state
+     */
+    id: string;
+    /**
+     * The values to display in the predicate
+     */
+    data: SelectItem[];
+    /**
+     * Input label (not displayed for now)
+     *
+     * @default default to the predicate id
+     */
+    label?: string;
+}