@uiw/react-json-view 1.7.1 → 1.8.0

package/README.md

@@ -25,6 +25,8 @@ A React component for displaying and editing javascript arrays and JSON objects.
 🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
 📦 Zero dependencies  
+📋 Copy to Clipboard  
+✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
 
 ## Quick Start
@@ -124,6 +126,7 @@ const customTheme = {
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-edit-color': 'var(--w-rjv-color)',
   '--w-rjv-add-color': 'var(--w-rjv-color)',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#9cdcfe',
@@ -190,6 +193,7 @@ const customTheme = {
   '--w-rjv-arrow-color': '#9cdcfe',
   '--w-rjv-edit-color': '#0184a6',
   '--w-rjv-add-color': '#0184a6',
+  '--w-rjv-delete-color': '#dc3545',
   '--w-rjv-info-color': '#656565',
   '--w-rjv-update-color': '#ebcb8b',
   '--w-rjv-copied-color': '#0184a6',
@@ -260,7 +264,7 @@ export default function Demo() {
                 setHex(customTheme[varname]);
               };
               const active = cssvar === varname ? '#a8a8a8' : '';
-              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000' }} onClick={click}>{varname}</button>
+              return <button key={idx} style={{ background: active, border: 0,boxShadow: 'inset 0px 0px 1px #000', textAlign: 'left' }} onClick={click}>{varname}</button>
             })}
           </div>
         </div>
@@ -329,7 +333,7 @@ const object = {
   integer: 42,
 }
 
-function value({ type, children, value, keyName, visible, ...props }) {
+function value({ type, children, value, setValue, keyName, visible, ...props }) {
   if (type === 'string' && /\.(jpg)$/.test(value)) {
     return (
       <span {...props}>
@@ -382,7 +386,7 @@ export default function Demo() {
 import React from 'react';
 import JsonView from '@uiw/react-json-view';
 
-function value({ type, children, visible, keyName, value, ...props }) {
+function value({ type, children, visible, keyName, value, setValue, ...props }) {
   if (value instanceof URL) {
     return (
       <span {...props}>
@@ -759,6 +763,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
    * @returns {boolean} Returning false from onAdd will prevent the change from being made.
    */
   onAdd?: CountInfoExtraProps<T>['onAdd'];
+  /**
+   * 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?: CountInfoExtraProps<T>['onDelete'];
   /** Whether enable edit feature. @default true */
   editable?: boolean;
 }

package/cjs/editor/countInfoExtra.d.ts

@@ -4,11 +4,19 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     editable: boolean;
     showTools: boolean;
     value: T;
+    parentValue?: T;
+    keyName?: string | number;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
+    setParentValue?: 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;
+    /**
+     * 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;
 }
-export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/cjs/editor/countInfoExtra.js

@@ -10,15 +10,21 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = require("react");
 var _add = require("./icon/add");
+var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
   var visible = props.visible,
     showTools = props.showTools,
     editable = props.editable,
+    keyName = props.keyName,
     value = props.value,
+    parentValue = props.parentValue,
     setValue = props.setValue,
-    onAdd = props.onAdd;
+    setParentValue = props.setParentValue,
+    onAdd = props.onAdd,
+    onDelete = props.onDelete;
   if (!visible || !showTools) return null;
   var click = /*#__PURE__*/function () {
     var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
@@ -31,7 +37,7 @@ function CountInfoExtra(props) {
             isArray = Array.isArray(value);
             isAdd = isArray ? true : !(keyOrValue in value);
             result = isArray ? [].concat((0, _toConsumableArray2["default"])(value), [keyOrValue]) : (0, _objectSpread3["default"])((0, _objectSpread3["default"])({}, value), {}, (0, _defineProperty2["default"])({}, keyOrValue, undefined));
-            if (!onAdd) {
+            if (!(onAdd && setValue)) {
               _context.next = 10;
               break;
             }
@@ -52,9 +58,45 @@ function CountInfoExtra(props) {
       return _ref.apply(this, arguments);
     };
   }();
-  var svgProps = {
-    onClick: click
-  };
-  if (!editable || !onAdd) return;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, (0, _objectSpread3["default"])({}, svgProps));
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+      var maybeDelete;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            event.stopPropagation();
+            if (!(onDelete && (keyName || typeof keyName === 'number') && parentValue)) {
+              _context2.next = 6;
+              break;
+            }
+            _context2.next = 4;
+            return onDelete(keyName, value, parentValue);
+          case 4:
+            maybeDelete = _context2.sent;
+            if (maybeDelete && setParentValue) {
+              if (Array.isArray(parentValue)) {
+                parentValue.splice(keyName, 1);
+                setParentValue((0, _toConsumableArray2["default"])(parentValue));
+              } else if (keyName in parentValue) {
+                delete parentValue[keyName];
+                setParentValue((0, _objectSpread3["default"])({}, parentValue));
+              }
+            }
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
+      onClick: click
+    }), editable && onDelete && parentValue && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.DeleteIcon, {
+      onClick: deleteHandle
+    })]
+  });
 }

package/cjs/editor/icon/add.js

@@ -18,12 +18,12 @@ var AddIcon = function AddIcon(props) {
     width: '1em'
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 40 40",
     fill: "var(--w-rjv-add-color, currentColor)"
   }, props), {}, {
     style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle),
     children: /*#__PURE__*/(0, _jsxRuntime.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"
+      d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.12022,21.8947368 L21.9056145,21.8947368 L21.9056145,30.1052632 C21.9056145,31.1410526 21.0462404,32 20.0099363,32 C18.9736323,32 18.1142582,31.1410526 18.1142582,30.1052632 L18.1142582,21.8947368 L9.89965272,21.8947368 C8.86334865,21.8947368 8.00397454,21.0357895 8.00397454,20 C8.00397454,18.9642105 8.86334865,18.1052632 9.89965272,18.1052632 L18.1142582,18.1052632 L18.1142582,9.89473684 C18.1142582,8.85894737 18.9736323,8 20.0099363,8 C21.0462404,8 21.9056145,8.85894737 21.9056145,9.89473684 L21.9056145,18.1052632 L30.12022,18.1052632 C31.156524,18.1052632 32.0158982,18.9642105 32.0158982,20 C32.0158982,21.0357895 31.156524,21.8947368 30.12022,21.8947368 Z"
     })
   }));
 };

