@heycar-uikit/core/accordion/modern/Accordion.js

The React UI library from HeyCar

import React from 'react';
import cn from 'classnames';
import Collapse from '../../collapse/modern';
import { ChevronDown } from '../../icons/modern';

var styles = {"accordion":"accordion__accordion_q0a52","accordionOpen":"accordion__accordionOpen_q0a52","header":"accordion__header_q0a52","headerOpen":"accordion__headerOpen_q0a52","headerArrow":"accordion__headerArrow_q0a52","headerDisabled":"accordion__headerDisabled_q0a52","body":"accordion__body_q0a52"};
 require('./styles/default.css');

const Accordion = React.forwardRef(({ children, title, open = false, Component = 'div', disabled = false, dataTestId, className, onExpandedChange, onTransitionEnd, ...restProps }, ref) => {
    const [isOpen, setIsOpen] = React.useState(open);
    const classNames = cn(styles.accordion, {
        [styles.accordionOpen]: isOpen,
    }, className);
    const headerClassNames = cn(styles.header, {
        [styles.headerOpen]: isOpen,
        [styles.headerDisabled]: disabled,
    });
    const handleHeaderButtonChange = (event) => {
        if (disabled)
            return event.preventDefault();
        setIsOpen(!isOpen);
        if (onExpandedChange) {
            onExpandedChange(!isOpen);
        }
    };
    const tabIndex = disabled ? -1 : 0;
    return (React.createElement(Component, { className: classNames, "data-accordion-component": "Accordion", "data-test-id": dataTestId, ref: ref, ...restProps },
        React.createElement("div", { "aria-expanded": isOpen, className: headerClassNames, "data-accordion-component": "AccordionItemButton", onClick: handleHeaderButtonChange, onKeyPress: handleHeaderButtonChange, role: "button", tabIndex: tabIndex },
            title,
            React.createElement("div", { className: styles.headerArrow },
                React.createElement(ChevronDown, { "aria-hidden": "true", color: "inherit" }))),
        React.createElement(Collapse, { className: styles.body, "data-accordion-component": "AccordionItemPanel", onTransitionEnd: onTransitionEnd, open: isOpen, role: "region" }, children)));
});

export { Accordion as default };