@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/internal/Popup/Popup/Popup.js

@@ -1,60 +1,22 @@
+import _createForOfIteratorHelperLoose from "@babel/runtime/helpers/esm/createForOfIteratorHelperLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 
 var _class, _class2, _temp;
 
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-
-  for (var i = 0, arr2 = new Array(len); i < len; i++) {
-    arr2[i] = arr[i];
-  }
-
-  return arr2;
-}
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Transition } from 'react-transition-group';
-import raf from 'raf';
 import warning from 'warning';
+import { globalObject } from '@skbkontur/global-object';
+import { getDOMRect } from "../../../lib/dom/getDOMRect";
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { ZIndex } from "../../ZIndex";
 import { RenderContainer } from "../../RenderContainer";
-import { isFunction, isNonNullable, isNullable, isRefableElement } from "../../../lib/utils";
+import { getRandomID, isFunction, isNonNullable, isNullable, isRefableElement, mergeRefs } from "../../../lib/utils";
 import { isIE11, isEdge, isSafari } from "../../../lib/client";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
@@ -63,6 +25,9 @@ import { MobilePopup } from "../../MobilePopup";
 import { getRootNode, rootNode } from "../../../lib/rootNode";
 import { callChildRef } from "../../../lib/callChildRef/callChildRef";
 import { isInstanceWithAnchorElement } from "../../../lib/InstanceWithAnchorElement";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
+import { isInstanceOf } from "../../../lib/isInstanceOf";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
 import { styles } from "../Popup.styles";
@@ -71,15 +36,26 @@ var TRANSITION_TIMEOUT = {
   enter: 0,
   exit: 200
 };
-export var PopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
+export var PopupPositions = ['top center', 'top left', 'top right', 'bottom center', 'bottom left', 'bottom right', 'left middle', 'left top', 'left bottom', 'right middle', 'right top', 'right bottom'];
+export var OldPopupPositions = ['top left', 'top center', 'top right', 'right top', 'right middle', 'right bottom', 'bottom right', 'bottom center', 'bottom left', 'left bottom', 'left middle', 'left top'];
 export var DefaultPosition = PopupPositions[0];
-var DUMMY_LOCATION = {
+export var OldDefaultPosition = OldPopupPositions[0];
+export var DUMMY_LOCATION = {
   position: DefaultPosition,
   coordinates: {
     top: -9999,
     left: -9999
   }
 };
+export var PopupDataTids = {
+  root: 'Popup__root',
+  content: 'PopupContent',
+  contentInner: 'PopupContentInner',
+  popupPin: 'PopupPin__root'
+};
+export var PopupIds = {
+  root: PopupDataTids.root
+};
 export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Popup, _React$Component);
 
@@ -91,11 +67,14 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Popup.defaultProps);
     _this.state = {
       location: _this.props.opened ? DUMMY_LOCATION : null
     };
     _this.locationUpdateId = null;
     _this.refForTransition = /*#__PURE__*/React.createRef();
+    _this.hasAnchorElementListeners = false;
+    _this.rootId = PopupIds.root + getRandomID();
     _this.anchorElement = null;
 
     _this.updateAnchorElement = function (instance) {
@@ -143,27 +122,29 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
     _this.calculateWidth = function (width) {
       if (typeof width === 'string' && width.includes('%')) {
-        return _this.anchorElement ? _this.anchorElement.offsetWidth * parseFloat(width) / 100 : 0;
+        var anchorWidth = Math.floor(getDOMRect(_this.anchorElement).width);
+        return _this.anchorElement ? anchorWidth * parseFloat(width) / 100 : 0;
       }
 
       return width;
     };
 
     _this.content = function (children) {
-      var _this$props = _this.props,
-          backgroundColor = _this$props.backgroundColor,
-          width = _this$props.width;
+      var backgroundColor = _this.props.backgroundColor;
+
+      var width = _this.getProps().width;
+
       return /*#__PURE__*/React.createElement("div", {
         className: styles.content(_this.theme),
-        "data-tid": 'PopupContent',
-        ref: _this.refForTransition
+        "data-tid": PopupDataTids.content,
+        ref: mergeRefs([_this.refForTransition, _this.refPopupContentElement])
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.contentInner(_this.theme),
         style: {
           backgroundColor: backgroundColor,
           width: _this.calculateWidth(width)
         },
-        "data-tid": 'PopupContentInner'
+        "data-tid": PopupDataTids.contentInner
       }, children));
     };
 
