npm - @skbkontur/react-ui - Versions diffs - 0.0.0-0dca6f33be → 0.0.0-0ffbe8b468 - Mend

@skbkontur/react-ui 0.0.0-0dca6f33be → 0.0.0-0ffbe8b468

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 (934) hide show

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

@@ -11,6 +11,7 @@ var _CommonWrapper = require("../../internal/CommonWrapper");
 var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _Switcher = require("./Switcher.styles");
 var _switcherTheme = require("./switcherTheme");
 var _helpers = require("./helpers");var _class, _class2, _temp;
@@ -18,6 +19,9 @@ var _helpers = require("./helpers");var _class, _class2, _temp;
 var SwitcherDataTids = {
   root: 'Switcher__root' };exports.SwitcherDataTids = SwitcherDataTids;var
@@ -63,6 +67,8 @@ var SwitcherDataTids = {
@@ -225,7 +231,12 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
     _renderItems = function () {
       var _this$props2 = _this.props,items = _this$props2.items,value = _this$props2.value,size = _this$props2.size,disabled = _this$props2.disabled,role = _this$props2.role,renderItem = _this$props2.renderItem;
       return items.map(function (item, i) {
-        var _this$_extractPropsFr4 = _this._extractPropsFromItem(item),label = _this$_extractPropsFr4.label,itemValue = _this$_extractPropsFr4.value,customButtonProps = _this$_extractPropsFr4.buttonProps;
+        var _this$_extractPropsFr4 =
+        _this._extractPropsFromItem(item),ariaLabel = _this$_extractPropsFr4['aria-label'],label = _this$_extractPropsFr4.label,itemValue = _this$_extractPropsFr4.value,customButtonProps = _this$_extractPropsFr4.buttonProps;
         var isChecked = value === itemValue;
         var commonButtonProps = {
@@ -247,14 +258,14 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
         customButtonProps);
-        var renderDefault = function renderDefault() {return _this.renderDefaultItem(label, itemValue, buttonProps);};
+        var renderDefault = function renderDefault() {return _this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);};
-        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault) : renderDefault();
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();
       });
     };_this.
