@gfazioli/mantine-json-tree 2.1.0 → 3.1.0

package/README.md

@@ -18,6 +18,7 @@
 ## Overview
 
 This component is created on top of the [Mantine](https://mantine.dev/) library.
+It requires **Mantine 9.x** and **React 19**.
 
 [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.
 
@@ -26,9 +27,13 @@ Wrapped with Mantine layout primitives like Paper, Stack, and SimpleGrid, JsonTr
 ## Features
 
 - Interactive collapsible tree view for any JSON-serializable data
+- **Search** with text highlight, filtered tree view, and auto-expand matching branches
+- **Redesigned toolbar** with key count badge, global copy, search toggle, and modern icons
+- **Paper wrapper** with `withBorder` for bordered container look
+- **Custom root name** via `rootName` prop
 - 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
+- Copy-to-clipboard on individual nodes + global copy all JSON
 - 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
@@ -39,10 +44,10 @@ Wrapped with Mantine layout primitives like Paper, Stack, and SimpleGrid, JsonTr
 - 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
+- Full Mantine Styles API support with 21 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
+- `onExpand`, `onCollapse`, `onNodeClick`, `onCopy`, and `onCopyAll` callbacks
 
 > [!note]
 >

package/dist/cjs/JsonTree.cjs

@@ -4,11 +4,13 @@
 var React = require('react');
 var iconsReact = require('@tabler/icons-react');
 var core = require('@mantine/core');
+var hooks = require('@mantine/hooks');
 var JsonTreeMediaVariables = require('./JsonTreeMediaVariables.cjs');
 var utils = require('./lib/utils.cjs');
 var JsonTree_module = require('./JsonTree.module.css.cjs');
 
 const defaultProps = {
+  rootName: "root",
   defaultExpanded: false,
   maxDepth: 2,
   withExpandAll: false,
@@ -19,10 +21,71 @@ const defaultProps = {
   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 })
+  expandAllControlIcon: /* @__PURE__ */ React.createElement(iconsReact.IconArrowBarToDown, { size: 16 }),
+  collapseAllControlIcon: /* @__PURE__ */ React.createElement(iconsReact.IconArrowBarToUp, { size: 16 }),
+  copyToClipboardIcon: /* @__PURE__ */ React.createElement(iconsReact.IconCopy, { size: 12 }),
+  withBorder: false,
+  borderRadius: "sm",
+  withKeyCountBadge: false,
+  withCopyAll: false,
+  withSearch: false,
+  copyAllIcon: /* @__PURE__ */ React.createElement(iconsReact.IconCopy, { size: 16 }),
+  searchIcon: /* @__PURE__ */ React.createElement(iconsReact.IconSearch, { size: 16 }),
+  searchPlaceholder: "Filter keys and values...",
+  searchDebounce: 300
 };
+function highlightText(text, query, getStyles) {
+  if (!query) {
+    return text;
+  }
+  const lowerText = text.toLowerCase();
+  const lowerQuery = query.toLowerCase();
+  const idx = lowerText.indexOf(lowerQuery);
+  if (idx === -1) {
+    return text;
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, text.substring(0, idx), /* @__PURE__ */ React.createElement("span", { ...getStyles("searchHighlight") }, text.substring(idx, idx + query.length)), text.substring(idx + query.length));
+}
+function CopyNodeButton({
+  icon,
+  getStyles,
+  onCopy
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const timeoutRef = React.useRef(null);
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const handleClick = async (e) => {
+    const success = await onCopy(e);
+    if (!success) {
+      return;
+    }
+    setCopied(true);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    timeoutRef.current = setTimeout(() => {
+      setCopied(false);
+      timeoutRef.current = null;
+    }, 1500);
+  };
+  return /* @__PURE__ */ React.createElement(
+    core.ActionIcon,
+    {
+      size: "xs",
+      variant: "subtle",
+      color: copied ? "green" : "gray",
+      onClick: handleClick,
+      ...getStyles("copyButton")
+    },
+    copied ? /* @__PURE__ */ React.createElement(iconsReact.IconCheck, { size: 12 }) : icon
+  );
+}
 function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, props, ctx, onNodeClick) {
   const {
     getStyles,
@@ -62,7 +125,9 @@ function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, pro
       const copy = JSON.stringify(value, null, 2);
       await navigator.clipboard.writeText(copy);
       onCopy?.(copy, value);
-    } catch (error) {
+      return true;
+    } catch {
+      return false;
     }
   };
   const handleClick = () => {
@@ -119,26 +184,21 @@ function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, pro
           wrap: "nowrap",
           ...elementProps,
           onClick: handleClick,
-          style: { cursor: onNodeClick ? "pointer" : "default", position: "relative" }
+          style: {
+            cursor: onNodeClick ? "pointer" : "default",
+            position: "relative",
+            backgroundColor: ctx.directMatches?.has(node.value) ? "rgba(251, 191, 36, 0.15)" : void 0,
+            borderRadius: ctx.directMatches?.has(node.value) ? "4px" : void 0
+          }
         },
         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") }, ":")),
+        key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("key"), "data-key": key }, ctx.searchQuery ? highlightText(String(key), ctx.searchQuery, getStyles) : 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);
+          return /* @__PURE__ */ React.createElement(core.Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, ctx.searchQuery ? highlightText(formattedValue, ctx.searchQuery, getStyles) : formattedValue);
         })(),
