@vectara/vectara-ui/lib/components/accordion/Accordion.js

Vectara's design system, codified as a React and Sass component library

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import classNames from "classnames";
import { BiChevronDown, BiChevronRight } from "react-icons/bi";
import { VuiFlexContainer } from "../flex/FlexContainer";
import { VuiFlexItem } from "../flex/FlexItem";
import { VuiIcon } from "../icon/Icon";
import { VuiText } from "../typography/Text";
import { createId } from "../../utils/createId";
export const VuiAccordion = (_a) => {
    var { header, children, isOpen, setIsOpen, headerSize, padding = "m", bodyPadding = "m", frame = true, append } = _a, rest = __rest(_a, ["header", "children", "isOpen", "setIsOpen", "headerSize", "padding", "bodyPadding", "frame", "append"]);
    const buttonId = createId();
    const contentId = createId();
    const headerClasses = classNames("vuiAccordionHeader", {
        "vuiAccordionHeader--isOpen": isOpen,
        "vuiAccordionHeader--paddingNone": padding === "none",
        "vuiAccordionHeader--noFrame": !frame || append
    });
    const bodyClasses = classNames("vuiAccordionBody", {
        "vuiAccordionBody--paddingNone": padding === "none" || bodyPadding === "none",
        "vuiAccordionBody--noFrame": !frame
    });
    const button = (_jsx("button", Object.assign({ className: headerClasses, onClick: () => setIsOpen(!isOpen), id: buttonId, "aria-controls": contentId, "aria-expanded": isOpen, type: "button" }, rest, { children: _jsxs(VuiFlexContainer, Object.assign({ alignItems: "center", justifyContent: "start", spacing: "xxs" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: _jsx(VuiIcon, Object.assign({ size: "m", color: "neutral" }, { children: isOpen ? _jsx(BiChevronDown, {}) : _jsx(BiChevronRight, {}) })) })), _jsx(VuiFlexItem, Object.assign({ className: "vuiAccordionHeader__title", grow: 1 }, { children: _jsx(VuiText, Object.assign({ size: headerSize }, { children: header })) }))] })) })));
    return (_jsxs(_Fragment, { children: [append ? (_jsxs(VuiFlexContainer, Object.assign({ className: classNames("vuiAccordionHeader__wrapper", {
                    "vuiAccordionHeader__wrapper--isOpen": isOpen,
                    "vuiAccordionHeader__wrapper--noFrame": !frame
                }), alignItems: "center", justifyContent: "spaceBetween" }, { children: [_jsx(VuiFlexItem, Object.assign({ grow: 1 }, { children: button })), _jsx(VuiFlexItem, Object.assign({ grow: false, shrink: false }, { children: append }))] }))) : (button), isOpen && (_jsx("div", Object.assign({ className: bodyClasses, id: contentId, "aria-labelledby": buttonId }, { children: children })))] }));
};