@skbkontur/react-ui 0.0.0-a25347e958 → 0.0.0-a2ba201dd3

package/components/Link/Link.md

@@ -21,9 +21,14 @@ import { Gapped } from '@skbkontur/react-ui';
 Пример ссылки с иконкой.
 
 ```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
-<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
 ```
 
 Пример ссылок ведущих на внешние ресурсы.
@@ -49,20 +54,20 @@ import { Gapped } from '@skbkontur/react-ui';
 
 Ссылка в состоянии загрузки.
 
-**Поведение**:
-
-Если у ссылки есть иконка, она заменяется на спиннер.
+**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
 const [isLoading, setIsLoading] = React.useState(false);
 
 <Gapped vertical gap={15}>
   <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
   <Gapped gap={20}>
-    <Link loading={isLoading} icon={<OkIcon/>}>С иконкой</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
     <Link loading={isLoading}>Без иконки</Link>
   </Gapped>
 </Gapped>
@@ -86,3 +91,72 @@ import { Link, Gapped } from '@skbkontur/react-ui';
   <Link>Ok</Link>
 </Gapped>
 ```
+
+
+Пример кастомизации ссылки
+
+```jsx harmony
+import { Toast, Button } from "@skbkontur/react-ui";
+import { CopyIcon16Regular } from "@skbkontur/icons/CopyIcon16Regular"
+
+const textDecorationStyles = {
+  linkLineBorderBottomWidth: '0',
+  linkHoverTextDecoration: 'underline'
+}
+
+const underlineOnHoverStyles = {
+  linkLineBorderBottomColor: 'transparent',
+}
+
+const differentColorStyles = {
+  linkColor: 'blue',
+  linkHoverColor: 'blue',
+  linkActiveColor: 'blue',
+}
+
+const stringify = (styles) => {
+    return `${Object.entries(styles).map(([key, value]) => `${key}: "${value}"`).join(", ")}`
+}
+
+const copyStyles = (styles) => {
+  navigator.clipboard.writeText(stringify(styles));
+  Toast.push('Copied');
+}
+
+const tableStyle = {
+  borderCollapse: 'collapse',
+  width: '100%',
+};
+
+const tdStyle = {
+  border: '1px solid',
+  padding: '8px',
+};
+
+const renderExampleRow = (title, styles, index) => {
+    return (
+        <tr>
+          <td style={tdStyle}>{title}</td>
+          <td style={tdStyle}><Link theme={styles}>Link</Link></td>
+          <td style={tdStyle}>
+            <div style={{display: 'flex'}}>
+              <div style={{width: '80%', whiteSpace: 'pre-line'}}>{stringify(styles).replace(/, /g, '\n')}</div>
+              <Button icon={<CopyIcon16Regular />} use={'text'} onClick={() => copyStyles(styles)}/>
+            </div>
+          </td>
+        </tr>
+    )
+}
+
+<table style={tableStyle}>
+  <tr style={{textAlign: 'left'}}>
+    <th style={tdStyle}></th>
+    <th style={tdStyle}>Пример</th>
+    <th style={tdStyle}>Переменные темы</th>
+  </tr>
+  {renderExampleRow('Ссылка с подчеркиванием через text-decoration', textDecorationStyles)}
+  {renderExampleRow('Ссылка с подчеркиванием при наведении', underlineOnHoverStyles)}
+  {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
+</table>
+```
+

package/components/Link/Link.styles/Link.styles.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
 
 import { css, keyframes, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from "../Link.mixins";
@@ -19,7 +19,7 @@ export var styles = memoizeStyle({
     return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: relative;\n    "])), linkMixin(t.linkHoverTextDecoration));
   },
   lineRoot: function lineRoot() {
-    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n    "])));
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .", " {\n        border-bottom-color: currentColor !important;\n      }\n    "])), globalClasses.text);
   },
   lineTextWrapper: function lineTextWrapper(t) {
     // При hover'е подчеркивание из прозрачного переходит в currentColor.
@@ -27,63 +27,72 @@ export var styles = memoizeStyle({
     // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.
     // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.
     // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.
-    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        transition: border-bottom-color ", " ", ";\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: transparent;\n        &:hover {\n          border-bottom-color: currentColor;\n        }\n      }\n    "])), t.linkLineBorderBottomColor, t.transitionDuration, t.transitionTimingFunction, t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth);
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        transition: border-bottom-color ", " ", ";\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: transparent;\n      }\n    "])), t.linkLineBorderBottomColor, t.transitionDuration, t.transitionTimingFunction, t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth);
+  },
+  lineTextWrapperFocused: function lineTextWrapperFocused(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-color: currentColor;\n      }\n    "])), t.linkLineBorderBottomColor);
   },
   lineText: function lineText(t) {
-    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: ", ";\n      }\n      @supports not (border-bottom-color: ", ") {\n        ", ";\n      }\n    "])), t.linkLineBorderBottomColor, t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth, t.linkLineBorderBottomColor, t.linkLineBorderBottomColor, oldLineText(t));
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      @supports (border-bottom-color: ", ") {\n        border-bottom-style: ", ";\n        border-bottom-width: ", ";\n        border-bottom-color: ", ";\n      }\n      @supports not (border-bottom-color: ", ") {\n        ", ";\n      }\n    "])), t.linkLineBorderBottomColor, t.linkLineBorderBottomStyle, t.linkLineBorderBottomWidth, t.linkLineBorderBottomColor, t.linkLineBorderBottomColor, oldLineText(t));
   },
   lineTextIE11: function lineTextIE11(t) {
-    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), oldLineText(t));
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), oldLineText(t));
   },
   lineFocus: function lineFocus(t) {
-    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      .", " {\n        ", "\n      }\n    "])), t.linkHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   lineFocusSuccess: function lineFocusSuccess(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkSuccessHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   lineFocusDanger: function lineFocusDanger(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkDangerHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   lineFocusGrayed: function lineFocusGrayed(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      color: ", " !important;\n      .", " {\n        ", "\n      }\n    "])), t.linkGrayedHoverColor, globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   button: function button(t) {
-    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.linkButtonLineHeight, t.linkButtonPaddingX, t.linkButtonPaddingX);
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      line-height: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n    "])), t.linkButtonLineHeight, t.linkButtonPaddingX, t.linkButtonPaddingX);
   },
   buttonOpened: function buttonOpened(t) {
-    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.btnDefaultActiveBg);
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      background: ", ";\n    "])), t.btnDefaultActiveBg);
   },
   arrow: function arrow() {
-    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
+    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    "])));
   },
   useRoot: function useRoot() {
-    return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      border-bottom-color: currentColor;\n    "])));
+    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      border-bottom-color: currentColor;\n    "])));
   },
   useDefault: function useDefault(t) {
-    return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   useSuccess: function useSuccess(t) {
-    return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   useDanger: function useDanger(t) {
-    return css(_templateObject18 || (_templateObject18 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   useGrayed: function useGrayed(t) {
-    return css(_templateObject19 || (_templateObject19 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      ", ";\n      .", " {\n        :hover {\n          ", "\n        }\n      }\n    "])), linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
   },
   useGrayedFocus: function useGrayedFocus(t) {
-    return css(_templateObject20 || (_templateObject20 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
+    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
   },
   focus: function focus(t) {
-    return css(_templateObject21 || (_templateObject21 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.linkHoverTextDecoration);
+    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.linkHoverTextDecoration);
   },
   disabled: function disabled(t) {
-    return css(_templateObject22 || (_templateObject22 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
+    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", " !important; // override root color\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
   },
   disabledDark22Theme: function disabledDark22Theme(t) {
-    return css(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      .", " {\n        ", "\n      }\n    "])), globalClasses.text, linkUseLineHovered(t.linkLineHoverBorderBottomStyle));
+  },
+  icon: function icon() {
+    return css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n    "])));
+  },
+  iconLeft: function iconLeft(t) {
+    return css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
   },
-  icon: function icon(t) {
-    return css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+  iconRight: function iconRight(t) {
+    return css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n      margin-left: ", ";\n    "])), t.linkIconMarginLeft);
   }
 });

package/components/Link/Link.styles/Link.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.styles.ts"],"names":["css","keyframes","memoizeStyle","prefix","linkMixin","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","globalClasses","text","line","oldLineText","t","delay","parseFloat","linkLineBorderBottomOpacity","linkLineBorderBottomStyle","linkLineBorderBottomWidth","styles","root","linkHoverTextDecoration","lineRoot","lineTextWrapper","linkLineBorderBottomColor","transitionDuration","transitionTimingFunction","lineText","lineTextIE11","lineFocus","linkHoverColor","linkLineHoverBorderBottomStyle","lineFocusSuccess","linkSuccessHoverColor","lineFocusDanger","linkDangerHoverColor","lineFocusGrayed","linkGrayedHoverColor","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","btnDefaultActiveBg","arrow","useRoot","useDefault","linkColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerActiveColor","useGrayed","linkGrayedColor","linkGrayedActiveColor","useGrayedFocus","linkDisabledColor","focus","disabled","disabledDark22Theme","icon","linkIconMarginRight"],"mappings":"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","sourcesContent":["import { css, keyframes, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins';\n\nexport const globalClasses = prefix('link')({\n  text: 'text',\n});\n\nconst line = keyframes`\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n`;\n\nconst oldLineText = function (t: Theme) {\n  const delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;\n  return css`\n    border-bottom-style: ${t.linkLineBorderBottomStyle};\n    border-bottom-width: ${t.linkLineBorderBottomWidth};\n    animation: ${line} 1s linear !important; // override creevey\n    animation-play-state: paused !important;\n    animation-delay: ${delay}s !important;\n    animation-fill-mode: forwards !important;\n  `;\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\n    `;\n  },\n\n  lineRoot() {\n    return css`\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n    `;\n  },\n\n  lineTextWrapper(t: Theme) {\n    // При hover'е подчеркивание из прозрачного переходит в currentColor.\n    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)\n    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.\n\n    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.\n    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        transition: border-bottom-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: transparent;\n        &:hover {\n          border-bottom-color: currentColor;\n        }\n      }\n    `;\n  },\n\n  lineText(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: ${t.linkLineBorderBottomColor};\n      }\n      @supports not (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        ${oldLineText(t)};\n      }\n    `;\n  },\n\n  lineTextIE11(t: Theme) {\n    return css`\n      ${oldLineText(t)};\n    `;\n  },\n\n  lineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  button(t: Theme) {\n    return css`\n      display: inline-block;\n      line-height: ${t.linkButtonLineHeight};\n      padding-left: ${t.linkButtonPaddingX};\n      padding-right: ${t.linkButtonPaddingX};\n    `;\n  },\n\n  buttonOpened(t: Theme) {\n    return css`\n      background: ${t.btnDefaultActiveBg};\n    `;\n  },\n\n  arrow() {\n    return css`\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    `;\n  },\n\n  useRoot() {\n    return css`\n      border-bottom-color: currentColor;\n    `;\n  },\n  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayedFocus(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor} !important; // override root color\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  disabledDark22Theme(t: Theme) {\n    return css`\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      display: inline-block;\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Link.styles.ts"],"names":["css","keyframes","memoizeStyle","prefix","linkMixin","linkDisabledMixin","linkUseColorsMixin","linkUseLineHovered","globalClasses","text","line","oldLineText","t","delay","parseFloat","linkLineBorderBottomOpacity","linkLineBorderBottomStyle","linkLineBorderBottomWidth","styles","root","linkHoverTextDecoration","lineRoot","lineTextWrapper","linkLineBorderBottomColor","transitionDuration","transitionTimingFunction","lineTextWrapperFocused","lineText","lineTextIE11","lineFocus","linkHoverColor","linkLineHoverBorderBottomStyle","lineFocusSuccess","linkSuccessHoverColor","lineFocusDanger","linkDangerHoverColor","lineFocusGrayed","linkGrayedHoverColor","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","btnDefaultActiveBg","arrow","useRoot","useDefault","linkColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerActiveColor","useGrayed","linkGrayedColor","linkGrayedActiveColor","useGrayedFocus","linkDisabledColor","focus","disabled","disabledDark22Theme","icon","iconLeft","linkIconMarginRight","iconRight","linkIconMarginLeft"],"mappings":"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","sourcesContent":["import { css, keyframes, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin, linkUseLineHovered } from './Link.mixins';\n\nexport const globalClasses = prefix('link')({\n  text: 'text',\n});\n\nconst line = keyframes`\n  0% {\n    border-bottom-color: inherit;\n  }\n  100% {\n    border-bottom-color: transparent;\n  }\n`;\n\nconst oldLineText = function (t: Theme) {\n  const delay = parseFloat(t.linkLineBorderBottomOpacity) - 1;\n  return css`\n    border-bottom-style: ${t.linkLineBorderBottomStyle};\n    border-bottom-width: ${t.linkLineBorderBottomWidth};\n    animation: ${line} 1s linear !important; // override creevey\n    animation-play-state: paused !important;\n    animation-delay: ${delay}s !important;\n    animation-fill-mode: forwards !important;\n  `;\n};\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\n    `;\n  },\n\n  lineRoot() {\n    return css`\n      border-radius: 1px;\n      outline: none;\n      text-decoration: none;\n      &:hover .${globalClasses.text} {\n        border-bottom-color: currentColor !important;\n      }\n    `;\n  },\n\n  lineTextWrapper(t: Theme) {\n    // При hover'е подчеркивание из прозрачного переходит в currentColor.\n    // За счет наложения этого цвета на подчеркивание lineText (currentColor с половинной прозрачностью)\n    // достигается эффект перехода currentColor с половинной прозрачностью до currentColor.\n\n    // Планировалось добавить transition и color-mix(in srgb, currentColor 50%, transparent) в lineText.\n    // Однако, в chrome и edge сочетание transition, color-mix и currentColor вызывает моргание при transition.\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        transition: border-bottom-color ${t.transitionDuration} ${t.transitionTimingFunction};\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  lineTextWrapperFocused(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-color: currentColor;\n      }\n    `;\n  },\n\n  lineText(t: Theme) {\n    return css`\n      @supports (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        border-bottom-style: ${t.linkLineBorderBottomStyle};\n        border-bottom-width: ${t.linkLineBorderBottomWidth};\n        border-bottom-color: ${t.linkLineBorderBottomColor};\n      }\n      @supports not (border-bottom-color: ${t.linkLineBorderBottomColor}) {\n        ${oldLineText(t)};\n      }\n    `;\n  },\n\n  lineTextIE11(t: Theme) {\n    return css`\n      ${oldLineText(t)};\n    `;\n  },\n\n  lineFocus(t: Theme) {\n    return css`\n      color: ${t.linkHoverColor};\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusSuccess(t: Theme) {\n    return css`\n      color: ${t.linkSuccessHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusDanger(t: Theme) {\n    return css`\n      color: ${t.linkDangerHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  lineFocusGrayed(t: Theme) {\n    return css`\n      color: ${t.linkGrayedHoverColor} !important;\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  button(t: Theme) {\n    return css`\n      display: inline-block;\n      line-height: ${t.linkButtonLineHeight};\n      padding-left: ${t.linkButtonPaddingX};\n      padding-right: ${t.linkButtonPaddingX};\n    `;\n  },\n\n  buttonOpened(t: Theme) {\n    return css`\n      background: ${t.btnDefaultActiveBg};\n    `;\n  },\n\n  arrow() {\n    return css`\n      border: 4px solid transparent;\n      border-bottom-width: 0;\n      border-top-color: #a0a0a0;\n      display: inline-block;\n      margin-bottom: 3px;\n      margin-left: 3px;\n      vertical-align: middle;\n    `;\n  },\n\n  useRoot() {\n    return css`\n      border-bottom-color: currentColor;\n    `;\n  },\n  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkGrayedColor, t.linkGrayedHoverColor, t.linkGrayedActiveColor)};\n      .${globalClasses.text} {\n        :hover {\n          ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n        }\n      }\n    `;\n  },\n\n  useGrayedFocus(t: Theme) {\n    return css`\n      color: ${t.linkDisabledColor};\n    `;\n  },\n\n  focus(t: Theme) {\n    return css`\n      text-decoration: ${t.linkHoverTextDecoration};\n    `;\n  },\n\n  disabled(t: Theme) {\n    return css`\n      ${linkDisabledMixin()};\n\n      color: ${t.linkDisabledColor} !important; // override root color\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  disabledDark22Theme(t: Theme) {\n    return css`\n      .${globalClasses.text} {\n        ${linkUseLineHovered(t.linkLineHoverBorderBottomStyle)}\n      }\n    `;\n  },\n\n  icon() {\n    return css`\n      display: inline-block;\n    `;\n  },\n\n  iconLeft(t: Theme) {\n    return css`\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n\n  iconRight(t: Theme) {\n    return css`\n      margin-left: ${t.linkIconMarginLeft};\n    `;\n  },\n});\n"]}

package/components/Link/Link.styles.d.ts

@@ -6,6 +6,7 @@ export declare const styles: {
     root(t: Theme): string;
     lineRoot(): string;
     lineTextWrapper(t: Theme): string;
+    lineTextWrapperFocused(t: Theme): string;
     lineText(t: Theme): string;
     lineTextIE11(t: Theme): string;
     lineFocus(t: Theme): string;
@@ -24,5 +25,7 @@ export declare const styles: {
     focus(t: Theme): string;
     disabled(t: Theme): string;
     disabledDark22Theme(t: Theme): string;
-    icon(t: Theme): string;
+    icon(): string;
+    iconLeft(t: Theme): string;
+    iconRight(t: Theme): string;
 };

package/components/Link/LinkIcon/LinkIcon.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { cx } from "../../../lib/theming/Emotion";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { Spinner } from "../../Spinner";
+import { styles } from "../Link.styles";
+export var LinkIcon = function LinkIcon(_ref) {
+  var icon = _ref.icon,
+      loading = _ref.loading,
+      hasBothIcons = _ref.hasBothIcons,
+      position = _ref.position;
+  var theme = useContext(ThemeContext);
+  return /*#__PURE__*/React.createElement("span", {
+    className: cx(styles.icon(), position === 'left' && styles.iconLeft(theme), position === 'right' && styles.iconRight(theme))
+  }, loading && !hasBothIcons ? /*#__PURE__*/React.createElement(Spinner, {
+    caption: null,
+    dimmed: true,
+    inline: true
+  }) : icon);
+};

package/components/Link/LinkIcon/LinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["LinkIcon.tsx"],"names":["React","useContext","cx","ThemeContext","Spinner","styles","LinkIcon","icon","loading","hasBothIcons","position","theme","iconLeft","iconRight"],"mappings":"AAAA,OAAOA,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;;AAEA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,YAAT,QAA6B,gCAA7B;AACA,SAASC,OAAT,QAAwB,YAAxB;;;AAGA,SAASC,MAAT,QAAuB,eAAvB;;;;;;;AAOA,OAAO,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAA8D,KAA3DC,IAA2D,QAA3DA,IAA2D,CAArDC,OAAqD,QAArDA,OAAqD,CAA5CC,YAA4C,QAA5CA,YAA4C,CAA9BC,QAA8B,QAA9BA,QAA8B;AACpF,MAAMC,KAAK,GAAGV,UAAU,CAACE,YAAD,CAAxB;;AAEA;AACE;AACE,MAAA,SAAS,EAAED,EAAE;AACXG,MAAAA,MAAM,CAACE,IAAP,EADW;AAEXG,MAAAA,QAAQ,KAAK,MAAb,IAAuBL,MAAM,CAACO,QAAP,CAAgBD,KAAhB,CAFZ;AAGXD,MAAAA,QAAQ,KAAK,OAAb,IAAwBL,MAAM,CAACQ,SAAP,CAAiBF,KAAjB,CAHb,CADf;;;AAOGH,IAAAA,OAAO,IAAI,CAACC,YAAZ,gBAA2B,oBAAC,OAAD,IAAS,OAAO,EAAE,IAAlB,EAAwB,MAAM,MAA9B,EAA+B,MAAM,MAArC,GAA3B,GAAsEF,IAPzE,CADF;;;AAWD,CAdM","sourcesContent":["import React, { useContext } from 'react';\n\nimport { cx } from '../../lib/theming/Emotion';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Spinner } from '../Spinner';\n\nimport { LinkProps } from './Link';\nimport { styles } from './Link.styles';\n\nexport interface LinkIconProps extends Pick<LinkProps, 'icon' | 'loading'> {\n  position?: 'left' | 'right';\n  hasBothIcons?: boolean;\n}\n\nexport const LinkIcon = ({ icon, loading, hasBothIcons, position }: LinkIconProps) => {\n  const theme = useContext(ThemeContext);\n\n  return (\n    <span\n      className={cx(\n        styles.icon(),\n        position === 'left' && styles.iconLeft(theme),\n        position === 'right' && styles.iconRight(theme),\n      )}\n    >\n      {loading && !hasBothIcons ? <Spinner caption={null} dimmed inline /> : icon}\n    </span>\n  );\n};\n"]}

package/components/Link/LinkIcon/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Link/LinkIcon.js",
+  "module": "LinkIcon",
+  "types": "../LinkIcon.d.ts",
+  "sideEffects": false
+}

