@servicetitan/anvil2 1.38.0 → 1.40.0

package/dist/{Combobox-7ADxZKDE.js → Combobox-C7nV-w8I.js}

@@ -3,15 +3,15 @@ import { useTrackingId } from './useTrackingId.js';
 import React__default, { useRef, useEffect, useMemo, useCallback, useLayoutEffect, useReducer, cloneElement, Component, useState, createContext, useId, useContext, useDeferredValue } from 'react';
 import { g as getDefaultExportFromCjs, c as cx } from './index-tZvMCc77.js';
 import { a as _extends, _ as _objectWithoutPropertiesLoose } from './extends-Bg2s_OKl.js';
-import { e as PopoverLegacy, d as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-VztF0YHt-ci3tYiye.js';
+import { e as PopoverLegacy, d as Popover, u as usePopoverLegacyContext, f as usePopoverContext } from './Popover-CVCAWhdO-CJw1mW49.js';
 import { s as styles$3 } from './Listbox.module-DcBE8Zmo-DcBE8Zmo.js';
-import { L as Label, s as supportsPopover } from './ProgressBar-Cfi5zZRy-BpESsdh_.js';
+import { L as Label, s as supportsPopover } from './ProgressBar-CZhkKwaS-dlDRDjxo.js';
 import { F as Flex } from './Flex-CiK7uNUu-BfxHG4L0.js';
 import { B as Button } from './Button-BaHFf1AT-BQy-PFB5.js';
 import { C as Chip } from './Chip-_daV8CmM-CTke7zH4.js';
 import { S as SvgClose } from './close-DZj38AEh.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
-import { H as Helper } from './Helper-C9sHaTrI-C5fAsK6i.js';
+import { H as Helper } from './Helper-h7k80qls-DHPFHTvI.js';
 import { T as Text } from './Text-DCvcLCvf-DlmnnjTR.js';
 import { S as Spinner } from './Spinner-DliJVzdW-BQlZEj4V.js';
 import { s as styles$2 } from './ListView.module-MVsNF0X0-MVsNF0X0.js';
@@ -19,6 +19,7 @@ import { I as Icon$2 } from './Icon-B6HmlQiR-BxQkO3X5.js';
 import { c as checkboxStyles, S as SvgIndeterminateCheckBox, a as SvgCheckBox, b as SvgCheckBoxOutlineBlank } from './Checkbox.module-DZ58p15b-BUsQC1lW.js';
 import { S as SvgCheck } from './check-Cf67OWrZ.js';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DWACCL8v-CZNrcQT-.js';
+import { u as useDownshiftEnvironment$1, a as defaultItemToKey$1, d as defaultItemToString$1, S as SelectTriggerBase } from './SelectTriggerBase-BMhRDkFW-DjkagPpu.js';
 import { c as childrenToString } from './childrenToString-Bz9MqbHb-Bz9MqbHb.js';
 import { a as Avatar } from './Avatar-B20IdOEO-Di14brYV.js';
 
@@ -6279,13 +6280,13 @@ function getKeyAttributes(key) {
   };
 }
 
