@skbkontur/react-ui 0.0.0-2ac4c133dd → 0.0.0-2dd5039746

package/components/Switcher/Switcher/Switcher.js

@@ -6,7 +6,7 @@ var _class, _class2, _temp;
 import React from 'react';
 import PropTypes from 'prop-types';
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
-import { Group } from "../../Group";
+import { getButtonCorners, Group } from "../../Group";
 import { Button } from "../../Button";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
@@ -14,6 +14,7 @@ import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
 import { styles } from "../Switcher.styles";
 import { getSwitcherTheme } from "../switcherTheme";
+import { mod } from "../helpers";
 export var SwitcherDataTids = {
   root: 'Switcher__root'
 };
@@ -54,26 +55,6 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       });
     };
 
-    _this.move = function (step) {
-      var selectedIndex = _this.state.focusedIndex;
-
-      if (typeof selectedIndex !== 'number') {
-        return;
-      }
-
-      var items = _this._extractValuesFromItems();
-
-      selectedIndex += step;
-
-      if (selectedIndex < 0) {
-        selectedIndex = items.length - 1;
-      } else if (selectedIndex >= items.length) {
-        selectedIndex = 0;
-      }
-
-      _this._focus(selectedIndex);
-    };
-
     _this._focus = function (index) {
       _this.setState({
         focusedIndex: index
@@ -90,9 +71,12 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       if (isKeyEnter(e)) {
         if (_this.props.onValueChange) {
           var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),
-              _value = _this$_extractPropsFr2.value;
+              _value = _this$_extractPropsFr2.value,
+              _buttonProps = _this$_extractPropsFr2.buttonProps;
 
-          _this.selectItem(_value);
+          if (!(_buttonProps != null && _buttonProps.disabled)) {
+            _this.selectItem(_value);
+          }
         }
 
         return;
@@ -101,10 +85,45 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
       if (isKeyArrowHorizontal(e)) {
         e.preventDefault();
 
-        _this.move(isKeyArrowLeft(e) ? -1 : 1);
+        _this.move(isKeyArrowLeft(e));
       }
     };
 
+    _this.move = function (left) {
+      var selectedIndex = _this.state.focusedIndex;
+
+      if (typeof selectedIndex !== 'number') {
+        return;
+      }
+
+      var newFocusedIndex = _this._getNextFocusedIndex(left, selectedIndex);
+
+      _this._focus(newFocusedIndex);
+    };
+
+    _this._getNextFocusedIndex = function (left, focusedIndex) {
+      var _this$props = _this.props,
+          items = _this$props.items,
+          disabled = _this$props.disabled;
+
+      if (disabled) {
+        return focusedIndex;
+      }
+
+      for (var i = 1; i < items.length; i++) {
+        var index = mod(focusedIndex + (left ? -i : i), items.length);
+
+        var _this$_extractPropsFr3 = _this._extractPropsFromItem(items[index]),
+            _buttonProps2 = _this$_extractPropsFr3.buttonProps;
+
+        if (!(_buttonProps2 != null && _buttonProps2.disabled)) {
+          return index;
+        }
+      }
+
+      return focusedIndex;
+    };
+
     _this._handleFocus = function () {
       var value = _this.props.value;
 
@@ -125,27 +144,46 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
     };
 
     _this._renderItems = function () {
-      return _this.props.items.map(function (item, i) {
-        var _this$_extractPropsFr3 = _this._extractPropsFromItem(item),
-            label = _this$_extractPropsFr3.label,
-            value = _this$_extractPropsFr3.value;
-
-        var buttonProps = {
-          checked: _this.props.value === value,
+      var _this$props2 = _this.props,
+          items = _this$props2.items,
+          value = _this$props2.value,
+          size = _this$props2.size,
+          disabled = _this$props2.disabled,
+          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 commonButtonProps = {
+          checked: value === itemValue,
           visuallyFocused: _this.state.focusedIndex === i,
           onClick: function onClick() {
-            _this.selectItem(value);
+            _this.selectItem(itemValue);
           },
           disableFocus: true,
-          size: _this.props.size,
-          disabled: _this.props.disabled
+          size: size,
+          disabled: disabled,
+          corners: getButtonCorners(i === 0, i === items.length - 1)
         };
-        return /*#__PURE__*/React.createElement(Button, _extends({
-          key: value
-        }, buttonProps), label);
+
+        var buttonProps = _extends({}, commonButtonProps, customButtonProps);
+
+        var renderDefault = function renderDefault() {
+          return _this.renderDefaultItem(label, itemValue, buttonProps);
+        };
+
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault) : renderDefault();
       });
     };
 
+    _this.renderDefaultItem = function (label, value, buttonProps) {
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        key: value
+      }, buttonProps), label);
+    };
+
     _this.getLabelSizeClassName = function () {
       switch (_this.props.size) {
         case 'large':
@@ -212,5 +250,6 @@ export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function
   }))]).isRequired,
   caption: PropTypes.string,
   value: PropTypes.string,
