@skbkontur/react-ui 6.0.3 → 6.0.4-46247.0

package/internal/RenderContainer/RenderContainer.js

@@ -24,9 +24,12 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import debounce from 'lodash.debounce';
 import React from 'react';
 import { callChildRef } from '../../lib/callChildRef/callChildRef.js';
 import { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';
+import { PopupConsumer } from '../../lib/theming/Emotion.js';
 import { Upgrade } from '../../lib/Upgrades.js';
 import { getRandomID } from '../../lib/utils.js';
 import { RenderInnerContainer } from './RenderInnerContainer.js';
@@ -37,8 +40,26 @@ var RenderContainer = /** @class */ (function (_super) {
     function RenderContainer() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.domContainer = RenderContainer.defaultRootNode;
+        _this.hasReflowListener = false;
         _this.rootId = RenderContainer.getRootId();
         _this.getRootNode = function () { return _this.domContainer; };
+        _this.getStylesRoot = function () {
+            var _a, _b, _c;
+            var getRootNode = (_c = (_b = (_a = _this.context.emotion) === null || _a === void 0 ? void 0 : _a.sheet) === null || _b === void 0 ? void 0 : _b.container) === null || _c === void 0 ? void 0 : _c.getRootNode;
+            if (typeof getRootNode !== 'function') {
+                return null;
+            }
+            return getRootNode.call(_this.context.emotion.sheet.container);
+        };
+        _this.reflowContainer = function () {
+            var _a, _b;
+            var root = _this.getStylesRoot();
+            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((_b = _this.context.globalObject.scrollX) !== null && _b !== void 0 ? _b : 0, "px;\n         "));
+            }
+        };
+        _this.debouncedReflowContainer = debounce(_this.reflowContainer, 32);
         return _this;
     }
     RenderContainer.prototype.shouldComponentUpdate = function (nextProps) {
@@ -52,8 +73,60 @@ var RenderContainer = /** @class */ (function (_super) {
     };
     RenderContainer.prototype.componentWillUnmount = function () {
         this.destroyContainer();
+        this.removeReflowListeners();
+    };
+    RenderContainer.prototype.removeReflowListeners = function () {
+        var _a, _b;
+        var globalObject = this.context.globalObject;
+        if (this.hasReflowListener && globalObject) {
+            (_a = globalObject.removeEventListener) === null || _a === void 0 ? void 0 : _a.call(globalObject, 'scroll', this.debouncedReflowContainer);
+            (_b = globalObject.removeEventListener) === null || _b === void 0 ? void 0 : _b.call(globalObject, 'resize', this.debouncedReflowContainer);
+            this.hasReflowListener = false;
+        }
+    };
+    RenderContainer.prototype.updateContainerStrategy = function () {
+        var _a, _b, _c, _d;
+        var domContainer = this.domContainer;
+        var globalObject = this.context.globalObject;
+        var root = this.getStylesRoot();
+        if (!domContainer || !globalObject) {
+            return;
+        }
+        if (!isShadowRoot(root)) {
+            this.removeReflowListeners();
+            domContainer.removeAttribute('style');
+            return;
+        }
+        var rootHeight = root.host.getBoundingClientRect().height;
+        switch (this.popupStrategy) {
+            case 'unstable_relative':
+                this.removeReflowListeners();
+                domContainer.setAttribute('style', "position: relative; top: -".concat(rootHeight, "px"));
+                return;
+            case 'auto':
+                this.removeReflowListeners();
+                domContainer.setAttribute('style', "position: absolute; z-index: 2; margin-top: -".concat(rootHeight, "px;"));
+                return;
+            case 'fixed': {
+                if (!this.hasReflowListener) {
+                    (_a = globalObject.addEventListener) === null || _a === void 0 ? void 0 : _a.call(globalObject, 'scroll', this.debouncedReflowContainer);
+                    (_b = globalObject.addEventListener) === null || _b === void 0 ? void 0 : _b.call(globalObject, 'resize', this.debouncedReflowContainer);
+                    this.hasReflowListener = true;
+                }
+                domContainer.setAttribute('style', "position: fixed;z-index: 2;\n           margin-top: -".concat(rootHeight + ((_c = globalObject.scrollY) !== null && _c !== void 0 ? _c : 0), "px;\n           margin-left: -").concat((_d = globalObject.scrollX) !== null && _d !== void 0 ? _d : 0, "px;\n           "));
+                return;
+            }
+        }
     };
     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();
         }
@@ -61,21 +134,26 @@ var RenderContainer = /** @class */ (function (_super) {
     };
     RenderContainer.prototype.createContainer = function () {
         var _a;
-        var domContainer = (_a = this.context.globalObject.document) === null || _a === void 0 ? void 0 : _a.createElement('div');
+        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());
             domContainer.setAttribute(PORTAL_OUTLET_ATTR, "".concat(this.rootId));
             this.domContainer = domContainer;
+            this.updateContainerStrategy();
         }
     };
     RenderContainer.prototype.mountContainer = function () {
-        var _a, _b;
+        var _a;
         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);
+        this.updateContainerStrategy();
+        var stylesRoot = this.getStylesRoot();
+        var rootElement = isShadowRoot(stylesRoot) && stylesRoot ? stylesRoot : (_a = this.context.globalObject.document) === null || _a === void 0 ? void 0 : _a.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);
             }