package/cjs/editor/icon/delete.d.ts

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

package/cjs/editor/icon/delete.js

@@ -0,0 +1,30 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DeleteIcon = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _jsxRuntime = require("react/jsx-runtime");
+var DeleteIcon = function DeleteIcon(props) {
+  var style = props.style;
+  var defaultStyle = {
+    verticalAlign: 'middle',
+    display: 'inline-block',
+    cursor: 'pointer',
+    marginLeft: 5,
+    height: '1em',
+    width: '1em'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    viewBox: "0 0 40 40",
+    fill: "var(--w-rjv-delete-color, #dc3545)"
+  }, props), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), defaultStyle),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.3428039,27.0681654 C31.2346195,27.9595381 31.2346195,29.4349136 30.3428039,30.3262862 C29.88152,30.7873411 29.2972271,31.0025 28.7129341,31.0025 C28.1286412,31.0025 27.5443483,30.7873411 27.0830644,30.3262862 L20.0100446,23.2567787 L12.9370249,30.3262862 C12.475741,30.7873411 11.891448,31.0025 11.3071551,31.0025 C10.7228621,31.0025 10.1385692,30.7873411 9.67728531,30.3262862 C8.78464325,29.4234847 8.78464325,27.9709669 9.67728531,27.0681654 L16.7503051,19.9986579 L9.67728531,12.9291504 C8.78464325,12.0263488 8.78464325,10.573831 9.67728531,9.67102951 C10.5691008,8.77965683 12.0452093,8.77965683 12.9370249,9.67102951 L20.0100446,16.740537 L27.0830644,9.67102951 C27.9748799,8.77965683 29.4509884,8.77965683 30.3428039,9.67102951 C31.2346195,10.5624022 31.2346195,12.0377777 30.3428039,12.9291504 L23.2697842,19.9986579 L30.3428039,27.0681654 L30.3428039,27.0681654 Z"
+    })
+  }));
+};
+exports.DeleteIcon = DeleteIcon;

package/cjs/editor/index.d.ts

