@amsterdam/design-system-react 0.15.0 → 1.0.0

package/dist/TableOfContents/TableOfContents.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { TableOfContents } from './TableOfContents';
@@ -26,7 +30,7 @@ describe('Table of contents', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-table-of-contents');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(TableOfContents, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-table-of-contents extra');

package/dist/TableOfContents/TableOfContentsLink.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/TableOfContents/TableOfContentsLink.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
@@ -16,7 +20,7 @@ describe('Table of Contents link', () => {
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-table-of-contents__link');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TableOfContents.Link, { className: "extra", href: "#", label: "Test" }));
         const component = screen.getByRole('link');
         expect(component).toHaveClass('ams-table-of-contents__link extra');

package/dist/TableOfContents/TableOfContentsList.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/TableOfContents/TableOfContentsList.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { TableOfContents } from './TableOfContents';
@@ -14,7 +18,7 @@ describe('Table of Contents list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-table-of-contents__list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TableOfContents.List, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-table-of-contents__list extra');

package/dist/TableOfContents/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TableOfContents } from './TableOfContents';
 export type { TableOfContentsProps } from './TableOfContents';
 export type { TableOfContentsLinkProps } from './TableOfContentsLink';

package/dist/TableOfContents/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TableOfContents } from './TableOfContents';

package/dist/Tabs/Tabs.d.ts