package/components/Link/LinkIcon.d.ts

@@ -0,0 +1,6 @@
+import { LinkProps } from './Link';
+export interface LinkIconProps extends Pick<LinkProps, 'icon' | 'loading'> {
+    position?: 'left' | 'right';
+    hasBothIcons?: boolean;
+}
+export declare const LinkIcon: ({ icon, loading, hasBothIcons, position }: LinkIconProps) => JSX.Element;

package/components/Loader/Loader/Loader.js

@@ -6,6 +6,7 @@ var _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import { globalObject, isBrowser } from '@skbkontur/global-object';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Spinner } from "../../Spinner";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
@@ -48,7 +49,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     };
 
     _this.checkSpinnerPosition = function () {
-      if (!_this.spinnerContainerNode) {
+      if (!_this.spinnerContainerNode || !isBrowser(globalObject)) {
         return;
       }
 
@@ -60,8 +61,8 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
           containerHeight = _getDOMRect.height,
           containerWidth = _getDOMRect.width;
 
-      var windowHeight = window.innerHeight;
-      var windowWidth = window.innerWidth; // Если контейнер не больше высоты и не шире окна,
+      var windowHeight = globalObject.innerHeight;
+      var windowWidth = globalObject.innerWidth; // Если контейнер не больше высоты и не шире окна,
       // то просто выравниваем по центру
 
       if (windowHeight >= containerHeight && windowWidth >= containerWidth) {
@@ -135,10 +136,12 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     };
 
     _this.enableChildrenFocus = function () {
+      var _globalObject$documen, _globalObject$documen2;
+
       _this.makeUnobservable(); // NOTE: NodeList doesn't support 'forEach' method in IE11 and other older browsers
 
 
-      Array.from(document.querySelectorAll('[origin-tabindex]')).forEach(function (el) {
+      Array.from((_globalObject$documen = (_globalObject$documen2 = globalObject.document) == null ? void 0 : _globalObject$documen2.querySelectorAll('[origin-tabindex]')) != null ? _globalObject$documen : []).forEach(function (el) {
         var _el$getAttribute;
 
         el.setAttribute('tabindex', (_el$getAttribute = el.getAttribute('origin-tabindex')) != null ? _el$getAttribute : '0');
@@ -149,7 +152,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
     _this.makeObservable = function () {
       var target = _this.childrenContainerNode;
 
-      if (!target) {
+      if (!target || !globalObject.MutationObserver) {
         return;
       }
 
@@ -157,7 +160,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
         childList: true,
         subtree: true
       };
-      var observer = new MutationObserver(_this.disableChildrenFocus);
+      var observer = new globalObject.MutationObserver(_this.disableChildrenFocus);
       observer.observe(target, config);
       _this.childrenObserver = observer;
     };
@@ -323,7 +326,7 @@ var Loader = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$
   };
 
   return Loader;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Loader', _class2.displayName = 'Loader', _class2.defaultProps = {
   type: 'normal',
   active: false,
   delayBeforeSpinnerShow: isTestEnv ? 0 : 300,

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","types","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__","propTypes","bool","node","className","string","oneOf","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\nconst types = ['mini', 'normal', 'big'] as const;\n\nexport type LoaderType = typeof types[number];\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?: LoaderType;\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: '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    type: PropTypes.oneOf(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            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              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?: LoaderType, 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","globalObject","isBrowser","LayoutEvents","Spinner","ThemeContext","ZIndex","CommonWrapper","cx","isTestEnv","TaskWithDelayAndMinimalDuration","getTabbableElements","rootNode","getDOMRect","createPropsGetter","styles","types","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","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","MutationObserver","config","childList","subtree","observer","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__","displayName","propTypes","bool","node","className","string","oneOf","number"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport { globalObject, isBrowser } from '@skbkontur/global-object';\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\nconst types = ['mini', 'normal', 'big'] as const;\n\nexport type LoaderType = typeof types[number];\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?: LoaderType;\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  public static displayName = 'Loader';\n\n  public static defaultProps: DefaultProps = {\n    type: '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    type: PropTypes.oneOf(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            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              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?: LoaderType, 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 || !isBrowser(globalObject)) {\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 = globalObject.innerHeight;\n    const windowWidth = globalObject.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(globalObject.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 || !globalObject.MutationObserver) {\n      return;\n    }\n    const config = {\n      childList: true,\n      subtree: true,\n    };\n    const observer = new globalObject.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

@@ -55,6 +55,7 @@ declare type DefaultProps = Required<Pick<LoaderProps, 'type' | 'active' | 'dela
  */
 export declare class Loader extends React.Component<LoaderProps, LoaderState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static defaultProps: DefaultProps;
     private getProps;
     static propTypes: {