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

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

@@ -1,9 +1,10 @@
 import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
-import { forwardRef, useState, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { forwardRef, useState, useRef, useEffect, useMemo, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
 import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { createPortal } from 'react-dom';
 
 // src/components/data-explorer/DataExplorerToolbarActions.tsx
 
@@ -1696,6 +1697,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__ */ jsx(
     "svg",
@@ -1782,7 +1796,8 @@ function DraggableTreeItem({
   renderNodeActions,
   renderNodeChildren,
   onSelect,
-  onToggle
+  onToggle,
+  registerNodeElement
 }) {
   const { node, depth } = entry;
   const hasChildren = node.collapsible === true || Boolean(node.children?.length);
@@ -1793,6 +1808,7 @@ function DraggableTreeItem({
     attributes,
     listeners,
     setNodeRef,
+    setActivatorNodeRef,
     transform,
     transition,
     isDragging
@@ -1823,10 +1839,16 @@ function DraggableTreeItem({
     transform: CSS.Transform.toString(transform),
     transition
   };
+  const setRowRef = useCallback(
+    (element) => {
+      setNodeRef(element);
+      registerNodeElement?.(node.id, element);
+    },
+    [node.id, registerNodeElement, setNodeRef]
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      ref: setNodeRef,
       style,
       className: cn(
         "min-w-0",
@@ -1863,6 +1885,8 @@ function DraggableTreeItem({
             handleListeners,
             renderNodeActions,
             renderContext,
+            rowRef: setRowRef,
+            dragHandleRef: activationMode === "handle" ? setActivatorNodeRef : void 0,
             onSelect: () => onSelect?.(node),
             onToggle: () => onToggle(node.id)
           }
@@ -1907,12 +1931,15 @@ function TreeItemRow({
   handleListeners,
   renderNodeActions,
   renderContext,
+  rowRef,
+  dragHandleRef,
   onSelect,
   onToggle
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
+      ref: rowRef,
       "data-data-explorer-draggable-tree-item": true,
       className: cn(
         themeSlots.treeNodeButton,
@@ -1953,6 +1980,7 @@ function TreeItemRow({
         draggable ? /* @__PURE__ */ jsx(
           "span",
           {
+            ref: dragHandleRef,
             className: cn(
               themeSlots.treeNodeDragHandle,
               "opacity-100",
@@ -2035,12 +2063,14 @@ function DataExplorerDraggableTree({
     () => buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
   );
   const [activeNodeId, setActiveNodeId] = useState();
-  const [activeNodeWidth, setActiveNodeWidth] = useState();
+  const [dragPreviewLayout, setDragPreviewLayout] = useState();
   const [overNodeId, setOverNodeId] = useState();
+  const nodeElementsRef = 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 = useSensors(
@@ -2064,6 +2094,21 @@ function DataExplorerDraggableTree({
   }, [flattenedNodes]);
   const activeEntry = activeNodeId ? flattenedNodeMap.get(activeNodeId) : void 0;
   const sortableIds = flattenedNodes.map((entry) => entry.node.id);
+  const registerNodeElement = useCallback(
+    (nodeId, element) => {
+      if (element) {
+        nodeElementsRef.current.set(nodeId, element);
+      } else {
+        nodeElementsRef.current.delete(nodeId);
+      }
+    },
+    []
+  );
+  const clearDragState = useCallback(() => {
+    setActiveNodeId(void 0);
+    setDragPreviewLayout(void 0);
+    setOverNodeId(void 0);
+  }, []);
   const setNodeExpanded = (nodeId, expanded) => {
     const next = new Set(resolvedExpandedNodeIds);
     if (expanded) {
@@ -2076,16 +2121,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,
@@ -2097,7 +2174,61 @@ function DataExplorerDraggableTree({
       context
     };
     void onDragEnd(payload);
+    clearDragState();
   };
+  const dragOverlay = activeEntry && dragPreviewLayout ? /* @__PURE__ */ 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__ */ jsx(
+        "div",
+        {
+          className: cn("min-w-0 overflow-hidden shadow-lg", classNames?.overlay),
+          style: overlayStyle,
+          children: /* @__PURE__ */ 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__ */ jsx("div", { className: cn(theme.slots.treeRoot, classNames?.root, className), children: /* @__PURE__ */ jsx("div", { className: cn(theme.slots.treeLoading, classNames?.loading), children: labels?.loading ?? "Loading..." }) });
   }
@@ -2109,19 +2240,13 @@ function DataExplorerDraggableTree({
     {
       sensors,
       collisionDetection: 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__ */ jsx(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
           "div",
@@ -2156,63 +2281,15 @@ function DataExplorerDraggableTree({
                   renderNodeActions,
                   renderNodeChildren,
                   onSelect: (nextNode) => onSelectNode?.(nextNode, context),
-                  onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded)
+                  onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded),
+                  registerNodeElement
                 },
                 node.id
               );
             }) })
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          DragOverlay,
-          {
-            dropAnimation: {
-              duration: treeItemDropTransition.duration,
-              easing: treeItemDropTransition.easing
-            },
-            children: activeEntry ? /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: cn("min-w-0 overflow-hidden shadow-lg", classNames?.overlay),
-                style: overlayStyle,
-                children: /* @__PURE__ */ 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 ? createPortal(dragOverlay, document.body) : null
       ]
     }
   );