@@ -18,6 +18,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
      * @returns {boolean} Returning false from onAdd will prevent the change from being made.
      */
     onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /**
+     * 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?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
 }

package/cjs/editor/index.js

@@ -13,7 +13,7 @@ var _objectKey = require("./objectKey");
 var _value = require("./value");
 var _countInfoExtra = require("./countInfoExtra");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd"];
+var _excluded = ["onEdit", "components", "editable", "displayDataTypes", "onAdd", "onDelete"];
 var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var onEdit = props.onEdit,
     components = props.components,
@@ -22,12 +22,14 @@ var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$displayDataTyp = props.displayDataTypes,
     displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
     onAdd = props.onAdd,
+    onDelete = props.onDelete,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var comps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, components), {}, {
     countInfoExtra: function countInfoExtra(reprops) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_countInfoExtra.CountInfoExtra, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
         editable: editable,
-        onAdd: onAdd
+        onAdd: onAdd,
+        onDelete: onDelete
       }));
     },
     objectKey: function objectKey(reprops) {
@@ -41,6 +43,7 @@ var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ReValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reprops), {}, {
         editableValue: editable,
         displayDataTypes: displayDataTypes,
+        onDelete: onDelete,
         onEdit: onEdit
       }));
     }

package/cjs/editor/value.d.ts

@@ -7,8 +7,11 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     keyName?: JsonViewEditorProps<T>['keyName'];
     type: TypeProps['type'];
     value?: unknown;
+    data?: T;
     visible?: boolean;
     editableValue?: boolean;
     displayDataTypes?: boolean;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;

package/cjs/editor/value.js

@@ -13,8 +13,9 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _value = require("../value");
 var _edit = require("./icon/edit");
+var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["type", "value", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 var Quotes = function Quotes(_ref) {
   var show = _ref.show,
     style = _ref.style,
@@ -29,6 +30,8 @@ function ReValue(props) {
   var _typeMap$typeStr;
   var type = props.type,
     value = props.value,
+    setValue = props.setValue,
+    data = props.data,
     keyName = props.keyName,
     visible = props.visible,
     quotes = props.quotes,
@@ -36,6 +39,7 @@ function ReValue(props) {
     children = props.children,
     displayDataTypes = props.displayDataTypes,
     editableValue = props.editableValue,
+    onDelete = props.onDelete,
     onEdit = props.onEdit,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useState = (0, _react.useState)(false),
@@ -180,6 +184,26 @@ function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+      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) {
+              delete data[keyName];
+              setValue((0, _objectSpread2["default"])({}, data));
+            }
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       style: style,
@@ -195,6 +219,8 @@ function ReValue(props) {
       show: typeStr === 'string'
     }), visible && editableValue && onEdit && /*#__PURE__*/(0, _jsxRuntime.jsx)(_edit.EditIcon, {
       onClick: click
+    }), visible && editableValue && onDelete && /*#__PURE__*/(0, _jsxRuntime.jsx)(_delete.DeleteIcon, {
+      onClick: deleteHandle
     })]
   });
 }

package/cjs/node.d.ts

@@ -6,5 +6,7 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
     level?: number;
+    parentValue?: T;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

package/cjs/node.js

@@ -8,6 +8,7 @@ exports.CountInfo = void 0;
 exports.RooNode = RooNode;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
@@ -19,7 +20,7 @@ var _copied = require("./copied");
 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", "onCopied", "onExpand"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand", "parentValue", "setParentValue"];
 var CountInfo = function CountInfo(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
@@ -62,6 +63,8 @@ function RooNode(props) {
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
+    parentValue = props.parentValue,
+    setParentValue = props.setParentValue,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var isArray = Array.isArray(value);
   var subkeyid = (0, _react.useId)();
@@ -80,6 +83,10 @@ function RooNode(props) {
     });
     !expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
   };
