"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;var _exportNames = { PopupMenuType: true, PopupMenu: true };exports.PopupMenuType = exports.PopupMenu = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = _interopRequireDefault(require("react"));
var _globalObject = require("@skbkontur/global-object");

var _utils = require("../../lib/utils");

var _identifiers = require("../../lib/events/keyboard/identifiers");






var _ThemeContext = require("../../lib/theming/ThemeContext");
var _ThemeFactory = require("../../lib/theming/ThemeFactory");

var _Popup = require("../Popup");
var _RenderLayer = require("../RenderLayer");


var _CommonWrapper = require("../CommonWrapper");
var _decorator = require("../../components/ResponsiveLayout/decorator");

var _rootNode = require("../../lib/rootNode");
var _createPropsGetter = require("../../lib/createPropsGetter");

var _Menu = require("../Menu");

var _validatePositions = require("./validatePositions");
var _PopupMenu2 = require("./PopupMenu.styles");
var _tids = require("./tids");

Object.keys(_tids).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;if (key in exports && exports[key] === _tids[key]) return;exports[key] = _tids[key];});var _class, _PopupMenu;
































































var PopupMenuType = exports.PopupMenuType = {
  Dropdown: 'dropdown',
  Tooltip: 'tooltip'
};

var Positions = [
'top left',
'top center',
'top right',
'right top',
'right middle',
'right bottom',
'bottom left',
'bottom center',
'bottom right',
'left top',
'left middle',
'left bottom'];var






