@dxos/react-ui-searchlist 0.8.4-main.fd6878d → 0.8.4-main.fffef41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-searchlist",
-  "version": "0.8.4-main.fd6878d",
+  "version": "0.8.4-main.fffef41",
   "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",
@@ -25,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.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/storybook-utils": "0.8.4-main.fd6878d"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.fffef41",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41",
+    "@dxos/storybook-utils": "0.8.4-main.fffef41"
   },
   "peerDependencies": {
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.fd6878d",
-    "@dxos/react-ui": "0.8.4-main.fd6878d"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.fffef41",
+    "@dxos/react-ui-theme": "0.8.4-main.fffef41"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,57 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Combobox } from './Combobox';
+
+faker.seed(1234);
+
+const items = faker.helpers.uniqueArray(faker.commerce.productName, 16).sort();
+
+const DefaultStory = () => {
+  return (
+    <Combobox.Root
+      placeholder='Nothing selected'
+      onValueChange={(value) => {
+        console.log('[Combobox.Root.onValueChange]', value);
+      }}
+    >
+      <Combobox.Trigger />
+      <Combobox.Content filter={(value, search) => (value.includes(search) ? 1 : 0)}>
+        <Combobox.Input placeholder='Search...' />
+        <Combobox.List>
+          {items.map((value) => (
+            <Combobox.Item key={value}>{value}</Combobox.Item>
+          ))}
+        </Combobox.List>
+        <Combobox.Arrow />
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-searchlist/Combobox',
+  component: Combobox.Root as any,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'p-2' })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof DefaultStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/Combobox/Combobox.tsx

