@skbkontur/react-ui 0.0.0-4c5579465d → 0.0.0-4da47ece08

package/components/Kebab/Kebab.d.ts

@@ -3,9 +3,10 @@ import { PopupMenuProps } from '../../internal/PopupMenu';
 import { Nullable } from '../../typings/utility-types';
 import { PopupPositionsType } from '../../internal/Popup';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface KebabProps extends CommonProps, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'> {
+import { SizeProp } from '../../lib/types/props';
+export interface KebabProps extends Pick<AriaAttributes, 'aria-label'>, Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>, CommonProps {
     disabled?: boolean;
-    size?: 'small' | 'medium' | 'large';
+    size?: SizeProp;
     /**
      * Список позиций доступных для расположения выпадашки.
      *
@@ -39,6 +40,7 @@ export interface KebabState {
 declare type DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;
 export declare class Kebab extends React.Component<KebabProps, KebabState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {};
     static defaultProps: DefaultProps;
     private getProps;

package/components/Link/Link/Link.js

@@ -1,24 +1,28 @@
 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", "use", "loading", "_button", "_buttonOpened", "rel", "as", "focused"];
+var _excluded = ["disabled", "href", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "component", "focused", "error", "warning", "tabIndex"];
 
 var _class, _class2, _temp;
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import { globalObject } from '@skbkontur/global-object';
+import { resetButton } from "../../../lib/styles/Mixins";
 import { keyListener } from "../../../lib/events/keyListener";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { isExternalLink } from "../../../lib/utils";
-import { Spinner } from "../../Spinner";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
 import { isDarkTheme, isTheme2022 } from "../../../lib/theming/ThemeHelpers";
-import { globalThat } from "../../../lib/SSRSafe";
+import { isIE11 } from "../../../lib/client";
+import { ReactUIFeatureFlagsContext, getFullReactUIFlagsContext } from "../../../lib/featureFlagsContext";
+import { getVisualStateDataAttributes } from "../../../internal/CommonWrapper/utils/getVisualStateDataAttributes";
 import { globalClasses, styles } from "../Link.styles";
+import { LinkIcon } from "../LinkIcon";
+var LINK_DEFAULT_ELEMENT = 'a';
 export var LinkDataTids = {
   root: 'Link__root'
 };
@@ -42,34 +46,46 @@ var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
       focusedByTab: false
     };
 
+    _this.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" + (isExternalLink(href) ? ' noreferrer' : '');
+      }
+
+      return rel;
+    };
+
     _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,
+          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,
+          tabIndex = props.tabIndex,
           rest = _objectWithoutPropertiesLoose(props, _excluded);
 
       var _isTheme2022 = isTheme2022(_this.theme);
 
-      var iconElement = null;
-
-      if (icon) {
-        iconElement = /*#__PURE__*/React.createElement("span", {
-          className: styles.icon(_this.theme)
-        }, loading ? /*#__PURE__*/React.createElement(Spinner, {
-          caption: null,
-          dimmed: true,
-          inline: true
-        }) : icon);
-      }
-
+      var Root = component || as;
       var arrow = null;
 
       if (_button) {
@@ -78,40 +94,69 @@ var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
         });
       }
 
-      var rel = relOrigin;
-
-      if (typeof rel === 'undefined' && href) {
-        rel = "noopener" + (isExternalLink(href) ? ' noreferrer' : '');
-      }
-
       var isFocused = !disabled && (_this.state.focusedByTab || focused);
