@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/components/Link/Link.js

@@ -1,17 +1,24 @@
-"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"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.LinkDataTids = 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 _globalObject = require("@skbkontur/global-object");
 
 
 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 _rootNode = require("../../lib/rootNode");
+var _createPropsGetter = require("../../lib/createPropsGetter");
+var _ThemeFactory = require("../../lib/theming/ThemeFactory");
+var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
+var _client = require("../../lib/client");
+var _featureFlagsContext = require("../../lib/featureFlagsContext");
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
 
-var _Link = require("./Link.styles");var _excluded = ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel"];var _class, _class2, _temp;
+var _Link = require("./Link.styles");
+var _LinkIcon = require("./LinkIcon");var _excluded = ["disabled", "href", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "focused"];var _class, _class2, _temp;
 
 
 
@@ -60,12 +67,40 @@ var _Link = require("./Link.styles");var _excluded = ["disabled", "href", "icon"
 
 
 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+var LinkDataTids = {
+  root: 'Link__root' };exports.LinkDataTids = LinkDataTids;
+
+
+
+
 
 /**
  * Элемент ссылки из 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.
+Link = (0, _rootNode.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.
+
 
 
 
@@ -83,6 +118,9 @@ Link = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
+
+    getProps = (0, _createPropsGetter.createPropsGetter)(Link.defaultProps);_this.
+
     state = {
       focusedByTab: false };_this.
 
@@ -105,15 +143,30 @@ Link = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
 
 
 
-    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);
 
-      }
+
+
+
+
+
+
+    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 = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+      var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(_this.theme);
 
       var arrow = null;
       if (_button) {
@@ -125,43 +178,68 @@ Link = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
         rel = "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
       }
 
-      var focused = !disabled && _this.state.focusedByTab;
+      var isFocused = !disabled && (_this.state.focusedByTab || focused);
+
+      var leftIconElement = icon && /*#__PURE__*/_react.default.createElement(_LinkIcon.LinkIcon, { icon: icon, loading: loading, position: "left" });
+      var rightIconElement = rightIcon && /*#__PURE__*/
+      _react.default.createElement(_LinkIcon.LinkIcon, { hasBothIcons: !!icon && !!rightIcon, icon: rightIcon, loading: loading, position: "right" });
+
 
       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(_this.theme)] = !!_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)),
+        className: (0, _Emotion.cx)(
+        _Link.styles.useRoot(),
+        use === 'default' && _Link.styles.useDefault(_this.theme),
+        use === 'success' && _Link.styles.useSuccess(_this.theme),
+        use === 'danger' && _Link.styles.useDanger(_this.theme),
+        use === 'grayed' && _Link.styles.useGrayed(_this.theme),
+        !!_button && _Link.styles.button(_this.theme),
+        !!_buttonOpened && _Link.styles.buttonOpened(_this.theme),
+        _this.getLinkClassName(isFocused, Boolean(disabled || loading), _isTheme2022)),
 
         href: href,
         rel: rel,
-        onClick: _this._handleClick,
-        onFocus: _this._handleFocus,
-        onBlur: _this._handleBlur,
+        onClick: _this.handleClick,
+        onFocus: _this.handleFocus,
+        onBlur: _this.handleBlur,
         tabIndex: disabled || loading ? -1 : _this.props.tabIndex };
 
 
+      var child = _this.props.children;
+      if (_isTheme2022) {var _cx, _cx2;
+        // lineTextWrapper нужен для реализации transition у подчеркивания
+        child = /*#__PURE__*/
+        _react.default.createElement("span", {
+          className: (0, _Emotion.cx)(_Link.globalClasses.textWrapper, _Link.styles.lineTextWrapper(_this.theme), (_cx = {}, _cx[
+          _Link.styles.lineTextWrapperFocused(_this.theme)] = isFocused, _cx)) }, /*#__PURE__*/
+
+
+        _react.default.createElement("span", {
+          className: (0, _Emotion.cx)(_Link.globalClasses.text, (_cx2 = {}, _cx2[
+          _Link.styles.lineText(_this.theme)] = !_client.isIE11, _cx2[
+          _Link.styles.lineTextIE11(_this.theme)] = _client.isIE11, _cx2)) },
+
+
+        _this.props.children));
+
+
+
+      }
+
       return /*#__PURE__*/(
-        _react.default.createElement("a", (0, _extends2.default)({}, rest, linkProps),
-        iconElement,
-        _this.props.children,
+        _react.default.createElement(Component, (0, _extends2.default)({ "data-tid": LinkDataTids.root }, rest, linkProps, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })),
+        leftIconElement,
+        child,
+        rightIconElement,
         arrow));
 
 
     };_this.
 
