@skbkontur/react-ui 0.0.0-e66a3400ba → 0.0.0-ecefada396

package/components/Switcher/Switcher/Switcher.js

@@ -0,0 +1,209 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from "../../../lib/events/keyboard/identifiers";
+import { Group } from "../../Group";
+import { Button } from "../../Button";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { CommonWrapper } from "../../../internal/CommonWrapper";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Switcher.styles";
+import { getSwitcherTheme } from "../switcherTheme";
+export var Switcher = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Switcher, _React$Component);
+
+  function Switcher() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.state = {
+      focusedIndex: null
+    };
+    _this.theme = void 0;
+
+    _this.selectItem = function (value) {
+      if (_this.props.onValueChange) {
+        _this.props.onValueChange(value);
+      }
+    };
+
+    _this._extractPropsFromItem = function (item) {
+      return typeof item === 'object' ? item : {
+        label: item,
+        value: item
+      };
+    };
+
+    _this._extractValuesFromItems = function () {
+      return _this.props.items.map(function (item) {
+        var _this$_extractPropsFr = _this._extractPropsFromItem(item),
+            value = _this$_extractPropsFr.value;
+
+        return value;
+      });
+    };
+
+    _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.handleKey = function (e) {
+      var focusedIndex = _this.state.focusedIndex;
+
+      if (typeof focusedIndex !== 'number') {
+        return;
+      }
+
+      if (isKeyEnter(e)) {
+        if (_this.props.onValueChange) {
+          var _this$_extractPropsFr2 = _this._extractPropsFromItem(_this.props.items[focusedIndex]),
+              _value = _this$_extractPropsFr2.value;
+
+          _this.selectItem(_value);
+        }
+
+        return;
+      }
+
+      if (isKeyArrowHorizontal(e)) {
+        e.preventDefault();
+
+        _this.move(isKeyArrowLeft(e) ? -1 : 1);
+      }
+    };
+
+    _this._handleFocus = function () {
+      var value = _this.props.value;
+
+      var items = _this._extractValuesFromItems();
+
+      var currentIndex = [].concat(items).indexOf(value);
+      var index = currentIndex > -1 ? currentIndex : 0;
+
+      _this.setState({
+        focusedIndex: index
+      });
+    };
+
+    _this._handleBlur = function () {
+      _this.setState({
+        focusedIndex: null
+      });
+    };
+
+    _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,
+          visuallyFocused: _this.state.focusedIndex === i,
+          onClick: function onClick() {
+            _this.selectItem(value);
+          },
+          disableFocus: true,
+          size: _this.props.size,
+          disabled: _this.props.disabled
+        };
+        return /*#__PURE__*/React.createElement(Button, _extends({
+          key: value
+        }, buttonProps), label);
+      });
+    };
+
+    _this.getLabelSizeClassName = function () {
+      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;
+  }
+
+  var _proto = Switcher.prototype;
+
+  _proto.render = function render() {
+    var _this2 = this;
+
+    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 _cx;
+
+    var listClassName = cx((_cx = {}, _cx[styles.error(this.theme)] = !!this.props.error, _cx));
+    var inputProps = {
+      type: 'checkbox',
+      onKeyDown: this.handleKey,
+      onFocus: this._handleFocus,
+      onBlur: this._handleBlur,
+      className: styles.input()
+    };
+    var captionClassName = cx(styles.caption(this.theme), this.getLabelSizeClassName());
+    return /*#__PURE__*/React.createElement(CommonWrapper, this.props, /*#__PURE__*/React.createElement("div", {
+      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
+    }, /*#__PURE__*/React.createElement(Group, null, this._renderItems())))));
+  };
+
+  return Switcher;
+}(React.Component);
+Switcher.__KONTUR_REACT_UI__ = 'Switcher';
+Switcher.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,
+  caption: PropTypes.string,
+  value: PropTypes.string,
+  onValueChange: PropTypes.func
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Switcher.tsx"],"names":["React","PropTypes","isKeyArrowHorizontal","isKeyArrowLeft","isKeyEnter","Group","Button","ThemeContext","CommonWrapper","cx","styles","getSwitcherTheme","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","disabled","getLabelSizeClassName","captionLarge","captionMedium","captionSmall","render","renderMain","listClassName","error","inputProps","type","onKeyDown","onFocus","onBlur","className","input","captionClassName","caption","root","wrap","Component","__KONTUR_REACT_UI__","propTypes","bool","oneOfType","arrayOf","string","shape","isRequired","func"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport { isKeyArrowHorizontal, isKeyArrowLeft, isKeyEnter } from '../../lib/events/keyboard/identifiers';\nimport { Group } from '../Group';\nimport { Button, ButtonSize } from '../Button';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\n\nimport { styles } from './Switcher.styles';\nimport { getSwitcherTheme } from './switcherTheme';\n\nexport type SwitcherSize = ButtonSize;\n\nexport interface SwitcherProps extends CommonProps {\n  /**\n   * Список строк или список элементов типа `{ label: string, value: string }`\n   */\n  items: Array<string | SwitcherItem>;\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\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\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 {...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"]}

