uikit-react-public 0.29.6 → 0.30.1

package/dist/utils/announce.d.ts

@@ -1,6 +1,7 @@
 /**
  * Announces a message to screen readers.
+ *
  */
-declare const announce: (message: string, force?: boolean) => void;
+declare const announce: (message: string, force?: boolean, container?: HTMLElement | null) => void;
 export declare const __resetForTesting: () => void;
 export default announce;

package/lib/Welcome.mdx

@@ -1,4 +1,4 @@
-import { Meta } from "@storybook/blocks";
+import { Meta } from "@storybook/addon-docs/blocks";
 import { UclLogo } from "./components/";
 
 <Meta title="Welcome" />

package/lib/components/Accordion/Accordion.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Accordion from './Accordion';
 
 const meta = {

package/lib/components/Alert/Alert.mdx

@@ -1,5 +1,5 @@
 import * as AlertStories from './Alert.stories';
-import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Canvas, Controls } from '@storybook/addon-docs/blocks';
 
 <Meta of={AlertStories} />
 <Title />

package/lib/components/Alert/Alert.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Alert from './Alert';
 import { theme } from '../../theme';
 

package/lib/components/AppHeader/AppHeader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 
 import AppHeader from './AppHeader';

package/lib/components/AppMenu/AppMenu.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { Link as InternalLink } from 'wouter';
 import AppMenu from './AppMenu';
 import Icon from '../Icon/Icon';

package/lib/components/Avatar/Avatar.mdx

