@skbkontur/react-ui 0.0.0-a25347e958 → 0.0.0-a2ba201dd3

package/cjs/components/Kebab/Kebab.js

@@ -1,6 +1,7 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.KebabDataTids = exports.Kebab = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIs = require("react-is");
+var _globalObject = require("@skbkontur/global-object");
 
 var _utils = require("../../lib/utils");
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -79,6 +80,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
 
 
 
+
     getProps = (0, _createPropsGetter.createPropsGetter)(Kebab.defaultProps);_this.
 
     state = {
@@ -213,7 +215,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
       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 });
           }
@@ -260,7 +262,7 @@ Kebab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/functio
     }
 
     return icon;
-  };return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = { onOpen: function onOpen() {return undefined;}, onClose: function onClose() {return undefined;}, positions: ['bottom left', 'bottom right', 'top left', 'top right'], size: 'small', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Kebab = Kebab;
+  };return Kebab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Kebab', _class2.displayName = 'Kebab', _class2.propTypes = {}, _class2.defaultProps = { onOpen: function onOpen() {return undefined;}, onClose: function onClose() {return undefined;}, positions: ['bottom left', 'bottom right', 'top left', 'top right'], size: 'small', disableAnimations: _currentEnvironment.isTestEnv }, _temp)) || _class;exports.Kebab = Kebab;
 
 
 Kebab.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["Kebab.tsx"],"names":["KebabDataTids","caption","Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","React","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\n\nimport { isKonturIcon } from '../../lib/utils';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { ButtonSize } from '../Button';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  disabled?: boolean;\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Список позиций доступных для расположения выпадашки.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          popupHasPin\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n          aria-label={this.props['aria-label']}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\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      requestAnimationFrame(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<ButtonSize, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}
+{"version":3,"sources":["Kebab.tsx"],"names":["KebabDataTids","caption","Kebab","rootNode","getProps","defaultProps","state","focusedByTab","anchor","listener","remove","undefined","renderCaption","captionProps","disabled","size","handleCaptionKeyDown","event","openMenu","handleCaptionClick","toggleMenu","handleFocus","handleBlur","styles","kebab","theme","kebabSmall","kebabMedium","kebabLarge","kebab2022","opened","focused","props","renderIcon2022","renderIcon","e","isKeyEnter","isKeySpace","isKeyArrowVertical","preventDefault","handleChangeMenuState","isOpened","restoreFocus","setState","globalObject","requestAnimationFrame","keyListener","isTabPressed","componentDidMount","LayoutEvents","addListener","componentWillUnmount","render","ThemeFactory","create","popupPinOffset","kebabPinOffset","popupMargin","kebabMargin","popupPinSize","kebabPinSize","menuScrollContainerContentWrapperPaddingY","menuLegacyPaddingY","renderMain","positions","disableAnimations","onOpen","onClose","setRootNode","preventIconsOffset","menuMaxHeight","popupMenuId","children","icon","iconsmall","iconmedium","iconlarge","sizes","small","parseInt","kebabIconSizeSmall","medium","kebabIconSizeMedium","large","kebabIconSizeLarge","React","cloneElement","color","kebabIconColor","Component","__KONTUR_REACT_UI__","displayName","propTypes","isTestEnv","PropTypes","node","bool","oneOfType","string","number","func"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport { isElement } from 'react-is';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { isKonturIcon } from '../../lib/utils';\nimport { isKeyArrowVertical, isKeyEnter, isKeySpace, someKeys } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { PopupMenu, PopupMenuCaptionProps, PopupMenuProps } from '../../internal/PopupMenu';\nimport { Nullable } from '../../typings/utility-types';\nimport { PopupPositionsType } from '../../internal/Popup';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { MenuKebabIcon } from '../../internal/icons/16px';\nimport { isTestEnv } from '../../lib/currentEnvironment';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { isTheme2022 } from '../../lib/theming/ThemeHelpers';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Kebab.styles';\nimport { KebabIcon } from './KebabIcon';\n\nexport interface KebabProps\n  extends Pick<AriaAttributes, 'aria-label'>,\n    Pick<PopupMenuProps, 'onOpen' | 'onClose' | 'popupMenuId' | 'preventIconsOffset'>,\n    CommonProps {\n  disabled?: boolean;\n  size?: SizeProp;\n  /**\n   * Список позиций доступных для расположения выпадашки.\n   *\n   * Если во всех позициях выпадашка вылезает за пределы `viewport`, будет использована первая из этого списка.\n   *\n   * **Возможные значения**: `top left`, `top center`, `top right`, `right top`, `right middle`, `right bottom`, `bottom left`, `bottom center`, `bottom right`, `left top`, `left middle`, `left bottom`\n   * @default ['bottom left', 'bottom right', 'top left', 'top right']\n   */\n  positions?: PopupPositionsType[];\n  menuMaxHeight?: number | string;\n  /**\n   * Не показывать анимацию\n   */\n  disableAnimations?: boolean;\n  /**\n   * Кастомная иконка\n   */\n  icon?: React.ReactNode;\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const KebabDataTids = {\n  caption: 'Kebab__caption',\n} as const;\n\nexport interface KebabState {\n  anchor: Nullable<HTMLElement>;\n  focusedByTab: boolean;\n}\n\ntype DefaultProps = Required<Pick<KebabProps, 'onOpen' | 'onClose' | 'positions' | 'size' | 'disableAnimations'>>;\n\n@rootNode\nexport class Kebab extends React.Component<KebabProps, KebabState> {\n  public static __KONTUR_REACT_UI__ = 'Kebab';\n  public static displayName = 'Kebab';\n\n  public static propTypes = {};\n\n  public static defaultProps: DefaultProps = {\n    onOpen: () => undefined,\n    onClose: () => undefined,\n    positions: ['bottom left', 'bottom right', 'top left', 'top right'],\n    size: 'small',\n    disableAnimations: isTestEnv,\n  };\n\n  private getProps = createPropsGetter(Kebab.defaultProps);\n\n  public state: KebabState = {\n    focusedByTab: false,\n    anchor: null,\n  };\n\n  private theme!: Theme;\n  private setRootNode!: TSetRootNode;\n\n  private listener: {\n    remove: () => void;\n  } = {\n    remove: () => undefined,\n  };\n\n  public componentDidMount() {\n    /** addListener'у нужен колбэк в аргумент */\n    this.listener = LayoutEvents.addListener(() => undefined);\n  }\n\n  public componentWillUnmount() {\n    this.listener.remove();\n  }\n\n  public render(): JSX.Element {\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <ThemeContext.Provider\n              value={ThemeFactory.create(\n                {\n                  popupPinOffset: theme.kebabPinOffset,\n                  popupMargin: theme.kebabMargin,\n                  popupPinSize: theme.kebabPinSize,\n                  menuScrollContainerContentWrapperPaddingY: theme.menuLegacyPaddingY,\n                },\n                theme,\n              )}\n            >\n              {this.renderMain()}\n            </ThemeContext.Provider>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private renderMain() {\n    const { disabled } = this.props;\n    const { positions, disableAnimations, onOpen, onClose } = this.getProps();\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <PopupMenu\n          popupHasPin\n          preventIconsOffset={this.props.preventIconsOffset}\n          positions={positions}\n          onChangeMenuState={this.handleChangeMenuState}\n          caption={this.renderCaption}\n          disableAnimations={disableAnimations}\n          menuMaxHeight={this.props.menuMaxHeight}\n          onOpen={onOpen}\n          onClose={onClose}\n          popupMenuId={this.props.popupMenuId}\n          aria-label={this.props['aria-label']}\n        >\n          {!disabled && this.props.children}\n        </PopupMenu>\n      </CommonWrapper>\n    );\n  }\n\n  private renderCaption = (captionProps: PopupMenuCaptionProps) => {\n    const { disabled, size } = this.getProps();\n    const handleCaptionKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n      if (!disabled) {\n        this.handleCaptionKeyDown(event, captionProps.openMenu);\n      }\n    };\n\n    const handleCaptionClick = () => {\n      if (!disabled) {\n        captionProps.toggleMenu();\n      }\n    };\n\n    return (\n      <span\n        role=\"button\"\n        data-tid={KebabDataTids.caption}\n        tabIndex={disabled ? -1 : 0}\n        onClick={handleCaptionClick}\n        onKeyDown={handleCaptionKeyDown}\n        onFocus={this.handleFocus}\n        onBlur={this.handleBlur}\n        className={cx(\n          styles.kebab(this.theme),\n          size === 'small' && styles.kebabSmall(this.theme),\n          size === 'medium' && styles.kebabMedium(this.theme),\n          size === 'large' && styles.kebabLarge(this.theme),\n          isTheme2022(this.theme) && styles.kebab2022(),\n          captionProps.opened && styles.opened(this.theme),\n          disabled && styles.disabled(),\n          this.state.focusedByTab && styles.focused(this.theme),\n        )}\n        aria-describedby={this.props['aria-describedby']}\n      >\n        {isTheme2022(this.theme) ? this.renderIcon2022() : this.renderIcon()}\n      </span>\n    );\n  };\n\n  private handleCaptionKeyDown = (\n    e: React.KeyboardEvent<HTMLDivElement>,\n    openMenu: PopupMenuCaptionProps['openMenu'],\n  ) => {\n    if (someKeys(isKeyEnter, isKeySpace, isKeyArrowVertical)(e)) {\n      e.preventDefault();\n      openMenu(true);\n    }\n  };\n\n  private handleChangeMenuState = (isOpened: boolean, restoreFocus: boolean): void => {\n    this.setState({\n      focusedByTab: !isOpened && restoreFocus,\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({\n      focusedByTab: false,\n    });\n  };\n\n  private renderIcon() {\n    const { size, icon = <MenuKebabIcon /> } = this.getProps();\n    return (\n      <div\n        className={cx({\n          [styles.icon(this.theme)]: true,\n          [styles.iconsmall(this.theme)]: size === 'small',\n          [styles.iconmedium(this.theme)]: size === 'medium',\n          [styles.iconlarge(this.theme)]: size === 'large',\n        })}\n      >\n        {icon}\n      </div>\n    );\n  }\n\n  private renderIcon2022() {\n    const { size, icon = <KebabIcon /> } = this.getProps();\n\n    if (isElement(icon) && isKonturIcon(icon)) {\n      const sizes: Record<SizeProp, number> = {\n        small: parseInt(this.theme.kebabIconSizeSmall),\n        medium: parseInt(this.theme.kebabIconSizeMedium),\n        large: parseInt(this.theme.kebabIconSizeLarge),\n      };\n\n      return React.cloneElement(icon, {\n        size: icon.props.size ?? sizes[size],\n        color: icon.props.color ?? this.theme.kebabIconColor,\n      });\n    }\n\n    return icon;\n  }\n}\n\nKebab.propTypes = {\n  children: PropTypes.node,\n  disabled: PropTypes.bool,\n  menuMaxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n\n  /**\n   * Размер кебаба small 14px | large 20px\n   */\n  size: PropTypes.string,\n\n  /**\n   * Коллбек, вызывающийся перед закрытием кебаба\n   */\n  onClose: PropTypes.func,\n\n  /**\n   * Коллбек, вызывающийся перед открытием кебаба\n   */\n  onOpen: PropTypes.func,\n};\n"]}

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

@@ -13,9 +13,13 @@ export interface LinkProps extends Pick<AriaAttributes, 'aria-label'>, CommonPro
      */
     href?: string;
     /**
-     * Добавляет ссылке иконку.
+     * Добавляет ссылке иконку слева.
      */
-    icon?: React.ReactElement<any>;
+    icon?: React.ReactElement;
+    /**
+     * Добавляет ссылке иконку справа.
+     */
+    rightIcon?: React.ReactElement;
     /**
      * Тема ссылки.
      */
@@ -68,6 +72,7 @@ declare type DefaultProps = Required<Pick<LinkProps, 'href' | 'use' | 'as'>>;
  */
 export declare class Link extends React.Component<LinkProps, LinkState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
     static propTypes: {
         disabled: PropTypes.Requireable<boolean>;
         href: PropTypes.Requireable<string>;

package/cjs/components/Link/Link.js

@@ -1,12 +1,12 @@
 "use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");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 _rootNode = require("../../lib/rootNode");
@@ -15,7 +15,12 @@ var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _ThemeHelpers = require("../../lib/theming/ThemeHelpers");
 var _client = require("../../lib/client");
 
-var _Link = require("./Link.styles");var _excluded = ["disabled", "href", "icon", "use", "loading", "_button", "_buttonOpened", "rel", "as", "focused"];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;
+
+
+
+
 
 
 
@@ -111,6 +116,7 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
+
     getProps = (0, _createPropsGetter.createPropsGetter)(Link.defaultProps);_this.
 
     state = {
@@ -148,15 +154,9 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
 
-      props.disabled,href = props.href,icon = props.icon,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 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);
 
-      }
+      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) {
@@ -170,6 +170,11 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
       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)(
         _Link.styles.useRoot(),
@@ -190,14 +195,18 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
 
 
       var child = _this.props.children;
-      if (_isTheme2022) {var _cx;
+      if (_isTheme2022) {var _cx, _cx2;
         // lineTextWrapper нужен для реализации transition у подчеркивания
         child = /*#__PURE__*/
-        _react.default.createElement("span", { className: (0, _Emotion.cx)(_Link.styles.lineTextWrapper(_this.theme)) }, /*#__PURE__*/
         _react.default.createElement("span", {
-          className: (0, _Emotion.cx)(_Link.globalClasses.text, (_cx = {}, _cx[
-          _Link.styles.lineText(_this.theme)] = !_client.isIE11, _cx[
-          _Link.styles.lineTextIE11(_this.theme)] = _client.isIE11, _cx)) },
+          className: (0, _Emotion.cx)(_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));
@@ -208,8 +217,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),
-        iconElement,
+        leftIconElement,
         child,
+        rightIconElement,
         arrow));
 
 
@@ -219,7 +229,7 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/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 });
           }
