uikit-react-public 0.30.0 → 0.32.3

package/lib/components/Snackbar/__tests__/Snackbars.test.tsx

@@ -0,0 +1,377 @@
+import { act, render, screen } from '@testing-library/react';
+import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
+import { ThemeContextProvider } from '../../../theme/useTheme';
+import Snackbars, { type SnackbarsItem } from '../Snackbars';
+
+const renderSnackbars = (
+  items: SnackbarsItem[],
+  onDismiss = vi.fn(),
+  props: Partial<React.ComponentProps<typeof Snackbars>> = {}
+) =>
+  render(
+    <ThemeContextProvider>
+      <Snackbars
+        items={items}
+        onDismiss={onDismiss}
+        duration={0}
+        {...props}
+      />
+    </ThemeContextProvider>
+  );
+
+describe('Snackbars', () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.clearAllTimers();
+    vi.useRealTimers();
+  });
+
+  test('renders a single snackbar with default lifecycle wrapper', () => {
+    renderSnackbars([{ id: 'saved', children: 'Saved' }]);
+
+    expect(screen.getByTestId('ucl-uikit-snackbars')).toBeDefined();
+    expect(screen.getByTestId('ucl-uikit-snackbars-saved')).toBeDefined();
+    expect(screen.getByText('Saved')).toBeDefined();
+  });
+
+  test('passes snackbar props through to each rendered snackbar', () => {
+    const onFocus = vi.fn();
+    const onBlur = vi.fn();
+
+    renderSnackbars([
+      {
+        id: 'saved',
+        children: 'Saved',
+        closeButtonAriaLabel: 'Close saved notification',
+        onFocus,
+        onBlur,
+        tabIndex: 0,
+        title: 'Saved notification',
+      },
+    ]);
+
+    const snackbar = screen.getByTestId('ucl-uikit-snackbars-saved');
+
+    expect(snackbar).toHaveAttribute('title', 'Saved notification');
+    expect(
+      screen.getByLabelText('Close saved notification')
+    ).toBeInTheDocument();
+
+    act(() => {
+      snackbar.focus();
+    });
+
+    expect(onFocus).toHaveBeenCalledTimes(1);
+
+    act(() => {
+      snackbar.blur();
+    });
+
+    expect(onBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('renders up to maxVisible snackbars', () => {
+    renderSnackbars(
+      [
+        { id: 'one', children: 'One' },
+        { id: 'two', children: 'Two' },
+        { id: 'three', children: 'Three' },
+      ],
+      vi.fn(),
+      { maxVisible: 2 }
+    );
+
+    expect(screen.getByText('One')).toBeDefined();
+    expect(screen.getByText('Two')).toBeDefined();
+    expect(screen.queryByText('Three')).toBeNull();
+  });
+
+  test('close action dismisses after transition duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      transitionDuration: 200,
+    });
+
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-snackbars-saved-close-button'
+    );
+
+    act(() => {
+      closeButton.click();
+    });
+
+    expect(closeButton).toBeDisabled();
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('close action is disabled while exiting', () => {
+    const onClose = vi.fn();
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved', onClose }], onDismiss, {
+      transitionDuration: 200,
+    });
+
+    const closeButton = screen.getByTestId(
+      'ucl-uikit-snackbars-saved-close-button'
+    );
+
+    act(() => {
+      closeButton.click();
+      closeButton.click();
+    });
+
+    expect(closeButton).toBeDisabled();
+    expect(onClose).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('undo action calls onUndo and dismisses after transition duration', () => {
+    const onDismiss = vi.fn();
+    const onUndo = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          onUndo,
+        },
+      ],
+      onDismiss,
+      { transitionDuration: 200 }
+    );
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-undoable-undo-button').click();
+    });
+
+    expect(
+      screen.getByTestId('ucl-uikit-snackbars-undoable-undo-button')
+    ).toBeDisabled();
+    expect(onUndo).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('undo action is disabled while exiting', () => {
+    const onDismiss = vi.fn();
+    const onUndo = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          onUndo,
+        },
+      ],
+      onDismiss,
+      { transitionDuration: 200 }
+    );
+
+    const undoButton = screen.getByTestId(
+      'ucl-uikit-snackbars-undoable-undo-button'
+    );
+
+    act(() => {
+      undoButton.click();
+      undoButton.click();
+    });
+
+    expect(undoButton).toBeDisabled();
+    expect(onUndo).toHaveBeenCalledTimes(1);
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('auto-dismisses after duration and transition duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 100,
+      transitionDuration: 200,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(200);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('does not auto-dismiss when duration is zero', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 0,
+      transitionDuration: 50,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(1000);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+  });
+
+  test('undo action still auto-dismisses when duration is zero', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars(
+      [{ id: 'undoable', action: 'undo', children: 'Undoable' }],
+      onDismiss,
+      {
+        duration: 0,
+        transitionDuration: 50,
+      }
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(5000);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('undo action item duration zero falls back to the collection duration', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars(
+      [
+        {
+          id: 'undoable',
+          action: 'undo',
+          children: 'Undoable',
+          duration: 0,
+        },
+      ],
+      onDismiss,
+      {
+        duration: 100,
+        transitionDuration: 50,
+      }
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(100);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('undoable');
+  });
+
+  test('pauses auto-dismiss while a snackbar has focus', () => {
+    const onDismiss = vi.fn();
+    renderSnackbars([{ id: 'saved', children: 'Saved' }], onDismiss, {
+      duration: 100,
+      transitionDuration: 50,
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(60);
+    });
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-saved-close-button').focus();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(500);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      screen.getByTestId('ucl-uikit-snackbars-saved-close-button').blur();
+    });
+
+    act(() => {
+      vi.advanceTimersByTime(39);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(1);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledWith('saved');
+  });
+
+  test('adding a snackbar does not refresh existing snackbar duration timers', () => {
+    const onDismiss = vi.fn();
+    const { rerender } = render(
+      <ThemeContextProvider>
+        <Snackbars
+          items={[{ id: 'first', children: 'First' }]}
+          onDismiss={onDismiss}
+          duration={100}
+          transitionDuration={50}
+        />
+      </ThemeContextProvider>
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(75);
+    });
+
+    rerender(
+      <ThemeContextProvider>
+        <Snackbars
+          items={[
+            { id: 'first', children: 'First' },
+            { id: 'second', children: 'Second' },
+          ]}
+          onDismiss={onDismiss}
+          duration={100}
+          transitionDuration={50}
+        />
+      </ThemeContextProvider>
+    );
+
+    act(() => {
+      vi.advanceTimersByTime(25);
+    });
+
+    expect(onDismiss).not.toHaveBeenCalled();
+
+    act(() => {
+      vi.advanceTimersByTime(50);
+    });
+
+    expect(onDismiss).toHaveBeenCalledTimes(1);
+    expect(onDismiss).toHaveBeenCalledWith('first');
+  });
+});

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

