@skbkontur/react-ui 0.0.0-e55f22da73 → 0.0.0-ea6161656e

package/components/Switcher/Switcher/Switcher.js

@@ -1,16 +1,28 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+
+var _class, _class2, _temp;
+
 import React from 'react';
 import PropTypes from 'prop-types';
-import cn from 'classnames';
 import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
-import { Group } from "../../Group";
+import { getButtonCorners, Group } from "../../Group";
 import { Button } from "../../Button";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { EmotionConsumer } from "../../../lib/theming/Emotion";
+import { rootNode } from "../../../lib/rootNode";
 import { ThemeContext } from "../../../lib/theming/ThemeContext";
-import { jsStyles } from "../Switcher.styles";
-export var Switcher =
-/*#__PURE__*/
-function (_React$Component) {
+import { getSwitcherTheme } from "../switcherTheme";
+import { mod } from "../helpers";
+import { getStyles } from "../Switcher.styles";
+/**
+ * @deprecated use SizeProp
+ */
+
+export var SwitcherDataTids = {
+  root: 'Switcher__root'
+};
+export var Switcher = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
   _inheritsLoose(Switcher, _React$Component);
 
   function Switcher() {
@@ -24,7 +36,6 @@ function (_React$Component) {
     _this.state = {
       focusedIndex: null
     };
-    _this.theme = void 0;
 
     _this.selectItem = function (value) {
       if (_this.props.onValueChange) {
@@ -48,26 +59,6 @@ function (_React$Component) {
       });
     };
 
-    _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
@@ -84,9 +75,12 @@ function (_React$Component) {
       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;
@@ -95,8 +89,43 @@ function (_React$Component) {
       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 () {
@@ -119,26 +148,68 @@ function (_React$Component) {
     };
 
     _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,
+          role = _this$props2.role,
+          renderItem = _this$props2.renderItem;
+      return items.map(function (item, i) {
+        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 = {
+          'aria-checked': isChecked,
+          role: role,
+          checked: isChecked,
           visuallyFocused: _this.state.focusedIndex === i,
           onClick: function onClick() {
-            _this.selectItem(value);
+            _this.selectItem(itemValue);
           },
           disableFocus: true,
-          size: _this.props.size
+          size: size,
+          disabled: disabled,
+          corners: getButtonCorners(i === 0, i === items.length - 1)
+        };
+
+        var buttonProps = _extends({}, commonButtonProps, customButtonProps);
+
+        var renderDefault = function renderDefault() {
+          return _this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);
         };
-        return React.createElement(Button, _extends({
-          key: value
-        }, buttonProps), label);
+
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();
       });
     };
 
+    _this.renderDefaultItem = function (label, value, buttonProps, ariaLabel) {
+      return /*#__PURE__*/React.createElement(Button, _extends({
+        "aria-label": ariaLabel,
+        key: value
+      }, buttonProps), label);
+    };
+
+    _this.getLabelSizeClassName = function () {
+      var styles = getStyles(_this.emotion);
+
+      switch (_this.props.size) {
+        case 'large':
+          return styles.captionLarge(_this.theme);
+
+        case 'medium':
+          return styles.captionMedium(_this.theme);
+
+        case 'small':
+        default:
+          return styles.captionSmall(_this.theme);
+      }
+    };
+
     return _this;
   }
 
@@ -147,42 +218,56 @@ function (_React$Component) {
   _proto.render = function render() {
     var _this2 = this;
 
-    return React.createElement(ThemeContext.Consumer, null, function (theme) {
-      _this2.theme = theme;
-      return _this2.renderMain();
+    return /*#__PURE__*/React.createElement(EmotionConsumer, null, function (emotion) {
+      _this2.emotion = emotion;
+      return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, function (theme) {
+        _this2.theme = getSwitcherTheme(theme);
+        return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
+          value: _this2.theme
+        }, _this2.renderMain());
+      });
     });
   };
 
   _proto.renderMain = function renderMain() {
-    var _cn;
+    var _this$emotion$cx;
 
-    var listClassName = cn((_cn = {}, _cn[jsStyles.error(this.theme)] = !!this.props.error, _cn));
+    var styles = getStyles(this.emotion);
+    var listClassName = this.emotion.cx((_this$emotion$cx = {}, _this$emotion$cx[styles.error(this.theme)] = !!this.props.error, _this$emotion$cx));
     var inputProps = {
       type: 'checkbox',
       onKeyDown: this.handleKey,
       onFocus: this._handleFocus,
       onBlur: this._handleBlur,
-      className: jsStyles.input()
+      className: styles.input()
     };
-    return React.createElement("div", null, this.props.label ? React.createElement("div", {
-      className: jsStyles.label()
-    }, this.props.label) : null, React.createElement("div", {
-      className: jsStyles.wrap()
-    }, React.createElement("input", inputProps), React.createElement("div", {
+    var captionClassName = this.emotion.cx(styles.caption(this.theme), this.getLabelSizeClassName());
+    return /*#__PURE__*/React.createElement(CommonWrapper, _extends({
+      rootNodeRef: this.setRootNode
+    }, this.props), /*#__PURE__*/React.createElement("div", {
+      "data-tid": SwitcherDataTids.root,
+      className: styles.root()
+    }, this.props.caption ? /*#__PURE__*/React.createElement("div", {
+      className: captionClassName
+    }, this.props.caption) : null, /*#__PURE__*/React.createElement("div", {
+      className: styles.wrap()
+    }, /*#__PURE__*/React.createElement("input", inputProps), /*#__PURE__*/React.createElement("div", {
       className: listClassName
-    }, React.createElement(Group, null, this._renderItems()))));
+    }, /*#__PURE__*/React.createElement(Group, null, this._renderItems())))));
   };
 
   return Switcher;
-}(React.Component);
-Switcher.__KONTUR_REACT_UI__ = 'Switcher';
-Switcher.propTypes = {
+}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.displayName = 'Switcher', _class2.defaultProps = {
+  role: 'switch'
+}, _class2.propTypes = {
   error: PropTypes.bool,
+  disabled: PropTypes.bool,
   items: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.arrayOf(PropTypes.shape({
     label: PropTypes.string,
     value: PropTypes.string
   }))]).isRequired,
-  label: PropTypes.string,
+  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","cn","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","jsStyles","Switcher","state","focusedIndex","theme","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","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"gIAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,EAAP,MAAe,YAAf;;AAEA,SAASC,oBAAT,EAA+BC,cAA/B,EAA+CC,UAA/C,QAAiE,uCAAjE;AACA,SAASC,KAAT,QAAsB,UAAtB;AACA,SAASC,MAAT,QAAmC,WAAnC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;;AAGA,SAASC,QAAT,QAAyB,mBAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+BA,WAAaC,QAAb;;;;;;;;;;;;;;;;;;;AAmBSC,IAAAA,KAnBT,GAmBgC;AAC5BC,MAAAA,YAAY,EAAE,IADc,EAnBhC;;;AAuBUC,IAAAA,KAvBV;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DUC,IAAAA,UA9DV,GA8DuB,UAACC,KAAD,EAAmB;AACtC,UAAI,MAAKC,KAAL,CAAWC,aAAf,EAA8B;AAC5B,cAAKD,KAAL,CAAWC,aAAX,CAAyBF,KAAzB;AACD;AACF,KAlEH;;AAoEUG,IAAAA,qBApEV,GAoEkC,UAACC,IAAD,EAA+C;AAC7E,aAAO,OAAOA,IAAP,KAAgB,QAAhB,GAA2BA,IAA3B,GAAkC,EAAEC,KAAK,EAAED,IAAT,EAAeJ,KAAK,EAAEI,IAAtB,EAAzC;AACD,KAtEH;;AAwEUE,IAAAA,uBAxEV,GAwEoC,YAAgB;AAChD,aAAO,MAAKL,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAAAJ,IAAI,EAAI;AAChB,cAAKD,qBAAL,CAA2BC,IAA3B,CADgB,CAC1BJ,KAD0B,yBAC1BA,KAD0B;AAElC,eAAOA,KAAP;AACD,OAHM,CAAP;AAID,KA7EH;;AA+EUS,IAAAA,IA/EV,GA+EiB,UAACC,IAAD,EAAkB;AAC/B,UAAIC,aAAa,GAAG,MAAKf,KAAL,CAAWC,YAA/B;;AAEA,UAAI,OAAOc,aAAP,KAAyB,QAA7B,EAAuC;AACrC;AACD;;AAED,UAAMJ,KAAK,GAAG,MAAKD,uBAAL,EAAd;;AAEAK,MAAAA,aAAa,IAAID,IAAjB;;AAEA,UAAIC,aAAa,GAAG,CAApB,EAAuB;AACrBA,QAAAA,aAAa,GAAGJ,KAAK,CAACK,MAAN,GAAe,CAA/B;AACD,OAFD,MAEO,IAAID,aAAa,IAAIJ,KAAK,CAACK,MAA3B,EAAmC;AACxCD,QAAAA,aAAa,GAAG,CAAhB;AACD;;AAED,YAAKE,MAAL,CAAYF,aAAZ;AACD,KAjGH;;AAmGUE,IAAAA,MAnGV,GAmGmB,UAACC,KAAD,EAAmB;AAClC,YAAKC,QAAL,CAAc,EAAElB,YAAY,EAAEiB,KAAhB,EAAd;AACD,KArGH;;AAuGUE,IAAAA,SAvGV,GAuGsB,UAACC,CAAD,EAA8C;AAChE,UAAMpB,YAAY,GAAG,MAAKD,KAAL,CAAWC,YAAhC;AACA,UAAI,OAAOA,YAAP,KAAwB,QAA5B,EAAsC;AACpC;AACD;;AAED,UAAIP,UAAU,CAAC2B,CAAD,CAAd,EAAmB;AACjB,YAAI,MAAKhB,KAAL,CAAWC,aAAf,EAA8B;AACV,gBAAKC,qBAAL,CAA2B,MAAKF,KAAL,CAAWM,KAAX,CAAiBV,YAAjB,CAA3B,CADU,CACpBG,MADoB,0BACpBA,KADoB;AAE5B,gBAAKD,UAAL,CAAgBC,MAAhB;AACD;AACD;AACD;;AAED,UAAIZ,oBAAoB,CAAC6B,CAAD,CAAxB,EAA6B;AAC3BA,QAAAA,CAAC,CAACC,cAAF;AACA,cAAKT,IAAL,CAAUpB,cAAc,CAAC4B,CAAD,CAAd,GAAoB,CAAC,CAArB,GAAyB,CAAnC;AACD;AACF,KAzHH;;AA2HUE,IAAAA,YA3HV,GA2HyB,YAAM;AACnBnB,MAAAA,KADmB,GACT,MAAKC,KADI,CACnBD,KADmB;;AAG3B,UAAMO,KAAK,GAAG,MAAKD,uBAAL,EAAd;AACA,UAAMc,YAAY,GAAG,UAAIb,KAAJ,EAAWc,OAAX,CAAmBrB,KAAnB,CAArB;AACA,UAAMc,KAAK,GAAGM,YAAY,GAAG,CAAC,CAAhB,GAAoBA,YAApB,GAAmC,CAAjD;;AAEA,YAAKL,QAAL,CAAc,EAAElB,YAAY,EAAEiB,KAAhB,EAAd;AACD,KAnIH;;AAqIUQ,IAAAA,WArIV,GAqIwB,YAAM;AAC1B,YAAKP,QAAL,CAAc,EAAElB,YAAY,EAAE,IAAhB,EAAd;AACD,KAvIH;;AAyIU0B,IAAAA,YAzIV,GAyIyB,YAAM;AAC3B,aAAO,MAAKtB,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAOoB,CAAP,EAAa;AACd,cAAKrB,qBAAL,CAA2BC,IAA3B,CADc,CAC/BC,KAD+B,0BAC/BA,KAD+B,CACxBL,KADwB,0BACxBA,KADwB;AAEvC,YAAMyB,WAAW,GAAG;AAClBC,UAAAA,OAAO,EAAE,MAAKzB,KAAL,CAAWD,KAAX,KAAqBA,KADZ;AAElB2B,UAAAA,eAAe,EAAE,MAAK/B,KAAL,CAAWC,YAAX,KAA4B2B,CAF3B;AAGlBI,UAAAA,OAAO,EAAE,mBAAM;AACb,kBAAK7B,UAAL,CAAgBC,KAAhB;AACD,WALiB;AAMlB6B,UAAAA,YAAY,EAAE,IANI;AAOlBC,UAAAA,IAAI,EAAE,MAAK7B,KAAL,CAAW6B,IAPC,EAApB;;AASA;AACE,8BAAC,MAAD,aAAQ,GAAG,EAAE9B,KAAb,IAAwByB,WAAxB;AACGpB,UAAAA,KADH,CADF;;;AAKD,OAhBM,CAAP;AAiBD,KA3JH,sDAyBS0B,MAzBT,GAyBE,kBAAgB,mBACd,OACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAAAjC,KAAK,EAAI,CACR,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACkC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAlCH,QAoCUA,UApCV,GAoCE,sBAAqB,SACnB,IAAMC,aAAa,GAAG9C,EAAE,gBACrBO,QAAQ,CAACwC,KAAT,CAAe,KAAKpC,KAApB,CADqB,IACQ,CAAC,CAAC,KAAKG,KAAL,CAAWiC,KADrB,OAAxB,CAIA,IAAMC,UAAU,GAAG,EACjBC,IAAI,EAAE,UADW,EAEjBC,SAAS,EAAE,KAAKrB,SAFC,EAGjBsB,OAAO,EAAE,KAAKnB,YAHG,EAIjBoB,MAAM,EAAE,KAAKjB,WAJI,EAKjBkB,SAAS,EAAE9C,QAAQ,CAAC+C,KAAT,EALM,EAAnB,CAQA,OACE,iCACG,KAAKxC,KAAL,CAAWI,KAAX,GAAmB,6BAAK,SAAS,EAAEX,QAAQ,CAACW,KAAT,EAAhB,IAAmC,KAAKJ,KAAL,CAAWI,KAA9C,CAAnB,GAAgF,IADnF,EAEE,6BAAK,SAAS,EAAEX,QAAQ,CAACgD,IAAT,EAAhB,IACE,6BAAWP,UAAX,CADF,EAEE,6BAAK,SAAS,EAAEF,aAAhB,IACE,oBAAC,KAAD,QAAQ,KAAKV,YAAL,EAAR,CADF,CAFF,CAFF,CADF,CAWD,CA5DH,mBAA8BtC,KAAK,CAAC0D,SAApC,EAAahD,Q,CACGiD,mB,GAAsB,U,CADzBjD,Q,CAGGkD,S,GAAY,EACxBX,KAAK,EAAEhD,SAAS,CAAC4D,IADO,EAExBvC,KAAK,EAAErB,SAAS,CAAC6D,SAAV,CAAoB,CACzB7D,SAAS,CAAC8D,OAAV,CAAkB9D,SAAS,CAAC+D,MAA5B,CADyB,EAEzB/D,SAAS,CAAC8D,OAAV,CACE9D,SAAS,CAACgE,KAAV,CAAgB,EACd7C,KAAK,EAAEnB,SAAS,CAAC+D,MADH,EAEdjD,KAAK,EAAEd,SAAS,CAAC+D,MAFH,EAAhB,CADF,CAFyB,CAApB,EAQJE,UAVqB,EAWxB9C,KAAK,EAAEnB,SAAS,CAAC+D,MAXO,EAYxBjD,KAAK,EAAEd,SAAS,CAAC+D,MAZO,EAaxB/C,aAAa,EAAEhB,SAAS,CAACkE,IAbD,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\r\nimport { Group } from '../Group';\r\nimport { Button, ButtonSize } from '../Button';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\n\r\nimport { jsStyles } from './Switcher.styles';\r\n\r\nexport type SwitcherSize = ButtonSize;\r\n\r\nexport interface SwitcherProps {\r\n  /**\r\n   * Список строк или список элементов типа `{ label: string, value: string }`\r\n   */\r\n  items: Array<string | SwitcherItem>;\r\n\r\n  value?: string;\r\n\r\n  onValueChange?: (value: string) => void;\r\n\r\n  label?: string;\r\n\r\n  error?: boolean;\r\n\r\n  /** Размер */\r\n  size?: SwitcherSize;\r\n}\r\n\r\nexport interface SwitcherState {\r\n  focusedIndex: Nullable<number>;\r\n}\r\n\r\ninterface SwitcherItem {\r\n  label: string;\r\n  value: string;\r\n}\r\n\r\nexport class Switcher extends React.Component<SwitcherProps, SwitcherState> {\r\n  public static __KONTUR_REACT_UI__ = 'Switcher';\r\n\r\n  public static propTypes = {\r\n    error: PropTypes.bool,\r\n    items: PropTypes.oneOfType([\r\n      PropTypes.arrayOf(PropTypes.string),\r\n      PropTypes.arrayOf(\r\n        PropTypes.shape({\r\n          label: PropTypes.string,\r\n          value: PropTypes.string,\r\n        }),\r\n      ),\r\n    ]).isRequired,\r\n    label: PropTypes.string,\r\n    value: PropTypes.string,\r\n    onValueChange: PropTypes.func,\r\n  };\r\n\r\n  public state: SwitcherState = {\r\n    focusedIndex: null,\r\n  };\r\n\r\n  private theme!: Theme;\r\n\r\n  public render() {\r\n    return (\r\n      <ThemeContext.Consumer>\r\n        {theme => {\r\n          this.theme = theme;\r\n          return this.renderMain();\r\n        }}\r\n      </ThemeContext.Consumer>\r\n    );\r\n  }\r\n\r\n  private renderMain() {\r\n    const listClassName = cn({\r\n      [jsStyles.error(this.theme)]: !!this.props.error,\r\n    });\r\n\r\n    const inputProps = {\r\n      type: 'checkbox',\r\n      onKeyDown: this.handleKey,\r\n      onFocus: this._handleFocus,\r\n      onBlur: this._handleBlur,\r\n      className: jsStyles.input(),\r\n    };\r\n\r\n    return (\r\n      <div>\r\n        {this.props.label ? <div className={jsStyles.label()}>{this.props.label}</div> : null}\r\n        <div className={jsStyles.wrap()}>\r\n          <input {...inputProps} />\r\n          <div className={listClassName}>\r\n            <Group>{this._renderItems()}</Group>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  private selectItem = (value: string) => {\r\n    if (this.props.onValueChange) {\r\n      this.props.onValueChange(value);\r\n    }\r\n  };\r\n\r\n  private _extractPropsFromItem = (item: string | SwitcherItem): SwitcherItem => {\r\n    return typeof item === 'object' ? item : { label: item, value: item };\r\n  };\r\n\r\n  private _extractValuesFromItems = (): string[] => {\r\n    return this.props.items.map(item => {\r\n      const { value } = this._extractPropsFromItem(item);\r\n      return value;\r\n    });\r\n  };\r\n\r\n  private move = (step: number) => {\r\n    let selectedIndex = this.state.focusedIndex;\r\n\r\n    if (typeof selectedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    const items = this._extractValuesFromItems();\r\n\r\n    selectedIndex += step;\r\n\r\n    if (selectedIndex < 0) {\r\n      selectedIndex = items.length - 1;\r\n    } else if (selectedIndex >= items.length) {\r\n      selectedIndex = 0;\r\n    }\r\n\r\n    this._focus(selectedIndex);\r\n  };\r\n\r\n  private _focus = (index: number) => {\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private handleKey = (e: React.KeyboardEvent<HTMLInputElement>) => {\r\n    const focusedIndex = this.state.focusedIndex;\r\n    if (typeof focusedIndex !== 'number') {\r\n      return;\r\n    }\r\n\r\n    if (isKeyEnter(e)) {\r\n      if (this.props.onValueChange) {\r\n        const { value } = this._extractPropsFromItem(this.props.items[focusedIndex]);\r\n        this.selectItem(value);\r\n      }\r\n      return;\r\n    }\r\n\r\n    if (isKeyArrowHorizontal(e)) {\r\n      e.preventDefault();\r\n      this.move(isKeyArrowLeft(e) ? -1 : 1);\r\n    }\r\n  };\r\n\r\n  private _handleFocus = () => {\r\n    const { value } = this.props;\r\n\r\n    const items = this._extractValuesFromItems();\r\n    const currentIndex = [...items].indexOf(value as string);\r\n    const index = currentIndex > -1 ? currentIndex : 0;\r\n\r\n    this.setState({ focusedIndex: index });\r\n  };\r\n\r\n  private _handleBlur = () => {\r\n    this.setState({ focusedIndex: null });\r\n  };\r\n\r\n  private _renderItems = () => {\r\n    return this.props.items.map((item, i) => {\r\n      const { label, value } = this._extractPropsFromItem(item);\r\n      const buttonProps = {\r\n        checked: this.props.value === value,\r\n        visuallyFocused: this.state.focusedIndex === i,\r\n        onClick: () => {\r\n          this.selectItem(value);\r\n        },\r\n        disableFocus: true,\r\n        size: this.props.size,\r\n      };\r\n      return (\r\n        <Button key={value} {...buttonProps}>\r\n          {label}\r\n        </Button>\r\n      );\r\n    });\r\n  };\r\n}\r\n"]}
+{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","getButtonCorners","Group","Button","CommonWrapper","EmotionConsumer","rootNode","ThemeContext","getSwitcherTheme","mod","getStyles","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","role","renderItem","ariaLabel","itemValue","customButtonProps","isChecked","commonButtonProps","checked","visuallyFocused","onClick","disableFocus","corners","renderDefault","renderDefaultItem","getLabelSizeClassName","styles","emotion","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","cx","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","wrap","Component","__KONTUR_REACT_UI__","displayName","defaultProps","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"2JAAA,OAAOA,KAAP,MAAsC,OAAtC;AACA,OAAOC,SAAP,MAAsB,YAAtB;;;AAGA,SAASC,oBAAT,EAA+BC,cAA/B,EAA+CC,UAA/C,QAAiE,uCAAjE;AACA,SAASC,gBAAT,EAA2BC,KAA3B,QAAwC,UAAxC;AACA,SAASC,MAAT,QAAoC,WAApC;;;AAGA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,eAAT,QAAgC,2BAAhC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAASC,gBAAT,QAAiC,iBAAjC;AACA,SAASC,GAAT,QAAoB,WAApB;AACA,SAASC,SAAT,QAA0B,mBAA1B;;AAEA;AACA;AACA;;;;AAIA,OAAO,IAAMC,gBAAgB,GAAG;AAC9BC,EAAAA,IAAI,EAAE,gBADwB,EAAzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDP,WAAaC,QAAb,GADCP,QACD;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BSQ,IAAAA,KA1BT,GA0BgC;AAC5BC,MAAAA,YAAY,EAAE,IADc,EA1BhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmFUC,IAAAA,UAnFV,GAmFuB,UAACC,KAAD,EAAmB;AACtC,UAAI,MAAKC,KAAL,CAAWC,aAAf,EAA8B;AAC5B,cAAKD,KAAL,CAAWC,aAAX,CAAyBF,KAAzB;AACD;AACF,KAvFH;;AAyFUG,IAAAA,qBAzFV,GAyFkC,UAACC,IAAD,EAA+C;AAC7E,aAAO,OAAOA,IAAP,KAAgB,QAAhB,GAA2BA,IAA3B,GAAkC,EAAEC,KAAK,EAAED,IAAT,EAAeJ,KAAK,EAAEI,IAAtB,EAAzC;AACD,KA3FH;;AA6FUE,IAAAA,uBA7FV,GA6FoC,YAAgB;AAChD,aAAO,MAAKL,KAAL,CAAWM,KAAX,CAAiBC,GAAjB,CAAqB,UAACJ,IAAD,EAAU;AACpC,oCAAkB,MAAKD,qBAAL,CAA2BC,IAA3B,CAAlB,CAAQJ,KAAR,yBAAQA,KAAR;AACA,eAAOA,KAAP;AACD,OAHM,CAAP;AAID,KAlGH;;AAoGUS,IAAAA,MApGV,GAoGmB,UAACC,KAAD,EAAmB;AAClC,YAAKC,QAAL,CAAc,EAAEb,YAAY,EAAEY,KAAhB,EAAd;AACD,KAtGH;;AAwGUE,IAAAA,SAxGV,GAwGsB,UAACC,CAAD,EAA8C;AAChE,UAAMf,YAAY,GAAG,MAAKD,KAAL,CAAWC,YAAhC;AACA,UAAI,OAAOA,YAAP,KAAwB,QAA5B,EAAsC;AACpC;AACD;;AAED,UAAIf,UAAU,CAAC8B,CAAD,CAAd,EAAmB;AACjB,YAAI,MAAKZ,KAAL,CAAWC,aAAf,EAA8B;AAC5B,uCAA+B,MAAKC,qBAAL,CAA2B,MAAKF,KAAL,CAAWM,KAAX,CAAiBT,YAAjB,CAA3B,CAA/B,CAAQE,MAAR,0BAAQA,KAAR,CAAec,YAAf,0BAAeA,WAAf;AACA,cAAI,EAACA,YAAD,YAACA,YAAW,CAAEC,QAAd,CAAJ,EAA4B;AAC1B,kBAAKhB,UAAL,CAAgBC,MAAhB;AACD;AACF;AACD;AACD;;AAED,UAAInB,oBAAoB,CAACgC,CAAD,CAAxB,EAA6B;AAC3BA,QAAAA,CAAC,CAACG,cAAF;AACA,cAAKC,IAAL,CAAUnC,cAAc,CAAC+B,CAAD,CAAxB;AACD;AACF,KA5HH;;AA8HUI,IAAAA,IA9HV,GA8HiB,UAACC,IAAD,EAAmB;AAChC,UAAMC,aAAa,GAAG,MAAKtB,KAAL,CAAWC,YAAjC;;AAEA,UAAI,OAAOqB,aAAP,KAAyB,QAA7B,EAAuC;AACrC;AACD;AACD,UAAMC,eAAe,GAAG,MAAKC,oBAAL,CAA0BH,IAA1B,EAAgCC,aAAhC,CAAxB;AACA,YAAKV,MAAL,CAAYW,eAAZ;AACD,KAtIH;;AAwIUC,IAAAA,oBAxIV,GAwIiC,UAACH,IAAD,EAAgBpB,YAAhB,EAAiD;AAC9E,wBAA4B,MAAKG,KAAjC,CAAQM,KAAR,eAAQA,KAAR,CAAeQ,QAAf,eAAeA,QAAf;AACA,UAAIA,QAAJ,EAAc;AACZ,eAAOjB,YAAP;AACD;;AAED,WAAK,IAAIwB,CAAC,GAAG,CAAb,EAAgBA,CAAC,GAAGf,KAAK,CAACgB,MAA1B,EAAkCD,CAAC,EAAnC,EAAuC;AACrC,YAAMZ,KAAK,GAAGlB,GAAG,CAACM,YAAY,IAAIoB,IAAI,GAAG,CAACI,CAAJ,GAAQA,CAAhB,CAAb,EAAiCf,KAAK,CAACgB,MAAvC,CAAjB;AACA,qCAAwB,MAAKpB,qBAAL,CAA2BI,KAAK,CAACG,KAAD,CAAhC,CAAxB,CAAQI,aAAR,0BAAQA,WAAR;AACA,YAAI,EAACA,aAAD,YAACA,aAAW,CAAEC,QAAd,CAAJ,EAA4B;AAC1B,iBAAOL,KAAP;AACD;AACF;AACD,aAAOZ,YAAP;AACD,KAtJH;;AAwJU0B,IAAAA,YAxJV,GAwJyB,YAAM;AAC3B,UAAQxB,KAAR,GAAkB,MAAKC,KAAvB,CAAQD,KAAR;;AAEA,UAAMO,KAAK,GAAG,MAAKD,uBAAL,EAAd;AACA,UAAMmB,YAAY,GAAG,UAAIlB,KAAJ,EAAWmB,OAAX,CAAmB1B,KAAnB,CAArB;AACA,UAAMU,KAAK,GAAGe,YAAY,GAAG,CAAC,CAAhB,GAAoBA,YAApB,GAAmC,CAAjD;;AAEA,YAAKd,QAAL,CAAc,EAAEb,YAAY,EAAEY,KAAhB,EAAd;AACD,KAhKH;;AAkKUiB,IAAAA,WAlKV,GAkKwB,YAAM;AAC1B,YAAKhB,QAAL,CAAc,EAAEb,YAAY,EAAE,IAAhB,EAAd;AACD,KApKH;;AAsKU8B,IAAAA,YAtKV,GAsKyB,YAAM;AAC3B,yBAA2D,MAAK3B,KAAhE,CAAQM,KAAR,gBAAQA,KAAR,CAAeP,KAAf,gBAAeA,KAAf,CAAsB6B,IAAtB,gBAAsBA,IAAtB,CAA4Bd,QAA5B,gBAA4BA,QAA5B,CAAsCe,IAAtC,gBAAsCA,IAAtC,CAA4CC,UAA5C,gBAA4CA,UAA5C;AACA,aAAOxB,KAAK,CAACC,GAAN,CAAU,UAACJ,IAAD,EAAOkB,CAAP,EAAa;AAC5B;;;;;AAKI,cAAKnB,qBAAL,CAA2BC,IAA3B,CALJ,CACgB4B,SADhB,0BACE,YADF,EAEE3B,KAFF,0BAEEA,KAFF,CAGS4B,SAHT,0BAGEjC,KAHF,CAIekC,iBAJf,0BAIEpB,WAJF;;AAOA,YAAMqB,SAAS,GAAGnC,KAAK,KAAKiC,SAA5B;AACA,YAAMG,iBAAiB,GAAG;AACxB,0BAAgBD,SADQ;AAExBL,UAAAA,IAAI,EAAJA,IAFwB;AAGxBO,UAAAA,OAAO,EAAEF,SAHe;AAIxBG,UAAAA,eAAe,EAAE,MAAKzC,KAAL,CAAWC,YAAX,KAA4BwB,CAJrB;AAKxBiB,UAAAA,OAAO,EAAE,mBAAM;AACb,kBAAKxC,UAAL,CAAgBkC,SAAhB;AACD,WAPuB;AAQxBO,UAAAA,YAAY,EAAE,IARU;AASxBX,UAAAA,IAAI,EAAJA,IATwB;AAUxBd,UAAAA,QAAQ,EAARA,QAVwB;AAWxB0B,UAAAA,OAAO,EAAEzD,gBAAgB,CAACsC,CAAC,KAAK,CAAP,EAAUA,CAAC,KAAKf,KAAK,CAACgB,MAAN,GAAe,CAA/B,CAXD,EAA1B;;;AAcA,YAAMT,WAAW;AACZsB,QAAAA,iBADY;AAEZF,QAAAA,iBAFY,CAAjB;;;AAKA,YAAMQ,aAAa,GAAG,SAAhBA,aAAgB,WAAM,MAAKC,iBAAL,CAAuBtC,KAAvB,EAA8B4B,SAA9B,EAAyCnB,WAAzC,EAAsDkB,SAAtD,CAAN,EAAtB;;AAEA,eAAOD,UAAU,GAAGA,UAAU,CAAC1B,KAAD,EAAQ4B,SAAR,EAAmBnB,WAAnB,EAAgC4B,aAAhC,EAA+CV,SAA/C,CAAb,GAAyEU,aAAa,EAAvG;AACD,OA/BM,CAAP;AAgCD,KAxMH;;AA0MUC,IAAAA,iBA1MV,GA0M8B,UAACtC,KAAD,EAAgBL,KAAhB,EAA+Bc,WAA/B,EAAyDkB,SAAzD;AAC1B,4BAAC,MAAD,aAAQ,cAAYA,SAApB,EAA+B,GAAG,EAAEhC,KAApC,IAA+Cc,WAA/C;AACGT,QAAAA,KADH,CAD0B,GA1M9B;;;;AAgNUuC,IAAAA,qBAhNV,GAgNkC,YAAc;AAC5C,UAAMC,MAAM,GAAGpD,SAAS,CAAC,MAAKqD,OAAN,CAAxB;AACA,cAAQ,MAAK7C,KAAL,CAAW4B,IAAnB;AACE,aAAK,OAAL;AACE,iBAAOgB,MAAM,CAACE,YAAP,CAAoB,MAAKC,KAAzB,CAAP;AACF,aAAK,QAAL;AACE,iBAAOH,MAAM,CAACI,aAAP,CAAqB,MAAKD,KAA1B,CAAP;AACF,aAAK,OAAL;AACA;AACE,iBAAOH,MAAM,CAACK,YAAP,CAAoB,MAAKF,KAAzB,CAAP,CAPJ;;AASD,KA3NH,sDAkCSG,MAlCT,GAkCE,kBAAgB,mBACd,oBACE,oBAAC,eAAD,QACG,UAACL,OAAD,EAAa,CACZ,MAAI,CAACA,OAAL,GAAeA,OAAf,CACA,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACE,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAazD,gBAAgB,CAACyD,KAAD,CAA7B,CACA,oBAAO,oBAAC,YAAD,CAAc,QAAd,IAAuB,KAAK,EAAE,MAAI,CAACA,KAAnC,IAA2C,MAAI,CAACI,UAAL,EAA3C,CAAP,CACD,CAJH,CADF,CAQD,CAXH,CADF,CAeD,CAlDH,QAoDUA,UApDV,GAoDE,sBAAqB,sBACnB,IAAMP,MAAM,GAAGpD,SAAS,CAAC,KAAKqD,OAAN,CAAxB,CACA,IAAMO,aAAa,GAAG,KAAKP,OAAL,CAAaQ,EAAb,0CACnBT,MAAM,CAACU,KAAP,CAAa,KAAKP,KAAlB,CADmB,IACQ,CAAC,CAAC,KAAK/C,KAAL,CAAWsD,KADrB,oBAAtB,CAIA,IAAMC,UAAU,GAAG,EACjBC,IAAI,EAAE,UADW,EAEjBC,SAAS,EAAE,KAAK9C,SAFC,EAGjB+C,OAAO,EAAE,KAAKnC,YAHG,EAIjBoC,MAAM,EAAE,KAAKjC,WAJI,EAKjBkC,SAAS,EAAEhB,MAAM,CAACiB,KAAP,EALM,EAAnB,CAQA,IAAMC,gBAAgB,GAAG,KAAKjB,OAAL,CAAaQ,EAAb,CAAgBT,MAAM,CAACmB,OAAP,CAAe,KAAKhB,KAApB,CAAhB,EAA4C,KAAKJ,qBAAL,EAA5C,CAAzB,CAEA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKqB,WAAjC,IAAkD,KAAKhE,KAAvD,gBACE,6BAAK,YAAUP,gBAAgB,CAACC,IAAhC,EAAsC,SAAS,EAAEkD,MAAM,CAAClD,IAAP,EAAjD,IACG,KAAKM,KAAL,CAAW+D,OAAX,gBAAqB,6BAAK,SAAS,EAAED,gBAAhB,IAAmC,KAAK9D,KAAL,CAAW+D,OAA9C,CAArB,GAAoF,IADvF,eAEE,6BAAK,SAAS,EAAEnB,MAAM,CAACqB,IAAP,EAAhB,iBACE,6BAAWV,UAAX,CADF,eAEE,6BAAK,SAAS,EAAEH,aAAhB,iBACE,oBAAC,KAAD,QAAQ,KAAKzB,YAAL,EAAR,CADF,CAFF,CAFF,CADF,CADF,CAaD,CAjFH,mBAA8BjD,KAAK,CAACwF,SAApC,WACgBC,mBADhB,GACsC,UADtC,UAEgBC,WAFhB,GAE8B,UAF9B,UAIgBC,YAJhB,GAI6C,EACzCxC,IAAI,EAAE,QADmC,EAJ7C,UAQgByC,SARhB,GAQ4B,EACxBhB,KAAK,EAAE3E,SAAS,CAAC4F,IADO,EAExBzD,QAAQ,EAAEnC,SAAS,CAAC4F,IAFI,EAGxBjE,KAAK,EAAE3B,SAAS,CAAC6F,SAAV,CAAoB,CACzB7F,SAAS,CAAC8F,OAAV,CAAkB9F,SAAS,CAAC+F,MAA5B,CADyB,EAEzB/F,SAAS,CAAC8F,OAAV,CACE9F,SAAS,CAACgG,KAAV,CAAgB,EACdvE,KAAK,EAAEzB,SAAS,CAAC+F,MADH,EAEd3E,KAAK,EAAEpB,SAAS,CAAC+F,MAFH,EAAhB,CADF,CAFyB,CAApB,EAQJE,UAXqB,EAYxBb,OAAO,EAAEpF,SAAS,CAAC+F,MAZK,EAaxB3E,KAAK,EAAEpB,SAAS,CAAC+F,MAbO,EAcxBzE,aAAa,EAAEtB,SAAS,CAACkG,IAdD,EAexB/C,UAAU,EAAEnD,SAAS,CAACkG,IAfE,EAR5B","sourcesContent":["import React, { HTMLAttributes } from 'react';\nimport PropTypes from 'prop-types';\nimport type { Emotion } from '@emotion/css/create-instance';\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 { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { EmotionConsumer } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { SizeProp } from '../../lib/types/props';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\n\nimport { getSwitcherTheme } from './switcherTheme';\nimport { mod } from './helpers';\nimport { getStyles } from './Switcher.styles';\n\n/**\n * @deprecated use SizeProp\n */\nexport type SwitcherSize = SizeProp;\nexport type 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  public static displayName = '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 emotion!: Emotion;\n  private setRootNode!: TSetRootNode;\n\n  public render() {\n    return (\n      <EmotionConsumer>\n        {(emotion) => {\n          this.emotion = emotion;\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      </EmotionConsumer>\n    );\n  }\n\n  private renderMain() {\n    const styles = getStyles(this.emotion);\n    const listClassName = this.emotion.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 = this.emotion.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    const styles = getStyles(this.emotion);\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,51 +1,78 @@
-import React from 'react';
+import React, { HTMLAttributes } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonSize } from '../Button';
+import { ButtonProps } from '../Button';
 import { Nullable } from '../../typings/utility-types';
-export declare type SwitcherSize = ButtonSize;
-export interface SwitcherProps {
+import { CommonProps } from '../../internal/CommonWrapper';
+import { SizeProp } from '../../lib/types/props';
+/**
+ * @deprecated use SizeProp
+ */
+export declare type SwitcherSize = SizeProp;
+export declare type SwitcherItems = string | SwitcherItem;
+export declare const SwitcherDataTids: {
+    readonly root: "Switcher__root";
+};
+export interface SwitcherProps extends Pick<HTMLAttributes<unknown>, 'role'>, CommonProps {
     /**
-     * Список строк или список элементов типа `{ label: string, value: string }`
+     * Список строк или список элементов типа `{ label: string, value: string, buttonProps?: Partial<ButtonProps> }`
      */
-    items: Array<string | SwitcherItem>;
+    items: SwitcherItems[];
     value?: string;
     onValueChange?: (value: string) => void;
-    label?: string;
+    caption?: string;
     error?: boolean;
     /** Размер */
-    size?: SwitcherSize;
+    size?: SizeProp;
+    disabled?: boolean;
+    /**
+     * Функция для отрисовки элемента. Аргументы — `label`,
+     * `value`, `buttonProps`, `renderDefault`, `ariaLabel`
+     */
+    renderItem?: (label: string, value: string, buttonProps: ButtonProps, renderDefault: () => React.ReactNode, ariaLabel?: string) => React.ReactNode;
 }
+declare type DefaultProps = Required<Pick<SwitcherProps, 'role'>>;
 export interface SwitcherState {
     focusedIndex: Nullable<number>;
 }
 interface SwitcherItem {
-    label: string;
     value: string;
+    label: string;
+    'aria-label'?: string;
+    buttonProps?: Partial<ButtonProps>;
 }
 export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
     static __KONTUR_REACT_UI__: string;
+    static displayName: string;
+    static defaultProps: DefaultProps;
     static propTypes: {
         error: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
         items: PropTypes.Validator<(string | null | undefined)[] | (PropTypes.InferProps<{
             label: PropTypes.Requireable<string>;
             value: PropTypes.Requireable<string>;
         }> | null | undefined)[]>;
-        label: PropTypes.Requireable<string>;
+        caption: PropTypes.Requireable<string>;
         value: PropTypes.Requireable<string>;
         onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: SwitcherState;
     private theme;
+    private emotion;
+    private setRootNode;
     render(): JSX.Element;
     private renderMain;
     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

@@ -1,10 +1,107 @@
-```jsx harmony
-let intialState = {};
-
-<Switcher
-  label="Switch the switcher"
-  items={['One', 'Two', 'Three']}
-  value={state.value}
-  onValueChange={value => setState({ value })}
-/>;
-```
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<Switcher
+  caption="Switch the switcher"
+  items={['One', 'Two', 'Three']}
+  value={value}
+  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/Switcher.styles/Switcher.styles.js

@@ -1,58 +1,35 @@
 import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
 
-function _templateObject4() {
-  var data = _taggedTemplateLiteralLoose(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 2px ", ";\n    "]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = _taggedTemplateLiteralLoose(["\n      margin-right: 15px;\n      vertical-align: middle;\n      display: inline-block;\n    "]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = _taggedTemplateLiteralLoose(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      vertical-align: middle;\n    "]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-import { css, memoizeStyle } from "../../../lib/theming/Emotion";
-var styles = {
-  wrap: function wrap() {
-    return css(_templateObject());
-  },
-  input: function input() {
-    return css(_templateObject2());
-  },
-  label: function label() {
-    return css(_templateObject3());
-  },
-  error: function error(t) {
-    return css(_templateObject4(), t.borderColorError);
-  }
-};
-export var jsStyles = memoizeStyle(styles);
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import { memoizeStyle } from "../../../lib/theming/Emotion";
+export var getStyles = function getStyles(emotion) {
+  return memoizeStyle({
+    root: function root() {
+      return emotion.css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n        line-height: normal;\n      "])));
+    },
+    wrap: function wrap() {
+      return emotion.css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n        display: inline-block;\n        vertical-align: middle;\n      "])));
+    },
+    input: function input() {
+      return emotion.css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n        height: 0;\n        opacity: 0;\n        position: absolute;\n        width: 0;\n      "])));
+    },
+    caption: function caption(t) {
+      return emotion.css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n        color: ", ";\n        vertical-align: middle;\n        display: inline-block;\n      "])), t.switcherTextColor);
+    },
+    captionSmall: function captionSmall(t) {
+      return emotion.css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n        margin-right: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.switcherCaptionGapSmall, t.switcherCaptionFontSizeSmall, t.switcherCaptionLineHeightSmall);
+    },
+    captionMedium: function captionMedium(t) {
+      return emotion.css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n        margin-right: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.switcherCaptionGapMedium, t.switcherCaptionFontSizeMedium, t.switcherCaptionLineHeightMedium);
+    },
+    captionLarge: function captionLarge(t) {
+      return emotion.css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n        margin-right: ", ";\n        font-size: ", ";\n        line-height: ", ";\n      "])), t.switcherCaptionGapLarge, t.switcherCaptionFontSizeLarge, t.switcherCaptionLineHeightLarge);
+    },
+    error: function error(t) {
+      var insideWidth = parseInt(t.btnBorderWidth);
+      var outsideWidth = parseInt(t.switcherOutlineWidth) - insideWidth + "px";
+      return emotion.css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n        border-radius: ", ";\n        box-shadow: inset 0 0 0 ", "px ", ", 0 0 0 ", " ", ";\n      "])), t.switcherBorderRadius, insideWidth, t.borderColorError, outsideWidth, t.borderColorError);
+    }
+  });
+};