-    renderDefaultItem = function (label, value, buttonProps) {return /*#__PURE__*/(
-        _react.default.createElement(_Button.Button, (0, _extends2.default)({ key: value }, buttonProps),
+    renderDefaultItem = function (label, value, buttonProps, ariaLabel) {return /*#__PURE__*/(
+        _react.default.createElement(_Button.Button, (0, _extends2.default)({ "aria-label": ariaLabel, key: value }, buttonProps),
         label));};_this.

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Switcher.tsx"],"names":["SwitcherDataTids","root","Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","React","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\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';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\nexport type SwitcherSize = ButtonSize;\ntype SwitcherItems = string \| SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends CommonProps, Pick<HTMLAttributes<unknown>, 'role'> {\n /*\n Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n /\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /* Размер /\n size?: SwitcherSize;\n\n disabled?: boolean;\n\n /\n Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n label: string;\n value: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string \| SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const { label, value: itemValue, buttonProps: customButtonProps } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps) => (\n <Button key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}
1	+ {"version":3,"sources":["Switcher.tsx"],"names":["SwitcherDataTids","root","Switcher","rootNode","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","_focus","index","setState","handleKey","e","buttonProps","disabled","preventDefault","move","left","selectedIndex","newFocusedIndex","_getNextFocusedIndex","i","length","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","size","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","React","Component","__KONTUR_REACT_UI__","defaultProps","propTypes","PropTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { getButtonCorners, Group } from '../Group';\nimport { Button, ButtonProps } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\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 { SizeProp } from '../../lib/types/props';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\n\n/*\n @deprecated use SizeProp\n /\nexport type SwitcherSize = SizeProp;\ntype SwitcherItems = string \| SwitcherItem;\n\nexport const SwitcherDataTids = {\n root: 'Switcher__root',\n} as const;\n\nexport interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {\n /\n Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`\n /\n items: SwitcherItems[];\n\n value?: string;\n\n onValueChange?: (value: string) => void;\n\n caption?: string;\n\n error?: boolean;\n\n /* Размер /\n size?: SizeProp;\n\n disabled?: boolean;\n\n /\n Функция для отрисовки элемента. Аргументы — `label`,\n * `value`, `buttonProps`, `renderDefault`, `ariaLabel`\n */\n renderItem?: (\n label: string,\n value: string,\n buttonProps: ButtonProps,\n renderDefault: () => React.ReactNode,\n ariaLabel?: string,\n ) => React.ReactNode;\n}\n\ntype DefaultProps = Required<Pick<SwitcherProps, 'role'>>;\n\nexport interface SwitcherState {\n focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n value: string;\n label: string;\n 'aria-label'?: string;\n buttonProps?: Partial<ButtonProps>;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n public static __KONTUR_REACT_UI__ = 'Switcher';\n\n public static defaultProps: DefaultProps = {\n role: 'switch',\n };\n\n public static propTypes = {\n error: PropTypes.bool,\n disabled: PropTypes.bool,\n items: PropTypes.oneOfType([\n PropTypes.arrayOf(PropTypes.string),\n PropTypes.arrayOf(\n PropTypes.shape({\n label: PropTypes.string,\n value: PropTypes.string,\n }),\n ),\n ]).isRequired,\n caption: PropTypes.string,\n value: PropTypes.string,\n onValueChange: PropTypes.func,\n renderItem: PropTypes.func,\n };\n\n public state: SwitcherState = {\n focusedIndex: null,\n };\n\n private theme!: Theme;\n private setRootNode!: TSetRootNode;\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = getSwitcherTheme(theme);\n return <ThemeContext.Provider value={this.theme}>{this.renderMain()}</ThemeContext.Provider>;\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const listClassName = cx({\n [styles.error(this.theme)]: !!this.props.error,\n });\n\n const inputProps = {\n type: 'checkbox',\n onKeyDown: this.handleKey,\n onFocus: this._handleFocus,\n onBlur: this._handleBlur,\n className: styles.input(),\n };\n\n const captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={SwitcherDataTids.root} className={styles.root()}>\n {this.props.caption ? <div className={captionClassName}>{this.props.caption}</div> : null}\n <div className={styles.wrap()}>\n <input {...inputProps} />\n <div className={listClassName}>\n <Group>{this._renderItems()}</Group>\n </div>\n </div>\n </div>\n </CommonWrapper>\n );\n }\n\n private selectItem = (value: string) => {\n if (this.props.onValueChange) {\n this.props.onValueChange(value);\n }\n };\n\n private _extractPropsFromItem = (item: string \| SwitcherItem): SwitcherItem => {\n return typeof item === 'object' ? item : { label: item, value: item };\n };\n\n private _extractValuesFromItems = (): string[] => {\n return this.props.items.map((item) => {\n const { value } = this._extractPropsFromItem(item);\n return value;\n });\n };\n\n private _focus = (index: number) => {\n this.setState({ focusedIndex: index });\n };\n\n private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\n const focusedIndex = this.state.focusedIndex;\n if (typeof focusedIndex !== 'number') {\n return;\n }\n\n if (isKeyEnter(e)) {\n if (this.props.onValueChange) {\n const { value, buttonProps } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n if (!buttonProps?.disabled) {\n this.selectItem(value);\n }\n }\n return;\n }\n\n if (isKeyArrowHorizontal(e)) {\n e.preventDefault();\n this.move(isKeyArrowLeft(e));\n }\n };\n\n private move = (left: boolean) => {\n const selectedIndex = this.state.focusedIndex;\n\n if (typeof selectedIndex !== 'number') {\n return;\n }\n const newFocusedIndex = this._getNextFocusedIndex(left, selectedIndex);\n this._focus(newFocusedIndex);\n };\n\n private _getNextFocusedIndex = (left: boolean, focusedIndex: number): number => {\n const { items, disabled } = this.props;\n if (disabled) {\n return focusedIndex;\n }\n\n for (let i = 1; i < items.length; i++) {\n const index = mod(focusedIndex + (left ? -i : i), items.length);\n const { buttonProps } = this._extractPropsFromItem(items[index]);\n if (!buttonProps?.disabled) {\n return index;\n }\n }\n return focusedIndex;\n };\n\n private _handleFocus = () => {\n const { value } = this.props;\n\n const items = this._extractValuesFromItems();\n const currentIndex = [...items].indexOf(value as string);\n const index = currentIndex > -1 ? currentIndex : 0;\n\n this.setState({ focusedIndex: index });\n };\n\n private _handleBlur = () => {\n this.setState({ focusedIndex: null });\n };\n\n private _renderItems = () => {\n const { items, value, size, disabled, role, renderItem } = this.props;\n return items.map((item, i) => {\n const {\n 'aria-label': ariaLabel,\n label,\n value: itemValue,\n buttonProps: customButtonProps,\n } = this._extractPropsFromItem(item);\n\n const isChecked = value === itemValue;\n const commonButtonProps = {\n 'aria-checked': isChecked,\n role,\n checked: isChecked,\n visuallyFocused: this.state.focusedIndex === i,\n onClick: () => {\n this.selectItem(itemValue);\n },\n disableFocus: true,\n size,\n disabled,\n corners: getButtonCorners(i === 0, i === items.length - 1),\n };\n\n const buttonProps = {\n ...commonButtonProps,\n ...customButtonProps,\n };\n\n const renderDefault = () => this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);\n\n return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();\n });\n };\n\n private renderDefaultItem = (label: string, value: string, buttonProps: ButtonProps, ariaLabel?: string) => (\n <Button aria-label={ariaLabel} key={value} {...buttonProps}>\n {label}\n </Button>\n );\n\n private getLabelSizeClassName = (): string => {\n switch (this.props.size) {\n case 'large':\n return styles.captionLarge(this.theme);\n case 'medium':\n return styles.captionMedium(this.theme);\n case 'small':\n default:\n return styles.captionSmall(this.theme);\n }\n };\n}\n"]}

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

@@ -1,6 +1,7 @@
 import React, { AriaAttributes } from 'react';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
 import { TabsContextType } from './TabsContext';
 export interface TabIndicators {
     error: boolean;
@@ -12,78 +13,58 @@ export interface TabIndicators {
 export declare const TabDataTids: {
     readonly root: "Tab__root";
 };
-export interface TabProps<T extends string = string> extends CommonProps {
-    /**
-     * Tab content
-     */
-    children?: React.ReactNode;
+/**
+ * @deprecated use SizeProp
+ */
+export declare type TabSize = SizeProp;
+export interface TabProps<T extends string = string> extends Pick<AriaAttributes, 'aria-label' | 'aria-describedby'>, CommonProps {
     /**
-     * Component to use as a tab
+     * Позволяет передавать свой компонент, строку или функцию, которая заменит собой элемент используемый в компоненте по умолчанию. Реализует паттерн [render prop](https://www.patterns.dev/posts/render-props-pattern).
      */
     component?: React.ComponentType<any> | string;
     /**
-     * Link href
+     * `HTML`-аттрибут `href`.
      */
     href?: string;
     /**
-     * Tab identifier
+     * Уникальный идентификатор таба. По нему компонент `<Tabs />` определяет какой `<Tab />` сейчас выбран.
      */
     id?: T;
     /**
-     * Click event
+     * `HTML`-событие `onclick`.
      */
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
-     * Click event
+     * `HTML`-событие `onkeydown`.
      */
     onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;
     /**
-     * Disabled indicator
+     * Переводит компонент в отключенное состояние.
      */
     disabled?: boolean;
     /**
-     * Состояние валидации при ошибке.
+     * Визуальное состояние ошибки.
      */
     error?: boolean;
     /**
-     * Состояние валидации при предупреждении.
+     * Визуальное состояние предупреждения.
      */
     warning?: boolean;
     /**
-     * Success indicator
+     * Визуальное состояние успеха.
      */
     success?: boolean;
     /**
-     * Primary indicator
+     * Визуальное состояние главного элемента.
      */
     primary?: boolean;
-    /**
-     * Style property
-     */
-    style?: React.CSSProperties;
-    /**
-     * Атрибут для указания id элемента(-ов), описывающих его
-     */
-    'aria-describedby'?: AriaAttributes['aria-describedby'];
 }
 export interface TabState {
     focusedByKeyboard: boolean;
 }
 declare type DefaultProps = Required<Pick<TabProps, 'component' | 'href'>>;
 /**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
+ * Вложенный элемент компонента `<Tabs />`.
  */
 export declare class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {
     static __KONTUR_REACT_UI__: string;

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

@@ -13,6 +13,7 @@ var _Emotion = require("../../lib/theming/Emotion");
 var _rootNode = require("../../lib/rootNode");
 var _createPropsGetter = require("../../lib/createPropsGetter");
 var _TabsContext = require("./TabsContext");
 var _Tab = require("./Tab.styles");var _class, _class2, _temp;
@@ -25,9 +26,12 @@ var _Tab = require("./Tab.styles");var _class, _class2, _temp;
 var TabDataTids = {
-  root: 'Tab__root' };exports.TabDataTids = TabDataTids;
+  root: 'Tab__root' };
+/**
+ * @deprecated use SizeProp
+ */exports.TabDataTids = TabDataTids;
@@ -90,7 +94,11 @@ var TabDataTids = {
+/**
+ * Вложенный элемент компонента `<Tabs />`.
+ */var
+Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
@@ -101,23 +109,7 @@ var TabDataTids = {
-/**
- * Tab element of Tabs component
- *
- * Can be used for creating custom tabs
- * ```js
- *
- * const RouteTab = (props) => (
- *   <Tab id={props.to} component={RouteLink} {...props}/>
- * )
- *
- * const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>
- * ```
- *
- * Works only inside Tabs component, otherwise throws
- */var
-Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(Tab, _React$Component);
@@ -127,6 +119,8 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
+  function Tab(props) {var _this;
+    _this = _React$Component.call(this, props) || this;_this.context = _this.context;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Tab.defaultProps);_this.state = { focusedByKeyboard: false };_this.tabComponent = null;_this.
@@ -138,8 +132,6 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
-  function Tab(props) {var _this;
-    _this = _React$Component.call(this, props) || this;_this.context = _this.context;_this.getProps = (0, _createPropsGetter.createPropsGetter)(Tab.defaultProps);_this.state = { focusedByKeyboard: false };_this.tabComponent = null;_this.
@@ -173,6 +165,18 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
+    getUnderlyingNode = function () {return _this.tabComponent;};_this.
@@ -184,7 +188,6 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
-    getUnderlyingNode = function () {return _this.tabComponent;};_this.
@@ -305,4 +308,4 @@ Tab = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/function
       }
       _this.setState({ focusedByKeyboard: false });
-    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.root(this.theme)] = true, _cx[_Tab.styles.vertical(this.theme)] = !!isVertical, _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.styles.focus(this.theme), _Tab.globalClasses.focus) })));};return Tab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = _TabsContext.TabsContext, _class2.defaultProps = { component: 'a', href: '' }, _temp)) || _class;exports.Tab = Tab;
+    };(0, _invariant.default)(_this.context !== _TabsContext.TabsContextDefaultValue, 'Tab should be placed inside Tabs component');return _this;}var _proto = Tab.prototype;_proto.componentDidMount = function componentDidMount() {var id = this.getId();if (typeof id === 'string') {this.context.addTab(id, this.getTabInstance);}};_proto.componentDidUpdate = function componentDidUpdate() {if (this.context.activeTab === this.props.id) {this.context.notifyUpdate();}};_proto.componentWillUnmount = function componentWillUnmount() {var id = this.getId();if (typeof id === 'string') {this.context.removeTab(id);}};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.getIndicators = function getIndicators() {return { error: Boolean(this.props.error), warning: Boolean(this.props.warning), success: Boolean(this.props.success), primary: Boolean(this.props.primary), disabled: Boolean(this.props.disabled) };};_proto.renderMain = function renderMain() {var _cx, _cx2;var _this$props = this.props,children = _this$props.children,disabled = _this$props.disabled,error = _this$props.error,warning = _this$props.warning,success = _this$props.success,primary = _this$props.primary,ariaDescribedby = _this$props['aria-describedby'],ariaLabel = _this$props['aria-label'];var _this$getProps2 = this.getProps(),Component = _this$getProps2.component,href = _this$getProps2.href;var isActive = false;var isVertical = false;var id = this.getId();if (typeof id === 'string') {isActive = this.context.activeTab === this.getId();isVertical = this.context.vertical;}var orientationStyles = isVertical ? _Tab.verticalStyles : _Tab.horizontalStyles;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement(Component, { "data-tid": TabDataTids.root, className: (0, _Emotion.cx)((_cx = {}, _cx[_Tab.styles.rootSmall(this.theme)] = this.context.size === 'small', _cx[_Tab.styles.rootMedium(this.theme)] = this.context.size === 'medium', _cx[_Tab.styles.rootLarge(this.theme)] = this.context.size === 'large', _cx[_Tab.styles.verticalSmall(this.theme)] = !!isVertical && this.context.size === 'small', _cx[_Tab.styles.verticalMedium(this.theme)] = !!isVertical && this.context.size === 'medium', _cx[_Tab.styles.verticalLarge(this.theme)] = !!isVertical && this.context.size === 'large', _cx[orientationStyles.primary(this.theme)] = !!primary, _cx[orientationStyles.success(this.theme)] = !!success, _cx[orientationStyles.warning(this.theme)] = !!warning, _cx[orientationStyles.error(this.theme)] = !!error, _cx[_Tab.styles.active()] = !!isActive, _cx[orientationStyles.active(this.theme)] = !!isActive, _cx[_Tab.styles.disabled(this.theme)] = !!disabled, _cx[orientationStyles.disabled()] = !!disabled, _cx)), onBlur: this.handleBlur, onClick: this.switchTab, onFocus: this.handleFocus, onKeyDown: this.handleKeyDown, tabIndex: disabled ? -1 : 0, ref: (0, _utils.isFunctionalComponent)(Component) ? null : this.refTabComponent, href: href, "aria-describedby": ariaDescribedby, "aria-label": ariaLabel }, /*#__PURE__*/_react.default.createElement(_ResizeDetector.ResizeDetector, { onResize: this.context.notifyUpdate }, children), this.state.focusedByKeyboard && /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Tab.globalClasses.focus, (_cx2 = {}, _cx2[_Tab.styles.focusSmall(this.theme)] = this.context.size === 'small', _cx2[_Tab.styles.focusMedium(this.theme)] = this.context.size === 'medium', _cx2[_Tab.styles.focusLarge(this.theme)] = this.context.size === 'large', _cx2)) })));};return Tab;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = _TabsContext.TabsContext, _class2.defaultProps = { component: 'a', href: '' }, _temp)) || _class;exports.Tab = Tab;

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["Tab.tsx"],"names":["TabDataTids","root","Tab","rootNode","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","Component","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","setRootNode","styles","active","focus","globalClasses","React","__KONTUR_REACT_UI__","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\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';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } 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> extends CommonProps {\n /*\n Tab content\n /\n children?: React.ReactNode;\n\n /\n Component to use as a tab\n /\n component?: React.ComponentType<any> \| string;\n\n /\n Link href\n /\n href?: string;\n\n /\n Tab identifier\n /\n id?: T;\n\n /\n Click event\n /\n onClick?: (event: React.MouseEvent<HTMLElement>) => void;\n\n /\n Click event\n /\n onKeyDown?: (event: React.KeyboardEvent<HTMLElement>) => void;\n\n /\n Disabled indicator\n /\n disabled?: boolean;\n\n /\n Состояние валидации при ошибке.\n /\n error?: boolean;\n\n /\n Состояние валидации при предупреждении.\n /\n warning?: boolean;\n\n /\n Success indicator\n /\n success?: boolean;\n\n /\n Primary indicator\n /\n primary?: boolean;\n\n /\n Style property\n /\n style?: React.CSSProperties;\n\n /\n Атрибут для указания id элемента(-ов), описывающих его\n /\n 'aria-describedby'?: AriaAttributes['aria-describedby'];\n}\n\nexport interface TabState {\n focusedByKeyboard: boolean;\n}\n\ntype DefaultProps = Required<Pick<TabProps, 'component' \| 'href'>>;\n\n/\n Tab element of Tabs component\n \n Can be used for creating custom tabs\n * ```js\n \n const RouteTab = (props) => (\n * <Tab id={props.to} component={RouteLink} {...props}/>\n * )\n \n const MyAwesomeTab = (props) => <Tab id={props.id}>8) {props.children}</Tab>\n * ```\n \n Works only inside Tabs component, otherwise throws\n */\n@rootNode\nexport class Tab<T extends string = string> extends React.Component<TabProps<T>, TabState> {\n public static __KONTUR_REACT_UI__ = '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 { children, disabled, error, warning, success, primary, 'aria-describedby': ariaDescribedby } = 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 rootNodeRef={this.setRootNode} {...this.props}>\n <Component\n data-tid={TabDataTids.root}\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.vertical(this.theme)]: !!isVertical,\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 >\n <ResizeDetector onResize={this.context.notifyUpdate}>{children}</ResizeDetector>\n {this.state.focusedByKeyboard && <div className={cx(styles.focus(this.theme), globalClasses.focus)} />}\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 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"]}
1	+ {"version":3,"sources":["Tab.tsx"],"names":["TabDataTids","root","Tab","rootNode","props","context","getProps","defaultProps","state","focusedByKeyboard","tabComponent","getUnderlyingNode","getId","id","href","refTabComponent","instance","getTabInstance","switchTab","event","disabled","preventDefault","component","onClick","defaultPrevented","handleKeyDown","e","onKeyDown","delta","shiftFocus","handleFocus","requestAnimationFrame","keyListener","isTabPressed","isArrowPressed","setState","handleBlur","TabsContextDefaultValue","componentDidMount","addTab","componentDidUpdate","activeTab","notifyUpdate","componentWillUnmount","removeTab","render","theme","renderMain","getIndicators","error","Boolean","warning","success","primary","children","ariaDescribedby","ariaLabel","Component","isActive","isVertical","vertical","orientationStyles","verticalStyles","horizontalStyles","setRootNode","styles","rootSmall","size","rootMedium","rootLarge","verticalSmall","verticalMedium","verticalLarge","active","globalClasses","focus","focusSmall","focusMedium","focusLarge","React","__KONTUR_REACT_UI__","contextType","TabsContext"],"mappings":"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","sourcesContent":["import React, { AriaAttributes } from 'react';\nimport invariant from 'invariant';\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 { SizeProp } from '../../lib/types/props';\n\nimport { TabsContext, TabsContextType, TabsContextDefaultValue } from './TabsContext';\nimport { styles, horizontalStyles, verticalStyles, globalClasses } 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\n/*\n @deprecated use SizeProp\n /\nexport type TabSize = SizeProp;\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\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 rootNodeRef={this.setRootNode} {...this.props}>\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 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"]}

