@gfazioli/mantine-json-tree 2.1.0 → 3.1.0

package/dist/esm/JsonTree.mjs

@@ -1,12 +1,14 @@
 'use client';
-import React, { useMemo, useEffect, useCallback } from 'react';
-import { IconCopy, IconLibraryMinus, IconLibraryPlus, IconChevronRight } from '@tabler/icons-react';
-import { createVarsResolver, rem, factory, useProps, useStyles, useRandomClassName, getTreeExpandedState, useTree, Box, Group, ActionIcon, ScrollArea, Tree, Text, Code, Badge, Tooltip } from '@mantine/core';
+import React, { useMemo, useEffect, useCallback, useState, useRef } from 'react';
+import { IconCheck, IconSearch, IconCopy, IconArrowBarToUp, IconArrowBarToDown, IconChevronRight } from '@tabler/icons-react';
+import { createVarsResolver, rem, factory, useProps, useStyles, useRandomClassName, getTreeExpandedState, useTree, Box, Group, Badge, ActionIcon, Divider, TextInput, CloseButton, ScrollArea, Paper, Tree, Text, Code, Tooltip } from '@mantine/core';
+import { useDebouncedValue } from '@mantine/hooks';
 import { JsonTreeMediaVariables } from './JsonTreeMediaVariables.mjs';
-import { convertToTreeData, findNodeByPath, isExpandable, formatValue } from './lib/utils.mjs';
+import { convertToTreeData, findNodeByPath, getItemCount, searchTree, filterTreeBySearch, isExpandable, formatValue } from './lib/utils.mjs';
 import classes from './JsonTree.module.css.mjs';
 
 const defaultProps = {
+  rootName: "root",
   defaultExpanded: false,
   maxDepth: 2,
   withExpandAll: false,
@@ -17,10 +19,71 @@ const defaultProps = {
   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 })
+  expandAllControlIcon: /* @__PURE__ */ React.createElement(IconArrowBarToDown, { size: 16 }),
+  collapseAllControlIcon: /* @__PURE__ */ React.createElement(IconArrowBarToUp, { size: 16 }),
+  copyToClipboardIcon: /* @__PURE__ */ React.createElement(IconCopy, { size: 12 }),
+  withBorder: false,
+  borderRadius: "sm",
+  withKeyCountBadge: false,
+  withCopyAll: false,
+  withSearch: false,
+  copyAllIcon: /* @__PURE__ */ React.createElement(IconCopy, { size: 16 }),
+  searchIcon: /* @__PURE__ */ React.createElement(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] = useState(false);
+  const timeoutRef = useRef(null);
+  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(
+    ActionIcon,
+    {
+      size: "xs",
+      variant: "subtle",
+      color: copied ? "green" : "gray",
+      onClick: handleClick,
+      ...getStyles("copyButton")
+    },
+    copied ? /* @__PURE__ */ React.createElement(IconCheck, { size: 12 }) : icon
+  );
+}
 function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, props, ctx, onNodeClick) {
   const {
     getStyles,
@@ -60,7 +123,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 = () => {
@@ -117,26 +182,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(Text, { component: "span", ...getStyles("key"), "data-key": key }, key), /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("keyValueSeparator") }, ":")),
+        key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key"), "data-key": key }, ctx.searchQuery ? highlightText(String(key), ctx.searchQuery, getStyles) : 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);
+          return /* @__PURE__ */ React.createElement(Code, { ...getStyles("value"), "data-type": type, "data-value": formattedValue }, ctx.searchQuery ? highlightText(formattedValue, ctx.searchQuery, getStyles) : formattedValue);
         })(),
-        withCopyToClipboard && /* @__PURE__ */ React.createElement(
-          ActionIcon,
-          {
-            size: "xs",
-            variant: "subtle",
-            color: "gray",
-            onClick: handleCopy,
-            ...getStyles("copyButton")
-          },
-          copyToClipboardIcon
-        )
+        withCopyToClipboard && /* @__PURE__ */ React.createElement(CopyNodeButton, { icon: copyToClipboardIcon, getStyles, onCopy: handleCopy })
       )
     );
   }
