@gfazioli/mantine-json-tree 2.0.2 → 2.1.0

package/dist/styles.css

@@ -1 +1 @@
-.me_e3fe2989{font-family:var(--json-tree-font-family);font-size:var(--json-tree-font-size)}.me_cb75fd74{background-color:var(--json-tree-header-background-color,inherit);padding:var(--mantine-spacing-xs)}.me_cb75fd74[data-sticky=true]{position:sticky;top:var(--json-tree-header-sticky-offset,0);z-index:3}.me_5ecbb76c{color:inherit;font-size:inherit}.me_93bdc4d8{color:var(--json-tree-color-key);font-size:inherit;font-weight:500}.me_9bf8fdaa{background-color:transparent;border-radius:var(--mantine-radius-sm);font-family:var(--json-tree-value-font-family,var(--json-tree-font-family));font-size:inherit;padding:2px 6px}.me_9bf8fdaa[data-type=string]{color:var(--json-tree-color-string)}.me_9bf8fdaa[data-type=number]{color:var(--json-tree-color-number)}.me_9bf8fdaa[data-type=boolean]{color:var(--json-tree-color-boolean)}.me_9bf8fdaa[data-type=null],.me_9bf8fdaa[data-type=undefined]{color:var(--json-tree-color-null);font-style:italic}.me_9bf8fdaa[data-type=function]{color:var(--json-tree-color-function);font-style:italic}.me_9bf8fdaa[data-type=react-element]{color:var(--json-tree-color-react-element);font-style:italic}.me_9bf8fdaa[data-type=date]{color:var(--json-tree-color-date)}.me_9bf8fdaa[data-type=infinity],.me_9bf8fdaa[data-type=nan]{color:var(--json-tree-color-nan);font-style:italic}.me_9bf8fdaa[data-type=bigint]{color:var(--json-tree-color-bigint)}.me_9bf8fdaa[data-type=symbol]{color:var(--json-tree-color-symbol);font-style:italic}.me_9bf8fdaa[data-type=regexp]{color:var(--json-tree-color-regexp)}.me_9bf8fdaa[data-type=map],.me_9bf8fdaa[data-type=set]{color:var(--json-tree-color-map);font-weight:600}.me_7c12eea1{color:var(--json-tree-color-bracket);font-family:var(--json-tree-font-family);font-size:inherit;font-weight:700;user-select:none}.me_13a55df8{color:var(--mantine-color-dark-3);font-size:inherit}.me_338ae66e{opacity:0;transition:opacity .15s ease}.me_338ae66e:focus,.me_e3fe2989:hover .me_338ae66e{opacity:1}.me_c97b8329{bottom:0;opacity:.4;pointer-events:none;position:absolute;top:0;width:1px}.me_c97b8329[data-color-index="0"]{background-color:var(--json-tree-indent-guide-color-0)}.me_c97b8329[data-color-index="1"]{background-color:var(--json-tree-indent-guide-color-1)}.me_c97b8329[data-color-index="2"]{background-color:var(--json-tree-indent-guide-color-2)}.me_c97b8329[data-color-index="3"]{background-color:var(--json-tree-indent-guide-color-3)}.me_c97b8329[data-color-index="4"]{background-color:var(--json-tree-indent-guide-color-4)}
+.me_e3fe2989{font-family:var(--json-tree-font-family);font-size:var(--json-tree-font-size)}:where([data-mantine-color-scheme=dark]) .me_e3fe2989{--json-tree-color-key:var(--mantine-color-blue-4);--json-tree-color-string:var(--mantine-color-green-5);--json-tree-color-number:var(--mantine-color-violet-5);--json-tree-color-boolean:var(--mantine-color-orange-5);--json-tree-color-null:var(--mantine-color-gray-5);--json-tree-color-function:var(--mantine-color-cyan-5);--json-tree-color-react-element:var(--mantine-color-pink-5);--json-tree-color-date:var(--mantine-color-teal-5);--json-tree-color-nan:var(--mantine-color-red-5);--json-tree-color-infinity:var(--mantine-color-red-5);--json-tree-color-bigint:var(--mantine-color-indigo-5);--json-tree-color-symbol:var(--mantine-color-yellow-5);--json-tree-color-regexp:var(--mantine-color-lime-5);--json-tree-color-map:var(--mantine-color-grape-5);--json-tree-color-set:var(--mantine-color-grape-5);--json-tree-color-bracket:var(--mantine-color-gray-6);--json-tree-color-ellipsis:var(--mantine-color-gray-5);--json-tree-color-line-number:var(--mantine-color-gray-6)}.me_cb75fd74{background-color:var(--json-tree-header-background-color,inherit);padding:var(--mantine-spacing-xs)}.me_cb75fd74[data-sticky=true]{position:sticky;top:var(--json-tree-header-sticky-offset,0);z-index:3}.me_5ecbb76c{color:inherit;font-size:inherit}.me_93bdc4d8{color:var(--json-tree-color-key);font-size:inherit;font-weight:500}.me_9bf8fdaa{background-color:transparent;border-radius:var(--mantine-radius-sm);font-family:var(--json-tree-value-font-family,var(--json-tree-font-family));font-size:inherit;padding:2px 6px}.me_9bf8fdaa[data-type=string]{color:var(--json-tree-color-string)}.me_9bf8fdaa[data-type=number]{color:var(--json-tree-color-number)}.me_9bf8fdaa[data-type=boolean]{color:var(--json-tree-color-boolean)}.me_9bf8fdaa[data-type=null],.me_9bf8fdaa[data-type=undefined]{color:var(--json-tree-color-null);font-style:italic}.me_9bf8fdaa[data-type=function]{color:var(--json-tree-color-function);font-style:italic}.me_9bf8fdaa[data-type=react-element]{color:var(--json-tree-color-react-element);font-style:italic}.me_9bf8fdaa[data-type=date]{color:var(--json-tree-color-date)}.me_9bf8fdaa[data-type=infinity],.me_9bf8fdaa[data-type=nan]{color:var(--json-tree-color-nan);font-style:italic}.me_9bf8fdaa[data-type=bigint]{color:var(--json-tree-color-bigint)}.me_9bf8fdaa[data-type=symbol]{color:var(--json-tree-color-symbol);font-style:italic}.me_9bf8fdaa[data-type=regexp]{color:var(--json-tree-color-regexp)}.me_9bf8fdaa[data-type=map],.me_9bf8fdaa[data-type=set]{color:var(--json-tree-color-map);font-weight:600}.me_7c12eea1{color:var(--json-tree-color-bracket);font-family:var(--json-tree-font-family);font-size:inherit;font-weight:700;user-select:none}.me_13a55df8{color:var(--json-tree-color-ellipsis);font-size:inherit}.me_338ae66e{opacity:0;transition:opacity .15s ease}.me_338ae66e:focus,.me_e3fe2989:hover .me_338ae66e{opacity:1}.me_e3fe2989[data-line-numbers]{counter-reset:json-tree-line;padding-left:3em;position:relative}.me_e3fe2989[data-line-numbers] [role=treeitem]{counter-increment:json-tree-line;position:relative}.me_733cffc4{color:var(--json-tree-color-line-number);font-size:inherit;left:-3em;opacity:.5;position:absolute;text-align:right;user-select:none;width:2.5em}.me_733cffc4:before{content:counter(json-tree-line)}.me_c97b8329{bottom:0;opacity:.4;pointer-events:none;position:absolute;top:0;width:1px}.me_c97b8329[data-color-index="0"]{background-color:var(--json-tree-indent-guide-color-0)}.me_c97b8329[data-color-index="1"]{background-color:var(--json-tree-indent-guide-color-1)}.me_c97b8329[data-color-index="2"]{background-color:var(--json-tree-indent-guide-color-2)}.me_c97b8329[data-color-index="3"]{background-color:var(--json-tree-indent-guide-color-3)}.me_c97b8329[data-color-index="4"]{background-color:var(--json-tree-indent-guide-color-4)}

