'use strict';

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

var clsx = require('clsx');
var React = require('react');
var reactPopper = require('react-popper');
require('../theme.js');
require('../direction.js');
require('../propsValues/control.js');
require('../propsValues/breakpoint.js');
require('../propsValues/size.js');
require('../propsValues/typography.js');
require('../propsValues/width.js');
require('../propsValues/type.js');
require('../propsValues/dateMode.js');
require('../propsValues/monthFormat.js');
var position = require('../propsValues/position.js');
require('../propsValues/layouts.js');
require('../propsValues/status.js');
require('../propsValues/sentiment.js');
require('../propsValues/profileType.js');
require('../propsValues/variant.js');
require('../propsValues/scroll.js');
require('../propsValues/markdownNodeType.js');
require('../fileType.js');
require('@transferwise/icons');
require('react-intl');
require('../closeButton/CloseButton.messages.js');
var jsxRuntime = require('react/jsx-runtime');
var Dimmer = require('../../dimmer/Dimmer.js');
var OverlayIdProvider = require('../../provider/overlay/OverlayIdProvider.js');

const POPOVER_OFFSET = [0, 16];
// By default the flip positioning explores only the opposite alternative. So if left is passed and there's no enough space
// the right one gets chosen. If there's no space on both sides popover goes back to the initially chosen one left.
// This mapping forces popover to try the four available positions before going back to the initial chosen one.
const fallbackPlacements = {
  [position.Position.TOP]: [position.Position.BOTTOM, position.Position.RIGHT, position.Position.LEFT],
  [position.Position.BOTTOM]: [position.Position.TOP, position.Position.RIGHT, position.Position.LEFT],
  [position.Position.LEFT]: [position.Position.RIGHT, position.Position.TOP, position.Position.BOTTOM],
  [position.Position.RIGHT]: [position.Position.LEFT, position.Position.TOP, position.Position.BOTTOM]
};
const Panel = /*#__PURE__*/React.forwardRef(function Panel({
  arrow = false,
  flip = true,
  altAxis = false,
  children,
  open = false,
  onClose,
  position: position$1 = position.Position.BOTTOM,
  anchorRef,
  anchorWidth = false,
  considerHeight = false,
  ...rest
}, reference) {
  const [arrowElement, setArrowElement] = React.useState(null);
  const [popperElement, setPopperElement] = React.useState(null);
  const modifiers = [];
  if (altAxis) {
    modifiers.push({
      // https://popper.js.org/docs/v2/modifiers/prevent-overflow
      name: 'preventOverflow',
      options: {
        altAxis: true,
        tether: false
      }
    });
  }
  if (arrow) {
    modifiers.push({
      name: 'arrow',
      options: {
        element: arrowElement,
        options: {
          padding: 8 // 8px from the edges of the popper
        }
      }
    });
    // This lets you displace a popper element from its reference element.
    modifiers.push({
      name: 'offset',
      options: {
        offset: POPOVER_OFFSET
      }
    });
  }
  if (flip && fallbackPlacements[position$1]) {
    modifiers.push({
      name: 'flip',
      options: {
        fallbackPlacements: fallbackPlacements[position$1]
      }
    });
  }
  const {
    styles,
    attributes,
    forceUpdate
  } = reactPopper.usePopper(anchorRef.current, popperElement, {
    placement: position$1,
    modifiers
  });
  // If the trigger is not visible when the position is calculated, it will be incorrect. Because this can happen repeatedly (on resize for example),
  // it is most simple just to always position before opening
  React.useEffect(() => {
    if (open && forceUpdate) {
      forceUpdate();
    }
  }, [open]);
  const contentStyle = {
    ...(anchorWidth ? {
      width: anchorRef.current?.clientWidth
    } : undefined)
  };
  const overlayId = React.useContext(OverlayIdProvider.OverlayIdContext);
  return /*#__PURE__*/jsxRuntime.jsx(Dimmer.default, {
    open: open,
    transparent: true,
    fadeContentOnEnter: true,
    fadeContentOnExit: true,
    onClose: onClose,
    children: /*#__PURE__*/jsxRuntime.jsx("div", {
      id: overlayId,
      ...rest,
      ref: setPopperElement,
      role: "dialog",
      style: {
        ...styles.popper
      },
      ...attributes.popper,
      className: clsx.clsx('np-panel', {
        'np-panel--open': open
      }, rest.className),
      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
        ref: reference,
        style: contentStyle,
        className: clsx.clsx('np-panel__content'),
        children: [children, arrow && /*#__PURE__*/jsxRuntime.jsx("div", {
          ref: setArrowElement,
          className: clsx.clsx('np-panel__arrow'),
          style: styles.arrow
        })]
      })
    })
  });
});

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