require('./Popover_1ed9tky.css');
'use strict';

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

var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
var React = require('react');
var cls = require('classnames');
var react = require('@floating-ui/react');
var IconClose = require('../../_Icon/Icons/IconClose.js');
var Slot = require('../../_Slot/Slot.js');
var Popover_tokens = require('./Popover.tokens.js');
var Popover_styles = require('./Popover.styles.js');
var getFloatingPortalProps = require('./utils/getFloatingPortalProps.js');
var matchPlacements = require('./utils/matchPlacements.js');
var sizeToIconSize = require('./utils/sizeToIconSize.js');
var Resizable = require('../../_Resizable/Resizable.js');

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

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

var _excluded = ["appearance", "children", "target", "opened", "defaultOpened", "trigger", "placement", "hasTail", "flip", "shift", "offset", "outsideClick", "resizable", "onResizeStart", "onResizeEnd", "onToggle", "delayOpen", "delayClose", "zIndex", "className", "style", "size", "view", "portal"];
/* Ширина хвостика */
var ARROW_WIDTH = 20;
/* Высота хвостика */
var ARROW_HEIGHT = 8;
/* SVG хвостика */
var ARROW_POLYGON = 'M20 20L0 20C8.88889 20.0001 10 12.5714 10 12C10 12.5714 11.3273 20.006 20 20Z';
/* Отступ хвостика по краям (чтобы избежать коллизии со скругленными углами) */
var ARROW_PADDING = 16;
var popoverRoot = function popoverRoot(Root) {
  return /*#__PURE__*/React.forwardRef(function (_ref, outerRootRef) {
    var _ref$appearance = _ref.appearance,
      appearance = _ref$appearance === void 0 ? 'closeNone' : _ref$appearance,
      children = _ref.children,
      target = _ref.target,
      outerOpened = _ref.opened,
      _ref$defaultOpened = _ref.defaultOpened,
      defaultOpened = _ref$defaultOpened === void 0 ? false : _ref$defaultOpened,
      _ref$trigger = _ref.trigger,
      trigger = _ref$trigger === void 0 ? 'click' : _ref$trigger,
      _ref$placement = _ref.placement,
      placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
      _ref$hasTail = _ref.hasTail,
      hasTail = _ref$hasTail === void 0 ? true : _ref$hasTail,
      _ref$flip = _ref.flip,
      outsideFlip = _ref$flip === void 0 ? false : _ref$flip,
      _ref$shift = _ref.shift,
      outsideShift = _ref$shift === void 0 ? false : _ref$shift,
      _ref$offset = _ref.offset,
      outerOffset = _ref$offset === void 0 ? 0 : _ref$offset,
      _ref$outsideClick = _ref.outsideClick,
      outsideClick = _ref$outsideClick === void 0 ? true : _ref$outsideClick,
      _ref$resizable = _ref.resizable,
      resizable = _ref$resizable === void 0 ? false : _ref$resizable,
      onResizeStart = _ref.onResizeStart,
      onResizeEnd = _ref.onResizeEnd,
      onToggle = _ref.onToggle,
      _ref$delayOpen = _ref.delayOpen,
      delayOpen = _ref$delayOpen === void 0 ? 0 : _ref$delayOpen,
      _ref$delayClose = _ref.delayClose,
      delayClose = _ref$delayClose === void 0 ? 0 : _ref$delayClose,
      _ref$zIndex = _ref.zIndex,
      zIndex = _ref$zIndex === void 0 ? 1000 : _ref$zIndex,
      className = _ref.className,
      style = _ref.style,
      size = _ref.size,
      view = _ref.view,
      portal = _ref.portal,
      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
    var _useState = React.useState(defaultOpened),
      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
      innerOpened = _useState2[0],
      setInnerOpened = _useState2[1];
    var opened = outerOpened !== null && outerOpened !== void 0 ? outerOpened : innerOpened;
    var arrowRef = React.useRef(null);
    var handleToggle = function handleToggle(opened) {
      setInnerOpened(opened);
      if (onToggle) {
        onToggle(opened);
      }
    };
    var _useFloating = react.useFloating({
        whileElementsMounted: react.autoUpdate,
        placement: placement,
        open: opened,
        onOpenChange: handleToggle,
        middleware: [outsideShift && react.shift({
          limiter: react.limitShift()
        }), outsideFlip && react.flip(), hasTail && react.arrow({
          element: arrowRef,
          padding: ARROW_PADDING
        }), react.offset((hasTail ? ARROW_HEIGHT : 0) + outerOffset)]
      }),
      refs = _useFloating.refs,
      floatingStyles = _useFloating.floatingStyles,
      context = _useFloating.context;
    var click = react.useClick(context, {
      enabled: trigger === 'click' || matchMedia('(hover: none)').matches
    });
    var focus = react.useFocus(context, {
      enabled: trigger === 'focus'
    });
    var dismiss = react.useDismiss(context, {
      enabled: true,
      outsidePress: outsideClick
    });
    var role = react.useRole(context);
    var hover = react.useHover(context, {
      mouseOnly: true,
      enabled: trigger === 'hover',
      handleClose: react.safePolygon({
        requireIntent: false
      }),
      delay: {
        open: delayOpen,
        close: delayClose
      }
    });
    var _useInteractions = react.useInteractions([dismiss, role, click, hover, focus]),
      getReferenceProps = _useInteractions.getReferenceProps,
      getFloatingProps = _useInteractions.getFloatingProps;
    return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement(Slot.Slot, _rollupPluginBabelHelpers.extends({
      ref: refs.setReference
    }, getReferenceProps()), target), opened && /*#__PURE__*/React__default.default.createElement(react.FloatingPortal, getFloatingPortalProps.getFloatingPortalProps(portal), /*#__PURE__*/React__default.default.createElement(react.FloatingFocusManager, {
      context: context
    }, /*#__PURE__*/React__default.default.createElement(Root, _rollupPluginBabelHelpers.extends({
      ref: refs.setFloating,
      size: size,
      view: view,
      style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, floatingStyles), {}, {
        zIndex: zIndex
      })
    }, getFloatingProps()), /*#__PURE__*/React__default.default.createElement(Resizable.Resizable, {
      placement: matchPlacements.matchPlacements(placement),
      resizable: resizable,
      onResizeStart: onResizeStart,
      onResizeEnd: onResizeEnd
    }, /*#__PURE__*/React__default.default.createElement(Popover_styles.Wrapper, _rollupPluginBabelHelpers.extends({
      ref: outerRootRef,
      className: cls__default.default(className, Popover_tokens.classes.popoverRoot),
      style: style,
      "data-popover-open": opened
    }, rest), hasTail && /*#__PURE__*/React__default.default.createElement(react.FloatingArrow, {
      ref: arrowRef,
      context: context,
      width: ARROW_WIDTH,
      height: ARROW_HEIGHT,
      fill: "var(".concat(Popover_tokens.tokens.backgroundColor, ")"),
      d: ARROW_POLYGON
    }), children, appearance === 'closeInner' && /*#__PURE__*/React__default.default.createElement(Popover_styles.CloseButton, {
      className: Popover_tokens.classes.popoverCloseIconButton,
      onClick: function onClick() {
        return handleToggle(false);
      }
    }, /*#__PURE__*/React__default.default.createElement(IconClose.IconClose, {
      size: sizeToIconSize.sizeToIconSize(size),
      color: "inherit"
    }))))))));
  });
};
var popoverConfig = {
  name: 'Popover',
  tag: 'div',
  layout: popoverRoot,
  base: Popover_styles.base,
  variations: {
    view: {
      css: "cocm3u7"
    },
    size: {
      css: "c1iu6gdg"
    }
  },
  defaults: {
    view: 'default',
    size: 'm'
  }
};

exports.ARROW_HEIGHT = ARROW_HEIGHT;
exports.ARROW_PADDING = ARROW_PADDING;
exports.ARROW_POLYGON = ARROW_POLYGON;
exports.ARROW_WIDTH = ARROW_WIDTH;
exports.popoverConfig = popoverConfig;
exports.popoverRoot = popoverRoot;
