@skbkontur/react-ui 0.0.0-69a6fa606f → 0.0.0-6fbd9fadb2

package/internal/Popup/Popup/Popup.js

@@ -1,71 +1,35 @@
+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 { isIE11, isEdge, isSafari } from "../../../lib/client";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isHTMLElement, safePropTypesInstanceOf } from "../../../lib/SSRSafe";
+import { getRandomID, isFunction, isNonNullable, isNullable, isRefableElement, mergeRefs } from "../../../lib/utils";
+import { isEdge, isIE11, isSafari } from "../../../lib/client";
+import { safePropTypesInstanceOf } from "../../../lib/SSRSafe";
 import { isTestEnv } from "../../../lib/currentEnvironment";
 import { CommonWrapper } from "../../CommonWrapper";
-import { cx } from "../../../lib/theming/Emotion";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
 import { responsiveLayout } from "../../../components/ResponsiveLayout/decorator";
 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 { ThemeConsumer } from "../../../lib/theming/ThemeContext";
 import { PopupPin } from "../PopupPin";
 import { PopupHelper } from "../PopupHelper";
-import { styles } from "../Popup.styles";
+import { getStyles } from "../Popup.styles";
 var POPUP_BORDER_DEFAULT_COLOR = 'transparent';
 var TRANSITION_TIMEOUT = {
   enter: 0,
@@ -73,7 +37,7 @@ var TRANSITION_TIMEOUT = {
 };
 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 DefaultPosition = PopupPositions[0];
-var DUMMY_LOCATION = {
+export var DUMMY_LOCATION = {
   position: DefaultPosition,
   coordinates: {
     top: -9999,
@@ -81,10 +45,14 @@ var DUMMY_LOCATION = {
   }
 };
 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);
 
@@ -96,11 +64,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) {
@@ -148,20 +119,23 @@ 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;
+
+      var styles = getStyles(_this.emotion);
       return /*#__PURE__*/React.createElement("div", {
         className: styles.content(_this.theme),
         "data-tid": PopupDataTids.content,
-        ref: _this.refForTransition
+        ref: mergeRefs([_this.refForTransition, _this.refPopupContentElement])
       }, /*#__PURE__*/React.createElement("div", {
         className: styles.contentInner(_this.theme),
         style: {
@@ -180,8 +154,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 () {
@@ -193,13 +167,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({
@@ -216,6 +194,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) {
@@ -263,7 +245,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();
@@ -278,32 +263,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(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeConsumer, 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;
@@ -326,44 +315,53 @@ 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 // rootNode for Popup is its content container, see #2873
-      ,
-      containerRef: this.setRootNode,
+      anchor: anchorWithRef || anchor,
       ref: canGetAnchorNode ? null : this.updateAnchorElement
     }, this.isMobileLayout && !this.props.withoutMobile ? this.renderMobile() : location && this.renderContent(location));
   };
 
   _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),
@@ -374,6 +372,7 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
     });
 
     var shouldFallbackShadow = isIE11 || isEdge || isSafari;
+    var styles = getStyles(this.emotion);
     return /*#__PURE__*/React.createElement(Transition, {
       timeout: TRANSITION_TIMEOUT,
       appear: !disableAnimations,
@@ -385,16 +384,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, _this4.props, /*#__PURE__*/React.createElement(ZIndex, {
-        wrapperRef: _this4.refPopupElement,
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({}, _this4.props, {
+        rootNodeRef: _this4.setRootNode
+      }), /*#__PURE__*/React.createElement(ZIndex, {
+        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))),
+        className: _this4.emotion.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)));
     });
   };
 
@@ -410,14 +412,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),
@@ -429,12 +435,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;
     }
   };
@@ -458,13 +464,13 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   };
 
   _proto.getLocation = function getLocation(popupElement, location) {
-    var _this$props5 = this.props,
-        positions = _this$props5.positions,
-        tryPreserveFirstRenderedPosition = _this$props5.tryPreserveFirstRenderedPosition;
+    var _this$props3 = this.props,
+        positions = _this$props3.positions,
+        tryPreserveFirstRenderedPosition = _this$props3.tryPreserveFirstRenderedPosition;
     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;
     }
 
@@ -513,7 +519,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;
     }
 
@@ -526,7 +532,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':
@@ -612,13 +618,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,
 
   /**
   * Фон попапа и пина
@@ -681,4 +685,4 @@ export var Popup = responsiveLayout(_class = rootNode(_class = (_temp = _class2
   useWrapper: false,
   ignoreHover: false,
   width: 'auto'
-}, _temp)) || _class) || _class;
+}, _class2.defaultRootNode = null, _temp)) || _class) || _class;