@dxos/react-ui-searchlist 0.8.4-main.b97322e → 0.8.4-main.c4373fc

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-searchlist",
-  "version": "0.8.4-main.b97322e",
+  "version": "0.8.4-main.c4373fc",
   "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",
@@ -10,6 +10,7 @@
   "type": "module",
   "exports": {
     ".": {
+      "source": "./src/index.ts",
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
@@ -24,27 +25,29 @@
     "src"
   ],
   "dependencies": {
+    "@fluentui/react-tabster": "^9.24.2",
     "@preact-signals/safe-react": "^0.9.0",
+    "@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"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.b97322e",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/storybook-utils": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "@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.c4373fc",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc",
+    "@dxos/storybook-utils": "0.8.4-main.c4373fc"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.b97322e",
-    "@dxos/react-ui-theme": "0.8.4-main.b97322e"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.c4373fc",
+    "@dxos/react-ui-theme": "0.8.4-main.c4373fc"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Listbox.stories.tsx

@@ -0,0 +1,73 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { withTheme } from '@dxos/react-ui/testing';
+
+import { Listbox } from './Listbox';
+
+const DefaultStory = () => {
+  const [selectedValue, setSelectedValue] = useState<string>('option-2');
+
+  const options = [
+    { value: 'option-1', label: 'First Option' },
+    { value: 'option-2', label: 'Second Option' },
+    { value: 'option-3', label: 'Third Option' },
+  ];
+
+  return (
+    <div className='w-64'>
+      <Listbox.Root value={selectedValue} onValueChange={setSelectedValue}>
+        {options.map((option) => (
+          <Listbox.Option key={option.value} value={option.value}>
+            <Listbox.OptionLabel>{option.label}</Listbox.OptionLabel>
+            <Listbox.OptionIndicator />
+          </Listbox.Option>
+        ))}
+      </Listbox.Root>
+    </div>
+  );
+};
+
+const DefaultValueStory = () => {
+  const options = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+  ];
+
+  return (
+    <div className='w-64'>
+      <Listbox.Root defaultValue='banana'>
+        {options.map((option) => (
+          <Listbox.Option key={option.value} value={option.value}>
+            <Listbox.OptionLabel>{option.label}</Listbox.OptionLabel>
+            <Listbox.OptionIndicator />
+          </Listbox.Option>
+        ))}
+      </Listbox.Root>
+    </div>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-searchlist/Listbox',
+  component: Listbox.Root,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof Listbox.Root>;
+
+export default meta;
+
+export const Default: StoryObj<typeof DefaultStory> = {
+  render: DefaultStory,
+};
+
+export const DefaultValue: StoryObj<typeof DefaultValueStory> = {
+  render: DefaultValueStory,
+};

package/src/components/Listbox.tsx

@@ -0,0 +1,185 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useComposedRefs } from '@radix-ui/react-compose-refs';
+import { type Scope, createContextScope } from '@radix-ui/react-context';
+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 { commandItem, searchListItem } from './SearchList';
+
+const LISTBOX_NAME = 'Listbox';
+const LISTBOX_OPTION_NAME = 'ListboxOption';
+const LISTBOX_OPTION_LABEL_NAME = 'ListboxOptionLabel';
+const LISTBOX_OPTION_INDICATOR_NAME = 'ListboxOptionIndicator';
+
+type ListboxScopedProps<P> = P & { __listboxScope?: Scope };
+type ListboxOptionScopedProps<P> = P & { __listboxOptionScope?: Scope };
+
+type ListboxRootProps = ThemedClassName<ComponentPropsWithRef<'ul'>> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  autoFocus?: boolean;
+};
+
+type ListboxOptionProps = ThemedClassName<ComponentPropsWithRef<'li'>> & {
+  value: string;
+};
+
+const [createListboxContext, createListboxScope] = createContextScope(LISTBOX_NAME, []);
+const [createListboxOptionContext, createListboxOptionScope] = createContextScope(LISTBOX_OPTION_NAME, [
+  createListboxScope,
+]);
+
+type ListboxContextValue = {
+  selectedValue: string | undefined;
+  onValueChange: (value: string) => void;
+};
+
+type ListboxOptionContextValue = {
+  value: string;
+  isSelected: boolean;
+};
+
+const [ListboxProvider, useListboxContext] = createListboxContext<ListboxContextValue>(LISTBOX_NAME);
+const [ListboxOptionProvider, useListboxOptionContext] =
+  createListboxOptionContext<ListboxOptionContextValue>(LISTBOX_OPTION_NAME);
+
+// TODO(thure): Note that this overlaps significantly with the the `SelectableListbox` story of `List.tsx` in `react-ui`,
+//  making this an exemplar of `List` specifying standard `role="listbox"` interactivity, though it is here because it
+//  coheres with SearchList’s styles and norms. This can be promoted to `react-ui`, but doing so should involve clearing
+//  the technical- and design-debt in its `List` component.
+const ListboxRoot = forwardRef<HTMLUListElement, ListboxRootProps>(
+  (props: ListboxScopedProps<ListboxRootProps>, forwardedRef) => {
+    const {
+      __listboxScope,
+      children,
+      classNames,
+      value: propsValue,
+      defaultValue,
+      onValueChange,
+      autoFocus,
+      ...rootProps
+    } = props;
+
+    const arrowGroup = useArrowNavigationGroup({ axis: 'vertical' });
+    const ref = useRef<HTMLUListElement | null>(null);
+    const rootRef = useComposedRefs<HTMLUListElement>(ref, forwardedRef);
+
+    const [selectedValue, setSelectedValue] = useControllableState({
+      prop: propsValue,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const handleValueChange = (value: string) => {
+      setSelectedValue(value);
+    };
+
+    useEffect(() => {
+      // Autofocus the selected option on mount using querySelector
+      (ref.current?.querySelector('[aria-selected="true"]') as HTMLLIElement)?.focus();
+    }, [autoFocus]);
+
+    return (
+      <ListboxProvider scope={__listboxScope} selectedValue={selectedValue} onValueChange={handleValueChange}>
+        <ul
+          role='listbox'
+          {...rootProps}
+          className={mx('p-cardSpacingChrome', classNames)}
+          ref={rootRef}
+          {...arrowGroup}
+        >
+          {children}
+        </ul>
+      </ListboxProvider>
+    );
+  },
+);
+
+ListboxRoot.displayName = LISTBOX_NAME;
+
+const ListboxOption = forwardRef<HTMLLIElement, ListboxOptionProps>(
+  (props: ListboxScopedProps<ListboxOptionProps>, forwardedRef) => {
+    const { __listboxScope, children, classNames, value, ...rootProps } = props;
+    const { selectedValue, onValueChange } = useListboxContext(LISTBOX_OPTION_NAME, __listboxScope);
+
+    const isSelected = selectedValue === value;
+
+    const handleSelect = useCallback(() => {
+      onValueChange(value);
+    }, [value, onValueChange]);
+
+    return (
+      <ListboxOptionProvider scope={__listboxScope} value={value} isSelected={isSelected}>
+        <li
+          role='option'
+          {...rootProps}
+          aria-selected={isSelected}
+          tabIndex={0}
+          className={mx('dx-focus-ring', commandItem, searchListItem, classNames)}
+          onClick={handleSelect}
+          onKeyDown={({ key }) => {
+            if (['Enter', ' '].includes(key)) {
+              handleSelect();
+            }
+          }}
+          ref={forwardedRef}
+        >
+          {children}
+        </li>
+      </ListboxOptionProvider>
+    );
+  },
+);
+
+ListboxOption.displayName = LISTBOX_OPTION_NAME;
+
+const ListboxOptionLabel = forwardRef<HTMLDivElement, ThemedClassName<ComponentPropsWithRef<'div'>>>(
+  ({ children, classNames, ...rootProps }, forwardedRef) => {
+    return (
+      <span {...rootProps} className={mx('grow truncate', classNames)} ref={forwardedRef}>
+        {children}
+      </span>
+    );
+  },
+);
+
+ListboxOptionLabel.displayName = LISTBOX_OPTION_LABEL_NAME;
+
+type ListboxOptionIndicatorProps = Omit<IconProps, 'icon'> & Partial<Pick<IconProps, 'icon'>>;
+
+const ListboxOptionIndicator = forwardRef<SVGSVGElement, ListboxOptionIndicatorProps>(
+  (props: ListboxOptionScopedProps<ListboxOptionIndicatorProps>, forwardedRef) => {
+    const { __listboxOptionScope, classNames, ...rootProps } = props;
+    const { isSelected } = useListboxOptionContext(LISTBOX_OPTION_INDICATOR_NAME, __listboxOptionScope);
+
+    return (
+      <Icon
+        icon='ph--check--regular'
+        {...rootProps}
+        classNames={mx(!isSelected && 'invisible', classNames)}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ListboxOptionIndicator.displayName = LISTBOX_OPTION_INDICATOR_NAME;
+
+export const Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator,
+};
+
+export { createListboxScope, useListboxContext };
+
+export type { ListboxRootProps, ListboxOptionProps, ListboxScopedProps };

package/src/components/SearchList.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
-import React, { type FC } from 'react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
 
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { SearchList } from './SearchList';
 
@@ -21,7 +20,11 @@ const defaultItems: StoryItems = faker.helpers
     return acc;
   }, {});
 
-const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) => {
+type StoryProps = {
+  items: StoryItems;
+};
+
+const DefaultStory = ({ items = defaultItems }: StoryProps) => {
   return (
     <SearchList.Root filter={(value, search) => (items[value].includes(search) ? 1 : 0)}>
       <SearchList.Input placeholder='Search...' />
@@ -36,12 +39,17 @@ const SearchListStory: FC<{ items: StoryItems }> = ({ items = defaultItems }) =>
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-searchlist/SearchList',
-  component: SearchListStory,
+  component: SearchList.Root as any,
+  render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/components/SearchList.tsx

@@ -5,7 +5,7 @@
 import { createContext } from '@radix-ui/react-context';
 import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { CommandEmpty, CommandInput, CommandItem, CommandList, CommandRoot } from 'cmdk';
-import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useCallback } from 'react';
+import React, { type ComponentPropsWithRef, type PropsWithChildren, forwardRef, useCallback } from 'react';
 
 import {
   Button,
@@ -63,10 +63,10 @@ type CommandInputPrimitiveProps = ComponentPropsWithRef<typeof CommandInput>;
 
 // TODO: Harmonize with other inputs’ `onChange` prop.
 type SearchListInputProps = Omit<TextInputProps, 'value' | 'defaultValue' | 'onChange'> &
-  Pick<CommandInputPrimitiveProps, 'value' | 'onValueChange' | 'defaultValue'>;
+  Pick<CommandInputPrimitiveProps, 'value' | 'defaultValue' | 'onValueChange'>;
 
 const SearchListInput = forwardRef<HTMLInputElement, SearchListInputProps>(
-  ({ children, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
+  ({ classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
     // CHORE(thure): Keep this in-sync with `TextInput`, or submit a PR for `cmdk` to support `asChild` so we don’t have to.
     const { hasIosKeyboard } = useThemeContext();
     const { tx } = useThemeContext();
@@ -121,6 +121,10 @@ const SearchListEmpty = forwardRef<HTMLDivElement, SearchListEmptyProps>(
 
 type SearchListItemProps = ThemedClassName<ComponentPropsWithRef<typeof CommandItem>>;
 
+const commandItem = 'flex items-center overflow-hidden';
+const searchListItem =
+  'plb-1 pli-2 rounded-sm select-none cursor-pointer data-[selected]:bg-hoverOverlay hover:bg-hoverOverlay';
+
 const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
   ({ children, classNames, onSelect, ...props }, forwardedRef) => {
     const { onValueChange, onOpenChange } = useComboboxContext(SEARCHLIST_ITEM_NAME);
@@ -133,12 +137,7 @@ const SearchListItem = forwardRef<HTMLDivElement, SearchListItemProps>(
       [onValueChange, onOpenChange, onSelect],
     );
     return (
-      <CommandItem
-        {...props}
-        onSelect={handleSelect}
-        className={mx('p-1 rounded select-none cursor-pointer data-[selected]:bg-hoverOverlay', classNames)}
-        ref={forwardedRef}
-      >
+      <CommandItem {...props} onSelect={handleSelect} className={mx(searchListItem, classNames)} ref={forwardedRef}>
         {children}
       </CommandItem>
     );
@@ -248,3 +247,5 @@ export type {
   ComboboxRootProps,
   ComboboxTriggerProps,
 };
+
+export { commandItem, searchListItem };

package/src/components/index.ts

@@ -3,3 +3,4 @@
 //
 
 export * from './SearchList';
+export * from './Listbox';

package/src/composites/PopoverCombobox.stories.tsx

@@ -2,12 +2,11 @@
 // Copyright 2023 DXOS.org
 //
 
-import '@dxos-theme';
-
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
-import { withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
 import { PopoverCombobox } from './PopoverCombobox';
 
@@ -32,13 +31,17 @@ const DefaultStory = () => {
   );
 };
 
-export default {
+const meta = {
   title: 'ui/react-ui-searchlist/PopoverCombobox',
-  component: PopoverCombobox,
+  component: PopoverCombobox.Root as any,
   render: DefaultStory,
   decorators: [withTheme],
-};
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-export const Default = {
+export const Default: Story = {
   args: {},
 };

package/src/composites/PopoverCombobox.tsx

@@ -9,7 +9,6 @@ import {
   Popover,
   type PopoverArrowProps,
   type PopoverContentProps,
-  type PopoverViewportProps,
   type PopoverVirtualTriggerProps,
 } from '@dxos/react-ui';
 
@@ -100,16 +99,17 @@ const PopoverComboboxContent = forwardRef<HTMLDivElement, PopoverComboboxContent
           onFocusOutside,
           onInteractOutside,
           forceMount,
-          classNames,
         }}
+        classNames={[
+          'is-[--radix-popover-trigger-width] max-bs-[--radix-popover-content-available-height] grid grid-rows-[min-content_1fr]',
+          classNames,
+        ]}
         id={modalId}
         ref={forwardedRef}
       >
-        <Popover.Viewport>
-          <SearchList.Root {...props} classNames='contents density-fine' role='none'>
-            {children}
-          </SearchList.Root>
-        </Popover.Viewport>
+        <SearchList.Root {...props} classNames='contents density-fine' role='none'>
+          {children}
+        </SearchList.Root>
       </Popover.Content>
     );
   },
@@ -139,7 +139,7 @@ const PopoverComboboxInput = forwardRef<HTMLInputElement, PopoverComboboxInputPr
       <SearchList.Input
         {...props}
         classNames={[
-          'mli-cardSpacingChrome mbs-cardSpacingChrome is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
+          'mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
           classNames,
         ]}
         ref={forwardedRef}
@@ -148,15 +148,16 @@ const PopoverComboboxInput = forwardRef<HTMLInputElement, PopoverComboboxInputPr
   },
 );
 
-type PopoverComboboxListProps = SearchListContentProps &
-  Pick<PopoverViewportProps, 'constrainBlock' | 'constrainInline'>;
+type PopoverComboboxListProps = SearchListContentProps;
 
 const PopoverComboboxList = forwardRef<HTMLDivElement, PopoverComboboxListProps>(
-  ({ constrainInline, constrainBlock, ...props }, forwardedRef) => {
+  ({ classNames, ...props }, forwardedRef) => {
     return (
-      <Popover.Viewport {...{ constrainInline, constrainBlock }}>
-        <SearchList.Content {...props} ref={forwardedRef} />
-      </Popover.Viewport>
+      <SearchList.Content
+        {...props}
+        classNames={['min-bs-0 overflow-y-auto plb-cardSpacingChrome', classNames]}
+        ref={forwardedRef}
+      />
     );
   },
 );