@skbkontur/react-ui 0.0.0-aaf2aabecb → 0.0.0-bb4cbfe9c6

package/cjs/components/Kebab/Kebab.styles.js

@@ -1,69 +1,68 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.jsStyles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");function _templateObject8() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: hidden;\n      border-radius: ", ";\n    "]);_templateObject8 = function _templateObject8() {return data;};return data;}function _templateObject7() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", " & {\n        margin-top: -5px;\n        margin-left: 0.5px;\n      }\n    "]);_templateObject7 = function _templateObject7() {return data;};return data;}function _templateObject6() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", " & {\n        margin-top: -2px;\n        margin-left: 0.5px;\n      }\n    "]);_templateObject6 = function _templateObject6() {return data;};return data;}function _templateObject5() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", " & {\n        margin-top: 1px;\n        margin-left: 0.8124px;\n      }\n    "]);_templateObject5 = function _templateObject5() {return data;};return data;}function _templateObject4() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        cursor: default;\n\n        &:hover {\n          background: none;\n        }\n      }\n    "]);_templateObject4 = function _templateObject4() {return data;};return data;}function _templateObject3() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        background: rgba(0, 0, 0, 0.09);\n        cursor: default;\n      }\n    "]);_templateObject3 = function _templateObject3() {return data;};return data;}function _templateObject2() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      ", "& {\n        background: rgba(0, 0, 0, 0.09);\n        border-color: ", ";\n      }\n    "]);_templateObject2 = function _templateObject2() {return data;};return data;}function _templateObject() {var data = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      border: 2px solid transparent;\n      box-sizing: border-box;\n      border-radius: 50%;\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n\n      &:hover {\n        background: rgba(0, 0, 0, 0.09);\n      }\n    "]);_templateObject = function _templateObject() {return data;};return data;}
-
-
-var styles = {
-  kebab: function kebab() {
-    return (0, _Emotion.css)(_templateObject());
-
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 
+var styles = (0, _Emotion.memoizeStyle)({
+  kebab: function kebab(t) {
+    return (0, _Emotion.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2.default)(["\n      display: inline-block;\n      text-align: center;\n      border: ", ";\n      box-sizing: border-box;\n      border-radius: ", ";\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ", ";\n\n      &:hover {\n        background: ", ";\n      }\n    "])),
 
 
+    t.kebabBorder,
 
+    t.kebabBorderRadius,
 
 
 
 
 
 
+    t.kebabBackground,
 
 
+    t.kebabBackgroundHover);
 
 
   },
 
   focused: function focused(t) {
-    return (0, _Emotion.css)(_templateObject2(),
-    (0, _Emotion.cssName)(styles.kebab()),
-
+    return (0, _Emotion.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", ";\n      border-color: ", ";\n    "])),
+    t.kebabBackgroundHover,
     t.borderColorFocus);
 
-
   },
 
-  opened: function opened() {
-    return (0, _Emotion.css)(_templateObject3(),
-    (0, _Emotion.cssName)(styles.kebab()));
-
-
+  opened: function opened(t) {
+    return (0, _Emotion.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2.default)(["\n      background: ", " !important; // override kebab:hover style\n      cursor: default;\n    "])),
+    t.kebabBackgroundHover);
 
 
   },
 
   disabled: function disabled() {
-    return (0, _Emotion.css)(_templateObject4(),
-    (0, _Emotion.cssName)(styles.kebab()));
+    return (0, _Emotion.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2.default)(["\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    "])));
 
 
 
 
 
 
+  },
+
+  icon: function icon() {
+    return (0, _Emotion.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2.default)(["\n      color: #757575;\n      line-height: 1;\n    "])));
+
+
 
   },
 
   iconsmall: function iconsmall() {
-    return (0, _Emotion.css)(_templateObject5(),
-    (0, _Emotion.cssName)(styles.kebab()));
-
+    return (0, _Emotion.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: 2px;\n      font-size: 14px;\n    "])));
 
 
 
   },
 
   iconmedium: function iconmedium() {
-    return (0, _Emotion.css)(_templateObject6(),
-    (0, _Emotion.cssName)(styles.kebab()));
+    return (0, _Emotion.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    "])));
 
 
 
@@ -71,8 +70,7 @@ var styles = {
   },
 
   iconlarge: function iconlarge() {
-    return (0, _Emotion.css)(_templateObject7(),
-    (0, _Emotion.cssName)(styles.kebab()));
+    return (0, _Emotion.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2.default)(["\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    "])));
 
 
 
@@ -80,11 +78,8 @@ var styles = {
   },
 
   menu: function menu(t) {
-    return (0, _Emotion.css)(_templateObject8(),
+    return (0, _Emotion.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2.default)(["\n      overflow: hidden;\n      border-radius: ", ";\n    "])),
 
     t.popupBorderRadius);
 
-  } };
-
-
-var jsStyles = (0, _Emotion.memoizeStyle)(styles);exports.jsStyles = jsStyles;
+  } });exports.styles = styles;