+  var _useState = (0, _react.useState)(value),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    valueData = _useState2[0],
+    setValueData = _useState2[1];
   var subNodeProps = {
     components: components,
     indentWidth: indentWidth,
@@ -90,6 +97,8 @@ function RooNode(props) {
     onCopied: onCopied,
     onExpand: onExpand,
     collapsed: collapsed,
+    parentValue: value,
+    setParentValue: setValueData,
     quotes: quotes,
     level: level + 1,
     style: {
@@ -101,7 +110,9 @@ function RooNode(props) {
     displayObjectSize: displayObjectSize,
     enableClipboard: enableClipboard,
     indentWidth: indentWidth,
+    data: valueData,
     quotes: quotes,
+    setValue: setValueData,
     renderBraces: components.braces,
     renderValue: components.value
   };
@@ -113,10 +124,10 @@ function RooNode(props) {
     style: arrowStyle,
     className: "w-rjv-arrow"
   });
-  var _useState = (0, _react.useState)(false),
-    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-    showTools = _useState2[0],
-    setShowTools = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    showTools = _useState4[0],
+    setShowTools = _useState4[1];
   var eventProps = {};
   if (enableClipboard) {
     eventProps.onMouseEnter = function () {
@@ -126,10 +137,6 @@ function RooNode(props) {
       return setShowTools(false);
     };
   }
-  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]);
@@ -202,8 +209,11 @@ function RooNode(props) {
         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, {
         show: showTools,
@@ -217,7 +227,7 @@ function RooNode(props) {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: entries.length > 0 && entries.map(function (_ref10, idx) {
+      children: entries.length > 0 && (0, _toConsumableArray2["default"])(entries).map(function (_ref10, idx) {
         var _ref11 = (0, _slicedToArray2["default"])(_ref10, 2),
           key = _ref11[0],
           itemVal = _ref11[1];

package/cjs/value.d.ts

@@ -46,9 +46,19 @@ 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'];
+    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;
+    data?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
@@ -57,13 +67,8 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];
-    renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
-        type: TypeProps['type'];
-        value?: unknown;
-        visible?: boolean;
-        quotes?: JsonViewProps<T>['quotes'];
-        keyName?: ValueViewProps<T>['keyName'];
-    }) => 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";
@@ -81,3 +86,4 @@ export interface TypeProps extends React.DetailedHTMLProps<React.HTMLAttributes<
     type: keyof typeof typeMap;
 }
 export declare const Type: FC<PropsWithChildren<TypeProps>>;
+export {};

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", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "setValue", "data", "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));
@@ -55,7 +55,7 @@ var typeMap = {
   },
   url: {
     color: 'var(--w-rjv-type-url-color, #0969da)',
-    label: 'URL'
+    label: 'url'
   },
   "null": {
     color: 'var(--w-rjv-type-null-color, #d33682)',
@@ -129,6 +129,8 @@ function getValueString(value) {
 function ValueView(props) {
   var _typeMap$type;
   var value = props.value,
+    setValue = props.setValue,
+    data = props.data,
     keyName = props.keyName,
     indentWidth = props.indentWidth,
     renderKey = props.renderKey,
@@ -192,6 +194,8 @@ function ValueView(props) {
       }, style),
       type: type,
       value: value,
+      setValue: setValue,
+      data: data,
       quotes: quotes,
       keyName: keyName,
       visible: showTools,

package/editor.d.ts

@@ -23,6 +23,11 @@ declare module '@uiw/react-json-view/editor' {
      * @returns {boolean} Returning false from onAdd will prevent the change from being made.
      */
     onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /**
+     * 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?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
   }

package/esm/editor/countInfoExtra.d.ts

@@ -4,11 +4,19 @@ export interface CountInfoExtraProps<T> extends Partial<CountInfoProps> {
     editable: boolean;
     showTools: boolean;
     value: T;
+    parentValue?: T;
+    keyName?: string | number;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
+    setParentValue?: 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;
+    /**
+     * 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;
 }
-export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function CountInfoExtra<T extends object>(props: CountInfoExtraProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/esm/editor/countInfoExtra.js

@@ -1,15 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import { Fragment } from 'react';
 import { AddIcon } from './icon/add';
+import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
   var {
     visible,
     showTools,
     editable,
+    keyName,
     value,
+    parentValue,
     setValue,
-    onAdd
+    setParentValue,
+    onAdd,
+    onDelete
   } = props;
   if (!visible || !showTools) return null;
   var click = /*#__PURE__*/function () {
@@ -21,7 +28,7 @@ export function CountInfoExtra(props) {
       var result = isArray ? [...value, keyOrValue] : _extends({}, value, {
         [keyOrValue]: undefined
       });
-      if (onAdd) {
+      if (onAdd && setValue) {
         var maybeAdd = yield onAdd(keyOrValue, result, props.value, isAdd);
         if (maybeAdd) {
           setValue(result);
@@ -32,9 +39,31 @@ export function CountInfoExtra(props) {
       return _ref.apply(this, arguments);
     };
   }();
-  var svgProps = {
-    onClick: click
-  };
-  if (!editable || !onAdd) return;
-  return /*#__PURE__*/_jsx(AddIcon, _extends({}, svgProps));
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* (event) {
+      event.stopPropagation();
+      if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
+        var maybeDelete = yield onDelete(keyName, value, parentValue);
+        if (maybeDelete && setParentValue) {
+          if (Array.isArray(parentValue)) {
+            parentValue.splice(keyName, 1);
+            setParentValue([...parentValue]);
+          } else if (keyName in parentValue) {
+            delete parentValue[keyName];
+            setParentValue(_extends({}, parentValue));
+          }
+        }
+      }
+    });
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/_jsxs(Fragment, {
+    children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
+      onClick: click
+    }), editable && onDelete && parentValue && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: deleteHandle
+    })]
+  });
 }

package/esm/editor/icon/add.js

@@ -13,12 +13,12 @@ export var AddIcon = props => {
     width: '1em'
   };
   return /*#__PURE__*/_jsx("svg", _extends({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 40 40",
     fill: "var(--w-rjv-add-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"
+      d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.12022,21.8947368 L21.9056145,21.8947368 L21.9056145,30.1052632 C21.9056145,31.1410526 21.0462404,32 20.0099363,32 C18.9736323,32 18.1142582,31.1410526 18.1142582,30.1052632 L18.1142582,21.8947368 L9.89965272,21.8947368 C8.86334865,21.8947368 8.00397454,21.0357895 8.00397454,20 C8.00397454,18.9642105 8.86334865,18.1052632 9.89965272,18.1052632 L18.1142582,18.1052632 L18.1142582,9.89473684 C18.1142582,8.85894737 18.9736323,8 20.0099363,8 C21.0462404,8 21.9056145,8.85894737 21.9056145,9.89473684 L21.9056145,18.1052632 L30.12022,18.1052632 C31.156524,18.1052632 32.0158982,18.9642105 32.0158982,20 C32.0158982,21.0357895 31.156524,21.8947368 30.12022,21.8947368 Z"
     })
   }));
 };

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

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

