@dxos/react-ui-list 0.7.4 → 0.7.5-main.9cb18ac

package/dist/lib/node/index.cjs

@@ -48,73 +48,35 @@ var import_react_dom = require("react-dom");
 var import_invariant = require("@dxos/invariant");
 var import_react_ui = require("@dxos/react-ui");
 var import_react_ui_theme = require("@dxos/react-ui-theme");
-var import_react2 = __toESM(require("react"));
-var import_react_ui_theme2 = require("@dxos/react-ui-theme");
 var import_adapter2 = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var import_closest_edge2 = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge");
 var import_get_reorder_destination_index = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/get-reorder-destination-index");
 var import_react_context2 = require("@radix-ui/react-context");
+var import_react2 = __toESM(require("react"));
 var import_react3 = __toESM(require("react"));
-var import_react4 = __toESM(require("react"));
 var import_react_ui2 = require("@dxos/react-ui");
-var import_react5 = require("react");
+var import_react4 = 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_react6 = __toESM(require("react"));
+var import_react5 = __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_react7 = __toESM(require("react"));
-var import_react_ui_theme4 = require("@dxos/react-ui-theme");
-var import_react8 = __toESM(require("react"));
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react6 = __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_react9 = __toESM(require("react"));
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react7 = __toESM(require("react"));
 var import_react_ui5 = require("@dxos/react-ui");
