uikit-react-public 0.11.20 → 0.14.21

package/lib/components/Datepicker/index.ts

@@ -1,3 +1,2 @@
 export { default } from './Datepicker';
-export type { DatepickerProps } from './Datepicker';
-export type { CalendarEvent, AcademicWeek } from './Datepicker.types';
+export type { DatepickerProps } from './Datepicker.types';

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

@@ -0,0 +1,209 @@
+import { useRef, useEffect, useState, useCallback } from 'react';
+import { css, cx } from '@emotion/css';
+import { VisibleField, Panel } from '.';
+import { Calendar } from '../..';
+import { parseInputValue } from '../utils';
+import type { DatepickerValue } from '../Datepicker.types';
+import type { CalendarEvent, AcademicWeek } from '../../Calendar';
+
+interface CustomDatepickerProps extends React.HTMLAttributes<HTMLDivElement> {
+  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
+  disabled?: boolean;
+  events?: CalendarEvent[];
+  showAcademicWeeks?: boolean;
+  academicWeeks?: AcademicWeek[];
+  testId?: string;
+  ref?: React.RefObject<HTMLDivElement>;
+  inputRef?: React.RefObject<HTMLInputElement>;
+}
+
+const NAME = 'ucl-uikit-datepicker';
+
+const CustomDatepicker = ({
+  value = null,
+  onValueChange = () => {},
+  minDate,
+  maxDate,
+  disabled = false,
+  events,
+  showAcademicWeeks,
+  academicWeeks = [],
+  testId = NAME,
+  className,
+  ref,
+  inputRef,
+  ...props
+}: CustomDatepickerProps) => {
+  if (value && isNaN(value.getTime())) {
+    console.warn('CustomDatepicker: value is invalid, defaulting to null');
+    value = null;
+  }
+
+  const internalRef = useRef<HTMLDivElement>(null);
+  const effectiveRef = ref || internalRef;
+  const internalInputRef = useRef<HTMLInputElement>(null);
+  const effectiveInputRef = inputRef || internalInputRef;
+
+  const [panelOpen, setPanelOpen] = useState(false);
+
+  // Derived props (tidier than using `date?.getDate()`, etc, everywhere.)
+  const day = value?.getDate().toString().padStart(2, '0') ?? '';
+  const month = value ? (value.getMonth() + 1).toString().padStart(2, '0') : '';
+  const year = value?.getFullYear().toString() ?? '';
+  const formattedDateString = value ? `${day}/${month}/${year}` : '';
+
+  const [inputValue, setInputValue] = useState(formattedDateString);
+
+  const resetField = useCallback(() => {
+    setInputValue(formattedDateString);
+  }, [setInputValue, formattedDateString]);
+
+  useEffect(() => {
+    // Reset the input field when the value changes.
+    resetField();
+  }, [value, resetField]);
+
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setInputValue(event.target.value);
+  };
+
+  const handleParseInput = (event: React.SyntheticEvent) => {
+    // `parseInputValue` checks the date is valid and within min/max range.
+    const parseDate = parseInputValue(inputValue, minDate, maxDate);
+    if (parseDate) {
+      onValueChange(parseDate, event);
+    } else {
+      resetField();
+    }
+  };
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleParseInput(event);
+    } else if (event.key === 'Escape') {
+      resetField();
+      effectiveInputRef.current?.blur();
+      setPanelOpen(false);
+    } else if (event.key === 'Tab') {
+      resetField();
+      setPanelOpen(false);
+    }
+  };
+
+  // If `value` is out of range, automatically set it to null.
+  // This is validation to prevent parent components passing invalid dates.
+  useEffect(() => {
+    const isDateOutOfRange = (date: Date | null): boolean => {
+      if (!date) return false;
+
+      const normaliseDate = (date: Date) => {
+        date.setHours(0, 0, 0, 0); // Normalize to UTC midnight to avoid time zone issues
+        return date;
+      };
+
+      const parsedMinDate = minDate ? normaliseDate(new Date(minDate)) : null;
+      const parsedMaxDate = maxDate ? normaliseDate(new Date(maxDate)) : null;
+      const normalisedDate = normaliseDate(date);
+
+      if (parsedMinDate && normalisedDate < parsedMinDate) return true;
+      if (parsedMaxDate && normalisedDate > parsedMaxDate) return true;
+      return false;
+    };
+
+    if (value && isDateOutOfRange(value)) {
+      console.warn('CustomDatepicker: value is out of range, setting to null');
+      onValueChange(null);
+    }
+  }, [value, minDate, maxDate, onValueChange]);
+
+  // Close the panel & reset the input field if we click away.
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        effectiveRef.current &&
+        !effectiveRef.current.contains(event.target as Node)
+      ) {
+        setPanelOpen(false);
+        resetField();
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [effectiveRef, setPanelOpen, resetField]);
+
+  useEffect(() => {
+    // Close the panel if the <Datepicker> becomes disabled
+    if (disabled && panelOpen) setPanelOpen(false);
+  }, [disabled, panelOpen]);
+
+  const handlePickCalendarDate = (
+    date: Date | null,
+    event?: React.SyntheticEvent
+  ) => {
+    if (onValueChange) {
+      onValueChange(date, event);
+    }
+    setPanelOpen(false);
+  };
+
+  const handleShowPanel = () => {
+    if (disabled) return;
+    setPanelOpen(true);
+  };
+
+  const handleTogglePanel = () => {
+    if (disabled) return;
+    setPanelOpen((prev) => !prev);
+  };
+
+  const baseStyle = css`
+    width: 196px;
+    height: 48px;
+    box-sizing: border-box;
+    position: relative;
+  `;
+
+  const style = cx(NAME, className, baseStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={testId}
+      ref={effectiveRef}
+      {...props}
+    >
+      <VisibleField
+        inputValue={inputValue}
+        onInputChange={handleInputChange}
+        onInputKeyDown={handleInputKeyDown}
+        onInputFocus={handleShowPanel}
+        onButtonClick={handleTogglePanel}
+        disabled={disabled}
+        inputRef={effectiveInputRef}
+      />
+      {panelOpen && (
+        <Panel>
+          <Calendar
+            pickedDate={value}
+            onDatePick={handlePickCalendarDate}
+            minDate={minDate}
+            maxDate={maxDate}
+            events={events}
+            showAcademicWeeks={showAcademicWeeks}
+            academicWeeks={academicWeeks}
+          />
+        </Panel>
+      )}
+    </div>
+  );
+};
+
+export default CustomDatepicker;

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

