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

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 = "0px" }) => {
-  const lineOffset = `calc(-0.5 * (${gap} + ${strokeSize}px))`;
+var DropIndicator = ({ edge, gap: gap2 = "0px" }) => {
+  const lineOffset = `calc(-0.5 * (${gap2} + ${strokeSize}px))`;
   const orientation = edgeToOrientationMap[edge];
   return /* @__PURE__ */ React.createElement("div", {
     style: {
@@ -51,19 +51,31 @@ var DropIndicator = ({ edge, gap = "0px" }) => {
 // 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 { reorderWithEdge } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge";
+import { getReorderDestinationIndex } from "@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index";
 import { createContext } from "@radix-ui/react-context";
-import React2, { useEffect, useState } from "react";
-import { flushSync } from "react-dom";
-import { useControlledValue } from "@dxos/react-ui";
+import React2, { useCallback, useEffect, useState } from "react";
 var LIST_NAME = "List";
 var [ListProvider, useListContext] = createContext(LIST_NAME);
-var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props }) => {
-  const [items, setItems] = useControlledValue(_items);
+var defaultGetId = (item) => item?.id;
+var ListRoot = ({ classNames, children, items, isItem: isItem2, getId = defaultGetId, onMove, ...props }) => {
+  const isEqual = useCallback((a, b) => {
+    const idA = getId?.(a);
+    const idB = getId?.(b);
+    if (idA !== void 0 && idB !== void 0) {
+      return idA === idB;
+    } else {
+      return a === b;
+    }
+  }, [
+    getId
+  ]);
   const [state, setState] = useState(idle);
   useEffect(() => {
+    if (!items) {
+      return;
+    }
     return monitorForElements({
-      canMonitor: ({ source }) => isItem(source.data),
+      canMonitor: ({ source }) => isItem2(source.data),
       onDrop: ({ location, source }) => {
         const target = location.current.dropTargets[0];
         if (!target) {
@@ -71,37 +83,37 @@ var ListRoot = ({ classNames, children, items: _items = [], isItem, ...props })
         }
         const sourceData = source.data;
         const targetData = target.data;
-        if (!isItem(sourceData) || !isItem(targetData)) {
+        if (!isItem2(sourceData) || !isItem2(targetData)) {
           return;
         }
-        const sourceIdx = items.findIndex((item) => item.id === sourceData.id);
-        const targetIdx = items.findIndex((item) => item.id === targetData.id);
+        const sourceIdx = items.findIndex((item) => isEqual(item, sourceData));
+        const targetIdx = items.findIndex((item) => isEqual(item, targetData));
         if (targetIdx < 0 || sourceIdx < 0) {
           return;
         }
         const closestEdgeOfTarget = extractClosestEdge(targetData);
-        flushSync(() => {
-          setItems(reorderWithEdge({
-            list: items,
-            startIndex: sourceIdx,
-            indexOfTarget: targetIdx,
-            axis: "vertical",
-            closestEdgeOfTarget
-          }));
+        const destinationIndex = getReorderDestinationIndex({
+          closestEdgeOfTarget,
+          startIndex: sourceIdx,
+          indexOfTarget: targetIdx,
+          axis: "vertical"
         });
+        onMove?.(sourceIdx, destinationIndex);
       }
     });
   }, [
-    items
+    items,
+    isEqual,
+    onMove
   ]);
   return /* @__PURE__ */ React2.createElement(ListProvider, {
-    isItem,
+    isItem: isItem2,
     state,
     setState,
     ...props
   }, children?.({
     state,
-    items
+    items: items ?? []
   }));
 };
 
@@ -117,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, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
+  const { isItem: isItem2, dragPreview, setState: setRootState } = useListContext(LIST_ITEM_NAME);
   const ref = useRef(null);
   const dragHandleRef = useRef(null);
   const [state, setState] = useState2(idle);
@@ -125,7 +137,7 @@ var ListItem = ({ children, classNames, item }) => {
     const element = ref.current;
     invariant(element, void 0, {
       F: __dxlog_file,
-      L: 89,
+      L: 91,
       S: void 0,
       A: [
         "element",
@@ -185,7 +197,7 @@ var ListItem = ({ children, classNames, item }) => {
       dropTargetForElements({
         element,
         canDrop: ({ source }) => {
-          return source.element !== element && isItem(source.data);
+          return source.element !== element && isItem2(source.data);
         },
         getData: ({ input }) => {
           return attachClosestEdge(item, {
@@ -236,7 +248,7 @@ var ListItem = ({ children, classNames, item }) => {
   }, /* @__PURE__ */ React3.createElement("div", {
     ref,
     role: "listitem",
-    className: mx2("flex", classNames, stateStyles[state.type])
+    className: mx2("flex overflow-hidden", classNames, stateStyles[state.type])
   }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React3.createElement(DropIndicator, {
     edge: state.closestEdge
   })));
@@ -269,7 +281,7 @@ var ListItemDragHandle = () => {
   const { dragHandleRef } = useListItemContext("DRAG_HANDLE");
   return /* @__PURE__ */ React3.createElement(IconButton, {
     ref: dragHandleRef,
-    icon: "ph--dots-six--regular"
+    icon: "ph--dots-six-vertical--regular"
   });
 };
 var ListItemDragPreview = ({ children }) => {
@@ -279,10 +291,10 @@ var ListItemDragPreview = ({ children }) => {
   }), state.container) : null;
 };
 var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex w-full", classNames)
+  className: mx2("flex is-full gap-2", classNames)
 }, children);
 var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React3.createElement("div", {
-  className: mx2("flex w-full items-center", classNames),
+  className: mx2("flex grow items-center truncate", classNames),
   ...props
 }, children);
 
@@ -297,7 +309,377 @@ var List = {
   ItemTitle: ListItemTitle,
   IconButton
 };
+
+// packages/ui/react-ui-list/src/components/Tree/Tree.tsx
+import React8 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/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 { 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 { invariant as invariant2 } from "@dxos/invariant";
+import { Treegrid } from "@dxos/react-ui";
+import { focusRing, 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 gap = "0px";
+var DropIndicator2 = ({ instruction }) => {
+  const lineOffset = `calc(-0.5 * (${gap} + ${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])
+  });
+};
+
+// packages/ui/react-ui-list/src/components/Tree/TreeItemHeading.tsx
+import React5, { 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";
+var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef2(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+  const { t } = useTranslation();
+  const handleButtonKeydown = useCallback2((event) => {
+    if (event.key === " " || event.key === "Enter") {
+      event.preventDefault();
+      event.stopPropagation();
+      onSelect?.();
+    }
+  }, [
+    onSelect
+  ]);
+  return /* @__PURE__ */ React5.createElement(TextTooltip, {
+    text: toLocalizedString(label, t),
+    side: "bottom",
+    truncateQuery: "span[data-tooltip]",
+    onlyWhenTruncating: true,
+    asChild: true,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement(Button, {
+    "data-testid": "treeItem.heading",
+    variant: "ghost",
+    density: "fine",
+    classNames: mx4("grow gap-1 !pis-0.5 hover:!bg-transparent dark:hover:!bg-transparent", className),
+    disabled,
+    onClick: onSelect,
+    onKeyDown: handleButtonKeydown,
+    ...current && {
+      "aria-current": "location"
+    }
+  }, icon && /* @__PURE__ */ React5.createElement(Icon2, {
+    icon: icon ?? "ph--placeholder--regular",
+    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"
+  }, toLocalizedString(label, t))));
+}));
+
+// packages/ui/react-ui-list/src/components/Tree/TreeItemToggle.tsx
+import React6, { 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, {
+    ref: forwardedRef,
+    "data-testid": "treeItem.toggle",
+    variant: "ghost",
+    density: "fine",
+    classNames: mx5("!pli-1", !isBranch && "invisible"),
+    onClick: onToggle
+  }, /* @__PURE__ */ React6.createElement(Icon3, {
+    icon: "ph--caret-right--regular",
+    size: 3,
+    classNames: mx5("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) => ({
+  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;
+  const level = path.length - 2;
+  const isBranch = !!parentOf;
+  const rowRef = useRef2(null);
+  const buttonRef = useRef2(null);
+  const openRef = useRef2(false);
+  const cancelExpandRef = useRef2(null);
+  const [_state, setState] = useState3("idle");
+  const [instruction, setInstruction] = useState3(null);
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const cancelExpand = useCallback3(() => {
+    if (cancelExpandRef.current) {
+      clearTimeout(cancelExpandRef.current);
+      cancelExpandRef.current = null;
+    }
+  }, []);
+  useEffect3(() => {
+    if (!_draggable) {
+      return;
+    }
+    invariant2(buttonRef.current, void 0, {
+      F: __dxlog_file2,
+      L: 86,
+      S: void 0,
+      A: [
+        "buttonRef.current",
+        ""
+      ]
+    });
+    return combine2(draggable2({
+      element: buttonRef.current,
+      getInitialData: () => item,
+      onDragStart: () => {
+        setState("dragging");
+        if (open) {
+          openRef.current = true;
+          onOpenChange?.(item, false);
+        }
+      },
+      onDrop: () => {
+        setState("idle");
+        if (openRef.current) {
+          onOpenChange?.(item, true);
+        }
+      }
+    }), dropTargetForElements2({
+      element: buttonRef.current,
+      getData: ({ input, element }) => {
+        return attachInstruction(item, {
+          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, item);
+      },
+      getIsSticky: () => true,
+      onDrag: ({ self, source }) => {
+        const instruction2 = extractInstruction(self.data);
+        if (source.data.id !== item.id) {
+          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
+              onOpenChange?.(item, true);
+            }, 500);
+          }
+          if (instruction2?.type !== "make-child") {
+            cancelExpand();
+          }
+          setInstruction(instruction2);
+        } else if (instruction2?.type === "reparent") {
+          setInstruction(instruction2);
+        } else {
+          setInstruction(null);
+        }
+      },
+      onDragLeave: () => {
+        cancelExpand();
+        setInstruction(null);
+      },
+      onDrop: () => {
+        cancelExpand();
+        setInstruction(null);
+      }
+    }));
+  }, [
+    draggable2,
+    item,
+    mode,
+    open,
+    canDrop
+  ]);
+  useEffect3(() => () => cancelExpand(), [
+    cancelExpand
+  ]);
+  const handleOpenChange = useCallback3(() => onOpenChange?.(item, !open), [
+    onOpenChange,
+    item,
+    open
+  ]);
+  const handleSelect = useCallback3(() => {
+    rowRef.current?.focus();
+    onSelect?.(item, !current);
+  }, [
+    onSelect,
+    item,
+    current
+  ]);
+  const handleKeyDown = useCallback3((event) => {
+    switch (event.key) {
+      case "ArrowRight":
+        isBranch && !open && handleOpenChange();
+        break;
+      case "ArrowLeft":
+        isBranch && open && handleOpenChange();
+        break;
+      case " ":
+        handleSelect();
+        break;
+    }
+  }, [
+    isBranch,
+    open,
+    handleOpenChange,
+    handleSelect
+  ]);
+  return /* @__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] aria-[current]:bg-input", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, focusRing, className),
+    "data-itemid": item.id,
+    "data-testid": item.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
+    "aria-current": current ? "" : void 0,
+    onKeyDown: handleKeyDown,
+    onContextMenu: (event) => {
+      event.preventDefault();
+      setMenuOpen(true);
+    }
+  }, /* @__PURE__ */ React7.createElement(Treegrid.Cell, {
+    indent: true,
+    classNames: "relative grid grid-cols-subgrid col-[tree-row]",
+    style: paddingIndendation(level)
+  }, /* @__PURE__ */ React7.createElement("div", {
+    role: "none",
+    className: "flex items-center"
+  }, /* @__PURE__ */ React7.createElement(TreeItemToggle, {
+    open,
+    isBranch,
+    onToggle: handleOpenChange
+  }), /* @__PURE__ */ React7.createElement(TreeItemHeading, {
+    ref: buttonRef,
+    label,
+    icon,
+    className: headingClassName,
+    disabled,
+    current,
+    onSelect: handleSelect
+  })), Columns && /* @__PURE__ */ React7.createElement(Columns, {
+    item,
+    menuOpen,
+    setMenuOpen
+  }), instruction && /* @__PURE__ */ React7.createElement(DropIndicator2, {
+    instruction
+  })));
+};
+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 }) => {
+  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
+    });
+  }));
+};
+
+// 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 {
-  List
+  ItemSchema,
+  List,
+  RawTreeItem,
+  Tree,
+  TreeItem,
+  isItem
 };
 //# sourceMappingURL=index.mjs.map