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

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

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(({ '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(ariaControls);
        });
    };
    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';