@@ -1,5 +1,5 @@
 import * as AvatarStories from "./Avatar.stories";
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   image: `<Avatar

package/lib/components/Avatar/Avatar.stories.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Avatar, { type AvatarProps } from './Avatar';
 import sampleAvatarPhoto from '../../../public/sample-avatar-photo.jpg';
 

package/lib/components/Badge/Badge.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Badge from './Badge';
 import { type BadgeVariant } from './Badge';

package/lib/components/BaseCheckbox/BaseCheckbox.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import BaseCheckbox from './BaseCheckbox';
 import Icon from '../Icon';

package/lib/components/Blanket/Blanket.stories.tsx

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Blanket from './Blanket';
 
 const meta = {

package/lib/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Breadcrumbs from './Breadcrumbs';
 

package/lib/components/Button/Button.mdx

@@ -7,7 +7,7 @@ import {
   Canvas,
   Controls,
   ArgTypes,
-} from '@storybook/blocks';
+} from '@storybook/addon-docs/blocks';
 
 export const usage = {
   default: `<Button>Default Button</Button>`,

package/lib/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import Button from './Button';
 import Icon from '../Icon';
 import { theme } from '../../theme';

package/lib/components/Calendar/Calendar.stories.tsx

@@ -1,6 +1,6 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Calendar from './Calendar';
-import { useArgs } from '@storybook/preview-api';
+import { useArgs } from 'storybook/preview-api';
 import type { AcademicWeek } from './Calendar.types';
 
 const meta = {

package/lib/components/Calendar/subcomponents/Day.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Day from './Day';
 
 const meta = {

package/lib/components/Checkbox/Checkbox.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import Checkbox from './Checkbox';
 

package/lib/components/Chip/Chip.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 
 import Chip from './Chip';
 

package/lib/components/Datepicker/Datepicker.stories.tsx

@@ -1,5 +1,5 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import Datepicker from './Datepicker';
 import Field from '../Field';
 import Label from '../Label';

package/lib/components/Dialog/BaseDialog.tsx

@@ -5,6 +5,7 @@ import React, {
   useEffect,
   useRef,
   useContext,
+  forwardRef,
 } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
@@ -33,182 +34,200 @@ export interface BaseDialogProps extends HTMLAttributes<HTMLDialogElement> {
   testId?: string;
 }
 
-const BaseDialog = ({
-  open = false,
-  size = 'medium',
-  modal = true,
-  closeOnClickOutside = true,
-  closeOnClickOutsideStopPropagation = true,
-  nonModalCloseOnEscape = false,
-  onClose,
-  className,
-  children,
-  initialFocusRef,
-  finalFocusRef,
-  disableFocusTrap = false,
-  restoreFocus = true,
-  skipCloseOnInitialFocus = false,
-  testId = NAME,
-  ...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 context = useContext(DialogContext);
-  const dialogHeaderId = context?.dialogHeaderId;
-  const dialogBodyId = context?.dialogBodyId;
-
-  // Use the focus trap hook
-  useFocusTrap({
-    isActive: open && modal && !disableFocusTrap,
-    containerRef: dialogRef,
-    initialFocusRef,
-    finalFocusRef,
-    restoreFocus,
-    skipFirstFocusable: skipCloseOnInitialFocus,
-  });
-
-  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;
+const BaseDialog = forwardRef<HTMLDialogElement, BaseDialogProps>(
+  function BaseDialog(
+    {
+      open = false,
+      size = 'medium',
+      modal = true,
+      closeOnClickOutside = true,
+      closeOnClickOutsideStopPropagation = true,
+      nonModalCloseOnEscape = false,
+      onClose,
+      className,
+      children,
+      initialFocusRef,
+      finalFocusRef,
+      disableFocusTrap = false,
+      restoreFocus = true,
+      skipCloseOnInitialFocus = false,
+      testId = NAME,
+      ...props
+    }: BaseDialogProps,
+    ref
+  ) {
+    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 setDialogRef = useCallback(
+      (node: HTMLDialogElement | null) => {
+        dialogRef.current = node;
+
+        if (typeof ref === 'function') {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
 
-    if (open && !dialogElement.hasAttribute('open')) {
-      previousActiveElement.current = document.activeElement as HTMLElement;
-      if (modal) {
-        dialogElement.showModal();
+    const context = useContext(DialogContext);
+    const dialogHeaderId = context?.dialogHeaderId;
+    const dialogBodyId = context?.dialogBodyId;
+
+    // Use the focus trap hook
+    useFocusTrap({
+      isActive: open && modal && !disableFocusTrap,
+      containerRef: dialogRef,
+      initialFocusRef,
+      finalFocusRef,
+      restoreFocus,
+      skipFirstFocusable: skipCloseOnInitialFocus,
+    });
+
+    const hideBodyScroll = css`
+      overflow: hidden;
+    `;
+
+    useEffect(() => {
+      if (open && modal) {
+        document.body.classList.add(hideBodyScroll);
       } else {
-        dialogElement.show();
-      }
-    } else if (!open && dialogElement.hasAttribute('open')) {
-      dialogElement.close();
-      // 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();
+        document.body.classList.remove(hideBodyScroll);
       }
-    }
-  }, [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);
+      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();
+        // 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, disableFocusTrap, restoreFocus]);
 
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
-  }, [open, modal, nonModalCloseOnEscape, onClose]);
+    // Handle Escape key to close dialog
+    useEffect(() => {
+      if (!open || modal || !nonModalCloseOnEscape) return;
 
-  const handleClick = useCallback(
-    (ev: React.MouseEvent<HTMLDialogElement>) => {
-      if (closeOnClickOutside && onClose && dialogRef.current) {
-        if (closeOnClickOutsideStopPropagation) {
-          ev.stopPropagation();
+      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>) => {
+        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);
+          }
         }
-        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) {
+      },
+      [closeOnClickOutside, closeOnClickOutsideStopPropagation, onClose]
+    );
+
+    const handleDialogClose = useCallback(
+      (ev: React.MouseEvent<HTMLDialogElement>) => {
+        if (onClose) {
           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;
-    }
+      },
+      [onClose]
+    );
 
-    @media (min-width: ${theme.breakpoints.tablet}px) {
-      width: ${width}px;
-      max-width: calc(100vw - ${theme.margin.m16});
-      height: fit-content;
+    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: min(${width}px, calc(100vw - ${theme.margin.m16}));
-        max-height: calc(100vh - 32px);
+        max-width: none;
+        max-height: none;
       }
-    }
 
-    &::backdrop {
-      background-color: ${theme.color.overlay.blanket};
+      @media (min-width: ${theme.breakpoints.tablet}px) {
+        width: ${width}px;
+        max-width: calc(100vw - ${theme.margin.m16});
+        height: fit-content;
+
+        &:modal {
+          max-width: min(${width}px, calc(100vw - ${theme.margin.m16}));
+          max-height: calc(100vh - 32px);
+        }
+      }
+
+      &::backdrop {
+        background-color: ${theme.color.overlay.blanket};
+      }
+    `;
+
+    const style = cx(NAME, baseStyle, className);
+
+    if (open) {
+      return (
+        <dialog
+          ref={setDialogRef}
+          className={style}
+          data-testid={testId}
+          onClick={handleClick}
+          onClose={handleDialogClose}
+          aria-modal={modal ? 'true' : 'false'}
+          aria-labelledby={dialogHeaderId}
+          aria-describedby={dialogBodyId}
+          {...props}
+        >
+          {children}
+        </dialog>
+      );
+    } else {
+      return null;
     }