-const defaultItemToString$1 = function(item) {
+const defaultItemToString = function(item) {
   return item != null ? String(item) : "";
 };
-const defaultItemToKey$1 = function(item) {
+const defaultItemToKey = function(item) {
   return item;
 };
-const useDownshiftEnvironment$1 = () => {
+const useDownshiftEnvironment = () => {
   const wrapperDivRef = useRef(null);
   const shadowRoot = wrapperDivRef.current ? wrapperDivRef.current.getRootNode() : null;
   const shadowDocument = wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;
@@ -6299,30 +6300,30 @@ const useDownshiftEnvironment$1 = () => {
 };
 
 const item$1 = "_item_rxmcz_5";
-const input$1 = "_input_rxmcz_18";
-const prefix$1 = "_prefix_rxmcz_46";
-const suffix$1 = "_suffix_rxmcz_47";
+const input = "_input_rxmcz_18";
+const prefix = "_prefix_rxmcz_46";
+const suffix = "_suffix_rxmcz_47";
 const combobox$1 = "_combobox_rxmcz_62";
-const select$1 = "_select_rxmcz_71";
-const chip$1 = "_chip_rxmcz_167";
+const select = "_select_rxmcz_71";
+const chip = "_chip_rxmcz_167";
 const listview$1 = "_listview_rxmcz_208";
 const empty$1 = "_empty_rxmcz_216";
 const Icon$1 = "_Icon_rxmcz_247";
-const small$1 = "_small_rxmcz_252";
-const large$1 = "_large_rxmcz_255";
-const error$1 = "_error_rxmcz_273";
+const small = "_small_rxmcz_252";
+const large = "_large_rxmcz_255";
+const error = "_error_rxmcz_273";
 const styles$1 = {
 	"buttons-wrapper": "_buttons-wrapper_rxmcz_3",
 	"search-field": "_search-field_rxmcz_4",
 	item: item$1,
-	input: input$1,
+	input: input,
 	"input-wrapper": "_input-wrapper_rxmcz_19",
 	"toggle-button-wrapper": "_toggle-button-wrapper_rxmcz_32",
 	"close-button-wrapper": "_close-button-wrapper_rxmcz_33",
-	prefix: prefix$1,
-	suffix: suffix$1,
+	prefix: prefix,
+	suffix: suffix,
 	combobox: combobox$1,
-	select: select$1,
+	select: select,
 	"popover-content": "_popover-content_rxmcz_74",
 	"no-clear-button": "_no-clear-button_rxmcz_93",
 	"input-flex": "_input-flex_rxmcz_96",
@@ -6331,14 +6332,14 @@ const styles$1 = {
 	"toggle-button": "_toggle-button_rxmcz_32",
 	"rows-wrapper": "_rows-wrapper_rxmcz_157",
 	"chip-wrapper": "_chip-wrapper_rxmcz_167",
-	chip: chip$1,
+	chip: chip,
 	listview: listview$1,
 	"loading-spinner": "_loading-spinner_rxmcz_212",
 	empty: empty$1,
 	Icon: Icon$1,
-	small: small$1,
-	large: large$1,
-	error: error$1,
+	small: small,
+	large: large,
+	error: error,
 	"listview-option": "_listview-option_rxmcz_304"
 };
 
@@ -6397,14 +6398,14 @@ const ComboboxLegacySingle = function(props) {
       return false;
     }
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
     () => showAddNew ? [...items, ADD_NEW$1] : items,
     [items, showAddNew]
   );
-  const itemToString = itemToStringProp ?? defaultItemToString$1;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
   const {
     isOpen,
     getLabelProps,
@@ -6666,14 +6667,14 @@ const ComboboxLegacyMultiple = function(props) {
       return false;
     }
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
   const showAddNew = hasAddNew && !hasExactMatch;
   const combinedItems = useMemo(
     () => showAddNew ? [...items, ADD_NEW$1] : items,
     [items, showAddNew]
   );
-  const itemToString = itemToStringProp ?? defaultItemToString$1;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -6986,9 +6987,9 @@ const SelectLegacySingle = function(props) {
       return false;
     }
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
-  const itemToString = itemToStringProp ?? defaultItemToString$1;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
   const {
     isOpen,
     getLabelProps,
@@ -7168,9 +7169,9 @@ const SelectLegacyMultiple = function(props) {
       return false;
     }
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
-  const itemToString = itemToStringProp ?? defaultItemToString$1;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey;
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -8071,74 +8072,30 @@ const ComboboxLegacyEmpty = function({
   return !items.length ? children : null;
 };
 
-const item = "_item_kuivx_4";
-const group = "_group_kuivx_17";
-const input = "_input_kuivx_30";
-const prefix = "_prefix_kuivx_58";
-const suffix = "_suffix_kuivx_59";
-const combobox = "_combobox_kuivx_74";
-const select = "_select_kuivx_83";
-const chip = "_chip_kuivx_187";
-const listview = "_listview_kuivx_228";
-const empty = "_empty_kuivx_236";
-const Icon = "_Icon_kuivx_281";
-const small = "_small_kuivx_286";
-const large = "_large_kuivx_289";
-const error = "_error_kuivx_307";
-const styles = {
-	"buttons-wrapper": "_buttons-wrapper_kuivx_2",
-	"search-field": "_search-field_kuivx_3",
-	item: item,
-	group: group,
-	input: input,
-	"input-wrapper": "_input-wrapper_kuivx_31",
-	"toggle-button-wrapper": "_toggle-button-wrapper_kuivx_44",
-	"close-button-wrapper": "_close-button-wrapper_kuivx_45",
-	prefix: prefix,
-	suffix: suffix,
-	combobox: combobox,
-	select: select,
-	"popover-content": "_popover-content_kuivx_86",
-	"no-clear-button": "_no-clear-button_kuivx_105",
-	"input-flex": "_input-flex_kuivx_108",
-	"fake-placeholder": "_fake-placeholder_kuivx_136",
-	"close-button": "_close-button_kuivx_45",
-	"toggle-button": "_toggle-button_kuivx_44",
-	"prefix-wrapper": "_prefix-wrapper_kuivx_169",
-	"rows-wrapper": "_rows-wrapper_kuivx_177",
-	"chip-wrapper": "_chip-wrapper_kuivx_187",
-	chip: chip,
-	listview: listview,
-	"loading-spinner": "_loading-spinner_kuivx_232",
-	empty: empty,
-	"group-title": "_group-title_kuivx_247",
-	Icon: Icon,
-	small: small,
-	large: large,
-	error: error,
-	"listview-option": "_listview-option_kuivx_344"
-};
-
-const ComboboxTrigger = function({
-  // variant: variantProp = "combobox",
-  className,
-  label,
-  size,
-  error,
-  hint,
-  description,
-  required,
-  moreInfo,
-  openMoreInfo,
-  prefix,
-  suffix,
-  maxRows,
-  selectedItemProps: chipProps = () => ({}),
-  id,
-  disabled,
-  readOnly,
-  ...rest
-}) {
+const ComboboxTrigger = function(props) {
+  const { layoutStyles, componentProps } = useLayoutPropsUtil(props);
+  const {
+    // variant: variantProp = "combobox",
+    className,
+    style,
+    label,
+    size,
+    error,
+    hint,
+    description,
+    required,
+    moreInfo,
+    openMoreInfo,
+    prefix,
+    suffix,
+    maxRows,
+    selectedItemProps = () => ({}),
+    id,
+    placeholder,
+    disabled,
+    readOnly,
+    ...rest
+  } = componentProps;
   const {
     select,
     disableClearSelection,
@@ -8162,33 +8119,7 @@ const ComboboxTrigger = function({
     setIsDisabled,
     setIsReadOnly
   } = useCombobox();
-  const variant = select ? "select" : "combobox";
   const context = usePopoverContext();
-  const inputRef = useRef(null);
-  const ComboboxTriggerClassNames = cx(styles["search-field"], {
-    [styles["select"]]: variant === "select"
-  });
-  const noClearButton = isDisabled || isReadOnly || disableClearSelection;
-  const ComboboxInputWrapperClassNames = cx(
-    styles["input-wrapper"],
-    className ? {
-      [className]: variant === "select"
-    } : {},
-    {
-      [styles["small"]]: size === "small",
-      [styles["large"]]: size === "large",
-      [styles["no-clear-button"]]: noClearButton
-    }
-  );
-  const ComboboxInputClassNames = cx(
-    styles["input"],
-    className ? {
-      [className]: variant === "combobox"
-    } : {},
-    {
-      [styles["error"]]: error
-    }
-  );
   useLayoutEffect(() => {
     if (typeof disabled === "undefined") return;
     setIsDisabled(disabled);
@@ -8197,10 +8128,6 @@ const ComboboxTrigger = function({
     if (typeof readOnly === "undefined") return;
     setIsReadOnly(readOnly);
   }, [readOnly, setIsReadOnly]);
-  const helperUid = "helper" + useId();
-  const placeholderUid = "placeholder" + useId();
-  const ariaDescribedBy = `${helperUid} ${placeholderUid}`;
-  const errorMessage = typeof error !== "boolean" ? error : void 0;
   const handleBlur = (e) => {
     const target = e.relatedTarget ?? e.target;
     const focusedOnReference = context?.invoker.ref.current && context?.invoker.ref.current.contains(target);
@@ -8209,237 +8136,114 @@ const ComboboxTrigger = function({
       closeMenu();
     }
   };
-  const rowsRef = useRef(null);
-  const [stillCalculating, setStillCalculating] = useState(false);
-  const [collapsedChips, setCollapsedChips] = useState(false);
-  const [visibleChipsCount, setVisibleChipsCount] = useState(
-    null
-  );
-  const [forceRenderCount, setForceRenderCount] = useState(0);
-  useLayoutEffect(() => {
-    if (maxRows === void 0) return;
-    if (stillCalculating === false) {
-      setStillCalculating(true);
-      setCollapsedChips(false);
-      setVisibleChipsCount(null);
-      setForceRenderCount((x) => x + 1);
-    } else if (rowsRef?.current?.children) {
-      const children = rowsRef?.current?.children;
-      const rowData = Array.from(children).reduce(
-        (acc, child) => {
-          const top = child.getBoundingClientRect().top;
-          if (!acc.length) {
-            return [{ count: 1, top }];
-          } else if (acc[acc.length - 1].top === top) {
-            return [
-              ...acc.slice(0, -1),
-              { count: acc[acc.length - 1].count + 1, top }
-            ];
-          } else if (acc[acc.length - 1].top !== top) {
-            return [...acc, { count: 1, top }];
-          } else {
-            return acc;
-          }
-        },
-        []
-      );
-      if (!rowData[maxRows] || visibleChipsCount === 0 || selectedItems.length === 1) {
-        setStillCalculating(false);
-      } else {
-        setCollapsedChips(true);
-        if (visibleChipsCount == null) {
-          const firstGuess = Math.max(
-            rowData.reduce((sum, row) => sum + row.count, -2),
-            0
-          );
-          setVisibleChipsCount(firstGuess);
-        } else {
-          setVisibleChipsCount(visibleChipsCount - 1);
-        }
-        setForceRenderCount((x) => x + 1);
-      }
+  const labelProps = getLabelProps({
+    required,
+    moreInfo,
+    openMoreInfo
+  });
+  const inputRef = useRef(null);
+  const inputWrapperProps = {
+    ...select ? {
+      ...getToggleButtonProps({
+        disabled,
+        readOnly,
+        id,
+        ref: context?.invoker.ref
+      })
+    } : {
+      onClick: () => inputRef.current?.focus(),
+      ref: context?.invoker.ref
     }
-  }, [selectedItems.length, maxRows, forceRenderCount]);
-  const selectedItemsDisplayCount = collapsedChips && maxRows != null && visibleChipsCount !== null ? visibleChipsCount : selectedItems.length;
-  return /* @__PURE__ */ jsxs(
-    "div",
+  };
+  const toggleButtonProps = select ? {} : getToggleButtonProps();
+  const handleClearButtonClick = (_e) => {
+    if (reset != null) {
+      reset();
+    } else {
+      selectItem(null);
+    }
+  };
+  const styleCombined = {
+    ...style,
+    ...layoutStyles
+  };
+  return /* @__PURE__ */ jsx(
+    SelectTriggerBase,
     {
-      className: ComboboxTriggerClassNames,
-      "data-anv": "combobox-searchfield",
-      ref: referenceRef,
+      "data-anv": select ? "combobox-select-trigger" : "combobox-search-field",
+      className,
+      style: styleCombined,
+      label,
+      size,
+      error,
+      hint,
+      description,
+      prefix,
+      suffix,
+      maxRows,
+      selectedItemProps,
+      placeholder,
+      labelProps,
+      inputWrapperProps,
+      toggleButtonProps,
+      itemToString,
+      removeSelectedItem,
+      variant: select ? "select" : "combobox",
+      disableClearSelection,
+      selectedItem,
+      selectedItems,
+      inputValue,
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      referenceRef,
       onBlur: handleBlur,
-      children: [
-        label ? /* @__PURE__ */ jsx(
-          Label,
-          {
-            ...getLabelProps({
-              className: styles["label"],
-              required,
-              moreInfo,
-              openMoreInfo
-            }),
-            children: label
-          }
-        ) : null,
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: ComboboxInputWrapperClassNames,
-            ...variant === "select" ? {
-              ...getToggleButtonProps({
-                disabled: isDisabled,
-                readOnly: isReadOnly,
-                id,
-                "aria-describedby": ariaDescribedBy,
-                "aria-labelledby": getLabelProps().id,
-                ref: context?.invoker.ref
-              })
-            } : {
-              onClick: () => inputRef.current?.focus(),
-              ref: context?.invoker.ref
-            },
-            children: [
-              /* @__PURE__ */ jsxs("div", { className: styles["buttons-wrapper"], children: [
-                (inputValue || selectedItem || selectedItems.length) && !noClearButton ? /* @__PURE__ */ jsx("div", { className: styles["close-button-wrapper"], children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    "aria-label": "clear selection",
-                    appearance: "ghost",
-                    size: "small",
-                    icon: SvgClose,
-                    className: styles["close-button"],
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      if (reset != null) {
-                        reset();
-                      } else {
-                        selectItem(null);
-                      }
-                    },
-                    tabIndex: -1
-                  }
-                ) }) : null,
-                /* @__PURE__ */ jsx("div", { className: styles["toggle-button-wrapper"], children: /* @__PURE__ */ jsx(
-                  Button,
-                  {
-                    ...variant === "select" ? { tabIndex: -1, inert: "true" } : getToggleButtonProps(),
-                    className: styles["toggle-button"],
-                    "aria-label": "toggle menu",
-                    icon: SvgChevronRight,
-                    appearance: "ghost",
-                    size: "small",
-                    disabled: isDisabled
-                  }
-                ) })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: styles["prefix-wrapper"], children: prefix ? /* @__PURE__ */ jsx("div", { className: styles["prefix"], children: prefix }) : null }),
-              /* @__PURE__ */ jsxs("div", { className: styles["rows-wrapper"], ref: rowsRef, children: [
-                selectedItems.length && removeSelectedItem != null && getSelectedItemProps != null ? selectedItems.slice(0, selectedItemsDisplayCount).map((item, index) => {
-                  const { onClick, ...selectedItemProps } = getSelectedItemProps({
-                    selectedItem: item,
-                    index
-                  });
-                  return /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      className: styles["chip-wrapper"],
-                      children: /* @__PURE__ */ jsx(
-                        Chip,
-                        {
-                          ...selectedItemProps,
-                          label: itemToString(item),
-                          onClose: isDisabled || isReadOnly ? void 0 : (_e) => {
-                            removeSelectedItem(item);
-                          },
-                          className: styles["chip"],
-                          title: itemToString(item),
-                          ...chipProps(item)
-                        }
-                      )
-                    },
-                    `selected-item-${index}`
-                  );
-                }) : null,
-                collapsedChips && maxRows != null ? /* @__PURE__ */ jsx("div", { className: styles["chip-wrapper"], children: /* @__PURE__ */ jsx(
-                  Chip,
-                  {
-                    label: `+${selectedItems.length - selectedItemsDisplayCount}`,
-                    className: styles["chip"],
-                    title: selectedItems.slice(selectedItemsDisplayCount).map((item) => itemToString(item)).join(", ")
-                  }
-                ) }) : null,
-                /* @__PURE__ */ jsxs(Flex, { className: styles["input-flex"], alignItems: "center", children: [
-                  variant === "select" ? /* @__PURE__ */ jsx(
-                    "div",
-                    {
-                      ...getDropdownProps != null ? getDropdownProps({
-                        className: ComboboxInputClassNames,
-                        required,
-                        preventKeyAction: false
-                      }) : {
-                        className: ComboboxInputClassNames,
-                        required
-                      },
-                      "aria-expanded": context?.invoker["aria-expanded"],
-                      "aria-details": getMenuProps().id,
-                      "aria-haspopup": context?.invoker["aria-haspopup"],
-                      children: selectedItems.length ? null : selectedItem ? itemToString(selectedItem) : /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          className: styles["fake-placeholder"],
-                          id: placeholderUid,
-                          children: rest.placeholder
-                        }
-                      )
-                    }
-                  ) : /* @__PURE__ */ jsx(
-                    "input",
-                    {
-                      "aria-expanded": context?.invoker["aria-expanded"],
-                      "aria-details": getMenuProps().id,
-                      "aria-haspopup": context?.invoker["aria-haspopup"],
-                      "aria-controls": getMenuProps().id,
-                      ...getDropdownProps != null && getInputProps != null ? getInputProps(
-                        getDropdownProps({
-                          ...rest,
-                          className: ComboboxInputClassNames,
-                          disabled: isDisabled,
-                          readOnly: isReadOnly,
-                          required,
-                          autoComplete: "off",
-                          id,
-                          preventKeyAction: false,
-                          ref: inputRef
-                        })
-                      ) : getInputProps != null ? getInputProps({
-                        ...rest,
-                        className: ComboboxInputClassNames,
-                        disabled: isDisabled,
-                        readOnly: isReadOnly,
-                        required,
-                        autoComplete: "off",
-                        id,
-                        ref: inputRef
-                      }) : {},
-                      role: "combobox"
-                    }
-                  ),
-                  suffix ? /* @__PURE__ */ jsx("div", { className: styles["suffix"], children: suffix }) : null
-                ] })
-              ] })
-            ]
-          }
-        ),
-        hint || errorMessage || description ? /* @__PURE__ */ jsx(
-          Helper,
-          {
-            id: helperUid,
-            errorMessage,
-            hint,
-            description
-          }
-        ) : null
-      ]
+      onClearButtonClick: handleClearButtonClick,
+      chipProps: (item, index) => {
+        if (getSelectedItemProps != null) {
+          const { onClick: _, ...chipProps } = getSelectedItemProps({
+            selectedItem: item,
+            index
+          });
+          return chipProps;
+        }
+        return {};
+      },
+      inputProps: select ? {
+        ...getDropdownProps != null ? getDropdownProps({
+          required,
+          preventKeyAction: false
+        }) : {
+          required
+        },
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"]
+      } : {
+        ["aria-expanded"]: context?.invoker["aria-expanded"],
+        ["aria-details"]: getMenuProps().id,
+        ["aria-haspopup"]: context?.invoker["aria-haspopup"],
+        ["aria-controls"]: getMenuProps().id,
+        ...getDropdownProps != null && getInputProps != null ? getInputProps(
+          getDropdownProps({
+            ...rest,
+            disabled,
+            readOnly,
+            required,
+            autoComplete: "off",
+            id,
+            preventKeyAction: false,
+            ref: inputRef
+          })
+        ) : getInputProps != null ? getInputProps({
+          ...rest,
+          disabled,
+          readOnly,
+          required,
+          autoComplete: "off",
+          id,
+          ref: inputRef
+        }) : {}
+      }
     }
   );
 };
@@ -8454,6 +8258,25 @@ const ComboboxSelectTrigger$1 = function(props) {
   return /* @__PURE__ */ jsx(ComboboxTrigger, { ...props, variant: "select" });
 };
 
+const item = "_item_1wcw0_2";
+const group = "_group_1wcw0_15";
+const combobox = "_combobox_1wcw0_30";
+const listview = "_listview_1wcw0_39";
+const empty = "_empty_1wcw0_47";
+const Icon = "_Icon_1wcw0_92";
+const styles = {
+	item: item,
+	group: group,
+	combobox: combobox,
+	"popover-content": "_popover-content_1wcw0_34",
+	listview: listview,
+	"loading-spinner": "_loading-spinner_1wcw0_43",
+	empty: empty,
+	"group-title": "_group-title_1wcw0_58",
+	Icon: Icon,
+	"listview-option": "_listview-option_1wcw0_97"
+};
+
 const ComboboxGroupContext = createContext(null);
 const ComboboxGroupProvider = ComboboxGroupContext.Provider;
 
@@ -8907,25 +8730,6 @@ const ComboboxEmpty$1 = function({
   return /* @__PURE__ */ jsx(ComboboxEmptyElement, { children });
 };
 
-const defaultItemToString = function(item) {
-  return item != null ? String(item) : "";
-};
-const defaultItemToKey = function(item) {
-  return item;
-};
-const useDownshiftEnvironment = () => {
-  const wrapperDivRef = useRef(null);
-  const shadowRoot = wrapperDivRef.current ? wrapperDivRef.current.getRootNode() : null;
-  const shadowDocument = wrapperDivRef.current && shadowRoot ? shadowRoot.ownerDocument : null;
-  const environment = shadowDocument ? {
-    document: shadowDocument,
-    addEventListener: shadowDocument.addEventListener.bind(shadowRoot),
-    removeEventListener: shadowDocument.removeEventListener.bind(shadowRoot),
-    Node
-  } : void 0;
-  return { ref: wrapperDivRef, environment };
-};
-
 function useGroups({
   items,
   groupBy,
@@ -9018,7 +8822,7 @@ const ComboboxSingle = function(props) {
     if (disableCloseOnClickOutside) return;
     closeMenu();
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
   const { orderedItems: allItemsOrderedByGroup } = useGroups({
     items: itemsProp,
     groupBy,
@@ -9036,8 +8840,8 @@ const ComboboxSingle = function(props) {
     () => showAddNew ? [...searchedItemsOrderedByGroup, ADD_NEW] : searchedItemsOrderedByGroup,
     [searchedItemsOrderedByGroup, showAddNew]
   );
-  const itemToString = itemToStringProp ?? defaultItemToString;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const {
     isOpen,
     getLabelProps,
@@ -9308,7 +9112,7 @@ const ComboboxMultiple = function(props) {
     if (disableCloseOnClickOutside) return;
     closeMenu();
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
   const { orderedItems: allItemsOrderedByGroup } = useGroups({
     items: itemsProp,
     groupBy,
@@ -9324,8 +9128,8 @@ const ComboboxMultiple = function(props) {
     () => showAddNew ? [...items, ADD_NEW] : searchedItemsOrderedByGroup,
     [items, searchedItemsOrderedByGroup, showAddNew]
   );
-  const itemToString = itemToStringProp ?? defaultItemToString;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const {
     getSelectedItemProps,
     getDropdownProps,
@@ -9647,9 +9451,9 @@ const SelectSingle = function(props) {
     if (disableCloseOnClickOutside) return;
     closeMenu();
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const itemToString = itemToStringProp ?? defaultItemToString;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const { groups, orderedItems } = useGroups({
     items,
     groupBy,
@@ -9826,9 +9630,9 @@ const SelectMultiple = function(props) {
     if (disableCloseOnClickOutside) return;
     closeMenu();
   };
-  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment();
-  const itemToString = itemToStringProp ?? defaultItemToString;
-  const itemToKey = itemToKeyProp ?? defaultItemToKey;
+  const { ref: wrapperDivRef, environment } = useDownshiftEnvironment$1();
+  const itemToString = itemToStringProp ?? defaultItemToString$1;
+  const itemToKey = itemToKeyProp ?? defaultItemToKey$1;
   const { groups, orderedItems } = useGroups({ items, groupBy, groupToString });
   const {
     getSelectedItemProps,
@@ -10511,4 +10315,4 @@ const Combobox = Object.assign(ComboboxElement, {
 });
 
 export { Combobox as C, ComboboxElement as a, ComboboxSelect as b, ComboboxContent as c, ComboboxSearchField as d, ComboboxSelectTrigger as e, ComboboxList as f, ComboboxItem as g, ComboboxItemAddNew as h, ComboboxEmpty as i, useInfiniteCombobox as u };
-//# sourceMappingURL=Combobox-7ADxZKDE.js.map
+//# sourceMappingURL=Combobox-C7nV-w8I.js.map