@skbkontur/react-ui 0.0.0-ce2a893b1a → 0.0.0-d1bb8f344a

package/cjs/components/Sticky/Sticky.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","rootNode","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps = { offset: 0 };\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side, offset } = this.props;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    const { documentElement } = document;\n\n    if (!documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = window.innerHeight || documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left } = getDOMRect(this.wrapper);\n    const { width, height } = getDOMRect(this.inner);\n    const { offset, getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}
+{"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","StickyDataTids","root","Sticky","rootNode","getProps","defaultProps","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","globalObject","document","documentElement","Error","windowHeight","innerHeight","clientHeight","top","bottom","left","width","height","props","getStop","side","prevFixed","prevHeight","offset","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","styles","container","React","Component","__KONTUR_REACT_UI__","displayName","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\nimport { globalObject } from '@skbkontur/global-object';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { getDOMRect } from '../../lib/dom/getDOMRect';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n  side: 'top' | 'bottom';\n  /**\n   * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n   * @default 0\n   */\n  offset?: number;\n  getStop?: () => Nullable<HTMLElement>;\n  children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n  fixed: boolean;\n  deltaHeight: number;\n  height?: number;\n  width?: number;\n  left?: number;\n  stopped: boolean;\n  relativeTop: number;\n}\n\nexport const StickyDataTids = {\n  root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n  public static __KONTUR_REACT_UI__ = 'Sticky';\n  public static displayName = 'Sticky';\n\n  public static propTypes = {\n    children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n    /**\n     * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n     */\n    getStop: PropTypes.func,\n\n    /**\n     * Отступ от границы в пикселях\n     */\n    offset: PropTypes.number,\n\n    side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n  };\n\n  public static defaultProps: DefaultProps = { offset: 0 };\n\n  private getProps = createPropsGetter(Sticky.defaultProps);\n\n  public state: StickyState = {\n    fixed: false,\n    deltaHeight: 0,\n    stopped: false,\n    relativeTop: 0,\n  };\n\n  private wrapper: Nullable<HTMLElement>;\n  private inner: Nullable<HTMLElement>;\n  private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n  private reflowCounter = 0;\n  private setRootNode!: TSetRootNode;\n\n  public componentDidMount() {\n    this.reflow();\n\n    this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n  }\n\n  public componentWillUnmount() {\n    if (this.layoutSubscription.remove) {\n      this.layoutSubscription.remove();\n    }\n  }\n\n  public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n    if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n      if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n        LayoutEvents.emit();\n        this.reflowCounter += 1;\n        return;\n      }\n    }\n    this.reflowCounter = 0;\n  }\n\n  public render() {\n    let { children } = this.props;\n    const { side } = this.props;\n    const offset = this.getProps().offset;\n    const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n    const innerStyle: React.CSSProperties = {};\n\n    if (fixed) {\n      if (stopped) {\n        innerStyle.top = relativeTop;\n        innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n      } else {\n        innerStyle.width = width;\n        innerStyle[side] = offset;\n        innerStyle.left = left;\n      }\n    }\n\n    if (isFunction(children)) {\n      children = children(fixed);\n    }\n\n    return (\n      <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n        <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={styles.wrapper()}>\n          <ZIndex\n            priority=\"Sticky\"\n            applyZIndex={fixed}\n            className={cx(styles.inner(), {\n              [styles.fixed()]: fixed && !stopped,\n              [styles.stopped()]: stopped,\n            })}\n            style={innerStyle}\n            wrapperRef={this.refInner}\n          >\n            <div className={styles.container()}>{children}</div>\n          </ZIndex>\n          {fixed && !stopped ? <div style={{ width, height }} /> : null}\n        </div>\n      </CommonWrapper>\n    );\n  }\n\n  private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n  private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n  /**\n   * Пересчитать габариты и позицию залипшего элемента\n   *\n   * @public\n   */\n  public reflow = () => {\n    if (!globalObject.document?.documentElement) {\n      throw Error('There is no \"documentElement\" in document');\n    }\n\n    const windowHeight = globalObject.innerHeight || globalObject.document.documentElement.clientHeight;\n    if (!this.wrapper || !this.inner) {\n      return;\n    }\n    const { top, bottom, left, width } = getDOMRect(this.wrapper);\n    const { height } = getDOMRect(this.inner);\n    const { getStop, side } = this.props;\n    const { fixed: prevFixed, height: prevHeight = height } = this.state;\n    const offset = this.getProps().offset;\n    const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n    this.setState({ fixed, left });\n\n    if (fixed && !prevFixed) {\n      this.setState({ width, height });\n    }\n\n    if (fixed) {\n      this.setState({ width });\n      const stop = getStop && getStop();\n      if (stop) {\n        const deltaHeight = prevHeight - height;\n        const stopRect = getDOMRect(stop);\n        const outerHeight = height + offset;\n        let stopped = false;\n        let relativeTop = 0;\n\n        if (side === 'top') {\n          stopped = stopRect.top - outerHeight < 0;\n          relativeTop = stopRect.top - prevHeight - top;\n        } else {\n          stopped = stopRect.bottom + outerHeight > windowHeight;\n          relativeTop = stopRect.bottom - top;\n        }\n\n        this.setState({ relativeTop, deltaHeight, stopped });\n      }\n    }\n  };\n}\n"]}

