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

package/components/Tabs/Tab.d.ts

@@ -13,45 +13,26 @@ export declare const TabDataTids: {
     readonly root: "Tab__root";
 };
 export interface TabProps<T extends string = string> extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
-    /**
-     * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).
-     */
+    /** Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию.
+     * Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern). */
     component?: React.ComponentType<any> | string;
-    /**
-     * `HTML`-аттрибут `href`.
-     */
+    /** Задает HTML-атрибут `href` - адрес, на который следует перейти. */
     href?: string;
-    /**
-     * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.
-     */
+    /** Задает уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран. */
     id?: T;
-    /**
-     * `HTML`-событие `onclick`.
-     */
+    /**`HTML`-событие `onclick`. */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    /**
-     * `HTML`-событие `onkeydown`.
-     */
+    /** `HTML`-событие `onkeydown`. */
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Переводит компонент в отключенное состояние.
-     */
+    /** Делает компонент недоступным. */
     disabled?: boolean;
-    /**
-     * Визуальное состояние ошибки.
-     */
+    /** Переводит контрол в состояние валидации "ошибка". */
     error?: boolean;
-    /**
-     * Визуальное состояние предупреждения.
-     */
+    /** Переводит контрол в состояние валидации "предупреждение". */
     warning?: boolean;
-    /**
-     * Визуальное состояние успеха.
-     */
+    /** Устанавливает визульное состояние валидации "успех". */
     success?: boolean;