@@ -1,22 +1,23 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Snackbar > snapshot: custom test id 1`] = `
-<output
-  class="ucl-uikit-snackbar css-1rhqqf3"
+<div
+  class="ucl-uikit-snackbar css-10q5wpo"
   data-testid="custom-test-id"
 >
   <svg
-    class="ucl-uikit-icon css-1uzxprk"
+    aria-hidden="true"
+    class="ucl-uikit-icon css-1qgh0wp"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
-    height="24"
+    height="32"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
     viewBox="0 0 24 24"
-    width="24"
+    width="32"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -26,39 +27,49 @@ exports[`Snackbar > snapshot: custom test id 1`] = `
       d="M22 4 12 14.01l-3-3"
     />
   </svg>
-  <span>
+  <span
+    class="ucl-uikit-text css-5w4evg"
+    data-testid="ucl-uikit-text"
+    role="status"
+  >
     Test snackbar
   </span>
   <span
-    class="css-1l2xg72"
+    class="css-1xjm0bq"
   >
     <button
-      class="css-1nj6pk0"
+      class="css-bt8z9v"
       data-testid="custom-test-id-undo-button"
     >
-      UNDO
+      <span
+        class="ucl-uikit-text css-1ccjqc4"
+        data-testid="ucl-uikit-text"
+      >
+        UNDO
+      </span>
     </button>
   </span>
-</output>
+</div>
 `;
 
 exports[`Snackbar > snapshot: minimal props 1`] = `
-<output
-  class="ucl-uikit-snackbar css-1rhqqf3"
+<div
+  class="ucl-uikit-snackbar css-10q5wpo"
   data-testid="ucl-uikit-snackbar"
 >
   <svg
-    class="ucl-uikit-icon css-1uzxprk"
+    aria-hidden="true"
+    class="ucl-uikit-icon css-1qgh0wp"
     data-testid="ucl-uikit-icon"
     fill="none"
     focusable="false"
-    height="24"
+    height="32"
     stroke="currentColor"
     stroke-linecap="round"
     stroke-linejoin="round"
     stroke-width="2"
     viewBox="0 0 24 24"
-    width="24"
+    width="32"
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
@@ -68,17 +79,23 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
       d="M22 4 12 14.01l-3-3"
     />
   </svg>
-  <span>
+  <span
+    class="ucl-uikit-text css-5w4evg"
+    data-testid="ucl-uikit-text"
+    role="status"
+  >
     Test snackbar
   </span>
   <span
-    class="css-1l2xg72"
+    class="css-1xjm0bq"
   >
     <button
-      class="ucl-uikit-icon-button css-14jzv8g"
+      aria-label="Dismiss notification"
+      class="ucl-uikit-icon-button css-wreorn"
       data-testid="ucl-uikit-snackbar-close-button"
     >
       <svg
+        aria-hidden="true"
         class="ucl-uikit-icon css-148hpxb"
         data-testid="ucl-uikit-icon"
         fill="none"
@@ -98,5 +115,5 @@ exports[`Snackbar > snapshot: minimal props 1`] = `
       </svg>
     </button>
   </span>
