@yamada-ui/react/dist/cjs/components/snacks/snacks.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_effect = require('../../utils/effect.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_var = require('../../core/system/var.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_transition = require('../motion/transition.cjs');
const require_hooks_use_timeout_index = require('../../hooks/use-timeout/index.cjs');
const require_alert = require('../alert/alert.cjs');
const require_close_button = require('../close-button/close-button.cjs');
const require_snacks_style = require('./snacks.style.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/snacks/snacks.tsx
const { ComponentContext, PropsContext: SnacksPropsContext, useComponentContext, usePropsContext: useSnacksPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("snacks", require_snacks_style.snacksStyle);
const Snacks = withProvider(({ snacks: { direction = "start", items, startIndex = 0 }, listProps,...rest }) => {
	const count = items.length;
	const elMapRef = (0, react.useRef)(/* @__PURE__ */ new Map());
	const [height, setHeight] = (0, react.useState)(0);
	const [exist, setExist] = (0, react.useState)(!!count);
	const show = !!count || exist;
	const context = (0, react.useMemo)(() => ({
		direction,
		elMapRef,
		setExist,
		startIndex
	}), [direction, startIndex]);
	const onExitComplete = (0, react.useCallback)(() => {
		if (!count) setExist(false);
	}, [count]);
	(0, react.useEffect)(() => {
		let height$1 = 0;
		if (!count) return;
		const els = [...elMapRef.current.values()].slice(0, count);
		for (const el of els) {
			if (!el) continue;
			let { offsetHeight, offsetTop } = el;
			offsetHeight += offsetTop;
			if (offsetHeight > height$1) height$1 = offsetHeight;
		}
		setHeight(height$1);
	}, [count, direction]);
	require_effect.useUpdateEffect(() => {
		if (!!count) setExist(true);
	}, [count]);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComponentContext, {
		value: context,
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
			initial: false,
			children: show ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.div, {
				...rest,
				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackList, {
					custom: { height },
					...listProps,
					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
						onExitComplete,
						children: items.map((props, index) => {
							return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Snack, {
								index,
								lastIndex: count - index - 1,
								...props
							}, props.id);
						})
					})
				})
			}) : null
		})
	});
}, "root")({
	animate: "animate",
	exit: "exit",
	initial: "initial",
	variants: {
		animate: {
			padding: "var(--top) 0 var(--bottom)",
			transition: { duration: .4 }
		},
		exit: { padding: 0 },
		initial: { padding: 0 }
	}
}, ({ gap, gutter = [0, "lg"], negativeMargins = true,...rest }) => ({
	"data-negative": (0, require_utils_index.utils_exports.dataAttr)(negativeMargins),
	"--bottom": require_var.varAttr(gutter[1], "spaces", "0px"),
	"--gap": require_var.varAttr(gap, "spaces"),
	"--top": require_var.varAttr(gutter[0], "spaces", "0px"),
	...rest
}));
const SnackList = withContext(require_factory.motion.div, "list")({
	animate: "animate",
	exit: "exit",
	initial: "initial",
	role: "list",
	variants: {
		animate: ({ height }) => ({
			height,
			opacity: 1,
			transition: { duration: .4 }
		}),
		exit: {
			height: 0,
			opacity: 0
		},
		initial: {
			height: 0,
			opacity: 1
		}
	}
});
const Snack = withContext(({ variant = "plain", closable = true, description, duration: durationProp = null, loadingScheme, status, title, withIcon = true, closeButtonProps, contentProps, descriptionProps, iconProps, loadingProps, titleProps, onClose: onCloseProp, onCloseComplete,...rest }) => {
	const [duration, setDuration] = (0, react.useState)(durationProp);
	const present = (0, motion_react.useIsPresent)();
	const onClose = present ? onCloseProp : require_utils_index.utils_exports.noop;
	const onMouseEnter = (0, react.useCallback)(() => {
		setDuration(null);
	}, []);
	const onMouseLeave = (0, react.useCallback)(() => {
		setDuration(durationProp);
	}, [durationProp]);
	require_effect.useUpdateEffect(() => {
		if (!present) onCloseComplete?.();
	}, [present]);
	require_effect.useUpdateEffect(() => {
		setDuration(durationProp);
	}, [durationProp]);
	require_hooks_use_timeout_index.useTimeout(onClose, duration);
	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_alert.AlertRoot, {
		as: require_factory.motion.div,
		variant,
		status,
		...rest,
		onMouseEnter: (0, require_utils_index.utils_exports.handlerAll)(rest.onMouseEnter, onMouseEnter),
		onMouseLeave: (0, require_utils_index.utils_exports.handlerAll)(rest.onMouseLeave, onMouseLeave),
		children: [
			withIcon ? loadingScheme ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertLoading, {
				loadingScheme,
				...loadingProps
			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertIcon, { ...iconProps }) : null,
			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SnackContent, {
				"data-close-button": (0, require_utils_index.utils_exports.dataAttr)(closable),
				...contentProps,
				children: [title ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertTitle, {
					me: "0",
					...titleProps,
					children: title
				}) : null, description ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_alert.AlertDescription, {
					...descriptionProps,
					children: description
				}) : null]
			}),
			closable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SnackCloseButton, {
				"data-variant": variant,
				...closeButtonProps,
				onClick: (0, require_utils_index.utils_exports.handlerAll)(closeButtonProps?.onClick, onClose)
			}) : null
		]
	});
}, "item")({
	animate: "animate",
	exit: "exit",
	initial: "initial",
	layout: true,
	role: "listitem",
	variants: {
		animate: ({ index }) => ({
			opacity: 1,
			transition: require_transition.createTransition.enter()(!index ? .2 : 0, .4),
			y: 0
		}),
		exit: {
			opacity: 0,
			transition: require_transition.createTransition.exit()(void 0, .2)
		},
		initial: ({ direction, index }) => ({
			opacity: 0,
			...index ? { y: (direction === "start" ? -1 : 1) * 16 } : {}
		})
	}
}, ({ index, lastIndex,...rest }) => {
	const ref = (0, react.useRef)(null);
	const { direction, elMapRef, startIndex } = useComponentContext();
	(0, react.useEffect)(() => {
		const elMap = elMapRef.current;
		elMap.set(index, ref.current);
		return () => {
			elMap.delete(index);
		};
	}, [elMapRef, index]);
	return {
		ref,
		"--index": direction === "start" ? lastIndex : index,
		"--z-index": startIndex + index,
		custom: {
			direction,
			index
		},
		...rest
	};
});
const SnackContent = withContext("div", "content")();
const SnackCloseButton = withContext(require_close_button.CloseButton, "closeButton")();

//#endregion
exports.Snacks = Snacks;
//# sourceMappingURL=snacks.cjs.map