@coveord/plasma-mantine 52.1.0 → 52.3.0

package/src/components/modal-wizard/ModalWizard.tsx

@@ -54,7 +54,7 @@ export interface ModalWizardProps
     /**
      * A callback function that is executed when the user clicks on the next button
      */
-    onNext?: (newStep: number) => unknown;
+    onNext?: (newStep: number, setCurrentStep?: React.Dispatch<number>) => unknown;
 
     /**
      * A callback function that is executed when the user clicks on the previous button
@@ -82,6 +82,14 @@ export interface ModalWizardProps
      * Children to display in modal wizard
      * */
     children?: Array<ReturnType<typeof ModalWizardStep>>;
+
+    /**
+     * Indicates if step validation should be performed when clicking on to the next step
+     * If true, the next step will always be enabled
+     *
+     * @default false
+     */
+    isStepValidatedOnNext?: boolean;
 }
 
 interface ModalWizardType {
@@ -106,6 +114,7 @@ export const ModalWizard: ModalWizardType = ({
     styles,
     unstyled,
     children,
+    isStepValidatedOnNext,
     ...modalProps
 }) => {
     const {
@@ -126,7 +135,9 @@ export const ModalWizard: ModalWizardType = ({
     const isLastStep = currentStepIndex === numberOfSteps - 1;
     const currentStep = modalSteps.filter((step: ReactElement, index: number) => index === currentStepIndex)[0];
 
-    const {isValid} = currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
+    const {isValid} = isStepValidatedOnNext
+        ? {isValid: true}
+        : currentStep?.props?.validateStep?.(currentStepIndex, numberOfSteps) ?? {isValid: true};
 
     useEffect(() => {
         if (opened) {
@@ -224,8 +235,11 @@ export const ModalWizard: ModalWizardType = ({
                             if (isLastStep) {
                                 onFinish?.() ?? handleClose(false);
                             } else {
-                                onNext?.(currentStepIndex + 1);
-                                setCurrentStepIndex(currentStepIndex + 1);
+                                onNext?.(currentStepIndex + 1, setCurrentStepIndex);
+
+                                if (!isStepValidatedOnNext) {
+                                    setCurrentStepIndex(currentStepIndex + 1);
+                                }
                             }
                         }}
                     >

package/src/components/modal-wizard/ModalWizardStep.tsx

@@ -27,7 +27,7 @@ export interface ModalWizardStepProps {
     /**
      * A function to validate the current step, it determines if the next step should be enabled or not.
      */
-    validateStep: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
+    validateStep?: (currentStep: any, numberOfSteps: any) => {isValid: boolean; messsage?: unknown};
 
     /**
      * Show progress bar at this step

package/src/components/modal-wizard/__tests__/ModalWizard.spec.tsx

@@ -79,8 +79,6 @@ describe('ModalWizard', () => {
 
         await user.click(nextButton);
 
-        expect(onNextSpy).toHaveBeenCalledWith(1);
-
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,
@@ -108,8 +106,6 @@ describe('ModalWizard', () => {
 
         await user.click(nextButton);
 
-        expect(onNextSpy).toHaveBeenCalledWith(2);
-
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 3/i,
@@ -143,8 +139,6 @@ describe('ModalWizard', () => {
             })
         );
 
-        expect(onNextSpy).toHaveBeenCalledWith(1);
-
         expect(
             screen.getByRole('heading', {
                 name: /current step is: 2/i,
@@ -372,4 +366,38 @@ describe('ModalWizard', () => {
 
         expect(screen.getByRole('progressbar')).toBeInTheDocument();
     });
+
+    it('enables the next step button if isStepValidatedOnNext is provided', async () => {
+        render(
+            <ModalWizard opened={true} onClose={vi.fn()} isStepValidatedOnNext>
+                <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: false})}>
+                    Content step 1
+                </ModalWizard.Step>
+                <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
+                    Content step 2
+                </ModalWizard.Step>
+            </ModalWizard>
+        );
+
+        expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
+    });
+
+    it('enables the next step button in accordance to validateStep if isStepValidatedOnNext is not provided', async () => {
+        const user = userEvent.setup();
+
+        render(
+            <ModalWizard opened={true} onClose={vi.fn()}>
+                <ModalWizard.Step title="Step 1" showProgressBar={false} validateStep={() => ({isValid: true})}>
+                    Content step 1
+                </ModalWizard.Step>
+                <ModalWizard.Step title="Step 2" validateStep={() => ({isValid: false})}>
+                    Content step 2
+                </ModalWizard.Step>
+            </ModalWizard>
+        );
+
+        expect(screen.getByRole('button', {name: /next/i})).toBeEnabled();
+        await user.click(screen.getByRole('button', {name: /next/i}));
+        expect(screen.getByRole('button', {name: /finish/i})).toBeDisabled();
+    });
 });

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

@@ -1,11 +1,10 @@
 import {createStyles} from '@mantine/core';
 
 interface TableStylesParams {
-    hasHeader: boolean;
     multiRowSelectionEnabled: boolean;
 }
 
-const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, multiRowSelectionEnabled}) => {
+const useStyles = createStyles<string, TableStylesParams>((theme, {multiRowSelectionEnabled}) => {
     const rowBackgroundColor =
         theme.colorScheme === 'dark'
             ? theme.fn.rgba(theme.colors[theme.primaryColor][7], 0.2)
@@ -13,7 +12,10 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     return {
         table: {
             width: '100%',
-            '& td:first-of-type, th:first-of-type > *': {
+            '& thead tr th': {
+                borderBottom: 'none',
+            },
+            '& td:first-of-type': {
                 paddingLeft: theme.spacing.xl,
             },
             '& tbody td': {
@@ -23,7 +25,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
 
         header: {
             position: 'sticky',
-            top: hasHeader ? 69 : 0,
+            top: 0,
             backgroundColor: theme.colorScheme === 'dark' ? theme.black : theme.white,
             transition: 'box-shadow 150ms ease',
             zIndex: 1,
@@ -34,7 +36,13 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
                 left: 0,
                 right: 0,
                 bottom: 0,
-                borderBottom: `1px solid ${theme.colors.gray[2]}`,
+                borderBottom: `1px solid ${theme.colors.gray[3]}`,
+            },
+        },
+
+        headerColumns: {
+            '& th:first-of-type > *': {
+                paddingLeft: theme.spacing.xl,
             },
         },
 
@@ -55,4 +63,12 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
     };
 });
 
+export const TableComponentsOrder = {
+    MultiSelectInfo: 5,
+    Actions: 4,
+    Predicate: 3,
+    Filter: 2,
+    DateRangePicker: 1,
+};
+
 export default useStyles;

package/src/components/table/Table.tsx

@@ -18,6 +18,7 @@ import useStyles from './Table.styles';
 import {TableFormType, TableProps, TableState, TableType} from './Table.types';
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';
+import {TableConsumer} from './TableConsumer';
 import {TableContext} from './TableContext';
 import {TableDateRangePicker} from './TableDateRangePicker';
 import {TableFilter} from './TableFilter';
@@ -26,7 +27,6 @@ import {TableHeader} from './TableHeader';
 import {TablePagination} from './TablePagination';
 import {TablePerPage} from './TablePerPage';
 import {TablePredicate} from './TablePredicate';
-import {TableConsumer} from './TableConsumer';
 import {TableSelectableColumn} from './TableSelectableColumn';
 import {Th} from './Th';
 import {useRowSelection} from './useRowSelection';
@@ -62,7 +62,7 @@ export const Table: TableType = <T,>({
     const form = useForm<TableFormType>({
         initialValues: {predicates: initialState?.predicates ?? {}, dateRange: initialState?.dateRange ?? [null, null]},
     });
-    const {cx, classes} = useStyles({hasHeader: !!header, multiRowSelectionEnabled});
+    const {cx, classes} = useStyles({multiRowSelectionEnabled});
 
     const table = useReactTable({
         initialState: defaultsDeep(initialStateWithoutForm, {pagination: {pageSize: TablePerPage.DEFAULT_SIZE}}),
@@ -196,11 +196,17 @@ export const Table: TableType = <T,>({
                     noDataChildren
                 ) : (
                     <>
-                        {header}
                         <MantineTable className={classes.table} horizontalSpacing="sm" verticalSpacing="xs" pb="sm">
                             <thead className={classes.header}>
+                                {!!header ? (
+                                    <tr>
+                                        <th style={{padding: 0}} colSpan={table.getAllColumns().length}>
+                                            {header}
+                                        </th>
+                                    </tr>
+                                ) : null}
                                 {table.getHeaderGroups().map((headerGroup) => (
-                                    <tr key={headerGroup.id}>
+                                    <tr key={headerGroup.id} className={classes.headerColumns}>
                                         {headerGroup.headers.map((columnHeader) => (
                                             <Th key={columnHeader.id} header={columnHeader} />
                                         ))}

package/src/components/table/TableActions.tsx

@@ -1,5 +1,6 @@
-import {Group} from '@mantine/core';
+import {Grid, Group} from '@mantine/core';
 import {ReactElement, ReactNode} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -35,10 +36,12 @@ export const TableActions = <T,>({children}: TableActionsProps<T>): ReactElement
     }
 
     return (
-        <Group spacing="xs">
-            {multiRowSelectionEnabled
-                ? (children as (data: T[]) => ReactNode)(selectedRows)
-                : (children as (datum: T) => ReactNode)(selectedRows[0])}
-        </Group>
+        <Grid.Col span="content" order={TableComponentsOrder.Actions} py="sm">
+            <Group spacing="xs" style={{display: 'inline-flex'}}>
+                {multiRowSelectionEnabled
+                    ? (children as (data: T[]) => ReactNode)(selectedRows)
+                    : (children as (datum: T) => ReactNode)(selectedRows[0])}
+            </Group>
+        </Grid.Col>
     );
 };

package/src/components/table/TableDateRangePicker.tsx

@@ -1,5 +1,5 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
-import {Popover} from '@mantine/core';
+import {Grid, Group, Popover, Text} from '@mantine/core';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
 
@@ -10,6 +10,7 @@ import {
     DateRangePickerPreset,
     DateRangePickerValue,
 } from '../date-range-picker';
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps
@@ -47,24 +48,26 @@ export const TableDateRangePicker: FunctionComponent<TableDateRangePickerProps>
     const formatedRange = `${formatDate(form.values.dateRange[0])} - ${formatDate(form.values.dateRange[1])}`;
 
     return (
-        <>
-            {formatedRange}
-            <Popover opened={opened} onChange={setOpened}>
-                <Popover.Target>
-                    <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
-                        <CalendarSize24Px width={24} height={24} />
-                    </Button>
-                </Popover.Target>
-                <Popover.Dropdown p={0}>
-                    <DateRangePickerInlineCalendar
-                        initialRange={form.values.dateRange}
-                        onApply={onApply}
-                        onCancel={onCancel}
-                        presets={presets}
-                        rangeCalendarProps={rangeCalendarProps}
-                    />
-                </Popover.Dropdown>
-            </Popover>
-        </>
+        <Grid.Col span="content" order={TableComponentsOrder.DateRangePicker} py="sm">
+            <Group spacing="xs">
+                <Text span>{formatedRange}</Text>
+                <Popover opened={opened} onChange={setOpened}>
+                    <Popover.Target>
+                        <Button variant="outline" color="gray" onClick={() => setOpened(true)} px="xs">
+                            <CalendarSize24Px width={24} height={24} />
+                        </Button>
+                    </Popover.Target>
+                    <Popover.Dropdown p={0}>
+                        <DateRangePickerInlineCalendar
+                            initialRange={form.values.dateRange}
+                            onApply={onApply}
+                            onCancel={onCancel}
+                            presets={presets}
+                            rangeCalendarProps={rangeCalendarProps}
+                        />
+                    </Popover.Dropdown>
+                </Popover>
+            </Group>
+        </Grid.Col>
     );
 };

package/src/components/table/TableFilter.tsx

@@ -1,6 +1,7 @@
 import {CrossSize16Px, SearchSize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, createStyles, DefaultProps, Selectors, TextInput} from '@mantine/core';
+import {ActionIcon, createStyles, DefaultProps, Grid, Selectors, TextInput} from '@mantine/core';
 import {ChangeEventHandler, FunctionComponent, MouseEventHandler} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -53,22 +54,24 @@ export const TableFilter: FunctionComponent<TableFilterProps> = ({
     };
 
     return (
-        <TextInput
-            className={classes.wrapper}
-            placeholder={placeholder}
-            mb="md"
-            rightSection={
-                state.globalFilter ? (
-                    <ActionIcon onClick={handleClear}>
-                        <CrossSize16Px height={16} />
-                    </ActionIcon>
-                ) : (
-                    <SearchSize16Px height={14} className={classes.empty} />
-                )
-            }
-            value={state.globalFilter}
-            onChange={handleChange}
-            {...others}
-        />
+        <Grid.Col span="content" order={TableComponentsOrder.Filter} py="sm">
+            <TextInput
+                className={classes.wrapper}
+                placeholder={placeholder}
+                mb="md"
+                rightSection={
+                    state.globalFilter ? (
+                        <ActionIcon onClick={handleClear}>
+                            <CrossSize16Px height={16} />
+                        </ActionIcon>
+                    ) : (
+                        <SearchSize16Px height={14} className={classes.empty} />
+                    )
+                }
+                value={state.globalFilter}
+                onChange={handleChange}
+                {...others}
+            />
+        </Grid.Col>
     );
 };

package/src/components/table/TableHeader.tsx

@@ -1,18 +1,21 @@
 import {CrossSize16Px} from '@coveord/plasma-react-icons';
-import {createStyles, DefaultProps, Group, Selectors, Space, Tooltip} from '@mantine/core';
+import {createStyles, DefaultProps, Grid, Selectors, Tooltip} from '@mantine/core';
 import {FunctionComponent, ReactNode} from 'react';
 
 import {Button} from '../button';
+import {TableComponentsOrder} from './Table.styles';
 import {useTable} from './TableContext';
 
 const useStyles = createStyles((theme) => ({
     root: {
-        position: 'sticky',
-        top: 0,
-        zIndex: 1,
-        backgroundColor: theme.colors.gray[1],
+        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: {
+        justifySelf: 'flex-start',
+    },
 }));
 
 type TableHeaderStylesNames = Selectors<typeof useStyles>;
@@ -30,24 +33,33 @@ export const TableHeader: FunctionComponent<TableHeaderProps> = ({
     const {getSelectedRows, multiRowSelectionEnabled, clearSelection} = useTable();
     const {classes} = useStyles(null, {name: 'TableHeader', classNames, styles, unstyled});
     const selectedRows = getSelectedRows();
-    return multiRowSelectionEnabled ? (
-        <Group position="apart" className={classes.root}>
-            {selectedRows.length > 0 ? (
-                <Tooltip label="Unselect all">
-                    <Button onClick={clearSelection} ml="lg" variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
-                        {selectedRows.length} selected
-                    </Button>
-                </Tooltip>
-            ) : (
-                <Space />
-            )}
-            <Group position="right" spacing="lg" px="md" py="sm" {...others}>
-                {children}
-            </Group>
-        </Group>
-    ) : (
-        <Group position="right" spacing="lg" px="md" py="sm" className={classes.root} {...others}>
+    return (
+        <Grid
+            justify="flex-start"
+            align="center"
+            gutter="sm"
+            p={0}
+            pl="md"
+            pr="lg"
+            m={0}
+            className={classes.root}
+            {...others}
+        >
+            {multiRowSelectionEnabled && selectedRows.length > 0 ? (
+                <Grid.Col
+                    span="auto"
+                    py="sm"
+                    className={classes.multiSelectInfo}
+                    order={TableComponentsOrder.MultiSelectInfo}
+                >
+                    <Tooltip label="Unselect all">
+                        <Button onClick={clearSelection} variant="subtle" leftIcon={<CrossSize16Px height={16} />}>
+                            {selectedRows.length} selected
+                        </Button>
+                    </Tooltip>
+                </Grid.Col>
+            ) : null}
             {children}
-        </Group>
+        </Grid>
     );
 };

package/src/components/table/TablePredicate.tsx

@@ -1,5 +1,6 @@
-import {Group, Select, SelectItem, Text} from '@mantine/core';
+import {Grid, Group, Select, SelectItem, Text} from '@mantine/core';
 import {FunctionComponent} from 'react';
+import {TableComponentsOrder} from './Table.styles';
 
 import {useTable} from './TableContext';
 
@@ -29,16 +30,18 @@ export const TablePredicate: FunctionComponent<TablePredicateProps> = ({id, data
     };
 
     return (
-        <Group spacing="xs">
-            {label ? <Text>{label}:</Text> : null}
-            <Select
-                withinPortal
-                value={form.values.predicates[id]}
-                onChange={onUpdate}
-                data={data}
-                aria-label={label ?? id}
-                searchable={data.length > 7}
-            />
-        </Group>
+        <Grid.Col span="content" order={TableComponentsOrder.Predicate} py="sm">
+            <Group spacing="xs">
+                {label ? <Text>{label}:</Text> : null}
+                <Select
+                    withinPortal
+                    value={form.values.predicates[id]}
+                    onChange={onUpdate}
+                    data={data}
+                    aria-label={label ?? id}
+                    searchable={data.length > 7}
+                />
+            </Group>
+        </Grid.Col>
     );
 };