package/esm/editor/icon/delete.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DeleteIcon = 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 40 40",
+    fill: "var(--w-rjv-delete-color, #dc3545)"
+  }, props, {
+    style: _extends({}, style, defaultStyle),
+    children: /*#__PURE__*/_jsx("path", {
+      d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.3428039,27.0681654 C31.2346195,27.9595381 31.2346195,29.4349136 30.3428039,30.3262862 C29.88152,30.7873411 29.2972271,31.0025 28.7129341,31.0025 C28.1286412,31.0025 27.5443483,30.7873411 27.0830644,30.3262862 L20.0100446,23.2567787 L12.9370249,30.3262862 C12.475741,30.7873411 11.891448,31.0025 11.3071551,31.0025 C10.7228621,31.0025 10.1385692,30.7873411 9.67728531,30.3262862 C8.78464325,29.4234847 8.78464325,27.9709669 9.67728531,27.0681654 L16.7503051,19.9986579 L9.67728531,12.9291504 C8.78464325,12.0263488 8.78464325,10.573831 9.67728531,9.67102951 C10.5691008,8.77965683 12.0452093,8.77965683 12.9370249,9.67102951 L20.0100446,16.740537 L27.0830644,9.67102951 C27.9748799,8.77965683 29.4509884,8.77965683 30.3428039,9.67102951 C31.2346195,10.5624022 31.2346195,12.0377777 30.3428039,12.9291504 L23.2697842,19.9986579 L30.3428039,27.0681654 L30.3428039,27.0681654 Z"
+    })
+  }));
+};

package/esm/editor/index.d.ts

@@ -18,6 +18,11 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
      * @returns {boolean} Returning false from onAdd will prevent the change from being made.
      */
     onAdd?: CountInfoExtraProps<T>['onAdd'];
