@amsterdam/design-system-react/dist/Accordion/Accordion.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";
import { clsx } from 'clsx';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import { useKeyboardFocus } from '../common/useKeyboardFocus';
import AccordionContext from './AccordionContext';
import { AccordionSection } from './AccordionSection';
const AccordionRoot = forwardRef(({ children, className, headingLevel, sectionAs = 'section' }, 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-accordion__button:not([disabled])'],
        rotating: true,
    });
    return (_jsx(AccordionContext.Provider, { value: { headingLevel: headingLevel, sectionAs: sectionAs }, children: _jsx("div", { className: clsx('ams-accordion', className), onKeyDown: keyDown, ref: innerRef, children: children }) }));
});
AccordionRoot.displayName = 'Accordion';
/**
 * @see {@link https://designsystem.amsterdam/?path=/docs/components-containers-accordion--docs Accordion docs at Amsterdam Design System}
 */
export const Accordion = Object.assign(AccordionRoot, { Section: AccordionSection });