@uiw/react-json-view 1.8.2 → 1.8.4

package/README.md

@@ -280,47 +280,6 @@ export default function Demo() {
 
 ## Render
 
-```tsx mdx:preview
-import React from 'react';
-import JsonView from '@uiw/react-json-view';
-
-const object = {
-  string: 'Lorem ipsum dolor sit amet',
-  integer: 42,
-  float: 114.514,
-  object: {
-    'first-child': true,
-    'second-child': false,
-    'last-child': null,
-  },
-}
-export default function Demo() {
-  return (
-    <JsonView
-      value={object}
-      keyName="root"
-      quotes=""
-      displayObjectSize={false}
-      displayDataTypes={false}
-      style={{
-        '--w-rjv-background-color': '#ffffff',
-        '--w-rjv-border-left-width': '0',
-      }}
-      components={{
-        braces: () => <span />,
-        ellipsis: () => <React.Fragment />,
-        objectKey: ({ value, keyName, parentName, ...props}) => {
-          if (keyName === 'integer' && typeof value === 'number' && value > 40) {
-            return <del {...props} />
-          }
-          return <span {...props}  />
-        }
-      }}
-    />
-  )
-}
-```
-
 **Preview Picture**
 
 ```tsx mdx:preview
@@ -333,7 +292,7 @@ const object = {
   integer: 42,
 }
 
-function value({ type, children, value, setValue, keyName, visible, ...props }) {
+function value({ type, children, value, setValue, keyName, parentValue, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(value)) {
     return (
       <span {...props}>
@@ -386,7 +345,7 @@ export default function Demo() {
 import React from 'react';
 import JsonView from '@uiw/react-json-view';
 
-function value({ type, children, visible, keyName, value, setValue, ...props }) {
+function value({ type, children, visible, keyName, parentValue, value, setValue, ...props }) {
   if (value instanceof URL) {
     return (
       <span {...props}>
@@ -513,7 +472,7 @@ const object = {
   nestedArray: [ [1, 2], [3, 4], { a: 1} ],
 }
 
-const ObjectKey = ({ value, keyName, parentName, ...reset }) => {
+const ObjectKey = ({ value, keyName, parentName, parentValue, ...reset }) => {
   if (keyName === 'integer' && typeof value === 'number' && value > 40) {
     return <del {...reset} />
   }
@@ -731,12 +690,23 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     ellipsis?: EllipsisProps['render'];
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
-    value?: ValueViewProps<T>['renderValue'];
+    value?: (props: RenderValueProps<T>) => JSX.Element;
     copied?: CopiedProps<T>['render'];
     countInfo?: (props: CountInfoProps) => JSX.Element;
     countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
   };
 }
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+  type: TypeProps['type'];
+  value?: unknown;
+  parentValue?: T;
+  data?: T;
+  visible?: boolean;
+  quotes?: JsonViewProps<T>['quotes'];
+  namespace?: Array<string | number>;
+  setValue?: React.Dispatch<React.SetStateAction<T>>;
+  keyName?: ValueViewProps<T>['keyName'];
+}
 declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default JsonView;
 export interface CountInfoProps {

package/cjs/editor/countInfoExtra.d.ts

@@ -6,6 +6,7 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     value: T;
     parentValue?: T;
     keyName?: string | number;
+    namespace?: Array<string | number>;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
     /**
@@ -17,6 +18,8 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
      * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
      * @returns Returning false from onDelete will prevent the change from being made.
      */
-    onDelete?: (keyName: string | number, value: T, parentValue: T) => boolean;
+    onDelete?: (keyName: string | number, value: T, parentValue: T | null, opt: {
+        namespace?: Array<string | number>;
+    }) => boolean;
 }
 export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/cjs/editor/countInfoExtra.js

@@ -20,6 +20,7 @@ function CountInfoExtra(props) {
     editable = props.editable,
     keyName = props.keyName,
     value = props.value,
+    namespace = props.namespace,
     parentValue = props.parentValue,
     setValue = props.setValue,
     setParentValue = props.setParentValue,
@@ -70,7 +71,9 @@ function CountInfoExtra(props) {
               break;
             }
             _context2.next = 4;
-            return onDelete(keyName, value, parentValue);
+            return onDelete(keyName, value, parentValue, {
+              namespace: namespace
+            });
           case 4:
             maybeDelete = _context2.sent;
             if (maybeDelete && setParentValue) {

package/cjs/editor/value.d.ts

@@ -7,6 +7,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     keyName?: JsonViewEditorProps<T>['keyName'];
     type: TypeProps['type'];
     value?: unknown;
+    parentValue?: T;
     data?: T;
     visible?: boolean;
     namespace?: Array<string | number>;

package/cjs/editor/value.js

@@ -15,7 +15,7 @@ var _value = require("../value");
 var _edit = require("./icon/edit");
 var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "parentValue", "onDelete", "onEdit"];
 var Quotes = function Quotes(_ref) {
   var show = _ref.show,
     style = _ref.style,
@@ -40,6 +40,7 @@ function ReValue(props) {
     namespace = props.namespace,
     displayDataTypes = props.displayDataTypes,
     editableValue = props.editableValue,
+    parentValue = props.parentValue,
     onDelete = props.onDelete,
     onEdit = props.onEdit,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
@@ -190,15 +191,26 @@ function ReValue(props) {
   }
   var deleteHandle = /*#__PURE__*/function () {
     var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+      var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
           case 0:
             evn.stopPropagation();
-            if (data && keyName && keyName in data && setValue) {
+            if (!(data && keyName && keyName in data && setValue && onDelete)) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 4;
+            return onDelete(keyName, value, parentValue, {
+              namespace: namespace
+            });
+          case 4:
+            maybeDelete = _context2.sent;
+            if (maybeDelete) {
               delete data[keyName];
               setValue((0, _objectSpread2["default"])({}, data));
             }
-          case 2:
+          case 6:
           case "end":
             return _context2.stop();
         }

package/cjs/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SemicolonProps } from './semicolon';
-import type { ValueViewProps } from './value';
+import type { ValueViewProps, TypeProps } from './value';
 import type { CopiedProps } from './copied';
 import type { EllipsisProps } from './comps/ellipsis';
 import type { MetaProps } from './comps/meta';
@@ -12,6 +12,17 @@ export interface CountInfoProps {
     level: number;
     visible: boolean;
 }
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+    type: TypeProps['type'];
+    value?: unknown;
+    parentValue?: T;
+    data?: T;
+    visible?: boolean;
+    quotes?: JsonViewProps<T>['quotes'];
+    namespace?: Array<string | number>;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    keyName?: ValueViewProps<T>['keyName'];
+}
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -48,7 +59,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         ellipsis?: EllipsisProps['render'];
         arrow?: JSX.Element;
         objectKey?: SemicolonProps['render'];
-        value?: ValueViewProps<T>['renderValue'];
+        value?: (props: RenderValueProps<T>) => JSX.Element;
         copied?: CopiedProps<T>['render'];
         countInfo?: (props: CountInfoProps) => JSX.Element;
         countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;

package/cjs/index.js

@@ -49,7 +49,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }, style);
   var cls = "w-json-view-container w-rjv ".concat(className || '');
   var keyid = (0, _react.useId)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.RooNode, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.RootNode, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: cls,
     value: value
   }, reset), {}, {

package/cjs/node.d.ts

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
-export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
+export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
     level?: number;
@@ -10,4 +10,4 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
-export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const RootNode: import("react").ForwardRefExoticComponent<Omit<RootNodeProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/cjs/node.js

@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfo = void 0;
-exports.RooNode = RooNode;
+exports.RootNode = exports.CountInfo = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
@@ -21,20 +20,27 @@ var _ellipsis = require("./comps/ellipsis");
 var _meta = require("./comps/meta");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+function getLength(obj) {
+  try {
+    return Object.keys(obj).length;
+  } catch (error) {
+    return -1;
+  }
+}
 var CountInfo = function CountInfo(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Label, {
     style: {
       paddingLeft: 4,
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
     className: "w-rjv-object-size",
-    children: children
+    children: [children, " items"]
   });
 };
 exports.CountInfo = CountInfo;
-function RooNode(props) {
+var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _expands$keyid;
   var _props$value = props.value,
     value = _props$value === void 0 ? {} : _props$value,
@@ -107,12 +113,12 @@ function RooNode(props) {
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
+    level: level + 1,
+    parentValue: value,
     indentWidth: indentWidth,
     data: valueData,
     quotes: quotes,
-    setValue: setValueData,
-    renderBraces: components.braces,
-    renderValue: components.value
+    setValue: setValueData
   };
   var arrowStyle = {
     transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
@@ -165,8 +171,8 @@ 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"]
+  var countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
+    children: nameKeys.length
   });
   if (components.countInfo) {
     countInfo = components.countInfo({
@@ -175,7 +181,22 @@ function RooNode(props) {
       visible: expand
     }) || countInfo;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+  if (!displayObjectSize) countInfo = null;
+  var countInfoExtra = components.countInfoExtra && components.countInfoExtra({
+    count: nameKeys.length,
+    level: level,
+    showTools: showTools,
+    keyName: keyName,
+    visible: expand,
+    value: valueData,
+    namespace: (0, _toConsumableArray2["default"])(namespace),
+    parentValue: parentValue,
+    setParentValue: setParentValue,
+    setValue: setValueData
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    ref: ref
+  }, reset), {}, {
     className: "".concat(className, " w-rjv-inner")
   }, eventProps), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
@@ -208,17 +229,7 @@ function RooNode(props) {
         isArray: isArray,
         level: level,
         render: components.braces
-      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
-        count: nameKeys.length,
-        level: level,
-        showTools: showTools,
-        keyName: keyName,
-        visible: expand,
-        value: valueData,
-        parentValue: parentValue,
-        setParentValue: setParentValue,
-        setValue: setValueData
-      }), enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+      }), countInfo, countInfoExtra, enableClipboard && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
         show: showTools,
         text: valueData,
         onCopied: onCopied,
@@ -235,23 +246,12 @@ function RooNode(props) {
           key = _ref11[0],
           itemVal = _ref11[1];
         var item = itemVal;
-        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
-          value: item,
-          "data-keys": keyid,
-          quotes: quotes,
-          namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
-          parentName: keyName,
-          highlightUpdates: highlightUpdates,
-          render: components.objectKey,
-          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
-          keyName: key
-        });
         var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
               value: item,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [label]),
               keyName: label,
@@ -262,7 +262,7 @@ function RooNode(props) {
         if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
               value: item,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
               keyName: key,
@@ -273,9 +273,33 @@ function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
+        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
+          value: item,
+          "data-keys": keyid,
+          quotes: quotes,
+          namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
+          parentName: keyName,
+          highlightUpdates: highlightUpdates,
+          render: components.objectKey,
+          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
+          keyName: key
+        });
+        var length = Array.isArray(item) ? item.length : getLength(item);
+        countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
+          children: length
+        });
+        if (components.countInfo) {
+          countInfo = components.countInfo({
+            count: length,
+            level: level,
+            visible: expand
+          }) || countInfo;
+        }
         return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          components: components,
           namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key])
         }, valueViewProps), {}, {
+          countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
           value: item
@@ -296,4 +320,5 @@ function RooNode(props) {
       })
     })]
   }));
-}
+});
+exports.RootNode = RootNode;

package/cjs/value.d.ts

@@ -1,5 +1,4 @@
 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;
@@ -46,19 +45,10 @@ export declare const typeMap: {
     };
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
-    type: TypeProps['type'];
-    value?: unknown;
-    data?: T;
-    visible?: boolean;
-    quotes?: JsonViewProps<T>['quotes'];
-    namespace?: Array<string | number>;
-    setValue?: React.Dispatch<React.SetStateAction<T>>;
-    keyName?: ValueViewProps<T>['keyName'];
-}
 export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
     value?: unknown;
+    parentValue?: T;
     data?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
@@ -67,10 +57,10 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     level?: number;
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
+    components?: JsonViewProps<T>['components'];
     renderKey?: JSX.Element;
-    renderBraces?: MetaProps['render'];
+    countInfo?: JSX.Element;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
-    renderValue?: (props: RenderValueProps<T>) => JSX.Element;
 }
 export declare function getValueString<T>(value: T): {
     type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
@@ -88,4 +78,3 @@ export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<
     type: keyof typeof typeMap;
 }
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
-export {};

package/cjs/value.js

@@ -13,12 +13,11 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = require("react");
-var _node = require("./node");
 var _meta = require("./comps/meta");
 var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "namespace", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "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));
@@ -129,16 +128,18 @@ function getValueString(value) {
 function ValueView(props) {
   var _typeMap$type;
   var value = props.value,
+    parentValue = props.parentValue,
     setValue = props.setValue,
+    countInfo = props.countInfo,
     data = props.data,
     keyName = props.keyName,
     indentWidth = props.indentWidth,
     namespace = props.namespace,
     renderKey = props.renderKey,
+    _props$components = props.components,
+    components = _props$components === void 0 ? {} : _props$components,
     quotes = props.quotes,
     level = props.level,
-    renderValue = props.renderValue,
-    renderBraces = props.renderBraces,
     enableClipboard = props.enableClipboard,
     displayObjectSize = props.displayObjectSize,
     displayDataTypes = props.displayDataTypes,
@@ -169,10 +170,13 @@ function ValueView(props) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     showTools = _useState2[0],
     setShowTools = _useState2[1];
-  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
-    show: showTools,
-    text: value
-  }) : undefined;
+  var tools = (0, _react.useMemo)(function () {
+    return enableClipboard && showTools && /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+      show: showTools,
+      text: value
+    });
+  }, [enableClipboard, showTools, value]);
+  // const tools = enableClipboard ? <Copied show={showTools} text={value} /> : undefined;
   var eventProps = {
     className: 'w-rjv-line',
     style: {
@@ -188,7 +192,7 @@ function ValueView(props) {
     };
   }
   if (content && typeof content === 'string') {
-    var reView = renderValue && renderValue({
+    var reView = components.value && components.value({
       className: 'w-rjv-value',
       style: (0, _objectSpread2["default"])({
         color: color
@@ -197,6 +201,7 @@ function ValueView(props) {
       value: value,
       setValue: setValue,
       data: data,
+      parentValue: parentValue,
       quotes: quotes,
       keyName: keyName,
       namespace: namespace,
@@ -225,18 +230,15 @@ function ValueView(props) {
       }))
     }));
   }
-  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
   var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
-      render: renderBraces,
+      render: components.braces,
       start: true,
       isArray: Array.isArray(value)
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
-      render: renderBraces,
+      render: components.braces,
       isArray: Array.isArray(value)
-    }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_node.CountInfo, {
-      children: [length, " items"]
-    })]
+    }), countInfo]
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, eventProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {

package/esm/editor/countInfoExtra.d.ts

@@ -6,6 +6,7 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     value: T;
     parentValue?: T;
     keyName?: string | number;
+    namespace?: Array<string | number>;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
     /**
@@ -17,6 +18,8 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
      * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
      * @returns Returning false from onDelete will prevent the change from being made.
      */
-    onDelete?: (keyName: string | number, value: T, parentValue: T) => boolean;
+    onDelete?: (keyName: string | number, value: T, parentValue: T | null, opt: {
+        namespace?: Array<string | number>;
+    }) => boolean;
 }
 export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/editor/countInfoExtra.js

@@ -12,6 +12,7 @@ export function CountInfoExtra(props) {
     editable,
     keyName,
     value,
+    namespace,
     parentValue,
     setValue,
     setParentValue,
@@ -43,7 +44,9 @@ export function CountInfoExtra(props) {
     var _ref2 = _asyncToGenerator(function* (event) {
       event.stopPropagation();
       if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
-        var maybeDelete = yield onDelete(keyName, value, parentValue);
+        var maybeDelete = yield onDelete(keyName, value, parentValue, {
+          namespace
+        });
         if (maybeDelete && setParentValue) {
           if (Array.isArray(parentValue)) {
             parentValue.splice(keyName, 1);

package/esm/editor/value.d.ts

@@ -7,6 +7,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     keyName?: JsonViewEditorProps<T>['keyName'];
     type: TypeProps['type'];
     value?: unknown;
+    parentValue?: T;
     data?: T;
     visible?: boolean;
     namespace?: Array<string | number>;

package/esm/editor/value.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "parentValue", "onDelete", "onEdit"];
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
@@ -34,6 +34,7 @@ export function ReValue(props) {
       namespace,
       displayDataTypes,
       editableValue,
+      parentValue,
       onDelete,
       onEdit
     } = props,
@@ -157,9 +158,14 @@ export function ReValue(props) {
   var deleteHandle = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
-      if (data && keyName && keyName in data && setValue) {
-        delete data[keyName];
-        setValue(_extends({}, data));
+      if (data && keyName && keyName in data && setValue && onDelete) {
+        var maybeDelete = yield onDelete(keyName, value, parentValue, {
+          namespace
+        });
+        if (maybeDelete) {
+          delete data[keyName];
+          setValue(_extends({}, data));
+        }
       }
     });
     return function deleteHandle(_x) {

package/esm/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { SemicolonProps } from './semicolon';
-import type { ValueViewProps } from './value';
+import type { ValueViewProps, TypeProps } from './value';
 import type { CopiedProps } from './copied';
 import type { EllipsisProps } from './comps/ellipsis';
 import type { MetaProps } from './comps/meta';
@@ -12,6 +12,17 @@ export interface CountInfoProps {
     level: number;
     visible: boolean;
 }
+interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
+    type: TypeProps['type'];
+    value?: unknown;
+    parentValue?: T;
+    data?: T;
+    visible?: boolean;
+    quotes?: JsonViewProps<T>['quotes'];
+    namespace?: Array<string | number>;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    keyName?: ValueViewProps<T>['keyName'];
+}
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -48,7 +59,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
         ellipsis?: EllipsisProps['render'];
         arrow?: JSX.Element;
         objectKey?: SemicolonProps['render'];
-        value?: ValueViewProps<T>['renderValue'];
+        value?: (props: RenderValueProps<T>) => JSX.Element;
         copied?: CopiedProps<T>['render'];
         countInfo?: (props: CountInfoProps) => JSX.Element;
         countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;

package/esm/index.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["value", "style", "className"];
 import React, { useId } from 'react';
 import { forwardRef } from 'react';
-import { RooNode } from './node';
+import { RootNode } from './node';
 import { jsx as _jsx } from "react/jsx-runtime";
 export * from './node';
 export * from './value';
@@ -22,7 +22,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   }, style);
   var cls = "w-json-view-container w-rjv " + (className || '');
   var keyid = useId();
-  return /*#__PURE__*/_jsx(RooNode, _extends({
+  return /*#__PURE__*/_jsx(RootNode, _extends({
     className: cls,
     value: value
   }, reset, {

package/esm/node.d.ts

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren } from 'react';
 import { LabelProps } from './value';
 import { JsonViewProps } from './';
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
-export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
+export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
     level?: number;
@@ -10,4 +10,4 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
-export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare const RootNode: import("react").ForwardRefExoticComponent<Omit<RootNodeProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/esm/node.js

@@ -1,7 +1,7 @@
 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", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
-import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
+import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
@@ -9,23 +9,30 @@ import { Semicolon } from './semicolon';
 import { Copied } from './copied';
 import { Ellipsis } from './comps/ellipsis';
 import { Meta } from './comps/meta';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+function getLength(obj) {
+  try {
+    return Object.keys(obj).length;
+  } catch (error) {
+    return -1;
+  }
+}
 export var CountInfo = _ref => {
   var {
     children
   } = _ref;
-  return /*#__PURE__*/_jsx(Label, {
+  return /*#__PURE__*/_jsxs(Label, {
     style: {
       paddingLeft: 4,
       fontStyle: 'italic'
     },
     color: "var(--w-rjv-info-color, #0000004d)",
     className: "w-rjv-object-size",
-    children: children
+    children: [children, " items"]
   });
 };
-export function RooNode(props) {
+export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
   var _expands$keyid;
   var {
       value = {},
@@ -85,12 +92,12 @@ export function RooNode(props) {
     displayDataTypes,
     displayObjectSize,
     enableClipboard,
+    level: level + 1,
+    parentValue: value,
     indentWidth,
     data: valueData,
     quotes,
-    setValue: setValueData,
-    renderBraces: components.braces,
-    renderValue: components.value
+    setValue: setValueData
   };
   var arrowStyle = {
     transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
@@ -126,8 +133,8 @@ export function RooNode(props) {
       return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
     });
   }
-  var countInfo = /*#__PURE__*/_jsxs(CountInfo, {
-    children: [nameKeys.length, " items"]
+  var countInfo = /*#__PURE__*/_jsx(CountInfo, {
+    children: nameKeys.length
   });
   if (components.countInfo) {
     countInfo = components.countInfo({
@@ -136,7 +143,22 @@ export function RooNode(props) {
       visible: expand
     }) || countInfo;
   }
-  return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+  if (!displayObjectSize) countInfo = null;
+  var countInfoExtra = components.countInfoExtra && components.countInfoExtra({
+    count: nameKeys.length,
+    level,
+    showTools,
+    keyName,
+    visible: expand,
+    value: valueData,
+    namespace: [...namespace],
+    parentValue,
+    setParentValue,
+    setValue: setValueData
+  });
+  return /*#__PURE__*/_jsxs("div", _extends({
+    ref: ref
+  }, reset, {
     className: className + " w-rjv-inner"
   }, eventProps, {
     children: [/*#__PURE__*/_jsxs(Line, {
@@ -169,17 +191,7 @@ export function RooNode(props) {
         isArray: isArray,
         level: level,
         render: components.braces
-      }), displayObjectSize && countInfo, components.countInfoExtra && components.countInfoExtra({
-        count: nameKeys.length,
-        level,
-        showTools,
-        keyName,
-        visible: expand,
-        value: valueData,
-        parentValue,
-        setParentValue,
-        setValue: setValueData
-      }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
+      }), countInfo, countInfoExtra, enableClipboard && /*#__PURE__*/_jsx(Copied, {
         show: showTools,
         text: valueData,
         onCopied: onCopied,
@@ -194,23 +206,12 @@ export function RooNode(props) {
       children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
         var item = itemVal;
-        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
-          "data-keys": keyid,
-          quotes: quotes,
-          namespace: [...namespace, key],
-          parentName: keyName,
-          highlightUpdates: highlightUpdates,
-          render: components.objectKey,
-          color: typeof key === 'number' ? typeMap['number'].color : '',
-          keyName: key
-        });
         var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
         if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
-            children: /*#__PURE__*/_jsx(RooNode, _extends({
+            children: /*#__PURE__*/_jsx(RootNode, _extends({
               value: item,
               namespace: [...namespace, label],
               keyName: label,
@@ -221,7 +222,7 @@ export function RooNode(props) {
         if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
-            children: /*#__PURE__*/_jsx(RooNode, _extends({
+            children: /*#__PURE__*/_jsx(RootNode, _extends({
               value: item,
               namespace: [...namespace, key],
               keyName: key,
@@ -232,9 +233,33 @@ export function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
+        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
+          value: item,
+          "data-keys": keyid,
+          quotes: quotes,
+          namespace: [...namespace, key],
+          parentName: keyName,
+          highlightUpdates: highlightUpdates,
+          render: components.objectKey,
+          color: typeof key === 'number' ? typeMap['number'].color : '',
+          keyName: key
+        });
+        var length = Array.isArray(item) ? item.length : getLength(item);
+        countInfo = /*#__PURE__*/_jsx(CountInfo, {
+          children: length
+        });
+        if (components.countInfo) {
+          countInfo = components.countInfo({
+            count: length,
+            level,
+            visible: expand
+          }) || countInfo;
+        }
         return /*#__PURE__*/_jsx(ValueView, _extends({
+          components: components,
           namespace: [...namespace, key]
         }, valueViewProps, {
+          countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
           value: item
@@ -255,4 +280,4 @@ export function RooNode(props) {
       })
     })]
   }));
-}
+});

package/esm/value.d.ts

@@ -1,5 +1,4 @@
 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;
@@ -46,19 +45,10 @@ export declare const typeMap: {
     };
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
-interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
-    type: TypeProps['type'];
-    value?: unknown;
-    data?: T;
-    visible?: boolean;
-    quotes?: JsonViewProps<T>['quotes'];
-    namespace?: Array<string | number>;
-    setValue?: React.Dispatch<React.SetStateAction<T>>;
-    keyName?: ValueViewProps<T>['keyName'];
-}
 export interface ValueViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
     keyName?: string | number;
     value?: unknown;
+    parentValue?: T;
     data?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
@@ -67,10 +57,10 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     level?: number;
     namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
+    components?: JsonViewProps<T>['components'];
     renderKey?: JSX.Element;
-    renderBraces?: MetaProps['render'];
+    countInfo?: JSX.Element;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
-    renderValue?: (props: RenderValueProps<T>) => JSX.Element;
 }
 export declare function getValueString<T>(value: T): {
     type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
@@ -88,4 +78,3 @@ export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<
     type: keyof typeof typeMap;
 }
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
-export {};

package/esm/value.js

@@ -1,10 +1,9 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "namespace", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment, forwardRef, useState } from 'react';
-import { CountInfo } from './node';
+import { Fragment, forwardRef, useMemo, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -112,17 +111,17 @@ export function ValueView(props) {
   var _typeMap$type;
   var {
       value,
+      parentValue,
       setValue,
+      countInfo,
       data,
       keyName,
       indentWidth,
       namespace,
       renderKey,
+      components = {},
       quotes,
-      renderValue,
-      renderBraces,
       enableClipboard,
-      displayObjectSize,
       displayDataTypes
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -150,10 +149,11 @@ export function ValueView(props) {
   }
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
   var [showTools, setShowTools] = useState(false);
-  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+  var tools = useMemo(() => enableClipboard && showTools && /*#__PURE__*/_jsx(Copied, {
     show: showTools,
     text: value
-  }) : undefined;
+  }), [enableClipboard, showTools, value]);
+  // const tools = enableClipboard ? <Copied show={showTools} text={value} /> : undefined;
   var eventProps = {
     className: 'w-rjv-line',
     style: {
@@ -165,7 +165,7 @@ export function ValueView(props) {
     eventProps.onMouseLeave = () => setShowTools(false);
   }
   if (content && typeof content === 'string') {
-    var reView = renderValue && renderValue({
+    var reView = components.value && components.value({
       className: 'w-rjv-value',
       style: _extends({
         color
@@ -174,6 +174,7 @@ export function ValueView(props) {
       value,
       setValue,
       data,
+      parentValue,
       quotes,
       keyName,
       namespace,
@@ -202,18 +203,15 @@ export function ValueView(props) {
       }))
     }));
   }
-  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
   var empty = /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsx(Meta, {
-      render: renderBraces,
+      render: components.braces,
       start: true,
       isArray: Array.isArray(value)
     }), /*#__PURE__*/_jsx(Meta, {
-      render: renderBraces,
+      render: components.braces,
       isArray: Array.isArray(value)
-    }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
-      children: [length, " items"]
-    })]
+    }), countInfo]
   });
   return /*#__PURE__*/_jsx(Line, _extends({}, eventProps, {
     children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {

package/package.json

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