package/cjs/components/Sticky/Sticky.styles.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
 
 var styles = (0, _Emotion.memoizeStyle)({
   wrapper: function wrapper() {

package/cjs/components/Sticky/Sticky.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Sticky.styles.ts"],"names":["styles","wrapper","css","inner","fixed","stopped","container"],"mappings":"4QAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,qBACvB;AACR,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,KANiC,mBAMzB;AACN,eAAOD,YAAP;;;;AAID,GAXgC;;AAajCE,EAAAA,KAbiC,mBAazB;AACN,eAAOF,YAAP;;;AAGD,GAjBgC;;AAmBjCG,EAAAA,OAnBiC,qBAmBvB;AACR,eAAOH,YAAP;;;AAGD,GAvBgC;;AAyBjCI,EAAAA,SAzBiC,uBAyBrB;AACV,eAAOJ,YAAP;;;;AAID,GA9BgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Sticky.styles.ts"],"names":["styles","wrapper","css","inner","fixed","stopped","container"],"mappings":"oRAAA,oD;;AAEO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,OADiC,qBACvB;AACR,eAAOC,YAAP;;;AAGD,GALgC;AAMjCC,EAAAA,KANiC,mBAMzB;AACN,eAAOD,YAAP;;;;AAID,GAXgC;;AAajCE,EAAAA,KAbiC,mBAazB;AACN,eAAOF,YAAP;;;AAGD,GAjBgC;;AAmBjCG,EAAAA,OAnBiC,qBAmBvB;AACR,eAAOH,YAAP;;;AAGD,GAvBgC;;AAyBjCI,EAAAA,SAzBiC,uBAyBrB;AACV,eAAOJ,YAAP;;;;AAID,GA9BgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n  wrapper() {\n    return css`\n      display: flex;\n    `;\n  },\n  inner() {\n    return css`\n      display: flex;\n      width: 100%;\n    `;\n  },\n\n  fixed() {\n    return css`\n      position: fixed;\n    `;\n  },\n\n  stopped() {\n    return css`\n      position: relative;\n    `;\n  },\n\n  container() {\n    return css`\n      flex: auto;\n      width: 100%;\n    `;\n  },\n});\n"]}

package/cjs/components/Switcher/Switcher.d.ts

@@ -1,13 +1,20 @@
-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';
 import { CommonProps } from '../../internal/CommonWrapper';
-export declare type SwitcherSize = ButtonSize;
-declare type SwitcherItems = string | SwitcherItem;
-export interface SwitcherProps extends CommonProps {
+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: SwitcherItems[];
     value?: string;
@@ -15,18 +22,28 @@ export interface SwitcherProps extends CommonProps {
     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>;
@@ -37,6 +54,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;
@@ -46,12 +64,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/cjs/components/Switcher/Switcher.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Switcher = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.SwitcherDataTids = exports.Switcher = void 0;var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _identifiers = require("../../lib/events/keyboard/identifiers");
@@ -11,8 +11,33 @@ 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 _class, _class2, _temp;var
+var _switcherTheme = require("./switcherTheme");
+var _helpers = require("./helpers");var _class, _class2, _temp;
+
+
+
+
+
+
+
+var SwitcherDataTids = {
+  root: 'Switcher__root' };exports.SwitcherDataTids = SwitcherDataTids;var
+
+
+
+
+
+
+
+
+
+
+
+
+
+
 
 
 
@@ -62,6 +87,12 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
 
 
+
+
+
+
+
+
 
 
 
@@ -132,26 +163,6 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
       });
     };_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 });
     };_this.
