"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 _RenderContainer = require("./RenderContainer");

var KONTUR_COLORS_ATTRIBUTES = ['data-k-brand', 'data-k-accent', 'data-k-theme'];






// Заглушка нужна для корректной гидрации порталов после SSR,
// которую реакт сам пока не поддерживает.
// @see https://github.com/facebook/react/issues/13097
// А также для вставки актуального render-container-id на клиенте.
//
// Дело в том, что во время гидрации, структура HTML на сервере
// и на клиенте должна совпадать, иначе возможны артефакты.
// Алгоритм там примерно такой. Клиент во время гидрации идет
// по этим двум деревьям и сравнивает узлы. Элементы разных типов
// он подменяет на свои. А те, что совпадают, он оставляет как есть
// вместе со всеми атрибутами, навесив только обработчики событий.
//
// Поэтому, для портала, который рендерится только на клиенте,
// нужно использовать серверную заглушку, чтобы при гидрации
// он не испортил какой-то другой элемент. Null не подходит,
// т.к. на сервере он тоже не рендерится.
// А элемент с render-container-id нужно отрендерить с нуля.

var SSRPlaceholder = function SSRPlaceholder() {return /*#__PURE__*/_react.default.createElement("script", { "data-id": "ssr-placeholder" });};

var Portal = exports.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", (_ref2 = {}, _ref2[_RenderContainer.PORTAL_INLET_ATTR] = rt_rootID, _ref2)) : /*#__PURE__*/_react.default.createElement(SSRPlaceholder, null)
    ));

};var

RenderInnerContainer = exports.RenderInnerContainer = /*#__PURE__*/function (_React$Component) {function RenderInnerContainer() {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.



    kColorsCheckerRef = /*#__PURE__*/_react.default.createRef();return _this;}(0, _inheritsLoose2.default)(RenderInnerContainer, _React$Component);var _proto = RenderInnerContainer.prototype;_proto.

  componentDidMount = function componentDidMount() {
    this.applyKonturColorsAttributes();
  };_proto.

  componentDidUpdate = function componentDidUpdate() {
    this.applyKonturColorsAttributes();
  };_proto.

  applyKonturColorsAttributes = function applyKonturColorsAttributes() {var _this$kColorsCheckerR;
    var domContainer = this.props.domContainer;
    var source = (_this$kColorsCheckerR = this.kColorsCheckerRef.current) == null ? void 0 : _this$kColorsCheckerR.closest(
      KONTUR_COLORS_ATTRIBUTES.map(function (x) {return "[" + x + "]";}).join(',')
    );

    for (var _i = 0, _KONTUR_COLORS_ATTRIB = KONTUR_COLORS_ATTRIBUTES; _i < _KONTUR_COLORS_ATTRIB.length; _i++) {var attribute = _KONTUR_COLORS_ATTRIB[_i];
      var value = source == null ? void 0 : source.getAttribute(attribute);
      if (value) {
        domContainer == null || domContainer.setAttribute(attribute, value);
      }
    }
  };_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;

    if (children) {
      inner = /*#__PURE__*/
      _react.default.createElement(_react.default.Fragment, null,
      anchor, /*#__PURE__*/
      _react.default.createElement(Portal, { key: "portal-ref", rt_rootID: rootId, container: domContainer },
      children
      ), /*#__PURE__*/
      _react.default.createElement("span", { ref: this.kColorsCheckerRef, style: { display: 'none' } })
      );

    }

    return inner;
  };return RenderInnerContainer;}(_react.default.Component);RenderInnerContainer.__KONTUR_REACT_UI__ = 'RenderInnerContainer';RenderInnerContainer.displayName = 'RenderInnerContainer';


Portal.__KONTUR_REACT_UI__ = 'Portal';
Portal.displayName = 'Portal';