uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Datepicker/Datepicker.tsx

@@ -1,130 +1,50 @@
-import { useState, useRef, memo, InputHTMLAttributes } from 'react';
-import { css, cx } from '@emotion/css';
-import { Native, DateField, CalendarMenu } from './subcomponents';
-import { useTheme } from '../../theme';
-import { CalendarEvent } from './Datepicker.types';
-import type { AcademicWeek } from './Datepicker.types';
-
-export const NAME = 'ucl-datepicker';
-
-export interface DatepickerProps extends InputHTMLAttributes<HTMLInputElement> {
-  date: Date | null | undefined;
-  minDate?: Date | null | undefined;
-  maxDate?: Date | null | undefined;
-  onDateChange: (date: Date | null | undefined) => void;
-  native?: boolean;
-  events?: CalendarEvent[];
-  showAcademicWeeks?: boolean;
-  academicWeeks?: AcademicWeek[]; // Array of academic week strings in YYYY-MM-DD format
-  testId?: string;
-}
+import { NativeDatepicker, CustomDatepicker } from './subcomponents';
+import { dateToLocaleISOString } from './utils';
+import type { DatepickerProps } from './Datepicker.types';
 
 const Datepicker = ({
-  date,
+  value,
+  onValueChange,
   minDate,
   maxDate,
-  onDateChange,
-  native = false,
-  events = [],
-  showAcademicWeeks = false,
-  academicWeeks = [],
-  testId = NAME,
+  disabled,
   className,
+  native,
+  nativeRef,
+  nativeHTMLAttributes,
   ...props
 }: DatepickerProps) => {
-  const [theme] = useTheme();
-  const [isOpen, setIsOpen] = useState(false);
-  const datepickerRef = useRef<HTMLDivElement>(null);
+  if (native) {
+    const nativeValue = dateToLocaleISOString(value);
 
-  if (native)
     return (
-      <Native
-        date={date}
+      <NativeDatepicker
+        value={nativeValue || ''}
+        onChange={(event) => {
+          const dateString = event.target.value;
+          onValueChange?.(dateString ? new Date(dateString) : null, event);
+        }}
+        min={minDate || undefined}
+        max={maxDate || undefined}
+        disabled={disabled}
+        className={className}
+        ref={nativeRef}
+        {...nativeHTMLAttributes}
+      />
+    );
+  } else {
+    return (
+      <CustomDatepicker
+        value={value}
+        onValueChange={onValueChange}
         minDate={minDate}
         maxDate={maxDate}
-        onDateChange={onDateChange}
-        testId={testId}
+        className={className}
+        disabled={disabled}
         {...props}
       />
     );
-
-  const blur = () => (document.activeElement as HTMLElement)?.blur();
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    // Keyboard mappings for interacting with the date `<CalendarMenu>`
-    // Escape & Enter both close the `<CalendarMenu>`
-    if (event.key === 'Escape' || event.key === 'Enter') blur();
-    // Move the currently selected date in the `<CalendarGrid />`
-    else if (event.key === 'ArrowLeft' && date)
-      onDateChange(
-        new Date(date.getFullYear(), date.getMonth(), date.getDate() - 1)
-      );
-    else if (event.key === 'ArrowRight' && date)
-      onDateChange(
-        new Date(date.getFullYear(), date.getMonth(), date.getDate() + 1)
-      );
-    else if (event.key === 'ArrowUp' && date)
-      onDateChange(
-        new Date(date.getFullYear(), date.getMonth(), date.getDate() - 7)
-      );
-    else if (event.key === 'ArrowDown' && date)
-      onDateChange(
-        new Date(date.getFullYear(), date.getMonth(), date.getDate() + 7)
-      );
-  };
-
-  const handleOnFocus = () => setIsOpen(true);
-
-  const handleDatePick = () => blur();
-
-  const handleBlurCapture = (event: React.FocusEvent) => {
-    // Only close if focus moves outside `<Datepicker>` and its subcomponents
-    if (!datepickerRef.current?.contains(event.relatedTarget as Node))
-      setIsOpen(false);
-  };
-
-  const baseStyle = css`
-    position: relative;
-    width: max-content;
-    user-select: none;
-
-    &:focus-visible,
-    &:focus-within {
-      box-shadow: ${theme.boxShadow.focus};
-      outline: none;
-    }
-  `;
-
-  const style = cx(baseStyle, className);
-
-  return (
-    <div
-      className={style}
-      ref={datepickerRef}
-      onFocus={handleOnFocus}
-      onBlurCapture={handleBlurCapture}
-      onKeyDown={handleKeyDown}
-      tabIndex={0}
-      data-testid={testId}
-    >
-      <DateField
-        date={date}
-        onChange={onDateChange}
-        testId={testId}
-      />
-      {isOpen && (
-        <CalendarMenu
-          date={date}
-          setDate={onDateChange}
-          onDatePick={handleDatePick}
-          events={events}
-          showAcademicWeeks={showAcademicWeeks}
-          academicWeeks={academicWeeks}
-          testId={testId}
-        />
-      )}
-    </div>
-  );
+  }
 };
 
