import React__default, { useRef, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { jsx } from 'react/jsx-runtime';

const DropFade = ({
  children,
  show
}) => {
  const reference = useRef(null);
  const [height, setHeight] = useState(0);
  const clonedChild = /*#__PURE__*/React__default.cloneElement(children);
  return /*#__PURE__*/jsx(CSSTransition, {
    nodeRef: reference,
    in: show,
    timeout: 300,
    classNames: "np-dropfade",
    onEntering: () => {
      // Set height so we can animate to the correct height
      setHeight(reference.current?.scrollHeight || 0);
    }
    // Un-set height, as we don't want to presume it should be that height forever
    ,
    onEntered: () => setHeight(undefined),
    onExit: () => {
      setHeight(reference.current?.scrollHeight || 0);
    },
    onExiting: () => {
      setHeight(0);
    },
    children: /*#__PURE__*/jsx("div", {
      ref: reference,
      style: {
        height
      },
      className: "np-dropfade",
      children: clonedChild
    })
  });
};

export { DropFade as default };
//# sourceMappingURL=DropFade.mjs.map