-    _handleFocus = function (event) {
+    handleFocus = function () {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        requestAnimationFrame(function () {
+        _globalObject.globalObject.requestAnimationFrame == null ? void 0 : _globalObject.globalObject.requestAnimationFrame(function () {
           if (_keyListener.keyListener.isTabPressed) {
             _this.setState({ focusedByTab: true });
           }
@@ -169,16 +247,41 @@ Link = (0, _rootNodeDecorator.rootNode)(_class = (_temp = _class2 = /*#__PURE__*
       }
     };_this.
 
-    _handleBlur = function () {
+    handleBlur = function () {
       _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,loading = _this$props.loading;
+    handleClick = function (event) {
+      var _this$props = _this.props,onClick = _this$props.onClick,disabled = _this$props.disabled,loading = _this$props.loading;
+      var href = _this.getProps().href;
       if (!href) {
         event.preventDefault();
       }
       if (onClick && !disabled && !loading) {
         onClick(event);
       }
-    };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;
+    };return _this;}var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.linkFocusOutline = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).linkFocusOutline;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});});};_proto.
+
+  getLinkClassName = function getLinkClassName(focused, disabled, _isTheme2022) {
+    var _this$getProps = this.getProps(),use = _this$getProps.use;
+    var isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;
+    var isFocused = focused && !disabled;
+
+    return !isBorderBottom ?
+    (0, _Emotion.cx)(
+    _Link.styles.root(this.theme),
+    isFocused && _Link.styles.focus(this.theme),
+    disabled && _Link.styles.disabled(this.theme),
+    use === 'grayed' && focused && _Link.styles.useGrayedFocus(this.theme)) :
+
+    (0, _Emotion.cx)(
+    _Link.styles.lineRoot(),
+    disabled && _Link.styles.disabled(this.theme),
+    disabled && _isTheme2022 && (0, _ThemeHelpers.isDarkTheme)(this.theme) && _Link.styles.disabledDark22Theme(this.theme),
+    isFocused && use === 'default' && _Link.styles.lineFocus(this.theme),
+    isFocused && use === 'success' && _Link.styles.lineFocusSuccess(this.theme),
+    isFocused && use === 'danger' && _Link.styles.lineFocusDanger(this.theme),
+    isFocused && use === 'grayed' && _Link.styles.lineFocusGrayed(this.theme),
+    isFocused && _isTheme2022 && this.linkFocusOutline && _Link.styles.focus2022(this.theme));
+
+  };return Link;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.displayName = 'Link', _class2.propTypes = { disabled: _propTypes.default.bool, href: _propTypes.default.string, icon: _propTypes.default.node, use: _propTypes.default.oneOf(['default', 'success', 'danger', 'grayed']) }, _class2.defaultProps = { href: '', use: 'default', as: 'a' }, _temp)) || _class;exports.Link = Link;

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

@@ -1 +1 @@
-{"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(this.theme)]: !!_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"]}
+{"version":3,"sources":["Link.tsx"],"names":["LinkDataTids","root","Link","rootNode","getProps","defaultProps","state","focusedByTab","renderMain","props","disabled","href","icon","rightIcon","use","loading","_button","_buttonOpened","relOrigin","rel","Component","as","focused","rest","_isTheme2022","theme","arrow","styles","isFocused","leftIconElement","rightIconElement","linkProps","className","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","tabIndex","child","children","globalClasses","textWrapper","lineTextWrapper","lineTextWrapperFocused","text","lineText","isIE11","lineTextIE11","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","preventDefault","render","flags","linkFocusOutline","ThemeFactory","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","focus2022","React","__KONTUR_REACT_UI__","displayName","propTypes","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';\n\nimport { Override } from '../../typings/utility-types';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { cx } 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 { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from '../../lib/featureFlagsContext';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { globalClasses, styles } 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 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            <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      </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\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: 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={cx(globalClasses.textWrapper, styles.lineTextWrapper(this.theme), {\n            [styles.lineTextWrapperFocused(this.theme)]: isFocused,\n          })}\n        >\n          <span\n            className={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} {...getVisualStateDataAttributes({ disabled })}>\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\n    return !isBorderBottom\n      ? 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      : 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/cjs/components/Link/Link.md

@@ -21,9 +21,14 @@ import { Gapped } from '@skbkontur/react-ui';
 Пример ссылки с иконкой.
 
 ```jsx harmony
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { Gapped } from '@skbkontur/react-ui';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
-<Link icon={<OkIcon />}>Ссылка с иконкой</Link>
+<Gapped gap={20}>
+  <Link icon={<CheckAIcon16Light />}>Ссылка с иконкой слева</Link>
+  <Link icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>Ссылка с двумя иконками</Link>
+  <Link rightIcon={<CheckAIcon16Light />}>Ссылка с иконкой справа</Link>
+</Gapped>
 ```
 
 Пример ссылок ведущих на внешние ресурсы.
@@ -49,20 +54,20 @@ import { Gapped } from '@skbkontur/react-ui';
 
 Ссылка в состоянии загрузки.
 
-**Поведение**:
-
-Если у ссылки есть иконка, она заменяется на спиннер.
+**Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
 
 ```jsx harmony
 import { Gapped, Button } from '@skbkontur/react-ui';
-import OkIcon from '@skbkontur/react-icons/Ok';
+import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 
 const [isLoading, setIsLoading] = React.useState(false);
 
 <Gapped vertical gap={15}>
   <Button onClick={() => setIsLoading(!isLoading)}>{isLoading ? "Прекратить загрузку!" : "Начать загрузку!"}</Button>
   <Gapped gap={20}>
-    <Link loading={isLoading} icon={<OkIcon/>}>С иконкой</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />}>С иконкой слева</Link>
+    <Link loading={isLoading} icon={<CheckAIcon16Light />} rightIcon={<CheckAIcon16Light />}>С двумя иконками</Link>
+    <Link loading={isLoading} rightIcon={<CheckAIcon16Light />}>С иконкой справа</Link>
     <Link loading={isLoading}>Без иконки</Link>
   </Gapped>
 </Gapped>
@@ -75,3 +80,83 @@ 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/cjs/components/Link/Link.mixins.d.ts

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

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

@@ -1,4 +1,4 @@
-"use strict";exports.__esModule = true;exports.linkUseColorsMixin = exports.linkMixin = exports.linkDisabledMixin = void 0;var linkMixin = function linkMixin(hoverTextDecoration) {
+"use strict";exports.__esModule = true;exports.linkUseLineHovered = 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: " +
 
 
@@ -35,4 +35,11 @@ var linkUseColorsMixin = function linkUseColorsMixin(mainColor, hoverColor, acti
   activeColor + ";\n    }\n  ";
 
 
-};exports.linkUseColorsMixin = linkUseColorsMixin;
+};exports.linkUseColorsMixin = linkUseColorsMixin;
+
+var linkUseLineHovered = function linkUseLineHovered(linkLineHoverBorderBottomStyle) {
+  return "\n    animation: none !important;\n    border-bottom-style: " +
+
+  linkLineHoverBorderBottomStyle + ";\n  ";
+
+};exports.linkUseLineHovered = linkUseLineHovered;

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"sources":["Link.mixins.ts"],"names":["linkMixin","hoverTextDecoration","linkDisabledMixin","linkUseColorsMixin","mainColor","hoverColor","activeColor","linkUseLineHovered","linkLineHoverBorderBottomStyle"],"mappings":"wJAAO,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;;AAcA,IAAMC,kBAAkB,GAAG,SAArBA,kBAAqB,CAACC,8BAAD,EAA4C;AAC5E;;AAEyBA,EAAAA,8BAFzB;;AAID,CALM,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\nexport const linkUseLineHovered = (linkLineHoverBorderBottomStyle: string) => {\n  return `\n    animation: none !important;\n    border-bottom-style: ${linkLineHoverBorderBottomStyle};\n  `;\n};\n"]}

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

@@ -1,15 +1,33 @@
 import { Theme } from '../../lib/theming/Theme';
+export declare const globalClasses: {
+    textWrapper: string;
+    text: string;
+};
 export declare const styles: {
     root(t: Theme): string;
+    lineRoot(): string;
+    lineTextWrapper(t: Theme): string;
+    lineTextWrapperFocused(t: Theme): string;
+    lineText(t: Theme): string;
+    lineTextIE11(t: Theme): string;
+    lineFocus(t: Theme): string;
+    lineFocusSuccess(t: Theme): string;
+    lineFocusDanger(t: Theme): string;
+    lineFocusGrayed(t: Theme): string;
     button(t: Theme): string;
     buttonOpened(t: Theme): string;
     arrow(): string;
+    useRoot(): string;
     useDefault(t: Theme): string;
     useSuccess(t: Theme): string;
     useDanger(t: Theme): string;
     useGrayed(t: Theme): string;
     useGrayedFocus(t: Theme): string;
     focus(t: Theme): string;
+    focus2022(t: Theme): string;
     disabled(t: Theme): string;
-    icon(t: Theme): string;
+    disabledDark22Theme(t: Theme): string;
+    icon(): string;
+    iconLeft(t: Theme): string;
+    iconRight(t: Theme): string;
 };