@dxos/react-ui-list 0.8.4-main.69d29f4 → 0.8.4-main.6fa680abb7

package/dist/lib/node-esm/index.mjs

@@ -46,7 +46,7 @@ var AccordionItemHeader = ({ classNames, children, ...props }) => {
     ...props,
     className: mx2(classNames)
   }, /* @__PURE__ */ React2.createElement(AccordionPrimitive2.Trigger, {
-    className: "group flex items-center p-2 dx-focus-ring-inset is-full text-start"
+    className: "group flex items-center p-2 dx-focus-ring-inset w-full text-start"
   }, children, /* @__PURE__ */ React2.createElement(Icon, {
     icon: "ph--caret-right--regular",
     size: 4,
@@ -157,7 +157,7 @@ var idle = {
   type: "idle"
 };
 var stateStyles = {
-  "is-dragging": "opacity-50"
+  "w-dragging": "opacity-50"
 };
 var defaultContext = {};
 var LIST_ITEM_NAME = "ListItem";
@@ -216,10 +216,10 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         } : void 0,
         onDragStart: () => {
           setState({
-            type: "is-dragging"
+            type: "w-dragging"
           });
           setRootState({
-            type: "is-dragging",
+            type: "w-dragging",
             item
           });
         },
@@ -250,7 +250,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         onDragEnter: ({ self }) => {
           const closestEdge = extractClosestEdge2(self.data);
           setState({
-            type: "is-dragging-over",
+            type: "w-dragging-over",
             closestEdge
           });
         },
@@ -260,11 +260,11 @@ var ListItem = ({ children, classNames, item, ...props }) => {
         onDrag: ({ self }) => {
           const closestEdge = extractClosestEdge2(self.data);
           setState((current) => {
-            if (current.type === "is-dragging-over" && current.closestEdge === closestEdge) {
+            if (current.type === "w-dragging-over" && current.closestEdge === closestEdge) {
               return current;
             }
             return {
-              type: "is-dragging-over",
+              type: "w-dragging-over",
               closestEdge
             };
           });
@@ -285,7 +285,7 @@ var ListItem = ({ children, classNames, item, ...props }) => {
     role: "listitem",
     className: mx3("flex relative", classNames, stateStyles[state.type]),
     ...props
-  }, children, state.type === "is-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
+  }, children, state.type === "w-dragging-over" && state.closestEdge && /* @__PURE__ */ React4.createElement(NaturalListItem.DropIndicator, {
     edge: state.closestEdge
   })));
 };
@@ -339,7 +339,7 @@ var ListItemDragPreview = ({ children }) => {
   }), state.container) : null;
 };
 var ListItemWrapper = ({ classNames, children }) => /* @__PURE__ */ React4.createElement("div", {
-  className: mx3("flex is-full gap-2", classNames)
+  className: mx3("flex w-full gap-2", classNames)
 }, children);
 var ListItemTitle = ({ classNames, children, ...props }) => /* @__PURE__ */ React4.createElement("div", {
   className: mx3("flex grow items-center truncate", classNames),
@@ -359,6 +359,7 @@ var List = {
 };
 
 // src/components/Tree/Tree.tsx
+import { useAtomValue as useAtomValue2 } from "@effect-atom/atom-react";
 import React8, { useMemo as useMemo2 } from "react";
 import { Treegrid as Treegrid2 } from "@dxos/react-ui";
 
@@ -373,11 +374,12 @@ var useTree = () => useContext(TreeContext) ?? raise(new Error("TreeContext not
 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 { useAtomValue } from "@effect-atom/atom-react";
 import * as Schema from "effect/Schema";
 import React7, { memo as memo3, useCallback as useCallback3, useEffect as useEffect3, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { invariant as invariant2 } from "@dxos/invariant";
 import { TreeItem as NaturalTreeItem, Treegrid } from "@dxos/react-ui";
-import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls } from "@dxos/ui-theme";
+import { ghostFocusWithin, ghostHover, hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/ui-theme";
 
 // src/components/Tree/helpers.ts
 var DEFAULT_INDENTATION = 8;
@@ -419,7 +421,7 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
     variant: "ghost",
     density: "fine",
     classNames: [
-      "grow gap-2 pis-0.5 hover:bg-transparent dark:hover:bg-transparent",
+      "grow gap-2 ps-0.5 hover:bg-transparent dark:hover:bg-transparent",
       "disabled:cursor-default disabled:opacity-100",
       className
     ],
@@ -433,11 +435,11 @@ var TreeItemHeading = /* @__PURE__ */ memo(/* @__PURE__ */ forwardRef(({ label,
     icon: icon ?? "ph--placeholder--regular",
     size: 5,
     classNames: [
-      "mlb-1",
-      styles?.icon
+      "my-1",
+      styles?.surfaceText
     ]
   }), /* @__PURE__ */ React5.createElement("span", {
-    className: "flex-1 is-0 truncate text-start text-sm font-normal",
+    className: "flex-1 w-0 truncate text-start font-normal",
     "data-tooltip": true
   }, toLocalizedString(label, t))));
 }));
@@ -453,7 +455,7 @@ var TreeItemToggle = /* @__PURE__ */ memo2(/* @__PURE__ */ forwardRef2(({ open,
     variant: "ghost",
     density: "fine",
     classNames: [
-      "bs-full is-6 pli-0",
+      "h-full w-6 px-0",
       "[&_svg]:transition-[transform] [&_svg]:duration-200",
       open && "[&_svg]:rotate-90",
       hidden ? "hidden" : !isBranch && "invisible",
@@ -478,7 +480,7 @@ var TreeDataSchema = Schema.Struct({
   item: Schema.Any
 });
 var isTreeData = (data) => Schema.is(TreeDataSchema)(data);
-var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _draggable, renderColumns: Columns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect }) => {
+var RawTreeItem = ({ item, path: pathProp, levelOffset = 2, last, draggable: draggableProp, renderColumns: Columns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
   const rowRef = useRef2(null);
   const buttonRef = useRef2(null);
   const openRef = useRef2(false);
@@ -486,18 +488,18 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
   const [_state, setState] = useState3("idle");
   const [instruction, setInstruction] = useState3(null);
   const [menuOpen, setMenuOpen] = useState3(false);
-  const { useItems, getProps, useIsOpen, useIsCurrent } = useTree();
-  const items = useItems(item);
-  const { id, parentOf, label, className, headingClassName, icon, iconHue, disabled, testId } = getProps(item, _path);
+  const { itemProps: itemPropsAtom, childIds: childIdsAtom, itemOpen: itemOpenAtom, itemCurrent: itemCurrentAtom } = useTree();
   const path = useMemo(() => [
-    ..._path,
-    id
+    ...pathProp,
+    item.id
   ], [
-    _path,
-    id
+    pathProp,
+    item.id
   ]);
-  const open = useIsOpen(path, item);
-  const current = useIsCurrent(path, item);
+  const { id, parentOf, draggable: itemDraggable, droppable: itemDroppable, label, className, headingClassName, icon, iconHue, disabled, testId } = useAtomValue(itemPropsAtom(path));
+  const childIds = useAtomValue(childIdsAtom(item.id));
+  const open = useAtomValue(itemOpenAtom(path));
+  const current = useAtomValue(itemCurrentAtom(path));
   const level = path.length - levelOffset;
   const isBranch = !!parentOf;
   const mode = last ? "last-in-group" : open ? "expanded" : "standard";
@@ -505,122 +507,130 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     item,
     path
   }) ?? true;
+  const data = {
+    id,
+    path,
+    item
+  };
   const cancelExpand = useCallback3(() => {
     if (cancelExpandRef.current) {
       clearTimeout(cancelExpandRef.current);
       cancelExpandRef.current = null;
     }
   }, []);
+  const isItemDraggable = draggableProp && itemDraggable !== false;
+  const isItemDroppable = itemDroppable !== false;
   useEffect3(() => {
-    if (!_draggable) {
+    if (!draggableProp) {
       return;
     }
     invariant2(buttonRef.current, void 0, {
       F: __dxlog_file2,
-      L: 111,
+      L: 148,
       S: void 0,
       A: [
         "buttonRef.current",
         ""
       ]
     });
-    const data = {
-      id,
-      path,
-      item
-    };
-    return combine2(
-      draggable2({
-        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
-            });
-          }
-        }
-      }),
-      // https://github.com/atlassian/pragmatic-drag-and-drop/blob/main/packages/hitbox/constellation/index/about.mdx
-      dropTargetForElements2({
-        element: buttonRef.current,
-        getData: ({ input, element }) => {
-          return attachInstruction(data, {
-            input,
-            element,
-            indentPerLevel: DEFAULT_INDENTATION,
-            currentLevel: level,
-            mode,
-            block: isBranch ? [] : [
-              "make-child"
-            ]
+    const makeDraggable = () => draggable2({
+      element: buttonRef.current,
+      getInitialData: () => data,
+      onDragStart: () => {
+        setState("dragging");
+        if (open) {
+          openRef.current = true;
+          onOpenChange?.({
+            item,
+            path,
+            open: false
           });
-        },
-        canDrop: ({ source }) => {
-          const _canDrop = canDrop ?? (() => true);
-          return source.element !== buttonRef.current && _canDrop({
-            source: source.data,
-            target: data
-          });
-        },
-        getIsSticky: () => true,
-        onDrag: ({ self, source }) => {
-          const desired = extractInstruction(self.data);
-          const block = desired && blockInstruction?.({
-            instruction: desired,
-            source: source.data,
-            target: data
+        }
+      },
+      onDrop: () => {
+        setState("idle");
+        if (openRef.current) {
+          onOpenChange?.({
+            item,
+            path,
+            open: true
           });
-          const instruction2 = block && desired.type !== "instruction-blocked" ? {
-            type: "instruction-blocked",
-            desired
-          } : desired;
-          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);
+        }
+      }
+    });
+    if (!isItemDroppable) {
+      return isItemDraggable ? makeDraggable() : void 0;
+    }
+    const dropTarget = dropTargetForElements2({
+      element: buttonRef.current,
+      getData: ({ input, element }) => {
+        return 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: source.data,
+          target: data
+        });
+      },
+      getIsSticky: () => true,
+      onDrag: ({ self, source }) => {
+        const desired = extractInstruction(self.data);
+        const block = desired && blockInstruction?.({
+          instruction: desired,
+          source: source.data,
+          target: data
+        });
+        const instruction2 = block && desired.type !== "instruction-blocked" ? {
+          type: "instruction-blocked",
+          desired
+        } : desired;
+        if (source.data.id !== id) {
+          if (instruction2?.type === "make-child" && isBranch && !open && !cancelExpandRef.current) {
+            cancelExpandRef.current = setTimeout(() => {
+              onOpenChange?.({
+                item,
+                path,
+                open: true
+              });
+            }, 500);
           }
-        },
-        onDragLeave: () => {
-          cancelExpand();
-          setInstruction(null);
-        },
-        onDrop: () => {
-          cancelExpand();
+          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);
+      }
+    });
+    if (!isItemDraggable) {
+      return dropTarget;
+    }
+    return combine2(makeDraggable(), dropTarget);
   }, [
-    _draggable,
+    draggableProp,
+    isItemDraggable,
+    isItemDroppable,
     item,
     id,
     mode,
@@ -680,33 +690,46 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
     handleOpenToggle,
     handleSelect
   ]);
+  const handleItemHover = useCallback3(() => {
+    onItemHover?.({
+      item
+    });
+  }, [
+    onItemHover,
+    item
+  ]);
+  const handleContextMenu = useCallback3((event) => {
+    event.preventDefault();
+    setMenuOpen(true);
+  }, [
+    setMenuOpen
+  ]);
+  const childProps = {
+    draggable: draggableProp,
+    renderColumns: Columns,
+    blockInstruction,
+    canDrop,
+    canSelect,
+    onItemHover,
+    onOpenChange,
+    onSelect
+  };
   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: [
-      "grid grid-cols-subgrid col-[tree-row] mbs-0.5 aria-[current]:bg-activeSurface",
-      hoverableControls,
-      hoverableFocusedKeyboardControls,
-      hoverableFocusedWithinControls,
-      hoverableDescriptionIcons,
-      ghostHover,
-      ghostFocusWithin,
-      className
-    ],
     "data-object-id": 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
     "aria-current": current ? "" : void 0,
+    classNames: mx4("grid grid-cols-subgrid col-[tree-row] mt-0.5 is-current:bg-active-surface", hoverableControls, hoverableFocusedKeyboardControls, hoverableFocusedWithinControls, hoverableDescriptionIcons, ghostFocusWithin, ghostHover, className),
     onKeyDown: handleKeyDown,
-    onContextMenu: (event) => {
-      event.preventDefault();
-      setMenuOpen(true);
-    }
+    onMouseEnter: handleItemHover,
+    onContextMenu: handleContextMenu
   }, /* @__PURE__ */ React7.createElement("div", {
     role: "none",
     className: "indent relative grid grid-cols-subgrid col-[tree-row]",
@@ -735,36 +758,31 @@ var RawTreeItem = ({ item, path: _path, levelOffset = 2, last, draggable: _dragg
   }), instruction && /* @__PURE__ */ React7.createElement(NaturalTreeItem.DropIndicator, {
     instruction,
     gap: 2
-  }))), open && items.map((item2, index) => /* @__PURE__ */ React7.createElement(TreeItem, {
-    key: item2.id,
-    item: item2,
+  }))), open && childIds.map((childId, index) => /* @__PURE__ */ React7.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
     path,
-    last: index === items.length - 1,
-    draggable: _draggable,
-    renderColumns: Columns,
-    blockInstruction,
-    canDrop,
-    canSelect,
-    onOpenChange,
-    onSelect
+    last: index === childIds.length - 1,
+    ...childProps
   })));
 };
 var TreeItem = /* @__PURE__ */ memo3(RawTreeItem);
+var RawTreeItemById = ({ id, ...props }) => {
+  const { item: itemAtom } = useTree();
+  const item = useAtomValue(itemAtom(id));
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ React7.createElement(TreeItem, {
+    item,
+    ...props
+  });
+};
+var TreeItemById = /* @__PURE__ */ memo3(RawTreeItemById);
 
 // src/components/Tree/Tree.tsx
-var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect }) => {
-  const context = useMemo2(() => ({
-    useItems,
-    getProps,
-    useIsOpen,
-    useIsCurrent
-  }), [
-    useItems,
-    getProps,
-    useIsOpen,
-    useIsCurrent
-  ]);
-  const items = useItems(root);
+var Tree = ({ model, rootId, path, id, draggable: draggable3 = false, gridTemplateColumns = "[tree-row-start] 1fr min-content [tree-row-end]", classNames, levelOffset, renderColumns, blockInstruction, canDrop, canSelect, onOpenChange, onSelect, onItemHover }) => {
+  const childIds = useAtomValue2(model.childIds(rootId));
   const treePath = useMemo2(() => path ? [
     ...path,
     id
@@ -774,15 +792,7 @@ var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, dragg
     id,
     path
   ]);
-  return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
-    gridTemplateColumns,
-    classNames
-  }, /* @__PURE__ */ React8.createElement(TreeProvider, {
-    value: context
-  }, items.map((item, index) => /* @__PURE__ */ React8.createElement(TreeItem, {
-    key: item.id,
-    item,
-    last: index === items.length - 1,
+  const childProps = {
     path: treePath,
     levelOffset,
     draggable: draggable3,
@@ -791,7 +801,19 @@ var Tree = ({ root, path, id, useItems, getProps, useIsOpen, useIsCurrent, dragg
     canDrop,
     canSelect,
     onOpenChange,
-    onSelect
+    onSelect,
+    onItemHover
+  };
+  return /* @__PURE__ */ React8.createElement(Treegrid2.Root, {
+    gridTemplateColumns,
+    classNames
+  }, /* @__PURE__ */ React8.createElement(TreeProvider, {
+    value: model
+  }, childIds.map((childId, index) => /* @__PURE__ */ React8.createElement(TreeItemById, {
+    key: childId,
+    id: childId,
+    last: index === childIds.length - 1,
+    ...childProps
   }))));
 };
 
@@ -812,13 +834,17 @@ var Path = {
 };
 export {
   Accordion,
+  DEFAULT_INDENTATION,
   List,
   Path,
   Tree,
   TreeDataSchema,
   TreeItem,
+  TreeItemById,
+  TreeItemToggle,
   TreeProvider,
   isTreeData,
+  paddingIndentation,
   useTree
 };
 //# sourceMappingURL=index.mjs.map