uikit-react-public 0.11.20 → 0.14.21

package/lib/hooks/useFocusTrap.ts

@@ -0,0 +1,123 @@
+// Generated with Claude Sonnet 4
+
+import { useEffect, useCallback, useRef } from 'react';
+
+// Selector for focusable elements
+const FOCUSABLE_ELEMENTS = [
+  'a[href]',
+  'button:not([disabled])',
+  'textarea:not([disabled])',
+  'input:not([disabled])',
+  'select:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+  '[contenteditable="true"]',
+  'audio[controls]',
+  'video[controls]',
+  'details > summary:first-of-type',
+].join(', ');
+
+interface UseFocusTrapOptions {
+  isActive: boolean;
+  containerRef: React.RefObject<HTMLElement | null>;
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  finalFocusRef?: React.RefObject<HTMLElement>;
+  restoreFocus?: boolean;
+}
+
+export const useFocusTrap = ({
+  isActive,
+  containerRef,
+  initialFocusRef,
+  finalFocusRef,
+  restoreFocus = true,
+}: UseFocusTrapOptions) => {
+  const previousActiveElement = useRef<HTMLElement | null>(null);
+
+  // Get all focusable elements within the container
+  const getFocusableElements = useCallback((): HTMLElement[] => {
+    if (!containerRef.current) return [];
+
+    const elements = containerRef.current.querySelectorAll(FOCUSABLE_ELEMENTS);
+    return Array.from(elements) as HTMLElement[];
+  }, [containerRef]);
+
+  // Handle tab key navigation
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (!isActive || event.key !== 'Tab') return;
+
+      const focusableElements = getFocusableElements();
+      if (focusableElements.length === 0) {
+        event.preventDefault();
+        return;
+      }
+
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      const currentFocus = document.activeElement as HTMLElement;
+
+      if (event.shiftKey) {
+        // Shift + Tab (moving backwards)
+        if (
+          currentFocus === firstElement ||
+          !containerRef.current?.contains(currentFocus)
+        ) {
+          event.preventDefault();
+          lastElement.focus();
+        }
+      } else {
+        // Tab (moving forwards)
+        if (
+          currentFocus === lastElement ||
+          !containerRef.current?.contains(currentFocus)
+        ) {
+          event.preventDefault();
+          firstElement.focus();
+        }
+      }
+    },
+    [isActive, getFocusableElements, containerRef]
+  );
+
+  // Set initial focus when trap becomes active
+  useEffect(() => {
+    if (!isActive) return;
+
+    // Store the previously focused element
+    previousActiveElement.current = document.activeElement as HTMLElement;
+
+    // Focus the specified initial element or the first focusable element
+    const focusElement = initialFocusRef?.current || getFocusableElements()[0];
+    if (focusElement) {
+      // Use setTimeout to ensure the element is rendered and focusable
+      setTimeout(() => focusElement.focus(), 0);
+    }
+
+    // Add event listener for keyboard navigation
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [isActive, initialFocusRef, getFocusableElements, handleKeyDown]);
+
+  // Restore focus when trap becomes inactive
+  useEffect(() => {
+    if (isActive) return; // Only run when becoming inactive
+
+    if (restoreFocus && previousActiveElement.current) {
+      // Use setTimeout to ensure the dialog is fully closed before restoring focus
+      const restoreTimeout = setTimeout(() => {
+        const elementToFocus =
+          finalFocusRef?.current || previousActiveElement.current;
+        if (elementToFocus && document.contains(elementToFocus)) {
+          elementToFocus.focus();
+        }
+        // Clear the stored element after restoring focus
+        previousActiveElement.current = null;
+      }, 100); // Longer delay for native dialog close
+
+      return () => clearTimeout(restoreTimeout);
+    }
+  }, [isActive, finalFocusRef, restoreFocus]);
+};

package/lib/index.ts

@@ -1,3 +1,4 @@
 export { cx, css } from '@emotion/css';
 export * from './components';
 export * from './theme';
+export * from './hooks';

package/lib/theme/defaultTheme.ts

