@uiw/react-json-view 1.7.0 → 1.8.0

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.0",
+  "version": "1.8.0",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",