{"ast":null,"code":"import _extends from \"@babel/runtime/helpers/esm/extends\";\nimport _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport PopperJS from 'popper.js';\nimport PropTypes from 'prop-types';\nimport React, { useState } from 'react';\nimport ReactDOM from 'react-dom';\nimport useCallbackRef from '@restart/hooks/useCallbackRef';\nimport useMergedRefs from '@restart/hooks/useMergedRefs';\nimport usePopper from './usePopper';\nimport useRootClose from './useRootClose';\nimport useWaitForDOMRef from './utils/useWaitForDOMRef';\n/**\n * Built on top of `Popper.js`, the overlay component is\n * great for custom tooltip overlays.\n */\n\nvar Overlay = React.forwardRef(function (props, outerRef) {\n  var flip = props.flip,\n      placement = props.placement,\n      containerPadding = props.containerPadding,\n      _props$popperConfig = props.popperConfig,\n      popperConfig = _props$popperConfig === void 0 ? {} : _props$popperConfig,\n      Transition = props.transition;\n\n  var _useCallbackRef = useCallbackRef(),\n      rootElement = _useCallbackRef[0],\n      attachRef = _useCallbackRef[1];\n\n  var _useCallbackRef2 = useCallbackRef(),\n      arrowElement = _useCallbackRef2[0],\n      attachArrowRef = _useCallbackRef2[1];\n\n  var mergedRef = useMergedRefs(attachRef, outerRef);\n  var container = useWaitForDOMRef(props.container);\n  var target = useWaitForDOMRef(props.target);\n\n  var _useState = useState(!props.show),\n      exited = _useState[0],\n      setExited = _useState[1];\n\n  var _popperConfig$modifie = popperConfig.modifiers,\n      modifiers = _popperConfig$modifie === void 0 ? {} : _popperConfig$modifie;\n\n  var _usePopper = usePopper(target, rootElement, _extends({}, popperConfig, {\n    placement: placement || 'bottom',\n    enableEvents: props.show,\n    modifiers: _extends({}, modifiers, {\n      preventOverflow: _extends({\n        padding: containerPadding || 5\n      }, modifiers.preventOverflow),\n      arrow: _extends({}, modifiers.arrow, {\n        enabled: !!arrowElement,\n        element: arrowElement\n      }),\n      flip: _extends({\n        enabled: !!flip\n      }, modifiers.preventOverflow)\n    })\n  })),\n      styles = _usePopper.styles,\n      arrowStyles = _usePopper.arrowStyles,\n      popper = _objectWithoutPropertiesLoose(_usePopper, [\"styles\", \"arrowStyles\"]);\n\n  if (props.show) {\n    if (exited) setExited(false);\n  } else if (!props.transition && !exited) {\n    setExited(true);\n  }\n\n  var handleHidden = function handleHidden() {\n    setExited(true);\n\n    if (props.onExited) {\n      props.onExited.apply(props, arguments);\n    }\n  }; // Don't un-render the overlay while it's transitioning out.\n\n\n  var mountOverlay = props.show || Transition && !exited;\n  useRootClose(rootElement, props.onHide, {\n    disabled: !props.rootClose || props.rootCloseDisabled,\n    clickTrigger: props.rootCloseEvent\n  });\n\n  if (!mountOverlay) {\n    // Don't bother showing anything if we don't have to.\n    return null;\n  }\n\n  var child = props.children(_extends({}, popper, {\n    show: props.show,\n    props: {\n      style: styles,\n      ref: mergedRef\n    },\n    arrowProps: {\n      style: arrowStyles,\n      ref: attachArrowRef\n    }\n  }));\n\n  if (Transition) {\n    var onExit = props.onExit,\n        onExiting = props.onExiting,\n        onEnter = props.onEnter,\n        onEntering = props.onEntering,\n        onEntered = props.onEntered;\n    child = React.createElement(Transition, {\n      \"in\": props.show,\n      appear: true,\n      onExit: onExit,\n      onExiting: onExiting,\n      onExited: handleHidden,\n      onEnter: onEnter,\n      onEntering: onEntering,\n      onEntered: onEntered\n    }, child);\n  }\n\n  return container ? ReactDOM.createPortal(child, container) : null;\n});\nOverlay.displayName = 'Overlay';\nOverlay.propTypes = {\n  /**\n   * Set the visibility of the Overlay\n   */\n  show: PropTypes.bool,\n\n  /** Specify where the overlay element is positioned in relation to the target element */\n  placement: PropTypes.oneOf(PopperJS.placements),\n\n  /**\n   * A DOM Element, Ref to an element, or function that returns either. The `target` element is where\n   * the overlay is positioned relative to.\n   */\n  target: PropTypes.any,\n\n  /**\n   * A DOM Element, Ref to an element, or function that returns either. The `container` will have the Portal children\n   * appended to it.\n   */\n  container: PropTypes.any,\n\n  /**\n   * Enables the Popper.js `flip` modifier, allowing the Overlay to\n   * automatically adjust it's placement in case of overlap with the viewport or toggle.\n   * Refer to the [flip docs](https://popper.js.org/popper-documentation.html#modifiers..flip.enabled) for more info\n   */\n  flip: PropTypes.bool,\n\n  /**\n   * A render prop that returns an element to overlay and position. See\n   * the [react-popper documentation](https://github.com/FezVrasta/react-popper#children) for more info.\n   *\n   * @type {Function ({\n   *   show: boolean,\n   *   placement: Placement,\n   *   outOfBoundaries: ?boolean,\n   *   scheduleUpdate: () => void,\n   *   props: {\n   *     ref: (?HTMLElement) => void,\n   *     style: { [string]: string | number },\n   *     aria-labelledby: ?string\n   *   },\n   *   arrowProps: {\n   *     ref: (?HTMLElement) => void,\n   *     style: { [string]: string | number },\n   *   },\n   * }) => React.Element}\n   */\n  children: PropTypes.func.isRequired,\n\n  /**\n   * Control how much space there is between the edge of the boundary element and overlay.\n   * A convenience shortcut to setting `popperConfig.modfiers.preventOverflow.padding`\n   */\n  containerPadding: PropTypes.number,\n\n  /**\n   * A set of popper options and props passed directly to react-popper's Popper component.\n   */\n  popperConfig: PropTypes.object,\n\n  /**\n   * Specify whether the overlay should trigger `onHide` when the user clicks outside the overlay\n   */\n  rootClose: PropTypes.bool,\n\n  /**\n   * Specify event for toggling overlay\n   */\n  rootCloseEvent: PropTypes.oneOf(['click', 'mousedown']),\n\n  /**\n   * Specify disabled for disable RootCloseWrapper\n   */\n  rootCloseDisabled: PropTypes.bool,\n\n  /**\n   * A Callback fired by the Overlay when it wishes to be hidden.\n   *\n   * __required__ when `rootClose` is `true`.\n   *\n   * @type func\n   */\n  onHide: function onHide(props) {\n    var propType = PropTypes.func;\n\n    if (props.rootClose) {\n      propType = propType.isRequired;\n    }\n\n    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {\n      args[_key - 1] = arguments[_key];\n    }\n\n    return propType.apply(void 0, [props].concat(args));\n  },\n\n  /**\n   * A `react-transition-group@2.0.0` `<Transition/>` component\n   * used to animate the overlay as it changes visibility.\n   */\n  transition: PropTypes.elementType,\n\n  /**\n   * Callback fired before the Overlay transitions in\n   */\n  onEnter: PropTypes.func,\n\n  /**\n   * Callback fired as the Overlay begins to transition in\n   */\n  onEntering: PropTypes.func,\n\n  /**\n   * Callback fired after the Overlay finishes transitioning in\n   */\n  onEntered: PropTypes.func,\n\n  /**\n   * Callback fired right before the Overlay transitions out\n   */\n  onExit: PropTypes.func,\n\n  /**\n   * Callback fired as the Overlay begins to transition out\n   */\n  onExiting: PropTypes.func,\n\n  /**\n   * Callback fired after the Overlay finishes transitioning out\n   */\n  onExited: PropTypes.func\n};\nOverlay.defaultProps = {\n  containerPadding: 5\n};\nexport default Overlay;","map":null,"metadata":{},"sourceType":"module"}