@skbkontur/react-ui 6.0.7 → 6.1.0

package/internal/Popup/Popup.js

@@ -81,6 +81,9 @@ export var PopupPinnablePositions = [
 ];
 export var PopupPositions = __spreadArray(__spreadArray([], PopupPinnablePositions, true), PopupNonPinnablePositions, true);
 export var DefaultPosition = PopupPositions[0];
+var isPopupNonPinnablePosition = function (position) {
+    return PopupNonPinnablePositions.includes(position);
+};
 export var DUMMY_LOCATION = {
     position: DefaultPosition,
     coordinates: {
@@ -88,6 +91,7 @@ export var DUMMY_LOCATION = {
         left: -9999,
     },
     isFullyVisible: false,
+    pinOffset: 0,
 };
 export var PopupDataTids = {
     root: 'Popup__root',
@@ -187,7 +191,9 @@ var Popup = /** @class */ (function (_super) {
             _this.state.location !== null && _this.setState({ location: null });
         };
         _this.refPopupContentElement = function (element) {
-            _this.lastPopupContentElement = element;
+            if (element) {
+                _this.lastPopupContentElement = element;
+            }
         };
         _this.handleLayoutEvent = function () {
             if (!_this.state.location) {
@@ -205,7 +211,8 @@ var Popup = /** @class */ (function (_super) {
             if (location) {
                 (_b = (_a = _this.props).onPositionChange) === null || _b === void 0 ? void 0 : _b.call(_a, location.position, location.isFullyVisible);
             }
-            if (!_this.locationEquals(_this.state.location, location)) {
+            var stateChanged = !_this.locationEquals(_this.state.location, location);
+            if (stateChanged) {
                 _this.setState({ location: location });
             }
         };
@@ -355,7 +362,7 @@ var Popup = /** @class */ (function (_super) {
         var relativeShift = this.getRelativeShift();
         var direction = PopupHelper.getPositionObject(location.position).direction;
         var rootStyle = {
-            maxWidth: maxWidth,
+            maxWidth: this.getMobileMaxWidth(maxWidth),
             top: location.coordinates.top + relativeShift.top,
             left: location.coordinates.left + relativeShift.left,
         };
@@ -372,7 +379,9 @@ var Popup = /** @class */ (function (_super) {
                             _b[_this.styles.transitionExit()] = state === 'exiting',
                             _b)))), style: rootStyle, onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave },
                     _this.content(children),
-                    (!_this.isMobileLayout || _this.props.withoutMobile) && _this.renderPin(location.position))));
+                    location !== DUMMY_LOCATION &&
+                        (!_this.isMobileLayout || _this.props.withoutMobile) &&
+                        _this.renderPin(location.position))));
         }));
     };
     Popup.prototype.renderChildren = function () {
@@ -383,7 +392,7 @@ var Popup = /** @class */ (function (_super) {
         var hasPin = this.getProps().hasPin;
         var position = PopupHelper.getPositionObject(positionName);
         return (hasPin &&
-            !PopupNonPinnablePositions.includes(positionName) && (React.createElement(PopupPin, { popupElement: this.lastPopupContentElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), backgroundColor: backgroundColor || this.theme.popupBackground })));
+            !isPopupNonPinnablePosition(positionName) && (React.createElement(PopupPin, { popupElement: this.lastPopupContentElement, popupPosition: positionName, size: pinSize || parseInt(this.theme.popupPinSize), offset: this.getPinOffset(position.align), backgroundColor: backgroundColor || this.theme.popupBackground })));
     };
     Popup.prototype.delayUpdateLocation = function () {
         var _a, _b;
@@ -404,7 +413,10 @@ var Popup = /** @class */ (function (_super) {
         if (isNullable(x) || isNullable(y)) {
             return false;
         }
-        return (x.coordinates.left === y.coordinates.left && x.coordinates.top === y.coordinates.top && x.position === y.position);
+        return (x.coordinates.left === y.coordinates.left &&
+            x.coordinates.top === y.coordinates.top &&
+            x.position === y.position &&
+            x.pinOffset === y.pinOffset);
     };
     Popup.prototype.getOrderedPositions = function () {
         var positions = this.props.positions ? this.props.positions : PopupPinnablePositions;
@@ -449,8 +461,16 @@ var Popup = /** @class */ (function (_super) {
         }
         var position = location.position;
         var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-        var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject);
-        var canBecomeVisible = !isFullyVisible && PopupHelper.canBecomeFullyVisible(position, coordinates, this.globalObject);
+        var locationAfterPadding = this.applyMobileViewportPadding({
+            coordinates: coordinates,
+            position: position,
+            isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject),
+            pinOffset: 0,
+        }, popupRect);
+        var isFullyVisible = locationAfterPadding.isFullyVisible;
+        var canBecomeVisible = !this.isMobileLayout &&
+            !isFullyVisible &&
+            PopupHelper.canBecomeFullyVisible(position, coordinates, this.globalObject);
         var shouldReuseCurrentLocation = 
         // если нужно сохранить первоначальную позицию и Попап целиком
         // находится в пределах вьюпорта (или может быть проскроллен в него)
@@ -461,27 +481,108 @@ var Popup = /** @class */ (function (_super) {
         if (!shouldReuseCurrentLocation) {
             return null;
         }
-        return { coordinates: coordinates, position: position, isFullyVisible: true };
+        return __assign(__assign({}, locationAfterPadding), { isFullyVisible: isFullyVisible || canBecomeVisible });
     };
     Popup.prototype.tryGetFirstFullyVisibleLocation = function (positions, anchorRect, popupRect) {
         for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {
             var position = positions_1[_i];
             var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-            if (PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject)) {
-                return { coordinates: coordinates, position: position, isFullyVisible: true };
+            var isFullyVisible = PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject);
+            if (!this.isMobileLayout && isFullyVisible) {
+                return { coordinates: coordinates, position: position, isFullyVisible: true, pinOffset: 0 };
+            }
+            if (this.isMobileLayout) {
+                var location_1 = this.buildLocationForPosition(position, anchorRect, popupRect);
+                if (location_1.isFullyVisible) {
+                    return location_1;
+                }
             }
         }
         return null;
     };
     Popup.prototype.getFallbackLocation = function (positions, anchorRect, popupRect, tryBestFallbackPosition) {
+        if (this.isMobileLayout) {
+            var mobileFallback = this.getMobileVerticalFallbackLocation(positions, anchorRect, popupRect);
+            if (mobileFallback) {
+                return mobileFallback;
+            }
+        }
         var position = tryBestFallbackPosition
             ? this.pickBestFallbackPosition(positions, anchorRect, popupRect)
             : positions[0];
         var coordinates = this.getCoordinates(anchorRect, popupRect, position);
-        return {
+        return this.applyMobileViewportPadding({
             coordinates: coordinates,
             position: position,
             isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject),
+            pinOffset: 0,
+        }, popupRect);
+    };
+    Popup.prototype.getMobileVerticalFallbackLocation = function (positions, anchorRect, popupRect) {
+        var _this = this;
+        var _a;
+        var isFullyVisible = function (position) {
+            return _this.buildLocationForPosition(position, anchorRect, popupRect).isFullyVisible;
+        };
+        var topPosition = positions.find(function (position) { return position.startsWith('top') && isFullyVisible(position); });
+        if (topPosition) {
+            return this.buildLocationForPosition(topPosition, anchorRect, popupRect);
+        }
+        var bottomPosition = positions.find(function (position) { return position.startsWith('bottom') && isFullyVisible(position); });
+        if (bottomPosition) {
+            return this.buildLocationForPosition(bottomPosition, anchorRect, popupRect);
+        }
+        var fallbackPosition = (_a = positions.find(function (position) { return position.startsWith('bottom'); })) !== null && _a !== void 0 ? _a : positions.find(function (position) { return position.startsWith('top'); });
+        if (!fallbackPosition) {
+            return null;
+        }
+        return this.buildLocationForPosition(fallbackPosition, anchorRect, popupRect);
+    };
+    Popup.prototype.buildLocationForPosition = function (position, anchorRect, popupRect) {
+        var coordinates = this.getCoordinates(anchorRect, popupRect, position);
+        return this.applyMobileViewportPadding({
+            coordinates: coordinates,
+            position: position,
+            isFullyVisible: false,
+            pinOffset: 0,
+        }, popupRect);
+    };
+    Popup.prototype.getViewportSidePadding = function () {
+        return PopupHelper.getPopupViewportSidePadding(this.theme, this.isMobileLayout);
+    };
+    Popup.prototype.getMobileMaxWidth = function (maxWidth) {
+        var viewportSidePadding = this.getViewportSidePadding();
+        if (this.isMobileLayout && isNullable(maxWidth) && viewportSidePadding > 0) {
+            return "calc(100dvw - ".concat(viewportSidePadding * 2, "px)");
+        }
+        return maxWidth;
+    };
+    Popup.prototype.applyMobileViewportPadding = function (location, popupRect) {
+        if (!this.isMobileLayout || this.getViewportSidePadding() === 0) {
+            return location;
+        }
+        var _a = this.normalizeCoordinates(location.coordinates, popupRect), coordinates = _a.coordinates, pinOffset = _a.pinOffset;
+        return __assign(__assign({}, location), { coordinates: coordinates, pinOffset: pinOffset, isFullyVisible: PopupHelper.isFullyVisible(coordinates, popupRect, this.globalObject) });
+    };
+    Popup.prototype.normalizeCoordinates = function (coordinates, popupRect) {
+        var viewportSidePadding = this.getViewportSidePadding();
+        var normalizedLeft = coordinates.left;
+        var pinOffset = 0;
+        var viewport = PopupHelper.getViewportAbsoluteRect(this.globalObject);
+        var popupRight = normalizedLeft + popupRect.width;
+        var distanceToLeft = normalizedLeft - viewport.left;
+        var distanceToRight = viewport.left + viewport.width - popupRight;
+        if (distanceToLeft < viewportSidePadding) {
+            normalizedLeft = viewport.left + viewportSidePadding;
+            pinOffset = normalizedLeft - coordinates.left;
+        }
+        else if (distanceToRight < viewportSidePadding) {
+            normalizedLeft = viewport.left + viewport.width - viewportSidePadding - popupRect.width;
+            pinOffset = normalizedLeft - coordinates.left;
+        }
+        return {
+            coordinates: __assign(__assign({}, coordinates), { left: Math.round(normalizedLeft) }),
+            pinOffset: pinOffset,
         };
     };
     Popup.prototype.pickBestFallbackPosition = function (positions, anchorRect, popupRect) {
@@ -575,7 +676,7 @@ var Popup = /** @class */ (function (_super) {
         }
         var anchorSize = /top|bottom/.test(position.direction) ? anchorRect.width : anchorRect.height;
         var pinSize = this.props.pinSize;
-        return Math.max(0, this.getPinOffset(position.align) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
+        return Math.max(0, this.getPinOffset(position.align, false) + (pinSize || parseInt(this.theme.popupPinSize)) - anchorSize / 2);
     };
     Popup.prototype.getCoordinates = function (anchorRect, popupRect, positionName) {
         var marginFromProps = this.props.margin;
@@ -584,84 +685,60 @@ var Popup = /** @class */ (function (_super) {
             : parseInt(this.theme.popupMargin) || 0;
         var position = PopupHelper.getPositionObject(positionName);
         var popupOffset = this.getProps().popupOffset + this.getPinnedPopupOffset(anchorRect, position);
-        var defaultCoordinates = {
+        var getDefaultCoordinates = function () { return ({
             top: anchorRect.top - popupRect.height - margin,
-            left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
-        };
+            left: PopupHelper.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
+        }); };
         switch (position.direction) {
             case 'top':
-                return defaultCoordinates;
+                return getDefaultCoordinates();
             case 'middle':
                 return {
                     top: anchorRect.top + anchorRect.height / 2 - popupRect.height / 2,
-                    left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
+                    left: PopupHelper.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
                 };
             case 'bottom':
                 return {
                     top: anchorRect.top + anchorRect.height + margin,
-                    left: this.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
+                    left: PopupHelper.getHorizontalPosition(anchorRect, popupRect, position.align, popupOffset),
                 };
             case 'left':
                 return {
-                    top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+                    top: PopupHelper.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
                     left: anchorRect.left - popupRect.width - margin,
                 };
             case 'right':
                 return {
-                    top: this.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
+                    top: PopupHelper.getVerticalPosition(anchorRect, popupRect, position.align, popupOffset),
                     left: anchorRect.left + anchorRect.width + margin,
                 };
             default:
                 warning(false, "Unexpected align '".concat(position.direction, "'. Must be one of - 'top', 'bottom', 'left', 'right', 'center', 'middle'. Returning default value."));
-                return defaultCoordinates;
+                return getDefaultCoordinates();
         }
     };
-    Popup.prototype.getPinOffset = function (align) {
+    Popup.prototype.getPinOffset = function (align, useLocationPinOffset) {
+        var _a, _b;
+        if (useLocationPinOffset === void 0) { useLocationPinOffset = true; }
         var pinOffset = this.props.pinOffset;
         var defaultPinOffset = pinOffset || parseInt(this.theme.popupPinOffsetY);
+        var pinOffsetFromState = useLocationPinOffset && this.isMobileLayout ? ((_b = (_a = this.state.location) === null || _a === void 0 ? void 0 : _a.pinOffset) !== null && _b !== void 0 ? _b : 0) : 0;
         switch (align) {
             case 'top':
             case 'bottom':
                 return defaultPinOffset;
             case 'left':
+                return (pinOffset || parseInt(this.theme.popupPinOffsetX)) + pinOffsetFromState;
             case 'right':
-                return pinOffset || parseInt(this.theme.popupPinOffsetX);
+                return (pinOffset || parseInt(this.theme.popupPinOffsetX)) + pinOffsetFromState;
             case 'center':
             case 'middle':
-                return 0;
+                return -pinOffsetFromState;
             default:
                 warning(false, "Unexpected align '".concat(align, "'. Must be one of - 'top', 'bottom', 'left', 'right', 'center', 'middle'. Returning default value."));
                 return defaultPinOffset;
         }
     };
-    Popup.prototype.getHorizontalPosition = function (anchorRect, popupRect, align, popupOffset) {
-        var defaultHorizontalPosition = anchorRect.left - (popupRect.width - anchorRect.width) / 2;
-        switch (align) {
-            case 'left':
-                return anchorRect.left - popupOffset;
-            case 'center':
-                return defaultHorizontalPosition;
-            case 'right':
-                return anchorRect.left - (popupRect.width - anchorRect.width) + popupOffset;
-            default:
-                warning(false, "Unexpected align '".concat(align, "'. Must be one of - 'left', 'center', 'right'. Returning default value."));
-                return defaultHorizontalPosition;
-        }
-    };
-    Popup.prototype.getVerticalPosition = function (anchorRect, popupRect, align, popupOffset) {
-        var defaultVerticalPosition = anchorRect.top - popupOffset;
-        switch (align) {
-            case 'top':
-                return defaultVerticalPosition;
-            case 'middle':
-                return anchorRect.top - (popupRect.height - anchorRect.height) / 2;
-            case 'bottom':
-                return anchorRect.top - (popupRect.height - anchorRect.height) + popupOffset;
-            default:
-                warning(false, "Unexpected align '".concat(align, "'. Must be one of - 'top', 'middle', 'bottom'. Returning default value."));
-                return defaultVerticalPosition;
-        }
-    };
     var Popup_1;
     Popup.__KONTUR_REACT_UI__ = 'Popup';
     Popup.displayName = 'Popup';