@dxos/react-ui-list 0.7.1 → 0.7.2-main.f1adc9f

package/dist/lib/node/index.cjs

@@ -28,12 +28,14 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
-  ItemSchema: () => ItemSchema,
   List: () => List,
   RawTreeItem: () => RawTreeItem,
   Tree: () => Tree,
+  TreeDataSchema: () => TreeDataSchema,
   TreeItem: () => TreeItem,
-  isItem: () => isItem
+  TreeProvider: () => TreeProvider,
+  isTreeData: () => isTreeData,
+  useTree: () => useTree
 });
 module.exports = __toCommonJS(node_exports);
 var import_combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
@@ -55,24 +57,25 @@ var import_react_context2 = require("@radix-ui/react-context");
 var import_react3 = __toESM(require("react"));
 var import_react4 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
-var import_react_ui_mosaic = require("@dxos/react-ui-mosaic");
+var import_react5 = require("react");
+var import_debug = require("@dxos/debug");
 var import_combine2 = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var import_adapter3 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_tree_item = require("@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item");
-var import_react5 = __toESM(require("react"));
+var import_react6 = __toESM(require("react"));
+var import_echo_schema = require("@dxos/echo-schema");
 var import_invariant2 = require("@dxos/invariant");
 var import_react_ui3 = require("@dxos/react-ui");
 var import_react_ui_theme3 = require("@dxos/react-ui-theme");
-var import_react6 = __toESM(require("react"));
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 var import_react7 = __toESM(require("react"));
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
+var import_react8 = __toESM(require("react"));
 var import_react_ui4 = require("@dxos/react-ui");
 var import_react_ui_text_tooltip = require("@dxos/react-ui-text-tooltip");
 var import_react_ui_theme5 = require("@dxos/react-ui-theme");
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
 var import_react_ui_theme6 = require("@dxos/react-ui-theme");
