@rescui/switcher 0.13.5-RUI-297-Add-react-compiler-to-the-packages-build-dbbefd7b8.10 → 0.13.5-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39

package/lib/vertical-switcher.js

@@ -1,5 +1,7 @@
 "use client";
-import React, { createContext, useRef, useCallback, useState, useEffect, useContext, cloneElement } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useRef, useState, useEffect, createContext, useContext, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -13,7 +15,6 @@ const noop = () => {};
 const verticalSwitcherContext = /*#__PURE__*/createContext({
   switcherValue: null,
   onChange: noop,
-  handleOptionRef: () => noop,
   disabled: null,
   name: null
 });
@@ -30,212 +31,500 @@ const themeToClass = {
 const modeToClass = {
   classic: styles.modeClassic,
   rock: styles.modeRock
-}; // eslint-disable-next-line complexity
-
-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,
-      'aria-label': option['aria-label']
-    });
-
-    if ( /*#__PURE__*/React.isValidElement(option.icon) && iconPosition === 'left') {
-      withLeftIcons = true;
-    }
-
-    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
-
-
-  if (withLeftIcons) {
-    options.forEach(option => {
-      if (! /*#__PURE__*/React.isValidElement(option.icon)) {
-        option.icon = /*#__PURE__*/React.createElement("span", {
-          className: styles.fakeIcon
-        });
-      }
-    });
-  }
+};
 
-  return {
-    options,
-    activeIndex: foundIndexByValue ?? 0
-  };
+const findIndexByValue = (options, value) => {
+  const index = options.findIndex(option => option.value === value);
+  return index === -1 ? 0 : index;
 }; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
 
 const isNodeEmpty = node => node === null || typeof node === 'undefined' || node === false || node === true || node === '';
 
