@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/components/Link/Link/Link.js

@@ -1,24 +1,34 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+var _excluded = ["disabled", "href", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "focused"];
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
+import { globalObject } from '@skbkontur/global-object';
+import { keyListener } from "../../../lib/events/keyListener";
+import { isExternalLink } from "../../../lib/utils";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
-import { tabListener } from "../../../lib/events/tabListener";
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+import { isDarkTheme, isTheme2022 } from "../../../lib/theming/ThemeHelpers";
+import { isIE11 } from "../../../lib/client";
+import { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from "../../../lib/featureFlagsContext";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { isExternalLink } from "../../../lib/utils";
-import { jsStyles } from "../Link.styles";
-/**
-                                           * Стандартная ссылка.
-                                           * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
-                                           * Все свойства передаются в элемент `<a>`.
-                                           * `className` и `style` не поддерживаются
-                                           */
-
-export var Link =
-/*#__PURE__*/
-function (_React$Component) {
+import { getStyles, globalClasses } from "../Link.styles";
+import { LinkIcon } from "../LinkIcon";
+export var LinkDataTids = {
+  root: 'Link__root'
+};
+export
+/**
+* Элемент ссылки из HTML.
+*/
+var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Link, _React$Component);
 
   function Link() {
@@ -29,18 +39,88 @@ function (_React$Component) {
     }
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.getProps = createPropsGetter(Link.defaultProps);
     _this.state = {
       focusedByTab: false
     };
-    _this.theme = void 0;
-    _this.getProps = createPropsGetter(Link.defaultProps);
 
-    _this._handleFocus = function (event) {
+    _this.renderMain = function (props) {
+      var disabled = props.disabled,
+          href = props.href,
+          icon = props.icon,
+          rightIcon = props.rightIcon,
+          use = props.use,
+          loading = props.loading,
+          _button = props._button,
+          _buttonOpened = props._buttonOpened,
+          relOrigin = props.rel,
+          Component = props.as,
+          _props$focused = props.focused,
+          focused = _props$focused === void 0 ? false : _props$focused,
+          rest = _objectWithoutPropertiesLoose(props, _excluded);
+
+      var _isTheme2022 = isTheme2022(_this.theme);
+
+      var styles = getStyles(_this.emotion);
+      var arrow = null;
+
+      if (_button) {
+        arrow = /*#__PURE__*/React.createElement("span", {
+          className: styles.arrow()
+        });
+      }
+
+      var rel = relOrigin;
+
+      if (typeof rel === 'undefined' && href) {
+        rel = "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
+      }
+
+      var isFocused = !disabled && (_this.state.focusedByTab || focused);
+      var leftIconElement = icon && /*#__PURE__*/React.createElement(LinkIcon, {
+        icon: icon,
+        loading: loading,
+        position: "left"
+      });
+      var rightIconElement = rightIcon && /*#__PURE__*/React.createElement(LinkIcon, {
+        hasBothIcons: !!icon && !!rightIcon,
+        icon: rightIcon,
+        loading: loading,
+        position: "right"
+      });
+      var linkProps = {
+        className: _this.emotion.cx(styles.useRoot(), use === 'default' && styles.useDefault(_this.theme), use === 'success' && styles.useSuccess(_this.theme), use === 'danger' && styles.useDanger(_this.theme), use === 'grayed' && styles.useGrayed(_this.theme), !!_button && styles.button(_this.theme), !!_buttonOpened && styles.buttonOpened(_this.theme), _this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022)),
+        href: href,
+        rel: rel,
+        onClick: _this.handleClick,
+        onFocus: _this.handleFocus,
+        onBlur: _this.handleBlur,
+        tabIndex: disabled || loading ? -1 : _this.props.tabIndex
+      };
+      var child = _this.props.children;
+
+      if (_isTheme2022) {
+        var _this$emotion$cx, _this$emotion$cx2; // lineTextWrapper нужен для реализации transition у подчеркивания
+
+
+        child = /*#__PURE__*/React.createElement("span", {
+          className: _this.emotion.cx(globalClasses.textWrapper, styles.lineTextWrapper(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[styles.lineTextWrapperFocused(_this.theme)] = isFocused, _this$emotion$cx))
+        }, /*#__PURE__*/React.createElement("span", {
+          className: _this.emotion.cx(globalClasses.text, (_this$emotion$cx2 = {}, _this$emotion$cx2[styles.lineText(_this.theme)] = !isIE11, _this$emotion$cx2[styles.lineTextIE11(_this.theme)] = isIE11, _this$emotion$cx2))
+        }, _this.props.children));
+      }
+
+      return /*#__PURE__*/React.createElement(Component, _extends({
+        "data-tid": LinkDataTids.root
+      }, rest, linkProps), leftIconElement, child, rightIconElement, arrow);
+    };
+
+    _this.handleFocus = function () {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        process.nextTick(function () {
-          if (tabListener.isTabPressed) {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
+          if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
             });
@@ -49,23 +129,25 @@ function (_React$Component) {
       }
     };
 
-    _this._handleBlur = function () {
+    _this.handleBlur = function () {
       _this.setState({
         focusedByTab: false
       });
     };
 
-    _this._handleClick = function (event) {
+    _this.handleClick = function (event) {
       var _this$props = _this.props,
-          href = _this$props.href,
           onClick = _this$props.onClick,
-          disabled = _this$props.disabled;
+          disabled = _this$props.disabled,
+          loading = _this$props.loading;
+
+      var href = _this.getProps().href;
 
       if (!href) {
         event.preventDefault();
       }
 
-      if (onClick && !disabled) {
+      if (onClick && !disabled && !loading) {
         onClick(event);
       }
     };
@@ -78,76 +160,38 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.linkFocusOutline = getFullReactUIFlagsContext(flags).linkFocusOutline;
+      return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+        _this2.emotion = emotion;
+        return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+          _this2.theme = _this2.props.theme ? ThemeFactory.create(_this2.props.theme, theme) : theme;
+          return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+            rootNodeRef: _this2.setRootNode
+          }, _this2.getProps()), _this2.renderMain);
+        });
+      });
     });
   };
 
