@rescui/switcher 0.3.6 → 0.4.1

package/lib/index.css

@@ -1,4 +1,4 @@
-._switcher_17gxdx9_4{
+._switcher_idwmbk_4{
   position:relative;
 
   display:-webkit-inline-box;
@@ -15,21 +15,21 @@
 
   background:transparent;
 }
-._themeLight_17gxdx9_16{
+._themeLight_idwmbk_16{
   -webkit-box-shadow:inset rgba(25,25,28,0.4) 0 0 0 1px;
           box-shadow:inset rgba(25,25,28,0.4) 0 0 0 1px;
 }
-._themeDark_17gxdx9_20{
+._themeDark_idwmbk_20{
   -webkit-box-shadow:inset rgba(255,255,255,0.5) 0 0 0 1px;
           box-shadow:inset rgba(255,255,255,0.5) 0 0 0 1px;
 }
-._sizeL_17gxdx9_24{
+._sizeL_idwmbk_24{
   border-radius:36px;
 }
-._sizeXS_17gxdx9_28{
+._sizeXS_idwmbk_28{
   border-radius:4px;
 }
-._option_17gxdx9_32{
+._option_idwmbk_32{
   position:relative;
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -49,7 +49,7 @@
 
   background:transparent;
 }
-._sizeL_17gxdx9_24 ._option_17gxdx9_32{
+._sizeL_idwmbk_24 ._option_idwmbk_32{
     padding:12px 32px;
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
     font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
@@ -62,7 +62,7 @@
     line-height:var(--rs-text-1-line-height, 28px);
     border-radius:36px;
   }
-._sizeM_17gxdx9_55 ._option_17gxdx9_32{
+._sizeM_idwmbk_55 ._option_idwmbk_32{
     padding:8px 24px;
     letter-spacing:0.0015em;
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -75,26 +75,25 @@
     line-height:24px;
     line-height:var(--rs-text-2-line-height, 24px);
   }
-._rs-reset-letter-spacing_17gxdx9_1 ._sizeM_17gxdx9_55 ._option_17gxdx9_32{
+._rs-reset-letter-spacing_idwmbk_1 ._sizeM_idwmbk_55 ._option_idwmbk_32{
     letter-spacing:normal;
   }
-._sizeS_17gxdx9_60 ._option_17gxdx9_32{
+._sizeS_idwmbk_60 ._option_idwmbk_32{
     padding:6px 16px;
-    letter-spacing:0.0015em;
+    letter-spacing:0.0045em;
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
     font-family:var(--rs-font-family-ui, var(--rs-font-family-jb-sans, 'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif));
     -webkit-font-feature-settings:"kern", "liga", "calt";
     font-feature-settings:"kern", "liga", "calt";
-    font-size:16px;
-    font-size:var(--rs-text-2-font-size, 16px);
-    font-weight:400;
-    line-height:24px;
-    line-height:var(--rs-text-2-line-height, 24px);
+    font-size:13px;
+    font-size:var(--rs-text-3-font-size, 13px);
+    line-height:20px;
+    line-height:var(--rs-text-3-line-height, 20px);
   }
-._rs-reset-letter-spacing_17gxdx9_1 ._sizeS_17gxdx9_60 ._option_17gxdx9_32{
+._rs-reset-letter-spacing_idwmbk_1 ._sizeS_idwmbk_60 ._option_idwmbk_32{
     letter-spacing:normal;
   }
-._sizeXS_17gxdx9_28 ._option_17gxdx9_32{
+._sizeXS_idwmbk_28 ._option_idwmbk_32{
     padding:2px 12px;
     letter-spacing:0.0045em;
     font-family:'JetBrains Sans', Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Droid Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -106,68 +105,68 @@
     line-height:20px;
     line-height:var(--rs-text-3-line-height, 20px);
   }
-._rs-reset-letter-spacing_17gxdx9_1 ._sizeXS_17gxdx9_28 ._option_17gxdx9_32{
+._rs-reset-letter-spacing_idwmbk_1 ._sizeXS_idwmbk_28 ._option_idwmbk_32{
     letter-spacing:normal;
   }
-._sizeXS_17gxdx9_28 ._option_17gxdx9_32 {
+._sizeXS_idwmbk_28 ._option_idwmbk_32 {
     border-radius:4px;
 }
-._disabled_17gxdx9_71 ._option_17gxdx9_32{
+._disabled_idwmbk_71 ._option_idwmbk_32{
     cursor:not-allowed;
     pointer-events:none;
   }
-._themeLight_17gxdx9_16 ._option_17gxdx9_32{
+._themeLight_idwmbk_16 ._option_idwmbk_32{
   color:#19191C;
 }
-._themeLight_17gxdx9_16 ._option_17gxdx9_32:focus[data-focus-method='key']{
+._themeLight_idwmbk_16 ._option_idwmbk_32:focus[data-focus-method='key']{
     -webkit-box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
     -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
             box-shadow:rgba(107, 87, 255, 0.8) 0 0 0 4px;
             box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(107, 87, 255, 0.8)) 0 0 0 4px;
   }
-._themeLight_17gxdx9_16 ._option_17gxdx9_32._selected_17gxdx9_84:hover, ._themeLight_17gxdx9_16 ._option_17gxdx9_32._selected_17gxdx9_84:active{
+._themeLight_idwmbk_16 ._option_idwmbk_32._selected_idwmbk_84:hover, ._themeLight_idwmbk_16 ._option_idwmbk_32._selected_idwmbk_84:active{
       background:transparent;
       cursor:default;
     }
-._themeLight_17gxdx9_16._modeClassic_17gxdx9_92 ._option_17gxdx9_32:hover{
+._themeLight_idwmbk_16._modeClassic_idwmbk_92 ._option_idwmbk_32:hover{
     background:rgba(107, 87, 255,0.2);
     background:var(--rs-color-primary-t-fog-light-theme, rgba(107, 87, 255,0.2));
   }
-._themeLight_17gxdx9_16._modeRock_17gxdx9_98 ._option_17gxdx9_32:hover{
+._themeLight_idwmbk_16._modeRock_idwmbk_98 ._option_idwmbk_32:hover{
     background:rgba(25,25,28,0.1);
   }
-._disabled_17gxdx9_71._themeLight_17gxdx9_16 ._option_17gxdx9_32,
-._disabled_17gxdx9_71._themeLight_17gxdx9_16 ._option_17gxdx9_32._selected_17gxdx9_84{
+._disabled_idwmbk_71._themeLight_idwmbk_16 ._option_idwmbk_32,
+._disabled_idwmbk_71._themeLight_idwmbk_16 ._option_idwmbk_32._selected_idwmbk_84{
   color:rgba(25,25,28,0.4);
 }
-._themeDark_17gxdx9_20 ._option_17gxdx9_32{
+._themeDark_idwmbk_20 ._option_idwmbk_32{
   color:#FFFFFF;
 }
-._themeDark_17gxdx9_20 ._option_17gxdx9_32:hover{
+._themeDark_idwmbk_20 ._option_idwmbk_32:hover{
     background:rgba(255,255,255,0.1);
   }
-._themeDark_17gxdx9_20 ._option_17gxdx9_32:focus[data-focus-method='key']{
+._themeDark_idwmbk_20 ._option_idwmbk_32:focus[data-focus-method='key']{
     -webkit-box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
     -webkit-box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
             box-shadow:rgba(132, 115, 255,0.8) 0 0 0 4px;
             box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(132, 115, 255,0.8)) 0 0 0 4px;
   }
-._themeDark_17gxdx9_20 ._option_17gxdx9_32._selected_17gxdx9_84:hover, ._themeDark_17gxdx9_20 ._option_17gxdx9_32._selected_17gxdx9_84:active{
+._themeDark_idwmbk_20 ._option_idwmbk_32._selected_idwmbk_84:hover, ._themeDark_idwmbk_20 ._option_idwmbk_32._selected_idwmbk_84:active{
       background:transparent;
       cursor:default;
     }
-._themeDark_17gxdx9_20._modeClassic_17gxdx9_92 ._option_17gxdx9_32:hover{
+._themeDark_idwmbk_20._modeClassic_idwmbk_92 ._option_idwmbk_32:hover{
     background:rgba(132, 115, 255,0.3);
     background:var(--rs-color-primary-t-fog-dark-theme, rgba(132, 115, 255,0.3));
   }
-._themeDark_17gxdx9_20._modeRock_17gxdx9_98 ._option_17gxdx9_32:hover{
+._themeDark_idwmbk_20._modeRock_idwmbk_98 ._option_idwmbk_32:hover{
     background:rgba(255,255,255,0.1);
   }
-._disabled_17gxdx9_71._themeDark_17gxdx9_20 ._option_17gxdx9_32,
-._disabled_17gxdx9_71._themeDark_17gxdx9_20 ._option_17gxdx9_32._selected_17gxdx9_84{
+._disabled_idwmbk_71._themeDark_idwmbk_20 ._option_idwmbk_32,
+._disabled_idwmbk_71._themeDark_idwmbk_20 ._option_idwmbk_32._selected_idwmbk_84{
   color:rgba(255,255,255,0.2);
 }
-._mark_17gxdx9_145{
+._mark_idwmbk_145{
   position:absolute;
   top:0;
   bottom:0;
@@ -175,32 +174,32 @@
   -webkit-box-sizing:border-box;
           box-sizing:border-box;
   border-radius:24px;
-  -webkit-transition:all 0.3s;
-  transition:all 0.3s;
+  -webkit-transition:all 0.2s;
+  transition:all 0.2s;
 }
-._themeLight_17gxdx9_16._modeClassic_17gxdx9_92 ._mark_17gxdx9_145{
+._themeLight_idwmbk_16._modeClassic_idwmbk_92 ._mark_idwmbk_145{
     border:solid 2px #6B57FF;
     border:solid 2px var(--rs-color-primary-light-theme, #6B57FF);
   }
-._themeDark_17gxdx9_20._modeClassic_17gxdx9_92 ._mark_17gxdx9_145{
+._themeDark_idwmbk_20._modeClassic_idwmbk_92 ._mark_idwmbk_145{
     border:solid 2px #8473FF;
     border:solid 2px var(--rs-color-primary-dark-theme, #8473FF);
   }
-._themeLight_17gxdx9_16._modeRock_17gxdx9_98 ._mark_17gxdx9_145{
+._themeLight_idwmbk_16._modeRock_idwmbk_98 ._mark_idwmbk_145{
     border:solid 2px #19191C;
   }
-._themeDark_17gxdx9_20._modeRock_17gxdx9_98 ._mark_17gxdx9_145{
+._themeDark_idwmbk_20._modeRock_idwmbk_98 ._mark_idwmbk_145{
     border:solid 2px #FFFFFF;
   }
-._sizeL_17gxdx9_24 ._mark_17gxdx9_145{
+._sizeL_idwmbk_24 ._mark_idwmbk_145{
     border-radius:36px;
   }
-._sizeXS_17gxdx9_28 ._mark_17gxdx9_145{
+._sizeXS_idwmbk_28 ._mark_idwmbk_145{
     border-radius:4px;
   }
-._themeLight_17gxdx9_16._disabled_17gxdx9_71 ._mark_17gxdx9_145{
+._themeLight_idwmbk_16._disabled_idwmbk_71 ._mark_idwmbk_145{
     border:solid 2px rgba(25,25,28,0.4);
   }
-._themeDark_17gxdx9_20._disabled_17gxdx9_71 ._mark_17gxdx9_145{
+._themeDark_idwmbk_20._disabled_idwmbk_71 ._mark_idwmbk_145{
     border:solid 2px rgba(255,255,255,0.2);
   }

package/lib/index.d.ts

@@ -1 +1,2 @@
-export { default } from './switcher';
+export { default, Switcher } from './switcher';
+export type { SwitcherProps } from './switcher';

package/lib/index.js

@@ -1,2 +1,2 @@
 import './index.css';
-export { Switcher as default } from './switcher.js';
+export { Switcher, Switcher as default } from './switcher.js';

package/lib/index.p.module.css.js

@@ -1,17 +1,17 @@
 var styles = {
-  "switcher": "_switcher_17gxdx9_4",
-  "themeLight": "_themeLight_17gxdx9_16",
-  "themeDark": "_themeDark_17gxdx9_20",
-  "sizeL": "_sizeL_17gxdx9_24",
-  "sizeXS": "_sizeXS_17gxdx9_28",
-  "option": "_option_17gxdx9_32",
-  "sizeM": "_sizeM_17gxdx9_55",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_17gxdx9_1",
-  "sizeS": "_sizeS_17gxdx9_60",
-  "disabled": "_disabled_17gxdx9_71",
-  "selected": "_selected_17gxdx9_84",
-  "modeClassic": "_modeClassic_17gxdx9_92",
-  "modeRock": "_modeRock_17gxdx9_98",
-  "mark": "_mark_17gxdx9_145"
+  "switcher": "_switcher_idwmbk_4",
+  "themeLight": "_themeLight_idwmbk_16",
+  "themeDark": "_themeDark_idwmbk_20",
+  "sizeL": "_sizeL_idwmbk_24",
+  "sizeXS": "_sizeXS_idwmbk_28",
+  "option": "_option_idwmbk_32",
+  "sizeM": "_sizeM_idwmbk_55",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_idwmbk_1",
+  "sizeS": "_sizeS_idwmbk_60",
+  "disabled": "_disabled_idwmbk_71",
+  "selected": "_selected_idwmbk_84",
+  "modeClassic": "_modeClassic_idwmbk_92",
+  "modeRock": "_modeRock_idwmbk_98",
+  "mark": "_mark_idwmbk_145"
 };
 export { styles as default };

package/lib/switcher.d.ts

@@ -1,22 +1,28 @@
 import React from 'react';
-export declare type SwitcherValue = string | number | null | symbol | boolean;
-export interface SwitcherOption<ValueType extends SwitcherValue> {
+export interface SwitcherOption<OptionsValueType> {
     label: React.ReactNode;
-    value: ValueType;
+    value: OptionsValueType;
 }
 export declare type SwitcherSize = 'l' | 'm' | 's' | 'xs';
 export declare type SwitcherTheme = 'light' | 'dark';
 export declare type SwitcherMode = 'rock' | 'classic';
-export interface SwitcherProps<ValueType extends SwitcherValue> {
-    options: SwitcherOption<ValueType>[];
+export interface SwitcherProps<ValueType, OptionsValueType extends ValueType> {
+    /** Current selected value */
     value: ValueType;
-    onChange: (value: ValueType) => any;
+    /** Array of options */
+    options?: SwitcherOption<OptionsValueType>[];
+    onChange: (value: OptionsValueType) => void;
     className?: string;
     theme?: SwitcherTheme;
     size?: SwitcherSize;
+    /** Appearance mode */
     mode?: SwitcherMode;
     disabled?: boolean;
+    /** Identifier for e2e tests */
     'data-e2e'?: string;
 }
-export declare const Switcher: React.FC<SwitcherProps<SwitcherValue>>;
+export declare function Switcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, ['data-e2e']: e2eId, options, value: switcherValue, mode, onChange }: SwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare namespace Switcher {
+    var propTypes: {};
+}
 export default Switcher;

package/lib/switcher.js

@@ -3,11 +3,11 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
 import "core-js/modules/es.object.to-string.js";
-import React, { useState, useRef, useMemo, useCallback } from 'react';
+import React, { useRef, useMemo, useCallback, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useResizeDetector } from 'react-resize-detector';
 import cn from 'classnames';
 import { useTheme } from '@rescui/ui-contexts';
+import { useResizeObserver } from '@rescui/use-resize-observer';
 import styles from './index.p.module.css.js';
 var sizeToClass = {
   l: styles.sizeL,
@@ -58,7 +58,7 @@ var optionRenderer = function optionRenderer(_ref, ref) {
 
 var Option = /*#__PURE__*/React.forwardRef(optionRenderer);
 
-var Switcher = function Switcher(_ref2) {
+function Switcher(_ref2) {
   var className = _ref2.className,
       themeFromProps = _ref2.theme,
       _ref2$size = _ref2.size,
@@ -70,20 +70,11 @@ var Switcher = function Switcher(_ref2) {
       _ref2$mode = _ref2.mode,
       mode = _ref2$mode === void 0 ? 'classic' : _ref2$mode,
       onChange = _ref2.onChange;
-
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      setDummyState = _useState2[1];
-
   var refsArray = useRef([]);
+  var containerRef = useRef(null);
   var theme = useTheme(themeFromProps);
+  var optionsHash = hashOptions(options); // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  var _useResizeDetector = useResizeDetector({
-    handleHeight: false
-  }),
-      resizeDetectorRef = _useResizeDetector.ref;
-
-  var optionsHash = hashOptions(options);
   var memoizedOptions = useMemo(function () {
     return options;
   }, [optionsHash]);
@@ -94,28 +85,45 @@ var Switcher = function Switcher(_ref2) {
       }
 
       if (refsArray.current[index] !== ref) {
-        refsArray.current[index] = ref; // force rerender
-
-        setDummyState(function (s) {
-          return !s;
-        });
+        refsArray.current[index] = ref;
       }
     };
   }, []);
   var activeIndex = findIndexByValue(memoizedOptions, switcherValue);
-  var activeRef = refsArray.current[activeIndex];
-  var markOffset = 0;
-  var markWidth = 0;
 
-  if (activeRef) {
-    markOffset = activeRef.offsetLeft;
-    markWidth = activeRef.getBoundingClientRect().width;
-  }
+  var _useState = useState({
+    offset: 0,
+    width: 0
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      mark = _useState2[0],
+      setMark = _useState2[1];
+
+  var onResize = function onResize() {
+    var activeEl = refsArray.current[activeIndex];
+
+    if (!activeEl) {
+      return;
+    }
+
+    var activeElBox = activeEl.getBoundingClientRect();
+    var parentBox = activeEl.parentElement.getBoundingClientRect();
+    setMark({
+      // standard activeEl.offsetLeft always return rounded value, so it does not suit us
+      offset: activeElBox.left - parentBox.left,
+      width: activeElBox.width
+    });
+  }; // eslint-disable-next-line react-hooks/exhaustive-deps
+
 
+  useEffect(function () {
+    return onResize();
+  }, [activeIndex]);
+  useResizeObserver(containerRef, onResize);
   return /*#__PURE__*/React.createElement("span", {
-    ref: resizeDetectorRef,
     className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled),
     "data-e2e": e2eId,
+    ref: containerRef,
     "data-test": "switcher".concat(disabled ? '-disabled' : '')
   }, _mapInstanceProperty(memoizedOptions).call(memoizedOptions, function (_ref3, index) {
     var value = _ref3.value,
@@ -134,29 +142,24 @@ var Switcher = function Switcher(_ref2) {
   }), /*#__PURE__*/React.createElement("span", {
     className: cn(styles.mark),
     style: {
-      left: markOffset,
-      width: markWidth
+      left: mark.offset,
+      width: mark.width
     }
   }));
-};
+}
 
-var switcherValuePropType = PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol, PropTypes.bool]);
 var optionPropType = PropTypes.shape({
   label: PropTypes.node.isRequired,
-  value: switcherValuePropType.isRequired
+  value: PropTypes.any.isRequired
 });
 Switcher.propTypes = {
   options: PropTypes.arrayOf(optionPropType).isRequired,
-  value: switcherValuePropType.isRequired,
   onChange: PropTypes.func.isRequired,
+  value: PropTypes.any.isRequired,
   className: PropTypes.string,
   size: PropTypes.oneOf(['l', 'm', 's', 'xs']),
   theme: PropTypes.oneOf(['light', 'dark']),
   disabled: PropTypes.bool,
-
-  /**
-   * Identifier for e2e tests
-   * */
   'data-e2e': PropTypes.string
 };
 export { Switcher, Switcher as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.14.0",
+    "@rescui/use-resize-observer": "^0.1.1",
     "classnames": "^2.2.6",
-    "core-js": "^3.9.1",
-    "react-resize-detector": "^6.7.3"
+    "core-js": "^3.9.1"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "<0.4.0",
@@ -33,5 +33,5 @@
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "20a2d86279a96ad1375a69513d550bdc983f9616"
+  "gitHead": "40e998f9a619c95fe39dc88c3f1ddb824cf7b37a"
 }