@coveord/plasma-mantine 56.3.3 → 56.5.0

package/src/components/DateRangePicker/DateRangePicker.tsx

@@ -0,0 +1,199 @@
+import {IconCalendar} from '@coveord/plasma-react-icons';
+import {
+    BoxProps,
+    factory,
+    Factory,
+    InputBase,
+    Popover,
+    PopoverProps,
+    StylesApiProps,
+    useProps,
+    useStyles,
+} from '@mantine/core';
+import {DatesRangeValue, DateStringValue} from '@mantine/dates';
+import {useUncontrolled} from '@mantine/hooks';
+import dayjs from 'dayjs';
+import {useUrlSyncedState, UseUrlSyncedStateOptions} from '../../hooks/use-url-synced-state';
+import {DateRangePickerInlineCalendar, DateRangePickerInlineCalendarProps} from './DateRangePickerInlineCalendar';
+
+const serialization = (input: Pick<UseUrlSyncedStateOptions<DatesRangeValue<string>>, 'serializer' | 'deserializer'>) =>
+    Object.freeze(input);
+
+const DATE_RANGE_SERIALIZATION = serialization({
+    serializer: ([from, to]) => [
+        ['from', from ? new Date(from).toISOString() : '', true],
+        ['to', to ? new Date(to).toISOString() : '', true],
+    ],
+    deserializer: (params, initial) => [
+        params.get('from') ? params.get('from') : initial[0],
+        params.get('to') ? params.get('to') : initial[1],
+    ],
+});
+
+export type DateRangePickerStylesNames = 'input';
+
+export interface DateRangePickerProps
+    extends BoxProps,
+        Pick<DateRangePickerInlineCalendarProps, 'presets' | 'rangeCalendarProps' | 'startProps' | 'endProps'>,
+        Pick<PopoverProps, 'opened' | 'defaultOpened'>,
+        StylesApiProps<DateRangePickerFactory> {
+    /**
+     * Called when the target input is clicked
+     */
+    onClick?(): void;
+    /**
+     * Function called when the cancel button is clicked.
+     */
+    onCancel?(): void;
+    /**
+     * Function called when the date range value changes.
+     */
+    onChange?(dates: DatesRangeValue<string>): void;
+    /**
+     * Called when the popover opened state changes.
+     */
+    onOpenedChange?(opened: boolean): void;
+    /**
+     * Optional formatter function to format the date value.
+     * Receives the date prop and should return a string.
+     * @default (time) => dayjs(time).format('MMM D, YYYY')
+     */
+    formatter?: (time: dayjs.ConfigType) => string;
+    /**
+     * The placeholder label to display when no date range is selected.
+     *
+     * @default "Select date range"
+     */
+    placeholder?: string;
+    /**
+     * Default value for uncontrolled input
+     */
+    defaultValue?: DatesRangeValue<string>;
+    /**
+     * Value for controlled input
+     */
+    value?: DatesRangeValue<string>;
+    /**
+     * Sync the selected dates to URL query parameters
+     */
+    syncWithUrl?: boolean;
+    /**
+     * Error message to display.
+     */
+    error?: string;
+}
+
+export type DateRangePickerFactory = Factory<{
+    props: DateRangePickerProps;
+    ref: HTMLDivElement;
+    stylesNames: DateRangePickerStylesNames;
+}>;
+
+const defaultProps: Partial<DateRangePickerProps> = {
+    placeholder: 'Select date range',
+    formatter: (time) => dayjs(time).format('MMM D, YYYY'),
+};
+
+export const DateRangePicker = factory<DateRangePickerFactory>((props: DateRangePickerProps) => {
+    const {
+        defaultValue,
+        value,
+        opened,
+        defaultOpened,
+        onOpenedChange,
+        onClick,
+        onCancel,
+        onChange,
+        presets,
+        startProps,
+        endProps,
+        rangeCalendarProps,
+        formatter,
+        placeholder,
+        syncWithUrl,
+        error,
+        className,
+        classNames,
+        style,
+        styles,
+        vars,
+        unstyled,
+        ...others
+    } = useProps('PlasmaDateRangePicker', defaultProps as Partial<DateRangePickerProps>, props);
+
+    const getStyles = useStyles<DateRangePickerFactory>({
+        name: 'DateRangePicker',
+        classes: {},
+        props,
+        className,
+        classNames,
+        style,
+        styles,
+        unstyled,
+        vars,
+    });
+    const stylesApiProps = {classNames, styles};
+
+    const [_opened, setOpened] = useUncontrolled({
+        value: opened,
+        defaultValue: defaultOpened,
+        finalValue: false,
+        onChange: onOpenedChange,
+    });
+
+    const [dateRange, setDateRange] = useUrlSyncedState<DatesRangeValue<string>>({
+        ...DATE_RANGE_SERIALIZATION,
+        initialState: defaultValue !== undefined ? defaultValue : [null, null],
+        sync: !!syncWithUrl,
+    });
+
+    const handleApply = (dates: DatesRangeValue<string>) => {
+        if (value === undefined) {
+            setDateRange(dates);
+        }
+        onChange?.(dates);
+        setOpened(false);
+    };
+
+    const handleClick = () => {
+        setOpened(true);
+        onClick?.();
+    };
+
+    const handleCancel = () => {
+        setOpened(false);
+        onCancel?.();
+    };
+
+    const _value = value ?? dateRange;
+    const formattedRange = `${formatter(_value[0])} - ${formatter(_value[1])}`;
+    const dateRangeInitialized = _value.every((date: DateStringValue) => typeof date === 'string' && date !== '');
+
+    return (
+        <Popover opened={_opened} onChange={setOpened}>
+            <Popover.Target>
+                <InputBase
+                    component="button"
+                    leftSection={<IconCalendar height={16} />}
+                    onClick={handleClick}
+                    error={error}
+                    {...getStyles('input', {className, style, ...stylesApiProps})}
+                    {...others}
+                >
+                    {dateRangeInitialized ? formattedRange : placeholder}
+                </InputBase>
+            </Popover.Target>
+            <Popover.Dropdown p={0}>
+                <DateRangePickerInlineCalendar
+                    initialRange={_value}
+                    onApply={handleApply}
+                    onCancel={handleCancel}
+                    presets={presets}
+                    rangeCalendarProps={rangeCalendarProps}
+                    startProps={startProps}
+                    endProps={endProps}
+                />
+            </Popover.Dropdown>
+        </Popover>
+    );
+});

