@inf-monkeys-tech/monkeys-design 0.4.36 → 0.4.38

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

@@ -3,6 +3,9 @@
 var DropdownMenu3 = require('@radix-ui/react-dropdown-menu');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -1690,6 +1693,406 @@ 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;
+}
+function ChevronIcon({ expanded }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: cn(
+        "h-4 w-4 transition-transform duration-200 ease-out",
+        expanded ? "rotate-90" : "rotate-0"
+      ),
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" })
+    }
+  );
+}
+function GripIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      viewBox: "0 0 24 24",
+      className: "h-3.5 w-3.5",
+      fill: "none",
+      stroke: "currentColor",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      strokeWidth: "2",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "19", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "5", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "15", cy: "19", r: "1" })
+      ]
+    }
+  );
+}
+function collectDefaultExpandedNodeIds(nodes, ids) {
+  for (const node of nodes) {
+    if (node.defaultExpanded) ids.add(node.id);
+    collectDefaultExpandedNodeIds(node.children ?? [], ids);
+  }
+}
+function buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds) {
+  const ids = new Set(defaultExpandedNodeIds ?? []);
+  collectDefaultExpandedNodeIds(nodes, ids);
+  return ids;
+}
+function flattenTree(nodes, expandedNodeIds, parentId, depth, entries) {
+  nodes.forEach((node, index) => {
+    entries.push({ node, parentId, index, depth });
+    const hasChildren = Array.isArray(node.children) && node.children.length > 0;
+    const isExpanded = node.collapsible === false || expandedNodeIds.has(node.id);
+    if (hasChildren && isExpanded) {
+      flattenTree(node.children ?? [], expandedNodeIds, node.id, depth + 1, entries);
+    }
+  });
+}
+function buildFlattenedTree(nodes, expandedNodeIds) {
+  const entries = [];
+  flattenTree(nodes, expandedNodeIds, void 0, 0, entries);
+  return entries;
+}
+function DraggableTreeItem({
+  entry,
+  selected,
+  expanded,
+  active,
+  over,
+  indentSize,
+  activationMode,
+  dragHandleLabel,
+  expandLabel,
+  collapseLabel,
+  themeSlots,
+  classNames,
+  context,
+  renderNodeActions,
+  renderNodeChildren,
+  onSelect,
+  onToggle
+}) {
+  const { node, depth } = entry;
+  const hasChildren = Boolean(node.children?.length);
+  const disabled = Boolean(node.disabled);
+  const selectable = node.selectable !== false && !disabled;
+  const draggable = node.draggable !== false && !disabled;
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = sortable.useSortable({
+    id: node.id,
+    disabled: !draggable,
+    transition: {
+      duration: 220,
+      easing: "cubic-bezier(0.22,1,0.36,1)"
+    }
+  });
+  const {
+    role: _sortableRole,
+    tabIndex: _sortableTabIndex,
+    "aria-disabled": _sortableAriaDisabled,
+    ...sortableAttributes
+  } = attributes;
+  const sortableListeners = activationMode === "row" ? listeners : void 0;
+  const handleListeners = activationMode === "handle" ? listeners : void 0;
+  const renderContext = {
+    node,
+    depth,
+    expanded,
+    selected,
+    dragging: isDragging || active,
+    disabled,
+    context: node.context ?? context
+  };
+  const style = {
+    transform: utilities.CSS.Transform.toString(transform),
+    transition: resolveTreeItemTransition(transition, isDragging)
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: setNodeRef,
+      style,
+      className: cn(
+        "min-w-0",
+        classNames?.item,
+        node.className,
+        isDragging && "relative z-20"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.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,
+              (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__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: cn(
+                    themeSlots.treeNodeDragHandle,
+                    "opacity-100",
+                    classNames?.dragHandle
+                  ),
+                  "aria-label": dragHandleLabel,
+                  title: dragHandleLabel,
+                  ...handleListeners,
+                  onClick: (event) => event.stopPropagation(),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(GripIcon, {})
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("h-5 w-5 shrink-0", classNames?.dragHandle) }),
+              hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  type: "button",
+                  className: cn(themeSlots.treeNodeToggle, classNames?.toggle),
+                  "aria-label": expanded ? collapseLabel : expandLabel,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    onToggle(node.id);
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { expanded })
+                }
+              ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(themeSlots.treeNodeToggle, classNames?.toggle) }),
+              node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(themeSlots.treeNodeIcon, classNames?.icon), children: node.icon }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: cn(
+                    "flex min-w-0 flex-1 flex-col",
+                    classNames?.itemContent
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(themeSlots.treeNodeLabel, classNames?.label), children: node.label }),
+                    node.description ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: cn(
+                          themeSlots.treeNodeDescription,
+                          classNames?.description
+                        ),
+                        children: node.description
+                      }
+                    ) : null
+                  ]
+                }
+              ),
+              node.meta ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(themeSlots.treeNodeMeta, classNames?.meta), children: node.meta }) : null,
+              node.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(themeSlots.treeNodeBadge, classNames?.badge), children: node.badge }) : null,
+              renderNodeActions ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("ml-1 shrink-0", classNames?.actions), children: renderNodeActions(renderContext) }) : null
+            ]
+          }
+        ),
+        renderNodeChildren ? /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "min-w-0",
+              classNames?.children,
+              node.childrenClassName
+            ),
+            children: renderNodeChildren(renderContext)
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function DataExplorerDraggableTree({
+  nodes,
+  context,
+  selectedNodeId,
+  expandedNodeIds,
+  defaultExpandedNodeIds,
+  resetExpansionKey,
+  indentSize = 16,
+  activationMode = "row",
+  loading,
+  empty,
+  labels,
+  appearance,
+  className,
+  classNames,
+  renderNodeActions,
+  renderNodeChildren,
+  onSelectNode,
+  onExpandedNodeIdsChange,
+  onDragEnd
+}) {
+  const theme = resolveDataExplorerAppearance(appearance);
+  const [internalExpandedNodeIds, setInternalExpandedNodeIds] = react.useState(
+    () => buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
+  );
+  const [activeNodeId, setActiveNodeId] = react.useState();
+  const [overNodeId, setOverNodeId] = react.useState();
+  const sensors = core.useSensors(
+    core.useSensor(core.PointerSensor, { activationConstraint: { distance: 4 } }),
+    core.useSensor(core.KeyboardSensor, { coordinateGetter: sortable.sortableKeyboardCoordinates })
+  );
+  react.useEffect(() => {
+    setInternalExpandedNodeIds(
+      buildDefaultExpandedNodeIds(nodes, defaultExpandedNodeIds)
+    );
+  }, [defaultExpandedNodeIds, resetExpansionKey]);
+  const resolvedExpandedNodeIds = expandedNodeIds !== void 0 ? new Set(expandedNodeIds) : internalExpandedNodeIds;
+  const flattenedNodes = react.useMemo(
+    () => buildFlattenedTree(nodes, resolvedExpandedNodeIds),
+    [nodes, resolvedExpandedNodeIds]
+  );
+  const flattenedNodeMap = react.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const entry of flattenedNodes) map.set(entry.node.id, entry);
+    return map;
+  }, [flattenedNodes]);
+  const sortableIds = flattenedNodes.map((entry) => entry.node.id);
+  const setNodeExpanded = (nodeId, expanded) => {
+    const next = new Set(resolvedExpandedNodeIds);
+    if (expanded) {
+      next.add(nodeId);
+    } else {
+      next.delete(nodeId);
+    }
+    if (expandedNodeIds === void 0) {
+      setInternalExpandedNodeIds(next);
+    }
+    onExpandedNodeIdsChange?.([...next]);
+  };
+  const handleDragEnd = (event) => {
+    const activeId = String(event.active.id || "");
+    const overId = event.over ? String(event.over.id || "") : "";
+    setActiveNodeId(void 0);
+    setOverNodeId(void 0);
+    if (!activeId || !overId || activeId === overId || !onDragEnd) return;
+    const activeEntry = flattenedNodeMap.get(activeId);
+    const overEntry = flattenedNodeMap.get(overId);
+    if (!activeEntry || !overEntry) return;
+    const payload = {
+      activeNode: activeEntry.node,
+      overNode: overEntry.node,
+      activeParentId: activeEntry.parentId,
+      overParentId: overEntry.parentId,
+      activeIndex: activeEntry.index,
+      overIndex: overEntry.index,
+      sameParent: activeEntry.parentId === overEntry.parentId,
+      context
+    };
+    void onDragEnd(payload);
+  };
+  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..." }) });
+  }
+  if (nodes.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.treeRoot, classNames?.root, className), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(theme.slots.treeEmpty, classNames?.empty), children: empty ?? labels?.empty ?? "No data" }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    core.DndContext,
+    {
+      sensors,
+      collisionDetection: core.closestCenter,
+      onDragStart: (event) => setActiveNodeId(String(event.active.id || "")),
+      onDragOver: (event) => {
+        setOverNodeId(event.over ? String(event.over.id || "") : void 0);
+      },
+      onDragEnd: handleDragEnd,
+      onDragCancel: () => {
+        setActiveNodeId(void 0);
+        setOverNodeId(void 0);
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(sortable.SortableContext, { items: sortableIds, strategy: sortable.verticalListSortingStrategy, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            theme.slots.treeRoot,
+            "space-y-1 overflow-visible",
+            classNames?.root,
+            className
+          ),
+          role: "tree",
+          children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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,
+                context,
+                renderNodeActions,
+                renderNodeChildren,
+                onSelect: (nextNode) => onSelectNode?.(nextNode, context),
+                onToggle: (nodeId) => setNodeExpanded(nodeId, !expanded)
+              },
+              node.id
+            );
+          }) })
+        }
+      ) })
+    }
+  );
+}
 function MoreIcon() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -3726,7 +4129,7 @@ function DataExplorerTreeShell({
     }
   );
 }
