@indico-data/design-system 2.41.0 → 2.41.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.41.0",
+  "version": "2.41.1",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/{FloatUI.test.tsx → __tests__/FloatUI.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, fireEvent } from '@testing-library/react';
-import { FloatUI } from './FloatUI';
-import { Menu } from '../menu';
-import { Button } from '../button';
+import { FloatUI } from '../FloatUI';
+import { Menu } from '../../menu';
+import { Button } from '../../button';
 
 describe('FloatUI Component', () => {
   it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {

package/src/components/forms/date/datePicker/DatePicker.tsx

@@ -3,7 +3,7 @@ import { DateRange, DayPicker, Mode, OnSelectHandler } from 'react-day-picker';
 import { DatePickerProps } from './types';
 import { getCommonProps } from './contants';
 
-export const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>((props) => {
+export const DatePicker = (props: DatePickerProps) => {
   const {
     mode = 'single',
     className,
@@ -65,4 +65,4 @@ export const DatePicker = React.forwardRef<HTMLInputElement, DatePickerProps>((p
   const modeProps = modeMap[mode];
 
   return <DayPicker {...modeProps} {...commonProps} {...rest} />;
-});
+};

package/src/components/forms/date/datePicker/__tests__/DatePicker.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from '@testing-library/react';
+import { DatePicker } from '../DatePicker';
+
+describe('DatePicker', () => {
+  describe('Single Date Picker', () => {
+    it('Renders the default mode for date picker (single)', () => {
+      render(<DatePicker data-testid="date-picker" />);
+      expect(screen.getByTestId('date-picker')).toHaveAttribute('data-mode', 'single');
+    });
+
+    it('renders the date picker with a default of 2 months if no months are provided', () => {
+      render(<DatePicker data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(1);
+    });
+
+    it('renders the date picker with a custom number of months', () => {
+      render(<DatePicker numberOfMonths={3} data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
+    });
+  });
+
+  describe('Range Date Picker', () => {
+    it('Renders the range mode for date picker', () => {
+      render(<DatePicker mode="range" data-testid="date-picker" />);
+      expect(screen.getByTestId('date-picker')).toHaveAttribute('data-mode', 'range');
+    });
+
+    it('renders the date range picker with a default of 2 months if no months are provided', () => {
+      render(<DatePicker mode="range" data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(2);
+    });
+
+    it('renders the date range picker with a custom number of months', () => {
+      render(<DatePicker mode="range" numberOfMonths={3} data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
+    });
+  });
+
+  describe('Multiple Date Picker', () => {
+    it('Renders the multiple mode for date picker', () => {
+      render(<DatePicker mode="multiple" data-testid="date-picker" />);
+      expect(screen.getByTestId('date-picker')).toHaveAttribute('data-mode', 'multiple');
+    });
+
+    it('renders the date picker with a default of 2 months if no months are provided', () => {
+      render(<DatePicker mode="multiple" data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(1);
+    });
+
+    it('renders the date picker with a custom number of months', () => {
+      render(<DatePicker mode="multiple" numberOfMonths={3} data-testid="date-picker" />);
+      expect(document.getElementsByClassName('rdp-month')).toHaveLength(3);
+    });
+  });
+});

package/src/components/forms/date/datePicker/contants.ts

@@ -4,7 +4,7 @@ export const getCommonProps = (props: CommonProps) => ({
   className: props.className,
   id: props.id,
   month: props.month,
-  captionLayout: props.captionLayout,
+  captionLayout: props.captionLayout ?? 'dropdown',
   defaultMonth: props.defaultMonth,
   startMonth: props.startMonth,
   endMonth: props.endMonth,

package/src/components/forms/date/datePicker/index.ts

@@ -0,0 +1 @@
+export { DatePicker } from './DatePicker';

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.mdx

@@ -5,7 +5,7 @@ import { Row, Col } from '../../../grid/index';
 <Meta title="Forms/DatePicker/IconTriggerDatePicker" name="IconTriggerDatePicker" />
 
 # IconTriggerDatePicker
-The No Input Date Picker is to be used when we need to open the datepicker with a simple icon and dont care about the user typing in a value. It leverages our DatePicker component inside of a popper window. 
+The Icon Trigger Date Picker is to be used when we need to open the datepicker with a simple icon and dont care about the user typing in a value. It leverages our DatePicker component inside of a popper window. 
 <Canvas of={IconTriggerDatePicker.Default}  />
 
 ## Props

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -54,16 +54,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
         },
       },
     },
-    month: {
-      control: 'date',
-      description: 'The month to display.',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'Date',
-        },
-      },
-    },
     triggerIcon: {
       control: 'text',
       description: 'The icon to use as a trigger.',

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -12,14 +12,14 @@ interface Props {
   isDisabled?: boolean;
   id: string;
   label?: string;
-  onSelect?: (selected: Date | DateRange | Date[] | undefined) => void;
-  month?: Date;
-  selected?: Date | DateRange | Date[] | undefined;
+  onSelect?: (selected: Date | DateRange | undefined) => void;
+  selected?: Date | DateRange | undefined;
   triggerIcon: IconName;
   triggerIconSize: IconSizes;
   isOpen?: boolean;
   clearOnClose?: boolean;
   className?: string;
+  initialMonth?: Date;
   'data-testid'?: string;
 }
 
@@ -30,7 +30,6 @@ export const IconTriggerDatePicker = (props: Props) => {
     isDisabled,
     disableBeforeDate,
     disableAfterDate,
-    month,
     id,
     label,
     onSelect,
@@ -40,27 +39,24 @@ export const IconTriggerDatePicker = (props: Props) => {
     mode,
     isOpen,
     clearOnClose,
+    initialMonth,
     ...rest
   } = props;
 
-  const [localSelected, setLocalSelected] = useState<Date | DateRange | Date[] | undefined>(
-    selected || undefined,
-  );
+  const [localMonth, setLocalMonth] = useState<Date>(initialMonth ?? new Date());
 
   const handleSelect: OnSelectHandler<Date> = (date) => {
     if (!date) {
       onSelect && onSelect(undefined);
-      setLocalSelected(undefined);
     } else {
       onSelect && onSelect(date);
-      setLocalSelected(date);
     }
   };
 
   // clear selection if clear on close is true
   useEffect(() => {
     if (!isOpen && clearOnClose) {
-      setLocalSelected(undefined);
+      onSelect && onSelect(undefined);
     }
   }, [isOpen, clearOnClose]);
 
@@ -77,11 +73,12 @@ export const IconTriggerDatePicker = (props: Props) => {
       <DatePicker
         isDisabled={isDisabled}
         mode={mode}
-        month={month}
-        selected={localSelected as Date | DateRange | undefined}
+        selected={selected}
         onSelect={handleSelect}
+        month={localMonth}
         startMonth={disableBeforeDate}
         endMonth={disableAfterDate}
+        onMonthChange={setLocalMonth}
         {...rest}
       />
     </FloatUI>

package/src/components/forms/date/iconTriggerDatePicker/__tests__/IconTriggerDatePicker.test.tsx

@@ -1,127 +1,47 @@
-it.todo('reenable these');
-// import React from 'react';
-// import { render, screen } from '@testing-library/react';
-// import { NoInputDatePicker } from '../NoInputDatePicker';
-// import { DateRange } from 'react-day-picker';
-// import userEvent from '@testing-library/user-event';
-
-// const today = new Date();
-// const mockOnChange = jest.fn();
-// let trigger: any;
-
-// describe('NoInputDatePicker', () => {
-//   describe('single', () => {
-//     beforeEach(() => {
-//       render(
-//         <NoInputDatePicker
-//           id={'date-picker'}
-//           label={'Pick a date'}
-//           value={today}
-//           isRangePicker={false}
-//           triggerIcon="calendar"
-//           triggerIconSize={[20]}
-//           onChange={(date: Date | DateRange | undefined) => {
-//             mockOnChange(date);
-//           }}
-//         />,
-//       );
-
-//       trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
-//     });
-
-//     it('shows single date picker', async () => {
-//       await userEvent.click(trigger);
-//       expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
-//       expect(screen.getByTestId('single-datepicker')).toBeVisible();
-//     });
-
-//     it('opens the date picker when clicking on the trigger', async () => {
-//       await userEvent.click(trigger);
-//       const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-//       expect(datePickerDialogContainer).toBeVisible();
-//     });
-
-//     it('emits the right date picked for single', async () => {
-//       await userEvent.click(trigger);
-//       const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-//       expect(datePickerDialogContainer).toBeVisible();
-
-//       const day28 = screen.getByText('28');
-//       await userEvent.click(day28);
-//       expect(mockOnChange).toHaveBeenCalledWith(
-//         new Date(today.getFullYear(), today.getMonth(), 28),
-//       );
-//     });
-
-//     it('closes date picker on single selection', async () => {
-//       await userEvent.click(trigger);
-//       const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-//       expect(datePickerDialogContainer).toBeVisible();
-
-//       const day28 = screen.getByText('28');
-//       await userEvent.click(day28);
-//       expect(mockOnChange).toHaveBeenCalledWith(
-//         new Date(today.getFullYear(), today.getMonth(), 28),
-//       );
-//       expect(datePickerDialogContainer).not.toBeVisible();
-//     });
-//   });
-
-//   describe('range', () => {
-//     beforeEach(() => {
-//       render(
-//         <NoInputDatePicker
-//           id={'date-picker'}
-//           label={'Pick a date'}
-//           value={today}
-//           isRangePicker={true}
-//           triggerIcon="calendar"
-//           triggerIconSize={[20]}
-//           onChange={(date: Date | DateRange | undefined) => {
-//             mockOnChange(date);
-//           }}
-//         />,
-//       );
-
-//       trigger = screen.getByTestId('datepicker-trigger-for-date-picker');
-//     });
-
-//     it('shows ranged date picker', async () => {
-//       await userEvent.click(trigger);
-//       expect(screen.getByTestId('datepicker-dialog')).toBeVisible();
-//       expect(screen.getByTestId('range-datepicker')).toBeVisible();
-//     });
-
-//     it('emits the right date picked for range', async () => {
-//       await userEvent.click(trigger);
-//       const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-//       expect(datePickerDialogContainer).toBeVisible();
-
-//       const day27 = screen.getByText('27');
-//       await userEvent.click(day27);
-//       const day28 = screen.getByText('28');
-//       await userEvent.click(day28);
-
-//       expect(mockOnChange).toHaveBeenCalledWith({
-//         from: new Date(today.getFullYear(), today.getMonth(), 27),
-//         to: new Date(today.getFullYear(), today.getMonth(), 28),
-//       });
-//     });
-//     it('closes date picker on both ranged selection', async () => {
-//       await userEvent.click(trigger);
-//       const datePickerDialogContainer = screen.getByTestId('datepicker-dialog');
-//       expect(datePickerDialogContainer).toBeVisible();
-
-//       const day27 = screen.getByText('27');
-//       await userEvent.click(day27);
-//       const day28 = screen.getByText('28');
-//       await userEvent.click(day28);
-
-//       expect(mockOnChange).toHaveBeenCalledWith({
-//         from: new Date(today.getFullYear(), today.getMonth(), 27),
-//         to: new Date(today.getFullYear(), today.getMonth(), 28),
-//       });
-//       expect(datePickerDialogContainer).not.toBeVisible();
-//     });
-//   });
-// });
+import { render, screen } from '@testing-library/react';
+import { IconTriggerDatePicker } from '../IconTriggerDatePicker';
+import userEvent from '@testing-library/user-event';
+
+describe('DatePicker', () => {
+  it('The date picker opens when the icon is clicked', async () => {
+    render(
+      <IconTriggerDatePicker
+        ariaLabel={''}
+        id={'date-picker'}
+        triggerIcon={'checkbox'}
+        triggerIconSize={'xs'}
+        data-testid={'date-picker-testid'}
+      />,
+    );
+
+    const icon = screen.getByTestId('datepicker-trigger-for-date-picker');
+    expect(icon).toBeInTheDocument();
+    await userEvent.click(icon);
+    expect(screen.getByTestId('date-picker-testid')).toBeInTheDocument();
+  });
+
+  it('handles onSelect with the correct value', async () => {
+    const onSelect = jest.fn();
+    render(
+      <IconTriggerDatePicker
+        ariaLabel={''}
+        id={'date-picker'}
+        triggerIcon={'checkbox'}
+        triggerIconSize={'xs'}
+        data-testid={'date-picker-testid'}
+        onSelect={onSelect}
+      />,
+    );
+
+    const icon = screen.getByTestId('datepicker-trigger-for-date-picker');
+    expect(icon).toBeInTheDocument();
+    await userEvent.click(icon);
+    expect(screen.getByTestId('date-picker-testid')).toBeInTheDocument();
+    expect(onSelect).toHaveBeenCalledTimes(0);
+    const day = screen.getAllByRole('button', { name: /day/i })[0];
+    expect(day).toBeInTheDocument();
+    await userEvent.click(day);
+    // no need to be more specific as it will cause issues with pipelines having different time zones. This was verified manually at the time of writing
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import { SingleInputDatePicker } from './SingleInputDatePicker';
+import { SingleInputDatePicker, SingleInputDatePickerProps } from './SingleInputDatePicker';
 import { useArgs } from '@storybook/preview-api';
 
 const meta: Meta<typeof SingleInputDatePicker> = {
@@ -23,6 +23,18 @@ const meta: Meta<typeof SingleInputDatePicker> = {
         },
       },
     },
+    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: 'dropdown | dropdown-months | dropdown-years | label',
+        },
+      },
+    },
     className: {
       control: false,
       description: 'Accepts a CSS class name',
@@ -163,7 +175,7 @@ const meta: Meta<typeof SingleInputDatePicker> = {
         },
       },
     },
-    month: {
+    initialMonth: {
       control: 'date',
       description: 'The month to display.',
       table: {
@@ -196,9 +208,11 @@ export const SingleInput: Story = {
     clearOnClose: false,
     errorMessage: '',
     ariaLabel: 'Date Picker',
+    selected: new Date(),
   },
   render: (args) => {
-    const [{ selected }, updateArgs] = useArgs();
+    const [{ selected }, updateArgs] = useArgs<SingleInputDatePickerProps>();
+
     const handleSelect = (date: Date | undefined) => {
       updateArgs({ selected: date });
     };

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

@@ -1,21 +1,22 @@
 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 { formatDateAsString } from './helpers';
 
-interface SingleInputDatePickerProps {
+export interface SingleInputDatePickerProps {
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
   isDisabled?: boolean;
+  captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
   label?: string;
-  onSelect?: (selected: Date | undefined) => void;
-  month?: Date;
-  selected?: Date | DateRange | Date[] | undefined;
+  onSelect: (selected: Date | undefined) => void;
+  initialMonth?: Date;
+  selected?: Date;
   isOpen?: boolean;
   clearOnClose?: boolean;
   className?: string;
@@ -33,10 +34,10 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     isDisabled,
     disableBeforeDate,
     disableAfterDate,
-    month,
+    captionLayout,
+    initialMonth,
     id,
     label,
-    onSelect,
     selected,
     isOpen,
     inputPlaceholder,
@@ -44,49 +45,48 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     inputIconName,
     isClearable,
     errorMessage,
+    onSelect,
     ...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);
+  // The text value is assumed to be unneeded by the consumer.
+  const [localTextValue, setLocalTextValue] = useState<string>(
+    selected ? formatDateAsString(selected) : '',
+  );
 
-  // Hold the input value in state
-  const [inputValue, setInputValue] = useState('');
+  const [localMonth, setLocalMonth] = useState<Date>(initialMonth ?? selected ?? new Date());
 
+  // When the day picker is selected, update the text value.
   const handleDayPickerSelect = (date: Date | undefined) => {
     if (!date) {
-      setInputValue('');
-      setSelectedDate(undefined);
+      setLocalTextValue('');
+      onSelect(undefined);
     } else {
-      setSelectedDate(date);
-      setLocalMonth(date);
-      setInputValue(format(date, 'MM/dd/yyyy'));
+      setLocalTextValue(formatDateAsString(date));
+      onSelect(date);
     }
   };
 
+  // When the text input is changed, update the selected date.
   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value); // keep the input value in sync
+    setLocalTextValue(e.target.value); // keep the input value in sync
 
     const parsedDate = parse(e.target.value, 'MM/dd/yyyy', new Date());
 
     if (isValid(parsedDate)) {
-      setSelectedDate(parsedDate);
-      setLocalMonth(parsedDate);
+      onSelect(parsedDate);
     } else {
-      setSelectedDate(undefined);
+      onSelect(undefined);
     }
   };
 
   // clear selection if clear on close is true
   useEffect(() => {
     if (!isOpen && clearOnClose) {
-      setSelectedDate(undefined);
-      setInputValue('');
+      onSelect(undefined);
+      setLocalTextValue('');
     }
   }, [isOpen, clearOnClose]);
 
@@ -94,7 +94,7 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
     <FloatUI isOpen={isOpen} ariaLabel={ariaLabel}>
       <Input
         id={inputId}
-        value={inputValue}
+        value={localTextValue}
         placeholder={inputPlaceholder}
         isDisabled={isDisabled}
         iconName={inputIconName}
@@ -105,11 +105,12 @@ export function SingleInputDatePicker(props: SingleInputDatePickerProps) {
         name={'Date Picker'}
       />
       <DatePicker
-        month={localMonth}
-        onMonthChange={setLocalMonth}
+        captionLayout={captionLayout}
         mode="single"
-        selected={selectedDate}
+        selected={selected}
         onSelect={handleDayPickerSelect}
+        month={localMonth}
+        onMonthChange={setLocalMonth}
         {...rest}
       />
     </FloatUI>