@dxos/react-ui-searchlist 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-searchlist",
-  "version": "0.8.4-main.69d29f4",
+  "version": "0.8.4-main.6fa680abb7",
   "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",
@@ -40,17 +40,17 @@
     "@types/react-dom": "~19.2.3",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.69d29f4",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/storybook-utils": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "vite": "^7.1.11",
+    "@dxos/storybook-utils": "0.8.4-main.6fa680abb7",
+    "@dxos/random": "0.8.4-main.6fa680abb7",
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "peerDependencies": {
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.69d29f4",
-    "@dxos/ui-theme": "0.8.4-main.69d29f4"
+    "@dxos/react-ui": "0.8.4-main.6fa680abb7",
+    "@dxos/ui-theme": "0.8.4-main.6fa680abb7"
   },
   "publishConfig": {
     "access": "public"

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

@@ -47,7 +47,7 @@ const meta = {
   title: 'ui/react-ui-searchlist/Combobox',
   component: Combobox.Root as any,
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: '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/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';
@@ -157,16 +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 onSearch={onSearch} value={value} defaultValue={defaultValue} debounceMs={debounceMs}>
-          <div className='contents density-fine' aria-label={label} role='combobox' aria-expanded='true'>
-            {children}
-          </div>
+          <SearchList.Content>{children}</SearchList.Content>
         </SearchList.Root>
       </Popover.Content>
     );
@@ -205,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} />
@@ -239,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}
     />
   );
@@ -252,16 +245,10 @@ 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} />;
 });
 
 //
@@ -290,7 +277,7 @@ const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
       <SearchList.Item
         {...props}
         value={value}
-        classNames={['mli-cardSpacingChrome pli-cardSpacingChrome', classNames]}
+        classNames={['mx-form-chrome px-form-chrome', classNames]}
         onSelect={handleSelect}
         ref={forwardedRef}
       />

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({ layout: 'column', classNames: 'p-2' })],
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'p-2' })],
   parameters: {
     translations,
   },

package/src/components/Listbox/Listbox.tsx

@@ -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}
         >