-var import_react_ui_theme6 = require("@dxos/react-ui-theme");
-var edgeToOrientationMap = {
-  top: "horizontal",
-  bottom: "horizontal",
-  left: "vertical",
-  right: "vertical"
-};
-var orientationStyles = {
-  horizontal: "h-[--line-thickness] left-[--terminal-radius] right-0 before:left-[--negative-terminal-size]",
-  vertical: "w-[--line-thickness] top-[--terminal-radius] bottom-0 before:top-[--negative-terminal-size]"
-};
-var edgeStyles = {
-  top: "top-[--line-offset] before:top-[--offset-terminal]",
-  right: "right-[--line-offset] before:right-[--offset-terminal]",
-  bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
-  left: "left-[--line-offset] before:left-[--offset-terminal]"
-};
-var strokeSize = 2;
-var terminalSize = 8;
-var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
-var DropIndicator = ({ edge, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize}px))`;
-  const orientation = edgeToOrientationMap[edge];
-  return /* @__PURE__ */ import_react2.default.createElement("div", {
-    style: {
-      "--line-thickness": `${strokeSize}px`,
-      "--line-offset": `${lineOffset}`,
-      "--terminal-size": `${terminalSize}px`,
-      "--terminal-radius": `${terminalSize / 2}px`,
-      "--negative-terminal-size": `-${terminalSize}px`,
-      "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
-    },
-    className: (0, import_react_ui_theme2.mx)("absolute z-10 pointer-events-none bg-blue-700", "before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute", "before:border-[length:--line-thickness] before:border-solid before:border-blue-700 before:rounded-full", orientationStyles[orientation], edgeStyles[edge])
-  });
-};
+var import_react_ui_theme4 = require("@dxos/react-ui-theme");
 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, getId = defaultGetId, onMove, ...props }) => {
-  const isEqual = (0, import_react3.useCallback)((a, b) => {
+  const isEqual = (0, import_react2.useCallback)((a, b) => {
     const idA = getId?.(a);
     const idB = getId?.(b);
     if (idA !== void 0 && idB !== void 0) {
@@ -125,8 +87,8 @@ var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onM
   }, [
     getId
   ]);
-  const [state, setState] = (0, import_react3.useState)(idle);
-  (0, import_react3.useEffect)(() => {
+  const [state, setState] = (0, import_react2.useState)(idle);
+  (0, import_react2.useEffect)(() => {
     if (!items) {
       return;
     }
@@ -162,7 +124,7 @@ var ListRoot = ({ classNames, children, items, isItem, getId = defaultGetId, onM
     isEqual,
     onMove
   ]);
-  return /* @__PURE__ */ import_react3.default.createElement(ListProvider, {
+  return /* @__PURE__ */ import_react2.default.createElement(ListProvider, {
     isItem,
     state,
     setState,
@@ -191,7 +153,7 @@ var ListItem = ({ children, classNames, item }) => {
     const element = ref.current;
     (0, import_invariant.invariant)(element, void 0, {
       F: __dxlog_file,
-      L: 91,
+      L: 90,
       S: void 0,
       A: [
         "element",
@@ -228,6 +190,8 @@ var ListItem = ({ children, classNames, item }) => {
                 container,
                 item
               });
+              return () => {
+              };
             }
           });
         } : void 0,
@@ -303,7 +267,7 @@ var ListItem = ({ children, classNames, item }) => {
     ref,
     role: "listitem",
     className: (0, import_react_ui_theme.mx)("flex overflow-hidden", classNames, stateStyles[state.type])
-  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(DropIndicator, {
+  }, children), state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ import_react.default.createElement(import_react_ui.ListItem.DropIndicator, {
     edge: state.closestEdge
   })));
 };
@@ -361,59 +325,17 @@ 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 TreeContext = /* @__PURE__ */ (0, import_react4.createContext)(null);
+var useTree = () => (0, import_react4.useContext)(TreeContext) ?? (0, import_debug.raise)(new Error("TreeContext not found"));
 var TreeProvider = TreeContext.Provider;
-var edgeToOrientationMap2 = {
-  "reorder-above": "sibling",
-  "reorder-below": "sibling",
-  "make-child": "child",
-  reparent: "child"
-};
-var orientationStyles2 = {
-  // TODO(wittjosiah): Stop using left/right here.
-  sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
-  child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
-};
-var instructionStyles = {
-  "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
-  "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
-  "make-child": "border-accentSurface",
-  // TODO(wittjosiah): This is not occurring in the current implementation.
-  reparent: ""
-};
-var strokeSize2 = 2;
-var terminalSize2 = 8;
-var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
-var DropIndicator2 = ({ instruction, gap = 0 }) => {
-  const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
-  const isBlocked = instruction.type === "instruction-blocked";
-  const desiredInstruction = isBlocked ? instruction.desired : instruction;
-  const orientation = edgeToOrientationMap2[desiredInstruction.type];
-  if (isBlocked) {
-    return null;
-  }
-  return /* @__PURE__ */ import_react7.default.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: (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_react8.memo)(/* @__PURE__ */ (0, import_react8.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
+var TreeItemHeading = /* @__PURE__ */ (0, import_react6.memo)(/* @__PURE__ */ (0, import_react6.forwardRef)(({ label, icon, className, disabled, current, onSelect }, forwardedRef) => {
   const { t } = (0, import_react_ui4.useTranslation)();
-  const handleSelect = (0, import_react8.useCallback)((event) => {
+  const handleSelect = (0, import_react6.useCallback)((event) => {
     onSelect?.(event.altKey);
   }, [
     onSelect
   ]);
-  const handleButtonKeydown = (0, import_react8.useCallback)((event) => {
+  const handleButtonKeydown = (0, import_react6.useCallback)((event) => {
     if (event.key === " " || event.key === "Enter") {
       event.preventDefault();
       event.stopPropagation();
@@ -422,46 +344,46 @@ var TreeItemHeading = /* @__PURE__ */ (0, import_react8.memo)(/* @__PURE__ */ (0
   }, [
     onSelect
   ]);
-  return /* @__PURE__ */ import_react8.default.createElement(import_react_ui_text_tooltip.TextTooltip, {
+  return /* @__PURE__ */ import_react6.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_react8.default.createElement(import_react_ui4.Button, {
+  }, /* @__PURE__ */ import_react6.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),
+    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,
     ...current && {
       "aria-current": "location"
     }
-  }, icon && /* @__PURE__ */ import_react8.default.createElement(import_react_ui4.Icon, {
+  }, icon && /* @__PURE__ */ import_react6.default.createElement(import_react_ui4.Icon, {
     icon: icon ?? "ph--placeholder--regular",
     size: 4,
     classNames: "is-[1em] bs-[1em] mlb-1"
-  }), /* @__PURE__ */ import_react8.default.createElement("span", {
+  }), /* @__PURE__ */ import_react6.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_react9.memo)(/* @__PURE__ */ (0, import_react9.forwardRef)(({ open, isBranch, onToggle }, forwardedRef) => {
-  return /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Button, {
+var TreeItemToggle = /* @__PURE__ */ (0, import_react7.memo)(/* @__PURE__ */ (0, import_react7.forwardRef)(({ open, isBranch, 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_theme6.mx)("is-6 !pli-1", !isBranch && "invisible"),
+    classNames: (0, import_react_ui_theme4.mx)("is-6 !pli-1", !isBranch && "invisible"),
     onClick: onToggle
-  }, /* @__PURE__ */ import_react9.default.createElement(import_react_ui5.Icon, {
+  }, /* @__PURE__ */ import_react7.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")
+    classNames: (0, import_react_ui_theme4.mx)("transition duration-200", open && "rotate-90")
   }));
 }));
 var DEFAULT_INDENTATION = 8;
@@ -480,7 +402,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
   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)(() => [
+  const path = (0, import_react5.useMemo)(() => [
     ..._path,
     id
   ], [
@@ -492,7 +414,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
   const level = path.length - 2;
   const isBranch = !!parentOf;
   const mode = last ? "last-in-group" : open ? "expanded" : "standard";
-  const data = (0, import_react6.useMemo)(() => ({
+  const data = (0, import_react5.useMemo)(() => ({
     id,
     path,
     item
@@ -501,26 +423,26 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     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)(() => {
+  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)(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
     }
   }, []);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!draggable2) {
       return;
     }
     (0, import_invariant2.invariant)(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 104,
+      L: 109,
       S: void 0,
       A: [
         "buttonRef.current",
@@ -610,10 +532,10 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     open,
     canDrop
   ]);
-  (0, import_react6.useEffect)(() => () => cancelExpand(), [
+  (0, import_react5.useEffect)(() => () => cancelExpand(), [
     cancelExpand
   ]);
-  const handleOpenChange = (0, import_react6.useCallback)(() => onOpenChange?.({
+  const handleOpenChange = (0, import_react5.useCallback)(() => onOpenChange?.({
     item,
     path,
     open: !open
@@ -623,7 +545,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     path,
     open
   ]);
-  const handleSelect = (0, import_react6.useCallback)((option = false) => {
+  const handleSelect = (0, import_react5.useCallback)((option = false) => {
     rowRef.current?.focus();
     onSelect?.({
       item,
@@ -637,7 +559,7 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     path,
     current
   ]);
-  const handleKeyDown = (0, import_react6.useCallback)((event) => {
+  const handleKeyDown = (0, import_react5.useCallback)((event) => {
     switch (event.key) {
       case "ArrowRight":
         isBranch && !open && handleOpenChange();
@@ -655,13 +577,13 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     handleOpenChange,
     handleSelect
   ]);
-  return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Treegrid.Row, {
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.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),
+    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),
     "data-itemid": id,
     "data-testid": testId,
     // NOTE(thure): This is intentionally an empty string to for descendents to select by in the CSS
@@ -673,18 +595,18 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
       event.preventDefault();
       setMenuOpen(true);
     }
-  }, /* @__PURE__ */ import_react6.default.createElement(import_react_ui3.Treegrid.Cell, {
+  }, /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.Treegrid.Cell, {
     indent: true,
     classNames: "relative grid grid-cols-subgrid col-[tree-row]",
     style: paddingIndendation(level)
-  }, /* @__PURE__ */ import_react6.default.createElement("div", {
+  }, /* @__PURE__ */ import_react5.default.createElement("div", {
     role: "none",
     className: "flex items-center"
-  }, /* @__PURE__ */ import_react6.default.createElement(TreeItemToggle, {
+  }, /* @__PURE__ */ import_react5.default.createElement(TreeItemToggle, {
     open,
     isBranch,
     onToggle: handleOpenChange
-  }), /* @__PURE__ */ import_react6.default.createElement(TreeItemHeading, {
+  }), /* @__PURE__ */ import_react5.default.createElement(TreeItemHeading, {
     ref: buttonRef,
     label,
     icon,
@@ -692,15 +614,16 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     disabled,
     current,
     onSelect: handleSelect
-  })), Columns && /* @__PURE__ */ import_react6.default.createElement(Columns, {
+  })), Columns && /* @__PURE__ */ import_react5.default.createElement(Columns, {
     item,
     path,
+    open,
     menuOpen,
     setMenuOpen
-  }), instruction && /* @__PURE__ */ import_react6.default.createElement(DropIndicator2, {
+  }), instruction && /* @__PURE__ */ import_react5.default.createElement(import_react_ui3.TreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ import_react6.default.createElement(TreeItem, {
+  }))), open && items.map((item2, index) => /* @__PURE__ */ import_react5.default.createElement(TreeItem, {
     key: item2.id,
     item: item2,
     path,
@@ -712,9 +635,9 @@ var RawTreeItem = ({ item, path: _path, last, draggable: draggable2, renderColum
     onSelect
   })));
 };
-var TreeItem = /* @__PURE__ */ (0, import_react6.memo)(RawTreeItem);
+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 }) => {
-  const context = (0, import_react4.useMemo)(() => ({
+  const context = (0, import_react3.useMemo)(() => ({
     getItems,
     getProps,
     isOpen,
@@ -726,17 +649,17 @@ var Tree = ({ id, getItems, getProps, isOpen, isCurrent, draggable: draggable2 =
     isCurrent
   ]);
   const items = getItems();
-  const path = (0, import_react4.useMemo)(() => [
+  const path = (0, import_react3.useMemo)(() => [
     id
   ], [
     id
   ]);
-  return /* @__PURE__ */ import_react4.default.createElement(import_react_ui2.Treegrid.Root, {
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Treegrid.Root, {
     gridTemplateColumns,
     classNames
-  }, /* @__PURE__ */ import_react4.default.createElement(TreeProvider, {
+  }, /* @__PURE__ */ import_react3.default.createElement(TreeProvider, {
     value: context
-  }, items.map((item, index) => /* @__PURE__ */ import_react4.default.createElement(TreeItem, {
+  }, items.map((item, index) => /* @__PURE__ */ import_react3.default.createElement(TreeItem, {
     key: item.id,
     item,
     last: index === items.length - 1,