uikit-react-public 0.11.13

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

@@ -0,0 +1,70 @@
+import { css } from '@emotion/css';
+import { Icon } from '../../..';
+import { useTheme } from '../../../../theme';
+
+interface MonthSelectorProps {
+  date: Date | null | undefined;
+  changeMonth: (change: number) => void;
+}
+
+const MonthSelector = ({
+  date,
+  changeMonth,
+}: MonthSelectorProps) => {
+  const [theme] = useTheme();
+
+  const baseStyle = css`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: 30px;
+  `;
+
+  const monthAndYearStyle = css`
+    display: flex;
+    gap: 8px;
+    font-family: ${theme.font.family.primary};
+    font-weight: 700;
+    user-select: none;
+  `;
+
+  const chevronIconStyle = css`
+    cursor: pointer;
+
+    &:hover {
+      color: ${theme.color.neutral.grey60};
+    }
+  `;
+
+  return (
+    <div className={baseStyle}>
+      <Icon.ChevronLeft
+        className={chevronIconStyle}
+        onClick={() => changeMonth(-1)}
+      />
+      <span className={monthAndYearStyle}>
+        <span>
+          {date
+            ? date.toLocaleDateString('default', {
+                month: 'long',
+              })
+            : new Date().toLocaleDateString('default', {
+                month: 'long',
+              })}
+        </span>
+        <span>
+          {date
+            ? date.getFullYear()
+            : new Date().getFullYear()}
+        </span>
+      </span>
+      <Icon.ChevronRight
+        className={chevronIconStyle}
+        onClick={() => changeMonth(1)}
+      />
+    </div>
+  );
+};
+
+export default MonthSelector;

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

@@ -0,0 +1 @@
+export { default } from './MonthSelector';

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

@@ -0,0 +1,59 @@
+import { css } from '@emotion/css';
+import { theme } from '../../../../theme';
+
+interface NativeProps {
+  date?: Date | null | undefined;
+  minDate?: Date | null | undefined;
+  maxDate?: Date | null | undefined;
+  onDateChange?: (date: Date | null | undefined) => void;
+  testId?: string;
+}
+
+const Native = ({
+  date,
+  minDate,
+  maxDate,
+  onDateChange,
+  testId,
+  ...props
+}: NativeProps) => {
+  const inputStyle = css`
+    width: 200px;
+    height: 48px;
+    padding: 0 16px;
+    border: 1px solid #000;
+    color: #1a1a1a;
+    font-size: 16px;
+    font-family: sans-serif;
+    text-transform: uppercase;
+    cursor: pointer;
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: ${theme.boxShadow.focus};
+    }
+  `;
+
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => onDateChange?.(event.target.valueAsDate);
+
+  return (
+    <input
+      type='date'
+      value={date ? date.toISOString().split('T')[0] : ''}
+      min={
+        minDate ? minDate.toISOString().split('T')[0] : ''
+      }
+      max={
+        maxDate ? maxDate.toISOString().split('T')[0] : ''
+      }
+      onChange={handleChange}
+      className={inputStyle}
+      data-testid={testId}
+      {...props}
+    />
+  );
+};
+
+export default Native;

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

@@ -0,0 +1 @@
+export { default } from './Native';

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

@@ -0,0 +1,7 @@
+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';

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