-      var linkProps = {
-        className: 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 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 nonInteractive = disabled || loading;
+      var linkOnlyProps = {
+        href: href || ''
+      };
+      var outlineNode = /*#__PURE__*/React.createElement("div", {
+        style: {
+          zIndex: -1
+        },
+        className: cx(styles.outline(_this.theme), warning && styles.outlineWarning(_this.theme), error && styles.outlineError(_this.theme))
+      });
+
+      var rootProps = _extends({
+        className: cx(styles.useRoot(), Root === 'button' && resetButton(), 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(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
+        }),
+        rel: _this.getRel({
+          href: href,
+          rel: rel
+        })
+      }, Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {});
+
       var child = _this.props.children;
 
       if (_isTheme2022) {
+        var _cx, _cx2; // lineTextWrapper нужен для реализации transition у подчеркивания
+
+
         child = /*#__PURE__*/React.createElement("span", {
-          className: cx(globalClasses.text, styles.lineText(_this.theme))
-        }, _this.props.children);
+          className: cx(globalClasses.textWrapper, styles.lineTextWrapper(_this.theme), (_cx = {}, _cx[styles.lineTextWrapperFocused(_this.theme)] = isFocused, _cx))
+        }, /*#__PURE__*/React.createElement("span", {
+          className: cx(globalClasses.text, (_cx2 = {}, _cx2[styles.lineText(_this.theme)] = !isIE11, _cx2[styles.lineTextIE11(_this.theme)] = isIE11, _cx2))
+        }, _this.props.children));
       }
 