@@ -47,6 +47,7 @@ const pink20 = '#DEB8C3'; // UCL vibrant pink
 const black100 = '#000000';
 const black90 = '#1A1A1A';
 const black80 = '#333333';
+const black70 = '#4D4D4D';
 const black60 = '#666666';
 const black40 = '#999999';
 const black20 = '#CCCCCC';
@@ -102,6 +103,7 @@ const baseColour = {
   black100,
   black90,
   black80,
+  black70,
   black60,
   black40,
   black20,
@@ -189,7 +191,9 @@ const systemColours = {
 
 const linkColours = {
   default: baseColour.blue70,
+  secondaryDefault: baseColour.black90,
   hover: baseColour.blue100,
+  secondaryHover: baseColour.black70,
   visited: baseColour.purple40,
   disabled: baseColour.black20,
 };
@@ -203,6 +207,7 @@ const neutralColours = {
   black: blackAndWhite.black,
   grey90: baseColour.black90,
   grey80: baseColour.black80,
+  grey70: baseColour.black70,
   grey60: baseColour.black60,
   grey40: baseColour.black40,
   grey20: baseColour.black20,
@@ -253,6 +258,7 @@ const baseSizes = {
 };
 
 const margin = {
+  m0: 0,
   m2: baseSizes.s2,
   m4: baseSizes.s4,
   m6: baseSizes.s6,
@@ -271,6 +277,7 @@ const margin = {
 };
 
 const padding = {
+  p0: 0,
   p2: baseSizes.s2,
   p4: baseSizes.s4,
   p6: baseSizes.s6,

package/lib/utils/__tests__/capitalise.test.ts

@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import capitalise from '../capitalise';
+
+describe('capitalise', () => {
+  it('should capitalize the first letter of a lowercase word', () => {
+    expect(capitalise('hello')).toBe('Hello');
+  });
+
+  it('should capitalize the first letter of a sentence', () => {
+    expect(capitalise('hello world')).toBe('Hello world');
+  });
+
+  it('should handle already capitalized text', () => {
+    expect(capitalise('Hello')).toBe('Hello');
+  });
+
+  it('should handle single character strings', () => {
+    expect(capitalise('a')).toBe('A');
+  });
+
+  it('should handle strings that start with uppercase', () => {
+    expect(capitalise('HELLO')).toBe('HELLO');
+  });
+
+  it('should handle empty strings', () => {
+    expect(capitalise('')).toBe('');
+  });
+
+  it('should handle strings with numbers at the start', () => {
+    expect(capitalise('123abc')).toBe('123abc');
+  });
+
+  it('should handle strings with special characters at the start', () => {
+    expect(capitalise('!hello')).toBe('!hello');
+  });
+
+  it('should preserve the rest of the string as-is', () => {
+    expect(capitalise('hELLO')).toBe('HELLO');
+  });
+});

package/lib/utils/capitalise.ts

@@ -0,0 +1,4 @@
+const capitalise = (text: string) =>
+  text.charAt(0).toUpperCase() + text.slice(1);
+
+export default capitalise;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "uikit-react-public",
   "private": false,
-  "license": "MIT",
-  "version": "0.11.20",
+  "license": "UNLICENSED",
+  "version": "0.14.21",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/dist/components/Datepicker/subcomponents/AcademicWeeks.d.ts

@@ -1,7 +0,0 @@
-import { AcademicWeek as AcademicWeekType } from '../Datepicker.types';
-interface AcademicWeeksProps {
-    date: Date;
-    academicWeeks: AcademicWeekType[];
-}
-declare const AcademicWeeks: ({ date, academicWeeks }: AcademicWeeksProps) => import("react/jsx-runtime").JSX.Element;
-export default AcademicWeeks;

package/dist/components/Datepicker/subcomponents/CalendarGrid/CalendarGrid.d.ts

@@ -1,8 +0,0 @@
-import { CalendarEvent } from '../../Datepicker.types';
-interface CalendarGridProps {
-    date: Date | null | undefined;
-    onDatePick: (date: Date) => void;
-    events: CalendarEvent[];
-}
-declare const CalendarGrid: ({ date, onDatePick, events }: CalendarGridProps) => import("react/jsx-runtime").JSX.Element;
-export default CalendarGrid;

package/dist/components/Datepicker/subcomponents/CalendarGrid/index.d.ts

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

package/dist/components/Datepicker/subcomponents/CalendarMenu/CalendarMenu.d.ts

@@ -1,12 +0,0 @@
-import { CalendarEvent, AcademicWeek } from '../../Datepicker.types';
-interface CalendarMenuProps {
-    date: Date | null | undefined;
-    setDate: (date: Date) => void;
-    onDatePick: () => void;
-    events: CalendarEvent[];
-    showAcademicWeeks?: boolean;
-    academicWeeks: AcademicWeek[];
-    testId?: string;
-}
-declare const CalendarMenu: ({ date, setDate, onDatePick, events, showAcademicWeeks, academicWeeks, testId, }: CalendarMenuProps) => import("react/jsx-runtime").JSX.Element;
-export default CalendarMenu;

package/dist/components/Datepicker/subcomponents/CalendarMenu/index.d.ts

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

package/dist/components/Datepicker/subcomponents/ColumnHeadings/ColumnHeadings.d.ts

@@ -1,2 +0,0 @@
-declare const ColumnHeadings: () => import("react/jsx-runtime").JSX.Element;
-export default ColumnHeadings;

package/dist/components/Datepicker/subcomponents/ColumnHeadings/index.d.ts

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

package/dist/components/Datepicker/subcomponents/DateField/DateField.d.ts

@@ -1,7 +0,0 @@
-interface DateFieldProps {
-    date: Date | null | undefined;
-    onChange: (date: Date | null | undefined) => void;
-    testId?: string;
-}
-declare const DateField: ({ date, onChange, testId, }: DateFieldProps) => import("react/jsx-runtime").JSX.Element;
-export default DateField;

package/dist/components/Datepicker/subcomponents/DateField/index.d.ts

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

package/dist/components/Datepicker/subcomponents/Day/index.d.ts

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

package/dist/components/Datepicker/subcomponents/MonthSelector/MonthSelector.d.ts

@@ -1,6 +0,0 @@
-interface MonthSelectorProps {
-    date: Date | null | undefined;
-    changeMonth: (change: number) => void;
-}
-declare const MonthSelector: ({ date, changeMonth, }: MonthSelectorProps) => import("react/jsx-runtime").JSX.Element;
-export default MonthSelector;

package/dist/components/Datepicker/subcomponents/MonthSelector/index.d.ts

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

package/dist/components/Datepicker/subcomponents/Native/Native.d.ts

@@ -1,9 +0,0 @@
-interface NativeProps {
-    date?: Date | null | undefined;
-    minDate?: Date | null | undefined;
-    maxDate?: Date | null | undefined;
-    onDateChange?: (date: Date | null | undefined) => void;
-    testId?: string;
-}
-declare const Native: ({ date, minDate, maxDate, onDateChange, testId, ...props }: NativeProps) => import("react/jsx-runtime").JSX.Element;
-export default Native;

package/dist/components/Datepicker/subcomponents/Native/index.d.ts

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

package/dist/components/Datepicker/utils/parseDateForDateField/parseDateForDateField.d.ts

@@ -1,20 +0,0 @@
-/**
- * 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}
- */
-declare const parseDate: (dateString: string) => Date | null;
-export default parseDate;

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

@@ -1,54 +0,0 @@
-import { css } from '@emotion/css';
-import { ColumnHeadings, Day } from '../';
-import useTheme from '../../../../theme/useTheme';
-import { getDatesForCalendarGrid } from '../../utils';
-import { CalendarEvent } from '../../Datepicker.types';
-
-interface CalendarGridProps {
-  date: Date | null | undefined;
-  onDatePick: (date: Date) => void;
-  events: CalendarEvent[];
-}
-
-const CalendarGrid = ({ date, onDatePick, events }: CalendarGridProps) => {
-  const [theme] = useTheme();
-
-  const dates = date
-    ? getDatesForCalendarGrid(date)
-    : getDatesForCalendarGrid(new Date());
-
-  const gridStyle = css`
-    display: grid;
-    grid-template-columns: repeat(7, 1fr);
-    gap: 0;
-    text-align: center;
-    font-family: ${theme.font.family.primary};
-    font-weight: 400;
-    user-select: none;
-  `;
-
-  return (
-    <div className={gridStyle}>
-      <ColumnHeadings />
-      {dates.map((mappedDate) => (
-        <Day
-          key={mappedDate.toISOString()}
-          date={mappedDate}
-          isSelected={date?.toDateString() === mappedDate.toDateString()}
-          isToday={mappedDate.toDateString() === new Date().toDateString()}
-          isInCurrentMonth={
-            date
-              ? mappedDate.getMonth() === date?.getMonth()
-              : mappedDate.getMonth() === new Date().getMonth()
-          }
-          onPick={onDatePick}
-          events={events.filter(
-            (event) => event.date === mappedDate.toISOString().split('T')[0]
-          )}
-        />
-      ))}
-    </div>
-  );
-};
-
-export default CalendarGrid;

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

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

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

@@ -1,90 +0,0 @@
-import { css } from '@emotion/css';
-import MonthSelector from '../MonthSelector';
-import CalendarGrid from '../CalendarGrid';
-import AcademicWeeks from '../AcademicWeeks';
-import useTheme from '../../../../theme/useTheme';
-import { CalendarEvent, AcademicWeek } from '../../Datepicker.types';
-
-interface CalendarMenuProps {
-  date: Date | null | undefined;
-  setDate: (date: Date) => void;
-  onDatePick: () => void;
-  events: CalendarEvent[];
-  showAcademicWeeks?: boolean;
-  academicWeeks: AcademicWeek[];
-  testId?: string;
-}
-
-const CalendarMenu = ({
-  date,
-  setDate,
-  onDatePick,
-  events,
-  showAcademicWeeks,
-  academicWeeks,
-  testId = 'ucl',
-}: CalendarMenuProps) => {
-  const [theme] = useTheme();
-
-  const onMonthChange = (change: number) => {
-    const newDate = date ? new Date(date) : new Date();
-    newDate.setMonth(newDate.getMonth() + change);
-    setDate(newDate);
-  };
-
-  const width = showAcademicWeeks ? '370' : '312';
-
-  const style = css`
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    width: ${width}px;
-    z-index: 10;
-    position: absolute;
-    top: 60px;
-    box-sizing: border-box;
-    border: 1px solid ${theme.color.neutral.grey20};
-    padding: 16px;
-    background-color: ${theme.color.neutral.white};
-  `;
-
-  const innerContainerStyle = css`
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    width: 100%;
-  `;
-
-  const handlePick = (pickedDate: Date) => {
-    setDate(pickedDate);
-    onDatePick();
-  };
-
-  return (
-    <div
-      className={style}
-      data-testid={testId + '-calendar-menu'}
-    >
-      <MonthSelector
-        date={date}
-        changeMonth={onMonthChange}
-      />
-      <div className={innerContainerStyle}>
-        {showAcademicWeeks && (
-          <AcademicWeeks
-            date={date || new Date()} // TODO: more comprehsensive handling of null/undefined dates
-            academicWeeks={academicWeeks}
-          />
-        )}
-        <CalendarGrid
-          date={date}
-          onDatePick={handlePick}
-          events={events}
-        />
-      </div>
-    </div>
-  );
-};
-
-export default CalendarMenu;

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

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

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

@@ -1,35 +0,0 @@
-import { css } from '@emotion/css';
-import { useTheme } from '../../../../theme';
-
-const ColumnHeadings = () => {
-  const [theme] = useTheme();
-
-  const days = ['M', 'T', 'W', 'T', 'F', 'S', 'S'];
-
-  const headingStyle = (isWeekend: boolean) => css`
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 40px;
-    height: 32px;
-    color: ${isWeekend
-      ? theme.color.system.orange100
-      : theme.color.neutral.grey60};
-    font-weight: 700;
-  `;
-
-  return (
-    <>
-      {days.map((day, index) => (
-        <div
-          key={index}
-          className={headingStyle(index >= 5)}
-        >
-          {day}
-        </div>
-      ))}
-    </>
-  );
-};
-
-export default ColumnHeadings;

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

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