@yamada-ui/react/dist/cjs/components/collapse/collapse.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_utils_index = require('../../utils/index.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_collapse_style = require('./collapse.style.cjs');
const require_factory = require('../motion/factory.cjs');
const require_transition = require('../motion/transition.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);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);

//#region src/components/collapse/collapse.tsx
const variants = {
	enter: ({ animationOpacity, delay, duration, endingHeight: height, enter, transition, transitionEnd } = {}) => ({
		...animationOpacity ? { opacity: 1 } : {},
		height,
		transition: require_transition.createTransition.enter(transition?.enter)(delay, duration),
		transitionEnd: transitionEnd?.enter,
		...enter
	}),
	exit: ({ animationOpacity, delay, duration, exit, startingHeight: height, transition, transitionEnd } = {}) => ({
		...animationOpacity ? { opacity: (0, require_utils_index.utils_exports.isNumeric)(height) ? 1 : 0 } : {},
		height,
		transition: require_transition.createTransition.exit(transition?.exit)(delay, duration),
		transitionEnd: transitionEnd?.exit,
		...exit
	})
};
const { PropsContext: CollapsePropsContext, usePropsContext: useCollapsePropsContext, withContext } = require_create_component.createComponent("collapse", require_collapse_style.collapseStyle);
/**
* `Collapse` is a component that allows you to expand or collapse an element for display.
*
* @see https://yamada-ui.com/docs/components/collapse
*/
const Collapse = withContext(({ style, animationOpacity = true, delay, duration, endingHeight = "auto", open: openProp, startingHeight = 0, transition: transitionProp, transitionEnd, unmountOnExit,...rest }) => {
	const [mounted, setMounted] = (0, react.useState)(false);
	const animate = openProp || unmountOnExit ? "enter" : "exit";
	const open = unmountOnExit ? openProp : true;
	const transition = (0, react.useMemo)(() => {
		if (!mounted) return { enter: { duration: 0 } };
		else if (transitionProp) return transitionProp;
		else return {
			enter: {
				height: {
					duration: duration ?? .3,
					ease: [
						.25,
						.1,
						.25,
						1
					]
				},
				opacity: {
					duration: duration ?? .4,
					ease: [
						.25,
						.1,
						.25,
						1
					]
				}
			},
			exit: {
				height: {
					duration: duration ?? .3,
					ease: [
						.25,
						.1,
						.25,
						1
					]
				},
				opacity: {
					duration: duration ?? .4,
					ease: [
						.25,
						.1,
						.25,
						1
					]
				}
			}
		};
	}, [
		mounted,
		duration,
		transitionProp
	]);
	const custom = (0, react.useMemo)(() => ({
		animationOpacity,
		delay,
		duration,
		endingHeight,
		startingHeight,
		transition,
		transitionEnd
	}), [
		animationOpacity,
		delay,
		duration,
		endingHeight,
		startingHeight,
		transition,
		transitionEnd
	]);
	(0, react.useEffect)(() => {
		if ((0, require_utils_index.utils_exports.createdDom)()) setMounted(true);
	}, []);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
		custom,
		initial: false,
		children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
			style: {
				overflow: "hidden",
				...style
			},
			animate,
			custom,
			exit: "exit",
			initial: unmountOnExit ? "exit" : false,
			variants,
			...rest
		}) : null
	});
})();

//#endregion
exports.Collapse = Collapse;
exports.CollapsePropsContext = CollapsePropsContext;
exports.useCollapsePropsContext = useCollapsePropsContext;
//# sourceMappingURL=collapse.cjs.map