'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var React = require('react');
var reactTransitionGroup = require('react-transition-group');
var jsxRuntime = require('react/jsx-runtime');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);

const DropFade = ({
  children,
  show
}) => {
  const reference = React.useRef(null);
  const [height, setHeight] = React.useState(0);
  const clonedChild = /*#__PURE__*/React__default.default.cloneElement(children);
  return /*#__PURE__*/jsxRuntime.jsx(reactTransitionGroup.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__*/jsxRuntime.jsx("div", {
      ref: reference,
      style: {
        height
      },
      className: "np-dropfade",
      children: clonedChild
    })
  });
};

exports.default = DropFade;
//# sourceMappingURL=DropFade.js.map
