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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.937b3ca",
+  "version": "0.8.4-main.9be5663bfe",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -30,35 +30,36 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
-    "@effect-atom/atom-react": "^0.4.6",
+    "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.937b3ca",
-    "@dxos/invariant": "0.8.4-main.937b3ca",
-    "@dxos/echo": "0.8.4-main.937b3ca",
-    "@dxos/log": "0.8.4-main.937b3ca",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca",
-    "@dxos/ui-types": "0.8.4-main.937b3ca",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.937b3ca",
-    "@dxos/util": "0.8.4-main.937b3ca"
+    "@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"
   },
   "devDependencies": {
     "@types/react": "~19.2.7",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "vite": "7.1.9",
-    "@dxos/random": "0.8.4-main.937b3ca",
-    "@dxos/storybook-utils": "0.8.4-main.937b3ca"
+    "vite": "^7.1.11",
+    "@dxos/random": "0.8.4-main.9be5663bfe",
+    "@dxos/storybook-utils": "0.8.4-main.9be5663bfe"
   },
   "peerDependencies": {
-    "effect": "3.19.11",
+    "effect": "3.20.0",
     "react": "~19.2.3",
     "react-dom": "~19.2.3",
-    "@dxos/react-ui": "0.8.4-main.937b3ca",
-    "@dxos/ui-theme": "0.8.4-main.937b3ca"
+    "@dxos/ui-theme": "0.8.4-main.9be5663bfe",
+    "@dxos/react-ui": "0.8.4-main.9be5663bfe"
   },
   "publishConfig": {
     "access": "public"

package/src/components/Accordion/Accordion.stories.tsx

@@ -5,26 +5,26 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Accordion } from './Accordion';
 
