@arbor-education/design-system.components 0.9.0 → 0.10.0

package/src/components/dateTimePicker/DateTimePicker.test.tsx

@@ -0,0 +1,295 @@
+import '@testing-library/jest-dom/vitest';
+import { fireEvent, render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { DateTimePicker } from './DateTimePicker';
+import { getDropdownTrigger } from 'Components/datePicker/datePickerTestUtils.test-helpers';
+
+describe('DateTimePicker', () => {
+  beforeEach(() => {
+    globalThis.ResizeObserver = class {
+      observe() {}
+      unobserve() {}
+      disconnect() {}
+    } as unknown as typeof ResizeObserver;
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  test('renders a date input and a picker toggle button', () => {
+    const { container } = render(<DateTimePicker />);
+
+    expect(container.querySelector('input[type="datetime-local"]')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open date and time picker' })).toBeInTheDocument();
+  });
+
+  test('uses a native datetime-local input with minute stepping by default', () => {
+    const { container } = render(<DateTimePicker />);
+    const input = container.querySelector('input[type="datetime-local"]');
+
+    expect(input).toHaveAttribute('step', '60');
+  });
+
+  test('shows default native empty-state hint when empty', () => {
+    const { container } = render(<DateTimePicker />);
+    const input = container.querySelector('input[type="datetime-local"]');
+    expect(input).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('YYYY-MM-DDTHH:mm')).toBeInTheDocument();
+  });
+
+  test('shows native second-granularity empty-state hint', () => {
+    const { container } = render(<DateTimePicker granularity="second" />);
+    const input = container.querySelector('input[type="datetime-local"]');
+    expect(input).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('YYYY-MM-DDTHH:mm:ss')).toBeInTheDocument();
+  });
+
+  test('allows empty-state hint to be overridden', () => {
+    const { container } = render(<DateTimePicker placeholder="Choose..." />);
+    const input = container.querySelector('input[type="datetime-local"]');
+    expect(input).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('Choose...')).toBeInTheDocument();
+  });
+
+  test('native mode with custom placeholder uses read-only date field and opens calendar on pointer down', () => {
+    const { container } = render(<DateTimePicker placeholder="Choose..." />);
+    const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+    expect(input.readOnly).toBe(true);
+    fireEvent.pointerDown(input);
+    expect(screen.getByRole('application')).toBeInTheDocument();
+  });
+
+  test('native mode with custom placeholder does not open calendar on keyboard focus alone', () => {
+    const { container } = render(<DateTimePicker placeholder="Choose..." />);
+    const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+    fireEvent.focus(input);
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+  });
+
+  describe('displayFormat branching', () => {
+    test('displayFormat="native" renders datetime-local', () => {
+      const { container } = render(<DateTimePicker displayFormat="native" />);
+      expect(container.querySelector('input[type="datetime-local"]')).toBeInTheDocument();
+    });
+
+    test('displayFormat="default" renders a text input with formatted placeholder', () => {
+      render(<DateTimePicker displayFormat="default" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('placeholder', 'DD/MM/YYYY HH:mm');
+    });
+
+    test('displayFormat="friendly" renders a text input with friendly placeholder', () => {
+      render(<DateTimePicker displayFormat="friendly" />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveAttribute('placeholder', 'Pick a date, HH:mm');
+    });
+
+    test('typing formatted text in default mode parses correctly', () => {
+      const onChange = vi.fn();
+      render(<DateTimePicker displayFormat="default" onChange={onChange} />);
+      const input = screen.getByRole('textbox');
+      fireEvent.change(input, { target: { value: '15/06/2024 14:30' } });
+
+      expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(5);
+      expect(lastDate.getDate()).toBe(15);
+      expect(lastDate.getHours()).toBe(14);
+      expect(lastDate.getMinutes()).toBe(30);
+    });
+
+    test('typing formatted text in friendly mode parses correctly', () => {
+      const onChange = vi.fn();
+      render(<DateTimePicker displayFormat="friendly" onChange={onChange} />);
+      const input = screen.getByRole('textbox');
+      fireEvent.change(input, { target: { value: 'June 15th, 2024 14:30' } });
+
+      expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+      const lastDate: Date = onChange.mock.lastCall![0];
+      expect(lastDate.getFullYear()).toBe(2024);
+      expect(lastDate.getMonth()).toBe(5);
+      expect(lastDate.getDate()).toBe(15);
+      expect(lastDate.getHours()).toBe(14);
+      expect(lastDate.getMinutes()).toBe(30);
+    });
+
+    test('controlled value displays in default format', () => {
+      render(<DateTimePicker displayFormat="default" value={new Date(2024, 5, 15, 14, 30)} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('15/06/2024 14:30');
+    });
+
+    test('controlled value displays in friendly format', () => {
+      render(<DateTimePicker displayFormat="friendly" value={new Date(2024, 5, 15, 14, 30)} />);
+      const input = screen.getByRole('textbox');
+      expect(input).toHaveValue('June 15th, 2024 14:30');
+    });
+  });
+
+  test('typing a valid combined value emits a combined date and time value', () => {
+    const onChange = vi.fn();
+    const { container } = render(<DateTimePicker onChange={onChange} />);
+    const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: '2024-06-15T14:30' } });
+
+    expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+    const lastDate: Date = onChange.mock.lastCall![0];
+    expect(lastDate.getFullYear()).toBe(2024);
+    expect(lastDate.getMonth()).toBe(5);
+    expect(lastDate.getDate()).toBe(15);
+    expect(lastDate.getHours()).toBe(14);
+    expect(lastDate.getMinutes()).toBe(30);
+  });
+
+  test('uses one-second stepping when granularity is second', () => {
+    const { container } = render(<DateTimePicker granularity="second" />);
+    const input = container.querySelector('input[type="datetime-local"]');
+
+    expect(input).toHaveAttribute('step', '1');
+  });
+
+  test('selecting a day from the calendar preserves the existing time', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(<DateTimePicker value={new Date(2024, 5, 1, 14, 30)} onChange={onChange} />);
+    onChange.mockClear();
+
+    await user.click(screen.getByRole('button', { name: 'Open date and time picker' }));
+    await user.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+
+    expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+    const lastDate: Date = onChange.mock.lastCall![0];
+    expect(lastDate.getFullYear()).toBe(2024);
+    expect(lastDate.getMonth()).toBe(5);
+    expect(lastDate.getDate()).toBe(20);
+    expect(lastDate.getHours()).toBe(14);
+    expect(lastDate.getMinutes()).toBe(30);
+  });
+
+  test('opening the picker after typing a valid combined value syncs month, year, and time controls', async () => {
+    const user = userEvent.setup();
+    const { container } = render(<DateTimePicker />);
+    const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: '2026-04-14T14:50' } });
+    await user.click(screen.getByRole('button', { name: 'Open date and time picker' }));
+
+    expect(getDropdownTrigger(/April/i)).toBeInTheDocument();
+    expect(getDropdownTrigger(/2026/i)).toBeInTheDocument();
+    expect(screen.getByLabelText('Select time', { selector: 'input' })).toHaveValue('14:50');
+  });
+
+  test('time-list mode emits a combined date when an allowed time is selected', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <DateTimePicker
+        value={new Date(2024, 5, 15, 13, 0)}
+        onChange={onChange}
+        timeOptions={['13:00', '13:30', '14:00']}
+      />,
+    );
+    onChange.mockClear();
+
+    await user.click(screen.getByRole('button', { name: 'Open date and time picker' }));
+    await user.click(screen.getByText('13:00'));
+    await user.click(screen.getByText('13:30'));
+
+    expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+    const lastDate: Date = onChange.mock.lastCall![0];
+    expect(lastDate.getFullYear()).toBe(2024);
+    expect(lastDate.getMonth()).toBe(5);
+    expect(lastDate.getDate()).toBe(15);
+    expect(lastDate.getHours()).toBe(13);
+    expect(lastDate.getMinutes()).toBe(30);
+  });
+
+  describe('defaultValue prop', () => {
+    test('renders with the defaultValue when no value is provided', () => {
+      const { container } = render(<DateTimePicker defaultValue={new Date(2024, 5, 15, 14, 30)} />);
+      expect(container.querySelector('input[type="datetime-local"]')).toHaveValue('2024-06-15T14:30');
+    });
+
+    test('value prop takes precedence over defaultValue', () => {
+      const { container } = render(
+        <DateTimePicker value={new Date(2024, 11, 25, 9, 0)} defaultValue={new Date(2024, 5, 15, 14, 30)} />,
+      );
+      expect(container.querySelector('input[type="datetime-local"]')).toHaveValue('2024-12-25T09:00');
+    });
+
+    test('does not call onChange on mount with defaultValue', () => {
+      const onChange = vi.fn();
+      render(<DateTimePicker defaultValue={new Date(2024, 5, 15, 14, 30)} onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('onChange call-count correctness', () => {
+    test('does not call onChange on mount', () => {
+      const onChange = vi.fn();
+      render(<DateTimePicker onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('does not call onChange on mount with an initial value', () => {
+      const onChange = vi.fn();
+      render(<DateTimePicker value={new Date(2024, 5, 15, 14, 30)} onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('calls onChange exactly once per user input change', () => {
+      const onChange = vi.fn();
+      const { container } = render(<DateTimePicker onChange={onChange} />);
+      const input = container.querySelector('input[type="datetime-local"]') as HTMLInputElement;
+
+      fireEvent.change(input, { target: { value: '2024-06-15T14:30' } });
+      expect(onChange).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  test('controlled value updates sync the date and time fields without firing onChange', () => {
+    const onChange = vi.fn();
+    const { rerender, container } = render(
+      <DateTimePicker value={new Date(2024, 5, 15, 14, 30)} onChange={onChange} />,
+    );
+    fireEvent.click(screen.getByRole('button', { name: 'Open date and time picker' }));
+
+    expect(container.querySelector('input[type="datetime-local"]')).toHaveValue('2024-06-15T14:30');
+    expect(screen.getByLabelText('Select time', { selector: 'input' })).toHaveValue('14:30');
+
+    onChange.mockClear();
+
+    rerender(<DateTimePicker value={new Date(2024, 11, 25, 9, 45)} onChange={onChange} />);
+
+    expect(container.querySelector('input[type="datetime-local"]')).toHaveValue('2024-12-25T09:45');
+    expect(screen.getByLabelText('Select time', { selector: 'input' })).toHaveValue('09:45');
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  test('Today preserves the current time and closes the picker', async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(<DateTimePicker value={new Date(2024, 5, 15, 14, 30)} onChange={onChange} />);
+    onChange.mockClear();
+
+    await user.click(screen.getByRole('button', { name: 'Open date and time picker' }));
+    await user.click(screen.getByRole('button', { name: 'Today' }));
+
+    expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
+    const lastDate: Date = onChange.mock.lastCall![0];
+    const now = new Date();
+    expect(lastDate.getFullYear()).toBe(now.getFullYear());
+    expect(lastDate.getMonth()).toBe(now.getMonth());
+    expect(lastDate.getDate()).toBe(now.getDate());
+    expect(lastDate.getHours()).toBe(14);
+    expect(lastDate.getMinutes()).toBe(30);
+  });
+});

package/src/components/dateTimePicker/DateTimePicker.tsx

@@ -0,0 +1,293 @@
+import classNames from 'classnames';
+import { Button } from 'Components/button/Button';
+import type { ComboboxSearchType } from 'Components/combobox/types';
+import {
+  formatDateTimeInputValue,
+  formatNativeDateTimeInputValue,
+  formatTimeInputValue,
+  getDateTimePlaceholder,
+  getNativeDateTimePlaceholder,
+  mergeDateAndTime,
+  parseDateTimeInputValue,
+  parseNativeDateTimeInputValue,
+  type DateDisplayFormat,
+  type DateTimePickerDisplayFormat,
+} from 'Components/datePicker/dateInputUtils';
+import { DatePickerCalendarHeader } from 'Components/datePicker/DatePickerCalendarHeader';
+import { TextInput } from 'Components/formField/inputs/text/TextInput';
+import { TimeInput, type TimeGranularity, type TimeValue } from 'Components/formField/inputs/time/TimeInput';
+import { Popover } from 'radix-ui';
+import { useCallback, useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
+import { DayPicker } from 'react-day-picker';
+import { PopupParentContext } from 'Utils/PopupParentContext';
+
+export type DateTimePickerProps = {
+  'className'?: string;
+  'onChange'?: (newDate?: Date) => void;
+  'id'?: string;
+  'hasError'?: boolean;
+  'aria-describedby'?: string;
+  'aria-invalid'?: boolean;
+  'value'?: Date;
+  'defaultValue'?: Date;
+  'granularity'?: TimeGranularity;
+  'displayFormat'?: DateTimePickerDisplayFormat;
+  'timeOptions'?: TimeValue[];
+  'searchType'?: ComboboxSearchType;
+  'highlightStringMatches'?: boolean;
+  'placeholder'?: string;
+};
+
+export const DateTimePicker = (props: DateTimePickerProps) => {
+  const {
+    className,
+    onChange,
+    id,
+    hasError,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+    value,
+    defaultValue,
+    displayFormat = 'native',
+    granularity = 'minute',
+    timeOptions,
+    searchType = 'prefix',
+    highlightStringMatches = false,
+    placeholder,
+  } = props;
+
+  const isNative = displayFormat === 'native';
+
+  const formatInputValue = useCallback(
+    (date: Date) =>
+      displayFormat === 'native'
+        ? formatNativeDateTimeInputValue(date, granularity)
+        : formatDateTimeInputValue(date, displayFormat as DateDisplayFormat, granularity),
+    [displayFormat, granularity],
+  );
+
+  const parseInputValue = useCallback(
+    (raw: string) =>
+      displayFormat === 'native'
+        ? parseNativeDateTimeInputValue(raw, granularity)
+        : parseDateTimeInputValue(raw, displayFormat as DateDisplayFormat, granularity),
+    [displayFormat, granularity],
+  );
+
+  const resolvedPlaceholder = placeholder ?? (
+    isNative
+      ? getNativeDateTimePlaceholder(granularity)
+      : getDateTimePlaceholder(displayFormat as DateDisplayFormat, granularity)
+  );
+
+  const initialValue = value ?? defaultValue;
+  const isControlled = value !== undefined;
+  const [month, setMonth] = useState(initialValue ?? new Date());
+  const [selectedDateTime, setSelectedDateTime] = useState<Date | undefined>(initialValue);
+  const [inputValue, setInputValue] = useState(
+    initialValue ? formatInputValue(initialValue) : '',
+  );
+  const [timeInputValue, setTimeInputValue] = useState(initialValue ? formatTimeInputValue(initialValue, granularity) : '');
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectedDateTimeRef = useRef(selectedDateTime);
+  selectedDateTimeRef.current = selectedDateTime;
+
+  const showFieldHint = isNative && selectedDateTime === undefined && inputValue === '';
+  const hasCustomEmptyHint = showFieldHint && placeholder !== undefined;
+
+  /** Custom empty hint in native mode: open only on pointer (not Tab focus). */
+  const onNativeFieldHintPointerDown = (e: PointerEvent<HTMLInputElement>) => {
+    if (hasCustomEmptyHint) {
+      e.preventDefault();
+      setIsPickerOpen(true);
+    }
+  };
+
+  useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    const valueTime = value?.getTime();
+    const selectedTime = selectedDateTimeRef.current?.getTime();
+    if (valueTime !== selectedTime) {
+      setSelectedDateTime(value);
+      setMonth(value ?? new Date());
+      setInputValue(value ? formatInputValue(value) : '');
+      setTimeInputValue(value ? formatTimeInputValue(value, granularity) : '');
+    }
+  }, [value, isControlled, granularity, formatInputValue]);
+
+  const mountedRef = useRef(false);
+  useEffect(() => {
+    // Skip reformat on initial mount (`useState` already seeded input/time strings). Only re-run when
+    // `granularity` or `displayFormat` changes after mount.
+    if (!mountedRef.current) {
+      mountedRef.current = true;
+      return;
+    }
+    const current = selectedDateTimeRef.current;
+    if (current) {
+      setInputValue(formatInputValue(current));
+      setTimeInputValue(formatTimeInputValue(current, granularity));
+    }
+    else {
+      setInputValue('');
+      setTimeInputValue('');
+    }
+  }, [granularity, displayFormat, formatInputValue]);
+
+  const onInputChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const nextInputValue = event.target.value;
+    setInputValue(nextInputValue);
+
+    const parsedDate = parseInputValue(nextInputValue);
+
+    if (parsedDate) {
+      setSelectedDateTime(parsedDate);
+      setMonth(parsedDate);
+      setTimeInputValue(formatTimeInputValue(parsedDate, granularity));
+      onChange?.(parsedDate);
+    }
+    else {
+      setSelectedDateTime(undefined);
+      onChange?.(undefined);
+    }
+  };
+
+  const handleTimeChange = (nextTimeValue: string) => {
+    setTimeInputValue(nextTimeValue);
+
+    if (!selectedDateTime) {
+      return;
+    }
+
+    const nextDateTime = mergeDateAndTime(selectedDateTime, nextTimeValue, granularity);
+    setSelectedDateTime(nextDateTime);
+    setInputValue(formatInputValue(nextDateTime));
+    onChange?.(nextDateTime);
+  };
+
+  const handleDayPickerSelect = (nextDate?: Date) => {
+    if (!nextDate) {
+      setSelectedDateTime(undefined);
+      setInputValue('');
+      setIsPickerOpen(false);
+      onChange?.(undefined);
+      return;
+    }
+
+    const nextDateTime = mergeDateAndTime(nextDate, timeInputValue, granularity);
+    setSelectedDateTime(nextDateTime);
+    setMonth(nextDateTime);
+    setInputValue(formatInputValue(nextDateTime));
+    // UX trade-off: closing here means the user must reopen the popover to set time if they picked the day first.
+    // Alternatives (keep open until time is chosen) are a deliberate product change.
+    setIsPickerOpen(false);
+    onChange?.(nextDateTime);
+  };
+
+  const handleTodayClick = () => {
+    const nextDate = mergeDateAndTime(new Date(), timeInputValue, granularity);
+    setSelectedDateTime(nextDate);
+    setMonth(nextDate);
+    setInputValue(formatInputValue(nextDate));
+    setIsPickerOpen(false);
+    onChange?.(nextDate);
+  };
+
+  const popupParentRef = useContext(PopupParentContext);
+
+  return (
+    <div className={classNames('ds-date-time-picker', className)}>
+      <div
+        className={classNames(
+          'ds-date-time-picker__field',
+          { 'ds-date-time-picker__field--show-hint': showFieldHint },
+        )}
+      >
+        <TextInput
+          ref={inputRef}
+          type={isNative ? 'datetime-local' : 'text'}
+          value={inputValue}
+          onChange={onInputChange}
+          onPointerDown={onNativeFieldHintPointerDown}
+          readOnly={hasCustomEmptyHint}
+          id={id}
+          step={isNative ? (granularity === 'second' ? 1 : 60) : undefined}
+          placeholder={showFieldHint ? '' : resolvedPlaceholder}
+          hasError={hasError}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className="ds-date-time-picker__input"
+        />
+        {showFieldHint
+          ? (
+              <span className="ds-date-time-picker__field-hint" aria-hidden="true">
+                {resolvedPlaceholder}
+              </span>
+            )
+          : null}
+      </div>
+      <Popover.Root open={isPickerOpen} onOpenChange={open => setIsPickerOpen(open)}>
+        <Popover.Trigger asChild>
+          <Button
+            className="ds-date-time-picker__button"
+            variant="text-link"
+            iconLeftName="date"
+            iconLeftScreenReaderText="Open date and time picker"
+          />
+        </Popover.Trigger>
+        <Popover.Portal container={popupParentRef.current}>
+          <Popover.Content
+            align="end"
+            sideOffset={5}
+            onOpenAutoFocus={e => e.preventDefault()}
+            onCloseAutoFocus={(e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+            }}
+          >
+            <div className="ds-date-time-picker__popup">
+              <TimeInput
+                className="ds-date-time-picker__time"
+                aria-label="Select time"
+                value={timeInputValue as TimeValue | ''}
+                onValueChange={handleTimeChange}
+                granularity={granularity}
+                options={timeOptions}
+                searchType={searchType}
+                highlightStringMatches={highlightStringMatches}
+                hasError={hasError}
+              />
+              <DatePickerCalendarHeader month={month} onMonthChange={setMonth} />
+              <DayPicker
+                className="ds-date-time-picker__calendar"
+                month={month}
+                onMonthChange={setMonth}
+                autoFocus
+                role="application"
+                mode="single"
+                selected={selectedDateTime}
+                onSelect={handleDayPickerSelect}
+                hideNavigation
+                footer={(
+                  <Button
+                    variant="text-link"
+                    onClick={handleTodayClick}
+                    className="ds-date-time-picker__today-button"
+                  >
+                    Today
+                  </Button>
+                )}
+              />
+            </div>
+          </Popover.Content>
+        </Popover.Portal>
+      </Popover.Root>
+    </div>
+  );
+};
+
+export type { DateTimePickerDisplayFormat } from 'Components/datePicker/dateInputUtils';

package/src/components/dateTimePicker/dateTimePicker.scss

@@ -0,0 +1,17 @@
+@use "../datePicker/date-field-hint" as shell;
+
+.ds-date-time-picker {
+  position: relative;
+  min-width: 0;
+
+  @include shell.ds-date-picker-shell-field("date-time-picker");
+  @include shell.ds-date-picker-shell-button("date-time-picker");
+}
+
+@include shell.ds-date-picker-shell-popup("date-time-picker");
+
+.ds-date-time-picker__time {
+  width: 100%;
+}
+
+@include shell.ds-date-picker-shell-calendar("date-time-picker");

package/src/components/formField/FormField.test.tsx

@@ -1,7 +1,7 @@
-import { expect, test, describe } from 'vitest';
-import { FormField } from './FormField';
-import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+import { FormField } from './FormField';
 
 describe('FormField component', () => {
   test('renders a form field', () => {
@@ -64,8 +64,8 @@ describe('FormField component', () => {
   });
 
   test('renders a date picker when inputType is datePicker', () => {
-    render(<FormField id="niceid" inputType="datePicker" />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    const { container } = render(<FormField id="niceid" inputType="datePicker" />);
+    expect(container.querySelector('input[type="date"]')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
   });
 

package/src/components/formField/inputs/selectDropdown/SelectDropdown.test.tsx

@@ -182,4 +182,32 @@ describe('SelectDropdown component', () => {
     expect(await screen.findByText('Option 1')).toBeInTheDocument();
     expect(screen.getByText('header1')).toBeInTheDocument();
   });
+
+  test('updates the rendered selection when controlled selectedValues change', () => {
+    const { rerender } = render(
+      <SelectDropdown
+        options={[
+          { label: 'June', value: '5' },
+          { label: 'July', value: '6' },
+        ]}
+        selectedValues={['5']}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: /june/i })).toBeInTheDocument();
+
+    rerender(
+      <SelectDropdown
+        options={[
+          { label: 'June', value: '5' },
+          { label: 'July', value: '6' },
+        ]}
+        selectedValues={['6']}
+        onSelectionChange={vi.fn()}
+      />,
+    );
+
+    expect(screen.getByRole('button', { name: /july/i })).toBeInTheDocument();
+  });
 });