@skbkontur/react-ui 0.0.0-95a1dbe516 → 0.0.0-9cd4422b72

package/cjs/components/Link/Link.js

@@ -1,11 +1,11 @@
 "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 _Mixins = require("../../lib/styles/Mixins");
 
 var _keyListener = require("../../lib/events/keyListener");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _utils = require("../../lib/utils");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -15,10 +15,10 @@ var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _client = require("../../lib/client");
 var _featureFlagsContext = require("../../lib/featureFlagsContext");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
+var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
 
 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;
+var _LinkIcon = require("./LinkIcon");var _excluded = ["disabled", "href", "hrefLang", "target", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "component", "focused", "error", "warning", "type", "tabIndex"];var _class, _class2, _temp;
 
 
 
@@ -85,21 +85,18 @@ var _LinkIcon = require("./LinkIcon");var _excluded = ["disabled", "href", "icon
 
 
 
+var LINK_DEFAULT_ELEMENT = 'a';
 
 
 
-var LinkDataTids = {
-  root: 'Link__root' };exports.LinkDataTids = LinkDataTids;
 
 
 
 
 
-/**
- * Элемент ссылки из HTML.
- */var
 
-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.
+var LinkDataTids = {
+  root: 'Link__root' };exports.LinkDataTids = LinkDataTids;
 
 
 
@@ -108,6 +105,11 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+/**
+ * Элемент ссылки из HTML.
+ */var
+
+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.
 
 
 
@@ -151,13 +153,23 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+    getTabIndex = function (_ref)
 
 
 
 
 
+    {var nonInteractive = _ref.nonInteractive,_ref$tabIndex = _ref.tabIndex,tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
+      return nonInteractive ? -1 : tabIndex;
+    };_this.
 
+    getRel = function (_ref2) {var href = _ref2.href,rel = _ref2.rel;
+      if (!rel && href) {
+        return "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
+      }
 
+      return rel;
+    };_this.
 
     renderMain = function (props) {
       var
@@ -173,18 +185,20 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
-      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);
+
+
+
+
+
+
+
+      props.disabled,href = props.href,hrefLang = props.hrefLang,target = props.target,icon = props.icon,rightIcon = props.rightIcon,use = props.use,loading = props.loading,_button = props._button,_buttonOpened = props._buttonOpened,rel = props.rel,as = props.as,component = props.component,_props$focused = props.focused,focused = _props$focused === void 0 ? false : _props$focused,error = props.error,warning = props.warning,type = props.type,tabIndex = props.tabIndex,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
       var _isTheme2022 = (0, _ThemeHelpers.isTheme2022)(_this.theme);
-      var styles = (0, _Link.getStyles)(_this.emotion);
+      var Root = component || as;
 
       var arrow = null;
       if (_button) {
-        arrow = /*#__PURE__*/_react.default.createElement("span", { className: styles.arrow() });
-      }
-
-      var rel = relOrigin;
-      if (typeof rel === 'undefined' && href) {
-        rel = "noopener" + ((0, _utils.isExternalLink)(href) ? ' noreferrer' : '');
+        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _Link.styles.arrow() });
       }
 
       var isFocused = !disabled && (_this.state.focusedByTab || focused);
@@ -193,39 +207,61 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       var rightIconElement = rightIcon && /*#__PURE__*/
       _react.default.createElement(_LinkIcon.LinkIcon, { hasBothIcons: !!icon && !!rightIcon, icon: rightIcon, loading: loading, position: "right" });
 
+      var nonInteractive = disabled || loading;
+
+      var linkOnlyProps = {
+        href: href || '',
+        hrefLang: hrefLang,
+        rel: _this.getRel({ href: href, rel: rel }),
+        target: target };
+
+
+      var buttonOnlyProps = { disabled: nonInteractive, type: type };
+
+      var outlineNode = /*#__PURE__*/
+      _react.default.createElement("div", {
+        style: { zIndex: -1 },
+        className: (0, _Emotion.cx)(
+        _Link.styles.outline(_this.theme),
+        warning && _Link.styles.outlineWarning(_this.theme),
+        error && _Link.styles.outlineError(_this.theme)) });
 
