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

package/package.json

@@ -1,12 +1,16 @@
 {
   "name": "@dxos/react-ui-searchlist",
-  "version": "0.8.4-main.406dc2a",
+  "version": "0.8.4-main.40e3dcdf1b",
   "description": "A themed ⌘K-style combobox component, triggered by a button (or keyboard shortcut), where values are queried only within the invoked modal.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
-  "sideEffects": true,
+  "sideEffects": false,
   "type": "module",
   "exports": {
     ".": {
@@ -25,29 +29,28 @@
     "src"
   ],
   "dependencies": {
-    "@fluentui/react-tabster": "^9.24.2",
-    "@preact-signals/safe-react": "^0.9.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-compose-refs": "1.1.1",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-use-controllable-state": "1.1.0",
-    "cmdk": "^0.2.0"
+    "command-score": "0.1.2"
   },
   "devDependencies": {
-    "@types/react": "~19.2.2",
-    "@types/react-dom": "~19.2.1",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.406dc2a",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a",
-    "@dxos/storybook-utils": "0.8.4-main.406dc2a"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.40e3dcdf1b",
+    "@dxos/storybook-utils": "0.8.4-main.40e3dcdf1b",
+    "@dxos/react-ui": "0.8.4-main.40e3dcdf1b",
+    "@dxos/ui-theme": "0.8.4-main.40e3dcdf1b"
   },
   "peerDependencies": {
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "@dxos/react-ui": "0.8.4-main.406dc2a",
-    "@dxos/react-ui-theme": "0.8.4-main.406dc2a"
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.40e3dcdf1b",
+    "@dxos/ui-theme": "0.8.4-main.40e3dcdf1b"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Combobox/Combobox.stories.tsx

@@ -9,6 +9,7 @@ import { faker } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { translations } from '../../translations';
+import { useSearchListResults } from '../SearchList/hooks';
 
 import { Combobox } from './Combobox';
 
@@ -17,6 +18,10 @@ faker.seed(1234);
 const items = faker.helpers.uniqueArray(faker.commerce.productName, 16).sort();
 
 const DefaultStory = () => {
+  const { results, handleSearch } = useSearchListResults({
+    items,
+  });
+
   return (
     <Combobox.Root
       placeholder='Nothing selected'
@@ -25,11 +30,11 @@ const DefaultStory = () => {
       }}
     >
       <Combobox.Trigger />
-      <Combobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
+      <Combobox.Content onSearch={handleSearch}>
         <Combobox.Input placeholder='Search...' />
         <Combobox.List>
-          {items.map((value) => (
-            <Combobox.Item key={value}>{value}</Combobox.Item>
+          {results.map((value) => (
+            <Combobox.Item key={value} value={value} label={value} />
           ))}
         </Combobox.List>
         <Combobox.Arrow />
@@ -42,7 +47,7 @@ const meta = {
   title: 'ui/react-ui-searchlist/Combobox',
   component: Combobox.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ container: 'column', classNames: 'p-2' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'p-2' })],
   parameters: {
     translations,
   },

package/src/components/Combobox/Combobox.tsx

@@ -16,15 +16,15 @@ import {
   type PopoverVirtualTriggerProps,
 } from '@dxos/react-ui';
 import { useId } from '@dxos/react-ui';
-import { mx, staticPlaceholderText } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import {
   SearchList,
-  type SearchListContentProps,
   type SearchListEmptyProps,
   type SearchListInputProps,
   type SearchListItemProps,
   type SearchListRootProps,
+  type SearchListViewportProps,
 } from '../SearchList';
 
 const COMBOBOX_NAME = 'Combobox';
@@ -101,7 +101,7 @@ const ComboboxRoot = ({
 // ContentProps
 //
 
-type ComboboxContentProps = SearchListRootProps & PopoverContentProps;
+type ComboboxContentProps = SearchListRootProps & PopoverContentProps & { label?: string };
 
 const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
   (
@@ -125,7 +125,11 @@ const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
       forceMount,
       children,
       classNames,
-      ...props
+      onSearch,
+      value,
+      defaultValue,
+      debounceMs,
+      label,
     },
     forwardedRef,
   ) => {
@@ -153,14 +157,14 @@ const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
           forceMount,
         }}
         classNames={[
-          'is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]',
+          'w-(--radix-popover-trigger-width) max-h-(--radix-popover-content-available-height) grid grid-rows-[min-content_1fr]',
           classNames,
         ]}
         id={modalId}
         ref={forwardedRef}
       >
-        <SearchList.Root {...props} classNames='contents density-fine' role='none'>
-          {children}
+        <SearchList.Root onSearch={onSearch} value={value} defaultValue={defaultValue} debounceMs={debounceMs}>
+          <SearchList.Content>{children}</SearchList.Content>
         </SearchList.Root>
       </Popover.Content>
     );
@@ -199,9 +203,7 @@ const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(
         >
           {children ?? (
             <>
-              <span
-                className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
-              >
+              <span className={mx('font-normal text-start flex-1 min-w-0 truncate me-2', !value && 'text-subdued')}>
                 {value || placeholder}
               </span>
               <Icon icon='ph--caret-down--bold' size={3} />
@@ -233,10 +235,7 @@ const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(({ classN
   return (
     <SearchList.Input
       {...props}
-      classNames={[
-        'mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
-        classNames,
-      ]}
+      classNames={['m-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]', classNames]}
       ref={forwardedRef}
     />
   );
@@ -246,40 +245,39 @@ const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(({ classN
 // List
 //
 
-type ComboboxListProps = SearchListContentProps;
+type ComboboxListProps = SearchListViewportProps;
 
 const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(({ classNames, ...props }, forwardedRef) => {
-  return (
-    <SearchList.Content
-      {...props}
-      classNames={['min-bs-0 overflow-y-auto plb-cardSpacingChrome', classNames]}
-      ref={forwardedRef}
-    />
-  );
+  return <SearchList.Viewport {...props} classNames={['py-form-chrome', classNames]} ref={forwardedRef} />;
 });
 
 //
 // Item
 //
 
-type ComboboxItemProps = SearchListItemProps;
+type ComboboxItemProps = SearchListItemProps & {
+  /** Whether to close the popover when this item is selected. Defaults to true. */
+  closeOnSelect?: boolean;
+};
 
 const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
-  ({ classNames, onSelect, ...props }, forwardedRef) => {
+  ({ classNames, onSelect, value, closeOnSelect = true, ...props }, forwardedRef) => {
     const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
-    const handleSelect = useCallback<NonNullable<SearchListItemProps['onSelect']>>(
-      (nextValue) => {
-        onSelect?.(nextValue);
-        onValueChange?.(nextValue);
+    const handleSelect = useCallback<NonNullable<SearchListItemProps['onSelect']>>(() => {
+      onSelect?.();
+      if (value !== undefined) {
+        onValueChange?.(value);
+      }
+      if (closeOnSelect) {
         onOpenChange?.(false);
-      },
-      [onSelect, onValueChange, onOpenChange],
-    );
+      }
+    }, [onSelect, onValueChange, onOpenChange, value, closeOnSelect]);
 
     return (
       <SearchList.Item
         {...props}
-        classNames={['mli-cardSpacingChrome pli-cardSpacingChrome', classNames]}
+        value={value}
+        classNames={['mx-form-chrome px-form-chrome', classNames]}
         onSelect={handleSelect}
         ref={forwardedRef}
       />
@@ -310,8 +308,17 @@ const ComboboxEmpty = SearchList.Empty;
 // https://www.w3.org/WAI/ARIA/apg/patterns/combobox
 //
 
+//
+// Portal
+//
+
+type ComboboxPortalProps = React.ComponentPropsWithoutRef<typeof Popover.Portal>;
+
+const ComboboxPortal = Popover.Portal;
+
 export const Combobox = {
   Root: ComboboxRoot,
+  Portal: ComboboxPortal,
   Content: ComboboxContent,
   Trigger: ComboboxTrigger,
   VirtualTrigger: ComboboxVirtualTrigger,
@@ -324,6 +331,7 @@ export const Combobox = {
 
 export type {
   ComboboxRootProps,
+  ComboboxPortalProps,
   ComboboxContentProps,
   ComboboxTriggerProps,
   ComboboxVirtualTriggerProps,

package/src/components/Listbox/Listbox.stories.tsx

@@ -40,7 +40,7 @@ const meta = {
   title: 'ui/react-ui-searchlist/Listbox',
   component: Listbox.Root,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ container: 'column', classNames: 'p-2' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'p-2' })],
   parameters: {
     translations,
   },

package/src/components/Listbox/Listbox.tsx

@@ -9,9 +9,9 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, { type ComponentPropsWithRef, forwardRef, useCallback, useEffect, useRef } from 'react';
 
 import { Icon, type IconProps, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { commandItem, searchListItem } from '../SearchList';
+const commandItem = 'flex items-center overflow-hidden';
 
 const LISTBOX_NAME = 'Listbox';
 const LISTBOX_OPTION_NAME = 'ListboxOption';
@@ -100,7 +100,7 @@ const ListboxRoot = forwardRef<HTMLUListElement, ListboxRootProps>(
         <ul
           role='listbox'
           {...rootProps}
-          className={mx('is-full p-cardSpacingChrome', classNames)}
+          className={mx('w-full p-form-chrome', classNames)}
           ref={rootRef}
           {...arrowGroup}
         >
@@ -135,7 +135,12 @@ const ListboxOption = forwardRef<HTMLLIElement, ListboxOptionProps>(
           {...rootProps}
           aria-selected={isSelected}
           tabIndex={0}
-          className={mx('dx-focus-ring', commandItem, searchListItem, classNames)}
+          className={mx(
+            '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)) {