-        withCopyToClipboard && /* @__PURE__ */ React.createElement(
-          core.ActionIcon,
-          {
-            size: "xs",
-            variant: "subtle",
-            color: "gray",
-            onClick: handleCopy,
-            ...getStyles("copyButton")
-          },
-          copyToClipboardIcon
-        )
+        withCopyToClipboard && /* @__PURE__ */ React.createElement(CopyNodeButton, { icon: copyToClipboardIcon, getStyles, onCopy: handleCopy })
       )
     );
   }
@@ -182,7 +242,12 @@ function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, pro
         "data-expanded": expanded,
         "data-has-children": hasChildren,
         "data-type": type,
-        style: { cursor: onNodeClick ? "pointer" : "default", position: "relative" }
+        style: {
+          cursor: onNodeClick ? "pointer" : "default",
+          position: "relative",
+          backgroundColor: ctx.directMatches?.has(node.value) ? "rgba(251, 191, 36, 0.15)" : void 0,
+          borderRadius: ctx.directMatches?.has(node.value) ? "4px" : void 0
+        }
       },
       lineNumber,
       renderIndentGuides(),
@@ -196,7 +261,7 @@ function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, pro
         },
         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") }, ":")),
+      key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Text, { component: "span", ...getStyles("key") }, ctx.searchQuery ? highlightText(String(key), ctx.searchQuery, getStyles) : 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(
@@ -257,14 +322,25 @@ const varsResolver = core.createVarsResolver(
       lineNumber: { "--json-tree-color-line-number": "var(--mantine-color-gray-5)" },
       itemsCount: {},
       controls: {},
-      copyButton: {}
+      copyButton: {},
+      paper: {},
+      toolbar: {},
+      keyCountBadge: {},
+      copyAllButton: {},
+      searchToggle: {},
+      searchBar: {},
+      searchInput: {},
+      searchHighlight: {
+        "--json-tree-search-highlight-color": "var(--mantine-color-yellow-3)"
+      }
     };
   }
 );
