uikit-react-public 0.11.24 → 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

@@ -2,7 +2,7 @@
   "name": "uikit-react-public",
   "private": false,
   "license": "UNLICENSED",
-  "version": "0.11.24",
+  "version": "0.14.21",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -1,300 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`Field > Snapshot: Default (no children) 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
-/>
-`;
-
-exports[`Field > Snapshot: Field.ErrorText alone 1`] = `null`;
-
-exports[`Field > Snapshot: Field.HelperText alone 1`] = `
-<div
-  class="ucl-uikit-field__helper-text css-1m34d18"
-  data-testid="ucl-uikit-field__helper-text"
->
-  Helper text
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r2»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r2»"
-    />
-  </span>
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop disabled 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-2pe9mc"
-    data-testid="ucl-uikit-label"
-    for="«r3»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-k4nfij"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-mfikdl"
-      data-testid="ucl-uikit-input"
-      disabled=""
-      id="«r3»"
-    />
-  </span>
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop error 1`] = `
-<div
-  class="ucl-uikit-field css-ar7o8y"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r4»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <div
-    class="ucl-uikit-field__error-text css-1puiun"
-    data-testid="ucl-uikit-field__error-text"
-  >
-    <svg
-      class="ucl-uikit-icon css-q9euyk"
-      data-testid="ucl-uikit-icon"
-      fill="none"
-      height="24"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="2"
-      viewBox="0 0 24 24"
-      width="24"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle
-        cx="12"
-        cy="12"
-        r="10"
-      />
-      <line
-        x1="12"
-        x2="12"
-        y1="16"
-        y2="12"
-      />
-      <line
-        x1="12"
-        x2="12.01"
-        y1="8"
-        y2="8"
-      />
-    </svg>
-    Error text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r4»"
-    />
-  </span>
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Input, & prop optional 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r5»"
-  >
-    Name
-    <span
-      class="css-1fd72bb"
-    >
-       (optional)
-    </span>
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r5»"
-    />
-  </span>
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Textarea 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r7»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-1m34d18"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r7»"
-  />
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, HelperText, ErrorText, Textarea, & prop disabled 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-2pe9mc"
-    data-testid="ucl-uikit-label"
-    for="«r8»"
-  >
-    Name
-  </label>
-  <div
-    class="ucl-uikit-field__helper-text css-k4nfij"
-    data-testid="ucl-uikit-field__helper-text"
-  >
-    Helper text
-  </div>
-  <textarea
-    class="ucl-uikit-textarea css-1o8pbxe"
-    data-testid="ucl-uikit-textarea"
-    disabled=""
-    id="«r8»"
-  />
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, Input 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r1»"
-  >
-    Name
-  </label>
-  <span
-    class="ucl-uikit-input css-1bpb1dw"
-  >
-    <input
-      class="ucl-uikit-input__input css-1nizqet"
-      data-testid="ucl-uikit-input"
-      id="«r1»"
-    />
-  </span>
-</div>
-`;
-
-exports[`Field > Snapshot: With Label, Textarea 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <label
-    class="ucl-uikit-label css-v576g6"
-    data-testid="ucl-uikit-label"
-    for="«r6»"
-  >
-    Name
-  </label>
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r6»"
-  />
-</div>
-`;
-
-exports[`Field > Snapshot: With Textarea & prop maxChar 1`] = `
-<div
-  class="ucl-uikit-field css-1wirz7t"
-  data-testid="ucl-uikit-field"
->
-  <textarea
-    class="ucl-uikit-textarea css-19nnvor"
-    data-testid="ucl-uikit-textarea"
-    id="«r9»"
-  />
-  <div
-    class="ucl-uikit-field__char-count css-1ma0lts"
-    data-testid="ucl-uikit-field__char-count"
-  >
-    0
-    /
-    100
-  </div>
-</div>
-`;