@amsterdam/design-system-react 0.15.0 → 0.16.0

package/dist/StandaloneLink/StandaloneLink.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Icon } from '../Icon';
+export const StandaloneLink = forwardRef(({ children, className, color, icon, ...restProps }, ref) => (_jsxs("a", { ...restProps, className: clsx('ams-standalone-link', color && `ams-standalone-link--${color}`, icon && 'ams-standalone-link--with-icon', className), ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] })));
+StandaloneLink.displayName = 'StandaloneLink';

package/dist/StandaloneLink/StandaloneLink.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { StandaloneLink } from './StandaloneLink';
+import '@testing-library/jest-dom';
+describe('Standalone Link', () => {
+    it('renders with href attribute', () => {
+        render(_jsx(StandaloneLink, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+        expect(component).toHaveAttribute('href', '#');
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(StandaloneLink, { href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-standalone-link');
+    });
+    it('renders an extra class name', () => {
+        render(_jsx(StandaloneLink, { className: "extra", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-standalone-link extra');
+    });
+    it('renders the class name for contrast color', () => {
+        render(_jsx(StandaloneLink, { color: "contrast", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-standalone-link ams-standalone-link--contrast');
+    });
+    it('renders the class name for inverse color', () => {
+        render(_jsx(StandaloneLink, { color: "inverse", href: "#" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-standalone-link ams-standalone-link--inverse');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(StandaloneLink, { href: "#", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/StandaloneLink/index.d.ts

@@ -0,0 +1,2 @@
+export { StandaloneLink } from './StandaloneLink';
+export type { StandaloneLinkProps } from './StandaloneLink';

package/dist/StandaloneLink/index.js

@@ -0,0 +1 @@
+export { StandaloneLink } from './StandaloneLink';

package/dist/Switch/Switch.test.js

@@ -51,7 +51,7 @@ describe('Switch', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-switch');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(Switch, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-switch extra');

package/dist/Table/Table.test.js

@@ -15,7 +15,7 @@ describe('Table', () => {
         const component = screen.getByRole('table');
         expect(component).toHaveClass('ams-table__table');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { className: "extra" }));
         const component = screen.getByRole('table');
         expect(component).toHaveClass('ams-table__table extra');

package/dist/Table/TableBody.test.js

@@ -16,7 +16,7 @@ describe('Table body', () => {
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__body');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableBody, { className: "extra" }) }));
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__body extra');

package/dist/Table/TableCaption.test.js

@@ -21,7 +21,7 @@ describe('Table caption', () => {
         const caption = component?.querySelector(':only-child');
         expect(caption).toHaveClass('ams-table__caption');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableCaption, { className: "extra", children: "Caption" }) }));
         const component = screen.getByRole('table', {
             name: 'Caption',

package/dist/Table/TableCell.test.js

@@ -18,7 +18,7 @@ describe('Table cell', () => {
         const component = screen.getByRole('cell');
         expect(component).toHaveClass('ams-table__cell');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { children: _jsx(TableCell, { className: "extra", children: "Data" }) }) }) }));
         const component = screen.getByRole('cell');
         expect(component).toHaveClass('ams-table__cell extra');

package/dist/Table/TableFooter.test.js

@@ -16,7 +16,7 @@ describe('Table footer', () => {
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__footer');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableFooter, { className: "extra" }) }));
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__footer extra');

package/dist/Table/TableHeader.test.js

@@ -16,7 +16,7 @@ describe('Table header', () => {
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__header');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableHeader, { className: "extra" }) }));
         const component = screen.getByRole('rowgroup');
         expect(component).toHaveClass('ams-table__header extra');

package/dist/Table/TableHeaderCell.test.js

@@ -24,7 +24,7 @@ describe('Table header cell', () => {
         const component = screen.getByRole('columnheader');
         expect(component).toHaveClass('ams-table__header-cell');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableHeader, { children: _jsx(TableRow, { children: _jsx(TableHeaderCell, { className: "extra", children: "Data" }) }) }) }));
         const component = screen.getByRole('columnheader');
         expect(component).toHaveClass('ams-table__header-cell extra');

package/dist/Table/TableRow.test.js

@@ -17,7 +17,7 @@ describe('Table row', () => {
         const component = screen.getByRole('row');
         expect(component).toHaveClass('ams-table__row');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(Table, { children: _jsx(TableBody, { children: _jsx(TableRow, { className: "extra" }) }) }));
         const component = screen.getByRole('row');
         expect(component).toHaveClass('ams-table__row extra');

package/dist/TableOfContents/TableOfContents.test.js

@@ -26,7 +26,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.js

@@ -16,7 +16,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.js

@@ -14,7 +14,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/Tabs/Tabs.d.ts

@@ -4,19 +4,19 @@
  */
 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>>;
 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 +24,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,13 +4,12 @@ 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();
     const allTabIds = useMemo(() => {
         if (!Array.isArray(children))
@@ -22,11 +21,11 @@ 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 [];
@@ -47,7 +46,7 @@ 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';
 export const Tabs = Object.assign(TabsRoot, {

package/dist/Tabs/Tabs.test.js

@@ -16,7 +16,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 +28,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 +55,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 +73,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 +82,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,14 @@ 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);
         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.js

@@ -5,38 +5,38 @@ import { TabsButton } from './TabsButton';
 import '@testing-library/jest-dom';
 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('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.js

@@ -14,7 +14,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.js

@@ -5,35 +5,33 @@ 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/TextArea/TextArea.test.js

@@ -16,7 +16,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/TextInput/TextInput.test.js

@@ -16,11 +16,10 @@ describe('Text input', () => {
         const component = screen.getByRole('textbox');
         expect(component).toHaveClass('ams-text-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(TextInput, { className: "extra" }));
         const component = screen.getByRole('textbox');
-        expect(component).toHaveClass('extra');
-        expect(component).toHaveClass('ams-text-input');
+        expect(component).toHaveClass('ams-text-input extra');
     });
     it('should be working in a controlled state', async () => {
         function ControlledComponent() {

package/dist/TimeInput/TimeInput.test.js

@@ -15,7 +15,7 @@ describe('Time input', () => {
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-time-input');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         const { container } = render(_jsx(TimeInput, { className: "extra" }));
         const component = container.querySelector(':only-child');
         expect(component).toHaveClass('ams-time-input extra');

package/dist/UnorderedList/UnorderedList.test.js

@@ -24,7 +24,7 @@ describe('Unordered list', () => {
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-unordered-list--inverse');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(UnorderedList, { className: "extra" }));
         const component = screen.getByRole('list');
         expect(component).toHaveClass('ams-unordered-list extra');

package/dist/UnorderedList/UnorderedListItem.test.js

@@ -14,7 +14,7 @@ describe('Ordered list item', () => {
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-unordered-list__item');
     });
-    it('renders an additional class name', () => {
+    it('renders an extra class name', () => {
         render(_jsx(UnorderedListItem, { className: "extra" }));
         const component = screen.getByRole('listitem');
         expect(component).toHaveClass('ams-unordered-list__item extra');