@@ -0,0 +1,335 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { createContext } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, { type PropsWithChildren, forwardRef, useCallback } from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Icon,
+  Popover,
+  type PopoverArrowProps,
+  type PopoverContentProps,
+  type PopoverVirtualTriggerProps,
+} from '@dxos/react-ui';
+import { useId } from '@dxos/react-ui';
+import { mx, staticPlaceholderText } from '@dxos/react-ui-theme';
+
+import {
+  SearchList,
+  type SearchListContentProps,
+  type SearchListEmptyProps,
+  type SearchListInputProps,
+  type SearchListItemProps,
+  type SearchListRootProps,
+} from '../SearchList';
+
+const COMBOBOX_NAME = 'Combobox';
+const COMBOBOX_CONTENT_NAME = 'ComboboxContent';
+const COMBOBOX_ITEM_NAME = 'ComboboxItem';
+const COMBOBOX_TRIGGER_NAME = 'ComboboxTrigger';
+
+//
+// Context
+//
+
+type ComboboxContextValue = {
+  modalId: string;
+  isCombobox: true;
+  placeholder?: string;
+  open: boolean;
+  onOpenChange: (nextOpen: boolean) => void;
+  value: string;
+  onValueChange: (nextValue: string) => void;
+};
+
+const [ComboboxProvider, useComboboxContext] = createContext<Partial<ComboboxContextValue>>(COMBOBOX_NAME, {});
+
+//
+// Root
+//
+
+type ComboboxRootProps = PropsWithChildren<
+  Partial<ComboboxContextValue & { modal: boolean; defaultOpen: boolean; defaultValue: string; placeholder: string }>
+>;
+
+const ComboboxRoot = ({
+  modal,
+  modalId: propsModalId,
+  open: propsOpen,
+  defaultOpen,
+  onOpenChange: propsOnOpenChange,
+  value: propsValue,
+  defaultValue,
+  onValueChange: propsOnValueChange,
+  placeholder,
+  children,
+}: ComboboxRootProps) => {
+  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 (
+    <Popover.Root open={open} onOpenChange={onOpenChange} modal={modal}>
+      <ComboboxProvider
+        isCombobox
+        modalId={modalId}
+        placeholder={placeholder}
+        open={open}
+        onOpenChange={onOpenChange}
+        value={value}
+        onValueChange={onValueChange}
+      >
+        {children}
+      </ComboboxProvider>
+    </Popover.Root>
+  );
+};
+
+//
+// ContentProps
+//
+
+type ComboboxContentProps = SearchListRootProps & PopoverContentProps;
+
+const ComboboxContent = forwardRef<HTMLDivElement, ComboboxContentProps>(
+  (
+    {
+      side = 'bottom',
+      collisionPadding = 48,
+      sideOffset,
+      align,
+      alignOffset,
+      avoidCollisions,
+      collisionBoundary,
+      arrowPadding,
+      sticky,
+      hideWhenDetached,
+      onOpenAutoFocus,
+      onCloseAutoFocus,
+      onEscapeKeyDown,
+      onPointerDownOutside,
+      onFocusOutside,
+      onInteractOutside,
+      forceMount,
+      children,
+      classNames,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
+
+    return (
+      <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}
+      >
+        <SearchList.Root {...props} classNames='contents density-fine' role='none'>
+          {children}
+        </SearchList.Root>
+      </Popover.Content>
+    );
+  },
+);
+
+ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
+
+//
+// Trigger
+//
+
+type ComboboxTriggerProps = ButtonProps;
+
+const ComboboxTrigger = forwardRef<HTMLButtonElement, ComboboxTriggerProps>(
+  ({ children, onClick, ...props }, forwardedRef) => {
+    const { modalId, open, onOpenChange, placeholder, value } = useComboboxContext(COMBOBOX_TRIGGER_NAME);
+    const handleClick = useCallback(
+      (event: Parameters<Exclude<ButtonProps['onClick'], undefined>>[0]) => {
+        onClick?.(event);
+        onOpenChange?.(true);
+      },
+      [onClick, onOpenChange],
+    );
+
+    return (
+      <Popover.Trigger asChild>
+        <Button
+          {...props}
+          role='combobox'
+          aria-expanded={open}
+          aria-controls={modalId}
+          aria-haspopup='dialog'
+          onClick={handleClick}
+          ref={forwardedRef}
+        >
+          {children ?? (
+            <>
+              <span
+                className={mx('font-normal text-start flex-1 min-is-0 truncate mie-2', !value && staticPlaceholderText)}
+              >
+                {value || placeholder}
+              </span>
+              <Icon icon='ph--caret-down--bold' size={3} />
+            </>
+          )}
+        </Button>
+      </Popover.Trigger>
+    );
+  },
+);
+
+ComboboxTrigger.displayName = COMBOBOX_TRIGGER_NAME;
+
+//
+// VirtualTrigger
+//
+
+type ComboboxVirtualTriggerProps = PopoverVirtualTriggerProps;
+
+const ComboboxVirtualTrigger = Popover.VirtualTrigger;
+
+//
+// Input
+//
+
+type ComboboxInputProps = SearchListInputProps;
+
+const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(({ classNames, ...props }, forwardedRef) => {
+  return (
+    <SearchList.Input
+      {...props}
+      classNames={[
+        'mli-cardSpacingChrome mbs-cardSpacingChrome mbe-0 is-[calc(100%-2*var(--dx-cardSpacingChrome))]',
+        classNames,
+      ]}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// List
+//
+
+type ComboboxListProps = SearchListContentProps;
+
+const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(({ classNames, ...props }, forwardedRef) => {
+  return (
+    <SearchList.Content
+      {...props}
+      classNames={['min-bs-0 overflow-y-auto plb-cardSpacingChrome', classNames]}
+      ref={forwardedRef}
+    />
+  );
+});
+
+//
+// Item
+//
+
+type ComboboxItemProps = SearchListItemProps;
+
+const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
+  ({ classNames, onSelect, ...props }, forwardedRef) => {
+    const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
+    const handleSelect = useCallback<NonNullable<SearchListItemProps['onSelect']>>(
+      (nextValue) => {
+        onSelect?.(nextValue);
+        onValueChange?.(nextValue);
+        onOpenChange?.(false);
+      },
+      [onSelect, onValueChange, onOpenChange],
+    );
+
+    return (
+      <SearchList.Item
+        {...props}
+        classNames={['mli-cardSpacingChrome pli-cardSpacingChrome', classNames]}
+        onSelect={handleSelect}
+        ref={forwardedRef}
+      />
+    );
+  },
+);
+
+ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
+
+//
+// Arrow
+//
+
+type ComboboxArrowProps = PopoverArrowProps;
+
+const ComboboxArrow = Popover.Arrow;
+
+//
+// Empty
+//
+
+type ComboboxEmptyProps = SearchListEmptyProps;
+
+const ComboboxEmpty = SearchList.Empty;
+
+//
+// Combobox
+// https://www.w3.org/WAI/ARIA/apg/patterns/combobox
+//
+
+export const Combobox = {
+  Root: ComboboxRoot,
+  Content: ComboboxContent,
+  Trigger: ComboboxTrigger,
+  VirtualTrigger: ComboboxVirtualTrigger,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Arrow: ComboboxArrow,
+  Empty: ComboboxEmpty,
+};
+
+export type {
+  ComboboxRootProps,
+  ComboboxContentProps,
+  ComboboxTriggerProps,
+  ComboboxVirtualTriggerProps,
+  ComboboxInputProps,
+  ComboboxListProps,
+  ComboboxItemProps,
+  ComboboxArrowProps,
+  ComboboxEmptyProps,
+};

package/src/components/Combobox/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './Combobox';

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

@@ -0,0 +1,53 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { faker } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { translations } from '../../translations';
+
+import { Listbox } from './Listbox';
+
+faker.seed(1234);
+
+type StoryItem = { value: string; label: string };
+
+const options: StoryItem[] = faker.helpers.multiple(
+  () => ({ value: faker.string.uuid(), label: faker.commerce.productName() }) satisfies StoryItem,
+  { count: 16 },
+);
+
+const DefaultStory = () => {
+  const [selectedValue, setSelectedValue] = useState<string>();
+
+  return (
+    <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>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-searchlist/Listbox',
+  component: Listbox.Root,
+  render: DefaultStory,
+  decorators: [withTheme, withLayout({ container: 'column', classNames: 'p-2' })],
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof Listbox.Root>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/src/components/Listbox/Listbox.tsx

@@ -0,0 +1,209 @@
+//
+// 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';
+
+//
+// Context
+//
+
+type ListboxScopedProps<P> = P & { __listboxScope?: Scope };
+type ListboxOptionScopedProps<P> = P & { __listboxOptionScope?: Scope };
+
+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);
+
+//
+// Root
+//
+
+type ListboxRootProps = ThemedClassName<ComponentPropsWithRef<'ul'>> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  autoFocus?: boolean;
+};
+
+// 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('is-full p-cardSpacingChrome', classNames)}
+          ref={rootRef}
+          {...arrowGroup}
+        >
+          {children}
+        </ul>
+      </ListboxProvider>
+    );
+  },
+);
+
+ListboxRoot.displayName = LISTBOX_NAME;
+
+//
+// Option
+//
+
+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;
+
+//
+// OptionLabel
+//
+
+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'>>;
+
+//
+// OptionIndicator
+//
+
+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;
+
+//
+// Listbox
+//
+
+export const Listbox = {
+  Root: ListboxRoot,
+  Option: ListboxOption,
+  OptionLabel: ListboxOptionLabel,
+  OptionIndicator: ListboxOptionIndicator,
+};
+
+export { createListboxScope, useListboxContext };
+
+export type { ListboxRootProps, ListboxOptionProps, ListboxScopedProps };