PopupMenu = exports.PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_class = (_PopupMenu = /*#__PURE__*/function (_React$Component) {function PopupMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.




    rootId = _Popup.PopupIds.root + (0, _utils.getRandomID)();_this.








    getProps = (0, _createPropsGetter.createPropsGetter)(PopupMenu.defaultProps);_this.



    state = {
      menuVisible: false,
      firstItemShouldBeSelected: false
    };_this.

    captionWrapper = null;_this.
    savedFocusableElement = null;_this.
    menu = null;_this.







































































    open = function () {return _this.showMenu();};_this.
    close = function () {return _this.hideMenu();};_this.

    menuRef = function (element) {return _this.menu = element;};_this.

    handleOpen = function () {
      if (_this.menu) {
        _this.menu.focus();
      }
    };_this.

    passPropsToCaption = function (caption) {var _this$props$popupMenu;
      if (typeof caption === 'string' || typeof caption === 'number') {
        return caption;
      }

      return /*#__PURE__*/_react.default.cloneElement(caption, {
        id: _this.props.id,
        'aria-controls': (_this$props$popupMenu = _this.props.popupMenuId) != null ? _this$props$popupMenu : _this.rootId,
        'aria-expanded': _this.state.menuVisible ? 'true' : 'false',
        'aria-label': _this.props['aria-label']
      });
    };_this.

    renderCaption = function () {
      if (typeof _this.props.caption === 'function') {
        var caption = _this.props.caption({
          opened: _this.state.menuVisible,
          openMenu: _this.showMenu,
          closeMenu: _this.hideMenu,
          toggleMenu: _this.toggleMenu,
          corners: _this.props.corners
        });

        return /*#__PURE__*/(
          _react.default.createElement("span", {
            "data-tid": _tids.PopupMenuDataTids.caption,
            className: _PopupMenu2.styles.caption(),
            ref: function ref(element) {return _this.captionWrapper = element;} },

          _this.passPropsToCaption(caption)
          ));

      }

      return /*#__PURE__*/(
        _react.default.createElement("span", {
          "data-tid": _tids.PopupMenuDataTids.caption,
          onClick: _this.handleCaptionClick,
          onKeyDown: _this.handleCaptionKeyDown,
          ref: function ref(element) {return _this.captionWrapper = element;},
          className: _PopupMenu2.styles.caption() },

        _this.passPropsToCaption(_this.props.caption)
        ));

    };_this.

    hideMenuWithoutFocusing = function () {return _this.hideMenu();};_this.










    showMenu = function (firstItemShouldBeSelected) {
      _this.saveFocus();
      _this.setState(
        {
          menuVisible: true,
          firstItemShouldBeSelected: firstItemShouldBeSelected
        },
        function () {
          _this.handleChangeMenuVisible(false);
        }
      );
    };_this.

    hideMenu = function (restoreFocus) {
      _this.setState(
        {
          menuVisible: false,
          firstItemShouldBeSelected: false
        },
        function () {
          _this.handleChangeMenuVisible(!!restoreFocus);
        }
      );
    };_this.

    toggleMenu = function () {
      _this.state.menuVisible ? _this.hideMenu() : _this.showMenu();
    };_this.

    handleCaptionClick = function () {
      _this.toggleMenu();
    };_this.

    handleCaptionKeyDown = function (e) {
      if ((0, _identifiers.someKeys)(_identifiers.isKeyEnter, _identifiers.isKeySpace, _identifiers.isKeyArrowVertical)(e)) {
        e.preventDefault();
        _this.showMenu(true);
      }
    };_this.

    handleKeyDown = function (e) {
      if ((0, _identifiers.isKeyEscape)(e)) {
        var restoreFocus = true;
        _this.hideMenu(restoreFocus);
      }
    };_this.

    saveFocus = function () {
      if (_globalObject.globalObject.document) {
        _this.savedFocusableElement = _globalObject.globalObject.document.activeElement;
      }
    };_this.

    restoreFocus = function () {
      if (_this.savedFocusableElement) {
        _this.savedFocusableElement.focus();
        _this.savedFocusableElement = null;
      }
    };_this.

    handleChangeMenuVisible = function (focusShouldBeRestored) {
      if (focusShouldBeRestored) {
        _this.restoreFocus();
      }

      if (_this.state.menuVisible && _this.props.onOpen) {
        _this.props.onOpen();
      }

      if (!_this.state.menuVisible && _this.props.onClose) {
        _this.props.onClose();
      }

      if (typeof _this.props.onChangeMenuState === 'function') {
        _this.props.onChangeMenuState(_this.state.menuVisible, focusShouldBeRestored);
      }
    };_this.

    handleItemSelection = function (event) {
      if (event.isDefaultPrevented()) {
        return;
      }

      if (event.type === 'keydown') {
        event.preventDefault();
      }

      var restoreFocus = event.type === 'keydown';
      _this.hideMenu(restoreFocus);
    };return _this;}(0, _inheritsLoose2.default)(PopupMenu, _React$Component);var _proto = PopupMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.popupMenuMenuOffsetY }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props$popupMenu2;var _this$getProps = this.getProps(),popupHasPin = _this$getProps.popupHasPin,disableAnimations = _this$getProps.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.hideMenuWithoutFocusing, onFocusOutside: this.hideMenuWithoutFocusing, active: this.state.menuVisible }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": _tids.PopupMenuDataTids.root, className: _PopupMenu2.styles.container(), style: { width: this.props.width } }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/_react.default.createElement(_Popup.Popup, { id: (_this$props$popupMenu2 = this.props.popupMenuId) != null ? _this$props$popupMenu2 : this.rootId, anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions(), disableAnimations: disableAnimations, onOpen: this.handleOpen, mobileOnCloseRequest: this.hideMenu, width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto' }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, onItemClick: this.handleItemSelection, preventIconsOffset: this.props.preventIconsOffset, cyclicSelection: false, ref: this.menuRef, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1, header: this.props.header, footer: this.props.footer }, this.props.children)))));};_proto.getPositions = function getPositions() {var positions = this.getProps().positions;if (positions && (0, _validatePositions.isValidPositions)(positions)) {return positions;}return Positions;};return PopupMenu;}(_react.default.Component), _PopupMenu.__KONTUR_REACT_UI__ = 'PopupMenu', _PopupMenu.displayName = 'PopupMenu', _PopupMenu.defaultProps = { positions: Positions, type: PopupMenuType.Tooltip, popupHasPin: true, disableAnimations: false }, _PopupMenu.Type = PopupMenuType, _PopupMenu)) || _class) || _class;