@amsterdam/design-system-react/dist/Tabs/Tabs.js

All React components from the Amsterdam Design System. Use it to compose pages in your website or application.

import { jsx as _jsx } from "react/jsx-runtime";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import clsx from 'clsx';
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 [activeTabId, setActiveTabId] = useState();
    // Get all tab ids from TabsButtons on first render
    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['aria-controls']];
        }
        // If there is more than 1 child, it will be an array
        if (Array.isArray(tabsListChildren)) {
            return tabsListChildren.map((child) => child.props['aria-controls']);
        }
        // If there are no children, return an empty array
        return [];
    }, []);
    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, 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,
    Panel: TabsPanel,
});