-export default memo(Datepicker);
+export default Datepicker;

package/lib/components/Datepicker/Datepicker.types.ts

@@ -1,9 +1,38 @@
-// Used to display EventDots inside `<Day>` component
-export type CalendarEvent = {
-  date: string; // Date string in YYYY-MM-DD format
-};
-
-export type AcademicWeek = {
-  start: string; // Date string in YYYY-MM-DD format
-  number: number;
-};
+import type { InputHTMLAttributes, HTMLAttributes, RefObject } from 'react';
+import type { CalendarEvent, AcademicWeek } from '../Calendar';
+
+export type DatepickerValue = Date | null;
+
+interface BaseDatepickerProps {
+  value?: DatepickerValue;
+  onValueChange?: (
+    value: DatepickerValue,
+    event?: React.SyntheticEvent
+  ) => void;
+  minDate?: string | null; // ISO date string: YYYY-MM-DD
+  maxDate?: string | null; // ISO date string: YYYY-MM-DD
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  disabled?: boolean;
+  ref?: RefObject<HTMLDivElement>;
+  inputRef?: RefObject<HTMLInputElement>;
+}
+
+// Valid HTML attributes for <input type="date">
+type NativeDatepickerAttributeProps = Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  // Remove shared 'top-level' & handled props
+  'value' | 'onChange' | 'min' | 'max' | 'className' | 'disabled'
+>;
+
+// `className?: string` is received automatically from `HTMLAttributes<HTMLDivElement>`
+export interface DatepickerProps
+  extends BaseDatepickerProps,
+    HTMLAttributes<HTMLDivElement> {
+  native?: boolean;
+  // Attached as a nested object
+  nativeHTMLAttributes?: NativeDatepickerAttributeProps;
+  nativeRef?: RefObject<HTMLInputElement>;
+}

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

