@skbkontur/react-ui 6.0.0-beta.4 → 6.0.1-cd7d7.0

package/internal/Popup/PopupHelper.js

@@ -7,23 +7,27 @@ function getPositionObject(position) {
         align: x[1],
     };
 }
-function getElementAbsoluteRect(element) {
+function getElementAbsoluteRect(element, deltaParentPosition) {
+    if (deltaParentPosition === void 0) { deltaParentPosition = { top: 0, left: 0 }; }
     var globalObject = getOwnerGlobalObject(element);
     var rect = _getElementRelativeRect(element);
+    rect.top = rect.top - deltaParentPosition.top;
+    rect.left = rect.left - deltaParentPosition.left;
     return convertRectToAbsolute(rect, globalObject);
 }
-function isAbsoluteRectFullyVisible(coordinates, popupRect, globalObject) {
+function isAbsoluteRectFullyVisible(coordinates, popupRect, globalObject, deltaParentPosition) {
+    if (deltaParentPosition === void 0) { deltaParentPosition = { top: 0, left: 0 }; }
     var windowRelativeRect = _getWindowRelativeRect(globalObject);
     var windowAbsoluteRect = convertRectToAbsolute(windowRelativeRect, globalObject);
     var absoluteRect = {
-        top: coordinates.top,
-        left: coordinates.left,
+        top: coordinates.top + deltaParentPosition.top,
+        left: coordinates.left + deltaParentPosition.left,
         height: popupRect.height,
         width: popupRect.width,
     };
     return _rectContainsRect(windowAbsoluteRect, absoluteRect);
 }
-// Can become fully visible by scrolling into viewport
+/** Может стать полностью видимым после прокрутки в область видимости */
 function canBecomeFullyVisible(positionName, coordinates, globalObject) {
     var position = getPositionObject(positionName);
     if (position.direction === 'top') {
@@ -34,7 +38,7 @@ function canBecomeFullyVisible(positionName, coordinates, globalObject) {
         var availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);
         return coordinates.left + availableScrollDistances.left >= 0;
     }
-    // NOTE: for bottom/right cases browser will always expand document size
+    // NOTE: в случаях bottom/right браузер всегда расширяет размер документа
     return true;
 }
 function _getElementRelativeRect(element) {
@@ -54,7 +58,7 @@ function _getWindowRelativeRect(globalObject) {
         height: _getViewProperty(function (x) { return x.clientHeight; }, globalObject) || globalObject.innerHeight || 0,
     };
 }
-function convertRectToAbsolute(rect, globalObject) {
+export function convertRectToAbsolute(rect, globalObject) {
     var offset = _getAbsoluteOffset(globalObject);
     return {
         top: rect.top + offset.top,
@@ -81,6 +85,98 @@ function _rectContainsRect(outerRect, innerRect) {
         innerRect.left > outerRect.left &&
         innerRect.left + innerRect.width < outerRect.left + outerRect.width);
 }
+/** Прямоугольник вьюпорта в координатах документа (абсолютных) */
+function getViewportAbsoluteRect(globalObject) {
+    return convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);
+}
+/** Какие стороны попапа (с заданными координатами) выходят за пределы вьюпорта */
+function getOverflowEdges(coordinates, popupRect, globalObject) {
+    var viewport = getViewportAbsoluteRect(globalObject);
+    var popup = {
+        top: coordinates.top,
+        left: coordinates.left,
+        width: popupRect.width,
+        height: popupRect.height,
+    };
+    return {
+        top: popup.top < viewport.top,
+        bottom: popup.top + popup.height > viewport.top + viewport.height,
+        left: popup.left < viewport.left,
+        right: popup.left + popup.width > viewport.left + viewport.width,
+    };
+}
+/** Количество сторон, по которым попап выходит за вьюпорт (0–4) */
+function getOverflowCount(overflow) {
+    return [overflow.top, overflow.bottom, overflow.left, overflow.right].filter(Boolean).length;
+}
+/** Предпочтительное направление по вертикали при переполнении */
+function getPreferredDirection(overflow, defaultPosition) {
+    if (overflow.bottom) {
+        return 'top';
+    }
+    if (overflow.top) {
+        return 'bottom';
+    }
+    return getPositionObject(defaultPosition).direction;
+}
+/**
+ * Упорядоченный список кандидатов для fallback-позиции: при горизонтальном переполнении
+ * сначала позиции с нужным align (в т.ч. из pinnablePositions), затем по direction и positions.
+ */
+function getOrderedFallbackCandidates(positions, overflow, preferredDirection, preferredAlignOrder, pinnablePositions) {
+    var seen = new Set();
+    var add = function (p) {
+        if (!seen.has(p)) {
+            seen.add(p);
+            return true;
+        }
+        return false;
+    };
+    var candidates = [];
+    var hasHorizontalOverflow = overflow.left || overflow.right;
+    if (hasHorizontalOverflow) {
+        var preferredAlign = preferredAlignOrder[0];
+        for (var _i = 0, _a = ['bottom', 'top']; _i < _a.length; _i++) {
+            var dir = _a[_i];
+            var p = "".concat(dir, " ").concat(preferredAlign);
+            if (pinnablePositions.includes(p) && add(p)) {
+                candidates.push(p);
+            }
+        }
+        for (var _b = 0, preferredAlignOrder_1 = preferredAlignOrder; _b < preferredAlignOrder_1.length; _b++) {
+            var align = preferredAlignOrder_1[_b];
+            for (var _c = 0, positions_1 = positions; _c < positions_1.length; _c++) {
+                var p = positions_1[_c];
+                if (getPositionObject(p).align === align && add(p)) {
+                    candidates.push(p);
+                }
+            }
+        }
+    }
+    for (var _d = 0, preferredAlignOrder_2 = preferredAlignOrder; _d < preferredAlignOrder_2.length; _d++) {
+        var align = preferredAlignOrder_2[_d];
+        for (var _e = 0, positions_2 = positions; _e < positions_2.length; _e++) {
+            var p = positions_2[_e];
+            var pos = getPositionObject(p);
+            if (pos.direction === preferredDirection && pos.align === align && add(p)) {
+                candidates.push(p);
+            }
+        }
+    }
+    for (var _f = 0, positions_3 = positions; _f < positions_3.length; _f++) {
+        var p = positions_3[_f];
+        if (getPositionObject(p).direction === preferredDirection && add(p)) {
+            candidates.push(p);
+        }
+    }
+    for (var _g = 0, positions_4 = positions; _g < positions_4.length; _g++) {
+        var p = positions_4[_g];
+        if (add(p)) {
+            candidates.push(p);
+        }
+    }
+    return candidates;
+}
 function _getViewProperty(getProperty, globalObject) {
     var _a, _b;
     var views = [(_a = globalObject.document) === null || _a === void 0 ? void 0 : _a.documentElement, (_b = globalObject.document) === null || _b === void 0 ? void 0 : _b.body];
@@ -90,6 +186,12 @@ export var PopupHelper = {
     getPositionObject: getPositionObject,
     getElementAbsoluteRect: getElementAbsoluteRect,
     isFullyVisible: isAbsoluteRectFullyVisible,
+    convertRectToAbsolute: convertRectToAbsolute,
     canBecomeFullyVisible: canBecomeFullyVisible,
+    getViewportAbsoluteRect: getViewportAbsoluteRect,
+    getOverflowEdges: getOverflowEdges,
+    getOverflowCount: getOverflowCount,
+    getPreferredDirection: getPreferredDirection,
+    getOrderedFallbackCandidates: getOrderedFallbackCandidates,
 };
 //# sourceMappingURL=PopupHelper.js.map

package/internal/Popup/PopupHelper.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopupHelper.js","sourceRoot":"","sources":["../../../internal/Popup/PopupHelper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { getOwnerGlobalObject } from '../../lib/globalObject.js';\n\nimport type { PopupPositionsType } from './Popup.js';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport interface PositionObject {\n  direction: string;\n  align: string;\n}\n\nfunction getPositionObject(position: string): PositionObject {\n  const x = position.split(' ');\n\n  return {\n    direction: x[0],\n    align: x[1],\n  };\n}\n\nfunction getElementAbsoluteRect(element: Element): Rect {\n  const globalObject = getOwnerGlobalObject(element);\n  const rect = _getElementRelativeRect(element);\n  return convertRectToAbsolute(rect, globalObject);\n}\n\nfunction isAbsoluteRectFullyVisible(coordinates: Offset, popupRect: Rect, globalObject: GlobalObject): boolean {\n  const windowRelativeRect = _getWindowRelativeRect(globalObject);\n  const windowAbsoluteRect = convertRectToAbsolute(windowRelativeRect, globalObject);\n  const absoluteRect = {\n    top: coordinates.top,\n    left: coordinates.left,\n    height: popupRect.height,\n    width: popupRect.width,\n  };\n\n  return _rectContainsRect(windowAbsoluteRect, absoluteRect);\n}\n\n// Can become fully visible by scrolling into viewport\nfunction canBecomeFullyVisible(positionName: PopupPositionsType, coordinates: Offset, globalObject: GlobalObject) {\n  const position = getPositionObject(positionName);\n\n  if (position.direction === 'top') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);\n    return coordinates.top + availableScrollDistances.top >= 0;\n  }\n\n  if (position.direction === 'left') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);\n    return coordinates.left + availableScrollDistances.left >= 0;\n  }\n\n  // NOTE: for bottom/right cases browser will always expand document size\n  return true;\n}\n\nfunction _getElementRelativeRect(element: Element) {\n  const rect = getDOMRect(element);\n\n  return {\n    top: rect.top,\n    left: rect.left,\n    width: rect.right - rect.left,\n    height: rect.bottom - rect.top,\n  };\n}\n\nfunction _getWindowRelativeRect(globalObject: GlobalObject): Rect {\n  return {\n    top: 0,\n    left: 0,\n    width: _getViewProperty((x) => x.clientWidth, globalObject) || globalObject.innerWidth || 0,\n    height: _getViewProperty((x) => x.clientHeight, globalObject) || globalObject.innerHeight || 0,\n  };\n}\n\nfunction convertRectToAbsolute(rect: Rect, globalObject: GlobalObject): Rect {\n  const offset = _getAbsoluteOffset(globalObject);\n\n  return {\n    top: rect.top + offset.top,\n    left: rect.left + offset.left,\n    width: rect.width,\n    height: rect.height,\n  };\n}\n\nfunction _getAbsoluteOffset(globalObject: GlobalObject): Offset {\n  const scrollTop = globalObject.pageYOffset || _getViewProperty((x) => x.scrollTop, globalObject);\n  const scrollLeft = globalObject.pageXOffset || _getViewProperty((x) => x.scrollLeft, globalObject);\n\n  const clientTop = _getViewProperty((x) => x.clientTop, globalObject);\n  const clientLeft = _getViewProperty((x) => x.clientLeft, globalObject);\n\n  const top = scrollTop - clientTop;\n  const left = scrollLeft - clientLeft;\n\n  return {\n    top,\n    left,\n  };\n}\n\nfunction _rectContainsRect(outerRect: Rect, innerRect: Rect): boolean {\n  return (\n    innerRect.top > outerRect.top &&\n    innerRect.top + innerRect.height < outerRect.top + outerRect.height &&\n    innerRect.left > outerRect.left &&\n    innerRect.left + innerRect.width < outerRect.left + outerRect.width\n  );\n}\n\nfunction _getViewProperty(getProperty: (e: Element) => number, globalObject: GlobalObject): number {\n  const views = [globalObject.document?.documentElement, globalObject.document?.body];\n  return views.map((x) => x && getProperty(x)).find(Boolean) || 0;\n}\n\nexport const PopupHelper = {\n  getPositionObject,\n  getElementAbsoluteRect,\n  isFullyVisible: isAbsoluteRectFullyVisible,\n  canBecomeFullyVisible,\n};\n"]}
+{"version":3,"file":"PopupHelper.js","sourceRoot":"","sources":["../../../internal/Popup/PopupHelper.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { getOwnerGlobalObject } from '../../lib/globalObject.js';\n\nimport type { PopupPositionsType } from './Popup.js';\n\nexport interface Rect {\n  top: number;\n  left: number;\n  width: number;\n  height: number;\n}\n\nexport interface Offset {\n  top: number;\n  left: number;\n}\n\nexport interface PositionObject {\n  direction: string;\n  align: string;\n}\n\nfunction getPositionObject(position: string): PositionObject {\n  const x = position.split(' ');\n\n  return {\n    direction: x[0],\n    align: x[1],\n  };\n}\n\nfunction getElementAbsoluteRect(element: Element, deltaParentPosition: Offset = { top: 0, left: 0 }): Rect {\n  const globalObject = getOwnerGlobalObject(element);\n  const rect = _getElementRelativeRect(element);\n  rect.top = rect.top - deltaParentPosition.top;\n  rect.left = rect.left - deltaParentPosition.left;\n  return convertRectToAbsolute(rect, globalObject);\n}\n\nfunction isAbsoluteRectFullyVisible(\n  coordinates: Offset,\n  popupRect: Rect,\n  globalObject: GlobalObject,\n  deltaParentPosition: Offset = { top: 0, left: 0 },\n): boolean {\n  const windowRelativeRect = _getWindowRelativeRect(globalObject);\n  const windowAbsoluteRect = convertRectToAbsolute(windowRelativeRect, globalObject);\n  const absoluteRect = {\n    top: coordinates.top + deltaParentPosition.top,\n    left: coordinates.left + deltaParentPosition.left,\n    height: popupRect.height,\n    width: popupRect.width,\n  };\n\n  return _rectContainsRect(windowAbsoluteRect, absoluteRect);\n}\n\n/** Может стать полностью видимым после прокрутки в область видимости */\nfunction canBecomeFullyVisible(positionName: PopupPositionsType, coordinates: Offset, globalObject: GlobalObject) {\n  const position = getPositionObject(positionName);\n\n  if (position.direction === 'top') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);\n    return coordinates.top + availableScrollDistances.top >= 0;\n  }\n\n  if (position.direction === 'left') {\n    const availableScrollDistances = convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);\n    return coordinates.left + availableScrollDistances.left >= 0;\n  }\n\n  // NOTE: в случаях bottom/right браузер всегда расширяет размер документа\n  return true;\n}\n\nfunction _getElementRelativeRect(element: Element) {\n  const rect = getDOMRect(element);\n\n  return {\n    top: rect.top,\n    left: rect.left,\n    width: rect.right - rect.left,\n    height: rect.bottom - rect.top,\n  };\n}\n\nfunction _getWindowRelativeRect(globalObject: GlobalObject): Rect {\n  return {\n    top: 0,\n    left: 0,\n    width: _getViewProperty((x) => x.clientWidth, globalObject) || globalObject.innerWidth || 0,\n    height: _getViewProperty((x) => x.clientHeight, globalObject) || globalObject.innerHeight || 0,\n  };\n}\n\nexport function convertRectToAbsolute(rect: Rect, globalObject: GlobalObject): Rect {\n  const offset = _getAbsoluteOffset(globalObject);\n\n  return {\n    top: rect.top + offset.top,\n    left: rect.left + offset.left,\n    width: rect.width,\n    height: rect.height,\n  };\n}\n\nfunction _getAbsoluteOffset(globalObject: GlobalObject): Offset {\n  const scrollTop = globalObject.pageYOffset || _getViewProperty((x) => x.scrollTop, globalObject);\n  const scrollLeft = globalObject.pageXOffset || _getViewProperty((x) => x.scrollLeft, globalObject);\n\n  const clientTop = _getViewProperty((x) => x.clientTop, globalObject);\n  const clientLeft = _getViewProperty((x) => x.clientLeft, globalObject);\n\n  const top = scrollTop - clientTop;\n  const left = scrollLeft - clientLeft;\n\n  return {\n    top,\n    left,\n  };\n}\n\nfunction _rectContainsRect(outerRect: Rect, innerRect: Rect): boolean {\n  return (\n    innerRect.top > outerRect.top &&\n    innerRect.top + innerRect.height < outerRect.top + outerRect.height &&\n    innerRect.left > outerRect.left &&\n    innerRect.left + innerRect.width < outerRect.left + outerRect.width\n  );\n}\n\n/** Прямоугольник вьюпорта в координатах документа (абсолютных) */\nfunction getViewportAbsoluteRect(globalObject: GlobalObject): Rect {\n  return convertRectToAbsolute(_getWindowRelativeRect(globalObject), globalObject);\n}\n\nexport interface OverflowEdges {\n  top: boolean;\n  bottom: boolean;\n  left: boolean;\n  right: boolean;\n}\n\n/** Какие стороны попапа (с заданными координатами) выходят за пределы вьюпорта */\nfunction getOverflowEdges(coordinates: Offset, popupRect: Rect, globalObject: GlobalObject): OverflowEdges {\n  const viewport = getViewportAbsoluteRect(globalObject);\n  const popup = {\n    top: coordinates.top,\n    left: coordinates.left,\n    width: popupRect.width,\n    height: popupRect.height,\n  };\n  return {\n    top: popup.top < viewport.top,\n    bottom: popup.top + popup.height > viewport.top + viewport.height,\n    left: popup.left < viewport.left,\n    right: popup.left + popup.width > viewport.left + viewport.width,\n  };\n}\n\n/** Количество сторон, по которым попап выходит за вьюпорт (0–4) */\nfunction getOverflowCount(overflow: OverflowEdges): number {\n  return [overflow.top, overflow.bottom, overflow.left, overflow.right].filter(Boolean).length;\n}\n\n/** Предпочтительное направление по вертикали при переполнении */\nfunction getPreferredDirection(overflow: OverflowEdges, defaultPosition: PopupPositionsType): string {\n  if (overflow.bottom) {\n    return 'top';\n  }\n  if (overflow.top) {\n    return 'bottom';\n  }\n  return getPositionObject(defaultPosition).direction;\n}\n\n/**\n * Упорядоченный список кандидатов для fallback-позиции: при горизонтальном переполнении\n * сначала позиции с нужным align (в т.ч. из pinnablePositions), затем по direction и positions.\n */\nfunction getOrderedFallbackCandidates(\n  positions: Readonly<PopupPositionsType[]>,\n  overflow: OverflowEdges,\n  preferredDirection: string,\n  preferredAlignOrder: string[],\n  pinnablePositions: Readonly<PopupPositionsType[]>,\n): PopupPositionsType[] {\n  const seen = new Set<PopupPositionsType>();\n  const add = (p: PopupPositionsType) => {\n    if (!seen.has(p)) {\n      seen.add(p);\n      return true;\n    }\n    return false;\n  };\n\n  const candidates: PopupPositionsType[] = [];\n  const hasHorizontalOverflow = overflow.left || overflow.right;\n\n  if (hasHorizontalOverflow) {\n    const preferredAlign = preferredAlignOrder[0];\n    for (const dir of ['bottom', 'top']) {\n      const p = `${dir} ${preferredAlign}` as PopupPositionsType;\n      if (pinnablePositions.includes(p) && add(p)) {\n        candidates.push(p);\n      }\n    }\n    for (const align of preferredAlignOrder) {\n      for (const p of positions) {\n        if (getPositionObject(p).align === align && add(p)) {\n          candidates.push(p);\n        }\n      }\n    }\n  }\n\n  for (const align of preferredAlignOrder) {\n    for (const p of positions) {\n      const pos = getPositionObject(p);\n      if (pos.direction === preferredDirection && pos.align === align && add(p)) {\n        candidates.push(p);\n      }\n    }\n  }\n  for (const p of positions) {\n    if (getPositionObject(p).direction === preferredDirection && add(p)) {\n      candidates.push(p);\n    }\n  }\n  for (const p of positions) {\n    if (add(p)) {\n      candidates.push(p);\n    }\n  }\n\n  return candidates;\n}\n\nfunction _getViewProperty(getProperty: (e: Element) => number, globalObject: GlobalObject): number {\n  const views = [globalObject.document?.documentElement, globalObject.document?.body];\n  return views.map((x) => x && getProperty(x)).find(Boolean) || 0;\n}\n\nexport const PopupHelper = {\n  getPositionObject,\n  getElementAbsoluteRect,\n  isFullyVisible: isAbsoluteRectFullyVisible,\n  convertRectToAbsolute,\n  canBecomeFullyVisible,\n  getViewportAbsoluteRect,\n  getOverflowEdges,\n  getOverflowCount,\n  getPreferredDirection,\n  getOrderedFallbackCandidates,\n};\n"]}

package/internal/RenderContainer/RenderContainer.d.ts

@@ -12,11 +12,15 @@ export declare class RenderContainer extends React.Component<RenderContainerProp
     private static getRootId;
     static readonly defaultRootNode: null;
     private domContainer;
+    private popupStrategy;
     private readonly rootId;
     getRootNode: TGetRootNode;
     shouldComponentUpdate(nextProps: RenderContainerProps): boolean;
     componentWillUnmount(): void;
+    private reflowContainer;
     render(): React.JSX.Element;
+    private debouncedReflowContainer;
+    renderMain(): React.JSX.Element;
     private createContainer;
     private mountContainer;
     private destroyContainer;

package/internal/RenderContainer/RenderContainer.js

@@ -25,10 +25,13 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import React from 'react';
+import debounce from 'lodash.debounce';
 import { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';
 import { getRandomID } from '../../lib/utils.js';
 import { Upgrade } from '../../lib/Upgrades.js';
 import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
+import { PopupConsumer } from '../../lib/theming/Emotion.js';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';
 import { RenderInnerContainer } from './RenderInnerContainer.js';
 export var PORTAL_INLET_ATTR = 'data-render-container-id';
 export var PORTAL_OUTLET_ATTR = 'data-rendered-container-id';
@@ -39,6 +42,15 @@ var RenderContainer = /** @class */ (function (_super) {
         _this.domContainer = RenderContainer.defaultRootNode;
         _this.rootId = RenderContainer.getRootId();
         _this.getRootNode = function () { return _this.domContainer; };
+        _this.reflowContainer = function () {
+            var _a;
+            var root = _this.context.emotion.sheet.container.getRootNode();
+            var globalObject = _this.context.globalObject;
+            if (isShadowRoot(root) && _this.domContainer && globalObject) {
+                _this.domContainer.setAttribute('style', "position: fixed;z-index: 2;\n         margin-top: -".concat(root.host.getBoundingClientRect().height + ((_a = globalObject.scrollY) !== null && _a !== void 0 ? _a : 0), "px;\n         margin-left: -").concat(_this.context.globalObject.scrollX, "px;\n         "));
+            }
+        };
+        _this.debouncedReflowContainer = debounce(_this.reflowContainer, 32);
         return _this;
     }
     RenderContainer.prototype.shouldComponentUpdate = function (nextProps) {
@@ -51,31 +63,66 @@ var RenderContainer = /** @class */ (function (_super) {
         return true;
     };
     RenderContainer.prototype.componentWillUnmount = function () {
+        var _a, _b, _c, _d;
         this.destroyContainer();
+        if (this.context.globalObject) {
+            (_b = (_a = this.context.globalObject).removeEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'scroll', this.reflowContainer);
+            (_d = (_c = this.context.globalObject).removeEventListener) === null || _d === void 0 ? void 0 : _d.call(_c, 'resize', this.reflowContainer);
+        }
     };
     RenderContainer.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(PopupConsumer, null, function (_a) {
+            var popupStrategy = _a.popupStrategy;
+            _this.popupStrategy = popupStrategy !== null && popupStrategy !== void 0 ? popupStrategy : 'auto';
+            return _this.renderMain();
+        }));
+    };
+    RenderContainer.prototype.renderMain = function () {
         if (this.props.children) {
             this.mountContainer();
         }
         return React.createElement(RenderInnerContainer, __assign({}, this.props, { domContainer: this.domContainer, rootId: this.rootId }));
     };
     RenderContainer.prototype.createContainer = function () {
-        var _a;
-        var domContainer = (_a = this.context.globalObject.document) === null || _a === void 0 ? void 0 : _a.createElement('div');
+        var _a, _b, _c, _d;
+        var globalObject = this.context.globalObject;
+        var domContainer = (_a = globalObject === null || globalObject === void 0 ? void 0 : globalObject.document) === null || _a === void 0 ? void 0 : _a.createElement('div');
         if (domContainer) {
             domContainer.setAttribute('class', Upgrade.getSpecificityClassName());
+            var root = this.context.emotion.sheet.container.getRootNode();
+            if (isShadowRoot(root) && globalObject) {
+                var rootHeight = root.host.getBoundingClientRect().height;
+                switch (this.popupStrategy) {
+                    case 'relative':
+                        domContainer.setAttribute('style', "position: relative; top: -".concat(rootHeight, "px"));
+                        break;
+                    case 'auto':
+                    case 'absolute':
+                        domContainer.setAttribute('style', "position: absolute; z-index: 2; margin-top: -".concat(rootHeight, "px;"));
+                        break;
+                    case 'fixed': {
+                        (_b = globalObject.addEventListener) === null || _b === void 0 ? void 0 : _b.call(globalObject, 'scroll', this.debouncedReflowContainer);
+                        (_c = globalObject.addEventListener) === null || _c === void 0 ? void 0 : _c.call(globalObject, 'resize', this.debouncedReflowContainer);
+                        domContainer.setAttribute('style', "position: fixed;z-index: 2;\n              margin-top: -".concat(rootHeight + ((_d = globalObject.scrollY) !== null && _d !== void 0 ? _d : 0), "px;\n              margin-left: -").concat(globalObject.scrollX, "px;\n              "));
+                        break;
+                    }
+                }
+            }
             domContainer.setAttribute(PORTAL_OUTLET_ATTR, "".concat(this.rootId));
             this.domContainer = domContainer;
         }
     };
     RenderContainer.prototype.mountContainer = function () {
-        var _a, _b;
+        var _a, _b, _c;
         var globalWithReactTesting = this.context.globalObject;
         if (!this.domContainer) {
             this.createContainer();
         }
-        if (this.domContainer && this.domContainer.parentNode !== ((_a = this.context.globalObject.document) === null || _a === void 0 ? void 0 : _a.body)) {
-            (_b = this.context.globalObject.document) === null || _b === void 0 ? void 0 : _b.body.appendChild(this.domContainer);
+        var stylesRoot = (_b = (_a = this.context.emotion.sheet) === null || _a === void 0 ? void 0 : _a.container) === null || _b === void 0 ? void 0 : _b.getRootNode();
+        var rootElement = isShadowRoot(stylesRoot) && stylesRoot ? stylesRoot : (_c = this.context.globalObject.document) === null || _c === void 0 ? void 0 : _c.body;
+        if (this.domContainer && this.domContainer.parentNode !== rootElement) {
+            rootElement === null || rootElement === void 0 ? void 0 : rootElement.appendChild(this.domContainer);
             if (this.props.containerRef) {
                 callChildRef(this.props.containerRef, this.domContainer);
             }

package/internal/RenderContainer/RenderContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderContainer.js","sourceRoot":"","sources":["../../../internal/RenderContainer/RenderContainer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAE,wBAAwB,EAAE,MAAM,sCAAsC,CAAC;AAGhF,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC;AAEtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAOjE,MAAM,CAAC,IAAM,iBAAiB,GAAG,0BAA0B,CAAC;AAC5D,MAAM,CAAC,IAAM,kBAAkB,GAAG,4BAA4B,CAAC;AAE/D;IAAqC,mCAAqC;IAA1E;;QAUU,kBAAY,GAA0B,eAAe,CAAC,eAAe,CAAC;QAE7D,YAAM,GAAW,eAAe,CAAC,SAAS,EAAE,CAAC;QAEvD,iBAAW,GAAiB,cAAyB,OAAA,KAAI,CAAC,YAAY,EAAjB,CAAiB,CAAC;;IAwEhF,CAAC;IAtEQ,+CAAqB,GAA5B,UAA6B,SAA+B;QAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QACD,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAAC;YAC/C,IAAI,CAAC,gBAAgB,EAAE,CAAC;QAC1B,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAEM,8CAAoB,GAA3B;QACE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAEM,gCAAM,GAAb;QACE,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,EAAE,CAAC;QACxB,CAAC;QAED,OAAO,oBAAC,oBAAoB,eAAK,IAAI,CAAC,KAAK,IAAE,YAAY,EAAE,IAAI,CAAC,YAAY,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,IAAI,CAAC;IACxG,CAAC;IAEO,yCAAe,GAAvB;;QACE,IAAM,YAAY,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,YAAY,CAAC,OAAO,EAAE,OAAO,CAAC,uBAAuB,EAAE,CAAC,CAAC;YACtE,YAAY,CAAC,YAAY,CAAC,kBAAkB,EAAE,UAAG,IAAI,CAAC,MAAM,CAAE,CAAC,CAAC;YAChE,IAAI,CAAC,YAAY,GAAG,YAAY,CAAC;QACnC,CAAC;IACH,CAAC;IAEO,wCAAc,GAAtB;;QACE,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;QAEnF,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC;YACvB,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,MAAK,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAA,EAAE,CAAC;YACnG,MAAA,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAExE,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;YAC3D,CAAC;YACD,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;YAC5E,CAAC;QACH,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxB,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC;QAC3B,CAAC;IACH,CAAC;IAEO,0CAAgB,GAAxB;QACE,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;YACtD,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,WAAW,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;YAE5D,IAAI,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC;gBAC5B,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,EAAE,IAAI,CAAC,CAAC;YAC9C,CAAC;YAED,IAAM,sBAAsB,GAAG,IAAI,CAAC,OAAO,CAAC,YAAsC,CAAC;YACnF,IAAI,sBAAsB,CAAC,YAAY,EAAE,CAAC;gBACxC,sBAAsB,CAAC,YAAY,CAAC,qBAAqB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;YACzE,CAAC;QACH,CAAC;IACH,CAAC;IApFa,mCAAmB,GAAG,iBAAiB,AAApB,CAAqB;IACxC,2BAAW,GAAG,iBAAiB,AAApB,CAAqB;IAEhC,2BAAW,GAAG,wBAAwB,AAA3B,CAA4B;IAGtC,yBAAS,GAAG,cAAM,OAAA,WAAW,EAAE,EAAb,CAAa,AAAtB,CAAuB;IAC/C,sBAAsB;IACC,+BAAe,GAAG,IAAI,AAAP,CAAQ;IA6EhD,sBAAC;CAAA,AAtFD,CAAqC,KAAK,CAAC,SAAS,GAsFnD;SAtFY,eAAe","sourcesContent":["import React from 'react';\n\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\n\nimport { RenderInnerContainer } from './RenderInnerContainer.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\n\ninterface GlobalWithReactTesting {\n  ReactTesting?: any;\n}\n\nexport const PORTAL_INLET_ATTR = 'data-render-container-id';\nexport const PORTAL_OUTLET_ATTR = 'data-rendered-container-id';\n\nexport class RenderContainer extends React.Component<RenderContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderContainer';\n  public static displayName = 'RenderContainer';\n\n  public static contextType = RenderEnvironmentContext;\n  public context!: RenderEnvironmentContextType;\n\n  private static getRootId = () => getRandomID();\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n  private domContainer: Nullable<HTMLElement> = RenderContainer.defaultRootNode;\n\n  private readonly rootId: string = RenderContainer.getRootId();\n\n  public getRootNode: TGetRootNode = (): Nullable<Element> => this.domContainer;\n\n  public shouldComponentUpdate(nextProps: RenderContainerProps) {\n    if (!this.props.children && nextProps.children) {\n      this.mountContainer();\n    }\n    if (this.props.children && !nextProps.children) {\n      this.unmountContainer();\n    }\n    return true;\n  }\n\n  public componentWillUnmount() {\n    this.destroyContainer();\n  }\n\n  public render() {\n    if (this.props.children) {\n      this.mountContainer();\n    }\n\n    return <RenderInnerContainer {...this.props} domContainer={this.domContainer} rootId={this.rootId} />;\n  }\n\n  private createContainer() {\n    const domContainer = this.context.globalObject.document?.createElement('div');\n    if (domContainer) {\n      domContainer.setAttribute('class', Upgrade.getSpecificityClassName());\n      domContainer.setAttribute(PORTAL_OUTLET_ATTR, `${this.rootId}`);\n      this.domContainer = domContainer;\n    }\n  }\n\n  private mountContainer() {\n    const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n\n    if (!this.domContainer) {\n      this.createContainer();\n    }\n    if (this.domContainer && this.domContainer.parentNode !== this.context.globalObject.document?.body) {\n      this.context.globalObject.document?.body.appendChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, this.domContainer);\n      }\n      if (globalWithReactTesting.ReactTesting) {\n        globalWithReactTesting.ReactTesting.addRenderContainer(this.rootId, this);\n      }\n    }\n  }\n\n  private destroyContainer() {\n    if (this.domContainer) {\n      this.unmountContainer();\n      this.domContainer = null;\n    }\n  }\n\n  private unmountContainer() {\n    if (this.domContainer && this.domContainer.parentNode) {\n      this.domContainer.parentNode.removeChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, null);\n      }\n\n      const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n      if (globalWithReactTesting.ReactTesting) {\n        globalWithReactTesting.ReactTesting.removeRenderContainer(this.rootId);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"RenderContainer.js","sourceRoot":"","sources":["../../../internal/RenderContainer/RenderContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\nimport debounce from 'lodash.debounce';\n\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { PopupStrategy, RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { PopupConsumer } from '../../lib/theming/Emotion.js';\nimport { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';\n\nimport { RenderInnerContainer } from './RenderInnerContainer.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\n\ninterface GlobalWithReactTesting {\n  ReactTesting?: any;\n}\n\nexport const PORTAL_INLET_ATTR = 'data-render-container-id';\nexport const PORTAL_OUTLET_ATTR = 'data-rendered-container-id';\n\nexport class RenderContainer extends React.Component<RenderContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderContainer';\n  public static displayName = 'RenderContainer';\n\n  public static contextType = RenderEnvironmentContext;\n  public context!: RenderEnvironmentContextType;\n\n  private static getRootId = () => getRandomID();\n  // see #2873 and #2895\n  public static readonly defaultRootNode = null;\n  private domContainer: Nullable<HTMLElement> = RenderContainer.defaultRootNode;\n  private popupStrategy!: PopupStrategy;\n\n  private readonly rootId: string = RenderContainer.getRootId();\n\n  public getRootNode: TGetRootNode = (): Nullable<Element> => this.domContainer;\n\n  public shouldComponentUpdate(nextProps: RenderContainerProps) {\n    if (!this.props.children && nextProps.children) {\n      this.mountContainer();\n    }\n    if (this.props.children && !nextProps.children) {\n      this.unmountContainer();\n    }\n    return true;\n  }\n\n  public componentWillUnmount() {\n    this.destroyContainer();\n    if (this.context.globalObject) {\n      this.context.globalObject.removeEventListener?.('scroll', this.reflowContainer);\n      this.context.globalObject.removeEventListener?.('resize', this.reflowContainer);\n    }\n  }\n\n  private reflowContainer = () => {\n    const root = this.context.emotion.sheet.container.getRootNode() as ShadowRoot | Document;\n    const globalObject = this.context.globalObject;\n    if (isShadowRoot(root) && this.domContainer && globalObject) {\n      this.domContainer.setAttribute(\n        'style',\n        `position: fixed;z-index: 2;\n         margin-top: -${root.host.getBoundingClientRect().height + (globalObject.scrollY ?? 0)}px;\n         margin-left: -${this.context.globalObject.scrollX}px;\n         `,\n      );\n    }\n  };\n\n  public render() {\n    return (\n      <PopupConsumer>\n        {({ popupStrategy }) => {\n          this.popupStrategy = popupStrategy ?? 'auto';\n          return this.renderMain();\n        }}\n      </PopupConsumer>\n    );\n  }\n\n  private debouncedReflowContainer = debounce(this.reflowContainer, 32);\n\n  public renderMain() {\n    if (this.props.children) {\n      this.mountContainer();\n    }\n\n    return <RenderInnerContainer {...this.props} domContainer={this.domContainer} rootId={this.rootId} />;\n  }\n\n  private createContainer() {\n    const globalObject = this.context.globalObject;\n    const domContainer = globalObject?.document?.createElement('div');\n    if (domContainer) {\n      domContainer.setAttribute('class', Upgrade.getSpecificityClassName());\n\n      const root = this.context.emotion.sheet.container.getRootNode() as ShadowRoot | Document;\n      if (isShadowRoot(root) && globalObject) {\n        const rootHeight = root.host.getBoundingClientRect().height;\n        switch (this.popupStrategy) {\n          case 'relative':\n            domContainer.setAttribute('style', `position: relative; top: -${rootHeight}px`);\n            break;\n          case 'auto':\n          case 'absolute':\n            domContainer.setAttribute('style', `position: absolute; z-index: 2; margin-top: -${rootHeight}px;`);\n            break;\n          case 'fixed': {\n            globalObject.addEventListener?.('scroll', this.debouncedReflowContainer);\n            globalObject.addEventListener?.('resize', this.debouncedReflowContainer);\n            domContainer.setAttribute(\n              'style',\n              `position: fixed;z-index: 2;\n              margin-top: -${rootHeight + (globalObject.scrollY ?? 0)}px;\n              margin-left: -${globalObject.scrollX}px;\n              `,\n            );\n            break;\n          }\n        }\n      }\n\n      domContainer.setAttribute(PORTAL_OUTLET_ATTR, `${this.rootId}`);\n      this.domContainer = domContainer;\n    }\n  }\n\n  private mountContainer() {\n    const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n\n    if (!this.domContainer) {\n      this.createContainer();\n    }\n\n    const stylesRoot = this.context.emotion.sheet?.container?.getRootNode();\n    const rootElement = isShadowRoot(stylesRoot) && stylesRoot ? stylesRoot : this.context.globalObject.document?.body;\n\n    if (this.domContainer && this.domContainer.parentNode !== rootElement) {\n      rootElement?.appendChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, this.domContainer);\n      }\n      if (globalWithReactTesting.ReactTesting) {\n        globalWithReactTesting.ReactTesting.addRenderContainer(this.rootId, this);\n      }\n    }\n  }\n\n  private destroyContainer() {\n    if (this.domContainer) {\n      this.unmountContainer();\n      this.domContainer = null;\n    }\n  }\n\n  private unmountContainer() {\n    if (this.domContainer && this.domContainer.parentNode) {\n      this.domContainer.parentNode.removeChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, null);\n      }\n\n      const globalWithReactTesting = this.context.globalObject as GlobalWithReactTesting;\n      if (globalWithReactTesting.ReactTesting) {\n        globalWithReactTesting.ReactTesting.removeRenderContainer(this.rootId);\n      }\n    }\n  }\n}\n"]}

package/internal/RenderLayer/RenderLayer.d.ts

@@ -15,6 +15,7 @@ export declare class RenderLayer extends React.Component<RenderLayerProps> {
     static displayName: string;
     static defaultProps: DefaultProps;
     private globalObject;
+    private emotion;
     private getProps;
     private focusOutsideListenerToken;
     getRootNode: TGetRootNode;

package/internal/RenderLayer/RenderLayer.js

@@ -31,11 +31,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import React from 'react';
-import { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside.js';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';
+import { listen as listenFocusOutside, clickOutsideContent } from '../../lib/listenFocusOutside.js';
 import { CommonWrapper } from '../CommonWrapper/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { isInstanceOf } from '../../lib/isInstanceOf.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 var RenderLayer = /** @class */ (function (_super) {
     __extends(RenderLayer, _super);
@@ -49,12 +49,10 @@ var RenderLayer = /** @class */ (function (_super) {
             }
         };
         _this.handleNativeDocClick = function (event) {
-            var target = event.target || event.srcElement;
             var node = _this.getAnchorNode();
-            if (!node || (isInstanceOf(target, _this.globalObject.Element) && containsTargetOrRenderContainer(target)(node))) {
-                return;
-            }
-            if (_this.props.onClickOutside) {
+            var isShadowRootElement = isShadowRoot(_this.emotion.sheet.container.getRootNode());
+            var clickOutsideOfContent = clickOutsideContent(event, node, isShadowRootElement, _this.globalObject);
+            if (clickOutsideOfContent && _this.props.onClickOutside) {
                 _this.props.onClickOutside(event);
             }
         };

package/internal/RenderLayer/RenderLayer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderLayer.js","sourceRoot":"","sources":["../../../internal/RenderLayer/RenderLayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\n\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { listen as listenFocusOutside, containsTargetOrRenderContainer } from '../../lib/listenFocusOutside.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@withRenderEnvironment\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n  public static displayName = 'RenderLayer';\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private globalObject!: GlobalObject;\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const { active } = this.getProps();\n\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside, this.globalObject);\n    this.globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.addEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    this.globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.removeEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const target = event.target || event.srcElement;\n    const node = this.getAnchorNode();\n\n    if (!node || (isInstanceOf(target, this.globalObject.Element) && containsTargetOrRenderContainer(target)(node))) {\n      return;\n    }\n\n    if (this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}
+{"version":3,"file":"RenderLayer.js","sourceRoot":"","sources":["../../../internal/RenderLayer/RenderLayer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { type JSX } from 'react';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { listen as listenFocusOutside, clickOutsideContent } from '../../lib/listenFocusOutside.js';\nimport type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\n\nexport interface RenderLayerProps extends CommonProps {\n  children: JSX.Element;\n  onClickOutside?: (e: Event) => void;\n  onFocusOutside?: (e: Event) => void;\n  active?: boolean;\n  getAnchorElement?: () => Nullable<Element>;\n}\n\ntype DefaultProps = Required<Pick<RenderLayerProps, 'active'>>;\n\n@withRenderEnvironment\n@rootNode\nexport class RenderLayer extends React.Component<RenderLayerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderLayer';\n  public static displayName = 'RenderLayer';\n\n  public static defaultProps: DefaultProps = {\n    active: true,\n  };\n\n  private globalObject!: GlobalObject;\n  private emotion!: Emotion;\n  private getProps = createPropsGetter(RenderLayer.defaultProps);\n\n  private focusOutsideListenerToken: {\n    remove: () => void;\n  } | null = null;\n  public getRootNode!: TGetRootNode;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    if (this.getProps().active) {\n      this.attachListeners();\n    }\n  }\n\n  public componentDidUpdate(prevProps: RenderLayerProps) {\n    const { active } = this.getProps();\n\n    if (!prevProps.active && active) {\n      this.attachListeners();\n    }\n    if (prevProps.active && !active) {\n      this.detachListeners();\n    }\n  }\n\n  public componentWillUnmount() {\n    if (this.getProps().active) {\n      this.detachListeners();\n    }\n  }\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        {React.Children.only(this.props.children)}\n      </CommonWrapper>\n    );\n  }\n\n  private getAnchorNode(): Nullable<Element> {\n    const { getAnchorElement } = this.props;\n    return getAnchorElement ? getAnchorElement() : getRootNode(this);\n  }\n\n  private attachListeners() {\n    const node = this.getAnchorNode();\n    if (!node) {\n      return;\n    }\n\n    this.focusOutsideListenerToken = listenFocusOutside(() => [node], this.handleFocusOutside, this.globalObject);\n    this.globalObject.addEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.addEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private detachListeners() {\n    if (this.focusOutsideListenerToken) {\n      this.focusOutsideListenerToken.remove();\n      this.focusOutsideListenerToken = null;\n    }\n\n    this.globalObject.removeEventListener?.('blur', this.handleFocusOutside);\n    this.globalObject.document?.removeEventListener(\n      'ontouchstart' in this.globalObject.document.documentElement &&\n        'onpointerup' in this.globalObject.document.documentElement\n        ? 'pointerup'\n        : 'mousedown',\n      this.handleNativeDocClick,\n    );\n  }\n\n  private handleFocusOutside = (event: Event) => {\n    if (this.props.onFocusOutside) {\n      this.props.onFocusOutside(event);\n    }\n  };\n\n  private handleNativeDocClick = (event: Event) => {\n    const node = this.getAnchorNode();\n    const isShadowRootElement = isShadowRoot(this.emotion.sheet.container.getRootNode());\n    const clickOutsideOfContent = clickOutsideContent(event, node, isShadowRootElement, this.globalObject);\n    if (clickOutsideOfContent && this.props.onClickOutside) {\n      this.props.onClickOutside(event);\n    }\n  };\n}\n"]}

package/internal/themes/BasicTheme.d.ts

@@ -1022,8 +1022,6 @@ export declare class BasicThemeClass {
     static get textareaMinHeightSmall(): string;
     static get textareaMinHeightMedium(): string;
     static get textareaMinHeightLarge(): string;
-    /** @deprecated Перестала использоваться с версии `react-ui@5.6.7`. */
-    static textareaWidth: string;
     static textareaPaddingXSmall: string;
     static textareaPaddingXMedium: string;
     static textareaPaddingXLarge: string;

package/internal/themes/BasicTheme.js

@@ -3754,15 +3754,15 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.btnIconSizeSmall = '16px';
     BasicThemeClass.btnIconSizeMedium = '20px';
     BasicThemeClass.btnIconSizeLarge = '24px';
-    BasicThemeClass.btnDefaultBg = colors.shapeOtherBase;
+    BasicThemeClass.btnDefaultBg = '#fff';
     BasicThemeClass.btnDefaultBgStart = 'none';
     BasicThemeClass.btnDefaultBgEnd = 'none';
     // TODO: create token in colors package
-    BasicThemeClass.btnDefaultHoverBg = '#F2F2F2';
+    BasicThemeClass.btnDefaultHoverBg = '#f2f2f2';
     BasicThemeClass.btnDefaultHoverBgStart = 'none';
     BasicThemeClass.btnDefaultHoverBgEnd = 'none';
     // TODO: create token in colors package
-    BasicThemeClass.btnDefaultActiveBg = '#E4E4E4';
+    BasicThemeClass.btnDefaultActiveBg = '#f2f2f2';
     BasicThemeClass.btnDefaultHoverTextColor = colors.textNeutralHeavy;
     BasicThemeClass.btnDefaultBorderColor = colors.lineNeutralPale;
     BasicThemeClass.btnDefaultActiveShadow = 'none';
@@ -3918,8 +3918,8 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.modalSeparatorBorderBottom = "1px solid ".concat(colors.lineNeutralFaint);
     BasicThemeClass.modalSeparatorMargin = '0 32px';
     BasicThemeClass.modalSeparatorFixedMargin = '0 16px';
-    BasicThemeClass.modalBodyTextColor = 'inherit';
-    BasicThemeClass.modalFooterTextColor = 'inherit';
+    BasicThemeClass.modalBodyTextColor = _a.textColorDefault;
+    BasicThemeClass.modalFooterTextColor = _a.textColorDefault;
     BasicThemeClass.modalBodyPaddingTop = '0';
     BasicThemeClass.modalBodyPaddingBottom = '20px';
     BasicThemeClass.modalBodyBorderRadius = '0px';
@@ -3961,8 +3961,8 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.sidePageFooterPaddingTop = '20px';
     BasicThemeClass.sidePageFooterPaddingBottom = '20px';
     BasicThemeClass.sidePageBgDefault = colors.surfaceHigh;
-    BasicThemeClass.sidePageBodyTextColor = 'inherit';
-    BasicThemeClass.sidePageFooterTextColor = 'inherit';
+    BasicThemeClass.sidePageBodyTextColor = _a.textColorDefault;
+    BasicThemeClass.sidePageFooterTextColor = _a.textColorDefault;
     BasicThemeClass.sidePageHeaderFontSize = '24px';
     BasicThemeClass.sidePageHeaderLineHeight = '32px';
     BasicThemeClass.sidePageHeaderPaddingBottom = '16px';
@@ -4275,8 +4275,6 @@ var BasicThemeClass = /** @class */ (function () {
     BasicThemeClass.textareaBorderColor = colors.lineNeutralPale;
     BasicThemeClass.textareaBackgroundClip = 'padding-box';
     BasicThemeClass.textareaBorderRadius = '2px';
-    /** @deprecated Перестала использоваться с версии `react-ui@5.6.7`. */
-    BasicThemeClass.textareaWidth = '250px';
     BasicThemeClass.textareaPaddingXSmall = '7px';
     BasicThemeClass.textareaPaddingXMedium = '11px';
     BasicThemeClass.textareaPaddingXLarge = '15px';