@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";
/**
 * @license EUPL-1.2+
 * Copyright Gemeente Amsterdam
 */
import clsx from 'clsx';
import { forwardRef, useImperativeHandle, useRef } from 'react';
import AccordionContext from './AccordionContext';
import { AccordionSection } from './AccordionSection';
import { useKeyboardFocus } from '../common/useKeyboardFocus';
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, { 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';
export const Accordion = Object.assign(AccordionRoot, { Section: AccordionSection });