@gfazioli/mantine-json-tree 2.0.2 → 2.1.0

package/dist/esm/JsonTree.mjs

@@ -1,8 +1,9 @@
 'use client';
-import React, { useMemo } from 'react';
+import React, { useMemo, useEffect, useCallback } from 'react';
 import { IconCopy, IconLibraryMinus, IconLibraryPlus, IconChevronRight } from '@tabler/icons-react';
-import { createVarsResolver, rem, getFontSize, factory, useProps, useStyles, useMantineTheme, getTreeExpandedState, useTree, Box, Group, ActionIcon, Tree, Text, Code, Badge } from '@mantine/core';
-import { convertToTreeData, isExpandable, formatValue } from './lib/utils.mjs';
+import { createVarsResolver, rem, factory, useProps, useStyles, useRandomClassName, getTreeExpandedState, useTree, Box, Group, ActionIcon, ScrollArea, Tree, Text, Code, Badge, Tooltip } from '@mantine/core';
+import { JsonTreeMediaVariables } from './JsonTreeMediaVariables.mjs';
+import { convertToTreeData, findNodeByPath, isExpandable, formatValue } from './lib/utils.mjs';
 import classes from './JsonTree.module.css.mjs';
 
 const defaultProps = {
@@ -12,18 +13,210 @@ const defaultProps = {
   showItemsCount: false,
   withCopyToClipboard: false,
   showIndentGuides: false,
+  showLineNumbers: false,
+  showPathOnHover: false,
   stickyHeader: false,
   displayFunctions: "as-string",
   expandAllControlIcon: /* @__PURE__ */ React.createElement(IconLibraryPlus, { size: 16 }),
   collapseAllControlIcon: /* @__PURE__ */ React.createElement(IconLibraryMinus, { size: 16 }),
   copyToClipboardIcon: /* @__PURE__ */ React.createElement(IconCopy, { size: 12 })
 };
+function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, props, ctx, onNodeClick) {
+  const {
+    getStyles,
+    copyToClipboardIcon,
+    expandControlIcon,
+    collapseControlIcon,
+    onExpand,
+    onCollapse,
+    onExpandedChange
+  } = ctx;
+  const jsonNode = node;
+  const {
+    type,
+    value,
+    key,
+    path,
+    itemCount,
+    depth = 0
+  } = jsonNode.nodeData || {
+    type: "null",
+    value: null,
+    path: "unknown",
+    depth: 0
+  };
+  const {
+    showItemsCount,
+    withCopyToClipboard,
+    onCopy,
+    showIndentGuides,
+    showLineNumbers,
+    showPathOnHover,
+    tooltipProps
+  } = props;
+  const handleCopy = async (e) => {
+    e.stopPropagation();
+    try {
+      const copy = JSON.stringify(value, null, 2);
+      await navigator.clipboard.writeText(copy);
+      onCopy?.(copy, value);
+    } catch (error) {
+    }
+  };
+  const handleClick = () => {
+    if (onNodeClick) {
+      onNodeClick(path, value);
+    }
+  };
+  const handleToggleExpanded = (e) => {
+    e.stopPropagation();
+    if (expanded) {
+      onCollapse?.(node.value);
+    } else {
+      onExpand?.(node.value);
+    }
+    if (onExpandedChange) {
+      const newState = { ...tree.expandedState, [node.value]: !expanded };
+      onExpandedChange(Object.keys(newState).filter((k) => newState[k]));
+    } else {
+      tree.toggleExpanded(node.value);
+    }
+  };
+  const renderIndentGuides = () => {
+    if (!showIndentGuides || depth === 0) {
+      return null;
+    }
+    const guides = [];
+    for (let i = 0; i < depth; i++) {
+      const colorIndex = i % 5;
+      guides.push(
+        /* @__PURE__ */ React.createElement(
+          "div",
+          {
+            key: i,
+            ...getStyles("indentGuide", {
+              style: {
+                left: `${i * 32 + 8}px`
+              }
+            }),
+            "data-color-index": colorIndex
+          }
+        )
+      );
+    }
+    return guides;
+  };
+  const lineNumber = showLineNumbers ? /* @__PURE__ */ React.createElement("span", { ...getStyles("lineNumber") }) : null;
+  const wrapWithTooltip = (content) => showPathOnHover ? /* @__PURE__ */ React.createElement(Tooltip, { label: path, position: "top-start", withArrow: true, openDelay: 300, ...tooltipProps }, content) : content;
+  if (!hasChildren) {
+    return wrapWithTooltip(
+      /* @__PURE__ */ React.createElement(
+        Group,
+        {
+          gap: 4,
+          wrap: "nowrap",
+          ...elementProps,
+          onClick: handleClick,
+          style: { cursor: onNodeClick ? "pointer" : "default", position: "relative" }
+        },
+        lineNumber,
+        renderIndentGuides(),
+        key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key"), "data-key": key }, key), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
+        (() => {
+          const formattedValue = formatValue(value, type);
+          return /* @__PURE__ */ React.createElement(Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, formattedValue);
+        })(),
+        withCopyToClipboard && /* @__PURE__ */ React.createElement(
+          ActionIcon,
+          {
+            size: "xs",
+            variant: "subtle",
+            color: "gray",
+            onClick: handleCopy,
+            ...getStyles("copyButton")
+          },
+          copyToClipboardIcon
+        )
+      )
+    );
+  }
+  const openBracket = type === "array" ? "[" : "{";
+  const closeBracket = type === "array" ? "]" : "}";
+  const expandCollapseIcon = (() => {
+    if (!expandControlIcon && !collapseControlIcon) {
+      return /* @__PURE__ */ React.createElement(
+        IconChevronRight,
+        {
+          size: 14,
+          style: {
+            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+            transition: "transform 0.2s ease"
+          }
+        }
+      );
+    }
+    if (expandControlIcon && !collapseControlIcon) {
+      return React.cloneElement(expandControlIcon, {
+        style: {
+          ...expandControlIcon.props?.style,
+          transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
+          transition: "transform 0.2s ease"
+        }
+      });
+    }
+    if (!expandControlIcon && collapseControlIcon) {
+      return expanded ? collapseControlIcon : /* @__PURE__ */ React.createElement(IconChevronRight, { size: 14 });
+    }
+    return expanded ? collapseControlIcon : expandControlIcon;
+  })();
+  return wrapWithTooltip(
+    /* @__PURE__ */ React.createElement(
+      Group,
+      {
+        gap: 4,
+        wrap: "nowrap",
+        ...elementProps,
+        onClick: handleClick,
+        "data-expanded": expanded,
+        "data-has-children": hasChildren,
+        "data-type": type,
+        style: { cursor: onNodeClick ? "pointer" : "default", position: "relative" }
+      },
+      lineNumber,
+      renderIndentGuides(),
+      /* @__PURE__ */ React.createElement(
+        ActionIcon,
+        {
+          size: "xs",
+          variant: "subtle",
+          onClick: handleToggleExpanded,
+          ...getStyles("expandCollapse")
+        },
+        expandCollapseIcon
+      ),
+      key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key") }, key), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
+      /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("bracket") }, openBracket),
+      !expanded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", size: "xs", ...getStyles("ellipsis") }, "..."), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("bracket") }, closeBracket), itemCount !== void 0 && showItemsCount && /* @__PURE__ */ React.createElement(Badge, { size: "xs", variant: "light", color: "gray", ...getStyles("itemsCount") }, itemCount)),
+      withCopyToClipboard && /* @__PURE__ */ React.createElement(
+        ActionIcon,
+        {
+          size: "xs",
+          variant: "subtle",
+          color: "gray",
+          onClick: handleCopy,
+          ...getStyles("copyButton")
+        },
+        copyToClipboardIcon
+      )
+    )
+  );
+}
 const varsResolver = createVarsResolver(
-  (_, { size, stickyHeader, stickyHeaderOffset }) => {
+  (_, { stickyHeader, stickyHeaderOffset }) => {
     return {
       root: {
         "--json-tree-font-family": "var(--mantine-font-family-monospace)",
-        "--json-tree-font-size": getFontSize(size) || "var(--mantine-font-size-xs)"
+        "--json-tree-font-size": void 0
       },
       header: {
         "--json-tree-header-background-color": "inherit",
@@ -58,7 +251,8 @@ const varsResolver = createVarsResolver(
       },
       expandCollapse: {},
       keyValueSeparator: {},
-      ellipsis: {},
+      ellipsis: { "--json-tree-color-ellipsis": "var(--mantine-color-dark-3)" },
+      lineNumber: { "--json-tree-color-line-number": "var(--mantine-color-gray-5)" },
       itemsCount: {},
       controls: {},
       copyButton: {}
@@ -73,12 +267,19 @@ const JsonTree = factory((_props, ref) => {
     maxDepth,
     onNodeClick,
     onCopy,
+    onExpand,
+    onCollapse,
     withExpandAll,
-    variant,
     title,
     showItemsCount,
     withCopyToClipboard,
     showIndentGuides,
+    showLineNumbers,
+    showPathOnHover,
+    tooltipProps,
+    maxHeight,
+    expanded: controlledExpanded,
+    onExpandedChange,
     stickyHeaderOffset,
     stickyHeader,
     displayFunctions,
@@ -87,6 +288,7 @@ const JsonTree = factory((_props, ref) => {
     copyToClipboardIcon,
     expandControlIcon,
     collapseControlIcon,
+    size,
     classNames,
     style,
     styles,
@@ -107,12 +309,19 @@ const JsonTree = factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const theme = useMantineTheme();
+  const responsiveClassName = useRandomClassName();
   const treeData = useMemo(
     () => [convertToTreeData(data, void 0, "root", 0, displayFunctions)],
     [data, displayFunctions]
   );
   const initialExpandedState = useMemo(() => {
+    if (controlledExpanded) {
+      const state = {};
+      controlledExpanded.forEach((path) => {
+        state[path] = true;
+      });
+      return state;
+    }
     if (defaultExpanded) {
       if (maxDepth === -1) {
         return getTreeExpandedState(treeData, "*");
@@ -130,190 +339,104 @@ const JsonTree = factory((_props, ref) => {
       return getTreeExpandedState(treeData, expandedNodes);
     }
     return {};
-  }, [treeData, defaultExpanded, maxDepth]);
+  }, [treeData, defaultExpanded, maxDepth, controlledExpanded]);
   const tree = useTree({
     initialExpandedState
   });
-  function renderJSONNode({ node, expanded, hasChildren, elementProps, tree: tree2 }, _, props2, onNodeClick2) {
-    const jsonNode = node;
-    const {
-      type,
-      value,
-      key,
-      path,
-      itemCount,
-      depth = 0
-    } = jsonNode.nodeData || {
-      type: "null",
-      value: null,
-      path: "unknown",
-      depth: 0
-    };
-    const { showItemsCount: showItemsCount2, withCopyToClipboard: withCopyToClipboard2, onCopy: onCopy2, showIndentGuides: showIndentGuides2 } = props2;
-    const handleCopy = async (e) => {
-      e.stopPropagation();
-      try {
-        const copy = JSON.stringify(value, null, 2);
-        await navigator.clipboard.writeText(copy);
-        onCopy2?.(copy, value);
-      } catch (error) {
-      }
-    };
-    const handleClick = () => {
-      if (onNodeClick2) {
-        onNodeClick2(path, value);
-      }
-    };
-    const renderIndentGuides = () => {
-      if (!showIndentGuides2 || depth === 0) {
-        return null;
-      }
-      const guides = [];
-      for (let i = 0; i < depth; i++) {
-        const colorIndex = i % 5;
-        guides.push(
-          /* @__PURE__ */ React.createElement(
-            "div",
-            {
-              key: i,
-              ...getStyles("indentGuide", {
-                style: {
-                  left: `${i * 32 + 8}px`
-                }
-              }),
-              "data-color-index": colorIndex
-            }
-          )
-        );
-      }
-      return guides;
-    };
-    if (!hasChildren) {
-      return /* @__PURE__ */ React.createElement(
-        Group,
-        {
-          gap: 4,
-          wrap: "nowrap",
-          ...elementProps,
-          onClick: handleClick,
-          style: { cursor: onNodeClick2 ? "pointer" : "default", position: "relative" }
-        },
-        renderIndentGuides(),
-        key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key"), "data-key": key }, key), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
-        (() => {
-          const formattedValue = formatValue(value, type);
-          return /* @__PURE__ */ React.createElement(Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, formattedValue);
-        })(),
-        withCopyToClipboard2 && /* @__PURE__ */ React.createElement(
-          ActionIcon,
-          {
-            size: "xs",
-            variant: "subtle",
-            color: "gray",
-            onClick: handleCopy,
-            ...getStyles("copyButton")
-          },
-          copyToClipboardIcon
-        )
-      );
+  useEffect(() => {
+    if (controlledExpanded) {
+      const state = {};
+      controlledExpanded.forEach((path) => {
+        state[path] = true;
+      });
+      tree.setExpandedState(state);
     }
-    const openBracket = type === "array" ? "[" : "{";
-    const closeBracket = type === "array" ? "]" : "}";
-    const expandCollapseIcon = (() => {
-      if (!expandControlIcon && !collapseControlIcon) {
-        return /* @__PURE__ */ React.createElement(
-          IconChevronRight,
-          {
-            size: 14,
-            style: {
-              transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-              transition: "transform 0.2s ease"
-            }
-          }
+  }, [controlledExpanded, tree.setExpandedState]);
+  const handleKeyDown = useCallback(
+    async (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "c" && withCopyToClipboard) {
+        e.preventDefault();
+        const focused = e.currentTarget.querySelector(
+          '[data-value][tabindex="0"], [data-value]:focus'
         );
-      }
-      if (expandControlIcon && !collapseControlIcon) {
-        return React.cloneElement(expandControlIcon, {
-          style: {
-            ...expandControlIcon.props?.style,
-            transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-            transition: "transform 0.2s ease"
+        if (focused) {
+          const nodePath = focused.getAttribute("data-value");
+          if (nodePath) {
+            const nodeData = findNodeByPath(treeData, nodePath);
+            if (nodeData?.nodeData) {
+              try {
+                const copy = JSON.stringify(nodeData.nodeData.value, null, 2);
+                await navigator.clipboard.writeText(copy);
+                onCopy?.(copy, nodeData.nodeData.value);
+              } catch {
+              }
+            }
           }
-        });
-      }
-      if (!expandControlIcon && collapseControlIcon) {
-        return expanded ? collapseControlIcon : /* @__PURE__ */ React.createElement(IconChevronRight, { size: 14 });
+        }
       }
-      return expanded ? collapseControlIcon : expandControlIcon;
-    })();
-    return /* @__PURE__ */ React.createElement(
-      Group,
-      {
-        gap: 4,
-        wrap: "nowrap",
-        ...elementProps,
-        onClick: handleClick,
-        "data-expanded": expanded,
-        "data-has-children": hasChildren,
-        "data-type": type,
-        style: { cursor: onNodeClick2 ? "pointer" : "default", position: "relative" }
-      },
-      renderIndentGuides(),
-      /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          size: "xs",
-          variant: "subtle",
-          onClick: (e) => {
-            e.stopPropagation();
-            tree2.toggleExpanded(node.value);
-          },
-          ...getStyles("expandCollapse")
-        },
-        expandCollapseIcon
-      ),
-      key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key") }, key), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
-      /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("bracket") }, openBracket),
-      !expanded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", size: "xs", ...getStyles("ellipsis") }, "..."), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("bracket") }, closeBracket), itemCount !== void 0 && showItemsCount2 && /* @__PURE__ */ React.createElement(Badge, { size: "xs", variant: "light", color: "gray", ...getStyles("itemsCount") }, itemCount)),
-      withCopyToClipboard2 && /* @__PURE__ */ React.createElement(
-        ActionIcon,
-        {
-          size: "xs",
-          variant: "subtle",
-          color: "gray",
-          onClick: handleCopy,
-          ...getStyles("copyButton")
-        },
-        copyToClipboardIcon
-      )
-    );
-  }
-  return /* @__PURE__ */ React.createElement(Box, { ref, ...getStyles("root"), ...others }, (title || withExpandAll) && /* @__PURE__ */ React.createElement(Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, title || /* @__PURE__ */ React.createElement("div", null), withExpandAll && isExpandable(data) && /* @__PURE__ */ React.createElement(Group, { gap: "xs", style: { top: 10, zIndex: 1 } }, /* @__PURE__ */ React.createElement(
-    ActionIcon,
-    {
-      size: "xs",
-      variant: "transparent",
-      onClick: () => tree.expandAllNodes(),
-      ...getStyles("controls")
     },
-    expandAllControlIcon
-  ), /* @__PURE__ */ React.createElement(
-    ActionIcon,
-    {
-      size: "xs",
-      variant: "transparent",
-      onClick: () => tree.collapseAllNodes(),
-      ...getStyles("controls")
-    },
-    collapseAllControlIcon
-  ))), /* @__PURE__ */ React.createElement(
+    [withCopyToClipboard, treeData, onCopy]
+  );
+  const renderCtx = {
+    getStyles,
+    copyToClipboardIcon,
+    expandControlIcon,
+    collapseControlIcon,
+    onExpand,
+    onCollapse,
+    onExpandedChange
+  };
+  const treeComponent = /* @__PURE__ */ React.createElement(
     Tree,
     {
       data: treeData,
       tree,
       levelOffset: 32,
-      renderNode: (payload) => renderJSONNode(payload, theme, props, onNodeClick)
+      renderNode: (payload) => renderJSONNode(payload, props, renderCtx, onNodeClick)
     }
+  );
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(JsonTreeMediaVariables, { size, selector: `.${responsiveClassName}` }), /* @__PURE__ */ React.createElement(
+    Box,
+    {
+      ref,
+      ...getStyles("root", { className: responsiveClassName }),
+      ...others,
+      "data-line-numbers": showLineNumbers || void 0,
+      onKeyDown: handleKeyDown
+    },
+    (title || withExpandAll) && /* @__PURE__ */ React.createElement(Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, title || /* @__PURE__ */ React.createElement("div", null), withExpandAll && isExpandable(data) && /* @__PURE__ */ React.createElement(Group, { gap: "xs", style: { top: 10, zIndex: 1 } }, /* @__PURE__ */ React.createElement(
+      ActionIcon,
+      {
+        size: "xs",
+        variant: "transparent",
+        onClick: () => {
+          const allState = getTreeExpandedState(treeData, "*");
+          if (onExpandedChange) {
+            onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+          } else {
+            tree.expandAllNodes();
+          }
+        },
+        ...getStyles("controls")
+      },
+      expandAllControlIcon
+    ), /* @__PURE__ */ React.createElement(
+      ActionIcon,
+      {
+        size: "xs",
+        variant: "transparent",
+        onClick: () => {
+          if (onExpandedChange) {
+            onExpandedChange([]);
+          } else {
+            tree.collapseAllNodes();
+          }
+        },
+        ...getStyles("controls")
+      },
+      collapseAllControlIcon
+    ))),
+    maxHeight ? /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { mah: maxHeight }, treeComponent) : treeComponent
   ));
 });
 JsonTree.classes = classes;