@skbkontur/react-ui 0.0.0-c91b3db3f4 → 0.0.0-cb270e7a13

package/components/Link/Link.d.ts

@@ -3,31 +3,49 @@ import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
-    /** Неактивное состояние */
+    /**
+     * Отключенное состояние.
+     */
     disabled?: boolean;
-    /** href */
+    /**
+     * HTML-атрибут `href`.
+     */
     href?: string;
-    /** Иконка */
+    /**
+     * Добавляет ссылке иконку.
+     */
     icon?: React.ReactElement<any>;
-    /** Тип */
+    /**
+     * Тема ссылки.
+     */
     use?: 'default' | 'success' | 'danger' | 'grayed';
+    /**
+     * @ignore
+     */
     _button?: boolean;
+    /**
+     * @ignore
+     */
     _buttonOpened?: boolean;
+    /**
+     * HTML-атрибут `tabindex`.
+     */
     tabIndex?: number;
-    /** Состояние загрузки */
+    /**
+     * Переводит ссылку в состояние загрузки.
+     */
     loading?: boolean;
-    /** onClick */
-    onClick?: (event?: React.MouseEvent<HTMLAnchorElement>) => void;
+    /**
+     * HTML-событие `onclick`.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
 }> {
 }
 export interface LinkState {
     focusedByTab: boolean;
 }
 /**
- * Стандартная ссылка.
- * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
- * Все свойства передаются в элемент `<a>`.
- * `className` и `style` не поддерживаются
+ * Элемент ссылки из HTML.
  */
 export declare class Link extends React.Component<LinkProps, LinkState> {
     static __KONTUR_REACT_UI__: string;

package/components/Link/Link.md

@@ -1,11 +1,77 @@
-```jsx harmony
-import { Gapped, Link } from '@skbkontur/react-ui';
-
-<Gapped>
-  <Link>Enabled</Link>
-  <Link use="success">Success</Link>
-  <Link use="danger">Danger</Link>
-  <Link use="grayed">Grayed</Link>
-  <Link disabled>Disabled</Link>
-</Gapped>;
-```
+Базовый пример ссылки.
+
+```jsx harmony
+<Link>Обычная ссылка</Link>
+```
+
+Ссылка может иметь различные стили, а также быть отключенной.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped gap={15}>
+  <Link>Обычная ссылка</Link>
+  <Link use="success">Успешная ссылка</Link>
+  <Link use="danger">Опасная ссылка</Link>
+  <Link use="grayed">Работающая ссылка серого цвета</Link>
+  <Link disabled>Отключенная ссылка</Link>
+</Gapped>;
+```
+
+Пример ссылки с иконкой.
+
+```jsx harmony
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `Link` передана ссылка, ведущая на внешний ресурс, контрол `Link` неявно добавит атрибут `rel` со значением необходимым для внешних ссылок, при этом не трогая атрибут `target`.
+
+Открытие ссылки в новой вкладке остаётся на усмотрение разработчика.
+
+```jsx harmony
+import { Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#e3071c" }}>в этой</span> вкладке
+  </Link>
+  <Link target="_blank" href="https://www.youtube.com/">
+    Откроется <span style={{ color: "#3f9726" }}>в новой</span> вкладке
+  </Link>
+</Gapped>
+```
+
+Ссылка в состоянии загрузки.
+
+**Поведение**:
+
+Если у ссылки есть иконка, она заменяется на спиннер.
+
+```jsx harmony
+import { Gapped, Button } from '@skbkontur/react-ui';
+import OkIcon from '@skbkontur/react-icons/Ok';
+
+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}>Без иконки</Link>
+  </Gapped>
+</Gapped>
+```
+
+Ссылка может иметь кастомное действие при нажатии.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
+```

package/components/Link/Link.mixins/Link.mixins.js

@@ -2,7 +2,7 @@ export var linkMixin = function linkMixin(hoverTextDecoration) {
   return "\n    border-radius: 1px;\n    outline: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: " + hoverTextDecoration + ";\n    }\n  ";
 };
 export var linkDisabledMixin = function linkDisabledMixin() {
-  return "\n    box-shadow: none;\n    cursor: default;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  ";
+  return "\n    box-shadow: none;\n    cursor: default;\n    pointer-events: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  ";
 };
 export var linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, activeColor) {
   return "\n    color: " + mainColor + ";\n\n    &:hover {\n      color: " + hoverColor + ";\n    }\n\n    &:active {\n      color: " + activeColor + ";\n    }\n  ";

package/components/Link/Link.mixins/Link.mixins.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM;;AAYP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;AASD,CAVM;;AAYP,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM","sourcesContent":["export const linkMixin = (hoverTextDecoration: string) => {\r\n  return `\r\n    border-radius: 1px;\r\n    outline: none;\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: ${hoverTextDecoration};\r\n    }\r\n  `;\r\n};\r\n\r\nexport const linkDisabledMixin = () => {\r\n  return `\r\n    box-shadow: none;\r\n    cursor: default;\r\n    text-decoration: none;\r\n\r\n    &:hover {\r\n      text-decoration: none;\r\n    }\r\n  `;\r\n};\r\n\r\nexport const linkUseColorsMixin = (mainColor: string, hoverColor: string, activeColor: string) => {\r\n  return `\r\n    color: ${mainColor};\r\n\r\n    &:hover {\r\n      color: ${hoverColor};\r\n    }\r\n\r\n    &:active {\r\n      color: ${activeColor};\r\n    }\r\n  `;\r\n};\r\n"]}
+{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"AAAA,OAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM;;AAYP,OAAO,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;;AAUD,CAXM;;AAaP,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM","sourcesContent":["export const linkMixin = (hoverTextDecoration: string) => {\n  return `\n    border-radius: 1px;\n    outline: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: ${hoverTextDecoration};\n    }\n  `;\n};\n\nexport const linkDisabledMixin = () => {\n  return `\n    box-shadow: none;\n    cursor: default;\n    pointer-events: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  `;\n};\n\nexport const linkUseColorsMixin = (mainColor: string, hoverColor: string, activeColor: string) => {\n  return `\n    color: ${mainColor};\n\n    &:hover {\n      color: ${hoverColor};\n    }\n\n    &:active {\n      color: ${activeColor};\n    }\n  `;\n};\n"]}

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

@@ -1,10 +1,10 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
 
-import { css, cssName, memoizeStyle } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 import { linkMixin, linkDisabledMixin, linkUseColorsMixin } from "../Link.mixins";
-var styles = {
+export var styles = memoizeStyle({
   root: function root(t) {
     return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      ", ";\n      position: relative;\n    "])), linkMixin(t.linkHoverTextDecoration));
   },
@@ -29,14 +29,16 @@ var styles = {
   useGrayed: function useGrayed(t) {
     return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      ", ";\n    "])), linkUseColorsMixin(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor));
   },
+  useGrayedFocus: function useGrayedFocus(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n    "])), t.linkDisabledColor);
+  },
   focus: function focus(t) {
-    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      ", "& {\n        text-decoration: ", ";\n      }\n      ", "& {\n        color: ", ";\n      }\n    "])), cssName(styles.root(t)), t.linkHoverTextDecoration, cssName(styles.useGrayed(t)), t.linkDisabledColor);
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      text-decoration: ", ";\n    "])), t.linkHoverTextDecoration);
   },
   disabled: function disabled(t) {
-    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      ", "& {\n        color: ", ";\n\n        &:hover {\n          color: ", ";\n        }\n      }\n    "])), linkDisabledMixin(), cssName(styles.root(t)), t.linkDisabledColor, t.linkDisabledColor);
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      ", ";\n\n      color: ", ";\n\n      &:hover {\n        color: ", ";\n      }\n    "])), linkDisabledMixin(), t.linkDisabledColor, t.linkDisabledColor);
   },
   icon: function icon(t) {
-    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      margin-right: ", ";\n    "])), t.linkIconMarginRight);
   }
-};
-export var jsStyles = memoizeStyle(styles);
+});

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.styles.ts"],"names":["css","cssName","memoizeStyle","linkMixin","linkDisabledMixin","linkUseColorsMixin","styles","root","t","linkHoverTextDecoration","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","arrow","useDefault","linkColor","linkHoverColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","useGrayed","linkDisabledColor","focus","disabled","icon","linkIconMarginRight","jsStyles"],"mappings":"0SAAA,SAASA,GAAT,EAAcC,OAAd,EAAuBC,YAAvB,QAA2C,2BAA3C;;;AAGA,SAASC,SAAT,EAAoBC,iBAApB,EAAuCC,kBAAvC,QAAiE,eAAjE;;AAEA,IAAMC,MAAM,GAAG;AACbC,EAAAA,IADa,gBACRC,CADQ,EACE;AACb,WAAOR,GAAP;AACIG,IAAAA,SAAS,CAACK,CAAC,CAACC,uBAAH,CADb;;;AAID,GANY;;AAQbC,EAAAA,MARa,kBAQNF,CARM,EAQI;AACf,WAAOR,GAAP;;AAEiBQ,IAAAA,CAAC,CAACG,oBAFnB;AAGkBH,IAAAA,CAAC,CAACI,kBAHpB;AAImBJ,IAAAA,CAAC,CAACI,kBAJrB;;AAMD,GAfY;;AAiBbC,EAAAA,YAjBa,0BAiBE;AACb,WAAOb,GAAP;;;AAGD,GArBY;;AAuBbc,EAAAA,KAvBa,mBAuBL;AACN,WAAOd,GAAP;;;;;;;;;AASD,GAjCY;;AAmCbe,EAAAA,UAnCa,sBAmCFP,CAnCE,EAmCQ;AACnB,WAAOR,GAAP;AACIK,IAAAA,kBAAkB,CAACG,CAAC,CAACQ,SAAH,EAAcR,CAAC,CAACS,cAAhB,EAAgCT,CAAC,CAACU,eAAlC,CADtB;;AAGD,GAvCY;;AAyCbC,EAAAA,UAzCa,sBAyCFX,CAzCE,EAyCQ;AACnB,WAAOR,GAAP;AACIK,IAAAA,kBAAkB,CAACG,CAAC,CAACY,gBAAH,EAAqBZ,CAAC,CAACa,qBAAvB,EAA8Cb,CAAC,CAACc,sBAAhD,CADtB;;AAGD,GA7CY;;AA+CbC,EAAAA,SA/Ca,qBA+CHf,CA/CG,EA+CO;AAClB,WAAOR,GAAP;AACIK,IAAAA,kBAAkB,CAACG,CAAC,CAACgB,eAAH,EAAoBhB,CAAC,CAACiB,oBAAtB,EAA4CjB,CAAC,CAACkB,qBAA9C,CADtB;;AAGD,GAnDY;;AAqDbC,EAAAA,SArDa,qBAqDHnB,CArDG,EAqDO;AAClB,WAAOR,GAAP;AACIK,IAAAA,kBAAkB,CAACG,CAAC,CAACoB,iBAAH,EAAsBpB,CAAC,CAACoB,iBAAxB,EAA2CpB,CAAC,CAACoB,iBAA7C,CADtB;;AAGD,GAzDY;;AA2DbC,EAAAA,KA3Da,iBA2DPrB,CA3DO,EA2DG;AACd,WAAOR,GAAP;AACIC,IAAAA,OAAO,CAACK,MAAM,CAACC,IAAP,CAAYC,CAAZ,CAAD,CADX;AAEuBA,IAAAA,CAAC,CAACC,uBAFzB;;AAIIR,IAAAA,OAAO,CAACK,MAAM,CAACqB,SAAP,CAAiBnB,CAAjB,CAAD,CAJX;AAKaA,IAAAA,CAAC,CAACoB,iBALf;;;AAQD,GApEY;;AAsEbE,EAAAA,QAtEa,oBAsEJtB,CAtEI,EAsEM;AACjB,WAAOR,GAAP;AACII,IAAAA,iBAAiB,EADrB;;AAGIH,IAAAA,OAAO,CAACK,MAAM,CAACC,IAAP,CAAYC,CAAZ,CAAD,CAHX;AAIaA,IAAAA,CAAC,CAACoB,iBAJf;;;AAOepB,IAAAA,CAAC,CAACoB,iBAPjB;;;;AAWD,GAlFY;;AAoFbG,EAAAA,IApFa,gBAoFRvB,CApFQ,EAoFE;AACb,WAAOR,GAAP;;AAEkBQ,IAAAA,CAAC,CAACwB,mBAFpB;;AAID,GAzFY,EAAf;;;AA4FA,OAAO,IAAMC,QAAQ,GAAG/B,YAAY,CAACI,MAAD,CAA7B","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\r\n\r\nconst styles = {\r\n  root(t: Theme) {\r\n    return css`\r\n      ${linkMixin(t.linkHoverTextDecoration)};\r\n      position: relative;\r\n    `;\r\n  },\r\n\r\n  button(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      line-height: ${t.linkButtonLineHeight};\r\n      padding-left: ${t.linkButtonPaddingX};\r\n      padding-right: ${t.linkButtonPaddingX};\r\n    `;\r\n  },\r\n\r\n  buttonOpened() {\r\n    return css`\r\n      background: #e1e1e1;\r\n    `;\r\n  },\r\n\r\n  arrow() {\r\n    return css`\r\n      border: 4px solid transparent;\r\n      border-bottom-width: 0;\r\n      border-top-color: #a0a0a0;\r\n      display: inline-block;\r\n      margin-bottom: 3px;\r\n      margin-left: 3px;\r\n      vertical-align: middle;\r\n    `;\r\n  },\r\n\r\n  useDefault(t: Theme) {\r\n    return css`\r\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\r\n    `;\r\n  },\r\n\r\n  useSuccess(t: Theme) {\r\n    return css`\r\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\r\n    `;\r\n  },\r\n\r\n  useDanger(t: Theme) {\r\n    return css`\r\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\r\n    `;\r\n  },\r\n\r\n  useGrayed(t: Theme) {\r\n    return css`\r\n      ${linkUseColorsMixin(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor)};\r\n    `;\r\n  },\r\n\r\n  focus(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.root(t))}& {\r\n        text-decoration: ${t.linkHoverTextDecoration};\r\n      }\r\n      ${cssName(styles.useGrayed(t))}& {\r\n        color: ${t.linkDisabledColor};\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled(t: Theme) {\r\n    return css`\r\n      ${linkDisabledMixin()};\r\n\r\n      ${cssName(styles.root(t))}& {\r\n        color: ${t.linkDisabledColor};\r\n\r\n        &:hover {\r\n          color: ${t.linkDisabledColor};\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  icon(t: Theme) {\r\n    return css`\r\n      display: inline-block;\r\n      margin-right: ${t.linkIconMarginRight};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Link.styles.ts"],"names":["css","memoizeStyle","linkMixin","linkDisabledMixin","linkUseColorsMixin","styles","root","t","linkHoverTextDecoration","button","linkButtonLineHeight","linkButtonPaddingX","buttonOpened","arrow","useDefault","linkColor","linkHoverColor","linkActiveColor","useSuccess","linkSuccessColor","linkSuccessHoverColor","linkSuccessActiveColor","useDanger","linkDangerColor","linkDangerHoverColor","linkDangerActiveColor","useGrayed","linkDisabledColor","useGrayedFocus","focus","disabled","icon","linkIconMarginRight"],"mappings":"6TAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,SAASC,SAAT,EAAoBC,iBAApB,EAAuCC,kBAAvC,QAAiE,eAAjE;;AAEA,OAAO,IAAMC,MAAM,GAAGJ,YAAY,CAAC;AACjCK,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOP,GAAP;AACIE,IAAAA,SAAS,CAACK,CAAC,CAACC,uBAAH,CADb;;;AAID,GANgC;;AAQjCC,EAAAA,MARiC,kBAQ1BF,CAR0B,EAQhB;AACf,WAAOP,GAAP;;AAEiBO,IAAAA,CAAC,CAACG,oBAFnB;AAGkBH,IAAAA,CAAC,CAACI,kBAHpB;AAImBJ,IAAAA,CAAC,CAACI,kBAJrB;;AAMD,GAfgC;;AAiBjCC,EAAAA,YAjBiC,0BAiBlB;AACb,WAAOZ,GAAP;;;AAGD,GArBgC;;AAuBjCa,EAAAA,KAvBiC,mBAuBzB;AACN,WAAOb,GAAP;;;;;;;;;AASD,GAjCgC;;AAmCjCc,EAAAA,UAnCiC,sBAmCtBP,CAnCsB,EAmCZ;AACnB,WAAOP,GAAP;AACII,IAAAA,kBAAkB,CAACG,CAAC,CAACQ,SAAH,EAAcR,CAAC,CAACS,cAAhB,EAAgCT,CAAC,CAACU,eAAlC,CADtB;;AAGD,GAvCgC;;AAyCjCC,EAAAA,UAzCiC,sBAyCtBX,CAzCsB,EAyCZ;AACnB,WAAOP,GAAP;AACII,IAAAA,kBAAkB,CAACG,CAAC,CAACY,gBAAH,EAAqBZ,CAAC,CAACa,qBAAvB,EAA8Cb,CAAC,CAACc,sBAAhD,CADtB;;AAGD,GA7CgC;;AA+CjCC,EAAAA,SA/CiC,qBA+CvBf,CA/CuB,EA+Cb;AAClB,WAAOP,GAAP;AACII,IAAAA,kBAAkB,CAACG,CAAC,CAACgB,eAAH,EAAoBhB,CAAC,CAACiB,oBAAtB,EAA4CjB,CAAC,CAACkB,qBAA9C,CADtB;;AAGD,GAnDgC;;AAqDjCC,EAAAA,SArDiC,qBAqDvBnB,CArDuB,EAqDb;AAClB,WAAOP,GAAP;AACII,IAAAA,kBAAkB,CAACG,CAAC,CAACoB,iBAAH,EAAsBpB,CAAC,CAACoB,iBAAxB,EAA2CpB,CAAC,CAACoB,iBAA7C,CADtB;;AAGD,GAzDgC;;AA2DjCC,EAAAA,cA3DiC,0BA2DlBrB,CA3DkB,EA2DR;AACvB,WAAOP,GAAP;AACWO,IAAAA,CAAC,CAACoB,iBADb;;AAGD,GA/DgC;;AAiEjCE,EAAAA,KAjEiC,iBAiE3BtB,CAjE2B,EAiEjB;AACd,WAAOP,GAAP;AACqBO,IAAAA,CAAC,CAACC,uBADvB;;AAGD,GArEgC;;AAuEjCsB,EAAAA,QAvEiC,oBAuExBvB,CAvEwB,EAuEd;AACjB,WAAOP,GAAP;AACIG,IAAAA,iBAAiB,EADrB;;AAGWI,IAAAA,CAAC,CAACoB,iBAHb;;;AAMapB,IAAAA,CAAC,CAACoB,iBANf;;;AASD,GAjFgC;;AAmFjCI,EAAAA,IAnFiC,gBAmF5BxB,CAnF4B,EAmFlB;AACb,WAAOP,GAAP;;AAEkBO,IAAAA,CAAC,CAACyB,mBAFpB;;AAID,GAxFgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nimport { linkMixin, linkDisabledMixin, linkUseColorsMixin } from './Link.mixins';\n\nexport const styles = memoizeStyle({\n  root(t: Theme) {\n    return css`\n      ${linkMixin(t.linkHoverTextDecoration)};\n      position: relative;\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() {\n    return css`\n      background: #e1e1e1;\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  useDefault(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkColor, t.linkHoverColor, t.linkActiveColor)};\n    `;\n  },\n\n  useSuccess(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkSuccessColor, t.linkSuccessHoverColor, t.linkSuccessActiveColor)};\n    `;\n  },\n\n  useDanger(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDangerColor, t.linkDangerHoverColor, t.linkDangerActiveColor)};\n    `;\n  },\n\n  useGrayed(t: Theme) {\n    return css`\n      ${linkUseColorsMixin(t.linkDisabledColor, t.linkDisabledColor, t.linkDisabledColor)};\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};\n\n      &:hover {\n        color: ${t.linkDisabledColor};\n      }\n    `;\n  },\n\n  icon(t: Theme) {\n    return css`\n      display: inline-block;\n      margin-right: ${t.linkIconMarginRight};\n    `;\n  },\n});\n"]}

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

@@ -1,5 +1,5 @@
 import { Theme } from '../../lib/theming/Theme';
-export declare const jsStyles: {
+export declare const styles: {
     root(t: Theme): string;
     button(t: Theme): string;
     buttonOpened(): string;
@@ -8,6 +8,7 @@ export declare const jsStyles: {
     useSuccess(t: Theme): string;
     useDanger(t: Theme): string;
     useGrayed(t: Theme): string;
+    useGrayedFocus(t: Theme): string;
     focus(t: Theme): string;
     disabled(t: Theme): string;
     icon(t: Theme): string;

package/components/Link/index/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from './Link';\r\n"]}
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,QAAd","sourcesContent":["export * from './Link';\n"]}

package/components/Loader/Loader/Loader.js

@@ -1,16 +1,19 @@
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import debounce from 'lodash.debounce';
 import * as LayoutEvents from "../../../lib/LayoutEvents";
 import { Spinner } from "../../Spinner";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { ZIndex } from "../../../internal/ZIndex";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { jsStyles } from "../Loader.styles";
-/**
- * DRAFT - лоадер-контейнер
+import { cx } from "../../../lib/theming/Emotion";
+import { isTestEnv } from "../../../lib/currentEnvironment";
+import { TaskWithDelayAndMinimalDuration } from "../../../lib/taskWithDelayAndMinimalDuration";
+import { getTabbableElements } from "../../../lib/dom/tabbableHelpers";
+import { styles } from "../Loader.styles";
+/**
+ * DRAFT - лоадер-контейнер
  */
 
 export var Loader = /*#__PURE__*/function (_React$Component) {
@@ -21,26 +24,33 @@ export var Loader = /*#__PURE__*/function (_React$Component) {
 
     _this = _React$Component.call(this, props) || this;
     _this.theme = void 0;
-    _this.containerNode = void 0;
+    _this.spinnerContainerNode = void 0;
+    _this.childrenContainerNode = void 0;
     _this.spinnerNode = void 0;
     _this.layoutEvents = void 0;
+    _this.spinnerTask = void 0;
+    _this.childrenObserver = void 0;
 
-    _this.wrapperRef = function (element) {
-      _this.containerNode = element;
+    _this.childrenRef = function (element) {
+      _this.childrenContainerNode = element;
+    };
+
+    _this.spinnerRef = function (element) {
+      _this.spinnerContainerNode = element;
     };
 
     _this.checkSpinnerPosition = function () {
-      if (!_this.containerNode) {
+      if (!_this.spinnerContainerNode) {
         return;
       }
 
-      var _this$containerNode$g = _this.containerNode.getBoundingClientRect(),
-          containerTop = _this$containerNode$g.top,
-          containerRight = _this$containerNode$g.right,
-          containerBottom = _this$containerNode$g.bottom,
-          containerLeft = _this$containerNode$g.left,
-          containerHeight = _this$containerNode$g.height,
-          containerWidth = _this$containerNode$g.width;
+      var _this$spinnerContaine = _this.spinnerContainerNode.getBoundingClientRect(),
+          containerTop = _this$spinnerContaine.top,
+          containerRight = _this$spinnerContaine.right,
+          containerBottom = _this$spinnerContaine.bottom,
+          containerLeft = _this$spinnerContaine.left,
+          containerHeight = _this$spinnerContaine.height,
+          containerWidth = _this$spinnerContaine.width;
 
       var windowHeight = window.innerHeight;
       var windowWidth = window.innerWidth; // Если контейнер не больше высоты и не шире окна,
@@ -103,11 +113,78 @@ export var Loader = /*#__PURE__*/function (_React$Component) {
       });
     };
 
-    _this.containerNode = null;
+    _this.disableChildrenFocus = function () {
+      if (!_this.childrenObserver) {
+        _this.makeObservable();
+      }
+
+      var tabbableElements = getTabbableElements(_this.childrenContainerNode);
+      tabbableElements.forEach(function (el) {
+        if (!el.hasAttribute('origin-tabindex')) {
+          el.setAttribute('origin-tabindex', el.tabIndex.toString());
+        }
+
+        el.tabIndex = -1;
+      });
+    };
+
+    _this.enableChildrenFocus = function () {
+      _this.makeUnobservable();
+
+      document.querySelectorAll('[origin-tabindex]').forEach(function (el) {
+        var _el$getAttribute;
+
+        el.setAttribute('tabindex', (_el$getAttribute = el.getAttribute('origin-tabindex')) != null ? _el$getAttribute : '0');
+        el.removeAttribute('origin-tabindex');
+      });
+    };
+
+    _this.makeObservable = function () {
+      var target = _this.childrenContainerNode;
+
+      if (!target) {
+        return;
+      }
+
+      var config = {
+        childList: true,
+        subtree: true
+      };
+      var observer = new MutationObserver(_this.disableChildrenFocus);
+      observer.observe(target, config);
+      _this.childrenObserver = observer;
+    };
+
+    _this.makeUnobservable = function () {
+      var _this$childrenObserve;
+
+      (_this$childrenObserve = _this.childrenObserver) == null ? void 0 : _this$childrenObserve.disconnect();
+      _this.childrenObserver = null;
+    };
+
+    _this.spinnerContainerNode = null;
+    _this.childrenContainerNode = null;
+    _this.childrenObserver = null;
     _this.spinnerNode = null;
     _this.state = {
-      isStickySpinner: false
+      isStickySpinner: false,
+      isSpinnerVisible: false,
+      isLoaderActive: false
     };
+    _this.spinnerTask = new TaskWithDelayAndMinimalDuration({
+      delayBeforeTaskStart: _this.props.delayBeforeSpinnerShow,
+      durationOfTask: _this.props.minimalDelayBeforeSpinnerHide,
+      taskStartCallback: function taskStartCallback() {
+        return _this.setState({
+          isSpinnerVisible: true
+        });
+      },
+      taskStopCallback: function taskStopCallback() {
+        return _this.setState({
+          isSpinnerVisible: false
+        });
+      }
+    });
     return _this;
   }
 
@@ -115,23 +192,70 @@ export var Loader = /*#__PURE__*/function (_React$Component) {
 
   _proto.componentDidMount = function componentDidMount() {
     this.checkSpinnerPosition();
+    this.props.active && this.spinnerTask.start();
     this.layoutEvents = LayoutEvents.addListener(debounce(this.checkSpinnerPosition, 10));
+
+    if (this.props.active) {
+      this.disableChildrenFocus();
+    }
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+  _proto.componentDidUpdate = function componentDidUpdate(prevProps, prevState) {
     var _this$props = this.props,
         component = _this$props.component,
-        active = _this$props.active;
+        active = _this$props.active,
+        delayBeforeSpinnerShow = _this$props.delayBeforeSpinnerShow,
+        minimalDelayBeforeSpinnerHide = _this$props.minimalDelayBeforeSpinnerHide;
+    var isLoaderActive = this.state.isLoaderActive;
 
     if (active && !prevProps.active || prevProps.component !== component) {
       this.checkSpinnerPosition();
     }
+
+    if (delayBeforeSpinnerShow !== prevProps.delayBeforeSpinnerShow || minimalDelayBeforeSpinnerHide !== prevProps.minimalDelayBeforeSpinnerHide) {
+      this.spinnerTask.update({
+        delayBeforeTaskStart: delayBeforeSpinnerShow,
+        durationOfTask: minimalDelayBeforeSpinnerHide
+      });
+    }
+
+    if (active !== prevProps.active) {
+      active ? this.spinnerTask.start() : this.spinnerTask.stop();
+    }
+
+    if (isLoaderActive !== prevState.isLoaderActive) {
+      if (isLoaderActive) {
+        this.disableChildrenFocus();
+      } else {
+        this.enableChildrenFocus();
+      }
+    }
   };
 
   _proto.componentWillUnmount = function componentWillUnmount() {
+    this.makeUnobservable();
+
     if (this.layoutEvents) {
       this.layoutEvents.remove();
     }
+
+    this.spinnerTask.clearTask();
+  };
+
+  Loader.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+    if (props.active && !state.isLoaderActive) {
+      return {
+        isLoaderActive: true
+      };
+    }
+
+    if (state.isLoaderActive && !(props.active || state.isSpinnerVisible)) {
+      return {
+        isLoaderActive: false
+      };
+    }
+
+    return state;
   };
 
   _proto.render = function render() {
@@ -144,37 +268,41 @@ export var Loader = /*#__PURE__*/function (_React$Component) {
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn;
+    var _cx;
 
     var _this$props2 = this.props,
-        active = _this$props2.active,
         type = _this$props2.type,
         caption = _this$props2.caption,
         component = _this$props2.component;
+    var isLoaderActive = this.state.isLoaderActive;
     return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.loader()
+      className: styles.loader(),
+      "data-tid": isLoaderActive ? 'Loader__Veil' : ''
     }, /*#__PURE__*/React.createElement(ZIndex, {
       priority: 'Loader',
-      applyZIndex: this.props.active,
-      coverChildren: this.props.active,
+      applyZIndex: isLoaderActive,
+      coverChildren: isLoaderActive,
       style: {
         height: '100%'
-      }
-    }, this.props.children), active && /*#__PURE__*/React.createElement(ZIndex, {
-      wrapperRef: this.wrapperRef,
+      },
+      wrapperRef: this.childrenRef
+    }, this.props.children), isLoaderActive && /*#__PURE__*/React.createElement(ZIndex, {
+      wrapperRef: this.spinnerRef,
       priority: 'Loader',
-      className: cn((_cn = {}, _cn[jsStyles.active(this.theme)] = active, _cn))
-    }, this.renderSpinner(type, caption, component))));
+      className: cx((_cx = {}, _cx[styles.active(this.theme)] = isLoaderActive, _cx))
+    }, this.state.isSpinnerVisible && this.renderSpinner(type, caption, component))));
   };
 
   _proto.renderSpinner = function renderSpinner(type, caption, component) {
-    var _this3 = this;
+    var _cx2,
+        _this3 = this;
 
     return /*#__PURE__*/React.createElement("span", {
-      className: this.state.isStickySpinner ? jsStyles.spinnerContainerSticky() : jsStyles.spinnerContainerCenter(),
+      "data-tid": 'Loader__Spinner',
+      className: cx(styles.spinnerContainer(), (_cx2 = {}, _cx2[styles.spinnerContainerSticky()] = this.state.isStickySpinner, _cx2)),
       style: this.state.spinnerStyle
     }, /*#__PURE__*/React.createElement("div", {
-      className: jsStyles.spinnerComponentWrapper(),
+      className: styles.spinnerComponentWrapper(),
       ref: function ref(element) {
         _this3.spinnerNode = element;
       }
@@ -189,33 +317,47 @@ export var Loader = /*#__PURE__*/function (_React$Component) {
 Loader.__KONTUR_REACT_UI__ = 'Loader';
 Loader.defaultProps = {
   type: Spinner.Types.normal,
-  active: false
+  active: false,
+  delayBeforeSpinnerShow: isTestEnv ? 0 : 300,
+  minimalDelayBeforeSpinnerHide: isTestEnv ? 0 : 1000
 };
 Loader.propTypes = {
-  /**
-  * показываем лоадер или нет
+  /**
+  * показываем лоадер или нет
   */
   active: PropTypes.bool,
 
-  /**
-  * Текст рядом с лоадером.
-  *
-  * @default  "Загрузка"
+  /**
+  * Текст рядом с лоадером.
+  *
+  * @default  "Загрузка"
   */
   caption: Spinner.propTypes.caption,
   component: PropTypes.node,
 
-  /**
-  * Класс для обертки
+  /**
+  * Класс для обертки
   */
   className: PropTypes.string,
 
-  /**
-  * Тип спиннера: mini, normal, big
-  *
-  * @default  normal
-  *
-  * Spinner.types - все доступные типы
+  /**
+  * Тип спиннера: mini, normal, big
+  *
+  * @default  normal
+  *
+  * Spinner.types - все доступные типы
+  */
+  type: PropTypes.oneOf(Object.keys(Spinner.Types)),
+
+  /**
+  * Время в миллисекундах для показа вуали без спиннера.
+  * @default 300
+  */
+  delayBeforeSpinnerShow: PropTypes.number,
+
+  /**
+  * Минимальное время в миллисекундах для показа спиннера
+  * @default 1000
   */
-  type: PropTypes.oneOf(Object.keys(Spinner.Types))
+  minimalDelayBeforeSpinnerHide: PropTypes.number
 };