@@ -4,19 +4,22 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type TabsProps = {
-    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
-    onTabChange?: (tabId: string) => void;
+    onTabChange?: (panelId: string) => void;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
+ */
 export declare const Tabs: import("react").ForwardRefExoticComponent<{
-    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    /** The identifier of the initially active Tab. Corresponds to its Panel `id` value. */
     activeTab?: string;
-    onTabChange?: (tabId: string) => void;
+    onTabChange?: (panelId: string) => void;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>> & {
     Button: import("react").ForwardRefExoticComponent<{
-        tab: string;
+        'aria-controls': string;
     } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLButtonElement>>;
@@ -24,7 +27,7 @@ export declare const Tabs: import("react").ForwardRefExoticComponent<{
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Panel: import("react").ForwardRefExoticComponent<{
-        tab: string;
+        id: string;
     } & HTMLAttributes<HTMLDivElement> & {
         children?: import("react").ReactNode | undefined;
     } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Tabs/Tabs.js

@@ -4,14 +4,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright Gemeente Amsterdam
  */
 import clsx from 'clsx';
-import { forwardRef, useEffect, useId, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
 import { TabsButton } from './TabsButton';
 import { TabsContext } from './TabsContext';
 import { TabsList } from './TabsList';
 import { TabsPanel } from './TabsPanel';
 const TabsRoot = forwardRef(({ activeTab, children, className, onTabChange, ...restProps }, ref) => {
-    const tabsId = useId();
     const [activeTabId, setActiveTabId] = useState();
+    // Get all tab ids from TabsButtons on first render
     const allTabIds = useMemo(() => {
         if (!Array.isArray(children))
             return [];
@@ -22,15 +22,15 @@ const TabsRoot = forwardRef(({ activeTab, children, className, onTabChange, ...r
         // TabsList can have 0, 1, or more children
         // If there is only 1 child, it will be an object
         if (tabsListChildren.props) {
-            return [tabsListChildren.props.tab];
+            return [tabsListChildren.props['aria-controls']];
         }
         // If there is more than 1 child, it will be an array
         if (Array.isArray(tabsListChildren)) {
-            return tabsListChildren.map((child) => child.props.tab);
+            return tabsListChildren.map((child) => child.props['aria-controls']);
         }
         // If there are no children, return an empty array
         return [];
-    }, [children]);
+    }, []);
     useEffect(() => {
         if (!activeTab) {
             setActiveTabId(allTabIds[0]);
@@ -47,9 +47,12 @@ const TabsRoot = forwardRef(({ activeTab, children, className, onTabChange, ...r
         setActiveTabId(tab);
         onTabChange?.(tab);
     };
-    return (_jsx(TabsContext.Provider, { value: { activeTabId, tabsId, updateTab }, children: _jsx("div", { ...restProps, className: clsx('ams-tabs', className), ref: ref, children: children }) }));
+    return (_jsx(TabsContext.Provider, { value: { activeTabId, updateTab }, children: _jsx("div", { ...restProps, className: clsx('ams-tabs', className), ref: ref, children: children }) }));
 });
 TabsRoot.displayName = 'Tabs';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-tabs--docs Tabs docs at Amsterdam Design System}
+ */
 export const Tabs = Object.assign(TabsRoot, {
     Button: TabsButton,
     List: TabsList,

package/dist/Tabs/Tabs.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Tabs/Tabs.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
@@ -16,7 +20,7 @@ describe('Tabs', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-tabs');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Tabs, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-tabs extra');
@@ -28,14 +32,14 @@ describe('Tabs', () => {
         expect(ref.current).toBe(component);
     });
     it('supports children', () => {
-        render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { tab: "one", children: "Tab 1" }), _jsx(Tabs.Button, { tab: "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { tab: "one", children: "Content 1" }), _jsx(Tabs.Panel, { tab: "two", children: "Content 2" })] }));
+        render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" })] }));
         expect(screen.getByRole('tablist')).toBeInTheDocument();
         expect(screen.getByRole('tab', { selected: true })).toBeInTheDocument();
         expect(screen.getByRole('tabpanel')).toBeInTheDocument();
     });
     it('should select a tab when clicked', async () => {
         const user = userEvent.setup();
-        render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { tab: "one", children: "Tab 1" }), _jsx(Tabs.Button, { tab: "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { tab: "one", children: "Content 1" }), _jsx(Tabs.Panel, { tab: "two", children: "Content 2" })] }));
+        render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" })] }));
         const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
         const tabTwo = screen.getByRole('tab', { name: 'Tab 2' });
         expect(tabOne).toHaveAttribute('aria-selected', 'true');
@@ -55,13 +59,13 @@ describe('Tabs', () => {
     it('calls onTabChange with the newly activated tab', async () => {
         const user = userEvent.setup();
         const onTabChange = jest.fn();
-        render(_jsx(Tabs, { onTabChange: onTabChange, children: _jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one", children: "Tab 1" }) }) }));
+        render(_jsx(Tabs, { onTabChange: onTabChange, children: _jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }) }) }));
         const button = screen.getByRole('tab', { name: 'Tab 1' });
         await user.click(button);
         expect(onTabChange).toHaveBeenCalledWith('one');
     });
     it('should be able to set the initially active tab', () => {
-        render(_jsxs(Tabs, { activeTab: "three", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { tab: "one", children: "Tab 1" }), _jsx(Tabs.Button, { tab: "two", children: "Tab 2" }), _jsx(Tabs.Button, { tab: "three", children: "Tab 3" }), _jsx(Tabs.Button, { tab: "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { tab: "one", children: "Content 1" }), _jsx(Tabs.Panel, { tab: "two", children: "Content 2" }), _jsx(Tabs.Panel, { tab: "three", children: "Content 3" }), _jsx(Tabs.Panel, { tab: "four", children: "Content 4" })] }));
+        render(_jsxs(Tabs, { activeTab: "three", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" }), _jsx(Tabs.Button, { "aria-controls": "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" }), _jsx(Tabs.Panel, { id: "three", children: "Content 3" }), _jsx(Tabs.Panel, { id: "four", children: "Content 4" })] }));
         const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
         const tabThree = screen.getByRole('tab', { name: 'Tab 3' });
         expect(tabOne).toHaveAttribute('aria-selected', 'false');
@@ -73,7 +77,7 @@ describe('Tabs', () => {
     it('should set the first tab as the initially active tab when the supplied active tab does not exist', async () => {
         // Disable console.warn for this test, to prevent it from cluttering the test output
         jest.spyOn(console, 'warn').mockImplementation(() => { });
-        render(_jsxs(Tabs, { activeTab: "unknown", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { tab: "one", children: "Tab 1" }), _jsx(Tabs.Button, { tab: "two", children: "Tab 2" }), _jsx(Tabs.Button, { tab: "three", children: "Tab 3" }), _jsx(Tabs.Button, { tab: "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { tab: "one", children: "Content 1" }), _jsx(Tabs.Panel, { tab: "two", children: "Content 2" }), _jsx(Tabs.Panel, { tab: "three", children: "Content 3" }), _jsx(Tabs.Panel, { tab: "four", children: "Content 4" })] }));
+        render(_jsxs(Tabs, { activeTab: "unknown", children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" }), _jsx(Tabs.Button, { "aria-controls": "four", children: "Tab 4" })] }), _jsx(Tabs.Panel, { id: "one", children: "Content 1" }), _jsx(Tabs.Panel, { id: "two", children: "Content 2" }), _jsx(Tabs.Panel, { id: "three", children: "Content 3" }), _jsx(Tabs.Panel, { id: "four", children: "Content 4" })] }));
         const firstTab = screen.getByRole('tab', { name: 'Tab 1' });
         const lastTab = screen.getByRole('tab', { name: 'Tab 4' });
         expect(firstTab).toHaveAttribute('aria-selected', 'true');
@@ -82,4 +86,19 @@ describe('Tabs', () => {
         expect(lastTab).toHaveAttribute('tabindex', '-1');
         expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 1');
     });
+    it('sets focus on Tabs buttons when using arrow keys', async () => {
+        const user = userEvent.setup();
+        render(_jsxs(Tabs, { children: [_jsxs(Tabs.List, { children: [_jsx(Tabs.Button, { "aria-controls": "one", children: "Tab 1" }), _jsx(Tabs.Button, { "aria-controls": "two", children: "Tab 2" }), _jsx(Tabs.Button, { "aria-controls": "three", children: "Tab 3" })] }), _jsx(Tabs.Panel, { id: "one" }), _jsx(Tabs.Panel, { id: "two" }), _jsx(Tabs.Panel, { id: "three" })] }));
+        const firstButton = screen.getByRole('tab', { name: 'Tab 1' });
+        const thirdButton = screen.getByRole('tab', { name: 'Tab 3' });
+        await user.click(firstButton);
+        expect(firstButton).toHaveFocus();
+        // Click the right arrow key twice
+        await user.keyboard('{ArrowRight}');
+        await user.keyboard('{ArrowRight}');
+        expect(thirdButton).toHaveFocus();
+        expect(firstButton).not.toHaveFocus();
+        await user.keyboard('{ArrowRight}');
+        expect(firstButton).toHaveFocus();
+    });
 });

package/dist/Tabs/TabsButton.d.ts

@@ -4,12 +4,12 @@
  */
 import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
 export type TabsButtonProps = {
-    /** An identifier. */
-    tab: string;
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
 } & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
 export declare const TabsButton: import("react").ForwardRefExoticComponent<{
-    /** An identifier. */
-    tab: string;
+    /** The identifier of the corresponding tab panel. */
+    'aria-controls': string;
 } & ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Tabs/TabsButton.js

@@ -6,14 +6,17 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, startTransition, useContext } from 'react';
 import { TabsContext } from './TabsContext';
-export const TabsButton = forwardRef(({ children, className, onClick, tab, ...restProps }, ref) => {
-    const { activeTabId, tabsId, updateTab } = useContext(TabsContext);
+export const TabsButton = forwardRef(({ 'aria-controls': ariaControls, children, className, onClick, ...restProps }, ref) => {
+    const { activeTabId, updateTab } = useContext(TabsContext);
     const handleClick = (event) => {
         onClick?.(event);
+        // Allow preventDefault to stop the tab from updating
+        if (event.defaultPrevented)
+            return;
         startTransition(() => {
-            updateTab(tab);
+            updateTab(ariaControls);
         });
     };
-    return (_jsxs("button", { ...restProps, "aria-controls": `${tabsId}-panel-${tab}`, "aria-selected": activeTabId === tab, className: clsx('ams-tabs__button', className), id: `${tabsId}-tab-${tab}`, onClick: handleClick, ref: ref, role: "tab", tabIndex: activeTabId === tab ? 0 : -1, children: [_jsx("span", { "aria-hidden": "true", className: "ams-tabs__button-label-hidden", children: children }), _jsx("span", { className: "ams-tabs__button-label", children: children })] }));
+    return (_jsxs("button", { ...restProps, "aria-controls": ariaControls, "aria-selected": activeTabId === ariaControls, className: clsx('ams-tabs__button', className), id: `button-${ariaControls}`, onClick: handleClick, ref: ref, role: "tab", tabIndex: activeTabId === ariaControls ? 0 : -1, type: "button", children: [_jsx("span", { "aria-hidden": "true", className: "ams-tabs__button-label-hidden", children: children }), _jsx("span", { className: "ams-tabs__button-label", children: children })] }));
 });
 TabsButton.displayName = 'Tabs.Button';

package/dist/Tabs/TabsButton.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Tabs/TabsButton.test.js

@@ -1,42 +1,56 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createRef } from 'react';
 import { TabsButton } from './TabsButton';
 import '@testing-library/jest-dom';
+import { TabsContext } from './TabsContext';
 describe('Tabs button', () => {
     it('renders', () => {
-        render(_jsx(TabsButton, { tab: "one" }));
+        render(_jsx(TabsButton, { "aria-controls": "one" }));
         const component = screen.getByRole('tab');
         expect(component).toBeInTheDocument();
     });
     it('renders a design system BEM class name', () => {
-        render(_jsx(TabsButton, { tab: "one" }));
+        render(_jsx(TabsButton, { "aria-controls": "one" }));
         const component = screen.getByRole('tab');
         expect(component).toHaveClass('ams-tabs__button');
     });
-    it('renders an additional class name', () => {
-        render(_jsx(TabsButton, { className: "extra", tab: "one" }));
+    it('renders an extra class name', () => {
+        render(_jsx(TabsButton, { "aria-controls": "one", className: "extra" }));
         const component = screen.getByRole('tab');
         expect(component).toHaveClass('ams-tabs__button extra');
     });
     it('renders a label', () => {
-        render(_jsx(TabsButton, { tab: "one", children: "Label" }));
+        render(_jsx(TabsButton, { "aria-controls": "one", children: "Label" }));
         const component = screen.getByRole('tab', { name: 'Label' });
         expect(component).toBeInTheDocument();
     });
     it('renders the correct id based on the tabs prop', () => {
-        const { container } = render(_jsx(TabsButton, { tab: "one" }));
-        const component = container.querySelector('#-tab-one');
+        const { container } = render(_jsx(TabsButton, { "aria-controls": "one" }));
+        const component = container.querySelector('#button-one');
         expect(component).toBeInTheDocument();
     });
     it('should associate the button with the correct tab', () => {
-        render(_jsx(TabsButton, { tab: "one" }));
+        render(_jsx(TabsButton, { "aria-controls": "one" }));
         const component = screen.getByRole('tab');
-        expect(component).toHaveAttribute('aria-controls', '-panel-one');
+        expect(component).toHaveAttribute('aria-controls', 'one');
+    });
+    it('does not call updateTab if event.preventDefault is invoked', async () => {
+        const user = userEvent.setup();
+        const mockUpdateTab = jest.fn();
+        render(_jsx(TabsContext.Provider, { value: { updateTab: mockUpdateTab }, children: _jsx(TabsButton, { "aria-controls": "one", onClick: (event) => event.preventDefault(), children: "Label" }) }));
+        const button = screen.getByRole('tab', { name: 'Label' });
+        await user.click(button);
+        expect(mockUpdateTab).not.toHaveBeenCalled();
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsx(TabsButton, { ref: ref, tab: "one" }));
+        render(_jsx(TabsButton, { "aria-controls": "one", ref: ref }));
         const component = screen.getByRole('tab');
         expect(ref.current).toBe(component);
     });

package/dist/Tabs/TabsContext.d.ts

@@ -3,14 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 export type TabsContextValue = {
-    /** The identifier of the active tab. */
+    /** The identifier of the active Tab. */
     activeTabId?: string;
-    /**
-     * The generated identifier for the entire Tabs component.
-     * This lets you have several Tabs components, possibly with the same tabs, on one page.
-     */
-    tabsId: string;
-    /** A function to update the active tab. */
+    /** A function to update the active Tab. */
     updateTab: (tab: string) => void;
 };
 export declare const TabsContext: import("react").Context<TabsContextValue>;

package/dist/Tabs/TabsContext.js

@@ -5,7 +5,6 @@
 import { createContext } from 'react';
 const defaultValues = {
     activeTabId: undefined,
-    tabsId: '',
     updateTab: () => { },
 };
 export const TabsContext = createContext(defaultValues);

package/dist/Tabs/TabsList.js

@@ -11,7 +11,7 @@ export const TabsList = forwardRef(({ children, className, ...restProps }, ref)
     // Use a passed ref if it's there, otherwise use innerRef
     useImperativeHandle(ref, () => innerRef.current);
     const { keyDown } = useKeyboardFocus(innerRef, {
-        focusableElements: ['button[role="tab"]'],
+        focusableElements: ['.ams-tabs__button:not([disabled])'],
         horizontally: true,
         rotating: true,
     });

package/dist/Tabs/TabsList.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Tabs/TabsList.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { TabsList } from './TabsList';
@@ -14,7 +18,7 @@ describe('Tabs list', () => {
         const component = screen.getByRole('tablist');
         expect(component).toHaveClass('ams-tabs__list');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TabsList, { className: "extra" }));
         const component = screen.getByRole('tablist');
         expect(component).toHaveClass('ams-tabs__list extra');

package/dist/Tabs/TabsPanel.d.ts

@@ -4,12 +4,12 @@
  */
 import type { HTMLAttributes, PropsWithChildren } from 'react';
 export type TabsPanelProps = {
-    /** The identifier of the corresponding Tab. */
-    tab: string;
+    /** The identifier of the Tab Panel. */
+    id: string;
 } & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
 export declare const TabsPanel: import("react").ForwardRefExoticComponent<{
-    /** The identifier of the corresponding Tab. */
-    tab: string;
+    /** The identifier of the Tab Panel. */
+    id: string;
 } & HTMLAttributes<HTMLDivElement> & {
     children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Tabs/TabsPanel.js

@@ -6,11 +6,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import clsx from 'clsx';
 import { forwardRef, useContext } from 'react';
 import { TabsContext } from './TabsContext';
-export const TabsPanel = forwardRef(({ children, className, tab, ...restProps }, ref) => {
-    const { activeTabId, tabsId } = useContext(TabsContext);
-    if (tab !== activeTabId) {
+export const TabsPanel = forwardRef(({ children, className, id, ...restProps }, ref) => {
+    const { activeTabId } = useContext(TabsContext);
+    if (id !== activeTabId) {
         return null;
     }
-    return (_jsx("div", { ...restProps, "aria-labelledby": `${tabsId}-tab-${tab}`, className: clsx('ams-tabs__panel', className), id: `${tabsId}-panel-${tab}`, ref: ref, role: "tabpanel", tabIndex: 0, children: children }));
+    return (_jsx("div", { ...restProps, "aria-labelledby": `button-${id}`, className: clsx('ams-tabs__panel', className), id: id, ref: ref, role: "tabpanel", tabIndex: 0, children: children }));
 });
 TabsPanel.displayName = 'Tabs.Panel';

package/dist/Tabs/TabsPanel.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/Tabs/TabsPanel.test.js

@@ -1,39 +1,41 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import { createRef } from 'react';
 import { Tabs } from './Tabs';
 import '@testing-library/jest-dom';
 describe('Tabs Panel', () => {
     it('renders', () => {
-        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { tab: "one" })] }));
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { id: "one" })] }));
         const component = screen.getByRole('tabpanel');
         expect(component).toBeInTheDocument();
     });
     it('renders a design system BEM class name', () => {
-        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { tab: "one" })] }));
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { id: "one" })] }));
         const component = screen.getByRole('tabpanel');
         expect(component).toHaveClass('ams-tabs__panel');
     });
-    it('renders an additional class name', () => {
-        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { className: "extra", tab: "one" })] }));
+    it('renders an extra class name', () => {
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { className: "extra", id: "one" })] }));
         const component = screen.getByRole('tabpanel');
         expect(component).toHaveClass('ams-tabs__panel extra');
     });
     it('renders the correct id based on the tabs prop', () => {
-        const { container } = render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { tab: "one" })] }));
-        // The start of the id is generated by useId, so we only check the end of the id
-        const component = container.querySelector('[id$="panel-one"]');
-        expect(component).toBeInTheDocument();
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { id: "one" })] }));
+        const component = screen.getByRole('tabpanel');
+        expect(component).toHaveAttribute('id', 'one');
     });
     it('should associate the tab with the correct button', () => {
-        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { tab: "one" })] }));
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { id: "one" })] }));
         const component = screen.getByRole('tabpanel');
