@rescui/switcher 0.10.3 → 0.10.5-RUI-226-Update-card-cn-6e43cc89.60

package/lib/vertical-switcher.js

@@ -1,93 +1,66 @@
-import "core-js/modules/es.function.name.js";
-import "core-js/modules/es.regexp.exec.js";
-import _sliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/slice";
-import _Array$from from "@babel/runtime-corejs3/core-js-stable/array/from";
-import _Symbol from "@babel/runtime-corejs3/core-js-stable/symbol";
-import _getIteratorMethod from "@babel/runtime-corejs3/core-js/get-iterator-method";
-import _slicedToArray from "@babel/runtime-corejs3/helpers/esm/slicedToArray";
-import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/map";
-import "core-js/modules/es.object.to-string.js";
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { var _context; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty(_context = Object.prototype.toString.call(o)).call(_context, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 import React, { createContext, useRef, useCallback, useState, useEffect, useContext, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { useResizeObserver } from '@rescui/use-resize-observer';
-import styles from './vertical-switcher.p.module.css.js'; // eslint-disable-next-line @typescript-eslint/no-empty-function
+import styles from './vertical-switcher.p.module.css.js';
+const MARK_TRANSITION_DURATION = '0.2s'; // eslint-disable-next-line @typescript-eslint/no-empty-function
 
-var noop = function noop() {};
+const noop = () => {};
 
-var verticalSwitcherContext = /*#__PURE__*/createContext({
+const verticalSwitcherContext = /*#__PURE__*/createContext({
   switcherValue: null,
   onChange: noop,
-  handleOptionRef: function handleOptionRef() {
-    return noop;
-  },
+  handleOptionRef: () => noop,
   disabled: null
 });
-var sizeToClass = {
+const sizeToClass = {
   l: styles.sizeL,
   m: styles.sizeM,
   s: styles.sizeS,
   xs: styles.sizeXS
 };
-var themeToClass = {
+const themeToClass = {
   light: styles.themeLight,
   dark: styles.themeDark
 };
-var modeToClass = {
+const modeToClass = {
   classic: styles.modeClassic,
   rock: styles.modeRock
 }; // eslint-disable-next-line complexity
 
-var processOptions = function processOptions(_ref) {
-  var _foundIndexByValue;
-
-  var rawOptions = _ref.rawOptions,
-      value = _ref.value,
-      iconPosition = _ref.iconPosition;
-  var options = [];
-  var foundIndexByValue = null;
-  var currentIndex = 0;
-  var withLeftIcons = false;
-
-  var _iterator = _createForOfIteratorHelper(rawOptions),
-      _step;
-
-  try {
-    for (_iterator.s(); !(_step = _iterator.n()).done;) {
-      var option = _step.value;
-      options.push({
-        label: option.label,
-        value: option.value,
-        icon: option.icon
-      });
+const processOptions = _ref => {
+  let {
+    rawOptions,
+    value,
+    iconPosition
+  } = _ref;
+  const options = [];
+  let foundIndexByValue = null;
+  let currentIndex = 0;
+  let withLeftIcons = false;
+
+  for (const option of rawOptions) {
+    options.push({
+      label: option.label,
+      value: option.value,
+      icon: option.icon
+    });
 
-      if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
-        withLeftIcons = true;
-      }
+    if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
+      withLeftIcons = true;
+    }
 
-      if (option.value === value && foundIndexByValue === null) {
-        foundIndexByValue = currentIndex;
-      }
+    if (option.value === value && foundIndexByValue === null) {
+      foundIndexByValue = currentIndex;
+    }
 
-      currentIndex++;
-    } // If some options on the first depth level have icons, we should align all other options accordingly
+    currentIndex++;
+  } // If some options on the first depth level have icons, we should align all other options accordingly
 
-  } catch (err) {
-    _iterator.e(err);
-  } finally {
-    _iterator.f();
-  }
 
   if (withLeftIcons) {
-    options.forEach(function (option) {
+    options.forEach(option => {
       if (! /*#__PURE__*/React.isValidElement(option.icon)) {
         option.icon = /*#__PURE__*/React.createElement("span", {
           className: styles.fakeIcon
@@ -97,43 +70,41 @@ var processOptions = function processOptions(_ref) {
   }
 
   return {
-    options: options,
-    activeIndex: (_foundIndexByValue = foundIndexByValue) !== null && _foundIndexByValue !== void 0 ? _foundIndexByValue : 0
+    options,
+    activeIndex: foundIndexByValue ?? 0
   };
 }; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
 
-var isNodeEmpty = function isNodeEmpty(node) {
-  return node === null || typeof node === 'undefined' || node === false || node === true || node === '';
-};
+const isNodeEmpty = node => node === null || typeof node === 'undefined' || node === false || node === true || node === '';
 
 function Option(_ref2) {
-  var label = _ref2.label,
-      value = _ref2.value,
-      icon = _ref2.icon,
-      index = _ref2.index;
-
-  var _useContext = useContext(verticalSwitcherContext),
-      switcherValue = _useContext.switcherValue,
-      onChange = _useContext.onChange,
-      handleOptionRef = _useContext.handleOptionRef,
-      disabled = _useContext.disabled;
-
-  var selected = switcherValue === value;
-  var isWithoutText = isNodeEmpty(label);
+  let {
+    label,
+    value,
+    icon,
+    index
+  } = _ref2;
+  const {
+    switcherValue,
+    onChange,
+    handleOptionRef,
+    disabled
+  } = useContext(verticalSwitcherContext);
+  const selected = switcherValue === value;
+  const isWithoutText = isNodeEmpty(label);
   return /*#__PURE__*/React.createElement("button", {
     key: String(value),
     ref: handleOptionRef(index),
-    onClick: function onClick() {
-      return onChange(value);
-    },
+    onClick: () => onChange(value),
     type: "button",
     "data-rs-internal": 'vertical-switcher__option',
     disabled: disabled,
     className: cn(styles.option, selected && styles.selected),
-    "data-test": cn("vertical-switcher-option", selected && ' vertical-switcher-option-selected')
+    "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected')
   }, /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon)
+    className: cn(icon.props.className, styles.icon),
+    'data-render-all-sizes': true
   }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
     className: styles.optionLabel
   }, label));
@@ -142,92 +113,100 @@ function Option(_ref2) {
 function VerticalSwitcher(_ref3) {
   var _options$activeIndex;
 
-  var className = _ref3.className,
-      themeFromProps = _ref3.theme,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'm' : _ref3$size,
-      disabled = _ref3.disabled,
-      e2eId = _ref3['data-e2e'],
-      rawOptions = _ref3.options,
-      switcherValue = _ref3.value,
-      _ref3$mode = _ref3.mode,
-      mode = _ref3$mode === void 0 ? 'classic' : _ref3$mode,
-      _ref3$iconPosition = _ref3.iconPosition,
-      iconPosition = _ref3$iconPosition === void 0 ? 'left' : _ref3$iconPosition,
-      onChange = _ref3.onChange,
-      style = _ref3.style;
-  var refsArray = useRef([]);
-  var containerRef = useRef(null);
-  var theme = useThemeWithUndefined(themeFromProps);
-
-  var _processOptions = processOptions({
-    rawOptions: rawOptions,
+  let {
+    className,
+    theme: themeFromProps,
+    size = 'm',
+    disabled,
+    ['data-e2e']: e2eId,
+    options: rawOptions,
     value: switcherValue,
-    iconPosition: iconPosition
-  }),
-      options = _processOptions.options,
-      activeIndex = _processOptions.activeIndex;
-
-  var handleOptionRef = useCallback(function (index) {
-    return function (ref) {
-      if (!ref) {
-        return;
-      }
+    mode = 'classic',
+    iconPosition = 'left',
+    onChange,
+    style
+  } = _ref3;
+  const refsArray = useRef([]);
+  const containerRef = useRef(null);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
+    options,
+    activeIndex
+  } = processOptions({
+    rawOptions,
+    value: switcherValue,
+    iconPosition
+  });
+  const handleOptionRef = useCallback(index => ref => {
+    if (!ref) {
+      return;
+    }
 
-      if (refsArray.current[index] !== ref) {
-        refsArray.current[index] = ref;
-      }
-    };
+    if (refsArray.current[index] !== ref) {
+      refsArray.current[index] = ref;
+    }
   }, []);
-
-  var _useState = useState({
+  const [mark, setMark] = useState({
     offset: 0,
-    height: 0
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      mark = _useState2[0],
-      setMark = _useState2[1];
+    height: 0,
+    hidden: true
+  });
+  const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
+  const firstMarkUpdate = useRef(true);
 
-  var onResize = function onResize() {
-    var activeEl = refsArray.current[activeIndex];
+  const updateMark = function () {
+    let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    const activeEl = refsArray.current[activeIndex];
 
     if (!activeEl) {
       return;
     }
 
-    var parentEl = activeEl.parentElement;
-    var activeElBox = activeEl.getBoundingClientRect();
-    var parentBox = parentEl.getBoundingClientRect();
+    const parentEl = activeEl.parentElement;
+    const activeElBox = activeEl.getBoundingClientRect();
+    const parentBox = parentEl.getBoundingClientRect();
     setMark({
       // standard activeEl.offsetTop always return rounded value, so it does not suit us
       offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
-      height: activeElBox.height
+      height: activeElBox.height,
+      hidden: false
     });
+
+    if (firstMarkUpdate.current) {
+      firstMarkUpdate.current = false;
+      setIsMarkTransitionEnabled(false);
+    } else {
+      setIsMarkTransitionEnabled(isValueChanged);
+    }
   }; // eslint-disable-next-line react-hooks/exhaustive-deps
 
 
-  useEffect(function () {
-    return onResize();
-  }, [activeIndex]);
-  useResizeObserver(containerRef, onResize);
+  useEffect(() => updateMark(true), [activeIndex]);
+  useResizeObserver(containerRef, () => updateMark(false), {
+    ignoreFirstCall: true
+  });
   return /*#__PURE__*/React.createElement("span", {
-    className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
+    className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
     "data-e2e": e2eId,
     ref: containerRef,
     "data-rs-internal": 'vertical-switcher',
-    "data-test": cn("vertical-switcher", disabled && "vertical-switcher-disabled"),
-    style: style
+    "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
+    style: { ...style,
+      '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
+    }
   }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
     value: {
       switcherValue: (_options$activeIndex = options[activeIndex]) === null || _options$activeIndex === void 0 ? void 0 : _options$activeIndex.value,
-      onChange: onChange,
-      handleOptionRef: handleOptionRef,
-      disabled: disabled
+      onChange,
+      handleOptionRef,
+      disabled
     }
-  }, _mapInstanceProperty(options).call(options, function (_ref4, index) {
-    var value = _ref4.value,
-        label = _ref4.label,
-        icon = _ref4.icon;
+  }, options.map((_ref4, index) => {
+    let {
+      value,
+      label,
+      icon
+    } = _ref4;
     return /*#__PURE__*/React.createElement(Option, {
       key: String(value),
       value: value,
@@ -244,7 +223,7 @@ function VerticalSwitcher(_ref3) {
   })));
 }
 
-var optionPropType = PropTypes.shape({
+const optionPropType = PropTypes.shape({
   label: PropTypes.node,
   value: PropTypes.any.isRequired,
   icon: PropTypes.node

package/lib/vertical-switcher.p.module.css.js

@@ -1,21 +1,22 @@
 var styles = {
-  "themeLight": "_themeLight_el1i9h_6",
-  "themeDark": "_themeDark_el1i9h_9",
-  "sizeXS": "_sizeXS_el1i9h_13",
-  "sizeS": "_sizeS_el1i9h_16",
-  "sizeM": "_sizeM_el1i9h_19",
-  "sizeL": "_sizeL_el1i9h_22",
-  "modeClassic": "_modeClassic_el1i9h_26",
-  "modeRock": "_modeRock_el1i9h_29",
-  "verticalSwitcher": "_verticalSwitcher_el1i9h_33",
-  "disabled": "_disabled_el1i9h_50",
-  "alignIconLeft": "_alignIconLeft_el1i9h_55",
-  "alignIconRight": "_alignIconRight_el1i9h_58",
-  "option": "_option_el1i9h_62",
-  "selected": "_selected_el1i9h_107",
-  "optionLabel": "_optionLabel_el1i9h_126",
-  "icon": "_icon_el1i9h_132",
-  "fakeIcon": "_fakeIcon_el1i9h_143",
-  "mark": "_mark_el1i9h_150"
+  "themeLight": "_themeLight_1gqbuza_6",
+  "themeDark": "_themeDark_1gqbuza_9",
+  "sizeXS": "_sizeXS_1gqbuza_13",
+  "sizeS": "_sizeS_1gqbuza_16",
+  "sizeM": "_sizeM_1gqbuza_19",
+  "sizeL": "_sizeL_1gqbuza_22",
+  "modeClassic": "_modeClassic_1gqbuza_26",
+  "modeRock": "_modeRock_1gqbuza_29",
+  "verticalSwitcher": "_verticalSwitcher_1gqbuza_33",
+  "disabled": "_disabled_1gqbuza_50",
+  "alignIconLeft": "_alignIconLeft_1gqbuza_55",
+  "alignIconRight": "_alignIconRight_1gqbuza_58",
+  "option": "_option_1gqbuza_62",
+  "selected": "_selected_1gqbuza_107",
+  "hiddenMark": "_hiddenMark_1gqbuza_116",
+  "optionLabel": "_optionLabel_1gqbuza_147",
+  "icon": "_icon_1gqbuza_153",
+  "fakeIcon": "_fakeIcon_1gqbuza_164",
+  "mark": "_mark_1gqbuza_171"
 };
 export { styles as default };

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@rescui/switcher",
-  "version": "0.10.3",
+  "version": "0.10.5-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
   "description": "",
   "license": "Apache-2.0",
   "author": "JetBrains",
   "main": "lib/index.js",
+  "module": "lib/index.js",
   "src:main": "src/index.ts",
   "files": [
     "lib",
@@ -15,10 +16,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime-corejs3": "^7.14.0",
-    "@rescui/use-resize-observer": "^0.2.4",
-    "classnames": "^2.2.6",
-    "core-js": "^3.9.1"
+    "@babel/runtime-corejs3": "^7.26.0",
+    "@rescui/use-resize-observer": "0.2.6-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "classnames": "^2.2.6"
   },
   "peerDependencies": {
     "@rescui/ui-contexts": "^0.5.0",
@@ -26,15 +26,15 @@
     "react": ">=16.8.0 <19"
   },
   "devDependencies": {
-    "@rescui/colors": "^0.2.5",
-    "@rescui/icons": "^0.16.11",
-    "@rescui/scripts": "^0.3.4",
-    "@rescui/typography": "^0.19.0"
+    "@rescui/colors": "0.2.7-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "@rescui/icons": "0.16.13-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89",
+    "@rescui/scripts": "0.4.0",
+    "@rescui/typography": "0.19.2-RUI-226-Update-card-cn-6e43cc89.60+6e43cc89"
   },
   "scripts": {
     "build": "rescui-scripts build && yarn run build-pcss-api",
     "build-pcss-api": "rescui-scripts build-pcss-api --file public-api.p.css"
   },
   "nx": {},
-  "gitHead": "3ef429c66a082b71861a814ba508693c68a94842"
+  "gitHead": "6e43cc893fafb22b990273901bc0a070fb15761f"
 }