package/components/Switcher/Switcher/package.json

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

package/components/Switcher/Switcher.d.ts

@@ -1,48 +1,55 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
-import { Nullable } from '../../typings/utility-types';
-export interface SwitcherProps {
-    /**
-     * Список строк или список элементов типа `{ label: string, value: string }`
-     */
-    items: Array<string | SwitcherItem>;
-    value?: string;
-    onChange?: (event: {
-        target: {
-            value: string;
-        };
-    }, value: string) => void;
-    label?: string;
-    error?: boolean;
-}
-export interface SwitcherState {
-    focusedIndex: Nullable<number>;
-}
-interface SwitcherItem {
-    label: string;
-    value: string;
-}
-declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
-    static propTypes: {
-        error: PropTypes.Requireable<boolean>;
-        items: PropTypes.Validator<(string | null)[] | (PropTypes.InferProps<{
-            label: PropTypes.Requireable<string>;
-            value: PropTypes.Requireable<string>;
-        }> | null)[]>;
-        label: PropTypes.Requireable<string>;
-        value: PropTypes.Requireable<string>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    state: SwitcherState;
-    render(): JSX.Element;
-    private _selectItem;
-    private _extractPropsFromItem;
-    private _extractValuesFromItems;
-    private _move;
-    private _focus;
-    private _handleKey;
-    private _handleFocus;
-    private _handleBlur;
-    private _renderItems;
-}
-export default Switcher;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ButtonSize } from '../Button';
+import { Nullable } from '../../typings/utility-types';
+import { CommonProps } from '../../internal/CommonWrapper';
+export declare type SwitcherSize = ButtonSize;
+export interface SwitcherProps extends CommonProps {
+    /**
+     * Список строк или список элементов типа `{ label: string, value: string }`
+     */
+    items: Array<string | SwitcherItem>;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    caption?: string;
+    error?: boolean;
+    /** Размер */
+    size?: SwitcherSize;
+    disabled?: boolean;
+}
+export interface SwitcherState {
+    focusedIndex: Nullable<number>;
+}
+interface SwitcherItem {
+    label: string;
+    value: string;
+}
+export declare class Switcher extends React.Component<SwitcherProps, SwitcherState> {
+    static __KONTUR_REACT_UI__: string;
+    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)[]>;
+        caption: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<string>;
+        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    state: SwitcherState;
+    private theme;
+    render(): JSX.Element;
+    private renderMain;
+    private selectItem;
+    private _extractPropsFromItem;
+    private _extractValuesFromItems;
+    private move;
+    private _focus;
+    private handleKey;
+    private _handleFocus;
+    private _handleBlur;
+    private _renderItems;
+    private getLabelSizeClassName;
+}
+export {};

package/components/Switcher/Switcher.md

@@ -0,0 +1,10 @@
+```jsx harmony
+const [value, setValue] = React.useState();
+
+<Switcher
+  caption="Switch the switcher"
+  items={['One', 'Two', 'Three']}
+  value={value}
+  onValueChange={setValue}
+/>;
+```

package/components/Switcher/Switcher.styles/Switcher.styles.js

@@ -0,0 +1,31 @@
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+
+import { css, memoizeStyle } from "../../../lib/theming/Emotion";
+export var styles = memoizeStyle({
+  root: function root() {
+    return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n      line-height: normal;\n    "])));
+  },
+  wrap: function wrap() {
+    return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      display: inline-block;\n      vertical-align: middle;\n    "])));
+  },
+  input: function input() {
+    return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      height: 0;\n      opacity: 0;\n      position: absolute;\n      width: 0;\n    "])));
+  },
+  caption: function caption(t) {
+    return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n      color: ", ";\n      vertical-align: middle;\n      display: inline-block;\n    "])), t.switcherTextColor);
+  },
+  captionSmall: function captionSmall(t) {
+    return 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 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 css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n      margin-right: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    "])), t.switcherCaptionGapLarge, t.switcherCaptionFontSizeLarge, t.switcherCaptionLineHeightLarge);
+  },
+  error: function error(t) {
+    return css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n      border-radius: 2px;\n      box-shadow: 0 0 0 ", " ", ";\n    "])), t.switcherOutlineWidth, t.borderColorError);
+  }
+});

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

