uikit-react-public 0.29.6 → 0.30.1

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

@@ -1,122 +1,190 @@
-import { describe, expect, test } from 'vitest';
-import { render } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+import { fireEvent, render, screen } from '@testing-library/react';
 import Tabs from '../Tabs';
 import { ThemeContextProvider } from '../../../theme/useTheme';
 
+const wrap = (ui: React.ReactElement) =>
+  render(<ThemeContextProvider>{ui}</ThemeContextProvider>);
+
 describe('Tabs', () => {
-  // Snapshot tests
+  test('renders a tablist with selectable button tabs', () => {
+    const onValueChange = vi.fn();
 
-  test('snapshot: Minimal props', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Tabs activeTab='1'>
-          <Tabs.Tab
-            label='Tab Item 1'
-            value='1'
-          />
-          <Tabs.Tab
-            label='Tab Item 2'
-            value='2'
-          />
-          <Tabs.Tab
-            label='Tab Item 3'
-            value='3'
-          />
-          <Tabs.Tab
-            label='Tab Item 4'
-            value='4'
-          />
-        </Tabs>
-      </ThemeContextProvider>
+    wrap(
+      <Tabs
+        defaultValue='overview'
+        onValueChange={onValueChange}
+      >
+        <Tabs.List aria-label='Course sections'>
+          <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+          <Tabs.Tab value='modules'>Modules</Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+    );
+
+    expect(
+      screen.getByRole('tablist', { name: 'Course sections' })
+    ).toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    expect(screen.getByRole('tab', { name: 'Overview' })).not.toHaveAttribute(
+      'aria-controls'
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Modules' }));
+
+    expect(onValueChange).toHaveBeenCalledWith('modules');
+    expect(screen.getByRole('tab', { name: 'Modules' })).toHaveAttribute(
+      'aria-selected',
+      'true'
     );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 
-  test('snapshot: Custom test id', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Tabs
-          activeTab='1'
-          data-testid='custom-test-id'
-        >
-          <Tabs.Tab
-            label='Tab Item 1'
-            value='1'
-          />
-          <Tabs.Tab
-            label='Tab Item 2'
-            value='2'
-          />
-          <Tabs.Tab
-            label='Tab Item 3'
-            value='3'
-          />
-          <Tabs.Tab
-            label='Tab Item 4'
-            value='4'
-          />
-        </Tabs>
-      </ThemeContextProvider>
+  test('supports panels linked to their tabs', () => {
+    wrap(
+      <Tabs defaultValue='overview'>
+        <Tabs.List>
+          <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+          <Tabs.Tab value='modules'>Modules</Tabs.Tab>
+        </Tabs.List>
+        <Tabs.Panel value='overview'>Overview content</Tabs.Panel>
+        <Tabs.Panel value='modules'>Modules content</Tabs.Panel>
+      </Tabs>
+    );
+
+    const overviewTab = screen.getByRole('tab', { name: 'Overview' });
+    const overviewPanel = screen.getByRole('tabpanel', {
+      name: 'Overview',
+    });
+
+    expect(overviewTab).toHaveAttribute(
+      'aria-controls',
+      overviewPanel.getAttribute('id')
     );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
+    expect(screen.queryByText('Modules content')).not.toBeInTheDocument();
   });
 
-  test('snapshot: Auto width', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Tabs
-          activeTab='1'
-          fullWidth={false}
-        >
-          <Tabs.Tab
-            label='Tab Item 1'
-            value='1'
-          />
-          <Tabs.Tab
-            label='Tab Item 2'
-            value='2'
-          />
-          <Tabs.Tab
-            label='Tab Item 3'
-            value='3'
-          />
-          <Tabs.Tab
-            label='A longer tab item showing auto width'
-            value='4'
-          />
-        </Tabs>
-      </ThemeContextProvider>
+  test('supports asChild link tabs', () => {
+    wrap(
+      <Tabs value='overview'>
+        <Tabs.List>
+          <Tabs.Tab
+            value='overview'
+            asChild
+          >
+            <a href='/overview'>Overview</a>
+          </Tabs.Tab>
+          <Tabs.Tab
+            value='modules'
+            asChild
+          >
+            <a href='/modules'>Modules</a>
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
     );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
+
+    const overview = screen.getByRole('tab', { name: 'Overview' });
+
+    expect(overview.tagName).toBe('A');
+    expect(overview).toHaveAttribute('href', '/overview');
+    expect(overview).toHaveAttribute('aria-selected', 'true');
   });
 
-  test('snapshot: Counter', () => {
-    const renderResult = render(
-      <ThemeContextProvider>
-        <Tabs activeTab='1'>
-          <Tabs.Tab
-            counter={12}
-            label='Tab Item 1'
-            value='1'
-          />
-          <Tabs.Tab
-            counter={6}
-            label='Tab Item 2'
-            value='2'
-          />
-          <Tabs.Tab
-            counter={9}
-            label='Tab Item 3'
-            value='3'
-          />
-          <Tabs.Tab
-            counter={0}
-            label='Tab Item 4'
-            value='4'
-          />
-        </Tabs>
-      </ThemeContextProvider>
+  test('renders counts as plain tab text', () => {
+    wrap(
+      <Tabs defaultValue='overview'>
+        <Tabs.List>
+          <Tabs.Tab
+            count={12}
+            value='overview'
+          >
+            Overview
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Overview 12' })).toHaveTextContent(
+      'Overview 12'
+    );
+    expect(screen.queryByRole('tab', { name: 'Overview (12)' })).toBe(null);
+  });
+
+  test('moves focus with arrow keys and activates automatically', () => {
+    wrap(
+      <Tabs defaultValue='overview'>
+        <Tabs.List>
+          <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+          <Tabs.Tab value='modules'>Modules</Tabs.Tab>
+          <Tabs.Tab value='people'>People</Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+    );
+
+    const overview = screen.getByRole('tab', { name: 'Overview' });
+    const modules = screen.getByRole('tab', { name: 'Modules' });
+
+    overview.focus();
+    fireEvent.keyDown(screen.getByRole('tablist'), { key: 'ArrowRight' });
+
+    expect(modules).toHaveFocus();
+    expect(modules).toHaveAttribute('aria-selected', 'true');
+  });
+
+  test('keeps deprecated activeTab/onChange/label props working', () => {
+    const onChange = vi.fn();
+
+    wrap(
+      <Tabs
+        activeTab='overview'
+        onChange={onChange}
+      >
+        <Tabs.Tab
+          label='Overview'
+          value='overview'
+        />
+        <Tabs.Tab
+          label='Modules'
+          value='modules'
+        />
+      </Tabs>
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Modules' }));
+
+    expect(screen.getByRole('tablist')).toHaveClass('ucl-uikit-tabs__list');
+    expect(onChange).toHaveBeenCalledWith('modules');
+  });
+
+  test('does not activate disabled tabs', () => {
+    const onValueChange = vi.fn();
+
+    wrap(
+      <Tabs
+        defaultValue='overview'
+        onValueChange={onValueChange}
+      >
+        <Tabs.List>
+          <Tabs.Tab value='overview'>Overview</Tabs.Tab>
+          <Tabs.Tab
+            value='modules'
+            disabled
+          >
+            Modules
+          </Tabs.Tab>
+        </Tabs.List>
+      </Tabs>
+    );
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Modules' }));
+
+    expect(onValueChange).not.toHaveBeenCalled();
+    expect(screen.getByRole('tab', { name: 'Overview' })).toHaveAttribute(
+      'aria-selected',
+      'true'
     );
-    expect(renderResult.container.firstChild).toMatchSnapshot();
   });
 });

package/lib/components/Tabs/index.ts

@@ -1,2 +1,9 @@
 export { default } from './Tabs';
-export type { TabsProps } from './Tabs';
+export type {
+  TabsActivationMode,
+  TabsListProps,
+  TabsOrientation,
+  TabsPanelProps,
+  TabsProps,
+} from './Tabs';
+export type { TabProps } from './Tab';

package/lib/components/Textarea/Textarea.stories.tsx

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

package/lib/components/Timepicker/Timepicker.stories.tsx

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

package/lib/components/Toggle/Documentation.mdx

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

package/lib/components/Toggle/Toggle.stories.tsx

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

package/lib/components/Tooltip/Tooltip.stories.tsx

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

package/lib/components/UclLogo/UclLogo.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import UclLogo from './UclLogo';
 
 // Need this because the `UclLogo` component will default to 0 size :(

package/lib/components/WeekPicker/WeekPicker.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 WeekPicker from './WeekPicker';
 
 const meta = {

package/lib/components/common/Common.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Canvas, Controls, ArgTypes } from '@storybook/addon-docs/blocks';
 import marginsStyle from './marginsStyle';
 import { CommonMargins } from './../Button/Button.stories';
 import { theme } from '../../theme';

package/lib/components/index.ts

@@ -134,7 +134,13 @@ export { default as Alert } from './Alert';
 export type { AlertProps } from './Alert';
 
 export { default as Tabs } from './Tabs';
-export type { TabsProps } from './Tabs';
+export type {
+  TabsActivationMode,
+  TabsListProps,
+  TabsOrientation,
+  TabsPanelProps,
+  TabsProps,
+} from './Tabs';
 export type { TabProps } from './Tabs/Tab';
 
 export { default as Accordion } from './Accordion';

package/lib/theme/Icons.mdx

@@ -5,7 +5,7 @@ import {
   Subtitle,
   IconGallery,
   IconItem,
-} from "@storybook/blocks";
+} from "@storybook/addon-docs/blocks";
 import { ThemeContextProvider } from "./useTheme";
 import { Icon } from "../components";
 

package/lib/theme/Typography.mdx

@@ -1,4 +1,4 @@
-import { Meta, Title, Subtitle, Typeset } from '@storybook/blocks';
+import { Meta, Title, Subtitle, Typeset } from '@storybook/addon-docs/blocks';
 import theme from './original/defaultTheme';
 
 { console.log(theme.font) } 

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.29.6",
+  "version": "0.30.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -51,18 +51,15 @@
   },
   "devDependencies": {
     "@azure/msal-browser": "^4.7.0",
-    "@chromatic-com/storybook": "^3.2.5",
+    "@chromatic-com/storybook": "^5.2.1",
     "@eslint/compat": "^1.2.7",
     "@eslint/eslintrc": "^3.3.0",
     "@eslint/js": "^9.22.0",
-    "@storybook/addon-essentials": "^8.6.14",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-onboarding": "^8.6.4",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-vite": "^8.6.4",
-    "@storybook/test": "^8.6.4",
+    "@storybook/addon-links": "10.4.6",
+    "@storybook/addon-onboarding": "10.4.6",
+    "@storybook/react-vite": "10.4.6",
+    "@storybook/addon-docs": "10.4.6",
+    "eslint-plugin-storybook": "10.4.6",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -92,7 +89,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-router": "^7.13.1",
-    "storybook": "^8.6.4",
+    "storybook": "10.4.6",
     "typescript": "^5.8.2",
     "typescript-eslint": "^8.26.1",
     "vite": "^6.2.1",