@skbkontur/react-ui 0.0.0-044e274f2c → 0.0.0-07d08325b0

package/cjs/components/Kebab/__creevey__/Kebab.creevey.mts

@@ -0,0 +1,147 @@
+import { story, kind, test } from 'creevey';
+import { Key } from 'selenium-webdriver';
+
+import { PopupMenuDataTids } from '../../../internal/PopupMenu/tids';
+import { delay } from '../../../lib/delay';
+const textAlignmentTests = () => {
+  test('opened', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: `[data-tid~="${PopupMenuDataTids.caption}"]` }))
+      .perform();
+    await delay(1000);
+    await context.matchImage(await context.takeScreenshot(), 'opened');
+  });
+};
+
+const kebabTests = () => {
+  test('plain', async (context) => {
+    await context.matchImage(await context.takeScreenshot(), 'plain');
+  });
+
+  test('hovered', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .move({
+        origin: context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }),
+      })
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'hovered');
+  });
+
+  test('clicked', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clicked');
+  });
+
+  test('clickedOnButton2ndTime', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
+      .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'clickedOnButton2ndTime');
+  });
+
+  test('tabPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'tabPress');
+  });
+
+  test('enterPress', async (context) => {
+    await context.webdriver
+      .actions({
+        bridge: true,
+      })
+      .sendKeys(Key.TAB)
+      .sendKeys(Key.ENTER)
+      .perform();
+    await context.matchImage(await context.takeScreenshot(), 'enterPress');
+  });
+};
+
+kind('Kebab', () => {
+  story('Small', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'clickedOnButton2ndTime'],
+        },
+      },
+    });
+
+    kebabTests();
+  });
+
+  story('Medium', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'clickedOnButton2ndTime'],
+        },
+      },
+    });
+
+    kebabTests();
+  });
+
+  story('Large', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: {
+        'hover does not work in chrome': {
+          in: ['chrome2022', 'chrome2022Dark'],
+          tests: ['hovered', 'clickedOnButton2ndTime'],
+        },
+      },
+    });
+
+    kebabTests();
+  });
+
+  story('MobileExampleWithHorizontalPadding', ({ setStoryParameters }) => {
+    setStoryParameters({ captureElement: null });
+
+    test('opened', async (context) => {
+      await context.webdriver
+        .actions({ bridge: true })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Kebab"]' }))
+        .perform();
+      await delay(200);
+      await context.webdriver
+        .actions({ bridge: true })
+        .move({ origin: context.webdriver.findElement({ css: '[data-comp-name~="MenuItem"]' }) })
+        .perform();
+      await delay(1000);
+      await context.matchImage(await context.takeScreenshot(), 'opened');
+    });
+  });
+  story('WithItemsAndIcons', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+
+  story('WithItemsAndIconsWithoutTextAlignment', ({ setStoryParameters }) => {
+    setStoryParameters({ skip: { 'themes dont affect logic': { in: /^(?!\bchrome2022\b)/ } } });
+
+    textAlignmentTests();
+  });
+});

package/cjs/components/Kebab/__docs__/Kebab.mdx