package/src/components/DateRangePicker/DateRangePickerInlineCalendar.tsx

@@ -0,0 +1,132 @@
+import {Center, Group, Space} from '@mantine/core';
+import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeValue} from '@mantine/dates';
+import {useForm} from '@mantine/form';
+
+import dayjs from 'dayjs';
+import {Button} from '../Button/Button.js';
+import DateRangeClasses from './DateRange.module.css';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect.js';
+import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker.js';
+export interface DateRangePickerInlineCalendarProps
+    extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
+    /**
+     * Initial selected range
+     */
+    initialRange: DatesRangeValue<DateStringValue | null>;
+    /**
+     * Function called when the user applies the new date range
+     *
+     * @param range the newly selected dates
+     */
+    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;
+    /**
+     * Function called when the user click on the cancel button
+     */
+    onCancel: () => void;
+    /**
+     * The presets to display
+     *
+     * @default {}
+     * @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)]}
+     * }
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+    /**
+     * Props for RangeCalendar displayed in the popover
+     */
+    rangeCalendarProps?: Omit<
+        DatePickerBaseProps,
+        | 'value'
+        | 'onChange'
+        | 'isDateInRange'
+        | 'isDateFirstInRange'
+        | 'isDateLastInRange'
+        | 'presets'
+        | '__onPresetSelect'
+        | 'allowDeselect'
+    >;
+}
+
+const isDateRangePickerValue = (value: unknown): value is DatesRangeValue => Array.isArray(value) && value.length === 2;
+
+const endOfDay = (value: DateStringValue): DateStringValue => (value ? dayjs(value).endOf('day').toISOString() : value);
+
+export const DateRangePickerInlineCalendar = ({
+    initialRange,
+    onApply,
+    onCancel,
+    presets,
+    startProps,
+    endProps,
+    rangeCalendarProps,
+}: DateRangePickerInlineCalendarProps) => {
+    const form = useForm({
+        initialValues: {
+            dates: initialRange,
+        },
+    });
+    const calendarInputProps = form.getInputProps('dates');
+
+    const onCalendarChange = (range: DateStringValue | DatesRangeValue<DateStringValue | null>): void => {
+        // If the current value is [null, null] and a date is selected, set [selectedValue, null]
+        if (isDateRangePickerValue(range) && range[0] && range[1] === null) {
+            calendarInputProps.onChange([dayjs(range[0]).toISOString(), null]);
+            return;
+        }
+        const normalized =
+            isDateRangePickerValue(range) && range[1] ? [dayjs(range[0]).toISOString(), endOfDay(range[1])] : range;
+        calendarInputProps.onChange(normalized);
+    };
+
+    const onCalendarApply = () => {
+        // In case the user only clicked the start date, but not the end date,
+        // assume a single day was meant to be selected.
+        if (!form.values.dates[1]) {
+            form.values.dates[1] = endOfDay(form.values.dates[0]);
+        }
+        onApply(form.values.dates);
+    };
+    return (
+        <>
+            <Group align="center" gap="xs" grow px="md" py="sm" className={DateRangeClasses.picker}>
+                <EditableDateRangePicker
+                    value={calendarInputProps.value}
+                    {...calendarInputProps}
+                    startProps={startProps}
+                    endProps={endProps}
+                />
+                {presets ? (
+                    <>
+                        <Space w="sm" />
+                        <DateRangePickerPresetSelect
+                            value={calendarInputProps.value}
+                            presets={presets}
+                            {...calendarInputProps}
+                            selectProps={{comboboxProps: {withinPortal: false}}}
+                        />
+                    </>
+                ) : null}
+            </Group>
+            <Center py="sm" px="md">
+                <DatePicker<'range'>
+                    numberOfColumns={2}
+                    columnsToScroll={1}
+                    type="range"
+                    styles={{day: {textAlign: 'center'}}}
+                    firstDayOfWeek={0}
+                    allowSingleDateInRange
+                    {...rangeCalendarProps}
+                    {...calendarInputProps}
+                    onChange={onCalendarChange}
+                />
+            </Center>
+            <Group justify="right" gap="xs" px="md" py="sm" className={DateRangeClasses.save}>
+                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>
+                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>
+            </Group>
+        </>
+    );
+};

