@inf-monkeys-tech/monkeys-design 0.4.42 → 0.4.44

package/dist/components/data-explorer/index.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
+var reactDom = require('react-dom');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1718,6 +1719,19 @@ function resolveTreeItemBorderRadius(itemRadius, appearanceRadius) {
   if (!radius) return void 0;
   return treeItemRadiusValues[radius] ?? radius;
 }
+function getEventClientPoint(event) {
+  if (!event) return void 0;
+  if ("clientX" in event && "clientY" in event) {
+    return {
+      x: Number(event.clientX),
+      y: Number(event.clientY)
+    };
+  }
+  const touchEvent = event;
+  const touch = touchEvent.touches?.[0] ?? touchEvent.changedTouches?.[0];
+  if (!touch) return void 0;
+  return { x: touch.clientX, y: touch.clientY };
+}
 function ChevronIcon({ expanded }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
@@ -1804,7 +1818,8 @@ function DraggableTreeItem({
   renderNodeActions,
   renderNodeChildren,
   onSelect,
-  onToggle
+  onToggle,
+  registerNodeElement
 }) {
   const { node, depth } = entry;
   const hasChildren = node.collapsible === true || Boolean(node.children?.length);
@@ -1815,6 +1830,7 @@ function DraggableTreeItem({
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging
@@ -1845,10 +1861,16 @@ function DraggableTreeItem({
     transform: utilities.CSS.Transform.toString(transform),
     transition
   };
+  const setRowRef = react.useCallback(
+    (element) => {
+      setNodeRef(element);
+      registerNodeElement?.(node.id, element);
+    },
+    [node.id, registerNodeElement, setNodeRef]
+  );
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      ref: setNodeRef,
       style,
       className: cn(
         "min-w-0",
@@ -1885,6 +1907,8 @@ function DraggableTreeItem({
             handleListeners,
             renderNodeActions,
             renderContext,
+            rowRef: setRowRef,
+            dragHandleRef: activationMode === "handle" ? setActivatorNodeRef : void 0,
             onSelect: () => onSelect?.(node),
             onToggle: () => onToggle(node.id)
           }
@@ -1929,12 +1953,15 @@ function TreeItemRow({
   handleListeners,
   renderNodeActions,
   renderContext,
+  rowRef,
+  dragHandleRef,
   onSelect,
   onToggle
 }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
+      ref: rowRef,
       "data-data-explorer-draggable-tree-item": true,
       className: cn(
         themeSlots.treeNodeButton,
@@ -1975,6 +2002,7 @@ function TreeItemRow({
         draggable ? /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
+            ref: dragHandleRef,
             className: cn(
               themeSlots.treeNodeDragHandle,
               "opacity-100",
@@ -2057,12 +2085,14 @@ function DataExplorerDraggableTree({
     () => buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
   );
   const [activeNodeId, setActiveNodeId] = react.useState();
-  const [activeNodeWidth, setActiveNodeWidth] = react.useState();
+  const [dragPreviewLayout, setDragPreviewLayout] = react.useState();
   const [overNodeId, setOverNodeId] = react.useState();
+  const nodeElementsRef = react.useRef(/* @__PURE__ */ new Map());
   const itemBorderRadius = resolveTreeItemBorderRadius(itemRadius, theme.radius);
   const itemStyle = itemBorderRadius ? { borderRadius: itemBorderRadius } : void 0;
   const overlayStyle = {
-    width: activeNodeWidth,
+    width: dragPreviewLayout?.width,
+    height: dragPreviewLayout?.height,
     borderRadius: itemBorderRadius
   };
   const sensors = core.useSensors(
@@ -2086,6 +2116,21 @@ function DataExplorerDraggableTree({
   }, [flattenedNodes]);
   const activeEntry = activeNodeId ? flattenedNodeMap.get(activeNodeId) : void 0;
   const sortableIds = flattenedNodes.map((entry) => entry.node.id);
+  const registerNodeElement = react.useCallback(
+    (nodeId, element) => {
+      if (element) {
+        nodeElementsRef.current.set(nodeId, element);
+      } else {
+        nodeElementsRef.current.delete(nodeId);
+      }
+    },
+    []
+  );
+  const clearDragState = react.useCallback(() => {
+    setActiveNodeId(void 0);
+    setDragPreviewLayout(void 0);
+    setOverNodeId(void 0);
+  }, []);
   const setNodeExpanded = (nodeId, expanded) => {
     const next = new Set(resolvedExpandedNodeIds);
     if (expanded) {
@@ -2098,16 +2143,48 @@ function DataExplorerDraggableTree({
     }
     onExpandedNodeIdsChange?.([...next]);
   };
+  const handleDragStart = (event) => {
+    const activeId = String(event.active.id || "");
+    setActiveNodeId(activeId);
+    const elementRect = activeId ? nodeElementsRef.current.get(activeId)?.getBoundingClientRect() : void 0;
+    const initialRect = event.active.rect.current.initial;
+    const rect = elementRect ?? initialRect;
+    const point = getEventClientPoint(event.activatorEvent);
+    const width = rect?.width;
+    const height = rect?.height;
+    const left = rect?.left ?? (point ? point.x - (width ?? 0) / 2 : 0);
+    const top = rect?.top ?? (point ? point.y - (height ?? 0) / 2 : 0);
+    setDragPreviewLayout({
+      initialLeft: left,
+      initialTop: top,
+      left,
+      top,
+      width,
+      height
+    });
+  };
+  const handleDragMove = (event) => {
+    setDragPreviewLayout(
+      (layout) => layout ? {
+        ...layout,
+        left: layout.initialLeft + event.delta.x,
+        top: layout.initialTop + event.delta.y
+      } : layout
+    );
+  };
   const handleDragEnd = (event) => {
     const activeId = String(event.active.id || "");
     const overId = event.over ? String(event.over.id || "") : "";
-    setActiveNodeId(void 0);
-    setActiveNodeWidth(void 0);
-    setOverNodeId(void 0);
-    if (!activeId || !overId || activeId === overId || !onDragEnd) return;
+    if (!activeId || !overId || activeId === overId || !onDragEnd) {
+      clearDragState();
+      return;
+    }
     const activeEntry2 = flattenedNodeMap.get(activeId);
     const overEntry = flattenedNodeMap.get(overId);
-    if (!activeEntry2 || !overEntry) return;
+    if (!activeEntry2 || !overEntry) {
+      clearDragState();
+      return;
+    }
     const payload = {
       activeNode: activeEntry2.node,
       overNode: overEntry.node,
@@ -2119,7 +2196,61 @@ function DataExplorerDraggableTree({
       context
     };
     void onDragEnd(payload);
+    clearDragState();
   };
+  const dragOverlay = activeEntry && dragPreviewLayout ? /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "pointer-events-none fixed z-[1000] min-w-0",
+      style: {
+        left: dragPreviewLayout.left,
+        top: dragPreviewLayout.top,
+        ...overlayStyle
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn("min-w-0 overflow-hidden shadow-lg", classNames?.overlay),
+          style: overlayStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            TreeItemRow,
+            {
+              node: activeEntry.node,
+              depth: activeEntry.depth,
+              indentSize,
+              selected: selectedNodeId === activeEntry.node.id,
+              expanded: activeEntry.node.collapsible === false || resolvedExpandedNodeIds.has(activeEntry.node.id),
+              active: true,
+              over: false,
+              hasChildren: activeEntry.node.collapsible === true || Boolean(activeEntry.node.children?.length),
+              disabled: Boolean(activeEntry.node.disabled),
+              selectable: activeEntry.node.selectable !== false,
+              draggable: activeEntry.node.draggable !== false,
+              activationMode,
+              dragHandleLabel: labels?.dragHandle ?? "Drag",
+              expandLabel: labels?.expand ?? "Expand",
+              collapseLabel: labels?.collapse ?? "Collapse",
+              themeSlots: theme.slots,
+              classNames,
+              itemClassName: activeEntry.node.itemClassName,
+              itemStyle,
+              renderNodeActions,
+              renderContext: {
+                node: activeEntry.node,
+                depth: activeEntry.depth,
+                expanded: activeEntry.node.collapsible === false || resolvedExpandedNodeIds.has(activeEntry.node.id),
+                selected: selectedNodeId === activeEntry.node.id,
+                dragging: true,
+                disabled: Boolean(activeEntry.node.disabled),
+                context: activeEntry.node.context ?? context
+              }
+            }
+          )
+        }
+      )
+    }
+  ) : null;
   if (loading) {
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.treeRoot, classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.treeLoading, classNames?.loading), children: labels?.loading ?? "Loading..." }) });
   }
@@ -2131,19 +2262,13 @@ function DataExplorerDraggableTree({
     {
       sensors,
       collisionDetection: core.closestCenter,
-      onDragStart: (event) => {
-        setActiveNodeId(String(event.active.id || ""));
-        setActiveNodeWidth(event.active.rect.current.initial?.width);
-      },
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
       onDragOver: (event) => {
         setOverNodeId(event.over ? String(event.over.id || "") : void 0);
       },
       onDragEnd: handleDragEnd,
-      onDragCancel: () => {
-        setActiveNodeId(void 0);
-        setActiveNodeWidth(void 0);
-        setOverNodeId(void 0);
-      },
+      onDragCancel: clearDragState,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: sortableIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
@@ -2178,63 +2303,15 @@ function DataExplorerDraggableTree({
                   renderNodeActions,
                   renderNodeChildren,
                   onSelect: (nextNode) => onSelectNode?.(nextNode, context),
-                  onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded)
+                  onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded),
+                  registerNodeElement
                 },
                 node.id
               );
             }) })
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          core.DragOverlay,
-          {
-            dropAnimation: {
-              duration: treeItemDropTransition.duration,
-              easing: treeItemDropTransition.easing
-            },
-            children: activeEntry ? /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                className: cn("min-w-0 overflow-hidden shadow-lg", classNames?.overlay),
-                style: overlayStyle,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  TreeItemRow,
-                  {
-                    node: activeEntry.node,
-                    depth: activeEntry.depth,
-                    indentSize,
-                    selected: selectedNodeId === activeEntry.node.id,
-                    expanded: activeEntry.node.collapsible === false || resolvedExpandedNodeIds.has(activeEntry.node.id),
-                    active: true,
-                    over: false,
-                    hasChildren: activeEntry.node.collapsible === true || Boolean(activeEntry.node.children?.length),
-                    disabled: Boolean(activeEntry.node.disabled),
-                    selectable: activeEntry.node.selectable !== false,
-                    draggable: activeEntry.node.draggable !== false,
-                    activationMode,
-                    dragHandleLabel: labels?.dragHandle ?? "Drag",
-                    expandLabel: labels?.expand ?? "Expand",
-                    collapseLabel: labels?.collapse ?? "Collapse",
-                    themeSlots: theme.slots,
-                    classNames,
-                    itemClassName: activeEntry.node.itemClassName,
-                    itemStyle,
-                    renderNodeActions,
-                    renderContext: {
-                      node: activeEntry.node,
-                      depth: activeEntry.depth,
-                      expanded: activeEntry.node.collapsible === false || resolvedExpandedNodeIds.has(activeEntry.node.id),
-                      selected: selectedNodeId === activeEntry.node.id,
-                      dragging: true,
-                      disabled: Boolean(activeEntry.node.disabled),
-                      context: activeEntry.node.context ?? context
-                    }
-                  }
-                )
-              }
-            ) : null
-          }
-        )
+        typeof document === "undefined" ? dragOverlay : dragOverlay ? reactDom.createPortal(dragOverlay, document.body) : null
       ]
     }
   );