@dxos/react-ui-list 0.8.4-main.c1de068 → 0.8.4-main.dedc0f3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.4-main.c1de068",
+  "version": "0.8.4-main.dedc0f3",
   "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"
@@ -29,33 +30,33 @@
     "@preact/signals-core": "^1.9.0",
     "@radix-ui/react-accordion": "1.2.3",
     "@radix-ui/react-context": "1.1.1",
-    "@dxos/debug": "0.8.4-main.c1de068",
-    "@dxos/echo-schema": "0.8.4-main.c1de068",
-    "@dxos/invariant": "0.8.4-main.c1de068",
-    "@dxos/live-object": "0.8.4-main.c1de068",
-    "@dxos/log": "0.8.4-main.c1de068",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-text-tooltip": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068",
-    "@dxos/react-ui-types": "0.8.4-main.c1de068",
-    "@dxos/util": "0.8.4-main.c1de068"
+    "@dxos/debug": "0.8.4-main.dedc0f3",
+    "@dxos/invariant": "0.8.4-main.dedc0f3",
+    "@dxos/echo-schema": "0.8.4-main.dedc0f3",
+    "@dxos/live-object": "0.8.4-main.dedc0f3",
+    "@dxos/log": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3",
+    "@dxos/util": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-types": "0.8.4-main.dedc0f3"
   },
   "devDependencies": {
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.17.0",
+    "effect": "3.17.7",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "vite": "5.4.7",
-    "@dxos/random": "0.8.4-main.c1de068",
-    "@dxos/storybook-utils": "0.8.4-main.c1de068"
+    "vite": "7.1.1",
+    "@dxos/storybook-utils": "0.8.4-main.dedc0f3",
+    "@dxos/random": "0.8.4-main.dedc0f3"
   },
   "peerDependencies": {
     "effect": "^3.13.3",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.8.4-main.c1de068",
-    "@dxos/react-ui-theme": "0.8.4-main.c1de068"
+    "@dxos/react-ui": "0.8.4-main.dedc0f3",
+    "@dxos/react-ui-theme": "0.8.4-main.dedc0f3"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,7 +4,7 @@
 
 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';
@@ -41,11 +41,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' })],
-};
+} 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

@@ -14,18 +14,11 @@ 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 +91,15 @@ 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, withLayout({ fullscreen: true })],
+} satisfies Meta<typeof List.Root>;
+
+export default meta;
+
+export const Default: StoryObj<typeof DefaultStory> = {
   render: DefaultStory,
   args: {
     items: list.items,
@@ -106,7 +107,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/Tree/Tree.stories.tsx

@@ -5,67 +5,69 @@
 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 { 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',
   component: Tree,
+  render: DefaultStory,
   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} />;
-  },
   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 +106,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/TreeItem.tsx

@@ -5,17 +5,17 @@
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import {
-  attachInstruction,
-  extractInstruction,
   type Instruction,
   type ItemMode,
+  attachInstruction,
+  extractInstruction,
 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
 import { Schema } from 'effect';
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState, type FC, type KeyboardEvent } from 'react';
+import React, { type FC, type KeyboardEvent, memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { type HasId } from '@dxos/echo-schema';
 import { invariant } from '@dxos/invariant';
-import { Treegrid, TreeItem as NaturalTreeItem } from '@dxos/react-ui';
+import { TreeItem as NaturalTreeItem, Treegrid } from '@dxos/react-ui';
 import {
   ghostHover,
   hoverableControls,
@@ -23,10 +23,10 @@ import {
   hoverableFocusedWithinControls,
 } from '@dxos/react-ui-theme';
 
+import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 import { useTree } from './TreeContext';
 import { TreeItemHeading } from './TreeItemHeading';
 import { TreeItemToggle } from './TreeItemToggle';
-import { DEFAULT_INDENTATION, paddingIndentation } from './helpers';
 
 type TreeItemState = 'idle' | 'dragging' | 'preview' | 'parent-of-instruction';
 
@@ -40,22 +40,23 @@ export const TreeDataSchema = Schema.Struct({
 });
 
 export type TreeData = Schema.Schema.Type<typeof TreeDataSchema>;
-
 export const isTreeData = (data: unknown): data is TreeData => Schema.is(TreeDataSchema)(data);
 
+export type ColumnRenderer<T extends HasId = any> = FC<{
+  item: T;
+  path: string[];
+  open: boolean;
+  menuOpen: boolean;
+  setMenuOpen: (open: boolean) => void;
+}>;
+
 export type TreeItemProps<T extends HasId = any> = {
   item: T;
   path: string[];
   levelOffset?: number;
   last: boolean;
   draggable?: boolean;
-  renderColumns?: FC<{
-    item: T;
-    path: string[];
-    open: boolean;
-    menuOpen: boolean;
-    setMenuOpen: (open: boolean) => void;
-  }>;
+  renderColumns?: ColumnRenderer<T>;
   canDrop?: (params: { source: TreeData; target: TreeData }) => boolean;
   onOpenChange?: (params: { item: T; path: string[]; open: boolean }) => void;
   onSelect?: (params: { item: T; path: string[]; current: boolean; option: boolean }) => void;

package/src/components/Tree/TreeItemHeading.tsx

@@ -4,7 +4,7 @@
 
 import React, { type KeyboardEvent, type MouseEvent, forwardRef, memo, useCallback } from 'react';
 
-import { Button, Icon, toLocalizedString, useTranslation, type Label } from '@dxos/react-ui';
+import { Button, Icon, type Label, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct