@dxos/react-ui-list 0.7.4 → 0.7.5-labs.071a3e2

package/dist/lib/browser/index.mjs

@@ -4,56 +4,18 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachClosestEdge, extractClosestEdge as extractClosestEdge2 } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { createContext as createContext2 } from "@radix-ui/react-context";
-import React3, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import React2, { forwardRef, useEffect as useEffect2, useRef, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { invariant } from "@dxos/invariant";
-import { Icon } from "@dxos/react-ui";
-import { mx as mx2 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-list/src/components/List/DropIndicator.tsx
-import React from "react";
+import { Icon, ListItem as NaturalListItem } from "@dxos/react-ui";
 import { mx } from "@dxos/react-ui-theme";
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
-};
-var edgeStyles = {
-  top: "top-[--line-offset] before:top-[--offset-terminal]",
-  right: "right-[--line-offset] before:right-[--offset-terminal]",
-  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
-  left: "left-[--line-offset] before:left-[--offset-terminal]"
-};
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var DropIndicator = ({ edge, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ React.createElement("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`
-    },
-    className: mx("absolute z-10 pointer-events-none bg-blue-700", "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute", "before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full", orientationStyles[orientation], edgeStyles[edge])
-  });
-};
 
 // packages/ui/react-ui-list/src/components/List/ListRoot.tsx
 import { monitorForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { extractClosestEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge";
 import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
 var [ListProvider, useListContext] = createContext(LIST_NAME);
 var defaultGetId = (item) => item?.id;
@@ -106,7 +68,7 @@ var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onM
     isEqual,
     onMove
   ]);
