@skbkontur/react-ui 4.5.1 → 4.5.2

package/cjs/internal/ZIndex/ZIndex.js

@@ -5,7 +5,7 @@ var _rootNode = require("../../lib/rootNode");
 var _client = require("../../lib/client");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 
-var _ZIndexStorage = require("./ZIndexStorage");var _excluded = ["style", "children", "delta", "priority", "applyZIndex", "coverChildren", "createStackingContext", "wrapperRef"];var _class, _class2, _temp;
+var _ZIndexStorage = require("./ZIndexStorage");var _excluded = ["style", "children", "delta", "priority", "applyZIndex", "coverChildren", "createStackingContext", "wrapperRef", "useWrapper"];var _class, _class2, _temp;
 
 var ZIndexContext = /*#__PURE__*/_react.default.createContext({ parentLayerZIndex: 0, maxZIndex: Infinity });
 
@@ -24,6 +24,21 @@ ZIndexContext.displayName = 'ZIndexContext';var
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -55,12 +70,32 @@ ZIndex = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
 
 
 
+
+
+
 
 
 
 
   function ZIndex(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.getProps = (0, _createPropsGetter.createPropsGetter)(ZIndex.defaultProps);_this.zIndex = 0;_this.
+    _this = _React$Component.call(this, props) || this;_this.state = { zIndex: 0 };_this.getProps = (0, _createPropsGetter.createPropsGetter)(ZIndex.defaultProps);_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -112,18 +147,24 @@ ZIndex = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functi
       var wrapperRef = _this.props.wrapperRef;
       _this.setRootNode(element);
       wrapperRef && (0, _callChildRef.callChildRef)(wrapperRef, element);
-    };_this.zIndex = (0, _ZIndexStorage.incrementZIndex)(_this.getProps().priority, _this.getProps().delta);return _this;}var _proto = ZIndex.prototype;_proto.componentWillUnmount = function componentWillUnmount() {(0, _ZIndexStorage.removeZIndex)(this.zIndex);};_proto.render = function render() {var _this2 = this; // TODO: Enable this rule in functional components.
-    /* eslint-disable @typescript-eslint/no-unused-vars */var _this$getProps = this.getProps(),style = _this$getProps.style,children = _this$getProps.children,delta = _this$getProps.delta,priority = _this$getProps.priority,applyZIndex = _this$getProps.applyZIndex,coverChildren = _this$getProps.coverChildren,createStackingContext = _this$getProps.createStackingContext,wrapperRef = _this$getProps.wrapperRef,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$getProps, _excluded);var wrapperStyle = {};return /*#__PURE__*/_react.default.createElement(ZIndexContext.Consumer, null, function (_ref) {var parentLayerZIndex = _ref.parentLayerZIndex,maxZIndex = _ref.maxZIndex;var zIndexContexValue = { parentLayerZIndex: parentLayerZIndex, maxZIndex: maxZIndex };if (applyZIndex) {var newZIndex = _this2.calcZIndex(parentLayerZIndex, maxZIndex);wrapperStyle.zIndex = newZIndex;zIndexContexValue = coverChildren ? { parentLayerZIndex: parentLayerZIndex, maxZIndex: newZIndex } : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };if (createStackingContext) {_client.isBrowser && 'isolation' in document.body.style ? wrapperStyle.isolation = 'isolate' : wrapperStyle.transform = 'rotate(0)';}}return /*#__PURE__*/_react.default.createElement(ZIndexContext.Provider, { value: zIndexContexValue }, /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({ style: (0, _extends2.default)({}, style, wrapperStyle), ref: _this2.wrapperRef }, rest), children));});};_proto.
-  calcZIndex = function calcZIndex(parentLayerZIndex, maxZIndex) {
-    var newZIndex = this.zIndex;
+    };_this.
+
+
+
+
+
+
+
+
+
+
+
+
+
 
-    if (Number.isFinite(maxZIndex)) {
-      var allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;
-      var scale = _ZIndexStorage.upperBorder / allowedValuesIntervalLength;
-      newZIndex = Math.ceil(newZIndex / scale);
-    }
 
-    newZIndex += parentLayerZIndex;
+    increment = function () {
+      var _this$getProps = _this.getProps(),priority = _this$getProps.priority,delta = _this$getProps.delta;
 
-    return newZIndex;
-  };return ZIndex;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'ZIndex', _class2.defaultProps = { delta: 10, priority: 0, style: {}, applyZIndex: true, coverChildren: false, createStackingContext: false }, _class2.propTypes = { delta: function delta(props) {if ((props.delta || _class2.defaultProps.delta) <= 0) {return new Error("[ZIndex]: Prop 'delta' must be greater than 0, received " + props.delta);}if (Math.trunc(props.delta || _class2.defaultProps.delta) !== props.delta) {return new Error("[ZIndex]: Prop 'delta' must be integer, received " + props.delta);}} }, _temp)) || _class;exports.ZIndex = ZIndex;
+      return (0, _ZIndexStorage.incrementZIndex)(priority, delta);
+    };_this.state.zIndex = _this.increment();return _this;}var _proto = ZIndex.prototype;_proto.componentDidUpdate = function componentDidUpdate(prevProps) {if (prevProps.priority !== this.props.priority || prevProps.delta !== this.props.delta) {(0, _ZIndexStorage.removeZIndex)(this.state.zIndex);this.setState({ zIndex: this.increment() });}};_proto.componentWillUnmount = function componentWillUnmount() {(0, _ZIndexStorage.removeZIndex)(this.state.zIndex);};_proto.render = function render() {var _this2 = this;var _this$getProps2 = this.getProps(),style = _this$getProps2.style,children = _this$getProps2.children,delta = _this$getProps2.delta,priority = _this$getProps2.priority,applyZIndex = _this$getProps2.applyZIndex,coverChildren = _this$getProps2.coverChildren,createStackingContext = _this$getProps2.createStackingContext,wrapperRef = _this$getProps2.wrapperRef,useWrapper = _this$getProps2.useWrapper,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$getProps2, _excluded);var wrapperStyle = {};return /*#__PURE__*/_react.default.createElement(ZIndexContext.Consumer, null, function (_ref) {var parentLayerZIndex = _ref.parentLayerZIndex,maxZIndex = _ref.maxZIndex;var zIndexContextValue = { parentLayerZIndex: parentLayerZIndex, maxZIndex: maxZIndex };if (applyZIndex) {var newZIndex = _this2.calcZIndex(parentLayerZIndex, maxZIndex);wrapperStyle.zIndex = newZIndex;zIndexContextValue = coverChildren ? { parentLayerZIndex: parentLayerZIndex, maxZIndex: newZIndex } : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };if (createStackingContext) {_client.isBrowser && 'isolation' in document.body.style ? wrapperStyle.isolation = 'isolate' : wrapperStyle.transform = 'rotate(0)';}}var child = !useWrapper ? children : /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({ style: (0, _extends2.default)({}, style, wrapperStyle), ref: _this2.wrapperRef }, rest), children);return /*#__PURE__*/_react.default.createElement(ZIndexContext.Provider, { value: zIndexContextValue }, child);});};_proto.calcZIndex = function calcZIndex(parentLayerZIndex, maxZIndex) {var newZIndex = this.state.zIndex;if (Number.isFinite(maxZIndex)) {var allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;var scale = _ZIndexStorage.upperBorder / allowedValuesIntervalLength;newZIndex = Math.ceil(newZIndex / scale);}newZIndex += parentLayerZIndex;return newZIndex;};return ZIndex;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'ZIndex', _class2.defaultProps = { delta: 10, priority: 0, style: {}, applyZIndex: true, coverChildren: false, createStackingContext: false, useWrapper: true }, _class2.propTypes = { delta: function delta(props) {if ((props.delta || _class2.defaultProps.delta) <= 0) {return new Error("[ZIndex]: Prop 'delta' must be greater than 0, received " + props.delta);}if (Math.trunc(props.delta || _class2.defaultProps.delta) !== props.delta) {return new Error("[ZIndex]: Prop 'delta' must be integer, received " + props.delta);}} }, _temp)) || _class;exports.ZIndex = ZIndex;

