uikit-react-public 0.11.20 → 0.14.21

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

@@ -0,0 +1,57 @@
+/**
+ * Parses a date string into a Date object.
+ * Used in <VisibleField> to parse user input into the controlled <input> field.
+ *
+ * @param {string} value The date string to parse.  Expected format is DD/MM/YYYY, DD-MM-YYYY, or DD MM YYYY.
+ * @param {string} [minDate] Optional minimum date string in YYYY-MM-DD format. If the parsed date is before this date, the function returns null.
+ * @param {string} [maxDate] Optional maximum date string in YYYY-MM-DD format. If the parsed date is after this date, the function returns null.
+ * @returns {Date | null} A Date object representing the parsed date, or null if the input is invalid or out of range.
+ */
+const parseInputValue = (
+  value: string,
+  minDate?: string | null,
+  maxDate?: string | null
+): Date | null => {
+  const normaliseDate = (date: Date) => {
+    date.setHours(0, 0, 0, 0); // Normalize to UTC midnight to avoid time zone issues
+    return date;
+  };
+
+  const acceptedDelimiters = /[-/ ]/; // Hypen, slash, or space
+
+  const dateParts = value.trim().split(acceptedDelimiters);
+  const parsedDay = parseInt(dateParts[0], 10); // (Second argument is just for base 10 -- decimal)
+  const parsedMonth = parseInt(dateParts[1], 10);
+  const parsedYear = parseInt(dateParts[2], 10);
+
+  if (isNaN(parsedDay) || isNaN(parsedMonth) || isNaN(parsedYear)) {
+    return null;
+  }
+
+  const parsedDate = new Date(parsedYear, parsedMonth - 1, parsedDay); // Month is 0-indexed
+
+  if (isNaN(parsedDate.getTime())) {
+    console.warn(`Parsed date ${parsedDate} is invalid`);
+    return null;
+  }
+
+  if (minDate) {
+    if (parsedDate < normaliseDate(new Date(minDate))) {
+      console.warn(
+        `Parsed date ${parsedDate} is before the minimum date ${minDate}`
+      );
+      return null;
+    }
+  }
+  if (maxDate) {
+    if (parsedDate > normaliseDate(new Date(maxDate))) {
+      console.warn(
+        `Parsed date ${parsedDate} is after the maximum date ${maxDate}`
+      );
+      return null;
+    }
+  }
+  return parsedDate;
+};
+
+export default parseInputValue;

package/lib/components/Dialog/BaseDialog.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
+import { useFocusTrap } from '../../hooks/useFocusTrap';
 
 export const NAME = 'ucl-uikit-base-dialog';
 export const SMALL_WIDTH = 495;
@@ -19,7 +20,13 @@ export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
   modal?: boolean;
   closeOnClickOutside?: boolean;
   closeOnClickOutsideStopPropagation?: boolean;
-  onClose?: (ev: React.MouseEvent) => void;
+  nonModalCloseOnEscape?: boolean;
+  onClose?: (ev: React.MouseEvent | KeyboardEvent) => void;
+  // Focus trap related props
+  initialFocusRef?: React.RefObject<HTMLElement>;
+  finalFocusRef?: React.RefObject<HTMLElement>;
+  disableFocusTrap?: boolean;
+  restoreFocus?: boolean;
   testId?: string;
 }
 
