@amsterdam/design-system-react 0.14.1 → 0.15.0

package/dist/TableOfContents/TableOfContentsLink.test.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TableOfContents } from './TableOfContents';
+describe('Table of Contents link', () => {
+    it('renders', () => {
+        render(_jsx(TableOfContents.Link, { href: "#", label: "Test label" }));
+        const link = screen.getByRole('link');
+        expect(link).toBeInTheDocument();
+        expect(link).toBeVisible();
+        expect(link).toHaveTextContent('Test label');
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TableOfContents.Link, { href: "#", label: "Test" }));
+        const component = screen.getByRole('link');
+        expect(component).toHaveClass('ams-table-of-contents__link');
+    });
+    it('renders an additional 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');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TableOfContents.Link, { href: "#", label: "Test", ref: ref }));
+        const component = screen.getByRole('link');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/TableOfContents/TableOfContentsList.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TableOfContentsListProps = PropsWithChildren<HTMLAttributes<HTMLUListElement>>;
+export declare const TableOfContentsList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLUListElement>>;

package/dist/TableOfContents/TableOfContentsList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+export const TableOfContentsList = forwardRef(({ children, className, ...restProps }, ref) => {
+    return (_jsx("ul", { ...restProps, className: clsx('ams-table-of-contents__list', className), ref: ref, children: children }));
+});
+TableOfContentsList.displayName = 'TableOfContents.List';

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/TableOfContents/TableOfContentsList.test.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TableOfContents } from './TableOfContents';
+import '@testing-library/jest-dom';
+describe('Table of Contents list', () => {
+    it('renders an HTML ul element', () => {
+        const { container } = render(_jsx(TableOfContents.List, {}));
+        const list = container.querySelector('ul:only-child');
+        expect(list).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TableOfContents.List, {}));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-table-of-contents__list');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(TableOfContents.List, { className: "extra" }));
+        const component = screen.getByRole('list');
+        expect(component).toHaveClass('ams-table-of-contents__list extra');
+    });
+    it('renders its subcomponent', () => {
+        const listItems = ['Item 1', 'Item 2', 'Item 3'];
+        const { container } = render(_jsx(TableOfContents.List, { children: listItems.map((item, index) => (_jsx(TableOfContents.Link, { label: `Link ${item}` }, index))) }));
+        const list = screen.getByRole('list');
+        const items = container.querySelectorAll('.ams-table-of-contents__item');
+        expect(list).toBeInTheDocument();
+        expect(items.length).toBe(3);
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TableOfContents.List, { ref: ref }));
+        const component = screen.getByRole('list');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/TableOfContents/index.d.ts

@@ -0,0 +1,4 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps } from './TableOfContents';
+export type { TableOfContentsLinkProps } from './TableOfContentsLink';
+export type { TableOfContentsListProps } from './TableOfContentsList';

package/dist/TableOfContents/index.js

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

