@rescui/select 0.18.4 → 0.19.0

package/lib/select-searchable.js

@@ -1,4 +1,6 @@
-import React, { useRef } from 'react';
+import _extends from '@babel/runtime-corejs3/helpers/esm/extends';
+import { c } from 'react-compiler-runtime';
+import React, { useState, useRef } from 'react';
 import { useCombobox } from 'downshift';
 import scrollIntoView from 'scroll-into-view-if-needed';
 import { useLabelFocus } from './hooks/use-label-focus.js';
@@ -13,61 +15,222 @@ import { mergeProps } from './utils/merge-props.js';
 import { itemToString } from './utils/item-to-string.js';
 import { getOptionValue } from './utils/get-option-value.js';
 import { getRealItemsCnt } from './utils/get-real-items-cnt.js';
-import styles from './styles/common.p.module.css.js'; // eslint-disable-next-line complexity
-
-function SelectSearchable(_ref) {
-  let {
-    options,
-    value: selectedItem,
-    onChange,
-    error,
-    label,
-    note,
-    size,
-    mode,
-    theme,
-    placement,
-    renderInTrigger,
-    disableFlip,
-    boldLabel,
-    reserveErrorLine,
-    maxVisibleItems,
-    isClearable,
-    isLoading,
-    isDisabled,
-    name,
-    noOptionsMessage,
-    className,
-    id,
-    style,
-    placeholder,
-    ...rest
-  } = _ref;
-  const inputRef = useRef(null);
+import styles from './styles/common.p.module.css.js';
+
+function SelectSearchable(t0) {
+  const $ = c(105);
+  let boldLabel;
+  let disableFlip;
+  let error;
+  let isClearable;
+  let isDisabled;
+  let isLoading;
+  let label;
+  let maxVisibleItems;
+  let mode;
+  let name;
+  let noOptionsMessage;
+  let note;
+  let onChange;
+  let options;
+  let placeholder;
+  let placement;
+  let renderInTrigger;
+  let reserveErrorLine;
+  let rest;
+  let selectedItem;
+  let size;
+  let theme;
+
+  if ($[0] !== t0) {
+    const {
+      options: t1,
+      value: t2,
+      onChange: t3,
+      error: t4,
+      label: t5,
+      note: t6,
+      size: t7,
+      mode: t8,
+      theme: t9,
+      placement: t10,
+      renderInTrigger: t11,
+      disableFlip: t12,
+      boldLabel: t13,
+      reserveErrorLine: t14,
+      maxVisibleItems: t15,
+      isClearable: t16,
+      isLoading: t17,
+      isDisabled: t18,
+      name: t19,
+      noOptionsMessage: t20,
+      className,
+      id,
+      style,
+      placeholder: t21,
+      ...t22
+    } = t0;
+    options = t1;
+    selectedItem = t2;
+    onChange = t3;
+    error = t4;
+    label = t5;
+    note = t6;
+    size = t7;
+    mode = t8;
+    theme = t9;
+    placement = t10;
+    renderInTrigger = t11;
+    disableFlip = t12;
+    boldLabel = t13;
+    reserveErrorLine = t14;
+    maxVisibleItems = t15;
+    isClearable = t16;
+    isLoading = t17;
+    isDisabled = t18;
+    name = t19;
+    noOptionsMessage = t20;
+    placeholder = t21;
+    rest = t22;
+    $[0] = t0;
+    $[1] = boldLabel;
+    $[2] = disableFlip;
+    $[3] = error;
+    $[4] = isClearable;
+    $[5] = isDisabled;
+    $[6] = isLoading;
+    $[7] = label;
+    $[8] = maxVisibleItems;
+    $[9] = mode;
+    $[10] = name;
+    $[11] = noOptionsMessage;
+    $[12] = note;
+    $[13] = onChange;
+    $[14] = options;
+    $[15] = placeholder;
+    $[16] = placement;
+    $[17] = renderInTrigger;
+    $[18] = reserveErrorLine;
+    $[19] = rest;
+    $[20] = selectedItem;
+    $[21] = size;
+    $[22] = theme;
+  } else {
+    boldLabel = $[1];
+    disableFlip = $[2];
+    error = $[3];
+    isClearable = $[4];
+    isDisabled = $[5];
+    isLoading = $[6];
+    label = $[7];
+    maxVisibleItems = $[8];
+    mode = $[9];
+    name = $[10];
+    noOptionsMessage = $[11];
+    note = $[12];
+    onChange = $[13];
+    options = $[14];
+    placeholder = $[15];
+    placement = $[16];
+    renderInTrigger = $[17];
+    reserveErrorLine = $[18];
+    rest = $[19];
+    selectedItem = $[20];
+    size = $[21];
+    theme = $[22];
+  }
+
+  const [inputEl, setInputEl] = useState(null);
   const dropdownRef = useRef(null);
-  const menuRef = useRef(null);
+  const [menuEl, setMenuEl] = useState(null);
   const {
     flattenedOptions,
     listBoxItems,
     setFilterString,
     filterString
   } = useOptions(options);
-  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  let t1;
+
+  if ($[23] !== listBoxItems) {
+    t1 = getRealItemsCnt(listBoxItems);
+    $[23] = listBoxItems;
+    $[24] = t1;
+  } else {
+    t1 = $[24];
+  }
+
+  const isListBoxEmpty = t1 === 0;
   const hasValue = Boolean(selectedItem);
-  const selectedMap = selectedItem ? new Map([[getOptionValue(selectedItem), selectedItem]]) : new Map();
+  let t2;
+
+  if ($[25] !== selectedItem) {
+    t2 = selectedItem ? new Map([[getOptionValue(selectedItem), selectedItem]]) : new Map();
+    $[25] = selectedItem;
+    $[26] = t2;
+  } else {
+    t2 = $[26];
+  }
+
+  const selectedMap = t2;
+  let t3;
+
+  if ($[27] !== error || $[28] !== inputEl || $[29] !== isDisabled || $[30] !== note) {
+    t3 = {
+      prefix: "select",
+      error,
+      description: note,
+      fieldEl: inputEl,
+      isDisabled
+    };
+    $[27] = error;
+    $[28] = inputEl;
+    $[29] = isDisabled;
+    $[30] = note;
+    $[31] = t3;
+  } else {
+    t3 = $[31];
+  }
+
   const {
     fieldProps,
     errorMessageProps,
     descriptionProps,
     baseId,
     labelProps
-  } = useA11y({
-    prefix: 'select',
-    error,
-    description: note,
-    fieldRef: inputRef,
-    isDisabled
-  });
+  } = useA11y(t3);
+  let t5;
+
+  if ($[32] !== menuEl) {
+    t5 = (listItemEl, listEl) => {
+      scrollIntoView(listItemEl, {
+        scrollMode: "if-needed",
+        block: "nearest",
+        boundary: listEl ?? menuEl
+      });
+    };
+
+    $[32] = menuEl;
+    $[33] = t5;
+  } else {
+    t5 = $[33];
+  }
+
+  let t6;
+
+  if ($[34] !== onChange) {
+    t6 = t7 => {
+      const {
+        selectedItem: newSelectedItem
+      } = t7;
+      onChange?.(newSelectedItem);
+    };
+
+    $[34] = onChange;
+    $[35] = t6;
+  } else {
+    t6 = $[35];
+  }
+
   const {
     isOpen,
     getToggleButtonProps,
@@ -76,13 +239,13 @@ function SelectSearchable(_ref) {
     getInputProps,
     highlightedIndex,
     getItemProps,
-    setInputValue
+    setInputValue: t8
   } = useCombobox({
-    onInputValueChange(_ref2) {
-      let {
+    onInputValueChange(t4) {
+      const {
         inputValue,
         type
-      } = _ref2;
+      } = t4;
 
       if (type === useCombobox.stateChangeTypes.InputChange) {
         setFilterString(inputValue);
@@ -94,135 +257,177 @@ function SelectSearchable(_ref) {
     itemToString,
     itemToKey: getOptionValue,
     selectedItem,
-    // defining our scroll behavior because on the first menu render the hook
-    // doesn't know menuRef and use page as the scroll boundary
-    scrollIntoView: (listItemEl, listEl) => {
-      scrollIntoView(listItemEl, {
-        scrollMode: 'if-needed',
-        block: 'nearest',
-        boundary: listEl ?? menuRef.current
-      });
-    },
-    onSelectedItemChange: _ref3 => {
-      let {
-        selectedItem: newSelectedItem
-      } = _ref3;
-      onChange?.(newSelectedItem);
-    },
+    scrollIntoView: t5,
+    onSelectedItemChange: t6,
 
     isItemDisabled(item) {
       return item && item.disabled;
     },
 
-    onIsOpenChange(_ref4) {
-      let {
+    onIsOpenChange(t7) {
+      const {
         isOpen: newIsOpen,
-        selectedItem: newSelectedItem,
+        selectedItem: newSelectedItem_0,
         inputValue: newInputValue
-      } = _ref4;
-      const inputValueFromSelectedItem = itemToString(newSelectedItem);
+      } = t7;
+      const inputValueFromSelectedItem = itemToString(newSelectedItem_0);
 
       if (newIsOpen) {
-        setFilterString('');
-      } else if (newInputValue !== inputValueFromSelectedItem) {
-        setInputValue(inputValueFromSelectedItem);
+        setFilterString("");
+      } else {
+        if (newInputValue !== inputValueFromSelectedItem) {
+          setInputValue(inputValueFromSelectedItem);
+        }
       }
     },
 
     stateReducer(state, actionAndChanges) {
       const {
         changes,
-        type
+        type: type_0
       } = actionAndChanges;
 
-      switch (type) {
+      switch (type_0) {
         case useCombobox.stateChangeTypes.InputKeyDownEscape:
-          if (!state.isOpen) {
-            return state;
-          }
+          {
+            if (!state.isOpen) {
+              return state;
+            }
 
-          return changes;
+            return changes;
+          }
 
         default:
-          return changes;
+          {
+            return changes;
+          }
       }
     }
 
   });
+  const setInputValue = t8;
+  let t9;
 
-  const reset = () => {
-    setInputValue('');
-    onChange?.(null);
-  }; // Downshift composes the ref into a callback ref without reading it during render.
-  // eslint-disable-next-line react-hooks/refs
-
-
-  const menuProps = getMenuProps({
-    ref: menuRef
-  }, {
-    suppressRefError: true
-  }); // Downshift composes the ref into a callback ref without reading it during render.
-  // eslint-disable-next-line react-hooks/refs
-
-  const inputProps = getInputProps({
-    ref: inputRef,
-    // fix screen-reader focus on an opened popup with an empty list
-    ...(isOpen && isListBoxEmpty ? {
-      'aria-activedescendant': menuProps.id
-    } : {})
-  });
+  if ($[36] !== onChange || $[37] !== setInputValue) {
+    t9 = () => {
+      setInputValue("");
+      onChange?.(null);
+    };
+
+    $[36] = onChange;
+    $[37] = setInputValue;
+    $[38] = t9;
+  } else {
+    t9 = $[38];
+  }
+
+  const reset = t9;
+  let menuProps;
+  let t10;
+
+  if ($[39] !== getInputProps || $[40] !== getMenuProps || $[41] !== isListBoxEmpty || $[42] !== isOpen) {
+    menuProps = getMenuProps({
+      ref: setMenuEl
+    }, {
+      suppressRefError: true
+    });
+    t10 = getInputProps({
+      ref: setInputEl,
+      ...(isOpen && isListBoxEmpty ? {
+        "aria-activedescendant": menuProps.id
+      } : {})
+    });
+    $[39] = getInputProps;
+    $[40] = getMenuProps;
+    $[41] = isListBoxEmpty;
+    $[42] = isOpen;
+    $[43] = menuProps;
+    $[44] = t10;
+  } else {
+    menuProps = $[43];
+    t10 = $[44];
+  }
+
+  const inputProps = t10;
   const {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
   } = useLabelFocus();
-  const emptyListMessage = getEmptyMessage({
-    isLoading,
-    isNothingFound: filterString.length > 0,
-    noOptionsMessage
-  });
-  const listBoxState = {
-    selectedMap,
-    highlightedIndex,
-    getItemProps,
-    menuProps,
-    isMulti: false
-  };
-  return /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-    theme: theme,
-    size: size,
-    disabled: isDisabled,
-    label: label,
-    labelProps: mergeProps(labelProps, getLabelProps(), labelClickProps),
-    boldLabel: boldLabel,
-    error: error,
-    reserveErrorLine: reserveErrorLine,
-    errorMessageProps: errorMessageProps,
-    note: note,
-    descriptionProps: descriptionProps
-  }, /*#__PURE__*/React.createElement(HiddenSelect, {
-    name: name,
-    value: selectedItem,
-    isMultiple: false,
-    options: flattenedOptions
-  }), /*#__PURE__*/React.createElement(PopupContent, {
-    theme: theme,
-    size: size,
-    mode: mode,
-    dropdownRef: dropdownRef,
-    triggerRef: inputRef,
-    placement: placement,
-    renderInTrigger: renderInTrigger,
-    disableFlip: disableFlip,
-    isOpen: isOpen,
-    listBoxState: listBoxState,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    listBoxItems: listBoxItems,
-    trigger: _ref5 => {
-      let {
+  const t11 = filterString.length > 0;
+  let t12;
+
+  if ($[45] !== isLoading || $[46] !== noOptionsMessage || $[47] !== t11) {
+    t12 = getEmptyMessage({
+      isLoading,
+      isNothingFound: t11,
+      noOptionsMessage
+    });
+    $[45] = isLoading;
+    $[46] = noOptionsMessage;
+    $[47] = t11;
+    $[48] = t12;
+  } else {
+    t12 = $[48];
+  }
+
+  const emptyListMessage = t12;
+  let t13;
+
+  if ($[49] !== getItemProps || $[50] !== highlightedIndex || $[51] !== menuProps || $[52] !== selectedMap) {
+    t13 = {
+      selectedMap,
+      highlightedIndex,
+      getItemProps,
+      menuProps,
+      isMulti: false
+    };
+    $[49] = getItemProps;
+    $[50] = highlightedIndex;
+    $[51] = menuProps;
+    $[52] = selectedMap;
+    $[53] = t13;
+  } else {
+    t13 = $[53];
+  }
+
+  const listBoxState = t13;
+  let t14;
+
+  if ($[54] !== getLabelProps || $[55] !== labelClickProps || $[56] !== labelProps) {
+    t14 = mergeProps(labelProps, getLabelProps(), labelClickProps);
+    $[54] = getLabelProps;
+    $[55] = labelClickProps;
+    $[56] = labelProps;
+    $[57] = t14;
+  } else {
+    t14 = $[57];
+  }
+
+  let t15;
+
+  if ($[58] !== flattenedOptions || $[59] !== name || $[60] !== selectedItem) {
+    t15 = /*#__PURE__*/React.createElement(HiddenSelect, {
+      name: name,
+      value: selectedItem,
+      isMultiple: false,
+      options: flattenedOptions
+    });
+    $[58] = flattenedOptions;
+    $[59] = name;
+    $[60] = selectedItem;
+    $[61] = t15;
+  } else {
+    t15 = $[61];
+  }
+
+  let t16;
+
+  if ($[62] !== fieldProps || $[63] !== getToggleButtonProps || $[64] !== hasValue || $[65] !== inputEl || $[66] !== inputProps || $[67] !== isClearable || $[68] !== isDisabled || $[69] !== isFocusedByLabel || $[70] !== isLoading || $[71] !== isOpen || $[72] !== labelFocusForTriggerProps || $[73] !== placeholder || $[74] !== reset || $[75] !== rest) {
+    t16 = t17 => {
+      const {
         ref: triggerRefForDropdown
-      } = _ref5;
+      } = t17;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.triggerContainer,
         "data-open": isOpen,
@@ -231,27 +436,115 @@ function SelectSearchable(_ref) {
         className: styles.trigger,
         "data-test": "select__trigger",
         ref: triggerRefForDropdown
-      }, /*#__PURE__*/React.createElement("input", { ...rest,
-        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by inputProps,
-        inputProps, labelFocusForTriggerProps),
+      }, /*#__PURE__*/React.createElement("input", _extends({}, rest, mergeProps(fieldProps, inputProps, labelFocusForTriggerProps), {
         disabled: isDisabled ? true : undefined,
         className: styles.searchInput,
         placeholder: placeholder,
         "data-test": "select__trigger_input"
-      }), /*#__PURE__*/React.createElement(Icons, {
+      })), /*#__PURE__*/React.createElement(Icons, _extends({
         isLoading: isLoading,
         canHaveClearIcon: isClearable && !isDisabled && hasValue,
         onClear: () => {
           reset();
-          inputRef.current?.focus();
+          inputEl?.focus();
         },
-        triggerId: inputProps.id,
-        ...mergeProps(getToggleButtonProps(), {
-          role: 'button'
-        })
-      })));
-    }
-  }));
+        triggerId: inputProps.id
+      }, mergeProps(getToggleButtonProps(), {
+        role: "button"
+      })))));
+    };
+
+    $[62] = fieldProps;
+    $[63] = getToggleButtonProps;
+    $[64] = hasValue;
+    $[65] = inputEl;
+    $[66] = inputProps;
+    $[67] = isClearable;
+    $[68] = isDisabled;
+    $[69] = isFocusedByLabel;
+    $[70] = isLoading;
+    $[71] = isOpen;
+    $[72] = labelFocusForTriggerProps;
+    $[73] = placeholder;
+    $[74] = reset;
+    $[75] = rest;
+    $[76] = t16;
+  } else {
+    t16 = $[76];
+  }
+
+  let t17;
+
+  if ($[77] !== disableFlip || $[78] !== emptyListMessage || $[79] !== inputEl || $[80] !== isOpen || $[81] !== listBoxItems || $[82] !== listBoxState || $[83] !== maxVisibleItems || $[84] !== mode || $[85] !== placement || $[86] !== renderInTrigger || $[87] !== size || $[88] !== t16 || $[89] !== theme) {
+    t17 = /*#__PURE__*/React.createElement(PopupContent, {
+      theme: theme,
+      size: size,
+      mode: mode,
+      dropdownRef: dropdownRef,
+      triggerEl: inputEl,
+      placement: placement,
+      renderInTrigger: renderInTrigger,
+      disableFlip: disableFlip,
+      isOpen: isOpen,
+      listBoxState: listBoxState,
+      maxVisibleItems: maxVisibleItems,
+      emptyListMessage: emptyListMessage,
+      listBoxItems: listBoxItems,
+      trigger: t16
+    });
+    $[77] = disableFlip;
+    $[78] = emptyListMessage;
+    $[79] = inputEl;
+    $[80] = isOpen;
+    $[81] = listBoxItems;
+    $[82] = listBoxState;
+    $[83] = maxVisibleItems;
+    $[84] = mode;
+    $[85] = placement;
+    $[86] = renderInTrigger;
+    $[87] = size;
+    $[88] = t16;
+    $[89] = theme;
+    $[90] = t17;
+  } else {
+    t17 = $[90];
+  }
+
+  let t18;
+
+  if ($[91] !== boldLabel || $[92] !== descriptionProps || $[93] !== error || $[94] !== errorMessageProps || $[95] !== isDisabled || $[96] !== label || $[97] !== note || $[98] !== reserveErrorLine || $[99] !== size || $[100] !== t14 || $[101] !== t15 || $[102] !== t17 || $[103] !== theme) {
+    t18 = /*#__PURE__*/React.createElement(FormTriggerWrapper, {
+      theme: theme,
+      size: size,
+      disabled: isDisabled,
+      label: label,
+      labelProps: t14,
+      boldLabel: boldLabel,
+      error: error,
+      reserveErrorLine: reserveErrorLine,
+      errorMessageProps: errorMessageProps,
+      note: note,
+      descriptionProps: descriptionProps
+    }, t15, t17);
+    $[91] = boldLabel;
+    $[92] = descriptionProps;
+    $[93] = error;
+    $[94] = errorMessageProps;
+    $[95] = isDisabled;
+    $[96] = label;
+    $[97] = note;
+    $[98] = reserveErrorLine;
+    $[99] = size;
+    $[100] = t14;
+    $[101] = t15;
+    $[102] = t17;
+    $[103] = theme;
+    $[104] = t18;
+  } else {
+    t18 = $[104];
+  }
+
+  return t18;
 }
 
 export { SelectSearchable };