uikit-react-public 0.44.0 → 0.44.3

package/lib/components/Datepicker/__tests__/Datepicker.test.tsx

@@ -107,6 +107,55 @@ describe('Datepicker', () => {
     );
   });
 
+  test('Does not submit an enclosing form on ENTER key press', async () => {
+    const onValueChange = vi.fn();
+    const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
+    const user = userEvent.setup();
+    customRender(
+      <form onSubmit={onSubmit}>
+        <Datepicker onValueChange={onValueChange} />
+      </form>
+    );
+
+    // Internal <input> (the user types into)
+    const datepickerInput = screen.getByRole('textbox');
+    await user.type(datepickerInput, '10/03/2025');
+    expect(datepickerInput).toHaveValue('10/03/2025');
+
+    // Trigger user-entered date parsing
+    await user.keyboard('{Enter}');
+
+    // The date is still parsed as normal...
+    expect(onValueChange).toHaveBeenCalledWith(
+      new Date('2025-03-10'),
+      expect.anything() // 2nd parameter is the event object (which we're not testing here)
+    );
+    // ...but the enclosing form is not submitted
+    expect(onSubmit).not.toHaveBeenCalled();
+  });
+
+  test('Does not bubble {Enter} key press to a parent element', async () => {
+    const onValueChange = vi.fn();
+    const parentKeyDown = vi.fn();
+    const user = userEvent.setup();
+    customRender(
+      <div onKeyDown={parentKeyDown}>
+        <Datepicker onValueChange={onValueChange} />
+      </div>
+    );
+
+    const datepickerInput = screen.getByRole('textbox');
+    await user.type(datepickerInput, '10/03/2025');
+    // Typing the digits/slashes above also fires keydown events that
+    // correctly bubble (only Enter is stopped, to prevent it submitting an
+    // enclosing form) - clear those out so only Enter is captured below.
+    parentKeyDown.mockClear();
+
+    await user.keyboard('{Enter}');
+
+    expect(parentKeyDown).not.toHaveBeenCalled();
+  });
+
   test('Input value reflects the date', () => {
     // 10th March 2025 (2 is March, because month is 0-indexed in Date constructor)
     customRender(<Datepicker value={new Date(2025, 2, 10)} />);
@@ -153,6 +202,21 @@ describe('Datepicker', () => {
     expect(panel.parentElement).toHaveClass('ucl-overlay');
   });
 
+  test('Forwards pickedMonth to the Calendar panel without affecting the input value', () => {
+    customRender(<Datepicker pickedMonth={new Date('2026-07-01')} />);
+
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    fireEvent.focus(input);
+
+    expect(screen.getByRole('combobox', { name: 'Month' })).toHaveTextContent(
+      'July'
+    );
+    expect(screen.getByRole('combobox', { name: 'Year' })).toHaveTextContent(
+      '2026'
+    );
+    expect(input).toHaveValue('');
+  });
+
   test('Panel escapes a containing dialog via fixed positioning', () => {
     customRender(
       <dialog open>
@@ -383,6 +447,32 @@ describe('Datepicker', () => {
     expect(screen.getByRole('button', { name: 'After' })).toHaveFocus();
   });
 
+  test('Forwards the statuses prop to the underlying Calendar', () => {
+    customRender(
+      <Datepicker
+        value={new Date(2026, 2, 10)} // 10th March 2026 (2 is March, 0-indexed)
+        events={[{ date: '2026-03-10', status: 'pending' }]}
+        statuses={{
+          pending: { variant: 'warning', ariaLabel: 'Pending' },
+        }}
+      />
+    );
+
+    const openCalendarButton = screen.getByTestId(
+      'ucl-uikit-datepicker__visible-field-icon-button'
+    );
+    fireEvent.click(openCalendarButton);
+
+    const days = screen.getAllByTestId('ucl-uikit-calendar__day');
+    // Pick 10th March 2026: 6 days of previous month + 10 days of current month - 1 for 0-indexing
+    const dateArrayIndex = 6 + 10 - 1;
+
+    expect(days[dateArrayIndex]).toHaveAttribute(
+      'aria-label',
+      expect.stringContaining('Pending')
+    );
+  });
+
   test('Disabled Datepicker icon control is not tabbable and cannot open', async () => {
     const user = userEvent.setup();
 

package/lib/components/Datepicker/subcomponents/CustomDatepicker.tsx

@@ -7,7 +7,11 @@ import { parseInputValue } from '../utils';
 import announce from '../../../utils/announce';
 import { useTheme } from '../../../theme';
 import type { DatepickerValue } from '../Datepicker.types';
-import type { CalendarEvent, AcademicWeek } from '../../Calendar';
+import type {
+  CalendarEvent,
+  CalendarStatuses,
+  AcademicWeek,
+} from '../../Calendar';
 import type { InputProps } from './DatepickerInput';
 
 interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,9 +24,11 @@ interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
   maxDate?: string | null; // ISO date string: YYYY-MM-DD
   minYear?: number;
   maxYear?: number;
+  pickedMonth?: Date | null; // Pre-selects a month to display when no value is set
   disabled?: boolean;
   clearable?: boolean;
   events?: CalendarEvent[];
+  statuses?: CalendarStatuses;
   showAcademicWeeks?: boolean;
   academicWeeks?: AcademicWeek[];
   testId?: string;
@@ -40,9 +46,11 @@ const CustomDatepicker = ({
   maxDate,
   minYear,
   maxYear,
+  pickedMonth = null,
   disabled = false,
   clearable = false,
   events,
+  statuses,
   showAcademicWeeks,
   academicWeeks = [],
   testId = NAME,
@@ -116,6 +124,11 @@ const CustomDatepicker = ({
 
   const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
+      // Stop the native "Enter submits the enclosing form" behaviour.
+      event.preventDefault();
+      // Key events must not bubble out of the datepicker (e.g. so a parent
+      // form's own key handlers don't also see this Enter).
+      event.stopPropagation();
       handleParseInput(event);
     } else if (event.key === 'Escape') {
       resetField();
@@ -260,12 +273,14 @@ const CustomDatepicker = ({
           <Panel>
             <Calendar
               pickedDate={value}
+              pickedMonth={pickedMonth}
               onDatePick={handlePickCalendarDate}
               minDate={minDate}
               maxDate={maxDate}
               minYear={minYear}
               maxYear={maxYear}
               events={events}
+              statuses={statuses}
               showAcademicWeeks={showAcademicWeeks}
               academicWeeks={academicWeeks}
             />

package/lib/components/index.ts

@@ -211,7 +211,7 @@ export { default as NativeDatepicker } from './NativeDatepicker';
 export type { NativeDatepickerProps } from './NativeDatepicker';
 
 export { default as Calendar } from './Calendar';
-export type { CalendarProps } from './Calendar';
+export type { CalendarProps, CalendarStatuses } from './Calendar';
 
 export { default as WeekPicker } from './WeekPicker';
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.44.0",
+  "version": "0.44.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",