@dxos/react-ui-list 0.7.5-main.499c70c → 0.7.5-main.5ae2ba8

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":10900,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24357,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytes":2214,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":7754,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3194,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":1223,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":31446,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":5361,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":692,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":503,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":46298},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["List","RawTreeItem","Tree","TreeDataSchema","TreeItem","TreeProvider","isTreeData","useTree"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6469},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":2175},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":1022},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytesInOutput":293},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":7883},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1822},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":766},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":162},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0}},"bytes":21742}}}
+{"inputs":{"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytes":10900,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytes":24635,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytes":3478,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/ListItem.tsx","kind":"import-statement","original":"./ListItem"},{"path":"packages/ui/react-ui-list/src/components/List/ListRoot.tsx","kind":"import-statement","original":"./ListRoot"}],"format":"esm"},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytes":505,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/List.tsx","kind":"import-statement","original":"./List"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytes":2214,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytes":7653,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytes":3377,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytes":1223,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytes":31449,"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx","kind":"import-statement","original":"./TreeItemHeading"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx","kind":"import-statement","original":"./TreeItemToggle"},{"path":"packages/ui/react-ui-list/src/components/Tree/helpers.ts","kind":"import-statement","original":"./helpers"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytes":5887,"imports":[{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytes":692,"imports":[{"path":"packages/ui/react-ui-list/src/components/Tree/Tree.tsx","kind":"import-statement","original":"./Tree"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx","kind":"import-statement","original":"./TreeContext"},{"path":"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx","kind":"import-statement","original":"./TreeItem"}],"format":"esm"},"packages/ui/react-ui-list/src/components/index.ts":{"bytes":580,"imports":[{"path":"packages/ui/react-ui-list/src/components/List/index.ts","kind":"import-statement","original":"./List"},{"path":"packages/ui/react-ui-list/src/components/Tree/index.ts","kind":"import-statement","original":"./Tree"}],"format":"esm"},"packages/ui/react-ui-list/src/util/path.ts":{"bytes":3466,"imports":[],"format":"esm"},"packages/ui/react-ui-list/src/util/index.ts":{"bytes":494,"imports":[{"path":"packages/ui/react-ui-list/src/util/path.ts","kind":"import-statement","original":"./path"}],"format":"esm"},"packages/ui/react-ui-list/src/index.ts":{"bytes":583,"imports":[{"path":"packages/ui/react-ui-list/src/components/index.ts","kind":"import-statement","original":"./components"},{"path":"packages/ui/react-ui-list/src/util/index.ts","kind":"import-statement","original":"./util"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-list/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":48563},"packages/ui/react-ui-list/dist/lib/browser/index.mjs":{"imports":[{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react-dom","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index","kind":"import-statement","external":true},{"path":"@radix-ui/react-context","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/debug","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/combine","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop/element/adapter","kind":"import-statement","external":true},{"path":"@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/echo-schema","kind":"import-statement","external":true},{"path":"@dxos/invariant","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-text-tooltip","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true}],"exports":["List","Path","RawTreeItem","Tree","TreeDataSchema","TreeItem","TreeProvider","isTreeData","useTree"],"entryPoint":"packages/ui/react-ui-list/src/index.ts","inputs":{"packages/ui/react-ui-list/src/components/List/ListItem.tsx":{"bytesInOutput":6511},"packages/ui/react-ui-list/src/components/List/ListRoot.tsx":{"bytesInOutput":2175},"packages/ui/react-ui-list/src/components/List/List.tsx":{"bytesInOutput":245},"packages/ui/react-ui-list/src/components/List/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/components/Tree/Tree.tsx":{"bytesInOutput":1127},"packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx":{"bytesInOutput":293},"packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx":{"bytesInOutput":8160},"packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx":{"bytesInOutput":1817},"packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx":{"bytesInOutput":813},"packages/ui/react-ui-list/src/components/Tree/helpers.ts":{"bytesInOutput":162},"packages/ui/react-ui-list/src/components/Tree/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-list/src/util/path.ts":{"bytesInOutput":678},"packages/ui/react-ui-list/src/util/index.ts":{"bytesInOutput":0}},"bytes":22941}}}

package/dist/lib/node/index.cjs

@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var node_exports = {};
 __export(node_exports, {
   List: () => List,
+  Path: () => Path,
   RawTreeItem: () => RawTreeItem,
   Tree: () => Tree,
   TreeDataSchema: () => TreeDataSchema,
@@ -144,7 +145,7 @@ var stateStyles = {
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = (0, import_react_context.createContext)(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 = (0, import_react.useRef)(null);
   const dragHandleRef = (0, import_react.useRef)(null);
@@ -153,7 +154,7 @@ var ListItem = ({ children, classNames, item }) => {
     const element = ref.current;
     (0, import_invariant.invariant)(element, void 0, {
       F: __dxlog_file,
-      L: 90,
+      L: 91,
       S: void 0,
       A: [
         "element",
@@ -262,11 +263,13 @@ var ListItem = ({ children, classNames, item }) => {
     item,
     dragHandleRef
   }, /* @__PURE__ */ import_react.default.createElement("div", {
+    role: "none",
     className: "relative"
   }, /* @__PURE__ */ import_react.default.createElement("div", {
     ref,
     role: "listitem",
-    className: (0, import_react_ui_theme.mx)("flex overflow-hidden", classNames, stateStyles[state.type])
+    className: (0, import_react_ui_theme.mx)("flex overflow-hidden", classNames, stateStyles[state.type]),
+    ...props
   }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
     edge: state.closestEdge
   })));
@@ -355,7 +358,7 @@ var TreeItemHeading = /* @__PURE__ */ (0, import_react6.memo)(/* @__PURE__ */ (0
     "data-testid": "treeItem.heading",
     variant: "ghost",
     density: "fine",
-    classNames: (0, import_react_ui_theme3.mx)("grow gap-2 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent", "disabled:!cursor-default disabled:!opacity-100", className),
+    classNames: (0, import_react_ui_theme3.mx)("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,
@@ -371,14 +374,14 @@ var TreeItemHeading = /* @__PURE__ */ (0, import_react6.memo)(/* @__PURE__ */ (0
     "data-tooltip": true
   }, (0, import_react_ui4.toLocalizedString)(label, t))));
 }));
-var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ open, isBranch, onToggle }, forwardedRef) => {
+var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ open, isBranch, hidden, onToggle }, forwardedRef) => {
   return /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Button, {
     ref: forwardedRef,
     "data-testid": "treeItem.toggle",
     "aria-expanded": open,
     variant: "ghost",
     density: "fine",
-    classNames: (0, import_react_ui_theme4.mx)("is-6 !pli-1", !isBranch && "invisible"),
+    classNames: (0, import_react_ui_theme4.mx)("is-4 dx-focus-ring-inset pli-0", hidden ? "hidden" : !isBranch && "invisible"),
     onClick: onToggle
   }, /* @__PURE__ */ import_react7.default.createElement(import_react_ui5.Icon, {
     icon: "ph--caret-right--regular",
@@ -387,7 +390,7 @@ var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0,
   }));
 }));
 var DEFAULT_INDENTATION = 8;
-var paddingIndendation = (level, indentation = DEFAULT_INDENTATION) => ({
+var paddingIndentation = (level, indentation = DEFAULT_INDENTATION) => ({
   paddingInlineStart: `${(level - 1) * indentation}px`
 });
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx";
@@ -398,7 +401,7 @@ var TreeDataSchema = import_echo_schema.S.Struct({
   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 }) => {
+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);
@@ -411,7 +414,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 = (0, import_react5.useMemo)(() => ({
@@ -437,94 +440,98 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     }
   }, []);
   (0, import_react5.useEffect)(() => {
-    if (!draggable2) {
+    if (!_draggable) {
       return;
     }
     (0, import_invariant2.invariant)(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 109,
+      L: 106,
       S: void 0,
       A: [
         "buttonRef.current",
         ""
       ]
     });
-    return (0, import_combine2.combine)((0, import_adapter3.draggable)({
-      element: buttonRef.current,
-      getInitialData: () => data,
-      onDragStart: () => {
-        setState("dragging");
-        if (open) {
-          openRef.current = true;
-          onOpenChange?.({
-            item,
-            path,
-            open: false
-          });
+    return (0, import_combine2.combine)(
+      (0, import_adapter3.draggable)({
+        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
+      (0, import_adapter3.dropTargetForElements)({
+        element: buttonRef.current,
+        getData: ({ input, element }) => {
+          return (0, import_tree_item.attachInstruction)(data, {
+            input,
+            element,
+            indentPerLevel: DEFAULT_INDENTATION,
+            currentLevel: level,
+            mode,
+            block: isBranch ? [] : [
+              "make-child"
+            ]
           });
-        }
-      }
-    }), (0, import_adapter3.dropTargetForElements)({
-      element: buttonRef.current,
-      getData: ({ input, element }) => {
-        return (0, import_tree_item.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 = (0, import_tree_item.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 = (0, import_tree_item.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,
@@ -583,7 +590,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     id,
     "aria-labelledby": `${id}__label`,
     parentOf: parentOf?.join(import_react_ui3.Treegrid.PARENT_OF_SEPARATOR),
-    classNames: (0, import_react_ui_theme2.mx)("grid grid-cols-subgrid col-[tree-row] mt-[2px] aria-[current]:bg-input", import_react_ui_theme2.hoverableControls, import_react_ui_theme2.hoverableFocusedKeyboardControls, import_react_ui_theme2.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme2.ghostHover, import_react_ui_theme2.focusRing, className),
+    classNames: (0, import_react_ui_theme2.mx)("grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-groupSurface", import_react_ui_theme2.hoverableControls, import_react_ui_theme2.hoverableFocusedKeyboardControls, import_react_ui_theme2.hoverableFocusedWithinControls, hoverableDescriptionIcons, import_react_ui_theme2.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
@@ -598,7 +605,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
   }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Cell, {
     indent: true,
     classNames: "relative grid grid-cols-subgrid col-[tree-row]",
-    style: paddingIndendation(level)
+    style: paddingIndentation(level)
   }, /* @__PURE__ */ import_react5.default.createElement("div", {
     role: "none",
     className: "flex items-center"
@@ -628,7 +635,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     item: item2,
     path,
     last: index === items.length - 1,
-    draggable: draggable2,
+    draggable: _draggable,
     renderColumns: Columns,
     canDrop,
     onOpenChange,
@@ -636,7 +643,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
   })));
 };
 var TreeItem = /* @__PURE__ */ (0, import_react5.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 }) => {
+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 = (0, import_react3.useMemo)(() => ({
     getItems,
     getProps,
@@ -648,11 +655,15 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
     isOpen,
     isCurrent
   ]);
-  const items = getItems();
-  const path = (0, import_react3.useMemo)(() => [
+  const items = getItems(root);
+  const treePath = (0, import_react3.useMemo)(() => path ? [
+    ...path,
     id
-  ], [
+  ] : [
     id
+  ], [
+    id,
+    path
   ]);
   return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Treegrid.Root, {
     gridTemplateColumns,
@@ -663,17 +674,33 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
     key: item.id,
     item,
     last: index === items.length - 1,
-    path,
-    draggable: draggable2,
+    path: treePath,
+    levelOffset,
+    draggable: draggable3,
     renderColumns,
     canDrop,
     onOpenChange,
     onSelect
   }))));
 };
+var SEPARATOR = "~";
+var Path = {
+  create: (...args) => args.join(SEPARATOR),
+  parts: (path) => path.split(SEPARATOR),
+  length: (path) => path.split(SEPARATOR).length,
+  first: (path) => path.split(SEPARATOR)[0] ?? path,
+  last: (path) => path.split(SEPARATOR).at(-1) ?? path,
+  parent: (path) => path.split(SEPARATOR).slice(0, -1).join(SEPARATOR),
+  hasRoot: (path, id) => Path.first(path) === id,
+  hasChild: (path, compare) => Path.parent(compare) === path,
+  hasDescendent: (path, compare) => compare !== path && compare.startsWith(path),
+  siblings: (path, compare) => Path.parent(path) === Path.parent(compare),
+  onPath: (path, id) => Path.parts(path).includes(id)
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   List,
+  Path,
   RawTreeItem,
   Tree,
   TreeDataSchema,