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

package/dist/lib/browser/index.mjs

@@ -32,8 +32,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__ */ React.createElement("div", {
     style: {
@@ -57,7 +57,7 @@ import React2, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
 var [ListProvider, useListContext] = 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 = useCallback((a, b) => {
     const idA = getId?.(a);
     const idB = getId?.(b);
@@ -75,7 +75,7 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultG
       return;
     }
     return monitorForElements({
-      canMonitor: ({ source }) => isItem2(source.data),
+      canMonitor: ({ source }) => isItem(source.data),
       onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
@@ -83,7 +83,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));
@@ -107,7 +107,7 @@ var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultG
     onMove
   ]);
   return /* @__PURE__ */ React2.createElement(ListProvider, {
-    isItem: isItem2,
+    isItem,
     state,
     setState,
     ...props
@@ -129,7 +129,7 @@ var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
 var [ListItemProvider, useListItemContext] = createContext2(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 = useRef(null);
   const dragHandleRef = useRef(null);
   const [state, setState] = useState2(idle);
@@ -197,7 +197,7 @@ var ListItem = ({ children, classNames, item }) => {
       dropTargetForElements({
         element,
         canDrop: ({ source }) => {
-          return source.element !== element && isItem2(source.data);
+          return source.element !== element && isItem(source.data);
         },
         getData: ({ input }) => {
           return attachClosestEdge(item, {
@@ -311,15 +311,22 @@ var List = {
 };
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-import React8 from "react";
+import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
-import { Path } from "@dxos/react-ui-mosaic";
+
+// packages/ui/react-ui-list/src/components/Tree/TreeContext.tsx
+import { createContext as createContext3, useContext } from "react";
+import { raise } from "@dxos/debug";
+var TreeContext = /* @__PURE__ */ createContext3(null);
+var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not found"));
+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 draggable2, dropTargetForElements as dropTargetForElements2 } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable as pragmaticDraggable, 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, useRef as useRef2, useState as useState3 } from "react";
+import React7, { 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";
@@ -348,9 +355,8 @@ 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];
@@ -378,11 +384,16 @@ import { TextTooltip } from "@dxos/react-ui-text-tooltip";
 import { mx as mx4 } 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) => {
+    onSelect?.(event.altKey);
+  }, [
+    onSelect
+  ]);
   const handleButtonKeydown = useCallback2((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
-      onSelect?.();
+      onSelect?.(event.altKey);
     }
   }, [
     onSelect
@@ -400,7 +411,7 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
     density: "fine",
     classNames: mx4("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"
@@ -410,7 +421,8 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label,
     size: 4,
     classNames: "is-[1em] bs-[1em] mlb-1"
   }), /* @__PURE__ */ React5.createElement("span", {
-    className: "flex-1 is-0 truncate text-start text-sm font-normal"
+    className: "flex-1 is-0 truncate text-start text-sm font-normal",
+    "data-tooltip": true
   }, toLocalizedString(label, t))));
 }));
 
@@ -439,25 +451,41 @@ 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";
-  }
-};
 
 // packages/ui/react-ui-list/src/components/Tree/TreeItem.tsx
 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 = S.Struct({
+  id: S.String,
+  path: S.Array(S.String),
+  item: S.Any
+});
+var isTreeData = (data) => 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 = useMemo(() => [
+    ..._path,
+    id
+  ], [
+    _path,
+    id
+  ]);
+  const open = isOpen(path, item);
+  const current = isCurrent(path, item);
   const level = path.length - 2;
   const isBranch = !!parentOf;
+  const mode = last ? "last-in-group" : open ? "expanded" : "standard";
+  const data = useMemo(() => ({
+    id,
+    path,
+    item
+  }), [
+    id,
+    path,
+    item
+  ]);
   const rowRef = useRef2(null);
   const buttonRef = useRef2(null);
   const openRef = useRef2(false);