@@ -164,16 +175,44 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
 
       if ((0, _identifiers.isKeyEnter)(e)) {
         if (_this.props.onValueChange) {
-          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value;
-          _this.selectItem(_value);
+          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),_value = _this$_extractPropsFr2.value,_buttonProps = _this$_extractPropsFr2.buttonProps;
+          if (!(_buttonProps != null && _buttonProps.disabled)) {
+            _this.selectItem(_value);
+          }
         }
         return;
       }
 
       if ((0, _identifiers.isKeyArrowHorizontal)(e)) {
         e.preventDefault();
-        _this.move((0, _identifiers.isKeyArrowLeft)(e) ? -1 : 1);
+        _this.move((0, _identifiers.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 = (0, _helpers.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 () {
@@ -191,26 +230,47 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
     };_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,
-          disabled: _this.props.disabled };
+          size: size,
+          disabled: disabled,
+          corners: (0, _Group.getButtonCorners)(i === 0, i === items.length - 1) };
+
 
-        return /*#__PURE__*/(
-          _react.default.createElement(_Button.Button, (0, _extends2.default)({ key: value }, buttonProps),
-          label));
+        var buttonProps = (0, _extends2.default)({},
+        commonButtonProps,
+        customButtonProps);
 
 
+        var renderDefault = function renderDefault() {return _this.renderDefaultItem(label, itemValue, buttonProps, ariaLabel);};
+
+        return renderItem ? renderItem(label, itemValue, buttonProps, renderDefault, ariaLabel) : renderDefault();
       });
     };_this.
 
