@dxos/react-ui-searchlist 0.8.4-main.406dc2a → 0.8.4-main.40e3dcdf1b

package/dist/lib/browser/index.mjs

@@ -1,21 +1,19 @@
 // src/components/Combobox/Combobox.tsx
-import { useSignals as _useSignals2 } from "@preact-signals/safe-react/tracking";
-import { createContext } from "@radix-ui/react-context";
-import { useControllableState } from "@radix-ui/react-use-controllable-state";
-import React2, { forwardRef as forwardRef2, useCallback } from "react";
-import { Button, Icon, Popover } from "@dxos/react-ui";
+import { createContext as createContext3 } from "@radix-ui/react-context";
+import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
+import React3, { forwardRef as forwardRef2, useCallback as useCallback3 } from "react";
+import { Button, Icon as Icon2, Popover } from "@dxos/react-ui";
 import { useId } from "@dxos/react-ui";
-import { mx as mx2, staticPlaceholderText } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/ui-theme";
 
 // src/components/SearchList/SearchList.tsx
-import { useSignals as _useSignals } from "@preact-signals/safe-react/tracking";
-import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from "cmdk";
-import React, { forwardRef } from "react";
-import { useDensityContext, useElevationContext, useThemeContext, useTranslation } from "@dxos/react-ui";
-import { mx } from "@dxos/react-ui-theme";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Icon, ScrollArea, useDensityContext, useElevationContext, useThemeContext, useTranslation } from "@dxos/react-ui";
+import { mx } from "@dxos/ui-theme";
 
 // src/translations.ts
-var translationKey = "react-ui-searchlist";
+var translationKey = "@dxos/react-ui-searchlist";
 var translations = [
   {
     "en-US": {
@@ -26,94 +24,463 @@ var translations = [
   }
 ];
 
+// src/components/SearchList/context.ts
+import { createContext } from "@radix-ui/react-context";
+var [SearchListItemContextProvider, useSearchListItemContext] = createContext("SearchListItem");
+var [SearchListInputContextProvider, useSearchListInputContext] = createContext("SearchListInput");
+
 // src/components/SearchList/SearchList.tsx
-var commandItem = "flex items-center overflow-hidden";
-var searchListItem = "plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay";
-var SEARCHLIST_NAME = "SearchList";
-var SEARCHLIST_ITEM_NAME = "SearchListItem";
-var SearchListRoot = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(CommandRoot, {
-      ...props,
-      className: mx(classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+var SearchListRoot = ({ children, value: valueProp, defaultValue = "", debounceMs = 200, onSearch }) => {
+  const [query = "", setQuery] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: void 0
+  });
+  const [selectedValue, setSelectedValue] = useState(void 0);
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const debounceRef = useRef(null);
+  const handleQueryChange = useCallback((newQuery) => {
+    setQuery(newQuery);
+    if (debounceRef.current) {
+      clearTimeout(debounceRef.current);
+    }
+    debounceRef.current = setTimeout(() => {
+      onSearch?.(newQuery);
+    }, debounceMs);
+  }, [
+    setQuery,
+    onSearch,
+    debounceMs
+  ]);
+  const [itemVersion, setItemVersion] = useState(0);
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) {
+        clearTimeout(debounceRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const currentItem = selectedValue !== void 0 ? itemsRef.current.get(selectedValue) : void 0;
+    const isSelectionValid = currentItem !== void 0 && !currentItem.disabled;
+    if (!isSelectionValid && itemsRef.current.size > 0) {
+      const entries = Array.from(itemsRef.current.entries()).filter(([, data]) => !data.disabled);
+      if (entries.length > 0) {
+        entries.sort(([, a], [, b]) => {
+          const position = a.element.compareDocumentPosition(b.element);
+          if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+            return -1;
+          }
+          if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+            return 1;
+          }
+          return 0;
+        });
+        const firstValue = entries[0]?.[0];
+        if (firstValue !== void 0 && firstValue !== selectedValue) {
+          setSelectedValue(firstValue);
+        }
+      } else if (selectedValue !== void 0) {
+        setSelectedValue(void 0);
+      }
+    }
+  }, [
+    itemVersion,
+    selectedValue
+  ]);
+  const registerItem = useCallback((value, element, onSelect, disabled) => {
+    if (element) {
+      itemsRef.current.set(value, {
+        element,
+        onSelect,
+        disabled
+      });
+      setItemVersion((v) => v + 1);
+    }
+  }, []);
+  const unregisterItem = useCallback((value) => {
+    itemsRef.current.delete(value);
+    setItemVersion((v) => v + 1);
+  }, []);
+  const getItemValues = useCallback(() => {
+    return Array.from(itemsRef.current.entries()).filter(([, data]) => !data.disabled).sort(([, a], [, b]) => {
+      const position = a.element.compareDocumentPosition(b.element);
+      return position & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : position & Node.DOCUMENT_POSITION_PRECEDING ? 1 : 0;
+    }).map(([value]) => value);
+  }, []);
+  const triggerSelect = useCallback(() => {
+    if (selectedValue !== void 0) {
+      const item = itemsRef.current.get(selectedValue);
+      item?.onSelect?.();
+    }
+  }, [
+    selectedValue
+  ]);
+  const itemContextValue = useMemo(() => ({
+    selectedValue,
+    onSelectedValueChange: setSelectedValue,
+    registerItem,
+    unregisterItem
+  }), [
+    selectedValue,
+    registerItem,
+    unregisterItem
+  ]);
+  const inputContextValue = useMemo(() => ({
+    query,
+    onQueryChange: handleQueryChange,
+    selectedValue,
+    onSelectedValueChange: setSelectedValue,
+    getItemValues,
+    triggerSelect
+  }), [
+    query,
+    handleQueryChange,
+    selectedValue,
+    getItemValues,
+    triggerSelect
+  ]);
+  return /* @__PURE__ */ React.createElement(SearchListInputContextProvider, {
+    query: inputContextValue.query,
+    onQueryChange: inputContextValue.onQueryChange,
+    selectedValue: inputContextValue.selectedValue,
+    onSelectedValueChange: inputContextValue.onSelectedValueChange,
+    getItemValues: inputContextValue.getItemValues,
+    triggerSelect: inputContextValue.triggerSelect
+  }, /* @__PURE__ */ React.createElement(SearchListItemContextProvider, {
+    selectedValue: itemContextValue.selectedValue,
+    onSelectedValueChange: itemContextValue.onSelectedValueChange,
+    registerItem: itemContextValue.registerItem,
+    unregisterItem: itemContextValue.unregisterItem
+  }, children));
+};
+SearchListRoot.displayName = "SearchList.Root";
+var SearchListContent = /* @__PURE__ */ forwardRef(({ classNames, children, ...props }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "none",
+    ...props,
+    className: mx("dx-container flex flex-col gap-3", classNames),
+    ref: forwardedRef
+  }, children);
 });