@@ -0,0 +1 @@
+{"version":3,"sources":["Switcher.styles.ts"],"names":["css","memoizeStyle","styles","root","wrap","input","caption","t","switcherTextColor","captionSmall","switcherCaptionGapSmall","switcherCaptionFontSizeSmall","switcherCaptionLineHeightSmall","captionMedium","switcherCaptionGapMedium","switcherCaptionFontSizeMedium","switcherCaptionLineHeightMedium","captionLarge","switcherCaptionGapLarge","switcherCaptionFontSizeLarge","switcherCaptionLineHeightLarge","error","switcherOutlineWidth","borderColorError"],"mappings":"kPAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,kBAC1B;AACL,WAAOH,GAAP;;;AAGD,GALgC;;AAOjCI,EAAAA,IAPiC,kBAO1B;AACL,WAAOJ,GAAP;;;;AAID,GAZgC;;AAcjCK,EAAAA,KAdiC,mBAczB;AACN,WAAOL,GAAP;;;;;;AAMD,GArBgC;;AAuBjCM,EAAAA,OAvBiC,mBAuBzBC,CAvByB,EAuBf;AAChB,WAAOP,GAAP;AACWO,IAAAA,CAAC,CAACC,iBADb;;;;AAKD,GA7BgC;;AA+BjCC,EAAAA,YA/BiC,wBA+BpBF,CA/BoB,EA+BV;AACrB,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACG,uBADpB;AAEeH,IAAAA,CAAC,CAACI,4BAFjB;AAGiBJ,IAAAA,CAAC,CAACK,8BAHnB;;AAKD,GArCgC;;AAuCjCC,EAAAA,aAvCiC,yBAuCnBN,CAvCmB,EAuCT;AACtB,WAAOP,GAAP;AACkBO,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,WAAOP,GAAP;AACkBO,IAAAA,CAAC,CAACW,uBADpB;AAEeX,IAAAA,CAAC,CAACY,4BAFjB;AAGiBZ,IAAAA,CAAC,CAACa,8BAHnB;;AAKD,GArDgC;;AAuDjCC,EAAAA,KAvDiC,iBAuD3Bd,CAvD2B,EAuDjB;AACd,WAAOP,GAAP;;AAEsBO,IAAAA,CAAC,CAACe,oBAFxB,EAEgDf,CAAC,CAACgB,gBAFlD;;AAID,GA5DgC,EAAD,CAA3B","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    return css`\n      border-radius: 2px;\n      box-shadow: 0 0 0 ${t.switcherOutlineWidth} ${t.borderColorError};\n    `;\n  },\n});\n"]}

package/components/Switcher/Switcher.styles/package.json

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

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

@@ -0,0 +1,11 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const styles: {
+    root(): string;
+    wrap(): string;
+    input(): string;
+    caption(t: Theme): string;
+    captionSmall(t: Theme): string;
+    captionMedium(t: Theme): string;
+    captionLarge(t: Theme): string;
+    error(t: Theme): string;
+};

package/components/Switcher/index/index.js

@@ -0,0 +1 @@
+export * from "../Switcher";

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

@@ -0,0 +1 @@
+{"version":3,"sources":["index.tsx"],"names":[],"mappings":"AAAA,cAAc,YAAd","sourcesContent":["export * from './Switcher';\n"]}

package/components/Switcher/index/package.json

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

package/components/Switcher/index.d.ts

@@ -1 +1 @@
-export { default, SwitcherProps, SwitcherState } from './Switcher';
+export * from './Switcher';

package/components/Switcher/package.json

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

package/components/Switcher/switcherTheme/package.json

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

package/components/Switcher/switcherTheme/switcherTheme.js