-        // The start of the attribute value is generated by useId, so we only check the end of the value
-        expect(component).toHaveAttribute('aria-labelledby', expect.stringMatching(/-tab-one$/));
+        expect(component).toHaveAttribute('aria-labelledby', 'button-one');
     });
     it('supports ForwardRef in React', () => {
         const ref = createRef();
-        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { tab: "one" }) }), _jsx(Tabs.Panel, { ref: ref, tab: "one" })] }));
+        render(_jsxs(Tabs, { children: [_jsx(Tabs.List, { children: _jsx(Tabs.Button, { "aria-controls": "one" }) }), _jsx(Tabs.Panel, { id: "one", ref: ref })] }));
         const component = screen.getByRole('tabpanel');
         expect(ref.current).toBe(component);
     });

package/dist/Tabs/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Tabs } from './Tabs';
 export type { TabsProps } from './Tabs';
 export type { TabsPanelProps } from './TabsPanel';

package/dist/Tabs/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { Tabs } from './Tabs';

package/dist/TextArea/TextArea.d.ts

@@ -9,6 +9,9 @@ export type TextAreaProps = {
     /** Allows the user to resize the text box. The default is resizing in both directions. */
     resize?: 'none' | 'horizontal' | 'vertical';
 } & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-area--docs Text Area docs at Amsterdam Design System}
