@multiplatform.one/forms 6.1.0 → 6.4.0

package/dist/esm/fields/Combobox/index.mjs

@@ -1,10 +1,12 @@
 import { Fragment, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, memo } from "react";
+import { useTranslation } from "react-i18next";
 import { CaretDownIcon, CheckIcon, MagnifyingGlassIcon, PlusIcon, XIcon } from "@phosphor-icons/react";
 import { useClick, useDismiss, useInteractions, useListNavigation, useRole, FloatingFocusManager } from "@floating-ui/react";
+import { Pressable as RNPressable } from "react-native-web";
 import { Input as TInput, Text, View, XStack, YStack, isWeb, styled, useTheme } from "tamagui";
 import { Chip } from "../../Chip/index.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
-import { Field, FieldLayout } from "../../fieldLayout.mjs";
+import { Field, FieldLayout, useFieldA11y, useFieldDescribedBy } from "../../fieldLayout.mjs";
 import { Input as InputParts } from "../../InputParts/index.mjs";
 import { Spinner } from "../../Spinner/index.mjs";
 import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
@@ -160,10 +162,32 @@ const ComboboxItem = memo(function ComboboxItem2({
         backgroundColor: isSelected ? formInputColors.background.base : formInputColors.background.focus
       }
     }),
+    ...(option.description ?
+    // Two-line rows need to grow past the size-variant height.
+    {
+      height: "auto",
+      paddingVertical: "$2"
+    } : void 0),
     ...(ctx.knobProps.transition ? {
       animation: ctx.knobProps.transition
     } : void 0),