-  _proto.renderMain = function renderMain() {
-    var _cn;
-
+  _proto.getLinkClassName = function getLinkClassName(focused, disabled, _isTheme2022) {
     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 = _objectWithoutPropertiesLoose(_this$getProps, ["disabled", "href", "icon", "use", "_button", "_buttonOpened", "className", "style", "rel"]);
-
-    var iconElement = null;
-
-    if (icon) {
-      iconElement = React.createElement("span", {
-        className: jsStyles.icon(this.theme)
-      }, icon);
-    }
-
-    var arrow = null;
-
-    if (_button) {
-      arrow = React.createElement("span", {
-        className: jsStyles.arrow()
-      });
-    }
-
-    var rel = relOrigin;
+        use = _this$getProps.use;
 
-    if (typeof rel === 'undefined' && href) {
-      rel = "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
-    }
-
-    var props = {
-      className: cn((_cn = {}, _cn[jsStyles.root(this.theme)] = true, _cn[jsStyles.disabled(this.theme)] = !!disabled, _cn[jsStyles.button(this.theme)] = !!_button, _cn[jsStyles.buttonOpened()] = !!_buttonOpened, _cn[jsStyles.focus(this.theme)] = !disabled && this.state.focusedByTab, _cn[jsStyles.useDefault(this.theme)] = use === 'default', _cn[jsStyles.useSuccess(this.theme)] = use === 'success', _cn[jsStyles.useDanger(this.theme)] = use === 'danger', _cn[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.createElement("a", _extends({}, rest, props), iconElement, this.props.children, arrow);
+    var isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;
+    var isFocused = focused && !disabled;
+    var styles = getStyles(this.emotion);
+    return !isBorderBottom ? this.emotion.cx(styles.root(this.theme), isFocused && styles.focus(this.theme), disabled && styles.disabled(this.theme), use === 'grayed' && focused && styles.useGrayedFocus(this.theme)) : this.emotion.cx(styles.lineRoot(), disabled && styles.disabled(this.theme), disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(this.theme), isFocused && use === 'default' && styles.lineFocus(this.theme), isFocused && use === 'success' && styles.lineFocusSuccess(this.theme), isFocused && use === 'danger' && styles.lineFocusDanger(this.theme), isFocused && use === 'grayed' && styles.lineFocusGrayed(this.theme), isFocused && _isTheme2022 && this.linkFocusOutline && styles.focus2022(this.theme));
   };
 
   return Link;
-}(React.Component);
-Link.__KONTUR_REACT_UI__ = 'Link';
-Link.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.displayName = 'Link', _class2.propTypes = {
   disabled: PropTypes.bool,
   href: PropTypes.string,
-  icon: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  icon: PropTypes.node,
   use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed'])
-};
-Link.defaultProps = {
+}, _class2.defaultProps = {
   href: '',
-  use: 'default'
-};
+  use: 'default',
+  as: 'a'
+}, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["React","PropTypes","cn","createPropsGetter","tabListener","ThemeContext","isExternalLink","jsStyles","Link","state","focusedByTab","theme","getProps","defaultProps","_handleFocus","event","props","disabled","process","nextTick","isTabPressed","setState","_handleBlur","_handleClick","href","onClick","preventDefault","render","renderMain","icon","use","_button","_buttonOpened","className","style","relOrigin","rel","rest","iconElement","arrow","root","button","buttonOpened","focus","useDefault","useSuccess","useDanger","useGrayed","onFocus","onBlur","tabIndex","children","Component","__KONTUR_REACT_UI__","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(this.theme)]: !!_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":["React","PropTypes","globalObject","keyListener","isExternalLink","CommonWrapper","EmotionConsumer","rootNode","createPropsGetter","ThemeFactory","isDarkTheme","isTheme2022","isIE11","getFullReactUIFlagsContext","ReactUIFeatureFlagsContext","ThemeContext","getStyles","globalClasses","LinkIcon","LinkDataTids","root","Link","getProps","defaultProps","state","focusedByTab","renderMain","props","disabled","href","icon","rightIcon","use","loading","_button","_buttonOpened","relOrigin","rel","Component","as","focused","rest","_isTheme2022","theme","styles","emotion","arrow","isFocused","leftIconElement","rightIconElement","linkProps","className","cx","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","tabIndex","child","children","textWrapper","lineTextWrapper","lineTextWrapperFocused","text","lineText","lineTextIE11","requestAnimationFrame","isTabPressed","setState","event","preventDefault","render","flags","linkFocusOutline","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","focus2022","__KONTUR_REACT_UI__","displayName","propTypes","bool","string","node","oneOf"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isExternalLink } from '../../lib/utils';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { isDarkTheme, isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { isIE11 } from '../../lib/client';\nimport { getFullReactUIFlagsContext, ReactUIFeatureFlagsContext } from '../../lib/featureFlagsContext';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles, globalClasses } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    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;\n        /**\n         * Добавляет ссылке иконку справа.\n         */\n        rightIcon?: React.ReactElement;\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         * Обычный объект с переменными темы.\n         * Он будет объединён с темой из контекста.\n         */\n        theme?: ThemeIn;\n        /**\n         * Компонент, используемый в качестве корневого узла.\n         * @ignore\n         */\n        as?: React.ElementType | keyof React.ReactHTML;\n        /**\n         * @ignore\n         */\n        focused?: boolean;\n      }\n    > {}\n\nexport interface LinkState {\n  focusedByTab: boolean;\n}\n\nexport const LinkDataTids = {\n  root: 'Link__root',\n} as const;\n\ntype DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link extends React.Component<LinkProps, LinkState> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n  public static displayName = 'Link';\n\n  public static propTypes = {\n    disabled: PropTypes.bool,\n\n    href: PropTypes.string,\n\n    icon: PropTypes.node,\n\n    use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed']),\n  };\n\n  public static defaultProps: DefaultProps = {\n    href: '',\n    use: 'default',\n    as: 'a',\n  };\n\n  private getProps = createPropsGetter(Link.defaultProps);\n\n  public state: LinkState = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n  private linkFocusOutline?: boolean;\n\n  public render(): JSX.Element {\n    return (\n      <ReactUIFeatureFlagsContext.Consumer>\n        {(flags) => {\n          this.linkFocusOutline = getFullReactUIFlagsContext(flags).linkFocusOutline;\n          return (\n            <EmotionConsumer>\n              {(emotion) => {\n                this.emotion = emotion;\n                return (\n                  <ThemeContext.Consumer>\n                    {(theme) => {\n                      this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n                      return (\n                        <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n                          {this.renderMain}\n                        </CommonWrapper>\n                      );\n                    }}\n                  </ThemeContext.Consumer>\n                );\n              }}\n            </EmotionConsumer>\n          );\n        }}\n      </ReactUIFeatureFlagsContext.Consumer>\n    );\n  }\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      href,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      rel: relOrigin,\n      as: Component,\n      focused = false,\n      ...rest\n    } = props;\n    const _isTheme2022 = isTheme2022(this.theme);\n    const styles = getStyles(this.emotion);\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 isFocused = !disabled && (this.state.focusedByTab || focused);\n\n    const leftIconElement = icon && <LinkIcon icon={icon} loading={loading} position=\"left\" />;\n    const rightIconElement = rightIcon && (\n      <LinkIcon hasBothIcons={!!icon && !!rightIcon} icon={rightIcon} loading={loading} position=\"right\" />\n    );\n\n    const linkProps = {\n      className: this.emotion.cx(\n        styles.useRoot(),\n        use === 'default' && styles.useDefault(this.theme),\n        use === 'success' && styles.useSuccess(this.theme),\n        use === 'danger' && styles.useDanger(this.theme),\n        use === 'grayed' && styles.useGrayed(this.theme),\n        !!_button && styles.button(this.theme),\n        !!_buttonOpened && styles.buttonOpened(this.theme),\n        this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022),\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    let child = this.props.children;\n    if (_isTheme2022) {\n      // lineTextWrapper нужен для реализации transition у подчеркивания\n      child = (\n        <span\n          className={this.emotion.cx(globalClasses.textWrapper, styles.lineTextWrapper(this.theme), {\n            [styles.lineTextWrapperFocused(this.theme)]: isFocused,\n          })}\n        >\n          <span\n            className={this.emotion.cx(globalClasses.text, {\n              [styles.lineText(this.theme)]: !isIE11,\n              [styles.lineTextIE11(this.theme)]: isIE11,\n            })}\n          >\n            {this.props.children}\n          </span>\n        </span>\n      );\n    }\n\n    return (\n      <Component data-tid={LinkDataTids.root} {...rest} {...linkProps}>\n        {leftIconElement}\n        {child}\n        {rightIconElement}\n        {arrow}\n      </Component>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.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 { onClick, disabled, loading } = this.props;\n    const href = this.getProps().href;\n    if (!href) {\n      event.preventDefault();\n    }\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n\n  private getLinkClassName(focused: boolean, disabled: boolean, _isTheme2022: boolean): string {\n    const { use } = this.getProps();\n    const isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;\n    const isFocused = focused && !disabled;\n    const styles = getStyles(this.emotion);\n\n    return !isBorderBottom\n      ? this.emotion.cx(\n          styles.root(this.theme),\n          isFocused && styles.focus(this.theme),\n          disabled && styles.disabled(this.theme),\n          use === 'grayed' && focused && styles.useGrayedFocus(this.theme),\n        )\n      : this.emotion.cx(\n          styles.lineRoot(),\n          disabled && styles.disabled(this.theme),\n          disabled && _isTheme2022 && isDarkTheme(this.theme) && styles.disabledDark22Theme(this.theme),\n          isFocused && use === 'default' && styles.lineFocus(this.theme),\n          isFocused && use === 'success' && styles.lineFocusSuccess(this.theme),\n          isFocused && use === 'danger' && styles.lineFocusDanger(this.theme),\n          isFocused && use === 'grayed' && styles.lineFocusGrayed(this.theme),\n          isFocused && _isTheme2022 && this.linkFocusOutline && styles.focus2022(this.theme),\n        );\n  }\n}\n"]}

package/components/Link/Link.d.ts

@@ -1,50 +1,96 @@
-import React from 'react';
+import React, { AriaAttributes } from 'react';
 import PropTypes from 'prop-types';
 import { Override } from '../../typings/utility-types';
-export declare type LinkProps = Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
-    /** Неактивное состояние */
+import { ThemeIn } from '../../lib/theming/Theme';
+import { CommonProps } from '../../internal/CommonWrapper';
+export interface LinkProps extends Pick<AriaAttributes, 'aria-label'>, CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
+    /**
+     * Отключенное состояние.
+     */
     disabled?: boolean;
-    /** href */
+    /**
+     * HTML-атрибут `href`.
+     */
     href?: string;
-    /** Иконка */
-    icon?: React.ReactElement<any>;
-    /** Тип */
+    /**
+     * Добавляет ссылке иконку слева.
+     */
+    icon?: React.ReactElement;
+    /**
+     * Добавляет ссылке иконку справа.
+     */
+    rightIcon?: React.ReactElement;
+    /**
+     * Тема ссылки.
+     */
     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;
+    /**
+     * Обычный объект с переменными темы.
+     * Он будет объединён с темой из контекста.
+     */
+    theme?: ThemeIn;
+    /**
+     * Компонент, используемый в качестве корневого узла.
+     * @ignore
+     */
+    as?: React.ElementType | keyof React.ReactHTML;
+    /**
+     * @ignore
+     */
+    focused?: boolean;
+}> {
+}
 export interface LinkState {
     focusedByTab: boolean;
 }
+export declare const LinkDataTids: {
+    readonly root: "Link__root";
+};
+declare type DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;
 /**
- * Стандартная ссылка.
- * Интерфес пропсов наследуется от `React.AnchorHTMLAttributes<HTMLAnchorElement>`.
- * Все свойства передаются в элемент `<a>`.
- * `className` и `style` не поддерживаются
+ * Элемент ссылки из HTML.
  */
 export declare class Link extends React.Component<LinkProps, LinkState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
+        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         use: PropTypes.Requireable<string>;
     };
-    static defaultProps: {
-        href: string;
-        use: string;
-    };
-    state: {
-        focusedByTab: boolean;
-    };
-    private theme;
+    static defaultProps: DefaultProps;
     private getProps;
+    state: LinkState;
+    private theme;
+    private emotion;
+    private setRootNode;
+    private linkFocusOutline?;
     render(): JSX.Element;
     private renderMain;
-    private _handleFocus;
-    private _handleBlur;
-    private _handleClick;
+    private handleFocus;
+    private handleBlur;
+    private handleClick;
+    private getLinkClassName;
 }
+export {};

package/components/Link/Link.md

@@ -1,11 +1,162 @@
-```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 { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
+
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
+```
+
+Пример ссылок ведущих на внешние ресурсы.
+
+_Примечание_:
+
+Если в контрол `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 { 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={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
+    <Link loading={isLoading}>Без иконки</Link>
+  </Gapped>
+</Gapped>
+```
+
+Ссылка может иметь кастомное действие при нажатии.
+
+```jsx harmony
+import { Toast } from '@skbkontur/react-ui';
+
+<Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
+```
+
+Пример ссылки с пропом `theme`
+
+```jsx harmony
+import { Link, Gapped } from '@skbkontur/react-ui';
+
+<Gapped>
+  <Link theme={{linkColor: '#C00000'}}>Ok</Link>
+  <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.mixins/Link.mixins.js

@@ -1,9 +1,12 @@
-export 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  ";
+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  ";
+};
+export var linkUseLineHovered = function linkUseLineHovered(linkLineHoverBorderBottomStyle) {
+  return "\n    animation: none !important;\n    border-bottom-style: " + linkLineHoverBorderBottomStyle + ";\n  ";
 };