-function Option(_ref2) {
-  let {
+function Option(t0) {
+  const $ = c(28);
+  const {
     label,
     value,
     icon,
-    index,
-    'aria-label': ariaLabel
-  } = _ref2;
+    "aria-label": ariaLabel
+  } = t0;
   const {
     switcherValue,
     onChange,
-    handleOptionRef,
     disabled,
     name
   } = useContext(verticalSwitcherContext);
   const selected = switcherValue === value;
-  const isWithoutText = isNodeEmpty(label);
-  return /*#__PURE__*/React.createElement("label", {
-    key: String(value),
-    ref: handleOptionRef(index),
-    "data-rs-internal": 'vertical-switcher__option',
-    className: cn(styles.option, selected && styles.selected),
-    "data-test": cn(`vertical-switcher-option`, selected && ' vertical-switcher-option-selected'),
-    "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    value: String(value),
-    onChange: () => onChange(value),
-    className: styles.radio,
-    checked: selected,
-    disabled: disabled,
-    name: name
-  }), /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
-    className: cn(icon.props.className, styles.icon),
-    'data-render-all-sizes': true
-  }), !isWithoutText && /*#__PURE__*/React.createElement("span", {
-    className: styles.optionLabel
-  }, label));
+  let t1;
+
+  if ($[0] !== label) {
+    t1 = isNodeEmpty(label);
+    $[0] = label;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+
+  const isWithoutText = t1;
+  const t2 = String(value);
+  const t3 = selected && styles.selected;
+  let t4;
+
+  if ($[2] !== t3) {
+    t4 = cn(styles.option, t3);
+    $[2] = t3;
+    $[3] = t4;
+  } else {
+    t4 = $[3];
+  }
+
+  const t5 = selected && " vertical-switcher-option-selected";
+  let t6;
+
+  if ($[4] !== t5) {
+    t6 = cn("vertical-switcher-option", t5);
+    $[4] = t5;
+    $[5] = t6;
+  } else {
+    t6 = $[5];
+  }
+
+  const t7 = String(value);
+  let t8;
+
+  if ($[6] !== onChange || $[7] !== value) {
+    t8 = () => onChange(value);
+
+    $[6] = onChange;
+    $[7] = value;
+    $[8] = t8;
+  } else {
+    t8 = $[8];
+  }
+
+  let t9;
+
+  if ($[9] !== disabled || $[10] !== name || $[11] !== selected || $[12] !== t7 || $[13] !== t8) {
+    t9 = /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      value: t7,
+      onChange: t8,
+      className: styles.radio,
+      checked: selected,
+      disabled: disabled,
+      name: name
+    });
+    $[9] = disabled;
+    $[10] = name;
+    $[11] = selected;
+    $[12] = t7;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+
+  let t10;
+
+  if ($[15] !== icon) {
+    t10 = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+      className: cn(icon.props.className, styles.icon),
+      "data-render-all-sizes": true
+    });
+    $[15] = icon;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+
+  let t11;
+
+  if ($[17] !== isWithoutText || $[18] !== label) {
+    t11 = !isWithoutText && /*#__PURE__*/React.createElement("span", {
+      className: styles.optionLabel
+    }, label);
+    $[17] = isWithoutText;
+    $[18] = label;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+
+  let t12;
+
+  if ($[20] !== ariaLabel || $[21] !== t10 || $[22] !== t11 || $[23] !== t2 || $[24] !== t4 || $[25] !== t6 || $[26] !== t9) {
+    t12 = /*#__PURE__*/React.createElement("label", {
+      key: t2,
+      "data-rs-internal": "vertical-switcher__option",
+      className: t4,
+      "data-test": t6,
+      "aria-label": ariaLabel
+    }, t9, t10, t11);
+    $[20] = ariaLabel;
+    $[21] = t10;
+    $[22] = t11;
+    $[23] = t2;
+    $[24] = t4;
+    $[25] = t6;
+    $[26] = t9;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+
+  return t12;
 }
 
-function VerticalSwitcher(_ref3) {
-  let {
-    className,
-    theme: themeFromProps,
-    size = 'm',
-    disabled,
-    options: rawOptions,
-    value: switcherValue,
-    mode = 'classic',
-    iconPosition = 'left',
-    onChange,
-    style,
-    name,
-    ...rest
-  } = _ref3;
-  const refsArray = useRef([]);
+function VerticalSwitcher(t0) {
+  const $ = c(65);
+  let className;
+  let disabled;
+  let name;
+  let onChange;
+  let options;
+  let rest;
+  let style;
+  let switcherValue;
+  let t1;
+  let t2;
+  let t3;
+  let themeFromProps;
+
+  if ($[0] !== t0) {
+    ({
+      className,
+      theme: themeFromProps,
+      size: t1,
+      disabled,
+      options,
+      value: switcherValue,
+      mode: t2,
+      iconPosition: t3,
+      onChange,
+      style,
+      name,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = disabled;
+    $[3] = name;
+    $[4] = onChange;
+    $[5] = options;
+    $[6] = rest;
+    $[7] = style;
+    $[8] = switcherValue;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = themeFromProps;
+  } else {
+    className = $[1];
+    disabled = $[2];
+    name = $[3];
+    onChange = $[4];
+    options = $[5];
+    rest = $[6];
+    style = $[7];
+    switcherValue = $[8];
+    t1 = $[9];
+    t2 = $[10];
+    t3 = $[11];
+    themeFromProps = $[12];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const mode = t2 === undefined ? "classic" : t2;
+  const iconPosition = t3 === undefined ? "left" : t3;
   const containerRef = useRef(null);
   const theme = useThemeWithUndefined(themeFromProps);
   const uniqueId = useSafeId();
-  const {
-    options,
-    activeIndex
-  } = processOptions({
-    rawOptions,
-    value: switcherValue,
-    iconPosition
-  });
-  const handleOptionRef = useCallback(index => ref => {
-    if (!ref) {
-      return;
-    }
+  let t4;
 
-    if (refsArray.current[index] !== ref) {
-      refsArray.current[index] = ref;
-    }
-  }, []);
-  const [mark, setMark] = useState({
-    offset: 0,
-    height: 0,
-    hidden: true
-  });
+  if ($[13] !== options || $[14] !== switcherValue) {
+    t4 = findIndexByValue(options, switcherValue);
+    $[13] = options;
+    $[14] = switcherValue;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+
+  const activeIndex = t4;
+  let t5;
+
+  if ($[16] !== iconPosition || $[17] !== options) {
+    t5 = iconPosition === "left" && options.some(_temp);
+    $[16] = iconPosition;
+    $[17] = options;
+    $[18] = t5;
+  } else {
+    t5 = $[18];
+  }
+
+  const withLeftIcons = t5;
+  let t6;
+
+  if ($[19] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      offset: 0,
+      height: 0,
+      hidden: true
+    };
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+
+  const [mark, setMark] = useState(t6);
   const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
   const firstMarkUpdate = useRef(true);
+  let t7;
 
-  const updateMark = function () {
-    let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const activeEl = refsArray.current[activeIndex];
+  if ($[20] !== activeIndex) {
+    t7 = t8 => {
+      const isValueChanged = t8 === undefined ? false : t8;
+      const activeEl = containerRef.current?.children.item(activeIndex);
 
-    if (!activeEl) {
-      return;
-    }
+      if (!activeEl) {
+        return;
+      }
 
-    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,
-      hidden: false
-    });
+      const parentEl = activeEl.parentElement;
+      const activeElBox = activeEl.getBoundingClientRect();
+      const parentBox = parentEl.getBoundingClientRect();
+      setMark({
+        offset: activeElBox.top - parentBox.top + parentEl.scrollTop,
+        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(() => updateMark(true), [activeIndex]);
-  useResizeObserver(containerRef, () => updateMark(false), {
-    ignoreFirstCall: true
-  });
-  return /*#__PURE__*/React.createElement("span", { ...rest,
-    className: cn(className, styles.verticalSwitcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
-    ref: containerRef,
-    "data-rs-internal": 'vertical-switcher',
-    "data-test": cn(`vertical-switcher`, disabled && `vertical-switcher-disabled`),
-    style: { ...style,
-      '--_rs-switcher-vertical-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
-    },
-    role: "radiogroup"
-  }, /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
-    value: {
-      switcherValue: options[activeIndex]?.value,
+      if (firstMarkUpdate.current) {
+        firstMarkUpdate.current = false;
+        setIsMarkTransitionEnabled(false);
+      } else {
+        setIsMarkTransitionEnabled(isValueChanged);
+      }
+    };
+
+    $[20] = activeIndex;
+    $[21] = t7;
+  } else {
+    t7 = $[21];
+  }
+
+  const updateMark = t7;
+  let t8;
+  let t9;
+
+  if ($[22] !== updateMark) {
+    t8 = () => updateMark(true);
+
+    t9 = [updateMark];
+    $[22] = updateMark;
+    $[23] = t8;
+    $[24] = t9;
+  } else {
+    t8 = $[23];
+    t9 = $[24];
+  }
+
+  useEffect(t8, t9);
+  let t10;
+
+  if ($[25] !== updateMark) {
+    t10 = () => updateMark(false);
+
+    $[25] = updateMark;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+
+  let t11;
+
+  if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      ignoreFirstCall: true
+    };
+    $[27] = t11;
+  } else {
+    t11 = $[27];
+  }
+
+  useResizeObserver(containerRef, t10, t11);
+  const t12 = sizeToClass[size];
+  const t13 = themeToClass[theme];
+  const t14 = modeToClass[mode];
+  const t15 = disabled && styles.disabled;
+  const t16 = mark.hidden && styles.hiddenMark;
+  const t17 = iconPosition === "right" ? styles.alignIconRight : styles.alignIconLeft;
+  let t18;
+
+  if ($[28] !== className || $[29] !== t12 || $[30] !== t13 || $[31] !== t14 || $[32] !== t15 || $[33] !== t16 || $[34] !== t17) {
+    t18 = cn(className, styles.verticalSwitcher, t12, t13, t14, t15, t16, t17);
+    $[28] = className;
+    $[29] = t12;
+    $[30] = t13;
+    $[31] = t14;
+    $[32] = t15;
+    $[33] = t16;
+    $[34] = t17;
+    $[35] = t18;
+  } else {
+    t18 = $[35];
+  }
+
+  const t19 = disabled && "vertical-switcher-disabled";
+  let t20;
+
+  if ($[36] !== t19) {
+    t20 = cn("vertical-switcher", t19);
+    $[36] = t19;
+    $[37] = t20;
+  } else {
+    t20 = $[37];
+  }
+
+  const t21 = isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : "0s";
+  let t22;
+
+  if ($[38] !== style || $[39] !== t21) {
+    t22 = { ...style,
+      "--_rs-switcher-vertical-mark-transition-duration": t21
+    };
+    $[38] = style;
+    $[39] = t21;
+    $[40] = t22;
+  } else {
+    t22 = $[40];
+  }
+
+  const t23 = options[activeIndex]?.value;
+  const t24 = name ?? `rs-vertical-switcher-${uniqueId}`;
+  let t25;
+
+  if ($[41] !== disabled || $[42] !== onChange || $[43] !== t23 || $[44] !== t24) {
+    t25 = {
+      switcherValue: t23,
       onChange,
-      handleOptionRef,
       disabled,
-      name: name ?? `rs-vertical-switcher-${uniqueId}`
+      name: t24
+    };
+    $[41] = disabled;
+    $[42] = onChange;
+    $[43] = t23;
+    $[44] = t24;
+    $[45] = t25;
+  } else {
+    t25 = $[45];
+  }
+
+  let t26;
+
+  if ($[46] !== options || $[47] !== withLeftIcons) {
+    let t27;
+
+    if ($[49] !== withLeftIcons) {
+      t27 = t28 => {
+        const {
+          value,
+          label,
+          icon,
+          "aria-label": optionAriaLabel
+        } = t28;
+        return /*#__PURE__*/React.createElement(Option, {
+          key: String(value),
+          value: value,
+          label: label,
+          icon: withLeftIcons && ! /*#__PURE__*/React.isValidElement(icon) ? /*#__PURE__*/React.createElement("span", {
+            className: styles.fakeIcon
+          }) : icon,
+          "aria-label": optionAriaLabel
+        });
+      };
+
+      $[49] = withLeftIcons;
+      $[50] = t27;
+    } else {
+      t27 = $[50];
     }
-  }, options.map((_ref4, index) => {
-    let {
-      value,
-      label,
-      icon,
-      'aria-label': optionAriaLabel
-    } = _ref4;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: String(value),
-      value: value,
-      label: label,
-      icon: icon,
-      index: index,
-      "aria-label": optionAriaLabel
+
+    t26 = options.map(t27);
+    $[46] = options;
+    $[47] = withLeftIcons;
+    $[48] = t26;
+  } else {
+    t26 = $[48];
+  }
+
+  let t27;
+
+  if ($[51] === Symbol.for("react.memo_cache_sentinel")) {
+    t27 = cn(styles.mark);
+    $[51] = t27;
+  } else {
+    t27 = $[51];
+  }
+
+  let t28;
+
+  if ($[52] !== mark.height || $[53] !== mark.offset) {
+    t28 = /*#__PURE__*/React.createElement("span", {
+      className: t27,
+      style: {
+        top: mark.offset,
+        height: mark.height
+      }
     });
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.mark),
-    style: {
-      top: mark.offset,
-      height: mark.height
-    }
-  })));
+    $[52] = mark.height;
+    $[53] = mark.offset;
+    $[54] = t28;
+  } else {
+    t28 = $[54];
+  }
+
+  let t29;
+
+  if ($[55] !== t25 || $[56] !== t26 || $[57] !== t28) {
+    t29 = /*#__PURE__*/React.createElement(verticalSwitcherContext.Provider, {
+      value: t25
+    }, t26, t28);
+    $[55] = t25;
+    $[56] = t26;
+    $[57] = t28;
+    $[58] = t29;
+  } else {
+    t29 = $[58];
+  }
+
+  let t30;
+
+  if ($[59] !== rest || $[60] !== t18 || $[61] !== t20 || $[62] !== t22 || $[63] !== t29) {
+    t30 = /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+      className: t18,
+      ref: containerRef,
+      "data-rs-internal": "vertical-switcher",
+      "data-test": t20,
+      style: t22,
+      role: "radiogroup"
+    }), t29);
+    $[59] = rest;
+    $[60] = t18;
+    $[61] = t20;
+    $[62] = t22;
+    $[63] = t29;
+    $[64] = t30;
+  } else {
+    t30 = $[64];
+  }
+
+  return t30;
+}
+
+function _temp(option) {
+  return /*#__PURE__*/React.isValidElement(option.icon);
 }
 
 const optionPropType = PropTypes.shape({