@mantine/hooks/cjs/use-collapse/use-horizontal-collapse.cjs

A collection of 50+ hooks for state and UI management

"use client";
const require_use_did_update = require("../use-did-update/use-did-update.cjs");
const require_use_merged_ref = require("../use-merged-ref/use-merged-ref.cjs");
let react = require("react");
let react_dom = require("react-dom");
//#region packages/@mantine/hooks/src/use-collapse/use-horizontal-collapse.ts
function getAutoWidthDuration(width) {
	if (!width || typeof width === "string") return 0;
	const constant = width / 36;
	return Math.round((4 + 15 * constant ** .25 + constant / 5) * 10);
}
function getElementWidth(elementRef) {
	return elementRef.current ? elementRef.current.scrollWidth : "auto";
}
function useHorizontalCollapse({ transitionDuration, transitionTimingFunction = "ease", onTransitionEnd, onTransitionStart, expanded, keepMounted }) {
	const collapsedStyles = {
		width: 0,
		overflow: "hidden",
		...keepMounted ? {} : { display: "none" }
	};
	const elementRef = (0, react.useRef)(null);
	const [styles, setStylesRaw] = (0, react.useState)(expanded ? {} : collapsedStyles);
	const [state, setState] = (0, react.useState)(expanded ? "entered" : "exited");
	const setStyles = (newStyles) => {
		(0, react_dom.flushSync)(() => setStylesRaw(newStyles));
	};
	const mergeStyles = (newStyles) => {
		setStyles((oldStyles) => ({
			...oldStyles,
			...newStyles
		}));
	};
	const getTransitionStyles = (width) => {
		const duration = transitionDuration || getAutoWidthDuration(width);
		return { transition: `width ${duration}ms ${transitionTimingFunction}, opacity ${duration}ms ${transitionTimingFunction}` };
	};
	require_use_did_update.useDidUpdate(() => {
		if (transitionDuration !== 0) onTransitionStart?.();
		if (expanded) window.requestAnimationFrame(() => {
			(0, react_dom.flushSync)(() => setState("entering"));
			mergeStyles({
				willChange: "width",
				display: "block",
				overflow: "hidden"
			});
			window.requestAnimationFrame(() => {
				const width = getElementWidth(elementRef);
				mergeStyles({
					...getTransitionStyles(width),
					width
				});
			});
		});
		else window.requestAnimationFrame(() => {
			(0, react_dom.flushSync)(() => setState("exiting"));
			const width = getElementWidth(elementRef);
			mergeStyles({
				...getTransitionStyles(width),
				willChange: "width",
				width
			});
			window.requestAnimationFrame(() => mergeStyles({
				width: 0,
				overflow: "hidden"
			}));
		});
	}, [expanded, onTransitionStart]);
	const handleTransitionEnd = (event) => {
		if (event.target !== elementRef.current || event.propertyName !== "width") return;
		if (expanded) {
			const width = getElementWidth(elementRef);
			if (width === styles.width) setStyles({});
			else mergeStyles({ width });
			setState("entered");
			onTransitionEnd?.();
		} else if (styles.width === 0) {
			setStyles(collapsedStyles);
			setState("exited");
			onTransitionEnd?.();
		}
	};
	return {
		state,
		getCollapseProps: (input) => ({
			"aria-hidden": !expanded,
			inert: !expanded,
			ref: require_use_merged_ref.mergeRefs(elementRef, input?.ref),
			onTransitionEnd: handleTransitionEnd,
			style: {
				boxSizing: "border-box",
				...input?.style,
				...styles
			}
		})
	};
}
//#endregion
exports.useHorizontalCollapse = useHorizontalCollapse;

//# sourceMappingURL=use-horizontal-collapse.cjs.map