@rescui/switcher 0.1.2 → 0.1.3

package/lib/index.css

@@ -1,4 +1,4 @@
-._switcher_8dando_4{
+._switcher_defyb_4{
 
   position:relative;
 
@@ -16,21 +16,21 @@
 
   background:transparent;
 }
-._themeLight_8dando_17{
+._themeLight_defyb_17{
   -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_8dando_21{
+._themeDark_defyb_21{
   -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_8dando_25{
+._sizeL_defyb_25{
   border-radius:36px;
 }
-._sizeXS_8dando_29{
+._sizeXS_defyb_29{
   border-radius:4px;
 }
-._option_8dando_33{
+._option_defyb_33{
   position:relative;
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -50,7 +50,7 @@
 
   background:transparent;
 }
-._sizeL_8dando_25 ._option_8dando_33{
+._sizeL_defyb_25 ._option_defyb_33{
     padding:12px 32px;
     color:rgba(25,25,28,0.7);
     color:var(--rs-typography-color-average, rgba(25,25,28,0.7));
@@ -63,7 +63,7 @@
     line-height:var(--rs-text-1-line-height, 28px);
     border-radius:36px;
   }
-._sizeM_8dando_56 ._option_8dando_33{
+._sizeM_defyb_56 ._option_defyb_33{
     padding:8px 24px;
     letter-spacing:0.0015em;
     color:rgba(25,25,28,0.7);
@@ -76,10 +76,10 @@
     line-height:24px;
     line-height:var(--rs-text-2-line-height, 24px);
   }
-._rs-reset-letter-spacing_8dando_1 ._sizeM_8dando_56 ._option_8dando_33{
+._rs-reset-letter-spacing_defyb_1 ._sizeM_defyb_56 ._option_defyb_33{
     letter-spacing:normal;
   }
-._sizeS_8dando_61 ._option_8dando_33{
+._sizeS_defyb_61 ._option_defyb_33{
     padding:6px 16px;
     letter-spacing:0.0015em;
     color:rgba(25,25,28,0.7);
@@ -92,10 +92,10 @@
     line-height:24px;
     line-height:var(--rs-text-2-line-height, 24px);
   }
-._rs-reset-letter-spacing_8dando_1 ._sizeS_8dando_61 ._option_8dando_33{
+._rs-reset-letter-spacing_defyb_1 ._sizeS_defyb_61 ._option_defyb_33{
     letter-spacing:normal;
   }
-._sizeXS_8dando_29 ._option_8dando_33{
+._sizeXS_defyb_29 ._option_defyb_33{
     padding:2px 12px;
     letter-spacing:0.0045em;
     color:rgba(25,25,28,0.7);
@@ -107,68 +107,68 @@
     line-height:20px;
     line-height:var(--rs-text-3-line-height, 20px);
   }
-._rs-reset-letter-spacing_8dando_1 ._sizeXS_8dando_29 ._option_8dando_33{
+._rs-reset-letter-spacing_defyb_1 ._sizeXS_defyb_29 ._option_defyb_33{
     letter-spacing:normal;
   }
-._sizeXS_8dando_29 ._option_8dando_33 {
+._sizeXS_defyb_29 ._option_defyb_33 {
     border-radius:4px;
 }
-._disabled_8dando_72 ._option_8dando_33{
+._disabled_defyb_72 ._option_defyb_33{
     cursor:not-allowed;
     pointer-events:none;
   }
-._themeLight_8dando_17 ._option_8dando_33{
+._themeLight_defyb_17 ._option_defyb_33{
   color:#19191C;
 }
-._themeLight_8dando_17 ._option_8dando_33:focus[data-focus-method='key']{
+._themeLight_defyb_17 ._option_defyb_33:focus[data-focus-method='key']{
     -webkit-box-shadow:rgba(22,125,255,0.8) 0 0 0 4px;
     -webkit-box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(22,125,255,0.8)) 0 0 0 4px;
             box-shadow:rgba(22,125,255,0.8) 0 0 0 4px;
             box-shadow:var(--rs-color-primary-t-dim-light-theme, rgba(22,125,255,0.8)) 0 0 0 4px;
   }
-._themeLight_8dando_17 ._option_8dando_33._selected_8dando_85:hover, ._themeLight_8dando_17 ._option_8dando_33._selected_8dando_85:active{
+._themeLight_defyb_17 ._option_defyb_33._selected_defyb_85:hover, ._themeLight_defyb_17 ._option_defyb_33._selected_defyb_85:active{
       background:transparent;
       cursor:default;
     }
-._themeLight_8dando_17._modeClassic_8dando_93 ._option_8dando_33:hover{
+._themeLight_defyb_17._modeClassic_defyb_93 ._option_defyb_33:hover{
     background:rgba(22,125,255,0.2);
     background:var(--rs-color-primary-t-fog-light-theme, rgba(22,125,255,0.2));
   }
-._themeLight_8dando_17._modeRock_8dando_99 ._option_8dando_33:hover{
+._themeLight_defyb_17._modeRock_defyb_99 ._option_defyb_33:hover{
     background:rgba(25,25,28,0.1);
   }
-._disabled_8dando_72._themeLight_8dando_17 ._option_8dando_33,
-._disabled_8dando_72._themeLight_8dando_17 ._option_8dando_33._selected_8dando_85{
+._disabled_defyb_72._themeLight_defyb_17 ._option_defyb_33,
+._disabled_defyb_72._themeLight_defyb_17 ._option_defyb_33._selected_defyb_85{
   color:rgba(25,25,28,0.4);
 }
-._themeDark_8dando_21 ._option_8dando_33{
+._themeDark_defyb_21 ._option_defyb_33{
   color:#FFFFFF;
 }
-._themeDark_8dando_21 ._option_8dando_33:hover{
+._themeDark_defyb_21 ._option_defyb_33:hover{
     background:rgba(255,255,255,0.1);
   }
-._themeDark_8dando_21 ._option_8dando_33:focus[data-focus-method='key']{
+._themeDark_defyb_21 ._option_defyb_33:focus[data-focus-method='key']{
     -webkit-box-shadow:rgba(76,166,255,0.8) 0 0 0 4px;
     -webkit-box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(76,166,255,0.8)) 0 0 0 4px;
             box-shadow:rgba(76,166,255,0.8) 0 0 0 4px;
             box-shadow:var(--rs-color-primary-t-dim-dark-theme, rgba(76,166,255,0.8)) 0 0 0 4px;
   }
-._themeDark_8dando_21 ._option_8dando_33._selected_8dando_85:hover, ._themeDark_8dando_21 ._option_8dando_33._selected_8dando_85:active{
+._themeDark_defyb_21 ._option_defyb_33._selected_defyb_85:hover, ._themeDark_defyb_21 ._option_defyb_33._selected_defyb_85:active{
       background:transparent;
       cursor:default;
     }
-._themeDark_8dando_21._modeClassic_8dando_93 ._option_8dando_33:hover{
+._themeDark_defyb_21._modeClassic_defyb_93 ._option_defyb_33:hover{
     background:rgba(76,166,255,0.3);
     background:var(--rs-color-primary-t-fog-dark-theme, rgba(76,166,255,0.3));
   }
-._themeDark_8dando_21._modeRock_8dando_99 ._option_8dando_33:hover{
+._themeDark_defyb_21._modeRock_defyb_99 ._option_defyb_33:hover{
     background:rgba(255,255,255,0.1);
   }
-._disabled_8dando_72._themeDark_8dando_21 ._option_8dando_33,
-._disabled_8dando_72._themeDark_8dando_21 ._option_8dando_33._selected_8dando_85{
+._disabled_defyb_72._themeDark_defyb_21 ._option_defyb_33,
+._disabled_defyb_72._themeDark_defyb_21 ._option_defyb_33._selected_defyb_85{
   color:rgba(255,255,255,0.2);
 }
-._mark_8dando_146{
+._mark_defyb_146{
   position:absolute;
   top:0;
   bottom:0;
@@ -176,34 +176,32 @@
   -webkit-box-sizing:border-box;
           box-sizing:border-box;
   border-radius:24px;
-
   -webkit-transition:all 0.3s;
-
   transition:all 0.3s;
 }
-._themeLight_8dando_17._modeClassic_8dando_93 ._mark_8dando_146{
+._themeLight_defyb_17._modeClassic_defyb_93 ._mark_defyb_146{
     border:solid 2px #167DFF;
     border:solid 2px var(--rs-color-primary-light-theme, #167DFF);
   }
-._themeDark_8dando_21._modeClassic_8dando_93 ._mark_8dando_146{
+._themeDark_defyb_21._modeClassic_defyb_93 ._mark_defyb_146{
     border:solid 2px #4CA6ff;
     border:solid 2px var(--rs-color-primary-dark-theme, #4CA6ff);
   }
-._themeLight_8dando_17._modeRock_8dando_99 ._mark_8dando_146{
+._themeLight_defyb_17._modeRock_defyb_99 ._mark_defyb_146{
     border:solid 2px #19191C;
   }
-._themeDark_8dando_21._modeRock_8dando_99 ._mark_8dando_146{
+._themeDark_defyb_21._modeRock_defyb_99 ._mark_defyb_146{
     border:solid 2px #FFFFFF;
   }
-._sizeL_8dando_25 ._mark_8dando_146{
+._sizeL_defyb_25 ._mark_defyb_146{
     border-radius:36px;
   }
-._sizeXS_8dando_29 ._mark_8dando_146{
+._sizeXS_defyb_29 ._mark_defyb_146{
     border-radius:4px;
   }
-._themeLight_8dando_17._disabled_8dando_72 ._mark_8dando_146{
+._themeLight_defyb_17._disabled_defyb_72 ._mark_defyb_146{
     border:solid 2px rgba(25,25,28,0.4);
   }
-._themeDark_8dando_21._disabled_8dando_72 ._mark_8dando_146{
+._themeDark_defyb_21._disabled_defyb_72 ._mark_defyb_146{
     border:solid 2px rgba(255,255,255,0.2);
   }

package/lib/index.module.pcss.js

@@ -1,17 +1,17 @@
 var styles = {
-  "switcher": "_switcher_8dando_4",
-  "themeLight": "_themeLight_8dando_17",
-  "themeDark": "_themeDark_8dando_21",
-  "sizeL": "_sizeL_8dando_25",
-  "sizeXS": "_sizeXS_8dando_29",
-  "option": "_option_8dando_33",
-  "sizeM": "_sizeM_8dando_56",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_8dando_1",
-  "sizeS": "_sizeS_8dando_61",
-  "disabled": "_disabled_8dando_72",
-  "selected": "_selected_8dando_85",
-  "modeClassic": "_modeClassic_8dando_93",
-  "modeRock": "_modeRock_8dando_99",
-  "mark": "_mark_8dando_146"
+  "switcher": "_switcher_defyb_4",
+  "themeLight": "_themeLight_defyb_17",
+  "themeDark": "_themeDark_defyb_21",
+  "sizeL": "_sizeL_defyb_25",
+  "sizeXS": "_sizeXS_defyb_29",
+  "option": "_option_defyb_33",
+  "sizeM": "_sizeM_defyb_56",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_defyb_1",
+  "sizeS": "_sizeS_defyb_61",
+  "disabled": "_disabled_defyb_72",
+  "selected": "_selected_defyb_85",
+  "modeClassic": "_modeClassic_defyb_93",
+  "modeRock": "_modeRock_defyb_99",
+  "mark": "_mark_defyb_146"
 };
 export default styles;

package/lib/switcher.js

@@ -1,7 +1,8 @@
+import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
 import _concatInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/concat";
 import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find-index";
 import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import React, { useRef, useMemo, useCallback } from 'react';
+import React, { useState, useRef, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useResizeDetector } from 'react-resize-detector';
 import cn from 'classnames';
@@ -68,15 +69,18 @@ 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 theme = useTheme(themeFromProps);
 
   var _useResizeDetector = useResizeDetector({
-    handleHeight: false,
-    refreshMode: 'debounce'
+    handleHeight: false
   }),
-      resizeDetectorRef = _useResizeDetector.ref,
-      switcherWidth = _useResizeDetector.width;
+      resizeDetectorRef = _useResizeDetector.ref;
 
   var optionsHash = hashOptions(options);
   var memoizedOptions = useMemo(function () {
@@ -84,20 +88,29 @@ var Switcher = function Switcher(_ref2) {
   }, [optionsHash]);
   var handleOptionRef = useCallback(function (index) {
     return function (ref) {
-      refsArray.current[index] = ref;
+      if (!ref) {
+        return;
+      }
+
+      if (refsArray.current[index] !== ref) {
+        refsArray.current[index] = ref; // force rerender
+
+        setDummyState(function (s) {
+          return !s;
+        });
+      }
     };
   }, []);
-  var offsetAndWidth = useMemo(function () {
-    if (refsArray.current.length === memoizedOptions.length && refsArray.current.every(Boolean)) {
-      var activeIndex = findIndexByValue(memoizedOptions, switcherValue);
-      var activeRef = refsArray.current[activeIndex];
-      var offset = activeRef.offsetLeft;
-      var width = activeRef.getBoundingClientRect().width;
-      return [offset, width];
-    } else {
-      return [0, 0];
-    }
-  }, [memoizedOptions, switcherValue, switcherWidth]);
+  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;
+  }
+
   return /*#__PURE__*/React.createElement("span", {
     ref: resizeDetectorRef,
     className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled),
@@ -118,10 +131,10 @@ var Switcher = function Switcher(_ref2) {
       selected: switcherValue === value
     });
   }), /*#__PURE__*/React.createElement("span", {
-    className: styles.mark,
+    className: cn(styles.mark),
     style: {
-      left: offsetAndWidth[0],
-      width: offsetAndWidth[1]
+      left: markOffset,
+      width: markWidth
     }
   }));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -26,12 +26,12 @@
     "react": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.0.5",
-    "@rescui/scripts": "^0.1.3",
-    "@rescui/typography": "^0.3.0"
+    "@rescui/colors": "^0.0.6",
+    "@rescui/scripts": "^0.1.4",
+    "@rescui/typography": "^0.4.0"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "11daffddcc420a78b5708443363da65c55f28103"
+  "gitHead": "6b1d206de2641861028760d73f33dee214c07911"
 }