package/dist/styles.layer.css

@@ -1 +1 @@
-@layer mantine-json-tree {.me_e3fe2989{font-family:var(--json-tree-font-family);font-size:var(--json-tree-font-size)}.me_cb75fd74{background-color:var(--json-tree-header-background-color,inherit);padding:var(--mantine-spacing-xs)}.me_cb75fd74[data-sticky=true]{position:sticky;top:var(--json-tree-header-sticky-offset,0);z-index:3}.me_5ecbb76c{color:inherit;font-size:inherit}.me_93bdc4d8{color:var(--json-tree-color-key);font-size:inherit;font-weight:500}.me_9bf8fdaa{background-color:transparent;border-radius:var(--mantine-radius-sm);font-family:var(--json-tree-value-font-family,var(--json-tree-font-family));font-size:inherit;padding:2px 6px}.me_9bf8fdaa[data-type=string]{color:var(--json-tree-color-string)}.me_9bf8fdaa[data-type=number]{color:var(--json-tree-color-number)}.me_9bf8fdaa[data-type=boolean]{color:var(--json-tree-color-boolean)}.me_9bf8fdaa[data-type=null],.me_9bf8fdaa[data-type=undefined]{color:var(--json-tree-color-null);font-style:italic}.me_9bf8fdaa[data-type=function]{color:var(--json-tree-color-function);font-style:italic}.me_9bf8fdaa[data-type=react-element]{color:var(--json-tree-color-react-element);font-style:italic}.me_9bf8fdaa[data-type=date]{color:var(--json-tree-color-date)}.me_9bf8fdaa[data-type=infinity],.me_9bf8fdaa[data-type=nan]{color:var(--json-tree-color-nan);font-style:italic}.me_9bf8fdaa[data-type=bigint]{color:var(--json-tree-color-bigint)}.me_9bf8fdaa[data-type=symbol]{color:var(--json-tree-color-symbol);font-style:italic}.me_9bf8fdaa[data-type=regexp]{color:var(--json-tree-color-regexp)}.me_9bf8fdaa[data-type=map],.me_9bf8fdaa[data-type=set]{color:var(--json-tree-color-map);font-weight:600}.me_7c12eea1{color:var(--json-tree-color-bracket);font-family:var(--json-tree-font-family);font-size:inherit;font-weight:700;user-select:none}.me_13a55df8{color:var(--mantine-color-dark-3);font-size:inherit}.me_338ae66e{opacity:0;transition:opacity .15s ease}.me_338ae66e:focus,.me_e3fe2989:hover .me_338ae66e{opacity:1}.me_c97b8329{bottom:0;opacity:.4;pointer-events:none;position:absolute;top:0;width:1px}.me_c97b8329[data-color-index="0"]{background-color:var(--json-tree-indent-guide-color-0)}.me_c97b8329[data-color-index="1"]{background-color:var(--json-tree-indent-guide-color-1)}.me_c97b8329[data-color-index="2"]{background-color:var(--json-tree-indent-guide-color-2)}.me_c97b8329[data-color-index="3"]{background-color:var(--json-tree-indent-guide-color-3)}.me_c97b8329[data-color-index="4"]{background-color:var(--json-tree-indent-guide-color-4)}}
+@layer mantine-json-tree {.me_e3fe2989{font-family:var(--json-tree-font-family);font-size:var(--json-tree-font-size)}:where([data-mantine-color-scheme=dark]) .me_e3fe2989{--json-tree-color-key:var(--mantine-color-blue-4);--json-tree-color-string:var(--mantine-color-green-5);--json-tree-color-number:var(--mantine-color-violet-5);--json-tree-color-boolean:var(--mantine-color-orange-5);--json-tree-color-null:var(--mantine-color-gray-5);--json-tree-color-function:var(--mantine-color-cyan-5);--json-tree-color-react-element:var(--mantine-color-pink-5);--json-tree-color-date:var(--mantine-color-teal-5);--json-tree-color-nan:var(--mantine-color-red-5);--json-tree-color-infinity:var(--mantine-color-red-5);--json-tree-color-bigint:var(--mantine-color-indigo-5);--json-tree-color-symbol:var(--mantine-color-yellow-5);--json-tree-color-regexp:var(--mantine-color-lime-5);--json-tree-color-map:var(--mantine-color-grape-5);--json-tree-color-set:var(--mantine-color-grape-5);--json-tree-color-bracket:var(--mantine-color-gray-6);--json-tree-color-ellipsis:var(--mantine-color-gray-5);--json-tree-color-line-number:var(--mantine-color-gray-6)}.me_cb75fd74{background-color:var(--json-tree-header-background-color,inherit);padding:var(--mantine-spacing-xs)}.me_cb75fd74[data-sticky=true]{position:sticky;top:var(--json-tree-header-sticky-offset,0);z-index:3}.me_5ecbb76c{color:inherit;font-size:inherit}.me_93bdc4d8{color:var(--json-tree-color-key);font-size:inherit;font-weight:500}.me_9bf8fdaa{background-color:transparent;border-radius:var(--mantine-radius-sm);font-family:var(--json-tree-value-font-family,var(--json-tree-font-family));font-size:inherit;padding:2px 6px}.me_9bf8fdaa[data-type=string]{color:var(--json-tree-color-string)}.me_9bf8fdaa[data-type=number]{color:var(--json-tree-color-number)}.me_9bf8fdaa[data-type=boolean]{color:var(--json-tree-color-boolean)}.me_9bf8fdaa[data-type=null],.me_9bf8fdaa[data-type=undefined]{color:var(--json-tree-color-null);font-style:italic}.me_9bf8fdaa[data-type=function]{color:var(--json-tree-color-function);font-style:italic}.me_9bf8fdaa[data-type=react-element]{color:var(--json-tree-color-react-element);font-style:italic}.me_9bf8fdaa[data-type=date]{color:var(--json-tree-color-date)}.me_9bf8fdaa[data-type=infinity],.me_9bf8fdaa[data-type=nan]{color:var(--json-tree-color-nan);font-style:italic}.me_9bf8fdaa[data-type=bigint]{color:var(--json-tree-color-bigint)}.me_9bf8fdaa[data-type=symbol]{color:var(--json-tree-color-symbol);font-style:italic}.me_9bf8fdaa[data-type=regexp]{color:var(--json-tree-color-regexp)}.me_9bf8fdaa[data-type=map],.me_9bf8fdaa[data-type=set]{color:var(--json-tree-color-map);font-weight:600}.me_7c12eea1{color:var(--json-tree-color-bracket);font-family:var(--json-tree-font-family);font-size:inherit;font-weight:700;user-select:none}.me_13a55df8{color:var(--json-tree-color-ellipsis);font-size:inherit}.me_338ae66e{opacity:0;transition:opacity .15s ease}.me_338ae66e:focus,.me_e3fe2989:hover .me_338ae66e{opacity:1}.me_e3fe2989[data-line-numbers]{counter-reset:json-tree-line;padding-left:3em;position:relative}.me_e3fe2989[data-line-numbers] [role=treeitem]{counter-increment:json-tree-line;position:relative}.me_733cffc4{color:var(--json-tree-color-line-number);font-size:inherit;left:-3em;opacity:.5;position:absolute;text-align:right;user-select:none;width:2.5em}.me_733cffc4:before{content:counter(json-tree-line)}.me_c97b8329{bottom:0;opacity:.4;pointer-events:none;position:absolute;top:0;width:1px}.me_c97b8329[data-color-index="0"]{background-color:var(--json-tree-indent-guide-color-0)}.me_c97b8329[data-color-index="1"]{background-color:var(--json-tree-indent-guide-color-1)}.me_c97b8329[data-color-index="2"]{background-color:var(--json-tree-indent-guide-color-2)}.me_c97b8329[data-color-index="3"]{background-color:var(--json-tree-indent-guide-color-3)}.me_c97b8329[data-color-index="4"]{background-color:var(--json-tree-indent-guide-color-4)}}