-      return /*#__PURE__*/React.createElement(Component, _extends({
+      return /*#__PURE__*/React.createElement(Root, _extends({
         "data-tid": LinkDataTids.root
-      }, rest, linkProps), iconElement, child, arrow);
+      }, rest, rootProps, getVisualStateDataAttributes({
+        disabled: disabled
+      })), leftIconElement, outlineNode, child, rightIconElement, arrow);
     };
 
     _this.handleFocus = function () {
       if (!_this.props.disabled) {
         // focus event fires before keyDown eventlistener
         // so we should check tabPressed in async way
-        globalThat.requestAnimationFrame(function () {
+        globalObject.requestAnimationFrame == null ? void 0 : globalObject.requestAnimationFrame(function () {
           if (keyListener.isTabPressed) {
             _this.setState({
               focusedByTab: true
@@ -127,16 +172,29 @@ var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
       });
     };
 
-    _this.handleClick = function (event) {
+    _this.hasLocationProps = function () {
+      // we have to check for 'href' and 'to' props in case Root is anchor or react-router link
+      return Boolean(Object.prototype.hasOwnProperty.call(_this.props, 'href') || Object.prototype.hasOwnProperty.call(_this.props, 'to'));
+    };
+
+    _this.isRootElementAnchor = function () {
       var _this$props = _this.props,
-          onClick = _this$props.onClick,
-          disabled = _this$props.disabled,
-          loading = _this$props.loading;
+          component = _this$props.component,
+          as = _this$props.as;
+      var Root = component || as;
+      return Root === 'a';
+    };
 
-      var href = _this.getProps().href;
+    _this.handleClick = function (event) {
+      var _this$props2 = _this.props,
+          onClick = _this$props2.onClick,
+          disabled = _this$props2.disabled,
+          loading = _this$props2.loading;
+
+      var location = _this.hasLocationProps();
 
-      if (!href) {
-        event.preventDefault();
+      if (!location) {
+        _this.isRootElementAnchor() && event.preventDefault();
       }
 
       if (onClick && !disabled && !loading) {
@@ -152,11 +210,14 @@ var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
   _proto.render = function render() {
     var _this2 = this;
 
-    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);
+    return /*#__PURE__*/React.createElement(ReactUIFeatureFlagsContext.Consumer, null, function (flags) {
+      _this2.linkFocusOutline = getFullReactUIFlagsContext(flags).linkFocusOutline;
+      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);
+      });
     });
   };
 
@@ -166,17 +227,11 @@ var Link = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Co
 
     var isBorderBottom = parseInt(this.theme.linkLineBorderBottomWidth) > 0;
     var isFocused = focused && !disabled;
-    return !isBorderBottom ? cx(styles.root(this.theme), isFocused && styles.focus(this.theme), disabled && styles.disabled(this.theme), use === 'grayed' && focused && styles.useGrayedFocus(this.theme)) : 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));
+    return !isBorderBottom ? cx(styles.root(this.theme), isFocused && styles.focus(this.theme), disabled && styles.disabled(this.theme), use === 'grayed' && focused && styles.useGrayedFocus(this.theme)) : 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), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.propTypes = {
-  disabled: PropTypes.bool,
-  href: PropTypes.string,
-  icon: PropTypes.node,
-  use: PropTypes.oneOf(['default', 'success', 'danger', 'grayed'])
-}, _class2.defaultProps = {
-  href: '',
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Link', _class2.displayName = 'Link', _class2.defaultProps = {
   use: 'default',
-  as: 'a'
+  as: LINK_DEFAULT_ELEMENT
 }, _temp)) || _class;

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

@@ -1 +1 @@
-{"version":3,"sources":["Link.tsx"],"names":["React","PropTypes","keyListener","ThemeContext","isExternalLink","Spinner","CommonWrapper","cx","rootNode","createPropsGetter","ThemeFactory","isDarkTheme","isTheme2022","globalThat","globalClasses","styles","LinkDataTids","root","Link","getProps","defaultProps","state","focusedByTab","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","Component","as","focused","rest","_isTheme2022","theme","iconElement","arrow","isFocused","linkProps","className","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","tabIndex","child","children","text","lineText","requestAnimationFrame","isTabPressed","setState","event","preventDefault","render","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","__KONTUR_REACT_UI__","propTypes","bool","string","node","oneOf"],"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, ThemeIn } from '../../lib/theming/Theme';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { isExternalLink } from '../../lib/utils';\nimport { Spinner } from '../Spinner';\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 { globalThat } from '../../lib/SSRSafe';\n\nimport { globalClasses, 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         * Обычный объект с переменными темы.\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\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\n  public render(): JSX.Element {\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\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      href,\n      icon,\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 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 isFocused = !disabled && (this.state.focusedByTab || focused);\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      child = <span className={cx(globalClasses.text, styles.lineText(this.theme))}>{this.props.children}</span>;\n    }\n\n    return (\n      <Component data-tid={LinkDataTids.root} {...rest} {...linkProps}>\n        {iconElement}\n        {child}\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      globalThat.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        );\n  }\n}\n"]}
+{"version":3,"sources":["Link.tsx"],"names":["React","globalObject","resetButton","keyListener","ThemeContext","isExternalLink","CommonWrapper","cx","rootNode","createPropsGetter","ThemeFactory","isDarkTheme","isTheme2022","isIE11","ReactUIFeatureFlagsContext","getFullReactUIFlagsContext","getVisualStateDataAttributes","globalClasses","styles","LinkIcon","LINK_DEFAULT_ELEMENT","LinkDataTids","root","Link","getProps","defaultProps","state","focusedByTab","getTabIndex","nonInteractive","tabIndex","getRel","href","rel","renderMain","props","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","as","component","focused","error","warning","rest","_isTheme2022","theme","Root","arrow","isFocused","leftIconElement","rightIconElement","linkOnlyProps","outlineNode","zIndex","outline","outlineWarning","outlineError","rootProps","className","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","child","children","textWrapper","lineTextWrapper","lineTextWrapperFocused","text","lineText","lineTextIE11","requestAnimationFrame","isTabPressed","setState","hasLocationProps","Object","prototype","hasOwnProperty","call","isRootElementAnchor","event","location","preventDefault","render","flags","linkFocusOutline","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","focus2022","Component","__KONTUR_REACT_UI__","displayName"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ButtonLinkAllowedValues } from '../../typings/button-link';\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 extends CommonProps {\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   * Обычный объект с переменными темы.\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 ButtonLinkAllowedValues = 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 ButtonLinkAllowedValues = typeof LINK_DEFAULT_ELEMENT> = DefaultizedProps<\n  LinkProps<T>,\n  DefaultProps\n>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = 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      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      tabIndex,\n      ...rest\n    } = props;\n    const _isTheme2022 = isTheme2022(this.theme);\n    const Root = component || as;\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    };\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      rel: this.getRel({ href, rel }),\n      ...(Root === LINK_DEFAULT_ELEMENT ? linkOnlyProps : {}),\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 hasLocationProps = () => {\n    // we have to check for 'href' and 'to' props in case Root is anchor or react-router link\n    return Boolean(\n      Object.prototype.hasOwnProperty.call(this.props, 'href') ||\n        Object.prototype.hasOwnProperty.call(this.props, 'to'),\n    );\n  };\n\n  private isRootElementAnchor = () => {\n    const { component, as } = this.props;\n    const Root = component || as;\n    return Root === 'a';\n  };\n\n  private handleClick = (event: React.MouseEvent) => {\n    const { onClick, disabled, loading } = this.props;\n\n    const location = this.hasLocationProps();\n    if (!location) {\n      this.isRootElementAnchor() && 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/components/Link/Link.d.ts

@@ -1,21 +1,21 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Override } from '../../typings/utility-types';
+import { ButtonLinkAllowedValues } from '../../typings/button-link';
+import { PolymorphicPropsWithoutRef } from '../../typings/react-ref';
 import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