-faker.seed(1);
+random.seed(1);
 
 type TestItem = { id: string; name: string; text: string };
 
 const items: TestItem[] = Array.from({ length: 10 }, (_, i) => ({
   id: i.toString(),
   name: `Item ${i}`,
-  text: faker.lorem.paragraphs(3),
+  text: random.lorem.paragraphs(3),
 }));
 
 const DefaultStory = () => {
   return (
-    <Accordion.Root<TestItem> items={items} classNames='is-[40rem]'>
+    <Accordion.Root<TestItem> items={items} classNames='w-[40rem]'>
       {({ items }) => (
-        <div className='flex flex-col is-full border-y border-separator divide-y divide-separator'>
+        <div className='flex flex-col w-full border-y border-separator divide-y divide-separator'>
           {items.map((item) => (
             <Accordion.Item key={item.id} item={item} classNames='border-x border-separator'>
               <Accordion.ItemHeader>{item.name}</Accordion.ItemHeader>
@@ -42,7 +42,7 @@ const DefaultStory = () => {
 const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ layout: 'column' })],
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
 } satisfies Meta<typeof Accordion>;
 
 export default meta;

package/src/components/Accordion/AccordionItem.tsx

@@ -10,7 +10,6 @@ import { Icon, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/ui-theme';
 
 import { type ListItemRecord } from '../List';
-
 import { useAccordionContext } from './AccordionRoot';
 
 const ACCORDION_ITEM_NAME = 'AccordionItem';
@@ -43,7 +42,7 @@ export type AccordionItemHeaderProps = ThemedClassName<AccordionPrimitive.Accord
 export const AccordionItemHeader = ({ classNames, children, ...props }: AccordionItemHeaderProps) => {
   return (
     <AccordionPrimitive.Header {...props} className={mx(classNames)}>
-      <AccordionPrimitive.Trigger className='group flex items-center p-2 dx-focus-ring-inset is-full text-start'>
+      <AccordionPrimitive.Trigger className='group flex items-center p-2 dx-focus-ring-inset w-full text-start'>
         {children}
         <Icon
           icon='ph--caret-right--regular'

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

@@ -7,16 +7,16 @@ import { type Meta, type StoryObj } from '@storybook/react-vite';
 import * as Schema from 'effect/Schema';
 import React, { useContext, useMemo } from 'react';
 
-import { withTheme } from '@dxos/react-ui/testing';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 import { withRegistry } from '@dxos/storybook-utils';
-import { ghostHover, mx } from '@dxos/ui-theme';
+import { mx } from '@dxos/ui-theme';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
 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 grid = 'grid grid-cols-[32px_1fr_32px] min-h-[2rem] rounded-sm';
 
 const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
   const registry = useContext(RegistryContext);
@@ -45,15 +45,15 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
     <List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
       {({ items }) => (
         <>
-          <div className='flex flex-col is-full'>
+          <div className='flex flex-col w-full'>
             <div role='none' className={grid}>
               <div />
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='is-full bs-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)} />
@@ -69,7 +69,7 @@ const DefaultStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
 
           <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>
@@ -89,9 +89,9 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
   return (
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
-        <div role='list' className='is-full bs-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 />
@@ -106,7 +106,7 @@ const SimpleStory = (props: Omit<ListRootProps<TestItemType>, 'items'>) => {
 const meta = {
   title: 'ui/react-ui-list/List',
   component: List.Root,
-  decorators: [withTheme, withRegistry],
+  decorators: [withTheme(), withLayout({ layout: 'fullscreen' }), withRegistry],
   parameters: {
     layout: 'fullscreen',
   },

package/src/components/List/List.tsx

@@ -4,7 +4,7 @@
 
 import {
   ListItem,
-  ListItemButton,
+  ListItemIconButton,
   ListItemDeleteButton,
   ListItemDragHandle,
   ListItemDragPreview,
@@ -15,17 +15,12 @@ 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.
  * 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.
  */
 export const List = {
   Root: ListRoot,
@@ -33,8 +28,8 @@ export const List = {
   ItemDragPreview: ListItemDragPreview,
   ItemWrapper: ListItemWrapper,
   ItemDragHandle: ListItemDragHandle,
+  ItemIconButton: ListItemIconButton,
   ItemDeleteButton: ListItemDeleteButton,
-  ItemButton: ListItemButton,
   ItemTitle: ListItemTitle,
 };
 

package/src/components/List/ListItem.tsx

@@ -2,21 +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,
+  RefObject,
   useEffect,
   useRef,
   useState,
@@ -61,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>;
 };
 
 /**
@@ -80,6 +81,8 @@ export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
   PropsWithChildren<
     {
       item: T;
+      asChild?: boolean;
+      selected?: boolean;
     } & HTMLAttributes<HTMLDivElement>
   >
 >;
@@ -87,14 +90,22 @@ export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
 /**
  * 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(
       //
@@ -170,12 +181,18 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
-      <div ref={ref} role='listitem' className={mx('flex relative', classNames, stateStyles[state.type])} {...props}>
+      <Comp
+        {...props}
+        role='listitem'
+        aria-selected={selected}
+        className={mx('relative p-1 dx-selected dx-hover', classNames, stateStyles[state.type])}
+        ref={rootRef}
+      >
         {children}
-        {state.type === 'is-dragging-over' && state.closestEdge && (
-          <NaturalListItem.DropIndicator edge={state.closestEdge} />
-        )}
-      </div>
+      </Comp>
+      {state.type === 'is-dragging-over' && state.closestEdge && (
+        <NaturalListItem.DropIndicator edge={state.closestEdge} />
+      )}
     </ListItemProvider>
   );
 };
@@ -184,47 +201,48 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
 // List item components
 //
 
-export const ListItemDeleteButton = ({
+export const ListItemIconButton = ({
   autoHide = true,
+  iconOnly = true,
+  variant = 'ghost',
   classNames,
   disabled,
-  icon = 'ph--x--regular',
-  label,
   ...props
-}: Partial<Pick<IconButtonProps, 'icon'>> &
-  Omit<IconButtonProps, 'icon' | 'label'> & { autoHide?: boolean; label?: string }) => {
-  const { state } = useListContext('DELETE_BUTTON');
+}: IconButtonProps & { autoHide?: boolean }) => {
+  const { state } = useListContext('ITEM_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
-  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
-      iconOnly
-      variant='ghost'
       {...props}
-      icon={icon}
       disabled={isDisabled}
-      label={label ?? t('delete label')}
+      iconOnly={iconOnly}
+      variant={variant}
       classNames={[classNames, autoHide && disabled && 'hidden']}
     />
   );
 };
 
-export const ListItemButton = ({
+// TODO(burdon): Generalize to action button.
+export const ListItemDeleteButton = ({
   autoHide = true,
-  iconOnly = true,
-  variant = 'ghost',
   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;
+  const { t } = useTranslation(osTranslations);
   return (
     <IconButton
       {...props}
+      variant='ghost'
       disabled={isDisabled}
-      iconOnly={iconOnly}
-      variant={variant}
+      icon={icon}
+      iconOnly
+      label={label ?? t('delete.label')}
       classNames={[classNames, autoHide && disabled && 'hidden']}
     />
   );
@@ -235,12 +253,12 @@ export const ListItemDragHandle = ({ disabled }: Pick<IconButtonProps, 'disabled
   const { t } = useTranslation(osTranslations);
   return (
     <IconButton
-      iconOnly
       variant='ghost'
-      label={t('drag handle label')}
-      ref={dragHandleRef as any}
-      icon='ph--dots-six-vertical--regular'
       disabled={disabled}
+      icon='ph--dots-six-vertical--regular'
+      iconOnly
+      label={t('drag-handle.label')}
+      ref={dragHandleRef}
     />
   );
 };
@@ -255,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 = ({
@@ -263,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,9 +2,9 @@
 // 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';
 
@@ -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

@@ -5,7 +5,7 @@
 import * as Schema from 'effect/Schema';
 
 import { Obj } from '@dxos/echo';
-import { faker } from '@dxos/random';
+import { random } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({
   id: Obj.ID,
@@ -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 },
   ),