@@ -472,38 +500,46 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     }
   }, []);
   useEffect3(() => {
-    if (!_draggable) {
+    if (!draggable2) {
       return;
     }
     invariant2(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 87,
+      L: 104,
       S: void 0,
       A: [
         "buttonRef.current",
         ""
       ]
     });
-    return combine2(draggable2({
+    return combine2(pragmaticDraggable({
       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
+          });
         }
       }
     }), dropTargetForElements2({
       element: buttonRef.current,
       getData: ({ input, element }) => {
-        return attachInstruction(item, {
+        return attachInstruction(data, {
           input,
           element,
           indentPerLevel: DEFAULT_INDENTATION,
@@ -516,15 +552,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 = 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") {
@@ -549,24 +589,37 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
   }, [
     draggable2,
     item,
+    id,
     mode,
+    path,
     open,
     canDrop
   ]);
   useEffect3(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenChange = useCallback3(() => onOpenChange?.(item, !open), [
+  const handleOpenChange = useCallback3(() => onOpenChange?.({
+    item,
+    path,
+    open: !open
+  }), [
     onOpenChange,
     item,
+    path,
     open
   ]);
-  const handleSelect = useCallback3(() => {
+  const handleSelect = useCallback3((option = false) => {
     rowRef.current?.focus();
-    onSelect?.(item, !current);
+    onSelect?.({
+      item,
+      path,
+      current: !current,
+      option
+    });
   }, [
     onSelect,
     item,
+    path,
     current
   ]);
   const handleKeyDown = useCallback3((event) => {
@@ -578,7 +631,7 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
         isBranch && open && handleOpenChange();
         break;
       case " ":
-        handleSelect();
+        handleSelect(event.altKey);
         break;
     }
   }, [
@@ -587,15 +640,15 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     handleOpenChange,
     handleSelect
   ]);
-  return /* @__PURE__ */ React7.createElement(Treegrid.Row, {
+  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.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),
-    "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
@@ -626,61 +679,70 @@ var RawTreeItem = ({ item, mode, open, current, draggable: _draggable, renderCol
     onSelect: handleSelect
   })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
     item,
+    path,
     menuOpen,
     setMenuOpen
   }), instruction && /* @__PURE__ */ React7.createElement(DropIndicator2, {
-    instruction
+    instruction,
+    gap: 2
+  }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
+    key: item2.id,
+    item: item2,
+    path,
+    last: index === items.length - 1,
+    draggable: draggable2,
+    renderColumns: Columns,
+    canDrop,
+    onOpenChange,
+    onSelect
   })));
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
 
 // packages/ui/react-ui-list/src/components/Tree/Tree.tsx
-var Tree = ({ items, open, current, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, renderColumns, canDrop, onOpenChange, onSelect }) => {
+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 = useMemo2(() => ({
+    getItems,
+    getProps,
+    isOpen,
+    isCurrent
+  }), [
+    getItems,
+    getProps,
+    isOpen,
+    isCurrent
+  ]);
+  const items = getItems();
+  const path = useMemo2(() => [
+    id
+  ], [
+    id
+  ]);
   return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
     gridTemplateColumns,
     classNames
-  }, items.map((item, i) => {
-    const path = Path.create(...item.path);
-    return /* @__PURE__ */ React8.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__ */ React8.createElement(TreeProvider, {
+    value: context
+  }, items.map((item, index) => /* @__PURE__ */ React8.createElement(TreeItem, {
+    key: item.id,
+    item,
+    last: index === items.length - 1,
+    path,
+    draggable: draggable2,
+    renderColumns,
+    canDrop,
+    onOpenChange,
+    onSelect
+  }))));
 };
-
-// packages/ui/react-ui-list/src/components/Tree/types.ts
-import { S } from "@dxos/echo-schema";
-var LabelSchema = S.Union(S.String, S.Tuple(S.String, S.Struct({
-  ns: S.String,
-  count: S.optional(S.Number)
-})));
-var ItemSchema = S.mutable(S.Struct({
-  id: S.String,
-  label: S.mutable(LabelSchema),
-  icon: S.optional(S.String),
-  disabled: S.optional(S.Boolean),
-  className: S.optional(S.String),
-  headingClassName: S.optional(S.String),
-  testId: S.optional(S.String),
-  path: S.Array(S.String),
-  parentOf: S.optional(S.Array(S.String))
-}));
-var isItem = S.is(ItemSchema);
 export {
-  ItemSchema,
   List,
   RawTreeItem,
   Tree,
+  TreeDataSchema,
   TreeItem,
-  isItem
+  TreeProvider,
+  isTreeData,
+  useTree
 };
 //# sourceMappingURL=index.mjs.map