@coveord/plasma-mantine 50.0.2 → 51.1.0

package/src/components/date-range-picker/DateRangePickerPopoverCalendar.tsx

@@ -1,10 +1,11 @@
-import {DateRangePickerValue, RangeCalendar, RangeCalendarProps} from '@mantine/dates';
 import {Group, Popover, Space} from '@mantine/core';
+import {CalendarBaseProps, DatePicker} from '@mantine/dates';
 import {useClickOutside, useUncontrolled} from '@mantine/hooks';
 import {useState} from 'react';
 
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
-import {DateRangePickerPresetSelect, DateRangePickerPreset} from './DateRangePickerPresetSelect';
 
 interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
@@ -28,7 +29,10 @@ interface DateRangePickerPopoverCalendarProps<T> extends Pick<EditableDateRangeP
     /**
      * Props for RangeCalendar
      */
-    rangeCalendarProps?: Omit<RangeCalendarProps, 'value' | 'onChange'>;
+    rangeCalendarProps?: Omit<
+        CalendarBaseProps,
+        'value' | 'onChange' | 'isDateInRange' | 'isDateFirstInRange' | 'isDateLastInRange'
+    >;
 }
 
 export const DateRangePickerPopoverCalendar = <T extends unknown>({
@@ -77,11 +81,12 @@ export const DateRangePickerPopoverCalendar = <T extends unknown>({
 
             <Popover opened={opened} onChange={setOpened} trapFocus>
                 <Popover.Dropdown>
-                    <RangeCalendar
+                    <DatePicker
                         ref={ref}
-                        styles={{cell: {textAlign: 'center'}}}
-                        amountOfMonths={2}
-                        firstDayOfWeek="sunday"
+                        type="range"
+                        styles={{calendar: {cell: {textAlign: 'center'}}}}
+                        numberOfColumns={2}
+                        firstDayOfWeek={0}
                         allowSingleDateInRange
                         value={_value}
                         onChange={onCalendarChange}

package/src/components/date-range-picker/DateRangePickerPresetSelect.tsx

@@ -1,7 +1,7 @@
-import {DateRangePickerValue, isSameDate} from '@mantine/dates';
 import {Select, SelectItem, SelectProps} from '@mantine/core';
-import {useState, useEffect} from 'react';
 import dayjs from 'dayjs';
+import {useEffect, useState} from 'react';
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface DateRangePickerPreset {
     label: string;
@@ -26,7 +26,7 @@ export const DateRangePickerPresetSelect = <T extends unknown>({
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             const selected = Object.entries(presets).find(
-                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && isSameDate(range[1]!, value[1]!)
+                ([id, {range}]) => dayjs(range[0]!).isSame(value[0]) && dayjs(value[1]!).isSame(value[1]!)
             );
             if (selected) {
                 return selected[0];

package/src/components/date-range-picker/EditableDateRangePicker.tsx

@@ -1,6 +1,7 @@
-import {DatePicker, DatePickerProps, DateRangePickerValue} from '@mantine/dates';
+import {DateInput, DatePickerProps} from '@mantine/dates';
 import dayjs from 'dayjs';
 import {ReactNode} from 'react';
+import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface EditableDateRangePickerProps {
     value: DateRangePickerValue;
@@ -34,26 +35,24 @@ export const EditableDateRangePicker = ({
 
     return (
         <>
-            <DatePicker
-                allowFreeInput
+            <DateInput
                 clearable={false}
                 label="Start"
-                {...startProps}
                 value={value?.[0]}
                 onChange={onChangeStart}
                 onFocus={onFocus}
-                styles={{...startProps.styles, dropdown: {display: 'none'}}}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                styles={{...startProps.styles}}
             />
             {separator}
-            <DatePicker
-                allowFreeInput
+            <DateInput
                 clearable={false}
                 label="End"
-                {...endProps}
                 value={value?.[1]}
                 onChange={onChangeEnd}
                 onFocus={onFocus}
-                styles={{...endProps.styles, dropdown: {display: 'none'}}}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                styles={{...endProps.styles}}
             />
         </>
     );

package/src/components/date-range-picker/__tests__/DateRangePickerInlineCalendar.spec.tsx

@@ -63,8 +63,8 @@ describe('DateRangePickerInlineCalendar', () => {
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
 
         // click once for the start, once for the end
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
-        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getAllByRole('button', {name: /8 january 2022/i})[0]);
+        await user.click(screen.getAllByRole('button', {name: /14 january 2022/i})[0]);
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
@@ -78,8 +78,7 @@ describe('DateRangePickerInlineCalendar', () => {
         vi.useFakeTimers().setSystemTime(new Date(2022, 0, 31));
         const onApply = vi.fn();
         render(<DateRangePickerInlineCalendar initialRange={[null, null]} onApply={onApply} onCancel={vi.fn()} />);
-
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
+        await user.click(screen.getAllByRole('button', {name: /8 january 2022/i})[0]);
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
         expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), new Date(2022, 0, 8)]);

package/src/components/date-range-picker/__tests__/DateRangePickerPopoverCalendar.spec.tsx

@@ -1,6 +1,6 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {useForm} from '@mantine/form';
 import {render, screen, userEvent} from '@test-utils';
+import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
 
 import {DateRangePickerPopoverCalendar} from '../DateRangePickerPopoverCalendar';
 
@@ -66,14 +66,14 @@ describe('DateRangePickerPopoverCalendar', () => {
 
         await user.click(screen.getByRole('textbox', {name: 'Start'}));
         // click once for the start, once for the end
-        await user.click(screen.getAllByRole('button', {name: '8'})[0]);
-        await user.click(screen.getAllByRole('button', {name: '14'})[0]);
+        await user.click(screen.getByRole('button', {name: '8 January 2022'}));
+        await user.click(screen.getByRole('button', {name: '14 February 2022'}));
 
         // hides the calendar when the second date is clicked
-        expect(screen.queryAllByRole('button', {name: '8'})[0]).not.toBeVisible();
-        expect(screen.queryAllByRole('button', {name: '8'})[1]).not.toBeVisible();
+        expect(await screen.findByRole('button', {name: '8 January 2022'})).not.toBeVisible();
+        expect(await screen.findByRole('button', {name: '8 February 2022'})).not.toBeVisible();
 
-        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-01-14T00:00:00.000Z"]');
+        expect(screen.getByTestId('json')).toHaveTextContent('["2022-01-08T00:00:00.000Z","2022-02-14T00:00:00.000Z"]');
 
         vi.useRealTimers();
     });

package/src/components/header/Header.tsx

@@ -68,7 +68,7 @@ export const Header: HeaderType = ({description, borderBottom, children, variant
 const HeaderBreadcrumbs: FunctionComponent<{children: ReactNode}> = ({children}) => (
     <Breadcrumbs
         styles={(theme) => ({
-            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300},
+            breadcrumb: {fontSize: theme.fontSizes.sm, fontWeight: 300, color: theme.colors.action[6]},
             separator: {color: theme.colors.gray[5]},
         })}
     >

package/src/components/header/__tests__/Header.spec.tsx

@@ -10,7 +10,7 @@ describe('Header', () => {
         const header = screen.getByRole('heading');
         expect(header).toMatchInlineSnapshot(`
           <h1
-            class="mantine-Text-root mantine-Title-root mantine-jqzr1h"
+            class="mantine-Text-root mantine-Title-root mantine-14ccmdx"
           >
             child
           </h1>

package/src/components/header/__tests__/__snapshots__/Header.spec.tsx.snap

@@ -3,36 +3,36 @@
 exports[`Header > renders the specified breadcrumbs above the title 1`] = `
 <div>
   <div
-    class="mantine-Group-root mantine-1g2mfqe"
+    class="mantine-Group-root mantine-ogmezo"
   >
     <div
-      class="mantine-Stack-root mantine-1fod3h5"
+      class="mantine-Stack-root mantine-1178y6y"
     >
       <div
-        class="mantine-Breadcrumbs-root mantine-16ttirm"
+        class="mantine-Breadcrumbs-root mantine-1ujbd2v"
       >
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           One
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Two
         </a>
         <div
-          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-1mpiak2"
+          class="mantine-Text-root mantine-Breadcrumbs-separator mantine-se7e6j"
         >
           /
         </div>
         <a
-          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1cehd6q"
+          class="mantine-Text-root mantine-Anchor-root mantine-Breadcrumbs-breadcrumb mantine-1rfg646"
         >
           Three
         </a>
@@ -41,13 +41,13 @@ exports[`Header > renders the specified breadcrumbs above the title 1`] = `
         class="mantine-xg7kom"
       >
         <h1
-          class="mantine-Text-root mantine-Title-root mantine-jqzr1h"
+          class="mantine-Text-root mantine-Title-root mantine-14ccmdx"
         >
           Title
         </h1>
       </div>
       <div
-        class="mantine-Text-root mantine-1qppuo4"
+        class="mantine-Text-root mantine-vti01c"
       />
     </div>
   </div>

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

@@ -7,7 +7,7 @@ import {StickyFooter} from '../sticky-footer';
 import {ModalWizardStep, ModalWizardStepProps, ResolveStep} from './ModalWizardStep';
 
 const useStyles = createStyles(() => ({
-    modal: {
+    content: {
         display: 'flex',
         flexDirection: 'column',
     },
@@ -103,14 +103,13 @@ export const ModalWizard: ModalWizardType = ({
     isDirty,
     handleDirtyState,
     classNames,
-    className,
     styles,
     unstyled,
     children,
     ...modalProps
 }) => {
     const {
-        classes: {modal, body},
+        classes: {content, body},
         cx,
     } = useStyles(null, {
         name: 'ModalWizard',
@@ -167,7 +166,7 @@ export const ModalWizard: ModalWizardType = ({
     return (
         <Modal
             opened={opened}
-            classNames={{modal: cx(modal, classNames?.modal), body: cx(body, classNames?.body)}}
+            classNames={{content: cx(content, classNames?.content), body: cx(body, classNames?.body)}}
             centered
             onClose={() => handleClose(true)}
             withCloseButton={false}
@@ -183,7 +182,7 @@ export const ModalWizard: ModalWizardType = ({
                     />
                 ) : null}
                 <Header.Actions>
-                    <CloseButton aria-label={modalProps.closeButtonLabel} onClick={() => handleClose(true)} />
+                    <CloseButton aria-label={'close-modal'} onClick={() => handleClose(true)} />
                 </Header.Actions>
             </Header>
             {currentStep.props.showProgressBar && (

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

@@ -36,7 +36,6 @@ describe('ModalWizard', () => {
 
         render(
             <ModalWizard
-                closeButtonLabel="closebuttonlabel"
                 isDirty={isDirty}
                 handleDirtyState={() => confirm('Are you sure you want to close?')}
                 opened={true}
@@ -64,7 +63,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -83,7 +82,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -110,7 +109,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -143,7 +142,7 @@ describe('ModalWizard', () => {
 
         expect(
             screen.getByRole('button', {
-                name: /closebuttonlabel/i,
+                name: /close-modal/i,
             })
         ).toBeInTheDocument();
 
@@ -172,7 +171,7 @@ describe('ModalWizard', () => {
         const onClose = vi.fn();
 
         render(
-            <ModalWizard isDirty={isDirty} onClose={onClose} closeButtonLabel="closebuttonlabel" opened={true}>
+            <ModalWizard isDirty={isDirty} onClose={onClose} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -186,7 +185,7 @@ describe('ModalWizard', () => {
         );
 
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
         await user.click(closeButton);
 
@@ -282,13 +281,7 @@ describe('ModalWizard', () => {
         const handleDirtyState = vi.fn();
 
         render(
-            <ModalWizard
-                isDirty={isDirty}
-                onClose={onClose}
-                handleDirtyState={handleDirtyState}
-                closeButtonLabel="closebuttonlabel"
-                opened={true}
-            >
+            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -301,7 +294,7 @@ describe('ModalWizard', () => {
             </ModalWizard>
         );
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
 
         handleDirtyState.mockReturnValueOnce(true);
@@ -327,13 +320,7 @@ describe('ModalWizard', () => {
         const handleDirtyState = vi.fn();
 
         render(
-            <ModalWizard
-                isDirty={isDirty}
-                onClose={onClose}
-                handleDirtyState={handleDirtyState}
-                closeButtonLabel="closebuttonlabel"
-                opened={true}
-            >
+            <ModalWizard isDirty={isDirty} onClose={onClose} handleDirtyState={handleDirtyState} opened={true}>
                 {modelSteps.map((model_item) => (
                     <ModalWizard.Step
                         docLink={model_item.docLink}
@@ -346,7 +333,7 @@ describe('ModalWizard', () => {
             </ModalWizard>
         );
         const closeButton = screen.getByRole('button', {
-            name: /closebuttonlabel/i,
+            name: /close-modal/i,
         });
 
         handleDirtyState.mockReturnValueOnce(false);

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

@@ -44,7 +44,7 @@ const useStyles = createStyles<string, TableStylesParams>((theme, {hasHeader, mu
 
         rowCollapsibleButtonCell: {
             textAlign: 'right',
-            padding: `${theme.spacing.xs / 2}px ${theme.spacing.sm}px !important`,
+            padding: `calc(${theme.spacing.xs}/2) ${theme.spacing.sm} !important`,
         },
 
         row: {

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

@@ -1,4 +1,3 @@
-import {DateRangePickerValue} from '@mantine/dates';
 import {UseFormReturnType} from '@mantine/form';
 import {
     ColumnDef,
@@ -8,6 +7,7 @@ import {
     TableState as TanstackTableState,
 } from '@tanstack/table-core';
 import {Dispatch, ReactElement, ReactNode, RefObject} from 'react';
+import {DateRangePickerValue} from '../date-range-picker/DateRangePickerInlineCalendar';
 
 import {TableActions} from './TableActions';
 import {TableAccordionColumn, TableCollapsibleColumn} from './TableCollapsibleColumn';

package/src/components/table/TableDateRangePicker.tsx

@@ -1,12 +1,15 @@
 import {CalendarSize24Px} from '@coveord/plasma-react-icons';
 import {Popover} from '@mantine/core';
-import {DateRangePickerValue} from '@mantine/dates';
 import dayjs from 'dayjs';
 import {FunctionComponent, useState} from 'react';
 
 import {Button} from '../button';
-import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from '../date-range-picker';
-import {DateRangePickerPreset} from '../date-range-picker/DateRangePickerPresetSelect';
+import {
+    DateRangePickerInlineCalendar,
+    DateRangePickerInlineCalendarProps,
+    DateRangePickerPreset,
+    DateRangePickerValue,
+} from '../date-range-picker';
 import {useTable} from './TableContext';
 
 interface TableDateRangePickerProps

package/src/components/table/TablePagination.tsx

@@ -24,19 +24,22 @@ export const TablePagination: FunctionComponent<TablePaginationProps> = ({totalP
 
     return (
         <Pagination
-            page={state.pagination.pageIndex + 1}
+            value={state.pagination.pageIndex + 1}
             onChange={updatePage}
             total={total}
             boundaries={0}
             size="md"
-            getItemAriaLabel={(label) => {
-                switch (label) {
-                    case 'prev':
-                        return 'previous page';
+            getControlProps={(control) => {
+                switch (control) {
+                    case 'previous':
+                        return {
+                            component: 'button',
+                            'aria-label': 'previous page',
+                        };
                     case 'next':
-                        return 'next page';
+                        return {component: 'button', 'aria-label': 'next page'};
                     default:
-                        return `${label}`;
+                        return {};
                 }
             }}
         />

package/src/components/table/Th.tsx

@@ -12,7 +12,7 @@ const useStyles = createStyles((theme) => ({
 
     control: {
         width: '100%',
-        padding: `${theme.spacing.xs}px ${theme.spacing.sm}px`,
+        padding: `${theme.spacing.xs} ${theme.spacing.sm}`,
         whiteSpace: 'nowrap',
 
         '&:hover': {

package/src/theme/Theme.tsx

@@ -1,6 +1,6 @@
 import {InfoSize24Px} from '@coveord/plasma-react-icons';
 import {color} from '@coveord/plasma-tokens';
-import {ButtonStylesParams, MantineThemeOverride, ModalStylesParams} from '@mantine/core';
+import {getSize, MantineThemeOverride, ModalProps, NotificationProps, rem} from '@mantine/core';
 
 import {PlasmaColors} from './PlasmaColors';
 
@@ -12,23 +12,23 @@ export const plasmaTheme: MantineThemeOverride = {
     defaultRadius: 8,
     lineHeight: 1.5,
     spacing: {
-        xs: 8,
-        sm: 16,
-        md: 24,
-        lg: 32,
-        xl: 40,
+        xs: '8px',
+        sm: '16px',
+        md: '24px',
+        lg: '32px',
+        xl: '40px',
     },
     primaryColor: 'action',
     headings: {
         fontFamily: 'canada-type-gibson, sans-serif',
         fontWeight: 500,
         sizes: {
-            h1: {fontSize: 48, lineHeight: undefined, fontWeight: 300},
-            h2: {fontSize: 32, lineHeight: undefined, fontWeight: 500},
-            h3: {fontSize: 24, lineHeight: undefined, fontWeight: 500},
-            h4: {fontSize: 18, lineHeight: undefined, fontWeight: 300},
-            h5: {fontSize: 14, lineHeight: undefined, fontWeight: 500},
-            h6: {fontSize: 12, lineHeight: undefined, fontWeight: 500},
+            h1: {fontSize: '48px', lineHeight: undefined, fontWeight: 300},
+            h2: {fontSize: '32px', lineHeight: undefined, fontWeight: 500},
+            h3: {fontSize: '24px', lineHeight: undefined, fontWeight: 500},
+            h4: {fontSize: '18px', lineHeight: undefined, fontWeight: 300},
+            h5: {fontSize: '14px', lineHeight: undefined, fontWeight: 500},
+            h6: {fontSize: '12px', lineHeight: undefined, fontWeight: 500},
         },
     },
     shadows: {
@@ -64,26 +64,43 @@ export const plasmaTheme: MantineThemeOverride = {
             },
         },
         Button: {
-            styles: (theme, params: ButtonStylesParams) => ({
+            styles: () => ({
                 root: {
                     fontWeight: 400,
-                    backgroundColor: params.variant === 'outline' ? 'white' : undefined,
                 },
             }),
+            variants: {
+                outline: () => ({
+                    root: {
+                        backgroundColor: 'white',
+                    },
+                }),
+            },
         },
         Modal: {
-            styles: (theme, {size, fullScreen}: ModalStylesParams) => ({
-                modal: {
-                    width: fullScreen
-                        ? undefined
-                        : theme.fn.size({size, sizes: {xs: 440, sm: 550, md: 800, lg: 1334, xl: '85%'}}),
+            styles: (theme, {size, fullScreen}: ModalProps) => ({
+                content: {
+                    flex: fullScreen
+                        ? '0 0 100%'
+                        : `0 0 ${getSize({
+                              size: size,
+                              sizes: {
+                                  xs: rem(440),
+                                  sm: rem(550),
+                                  md: rem(800),
+                                  lg: rem(1334),
+                                  xl: rem('85%'),
+                              },
+                          })}`,
                     overflow: 'auto',
                 },
                 title: {width: '100%'},
             }),
             defaultProps: {
-                overlayColor: color.primary.navy[9],
-                overlayOpacity: 0.9,
+                overlayProps: {
+                    color: color.primary.navy[9],
+                    opacity: 0.9,
+                },
             },
         },
         InputWrapper: {
@@ -136,7 +153,7 @@ export const plasmaTheme: MantineThemeOverride = {
         },
         Anchor: {
             defaultProps: {
-                color: 'action',
+                color: 'action.6',
             },
             styles: (theme) => ({
                 root: {
@@ -193,5 +210,31 @@ export const plasmaTheme: MantineThemeOverride = {
                 fw: 300,
             },
         },
+        Notification: {
+            styles: (theme, {color: notificationType}: NotificationProps) => ({
+                root: {
+                    borderColor: theme.colors.gray[3],
+                    backgroundColor: theme.colors.gray[0],
+                    boxShadow: theme.shadows.lg,
+                    padding: theme.spacing.sm,
+                    '&[data-with-icon]': {
+                        paddingLeft: theme.spacing.sm,
+                    },
+                },
+                icon: {
+                    backgroundColor: 'transparent',
+                    marginRight: theme.spacing.sm,
+                    color: theme.colors?.[notificationType][6],
+                },
+                closeButton: {
+                    margin: theme.spacing.xs,
+                    color: theme.colors.gray[5],
+                },
+            }),
+            defaultProps: {
+                icon: <InfoSize24Px height={24} />,
+                color: 'info',
+            },
+        },
     },
 };