@@ -0,0 +1,166 @@
+import { describe, expect, test } from 'vitest';
+import getDatesForCalendarGrid from './getDatesForCalendarGrid';
+
+describe('getDatesForCalendarGrid', () => {
+  test('Returns an array of Date objects', () => {
+    const result = getDatesForCalendarGrid(new Date());
+    expect(
+      result.every((date) => date instanceof Date)
+    ).toBe(true);
+  });
+
+  test('Throws an error if no date is provided', () => {
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid()).toThrowError(
+      'No date provided'
+    );
+    expect(() =>
+      // @ts-expect-error - Expected behaviour is an error to be thrown
+      getDatesForCalendarGrid(null)
+    ).toThrowError('No date provided');
+    expect(() =>
+      // @ts-expect-error - Expected behaviour is an error to be thrown
+      getDatesForCalendarGrid(undefined)
+    ).toThrowError('No date provided');
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid('')).toThrowError(
+      'No date provided'
+    );
+    // @ts-expect-error - Expected behaviour is an error to be thrown
+    expect(() => getDatesForCalendarGrid(0)).toThrowError(
+      'No date provided'
+    );
+    expect(() =>
+      // @ts-expect-error - Expected behaviour is an error to be thrown
+      getDatesForCalendarGrid('1st of March')
+    ).toThrowError('No date provided');
+  });
+
+  test('Total dates returned are always divisible by 7', () => {
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 1, 1)).length %
+        7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 2, 5)).length %
+        7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 3, 15))
+        .length % 7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 4, 20))
+        .length % 7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 5, 25))
+        .length % 7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 6, 30))
+        .length % 7
+    ).toBe(0);
+    expect(
+      getDatesForCalendarGrid(new Date(2025, 12, 0))
+        .length % 7
+    ).toBe(0);
+  });
+
+  test('If date is in Jan 2025, returns all dates in January 2024', () => {
+    const date = new Date(2025, 0, 1);
+    const result = getDatesForCalendarGrid(date);
+    const janDates = [];
+    for (let i = 1; i <= 31; i++)
+      janDates.push(new Date(2025, 0, i));
+    janDates.forEach((dateInJan) => {
+      expect(result).toContainEqual(dateInJan);
+    });
+  });
+
+  test('If date is in Jan 2025, returns 30th & 31st Dec 2024 at the start', () => {
+    const date = new Date(2025, 0, 1);
+    const result = getDatesForCalendarGrid(date);
+    expect(result[0]).toEqual(new Date(2024, 11, 30));
+    expect(result[1]).toEqual(new Date(2024, 11, 31));
+  });
+
+  test('If date is in Jan 2025, returns 1st & 2nd Feb 2025 at the end', () => {
+    const date = new Date(2025, 0, 1);
+    const result = getDatesForCalendarGrid(date);
+    expect(result[result.length - 2]).toEqual(
+      new Date(2025, 1, 1)
+    );
+    expect(result[result.length - 1]).toEqual(
+      new Date(2025, 1, 2)
+    );
+  });
+
+  test('If month starts on a Sunday, the total dates returned are divisible by 7', () => {
+    const date = new Date(2025, 6, 1);
+    const result = getDatesForCalendarGrid(date);
+    expect(result.length % 7).toBe(0);
+  });
+  test('handles February in leap year correctly', () => {
+    const leapYear = new Date(2024, 1, 1); // February 2024
+    const result = getDatesForCalendarGrid(leapYear);
+    const febDates = [];
+    for (let i = 1; i <= 29; i++)
+      febDates.push(new Date(2024, 1, i));
+    febDates.forEach((date) => {
+      expect(result).toContainEqual(date);
+    });
+  });
+
+  test('handles February in non-leap year correctly', () => {
+    const nonLeapYear = new Date(2025, 1, 1); // February 2025
+    const result = getDatesForCalendarGrid(nonLeapYear);
+    const febDates = [];
+    for (let i = 1; i <= 28; i++)
+      febDates.push(new Date(2025, 1, i));
+    febDates.forEach((date) => {
+      expect(result).toContainEqual(date);
+    });
+  });
+
+  test('maintains chronological order of dates', () => {
+    const date = new Date(2025, 3, 1); // April 2025
+    const result = getDatesForCalendarGrid(date);
+    for (let i = 1; i < result.length; i++) {
+      expect(result[i].getTime()).toBeGreaterThan(
+        result[i - 1].getTime()
+      );
+    }
+  });
+
+  test('correctly handles months with 31 days', () => {
+    const date = new Date(2025, 0, 1); // January 2025
+    const result = getDatesForCalendarGrid(date);
+    expect(
+      result.filter((d) => d.getMonth() === 0).length
+    ).toBe(31);
+  });
+
+  test('week always starts with Monday', () => {
+    const dates = [
+      new Date(2025, 0, 1), // January
+      new Date(2025, 1, 1), // February
+      new Date(2025, 2, 1), // March
+      new Date(2025, 3, 1), // April
+    ];
+
+    dates.forEach((date) => {
+      const result = getDatesForCalendarGrid(date);
+      expect(result[0].getDay()).not.toBe(0); // Sunday
+      expect(result[0].getDay()).toBeLessThanOrEqual(6);
+      expect(result[6].getDay()).toBe(0); // First Sunday should be at index 6
+    });
+  });
+
+  test('transition between years is handled correctly', () => {
+    const date = new Date(2025, 11, 31); // December 31, 2025
+    const result = getDatesForCalendarGrid(date);
+    expect(result).toContainEqual(new Date(2026, 0, 1)); // January 1, 2026
+    expect(result).toContainEqual(new Date(2025, 11, 31)); // December 31, 2025
+  });
+});

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

