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

package/src/components/datePicker/DatePicker.test.tsx

@@ -2,18 +2,22 @@ import { describe, expect, test, vi } from 'vitest';
 import { render, screen, within, fireEvent } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/vitest';
-import { format } from 'date-fns';
 import { DatePicker } from './DatePicker';
+import { formatNativeDateInputValue } from './dateInputUtils';
+import { getDropdownTrigger } from './datePickerTestUtils.test-helpers';
+
+const getDateField = (container: HTMLElement) => (
+  container.querySelector('input[type="date"]') as HTMLInputElement
+);
 
 describe('DatePicker', () => {
-  test('renders a text input', () => {
-    render(<DatePicker />);
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+  test('renders a date input', () => {
+    const { container } = render(<DatePicker />);
+    expect(getDateField(container)).toBeInTheDocument();
   });
 
   test('renders a calendar toggle button', () => {
     render(<DatePicker />);
-    // Button has an icon with screenReaderText="date" (from iconLeftName fallback in Button/Icon)
     expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
   });
 
@@ -22,6 +26,49 @@ describe('DatePicker', () => {
     expect(screen.queryByRole('application')).not.toBeInTheDocument();
   });
 
+  test('shows empty-state hint copy when empty (native placeholder is unreliable)', () => {
+    const { container } = render(<DatePicker />);
+    expect(getDateField(container)).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('DD/MM/YYYY')).toBeInTheDocument();
+  });
+
+  test('placeholder prop overrides the empty-state hint', () => {
+    const { container } = render(<DatePicker placeholder="When?" />);
+    expect(getDateField(container)).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('When?')).toBeInTheDocument();
+  });
+
+  test('friendly displayFormat changes the empty-state hint', () => {
+    const { container } = render(<DatePicker displayFormat="friendly" />);
+    expect(getDateField(container)).toHaveAttribute('placeholder', '');
+    expect(screen.getByText('Pick a date')).toBeInTheDocument();
+  });
+
+  describe('custom placeholder empty state', () => {
+    test('uses read-only date input and opens the calendar on pointer down', () => {
+      const { container } = render(<DatePicker placeholder="Pick one" />);
+      const input = getDateField(container);
+      expect(input.readOnly).toBe(true);
+      fireEvent.pointerDown(input);
+      expect(screen.getByRole('application')).toBeInTheDocument();
+    });
+
+    test('does not open the calendar on keyboard focus alone', () => {
+      const { container } = render(<DatePicker placeholder="Pick one" />);
+      const input = getDateField(container);
+      fireEvent.focus(input);
+      expect(screen.queryByRole('application')).not.toBeInTheDocument();
+    });
+
+    test('opens the calendar when the field is activated with a click', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<DatePicker placeholder="Pick one" />);
+      const input = getDateField(container);
+      await user.click(input);
+      expect(screen.getByRole('application')).toBeInTheDocument();
+    });
+  });
+
   describe('calendar toggle', () => {
     test('clicking the button opens the day picker', async () => {
       render(<DatePicker />);
@@ -37,61 +84,57 @@ describe('DatePicker', () => {
     });
   });
 
-  describe('text input', () => {
-    // Use fireEvent.change rather than userEvent.type — the component's useEffect overwrites
-    // inputValue state between individual keystrokes, which conflicts with userEvent's tracking.
-
-    test('entering a valid date updates the input value', () => {
-      render(<DatePicker />);
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
-      expect(screen.getByRole('textbox')).toHaveValue('15/06/2024');
+  describe('date input', () => {
+    test('entering a valid ISO date updates the input value', () => {
+      const { container } = render(<DatePicker />);
+      const input = getDateField(container);
+      fireEvent.change(input, { target: { value: '2024-06-15' } });
+      expect(input).toHaveValue('2024-06-15');
     });
 
-    test('entering a valid date calls onChange with the parsed Date', () => {
+    test('entering a valid ISO date calls onChange with the parsed Date', () => {
       const onChange = vi.fn();
-      render(<DatePicker onChange={onChange} />);
-      onChange.mockClear(); // ignore the initial mount call with undefined
+      const { container } = render(<DatePicker onChange={onChange} />);
+      const input = getDateField(container);
 
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
+      fireEvent.change(input, { target: { value: '2024-06-15' } });
 
+      expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
       const lastDate: Date = onChange.mock.lastCall![0];
       expect(lastDate.getFullYear()).toBe(2024);
-      expect(lastDate.getMonth()).toBe(5); // June is month index 5
+      expect(lastDate.getMonth()).toBe(5);
       expect(lastDate.getDate()).toBe(15);
+      expect(lastDate.getHours()).toBe(0);
+      expect(lastDate.getMinutes()).toBe(0);
     });
 
-    test('entering an invalid string after a valid date calls onChange with undefined', () => {
-      // onChange is only fired by the useEffect when selectedDate actually changes.
-      // So we first need a valid date to put selectedDate into a non-undefined state.
+    test('entering an invalid string calls onChange with undefined', () => {
       const onChange = vi.fn();
-      render(<DatePicker onChange={onChange} />);
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '15/06/2024' } });
-      onChange.mockClear();
+      const { container } = render(<DatePicker onChange={onChange} />);
+      const input = getDateField(container);
 
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'not-a-date' } });
+      fireEvent.change(input, { target: { value: '2024-06-15' } });
+      onChange.mockClear();
+      fireEvent.change(input, { target: { value: 'not-a-date' } });
 
+      expect(onChange).toHaveBeenCalledTimes(1);
       expect(onChange).toHaveBeenLastCalledWith(undefined);
     });
   });
 
   describe('day picker selection', () => {
-    // Avoid fake timers (incompatible with userEvent) by navigating the picker to a
-    // known month via the text input before opening the calendar.
-
     test('selecting a date from the picker updates the input', async () => {
-      render(<DatePicker />);
-      // Navigate to June 2024 by entering a different day in that month
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      const { container } = render(<DatePicker />);
+      fireEvent.change(getDateField(container), { target: { value: '2024-06-01' } });
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
-      // Day aria-labels use date-fns PPPP format e.g. "Thursday, June 20, 2024"
       await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
-      expect(screen.getByRole('textbox')).toHaveValue('20/06/2024');
+      expect(getDateField(container)).toHaveValue('2024-06-20');
     });
 
     test('selecting a date from the picker closes the picker', async () => {
-      render(<DatePicker />);
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      const { container } = render(<DatePicker />);
+      fireEvent.change(getDateField(container), { target: { value: '2024-06-01' } });
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
       await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
       expect(screen.queryByRole('application')).not.toBeInTheDocument();
@@ -99,8 +142,8 @@ describe('DatePicker', () => {
 
     test('selecting a date from the picker calls onChange with the selected date', async () => {
       const onChange = vi.fn();
-      render(<DatePicker onChange={onChange} />);
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '01/06/2024' } });
+      const { container } = render(<DatePicker onChange={onChange} />);
+      fireEvent.change(getDateField(container), { target: { value: '2024-06-01' } });
       onChange.mockClear();
 
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
@@ -109,35 +152,100 @@ describe('DatePicker', () => {
       expect(onChange).toHaveBeenCalledWith(expect.any(Date));
       const lastDate: Date = onChange.mock.lastCall![0];
       expect(lastDate.getFullYear()).toBe(2024);
-      expect(lastDate.getMonth()).toBe(5); // June is month index 5
+      expect(lastDate.getMonth()).toBe(5);
       expect(lastDate.getDate()).toBe(20);
+      expect(lastDate.getHours()).toBe(0);
+      expect(lastDate.getMinutes()).toBe(0);
     });
 
-    test('clicking the Today button selects today\'s date', async () => {
-      render(<DatePicker />);
+    test('clicking the Today button sets today and closes the picker', async () => {
+      const { container } = render(<DatePicker />);
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
       await userEvent.click(screen.getByRole('button', { name: 'Today' }));
-      expect(screen.getByRole('textbox')).toHaveValue(format(new Date(), 'dd/MM/yyyy'));
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date()));
+      expect(screen.queryByRole('application')).not.toBeInTheDocument();
     });
 
-    test('clicking the Today button closes the picker', async () => {
-      render(<DatePicker />);
+    test('opening the picker after typing a valid value syncs the month and year controls', async () => {
+      const { container } = render(<DatePicker />);
+      fireEvent.change(getDateField(container), { target: { value: '2024-06-01' } });
+
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
-      await userEvent.click(screen.getByRole('button', { name: 'Today' }));
-      expect(screen.queryByRole('application')).not.toBeInTheDocument();
+
+      expect(getDropdownTrigger(/June/i)).toBeInTheDocument();
+      expect(getDropdownTrigger(/2024/i)).toBeInTheDocument();
+    });
+
+    test('changing the custom month select updates the displayed calendar month', async () => {
+      const user = userEvent.setup();
+      const { container } = render(<DatePicker value={new Date(2024, 5, 15)} />);
+
+      await user.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await user.click(getDropdownTrigger(/June/i)!);
+      await user.click(screen.getByText('July'));
+
+      expect(getDropdownTrigger(/July/i)).toBeInTheDocument();
+      expect(within(screen.getByRole('application')).getByRole('button', { name: /July 15/ })).toBeInTheDocument();
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date(2024, 5, 15)));
+    });
+  });
+
+  describe('defaultValue prop', () => {
+    test('renders with the defaultValue when no value is provided', () => {
+      const { container } = render(<DatePicker defaultValue={new Date(2024, 5, 15)} />);
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date(2024, 5, 15)));
+    });
+
+    test('value prop takes precedence over defaultValue', () => {
+      const { container } = render(
+        <DatePicker value={new Date(2024, 11, 25)} defaultValue={new Date(2024, 5, 15)} />,
+      );
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date(2024, 11, 25)));
+    });
+
+    test('does not call onChange on mount with defaultValue', () => {
+      const onChange = vi.fn();
+      render(<DatePicker defaultValue={new Date(2024, 5, 15)} onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('onChange call-count correctness', () => {
+    test('does not call onChange on mount', () => {
+      const onChange = vi.fn();
+      render(<DatePicker onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('does not call onChange on mount with an initial value', () => {
+      const onChange = vi.fn();
+      render(<DatePicker value={new Date(2024, 5, 15)} onChange={onChange} />);
+      expect(onChange).not.toHaveBeenCalled();
+    });
+
+    test('calls onChange exactly once per user interaction', async () => {
+      const onChange = vi.fn();
+      const { container } = render(<DatePicker onChange={onChange} />);
+
+      fireEvent.change(getDateField(container), { target: { value: '2024-06-15' } });
+      expect(onChange).toHaveBeenCalledTimes(1);
+
+      await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
+      await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
+      expect(onChange).toHaveBeenCalledTimes(2);
     });
   });
 
   describe('controlled value prop', () => {
     test('renders with the initial value', () => {
-      render(<DatePicker value={new Date(2024, 5, 15)} />);
-      expect(screen.getByRole('textbox')).toHaveValue('15/06/2024');
+      const { container } = render(<DatePicker value={new Date(2024, 5, 15)} />);
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date(2024, 5, 15)));
     });
 
     test('updates the input when value prop changes', () => {
-      const { rerender } = render(<DatePicker value={new Date(2024, 5, 15)} />);
+      const { container, rerender } = render(<DatePicker value={new Date(2024, 5, 15)} />);
       rerender(<DatePicker value={new Date(2024, 11, 25)} />);
-      expect(screen.getByRole('textbox')).toHaveValue('25/12/2024');
+      expect(getDateField(container)).toHaveValue(formatNativeDateInputValue(new Date(2024, 11, 25)));
     });
 
     test('does not call onChange when value prop changes externally', () => {
@@ -155,7 +263,6 @@ describe('DatePicker', () => {
       render(<DatePicker value={new Date(2024, 5, 15)} onChange={onChange} />);
       onChange.mockClear();
 
-      // Navigate to June 2024 (already set via value) and pick a different day
       await userEvent.click(screen.getByRole('button', { name: 'Open date picker' }));
       await userEvent.click(within(screen.getByRole('application')).getByRole('button', { name: /June 20/ }));
 
@@ -164,26 +271,4 @@ describe('DatePicker', () => {
       expect(lastDate.getDate()).toBe(20);
     });
   });
-
-  describe('custom dateFormat prop', () => {
-    test('formats the value according to the custom format', () => {
-      render(<DatePicker dateFormat="yyyy-MM-dd" />);
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '2024-06-15' } });
-      expect(screen.getByRole('textbox')).toHaveValue('2024-06-15');
-    });
-
-    test('calls onChange with the correctly parsed date for a custom format', () => {
-      const onChange = vi.fn();
-      render(<DatePicker dateFormat="MM/dd/yyyy" onChange={onChange} />);
-      onChange.mockClear();
-
-      fireEvent.change(screen.getByRole('textbox'), { target: { value: '06/15/2024' } });
-
-      expect(onChange).toHaveBeenLastCalledWith(expect.any(Date));
-      const lastDate: Date = onChange.mock.lastCall![0];
-      expect(lastDate.getFullYear()).toBe(2024);
-      expect(lastDate.getMonth()).toBe(5); // June
-      expect(lastDate.getDate()).toBe(15);
-    });
-  });
 });

package/src/components/datePicker/DatePicker.tsx

@@ -1,86 +1,155 @@
 import classNames from 'classnames';
 import { Button } from 'Components/button/Button';
 import { TextInput } from 'Components/formField/inputs/text/TextInput';
-import { format, isValid, parse } from 'date-fns';
 import { Popover } from 'radix-ui';
-import { useContext, useRef, useState, type ChangeEvent } from 'react';
+import { useContext, useEffect, useRef, useState, type ChangeEvent, type PointerEvent } from 'react';
 import { DayPicker } from 'react-day-picker';
-import { useComponentDidUpdate } from 'Utils/hooks/useComponentDidUpdate';
 import { PopupParentContext } from 'Utils/PopupParentContext';
+import {
+  formatNativeDateInputValue,
+  formatTimeInputValue,
+  getDatePlaceholder,
+  mergeDateAndTime,
+  parseNativeDateInputValue,
+  type DateDisplayFormat,
+} from './dateInputUtils';
+import { DatePickerCalendarHeader } from './DatePickerCalendarHeader';
+
+const TIME_PRESERVATION_GRANULARITY = 'minute' as const;
 
 export type DatePickerProps = {
   'className'?: string;
-  'dateFormat'?: string;
+  'displayFormat'?: DateDisplayFormat;
+  'placeholder'?: string;
   'onChange'?: (newDate?: Date) => void;
   'id'?: string;
   'hasError'?: boolean;
   'aria-describedby'?: string;
   'aria-invalid'?: boolean;
   'value'?: Date;
+  'defaultValue'?: Date;
 };
 
 export const DatePicker = (props: DatePickerProps) => {
   const {
     className,
-    dateFormat = 'dd/MM/yyyy',
+    displayFormat = 'default',
     onChange,
     id,
     hasError,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
     value,
+    defaultValue,
+    placeholder,
   } = props;
 
-  const [month, setMonth] = useState(value ?? new Date());
-
-  const [selectedDate, setSelectedDate] = useState<Date | undefined>(value);
+  const initialValue = value ?? defaultValue;
+  const isControlled = value !== undefined;
+  const [month, setMonth] = useState(initialValue ?? new Date());
+  const [selectedDate, setSelectedDate] = useState<Date | undefined>(initialValue);
+  const [inputValue, setInputValue] = useState(
+    initialValue ? formatNativeDateInputValue(initialValue) : '',
+  );
+  const [isPickerOpen, setIsPickerOpen] = useState(false);
 
-  const [inputValue, setInputValue] = useState(value ? format(value, dateFormat) : '');
+  const inputRef = useRef<HTMLInputElement>(null);
+  const selectedDateRef = useRef(selectedDate);
+  selectedDateRef.current = selectedDate;
 
-  const isExternalSyncRef = useRef(false);
+  const resolvedPlaceholder = placeholder ?? getDatePlaceholder(displayFormat);
+  const showFieldHint = selectedDate === undefined && inputValue === '';
+  const overlayHint = resolvedPlaceholder;
+  const hasCustomEmptyHint = showFieldHint && placeholder !== undefined;
 
-  useComponentDidUpdate(() => {
-    if (value && value.getTime() !== selectedDate?.getTime()) {
-      isExternalSyncRef.current = true;
+  useEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    const valueTime = value?.getTime();
+    const selectedTime = selectedDateRef.current?.getTime();
+    if (valueTime !== selectedTime) {
       setSelectedDate(value);
-      setMonth(value);
+      setMonth(value ?? new Date());
+      setInputValue(value ? formatNativeDateInputValue(value) : '');
     }
-  }, [value]);
-
-  const [isPickerOpen, setIsPickerOpen] = useState(false);
+  }, [value, isControlled]);
+
+  const mergeParsedDateWithExistingTime = (parsedDay: Date) => (
+    selectedDate
+      ? mergeDateAndTime(
+          parsedDay,
+          formatTimeInputValue(selectedDate, TIME_PRESERVATION_GRANULARITY),
+          TIME_PRESERVATION_GRANULARITY,
+        )
+      : parsedDay
+  );
 
   const onInputChange = (e: ChangeEvent<HTMLInputElement>) => {
-    setInputValue(e.target.value);
+    const nextInputValue = e.target.value;
+    setInputValue(nextInputValue);
 
-    const parsedDate = parse(e.target.value, dateFormat, new Date());
+    const parsedDay = parseNativeDateInputValue(nextInputValue);
 
-    if (isValid(parsedDate)) {
-      setSelectedDate(parsedDate);
-      setMonth(parsedDate);
+    if (parsedDay) {
+      const next = mergeParsedDateWithExistingTime(parsedDay);
+      setSelectedDate(next);
+      setMonth(next);
+      onChange?.(next);
     }
     else {
       setSelectedDate(undefined);
+      onChange?.(undefined);
     }
   };
 
-  const onDayPickerSelect = (date?: Date) => {
-    setSelectedDate(date);
-    setIsPickerOpen(false);
+  const mergePreservingTime = (calendarDay: Date) => {
+    const timeSource = selectedDate ?? calendarDay;
+    return mergeDateAndTime(
+      calendarDay,
+      formatTimeInputValue(timeSource, TIME_PRESERVATION_GRANULARITY),
+      TIME_PRESERVATION_GRANULARITY,
+    );
   };
 
-  useComponentDidUpdate(() => {
-    if (selectedDate) {
-      setInputValue(format(selectedDate, dateFormat));
-    }
-    else {
+  const onDayPickerSelect = (date?: Date) => {
+    if (!date) {
+      setSelectedDate(undefined);
       setInputValue('');
+      setIsPickerOpen(false);
+      onChange?.(undefined);
+      return;
     }
 
-    if (!isExternalSyncRef.current && onChange) {
-      onChange(selectedDate);
+    const next = mergePreservingTime(date);
+    setSelectedDate(next);
+    setMonth(next);
+    setInputValue(formatNativeDateInputValue(next));
+    setIsPickerOpen(false);
+    onChange?.(next);
+  };
+
+  const handleTodayClick = () => {
+    const day = new Date();
+    const next = mergeDateAndTime(
+      day,
+      formatTimeInputValue(selectedDate ?? day, TIME_PRESERVATION_GRANULARITY),
+      TIME_PRESERVATION_GRANULARITY,
+    );
+    setSelectedDate(next);
+    setMonth(next);
+    setInputValue(formatNativeDateInputValue(next));
+    setIsPickerOpen(false);
+    onChange?.(next);
+  };
+
+  /** Custom empty hint: open only on pointer (not Tab focus) so keyboard users are not surprised by the popover. */
+  const onFieldHintInputPointerDown = (e: PointerEvent<HTMLInputElement>) => {
+    if (hasCustomEmptyHint) {
+      e.preventDefault();
+      setIsPickerOpen(true);
     }
-    isExternalSyncRef.current = false;
-  }, [selectedDate, dateFormat, onChange]);
+  };
 
   const popupParentRef = useContext(PopupParentContext);
 
@@ -91,20 +160,37 @@ export const DatePicker = (props: DatePickerProps) => {
         className,
       )}
     >
-      <TextInput
-        value={inputValue}
-        onChange={onInputChange}
-        id={id}
-        hasError={hasError}
-        aria-describedby={ariaDescribedBy}
-        aria-invalid={ariaInvalid}
-      />
+      <div
+        className={classNames(
+          'ds-date-picker__field',
+          { 'ds-date-picker__field--show-hint': showFieldHint },
+        )}
+      >
+        <TextInput
+          ref={inputRef}
+          type="date"
+          value={inputValue}
+          onChange={onInputChange}
+          onPointerDown={onFieldHintInputPointerDown}
+          readOnly={hasCustomEmptyHint}
+          id={id}
+          placeholder={showFieldHint ? '' : resolvedPlaceholder}
+          hasError={hasError}
+          aria-describedby={ariaDescribedBy}
+          aria-invalid={ariaInvalid}
+          className="ds-date-picker__input"
+        />
+        {showFieldHint
+          ? (
+              <span className="ds-date-picker__field-hint" aria-hidden="true">
+                {overlayHint}
+              </span>
+            )
+          : null}
+      </div>
       <Popover.Root open={isPickerOpen} onOpenChange={open => setIsPickerOpen(open)}>
         <Popover.Trigger asChild>
           <Button
-            onClick={() => {
-              setIsPickerOpen(!isPickerOpen);
-            }}
             className="ds-date-picker__button"
             variant="text-link"
             iconLeftName="date"
@@ -112,30 +198,38 @@ export const DatePicker = (props: DatePickerProps) => {
           />
         </Popover.Trigger>
         <Popover.Portal container={popupParentRef.current}>
-          <Popover.Content align="end" sideOffset={5}>
-            <DayPicker
-              className="ds-date-picker__popup"
-              month={month}
-              onMonthChange={setMonth}
-              autoFocus
-              role="application"
-              mode="single"
-              selected={selectedDate}
-              onSelect={onDayPickerSelect}
-              captionLayout="dropdown"
-              footer={(
-                <Button
-                  variant="text-link"
-                  onClick={() => {
-                    setSelectedDate(new Date());
-                    setIsPickerOpen(false);
-                  }}
-                  className="ds-date-picker__today-button"
-                >
-                  Today
-                </Button>
-              )}
-            />
+          <Popover.Content
+            align="end"
+            sideOffset={5}
+            onOpenAutoFocus={e => e.preventDefault()}
+            onCloseAutoFocus={(e) => {
+              e.preventDefault();
+              inputRef.current?.focus();
+            }}
+          >
+            <div className="ds-date-picker__popup">
+              <DatePickerCalendarHeader month={month} onMonthChange={setMonth} />
+              <DayPicker
+                className="ds-date-picker__calendar"
+                month={month}
+                onMonthChange={setMonth}
+                autoFocus
+                role="application"
+                mode="single"
+                selected={selectedDate}
+                onSelect={onDayPickerSelect}
+                hideNavigation
+                footer={(
+                  <Button
+                    variant="text-link"
+                    onClick={handleTodayClick}
+                    className="ds-date-picker__today-button"
+                  >
+                    Today
+                  </Button>
+                )}
+              />
+            </div>
           </Popover.Content>
         </Popover.Portal>
       </Popover.Root>