@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/multiselect.js

@@ -1,7 +1,7 @@
 "use client";
 import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
 import { c } from 'react-compiler-runtime';
-import React, { useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import cn from 'classnames';
 import { useSelect } from 'downshift';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -10,7 +10,6 @@ import { useLabelFocus } from './hooks/use-label-focus.js';
 import { useOptions } from './hooks/use-options.js';
 import { useMultiHandlers } from './hooks/use-multi-handlers.js';
 import { useA11y } from './hooks/use-a11y.js';
-import { useNoMemoGetter } from './hooks/use-no-memo-getter.js';
 import { Icons } from './parts/icons.js';
 import { MultiTrigger } from './parts/multi-trigger.js';
 import { HiddenSelect } from './parts/hidden-select.js';
@@ -61,7 +60,7 @@ const stateReducer = (state, actionAndChanges) => {
 
 
 function Multiselect(t0) {
-  const $ = c(133);
+  const $ = c(139);
   let className;
   let error;
   let id;
@@ -209,8 +208,8 @@ function Multiselect(t0) {
 
   const selectedItems = t15;
   const theme = useThemeWithUndefined(themeFromProps);
-  const triggerRef = useRef(null);
-  const menuRef = useRef(null);
+  const [triggerEl, setTriggerEl] = useState(null);
+  const [menuEl, setMenuEl] = useState(null);
   const dropdownRef = useRef(null);
   let t16;
 
@@ -272,23 +271,24 @@ function Multiselect(t0) {
   } = useA11y(t18);
   let t19;
 
-  if ($[40] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[40] !== menuEl) {
     t19 = (listItemEl, listEl) => {
       scrollIntoView(listItemEl, {
         scrollMode: "if-needed",
         block: "nearest",
-        boundary: listEl ?? menuRef.current
+        boundary: listEl ?? menuEl
       });
     };
 
-    $[40] = t19;
+    $[40] = menuEl;
+    $[41] = t19;
   } else {
-    t19 = $[40];
+    t19 = $[41];
   }
 
   let t20;
 
-  if ($[41] !== addSelectedItem || $[42] !== removeSelectedItem || $[43] !== selectedMap) {
+  if ($[42] !== addSelectedItem || $[43] !== removeSelectedItem || $[44] !== selectedMap) {
     t20 = t21 => {
       const {
         selectedItem
@@ -307,12 +307,12 @@ function Multiselect(t0) {
       }
     };
 
-    $[41] = addSelectedItem;
-    $[42] = removeSelectedItem;
-    $[43] = selectedMap;
-    $[44] = t20;
+    $[42] = addSelectedItem;
+    $[43] = removeSelectedItem;
+    $[44] = selectedMap;
+    $[45] = t20;
   } else {
-    t20 = $[44];
+    t20 = $[45];
   }
 
   const {
@@ -351,197 +351,177 @@ function Multiselect(t0) {
   });
   const setHighlightedIndex = t21;
   const t22 = isListBoxEmpty ? undefined : "true";
+  let menuProps;
   let t23;
 
-  if ($[45] !== t22) {
-    t23 = {
-      ref: menuRef,
+  if ($[46] !== addSelectedItem || $[47] !== flattenedOptions || $[48] !== getMenuProps || $[49] !== getToggleButtonProps || $[50] !== highlightedIndex || $[51] !== isListBoxEmpty || $[52] !== isOpen || $[53] !== removeSelectedItem || $[54] !== reset || $[55] !== selectedItems || $[56] !== t22) {
+    menuProps = getMenuProps({
+      ref: setMenuEl,
       "aria-multiselectable": t22
-    };
-    $[45] = t22;
-    $[46] = t23;
-  } else {
-    t23 = $[46];
-  }
-
-  let t24;
-
-  if ($[47] === Symbol.for("react.memo_cache_sentinel")) {
-    t24 = {
+    }, {
       suppressRefError: true
-    };
-    $[47] = t24;
-  } else {
-    t24 = $[47];
-  }
-
-  const menuProps = useNoMemoGetter(getMenuProps, t23, t24);
-  let t25;
-
-  if ($[48] !== addSelectedItem || $[49] !== flattenedOptions || $[50] !== highlightedIndex || $[51] !== isOpen || $[52] !== removeSelectedItem || $[53] !== reset || $[54] !== selectedItems) {
-    t25 = event => {
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDownshiftDefault = true;
-        return;
-      }
-
-      if (isOpen && event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
-        const newHighlightedIndex = event.key === "ArrowUp" ? Math.max(highlightedIndex - 1, 0) : Math.min(highlightedIndex + 1, flattenedOptions.length - 1);
+    });
+    let t24;
 
-        if (newHighlightedIndex === highlightedIndex) {
+    if ($[59] !== addSelectedItem || $[60] !== flattenedOptions || $[61] !== highlightedIndex || $[62] !== isOpen || $[63] !== removeSelectedItem || $[64] !== reset || $[65] !== selectedItems) {
+      t24 = event => {
+        if (event.ctrlKey || event.metaKey) {
+          event.preventDownshiftDefault = true;
           return;
         }
 
-        addSelectedItem(flattenedOptions[newHighlightedIndex]);
-      }
+        if (isOpen && event.shiftKey && (event.key === "ArrowUp" || event.key === "ArrowDown")) {
+          const newHighlightedIndex = event.key === "ArrowUp" ? Math.max(highlightedIndex - 1, 0) : Math.min(highlightedIndex + 1, flattenedOptions.length - 1);
 
-      if (!isOpen && event.key === "Backspace") {
-        removeSelectedItem(selectedItems[selectedItems.length - 1]);
-      }
+          if (newHighlightedIndex === highlightedIndex) {
+            return;
+          }
 
-      if (!isOpen && event.key === "Delete") {
-        reset();
-      }
-    };
-
-    $[48] = addSelectedItem;
-    $[49] = flattenedOptions;
-    $[50] = highlightedIndex;
-    $[51] = isOpen;
-    $[52] = removeSelectedItem;
-    $[53] = reset;
-    $[54] = selectedItems;
-    $[55] = t25;
-  } else {
-    t25 = $[55];
-  }
+          addSelectedItem(flattenedOptions[newHighlightedIndex]);
+        }
 
-  let t26;
+        if (!isOpen && event.key === "Backspace") {
+          removeSelectedItem(selectedItems[selectedItems.length - 1]);
+        }
 
-  if ($[56] !== isListBoxEmpty || $[57] !== isOpen || $[58] !== menuProps) {
-    t26 = isOpen && isListBoxEmpty ? {
-      "aria-activedescendant": menuProps.id
-    } : {};
-    $[56] = isListBoxEmpty;
-    $[57] = isOpen;
-    $[58] = menuProps;
-    $[59] = t26;
-  } else {
-    t26 = $[59];
-  }
+        if (!isOpen && event.key === "Delete") {
+          reset();
+        }
+      };
 
-  let t27;
+      $[59] = addSelectedItem;
+      $[60] = flattenedOptions;
+      $[61] = highlightedIndex;
+      $[62] = isOpen;
+      $[63] = removeSelectedItem;
+      $[64] = reset;
+      $[65] = selectedItems;
+      $[66] = t24;
+    } else {
+      t24 = $[66];
+    }
 
-  if ($[60] !== t25 || $[61] !== t26) {
-    t27 = {
-      ref: triggerRef,
-      onKeyDown: t25,
-      ...t26
-    };
-    $[60] = t25;
-    $[61] = t26;
-    $[62] = t27;
+    t23 = getToggleButtonProps({
+      ref: setTriggerEl,
+      onKeyDown: t24,
+      ...(isOpen && isListBoxEmpty ? {
+        "aria-activedescendant": menuProps.id
+      } : {})
+    });
+    $[46] = addSelectedItem;
+    $[47] = flattenedOptions;
+    $[48] = getMenuProps;
+    $[49] = getToggleButtonProps;
+    $[50] = highlightedIndex;
+    $[51] = isListBoxEmpty;
+    $[52] = isOpen;
+    $[53] = removeSelectedItem;
+    $[54] = reset;
+    $[55] = selectedItems;
+    $[56] = t22;
+    $[57] = menuProps;
+    $[58] = t23;
   } else {
-    t27 = $[62];
+    menuProps = $[57];
+    t23 = $[58];
   }
 
-  const triggerProps = useNoMemoGetter(getToggleButtonProps, t27);
-  useNoMemoGetter(getLabelProps);
+  const triggerProps = t23;
   const {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
   } = useLabelFocus();
-  let t28;
+  let t24;
 
-  if ($[63] !== isLoading || $[64] !== noOptionsMessage) {
-    t28 = getEmptyMessage({
+  if ($[67] !== isLoading || $[68] !== noOptionsMessage) {
+    t24 = getEmptyMessage({
       isLoading,
       isNothingFound: false,
       noOptionsMessage
     });
-    $[63] = isLoading;
-    $[64] = noOptionsMessage;
-    $[65] = t28;
+    $[67] = isLoading;
+    $[68] = noOptionsMessage;
+    $[69] = t24;
   } else {
-    t28 = $[65];
+    t24 = $[69];
   }
 
-  const emptyListMessage = t28;
-  let t29;
+  const emptyListMessage = t24;
+  let t25;
 
-  if ($[66] !== getItemProps || $[67] !== highlightedIndex || $[68] !== menuProps || $[69] !== selectedMap) {
-    t29 = {
+  if ($[70] !== getItemProps || $[71] !== highlightedIndex || $[72] !== menuProps || $[73] !== selectedMap) {
+    t25 = {
       selectedMap,
       highlightedIndex,
       getItemProps,
       menuProps
     };
-    $[66] = getItemProps;
-    $[67] = highlightedIndex;
-    $[68] = menuProps;
-    $[69] = selectedMap;
-    $[70] = t29;
+    $[70] = getItemProps;
+    $[71] = highlightedIndex;
+    $[72] = menuProps;
+    $[73] = selectedMap;
+    $[74] = t25;
   } else {
-    t29 = $[70];
+    t25 = $[74];
   }
 
-  const listBoxState = t29;
-  const t30 = THEME_STYLES[theme];
-  const t31 = SIZE_STYLES[size];
-  const t32 = MODE_STYLES[mode];
-  const t33 = isDisabled ? styles.disabled : styles.enabled;
-  const t34 = Boolean(error) && styles.error;
-  let t35;
-
-  if ($[71] !== className || $[72] !== t30 || $[73] !== t31 || $[74] !== t32 || $[75] !== t33 || $[76] !== t34) {
-    t35 = cn(className, styles.root, t30, t31, t32, t33, t34);
-    $[71] = className;
-    $[72] = t30;
-    $[73] = t31;
-    $[74] = t32;
-    $[75] = t33;
-    $[76] = t34;
-    $[77] = t35;
+  const listBoxState = t25;
+  const t26 = THEME_STYLES[theme];
+  const t27 = SIZE_STYLES[size];
+  const t28 = MODE_STYLES[mode];
+  const t29 = isDisabled ? styles.disabled : styles.enabled;
+  const t30 = Boolean(error) && styles.error;
+  let t31;
+
+  if ($[75] !== className || $[76] !== t26 || $[77] !== t27 || $[78] !== t28 || $[79] !== t29 || $[80] !== t30) {
+    t31 = cn(className, styles.root, t26, t27, t28, t29, t30);
+    $[75] = className;
+    $[76] = t26;
+    $[77] = t27;
+    $[78] = t28;
+    $[79] = t29;
+    $[80] = t30;
+    $[81] = t31;
   } else {
-    t35 = $[77];
+    t31 = $[81];
   }
 
-  let t36;
+  let t32;
 
-  if ($[78] !== getLabelProps || $[79] !== labelClickProps) {
-    t36 = mergeProps(getLabelProps(), labelClickProps);
-    $[78] = getLabelProps;
-    $[79] = labelClickProps;
-    $[80] = t36;
+  if ($[82] !== getLabelProps || $[83] !== labelClickProps) {
+    t32 = mergeProps(getLabelProps(), labelClickProps);
+    $[82] = getLabelProps;
+    $[83] = labelClickProps;
+    $[84] = t32;
   } else {
-    t36 = $[80];
+    t32 = $[84];
   }
 
-  let t37;
+  let t33;
 
-  if ($[81] !== flattenedOptions || $[82] !== name || $[83] !== selectedItems) {
-    t37 = /*#__PURE__*/React.createElement(HiddenSelect, {
+  if ($[85] !== flattenedOptions || $[86] !== name || $[87] !== selectedItems) {
+    t33 = /*#__PURE__*/React.createElement(HiddenSelect, {
       name: name,
       value: selectedItems,
       isMultiple: true,
       options: flattenedOptions
     });
-    $[81] = flattenedOptions;
-    $[82] = name;
-    $[83] = selectedItems;
-    $[84] = t37;
+    $[85] = flattenedOptions;
+    $[86] = name;
+    $[87] = selectedItems;
+    $[88] = t33;
   } else {
-    t37 = $[84];
+    t33 = $[88];
   }
 
-  let t38;
+  let t34;
 
-  if ($[85] !== fieldProps || $[86] !== isClearable || $[87] !== isDisabled || $[88] !== isFocusedByLabel || $[89] !== isLoading || $[90] !== isOpen || $[91] !== isSingleLine || $[92] !== labelFocusForTriggerProps || $[93] !== placeholder || $[94] !== removeSelectedItem || $[95] !== reset || $[96] !== rest || $[97] !== selectedItems || $[98] !== triggerProps) {
-    t38 = t39 => {
+  if ($[89] !== fieldProps || $[90] !== isClearable || $[91] !== isDisabled || $[92] !== isFocusedByLabel || $[93] !== isLoading || $[94] !== isOpen || $[95] !== isSingleLine || $[96] !== labelFocusForTriggerProps || $[97] !== placeholder || $[98] !== removeSelectedItem || $[99] !== reset || $[100] !== rest || $[101] !== selectedItems || $[102] !== triggerEl || $[103] !== triggerProps) {
+    t34 = t35 => {
       const {
         ref: triggerRefForDropdown
-      } = t39;
+      } = t35;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.triggerContainer,
         "data-open": isOpen,
@@ -558,14 +538,14 @@ function Multiselect(t0) {
         isSingleLine: isSingleLine,
         isDisabled: isDisabled,
         placeholder: placeholder,
-        triggerRef: triggerRef,
+        triggerEl: triggerEl,
         removeSelectedItem: removeSelectedItem
       }), /*#__PURE__*/React.createElement(Icons, {
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && selectedItems.length > 0,
         onClear: () => {
           reset();
-          triggerRef.current?.focus({
+          triggerEl?.focus({
             focusVisible: false
           });
         },
@@ -573,34 +553,35 @@ function Multiselect(t0) {
       })));
     };
 
-    $[85] = fieldProps;
-    $[86] = isClearable;
-    $[87] = isDisabled;
-    $[88] = isFocusedByLabel;
-    $[89] = isLoading;
-    $[90] = isOpen;
-    $[91] = isSingleLine;
-    $[92] = labelFocusForTriggerProps;
-    $[93] = placeholder;
-    $[94] = removeSelectedItem;
-    $[95] = reset;
-    $[96] = rest;
-    $[97] = selectedItems;
-    $[98] = triggerProps;
-    $[99] = t38;
+    $[89] = fieldProps;
+    $[90] = isClearable;
+    $[91] = isDisabled;
+    $[92] = isFocusedByLabel;
+    $[93] = isLoading;
+    $[94] = isOpen;
+    $[95] = isSingleLine;
+    $[96] = labelFocusForTriggerProps;
+    $[97] = placeholder;
+    $[98] = removeSelectedItem;
+    $[99] = reset;
+    $[100] = rest;
+    $[101] = selectedItems;
+    $[102] = triggerEl;
+    $[103] = triggerProps;
+    $[104] = t34;
   } else {
-    t38 = $[99];
+    t34 = $[104];
   }
 
-  let t39;
+  let t35;
 
-  if ($[100] !== disableFlip || $[101] !== emptyListMessage || $[102] !== isOpen || $[103] !== listBoxItems || $[104] !== listBoxState || $[105] !== maxVisibleItems || $[106] !== mode || $[107] !== placement || $[108] !== renderInTrigger || $[109] !== selectedItems || $[110] !== size || $[111] !== t38 || $[112] !== theme) {
-    t39 = /*#__PURE__*/React.createElement(PopupContent, {
+  if ($[105] !== disableFlip || $[106] !== emptyListMessage || $[107] !== isOpen || $[108] !== listBoxItems || $[109] !== listBoxState || $[110] !== maxVisibleItems || $[111] !== mode || $[112] !== placement || $[113] !== renderInTrigger || $[114] !== selectedItems || $[115] !== size || $[116] !== t34 || $[117] !== theme || $[118] !== triggerEl) {
+    t35 = /*#__PURE__*/React.createElement(PopupContent, {
       theme: theme,
       size: size,
       mode: mode,
       dropdownRef: dropdownRef,
-      triggerRef: triggerRef,
+      triggerEl: triggerEl,
       placement: placement,
       renderInTrigger: renderInTrigger,
       disableFlip: disableFlip,
@@ -610,79 +591,80 @@ function Multiselect(t0) {
       emptyListMessage: emptyListMessage,
       listBoxItems: listBoxItems,
       dropdownUpdateDep: selectedItems,
-      trigger: t38
+      trigger: t34
     });
-    $[100] = disableFlip;
-    $[101] = emptyListMessage;
-    $[102] = isOpen;
-    $[103] = listBoxItems;
-    $[104] = listBoxState;
-    $[105] = maxVisibleItems;
-    $[106] = mode;
-    $[107] = placement;
-    $[108] = renderInTrigger;
-    $[109] = selectedItems;
-    $[110] = size;
-    $[111] = t38;
-    $[112] = theme;
-    $[113] = t39;
+    $[105] = disableFlip;
+    $[106] = emptyListMessage;
+    $[107] = isOpen;
+    $[108] = listBoxItems;
+    $[109] = listBoxState;
+    $[110] = maxVisibleItems;
+    $[111] = mode;
+    $[112] = placement;
+    $[113] = renderInTrigger;
+    $[114] = selectedItems;
+    $[115] = size;
+    $[116] = t34;
+    $[117] = theme;
+    $[118] = triggerEl;
+    $[119] = t35;
   } else {
-    t39 = $[113];
+    t35 = $[119];
   }
 
-  let t40;
+  let t36;
 
-  if ($[114] !== boldLabel || $[115] !== descriptionProps || $[116] !== error || $[117] !== errorMessageProps || $[118] !== isDisabled || $[119] !== label || $[120] !== note || $[121] !== reserveErrorLine || $[122] !== size || $[123] !== t36 || $[124] !== t37 || $[125] !== t39 || $[126] !== theme) {
-    t40 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+  if ($[120] !== boldLabel || $[121] !== descriptionProps || $[122] !== error || $[123] !== errorMessageProps || $[124] !== isDisabled || $[125] !== label || $[126] !== note || $[127] !== reserveErrorLine || $[128] !== size || $[129] !== t32 || $[130] !== t33 || $[131] !== t35 || $[132] !== theme) {
+    t36 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
       theme: theme,
       size: size,
       disabled: isDisabled,
       label: label,
-      labelProps: t36,
+      labelProps: t32,
       boldLabel: boldLabel,
       error: error,
       reserveErrorLine: reserveErrorLine,
       errorMessageProps: errorMessageProps,
       note: note,
       descriptionProps: descriptionProps
-    }, t37, t39);
-    $[114] = boldLabel;
-    $[115] = descriptionProps;
-    $[116] = error;
-    $[117] = errorMessageProps;
-    $[118] = isDisabled;
-    $[119] = label;
-    $[120] = note;
-    $[121] = reserveErrorLine;
-    $[122] = size;
-    $[123] = t36;
-    $[124] = t37;
-    $[125] = t39;
-    $[126] = theme;
-    $[127] = t40;
+    }, t33, t35);
+    $[120] = boldLabel;
+    $[121] = descriptionProps;
+    $[122] = error;
+    $[123] = errorMessageProps;
+    $[124] = isDisabled;
+    $[125] = label;
+    $[126] = note;
+    $[127] = reserveErrorLine;
+    $[128] = size;
+    $[129] = t32;
+    $[130] = t33;
+    $[131] = t35;
+    $[132] = theme;
+    $[133] = t36;
   } else {
-    t40 = $[127];
+    t36 = $[133];
   }
 
-  let t41;
+  let t37;
 
-  if ($[128] !== id || $[129] !== style || $[130] !== t35 || $[131] !== t40) {
-    t41 = /*#__PURE__*/React.createElement("div", {
-      className: t35,
+  if ($[134] !== id || $[135] !== style || $[136] !== t31 || $[137] !== t36) {
+    t37 = /*#__PURE__*/React.createElement("div", {
+      className: t31,
       id: id,
       style: style,
       "data-test": "multiselect"
-    }, t40);
-    $[128] = id;
-    $[129] = style;
-    $[130] = t35;
-    $[131] = t40;
-    $[132] = t41;
+    }, t36);
+    $[134] = id;
+    $[135] = style;
+    $[136] = t31;
+    $[137] = t36;
+    $[138] = t37;
   } else {
-    t41 = $[132];
+    t37 = $[138];
   }
 
-  return t41;
+  return t37;
 }
 
 export { Multiselect };