@@ -1,147 +1,88 @@
-import {
-  describe,
-  test,
-  expect,
-  vi,
-  afterEach,
-  beforeAll,
-  afterAll,
-} from 'vitest';
-import {
-  render,
-  screen,
-  fireEvent,
-  cleanup,
-} from '@testing-library/react';
+import { describe, test, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { ThemeContextProvider } from '../../../theme';
-import Datepicker from '../Datepicker';
+import Datepicker from '..';
+
+const defaultTestId = 'ucl-uikit-datepicker';
 
 const customRender = (ui: React.ReactElement) => {
   return render(ui, {
     wrapper: ({ children }) => (
-      <ThemeContextProvider>
-        {children}
-      </ThemeContextProvider>
+      <ThemeContextProvider>{children}</ThemeContextProvider>
     ),
   });
 };
 
 describe('Datepicker', () => {
-  beforeAll(() => {
-    // Snapshot tests will fail because the Calendar Grid includes styling for "today's date".
-    // Therefore, we need to use Vitest to mock the current date.
-    vi.useFakeTimers();
-    vi.setSystemTime(new Date('2025-03-10')); // Arbitrary fixed date -- Alex's birthday :)
-  });
-
-  afterAll(() => {
-    vi.useRealTimers();
-  });
-
-  afterEach(() => {
-    cleanup();
-    vi.resetAllMocks();
-  });
+  // Snapshot tests
 
   test('Snapshot: no date provided', () => {
-    const renderResult = customRender(
-      <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-      />
-    );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    const renderResult = customRender(<Datepicker />);
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: date provided', () => {
+  test('Snapshot: with date provided', () => {
     const renderResult = customRender(
-      <Datepicker
-        date={new Date('2025-02-04')}
-        onDateChange={vi.fn()}
-      />
+      <Datepicker value={new Date('2025-03-10')} />
     );
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('Snapshot: with :focus & date provided', () => {
-    const testId = 'abc';
-    const renderResult = customRender(
-      <Datepicker
-        date={new Date('2025-02-04')}
-        onDateChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    fireEvent.focus(dateField);
-    expect(
-      renderResult.container.firstChild
-    ).toMatchSnapshot();
+  // Unit tests
+
+  test('Can be found via default test ID', () => {
+    customRender(<Datepicker />);
+    const datepicker = screen.getByTestId(defaultTestId);
+    expect(datepicker).toBeInTheDocument();
   });
 
-  test('Renders without crashing', () => {
-    const testId = 'abc';
-    customRender(
-      <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
-      />
-    );
-    const datepicker = screen.getByTestId(testId);
+  test('Can be found via custom test id', () => {
+    const customTestId = '123';
+    customRender(<Datepicker testId={customTestId} />);
+    const datepicker = screen.getByTestId(customTestId);
     expect(datepicker).toBeInTheDocument();
   });
 
-  test('Calendar Menu appears on :focus', () => {
-    const testId = 'abc';
+  test('Input value reflects the date', () => {
+    customRender(<Datepicker value={new Date('2025-03-10')} />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+    expect(input).toHaveValue('10/03/2025');
+  });
+
+  test('Calendar appears on input focus', async () => {
+    customRender(<Datepicker />);
+    const input = screen.getByTestId('ucl-uikit-datepicker__input');
+
+    // Calendar should not be visible initially
+    expect(screen.queryByTestId('ucl-uikit-calendar')).not.toBeInTheDocument();
+
+    fireEvent.focus(input);
+
+    // Calendar should now be visible
+    expect(screen.getByTestId('ucl-uikit-calendar')).toBeInTheDocument();
+  });
+
+  test('value after minDate is set to null automatically', () => {
+    const onValueChange = vi.fn();
     customRender(
       <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
+        value={new Date('2025-01-10')} // Before minDate
+        minDate='2025-02-01'
+        onValueChange={onValueChange}
       />
     );
-    let calendarMenu = screen.queryByTestId(
-      testId + '-calendar-menu'
-    );
-    expect(calendarMenu).not.toBeInTheDocument();
-    const dateField = screen.getByTestId(testId);
-    fireEvent.focus(dateField);
-    calendarMenu = screen.getByTestId(
-      testId + '-calendar-menu'
-    );
-    expect(calendarMenu).toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith(null);
   });
 
-  test('Calendar Menu disappears on :blur', () => {
-    const testId = 'abc';
+  test('value after maxDate is set to null automatically', () => {
+    const onValueChange = vi.fn();
     customRender(
       <Datepicker
-        date={null}
-        onDateChange={vi.fn()}
-        testId={testId}
+        value={new Date('2025-03-10')} // After maxDate
+        maxDate='2025-01-31'
+        onValueChange={onValueChange}
       />
     );
-    const dateField = screen.getByTestId(
-      testId + '-date-field'
-    );
-    fireEvent.focus(dateField);
-    let calendarMenu = screen.getByTestId(
-      testId + '-calendar-menu'
-    ) as HTMLElement | null;
-    expect(calendarMenu).toBeInTheDocument();
-    fireEvent.blur(dateField);
-    calendarMenu = screen.queryByTestId(
-      testId + '-calendar-menu'
-    ) as HTMLElement | null;
-    expect(calendarMenu).not.toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith(null);
   });
-
-  // Additonal tests can be added here
 });