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

package/cjs/internal/PopupMenu/PopupMenu.d.ts

@@ -1,13 +1,15 @@
-import React from 'react';
+import React, { AriaAttributes, HTMLAttributes } from 'react';
+import { HTMLProps } from '../../typings/html';
 import { PopupPositionsType } from '../Popup';
-import { CommonProps } from '../../internal/CommonWrapper';
+import { CommonProps } from '../CommonWrapper';
+import { MenuProps } from '../Menu';
 export interface PopupMenuCaptionProps {
     opened: boolean;
     openMenu: (firstItemShouldBeSelected?: boolean) => void;
     closeMenu: (restoreFocus?: boolean) => void;
     toggleMenu: () => void;
 }
-export interface PopupMenuProps extends CommonProps {
+export interface PopupMenuProps extends CommonProps, Pick<MenuProps, 'preventIconsOffset'>, Pick<HTMLAttributes<HTMLElement>, 'id'>, Pick<AriaAttributes, 'aria-label'> {
     children?: React.ReactNode;
     /** Максимальная высота меню */
     menuMaxHeight?: number | string;
@@ -33,32 +35,41 @@ export interface PopupMenuProps extends CommonProps {
     popupMargin?: number;
     popupPinOffset?: number;
     type?: 'dropdown' | 'tooltip';
-    disableAnimations: boolean;
+    disableAnimations?: boolean;
     /** Действие при открытии меню */
     onOpen?: () => void;
     /** Действие при закрытии меню */
     onClose?: () => void;
+    /**
+     * Позволяет задать `id` выпадающему меню.
+     *
+     * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.
+     */
+    popupMenuId?: HTMLProps['id'];
 }
 interface PopupMenuState {
     menuVisible: boolean;
     firstItemShouldBeSelected?: boolean;
 }
 export declare const PopupMenuType: {
-    Dropdown: string;
-    Tooltip: string;
+    readonly Dropdown: "dropdown";
+    readonly Tooltip: "tooltip";
 };
+export declare const PopupMenuDataTids: {
+    readonly root: "PopupMenu__root";
+    readonly caption: "PopupMenu__caption";
+};
+declare type DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' | 'popupHasPin' | 'disableAnimations'>>;
 export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private isMobileLayout;
-    static defaultProps: {
-        positions: ("top left" | "top center" | "top right" | "right top" | "right middle" | "right bottom" | "bottom right" | "bottom center" | "bottom left" | "left bottom" | "left middle" | "left top")[];
-        type: string;
-        popupHasPin: boolean;
-        disableAnimations: boolean;
-    };
+    private rootId;
+    static defaultProps: DefaultProps;
+    private getProps;
     static Type: {
-        Dropdown: string;
-        Tooltip: string;
+        readonly Dropdown: "dropdown";
+        readonly Tooltip: "tooltip";
     };
     state: {
         menuVisible: boolean;
@@ -69,10 +80,12 @@ export declare class PopupMenu extends React.Component<PopupMenuProps, PopupMenu
     private menu;
     private setRootNode;
     render(): JSX.Element;
+    private renderMain;
     open: () => void;
     close: () => void;
     private refInternalMenu;
     private handleOpen;
+    private passPropsToCaption;
     private renderCaption;
     private hideMenuWithoutFocusing;
     private getPositions;

package/cjs/internal/PopupMenu/PopupMenu.js

@@ -1,4 +1,7 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.PopupMenuType = exports.PopupMenu = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.PopupMenuType = exports.PopupMenuDataTids = exports.PopupMenu = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
+
+var _utils = require("../../lib/utils");
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
 
@@ -7,13 +10,16 @@ var _identifiers = require("../../lib/events/keyboard/identifiers");
 
 
 
-var _InternalMenu = require("../InternalMenu");
+var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _Popup = require("../Popup");
 var _RenderLayer = require("../RenderLayer");
 
-var _CommonWrapper = require("../../internal/CommonWrapper");
+var _CommonWrapper = require("../CommonWrapper");
 var _decorator = require("../../components/ResponsiveLayout/decorator");
 var _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _Menu = require("../Menu");
 
 var _validatePositions = require("./validatePositions");
 var _PopupMenu = require("./PopupMenu.styles");var _class, _class2, _temp;
@@ -55,6 +61,16 @@ var _PopupMenu = require("./PopupMenu.styles");var _class, _class2, _temp;
 
 
 
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -71,6 +87,11 @@ var PopupMenuType = {
   Tooltip: 'tooltip' };exports.PopupMenuType = PopupMenuType;
 
 
+var PopupMenuDataTids = {
+  root: 'PopupMenu__root',
+  caption: 'PopupMenu__caption' };exports.PopupMenuDataTids = PopupMenuDataTids;
+
+
 var Positions = [
 'top left',
 'top center',
@@ -88,11 +109,14 @@ var Positions = [
 
 
 
+
+
 PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(PopupMenu, _React$Component);function PopupMenu() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
+    rootId = _Popup.PopupIds.root + (0, _utils.getRandomID)();_this.
 
 
 
@@ -101,6 +125,9 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+    getProps = (0, _createPropsGetter.createPropsGetter)(PopupMenu.defaultProps);_this.
+
+
 
     state = {
       menuVisible: false,
@@ -136,6 +163,30 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -168,6 +219,19 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
       }
     };_this.
 
+    passPropsToCaption = function (caption) {var _this$props$popupMenu;
+      if (typeof caption === 'string' || typeof caption === 'number') {
+        return caption;
+      }
+
+      return /*#__PURE__*/_react.default.cloneElement(caption, {
+        id: _this.props.id,
+        'aria-controls': (_this$props$popupMenu = _this.props.popupMenuId) != null ? _this$props$popupMenu : _this.rootId,
+        'aria-expanded': _this.state.menuVisible ? 'true' : 'false',
+        'aria-label': _this.props['aria-label'] });
+
+    };_this.
+
     renderCaption = function () {
       if (typeof _this.props.caption === 'function') {
         var caption = _this.props.caption({
@@ -179,24 +243,24 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
         return /*#__PURE__*/(
           _react.default.createElement("span", {
-            "data-tid": "PopupMenu__caption",
+            "data-tid": PopupMenuDataTids.caption,
             className: _PopupMenu.styles.caption(),
             ref: function ref(element) {return _this.captionWrapper = element;} },
 
-          caption));
+          _this.passPropsToCaption(caption)));
 
 
       }
 
       return /*#__PURE__*/(
         _react.default.createElement("span", {
-          "data-tid": "PopupMenu__caption",
+          "data-tid": PopupMenuDataTids.caption,
           onClick: _this.handleCaptionClick,
           onKeyDown: _this.handleCaptionKeyDown,
           ref: function ref(element) {return _this.captionWrapper = element;},
           className: _PopupMenu.styles.caption() },
 
-        _this.props.caption));
+        _this.passPropsToCaption(_this.props.caption)));
 
 
     };_this.
@@ -211,6 +275,7 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
 
 
+
     showMenu = function (firstItemShouldBeSelected) {
       _this.saveFocus();
       _this.setState(
@@ -259,8 +324,8 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
     };_this.
 
     saveFocus = function () {
-      if (document) {
-        _this.savedFocusableElement = document.activeElement;
+      if (_globalObject.globalObject.document) {
+        _this.savedFocusableElement = _globalObject.globalObject.document.activeElement;
       }
     };_this.
 
@@ -300,4 +365,4 @@ PopupMenu = (0, _rootNode.rootNode)(_class = (0, _decorator.responsiveLayout)(_c
 
       var restoreFocus = event.type === 'keydown';
       _this.hideMenu(restoreFocus);
-    };return _this;}var _proto = PopupMenu.prototype;_proto.render = function render() {return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.hideMenuWithoutFocusing, onFocusOutside: this.hideMenuWithoutFocusing, active: this.state.menuVisible }, /*#__PURE__*/_react.default.createElement("div", { className: _PopupMenu.styles.container(), style: { width: this.props.width } }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/_react.default.createElement(_Popup.Popup, { anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: this.props.popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions(), disableAnimations: this.props.disableAnimations, onOpen: this.handleOpen, mobileOnCloseRequest: this.hideMenu, width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto' }, /*#__PURE__*/_react.default.createElement(_InternalMenu.InternalMenu, { hasShadow: false, maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, onItemClick: this.handleItemSelection, cyclicSelection: false, ref: this.refInternalMenu, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1, header: this.props.header, footer: this.props.footer }, this.props.children)))));};_proto.getPositions = function getPositions() {if (this.props.positions && (0, _validatePositions.isValidPositions)(this.props.positions)) {return this.props.positions;}return Positions;};return PopupMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.defaultProps = { positions: Positions, type: PopupMenuType.Tooltip, popupHasPin: true, disableAnimations: false }, _class2.Type = PopupMenuType, _temp)) || _class) || _class;exports.PopupMenu = PopupMenu;
+    };return _this;}var _proto = PopupMenu.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _ThemeFactory.ThemeFactory.create({ menuOffsetY: theme.popupMenuMenuOffsetY }, theme) }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _this$props$popupMenu2;var _this$getProps = this.getProps(),popupHasPin = _this$getProps.popupHasPin,disableAnimations = _this$getProps.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.hideMenuWithoutFocusing, onFocusOutside: this.hideMenuWithoutFocusing, active: this.state.menuVisible }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": PopupMenuDataTids.root, className: _PopupMenu.styles.container(), style: { width: this.props.width } }, this.renderCaption(), this.captionWrapper && this.props.children && /*#__PURE__*/_react.default.createElement(_Popup.Popup, { id: (_this$props$popupMenu2 = this.props.popupMenuId) != null ? _this$props$popupMenu2 : this.rootId, anchorElement: this.captionWrapper, opened: this.state.menuVisible, hasShadow: true, margin: this.props.popupMargin, hasPin: popupHasPin, pinOffset: this.props.popupPinOffset, positions: this.getPositions(), disableAnimations: disableAnimations, onOpen: this.handleOpen, mobileOnCloseRequest: this.hideMenu, width: this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto' }, /*#__PURE__*/_react.default.createElement(_Menu.Menu, { hasShadow: false, maxHeight: this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none', onKeyDown: this.handleKeyDown, onItemClick: this.handleItemSelection, preventIconsOffset: this.props.preventIconsOffset, cyclicSelection: false, ref: this.refInternalMenu, initialSelectedItemIndex: this.state.firstItemShouldBeSelected ? 0 : -1, header: this.props.header, footer: this.props.footer }, this.props.children)))));};_proto.getPositions = function getPositions() {var positions = this.getProps().positions;if (positions && (0, _validatePositions.isValidPositions)(positions)) {return positions;}return Positions;};return PopupMenu;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'PopupMenu', _class2.displayName = 'PopupMenu', _class2.defaultProps = { positions: Positions, type: PopupMenuType.Tooltip, popupHasPin: true, disableAnimations: false }, _class2.Type = PopupMenuType, _temp)) || _class) || _class;exports.PopupMenu = PopupMenu;

package/cjs/internal/PopupMenu/PopupMenu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PopupMenu.tsx"],"names":["PopupMenuType","Dropdown","Tooltip","Positions","PopupMenu","rootNode","responsiveLayout","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","renderCaption","props","caption","opened","openMenu","closeMenu","toggleMenu","styles","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleKeyDown","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","setRootNode","container","width","children","popupMargin","popupHasPin","popupPinOffset","getPositions","disableAnimations","isMobileLayout","menuWidth","menuMaxHeight","header","footer","positions","React","Component","__KONTUR_REACT_UI__","defaultProps","Type"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport {\n  isKeyArrowVertical,\n  isKeyEnter,\n  isKeyEscape,\n  isKeySpace,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { InternalMenu } from '../InternalMenu';\nimport { Popup, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n  opened: boolean;\n  openMenu: (firstItemShouldBeSelected?: boolean) => void;\n  closeMenu: (restoreFocus?: boolean) => void;\n  toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps extends CommonProps {\n  children?: React.ReactNode;\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /** Ширина контейнера и caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо ```caption```,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: React.ReactNode | ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPositionsType[];\n  /** Колбэк, вызываемый после открытия/закрытия меню */\n  onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n  /** Пропсы, передающиеся в Popup */\n  popupHasPin?: boolean;\n  popupMargin?: number;\n  popupPinOffset?: number;\n  type?: 'dropdown' | 'tooltip';\n  disableAnimations: boolean;\n  /** Действие при открытии меню */\n  onOpen?: () => void;\n  /** Действие при закрытии меню */\n  onClose?: () => void;\n}\n\ninterface PopupMenuState {\n  menuVisible: boolean;\n  firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n  Dropdown: 'dropdown',\n  Tooltip: 'tooltip',\n};\n\nconst Positions: PopupPositionsType[] = [\n  'top left',\n  'top center',\n  'top right',\n  'right top',\n  'right middle',\n  'right bottom',\n  'bottom left',\n  'bottom center',\n  'bottom right',\n  'left top',\n  'left middle',\n  'left bottom',\n];\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n  public static __KONTUR_REACT_UI__ = 'PopupMenu';\n\n  private isMobileLayout!: boolean;\n\n  public static defaultProps = {\n    positions: Positions,\n    type: PopupMenuType.Tooltip,\n    popupHasPin: true,\n    disableAnimations: false,\n  };\n\n  public static Type = PopupMenuType;\n\n  public state = {\n    menuVisible: false,\n    firstItemShouldBeSelected: false,\n  };\n\n  private captionWrapper: HTMLSpanElement | null = null;\n  private savedFocusableElement: HTMLElement | null = null;\n  private menu: Nullable<InternalMenu> = null;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <RenderLayer\n          onClickOutside={this.hideMenuWithoutFocusing}\n          onFocusOutside={this.hideMenuWithoutFocusing}\n          active={this.state.menuVisible}\n        >\n          <div className={styles.container()} style={{ width: this.props.width }}>\n            {this.renderCaption()}\n            {this.captionWrapper && this.props.children && (\n              <Popup\n                anchorElement={this.captionWrapper}\n                opened={this.state.menuVisible}\n                hasShadow\n                margin={this.props.popupMargin}\n                hasPin={this.props.popupHasPin}\n                pinOffset={this.props.popupPinOffset}\n                positions={this.getPositions()}\n                disableAnimations={this.props.disableAnimations}\n                onOpen={this.handleOpen}\n                mobileOnCloseRequest={this.hideMenu}\n                width={this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'}\n              >\n                <InternalMenu\n                  hasShadow={false}\n                  maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none'}\n                  onKeyDown={this.handleKeyDown}\n                  onItemClick={this.handleItemSelection}\n                  cyclicSelection={false}\n                  ref={this.refInternalMenu}\n                  initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n                  header={this.props.header}\n                  footer={this.props.footer}\n                >\n                  {this.props.children}\n                </InternalMenu>\n              </Popup>\n            )}\n          </div>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => this.showMenu();\n  public close = (): void => this.hideMenu();\n\n  private refInternalMenu = (element: Nullable<InternalMenu>) => (this.menu = element);\n\n  private handleOpen = () => {\n    if (this.menu) {\n      this.menu.focus();\n    }\n  };\n\n  private renderCaption = () => {\n    if (typeof this.props.caption === 'function') {\n      const caption = this.props.caption({\n        opened: this.state.menuVisible,\n        openMenu: this.showMenu,\n        closeMenu: this.hideMenu,\n        toggleMenu: this.toggleMenu,\n      });\n\n      return (\n        <span\n          data-tid=\"PopupMenu__caption\"\n          className={styles.caption()}\n          ref={(element) => (this.captionWrapper = element)}\n        >\n          {caption}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-tid=\"PopupMenu__caption\"\n        onClick={this.handleCaptionClick}\n        onKeyDown={this.handleCaptionKeyDown}\n        ref={(element) => (this.captionWrapper = element)}\n        className={styles.caption()}\n      >\n        {this.props.caption}\n      </span>\n    );\n  };\n\n  private hideMenuWithoutFocusing = () => this.hideMenu();\n\n  private getPositions(): Readonly<PopupPositionsType[]> {\n    if (this.props.positions && isValidPositions(this.props.positions)) {\n      return this.props.positions;\n    }\n\n    return Positions;\n  }\n\n  private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n    this.saveFocus();\n    this.setState(\n      {\n        menuVisible: true,\n        firstItemShouldBeSelected,\n      },\n      () => {\n        this.handleChangeMenuVisible(false);\n      },\n    );\n  };\n\n  private hideMenu = (restoreFocus?: boolean): void => {\n    this.setState(\n      {\n        menuVisible: false,\n        firstItemShouldBeSelected: false,\n      },\n      () => {\n        this.handleChangeMenuVisible(!!restoreFocus);\n      },\n    );\n  };\n\n  private toggleMenu = (): void => {\n    this.state.menuVisible ? this.hideMenu() : this.showMenu();\n  };\n\n  private handleCaptionClick = (): void => {\n    this.toggleMenu();\n  };\n\n  private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      this.showMenu(true);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isKeyEscape(e)) {\n      const restoreFocus = true;\n      this.hideMenu(restoreFocus);\n    }\n  };\n\n  private saveFocus = (): void => {\n    if (document) {\n      this.savedFocusableElement = document.activeElement as HTMLElement;\n    }\n  };\n\n  private restoreFocus = (): void => {\n    if (this.savedFocusableElement) {\n      this.savedFocusableElement.focus();\n      this.savedFocusableElement = null;\n    }\n  };\n\n  private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n    if (focusShouldBeRestored) {\n      this.restoreFocus();\n    }\n\n    if (this.state.menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n    }\n\n    if (!this.state.menuVisible && this.props.onClose) {\n      this.props.onClose();\n    }\n\n    if (typeof this.props.onChangeMenuState === 'function') {\n      this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n    }\n  };\n\n  private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n\n    const restoreFocus = event.type === 'keydown';\n    this.hideMenu(restoreFocus);\n  };\n}\n"]}
+{"version":3,"sources":["PopupMenu.tsx"],"names":["PopupMenuType","Dropdown","Tooltip","PopupMenuDataTids","root","caption","Positions","PopupMenu","rootNode","responsiveLayout","rootId","PopupIds","getProps","defaultProps","state","menuVisible","firstItemShouldBeSelected","captionWrapper","savedFocusableElement","menu","open","showMenu","close","hideMenu","refInternalMenu","element","handleOpen","focus","passPropsToCaption","React","cloneElement","id","props","popupMenuId","renderCaption","opened","openMenu","closeMenu","toggleMenu","styles","handleCaptionClick","handleCaptionKeyDown","hideMenuWithoutFocusing","saveFocus","setState","handleChangeMenuVisible","restoreFocus","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleKeyDown","globalObject","document","activeElement","focusShouldBeRestored","onOpen","onClose","onChangeMenuState","handleItemSelection","event","isDefaultPrevented","type","render","theme","ThemeFactory","create","menuOffsetY","popupMenuMenuOffsetY","renderMain","popupHasPin","disableAnimations","setRootNode","container","width","children","popupMargin","popupPinOffset","getPositions","isMobileLayout","menuWidth","menuMaxHeight","preventIconsOffset","header","footer","positions","Component","__KONTUR_REACT_UI__","displayName","Type"],"mappings":"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","sourcesContent":["import React, { AriaAttributes, HTMLAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { getRandomID } from '../../lib/utils';\nimport { HTMLProps } from '../../typings/html';\nimport {\n  isKeyArrowVertical,\n  isKeyEnter,\n  isKeyEscape,\n  isKeySpace,\n  someKeys,\n} from '../../lib/events/keyboard/identifiers';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Popup, PopupIds, PopupPositionsType } from '../Popup';\nimport { RenderLayer } from '../RenderLayer';\nimport { Nullable } from '../../typings/utility-types';\nimport { CommonProps, CommonWrapper } from '../CommonWrapper';\nimport { responsiveLayout } from '../../components/ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Menu, MenuProps } from '../Menu';\n\nimport { isValidPositions } from './validatePositions';\nimport { styles } from './PopupMenu.styles';\n\nexport interface PopupMenuCaptionProps {\n  opened: boolean;\n  openMenu: (firstItemShouldBeSelected?: boolean) => void;\n  closeMenu: (restoreFocus?: boolean) => void;\n  toggleMenu: () => void;\n}\n\nexport interface PopupMenuProps\n  extends CommonProps,\n    Pick<MenuProps, 'preventIconsOffset'>,\n    Pick<HTMLAttributes<HTMLElement>, 'id'>,\n    Pick<AriaAttributes, 'aria-label'> {\n  children?: React.ReactNode;\n  /** Максимальная высота меню */\n  menuMaxHeight?: number | string;\n  /** Ширина меню */\n  menuWidth?: number | string;\n  /** Ширина контейнера и caption */\n  width?: React.CSSProperties['width'];\n\n  /**\n   * Элемент или функция возвращающая элемент,\n   * если передана, используется вместо ```caption```,\n   * в таком случае управлять открытием и закрытием меню\n   * придется в этой функции\n   */\n  caption: React.ReactNode | ((props: PopupMenuCaptionProps) => React.ReactNode);\n\n  header?: React.ReactNode;\n  footer?: React.ReactNode;\n\n  /**  Массив разрешенных положений меню относительно caption'а. */\n  positions?: PopupPositionsType[];\n  /** Колбэк, вызываемый после открытия/закрытия меню */\n  onChangeMenuState?: (isOpened: boolean, restoreFocus: boolean) => void;\n  /** Пропсы, передающиеся в Popup */\n  popupHasPin?: boolean;\n  popupMargin?: number;\n  popupPinOffset?: number;\n  type?: 'dropdown' | 'tooltip';\n  disableAnimations?: boolean;\n  /** Действие при открытии меню */\n  onOpen?: () => void;\n  /** Действие при закрытии меню */\n  onClose?: () => void;\n  /**\n   * Позволяет задать `id` выпадающему меню.\n   *\n   * Это может пригодиться при реализации a11y. Например, для того, чтобы связать `aria-controls` с выпадающим меню.\n   */\n  popupMenuId?: HTMLProps['id'];\n}\n\ninterface PopupMenuState {\n  menuVisible: boolean;\n  firstItemShouldBeSelected?: boolean;\n}\n\nexport const PopupMenuType = {\n  Dropdown: 'dropdown',\n  Tooltip: 'tooltip',\n} as const;\n\nexport const PopupMenuDataTids = {\n  root: 'PopupMenu__root',\n  caption: 'PopupMenu__caption',\n} as const;\n\nconst Positions: PopupPositionsType[] = [\n  'top left',\n  'top center',\n  'top right',\n  'right top',\n  'right middle',\n  'right bottom',\n  'bottom left',\n  'bottom center',\n  'bottom right',\n  'left top',\n  'left middle',\n  'left bottom',\n];\n\ntype DefaultProps = Required<Pick<PopupMenuProps, 'positions' | 'type' | 'popupHasPin' | 'disableAnimations'>>;\n\n@rootNode\n@responsiveLayout\nexport class PopupMenu extends React.Component<PopupMenuProps, PopupMenuState> {\n  public static __KONTUR_REACT_UI__ = 'PopupMenu';\n  public static displayName = 'PopupMenu';\n\n  private isMobileLayout!: boolean;\n  private rootId = PopupIds.root + getRandomID();\n\n  public static defaultProps: DefaultProps = {\n    positions: Positions,\n    type: PopupMenuType.Tooltip,\n    popupHasPin: true,\n    disableAnimations: false,\n  };\n\n  private getProps = createPropsGetter(PopupMenu.defaultProps);\n\n  public static Type = PopupMenuType;\n\n  public state = {\n    menuVisible: false,\n    firstItemShouldBeSelected: false,\n  };\n\n  private captionWrapper: HTMLSpanElement | null = null;\n  private savedFocusableElement: HTMLElement | null = null;\n  private menu: Nullable<Menu> = null;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  menuOffsetY: theme.popupMenuMenuOffsetY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { popupHasPin, disableAnimations } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <RenderLayer\n          onClickOutside={this.hideMenuWithoutFocusing}\n          onFocusOutside={this.hideMenuWithoutFocusing}\n          active={this.state.menuVisible}\n        >\n          <div data-tid={PopupMenuDataTids.root} className={styles.container()} style={{ width: this.props.width }}>\n            {this.renderCaption()}\n            {this.captionWrapper && this.props.children && (\n              <Popup\n                id={this.props.popupMenuId ?? this.rootId}\n                anchorElement={this.captionWrapper}\n                opened={this.state.menuVisible}\n                hasShadow\n                margin={this.props.popupMargin}\n                hasPin={popupHasPin}\n                pinOffset={this.props.popupPinOffset}\n                positions={this.getPositions()}\n                disableAnimations={disableAnimations}\n                onOpen={this.handleOpen}\n                mobileOnCloseRequest={this.hideMenu}\n                width={this.isMobileLayout ? 'auto' : this.props.menuWidth || 'auto'}\n              >\n                <Menu\n                  hasShadow={false}\n                  maxHeight={this.isMobileLayout ? 'none' : this.props.menuMaxHeight || 'none'}\n                  onKeyDown={this.handleKeyDown}\n                  onItemClick={this.handleItemSelection}\n                  preventIconsOffset={this.props.preventIconsOffset}\n                  cyclicSelection={false}\n                  ref={this.refInternalMenu}\n                  initialSelectedItemIndex={this.state.firstItemShouldBeSelected ? 0 : -1}\n                  header={this.props.header}\n                  footer={this.props.footer}\n                >\n                  {this.props.children}\n                </Menu>\n              </Popup>\n            )}\n          </div>\n        </RenderLayer>\n      </CommonWrapper>\n    );\n  }\n\n  public open = (): void => this.showMenu();\n  public close = (): void => this.hideMenu();\n\n  private refInternalMenu = (element: Nullable<Menu>) => (this.menu = element);\n\n  private handleOpen = () => {\n    if (this.menu) {\n      this.menu.focus();\n    }\n  };\n\n  private passPropsToCaption = (caption: React.ReactNode) => {\n    if (typeof caption === 'string' || typeof caption === 'number') {\n      return caption;\n    }\n\n    return React.cloneElement(caption as React.ReactElement, {\n      id: this.props.id,\n      'aria-controls': this.props.popupMenuId ?? this.rootId,\n      'aria-expanded': this.state.menuVisible ? 'true' : 'false',\n      'aria-label': this.props['aria-label'],\n    });\n  };\n\n  private renderCaption = () => {\n    if (typeof this.props.caption === 'function') {\n      const caption = this.props.caption({\n        opened: this.state.menuVisible,\n        openMenu: this.showMenu,\n        closeMenu: this.hideMenu,\n        toggleMenu: this.toggleMenu,\n      });\n\n      return (\n        <span\n          data-tid={PopupMenuDataTids.caption}\n          className={styles.caption()}\n          ref={(element) => (this.captionWrapper = element)}\n        >\n          {this.passPropsToCaption(caption)}\n        </span>\n      );\n    }\n\n    return (\n      <span\n        data-tid={PopupMenuDataTids.caption}\n        onClick={this.handleCaptionClick}\n        onKeyDown={this.handleCaptionKeyDown}\n        ref={(element) => (this.captionWrapper = element)}\n        className={styles.caption()}\n      >\n        {this.passPropsToCaption(this.props.caption)}\n      </span>\n    );\n  };\n\n  private hideMenuWithoutFocusing = () => this.hideMenu();\n\n  private getPositions(): Readonly<PopupPositionsType[]> {\n    const positions = this.getProps().positions;\n    if (positions && isValidPositions(positions)) {\n      return positions;\n    }\n\n    return Positions;\n  }\n\n  private showMenu = (firstItemShouldBeSelected?: boolean): void => {\n    this.saveFocus();\n    this.setState(\n      {\n        menuVisible: true,\n        firstItemShouldBeSelected,\n      },\n      () => {\n        this.handleChangeMenuVisible(false);\n      },\n    );\n  };\n\n  private hideMenu = (restoreFocus?: boolean): void => {\n    this.setState(\n      {\n        menuVisible: false,\n        firstItemShouldBeSelected: false,\n      },\n      () => {\n        this.handleChangeMenuVisible(!!restoreFocus);\n      },\n    );\n  };\n\n  private toggleMenu = (): void => {\n    this.state.menuVisible ? this.hideMenu() : this.showMenu();\n  };\n\n  private handleCaptionClick = (): void => {\n    this.toggleMenu();\n  };\n\n  private handleCaptionKeyDown = (e: React.KeyboardEvent<HTMLElement>): void => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      this.showMenu(true);\n    }\n  };\n\n  private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n    if (isKeyEscape(e)) {\n      const restoreFocus = true;\n      this.hideMenu(restoreFocus);\n    }\n  };\n\n  private saveFocus = (): void => {\n    if (globalObject.document) {\n      this.savedFocusableElement = globalObject.document.activeElement as HTMLElement;\n    }\n  };\n\n  private restoreFocus = (): void => {\n    if (this.savedFocusableElement) {\n      this.savedFocusableElement.focus();\n      this.savedFocusableElement = null;\n    }\n  };\n\n  private handleChangeMenuVisible = (focusShouldBeRestored: boolean): void => {\n    if (focusShouldBeRestored) {\n      this.restoreFocus();\n    }\n\n    if (this.state.menuVisible && this.props.onOpen) {\n      this.props.onOpen();\n    }\n\n    if (!this.state.menuVisible && this.props.onClose) {\n      this.props.onClose();\n    }\n\n    if (typeof this.props.onChangeMenuState === 'function') {\n      this.props.onChangeMenuState(this.state.menuVisible, focusShouldBeRestored);\n    }\n  };\n\n  private handleItemSelection = (event: React.SyntheticEvent<HTMLElement>): void => {\n    if (event.isDefaultPrevented()) {\n      return;\n    }\n\n    if (event.type === 'keydown') {\n      event.preventDefault();\n    }\n\n    const restoreFocus = event.type === 'keydown';\n    this.hideMenu(restoreFocus);\n  };\n}\n"]}

package/cjs/internal/PopupMenu/PopupMenu.styles.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2;
 
 var styles = (0, _Emotion.memoizeStyle)({
   caption: function caption() {

package/cjs/internal/PopupMenu/PopupMenu.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["PopupMenu.styles.ts"],"names":["styles","caption","css","container"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,qBACvB;AACR,eAAOC,YAAP;;;;AAID,GANgC;AAOjCC,EAAAA,SAPiC,uBAOrB;AACV,eAAOD,YAAP;;;;AAID,GAZgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  caption() {\n    return css`\n      display: inline-block;\n      width: 100%;\n    `;\n  },\n  container() {\n    return css`\n      display: inline-block;\n      line-height: normal;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["PopupMenu.styles.ts"],"names":["styles","caption","css","container"],"mappings":"oRAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,qBACvB;AACR,eAAOC,YAAP;;;;AAID,GANgC;AAOjCC,EAAAA,SAPiC,uBAOrB;AACV,eAAOD,YAAP;;;;AAID,GAZgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  caption() {\n    return css`\n      display: inline-block;\n      width: 100%;\n    `;\n  },\n  container() {\n    return css`\n      display: inline-block;\n      line-height: normal;\n    `;\n  },\n});\n"]}

package/cjs/internal/RenderContainer/RenderContainer.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { RenderContainerProps } from './RenderContainerTypes';
+export declare const PORTAL_INLET_ATTR = "data-render-container-id";
+export declare const PORTAL_OUTLET_ATTR = "data-rendered-container-id";
 export declare class RenderContainer extends React.Component<RenderContainerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     private static getRootId;
     private domContainer;
     private readonly rootId;
-    constructor(props: RenderContainerProps);
     shouldComponentUpdate(nextProps: RenderContainerProps): boolean;
     componentWillUnmount(): void;
     render(): JSX.Element;

package/cjs/internal/RenderContainer/RenderContainer.js

@@ -1,29 +1,25 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RenderContainer = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.RenderContainer = exports.PORTAL_OUTLET_ATTR = exports.PORTAL_INLET_ATTR = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+var _globalObject = require("@skbkontur/global-object");
 
-var _client = require("../../lib/client");
 
 var _utils = require("../../lib/utils");
 var _Upgrades = require("../../lib/Upgrades");
 var _callChildRef = require("../../lib/callChildRef/callChildRef");
 
-var _RenderInnerContainer = require("./RenderInnerContainer");var
+var _RenderInnerContainer = require("./RenderInnerContainer");
 
 
-RenderContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(RenderContainer, _React$Component);
+var PORTAL_INLET_ATTR = 'data-render-container-id';exports.PORTAL_INLET_ATTR = PORTAL_INLET_ATTR;
+var PORTAL_OUTLET_ATTR = 'data-rendered-container-id';exports.PORTAL_OUTLET_ATTR = PORTAL_OUTLET_ATTR;var
 
+RenderContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(RenderContainer, _React$Component);function RenderContainer() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
 
+    domContainer = null;_this.
 
-
-  function RenderContainer(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.domContainer = null;_this.rootId = RenderContainer.getRootId();
-
-    if (_client.isBrowser && props.children) {
-      _this.mountContainer();
-    }return _this;
-  }var _proto = RenderContainer.prototype;_proto.
+    rootId = RenderContainer.getRootId();return _this;}var _proto = RenderContainer.prototype;_proto.
 
   shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     if (!this.props.children && nextProps.children) {
@@ -40,30 +36,34 @@ RenderContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
   };_proto.
 
   render = function render() {
+    if (this.props.children) {
+      this.mountContainer();
+    }
+
     return /*#__PURE__*/_react.default.createElement(_RenderInnerContainer.RenderInnerContainer, (0, _extends2.default)({}, this.props, { domContainer: this.domContainer, rootId: this.rootId }));
   };_proto.
 
-  createContainer = function createContainer() {
-    if (_client.canUseDOM) {
-      var domContainer = document.createElement('div');
+  createContainer = function createContainer() {var _globalObject$documen;
+    var domContainer = (_globalObject$documen = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen.createElement('div');
+    if (domContainer) {
       domContainer.setAttribute('class', _Upgrades.Upgrade.getSpecificityClassName());
-      domContainer.setAttribute('data-rendered-container-id', "" + this.rootId);
+      domContainer.setAttribute(PORTAL_OUTLET_ATTR, "" + this.rootId);
       this.domContainer = domContainer;
     }
   };_proto.
 
-  mountContainer = function mountContainer() {
+  mountContainer = function mountContainer() {var _globalObject$documen2;
     if (!this.domContainer) {
       this.createContainer();
     }
-    if (this.domContainer && this.domContainer.parentNode !== document.body) {
-      document.body.appendChild(this.domContainer);
+    if (this.domContainer && this.domContainer.parentNode !== ((_globalObject$documen2 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen2.body)) {var _globalObject$documen3;
+      (_globalObject$documen3 = _globalObject.globalObject.document) == null ? void 0 : _globalObject$documen3.body.appendChild(this.domContainer);
 
       if (this.props.containerRef) {
         (0, _callChildRef.callChildRef)(this.props.containerRef, this.domContainer);
       }
-      if (window.ReactTesting) {
-        window.ReactTesting.addRenderContainer(this.rootId, this);
+      if (_globalObject.globalObject.ReactTesting) {
+        _globalObject.globalObject.ReactTesting.addRenderContainer(this.rootId, this);
       }
     }
   };_proto.
@@ -83,8 +83,8 @@ RenderContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
         (0, _callChildRef.callChildRef)(this.props.containerRef, null);
       }
 
-      if (window.ReactTesting) {
-        window.ReactTesting.removeRenderContainer(this.rootId);
+      if (_globalObject.globalObject.ReactTesting) {
+        _globalObject.globalObject.ReactTesting.removeRenderContainer(this.rootId);
       }
     }
-  };return RenderContainer;}(_react.default.Component);exports.RenderContainer = RenderContainer;RenderContainer.__KONTUR_REACT_UI__ = 'RenderContainer';RenderContainer.getRootId = function () {return (0, _utils.getRandomID)();};
+  };return RenderContainer;}(_react.default.Component);exports.RenderContainer = RenderContainer;RenderContainer.__KONTUR_REACT_UI__ = 'RenderContainer';RenderContainer.displayName = 'RenderContainer';RenderContainer.getRootId = function () {return (0, _utils.getRandomID)();};

package/cjs/internal/RenderContainer/RenderContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderContainer.tsx"],"names":["RenderContainer","props","domContainer","rootId","getRootId","isBrowser","children","mountContainer","shouldComponentUpdate","nextProps","unmountContainer","componentWillUnmount","destroyContainer","render","createContainer","canUseDOM","document","createElement","setAttribute","Upgrade","getSpecificityClassName","parentNode","body","appendChild","containerRef","window","ReactTesting","addRenderContainer","removeChild","removeRenderContainer","React","Component","__KONTUR_REACT_UI__"],"mappings":"6UAAA;;AAEA;;AAEA;AACA;AACA;;AAEA,8D;;;AAGaA,e;;;;;;;;AAQX,2BAAYC,KAAZ,EAAyC;AACvC,wCAAMA,KAAN,UADuC,MAJjCC,YAIiC,GAJK,IAIL,OAFxBC,MAEwB,GAFPH,eAAe,CAACI,SAAhB,EAEO;;AAGvC,QAAIC,qBAAaJ,KAAK,CAACK,QAAvB,EAAiC;AAC/B,YAAKC,cAAL;AACD,KALsC;AAMxC,G;;AAEMC,EAAAA,qB,GAAP,+BAA6BC,SAA7B,EAA8D;AAC5D,QAAI,CAAC,KAAKR,KAAL,CAAWK,QAAZ,IAAwBG,SAAS,CAACH,QAAtC,EAAgD;AAC9C,WAAKC,cAAL;AACD;AACD,QAAI,KAAKN,KAAL,CAAWK,QAAX,IAAuB,CAACG,SAAS,CAACH,QAAtC,EAAgD;AAC9C,WAAKI,gBAAL;AACD;AACD,WAAO,IAAP;AACD,G;;AAEMC,EAAAA,oB,GAAP,gCAA8B;AAC5B,SAAKC,gBAAL;AACD,G;;AAEMC,EAAAA,M,GAAP,kBAAgB;AACd,wBAAO,6BAAC,0CAAD,6BAA0B,KAAKZ,KAA/B,IAAsC,YAAY,EAAE,KAAKC,YAAzD,EAAuE,MAAM,EAAE,KAAKC,MAApF,IAAP;AACD,G;;AAEOW,EAAAA,e,GAAR,2BAA0B;AACxB,QAAIC,iBAAJ,EAAe;AACb,UAAMb,YAAY,GAAGc,QAAQ,CAACC,aAAT,CAAuB,KAAvB,CAArB;AACAf,MAAAA,YAAY,CAACgB,YAAb,CAA0B,OAA1B,EAAmCC,kBAAQC,uBAAR,EAAnC;AACAlB,MAAAA,YAAY,CAACgB,YAAb,CAA0B,4BAA1B,OAA2D,KAAKf,MAAhE;AACA,WAAKD,YAAL,GAAoBA,YAApB;AACD;AACF,G;;AAEOK,EAAAA,c,GAAR,0BAAyB;AACvB,QAAI,CAAC,KAAKL,YAAV,EAAwB;AACtB,WAAKY,eAAL;AACD;AACD,QAAI,KAAKZ,YAAL,IAAqB,KAAKA,YAAL,CAAkBmB,UAAlB,KAAiCL,QAAQ,CAACM,IAAnE,EAAyE;AACvEN,MAAAA,QAAQ,CAACM,IAAT,CAAcC,WAAd,CAA0B,KAAKrB,YAA/B;;AAEA,UAAI,KAAKD,KAAL,CAAWuB,YAAf,EAA6B;AAC3B,wCAAa,KAAKvB,KAAL,CAAWuB,YAAxB,EAAsC,KAAKtB,YAA3C;AACD;AACD,UAAIuB,MAAM,CAACC,YAAX,EAAyB;AACvBD,QAAAA,MAAM,CAACC,YAAP,CAAoBC,kBAApB,CAAuC,KAAKxB,MAA5C,EAAoD,IAApD;AACD;AACF;AACF,G;;AAEOS,EAAAA,gB,GAAR,4BAA2B;AACzB,QAAI,KAAKV,YAAT,EAAuB;AACrB,WAAKQ,gBAAL;AACA,WAAKR,YAAL,GAAoB,IAApB;AACD;AACF,G;;AAEOQ,EAAAA,gB,GAAR,4BAA2B;AACzB,QAAI,KAAKR,YAAL,IAAqB,KAAKA,YAAL,CAAkBmB,UAA3C,EAAuD;AACrD,WAAKnB,YAAL,CAAkBmB,UAAlB,CAA6BO,WAA7B,CAAyC,KAAK1B,YAA9C;;AAEA,UAAI,KAAKD,KAAL,CAAWuB,YAAf,EAA6B;AAC3B,wCAAa,KAAKvB,KAAL,CAAWuB,YAAxB,EAAsC,IAAtC;AACD;;AAED,UAAIC,MAAM,CAACC,YAAX,EAAyB;AACvBD,QAAAA,MAAM,CAACC,YAAP,CAAoBG,qBAApB,CAA0C,KAAK1B,MAA/C;AACD;AACF;AACF,G,0BA9EkC2B,eAAMC,S,4CAA9B/B,e,CACGgC,mB,GAAsB,iB,CADzBhC,e,CAGII,S,GAAY,oBAAM,yBAAN,E","sourcesContent":["import React from 'react';\n\nimport { canUseDOM, isBrowser } from '../../lib/client';\nimport { Nullable } from '../../typings/utility-types';\nimport { getRandomID } from '../../lib/utils';\nimport { Upgrade } from '../../lib/Upgrades';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nimport { RenderInnerContainer } from './RenderInnerContainer';\nimport { RenderContainerProps } from './RenderContainerTypes';\n\nexport class RenderContainer extends React.Component<RenderContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderContainer';\n\n  private static getRootId = () => getRandomID();\n  private domContainer: Nullable<HTMLElement> = null;\n\n  private readonly rootId: string = RenderContainer.getRootId();\n\n  constructor(props: RenderContainerProps) {\n    super(props);\n\n    if (isBrowser && props.children) {\n      this.mountContainer();\n    }\n  }\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    return <RenderInnerContainer {...this.props} domContainer={this.domContainer} rootId={this.rootId} />;\n  }\n\n  private createContainer() {\n    if (canUseDOM) {\n      const domContainer = document.createElement('div');\n      domContainer.setAttribute('class', Upgrade.getSpecificityClassName());\n      domContainer.setAttribute('data-rendered-container-id', `${this.rootId}`);\n      this.domContainer = domContainer;\n    }\n  }\n\n  private mountContainer() {\n    if (!this.domContainer) {\n      this.createContainer();\n    }\n    if (this.domContainer && this.domContainer.parentNode !== document.body) {\n      document.body.appendChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, this.domContainer);\n      }\n      if (window.ReactTesting) {\n        window.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      if (window.ReactTesting) {\n        window.ReactTesting.removeRenderContainer(this.rootId);\n      }\n    }\n  }\n}\n"]}
+{"version":3,"sources":["RenderContainer.tsx"],"names":["PORTAL_INLET_ATTR","PORTAL_OUTLET_ATTR","RenderContainer","domContainer","rootId","getRootId","shouldComponentUpdate","nextProps","props","children","mountContainer","unmountContainer","componentWillUnmount","destroyContainer","render","createContainer","globalObject","document","createElement","setAttribute","Upgrade","getSpecificityClassName","parentNode","body","appendChild","containerRef","ReactTesting","addRenderContainer","removeChild","removeRenderContainer","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { getRandomID } from '../../lib/utils';\nimport { Upgrade } from '../../lib/Upgrades';\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\n\nimport { RenderInnerContainer } from './RenderInnerContainer';\nimport { RenderContainerProps } from './RenderContainerTypes';\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  private static getRootId = () => getRandomID();\n  private domContainer: Nullable<HTMLElement> = null;\n\n  private readonly rootId: string = RenderContainer.getRootId();\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 = 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    if (!this.domContainer) {\n      this.createContainer();\n    }\n    if (this.domContainer && this.domContainer.parentNode !== globalObject.document?.body) {\n      globalObject.document?.body.appendChild(this.domContainer);\n\n      if (this.props.containerRef) {\n        callChildRef(this.props.containerRef, this.domContainer);\n      }\n      if (globalObject.ReactTesting) {\n        globalObject.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      if (globalObject.ReactTesting) {\n        globalObject.ReactTesting.removeRenderContainer(this.rootId);\n      }\n    }\n  }\n}\n"]}

package/cjs/internal/RenderContainer/RenderInnerContainer.d.ts

@@ -13,9 +13,12 @@ export declare const Portal: {
         rt_rootID: propTypes.Validator<string>;
         children: propTypes.Validator<string | number | boolean | {} | propTypes.ReactElementLike | propTypes.ReactNodeArray>;
     };
+    __KONTUR_REACT_UI__: string;
+    displayName: string;
 };
 export declare class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     render(): React.ReactNode;
 }
 export {};

package/cjs/internal/RenderContainer/RenderInnerContainer.js

@@ -1,11 +1,13 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.RenderInnerContainer = exports.Portal = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.RenderInnerContainer = exports.Portal = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _globalObject = require("@skbkontur/global-object");
 
 
 var _SSRSafe = require("../../lib/SSRSafe");
 
 
+var _RenderContainer = require("./RenderContainer");
 
 
 
@@ -32,12 +34,12 @@ var _SSRSafe = require("../../lib/SSRSafe");
 
 var SSRPlaceholder = function SSRPlaceholder() {return /*#__PURE__*/_react.default.createElement("script", { "data-id": "ssr-placeholder" });};
 
-var Portal = function Portal(_ref) {var container = _ref.container,rt_rootID = _ref.rt_rootID,children = _ref.children;
+var Portal = function Portal(_ref) {var _ref2;var container = _ref.container,rt_rootID = _ref.rt_rootID,children = _ref.children;
   // container exists only in browser
   return /*#__PURE__*/(
     _react.default.createElement(_react.default.Fragment, null,
     container ? /*#__PURE__*/_reactDom.default.createPortal(children, container) : /*#__PURE__*/_react.default.createElement(SSRPlaceholder, null),
-    container ? /*#__PURE__*/_react.default.createElement("noscript", { "data-render-container-id": rt_rootID }) : /*#__PURE__*/_react.default.createElement(SSRPlaceholder, null)));
+    container ? /*#__PURE__*/_react.default.createElement("noscript", (_ref2 = {}, _ref2[_RenderContainer.PORTAL_INLET_ATTR] = rt_rootID, _ref2)) : /*#__PURE__*/_react.default.createElement(SSRPlaceholder, null)));
 
 
 };exports.Portal = Portal;var
@@ -45,6 +47,7 @@ var Portal = function Portal(_ref) {var container = _ref.container,rt_rootID = _
 RenderInnerContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(RenderInnerContainer, _React$Component);function RenderInnerContainer() {return _React$Component.apply(this, arguments) || this;}var _proto = RenderInnerContainer.prototype;_proto.
 
 
+
   render = function render() {
     var _this$props = this.props,anchor = _this$props.anchor,children = _this$props.children,domContainer = _this$props.domContainer,rootId = _this$props.rootId;
     var inner = anchor;
@@ -61,10 +64,14 @@ RenderInnerContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLo
     }
 
     return inner;
-  };return RenderInnerContainer;}(_react.default.Component);exports.RenderInnerContainer = RenderInnerContainer;RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';
+  };return RenderInnerContainer;}(_react.default.Component);exports.RenderInnerContainer = RenderInnerContainer;RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';RenderInnerContainer.displayName = 'RenderInnerContainer';
 
 
 Portal.propTypes = {
-  container: (0, _SSRSafe.safePropTypesInstanceOf)(function () {return HTMLElement;}),
+  container: (0, _SSRSafe.safePropTypesInstanceOf)(_globalObject.globalObject.HTMLElement),
   rt_rootID: _propTypes.default.string.isRequired,
-  children: _propTypes.default.node.isRequired };
+  children: _propTypes.default.node.isRequired };
+
+
+Portal.__KONTUR_REACT_UI__ = 'Portal';
+Portal.displayName = 'Portal';

package/cjs/internal/RenderContainer/RenderInnerContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["SSRPlaceholder","Portal","container","rt_rootID","children","ReactDOM","createPortal","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","React","Component","__KONTUR_REACT_UI__","propTypes","HTMLElement","string","isRequired","node"],"mappings":"iRAAA;AACA;AACA;;;AAGA;;;;;;;;;AASA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,yCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAqD,KAAlDC,SAAkD,QAAlDA,SAAkD,CAAvCC,SAAuC,QAAvCA,SAAuC,CAA5BC,QAA4B,QAA5BA,QAA4B;AACzE;AACA;AACE,iCAAC,cAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGG,kBAASC,YAAT,CAAsBF,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,6BAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,2CAAU,4BAA0BC,SAApC,GAAH,gBAAuD,6BAAC,cAAD,OAFnE,CADF;;;AAMD,CARM,C;;AAUMI,oB;;;AAGJC,EAAAA,M,GAAP,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBN,QAAhB,eAAgBA,QAAhB,CAA0BO,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIN,QAAJ,EAAc;AACZS,MAAAA,KAAK;AACH,mCAAC,cAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,mCAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGP,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOS,KAAP;AACD,G,+BAnBuCC,eAAMC,S,sDAAnCR,oB,CACGS,mB,GAAsB,sB;;;AAqBtCf,MAAM,CAACgB,SAAP,GAAmB;AACjBf,EAAAA,SAAS,EAAE,sCAAwB,oBAAMgB,WAAN,EAAxB,CADM;AAEjBf,EAAAA,SAAS,EAAEc,mBAAUE,MAAV,CAAiBC,UAFX;AAGjBhB,EAAAA,QAAQ,EAAEa,mBAAUI,IAAV,CAAeD,UAHR,EAAnB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport propTypes from 'prop-types';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript data-render-container-id={rt_rootID} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.propTypes = {\n  container: safePropTypesInstanceOf(() => HTMLElement),\n  rt_rootID: propTypes.string.isRequired,\n  children: propTypes.node.isRequired,\n};\n"]}
+{"version":3,"sources":["RenderInnerContainer.tsx"],"names":["SSRPlaceholder","Portal","container","rt_rootID","children","ReactDOM","createPortal","PORTAL_INLET_ATTR","RenderInnerContainer","render","props","anchor","domContainer","rootId","inner","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","globalObject","HTMLElement","string","isRequired","node"],"mappings":"yRAAA;AACA;AACA;AACA;;;AAGA;;;AAGA;;;;;;;AAOA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,IAAMA,cAAc,GAAG,SAAjBA,cAAiB,wBAAM,yCAAQ,WAAQ,iBAAhB,GAAN,EAAvB;;AAEO,IAAMC,MAAM,GAAG,SAATA,MAAS,OAAqD,eAAlDC,SAAkD,QAAlDA,SAAkD,CAAvCC,SAAuC,QAAvCA,SAAuC,CAA5BC,QAA4B,QAA5BA,QAA4B;AACzE;AACA;AACE,iCAAC,cAAD,CAAO,QAAP;AACGF,IAAAA,SAAS,gBAAGG,kBAASC,YAAT,CAAsBF,QAAtB,EAAgCF,SAAhC,CAAH,gBAAgD,6BAAC,cAAD,OAD5D;AAEGA,IAAAA,SAAS,gBAAG,4DAAiBK,kCAAjB,IAAqCJ,SAArC,SAAH,gBAA0D,6BAAC,cAAD,OAFtE,CADF;;;AAMD,CARM,C;;AAUMK,oB;;;;AAIJC,EAAAA,M,GAAP,kBAAgB;AACd,sBAAmD,KAAKC,KAAxD,CAAQC,MAAR,eAAQA,MAAR,CAAgBP,QAAhB,eAAgBA,QAAhB,CAA0BQ,YAA1B,eAA0BA,YAA1B,CAAwCC,MAAxC,eAAwCA,MAAxC;AACA,QAAIC,KAAK,GAAGH,MAAZ;;AAEA,QAAIP,QAAJ,EAAc;AACZU,MAAAA,KAAK;AACH,mCAAC,cAAD,CAAO,QAAP;AACGH,MAAAA,MADH;AAEE,mCAAC,MAAD,IAAQ,GAAG,EAAC,YAAZ,EAAyB,SAAS,EAAEE,MAApC,EAA4C,SAAS,EAAED,YAAvD;AACGR,MAAAA,QADH,CAFF,CADF;;;;AAQD;;AAED,WAAOU,KAAP;AACD,G,+BApBuCC,eAAMC,S,sDAAnCR,oB,CACGS,mB,GAAsB,sB,CADzBT,oB,CAEGU,W,GAAc,sB;;;AAqB9BjB,MAAM,CAACkB,SAAP,GAAmB;AACjBjB,EAAAA,SAAS,EAAE,sCAAwBkB,2BAAaC,WAArC,CADM;AAEjBlB,EAAAA,SAAS,EAAEgB,mBAAUG,MAAV,CAAiBC,UAFX;AAGjBnB,EAAAA,QAAQ,EAAEe,mBAAUK,IAAV,CAAeD,UAHR,EAAnB;;;AAMAtB,MAAM,CAACgB,mBAAP,GAA6B,QAA7B;AACAhB,MAAM,CAACiB,WAAP,GAAqB,QAArB","sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport propTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { safePropTypesInstanceOf } from '../../lib/SSRSafe';\n\nimport { PortalProps, RenderContainerProps } from './RenderContainerTypes';\nimport { PORTAL_INLET_ATTR } from './RenderContainer';\n\ninterface RenderInnerContainerProps extends RenderContainerProps {\n  domContainer: Nullable<HTMLElement>;\n  rootId: string;\n}\n\n// Заглушка нужна для корректной гидрации порталов после SSR,\n// которую реакт сам пока не поддерживает.\n// @see https://github.com/facebook/react/issues/13097\n// А также для вставки актуального render-container-id на клиенте.\n//\n// Дело в том, что во время гидрации, структура HTML на сервере\n// и на клиенте должна совпадать, иначе возможны артефакты.\n// Алгоритм там примерно такой. Клиент во время гидрации идет\n// по этим двум деревьям и сравнивает узлы. Элементы разных типов\n// он подменяет на свои. А те, что совпадают, он оставляет как есть\n// вместе со всеми атрибутами, навесив только обработчики событий.\n//\n// Поэтому, для портала, который рендерится только на клиенте,\n// нужно использовать серверную заглушку, чтобы при гидрации\n// он не испортил какой-то другой элемент. Null не подходит,\n// т.к. на сервере он тоже не рендерится.\n// А элемент с render-container-id нужно отрендерить с нуля.\n\nconst SSRPlaceholder = () => <script data-id=\"ssr-placeholder\" />;\n\nexport const Portal = ({ container, rt_rootID, children }: PortalProps) => {\n  // container exists only in browser\n  return (\n    <React.Fragment>\n      {container ? ReactDOM.createPortal(children, container) : <SSRPlaceholder />}\n      {container ? <noscript {...{ [PORTAL_INLET_ATTR]: rt_rootID }} /> : <SSRPlaceholder />}\n    </React.Fragment>\n  );\n};\n\nexport class RenderInnerContainer extends React.Component<RenderInnerContainerProps> {\n  public static __KONTUR_REACT_UI__ = 'RenderInnerContainer';\n  public static displayName = 'RenderInnerContainer';\n\n  public render() {\n    const { anchor, children, domContainer, rootId } = this.props;\n    let inner = anchor;\n\n    if (children) {\n      inner = (\n        <React.Fragment>\n          {anchor}\n          <Portal key=\"portal-ref\" rt_rootID={rootId} container={domContainer}>\n            {children}\n          </Portal>\n        </React.Fragment>\n      );\n    }\n\n    return inner;\n  }\n}\n\nPortal.propTypes = {\n  container: safePropTypesInstanceOf(globalObject.HTMLElement),\n  rt_rootID: propTypes.string.isRequired,\n  children: propTypes.node.isRequired,\n};\n\nPortal.__KONTUR_REACT_UI__ = 'Portal';\nPortal.displayName = 'Portal';\n"]}