-</output>
+</div>
 `;

package/lib/components/Snackbar/index.ts

@@ -1,2 +1,8 @@
 export { default } from './Snackbar';
+export { default as Snackbars } from './Snackbars';
 export type { SnackbarProps } from './Snackbar';
+export type {
+  SnackbarsItem,
+  SnackbarsPlacement,
+  SnackbarsProps,
+} from './Snackbars';

package/lib/components/index.ts

@@ -26,7 +26,13 @@ export { default as Overlay } from './Overlay';
 export type { OverlayProps } from './Overlay';
 
 export { default as Snackbar } from './Snackbar';
-export type { SnackbarProps } from './Snackbar';
+export { Snackbars } from './Snackbar';
+export type {
+  SnackbarProps,
+  SnackbarsItem,
+  SnackbarsPlacement,
+  SnackbarsProps,
+} from './Snackbar';
 
 export { default as Avatar } from './Avatar';
 export type { AvatarProps } from './Avatar';
@@ -207,6 +213,9 @@ export type { DropdownMenuProps } from './DropdownMenu';
 export { default as DrawerMenu } from './DrawerMenu';
 export type { DrawerMenuProps } from './DrawerMenu';
 
+export { default as Sidebar } from './Sidebar';
+export type { SidebarProps } from './Sidebar';
+
 export { default as DropdownUserMenu } from './DropdownUserMenu';
 export type { DropdownUserMenuProps } from './DropdownUserMenu';
 

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

@@ -60,6 +60,59 @@ describe('announce (ARIA live region)', () => {
     expect(allRegions.length).toBe(1);
   });
 
+  test('appends the live region to the provided container', async () => {
+    const container = document.createElement('section');
+    container.setAttribute('data-testid', 'announce-container');
+    document.body.appendChild(container);
+
+    announce('Container message', false, container);
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(container.contains(region)).toBe(true);
+    expect(document.body.contains(region)).toBe(true);
+  });
+
+  test('falls back to document.body when no container is provided', async () => {
+    announce('Default container message');
+
+    const region = await screen.findByTestId('aria-live-region');
+
+    expect(region.parentElement).toBe(document.body);
+  });
+
+  test('moves live region when a new container is provided later', async () => {
+    const firstContainer = document.createElement('div');
+    const secondContainer = document.createElement('div');
+    document.body.appendChild(firstContainer);
+    document.body.appendChild(secondContainer);
+
+    announce('First container message', false, firstContainer);
+
+    const region = await screen.findByTestId('aria-live-region');
+    expect(firstContainer.contains(region)).toBe(true);
+
+    announce('Second container message', false, secondContainer);
+
+    expect(firstContainer.contains(region)).toBe(false);
+    expect(secondContainer.contains(region)).toBe(true);
+  });
+
+  test('recreates live region when previous one was removed from the DOM', async () => {
+    announce('Initial message');
+
+    const initialRegion = await screen.findByTestId('aria-live-region');
+    initialRegion.remove();
+
+    expect(screen.queryByTestId('aria-live-region')).toBeNull();
+
+    announce('Message after removal');
+
+    const recreatedRegion = await screen.findByTestId('aria-live-region');
+    expect(recreatedRegion).not.toBe(initialRegion);
+    expect(recreatedRegion.parentElement).toBe(document.body);
+  });
+
   test('queues multiple announcements and processes sequentially', async () => {
     vi.useFakeTimers();
 

package/lib/utils/announce.ts

@@ -11,6 +11,10 @@
  *
  * @param force - If true, forces the announcement even if it's the same as the last one.
  *
+ * @param container - Optional element to contain the live region. Accepts `null`
+ * to support passing values like `ref.current`; falls back to `document.body`
+ * when no container is available.
+ *
  * @example
  * announce("Item removed");
  *
@@ -26,14 +30,28 @@ const SR_DETECTION_DELAY = 100; // Time for SR to detect change
 const SR_PROCESSING_DELAY = 1000; // Time for SR to finish announcement
 
 /**
- * Creates the live region if it does not already exist.
+ * Creates the live region if it does not already exist, or moves it to a new
+ * container if one is provided. If the existing region has been removed from
+ * the DOM (e.g. a dialog unmounted), it will be recreated.
  */
-const initLiveRegion = (): void => {
-  if (typeof document === 'undefined' || liveRegion) return;
+const initLiveRegion = (container?: HTMLElement | null): void => {
+  if (typeof document === 'undefined') return;
 
-  // Guard: body may not exist yet (e.g., script in <head>)
-  const container = document.body || document.documentElement;
-  if (!container) return;
+  // Reset if existing region has been removed from the DOM
+  if (liveRegion && !document.contains(liveRegion)) {
+    liveRegion = null;
+  }
+
+  const target = container || document.body || document.documentElement;
+  if (!target) return;
+
+  // If a specific container is requested and the region is elsewhere, move it
+  if (liveRegion && container && liveRegion.parentNode !== container) {
+    container.appendChild(liveRegion);
+    return;
+  }
+
+  if (liveRegion) return;
 
   const region = document.createElement('div');
   region.setAttribute('aria-live', 'polite');
@@ -48,7 +66,7 @@ const initLiveRegion = (): void => {
   region.style.height = '1px';
   region.style.overflow = 'hidden';
 
-  document.body.appendChild(region);
+  target.appendChild(region);
   liveRegion = region;
 };
 
@@ -86,13 +104,18 @@ const processQueue = (): void => {
 
 /**
  * Announces a message to screen readers.
+ *
  */
-const announce = (message: string, force = false): void => {
+const announce = (
+  message: string,
+  force = false,
+  container?: HTMLElement | null
+): void => {
   // SSR guard: do nothing if document is unavailable
   if (typeof document === 'undefined') return;
 
-  // Initialize live region on first use
-  if (!liveRegion) initLiveRegion();
+  // Ensure live region exists and is attached to the requested container when provided
+  initLiveRegion(container);
 
   // If forcing, clear the queue to prevent old messages
   if (force) {

package/package.json

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