@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/parts/multi-trigger.js

@@ -9,14 +9,14 @@ import { getOptionValue } from '../utils/get-option-value.js';
 import Foldable from './foldable.js';
 
 function MultiTrigger(t0) {
-  const $ = c(16);
+  const $ = c(21);
   const {
     selectedItems,
     valueProps,
     isSingleLine,
     isDisabled,
     placeholder,
-    triggerRef,
+    triggerEl,
     removeSelectedItem
   } = t0;
   const hasValue = selectedItems.length > 0;
@@ -50,38 +50,52 @@ function MultiTrigger(t0) {
 
   let t1;
 
-  if ($[4] !== isDisabled || $[5] !== isSingleLine || $[6] !== removeSelectedItem || $[7] !== selectedItems || $[8] !== triggerRef) {
-    t1 = selectedItems.map(option => {
-      const key = getOptionValue(option);
-      return /*#__PURE__*/React.createElement(RemovableTag, {
-        key: key,
-        tabIndex: -1,
-        "data-test": `selected-tag-${key}`,
-        className: styles.tag,
-        disabled: isDisabled,
-        onRemoveClick: () => {
-          removeSelectedItem(option);
-          triggerRef.current?.focus({
-            focusVisible: false
-          });
-        },
-        "data-rs-internal": "select-trigger__removable-tag",
-        wrap: !isSingleLine,
-        "aria-label": getTextFromNodes(option.label),
-        onFocus: e => {
-          if (e.target.getAttribute("tabindex") === "-1") {
-            triggerRef.current?.focus({
+  if ($[4] !== isDisabled || $[5] !== isSingleLine || $[6] !== removeSelectedItem || $[7] !== selectedItems || $[8] !== triggerEl) {
+    let t2;
+
+    if ($[10] !== isDisabled || $[11] !== isSingleLine || $[12] !== removeSelectedItem || $[13] !== triggerEl) {
+      t2 = option => {
+        const key = getOptionValue(option);
+        return /*#__PURE__*/React.createElement(RemovableTag, {
+          key: key,
+          tabIndex: -1,
+          "data-test": `selected-tag-${key}`,
+          className: styles.tag,
+          disabled: isDisabled,
+          onRemoveClick: () => {
+            removeSelectedItem(option);
+            triggerEl?.focus({
               focusVisible: false
             });
+          },
+          "data-rs-internal": "select-trigger__removable-tag",
+          wrap: !isSingleLine,
+          "aria-label": getTextFromNodes(option.label),
+          onFocus: e => {
+            if (e.target.getAttribute("tabindex") === "-1") {
+              triggerEl?.focus({
+                focusVisible: false
+              });
+            }
           }
-        }
-      }, option.label);
-    });
+        }, option.label);
+      };
+
+      $[10] = isDisabled;
+      $[11] = isSingleLine;
+      $[12] = removeSelectedItem;
+      $[13] = triggerEl;
+      $[14] = t2;
+    } else {
+      t2 = $[14];
+    }
+
+    t1 = selectedItems.map(t2);
     $[4] = isDisabled;
     $[5] = isSingleLine;
     $[6] = removeSelectedItem;
     $[7] = selectedItems;
-    $[8] = triggerRef;
+    $[8] = triggerEl;
     $[9] = t1;
   } else {
     t1 = $[9];
@@ -90,32 +104,32 @@ function MultiTrigger(t0) {
   const tags = t1;
   let t2;
 
-  if ($[10] !== isSingleLine || $[11] !== tags) {
+  if ($[15] !== isSingleLine || $[16] !== tags) {
     t2 = isSingleLine ? /*#__PURE__*/React.createElement(Foldable, {
       className: styles.tagsContainer,
       renderHiddenCounter: _temp
     }, tags) : /*#__PURE__*/React.createElement("div", {
       className: styles.tagsContainer
     }, tags);
-    $[10] = isSingleLine;
-    $[11] = tags;
-    $[12] = t2;
+    $[15] = isSingleLine;
+    $[16] = tags;
+    $[17] = t2;
   } else {
-    t2 = $[12];
+    t2 = $[17];
   }
 
   let t3;
 
-  if ($[13] !== t2 || $[14] !== valueProps) {
+  if ($[18] !== t2 || $[19] !== valueProps) {
     t3 = /*#__PURE__*/React.createElement("div", _extends({}, valueProps, {
       className: styles.multi,
       "data-test": "multiselect__trigger_content"
     }), t2);
-    $[13] = t2;
-    $[14] = valueProps;
-    $[15] = t3;
+    $[18] = t2;
+    $[19] = valueProps;
+    $[20] = t3;
   } else {
-    t3 = $[15];
+    t3 = $[20];
   }
 
   return t3;

package/lib/parts/popup-content.d.ts

@@ -5,7 +5,7 @@ import type { SelectMode, SelectSize, ListBoxState, ListBoxItem, Placement } fro
 export type PopupContentProps = {
     theme: Theme;
     listBoxState: ListBoxState;
-    triggerRef: React.RefObject<HTMLElement>;
+    triggerEl: HTMLElement | null;
     dropdownRef?: React.RefObject<DropdownImperativeHandle>;
     listBoxItems?: ListBoxItem[];
     placement: Placement;
@@ -19,4 +19,4 @@ export type PopupContentProps = {
     isOpen?: boolean;
     dropdownUpdateDep?: unknown;
 };
-export declare const PopupContent: ({ theme, listBoxState, triggerRef, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDep }: PopupContentProps) => React.JSX.Element;
+export declare const PopupContent: ({ theme, listBoxState, triggerEl, dropdownRef, listBoxItems, placement, size: sizeFromProps, mode, emptyListMessage, maxVisibleItems, trigger, renderInTrigger, disableFlip, isOpen, dropdownUpdateDep }: PopupContentProps) => React.JSX.Element;

package/lib/parts/popup-content.js

@@ -12,7 +12,7 @@ const PopupContent = t0 => {
   const {
     theme,
     listBoxState,
-    triggerRef,
+    triggerEl,
     dropdownRef,
     listBoxItems,
     placement,
@@ -28,13 +28,13 @@ const PopupContent = t0 => {
   } = t0;
   let t1;
 
-  if ($[0] !== sizeFromProps || $[1] !== triggerRef) {
+  if ($[0] !== sizeFromProps || $[1] !== triggerEl) {
     t1 = {
       sizeFromProps,
-      triggerRef
+      triggerEl
     };
     $[0] = sizeFromProps;
-    $[1] = triggerRef;
+    $[1] = triggerEl;
     $[2] = t1;
   } else {
     t1 = $[2];
@@ -46,13 +46,13 @@ const PopupContent = t0 => {
   } = useActualSizeFromCss(t1);
   let t2;
 
-  if ($[3] !== isOpen || $[4] !== triggerRef) {
+  if ($[3] !== isOpen || $[4] !== triggerEl) {
     t2 = {
       isOpen,
-      triggerRef
+      triggerEl
     };
     $[3] = isOpen;
-    $[4] = triggerRef;
+    $[4] = triggerEl;
     $[5] = t2;
   } else {
     t2 = $[5];

package/lib/select-basic.js

@@ -7,7 +7,6 @@ import scrollIntoView from 'scroll-into-view-if-needed';
 import { useLabelFocus } from './hooks/use-label-focus.js';
 import { useOptions } from './hooks/use-options.js';
 import { useA11y } from './hooks/use-a11y.js';
-import { useNoMemoGetter } from './hooks/use-no-memo-getter.js';
 import { Icons } from './parts/icons.js';
 import { HiddenSelect } from './parts/hidden-select.js';
 import { FormTriggerWrapper } from './parts/form-trigger-wrapper.js';
@@ -20,7 +19,7 @@ import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
 import styles from './styles/common.p.module.css.js';
 
 function SelectBasic(t0) {
-  const $ = c(108);
+  const $ = c(111);
   let boldLabel;
   let disableFlip;
   let error;
@@ -142,9 +141,9 @@ function SelectBasic(t0) {
     theme = $[22];
   }
 
-  const triggerRef = React.useRef(null);
+  const [triggerEl, setTriggerEl] = React.useState(null);
   const dropdownRef = React.useRef(null);
-  const menuRef = React.useRef(null);
+  const [menuEl, setMenuEl] = React.useState(null);
   const {
     flattenedOptions,
     listBoxItems
@@ -197,23 +196,24 @@ function SelectBasic(t0) {
   } = useA11y(t3);
   let t4;
 
-  if ($[31] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[31] !== menuEl) {
     t4 = (listItemEl, listEl) => {
       scrollIntoView(listItemEl, {
         scrollMode: "if-needed",
         block: "nearest",
-        boundary: listEl ?? menuRef.current
+        boundary: listEl ?? menuEl
       });
     };
 
-    $[31] = t4;
+    $[31] = menuEl;
+    $[32] = t4;
   } else {
-    t4 = $[31];
+    t4 = $[32];
   }
 
   let t5;
 
-  if ($[32] !== onChange) {
+  if ($[33] !== onChange) {
     t5 = t6 => {
       const {
         selectedItem: newSelectedItem
@@ -221,15 +221,15 @@ function SelectBasic(t0) {
       onChange?.(newSelectedItem);
     };
 
-    $[32] = onChange;
-    $[33] = t5;
+    $[33] = onChange;
+    $[34] = t5;
   } else {
-    t5 = $[33];
+    t5 = $[34];
   }
 
   let t6;
 
-  if ($[34] !== baseId || $[35] !== flattenedOptions || $[36] !== selectedItem || $[37] !== t5) {
+  if ($[35] !== baseId || $[36] !== flattenedOptions || $[37] !== selectedItem || $[38] !== t4 || $[39] !== t5) {
     t6 = {
       items: flattenedOptions,
       itemToString,
@@ -244,13 +244,14 @@ function SelectBasic(t0) {
       }
 
     };
-    $[34] = baseId;
-    $[35] = flattenedOptions;
-    $[36] = selectedItem;
-    $[37] = t5;
-    $[38] = t6;
+    $[35] = baseId;
+    $[36] = flattenedOptions;
+    $[37] = selectedItem;
+    $[38] = t4;
+    $[39] = t5;
+    $[40] = t6;
   } else {
-    t6 = $[38];
+    t6 = $[40];
   }
 
   const {
@@ -262,152 +263,133 @@ function SelectBasic(t0) {
     getItemProps,
     reset
   } = useSelect(t6);
+  let menuProps;
   let t7;
-  let t8;
 
-  if ($[39] === Symbol.for("react.memo_cache_sentinel")) {
-    t7 = {
-      ref: menuRef
-    };
-    t8 = {
+  if ($[41] !== getMenuProps || $[42] !== getToggleButtonProps || $[43] !== isClearable || $[44] !== isListBoxEmpty || $[45] !== isOpen || $[46] !== reset) {
+    menuProps = getMenuProps({
+      ref: setMenuEl
+    }, {
       suppressRefError: true
-    };
-    $[39] = t7;
-    $[40] = t8;
-  } else {
-    t7 = $[39];
-    t8 = $[40];
-  }
-
-  const menuProps = useNoMemoGetter(getMenuProps, t7, t8);
-  let t9;
-
-  if ($[41] !== isClearable || $[42] !== isOpen || $[43] !== reset) {
-    t9 = event => {
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDownshiftDefault = true;
-        return;
-      }
-
-      if (isClearable && !isOpen && (event.key === "Backspace" || event.key === "Delete")) {
-        reset();
-      }
-    };
-
-    $[41] = isClearable;
-    $[42] = isOpen;
-    $[43] = reset;
-    $[44] = t9;
-  } else {
-    t9 = $[44];
-  }
+    });
+    let t8;
 
-  let t10;
+    if ($[49] !== isClearable || $[50] !== isOpen || $[51] !== reset) {
+      t8 = event => {
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDownshiftDefault = true;
+          return;
+        }
 
-  if ($[45] !== isListBoxEmpty || $[46] !== isOpen || $[47] !== menuProps) {
-    t10 = isOpen && isListBoxEmpty ? {
-      "aria-activedescendant": menuProps.id
-    } : {};
-    $[45] = isListBoxEmpty;
-    $[46] = isOpen;
+        if (isClearable && !isOpen && (event.key === "Backspace" || event.key === "Delete")) {
+          reset();
+        }
+      };
+
+      $[49] = isClearable;
+      $[50] = isOpen;
+      $[51] = reset;
+      $[52] = t8;
+    } else {
+      t8 = $[52];
+    }
+
+    t7 = getToggleButtonProps({
+      ref: setTriggerEl,
+      onKeyDown: t8,
+      ...(isOpen && isListBoxEmpty ? {
+        "aria-activedescendant": menuProps.id
+      } : {})
+    });
+    $[41] = getMenuProps;
+    $[42] = getToggleButtonProps;
+    $[43] = isClearable;
+    $[44] = isListBoxEmpty;
+    $[45] = isOpen;
+    $[46] = reset;
     $[47] = menuProps;
-    $[48] = t10;
+    $[48] = t7;
   } else {
-    t10 = $[48];
+    menuProps = $[47];
+    t7 = $[48];
   }
 
-  let t11;
-
-  if ($[49] !== t10 || $[50] !== t9) {
-    t11 = {
-      ref: triggerRef,
-      onKeyDown: t9,
-      ...t10
-    };
-    $[49] = t10;
-    $[50] = t9;
-    $[51] = t11;
-  } else {
-    t11 = $[51];
-  }
-
-  const triggerProps = useNoMemoGetter(getToggleButtonProps, t11);
-  const downshiftLabelProps = useNoMemoGetter(getLabelProps);
+  const triggerProps = t7;
   const {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
   } = useLabelFocus();
-  let t12;
+  let t8;
 
-  if ($[52] !== isLoading || $[53] !== noOptionsMessage) {
-    t12 = getEmptyMessage({
+  if ($[53] !== isLoading || $[54] !== noOptionsMessage) {
+    t8 = getEmptyMessage({
       isLoading,
       isNothingFound: false,
       noOptionsMessage
     });
-    $[52] = isLoading;
-    $[53] = noOptionsMessage;
-    $[54] = t12;
+    $[53] = isLoading;
+    $[54] = noOptionsMessage;
+    $[55] = t8;
   } else {
-    t12 = $[54];
+    t8 = $[55];
   }
 
-  const emptyListMessage = t12;
-  let t13;
+  const emptyListMessage = t8;
+  let t9;
 
-  if ($[55] !== getItemProps || $[56] !== highlightedIndex || $[57] !== menuProps || $[58] !== selectedMap) {
-    t13 = {
+  if ($[56] !== getItemProps || $[57] !== highlightedIndex || $[58] !== menuProps || $[59] !== selectedMap) {
+    t9 = {
       selectedMap,
       highlightedIndex,
       getItemProps,
       menuProps
     };
-    $[55] = getItemProps;
-    $[56] = highlightedIndex;
-    $[57] = menuProps;
-    $[58] = selectedMap;
-    $[59] = t13;
+    $[56] = getItemProps;
+    $[57] = highlightedIndex;
+    $[58] = menuProps;
+    $[59] = selectedMap;
+    $[60] = t9;
   } else {
-    t13 = $[59];
+    t9 = $[60];
   }
 
-  const listBoxState = t13;
-  let t14;
+  const listBoxState = t9;
+  let t10;
 
-  if ($[60] !== downshiftLabelProps || $[61] !== labelClickProps) {
-    t14 = mergeProps(downshiftLabelProps, labelClickProps);
-    $[60] = downshiftLabelProps;
-    $[61] = labelClickProps;
-    $[62] = t14;
+  if ($[61] !== getLabelProps || $[62] !== labelClickProps) {
+    t10 = mergeProps(getLabelProps(), labelClickProps);
+    $[61] = getLabelProps;
+    $[62] = labelClickProps;
+    $[63] = t10;
   } else {
-    t14 = $[62];
+    t10 = $[63];
   }
 
-  let t15;
+  let t11;
 
-  if ($[63] !== flattenedOptions || $[64] !== name || $[65] !== selectedItem) {
-    t15 = /*#__PURE__*/React.createElement(HiddenSelect, {
+  if ($[64] !== flattenedOptions || $[65] !== name || $[66] !== selectedItem) {
+    t11 = /*#__PURE__*/React.createElement(HiddenSelect, {
       name: name,
       value: selectedItem,
       isMultiple: false,
       options: flattenedOptions
     });
-    $[63] = flattenedOptions;
-    $[64] = name;
-    $[65] = selectedItem;
-    $[66] = t15;
+    $[64] = flattenedOptions;
+    $[65] = name;
+    $[66] = selectedItem;
+    $[67] = t11;
   } else {
-    t15 = $[66];
+    t11 = $[67];
   }
 
-  let t16;
+  let t12;
 
-  if ($[67] !== fieldProps || $[68] !== hasValue || $[69] !== isClearable || $[70] !== isDisabled || $[71] !== isFocusedByLabel || $[72] !== isLoading || $[73] !== isOpen || $[74] !== labelFocusForTriggerProps || $[75] !== placeholder || $[76] !== reset || $[77] !== rest || $[78] !== selectedItem?.label || $[79] !== triggerProps) {
-    t16 = t17 => {
+  if ($[68] !== fieldProps || $[69] !== hasValue || $[70] !== isClearable || $[71] !== isDisabled || $[72] !== isFocusedByLabel || $[73] !== isLoading || $[74] !== isOpen || $[75] !== labelFocusForTriggerProps || $[76] !== placeholder || $[77] !== reset || $[78] !== rest || $[79] !== selectedItem?.label || $[80] !== triggerEl || $[81] !== triggerProps) {
+    t12 = t13 => {
       const {
         ref: triggerRefForDropdown
-      } = t17;
+      } = t13;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.triggerContainer,
         "data-open": isOpen,
@@ -426,7 +408,7 @@ function SelectBasic(t0) {
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
           reset();
-          triggerRef.current?.focus({
+          triggerEl?.focus({
             focusVisible: false
           });
         },
@@ -434,33 +416,34 @@ function SelectBasic(t0) {
       })));
     };
 
-    $[67] = fieldProps;
-    $[68] = hasValue;
-    $[69] = isClearable;
-    $[70] = isDisabled;
-    $[71] = isFocusedByLabel;
-    $[72] = isLoading;
-    $[73] = isOpen;
-    $[74] = labelFocusForTriggerProps;
-    $[75] = placeholder;
-    $[76] = reset;
-    $[77] = rest;
-    $[78] = selectedItem?.label;
-    $[79] = triggerProps;
-    $[80] = t16;
+    $[68] = fieldProps;
+    $[69] = hasValue;
+    $[70] = isClearable;
+    $[71] = isDisabled;
+    $[72] = isFocusedByLabel;
+    $[73] = isLoading;
+    $[74] = isOpen;
+    $[75] = labelFocusForTriggerProps;
+    $[76] = placeholder;
+    $[77] = reset;
+    $[78] = rest;
+    $[79] = selectedItem?.label;
+    $[80] = triggerEl;
+    $[81] = triggerProps;
+    $[82] = t12;
   } else {
-    t16 = $[80];
+    t12 = $[82];
   }
 
-  let t17;
+  let t13;
 
-  if ($[81] !== disableFlip || $[82] !== emptyListMessage || $[83] !== isOpen || $[84] !== listBoxItems || $[85] !== listBoxState || $[86] !== maxVisibleItems || $[87] !== mode || $[88] !== placement || $[89] !== renderInTrigger || $[90] !== size || $[91] !== t16 || $[92] !== theme) {
-    t17 = /*#__PURE__*/React.createElement(PopupContent, {
+  if ($[83] !== disableFlip || $[84] !== emptyListMessage || $[85] !== isOpen || $[86] !== listBoxItems || $[87] !== listBoxState || $[88] !== maxVisibleItems || $[89] !== mode || $[90] !== placement || $[91] !== renderInTrigger || $[92] !== size || $[93] !== t12 || $[94] !== theme || $[95] !== triggerEl) {
+    t13 = /*#__PURE__*/React.createElement(PopupContent, {
       theme: theme,
       size: size,
       mode: mode,
       dropdownRef: dropdownRef,
-      triggerRef: triggerRef,
+      triggerEl: triggerEl,
       placement: placement,
       isOpen: isOpen,
       listBoxState: listBoxState,
@@ -469,60 +452,61 @@ function SelectBasic(t0) {
       listBoxItems: listBoxItems,
       renderInTrigger: renderInTrigger,
       disableFlip: disableFlip,
-      trigger: t16
+      trigger: t12
     });
-    $[81] = disableFlip;
-    $[82] = emptyListMessage;
-    $[83] = isOpen;
-    $[84] = listBoxItems;
-    $[85] = listBoxState;
-    $[86] = maxVisibleItems;
-    $[87] = mode;
-    $[88] = placement;
-    $[89] = renderInTrigger;
-    $[90] = size;
-    $[91] = t16;
-    $[92] = theme;
-    $[93] = t17;
+    $[83] = disableFlip;
+    $[84] = emptyListMessage;
+    $[85] = isOpen;
+    $[86] = listBoxItems;
+    $[87] = listBoxState;
+    $[88] = maxVisibleItems;
+    $[89] = mode;
+    $[90] = placement;
+    $[91] = renderInTrigger;
+    $[92] = size;
+    $[93] = t12;
+    $[94] = theme;
+    $[95] = triggerEl;
+    $[96] = t13;
   } else {
-    t17 = $[93];
+    t13 = $[96];
   }
 
-  let t18;
+  let t14;
 
-  if ($[94] !== boldLabel || $[95] !== descriptionProps || $[96] !== error || $[97] !== errorMessageProps || $[98] !== isDisabled || $[99] !== label || $[100] !== note || $[101] !== reserveErrorLine || $[102] !== size || $[103] !== t14 || $[104] !== t15 || $[105] !== t17 || $[106] !== theme) {
-    t18 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+  if ($[97] !== boldLabel || $[98] !== descriptionProps || $[99] !== error || $[100] !== errorMessageProps || $[101] !== isDisabled || $[102] !== label || $[103] !== note || $[104] !== reserveErrorLine || $[105] !== size || $[106] !== t10 || $[107] !== t11 || $[108] !== t13 || $[109] !== theme) {
+    t14 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
       theme: theme,
       size: size,
       disabled: isDisabled,
       label: label,
-      labelProps: t14,
+      labelProps: t10,
       boldLabel: boldLabel,
       error: error,
       reserveErrorLine: reserveErrorLine,
       errorMessageProps: errorMessageProps,
       note: note,
       descriptionProps: descriptionProps
-    }, t15, t17);
-    $[94] = boldLabel;
-    $[95] = descriptionProps;
-    $[96] = error;
-    $[97] = errorMessageProps;
-    $[98] = isDisabled;
-    $[99] = label;
-    $[100] = note;
-    $[101] = reserveErrorLine;
-    $[102] = size;
-    $[103] = t14;
-    $[104] = t15;
-    $[105] = t17;
-    $[106] = theme;
-    $[107] = t18;
+    }, t11, t13);
+    $[97] = boldLabel;
+    $[98] = descriptionProps;
+    $[99] = error;
+    $[100] = errorMessageProps;
+    $[101] = isDisabled;
+    $[102] = label;
+    $[103] = note;
+    $[104] = reserveErrorLine;
+    $[105] = size;
+    $[106] = t10;
+    $[107] = t11;
+    $[108] = t13;
+    $[109] = theme;
+    $[110] = t14;
   } else {
-    t18 = $[107];
+    t14 = $[110];
   }
 
-  return t18;
+  return t14;
 }
 
 export { SelectBasic };