@rescui/select 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-8aaaed4be.39 → 0.18.1-RUI-297-Add-react-compiler-to-the-packages-build-ccd086200.40

package/lib/native-select.js

@@ -1,7 +1,7 @@
 "use client";
 import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
 import { c } from 'react-compiler-runtime';
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -49,7 +49,7 @@ const THEME_STYLES = {
 }; // eslint-disable-next-line complexity
 
 const NativeSelect = t0 => {
-  const $ = c(102);
+  const $ = c(104);
   let error;
   let id;
   let label;
@@ -160,25 +160,26 @@ const NativeSelect = t0 => {
   const isClearable = t6 === undefined ? false : t6;
   const reserveErrorLine = t7 === undefined ? false : t7;
   const boldLabel = t8 === undefined ? true : t8;
-  const triggerRef = React.useRef(null);
+  const [triggerEl, setTriggerEl] = useState(null);
   let t10;
 
-  if ($[24] !== error || $[25] !== isDisabled || $[26] !== label || $[27] !== note) {
+  if ($[24] !== error || $[25] !== isDisabled || $[26] !== label || $[27] !== note || $[28] !== triggerEl) {
     t10 = {
       prefix: "native-select",
       error,
       description: note,
       label,
-      fieldRef: triggerRef,
+      fieldEl: triggerEl,
       isDisabled
     };
     $[24] = error;
     $[25] = isDisabled;
     $[26] = label;
     $[27] = note;
-    $[28] = t10;
+    $[28] = triggerEl;
+    $[29] = t10;
   } else {
-    t10 = $[28];
+    t10 = $[29];
   }
 
   const {
@@ -189,20 +190,20 @@ const NativeSelect = t0 => {
   } = useA11y(t10);
   let t11;
 
-  if ($[29] !== onChange) {
+  if ($[30] !== onChange) {
     t11 = () => onChange(null);
 
-    $[29] = onChange;
-    $[30] = t11;
+    $[30] = onChange;
+    $[31] = t11;
   } else {
-    t11 = $[30];
+    t11 = $[31];
   }
 
   const reset = t11;
   const theme = useThemeWithUndefined(themeFromProps);
   let t12;
 
-  if ($[31] !== onChange || $[32] !== options) {
+  if ($[32] !== onChange || $[33] !== options) {
     t12 = event => {
       const newValue = event.target.value;
       const selectedOption = findSelectedOption(options, newValue);
@@ -212,24 +213,24 @@ const NativeSelect = t0 => {
       }
     };
 
-    $[31] = onChange;
-    $[32] = options;
-    $[33] = t12;
+    $[32] = onChange;
+    $[33] = options;
+    $[34] = t12;
   } else {
-    t12 = $[33];
+    t12 = $[34];
   }
 
   const handleChange = t12;
   let t13;
 
-  if ($[34] !== isDisabled) {
+  if ($[35] !== isDisabled) {
     t13 = {
       isDisabled
     };
-    $[34] = isDisabled;
-    $[35] = t13;
+    $[35] = isDisabled;
+    $[36] = t13;
   } else {
-    t13 = $[35];
+    t13 = $[36];
   }
 
   const {
@@ -238,14 +239,14 @@ const NativeSelect = t0 => {
   } = useFocus(t13);
   let t14;
 
-  if ($[36] !== isDisabled) {
+  if ($[37] !== isDisabled) {
     t14 = {
       isDisabled
     };
-    $[36] = isDisabled;
-    $[37] = t14;
+    $[37] = isDisabled;
+    $[38] = t14;
   } else {
-    t14 = $[37];
+    t14 = $[38];
   }
 
   const {
@@ -254,17 +255,17 @@ const NativeSelect = t0 => {
   } = useHover(t14);
   let t15;
 
-  if ($[38] !== isLoading || $[39] !== noOptionsMessage) {
+  if ($[39] !== isLoading || $[40] !== noOptionsMessage) {
     t15 = getEmptyMessage({
       isLoading,
       isNothingFound: false,
       noOptionsMessage
     });
-    $[38] = isLoading;
-    $[39] = noOptionsMessage;
-    $[40] = t15;
+    $[39] = isLoading;
+    $[40] = noOptionsMessage;
+    $[41] = t15;
   } else {
-    t15 = $[40];
+    t15 = $[41];
   }
 
   const emptyListMessage = t15;
@@ -274,82 +275,82 @@ const NativeSelect = t0 => {
   const t19 = Boolean(error) && styles.error;
   let t20;
 
-  if ($[41] !== className || $[42] !== t16 || $[43] !== t17 || $[44] !== t18 || $[45] !== t19) {
+  if ($[42] !== className || $[43] !== t16 || $[44] !== t17 || $[45] !== t18 || $[46] !== t19) {
     t20 = cn(className, styles.root, t16, t17, styles.classic, t18, t19);
-    $[41] = className;
-    $[42] = t16;
-    $[43] = t17;
-    $[44] = t18;
-    $[45] = t19;
-    $[46] = t20;
+    $[42] = className;
+    $[43] = t16;
+    $[44] = t17;
+    $[45] = t18;
+    $[46] = t19;
+    $[47] = t20;
   } else {
-    t20 = $[46];
+    t20 = $[47];
   }
 
   let t21;
 
-  if ($[47] !== labelProps) {
+  if ($[48] !== labelProps) {
     t21 = mergeProps(labelProps);
-    $[47] = labelProps;
-    $[48] = t21;
+    $[48] = labelProps;
+    $[49] = t21;
   } else {
-    t21 = $[48];
+    t21 = $[49];
   }
 
   let t22;
 
-  if ($[49] !== isClearable || $[50] !== reset) {
+  if ($[50] !== isClearable || $[51] !== reset) {
     t22 = event_0 => {
       if (isClearable && (event_0.key === "Backspace" || event_0.key === "Delete")) {
         reset();
       }
     };
 
-    $[49] = isClearable;
-    $[50] = reset;
-    $[51] = t22;
+    $[50] = isClearable;
+    $[51] = reset;
+    $[52] = t22;
   } else {
-    t22 = $[51];
+    t22 = $[52];
   }
 
   let t23;
 
-  if ($[52] !== fieldProps || $[53] !== focusProps || $[54] !== hoverProps || $[55] !== t22) {
+  if ($[53] !== fieldProps || $[54] !== focusProps || $[55] !== hoverProps || $[56] !== t22) {
     t23 = mergeProps(fieldProps, focusProps, hoverProps, {
       onKeyDown: t22
     });
-    $[52] = fieldProps;
-    $[53] = focusProps;
-    $[54] = hoverProps;
-    $[55] = t22;
-    $[56] = t23;
+    $[53] = fieldProps;
+    $[54] = focusProps;
+    $[55] = hoverProps;
+    $[56] = t22;
+    $[57] = t23;
   } else {
-    t23 = $[56];
+    t23 = $[57];
   }
 
   const t24 = isDisabled ? true : undefined;
   const t25 = value?.value ?? "";
   let t26;
 
-  if ($[57] !== emptyListMessage || $[58] !== options || $[59] !== placeholder) {
+  if ($[58] !== emptyListMessage || $[59] !== options || $[60] !== placeholder) {
     t26 = /*#__PURE__*/React.createElement(NativeSelectOptionsWithGroups, {
       optionsWithGroups: options,
       placeholder: placeholder,
       emptyListMessage: emptyListMessage
     });
-    $[57] = emptyListMessage;
-    $[58] = options;
-    $[59] = placeholder;
-    $[60] = t26;
+    $[58] = emptyListMessage;
+    $[59] = options;
+    $[60] = placeholder;
+    $[61] = t26;
   } else {
-    t26 = $[60];
+    t26 = $[61];
   }
 
   let t27;
 
-  if ($[61] !== handleChange || $[62] !== name || $[63] !== rest || $[64] !== t23 || $[65] !== t24 || $[66] !== t25 || $[67] !== t26) {
+  if ($[62] !== handleChange || $[63] !== name || $[64] !== rest || $[65] !== t23 || $[66] !== t24 || $[67] !== t25 || $[68] !== t26) {
     t27 = /*#__PURE__*/React.createElement("select", _extends({}, rest, t23, {
-      ref: triggerRef,
+      ref: setTriggerEl,
       "data-test": "native-select_select",
       "data-rs-internal": "select-native__select",
       className: styles.select,
@@ -358,21 +359,21 @@ const NativeSelect = t0 => {
       name: name,
       value: t25
     }), t26);
-    $[61] = handleChange;
-    $[62] = name;
-    $[63] = rest;
-    $[64] = t23;
-    $[65] = t24;
-    $[66] = t25;
-    $[67] = t26;
-    $[68] = t27;
+    $[62] = handleChange;
+    $[63] = name;
+    $[64] = rest;
+    $[65] = t23;
+    $[66] = t24;
+    $[67] = t25;
+    $[68] = t26;
+    $[69] = t27;
   } else {
-    t27 = $[68];
+    t27 = $[69];
   }
 
   let t28;
 
-  if ($[69] !== fieldProps || $[70] !== isClearable || $[71] !== isDisabled || $[72] !== isFocused || $[73] !== isHovered || $[74] !== isLoading || $[75] !== placeholder || $[76] !== reset || $[77] !== trigger || $[78] !== value?.label || $[79] !== value?.value) {
+  if ($[70] !== fieldProps || $[71] !== isClearable || $[72] !== isDisabled || $[73] !== isFocused || $[74] !== isHovered || $[75] !== isLoading || $[76] !== placeholder || $[77] !== reset || $[78] !== trigger || $[79] !== triggerEl || $[80] !== value?.label || $[81] !== value?.value) {
     t28 = trigger ? trigger({
       focused: isFocused,
       hovered: isHovered,
@@ -392,44 +393,45 @@ const NativeSelect = t0 => {
       triggerId: fieldProps.id,
       onClear: () => {
         reset();
-        triggerRef.current?.focus({
+        triggerEl?.focus({
           focusVisible: false
         });
       },
       canHaveClearIcon: isClearable && !isDisabled && Boolean(value?.value)
     }));
-    $[69] = fieldProps;
-    $[70] = isClearable;
-    $[71] = isDisabled;
-    $[72] = isFocused;
-    $[73] = isHovered;
-    $[74] = isLoading;
-    $[75] = placeholder;
-    $[76] = reset;
-    $[77] = trigger;
-    $[78] = value?.label;
-    $[79] = value?.value;
-    $[80] = t28;
+    $[70] = fieldProps;
+    $[71] = isClearable;
+    $[72] = isDisabled;
+    $[73] = isFocused;
+    $[74] = isHovered;
+    $[75] = isLoading;
+    $[76] = placeholder;
+    $[77] = reset;
+    $[78] = trigger;
+    $[79] = triggerEl;
+    $[80] = value?.label;
+    $[81] = value?.value;
+    $[82] = t28;
   } else {
-    t28 = $[80];
+    t28 = $[82];
   }
 
   let t29;
 
-  if ($[81] !== t27 || $[82] !== t28) {
+  if ($[83] !== t27 || $[84] !== t28) {
     t29 = /*#__PURE__*/React.createElement("div", {
       className: styles.triggerContainer
     }, t27, t28);
-    $[81] = t27;
-    $[82] = t28;
-    $[83] = t29;
+    $[83] = t27;
+    $[84] = t28;
+    $[85] = t29;
   } else {
-    t29 = $[83];
+    t29 = $[85];
   }
 
   let t30;
 
-  if ($[84] !== boldLabel || $[85] !== descriptionProps || $[86] !== error || $[87] !== errorMessageProps || $[88] !== isDisabled || $[89] !== label || $[90] !== note || $[91] !== reserveErrorLine || $[92] !== size || $[93] !== t21 || $[94] !== t29 || $[95] !== theme) {
+  if ($[86] !== boldLabel || $[87] !== descriptionProps || $[88] !== error || $[89] !== errorMessageProps || $[90] !== isDisabled || $[91] !== label || $[92] !== note || $[93] !== reserveErrorLine || $[94] !== size || $[95] !== t21 || $[96] !== t29 || $[97] !== theme) {
     t30 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
       theme: theme,
       size: size,
@@ -443,39 +445,39 @@ const NativeSelect = t0 => {
       note: note,
       descriptionProps: descriptionProps
     }, t29);
-    $[84] = boldLabel;
-    $[85] = descriptionProps;
-    $[86] = error;
-    $[87] = errorMessageProps;
-    $[88] = isDisabled;
-    $[89] = label;
-    $[90] = note;
-    $[91] = reserveErrorLine;
-    $[92] = size;
-    $[93] = t21;
-    $[94] = t29;
-    $[95] = theme;
-    $[96] = t30;
+    $[86] = boldLabel;
+    $[87] = descriptionProps;
+    $[88] = error;
+    $[89] = errorMessageProps;
+    $[90] = isDisabled;
+    $[91] = label;
+    $[92] = note;
+    $[93] = reserveErrorLine;
+    $[94] = size;
+    $[95] = t21;
+    $[96] = t29;
+    $[97] = theme;
+    $[98] = t30;
   } else {
-    t30 = $[96];
+    t30 = $[98];
   }
 
   let t31;
 
-  if ($[97] !== id || $[98] !== style || $[99] !== t20 || $[100] !== t30) {
+  if ($[99] !== id || $[100] !== style || $[101] !== t20 || $[102] !== t30) {
     t31 = /*#__PURE__*/React.createElement("div", {
       className: t20,
       id: id,
       style: style,
       "data-test": "native-select"
     }, t30);
-    $[97] = id;
-    $[98] = style;
-    $[99] = t20;
-    $[100] = t30;
-    $[101] = t31;
+    $[99] = id;
+    $[100] = style;
+    $[101] = t20;
+    $[102] = t30;
+    $[103] = t31;
   } else {
-    t31 = $[101];
+    t31 = $[103];
   }
 
   return t31;

package/lib/parts/list-box.js

@@ -3,7 +3,6 @@ import { c } from 'react-compiler-runtime';
 import React from 'react';
 import cn from 'classnames';
 import styles from '../styles/list-box.p.module.css.js';
-import { useNoMemoGetter } from '../hooks/use-no-memo-getter.js';
 import { calculateMaxHeightByItems } from '../utils/calculate-max-height-by-items.js';
 import { getRealItemsCnt } from '../utils/get-real-items-cnt.js';
 import { getTextFromNodes } from '../utils/get-text-from-nodes.js';
@@ -19,7 +18,7 @@ const MODE_STYLES = {
 };
 
 function Option(t0) {
-  const $ = c(12);
+  const $ = c(28);
   const {
     item,
     state
@@ -30,66 +29,105 @@ function Option(t0) {
     highlightedIndex
   } = state;
   const index = item.index;
-  const isSelected = selectedMap.has(item.key);
-  const isHighlighted = highlightedIndex === item.index;
-  const isDisabled = item.disabled;
-  const itemProps = useNoMemoGetter(getItemProps, {
-    item,
-    index,
-    "aria-selected": isSelected,
-    "tab-index": isHighlighted ? 0 : -1
-  });
-  const t1 = cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled);
-  const t2 = "select-list-box__item";
-  const t3 = `select-options-list__item_${item.key}`;
+  let T0;
+  let t1;
+  let t2;
+  let t3;
   let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+
+  if ($[0] !== getItemProps || $[1] !== highlightedIndex || $[2] !== index || $[3] !== item || $[4] !== selectedMap) {
+    const isSelected = selectedMap.has(item.key);
+    const isHighlighted = highlightedIndex === item.index;
+    const isDisabled = item.disabled;
+    t3 = getItemProps({
+      item,
+      index,
+      "aria-selected": isSelected,
+      "tab-index": isHighlighted ? 0 : -1
+    });
+    t4 = cn(styles.item, isSelected && styles.selected, isDisabled && styles.disabled);
+    t5 = "select-list-box__item";
+    t6 = isHighlighted;
+    t7 = `select-options-list__item_${item.key}`;
+
+    if ($[14] !== item.label) {
+      t8 = /*#__PURE__*/React.createElement("span", null, item.label);
+      $[14] = item.label;
+      $[15] = t8;
+    } else {
+      t8 = $[15];
+    }
 
-  if ($[0] !== item.label) {
-    t4 = /*#__PURE__*/React.createElement("span", null, item.label);
-    $[0] = item.label;
-    $[1] = t4;
+    T0 = CheckOutlineIcon;
+    t1 = "select-list-box__check-icon";
+    t2 = cn(styles.checkIcon, isSelected && styles.visible);
+    $[0] = getItemProps;
+    $[1] = highlightedIndex;
+    $[2] = index;
+    $[3] = item;
+    $[4] = selectedMap;
+    $[5] = T0;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+    $[9] = t4;
+    $[10] = t5;
+    $[11] = t6;
+    $[12] = t7;
+    $[13] = t8;
   } else {
-    t4 = $[1];
+    T0 = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+    t4 = $[9];
+    t5 = $[10];
+    t6 = $[11];
+    t7 = $[12];
+    t8 = $[13];
   }
 
-  const T0 = CheckOutlineIcon;
-  const t5 = "select-list-box__check-icon";
-  const t6 = cn(styles.checkIcon, isSelected && styles.visible);
-  let t7;
+  let t9;
 
-  if ($[2] !== T0 || $[3] !== t6) {
-    t7 = /*#__PURE__*/React.createElement(T0, {
-      "data-rs-internal": t5,
-      className: t6
+  if ($[16] !== T0 || $[17] !== t1 || $[18] !== t2) {
+    t9 = /*#__PURE__*/React.createElement(T0, {
+      "data-rs-internal": t1,
+      className: t2
     });
-    $[2] = T0;
-    $[3] = t6;
-    $[4] = t7;
+    $[16] = T0;
+    $[17] = t1;
+    $[18] = t2;
+    $[19] = t9;
   } else {
-    t7 = $[4];
+    t9 = $[19];
   }
 
-  let t8;
+  let t10;
 
-  if ($[5] !== isHighlighted || $[6] !== itemProps || $[7] !== t1 || $[8] !== t3 || $[9] !== t4 || $[10] !== t7) {
-    t8 = /*#__PURE__*/React.createElement("li", _extends({}, itemProps, {
-      className: t1,
-      "data-rs-internal": t2,
-      "data-focused": isHighlighted,
-      "data-test": t3
-    }), t4, t7);
-    $[5] = isHighlighted;
-    $[6] = itemProps;
-    $[7] = t1;
-    $[8] = t3;
-    $[9] = t4;
-    $[10] = t7;
-    $[11] = t8;
+  if ($[20] !== t3 || $[21] !== t4 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7 || $[25] !== t8 || $[26] !== t9) {
+    t10 = /*#__PURE__*/React.createElement("li", _extends({}, t3, {
+      className: t4,
+      "data-rs-internal": t5,
+      "data-focused": t6,
+      "data-test": t7
+    }), t8, t9);
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+    $[24] = t7;
+    $[25] = t8;
+    $[26] = t9;
+    $[27] = t10;
   } else {
-    t8 = $[11];
+    t10 = $[27];
   }
 
-  return t8;
+  return t10;
 }
 
 function ListBoxGroup(t0) {

package/lib/parts/multi-trigger.d.ts

@@ -7,6 +7,6 @@ export interface MultiTriggerProps {
     isSingleLine: boolean;
     isDisabled: boolean;
     placeholder?: string;
-    triggerRef?: React.RefObject<HTMLDivElement>;
+    triggerEl?: HTMLDivElement | null;
 }
-export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerRef, removeSelectedItem }: MultiTriggerProps): React.JSX.Element;
+export declare function MultiTrigger({ selectedItems, valueProps, isSingleLine, isDisabled, placeholder, triggerEl, removeSelectedItem }: MultiTriggerProps): React.JSX.Element;