@indico-data/design-system 2.41.0 → 2.41.1

package/src/components/forms/date/inputDatePicker/__tests__/SingleInputDatePicker.test.tsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { SingleInputDatePicker } from '../SingleInputDatePicker';
+import { format, addDays } from 'date-fns';
+
+const mockOnSelect = jest.fn();
+
+describe('SingleInputDatePicker', () => {
+  const RealDate = Date;
+
+  beforeAll(() => {
+    global.Date = class extends RealDate {
+      constructor() {
+        super('2024-01-01T00:00:00Z');
+      }
+    } as any;
+    Object.assign(global.Date, RealDate);
+  });
+
+  afterAll(() => {
+    global.Date = RealDate;
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('opens the date picker and selects a date', async () => {
+    render(
+      <SingleInputDatePicker
+        ariaLabel="Single Input Date Picker"
+        data-testid="datepicker-testid"
+        captionLayout="label"
+        onSelect={mockOnSelect}
+      />,
+    );
+
+    const formInput = await screen.findByTestId('form-input-Date Picker');
+    expect(formInput).toBeInTheDocument();
+
+    await userEvent.click(formInput);
+
+    const datepicker = await screen.findByTestId('datepicker-testid');
+    expect(datepicker).toBeVisible();
+
+    const dayButtons = await within(datepicker).findAllByRole('button', { name: /\d+/ });
+    expect(dayButtons.length).toBeGreaterThan(0);
+
+    const lastDayButton = dayButtons[dayButtons.length - 1];
+    await userEvent.click(lastDayButton);
+
+    const expectedDate = new Date('2024-01-01T00:00:00Z');
+    const alternateDate = addDays(expectedDate, -1);
+
+    await waitFor(
+      () => {
+        const inputValue = (formInput as HTMLInputElement).value;
+        const formattedExpectedDate = format(expectedDate, 'MM/dd/yyyy');
+        const formattedAlternateDate = format(alternateDate, 'MM/dd/yyyy');
+
+        expect(inputValue === formattedExpectedDate || inputValue === formattedAlternateDate).toBe(
+          true,
+        );
+      },
+      { timeout: 2000 },
+    );
+  });
+
+  it('updates the selected value in the dropdown to match user input', async () => {
+    render(
+      <SingleInputDatePicker
+        ariaLabel="Single Input Date Picker"
+        captionLayout="label"
+        data-testid="datepicker-testid"
+        onSelect={mockOnSelect}
+      />,
+    );
+
+    const formInput = await screen.findByTestId('form-input-Date Picker');
+    expect(formInput).toBeInTheDocument();
+
+    await userEvent.click(formInput);
+    await userEvent.clear(formInput);
+    await userEvent.type(formInput, '12/31/2023');
+
+    await waitFor(() => {
+      expect(formInput).toHaveValue('12/31/2023');
+    });
+
+    await userEvent.click(formInput);
+
+    const datepicker = await screen.findByTestId('datepicker-testid');
+    expect(datepicker).toBeVisible();
+
+    const dayButtons = await within(datepicker).findAllByRole('button', { name: /\d+/ });
+    expect(dayButtons.length).toBeGreaterThan(0);
+
+    const lastDayButton = dayButtons[dayButtons.length - 1];
+    await userEvent.click(lastDayButton);
+
+    const expectedDate = new Date('2024-01-01T00:00:00Z');
+    const alternateDate = addDays(expectedDate, -1);
+
+    await waitFor(
+      () => {
+        const inputValue = (formInput as HTMLInputElement).value;
+        const formattedExpectedDate = format(expectedDate, 'MM/dd/yyyy');
+        const formattedAlternateDate = format(alternateDate, 'MM/dd/yyyy');
+        // date hack to make sure pipeline timezone does not break test.
+        expect(inputValue === formattedExpectedDate || inputValue === formattedAlternateDate).toBe(
+          true,
+        );
+      },
+      { timeout: 2000 },
+    );
+  });
+});

package/src/components/forms/date/inputDatePicker/helpers.ts

@@ -0,0 +1,3 @@
+import { format } from 'date-fns';
+
+export const formatDateAsString = (date: Date) => format(date, 'MM/dd/yyyy');

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.mdx

@@ -7,12 +7,18 @@ import { Row, Col } from '../../../grid/index';
 # Input Date Range Picker
 The Input Date Range Picker is a visual representation of an input field that allows you to enter a date value to the input or select a date from the date picker. It leverages our DatePicker component inside of a FloatingUI window.
 
-<Canvas of={InputDateRangePicker.SingleInput}  />
+<Canvas of={InputDateRangePicker.RangeInput}  />
 
 ## Props
 In addition to the props listed below, it also accepts all props listed [here](story=?path=/docs/forms-datepicker--datepicker)
-<Controls of={InputDateRangePicker.SingleInput} />
+<Controls of={InputDateRangePicker.RangeInput} />
 
+# Notes
+It is expected to show the same date in both input fields if only one date has been selected. This represents a start and end date on the same date. A usecase for this behavior would be a separate time on that same date. Expect the `to` input to update once a range has been selected (or the `from` input has been updated) to reflect the selected range.
 
 ## ToDo
-- Create single component for all dropdown date pickers that accept an react element as the trigger, such as an icon, button, component, input, etc.
+- Clear on closed property
+- Clear all selections (we need to think this one through, my initial thought is this clear would be handled by the parent component, not the date picker itself.)
+- Better error handling and react-hook-form support
+- Decide whether we want one icon prop or two.
+- Decide if we want individual labels for each input or a single label for the range.

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.stories.tsx

@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { InputDateRangePicker } from './InputDateRangePicker';
 import { useArgs } from '@storybook/preview-api';
+import { DateRange } from 'react-day-picker';
+import { useEffect, useState } from 'react';
 
 const meta: Meta<typeof InputDateRangePicker> = {
   component: InputDateRangePicker,
@@ -23,19 +25,21 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
-    className: {
-      control: false,
-      description: 'Accepts a CSS class name',
+    captionLayout: {
+      control: 'select',
+      options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
+      description:
+        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
-          summary: 'string',
+          summary: 'dropdown | dropdown-months | dropdown-years | label',
         },
       },
     },
-    id: {
-      control: 'text',
-      description: 'The id of the input field.',
+    className: {
+      control: false,
+      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -43,9 +47,10 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
-    label: {
+    id: {
       control: 'text',
-      description: 'The label for the input field.',
+      description:
+        'The id of the input fieldss. Each one has the id appended to it, For example an id of `holiday` would be `holiday-to` and `holiday-from`',
       table: {
         category: 'Props',
         type: {
@@ -64,28 +69,18 @@ const meta: Meta<typeof InputDateRangePicker> = {
       },
     },
     selected: {
-      control: 'date',
-      description: 'The selected date.',
+      control: false,
+      description: 'The selected date range.',
       table: {
         category: 'Props',
         type: {
-          summary: 'Date',
+          summary: 'DateRange',
         },
       },
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input field.',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    inputIconName: {
-      control: 'text',
-      description: 'The icon to display in the input field.',
+      description: 'The placeholder text for the input fields.',
       table: {
         category: 'Props',
         type: {
@@ -93,9 +88,10 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
-    isClearable: {
-      control: 'boolean',
-      description: 'Whether the input field should be clearable.',
+    isOpen: {
+      control: false,
+      description:
+        'Whether the floatingUI component wrapped around the date picker is opened or closed.',
       table: {
         category: 'Props',
         type: {
@@ -103,29 +99,29 @@ const meta: Meta<typeof InputDateRangePicker> = {
         },
       },
     },
-    isOpen: {
-      control: false,
-      description: 'Whether the date picker is open.',
+    inputIconName: {
+      control: 'text',
+      description: 'The icon to display in the input fields.',
       table: {
         category: 'Props',
         type: {
-          summary: 'boolean',
+          summary: 'string',
         },
       },
     },
-    clearOnClose: {
-      control: 'boolean',
-      description: 'Whether the input field should be cleared when the date picker is closed.',
+    toErrorMessage: {
+      control: 'text',
+      description: 'An error message to display on the `to` input.',
       table: {
         category: 'Props',
         type: {
-          summary: 'boolean',
+          summary: 'string',
         },
       },
     },
-    errorMessage: {
+    fromErrorMessage: {
       control: 'text',
-      description: 'An error message to display.',
+      description: 'An error message to display on the `from` input.',
       table: {
         category: 'Props',
         type: {
@@ -155,7 +151,7 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
+      description: 'Disable the date picker and input fields.',
       table: {
         category: 'Props',
         type: {
@@ -165,7 +161,7 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     month: {
       control: 'date',
-      description: 'The month to display.',
+      description: 'The currently displayed month.',
       table: {
         category: 'Props',
         type: {
@@ -185,21 +181,22 @@ export default meta;
 
 type Story = StoryObj<typeof InputDateRangePicker>;
 
-export const SingleInput: Story = {
+export const RangeInput: Story = {
   args: {
     id: 'date-picker',
-    label: 'Pick a date:',
     inputPlaceholder: 'MM/DD/YYYY',
     inputIconName: 'calendar',
-    isClearable: true,
     isDisabled: false,
-    clearOnClose: false,
-    errorMessage: '',
+    toErrorMessage: '',
+    fromErrorMessage: '',
     ariaLabel: 'Date Picker',
+    isOpen: false,
+    selected: { from: new Date(), to: new Date(new Date().getTime() + 5 * 24 * 60 * 60 * 1000) },
   },
   render: (args) => {
     const [{ selected }, updateArgs] = useArgs();
-    const handleSelect = (date: Date | undefined) => {
+
+    const handleSelect = (date: DateRange | undefined) => {
       updateArgs({ selected: date });
     };
 

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -1,28 +1,29 @@
 import { useId, useState, useEffect } from 'react';
-import { format, isValid, parse } from 'date-fns';
+import { isValid, parse } from 'date-fns';
 import { DatePicker } from '../datePicker/DatePicker';
 import { Input } from '../../input';
 import { IconName } from '@/types';
 import { DateRange } from 'react-day-picker';
 import { FloatUI } from '../../../floatUI';
+import { Col, Row } from '../../../grid';
+import { formatDateAsString } from '../inputDatePicker/helpers';
 
 interface InputDateRangePickerProps {
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
+  captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   isDisabled?: boolean;
   id?: string;
-  label?: string;
-  onSelect?: (selected: Date | undefined) => void;
+  onSelect: (selected: DateRange | undefined) => void;
   month?: Date;
-  selected?: Date | DateRange | Date[] | undefined;
+  selected?: DateRange | undefined;
   isOpen?: boolean;
-  clearOnClose?: boolean;
   className?: string;
   inputIconName?: IconName;
-  isClearable?: boolean;
   inputPlaceholder?: string;
-  errorMessage?: string | undefined;
+  toErrorMessage?: string | undefined;
+  fromErrorMessage?: string | undefined;
   'data-testid'?: string;
 }
 
@@ -33,82 +34,115 @@ export function InputDateRangePicker(props: InputDateRangePickerProps) {
     isDisabled,
     disableBeforeDate,
     disableAfterDate,
+    captionLayout,
     month,
     id,
-    label,
     onSelect,
     selected,
     isOpen,
     inputPlaceholder,
-    clearOnClose,
     inputIconName,
-    isClearable,
-    errorMessage,
+    toErrorMessage,
+    fromErrorMessage,
     ...rest
   } = props;
 
   const inputId = useId();
 
-  // Hold the month in state to control the calendar when the input changes
-  const [localMonth, setLocalMonth] = useState(new Date());
-
-  // Hold the selected date in state
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(undefined);
+  // Hold the input values in state
+  const [localTextValueFrom, setLocalTextValueFrom] = useState<string>(
+    selected?.from ? formatDateAsString(selected.from) : '',
+  );
+  const [localTextValueTo, setLocalTextValueTo] = useState<string>(
+    selected?.to ? formatDateAsString(selected.to) : '',
+  );
 
-  // Hold the input value in state
-  const [inputValue, setInputValue] = useState('');
+  const [localMonth, setLocalMonth] = useState<Date>(selected?.from || new Date());
 
-  const handleDayPickerSelect = (date: Date | undefined) => {
+  // When the day picker is selected, update the text values.
+  const handleDayPickerSelect = (date: DateRange | undefined) => {
     if (!date) {
-      setInputValue('');
-      setSelectedDate(undefined);
+      setLocalTextValueFrom('');
+      setLocalTextValueTo('');
+      onSelect(undefined);
     } else {
-      setSelectedDate(date);
-      setLocalMonth(date);
-      setInputValue(format(date, 'MM/dd/yyyy'));
+      setLocalTextValueFrom(date.from ? formatDateAsString(date.from) : '');
+      setLocalTextValueTo(date.to ? formatDateAsString(date.to) : '');
+      onSelect(date);
     }
   };
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value); // keep the input value in sync
+  // When the text input is changed, update the selected date.
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, type: 'from' | 'to') => {
+    const value = e.target.value;
+    if (type === 'from') {
+      setLocalTextValueFrom(value);
+    } else {
+      setLocalTextValueTo(value);
+    }
 
-    const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
+    const parsedDate = parse(value, 'MM/dd/yyyy', new Date());
 
     if (isValid(parsedDate)) {
-      setSelectedDate(parsedDate);
-      setLocalMonth(parsedDate);
+      onSelect({
+        from: type === 'from' ? parsedDate : selected?.from,
+        to: type === 'to' ? parsedDate : selected?.to,
+      });
     } else {
-      setSelectedDate(undefined);
+      onSelect({
+        from: type === 'from' ? undefined : selected?.from,
+        to: type === 'to' ? undefined : selected?.to,
+      });
     }
   };
 
   // clear selection if clear on close is true
   useEffect(() => {
-    if (!isOpen && clearOnClose) {
-      setSelectedDate(undefined);
-      setInputValue('');
+    if (!isOpen) {
+      onSelect(undefined);
+      setLocalTextValueFrom('');
+      setLocalTextValueTo('');
     }
-  }, [isOpen, clearOnClose]);
+  }, [isOpen]);
 
   return (
     <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
-      <Input
-        id={inputId}
-        value={inputValue}
-        placeholder={inputPlaceholder}
-        isDisabled={isDisabled}
-        iconName={inputIconName}
-        isClearable={isClearable}
-        onChange={handleInputChange}
-        errorMessage={errorMessage}
-        label={'Single Date Picker'}
-        name={'Date Picker'}
-      />
+      <Row>
+        <Col>
+          <Input
+            id={`${inputId}-from`}
+            value={localTextValueFrom}
+            placeholder={inputPlaceholder}
+            isDisabled={isDisabled}
+            iconName={inputIconName}
+            onChange={(e) => handleInputChange(e, 'from')}
+            errorMessage={fromErrorMessage}
+            label={'From Date'}
+            name={'From Date'}
+            data-testid="date-picker-from"
+          />
+        </Col>
+        <Col>
+          <Input
+            id={`${inputId}-to`}
+            value={localTextValueTo}
+            placeholder={inputPlaceholder}
+            isDisabled={isDisabled}
+            iconName={inputIconName}
+            onChange={(e) => handleInputChange(e, 'to')}
+            errorMessage={toErrorMessage}
+            label={'To Date'}
+            name={'To Date'}
+            data-testid="date-picker-to"
+          />
+        </Col>
+      </Row>
       <DatePicker
+        captionLayout={captionLayout}
         month={localMonth}
-        onMonthChange={setLocalMonth}
-        mode="single"
-        selected={selectedDate}
+        onMonthChange={(date) => setLocalMonth(date)}
+        mode="range"
+        selected={selected}
         onSelect={handleDayPickerSelect}
         {...rest}
       />

package/src/components/forms/date/inputDateRangePicker/__tests__/InputDateRangePicker.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { render, screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { InputDateRangePicker } from '../InputDateRangePicker';
+import { format } from 'date-fns';
+
+const mockOnSelect = jest.fn();
+
+describe('InputDateRangePicker', () => {
+  const RealDate = Date;
+
+  beforeAll(() => {
+    global.Date = class extends RealDate {
+      constructor() {
+        super('2024-01-01T00:00:00Z');
+      }
+    } as any;
+    Object.assign(global.Date, RealDate);
+  });
+
+  afterAll(() => {
+    global.Date = RealDate;
+  });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('opens the date picker and selects a date', async () => {
+    render(
+      <InputDateRangePicker
+        ariaLabel="Input Date Range Picker"
+        data-testid="datepicker-testid"
+        captionLayout="label"
+        onSelect={mockOnSelect}
+      />,
+    );
+
+    const formInput = await screen.findByTestId('date-picker-from');
+    expect(formInput).toBeInTheDocument();
+
+    await userEvent.click(formInput);
+
+    const datepicker = await screen.findByTestId('datepicker-testid');
+    expect(datepicker).toBeVisible();
+
+    const dayButtons = await within(datepicker).findAllByRole('button');
+    expect(dayButtons.length).toBeGreaterThan(0);
+
+    const lastDayButton = dayButtons[dayButtons.length - 1];
+    await userEvent.click(lastDayButton);
+
+    const initialDate = format(new Date('2024-01-01T00:00:00Z'), 'MM/dd/yyyy');
+    await waitFor(() => {
+      expect(formInput).toHaveValue(initialDate);
+    });
+  });
+
+  it('updates the selected value in the dropdown to match user input', async () => {
+    render(
+      <InputDateRangePicker
+        ariaLabel="Input Date Range Picker"
+        captionLayout="label"
+        data-testid="datepicker-testid"
+        onSelect={mockOnSelect}
+      />,
+    );
+
+    const formInput = await screen.findByTestId('date-picker-from');
+    expect(formInput).toBeInTheDocument();
+
+    await userEvent.click(formInput);
+    await userEvent.clear(formInput);
+    await userEvent.type(formInput, '12/31/2023');
+
+    await waitFor(() => {
+      expect(formInput).toHaveValue('12/31/2023');
+    });
+
+    await userEvent.click(formInput); // Ensure the date picker is open
+
+    const datepicker = await screen.findByTestId('datepicker-testid');
+    expect(datepicker).toBeVisible();
+
+    const dayButtons = await within(datepicker).findAllByRole('button');
+    expect(dayButtons.length).toBeGreaterThan(0);
+
+    const lastDayButton = dayButtons[dayButtons.length - 1];
+    await userEvent.click(lastDayButton);
+
+    const initialDate = format(new Date('2024-01-01T00:00:00Z'), 'MM/dd/yyyy');
+    await waitFor(() => {
+      expect(formInput).toHaveValue(initialDate);
+    });
+  });
+});

package/src/components/index.ts

@@ -17,3 +17,4 @@ export { Menu } from './menu';
 export { DatePicker } from './forms/date/datePicker/DatePicker';
 export { IconTriggerDatePicker } from './forms/date/iconTriggerDatePicker';
 export { SingleInputDatePicker } from './forms/date/inputDatePicker';
+export { InputDateRangePicker } from './forms/date/inputDateRangePicker';