package/src/components/DateRangePicker/EditableDateRangePicker.tsx

@@ -0,0 +1,55 @@
+import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';
+import dayjs from 'dayjs';
+
+export interface EditableDateRangePickerProps {
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
+    onFocus?: () => void;
+    /**
+     * Props for the start input
+     */
+    startProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+    /**
+     * Props for the end input
+     */
+    endProps?: Omit<Partial<DatePickerProps>, 'value' | 'onChange' | 'onFocus'>;
+}
+
+export const EditableDateRangePicker = ({
+    value,
+    onChange,
+    onFocus,
+    startProps = {},
+    endProps = {},
+}: EditableDateRangePickerProps) => {
+    const onChangeStart = (date: DateStringValue | null) => {
+        onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);
+    };
+    const onChangeEnd = (date: DateStringValue | null) => {
+        onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);
+    };
+
+    return (
+        <>
+            <DateInput
+                clearable={false}
+                label="Start"
+                value={value?.[0]}
+                onChange={onChangeStart}
+                onFocus={onFocus}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                {...startProps}
+            />
+            <DateInput
+                clearable={false}
+                label="End"
+                value={value?.[1]}
+                onChange={onChangeEnd}
+                onFocus={onFocus}
+                popoverProps={{styles: {dropdown: {display: 'none'}}}}
+                {...endProps}
+            />
+        </>
+    );
+};
+export type {DateRangePickerPreset} from './DateRangePickerPresetSelect';

package/src/components/DateRangePicker/__tests__/DateRangePicker.spec.tsx