-function ChevronIcon({ expanded }) {
+function ChevronIcon2({ expanded }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -3762,7 +4165,7 @@ function MoreIcon2() {
     }
   );
 }
-function GripIcon() {
+function GripIcon2() {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
     {
@@ -3785,18 +4188,18 @@ function GripIcon() {
     }
   );
 }
-function collectDefaultExpandedNodeIds(nodes, defaults) {
+function collectDefaultExpandedNodeIds2(nodes, defaults) {
   for (const node of nodes ?? []) {
     if (node.defaultExpanded) {
       defaults.add(node.id);
     }
-    collectDefaultExpandedNodeIds(node.children, defaults);
+    collectDefaultExpandedNodeIds2(node.children, defaults);
   }
 }
 function buildDefaultNodeExpandedSet(groups, defaultExpandedNodeIds) {
   const defaults = new Set(defaultExpandedNodeIds ?? []);
   for (const group of groups) {
-    collectDefaultExpandedNodeIds(group.nodes, defaults);
+    collectDefaultExpandedNodeIds2(group.nodes, defaults);
   }
   return defaults;
 }
@@ -4126,7 +4529,7 @@ function DataExplorerViewTree({
                       setDraggingNodeId(void 0);
                       setDragOverNodeId(void 0);
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(GripIcon, {})
+                    children: /* @__PURE__ */ jsxRuntime.jsx(GripIcon2, {})
                   }
                 ) : null,
                 hasChildren ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -4139,7 +4542,7 @@ function DataExplorerViewTree({
                       event.stopPropagation();
                       setNodeExpanded(node.id, !isExpanded);
                     },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { expanded: isExpanded })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { expanded: isExpanded })
                   }
                 ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.treeNodeToggle, classNames?.nodeToggle) }),
                 node.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.treeNodeIcon, classNames?.nodeIcon), children: node.icon }) : null,