+    /**
+     * 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?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
 }

package/esm/editor/index.js

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

package/esm/editor/value.d.ts

@@ -7,8 +7,11 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     keyName?: JsonViewEditorProps<T>['keyName'];
     type: TypeProps['type'];
     value?: unknown;
+    data?: T;
     visible?: boolean;
     editableValue?: boolean;
     displayDataTypes?: boolean;
+    setValue?: React.Dispatch<React.SetStateAction<T>>;
+    onDelete?: JsonViewEditorProps<T>['onDelete'];
 }
 export declare function ReValue<T extends object>(props: ReValueProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/editor/value.js

@@ -1,10 +1,11 @@
 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", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
+import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Quotes = _ref => {
@@ -24,11 +25,15 @@ export function ReValue(props) {
   var {
       type,
       value,
+      setValue,
+      data,
+      keyName,
       visible,
       quotes,
       style,
       displayDataTypes,
       editableValue,
+      onDelete,
       onEdit
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
@@ -145,6 +150,18 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(function* (evn) {
+      evn.stopPropagation();
+      if (data && keyName && keyName in data && setValue) {
+        delete data[keyName];
+        setValue(_extends({}, data));
+      }
+    });
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,
@@ -160,6 +177,8 @@ export function ReValue(props) {
       show: typeStr === 'string'
     }), visible && editableValue && onEdit && /*#__PURE__*/_jsx(EditIcon, {
       onClick: click
+    }), visible && editableValue && onDelete && /*#__PURE__*/_jsx(DeleteIcon, {
+      onClick: deleteHandle
     })]
   });
 }

package/esm/node.d.ts

@@ -6,5 +6,7 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
     level?: number;
+    parentValue?: T;
+    setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/node.js

@@ -1,6 +1,6 @@
 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"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -43,7 +43,9 @@ export function RooNode(props) {
       keyid = 'root',
       quotes = '"',
       onCopied,
-      onExpand
+      onExpand,
+      parentValue,
+      setParentValue
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded);
   var isArray = Array.isArray(value);
@@ -63,6 +65,7 @@ export function RooNode(props) {
     });
     !expand ? store.expand(keyid) : store.collapse(keyid);
   };
+  var [valueData, setValueData] = useState(value);
   var subNodeProps = {
     components,
     indentWidth,
@@ -73,6 +76,8 @@ export function RooNode(props) {
     onCopied,
     onExpand,
     collapsed,
+    parentValue: value,
+    setParentValue: setValueData,
     quotes,
     level: level + 1,
     style: {
@@ -84,7 +89,9 @@ export function RooNode(props) {
     displayObjectSize,
     enableClipboard,
     indentWidth,
+    data: valueData,
     quotes,
+    setValue: setValueData,
     renderBraces: components.braces,
     renderValue: components.value
   };
@@ -102,7 +109,6 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
-  var [valueData, setValueData] = useState(value);
   useEffect(() => setValueData(value), [value]);
   var nameKeys = isArray ? Object.keys(valueData).map(m => Number(m)) : Object.keys(valueData);
 
@@ -165,8 +171,11 @@ export function RooNode(props) {
         count: nameKeys.length,
         level,
         showTools,
+        keyName,
         visible: expand,
         value: valueData,
+        parentValue,
+        setParentValue,
         setValue: setValueData
       }), enableClipboard && /*#__PURE__*/_jsx(Copied, {
         show: showTools,
@@ -180,7 +189,7 @@ export function RooNode(props) {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: entries.length > 0 && entries.map((_ref6, idx) => {
+      children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
         var item = itemVal;
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {

package/esm/value.d.ts

@@ -46,9 +46,19 @@ 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'];
+    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;
+    data?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
@@ -57,13 +67,8 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];
-    renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
-        type: TypeProps['type'];
-        value?: unknown;
-        visible?: boolean;
-        quotes?: JsonViewProps<T>['quotes'];
-        keyName?: ValueViewProps<T>['keyName'];
-    }) => 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";
@@ -81,3 +86,4 @@ 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,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", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "setValue", "data", "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';
@@ -38,7 +38,7 @@ export var typeMap = {
   },
   url: {
     color: 'var(--w-rjv-type-url-color, #0969da)',
-    label: 'URL'
+    label: 'url'
   },
   null: {
     color: 'var(--w-rjv-type-null-color, #d33682)',
@@ -112,6 +112,8 @@ export function ValueView(props) {
   var _typeMap$type;
   var {
       value,
+      setValue,
+      data,
       keyName,
       indentWidth,
       renderKey,
@@ -169,6 +171,8 @@ export function ValueView(props) {
       }, style),
       type,
       value,
+      setValue,
+      data,
       quotes,
       keyName,
       visible: showTools,

package/package.json

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