@dxos/react-ui-list 0.8.4-main.84f28bd → 0.8.4-main.ae835ea

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.84f28bd",
+  "version": "0.8.4-main.ae835ea",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -9,6 +9,7 @@
   "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"
@@ -26,36 +27,36 @@
     "@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",
+    "@preact/signals-core": "^1.12.1",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.84f28bd",
-    "@dxos/invariant": "0.8.4-main.84f28bd",
-    "@dxos/echo-schema": "0.8.4-main.84f28bd",
-    "@dxos/log": "0.8.4-main.84f28bd",
-    "@dxos/live-object": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/react-ui-types": "0.8.4-main.84f28bd",
-    "@dxos/util": "0.8.4-main.84f28bd"
+    "@dxos/debug": "0.8.4-main.ae835ea",
+    "@dxos/echo": "0.8.4-main.ae835ea",
+    "@dxos/invariant": "0.8.4-main.ae835ea",
+    "@dxos/live-object": "0.8.4-main.ae835ea",
+    "@dxos/log": "0.8.4-main.ae835ea",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-types": "0.8.4-main.ae835ea",
+    "@dxos/util": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "devDependencies": {
-    "@types/react": "~18.2.0",
-    "@types/react-dom": "~18.2.0",
-    "effect": "3.16.13",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.84f28bd",
-    "@dxos/storybook-utils": "0.8.4-main.84f28bd"
+    "@types/react": "~19.2.2",
+    "@types/react-dom": "~19.2.2",
+    "effect": "3.18.3",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "vite": "7.1.9",
+    "@dxos/random": "0.8.4-main.ae835ea",
+    "@dxos/storybook-utils": "0.8.4-main.ae835ea"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
-    "react": "~18.2.0",
-    "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.8.4-main.84f28bd",
-    "@dxos/react-ui": "0.8.4-main.84f28bd"
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "@dxos/react-ui": "0.8.4-main.ae835ea",
+    "@dxos/react-ui-theme": "0.8.4-main.ae835ea"
   },
   "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-vite';
+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';
 
