@amsterdam/design-system-react/dist/Tabs/TabsList.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, 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: ['.ams-tabs__button:not([disabled])'],
        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';