package/cjs/components/Kebab/Kebab.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.styles.ts"],"names":["styles","kebab","css","focused","t","borderColorFocus","opened","disabled","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius","jsStyles"],"mappings":"8QAAA,oD;;;AAGA,IAAMA,MAAM,GAAG;AACbC,EAAAA,KADa,mBACL;AACN,eAAOC,YAAP;;;;;;;;;;;;;;;;;AAiBD,GAnBY;;AAqBbC,EAAAA,OArBa,mBAqBLC,CArBK,EAqBK;AAChB,eAAOF,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;AAGoBG,IAAAA,CAAC,CAACC,gBAHtB;;;AAMD,GA5BY;;AA8BbC,EAAAA,MA9Ba,oBA8BJ;AACP,eAAOJ,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;;;;AAMD,GArCY;;AAuCbM,EAAAA,QAvCa,sBAuCF;AACT,eAAOL,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;;;;;;;AASD,GAjDY;;AAmDbO,EAAAA,SAnDa,uBAmDD;AACV,eAAON,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;;;;AAMD,GA1DY;;AA4DbQ,EAAAA,UA5Da,wBA4DA;AACX,eAAOP,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;;;;AAMD,GAnEY;;AAqEbS,EAAAA,SArEa,uBAqED;AACV,eAAOR,YAAP;AACI,0BAAQF,MAAM,CAACC,KAAP,EAAR,CADJ;;;;;AAMD,GA5EY;;AA8EbU,EAAAA,IA9Ea,gBA8ERP,CA9EQ,EA8EE;AACb,eAAOF,YAAP;;AAEmBE,IAAAA,CAAC,CAACQ,iBAFrB;;AAID,GAnFY,EAAf;;;AAsFO,IAAMC,QAAQ,GAAG,2BAAab,MAAb,CAAjB,C","sourcesContent":["import { css, cssName, memoizeStyle } from '../../lib/theming/Emotion';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nconst styles = {\r\n  kebab() {\r\n    return css`\r\n      display: inline-block;\r\n      text-align: center;\r\n      border: 2px solid transparent;\r\n      box-sizing: border-box;\r\n      border-radius: 50%;\r\n      user-select: none;\r\n      cursor: pointer;\r\n      outline: 0;\r\n      transition: background 0.12s ease-out;\r\n      width: 26px;\r\n      height: 26px;\r\n\r\n      &:hover {\r\n        background: rgba(0, 0, 0, 0.09);\r\n      }\r\n    `;\r\n  },\r\n\r\n  focused(t: Theme) {\r\n    return css`\r\n      ${cssName(styles.kebab())}& {\r\n        background: rgba(0, 0, 0, 0.09);\r\n        border-color: ${t.borderColorFocus};\r\n      }\r\n    `;\r\n  },\r\n\r\n  opened() {\r\n    return css`\r\n      ${cssName(styles.kebab())}& {\r\n        background: rgba(0, 0, 0, 0.09);\r\n        cursor: default;\r\n      }\r\n    `;\r\n  },\r\n\r\n  disabled() {\r\n    return css`\r\n      ${cssName(styles.kebab())}& {\r\n        cursor: default;\r\n\r\n        &:hover {\r\n          background: none;\r\n        }\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconsmall() {\r\n    return css`\r\n      ${cssName(styles.kebab())} & {\r\n        margin-top: 1px;\r\n        margin-left: 0.8124px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconmedium() {\r\n    return css`\r\n      ${cssName(styles.kebab())} & {\r\n        margin-top: -2px;\r\n        margin-left: 0.5px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  iconlarge() {\r\n    return css`\r\n      ${cssName(styles.kebab())} & {\r\n        margin-top: -5px;\r\n        margin-left: 0.5px;\r\n      }\r\n    `;\r\n  },\r\n\r\n  menu(t: Theme) {\r\n    return css`\r\n      overflow: hidden;\r\n      border-radius: ${t.popupBorderRadius};\r\n    `;\r\n  },\r\n};\r\n\r\nexport const jsStyles = memoizeStyle(styles);\r\n"]}
+{"version":3,"sources":["Kebab.styles.ts"],"names":["styles","kebab","t","css","kebabBorder","kebabBorderRadius","kebabBackground","kebabBackgroundHover","focused","borderColorFocus","opened","disabled","icon","iconsmall","iconmedium","iconlarge","menu","popupBorderRadius"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,KADiC,iBAC3BC,CAD2B,EACjB;AACd,eAAOC,YAAP;;;AAGYD,IAAAA,CAAC,CAACE,WAHd;;AAKmBF,IAAAA,CAAC,CAACG,iBALrB;;;;;;;AAYgBH,IAAAA,CAAC,CAACI,eAZlB;;;AAekBJ,IAAAA,CAAC,CAACK,oBAfpB;;;AAkBD,GApBgC;;AAsBjCC,EAAAA,OAtBiC,mBAsBzBN,CAtByB,EAsBf;AAChB,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,oBADlB;AAEkBL,IAAAA,CAAC,CAACO,gBAFpB;;AAID,GA3BgC;;AA6BjCC,EAAAA,MA7BiC,kBA6B1BR,CA7B0B,EA6BhB;AACf,eAAOC,YAAP;AACgBD,IAAAA,CAAC,CAACK,oBADlB;;;AAID,GAlCgC;;AAoCjCI,EAAAA,QApCiC,sBAoCtB;AACT,eAAOR,YAAP;;;;;;;AAOD,GA5CgC;;AA8CjCS,EAAAA,IA9CiC,kBA8C1B;AACL,eAAOT,YAAP;;;;AAID,GAnDgC;;AAqDjCU,EAAAA,SArDiC,uBAqDrB;AACV,eAAOV,YAAP;;;;AAID,GA1DgC;;AA4DjCW,EAAAA,UA5DiC,wBA4DpB;AACX,eAAOX,YAAP;;;;;AAKD,GAlEgC;;AAoEjCY,EAAAA,SApEiC,uBAoErB;AACV,eAAOZ,YAAP;;;;;AAKD,GA1EgC;;AA4EjCa,EAAAA,IA5EiC,gBA4E5Bd,CA5E4B,EA4ElB;AACb,eAAOC,YAAP;;AAEmBD,IAAAA,CAAC,CAACe,iBAFrB;;AAID,GAjFgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  kebab(t: Theme) {\n    return css`\n      display: inline-block;\n      text-align: center;\n      border: ${t.kebabBorder};\n      box-sizing: border-box;\n      border-radius: ${t.kebabBorderRadius};\n      user-select: none;\n      cursor: pointer;\n      outline: 0;\n      transition: background 0.12s ease-out;\n      width: 26px;\n      height: 26px;\n      background: ${t.kebabBackground};\n\n      &:hover {\n        background: ${t.kebabBackgroundHover};\n      }\n    `;\n  },\n\n  focused(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover};\n      border-color: ${t.borderColorFocus};\n    `;\n  },\n\n  opened(t: Theme) {\n    return css`\n      background: ${t.kebabBackgroundHover} !important; // override kebab:hover style\n      cursor: default;\n    `;\n  },\n\n  disabled() {\n    return css`\n      cursor: default;\n\n      &:hover {\n        background: none;\n      }\n    `;\n  },\n\n  icon() {\n    return css`\n      color: #757575;\n      line-height: 1;\n    `;\n  },\n\n  iconsmall() {\n    return css`\n      margin-top: 2px;\n      font-size: 14px;\n    `;\n  },\n\n  iconmedium() {\n    return css`\n      margin-top: -1px;\n      margin-left: 0.5px;\n      font-size: 18px;\n    `;\n  },\n\n  iconlarge() {\n    return css`\n      margin-top: -2px;\n      margin-left: 1px;\n      font-size: 20px;\n    `;\n  },\n\n  menu(t: Theme) {\n    return css`\n      overflow: hidden;\n      border-radius: ${t.popupBorderRadius};\n    `;\n  },\n});\n"]}

package/cjs/components/Kebab/__stories__/Kebab.items.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.items.tsx"],"names":["defaultItemsList","text","action","manyItemsList"],"mappings":"iGAAO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAD8B;;AAK9B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL8B;;AAS9B;AACED,EAAAA,IAAI,EAAE,KADR;AAEEC,EAAAA,MAAM,EAAE,KAFV,EAT8B,CAAzB,C;;;;AAeA,IAAMC,aAAa,GAAG;AAC3B;AACEF,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAD2B;;AAK3B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL2B;;AAS3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EAT2B;;AAa3B;AACED,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAb2B;;AAiB3B;AACED,EAAAA,IAAI,EAAE,UADR;AAEEC,EAAAA,MAAM,EAAE,UAFV,EAjB2B;;AAqB3B;AACED,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,MAAM,EAAE,SAFV,EArB2B;;AAyB3B;AACED,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAzB2B;;AA6B3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EA7B2B;;AAiC3B;AACED,EAAAA,IAAI,EAAE,YADR;AAEEC,EAAAA,MAAM,EAAE,YAFV,EAjC2B,CAAtB,C","sourcesContent":["export const defaultItemsList = [\r\n  {\r\n    text: 'First',\r\n    action: 'First',\r\n  },\r\n  {\r\n    text: 'Second',\r\n    action: 'Second',\r\n  },\r\n  {\r\n    text: 'Uno',\r\n    action: 'Uno',\r\n  },\r\n];\r\n\r\nexport const manyItemsList = [\r\n  {\r\n    text: 'Edit',\r\n    action: 'Edit',\r\n  },\r\n  {\r\n    text: 'Remove',\r\n    action: 'Remove',\r\n  },\r\n  {\r\n    text: 'Communicate',\r\n    action: 'Communicate',\r\n  },\r\n  {\r\n    text: 'Grade',\r\n    action: 'Grade',\r\n  },\r\n  {\r\n    text: 'Dispatch',\r\n    action: 'Dispatch',\r\n  },\r\n  {\r\n    text: 'Disable',\r\n    action: 'Disable',\r\n  },\r\n  {\r\n    text: 'Rate',\r\n    action: 'Rate',\r\n  },\r\n  {\r\n    text: 'Collaborate',\r\n    action: 'Collaborate',\r\n  },\r\n  {\r\n    text: 'Contribute',\r\n    action: 'Contribute',\r\n  },\r\n];\r\n"]}
+{"version":3,"sources":["Kebab.items.tsx"],"names":["defaultItemsList","text","action","manyItemsList"],"mappings":"iGAAO,IAAMA,gBAAgB,GAAG;AAC9B;AACEC,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAD8B;;AAK9B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL8B;;AAS9B;AACED,EAAAA,IAAI,EAAE,KADR;AAEEC,EAAAA,MAAM,EAAE,KAFV,EAT8B,CAAzB,C;;;;AAeA,IAAMC,aAAa,GAAG;AAC3B;AACEF,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAD2B;;AAK3B;AACED,EAAAA,IAAI,EAAE,QADR;AAEEC,EAAAA,MAAM,EAAE,QAFV,EAL2B;;AAS3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EAT2B;;AAa3B;AACED,EAAAA,IAAI,EAAE,OADR;AAEEC,EAAAA,MAAM,EAAE,OAFV,EAb2B;;AAiB3B;AACED,EAAAA,IAAI,EAAE,UADR;AAEEC,EAAAA,MAAM,EAAE,UAFV,EAjB2B;;AAqB3B;AACED,EAAAA,IAAI,EAAE,SADR;AAEEC,EAAAA,MAAM,EAAE,SAFV,EArB2B;;AAyB3B;AACED,EAAAA,IAAI,EAAE,MADR;AAEEC,EAAAA,MAAM,EAAE,MAFV,EAzB2B;;AA6B3B;AACED,EAAAA,IAAI,EAAE,aADR;AAEEC,EAAAA,MAAM,EAAE,aAFV,EA7B2B;;AAiC3B;AACED,EAAAA,IAAI,EAAE,YADR;AAEEC,EAAAA,MAAM,EAAE,YAFV,EAjC2B,CAAtB,C","sourcesContent":["export const defaultItemsList = [\n  {\n    text: 'First',\n    action: 'First',\n  },\n  {\n    text: 'Second',\n    action: 'Second',\n  },\n  {\n    text: 'Uno',\n    action: 'Uno',\n  },\n];\n\nexport const manyItemsList = [\n  {\n    text: 'Edit',\n    action: 'Edit',\n  },\n  {\n    text: 'Remove',\n    action: 'Remove',\n  },\n  {\n    text: 'Communicate',\n    action: 'Communicate',\n  },\n  {\n    text: 'Grade',\n    action: 'Grade',\n  },\n  {\n    text: 'Dispatch',\n    action: 'Dispatch',\n  },\n  {\n    text: 'Disable',\n    action: 'Disable',\n  },\n  {\n    text: 'Rate',\n    action: 'Rate',\n  },\n  {\n    text: 'Collaborate',\n    action: 'Collaborate',\n  },\n  {\n    text: 'Contribute',\n    action: 'Contribute',\n  },\n];\n"]}

package/cjs/components/Kebab/index.js

@@ -1 +1 @@
-"use strict";exports.__esModule = true;var _Kebab = require("./Kebab");Object.keys(_Kebab).forEach(function (key) {if (key === "default" || key === "__esModule") return;exports[key] = _Kebab[key];});
+"use strict";exports.__esModule = true;var _Kebab = require("./Kebab");Object.keys(_Kebab).forEach(function (key) {if (key === "default" || key === "__esModule") return;if (key in exports && exports[key] === _Kebab[key]) return;exports[key] = _Kebab[key];});

package/cjs/components/Kebab/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Kebab';\r\n"]}
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"uCAAA","sourcesContent":["export * from './Kebab';\n"]}