@@ -0,0 +1,28 @@
+import * as KebabStories from './Kebab.docs.stories.tsx';
+import { Primary, ArgTypes, Stories, Description } from '@storybook/blocks';
+import { Meta } from '../../../.storybook/Meta';
+
+<Meta of={KebabStories} />
+
+# Kebab
+
+[Компонент в Контур.Гайдах](https://guides.kontur.ru/components/actions/kebab-menu/)
+
+[Компонент в Figma](https://www.figma.com/file/87ScqxPzJpF9DcVBNYWOjM/%E2%9A%A1-Kontur-UI-Modern-Layout?node-id=230%3A2540)
+
+<Description />
+
+## Базовый пример
+
+<Primary />
+
+## Пропы
+
+<details>
+  <summary>Открыть таблицу с пропами</summary>
+  <ArgTypes />
+</details>
+
+## Примеры использования
+
+<Stories title="" includePrimary={false} />

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

@@ -4,54 +4,30 @@ import { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-componen
 import { ThemeIn } from '../../lib/theming/Theme';
 import { CommonProps } from '../../internal/CommonWrapper';
 export interface LinkInnerProps extends CommonProps {
-    /**
-     * Отключенное состояние.
-     */
+    /** Делает компонент недоступным. */
     disabled?: boolean;
-    /**
-     * Добавляет ссылке иконку слева.
-     */
+    /** Добавляет иконку слева. */
     icon?: React.ReactElement;
-    /**
-     * Добавляет ссылке иконку справа.
-     */
+    /** Добавляет иконку справа. */
     rightIcon?: React.ReactElement;
-    /**
-     * Тема ссылки.
-     */
+    /** Задает тему ссылки. */
     use?: 'default' | 'success' | 'danger' | 'grayed';
-    /**
-     * @ignore
-     */
+    /** @ignore */
     _button?: boolean;
-    /**
-     * @ignore
-     */
+    /** @ignore */
     _buttonOpened?: boolean;
-    /**
-     * HTML-атрибут `tabindex`.
-     */
+    /** Задает HTML-атрибут `tabindex`. */
     tabIndex?: number;
-    /**
-     * Переводит ссылку в состояние загрузки.
-     */
+    /** Переводит кнопку в состояние загрузки. */
     loading?: boolean;
-    /**
-     * Обычный объект с переменными темы.
-     * Он будет объединён с темой из контекста.
-     */
+    /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */
     theme?: ThemeIn;
-    /**
-     * @ignore
-     */
+    /** Задает состояние фокуса.
+     * @ignore */
     focused?: boolean;
-    /**
-     * Состояние валидации при ошибке.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Состояние валидации при предупреждении.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
 }
 declare const LINK_DEFAULT_COMPONENT = "a";
@@ -73,8 +49,6 @@ export declare class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAUL
     private getProps;
     state: LinkState;
     private theme;
-    private emotion;
-    private styles;
     private setRootNode;
     render(): JSX.Element;
     private getTabIndex;

package/cjs/components/Link/Link.js

@@ -2,11 +2,11 @@
 var _globalObject = require("@skbkontur/global-object");
 
 
-
 var _Mixins = require("../../lib/styles/Mixins");
 
 var _keyListener = require("../../lib/events/keyListener");
 
+var _ThemeContext = require("../../lib/theming/ThemeContext");
 var _utils = require("../../lib/utils");
 var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
@@ -14,7 +14,6 @@ var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _ThemeFactory = require("../../lib/theming/ThemeFactory");
 var _getVisualStateDataAttributes = require("../../internal/CommonWrapper/utils/getVisualStateDataAttributes");
-var _ThemeContext = require("../../lib/theming/ThemeContext");
 
 var _Link2 = require("./Link.styles");
 var _LinkIcon = require("./LinkIcon");var _excluded = ["disabled", "icon", "rightIcon", "use", "loading", "_button", "_buttonOpened", "component", "focused", "error", "warning", "tabIndex", "theme"];var _class, _Link;
@@ -44,19 +43,6 @@ var _LinkIcon = require("./LinkIcon");var _excluded = ["disabled", "icon", "righ
 
 
 
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -117,16 +103,6 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
 
 
 
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -160,7 +136,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       return undefined;
     };_this.
 
-    renderMain = function (props) {var _this$emotion$cx;
+    renderMain = function (props) {var _cx;
       var
         disabled =
 
@@ -177,11 +153,10 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
 
 
         props.disabled,icon = props.icon,rightIcon = props.rightIcon,use = props.use,loading = props.loading,_button = props._button,_buttonOpened = props._buttonOpened,Root = props.component,_props$focused = props.focused,focused = _props$focused === void 0 ? false : _props$focused,error = props.error,warning = props.warning,tabIndex = props.tabIndex,theme = props.theme,rest = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-      var styles = _this.styles;
 
       var arrow = null;
       if (_button) {
-        arrow = /*#__PURE__*/_react.default.createElement("span", { className: styles.arrow() });
+        arrow = /*#__PURE__*/_react.default.createElement("span", { className: _Link2.styles.arrow() });
       }
 
       var isFocused = !disabled && (_this.state.focusedByTab || focused);
@@ -191,27 +166,44 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       _react.default.createElement(_LinkIcon.LinkIcon, { hasBothIcons: !!icon && !!rightIcon, icon: rightIcon, loading: loading, position: "right" });
 
       var nonInteractive = disabled || loading;
-
+      var getUseStyles = function getUseStyles() {
+        switch (use) {
+          case 'default':
+            return _Link2.styles.default(_this.theme);
+          case 'danger':
+            return _Link2.styles.danger(_this.theme);
+          case 'success':
+            return _Link2.styles.success(_this.theme);
+          case 'grayed':
+            return _Link2.styles.grayed(_this.theme);
+        }
+      };
+      var getUseLineFocusStyles = function getUseLineFocusStyles() {
+        switch (use) {
+          case 'default':
+            return _Link2.styles.lineFocus(_this.theme);
+          case 'danger':
+            return _Link2.styles.lineFocusDanger(_this.theme);
+          case 'success':
+            return _Link2.styles.lineFocusSuccess(_this.theme);
+          case 'grayed':
+            return _Link2.styles.lineFocusGrayed(_this.theme);
+        }
+      };
       var rootProps = (0, _extends2.default)({},
       rest, {
-        className: _this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[
-        styles.root(_this.theme)] = true, _this$emotion$cx[
-        (0, _Mixins.resetButton)(_this.emotion)] = Root === 'button', _this$emotion$cx[
-        styles.focus(_this.theme)] = isFocused, _this$emotion$cx[
-        styles.disabled(_this.theme)] = disabled || loading, _this$emotion$cx[
-        styles.useDefault(_this.theme)] = use === 'default', _this$emotion$cx[
-        styles.useSuccess(_this.theme)] = use === 'success', _this$emotion$cx[
-        styles.useDanger(_this.theme)] = use === 'danger', _this$emotion$cx[
-        styles.useGrayed(_this.theme)] = use === 'grayed', _this$emotion$cx[
-        styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _this$emotion$cx[
-        styles.button(_this.theme)] = !!_button, _this$emotion$cx[
-        styles.buttonOpened(_this.theme)] = !!_buttonOpened, _this$emotion$cx[
-        styles.warning(_this.theme)] = warning, _this$emotion$cx[
-        styles.error(_this.theme)] = error, _this$emotion$cx[
-        styles.lineFocus(_this.theme)] = isFocused && use === 'default', _this$emotion$cx[
-        styles.lineFocusSuccess(_this.theme)] = isFocused && use === 'success', _this$emotion$cx[
-        styles.lineFocusDanger(_this.theme)] = isFocused && use === 'danger', _this$emotion$cx[
-        styles.lineFocusGrayed(_this.theme)] = isFocused && use === 'grayed', _this$emotion$cx)
+        className: (0, _Emotion.cx)((_cx = {}, _cx[
+        _Link2.styles.root(_this.theme)] = true, _cx[
+        (0, _Mixins.resetButton)()] = Root === 'button', _cx[
+        _Link2.styles.focus(_this.theme)] = isFocused, _cx[
+        _Link2.styles.disabled(_this.theme)] = disabled || loading, _cx[
+        getUseStyles()] = true, _cx[
+        _Link2.styles.useGrayedFocus(_this.theme)] = use === 'grayed' && focused, _cx[
+        _Link2.styles.button(_this.theme)] = !!_button, _cx[
+        _Link2.styles.buttonOpened(_this.theme)] = !!_buttonOpened, _cx[
+        _Link2.styles.warning(_this.theme)] = warning, _cx[
+        _Link2.styles.error(_this.theme)] = error, _cx[
+        getUseLineFocusStyles()] = isFocused, _cx)
         ),
         onClick: _this.handleClick,
         onFocus: _this.handleFocus,
@@ -252,7 +244,7 @@ Link = exports.Link = (0, _rootNode.rootNode)(_class = (_Link = /*#__PURE__*/fun
       if (onClick && !disabled && !loading) {
         onClick(event);
       }
-    };return _this;}(0, _inheritsLoose2.default)(Link, _React$Component);var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_Emotion.EmotionConsumer, null, function (emotion) {_this2.emotion = emotion;_this2.styles = (0, _Link2.getStyles)(_this2.emotion);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});});};return Link;}(_react.default.Component), _Link.__KONTUR_REACT_UI__ = 'Link', _Link.displayName = 'Link', _Link.defaultProps = { use: 'default', component: LINK_DEFAULT_COMPONENT }, _Link)) || _class;
+    };return _this;}(0, _inheritsLoose2.default)(Link, _React$Component);var _proto = Link.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = _this2.props.theme ? _ThemeFactory.ThemeFactory.create(_this2.props.theme, theme) : theme;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: _this2.setRootNode }, _this2.getProps()), _this2.renderMain);});};return Link;}(_react.default.Component), _Link.__KONTUR_REACT_UI__ = 'Link', _Link.displayName = 'Link', _Link.defaultProps = { use: 'default', component: LINK_DEFAULT_COMPONENT }, _Link)) || _class;
 
 
 var isAnchorProps = function isAnchorProps(props) {

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

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Mixins","_keyListener","_utils","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_ThemeFactory","_getVisualStateDataAttributes","_ThemeContext","_Link2","_LinkIcon","_excluded","_class","_Link","LINK_DEFAULT_COMPONENT","LinkDataTids","exports","root","Link","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","isExternalLink","undefined","renderMain","_this$emotion$cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose2","default","styles","arrow","createElement","className","isFocused","leftIconElement","LinkIcon","position","rightIconElement","hasBothIcons","rootProps","_extends2","emotion","cx","resetButton","focus","useDefault","useSuccess","useDanger","useGrayed","useGrayedFocus","button","buttonOpened","lineFocus","lineFocusSuccess","lineFocusDanger","lineFocusGrayed","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","getVisualStateDataAttributes","children","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","_this$props2","_inheritsLoose2","_proto","prototype","render","_this2","EmotionConsumer","getStyles","ThemeContext","Consumer","ThemeFactory","create","CommonWrapper","rootNodeRef","setRootNode","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\nimport type { Emotion } from '@emotion/css/create-instance';\n\nimport { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Theme, ThemeIn } from '../../lib/theming/Theme';\nimport { isExternalLink } from '../../lib/utils';\nimport { CommonProps, CommonWrapper, CommonWrapperRestProps } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter, DefaultizedProps } from '../../lib/createPropsGetter';\nimport { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getStyles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface 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   * @ignore\n   */\n  focused?: boolean;\n  /**\n   * Состояние валидации при ошибке.\n   */\n  error?: boolean;\n  /**\n   * Состояние валидации при предупреждении.\n   */\n  warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = 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<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> 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: DefaultProps = {\n    use: 'default',\n    component: LINK_DEFAULT_COMPONENT,\n  };\n\n  private getProps = createPropsGetter(Link.defaultProps);\n\n  public state: LinkState = {\n    focusedByTab: false,\n  };\n\n  private theme!: Theme;\n  private emotion!: Emotion;\n  private styles!: ReturnType<typeof getStyles>;\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\n          this.styles = getStyles(this.emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = this.props.theme ? ThemeFactory.create(this.props.theme as Theme, theme) : theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.getProps()}>\n                    {this.renderMain}\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\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 = () => {\n    if (isAnchorProps(this.props)) {\n      const { rel, href } = this.props;\n      if (!rel && href) {\n        return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n      }\n      return rel;\n    }\n\n    return undefined;\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      component: Root,\n      focused = false,\n      error,\n      warning,\n      tabIndex,\n      theme,\n      ...rest\n    } = props;\n    const styles = this.styles;\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 rootProps = {\n      ...rest,\n      className: this.emotion.cx({\n        [styles.root(this.theme)]: true,\n        [resetButton(this.emotion)]: Root === 'button',\n        [styles.focus(this.theme)]: isFocused,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [styles.useDefault(this.theme)]: use === 'default',\n        [styles.useSuccess(this.theme)]: use === 'success',\n        [styles.useDanger(this.theme)]: use === 'danger',\n        [styles.useGrayed(this.theme)]: use === 'grayed',\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n        [styles.warning(this.theme)]: warning,\n        [styles.error(this.theme)]: error,\n        [styles.lineFocus(this.theme)]: isFocused && use === 'default',\n        [styles.lineFocusSuccess(this.theme)]: isFocused && use === 'success',\n        [styles.lineFocusDanger(this.theme)]: isFocused && use === 'danger',\n        [styles.lineFocusGrayed(this.theme)]: isFocused && use === 'grayed',\n      }),\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n      rel: this.getRel(),\n    };\n\n    return (\n      <Root data-tid={LinkDataTids.root} {...rootProps} {...getVisualStateDataAttributes({ disabled })}>\n        {leftIconElement}\n        {this.props.children}\n        {rightIconElement}\n        {arrow}\n      </Root>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleClick = (event: React.MouseEvent) => {\n    const { onClick, disabled, loading } = this.props;\n\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n  return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","_interopRequireDefault","require","_globalObject","_Mixins","_keyListener","_ThemeContext","_utils","_CommonWrapper","_Emotion","_rootNode","_createPropsGetter","_ThemeFactory","_getVisualStateDataAttributes","_Link2","_LinkIcon","_excluded","_class","_Link","LINK_DEFAULT_COMPONENT","LinkDataTids","exports","root","Link","rootNode","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","createPropsGetter","defaultProps","state","focusedByTab","getTabIndex","_ref","nonInteractive","_ref$tabIndex","tabIndex","getRel","isAnchorProps","props","_this$props","rel","href","isExternalLink","undefined","renderMain","_cx","disabled","icon","rightIcon","use","loading","_button","_buttonOpened","Root","component","_props$focused","focused","error","warning","theme","rest","_objectWithoutPropertiesLoose2","default","arrow","createElement","className","styles","isFocused","leftIconElement","LinkIcon","position","rightIconElement","hasBothIcons","getUseStyles","danger","success","grayed","getUseLineFocusStyles","lineFocus","lineFocusDanger","lineFocusSuccess","lineFocusGrayed","rootProps","_extends2","cx","resetButton","focus","useGrayedFocus","button","buttonOpened","onClick","handleClick","onFocus","handleFocus","onBlur","handleBlur","getVisualStateDataAttributes","children","globalObject","requestAnimationFrame","keyListener","isTabPressed","setState","event","_this$props2","_inheritsLoose2","_proto","prototype","render","_this2","ThemeContext","Consumer","ThemeFactory","create","CommonWrapper","rootNodeRef","setRootNode","React","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Link.tsx"],"sourcesContent":["import React from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ButtonLinkAllowedValues } from '../../lib/types/button-link';\nimport { resetButton } from '../../lib/styles/Mixins';\nimport { PolymorphicPropsWithoutRef } from '../../lib/types/polymorphic-component';\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 { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { styles } from './Link.styles';\nimport { LinkIcon } from './LinkIcon';\n\nexport interface LinkInnerProps extends CommonProps {\n  /** Делает компонент недоступным. */\n  disabled?: boolean;\n\n  /** Добавляет иконку слева. */\n  icon?: React.ReactElement;\n\n  /** Добавляет иконку справа. */\n  rightIcon?: React.ReactElement;\n\n  /** Задает тему ссылки. */\n  use?: 'default' | 'success' | 'danger' | 'grayed';\n\n  /** @ignore */\n  _button?: boolean;\n\n  /** @ignore */\n  _buttonOpened?: boolean;\n\n  /** Задает HTML-атрибут `tabindex`. */\n  tabIndex?: number;\n\n  /** Переводит кнопку в состояние загрузки. */\n  loading?: boolean;\n\n  /** Задает объект с переменными темы. Он будет объединён с темой из контекста. */\n  theme?: ThemeIn;\n\n  /** Задает состояние фокуса.\n   * @ignore */\n  focused?: boolean;\n\n  /** Переводит контрол в состояние валидации \"ошибка\". */\n  error?: boolean;\n\n  /** Переводит контрол в состояние валидации \"предупреждение\". */\n  warning?: boolean;\n}\n\nconst LINK_DEFAULT_COMPONENT = 'a';\n\nexport type LinkProps<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> = 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<ButtonLinkAllowedValues>, 'use' | 'component'>>;\ntype DefaultizedLinkProps = DefaultizedProps<LinkProps<ButtonLinkAllowedValues>, DefaultProps>;\n\n/**\n * Элемент ссылки из HTML.\n */\n@rootNode\nexport class Link<C extends ButtonLinkAllowedValues = typeof LINK_DEFAULT_COMPONENT> 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: DefaultProps = {\n    use: 'default',\n    component: LINK_DEFAULT_COMPONENT,\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 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 = () => {\n    if (isAnchorProps(this.props)) {\n      const { rel, href } = this.props;\n      if (!rel && href) {\n        return `noopener${isExternalLink(href) ? ' noreferrer' : ''}`;\n      }\n      return rel;\n    }\n\n    return undefined;\n  };\n\n  private renderMain = (props: CommonWrapperRestProps<DefaultizedLinkProps>) => {\n    const {\n      disabled,\n      icon,\n      rightIcon,\n      use,\n      loading,\n      _button,\n      _buttonOpened,\n      component: Root,\n      focused = false,\n      error,\n      warning,\n      tabIndex,\n      theme,\n      ...rest\n    } = props;\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    const getUseStyles = () => {\n      switch (use) {\n        case 'default':\n          return styles.default(this.theme);\n        case 'danger':\n          return styles.danger(this.theme);\n        case 'success':\n          return styles.success(this.theme);\n        case 'grayed':\n          return styles.grayed(this.theme);\n      }\n    };\n    const getUseLineFocusStyles = () => {\n      switch (use) {\n        case 'default':\n          return styles.lineFocus(this.theme);\n        case 'danger':\n          return styles.lineFocusDanger(this.theme);\n        case 'success':\n          return styles.lineFocusSuccess(this.theme);\n        case 'grayed':\n          return styles.lineFocusGrayed(this.theme);\n      }\n    };\n    const rootProps = {\n      ...rest,\n      className: cx({\n        [styles.root(this.theme)]: true,\n        [resetButton()]: Root === 'button',\n        [styles.focus(this.theme)]: isFocused,\n        [styles.disabled(this.theme)]: disabled || loading,\n        [getUseStyles()]: true,\n        [styles.useGrayedFocus(this.theme)]: use === 'grayed' && focused,\n        [styles.button(this.theme)]: !!_button,\n        [styles.buttonOpened(this.theme)]: !!_buttonOpened,\n        [styles.warning(this.theme)]: warning,\n        [styles.error(this.theme)]: error,\n        [getUseLineFocusStyles()]: isFocused,\n      }),\n      onClick: this.handleClick,\n      onFocus: this.handleFocus,\n      onBlur: this.handleBlur,\n      tabIndex: this.getTabIndex({ nonInteractive, tabIndex }),\n      rel: this.getRel(),\n    };\n\n    return (\n      <Root data-tid={LinkDataTids.root} {...rootProps} {...getVisualStateDataAttributes({ disabled })}>\n        {leftIconElement}\n        {this.props.children}\n        {rightIconElement}\n        {arrow}\n      </Root>\n    );\n  };\n\n  private handleFocus = () => {\n    if (!this.props.disabled) {\n      // focus event fires before keyDown eventlistener\n      // so we should check tabPressed in async way\n      globalObject.requestAnimationFrame?.(() => {\n        if (keyListener.isTabPressed) {\n          this.setState({ focusedByTab: true });\n        }\n      });\n    }\n  };\n\n  private handleBlur = () => {\n    this.setState({ focusedByTab: false });\n  };\n\n  private handleClick = (event: React.MouseEvent) => {\n    const { onClick, disabled, loading } = this.props;\n\n    if (onClick && !disabled && !loading) {\n      onClick(event);\n    }\n  };\n}\n\nconst isAnchorProps = (props: LinkProps<any>): props is LinkProps<'a'> => {\n  return props.component === 'a';\n};\n"],"mappings":"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","ignoreList":[]}

package/cjs/components/Link/Link.md

@@ -1,11 +1,11 @@
-По умолчанию, ссылка принимает все пропы `HTMLAnchorElement`.
+### Базовый пример
 
 ```jsx harmony
 <Link href="https://kontur.ru" target="_blank">Обычная ссылка</Link>
 ```
 
+### Корневой элемент
 Cсылка может рендерить кнопку в качестве корневого элемента, c помощью пропа `component`. Cсылка принимает все пропы переданного в `component` компонента.
-
 Рекомендуется к использованию вместо кнопки с `use=link`, если нужна кнопка с визуалом ссылки.
 
 ```jsx harmony
@@ -14,7 +14,8 @@ import { Link } from '@skbkontur/react-ui';
 <Link component='button'>Кнопка, но выглядит как ссылка</Link>
 ```
 
-Также, c помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
+### Проп `component`
+С помощью пропа `component`, ссылка может рендерить компонент `Link` из `react router` в качестве корневого элемента.
 
 ```jsx static
 import { Link } from '@skbkontur/react-ui';
@@ -25,7 +26,7 @@ import { Link as RouterLink, BrowserRouter } from 'react-router-dom';
 </BrowserRouter>
 ```
 
-Ссылка может иметь различные стили, а также быть отключенной.
+### Стили и disabled
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -39,7 +40,7 @@ import { Gapped } from '@skbkontur/react-ui';
 </Gapped>;
 ```
 
-Пример ссылки с иконкой.
+### Иконка
 
 ```jsx harmony
 import { Gapped } from '@skbkontur/react-ui';
@@ -52,7 +53,7 @@ import { CheckAIcon16Light } from '@skbkontur/icons/CheckAIcon16Light';
 </Gapped>
 ```
 
-Пример ссылок ведущих на внешние ресурсы.
+### Ссылки, ведущие на внешние ресурсы
 
 _Примечание_:
 
@@ -73,7 +74,7 @@ import { Gapped } from '@skbkontur/react-ui';
 </Gapped>
 ```
 
-Ссылка в состоянии загрузки.
+### Состояние загрузки
 
 **Поведение**: если у ссылки есть иконка, она заменяется на спиннер, когда иконки две заменяется только левая.
 
@@ -94,7 +95,7 @@ const [isLoading, setIsLoading] = React.useState(false);
 </Gapped>
 ```
 
-Ссылка может иметь кастомное действие при нажатии.
+### Кастомное действие при нажатии
 
 ```jsx harmony
 import { Toast } from '@skbkontur/react-ui';
@@ -102,7 +103,7 @@ import { Toast } from '@skbkontur/react-ui';
 <Link onClick={() => Toast.push("Ты нажал на ссылку!")}>Ссылка с кастомным действием</Link>
 ```
 
-Пример ссылки с пропом `theme`
+### Проп `theme`
 
 ```jsx harmony
 import { Link, Gapped } from '@skbkontur/react-ui';
@@ -114,7 +115,7 @@ import { Link, Gapped } from '@skbkontur/react-ui';
 ```
 
 
-Пример кастомизации ссылки
+### Кастомизация ссылки
 
 ```jsx harmony
 import { Toast, Button } from "@skbkontur/react-ui";
@@ -153,7 +154,7 @@ const tdStyle = {
   padding: '8px',
 };
 
-const renderExampleRow = (title, styles, index) => {
+const renderExampleRow = (title, styles) => {
     return (
         <tr>
           <td style={tdStyle}>{title}</td>

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

@@ -1,6 +1,5 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     root(t: Theme): string;
     lineFocus(t: Theme): string;
     lineFocusSuccess(t: Theme): string;
@@ -9,10 +8,10 @@ export declare const getStyles: (emotion: Emotion) => {
     button(t: Theme): string;
     buttonOpened(t: Theme): string;
     arrow(): string;
-    useDefault(t: Theme): string;
-    useSuccess(t: Theme): string;
-    useDanger(t: Theme): string;
-    useGrayed(t: Theme): string;
+    default(t: Theme): string;
+    success(t: Theme): string;
+    danger(t: Theme): string;
+    grayed(t: Theme): string;
     useGrayedFocus(t: Theme): string;
     focus(t: Theme): string;
     disabled(t: Theme): string;