@uiw/react-json-view 1.5.1 → 1.7.0

package/cjs/node.js

@@ -15,7 +15,7 @@ var _value = require("./value");
 var _TriangleArrow = require("./arrow/TriangleArrow");
 var _store = require("./store");
 var _semicolon = require("./semicolon");
-var _tools = require("./tools");
+var _copied = require("./copied");
 var _ellipsis = require("./comps/ellipsis");
 var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -126,14 +126,21 @@ function RooNode(props) {
       return setShowTools(false);
     };
   }
-  var nameKeys = isArray ? Object.keys(value).map(function (m) {
+  var _useState3 = (0, _react.useState)(value),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    valueData = _useState4[0],
+    setValueData = _useState4[1];
+  (0, _react.useEffect)(function () {
+    return setValueData(value);
+  }, [value]);
+  var nameKeys = isArray ? Object.keys(valueData).map(function (m) {
     return Number(m);
-  }) : Object.keys(value);
+  }) : Object.keys(valueData);
 
   // object
-  var entries = isArray ? Object.entries(value).map(function (m) {
+  var entries = isArray ? Object.entries(valueData).map(function (m) {
     return [Number(m[0]), m[1]];
-  }) : Object.entries(value);
+  }) : Object.entries(valueData);
   if (objectSortKeys) {
     entries = objectSortKeys === true ? entries.sort(function (_ref2, _ref3) {
       var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
@@ -149,6 +156,16 @@ function RooNode(props) {
       return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
     });
   }
+  var countInfo = /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
+    children: [nameKeys.length, " items"]
+  });
+  if (components.countInfo) {
+    countInfo = components.countInfo({
+      count: nameKeys.length,
+      level: level,
+      visible: expand
+    }) || countInfo;
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     className: "".concat(className, " w-rjv-inner")
   }, eventProps), {}, {
@@ -160,7 +177,7 @@ function RooNode(props) {
       onClick: handle,
       children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
-          value: value,
+          value: valueData,
           quotes: quotes,
           "data-keys": keyid,
           render: components.objectKey,
@@ -171,20 +188,28 @@ function RooNode(props) {
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         start: true,
         isArray: isArray,
+        level: level,
         render: components.braces
       }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ellipsis.Ellipsis, {
-        render: components.ellipsis
+        render: components.ellipsis,
+        count: nameKeys.length,
+        level: level
       }), !expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         isArray: isArray,
+        level: level,
         render: components.braces
-      }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
-        children: [nameKeys.length, " items"]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_tools.Tools, {
-        value: value,
-        enableClipboard: enableClipboard,
+      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
+        count: nameKeys.length,
+        level: level,
+        showTools: showTools,
+        visible: expand,
+        value: valueData,
+        setValue: setValueData
+      }), enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+        show: showTools,
+        text: valueData,
         onCopied: onCopied,
