@arun-dev/headless 4.6.0 → 4.8.0

package/dist/combobox/index.cjs

@@ -0,0 +1,1057 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/combobox/index.ts
+var combobox_exports = {};
+__export(combobox_exports, {
+  Combobox: () => index_parts_exports,
+  defaultFilter: () => defaultFilter
+});
+module.exports = __toCommonJS(combobox_exports);
+
+// src/combobox/index.parts.ts
+var index_parts_exports = {};
+__export(index_parts_exports, {
+  Chip: () => ComboboxChip,
+  ChipRemove: () => ComboboxChipRemove,
+  Clear: () => ComboboxClear,
+  Empty: () => ComboboxEmpty,
+  Input: () => ComboboxInput,
+  Item: () => ComboboxItem,
+  List: () => ComboboxList,
+  Popup: () => ComboboxPopup,
+  Root: () => ComboboxRoot,
+  Status: () => ComboboxStatus,
+  Trigger: () => ComboboxTrigger
+});
+
+// src/combobox/ComboboxRoot.tsx
+var import_react3 = require("react");
+
+// src/core/anchoring.ts
+function anchorNameFor(id) {
+  return `--hl-anchor-${id.replace(/[^a-zA-Z0-9_-]/g, "")}`;
+}
+var POSITION_AREA = {
+  bottom: { start: "bottom span-right", center: "bottom", end: "bottom span-left" },
+  top: { start: "top span-right", center: "top", end: "top span-left" },
+  right: { start: "right span-bottom", center: "right", end: "right span-top" },
+  left: { start: "left span-bottom", center: "left", end: "left span-top" }
+};
+function anchoredPopupStyle(anchorName, side, align) {
+  return {
+    positionAnchor: anchorName,
+    positionArea: POSITION_AREA[side][align],
+    // Flip across the axis it opens on; the other axis is left alone.
+    positionTryFallbacks: side === "top" || side === "bottom" ? "flip-block" : "flip-inline"
+  };
+}
+function anchoredDataAttributes(side, align) {
+  return { "data-side": side, "data-align": align };
+}
+
+// src/core/rovingFocus.ts
+function byDocumentOrder(a, b) {
+  const x = a.ref.current;
+  const y = b.ref.current;
+  if (!x || !y) return 0;
+  return x.compareDocumentPosition(y) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function rovingIndex(key, {
+  count,
+  current,
+  orientation,
+  rtl
+}) {
+  if (count === 0) return null;
+  const [prevKey, nextKey] = orientation === "vertical" ? ["ArrowUp", "ArrowDown"] : rtl ? ["ArrowRight", "ArrowLeft"] : ["ArrowLeft", "ArrowRight"];
+  switch (key) {
+    case nextKey:
+      return current < 0 ? 0 : (current + 1) % count;
+    case prevKey:
+      return current < 0 ? count - 1 : (current - 1 + count) % count;
+    case "Home":
+      return 0;
+    case "End":
+      return count - 1;
+    default:
+      return null;
+  }
+}
+
+// src/core/useControlled.ts
+var import_react = require("react");
+function useControlled({
+  controlled,
+  default: defaultValue,
+  name = "Component",
+  state = "value"
+}) {
+  const { current: isControlled } = (0, import_react.useRef)(controlled !== void 0);
+  const [uncontrolled, setUncontrolled] = (0, import_react.useState)(defaultValue);
+  const defaultRef = (0, import_react.useRef)(defaultValue);
+  const value = isControlled ? controlled : uncontrolled;
+  if (process.env.NODE_ENV !== "production") {
+    if (isControlled !== (controlled !== void 0)) {
+      console.error(
+        `${name}: cannot switch between controlled and uncontrolled \`${state}\`. Decide which one this component is for the whole of its life.`
+      );
+    }
+    if (!isControlled && defaultRef.current !== defaultValue) {
+      console.error(
+        `${name}: cannot change the default \`${state}\` after mount. It is only read once, so later changes are silently ignored.`
+      );
+    }
+  }
+  const setValue = (0, import_react.useCallback)(
+    (next) => {
+      if (!isControlled) setUncontrolled(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue];
+}
+
+// src/combobox/defaultFilter.ts
+function fold(text) {
+  return text.normalize("NFD").replace(/\p{M}/gu, "").toLocaleLowerCase();
+}
+function defaultFilter(items, query, itemToString) {
+  const needle = fold(query.trim());
+  if (needle === "") return [...items];
+  return items.filter((item) => fold(itemToString(item)).includes(needle));
+}
+
+// src/combobox/ComboboxRootContext.ts
+var import_react2 = require("react");
+function createHighlightStore() {
+  let current = { index: -1, reason: "none" };
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    get: () => current,
+    set(next) {
+      if (next.index === current.index && next.reason === current.reason) return;
+      current = next;
+      for (const listener of listeners) listener();
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var ComboboxRootContext = (0, import_react2.createContext)(null);
+function useComboboxRootContext(part) {
+  const context = (0, import_react2.useContext)(ComboboxRootContext);
+  if (context === null) {
+    throw new Error(`<Combobox.${part}> must be rendered inside <Combobox.Root>.`);
+  }
+  return context;
+}
+
+// src/combobox/ComboboxRoot.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function defaultItemToString(item) {
+  if (typeof item === "string") return item;
+  if (item !== null && typeof item === "object" && "label" in item) return String(item.label);
+  return String(item);
+}
+function ComboboxRoot({
+  items,
+  itemToString: itemToStringProp,
+  itemToKey: itemToKeyProp,
+  filter,
+  multiple: multipleProp,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  inputValue: inputValueProp,
+  defaultInputValue,
+  onInputValueChange,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  onItemHighlighted,
+  onLoadMore,
+  loading = false,
+  disabled = false,
+  name,
+  form,
+  children
+}) {
+  const multiple = multipleProp === true;
+  const itemToString = itemToStringProp ?? defaultItemToString;
+  const itemToKey = itemToKeyProp ?? itemToString;
+  const [value, setValueState] = useControlled({
+    controlled: valueProp,
+    default: defaultValue ?? (multiple ? [] : null),
+    name: "Combobox.Root",
+    state: "value"
+  });
+  const selectedItems = (0, import_react3.useMemo)(
+    () => multiple ? value : value == null ? [] : [value],
+    [multiple, value]
+  );
+  const selectedKeys = (0, import_react3.useMemo)(
+    () => new Set(selectedItems.map((item) => itemToKey(item))),
+    [selectedItems, itemToKey]
+  );
+  const selectedLabel = !multiple && selectedItems[0] != null ? itemToString(selectedItems[0]) : "";
+  const [inputValue, setInputValueState] = useControlled({
+    controlled: inputValueProp,
+    default: defaultInputValue ?? selectedLabel,
+    name: "Combobox.Root",
+    state: "inputValue"
+  });
+  const [open, setOpenState] = useControlled({
+    controlled: openProp,
+    default: defaultOpen ?? false,
+    name: "Combobox.Root",
+    state: "open"
+  });
+  const query = !multiple && inputValue === selectedLabel ? "" : inputValue;
+  const deferredQuery = (0, import_react3.useDeferredValue)(query);
+  const filteredItems = (0, import_react3.useMemo)(() => {
+    if (filter === null) return items;
+    const run = filter ?? defaultFilter;
+    return run(items, deferredQuery, itemToString);
+  }, [items, filter, deferredQuery, itemToString]);
+  const indexByKey = (0, import_react3.useMemo)(
+    () => new Map(filteredItems.map((item, index) => [itemToKey(item), index])),
+    [filteredItems, itemToKey]
+  );
+  const [highlight] = (0, import_react3.useState)(createHighlightStore);
+  const setHighlight = (0, import_react3.useCallback)(
+    (index, reason) => {
+      if (highlight.get().index === index && highlight.get().reason === reason) return;
+      highlight.set({ index, reason });
+      onItemHighlighted?.(filteredItems[index], { index, reason });
+    },
+    [highlight, filteredItems, onItemHighlighted]
+  );
+  (0, import_react3.useEffect)(() => {
+    if (highlight.get().index !== -1) setHighlight(-1, "none");
+  }, [filteredItems]);
+  const setValue = (0, import_react3.useCallback)(
+    (next, reason) => {
+      setValueState(next);
+      onValueChange?.(next, {
+        reason
+      });
+    },
+    [setValueState, onValueChange]
+  );
+  const setInputValue = (0, import_react3.useCallback)(
+    (next, reason) => {
+      if (next === inputValue) return;
+      setInputValueState(next);
+      onInputValueChange?.(next, { reason });
+    },
+    [inputValue, setInputValueState, onInputValueChange]
+  );
+  const setOpen = (0, import_react3.useCallback)(
+    (next, reason) => {
+      if (next === open) return;
+      setOpenState(next);
+      onOpenChange?.(next, { reason });
+      if (!next) setHighlight(-1, "none");
+    },
+    [open, setOpenState, onOpenChange, setHighlight]
+  );
+  const close = (0, import_react3.useCallback)(
+    (reason) => {
+      setOpen(false, reason);
+      setInputValue(selectedLabel, reason);
+    },
+    [setOpen, setInputValue, selectedLabel]
+  );
+  const select = (0, import_react3.useCallback)(
+    (item) => {
+      const key = itemToKey(item);
+      if (multiple) {
+        const current = value;
+        setValue(
+          selectedKeys.has(key) ? current.filter((i) => itemToKey(i) !== key) : [...current, item],
+          "item-press"
+        );
+        setInputValue("", "item-press");
+      } else {
+        if (!selectedKeys.has(key)) setValue(item, "item-press");
+        setInputValue(itemToString(item), "item-press");
+      }
+      setOpen(false, "item-press");
+    },
+    [multiple, value, selectedKeys, itemToKey, itemToString, setValue, setInputValue, setOpen]
+  );
+  const remove = (0, import_react3.useCallback)(
+    (item, reason) => {
+      if (!multiple) return;
+      const key = itemToKey(item);
+      setValue(
+        value.filter((i) => itemToKey(i) !== key),
+        reason
+      );
+    },
+    [multiple, value, itemToKey, setValue]
+  );
+  const clearSelection = (0, import_react3.useCallback)(
+    (reason) => setValue(multiple ? [] : null, reason),
+    [multiple, setValue]
+  );
+  const clear = (0, import_react3.useCallback)(() => {
+    setInputValue("", "clear");
+    clearSelection("clear");
+    setHighlight(-1, "none");
+  }, [setInputValue, clearSelection, setHighlight]);
+  const selectedKey = !multiple && selectedItems[0] != null ? itemToKey(selectedItems[0]) : null;
+  const lastSelectedKeyRef = (0, import_react3.useRef)(selectedKey);
+  (0, import_react3.useEffect)(() => {
+    if (lastSelectedKeyRef.current === selectedKey) return;
+    lastSelectedKeyRef.current = selectedKey;
+    setInputValueState(selectedLabel);
+  }, [selectedKey]);
+  const [chips, setChips] = (0, import_react3.useState)([]);
+  const registerChip = (0, import_react3.useCallback)((entry) => {
+    setChips((current) => [...current, entry].sort(byDocumentOrder));
+    return () => setChips((current) => current.filter((c) => c !== entry));
+  }, []);
+  const [disabledKeys] = (0, import_react3.useState)(() => /* @__PURE__ */ new Set());
+  const [insideRefs] = (0, import_react3.useState)(() => /* @__PURE__ */ new Set());
+  const registerInside = (0, import_react3.useCallback)(
+    (ref) => {
+      insideRefs.add(ref);
+      return () => {
+        insideRefs.delete(ref);
+      };
+    },
+    [insideRefs]
+  );
+  const inputRef = (0, import_react3.useRef)(null);
+  const popupRef = (0, import_react3.useRef)(null);
+  const { current: initial } = (0, import_react3.useRef)({ value, inputValue });
+  (0, import_react3.useEffect)(() => {
+    const owner = inputRef.current?.form;
+    if (!owner) return;
+    function onReset(event) {
+      queueMicrotask(() => {
+        if (event.defaultPrevented) return;
+        if (value !== initial.value) setValue(initial.value, "form-reset");
+        setInputValue(initial.inputValue, "form-reset");
+      });
+    }
+    owner.addEventListener("reset", onReset);
+    return () => owner.removeEventListener("reset", onReset);
+  }, [value, initial, setValue, setInputValue]);
+  const isInside = (0, import_react3.useCallback)(
+    (node) => [inputRef, popupRef, ...insideRefs, ...chips.map((chip) => chip.ref)].some(
+      (ref) => ref.current?.contains(node) ?? false
+    ),
+    [insideRefs, chips]
+  );
+  const id = (0, import_react3.useId)();
+  const context = (0, import_react3.useMemo)(
+    () => ({
+      open,
+      multiple,
+      disabled,
+      inputValue,
+      loading,
+      filteredItems,
+      itemToString,
+      itemToKey,
+      indexByKey,
+      selectedKeys,
+      selectedItems,
+      disabledKeys,
+      highlight,
+      setHighlight,
+      setOpen,
+      setInputValue,
+      select,
+      remove,
+      clearSelection,
+      clear,
+      close,
+      registerChip,
+      chips,
+      registerInside,
+      isInside,
+      onLoadMore,
+      inputId: `${id}-input`,
+      listId: `${id}-list`,
+      optionId: (index) => `${id}-option-${index}`,
+      anchorName: anchorNameFor(id),
+      inputRef,
+      popupRef
+    }),
+    [
+      open,
+      multiple,
+      disabled,
+      inputValue,
+      loading,
+      filteredItems,
+      itemToString,
+      itemToKey,
+      indexByKey,
+      selectedKeys,
+      selectedItems,
+      disabledKeys,
+      highlight,
+      setHighlight,
+      setOpen,
+      setInputValue,
+      select,
+      remove,
+      clearSelection,
+      clear,
+      close,
+      registerChip,
+      chips,
+      registerInside,
+      isInside,
+      onLoadMore,
+      id
+    ]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ComboboxRootContext.Provider, { value: context, children: [
+    children,
+    name !== void 0 && (multiple ? selectedItems : [selectedItems[0] ?? null]).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "hidden",
+        name,
+        form,
+        disabled,
+        value: item === null ? "" : itemToKey(item)
+      },
+      item === null ? index : itemToKey(item)
+    ))
+  ] });
+}
+
+// src/combobox/ComboboxInput.tsx
+var import_react5 = require("react");
+
+// src/core/useRender.ts
+var import_react4 = require("react");
+
+// src/core/mergeProps.ts
+function isEventHandler(key) {
+  return key.length > 2 && key.startsWith("on") && key[2] === key[2]?.toUpperCase();
+}
+function mergeRefs(...refs) {
+  return (node) => {
+    const cleanups = refs.map((ref) => {
+      if (typeof ref === "function") {
+        const result = ref(node);
+        return typeof result === "function" ? result : () => ref(null);
+      }
+      if (ref && typeof ref === "object") {
+        ref.current = node;
+        return () => {
+          ref.current = null;
+        };
+      }
+      return void 0;
+    });
+    return () => {
+      cleanups.forEach((cleanup) => {
+        if (typeof cleanup === "function") cleanup();
+      });
+    };
+  };
+}
+function isSyntheticEvent(event) {
+  return typeof event === "object" && event !== null && "nativeEvent" in event;
+}
+function makeEventPreventable(event) {
+  if (Object.prototype.hasOwnProperty.call(event, "preventComponentHandler")) return;
+  const target = event;
+  target.preventComponentHandler = () => {
+    target.componentHandlerPrevented = true;
+  };
+}
+function isComponentHandlerPrevented(event) {
+  return typeof event === "object" && event !== null && event.componentHandlerPrevented === true;
+}
+function chainHandlers(earlier, value) {
+  return (...args) => {
+    const event = args[0];
+    if (isSyntheticEvent(event)) makeEventPreventable(event);
+    value(...args);
+    if (isComponentHandlerPrevented(event)) return;
+    earlier(...args);
+  };
+}
+function mergeProps(...objects) {
+  const merged = {};
+  for (const props of objects) {
+    if (!props) continue;
+    for (const key of Object.keys(props)) {
+      const value = props[key];
+      if (value === void 0) continue;
+      if (isEventHandler(key) && typeof value === "function") {
+        const earlier = merged[key];
+        merged[key] = typeof earlier === "function" ? chainHandlers(earlier, value) : value;
+      } else if (key === "className") {
+        merged.className = merged.className ? `${String(merged.className)} ${String(value)}` : value;
+      } else if (key === "style") {
+        merged.style = { ...merged.style, ...value };
+      } else if (key === "ref") {
+        merged.ref = merged.ref ? mergeRefs(merged.ref, value) : value;
+      } else {
+        merged[key] = value;
+      }
+    }
+  }
+  return merged;
+}
+
+// src/core/useRender.ts
+function useRender({
+  render,
+  defaultTagName,
+  props,
+  consumerProps
+}) {
+  const merged = mergeProps(props, consumerProps);
+  if ((0, import_react4.isValidElement)(render)) {
+    return (0, import_react4.cloneElement)(render, mergeProps(merged, render.props));
+  }
+  return (0, import_react4.createElement)(defaultTagName, merged);
+}
+
+// src/combobox/comboboxDataAttributes.ts
+function comboboxDataAttributes({ open, disabled }) {
+  return {
+    "data-open": open ? "" : void 0,
+    "data-closed": open ? void 0 : "",
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+function comboboxItemDataAttributes({
+  selected,
+  highlighted,
+  disabled
+}) {
+  return {
+    "data-selected": selected ? "" : void 0,
+    "data-highlighted": highlighted ? "" : void 0,
+    "data-disabled": disabled ? "" : void 0
+  };
+}
+function comboboxClearDataAttributes(visible) {
+  return { "data-visible": visible ? "" : void 0 };
+}
+
+// src/combobox/ComboboxInput.tsx
+function ComboboxInput({ className, render, ...rest }) {
+  const {
+    open,
+    multiple,
+    disabled,
+    inputValue,
+    filteredItems,
+    itemToKey,
+    selectedItems,
+    selectedKeys,
+    disabledKeys,
+    highlight,
+    setHighlight,
+    setOpen,
+    setInputValue,
+    select,
+    remove,
+    clearSelection,
+    close,
+    chips,
+    inputId,
+    listId,
+    optionId,
+    anchorName,
+    inputRef,
+    popupRef
+  } = useComboboxRootContext("Input");
+  const highlighted = (0, import_react5.useSyncExternalStore)(
+    highlight.subscribe,
+    () => highlight.get().index,
+    () => -1
+  );
+  function enabledIndices() {
+    const indices = [];
+    filteredItems.forEach((item, index) => {
+      if (!disabledKeys.has(itemToKey(item))) indices.push(index);
+    });
+    return indices;
+  }
+  function openingIndex(key, enabled) {
+    if (!multiple && selectedItems[0] != null) {
+      const selected = enabled.find((i) => selectedKeys.has(itemToKey(filteredItems[i])));
+      if (selected !== void 0) return selected;
+    }
+    return (key === "ArrowDown" ? enabled[0] : enabled.at(-1)) ?? -1;
+  }
+  function moveHighlight(key) {
+    const enabled = enabledIndices();
+    const next = rovingIndex(key, {
+      count: enabled.length,
+      current: enabled.indexOf(highlighted),
+      orientation: "vertical",
+      rtl: false
+    });
+    if (next !== null) setHighlight(enabled[next] ?? -1, "keyboard");
+  }
+  return useRender({
+    render,
+    defaultTagName: "input",
+    props: {
+      id: inputId,
+      type: "text",
+      role: "combobox",
+      autoComplete: "off",
+      "aria-autocomplete": "list",
+      "aria-expanded": open,
+      "aria-controls": listId,
+      "aria-activedescendant": open && highlighted >= 0 ? optionId(highlighted) : void 0,
+      disabled: disabled || void 0,
+      value: inputValue,
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: { anchorName },
+      className,
+      ref: inputRef,
+      onChange(event) {
+        const text = event.target.value;
+        setInputValue(text, "input");
+        if (!multiple && text === "" && selectedItems.length > 0) clearSelection("input");
+        setOpen(true, "input");
+      },
+      onClick() {
+        if (!disabled) setOpen(true, "input-press");
+      },
+      onKeyDown(event) {
+        const { key } = event;
+        if (key === "ArrowDown" || key === "ArrowUp") {
+          event.preventDefault();
+          if (!open) {
+            setOpen(true, "keyboard");
+            if (!event.altKey) setHighlight(openingIndex(key, enabledIndices()), "keyboard");
+            return;
+          }
+          moveHighlight(key);
+          return;
+        }
+        if ((key === "Home" || key === "End") && open) {
+          event.preventDefault();
+          moveHighlight(key);
+          return;
+        }
+        if (key === "Enter") {
+          if (!open || highlighted < 0) return;
+          event.preventDefault();
+          const item = filteredItems[highlighted];
+          if (!disabledKeys.has(itemToKey(item))) select(item);
+          return;
+        }
+        if (key === "Escape") {
+          if (!open) return;
+          event.preventDefault();
+          close("escape");
+          return;
+        }
+        if (!multiple) return;
+        if (key === "Backspace" && inputValue === "" && selectedItems.length > 0) {
+          remove(selectedItems.at(-1), "chip-remove");
+          return;
+        }
+        const input = event.currentTarget;
+        if (key === "ArrowLeft" && chips.length > 0 && input.selectionStart === 0 && input.selectionEnd === 0) {
+          event.preventDefault();
+          chips.at(-1)?.ref.current?.focus();
+        }
+      },
+      onBlur(event) {
+        const next = event.relatedTarget;
+        if (next && popupRef.current?.contains(next)) return;
+        if (next && chips.some((chip) => chip.ref.current === next)) {
+          setOpen(false, "blur");
+          return;
+        }
+        close("blur");
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxTrigger.tsx
+var import_react6 = require("react");
+function ComboboxTrigger({ className, children, render, ...rest }) {
+  const { open, multiple, disabled, setOpen, close, listId, inputRef, registerInside } = useComboboxRootContext("Trigger");
+  const elementRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      "aria-expanded": open,
+      "aria-controls": listId,
+      disabled: disabled || void 0,
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (open) close("trigger-press");
+        else setOpen(true, "trigger-press");
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxClear.tsx
+var import_react7 = require("react");
+function ComboboxClear({ className, children, render, ...rest }) {
+  const { disabled, selectedItems, clear, inputRef, registerInside } = useComboboxRootContext("Clear");
+  const elementRef = (0, import_react7.useRef)(null);
+  (0, import_react7.useLayoutEffect)(() => registerInside(elementRef), [registerInside]);
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled || void 0,
+      ...comboboxClearDataAttributes(selectedItems.length > 0),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (disabled) return;
+        clear();
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxPopup.tsx
+var import_react8 = require("react");
+function ComboboxPopup({
+  side = "bottom",
+  align = "start",
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { open, multiple, disabled, setOpen, close, isInside, anchorName, inputRef, popupRef } = useComboboxRootContext("Popup");
+  (0, import_react8.useEffect)(() => {
+    if (!open) return;
+    function onPointerDown(event) {
+      if (event.target instanceof Node && isInside(event.target)) return;
+      close("outside-press");
+    }
+    document.addEventListener("pointerdown", onPointerDown, true);
+    return () => document.removeEventListener("pointerdown", onPointerDown, true);
+  }, [open, isInside, close]);
+  const [, resync] = (0, import_react8.useReducer)((n) => n + 1, 0);
+  (0, import_react8.useEffect)(() => {
+    const popup = popupRef.current;
+    if (!popup || typeof popup.showPopover !== "function") return;
+    const shown = popup.matches(":popover-open");
+    if (open && !shown) {
+      popup.showPopover({ source: inputRef.current ?? void 0 });
+      if (!popup.matches(":popover-open")) setOpen(false, "outside-press");
+    } else if (!open && shown) {
+      popup.hidePopover();
+    }
+  });
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      popover: "manual",
+      ...anchoredDataAttributes(side, align),
+      ...comboboxDataAttributes({ open, multiple, disabled }),
+      style: anchoredPopupStyle(anchorName, side, align),
+      className,
+      children,
+      ref: popupRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onToggle(event) {
+        if (event.target !== event.currentTarget) return;
+        if (event.nativeEvent.newState !== "closed") return;
+        close("outside-press");
+        resync();
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxList.tsx
+var import_react9 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ComboboxList({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { multiple, loading, filteredItems, onLoadMore, listId } = useComboboxRootContext("List");
+  const content = typeof children === "function" ? filteredItems.map((item, index) => children(item, index)) : children;
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      id: listId,
+      role: "listbox",
+      "aria-multiselectable": multiple || void 0,
+      "aria-busy": loading || void 0,
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+        content,
+        onLoadMore && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadMoreSentinel, {})
+      ] })
+    },
+    consumerProps: rest
+  });
+}
+function LoadMoreSentinel() {
+  const { open, loading, filteredItems, onLoadMore } = useComboboxRootContext("List");
+  const ref = (0, import_react9.useRef)(null);
+  const onLoadMoreRef = (0, import_react9.useRef)(onLoadMore);
+  onLoadMoreRef.current = onLoadMore;
+  (0, import_react9.useEffect)(() => {
+    const element = ref.current;
+    if (!element || !open || loading || typeof IntersectionObserver === "undefined") return;
+    const observer = new IntersectionObserver((entries) => {
+      if (entries.some((entry) => entry.isIntersecting)) onLoadMoreRef.current?.();
+    });
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, [open, loading, filteredItems.length]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, "aria-hidden": "true", "data-load-more": "", style: { blockSize: 1 } });
+}
+
+// src/combobox/ComboboxItem.tsx
+var import_react10 = require("react");
+function ComboboxItem({
+  value,
+  disabled = false,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const {
+    itemToKey,
+    indexByKey,
+    selectedKeys,
+    disabledKeys,
+    highlight,
+    setHighlight,
+    select,
+    optionId
+  } = useComboboxRootContext("Item");
+  const key = itemToKey(value);
+  const index = indexByKey.get(key) ?? -1;
+  const selected = selectedKeys.has(key);
+  const highlighted = (0, import_react10.useSyncExternalStore)(
+    highlight.subscribe,
+    () => index >= 0 && highlight.get().index === index,
+    () => false
+  );
+  const elementRef = (0, import_react10.useRef)(null);
+  (0, import_react10.useLayoutEffect)(() => {
+    if (!disabled) return;
+    disabledKeys.add(key);
+    return () => {
+      disabledKeys.delete(key);
+    };
+  }, [disabled, disabledKeys, key]);
+  (0, import_react10.useEffect)(() => {
+    if (highlighted && highlight.get().reason === "keyboard") {
+      elementRef.current?.scrollIntoView?.({ block: "nearest" });
+    }
+  }, [highlighted, highlight]);
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      id: index >= 0 ? optionId(index) : void 0,
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled || void 0,
+      ...comboboxItemDataAttributes({ selected, highlighted, disabled }),
+      className,
+      children,
+      ref: elementRef,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onPointerMove() {
+        if (!disabled && !highlighted && index >= 0) setHighlight(index, "pointer");
+      },
+      onClick() {
+        if (!disabled) select(value);
+      }
+    },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxEmpty.tsx
+function ComboboxEmpty({ className, children, render, ...rest }) {
+  const { filteredItems, loading } = useComboboxRootContext("Empty");
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: { className, children },
+    consumerProps: rest
+  });
+  return filteredItems.length === 0 && !loading ? element : null;
+}
+
+// src/combobox/ComboboxStatus.tsx
+function ComboboxStatus({ className, children, render, ...rest }) {
+  useComboboxRootContext("Status");
+  return useRender({
+    render,
+    defaultTagName: "div",
+    props: { role: "status", "aria-live": "polite", "aria-atomic": true, className, children },
+    consumerProps: rest
+  });
+}
+
+// src/combobox/ComboboxChip.tsx
+var import_react11 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ComboboxChipContext = (0, import_react11.createContext)(null);
+function useComboboxChipContext() {
+  const context = (0, import_react11.useContext)(ComboboxChipContext);
+  if (context === null) {
+    throw new Error("<Combobox.ChipRemove> must be rendered inside <Combobox.Chip>.");
+  }
+  return context;
+}
+function ComboboxChip({
+  value,
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { disabled, itemToKey, remove, registerChip, chips, inputRef } = useComboboxRootContext("Chip");
+  const key = itemToKey(value);
+  const elementRef = (0, import_react11.useRef)(null);
+  (0, import_react11.useLayoutEffect)(() => registerChip({ key, ref: elementRef }), [registerChip, key]);
+  const chipContext = (0, import_react11.useMemo)(() => ({ value }), [value]);
+  function focusAt(index) {
+    const chip = chips[index];
+    if (chip) chip.ref.current?.focus();
+    else inputRef.current?.focus();
+  }
+  const element = useRender({
+    render,
+    defaultTagName: "div",
+    props: {
+      tabIndex: -1,
+      "data-disabled": disabled ? "" : void 0,
+      className,
+      children,
+      ref: elementRef,
+      onKeyDown(event) {
+        const index = chips.findIndex((chip) => chip.ref.current === elementRef.current);
+        switch (event.key) {
+          case "ArrowLeft":
+            event.preventDefault();
+            if (index > 0) focusAt(index - 1);
+            return;
+          case "ArrowRight":
+            event.preventDefault();
+            focusAt(index + 1);
+            return;
+          case "Backspace":
+          case "Delete":
+            event.preventDefault();
+            if (disabled) return;
+            remove(value, "chip-remove");
+            focusAt(index + 1 < chips.length ? index + 1 : chips.length);
+            return;
+          case "Escape":
+            inputRef.current?.focus();
+            return;
+        }
+      }
+    },
+    consumerProps: rest
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ComboboxChipContext.Provider, { value: chipContext, children: element });
+}
+
+// src/combobox/ComboboxChipRemove.tsx
+function ComboboxChipRemove({
+  className,
+  children,
+  render,
+  ...rest
+}) {
+  const { disabled, remove, inputRef } = useComboboxRootContext("ChipRemove");
+  const { value } = useComboboxChipContext();
+  return useRender({
+    render,
+    defaultTagName: "button",
+    props: {
+      type: "button",
+      tabIndex: -1,
+      disabled: disabled || void 0,
+      className,
+      children,
+      onMouseDown(event) {
+        event.preventDefault();
+      },
+      onClick() {
+        if (disabled) return;
+        remove(value, "chip-remove");
+        inputRef.current?.focus();
+      }
+    },
+    consumerProps: rest
+  });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Combobox,
+  defaultFilter
+});