uikit-react-public 0.30.1 → 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/package.json

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