/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.98.7
 * Released under the MIT license.
 */

import { jsx as _jsx } from "react/jsx-runtime";
import { useCallback, useRef } from 'react';
import { CSSTransition } from 'react-transition-group';
import styled from 'styled-components';
const CSS_TRANSITION_CLASS_NAME = 'cube-notifications-css-transition';
const TRANSITION_TIMEOUT = 250;
export 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 (_jsx(CSSTransition, { unmountOnExit: true, mountOnEnter: true, nodeRef: notificationRef, timeout: TRANSITION_TIMEOUT, classNames: CSS_TRANSITION_CLASS_NAME, onEnter: calculateNotificationSize, onExit: calculateNotificationSize, ...transitionProps, children: _jsx(Transition, { ref: notificationRef, children: children }) }));
}
const Transition = styled.div `
  transition-property: height, opacity, margin-top, margin-bottom;
  transition-duration: ${TRANSITION_TIMEOUT}ms;
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

  &.${CSS_TRANSITION_CLASS_NAME} {
    &-enter {
      height: 0;
      opacity: 0;
      will-change: height, opacity;
    }
    &-enter-active {
      height: var(--__notification-size__);
      opacity: 1;
      will-change: height, opacity;
    }
    &-exit {
      height: var(--__notification-size__);
      opacity: 1;
      will-change: height, opacity, margin-top;
    }
    &-exit-active {
      margin-top: -8px;
      height: 0;
      opacity: 0;
      will-change: height, opacity;
    }
  }
`;

        