@@ -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({ container: '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

@@ -9,16 +9,19 @@ import React, { type PropsWithChildren } from 'react';
 import { Icon, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-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 }>>;

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

@@ -2,30 +2,21 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 import React from 'react';
 
 import { live } from '@dxos/live-object';
+import { withTheme } from '@dxos/react-ui/testing';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
 import { arrayMove } from '@dxos/util';
 
 import { List, type ListRootProps } from './List';
-import { createList, TestItemSchema, type TestItemType } from './testing';
+import { TestItemSchema, type TestItemType, 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 = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   const handleSelect = (item: TestItemType) => {
     console.log('select', item);
@@ -98,7 +89,18 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
 
 const list = live(createList(100));
 
-export const Default: StoryObj<ListRootProps<TestItemType>> = {
+const meta = {
+  title: 'ui/react-ui-list/List',
+  component: List.Root,
+  decorators: [withTheme],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} satisfies Meta<typeof List.Root>;
+
+export default meta;
+
+export const Default: StoryObj<typeof DefaultStory> = {
   render: DefaultStory,
   args: {
     items: list.items,
@@ -106,7 +108,7 @@ export const Default: StoryObj<ListRootProps<TestItemType>> = {
   },
 };
 
-export const Simple: StoryObj<ListRootProps<TestItemType>> = {
+export const Simple: StoryObj<typeof SimpleStory> = {
   render: SimpleStory,
   args: {
     items: list.items,

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,7 +24,13 @@ import React, {
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
-import { Icon, type ThemedClassName, ListItem as NaturalListItem } from '@dxos/react-ui';
+import {
+  IconButton,
+  type IconButtonProps,
+  ListItem as NaturalListItem,
+  type ThemedClassName,
+  useTranslation,
+} from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { useListContext } from './ListRoot';
@@ -165,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} />
         )}
@@ -186,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('os');
   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('os');
+  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.

package/src/components/List/testing.ts

@@ -2,9 +2,9 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema } from 'effect';
+import * as Schema from 'effect/Schema';
 
-import { ObjectId } from '@dxos/echo-schema';
+import { ObjectId } from '@dxos/echo/internal';
 import { faker } from '@dxos/random';
 
 export const TestItemSchema = Schema.Struct({

package/src/components/Tree/Tree.stories.tsx

@@ -2,70 +2,71 @@
 // Copyright 2024 DXOS.org
 //
 
-import '@dxos-theme';
-
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { extractInstruction, type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React, { useEffect } from 'react';
 
-import { live, type Live } from '@dxos/live-object';
+import { type Live, live } from '@dxos/live-object';
 import { faker } from '@dxos/random';
 import { Icon } from '@dxos/react-ui';
-import { withLayout, withTheme } from '@dxos/storybook-utils';
+import { withTheme } from '@dxos/react-ui/testing';
 
-import { Tree } from './Tree';
-import { type TreeData } from './TreeItem';
-import { createTree, updateState, type TestItem } from './testing';
 import { Path } from '../../util';
 
+import { type TestItem, createTree, updateState } from './testing';
+import { Tree, type TreeProps } from './Tree';
+import { type TreeData } from './TreeItem';
+
 faker.seed(1234);
 
+const DefaultStory = (props: TreeProps) => {
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
+      onDrop: ({ location, source }) => {
+        // Didn't drop on anything.
+        if (!location.current.dropTargets.length) {
+          return;
+        }
+
+        const target = location.current.dropTargets[0];
+        const instruction: Instruction | null = extractInstruction(target.data);
+        if (instruction !== null) {
+          updateState({
+            state: tree,
+            instruction,
+            source: source.data as TreeData,
+            target: target.data as TreeData,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return <Tree {...props} />;
+};
+
 const tree = live<TestItem>(createTree());
 const state = new Map<string, Live<{ open: boolean; current: boolean }>>();
 
-const meta: Meta<typeof Tree<TestItem>> = {
+const meta = {
   title: 'ui/react-ui-list/Tree',
+
+  decorators: [withTheme],
   component: Tree,
-  decorators: [withTheme, withLayout()],
-  render: (args) => {
-    useEffect(() => {
-      return monitorForElements({
-        canMonitor: ({ source }) => typeof source.data.id === 'string' && Array.isArray(source.data.path),
-        onDrop: ({ location, source }) => {
-          // Didn't drop on anything.
-          if (!location.current.dropTargets.length) {
-            return;
-          }
-
-          const target = location.current.dropTargets[0];
-
-          const instruction: Instruction | null = extractInstruction(target.data);
-          if (instruction !== null) {
-            updateState({
-              state: tree,
-              instruction,
-              source: source.data as TreeData,
-              target: target.data as TreeData,
-            });
-          }
-        },
-      });
-    }, []);
-
-    return <Tree {...args} />;
-  },
+  render: DefaultStory,
   args: {
     id: tree.id,
-    useItems: (testItem?: TestItem) => {
-      return testItem?.items ?? tree.items;
+    useItems: (parent?: TestItem) => {
+      return parent?.items ?? tree.items;
     },
-    getProps: (testItem: TestItem) => ({
-      id: testItem.id,
-      label: testItem.name,
-      icon: testItem.icon,
-      ...((testItem.items?.length ?? 0) > 0 && {
-        parentOf: testItem.items!.map(({ id }) => id),
+    getProps: (parent: TestItem) => ({
+      id: parent.id,
+      label: parent.name,
+      icon: parent.icon,
+      ...((parent.items?.length ?? 0) > 0 && {
+        parentOf: parent.items!.map(({ id }) => id),
       }),
     }),
     isOpen: (_path: string[]) => {
@@ -104,13 +105,15 @@ const meta: Meta<typeof Tree<TestItem>> = {
       object!.current = current;
     },
   },
-};
+} satisfies Meta<typeof Tree<TestItem>>;
 
 export default meta;
 
-export const Default = {};
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
 
-export const Draggable: StoryObj<typeof Tree> = {
+export const Draggable: Story = {
   args: {
     draggable: true,
   },

package/src/components/Tree/Tree.tsx

@@ -4,7 +4,7 @@
 
 import React, { useMemo } from 'react';
 
-import { type HasId } from '@dxos/echo-schema';
+import { type HasId } from '@dxos/echo/internal';
 import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
 
 import { type TreeContextType, TreeProvider } from './TreeContext';
@@ -16,7 +16,10 @@ export type TreeProps<T extends HasId = any, O = any> = {
   id: string;
 } & TreeContextType<T, O> &
   Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
-  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect' | 'levelOffset'>;
+  Pick<
+    TreeItemProps<T>,
+    'draggable' | 'renderColumns' | 'canDrop' | 'canSelect' | 'onOpenChange' | 'onSelect' | 'levelOffset'
+  >;
 
 export const Tree = <T extends HasId = any, O = any>({
   root,
@@ -32,6 +35,7 @@ export const Tree = <T extends HasId = any, O = any>({
   levelOffset,
   renderColumns,
   canDrop,
+  canSelect,
   onOpenChange,
   onSelect,
 }: TreeProps<T, O>) => {
@@ -60,6 +64,7 @@ export const Tree = <T extends HasId = any, O = any>({
             draggable={draggable}
             renderColumns={renderColumns}
             canDrop={canDrop}
+            canSelect={canSelect}
             onOpenChange={onOpenChange}
             onSelect={onSelect}
           />

package/src/components/Tree/TreeContext.tsx

@@ -11,10 +11,11 @@ export type TreeItemDataProps = {
   id: string;
   label: Label;
   parentOf?: string[];
-  icon?: string;
-  disabled?: boolean;
   className?: string;
   headingClassName?: string;
+  icon?: string;
+  iconHue?: string;
+  disabled?: boolean;
   testId?: string;
 };