@dxos/react-ui-list 0.6.13-main.548ca8d → 0.6.14-main.1366248

package/dist/types/src/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from './List';
+export * from './Tree';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-list",
-  "version": "0.6.13-main.548ca8d",
+  "version": "0.6.14-main.1366248",
   "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,16 +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.13-main.548ca8d",
-    "@dxos/invariant": "0.6.13-main.548ca8d",
-    "@dxos/echo-schema": "0.6.13-main.548ca8d",
-    "@dxos/react-ui": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-types": "0.6.13-main.548ca8d",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
-    "@dxos/log": "0.6.13-main.548ca8d",
-    "@dxos/util": "0.6.13-main.548ca8d"
+    "@dxos/debug": "0.6.14-main.1366248",
+    "@dxos/invariant": "0.6.14-main.1366248",
+    "@dxos/echo-schema": "0.6.14-main.1366248",
+    "@dxos/log": "0.6.14-main.1366248",
+    "@dxos/react-ui-mosaic": "0.6.14-main.1366248",
+    "@dxos/react-ui-attention": "0.6.14-main.1366248",
+    "@dxos/react-ui-text-tooltip": "0.6.14-main.1366248",
+    "@dxos/react-ui-types": "0.6.14-main.1366248",
+    "@dxos/util": "0.6.14-main.1366248"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -43,15 +45,18 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui-theme": "0.6.13-main.548ca8d",
-    "@dxos/random": "0.6.13-main.548ca8d",
-    "@dxos/storybook-utils": "0.6.13-main.548ca8d"
+    "@dxos/random": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/storybook-utils": "0.6.14-main.1366248"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.1.5",
     "effect": "^3.9.1",
     "react": "~18.2.0",
-    "react-dom": "~18.2.0"
+    "react-dom": "~18.2.0",
+    "@dxos/react-ui-theme": "0.6.14-main.1366248",
+    "@dxos/react-ui": "0.6.14-main.1366248"
   },
   "publishConfig": {
     "access": "public"

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

@@ -4,19 +4,21 @@
 
 import '@dxos-theme';
 
+import { type Meta, type StoryObj } from '@storybook/react';
 import React from 'react';
 
 import { create, S } from '@dxos/echo-schema';
 import { ghostHover, mx } from '@dxos/react-ui-theme';
 import { withTheme, withLayout } from '@dxos/storybook-utils';
+import { arrayMove } from '@dxos/util';
 
 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';
 
-const Story = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
+const DefaultStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   const handleSelect = (item: TestItemType) => {
     console.log('select', item);
   };
@@ -24,9 +26,12 @@ const Story = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
     const idx = items.findIndex((i) => i.id === item.id);
     items.splice(idx, 1);
   };