-  return /* @__PURE__ */ React2.createElement(ListProvider, {
+  return /* @__PURE__ */ React.createElement(ListProvider, {
     isItem,
     state,
     setState,
@@ -128,7 +90,7 @@ var stateStyles = {
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = createContext2(LIST_ITEM_NAME, defaultContext);
-var ListItem = ({ children, classNames, item }) => {
+var ListItem = ({ children, classNames, item, ...props }) => {
   const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = useRef(null);
   const dragHandleRef = useRef(null);
@@ -174,6 +136,8 @@ var ListItem = ({ children, classNames, item }) => {
                 container,
                 item
               });
+              return () => {
+              };
             }
           });
         } : void 0,
@@ -240,25 +204,27 @@ var ListItem = ({ children, classNames, item }) => {
   }, [
     item
   ]);
-  return /* @__PURE__ */ React3.createElement(ListItemProvider, {
+  return /* @__PURE__ */ React2.createElement(ListItemProvider, {
     item,
     dragHandleRef
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
     className: "relative"
-  }, /* @__PURE__ */ React3.createElement("div", {
+  }, /* @__PURE__ */ React2.createElement("div", {
     ref,
     role: "listitem",
-    className: mx2("flex overflow-hidden", classNames, stateStyles[state.type])
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React3.createElement(DropIndicator, {
+    className: mx("flex overflow-hidden", classNames, stateStyles[state.type]),
+    ...props
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React2.createElement(NaturalListItem.DropIndicator, {
     edge: state.closestEdge
   })));
 };
 var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, forwardedRef) => {
-  return /* @__PURE__ */ React3.createElement("button", {
+  return /* @__PURE__ */ React2.createElement("button", {
     ref: forwardedRef,
-    className: mx2("flex items-center justify-center", classNames),
+    className: mx("flex items-center justify-center", classNames),
     ...props
-  }, /* @__PURE__ */ React3.createElement(Icon, {
+  }, /* @__PURE__ */ React2.createElement(Icon, {
     icon,
     classNames: "cursor-pointer",
     size: 4
@@ -267,7 +233,7 @@ var IconButton = /* @__PURE__ */ forwardRef(({ classNames, icon, ...props }, for
 var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, ...props }) => {
   const { state } = useListContext("DELETE_BUTTON");
   const isDisabled = state.type !== "idle" || disabled;
-  return /* @__PURE__ */ React3.createElement(IconButton, {
+  return /* @__PURE__ */ React2.createElement(IconButton, {
     icon: "ph--x--regular",
     disabled: isDisabled,
     classNames: [
@@ -279,7 +245,7 @@ var ListItemDeleteButton = ({ autoHide = true, classNames, disabled, ...props })
 };
 var ListItemDragHandle = () => {
   const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
-  return /* @__PURE__ */ React3.createElement(IconButton, {
+  return /* @__PURE__ */ React2.createElement(IconButton, {
     ref: dragHandleRef,
     icon: "ph--dots-six-vertical--regular"
   });
@@ -290,11 +256,11 @@ var ListItemDragPreview = ({ children }) => {
     item: state.item
   }), state.container) : null;
 };
-var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex is-full gap-2", classNames)
+var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React2.createElement("div", {
+  className: mx("flex is-full gap-2", classNames)
 }, children);
-var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex grow items-center truncate", classNames),
+var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React2.createElement("div", {
+  className: mx("flex grow items-center truncate", classNames),
   ...props
 }, children);
 
@@ -311,7 +277,7 @@ var List = {
 };
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-import React8, { useMemo as useMemo2 } from "react";
+import React6, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
 // packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx
@@ -323,65 +289,19 @@ var TreeProvider = TreeContext.Provider;
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
 import { combine as combine2 } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable as pragmaticDraggable, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable as draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
-import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import React5, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { S } from "@dxos/echo-schema";
 import { invariant as invariant2 } from "@dxos/invariant";
-import { Treegrid } from "@dxos/react-ui";
-import { focusRing, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx6 } from "@dxos/react-ui-theme";
-
-// packages/ui/react-ui-list/src/components/Tree/DropIndicator.tsx
-import React4 from "react";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-var edgeToOrientationMap2 = {
-  "reorder-above": "sibling",
-  "reorder-below": "sibling",
-  "make-child": "child",
-  reparent: "child"
-};
-var orientationStyles2 = {
-  // 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"
-};
-var instructionStyles = {
-  "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: ""
-};
-var strokeSize2 = 2;
-var terminalSize2 = 8;
-var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
-var DropIndicator2 = ({ instruction, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
-  const isBlocked = instruction.type === "instruction-blocked";
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap2[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-  return /* @__PURE__ */ React4.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize2}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize2}px`,
-      "--terminal-radius": `${terminalSize2 / 2}px`,
-      "--negative-terminal-size": `-${terminalSize2}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
-      "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
-    },
-    className: mx3("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", orientationStyles2[orientation], instructionStyles[desiredInstruction.type])
-  });
-};
+import { Treegrid, TreeItem as NaturalTreeItem } from "@dxos/react-ui";
+import { ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/react-ui-theme";
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
-import React5, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
+import React3, { forwardRef as forwardRef2, memo, useCallback as useCallback2 } from "react";
 import { Button, Icon as Icon2, toLocalizedString, useTranslation } from "@dxos/react-ui";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-import { mx as mx4 } from "@dxos/react-ui-theme";
+import { mx as mx2 } from "@dxos/react-ui-theme";
 var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
   const { t } = useTranslation();
   const handleSelect = useCallback2((event) => {
@@ -398,57 +318,57 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ React5.createElement(TextTooltip, {
+  return /* @__PURE__ */ React3.createElement(TextTooltip, {
     text: toLocalizedString(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ React5.createElement(Button, {
+  }, /* @__PURE__ */ React3.createElement(Button, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     density: "fine",
-    classNames: mx4("grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent", "disabled:!cursor-default disabled:!opacity-100", className),
+    classNames: mx2("grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent", "disabled:cursor-default disabled:opacity-100", className),
     disabled,
     onClick: handleSelect,
     onKeyDown: handleButtonKeydown,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
+  }, icon && /* @__PURE__ */ React3.createElement(Icon2, {
     icon: icon ?? "ph--placeholder--regular",
     size: 4,
     classNames: "is-[1em] bs-[1em] mlb-1"
-  }), /* @__PURE__ */ React5.createElement("span", {
+  }), /* @__PURE__ */ React3.createElement("span", {
     className: "flex-1 is-0 truncate text-start text-sm font-normal",
     "data-tooltip": true
   }, toLocalizedString(label, t))));
 }));
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx
-import React6, { forwardRef as forwardRef3, memo as memo2 } from "react";
+import React4, { forwardRef as forwardRef3, memo as memo2 } from "react";
 import { Button as Button2, Icon as Icon3 } from "@dxos/react-ui";
-import { mx as mx5 } from "@dxos/react-ui-theme";
-var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, onToggle }, forwardedRef) => {
-  return /* @__PURE__ */ React6.createElement(Button2, {
+import { mx as mx3 } from "@dxos/react-ui-theme";
+var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef3(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
+  return /* @__PURE__ */ React4.createElement(Button2, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
     variant: "ghost",
     density: "fine",
-    classNames: mx5("is-6 !pli-1", !isBranch && "invisible"),
+    classNames: mx3("is-4 dx-focus-ring-inset pli-0", hidden ? "hidden" : !isBranch && "invisible"),
     onClick: onToggle
-  }, /* @__PURE__ */ React6.createElement(Icon3, {
+  }, /* @__PURE__ */ React4.createElement(Icon3, {
     icon: "ph--caret-right--regular",
     size: 3,
-    classNames: mx5("transition duration-200", open && "rotate-90")
+    classNames: mx3("transition duration-200", open && "rotate-90")
   }));
 }));
 
 // packages/ui/react-ui-list/src/components/Tree/helpers.ts
 var DEFAULT_INDENTATION = 8;
-var paddingIndendation = (level, indentation = DEFAULT_INDENTATION) => ({
+var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`
 });
 
@@ -461,7 +381,7 @@ var TreeDataSchema = S.Struct({
   item: S.Any
 });
 var isTreeData = (data) => S.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColumns: Columns, canDrop, onOpenChange, onSelect }) => {
+var RawTreeItem = ({ item, path: _path, last, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect, levelOffset = 2 }) => {
   const { getItems, getProps, isOpen, isCurrent } = useTree();
   const items = getItems(item);
   const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
@@ -474,7 +394,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
   ]);
   const open = isOpen(path, item);
   const current = isCurrent(path, item);
-  const level = path.length - 2;
+  const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode = last ? "last-in-group" : open ? "expanded" : "standard";
   const data = useMemo(() => ({
@@ -500,94 +420,98 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     }
   }, []);
   useEffect3(() => {
-    if (!draggable2) {
+    if (!_draggable) {
       return;
     }
     invariant2(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 104,
+      L: 106,
       S: void 0,
       A: [
         "buttonRef.current",
         ""
       ]
     });
-    return combine2(pragmaticDraggable({
-      element: buttonRef.current,
-      getInitialData: () => data,
-      onDragStart: () => {
-        setState("dragging");
-        if (open) {
-          openRef.current = true;
-          onOpenChange?.({
-            item,
-            path,
-            open: false
-          });
+    return combine2(
+      draggable2({
+        element: buttonRef.current,
+        getInitialData: () => data,
+        onDragStart: () => {
+          setState("dragging");
+          if (open) {
+            openRef.current = true;
+            onOpenChange?.({
+              item,
+              path,
+              open: false
+            });
+          }
+        },
+        onDrop: () => {
+          setState("idle");
+          if (openRef.current) {
+            onOpenChange?.({
+              item,
+              path,
+              open: true
+            });
+          }
         }
-      },
-      onDrop: () => {
-        setState("idle");
-        if (openRef.current) {
-          onOpenChange?.({
-            item,
-            path,
-            open: true
+      }),
+      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
+      dropTargetForElements2({
+        element: buttonRef.current,
+        getData: ({ input, element }) => {
+          return attachInstruction(data, {
+            input,
+            element,
+            indentPerLevel: DEFAULT_INDENTATION,
+            currentLevel: level,
+            mode,
+            block: isBranch ? [] : [
+              "make-child"
+            ]
           });
-        }
-      }
-    }), dropTargetForElements2({
-      element: buttonRef.current,
-      getData: ({ input, element }) => {
-        return attachInstruction(data, {
-          input,
-          element,
-          indentPerLevel: DEFAULT_INDENTATION,
-          currentLevel: level,
-          mode,
-          block: isBranch ? [] : [
-            "make-child"
-          ]
-        });
-      },
-      canDrop: ({ source }) => {
-        const _canDrop = canDrop ?? (() => true);
-        return source.element !== buttonRef.current && _canDrop(source.data, data);
-      },
-      getIsSticky: () => true,
-      onDrag: ({ self, source }) => {
-        const instruction2 = extractInstruction(self.data);
-        if (source.data.id !== id) {
-          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
-            cancelExpandRef.current = setTimeout(() => {
-              onOpenChange?.({
-                item,
-                path,
-                open: true
-              });
-            }, 500);
-          }
-          if (instruction2?.type !== "make-child") {
-            cancelExpand();
+        },
+        canDrop: ({ source }) => {
+          const _canDrop = canDrop ?? (() => true);
+          return source.element !== buttonRef.current && _canDrop(source.data, data);
+        },
+        getIsSticky: () => true,
+        onDrag: ({ self, source }) => {
+          const instruction2 = extractInstruction(self.data);
+          if (source.data.id !== id) {
+            if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+              cancelExpandRef.current = setTimeout(() => {
+                onOpenChange?.({
+                  item,
+                  path,
+                  open: true
+                });
+              }, 500);
+            }
+            if (instruction2?.type !== "make-child") {
+              cancelExpand();
+            }
+            setInstruction(instruction2);
+          } else if (instruction2?.type === "reparent") {
+            setInstruction(instruction2);
+          } else {
+            setInstruction(null);
           }
-          setInstruction(instruction2);
-        } else if (instruction2?.type === "reparent") {
-          setInstruction(instruction2);
-        } else {
+        },
+        onDragLeave: () => {
+          cancelExpand();
+          setInstruction(null);
+        },
+        onDrop: () => {
+          cancelExpand();
           setInstruction(null);
         }
-      },
-      onDragLeave: () => {
-        cancelExpand();
-        setInstruction(null);
-      },
-      onDrop: () => {
-        cancelExpand();
-        setInstruction(null);
-      }
-    }));
+      })
+    );
   }, [
-    draggable2,
+    _draggable,
     item,
     id,
     mode,
@@ -640,13 +564,13 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     handleOpenChange,
     handleSelect
   ]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(Treegrid.Row, {
+  return /* @__PURE__ */ React5.createElement(React5.Fragment, null, /* @__PURE__ */ React5.createElement(Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
     "aria-labelledby": `${id}__label`,
     parentOf: parentOf?.join(Treegrid.PARENT_OF_SEPARATOR),
-    classNames: mx6("grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostHover, focusRing, className),
+    classNames: mx4("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-input", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, 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
@@ -658,18 +582,18 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
       event.preventDefault();
       setMenuOpen(true);
     }
-  }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
+  }, /* @__PURE__ */ React5.createElement(Treegrid.Cell, {
     indent: true,
     classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-    style: paddingIndendation(level)
-  }, /* @__PURE__ */ React7.createElement("div", {
+    style: paddingIndentation(level)
+  }, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: "flex items-center"
-  }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ React5.createElement(TreeItemToggle, {
     open,
     isBranch,
     onToggle: handleOpenChange
-  }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ React5.createElement(TreeItemHeading, {
     ref: buttonRef,
     label,
     icon,
@@ -677,20 +601,21 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     disabled,
     current,
     onSelect: handleSelect
-  })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ React5.createElement(Columns, {
     item,
     path,
+    open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ React7.createElement(DropIndicator2, {
+  }), instruction && /* @__PURE__ */ React5.createElement(NaturalTreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
+  }))), open && items.map((item2, index) => /* @__PURE__ */ React5.createElement(TreeItem, {
     key: item2.id,
     item: item2,
     path,
     last: index === items.length - 1,
-    draggable: draggable2,
+    draggable: _draggable,
     renderColumns: Columns,
     canDrop,
     onOpenChange,
@@ -700,7 +625,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect }) => {
+var Tree = ({ root, path, id, getItems, getProps, isOpen, isCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect, levelOffset }) => {
   const context = useMemo2(() => ({
     getItems,
     getProps,
@@ -712,23 +637,28 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
     isOpen,
     isCurrent
   ]);
-  const items = getItems();
-  const path = useMemo2(() => [
+  const items = getItems(root);
+  const treePath = useMemo2(() => path ? [
+    ...path,
     id
-  ], [
+  ] : [
     id
+  ], [
+    id,
+    path
   ]);
-  return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
+  return /* @__PURE__ */ React6.createElement(Treegrid2.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ React8.createElement(TreeProvider, {
+  }, /* @__PURE__ */ React6.createElement(TreeProvider, {
     value: context
-  }, items.map((item, index) => /* @__PURE__ */ React8.createElement(TreeItem, {
+  }, items.map((item, index) => /* @__PURE__ */ React6.createElement(TreeItem, {
     key: item.id,
     item,
     last: index === items.length - 1,
-    path,
-    draggable: draggable2,
+    path: treePath,
+    levelOffset,
+    draggable: draggable3,
     renderColumns,
     canDrop,
     onOpenChange,