-    /**
-     * Визуальное состояние главного элемента.
-     */
+    /** Задает визульное состояние главного элемента. */
     primary?: boolean;
 }
 export interface TabState {
@@ -59,7 +40,7 @@ export interface TabState {
 }
 type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
- * Вложенный элемент компонента `<Tabs />`.
+ * Вложенный элемент компонента Tabs.
  */
 export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;
@@ -70,8 +51,6 @@ export declare class Tab<T extends string = string> extends React.Component<TabP
     private getProps;
     state: TabState;
     private theme;
-    private emotion;
-    private styles;
     private tabComponent;
     private setRootNode;
     constructor(props: TabProps<T>);

package/components/Tabs/Tab.md

@@ -1,5 +1,6 @@
 У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
 
+### Кастомизация
 Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
 ```jsx harmony
 import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
@@ -50,6 +51,7 @@ const [colors, setColors] = React.useState(updateColors());
 </>
 ```
 
+### Изменение корневого компонента Tab
 С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
 
 Проп может принимать: компоненты, функции и строки.

package/components/Tabs/Tab.styles/Tab.styles.js

@@ -1,99 +1,93 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17;
-import { memoizeStyle, prefix } from "../../../lib/theming/Emotion";
+import { css, memoizeStyle, prefix } from "../../../lib/theming/Emotion";
 import { shift } from "../../../lib/styles/DimensionFunctions";
 import * as ColorFunctions from "../../../lib/styles/ColorFunctions";
 import { fontSize, lineHeight, paddingX, paddingY } from "../helpers";
 export var globalClasses = prefix('tab')({
   focus: 'focus'
 });
-export var getStyles = function getStyles(emotion) {
-  function tabRoot(t, size) {
-    return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
+export var styles = memoizeStyle({
+  rootSmall: function rootSmall(t) {
+    return tabRoot(t, 'small');
+  },
+  rootMedium: function rootMedium(t) {
+    return tabRoot(t, 'medium');
+  },
+  rootLarge: function rootLarge(t) {
+    return tabRoot(t, 'large');
+  },
+  verticalSmall: function verticalSmall(t) {
+    return tabVertical(t, 'small');
+  },
+  verticalMedium: function verticalMedium(t) {
+    return tabVertical(t, 'medium');
+  },
+  verticalLarge: function verticalLarge(t) {
+    return tabVertical(t, 'large');
+  },
+  focusSmall: function focusSmall(t) {
+    return tabFocus(t, 'small');
+  },
+  focusMedium: function focusMedium(t) {
+    return tabFocus(t, 'medium');
+  },
+  focusLarge: function focusLarge(t) {
+    return tabFocus(t, 'large');
+  },
+  disabled: function disabled(t) {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      color: rgba(\n        ", ",\n        ", ",\n        ", ",\n        0.5\n      );\n      cursor: default;\n    "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
+  },
+  active: function active() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      cursor: default;\n    "])));
   }
-  function tabVertical(t, size) {
-    return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+});
+export var horizontalStyles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
+  },
+  primary: function primary(t) {
+    return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-  function tabFocus(t, size) {
-    return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+});
+export var verticalStyles = memoizeStyle({
+  active: function active(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
+  },
+  disabled: function disabled() {
+    return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
+  },
+  primary: function primary(t) {
+    return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
+  },
+  success: function success(t) {
+    return css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
+  },
+  warning: function warning(t) {
+    return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
+  },
+  error: function error(t) {
+    return css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
   }
-  return memoizeStyle({
-    rootSmall: function rootSmall(t) {
-      return tabRoot(t, 'small');
-    },
-    rootMedium: function rootMedium(t) {
-      return tabRoot(t, 'medium');
-    },
-    rootLarge: function rootLarge(t) {
-      return tabRoot(t, 'large');
-    },
-    verticalSmall: function verticalSmall(t) {
-      return tabVertical(t, 'small');
-    },
-    verticalMedium: function verticalMedium(t) {
-      return tabVertical(t, 'medium');
-    },
-    verticalLarge: function verticalLarge(t) {
-      return tabVertical(t, 'large');
-    },
-    focusSmall: function focusSmall(t) {
-      return tabFocus(t, 'small');
-    },
-    focusMedium: function focusMedium(t) {
-      return tabFocus(t, 'medium');
-    },
-    focusLarge: function focusLarge(t) {
-      return tabFocus(t, 'large');
-    },
-    disabled: function disabled(t) {
-      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: rgba(\n          ", ",\n          ", ",\n          ", ",\n          0.5\n        );\n        cursor: default;\n      "])), ColorFunctions.red(t.tabTextColorDefault), ColorFunctions.green(t.tabTextColorDefault), ColorFunctions.blue(t.tabTextColorDefault));
-    },
-    active: function active() {
-      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        cursor: default;\n      "])));
-    }
-  });
-};
-export var getHorizontalStyles = function getHorizontalStyles(emotion) {
-  return memoizeStyle({
-    active: function active(t) {
-      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
-    },
-    disabled: function disabled() {
-      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    "])));
-    },
-    primary: function primary(t) {
-      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
-    },
-    success: function success(t) {
-      return emotion.css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-bottom-color: ", ";\n      }\n    "])), t.tabColorHoverError);
-    }
-  });
-};
-export var getVerticalStyles = function getVerticalStyles(emotion) {
-  return memoizeStyle({
-    active: function active(t) {
-      return emotion.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left: ", " solid transparent;\n      }\n    "])), t.tabBorderWidth);
-    },
-    disabled: function disabled() {
-      return emotion.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: transparent;\n      }\n    "])));
-    },
-    primary: function primary(t) {
-      return emotion.css(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverPrimary);
-    },
-    success: function success(t) {
-      return emotion.css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverSuccess);
-    },
-    warning: function warning(t) {
-      return emotion.css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverWarning);
-    },
-    error: function error(t) {
-      return emotion.css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n      &:hover {\n        border-left-color: ", ";\n      }\n    "])), t.tabColorHoverError);
-    }
-  });
-};
+});
+function tabRoot(t, size) {
+  return css(_templateObject15 || (_templateObject15 = _taggedTemplateLiteralLoose(["\n    border-bottom: ", " solid transparent;\n    box-sizing: border-box;\n    color: ", ";\n    cursor: pointer;\n    display: inline-block;\n    font-size: ", ";\n    line-height: ", ";\n    margin-left: ", ";\n    margin-right: ", ";\n    padding-bottom: calc(", " - ", ");\n    padding-top: ", ";\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ", " ", ";\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ", " solid ", ";\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  "])), t.tabBorderWidth, t.tabTextColorDefault, fontSize(t, size), lineHeight(t, size), paddingX(t, size), paddingX(t, size), paddingY(t, size), t.tabBorderWidth, paddingY(t, size), t.transitionDuration, t.transitionTimingFunction, t.tabBorderWidth, t.tabColorHover);
+}
+function tabVertical(t, size) {
+  return css(_templateObject16 || (_templateObject16 = _taggedTemplateLiteralLoose(["\n    border-bottom: none;\n    border-left: ", " solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ", ";\n    padding-right: ", ";\n\n    &:hover {\n      border-bottom: none;\n      border-left: ", " solid ", ";\n    }\n\n    .", " {\n      bottom: 0;\n      left: -", ";\n      right: 0;\n    }\n  "])), t.tabBorderWidth, shift(paddingX(t, size), "-" + t.tabBorderWidth), paddingX(t, size), t.tabBorderWidth, t.tabColorHover, globalClasses.focus, t.tabBorderWidth);
+}
+function tabFocus(t, size) {
+  return css(_templateObject17 || (_templateObject17 = _taggedTemplateLiteralLoose(["\n    border: ", " solid ", ";\n    bottom: -", ";\n    left: -", ";\n    position: absolute;\n    right: -", ";\n    top: 0;\n  "])), t.tabOutlineWidth, t.tabColorFocus, t.tabBorderWidth, paddingX(t, size), paddingX(t, size));
+}

