@dxos/react-ui-list 0.6.14-main.2b6a0f3 → 0.6.14-main.f49f251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.6.14-main.2b6a0f3",
+  "version": "0.6.14-main.f49f251",
   "description": "A list component.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -8,8 +8,8 @@
   "author": "DXOS.org",
   "exports": {
     ".": {
-      "browser": "./dist/lib/browser/index.mjs",
-      "types": "./dist/types/src/index.d.ts"
+      "types": "./dist/types/src/index.d.ts",
+      "browser": "./dist/lib/browser/index.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
@@ -25,14 +25,18 @@
     "@atlaskit/pragmatic-drag-and-drop-flourish": "^1.1.2",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.1.3",
+    "@preact/signals-core": "^1.6.0",
     "@radix-ui/react-context": "^1.0.0",
     "effect": "^3.9.1",
-    "@dxos/debug": "0.6.14-main.2b6a0f3",
-    "@dxos/echo-schema": "0.6.14-main.2b6a0f3",
-    "@dxos/log": "0.6.14-main.2b6a0f3",
-    "@dxos/invariant": "0.6.14-main.2b6a0f3",
-    "@dxos/util": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-types": "0.6.14-main.2b6a0f3"
+    "@dxos/debug": "0.6.14-main.f49f251",
+    "@dxos/echo-schema": "0.6.14-main.f49f251",
+    "@dxos/invariant": "0.6.14-main.f49f251",
+    "@dxos/react-ui-mosaic": "0.6.14-main.f49f251",
+    "@dxos/log": "0.6.14-main.f49f251",
+    "@dxos/react-ui-attention": "0.6.14-main.f49f251",
+    "@dxos/react-ui-text-tooltip": "0.6.14-main.f49f251",
+    "@dxos/util": "0.6.14-main.f49f251",
+    "@dxos/react-ui-types": "0.6.14-main.f49f251"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -41,18 +45,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/random": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3",
-    "@dxos/storybook-utils": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3"
+    "@dxos/random": "0.6.14-main.f49f251",
+    "@dxos/react-ui": "0.6.14-main.f49f251",
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
+    "@dxos/storybook-utils": "0.6.14-main.f49f251"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.9.1",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui": "0.6.14-main.2b6a0f3",
-    "@dxos/react-ui-theme": "0.6.14-main.2b6a0f3"
+    "@dxos/react-ui-theme": "0.6.14-main.f49f251",
+    "@dxos/react-ui": "0.6.14-main.f49f251"
   },
   "publishConfig": {
     "access": "public"

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

@@ -12,7 +12,7 @@ import { ghostHover, mx } from '@dxos/react-ui-theme';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
 
 import { List, type ListRootProps } from './List';
-import { createList, TestItemSchema, type TestItemType } from '../../testing';
+import { createList, TestItemSchema, type TestItemType } from './testing';
 
 // TODO(burdon): var-icon-size.
 const grid = 'grid grid-cols-[32px_1fr_32px] min-bs-[2rem] rounded';
@@ -37,7 +37,7 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
             </div>
 
             <div role='list' className='w-full h-full overflow-auto'>
-              {items.map((item) => (
+              {items?.map((item) => (
                 <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
                   <List.ItemDragHandle />
                   <List.ItemTitle onClick={() => handleSelect(item)}>{item.name}</List.ItemTitle>
@@ -48,7 +48,7 @@ const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) =>
 
             <div role='none' className={grid}>
               <div />
-              <div className='flex items-center text-sm'>{items.length} Items</div>
+              <div className='flex items-center text-sm'>{items?.length} Items</div>
             </div>
           </div>
 
@@ -71,7 +71,7 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
     <List.Root<TestItemType> dragPreview items={items} {...props}>
       {({ items }) => (
         <div role='list' className='w-full h-full overflow-auto'>
-          {items.map((item) => (
+          {items?.map((item) => (
             <List.Item<TestItemType> key={item.id} item={item} classNames={mx(grid, ghostHover)}>
               <List.ItemDragHandle />
               <List.ItemTitle>{item.name}</List.ItemTitle>

package/src/components/List/ListItem.tsx

@@ -5,8 +5,11 @@
 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 } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { attachClosestEdge, extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
+import {
+  type Edge,
+  attachClosestEdge,
+  extractClosestEdge,
+} from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 import { createContext } from '@radix-ui/react-context';
 import React, {
   type ComponentProps,
@@ -22,14 +25,13 @@ import React, {
 import { createPortal } from 'react-dom';
 
 import { invariant } from '@dxos/invariant';
-import { type ThemedClassName } from '@dxos/react-ui';
-import { Icon } from '@dxos/react-ui';
+import { Icon, type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
 import { DropIndicator } from './DropIndicator';
 import { useListContext } from './ListRoot';
 
-export type ListItemRecord = { id: string };
+export type ListItemRecord = {};
 
 export type ItemState =
   | {

package/src/components/List/ListRoot.tsx

@@ -4,16 +4,18 @@
 
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
-import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
+import { getReorderDestinationIndex } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index';
 import { createContext } from '@radix-ui/react-context';
 import React, { type ReactNode, useEffect, useState } from 'react';
 
-import { type ThemedClassName, useControlledValue } from '@dxos/react-ui';
+import { type ThemedClassName } from '@dxos/react-ui';
 
-import { type ListItemRecord, idle, type ItemState } from './ListItem';
+import { idle, type ItemState, type ListItemRecord } from './ListItem';
 
 type ListContext<T extends ListItemRecord> = {
   isItem: (item: any) => boolean;
+  isEqual?: (item1: T, item2: T) => boolean;
+  getId?: (item: T) => string; // TODO(burdon): Require if T doesn't conform to type.
   dragPreview?: boolean;
   state: ItemState & { item?: T };
   setState: (state: ItemState & { item?: T }) => void;
@@ -31,21 +33,26 @@ export type ListRendererProps<T extends ListItemRecord> = {
 export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
   children?: (props: ListRendererProps<T>) => ReactNode;
   items?: T[];
-  onMove?: (source: T, index: number) => void;
+  onMove?: (fromIndex: number, toIndex: number) => void;
 }> &
-  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
+  Pick<ListContext<T>, 'isItem' | 'isEqual' | 'getId' | 'dragPreview'>;
 
 export const ListRoot = <T extends ListItemRecord>({
   classNames,
   children,
-  items: _items = [],
+  items,
   isItem,
+  isEqual = (a, b) => (getId ? getId(a) === getId(b) : a === b),
+  getId,
   onMove,
   ...props
 }: ListRootProps<T>) => {
-  const [items, setItems] = useControlledValue<T[]>(_items);
   const [state, setState] = useState<ListContext<T>['state']>(idle);
   useEffect(() => {
+    if (!items) {
+      return;
+    }
+
     return monitorForElements({
       canMonitor: ({ source }) => isItem(source.data),
       onDrop: ({ location, source }) => {
@@ -60,27 +67,24 @@ export const ListRoot = <T extends ListItemRecord>({
           return;
         }
 
-        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
-        const targetIdx = items.findIndex((item) => item.id === targetData.id);
+        const sourceIdx = items.findIndex((item) => isEqual(item, sourceData as T));
+        const targetIdx = items.findIndex((item) => isEqual(item, targetData as T));
         if (targetIdx < 0 || sourceIdx < 0) {
           return;
         }
-
         const closestEdgeOfTarget = extractClosestEdge(targetData);
-        setItems(
-          reorderWithEdge({
-            list: items,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: 'vertical',
-            closestEdgeOfTarget,
-          }),
-        );
-
-        onMove?.(sourceData as T, targetIdx);
+        const destinationIndex = getReorderDestinationIndex({
+          closestEdgeOfTarget,
+          startIndex: sourceIdx,
+          indexOfTarget: targetIdx,
+          axis: 'vertical',
+        });
+        onMove?.(sourceIdx, destinationIndex);
       },
     });
   }, [items]);
 
-  return <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items })}</ListProvider>;
+  return (
+    <ListProvider {...{ isItem, state, setState, ...props }}>{children?.({ state, items: items ?? [] })}</ListProvider>
+  );
 };

package/src/components/Tree/DropIndicator.tsx

@@ -0,0 +1,79 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item';
+import React, { type HTMLAttributes, type CSSProperties } from 'react';
+
+import { mx } from '@dxos/react-ui-theme';
+
+// Tree item hitbox
+// https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx#tree-item
+
+export type DropIndicatorProps = {
+  instruction: Instruction;
+};
+
+type InstructionType = Exclude<Instruction, { type: 'instruction-blocked' }>['type'];
+type Orientation = 'sibling' | 'child';
+
+const edgeToOrientationMap: Record<InstructionType, Orientation> = {
+  'reorder-above': 'sibling',
+  'reorder-below': 'sibling',
+  'make-child': 'child',
+  reparent: 'child',
+};
+
+const orientationStyles: Record<Orientation, HTMLAttributes<HTMLElement>['className']> = {
+  // TODO(wittjosiah): Stop using left/right here.
+  sibling:
+    'bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]',
+  child: 'is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible',
+};
+
+const instructionStyles: Record<InstructionType, HTMLAttributes<HTMLElement>['className']> = {
+  'reorder-above': 'block-start-[--line-offset] before:block-start-[--offset-terminal]',
+  'reorder-below': 'block-end-[--line-offset] before:block-end-[--offset-terminal]',
+  'make-child': 'border-accentSurface',
+  // TODO(wittjosiah): This is not occurring in the current implementation.
+  reparent: '',
+};
+
+const strokeSize = 2;
+const terminalSize = 8;
+const offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
+const gap = '0px';
+
+export const DropIndicator = ({ instruction }: DropIndicatorProps) => {
+  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+  const isBlocked = instruction.type === 'instruction-blocked';
+  const desiredInstruction = isBlocked ? instruction.desired : instruction;
+  const orientation = edgeToOrientationMap[desiredInstruction.type];
+
+  if (isBlocked) {
+    return null;
+  }
+
+  return (
+    <div
+      style={
+        {
+          '--line-thickness': `${strokeSize}px`,
+          '--line-offset': `${lineOffset}`,
+          '--terminal-size': `${terminalSize}px`,
+          '--terminal-radius': `${terminalSize / 2}px`,
+          '--negative-terminal-size': `-${terminalSize}px`,
+          '--offset-terminal': `${offsetToAlignTerminalWithLine}px`,
+          '--horizontal-indent': `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`,
+        } as CSSProperties
+      }
+      className={mx(
+        'absolute z-10 pointer-events-none',
+        'before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute',
+        'before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full',
+        orientationStyles[orientation],
+        instructionStyles[desiredInstruction.type],
+      )}
+    ></div>
+  );
+};

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

@@ -0,0 +1,116 @@
+//
+// 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 StoryObj, type Meta } from '@storybook/react';
+import React, { useEffect } from 'react';
+
+import { create } from '@dxos/echo-schema';
+import { faker } from '@dxos/random';
+import { Icon } from '@dxos/react-ui';
+import { Path } from '@dxos/react-ui-mosaic';
+import { withLayout, withTheme } from '@dxos/storybook-utils';
+
+import { Tree, type TreeProps } from './Tree';
+import { createTree, flattenTree, getItem, updateState, type TestItem } from './testing';
+import { isItem, type ItemType } from './types';
+
+faker.seed(1234);
+
+type State = {
+  tree: TestItem;
+  open: string[];
+  current: string[];
+  flatTree: ItemType[];
+};
+
+const state = create<State>({
+  tree: createTree(),
+  open: [],
+  current: [],
+  get flatTree() {
+    return flattenTree(this.tree, this.open, getItem);
+  },
+});
+
+const Story = (args: Partial<TreeProps>) => {
+  // NOTE: If passed directly to args, this won't be reactive.
+  const items = state.flatTree;
+
+  useEffect(() => {
+    return monitorForElements({
+      canMonitor: ({ source }) => isItem(source.data),
+      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: state.tree,
+            instruction,
+            source: source.data as ItemType,
+            target: target.data as ItemType,
+          });
+        }
+      },
+    });
+  }, []);
+
+  return <Tree items={items} open={state.open} current={state.current} {...args} />;
+};
+
+const meta: Meta<typeof Tree> = {
+  title: 'ui/react-ui-list/Tree',
+  component: Tree,
+  render: Story,
+  decorators: [withTheme, withLayout({ tooltips: true })],
+  args: {
+    renderColumns: () => {
+      return (
+        <div className='flex items-center'>
+          <Icon icon='ph--placeholder--regular' size={5} />
+        </div>
+      );
+    },
+    onOpenChange: (item: ItemType, open: boolean) => {
+      const path = Path.create(...item.path);
+      if (open) {
+        state.open.push(path);
+      } else {
+        const index = state.open.indexOf(path);
+        if (index > -1) {
+          state.open.splice(index, 1);
+        }
+      }
+    },
+    onSelect: (item: ItemType, current: boolean) => {
+      if (current) {
+        state.current.push(item.id);
+      } else {
+        const index = state.current.indexOf(item.id);
+        if (index > -1) {
+          state.current.splice(index, 1);
+        }
+      }
+    },
+  },
+};
+
+export default meta;
+
+export const Default = {};
+
+export const Draggable: StoryObj<typeof Tree> = {
+  args: {
+    draggable: true,
+  },
+};

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,56 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { Treegrid, type TreegridRootProps } from '@dxos/react-ui';
+import { Path } from '@dxos/react-ui-mosaic';
+
+import { TreeItem, type TreeItemProps } from './TreeItem';
+import { getMode } from './helpers';
+import { type ItemType } from './types';
+
+export type TreeProps<T extends ItemType = ItemType> = {
+  items: T[];
+  open: string[];
+  current: string[];
+} & Partial<Pick<TreegridRootProps, 'gridTemplateColumns' | 'classNames'>> &
+  Pick<TreeItemProps<T>, 'draggable' | 'renderColumns' | 'canDrop' | 'onOpenChange' | 'onSelect'>;
+
+export const Tree = <T extends ItemType = ItemType>({
+  items,
+  open,
+  current,
+  draggable = false,
+  gridTemplateColumns = '[tree-row-start] 1fr min-content [tree-row-end]',
+  classNames,
+  renderColumns,
+  canDrop,
+  onOpenChange,
+  onSelect,
+}: TreeProps<T>) => {
+  return (
+    <Treegrid.Root gridTemplateColumns={gridTemplateColumns} classNames={classNames}>
+      {items.map((item, i) => {
+        const path = Path.create(...item.path);
+
+        return (
+          <TreeItem<T>
+            key={item.id}
+            item={item}
+            mode={getMode(items, i)}
+            open={open.includes(path)}
+            // TODO(wittjosiah): This should also be path-based.
+            current={current.includes(item.id)}
+            draggable={draggable}
+            renderColumns={renderColumns}
+            canDrop={canDrop}
+            onOpenChange={onOpenChange}
+            onSelect={onSelect}
+          />
+        );
+      })}
+    </Treegrid.Root>
+  );
+};