-        components: components,
-        showTools: showTools
+        render: components === null || components === void 0 ? void 0 : components.copied
       })]
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       className: "w-rjv-content",
@@ -245,6 +270,7 @@ function RooNode(props) {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         render: components.braces,
         isArray: isArray,
+        level: level,
         style: {
           paddingLeft: 2,
           display: 'inline-block'

package/cjs/semicolon.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
-import { LabelProps } from './value';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { LabelProps } from './value';
+import type { JsonViewProps } from './';
 export declare function usePrevious<T>(value: T): T | undefined;
 interface UseHighlight {
     value: any;

package/cjs/value.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './comps/meta';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { MetaProps } from './comps/meta';
+import type { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const isFloat: (n: number) => boolean;
 export declare const typeMap: {
@@ -53,6 +53,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayObjectSize: boolean;
     enableClipboard: boolean;
     indentWidth: number;
+    level?: number;
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];

package/cjs/value.js

@@ -18,7 +18,7 @@ var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 var Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
@@ -133,6 +133,7 @@ function ValueView(props) {
     indentWidth = props.indentWidth,
     renderKey = props.renderKey,
     quotes = props.quotes,
+    level = props.level,
     renderValue = props.renderValue,
     renderBraces = props.renderBraces,
     enableClipboard = props.enableClipboard,

package/editor.d.ts

@@ -2,6 +2,7 @@
 
 declare module '@uiw/react-json-view/editor' {
   import { JsonViewProps } from '@uiw/react-json-view';
+  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
       value: string;
       prevValue: string;
@@ -9,7 +10,21 @@ declare module '@uiw/react-json-view/editor' {
   };
 
   export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
-    onEdit?: (option: Option) => void;
+    /** Callback when value edit functionality */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => void;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
   }
   const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   export default JsonViewEditor;

package/esm/comps/ellipsis.d.ts

@@ -1,5 +1,7 @@
 import { FC, PropsWithChildren } from 'react';
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
+    count: number;
+    level: number;
     render?: (props: EllipsisProps) => JSX.Element;
 }
 export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;

package/esm/comps/ellipsis.js

@@ -1,11 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["style", "render"];
+var _excluded = ["style", "render", "count", "level"];
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = _ref => {
   var {
       style,
-      render
+      render,
+      count,
+      level
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   var styl = _extends({
@@ -13,7 +15,9 @@ export var Ellipsis = _ref => {
   }, style);
   var className = "w-rjv-ellipsis " + (props.className || '');
   if (render) return render(_extends({
-    style: styl
+    style: styl,
+    count,
+    level
   }, props, {
     className
   }));

package/esm/comps/meta.d.ts

@@ -3,6 +3,7 @@ import { LabelProps } from '../value';
 export interface MetaProps extends LabelProps {
     isArray?: boolean;
     start?: boolean;
-    render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
+    level?: number;
+    render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
 export declare function Meta(props: MetaProps): JSX.Element;

package/esm/comps/meta.js

@@ -1,12 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isArray", "start", "className", "render"];
+var _excluded = ["isArray", "start", "level", "className", "render"];
 import { Label } from '../value';
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Meta(props) {
   var {
       isArray = false,
       start = false,
+      level,
       className,
       render
     } = props,
@@ -14,14 +15,20 @@ export function Meta(props) {
   var mark = isArray ? '[]' : '{}';
   var cls = "w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-" + (start ? 'start' : 'end') + " " + (className || '');
   var color = "var(--w-rjv-" + (isArray ? 'brackets' : 'curlybraces') + "-color, #236a7c)";
-  if (render) return render(_extends({
-    isArray,
-    className: cls,
-    style: {
-      color
-    },
-    children: start ? mark.charAt(0) : mark.charAt(1)
-  }, reset));
+  if (render) {
+    var viev = render(_extends({
+      isArray,
+      level,
+      className: cls,
+      style: {
+        color
+      },
+      children: start ? mark.charAt(0) : mark.charAt(1)
+    }, reset));
+    if (viev) {
+      return viev;
+    }
+  }
   return /*#__PURE__*/_jsx(Label, _extends({
     color: color,
     className: cls

package/esm/editor/countInfoExtra.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { CountInfoProps } from '../';
+export interface CountInfoExtraProps<T> extends CountInfoProps {
+    editable: boolean;
+    showTools: boolean;
+    value: T;
+    setValue: React.Dispatch<React.SetStateAction<T>>;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: (keyOrValue: string, newValue: T, value: T, isAdd: boolean) => boolean;
+}
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/editor/countInfoExtra.js

@@ -0,0 +1,38 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import { AddIcon } from './icon/add';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function CountInfoExtra(props) {
+  var {
+    visible,
+    showTools,
+    value,
+    setValue,
+    onAdd
+  } = props;
+  if (!visible || !showTools) return null;
+  var click = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* (event) {
+      event.stopPropagation();
+      var keyOrValue = 'AddKeyOrValue';
+      var isArray = Array.isArray(value);
+      var isAdd = isArray ? true : !(keyOrValue in value);
+      var result = isArray ? [...value, keyOrValue] : _extends({}, value, {
+        [keyOrValue]: undefined
+      });
+      if (onAdd) {
+        var maybeAdd = yield onAdd(keyOrValue, result, props.value, isAdd);
+        if (maybeAdd) {
+          setValue(result);
+        }
+      }
+    });
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var svgProps = {
+    onClick: click
+  };
+  return /*#__PURE__*/_jsx(AddIcon, _extends({}, svgProps));
+}

package/esm/editor/icon/add.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export interface AddIconProps extends React.SVGAttributes<SVGElement> {
+}
+export declare const AddIcon: (props: AddIconProps) => import("react/jsx-runtime").JSX.Element;

package/esm/editor/icon/add.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var AddIcon = props => {
+  var {
+    style
+  } = props;
+  var defaultStyle = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em'
+  };
+  return /*#__PURE__*/_jsx("svg", _extends({
+    viewBox: "0 0 20 20",
+    fill: "var(--w-rjv-edit-color, currentColor)"
+  }, props, {
+    style: _extends({}, style, defaultStyle),
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M14.1970498,0 L5.81288651,0 C2.17107809,0 0,2.17 0,5.81 L0,14.18 C0,17.83 2.17107809,20 5.81288651,20 L14.1870449,20 C17.8288533,20 19.9999658,17.83 19.9999658,14.19 L19.9999658,5.81 C20.0099363,2.17 17.8388583,0 14.1970498,0 Z M16.0079491,10.75 L10.7553408,10.75 L10.7553408,16 C10.7553408,16.41 10.4151719,16.75 10.0049682,16.75 C9.59476448,16.75 9.25459556,16.41 9.25459556,16 L9.25459556,10.75 L4.00198727,10.75 C3.59178357,10.75 3.25161466,10.41 3.25161466,10 C3.25161466,9.59 3.59178357,9.25 4.00198727,9.25 L9.25459556,9.25 L9.25459556,4 C9.25459556,3.59 9.59476448,3.25 10.0049682,3.25 C10.4151719,3.25 10.7553408,3.59 10.7553408,4 L10.7553408,9.25 L16.0079491,9.25 C16.4181528,9.25 16.7583217,9.59 16.7583217,10 C16.7583217,10.41 16.4181528,10.75 16.0079491,10.75 Z"
+    })
+  }));
+};

package/esm/editor/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import { JsonViewProps } from '../';
+import type { JsonViewProps } from '../';
+import type { CountInfoExtraProps } from './countInfoExtra';
 export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
     /** Callback when value edit functionality */
     onEdit?: (option: {
@@ -9,6 +10,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
         parentName?: string | number;
         type?: 'value' | 'key';
     }) => void;
+    /**
+     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+     */
+    onAdd?: CountInfoExtraProps<T>['onAdd'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
 }

package/esm/editor/index.js

@@ -1,20 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
 import { forwardRef } from 'react';
 import JsonView from '../';
 import { ObjectKey } from './objectKey';
 import { ReValue } from './value';
+import { CountInfoExtra } from './countInfoExtra';
 import { jsx as _jsx } from "react/jsx-runtime";
 var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       onEdit,
       components,
       editable = true,
-      displayDataTypes = true
+      displayDataTypes = true,
+      onAdd
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
   var comps = _extends({}, components, {
+    countInfoExtra: reprops => /*#__PURE__*/_jsx(CountInfoExtra, _extends({}, reprops, {
+      editable: editable,
+      onAdd: onAdd
+    })),
     objectKey: reprops => /*#__PURE__*/_jsx(ObjectKey, _extends({}, reprops, {
       editableValue: editable,
       onEdit: onEdit,

package/esm/editor/objectKey.d.ts

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { SemicolonProps } from '../semicolon';
-import { JsonViewEditorProps } from './';
+import type { SemicolonProps } from '../semicolon';
+import type { JsonViewEditorProps } from './';
 export interface ObjectKeyProps<T extends object> extends SemicolonProps {
     onEdit?: JsonViewEditorProps<T>['onEdit'];
     render?: (props: SemicolonProps & {

package/esm/editor/value.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import type { TypeProps } from '../value';
-import { JsonViewEditorProps } from './';
+import type { JsonViewEditorProps } from './';
 export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
     onEdit?: JsonViewEditorProps<T>['onEdit'];
     quotes?: JsonViewEditorProps<T>['quotes'];

package/esm/editor/value.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "content", "children", "displayDataTypes", "editableValue", "onEdit"];
+var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
@@ -26,7 +26,6 @@ export function ReValue(props) {
       visible,
       quotes,
       style,
-      content,
       displayDataTypes,
       editableValue,
       onEdit
@@ -136,7 +135,7 @@ export function ReValue(props) {
         show: typeStr === 'string'
       }), /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
         ref: $edit,
-        "data-value": content,
+        "data-value": childStr,
         children: typeof curentChild === 'string' ? curentChild : childStr
       })), /*#__PURE__*/_jsx(Quotes, {
         style: style,

package/esm/index.d.ts

@@ -1,11 +1,17 @@
 import React from 'react';
-import { SemicolonProps } from './semicolon';
-import { ValueViewProps } from './value';
-import { CopiedProps } from './copied';
-import { EllipsisProps } from './comps/ellipsis';
-import { MetaProps } from './comps/meta';
+import type { SemicolonProps } from './semicolon';
+import type { ValueViewProps } from './value';
+import type { CopiedProps } from './copied';
+import type { EllipsisProps } from './comps/ellipsis';
+import type { MetaProps } from './comps/meta';
+import type { CountInfoExtraProps } from './editor/countInfoExtra';
 export * from './node';
 export * from './value';
+export interface CountInfoProps {
+    count: number;
+    level: number;
+    visible: boolean;
+}
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -44,6 +50,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         objectKey?: SemicolonProps['render'];
         value?: ValueViewProps<T>['renderValue'];
         copied?: CopiedProps<T>['render'];
+        countInfo?: (props: CountInfoProps) => JSX.Element;
+        countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
     };
 }
 declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/esm/index.js

@@ -16,7 +16,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     reset = _objectWithoutPropertiesLoose(props, _excluded);
   var defaultStyle = _extends({
     lineHeight: 1.4,
-    fontFamily: 'monospace',
+    fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
     color: 'var(--w-rjv-color, #002b36)',
     backgroundColor: 'var(--w-rjv-background-color, #00000000)'
   }, style);

package/esm/node.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-import { Fragment, useId, cloneElement, useState } from 'react';
+import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { Semicolon } from './semicolon';
-import { Tools } from './tools';
+import { Copied } from './copied';
 import { Ellipsis } from './comps/ellipsis';
 import { Meta } from './comps/meta';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -102,10 +102,12 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
+  var [valueData, setValueData] = useState(value);
+  useEffect(() => setValueData(value), [value]);
+  var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
 
   // object
-  var entries = isArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
+  var entries = isArray ? Object.entries(valueData).map(m => [Number(m[0]), m[1]]) : Object.entries(valueData);
   if (objectSortKeys) {
     entries = objectSortKeys === true ? entries.sort((_ref2, _ref3) => {
       var [a] = _ref2;
@@ -117,6 +119,16 @@ export function RooNode(props) {
       return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
     });
   }
+  var countInfo = /*#__PURE__*/_jsxs(CountInfo, {
+    children: [nameKeys.length, " items"]
+  });
+  if (components.countInfo) {
+    countInfo = components.countInfo({
+      count: nameKeys.length,
+      level,
+      visible: expand
+    }) || countInfo;
+  }
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
     className: className + " w-rjv-inner"
   }, eventProps, {
@@ -128,7 +140,7 @@ export function RooNode(props) {
       onClick: handle,
       children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
         children: [/*#__PURE__*/_jsx(Semicolon, {
-          value: value,
+          value: valueData,
           quotes: quotes,
           "data-keys": keyid,
           render: components.objectKey,
@@ -139,20 +151,28 @@ export function RooNode(props) {
       }), /*#__PURE__*/_jsx(Meta, {
         start: true,
         isArray: isArray,
+        level: level,
         render: components.braces
       }), !expand && /*#__PURE__*/_jsx(Ellipsis, {
-        render: components.ellipsis
+        render: components.ellipsis,
+        count: nameKeys.length,
+        level: level
       }), !expand && /*#__PURE__*/_jsx(Meta, {
         isArray: isArray,
+        level: level,
         render: components.braces
-      }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
-        children: [nameKeys.length, " items"]
-      }), /*#__PURE__*/_jsx(Tools, {
-        value: value,
-        enableClipboard: enableClipboard,
+      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
+        count: nameKeys.length,
+        level,
+        showTools,
+        visible: expand,
+        value: valueData,
+        setValue: setValueData
+      }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
+        show: showTools,
+        text: valueData,
         onCopied: onCopied,
-        components: components,
-        showTools: showTools
+        render: components == null ? void 0 : components.copied
       })]
     }), expand && /*#__PURE__*/_jsx(Line, {
       className: "w-rjv-content",
@@ -211,6 +231,7 @@ export function RooNode(props) {
       children: /*#__PURE__*/_jsx(Meta, {
         render: components.braces,
         isArray: isArray,
+        level: level,
         style: {
           paddingLeft: 2,
           display: 'inline-block'

package/esm/semicolon.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
-import { LabelProps } from './value';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { LabelProps } from './value';
+import type { JsonViewProps } from './';
 export declare function usePrevious<T>(value: T): T | undefined;
 interface UseHighlight {
     value: any;

package/esm/value.d.ts

@@ -1,6 +1,6 @@
-import { FC, PropsWithChildren } from 'react';
-import { MetaProps } from './comps/meta';
-import { JsonViewProps } from './';
+import type { FC, PropsWithChildren } from 'react';
+import type { MetaProps } from './comps/meta';
+import type { JsonViewProps } from './';
 export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const isFloat: (n: number) => boolean;
 export declare const typeMap: {
@@ -53,6 +53,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayObjectSize: boolean;
     enableClipboard: boolean;
     indentWidth: number;
+    level?: number;
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];

package/esm/value.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
 import { Fragment, forwardRef, useState } from 'react';
 import { CountInfo } from './node';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.5.1",
+  "version": "1.7.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",