@heroui/accordion
Version:
Collapse display a list of high-level options that can expand/collapse to reveal more information.
62 lines (59 loc) • 1.89 kB
JavaScript
"use client";
import {
accordion_item_default
} from "./chunk-RCYVG55M.mjs";
import {
useAccordion
} from "./chunk-RITOLLZ6.mjs";
// src/accordion.tsx
import { forwardRef } from "@heroui/system";
import { LayoutGroup } from "framer-motion";
import { Divider } from "@heroui/divider";
import { Fragment, useCallback, useMemo } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
var AccordionGroup = forwardRef((props, ref) => {
const {
Component,
values,
state,
isSplitted,
showDivider,
getBaseProps,
disableAnimation,
handleFocusChanged: handleFocusChangedProps,
itemClasses,
dividerProps
} = useAccordion({
...props,
ref
});
const handleFocusChanged = useCallback(
(isFocused, key) => handleFocusChangedProps(isFocused, key),
[handleFocusChangedProps]
);
const content = useMemo(() => {
return [...state.collection].map((item, index) => {
const classNames = { ...itemClasses, ...item.props.classNames || {} };
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
accordion_item_default,
{
item,
variant: props.variant,
onFocusChange: handleFocusChanged,
...values,
...item.props,
classNames
}
),
!item.props.hidden && !isSplitted && showDivider && index < state.collection.size - 1 && /* @__PURE__ */ jsx(Divider, { ...dividerProps })
] }, item.key);
});
}, [values, itemClasses, handleFocusChanged, isSplitted, showDivider, state.collection]);
return /* @__PURE__ */ jsx(Component, { ...getBaseProps(), children: disableAnimation ? content : /* @__PURE__ */ jsx(LayoutGroup, { children: content }) });
});
AccordionGroup.displayName = "HeroUI.Accordion";
var accordion_default = AccordionGroup;
export {
accordion_default
};