@@ -0,0 +1,23 @@
+import { ThemeFactory } from "../../../lib/theming/ThemeFactory";
+export var getSwitcherTheme = function getSwitcherTheme(theme) {
+  return ThemeFactory.create({
+    btnBorderWidth: theme.switcherButtonBorderWidth,
+    btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,
+    btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,
+    btnLineHeightSmall: theme.switcherButtonLineHeightSmall,
+    btnFontSizeSmall: theme.switcherButtonFontSizeSmall,
+    btnPaddingXSmall: theme.switcherButtonPaddingXSmall,
+    btnPaddingYSmall: theme.switcherButtonPaddingYSmall,
+    btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,
+    btnLineHeightMedium: theme.switcherButtonLineHeightMedium,
+    btnFontSizeMedium: theme.switcherButtonFontSizeMedium,
+    btnPaddingXMedium: theme.switcherButtonPaddingXMedium,
+    btnPaddingYMedium: theme.switcherButtonPaddingYMedium,
+    btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,
+    btnLineHeightLarge: theme.switcherButtonLineHeightLarge,
+    btnFontSizeLarge: theme.switcherButtonFontSizeLarge,
+    btnPaddingXLarge: theme.switcherButtonPaddingXLarge,
+    btnPaddingYLarge: theme.switcherButtonPaddingYLarge,
+    btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge
+  }, theme);
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["switcherTheme.ts"],"names":["ThemeFactory","getSwitcherTheme","theme","create","btnBorderWidth","switcherButtonBorderWidth","btnDisabledBorderColor","switcherButtonDisabledBorderColor","btnCheckedDisabledShadow","switcherButtonCheckedDisabledShadow","btnLineHeightSmall","switcherButtonLineHeightSmall","btnFontSizeSmall","switcherButtonFontSizeSmall","btnPaddingXSmall","switcherButtonPaddingXSmall","btnPaddingYSmall","switcherButtonPaddingYSmall","btnBorderRadiusSmall","switcherButtonBorderRadiusSmall","btnLineHeightMedium","switcherButtonLineHeightMedium","btnFontSizeMedium","switcherButtonFontSizeMedium","btnPaddingXMedium","switcherButtonPaddingXMedium","btnPaddingYMedium","switcherButtonPaddingYMedium","btnBorderRadiusMedium","switcherButtonBorderRadiusMedium","btnLineHeightLarge","switcherButtonLineHeightLarge","btnFontSizeLarge","switcherButtonFontSizeLarge","btnPaddingXLarge","switcherButtonPaddingXLarge","btnPaddingYLarge","switcherButtonPaddingYLarge","btnBorderRadiusLarge","switcherButtonBorderRadiusLarge"],"mappings":"AAAA,SAASA,YAAT,QAA6B,gCAA7B;;;AAGA,OAAO,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAmB,CAACC,KAAD,EAAyB;AACvD,SAAOF,YAAY,CAACG,MAAb;AACL;AACEC,IAAAA,cAAc,EAAEF,KAAK,CAACG,yBADxB;AAEEC,IAAAA,sBAAsB,EAAEJ,KAAK,CAACK,iCAFhC;AAGEC,IAAAA,wBAAwB,EAAEN,KAAK,CAACO,mCAHlC;;AAKEC,IAAAA,kBAAkB,EAAER,KAAK,CAACS,6BAL5B;AAMEC,IAAAA,gBAAgB,EAAEV,KAAK,CAACW,2BAN1B;AAOEC,IAAAA,gBAAgB,EAAEZ,KAAK,CAACa,2BAP1B;AAQEC,IAAAA,gBAAgB,EAAEd,KAAK,CAACe,2BAR1B;AASEC,IAAAA,oBAAoB,EAAEhB,KAAK,CAACiB,+BAT9B;;AAWEC,IAAAA,mBAAmB,EAAElB,KAAK,CAACmB,8BAX7B;AAYEC,IAAAA,iBAAiB,EAAEpB,KAAK,CAACqB,4BAZ3B;AAaEC,IAAAA,iBAAiB,EAAEtB,KAAK,CAACuB,4BAb3B;AAcEC,IAAAA,iBAAiB,EAAExB,KAAK,CAACyB,4BAd3B;AAeEC,IAAAA,qBAAqB,EAAE1B,KAAK,CAAC2B,gCAf/B;;AAiBEC,IAAAA,kBAAkB,EAAE5B,KAAK,CAAC6B,6BAjB5B;AAkBEC,IAAAA,gBAAgB,EAAE9B,KAAK,CAAC+B,2BAlB1B;AAmBEC,IAAAA,gBAAgB,EAAEhC,KAAK,CAACiC,2BAnB1B;AAoBEC,IAAAA,gBAAgB,EAAElC,KAAK,CAACmC,2BApB1B;AAqBEC,IAAAA,oBAAoB,EAAEpC,KAAK,CAACqC,+BArB9B,EADK;;AAwBLrC,EAAAA,KAxBK,CAAP;;AA0BD,CA3BM","sourcesContent":["import { ThemeFactory } from '../../lib/theming/ThemeFactory';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const getSwitcherTheme = (theme: Theme): Theme => {\n  return ThemeFactory.create(\n    {\n      btnBorderWidth: theme.switcherButtonBorderWidth,\n      btnDisabledBorderColor: theme.switcherButtonDisabledBorderColor,\n      btnCheckedDisabledShadow: theme.switcherButtonCheckedDisabledShadow,\n\n      btnLineHeightSmall: theme.switcherButtonLineHeightSmall,\n      btnFontSizeSmall: theme.switcherButtonFontSizeSmall,\n      btnPaddingXSmall: theme.switcherButtonPaddingXSmall,\n      btnPaddingYSmall: theme.switcherButtonPaddingYSmall,\n      btnBorderRadiusSmall: theme.switcherButtonBorderRadiusSmall,\n\n      btnLineHeightMedium: theme.switcherButtonLineHeightMedium,\n      btnFontSizeMedium: theme.switcherButtonFontSizeMedium,\n      btnPaddingXMedium: theme.switcherButtonPaddingXMedium,\n      btnPaddingYMedium: theme.switcherButtonPaddingYMedium,\n      btnBorderRadiusMedium: theme.switcherButtonBorderRadiusMedium,\n\n      btnLineHeightLarge: theme.switcherButtonLineHeightLarge,\n      btnFontSizeLarge: theme.switcherButtonFontSizeLarge,\n      btnPaddingXLarge: theme.switcherButtonPaddingXLarge,\n      btnPaddingYLarge: theme.switcherButtonPaddingYLarge,\n      btnBorderRadiusLarge: theme.switcherButtonBorderRadiusLarge,\n    },\n    theme,\n  );\n};\n"]}