-var import_echo_schema = require("@dxos/echo-schema");
 var edgeToOrientationMap = {
   top: "horizontal",
   bottom: "horizontal",
@@ -92,8 +95,8 @@ var edgeStyles = {
 var strokeSize = 2;
 var terminalSize = 8;
 var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var DropIndicator = ({ edge, gap: gap2 = "0px" }) => {
-  const lineOffset = `calc(-0.5 * (${gap2} + ${strokeSize}px))`;
+var DropIndicator = ({ edge, gap = 0 }) => {
+  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ import_react2.default.createElement("div", {
     style: {
@@ -110,7 +113,7 @@ var DropIndicator = ({ edge, gap: gap2 = "0px" }) => {
 var LIST_NAME = "List";
 var [ListProvider, useListContext] = (0, import_react_context2.createContext)(LIST_NAME);
 var defaultGetId = (item) => item?.id;
-var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultGetId, onMove, ...props }) => {
+var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onMove, ...props }) => {
   const isEqual = (0, import_react3.useCallback)((a, b) => {
     const idA = getId?.(a);
     const idB = getId?.(b);
@@ -128,7 +131,7 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultG
       return;
     }
     return (0, import_adapter2.monitorForElements)({
-      canMonitor: ({ source }) => isItem2(source.data),
+      canMonitor: ({ source }) => isItem(source.data),
       onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
@@ -136,7 +139,7 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultG
         }
         const sourceData = source.data;
         const targetData = target.data;
-        if (!isItem2(sourceData) || !isItem2(targetData)) {
+        if (!isItem(sourceData) || !isItem(targetData)) {
           return;
         }
         const sourceIdx = items.findIndex((item) => isEqual(item, sourceData));
@@ -160,7 +163,7 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultG
     onMove
   ]);
   return /* @__PURE__ */ import_react3.default.createElement(ListProvider, {
-    isItem: isItem2,
+    isItem,
     state,
     setState,
     ...props
@@ -180,7 +183,7 @@ var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = (0, import_react_context.createContext)(LIST_ITEM_NAME, defaultContext);
 var ListItem = ({ children, classNames, item }) => {
-  const { isItem: isItem2, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const { isItem, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = (0, import_react.useRef)(null);
   const dragHandleRef = (0, import_react.useRef)(null);
   const [state, setState] = (0, import_react.useState)(idle);
@@ -248,7 +251,7 @@ var ListItem = ({ children, classNames, item }) => {
       (0, import_adapter.dropTargetForElements)({
         element,
         canDrop: ({ source }) => {
-          return source.element !== element && isItem2(source.data);
+          return source.element !== element && isItem(source.data);
         },
         getData: ({ input }) => {
           return (0, import_closest_edge.attachClosestEdge)(item, {
@@ -358,6 +361,9 @@ var List = {
   ItemTitle: ListItemTitle,
   IconButton
 };
+var TreeContext = /* @__PURE__ */ (0, import_react5.createContext)(null);
+var useTree = () => (0, import_react5.useContext)(TreeContext) ?? (0, import_debug.raise)(new Error("TreeContext not found"));
+var TreeProvider = TreeContext.Provider;
 var edgeToOrientationMap2 = {
   "reorder-above": "sibling",
   "reorder-below": "sibling",
@@ -379,16 +385,15 @@ var instructionStyles = {
 var strokeSize2 = 2;
 var terminalSize2 = 8;
 var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
-var gap = "0px";
-var DropIndicator2 = ({ instruction }) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize2}px))`;
+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__ */ import_react6.default.createElement("div", {
+  return /* @__PURE__ */ import_react7.default.createElement("div", {
     style: {
       "--line-thickness": `${strokeSize2}px`,
       "--line-offset": `${lineOffset}`,
@@ -401,45 +406,51 @@ var DropIndicator2 = ({ instruction }) => {
     className: (0, import_react_ui_theme4.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", orientationStyles2[orientation], instructionStyles[desiredInstruction.type])
   });
 };
-var TreeItemHeading = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+var TreeItemHeading = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0, import_react8.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
   const { t } = (0, import_react_ui4.useTranslation)();
-  const handleButtonKeydown = (0, import_react7.useCallback)((event) => {
+  const handleSelect = (0, import_react8.useCallback)((event) => {
+    onSelect?.(event.altKey);
+  }, [
+    onSelect
+  ]);
+  const handleButtonKeydown = (0, import_react8.useCallback)((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
-      onSelect?.();
+      onSelect?.(event.altKey);
     }
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ import_react7.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
     text: (0, import_react_ui4.toLocalizedString)(label, t),
     side: "bottom",
     truncateQuery: "span[data-tooltip]",
     onlyWhenTruncating: true,
     asChild: true,
     ref: forwardedRef
-  }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Button, {
+  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Button, {
     "data-testid": "treeItem.heading",
     variant: "ghost",
     density: "fine",
     classNames: (0, import_react_ui_theme5.mx)("grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent", "disabled:!cursor-default disabled:!opacity-100", className),
     disabled,
-    onClick: onSelect,
+    onClick: handleSelect,
     onKeyDown: handleButtonKeydown,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ import_react7.default.createElement(import_react_ui4.Icon, {
+  }, icon && /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Icon, {
     icon: icon ?? "ph--placeholder--regular",
     size: 4,
     classNames: "is-[1em] bs-[1em] mlb-1"
-  }), /* @__PURE__ */ import_react7.default.createElement("span", {
-    className: "flex-1 is-0 truncate text-start text-sm font-normal"
+  }), /* @__PURE__ */ import_react8.default.createElement("span", {
+    className: "flex-1 is-0 truncate text-start text-sm font-normal",
+    "data-tooltip": true
   }, (0, import_react_ui4.toLocalizedString)(label, t))));
 }));
-var TreeItemToggle = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0, import_react8.forwardRef)(({ open, isBranch, onToggle }, forwardedRef) => {
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Button, {
+var TreeItemToggle = /* @__PURE__ */ (0, import_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ open, isBranch, onToggle }, forwardedRef) => {
+  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Button, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
@@ -447,7 +458,7 @@ var TreeItemToggle = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0,
     density: "fine",
     classNames: (0, import_react_ui_theme6.mx)("is-6 !pli-1", !isBranch && "invisible"),
     onClick: onToggle
-  }, /* @__PURE__ */ import_react8.default.createElement(import_react_ui5.Icon, {
+  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Icon, {
     icon: "ph--caret-right--regular",
     size: 3,
     classNames: (0, import_react_ui_theme6.mx)("transition duration-200", open && "rotate-90")
@@ -457,43 +468,59 @@ var DEFAULT_INDENTATION = 8;
 var paddingIndendation = (level, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`
 });
-var getMode = (items, index) => {
-  const item = items[index];
-  const next = items[index + 1];
-  if (!next || item.path.length > next.path.length) {
-    return "last-in-group";
-  } else if (item.path.length < next.path.length) {
-    return "expanded";
-  } else {
-    return "standard";
-  }
-};
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
 var hoverableDescriptionIcons = "[--icons-color:inherit] hover-hover:[--icons-color:var(--description-text)] hover-hover:hover:[--icons-color:inherit] focus-within:[--icons-color:inherit]";
-var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderColumns: Columns, canDrop, onOpenChange, onSelect }) => {
-  const { id, label, icon, className, headingClassName, disabled, path, parentOf } = item;
+var TreeDataSchema = import_echo_schema.S.Struct({
+  id: import_echo_schema.S.String,
+  path: import_echo_schema.S.Array(import_echo_schema.S.String),
+  item: import_echo_schema.S.Any
+});
+var isTreeData = (data) => import_echo_schema.S.is(TreeDataSchema)(data);
+var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColumns: Columns, canDrop, onOpenChange, onSelect }) => {
+  const { getItems, getProps, isOpen, isCurrent } = useTree();
+  const items = getItems(item);
+  const { id, label, parentOf, icon, disabled, className, headingClassName, testId } = getProps(item, _path);
+  const path = (0, import_react6.useMemo)(() => [
+    ..._path,
+    id
+  ], [
+    _path,
+    id
+  ]);
+  const open = isOpen(path, item);
+  const current = isCurrent(path, item);
   const level = path.length - 2;
   const isBranch = !!parentOf;
-  const rowRef = (0, import_react5.useRef)(null);
-  const buttonRef = (0, import_react5.useRef)(null);
-  const openRef = (0, import_react5.useRef)(false);
-  const cancelExpandRef = (0, import_react5.useRef)(null);
-  const [_state, setState] = (0, import_react5.useState)("idle");
-  const [instruction, setInstruction] = (0, import_react5.useState)(null);
-  const [menuOpen, setMenuOpen] = (0, import_react5.useState)(false);
-  const cancelExpand = (0, import_react5.useCallback)(() => {
+  const mode = last ? "last-in-group" : open ? "expanded" : "standard";
+  const data = (0, import_react6.useMemo)(() => ({
+    id,
+    path,
+    item
+  }), [
+    id,
+    path,
+    item
+  ]);
+  const rowRef = (0, import_react6.useRef)(null);
+  const buttonRef = (0, import_react6.useRef)(null);
+  const openRef = (0, import_react6.useRef)(false);
+  const cancelExpandRef = (0, import_react6.useRef)(null);
+  const [_state, setState] = (0, import_react6.useState)("idle");
+  const [instruction, setInstruction] = (0, import_react6.useState)(null);
+  const [menuOpen, setMenuOpen] = (0, import_react6.useState)(false);
+  const cancelExpand = (0, import_react6.useCallback)(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
     }
   }, []);
-  (0, import_react5.useEffect)(() => {
-    if (!_draggable) {
+  (0, import_react6.useEffect)(() => {
+    if (!draggable2) {
       return;
     }
     (0, import_invariant2.invariant)(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 87,
+      L: 104,
       S: void 0,
       A: [
         "buttonRef.current",
@@ -502,24 +529,32 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     });
     return (0, import_combine2.combine)((0, import_adapter3.draggable)({
       element: buttonRef.current,
-      getInitialData: () => item,
+      getInitialData: () => data,
       onDragStart: () => {
         setState("dragging");
         if (open) {
           openRef.current = true;
-          onOpenChange?.(item, false);
+          onOpenChange?.({
+            item,
+            path,
+            open: false
+          });
         }
       },
       onDrop: () => {
         setState("idle");
         if (openRef.current) {
-          onOpenChange?.(item, true);
+          onOpenChange?.({
+            item,
+            path,
+            open: true
+          });
         }
       }
     }), (0, import_adapter3.dropTargetForElements)({
       element: buttonRef.current,
       getData: ({ input, element }) => {
-        return (0, import_tree_item.attachInstruction)(item, {
+        return (0, import_tree_item.attachInstruction)(data, {
           input,
           element,
           indentPerLevel: DEFAULT_INDENTATION,
@@ -532,15 +567,19 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
       },
       canDrop: ({ source }) => {
         const _canDrop = canDrop ?? (() => true);
-        return source.element !== buttonRef.current && _canDrop(source.data, item);
+        return source.element !== buttonRef.current && _canDrop(source.data, data);
       },
       getIsSticky: () => true,
       onDrag: ({ self, source }) => {
         const instruction2 = (0, import_tree_item.extractInstruction)(self.data);
-        if (source.data.id !== item.id) {
+        if (source.data.id !== id) {
           if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
             cancelExpandRef.current = setTimeout(() => {
-              onOpenChange?.(item, true);
+              onOpenChange?.({
+                item,
+                path,
+                open: true
+              });
             }, 500);
           }
           if (instruction2?.type !== "make-child") {
@@ -563,29 +602,42 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
       }
     }));
   }, [
-    import_adapter3.draggable,
+    draggable2,
     item,
+    id,
     mode,
+    path,
     open,
     canDrop
   ]);
-  (0, import_react5.useEffect)(() => () => cancelExpand(), [
+  (0, import_react6.useEffect)(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenChange = (0, import_react5.useCallback)(() => onOpenChange?.(item, !open), [
+  const handleOpenChange = (0, import_react6.useCallback)(() => onOpenChange?.({
+    item,
+    path,
+    open: !open
+  }), [
     onOpenChange,
     item,
+    path,
     open
   ]);
-  const handleSelect = (0, import_react5.useCallback)(() => {
+  const handleSelect = (0, import_react6.useCallback)((option = false) => {
     rowRef.current?.focus();
-    onSelect?.(item, !current);
+    onSelect?.({
+      item,
+      path,
+      current: !current,
+      option
+    });
   }, [
     onSelect,
     item,
+    path,
     current
   ]);
-  const handleKeyDown = (0, import_react5.useCallback)((event) => {
+  const handleKeyDown = (0, import_react6.useCallback)((event) => {
     switch (event.key) {
       case "ArrowRight":
         isBranch && !open && handleOpenChange();
@@ -594,7 +646,7 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
         isBranch && open && handleOpenChange();
         break;
       case " ":
-        handleSelect();
+        handleSelect(event.altKey);
         break;
     }
   }, [
@@ -603,15 +655,15 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     handleOpenChange,
     handleSelect
   ]);
-  return /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Row, {
+  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Treegrid.Row, {
     ref: rowRef,
     key: id,
     id,
     "aria-labelledby": `${id}__label`,
     parentOf: parentOf?.join(import_react_ui3.Treegrid.PARENT_OF_SEPARATOR),
     classNames: (0, import_react_ui_theme3.mx)("grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input", import_react_ui_theme3.hoverableControls, import_react_ui_theme3.hoverableFocusedKeyboardControls, import_react_ui_theme3.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme3.ghostHover, import_react_ui_theme3.focusRing, className),
-    "data-itemid": item.id,
-    "data-testid": item.testId,
+    "data-itemid": id,
+    "data-testid": testId,
     // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
     //   without alerting the user (except for in the correct link element). See also:
     //   https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current#description
@@ -621,18 +673,18 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
       event.preventDefault();
       setMenuOpen(true);
     }
-  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Cell, {
+  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Treegrid.Cell, {
     indent: true,
     classNames: "relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndendation(level)
-  }, /* @__PURE__ */ import_react5.default.createElement("div", {
+  }, /* @__PURE__ */ import_react6.default.createElement("div", {
     role: "none",
     className: "flex items-center"
-  }, /* @__PURE__ */ import_react5.default.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ import_react6.default.createElement(TreeItemToggle, {
     open,
     isBranch,
     onToggle: handleOpenChange
-  }), /* @__PURE__ */ import_react5.default.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ import_react6.default.createElement(TreeItemHeading, {
     ref: buttonRef,
     label,
     icon,
@@ -640,59 +692,71 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     disabled,
     current,
     onSelect: handleSelect
-  })), Columns && /* @__PURE__ */ import_react5.default.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ import_react6.default.createElement(Columns, {
     item,
+    path,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ import_react5.default.createElement(DropIndicator2, {
-    instruction
+  }), instruction && /* @__PURE__ */ import_react6.default.createElement(DropIndicator2, {
+    instruction,
+    gap: 2
+  }))), open && items.map((item2, index) => /* @__PURE__ */ import_react6.default.createElement(TreeItem, {
+    key: item2.id,
+    item: item2,
+    path,
+    last: index === items.length - 1,
+    draggable: draggable2,
+    renderColumns: Columns,
+    canDrop,
+    onOpenChange,
+    onSelect
   })));
 };
-var TreeItem = /* @__PURE__ */ (0, import_react5.memo)(RawTreeItem);
-var Tree = ({ items, open, current, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect }) => {
+var TreeItem = /* @__PURE__ */ (0, import_react6.memo)(RawTreeItem);
+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 }) => {
+  const context = (0, import_react4.useMemo)(() => ({
+    getItems,
+    getProps,
+    isOpen,
+    isCurrent
+  }), [
+    getItems,
+    getProps,
+    isOpen,
+    isCurrent
+  ]);
+  const items = getItems();
+  const path = (0, import_react4.useMemo)(() => [
+    id
+  ], [
+    id
+  ]);
   return /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Treegrid.Root, {
     gridTemplateColumns,
     classNames
-  }, items.map((item, i) => {
-    const path = import_react_ui_mosaic.Path.create(...item.path);
-    return /* @__PURE__ */ import_react4.default.createElement(TreeItem, {
-      key: item.id,
-      item,
-      mode: getMode(items, i),
-      open: open.includes(path),
-      // TODO(wittjosiah): This should also be path-based.
-      current: current.includes(item.id),
-      draggable: draggable3,
-      renderColumns,
-      canDrop,
-      onOpenChange,
-      onSelect
-    });
-  }));
+  }, /* @__PURE__ */ import_react4.default.createElement(TreeProvider, {
+    value: context
+  }, items.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(TreeItem, {
+    key: item.id,
+    item,
+    last: index === items.length - 1,
+    path,
+    draggable: draggable2,
+    renderColumns,
+    canDrop,
+    onOpenChange,
+    onSelect
+  }))));
 };
-var LabelSchema = import_echo_schema.S.Union(import_echo_schema.S.String, import_echo_schema.S.Tuple(import_echo_schema.S.String, import_echo_schema.S.Struct({
-  ns: import_echo_schema.S.String,
-  count: import_echo_schema.S.optional(import_echo_schema.S.Number)
-})));
-var ItemSchema = import_echo_schema.S.mutable(import_echo_schema.S.Struct({
-  id: import_echo_schema.S.String,
-  label: import_echo_schema.S.mutable(LabelSchema),
-  icon: import_echo_schema.S.optional(import_echo_schema.S.String),
-  disabled: import_echo_schema.S.optional(import_echo_schema.S.Boolean),
-  className: import_echo_schema.S.optional(import_echo_schema.S.String),
-  headingClassName: import_echo_schema.S.optional(import_echo_schema.S.String),
-  testId: import_echo_schema.S.optional(import_echo_schema.S.String),
-  path: import_echo_schema.S.Array(import_echo_schema.S.String),
-  parentOf: import_echo_schema.S.optional(import_echo_schema.S.Array(import_echo_schema.S.String))
-}));
-var isItem = import_echo_schema.S.is(ItemSchema);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ItemSchema,
   List,
   RawTreeItem,
   Tree,
+  TreeDataSchema,
   TreeItem,
-  isItem
+  TreeProvider,
+  isTreeData,
+  useTree
 });
 //# sourceMappingURL=index.cjs.map