-const JsonTree = core.factory((_props, ref) => {
+const JsonTree = core.factory((_props) => {
   const props = core.useProps("JsonTree", defaultProps, _props);
   const {
     data,
+    rootName,
     defaultExpanded,
     maxDepth,
     onNodeClick,
@@ -291,6 +367,19 @@ const JsonTree = core.factory((_props, ref) => {
     expandControlIcon,
     collapseControlIcon,
     size,
+    withBorder,
+    borderRadius,
+    withKeyCountBadge,
+    keyCountBadgeLabel,
+    withCopyAll,
+    copyAllIcon,
+    onCopyAll,
+    withSearch,
+    searchIcon,
+    searchPlaceholder,
+    searchQuery: controlledSearchQuery,
+    onSearchChange,
+    searchDebounce,
     classNames,
     style,
     styles,
@@ -313,8 +402,8 @@ const JsonTree = core.factory((_props, ref) => {
   });
   const responsiveClassName = core.useRandomClassName();
   const treeData = React.useMemo(
-    () => [utils.convertToTreeData(data, void 0, "root", 0, displayFunctions)],
-    [data, displayFunctions]
+    () => [utils.convertToTreeData(data, rootName ?? "root", rootName ?? "root", 0, displayFunctions)],
+    [data, rootName, displayFunctions]
   );
   const initialExpandedState = React.useMemo(() => {
     if (controlledExpanded) {
@@ -331,7 +420,7 @@ const JsonTree = core.factory((_props, ref) => {
       const expandedNodes = [];
       const traverse = (nodes, depth) => {
         nodes.forEach((node) => {
-          if (depth < maxDepth && node.children) {
+          if (depth < (maxDepth ?? Infinity) && node.children) {
             expandedNodes.push(node.value);
             traverse(node.children, depth + 1);
           }
@@ -353,7 +442,7 @@ const JsonTree = core.factory((_props, ref) => {
       });
       tree.setExpandedState(state);
     }
-  }, [controlledExpanded, tree.setExpandedState]);
+  }, [controlledExpanded]);
   const handleKeyDown = React.useCallback(
     async (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "c" && withCopyToClipboard) {
@@ -379,6 +468,83 @@ const JsonTree = core.factory((_props, ref) => {
     },
     [withCopyToClipboard, treeData, onCopy]
   );
+  const totalKeyCount = React.useMemo(() => utils.getItemCount(data), [data]);
+  const [searchOpen, setSearchOpen] = React.useState(false);
+  const [searchQueryInternal, setSearchQueryInternal] = React.useState("");
+  const activeSearchQuery = controlledSearchQuery ?? searchQueryInternal ?? "";
+  const [debouncedQuery] = hooks.useDebouncedValue(activeSearchQuery, searchDebounce ?? 300);
+  const preSearchExpandedRef = React.useRef(null);
+  const searchResults = React.useMemo(
+    () => utils.searchTree(treeData, debouncedQuery),
+    [treeData, debouncedQuery]
+  );
+  const filteredTreeData = React.useMemo(() => {
+    if (!debouncedQuery || searchResults.matchedPaths.size === 0) {
+      return treeData;
+    }
+    return utils.filterTreeBySearch(treeData, searchResults.matchedPaths);
+  }, [treeData, debouncedQuery, searchResults]);
+  React.useEffect(() => {
+    if (debouncedQuery && searchResults.expandedPaths.length > 0) {
+      if (!preSearchExpandedRef.current) {
+        preSearchExpandedRef.current = { ...tree.expandedState };
+      }
+      const newState = {};
+      searchResults.expandedPaths.forEach((p) => {
+        newState[p] = true;
+      });
+      if (onExpandedChange) {
+        onExpandedChange(Object.keys(newState).filter((k) => newState[k]));
+      } else {
+        tree.setExpandedState(newState);
+      }
+    }
+  }, [debouncedQuery, searchResults]);
+  const handleClearSearch = React.useCallback(() => {
+    setSearchQueryInternal("");
+    onSearchChange?.("");
+    if (preSearchExpandedRef.current) {
+      if (onExpandedChange) {
+        onExpandedChange(
+          Object.keys(preSearchExpandedRef.current).filter((k) => preSearchExpandedRef.current[k])
+        );
+      } else {
+        tree.setExpandedState(preSearchExpandedRef.current);
+      }
+      preSearchExpandedRef.current = null;
+    }
+  }, [onExpandedChange, onSearchChange, tree]);
+  const handleCloseSearch = React.useCallback(() => {
+    setSearchOpen(false);
+    handleClearSearch();
+  }, [handleClearSearch]);
+  const handleExpandAll = React.useCallback(() => {
+    const allState = core.getTreeExpandedState(treeData, "*");
+    if (onExpandedChange) {
+      onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+    } else {
+      tree.expandAllNodes();
+    }
+  }, [treeData, onExpandedChange, tree]);
+  const handleCollapseAll = React.useCallback(() => {
+    if (onExpandedChange) {
+      onExpandedChange([]);
+    } else {
+      tree.collapseAllNodes();
+    }
+  }, [onExpandedChange, tree]);
+  const [copiedAll, setCopiedAll] = React.useState(false);
+  const handleCopyAll = React.useCallback(async () => {
+    try {
+      const json = JSON.stringify(data, null, 2);
+      await navigator.clipboard.writeText(json);
+      onCopyAll?.(json);
+      onCopy?.(json, data);
+      setCopiedAll(true);
+      setTimeout(() => setCopiedAll(false), 1500);
+    } catch {
+    }
+  }, [data, onCopyAll, onCopy]);
   const renderCtx = {
     getStyles,
     copyToClipboardIcon,
@@ -386,60 +552,99 @@ const JsonTree = core.factory((_props, ref) => {
     collapseControlIcon,
     onExpand,
     onCollapse,
-    onExpandedChange
+    onExpandedChange,
+    searchQuery: debouncedQuery || void 0,
+    matchedPaths: debouncedQuery ? searchResults.matchedPaths : void 0,
+    directMatches: debouncedQuery ? searchResults.directMatches : void 0
   };
   const treeComponent = /* @__PURE__ */ React.createElement(
     core.Tree,
     {
-      data: treeData,
+      data: filteredTreeData,
       tree,
       levelOffset: 32,
       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(
+  const showHeader = title || withExpandAll || withKeyCountBadge || withCopyAll || withSearch;
+  const content = /* @__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,
+      "data-searching": debouncedQuery ? true : 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(
+    showHeader && /* @__PURE__ */ React.createElement(core.Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, /* @__PURE__ */ React.createElement(core.Group, { gap: "xs" }, title || /* @__PURE__ */ React.createElement("div", null), withKeyCountBadge && utils.isExpandable(data) && /* @__PURE__ */ React.createElement(core.Badge, { size: "sm", variant: "light", color: "gray", ...getStyles("keyCountBadge") }, keyCountBadgeLabel ? keyCountBadgeLabel(totalKeyCount) : `${totalKeyCount} ${Array.isArray(data) ? "items" : "keys"}`)), /* @__PURE__ */ React.createElement(core.Group, { gap: 4, ...getStyles("toolbar") }, withSearch && /* @__PURE__ */ React.createElement(
       core.ActionIcon,
       {
-        size: "xs",
-        variant: "transparent",
+        size: "sm",
+        variant: searchOpen ? "light" : "subtle",
+        color: "gray",
         onClick: () => {
-          const allState = core.getTreeExpandedState(treeData, "*");
-          if (onExpandedChange) {
-            onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+          if (searchOpen) {
+            handleCloseSearch();
           } else {
-            tree.expandAllNodes();
+            setSearchOpen(true);
           }
         },
+        ...getStyles("searchToggle")
+      },
+      searchIcon
+    ), withExpandAll && utils.isExpandable(data) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      core.ActionIcon,
+      {
+        size: "sm",
+        variant: "subtle",
+        color: "gray",
+        onClick: handleExpandAll,
         ...getStyles("controls")
       },
       expandAllControlIcon
     ), /* @__PURE__ */ React.createElement(
       core.ActionIcon,
       {
-        size: "xs",
-        variant: "transparent",
-        onClick: () => {
-          if (onExpandedChange) {
-            onExpandedChange([]);
-          } else {
-            tree.collapseAllNodes();
-          }
-        },
+        size: "sm",
+        variant: "subtle",
+        color: "gray",
+        onClick: handleCollapseAll,
         ...getStyles("controls")
       },
       collapseAllControlIcon
+    )), withCopyAll && /* @__PURE__ */ React.createElement(
+      core.ActionIcon,
+      {
+        size: "sm",
+        variant: "subtle",
+        color: copiedAll ? "green" : "gray",
+        onClick: handleCopyAll,
+        ...getStyles("copyAllButton")
+      },
+      copiedAll ? /* @__PURE__ */ React.createElement(iconsReact.IconCheck, { size: 16 }) : copyAllIcon
+    ))),
+    searchOpen && withSearch && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(core.Divider, null), /* @__PURE__ */ React.createElement(core.Box, { ...getStyles("searchBar"), p: "xs" }, /* @__PURE__ */ React.createElement(
+      core.TextInput,
+      {
+        placeholder: searchPlaceholder,
+        value: activeSearchQuery,
+        onChange: (e) => {
+          const val = e.currentTarget.value;
+          setSearchQueryInternal(val);
+          onSearchChange?.(val);
+        },
+        leftSection: /* @__PURE__ */ React.createElement(iconsReact.IconSearch, { size: 14 }),
+        rightSection: activeSearchQuery ? /* @__PURE__ */ React.createElement(core.CloseButton, { size: "sm", onClick: handleClearSearch }) : null,
+        size: "sm",
+        ...getStyles("searchInput")
+      }
     ))),
     maxHeight ? /* @__PURE__ */ React.createElement(core.ScrollArea.Autosize, { mah: maxHeight }, treeComponent) : treeComponent
   ));
+  if (withBorder) {
+    return /* @__PURE__ */ React.createElement(core.Paper, { withBorder: true, radius: borderRadius, ...getStyles("paper") }, content);
+  }
+  return content;
 });
 JsonTree.classes = JsonTree_module;
 JsonTree.displayName = "JsonTree";