@coveord/plasma-mantine 55.7.3 → 55.8.2

package/src/components/copyToClipboard/CopyToClipboard.tsx

@@ -1,8 +1,9 @@
-import {CheckSize16Px, CopySize16Px} from '@coveord/plasma-react-icons';
-import {ActionIcon, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
-import {FunctionComponent} from 'react';
+import {IconClipboardCheck, IconClipboardText} from '@coveord/plasma-react-icons';
+import {ActionIconProps, CopyButton, MantineColor, TextInput, Tooltip} from '@mantine/core';
+import {FunctionComponent, MouseEventHandler} from 'react';
+import {ActionIcon} from '../action-icon';
 
-export interface CopyToClipboardProps {
+export interface CopyToClipboardProps extends ActionIconProps {
     /**
      * The value to be copied to the clipboard.
      */
@@ -16,29 +17,49 @@ export interface CopyToClipboardProps {
     /**
      * Called each time the value is copied to the clipboard
      */
-    onCopy?: () => void;
+    onCopy?: MouseEventHandler<HTMLButtonElement>;
     /**
      * The color of the icon when idle
      *
      * @default 'gray'
      */
     color?: MantineColor | (string & {});
+    /**
+     * The text displayed when hovering over the button
+     *
+     * @default 'Copy to clipboard'
+     */
+    tooltipLabelCopy?: string;
+    /**
+     * The text displayed when the value is copied to the clipboard
+     *
+     * @default 'Copied'
+     */
+    tooltipLabelCopied?: string;
 }
 
-const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({value, onCopy, color}) => (
+const CopyToClipboardButton: FunctionComponent<Omit<CopyToClipboardProps, 'withLabel'>> = ({
+    value,
+    onCopy,
+    color,
+    tooltipLabelCopy = 'Copy to clipboard',
+    tooltipLabelCopied = 'Copied',
+    ...others
+}) => (
     <CopyButton value={value} timeout={2000}>
         {({copied, copy}) => (
-            <Tooltip label={copied ? 'Copied' : 'Copy'}>
-                <ActionIcon
-                    variant="subtle"
+            <Tooltip label={copied ? tooltipLabelCopied : tooltipLabelCopy}>
+                <ActionIcon.Quaternary
+                    aria-label={tooltipLabelCopy}
                     color={copied ? 'success' : color}
-                    onClick={() => {
+                    onClick={(clickEvent) => {
                         copy();
-                        onCopy?.();
+                        onCopy?.(clickEvent);
                     }}
+                    {...others}
                 >
-                    {copied ? <CheckSize16Px height={16} /> : <CopySize16Px height={16} />}
-                </ActionIcon>
+                    {copied ? <IconClipboardCheck size={16} /> : <IconClipboardText size={16} />}
+                </ActionIcon.Quaternary>
             </Tooltip>
         )}
     </CopyButton>
@@ -50,7 +71,7 @@ export const CopyToClipboard: FunctionComponent<CopyToClipboardProps> = ({withLa
             value={others.value}
             readOnly
             autoComplete="off"
-            rightSection={<CopyToClipboardButton color="action" {...others} />}
+            rightSection={<CopyToClipboardButton {...others} />}
         />
     ) : (
         <CopyToClipboardButton {...others} />

package/src/components/date-range-picker/DateRange.module.css

@@ -1,7 +1,7 @@
 .picker {
-    border-bottom: 1px solid var(--mantine-color-gray-2);
+    border-bottom: 1px solid var(--mantine-color-default-border);
 }
 
 .save {
-    border-top: 1px solid var(--mantine-color-gray-2);
+    border-top: 1px solid var(--mantine-color-default-border);
 }

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

@@ -1,5 +1,5 @@
 import {Center, Group, Space} from '@mantine/core';
-import {DatePicker, DatePickerBaseProps} from '@mantine/dates';
+import {DatePicker, DatePickerBaseProps, type DateStringValue, type DatesRangeValue} from '@mantine/dates';
 import {useForm} from '@mantine/form';
 
 import dayjs from 'dayjs';
@@ -7,20 +7,18 @@ import {Button} from '../button';
 import DateRangeClasses from './DateRange.module.css';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
-
-export type DateRangePickerValue = [Date | null, Date | null];
 export interface DateRangePickerInlineCalendarProps
     extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /**
      * Initial selected range
      */
-    initialRange: DateRangePickerValue;
+    initialRange: DatesRangeValue<DateStringValue | null>;
     /**
      * Function called when the user applies the new date range
      *
      * @param range the newly selected dates
      */
-    onApply: (range: DateRangePickerValue) => void;
+    onApply: (range: DatesRangeValue<DateStringValue | null>) => void;
     /**
      * Function called when the user click on the cancel button
      */
@@ -45,10 +43,9 @@ export interface DateRangePickerInlineCalendarProps
     >;
 }
 
-const isDateRangePickerValue = (value: unknown): value is DateRangePickerValue =>
-    Array.isArray(value) && value.length === 2;
+const isDateRangePickerValue = (value: unknown): value is DatesRangeValue => Array.isArray(value) && value.length === 2;
 
-const endOfDay = (value: Date): Date => (value ? dayjs(value).endOf('day').toDate() : value);
+const endOfDay = (value: DateStringValue): DateStringValue => (value ? dayjs(value).endOf('day').toISOString() : value);
 
 export const DateRangePickerInlineCalendar = ({
     initialRange,
@@ -66,8 +63,14 @@ export const DateRangePickerInlineCalendar = ({
     });
     const calendarInputProps = form.getInputProps('dates');
 
-    const onCalendarChange = (range: Date | Date[] | DateRangePickerValue): void => {
-        const normalized = isDateRangePickerValue(range) && range[1] ? [range[0], endOfDay(range[1])] : range;
+    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);
     };
 
@@ -79,7 +82,6 @@ export const DateRangePickerInlineCalendar = ({
         }
         onApply(form.values.dates);
     };
-
     return (
         <>
             <Group align="center" gap="xs" grow px="md" py="sm" className={DateRangeClasses.picker}>
@@ -101,7 +103,6 @@ export const DateRangePickerInlineCalendar = ({
                     </>
                 ) : null}
             </Group>
-
             <Center py="sm" px="md">
                 <DatePicker
                     numberOfColumns={2}
@@ -115,14 +116,9 @@ export const DateRangePickerInlineCalendar = ({
                     onChange={onCalendarChange}
                 />
             </Center>
-
             <Group justify="right" gap="xs" px="md" py="sm" className={DateRangeClasses.save}>
-                <Button variant="outline" size="xs" onClick={onCancel}>
-                    Cancel
-                </Button>
-                <Button size="xs" onClick={onCalendarApply}>
-                    Apply
-                </Button>
+                <Button.Tertiary onClick={onCancel}>Cancel</Button.Tertiary>
+                <Button.Primary onClick={onCalendarApply}>Apply</Button.Primary>
             </Group>
         </>
     );

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

@@ -1,19 +1,19 @@
 import {Group, Popover, Space} from '@mantine/core';
-import {CalendarBaseProps, DatePicker} from '@mantine/dates';
+import {CalendarBaseProps, DatePicker, type DateStringValue, type DatesRangeValue} from '@mantine/dates';
 import {useClickOutside, useUncontrolled} from '@mantine/hooks';
 import {useState} from 'react';
 
-import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
+import dayjs from 'dayjs';
 import {DateRangePickerPreset, DateRangePickerPresetSelect} from './DateRangePickerPresetSelect';
 import {EditableDateRangePicker, EditableDateRangePickerProps} from './EditableDateRangePicker';
 
 interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePickerProps, 'startProps' | 'endProps'> {
     /** Default value for uncontrolled input */
-    defaultValue?: DateRangePickerValue;
+    defaultValue?: DatesRangeValue<DateStringValue | null>;
     /** Value for controlled input */
-    value?: DateRangePickerValue;
+    value?: DatesRangeValue<DateStringValue | null>;
     /** onChange value for controlled input */
-    onChange?(value: DateRangePickerValue): void;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
     /**
      * The presets to display
      *
@@ -25,7 +25,6 @@ interface DateRangePickerPopoverCalendarProps extends Pick<EditableDateRangePick
      * }
      */
     presets?: Record<string, DateRangePickerPreset>;
-
     /**
      * Props for RangeCalendar
      */
@@ -47,14 +46,20 @@ export const DateRangePickerPopoverCalendar = ({
     const [opened, setOpened] = useState(false);
     const ref = useClickOutside(() => setOpened(false));
 
-    const [_value, handleChange] = useUncontrolled<DateRangePickerValue>({
+    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue> | null>({
         value,
         defaultValue,
         onChange,
         finalValue: [null, null],
     });
 
-    const onCalendarChange = (dates: DateRangePickerValue) => {
+    const onCalendarChange = (dates: DatesRangeValue<DateStringValue | null>) => {
+        if (dates[0] !== null) {
+            dates[0] = dayjs(dates[0]).toISOString();
+        }
+        if (dates[1] !== null) {
+            dates[1] = dayjs(dates[1]).toISOString();
+        }
         handleChange?.(dates);
         if (dates[1] !== null) {
             setOpened(false);

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

@@ -1,17 +1,17 @@
 import {ComboboxItem, Select, SelectProps} from '@mantine/core';
+import type {DatesRangeValue, DateStringValue} from '@mantine/dates';
 import dayjs from 'dayjs';
 import {useEffect, useState} from 'react';
-import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface DateRangePickerPreset {
     label: string;
-    range: DateRangePickerValue;
+    range: DatesRangeValue<DateStringValue>;
 }
 
 interface DateRangePickerPresetsSelectProps {
     presets: Record<string, DateRangePickerPreset>;
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue>;
+    onChange?(value: DatesRangeValue): void;
     selectProps?: Partial<Omit<SelectProps, 'data' | 'value' | 'onChange'>>;
 }
 
@@ -22,11 +22,12 @@ export const DateRangePickerPresetSelect = ({
     selectProps = {},
 }: DateRangePickerPresetsSelectProps) => {
     const selectData: ComboboxItem[] = Object.entries(presets).map(([val, {label}]) => ({value: val, label}));
-
     const getSelectedPreset = () => {
         if (value[0] !== null && value[1] !== null && dayjs(value[0]).unix() !== dayjs(value[1]).unix()) {
             const selected = Object.entries(presets).find(
-                ([, {range}]) => dayjs(range[0]).isSame(value[0]) && dayjs(value[1]).isSame(value[1]),
+                ([, {range}]) =>
+                    dayjs(range[0]).isSame(dayjs(value[0]).toISOString()) &&
+                    dayjs(range[1]).isSame(dayjs(value[1]).toISOString()),
             );
             if (selected) {
                 return selected[0];

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

@@ -1,10 +1,9 @@
-import {DateInput, DatePickerProps} from '@mantine/dates';
+import {DateInput, DatePickerProps, DateStringValue, type DatesRangeValue} from '@mantine/dates';
 import dayjs from 'dayjs';
-import {DateRangePickerValue} from './DateRangePickerInlineCalendar';
 
 export interface EditableDateRangePickerProps {
-    value: DateRangePickerValue;
-    onChange?(value: DateRangePickerValue): void;
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue> | null): void;
     onFocus?: () => void;
     /**
      * Props for the start input
@@ -23,11 +22,11 @@ export const EditableDateRangePicker = ({
     startProps = {},
     endProps = {},
 }: EditableDateRangePickerProps) => {
-    const onChangeStart = (date: Date) => {
-        onChange?.([dayjs(date).startOf('day').toDate(), value?.[1]]);
+    const onChangeStart = (date: DateStringValue | null) => {
+        onChange?.([dayjs(date).startOf('day').toISOString(), value?.[1]]);
     };
-    const onChangeEnd = (date: Date) => {
-        onChange?.([value?.[0], dayjs(date).endOf('day').toDate()]);
+    const onChangeEnd = (date: DateStringValue | null) => {
+        onChange?.([value?.[0], dayjs(date).endOf('day').toISOString()]);
     };
 
     return (

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

@@ -1,5 +1,4 @@
 import {render, screen, userEvent} from '@test-utils';
-import dayjs from 'dayjs';
 
 import {DateRangePickerInlineCalendar} from '../DateRangePickerInlineCalendar';
 
@@ -70,7 +69,7 @@ describe('DateRangePickerInlineCalendar', () => {
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([new Date(2022, 0, 8), endOfDay(2022, 0, 14)]);
+        expect(onApply).toHaveBeenCalledWith(['2022-01-08T00:00:00.000Z', '2022-01-14T23:59:59.999Z']);
 
         vi.useRealTimers();
     });
@@ -83,7 +82,7 @@ describe('DateRangePickerInlineCalendar', () => {
         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), endOfDay(2022, 0, 8)]);
+        expect(onApply).toHaveBeenCalledWith(['2022-01-08T00:00:00.000Z', '2022-01-08T23:59:59.999Z']);
 
         vi.useRealTimers();
     });
@@ -108,14 +107,7 @@ describe('DateRangePickerInlineCalendar', () => {
 
         await user.click(screen.getByRole('button', {name: 'Apply'}));
 
-        expect(onApply).toHaveBeenCalledWith([
-            dayjs(new Date(2022, 0, 8))
-                .startOf('day')
-                .toDate(),
-            dayjs(new Date(2022, 0, 14))
-                .endOf('day')
-                .toDate(),
-        ]);
+        expect(onApply).toHaveBeenCalledWith(['2022-01-08T00:00:00.000Z', '2022-01-14T23:59:59.999Z']);
         vi.useRealTimers();
     });
 });

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

@@ -1,7 +1,7 @@
 import {render, screen, userEvent} from '@test-utils';
 import {useState} from 'react';
 
-import {DateRangePickerValue} from '../DateRangePickerInlineCalendar';
+import {type DatesRangeValue, type DateStringValue} from '@mantine/dates';
 import {EditableDateRangePicker} from '../EditableDateRangePicker';
 
 describe('EditableDateRangePicker', () => {
@@ -15,7 +15,7 @@ describe('EditableDateRangePicker', () => {
     it('updates when editing values', async () => {
         const user = userEvent.setup();
         const Fixture = () => {
-            const [value, setValue] = useState<DateRangePickerValue>([null, null]);
+            const [value, setValue] = useState<DatesRangeValue<DateStringValue | null>>([null, null]);
             return (
                 <>
                     <EditableDateRangePicker value={value} onChange={setValue} />

package/src/components/date-time-range-picker/DateTimeRangePicker.tsx

@@ -0,0 +1,61 @@
+import {Group} from '@mantine/core';
+import {useUncontrolled} from '@mantine/hooks';
+
+import {DatesRangeValue, DateStringValue} from '@mantine/dates';
+import {DateRangePickerPreset, DateRangePickerPresetSelect} from '../date-range-picker/DateRangePickerPresetSelect';
+import {EditableDateTimeRangePicker, EditableDateTimeRangePickerProps} from './EditableDateTimeRangePicker';
+
+interface DateTimeRangePickerProps extends Pick<EditableDateTimeRangePickerProps, 'startProps' | 'endProps'> {
+    /** Default value for uncontrolled input */
+    defaultValue?: DatesRangeValue<DateStringValue | null>;
+    /** Value for controlled input */
+    value?: DatesRangeValue<DateStringValue | null>;
+    /** onChange value for controlled input */
+    onChange?(value: DatesRangeValue<DateStringValue | null>): void;
+    /**
+     * The presets to display
+     *
+     * @default {}
+     * @example
+     * {
+     *     january: {label: 'January', range: [new Date(2022, 0, 1, 0, 0, 0), new Date(2022, 0, 31, 23, 59, 59)]},
+     *     february: {label: 'February', range: [new Date(2022, 1, 1, 0, 0, 0), new Date(2022, 1, 28, 23, 59, 59)]}
+     * }
+     */
+    presets?: Record<string, DateRangePickerPreset>;
+}
+
+export const DateTimeRangePicker = ({
+    presets,
+    value,
+    defaultValue,
+    onChange,
+    startProps,
+    endProps,
+}: DateTimeRangePickerProps) => {
+    const [_value, handleChange] = useUncontrolled<DatesRangeValue<DateStringValue | null>>({
+        value,
+        defaultValue,
+        onChange,
+        finalValue: [null, null],
+    });
+
+    return (
+        <Group align="center">
+            <EditableDateTimeRangePicker
+                value={_value}
+                onChange={handleChange}
+                startProps={startProps}
+                endProps={endProps}
+            />
+            {presets && (
+                <DateRangePickerPresetSelect
+                    presets={presets}
+                    value={_value}
+                    onChange={handleChange}
+                    selectProps={{ml: 'sm'}}
+                />
+            )}
+        </Group>
+    );
+};

package/src/components/date-time-range-picker/EditableDateTimeRangePicker.tsx

@@ -0,0 +1,52 @@
+import {DatePickerProps, DatesRangeValue, DateStringValue, DateTimePicker} from '@mantine/dates';
+import dayjs from 'dayjs';
+
+export interface EditableDateTimeRangePickerProps {
+    value: DatesRangeValue<DateStringValue | null>;
+    onChange?(value: DatesRangeValue<DateStringValue | null>): 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 EditableDateTimeRangePicker = ({
+    value,
+    onChange,
+    startProps = {},
+    endProps = {},
+}: EditableDateTimeRangePickerProps) => {
+    const onStartDateChange = (startDate: string) => {
+        if (value?.[1] && dayjs(startDate) > dayjs(value[1])) {
+            onChange?.([startDate, null]);
+        } else {
+            onChange?.([startDate, value?.[1]]);
+        }
+    };
+
+    return (
+        <>
+            <DateTimePicker
+                clearable={false}
+                label="Start"
+                value={value?.[0]}
+                onChange={onStartDateChange}
+                w={150}
+                styles={{...startProps.styles}}
+            />
+            <DateTimePicker
+                clearable={false}
+                label="End"
+                value={value?.[1]}
+                minDate={value?.[0]}
+                onChange={(endDate) => onChange?.([value?.[0], endDate])}
+                w={150}
+                styles={{...endProps.styles}}
+            />
+        </>
+    );
+};

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

@@ -0,0 +1,45 @@
+import {useForm} from '@mantine/form';
+import {render, screen, userEvent} from '@test-utils';
+
+import {DatesRangeValue, DateStringValue} from '@mantine/dates';
+import {DateTimeRangePicker} from '../DateTimeRangePicker';
+
+describe('DateTimeRangePicker', () => {
+    it('does not render the preset textbox when there is no presets', () => {
+        render(<DateTimeRangePicker defaultValue={[null, null]} />);
+
+        expect(screen.queryByRole('textbox')).not.toBeInTheDocument();
+    });
+
+    it('updates with the selected dates when choosing a preset', async () => {
+        const user = userEvent.setup();
+        const Fixture = () => {
+            const form = useForm<{dates: DatesRangeValue<DateStringValue | null>}>({
+                initialValues: {dates: [null, null]},
+            });
+            return (
+                <>
+                    <DateTimeRangePicker
+                        presets={{
+                            year2k: {
+                                label: 'Year 2K',
+                                range: [
+                                    new Date(2000, 0, 1, 0, 0, 0).toISOString(),
+                                    new Date(2000, 11, 31, 23, 59, 59).toISOString(),
+                                ],
+                            },
+                        }}
+                        {...form.getInputProps('dates')}
+                    />
+                    <code data-testid="json">{JSON.stringify(form.values.dates)}</code>
+                </>
+            );
+        };
+        render(<Fixture />);
+
+        await user.click(screen.getByRole('textbox', {name: 'Date range'}));
+        await user.click(screen.getByRole('option', {name: 'Year 2K'}));
+
+        expect(screen.getByTestId('json')).toHaveTextContent('["2000-01-01T00:00:00.000Z","2000-12-31T23:59:59.000Z"]');
+    });
+});

package/src/components/date-time-range-picker/index.ts

@@ -0,0 +1 @@
+export * from './DateTimeRangePicker';

package/src/components/header/Header.module.css

@@ -5,31 +5,16 @@
     }
 
     & .description {
-        color: var(--mantine-color-gray-6);
-        font-weight: 300;
+        color: var(--mantine-color-dimmed);
+        font-weight: var(--coveo-fw-normal);
     }
 }
 
 .title {
     word-break: break-word;
-
-    &[data-variant='primary'] {
-        color: var(--mantine-color-gray-5);
-    }
-
-    line-height: var(--mantine-line-height-md);
 }
 
 .docAnchor {
     margin-left: var(--mantine-spacing-xs);
     vertical-align: middle;
 }
-
-.breadcrumbs {
-    font-size: var(--mantine-font-size-sm);
-    font-weight: 300;
-}
-
-.breadcrumbsSeparator {
-    color: var(--mantine-color-gray-5);
-}