@inf-monkeys-tech/monkeys-design 0.4.40 → 0.4.41

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

@@ -1,8 +1,8 @@
 import * as DropdownMenu3 from '@radix-ui/react-dropdown-menu';
 import { forwardRef, useState, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter } from '@dnd-kit/core';
-import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+import { useSensors, useSensor, PointerSensor, KeyboardSensor, DndContext, closestCenter, DragOverlay } from '@dnd-kit/core';
+import { sortableKeyboardCoordinates, SortableContext, verticalListSortingStrategy, useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
 // src/components/data-explorer/DataExplorerToolbarActions.tsx
@@ -1671,11 +1671,30 @@ function DataExplorerDetailShell({
     }
   );
 }
-var treeItemDropTransition = "transform 320ms cubic-bezier(0.22, 1, 0.36, 1)";
-function resolveTreeItemTransition(transition, dragging) {
-  if (dragging) return transition;
-  if (!transition || transition.includes("0ms")) return treeItemDropTransition;
-  return transition;
+var treeItemDropTransition = {
+  duration: 220,
+  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
+};
+var treeItemAnimateLayoutChanges = (args) => {
+  if (args.isSorting) return true;
+  if (args.wasDragging && args.transition && args.containerId === args.previousContainerId) {
+    return true;
+  }
+  return defaultAnimateLayoutChanges(args);
+};
+var treeItemRadiusValues = {
+  none: "0px",
+  sm: "0.125rem",
+  md: "0.375rem",
+  lg: "0.5rem",
+  xl: "0.75rem",
+  full: "9999px"
+};
+function resolveTreeItemBorderRadius(itemRadius, appearanceRadius) {
+  const radius = itemRadius ?? appearanceRadius;
+  if (typeof radius === "number") return `${radius}px`;
+  if (!radius) return void 0;
+  return treeItemRadiusValues[radius] ?? radius;
 }
 function ChevronIcon({ expanded }) {
   return /* @__PURE__ */ jsx(
@@ -1758,6 +1777,7 @@ function DraggableTreeItem({
   collapseLabel,
   themeSlots,
   classNames,
+  itemStyle,
   context,
   renderNodeActions,
   renderNodeChildren,
@@ -1779,10 +1799,8 @@ function DraggableTreeItem({
   } = useSortable({
     id: node.id,
     disabled: !draggable,
-    transition: {
-      duration: 220,
-      easing: "cubic-bezier(0.22,1,0.36,1)"
-    }
+    animateLayoutChanges: treeItemAnimateLayoutChanges,
+    transition: treeItemDropTransition
   });
   const {
     role: _sortableRole,
@@ -1803,7 +1821,7 @@ function DraggableTreeItem({
   };
   const style = {
     transform: CSS.Transform.toString(transform),
-    transition: resolveTreeItemTransition(transition, isDragging)
+    transition
   };
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1814,104 +1832,39 @@ function DraggableTreeItem({
         "min-w-0",
         classNames?.item,
         node.className,
-        isDragging && "relative z-20"
+        isDragging && "relative z-20",
+        active && "opacity-0"
       ),
       children: [
-        /* @__PURE__ */ jsxs(
-          "div",
+        /* @__PURE__ */ jsx(
+          TreeItemRow,
           {
-            "data-data-explorer-draggable-tree-item": true,
-            className: cn(
-              themeSlots.treeNodeButton,
-              "min-h-8 touch-none border border-transparent bg-background/70 py-0 pl-1 pr-2 font-medium",
-              selectable && "cursor-pointer",
-              draggable && activationMode === "row" && "cursor-grab active:cursor-grabbing",
-              selected && themeSlots.treeNodeSelected,
-              disabled && themeSlots.treeNodeDisabled,
-              (isDragging || active) && themeSlots.treeNodeDragging,
-              over && "border-primary/30 bg-primary/[0.08] ring-1 ring-primary/15",
-              selected && classNames?.itemSelected,
-              disabled && classNames?.itemDisabled,
-              (isDragging || active) && classNames?.itemDragging,
-              over && classNames?.itemOver,
-              classNames?.itemButton,
-              node.itemClassName
-            ),
-            style: { paddingLeft: `${depth * indentSize + 4}px` },
-            role: "treeitem",
-            "aria-selected": selected || void 0,
-            "aria-disabled": disabled || void 0,
-            "aria-expanded": hasChildren ? expanded : void 0,
-            "aria-label": node.ariaLabel,
-            tabIndex: selectable ? 0 : -1,
-            ...sortableAttributes,
-            ...sortableListeners,
-            onClick: () => {
-              if (!selectable) return;
-              onSelect?.(node);
-            },
-            onKeyDown: (event) => {
-              if (!selectable) return;
-              if (event.key !== "Enter" && event.key !== " ") return;
-              event.preventDefault();
-              onSelect?.(node);
-            },
-            children: [
-              draggable ? /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    themeSlots.treeNodeDragHandle,
-                    "opacity-100",
-                    classNames?.dragHandle
-                  ),
-                  "aria-label": dragHandleLabel,
-                  title: dragHandleLabel,
-                  ...handleListeners,
-                  onClick: (event) => event.stopPropagation(),
-                  children: /* @__PURE__ */ jsx(GripIcon, {})
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: cn("h-5 w-5 shrink-0", classNames?.dragHandle) }),
-              hasChildren ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: cn(themeSlots.treeNodeToggle, classNames?.toggle),
-                  "aria-label": expanded ? collapseLabel : expandLabel,
-                  onClick: (event) => {
-                    event.stopPropagation();
-                    onToggle(node.id);
-                  },
-                  children: /* @__PURE__ */ jsx(ChevronIcon, { expanded })
-                }
-              ) : /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeToggle, classNames?.toggle) }),
-              node.icon ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeIcon, classNames?.icon), children: node.icon }) : null,
-              /* @__PURE__ */ jsxs(
-                "span",
-                {
-                  className: cn(
-                    "flex min-w-0 flex-1 flex-col",
-                    classNames?.itemContent
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeLabel, classNames?.label), children: node.label }),
-                    node.description ? /* @__PURE__ */ jsx(
-                      "span",
-                      {
-                        className: cn(
-                          themeSlots.treeNodeDescription,
-                          classNames?.description
-                        ),
-                        children: node.description
-                      }
-                    ) : null
-                  ]
-                }
-              ),
-              node.meta ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeMeta, classNames?.meta), children: node.meta }) : null,
-              node.badge ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeBadge, classNames?.badge), children: node.badge }) : null,
-              renderNodeActions ? /* @__PURE__ */ jsx("span", { className: cn("ml-1 shrink-0", classNames?.actions), children: renderNodeActions(renderContext) }) : null
-            ]
+            node,
+            depth,
+            indentSize,
+            selected,
+            expanded,
+            active: isDragging || active,
+            over,
+            hasChildren,
+            disabled,
+            selectable,
+            draggable,
+            activationMode,
+            dragHandleLabel,
+            expandLabel,
+            collapseLabel,
+            themeSlots,
+            classNames,
+            itemClassName: node.itemClassName,
+            itemStyle,
+            sortableAttributes,
+            sortableListeners,
+            handleListeners,
+            renderNodeActions,
+            renderContext,
+            onSelect: () => onSelect?.(node),
+            onToggle: () => onToggle(node.id)
           }
         ),
         renderNodeChildren ? /* @__PURE__ */ jsx(
@@ -1929,6 +1882,132 @@ function DraggableTreeItem({
     }
   );
 }