-export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttributes<HTMLAnchorElement>, {
+interface LinkInnerProps extends CommonProps {
     /**
      * Отключенное состояние.
      */
     disabled?: boolean;
     /**
-     * HTML-атрибут `href`.
+     * Добавляет ссылке иконку слева.
      */
-    href?: string;
+    icon?: React.ReactElement;
     /**
-     * Добавляет ссылке иконку.
+     * Добавляет ссылке иконку справа.
      */
-    icon?: React.ReactElement<any>;
+    rightIcon?: React.ReactElement;
     /**
      * Тема ссылки.
      */
@@ -36,10 +36,6 @@ export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttribu
      * Переводит ссылку в состояние загрузки.
      */
     loading?: boolean;
-    /**
-     * HTML-событие `onclick`.
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement>) => void;
     /**
      * Обычный объект с переменными темы.
      * Он будет объединён с темой из контекста.
@@ -54,35 +50,46 @@ export interface LinkProps extends CommonProps, Override<React.AnchorHTMLAttribu
      * @ignore
      */
     focused?: boolean;
-}> {
+    /**
+     * Состояние валидации при ошибке.
+     */
+    error?: boolean;
+    /**
+     * Состояние валидации при предупреждении.
+     */
+    warning?: boolean;
 }
+declare const LINK_DEFAULT_ELEMENT = "a";
+export declare type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_ELEMENT> = PolymorphicPropsWithoutRef<LinkInnerProps, C>;
 export interface LinkState {
     focusedByTab: boolean;
 }
 export declare const LinkDataTids: {
     readonly root: "Link__root";
 };
-declare type DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;
 /**
  * Элемент ссылки из HTML.
  */
-export declare class Link extends React.Component<LinkProps, LinkState> {
+export declare class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_ELEMENT> extends React.Component<LinkProps<C>, LinkState> {
     static __KONTUR_REACT_UI__: string;
-    static propTypes: {
-        disabled: PropTypes.Requireable<boolean>;
-        href: PropTypes.Requireable<string>;
-        icon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
-        use: PropTypes.Requireable<string>;
+    static displayName: string;
+    static defaultProps: {
+        use: string;
+        as: string;
     };
-    static defaultProps: DefaultProps;
     private getProps;
     state: LinkState;
     private theme;
     private setRootNode;
+    private linkFocusOutline?;
     render(): JSX.Element;
+    private getTabIndex;
+    private getRel;
     private renderMain;
     private handleFocus;
     private handleBlur;
+    private hasLocationProps;
+    private isRootElementAnchor;
     private handleClick;
     private getLinkClassName;
 }

package/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>
@@ -86,3 +91,93 @@ import { Link, Gapped } from '@skbkontur/react-ui';
   <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>
+```
+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>
+```