@@ -91,6 +169,7 @@ var RenderContainer = /** @class */ (function (_super) {
         }
     };
     RenderContainer.prototype.unmountContainer = function () {
+        this.removeReflowListeners();
         if (this.domContainer && this.domContainer.parentNode) {
             this.domContainer.parentNode.removeChild(this.domContainer);
             if (this.props.containerRef) {

package/internal/RenderContainer/RenderContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderContainer.js","sourceRoot":"","sources":["../../../internal/RenderContainer/RenderContainer.tsx"],"names":[],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\nimport { RenderInnerContainer } from './RenderInnerContainer.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 debounce from 'lodash.debounce';\nimport React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef.js';\nimport { RenderEnvironmentContext } from '../../lib/renderEnvironment/index.js';\nimport type { PopupStrategy, RenderEnvironmentContextType } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode } from '../../lib/rootNode/rootNodeDecorator.js';\nimport { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';\nimport { PopupConsumer } from '../../lib/theming/Emotion.js';\nimport { Upgrade } from '../../lib/Upgrades.js';\nimport { getRandomID } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport type { RenderContainerProps } from './RenderContainerTypes.js';\nimport { RenderInnerContainer } from './RenderInnerContainer.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  private hasReflowListener = false;\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    this.removeReflowListeners();\n  }\n\n  private getStylesRoot = (): ShadowRoot | Document | null => {\n    const getRootNode = this.context.emotion?.sheet?.container?.getRootNode;\n    if (typeof getRootNode !== 'function') {\n      return null;\n    }\n    return getRootNode.call(this.context.emotion.sheet.container) as ShadowRoot | Document;\n  };\n\n  private reflowContainer = () => {\n    const root = this.getStylesRoot();\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 ?? 0}px;\n         `,\n      );\n    }\n  };\n\n  private debouncedReflowContainer = debounce(this.reflowContainer, 32);\n\n  private removeReflowListeners() {\n    const globalObject = this.context.globalObject;\n    if (this.hasReflowListener && globalObject) {\n      globalObject.removeEventListener?.('scroll', this.debouncedReflowContainer);\n      globalObject.removeEventListener?.('resize', this.debouncedReflowContainer);\n      this.hasReflowListener = false;\n    }\n  }\n\n  private updateContainerStrategy() {\n    const domContainer = this.domContainer;\n    const globalObject = this.context.globalObject;\n    const root = this.getStylesRoot();\n\n    if (!domContainer || !globalObject) {\n      return;\n    }\n\n    if (!isShadowRoot(root)) {\n      this.removeReflowListeners();\n      domContainer.removeAttribute('style');\n      return;\n    }\n\n    const rootHeight = root.host.getBoundingClientRect().height;\n    switch (this.popupStrategy) {\n      case 'unstable_relative':\n        this.removeReflowListeners();\n        domContainer.setAttribute('style', `position: relative; top: -${rootHeight}px`);\n        return;\n      case 'auto':\n        this.removeReflowListeners();\n        domContainer.setAttribute('style', `position: absolute; z-index: 2; margin-top: -${rootHeight}px;`);\n        return;\n      case 'fixed': {\n        if (!this.hasReflowListener) {\n          globalObject.addEventListener?.('scroll', this.debouncedReflowContainer);\n          globalObject.addEventListener?.('resize', this.debouncedReflowContainer);\n          this.hasReflowListener = true;\n        }\n        domContainer.setAttribute(\n          'style',\n          `position: fixed;z-index: 2;\n           margin-top: -${rootHeight + (globalObject.scrollY ?? 0)}px;\n           margin-left: -${globalObject.scrollX ?? 0}px;\n           `,\n        );\n        return;\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  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      domContainer.setAttribute(PORTAL_OUTLET_ATTR, `${this.rootId}`);\n      this.domContainer = domContainer;\n      this.updateContainerStrategy();\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    this.updateContainerStrategy();\n\n    const stylesRoot = this.getStylesRoot();\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    this.removeReflowListeners();\n\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

@@ -1,7 +1,7 @@
 import React, { type JSX } from 'react';
 import type { TGetRootNode } from '../../lib/rootNode/index.js';
 import type { Nullable } from '../../typings/utility-types.js';
-import type { CommonProps } from '../CommonWrapper/index.js';
+import { type CommonProps } from '../CommonWrapper/index.js';
 export interface RenderLayerProps extends CommonProps {
     children: JSX.Element;
     onClickOutside?: (e: Event) => void;
@@ -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

@@ -32,10 +32,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import React from 'react';
 import { createPropsGetter } from '../../lib/createPropsGetter.js';
-import { isInstanceOf } from '../../lib/isInstanceOf.js';
-import { containsTargetOrRenderContainer, listen as listenFocusOutside } from '../../lib/listenFocusOutside.js';
+import { listen as listenFocusOutside, clickOutsideContent } from '../../lib/listenFocusOutside.js';
 import { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';
 import { getRootNode, rootNode } from '../../lib/rootNode/index.js';
+import { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';
 import { CommonWrapper } from '../CommonWrapper/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 { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { isInstanceOf } from '../../lib/isInstanceOf.js';\nimport { containsTargetOrRenderContainer, listen as listenFocusOutside } from '../../lib/listenFocusOutside.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/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 type { CommonProps } from '../CommonWrapper/index.js';\nimport { CommonWrapper } from '../CommonWrapper/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 type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport { listen as listenFocusOutside, clickOutsideContent } from '../../lib/listenFocusOutside.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport { isShadowRoot } from '../../lib/shadowDom/isShadowRoot.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { CommonWrapper, type CommonProps } from '../CommonWrapper/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/lib/listenFocusOutside.d.ts

@@ -1,4 +1,5 @@
-import type { GlobalObject } from '../lib/globalObject.js';
+import { type GlobalObject } from '../lib/globalObject.js';
+import type { Nullable } from '../typings/utility-types.js';
 export declare function containsTargetOrRenderContainer(target: Element): (element: Element) => boolean;
 /**
  * Searches RenderContainer placed in "rootNode" for "node"
@@ -7,3 +8,4 @@ export declare function findRenderContainer(node: Element, rootNode: Element, co
 export declare function listen(elements: Element[] | (() => Element[]), callback: (event: Event) => void, globalObject: GlobalObject): {
     remove(): void;
 };
+export declare function clickOutsideContent(event: Event, node: Nullable<Element>, isShadowRootElement: boolean, globalObject: GlobalObject): boolean;

package/lib/listenFocusOutside.js

@@ -62,7 +62,7 @@ export function containsTargetOrRenderContainer(target) {
  * Searches RenderContainer placed in "rootNode" for "node"
  */
 export function findRenderContainer(node, rootNode, container) {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     var currentNode = node.parentNode;
     var globalObject = getOwnerGlobalObject(node);
     if (!currentNode ||
@@ -75,7 +75,9 @@ export function findRenderContainer(node, rootNode, container) {
     }
     var newContainerId = currentNode.getAttribute(PORTAL_OUTLET_ATTR);
     if (newContainerId) {
-        var nextNode = (_c = globalObject.document) === null || _c === void 0 ? void 0 : _c.querySelector("[".concat(PORTAL_INLET_ATTR, "~=\"").concat(newContainerId, "\"]"));
+        var selector = "[".concat(PORTAL_INLET_ATTR, "~=\"").concat(newContainerId, "\"]");
+        var nextNode = ((_c = globalObject.document) === null || _c === void 0 ? void 0 : _c.querySelector(selector)) ||
+            ((_d = rootNode.getRootNode()) === null || _d === void 0 ? void 0 : _d.querySelector(selector));
         if (!nextNode) {
             warning(false, "Origin node for render container was not found");
             return null;
@@ -100,4 +102,19 @@ export function listen(elements, callback, globalObject) {
         },
     };
 }
+export function clickOutsideContent(event, node, isShadowRootElement, globalObject) {
+    if (!node) {
+        return true;
+    }
+    if (isShadowRootElement &&
+        ((event.composed && event.composedPath().indexOf(node) > -1) ||
+            (isInstanceOf(event.target, globalObject.Element) &&
+                containsTargetOrRenderContainer(event.composedPath()[0])(node)))) {
+        return false;
+    }
+    else if (isInstanceOf(event.target, globalObject.Element) && containsTargetOrRenderContainer(event.target)(node)) {
+        return false;
+    }
+    return true;
+}
 //# sourceMappingURL=listenFocusOutside.js.map

package/lib/listenFocusOutside.js.map

@@ -1 +1 @@
-{"version":3,"file":"listenFocusOutside.js","sourceRoot":"","sources":["../../lib/listenFocusOutside.ts"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash.debounce';\nimport ReactDOM from 'react-dom';\nimport warning from 'warning';\n\nimport { PORTAL_INLET_ATTR, PORTAL_OUTLET_ATTR } from '../internal/RenderContainer/index.js';\nimport type { GlobalObject } from '../lib/globalObject.js';\nimport { getOwnerGlobalObject } from '../lib/globalObject.js';\nimport { isFirefox } from './client.js';\nimport { isInstanceOf } from './isInstanceOf.js';\n\ninterface FocusOutsideEventHandler {\n  elements: Element[] | (() => Element[]);\n  callback: (event: Event) => void;\n}\n\nconst handlers: FocusOutsideEventHandler[] = [];\nconst listenersAttached = new WeakSet<GlobalObject>();\n\nfunction addHandleEvent(globalObject: GlobalObject) {\n  /**\n   * Firefox do not supports 'focusin' event.\n   * Focus events bubbles multiple time\n   * without possibilty to cancell bubbling.\n   * Using debounce to capture only first focus event\n   * Mozilla Firefix\n   *   ¯\\_(ツ)_/¯\n   */\n  globalObject.document?.body.addEventListener(\n    isFirefox ? 'focus' : ('focusin' as 'focus'),\n    isFirefox ? debounce(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,\n    { capture: true },\n  );\n}\nfunction addFocusListener(globalObject: GlobalObject) {\n  if (listenersAttached.has(globalObject)) {\n    return;\n  }\n\n  if (globalObject.document?.readyState === 'complete') {\n    addHandleEvent(globalObject);\n  } else {\n    globalObject.addEventListener?.('load', () => addHandleEvent(globalObject));\n  }\n\n  listenersAttached.add(globalObject);\n}\n\nfunction handleNativeFocus(event: UIEvent) {\n  // FIXME: not safe casting\n  const target: Element = (event.target || event.srcElement) as Element;\n\n  handlers.forEach((handler) => {\n    let elements = handler.elements;\n    if (typeof elements === 'function') {\n      elements = elements();\n    }\n\n    if (elements.some(containsTargetOrRenderContainer(target))) {\n      return;\n    }\n    ReactDOM.unstable_batchedUpdates(() => handler.callback(event));\n  });\n}\n\nexport function containsTargetOrRenderContainer(target: Element) {\n  return (element: Element): boolean => {\n    if (!element) {\n      return false;\n    }\n    if (element.contains(target)) {\n      return true;\n    }\n    const container = findRenderContainer(target, element);\n    return !!container && element.contains(container);\n  };\n}\n\n/**\n * Searches RenderContainer placed in \"rootNode\" for \"node\"\n */\nexport function findRenderContainer(node: Element, rootNode: Element, container?: Element): Element | null {\n  const currentNode = node.parentNode;\n  const globalObject = getOwnerGlobalObject(node);\n  if (\n    !currentNode ||\n    node === rootNode ||\n    currentNode === rootNode ||\n    currentNode === globalObject.document?.body ||\n    currentNode === globalObject.document?.documentElement ||\n    !isInstanceOf(currentNode, globalObject.Element)\n  ) {\n    return container ? container : null;\n  }\n\n  const newContainerId = currentNode.getAttribute(PORTAL_OUTLET_ATTR);\n  if (newContainerId) {\n    const nextNode = globalObject.document?.querySelector(`[${PORTAL_INLET_ATTR}~=\"${newContainerId}\"]`);\n\n    if (!nextNode) {\n      warning(false, `Origin node for render container was not found`);\n      return null;\n    }\n\n    return findRenderContainer(nextNode, rootNode, nextNode);\n  }\n\n  return findRenderContainer(currentNode, rootNode, container);\n}\n\nexport function listen(\n  elements: Element[] | (() => Element[]),\n  callback: (event: Event) => void,\n  globalObject: GlobalObject,\n): { remove(): void } {\n  addFocusListener(globalObject);\n\n  const handler = {\n    elements,\n    callback,\n  };\n  handlers.push(handler);\n\n  return {\n    remove() {\n      const index = handlers.indexOf(handler);\n      if (index > -1) {\n        handlers.splice(index, 1);\n      }\n    },\n  };\n}\n"]}
+{"version":3,"file":"listenFocusOutside.js","sourceRoot":"","sources":["../../lib/listenFocusOutside.ts"],"names":[],"mappings":"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","sourcesContent":["import debounce from 'lodash.debounce';\nimport ReactDOM from 'react-dom';\nimport warning from 'warning';\n\nimport { PORTAL_INLET_ATTR, PORTAL_OUTLET_ATTR } from '../internal/RenderContainer/index.js';\nimport { getOwnerGlobalObject, type GlobalObject } from '../lib/globalObject.js';\nimport type { Nullable } from '../typings/utility-types.js';\nimport { isFirefox } from './client.js';\nimport { isInstanceOf } from './isInstanceOf.js';\n\ninterface FocusOutsideEventHandler {\n  elements: Element[] | (() => Element[]);\n  callback: (event: Event) => void;\n}\n\nconst handlers: FocusOutsideEventHandler[] = [];\nconst listenersAttached = new WeakSet<GlobalObject>();\n\nfunction addHandleEvent(globalObject: GlobalObject) {\n  /**\n   * Firefox do not supports 'focusin' event.\n   * Focus events bubbles multiple time\n   * without possibilty to cancell bubbling.\n   * Using debounce to capture only first focus event\n   * Mozilla Firefix\n   *   ¯\\_(ツ)_/¯\n   */\n  globalObject.document?.body.addEventListener(\n    isFirefox ? 'focus' : ('focusin' as 'focus'),\n    isFirefox ? debounce(handleNativeFocus, 0, { leading: true, trailing: false }) : handleNativeFocus,\n    { capture: true },\n  );\n}\nfunction addFocusListener(globalObject: GlobalObject) {\n  if (listenersAttached.has(globalObject)) {\n    return;\n  }\n\n  if (globalObject.document?.readyState === 'complete') {\n    addHandleEvent(globalObject);\n  } else {\n    globalObject.addEventListener?.('load', () => addHandleEvent(globalObject));\n  }\n\n  listenersAttached.add(globalObject);\n}\n\nfunction handleNativeFocus(event: UIEvent) {\n  // FIXME: not safe casting\n  const target: Element = (event.target || event.srcElement) as Element;\n\n  handlers.forEach((handler) => {\n    let elements = handler.elements;\n    if (typeof elements === 'function') {\n      elements = elements();\n    }\n\n    if (elements.some(containsTargetOrRenderContainer(target))) {\n      return;\n    }\n    ReactDOM.unstable_batchedUpdates(() => handler.callback(event));\n  });\n}\n\nexport function containsTargetOrRenderContainer(target: Element) {\n  return (element: Element): boolean => {\n    if (!element) {\n      return false;\n    }\n    if (element.contains(target)) {\n      return true;\n    }\n    const container = findRenderContainer(target, element);\n    return !!container && element.contains(container);\n  };\n}\n\n/**\n * Searches RenderContainer placed in \"rootNode\" for \"node\"\n */\nexport function findRenderContainer(node: Element, rootNode: Element, container?: Element): Element | null {\n  const currentNode = node.parentNode;\n  const globalObject = getOwnerGlobalObject(node);\n  if (\n    !currentNode ||\n    node === rootNode ||\n    currentNode === rootNode ||\n    currentNode === globalObject.document?.body ||\n    currentNode === globalObject.document?.documentElement ||\n    !isInstanceOf(currentNode, globalObject.Element)\n  ) {\n    return container ? container : null;\n  }\n\n  const newContainerId = currentNode.getAttribute(PORTAL_OUTLET_ATTR);\n  if (newContainerId) {\n    const selector = `[${PORTAL_INLET_ATTR}~=\"${newContainerId}\"]`;\n    const nextNode =\n      globalObject.document?.querySelector(selector) ||\n      (rootNode.getRootNode() as ShadowRoot | Document)?.querySelector(selector);\n\n    if (!nextNode) {\n      warning(false, `Origin node for render container was not found`);\n      return null;\n    }\n\n    return findRenderContainer(nextNode, rootNode, nextNode);\n  }\n\n  return findRenderContainer(currentNode, rootNode, container);\n}\n\nexport function listen(\n  elements: Element[] | (() => Element[]),\n  callback: (event: Event) => void,\n  globalObject: GlobalObject,\n): { remove(): void } {\n  addFocusListener(globalObject);\n\n  const handler = {\n    elements,\n    callback,\n  };\n  handlers.push(handler);\n\n  return {\n    remove() {\n      const index = handlers.indexOf(handler);\n      if (index > -1) {\n        handlers.splice(index, 1);\n      }\n    },\n  };\n}\n\nexport function clickOutsideContent(\n  event: Event,\n  node: Nullable<Element>,\n  isShadowRootElement: boolean,\n  globalObject: GlobalObject,\n): boolean {\n  if (!node) {\n    return true;\n  }\n\n  if (\n    isShadowRootElement &&\n    ((event.composed && event.composedPath().indexOf(node) > -1) ||\n      (isInstanceOf(event.target, globalObject.Element) &&\n        containsTargetOrRenderContainer(event.composedPath()[0] as unknown as Element)(node)))\n  ) {\n    return false;\n  } else if (isInstanceOf(event.target, globalObject.Element) && containsTargetOrRenderContainer(event.target)(node)) {\n    return false;\n  }\n\n  return true;\n}\n"]}

package/lib/renderEnvironment/RenderEnvironmentContext.d.ts

@@ -6,9 +6,25 @@ export interface RenderEnvironmentContextType {
     emotion: Emotion;
 }
 export declare const RenderEnvironmentContext: React.Context<RenderEnvironmentContextType>;
+export type GetOffsetParent = (element?: Node) => HTMLElement | null;
+/**
+ * Как монтировать портал с попапами относительно Shadow DOM:
+ * - `auto` — абсолютное позиционирование внутри shadow root;
+ * - `unstable_relative` — режим со смещением через `top` (не рекомендуется);
+ * - `fixed` — фиксация к окну с подпиской на scroll/resize.
+ */
+export type PopupStrategy = 'auto' | 'unstable_relative' | 'fixed';
 interface RenderEnvironmentProviderProps {
     children: React.ReactNode;
     rootNode: HTMLElement;
+    /**
+     * Контейнер, в который emotion должен инжектить style-теги.
+     * Позволяет синхронно инициализировать emotion до первого render children.
+     */
+    stylesContainer?: HTMLElement;
+    getOffsetParent?: GetOffsetParent;
+    popupStrategy?: PopupStrategy;
+    emotionKey?: string;
 }
 export declare const RenderEnvironmentProvider: React.FC<RenderEnvironmentProviderProps>;
 export declare const useGlobal: () => GlobalObject;

package/lib/renderEnvironment/RenderEnvironmentContext.js

@@ -1,22 +1,22 @@
 var _a;
 import React, { createContext, useContext, useMemo } from 'react';
 import { getOwnerGlobalObject, getSafeWindow } from '../globalObject.js';
-import { getEmotion } from '../theming/Emotion.js';
+import { getEmotion, PopupProvider } from '../theming/Emotion.js';
 var globalObject = getSafeWindow();
 export var RenderEnvironmentContext = createContext({
     globalObject: globalObject,
     emotion: getEmotion({ container: (_a = globalObject.document) === null || _a === void 0 ? void 0 : _a.head }),
 });
 export var RenderEnvironmentProvider = function (_a) {
-    var children = _a.children, rootNode = _a.rootNode;
-    var value = useMemo(function () {
-        var _a;
-        var globalObject = getOwnerGlobalObject(rootNode);
-        var container = (_a = globalObject.document) === null || _a === void 0 ? void 0 : _a.head;
-        var emotion = getEmotion({ container: container });
-        return { globalObject: globalObject, emotion: emotion };
-    }, [rootNode]);
-    return React.createElement(RenderEnvironmentContext.Provider, { value: value }, children);
+    var getOffsetParent = _a.getOffsetParent, popupStrategy = _a.popupStrategy, children = _a.children, rootNode = _a.rootNode, stylesContainer = _a.stylesContainer, _b = _a.emotionKey, emotionKey = _b === void 0 ? 'react-ui-render-environment' : _b;
+    var emotion = useMemo(function () { return getEmotion({ container: stylesContainer !== null && stylesContainer !== void 0 ? stylesContainer : rootNode, key: emotionKey }); }, [stylesContainer, rootNode, emotionKey]);
+    var value = useMemo(function () { return ({
+        globalObject: getOwnerGlobalObject(rootNode),
+        emotion: emotion,
+    }); }, [emotion, rootNode]);
+    var popupContext = useMemo(function () { return ({ getOffsetParent: getOffsetParent, popupStrategy: popupStrategy }); }, [getOffsetParent, popupStrategy]);
+    return (React.createElement(PopupProvider, { value: popupContext },
+        React.createElement(RenderEnvironmentContext.Provider, { value: value }, children)));
 };
 export var useGlobal = function () { return useContext(RenderEnvironmentContext).globalObject; };
 export var useEmotion = function () { return useContext(RenderEnvironmentContext).emotion; };

package/lib/renderEnvironment/RenderEnvironmentContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderEnvironmentContext.js","sourceRoot":"","sources":["../../../lib/renderEnvironment/RenderEnvironmentContext.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAOnD,IAAM,YAAY,GAAG,aAAa,EAAE,CAAC;AACrC,MAAM,CAAC,IAAM,wBAAwB,GAAG,aAAa,CAA+B;IAClF,YAAY,cAAA;IACZ,OAAO,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAmB,EAAE,CAAC;CAC/E,CAAC,CAAC;AAOH,MAAM,CAAC,IAAM,yBAAyB,GAA6C,UAAC,EAAsB;QAApB,QAAQ,cAAA,EAAE,QAAQ,cAAA;IACtG,IAAM,KAAK,GAAG,OAAO,CAAC;;QACpB,IAAM,YAAY,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QACpD,IAAM,SAAS,GAAG,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAI,CAAC;QAC9C,IAAM,OAAO,GAAG,UAAU,CAAC,EAAE,SAAS,EAAE,SAAwB,EAAE,CAAC,CAAC;QAEpE,OAAO,EAAE,YAAY,cAAA,EAAE,OAAO,SAAA,EAAE,CAAC;IACnC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IACf,OAAO,oBAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAqC,CAAC;AACzG,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,cAAoB,OAAA,UAAU,CAAC,wBAAwB,CAAC,CAAC,YAAY,EAAjD,CAAiD,CAAC;AAC/F,MAAM,CAAC,IAAM,UAAU,GAAG,cAAe,OAAA,UAAU,CAAC,wBAAwB,CAAC,CAAC,OAAO,EAA5C,CAA4C,CAAC;AACtF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAK,SAAkC;IAC9D,IAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { getOwnerGlobalObject, getSafeWindow } from '../globalObject.js';\nimport type { GlobalObject } from '../globalObject.js';\nimport { getEmotion } from '../theming/Emotion.js';\n\nexport interface RenderEnvironmentContextType {\n  globalObject: GlobalObject;\n  emotion: Emotion;\n}\n\nconst globalObject = getSafeWindow();\nexport const RenderEnvironmentContext = createContext<RenderEnvironmentContextType>({\n  globalObject,\n  emotion: getEmotion({ container: globalObject.document?.head as HTMLElement }),\n});\n\ninterface RenderEnvironmentProviderProps {\n  children: React.ReactNode;\n  rootNode: HTMLElement;\n}\n\nexport const RenderEnvironmentProvider: React.FC<RenderEnvironmentProviderProps> = ({ children, rootNode }) => {\n  const value = useMemo(() => {\n    const globalObject = getOwnerGlobalObject(rootNode);\n    const container = globalObject.document?.head;\n    const emotion = getEmotion({ container: container as HTMLElement });\n\n    return { globalObject, emotion };\n  }, [rootNode]);\n  return <RenderEnvironmentContext.Provider value={value}>{children}</RenderEnvironmentContext.Provider>;\n};\n\nexport const useGlobal = (): GlobalObject => useContext(RenderEnvironmentContext).globalObject;\nexport const useEmotion = (): Emotion => useContext(RenderEnvironmentContext).emotion;\nexport const useStyles = <T,>(getStyles: (emotion: Emotion) => T): T => {\n  const emotion = useEmotion();\n  return getStyles(emotion);\n};\n"]}
+{"version":3,"file":"RenderEnvironmentContext.js","sourceRoot":"","sources":["../../../lib/renderEnvironment/RenderEnvironmentContext.tsx"],"names":[],"mappings":";AACA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAElE,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAOlE,IAAM,YAAY,GAAG,aAAa,EAAE,CAAC;AACrC,MAAM,CAAC,IAAM,wBAAwB,GAAG,aAAa,CAA+B;IAClF,YAAY,cAAA;IACZ,OAAO,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,MAAA,YAAY,CAAC,QAAQ,0CAAE,IAAmB,EAAE,CAAC;CAC/E,CAAC,CAAC;AAyBH,MAAM,CAAC,IAAM,yBAAyB,GAA6C,UAAC,EAOnF;QANC,eAAe,qBAAA,EACf,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,eAAe,qBAAA,EACf,kBAA0C,EAA1C,UAAU,mBAAG,6BAA6B,KAAA;IAE1C,IAAM,OAAO,GAAG,OAAO,CACrB,cAAM,OAAA,UAAU,CAAC,EAAE,SAAS,EAAE,eAAe,aAAf,eAAe,cAAf,eAAe,GAAI,QAAQ,EAAE,GAAG,EAAE,UAAU,EAAE,CAAC,EAAvE,CAAuE,EAC7E,CAAC,eAAe,EAAE,QAAQ,EAAE,UAAU,CAAC,CACxC,CAAC;IAEF,IAAM,KAAK,GAAG,OAAO,CACnB,cAAM,OAAA,CAAC;QACL,YAAY,EAAE,oBAAoB,CAAC,QAAQ,CAAC;QAC5C,OAAO,SAAA;KACR,CAAC,EAHI,CAGJ,EACF,CAAC,OAAO,EAAE,QAAQ,CAAC,CACpB,CAAC;IAEF,IAAM,YAAY,GAAG,OAAO,CAAC,cAAM,OAAA,CAAC,EAAE,eAAe,iBAAA,EAAE,aAAa,eAAA,EAAE,CAAC,EAApC,CAAoC,EAAE,CAAC,eAAe,EAAE,aAAa,CAAC,CAAC,CAAC;IAE3G,OAAO,CACL,oBAAC,aAAa,IAAC,KAAK,EAAE,YAAY;QAChC,oBAAC,wBAAwB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAAqC,CACjF,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,SAAS,GAAG,cAAoB,OAAA,UAAU,CAAC,wBAAwB,CAAC,CAAC,YAAY,EAAjD,CAAiD,CAAC;AAC/F,MAAM,CAAC,IAAM,UAAU,GAAG,cAAe,OAAA,UAAU,CAAC,wBAAwB,CAAC,CAAC,OAAO,EAA5C,CAA4C,CAAC;AACtF,MAAM,CAAC,IAAM,SAAS,GAAG,UAAK,SAAkC;IAC9D,IAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAC7B,OAAO,SAAS,CAAC,OAAO,CAAC,CAAC;AAC5B,CAAC,CAAC","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { createContext, useContext, useMemo } from 'react';\n\nimport { getOwnerGlobalObject, getSafeWindow } from '../globalObject.js';\nimport type { GlobalObject } from '../globalObject.js';\nimport { getEmotion, PopupProvider } from '../theming/Emotion.js';\n\nexport interface RenderEnvironmentContextType {\n  globalObject: GlobalObject;\n  emotion: Emotion;\n}\n\nconst globalObject = getSafeWindow();\nexport const RenderEnvironmentContext = createContext<RenderEnvironmentContextType>({\n  globalObject,\n  emotion: getEmotion({ container: globalObject.document?.head as HTMLElement }),\n});\n\nexport type GetOffsetParent = (element?: Node) => HTMLElement | null;\n\n/**\n * Как монтировать портал с попапами относительно Shadow DOM:\n * - `auto` — абсолютное позиционирование внутри shadow root;\n * - `unstable_relative` — режим со смещением через `top` (не рекомендуется);\n * - `fixed` — фиксация к окну с подпиской на scroll/resize.\n */\nexport type PopupStrategy = 'auto' | 'unstable_relative' | 'fixed';\n\ninterface RenderEnvironmentProviderProps {\n  children: React.ReactNode;\n  rootNode: HTMLElement;\n  /**\n   * Контейнер, в который emotion должен инжектить style-теги.\n   * Позволяет синхронно инициализировать emotion до первого render children.\n   */\n  stylesContainer?: HTMLElement;\n  getOffsetParent?: GetOffsetParent;\n  popupStrategy?: PopupStrategy;\n  emotionKey?: string;\n}\n\nexport const RenderEnvironmentProvider: React.FC<RenderEnvironmentProviderProps> = ({\n  getOffsetParent,\n  popupStrategy,\n  children,\n  rootNode,\n  stylesContainer,\n  emotionKey = 'react-ui-render-environment',\n}) => {\n  const emotion = useMemo(\n    () => getEmotion({ container: stylesContainer ?? rootNode, key: emotionKey }),\n    [stylesContainer, rootNode, emotionKey],\n  );\n\n  const value = useMemo(\n    () => ({\n      globalObject: getOwnerGlobalObject(rootNode),\n      emotion,\n    }),\n    [emotion, rootNode],\n  );\n\n  const popupContext = useMemo(() => ({ getOffsetParent, popupStrategy }), [getOffsetParent, popupStrategy]);\n\n  return (\n    <PopupProvider value={popupContext}>\n      <RenderEnvironmentContext.Provider value={value}>{children}</RenderEnvironmentContext.Provider>\n    </PopupProvider>\n  );\n};\n\nexport const useGlobal = (): GlobalObject => useContext(RenderEnvironmentContext).globalObject;\nexport const useEmotion = (): Emotion => useContext(RenderEnvironmentContext).emotion;\nexport const useStyles = <T,>(getStyles: (emotion: Emotion) => T): T => {\n  const emotion = useEmotion();\n  return getStyles(emotion);\n};\n"]}

package/lib/shadowDom/isShadowRoot.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Возвращает `true`, если узел является `ShadowRoot`.
+ * Работает и для `mode: 'closed'` (проверка фрагмента с `host` — `Element`),
+ * в отличие от `host.shadowRoot`, которое для closed-roots равно `null`.
+ */
+export declare const isShadowRoot: (root: unknown) => root is ShadowRoot;

package/lib/shadowDom/isShadowRoot.js

@@ -0,0 +1,17 @@
+var DOCUMENT_FRAGMENT_NODE = 11;
+/**
+ * Возвращает `true`, если узел является `ShadowRoot`.
+ * Работает и для `mode: 'closed'` (проверка фрагмента с `host` — `Element`),
+ * в отличие от `host.shadowRoot`, которое для closed-roots равно `null`.
+ */
+export var isShadowRoot = function (root) {
+    var _a, _b;
+    var node = root;
+    if ((node === null || node === void 0 ? void 0 : node.nodeType) !== DOCUMENT_FRAGMENT_NODE) {
+        return false;
+    }
+    var host = node.host;
+    var ElementCtor = (_b = (_a = host === null || host === void 0 ? void 0 : host.ownerDocument) === null || _a === void 0 ? void 0 : _a.defaultView) === null || _b === void 0 ? void 0 : _b.Element;
+    return Boolean(ElementCtor && host instanceof ElementCtor);
+};
+//# sourceMappingURL=isShadowRoot.js.map

package/lib/shadowDom/isShadowRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isShadowRoot.js","sourceRoot":"","sources":["../../../lib/shadowDom/isShadowRoot.ts"],"names":[],"mappings":"AAAA,IAAM,sBAAsB,GAAG,EAAE,CAAC;AAElC;;;;GAIG;AACH,MAAM,CAAC,IAAM,YAAY,GAAG,UAAC,IAAa;;IACxC,IAAM,IAAI,GAAG,IAA+B,CAAC;IAC7C,IAAI,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,QAAQ,MAAK,sBAAsB,EAAE,CAAC;QAC9C,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAM,IAAI,GAAI,IAA4C,CAAC,IAAI,CAAC;IAChE,IAAM,WAAW,GAAG,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,aAAa,0CAAE,WAAW,0CAAE,OAAO,CAAC;IAC9D,OAAO,OAAO,CAAC,WAAW,IAAI,IAAI,YAAY,WAAW,CAAC,CAAC;AAC7D,CAAC,CAAC","sourcesContent":["const DOCUMENT_FRAGMENT_NODE = 11;\n\n/**\n * Возвращает `true`, если узел является `ShadowRoot`.\n * Работает и для `mode: 'closed'` (проверка фрагмента с `host` — `Element`),\n * в отличие от `host.shadowRoot`, которое для closed-roots равно `null`.\n */\nexport const isShadowRoot = (root: unknown): root is ShadowRoot => {\n  const node = root as Node | null | undefined;\n  if (node?.nodeType !== DOCUMENT_FRAGMENT_NODE) {\n    return false;\n  }\n  const host = (node as unknown as Pick<ShadowRoot, 'host'>).host;\n  const ElementCtor = host?.ownerDocument?.defaultView?.Element;\n  return Boolean(ElementCtor && host instanceof ElementCtor);\n};\n"]}

package/lib/theming/Emotion.d.ts

@@ -1,8 +1,9 @@
 import type { Emotion } from '@emotion/css/create-instance';
+import type { GetOffsetParent, PopupStrategy } from '../renderEnvironment/RenderEnvironmentContext.js';
 import type { Theme } from './Theme.js';
 export declare const REACT_UI_PREFIX: string;
 export declare const getEmotion: ({ key, container, nonce, }: {
-    container: HTMLElement;
+    container?: HTMLElement | null;
     key?: string;
     nonce?: string;
 }) => Emotion;
@@ -13,3 +14,18 @@ export type StylesGetter<S> = (emotion: Emotion) => S;
 export declare const memoizeStyle: <S extends StylesObject>(styles: S) => S;
 export declare const memoizeGetStyles: <S extends StylesObject>(getStyles: StylesGetter<S>) => StylesGetter<S>;
 export declare const prefix: (component: string, app?: string) => <T extends Record<string, string>>(classes: T) => T;
+export declare const EmotionContext: import("react").Context<Emotion>;
+export declare const EmotionConsumer: import("react").Consumer<Emotion>;
+export declare const EmotionProvider: import("react").Provider<Emotion>;
+export declare const PopupContext: import("react").Context<{
+    getOffsetParent?: GetOffsetParent;
+    popupStrategy?: PopupStrategy;
+}>;
+export declare const PopupConsumer: import("react").Consumer<{
+    getOffsetParent?: GetOffsetParent;
+    popupStrategy?: PopupStrategy;
+}>;
+export declare const PopupProvider: import("react").Provider<{
+    getOffsetParent?: GetOffsetParent;
+    popupStrategy?: PopupStrategy;
+}>;

package/lib/theming/Emotion.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import createEmotion from '@emotion/css/create-instance';
+import { createContext } from 'react';
 import extraScopePlugin from 'stylis-plugin-extra-scope';
 import { Upgrade } from '../Upgrades.js';
 export var REACT_UI_PREFIX = Upgrade.getSpecificityClassName();
@@ -20,21 +21,21 @@ export var getEmotion = function (_a) {
         key: key,
         prepend: true,
         stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,
-        container: container,
+        container: container !== null && container !== void 0 ? container : undefined,
         nonce: nonce,
     });
 };
 function isZeroArgs(fn) {
     return fn.length === 0;
 }
-var memoize = function (fn) {
+var memoize = function (fn, context) {
     if (isZeroArgs(fn)) {
         var isCalled_1 = false;
         var result_1;
         return function () {
             if (!isCalled_1) {
                 isCalled_1 = true;
-                result_1 = fn();
+                result_1 = fn.call(context);
             }
             return result_1;
         };
@@ -42,13 +43,13 @@ var memoize = function (fn) {
     var cache = new WeakMap();
     return function (arg) {
         if (!cache.has(arg)) {
-            cache.set(arg, fn(arg));
+            cache.set(arg, fn.call(context, arg));
         }
         return cache.get(arg);
     };
 };
 export var memoizeStyle = function (styles) {
-    Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className])); });
+    Object.keys(styles).forEach(function (className) { return (styles[className] = memoize(styles[className], styles)); });
     return styles;
 };
 export var memoizeGetStyles = function (getStyles) {
@@ -69,4 +70,14 @@ export var prefix = function (component, app) {
         }, {});
     };
 };
+export var EmotionContext = createContext(getEmotion({}));
+export var EmotionConsumer = EmotionContext.Consumer;
+export var EmotionProvider = EmotionContext.Provider;
+export var PopupContext = createContext({
+    getOffsetParent: function () { return null; },
+});
+export var PopupConsumer = PopupContext.Consumer;
+export var PopupProvider = PopupContext.Provider;
+EmotionContext.displayName = 'EmotionContext';
+EmotionContext.__KONTUR_REACT_UI__ = 'EmotionContext';
 //# sourceMappingURL=Emotion.js.map

package/lib/theming/Emotion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Emotion.js","sourceRoot":"","sources":["../../../lib/theming/Emotion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport createEmotion from '@emotion/css/create-instance';\nimport extraScopePlugin from 'stylis-plugin-extra-scope';\n\nimport { Upgrade } from '../Upgrades.js';\nimport type { AnyObject, FunctionWithParams } from '../utils.js';\nimport type { Theme } from './Theme.js';\n\nexport const REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\nconst scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');\n\nexport const getEmotion = ({\n  key = REACT_UI_PREFIX,\n  container,\n  nonce,\n}: {\n  container: HTMLElement;\n  key?: string;\n  nonce?: string;\n}): Emotion =>\n  createEmotion({\n    key,\n    prepend: true,\n    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,\n    container,\n    nonce,\n  });\n\nfunction isZeroArgs<R, T extends FunctionWithParams<R>>(fn: T | FunctionWithParams<R>): fn is () => R {\n  return fn.length === 0;\n}\n\nconst memoize = <A extends AnyObject, R>(fn: (() => R) | ((arg: A) => R)): (() => R) | ((arg: A) => R) => {\n  if (isZeroArgs(fn)) {\n    let isCalled = false;\n    let result: R;\n    return () => {\n      if (!isCalled) {\n        isCalled = true;\n        result = fn();\n      }\n      return result;\n    };\n  }\n\n  const cache = new WeakMap();\n  return (arg: A) => {\n    if (!cache.has(arg)) {\n      cache.set(arg, fn(arg));\n    }\n\n    return cache.get(arg);\n  };\n};\n\nexport interface StylesObject {\n  [className: string]: (() => string) | ((t: Theme) => string);\n}\n\nexport type StylesGetter<S> = (emotion: Emotion) => S;\n\nexport const memoizeStyle = <S extends StylesObject>(styles: S): S => {\n  Object.keys(styles).forEach((className) => (styles[className as keyof S] = memoize(styles[className]) as S[keyof S]));\n  return styles;\n};\n\nexport const memoizeGetStyles = <S extends StylesObject>(getStyles: StylesGetter<S>): StylesGetter<S> => {\n  const stylesCache = new WeakMap<Emotion, S>();\n  return (emotion: Emotion): S => {\n    if (!stylesCache.has(emotion)) {\n      stylesCache.set(emotion, memoizeStyle(getStyles(emotion)));\n    }\n\n    return stylesCache.get(emotion) as S;\n  };\n};\n\nexport const prefix =\n  (component: string, app = REACT_UI_PREFIX) =>\n  <T extends Record<string, string>>(classes: T): T =>\n    Object.keys(classes).reduce((acc, key) => {\n      return { ...acc, [key]: `${app}-${component}-${classes[key]}` };\n    }, {} as T);\n"]}
+{"version":3,"file":"Emotion.js","sourceRoot":"","sources":["../../../lib/theming/Emotion.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport createEmotion from '@emotion/css/create-instance';\nimport { createContext } from 'react';\nimport extraScopePlugin from 'stylis-plugin-extra-scope';\n\nimport type { GetOffsetParent, PopupStrategy } from '../renderEnvironment/RenderEnvironmentContext.js';\nimport { Upgrade } from '../Upgrades.js';\nimport type { AnyObject, FunctionWithParams } from '../utils.js';\nimport type { Theme } from './Theme.js';\n\nexport const REACT_UI_PREFIX = Upgrade.getSpecificityClassName();\n\nconst scope = new Array(Upgrade.getSpecificityLevel()).fill(`.${REACT_UI_PREFIX}`).join('');\n\nexport const getEmotion = ({\n  key = REACT_UI_PREFIX,\n  container,\n  nonce,\n}: {\n  container?: HTMLElement | null;\n  key?: string;\n  nonce?: string;\n}): Emotion =>\n  createEmotion({\n    key,\n    prepend: true,\n    stylisPlugins: scope ? [extraScopePlugin(scope)] : undefined,\n    container: container ?? undefined,\n    nonce,\n  });\n\nfunction isZeroArgs<R, T extends FunctionWithParams<R>>(fn: T | FunctionWithParams<R>): fn is () => R {\n  return fn.length === 0;\n}\n\nconst memoize = <A extends AnyObject, R>(\n  fn: (() => R) | ((arg: A) => R),\n  context: Record<string, unknown>,\n): (() => R) | ((arg: A) => R) => {\n  if (isZeroArgs(fn)) {\n    let isCalled = false;\n    let result: R;\n    return () => {\n      if (!isCalled) {\n        isCalled = true;\n        result = fn.call(context);\n      }\n      return result;\n    };\n  }\n\n  const cache = new WeakMap();\n  return (arg: A) => {\n    if (!cache.has(arg)) {\n      cache.set(arg, fn.call(context, arg));\n    }\n\n    return cache.get(arg);\n  };\n};\n\nexport interface StylesObject {\n  [className: string]: (() => string) | ((t: Theme) => string);\n}\n\nexport type StylesGetter<S> = (emotion: Emotion) => S;\n\nexport const memoizeStyle = <S extends StylesObject>(styles: S): S => {\n  Object.keys(styles).forEach(\n    (className) => (styles[className as keyof S] = memoize(styles[className], styles) as S[keyof S]),\n  );\n  return styles;\n};\n\nexport const memoizeGetStyles = <S extends StylesObject>(getStyles: StylesGetter<S>): StylesGetter<S> => {\n  const stylesCache = new WeakMap<Emotion, S>();\n  return (emotion: Emotion): S => {\n    if (!stylesCache.has(emotion)) {\n      stylesCache.set(emotion, memoizeStyle(getStyles(emotion)));\n    }\n\n    return stylesCache.get(emotion) as S;\n  };\n};\n\nexport const prefix =\n  (component: string, app = REACT_UI_PREFIX) =>\n  <T extends Record<string, string>>(classes: T): T =>\n    Object.keys(classes).reduce((acc, key) => {\n      return { ...acc, [key]: `${app}-${component}-${classes[key]}` };\n    }, {} as T);\n\nexport const EmotionContext = createContext<Emotion>(getEmotion({}));\nexport const EmotionConsumer = EmotionContext.Consumer;\nexport const EmotionProvider = EmotionContext.Provider;\n\nexport const PopupContext = createContext<{\n  getOffsetParent?: GetOffsetParent;\n  popupStrategy?: PopupStrategy;\n}>({\n  getOffsetParent: () => null,\n});\nexport const PopupConsumer = PopupContext.Consumer;\nexport const PopupProvider = PopupContext.Provider;\n\nEmotionContext.displayName = 'EmotionContext';\nEmotionContext.__KONTUR_REACT_UI__ = 'EmotionContext';\n"]}