+function TreeItemRow({
+  node,
+  depth,
+  indentSize,
+  selected,
+  expanded,
+  active,
+  over,
+  hasChildren,
+  disabled,
+  selectable,
+  draggable,
+  activationMode,
+  dragHandleLabel,
+  expandLabel,
+  collapseLabel,
+  themeSlots,
+  classNames,
+  itemClassName,
+  itemStyle,
+  sortableAttributes,
+  sortableListeners,
+  handleListeners,
+  renderNodeActions,
+  renderContext,
+  onSelect,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-data-explorer-draggable-tree-item": true,
+      className: cn(
+        themeSlots.treeNodeButton,
+        "min-h-8 touch-none border border-transparent bg-background/70 py-0 pl-1 pr-2 font-medium",
+        selectable && "cursor-pointer",
+        draggable && activationMode === "row" && "cursor-grab active:cursor-grabbing",
+        selected && themeSlots.treeNodeSelected,
+        disabled && themeSlots.treeNodeDisabled,
+        active && themeSlots.treeNodeDragging,
+        over && "border-primary/30 bg-primary/[0.08] ring-1 ring-primary/15",
+        selected && classNames?.itemSelected,
+        disabled && classNames?.itemDisabled,
+        active && classNames?.itemDragging,
+        over && classNames?.itemOver,
+        classNames?.itemButton,
+        itemClassName
+      ),
+      style: { ...itemStyle, paddingLeft: `${depth * indentSize + 4}px` },
+      role: "treeitem",
+      "aria-selected": selected || void 0,
+      "aria-disabled": disabled || void 0,
+      "aria-expanded": hasChildren ? expanded : void 0,
+      "aria-label": node.ariaLabel,
+      tabIndex: selectable ? 0 : -1,
+      ...sortableAttributes,
+      ...sortableListeners,
+      onClick: () => {
+        if (!selectable) return;
+        onSelect?.();
+      },
+      onKeyDown: (event) => {
+        if (!selectable) return;
+        if (event.key !== "Enter" && event.key !== " ") return;
+        event.preventDefault();
+        onSelect?.();
+      },
+      children: [
+        draggable ? /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              themeSlots.treeNodeDragHandle,
+              "opacity-100",
+              classNames?.dragHandle
+            ),
+            "aria-label": dragHandleLabel,
+            title: dragHandleLabel,
+            ...handleListeners,
+            onClick: (event) => event.stopPropagation(),
+            children: /* @__PURE__ */ jsx(GripIcon, {})
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cn("h-5 w-5 shrink-0", classNames?.dragHandle) }),
+        hasChildren ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: cn(themeSlots.treeNodeToggle, classNames?.toggle),
+            "aria-label": expanded ? collapseLabel : expandLabel,
+            onClick: (event) => {
+              event.stopPropagation();
+              onToggle?.();
+            },
+            children: /* @__PURE__ */ jsx(ChevronIcon, { expanded })
+          }
+        ) : /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeToggle, classNames?.toggle) }),
+        node.icon ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeIcon, classNames?.icon), children: node.icon }) : null,
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 flex-col",
+              classNames?.itemContent
+            ),
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeLabel, classNames?.label), children: node.label }),
+              node.description ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: cn(
+                    themeSlots.treeNodeDescription,
+                    classNames?.description
+                  ),
+                  children: node.description
+                }
+              ) : null
+            ]
+          }
+        ),
+        node.meta ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeMeta, classNames?.meta), children: node.meta }) : null,
+        node.badge ? /* @__PURE__ */ jsx("span", { className: cn(themeSlots.treeNodeBadge, classNames?.badge), children: node.badge }) : null,
+        renderNodeActions ? /* @__PURE__ */ jsx("span", { className: cn("ml-1 shrink-0", classNames?.actions), children: renderNodeActions(renderContext) }) : null
+      ]
+    }
+  );
+}
 function DataExplorerDraggableTree({
   nodes,
   context,
@@ -1942,6 +2021,7 @@ function DataExplorerDraggableTree({
   empty,
   labels,
   appearance,
+  itemRadius,
   className,
   classNames,
   renderNodeActions,
@@ -1955,7 +2035,14 @@ function DataExplorerDraggableTree({
     () => buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
   );
   const [activeNodeId, setActiveNodeId] = useState();
+  const [activeNodeWidth, setActiveNodeWidth] = useState();
   const [overNodeId, setOverNodeId] = useState();
+  const itemBorderRadius = resolveTreeItemBorderRadius(itemRadius, theme.radius);
+  const itemStyle = itemBorderRadius ? { borderRadius: itemBorderRadius } : void 0;
+  const overlayStyle = {
+    width: activeNodeWidth,
+    borderRadius: itemBorderRadius
+  };
   const sensors = useSensors(
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
@@ -1975,6 +2062,7 @@ function DataExplorerDraggableTree({
     for (const entry of flattenedNodes) map.set(entry.node.id, entry);
     return map;
   }, [flattenedNodes]);
+  const activeEntry = activeNodeId ? flattenedNodeMap.get(activeNodeId) : void 0;
   const sortableIds = flattenedNodes.map((entry) => entry.node.id);
   const setNodeExpanded = (nodeId, expanded) => {
     const next = new Set(resolvedExpandedNodeIds);
@@ -1992,19 +2080,20 @@ function DataExplorerDraggableTree({
     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;
-    const activeEntry = flattenedNodeMap.get(activeId);
+    const activeEntry2 = flattenedNodeMap.get(activeId);
     const overEntry = flattenedNodeMap.get(overId);
-    if (!activeEntry || !overEntry) return;
+    if (!activeEntry2 || !overEntry) return;
     const payload = {
-      activeNode: activeEntry.node,
+      activeNode: activeEntry2.node,
       overNode: overEntry.node,
-      activeParentId: activeEntry.parentId,
+      activeParentId: activeEntry2.parentId,
       overParentId: overEntry.parentId,
-      activeIndex: activeEntry.index,
+      activeIndex: activeEntry2.index,
       overIndex: overEntry.index,
-      sameParent: activeEntry.parentId === overEntry.parentId,
+      sameParent: activeEntry2.parentId === overEntry.parentId,
       context
     };
     void onDragEnd(payload);
@@ -2015,59 +2104,116 @@ function DataExplorerDraggableTree({
   if (nodes.length === 0) {
     return /* @__PURE__ */ jsx("div", { className: cn(theme.slots.treeRoot, classNames?.root, className), children: /* @__PURE__ */ jsx("div", { className: cn(theme.slots.treeEmpty, classNames?.empty), children: empty ?? labels?.empty ?? "No data" }) });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     DndContext,
     {
       sensors,
       collisionDetection: closestCenter,
-      onDragStart: (event) => setActiveNodeId(String(event.active.id || "")),
+      onDragStart: (event) => {
+        setActiveNodeId(String(event.active.id || ""));
+        setActiveNodeWidth(event.active.rect.current.initial?.width);
+      },
       onDragOver: (event) => {
         setOverNodeId(event.over ? String(event.over.id || "") : void 0);
       },
       onDragEnd: handleDragEnd,
       onDragCancel: () => {
         setActiveNodeId(void 0);
+        setActiveNodeWidth(void 0);
         setOverNodeId(void 0);
       },
-      children: /* @__PURE__ */ jsx(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            theme.slots.treeRoot,
-            "space-y-1 overflow-visible",
-            classNames?.root,
-            className
-          ),
-          role: "tree",
-          children: /* @__PURE__ */ jsx("div", { className: cn("min-w-0 space-y-1", classNames?.list), children: flattenedNodes.map((entry) => {
-            const node = entry.node;
-            const expanded = node.collapsible === false || resolvedExpandedNodeIds.has(node.id);
-            return /* @__PURE__ */ jsx(
-              DraggableTreeItem,
+      children: [
+        /* @__PURE__ */ jsx(SortableContext, { items: sortableIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              theme.slots.treeRoot,
+              "space-y-1 overflow-visible",
+              classNames?.root,
+              className
+            ),
+            role: "tree",
+            children: /* @__PURE__ */ jsx("div", { className: cn("min-w-0 space-y-1", classNames?.list), children: flattenedNodes.map((entry) => {
+              const node = entry.node;
+              const expanded = node.collapsible === false || resolvedExpandedNodeIds.has(node.id);
+              return /* @__PURE__ */ jsx(
+                DraggableTreeItem,
+                {
+                  entry,
+                  selected: selectedNodeId === node.id,
+                  expanded,
+                  active: activeNodeId === node.id,
+                  over: overNodeId === node.id && activeNodeId !== node.id,
+                  indentSize,
+                  activationMode,
+                  dragHandleLabel: labels?.dragHandle ?? "Drag",
+                  expandLabel: labels?.expand ?? "Expand",
+                  collapseLabel: labels?.collapse ?? "Collapse",
+                  themeSlots: theme.slots,
+                  classNames,
+                  itemStyle,
+                  context,
+                  renderNodeActions,
+                  renderNodeChildren,
+                  onSelect: (nextNode) => onSelectNode?.(nextNode, context),
+                  onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded)
+                },
+                node.id
+              );
+            }) })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          DragOverlay,
+          {
+            dropAnimation: {
+              duration: treeItemDropTransition.duration,
+              easing: treeItemDropTransition.easing
+            },
+            children: activeEntry ? /* @__PURE__ */ jsx(
+              "div",
               {
-                entry,
-                selected: selectedNodeId === node.id,
-                expanded,
-                active: activeNodeId === node.id,
-                over: overNodeId === node.id && activeNodeId !== node.id,
-                indentSize,
-                activationMode,
-                dragHandleLabel: labels?.dragHandle ?? "Drag",
-                expandLabel: labels?.expand ?? "Expand",
-                collapseLabel: labels?.collapse ?? "Collapse",
-                themeSlots: theme.slots,
-                classNames,
-                context,
-                renderNodeActions,
-                renderNodeChildren,
-                onSelect: (nextNode) => onSelectNode?.(nextNode, context),
-                onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded)
-              },
-              node.id
-            );
-          }) })
-        }
-      ) })
+                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: 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
+          }
+        )
+      ]
     }
   );
 }