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

React component library

import { __assign, __read, __rest } from "tslib";
import React, { forwardRef, useMemo, useCallback, Children } from 'react';
import { isFragment } from 'react-is';
import { useControlled } from '../../hooks/useControlled';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { Collapse } from '../Collapse';
import { AccordionContext } from './AccordionContext';
import { DEFAULT_ACCORDION_SIZE, DEFAULT_ACCORDION_VARIANT } from './constants';
import './Accordion.css';
export var cnAccordion = cn('Accordion');
export var Accordion = forwardRef(function (inProps, ref) {
    var props = useThemeProps({ props: inProps, name: 'Accordion' });
    var _a = props.size, size = _a === void 0 ? DEFAULT_ACCORDION_SIZE : _a, _b = props.variant, variant = _b === void 0 ? 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 = __rest(props, ["size", "variant", "className", "defaultExpanded", "expanded", "compressed", "unmountOnClosed", "children", "onChange"]);
    var _c = __read(useControlled({
        value: expandedProp,
        defaultValue: defaultExpanded,
        name: 'Accordion',
        state: 'open',
    }), 2), expanded = _c[0], setExpanded = _c[1];
    var resolvedChildren = isFragment(childrenProp)
        ? childrenProp.props.children
        : childrenProp;
    var _d = __read(Children.toArray(resolvedChildren)), summary = _d[0], children = _d.slice(1);
    var handleChange = useCallback(function (e) {
        setExpanded(!expanded);
        onChange === null || onChange === void 0 ? void 0 : onChange(!expanded, e);
    }, [expanded]);
    var contextValue = useMemo(function () { return ({ expanded: !!expanded, toggle: handleChange, size: size }); }, [handleChange, expanded, size]);
    return (React.createElement("div", __assign({ ref: ref, className: cnAccordion({ size: size, compressed: compressed, variant: variant }, [className]) }, other),
        React.createElement(AccordionContext.Provider, { value: contextValue },
            summary,
            React.createElement(Collapse, { expanded: expanded, unmountOnClosed: unmountOnClosed }, children))));
});
Accordion.displayName = 'Accordion';