@@ -0,0 +1,74 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../../theme';
+
+interface DatepickerInputProps {
+  value: string;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onFocus: () => void;
+  disabled: boolean;
+  ref: React.RefObject<HTMLInputElement | null>;
+}
+
+const NAME = 'ucl-uikit-datepicker__input';
+
+const DatepickerInput = ({
+  value,
+  onChange,
+  onKeyDown,
+  onFocus,
+  disabled,
+  ref,
+}: DatepickerInputProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    width: 100%;
+    height: 100%;
+    padding: 0 0 0 16px;
+    border: none;
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    letter-spacing: 1px;
+    caret-color: ${theme.color.text.primary};
+
+    &:focus {
+      outline: none;
+    }
+
+    &::placeholder {
+      color: #8c8c8c; // TODO: Needs a design token -- Figma says 'color/text/tertiary'
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+
+    &::placeholder {
+      color: ${theme.color.text.disabled};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle);
+
+  return (
+    <input
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      onFocus={onFocus}
+      disabled={disabled}
+      type='text'
+      inputMode='numeric'
+      placeholder='DD/MM/YYYY'
+      className={style}
+      data-testid={NAME}
+      ref={ref}
+      aria-label={`Currently selected date: ${value}`}
+    />
+  );
+};
+
+export default DatepickerInput;

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

@@ -0,0 +1,70 @@
+import { css, cx } from '@emotion/css';
+import { theme } from '../../../theme';
+
+interface NativeDatepickerProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  testId?: string;
+  ref?: React.RefObject<HTMLInputElement>;
+}
+
+const NAME = 'ucl-uikit-datepicker--native';
+
+const NativeDatepicker = ({
+  value,
+  onChange,
+  min,
+  max,
+  className,
+  disabled,
+  testId = NAME,
+  ref,
+  ...props
+}: NativeDatepickerProps) => {
+  const baseStyle = css`
+    width: 196px;
+    height: 48px;
+    box-sizing: border-box;
+    padding: 0 16px;
+    border: 1px solid ${theme.color.neutral.grey60};
+    color: #1a1a1a;
+    font-size: 16px;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+
+    &::placeholder {
+      color: #8c8c8c; // TODO: Needs a design token -- Figma says 'color/text/tertiary'
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+    border-color: ${theme.color.neutral.grey20};
+    cursor: not-allowed;
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle, className);
+
+  return (
+    <input
+      type='date'
+      value={value}
+      onChange={onChange}
+      min={min}
+      max={max}
+      disabled={disabled}
+      className={style}
+      data-testid={testId}
+      ref={ref}
+      {...props}
+    />
+  );
+};
+
+export default NativeDatepicker;

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

@@ -0,0 +1,32 @@
+import { css, cx } from '@emotion/css';
+
+interface PanelProps {
+  zIndex?: number;
+  children: React.ReactNode;
+}
+
+const NAME = 'ucl-uikit-datepicker__panel';
+
+const Panel = ({ zIndex = 10, children }: PanelProps) => {
+  const datepickerHeight = 48;
+  const gapFromDatepicker = 8;
+
+  const baseStyle = css`
+    position: absolute;
+    top: ${datepickerHeight + gapFromDatepicker}px;
+    z-index: ${zIndex};
+  `;
+
+  const style = cx(NAME, baseStyle);
+
+  return (
+    <div
+      data-testid={NAME}
+      className={style}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default Panel;

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

@@ -0,0 +1,104 @@
+import { css, cx } from '@emotion/css';
+import { DatepickerInput } from './';
+import { Icon } from '../../..';
+import { useTheme } from '../../../theme';
+import React from 'react';
+
+interface VisibleFieldProps {
+  inputValue: string;
+  onInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  onInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  onInputFocus: () => void;
+  onButtonClick: () => void;
+  disabled: boolean;
+  inputRef: React.RefObject<HTMLInputElement | null>;
+}
+
+const NAME = 'ucl-uikit-datepicker__visible-field';
+
+const VisibleField = ({
+  inputValue,
+  onInputChange,
+  onInputKeyDown,
+  onInputFocus,
+  onButtonClick,
+  disabled,
+  inputRef,
+}: VisibleFieldProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    border: 1px solid ${theme.color.neutral.grey60};
+    background-color: ${theme.color.neutral.white};
+
+    &:focus-within {
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const disabledStyle = css`
+    color: ${theme.color.text.disabled};
+    background-color: ${theme.color.neutral.white};
+    border-color: ${theme.color.neutral.grey20};
+
+    cursor: not-allowed;
+    // And child elements
+    & * {
+      cursor: not-allowed;
+    }
+  `;
+
+  // The container for the <Icon.Calendar> is a <div> not an <IconButton>,
+  // so that the orange border only appears when the input has focus and the user can type.
+  // The container increases the clickable area of the icon.
+  const iconButtonStyle = css`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 16px 0 4px;
+    height: 100%;
+    cursor: pointer;
+  `;
+
+  // `min-width` here accounts for a recurring problem,
+  // in which icons shrink when horizontal space is limited.
+  // TODO: This ought to be fixed in the <Icon> component itself.
+  const iconStyle = css`
+    min-width: 24px;
+    color: ${disabled
+      ? theme.color.text.disabled
+      : '#8C8C8C'}; // TODO: Needs a design token
+  `;
+
+  const style = cx(NAME, baseStyle, disabled && disabledStyle);
+
+  return (
+    <div
+      className={style}
+      data-testid={NAME}
+    >
+      <DatepickerInput
+        value={inputValue}
+        onChange={onInputChange}
+        onKeyDown={onInputKeyDown}
+        onFocus={onInputFocus}
+        disabled={disabled}
+        ref={inputRef}
+      />
+      <div
+        onClick={onButtonClick}
+        className={iconButtonStyle}
+      >
+        <Icon.Calendar className={iconStyle} />
+      </div>
+    </div>
+  );
+};
+
+export default VisibleField;

package/lib/components/Datepicker/subcomponents/index.ts

@@ -1,7 +1,5 @@
-export { default as CalendarGrid } from './CalendarGrid';
-export { default as CalendarMenu } from './CalendarMenu';
-export { default as ColumnHeadings } from './ColumnHeadings';
-export { default as DateField } from './DateField';
-export { default as Day } from './Day';
-export { default as Native } from './Native';
-export { default as MonthSelector } from './MonthSelector';
+export { default as CustomDatepicker } from './CustomDatepicker';
+export { default as NativeDatepicker } from './NativeDatepicker';
+export { default as VisibleField } from './VisibleField';
+export { default as DatepickerInput } from './DatepickerInput';
+export { default as Panel } from './Panel';

package/lib/components/Datepicker/utils/dateToLocaleISOString/dateToLocaleISOString.test.ts

@@ -0,0 +1,32 @@
+import { describe, expect, test } from 'vitest';
+import dateToLocaleISOString from './dateToLocaleISOString';
+
+describe('dateToLocaleISOString', () => {
+  test('Should return null if the date is null', () => {
+    expect(dateToLocaleISOString(null)).toBeNull();
+  });
+
+  test('Should return null if the date is undefined', () => {
+    expect(dateToLocaleISOString(undefined)).toBeNull();
+  });
+
+  test('Should return a YYYY-MM-DD string for a valid date', () => {
+    const date = new Date('2025-06-28');
+    expect(dateToLocaleISOString(date)).toBe('2025-06-28');
+  });
+
+  test('Should handle dates explicitly set to midnight', () => {
+    const date = new Date('2025-01-01T00:00:00');
+    expect(dateToLocaleISOString(date)).toBe('2025-01-01');
+  });
+
+  test('Should handle dates explicitly set just before the end of the day', () => {
+    const date = new Date('2025-12-31T23:59:59');
+    expect(dateToLocaleISOString(date)).toBe('2025-12-31');
+  });
+
+  test('Should correctly format a leap day', () => {
+    const date = new Date('2024-02-29');
+    expect(dateToLocaleISOString(date)).toBe('2024-02-29');
+  });
+});

package/lib/components/Datepicker/utils/dateToLocaleISOString/dateToLocaleISOString.ts

@@ -0,0 +1,23 @@
+/**
+ * Converts a Date object to a `YYYY-MM-DD` string based on the user's local timezone.
+ *
+ * Used for passing dates to <NativeDatepicker> in `Datepicker.tsx`
+ *
+ * This function uses the Swedish (`sv-SE`) locale with `toLocaleDateString`
+ * as it conveniently defaults to the ISO 8601 `YYYY-MM-DD` format, while respecting
+ * the local date. This avoids timezone conversion issues that can arise from
+ * using `toISOString()`.
+ *
+ * This implementation should handle daylight saving time, etc, correctly.
+ *
+ * @param date The date to convert.
+ * @returns A string in `YYYY-MM-DD` format, or `null` if the input is `null`.
+ */
+const dateToLocaleISOString = (
+  date: Date | null | undefined
+): string | null => {
+  if (!date) return null;
+  return date.toLocaleDateString('sv-SE');
+};
+
+export default dateToLocaleISOString;

package/lib/components/Datepicker/utils/index.ts

@@ -1,3 +1,2 @@
-export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';
-export { default as parseDate } from './parseDateForDateField/parseDateForDateField';
-export { default as getAcademicWeekNumbers } from './getAcademicWeekNumbers/getAcademicWeekNumbers';
+export { default as dateToLocaleISOString } from './dateToLocaleISOString/dateToLocaleISOString';
+export { default as parseInputValue } from './parseInputValue/parseInputValue';

package/lib/components/Datepicker/utils/parseInputValue/parseInputValue.test.ts

@@ -0,0 +1,110 @@
+import { describe, expect, test } from 'vitest';
+import parseInputValue from './parseInputValue';
+
+describe('parseInputValue', () => {
+  test('Returns a date from an expected string format', () => {
+    const dateWithSlashes = parseInputValue('01/03/2025') as Date;
+    expect(dateWithSlashes).toBeInstanceOf(Date);
+    expect(dateWithSlashes.getFullYear()).toBe(2025);
+    expect(dateWithSlashes.getMonth()).toBe(2); // March is month 2 (0-indexed)
+    expect(dateWithSlashes.getDate()).toBe(1);
+
+    const dateWithDashes = parseInputValue('11-06-2026') as Date;
+    expect(dateWithDashes).toBeInstanceOf(Date);
+    expect(dateWithDashes.getFullYear()).toBe(2026);
+    expect(dateWithDashes.getMonth()).toBe(5); // June is month 5 (0-indexed)
+    expect(dateWithDashes.getDate()).toBe(11);
+
+    const dateWithSpaces = parseInputValue('12 10 2027') as Date;
+    expect(dateWithSpaces).toBeInstanceOf(Date);
+    expect(dateWithSpaces.getFullYear()).toBe(2027);
+    expect(dateWithSpaces.getMonth()).toBe(9); // October is month 9 (0-indexed)
+    expect(dateWithSpaces.getDate()).toBe(12);
+  });
+
+  test('Returns null for invalid date strings', () => {
+    expect(parseInputValue('invalid-date')).toBeNull();
+    expect(parseInputValue('')).toBeNull(); // Empty string
+    expect(parseInputValue('      ')).toBeNull(); // Just white space
+  });
+
+  test('Handles single-digit days and months correctly', () => {
+    const dateWithSingleDigit = parseInputValue('1/2/2023') as Date;
+    expect(dateWithSingleDigit).toBeInstanceOf(Date);
+    expect(dateWithSingleDigit.getFullYear()).toBe(2023);
+    expect(dateWithSingleDigit.getMonth()).toBe(1); // February is month 1 (0-indexed)
+    expect(dateWithSingleDigit.getDate()).toBe(1);
+  });
+
+  test('Rejects dates before minDate', () => {
+    const minDate1 = '2020-01-01';
+    const dateBeforeMin1 = parseInputValue('31/12/2019', minDate1) as Date;
+    expect(dateBeforeMin1).toBeNull();
+
+    const minDate2 = '2020-06-15';
+    const dateBeforeMin2 = parseInputValue('14/06/2020', minDate2) as Date;
+    expect(dateBeforeMin2).toBeNull();
+  });
+
+  test('Rejects dates after maxDate', () => {
+    const maxDate = '2025-12-31';
+    const dateAfterMax = parseInputValue(
+      '01/01/2026',
+      undefined,
+      maxDate
+    ) as Date;
+    expect(dateAfterMax).toBeNull();
+
+    const maxDate2 = '2023-06-15';
+    const dateAfterMax2 = parseInputValue(
+      '16/06/2023',
+      undefined,
+      maxDate2
+    ) as Date;
+    expect(dateAfterMax2).toBeNull();
+  });
+
+  test('Accepts dates within minDate and maxDate range', () => {
+    const minDate1 = '2020-01-01';
+    const maxDate1 = '2025-12-31';
+    const validDate1 = parseInputValue(
+      '15/06/2023',
+      minDate1,
+      maxDate1
+    ) as Date;
+    expect(validDate1).toBeInstanceOf(Date);
+    expect(validDate1.getFullYear()).toBe(2023);
+    expect(validDate1.getMonth()).toBe(5); // June is month 5 (0-indexed)
+    expect(validDate1.getDate()).toBe(15);
+
+    const minDate2 = '2025-06-01';
+    const maxDate2 = '2025-06-30';
+    const validDate2 = parseInputValue(
+      '15/06/2025',
+      minDate2,
+      maxDate2
+    ) as Date;
+    expect(validDate2).toBeInstanceOf(Date);
+    expect(validDate2.getFullYear()).toBe(2025);
+    expect(validDate2.getMonth()).toBe(5); // June is month 5 (0-indexed)
+    expect(validDate2.getDate()).toBe(15);
+  });
+
+  test('Accepts dates after minDate without maxDate', () => {
+    const minDate = '2020-01-01';
+    const validDate = parseInputValue('15/06/2023', minDate) as Date;
+    expect(validDate).toBeInstanceOf(Date);
+    expect(validDate.getFullYear()).toBe(2023);
+    expect(validDate.getMonth()).toBe(5); // June is month 5 (0-indexed)
+    expect(validDate.getDate()).toBe(15);
+  });
+
+  test('Accepts dates before maxDate without minDate', () => {
+    const maxDate = '2025-12-31';
+    const validDate = parseInputValue('15/06/2025', undefined, maxDate) as Date;
+    expect(validDate).toBeInstanceOf(Date);
+    expect(validDate.getFullYear()).toBe(2025);
+    expect(validDate.getMonth()).toBe(5); // June is month 5 (0-indexed)
+    expect(validDate.getDate()).toBe(15);
+  });
+});