@equinor/eds-core-react/dist/esm/components/Accordion/Accordion.js

The React implementation of the Equinor Design System

import { forwardRef, Children, cloneElement } from 'react';
import { ThemeProvider } from 'styled-components';
import { accordion } from './Accordion.tokens.js';
import { useId, useToken } from '@equinor/eds-utils';
import { jsx } from 'react/jsx-runtime';
import { useEds } from '../EdsProvider/eds.context.js';

const Accordion = /*#__PURE__*/forwardRef(function Accordion({
  headerLevel = 'h2',
  chevronPosition = 'left',
  children,
  id,
  ...props
}, ref) {
  const accordionId = useId(id, 'accordion');
  const {
    density
  } = useEds();
  const token = useToken({
    density
  }, accordion);
  const AccordionItems = Children.map(children, (child, index) => {
    if (!child) return null;
    return /*#__PURE__*/cloneElement(child, {
      accordionId,
      index,
      headerLevel,
      chevronPosition
    });
  });
  return /*#__PURE__*/jsx(ThemeProvider, {
    theme: token,
    children: /*#__PURE__*/jsx("div", {
      ...props,
      ref: ref,
      children: AccordionItems
    })
  });
});

export { Accordion };