@dxos/react-ui-list 0.8.4-main.9be5663bfe → 0.8.4-main.abd8ff62ef

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.9be5663bfe",
+  "version": "0.8.4-main.abd8ff62ef",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -20,9 +20,6 @@
     }
   },
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {}
-  },
   "files": [
     "dist",
     "src"
@@ -31,18 +28,21 @@
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
     "@effect-atom/atom-react": "^0.5.0",
+    "@fluentui/react-tabster": "9.26.11",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
     "@radix-ui/react-slot": "1.1.2",
-    "@dxos/debug": "0.8.4-main.9be5663bfe",
-    "@dxos/invariant": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-types": "0.8.4-main.9be5663bfe",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/echo": "0.8.4-main.9be5663bfe",
-    "@dxos/util": "0.8.4-main.9be5663bfe",
-    "@dxos/log": "0.8.4-main.9be5663bfe"
+    "@radix-ui/react-use-controllable-state": "1.1.0",
+    "@dxos/debug": "0.8.4-main.abd8ff62ef",
+    "@dxos/invariant": "0.8.4-main.abd8ff62ef",
+    "@dxos/echo": "0.8.4-main.abd8ff62ef",
+    "@dxos/log": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-list": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef",
+    "@dxos/util": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-types": "0.8.4-main.abd8ff62ef"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
@@ -50,16 +50,16 @@
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "^7.1.11",
-    "@dxos/random": "0.8.4-main.9be5663bfe",
-    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe"
+    "vite": "^8.0.10",
+    "@dxos/random": "0.8.4-main.abd8ff62ef",
+    "@dxos/storybook-utils": "0.8.4-main.abd8ff62ef"
   },
   "peerDependencies": {
     "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
-    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
+    "@dxos/react-ui": "0.8.4-main.abd8ff62ef",
+    "@dxos/ui-theme": "0.8.4-main.abd8ff62ef"
   },
   "publishConfig": {
     "access": "public"

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

@@ -0,0 +1,60 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useMemo, useState } from 'react';
+
+import { random } from '@dxos/random';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+
+import { Combobox } from './Combobox';
+
+random.seed(1234);
+
+const items = random.helpers.uniqueArray(random.commerce.productName, 16).sort();
+
+// Simple in-memory substring filter — Combobox is search-domain-agnostic;
+// callers filter however they want and pass only matching children.
+// For fuzzy/ranked filtering, pair with `useSearchListResults` from
+// `@dxos/react-ui-search`.
+const DefaultStory = () => {
+  const [query, setQuery] = useState('');
+  const filtered = useMemo(() => items.filter((item) => item.toLowerCase().includes(query.toLowerCase())), [query]);
+
+  return (
+    <Combobox.Root
+      placeholder='Nothing selected'
+      onValueChange={(value) => {
+        // eslint-disable-next-line no-console
+        console.log('[Combobox.Root.onValueChange]', value);
+      }}
+    >
+      <Combobox.Trigger />
+      <Combobox.Content>
+        <Combobox.Input placeholder='Search...' value={query} onValueChange={setQuery} />
+        <Combobox.List>
+          {filtered.map((value) => (
+            <Combobox.Item key={value} value={value} label={value} />
+          ))}
+        </Combobox.List>
+        <Combobox.Arrow />
+      </Combobox.Content>
+    </Combobox.Root>
+  );
+};
+
+const meta = {
+  title: 'ui/react-ui-list/Combobox',
+  component: Combobox.Root as any,
+  render: DefaultStory,
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'p-2' })],
+} 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,387 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+// `Combobox` — popover-list with text input. Generic; no search-domain
+// dependencies. Built on `Picker` (this same package) for the
+// listbox-with-input pattern (registry, virtual highlight, keyboard
+// nav, the two performance-split contexts) and `Popover` from
+// `@dxos/react-ui` for the trigger/content/arrow.
+//
+// Filtering is the caller's responsibility — render only the matching
+// `<Combobox.Item>` children. For fuzzy / search-domain filtering,
+// pair with `useSearchListResults` from `@dxos/react-ui-search`.
+//
+// https://www.w3.org/WAI/ARIA/apg/patterns/combobox
+
+import { createContext } from '@radix-ui/react-context';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
+import React, {
+  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
+  type PropsWithChildren,
+  forwardRef,
+  useCallback,
+} from 'react';
+
+import {
+  Button,
+  type ButtonProps,
+  Icon,
+  type IconProps,
+  Popover,
+  type PopoverArrowProps,
+  type PopoverContentProps,
+  type PopoverVirtualTriggerProps,
+  ScrollArea,
+  type ThemedClassName,
+  useId,
+} from '@dxos/react-ui';
+import { composable, composableProps, mx } from '@dxos/ui-theme';
+
+import { Picker, type PickerInputProps, type PickerItemProps } from '../Picker';
+
+const COMBOBOX_NAME = 'Combobox';
+const COMBOBOX_CONTENT_NAME = 'ComboboxContent';
+const COMBOBOX_ITEM_NAME = 'ComboboxItem';
+const COMBOBOX_TRIGGER_NAME = 'ComboboxTrigger';
+
+//
+// Context — open/value state shared with Trigger and Item.
+//
+
+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 = ({
+  children,
+  modal,
+  modalId: modalIdProp,
+  open: openProp,
+  defaultOpen,
+  onOpenChange: propsOnOpenChange,
+  value: valueProp,
+  defaultValue,
+  onValueChange: propsOnValueChange,
+  placeholder,
+}: ComboboxRootProps) => {
+  const modalId = useId(COMBOBOX_NAME, modalIdProp);
+  const [open = false, onOpenChange] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen,
+    onChange: propsOnOpenChange,
+  });
+  const [value = '', onValueChange] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: propsOnValueChange,
+  });
+
+  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>
+  );
+};
+
+//
+// Content — Popover.Content + Picker.Root.
+//
+// Filtering is caller-driven: pass already-matching <Combobox.Item> children.
+//
+
+type ComboboxContentProps = PopoverContentProps;
+
+const ComboboxContent = composable<HTMLDivElement, ComboboxContentProps>(({ children, ...props }, forwardedRef) => {
+  const { modalId } = useComboboxContext(COMBOBOX_CONTENT_NAME);
+
+  return (
+    <Popover.Content {...composableProps(props, { id: modalId })} ref={forwardedRef}>
+      <Popover.Viewport classNames='w-(--radix-popover-trigger-width)'>
+        <Picker.Root>{children}</Picker.Root>
+      </Popover.Viewport>
+    </Popover.Content>
+  );
+});
+
+ComboboxContent.displayName = COMBOBOX_CONTENT_NAME;
+
+//
+// Trigger — the button that opens the popover.
+//
+
+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-w-0 truncate me-2', !value && 'text-subdued')}>
+                {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 — text input wired to Picker.Input. Caller controls value.
+//
+
+type ComboboxInputProps = ThemedClassName<
+  Omit<ComponentPropsWithRef<'input'>, 'value'> & Pick<PickerInputProps, 'value' | 'onValueChange'>
+>;
+
+const ComboboxInput = forwardRef<HTMLInputElement, ComboboxInputProps>(({ classNames, ...props }, forwardedRef) => {
+  return (
+    <Picker.Input
+      {...props}
+      classNames={['m-form-chrome mb-0 w-[calc(100%-2*var(--spacing-form-chrome))]', classNames]}
+      ref={forwardedRef}
+    />
+  );
+});
+
+ComboboxInput.displayName = 'Combobox.Input';
+
+//
+// List — scroll wrapper around items.
+//
+
+type ComboboxListProps = PropsWithChildren<{ classNames?: string | string[] }>;
+
+const ComboboxList = forwardRef<HTMLDivElement, ComboboxListProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    return (
+      <ScrollArea.Root
+        {...composableProps(props, { classNames: ['py-form-chrome', classNames] })}
+        role='listbox'
+        centered
+        padding
+        thin
+        ref={forwardedRef}
+      >
+        <ScrollArea.Viewport>{children}</ScrollArea.Viewport>
+      </ScrollArea.Root>
+    );
+  },
+);
+
+ComboboxList.displayName = 'Combobox.List';
+
+//
+// Item — wraps Picker.Item; commits value + closes popover on select.
+//
+
+type ComboboxItemProps = ThemedClassName<
+  PropsWithChildren<{
+    /** Unique identifier. */
+    value: string;
+    /** Display label (used when `children` are not provided). */
+    label?: string;
+    /** Optional icon id (Phosphor) shown before the label. */
+    icon?: string;
+    /** Additional class names for the icon. */
+    iconClassNames?: IconProps['classNames'];
+    /** Show a check icon on the right (commonly used for confirming the picked item). */
+    checked?: boolean;
+    /** Suffix text after the label. */
+    suffix?: string;
+    /** Disabled. */
+    disabled?: boolean;
+    /** Caller-supplied select handler in addition to value-commit. */
+    onSelect?: () => void;
+    /** Whether to close the popover when this item is selected. Defaults to true. */
+    closeOnSelect?: boolean;
+  }>
+>;
+
+const ComboboxItem = forwardRef<HTMLDivElement, ComboboxItemProps>(
+  (
+    {
+      classNames,
+      onSelect,
+      value,
+      label,
+      icon,
+      iconClassNames,
+      checked,
+      suffix,
+      disabled,
+      closeOnSelect = true,
+      children,
+    },
+    forwardedRef,
+  ) => {
+    const { onValueChange, onOpenChange } = useComboboxContext(COMBOBOX_ITEM_NAME);
+    const handleSelect = useCallback<NonNullable<PickerItemProps['onSelect']>>(() => {
+      onSelect?.();
+      if (value !== undefined) {
+        onValueChange?.(value);
+      }
+      if (closeOnSelect) {
+        onOpenChange?.(false);
+      }
+    }, [onSelect, onValueChange, onOpenChange, value, closeOnSelect]);
+
+    return (
+      <Picker.Item
+        value={value}
+        disabled={disabled}
+        onSelect={handleSelect}
+        ref={forwardedRef}
+        classNames={[
+          // Full width inside the viewport (no horizontal margin).
+          // `px-3 py-1`, `cursor-pointer`, `select-none` and the
+          // `dx-hover` / `dx-selected` pairing come from `Picker.Item`'s
+          // defaults; we only add the row-shape (flex / icons + label)
+          // and the disabled overrides on top.
+          'flex w-full gap-2 items-center',
+          disabled && 'hover:bg-transparent data-[selected=true]:bg-transparent',
+          classNames,
+        ]}
+      >
+        {children ?? (
+          <>
+            {icon && <Icon icon={icon} 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' />}
+          </>
+        )}
+      </Picker.Item>
+    );
+  },
+);
+
+ComboboxItem.displayName = COMBOBOX_ITEM_NAME;
+
+//
+// Arrow
+//
+
+type ComboboxArrowProps = PopoverArrowProps;
+
+const ComboboxArrow = Popover.Arrow;
+
+//
+// Empty — passthrough placeholder. No translation; caller supplies copy.
+//
+
+type ComboboxEmptyProps = ThemedClassName<PropsWithChildren>;
+
+const ComboboxEmpty = forwardRef<HTMLDivElement, ComboboxEmptyProps>(({ classNames, children }, forwardedRef) => {
+  return (
+    <div ref={forwardedRef} role='status' className={mx(classNames)}>
+      {children}
+    </div>
+  );
+});
+
+ComboboxEmpty.displayName = 'Combobox.Empty';
+
+//
+// Portal
+//
+
+type ComboboxPortalProps = ComponentPropsWithoutRef<typeof Popover.Portal>;
+
+const ComboboxPortal = Popover.Portal;
+
+//
+// Combobox
+//
+
+export const Combobox = {
+  Root: ComboboxRoot,
+  Portal: ComboboxPortal,
+  Content: ComboboxContent,
+  Trigger: ComboboxTrigger,
+  VirtualTrigger: ComboboxVirtualTrigger,
+  Input: ComboboxInput,
+  List: ComboboxList,
+  Item: ComboboxItem,
+  Arrow: ComboboxArrow,
+  Empty: ComboboxEmpty,
+};
+
+export type {
+  ComboboxRootProps,
+  ComboboxPortalProps,
+  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/List/List.tsx

@@ -16,11 +16,20 @@ import {
 import { ListRoot, type ListRootProps } from './ListRoot';
 
 /**
- * Draggable list.
+ * Draggable list with per-row drag handles and delete buttons.
  * Ref: https://github.com/atlassian/pragmatic-drag-and-drop
  * Ref: https://github.com/alexreardon/pdnd-react-tailwind/blob/main/src/task.tsx
  *
- * @deprecated Use react-ui-mosaic.
+ * @deprecated New code should use one of:
+ *
+ *   - `RowList` / `CardList` from this same package — for selectable
+ *     pickers (master/detail). Correct ARIA + dx-* by construction.
+ *   - `Mosaic.Stack` / `Mosaic.VirtualStack` from `@dxos/react-ui-mosaic`
+ *     — for virtualized or drag-reorderable card stacks.
+ *
+ * This component is retained for the existing reorder-with-delete-button
+ * use cases (plugin-meeting, plugin-automation, plugin-zen, etc.) until
+ * each is migrated; see `AUDIT.md` Phase 6 for the migration plan.
  */
 export const List = {
   Root: ListRoot,

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

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