@@ -0,0 +1,109 @@
+/**
+ * Generates an array of dates for a calendar grid, including the current month's dates
+ * and the "grey days" from the previous and next months to complete the grid.
+ * The calendar grid starts on Monday and ends on Sunday.
+ *
+ * @param date - A Date object representing any date in the month for which to generate the calendar grid
+ * @returns An array of Date objects representing all days that should appear in the calendar grid
+ * @throws Will throw an error if no date is provided or if the input is not a Date object
+ *
+ * @example
+ * ```typescript
+ * const date = new Date(2023, 0, 15); // January 15, 2023
+ * const calendarDates = getDatesForCalendarGrid(date);
+ * // Returns array of dates starting from last days of December 2022
+ * // through all of January 2023 and first days of February 2023
+ * // to complete the grid
+ * ```
+ */
+const getDatesForCalendarGrid = (date: Date): Date[] => {
+  if (!date || !(date instanceof Date))
+    throw new Error('No date provided');
+
+  const month = date.getMonth();
+  const daysInMonth = new Date(
+    date.getFullYear(),
+    month + 1,
+    0
+  ).getDate();
+
+  // Get all days in current month
+  const dates: Date[] = [];
+  for (let day = 1; day <= daysInMonth; day++) {
+    const newDate = new Date(
+      date.getFullYear(),
+      month,
+      day
+    );
+    if (newDate.getMonth() !== month) break;
+    dates.push(newDate);
+  }
+
+  // For Monday start, we need to adjust the day calculation:
+  // Sunday (0) should become 6
+  // Monday (1) should become 0
+  // Tuesday (2) should become 1, etc.
+  const adjustDay = (day: number): number =>
+    day === 0 ? 6 : day - 1;
+
+  // Calculate previous month's "grey days"
+  const prevMonthGreyDays = [];
+  const prevMonth = new Date(
+    date.getFullYear(),
+    month - 1,
+    1
+  );
+  const firstDayOfMonth = new Date(
+    date.getFullYear(),
+    month,
+    1
+  ).getDay();
+  const numberOfDaysFromPrevMonth =
+    adjustDay(firstDayOfMonth);
+  const totalDaysInPrevMonth = new Date(
+    date.getFullYear(),
+    month,
+    0
+  ).getDate();
+
+  for (let i = numberOfDaysFromPrevMonth; i > 0; i--) {
+    prevMonthGreyDays.push(
+      new Date(
+        prevMonth.getFullYear(),
+        prevMonth.getMonth(),
+        totalDaysInPrevMonth - i + 1
+      )
+    );
+  }
+
+  // Calculate next month's "grey days"
+  const nextMonthGreyDays = [];
+  const nextMonth = new Date(
+    date.getFullYear(),
+    month + 1,
+    1
+  );
+  const lastDayOfMonth = new Date(
+    date.getFullYear(),
+    month,
+    daysInMonth
+  ).getDay();
+  const numberOfDaysFromNextMonth =
+    6 - adjustDay(lastDayOfMonth);
+
+  for (let i = 1; i <= numberOfDaysFromNextMonth; i++) {
+    nextMonthGreyDays.push(
+      new Date(
+        nextMonth.getFullYear(),
+        nextMonth.getMonth(),
+        i
+      )
+    );
+  }
+
+  dates.unshift(...prevMonthGreyDays);
+  dates.push(...nextMonthGreyDays);
+  return dates;
+};
+
+export default getDatesForCalendarGrid;

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