package/dist/Tabs/Tabs.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TabsProps = {
+    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const Tabs: import("react").ForwardRefExoticComponent<{
+    /** The identifier of the initially active tab. Corresponds to its `tab` value. */
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    Button: import("react").ForwardRefExoticComponent<{
+        tab: string;
+    } & import("react").ButtonHTMLAttributes<HTMLButtonElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLButtonElement>>;
+    List: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+    Panel: import("react").ForwardRefExoticComponent<{
+        tab: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        children?: import("react").ReactNode | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
+};

package/dist/Tabs/Tabs.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useEffect, useId, 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))
+            return [];
+        // The first child of Tabs should be TabsList
+        const tabsList = children[0];
+        // Get children of TabsList
+        const tabsListChildren = tabsList.props.children;
+        // 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];
+        }
+        // If there is more than 1 child, it will be an array
+        if (Array.isArray(tabsListChildren)) {
+            return tabsListChildren.map((child) => child.props.tab);
+        }
+        // If there are no children, return an empty array
+        return [];
+    }, [children]);
+    useEffect(() => {
+        if (!activeTab) {
+            setActiveTabId(allTabIds[0]);
+        }
+        else if (!allTabIds.includes(activeTab)) {
+            console.warn(`The active tab "${activeTab}" does not exist. Falling back to the first tab.`);
+            setActiveTabId(allTabIds[0]);
+        }
+        else {
+            setActiveTabId(activeTab);
+        }
+    }, [activeTab, allTabIds]);
+    const updateTab = (tab) => {
+        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 }) }));
+});
+TabsRoot.displayName = 'Tabs';
+export const Tabs = Object.assign(TabsRoot, {
+    Button: TabsButton,
+    List: TabsList,
+    Panel: TabsPanel,
+});

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Tabs/Tabs.test.js

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { createRef } from 'react';
+import { Tabs } from './Tabs';
+import '@testing-library/jest-dom';
+describe('Tabs', () => {
+    it('renders', () => {
+        const { container } = render(_jsx(Tabs, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toBeInTheDocument();
+        expect(component).toBeVisible();
+    });
+    it('renders a design system BEM class name', () => {
+        const { container } = render(_jsx(Tabs, {}));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-tabs');
+    });
+    it('renders an additional class name', () => {
+        const { container } = render(_jsx(Tabs, { className: "extra" }));
+        const component = container.querySelector(':only-child');
+        expect(component).toHaveClass('ams-tabs extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        const { container } = render(_jsx(Tabs, { ref: ref }));
+        const component = container.querySelector(':only-child');
+        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" })] }));
+        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" })] }));
+        const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
+        const tabTwo = screen.getByRole('tab', { name: 'Tab 2' });
+        expect(tabOne).toHaveAttribute('aria-selected', 'true');
+        expect(tabOne).toHaveAttribute('tabindex', '0');
+        expect(tabTwo).toHaveAttribute('aria-selected', 'false');
+        expect(tabTwo).toHaveAttribute('tabindex', '-1');
+        expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 1');
+        if (tabTwo) {
+            await user.click(tabTwo);
+        }
+        expect(tabOne).toHaveAttribute('aria-selected', 'false');
+        expect(tabOne).toHaveAttribute('tabindex', '-1');
+        expect(tabTwo).toHaveAttribute('aria-selected', 'true');
+        expect(tabTwo).toHaveAttribute('tabindex', '0');
+        expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 2');
+    });
+    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" }) }) }));
+        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" })] }));
+        const tabOne = screen.getByRole('tab', { name: 'Tab 1' });
+        const tabThree = screen.getByRole('tab', { name: 'Tab 3' });
+        expect(tabOne).toHaveAttribute('aria-selected', 'false');
+        expect(tabOne).toHaveAttribute('tabindex', '-1');
+        expect(tabThree).toHaveAttribute('aria-selected', 'true');
+        expect(tabThree).toHaveAttribute('tabindex', '0');
+        expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 3');
+    });
+    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" })] }));
+        const firstTab = screen.getByRole('tab', { name: 'Tab 1' });
+        const lastTab = screen.getByRole('tab', { name: 'Tab 4' });
+        expect(firstTab).toHaveAttribute('aria-selected', 'true');
+        expect(firstTab).toHaveAttribute('tabindex', '0');
+        expect(lastTab).toHaveAttribute('aria-selected', 'false');
+        expect(lastTab).toHaveAttribute('tabindex', '-1');
+        expect(screen.getByRole('tabpanel')).toHaveTextContent('Content 1');
+    });
+});

