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

import { jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, useRef } from 'react';
import { Transition } from 'react-transition-group';
const OPEN_STATES = {
    entering: false,
    entered: true,
};
/**
 * Timeout issues adding css animations to enter may be related to
 * https://github.com/reactjs/react-transition-group/issues/189 or
 * https://github.com/reactjs/react-transition-group/issues/22
 * my VM isn't good enough to debug accurately and get a better answer.
 *
 * As a result, use enter 0 so that is-open is applied once entered
 * it doesn't matter if we know when the css-animation is done on entering
 * for exiting though, give time for the css-animation to play
 * before removing from the DOM
 * **note** hitting esc bypasses exit animation for anyone testing.
 */
export function OpenTransition(props) {
    const nodeRef = useRef(null);
    return (_jsx(Transition, { nodeRef: nodeRef, timeout: { enter: 0, exit: 350 }, ...props, children: (state) => (_jsx("div", { ref: nodeRef, children: Children.map(props.children, (child) => child && cloneElement(child, { isOpen: !!OPEN_STATES[state] })) })) }));
}

        