+    renderDefaultItem = function (label, value, buttonProps, ariaLabel) {return /*#__PURE__*/(
+        _react.default.createElement(_Button.Button, (0, _extends2.default)({ "aria-label": ariaLabel, key: value }, buttonProps),
+        label));};_this.
+
+
+
     getLabelSizeClassName = function () {
       switch (_this.props.size) {
         case 'large':
@@ -221,4 +281,4 @@ Switcher = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/func
         default:
           return _Switcher.styles.captionSmall(_this.theme);}
 
-    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var captionClassName = (0, _Emotion.cx)(_Switcher.styles.caption(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.root() }, this.props.caption ? /*#__PURE__*/_react.default.createElement("div", { className: captionClassName }, this.props.caption) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, caption: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;
+    };return _this;}var _proto = Switcher.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = (0, _switcherTheme.getSwitcherTheme)(theme);return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Provider, { value: _this2.theme }, _this2.renderMain());});};_proto.renderMain = function renderMain() {var _cx;var listClassName = (0, _Emotion.cx)((_cx = {}, _cx[_Switcher.styles.error(this.theme)] = !!this.props.error, _cx));var inputProps = { type: 'checkbox', onKeyDown: this.handleKey, onFocus: this._handleFocus, onBlur: this._handleBlur, className: _Switcher.styles.input() };var captionClassName = (0, _Emotion.cx)(_Switcher.styles.caption(this.theme), this.getLabelSizeClassName());return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, (0, _extends2.default)({ rootNodeRef: this.setRootNode }, this.props), /*#__PURE__*/_react.default.createElement("div", { "data-tid": SwitcherDataTids.root, className: _Switcher.styles.root() }, this.props.caption ? /*#__PURE__*/_react.default.createElement("div", { className: captionClassName }, this.props.caption) : null, /*#__PURE__*/_react.default.createElement("div", { className: _Switcher.styles.wrap() }, /*#__PURE__*/_react.default.createElement("input", inputProps), /*#__PURE__*/_react.default.createElement("div", { className: listClassName }, /*#__PURE__*/_react.default.createElement(_Group.Group, null, this._renderItems())))));};return Switcher;}(_react.default.Component), _class2.__KONTUR_REACT_UI__ = 'Switcher', _class2.displayName = 'Switcher', _class2.defaultProps = { role: 'switch' }, _class2.propTypes = { error: _propTypes.default.bool, disabled: _propTypes.default.bool, items: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.arrayOf(_propTypes.default.shape({ label: _propTypes.default.string, value: _propTypes.default.string }))]).isRequired, caption: _propTypes.default.string, value: _propTypes.default.string, onValueChange: _propTypes.default.func, renderItem: _propTypes.default.func }, _temp)) || _class;exports.Switcher = Switcher;

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

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.tsx"],"names":["Switcher","rootNode","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","styles","captionLarge","theme","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","setRootNode","root","wrap","React","Component","__KONTUR_REACT_UI__","propTypes","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 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 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":["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__","displayName","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;\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 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/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/cjs/components/Switcher/Switcher.styles.js

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;exports.__esModule = true;exports.styles = void 0;var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));var _Emotion = require("../../lib/theming/Emotion");var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 
 
 var styles = (0, _Emotion.memoizeStyle)({

package/cjs/components/Switcher/Switcher.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","switcherBorderRadius","borderColorError"],"mappings":"4QAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;AACmBI,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: ${t.switcherBorderRadius};\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}
+{"version":3,"sources":["Switcher.styles.ts"],"names":["styles","root","css","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","insideWidth","parseInt","btnBorderWidth","outsideWidth","switcherOutlineWidth","switcherBorderRadius","borderColorError"],"mappings":"oRAAA,oD;;;AAGO,IAAMA,MAAM,GAAG,2BAAa;AACjCC,EAAAA,IADiC,kBAC1B;AACL,eAAOC,YAAP;;;AAGD,GALgC;;AAOjCC,EAAAA,IAPiC,kBAO1B;AACL,eAAOD,YAAP;;;;AAID,GAZgC;;AAcjCE,EAAAA,KAdiC,mBAczB;AACN,eAAOF,YAAP;;;;;;AAMD,GArBgC;;AAuBjCG,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,eAAOJ,YAAP;AACWI,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACO,wBADpB;AAEeP,IAAAA,CAAC,CAACQ,6BAFjB;AAGiBR,IAAAA,CAAC,CAACS,+BAHnB;;AAKD,GA7CgC;;AA+CjCC,EAAAA,YA/CiC,wBA+CpBV,CA/CoB,EA+CV;AACrB,eAAOJ,YAAP;AACkBI,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,QAAMe,WAAW,GAAGC,QAAQ,CAAChB,CAAC,CAACiB,cAAH,CAA5B;AACA,QAAMC,YAAY,GAAMF,QAAQ,CAAChB,CAAC,CAACmB,oBAAH,CAAR,GAAmCJ,WAAzC,OAAlB;AACA,eAAOnB,YAAP;AACmBI,IAAAA,CAAC,CAACoB,oBADrB;AAE4BL,IAAAA,WAF5B,EAE6Cf,CAAC,CAACqB,gBAF/C,EAE0EH,YAF1E,EAE0FlB,CAAC,CAACqB,gBAF5F;;AAID,GA9DgC,EAAb,CAAf,C","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n  root() {\n    return css`\n      line-height: normal;\n    `;\n  },\n\n  wrap() {\n    return css`\n      display: inline-block;\n      vertical-align: middle;\n    `;\n  },\n\n  input() {\n    return css`\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    `;\n  },\n\n  caption(t: Theme) {\n    return css`\n      color: ${t.switcherTextColor};\n      vertical-align: middle;\n      display: inline-block;\n    `;\n  },\n\n  captionSmall(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapSmall};\n      font-size: ${t.switcherCaptionFontSizeSmall};\n      line-height: ${t.switcherCaptionLineHeightSmall};\n    `;\n  },\n\n  captionMedium(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapMedium};\n      font-size: ${t.switcherCaptionFontSizeMedium};\n      line-height: ${t.switcherCaptionLineHeightMedium};\n    `;\n  },\n\n  captionLarge(t: Theme) {\n    return css`\n      margin-right: ${t.switcherCaptionGapLarge};\n      font-size: ${t.switcherCaptionFontSizeLarge};\n      line-height: ${t.switcherCaptionLineHeightLarge};\n    `;\n  },\n\n  error(t: Theme) {\n    const insideWidth = parseInt(t.btnBorderWidth);\n    const outsideWidth = `${parseInt(t.switcherOutlineWidth) - insideWidth}px`;\n    return css`\n      border-radius: ${t.switcherBorderRadius};\n      box-shadow: inset 0 0 0 ${insideWidth}px ${t.borderColorError}, 0 0 0 ${outsideWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/cjs/components/Switcher/helpers.d.ts

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

package/cjs/components/Switcher/helpers.js

@@ -0,0 +1 @@
+"use strict";exports.__esModule = true;exports.mod = void 0;var mod = function mod(n, _mod) {return (n % _mod + _mod) % _mod;};exports.mod = mod;

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

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

package/cjs/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/cjs/components/Tabs/Indicator.js

@@ -1,6 +1,8 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _lodash = _interopRequireDefault(require("lodash.throttle"));
+var _globalObject = require("@skbkontur/global-object");
 
+var _isInstanceOf = require("../../lib/isInstanceOf");
 var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));
 
 var _ThemeContext = require("../../lib/theming/ThemeContext");