+  const handleMove = (from: number, to: number) => {
+    arrayMove(items, from, to);
+  };
 
   return (
-    <List.Root<TestItemType> dragPreview items={items} {...props}>
+    <List.Root<TestItemType> dragPreview items={items} getId={(item) => item.id} onMove={handleMove} {...props}>
       {({ items }) => (
         <>
           <div className='flex flex-col w-full'>
@@ -36,7 +41,7 @@ const Story = ({ 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>
@@ -47,7 +52,7 @@ const Story = ({ 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>
 
@@ -70,7 +75,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>
@@ -83,26 +88,27 @@ const SimpleStory = ({ items = [], ...props }: ListRootProps<TestItemType>) => {
   );
 };
 
-export default {
-  // TODO(burdon): Storybook collides with react-ui/List.
-  title: 'react-ui-list/List',
-  decorators: [withTheme, withLayout({ fullscreen: true })],
-  render: Story,
-};
-
 const list = create(createList(100));
 
-export const Default = {
+export const Default: StoryObj<ListRootProps<TestItemType>> = {
+  render: DefaultStory,
   args: {
     items: list.items,
     isItem: S.is(TestItemSchema),
-  } satisfies ListRootProps<TestItemType>,
-} as any; // TODO(burdon): TS2742: The inferred type of Default cannot be named without a reference to... (AST)
+  },
+};
 
-export const Simple = {
+export const Simple: StoryObj<ListRootProps<TestItemType>> = {
   render: SimpleStory,
   args: {
     items: list.items,
     isItem: S.is(TestItemSchema),
-  } satisfies ListRootProps<TestItemType>,
-} as any; // TODO(burdon): TS2742: The inferred type of Default cannot be named without a reference to... (AST)
+  },
+};
+
+const meta: Meta = {
+  title: 'ui/react-ui-list/List',
+  decorators: [withTheme, withLayout({ fullscreen: true })],
+};
+
+export default meta;

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 =
   | {
@@ -163,7 +165,7 @@ export const ListItem = <T extends ListItemRecord>({ children, classNames, item
   return (
     <ListItemProvider item={item} dragHandleRef={dragHandleRef}>
       <div className='relative'>
-        <div ref={ref} role='listitem' className={mx('flex', classNames, stateStyles[state.type])}>
+        <div ref={ref} role='listitem' className={mx('flex overflow-hidden', classNames, stateStyles[state.type])}>
           {children}
         </div>
         {state.type === 'is-dragging-over' && state.closestEdge && <DropIndicator edge={state.closestEdge} />}
@@ -207,7 +209,7 @@ export const ListItemDeleteButton = ({
 
 export const ListItemDragHandle = () => {
   const { dragHandleRef } = useListItemContext('DRAG_HANDLE');
-  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six--regular' />;
+  return <IconButton ref={dragHandleRef as any} icon='ph--dots-six-vertical--regular' />;
 };
 
 export const ListItemDragPreview = <T extends ListItemRecord>({
@@ -220,7 +222,7 @@ export const ListItemDragPreview = <T extends ListItemRecord>({
 };
 
 export const ListItemWrapper = ({ classNames, children }: ThemedClassName<PropsWithChildren>) => (
-  <div className={mx('flex w-full', classNames)}>{children}</div>
+  <div className={mx('flex is-full gap-2', classNames)}>{children}</div>
 );
 
 export const ListItemTitle = ({
@@ -228,7 +230,7 @@ export const ListItemTitle = ({
   children,
   ...props
 }: ThemedClassName<PropsWithChildren<ComponentProps<'div'>>>) => (
-  <div className={mx('flex w-full items-center', classNames)} {...props}>
+  <div className={mx('flex grow items-center truncate', classNames)} {...props}>
     {children}
   </div>
 );

package/src/components/List/ListRoot.tsx

@@ -4,17 +4,17 @@
 
 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 { flushSync } from 'react-dom';
+import React, { type ReactNode, useCallback, 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;
+  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;
@@ -32,19 +32,44 @@ export type ListRendererProps<T extends ListItemRecord> = {
 export type ListRootProps<T extends ListItemRecord> = ThemedClassName<{
   children?: (props: ListRendererProps<T>) => ReactNode;
   items?: T[];
+  onMove?: (fromIndex: number, toIndex: number) => void;
 }> &
-  Pick<ListContext<T>, 'isItem' | 'dragPreview'>;
+  Pick<ListContext<T>, 'isItem' | 'getId' | 'dragPreview'>;
+
+const defaultGetId = <T extends ListItemRecord>(item: T) => (item as any)?.id;
 
 export const ListRoot = <T extends ListItemRecord>({
   classNames,
   children,
-  items: _items = [],
+  items,
   isItem,
+  getId = defaultGetId,
+  onMove,
   ...props
 }: ListRootProps<T>) => {
-  const [items, setItems] = useControlledValue<T[]>(_items);
+  const isEqual = useCallback(
+    (a: T, b: T) => {
+      const idA = getId?.(a);
+      const idB = getId?.(b);
+
+      if (idA !== undefined && idB !== undefined) {
+        return idA === idB;
+      } else {
+        // Fallback for primitive values or when getId fails.
+        // NOTE(ZaymonFC): After drag and drop, pragmatic internally serializes drop targets which breaks reference equality.
+        // You must provide an `getId` function that returns a stable identifier for your items.
+        return a === b;
+      }
+    },
+    [getId],
+  );
+
   const [state, setState] = useState<ListContext<T>['state']>(idle);
   useEffect(() => {
+    if (!items) {
+      return;
+    }
+
     return monitorForElements({
       canMonitor: ({ source }) => isItem(source.data),
       onDrop: ({ location, source }) => {
@@ -55,31 +80,30 @@ export const ListRoot = <T extends ListItemRecord>({
 
         const sourceData = source.data;
         const targetData = target.data;
+
         if (!isItem(sourceData) || !isItem(targetData)) {
           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);
-        flushSync(() => {
-          setItems(
-            reorderWithEdge({
-              list: items,
-              startIndex: sourceIdx,
-              indexOfTarget: targetIdx,
-              axis: 'vertical',
-              closestEdgeOfTarget,
-            }),
-          );
+        const destinationIndex = getReorderDestinationIndex({
+          closestEdgeOfTarget,
+          startIndex: sourceIdx,
+          indexOfTarget: targetIdx,
+          axis: 'vertical',
         });
+
+        onMove?.(sourceIdx, destinationIndex);
       },
     });
-  }, [items]);
+  }, [items, isEqual, onMove]);
 
-  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>
+  );
+};