@yamada-ui/react/dist/cjs/components/accordion/accordion.cjs

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.cjs');
const require_context = require('../../utils/context.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_accordion_style = require('./accordion.style.cjs');
const require_collapse = require('../collapse/collapse.cjs');
const require_chevron_down_icon = require('../icon/icons/chevron-down-icon.cjs');
const require_use_accordion = require('./use-accordion.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/accordion/accordion.tsx
const [AccordionItemComponentContext, useAccordionItemComponentContext] = require_context.createContext({ name: "AccordionItemComponentContext" });
const { ComponentContext, PropsContext: AccordionPropsContext, useComponentContext, usePropsContext: useAccordionPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("accordion", require_accordion_style.accordionStyle);
/**
* `Accordion` is a component for a list that displays information in an expandable or collapsible manner.
*
* @see https://yamada-ui.com/docs/components/accordion
*/
const AccordionRoot = withProvider(({ children, icon, iconHidden, items,...props }) => {
	const { descendants, focusedIndex, index, multiple, setFocusedIndex, setIndex, toggle, getRootProps } = require_use_accordion.useAccordion(props);
	const computedChildren = (0, react.useMemo)(() => {
		if (children) return children;
		return items?.map((props$1, index$1) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionItem, {
			index: index$1,
			...props$1
		}, index$1));
	}, [children, items]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_accordion.AccordionDescendantsContext, {
		value: descendants,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_accordion.AccordionContext, {
			value: (0, react.useMemo)(() => ({
				focusedIndex,
				icon,
				iconHidden,
				index,
				multiple,
				setFocusedIndex,
				setIndex,
				toggle
			}), [
				focusedIndex,
				icon,
				iconHidden,
				index,
				multiple,
				setFocusedIndex,
				setIndex,
				toggle
			]),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
				value: (0, react.useMemo)(() => ({
					icon,
					iconHidden
				}), [icon, iconHidden]),
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
					...getRootProps(),
					children: computedChildren
				})
			})
		})
	});
}, "root")();
const AccordionItem = withContext(({ button, children, icon,...rest }) => {
	const { disabled, open, getButtonProps, getIconProps, getItemProps, getPanelProps } = require_use_accordion.useAccordionItem(rest);
	children = (0, react.useMemo)(() => (0, require_utils_index.utils_exports.runIfFn)(children, {
		disabled,
		expanded: open
	}), [
		children,
		disabled,
		open
	]);
	const [omittedChildren, customAccordionButton, customAccordionPanel] = require_children.useSplitChildren(children, AccordionButton, AccordionPanel);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_accordion.AccordionItemContext, {
		value: (0, react.useMemo)(() => ({
			disabled,
			icon,
			open,
			getButtonProps,
			getIconProps,
			getPanelProps
		}), [
			disabled,
			getButtonProps,
			getPanelProps,
			getIconProps,
			icon,
			open
		]),
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionItemComponentContext, {
			value: (0, react.useMemo)(() => ({ icon }), [icon]),
			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
				...getItemProps(),
				children: [customAccordionButton ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionButton, { children: (0, require_utils_index.utils_exports.runIfFn)(button, {
					disabled,
					expanded: open
				}) }), customAccordionPanel ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionPanel, { children: omittedChildren })]
			})
		})
	});
}, "item")();
const AccordionButton = withContext(({ children, icon: customIcon, containerProps,...rest }) => {
	const { icon: rootIcon } = useComponentContext();
	const { icon: itemIcon } = useAccordionItemComponentContext();
	const { disabled, open, getButtonProps } = require_use_accordion.useAccordionItemContext();
	const props = {
		disabled,
		expanded: open
	};
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.h3, {
		...containerProps,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.button, {
			...getButtonProps(rest),
			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AccordionIcon, { children: (0, require_utils_index.utils_exports.runIfFn)(itemIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(rootIcon, props) ?? (0, require_utils_index.utils_exports.runIfFn)(customIcon, props) })]
		})
	});
}, "button")();
const AccordionIcon = withContext(({ children = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_chevron_down_icon.ChevronDownIcon, {}),...rest }) => {
	const { iconHidden } = useComponentContext();
	const { getIconProps } = require_use_accordion.useAccordionItemContext();
	if (iconHidden) return null;
	if ((0, react.isValidElement)(children)) return (0, react.cloneElement)(children, getIconProps({
		...rest,
		...children.props
	}));
	return react.Children.count(children) > 1 ? react.Children.only(null) : null;
}, "icon")();
const AccordionPanel = withContext(({ animationOpacity, children, delay, duration, endingHeight, startingHeight, transition, transitionEnd, unmountOnExit,...rest }) => {
	const { open, getPanelProps } = require_use_accordion.useAccordionItemContext();
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_collapse.Collapse, {
		animationOpacity,
		delay,
		duration,
		endingHeight,
		open,
		startingHeight,
		transition,
		transitionEnd,
		unmountOnExit,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
			...getPanelProps(rest),
			children: (0, require_utils_index.utils_exports.isString)(children) ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.p, { children }) : children
		})
	});
}, "panel")();

//#endregion
exports.AccordionButton = AccordionButton;
exports.AccordionItem = AccordionItem;
exports.AccordionPanel = AccordionPanel;
exports.AccordionPropsContext = AccordionPropsContext;
exports.AccordionRoot = AccordionRoot;
exports.useAccordionPropsContext = useAccordionPropsContext;
//# sourceMappingURL=accordion.cjs.map