package/cjs/internal/ZIndex/ZIndex.js.map

@@ -1 +1 @@
-{"version":3,"sources":["ZIndex.tsx"],"names":["ZIndexContext","React","createContext","parentLayerZIndex","maxZIndex","Infinity","displayName","ZIndex","rootNode","props","getProps","defaultProps","zIndex","wrapperRef","element","setRootNode","priority","delta","componentWillUnmount","render","style","children","applyZIndex","coverChildren","createStackingContext","rest","wrapperStyle","zIndexContexValue","newZIndex","calcZIndex","Number","isFinite","isBrowser","document","body","isolation","transform","allowedValuesIntervalLength","scale","upperBorder","Math","ceil","Component","__KONTUR_REACT_UI__","propTypes","Error","trunc"],"mappings":"gcAAA;;AAEA;AACA;AACA;AACA;;AAEA,gD;;AAEA,IAAMA,aAAa,gBAAGC,eAAMC,aAAN,CAAoB,EAAEC,iBAAiB,EAAE,CAArB,EAAwBC,SAAS,EAAEC,QAAnC,EAApB,CAAtB;;AAEAL,aAAa,CAACM,WAAd,GAA4B,eAA5B,C;;;;;;;;;;;;;;;;;;;;;AAqBaC,M,OADZC,kB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BC,kBAAYC,KAAZ,EAAgC;AAC9B,wCAAMA,KAAN,UAD8B,MAjBxBC,QAiBwB,GAjBb,0CAAkBH,MAAM,CAACI,YAAzB,CAiBa,OAJxBC,MAIwB,GAJf,CAIe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiDxBC,IAAAA,UAjDwB,GAiDX,UAACC,OAAD,EAAoC;AACvD,UAAQD,UAAR,GAAuB,MAAKJ,KAA5B,CAAQI,UAAR;AACA,YAAKE,WAAL,CAAiBD,OAAjB;AACAD,MAAAA,UAAU,IAAI,gCAAaA,UAAb,EAAyBC,OAAzB,CAAd;AACD,KArD+B,CAE9B,MAAKF,MAAL,GAAc,oCAAgB,MAAKF,QAAL,GAAgBM,QAAhC,EAA0C,MAAKN,QAAL,GAAgBO,KAA1D,CAAd,CAF8B,aAG/B,C,qCAEMC,oB,GAAP,gCAA8B,CAC5B,iCAAa,KAAKN,MAAlB,EACD,C,QAEMO,M,GAAP,kBAAgB,oBACd;AACA,0DACA,qBACE,KAAKT,QAAL,EADF,CAAQU,KAAR,kBAAQA,KAAR,CAAeC,QAAf,kBAAeA,QAAf,CAAyBJ,KAAzB,kBAAyBA,KAAzB,CAAgCD,QAAhC,kBAAgCA,QAAhC,CAA0CM,WAA1C,kBAA0CA,WAA1C,CAAuDC,aAAvD,kBAAuDA,aAAvD,CAAsEC,qBAAtE,kBAAsEA,qBAAtE,CAA6FX,UAA7F,kBAA6FA,UAA7F,CAA4GY,IAA5G,0EAGA,IAAMC,YAAiC,GAAG,EAA1C,CAEA,oBACE,6BAAC,aAAD,CAAe,QAAf,QACG,gBAAsC,KAAnCvB,iBAAmC,QAAnCA,iBAAmC,CAAhBC,SAAgB,QAAhBA,SAAgB,CACrC,IAAIuB,iBAAiB,GAAG,EAAExB,iBAAiB,EAAjBA,iBAAF,EAAqBC,SAAS,EAATA,SAArB,EAAxB,CAEA,IAAIkB,WAAJ,EAAiB,CACf,IAAMM,SAAS,GAAG,MAAI,CAACC,UAAL,CAAgB1B,iBAAhB,EAAmCC,SAAnC,CAAlB,CACAsB,YAAY,CAACd,MAAb,GAAsBgB,SAAtB,CAEAD,iBAAiB,GAAGJ,aAAa,GAC7B,EAAEpB,iBAAiB,EAAjBA,iBAAF,EAAqBC,SAAS,EAAEwB,SAAhC,EAD6B,GAE7B,EAAEzB,iBAAiB,EAAEyB,SAArB,EAAgCxB,SAAS,EAAE0B,MAAM,CAACC,QAAP,CAAgB3B,SAAhB,IAA6BwB,SAA7B,GAAyCvB,QAApF,EAFJ,CAIA,IAAImB,qBAAJ,EAA2B,CACzBQ,qBAAa,eAAeC,QAAQ,CAACC,IAAT,CAAcd,KAA1C,GACKM,YAAY,CAACS,SAAb,GAAyB,SAD9B,GAEKT,YAAY,CAACU,SAAb,GAAyB,WAF9B,CAGD,CACF,CAED,oBACE,6BAAC,aAAD,CAAe,QAAf,IAAwB,KAAK,EAAET,iBAA/B,iBACE,6DAAK,KAAK,6BAAOP,KAAP,EAAiBM,YAAjB,CAAV,EAA2C,GAAG,EAAE,MAAI,CAACb,UAArD,IAAqEY,IAArE,GACGJ,QADH,CADF,CADF,CAOD,CA1BH,CADF,CA8BD,C;AAQOQ,EAAAA,U,GAAR,oBAAmB1B,iBAAnB,EAA8CC,SAA9C,EAAiE;AAC/D,QAAIwB,SAAS,GAAG,KAAKhB,MAArB;;AAEA,QAAIkB,MAAM,CAACC,QAAP,CAAgB3B,SAAhB,CAAJ,EAAgC;AAC9B,UAAMiC,2BAA2B,GAAGjC,SAAS,GAAGD,iBAAhD;AACA,UAAMmC,KAAK,GAAGC,6BAAcF,2BAA5B;AACAT,MAAAA,SAAS,GAAGY,IAAI,CAACC,IAAL,CAAUb,SAAS,GAAGU,KAAtB,CAAZ;AACD;;AAEDV,IAAAA,SAAS,IAAIzB,iBAAb;;AAEA,WAAOyB,SAAP;AACD,G,iBAhGyB3B,eAAMyC,S,WAClBC,mB,GAAsB,Q,UAEtBhC,Y,GAA6B,EACzCM,KAAK,EAAE,EADkC,EAEzCD,QAAQ,EAAE,CAF+B,EAGzCI,KAAK,EAAE,EAHkC,EAIzCE,WAAW,EAAE,IAJ4B,EAKzCC,aAAa,EAAE,KAL0B,EAMzCC,qBAAqB,EAAE,KANkB,E,UAW7BoB,S,GAAY,EACxB3B,KADwB,iBAClBR,KADkB,EACE,CACxB,IAAI,CAACA,KAAK,CAACQ,KAAN,IAAeV,OAAM,CAACI,YAAP,CAAoBM,KAApC,KAA8C,CAAlD,EAAqD,CACnD,OAAO,IAAI4B,KAAJ,8DAAqEpC,KAAK,CAACQ,KAA3E,CAAP,CACD,CACD,IAAIuB,IAAI,CAACM,KAAL,CAAWrC,KAAK,CAACQ,KAAN,IAAeV,OAAM,CAACI,YAAP,CAAoBM,KAA9C,MAAyDR,KAAK,CAACQ,KAAnE,EAA0E,CACxE,OAAO,IAAI4B,KAAJ,uDAA8DpC,KAAK,CAACQ,KAApE,CAAP,CACD,CACF,CARuB,E","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isBrowser } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName } from './ZIndexStorage';\n\nconst ZIndexContext = React.createContext({ parentLayerZIndex: 0, maxZIndex: Infinity });\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta?: number;\n  priority?: number | LayerComponentName;\n  style?: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n}\n\ntype DefaultProps = Required<\n  Pick<ZIndexProps, 'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext'>\n>;\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps> {\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n\n  public static defaultProps: DefaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n  };\n\n  private getProps = createPropsGetter(ZIndex.defaultProps);\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if ((props.delta || ZIndex.defaultProps.delta) <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta || ZIndex.defaultProps.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private zIndex = 0;\n\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.zIndex = incrementZIndex(this.getProps().priority, this.getProps().delta);\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.zIndex);\n  }\n\n  public render() {\n    // TODO: Enable this rule in functional components.\n    /* eslint-disable @typescript-eslint/no-unused-vars */\n    const { style, children, delta, priority, applyZIndex, coverChildren, createStackingContext, wrapperRef, ...rest } =\n      this.getProps();\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {({ parentLayerZIndex, maxZIndex }) => {\n          let zIndexContexValue = { parentLayerZIndex, maxZIndex };\n\n          if (applyZIndex) {\n            const newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            zIndexContexValue = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser && 'isolation' in document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          return (\n            <ZIndexContext.Provider value={zIndexContexValue}>\n              <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...rest}>\n                {children}\n              </div>\n            </ZIndexContext.Provider>\n          );\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n}\n"]}
+{"version":3,"sources":["ZIndex.tsx"],"names":["ZIndexContext","React","createContext","parentLayerZIndex","maxZIndex","Infinity","displayName","ZIndex","rootNode","props","state","zIndex","getProps","defaultProps","wrapperRef","element","setRootNode","increment","priority","delta","componentDidUpdate","prevProps","setState","componentWillUnmount","render","style","children","applyZIndex","coverChildren","createStackingContext","useWrapper","rest","wrapperStyle","zIndexContextValue","newZIndex","calcZIndex","Number","isFinite","isBrowser","document","body","isolation","transform","child","allowedValuesIntervalLength","scale","upperBorder","Math","ceil","Component","__KONTUR_REACT_UI__","propTypes","Error","trunc"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { callChildRef } from '../../lib/callChildRef/callChildRef';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isBrowser } from '../../lib/client';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { incrementZIndex, removeZIndex, upperBorder, LayerComponentName } from './ZIndexStorage';\n\nconst ZIndexContext = React.createContext({ parentLayerZIndex: 0, maxZIndex: Infinity });\n\nZIndexContext.displayName = 'ZIndexContext';\n\nexport interface ZIndexProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Приращение к z-index\n   */\n  delta?: number;\n  priority?: number | LayerComponentName;\n  style?: React.CSSProperties;\n  createStackingContext?: boolean;\n  coverChildren?: boolean;\n  applyZIndex?: boolean;\n  className?: string;\n  wrapperRef?: React.Ref<HTMLDivElement> | undefined | null;\n\n  /**\n   * Явно указывает, что вложенные элементы должны быть обёрнуты в `<div/>`.\n   * Для случаев, когда необходимо задать **только** контекст для области.\n   *\n   * @default true\n   */\n  useWrapper?: boolean;\n}\n\ntype DefaultProps = Required<\n  Pick<\n    ZIndexProps,\n    'delta' | 'priority' | 'style' | 'applyZIndex' | 'coverChildren' | 'createStackingContext' | 'useWrapper'\n  >\n>;\n\ninterface ZIndexState {\n  zIndex: number;\n}\n\n@rootNode\nexport class ZIndex extends React.Component<ZIndexProps, ZIndexState> {\n  public static __KONTUR_REACT_UI__ = 'ZIndex';\n\n  public static defaultProps: DefaultProps = {\n    delta: 10,\n    priority: 0,\n    style: {},\n    applyZIndex: true,\n    coverChildren: false,\n    createStackingContext: false,\n    useWrapper: true,\n  };\n\n  public state = {\n    zIndex: 0,\n  };\n\n  private getProps = createPropsGetter(ZIndex.defaultProps);\n\n  public static propTypes = {\n    delta(props: ZIndexProps) {\n      if ((props.delta || ZIndex.defaultProps.delta) <= 0) {\n        return new Error(`[ZIndex]: Prop 'delta' must be greater than 0, received ${props.delta}`);\n      }\n      if (Math.trunc(props.delta || ZIndex.defaultProps.delta) !== props.delta) {\n        return new Error(`[ZIndex]: Prop 'delta' must be integer, received ${props.delta}`);\n      }\n    },\n  };\n\n  private setRootNode!: TSetRootNode;\n\n  constructor(props: ZIndexProps) {\n    super(props);\n    this.state.zIndex = this.increment();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ZIndexProps>) {\n    if (prevProps.priority !== this.props.priority || prevProps.delta !== this.props.delta) {\n      removeZIndex(this.state.zIndex);\n      this.setState({ zIndex: this.increment() });\n    }\n  }\n\n  public componentWillUnmount() {\n    removeZIndex(this.state.zIndex);\n  }\n\n  public render() {\n    const {\n      style,\n      children,\n      delta,\n      priority,\n      applyZIndex,\n      coverChildren,\n      createStackingContext,\n      wrapperRef,\n      useWrapper,\n      ...rest\n    } = this.getProps();\n\n    const wrapperStyle: React.CSSProperties = {};\n\n    return (\n      <ZIndexContext.Consumer>\n        {({ parentLayerZIndex, maxZIndex }) => {\n          let zIndexContextValue = { parentLayerZIndex, maxZIndex };\n\n          if (applyZIndex) {\n            const newZIndex = this.calcZIndex(parentLayerZIndex, maxZIndex);\n            wrapperStyle.zIndex = newZIndex;\n\n            zIndexContextValue = coverChildren\n              ? { parentLayerZIndex, maxZIndex: newZIndex }\n              : { parentLayerZIndex: newZIndex, maxZIndex: Number.isFinite(maxZIndex) ? newZIndex : Infinity };\n\n            if (createStackingContext) {\n              isBrowser && 'isolation' in document.body.style\n                ? (wrapperStyle.isolation = 'isolate')\n                : (wrapperStyle.transform = 'rotate(0)');\n            }\n          }\n\n          const child = !useWrapper ? (\n            children\n          ) : (\n            <div style={{ ...style, ...wrapperStyle }} ref={this.wrapperRef} {...rest}>\n              {children}\n            </div>\n          );\n\n          return <ZIndexContext.Provider value={zIndexContextValue}>{child}</ZIndexContext.Provider>;\n        }}\n      </ZIndexContext.Consumer>\n    );\n  }\n\n  private wrapperRef = (element: HTMLDivElement | null) => {\n    const { wrapperRef } = this.props;\n    this.setRootNode(element);\n    wrapperRef && callChildRef(wrapperRef, element);\n  };\n\n  private calcZIndex(parentLayerZIndex: number, maxZIndex: number) {\n    let newZIndex = this.state.zIndex;\n\n    if (Number.isFinite(maxZIndex)) {\n      const allowedValuesIntervalLength = maxZIndex - parentLayerZIndex;\n      const scale = upperBorder / allowedValuesIntervalLength;\n      newZIndex = Math.ceil(newZIndex / scale);\n    }\n\n    newZIndex += parentLayerZIndex;\n\n    return newZIndex;\n  }\n\n  private increment = () => {\n    const { priority, delta } = this.getProps();\n\n    return incrementZIndex(priority, delta);\n  };\n}\n"]}

