@fragments-sdk/ui 0.9.0 → 0.9.2

package/dist/node_modules/.pnpm/@base-ui_react@1.1.0_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/react/esm/combobox/root/AriaCombobox.cjs

@@ -0,0 +1,996 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const React = require("react");
+const useControlled = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useControlled.cjs");
+const useIsoLayoutEffect = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useIsoLayoutEffect.cjs");
+const useOnFirstRender = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useOnFirstRender.cjs");
+const useStableCallback = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useStableCallback.cjs");
+const useMergedRefs = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useMergedRefs.cjs");
+const visuallyHidden = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/visuallyHidden.cjs");
+const useRefWithInit = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useRefWithInit.cjs");
+const useValueAsRef = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/useValueAsRef.cjs");
+const createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails.cjs");
+const ComboboxRootContext = require("./ComboboxRootContext.cjs");
+const store = require("../store.cjs");
+const useOpenChangeComplete = require("../../utils/useOpenChangeComplete.cjs");
+const FieldRootContext = require("../../field/root/FieldRootContext.cjs");
+const useField = require("../../field/useField.cjs");
+const FormContext = require("../../form/FormContext.cjs");
+const useLabelableId = require("../../labelable-provider/useLabelableId.cjs");
+const index = require("./utils/index.cjs");
+const useFilter = require("./utils/useFilter.cjs");
+const useTransitionStatus = require("../../utils/useTransitionStatus.cjs");
+const useOpenInteractionType = require("../../utils/useOpenInteractionType.cjs");
+const useValueChanged = require("../../utils/useValueChanged.cjs");
+const resolveValueLabel = require("../../utils/resolveValueLabel.cjs");
+const itemEquality = require("../../utils/itemEquality.cjs");
+const constants = require("./utils/constants.cjs");
+const jsxRuntime = require("react/jsx-runtime");
+const empty = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/empty.cjs");
+const useStore = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/store/useStore.cjs");
+const useFloatingRootContext = require("../../floating-ui-react/hooks/useFloatingRootContext.cjs");
+const useClick = require("../../floating-ui-react/hooks/useClick.cjs");
+const useDismiss = require("../../floating-ui-react/hooks/useDismiss.cjs");
+const useListNavigation = require("../../floating-ui-react/hooks/useListNavigation.cjs");
+const useInteractions = require("../../floating-ui-react/hooks/useInteractions.cjs");
+const Store = require("../../../../../../../@base-ui_utils@0.2.4_@types_react@19.2.9_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/@base-ui/utils/esm/store/Store.cjs");
+const reasonParts = require("../../utils/reason-parts.cjs");
+const element = require("../../floating-ui-react/utils/element.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+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,
+    loopFocus = true,
+    itemToStringLabel,
+    itemToStringValue,
+    isItemEqualToValue = itemEquality.defaultItemEquality,
+    virtualized = false,
+    inline: inlineProp = false,
+    fillInputOnItemPress = true,
+    modal = false,
+    limit = -1,
+    autoComplete = "list",
+    locale,
+    submitOnItemClick = false
+  } = props;
+  const {
+    clearErrors
+  } = FormContext.useFormContext();
+  const {
+    setDirty,
+    validityData,
+    shouldValidateOnChange,
+    setFilled,
+    name: fieldName,
+    disabled: fieldDisabled,
+    setTouched,
+    setFocused,
+    validationMode,
+    validation
+  } = FieldRootContext.useFieldRootContext();
+  const id = useLabelableId.useLabelableId({
+    id: idProp
+  });
+  const collatorFilter = useFilter.useCoreFilter({
+    locale
+  });
+  const [queryChangedAfterOpen, setQueryChangedAfterOpen] = React__namespace.useState(false);
+  const [closeQuery, setCloseQuery] = React__namespace.useState(null);
+  const listRef = React__namespace.useRef([]);
+  const labelsRef = React__namespace.useRef([]);
+  const popupRef = React__namespace.useRef(null);
+  const inputRef = React__namespace.useRef(null);
+  const emptyRef = React__namespace.useRef(null);
+  const keyboardActiveRef = React__namespace.useRef(true);
+  const hadInputClearRef = React__namespace.useRef(false);
+  const chipsContainerRef = React__namespace.useRef(null);
+  const clearRef = React__namespace.useRef(null);
+  const selectionEventRef = React__namespace.useRef(null);
+  const lastHighlightRef = React__namespace.useRef(constants.INITIAL_LAST_HIGHLIGHT);
+  const pendingQueryHighlightRef = React__namespace.useRef(null);
+  const valuesRef = React__namespace.useRef([]);
+  const allValuesRef = React__namespace.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.useControlled({
+    controlled: selectedValueProp,
+    default: multiple ? defaultSelectedValue ?? empty.EMPTY_ARRAY : defaultSelectedValue,
+    name: "Combobox",
+    state: "selectedValue"
+  });
+  const filter = React__namespace.useMemo(() => {
+    if (filterProp === null) {
+      return () => true;
+    }
+    if (filterProp !== void 0) {
+      return filterProp;
+    }
+    if (single && !queryChangedAfterOpen) {
+      return index.createSingleSelectionCollatorFilter(collatorFilter, itemToStringLabel, selectedValue);
+    }
+    return index.createCollatorItemFilter(collatorFilter, itemToStringLabel);
+  }, [filterProp, single, selectedValue, queryChangedAfterOpen, collatorFilter, itemToStringLabel]);
+  const initialDefaultInputValue = useRefWithInit.useRefWithInit(() => {
+    if (hasInputValue) {
+      return defaultInputValueProp ?? "";
+    }
+    if (single) {
+      return resolveValueLabel.stringifyAsLabel(selectedValue, itemToStringLabel);
+    }
+    return "";
+  }).current;
+  const [inputValue, setInputValueUnwrapped] = useControlled.useControlled({
+    controlled: inputValueProp,
+    default: initialDefaultInputValue,
+    name: "Combobox",
+    state: "inputValue"
+  });
+  const [open, setOpenUnwrapped] = useControlled.useControlled({
+    controlled: props.open,
+    default: props.defaultOpen,
+    name: "Combobox",
+    state: "open"
+  });
+  const isGrouped = resolveValueLabel.isGroupedItems(items);
+  const query = closeQuery ?? (inputValue === "" ? "" : String(inputValue).trim());
+  const selectedLabelString = single ? resolveValueLabel.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__namespace.useMemo(() => {
+    if (!items) {
+      return empty.EMPTY_ARRAY;
+    }
+    if (isGrouped) {
+      return items.flatMap((group) => group.items);
+    }
+    return items;
+  }, [items, isGrouped]);
+  const filteredItems = React__namespace.useMemo(() => {
+    if (filteredItemsProp && !shouldIgnoreExternalFiltering) {
+      return filteredItemsProp;
+    }
+    if (!items) {
+      return empty.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__namespace.useMemo(() => {
+    if (isGrouped) {
+      const groups = filteredItems;
+      return groups.flatMap((g) => g.items);
+    }
+    return filteredItems;
+  }, [filteredItems, isGrouped]);
+  const store$1 = useRefWithInit.useRefWithInit(() => new Store.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 || empty.NOOP,
+    // Placeholder callbacks replaced on first render
+    setOpen: empty.NOOP,
+    setInputValue: empty.NOOP,
+    setSelectedValue: empty.NOOP,
+    setIndices: empty.NOOP,
+    onItemHighlighted: empty.NOOP,
+    handleSelection: empty.NOOP,
+    getItemProps: () => empty.EMPTY_OBJECT,
+    forceMount: empty.NOOP,
+    requestSubmit: empty.NOOP
+  })).current;
+  const fieldRawValue = selectionMode === "none" ? inputValue : selectedValue;
+  const fieldStringValue = React__namespace.useMemo(() => {
+    if (selectionMode === "none") {
+      return fieldRawValue;
+    }
+    if (Array.isArray(selectedValue)) {
+      return selectedValue.map((value) => resolveValueLabel.stringifyAsValue(value, itemToStringValue));
+    }
+    return resolveValueLabel.stringifyAsValue(selectedValue, itemToStringValue);
+  }, [fieldRawValue, itemToStringValue, selectionMode, selectedValue]);
+  const onItemHighlighted = useStableCallback.useStableCallback(onItemHighlightedProp);
+  const onOpenChangeComplete = useStableCallback.useStableCallback(onOpenChangeCompleteProp);
+  const activeIndex = useStore.useStore(store$1, store.selectors.activeIndex);
+  const selectedIndex = useStore.useStore(store$1, store.selectors.selectedIndex);
+  const positionerElement = useStore.useStore(store$1, store.selectors.positionerElement);
+  const listElement = useStore.useStore(store$1, store.selectors.listElement);
+  const triggerElement = useStore.useStore(store$1, store.selectors.triggerElement);
+  const inputElement = useStore.useStore(store$1, store.selectors.inputElement);
+  const inline = useStore.useStore(store$1, store.selectors.inline);
+  const inputInsidePopup = useStore.useStore(store$1, store.selectors.inputInsidePopup);
+  const triggerRef = useValueAsRef.useValueAsRef(triggerElement);
+  const {
+    mounted,
+    setMounted,
+    transitionStatus
+  } = useTransitionStatus.useTransitionStatus(open);
+  const {
+    openMethod,
+    triggerProps,
+    reset: resetOpenInteractionType
+  } = useOpenInteractionType.useOpenInteractionType(open);
+  useField.useField({
+    id,
+    name,
+    commit: validation.commit,
+    value: fieldRawValue,
+    controlRef: inputInsidePopup ? triggerRef : inputRef,
+    getValue: () => fieldStringValue
+  });
+  const forceMount = useStableCallback.useStableCallback(() => {
+    if (items) {
+      labelsRef.current = flatFilteredItems.map((item) => resolveValueLabel.stringifyAsLabel(item, itemToStringLabel));
+    } else {
+      store$1.set("forceMounted", true);
+    }
+  });
+  const initialSelectedValueRef = React__namespace.useRef(selectedValue);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (selectedValue !== initialSelectedValueRef.current) {
+      forceMount();
+    }
+  }, [forceMount, selectedValue]);
+  const setIndices = useStableCallback.useStableCallback((options) => {
+    store$1.update(options);
+    const type = options.type || "none";
+    if (options.activeIndex === void 0) {
+      return;
+    }
+    if (options.activeIndex === null) {
+      if (lastHighlightRef.current !== constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = constants.INITIAL_LAST_HIGHLIGHT;
+        onItemHighlighted(void 0, createBaseUIEventDetails.createGenericEventDetails(type, void 0, {
+          index: -1
+        }));
+      }
+    } else {
+      const activeValue = valuesRef.current[options.activeIndex];
+      lastHighlightRef.current = {
+        value: activeValue,
+        index: options.activeIndex
+      };
+      onItemHighlighted(activeValue, createBaseUIEventDetails.createGenericEventDetails(type, void 0, {
+        index: options.activeIndex
+      }));
+    }
+  });
+  const setInputValue = useStableCallback.useStableCallback((next, eventDetails) => {
+    var _a;
+    hadInputClearRef.current = eventDetails.reason === reasonParts.inputClear;
+    (_a = props.onInputValueChange) == null ? void 0 : _a.call(props, next, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    if (eventDetails.reason === reasonParts.inputChange) {
+      const hasQuery = next.trim() !== "";
+      if (hasQuery) {
+        setQueryChangedAfterOpen(true);
+      }
+      pendingQueryHighlightRef.current = {
+        hasQuery
+      };
+      if (hasQuery && autoHighlightMode && store$1.state.activeIndex == null) {
+        store$1.set("activeIndex", 0);
+      }
+    }
+    setInputValueUnwrapped(next);
+  });
+  const setOpen = useStableCallback.useStableCallback((nextOpen, eventDetails) => {
+    var _a;
+    if (open === nextOpen) {
+      return;
+    }
+    if (eventDetails.reason === "escape-key" && hasItems && flatFilteredItems.length === 0 && !store$1.state.emptyRef.current) {
+      eventDetails.allowPropagation();
+    }
+    (_a = props.onOpenChange) == null ? void 0 : _a.call(props, 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("", createBaseUIEventDetails.createChangeEventDetails(reasonParts.inputClear, eventDetails.event));
+      }
+    }
+    setOpenUnwrapped(nextOpen);
+    if (!nextOpen && inputInsidePopup && (eventDetails.reason === reasonParts.focusOut || eventDetails.reason === reasonParts.outsidePress)) {
+      setTouched(true);
+      setFocused(false);
+      if (validationMode === "onBlur") {
+        const valueToValidate = selectionMode === "none" ? inputValue : selectedValue;
+        validation.commit(valueToValidate);
+      }
+    }
+  });
+  const setSelectedValue = useStableCallback.useStableCallback((nextValue, eventDetails) => {
+    onSelectedValueChange == null ? void 0 : onSelectedValueChange(nextValue, eventDetails);
+    if (eventDetails.isCanceled) {
+      return;
+    }
+    setSelectedValueUnwrapped(nextValue);
+    const shouldFillInput = selectionMode === "none" && popupRef.current && fillInputOnItemPress || single && !store$1.state.inputInsidePopup;
+    if (shouldFillInput) {
+      setInputValue(resolveValueLabel.stringifyAsLabel(nextValue, itemToStringLabel), createBaseUIEventDetails.createChangeEventDetails(eventDetails.reason, eventDetails.event));
+    }
+    if (single && nextValue != null && eventDetails.reason !== reasonParts.inputChange && queryChangedAfterOpen) {
+      setCloseQuery(query);
+    }
+  });
+  const handleSelection = useStableCallback.useStableCallback((event, passedValue) => {
+    var _a;
+    let value = passedValue;
+    if (value === void 0) {
+      if (activeIndex === null) {
+        return;
+      }
+      value = valuesRef.current[activeIndex];
+    }
+    const targetEl = element.getTarget(event);
+    const overrideEvent = selectionEventRef.current ?? event;
+    selectionEventRef.current = null;
+    const eventDetails = createBaseUIEventDetails.createChangeEventDetails(reasonParts.itemPress, overrideEvent);
+    const href = (_a = targetEl == null ? void 0 : targetEl.closest("a")) == null ? void 0 : _a.getAttribute("href");
+    if (href) {
+      if (href.startsWith("#")) {
+        setOpen(false, eventDetails);
+      }
+      return;
+    }
+    if (multiple) {
+      const currentSelectedValue = Array.isArray(selectedValue) ? selectedValue : [];
+      const isCurrentlySelected = itemEquality.itemIncludes(currentSelectedValue, value, store$1.state.isItemEqualToValue);
+      const nextValue = isCurrentlySelected ? itemEquality.removeItem(currentSelectedValue, value, store$1.state.isItemEqualToValue) : [...currentSelectedValue, value];
+      setSelectedValue(nextValue, eventDetails);
+      const wasFiltering = inputRef.current ? inputRef.current.value.trim() !== "" : false;
+      if (!wasFiltering) {
+        return;
+      }
+      if (store$1.state.inputInsidePopup) {
+        setInputValue("", createBaseUIEventDetails.createChangeEventDetails(reasonParts.inputClear, eventDetails.event));
+      } else {
+        setOpen(false, eventDetails);
+      }
+    } else {
+      setSelectedValue(value, eventDetails);
+      setOpen(false, eventDetails);
+    }
+  });
+  const requestSubmit = useStableCallback.useStableCallback(() => {
+    var _a;
+    if (!store$1.state.submitOnItemClick) {
+      return;
+    }
+    const form = (_a = store$1.state.inputElement) == null ? void 0 : _a.form;
+    if (form && typeof form.requestSubmit === "function") {
+      form.requestSubmit();
+    }
+  });
+  const handleUnmount = useStableCallback.useStableCallback(() => {
+    setMounted(false);
+    onOpenChangeComplete == null ? void 0 : 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("", createBaseUIEventDetails.createChangeEventDetails(reasonParts.inputClear));
+    }
+    if (single) {
+      if (store$1.state.inputInsidePopup) {
+        if (inputRef.current && inputRef.current.value !== "") {
+          setInputValue("", createBaseUIEventDetails.createChangeEventDetails(reasonParts.inputClear));
+        }
+      } else {
+        const stringVal = resolveValueLabel.stringifyAsLabel(selectedValue, itemToStringLabel);
+        if (inputRef.current && inputRef.current.value !== stringVal) {
+          const reason = stringVal === "" ? reasonParts.inputClear : reasonParts.none;
+          setInputValue(stringVal, createBaseUIEventDetails.createChangeEventDetails(reason));
+        }
+      }
+    }
+  });
+  const resolvedPopupRef = React__namespace.useMemo(() => {
+    if (inline && positionerElement) {
+      return {
+        current: positionerElement.closest('[role="dialog"]')
+      };
+    }
+    return popupRef;
+  }, [inline, positionerElement]);
+  useOpenChangeComplete.useOpenChangeComplete({
+    enabled: !props.actionsRef,
+    open,
+    ref: resolvedPopupRef,
+    onComplete() {
+      if (!open) {
+        handleUnmount();
+      }
+    }
+  });
+  React__namespace.useImperativeHandle(props.actionsRef, () => ({
+    unmount: handleUnmount
+  }), [handleUnmount]);
+  useIsoLayoutEffect.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 = itemEquality.findItemIndex(registry, lastValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: lastIndex === -1 ? null : lastIndex
+      });
+    } else {
+      const index2 = itemEquality.findItemIndex(registry, selectedValue, isItemEqualToValue);
+      setIndices({
+        selectedIndex: index2 === -1 ? null : index2
+      });
+    }
+  }, [open, selectedValue, items, selectionMode, flatItems, multiple, isItemEqualToValue, setIndices]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (items) {
+      valuesRef.current = flatFilteredItems;
+      listRef.current.length = flatFilteredItems.length;
+    }
+  }, [items, flatFilteredItems]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    const pendingHighlight = pendingQueryHighlightRef.current;
+    if (pendingHighlight) {
+      if (pendingHighlight.hasQuery) {
+        if (autoHighlightMode) {
+          store$1.set("activeIndex", 0);
+        }
+      } else if (autoHighlightMode === "always") {
+        store$1.set("activeIndex", 0);
+      }
+      pendingQueryHighlightRef.current = null;
+    }
+    if (!open && !inline) {
+      return;
+    }
+    const shouldUseFlatFilteredItems = hasItems || hasFilteredItemsProp;
+    const candidateItems = shouldUseFlatFilteredItems ? flatFilteredItems : valuesRef.current;
+    const storeActiveIndex = store$1.state.activeIndex;
+    if (storeActiveIndex == null) {
+      if (autoHighlightMode === "always" && candidateItems.length > 0) {
+        store$1.set("activeIndex", 0);
+        return;
+      }
+      if (lastHighlightRef.current !== constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = constants.INITIAL_LAST_HIGHLIGHT;
+        store$1.state.onItemHighlighted(void 0, createBaseUIEventDetails.createGenericEventDetails(reasonParts.none, void 0, {
+          index: -1
+        }));
+      }
+      return;
+    }
+    if (storeActiveIndex >= candidateItems.length) {
+      if (lastHighlightRef.current !== constants.INITIAL_LAST_HIGHLIGHT) {
+        lastHighlightRef.current = constants.INITIAL_LAST_HIGHLIGHT;
+        store$1.state.onItemHighlighted(void 0, createBaseUIEventDetails.createGenericEventDetails(reasonParts.none, void 0, {
+          index: -1
+        }));
+      }
+      store$1.set("activeIndex", null);
+      return;
+    }
+    const nextActiveValue = candidateItems[storeActiveIndex];
+    const lastHighlightedValue = lastHighlightRef.current.value;
+    const isSameItem = lastHighlightedValue !== constants.NO_ACTIVE_VALUE && store$1.state.isItemEqualToValue(nextActiveValue, lastHighlightedValue);
+    if (lastHighlightRef.current.index !== storeActiveIndex || !isSameItem) {
+      lastHighlightRef.current = {
+        value: nextActiveValue,
+        index: storeActiveIndex
+      };
+      store$1.state.onItemHighlighted(nextActiveValue, createBaseUIEventDetails.createGenericEventDetails(reasonParts.none, void 0, {
+        index: storeActiveIndex
+      }));
+    }
+  }, [activeIndex, autoHighlightMode, hasFilteredItemsProp, hasItems, flatFilteredItems, inline, open, store$1]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (!items || selectionMode === "none") {
+      return;
+    }
+    const registry = flatItems;
+    if (multiple) {
+      const current = Array.isArray(selectedValue) ? selectedValue : empty.EMPTY_ARRAY;
+      const next = current.filter((v) => itemEquality.itemIncludes(registry, v, store$1.state.isItemEqualToValue));
+      if (next.length !== current.length) {
+        setSelectedValue(next, createBaseUIEventDetails.createChangeEventDetails(reasonParts.none));
+      }
+      return;
+    }
+    const isStillPresent = selectedValue == null || itemEquality.itemIncludes(registry, selectedValue, store$1.state.isItemEqualToValue);
+    if (isStillPresent) {
+      return;
+    }
+    let fallback = null;
+    if (defaultSelectedValue != null && itemEquality.itemIncludes(registry, defaultSelectedValue, store$1.state.isItemEqualToValue)) {
+      fallback = defaultSelectedValue;
+    }
+    setSelectedValue(fallback, createBaseUIEventDetails.createChangeEventDetails(reasonParts.none));
+  }, [items, flatItems, multiple, selectionMode, selectedValue, defaultSelectedValue, store$1, setSelectedValue]);
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    if (selectionMode === "none") {
+      setFilled(String(inputValue) !== "");
+      return;
+    }
+    setFilled(multiple ? Array.isArray(selectedValue) && selectedValue.length > 0 : selectedValue != null);
+  }, [setFilled, selectionMode, inputValue, selectedValue, multiple]);
+  React__namespace.useEffect(() => {
+    if (hasItems && autoHighlightMode && flatFilteredItems.length === 0) {
+      setIndices({
+        activeIndex: null
+      });
+    }
+  }, [hasItems, autoHighlightMode, flatFilteredItems.length, setIndices]);
+  useValueChanged.useValueChanged(query, () => {
+    if (!open || query === "" || query === String(initialDefaultInputValue)) {
+      return;
+    }
+    setQueryChangedAfterOpen(true);
+  });
+  useValueChanged.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$1.state.selectedIndex !== null && (!Array.isArray(selectedValue) || selectedValue.length === 0)) {
+      setIndices({
+        activeIndex: null,
+        selectedIndex: null
+      });
+    }
+    if (single && !hasInputValue && !inputInsidePopup) {
+      const nextInputValue = resolveValueLabel.stringifyAsLabel(selectedValue, itemToStringLabel);
+      if (inputValue !== nextInputValue) {
+        setInputValue(nextInputValue, createBaseUIEventDetails.createChangeEventDetails(reasonParts.none));
+      }
+    }
+  });
+  useValueChanged.useValueChanged(inputValue, () => {
+    if (selectionMode !== "none") {
+      return;
+    }
+    clearErrors(name);
+    setDirty(inputValue !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(inputValue);
+    } else {
+      validation.commit(inputValue, true);
+    }
+  });
+  useValueChanged.useValueChanged(items, () => {
+    if (!single || hasInputValue || inputInsidePopup || queryChangedAfterOpen) {
+      return;
+    }
+    const nextInputValue = resolveValueLabel.stringifyAsLabel(selectedValue, itemToStringLabel);
+    if (inputValue !== nextInputValue) {
+      setInputValue(nextInputValue, createBaseUIEventDetails.createChangeEventDetails(reasonParts.none));
+    }
+  });
+  const floatingRootContext = useFloatingRootContext.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__namespace.useMemo(() => {
+    const isPlainInput = (inputElement == null ? void 0 : 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 == null ? void 0 : listElement.id : void 0;
+      reference["aria-autocomplete"] = autoComplete;
+    }
+    return {
+      reference,
+      floating: {
+        role: "presentation"
+      }
+    };
+  }, [inputElement, open, ariaExpanded, ariaHasPopup, listElement == null ? void 0 : listElement.id, autoComplete]);
+  const click = useClick.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.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 = element.getTarget(event);
+      return !element.contains(triggerElement, target) && !element.contains(clearRef.current, target) && !element.contains(chipsContainerRef.current, target);
+    }
+  });
+  const listNavigation = useListNavigation.useListNavigation(floatingRootContext, {
+    enabled: !readOnly && !disabled,
+    id,
+    listRef,
+    activeIndex,
+    selectedIndex,
+    virtual: true,
+    loopFocus,
+    allowEscape: loopFocus && !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.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.useInteractions([role, click, dismiss, listNavigation]);
+  useOnFirstRender.useOnFirstRender(() => {
+    store$1.update({
+      inline: inlineProp,
+      popupProps: getFloatingProps(),
+      inputProps: getReferenceProps(),
+      triggerProps,
+      getItemProps,
+      setOpen,
+      setInputValue,
+      setSelectedValue,
+      setIndices,
+      onItemHighlighted,
+      handleSelection,
+      forceMount,
+      requestSubmit
+    });
+  });
+  useIsoLayoutEffect.useIsoLayoutEffect(() => {
+    store$1.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$1, 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.useMergedRefs(inputRefProp, validation.inputRef);
+  const itemsContextValue = React__namespace.useMemo(() => ({
+    query,
+    filteredItems,
+    flatFilteredItems
+  }), [query, filteredItems, flatFilteredItems]);
+  const serializedValue = React__namespace.useMemo(() => {
+    if (Array.isArray(fieldRawValue)) {
+      return "";
+    }
+    return resolveValueLabel.stringifyAsValue(fieldRawValue, itemToStringValue);
+  }, [fieldRawValue, itemToStringValue]);
+  const hasMultipleSelection = multiple && Array.isArray(selectedValue) && selectedValue.length > 0;
+  const hiddenInputs = React__namespace.useMemo(() => {
+    if (!multiple || !Array.isArray(selectedValue) || !name) {
+      return null;
+    }
+    return selectedValue.map((value) => {
+      const currentSerializedValue = resolveValueLabel.stringifyAsValue(value, itemToStringValue);
+      return /* @__PURE__ */ jsxRuntime.jsx("input", {
+        type: "hidden",
+        name,
+        value: currentSerializedValue
+      }, currentSerializedValue);
+    });
+  }, [multiple, selectedValue, name, itemToStringValue]);
+  const children = /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, {
+    children: [props.children, /* @__PURE__ */ jsxRuntime.jsx("input", {
+      ...validation.getInputValidationProps({
+        // Move focus when the hidden input is focused.
+        onFocus() {
+          var _a;
+          if (inputInsidePopup) {
+            triggerElement == null ? void 0 : triggerElement.focus();
+            return;
+          }
+          (_a = inputRef.current || triggerElement) == null ? void 0 : _a.focus();
+        },
+        // Handle browser autofill.
+        onChange(event) {
+          if (event.nativeEvent.defaultPrevented) {
+            return;
+          }
+          const nextValue = event.target.value;
+          const details = createBaseUIEventDetails.createChangeEventDetails(reasonParts.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 = resolveValueLabel.stringifyAsValue(v, itemToStringValue);
+              if (candidate.toLowerCase() === nextValue.toLowerCase()) {
+                return true;
+              }
+              return false;
+            });
+            if (matchingValue != null) {
+              setDirty(matchingValue !== validityData.initialValue);
+              setSelectedValue == null ? void 0 : setSelectedValue(matchingValue, details);
+              if (shouldValidateOnChange()) {
+                validation.commit(matchingValue);
+              }
+            }
+          }
+          if (items) {
+            handleChange();
+          } else {
+            forceMount();
+            queueMicrotask(handleChange);
+          }
+        }
+      }),
+      name: multiple || selectionMode === "none" ? void 0 : name,
+      disabled,
+      required: required && !hasMultipleSelection,
+      readOnly,
+      value: serializedValue,
+      ref: hiddenInputRef,
+      style: name ? visuallyHidden.visuallyHiddenInput : visuallyHidden.visuallyHidden,
+      tabIndex: -1,
+      "aria-hidden": true
+    }), hiddenInputs]
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(ComboboxRootContext.ComboboxRootContext.Provider, {
+    value: store$1,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxRootContext.ComboboxFloatingContext.Provider, {
+      value: floatingRootContext,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxRootContext.ComboboxDerivedItemsContext.Provider, {
+        value: itemsContextValue,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ComboboxRootContext.ComboboxInputValueContext.Provider, {
+          value: inputValue,
+          children
+        })
+      })
+    })
+  });
+}
+exports.AriaCombobox = AriaCombobox;
+//# sourceMappingURL=AriaCombobox.cjs.map