panelui-native 0.35.2 → 0.38.0

package/lib/module/components/combobox/index.js

@@ -0,0 +1,718 @@
+"use strict";
+
+/**
+ * Combobox — a text field that filters a list of options as you type.
+ *
+ * The difference from Select is where the typing happens, and it is not a
+ * detail: a Select is a button that opens a list, and its optional filter lives
+ * *inside* the list once it is open. A Combobox is the field itself. You are
+ * already typing when the options appear, which is what you want when the value
+ * is something you know the name of — a city, a repository, a tag — rather than
+ * something you expect to recognise by scrolling.
+ *
+ * ```tsx
+ * <Combobox value={framework} onValueChange={setFramework}>
+ *   <Combobox.Item value="expo" label="Expo" />
+ *   <Combobox.Item value="next" label="Next.js" />
+ * </Combobox>
+ * ```
+ *
+ * ## Two presentations, and why there is no sheet
+ *
+ * `overlay` (default) floats the list above the page through a portal, anchored
+ * under the field and flipped above it when the keyboard leaves no room below.
+ * `inline` expands the list in normal layout flow instead, which is right in a
+ * form where nothing should be covered.
+ *
+ * There is deliberately no sheet presentation. A sheet takes the bottom of the
+ * screen, which is exactly where the keyboard is, and the field you are typing
+ * into would end up behind one or the other. Select can offer a sheet because
+ * its trigger stops mattering once the list is open; a Combobox's never does.
+ *
+ * ## Filtering is yours to turn off
+ *
+ * Filtering happens here by default, matching case-insensitively on any part of
+ * an option's label. That is the whole feature for a list you already have in
+ * hand. When the options come from a server that is doing the matching itself,
+ * pass `filter={false}` and render whatever came back — the field stops second-
+ * guessing results it cannot see the query behind.
+ *
+ * ## Values it does not know about
+ *
+ * `allowCustomValue` lets the typed text become the value when it matches no
+ * option, which is how a tag field works: the list is a set of suggestions
+ * rather than the set of legal answers.
+ */
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, ScrollView, TextInput, useWindowDimensions, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import { tv } from 'tailwind-variants';
+import { useCSSVariable } from 'uniwind';
+import { CheckIcon, ChevronDownIcon, XIcon } from "../../icons/index.js";
+import { Portal } from "../../primitives/portal.js";
+import { Text, textChildren } from "../../primitives/text.js";
+import { useBackHandler } from "../../hooks/use-back-handler.js";
+import { useKeyboard } from "../../hooks/use-keyboard.js";
+import { cn } from "../../utils/cn.js";
+import { Chip } from "../chip/index.js";
+import { Spinner } from "../spinner/index.js";
+
+/** Matches Input's focus crossfade, so the two read as the same control. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FOCUS_DURATION = 150;
+const comboboxVariants = tv({
+  slots: {
+    root: 'w-full',
+    /*
+     * `rounded-lg` and the same padding scale as Select's trigger and Input's
+     * field: a Combobox sitting in a form beside either of them has to read as
+     * the same family of control, not as a text field that happens to be near
+     * a picker.
+     *
+     * The border colour is animated between the resting and focused tokens, so
+     * it is deliberately absent from the class.
+     */
+    field: 'w-full flex-row items-center gap-2 rounded-lg border bg-background px-4 py-2.5',
+    // Chips wrap onto their own lines; the input keeps a sane minimum so it is
+    // still tappable once a few of them are in front of it.
+    fieldContent: 'flex-1 flex-row flex-wrap items-center gap-1.5 py-1',
+    input: 'min-w-24 flex-1 py-1 text-base font-normal text-foreground',
+    action: 'h-6 w-6 items-center justify-center rounded-full',
+    list: 'overflow-hidden rounded-xl border border-border bg-popover p-2 shadow-sm',
+    item: 'flex-row items-center gap-2 rounded-lg px-3 py-3',
+    itemLabel: 'flex-1 text-base font-medium text-foreground',
+    itemIndicator: 'h-5 w-5 items-center justify-center',
+    group: 'gap-1',
+    groupLabel: 'px-3 pb-1 pt-2',
+    status: 'flex-row items-center justify-center gap-2 px-3 py-6'
+  },
+  variants: {
+    selected: {
+      true: {
+        item: 'bg-accent'
+      }
+    },
+    disabled: {
+      true: {
+        field: 'opacity-[0.64]'
+      }
+    },
+    itemDisabled: {
+      true: {
+        item: 'opacity-[0.64]'
+      }
+    },
+    presentation: {
+      overlay: {
+        list: 'shadow-lg'
+      },
+      inline: {
+        list: 'mt-2'
+      }
+    }
+  },
+  defaultVariants: {
+    presentation: 'overlay'
+  }
+});
+
+/** Which selection shape a `mode` produces. */
+
+const ComboboxContext = /*#__PURE__*/createContext(null);
+/** Declarative option. Rendered inside whichever surface is presenting. */
+function ComboboxItem({
+  value,
+  label,
+  disabled,
+  start,
+  description
+}) {
+  const context = useContext(ComboboxContext);
+  if (!context) {
+    throw new Error('Combobox.Item must be used within a <Combobox>');
+  }
+  const selected = context.values.includes(value);
+  const {
+    item,
+    itemLabel,
+    itemIndicator
+  } = comboboxVariants({
+    selected,
+    itemDisabled: !!disabled
+  });
+  const checkColor = useCSSVariable('--color-muted-foreground');
+  return /*#__PURE__*/_jsxs(Pressable, {
+    accessibilityRole: "menuitem",
+    accessibilityState: {
+      selected,
+      disabled: !!disabled
+    },
+    disabled: disabled,
+    onPress: () => context.onSelect(value, label),
+    className: item(),
+    children: [start, /*#__PURE__*/_jsxs(View, {
+      className: "flex-1",
+      children: [/*#__PURE__*/_jsx(Text, {
+        className: itemLabel(),
+        children: label
+      }), description ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        numberOfLines: 1,
+        children: description
+      }) : null]
+    }), /*#__PURE__*/_jsx(View, {
+      className: itemIndicator(),
+      children: selected ? /*#__PURE__*/_jsx(CheckIcon, {
+        size: 16,
+        color: typeof checkColor === 'string' ? checkColor : '#737373'
+      }) : null
+    })]
+  });
+}
+/**
+ * A titled run of options.
+ *
+ * Presentational only: a grouped Combobox reports the same values a flat one
+ * would, and `Combobox.Item` needs to know nothing about being inside one.
+ */
+function ComboboxGroup({
+  label,
+  className,
+  labelClassName,
+  children
+}) {
+  const {
+    group,
+    groupLabel
+  } = comboboxVariants();
+  return /*#__PURE__*/_jsxs(View, {
+    className: cn(group(), className),
+    children: [label ? /*#__PURE__*/_jsx(View, {
+      accessibilityRole: "header",
+      className: cn(groupLabel(), labelClassName),
+      children: /*#__PURE__*/_jsx(Text, {
+        size: "xs",
+        weight: "medium",
+        muted: true,
+        className: "uppercase tracking-wide",
+        children: label
+      })
+    }) : null, textChildren(children)]
+  });
+}
+
+/**
+ * Walk the declared children, visiting every option — including the ones nested
+ * inside a `Combobox.Group`.
+ *
+ * The flat set is what the field's own text needs: the label to show for a
+ * selected value, and the chips to draw for several of them. Rendering keeps
+ * the tree; only the lookup is flattened.
+ */
+function eachOption(children, visit) {
+  Children.forEach(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    if (child.type === ComboboxGroup) {
+      eachOption(child.props.children, visit);
+      return;
+    }
+    if (child.type !== ComboboxItem) return;
+    visit(child.props);
+  });
+}
+
+/**
+ * The children a query leaves standing.
+ *
+ * A group is rebuilt around whatever survives inside it and dropped when that
+ * is nothing — a heading over no options reads as a section that failed to load
+ * rather than one the query emptied.
+ */
+function filterOptions(children, matches) {
+  const kept = [];
+  Children.forEach(children, child => {
+    if (! /*#__PURE__*/isValidElement(child)) return;
+    if (child.type === ComboboxGroup) {
+      const props = child.props;
+      const inner = filterOptions(props.children, matches);
+      if (inner.length) {
+        kept.push(/*#__PURE__*/cloneElement(child, {}, inner));
+      }
+      return;
+    }
+    if (child.type === ComboboxItem && matches(child.props)) {
+      kept.push(child);
+    }
+  });
+  return kept;
+}
+
+/** Field frame in window coordinates, measured when the list opens. */
+
+function ComboboxRoot({
+  className,
+  mode,
+  value,
+  defaultValue,
+  onValueChange,
+  inputValue,
+  defaultInputValue = '',
+  onInputValueChange,
+  placeholder = 'Search',
+  disabled = false,
+  presentation = 'overlay',
+  filter = true,
+  allowCustomValue = false,
+  loading = false,
+  emptyMessage = 'No matches',
+  loadingMessage = 'Searching',
+  clearable = false,
+  openOnFocus = false,
+  onOpenChange,
+  contentWidth = 'field',
+  offset = 8,
+  listClassName,
+  accessibilityLabel,
+  children,
+  ...props
+}) {
+  const multiple = mode === 'multiple';
+  const [open, setOpen] = useState(false);
+  const [focused, setFocused] = useState(false);
+  const [anchor, setAnchor] = useState(null);
+  const [listHeight, setListHeight] = useState(0);
+  /*
+   * The anchor is measured off the plain wrapper rather than off the animated
+   * field inside it. In `overlay` the wrapper *is* the field's box — the list
+   * is portalled out — and a host View is the thing with a dependable
+   * `measureInWindow`. `inline` never reads the anchor, so the list it also
+   * wraps cannot skew anything.
+   */
+  const fieldRef = useRef(null);
+  const inputRef = useRef(null);
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  /*
+   * The keyboard is up whenever this list is open — the field is a text input
+   * and opening the list is what typing in it does. So the space the list has
+   * to work with is never the window: it is the window above the keyboard, and
+   * measuring against the window would put the options behind it.
+   */
+  const {
+    height: keyboardHeight
+  } = useKeyboard();
+  const [internalValue, setInternalValue] = useState(() => defaultValue ?? (mode === 'multiple' ? [] : undefined));
+  const selection = value !== undefined ? value : internalValue;
+  const [internalQuery, setInternalQuery] = useState(defaultInputValue);
+  const query = inputValue !== undefined ? inputValue : internalQuery;
+
+  /** The selection as a list, which is the shape everything downstream wants. */
+  const values = useMemo(() => {
+    if (selection == null) return [];
+    return Array.isArray(selection) ? selection : [selection];
+  }, [selection]);
+  const options = useMemo(() => {
+    const collected = [];
+    eachOption(children, option => collected.push(option));
+    return collected;
+  }, [children]);
+  const labelOf = useCallback(candidate => options.find(option => option.value === candidate)?.label ?? candidate, [options]);
+  const setQuery = useCallback(next => {
+    if (inputValue === undefined) setInternalQuery(next);
+    onInputValueChange?.(next);
+  }, [inputValue, onInputValueChange]);
+  const commit = useCallback(next => {
+    if (value === undefined) setInternalValue(next);
+    onValueChange?.(next);
+  }, [value, onValueChange]);
+  const setOpenState = useCallback(next => {
+    setOpen(current => {
+      if (current === next) return current;
+      onOpenChange?.(next);
+      return next;
+    });
+  }, [onOpenChange]);
+
+  /**
+   * The floating list is positioned in window coordinates, so it has to know
+   * where the field actually landed — not where layout said it would.
+   */
+  const openList = useCallback(() => {
+    if (disabled) return;
+    if (presentation !== 'overlay') {
+      setOpenState(true);
+      return;
+    }
+    fieldRef.current?.measureInWindow((x, y, width, height) => {
+      setAnchor({
+        x,
+        y,
+        width,
+        height
+      });
+      setOpenState(true);
+    });
+  }, [disabled, presentation, setOpenState]);
+  const close = useCallback(() => setOpenState(false), [setOpenState]);
+
+  // An open overlay list catches the Android back button, closing itself
+  // instead of popping the screen behind it.
+  useBackHandler(open && presentation === 'overlay', close);
+
+  /*
+   * The anchor is a snapshot, and the keyboard invalidates it: a scroll view
+   * that lifts its content clear of the keyboard moves the field after it was
+   * measured, and the list would stay at the old position. Re-measure whenever
+   * the keyboard's height changes while the list is open.
+   */
+  useEffect(() => {
+    if (!open || presentation !== 'overlay') return;
+    fieldRef.current?.measureInWindow((x, y, width, height) => setAnchor({
+      x,
+      y,
+      width,
+      height
+    }));
+  }, [open, presentation, keyboardHeight]);
+
+  /*
+   * A single-select field shows the chosen option's label when it is not being
+   * typed into. Re-deriving it on every keystroke would fight the typing, so it
+   * is only written back when the selection itself changes and the field is not
+   * focused — which covers a value arriving from outside, and the blur after a
+   * pick. A custom-value field is left alone: the text *is* the value there.
+   */
+  const singleValue = multiple ? undefined : selection;
+  useEffect(() => {
+    if (multiple || focused || allowCustomValue) return;
+    setQuery(singleValue == null ? '' : labelOf(singleValue));
+    // `setQuery` is stable per controlled-ness; re-running on every identity
+    // change would overwrite the query the caller is controlling.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [multiple, focused, allowCustomValue, singleValue, labelOf]);
+  const matcher = useCallback(option => {
+    if (filter === false) return true;
+    const needle = query.trim().toLowerCase();
+    if (!needle) return true;
+    if (typeof filter === 'function') return filter(option, query.trim());
+    return option.label.toLowerCase().includes(needle);
+  }, [filter, query]);
+
+  /*
+   * `null` means "render the children as given" — nothing is being narrowed, so
+   * an unfiltered list does no per-option work at all.
+   */
+  const filtered = useMemo(() => {
+    if (filter === false) return null;
+    if (!query.trim()) return null;
+    return filterOptions(children, matcher);
+  }, [children, filter, query, matcher]);
+  const exactMatch = useMemo(() => options.some(option => option.label.toLowerCase() === query.trim().toLowerCase()), [options, query]);
+  const select = useCallback(next => {
+    if (multiple) {
+      const current = Array.isArray(selection) ? selection : [];
+      const without = current.filter(entry => entry !== next);
+      // Toggling: picking a chosen option again removes it, which is the only
+      // way to undo a pick without reaching for its chip.
+      const updated = without.length === current.length ? [...current, next] : without;
+      commit(updated);
+      // The query has done its job once the pick is made, and leaving it
+      // would hide every option that does not also match it.
+      setQuery('');
+      return;
+    }
+    commit(next);
+    setQuery(labelOf(next));
+    close();
+    inputRef.current?.blur();
+  }, [multiple, selection, commit, setQuery, labelOf, close]);
+
+  /** Enter, or the keyboard's Done: take the typed text if it can be taken. */
+  const submit = useCallback(() => {
+    const typed = query.trim();
+    if (!typed) return;
+    const match = options.find(option => option.label.toLowerCase() === typed.toLowerCase());
+    if (match && !match.disabled) {
+      select(match.value);
+      return;
+    }
+    if (!allowCustomValue) return;
+    if (multiple) {
+      const current = Array.isArray(selection) ? selection : [];
+      if (!current.includes(typed)) {
+        commit([...current, typed]);
+      }
+      setQuery('');
+      return;
+    }
+    commit(typed);
+    close();
+  }, [query, options, allowCustomValue, multiple, selection, select, commit, setQuery, close]);
+  const remove = useCallback(target => {
+    const current = Array.isArray(selection) ? selection : [];
+    commit(current.filter(entry => entry !== target));
+  }, [selection, commit]);
+  const clear = useCallback(() => {
+    setQuery('');
+    commit(multiple ? [] : undefined);
+    inputRef.current?.focus();
+  }, [setQuery, commit, multiple]);
+  const context = useMemo(() => ({
+    values,
+    onSelect: next => select(next)
+  }), [values, select]);
+  const slots = comboboxVariants({
+    disabled,
+    presentation
+  });
+  const mutedColor = useCSSVariable('--color-muted-foreground');
+  const restColor = useCSSVariable('--color-input');
+  const focusColor = useCSSVariable('--color-ring');
+  const placeholderColor = typeof mutedColor === 'string' ? mutedColor : '#737373';
+  const focus = useSharedValue(0);
+  useEffect(() => {
+    focus.value = withTiming(focused ? 1 : 0, {
+      duration: FOCUS_DURATION
+    });
+  }, [focused, focus]);
+  const fieldStyle = useAnimatedStyle(() => {
+    const idle = typeof restColor === 'string' ? restColor : 'rgba(0,0,0,0.1)';
+    const active = typeof focusColor === 'string' ? focusColor : '#a3a3a3';
+    return {
+      borderColor: interpolateColor(focus.value, [0, 1], [idle, active])
+    };
+  });
+  const chevron = useSharedValue(0);
+  useEffect(() => {
+    chevron.value = withTiming(open ? 1 : 0, {
+      duration: 160
+    });
+  }, [open, chevron]);
+  const chevronStyle = useAnimatedStyle(() => ({
+    transform: [{
+      rotate: `${chevron.value * 180}deg`
+    }]
+  }));
+  const hasContent = query.length > 0 || values.length > 0;
+
+  /*
+   * The list body, built once and handed to whichever surface is presenting.
+   * The two differ in where they put it, not in what it is.
+   */
+  /*
+   * `filtered === null` means nothing was narrowed — either there is no query
+   * or a server is doing the matching — so the children are rendered as given
+   * and emptiness is a question about the options themselves. A server that
+   * came back with nothing still has to say so, which is why this is not just
+   * `filtered.length`.
+   */
+  const shown = filtered === null ? textChildren(children) : filtered;
+  const isEmpty = filtered === null ? options.length === 0 : filtered.length === 0;
+  const body = loading ? /*#__PURE__*/_jsxs(View, {
+    className: slots.status(),
+    children: [/*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), /*#__PURE__*/_jsx(Text, {
+      size: "sm",
+      muted: true,
+      children: loadingMessage
+    })]
+  }) : isEmpty ? /*#__PURE__*/_jsx(Text, {
+    className: "px-3 py-6 text-center text-sm text-muted-foreground",
+    children: allowCustomValue && query.trim() && !exactMatch ? `Press return to add “${query.trim()}”` : emptyMessage
+  }) : shown;
+  const list = /*#__PURE__*/_jsx(ScrollView, {
+    bounces: false,
+    showsVerticalScrollIndicator: false
+    // The field above the list is a text input: without this a tap on an
+    // option would be swallowed by the keyboard dismissing first.
+    ,
+    keyboardShouldPersistTaps: "always",
+    keyboardDismissMode: "on-drag",
+    children: /*#__PURE__*/_jsx(View, {
+      className: "gap-1",
+      children: body
+    })
+  });
+  const field = /*#__PURE__*/_jsxs(Animated.View, {
+    style: fieldStyle,
+    className: slots.field()
+    // The field is one control made of several views. Announcing it as a
+    // combobox that owns an expandable list is what makes the chips and the
+    // input read as parts of it rather than as loose siblings.
+    ,
+    accessibilityRole: "combobox",
+    accessibilityLabel: accessibilityLabel,
+    accessibilityState: {
+      disabled,
+      expanded: open
+    },
+    children: [/*#__PURE__*/_jsxs(View, {
+      className: slots.fieldContent(),
+      children: [multiple ? values.map(entry => /*#__PURE__*/_jsx(Chip, {
+        size: "sm",
+        onClose: disabled ? undefined : () => remove(entry),
+        closeLabel: `Remove ${labelOf(entry)}`,
+        children: labelOf(entry)
+      }, entry)) : null, /*#__PURE__*/_jsx(TextInput, {
+        ref: inputRef,
+        className: slots.input(),
+        value: query,
+        onChangeText: next => {
+          setQuery(next);
+          if (!open) openList();
+        },
+        onFocus: () => {
+          setFocused(true);
+          if (openOnFocus) openList();
+        },
+        onBlur: () => setFocused(false),
+        onSubmitEditing: submit,
+        onKeyPress: ({
+          nativeEvent
+        }) => {
+          // Backspace on an empty field takes the last chip back — the same
+          // reflex that deletes a character, extended to the thing in front
+          // of the cursor when there is no character left to delete.
+          if (multiple && nativeEvent.key === 'Backspace' && query.length === 0 && values.length > 0) {
+            remove(values[values.length - 1]);
+          }
+        },
+        editable: !disabled,
+        placeholder: values.length && multiple ? undefined : placeholder,
+        placeholderTextColor: placeholderColor,
+        autoCapitalize: "none",
+        autoCorrect: false,
+        autoComplete: "off",
+        returnKeyType: allowCustomValue ? 'done' : 'search',
+        submitBehavior: multiple ? 'submit' : 'blurAndSubmit',
+        accessibilityLabel: accessibilityLabel ?? placeholder
+      })]
+    }), clearable && hasContent && !disabled ? /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Clear",
+      onPress: clear,
+      className: slots.action(),
+      children: /*#__PURE__*/_jsx(XIcon, {
+        size: 16,
+        color: placeholderColor
+      })
+    }) : null, /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: open ? 'Hide options' : 'Show options',
+      accessibilityState: {
+        expanded: open
+      },
+      disabled: disabled,
+      onPress: () => {
+        if (open) {
+          close();
+          return;
+        }
+        openList();
+        inputRef.current?.focus();
+      },
+      className: slots.action(),
+      children: /*#__PURE__*/_jsx(Animated.View, {
+        style: chevronStyle,
+        children: /*#__PURE__*/_jsx(ChevronDownIcon, {
+          color: placeholderColor
+        })
+      })
+    })]
+  });
+  if (presentation === 'inline') {
+    return /*#__PURE__*/_jsx(ComboboxContext.Provider, {
+      value: context,
+      children: /*#__PURE__*/_jsxs(View, {
+        ref: fieldRef,
+        className: cn(slots.root(), className),
+        ...props,
+        children: [field, open ? /*#__PURE__*/_jsx(Animated.View, {
+          entering: FadeIn.duration(140),
+          exiting: FadeOut.duration(120),
+          className: cn(slots.list(), 'max-h-80', listClassName),
+          children: list
+        }) : null]
+      })
+    });
+  }
+
+  // Flip above the field when the list would run off the bottom — where the
+  // bottom is the top of the keyboard, not the bottom of the screen. listHeight
+  // is 0 on the first frame, so it opens downwards and corrects itself once
+  // measured — invisible inside the 140ms fade.
+  const viewportBottom = screenHeight - keyboardHeight;
+  const spaceBelow = anchor ? viewportBottom - (anchor.y + anchor.height) - offset : 0;
+  const flip = !!anchor && listHeight > 0 && listHeight > spaceBelow;
+  const overlayPosition = anchor ? {
+    position: 'absolute',
+    left: anchor.x,
+    ...(flip ? {
+      bottom: screenHeight - anchor.y + offset
+    } : {
+      top: anchor.y + anchor.height + offset
+    }),
+    ...(contentWidth === 'field' ? {
+      width: anchor.width
+    } : typeof contentWidth === 'number' ? {
+      width: contentWidth
+    } : {
+      minWidth: anchor.width
+    }),
+    // Never collapse to nothing in a cramped viewport — the list scrolls.
+    maxHeight: Math.max((flip ? anchor.y : spaceBelow) - offset, 160)
+  } : null;
+  return /*#__PURE__*/_jsxs(ComboboxContext.Provider, {
+    value: context,
+    children: [/*#__PURE__*/_jsx(View, {
+      ref: fieldRef,
+      className: cn(slots.root(), className),
+      ...props,
+      children: field
+    }), open && overlayPosition ? /*#__PURE__*/_jsxs(Portal, {
+      children: [/*#__PURE__*/_jsx(Pressable, {
+        accessible: false,
+        importantForAccessibility: "no-hide-descendants",
+        accessibilityElementsHidden: true,
+        onPress: () => {
+          close();
+          inputRef.current?.blur();
+        },
+        style: {
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0
+        }
+      }), /*#__PURE__*/_jsx(ComboboxContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/_jsx(Animated.View, {
+          entering: FadeIn.duration(140),
+          exiting: FadeOut.duration(120),
+          onLayout: event => setListHeight(event.nativeEvent.layout.height),
+          style: overlayPosition
+          /*
+           * The floating list covers the screen with a catcher and takes
+           * the back button, so it is a modal layer. Without this the page
+           * behind it stays in the accessibility tree and a screen reader
+           * could walk out of the open list into content it is covering.
+           */,
+          accessibilityViewIsModal: true,
+          className: cn(slots.list(), listClassName),
+          children: list
+        })
+      })]
+    }) : null]
+  });
+}
+ComboboxItem.displayName = 'Combobox.Item';
+ComboboxGroup.displayName = 'Combobox.Group';
+export const Combobox = Object.assign(ComboboxRoot, {
+  Item: ComboboxItem,
+  Group: ComboboxGroup
+});
+//# sourceMappingURL=index.js.map