package/cjs/components/Link/Link.d.ts

@@ -1,29 +1,51 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-export declare type LinkProps = Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
-    /** Неактивное состояние */
+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;
-    /** onClick */
-    onClick?: (event?: React.MouseEvent<HTMLAnchorElement>) => void;
-}>;
+    /**
+     * Переводит ссылку в состояние загрузки.
+     */
+    loading?: boolean;
+    /**
+     * 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;
@@ -41,7 +63,7 @@ export declare class Link extends React.Component<LinkProps, LinkState> {
         focusedByTab: boolean;
     };
     private theme;
-    private getProps;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     private _handleFocus;

package/cjs/components/Link/Link.js

@@ -1,15 +1,17 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Link = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _classnames = _interopRequireDefault(require("classnames"));
 
-var _createPropsGetter = require("../../lib/createPropsGetter");
 
-var _tabListener = require("../../lib/events/tabListener");
+var _keyListener = require("../../lib/events/keyListener");
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _utils = require("../../lib/utils");
+var _Spinner = require("../Spinner");
+var _CommonWrapper = require("../../internal/CommonWrapper");
+var _Emotion = require("../../lib/theming/Emotion");
+var _rootNodeDecorator = require("../../lib/rootNode/rootNodeDecorator");
 
-var _Link = require("./Link.styles");
+var _Link = require("./Link.styles");var _excluded = ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel"];var _class, _class2, _temp;
 
 
 
@@ -34,13 +36,6 @@ var _Link = require("./Link.styles");
 
 
 
-/**
-                                       * Стандартная ссылка.
-                                       * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
-                                       * Все свойства передаются в элемент `<a>`.
-                                       * `className` и `style` не поддерживаются
-                                       */var
-Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Link, _React$Component);function Link() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -58,27 +53,6 @@ Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Li
 
 
 