@@ -263,4 +273,4 @@ Link = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
     isFocused && use === 'danger' && _Link.styles.lineFocusDanger(this.theme),
     isFocused && use === 'grayed' && _Link.styles.lineFocusGrayed(this.theme));
 
-  };return Link;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = '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;
+  };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":["LinkDataTids","root","Link","rootNode","getProps","defaultProps","state","focusedByTab","renderMain","props","disabled","href","icon","use","loading","_button","_buttonOpened","relOrigin","rel","Component","as","focused","rest","_isTheme2022","theme","iconElement","styles","arrow","isFocused","linkProps","className","useRoot","useDefault","useSuccess","useDanger","useGrayed","button","buttonOpened","getLinkClassName","Boolean","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","tabIndex","child","children","lineTextWrapper","globalClasses","text","lineText","isIE11","lineTextIE11","requestAnimationFrame","keyListener","isTabPressed","setState","event","preventDefault","render","ThemeFactory","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","React","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","string","node","oneOf"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } 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 { isIE11 } from '../../lib/client';\n\nimport { globalClasses, styles } from './Link.styles';\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<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      // lineTextWrapper нужен для реализации transition у подчеркивания\n      child = (\n        <span className={cx(styles.lineTextWrapper(this.theme))}>\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}>\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      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":["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","lineTextWrapper","lineTextWrapperFocused","globalClasses","text","lineText","isIE11","lineTextIE11","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","preventDefault","render","ThemeFactory","create","setRootNode","isBorderBottom","parseInt","linkLineBorderBottomWidth","focus","useGrayedFocus","lineRoot","disabledDark22Theme","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","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';\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\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      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(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}>\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        );\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>
@@ -86,3 +91,72 @@ 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>
+```
+

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

@@ -6,6 +6,7 @@ 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;
@@ -24,5 +25,7 @@ export declare const styles: {
     focus(t: Theme): string;
     disabled(t: Theme): string;
     disabledDark22Theme(t: Theme): string;
-    icon(t: Theme): string;
+    icon(): string;
+    iconLeft(t: Theme): string;
+    iconRight(t: Theme): string;
 };