@@ -29,10 +36,15 @@ const BaseDialog = ({
   modal = true,
   closeOnClickOutside = true,
   closeOnClickOutsideStopPropagation = true,
+  nonModalCloseOnEscape = false,
   onClose,
-  testId = NAME,
   className,
   children,
+  initialFocusRef,
+  finalFocusRef,
+  disableFocusTrap = false,
+  restoreFocus = true,
+  testId = NAME,
   ...props
 }: BaseDialogProps) => {
   const width = {
@@ -46,6 +58,15 @@ const BaseDialog = ({
   const dialogRef = useRef<HTMLDialogElement>(null);
   const previousActiveElement = useRef<HTMLElement | null>(null);
 
+  // Use the focus trap hook
+  useFocusTrap({
+    isActive: open && modal && !disableFocusTrap,
+    containerRef: dialogRef,
+    initialFocusRef,
+    finalFocusRef,
+    restoreFocus,
+  });
+
   const hideBodyScroll = css`
     overflow: hidden;
   `;
@@ -75,9 +96,27 @@ const BaseDialog = ({
       }
     } else if (!open && dialogElement.hasAttribute('open')) {
       dialogElement.close();
-      previousActiveElement.current?.focus();
+      // Focus restoration is handled by the focus trap hook for modal dialogs,
+      // but we keep the fallback for non-modal dialogs or when focus trap is disabled
+      if ((!modal || disableFocusTrap) && restoreFocus) {
+        previousActiveElement.current?.focus();
+      }
     }
-  }, [open, modal]);
+  }, [open, modal, disableFocusTrap, restoreFocus]);
+
+  // Handle Escape key to close dialog
+  useEffect(() => {
+    if (!open || modal || !nonModalCloseOnEscape) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && onClose) {
+        onClose(event);
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+    return () => document.removeEventListener('keydown', handleKeyDown);
+  }, [open, modal, nonModalCloseOnEscape, onClose]);
 
   const handleClick = useCallback(
     (ev: React.MouseEvent<HTMLDialogElement>) => {
@@ -150,6 +189,7 @@ const BaseDialog = ({
         data-testid={testId}
         onClick={handleClick}
         onClose={handleDialogClose}
+        aria-modal={modal ? 'true' : 'false'}
         {...props}
       >
         {children}

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

@@ -9,154 +9,154 @@ import { ThemeContextProvider } from '../../../theme/useTheme';
 describe('Field', () => {
   // Snapshot tests
 
-  test('Snapshot: Default (no children)', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field />
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: Field.HelperText alone', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field.HelperText>Helper text</Field.HelperText>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: Field.ErrorText alone', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field.ErrorText>Error text</Field.ErrorText>
-      </ThemeContextProvider>
-    );
-    // Expected behaviour here is to return `null`
-    // unless <Field> provides `error` via context
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, Input', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field disabled>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop error', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field error>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Input, & prop optional', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field optional>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Input />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, Textarea', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Textarea', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field disabled>
-          <Label>Name</Label>
-          <Field.HelperText>Helper text</Field.HelperText>
-          <Field.ErrorText>Error text</Field.ErrorText>
-          <Textarea />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
-
-  test('Snapshot: With Textarea & prop maxChar', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Field>
-          <Textarea />
-          <Field.CharacterCount maxChars={100} />
-        </Field>
-      </ThemeContextProvider>
-    );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
-  });
+  // test('Snapshot: Default (no children)', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field />
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: Field.HelperText alone', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field.HelperText>Helper text</Field.HelperText>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: Field.ErrorText alone', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field.ErrorText>Error text</Field.ErrorText>
+  //     </ThemeContextProvider>
+  //   );
+  //   // Expected behaviour here is to return `null`
+  //   // unless <Field> provides `error` via context
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, Input', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field disabled>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop error', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field error>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Input, & prop optional', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field optional>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Input />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, Textarea', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Textarea', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field disabled>
+  //         <Label>Name</Label>
+  //         <Field.HelperText>Helper text</Field.HelperText>
+  //         <Field.ErrorText>Error text</Field.ErrorText>
+  //         <Textarea />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
+
+  // test('Snapshot: With Textarea & prop maxChar', () => {
+  //   const renderResult = render(
+  //     <ThemeContextProvider>
+  //       <Field>
+  //         <Textarea />
+  //         <Field.CharacterCount maxChars={100} />
+  //       </Field>
+  //     </ThemeContextProvider>
+  //   );
+  //   expect(renderResult.container.firstChild).toMatchSnapshot();
+  // });
 
   // Interation tests
 

package/lib/components/FileInput/FileInput.stories.tsx

@@ -0,0 +1,70 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import FileInput from './FileInput';
+
+const meta = {
+  title: 'Components/WorkInProgress/FileInput',
+  component: FileInput,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof FileInput>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Upload file or images',
+    testId: 'file-input-default',
+  },
+};
+
+export const WithCustomClass: Story = {
+  args: {
+    children: 'Custom Styled File Input',
+    className: 'custom-class',
+    testId: 'file-input-custom',
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    children: 'Upload multiple files',
+    testId: 'file-input-multiple',
+    multiple: true,
+  },
+};
+
+export const NoChildren: Story = {
+  args: {
+    testId: 'file-input-no-children',
+  },
+};
+
+export const WithDecorator: Story = {
+  name: 'FileInput with decorator',
+  args: {
+    children: 'FileInput with a decorator',
+    testId: 'file-input-decorator',
+  },
+  decorators: [
+    (Story) => (
+      <div>
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#0d68cf',
+          }}
+        />
+        <Story />
+        <div
+          style={{
+            height: '16px',
+            backgroundColor: '#0d68cf',
+          }}
+        />
+      </div>
+    ),
+  ],
+};

package/lib/components/FileInput/FileInput.tsx

@@ -0,0 +1,68 @@
+import { css, cx } from '@emotion/css';
+import { useTheme } from '../../theme';
+import { InputHTMLAttributes } from 'react';
+import { Icon } from '..';
+import { useRef } from 'react';
+
+export const NAME = 'ucl-uikit-fileinput';
+
+export interface FileInputProps extends InputHTMLAttributes<HTMLInputElement> {
+  testId?: string;
+  labelId?: string;
+}
+
+const FileInput = ({
+  testId = NAME,
+  children,
+  labelId = '1',
+  ...props
+}: FileInputProps) => {
+  const [theme] = useTheme();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const baseStyle = css`
+    font-size: ${theme.font.size.f16};
+    font-family: ${theme.font.family.primary};
+    color: ${theme.color.link.default};
+  `;
+
+  const hiddenInputContainerStyle = css`
+    opacity: 0;
+    width: 0;
+    height: 0;
+    position: absolute;
+  `;
+
+  const labelStyle = css`
+    display: inline-flex;
+    text-decoration: underline;
+    gap: 6px;
+    font-weight: 700;
+    margin-top: 3px;
+    cursor: pointer;
+  `;
+
+  const style = cx(NAME, baseStyle, props.className);
+
+  return (
+    <div className={style}>
+      <label
+        htmlFor={`file-input-${labelId}`}
+        className={labelStyle}
+      >
+        <Icon.Upload />
+        {children}
+      </label>
+      <input
+        ref={fileInputRef}
+        type='file'
+        data-testid={testId}
+        className={hiddenInputContainerStyle}
+        id={`file-input-${labelId}`}
+        {...props}
+      />
+    </div>
+  );
+};
+
+export default FileInput;