@codeworker.br/govbr-tw-react/dist/components/Accordion/index.js

Biblioteca de componentes React usando Tailwind CSS que implementa o Padrão Digital de Governo.

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 } from "react/jsx-runtime";
import React, { createContext, useContext, useEffect, useState } from "react";
import { useRef } from "react";
import accordionVariants from "./variants";
import accordionContentVariants from "./content-variants";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronDown, faChevronUp, } from "@fortawesome/free-solid-svg-icons";
import BASE_CLASSNAMES from "../../config/baseClassNames";
import { cn, getUIDClassName } from "../../libs/utils";
const AccordionContext = createContext(null);
const Accordion = (_a) => {
    var { className, children, value, onChange, variant = "default", multi = false, iconPosition = "right", fixedHeight = "", icons = [faChevronDown, faChevronUp], ref } = _a, props = __rest(_a, ["className", "children", "value", "onChange", "variant", "multi", "iconPosition", "fixedHeight", "icons", "ref"]);
    ref = ref === undefined ? useRef(null) : ref;
    const [selected, setSelected] = useState(value);
    useEffect(() => {
        onChange === null || onChange === void 0 ? void 0 : onChange(selected);
    }, [selected]);
    return (_jsx(AccordionContext.Provider, { value: {
            selected,
            setSelected,
            variant,
            multi,
            icons,
            iconPosition,
            fixedHeight,
        }, children: _jsx("ul", Object.assign({ className: cn(BASE_CLASSNAMES.accordion.root, className) }, props, { ref: ref, children: children })) }));
};
const AccordionItem = (_a) => {
    var _b;
    var { className, children, value, id, role } = _a, props = __rest(_a, ["className", "children", "value", "id", "role"]);
    const { selected, setSelected, variant, multi, icons, iconPosition, fixedHeight, } = useContext(AccordionContext);
    const [iconClose, iconOpen] = icons;
    const [open, setOpen] = useState(false);
    useEffect(() => {
        const openStatus = Array.isArray(selected)
            ? selected.includes(value)
            : selected === value;
        setOpen(openStatus);
    }, [selected]);
    const toggleAccordion = () => {
        if (multi) {
            setSelected((prevSelected) => {
                prevSelected = Array.isArray(prevSelected) ? prevSelected : [];
                return prevSelected.includes(value)
                    ? prevSelected.filter((item) => item !== value)
                    : [...prevSelected, value];
            });
        }
        else {
            setSelected(open ? null : value);
        }
    };
    const listItemRef = useRef(null);
    const listTriggerRef = useRef(null);
    const listContentRef = useRef(null);
    const [listTrigger, listContent] = React.Children.toArray(children);
    const suffixCn = getUIDClassName();
    const triggerId = `${BASE_CLASSNAMES.accordion.trigger}-${id === undefined ? suffixCn : id}`;
    const contentId = `${BASE_CLASSNAMES.accordion.content}-${id === undefined ? suffixCn : id}`;
    return (_jsxs("li", Object.assign({ className: cn(BASE_CLASSNAMES.accordion.item) }, props, { ref: listItemRef, children: [_jsxs("header", { className: cn(BASE_CLASSNAMES.accordion.trigger, accordionVariants({ variant, iconPosition })), ref: listTriggerRef, id: triggerId, role: "button", "aria-controls": contentId, "aria-expanded": open, onClick: toggleAccordion, children: [_jsx("span", { className: "flex-1", children: listTrigger }), _jsx(FontAwesomeIcon, { icon: open ? iconOpen : iconClose })] }), _jsx("div", { className: cn("transition-all", fixedHeight, fixedHeight !== "" ? "overflow-auto" : "overflow-hidden"), style: { height: open ? ((_b = listContentRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0 : 0 }, children: _jsx("div", { className: cn(BASE_CLASSNAMES.accordion.content, accordionContentVariants({ variant })), ref: listContentRef, id: contentId, "aria-labelledby": triggerId, children: listContent }) })] })));
};
Accordion.Item = AccordionItem;
export default Accordion;