+ */
 export declare const TextArea: import("react").ForwardRefExoticComponent<{
     /** Whether the value fails a validation rule. */
     invalid?: boolean;

package/dist/TextArea/TextArea.js

@@ -5,5 +5,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  */
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+/**
+ * @see {@link https://designsystem.amsterdam/?path=/docs/components-forms-text-area--docs Text Area docs at Amsterdam Design System}
+ */
 export const TextArea = forwardRef(({ className, dir, invalid, resize, ...restProps }, ref) => (_jsx("textarea", { ...restProps, "aria-invalid": invalid || undefined, className: clsx('ams-text-area', resize && `ams-text-area--resize-${resize}`, restProps.cols && 'ams-text-area--cols', className), dir: dir ?? 'auto', ref: ref })));
 TextArea.displayName = 'TextArea';

package/dist/TextArea/TextArea.test.d.ts

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import '@testing-library/jest-dom';

package/dist/TextArea/TextArea.test.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createRef, useState } from 'react';
@@ -16,7 +20,7 @@ describe('Text area', () => {
         const component = screen.getByRole('textbox');
         expect(component).toHaveClass('ams-text-area');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TextArea, { className: "extra" }));
         const component = screen.getByRole('textbox');
         expect(component).toHaveClass('ams-text-area extra');

package/dist/TextArea/index.d.ts

@@ -1,2 +1,6 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TextArea } from './TextArea';
 export type { TextAreaProps } from './TextArea';

package/dist/TextArea/index.js

@@ -1 +1,5 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
 export { TextArea } from './TextArea';