npm - @skbkontur/react-ui - Versions diffs - 0.0.0-3c309a601b → 0.0.0-3dbb8bef27 - Mend

@skbkontur/react-ui 0.0.0-3c309a601b → 0.0.0-3dbb8bef27

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1692) hide show

package/components/Switcher/Switcher.md CHANGED Viewed

@@ -1,3 +1,4 @@
+### Базовый пример
 ```jsx harmony
 const [value, setValue] = React.useState();
@@ -9,7 +10,8 @@ const [value, setValue] = React.useState();
 />;
 ```
-Случай, когда `items` принимает объект типа `{ label: string, value: string }`:
+### items в виде объектов
+Случай, когда `items` принимает объект типа `{ label: string, value: string }`
 ```jsx harmony
 const [value, setValue] = React.useState();
@@ -36,7 +38,8 @@ const items = [
 />;
 ```
-Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку:
+### Кастомизация кнопки
+Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку
 ```jsx harmony
 const [value, setValue] = React.useState();
@@ -75,6 +78,7 @@ const items = [
 />;
 ```
+### Кастомизация items
 Пример с методом `renderItem` для кастомизации `items`:
 ```jsx harmony

package/components/Switcher/Switcher.styles/Switcher.styles.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 import { css, memoizeStyle } from "../../../lib/theming/Emotion";
 export var styles = memoizeStyle({
   root: function root() {
@@ -27,5 +27,8 @@ export var styles = memoizeStyle({
     var insideWidth = parseInt(t.btnBorderWidth);
     var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
     return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border-radius: ", ";\n      box-shadow:\n        inset 0 0 0 ", "px ", ",\n        0 0 0 ", " ", ";\n    "])), t.switcherBorderRadius, insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
+  },
+  error5_1: function error5_1(t) {
+    return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n      position: relative;\n\n      &:before {\n        content: '';\n        position: absolute;\n        pointer-events: none;\n        top: 1px;\n        right: 1px;\n        bottom: 1px;\n        left: 1px;\n        z-index: 1;\n        border-radius: ", ";\n        box-shadow: 0 0 0 ", " ", ";\n      }\n    "])), t.switcherBorderRadius, t.switcherOutlineWidth, t.borderColorError);
   }
 });

package/components/Switcher/Switcher.styles/Switcher.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","wrap","_templateObject2","input","_templateObject3","caption","t","_templateObject4","switcherTextColor","captionSmall","_templateObject5","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","_templateObject6","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","_templateObject7","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","_templateObject8","switcherBorderRadius","borderColorError"],"sources":["Switcher.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n line-height: normal;\n `;\n },\n\n wrap() {\n return css`\n display: inline-block;\n vertical-align: middle;\n `;\n },\n\n input() {\n return css`\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.switcherTextColor};\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n captionSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapSmall};\n font-size: ${t.switcherCaptionFontSizeSmall};\n line-height: ${t.switcherCaptionLineHeightSmall};\n `;\n },\n\n captionMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapMedium};\n font-size: ${t.switcherCaptionFontSizeMedium};\n line-height: ${t.switcherCaptionLineHeightMedium};\n `;\n },\n\n captionLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapLarge};\n font-size: ${t.switcherCaptionFontSizeLarge};\n line-height: ${t.switcherCaptionLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n const insideWidth = parseInt(t.btnBorderWidth);\n const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n return css`\n border-radius: ${t.switcherBorderRadius};\n box-shadow:\n inset 0 0 0 ${insideWidth}px ${t.borderColorError},\n 0 0 0 ${outsideWidth} ${t.borderColorError};\n `;\n },\n});\n"],"mappings":"~~kPAAA~~,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;;EAEDG,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;;EAMZ,CAAC;;EAEDK,OAAO,WAAAA,QAACC,CAAQ,EAAE;IAChB,OAAOX,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;IACCM,CAAC,CAACE,iBAAiB;;;;EAIhC,CAAC;;EAEDC,YAAY,WAAAA,aAACH,CAAQ,EAAE;IACrB,OAAOX,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACQM,CAAC,CAACK,uBAAuB;IAC5BL,CAAC,CAACM,4BAA4B;IAC5BN,CAAC,CAACO,8BAA8B;;EAEnD,CAAC;;EAEDC,aAAa,WAAAA,cAACR,CAAQ,EAAE;IACtB,OAAOX,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACQM,CAAC,CAACU,wBAAwB;IAC7BV,CAAC,CAACW,6BAA6B;IAC7BX,CAAC,CAACY,+BAA+B;;EAEpD,CAAC;;EAEDC,YAAY,WAAAA,aAACb,CAAQ,EAAE;IACrB,OAAOX,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACQM,CAAC,CAACe,uBAAuB;IAC5Bf,CAAC,CAACgB,4BAA4B;IAC5BhB,CAAC,CAACiB,8BAA8B;;EAEnD,CAAC;;EAEDC,KAAK,WAAAA,MAAClB,CAAQ,EAAE;IACd,IAAMmB,WAAW,GAAGC,QAAQ,CAACpB,CAAC,CAACqB,cAAc,CAAC;IAC9C,IAAMC,YAAY,GAAMF,QAAQ,CAACpB,CAAC,CAACuB,oBAAoB,CAAC,GAAGJ,WAAW,OAAI;IAC1E,OAAO9B,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA9B,2BAAA;IACSM,CAAC,CAACyB,oBAAoB;;IAEvBN,WAAW,EAAMnB,CAAC,CAAC0B,gBAAgB;IACzCJ,YAAY,EAAItB,CAAC,CAAC0B,gBAAgB;;EAEhD;AACF,CAAC,CAAC","ignoreList":[]}
1	+ {"version":3,"names":["css","memoizeStyle","styles","root","_templateObject","_taggedTemplateLiteralLoose","wrap","_templateObject2","input","_templateObject3","caption","t","_templateObject4","switcherTextColor","captionSmall","_templateObject5","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","_templateObject6","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","_templateObject7","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","_templateObject8","switcherBorderRadius","borderColorError","error5_1","_templateObject9"],"sources":["Switcher.styles.ts"],"sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root() {\n return css`\n line-height: normal;\n `;\n },\n\n wrap() {\n return css`\n display: inline-block;\n vertical-align: middle;\n `;\n },\n\n input() {\n return css`\n height: 0;\n opacity: 0;\n position: absolute;\n width: 0;\n `;\n },\n\n caption(t: Theme) {\n return css`\n color: ${t.switcherTextColor};\n vertical-align: middle;\n display: inline-block;\n `;\n },\n\n captionSmall(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapSmall};\n font-size: ${t.switcherCaptionFontSizeSmall};\n line-height: ${t.switcherCaptionLineHeightSmall};\n `;\n },\n\n captionMedium(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapMedium};\n font-size: ${t.switcherCaptionFontSizeMedium};\n line-height: ${t.switcherCaptionLineHeightMedium};\n `;\n },\n\n captionLarge(t: Theme) {\n return css`\n margin-right: ${t.switcherCaptionGapLarge};\n font-size: ${t.switcherCaptionFontSizeLarge};\n line-height: ${t.switcherCaptionLineHeightLarge};\n `;\n },\n\n error(t: Theme) {\n const insideWidth = parseInt(t.btnBorderWidth);\n const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n return css`\n border-radius: ${t.switcherBorderRadius};\n box-shadow:\n inset 0 0 0 ${insideWidth}px ${t.borderColorError},\n 0 0 0 ${outsideWidth} ${t.borderColorError};\n `;\n },\n\n error5_1(t: Theme) {\n return css`\n position: relative;\n\n &:before {\n content: '';\n position: absolute;\n pointer-events: none;\n top: 1px;\n right: 1px;\n bottom: 1px;\n left: 1px;\n z-index: 1;\n border-radius: ${t.switcherBorderRadius};\n box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n }\n `;\n },\n});\n"],"mappings":"oQAAA,SAASA,GAAG,EAAEC,YAAY,QAAQ,2BAA2B;;;AAG7D,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;EACjCE,IAAI,WAAAA,KAAA,EAAG;IACL,OAAOH,GAAG,CAAAI,eAAA,KAAAA,eAAA,GAAAC,2BAAA;;;EAGZ,CAAC;;EAEDC,IAAI,WAAAA,KAAA,EAAG;IACL,OAAON,GAAG,CAAAO,gBAAA,KAAAA,gBAAA,GAAAF,2BAAA;;;;EAIZ,CAAC;;EAEDG,KAAK,WAAAA,MAAA,EAAG;IACN,OAAOR,GAAG,CAAAS,gBAAA,KAAAA,gBAAA,GAAAJ,2BAAA;;;;;;EAMZ,CAAC;;EAEDK,OAAO,WAAAA,QAACC,CAAQ,EAAE;IAChB,OAAOX,GAAG,CAAAY,gBAAA,KAAAA,gBAAA,GAAAP,2BAAA;IACCM,CAAC,CAACE,iBAAiB;;;;EAIhC,CAAC;;EAEDC,YAAY,WAAAA,aAACH,CAAQ,EAAE;IACrB,OAAOX,GAAG,CAAAe,gBAAA,KAAAA,gBAAA,GAAAV,2BAAA;IACQM,CAAC,CAACK,uBAAuB;IAC5BL,CAAC,CAACM,4BAA4B;IAC5BN,CAAC,CAACO,8BAA8B;;EAEnD,CAAC;;EAEDC,aAAa,WAAAA,cAACR,CAAQ,EAAE;IACtB,OAAOX,GAAG,CAAAoB,gBAAA,KAAAA,gBAAA,GAAAf,2BAAA;IACQM,CAAC,CAACU,wBAAwB;IAC7BV,CAAC,CAACW,6BAA6B;IAC7BX,CAAC,CAACY,+BAA+B;;EAEpD,CAAC;;EAEDC,YAAY,WAAAA,aAACb,CAAQ,EAAE;IACrB,OAAOX,GAAG,CAAAyB,gBAAA,KAAAA,gBAAA,GAAApB,2BAAA;IACQM,CAAC,CAACe,uBAAuB;IAC5Bf,CAAC,CAACgB,4BAA4B;IAC5BhB,CAAC,CAACiB,8BAA8B;;EAEnD,CAAC;;EAEDC,KAAK,WAAAA,MAAClB,CAAQ,EAAE;IACd,IAAMmB,WAAW,GAAGC,QAAQ,CAACpB,CAAC,CAACqB,cAAc,CAAC;IAC9C,IAAMC,YAAY,GAAMF,QAAQ,CAACpB,CAAC,CAACuB,oBAAoB,CAAC,GAAGJ,WAAW,OAAI;IAC1E,OAAO9B,GAAG,CAAAmC,gBAAA,KAAAA,gBAAA,GAAA9B,2BAAA;IACSM,CAAC,CAACyB,oBAAoB;;IAEvBN,WAAW,EAAMnB,CAAC,CAAC0B,gBAAgB;IACzCJ,YAAY,EAAItB,CAAC,CAAC0B,gBAAgB;;EAEhD,CAAC;;EAEDC,QAAQ,WAAAA,SAAC3B,CAAQ,EAAE;IACjB,OAAOX,GAAG,CAAAuC,gBAAA,KAAAA,gBAAA,GAAAlC,2BAAA;;;;;;;;;;;;IAYWM,CAAC,CAACyB,oBAAoB;IACnBzB,CAAC,CAACuB,oBAAoB,EAAIvB,CAAC,CAAC0B,gBAAgB;;;EAGtE;AACF,CAAC,CAAC","ignoreList":[]}

package/components/Switcher/Switcher.styles.d.ts CHANGED Viewed

@@ -8,4 +8,5 @@ export declare const styles: {
     captionMedium(t: Theme): string;
     captionLarge(t: Theme): string;
     error(t: Theme): string;
+    error5_1(t: Theme): string;
 };

package/components/Switcher/__creevey__/Switcher.creevey.mts ADDED Viewed

@@ -0,0 +1,24 @@
+import { story, kind, test } from 'creevey';
+kind('Switcher', () => {
+  story('Horizontal', () => {
+    test('idle', async (context) => {
+      await context.matchImage(await context.takeScreenshot(), 'idle');
+    });
+    test('clicked', async (context) => {
+      await context.webdriver
+        .actions({
+          bridge: true,
+        })
+        .click(context.webdriver.findElement({ css: '[data-comp-name~="Button"]' }))
+        .perform();
+      await context.matchImage(await context.takeScreenshot(), 'clicked');
+    });
+  });
+  story('WithCustomRenderItems', ({ setStoryParameters }) => {
+    setStoryParameters({
+      skip: { 'chrome only': { in: /^(?!\bchrome2022\b)/ } },
+    });
+  });
+});

package/components/Switcher/__docs__/Switcher.mdx ADDED Viewed

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

package/components/Tabs/Tab/Tab.js CHANGED Viewed

@@ -21,7 +21,7 @@ export var TabDataTids = {
 };
 /**
- * Вложенный элемент компонента `<Tabs />`.
+ * Вложенный элемент компонента Tabs.
  */
 export var Tab = rootNode(_class = (_Tab = /*#__PURE__*/function (_React$Component) {
   function Tab(props) {

package/components/Tabs/Tab/Tab.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","getVisualStateDataAttributes","TabsContext","TabsContextDefaultValue","globalClasses","horizontalStyles","styles","verticalStyles","TabDataTids","root","Tab","_class","_Tab","_React$Component","props","_this","call","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","_inheritsLoose","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_cx","_cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","_extends","rootNodeRef","setRootNode","active","className","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","onResize","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"sources":["Tab.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } 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 { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { globalClasses, horizontalStyles, styles, verticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport const TabDataTids = {\n root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string>\n extends Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n CommonProps {\n /*\n Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).\n /\n component?: React.ComponentType<any> \| string;\n\n /\n `HTML`-аттрибут `href`.\n /\n href?: string;\n\n /\n Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.\n /\n id?: T;\n\n /\n `HTML`-событие `onclick`.\n /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /\n `HTML`-событие `onkeydown`.\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /\n Переводит компонент в отключенное состояние.\n /\n disabled?: boolean;\n\n /\n Визуальное состояние ошибки.\n /\n error?: boolean;\n\n /\n Визуальное состояние предупреждения.\n /\n warning?: boolean;\n\n /\n Визуальное состояние успеха.\n /\n success?: boolean;\n\n /\n Визуальное состояние главного элемента.\n /\n primary?: boolean;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' \| 'href'>>;\n\n/\n Вложенный элемент компонента `<Tabs />`.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n public static displayName = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static defaultProps: DefaultProps = {\n component: 'a',\n href: '',\n };\n\n private getProps = createPropsGetter(Tab.defaultProps);\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { component: Component, href } = this.getProps();\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper\n rootNodeRef={this.setRootNode}\n {...getVisualStateDataAttributes({ active: isActive, disabled })}\n {...this.props}\n >\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.rootSmall(this.theme)]: this.context.size === 'small',\n [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n [styles.rootLarge(this.theme)]: this.context.size === 'large',\n [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n aria-describedby={ariaDescribedby}\n aria-label={ariaLabel}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && (\n <div\n className={cx(globalClasses.focus, {\n [styles.focusSmall(this.theme)]: this.context.size === 'small',\n [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n [styles.focusLarge(this.theme)]: this.context.size === 'large',\n })}\n />\n )}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id \|\| this.getProps().href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n const { href, component } = this.getProps();\n\n const id = this.props.id \|\| href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (component === 'a' && !href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) \|\| isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed \|\| keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"],"mappings":"iJAAA,OAAOA,KAAK,MAA0B,OAAO;AAC7C,OAAOC,SAAS,MAAM,WAAW;AACjC,SAASC,YAAY,QAAQ,0BAA0B;;AAEvD,SAASC,cAAc,QAAQ,+BAA+B;AAC9D,SAASC,UAAU,EAAEC,cAAc,EAAEC,YAAY,QAAQ,uCAAuC;AAChG,SAASC,WAAW,QAAQ,8BAA8B;;AAE1D,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,YAAY,QAAQ,gCAAgC;;AAE7D,SAAsBC,aAAa,QAAQ,8BAA8B;AACzE,SAASC,EAAE,QAAQ,2BAA2B;AAC9C,SAASC,QAAQ,QAAsB,oBAAoB;AAC3D,SAASC,iBAAiB,QAAQ,6BAA6B;AAC/D,SAASC,4BAA4B,QAAQ,iEAAiE;;AAE9G,SAASC,WAAW,EAAEC,uBAAuB,QAAyB,eAAe;AACrF,SAASC,aAAa,EAAEC,gBAAgB,EAAEC,MAAM,EAAEC,cAAc,QAAQ,cAAc;;;;;;;;;;AAUtF,OAAO,IAAMC,WAAW,GAAG;EACzBC,IAAI,EAAE;AACR,CAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DV;AACA;AACA;AACA;AACaC,GAAG,GADfX,QAAQ,CAAAY,MAAA,IAAAC,IAAA,0BAAAC,gBAAA;;;;;;;;;;;;;;;;;;;;;;EAuBP,SAAAH,IAAYI,KAAkB,EAAE,KAAAC,KAAA;IAC9BA,KAAA,GAAAF,gBAAA,CAAAG,IAAA,OAAMF,KAAK,CAAC,SAACC,KAAA,CAlBRE,OAAO,GAAoBF,KAAA,CAAKE,OAAO,CAAAF,KAAA,CAOtCG,QAAQ,GAAGlB,iBAAiB,CAACU,GAAG,CAACS,YAAY,CAAC,CAAAJ,KAAA,CAE/CK,KAAK,GAAa,EACvBC,iBAAiB,EAAE,KAAK,CAC1B,CAAC,CAAAN,KAAA,CAGOO,YAAY,GAAyC,IAAI,CAAAP,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAiD1DQ,iBAAiB,GAAG,oBAAMR,KAAA,CAAKO,YAAY,GAAAP,KAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA0E1CS,KAAK,GAAG,oBAAMT,KAAA,CAAKD,KAAK,CAACW,EAAE,IAAIV,KAAA,CAAKG,QAAQ,CAAC,CAAC,CAACQ,IAAI,GAAAX,KAAA;;IAEnDY,eAAe,GAAG,UAACC,QAAiC,EAAK;MAC/Db,KAAA,CAAKO,YAAY,GAAGM,QAAQ;IAC9B,CAAC,CAAAb,KAAA;;IAEOc,cAAc,GAAG,oBAAAd,KAAA,EAAU,CAAAA,KAAA;;IAE3Be,SAAS,GAAG,UAACC,KAAoC,EAAK;MAC5D,IAAIhB,KAAA,CAAKD,KAAK,CAACkB,QAAQ,EAAE;QACvBD,KAAK,CAACE,cAAc,CAAC,CAAC;QACtB;MACF;MACA,IAAAC,cAAA,GAA4BnB,KAAA,CAAKG,QAAQ,CAAC,CAAC,CAAnCQ,IAAI,GAAAQ,cAAA,CAAJR,IAAI,CAAES,SAAS,GAAAD,cAAA,CAATC,SAAS;;MAEvB,IAAMV,EAAE,GAAGV,KAAA,CAAKD,KAAK,CAACW,EAAE,IAAIC,IAAI;MAChC,IAAIX,KAAA,CAAKD,KAAK,CAACsB,OAAO,EAAE;QACtBrB,KAAA,CAAKD,KAAK,CAACsB,OAAO,CAACL,KAAK,CAAC;QACzB,IAAIA,KAAK,CAACM,gBAAgB,EAAE;UAC1B;QACF;MACF;MACA,IAAI,OAAOZ,EAAE,KAAK,QAAQ,EAAE;QAC1BV,KAAA,CAAKE,OAAO,CAACa,SAAS,CAACL,EAAE,CAAC;MAC5B;MACA,IAAIU,SAAS,KAAK,GAAG,IAAI,CAACT,IAAI,EAAE;QAC9BK,KAAK,CAACE,cAAc,CAAC,CAAC;MACxB;IACF,CAAC,CAAAlB,KAAA;;IAEOuB,aAAa,GAAG,UAACC,CAAmC,EAAK;MAC/D,IAAIxB,KAAA,CAAKD,KAAK,CAACkB,QAAQ,EAAE;QACvB;MACF;;MAEA,IAAIjB,KAAA,CAAKD,KAAK,CAAC0B,SAAS,EAAE;QACxBzB,KAAA,CAAKD,KAAK,CAAC0B,SAAS,CAACD,CAAC,CAAC;QACvB,IAAIA,CAAC,CAACF,gBAAgB,EAAE;UACtB;QACF;MACF;MACA,IAAMZ,EAAE,GAAGV,KAAA,CAAKS,KAAK,CAAC,CAAC;MACvB,IAAI,OAAOC,EAAE,KAAK,QAAQ,EAAE;QAC1B;MACF;MACA,IAAI,CAAClC,UAAU,CAACgD,CAAC,CAAC,EAAE;QAClB;MACF;MACAA,CAAC,CAACN,cAAc,CAAC,CAAC;MAClB,IAAMQ,KAAK,GAAGjD,cAAc,CAAC+C,CAAC,CAAC,IAAI9C,YAAY,CAAC8C,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;MAC3DxB,KAAA,CAAKE,OAAO,CAACyB,UAAU,CAACjB,EAAE,EAAEgB,KAAK,CAAC;IACpC,CAAC,CAAA1B,KAAA;;IAEO4B,WAAW,GAAG,YAAM;MAC1B,IAAI5B,KAAA,CAAKD,KAAK,CAACkB,QAAQ,EAAE;QACvB;MACF;;MAEA;MACA;MACA3C,YAAY,CAACuD,qBAAqB,YAAlCvD,YAAY,CAACuD,qBAAqB,CAAG,YAAM;QACzC,IAAIlD,WAAW,CAACmD,YAAY,IAAInD,WAAW,CAACoD,cAAc,EAAE;UAC1D/B,KAAA,CAAKgC,QAAQ,CAAC,EAAE1B,iBAAiB,EAAE,IAAI,CAAC,CAAC,CAAC;QAC5C;MACF,CAAC,CAAC;IACJ,CAAC,CAAAN,KAAA;;IAEOiC,UAAU,GAAG,YAAM;MACzB,IAAIjC,KAAA,CAAKD,KAAK,CAACkB,QAAQ,EAAE;QACvB;MACF;;MAEAjB,KAAA,CAAKgC,QAAQ,CAAC,EAAE1B,iBAAiB,EAAE,KAAK,CAAC,CAAC,CAAC;IAC7C,CAAC,CA/LCjC,SAAS,CAAC2B,KAAA,CAAKE,OAAO,KAAKd,uBAAuB,EAAE,4CAA4C,CAAC,CAAC,OAAAY,KAAA,CACpG,CAACkC,cAAA,CAAAvC,GAAA,EAAAG,gBAAA,MAAAqC,MAAA,GAAAxC,GAAA,CAAAyC,SAAA,CAAAD,MAAA,CAEME,iBAAiB,GAAxB,SAAAA,kBAAA,EAA2B,CACzB,IAAM3B,EAAE,GAAG,IAAI,CAACD,KAAK,CAAC,CAAC,CACvB,IAAI,OAAOC,EAAE,KAAK,QAAQ,EAAE,CAC1B,IAAI,CAACR,OAAO,CAACoC,MAAM,CAAC5B,EAAE,EAAE,IAAI,CAACI,cAAc,CAAC,CAC9C,CACF,CAAC,CAAAqB,MAAA,CAEMI,kBAAkB,GAAzB,SAAAA,mBAAA,EAA4B,CAC1B,IAAI,IAAI,CAACrC,OAAO,CAACsC,SAAS,KAAK,IAAI,CAACzC,KAAK,CAACW,EAAE,EAAE,CAC5C,IAAI,CAACR,OAAO,CAACuC,YAAY,CAAC,CAAC,CAC7B,CACF,CAAC,CAAAN,MAAA,CAEMO,oBAAoB,GAA3B,SAAAA,qBAAA,EAA8B,CAC5B,IAAMhC,EAAE,GAAG,IAAI,CAACD,KAAK,CAAC,CAAC,CACvB,IAAI,OAAOC,EAAE,KAAK,QAAQ,EAAE,CAC1B,IAAI,CAACR,OAAO,CAACyC,SAAS,CAACjC,EAAE,CAAC,CAC5B,CACF,CAAC,CAAAyB,MAAA,CAEMS,MAAM,GAAb,SAAAA,OAAA,EAAgB,KAAAC,MAAA,QACd,oBACEzE,KAAA,CAAA0E,aAAA,CAACjE,YAAY,CAACkE,QAAQ,QACnB,UAACC,KAAK,EAAK,CACVH,MAAI,CAACG,KAAK,GAAGA,KAAK,CAClB,OAAOH,MAAI,CAACI,UAAU,CAAC,CAAC,CAC1B,CACqB,CAAC,CAE5B,CAAC,CAAAd,MAAA,CAEMe,aAAa,GAApB,SAAAA,cAAA,EAAuB,CACrB,OAAO,EACLC,KAAK,EAAEC,OAAO,CAAC,IAAI,CAACrD,KAAK,CAACoD,KAAK,CAAC,EAChCE,OAAO,EAAED,OAAO,CAAC,IAAI,CAACrD,KAAK,CAACsD,OAAO,CAAC,EACpCC,OAAO,EAAEF,OAAO,CAAC,IAAI,CAACrD,KAAK,CAACuD,OAAO,CAAC,EACpCC,OAAO,EAAEH,OAAO,CAAC,IAAI,CAACrD,KAAK,CAACwD,OAAO,CAAC,EACpCtC,QAAQ,EAAEmC,OAAO,CAAC,IAAI,CAACrD,KAAK,CAACkB,QAAQ,CAAC,CACxC,CAAC,CACH,CAAC,CAAAkB,MAAA,CAIOc,UAAU,GAAlB,SAAAA,WAAA,EAAqB,KAAAO,GAAA,EAAAC,IAAA,CACnB,IAAAC,WAAA,GASI,IAAI,CAAC3D,KAAK,CARZ4D,QAAQ,GAAAD,WAAA,CAARC,QAAQ,CACR1C,QAAQ,GAAAyC,WAAA,CAARzC,QAAQ,CACRkC,KAAK,GAAAO,WAAA,CAALP,KAAK,CACLE,OAAO,GAAAK,WAAA,CAAPL,OAAO,CACPC,OAAO,GAAAI,WAAA,CAAPJ,OAAO,CACPC,OAAO,GAAAG,WAAA,CAAPH,OAAO,CACaK,eAAe,GAAAF,WAAA,CAAnC,kBAAkB,EACJG,SAAS,GAAAH,WAAA,CAAvB,YAAY,EAEd,IAAAI,eAAA,GAAuC,IAAI,CAAC3D,QAAQ,CAAC,CAAC,CAAnC4D,SAAS,GAAAD,eAAA,CAApB1C,SAAS,CAAaT,IAAI,GAAAmD,eAAA,CAAJnD,IAAI,CAElC,IAAIqD,QAAQ,GAAG,KAAK,CACpB,IAAIC,UAAU,GAAG,KAAK,CAEtB,IAAMvD,EAAE,GAAG,IAAI,CAACD,KAAK,CAAC,CAAC,CACvB,IAAI,OAAOC,EAAE,KAAK,QAAQ,EAAE,CAC1BsD,QAAQ,GAAG,IAAI,CAAC9D,OAAO,CAACsC,SAAS,KAAK,IAAI,CAAC/B,KAAK,CAAC,CAAC,CAClDwD,UAAU,GAAG,IAAI,CAAC/D,OAAO,CAACgE,QAAQ,CACpC,CACA,IAAMC,iBAAiB,GAAGF,UAAU,GAAGzE,cAAc,GAAGF,gBAAgB,CAExE,oBACElB,KAAA,CAAA0E,aAAA,CAAChE,aAAa,EAAAsF,QAAA,GACZC,WAAW,EAAE,IAAI,CAACC,WAAY,IAC1BpF,4BAA4B,CAAC,EAAEqF,MAAM,EAAEP,QAAQ,EAAE/C,QAAQ,EAARA,QAAQ,CAAC,CAAC,CAAC,EAC5D,IAAI,CAAClB,KAAK,gBAEd3B,KAAA,CAAA0E,aAAA,CAACiB,SAAS,IACR,YAAUtE,WAAW,CAACC,IAAK,EAC3B8E,SAAS,EAAEzF,EAAE,EAAAyE,GAAA,OAAAA,GAAA,CACVjE,MAAM,CAACkF,SAAS,CAAC,IAAI,CAACzB,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAlB,GAAA,CAC5DjE,MAAM,CAACoF,UAAU,CAAC,IAAI,CAAC3B,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,QAAQ,EAAAlB,GAAA,CAC9DjE,MAAM,CAACqF,SAAS,CAAC,IAAI,CAAC5B,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAlB,GAAA,CAC5DjE,MAAM,CAACsF,aAAa,CAAC,IAAI,CAAC7B,KAAK,CAAC,IAAG,CAAC,CAACiB,UAAU,IAAI,IAAI,CAAC/D,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAlB,GAAA,CAChFjE,MAAM,CAACuF,cAAc,CAAC,IAAI,CAAC9B,KAAK,CAAC,IAAG,CAAC,CAACiB,UAAU,IAAI,IAAI,CAAC/D,OAAO,CAACwE,IAAI,KAAK,QAAQ,EAAAlB,GAAA,CAClFjE,MAAM,CAACwF,aAAa,CAAC,IAAI,CAAC/B,KAAK,CAAC,IAAG,CAAC,CAACiB,UAAU,IAAI,IAAI,CAAC/D,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAlB,GAAA,CAChFW,iBAAiB,CAACZ,OAAO,CAAC,IAAI,CAACP,KAAK,CAAC,IAAG,CAAC,CAACO,OAAO,EAAAC,GAAA,CACjDW,iBAAiB,CAACb,OAAO,CAAC,IAAI,CAACN,KAAK,CAAC,IAAG,CAAC,CAACM,OAAO,EAAAE,GAAA,CACjDW,iBAAiB,CAACd,OAAO,CAAC,IAAI,CAACL,KAAK,CAAC,IAAG,CAAC,CAACK,OAAO,EAAAG,GAAA,CACjDW,iBAAiB,CAAChB,KAAK,CAAC,IAAI,CAACH,KAAK,CAAC,IAAG,CAAC,CAACG,KAAK,EAAAK,GAAA,CAC7CjE,MAAM,CAACgF,MAAM,CAAC,CAAC,IAAG,CAAC,CAACP,QAAQ,EAAAR,GAAA,CAC5BW,iBAAiB,CAACI,MAAM,CAAC,IAAI,CAACvB,KAAK,CAAC,IAAG,CAAC,CAACgB,QAAQ,EAAAR,GAAA,CACjDjE,MAAM,CAAC0B,QAAQ,CAAC,IAAI,CAAC+B,KAAK,CAAC,IAAG,CAAC,CAAC/B,QAAQ,EAAAuC,GAAA,CACxCW,iBAAiB,CAAClD,QAAQ,CAAC,CAAC,IAAG,CAAC,CAACA,QAAQ,EAAAuC,GAAA,CAC3C,CAAE,EACHwB,MAAM,EAAE,IAAI,CAAC/C,UAAW,EACxBZ,OAAO,EAAE,IAAI,CAACN,SAAU,EACxBkE,OAAO,EAAE,IAAI,CAACrD,WAAY,EAC1BH,SAAS,EAAE,IAAI,CAACF,aAAc,EAC9B2D,QAAQ,EAAEjE,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE,EAC5BkE,GAAG,EAAEvG,qBAAqB,CAACmF,SAAS,CAAC,GAAG,IAAI,GAAG,IAAI,CAACnD,eAAgB,EACpED,IAAI,EAAEA,IAAK,EACX,oBAAkBiD,eAAgB,EAClC,cAAYC,SAAU,iBAEtBzF,KAAA,CAAA0E,aAAA,CAACvE,cAAc,IAAC6G,QAAQ,EAAE,IAAI,CAAClF,OAAO,CAACuC,YAAa,IAAEkB,QAAyB,CAAC,EAC/E,IAAI,CAACtD,KAAK,CAACC,iBAAiB,iBAC3BlC,KAAA,CAAA0E,aAAA,UACE0B,SAAS,EAAEzF,EAAE,CAACM,aAAa,CAACgG,KAAK,GAAA5B,IAAA,OAAAA,IAAA,CAC9BlE,MAAM,CAAC+F,UAAU,CAAC,IAAI,CAACtC,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAjB,IAAA,CAC7DlE,MAAM,CAACgG,WAAW,CAAC,IAAI,CAACvC,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,QAAQ,EAAAjB,IAAA,CAC/DlE,MAAM,CAACiG,UAAU,CAAC,IAAI,CAACxC,KAAK,CAAC,IAAG,IAAI,CAAC9C,OAAO,CAACwE,IAAI,KAAK,OAAO,EAAAjB,IAAA,CAC/D,CAAE,EACJ,CAEM,CACE,CAAC,CAEpB,CAAC,QAAA9D,GAAA,GA5IiDvB,KAAK,CAAC2F,SAAS,GAAAlE,IAAA,CACnD4F,mBAAmB,GAAG,KAAK,EAAA5F,IAAA,CAC3B6F,WAAW,GAAG,KAAK,EAAA7F,IAAA,CAEnB8F,WAAW,GAAGxG,WAAW,EAAAU,IAAA,CAGzBO,YAAY,GAAiB,EACzCgB,SAAS,EAAE,GAAG,EACdT,IAAI,EAAE,EAAE,CACV,CAAC,EAAAd,IAAA,MAAAD,MAAA","ignoreList":[]}
1	+ {"version":3,"names":["React","invariant","globalObject","ResizeDetector","isKeyArrow","isKeyArrowLeft","isKeyArrowUp","keyListener","isFunctionalComponent","ThemeContext","CommonWrapper","cx","rootNode","createPropsGetter","getVisualStateDataAttributes","TabsContext","TabsContextDefaultValue","globalClasses","horizontalStyles","styles","verticalStyles","TabDataTids","root","Tab","_class","_Tab","_React$Component","props","_this","call","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","_this$getProps","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","isTabPressed","isArrowPressed","setState","handleBlur","_inheritsLoose","_proto","prototype","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","_this2","createElement","Consumer","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","_cx","_cx2","_this$props","children","ariaDescribedby","ariaLabel","_this$getProps2","Component","isActive","isVertical","vertical","orientationStyles","_extends","rootNodeRef","setRootNode","active","className","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","onBlur","onFocus","tabIndex","ref","onResize","focus","focusSmall","focusMedium","focusLarge","__KONTUR_REACT_UI__","displayName","contextType"],"sources":["Tab.tsx"],"sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport { ResizeDetector } from '../../internal/ResizeDetector';\nimport { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from '../../lib/events/keyboard/identifiers';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunctionalComponent } 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 { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes';\n\nimport { TabsContext, TabsContextDefaultValue, TabsContextType } from './TabsContext';\nimport { globalClasses, horizontalStyles, styles, verticalStyles } from './Tab.styles';\n\nexport interface TabIndicators {\n error: boolean;\n warning: boolean;\n success: boolean;\n primary: boolean;\n disabled: boolean;\n}\n\nexport const TabDataTids = {\n root: 'Tab__root',\n} as const;\n\nexport interface TabProps<T extends string = string>\n extends Pick<AriaAttributes, 'aria-label' \| 'aria-describedby'>,\n CommonProps {\n /** Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию.\n * Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern). /\n component?: React.ComponentType<any> \| string;\n\n /* Задает HTML-атрибут `href` - адрес, на который следует перейти. /\n href?: string;\n\n /* Задает уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран. /\n id?: T;\n\n /`HTML`-событие `onclick`. /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /** `HTML`-событие `onkeydown`. /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /* Делает компонент недоступным. /\n disabled?: boolean;\n\n /* Переводит контрол в состояние валидации \"ошибка\". /\n error?: boolean;\n\n /* Переводит контрол в состояние валидации \"предупреждение\". /\n warning?: boolean;\n\n /* Устанавливает визульное состояние валидации \"успех\". /\n success?: boolean;\n\n /* Задает визульное состояние главного элемента. /\n primary?: boolean;\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' \| 'href'>>;\n\n/\n Вложенный элемент компонента Tabs.\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = 'Tab';\n public static displayName = 'Tab';\n\n public static contextType = TabsContext;\n public context: TabsContextType = this.context;\n\n public static defaultProps: DefaultProps = {\n component: 'a',\n href: '',\n };\n\n private getProps = createPropsGetter(Tab.defaultProps);\n\n public state: TabState = {\n focusedByKeyboard: false,\n };\n\n private theme!: Theme;\n private tabComponent: Nullable<React.ReactElement<Tab<T>>> = null;\n private setRootNode!: TSetRootNode;\n\n constructor(props: TabProps<T>) {\n super(props);\n invariant(this.context !== TabsContextDefaultValue, 'Tab should be placed inside Tabs component');\n }\n\n public componentDidMount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.addTab(id, this.getTabInstance);\n }\n }\n\n public componentDidUpdate() {\n if (this.context.activeTab === this.props.id) {\n this.context.notifyUpdate();\n }\n }\n\n public componentWillUnmount() {\n const id = this.getId();\n if (typeof id === 'string') {\n this.context.removeTab(id);\n }\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getIndicators() {\n return {\n error: Boolean(this.props.error),\n warning: Boolean(this.props.warning),\n success: Boolean(this.props.success),\n primary: Boolean(this.props.primary),\n disabled: Boolean(this.props.disabled),\n };\n }\n\n public getUnderlyingNode = () => this.tabComponent;\n\n private renderMain() {\n const {\n children,\n disabled,\n error,\n warning,\n success,\n primary,\n 'aria-describedby': ariaDescribedby,\n 'aria-label': ariaLabel,\n } = this.props;\n const { component: Component, href } = this.getProps();\n\n let isActive = false;\n let isVertical = false;\n\n const id = this.getId();\n if (typeof id === 'string') {\n isActive = this.context.activeTab === this.getId();\n isVertical = this.context.vertical;\n }\n const orientationStyles = isVertical ? verticalStyles : horizontalStyles;\n\n return (\n <CommonWrapper\n rootNodeRef={this.setRootNode}\n {...getVisualStateDataAttributes({ active: isActive, disabled })}\n {...this.props}\n >\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.rootSmall(this.theme)]: this.context.size === 'small',\n [styles.rootMedium(this.theme)]: this.context.size === 'medium',\n [styles.rootLarge(this.theme)]: this.context.size === 'large',\n [styles.verticalSmall(this.theme)]: !!isVertical && this.context.size === 'small',\n [styles.verticalMedium(this.theme)]: !!isVertical && this.context.size === 'medium',\n [styles.verticalLarge(this.theme)]: !!isVertical && this.context.size === 'large',\n [orientationStyles.primary(this.theme)]: !!primary,\n [orientationStyles.success(this.theme)]: !!success,\n [orientationStyles.warning(this.theme)]: !!warning,\n [orientationStyles.error(this.theme)]: !!error,\n [styles.active()]: !!isActive,\n [orientationStyles.active(this.theme)]: !!isActive,\n [styles.disabled(this.theme)]: !!disabled,\n [orientationStyles.disabled()]: !!disabled,\n })}\n onBlur={this.handleBlur}\n onClick={this.switchTab}\n onFocus={this.handleFocus}\n onKeyDown={this.handleKeyDown}\n tabIndex={disabled ? -1 : 0}\n ref={isFunctionalComponent(Component) ? null : this.refTabComponent}\n href={href}\n aria-describedby={ariaDescribedby}\n aria-label={ariaLabel}\n >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && (\n <div\n className={cx(globalClasses.focus, {\n [styles.focusSmall(this.theme)]: this.context.size === 'small',\n [styles.focusMedium(this.theme)]: this.context.size === 'medium',\n [styles.focusLarge(this.theme)]: this.context.size === 'large',\n })}\n />\n )}\n </Component>\n </CommonWrapper>\n );\n }\n\n private getId = () => this.props.id \|\| this.getProps().href;\n\n private refTabComponent = (instance: React.ReactElement<any>) => {\n this.tabComponent = instance;\n };\n\n private getTabInstance = () => this;\n\n private switchTab = (event: React.MouseEvent<HTMLElement>) => {\n if (this.props.disabled) {\n event.preventDefault();\n return;\n }\n const { href, component } = this.getProps();\n\n const id = this.props.id \|\| href;\n if (this.props.onClick) {\n this.props.onClick(event);\n if (event.defaultPrevented) {\n return;\n }\n }\n if (typeof id === 'string') {\n this.context.switchTab(id);\n }\n if (component === 'a' && !href) {\n event.preventDefault();\n }\n };\n\n private handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n if (this.props.disabled) {\n return;\n }\n\n if (this.props.onKeyDown) {\n this.props.onKeyDown(e);\n if (e.defaultPrevented) {\n return;\n }\n }\n const id = this.getId();\n if (typeof id !== 'string') {\n return;\n }\n if (!isKeyArrow(e)) {\n return;\n }\n e.preventDefault();\n const delta = isKeyArrowLeft(e) \|\| isKeyArrowUp(e) ? -1 : 1;\n this.context.shiftFocus(id, delta);\n };\n\n private handleFocus = () => {\n if (this.props.disabled) {\n return;\n }\n\n // focus event fires before keyDown eventlistener\n // so we should check focusKeyPressed in async way\n globalObject.requestAnimationFrame?.(() => {\n if (keyListener.isTabPressed \|\| keyListener.isArrowPressed) {\n this.setState({ focusedByKeyboard: true });\n }\n });\n };\n\n private handleBlur = () => {\n if (this.props.disabled) {\n return;\n }\n\n this.setState({ focusedByKeyboard: false });\n };\n}\n"],"mappings":"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","ignoreList":[]}

package/components/Tabs/Tab.d.ts CHANGED Viewed

@@ -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;

package/components/Tabs/Tab.md CHANGED Viewed

@@ -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/Tabs/Tabs.js CHANGED Viewed

@@ -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() {

package/components/Tabs/Tabs/Tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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 Позволяет задать кастомный класс подчёркиванию таба.\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 <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":[]}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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>;