@rescui/switcher 0.3.5 → 0.4.0

package/lib/index.css

@@ -1,4 +1,4 @@
-._switcher_f27dmz_4{
+._switcher_1h7wmbn_4{
   position:relative;
 
   display:-webkit-inline-box;
@@ -15,21 +15,21 @@
 
   background:transparent;
 }
-._themeLight_f27dmz_16{
+._themeLight_1h7wmbn_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_f27dmz_20{
+._themeDark_1h7wmbn_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_f27dmz_24{
+._sizeL_1h7wmbn_24{
   border-radius:36px;
 }
-._sizeXS_f27dmz_28{
+._sizeXS_1h7wmbn_28{
   border-radius:4px;
 }
-._option_f27dmz_32{
+._option_1h7wmbn_32{
   position:relative;
   -webkit-appearance:none;
      -moz-appearance:none;
@@ -49,7 +49,7 @@
 
   background:transparent;
 }
-._sizeL_f27dmz_24 ._option_f27dmz_32{
+._sizeL_1h7wmbn_24 ._option_1h7wmbn_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_f27dmz_55 ._option_f27dmz_32{
+._sizeM_1h7wmbn_55 ._option_1h7wmbn_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_f27dmz_1 ._sizeM_f27dmz_55 ._option_f27dmz_32{
+._rs-reset-letter-spacing_1h7wmbn_1 ._sizeM_1h7wmbn_55 ._option_1h7wmbn_32{
     letter-spacing:normal;
   }
-._sizeS_f27dmz_60 ._option_f27dmz_32{
+._sizeS_1h7wmbn_60 ._option_1h7wmbn_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_f27dmz_1 ._sizeS_f27dmz_60 ._option_f27dmz_32{
+._rs-reset-letter-spacing_1h7wmbn_1 ._sizeS_1h7wmbn_60 ._option_1h7wmbn_32{
     letter-spacing:normal;
   }
-._sizeXS_f27dmz_28 ._option_f27dmz_32{
+._sizeXS_1h7wmbn_28 ._option_1h7wmbn_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_f27dmz_1 ._sizeXS_f27dmz_28 ._option_f27dmz_32{
+._rs-reset-letter-spacing_1h7wmbn_1 ._sizeXS_1h7wmbn_28 ._option_1h7wmbn_32{
     letter-spacing:normal;
   }
-._sizeXS_f27dmz_28 ._option_f27dmz_32 {
+._sizeXS_1h7wmbn_28 ._option_1h7wmbn_32 {
     border-radius:4px;
 }
-._disabled_f27dmz_71 ._option_f27dmz_32{
+._disabled_1h7wmbn_71 ._option_1h7wmbn_32{
     cursor:not-allowed;
     pointer-events:none;
   }
-._themeLight_f27dmz_16 ._option_f27dmz_32{
+._themeLight_1h7wmbn_16 ._option_1h7wmbn_32{
   color:#19191C;
 }
-._themeLight_f27dmz_16 ._option_f27dmz_32:focus[data-focus-method='key']{
+._themeLight_1h7wmbn_16 ._option_1h7wmbn_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_f27dmz_16 ._option_f27dmz_32._selected_f27dmz_84:hover, ._themeLight_f27dmz_16 ._option_f27dmz_32._selected_f27dmz_84:active{
+._themeLight_1h7wmbn_16 ._option_1h7wmbn_32._selected_1h7wmbn_84:hover, ._themeLight_1h7wmbn_16 ._option_1h7wmbn_32._selected_1h7wmbn_84:active{
       background:transparent;
       cursor:default;
     }
-._themeLight_f27dmz_16._modeClassic_f27dmz_92 ._option_f27dmz_32:hover{
+._themeLight_1h7wmbn_16._modeClassic_1h7wmbn_92 ._option_1h7wmbn_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_f27dmz_16._modeRock_f27dmz_98 ._option_f27dmz_32:hover{
+._themeLight_1h7wmbn_16._modeRock_1h7wmbn_98 ._option_1h7wmbn_32:hover{
     background:rgba(25,25,28,0.1);
   }
-._disabled_f27dmz_71._themeLight_f27dmz_16 ._option_f27dmz_32,
-._disabled_f27dmz_71._themeLight_f27dmz_16 ._option_f27dmz_32._selected_f27dmz_84{
+._disabled_1h7wmbn_71._themeLight_1h7wmbn_16 ._option_1h7wmbn_32,
+._disabled_1h7wmbn_71._themeLight_1h7wmbn_16 ._option_1h7wmbn_32._selected_1h7wmbn_84{
   color:rgba(25,25,28,0.4);
 }
-._themeDark_f27dmz_20 ._option_f27dmz_32{
+._themeDark_1h7wmbn_20 ._option_1h7wmbn_32{
   color:#FFFFFF;
 }
-._themeDark_f27dmz_20 ._option_f27dmz_32:hover{
+._themeDark_1h7wmbn_20 ._option_1h7wmbn_32:hover{
     background:rgba(255,255,255,0.1);
   }
-._themeDark_f27dmz_20 ._option_f27dmz_32:focus[data-focus-method='key']{
+._themeDark_1h7wmbn_20 ._option_1h7wmbn_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_f27dmz_20 ._option_f27dmz_32._selected_f27dmz_84:hover, ._themeDark_f27dmz_20 ._option_f27dmz_32._selected_f27dmz_84:active{
+._themeDark_1h7wmbn_20 ._option_1h7wmbn_32._selected_1h7wmbn_84:hover, ._themeDark_1h7wmbn_20 ._option_1h7wmbn_32._selected_1h7wmbn_84:active{
       background:transparent;
       cursor:default;
     }
-._themeDark_f27dmz_20._modeClassic_f27dmz_92 ._option_f27dmz_32:hover{
+._themeDark_1h7wmbn_20._modeClassic_1h7wmbn_92 ._option_1h7wmbn_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_f27dmz_20._modeRock_f27dmz_98 ._option_f27dmz_32:hover{
+._themeDark_1h7wmbn_20._modeRock_1h7wmbn_98 ._option_1h7wmbn_32:hover{
     background:rgba(255,255,255,0.1);
   }
-._disabled_f27dmz_71._themeDark_f27dmz_20 ._option_f27dmz_32,
-._disabled_f27dmz_71._themeDark_f27dmz_20 ._option_f27dmz_32._selected_f27dmz_84{
+._disabled_1h7wmbn_71._themeDark_1h7wmbn_20 ._option_1h7wmbn_32,
+._disabled_1h7wmbn_71._themeDark_1h7wmbn_20 ._option_1h7wmbn_32._selected_1h7wmbn_84{
   color:rgba(255,255,255,0.2);
 }
-._mark_f27dmz_145{
+._mark_1h7wmbn_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_f27dmz_16._modeClassic_f27dmz_92 ._mark_f27dmz_145{
+._themeLight_1h7wmbn_16._modeClassic_1h7wmbn_92 ._mark_1h7wmbn_145{
     border:solid 2px #6B57FF;
     border:solid 2px var(--rs-color-primary-light-theme, #6B57FF);
   }
-._themeDark_f27dmz_20._modeClassic_f27dmz_92 ._mark_f27dmz_145{
+._themeDark_1h7wmbn_20._modeClassic_1h7wmbn_92 ._mark_1h7wmbn_145{
     border:solid 2px #8473FF;
     border:solid 2px var(--rs-color-primary-dark-theme, #8473FF);
   }
-._themeLight_f27dmz_16._modeRock_f27dmz_98 ._mark_f27dmz_145{
+._themeLight_1h7wmbn_16._modeRock_1h7wmbn_98 ._mark_1h7wmbn_145{
     border:solid 2px #19191C;
   }
-._themeDark_f27dmz_20._modeRock_f27dmz_98 ._mark_f27dmz_145{
+._themeDark_1h7wmbn_20._modeRock_1h7wmbn_98 ._mark_1h7wmbn_145{
     border:solid 2px #FFFFFF;
   }
-._sizeL_f27dmz_24 ._mark_f27dmz_145{
+._sizeL_1h7wmbn_24 ._mark_1h7wmbn_145{
     border-radius:36px;
   }
-._sizeXS_f27dmz_28 ._mark_f27dmz_145{
+._sizeXS_1h7wmbn_28 ._mark_1h7wmbn_145{
     border-radius:4px;
   }
-._themeLight_f27dmz_16._disabled_f27dmz_71 ._mark_f27dmz_145{
+._themeLight_1h7wmbn_16._disabled_1h7wmbn_71 ._mark_1h7wmbn_145{
     border:solid 2px rgba(25,25,28,0.4);
   }
-._themeDark_f27dmz_20._disabled_f27dmz_71 ._mark_f27dmz_145{
+._themeDark_1h7wmbn_20._disabled_1h7wmbn_71 ._mark_1h7wmbn_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_f27dmz_4",
-  "themeLight": "_themeLight_f27dmz_16",
-  "themeDark": "_themeDark_f27dmz_20",
-  "sizeL": "_sizeL_f27dmz_24",
-  "sizeXS": "_sizeXS_f27dmz_28",
-  "option": "_option_f27dmz_32",
-  "sizeM": "_sizeM_f27dmz_55",
-  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_f27dmz_1",
-  "sizeS": "_sizeS_f27dmz_60",
-  "disabled": "_disabled_f27dmz_71",
-  "selected": "_selected_f27dmz_84",
-  "modeClassic": "_modeClassic_f27dmz_92",
-  "modeRock": "_modeRock_f27dmz_98",
-  "mark": "_mark_f27dmz_145"
+  "switcher": "_switcher_1h7wmbn_4",
+  "themeLight": "_themeLight_1h7wmbn_16",
+  "themeDark": "_themeDark_1h7wmbn_20",
+  "sizeL": "_sizeL_1h7wmbn_24",
+  "sizeXS": "_sizeXS_1h7wmbn_28",
+  "option": "_option_1h7wmbn_32",
+  "sizeM": "_sizeM_1h7wmbn_55",
+  "rs-reset-letter-spacing": "_rs-reset-letter-spacing_1h7wmbn_1",
+  "sizeS": "_sizeS_1h7wmbn_60",
+  "disabled": "_disabled_1h7wmbn_71",
+  "selected": "_selected_1h7wmbn_84",
+  "modeClassic": "_modeClassic_1h7wmbn_92",
+  "modeRock": "_modeRock_1h7wmbn_98",
+  "mark": "_mark_1h7wmbn_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.5",
+  "version": "0.4.0",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
@@ -16,9 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime-corejs3": "^7.14.0",
+    "@rescui/use-resize-observer": "^0.1.0",
     "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",
@@ -26,12 +26,12 @@
     "react": ">=16.8.0 <18"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.1.4",
+    "@rescui/colors": "^0.1.5",
     "@rescui/scripts": "^0.1.7",
-    "@rescui/typography": "^0.8.2"
+    "@rescui/typography": "^0.8.3"
   },
   "scripts": {
     "build": "rescui-scripts build"
   },
-  "gitHead": "399d5bcaf892b517a4b5d8108d509ed6549629f2"
+  "gitHead": "341ecc94b9a50ccb3b10d07a16162fbc350c2135"
 }