@dxos/react-ui-list 0.8.3 → 0.8.4-main.1c7ec43d41

package/src/components/List/List.stories.tsx

@@ -2,40 +2,43 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type Meta, type StoryObj } from '@storybook/react';
-import { Schema } from 'effect';
-import React from 'react';
-
-import { live } from '@dxos/live-object';
-import { ghostHover, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { Atom, RegistryContext, useAtomValue } from '@effect-atom/atom-react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import * as Schema from 'effect/Schema';
+import React, { useContext, useMemo } from 'react';
+
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
-import { createList, TestItemSchema, type TestItemType } from './testing';
+import { TestItemSchema, type TestItemType, type TestList, createList } from './testing';
 
 // TODO(burdon): var-icon-size.
-const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
-
-const meta: Meta = {
-  title: 'ui/react-ui-list/List',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-};
+const grid = 'grid grid-cols-[32px_1fr_32px] min-h-[2rem] rounded-sm';
 
-export default meta;
+const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
+  const registry = useContext(RegistryContext);
+  const listAtom = useMemo(() => Atom.make<TestList>(createList(100)).pipe(Atom.keepAlive), []);
+  const list = useAtomValue(listAtom);
+  const items = list.items;
 
-const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   const handleSelect = (item: TestItemType) => {
     console.log('select', item);
   };
   const handleDelete = (item: TestItemType) => {
-    const idx = items.findIndex((i) => i.id === item.id);
-    items.splice(idx, 1);
+    const prev = registry.get(listAtom);
+    registry.set(listAtom, {
+      ...prev,
+      items: prev.items.filter((i) => i.id !== item.id),
+    });
   };
   const handleMove = (from: number, to: number) => {
-    arrayMove(items, from, to);
+    const prev = registry.get(listAtom);
+    const newItems = [...prev.items];
+    arrayMove(newItems, from, to);
+    registry.set(listAtom, { ...prev, items: newItems });
   };
 
   return (
@@ -48,9 +51,9 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='w-full h-full overflow-auto'>
+            <div role='list' className='h-full w-full overflow-auto'>
               {items?.map((item) => (
-                <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+                <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
                   <List.ItemDragHandle />
                   <List.ItemTitle onClick={() => handleSelect(item)}>{item.name}</List.ItemTitle>
                   <List.ItemDeleteButton onClick={() => handleDelete(item)} />
@@ -66,7 +69,7 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
 
           <List.ItemDragPreview<TestItemType>>
             {({ item }) => (
-              <List.ItemWrapper classNames={mx(grid, 'bg-modalSurface border border-separator')}>
+              <List.ItemWrapper classNames={mx(grid, 'bg-modal-surface border border-separator')}>
                 <List.ItemDragHandle />
                 <div className='flex items-center'>{item.name}</div>
               </List.ItemWrapper>
@@ -78,13 +81,17 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
   );
 };
 
-const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
+  const listAtom = useMemo(() => Atom.make<TestList>(createList(100)).pipe(Atom.keepAlive), []);
+  const list = useAtomValue(listAtom);
+  const items = list.items;
+
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
-        <div role='list' className='w-full h-full overflow-auto'>
+        <div role='list' className='h-full w-full overflow-auto'>
           {items?.map((item) => (
-            <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
+            <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid)}>
               <List.ItemDragHandle />
               <List.ItemTitle>{item.name}</List.ItemTitle>
               <List.ItemDeleteButton />
@@ -96,20 +103,27 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   );
 };
 
-const list = live(createList(100));
+const meta = {
+  title: 'ui/react-ui-list/List',
+  component: List.Root,
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof List.Root>;
+
+export default meta;
 
-export const Default: StoryObj<ListRootProps<TestItemType>> = {
+export const Default: StoryObj<typeof DefaultStory> = {
   render: DefaultStory,
   args: {
-    items: list.items,
     isItem: Schema.is(TestItemSchema),
   },
 };
 
-export const Simple: StoryObj<ListRootProps<TestItemType>> = {
+export const Simple: StoryObj<typeof SimpleStory> = {
   render: SimpleStory,
   args: {
-    items: list.items,
     isItem: Schema.is(TestItemSchema),
   },
 };

package/src/components/List/List.tsx

@@ -3,11 +3,9 @@
 //
 
 import {
-  IconButton,
-  type IconButtonProps,
   ListItem,
+  ListItemIconButton,
   ListItemDeleteButton,
-  ListItemButton,
   ListItemDragHandle,
   ListItemDragPreview,
   type ListItemProps,
@@ -17,17 +15,21 @@ import {
 } from './ListItem';
 import { ListRoot, type ListRootProps } from './ListRoot';
 
-// TODO(burdon): Multi-select model.
-// TODO(burdon): Key nav.
-// TODO(burdon): Animation.
-// TODO(burdon): Constrain axis.
-// TODO(burdon): Tree view.
-// TODO(burdon): Fix autoscroll while dragging.
-
 /**
- * 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 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,
@@ -35,12 +37,11 @@ export const List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle,
-  IconButton,
 };
 
 type ListItem = ListItemRecord;
 
-export type { ListRootProps, ListItemProps, IconButtonProps, ListItem, ListItemRecord };
+export type { ListRootProps, ListItemProps, ListItem, ListItemRecord };

package/src/components/List/ListItem.tsx

@@ -2,22 +2,22 @@
 // Copyright 2024 DXOS.org
 //
 
-import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import {
   type Edge,
   attachClosestEdge,
   extractClosestEdge,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview';
 import { createContext } from '@radix-ui/react-context';
+import { Slot } from '@radix-ui/react-slot';
 import React, {
   type ComponentProps,
   type HTMLAttributes,
-  type MutableRefObject,
   type PropsWithChildren,
   type ReactNode,
-  forwardRef,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -25,8 +25,14 @@ import React, {
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
-import { Icon, type ThemedClassName, ListItem as NaturalListItem } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import {
+  IconButton,
+  type IconButtonProps,
+  ListItem as NaturalListItem,
+  type ThemedClassName,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx, osTranslations } from '@dxos/ui-theme';
 
 import { useListContext } from './ListRoot';
 
@@ -56,7 +62,7 @@ const stateStyles: { [Key in ItemDragState['type']]?: HTMLAttributes<HTMLDivElem
 
 type ListItemContext<T extends ListItemRecord> = {
   item: T;
-  dragHandleRef: MutableRefObject<HTMLElement | null>;
+  dragHandleRef: RefObject<HTMLButtonElement | null>;
 };
 
 /**
@@ -72,22 +78,34 @@ export const [ListItemProvider, useListItemContext] = createContext<ListItemCont
 );
 
 export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
-  PropsWithChildren<{
-    item: T;
-  }> &
-    HTMLAttributes<HTMLDivElement>
+  PropsWithChildren<
+    {
+      item: T;
+      asChild?: boolean;
+      selected?: boolean;
+    } & HTMLAttributes<HTMLDivElement>
+  >
 >;
 
 /**
  * Draggable list item.
  */
-export const ListItem = <T extends ListItemRecord>({ children, classNames, item, ...props }: ListItemProps<T>) => {
+export const ListItem = <T extends ListItemRecord>({
+  children,
+  classNames,
+  item,
+  asChild,
+  selected,
+  ...props
+}: ListItemProps<T>) => {
+  const Comp = asChild ? Slot : 'div';
   const { isItem, readonly, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
-  const ref = useRef<HTMLDivElement | null>(null);
-  const dragHandleRef = useRef<HTMLElement | null>(null);
+  const rootRef = useRef<HTMLDivElement | null>(null);
+  const dragHandleRef = useRef<HTMLButtonElement | null>(null);
   const [state, setState] = useState<ItemDragState>(idle);
+
   useEffect(() => {
-    const element = ref.current;
+    const element = rootRef.current;
     invariant(element);
     return combine(
       //
@@ -142,6 +160,9 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
           const closestEdge = extractClosestEdge(self.data);
           setState({ type: 'is-dragging-over', closestEdge });
         },
+        onDragLeave: () => {
+          setState(idle);
+        },
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge(self.data);
           setState((current) => {
@@ -151,9 +172,6 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
             return { type: 'is-dragging-over', closestEdge };
           });
         },
-        onDragLeave: () => {
-          setState(idle);
-        },
         onDrop: () => {
           setState(idle);
         },
@@ -163,19 +181,18 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <div role='none' className='relative'>
-        <div
-          ref={ref}
-          role='listitem'
-          className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}
-          {...props}
-        >
-          {children}
-        </div>
-        {state.type === 'is-dragging-over' && state.closestEdge && (
-          <NaturalListItem.DropIndicator edge={state.closestEdge} />
-        )}
-      </div>
+      <Comp
+        {...props}
+        role='listitem'
+        aria-selected={selected}
+        className={mx('relative p-1 dx-selected dx-hover', classNames, stateStyles[state.type])}
+        ref={rootRef}
+      >
+        {children}
+      </Comp>
+      {state.type === 'is-dragging-over' && state.closestEdge && (
+        <NaturalListItem.DropIndicator edge={state.closestEdge} />
+      )}
     </ListItemProvider>
   );
 };
@@ -184,51 +201,66 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 // List item components
 //
 
-export type IconButtonProps = ThemedClassName<ComponentProps<'button'>> & { icon: string };
-
-export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ classNames, icon, ...props }, forwardedRef) => {
-    return (
-      <button ref={forwardedRef} className={mx('flex items-center justify-center', classNames)} {...props}>
-        <Icon icon={icon} classNames='cursor-pointer' size={4} />
-      </button>
-    );
-  },
-);
-
-export const ListItemDeleteButton = ({
+export const ListItemIconButton = ({
   autoHide = true,
+  iconOnly = true,
+  variant = 'ghost',
   classNames,
   disabled,
-  icon = 'ph--x--regular',
   ...props
-}: Partial<Pick<IconButtonProps, 'icon'>> & Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {
-  const { state } = useListContext('DELETE_BUTTON');
+}: IconButtonProps & { autoHide?: boolean }) => {
+  const { state } = useListContext('ITEM_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
   return (
     <IconButton
-      icon={icon}
+      {...props}
       disabled={isDisabled}
+      iconOnly={iconOnly}
+      variant={variant}
       classNames={[classNames, autoHide && disabled && 'hidden']}
-      {...props}
     />
   );
 };
 
-export const ListItemButton = ({
+// TODO(burdon): Generalize to action button.
+export const ListItemDeleteButton = ({
   autoHide = true,
   classNames,
   disabled,
+  icon = 'ph--x--regular',
+  label,
   ...props
-}: IconButtonProps & { autoHide?: boolean }) => {
-  const { state } = useListContext('ITEM_BUTTON');
+}: Partial<Pick<IconButtonProps, 'icon'>> &
+  Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
+  const { state } = useListContext('DELETE_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
-  return <IconButton disabled={isDisabled} classNames={[classNames, autoHide && disabled && 'hidden']} {...props} />;
+  const { t } = useTranslation(osTranslations);
+  return (
+    <IconButton
+      {...props}
+      variant='ghost'
+      disabled={isDisabled}
+      icon={icon}
+      iconOnly
+      label={label ?? t('delete.label')}
+      classNames={[classNames, autoHide && disabled && 'hidden']}
+    />
+  );
 };
 
 export const ListItemDragHandle = ({ disabled }: Pick<IconButtonProps, 'disabled'>) => {
   const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
-  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six-vertical--regular' disabled={disabled} />;
+  const { t } = useTranslation(osTranslations);
+  return (
+    <IconButton
+      variant='ghost'
+      disabled={disabled}
+      icon='ph--dots-six-vertical--regular'
+      iconOnly
+      label={t('drag-handle.label')}
+      ref={dragHandleRef}
+    />
+  );
 };
 
 export const ListItemDragPreview = <T extends ListItemRecord>({
@@ -241,7 +273,9 @@ export const ListItemDragPreview = <T extends ListItemRecord>({
 };
 
 export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('flex is-full gap-2', classNames)}>{children}</div>
+  <div role='none' className={mx('flex w-full gap-2', classNames)}>
+    {children}
+  </div>
 );
 
 export const ListItemTitle = ({
@@ -249,7 +283,7 @@ export const ListItemTitle = ({
   children,
   ...props
 }: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
-  <div className={mx('flex grow items-center truncate', classNames)} {...props}>
+  <div role='none' className={mx('flex grow items-center truncate', classNames)} {...props}>
     {children}
   </div>
 );

package/src/components/List/ListRoot.tsx

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode, useCallback, useEffect, useState } from 'react';
 
-import { idle, type ItemDragState, type ListItemRecord } from './ListItem';
+import { type ItemDragState, type ListItemRecord, idle } from './ListItem';
 
 type ListContext<T extends ListItemRecord> = {
   // TODO(burdon): Rename drag state.
@@ -26,14 +26,14 @@ export const [ListProvider, useListContext] = createContext<ListContext<any>>(LI
 
 export type ListRendererProps<T extends ListItemRecord> = {
   state: ListContext<T>['state'];
-  items: T[];
+  items: readonly T[];
 };
 
 const defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;
 
 export type ListRootProps<T extends ListItemRecord> = {
   children?: (props: ListRendererProps<T>) => ReactNode;
-  items?: T[];
+  items?: readonly T[];
   onMove?: (fromIndex: number, toIndex: number) => void;
 } & Pick<ListContext<T>, 'isItem' | 'getId' | 'readonly' | 'dragPreview'>;
 

package/src/components/List/testing.ts

@@ -2,13 +2,13 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { ObjectId } from '@dxos/echo-schema';
-import { faker } from '@dxos/random';
+import { Obj } from '@dxos/echo';
+import { random } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({
-  id: ObjectId,
+  id: Obj.ID,
   name: Schema.String,
 });
 
@@ -21,10 +21,10 @@ export const TestList = Schema.Struct({
 export type TestList = Schema.Schema.Type<typeof TestList>;
 
 export const createList = (n = 10): TestList => ({
-  items: faker.helpers.multiple(
+  items: random.helpers.multiple(
     () => ({
-      id: faker.string.uuid(),
-      name: faker.commerce.productName(),
+      id: random.string.uuid(),
+      name: random.commerce.productName(),
     }),
     { count: n },
   ),

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 = {};