@@ -180,7 +240,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(),
@@ -194,7 +259,7 @@ function renderJSONNode({ node, expanded, hasChildren, elementProps, tree }, pro
         },
         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") }, ":")),
+      key !== void 0 && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Text, { component: "span", ...getStyles("key") }, ctx.searchQuery ? highlightText(String(key), ctx.searchQuery, getStyles) : 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(
@@ -255,14 +320,25 @@ const varsResolver = 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 = factory((_props, ref) => {
+const JsonTree = factory((_props) => {
   const props = useProps("JsonTree", defaultProps, _props);
   const {
     data,
+    rootName,
     defaultExpanded,
     maxDepth,
     onNodeClick,
@@ -289,6 +365,19 @@ const JsonTree = factory((_props, ref) => {
     expandControlIcon,
     collapseControlIcon,
     size,
+    withBorder,
+    borderRadius,
+    withKeyCountBadge,
+    keyCountBadgeLabel,
+    withCopyAll,
+    copyAllIcon,
+    onCopyAll,
+    withSearch,
+    searchIcon,
+    searchPlaceholder,
+    searchQuery: controlledSearchQuery,
+    onSearchChange,
+    searchDebounce,
     classNames,
     style,
     styles,
@@ -311,8 +400,8 @@ const JsonTree = factory((_props, ref) => {
   });
   const responsiveClassName = useRandomClassName();
   const treeData = useMemo(
-    () => [convertToTreeData(data, void 0, "root", 0, displayFunctions)],
-    [data, displayFunctions]
+    () => [convertToTreeData(data, rootName ?? "root", rootName ?? "root", 0, displayFunctions)],
+    [data, rootName, displayFunctions]
   );
   const initialExpandedState = useMemo(() => {
     if (controlledExpanded) {
@@ -329,7 +418,7 @@ const JsonTree = 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);
           }
@@ -351,7 +440,7 @@ const JsonTree = factory((_props, ref) => {
       });
       tree.setExpandedState(state);
     }
-  }, [controlledExpanded, tree.setExpandedState]);
+  }, [controlledExpanded]);
   const handleKeyDown = useCallback(
     async (e) => {
       if ((e.metaKey || e.ctrlKey) && e.key === "c" && withCopyToClipboard) {
@@ -377,6 +466,83 @@ const JsonTree = factory((_props, ref) => {
     },
     [withCopyToClipboard, treeData, onCopy]
   );
+  const totalKeyCount = useMemo(() => getItemCount(data), [data]);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [searchQueryInternal, setSearchQueryInternal] = useState("");
+  const activeSearchQuery = controlledSearchQuery ?? searchQueryInternal ?? "";
+  const [debouncedQuery] = useDebouncedValue(activeSearchQuery, searchDebounce ?? 300);
+  const preSearchExpandedRef = useRef(null);
+  const searchResults = useMemo(
+    () => searchTree(treeData, debouncedQuery),
+    [treeData, debouncedQuery]
+  );
+  const filteredTreeData = useMemo(() => {
+    if (!debouncedQuery || searchResults.matchedPaths.size === 0) {
+      return treeData;
+    }
+    return filterTreeBySearch(treeData, searchResults.matchedPaths);
+  }, [treeData, debouncedQuery, searchResults]);
+  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 = 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 = useCallback(() => {
+    setSearchOpen(false);
+    handleClearSearch();
+  }, [handleClearSearch]);
+  const handleExpandAll = useCallback(() => {
+    const allState = getTreeExpandedState(treeData, "*");
+    if (onExpandedChange) {
+      onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+    } else {
+      tree.expandAllNodes();
+    }
+  }, [treeData, onExpandedChange, tree]);
+  const handleCollapseAll = useCallback(() => {
+    if (onExpandedChange) {
+      onExpandedChange([]);
+    } else {
+      tree.collapseAllNodes();
+    }
+  }, [onExpandedChange, tree]);
+  const [copiedAll, setCopiedAll] = useState(false);
+  const handleCopyAll = 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,
@@ -384,60 +550,99 @@ const JsonTree = 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(
     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, { 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, { size, selector: `.${responsiveClassName}` }), /* @__PURE__ */ React.createElement(
     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(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(
+    showHeader && /* @__PURE__ */ React.createElement(Group, { ...getStyles("header"), justify: "space-between", mod: { sticky: stickyHeader } }, /* @__PURE__ */ React.createElement(Group, { gap: "xs" }, title || /* @__PURE__ */ React.createElement("div", null), withKeyCountBadge && isExpandable(data) && /* @__PURE__ */ React.createElement(Badge, { size: "sm", variant: "light", color: "gray", ...getStyles("keyCountBadge") }, keyCountBadgeLabel ? keyCountBadgeLabel(totalKeyCount) : `${totalKeyCount} ${Array.isArray(data) ? "items" : "keys"}`)), /* @__PURE__ */ React.createElement(Group, { gap: 4, ...getStyles("toolbar") }, withSearch && /* @__PURE__ */ React.createElement(
       ActionIcon,
       {
-        size: "xs",
-        variant: "transparent",
+        size: "sm",
+        variant: searchOpen ? "light" : "subtle",
+        color: "gray",
         onClick: () => {
-          const allState = getTreeExpandedState(treeData, "*");
-          if (onExpandedChange) {
-            onExpandedChange(Object.keys(allState).filter((k) => allState[k]));
+          if (searchOpen) {
+            handleCloseSearch();
           } else {
-            tree.expandAllNodes();
+            setSearchOpen(true);
           }
         },
+        ...getStyles("searchToggle")
+      },
+      searchIcon
+    ), withExpandAll && isExpandable(data) && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      ActionIcon,
+      {
+        size: "sm",
+        variant: "subtle",
+        color: "gray",
+        onClick: handleExpandAll,
         ...getStyles("controls")
       },
       expandAllControlIcon
     ), /* @__PURE__ */ React.createElement(
       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(
+      ActionIcon,
+      {
+        size: "sm",
+        variant: "subtle",
+        color: copiedAll ? "green" : "gray",
+        onClick: handleCopyAll,
+        ...getStyles("copyAllButton")
+      },
+      copiedAll ? /* @__PURE__ */ React.createElement(IconCheck, { size: 16 }) : copyAllIcon
+    ))),
+    searchOpen && withSearch && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Divider, null), /* @__PURE__ */ React.createElement(Box, { ...getStyles("searchBar"), p: "xs" }, /* @__PURE__ */ React.createElement(
+      TextInput,
+      {
+        placeholder: searchPlaceholder,
+        value: activeSearchQuery,
+        onChange: (e) => {
+          const val = e.currentTarget.value;
+          setSearchQueryInternal(val);
+          onSearchChange?.(val);
+        },
+        leftSection: /* @__PURE__ */ React.createElement(IconSearch, { size: 14 }),
+        rightSection: activeSearchQuery ? /* @__PURE__ */ React.createElement(CloseButton, { size: "sm", onClick: handleClearSearch }) : null,
+        size: "sm",
+        ...getStyles("searchInput")
+      }
     ))),
     maxHeight ? /* @__PURE__ */ React.createElement(ScrollArea.Autosize, { mah: maxHeight }, treeComponent) : treeComponent
   ));
+  if (withBorder) {
+    return /* @__PURE__ */ React.createElement(Paper, { withBorder: true, radius: borderRadius, ...getStyles("paper") }, content);
+  }
+  return content;
 });
 JsonTree.classes = classes;
 JsonTree.displayName = "JsonTree";