package/dist/types/JsonTree.d.ts

@@ -1,7 +1,6 @@
 import React from 'react';
-import { Factory, MantineSize, StylesApiProps, type BoxProps } from '@mantine/core';
-export type JsonTreeDirection = 'clockwise' | 'counter-clockwise';
-export type JsonTreeStylesNames = 'root' | 'header' | 'controls' | 'expandCollapse' | 'key' | 'keyValueSeparator' | 'value' | 'bracket' | 'ellipsis' | 'itemsCount' | 'indentGuide' | 'copyButton';
+import { Factory, MantineSize, StylesApiProps, type BoxProps, type StyleProp, type TooltipProps } from '@mantine/core';
+export type JsonTreeStylesNames = 'root' | 'header' | 'controls' | 'expandCollapse' | 'key' | 'keyValueSeparator' | 'value' | 'bracket' | 'ellipsis' | 'itemsCount' | 'indentGuide' | 'copyButton' | 'lineNumber';
 export type JsonTreeCssVariables = {
     root: '--json-tree-font-family' | '--json-tree-font-size';
     header: '--json-tree-header-background-color' | '--json-tree-header-sticky-offset';
@@ -10,7 +9,8 @@ export type JsonTreeCssVariables = {
     bracket: '--json-tree-color-bracket';
     indentGuide: '--json-tree-indent-guide-color-0' | '--json-tree-indent-guide-color-1' | '--json-tree-indent-guide-color-2' | '--json-tree-indent-guide-color-3' | '--json-tree-indent-guide-color-4';
     expandCollapse: never;
-    ellipsis: never;
+    ellipsis: '--json-tree-color-ellipsis';
+    lineNumber: '--json-tree-color-line-number';
     itemsCount: never;
     controls: never;
     keyValueSeparator: never;
@@ -27,10 +27,14 @@ export interface JsonTreeBaseProps {
     onNodeClick?: (path: string, value: any) => void;
     /** Callback when a value is copied to clipboard */
     onCopy?: (copy: string, value: unknown) => void;
+    /** Callback when a node is expanded */
+    onExpand?: (path: string) => void;
+    /** Callback when a node is collapsed */
+    onCollapse?: (path: string) => void;
     /** Whether to show the root expand/collapse all button @default false */
     withExpandAll?: boolean;
-    /** Size of the font @default 'xs' */
-    size?: MantineSize | (string & {}) | number;
+    /** Size of the font, supports responsive object @default 'xs' */
+    size?: StyleProp<MantineSize | (string & {}) | number>;
     /** Title displayed above the JSON tree  */
     title?: React.ReactNode;
     /** Whether to show item counts for objects and arrays @default false */
@@ -39,6 +43,18 @@ export interface JsonTreeBaseProps {
     withCopyToClipboard?: boolean;
     /** Whether to show indent guides (vertical lines) for nested nodes @default false */
     showIndentGuides?: boolean;
+    /** Whether to show line numbers @default false */
+    showLineNumbers?: boolean;
+    /** Whether to show the full JSON path in a tooltip on hover @default false */
+    showPathOnHover?: boolean;
+    /** Props passed to the Tooltip component when showPathOnHover is enabled */
+    tooltipProps?: Omit<TooltipProps, 'label' | 'children'>;
+    /** Maximum height of the tree, enables scrolling when content exceeds this value */
+    maxHeight?: React.CSSProperties['maxHeight'];
+    /** Controlled expanded state (array of node paths that are expanded) */
+    expanded?: string[];
+    /** Callback when expanded state changes */
+    onExpandedChange?: (expanded: string[]) => void;
     /** If set, the header is sticky @default `false` */
     stickyHeader?: boolean;
     /** Offset for the sticky header (e.g. to account for a fixed navbar) @default 0*/

package/dist/types/JsonTreeMediaVariables.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { MantineSize, type StyleProp } from '@mantine/core';
+interface JsonTreeMediaVariablesProps {
+    size?: StyleProp<MantineSize | (string & {}) | number>;
+    selector: string;
+}
+export declare function JsonTreeMediaVariables({ size, selector }: JsonTreeMediaVariablesProps): React.JSX.Element;
+export {};

package/dist/types/index.d.mts

@@ -1,2 +1,3 @@
 export { JsonTree } from './JsonTree';
 export type { JsonTreeBaseProps, JsonTreeCssVariables, JsonTreeFactory, JsonTreeFunctionDisplay, JsonTreeProps, JsonTreeStylesNames, } from './JsonTree';
+export type { JSONTreeNodeData, ValueType } from './lib/utils';

package/dist/types/index.d.ts

@@ -1,2 +1,3 @@
 export { JsonTree } from './JsonTree';
 export type { JsonTreeBaseProps, JsonTreeCssVariables, JsonTreeFactory, JsonTreeFunctionDisplay, JsonTreeProps, JsonTreeStylesNames, } from './JsonTree';
+export type { JSONTreeNodeData, ValueType } from './lib/utils';

package/dist/types/lib/utils.d.ts

@@ -34,3 +34,7 @@ export declare function getItemCount(value: any): number;
  * Convert JSON data to Mantine Tree format.
  */
 export declare function convertToTreeData(value: any, key?: string, path?: string, depth?: number, displayFunctions?: JsonTreeFunctionDisplay): JSONTreeNodeData;
+/**
+ * Find a node in the tree by its path value.
+ */
+export declare function findNodeByPath(nodes: JSONTreeNodeData[], targetPath: string): JSONTreeNodeData | null;

package/package.json

@@ -1,19 +1,26 @@
 {
   "name": "@gfazioli/mantine-json-tree",
-  "version": "2.0.2",
+  "version": "2.1.0",
   "description": "A Mantine extension component that renders interactive JSON trees with syntax highlighting, collapsible nodes, copy-to-clipboard, and configurable expansion depth.",
   "homepage": "https://gfazioli.github.io/mantine-json-tree/",
   "packageManager": "yarn@4.0.1",
   "license": "MIT",
   "author": "Giovambattista Fazioli <giovambattista.fazioli@gmail.com>",
   "keywords": [
-    "extension",
-    "json-tree",
-    "json-view",
     "mantine",
+    "mantine-ui",
+    "mantine-v8",
     "react",
     "react-component",
-    "typescript"
+    "typescript",
+    "extension",
+    "component",
+    "json-tree",
+    "json-view",
+    "json-viewer",
+    "syntax-highlighting",
+    "collapsible-tree",
+    "developer-tools"
   ],
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.mjs",