package/dist/Tabs/TabsButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+export type TabsButtonProps = {
+    /** An identifier. */
+    tab: string;
+} & PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>>;
+export declare const TabsButton: import("react").ForwardRefExoticComponent<{
+    /** An identifier. */
+    tab: string;
+} & ButtonHTMLAttributes<HTMLButtonElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/Tabs/TabsButton.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+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);
+    const handleClick = (event) => {
+        onClick?.(event);
+        startTransition(() => {
+            updateTab(tab);
+        });
+    };
+    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 })] }));
+});
+TabsButton.displayName = 'Tabs.Button';

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Tabs/TabsButton.test.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TabsButton } from './TabsButton';
+import '@testing-library/jest-dom';
+describe('Tabs button', () => {
+    it('renders', () => {
+        render(_jsx(TabsButton, { tab: "one" }));
+        const component = screen.getByRole('tab');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TabsButton, { tab: "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" }));
+        const component = screen.getByRole('tab');
+        expect(component).toHaveClass('ams-tabs__button extra');
+    });
+    it('renders a label', () => {
+        render(_jsx(TabsButton, { tab: "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');
+        expect(component).toBeInTheDocument();
+    });
+    it('should associate the button with the correct tab', () => {
+        render(_jsx(TabsButton, { tab: "one" }));
+        const component = screen.getByRole('tab');
+        expect(component).toHaveAttribute('aria-controls', '-panel-one');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TabsButton, { ref: ref, tab: "one" }));
+        const component = screen.getByRole('tab');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Tabs/TabsContext.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+export type TabsContextValue = {
+    /** 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. */
+    updateTab: (tab: string) => void;
+};
+export declare const TabsContext: import("react").Context<TabsContextValue>;

package/dist/Tabs/TabsContext.js

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import { createContext } from 'react';
+const defaultValues = {
+    activeTabId: undefined,
+    tabsId: '',
+    updateTab: () => { },
+};
+export const TabsContext = createContext(defaultValues);

package/dist/Tabs/TabsList.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TabsListProps = PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Tabs/TabsList.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { useKeyboardFocus } from '../common/useKeyboardFocus';
+export const TabsList = forwardRef(({ children, className, ...restProps }, ref) => {
+    const innerRef = useRef(null);
+    // Use a passed ref if it's there, otherwise use innerRef
+    useImperativeHandle(ref, () => innerRef.current);
+    const { keyDown } = useKeyboardFocus(innerRef, {
+        focusableElements: ['button[role="tab"]'],
+        horizontally: true,
+        rotating: true,
+    });
+    return (_jsx("div", { ...restProps, className: clsx('ams-tabs__list', className), onKeyDown: keyDown, ref: innerRef, role: "tablist", children: children }));
+});
+TabsList.displayName = 'Tabs.List';

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Tabs/TabsList.test.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen } from '@testing-library/react';
+import { createRef } from 'react';
+import { TabsList } from './TabsList';
+import '@testing-library/jest-dom';
+describe('Tabs list', () => {
+    it('renders', () => {
+        render(_jsx(TabsList, {}));
+        const component = screen.getByRole('tablist');
+        expect(component).toBeInTheDocument();
+    });
+    it('renders a design system BEM class name', () => {
+        render(_jsx(TabsList, {}));
+        const component = screen.getByRole('tablist');
+        expect(component).toHaveClass('ams-tabs__list');
+    });
+    it('renders an additional class name', () => {
+        render(_jsx(TabsList, { className: "extra" }));
+        const component = screen.getByRole('tablist');
+        expect(component).toHaveClass('ams-tabs__list extra');
+    });
+    it('supports ForwardRef in React', () => {
+        const ref = createRef();
+        render(_jsx(TabsList, { ref: ref }));
+        const component = screen.getByRole('tablist');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Tabs/TabsPanel.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { HTMLAttributes, PropsWithChildren } from 'react';
+export type TabsPanelProps = {
+    /** The identifier of the corresponding Tab. */
+    tab: string;
+} & PropsWithChildren<HTMLAttributes<HTMLDivElement>>;
+export declare const TabsPanel: import("react").ForwardRefExoticComponent<{
+    /** The identifier of the corresponding Tab. */
+    tab: string;
+} & HTMLAttributes<HTMLDivElement> & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;

package/dist/Tabs/TabsPanel.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+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) {
+        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 }));
+});
+TabsPanel.displayName = 'Tabs.Panel';

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Tabs/TabsPanel.test.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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" })] }));
+        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" })] }));
+        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" })] }));
+        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();
+    });
+    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" })] }));
+        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$/));
+    });
+    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" })] }));
+        const component = screen.getByRole('tabpanel');
+        expect(ref.current).toBe(component);
+    });
+});

package/dist/Tabs/index.d.ts

@@ -0,0 +1,5 @@
+export { Tabs } from './Tabs';
+export type { TabsProps } from './Tabs';
+export type { TabsPanelProps } from './TabsPanel';
+export type { TabsListProps } from './TabsList';
+export type { TabsButtonProps } from './TabsButton';

package/dist/Tabs/index.js

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

package/dist/TextArea/TextArea.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import type { TextareaHTMLAttributes } from 'react';
+export type TextAreaProps = {
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    resize?: 'none' | 'horizontal' | 'vertical';
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'aria-invalid'>;
+export declare const TextArea: import("react").ForwardRefExoticComponent<{
+    /** Whether the value fails a validation rule. */
+    invalid?: boolean;
+    /** Allows the user to resize the text box. The default is resizing in both directions. */
+    resize?: "none" | "horizontal" | "vertical";
+} & Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "aria-invalid"> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/TextArea/TextArea.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';