@@ -0,0 +1,228 @@
+import {render, screen, userEvent, waitFor} from '@test-utils';
+import dayjs from 'dayjs';
+import {DateRangePicker} from '../DateRangePicker.js';
+
+describe('DateRangePicker', () => {
+    it('renders with placeholder text when no date range is selected', () => {
+        render(<DateRangePicker />);
+
+        expect(screen.getByRole('button', {name: /select date range/i})).toBeVisible();
+    });
+
+    it('renders with custom placeholder text', () => {
+        render(<DateRangePicker placeholder="Choose dates" />);
+
+        expect(screen.getByRole('button', {name: /choose dates/i})).toBeVisible();
+    });
+
+    it('displays the formatted date range when defaultValue is provided', () => {
+        const startDate = dayjs('2022-01-01').toISOString();
+        const endDate = dayjs('2022-01-07').toISOString();
+        render(<DateRangePicker defaultValue={[startDate, endDate]} />);
+
+        expect(screen.getByRole('button', {name: /jan 1, 2022 - jan 7, 2022/i})).toBeVisible();
+    });
+
+    it('displays the formatted date range when value is provided (controlled)', () => {
+        const startDate = dayjs('2022-03-15').toISOString();
+        const endDate = dayjs('2022-03-20').toISOString();
+        render(<DateRangePicker value={[startDate, endDate]} />);
+
+        expect(screen.getByRole('button', {name: /mar 15, 2022 - mar 20, 2022/i})).toBeVisible();
+    });
+
+    it('uses custom formatter when provided', () => {
+        const startDate = dayjs('2022-01-01').toISOString();
+        const endDate = dayjs('2022-01-07').toISOString();
+        const customFormatter = (date: dayjs.ConfigType) => dayjs(date).format('YYYY/MM/DD');
+        render(<DateRangePicker defaultValue={[startDate, endDate]} formatter={customFormatter} />);
+
+        expect(screen.getByRole('button', {name: /2022\/01\/01 - 2022\/01\/07/i})).toBeVisible();
+    });
+
+    it('opens popover when input is clicked', async () => {
+        const user = userEvent.setup();
+        render(<DateRangePicker />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        await waitFor(() => expect(screen.getByRole('dialog')).toBeVisible());
+    });
+
+    it('calls onClick handler when input is clicked', async () => {
+        const user = userEvent.setup();
+        const onClick = vi.fn();
+        render(<DateRangePicker onClick={onClick} />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls onChange when a date range is applied', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        render(<DateRangePicker onChange={onChange} />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        await screen.findByRole('dialog');
+        await user.type(screen.getByRole('textbox', {name: /start/i}), '2022-01-02');
+        await user.type(screen.getByRole('textbox', {name: /end/i}), '2022-01-08');
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith(['2022-01-02T00:00:00.000Z', '2022-01-08T23:59:59.999Z']);
+        expect(screen.queryByRole('dialog')).not.toBeVisible();
+    });
+
+    it('closes popover when Cancel is clicked', async () => {
+        const user = userEvent.setup();
+        render(<DateRangePicker />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        await screen.findByRole('dialog');
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
+
+        await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeVisible());
+    });
+
+    it('calls onCancel when Cancel button is clicked', async () => {
+        const user = userEvent.setup();
+        const onCancel = vi.fn();
+        render(<DateRangePicker onCancel={onCancel} />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        await screen.findByRole('dialog');
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
+
+        expect(onCancel).toHaveBeenCalledTimes(1);
+    });
+
+    it('applies the selected date range in uncontrolled mode', async () => {
+        const user = userEvent.setup();
+        render(<DateRangePicker />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+        await screen.findByRole('dialog');
+        await user.type(screen.getByRole('textbox', {name: /start/i}), '2022-01-02');
+        await user.type(screen.getByRole('textbox', {name: /end/i}), '2022-01-08');
+        await user.click(screen.getByRole('button', {name: 'Apply'}));
+
+        expect(screen.getByRole('button', {name: /jan 2, 2022 - jan 8, 2022/i})).toBeVisible();
+    });
+
+    it('applies the selected date range in controlled mode', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const startDate = dayjs('2022-01-01').toISOString();
+        const endDate = dayjs('2022-01-07').toISOString();
+        const {rerender} = render(<DateRangePicker value={[startDate, endDate]} onChange={onChange} />);
+
+        await user.click(screen.getByRole('button', {name: /jan 1, 2022 - jan 7, 2022/i}));
+        await screen.findByRole('dialog');
+        await user.clear(screen.getByRole('textbox', {name: /start/i}));
+        await user.type(screen.getByRole('textbox', {name: /start/i}), '2022-01-02');
+        await user.clear(screen.getByRole('textbox', {name: /end/i}));
+        await user.type(screen.getByRole('textbox', {name: /end/i}), '2022-01-08');
+        await user.click(screen.getByRole('button', {name: /apply/i}));
+
+        expect(onChange).toHaveBeenCalledWith(['2022-01-02T00:00:00.000Z', '2022-01-08T23:59:59.999Z']);
+
+        // Value should not change unless parent updates it
+        expect(screen.getByRole('button', {name: /jan 1, 2022 - jan 7, 2022/i})).toBeVisible();
+        rerender(
+            <DateRangePicker value={['2022-01-02T00:00:00.000Z', '2022-01-08T23:59:59.999Z']} onChange={onChange} />,
+        );
+        expect(screen.getByRole('button', {name: /jan 2, 2022 - jan 8, 2022/i})).toBeVisible();
+    });
+
+    it('displays error message when error prop is provided', () => {
+        render(<DateRangePicker error="Invalid date range" />);
+
+        expect(screen.getByText('Invalid date range')).toBeVisible();
+    });
+
+    describe('with presets', () => {
+        it('renders preset options in the popover', async () => {
+            const user = userEvent.setup();
+            render(
+                <DateRangePicker
+                    presets={{
+                        lastWeek: {
+                            label: 'Last Week',
+                            range: [
+                                new Date(2022, 0, 1, 0, 0, 0, 0).toISOString(),
+                                new Date(2022, 0, 7, 23, 59, 59, 999).toISOString(),
+                            ],
+                        },
+                        lastMonth: {
+                            label: 'Last Month',
+                            range: [
+                                new Date(2022, 0, 1, 0, 0, 0, 0).toISOString(),
+                                new Date(2022, 0, 31, 23, 59, 59, 999).toISOString(),
+                            ],
+                        },
+                    }}
+                />,
+            );
+
+            await user.click(screen.getByRole('button', {name: /select date range/i}));
+            await screen.findByRole('dialog');
+            await user.click(
+                screen.getByRole('textbox', {
+                    name: 'Date range',
+                }),
+            );
+            expect(screen.getByRole('option', {name: 'Last Week'})).toBeVisible();
+            expect(screen.getByRole('option', {name: 'Last Month'})).toBeVisible();
+        });
+    });
+
+    describe('when url sync is activated', () => {
+        afterEach(() => {
+            window.history.replaceState(null, '', '/');
+        });
+
+        it('sets the selected date range in the url', async () => {
+            const user = userEvent.setup();
+            render(<DateRangePicker syncWithUrl />);
+
+            await user.click(screen.getByRole('button', {name: /select date range/i}));
+            await screen.findByRole('dialog');
+            await user.type(screen.getByRole('textbox', {name: /start/i}), '2022-01-02');
+            await user.type(screen.getByRole('textbox', {name: /end/i}), '2022-01-08');
+            await user.click(screen.getByRole('button', {name: /apply/i}));
+
+            expect(window.location.search).toBe('?from=2022-01-02T00%3A00%3A00.000Z&to=2022-01-08T23%3A59%3A59.999Z');
+        });
+
+        it('initially selects the specified date range from the url', () => {
+            window.history.replaceState(null, '', '?from=2022-01-02T00%3A00%3A00.000Z&to=2022-01-08T23%3A59%3A59.999Z');
+
+            render(<DateRangePicker syncWithUrl />);
+
+            expect(screen.getByRole('button', {name: /jan 2, 2022 - jan 8, 2022/i})).toBeVisible();
+        });
+    });
+
+    it('controls popover opened state with opened prop', async () => {
+        const {rerender} = render(<DateRangePicker opened={false} />);
+
+        expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+
+        rerender(<DateRangePicker opened={true} />);
+        await waitFor(() => expect(screen.getByRole('dialog')).toBeVisible());
+    });
+
+    it('calls onOpenedChange when popover state changes', async () => {
+        const user = userEvent.setup();
+        const onOpenedChange = vi.fn();
+        render(<DateRangePicker onOpenedChange={onOpenedChange} />);
+
+        await user.click(screen.getByRole('button', {name: /select date range/i}));
+
+        expect(onOpenedChange).toHaveBeenCalledWith(true);
+        await screen.findByRole('dialog');
+        await user.click(screen.getByRole('button', {name: 'Cancel'}));
+
+        expect(onOpenedChange).toHaveBeenCalledWith(false);
+    });
+});