@neynar/ui 0.4.0 → 0.5.0

package/dist/node_modules/@base-ui/react/esm/combobox/root/AriaCombobox.js

@@ -0,0 +1,970 @@
+"use client";
+import * as React from "react";
+import { useControlled } from "../../../../utils/esm/useControlled.js";
+import { useIsoLayoutEffect } from "../../../../utils/esm/useIsoLayoutEffect.js";
+import { useOnFirstRender } from "../../../../utils/esm/useOnFirstRender.js";
+import { useStableCallback } from "../../../../utils/esm/useStableCallback.js";
+import { useMergedRefs } from "../../../../utils/esm/useMergedRefs.js";
+import { visuallyHidden } from "../../../../utils/esm/visuallyHidden.js";
+import { useRefWithInit } from "../../../../utils/esm/useRefWithInit.js";
+import { useValueAsRef } from "../../../../utils/esm/useValueAsRef.js";
+import { createGenericEventDetails, createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { ComboboxRootContext, ComboboxFloatingContext, ComboboxDerivedItemsContext, ComboboxInputValueContext } from "./ComboboxRootContext.js";
+import { selectors } from "../store.js";
+import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useField } from "../../field/useField.js";
+import { useFormContext } from "../../form/FormContext.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { createSingleSelectionCollatorFilter, createCollatorItemFilter } from "./utils/index.js";
+import { useCoreFilter } from "./utils/useFilter.js";
+import { useTransitionStatus } from "../../utils/useTransitionStatus.js";
+import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
+import { useValueChanged } from "../../utils/useValueChanged.js";
+import { stringifyAsLabel, isGroupedItems, stringifyAsValue } from "../../utils/resolveValueLabel.js";
+import { defaultItemEquality, itemIncludes, removeItem, findItemIndex } from "../../utils/itemEquality.js";
+import { INITIAL_LAST_HIGHLIGHT, NO_ACTIVE_VALUE } from "./utils/constants.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EMPTY_ARRAY, NOOP, EMPTY_OBJECT } from "../../../../utils/esm/empty.js";
+import { useFloatingRootContext } from "../../floating-ui-react/hooks/useFloatingRootContext.js";
+import { useClick } from "../../floating-ui-react/hooks/useClick.js";
+import { useDismiss } from "../../floating-ui-react/hooks/useDismiss.js";
+import { useListNavigation } from "../../floating-ui-react/hooks/useListNavigation.js";
+import { useInteractions } from "../../floating-ui-react/hooks/useInteractions.js";
+import { Store } from "../../../../utils/esm/store/Store.js";
+import { useStore } from "../../../../utils/esm/store/useStore.js";
+import { inputClear, inputChange, itemPress, none } from "../../utils/reason-parts.js";
+import { getTarget, contains } from "../../floating-ui-react/utils/element.js";
+function AriaCombobox(props) {
+  const {
+    id: idProp,
+    onOpenChangeComplete: onOpenChangeCompleteProp,
+    defaultSelectedValue = null,
+    selectedValue: selectedValueProp,
+    onSelectedValueChange,
+    defaultInputValue: defaultInputValueProp,
+    inputValue: inputValueProp,
+    selectionMode = "none",
+    onItemHighlighted: onItemHighlightedProp,
+    name: nameProp,
+    disabled: disabledProp = false,
+    readOnly = false,
+    required = false,
+    inputRef: inputRefProp,
+    grid = false,
+    items,
+    filteredItems: filteredItemsProp,
+    filter: filterProp,
+    openOnInputClick = true,
+    autoHighlight = false,
+    keepHighlight = false,
+    highlightItemOnHover = true,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue = defaultItemEquality,
+    virtualized = false,
+    inline: inlineProp = false,
+    fillInputOnItemPress = true,
+    modal = false,
+    limit = -1,
+    autoComplete = "list",
+    locale,
+    submitOnItemClick = false
+  } = props;
+  const {
+    clearErrors
+  } = useFormContext();
+  const {
+    setDirty,
+    validityData,
+    shouldValidateOnChange,
+    setFilled,
+    name: fieldName,
+    disabled: fieldDisabled,
+    validation
+  } = useFieldRootContext();
+  const id = useLabelableId({
+    id: idProp
+  });
+  const collatorFilter = useCoreFilter({
+    locale
+  });
+  const [queryChangedAfterOpen, setQueryChangedAfterOpen] = React.useState(false);
+  const [closeQuery, setCloseQuery] = React.useState(null);
+  const listRef = React.useRef([]);
+  const labelsRef = React.useRef([]);
+  const popupRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const emptyRef = React.useRef(null);
+  const keyboardActiveRef = React.useRef(true);
+  const hadInputClearRef = React.useRef(false);
+  const chipsContainerRef = React.useRef(null);
+  const clearRef = React.useRef(null);
+  const selectionEventRef = React.useRef(null);
+  const lastHighlightRef = React.useRef(INITIAL_LAST_HIGHLIGHT);
+  const pendingQueryHighlightRef = React.useRef(null);
+  const valuesRef = React.useRef([]);
+  const allValuesRef = React.useRef([]);
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const multiple = selectionMode === "multiple";
+  const single = selectionMode === "single";
+  const hasInputValue = inputValueProp !== void 0 || defaultInputValueProp !== void 0;
+  const hasItems = items !== void 0;
+  const hasFilteredItemsProp = filteredItemsProp !== void 0;
+  let autoHighlightMode;
+  if (autoHighlight === "always") {
+    autoHighlightMode = "always";
+  } else {
+    autoHighlightMode = autoHighlight ? "input-change" : false;
+  }
+  const [selectedValue, setSelectedValueUnwrapped] = useControlled({
+    controlled: selectedValueProp,
+    default: multiple ? defaultSelectedValue ?? EMPTY_ARRAY : defaultSelectedValue,
+    name: "Combobox",
+    state: "selectedValue"
+  });
+  const filter = React.useMemo(() => {
+    if (filterProp === null) {
+      return () => true;
+    }
+    if (filterProp !== void 0) {
+      return filterProp;
+    }
+    if (single && !queryChangedAfterOpen) {
+      return createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
+    }
+    return createCollatorItemFilter(collatorFilter, itemToStringLabel);
+  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+  const initialDefaultInputValue = useRefWithInit(() => {
+    if (hasInputValue) {
+      return defaultInputValueProp ?? "";
+    }
+    if (single) {
+      return stringifyAsLabel(selectedValue, itemToStringLabel);
+    }
+    return "";
+  }).current;
+  const [inputValue, setInputValueUnwrapped] = useControlled({
+    controlled: inputValueProp,
+    default: initialDefaultInputValue,
+    name: "Combobox",
+    state: "inputValue"
+  });
+  const [open, setOpenUnwrapped] = useControlled({
+    controlled: props.open,
+    default: props.defaultOpen,
+    name: "Combobox",
+    state: "open"
+  });
+  const isGrouped = isGroupedItems(items);
+  const query = closeQuery ?? (inputValue === "" ? "" : String(inputValue).trim());
+  const selectedLabelString = single ? stringifyAsLabel(selectedValue, itemToStringLabel) : "";
+  const shouldBypassFiltering = single && !queryChangedAfterOpen && query !== "" && selectedLabelString !== "" && selectedLabelString.length === query.length && collatorFilter.contains(selectedLabelString, query);
+  const filterQuery = shouldBypassFiltering ? "" : query;
+  const shouldIgnoreExternalFiltering = hasItems && hasFilteredItemsProp && shouldBypassFiltering;
+  const flatItems = React.useMemo(() => {
+    if (!items) {
+      return EMPTY_ARRAY;
+    }
+    if (isGrouped) {
+      return items.flatMap((group) => group.items);
+    }
+    return items;
+  }, [items, isGrouped]);
+  const filteredItems = React.useMemo(() => {
+    if (filteredItemsProp && !shouldIgnoreExternalFiltering) {
+      return filteredItemsProp;
+    }
+    if (!items) {
+      return EMPTY_ARRAY;
+    }
+    if (isGrouped) {
+      const groupedItems = items;
+      const resultingGroups = [];
+      let currentCount = 0;
+      for (const group of groupedItems) {
+        if (limit > -1 && currentCount >= limit) {
+          break;
+        }
+        const candidateItems = filterQuery === "" ? group.items : group.items.filter((item) => filter(item, filterQuery, itemToStringLabel));
+        if (candidateItems.length === 0) {
+          continue;
+        }
+        const remainingLimit = limit > -1 ? limit - currentCount : Infinity;
+        const itemsToTake = candidateItems.slice(0, remainingLimit);
+        if (itemsToTake.length > 0) {
+          const newGroup = {
+            ...group,
+            items: itemsToTake
+          };
+          resultingGroups.push(newGroup);
+          currentCount += itemsToTake.length;
+        }
+      }
+      return resultingGroups;
+    }
+    if (filterQuery === "") {
+      return limit > -1 ? flatItems.slice(0, limit) : (
+        // The cast here is done as `flatItems` is readonly.
+        // valuesRef.current, a mutable ref, can be set to `flatFilteredItems`, which may
+        // reference this exact readonly value, creating a mutation risk.
+        // However, <Combobox.Item> can never mutate this value as the mutating effect
+        // bails early when `items` is provided, and this is only ever returned
+        // when `items` is provided due to the early return at the top of this hook.
+        flatItems
+      );
+    }
+    const limitedItems = [];
+    for (const item of flatItems) {
+      if (limit > -1 && limitedItems.length >= limit) {
+        break;
+      }
+      if (filter(item, filterQuery, itemToStringLabel)) {
+        limitedItems.push(item);
+      }
+    }
+    return limitedItems;
+  }, [filteredItemsProp, shouldIgnoreExternalFiltering, items, isGrouped, filterQuery, limit, filter, itemToStringLabel, flatItems]);
+  const flatFilteredItems = React.useMemo(() => {
+    if (isGrouped) {
+      const groups = filteredItems;
+      return groups.flatMap((g) => g.items);
+    }
+    return filteredItems;
+  }, [filteredItems, isGrouped]);
+  const store = useRefWithInit(() => new Store({
+    id,
+    selectedValue,
+    open,
+    filter,
+    query,
+    items,
+    selectionMode,
+    listRef,
+    labelsRef,
+    popupRef,
+    emptyRef,
+    inputRef,
+    keyboardActiveRef,
+    chipsContainerRef,
+    clearRef,
+    valuesRef,
+    allValuesRef,
+    selectionEventRef,
+    name,
+    disabled,
+    readOnly,
+    required,
+    grid,
+    isGrouped,
+    virtualized,
+    openOnInputClick,
+    itemToStringLabel,
+    isItemEqualToValue,
+    modal,
+    autoHighlight: autoHighlightMode,
+    submitOnItemClick,
+    hasInputValue,
+    mounted: false,
+    forceMounted: false,
+    transitionStatus: "idle",
+    inline: inlineProp,
+    activeIndex: null,
+    selectedIndex: null,
+    popupProps: {},
+    inputProps: {},
+    triggerProps: {},
+    positionerElement: null,
+    listElement: null,
+    triggerElement: null,
+    inputElement: null,
+    popupSide: null,
+    openMethod: null,
+    inputInsidePopup: true,
+    onOpenChangeComplete: onOpenChangeCompleteProp || NOOP,
+    // Placeholder callbacks replaced on first render
+    setOpen: NOOP,
+    setInputValue: NOOP,
+    setSelectedValue: NOOP,
+    setIndices: NOOP,
+    onItemHighlighted: NOOP,
+    handleSelection: NOOP,
+    getItemProps: () => EMPTY_OBJECT,
+    forceMount: NOOP,
+    requestSubmit: NOOP
+  })).current;
+  const fieldRawValue = selectionMode === "none" ? inputValue : selectedValue;
+  const fieldStringValue = React.useMemo(() => {
+    if (selectionMode === "none") {
+      return fieldRawValue;
+    }
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.map((value) => stringifyAsValue(value, itemToStringValue));
+    }
+    return stringifyAsValue(selectedValue, itemToStringValue);
+  }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
+  const onItemHighlighted = useStableCallback(onItemHighlightedProp);
+  const onOpenChangeComplete = useStableCallback(onOpenChangeCompleteProp);
+  const activeIndex = useStore(store, selectors.activeIndex);
+  const selectedIndex = useStore(store, selectors.selectedIndex);
+  const positionerElement = useStore(store, selectors.positionerElement);
+  const listElement = useStore(store, selectors.listElement);
+  const triggerElement = useStore(store, selectors.triggerElement);
+  const inputElement = useStore(store, selectors.inputElement);
+  const inline = useStore(store, selectors.inline);
+  const inputInsidePopup = useStore(store, selectors.inputInsidePopup);
+  const triggerRef = useValueAsRef(triggerElement);
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useTransitionStatus(open);
+  const {
+    openMethod,
+    triggerProps,
+    reset: resetOpenInteractionType
+  } = useOpenInteractionType(open);
+  useField({
+    id,
+    name,
+    commit: validation.commit,
+    value: fieldRawValue,
+    controlRef: inputInsidePopup ? triggerRef : inputRef,
+    getValue: () => fieldStringValue
+  });
+  const forceMount = useStableCallback(() => {
+    if (items) {
+      labelsRef.current = flatFilteredItems.map((item) => stringifyAsLabel(item, itemToStringLabel));
+    } else {
+      store.set("forceMounted", true);
+    }
+  });
+  const initialSelectedValueRef = React.useRef(selectedValue);
+  useIsoLayoutEffect(() => {
+    if (selectedValue !== initialSelectedValueRef.current) {
+      forceMount();
+    }
+  }, [forceMount, selectedValue]);
+  const setIndices = useStableCallback((options) => {
+    store.update(options);
+    const type = options.type || "none";
+    if (options.activeIndex === void 0) {
+      return;
+    }
+    if (options.activeIndex === null) {
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        onItemHighlighted(void 0, createGenericEventDetails(type, void 0, {
+          index: -1
+        }));
+      }
+    } else {
+      const activeValue = valuesRef.current[options.activeIndex];
+      lastHighlightRef.current = {
+        value: activeValue,
+        index: options.activeIndex
+      };
+      onItemHighlighted(activeValue, createGenericEventDetails(type, void 0, {
+        index: options.activeIndex
+      }));
+    }
+  });
+  const setInputValue = useStableCallback((next, eventDetails) => {
+    hadInputClearRef.current = eventDetails.reason === inputClear;
+    props.onInputValueChange?.(next, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    if (eventDetails.reason === inputChange) {
+      const hasQuery = next.trim() !== "";
+      if (hasQuery) {
+        setQueryChangedAfterOpen(true);
+      }
+      pendingQueryHighlightRef.current = {
+        hasQuery
+      };
+      if (hasQuery && autoHighlightMode && store.state.activeIndex == null) {
+        store.set("activeIndex", 0);
+      }
+    }
+    setInputValueUnwrapped(next);
+  });
+  const setOpen = useStableCallback((nextOpen, eventDetails) => {
+    if (open === nextOpen) {
+      return;
+    }
+    if (eventDetails.reason === "escape-key" && hasItems && flatFilteredItems.length === 0 && !store.state.emptyRef.current) {
+      eventDetails.allowPropagation();
+    }
+    props.onOpenChange?.(nextOpen, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    if (!nextOpen && queryChangedAfterOpen) {
+      if (single) {
+        setCloseQuery(query);
+        if (query === "") {
+          setQueryChangedAfterOpen(false);
+        }
+      } else if (multiple) {
+        if (inline || inputInsidePopup) {
+          setIndices({
+            activeIndex: null
+          });
+        } else {
+          setCloseQuery(query);
+        }
+        setInputValue("", createChangeEventDetails(inputClear, eventDetails.event));
+      }
+    }
+    setOpenUnwrapped(nextOpen);
+  });
+  const setSelectedValue = useStableCallback((nextValue, eventDetails) => {
+    onSelectedValueChange?.(nextValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setSelectedValueUnwrapped(nextValue);
+    const shouldFillInput = selectionMode === "none" && popupRef.current && fillInputOnItemPress || single && !store.state.inputInsidePopup;
+    if (shouldFillInput) {
+      setInputValue(stringifyAsLabel(nextValue, itemToStringLabel), createChangeEventDetails(eventDetails.reason, eventDetails.event));
+    }
+    if (single && nextValue != null && eventDetails.reason !== inputChange && queryChangedAfterOpen) {
+      setCloseQuery(query);
+    }
+  });
+  const handleSelection = useStableCallback((event, passedValue) => {
+    let value = passedValue;
+    if (value === void 0) {
+      if (activeIndex === null) {
+        return;
+      }
+      value = valuesRef.current[activeIndex];
+    }
+    const targetEl = getTarget(event);
+    const overrideEvent = selectionEventRef.current ?? event;
+    selectionEventRef.current = null;
+    const eventDetails = createChangeEventDetails(itemPress, overrideEvent);
+    const href = targetEl?.closest("a")?.getAttribute("href");
+    if (href) {
+      if (href.startsWith("#")) {
+        setOpen(false, eventDetails);
+      }
+      return;
+    }
+    if (multiple) {
+      const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const isCurrentlySelected = itemIncludes(currentSelectedValue, value, store.state.isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? removeItem(currentSelectedValue, value, store.state.isItemEqualToValue) : [...currentSelectedValue, value];
+      setSelectedValue(nextValue, eventDetails);
+      const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== "" : false;
+      if (!wasFiltering) {
+        return;
+      }
+      if (store.state.inputInsidePopup) {
+        setInputValue("", createChangeEventDetails(inputClear, eventDetails.event));
+      } else {
+        setOpen(false, eventDetails);
+      }
+    } else {
+      setSelectedValue(value, eventDetails);
+      setOpen(false, eventDetails);
+    }
+  });
+  const requestSubmit = useStableCallback(() => {
+    if (!store.state.submitOnItemClick) {
+      return;
+    }
+    const form = store.state.inputElement?.form;
+    if (form && typeof form.requestSubmit === "function") {
+      form.requestSubmit();
+    }
+  });
+  const handleUnmount = useStableCallback(() => {
+    setMounted(false);
+    onOpenChangeComplete?.(false);
+    setQueryChangedAfterOpen(false);
+    resetOpenInteractionType();
+    setCloseQuery(null);
+    if (selectionMode === "none") {
+      setIndices({
+        activeIndex: null,
+        selectedIndex: null
+      });
+    } else {
+      setIndices({
+        activeIndex: null
+      });
+    }
+    if (multiple && inputRef.current && inputRef.current.value !== "" && !hadInputClearRef.current) {
+      setInputValue("", createChangeEventDetails(inputClear));
+    }
+    if (single) {
+      if (store.state.inputInsidePopup) {
+        if (inputRef.current && inputRef.current.value !== "") {
+          setInputValue("", createChangeEventDetails(inputClear));
+        }
+      } else {
+        const stringVal = stringifyAsLabel(selectedValue, itemToStringLabel);
+        if (inputRef.current && inputRef.current.value !== stringVal) {
+          const reason = stringVal === "" ? inputClear : none;
+          setInputValue(stringVal, createChangeEventDetails(reason));
+        }
+      }
+    }
+  });
+  const resolvedPopupRef = React.useMemo(() => {
+    if (inline && positionerElement) {
+      return {
+        current: positionerElement.closest('[role="dialog"]')
+      };
+    }
+    return popupRef;
+  }, [inline, positionerElement]);
+  useOpenChangeComplete({
+    enabled: !props.actionsRef,
+    open,
+    ref: resolvedPopupRef,
+    onComplete() {
+      if (!open) {
+        handleUnmount();
+      }
+    }
+  });
+  React.useImperativeHandle(props.actionsRef, () => ({
+    unmount: handleUnmount
+  }), [handleUnmount]);
+  useIsoLayoutEffect(function syncSelectedIndex() {
+    if (open || selectionMode === "none") {
+      return;
+    }
+    const registry = items ? flatItems : allValuesRef.current;
+    if (multiple) {
+      const currentValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const lastValue = currentValue[currentValue.length - 1];
+      const lastIndex = findItemIndex(registry, lastValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: lastIndex === -1 ? null : lastIndex
+      });
+    } else {
+      const index = findItemIndex(registry, selectedValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: index === -1 ? null : index
+      });
+    }
+  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
+  useIsoLayoutEffect(() => {
+    if (items) {
+      valuesRef.current = flatFilteredItems;
+      listRef.current.length = flatFilteredItems.length;
+    }
+  }, [items, flatFilteredItems]);
+  useIsoLayoutEffect(() => {
+    const pendingHighlight = pendingQueryHighlightRef.current;
+    if (pendingHighlight) {
+      if (pendingHighlight.hasQuery) {
+        if (autoHighlightMode) {
+          store.set("activeIndex", 0);
+        }
+      } else if (autoHighlightMode === "always") {
+        store.set("activeIndex", 0);
+      }
+      pendingQueryHighlightRef.current = null;
+    }
+    if (!open && !inline) {
+      return;
+    }
+    const shouldUseFlatFilteredItems = hasItems || hasFilteredItemsProp;
+    const candidateItems = shouldUseFlatFilteredItems ? flatFilteredItems : valuesRef.current;
+    const storeActiveIndex = store.state.activeIndex;
+    if (storeActiveIndex == null) {
+      if (autoHighlightMode === "always" && candidateItems.length > 0) {
+        store.set("activeIndex", 0);
+        return;
+      }
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        store.state.onItemHighlighted(void 0, createGenericEventDetails(none, void 0, {
+          index: -1
+        }));
+      }
+      return;
+    }
+    if (storeActiveIndex >= candidateItems.length) {
+      if (lastHighlightRef.current !== INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = INITIAL_LAST_HIGHLIGHT;
+        store.state.onItemHighlighted(void 0, createGenericEventDetails(none, void 0, {
+          index: -1
+        }));
+      }
+      store.set("activeIndex", null);
+      return;
+    }
+    const nextActiveValue = candidateItems[storeActiveIndex];
+    const lastHighlightedValue = lastHighlightRef.current.value;
+    const isSameItem = lastHighlightedValue !== NO_ACTIVE_VALUE && store.state.isItemEqualToValue(nextActiveValue, lastHighlightedValue);
+    if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
+      lastHighlightRef.current = {
+        value: nextActiveValue,
+        index: storeActiveIndex
+      };
+      store.state.onItemHighlighted(nextActiveValue, createGenericEventDetails(none, void 0, {
+        index: storeActiveIndex
+      }));
+    }
+  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store]);
+  useIsoLayoutEffect(() => {
+    if (!items || selectionMode === "none") {
+      return;
+    }
+    const registry = flatItems;
+    if (multiple) {
+      const current = Array.isArray(selectedValue) ? selectedValue : EMPTY_ARRAY;
+      const next = current.filter((v) => itemIncludes(registry, v, store.state.isItemEqualToValue));
+      if (next.length !== current.length) {
+        setSelectedValueUnwrapped(next);
+      }
+      return;
+    }
+    const isStillPresent = selectedValue == null ? true : itemIncludes(registry, selectedValue, store.state.isItemEqualToValue);
+    if (isStillPresent) {
+      return;
+    }
+    let fallback = null;
+    if (defaultSelectedValue != null && itemIncludes(registry, defaultSelectedValue, store.state.isItemEqualToValue)) {
+      fallback = defaultSelectedValue;
+    }
+    setSelectedValueUnwrapped(fallback);
+    if (!store.state.inputInsidePopup) {
+      const stringVal = stringifyAsLabel(fallback, itemToStringLabel);
+      if (inputRef.current && inputRef.current.value !== stringVal) {
+        setInputValue(stringVal, createChangeEventDetails(none));
+      }
+    }
+  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, setSelectedValueUnwrapped, itemToStringLabel, store, setInputValue]);
+  useIsoLayoutEffect(() => {
+    if (selectionMode === "none") {
+      setFilled(String(inputValue) !== "");
+      return;
+    }
+    setFilled(multiple ? Array.isArray(selectedValue) && selectedValue.length > 0 : selectedValue != null);
+  }, [setFilled, selectionMode, inputValue, selectedValue, multiple]);
+  React.useEffect(() => {
+    if (hasItems && autoHighlightMode && flatFilteredItems.length === 0) {
+      setIndices({
+        activeIndex: null
+      });
+    }
+  }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
+  useValueChanged(query, () => {
+    if (!open || query === "" || query === String(initialDefaultInputValue)) {
+      return;
+    }
+    setQueryChangedAfterOpen(true);
+  });
+  useValueChanged(selectedValue, () => {
+    if (selectionMode === "none") {
+      return;
+    }
+    clearErrors(name);
+    setDirty(selectedValue !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(selectedValue);
+    } else {
+      validation.commit(selectedValue, true);
+    }
+    if (multiple && store.state.selectedIndex !== null && (!Array.isArray(selectedValue) || selectedValue.length === 0)) {
+      setIndices({
+        activeIndex: null,
+        selectedIndex: null
+      });
+    }
+    if (single && !hasInputValue && !inputInsidePopup) {
+      const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+      if (inputValue !== nextInputValue) {
+        setInputValue(nextInputValue, createChangeEventDetails(none));
+      }
+    }
+  });
+  useValueChanged(inputValue, () => {
+    if (selectionMode !== "none") {
+      return;
+    }
+    clearErrors(name);
+    setDirty(inputValue !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(inputValue);
+    } else {
+      validation.commit(inputValue, true);
+    }
+  });
+  useValueChanged(items, () => {
+    if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
+      return;
+    }
+    const nextInputValue = stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, createChangeEventDetails(none));
+    }
+  });
+  const floatingRootContext = useFloatingRootContext({
+    open: inline ? true : open,
+    onOpenChange: setOpen,
+    elements: {
+      reference: inputInsidePopup ? triggerElement : inputElement,
+      floating: positionerElement
+    }
+  });
+  let ariaHasPopup;
+  let ariaExpanded;
+  if (!inline) {
+    ariaHasPopup = grid ? "grid" : "listbox";
+    ariaExpanded = open ? "true" : "false";
+  }
+  const role = React.useMemo(() => {
+    const isPlainInput = inputElement?.tagName === "INPUT";
+    const shouldApplyAria = isPlainInput || open;
+    const reference = isPlainInput ? {
+      autoComplete: "off",
+      spellCheck: "false",
+      autoCorrect: "off",
+      autoCapitalize: "none"
+    } : {};
+    if (shouldApplyAria) {
+      reference.role = "combobox";
+      reference["aria-expanded"] = ariaExpanded;
+      reference["aria-haspopup"] = ariaHasPopup;
+      reference["aria-controls"] = open ? listElement?.id : void 0;
+      reference["aria-autocomplete"] = autoComplete;
+    }
+    return {
+      reference,
+      floating: {
+        role: "presentation"
+      }
+    };
+  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement?.id, autoComplete]);
+  const click = useClick(floatingRootContext, {
+    enabled: !readOnly && !disabled && openOnInputClick,
+    event: "mousedown-only",
+    toggle: false,
+    // Apply a small delay for touch to let iOS viewport centering settle.
+    // This avoids top-bottom flip flickers if the preferred position is "top" when first tapping.
+    touchOpenDelay: inputInsidePopup ? 0 : 50
+  });
+  const dismiss = useDismiss(floatingRootContext, {
+    enabled: !readOnly && !disabled && !inline,
+    outsidePressEvent: {
+      mouse: "sloppy",
+      // The visual viewport (affected by the mobile software keyboard) can be
+      // somewhat small. The user may want to scroll the screen to see more of
+      // the popup.
+      touch: "intentional"
+    },
+    // Without a popup, let the Escape key bubble the event up to other popups' handlers.
+    bubbles: inline ? true : void 0,
+    outsidePress(event) {
+      const target = getTarget(event);
+      return !contains(triggerElement, target) && !contains(clearRef.current, target) && !contains(chipsContainerRef.current, target);
+    }
+  });
+  const listNavigation = useListNavigation(floatingRootContext, {
+    enabled: !readOnly && !disabled,
+    id,
+    listRef,
+    activeIndex,
+    selectedIndex,
+    virtual: true,
+    loopFocus: true,
+    allowEscape: !autoHighlightMode,
+    focusItemOnOpen: queryChangedAfterOpen || selectionMode === "none" && !autoHighlightMode ? false : "auto",
+    focusItemOnHover: highlightItemOnHover,
+    resetOnPointerLeave: !keepHighlight,
+    // `cols` > 1 enables grid navigation.
+    // Since <Combobox.Row> infers column sizes (and is required when building a grid),
+    // it works correctly even with a value of `2`.
+    // Floating UI tests don't require `role="row"` wrappers, so retains the number API.
+    cols: grid ? 2 : 1,
+    orientation: grid ? "horizontal" : void 0,
+    disabledIndices: EMPTY_ARRAY,
+    onNavigate(nextActiveIndex, event) {
+      if (!event && !open || transitionStatus === "ending") {
+        return;
+      }
+      if (!event) {
+        setIndices({
+          activeIndex: nextActiveIndex
+        });
+      } else {
+        setIndices({
+          activeIndex: nextActiveIndex,
+          type: keyboardActiveRef.current ? "keyboard" : "pointer"
+        });
+      }
+    }
+  });
+  const {
+    getReferenceProps,
+    getFloatingProps,
+    getItemProps
+  } = useInteractions([role, click, dismiss, listNavigation]);
+  useOnFirstRender(() => {
+    store.update({
+      inline: inlineProp,
+      popupProps: getFloatingProps(),
+      inputProps: getReferenceProps(),
+      triggerProps,
+      getItemProps,
+      setOpen,
+      setInputValue,
+      setSelectedValue,
+      setIndices,
+      onItemHighlighted,
+      handleSelection,
+      forceMount,
+      requestSubmit
+    });
+  });
+  useIsoLayoutEffect(() => {
+    store.update({
+      id,
+      selectedValue,
+      open,
+      mounted,
+      transitionStatus,
+      items,
+      inline: inlineProp,
+      popupProps: getFloatingProps(),
+      inputProps: getReferenceProps(),
+      triggerProps,
+      openMethod,
+      getItemProps,
+      selectionMode,
+      name,
+      disabled,
+      readOnly,
+      required,
+      grid,
+      isGrouped,
+      virtualized,
+      onOpenChangeComplete,
+      openOnInputClick,
+      itemToStringLabel,
+      modal,
+      autoHighlight: autoHighlightMode,
+      isItemEqualToValue,
+      submitOnItemClick,
+      hasInputValue,
+      requestSubmit
+    });
+  }, [store, id, selectedValue, open, mounted, transitionStatus, items, getFloatingProps, getReferenceProps, getItemProps, openMethod, triggerProps, selectionMode, name, disabled, readOnly, required, validation, grid, isGrouped, virtualized, onOpenChangeComplete, openOnInputClick, itemToStringLabel, modal, isItemEqualToValue, submitOnItemClick, hasInputValue, inlineProp, requestSubmit, autoHighlightMode]);
+  const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
+  const itemsContextValue = React.useMemo(() => ({
+    query,
+    filteredItems,
+    flatFilteredItems
+  }), [query, filteredItems, flatFilteredItems]);
+  const serializedValue = React.useMemo(() => {
+    if (Array.isArray(fieldRawValue)) {
+      return "";
+    }
+    return stringifyAsValue(fieldRawValue, itemToStringValue);
+  }, [fieldRawValue, itemToStringValue]);
+  const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
+  const hiddenInputs = React.useMemo(() => {
+    if (!multiple || !Array.isArray(selectedValue) || !name) {
+      return null;
+    }
+    return selectedValue.map((value) => {
+      const currentSerializedValue = stringifyAsValue(value, itemToStringValue);
+      return /* @__PURE__ */ jsx("input", {
+        type: "hidden",
+        name,
+        value: currentSerializedValue
+      }, currentSerializedValue);
+    });
+  }, [multiple, selectedValue, name, itemToStringValue]);
+  const children = /* @__PURE__ */ jsxs(React.Fragment, {
+    children: [props.children, /* @__PURE__ */ jsx("input", {
+      ...validation.getInputValidationProps({
+        // Move focus when the hidden input is focused.
+        onFocus() {
+          if (inputInsidePopup) {
+            triggerElement?.focus();
+            return;
+          }
+          (inputRef.current || triggerElement)?.focus();
+        },
+        // Handle browser autofill.
+        onChange(event) {
+          if (event.nativeEvent.defaultPrevented) {
+            return;
+          }
+          const nextValue = event.target.value;
+          const details = createChangeEventDetails(inputChange, event.nativeEvent);
+          function handleChange() {
+            if (multiple) {
+              return;
+            }
+            if (selectionMode === "none") {
+              setDirty(nextValue !== validityData.initialValue);
+              setInputValue(nextValue, details);
+              if (shouldValidateOnChange()) {
+                validation.commit(nextValue);
+              }
+              return;
+            }
+            const matchingValue = valuesRef.current.find((v) => {
+              const candidate = stringifyAsValue(v, itemToStringValue);
+              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              return false;
+            });
+            if (matchingValue != null) {
+              setDirty(matchingValue !== validityData.initialValue);
+              setSelectedValue?.(matchingValue, details);
+              if (shouldValidateOnChange()) {
+                validation.commit(matchingValue);
+              }
+            }
+          }
+          if (items) {
+            handleChange();
+          } else {
+            forceMount();
+            queueMicrotask(handleChange);
+          }
+        }
+      }),
+      id,
+      name: multiple || selectionMode === "none" ? void 0 : name,
+      disabled,
+      required: required && !hasMultipleSelection,
+      readOnly,
+      value: serializedValue,
+      ref: hiddenInputRef,
+      style: visuallyHidden,
+      tabIndex: -1,
+      "aria-hidden": true
+    }), hiddenInputs]
+  });
+  return /* @__PURE__ */ jsx(ComboboxRootContext.Provider, {
+    value: store,
+    children: /* @__PURE__ */ jsx(ComboboxFloatingContext.Provider, {
+      value: floatingRootContext,
+      children: /* @__PURE__ */ jsx(ComboboxDerivedItemsContext.Provider, {
+        value: itemsContextValue,
+        children: /* @__PURE__ */ jsx(ComboboxInputValueContext.Provider, {
+          value: inputValue,
+          children
+        })
+      })
+    })
+  });
+}
+export {
+  AriaCombobox
+};
+//# sourceMappingURL=AriaCombobox.js.map