package/cjs/lib/rootNode/getRootNode.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Nullable } from '../../typings/utility-types';
 /**
- * Extracts component's root `Element` out of it's instance
+ * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance
  * following the "StrictMode support convention" (@see README.md#strictmode, #2518).
  *
  * Replaces findDOMNode but falls back to it if "convention" is not respected.

package/cjs/lib/rootNode/getRootNode.js

@@ -1,6 +1,7 @@
-"use strict";exports.__esModule = true;exports.getRootNode = void 0;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.getRootNode = void 0;
 var _reactDom = require("react-dom");
 
+var _warning = _interopRequireDefault(require("warning"));
 
 
 var _SSRSafe = require("../SSRSafe");
@@ -9,7 +10,7 @@ var _client = require("../client");
 var _rootNodeDecorator = require("./rootNodeDecorator"); /* eslint-disable react/no-find-dom-node */
 
 /**
- * Extracts component's root `Element` out of it's instance
+ * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance
  * following the "StrictMode support convention" (@see README.md#strictmode, #2518).
  *
  * Replaces findDOMNode but falls back to it if "convention" is not respected.
@@ -19,14 +20,22 @@ var _rootNodeDecorator = require("./rootNodeDecorator"); /* eslint-disable react
  */
 
 var getRootNode = function getRootNode(instance) {
+  /**
+   * Options of what instance can be:
+   *  1. null or undefined
+   *  2. DOM Element
+   *  3. class Component instance (object)
+   *  4. literally anything, returned from useImperativeHandle
+   */
+
   if (!_client.canUseDOM || !instance) {
     // instance can be `null` if component was unmounted
-    // also checking undefined for convinient usage
+    // also checking undefined for convenient usage
     return null;
   }
 
   if ((0, _SSRSafe.isElement)(instance)) {
-    // instance can be a `Element` already if comming
+    // instance can be an Element already if its coming
     // from Refs of intrinsic elements (<div />, <button />, etc.)
     return instance;
   }
@@ -36,7 +45,7 @@ var getRootNode = function getRootNode(instance) {
   if ((0, _rootNodeDecorator.isInstanceWithRootNode)(instance)) {
     // it happened to be that native Node interface also has
     // the "getRootNode" method, but we can ignore it here
-    // because we'd already checked the instance on being an `Element`
+    // because we'd already checked the instance on being an Element
     // which is a subclass of Node, so, just fixing types here
     if (!(0, _SSRSafe.isNode)(instance)) {
       rootNode = instance.getRootNode();
@@ -44,16 +53,32 @@ var getRootNode = function getRootNode(instance) {
   }
 
   if (rootNode !== undefined) {
-    // at this point, it is rather `Element` (what we are looking for)
-    // or null (which is also OK, e.g. Popup/Tooltip/Hint before opening), so, just return it
+    // the getter exists and has returned something, it should be what we are looking for
+    // probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)
     return rootNode;
   }
 
-  // node is undefined, which means that the instance's root node getter doesn't exists or returns the undefined
-  // anyway, it tell us that the convention is not respected (by the component itself or its children),
-  // so, we have to fall back to the deprecated findDOMNode, which always works but breaks StrictMode
-  rootNode = (0, _reactDom.findDOMNode)(instance);
+  try {
+    // rootNode is undefined, which means that the getter doesn't exists or returns the undefined
+    // anyway, it tell us that the convention is not respected,
+    // so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode
+    // instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)
+    rootNode = (0, _reactDom.findDOMNode)(instance);
+  } catch (e) {
+    // but findDOMNode doesn`t accept everything that instance can be at this point,
+    // so we have to handle exceptions
+    // see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86
+    (0, _warning.default)(
+    false,
+    '[getRootNode]: can`t fallback to findDOMNode.' +
+    '\n' +
+    'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' +
+    '\n\n' +
+    e.message);
+
+    return null;
+  }
 
-  // the findDOMNode can also return Text, but we are only intrested in HTMLElements, so just filter it
+  // the findDOMNode can also return Text, but we are only interested in Elements, so just filter it
   return (0, _SSRSafe.isElement)(rootNode) ? rootNode : null;
 };exports.getRootNode = getRootNode;

package/cjs/lib/rootNode/getRootNode.js.map

@@ -1 +1 @@
-{"version":3,"sources":["getRootNode.ts"],"names":["getRootNode","instance","canUseDOM","rootNode","undefined"],"mappings":";AACA;;;;AAIA;AACA;;AAEA,wD,CARA;;AAUA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAgE;AACzF,MAAI,CAACC,iBAAD,IAAc,CAACD,QAAnB,EAA6B;AAC3B;AACA;AACA,WAAO,IAAP;AACD;;AAED,MAAI,wBAAUA,QAAV,CAAJ,EAAyB;AACvB;AACA;AACA,WAAOA,QAAP;AACD;;AAED,MAAIE,QAAJ;;AAEA,MAAI,+CAAuBF,QAAvB,CAAJ,EAAsC;AACpC;AACA;AACA;AACA;AACA,QAAI,CAAC,qBAAOA,QAAP,CAAL,EAAuB;AACrBE,MAAAA,QAAQ,GAAGF,QAAQ,CAACD,WAAT,EAAX;AACD;AACF;;AAED,MAAIG,QAAQ,KAAKC,SAAjB,EAA4B;AAC1B;AACA;AACA,WAAOD,QAAP;AACD;;AAED;AACA;AACA;AACAA,EAAAA,QAAQ,GAAG,2BAAYF,QAAZ,CAAX;;AAEA;AACA,SAAO,wBAAUE,QAAV,IAAsBA,QAAtB,GAAiC,IAAxC;AACD,CAtCM,C","sourcesContent":["/* eslint-disable react/no-find-dom-node */\nimport { findDOMNode } from 'react-dom';\nimport React from 'react';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isElement, isNode } from '../SSRSafe';\nimport { canUseDOM } from '../client';\n\nimport { isInstanceWithRootNode } from './rootNodeDecorator';\n\n/**\n * Extracts component's root `Element` out of it's instance\n * following the \"StrictMode support convention\" (@see README.md#strictmode, #2518).\n *\n * Replaces findDOMNode but falls back to it if \"convention\" is not respected.\n *\n * @param instance Component's instance provided by React.Ref or `this` inside class-components.\n * @returns Component's root `Element` or null\n */\n\nexport const getRootNode = (instance: Nullable<React.ReactInstance>): Nullable<Element> => {\n  if (!canUseDOM || !instance) {\n    // instance can be `null` if component was unmounted\n    // also checking undefined for convinient usage\n    return null;\n  }\n\n  if (isElement(instance)) {\n    // instance can be a `Element` already if comming\n    // from Refs of intrinsic elements (<div />, <button />, etc.)\n    return instance;\n  }\n\n  let rootNode;\n\n  if (isInstanceWithRootNode(instance)) {\n    // it happened to be that native Node interface also has\n    // the \"getRootNode\" method, but we can ignore it here\n    // because we'd already checked the instance on being an `Element`\n    // which is a subclass of Node, so, just fixing types here\n    if (!isNode(instance)) {\n      rootNode = instance.getRootNode();\n    }\n  }\n\n  if (rootNode !== undefined) {\n    // at this point, it is rather `Element` (what we are looking for)\n    // or null (which is also OK, e.g. Popup/Tooltip/Hint before opening), so, just return it\n    return rootNode;\n  }\n\n  // node is undefined, which means that the instance's root node getter doesn't exists or returns the undefined\n  // anyway, it tell us that the convention is not respected (by the component itself or its children),\n  // so, we have to fall back to the deprecated findDOMNode, which always works but breaks StrictMode\n  rootNode = findDOMNode(instance);\n\n  // the findDOMNode can also return Text, but we are only intrested in HTMLElements, so just filter it\n  return isElement(rootNode) ? rootNode : null;\n};\n"]}
+{"version":3,"sources":["getRootNode.ts"],"names":["getRootNode","instance","canUseDOM","rootNode","undefined","e","message"],"mappings":";AACA;;AAEA;;;AAGA;AACA;;AAEA,wD,CATA;;AAWA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEO,IAAMA,WAAW,GAAG,SAAdA,WAAc,CAACC,QAAD,EAAgE;AACzF;AACF;AACA;AACA;AACA;AACA;AACA;;AAEE,MAAI,CAACC,iBAAD,IAAc,CAACD,QAAnB,EAA6B;AAC3B;AACA;AACA,WAAO,IAAP;AACD;;AAED,MAAI,wBAAUA,QAAV,CAAJ,EAAyB;AACvB;AACA;AACA,WAAOA,QAAP;AACD;;AAED,MAAIE,QAAJ;;AAEA,MAAI,+CAAuBF,QAAvB,CAAJ,EAAsC;AACpC;AACA;AACA;AACA;AACA,QAAI,CAAC,qBAAOA,QAAP,CAAL,EAAuB;AACrBE,MAAAA,QAAQ,GAAGF,QAAQ,CAACD,WAAT,EAAX;AACD;AACF;;AAED,MAAIG,QAAQ,KAAKC,SAAjB,EAA4B;AAC1B;AACA;AACA,WAAOD,QAAP;AACD;;AAED,MAAI;AACF;AACA;AACA;AACA;AACAA,IAAAA,QAAQ,GAAG,2BAAYF,QAAZ,CAAX;AACD,GAND,CAME,OAAOI,CAAP,EAAU;AACV;AACA;AACA;AACA;AACE,SADF;AAEE;AACE,QADF;AAEE,mGAFF;AAGE,UAHF;AAIEA,IAAAA,CAAC,CAACC,OANN;;AAQA,WAAO,IAAP;AACD;;AAED;AACA,SAAO,wBAAUH,QAAV,IAAsBA,QAAtB,GAAiC,IAAxC;AACD,CA9DM,C","sourcesContent":["/* eslint-disable react/no-find-dom-node */\nimport { findDOMNode } from 'react-dom';\nimport React from 'react';\nimport warning from 'warning';\n\nimport { Nullable } from '../../typings/utility-types';\nimport { isElement, isNode } from '../SSRSafe';\nimport { canUseDOM } from '../client';\n\nimport { isInstanceWithRootNode } from './rootNodeDecorator';\n\n/**\n * Extracts component's root Element (HTMLElement/SVGElement) out of it's instance\n * following the \"StrictMode support convention\" (@see README.md#strictmode, #2518).\n *\n * Replaces findDOMNode but falls back to it if \"convention\" is not respected.\n *\n * @param instance Component's instance provided by React.Ref or `this` inside class-components.\n * @returns Component's root `Element` or null\n */\n\nexport const getRootNode = (instance: Nullable<React.ReactInstance>): Nullable<Element> => {\n  /**\n   * Options of what instance can be:\n   *  1. null or undefined\n   *  2. DOM Element\n   *  3. class Component instance (object)\n   *  4. literally anything, returned from useImperativeHandle\n   */\n\n  if (!canUseDOM || !instance) {\n    // instance can be `null` if component was unmounted\n    // also checking undefined for convenient usage\n    return null;\n  }\n\n  if (isElement(instance)) {\n    // instance can be an Element already if its coming\n    // from Refs of intrinsic elements (<div />, <button />, etc.)\n    return instance;\n  }\n\n  let rootNode;\n\n  if (isInstanceWithRootNode(instance)) {\n    // it happened to be that native Node interface also has\n    // the \"getRootNode\" method, but we can ignore it here\n    // because we'd already checked the instance on being an Element\n    // which is a subclass of Node, so, just fixing types here\n    if (!isNode(instance)) {\n      rootNode = instance.getRootNode();\n    }\n  }\n\n  if (rootNode !== undefined) {\n    // the getter exists and has returned something, it should be what we are looking for\n    // probably its an Element or null (which is also OK, e.g. Popup/Tooltip/Hint before opening)\n    return rootNode;\n  }\n\n  try {\n    // rootNode is undefined, which means that the getter doesn't exists or returns the undefined\n    // anyway, it tell us that the convention is not respected,\n    // so, we have to fall back to the deprecated findDOMNode, which breaks StrictMode\n    // instance can still be a class component or an imperative handle (i.e., anything, except null/undefined/Element)\n    rootNode = findDOMNode(instance);\n  } catch (e) {\n    // but findDOMNode doesn`t accept everything that instance can be at this point,\n    // so we have to handle exceptions\n    // see https://github.com/facebook/react/blob/cae63505/packages/react-dom/src/__tests__/findDOMNode-test.js#L66-L86\n    warning(\n      false,\n      '[getRootNode]: can`t fallback to findDOMNode.' +\n        '\\n' +\n        'See https://github.com/skbkontur/retail-ui/blob/master/packages/react-ui/README.md#strictmode' +\n        '\\n\\n' +\n        e.message,\n    );\n    return null;\n  }\n\n  // the findDOMNode can also return Text, but we are only interested in Elements, so just filter it\n  return isElement(rootNode) ? rootNode : null;\n};\n"]}

package/components/Autocomplete/Autocomplete.md

@@ -1,7 +1,21 @@
 ```jsx harmony
-let items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
 
 const [value, setValue] = React.useState('Kappa');
 
 <Autocomplete source={items} value={value} onValueChange={setValue} />;
 ```
+
+Очистить значение в `Autocomplete` можно только с помощью пустой строки
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const items = ['Grey Face', 'Grey Space', 'Kappa', 'Keepo', 'Resident Sleeper'];
+
+const [value, setValue] = React.useState('Kappa');
+
+<Group>
+  <Autocomplete source={items} value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue('')}>Очистить</Button>
+</Group>
+```

package/components/ComboBox/ComboBox.md

@@ -49,6 +49,38 @@ let handleFocus = () => setError(false);
 </Tooltip>;
 ```
 
+Очистить значение в `ComboBox`'е можно с помощью пустой строки, `null` или `undefined`
+```jsx harmony
+import { Group, ComboBox, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState({ value: 2, label: 'Second' });
+
+const getItems = q => {
+  return Promise.resolve(
+    [
+      { value: 1, label: 'First' },
+      { value: 2, label: 'Second' },
+      { value: 3, label: 'Third' },
+      { value: 4, label: 'Fourth' },
+      { value: 5, label: 'Fifth' },
+      { value: 6, label: 'Sixth' },
+    ].filter(x => x.label.toLowerCase().includes(q.toLowerCase()) || x.value.toString(10) === q),
+  )
+};
+
+<Group>
+  <ComboBox
+    getItems={getItems}
+    onValueChange={setValue}
+    placeholder="Введите число"
+    value={value}
+  />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>
+```
+
 ComboBox with popular values, complex menu items and total count message
 
 ```jsx harmony

package/components/DatePicker/DatePicker.md

@@ -59,6 +59,24 @@ let removeTooltip = () => setTooltip(false);
 </Gapped>;
 ```
 
+Очистить значение в `DatePicker`'е можно с помощью пустой строки, `null` или `undefined`
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('24.08.2022');
+
+<Group>
+  <DatePicker
+    value={value}
+    onValueChange={setValue}
+    enableTodayLink
+  />
+  <Button onClick={() => setValue(null)}>Null</Button>
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>;
+```
+
 ### `isHoliday`
 
 В компонент можно передать функцию `isHoliday`, которая будет получать день строкой формата `dd.mm.yyyy` и флаг `isWeekend`, и должна вернуть `true` для выходного и `false` для рабочего дня.

package/components/FxInput/FxInput.md

@@ -14,3 +14,16 @@ function handleRestore() {
 
 <FxInput auto={auto} value={value} onValueChange={handleValueChange} onRestore={handleRestore} />;
 ```
+
+Очистить значение в `FxInput`'е можно с помощью пустой строки или `undefined`
+```jsx harmony
+import { Group, Button } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState(12345);
+
+<Group>
+  <FxInput value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue(undefined)}>Undefined</Button>
+  <Button onClick={() => setValue('')}>Пустая строка</Button>
+</Group>
+```

package/components/Input/Input.md

@@ -4,6 +4,18 @@ import SearchIcon from '@skbkontur/react-icons/Search';
 <Input leftIcon={<SearchIcon />} />;
 ```
 
+Очистить значение в `Input`'е можно только с помощью пустой строки
+```jsx harmony
+import { Button, Group } from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState('Значение');
+
+<Group>
+  <Input value={value} onValueChange={setValue} />
+  <Button onClick={() => setValue('')}>Очистить</Button>
+</Group>
+```
+
 Пример с префиксом:
 
 ```jsx harmony

package/components/Loader/Loader/Loader.js

@@ -25,7 +25,9 @@ export var LoaderDataTids = {
 };
 export
 /**
-* DRAFT - лоадер-контейнер
+* Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+*
+* Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
 */
 var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Loader, _React$Component);

package/components/Loader/Loader/Loader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","debounce","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","cx","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","rootNode","getDOMRect","createPropsGetter","styles","LoaderDataTids","veil","spinner","Loader","props","getProps","defaultProps","childrenRef","element","childrenContainerNode","spinnerRef","spinnerContainerNode","checkSpinnerPosition","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","spinnerNode","disableChildrenFocus","childrenObserver","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","Array","from","document","querySelectorAll","getAttribute","removeAttribute","target","config","childList","subtree","observer","MutationObserver","observe","disconnect","state","isSpinnerVisible","isLoaderActive","spinnerTask","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","layoutEvents","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","theme","renderMain","caption","type","setRootNode","loader","children","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","Types","normal","propTypes","bool","node","className","string","oneOf","Object","keys","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\n\nimport { AnyObject } from '../../lib/utils';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Spinner, SpinnerProps } from '../Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Loader.styles';\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active?: boolean;\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  className?: string;\n  type?: 'mini' | 'normal' | 'big';\n  /**\n   * Время в миллисекундах для показа вуали без спиннера.\n   * @default 300\n   */\n  delayBeforeSpinnerShow?: number;\n  /**\n   * Минимальное время в миллисекундах для показа спиннера\n   * @default 1000\n   */\n  minimalDelayBeforeSpinnerHide?: number;\n}\n\nexport interface LoaderState {\n  isStickySpinner: boolean;\n  isSpinnerVisible: boolean;\n  isLoaderActive: boolean;\n  spinnerStyle?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n  veil: 'Loader__Veil',\n  spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>\n>;\n\n/**\n * DRAFT - лоадер-контейнер\n */\n@rootNode\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n\n  public static defaultProps: DefaultProps = {\n    type: Spinner.Types.normal,\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  private getProps = createPropsGetter(Loader.defaultProps);\n\n  public static propTypes = {\n    /**\n     * показываем лоадер или нет\n     */\n    active: PropTypes.bool,\n\n    /**\n     * Текст рядом с лоадером.\n     *\n     * @default  \"Загрузка\"\n     */\n    caption: Spinner.propTypes.caption,\n\n    component: PropTypes.node,\n\n    /**\n     * Класс для обертки\n     */\n    className: PropTypes.string,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * @default  normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\n    /**\n     * Время в миллисекундах для показа вуали без спиннера.\n     * @default 300\n     */\n    delayBeforeSpinnerShow: PropTypes.number,\n    /**\n     * Минимальное время в миллисекундах для показа спиннера\n     * @default 1000\n     */\n    minimalDelayBeforeSpinnerHide: PropTypes.number,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private spinnerContainerNode: Nullable<HTMLDivElement>;\n  private childrenContainerNode: Nullable<HTMLDivElement>;\n  private spinnerNode: Nullable<HTMLDivElement>;\n  private layoutEvents: Nullable<{ remove: () => void }>;\n  private spinnerTask: TaskWithDelayAndMinimalDuration;\n  private childrenObserver: Nullable<MutationObserver>;\n\n  constructor(props: LoaderProps) {\n    super(props);\n\n    this.spinnerContainerNode = null;\n    this.childrenContainerNode = null;\n    this.childrenObserver = null;\n    this.spinnerNode = null;\n\n    this.state = {\n      isStickySpinner: false,\n      isSpinnerVisible: false,\n      isLoaderActive: false,\n    };\n\n    this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n      delayBeforeTaskStart: this.getProps().delayBeforeSpinnerShow,\n      durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    const active = this.getProps().active;\n    this.checkSpinnerPosition();\n    active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component } = this.props;\n    const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\n    const { isLoaderActive } = this.state;\n\n    if ((active && !prevProps.active) || prevProps.component !== component) {\n      this.checkSpinnerPosition();\n    }\n\n    if (\n      delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow ||\n      minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n    ) {\n      this.spinnerTask.update({\n        delayBeforeTaskStart: delayBeforeSpinnerShow,\n        durationOfTask: minimalDelayBeforeSpinnerHide,\n      });\n    }\n\n    if (active !== prevProps.active) {\n      active ? this.spinnerTask.start() : this.spinnerTask.stop();\n    }\n\n    if (isLoaderActive !== prevState.isLoaderActive) {\n      if (isLoaderActive) {\n        this.disableChildrenFocus();\n      } else {\n        this.enableChildrenFocus();\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    this.makeUnobservable();\n    if (this.layoutEvents) {\n      this.layoutEvents.remove();\n    }\n    this.spinnerTask.clearTask();\n  }\n\n  public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n    if (props.active && !state.isLoaderActive) {\n      return {\n        isLoaderActive: true,\n      };\n    }\n    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {\n      return {\n        isLoaderActive: false,\n      };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, component } = this.props;\n    const type = this.getProps().type;\n    const { isLoaderActive } = this.state;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>\n          <ZIndex\n            priority={'Loader'}\n            applyZIndex={isLoaderActive}\n            coverChildren={isLoaderActive}\n            style={{ height: '100%' }}\n            wrapperRef={this.childrenRef}\n          >\n            {this.props.children}\n          </ZIndex>\n          {isLoaderActive && (\n            <ZIndex\n              wrapperRef={this.spinnerRef}\n              priority={'Loader'}\n              className={cx({\n                [styles.active(this.theme)]: isLoaderActive,\n              })}\n            >\n              {this.state.isSpinnerVisible && this.renderSpinner(type, caption, component)}\n            </ZIndex>\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private childrenRef = (element: HTMLDivElement | null) => {\n    this.childrenContainerNode = element;\n  };\n\n  private spinnerRef = (element: HTMLDivElement | null) => {\n    this.spinnerContainerNode = element;\n  };\n\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\n    return (\n      <span\n        data-tid={LoaderDataTids.spinner}\n        className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}\n        style={this.state.spinnerStyle}\n      >\n        <div\n          className={styles.spinnerComponentWrapper()}\n          ref={(element) => {\n            this.spinnerNode = element;\n          }}\n        >\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\n        </div>\n      </span>\n    );\n  }\n\n  private checkSpinnerPosition = () => {\n    if (!this.spinnerContainerNode) {\n      return;\n    }\n\n    const {\n      top: containerTop,\n      right: containerRight,\n      bottom: containerBottom,\n      left: containerLeft,\n      height: containerHeight,\n      width: containerWidth,\n    } = getDOMRect(this.spinnerContainerNode);\n\n    const windowHeight = window.innerHeight;\n    const windowWidth = window.innerWidth;\n\n    // Если контейнер не больше высоты и не шире окна,\n    // то просто выравниваем по центру\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n      this.setState({\n        isStickySpinner: false,\n        spinnerStyle: {},\n      });\n      return;\n    }\n\n    const spinnerStyle: {\n      top?: number;\n      right: number;\n      bottom: number;\n      left: number;\n    } = {\n      top: 30,\n      right: 0,\n      bottom: 30,\n      left: 0,\n    };\n\n    // ПО ВЕРТИКАЛИ\n    // Если верхний край контейнера ниже верхнего края окна,\n    // то сдвигаем и лоадер\n    if (containerTop > 0) {\n      spinnerStyle.top = containerTop + 30;\n    }\n\n    // Если нижний край контейнера выше нижнего края окна,\n    // то сдвигаем и лоадер\n    if (containerBottom < windowHeight) {\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n    }\n\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n\n    const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n    if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n      delete spinnerStyle.top;\n    }\n\n    // ПО ГОРИЗОНТАЛИ\n    // Если левый край контейнера правее левого края окна,\n    // то сдвигаем и лоадер\n    if (containerLeft > 0) {\n      spinnerStyle.left = containerLeft;\n    }\n\n    // Если правый край контейнера левее правого края окна,\n    // то сдвигаем и лоадер\n    if (containerRight < windowWidth) {\n      spinnerStyle.right = windowWidth - containerRight;\n    }\n\n    this.setState({\n      isStickySpinner: true,\n      spinnerStyle,\n    });\n  };\n\n  private disableChildrenFocus = () => {\n    if (!this.childrenObserver) {\n      this.makeObservable();\n    }\n    const tabbableElements = getTabbableElements(this.childrenContainerNode);\n    tabbableElements.forEach((el) => {\n      if (!el.hasAttribute('origin-tabindex')) {\n        el.setAttribute('origin-tabindex', el.tabIndex.toString());\n      }\n      el.tabIndex = -1;\n    });\n  };\n\n  private enableChildrenFocus = () => {\n    this.makeUnobservable();\n    // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers\n    Array.from(document.querySelectorAll('[origin-tabindex]')).forEach((el) => {\n      el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n      el.removeAttribute('origin-tabindex');\n    });\n  };\n\n  private makeObservable = () => {\n    const target = this.childrenContainerNode;\n    if (!target) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new MutationObserver(this.disableChildrenFocus);\n    observer.observe(target, config);\n    this.childrenObserver = observer;\n  };\n\n  private makeUnobservable = () => {\n    this.childrenObserver?.disconnect();\n    this.childrenObserver = null;\n  };\n}\n"]}
+{"version":3,"sources":["Loader.tsx"],"names":["React","PropTypes","debounce","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","cx","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","rootNode","getDOMRect","createPropsGetter","styles","LoaderDataTids","veil","spinner","Loader","props","getProps","defaultProps","childrenRef","element","childrenContainerNode","spinnerRef","spinnerContainerNode","checkSpinnerPosition","containerTop","top","containerRight","right","containerBottom","bottom","containerLeft","left","containerHeight","height","containerWidth","width","windowHeight","window","innerHeight","windowWidth","innerWidth","setState","isStickySpinner","spinnerStyle","Math","abs","spinnerHeight","spinnerNode","disableChildrenFocus","childrenObserver","makeObservable","tabbableElements","forEach","el","hasAttribute","setAttribute","tabIndex","toString","enableChildrenFocus","makeUnobservable","Array","from","document","querySelectorAll","getAttribute","removeAttribute","target","config","childList","subtree","observer","MutationObserver","observe","disconnect","state","isSpinnerVisible","isLoaderActive","spinnerTask","delayBeforeTaskStart","delayBeforeSpinnerShow","durationOfTask","minimalDelayBeforeSpinnerHide","taskStartCallback","taskStopCallback","componentDidMount","active","start","layoutEvents","addListener","componentDidUpdate","prevProps","prevState","component","update","stop","componentWillUnmount","remove","clearTask","getDerivedStateFromProps","render","theme","renderMain","caption","type","setRootNode","loader","children","renderSpinner","spinnerContainer","spinnerContainerSticky","spinnerComponentWrapper","undefined","Component","__KONTUR_REACT_UI__","Types","normal","propTypes","bool","node","className","string","oneOf","Object","keys","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\n\nimport { AnyObject } from '../../lib/utils';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Spinner, SpinnerProps } from '../Spinner';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { TaskWithDelayAndMinimalDuration } from '../../lib/taskWithDelayAndMinimalDuration';\nimport { getTabbableElements } from '../../lib/dom/tabbableHelpers';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Loader.styles';\n\nexport interface LoaderProps extends CommonProps {\n  children?: React.ReactNode;\n  /**\n   * Флаг переключения состояния лоадера\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Подпись под спиннером\n   */\n  caption?: SpinnerProps['caption'];\n  /**\n   * Компонент заменяющий спиннер.\n   */\n  component?: React.ReactNode;\n  /**\n   * Размер спиннера и текста\n   *\n   * @default normal\n   */\n  type?: 'mini' | 'normal' | 'big';\n  /**\n   * Время в миллисекундах для показа вуали без спиннера.\n   * @default 300\n   */\n  delayBeforeSpinnerShow?: number;\n  /**\n   * Минимальное время в миллисекундах для показа спиннера\n   * @default 1000\n   */\n  minimalDelayBeforeSpinnerHide?: number;\n}\n\nexport interface LoaderState {\n  isStickySpinner: boolean;\n  isSpinnerVisible: boolean;\n  isLoaderActive: boolean;\n  spinnerStyle?: AnyObject;\n}\n\nexport const LoaderDataTids = {\n  veil: 'Loader__Veil',\n  spinner: 'Loader__Spinner',\n} as const;\n\ntype DefaultProps = Required<\n  Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>\n>;\n\n/**\n * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер\n *\n * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)\n */\n@rootNode\nexport class Loader extends React.Component<LoaderProps, LoaderState> {\n  public static __KONTUR_REACT_UI__ = 'Loader';\n\n  public static defaultProps: DefaultProps = {\n    type: Spinner.Types.normal,\n    active: false,\n    delayBeforeSpinnerShow: isTestEnv ? 0 : 300,\n    minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000,\n  };\n\n  private getProps = createPropsGetter(Loader.defaultProps);\n\n  public static propTypes = {\n    /**\n     * показываем лоадер или нет\n     */\n    active: PropTypes.bool,\n\n    /**\n     * Текст рядом с лоадером.\n     *\n     * @default  \"Загрузка\"\n     */\n    caption: Spinner.propTypes.caption,\n\n    component: PropTypes.node,\n\n    /**\n     * Класс для обертки\n     */\n    className: PropTypes.string,\n\n    /**\n     * Тип спиннера: mini, normal, big\n     *\n     * @default  normal\n     *\n     * Spinner.types - все доступные типы\n     */\n    type: PropTypes.oneOf(Object.keys(Spinner.Types)),\n    /**\n     * Время в миллисекундах для показа вуали без спиннера.\n     * @default 300\n     */\n    delayBeforeSpinnerShow: PropTypes.number,\n    /**\n     * Минимальное время в миллисекундах для показа спиннера\n     * @default 1000\n     */\n    minimalDelayBeforeSpinnerHide: PropTypes.number,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n  private spinnerContainerNode: Nullable<HTMLDivElement>;\n  private childrenContainerNode: Nullable<HTMLDivElement>;\n  private spinnerNode: Nullable<HTMLDivElement>;\n  private layoutEvents: Nullable<{ remove: () => void }>;\n  private spinnerTask: TaskWithDelayAndMinimalDuration;\n  private childrenObserver: Nullable<MutationObserver>;\n\n  constructor(props: LoaderProps) {\n    super(props);\n\n    this.spinnerContainerNode = null;\n    this.childrenContainerNode = null;\n    this.childrenObserver = null;\n    this.spinnerNode = null;\n\n    this.state = {\n      isStickySpinner: false,\n      isSpinnerVisible: false,\n      isLoaderActive: false,\n    };\n\n    this.spinnerTask = new TaskWithDelayAndMinimalDuration({\n      delayBeforeTaskStart: this.getProps().delayBeforeSpinnerShow,\n      durationOfTask: this.getProps().minimalDelayBeforeSpinnerHide,\n      taskStartCallback: () => this.setState({ isSpinnerVisible: true }),\n      taskStopCallback: () => this.setState({ isSpinnerVisible: false }),\n    });\n  }\n\n  public componentDidMount() {\n    const active = this.getProps().active;\n    this.checkSpinnerPosition();\n    active && this.spinnerTask.start();\n    this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));\n\n    if (active) {\n      this.disableChildrenFocus();\n    }\n  }\n\n  public componentDidUpdate(prevProps: Readonly<LoaderProps>, prevState: Readonly<LoaderState>) {\n    const { component } = this.props;\n    const { active, delayBeforeSpinnerShow, minimalDelayBeforeSpinnerHide } = this.getProps();\n    const { isLoaderActive } = this.state;\n\n    if ((active && !prevProps.active) || prevProps.component !== component) {\n      this.checkSpinnerPosition();\n    }\n\n    if (\n      delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow ||\n      minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide\n    ) {\n      this.spinnerTask.update({\n        delayBeforeTaskStart: delayBeforeSpinnerShow,\n        durationOfTask: minimalDelayBeforeSpinnerHide,\n      });\n    }\n\n    if (active !== prevProps.active) {\n      active ? this.spinnerTask.start() : this.spinnerTask.stop();\n    }\n\n    if (isLoaderActive !== prevState.isLoaderActive) {\n      if (isLoaderActive) {\n        this.disableChildrenFocus();\n      } else {\n        this.enableChildrenFocus();\n      }\n    }\n  }\n\n  public componentWillUnmount() {\n    this.makeUnobservable();\n    if (this.layoutEvents) {\n      this.layoutEvents.remove();\n    }\n    this.spinnerTask.clearTask();\n  }\n\n  public static getDerivedStateFromProps(props: LoaderProps, state: LoaderState): Partial<LoaderState> {\n    if (props.active && !state.isLoaderActive) {\n      return {\n        isLoaderActive: true,\n      };\n    }\n    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {\n      return {\n        isLoaderActive: false,\n      };\n    }\n\n    return state;\n  }\n\n  public render() {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return this.renderMain();\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { caption, component } = this.props;\n    const type = this.getProps().type;\n    const { isLoaderActive } = this.state;\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div className={styles.loader()} data-tid={isLoaderActive ? LoaderDataTids.veil : ''}>\n          <ZIndex\n            priority={'Loader'}\n            applyZIndex={isLoaderActive}\n            coverChildren={isLoaderActive}\n            style={{ height: '100%' }}\n            wrapperRef={this.childrenRef}\n          >\n            {this.props.children}\n          </ZIndex>\n          {isLoaderActive && (\n            <ZIndex\n              wrapperRef={this.spinnerRef}\n              priority={'Loader'}\n              className={cx({\n                [styles.active(this.theme)]: isLoaderActive,\n              })}\n            >\n              {this.state.isSpinnerVisible && this.renderSpinner(type, caption, component)}\n            </ZIndex>\n          )}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private childrenRef = (element: HTMLDivElement | null) => {\n    this.childrenContainerNode = element;\n  };\n\n  private spinnerRef = (element: HTMLDivElement | null) => {\n    this.spinnerContainerNode = element;\n  };\n\n  private renderSpinner(type?: 'mini' | 'normal' | 'big', caption?: React.ReactNode, component?: React.ReactNode) {\n    return (\n      <span\n        data-tid={LoaderDataTids.spinner}\n        className={cx(styles.spinnerContainer(), { [styles.spinnerContainerSticky()]: this.state.isStickySpinner })}\n        style={this.state.spinnerStyle}\n      >\n        <div\n          className={styles.spinnerComponentWrapper()}\n          ref={(element) => {\n            this.spinnerNode = element;\n          }}\n        >\n          {component !== undefined ? component : <Spinner type={type} caption={caption} />}\n        </div>\n      </span>\n    );\n  }\n\n  private checkSpinnerPosition = () => {\n    if (!this.spinnerContainerNode) {\n      return;\n    }\n\n    const {\n      top: containerTop,\n      right: containerRight,\n      bottom: containerBottom,\n      left: containerLeft,\n      height: containerHeight,\n      width: containerWidth,\n    } = getDOMRect(this.spinnerContainerNode);\n\n    const windowHeight = window.innerHeight;\n    const windowWidth = window.innerWidth;\n\n    // Если контейнер не больше высоты и не шире окна,\n    // то просто выравниваем по центру\n    if (windowHeight >= containerHeight && windowWidth >= containerWidth) {\n      this.setState({\n        isStickySpinner: false,\n        spinnerStyle: {},\n      });\n      return;\n    }\n\n    const spinnerStyle: {\n      top?: number;\n      right: number;\n      bottom: number;\n      left: number;\n    } = {\n      top: 30,\n      right: 0,\n      bottom: 30,\n      left: 0,\n    };\n\n    // ПО ВЕРТИКАЛИ\n    // Если верхний край контейнера ниже верхнего края окна,\n    // то сдвигаем и лоадер\n    if (containerTop > 0) {\n      spinnerStyle.top = containerTop + 30;\n    }\n\n    // Если нижний край контейнера выше нижнего края окна,\n    // то сдвигаем и лоадер\n    if (containerBottom < windowHeight) {\n      spinnerStyle.bottom = Math.abs(windowHeight - containerBottom) + 30;\n    }\n\n    // Если знаем высоту спиннера и нижний край контейнера поднимается\n    // выше отступа на высоту спиннера, то убираем верхнюю позицию лоадера\n\n    const spinnerHeight = getDOMRect(this.spinnerNode).height;\n\n    if (spinnerHeight && spinnerStyle.bottom >= windowHeight - spinnerHeight) {\n      delete spinnerStyle.top;\n    }\n\n    // ПО ГОРИЗОНТАЛИ\n    // Если левый край контейнера правее левого края окна,\n    // то сдвигаем и лоадер\n    if (containerLeft > 0) {\n      spinnerStyle.left = containerLeft;\n    }\n\n    // Если правый край контейнера левее правого края окна,\n    // то сдвигаем и лоадер\n    if (containerRight < windowWidth) {\n      spinnerStyle.right = windowWidth - containerRight;\n    }\n\n    this.setState({\n      isStickySpinner: true,\n      spinnerStyle,\n    });\n  };\n\n  private disableChildrenFocus = () => {\n    if (!this.childrenObserver) {\n      this.makeObservable();\n    }\n    const tabbableElements = getTabbableElements(this.childrenContainerNode);\n    tabbableElements.forEach((el) => {\n      if (!el.hasAttribute('origin-tabindex')) {\n        el.setAttribute('origin-tabindex', el.tabIndex.toString());\n      }\n      el.tabIndex = -1;\n    });\n  };\n\n  private enableChildrenFocus = () => {\n    this.makeUnobservable();\n    // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers\n    Array.from(document.querySelectorAll('[origin-tabindex]')).forEach((el) => {\n      el.setAttribute('tabindex', el.getAttribute('origin-tabindex') ?? '0');\n      el.removeAttribute('origin-tabindex');\n    });\n  };\n\n  private makeObservable = () => {\n    const target = this.childrenContainerNode;\n    if (!target) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new MutationObserver(this.disableChildrenFocus);\n    observer.observe(target, config);\n    this.childrenObserver = observer;\n  };\n\n  private makeUnobservable = () => {\n    this.childrenObserver?.disconnect();\n    this.childrenObserver = null;\n  };\n}\n"]}

package/components/Loader/Loader.d.ts

@@ -10,12 +10,19 @@ export interface LoaderProps extends CommonProps {
      * @default false
      */
     active?: boolean;
+    /**
+     * Подпись под спиннером
+     */
     caption?: SpinnerProps['caption'];
     /**
      * Компонент заменяющий спиннер.
      */
     component?: React.ReactNode;
-    className?: string;
+    /**
+     * Размер спиннера и текста
+     *
+     * @default normal
+     */
     type?: 'mini' | 'normal' | 'big';
     /**
      * Время в миллисекундах для показа вуали без спиннера.
@@ -40,7 +47,9 @@ export declare const LoaderDataTids: {
 };
 declare type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'delayBeforeSpinnerShow' | 'minimalDelayBeforeSpinnerHide'>>;
 /**
- * DRAFT - лоадер-контейнер
+ * Компонент `Loader` принимает внутрь себя контент, поверх которого в активном состоянии `Loader`'а будет отрисован спиннер
+ *
+ * Если вам нужен только сам спиннер без дополнительнго функционала - используйте компонент [Spinner](https://tech.skbkontur.ru/react-ui/#/Components/Spinner)
  */
 export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     static __KONTUR_REACT_UI__: string;