@rescui/select 0.18.4 → 0.19.0

package/lib/multiselect.js

@@ -1,5 +1,7 @@
 "use client";
-import React, { useMemo, 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 cn from 'classnames';
 import { useSelect } from 'downshift';
 import { useThemeWithUndefined } from '@rescui/ui-contexts';
@@ -57,65 +59,262 @@ const stateReducer = (state, actionAndChanges) => {
 }; // eslint-disable-next-line complexity
 
 
-function Multiselect(_ref) {
-  let {
-    options = [],
-    value,
-    onChange,
-    error,
-    label,
-    note,
-    size = 'm',
-    mode = 'classic',
-    theme: themeFromProps,
-    placement = 'bottom',
-    renderInTrigger = false,
-    disableFlip = false,
-    isSingleLine = false,
-    boldLabel = true,
-    reserveErrorLine = false,
-    maxVisibleItems = 5,
-    isClearable = false,
-    isLoading = false,
-    isDisabled = false,
-    name,
-    noOptionsMessage,
-    className,
-    id,
-    style,
-    placeholder,
-    ...rest
-  } = _ref;
-  const selectedItems = useMemo(() => value ?? [], [value]);
+function Multiselect(t0) {
+  const $ = c(139);
+  let className;
+  let error;
+  let id;
+  let label;
+  let name;
+  let noOptionsMessage;
+  let note;
+  let onChange;
+  let placeholder;
+  let rest;
+  let style;
+  let t1;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  let themeFromProps;
+  let value;
+
+  if ($[0] !== t0) {
+    ({
+      options: t1,
+      value,
+      onChange,
+      error,
+      label,
+      note,
+      size: t2,
+      mode: t3,
+      theme: themeFromProps,
+      placement: t4,
+      renderInTrigger: t5,
+      disableFlip: t6,
+      isSingleLine: t7,
+      boldLabel: t8,
+      reserveErrorLine: t9,
+      maxVisibleItems: t10,
+      isClearable: t11,
+      isLoading: t12,
+      isDisabled: t13,
+      name,
+      noOptionsMessage,
+      className,
+      id,
+      style,
+      placeholder,
+      ...rest
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = error;
+    $[3] = id;
+    $[4] = label;
+    $[5] = name;
+    $[6] = noOptionsMessage;
+    $[7] = note;
+    $[8] = onChange;
+    $[9] = placeholder;
+    $[10] = rest;
+    $[11] = style;
+    $[12] = t1;
+    $[13] = t10;
+    $[14] = t11;
+    $[15] = t12;
+    $[16] = t13;
+    $[17] = t2;
+    $[18] = t3;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+    $[22] = t7;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = themeFromProps;
+    $[26] = value;
+  } else {
+    className = $[1];
+    error = $[2];
+    id = $[3];
+    label = $[4];
+    name = $[5];
+    noOptionsMessage = $[6];
+    note = $[7];
+    onChange = $[8];
+    placeholder = $[9];
+    rest = $[10];
+    style = $[11];
+    t1 = $[12];
+    t10 = $[13];
+    t11 = $[14];
+    t12 = $[15];
+    t13 = $[16];
+    t2 = $[17];
+    t3 = $[18];
+    t4 = $[19];
+    t5 = $[20];
+    t6 = $[21];
+    t7 = $[22];
+    t8 = $[23];
+    t9 = $[24];
+    themeFromProps = $[25];
+    value = $[26];
+  }
+
+  let t14;
+
+  if ($[27] !== t1) {
+    t14 = t1 === undefined ? [] : t1;
+    $[27] = t1;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+
+  const options = t14;
+  const size = t2 === undefined ? "m" : t2;
+  const mode = t3 === undefined ? "classic" : t3;
+  const placement = t4 === undefined ? "bottom" : t4;
+  const renderInTrigger = t5 === undefined ? false : t5;
+  const disableFlip = t6 === undefined ? false : t6;
+  const isSingleLine = t7 === undefined ? false : t7;
+  const boldLabel = t8 === undefined ? true : t8;
+  const reserveErrorLine = t9 === undefined ? false : t9;
+  const maxVisibleItems = t10 === undefined ? 5 : t10;
+  const isClearable = t11 === undefined ? false : t11;
+  const isLoading = t12 === undefined ? false : t12;
+  const isDisabled = t13 === undefined ? false : t13;
+  let t15;
+
+  if ($[29] !== value) {
+    t15 = value ?? [];
+    $[29] = value;
+    $[30] = t15;
+  } else {
+    t15 = $[30];
+  }
+
+  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;
+
+  if ($[31] !== onChange || $[32] !== selectedItems) {
+    t16 = {
+      selectedItems,
+      onChange
+    };
+    $[31] = onChange;
+    $[32] = selectedItems;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+
   const {
     selectedMap,
     removeItem: removeSelectedItem,
     addItem: addSelectedItem,
     removeAllItems: reset
-  } = useMultiHandlers({
-    selectedItems,
-    onChange
-  });
+  } = useMultiHandlers(t16);
   const {
     flattenedOptions,
     listBoxItems
   } = useOptions(options);
-  const isListBoxEmpty = getRealItemsCnt(listBoxItems) === 0;
+  let t17;
+
+  if ($[34] !== listBoxItems) {
+    t17 = getRealItemsCnt(listBoxItems);
+    $[34] = listBoxItems;
+    $[35] = t17;
+  } else {
+    t17 = $[35];
+  }
+
+  const isListBoxEmpty = t17 === 0;
+  let t18;
+
+  if ($[36] !== error || $[37] !== isDisabled || $[38] !== note) {
+    t18 = {
+      prefix: "multiselect",
+      error,
+      description: note,
+      isDisabled
+    };
+    $[36] = error;
+    $[37] = isDisabled;
+    $[38] = note;
+    $[39] = t18;
+  } else {
+    t18 = $[39];
+  }
+
   const {
     fieldProps,
     errorMessageProps,
     descriptionProps,
     baseId
-  } = useA11y({
-    prefix: 'multiselect',
-    error,
-    description: note,
-    isDisabled
-  });
+  } = useA11y(t18);
+  let t19;
+
+  if ($[40] !== menuEl) {
+    t19 = (listItemEl, listEl) => {
+      scrollIntoView(listItemEl, {
+        scrollMode: "if-needed",
+        block: "nearest",
+        boundary: listEl ?? menuEl
+      });
+    };
+
+    $[40] = menuEl;
+    $[41] = t19;
+  } else {
+    t19 = $[41];
+  }
+
+  let t20;
+
+  if ($[42] !== addSelectedItem || $[43] !== removeSelectedItem || $[44] !== selectedMap) {
+    t20 = t21 => {
+      const {
+        selectedItem
+      } = t21;
+
+      if (!selectedItem) {
+        return;
+      }
+
+      const changedValue = getOptionValue(selectedItem);
+
+      if (selectedMap.has(changedValue)) {
+        removeSelectedItem(selectedItem);
+      } else {
+        addSelectedItem(selectedItem);
+      }
+    };
+
+    $[42] = addSelectedItem;
+    $[43] = removeSelectedItem;
+    $[44] = selectedMap;
+    $[45] = t20;
+  } else {
+    t20 = $[45];
+  }
+
   const {
     isOpen,
     getToggleButtonProps,
@@ -123,7 +322,7 @@ function Multiselect(_ref) {
     getMenuProps,
     highlightedIndex,
     getItemProps,
-    setHighlightedIndex
+    setHighlightedIndex: t21
   } = useSelect({
     items: flattenedOptions,
     itemToString,
@@ -132,7 +331,6 @@ function Multiselect(_ref) {
 
     onIsOpenChange(newIsOpen) {
       if (newIsOpen) {
-        // set the first selected item as a highlighted item if the popup is opened
         const firstSelectedKey = [...selectedMap.keys()][0];
 
         if (firstSelectedKey) {
@@ -142,177 +340,332 @@ function Multiselect(_ref) {
     },
 
     stateReducer,
-    // there's no actual selection happening in the hook, we're doing it custom via controlled props.
     selectedItem: null,
-    // 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: _ref2 => {
-      let {
-        selectedItem
-      } = _ref2;
+    scrollIntoView: t19,
+    onSelectedItemChange: t20,
 
-      if (!selectedItem) {
-        return;
-      }
-
-      const changedValue = getOptionValue(selectedItem);
-
-      if (selectedMap.has(changedValue)) {
-        removeSelectedItem(selectedItem);
-      } else {
-        addSelectedItem(selectedItem);
-      }
-    },
-
-    isItemDisabled(item) {
-      return item && item.disabled;
+    isItemDisabled(item_0) {
+      return item_0 && item_0.disabled;
     }
 
   });
-  const menuProps = getMenuProps( // Downshift composes the ref into a callback ref without reading it during render.
-  // eslint-disable-next-line react-hooks/refs
-  {
-    ref: menuRef,
-    'aria-multiselectable': isListBoxEmpty ? undefined : 'true'
-  }, {
-    suppressRefError: true
-  }); // Downshift composes the ref into a callback ref without reading it during render.
-  // eslint-disable-next-line react-hooks/refs
-
-  const triggerProps = getToggleButtonProps({
-    ref: triggerRef,
-    // eslint-disable-next-line complexity
-    onKeyDown: event => {
-      // prevent default behavior of Downshift when pressing Ctrl
-      if (event.ctrlKey || event.metaKey) {
-        event.preventDownshiftDefault = true;
-        return;
-      } // shift + arrow up/down selection (when popup is open)
-
+  const setHighlightedIndex = t21;
+  const t22 = isListBoxEmpty ? undefined : "true";
+  let menuProps;
+  let t23;
 
-      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 ($[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
+    }, {
+      suppressRefError: true
+    });
+    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]);
-      } // backspace removing the last selected item (when popup is closed)
+        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 (newHighlightedIndex === highlightedIndex) {
+            return;
+          }
 
-      if (!isOpen && event.key === 'Backspace') {
-        removeSelectedItem(selectedItems[selectedItems.length - 1]);
-      } // delete removing all selected items (when popup is closed)
+          addSelectedItem(flattenedOptions[newHighlightedIndex]);
+        }
 
+        if (!isOpen && event.key === "Backspace") {
+          removeSelectedItem(selectedItems[selectedItems.length - 1]);
+        }
 
-      if (!isOpen && event.key === 'Delete') {
-        reset();
-      }
-    },
-    // fix screen-reader focus on an opened popup with an empty list
-    ...(isOpen && isListBoxEmpty ? {
-      'aria-activedescendant': menuProps.id
-    } : {})
-  });
+        if (!isOpen && event.key === "Delete") {
+          reset();
+        }
+      };
+
+      $[59] = addSelectedItem;
+      $[60] = flattenedOptions;
+      $[61] = highlightedIndex;
+      $[62] = isOpen;
+      $[63] = removeSelectedItem;
+      $[64] = reset;
+      $[65] = selectedItems;
+      $[66] = t24;
+    } else {
+      t24 = $[66];
+    }
+
+    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 {
+    menuProps = $[57];
+    t23 = $[58];
+  }
+
+  const triggerProps = t23;
   const {
     isFocusedByLabel,
     labelClickProps,
     triggerFocusProps: labelFocusForTriggerProps
   } = useLabelFocus();
-  const emptyListMessage = getEmptyMessage({
-    isLoading,
-    isNothingFound: false,
-    noOptionsMessage
-  });
-  const listBoxState = {
-    selectedMap,
-    highlightedIndex,
-    getItemProps,
-    menuProps,
-    isMulti: true
-  };
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn(className, styles.root, THEME_STYLES[theme], SIZE_STYLES[size], MODE_STYLES[mode], isDisabled ? styles.disabled : styles.enabled, Boolean(error) && styles.error),
-    id: id,
-    style: style,
-    "data-test": "multiselect"
-  }, /*#__PURE__*/React.createElement(FormTriggerWrapper, {
-    theme: theme,
-    size: size,
-    disabled: isDisabled,
-    label: label,
-    labelProps: mergeProps(getLabelProps(), labelClickProps),
-    boldLabel: boldLabel,
-    error: error,
-    reserveErrorLine: reserveErrorLine,
-    errorMessageProps: errorMessageProps,
-    note: note,
-    descriptionProps: descriptionProps
-  }, /*#__PURE__*/React.createElement(HiddenSelect, {
-    name: name,
-    value: selectedItems,
-    isMultiple: true,
-    options: flattenedOptions
-  }), /*#__PURE__*/React.createElement(PopupContent, {
-    theme: theme,
-    size: size,
-    mode: mode,
-    dropdownRef: dropdownRef,
-    triggerRef: triggerRef,
-    placement: placement,
-    renderInTrigger: renderInTrigger,
-    disableFlip: disableFlip,
-    isOpen: isOpen,
-    listBoxState: listBoxState,
-    maxVisibleItems: maxVisibleItems,
-    emptyListMessage: emptyListMessage,
-    listBoxItems: listBoxItems,
-    dropdownUpdateDeps: [selectedItems],
-    trigger: _ref3 => {
-      let {
+  let t24;
+
+  if ($[67] !== isLoading || $[68] !== noOptionsMessage) {
+    t24 = getEmptyMessage({
+      isLoading,
+      isNothingFound: false,
+      noOptionsMessage
+    });
+    $[67] = isLoading;
+    $[68] = noOptionsMessage;
+    $[69] = t24;
+  } else {
+    t24 = $[69];
+  }
+
+  const emptyListMessage = t24;
+  let t25;
+
+  if ($[70] !== getItemProps || $[71] !== highlightedIndex || $[72] !== menuProps || $[73] !== selectedMap) {
+    t25 = {
+      selectedMap,
+      highlightedIndex,
+      getItemProps,
+      menuProps,
+      isMulti: true
+    };
+    $[70] = getItemProps;
+    $[71] = highlightedIndex;
+    $[72] = menuProps;
+    $[73] = selectedMap;
+    $[74] = t25;
+  } else {
+    t25 = $[74];
+  }
+
+  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 {
+    t31 = $[81];
+  }
+
+  let t32;
+
+  if ($[82] !== getLabelProps || $[83] !== labelClickProps) {
+    t32 = mergeProps(getLabelProps(), labelClickProps);
+    $[82] = getLabelProps;
+    $[83] = labelClickProps;
+    $[84] = t32;
+  } else {
+    t32 = $[84];
+  }
+
+  let t33;
+
+  if ($[85] !== flattenedOptions || $[86] !== name || $[87] !== selectedItems) {
+    t33 = /*#__PURE__*/React.createElement(HiddenSelect, {
+      name: name,
+      value: selectedItems,
+      isMultiple: true,
+      options: flattenedOptions
+    });
+    $[85] = flattenedOptions;
+    $[86] = name;
+    $[87] = selectedItems;
+    $[88] = t33;
+  } else {
+    t33 = $[88];
+  }
+
+  let t34;
+
+  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
-      } = _ref3;
+      } = t35;
       return /*#__PURE__*/React.createElement("div", {
         className: styles.triggerContainer,
         "data-open": isOpen,
         "data-label-focused": isFocusedByLabel
-      }, /*#__PURE__*/React.createElement("div", { ...rest,
-        ...mergeProps(fieldProps, // aria-invalid & aria-describedby, rest are overridden by triggerProps
-        triggerProps, labelFocusForTriggerProps, {
-          ref: triggerRefForDropdown
-        }),
+      }, /*#__PURE__*/React.createElement("div", _extends({}, rest, mergeProps(fieldProps, triggerProps, labelFocusForTriggerProps, {
+        ref: triggerRefForDropdown
+      }), {
         tabIndex: isDisabled ? undefined : 0,
         className: cn(styles.trigger, !isSingleLine && styles.canBeMultiline),
         "data-test": "multiselect__trigger"
-      }, /*#__PURE__*/React.createElement(MultiTrigger, {
+      }), /*#__PURE__*/React.createElement(MultiTrigger, {
         selectedItems: selectedItems,
         valueProps: {},
         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
           });
         },
         triggerId: triggerProps.id
       })));
-    }
-  })));
+    };
+
+    $[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 {
+    t34 = $[104];
+  }
+
+  let t35;
+
+  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,
+      triggerEl: triggerEl,
+      placement: placement,
+      renderInTrigger: renderInTrigger,
+      disableFlip: disableFlip,
+      isOpen: isOpen,
+      listBoxState: listBoxState,
+      maxVisibleItems: maxVisibleItems,
+      emptyListMessage: emptyListMessage,
+      listBoxItems: listBoxItems,
+      dropdownUpdateDep: selectedItems,
+      trigger: t34
+    });
+    $[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 {
+    t35 = $[119];
+  }
+
+  let t36;
+
+  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: t32,
+      boldLabel: boldLabel,
+      error: error,
+      reserveErrorLine: reserveErrorLine,
+      errorMessageProps: errorMessageProps,
+      note: note,
+      descriptionProps: descriptionProps
+    }, 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 {
+    t36 = $[133];
+  }
+
+  let t37;
+
+  if ($[134] !== id || $[135] !== style || $[136] !== t31 || $[137] !== t36) {
+    t37 = /*#__PURE__*/React.createElement("div", {
+      className: t31,
+      id: id,
+      style: style,
+      "data-test": "multiselect"
+    }, t36);
+    $[134] = id;
+    $[135] = style;
+    $[136] = t31;
+    $[137] = t36;
+    $[138] = t37;
+  } else {
+    t37 = $[138];
+  }
+
+  return t37;
 }
 
 export { Multiselect };