@@ -4224,7 +4627,7 @@ function DataExplorerViewTree({
                           setGroupExpanded(group.id, !groupExpanded);
                         },
                         children: [
-                          group.collapsible === false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.slots.treeNodeToggle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.slots.treeNodeToggle, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon, { expanded: groupExpanded }) }),
+                          group.collapsible === false ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.slots.treeNodeToggle }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: theme.slots.treeNodeToggle, children: /* @__PURE__ */ jsxRuntime.jsx(ChevronIcon2, { expanded: groupExpanded }) }),
                           group.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.treeNodeIcon, classNames?.nodeIcon), children: group.icon }) : null,
                           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [
                             group.label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(theme.slots.treeNodeLabel, classNames?.nodeLabel), children: group.label }) : null,
@@ -4461,6 +4864,7 @@ exports.DataExplorerDisplayCard = DataExplorerDisplayCard;
 exports.DataExplorerDisplayCollectionView = DataExplorerDisplayCollectionView;
 exports.DataExplorerDisplayListItem = DataExplorerDisplayListItem;
 exports.DataExplorerDisplayMedia = DataExplorerDisplayMedia;
+exports.DataExplorerDraggableTree = DataExplorerDraggableTree;
 exports.DataExplorerImagePreview = DataExplorerImagePreview;
 exports.DataExplorerPage = DataExplorerPage;
 exports.DataExplorerRecordCard = DataExplorerRecordCard;