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

package/src/components/combobox/ComboboxTrigger.tsx

@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import { Icon } from 'Components/icon/Icon';
 import { Tag } from 'Components/tag/Tag';
 import { Popover } from 'radix-ui';
-import type { ComboboxAriaInvalid, ComboboxOption } from './types';
+import type { ComboboxAriaInvalid, ComboboxOption, ComboboxSelectedValueDisplay } from './types';
 
 export type ComboboxTriggerProps = {
   'inputRef': React.RefObject<HTMLInputElement | null>;
@@ -21,6 +21,8 @@ export type ComboboxTriggerProps = {
   'aria-invalid'?: ComboboxAriaInvalid;
   'aria-label'?: string;
   'showDropdownTrigger': boolean;
+  'selectedValueDisplay': ComboboxSelectedValueDisplay;
+  'triggerEndContent'?: React.ReactNode;
   'selectedChips': ComboboxOption[];
   'selectedChipValuesSet': Set<string>;
   'focusedChipIndex': number | null;
@@ -52,6 +54,8 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
     'aria-invalid': ariaInvalid,
     'aria-label': ariaLabel,
     showDropdownTrigger,
+    selectedValueDisplay,
+    triggerEndContent,
     selectedChips,
     selectedChipValuesSet,
     focusedChipIndex,
@@ -65,6 +69,12 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
     handleChevronClick,
   } = props;
 
+  const selectedValueText = selectedChips.map(resolveTagLabel).join(', ');
+  const showSelectedValueText
+    = selectedValueDisplay === 'text'
+      && query.length === 0
+      && selectedValueText.length > 0;
+
   return (
     <Popover.Anchor asChild>
       <div
@@ -77,23 +87,32 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
         onClick={handleTriggerClick}
       >
         <div className="ds-combobox__chips-and-input">
-          {selectedChips.map((opt, chipIdx) => (
-            <Tag
-              key={opt.value}
-              color="neutral"
-              selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
-              slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
-              onRemove={disabled ? undefined : () => removeValue(opt.value)}
-              removeLabel={`Remove ${resolveTagLabel(opt)}`}
-              removeButtonTabIndex={-1}
-            >
-              {resolveTagLabel(opt)}
-            </Tag>
-          ))}
+          {selectedValueDisplay === 'tags'
+            ? selectedChips.map((opt, chipIdx) => (
+                <Tag
+                  key={opt.value}
+                  color="neutral"
+                  selected={selectedChipValuesSet.has(opt.value) || focusedChipIndex === chipIdx}
+                  slotStart={opt.iconName ? <Icon name={opt.iconName} size={12} /> : undefined}
+                  onRemove={disabled ? undefined : () => removeValue(opt.value)}
+                  removeLabel={`Remove ${resolveTagLabel(opt)}`}
+                  removeButtonTabIndex={-1}
+                >
+                  {resolveTagLabel(opt)}
+                </Tag>
+              ))
+            : null}
+          {showSelectedValueText && (
+            <span className="ds-combobox__selected-value">
+              {selectedValueText}
+            </span>
+          )}
           <input
             ref={inputRef}
             id={comboboxId}
-            className="ds-combobox__input"
+            className={classNames('ds-combobox__input', {
+              'ds-combobox__input--with-selected-value': showSelectedValueText,
+            })}
             type="text"
             role="combobox"
             aria-autocomplete="list"
@@ -114,6 +133,11 @@ export const ComboboxTrigger = (props: ComboboxTriggerProps): React.JSX.Element
             autoComplete="off"
           />
         </div>
+        {triggerEndContent && (
+          <span className="ds-combobox__end-content" aria-hidden="true">
+            {triggerEndContent}
+          </span>
+        )}
         {showDropdownTrigger && (
           <button
             type="button"

package/src/components/combobox/combobox.scss

@@ -88,6 +88,13 @@
   white-space: nowrap;
 }
 
+.ds-combobox__button-value {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 .ds-combobox__button-ellipsis {
   flex-shrink: 0;
   font-size: var(--font-size-medium);
@@ -127,6 +134,10 @@
   }
 }
 
+.ds-combobox__input--with-selected-value {
+  min-width: 1ch;
+}
+
 // Chevron
 .ds-combobox__chevron {
   flex-shrink: 0;
@@ -144,6 +155,13 @@
   }
 }
 
+.ds-combobox__end-content {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
 // Popover
 .ds-combobox__popover {
   min-width: var(--radix-popper-anchor-width);

package/src/components/combobox/types.ts

@@ -16,6 +16,7 @@ export type ComboboxOption = {
 export type ComboboxCreateResult = string | ComboboxOption | void;
 export type ComboboxSearchFn = (option: ComboboxOption, query: string) => boolean;
 export type ComboboxSearchType = 'prefix' | 'substring' | ComboboxSearchFn;
+export type ComboboxSelectedValueDisplay = 'tags' | 'text';
 
 export type ComboboxProps = {
   'options': ComboboxOption[];
@@ -36,7 +37,9 @@ export type ComboboxProps = {
   'disabled'?: boolean;
   'dropdownOnFocus'?: boolean;
   'triggerVariant'?: 'input' | 'button';
+  'selectedValueDisplay'?: ComboboxSelectedValueDisplay;
   'showDropdownTrigger'?: boolean;
+  'triggerEndContent'?: React.ReactNode;
   'showSelectionCountBadge'?: boolean;
   'selectionCountA11yLabel'?: string | ((count: number) => string);
   'loading'?: boolean;

package/src/components/combobox/useComboboxPopoverBehavior.ts

@@ -26,6 +26,8 @@ type UseComboboxPopoverBehaviorParams = {
   clearChipSelection: () => void;
   exitChipNav: () => void;
   triggerContainsInput?: boolean;
+  /** Search field is inside the popover (button trigger); keep shell mounted while open even with zero matches. */
+  renderSearchInputInListbox: boolean;
 };
 
 export type UseComboboxPopoverBehaviorReturn = {
@@ -61,10 +63,13 @@ export const useComboboxPopoverBehavior = ({
   clearChipSelection,
   exitChipNav,
   triggerContainsInput = true,
+  renderSearchInputInListbox,
 }: UseComboboxPopoverBehaviorParams): UseComboboxPopoverBehaviorReturn => {
-  const shouldRenderPopoverContent = loading || totalItems > 0;
+  const shouldRenderPopoverContent
+    = loading || totalItems > 0 || (renderSearchInputInListbox && isOpen);
   const shouldShowPopover = isOpen && shouldRenderPopoverContent;
   const showListboxLoading = Boolean(loading && shouldShowPopover);
+  const canOpenPopover = loading || totalItems > 0 || renderSearchInputInListbox;
 
   const handleInputChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -110,10 +115,10 @@ export const useComboboxPopoverBehavior = ({
 
   const requestOpen = useCallback(() => {
     if (disabled) return;
-    if (shouldRenderPopoverContent) {
+    if (canOpenPopover) {
       openPopover();
     }
-  }, [disabled, openPopover, shouldRenderPopoverContent]);
+  }, [disabled, openPopover, canOpenPopover]);
 
   const handleTriggerClick = useCallback(() => {
     if (disabled) return;
@@ -148,11 +153,11 @@ export const useComboboxPopoverBehavior = ({
       if (triggerContainsInput) {
         inputRef.current?.focus();
       }
-      if (shouldRenderPopoverContent) {
+      if (canOpenPopover) {
         openPopover();
       }
     },
-    [disabled, inputRef, openPopover, shouldRenderPopoverContent, triggerContainsInput],
+    [disabled, inputRef, openPopover, canOpenPopover, triggerContainsInput],
   );
 
   const handlePopoverInteractOutside = useCallback(

package/src/components/combobox/useComboboxState.ts

@@ -129,8 +129,11 @@ export const useComboboxState = (params: UseComboboxStateParams): UseComboboxSta
         : [optionValue];
       updateValue(next);
       setQuery('');
+      if (!multiple) {
+        setIsOpen(false);
+      }
     },
-    [multiple, selectedValues, selectedValuesSet, updateValue],
+    [multiple, selectedValues, selectedValuesSet, setIsOpen, updateValue],
   );
 
   const removeValue = useCallback(

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

@@ -5,17 +5,35 @@ import { DatePicker } from './DatePicker';
 const meta = {
   title: 'Components/DatePicker',
   component: DatePicker,
+  decorators: [
+    Story => (
+      <div style={{ maxWidth: '220px', width: '100%' }}>
+        <Story />
+      </div>
+    ),
+  ],
   parameters: {
     layout: 'centered',
+    docs: {
+      description: {
+        component:
+          '`DatePicker` uses a native `type="date"` input (`yyyy-MM-dd`) with a synced calendar popover. When empty, hint copy uses a decorative span (browsers do not reliably show `placeholder` on native date fields). `displayFormat` controls that hint (`DD/MM/YYYY` vs `Pick a date`). The custom month/year header uses the design-system select control.',
+      },
+    },
   },
   tags: ['autodocs'],
   args: {
     onChange: fn(),
   },
   argTypes: {
-    dateFormat: {
+    displayFormat: {
+      control: 'inline-radio',
+      options: ['default', 'friendly'],
+      description: 'Controls the empty-state hint text (`DD/MM/YYYY` vs `Pick a date`). The field value is always native ISO `yyyy-MM-dd`.',
+    },
+    placeholder: {
       control: 'text',
-      description: 'Date format string using date-fns tokens (e.g. "dd/MM/yyyy", "MM/dd/yyyy", "yyyy-MM-dd")',
+      description: 'Optional override for the empty-state hint (defaults from `displayFormat`).',
     },
     className: {
       control: 'text',
@@ -30,18 +48,58 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+  parameters: {
+    docs: {
+      description: {
+        story: 'Empty field shows hint **DD/MM/YYYY** (`displayFormat="default"`).',
+      },
+    },
+  },
+};
 
-export const USDateFormat: Story = {
-  name: 'US Date Format (MM/dd/yyyy)',
+export const FriendlyFormat: Story = {
+  name: 'Friendly Format',
   args: {
-    dateFormat: 'MM/dd/yyyy',
+    displayFormat: 'friendly',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Empty field shows hint **Pick a date**.',
+      },
+    },
   },
 };
 
-export const ISOFormat: Story = {
-  name: 'ISO Format (yyyy-MM-dd)',
+/** `placeholder` overrides the default empty-state hint. */
+export const PlaceholderCustomOverride: Story = {
+  name: 'Placeholder · custom copy',
   args: {
-    dateFormat: 'yyyy-MM-dd',
+    displayFormat: 'default',
+    placeholder: 'e.g. 25/12/2024',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'The optional `placeholder` prop replaces the default hint.',
+      },
+    },
+  },
+};
+
+/** Friendly format with custom hint copy. */
+export const PlaceholderFriendlyWithCustomCopy: Story = {
+  name: 'Placeholder · friendly format, custom hint',
+  args: {
+    displayFormat: 'friendly',
+    placeholder: 'Choose a date…',
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: '`displayFormat="friendly"` with a custom hint instead of **Pick a date**.',
+      },
+    },
   },
 };

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);
-    });
-  });
 });