@@ -137,7 +137,7 @@ const ListboxOption = forwardRef<HTMLLIElement, ListboxOptionProps>(
           tabIndex={0}
           className={mx(
             'dx-focus-ring',
-            'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected=true]:bg-hoverOverlay hover:bg-hoverOverlay',
+            'py-1 px-2 rounded-xs select-none cursor-pointer data-[selected=true]:bg-hover-overlay hover:bg-hover-overlay',
             commandItem,
             classNames,
           )}

package/src/components/SearchList/SearchList.stories.tsx

@@ -39,28 +39,26 @@ const DefaultStory = ({ items = defaultItems }: DefaultStoryProps) => {
   const { results, handleSearch } = useSearchListResults({ items });
 
   return (
-    <div className='flex flex-col is-full bs-[400px]'>
-      <SearchList.Root onSearch={handleSearch}>
+    <SearchList.Root onSearch={handleSearch}>
+      <SearchList.Content classNames='h-[400px]'>
         <SearchList.Input placeholder='Search items...' autoFocus />
-        <SearchList.Content>
-          <SearchList.Viewport>
-            {results.length > 0 ? (
-              results.map((item) => (
-                <SearchList.Item
-                  key={item.id}
-                  value={item.id}
-                  label={item.label}
-                  icon={item.icon}
-                  onSelect={() => console.log('[SearchList.Item.onSelect]', item.id, item.label)}
-                />
-              ))
-            ) : (
-              <SearchList.Empty>No results found</SearchList.Empty>
-            )}
-          </SearchList.Viewport>
-        </SearchList.Content>
-      </SearchList.Root>
-    </div>
+        <SearchList.Viewport>
+          {results.length > 0 ? (
+            results.map((item) => (
+              <SearchList.Item
+                key={item.id}
+                value={item.id}
+                label={item.label}
+                icon={item.icon}
+                onSelect={() => console.log('[SearchList.Item.onSelect]', item.id, item.label)}
+              />
+            ))
+          ) : (
+            <SearchList.Empty>No results found</SearchList.Empty>
+          )}
+        </SearchList.Viewport>
+      </SearchList.Content>
+    </SearchList.Root>
   );
 };
 
@@ -87,7 +85,7 @@ const ControlledStory = ({ items = defaultItems }: DefaultStoryProps) => {
   };
 
   return (
-    <div className='is-full bs-[400px] flex flex-col gap-2'>
+    <div className='w-full h-[400px] flex flex-col gap-2'>
       <div className='text-sm text-description'>Controlled query: &quot;{query}&quot;</div>
       <SearchList.Root onSearch={handleSearch} value={query}>
         <SearchList.Input placeholder='Controlled search...' onChange={(e) => handleQueryChange(e.target.value)} />
@@ -105,7 +103,7 @@ const ControlledStory = ({ items = defaultItems }: DefaultStoryProps) => {
           </SearchList.Viewport>
         </SearchList.Content>
       </SearchList.Root>
-      <button className='pli-2 plb-1 rounded bg-accentSurface text-accentText' onClick={() => handleQueryChange('')}>
+      <button className='px-2 py-1 rounded-sm bg-accent-surface text-accent-text' onClick={() => handleQueryChange('')}>
         Clear Query
       </button>
     </div>
@@ -146,7 +144,7 @@ const CustomItem = ({ value, label, description, onSelect }: CustomItemProps) =>
       role='option'
       aria-selected={isSelected}
       data-selected={isSelected}
-      className={`p-2 border-be border-separator cursor-pointer ${isSelected ? 'bg-hoverOverlay' : 'hover:bg-hoverOverlay'}`}
+      className={`p-2 border-b border-separator cursor-pointer ${isSelected ? 'bg-hover-overlay' : 'hover:bg-hover-overlay'}`}
       onClick={onSelect}
     >
       <div className='font-medium'>{label}</div>
@@ -159,7 +157,7 @@ const CustomRenderingStory = ({ items = defaultItems }: DefaultStoryProps) => {
   const { results, handleSearch } = useSearchListResults({ items });
 
   return (
-    <div className='is-full bs-[400px] flex flex-col'>
+    <div className='w-full h-[400px] flex flex-col'>
       <SearchList.Root onSearch={handleSearch}>
         <SearchList.Input placeholder='Search with custom rendering...' autoFocus />
         <SearchList.Content>
@@ -192,7 +190,7 @@ const WithEmptyStory = () => {
   };
 
   return (
-    <div className='is-full bs-[400px] flex flex-col'>
+    <div className='w-full h-[400px] flex flex-col'>
       <SearchList.Root onSearch={handleSearch}>
         <SearchList.Input placeholder='Try searching for anything...' />
         <SearchList.Content>
@@ -221,7 +219,7 @@ const WithoutViewportStory = ({ items = defaultItems }: DefaultStoryProps) => {
   const { results, handleSearch } = useSearchListResults({ items });
 
   return (
-    <div className='is-full bs-[300px] flex flex-col'>
+    <div className='w-full h-[300px] flex flex-col'>
       <SearchList.Root onSearch={handleSearch}>
         <SearchList.Input placeholder='Search without viewport (no scroll)...' classNames='shrink-0' />
         <SearchList.Content>
@@ -254,7 +252,7 @@ const iconsItems: StoryItem[] = [
 
 const WithIconsStory = () => {
   return (
-    <div className='is-full flex flex-col'>
+    <div className='w-full flex flex-col'>
       <SearchList.Root>
         <SearchList.Input placeholder='Search items with icons...' />
         <SearchList.Content>
@@ -331,17 +329,17 @@ const CustomInput = () => {
   };
 
   return (
-    <div className='flex gap-2 items-center p-2 bg-input rounded'>
+    <div className='flex gap-2 items-center p-2 bg-input rounded-sm'>
       <input
         type='text'
         value={query}
         onChange={(ev) => onQueryChange(ev.target.value)}
         onKeyDown={handleKeyDown}
         placeholder='Custom input...'
-        className='bg-transparent outline-none grow'
+        className='bg-transparent outline-hidden grow'
       />
       {query && (
-        <button onClick={() => onQueryChange('')} className='text-description hover:text-baseText'>
+        <button onClick={() => onQueryChange('')} className='text-description hover:text-base-surface-text'>
           ✕
         </button>
       )}
@@ -353,7 +351,7 @@ const CustomInputStory = ({ items = defaultItems }: DefaultStoryProps) => {
   const { results, handleSearch } = useSearchListResults({ items });
 
   return (
-    <div className='is-full bs-[400px] flex flex-col border border-separator'>
+    <div className='w-full h-[400px] flex flex-col border border-separator'>
       <SearchList.Root onSearch={handleSearch}>
         <CustomInput />
         <SearchList.Content>
@@ -388,7 +386,7 @@ const disabledItems: StoryItem[] = [
 
 const WithDisabledItemsStory = () => {
   return (
-    <div className='is-full flex flex-col'>
+    <div className='w-full flex flex-col'>
       <SearchList.Root>
         <SearchList.Input placeholder='Arrow keys skip disabled items...' autoFocus />
         <SearchList.Content>
@@ -438,7 +436,7 @@ const WithGroupsStory = () => {
   );
 
   return (
-    <div className='is-full bs-[400px] flex flex-col'>
+    <div className='w-full h-[400px] flex flex-col'>
       <SearchList.Root onSearch={handleSearch}>
         <SearchList.Input placeholder='Search grouped items...' autoFocus />
         <SearchList.Content>
@@ -471,7 +469,7 @@ const WithGroupsStory = () => {
 const meta = {
   title: 'ui/react-ui-searchlist/SearchList',
   component: SearchList.Root as any,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
   parameters: {
     layout: 'fullscreen',
     translations,

package/src/components/SearchList/SearchList.tsx

@@ -6,6 +6,7 @@ import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import React, {
   type ChangeEvent,
   type ComponentPropsWithRef,
+  type ComponentPropsWithoutRef,
   type KeyboardEvent,
   type PropsWithChildren,
   type ReactNode,
@@ -21,13 +22,14 @@ import {
   type Density,
   type Elevation,
   Icon,
+  ScrollArea,
   type ThemedClassName,
   useDensityContext,
   useElevationContext,
   useThemeContext,
   useTranslation,
 } from '@dxos/react-ui';
-import { descriptionText, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { translationKey } from '../../translations';
 
@@ -55,10 +57,13 @@ type ItemData = {
 type SearchListRootProps = PropsWithChildren<{
   /** Controlled query value. */
   value?: string;
+
   /** Default query value for uncontrolled mode. */
   defaultValue?: string;
+
   /** Debounce delay in milliseconds. */
   debounceMs?: number;
+
   /** Callback when search query changes (debounced). */
   onSearch?: (query: string) => void;
 }>;
@@ -223,45 +228,16 @@ const SearchListRoot = ({
 
 SearchListRoot.displayName = 'SearchList.Root';
 
-//
-// Viewport
-//
-
-type SearchListViewportProps = ThemedClassName<PropsWithChildren<{}>>;
-
-/**
- * Scrollable viewport wrapper for Content.
- * Only Content wrapped in Viewport will be scrollable.
- */
-// TODO(burdon): Reconcile with Mosaic.Viewport.
-const SearchListViewport = ({ classNames, children }: SearchListViewportProps) => {
-  return (
-    <div role='none' className={mx('is-full min-bs-0 grow overflow-y-auto', classNames)}>
-      {children}
-    </div>
-  );
-};
-
-SearchListViewport.displayName = 'SearchList.Viewport';
-
 //
 // Content
 //
 
-type SearchListContentProps = ThemedClassName<PropsWithChildren<{}>>;
+type SearchListContentProps = ThemedClassName<ComponentPropsWithoutRef<'div'>>;
 
-/**
- * Container for search results. Does not scroll by default.
- * Wrap in Viewport for scrollable content.
- */
 const SearchListContent = forwardRef<HTMLDivElement, SearchListContentProps>(
-  ({ classNames, children }, forwardedRef) => {
+  ({ classNames, children, ...props }, forwardedRef) => {
     return (
-      <div
-        ref={forwardedRef}
-        role='listbox'
-        className={mx('flex flex-col is-full min-bs-0 grow overflow-hidden', classNames)}
-      >
+      <div role='none' {...props} className={mx('dx-container flex flex-col gap-3', classNames)} ref={forwardedRef}>
         {children}
       </div>
     );
@@ -378,11 +354,9 @@ const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
         {...props}
         {...(props.autoFocus && !hasIosKeyboard && { autoFocus: true })}
         type='text'
-        value={query}
         placeholder={placeholder ?? defaultPlaceholder}
         className={tx(
           'input.input',
-          'input',
           {
             variant,
             disabled: props.disabled,
@@ -391,6 +365,7 @@ const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
           },
           classNames,
         )}
+        value={query}
         onChange={handleChange}
         onKeyDown={handleKeyDown}
         ref={forwardedRef}
@@ -401,6 +376,24 @@ const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
 
 SearchListInput.displayName = 'SearchList.Input';
 
+//
+// Viewport
+//
+
+type SearchListViewportProps = ThemedClassName<PropsWithChildren>;
+
+const SearchListViewport = forwardRef<HTMLDivElement, SearchListViewportProps>(
+  ({ classNames, children }, forwardedRef) => {
+    return (
+      <ScrollArea.Root role='listbox' classNames={mx(classNames)} ref={forwardedRef} thin>
+        <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+SearchListViewport.displayName = 'SearchList.Viewport';
+
 //
 // Item
 //
@@ -412,6 +405,8 @@ type SearchListItemProps = ThemedClassName<{
   label: string;
   /** Icon to display (string identifier for Icon component). */
   icon?: string;
+  /** Additional class names for the icon element. */
+  iconClassNames?: string;
   /** Whether to show a check icon. */
   checked?: boolean;
   /** Suffix text to display after the label. */
@@ -423,7 +418,7 @@ type SearchListItemProps = ThemedClassName<{
 }>;
 
 const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
-  ({ classNames, value, label, icon, checked, suffix, onSelect, disabled }, forwardedRef) => {
+  ({ classNames, value, label, icon, iconClassNames, checked, suffix, onSelect, disabled }, forwardedRef) => {
     const { selectedValue, registerItem, unregisterItem } = useSearchListItemContext('SearchList.Item');
     const internalRef = useRef<HTMLDivElement>(null);
 
@@ -470,15 +465,15 @@ const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
         tabIndex={-1}
         className={mx(
           'flex gap-2 items-center',
-          'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected=true]:bg-hoverOverlay hover:bg-hoverOverlay',
+          '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 && <Icon icon={icon} size={5} />}
-        <span className='is-0 grow truncate'>{label}</span>
-        {suffix && <span className={mx('shrink-0', descriptionText)}>{suffix}</span>}
+        {icon && <Icon icon={icon} size={5} classNames={iconClassNames} />}
+        <span className='w-0 grow truncate'>{label}</span>
+        {suffix && <span className='shrink-0 text-description'>{suffix}</span>}
         {checked && <Icon icon='ph--check--regular' size={5} />}
       </div>
     );
@@ -495,7 +490,7 @@ type SearchListEmptyProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const SearchListEmpty = ({ classNames, children }: SearchListEmptyProps) => {
   return (
-    <div role='status' className={mx('flex flex-col is-full pli-2 plb-1', classNames)}>
+    <div role='status' className={mx('flex flex-col w-full px-2 py-1', classNames)}>
       {children}
     </div>
   );
@@ -522,7 +517,7 @@ const SearchListGroup = forwardRef<HTMLDivElement, SearchListGroupProps>(
     return (
       <div ref={forwardedRef} role='group' className={mx('flex flex-col', classNames)}>
         {heading && (
-          <div role='presentation' className='pli-2 plb-1 text-xs font-medium text-description'>
+          <div role='presentation' className='px-2 py-1 text-xs font-medium text-description'>
             {heading}
           </div>
         )}
@@ -540,8 +535,8 @@ SearchListGroup.displayName = 'SearchList.Group';
 
 export const SearchList = {
   Root: SearchListRoot,
-  Viewport: SearchListViewport,
   Content: SearchListContent,
+  Viewport: SearchListViewport,
   Input: SearchListInput,
   Item: SearchListItem,
   Empty: SearchListEmpty,
@@ -550,8 +545,8 @@ export const SearchList = {
 
 export type {
   SearchListRootProps,
-  SearchListViewportProps,
   SearchListContentProps,
+  SearchListViewportProps,
   SearchListInputProps,
   SearchListItemProps,
   SearchListEmptyProps,