@dxos/react-ui-list 0.8.3 → 0.8.4-main.1068cf700f

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1068cf700f",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/dxos/dxos"
+  },
   "license": "MIT",
   "author": "DXOS.org",
   "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"
@@ -23,41 +28,37 @@
     "src"
   ],
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
-    "@preact-signals/safe-react": "^0.9.0",
-    "@preact/signals-core": "^1.9.0",
+    "@atlaskit/pragmatic-drag-and-drop": "1.7.7",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.1.0",
+    "@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.3",
-    "@dxos/invariant": "0.8.3",
-    "@dxos/echo-schema": "0.8.3",
-    "@dxos/live-object": "0.8.3",
-    "@dxos/log": "0.8.3",
-    "@dxos/react-ui-text-tooltip": "0.8.3",
-    "@dxos/react-ui-types": "0.8.3",
-    "@dxos/util": "0.8.3"
+    "@dxos/debug": "0.8.4-main.1068cf700f",
+    "@dxos/echo": "0.8.4-main.1068cf700f",
+    "@dxos/log": "0.8.4-main.1068cf700f",
+    "@dxos/invariant": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.1068cf700f",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-types": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f",
+    "@dxos/util": "0.8.4-main.1068cf700f"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.3",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3",
-    "@dxos/storybook-utils": "0.8.3"
+    "@types/react": "~19.2.7",
+    "@types/react-dom": "~19.2.3",
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.1068cf700f",
+    "@dxos/storybook-utils": "0.8.4-main.1068cf700f"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "effect": "3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.3",
-    "@dxos/react-ui": "0.8.3"
+    "effect": "3.19.16",
+    "react": "~19.2.3",
+    "react-dom": "~19.2.3",
+    "@dxos/react-ui": "0.8.4-main.1068cf700f",
+    "@dxos/ui-theme": "0.8.4-main.1068cf700f"
   },
   "publishConfig": {
     "access": "public"

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

@@ -2,13 +2,11 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { faker } from '@dxos/random';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
 
 import { Accordion } from './Accordion';
 
@@ -24,9 +22,9 @@ const items: TestItem[] = Array.from({ length: 10 }, (_, i) => ({
 
 const DefaultStory = () => {
   return (
-    <Accordion.Root<TestItem> items={items} classNames='w-[40rem]'>
+    <Accordion.Root<TestItem> items={items} classNames='is-[40rem]'>
       {({ items }) => (
-        <div className='flex flex-col w-full border-y border-separator divide-y divide-separator'>
+        <div className='flex flex-col is-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>
@@ -41,11 +39,11 @@ const DefaultStory = () => {
   );
 };
 
-const meta: Meta<typeof Accordion> = {
+const meta = {
   title: 'ui/react-ui-list/Accordion',
   render: DefaultStory,
-  decorators: [withTheme, withLayout({ fullscreen: true, classNames: 'flex justify-center' })],
-};
+  decorators: [withTheme(), withLayout({ layout: 'column' })],
+} satisfies Meta<typeof Accordion>;
 
 export default meta;
 

package/src/components/Accordion/Accordion.tsx

@@ -2,7 +2,7 @@
 // Copyright 2025 DXOS.org
 //
 
-import { AccordionItem, AccordionItemHeader, AccordionItemBody } from './AccordionItem';
+import { AccordionItem, AccordionItemBody, AccordionItemHeader } from './AccordionItem';
 import { AccordionRoot } from './AccordionRoot';
 
 // TODO(burdon): Next iteration should be based on Radix UI Accordion:

package/src/components/Accordion/AccordionItem.tsx

@@ -7,18 +7,21 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type PropsWithChildren } from 'react';
 
 import { Icon, type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
-import { useAccordionContext } from './AccordionRoot';
 import { type ListItemRecord } from '../List';
 
+import { useAccordionContext } from './AccordionRoot';
+
 const ACCORDION_ITEM_NAME = 'AccordionItem';
 
 type AccordionItemContext<T extends ListItemRecord> = {
   item: T;
 };
 
-export const [AccordionItemProvider, useAccordionItemContext] =
+// TODO(wittjosiah): This seems to be conflicting with something in the bundle.
+//  Perhaps @radix-ui/react-accordion?
+export const [AccordionItemProvider, useDxAccordionItemContext] =
   createContext<AccordionItemContext<any>>(ACCORDION_ITEM_NAME);
 
 export type AccordionItemProps<T extends ListItemRecord> = ThemedClassName<PropsWithChildren<{ item: T }>>;
@@ -56,7 +59,7 @@ export type AccordionItemBodyProps = ThemedClassName<PropsWithChildren>;
 
 export const AccordionItemBody = ({ children, classNames }: AccordionItemBodyProps) => {
   return (
-    <AccordionPrimitive.Content className='overflow-hidden data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown'>
+    <AccordionPrimitive.Content className='overflow-hidden data-[state=closed]:animate-slide-up data-[state=open]:animate-slide-down'>
       <div role='none' className={mx('p-2', classNames)}>
         {children}
       </div>

package/src/components/Accordion/AccordionRoot.tsx

@@ -7,7 +7,7 @@ import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
+import { mx } from '@dxos/ui-theme';
 
 import { type ListItemRecord } from '../List';
 

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

@@ -2,53 +2,56 @@
 // 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 { withTheme } from '@dxos/react-ui/testing';
+import { withRegistry } from '@dxos/storybook-utils';
+import { ghostHover, 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 })],
-};
-
-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 (
     <List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
       {({ items }) => (
         <>
-          <div className='flex flex-col w-full'>
+          <div className='flex flex-col is-full'>
             <div role='none' className={grid}>
               <div />
               <div className='flex items-center text-sm'>Items</div>
             </div>
 
-            <div role='list' className='w-full h-full overflow-auto'>
+            <div role='list' className='is-full bs-full overflow-auto'>
               {items?.map((item) => (
                 <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
                   <List.ItemDragHandle />
@@ -78,11 +81,15 @@ 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='is-full bs-full overflow-auto'>
           {items?.map((item) => (
             <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
               <List.ItemDragHandle />
@@ -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(), 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,
-  ListItemDeleteButton,
   ListItemButton,
+  ListItemDeleteButton,
   ListItemDragHandle,
   ListItemDragPreview,
   type ListItemProps,
@@ -38,9 +36,8 @@ export const List = {
   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

@@ -17,7 +17,6 @@ import React, {
   type MutableRefObject,
   type PropsWithChildren,
   type ReactNode,
-  forwardRef,
   useEffect,
   useRef,
   useState,
@@ -25,8 +24,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';
 
@@ -72,10 +77,11 @@ export const [ListItemProvider, useListItemContext] = createContext<ListItemCont
 );
 
 export type ListItemProps<T extends ListItemRecord> = ThemedClassName<
-  PropsWithChildren<{
-    item: T;
-  }> &
-    HTMLAttributes<HTMLDivElement>
+  PropsWithChildren<
+    {
+      item: T;
+    } & HTMLAttributes<HTMLDivElement>
+  >
 >;
 
 /**
@@ -86,6 +92,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
   const ref = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLElement | null>(null);
   const [state, setState] = useState<ItemDragState>(idle);
+
   useEffect(() => {
     const element = ref.current;
     invariant(element);
@@ -142,6 +149,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 +161,6 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item,
             return { type: 'is-dragging-over', closestEdge };
           });
         },
-        onDragLeave: () => {
-          setState(idle);
-        },
         onDrop: () => {
           setState(idle);
         },
@@ -163,15 +170,8 @@ 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>
+      <div ref={ref} role='listitem' className={mx('flex relative', classNames, stateStyles[state.type])} {...props}>
+        {children}
         {state.type === 'is-dragging-over' && state.closestEdge && (
           <NaturalListItem.DropIndicator edge={state.closestEdge} />
         )}
@@ -184,51 +184,65 @@ 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 = ({
   autoHide = true,
   classNames,
   disabled,
   icon = 'ph--x--regular',
+  label,
   ...props
-}: Partial<Pick<IconButtonProps, 'icon'>> & Omit<IconButtonProps, 'icon'> & { autoHide?: boolean }) => {
+}: 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
+      iconOnly
+      variant='ghost'
+      {...props}
       icon={icon}
       disabled={isDisabled}
+      label={label ?? t('delete label')}
       classNames={[classNames, autoHide && disabled && 'hidden']}
-      {...props}
     />
   );
 };
 
 export const ListItemButton = ({
   autoHide = true,
+  iconOnly = true,
+  variant = 'ghost',
   classNames,
   disabled,
   ...props
 }: IconButtonProps & { autoHide?: boolean }) => {
   const { state } = useListContext('ITEM_BUTTON');
   const isDisabled = state.type !== 'idle' || disabled;
-  return <IconButton disabled={isDisabled} classNames={[classNames, autoHide && disabled && 'hidden']} {...props} />;
+  return (
+    <IconButton
+      {...props}
+      disabled={isDisabled}
+      iconOnly={iconOnly}
+      variant={variant}
+      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
+      iconOnly
+      variant='ghost'
+      label={t('drag handle label')}
+      ref={dragHandleRef as any}
+      icon='ph--dots-six-vertical--regular'
+      disabled={disabled}
+    />
+  );
 };
 
 export const ListItemDragPreview = <T extends ListItemRecord>({

package/src/components/List/ListRoot.tsx

@@ -8,7 +8,7 @@ import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hi
 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 { Obj } from '@dxos/echo';
 import { faker } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({
-  id: ObjectId,
+  id: Obj.ID,
   name: Schema.String,
 });