package/components/Switcher/switcherTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from '../../lib/theming/Theme';
+export declare const getSwitcherTheme: (theme: Theme) => Theme;

package/components/Tabs/Indicator/Indicator.js

@@ -0,0 +1,130 @@
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import React from 'react';
+import { findDOMNode } from 'react-dom';
+import throttle from 'lodash.throttle';
+import * as LayoutEvents from "../../../lib/LayoutEvents";
+import { ThemeContext } from "../../../lib/theming/ThemeContext";
+import { cx } from "../../../lib/theming/Emotion";
+import { styles } from "../Indicator.styles";
+import { TabsContext } from "../TabsContext";
+export var Indicator = /*#__PURE__*/function (_React$Component) {
+  _inheritsLoose(Indicator, _React$Component);
+
+  function Indicator() {
+    var _this;
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this.context = _this.context;
+    _this.state = {
+      styles: {}
+    };
+    _this.theme = void 0;
+    _this.eventListener = null;
+    _this.removeTabUpdatesListener = null;
+    _this.reflow = throttle(function () {
+      var _this$context = _this.context,
+          getTab = _this$context.getTab,
+          activeTab = _this$context.activeTab;
+      var node = getTab(activeTab);
+
+      var nodeStyles = _this.getStyles(node);
+
+      var stylesUpdated = ['left', 'top', 'width', 'height'].some(function (prop) {
+        return nodeStyles[prop] !== _this.state.styles[prop];
+      });
+
+      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.createElement(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.createElement("div", {
+      className: cx(styles.root(this.theme), indicators.primary && styles.primary(this.theme), indicators.success && styles.success(this.theme), indicators.warning && styles.warning(this.theme), indicators.error && styles.error(this.theme), this.props.className),
+      style: this.state.styles
+    });
+  };
+
+  _proto.getStyles = function getStyles(node) {
+    if (node instanceof React.Component) {
+      node = findDOMNode(node);
+    }
+
+    if (node instanceof HTMLElement) {
+      var rect = node.getBoundingClientRect();
+
+      if (this.props.vertical) {
+        return {
+          width: this.theme.tabBorderWidth,
+          left: node.offsetLeft,
+          top: node.offsetTop,
+          height: rect.bottom - rect.top
+        };
+      }
+
+      var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
+      return {
+        left: node.offsetLeft,
+        top: node.offsetHeight + node.offsetTop - tabBorderWidth,
+        width: rect.right - rect.left
+      };
+    }
+
+    return {};
+  };
+
+  return Indicator;
+}(React.Component);
+Indicator.contextType = TabsContext;

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

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