-  `;
-
-  const style = cx(NAME, baseStyle, className);
-
-  if (open) {
-    return (
-      <dialog
-        ref={dialogRef}
-        className={style}
-        data-testid={testId}
-        onClick={handleClick}
-        onClose={handleDialogClose}
-        aria-modal={modal ? 'true' : 'false'}
-        aria-labelledby={dialogHeaderId}
-        aria-describedby={dialogBodyId}
-        {...props}
-      >
-        {children}
-      </dialog>
-    );
-  } else {
-    return null;
   }
-};
+);
 
 export default memo(BaseDialog);

package/lib/components/Dialog/Dialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Dialog from './Dialog';
 
 const meta = {

package/lib/components/Dialog/Dialog.tsx

@@ -1,4 +1,4 @@
-import { createContext, useId } from 'react';
+import { createContext, forwardRef, useId } from 'react';
 import { css, cx } from '@emotion/css';
 import useTheme from '../../theme/useTheme';
 import BaseDialog, { BaseDialogProps } from './BaseDialog';
@@ -23,15 +23,18 @@ export interface DialogProps extends BaseDialogProps {
   onSecondaryAction?: () => void;
 }
 
-const Dialog = ({
-  onClose,
-  onAction,
-  onSecondaryAction,
-  testId = NAME,
-  className,
-  children,
-  ...props
-}: DialogProps) => {
+const Dialog = forwardRef<HTMLDialogElement, DialogProps>(function Dialog(
+  {
+    onClose,
+    onAction,
+    onSecondaryAction,
+    testId = NAME,
+    className,
+    children,
+    ...props
+  }: DialogProps,
+  ref
+) {
   const [theme] = useTheme();
   const dialogHeaderId = useId();
   const dialogBodyId = useId();
@@ -53,6 +56,7 @@ const Dialog = ({
   return (
     <DialogContext value={contextValue}>
       <BaseDialog
+        ref={ref}
         onClose={onClose}
         testId={testId}
         className={style}
@@ -63,7 +67,7 @@ const Dialog = ({
       </BaseDialog>
     </DialogContext>
   );
-};
+});
 
 export interface DialogSubComponents {
   Header: typeof DialogHeader;

package/lib/components/Divider/Divider.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Divider from './Divider';
 

package/lib/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { css } from '@emotion/css';
 import Dropdown from './Dropdown';
 import Button from '../Button';

package/lib/components/FeedbackDialog/FeedbackDialog.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import FeedbackDialog from './FeedbackDialog';
 
 const meta = {

package/lib/components/Field/Field.stories.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { useArgs } from '@storybook/preview-api';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { useArgs } from 'storybook/preview-api';
 import { css } from '@emotion/css';
 import Field from './Field';
 // Direct imports to avoid circular dependency warning at build time due to context

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import FileInput from './FileInput';
 
 const meta = {

package/lib/components/Footer/Footer.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import Footer from './Footer';
 

package/lib/components/Header/Header.mdx

@@ -1,5 +1,5 @@
 import * as HeaderStories from "./Header.stories";
-import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/blocks";
+import { Meta, Title, Subtitle, Canvas, Controls } from "@storybook/addon-docs/blocks";
 
 export const usage = {
   default: `<Header title='App Name' />`,

package/lib/components/Header/Header.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import Header from './Header';
 import Menu from '../Menu';
 import Icon from '../Icon';