@gfazioli/mantine-json-tree 2.0.2 → 2.1.0

package/README.md

@@ -1,6 +1,6 @@
 # Mantine Json Tree Component
 
-<img alt="Mantine Json Tree" src="https://github.com/gfazioli/mantine-json-tree/blob/master/logo.png" />
+<img alt="Mantine Json Tree" src="https://github.com/gfazioli/mantine-json-tree/blob/master/logo.jpeg" />
 
 <div align="center">
   
@@ -19,10 +19,31 @@
 
 This component is created on top of the [Mantine](https://mantine.dev/) library.
 
-[Mantine JsonTree](https://gfazioli.github.io/mantine-json-tree) provides a structured, interactive view of heterogeneous data—strings, numbers, booleans, nulls, objects, arrays, and even functions—organized as a collapsible tree. Developers can control initial expansion, show visual indent guides, and customize expand/collapse controls with arbitrary React nodes (e.g., emojis or styled icons) to match their design system. For function values, the component offers flexible rendering modes: show the function signature as text, hide functions entirely, or inspect them as objects when needed. 
+[Mantine JsonTree](https://gfazioli.github.io/mantine-json-tree) provides a structured, interactive view of heterogeneous data—strings, numbers, booleans, nulls, objects, arrays, and even functions—organized as a collapsible tree. Developers can control initial expansion, show visual indent guides, and customize expand/collapse controls with arbitrary React nodes (e.g., emojis or styled icons) to match their design system. For function values, the component offers flexible rendering modes: show the function signature as text, hide functions entirely, or inspect them as objects when needed.
 
 Wrapped with Mantine layout primitives like Paper, Stack, and SimpleGrid, JsonTree integrates cleanly into dashboards, developer tools, and documentation pages where readable, navigable data visualization is essential.
 
+## Features
+
+- Interactive collapsible tree view for any JSON-serializable data
+- Syntax highlighting with customizable colors for 16+ data types (strings, numbers, booleans, null, Date, RegExp, Map, Set, BigInt, Symbol, React elements, etc.)
+- Dark mode support with automatic color adaptation
+- Copy-to-clipboard on individual nodes
+- Keyboard navigation (arrow keys, Space to expand, Ctrl+C to copy)
+- Configurable expansion depth with expand/collapse all controls
+- Controlled expand/collapse state with `expanded` and `onExpandedChange` props
+- Line numbers display
+- Visual indent guides with rotating color palette
+- Path tooltip on hover showing full JSON path
+- Max height with scrollable container
+- Sticky header support with configurable offset
+- Function display modes: as-string, hide, or as-object introspection
+- Responsive font size via Mantine breakpoint objects (CSS-native, no re-renders)
+- Full Mantine Styles API support with 13 style selectors and 25+ CSS variables
+- Custom icons for expand/collapse and copy controls
+- Item count badges for objects and arrays
+- `onExpand`, `onCollapse`, `onNodeClick`, and `onCopy` callbacks
+
 > [!note]
 >
 > → [Demo and Documentation](https://gfazioli.github.io/mantine-json-tree/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)

package/dist/cjs/JsonTree.cjs

@@ -4,6 +4,7 @@
 var React = require('react');
 var iconsReact = require('@tabler/icons-react');
 var core = require('@mantine/core');
+var JsonTreeMediaVariables = require('./JsonTreeMediaVariables.cjs');
 var utils = require('./lib/utils.cjs');
 var JsonTree_module = require('./JsonTree.module.css.cjs');
 
@@ -14,18 +15,210 @@ const defaultProps = {
   showItemsCount: false,
   withCopyToClipboard: false,
   showIndentGuides: false,
+  showLineNumbers: false,
+  showPathOnHover: false,
   stickyHeader: false,
   displayFunctions: "as-string",
   expandAllControlIcon: /* @__PURE__ */ React.createElement(iconsReact.IconLibraryPlus, { size: 16 }),
   collapseAllControlIcon: /* @__PURE__ */ React.createElement(iconsReact.IconLibraryMinus, { size: 16 }),
   copyToClipboardIcon: /* @__PURE__ */ React.createElement(iconsReact.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(core.Tooltip, { label: path, position: "top-start", withArrow: true, openDelay: 300, ...tooltipProps }, content) : content;
+  if (!hasChildren) {
+    return wrapWithTooltip(
+      /* @__PURE__ */ React.createElement(
+        core.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(core.Text, { component: "span", ...getStyles("key"), "data-key": key }, key), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
+        (() => {
+          const formattedValue = utils.formatValue(value, type);
+          return /* @__PURE__ */ React.createElement(core.Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, formattedValue);
+        })(),
+        withCopyToClipboard && /* @__PURE__ */ React.createElement(
+          core.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(
+        iconsReact.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(iconsReact.IconChevronRight, { size: 14 });
+    }
+    return expanded ? collapseControlIcon : expandControlIcon;
+  })();
+  return wrapWithTooltip(
+    /* @__PURE__ */ React.createElement(
+      core.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(
+        core.ActionIcon,
+        {
+          size: "xs",
+          variant: "subtle",
+          onClick: handleToggleExpanded,
+          ...getStyles("expandCollapse")
+        },
+        expandCollapseIcon
+      ),
+      key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("key") }, key), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
+      /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("bracket") }, openBracket),
+      !expanded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Text, { component: "span", size: "xs", ...getStyles("ellipsis") }, "..."), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("bracket") }, closeBracket), itemCount !== void 0 && showItemsCount && /* @__PURE__ */ React.createElement(core.Badge, { size: "xs", variant: "light", color: "gray", ...getStyles("itemsCount") }, itemCount)),
+      withCopyToClipboard && /* @__PURE__ */ React.createElement(
+        core.ActionIcon,
+        {
+          size: "xs",
+          variant: "subtle",
+          color: "gray",
+          onClick: handleCopy,
+          ...getStyles("copyButton")
+        },
+        copyToClipboardIcon
+      )
+    )
+  );
+}
 const varsResolver = core.createVarsResolver(
-  (_, { size, stickyHeader, stickyHeaderOffset }) => {
+  (_, { stickyHeader, stickyHeaderOffset }) => {
     return {
       root: {
         "--json-tree-font-family": "var(--mantine-font-family-monospace)",
-        "--json-tree-font-size": core.getFontSize(size) || "var(--mantine-font-size-xs)"
+        "--json-tree-font-size": void 0
       },
       header: {
         "--json-tree-header-background-color": "inherit",
@@ -60,7 +253,8 @@ const varsResolver = core.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: {}
@@ -75,12 +269,19 @@ const JsonTree = core.factory((_props, ref) => {
     maxDepth,
     onNodeClick,
     onCopy,
+    onExpand,
+    onCollapse,
     withExpandAll,
-    variant,
     title,
     showItemsCount,
     withCopyToClipboard,
     showIndentGuides,
+    showLineNumbers,
+    showPathOnHover,
+    tooltipProps,
+    maxHeight,
+    expanded: controlledExpanded,
+    onExpandedChange,
     stickyHeaderOffset,
     stickyHeader,
     displayFunctions,
@@ -89,6 +290,7 @@ const JsonTree = core.factory((_props, ref) => {
     copyToClipboardIcon,
     expandControlIcon,
     collapseControlIcon,
+    size,
     classNames,
     style,
     styles,
@@ -109,12 +311,19 @@ const JsonTree = core.factory((_props, ref) => {
     vars,
     varsResolver
   });
-  const theme = core.useMantineTheme();
+  const responsiveClassName = core.useRandomClassName();
   const treeData = React.useMemo(
     () => [utils.convertToTreeData(data, void 0, "root", 0, displayFunctions)],
     [data, displayFunctions]
   );
   const initialExpandedState = React.useMemo(() => {
+    if (controlledExpanded) {
+      const state = {};
+      controlledExpanded.forEach((path) => {
+        state[path] = true;
+      });
+      return state;
+    }
     if (defaultExpanded) {
       if (maxDepth === -1) {
         return core.getTreeExpandedState(treeData, "*");
@@ -132,190 +341,104 @@ const JsonTree = core.factory((_props, ref) => {
       return core.getTreeExpandedState(treeData, expandedNodes);
     }
     return {};
-  }, [treeData, defaultExpanded, maxDepth]);
+  }, [treeData, defaultExpanded, maxDepth, controlledExpanded]);
   const tree = core.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(
-        core.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(core.Text, { component: "span", ...getStyles("key"), "data-key": key }, key), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
-        (() => {
-          const formattedValue = utils.formatValue(value, type);
-          return /* @__PURE__ */ React.createElement(core.Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, formattedValue);
-        })(),
-        withCopyToClipboard2 && /* @__PURE__ */ React.createElement(
-          core.ActionIcon,
-          {
-            size: "xs",
-            variant: "subtle",
-            color: "gray",
-            onClick: handleCopy,
-            ...getStyles("copyButton")
-          },
-          copyToClipboardIcon
-        )
-      );
+  React.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(
-          iconsReact.IconChevronRight,
-          {
-            size: 14,
-            style: {
-              transform: expanded ? "rotate(90deg)" : "rotate(0deg)",
-              transition: "transform 0.2s ease"
-            }
-          }
+  }, [controlledExpanded, tree.setExpandedState]);
+  const handleKeyDown = React.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 = utils.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(iconsReact.IconChevronRight, { size: 14 });
+        }
       }
-      return expanded ? collapseControlIcon : expandControlIcon;
-    })();
-    return /* @__PURE__ */ React.createElement(
-      core.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(
-        core.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(core.Text, { component: "span", ...getStyles("key") }, key), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
-      /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("bracket") }, openBracket),
-      !expanded && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Text, { component: "span", size: "xs", ...getStyles("ellipsis") }, "..."), /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("bracket") }, closeBracket), itemCount !== void 0 && showItemsCount2 && /* @__PURE__ */ React.createElement(core.Badge, { size: "xs", variant: "light", color: "gray", ...getStyles("itemsCount") }, itemCount)),
-      withCopyToClipboard2 && /* @__PURE__ */ React.createElement(
-        core.ActionIcon,
-        {
-          size: "xs",
-          variant: "subtle",
-          color: "gray",
-          onClick: handleCopy,
-          ...getStyles("copyButton")
-        },
-        copyToClipboardIcon
-      )
-    );
-  }
-  return /* @__PURE__ */ React.createElement(core.Box, { ref, ...getStyles("root"), ...others }, (title || withExpandAll) && /* @__PURE__ */ React.createElement(core.Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, title || /* @__PURE__ */ React.createElement("div", null), withExpandAll && utils.isExpandable(data) && /* @__PURE__ */ React.createElement(core.Group, { gap: "xs", style: { top: 10, zIndex: 1 } }, /* @__PURE__ */ React.createElement(
-    core.ActionIcon,
-    {
-      size: "xs",
-      variant: "transparent",
-      onClick: () => tree.expandAllNodes(),
-      ...getStyles("controls")
     },
-    expandAllControlIcon
-  ), /* @__PURE__ */ React.createElement(
-    core.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(
     core.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.JsonTreeMediaVariables, { size, selector: `.${responsiveClassName}` }), /* @__PURE__ */ React.createElement(
+    core.Box,
+    {
+      ref,
+      ...getStyles("root", { className: responsiveClassName }),
+      ...others,
+      "data-line-numbers": showLineNumbers || void 0,
+      onKeyDown: handleKeyDown
+    },
+    (title || withExpandAll) && /* @__PURE__ */ React.createElement(core.Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, title || /* @__PURE__ */ React.createElement("div", null), withExpandAll && utils.isExpandable(data) && /* @__PURE__ */ React.createElement(core.Group, { gap: "xs", style: { top: 10, zIndex: 1 } }, /* @__PURE__ */ React.createElement(
+      core.ActionIcon,
+      {
+        size: "xs",
+        variant: "transparent",
+        onClick: () => {
+          const allState = core.getTreeExpandedState(treeData, "*");
+          if (onExpandedChange) {
+            onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+          } else {
+            tree.expandAllNodes();
+          }
+        },
+        ...getStyles("controls")
+      },
+      expandAllControlIcon
+    ), /* @__PURE__ */ React.createElement(
+      core.ActionIcon,
+      {
+        size: "xs",
+        variant: "transparent",
+        onClick: () => {
+          if (onExpandedChange) {
+            onExpandedChange([]);
+          } else {
+            tree.collapseAllNodes();
+          }
+        },
+        ...getStyles("controls")
+      },
+      collapseAllControlIcon
+    ))),
+    maxHeight ? /* @__PURE__ */ React.createElement(core.ScrollArea.Autosize, { mah: maxHeight }, treeComponent) : treeComponent
   ));
 });
 JsonTree.classes = JsonTree_module;