package/components/Tabs/Tab.styles/Tab.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","getStyles","emotion","tabRoot","t","size","css","_templateObject","_taggedTemplateLiteralLoose","tabBorderWidth","tabTextColorDefault","transitionDuration","transitionTimingFunction","tabColorHover","tabVertical","_templateObject2","tabFocus","_templateObject3","tabOutlineWidth","tabColorFocus","rootSmall","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","focusSmall","focusMedium","focusLarge","disabled","_templateObject4","red","green","blue","active","_templateObject5","getHorizontalStyles","_templateObject6","_templateObject7","primary","_templateObject8","tabColorHoverPrimary","success","_templateObject9","tabColorHoverSuccess","warning","_templateObject10","tabColorHoverWarning","error","_templateObject11","tabColorHoverError","getVerticalStyles","_templateObject12","_templateObject13","_templateObject14","_templateObject15","_templateObject16","_templateObject17"],"sources":["Tab.styles.ts"],"sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\n\nimport { memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const getStyles = (emotion: Emotion) => {\n  function tabRoot(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n  }\n\n  function tabVertical(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n  }\n\n  function tabFocus(t: Theme, size: SizeProp) {\n    return emotion.css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n  }\n\n  return memoizeStyle({\n    rootSmall(t: Theme) {\n      return tabRoot(t, 'small');\n    },\n\n    rootMedium(t: Theme) {\n      return tabRoot(t, 'medium');\n    },\n\n    rootLarge(t: Theme) {\n      return tabRoot(t, 'large');\n    },\n\n    verticalSmall(t: Theme) {\n      return tabVertical(t, 'small');\n    },\n\n    verticalMedium(t: Theme) {\n      return tabVertical(t, 'medium');\n    },\n\n    verticalLarge(t: Theme) {\n      return tabVertical(t, 'large');\n    },\n\n    focusSmall(t: Theme) {\n      return tabFocus(t, 'small');\n    },\n\n    focusMedium(t: Theme) {\n      return tabFocus(t, 'medium');\n    },\n\n    focusLarge(t: Theme) {\n      return tabFocus(t, 'large');\n    },\n\n    disabled(t: Theme) {\n      return emotion.css`\n        color: rgba(\n          ${ColorFunctions.red(t.tabTextColorDefault)},\n          ${ColorFunctions.green(t.tabTextColorDefault)},\n          ${ColorFunctions.blue(t.tabTextColorDefault)},\n          0.5\n        );\n        cursor: default;\n      `;\n    },\n\n    active() {\n      return emotion.css`\n        cursor: default;\n      `;\n    },\n  });\n};\n\nexport const getHorizontalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n\nexport const getVerticalStyles = (emotion: Emotion) =>\n  memoizeStyle({\n    active(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n    },\n\n    disabled() {\n      return emotion.css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n    },\n\n    primary(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n    },\n\n    success(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n    },\n\n    warning(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n    },\n\n    error(t: Theme) {\n      return emotion.css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n    },\n  });\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["css","memoizeStyle","prefix","shift","ColorFunctions","fontSize","lineHeight","paddingX","paddingY","globalClasses","focus","styles","rootSmall","t","tabRoot","rootMedium","rootLarge","verticalSmall","tabVertical","verticalMedium","verticalLarge","focusSmall","tabFocus","focusMedium","focusLarge","disabled","_templateObject","_taggedTemplateLiteralLoose","red","tabTextColorDefault","green","blue","active","_templateObject2","horizontalStyles","_templateObject3","tabBorderWidth","_templateObject4","primary","_templateObject5","tabColorHoverPrimary","success","_templateObject6","tabColorHoverSuccess","warning","_templateObject7","tabColorHoverWarning","error","_templateObject8","tabColorHoverError","verticalStyles","_templateObject9","_templateObject10","_templateObject11","_templateObject12","_templateObject13","_templateObject14","size","_templateObject15","transitionDuration","transitionTimingFunction","tabColorHover","_templateObject16","_templateObject17","tabOutlineWidth","tabColorFocus"],"sources":["Tab.styles.ts"],"sourcesContent":["import { css, memoizeStyle, prefix } from '../../lib/theming/Emotion';\nimport { shift } from '../../lib/styles/DimensionFunctions';\nimport * as ColorFunctions from '../../lib/styles/ColorFunctions';\nimport { Theme } from '../../lib/theming/Theme';\nimport { SizeProp } from '../../lib/types/props';\n\nimport { fontSize, lineHeight, paddingX, paddingY } from './helpers';\n\nexport const globalClasses = prefix('tab')({\n  focus: 'focus',\n});\n\nexport const styles = memoizeStyle({\n  rootSmall(t: Theme) {\n    return tabRoot(t, 'small');\n  },\n\n  rootMedium(t: Theme) {\n    return tabRoot(t, 'medium');\n  },\n\n  rootLarge(t: Theme) {\n    return tabRoot(t, 'large');\n  },\n\n  verticalSmall(t: Theme) {\n    return tabVertical(t, 'small');\n  },\n\n  verticalMedium(t: Theme) {\n    return tabVertical(t, 'medium');\n  },\n\n  verticalLarge(t: Theme) {\n    return tabVertical(t, 'large');\n  },\n\n  focusSmall(t: Theme) {\n    return tabFocus(t, 'small');\n  },\n\n  focusMedium(t: Theme) {\n    return tabFocus(t, 'medium');\n  },\n\n  focusLarge(t: Theme) {\n    return tabFocus(t, 'large');\n  },\n\n  disabled(t: Theme) {\n    return css`\n      color: rgba(\n        ${ColorFunctions.red(t.tabTextColorDefault)},\n        ${ColorFunctions.green(t.tabTextColorDefault)},\n        ${ColorFunctions.blue(t.tabTextColorDefault)},\n        0.5\n      );\n      cursor: default;\n    `;\n  },\n\n  active() {\n    return css`\n      cursor: default;\n    `;\n  },\n});\n\nexport const horizontalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-bottom-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-bottom-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nexport const verticalStyles = memoizeStyle({\n  active(t: Theme) {\n    return css`\n      &:hover {\n        border-left: ${t.tabBorderWidth} solid transparent;\n      }\n    `;\n  },\n\n  disabled() {\n    return css`\n      &:hover {\n        border-left-color: transparent;\n      }\n    `;\n  },\n\n  primary(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverPrimary};\n      }\n    `;\n  },\n\n  success(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverSuccess};\n      }\n    `;\n  },\n\n  warning(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverWarning};\n      }\n    `;\n  },\n\n  error(t: Theme) {\n    return css`\n      &:hover {\n        border-left-color: ${t.tabColorHoverError};\n      }\n    `;\n  },\n});\n\nfunction tabRoot(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: ${t.tabBorderWidth} solid transparent;\n    box-sizing: border-box;\n    color: ${t.tabTextColorDefault};\n    cursor: pointer;\n    display: inline-block;\n    font-size: ${fontSize(t, size)};\n    line-height: ${lineHeight(t, size)};\n    margin-left: ${paddingX(t, size)};\n    margin-right: ${paddingX(t, size)};\n    padding-bottom: calc(${paddingY(t, size)} - ${t.tabBorderWidth});\n    padding-top: ${paddingY(t, size)};\n    position: relative;\n    text-decoration: inherit;\n    transition: border-bottom ${t.transitionDuration} ${t.transitionTimingFunction};\n\n    &:hover {\n      outline: inherit;\n      border-bottom: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    &:focus {\n      outline: inherit;\n    }\n  `;\n}\n\nfunction tabVertical(t: Theme, size: SizeProp) {\n  return css`\n    border-bottom: none;\n    border-left: ${t.tabBorderWidth} solid transparent;\n    display: block;\n    margin-left: 0;\n    margin-right: 0;\n    padding-left: ${shift(paddingX(t, size), `-${t.tabBorderWidth}`)};\n    padding-right: ${paddingX(t, size)};\n\n    &:hover {\n      border-bottom: none;\n      border-left: ${t.tabBorderWidth} solid ${t.tabColorHover};\n    }\n\n    .${globalClasses.focus} {\n      bottom: 0;\n      left: -${t.tabBorderWidth};\n      right: 0;\n    }\n  `;\n}\n\nfunction tabFocus(t: Theme, size: SizeProp) {\n  return css`\n    border: ${t.tabOutlineWidth} solid ${t.tabColorFocus};\n    bottom: -${t.tabBorderWidth};\n    left: -${paddingX(t, size)};\n    position: absolute;\n    right: -${paddingX(t, size)};\n    top: 0;\n  `;\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Tab.styles.d.ts

@@ -1,9 +1,8 @@
-import type { Emotion } from '@emotion/css/create-instance';
 import { Theme } from '../../lib/theming/Theme';
 export declare const globalClasses: {
     focus: string;
 };
-export declare const getStyles: (emotion: Emotion) => {
+export declare const styles: {
     rootSmall(t: Theme): string;
     rootMedium(t: Theme): string;
     rootLarge(t: Theme): string;
@@ -16,7 +15,7 @@ export declare const getStyles: (emotion: Emotion) => {
     disabled(t: Theme): string;
     active(): string;
 };
-export declare const getHorizontalStyles: (emotion: Emotion) => {
+export declare const horizontalStyles: {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;
@@ -24,7 +23,7 @@ export declare const getHorizontalStyles: (emotion: Emotion) => {
     warning(t: Theme): string;
     error(t: Theme): string;
 };
-export declare const getVerticalStyles: (emotion: Emotion) => {
+export declare const verticalStyles: {
     active(t: Theme): string;
     disabled(): string;
     primary(t: Theme): string;

package/components/Tabs/Tabs/Tabs.js

@@ -3,15 +3,15 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _Tabs;
 import React from 'react';
 import { globalObject } from '@skbkontur/global-object';
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
-import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { cx } from "../../../lib/theming/Emotion";
 import { getRootNode } from "../../../lib/rootNode/getRootNode";
 import { rootNode } from "../../../lib/rootNode";
 import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { isInstanceOf } from "../../../lib/isInstanceOf";
-import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { Indicator } from "../Indicator";
-import { getStyles } from "../Tabs.styles";
+import { styles } from "../Tabs.styles";
 import { TabsContext } from "../TabsContext";
 import { Tab } from "../Tab";
 export var TabsDataTids = {
@@ -20,7 +20,12 @@ export var TabsDataTids = {
 };
 
 /**
- * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ * Родитель компонента Tab. Связывает `Tab`'ы в группу и позволяет управлять их состоянием, помогают в навигации.
+ *
+ * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.
+ *
+ * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
+ * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.
  */
 export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Component) {
   function Tabs() {
@@ -101,38 +106,35 @@ export var Tabs = rootNode(_class = (_Tabs = /*#__PURE__*/function (_React$Compo
     var _this$getProps = this.getProps(),
       vertical = _this$getProps.vertical,
       size = _this$getProps.size;
-    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
-      var styles = getStyles(emotion);
-      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
-        var _emotion$cx;
-        _this3.theme = theme;
-        return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
-          rootNodeRef: _this3.setRootNode
-        }, _this3.props), /*#__PURE__*/React.createElement("div", {
-          "data-tid": TabsDataTids.root,
-          className: emotion.cx((_emotion$cx = {}, _emotion$cx[styles.rootSmall(_this3.theme)] = size === 'small', _emotion$cx[styles.rootMedium(_this3.theme)] = size === 'medium', _emotion$cx[styles.rootLarge(_this3.theme)] = size === 'large', _emotion$cx[styles.vertical()] = vertical, _emotion$cx)),
-          style: {
-            width: width
-          },
-          "aria-describedby": ariaDescribedby
-        }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
-          value: {
-            vertical: vertical,
-            activeTab: value,
-            size: size,
-            getTab: _this3.getTab,
-            addTab: _this3.addTab,
-            removeTab: _this3.removeTab,
-            notifyUpdate: _this3.notifyUpdate,
-            shiftFocus: _this3.shiftFocus,
-            switchTab: _this3.switchTab
-          }
-        }, children, /*#__PURE__*/React.createElement(Indicator, {
-          className: indicatorClassName,
-          tabUpdates: _this3.tabUpdates,
-          vertical: _this3.getProps().vertical
-        }))));
-      });
+    return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+      var _cx;
+      _this3.theme = theme;
+      return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+        rootNodeRef: _this3.setRootNode
+      }, _this3.props), /*#__PURE__*/React.createElement("div", {
+        "data-tid": TabsDataTids.root,
+        className: cx((_cx = {}, _cx[styles.rootSmall(_this3.theme)] = size === 'small', _cx[styles.rootMedium(_this3.theme)] = size === 'medium', _cx[styles.rootLarge(_this3.theme)] = size === 'large', _cx[styles.vertical()] = vertical, _cx)),
+        style: {
+          width: width
+        },
+        "aria-describedby": ariaDescribedby
+      }, /*#__PURE__*/React.createElement(TabsContext.Provider, {
+        value: {
+          vertical: vertical,
+          activeTab: value,
+          size: size,
+          getTab: _this3.getTab,
+          addTab: _this3.addTab,
+          removeTab: _this3.removeTab,
+          notifyUpdate: _this3.notifyUpdate,
+          shiftFocus: _this3.shiftFocus,
+          switchTab: _this3.switchTab
+        }
+      }, children, /*#__PURE__*/React.createElement(Indicator, {
+        className: indicatorClassName,
+        tabUpdates: _this3.tabUpdates,
+        vertical: _this3.getProps().vertical
+      }))));
     });
   };
   return Tabs;