-    state = {
-      focusedByTab: false };_this.
-
-
-    theme = void 0;_this.
-    getProps = (0, _createPropsGetter.createPropsGetter)(Link.defaultProps);_this.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -87,7 +61,11 @@ Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Li
 
 
 
+/**
+ * Элемент ссылки из HTML.
+ */var
 
+Link = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Link, _React$Component);function Link() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.
 
 
 
@@ -105,6 +83,8 @@ Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Li
 
 
 
+    state = {
+      focusedByTab: false };_this.
 
 
 
@@ -125,24 +105,64 @@ Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Li
 
 
 
+    renderMain = function (props) {var _cx;
+      var disabled = props.disabled,href = props.href,icon = props.icon,use = props.use,loading = props.loading,_button = props._button,_buttonOpened = props._buttonOpened,relOrigin = props.rel,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
 
+      var iconElement = null;
+      if (icon) {
+        iconElement = /*#__PURE__*/
+        _react.default.createElement("span", { className: _Link.styles.icon(_this.theme) }, loading ? /*#__PURE__*/_react.default.createElement(_Spinner.Spinner, { caption: null, dimmed: true, inline: true }) : icon);
 
+      }
 
+      var arrow = null;
+      if (_button) {
+        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _Link.styles.arrow() });
+      }
 
+      var rel = relOrigin;
+      if (typeof rel === 'undefined' && href) {
+        rel = "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
+      }
 