package/cjs/components/Tabs/Tab.md ADDED Viewed

@@ -0,0 +1,71 @@
+У компонента `<Tabs.Tab />` есть несколько визуальных состояний, в которых компонент может находиться: `primary`, `success`, `warning` и `error`. Чтобы перевести контрол в нужное состояние передайте компоненту булевый проп с соответсвующим названием.
+Используя переменные `tabColorPrimary`, `tabColorSuccess`, `tabColorWarning` и `tabColorError` можно изменить активный цвет состояния, а библиотека автоматически подберёт цвет подчёркивания при наведении.
+```jsx harmony
+import { ThemeContext, ThemeFactory, Button, Tabs } from '@skbkontur/react-ui';
+const getRandomColor = () => '#' + Math.random().toString(16).substr(-6);
+const updateColors = () => {
+  return {
+    tabColorPrimary: getRandomColor(),
+    tabColorSuccess: getRandomColor(),
+    tabColorWarning: getRandomColor(),
+    tabColorError: getRandomColor(),
+  }
+};
+const [activeBase, setActiveBase] = React.useState('error');
+const [activeRandom, setActiveRandom] = React.useState('error');
+const [colors, setColors] = React.useState(updateColors());
+<>
+  <p style={{ fontSize: '17px' }}>C цветами по умолчанию</p>
+  <Tabs value={activeBase} onValueChange={setActiveBase}>
+    <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+    <Tabs.Tab success id="success">Success</Tabs.Tab>
+    <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+    <Tabs.Tab error id="error">Error</Tabs.Tab>
+  </Tabs>
+  <p style={{ fontSize: '17px' }}>Со случайным основным цветом</p>
+  <div style={{ display: 'inline-flex', flexDirection: 'column', justifyContent: 'space-between', height: '100px' }}>
+    <ThemeContext.Consumer>
+      {(theme) => {
+        return (
+          <ThemeContext.Provider
+            value={ThemeFactory.create(colors,theme)}
+          >
+            <Tabs value={activeRandom} onValueChange={setActiveRandom}>
+            <Tabs.Tab primary id="primary">Primary</Tabs.Tab>
+            <Tabs.Tab success id="success">Success</Tabs.Tab>
+            <Tabs.Tab warning id="warning">Warning</Tabs.Tab>
+            <Tabs.Tab error id="error">Error</Tabs.Tab>
+          </Tabs>
+          </ThemeContext.Provider>
+        );
+      }}
+    </ThemeContext.Consumer>
+    <Button onClick={() => setColors(updateColors)}>Получить новый набор цветов</Button>
+  </div>
+</>
+```
+С помощью пропа `component` можно изменять корневой элемент `<Tab />`.
+Проп может принимать: компоненты, функции и строки.
+```jsx harmony
+import { Tabs } from '@skbkontur/react-ui';
+const [active, setActive] = React.useState('/fuji');
+const NavLink = props => <a {...props} />;
+<Tabs value={active} onValueChange={setActive}>
+  {/** Кастомный компонент **/}
+  <Tabs.Tab  component={(props) => <NavLink {...props} />} id="/fuji">🌋 Fuji</Tabs.Tab>
+  {/** Функция **/}
+  <Tabs.Tab component={(props) => <a {...props} />} id="/tahat">⛰ Tahat</Tabs.Tab>
+  {/** Строка **/}
+  <Tabs.Tab component="a" id="/alps">🗻 Alps</Tabs.Tab>
+</Tabs>;
+```

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

@@ -3,9 +3,15 @@ export declare const globalClasses: {
     focus: string;
 };
 export declare const styles: {
-    root(t: Theme): string;
-    vertical(t: Theme): string;
-    focus(t: Theme): string;
+    rootSmall(t: Theme): string;
+    rootMedium(t: Theme): string;
+    rootLarge(t: Theme): string;
+    verticalSmall(t: Theme): string;
+    verticalMedium(t: Theme): string;
+    verticalLarge(t: Theme): string;
+    focusSmall(t: Theme): string;
+    focusMedium(t: Theme): string;
+    focusLarge(t: Theme): string;
     disabled(t: Theme): string;
     active(): string;
 };