-SearchListRoot.displayName = SEARCHLIST_NAME;
-var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    const { t } = useTranslation(translationKey);
-    const placeholder = props.placeholder ?? t("search.placeholder");
-    const { hasIosKeyboard } = useThemeContext();
-    const { tx } = useThemeContext();
-    const density = useDensityContext(propsDensity);
-    const elevation = useElevationContext(propsElevation);
-    return /* @__PURE__ */ React.createElement(CommandInput, {
-      ...props,
-      placeholder,
-      className: tx("input.input", "input", {
-        variant,
-        disabled: props.disabled,
-        density,
-        elevation
-      }, "mbe-cardSpacingBlock", classNames),
-      ...props.autoFocus && !hasIosKeyboard && {
-        autoFocus: true
-      },
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+SearchListContent.displayName = "SearchList.Content";
+var SearchListInput = /* @__PURE__ */ forwardRef(({ classNames, density: propsDensity, elevation: propsElevation, variant, placeholder, onChange, ...props }, forwardedRef) => {
+  const { query, onQueryChange, selectedValue, onSelectedValueChange, getItemValues, triggerSelect } = useSearchListInputContext("SearchList.Input");
+  const { t } = useTranslation(translationKey);
+  const { hasIosKeyboard, tx } = useThemeContext();
+  const density = useDensityContext(propsDensity);
+  const elevation = useElevationContext(propsElevation);
+  const defaultPlaceholder = t("search.placeholder");
+  const handleChange = useCallback((event) => {
+    onQueryChange(event.target.value);
+    onChange?.(event);
+  }, [
+    onQueryChange,
+    onChange
+  ]);
+  const handleKeyDown = useCallback((event) => {
+    const values = getItemValues();
+    if (values.length === 0) {
+      if (event.key === "Escape") {
+        onQueryChange("");
+      }
+      return;
+    }
+    const currentIndex = selectedValue !== void 0 ? values.indexOf(selectedValue) : -1;
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const nextIndex = currentIndex === -1 ? 0 : Math.min(currentIndex + 1, values.length - 1);
+        const nextValue = values[nextIndex];
+        if (nextValue !== void 0) {
+          onSelectedValueChange(nextValue);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const prevIndex = currentIndex === -1 ? values.length - 1 : Math.max(currentIndex - 1, 0);
+        const prevValue = values[prevIndex];
+        if (prevValue !== void 0) {
+          onSelectedValueChange(prevValue);
+        }
+        break;
+      }
+      case "Enter": {
+        if (selectedValue !== void 0) {
+          event.preventDefault();
+          triggerSelect();
+        }
+        break;
+      }
+      case "Home": {
+        event.preventDefault();
+        const firstValue = values[0];
+        if (firstValue !== void 0) {
+          onSelectedValueChange(firstValue);
+        }
+        break;
+      }
+      case "End": {
+        event.preventDefault();
+        const lastValue = values[values.length - 1];
+        if (lastValue !== void 0) {
+          onSelectedValueChange(lastValue);
+        }
+        break;
+      }
+      case "Escape": {
+        event.preventDefault();
+        if (selectedValue !== void 0) {
+          onSelectedValueChange(void 0);
+        } else {
+          onQueryChange("");
+        }
+        break;
+      }
+    }
+  }, [
+    selectedValue,
+    onSelectedValueChange,
+    getItemValues,
+    triggerSelect,
+    onQueryChange
+  ]);
+  return /* @__PURE__ */ React.createElement("input", {
+    ...props,
+    ...props.autoFocus && !hasIosKeyboard && {
+      autoFocus: true
+    },
+    type: "text",
+    placeholder: placeholder ?? defaultPlaceholder,
+    className: tx("input.input", {
+      variant,
+      disabled: props.disabled,
+      density,
+      elevation
+    }, classNames),
+    value: query,
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    ref: forwardedRef
+  });
 });
-var SearchListContent = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(CommandList, {
-      ...props,
-      className: mx(classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+SearchListInput.displayName = "SearchList.Input";
+var SearchListViewport = /* @__PURE__ */ forwardRef(({ classNames, children }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement(ScrollArea.Root, {
+    role: "listbox",
+    classNames: mx(classNames),
+    ref: forwardedRef,
+    thin: true
+  }, /* @__PURE__ */ React.createElement(ScrollArea.Viewport, null, children));
 });
-var SearchListEmpty = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(CommandEmpty, {
-      ...props,
-      className: mx(classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+SearchListViewport.displayName = "SearchList.Viewport";
+var SearchListItem = /* @__PURE__ */ forwardRef(({ classNames, value, label, icon, iconClassNames, checked, suffix, onSelect, disabled }, forwardedRef) => {
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItemContext("SearchList.Item");
+  const internalRef = useRef(null);
+  const isSelected = selectedValue === value && !disabled;
+  useEffect(() => {
+    const element = internalRef.current;
+    if (element) {
+      registerItem(value, element, onSelect, disabled);
+    }
+    return () => unregisterItem(value);
+  }, [
+    value,
+    onSelect,
+    disabled,
+    registerItem,
+    unregisterItem
+  ]);
+  useEffect(() => {
+    if (isSelected && internalRef.current) {
+      internalRef.current.scrollIntoView({
+        block: "nearest",
+        behavior: "smooth"
+      });
+    }
+  }, [
+    isSelected
+  ]);
+  const handleClick = useCallback(() => {
+    if (!disabled) {
+      onSelect?.();
+    }
+  }, [
+    onSelect,
+    disabled
+  ]);
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: (node) => {
+      internalRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef) {
+        forwardedRef.current = node;
+      }
+    },
+    role: "option",
+    "aria-selected": isSelected,
+    "aria-disabled": disabled,
+    "data-selected": isSelected,
+    "data-disabled": disabled,
+    "data-value": value,
+    tabIndex: -1,
+    className: mx("flex gap-2 items-center", "py-1 px-2 rounded-xs select-none cursor-pointer data-[selected=true]:bg-hover-overlay hover:bg-hover-overlay", disabled && "opacity-50 cursor-not-allowed hover:bg-transparent data-[selected=true]:bg-transparent", classNames),
+    onClick: handleClick
+  }, icon && /* @__PURE__ */ React.createElement(Icon, {
+    icon,
+    size: 5,
+    classNames: iconClassNames
+  }), /* @__PURE__ */ React.createElement("span", {
+    className: "w-0 grow truncate"
+  }, label), suffix && /* @__PURE__ */ React.createElement("span", {
+    className: "shrink-0 text-description"
+  }, suffix), checked && /* @__PURE__ */ React.createElement(Icon, {
+    icon: "ph--check--regular",
+    size: 5
+  }));
 });
-var SearchListItem = /* @__PURE__ */ forwardRef(({ children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals();
-  try {
-    return /* @__PURE__ */ React.createElement(CommandItem, {
-      ...props,
-      className: mx(searchListItem, classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+SearchListItem.displayName = "SearchList.Item";
+var SearchListEmpty = ({ classNames, children }) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    role: "status",
+    className: mx("flex flex-col w-full px-2 py-1", classNames)
+  }, children);
+};
+SearchListEmpty.displayName = "SearchList.Empty";
+var SearchListGroup = /* @__PURE__ */ forwardRef(({ classNames, heading, children }, forwardedRef) => {
+  return /* @__PURE__ */ React.createElement("div", {
+    ref: forwardedRef,
+    role: "group",
+    className: mx("flex flex-col", classNames)
+  }, heading && /* @__PURE__ */ React.createElement("div", {
+    role: "presentation",
+    className: "px-2 py-1 text-xs font-medium text-description"
+  }, heading), children);
 });
-SearchListItem.displayName = SEARCHLIST_ITEM_NAME;
+SearchListGroup.displayName = "SearchList.Group";
 var SearchList = {
   Root: SearchListRoot,
-  Input: SearchListInput,
   Content: SearchListContent,
+  Viewport: SearchListViewport,
+  Input: SearchListInput,
+  Item: SearchListItem,
   Empty: SearchListEmpty,
-  Item: SearchListItem
+  Group: SearchListGroup
+};
+
+// src/components/SearchList/hooks/useGlobalFilter.tsx
+import React2, { createContext as createContext2, useContext, useMemo as useMemo2 } from "react";
+var GlobalFilterContext = /* @__PURE__ */ createContext2({});
+var GlobalFilterProvider = ({ children, filter }) => {
+  const value = useMemo2(() => ({
+    filter
+  }), [
+    filter
+  ]);
+  return /* @__PURE__ */ React2.createElement(GlobalFilterContext.Provider, {
+    value
+  }, children);
+};
+var useGlobalFilter = () => {
+  return useContext(GlobalFilterContext);
+};
+var useGlobalFilteredObjects = (objects) => {
+  const { filter } = useGlobalFilter();
+  return useMemo2(() => {
+    if (!objects) {
+      return [];
+    }
+    if (!filter) {
+      return objects;
+    }
+    return filter(objects);
+  }, [
+    objects,
+    filter
+  ]);
+};
+
+// src/components/SearchList/hooks/useSearchListInput.ts
+var useSearchListInput = () => {
+  const { query, onQueryChange, selectedValue, onSelectedValueChange, getItemValues, triggerSelect } = useSearchListInputContext("useSearchListInput");
+  return {
+    query,
+    onQueryChange,
+    selectedValue,
+    onSelectedValueChange,
+    getItemValues,
+    triggerSelect
+  };
+};
+
+// src/components/SearchList/hooks/useSearchListItem.ts
+var useSearchListItem = () => {
+  const { selectedValue, registerItem, unregisterItem } = useSearchListItemContext("useSearchListItem");
+  return {
+    selectedValue,
+    registerItem,
+    unregisterItem
+  };
+};
+
+// src/components/SearchList/hooks/useSearchListResults.ts
+import commandScore from "command-score";
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef2, useState as useState2 } from "react";
+var useSearchListResults = ({ items, filter, fuzzy = true, extract, minScore = 0 }) => {
+  const [query, setQuery] = useState2("");
+  const queryRef = useRef2("");
+  useEffect2(() => {
+    queryRef.current = "";
+    setQuery("");
+  }, [
+    items
+  ]);
+  const defaultExtract = useCallback2((item) => {
+    if (typeof item === "string") {
+      return item;
+    }
+    return item?.label ?? "";
+  }, []);
+  const extractFn = extract ?? defaultExtract;
+  const defaultFilter = useCallback2((item, query2) => {
+    const searchable = extractFn(item);
+    return searchable.toLowerCase().includes(query2.toLowerCase());
+  }, [
+    extractFn
+  ]);
+  const filterFn = filter ?? defaultFilter;
+  const handleSearch = useCallback2((searchQuery) => {
+    queryRef.current = searchQuery;
+    setQuery(searchQuery);
+  }, []);
+  const results = useMemo3(() => {
+    const currentQuery = queryRef.current;
+    if (!currentQuery) {
+      return items;
+    }
+    if (fuzzy) {
+      const scored = items.map((item) => ({
+        item,
+        score: commandScore(extractFn(item), currentQuery)
+      })).filter(({ score }) => score > minScore).sort((a, b) => b.score - a.score);
+      return scored.map(({ item }) => item);
+    } else {
+      return items.filter((item) => filterFn(item, currentQuery));
+    }
+  }, [
+    items,
+    query,
+    filterFn,
+    fuzzy,
+    extractFn,
+    minScore
+  ]);
+  return {
+    results,
+    handleSearch
+  };
 };
 
 // src/components/Combobox/Combobox.tsx
@@ -121,170 +488,150 @@ var COMBOBOX_NAME = "Combobox";
 var COMBOBOX_CONTENT_NAME = "ComboboxContent";
 var COMBOBOX_ITEM_NAME = "ComboboxItem";
 var COMBOBOX_TRIGGER_NAME = "ComboboxTrigger";
-var [ComboboxProvider, useComboboxContext] = createContext(COMBOBOX_NAME, {});
+var [ComboboxProvider, useComboboxContext] = createContext3(COMBOBOX_NAME, {});
 var ComboboxRoot = ({ modal, modalId: propsModalId, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, value: propsValue, defaultValue, onValueChange: propsOnValueChange, placeholder, children }) => {
-  var _effect = _useSignals2();
-  try {
-    const modalId = useId(COMBOBOX_NAME, propsModalId);
-    const [open = false, onOpenChange] = useControllableState({
-      prop: propsOpen,
-      onChange: propsOnOpenChange,
-      defaultProp: defaultOpen
-    });
-    const [value = "", onValueChange] = useControllableState({
-      prop: propsValue,
-      onChange: propsOnValueChange,
-      defaultProp: defaultValue
-    });
-    return /* @__PURE__ */ React2.createElement(Popover.Root, {
-      open,
-      onOpenChange,
-      modal
-    }, /* @__PURE__ */ React2.createElement(ComboboxProvider, {
-      isCombobox: true,
-      modalId,
-      placeholder,
-      open,
-      onOpenChange,
-      value,
-      onValueChange
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  const modalId = useId(COMBOBOX_NAME, propsModalId);
+  const [open = false, onOpenChange] = useControllableState2({
+    prop: propsOpen,
+    onChange: propsOnOpenChange,
+    defaultProp: defaultOpen
+  });
+  const [value = "", onValueChange] = useControllableState2({
+    prop: propsValue,
+    onChange: propsOnValueChange,
+    defaultProp: defaultValue
+  });
+  return /* @__PURE__ */ React3.createElement(Popover.Root, {
+    open,
+    onOpenChange,
+    modal
+  }, /* @__PURE__ */ React3.createElement(ComboboxProvider, {
+    isCombobox: true,
+    modalId,
+    placeholder,
+    open,
+    onOpenChange,
+    value,
+    onValueChange
+  }, children));
 };
-var ComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
-    return /* @__PURE__ */ React2.createElement(Popover.Content, {
-      side,
-      sideOffset,
-      align,
-      alignOffset,
-      avoidCollisions,
-      collisionBoundary,
-      collisionPadding,
-      arrowPadding,
-      sticky,
-      hideWhenDetached,
-      onOpenAutoFocus,
-      onCloseAutoFocus,
-      onEscapeKeyDown,
-      onPointerDownOutside,
-      onFocusOutside,
-      onInteractOutside,
-      forceMount,
-      classNames: [
-        "is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]",
-        classNames
-      ],
-      id: modalId,
-      ref: forwardedRef
-    }, /* @__PURE__ */ React2.createElement(SearchList.Root, {
-      ...props,
-      classNames: "contents density-fine",
-      role: "none"
-    }, children));
-  } finally {
-    _effect.f();
-  }
+var ComboboxContent = /* @__PURE__ */ forwardRef2(({ side = "bottom", collisionPadding = 48, sideOffset, align, alignOffset, avoidCollisions, collisionBoundary, arrowPadding, sticky, hideWhenDetached, onOpenAutoFocus, onCloseAutoFocus, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, forceMount, children, classNames, onSearch, value, defaultValue, debounceMs, label }, forwardedRef) => {
+  const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
+  return /* @__PURE__ */ React3.createElement(Popover.Content, {
+    side,
+    sideOffset,
+    align,
+    alignOffset,
+    avoidCollisions,
+    collisionBoundary,
+    collisionPadding,
+    arrowPadding,
+    sticky,
+    hideWhenDetached,
+    onOpenAutoFocus,
+    onCloseAutoFocus,
+    onEscapeKeyDown,
+    onPointerDownOutside,
+    onFocusOutside,
+    onInteractOutside,
+    forceMount,
+    classNames: [
+      "w-(--radix-popover-trigger-width) max-h-(--radix-popover-content-available-height) grid grid-rows-[min-content_1fr]",
+      classNames
+    ],
+    id: modalId,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React3.createElement(SearchList.Root, {
+    onSearch,
+    value,
+    defaultValue,
+    debounceMs
+  }, /* @__PURE__ */ React3.createElement(SearchList.Content, null, children)));
 });
 ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
 var ComboboxTrigger = /* @__PURE__ */ forwardRef2(({ children, onClick, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
-    const handleClick = useCallback((event) => {
-      onClick?.(event);
-      onOpenChange?.(true);
-    }, [
-      onClick,
-      onOpenChange
-    ]);
-    return /* @__PURE__ */ React2.createElement(Popover.Trigger, {
-      asChild: true
-    }, /* @__PURE__ */ React2.createElement(Button, {
-      ...props,
-      role: "combobox",
-      "aria-expanded": open,
-      "aria-controls": modalId,
-      "aria-haspopup": "dialog",
-      onClick: handleClick,
-      ref: forwardedRef
-    }, children ?? /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", {
-      className: mx2("font-normal text-start flex-1 min-is-0 truncate mie-2", !value && staticPlaceholderText)
-    }, value || placeholder), /* @__PURE__ */ React2.createElement(Icon, {
-      icon: "ph--caret-down--bold",
-      size: 3
-    }))));
-  } finally {
-    _effect.f();
-  }
+  const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
+  const handleClick = useCallback3((event) => {
+    onClick?.(event);
+    onOpenChange?.(true);
+  }, [
+    onClick,
+    onOpenChange
+  ]);
+  return /* @__PURE__ */ React3.createElement(Popover.Trigger, {
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(Button, {
+    ...props,
+    role: "combobox",
+    "aria-expanded": open,
+    "aria-controls": modalId,
+    "aria-haspopup": "dialog",
+    onClick: handleClick,
+    ref: forwardedRef
+  }, children ?? /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("span", {
+    className: mx2("font-normal text-start flex-1 min-w-0 truncate me-2", !value && "text-subdued")
+  }, value || placeholder), /* @__PURE__ */ React3.createElement(Icon2, {
+    icon: "ph--caret-down--bold",
+    size: 3
+  }))));
 });
 ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
 var ComboboxVirtualTrigger = Popover.VirtualTrigger;
 var ComboboxInput = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(SearchList.Input, {
-      ...props,
-      classNames: [
-        "mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]",
-        classNames
-      ],
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement(SearchList.Input, {
+    ...props,
+    classNames: [
+      "m-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]",
+      classNames
+    ],
+    ref: forwardedRef
+  });
 });
 var ComboboxList = /* @__PURE__ */ forwardRef2(({ classNames, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    return /* @__PURE__ */ React2.createElement(SearchList.Content, {
-      ...props,
-      classNames: [
-        "min-bs-0 overflow-y-auto plb-cardSpacingChrome",
-        classNames
-      ],
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React3.createElement(SearchList.Viewport, {
+    ...props,
+    classNames: [
+      "py-form-chrome",
+      classNames
+    ],
+    ref: forwardedRef
+  });
 });
-var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, ...props }, forwardedRef) => {
-  var _effect = _useSignals2();
-  try {
-    const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
-    const handleSelect = useCallback((nextValue) => {
-      onSelect?.(nextValue);
-      onValueChange?.(nextValue);
+var ComboboxItem = /* @__PURE__ */ forwardRef2(({ classNames, onSelect, value, closeOnSelect = true, ...props }, forwardedRef) => {
+  const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
+  const handleSelect = useCallback3(() => {
+    onSelect?.();
+    if (value !== void 0) {
+      onValueChange?.(value);
+    }
+    if (closeOnSelect) {
       onOpenChange?.(false);
-    }, [
-      onSelect,
-      onValueChange,
-      onOpenChange
-    ]);
-    return /* @__PURE__ */ React2.createElement(SearchList.Item, {
-      ...props,
-      classNames: [
-        "mli-cardSpacingChrome pli-cardSpacingChrome",
-        classNames
-      ],
-      onSelect: handleSelect,
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+    }
+  }, [
+    onSelect,
+    onValueChange,
+    onOpenChange,
+    value,
+    closeOnSelect
+  ]);
+  return /* @__PURE__ */ React3.createElement(SearchList.Item, {
+    ...props,
+    value,
+    classNames: [
+      "mx-form-chrome px-form-chrome",
+      classNames
+    ],
+    onSelect: handleSelect,
+    ref: forwardedRef
+  });
 });
 ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
 var ComboboxArrow = Popover.Arrow;
 var ComboboxEmpty = SearchList.Empty;
+var ComboboxPortal = Popover.Portal;
 var Combobox = {
   Root: ComboboxRoot,
+  Portal: ComboboxPortal,
   Content: ComboboxContent,
   Trigger: ComboboxTrigger,
   VirtualTrigger: ComboboxVirtualTrigger,
@@ -296,14 +643,14 @@ var Combobox = {
 };
 
 // src/components/Listbox/Listbox.tsx
-import { useSignals as _useSignals3 } from "@preact-signals/safe-react/tracking";
 import { useArrowNavigationGroup } from "@fluentui/react-tabster";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { createContextScope } from "@radix-ui/react-context";
-import { useControllableState as useControllableState2 } from "@radix-ui/react-use-controllable-state";
-import React3, { forwardRef as forwardRef3, useCallback as useCallback2, useEffect, useRef } from "react";
-import { Icon as Icon2 } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
+import { useControllableState as useControllableState3 } from "@radix-ui/react-use-controllable-state";
+import React4, { forwardRef as forwardRef3, useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3 } from "react";
+import { Icon as Icon3 } from "@dxos/react-ui";
+import { mx as mx3 } from "@dxos/ui-theme";
+var commandItem = "flex items-center overflow-hidden";
 var LISTBOX_NAME = "Listbox";
 var LISTBOX_OPTION_NAME = "ListboxOption";
 var LISTBOX_OPTION_LABEL_NAME = "ListboxOptionLabel";
@@ -315,108 +662,88 @@ var [createListboxOptionContext, createListboxOptionScope] = createContextScope(
 var [ListboxProvider, useListboxContext] = createListboxContext(LISTBOX_NAME);
 var [ListboxOptionProvider, useListboxOptionContext] = createListboxOptionContext(LISTBOX_OPTION_NAME);
 var ListboxRoot = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
-  var _effect = _useSignals3();
-  try {
-    const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
-    const arrowGroup = useArrowNavigationGroup({
-      axis: "vertical"
-    });
-    const ref = useRef(null);
-    const rootRef = useComposedRefs(ref, forwardedRef);
-    const [selectedValue, setSelectedValue] = useControllableState2({
-      prop: propsValue,
-      defaultProp: defaultValue,
-      onChange: onValueChange
-    });
-    const handleValueChange = (value) => {
-      setSelectedValue(value);
-    };
-    useEffect(() => {
-      ref.current?.querySelector('[aria-selected="true"]')?.focus();
-    }, [
-      autoFocus
-    ]);
-    return /* @__PURE__ */ React3.createElement(ListboxProvider, {
-      scope: __listboxScope,
-      selectedValue,
-      onValueChange: handleValueChange
-    }, /* @__PURE__ */ React3.createElement("ul", {
-      role: "listbox",
-      ...rootProps,
-      className: mx3("is-full p-cardSpacingChrome", classNames),
-      ref: rootRef,
-      ...arrowGroup
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  const { __listboxScope, children, classNames, value: propsValue, defaultValue, onValueChange, autoFocus, ...rootProps } = props;
+  const arrowGroup = useArrowNavigationGroup({
+    axis: "vertical"
+  });
+  const ref = useRef3(null);
+  const rootRef = useComposedRefs(ref, forwardedRef);
+  const [selectedValue, setSelectedValue] = useControllableState3({
+    prop: propsValue,
+    defaultProp: defaultValue,
+    onChange: onValueChange
+  });
+  const handleValueChange = (value) => {
+    setSelectedValue(value);
+  };
+  useEffect3(() => {
+    ref.current?.querySelector('[aria-selected="true"]')?.focus();
+  }, [
+    autoFocus
+  ]);
+  return /* @__PURE__ */ React4.createElement(ListboxProvider, {
+    scope: __listboxScope,
+    selectedValue,
+    onValueChange: handleValueChange
+  }, /* @__PURE__ */ React4.createElement("ul", {
+    role: "listbox",
+    ...rootProps,
+    className: mx3("w-full p-form-chrome", classNames),
+    ref: rootRef,
+    ...arrowGroup
+  }, children));
 });
 ListboxRoot.displayName = LISTBOX_NAME;
 var ListboxOption = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
-  var _effect = _useSignals3();
-  try {
-    const { __listboxScope, children, classNames, value, ...rootProps } = props;
-    const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
-    const isSelected = selectedValue === value;
-    const handleSelect = useCallback2(() => {
-      onValueChange(value);
-    }, [
-      value,
-      onValueChange
-    ]);
-    return /* @__PURE__ */ React3.createElement(ListboxOptionProvider, {
-      scope: __listboxScope,
-      value,
-      isSelected
-    }, /* @__PURE__ */ React3.createElement("li", {
-      role: "option",
-      ...rootProps,
-      "aria-selected": isSelected,
-      tabIndex: 0,
-      className: mx3("dx-focus-ring", commandItem, searchListItem, classNames),
-      onClick: handleSelect,
-      onKeyDown: ({ key }) => {
-        if ([
-          "Enter",
-          " "
-        ].includes(key)) {
-          handleSelect();
-        }
-      },
-      ref: forwardedRef
-    }, children));
-  } finally {
-    _effect.f();
-  }
+  const { __listboxScope, children, classNames, value, ...rootProps } = props;
+  const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
+  const isSelected = selectedValue === value;
+  const handleSelect = useCallback4(() => {
+    onValueChange(value);
+  }, [
+    value,
+    onValueChange
+  ]);
+  return /* @__PURE__ */ React4.createElement(ListboxOptionProvider, {
+    scope: __listboxScope,
+    value,
+    isSelected
+  }, /* @__PURE__ */ React4.createElement("li", {
+    role: "option",
+    ...rootProps,
+    "aria-selected": isSelected,
+    tabIndex: 0,
+    className: mx3("dx-focus-ring", "py-1 px-2 rounded-xs select-none cursor-pointer data-[selected=true]:bg-hover-overlay hover:bg-hover-overlay", commandItem, classNames),
+    onClick: handleSelect,
+    onKeyDown: ({ key }) => {
+      if ([
+        "Enter",
+        " "
+      ].includes(key)) {
+        handleSelect();
+      }
+    },
+    ref: forwardedRef
+  }, children));
 });
 ListboxOption.displayName = LISTBOX_OPTION_NAME;
 var ListboxOptionLabel = /* @__PURE__ */ forwardRef3(({ children, classNames, ...rootProps }, forwardedRef) => {
-  var _effect = _useSignals3();
-  try {
-    return /* @__PURE__ */ React3.createElement("span", {
-      ...rootProps,
-      className: mx3("grow truncate", classNames),
-      ref: forwardedRef
-    }, children);
-  } finally {
-    _effect.f();
-  }
+  return /* @__PURE__ */ React4.createElement("span", {
+    ...rootProps,
+    className: mx3("grow truncate", classNames),
+    ref: forwardedRef
+  }, children);
 });
 ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
 var ListboxOptionIndicator = /* @__PURE__ */ forwardRef3((props, forwardedRef) => {
-  var _effect = _useSignals3();
-  try {
-    const { __listboxOptionScope, classNames, ...rootProps } = props;
-    const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
-    return /* @__PURE__ */ React3.createElement(Icon2, {
-      icon: "ph--check--regular",
-      ...rootProps,
-      classNames: mx3(!isSelected && "invisible", classNames),
-      ref: forwardedRef
-    });
-  } finally {
-    _effect.f();
-  }
+  const { __listboxOptionScope, classNames, ...rootProps } = props;
+  const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
+  return /* @__PURE__ */ React4.createElement(Icon3, {
+    icon: "ph--check--regular",
+    ...rootProps,
+    classNames: mx3(!isSelected && "invisible", classNames),
+    ref: forwardedRef
+  });
 });
 ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
 var Listbox = {
@@ -427,13 +754,17 @@ var Listbox = {
 };
 export {
   Combobox,
+  GlobalFilterProvider,
   Listbox,
   SearchList,
-  commandItem,
   createListboxScope,
-  searchListItem,
   translationKey,
   translations,
-  useListboxContext
+  useGlobalFilter,
+  useGlobalFilteredObjects,
+  useListboxContext,
+  useSearchListInput,
+  useSearchListItem,
+  useSearchListResults
 };
 //# sourceMappingURL=index.mjs.map