@rescui/switcher 0.13.6 → 0.14.0

package/lib/switcher.js

@@ -1,5 +1,7 @@
 "use client";
-import React, { cloneElement, useRef, useCallback, useState, useEffect } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useRef, useState, useEffect, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -30,8 +32,9 @@ const findIndexByValue = (options, value) => {
 
 const isNodeEmpty = node => node === null || typeof node === 'undefined' || node === false || node === true || node === '';
 
-const optionRenderer = (_ref, ref) => {
-  let {
+const Option = t0 => {
+  const $ = c(22);
+  const {
     label,
     value,
     icon,
@@ -39,132 +42,391 @@ const optionRenderer = (_ref, ref) => {
     onChange,
     selected,
     name,
-    'aria-label': ariaLabel
-  } = _ref;
-  const isWithoutText = isNodeEmpty(label);
-  return /*#__PURE__*/React.createElement("label", {
-    ref: ref,
-    key: String(value),
-    "data-rs-internal": 'switcher__option',
-    className: cn(styles.option, selected && styles.selected),
     "aria-label": ariaLabel
-  }, /*#__PURE__*/React.createElement("input", {
-    type: "radio",
-    value: String(value),
-    onChange: onChange,
-    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", null, label));
+  } = t0;
+  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 = String(value);
+  let t6;
+
+  if ($[4] !== disabled || $[5] !== name || $[6] !== onChange || $[7] !== selected || $[8] !== t5) {
+    t6 = /*#__PURE__*/React.createElement("input", {
+      type: "radio",
+      value: t5,
+      onChange: onChange,
+      className: styles.radio,
+      checked: selected,
+      disabled: disabled,
+      name: name
+    });
+    $[4] = disabled;
+    $[5] = name;
+    $[6] = onChange;
+    $[7] = selected;
+    $[8] = t5;
+    $[9] = t6;
+  } else {
+    t6 = $[9];
+  }
+
+  let t7;
+
+  if ($[10] !== icon) {
+    t7 = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(icon) && /*#__PURE__*/cloneElement(icon, {
+      className: cn(icon.props.className, styles.icon),
+      "data-render-all-sizes": true
+    });
+    $[10] = icon;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+
+  let t8;
+
+  if ($[12] !== isWithoutText || $[13] !== label) {
+    t8 = !isWithoutText && /*#__PURE__*/React.createElement("span", null, label);
+    $[12] = isWithoutText;
+    $[13] = label;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+
+  let t9;
+
+  if ($[15] !== ariaLabel || $[16] !== t2 || $[17] !== t4 || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
+    t9 = /*#__PURE__*/React.createElement("label", {
+      key: t2,
+      "data-rs-internal": "switcher__option",
+      className: t4,
+      "aria-label": ariaLabel
+    }, t6, t7, t8);
+    $[15] = ariaLabel;
+    $[16] = t2;
+    $[17] = t4;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+
+  return t9;
 };
 
-const Option = /*#__PURE__*/React.forwardRef(optionRenderer);
+function Switcher(t0) {
+  const $ = c(57);
+  let className;
+  let disabled;
+  let name;
+  let onChange;
+  let options;
+  let rest;
+  let style;
+  let switcherValue;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let themeFromProps;
 
-function Switcher(_ref2) {
-  let {
-    className,
-    theme: themeFromProps,
-    size = 'm',
-    disabled,
-    compact = false,
-    options,
-    value: switcherValue,
-    mode = 'classic',
-    iconPosition = 'left',
-    onChange,
-    style,
-    name,
-    ...rest
-  } = _ref2;
-  const refsArray = useRef([]);
+  if ($[0] !== t0) {
+    ({
+      className,
+      theme: themeFromProps,
+      size: t1,
+      disabled,
+      compact: t2,
+      options,
+      value: switcherValue,
+      mode: t3,
+      iconPosition: t4,
+      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] = t4;
+    $[13] = themeFromProps;
+  } else {
+    className = $[1];
+    disabled = $[2];
+    name = $[3];
+    onChange = $[4];
+    options = $[5];
+    rest = $[6];
+    style = $[7];
+    switcherValue = $[8];
+    t1 = $[9];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
+    themeFromProps = $[13];
+  }
+
+  const size = t1 === undefined ? "m" : t1;
+  const compact = t2 === undefined ? false : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const iconPosition = t4 === undefined ? "left" : t4;
   const containerRef = useRef(null);
   const theme = useThemeWithUndefined(themeFromProps);
   const uniqueId = useSafeId();
-  const handleOptionRef = useCallback(index => ref => {
-    if (!ref) {
-      return;
-    }
-
-    if (refsArray.current[index] !== ref) {
-      refsArray.current[index] = ref;
-    }
-  }, []);
-  const activeIndex = findIndexByValue(options, switcherValue);
-  const [mark, setMark] = useState({
-    offset: 0,
-    width: 0,
-    hidden: true
-  });
+  let t5;
+
+  if ($[14] !== options || $[15] !== switcherValue) {
+    t5 = findIndexByValue(options, switcherValue);
+    $[14] = options;
+    $[15] = switcherValue;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+
+  const activeIndex = t5;
+  let t6;
+
+  if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      offset: 0,
+      width: 0,
+      hidden: true
+    };
+    $[17] = t6;
+  } else {
+    t6 = $[17];
+  }
+
+  const [mark, setMark] = useState(t6);
   const [isMarkTransitionEnabled, setIsMarkTransitionEnabled] = useState(false);
   const firstMarkUpdate = useRef(true);
+  let t7;
+
+  if ($[18] !== activeIndex) {
+    t7 = t8 => {
+      const isValueChanged = t8 === undefined ? false : t8;
+      const activeEl = containerRef.current?.children.item(activeIndex);
 
-  const updateMark = function () {
-    let isValueChanged = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
-    const activeEl = refsArray.current[activeIndex];
-
-    if (!activeEl) {
-      return;
-    }
-
-    const activeElBox = activeEl.getBoundingClientRect();
-    const 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,
-      hidden: false
+      if (!activeEl) {
+        return;
+      }
+
+      const activeElBox = activeEl.getBoundingClientRect();
+      const parentBox = activeEl.parentElement.getBoundingClientRect();
+      setMark({
+        offset: activeElBox.left - parentBox.left,
+        width: activeElBox.width,
+        hidden: false
+      });
+
+      if (firstMarkUpdate.current) {
+        firstMarkUpdate.current = false;
+        setIsMarkTransitionEnabled(false);
+      } else {
+        setIsMarkTransitionEnabled(isValueChanged);
+      }
+    };
+
+    $[18] = activeIndex;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+
+  const updateMark = t7;
+  let t8;
+  let t9;
+
+  if ($[20] !== updateMark) {
+    t8 = () => updateMark(true);
+
+    t9 = [updateMark];
+    $[20] = updateMark;
+    $[21] = t8;
+    $[22] = t9;
+  } else {
+    t8 = $[21];
+    t9 = $[22];
+  }
+
+  useEffect(t8, t9);
+  let t10;
+
+  if ($[23] !== updateMark) {
+    t10 = () => updateMark(false);
+
+    $[23] = updateMark;
+    $[24] = t10;
+  } else {
+    t10 = $[24];
+  }
+
+  useResizeObserver(containerRef, t10);
+  const t11 = sizeToClass[size];
+  const t12 = themeToClass[theme];
+  const t13 = modeToClass[mode];
+  const t14 = disabled && styles.disabled;
+  const t15 = compact && styles.compact;
+  const t16 = mark.hidden && styles.hiddenMark;
+  const t17 = iconPosition === "right" ? styles.alignIconRight : styles.alignIconLeft;
+  let t18;
+
+  if ($[25] !== className || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t14 || $[30] !== t15 || $[31] !== t16 || $[32] !== t17) {
+    t18 = cn(className, styles.switcher, t11, t12, t13, t14, t15, t16, t17);
+    $[25] = className;
+    $[26] = t11;
+    $[27] = t12;
+    $[28] = t13;
+    $[29] = t14;
+    $[30] = t15;
+    $[31] = t16;
+    $[32] = t17;
+    $[33] = t18;
+  } else {
+    t18 = $[33];
+  }
+
+  const t19 = disabled && "switcher-disabled";
+  let t20;
+
+  if ($[34] !== t19) {
+    t20 = cn("switcher", t19);
+    $[34] = t19;
+    $[35] = t20;
+  } else {
+    t20 = $[35];
+  }
+
+  const t21 = isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : "0s";
+  let t22;
+
+  if ($[36] !== style || $[37] !== t21) {
+    t22 = { ...style,
+      "--_rs-switcher-mark-transition-duration": t21
+    };
+    $[36] = style;
+    $[37] = t21;
+    $[38] = t22;
+  } else {
+    t22 = $[38];
+  }
+
+  let t23;
+
+  if ($[39] !== activeIndex || $[40] !== disabled || $[41] !== name || $[42] !== onChange || $[43] !== options || $[44] !== uniqueId) {
+    t23 = options.map((t24, index) => {
+      const {
+        value,
+        label,
+        icon,
+        "aria-label": optionAriaLabel
+      } = t24;
+      return /*#__PURE__*/React.createElement(Option, {
+        key: String(value),
+        value: value,
+        label: label,
+        icon: icon,
+        disabled: disabled,
+        onChange: () => onChange(value),
+        selected: options[activeIndex]?.value === value,
+        name: name ?? `rs-switcher-${uniqueId}`,
+        "aria-label": optionAriaLabel
+      });
     });
+    $[39] = activeIndex;
+    $[40] = disabled;
+    $[41] = name;
+    $[42] = onChange;
+    $[43] = options;
+    $[44] = uniqueId;
+    $[45] = t23;
+  } else {
+    t23 = $[45];
+  }
 
-    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));
-  return /*#__PURE__*/React.createElement("span", { ...rest,
-    className: cn(className, styles.switcher, sizeToClass[size], themeToClass[theme], modeToClass[mode], disabled && styles.disabled, compact && styles.compact, mark.hidden && styles.hiddenMark, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft),
-    ref: containerRef,
-    "data-rs-internal": 'switcher',
-    "data-test": cn(`switcher`, disabled && `switcher-disabled`),
-    style: { ...style,
-      '--_rs-switcher-mark-transition-duration': isMarkTransitionEnabled ? MARK_TRANSITION_DURATION : '0s'
-    },
-    role: "radiogroup"
-  }, options.map((_ref3, index) => {
-    let {
-      value,
-      label,
-      icon,
-      'aria-label': optionAriaLabel
-    } = _ref3;
-    return /*#__PURE__*/React.createElement(Option, {
-      key: String(value),
-      value: value,
-      label: label,
-      icon: icon,
-      disabled: disabled,
-      onChange: () => onChange(value),
-      ref: handleOptionRef(index),
-      selected: options[activeIndex]?.value === value,
-      name: name ?? `rs-switcher-${uniqueId}`,
-      "aria-label": optionAriaLabel
+  let t24;
+
+  if ($[46] === Symbol.for("react.memo_cache_sentinel")) {
+    t24 = cn(styles.mark);
+    $[46] = t24;
+  } else {
+    t24 = $[46];
+  }
+
+  let t25;
+
+  if ($[47] !== mark.offset || $[48] !== mark.width) {
+    t25 = /*#__PURE__*/React.createElement("span", {
+      className: t24,
+      style: {
+        left: mark.offset,
+        width: mark.width
+      }
     });
-  }), /*#__PURE__*/React.createElement("span", {
-    className: cn(styles.mark),
-    style: {
-      left: mark.offset,
-      width: mark.width
-    }
-  }));
+    $[47] = mark.offset;
+    $[48] = mark.width;
+    $[49] = t25;
+  } else {
+    t25 = $[49];
+  }
+
+  let t26;
+
+  if ($[50] !== rest || $[51] !== t18 || $[52] !== t20 || $[53] !== t22 || $[54] !== t23 || $[55] !== t25) {
+    t26 = /*#__PURE__*/React.createElement("span", _extends({}, rest, {
+      className: t18,
+      ref: containerRef,
+      "data-rs-internal": "switcher",
+      "data-test": t20,
+      style: t22,
+      role: "radiogroup"
+    }), t23, t25);
+    $[50] = rest;
+    $[51] = t18;
+    $[52] = t20;
+    $[53] = t22;
+    $[54] = t23;
+    $[55] = t25;
+    $[56] = t26;
+  } else {
+    t26 = $[56];
+  }
+
+  return t26;
 }
 
 const optionPropType = PropTypes.shape({

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

@@ -1,22 +1,22 @@
 var styles = {
-  "themeLight": "_themeLight_10udnwc_6",
-  "themeDark": "_themeDark_10udnwc_9",
-  "sizeXS": "_sizeXS_10udnwc_13",
-  "sizeS": "_sizeS_10udnwc_16",
-  "sizeM": "_sizeM_10udnwc_19",
-  "sizeL": "_sizeL_10udnwc_22",
-  "modeClassic": "_modeClassic_10udnwc_26",
-  "modeRock": "_modeRock_10udnwc_29",
-  "compact": "_compact_10udnwc_33",
-  "switcher": "_switcher_10udnwc_37",
-  "disabled": "_disabled_10udnwc_55",
-  "alignIconLeft": "_alignIconLeft_10udnwc_60",
-  "alignIconRight": "_alignIconRight_10udnwc_63",
-  "option": "_option_10udnwc_67",
-  "selected": "_selected_10udnwc_118",
-  "hiddenMark": "_hiddenMark_10udnwc_127",
-  "icon": "_icon_10udnwc_158",
-  "mark": "_mark_10udnwc_171",
-  "radio": "_radio_10udnwc_199"
+  "themeLight": "_themeLight_11g3j9s_6",
+  "themeDark": "_themeDark_11g3j9s_9",
+  "sizeXS": "_sizeXS_11g3j9s_13",
+  "sizeS": "_sizeS_11g3j9s_16",
+  "sizeM": "_sizeM_11g3j9s_19",
+  "sizeL": "_sizeL_11g3j9s_22",
+  "modeClassic": "_modeClassic_11g3j9s_26",
+  "modeRock": "_modeRock_11g3j9s_29",
+  "compact": "_compact_11g3j9s_33",
+  "switcher": "_switcher_11g3j9s_37",
+  "disabled": "_disabled_11g3j9s_55",
+  "alignIconLeft": "_alignIconLeft_11g3j9s_60",
+  "alignIconRight": "_alignIconRight_11g3j9s_63",
+  "option": "_option_11g3j9s_67",
+  "selected": "_selected_11g3j9s_118",
+  "hiddenMark": "_hiddenMark_11g3j9s_127",
+  "icon": "_icon_11g3j9s_158",
+  "mark": "_mark_11g3j9s_171",
+  "radio": "_radio_11g3j9s_199"
 };
 export { styles as default };

package/lib/vertical-switcher.d.ts

@@ -40,7 +40,7 @@ interface VerticalSwitcherExplicitProps<ValueType, OptionsValueType extends Valu
     name?: string;
 }
 export type VerticalSwitcherProps<ValueType, OptionsValueType extends ValueType> = VerticalSwitcherExplicitProps<ValueType, OptionsValueType> & Omit<React.HTMLProps<HTMLSpanElement>, keyof VerticalSwitcherExplicitProps<ValueType, OptionsValueType>>;
-export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, options: rawOptions, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
+export declare function VerticalSwitcher<ValueType, OptionsValueType extends ValueType = ValueType>({ className, theme: themeFromProps, size, disabled, options, value: switcherValue, mode, iconPosition, onChange, style, name, ...rest }: VerticalSwitcherProps<ValueType, OptionsValueType>): JSX.Element;
 export declare namespace VerticalSwitcher {
     var propTypes: {
         options: PropTypes.Validator<PropTypes.InferProps<{