@@ -175,8 +156,8 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
       });
     };
 
-    _this.refPopupElement = function (element) {
-      _this.lastPopupElement = element;
+    _this.refPopupContentElement = function (element) {
+      _this.lastPopupContentElement = element;
     };
 
     _this.handleLayoutEvent = function () {
@@ -188,13 +169,17 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     };
 
     _this.updateLocation = function () {
-      var popupElement = _this.lastPopupElement;
+      var popupContentElement = _this.lastPopupContentElement;
 
-      if (!popupElement) {
+      if (!popupContentElement) {
         return;
       }
 
-      var location = _this.getLocation(popupElement, _this.state.location);
+      var location = _this.getLocation(popupContentElement, _this.state.location);
+
+      if (location) {
+        _this.props.onPositionChange == null ? void 0 : _this.props.onPositionChange(location == null ? void 0 : location.position);
+      }
 
       if (!_this.locationEquals(_this.state.location, location)) {
         _this.setState({
@@ -211,6 +196,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   _proto.componentDidMount = function componentDidMount() {
     this.updateLocation();
     this.layoutEventsToken = LayoutEvents.addListener(this.handleLayoutEvent);
+
+    if (!this.hasAnchorElementListeners) {
+      this.addEventListeners(this.anchorElement);
+    }
   };
 
   Popup.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
@@ -258,7 +247,10 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
   _proto.componentWillUnmount = function componentWillUnmount() {
     this.cancelDelayedUpdateLocation();
-    this.removeEventListeners(this.anchorElement);
+
+    if (this.hasAnchorElementListeners) {
+      this.removeEventListeners(this.anchorElement);
+    }
 
     if (this.layoutEventsToken) {
       this.layoutEventsToken.remove();
@@ -273,32 +265,36 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   _proto.render = function render() {
     var _this2 = this;
 
-    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.featureFlags = getFullReactUIFlagsContext(flags);
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = theme;
+        return _this2.renderMain();
+      });
     });
   };
 
   _proto.renderMobile = function renderMobile() {
     var opened = this.props.opened;
     var children = this.renderChildren();
-    return children ? /*#__PURE__*/React.createElement(MobilePopup, {
+    return children ? /*#__PURE__*/React.createElement(CommonWrapper, {
+      rootNodeRef: this.setRootNode
+    }, /*#__PURE__*/React.createElement(MobilePopup, {
       opened: opened,
       withoutRenderContainer: true,
       onCloseRequest: this.props.mobileOnCloseRequest
-    }, this.content(children)) : null;
+    }, this.content(children))) : null;
   };
 
   _proto.renderMain = function renderMain() {
     var _this3 = this;
 
     var location = this.state.location;
-    var _this$props2 = this.props,
-        anchorElement = _this$props2.anchorElement,
-        useWrapper = _this$props2.useWrapper;
+    var anchorElement = this.props.anchorElement;
+    var useWrapper = this.getProps().useWrapper;
     var anchor = null;
 
-    if (isHTMLElement(anchorElement)) {
+    if (isInstanceOf(anchorElement, globalObject.Element)) {
       this.updateAnchorElement(anchorElement);
     } else if ( /*#__PURE__*/React.isValidElement(anchorElement)) {
       anchor = useWrapper ? /*#__PURE__*/React.createElement("span", null, anchorElement) : anchorElement;
@@ -321,7 +317,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     // which should be called within updateAnchorElement
     // in the case when the anchor is not refable
 
-    var canGetAnchorNode = !!anchorWithRef || isHTMLElement(anchorElement);
+    var canGetAnchorNode = !!anchorWithRef || isInstanceOf(anchorElement, globalObject.Element);
     return /*#__PURE__*/React.createElement(RenderContainer, {
       anchor: anchorWithRef || anchor,
       ref: canGetAnchorNode ? null : this.updateAnchorElement
@@ -329,34 +325,45 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.addEventListeners = function addEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.addEventListener('mouseenter', this.handleMouseEnter);
-      element.addEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isInstanceOf(element, globalObject.Element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.addEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.addEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.addEventListener('click', this.handleClick);
       element.addEventListener('focusin', this.handleFocus);
       element.addEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = true;
     }
   };
 
   _proto.removeEventListeners = function removeEventListeners(element) {
-    if (element && isHTMLElement(element)) {
-      element.removeEventListener('mouseenter', this.handleMouseEnter);
-      element.removeEventListener('mouseleave', this.handleMouseLeave);
+    if (element && isInstanceOf(element, globalObject.Element)) {
+      // @ts-expect-error: Type ElementEventMap is missing events: https://github.com/skbkontur/retail-ui/pull/2946#discussion_r931072657
+      element.removeEventListener('mouseenter', this.handleMouseEnter); // @ts-expect-error: See the comment above
+
+      element.removeEventListener('mouseleave', this.handleMouseLeave); // @ts-expect-error: See the comment above
+
       element.removeEventListener('click', this.handleClick);
       element.removeEventListener('focusin', this.handleFocus);
       element.removeEventListener('focusout', this.handleBlur);
+      this.hasAnchorElementListeners = false;
     }
   };
 
   _proto.renderContent = function renderContent(location) {
     var _this4 = this;
 
-    var _this$props3 = this.props,
-        disableAnimations = _this$props3.disableAnimations,
-        maxWidth = _this$props3.maxWidth,
-        hasShadow = _this$props3.hasShadow,
-        ignoreHover = _this$props3.ignoreHover,
-        opened = _this$props3.opened;
+    var _this$props = this.props,
+        maxWidth = _this$props.maxWidth,
+        opened = _this$props.opened;
+
+    var _this$getProps = this.getProps(),
+        hasShadow = _this$getProps.hasShadow,
+        disableAnimations = _this$getProps.disableAnimations,
+        ignoreHover = _this$getProps.ignoreHover;
+
     var children = this.renderChildren();
 
     var _PopupHelper$getPosit = PopupHelper.getPositionObject(location.position),
@@ -378,19 +385,19 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
       onExited: this.resetLocation,
       nodeRef: this.refForTransition
     }, function (state) {
-      var _extends2, _ref;
+      var _this4$props$id, _extends2, _ref;
 
       return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
         rootNodeRef: _this4.setRootNode
       }), /*#__PURE__*/React.createElement(ZIndex, {
-        "data-tid": 'Popup__root',
-        wrapperRef: _this4.refPopupElement,
+        id: (_this4$props$id = _this4.props.id) != null ? _this4$props$id : _this4.rootId,
+        "data-tid": PopupDataTids.root,
         priority: 'Popup',
         className: cx(_extends((_extends2 = {}, _extends2[styles.popup(_this4.theme)] = true, _extends2[styles.shadow(_this4.theme)] = hasShadow && !shouldFallbackShadow, _extends2[styles.shadowFallback(_this4.theme)] = hasShadow && shouldFallbackShadow, _extends2[styles.popupIgnoreHover()] = ignoreHover, _extends2), disableAnimations ? {} : (_ref = {}, _ref[styles["transition-enter-" + direction](_this4.theme)] = true, _ref[styles.transitionEnter()] = state === 'entering', _ref[styles.transitionEnterActive()] = state === 'entered', _ref[styles.transitionExit()] = state === 'exiting', _ref))),
         style: rootStyle,
         onMouseEnter: _this4.handleMouseEnter,
         onMouseLeave: _this4.handleMouseLeave
-      }, _this4.content(children), !_this4.isMobileLayout && _this4.renderPin(location.position)));
+      }, _this4.content(children), (!_this4.isMobileLayout || _this4.props.withoutMobile) && _this4.renderPin(location.position)));
     });
   };
 
@@ -406,14 +413,18 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     */
     var isDefaultBorderColor = this.theme.popupBorderColor === POPUP_BORDER_DEFAULT_COLOR;
     var pinBorder = isIE11 && isDefaultBorderColor ? 'rgba(0, 0, 0, 0.09)' : this.theme.popupBorderColor;
-    var _this$props4 = this.props,
-        pinSize = _this$props4.pinSize,
-        hasShadow = _this$props4.hasShadow,
-        backgroundColor = _this$props4.backgroundColor,
-        borderColor = _this$props4.borderColor;
+    var _this$props2 = this.props,
+        pinSize = _this$props2.pinSize,
+        backgroundColor = _this$props2.backgroundColor,
+        borderColor = _this$props2.borderColor;
+
+    var _this$getProps2 = this.getProps(),
+        hasShadow = _this$getProps2.hasShadow,
+        hasPin = _this$getProps2.hasPin;
+
     var position = PopupHelper.getPositionObject(positionName);
-    return this.props.hasPin && /*#__PURE__*/React.createElement(PopupPin, {
-      popupElement: this.lastPopupElement,
+    return hasPin && /*#__PURE__*/React.createElement(PopupPin, {
+      popupElement: this.lastPopupContentElement,
       popupPosition: positionName,
       size: pinSize || parseInt(this.theme.popupPinSize),
       offset: this.getPinOffset(position.align),
@@ -425,12 +436,12 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
 
   _proto.delayUpdateLocation = function delayUpdateLocation() {
     this.cancelDelayedUpdateLocation();
-    this.locationUpdateId = raf(this.updateLocation);
+    this.locationUpdateId = globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(this.updateLocation);
   };
 
   _proto.cancelDelayedUpdateLocation = function cancelDelayedUpdateLocation() {
     if (this.locationUpdateId) {
-      raf.cancel(this.locationUpdateId);
+      globalObject.cancelAnimationFrame == null ? void 0 : globalObject.cancelAnimationFrame(this.locationUpdateId);
       this.locationUpdateId = null;
     }
   };
@@ -453,14 +464,46 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     return x.position === y.position && Math.abs(x.coordinates.top - y.coordinates.top) <= 1 && Math.abs(x.coordinates.left - y.coordinates.left) <= 1;
   };
 
+  _proto.reorderPropsPositionsWithPriorityPos = function reorderPropsPositionsWithPriorityPos() {
+    var positions = this.props.positions ? this.props.positions : PopupPositions;
+    var pos_ = '';
+
+    if (this.props.pos) {
+      pos_ = this.props.pos;
+    } else {
+      pos_ = positions[0];
+    }
+
+    var index = positions.findIndex(function (position) {
+      return position.startsWith(pos_);
+    });
+
+    if (index === -1) {
+      warning(false, 'Unexpected position ' + pos_ + ' passed to Popup. Expected one of: ' + positions.join(', '));
+      return positions;
+    }
+
+    return [].concat(positions.slice(index), positions.slice(0, index));
+  };
+
   _proto.getLocation = function getLocation(popupElement, location) {
-    var _this$props5 = this.props,
-        positions = _this$props5.positions,
-        tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+    var _this$getProps3 = this.getProps(),
+        tryPreserveFirstRenderedPosition = _this$getProps3.tryPreserveFirstRenderedPosition;
+
+    var positions;
+
+    if (this.featureFlags.popupUnifyPositioning) {
+      positions = this.reorderPropsPositionsWithPriorityPos();
+    } else if (this.props.positions) {
+      positions = this.props.positions;
+    } else {
+      positions = OldPopupPositions;
+    }
+
     var anchorElement = this.anchorElement;
-    warning(anchorElement && isHTMLElement(anchorElement), 'Anchor element is not defined or not instance of HTMLElement');
+    warning(anchorElement && isInstanceOf(anchorElement, globalObject.Element), 'Anchor element is not defined or not instance of Element');
 
-    if (!(anchorElement && isHTMLElement(anchorElement))) {
+    if (!(anchorElement && isInstanceOf(anchorElement, globalObject.Element))) {
       return location;
     }
 
@@ -509,7 +552,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.getPinnedPopupOffset = function getPinnedPopupOffset(anchorRect, position) {
-    if (!this.props.hasPin || /center|middle/.test(position.align)) {
+    if (!this.getProps().hasPin || /center|middle/.test(position.align)) {
       return 0;
     }
 
@@ -522,7 +565,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     var marginFromProps = this.props.margin;
     var margin = isNonNullable(marginFromProps) && !isNaN(marginFromProps) ? marginFromProps : parseInt(this.theme.popupMargin) || 0;
     var position = PopupHelper.getPositionObject(positionName);
-    var popupOffset = this.props.popupOffset + this.getPinnedPopupOffset(anchorRect, position);
+    var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
 
     switch (position.direction) {
       case 'top':
@@ -608,13 +651,11 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   return Popup;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Popup', _class2.displayName = 'Popup', _class2.propTypes = {
   /**
   * Ссылка (ref) на элемент или React компонент, для которого рисуется попап
   */
-  anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(function () {
-    return HTMLElement;
-  }), PropTypes.node]).isRequired,
+  anchorElement: PropTypes.oneOfType([safePropTypesInstanceOf(globalObject.HTMLElement), PropTypes.node]).isRequired,
 
   /**
   * Фон попапа и пина
@@ -665,6 +706,11 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   */
   positions: PropTypes.array,
 
+  /**
+  * Приоритетная позиция попапа
+  */
+  pos: PropTypes.string,
+
   /**
   * Игнорировать ли события hover/click
   */