+      var focused = !disabled && _this.state.focusedByTab;
 
+      var linkProps = {
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Link.styles.root(_this.theme)] = true, _cx[
+        _Link.styles.button(_this.theme)] = !!_button, _cx[
+        _Link.styles.buttonOpened()] = !!_buttonOpened, _cx[
+        _Link.styles.useDefault(_this.theme)] = use === 'default', _cx[
+        _Link.styles.useSuccess(_this.theme)] = use === 'success', _cx[
+        _Link.styles.useDanger(_this.theme)] = use === 'danger', _cx[
+        _Link.styles.useGrayed(_this.theme)] = use === 'grayed', _cx[
+        _Link.styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _cx[
+        _Link.styles.focus(_this.theme)] = focused, _cx[
+        _Link.styles.disabled(_this.theme)] = !!disabled || !!loading, _cx)),
 
+        href: href,
+        rel: rel,
+        onClick: _this._handleClick,
+        onFocus: _this._handleFocus,
+        onBlur: _this._handleBlur,
+        tabIndex: disabled || loading ? -1 : _this.props.tabIndex };
 
 
+      return /*#__PURE__*/(
+        _react.default.createElement("a", (0, _extends2.default)({}, rest, linkProps),
+        iconElement,
+        _this.props.children,
+        arrow));
 
 
+    };_this.
 
     _handleFocus = function (event) {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (_tabListener.tabListener.isTabPressed) {
+        requestAnimationFrame(function () {
+          if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
         });
@@ -153,12 +173,12 @@ Link = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Li
       _this.setState({ focusedByTab: false });
     };_this.
 
-    _handleClick = function (event) {var _this$props =
-      _this.props,href = _this$props.href,onClick = _this$props.onClick,disabled = _this$props.disabled;
+    _handleClick = function (event) {
+      var _this$props = _this.props,href = _this$props.href,onClick = _this$props.onClick,disabled = _this$props.disabled,loading = _this$props.loading;
       if (!href) {
         event.preventDefault();
       }
-      if (onClick && !disabled) {
+      if (onClick && !disabled && !loading) {
         onClick(event);
       }
-    };return _this;}var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return _react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _cn;var _this$getProps = this.getProps(),disabled = _this$getProps.disabled,href = _this$getProps.href,icon = _this$getProps.icon,use = _this$getProps.use,_button = _this$getProps._button,_buttonOpened = _this$getProps._buttonOpened,className = _this$getProps.className,style = _this$getProps.style,relOrigin = _this$getProps.rel,rest = (0, _objectWithoutPropertiesLoose2.default)(_this$getProps, ["disabled", "href", "icon", "use", "_button", "_buttonOpened", "className", "style", "rel"]);var iconElement = null;if (icon) {iconElement = _react.default.createElement("span", { className: _Link.jsStyles.icon(this.theme) }, icon);}var arrow = null;if (_button) {arrow = _react.default.createElement("span", { className: _Link.jsStyles.arrow() });}var rel = relOrigin;if (typeof rel === 'undefined' && href) {rel = "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');}var props = { className: (0, _classnames.default)((_cn = {}, _cn[_Link.jsStyles.root(this.theme)] = true, _cn[_Link.jsStyles.disabled(this.theme)] = !!disabled, _cn[_Link.jsStyles.button()] = !!_button, _cn[_Link.jsStyles.buttonOpened()] = !!_buttonOpened, _cn[_Link.jsStyles.focus(this.theme)] = !disabled && this.state.focusedByTab, _cn[_Link.jsStyles.useDefault(this.theme)] = use === 'default', _cn[_Link.jsStyles.useSuccess(this.theme)] = use === 'success', _cn[_Link.jsStyles.useDanger(this.theme)] = use === 'danger', _cn[_Link.jsStyles.useGrayed(this.theme)] = use === 'grayed', _cn)), href: href, rel: rel, onClick: this._handleClick, onFocus: this._handleFocus, onBlur: this._handleBlur, tabIndex: this.props.tabIndex };if (disabled) {props.tabIndex = -1;}return _react.default.createElement("a", (0, _extends2.default)({}, rest, props), iconElement, this.props.children, arrow);};return Link;}(_react.default.Component);exports.Link = Link;Link.__KONTUR_REACT_UI__ = 'Link';Link.propTypes = { disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), use: _propTypes.default.oneOf(['default', 'success', 'danger', 'grayed']) };Link.defaultProps = { href: '', use: 'default' };
+    };return _this;}var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.props), _this2.renderMain);});};return Link;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.propTypes = { disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]), use: _propTypes.default.oneOf(['default', 'success', 'danger', 'grayed']) }, _class2.defaultProps = { href: '', use: 'default' }, _temp)) || _class;exports.Link = Link;

