pixelize-native-library 1.0.7 → 1.2.1

package/lib/module/modules/combobox/Combobox.js

@@ -0,0 +1,623 @@
+"use strict";
+
+/**
+ * Combobox — a searchable/filterable select. A NEW module rather than a `searchable` prop on
+ * `select`: the interaction model differs materially (a text input owns focus, results filter live,
+ * there is an async/loading path, and there is a "no results" state) — bolting that onto `Select`
+ * would double its complexity for every existing caller who never needs search.
+ *
+ * Structurally it mirrors `Select`/`MultiSelect`: a trigger field that opens an option list in React
+ * Native's OWN `Modal`, imported directly from `"react-native"` on purpose — this module must never
+ * depend on the library's own `Modal` COMPONENT, and (like every sibling picker) never imports
+ * another module's component either, with two narrow, deliberate exceptions:
+ *
+ *  1. The web portal mechanism — `ModalPortalContext`/`renderWebPortal` are a plain context + a
+ *     stateless helper with no React-tree footprint of their own (not the `Modal` component), so
+ *     Combobox reads the same ones `Modal.tsx`/`Select.tsx`/`MultiSelect.tsx` read to stay consistent
+ *     once a consumer opts in via `ModalPortalProvider`.
+ *  2. `Spinner` for the list's loading state — a small, dependency-free leaf component this library
+ *     already reuses directly across modules (e.g. `SearchBar`), unlike the heavier, stateful
+ *     components (`Modal`, `Checkbox`'s row indicator) every sibling picker duplicates instead.
+ *
+ * The search field is its OWN local `TextInput` — it does NOT import this library's `Input`. This
+ * mirrors `SearchBar`'s own documented precedent for the identical tension: `Input` exposes no
+ * `autoFocus`/ref surface (it isn't `forwardRef`, and accepts no `{...rest}` per this library's API
+ * contract), so a field that must genuinely autofocus when the sheet opens cannot be built on top of
+ * it. Reusing `Input`'s exact size/role-colour contract (never its component) keeps this module
+ * consistent with the rest of the library while still delivering the autofocus the spec calls for.
+ *
+ * The trigger's focus/open indicator is `Input`'s offset ring (drawn outside the field, on the
+ * canvas), not `Select`/`MultiSelect`'s older border-colour swap — their own docs already flag that
+ * swap as provisional, pending reconciliation with `Input`'s newer, now-current convention. Combining
+ * a border swap AND a ring would double-signal the same state, so the trigger border here is
+ * `error`-driven only (see `Combobox.variants.ts`).
+ */
+
+import { memo, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Animated, Modal, Platform, Pressable, StyleSheet, Text, TextInput, View } from "react-native";
+import Reanimated, { FadeInDown, ReduceMotion } from "react-native-reanimated";
+import { useAnnounce } from "../../core/a11y/index.js";
+import { useDismissOnEscape, useFocusTrap, useSpaceActivation } from "../../core/a11y/keyboard";
+import { Icon } from "../../core/icon/index.js";
+import { VirtualList } from "../../core/list/index.js";
+import { useMotion, usePressMotion, useReveal } from "../../core/motion/index.js";
+import { elevation, floatingBackground, floatingSurfaceStyle, highlight, rippleColor } from "../../theme/platform/index.js";
+import { elevation as elevationTokens } from "../../theme/tokens/primitives/index.js";
+import { useTheme } from "../../theme/hooks.js";
+import { ModalPortalContext } from "../modal/ModalPortalContext.js";
+import { renderWebPortal } from "../modal/renderWebPortal";
+import { Spinner } from "../spinner/index.js";
+import { useComboboxKeys } from "./comboboxKeys";
+import { COMBOBOX_CLEAR_BUTTON_HIT_SLOP, COMBOBOX_FIELD_FONT_SIZE, COMBOBOX_FIELD_HIT_SLOP, COMBOBOX_FIELD_ICON_SIZE, COMBOBOX_LISTBOX_ROLE, COMBOBOX_ROW_ICON_SIZE, comboboxOptionNativeId, DEFAULT_EMPTY_MESSAGE, DEFAULT_MAX_HEIGHT, DEFAULT_PLACEHOLDER, DEFAULT_SEARCH_PLACEHOLDER, FILTER_DEBOUNCE_MS, SEARCH_DEBOUNCE_MS, comboboxClearButtonStructure, comboboxFieldStructure, comboboxFieldValueStructure, comboboxListStateStructure, comboboxOverlayStructure, comboboxRowStructure, comboboxRowTextStructure, comboboxSearchRowStructure, comboboxSheetStructure, COMBOBOX_ROW_MIN_HEIGHT, normalizeForSearch, resolveComboboxAccessibility, resolveComboboxErrorTextColor, resolveComboboxRowAccessibility, resolveComboboxRowColors, resolveComboboxSummary, resolveComboboxTriggerColors } from "./Combobox.variants.js";
+
+/**
+ * A discriminated union, not one flat interface with every field optional: `multiple: true` requires
+ * `values`/`onValuesChange`, the default (`multiple` absent/`false`) requires `value`/`onChange` — a
+ * caller can never wire the wrong pair for the active mode and have it silently do nothing.
+ */
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ICON_STROKE = 2;
+const FOCUS_RING_WIDTH = 2;
+const FOCUS_RING_GAP = 2;
+// Decorative dismiss scrim behind the sheet — a design constant, not a role token: it is neither
+// text nor an interactive boundary, so WCAG's contrast minimums don't apply to it.
+const BACKDROP_SCRIM = "#00000099";
+const ComboboxOptionRow = /*#__PURE__*/memo(function ComboboxOptionRow({
+  option,
+  selected,
+  active,
+  nativeID,
+  theme,
+  rowColors,
+  onSelect,
+  testID
+}) {
+  const rowDisabled = option.disabled === true;
+  const motion = useMotion();
+  const press = usePressMotion(rowDisabled);
+  const checkOpacity = useRef(new Animated.Value(selected ? 1 : 0)).current;
+  const skipFirst = useRef(true);
+  const running = useRef(null);
+
+  // Skipping the first pass keeps an already-selected row scrolling into view from animating.
+  useEffect(() => {
+    running.current?.stop();
+    if (skipFirst.current) {
+      skipFirst.current = false;
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    if (!motion.enabled) {
+      checkOpacity.setValue(selected ? 1 : 0);
+      return;
+    }
+    running.current = motion.timing(checkOpacity, selected ? 1 : 0, {
+      duration: "fast"
+    });
+    running.current.start();
+    return () => running.current?.stop();
+  }, [selected, motion, checkOpacity]);
+  useEffect(() => () => running.current?.stop(), []);
+  const rowA11y = useMemo(() => resolveComboboxRowAccessibility({
+    selected,
+    disabled: rowDisabled
+  }), [selected, rowDisabled]);
+  const handlePress = useCallback(() => onSelect(option.value), [onSelect, option.value]);
+
+  // The keyboard-active row must read as highlighted without the browser's focus ring, since focus
+  // never leaves the search field in this pattern. `pressedRow` is the tint already measured for it.
+  const pressableStyle = useCallback(({
+    pressed
+  }) => [{
+    backgroundColor: pressed || active ? rowColors.pressedRow : rowColors.background
+  }, rowDisabled && styles.dimmed], [rowColors.pressedRow, rowColors.background, rowDisabled, active]);
+  const contentStyle = useMemo(() => [comboboxRowStructure(theme), press.style], [theme, press.style]);
+  const androidRipple = useMemo(() => Platform.OS === "android" && !rowDisabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [rowDisabled, theme.mode]);
+  const textWrapStyle = useMemo(() => comboboxRowTextStructure(theme), [theme]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.md,
+    color: rowColors.text
+  }], [theme, rowColors.text]);
+  const descriptionStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: rowColors.muted
+  }], [theme, rowColors.muted]);
+  const checkStyle = useMemo(() => ({
+    opacity: checkOpacity
+  }), [checkOpacity]);
+  return /*#__PURE__*/_jsx(Pressable, {
+    testID: testID ? `${testID}-option-${option.value}` : undefined,
+    nativeID: nativeID,
+    accessibilityRole: rowA11y.accessibilityRole,
+    "aria-selected": rowA11y["aria-selected"],
+    "aria-disabled": rowA11y["aria-disabled"],
+    disabled: rowA11y.disabled
+    // The search field is the only tab stop in the sheet — Tab must never step into the rows.
+    ,
+    tabIndex: -1,
+    onPress: handlePress,
+    onPressIn: press.onPressIn,
+    onPressOut: press.onPressOut,
+    android_ripple: androidRipple,
+    style: pressableStyle,
+    children: /*#__PURE__*/_jsxs(Animated.View, {
+      testID: testID ? `${testID}-option-${option.value}-content` : undefined,
+      style: contentStyle,
+      children: [option.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+        name: option.icon,
+        size: COMBOBOX_ROW_ICON_SIZE,
+        color: rowColors.icon,
+        strokeWidth: ICON_STROKE
+      }), /*#__PURE__*/_jsxs(View, {
+        style: textWrapStyle,
+        children: [/*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: labelStyle,
+          children: option.label
+        }), option.description !== undefined && /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: descriptionStyle,
+          children: option.description
+        })]
+      }), selected && /*#__PURE__*/_jsx(Animated.View, {
+        testID: testID ? `${testID}-option-${option.value}-check` : undefined,
+        style: checkStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "check",
+          size: COMBOBOX_ROW_ICON_SIZE,
+          color: rowColors.checkIcon,
+          strokeWidth: ICON_STROKE
+        })
+      })]
+    })
+  });
+});
+export const Combobox = /*#__PURE__*/memo(function Combobox(props) {
+  const {
+    options,
+    placeholder = DEFAULT_PLACEHOLDER,
+    searchPlaceholder = DEFAULT_SEARCH_PLACEHOLDER,
+    label,
+    disabled = false,
+    error,
+    clearable = true,
+    loading = false,
+    emptyMessage = DEFAULT_EMPTY_MESSAGE,
+    onSearchChange,
+    filterFn,
+    maxHeight = DEFAULT_MAX_HEIGHT,
+    style,
+    testID
+  } = props;
+  const multiple = props.multiple === true;
+  const values = props.multiple === true ? props.values : undefined;
+  const value = props.multiple === true ? undefined : props.value;
+  const onValuesChange = props.multiple === true ? props.onValuesChange : undefined;
+  const onChange = props.multiple === true ? undefined : props.onChange;
+
+  // No `accessibilityLiveRegion` on the rendered error text: that prop is Android-only (iOS
+  // VoiceOver never hears it) and this hook already announces on both platforms.
+  useAnnounce(error);
+  const theme = useTheme();
+  const portalContainer = useContext(ModalPortalContext);
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [query, setQuery] = useState("");
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  const [activeIndex, setActiveIndex] = useState(0);
+  const searchTimerRef = useRef(undefined);
+  const filterTimerRef = useRef(undefined);
+  const searchInputRef = useRef(null);
+  const sheetRef = useRef(null);
+  const triggerRef = useRef(null);
+  const listId = useId();
+  const serverSide = onSearchChange !== undefined;
+  const reveal = useReveal(open);
+  useEffect(() => () => {
+    if (searchTimerRef.current !== undefined) clearTimeout(searchTimerRef.current);
+    if (filterTimerRef.current !== undefined) clearTimeout(filterTimerRef.current);
+  }, []);
+
+  // Only the derived list is debounced — `query` (the visible text) always updates on the keystroke.
+  useEffect(() => {
+    if (serverSide) return;
+    if (filterTimerRef.current !== undefined) clearTimeout(filterTimerRef.current);
+    filterTimerRef.current = setTimeout(() => {
+      filterTimerRef.current = undefined;
+      setDebouncedQuery(query);
+    }, FILTER_DEBOUNCE_MS);
+    return () => {
+      if (filterTimerRef.current !== undefined) clearTimeout(filterTimerRef.current);
+    };
+  }, [query, serverSide]);
+  const selectedValues = useMemo(() => values ?? (value == null ? [] : [value]), [values, value]);
+  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
+  const optionByValue = useMemo(() => new Map(options.map(option => [option.value, option])), [options]);
+  const singleSelectedOption = useMemo(() => value == null ? undefined : optionByValue.get(value), [value, optionByValue]);
+
+  /**
+   * The default filter's whole cost is `normalizeForSearch(option.label)` — NFD decomposition plus
+   * two allocations, per option, per keystroke. Normalizing once per `options` identity instead of
+   * once per pass measured 1.99 ms → 0.10 ms on 5000 options (a 20× win; hoisting only the query
+   * buys 1.3×). Deliberately NOT built for a caller-supplied `filterFn`: that one reads the raw
+   * `label`, so it must keep the per-option path.
+   */
+  const normalizedLabels = useMemo(() => serverSide || filterFn !== undefined ? [] : options.map(option => normalizeForSearch(option.label)), [serverSide, filterFn, options]);
+  const filteredOptions = useMemo(() => {
+    if (serverSide) return options;
+    if (filterFn !== undefined) return options.filter(option => filterFn(option, debouncedQuery));
+    const trimmed = debouncedQuery.trim();
+    if (trimmed === "") return options;
+    const needle = normalizeForSearch(trimmed);
+    return options.filter((_, index) => normalizedLabels[index]?.includes(needle) === true);
+  }, [serverSide, options, filterFn, debouncedQuery, normalizedLabels]);
+
+  /**
+   * `itemHeight` derives `getItemLayout`, whose offsets are only exact when every row really is
+   * that tall — and a row with a `description` computes to ≈54dp, not 44. Over thousands of options
+   * that error compounds into blank gaps and a scrollbar that lies, so the uniform fast path is
+   * taken only when it is actually true; otherwise the list measures (`core/MODULE.md`).
+   */
+  const uniformRowHeight = useMemo(() => options.every(option => option.description === undefined), [options]);
+  const triggerColors = useMemo(() => resolveComboboxTriggerColors(theme.colors, {
+    error: error !== undefined
+  }), [theme.colors, error]);
+  const rowColors = useMemo(() => resolveComboboxRowColors(theme.colors), [theme.colors]);
+  const a11y = useMemo(() => resolveComboboxAccessibility({
+    disabled,
+    open
+  }), [disabled, open]);
+  const summaryText = useMemo(() => resolveComboboxSummary({
+    options,
+    selectedValues,
+    placeholder
+  }), [options, selectedValues, placeholder]);
+  const isPlaceholder = selectedValues.length === 0;
+  const showClear = clearable && !disabled && selectedValues.length > 0;
+  const accessibleName = label !== undefined ? summaryText ? `${label}, ${summaryText}` : label : undefined;
+  const showFocusRing = (focused || open) && !disabled;
+  const openSheet = useCallback(() => {
+    if (disabled) return;
+    // Opening lands the keyboard on the SELECTED option, not the first one (WCAG 2.4.3).
+    const selectedIndex = options.findIndex(option => selectedSet.has(option.value));
+    setActiveIndex(selectedIndex === -1 ? 0 : selectedIndex);
+    setOpen(true);
+  }, [disabled, options, selectedSet]);
+  const closeSheet = useCallback(() => {
+    setOpen(false);
+    setQuery("");
+    setDebouncedQuery("");
+    if (searchTimerRef.current !== undefined) {
+      clearTimeout(searchTimerRef.current);
+      searchTimerRef.current = undefined;
+    }
+    if (filterTimerRef.current !== undefined) {
+      clearTimeout(filterTimerRef.current);
+      filterTimerRef.current = undefined;
+    }
+  }, []);
+  const selectOption = useCallback(optionValue => {
+    const option = optionByValue.get(optionValue);
+    if (option === undefined || option.disabled === true) return;
+    if (multiple) {
+      const next = selectedSet.has(optionValue) ? selectedValues.filter(v => v !== optionValue) : [...selectedValues, optionValue];
+      onValuesChange?.(next);
+      return;
+    }
+    onChange?.(optionValue);
+    closeSheet();
+  }, [optionByValue, multiple, selectedSet, selectedValues, onValuesChange, onChange, closeSheet]);
+
+  // A new result set invalidates the old highlight — the top match is what Enter should take.
+  useEffect(() => setActiveIndex(0), [debouncedQuery]);
+  const activateIndex = useCallback(index => {
+    const option = filteredOptions[index];
+    if (option !== undefined) selectOption(option.value);
+  }, [filteredOptions, selectOption]);
+
+  /**
+   * `aria-activedescendant`, NOT roving focus: DOM focus has to stay in the search field or typing
+   * stops working, so the arrows move only which option the field POINTS at. Every hook here is a
+   * no-op on native. Escape and the focus trap come from `core/a11y/keyboard`; the arrows come from
+   * this module's own `useComboboxKeys` (see `comboboxKeys.ts` for why the core one cannot be used).
+   */
+  useDismissOnEscape(open, closeSheet);
+  useFocusTrap(sheetRef, open);
+  useComboboxKeys(sheetRef, open, {
+    count: filteredOptions.length,
+    activeIndex,
+    onActiveIndexChange: setActiveIndex,
+    onActivate: activateIndex
+  });
+  // The trigger is `role="combobox"`, not `button`, so RNW never presses it on Space.
+  useSpaceActivation(triggerRef, openSheet, !disabled);
+  const activeOption = filteredOptions[activeIndex];
+  const activeOptionId = activeOption === undefined ? undefined : comboboxOptionNativeId(listId, activeOption.value);
+  const handleClear = useCallback(() => {
+    if (multiple) {
+      onValuesChange?.([]);
+      return;
+    }
+    onChange?.(null);
+  }, [multiple, onValuesChange, onChange]);
+  const handleFocus = useCallback(() => setFocused(true), []);
+  const handleBlur = useCallback(() => setFocused(false), []);
+  const handleModalShow = useCallback(() => searchInputRef.current?.focus(), []);
+
+  // Ref'd timeout, cleared on unmount above (empty deps) — never a dependency-array cleanup, so a
+  // keystroke mid-debounce can't leave a stale timer racing a newer one.
+  const handleQueryChange = useCallback(text => {
+    setQuery(text);
+    if (onSearchChange === undefined) return;
+    if (searchTimerRef.current !== undefined) clearTimeout(searchTimerRef.current);
+    searchTimerRef.current = setTimeout(() => {
+      searchTimerRef.current = undefined;
+      onSearchChange(text);
+    }, SEARCH_DEBOUNCE_MS);
+  }, [onSearchChange]);
+  const renderRow = useCallback(({
+    item: option,
+    index
+  }) => /*#__PURE__*/_jsx(ComboboxOptionRow, {
+    option: option,
+    selected: selectedSet.has(option.value),
+    active: index === activeIndex,
+    nativeID: comboboxOptionNativeId(listId, option.value),
+    theme: theme,
+    rowColors: rowColors,
+    onSelect: selectOption,
+    testID: testID
+  }), [selectedSet, activeIndex, listId, theme, rowColors, selectOption, testID]);
+  const keyExtractor = useCallback(option => option.value, []);
+  const containerStyle = useMemo(() => [styles.container, style], [style]);
+  const labelStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.medium), {
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.fg.muted,
+    marginBottom: theme.space[1]
+  }], [theme]);
+  const fieldStyle = useMemo(() => [comboboxFieldStructure(theme), {
+    backgroundColor: triggerColors.background,
+    borderColor: triggerColors.border
+  }, {
+    overflow: "hidden"
+  }, disabled && styles.dimmed], [theme, triggerColors.background, triggerColors.border, disabled]);
+  const triggerRipple = useMemo(() => Platform.OS === "android" && !disabled ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [disabled, theme.mode]);
+  const clearButtonRipple = useMemo(() => Platform.OS === "android" ? {
+    color: rippleColor(theme.mode),
+    borderless: false
+  } : undefined, [theme.mode]);
+  const focusRingStyle = useMemo(() => ({
+    position: "absolute",
+    top: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    left: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    right: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
+    borderWidth: FOCUS_RING_WIDTH,
+    borderColor: theme.colors.border.focus,
+    borderRadius: theme.radii.md + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+    borderCurve: "continuous"
+  }), [theme]);
+  const fieldValueStyle = useMemo(() => comboboxFieldValueStructure(theme), [theme]);
+  const summaryStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    flexShrink: 1,
+    fontSize: COMBOBOX_FIELD_FONT_SIZE,
+    color: isPlaceholder ? triggerColors.placeholder : triggerColors.text
+  }], [theme, isPlaceholder, triggerColors.placeholder, triggerColors.text]);
+  const clearButtonStyle = useMemo(() => [comboboxClearButtonStructure(theme), {
+    overflow: "hidden"
+  }], [theme]);
+  const errorTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.xs,
+    color: resolveComboboxErrorTextColor(theme.colors),
+    marginTop: theme.space[1]
+  }], [theme]);
+  const backdropStyle = useMemo(() => [StyleSheet.absoluteFill, {
+    backgroundColor: BACKDROP_SCRIM
+  }], []);
+  const overlayStyle = useMemo(() => comboboxOverlayStructure(theme), [theme]);
+  const sheetFloating = useMemo(() => {
+    highlight("subtle", theme.mode);
+    elevation(elevationTokens.md);
+    void theme.elevatedSurfaces;
+    return {
+      backgroundColor: floatingBackground(theme, "md"),
+      ...floatingSurfaceStyle(theme, "md")
+    };
+  }, [theme]);
+  const sheetSurfaceStyle = useMemo(() => [comboboxSheetStructure(theme), sheetFloating, {
+    maxHeight
+  }], [theme, sheetFloating, maxHeight]);
+  const sheetStyle = useMemo(() => [sheetSurfaceStyle, reveal.style], [sheetSurfaceStyle, reveal.style]);
+  const searchRowStyle = useMemo(() => [comboboxSearchRowStructure(theme), {
+    borderBottomColor: theme.colors.border.default
+  }], [theme]);
+  const searchInputStyle = useMemo(() => [{
+    flex: 1,
+    fontSize: theme.fontSizes.md,
+    color: rowColors.text,
+    padding: 0
+  }, theme.fontStyleForWeight(theme.fontWeights.regular), Platform.OS === "web" && styles.webOutlineReset], [theme, rowColors.text]);
+  const listStateStyle = useMemo(() => comboboxListStateStructure(theme), [theme]);
+  const emptyTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: rowColors.muted
+  }], [theme, rowColors.muted]);
+
+  // Built only while `open`: a closed sheet has no reason to mount the search field, fire every row's
+  // own icon, or run a filter pass just because the trigger is on screen.
+  const sheet = open ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      testID: testID ? `${testID}-backdrop` : undefined,
+      accessible: false,
+      tabIndex: -1,
+      style: backdropStyle,
+      onPress: closeSheet
+    }), /*#__PURE__*/_jsx(View, {
+      style: overlayStyle,
+      pointerEvents: "box-none",
+      children: /*#__PURE__*/_jsx(Reanimated.View, {
+        entering: FadeInDown.springify().reduceMotion(ReduceMotion.System),
+        children: /*#__PURE__*/_jsxs(Animated.View, {
+          ref: sheetRef,
+          style: sheetStyle,
+          children: [/*#__PURE__*/_jsxs(View, {
+            style: searchRowStyle,
+            children: [/*#__PURE__*/_jsx(Icon, {
+              name: "search",
+              size: COMBOBOX_FIELD_ICON_SIZE,
+              color: rowColors.icon,
+              strokeWidth: ICON_STROKE
+            }), /*#__PURE__*/_jsx(TextInput, {
+              ref: searchInputRef,
+              testID: testID ? `${testID}-search` : undefined,
+              value: query,
+              onChangeText: handleQueryChange,
+              placeholder: searchPlaceholder,
+              placeholderTextColor: rowColors.placeholder,
+              accessibilityLabel: searchPlaceholder
+              // Hyphenated JSX attributes are not type-checked at all, which is exactly why the id
+              // comes from `comboboxOptionNativeId` and is never interpolated here.
+              ,
+              "aria-activedescendant": activeOptionId,
+              autoFocus: true,
+              autoCapitalize: "none",
+              autoCorrect: false,
+              autoComplete: "off",
+              importantForAutofill: "no",
+              style: searchInputStyle
+            })]
+          }), loading ? /*#__PURE__*/_jsx(View, {
+            style: listStateStyle,
+            children: /*#__PURE__*/_jsx(Spinner, {
+              size: "md",
+              tone: "neutral",
+              testID: testID ? `${testID}-spinner` : undefined
+            })
+          }) : filteredOptions.length === 0 ? /*#__PURE__*/_jsx(View, {
+            style: listStateStyle,
+            children: /*#__PURE__*/_jsx(Text, {
+              accessibilityLiveRegion: Platform.OS === "android" ? "polite" : undefined,
+              style: emptyTextStyle,
+              children: emptyMessage
+            })
+          }) : /*#__PURE__*/_jsx(VirtualList, {
+            data: filteredOptions,
+            keyExtractor: keyExtractor,
+            renderItem: renderRow,
+            itemHeight: uniformRowHeight ? COMBOBOX_ROW_MIN_HEIGHT : undefined,
+            accessibilityRole: COMBOBOX_LISTBOX_ROLE
+            // The search field holds focus while the sheet is open, so the default `"never"`
+            // spends the first tap on any row dismissing the keyboard instead of selecting.
+            ,
+            keyboardShouldPersistTaps: "handled"
+          })]
+        })
+      })
+    })]
+  }) : null;
+
+  // Web portal opt-in — see Modal.tsx's/Select.tsx's identical branch + ModalPortalContext.ts. Every
+  // other case (native, or web with no ModalPortalProvider) renders through RN's own <Modal> below.
+  const menu = Platform.OS === "web" && portalContainer != null ? open ? renderWebPortal(/*#__PURE__*/_jsx(View, {
+    style: StyleSheet.absoluteFill,
+    pointerEvents: "box-none",
+    children: sheet
+  }), portalContainer) : null : /*#__PURE__*/_jsx(Modal, {
+    visible: open,
+    transparent: true,
+    statusBarTranslucent: true,
+    navigationBarTranslucent: true,
+    animationType: "none",
+    onRequestClose: closeSheet
+    // `autoFocus` on the search TextInput alone is timing-flaky inside a native Modal on iOS
+    // (the field can mount before the modal has finished presenting); `onShow` fires once RN
+    // confirms the modal is actually on screen, so this is the reliable native path.
+    ,
+    onShow: handleModalShow,
+    children: sheet
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: containerStyle,
+    children: [label !== undefined && /*#__PURE__*/_jsx(Text, {
+      style: labelStyle,
+      children: label
+    }), /*#__PURE__*/_jsxs(Pressable, {
+      ref: triggerRef,
+      testID: testID,
+      accessibilityRole: a11y.accessibilityRole,
+      accessibilityLabel: accessibleName,
+      "aria-disabled": a11y["aria-disabled"],
+      "aria-expanded": a11y["aria-expanded"],
+      disabled: a11y.disabled,
+      onPress: openSheet,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      hitSlop: COMBOBOX_FIELD_HIT_SLOP,
+      android_ripple: triggerRipple,
+      style: fieldStyle,
+      children: [showFocusRing && /*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        testID: testID ? `${testID}-focus-ring` : undefined,
+        style: focusRingStyle
+      }), /*#__PURE__*/_jsxs(View, {
+        style: fieldValueStyle,
+        children: [singleSelectedOption?.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+          name: singleSelectedOption.icon,
+          size: COMBOBOX_FIELD_ICON_SIZE,
+          color: triggerColors.icon,
+          strokeWidth: ICON_STROKE
+        }), /*#__PURE__*/_jsx(Text, {
+          numberOfLines: 1,
+          style: summaryStyle,
+          children: summaryText
+        })]
+      }), showClear && /*#__PURE__*/_jsx(Pressable, {
+        testID: testID ? `${testID}-clear` : undefined,
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear",
+        onPress: handleClear,
+        hitSlop: COMBOBOX_CLEAR_BUTTON_HIT_SLOP,
+        android_ripple: clearButtonRipple,
+        style: clearButtonStyle,
+        children: /*#__PURE__*/_jsx(Icon, {
+          name: "x",
+          size: COMBOBOX_FIELD_ICON_SIZE,
+          color: triggerColors.icon,
+          strokeWidth: ICON_STROKE
+        })
+      }), /*#__PURE__*/_jsx(Icon, {
+        name: "chevron-down",
+        size: COMBOBOX_FIELD_ICON_SIZE,
+        color: triggerColors.icon,
+        strokeWidth: ICON_STROKE
+      })]
+    }), error !== undefined && /*#__PURE__*/_jsx(Text, {
+      style: errorTextStyle,
+      children: error
+    }), menu]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    alignSelf: "stretch"
+  },
+  // A disabled control is exempt from the contrast minimum (WCAG 1.4.3), so a uniform dim is correct.
+  dimmed: {
+    opacity: 0.5
+  },
+  // RNW renders `TextInput` as a real `<input>`, which paints the browser's own default focus
+  // outline on top of the themed ring above it — a visible double border. Web-only: `outlineWidth`
+  // also drives native TV remote-control focus, so zeroing it globally would break that.
+  webOutlineReset: {
+    outlineStyle: "solid",
+    outlineWidth: 0,
+    borderWidth: 0
+  }
+});
+//# sourceMappingURL=Combobox.js.map