@@ -10,8 +12,9 @@ var _rootNode = require("../../lib/rootNode");
 var _getDOMRect = require("../../lib/dom/getDOMRect");
 
 var _Indicator = require("./Indicator.styles");
-var _TabsContext = require("./TabsContext");var _class, _class2, _temp;function _getRequireWildcardCache(nodeInterop) {if (typeof WeakMap !== "function") return null;var cacheBabelInterop = new WeakMap();var cacheNodeInterop = new WeakMap();return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) {return nodeInterop ? cacheNodeInterop : cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj, nodeInterop) {if (!nodeInterop && obj && obj.__esModule) {return obj;}if (obj === null || typeof obj !== "object" && typeof obj !== "function") {return { default: obj };}var cache = _getRequireWildcardCache(nodeInterop);if (cache && cache.has(obj)) {return cache.get(obj);}var newObj = {};var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;for (var key in obj) {if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;if (desc && (desc.get || desc.set)) {Object.defineProperty(newObj, key, desc);} else {newObj[key] = obj[key];}}}newObj.default = obj;if (cache) {cache.set(obj, newObj);}return newObj;}var
+var _TabsContext = require("./TabsContext");
 
+var _Tabs = require("./Tabs");var _class, _class2, _temp;var
 
 
 
@@ -99,6 +102,7 @@ Indicator = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
 
 
 
+
 
 
     reflow = (0, _lodash.default)(function () {
@@ -111,12 +115,12 @@ Indicator = (0, _rootNode.rootNode)(_class = (_temp = _class2 = /*#__PURE__*/fun
       if (stylesUpdated) {
         _this.setState({ styles: nodeStyles });
       }
-    }, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate(_, prevState) {this.reflow();};_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.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { className: (0, _Emotion.cx)(_Indicator.styles.root(this.theme), indicators.primary && _Indicator.styles.primary(this.theme), indicators.success && _Indicator.styles.success(this.theme), indicators.warning && _Indicator.styles.warning(this.theme), indicators.error && _Indicator.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode });};_proto.
+    }, 100);return _this;}var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_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.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { "data-tid": _Tabs.TabsDataTids.indicatorRoot, className: (0, _Emotion.cx)(_Indicator.styles.root(this.theme), indicators.primary && _Indicator.styles.primary(this.theme), indicators.success && _Indicator.styles.success(this.theme), indicators.warning && _Indicator.styles.warning(this.theme), indicators.error && _Indicator.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode });};_proto.
 
   getStyles = function getStyles(node) {
     var htmlNode = (0, _rootNode.getRootNode)(node);
 
-    if (htmlNode && htmlNode instanceof HTMLElement) {
+    if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement)) {
       var rect = (0, _getDOMRect.getDOMRect)(htmlNode);
       if (this.props.vertical) {
         return {