/** @license MIT | @cube-dev/ui-kit v0.0.0-canary-f1f3d22 | Cube Dev Team */
import { tasty } from "../../../../tasty/tasty.js";
import { forwardRef, useCallback, useRef } from "react";
import { jsx } from "react/jsx-runtime";
import { CSSTransition } from "react-transition-group";

//#region src/components/overlays/NewNotifications/Bar/TransitionComponent.tsx
const CSS_TRANSITION_CLASS_NAME = "cube-notifications-css-transition";
const TRANSITION_TIMEOUT = 250;
const TransitionElement = tasty({ styles: {
	transitionProperty: "height, opacity, margin-top, margin-bottom",
	transitionDuration: `${TRANSITION_TIMEOUT}ms`,
	transitionTimingFunction: "cubic-bezier(0.34, 1.56, 0.64, 1)",
	height: {
		[`.${CSS_TRANSITION_CLASS_NAME}-enter`]: 0,
		[`.${CSS_TRANSITION_CLASS_NAME}-enter-active`]: "$notification-size",
		[`.${CSS_TRANSITION_CLASS_NAME}-exit`]: "$notification-size",
		[`.${CSS_TRANSITION_CLASS_NAME}-exit-active`]: 0
	},
	opacity: {
		[`.${CSS_TRANSITION_CLASS_NAME}-enter`]: 0,
		[`.${CSS_TRANSITION_CLASS_NAME}-enter-active`]: 1,
		[`.${CSS_TRANSITION_CLASS_NAME}-exit`]: 1,
		[`.${CSS_TRANSITION_CLASS_NAME}-exit-active`]: 0
	},
	willChange: {
		[`.${CSS_TRANSITION_CLASS_NAME}-enter`]: "height, opacity",
		[`.${CSS_TRANSITION_CLASS_NAME}-enter-active`]: "height, opacity",
		[`.${CSS_TRANSITION_CLASS_NAME}-exit`]: "height, opacity, margin-top",
		[`.${CSS_TRANSITION_CLASS_NAME}-exit-active`]: "height, opacity"
	},
	marginTop: { [`.${CSS_TRANSITION_CLASS_NAME}-exit-active`]: "-1x" }
} });
const TransitionWrapper = forwardRef(function TransitionWrapper({ children }, ref) {
	return /* @__PURE__ */ jsx(TransitionElement, {
		ref,
		children
	});
});
function TransitionComponent(props) {
	const { children, ...transitionProps } = props;
	const notificationRef = useRef(null);
	const calculateNotificationSize = useCallback(() => {
		if (notificationRef.current) notificationRef.current.style.setProperty("--notification-size", `${notificationRef.current.scrollHeight}px`);
	}, []);
	return /* @__PURE__ */ jsx(CSSTransition, {
		unmountOnExit: true,
		mountOnEnter: true,
		nodeRef: notificationRef,
		timeout: TRANSITION_TIMEOUT,
		classNames: CSS_TRANSITION_CLASS_NAME,
		onEnter: calculateNotificationSize,
		onExit: calculateNotificationSize,
		...transitionProps,
		children: /* @__PURE__ */ jsx(TransitionWrapper, {
			ref: notificationRef,
			children
		})
	});
}

//#endregion
export { TransitionComponent };
//# sourceMappingURL=TransitionComponent.js.map