package/cjs/components/Link/Link.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["Link","state","focusedByTab","theme","getProps","defaultProps","_handleFocus","event","props","disabled","process","nextTick","tabListener","isTabPressed","setState","_handleBlur","_handleClick","href","onClick","preventDefault","render","renderMain","icon","use","_button","_buttonOpened","className","style","relOrigin","rel","rest","iconElement","jsStyles","arrow","root","button","buttonOpened","focus","useDefault","useSuccess","useDanger","useGrayed","onFocus","onBlur","tabIndex","children","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","oneOfType","node","oneOf"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { createPropsGetter } from '../../lib/createPropsGetter';\r\nimport { Override } from '../../typings/utility-types';\r\nimport { tabListener } from '../../lib/events/tabListener';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { isExternalLink } from '../../lib/utils';\r\n\r\nimport { jsStyles } from './Link.styles';\r\n\r\nexport type LinkProps = Override<\r\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\r\n  {\r\n    /** Неактивное состояние */\r\n    disabled?: boolean;\r\n    /** href */\r\n    href?: string;\r\n    /** Иконка */\r\n    icon?: React.ReactElement<any>;\r\n    /** Тип */\r\n    use?: 'default' | 'success' | 'danger' | 'grayed';\r\n    _button?: boolean;\r\n    _buttonOpened?: boolean;\r\n    tabIndex?: number;\r\n    /** onClick */\r\n    onClick?: (event?: React.MouseEvent<HTMLAnchorElement>) => void;\r\n  }\r\n>;\r\n\r\nexport interface LinkState {\r\n  focusedByTab: boolean;\r\n}\r\n\r\n/**\r\n * Стандартная ссылка.\r\n * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.\r\n * Все свойства передаются в элемент `<a>`.\r\n * `className` и `style` не поддерживаются\r\n */\r\nexport class Link extends React.Component<LinkProps, LinkState> {\r\n  public static __KONTUR_REACT_UI__ = 'Link';\r\n\r\n  public static propTypes = {\r\n    disabled: PropTypes.bool,\r\n\r\n    href: PropTypes.string,\r\n\r\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\r\n\r\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\r\n  };\r\n\r\n  public static defaultProps = {\r\n    href: '',\r\n    use: 'default',\r\n  };\r\n\r\n  public state = {\r\n    focusedByTab: false,\r\n  };\r\n\r\n  private theme!: Theme;\r\n  private getProps = createPropsGetter(Link.defaultProps);\r\n\r\n  public render(): JSX.Element {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const {\r\n      disabled,\r\n      href,\r\n      icon,\r\n      use,\r\n      _button,\r\n      _buttonOpened,\r\n      className,\r\n      style,\r\n      rel: relOrigin,\r\n      ...rest\r\n    } = this.getProps<LinkProps, Link>();\r\n\r\n    let iconElement = null;\r\n    if (icon) {\r\n      iconElement = <span className={jsStyles.icon(this.theme)}>{icon}</span>;\r\n    }\r\n\r\n    let arrow = null;\r\n    if (_button) {\r\n      arrow = <span className={jsStyles.arrow()} />;\r\n    }\r\n\r\n    let rel = relOrigin;\r\n    if (typeof rel === 'undefined' && href) {\r\n      rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\r\n    }\r\n\r\n    const props = {\r\n      className: cn({\r\n        [jsStyles.root(this.theme)]: true,\r\n        [jsStyles.disabled(this.theme)]: !!disabled,\r\n        [jsStyles.button()]: !!_button,\r\n        [jsStyles.buttonOpened()]: !!_buttonOpened,\r\n        [jsStyles.focus(this.theme)]: !disabled && this.state.focusedByTab,\r\n        [jsStyles.useDefault(this.theme)]: use === 'default',\r\n        [jsStyles.useSuccess(this.theme)]: use === 'success',\r\n        [jsStyles.useDanger(this.theme)]: use === 'danger',\r\n        [jsStyles.useGrayed(this.theme)]: use === 'grayed',\r\n      }),\r\n      href,\r\n      rel,\r\n      onClick: this._handleClick,\r\n      onFocus: this._handleFocus,\r\n      onBlur: this._handleBlur,\r\n      tabIndex: this.props.tabIndex,\r\n    };\r\n    if (disabled) {\r\n      props.tabIndex = -1;\r\n    }\r\n\r\n    return (\r\n      <a {...rest} {...props}>\r\n        {iconElement}\r\n        {this.props.children}\r\n        {arrow}\r\n      </a>\r\n    );\r\n  }\r\n\r\n  private _handleFocus = (event: React.FocusEvent<HTMLAnchorElement>) => {\r\n    if (!this.props.disabled) {\r\n      // focus event fires before keyDown eventlistener\r\n      // so we should check tabPressed in async way\r\n      process.nextTick(() => {\r\n        if (tabListener.isTabPressed) {\r\n          this.setState({ focusedByTab: true });\r\n        }\r\n      });\r\n    }\r\n  };\r\n\r\n  private _handleBlur = () => {\r\n    this.setState({ focusedByTab: false });\r\n  };\r\n\r\n  private _handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\r\n    const { href, onClick, disabled } = this.props;\r\n    if (!href) {\r\n      event.preventDefault();\r\n    }\r\n    if (onClick && !disabled) {\r\n      onClick(event);\r\n    }\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Link.tsx"],"names":["Link","rootNode","state","focusedByTab","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","rest","iconElement","styles","theme","arrow","focused","linkProps","className","root","button","buttonOpened","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","focus","onClick","_handleClick","onFocus","_handleFocus","onBlur","_handleBlur","tabIndex","children","event","requestAnimationFrame","keyListener","isTabPressed","setState","preventDefault","render","setRootNode","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","oneOfType","node","oneOf","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { Spinner } from '../Spinner';\nimport { CommonWrapper, CommonProps, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode/rootNodeDecorator';\n\nimport { styles } from './Link.styles';\n\nexport interface LinkProps\n  extends CommonProps,\n    Override<\n      React.AnchorHTMLAttributes<HTMLAnchorElement>,\n      {\n        /**\n         * Отключенное состояние.\n         */\n        disabled?: boolean;\n        /**\n         * HTML-атрибут `href`.\n         */\n        href?: string;\n        /**\n         * Добавляет ссылке иконку.\n         */\n        icon?: React.ReactElement<any>;\n        /**\n         * Тема ссылки.\n         */\n        use?: 'default' | 'success' | 'danger' | 'grayed';\n        /**\n         * @ignore\n         */\n        _button?: boolean;\n        /**\n         * @ignore\n         */\n        _buttonOpened?: boolean;\n        /**\n         * HTML-атрибут `tabindex`.\n         */\n        tabIndex?: number;\n        /**\n         * Переводит ссылку в состояние загрузки.\n         */\n        loading?: boolean;\n        /**\n         * HTML-событие `onclick`.\n         */\n        onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;\n      }\n    > {}\n\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link extends React.Component<LinkProps, LinkState> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n\n  public static propTypes = {\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),\n\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n  };\n\n  public static defaultProps = {\n    href: '',\n    use: 'default',\n  };\n\n  public state = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              {this.renderMain}\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<LinkProps>) => {\n    const { disabled, href, icon, use, loading, _button, _buttonOpened, rel: relOrigin, ...rest } = props;\n\n    let iconElement = null;\n    if (icon) {\n      iconElement = (\n        <span className={styles.icon(this.theme)}>{loading ? <Spinner caption={null} dimmed inline /> : icon}</span>\n      );\n    }\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\n    }\n\n    let rel = relOrigin;\n    if (typeof rel === 'undefined' && href) {\n      rel = `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n    }\n\n    const focused = !disabled && this.state.focusedByTab;\n\n    const linkProps = {\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened()]: !!_buttonOpened,\n        [styles.useDefault(this.theme)]: use === 'default',\n        [styles.useSuccess(this.theme)]: use === 'success',\n        [styles.useDanger(this.theme)]: use === 'danger',\n        [styles.useGrayed(this.theme)]: use === 'grayed',\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.focus(this.theme)]: focused,\n        [styles.disabled(this.theme)]: !!disabled || !!loading,\n      }),\n      href,\n      rel,\n      onClick: this._handleClick,\n      onFocus: this._handleFocus,\n      onBlur: this._handleBlur,\n      tabIndex: disabled || loading ? -1 : this.props.tabIndex,\n    };\n\n    return (\n      <a {...rest} {...linkProps}>\n        {iconElement}\n        {this.props.children}\n        {arrow}\n      </a>\n    );\n  };\n\n  private _handleFocus = (event: React.FocusEvent<HTMLAnchorElement>) => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private _handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private _handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n    const { href, onClick, disabled, loading } = this.props;\n    if (!href) {\n      event.preventDefault();\n    }\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n"]}

package/cjs/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/cjs/components/Link/Link.mixins.d.ts

@@ -1,3 +1,3 @@
-export declare const linkMixin: () => string;
+export declare const linkMixin: (hoverTextDecoration: string) => string;
 export declare const linkDisabledMixin: () => string;
 export declare const linkUseColorsMixin: (mainColor: string, hoverColor: string, activeColor: string) => string;

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

@@ -1,17 +1,18 @@
-"use strict";exports.__esModule = true;exports.linkUseColorsMixin = exports.linkDisabledMixin = exports.linkMixin = void 0;var linkMixin = function linkMixin() {
-  return "\n    border-radius: 1px;\n    outline: none;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: underline;\n    }\n  ";
-
+"use strict";exports.__esModule = true;exports.linkUseColorsMixin = exports.linkMixin = exports.linkDisabledMixin = void 0;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  ";
 
 
 };exports.linkMixin = linkMixin;
 
 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  ";
+
 
 
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor"],"mappings":"2HAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,GAAM;AAC7B;;;;;;;;;AASD,CAVM,C;;AAYA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;AASD,CAVM,C;;AAYA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM,C","sourcesContent":["export const linkMixin = () => {\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: underline;\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":"2HAAO,IAAMA,SAAS,GAAG,SAAZA,SAAY,CAACC,mBAAD,EAAiC;AACxD;;;;;;AAMuBA,EAAAA,mBANvB;;;AASD,CAVM,C;;AAYA,IAAMC,iBAAiB,GAAG,SAApBA,iBAAoB,GAAM;AACrC;;;;;;;;;;AAUD,CAXM,C;;AAaA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,SAAD,EAAoBC,UAApB,EAAwCC,WAAxC,EAAgE;AAChG;AACWF,EAAAA,SADX;;;AAIaC,EAAAA,UAJb;;;;AAQaC,EAAAA,WARb;;;AAWD,CAZM,C","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"]}