-    children: [/* @__PURE__ */jsx(Text, {
+    children: [option.description ? /* @__PURE__ */jsxs(YStack, {
+      flex: 1,
+      minWidth: 0,
+      children: [/* @__PURE__ */jsx(Text, {
+        fontFamily: ctx.knobProps.body.fontFamily,
+        fontWeight: ctx.knobProps.body.fontWeight,
+        color: ctx.textColor,
+        numberOfLines: 1,
+        children: option.label
+      }), /* @__PURE__ */jsx(Text, {
+        fontFamily: ctx.knobProps.body.fontFamily,
+        fontSize: "$2",
+        color: formCommonColors.muted,
+        numberOfLines: 1,
+        children: option.description
+      })]
+    }) : /* @__PURE__ */jsx(Text, {
       fontFamily: ctx.knobProps.body.fontFamily,
       fontWeight: ctx.knobProps.body.fontWeight,
       color: ctx.textColor,
@@ -185,10 +209,15 @@ function FloatingComboboxCore({
   emptyMessage,
   onSearch,
   loading,
+  searchError,
+  valueLabel,
+  clearable,
   onLoadMore,
   hasMore,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   tabIndexOverride,
   popoverWidth,
   trigger: triggerRender,
@@ -203,7 +232,11 @@ function FloatingComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  const {
+    t
+  } = useTranslation();
   const inTableCell = useIsInTableCell();
+  const describedBy = useFieldDescribedBy();
   const [internalOpen, setInternalOpen] = useState(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = useCallback(nextOpen => {
@@ -745,6 +778,9 @@ function FloatingComboboxCore({
   boxEventProps.role = "combobox";
   boxEventProps["aria-haspopup"] = "listbox";
   boxEventProps["aria-expanded"] = open;
+  if (id) boxEventProps.id = id;
+  if (ariaLabel) boxEventProps["aria-label"] = ariaLabel;else if (hasLabel && id) boxEventProps["aria-labelledby"] = `${id}-label`;else if (placeholder) boxEventProps["aria-label"] = placeholder;
+  if (describedBy) boxEventProps["aria-describedby"] = describedBy;
   const totalNavigableItems = sortedFiltered.length + (showCreateOption ? 1 : 0);
   const createOptionIndex = showCreateOption ? sortedFiltered.length : -1;
   const handleItemKeyDown = useCallback((e, _index) => {
@@ -811,6 +847,7 @@ function FloatingComboboxCore({
         setOpen(false);
       }
     } else if (event.key === "Escape") {
+      event.preventDefault();
       setOpen(false);
     }
   }, [sortedFiltered, activeIndex, handleSelect, handleCreate, totalNavigableItems, createOptionIndex, showCreateOption, multiple]);
@@ -847,18 +884,33 @@ function FloatingComboboxCore({
     });
     return () => cancelAnimationFrame(rafId);
   }, [activeIndex, multiple ? value : void 0]);
-  const triggerContent = triggerRender ? /* @__PURE__ */jsx(View, {
+  const triggerContent = triggerRender ?
+  // Stretch so custom triggers (e.g. Awesomebar) can own their height
+  // instead of collapsing inside a shrink-wrapped View (SB-M-1703).
+  /* @__PURE__ */
+  jsx(View, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
+    width: "100%",
+    alignSelf: "stretch",
+    flexShrink: 0,
+    style: {
+      display: "flex",
+      alignItems: "stretch",
+      width: "100%"
+    },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */jsxs(InputParts.Box, {
     ...boxEventProps,
     "data-testid": "combobox-trigger",
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
     disabled,
     size: knobProps.sizeToken,
-    ...(inTableCell ? {} : {
+    ...(inTableCell ?
+    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+    {
+      minHeight: 44
+    } : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
@@ -868,7 +920,6 @@ function FloatingComboboxCore({
       flex: 1,
       paddingHorizontal: "$3",
       paddingVertical: "$2",
-      id,
       justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
@@ -892,13 +943,35 @@ function FloatingComboboxCore({
       }) : /* @__PURE__ */jsx(Text, {
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
-        color: selectedOption ? textColor : formCommonColors.muted,
+        color: selectedOption || !multiple && value && valueLabel ? textColor : formCommonColors.muted,
         numberOfLines: 1,
         userSelect: "none",
-        children: selectedOption?.label ?? placeholder
+        children: selectedOption?.label ?? (!multiple && value && valueLabel ? valueLabel : placeholder)
+      })
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */jsx(View, {
+      paddingInlineEnd: "$1",
+      alignSelf: "center",
+      cursor: "pointer",
+      role: "button",
+      tabIndex: -1,
+      "aria-label": t("Clear"),
+      opacity: 0.6,
+      hoverStyle: {
+        opacity: 1
+      },
+      onMouseDown: e => {
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onPress: e => {
+        e.stopPropagation?.();
+        onValueChange?.("");
+      },
+      children: /* @__PURE__ */jsx(XIcon, {
+        size: 14
       })
     }), /* @__PURE__ */jsx(View, {
-      paddingRight: "$2",
+      paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */jsx(CaretDownIcon, {
         size: 16
@@ -987,7 +1060,17 @@ function FloatingComboboxCore({
             scrollRef: listScrollRef,
             visible: panel.arrowUp,
             arrowScrollDirRef: panel.arrowScrollDirRef
-          }), sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
+          }), searchError ? /* @__PURE__ */jsx(View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */jsx(Text, {
+              color: formCommonColors.error,
+              fontSize: "$3",
+              fontFamily: knobProps.body.fontFamily,
+              fontWeight: knobProps.body.fontWeight,
+              children: searchError
+            })
+          }) : sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment, {
             children: [multiple ? sortedFiltered.map((option, index) => /* @__PURE__ */jsx(ComboboxItem, {
               option,
               index,
@@ -1064,6 +1147,16 @@ function FloatingComboboxCore({
               flex: 1,
               children: createLabel.replace("{value}", filter.trim())
             })]
+          }) : loading ?
+          // Async search in flight with nothing loaded yet: a bounded
+          // loading row — never a premature "no results".
+          /* @__PURE__ */
+          jsx(View, {
+            ...knobProps.panelPadding,
+            alignItems: "center",
+            children: /* @__PURE__ */jsx(Spinner, {
+              size: "small"
+            })
           }) : /* @__PURE__ */jsx(View, {
             ...knobProps.panelPadding,
             alignItems: "center",
@@ -1105,6 +1198,9 @@ const comboboxSearchHeader = (knobProps, filter, setFilter, searchPlaceholder, t
     unstyled: true,
     flex: 1,
     placeholder: searchPlaceholder,
+    ...(!isWeb ? {
+      accessibilityLabel: searchPlaceholder
+    } : void 0),
     value: filter,
     onChangeText: setFilter,
     onKeyDown,
@@ -1133,10 +1229,15 @@ function NativeComboboxCore({
   emptyMessage,
   onSearch,
   loading,
+  searchError,
+  valueLabel,
+  clearable,
   onLoadMore,
   hasMore,
   disabled,
   id,
+  "aria-label": ariaLabel,
+  hasLabel,
   trigger: triggerRender,
   knobProps,
   multiple,
@@ -1149,7 +1250,11 @@ function NativeComboboxCore({
   open: openProp,
   onOpenChange
 }) {
+  const {
+    t
+  } = useTranslation();
   const inTableCell = useIsInTableCell();
+  const describedBy = useFieldDescribedBy();
   const [internalOpen, setInternalOpen] = useState(false);
   const open = openProp !== void 0 ? openProp : internalOpen;
   const setOpen = useCallback(nextOpen => {
@@ -1163,6 +1268,7 @@ function NativeComboboxCore({
   const filter = searchValue !== void 0 ? searchValue : internalFilter;
   const [activeIndex, setActiveIndex] = useState(0);
   const listRef = useRef(null);
+  const fieldA11y = useFieldA11y();
   const textColor = knobProps.textAccentColor;
   const theme = useTheme();
   const mutedColor = theme.color7?.val ?? "$color7";
@@ -1207,7 +1313,7 @@ function NativeComboboxCore({
     }
     setInternalFilter("");
   }, [onCreate, filter, multiple, value, onValueChange]);
-  const hasScrollableContent = filtered.length > 6;
+  const hasScrollableContent = Boolean(onSearch) || filtered.length > 6;
   const sheetTransition = knobProps.transition ?? "medium";
   const sortedFiltered = useMemo(() => {
     if (filter.trim()) return filtered;
@@ -1329,49 +1435,98 @@ function NativeComboboxCore({
     if (!val) onBlur?.();
   }, [onBlur]);
   const searchHeader = hideSearch ? void 0 : comboboxSearchHeader(knobProps, filter, setInternalFilter, searchPlaceholder, textColor, mutedColor, loading ?? false, handleSearchKeyDown);
-  const listContent = /* @__PURE__ */jsxs(View, {
+  const listContent =
+  // tabIndex/onKeyDown are web-only: on iOS tabIndex makes the container an
+  // accessibility element, which merges every option into one unactionable
+  // VoiceOver blob.
+  /* @__PURE__ */
+  jsxs(View, {
     ref: listRef,
-    tabIndex: 0,
-    onKeyDown: handleListKeyDown,
+    ...(isWeb ? {
+      tabIndex: 0,
+      onKeyDown: handleListKeyDown
+    } : void 0),
     outlineStyle: "none",
-    flex: 1,
-    children: [sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment2, {
+    children: [searchError ? /* @__PURE__ */jsx(View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */jsx(Text, {
+        color: formCommonColors.error,
+        fontSize: "$3",
+        fontFamily: knobProps.body.fontFamily,
+        fontWeight: knobProps.body.fontWeight,
+        children: searchError
+      })
+    }) : sortedFiltered.length > 0 ? /* @__PURE__ */jsxs(Fragment2, {
       children: [sortedFiltered.map((option, i) => {
         const selected = isSelectedFn(option.value);
         const active = i === activeIndex;
         const prevGroup = i > 0 ? sortedFiltered[i - 1].group : void 0;
         const showGroupHeader = option.group && option.group !== prevGroup;
-        return /* @__PURE__ */jsxs(View, {
-          children: [showGroupHeader && /* @__PURE__ */jsx(GroupHeader, {
-            color: textColor,
-            children: option.group
-          }), /* @__PURE__ */jsxs(View, {
-            flexDirection: "row",
-            alignItems: "center",
-            gap: "$2",
-            paddingHorizontal: "$3",
-            height: knobProps.sizeToken,
-            onPress: () => handleSelect(option),
-            onMouseEnter: () => setActiveIndex(i),
-            hoverStyle: activeIndex != null ? {
-              backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
-            } : {
-              backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
-            },
-            backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
-            pressStyle: {
-              backgroundColor: formInputColors.background.focus
-            },
+        const optionRow = /* @__PURE__ */jsxs(View, {
+          flexDirection: "row",
+          alignItems: "center",
+          gap: "$2",
+          paddingHorizontal: "$3",
+          ...(option.description ? {
+            minHeight: knobProps.sizeToken,
+            paddingVertical: "$2"
+          } : {
+            height: knobProps.sizeToken
+          }),
+          onPress: isWeb ? () => handleSelect(option) : void 0,
+          onMouseEnter: () => setActiveIndex(i),
+          ...(!isWeb ? {
+            pointerEvents: "none"
+          } : {}),
+          hoverStyle: activeIndex != null ? {
+            backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent"
+          } : {
+            backgroundColor: selected ? formInputColors.background.base : formInputColors.background.focus
+          },
+          backgroundColor: active ? formInputColors.background.focus : selected ? formInputColors.background.base : "transparent",
+          pressStyle: {
+            backgroundColor: formInputColors.background.focus
+          },
+          children: [option.description ? /* @__PURE__ */jsxs(YStack, {
+            flex: 1,
+            minWidth: 0,
             children: [/* @__PURE__ */jsx(Text, {
               fontFamily: knobProps.body.fontFamily,
               fontWeight: knobProps.body.fontWeight,
               color: textColor,
               numberOfLines: 1,
-              flex: 1,
               children: option.label
-            }), selected && /* @__PURE__ */jsx(CheckIcon, {
-              size: 14
+            }), /* @__PURE__ */jsx(Text, {
+              fontFamily: knobProps.body.fontFamily,
+              fontSize: "$2",
+              color: formCommonColors.muted,
+              numberOfLines: 1,
+              children: option.description
             })]
+          }) : /* @__PURE__ */jsx(Text, {
+            fontFamily: knobProps.body.fontFamily,
+            fontWeight: knobProps.body.fontWeight,
+            color: textColor,
+            numberOfLines: 1,
+            flex: 1,
+            children: option.label
+          }), selected && /* @__PURE__ */jsx(CheckIcon, {
+            size: 14
+          })]
+        });
+        return /* @__PURE__ */jsxs(View, {
+          children: [showGroupHeader && /* @__PURE__ */jsx(GroupHeader, {
+            color: textColor,
+            children: option.group
+          }), isWeb ? optionRow : /* @__PURE__ */jsx(RNPressable, {
+            onPress: () => handleSelect(option),
+            accessibilityRole: "button",
+            accessibilityLabel: option.label,
+            accessibilityState: {
+              selected
+            },
+            children: optionRow
           })]
         }, option.value);
       }), showCreateOption && /* @__PURE__ */jsxs(View, {
@@ -1431,6 +1586,16 @@ function NativeComboboxCore({
         flex: 1,
         children: createLabel.replace("{value}", filter.trim())
       })]
+    }) : loading ?
+    // Async search in flight with nothing loaded yet: a bounded loading
+    // row — never a premature "no results".
+    /* @__PURE__ */
+    jsx(View, {
+      ...knobProps.panelPadding,
+      alignItems: "center",
+      children: /* @__PURE__ */jsx(Spinner, {
+        size: "small"
+      })
     }) : /* @__PURE__ */jsx(View, {
       ...knobProps.panelPadding,
       alignItems: "center",
@@ -1451,18 +1616,42 @@ function NativeComboboxCore({
   });
   const triggerContent = triggerRender ? /* @__PURE__ */jsx(View, {
     "data-testid": "combobox-trigger",
+    width: "100%",
+    alignSelf: "stretch",
+    flexShrink: 0,
+    style: {
+      display: "flex",
+      alignItems: "stretch",
+      width: "100%"
+    },
     children: triggerRender(multiple ? selectedOptions : selectedOption, open)
   }) : /* @__PURE__ */jsxs(InputParts.Box, {
     "data-testid": "combobox-trigger",
     cursor: disabled ? "not-allowed" : "pointer",
-    opacity: disabled ? 0.5 : 1,
     disabled,
     size: knobProps.sizeToken,
-    ...(inTableCell ? {} : {
+    ...(inTableCell ?
+    // Chromeless in cells, but keep a ≥44px pressable target (SP-FIXED).
+    {
+      minHeight: 44
+    } : {
       borderRadius: knobProps.borderRadius.borderRadius,
       borderWidth: knobProps.borderRadius.borderWidth
     }),
-    tabIndex: disabled ? -1 : 0,
+    id,
+    ...(isWeb ? {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": open,
+      // Standalone (no label): fall back to placeholder for the name
+      "aria-label": ariaLabel ?? (!hasLabel ? placeholder : void 0),
+      "aria-labelledby": !ariaLabel && hasLabel && id ? `${id}-label` : void 0,
+      "aria-describedby": describedBy,
+      tabIndex: disabled ? -1 : 0
+    } : {
+      importantForAccessibility: "no"
+    }),
+    onPress: isWeb && !disabled ? () => handleOpenChange(!open) : void 0,
     onKeyDown: e => {
       if (["Enter", " ", "ArrowDown", "ArrowUp", "j", "k"].includes(e.key) || e.code === "Space") {
         e.preventDefault();
@@ -1473,7 +1662,6 @@ function NativeComboboxCore({
       flex: 1,
       paddingHorizontal: "$3",
       paddingVertical: "$2",
-      id,
       justifyContent: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       alignItems: multiple && selectedValues.length > 0 ? "center" : "flex-start",
       children: multiple && selectedValues.length > 0 ? /* @__PURE__ */jsx(View, {
@@ -1497,23 +1685,48 @@ function NativeComboboxCore({
       }) : /* @__PURE__ */jsx(Text, {
         fontFamily: knobProps.body.fontFamily,
         fontWeight: knobProps.body.fontWeight,
-        color: selectedOption ? textColor : formCommonColors.muted,
+        color: selectedOption || !multiple && value && valueLabel ? textColor : formCommonColors.muted,
         numberOfLines: 1,
-        children: selectedOption?.label ?? placeholder
+        children: selectedOption?.label ?? (!multiple && value && valueLabel ? valueLabel : placeholder)
+      })
+    }), clearable && !multiple && !disabled && typeof value === "string" && value !== "" && /* @__PURE__ */jsx(View, {
+      paddingInlineEnd: "$1",
+      alignSelf: "center",
+      cursor: "pointer",
+      role: "button",
+      tabIndex: -1,
+      "aria-label": t("Clear"),
+      opacity: 0.6,
+      hoverStyle: {
+        opacity: 1
+      },
+      onPress: e => {
+        e.stopPropagation?.();
+        onValueChange?.("");
+      },
+      children: /* @__PURE__ */jsx(XIcon, {
+        size: 14
       })
     }), /* @__PURE__ */jsx(View, {
-      paddingRight: "$2",
+      paddingInlineEnd: "$2",
       alignSelf: "center",
       children: /* @__PURE__ */jsx(CaretDownIcon, {
         size: 16
       })
     })]
   });
+  const triggerValueText = multiple ? selectedValues.length > 0 ? selectedValues.map(getLabel).join(", ") : placeholder : selectedOption?.label ?? placeholder;
   return /* @__PURE__ */jsx(FloatingPanel, {
     open,
     onOpenChange: handleOpenChange,
     sheet: true,
+    sheetFill: Boolean(onSearch),
     trigger: triggerContent,
+    triggerA11y: {
+      label: ariaLabel ?? fieldA11y?.label,
+      value: triggerValueText,
+      hint: fieldA11y?.description
+    },
     header: searchHeader,
     scrollable: hasScrollableContent,
     disabled,
@@ -1540,12 +1753,16 @@ function Combobox({
   options,
   value: valueProp,
   defaultValue,
+  onChange,
   onValueChange,
-  placeholder = "Select...",
-  searchPlaceholder = "Search...",
-  emptyMessage = "No results found.",
+  placeholder: placeholderProp,
+  searchPlaceholder: searchPlaceholderProp,
+  emptyMessage: emptyMessageProp,
   onSearch,
   loading,
+  searchError,
+  valueLabel,
+  clearable,
   onLoadMore,
   hasMore,
   trigger,
@@ -1575,8 +1792,16 @@ function Combobox({
   searchValue,
   open,
   onOpenChange,
+  "aria-label": ariaLabel,
   ...rest
 }) {
+  const {
+    t
+  } = useTranslation();
+  const placeholder = placeholderProp ?? t("Select...");
+  const hasLabel = Boolean(label);
+  const searchPlaceholder = searchPlaceholderProp ?? t("Search...");
+  const emptyMessage = emptyMessageProp ?? t("No results found.");
   const {
     resolvedForm,
     knobProps,
@@ -1587,6 +1812,8 @@ function Combobox({
     compact
   });
   const resolvedValidators = useResolvedValidators(required, validators, label, name);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const isControlled = valueProp !== void 0;
   const viewportGtSm = useViewportGtSm();
   const effectiveGtSm = typeof window !== "undefined" ? viewportGtSm : false;
   const shouldUseSheet = !isWeb || !effectiveGtSm;
@@ -1620,7 +1847,7 @@ function Combobox({
     }
     const sv = typeof selectValue === "string" ? selectValue : void 0;
     const selected = options.find(option => option.value === sv);
-    const displayText = selected?.label ?? (sv || "-");
+    const displayText = selected?.label ?? (sv ? valueLabel ?? sv : "-");
     return /* @__PURE__ */jsx(Text, {
       fontSize: knobProps.sizeToken,
       color: textColor,
@@ -1640,6 +1867,7 @@ function Combobox({
       onValueChange: value => {
         if (disabled) return;
         handleValueChange?.(value);
+        onChange?.(value);
         onValueChange?.(value);
       },
       onBlur: handleBlur,
@@ -1648,10 +1876,15 @@ function Combobox({
       emptyMessage,
       onSearch,
       loading,
+      searchError,
+      valueLabel,
+      clearable,
       onLoadMore,
       hasMore,
       disabled,
       id,
+      "aria-label": ariaLabel,
+      hasLabel,
       tabIndexOverride: tabIndexProp,
       popoverWidth,
       trigger,
@@ -1668,7 +1901,7 @@ function Combobox({
     });
   };
   if (trigger) {
-    return renderComboboxContent(valueProp, onValueChange, onBlur);
+    return renderComboboxContent(valueProp ?? uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur);
   }
   if (!resolvedForm || !name) {
     return /* @__PURE__ */jsx(FieldLayout, {
@@ -1680,10 +1913,11 @@ function Combobox({
       required,
       size: sizeProp,
       knobProps,
+      disabled,
       ...rest,
       children: /* @__PURE__ */jsx(InputParts, {
         size: sizeProp || knobProps.sizeToken,
-        children: renderComboboxContent(valueProp ?? defaultValue, onValueChange, onBlur)
+        children: renderComboboxContent(valueProp ?? uncontrolledValue, isControlled ? void 0 : setUncontrolledValue, onBlur)
       })
     });
   }
@@ -1703,6 +1937,7 @@ function Combobox({
         required,
         size: sizeProp,
         knobProps,
+        disabled,
         ...rest,
         children: /* @__PURE__ */jsx(InputParts, {
           size: sizeProp || knobProps.sizeToken,