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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.8.3",
+  "version": "0.8.4-main.1da679c",
   "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,35 +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.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.1da679c",
+    "@dxos/echo-schema": "0.8.4-main.1da679c",
+    "@dxos/invariant": "0.8.4-main.1da679c",
+    "@dxos/live-object": "0.8.4-main.1da679c",
+    "@dxos/log": "0.8.4-main.1da679c",
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c",
+    "@dxos/react-ui-text-tooltip": "0.8.4-main.1da679c",
+    "@dxos/react-ui-types": "0.8.4-main.1da679c",
+    "@dxos/util": "0.8.4-main.1da679c"
   },
   "devDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
     "@types/react": "~18.2.0",
     "@types/react-dom": "~18.2.0",
-    "effect": "3.14.21",
+    "effect": "3.17.7",
     "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"
+    "vite": "7.1.1",
+    "@dxos/random": "0.8.4-main.1da679c",
+    "@dxos/storybook-utils": "0.8.4-main.1da679c"
   },
   "peerDependencies": {
-    "@phosphor-icons/react": "^2.1.5",
-    "effect": "3.13.3",
+    "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"
+    "@dxos/react-ui": "0.8.4-main.1da679c",
+    "@dxos/react-ui-theme": "0.8.4-main.1da679c"
   },
   "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';
+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

@@ -4,7 +4,7 @@
 
 import '@dxos-theme';
 
-import { type Meta, type StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import { Schema } from 'effect';
 import React from 'react';
 
@@ -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';
@@ -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('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 Meta, type StoryObj } from '@storybook/react';
+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,29 +5,28 @@
 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,
   hoverableFocusedKeyboardControls,
   hoverableFocusedWithinControls,
-  mx,
 } 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';
 
@@ -41,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;
@@ -223,7 +223,7 @@ const RawTreeItem = <T extends HasId = any>({
         id={id}
         aria-labelledby={`${id}__label`}
         parentOf={parentOf?.join(Treegrid.PARENT_OF_SEPARATOR)}
-        classNames={mx(
+        classNames={[
           'grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface',
           hoverableControls,
           hoverableFocusedKeyboardControls,
@@ -231,7 +231,7 @@ const RawTreeItem = <T extends HasId = any>({
           hoverableDescriptionIcons,
           ghostHover,
           className,
-        )}
+        ]}
         data-itemid={id}
         data-testid={testId}
         // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS

package/src/components/Tree/TreeItemHeading.tsx

@@ -4,9 +4,8 @@
 
 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';
-import { mx } from '@dxos/react-ui-theme';
 
 // TODO(wittjosiah): Consider whether there should be a separate disabled prop which was visually distinct
 //   rather than just making the item unselectable.
@@ -55,11 +54,11 @@ export const TreeItemHeading = memo(
             data-testid='treeItem.heading'
             variant='ghost'
             density='fine'
-            classNames={mx(
+            classNames={[
               'grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent',
               'disabled:cursor-default disabled:opacity-100',
               className,
-            )}
+            ]}
             disabled={disabled}
             onClick={handleSelect}
             onKeyDown={handleButtonKeydown}

package/src/components/Tree/TreeItemToggle.tsx

@@ -5,7 +5,6 @@
 import React, { forwardRef, memo } from 'react';
 
 import { Button, Icon } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
 
 export type TreeItemToggleProps = {
   open?: boolean;
@@ -23,10 +22,10 @@ export const TreeItemToggle = memo(
         aria-expanded={open}
         variant='ghost'
         density='fine'
-        classNames={mx('is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible')}
+        classNames={['is-6 pli-0 dx-focus-ring-inset', hidden ? 'hidden' : !isBranch && 'invisible']}
         onClick={onToggle}
       >
-        <Icon icon='ph--caret-right--bold' size={3} classNames={mx('transition duration-200', open && 'rotate-90')} />
+        <Icon icon='ph--caret-right--bold' size={3} classNames={['transition duration-200', open && 'rotate-90']} />
       </Button>
     );
   }),