@@ -0,0 +1,2 @@
+export { default as getDatesForCalendarGrid } from './getDatesForCalendarGrid/getDatesForCalendarGrid';
+export { default as parseDate } from './parseDateForDateField/parseDateForDateField';

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

@@ -0,0 +1,41 @@
+import { describe, expect, test } from 'vitest';
+import parseDateForDateField from './parseDateForDateField';
+
+describe('parseDateForDateField', () => {
+  test('Parses a valid slash-separated date string', () => {
+    const dateString = '02/03/2025';
+    const expectedDate = new Date('2025-03-02');
+    expect(parseDateForDateField(dateString)).toEqual(
+      expectedDate
+    );
+  });
+
+  test('Parses a valid hyphen-separated date string', () => {
+    const dateString = '01-02-2025';
+    const expectedDate = new Date('2025-02-01');
+    expect(parseDateForDateField(dateString)).toEqual(
+      expectedDate
+    );
+  });
+
+  test('Parses a valid space-separated date string', () => {
+    const dateString = '10 11 2025';
+    const expectedDate = new Date('2025-11-10');
+    expect(parseDateForDateField(dateString)).toEqual(
+      expectedDate
+    );
+  });
+
+  test('Parses a valid date string with leading/trailing whitespace', () => {
+    const dateString = '    11-12-2025    ';
+    const expectedDate = new Date('2025-12-11');
+    expect(parseDateForDateField(dateString)).toEqual(
+      expectedDate
+    );
+  });
+
+  test('Invalid date string returns null', () => {
+    const dateString = '1234567890';
+    expect(parseDateForDateField(dateString)).toBeNull();
+  });
+});

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

@@ -0,0 +1,48 @@
+/**
+ * Parses a date string and returns a `Date` object.
+ *
+ * Can handle date strings entered by the user as "day/month/year", "day month year", or "day-month-year".
+ * If the date is not in the expected format or contains invalid numbers, it returns `null`.
+ *
+ * Used solely by `<DateField>` component.
+ *
+ * - A one-digit or two-digit year is assumed to be in the 21st century (e.g., '21' becomes '2021').
+ *
+ * @param {string} dateString - The date string to be parsed.
+ *
+ * @future Any additional validation logic for dates entered by the user should be added here.
+ * For example, supporting formats like "day / month / year" (separated with a space and a slash)
+ * or "daymonthyear" (without spaces or separators).
+ *
+ * @returns {void}
+ */
+const parseDate = (dateString: string) => {
+  // Remove any leading or trailing whitespace and split the string into parts,
+  // separated by a slash, space, or hyphen
+  const dateParts = dateString.trim().split(/[-/ ]/);
+  if (dateParts.length !== 3) {
+    return null;
+  }
+
+  const parsedDay = parseInt(dateParts[0], 10); // (Second argument is just for base 10 -- decimal)
+  const parsedMonth = parseInt(dateParts[1], 10);
+  let parsedYear = parseInt(dateParts[2], 10);
+  if (
+    isNaN(parsedDay) ||
+    isNaN(parsedMonth) ||
+    isNaN(parsedYear)
+  ) {
+    return null;
+  }
+
+  // We can assume a one-digit or two-digit year is in the 21st century
+  if (
+    parsedYear.toString().length === 2 ||
+    parsedYear.toString().length === 1
+  )
+    parsedYear += 2000;
+
+  return new Date(parsedYear, parsedMonth - 1, parsedDay); // month is 0-indexed
+};
+
+export default parseDate;

package/lib/components/Dialog/BaseDialog.tsx

@@ -0,0 +1,163 @@
+import React, {
+  HTMLAttributes,
+  useCallback,
+  memo,
+  useEffect,
+  useRef,
+} from 'react';
+import { css, cx } from '@emotion/css';
+import useTheme from '../../theme/useTheme';
+
+export const NAME = 'ucl-uikit-base-dialog';
+export const SMALL_WIDTH = 495;
+export const MEDIUM_WIDTH = 495;
+export const LARGE_WIDTH = 740;
+
+export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
+  open?: boolean;
+  size?: 'small' | 'medium' | 'large';
+  modal?: boolean;
+  closeOnClickOutside?: boolean;
+  closeOnClickOutsideStopPropagation?: boolean;
+  onClose?: (ev: React.MouseEvent) => void;
+  testId?: string;
+}
+
+const BaseDialog = ({
+  open = false,
+  size = 'medium',
+  modal = true,
+  closeOnClickOutside = true,
+  closeOnClickOutsideStopPropagation = true,
+  onClose,
+  testId = NAME,
+  className,
+  children,
+  ...props
+}: BaseDialogProps) => {
+  const width = {
+    small: SMALL_WIDTH,
+    medium: MEDIUM_WIDTH,
+    large: LARGE_WIDTH,
+  }[size];
+
+  const [theme] = useTheme();
+
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  const hideBodyScroll = css`
+    overflow: hidden;
+  `;
+
+  useEffect(() => {
+    if (open && modal) {
+      document.body.classList.add(hideBodyScroll);
+    } else {
+      document.body.classList.remove(hideBodyScroll);
+    }
+    return () => {
+      document.body.classList.remove(hideBodyScroll);
+    };
+  }, [open, modal, hideBodyScroll]);
+
+  useEffect(() => {
+    const dialogElement = dialogRef.current;
+
+    if (!dialogElement) return;
+
+    if (open && !dialogElement.hasAttribute('open')) {
+      previousActiveElement.current = document.activeElement as HTMLElement;
+      if (modal) {
+        dialogElement.showModal();
+      } else {
+        dialogElement.show();
+      }
+    } else if (!open && dialogElement.hasAttribute('open')) {
+      dialogElement.close();
+      previousActiveElement.current?.focus();
+    }
+  }, [open, modal]);
+
+  const handleClick = useCallback(
+    (ev: React.MouseEvent<HTMLDialogElement>) => {
+      if (closeOnClickOutside && onClose && dialogRef.current) {
+        if (closeOnClickOutsideStopPropagation) {
+          ev.stopPropagation();
+        }
+        const rect = dialogRef.current.getBoundingClientRect();
+        const isInDialog =
+          rect.top <= ev.clientY &&
+          ev.clientY <= rect.top + rect.height &&
+          rect.left <= ev.clientX &&
+          ev.clientX <= rect.left + rect.width;
+        if (!isInDialog) {
+          onClose(ev);
+        }
+      }
+    },
+    [closeOnClickOutside, closeOnClickOutsideStopPropagation, onClose]
+  );
+
+  const handleDialogClose = useCallback(
+    (ev: React.MouseEvent<HTMLDialogElement>) => {
+      if (onClose) {
+        onClose(ev);
+      }
+    },
+    [onClose]
+  );
+
+  const baseStyle = css`
+    padding: 0;
+    border: none;
+    background: ${theme.color.neutral.white};
+    color: ${theme.color.text.primary};
+    font-family: ${theme.font.family.primary};
+    font-size: ${theme.font.size.f16};
+    width: 100vw;
+    height: 100vh;
+    margin: auto;
+
+    &:modal {
+      max-width: none;
+      max-height: none;
+    }
+
+    @media (min-width: ${theme.breakpoints.tablet}px) {
+      width: ${width}px;
+      max-width: calc(100vw - ${theme.margin.m16}px);
+      height: fit-content;
+
+      &:modal {
+        max-width: ${MEDIUM_WIDTH}px;
+        max-height: calc(100vh - 32px);
+      }
+    }
+
+    &::backdrop {
+      background-color: ${theme.color.overlay.blanket};
+    }
+  `;
+
+  const style = cx(NAME, baseStyle, className);
+
+  if (open) {
+    return (
+      <dialog
+        ref={dialogRef}
+        className={style}
+        data-testid={testId}
+        onClick={handleClick}
+        onClose={handleDialogClose}
+        {...props}
+      >
+        {children}
+      </dialog>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default memo(BaseDialog);