package/components/Tabs/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","globalObject","CommonWrapper","EmotionConsumer","getRootNode","rootNode","createPropsGetter","isInstanceOf","ThemeContext","Indicator","getStyles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","emotion","styles","Consumer","theme","_emotion$cx","_extends","rootNodeRef","setRootNode","className","cx","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { Indicator } from './Indicator';\nimport { getStyles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /**\n   * Позволяет задать кастомный класс подчёркиванию таба.\n   */\n  indicatorClassName?: string;\n\n  /**\n   * Задаёт размер контрола.\n   *\n   * **Допустимые значения**: `\"small\"`, `\"medium\"`, `\"large\"`.\n   */\n  size?: SizeProp;\n\n  /**\n   * Задаёт текущий активный `<Tab />`. Принимает `id` таба.\n   */\n  value: T;\n\n  /**\n   * Функция, позволяющая изменить текущий активный `<Tab />`.\n   */\n  onValueChange?: (value: T) => void;\n\n  /**\n   * Переводит компонент в режим вертикального отображения.\n   * @default false\n   */\n  vertical?: boolean;\n\n  /**\n   * `CSS`-свойство `width`.\n   */\n  width?: number | string;\n\n  /**\n   * Атрибут для указания id элемента(-ов), описывающих его.\n   */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          const styles = getStyles(emotion);\n          return (\n            <ThemeContext.Consumer>\n              {(theme) => {\n                this.theme = theme;\n                return (\n                  <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n                    <div\n                      data-tid={TabsDataTids.root}\n                      className={emotion.cx({\n                        [styles.rootSmall(this.theme)]: size === 'small',\n                        [styles.rootMedium(this.theme)]: size === 'medium',\n                        [styles.rootLarge(this.theme)]: size === 'large',\n                        [styles.vertical()]: vertical,\n                      })}\n                      style={{ width }}\n                      aria-describedby={ariaDescribedby}\n                    >\n                      <TabsContext.Provider\n                        value={{\n                          vertical,\n                          activeTab: value,\n                          size,\n                          getTab: this.getTab,\n                          addTab: this.addTab,\n                          removeTab: this.removeTab,\n                          notifyUpdate: this.notifyUpdate,\n                          shiftFocus: this.shiftFocus,\n                          switchTab: this.switchTab,\n                        }}\n                      >\n                        {children}\n                        <Indicator\n                          className={indicatorClassName}\n                          tabUpdates={this.tabUpdates}\n                          vertical={this.getProps().vertical}\n                        />\n                      </TabsContext.Provider>\n                    </div>\n                  </CommonWrapper>\n                );\n              }}\n            </ThemeContext.Consumer>\n          );\n        }}\n      </EmotionConsumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","globalObject","ThemeContext","CommonWrapper","cx","getRootNode","rootNode","createPropsGetter","isInstanceOf","Indicator","styles","TabsContext","Tab","TabsDataTids","root","indicatorRoot","Tabs","_class","_Tabs","_React$Component","_this","_len","arguments","length","args","Array","_key","call","apply","concat","getProps","defaultProps","tabs","tabUpdates","on","cb","index","listeners","push","splice","shiftFocus","fromTab","delta","_this2","findIndex","x","id","newIndex","Math","max","min","tab","tabNode","getNode","htmlNode","HTMLElement","focus","notifyUpdate","forEach","switchTab","_this$props","props","onValueChange","value","getTab","_ref","find","_ref$getNode","addTab","removeTab","filter","_inheritsLoose","_proto","prototype","render","_this3","_this$props2","width","children","indicatorClassName","ariaDescribedby","_this$getProps","vertical","size","createElement","Consumer","theme","_cx","_extends","rootNodeRef","setRootNode","className","rootSmall","rootMedium","rootLarge","style","Provider","activeTab","Component","__KONTUR_REACT_UI__","displayName"],"sources":["Tabs.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { emptyHandler } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode } from '../../lib/rootNode/getRootNode';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { SizeProp } from '../../lib/types/props';\nimport { isInstanceOf } from '../../lib/isInstanceOf';\n\nimport { Indicator } from './Indicator';\nimport { styles } from './Tabs.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { Tab } from './Tab';\n\ntype ValueBaseType = string;\ninterface TabType<T extends ValueBaseType> {\n  getNode: () => Tab<T> | null;\n  id: T;\n}\n\nexport interface TabsProps<T extends ValueBaseType = string> extends CommonProps {\n  /** Задает кастомный класс подчёркиванию таба. */\n  indicatorClassName?: string;\n\n  /** Задает размер контрола. */\n  size?: SizeProp;\n\n  /** Задает текущий активный `<Tab />`. Принимает `id` таба. */\n  value: T;\n\n  /** Задает функцию, изменяющую текущий активный `<Tab />`. */\n  onValueChange?: (value: T) => void;\n\n  /** Задает расположение элементов по вертикали.\n   * @default false */\n  vertical?: boolean;\n\n  /** Задает ширину компонента Tabs. */\n  width?: number | string;\n\n  /** @ignore */\n  'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport const TabsDataTids = {\n  root: 'Tabs__root',\n  indicatorRoot: 'Indicator__root',\n} as const;\n\ntype DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;\n\n/**\n * Родитель компонента Tab. Связывает `Tab`'ы в группу и позволяет управлять их состоянием, помогают в навигации.\n *\n * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.\n *\n * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.\n * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.\n */\n@rootNode\nexport class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {\n  public static __KONTUR_REACT_UI__ = 'Tabs';\n  public static displayName = 'Tabs';\n\n  public static defaultProps: DefaultProps = {\n    vertical: false,\n    size: 'large',\n  };\n\n  private getProps = createPropsGetter(Tabs.defaultProps);\n\n  public static Tab = Tab;\n\n  private theme!: Theme;\n\n  private tabs: Array<TabType<T>> = [];\n\n  private tabUpdates = {\n    on: (cb: () => void) => {\n      const index = this.listeners.push(cb);\n      return () => {\n        this.listeners.splice(index, 1);\n      };\n    },\n  };\n\n  private listeners: Array<typeof emptyHandler> = [];\n  private setRootNode!: TSetRootNode;\n\n  public render(): JSX.Element {\n    const { value, width, children, indicatorClassName, 'aria-describedby': ariaDescribedby } = this.props;\n    const { vertical, size } = this.getProps();\n    return (\n      <ThemeContext.Consumer>\n        {(theme) => {\n          this.theme = theme;\n          return (\n            <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n              <div\n                data-tid={TabsDataTids.root}\n                className={cx({\n                  [styles.rootSmall(this.theme)]: size === 'small',\n                  [styles.rootMedium(this.theme)]: size === 'medium',\n                  [styles.rootLarge(this.theme)]: size === 'large',\n                  [styles.vertical()]: vertical,\n                })}\n                style={{ width }}\n                aria-describedby={ariaDescribedby}\n              >\n                <TabsContext.Provider\n                  value={{\n                    vertical,\n                    activeTab: value,\n                    size,\n                    getTab: this.getTab,\n                    addTab: this.addTab,\n                    removeTab: this.removeTab,\n                    notifyUpdate: this.notifyUpdate,\n                    shiftFocus: this.shiftFocus,\n                    switchTab: this.switchTab,\n                  }}\n                >\n                  {children}\n                  <Indicator\n                    className={indicatorClassName}\n                    tabUpdates={this.tabUpdates}\n                    vertical={this.getProps().vertical}\n                  />\n                </TabsContext.Provider>\n              </div>\n            </CommonWrapper>\n          );\n        }}\n      </ThemeContext.Consumer>\n    );\n  }\n\n  private shiftFocus: TabsContextType<T>['shiftFocus'] = (fromTab, delta) => {\n    const { tabs } = this;\n    const index = tabs.findIndex((x) => x.id === fromTab);\n    const newIndex = Math.max(0, Math.min(index + delta, tabs.length - 1));\n    const tab = tabs[newIndex];\n\n    const tabNode = tab.getNode();\n    const htmlNode = getRootNode(tabNode);\n\n    if (isInstanceOf(htmlNode, globalObject.HTMLElement) && typeof htmlNode.focus === 'function') {\n      htmlNode.focus();\n    }\n  };\n\n  private notifyUpdate: TabsContextType<T>['notifyUpdate'] = () => {\n    this.listeners.forEach((cb) => cb());\n  };\n\n  private switchTab: TabsContextType<T>['switchTab'] = (id) => {\n    const { onValueChange, value } = this.props;\n    if (id !== value && onValueChange) {\n      onValueChange(id);\n    }\n  };\n\n  private getTab: TabsContextType<T>['getTab'] = (id) => {\n    const { getNode = null } = this.tabs.find((x) => x.id === id) || {};\n    return getNode && getNode();\n  };\n\n  private addTab: TabsContextType<T>['addTab'] = (id, getNode) => {\n    this.tabs = this.tabs.concat({ id, getNode });\n  };\n\n  private removeTab: TabsContextType<T>['removeTab'] = (id) => {\n    this.tabs = this.tabs.filter((tab) => tab.id !== id);\n  };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Tabs.d.ts

@@ -4,36 +4,20 @@ import { SizeProp } from '../../lib/types/props';
 import { Tab } from './Tab';
 type ValueBaseType = string;
 export interface TabsProps<T extends ValueBaseType = string> extends CommonProps {
-    /**
-     * Позволяет задать кастомный класс подчёркиванию таба.
-     */
+    /** Задает кастомный класс подчёркиванию таба. */
     indicatorClassName?: string;
-    /**
-     * Задаёт размер контрола.
-     *
-     * **Допустимые значения**: `"small"`, `"medium"`, `"large"`.
-     */
+    /** Задает размер контрола. */
     size?: SizeProp;
-    /**
-     * Задаёт текущий активный `<Tab />`. Принимает `id` таба.
-     */
+    /** Задает текущий активный `<Tab />`. Принимает `id` таба. */
     value: T;
-    /**
-     * Функция, позволяющая изменить текущий активный `<Tab />`.
-     */
+    /** Задает функцию, изменяющую текущий активный `<Tab />`. */
     onValueChange?: (value: T) => void;
-    /**
-     * Переводит компонент в режим вертикального отображения.
-     * @default false
-     */
+    /** Задает расположение элементов по вертикали.
+     * @default false */
     vertical?: boolean;
-    /**
-     * `CSS`-свойство `width`.
-     */
+    /** Задает ширину компонента Tabs. */
     width?: number | string;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его.
-     */
+    /** @ignore */
     'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export declare const TabsDataTids: {
@@ -42,7 +26,12 @@ export declare const TabsDataTids: {
 };
 type DefaultProps = Required<Pick<TabsProps, 'vertical' | 'size'>>;
 /**
- * Родитель компонента `<Tab />`. Связывает `Tab`'ы в группу и позволяет управлять их состоянием.
+ * Родитель компонента Tab. Связывает `Tab`'ы в группу и позволяет управлять их состоянием, помогают в навигации.
+ *
+ * Используйте `Tabs` для второстепенной навигации, для группировки или фильтрации контента.
+ *
+ * Не используйте `Tabs` для основной навигации. Для этого лучше подходит главное меню на цветной плашке — оно более заметно на странице.
+ * Не используйте `Tabs` для переключения состояний — для этого есть RadioGroup, Toggle и Switcher.
  */
 export declare class Tabs<T extends string = string> extends React.Component<TabsProps<T>> {
     static __KONTUR_REACT_UI__: string;

package/components/Tabs/Tabs.md

@@ -1,4 +1,4 @@
-Базовый пример использования компонента.
+### Базовый пример
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
 
@@ -9,6 +9,7 @@ const [active, setActive] = React.useState('fuji');
 </Tabs>;
 ```
 
+### Расположение табов
 Компонент может отображать табы двумя способами: горизонтально (по умолчанию) и вертикально.
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
@@ -20,7 +21,7 @@ const [active, setActive] = React.useState('fuji');
 </Tabs>;
 ```
 
-У табов есть 3 стандартных размера
+### Размер
 ```jsx harmony
 const [active, setActive] = React.useState('fuji');
 const renderCaption = (caption) => <span style={{display: "inline-block", width: 60}}>{caption}</span>;