-  onValueChange: PropTypes.func
+  onValueChange: PropTypes.func,
+  renderItem: PropTypes.func
 }, _temp)) || _class;

package/components/Switcher/Switcher/Switcher.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","SwitcherDataTids","root","Switcher","state","focusedIndex","selectItem","value","props","onValueChange","_extractPropsFromItem","item","label","_extractValuesFromItems","items","map","move","step","selectedIndex","length","_focus","index","setState","handleKey","e","preventDefault","_handleFocus","currentIndex","indexOf","_handleBlur","_renderItems","i","buttonProps","checked","visuallyFocused","onClick","disableFocus","size","disabled","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, 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';\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 {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string }`\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\nexport interface SwitcherState {\n  focusedIndex: Nullable<number>;\n}\n\ninterface SwitcherItem {\n  label: string;\n  value: string;\n}\n\n@rootNode\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\n  public static __KONTUR_REACT_UI__ = 'Switcher';\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  };\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 move = (step: number) => {\n    let selectedIndex = this.state.focusedIndex;\n\n    if (typeof selectedIndex !== 'number') {\n      return;\n    }\n\n    const items = this._extractValuesFromItems();\n\n    selectedIndex += step;\n\n    if (selectedIndex < 0) {\n      selectedIndex = items.length - 1;\n    } else if (selectedIndex >= items.length) {\n      selectedIndex = 0;\n    }\n\n    this._focus(selectedIndex);\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 } = this._extractPropsFromItem(this.props.items[focusedIndex]);\n        this.selectItem(value);\n      }\n      return;\n    }\n\n    if (isKeyArrowHorizontal(e)) {\n      e.preventDefault();\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\n    }\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    return this.props.items.map((item, i) => {\n      const { label, value } = this._extractPropsFromItem(item);\n      const buttonProps = {\n        checked: this.props.value === value,\n        visuallyFocused: this.state.focusedIndex === i,\n        onClick: () => {\n          this.selectItem(value);\n        },\n        disableFocus: true,\n        size: this.props.size,\n        disabled: this.props.disabled,\n      };\n      return (\n        <Button key={value} {...buttonProps}>\n          {label}\n        </Button>\n      );\n    });\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"]}
+{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","ThemeContext","CommonWrapper","cx","rootNode","styles","getSwitcherTheme","mod","SwitcherDataTids","root","Switcher","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","renderItem","itemValue","customButtonProps","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React 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 {\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\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 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, renderItem } = this.props;\n    return items.map((item, i) => {\n      const { label, value: itemValue, buttonProps: customButtonProps } = this._extractPropsFromItem(item);\n      const commonButtonProps = {\n        checked: value === itemValue,\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"]}

package/components/Switcher/Switcher.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonSize } from '../Button';
+import { ButtonProps, ButtonSize } from '../Button';
 import { Nullable } from '../../typings/utility-types';
 import { CommonProps } from '../../internal/CommonWrapper';
 export declare type SwitcherSize = ButtonSize;
@@ -10,7 +10,7 @@ export declare const SwitcherDataTids: {
 };
 export interface SwitcherProps extends CommonProps {
     /**
-     * Список строк или список элементов типа `{ label: string, value: string }`
+     * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`
      */
     items: SwitcherItems[];
     value?: string;
@@ -20,6 +20,11 @@ export interface SwitcherProps extends CommonProps {
     /** Размер */
     size?: SwitcherSize;
     disabled?: boolean;
+    /**
+     * Функция для отрисовки элемента. Аргументы — `label`,
+     * `value`, `buttonProps`, `renderDefault`
+     */
+    renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode) => React.ReactNode;
 }
 export interface SwitcherState {
     focusedIndex: Nullable<number>;
@@ -27,6 +32,7 @@ export interface SwitcherState {
 interface SwitcherItem {
     label: string;
     value: string;
+    buttonProps?: Partial<ButtonProps>;
 }
 export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     static __KONTUR_REACT_UI__: string;
@@ -40,6 +46,7 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
         caption: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: SwitcherState;
     private theme;
@@ -49,12 +56,14 @@ export declare class Switcher extends React.Component<SwitcherProps, SwitcherSta
     private selectItem;
     private _extractPropsFromItem;
     private _extractValuesFromItems;
-    private move;
     private _focus;
     private handleKey;
+    private move;
+    private _getNextFocusedIndex;
     private _handleFocus;
     private _handleBlur;
     private _renderItems;
+    private renderDefaultItem;
     private getLabelSizeClassName;
 }
 export {};

package/components/Switcher/Switcher.md

@@ -8,3 +8,100 @@ const [value, setValue] = React.useState();
   onValueChange={setValue}
 />;
 ```
+
+Случай, когда `items` принимает объект типа `{ label: string, value: string }`:
+
+```jsx harmony
+const [value, setValue] = React.useState();
+const items = [
+  {
+    label: 'One',
+    value: '111',
+  },
+  {
+    label: 'Two',
+    value: '222',
+  },
+  {
+    label: 'Three',
+    value: '333',
+  }
+];
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+/>;
+```
+
+Вариант `items` с полем `buttonProps`, который позволяет кастомизировать кнопку:
+
+```jsx harmony
+const [value, setValue] = React.useState();
+const items = [
+  {
+    label: 'One',
+    value: '111',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      disabled: true,
+    }
+  },
+  {
+    label: 'Three',
+    value: '333',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      use: "primary",
+    }
+  },
+  {
+    label: 'Two',
+    value: '222',
+    buttonProps: {
+      'data-tid': "1-1-1",
+      arrow: true,
+    }
+  }
+];
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+/>;
+```
+
+Пример с методом `renderItem` для кастомизации `items`:
+
+```jsx harmony
+import {Hint, Tooltip} from '@skbkontur/react-ui';
+
+const [value, setValue] = React.useState();
+const items = ['One', 'Two', 'Three'];
+
+const renderItem = (label, value, buttonProps, renderDefault) => {
+  if (value === 'One') {
+    return <Hint pos="bottom" text="Подсказка" opened manual>{renderDefault()}</Hint>;
+  }
+  if (value === 'Three') {
+    return (
+      <Tooltip pos="right middle" trigger="opened" render={() => 'Тултип'}>
+        {renderDefault()}
+      </Tooltip>
+    );
+  }
+  return renderDefault();
+}
+
+<Switcher
+  caption="Switch the switcher"
+  items={items}
+  value={value}
+  onValueChange={setValue}
+  renderItem={renderItem}
+/>;
+```

package/components/Switcher/helpers/helpers.js

@@ -0,0 +1,3 @@
+export var mod = function mod(n, _mod) {
+  return (n % _mod + _mod) % _mod;
+};

package/components/Switcher/helpers/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["helpers.ts"],"names":["mod","n"],"mappings":"AAAA,OAAO,IAAMA,GAAG,GAAG,aAACC,CAAD,EAAYD,IAAZ,UAA4B,CAAEC,CAAC,GAAGD,IAAL,GAAYA,IAAb,IAAoBA,IAAhD,EAAZ","sourcesContent":["export const mod = (n: number, mod: number) => ((n % mod) + mod) % mod;\n"]}

package/components/Switcher/helpers/package.json

@@ -0,0 +1,6 @@
+{
+  "main": "../../../cjs/components/Switcher/helpers.js",
+  "module": "helpers",
+  "types": "../helpers.d.ts",
+  "sideEffects": false
+}

package/components/Switcher/helpers.d.ts

@@ -0,0 +1 @@
+export declare const mod: (n: number, mod: number) => number;

package/components/Tabs/Indicator/Indicator.js

@@ -70,7 +70,7 @@ export var Indicator = rootNode(_class = (_temp = _class2 = /*#__PURE__*/functio
     }
   };
 
-  _proto.componentDidUpdate = function componentDidUpdate(_, prevState) {
+  _proto.componentDidUpdate = function componentDidUpdate() {
     this.reflow();
   };
 

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

@@ -1 +1 @@
-{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","TabsDataTids","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","_","prevState","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate(_: IndicatorProps, prevState: IndicatorState) {\n    this.reflow();\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  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={cx(\n          styles.root(this.theme),\n          indicators.primary && styles.primary(this.theme),\n          indicators.success && styles.success(this.theme),\n          indicators.warning && styles.warning(this.theme),\n          indicators.error && styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (htmlNode && htmlNode instanceof HTMLElement) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"]}
+{"version":3,"sources":["Indicator.tsx"],"names":["React","throttle","LayoutEvents","ThemeContext","cx","getRootNode","rootNode","getDOMRect","styles","TabsContext","TabsDataTids","Indicator","context","state","eventListener","removeTabUpdatesListener","reflow","getTab","activeTab","node","nodeStyles","getStyles","stylesUpdated","some","prop","setState","componentDidMount","addListener","props","tabUpdates","on","componentWillUnmount","cancel","remove","componentDidUpdate","render","theme","renderMain","indicators","getIndicators","error","warning","success","primary","disabled","indicatorRoot","root","className","setRootNode","htmlNode","HTMLElement","rect","vertical","width","tabBorderWidth","left","offsetLeft","top","offsetTop","height","bottom","parseInt","offsetHeight","right","Component","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\nimport throttle from 'lodash.throttle';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Indicator.styles';\nimport { TabsContext, TabsContextType } from './TabsContext';\nimport { TabIndicators } from './Tab';\nimport { TabsDataTids } from './Tabs';\n\nexport interface IndicatorProps {\n  className?: string;\n  tabUpdates: {\n    on: (x0: () => void) => () => void;\n  };\n  vertical: boolean;\n}\n\nexport interface IndicatorState {\n  styles: React.CSSProperties;\n}\n\n@rootNode\nexport class Indicator extends React.Component<IndicatorProps, IndicatorState> {\n  public static contextType = TabsContext;\n  public context: TabsContextType = this.context;\n\n  public state: IndicatorState = {\n    styles: {},\n  };\n\n  private theme!: Theme;\n\n  private eventListener: Nullable<{\n    remove: () => void;\n  }> = null;\n\n  private removeTabUpdatesListener: Nullable<() => void> = null;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.eventListener = LayoutEvents.addListener(this.reflow);\n    this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);\n    this.reflow();\n  }\n\n  public componentWillUnmount() {\n    this.reflow.cancel();\n\n    if (this.eventListener) {\n      this.eventListener.remove();\n    }\n    if (this.removeTabUpdatesListener) {\n      this.removeTabUpdatesListener();\n    }\n  }\n\n  public componentDidUpdate() {\n    this.reflow();\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  private renderMain() {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const indicators: TabIndicators = (node && node.getIndicators && node.getIndicators()) || {\n      error: false,\n      warning: false,\n      success: false,\n      primary: false,\n      disabled: false,\n    };\n    return (\n      <div\n        data-tid={TabsDataTids.indicatorRoot}\n        className={cx(\n          styles.root(this.theme),\n          indicators.primary && styles.primary(this.theme),\n          indicators.success && styles.success(this.theme),\n          indicators.warning && styles.warning(this.theme),\n          indicators.error && styles.error(this.theme),\n          this.props.className,\n        )}\n        style={this.state.styles}\n        ref={this.setRootNode}\n      />\n    );\n  }\n\n  private reflow = throttle(() => {\n    const { getTab, activeTab } = this.context;\n    const node = getTab(activeTab);\n    const nodeStyles = this.getStyles(node);\n    const stylesUpdated = ['left', 'top', 'width', 'height'].some(\n      (prop) => nodeStyles[prop as keyof React.CSSProperties] !== this.state.styles[prop as keyof React.CSSProperties],\n    );\n    if (stylesUpdated) {\n      this.setState({ styles: nodeStyles });\n    }\n  }, 100);\n\n  private getStyles(node: any): React.CSSProperties {\n    const htmlNode = getRootNode(node);\n\n    if (htmlNode && htmlNode instanceof HTMLElement) {\n      const rect = getDOMRect(htmlNode);\n      if (this.props.vertical) {\n        return {\n          width: this.theme.tabBorderWidth,\n          left: htmlNode.offsetLeft,\n          top: htmlNode.offsetTop,\n          height: rect.bottom - rect.top,\n        };\n      }\n\n      const tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;\n      return {\n        left: htmlNode.offsetLeft,\n        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,\n        width: rect.right - rect.left,\n      };\n    }\n\n    return {};\n  }\n}\n"]}

package/components/Tabs/Indicator.d.ts

@@ -20,7 +20,7 @@ export declare class Indicator extends React.Component<IndicatorProps, Indicator
     private setRootNode;
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(_: IndicatorProps, prevState: IndicatorState): void;
+    componentDidUpdate(): void;
     render(): JSX.Element;
     private renderMain;
     private reflow;

package/components/Tabs/Tab/Tab.js

@@ -5,7 +5,6 @@ import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
 var _class, _class2, _temp;
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import invariant from 'invariant';
 import { ResizeDetector } from "../../../internal/ResizeDetector";
 import { isKeyArrow, isKeyArrowLeft, isKeyArrowUp } from "../../../lib/events/keyboard/identifiers";
@@ -15,6 +14,7 @@ import { ThemeContext } from "../../../lib/theming/ThemeContext";
 import { CommonWrapper } from "../../../internal/CommonWrapper";
 import { cx } from "../../../lib/theming/Emotion";
 import { rootNode } from "../../../lib/rootNode";
+import { createPropsGetter } from "../../../lib/createPropsGetter";
 import { TabsContext, TabsContextDefaultValue } from "../TabsContext";
 import { styles, horizontalStyles, verticalStyles, globalClasses } from "../Tab.styles";
 export var TabDataTids = {
@@ -44,6 +44,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
 
     _this = _React$Component.call(this, props) || this;
     _this.context = _this.context;
+    _this.getProps = createPropsGetter(Tab.defaultProps);
     _this.state = {
       focusedByKeyboard: false
     };
@@ -54,7 +55,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
     };
 
     _this.getId = function () {
-      return _this.props.id || _this.props.href;
+      return _this.props.id || _this.getProps().href;
     };
 
     _this.refTabComponent = function (instance) {
@@ -71,7 +72,11 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
         return;
       }
 
-      var id = _this.props.id || _this.props.href;
+      var _this$getProps = _this.getProps(),
+          href = _this$getProps.href,
+          component = _this$getProps.component;
+
+      var id = _this.props.id || href;
 
       if (_this.props.onClick) {
         _this.props.onClick(event);
@@ -85,7 +90,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
         _this.context.switchTab(id);
       }
 
-      if (_this.props.component === 'a' && !_this.props.href) {
+      if (component === 'a' && !href) {
         event.preventDefault();
       }
     };
@@ -202,9 +207,12 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
         warning = _this$props.warning,
         success = _this$props.success,
         primary = _this$props.primary,
-        _this$props$component = _this$props.component,
-        Component = _this$props$component === void 0 ? Tab.defaultProps.component : _this$props$component,
-        href = _this$props.href;
+        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();
@@ -226,7 +234,8 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
       onKeyDown: this.handleKeyDown,
       tabIndex: disabled ? -1 : 0,
       ref: isFunctionalComponent(Component) ? null : this.refTabComponent,
-      href: href
+      href: href,
+      "aria-describedby": ariaDescribedby
     }, /*#__PURE__*/React.createElement(ResizeDetector, {
       onResize: this.context.notifyUpdate
     }, children), this.state.focusedByKeyboard && /*#__PURE__*/React.createElement("div", {
@@ -235,13 +244,7 @@ var Tab = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Com
   };
 
   return Tab;
-}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = TabsContext, _class2.propTypes = {
-  children: PropTypes.node,
-  disabled: PropTypes.bool,
-  href: PropTypes.string.isRequired,
-  onClick: PropTypes.func,
-  onKeyDown: PropTypes.func
-}, _class2.defaultProps = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Tab', _class2.contextType = TabsContext, _class2.defaultProps = {
   component: 'a',
   href: ''
 }, _temp)) || _class;