-      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,
+
+
+      var rootProps = (0, _extends2.default)({
+        className: (0, _Emotion.cx)(
+        _Link.styles.useRoot(),
+        Root === 'button' && (0, _Mixins.resetButton)(),
+        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(nonInteractive), _isTheme2022)),
+
         onClick: _this.handleClick,
         onFocus: _this.handleFocus,
         onBlur: _this.handleBlur,
-        tabIndex: disabled || loading ? -1 : _this.props.tabIndex };
+        tabIndex: _this.getTabIndex({ nonInteractive: nonInteractive, tabIndex: tabIndex }) },
+      Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {},
+      Root === 'button' ? buttonOnlyProps : {});
 
 
       var child = _this.props.children;
-      if (_isTheme2022) {var _this$emotion$cx, _this$emotion$cx2;
+      if (_isTheme2022) {var _cx, _cx2;
         // lineTextWrapper нужен для реализации transition у подчеркивания
         child = /*#__PURE__*/
         _react.default.createElement("span", {
-          className: _this.emotion.cx(_Link.globalClasses.textWrapper, styles.lineTextWrapper(_this.theme), (_this$emotion$cx = {}, _this$emotion$cx[
-          styles.lineTextWrapperFocused(_this.theme)] = isFocused, _this$emotion$cx)) }, /*#__PURE__*/
+          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: _this.emotion.cx(_Link.globalClasses.text, (_this$emotion$cx2 = {}, _this$emotion$cx2[
-          styles.lineText(_this.theme)] = !_client.isIE11, _this$emotion$cx2[
-          styles.lineTextIE11(_this.theme)] = _client.isIE11, _this$emotion$cx2)) },
+          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));
@@ -235,8 +271,9 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       }
 
       return /*#__PURE__*/(
-        _react.default.createElement(Component, (0, _extends2.default)({ "data-tid": LinkDataTids.root }, rest, linkProps),
+        _react.default.createElement(Root, (0, _extends2.default)({ "data-tid": LinkDataTids.root }, rest, rootProps, (0, _getVisualStateDataAttributes.getVisualStateDataAttributes)({ disabled: disabled })),
         leftIconElement,
+        outlineNode,
         child,
         rightIconElement,
         arrow));
@@ -261,37 +298,39 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
     };_this.
 
     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) {
+      var _ref3 = _this.props,onClick = _ref3.onClick,disabled = _ref3.disabled,loading = _ref3.loading,href = _ref3.href;
+      // we have to check for 'to' prop in case Root is react-router link
+      var to = Object.prototype.hasOwnProperty.call(_this.props, 'to');
+      var destination = href || to;
+
+      if (!destination) {
         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(_featureFlagsContext.ReactUIFeatureFlagsContext.Consumer, null, function (flags) {_this2.linkFocusOutline = (0, _featureFlagsContext.getFullReactUIFlagsContext)(flags).linkFocusOutline;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeConsumer, 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.
+    };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;
-    var styles = (0, _Link.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 && (0, _ThemeHelpers.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.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;
+    (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.defaultProps = { use: 'default', as: LINK_DEFAULT_ELEMENT }, _temp)) || _class;exports.Link = Link;

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

@@ -1 +1 @@
-{"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","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","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';\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 { ThemeConsumer } 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                  <ThemeConsumer>\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                  </ThemeConsumer>\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"]}
+{"version":3,"sources":["Link.tsx"],"names":["LINK_DEFAULT_ELEMENT","LinkDataTids","root","Link","rootNode","getProps","defaultProps","state","focusedByTab","getTabIndex","nonInteractive","tabIndex","getRel","href","rel","renderMain","props","disabled","hrefLang","target","icon","rightIcon","use","loading","_button","_buttonOpened","as","component","focused","error","warning","type","rest","_isTheme2022","theme","Root","arrow","styles","isFocused","leftIconElement","rightIconElement","linkOnlyProps","buttonOnlyProps","outlineNode","zIndex","outline","outlineWarning","outlineError","rootProps","className","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","child","children","globalClasses","textWrapper","lineTextWrapper","lineTextWrapperFocused","text","lineText","isIE11","lineTextIE11","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","to","Object","prototype","hasOwnProperty","call","destination","preventDefault","render","flags","linkFocusOutline","ThemeFactory","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","focus2022","React","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { resetButton } from '../../lib/styles/Mixins';\nimport { PolymorphicPropsWithoutRef } from '../../typings/react-ref';\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\ninterface LinkInnerProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    CommonProps,\n    Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'onBlur' | 'onFocus'> {\n  /**\n   * Отключенное состояние.\n   */\n  disabled?: boolean;\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   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n}\n\nconst LINK_DEFAULT_ELEMENT = 'a';\n\nexport type LinkProps<C extends React.ElementType = typeof LINK_DEFAULT_ELEMENT> = PolymorphicPropsWithoutRef<\n  LinkInnerProps,\n  C\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, 'use' | 'as'>>;\ntype DefaultizedLinkProps<T extends React.ElementType = typeof LINK_DEFAULT_ELEMENT> = DefaultizedProps<\n  LinkProps<T>,\n  DefaultProps\n>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends React.ElementType = typeof LINK_DEFAULT_ELEMENT> extends React.Component<\n  LinkProps<C>,\n  LinkState\n> {\n  public static __KONTUR_REACT_UI__ = 'Link';\n  public static displayName = 'Link';\n\n  public static defaultProps = {\n    use: 'default',\n    as: LINK_DEFAULT_ELEMENT,\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 getTabIndex = ({\n    nonInteractive,\n    tabIndex = 0,\n  }: {\n    nonInteractive: boolean | undefined;\n    tabIndex: number | undefined;\n  }) => {\n    return nonInteractive ? -1 : tabIndex;\n  };\n\n  private getRel = ({ href, rel }: Pick<LinkProps, 'href' | 'rel'>) => {\n    if (!rel && href) {\n      return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n    }\n\n    return rel;\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      href,\n      hrefLang,\n      target,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      rel,\n      as,\n      component,\n      focused = false,\n      error,\n      warning,\n      type,\n      tabIndex,\n      ...rest\n    } = props;\n    const _isTheme2022 = isTheme2022(this.theme);\n    const Root = (component || as) as React.ElementType;\n\n    let arrow = null;\n    if (_button) {\n      arrow = <span className={styles.arrow()} />;\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    const nonInteractive = disabled || loading;\n\n    const linkOnlyProps = {\n      href: href || '',\n      hrefLang,\n      rel: this.getRel({ href, rel }),\n      target,\n    };\n\n    const buttonOnlyProps = { disabled: nonInteractive, type };\n\n    const outlineNode = (\n      <div\n        style={{ zIndex: -1 }}\n        className={cx(\n          styles.outline(this.theme),\n          warning && styles.outlineWarning(this.theme),\n          error && styles.outlineError(this.theme),\n        )}\n      />\n    );\n\n    const rootProps = {\n      className: cx(\n        styles.useRoot(),\n        Root === 'button' && resetButton(),\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(nonInteractive), _isTheme2022),\n      ),\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n      ...(Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {}),\n      ...(Root === 'button' ? buttonOnlyProps : {}),\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      <Root data-tid={LinkDataTids.root} {...rest} {...rootProps} {...getVisualStateDataAttributes({ disabled })}>\n        {leftIconElement}\n        {outlineNode}\n        {child}\n        {rightIconElement}\n        {arrow}\n      </Root>\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, href } = this.props as LinkProps<'a'>;\n    // we have to check for 'to' prop in case Root is react-router link\n    const to = Object.prototype.hasOwnProperty.call(this.props, 'to');\n    const destination = href || to;\n\n    if (!destination) {\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

@@ -159,4 +159,25 @@ const renderExampleRow = (title, styles, index) => {
   {renderExampleRow('Изменение цвета ссылки', differentColorStyles)}
 </table>
 ```
+Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`.
 
+Cсылка принимает все пропы переданного в `component` компонента.
+
+Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+
+<Link component='button'>Кнопка, но выглядит как ссылка</Link>
+```
+
+Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
+
+```jsx harmony
+import { Link } from '@skbkontur/react-ui';
+import { Link as RouterLink, BrowserRouter } from 'react-router-dom';
+
+<BrowserRouter>
+  <Link to='/dashboard' component={RouterLink}>react-router-dom link</Link>
+</BrowserRouter>
+```

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

@@ -1,10 +1,9 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     textWrapper: string;
     text: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     lineRoot(): string;
     lineTextWrapper(t: Theme): string;
@@ -31,4 +30,7 @@ export declare const getStyles: (emotion: Emotion) => {
     icon(): string;
     iconLeft(t: Theme): string;
     iconRight(t: Theme): string;
+    outline(t: Theme): string;
+    outlineWarning(t: Theme): string;
+    outlineError(t: Theme): string;
 };