@ozen-ui/kit/__inner__/cjs/components/Accordion/Accordion.js

React component library

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Accordion = exports.cnAccordion = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importStar(require("react"));
var react_is_1 = require("react-is");
var useControlled_1 = require("../../hooks/useControlled");
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var Collapse_1 = require("../Collapse");
var AccordionContext_1 = require("./AccordionContext");
var constants_1 = require("./constants");
require("./Accordion.css");
exports.cnAccordion = (0, classname_1.cn)('Accordion');
exports.Accordion = (0, react_1.forwardRef)(function (inProps, ref) {
    var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Accordion' });
    var _a = props.size, size = _a === void 0 ? constants_1.DEFAULT_ACCORDION_SIZE : _a, _b = props.variant, variant = _b === void 0 ? constants_1.DEFAULT_ACCORDION_VARIANT : _b, className = props.className, defaultExpanded = props.defaultExpanded, expandedProp = props.expanded, compressed = props.compressed, unmountOnClosed = props.unmountOnClosed, childrenProp = props.children, onChange = props.onChange, other = tslib_1.__rest(props, ["size", "variant", "className", "defaultExpanded", "expanded", "compressed", "unmountOnClosed", "children", "onChange"]);
    var _c = tslib_1.__read((0, useControlled_1.useControlled)({
        value: expandedProp,
        defaultValue: defaultExpanded,
        name: 'Accordion',
        state: 'open',
    }), 2), expanded = _c[0], setExpanded = _c[1];
    var resolvedChildren = (0, react_is_1.isFragment)(childrenProp)
        ? childrenProp.props.children
        : childrenProp;
    var _d = tslib_1.__read(react_1.Children.toArray(resolvedChildren)), summary = _d[0], children = _d.slice(1);
    var handleChange = (0, react_1.useCallback)(function (e) {
        setExpanded(!expanded);
        onChange === null || onChange === void 0 ? void 0 : onChange(!expanded, e);
    }, [expanded]);
    var contextValue = (0, react_1.useMemo)(function () { return ({ expanded: !!expanded, toggle: handleChange, size: size }); }, [handleChange, expanded, size]);
    return (react_1.default.createElement("div", tslib_1.__assign({ ref: ref, className: (0, exports.cnAccordion)({ size: size, compressed: compressed, variant: variant }, [className]) }, other),
        react_1.default.createElement(AccordionContext_1.AccordionContext.Provider, { value: contextValue },
            summary,
            react_1.default.createElement(Collapse_1.Collapse, { expanded: expanded, unmountOnClosed: unmountOnClosed }, children))));
});
exports.Accordion.displayName = 'Accordion';