@uiw/react-json-view 1.8.0 → 1.8.2

package/README.md

@@ -530,6 +530,11 @@ export default function Demo() {
       }}
       onEdit={(opts) => {
         console.log('opts:', opts)
+        // opts.namespace: ['object', 'child', 'last']
+        // opts.oldValue: null
+        // opts.type: "value"
+        // opts.value: "NULL3"
+        return true;
       }}
       components={{
         objectKey: ObjectKey
@@ -756,6 +761,7 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
     oldValue: unknown;
     keyName?: string | number;
     parentName?: string | number;
+    namespace?: Array<string | number>;
     type?: 'value' | 'key';
   }) => boolean;
   /**

package/cjs/editor/index.d.ts

@@ -11,6 +11,7 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
         oldValue: unknown;
         keyName?: string | number;
         parentName?: string | number;
+        namespace?: Array<string | number>;
         type?: 'value' | 'key';
     }) => boolean;
     /**

package/cjs/editor/objectKey.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ObjectKey = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _semicolon = require("../semicolon");
 var _value = require("../value");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "editableValue", "onEdit", "highlightUpdates", "render"];
+var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
 var ObjectKey = function ObjectKey(props) {
   var className = props.className,
     value = props.value,
@@ -20,6 +22,7 @@ var ObjectKey = function ObjectKey(props) {
     parentName = props.parentName,
     quotes = props.quotes,
     label = props.label,
+    namespace = props.namespace,
     editableValue = props.editableValue,
     onEdit = props.onEdit,
     _props$highlightUpdat = props.highlightUpdates,
@@ -55,22 +58,51 @@ var ObjectKey = function ObjectKey(props) {
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
     }
   };
-  var blur = function blur() {
-    setEditable(false);
-    if ($edit.current) {
-      var _$edit$current2;
-      $edit.current.contentEditable = 'false';
-      (_$edit$current2 = $edit.current) === null || _$edit$current2 === void 0 ? void 0 : _$edit$current2.focus();
-      setCurentLabel($edit.current.innerText);
-      onEdit && onEdit({
-        value: $edit.current.innerText,
-        oldValue: curentLabel,
-        keyName: keyName,
-        parentName: parentName,
-        type: 'key'
-      });
-    }
-  };
+  var blur = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+      var _$edit$current2, result;
+      return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!$edit.current) {
+              _context.next = 8;
+              break;
+            }
+            if (!onEdit) {
+              _context.next = 6;
+              break;
+            }
+            _context.next = 4;
+            return onEdit({
+              value: $edit.current.innerText,
+              oldValue: curentLabel,
+              namespace: namespace,
+              keyName: keyName,
+              parentName: parentName,
+              type: 'key'
+            });
+          case 4:
+            result = _context.sent;
+            if (result) {
+              setCurentLabel($edit.current.innerText);
+            } else {
+              $edit.current.innerText = curentLabel;
+            }
+          case 6:
+            $edit.current.contentEditable = 'false';
+            (_$edit$current2 = $edit.current) === null || _$edit$current2 === void 0 ? void 0 : _$edit$current2.focus();
+          case 8:
+            setEditable(false);
+          case 9:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = function focus() {
     if ($edit.current) {
       var _$edit$current3;
@@ -87,11 +119,11 @@ var ObjectKey = function ObjectKey(props) {
   };
   (0, _react.useEffect)(function () {
     if ($edit.current) {
-      $edit.current.addEventListener("paste", function (e) {
+      $edit.current.addEventListener('paste', function (e) {
         e.preventDefault();
         // @ts-ignore
-        var text = e.clipboardData.getData("text/plain");
-        document.execCommand("insertHTML", false, text);
+        var text = e.clipboardData.getData('text/plain');
+        document.execCommand('insertHTML', false, text);
       });
     }
   }, [$edit]);

package/cjs/editor/value.d.ts

@@ -9,6 +9,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     value?: unknown;
     data?: T;
     visible?: boolean;
+    namespace?: Array<string | number>;
     editableValue?: boolean;
     displayDataTypes?: boolean;
     setValue?: React.Dispatch<React.SetStateAction<T>>;

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", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 var Quotes = function Quotes(_ref) {
   var show = _ref.show,
     style = _ref.style,
@@ -37,6 +37,7 @@ function ReValue(props) {
     quotes = props.quotes,
     style = props.style,
     children = props.children,
+    namespace = props.namespace,
     displayDataTypes = props.displayDataTypes,
     editableValue = props.editableValue,
     onDelete = props.onDelete,
@@ -64,7 +65,7 @@ function ReValue(props) {
     if ($edit.current) {
       var _$edit$current;
       setEditable(true);
-      $edit.current.contentEditable = 'true';
+      $edit.current.setAttribute('contentEditable', 'true');
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 ? void 0 : _$edit$current.focus();
     }
   };
@@ -74,7 +75,9 @@ function ReValue(props) {
       evn.stopPropagation();
       evn.preventDefault();
       setEditable(false);
-      $edit.current.contentEditable = 'false';
+      if ($edit.current) {
+        $edit.current.setAttribute('contentEditable', 'false');
+      }
     }
   };
   var blur = /*#__PURE__*/function () {
@@ -94,8 +97,8 @@ function ReValue(props) {
               _context.next = 16;
               break;
             }
-            $edit.current.contentEditable = 'false';
-            text = $edit.current.innerText;
+            $edit.current.setAttribute('contentEditable', 'false');
+            text = $edit.current.innerHTML;
             _typeStr = curentType;
             if (curentType === 'number' || curentType === 'float') {
               text = Number(text);
@@ -108,16 +111,16 @@ function ReValue(props) {
             if (Number.isNaN(text)) {
               _typeStr = 'number';
             }
-            if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-              text = /^(true)$/ig.test(text) ? true : false;
+            if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
+              text = /^(true)$/gi.test(text) ? true : false;
               _typeStr = 'boolean';
-            } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-              text = BigInt(text.replace(/n$/ig, ''));
+            } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
+              text = BigInt(text.replace(/n$/gi, ''));
               _typeStr = 'bigint';
-            } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+            } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
               text = null;
               _typeStr = 'null';
-            } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+            } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
               text = undefined;
               _typeStr = 'undefined';
             } else if (typeof text === 'string') {
@@ -137,7 +140,8 @@ function ReValue(props) {
             return onEdit({
               type: 'value',
               value: text,
-              oldValue: curentChild
+              oldValue: curentChild,
+              namespace: namespace
             });
           case 14:
             result = _context.sent;

package/cjs/node.d.ts

@@ -7,6 +7,7 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: 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;

package/cjs/node.js

@@ -20,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", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
 var CountInfo = function CountInfo(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
@@ -61,6 +61,8 @@ function RooNode(props) {
     keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
     _props$quotes = props.quotes,
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
+    _props$namespace = props.namespace,
+    namespace = _props$namespace === void 0 ? [] : _props$namespace,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
     parentValue = props.parentValue,
@@ -70,10 +72,6 @@ function RooNode(props) {
   var subkeyid = (0, _react.useId)();
   var expands = (0, _store.useExpandsStatus)();
   var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
-  var arrowStyle = {
-    transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
-    transition: 'all 0.3s'
-  };
   var handle = function handle() {
     onExpand && typeof onExpand === 'function' && onExpand({
       expand: !expand,
@@ -116,10 +114,14 @@ function RooNode(props) {
     renderBraces: components.braces,
     renderValue: components.value
   };
+  var arrowStyle = {
+    transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
+    transition: 'all 0.3s'
+  };
   var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
     style: arrowStyle,
     'data-expand': expand,
-    className: "w-rjv-arrow"
+    className: 'w-rjv-arrow'
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
     style: arrowStyle,
     className: "w-rjv-arrow"
@@ -187,6 +189,7 @@ function RooNode(props) {
           value: valueData,
           quotes: quotes,
           "data-keys": keyid,
+          namespace: (0, _toConsumableArray2["default"])(namespace),
           render: components.objectKey,
           keyName: keyName,
           parentName: keyName,
@@ -236,6 +239,7 @@ function RooNode(props) {
           value: item,
           "data-keys": keyid,
           quotes: quotes,
+          namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
           parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
@@ -249,6 +253,7 @@ function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
+              namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [label]),
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
@@ -259,6 +264,7 @@ function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
+              namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
@@ -267,7 +273,9 @@ function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+          namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key])
+        }, valueViewProps), {}, {
           renderKey: renderKey,
           keyName: key,
           value: item

package/cjs/semicolon.d.ts

@@ -15,6 +15,7 @@ export interface SemicolonProps extends LabelProps {
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
     label?: string;
+    namespace?: Array<string | number>;
     render?: (props: SemicolonProps) => React.ReactNode;
 }
 export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;

package/cjs/semicolon.js

@@ -13,7 +13,7 @@ var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
 var _value = require("./value");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "namespace", "parentName"];
 function usePrevious(value) {
   var ref = (0, _react.useRef)();
   (0, _react.useEffect)(function () {
@@ -77,6 +77,7 @@ var Semicolon = function Semicolon(_ref2) {
     highlightUpdates = _ref2.highlightUpdates,
     quotes = _ref2.quotes,
     style = _ref2.style,
+    namespace = _ref2.namespace,
     parentName = _ref2.parentName,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded);
   var highlightContainer = (0, _react.useRef)(null);
@@ -86,6 +87,7 @@ var Semicolon = function Semicolon(_ref2) {
       className: className
     }, props), {}, {
       value: value,
+      namespace: namespace,
       style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
         color: color
       }),
@@ -96,7 +98,6 @@ var Semicolon = function Semicolon(_ref2) {
       children: content
     }));
   }
-  ;
   useHighlight({
     value: value,
     highlightUpdates: highlightUpdates,

package/cjs/value.d.ts

@@ -52,6 +52,7 @@ interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSp
     data?: T;
     visible?: boolean;
     quotes?: JsonViewProps<T>['quotes'];
+    namespace?: Array<string | number>;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
     keyName?: ValueViewProps<T>['keyName'];
 }
@@ -64,6 +65,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];

package/cjs/value.js

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

package/esm/editor/index.d.ts

@@ -11,6 +11,7 @@ export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T>
         oldValue: unknown;
         keyName?: string | number;
         parentName?: string | number;
+        namespace?: Array<string | number>;
         type?: 'value' | 'key';
     }) => boolean;
     /**

package/esm/editor/objectKey.js

@@ -1,6 +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 = ["className", "value", "keyName", "parentName", "quotes", "label", "editableValue", "onEdit", "highlightUpdates", "render"];
+var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
 import { useEffect, useRef, useState } from 'react';
 import { useHighlight } from '../semicolon';
 import { Label } from '../value';
@@ -13,6 +14,7 @@ export var ObjectKey = props => {
       parentName,
       quotes,
       label,
+      namespace,
       editableValue,
       onEdit,
       highlightUpdates = true,
@@ -40,22 +42,34 @@ export var ObjectKey = props => {
       (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
     }
   };
-  var blur = () => {
-    setEditable(false);
-    if ($edit.current) {
-      var _$edit$current2;
-      $edit.current.contentEditable = 'false';
-      (_$edit$current2 = $edit.current) == null ? void 0 : _$edit$current2.focus();
-      setCurentLabel($edit.current.innerText);
-      onEdit && onEdit({
-        value: $edit.current.innerText,
-        oldValue: curentLabel,
-        keyName,
-        parentName,
-        type: 'key'
-      });
-    }
-  };
+  var blur = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* () {
+      if ($edit.current) {
+        var _$edit$current2;
+        if (onEdit) {
+          var result = yield onEdit({
+            value: $edit.current.innerText,
+            oldValue: curentLabel,
+            namespace,
+            keyName,
+            parentName,
+            type: 'key'
+          });
+          if (result) {
+            setCurentLabel($edit.current.innerText);
+          } else {
+            $edit.current.innerText = curentLabel;
+          }
+        }
+        $edit.current.contentEditable = 'false';
+        (_$edit$current2 = $edit.current) == null ? void 0 : _$edit$current2.focus();
+      }
+      setEditable(false);
+    });
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = () => {
     if ($edit.current) {
       var _$edit$current3;
@@ -72,11 +86,11 @@ export var ObjectKey = props => {
   };
   useEffect(() => {
     if ($edit.current) {
-      $edit.current.addEventListener("paste", e => {
+      $edit.current.addEventListener('paste', e => {
         e.preventDefault();
         // @ts-ignore
-        var text = e.clipboardData.getData("text/plain");
-        document.execCommand("insertHTML", false, text);
+        var text = e.clipboardData.getData('text/plain');
+        document.execCommand('insertHTML', false, text);
       });
     }
   }, [$edit]);

package/esm/editor/value.d.ts

@@ -9,6 +9,7 @@ export interface ReValueProps<T extends object> extends React.HTMLAttributes<HTM
     value?: unknown;
     data?: T;
     visible?: boolean;
+    namespace?: Array<string | number>;
     editableValue?: boolean;
     displayDataTypes?: boolean;
     setValue?: React.Dispatch<React.SetStateAction<T>>;

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", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
+var _excluded = ["type", "value", "setValue", "data", "keyName", "visible", "quotes", "style", "children", "namespace", "displayDataTypes", "editableValue", "onDelete", "onEdit"];
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { getValueString, isFloat, Type, typeMap } from '../value';
 import { EditIcon } from './icon/edit';
@@ -31,6 +31,7 @@ export function ReValue(props) {
       visible,
       quotes,
       style,
+      namespace,
       displayDataTypes,
       editableValue,
       onDelete,
@@ -48,7 +49,7 @@ export function ReValue(props) {
     if ($edit.current) {
       var _$edit$current;
       setEditable(true);
-      $edit.current.contentEditable = 'true';
+      $edit.current.setAttribute('contentEditable', 'true');
       (_$edit$current = $edit.current) == null ? void 0 : _$edit$current.focus();
     }
   };
@@ -58,7 +59,9 @@ export function ReValue(props) {
       evn.stopPropagation();
       evn.preventDefault();
       setEditable(false);
-      $edit.current.contentEditable = 'false';
+      if ($edit.current) {
+        $edit.current.setAttribute('contentEditable', 'false');
+      }
     }
   };
   var blur = /*#__PURE__*/function () {
@@ -66,8 +69,8 @@ export function ReValue(props) {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
-        $edit.current.contentEditable = 'false';
-        var text = $edit.current.innerText;
+        $edit.current.setAttribute('contentEditable', 'false');
+        var text = $edit.current.innerHTML;
         var _typeStr = curentType;
         if (curentType === 'number' || curentType === 'float') {
           text = Number(text);
@@ -80,16 +83,16 @@ export function ReValue(props) {
         if (Number.isNaN(text)) {
           _typeStr = 'number';
         }
-        if (typeof text === 'string' && /^(true|false)$/ig.test(text)) {
-          text = /^(true)$/ig.test(text) ? true : false;
+        if (typeof text === 'string' && /^(true|false)$/gi.test(text)) {
+          text = /^(true)$/gi.test(text) ? true : false;
           _typeStr = 'boolean';
-        } else if (typeof text === 'string' && /^[\d]+n$/ig.test(text)) {
-          text = BigInt(text.replace(/n$/ig, ''));
+        } else if (typeof text === 'string' && /^[\d]+n$/gi.test(text)) {
+          text = BigInt(text.replace(/n$/gi, ''));
           _typeStr = 'bigint';
-        } else if (typeof text === 'string' && /^(null)$/ig.test(text)) {
+        } else if (typeof text === 'string' && /^(null)$/gi.test(text)) {
           text = null;
           _typeStr = 'null';
-        } else if (typeof text === 'string' && /^(undefined)$/ig.test(text)) {
+        } else if (typeof text === 'string' && /^(undefined)$/gi.test(text)) {
           text = undefined;
           _typeStr = 'undefined';
         } else if (typeof text === 'string') {
@@ -105,7 +108,8 @@ export function ReValue(props) {
           var result = yield onEdit({
             type: 'value',
             value: text,
-            oldValue: curentChild
+            oldValue: curentChild,
+            namespace
           });
           if (result) {
             setCurentType(_typeStr);

package/esm/node.d.ts

@@ -7,6 +7,7 @@ export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: 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;

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", "parentValue", "setParentValue"];
+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 { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
@@ -42,6 +42,7 @@ export function RooNode(props) {
       level = 1,
       keyid = 'root',
       quotes = '"',
+      namespace = [],
       onCopied,
       onExpand,
       parentValue,
@@ -52,10 +53,6 @@ export function RooNode(props) {
   var subkeyid = useId();
   var expands = useExpandsStatus();
   var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
-  var arrowStyle = {
-    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
-    transition: 'all 0.3s'
-  };
   var handle = () => {
     onExpand && typeof onExpand === 'function' && onExpand({
       expand: !expand,
@@ -95,10 +92,14 @@ export function RooNode(props) {
     renderBraces: components.braces,
     renderValue: components.value
   };
+  var arrowStyle = {
+    transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
+    transition: 'all 0.3s'
+  };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
     style: arrowStyle,
     'data-expand': expand,
-    className: "w-rjv-arrow"
+    className: 'w-rjv-arrow'
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle,
     className: "w-rjv-arrow"
@@ -149,6 +150,7 @@ export function RooNode(props) {
           value: valueData,
           quotes: quotes,
           "data-keys": keyid,
+          namespace: [...namespace],
           render: components.objectKey,
           keyName: keyName,
           parentName: keyName,
@@ -196,6 +198,7 @@ export function RooNode(props) {
           value: item,
           "data-keys": keyid,
           quotes: quotes,
+          namespace: [...namespace, key],
           parentName: keyName,
           highlightUpdates: highlightUpdates,
           render: components.objectKey,
@@ -209,6 +212,7 @@ export function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
+              namespace: [...namespace, label],
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
@@ -219,6 +223,7 @@ export function RooNode(props) {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               value: item,
+              namespace: [...namespace, key],
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
@@ -227,7 +232,9 @@ export function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+        return /*#__PURE__*/_jsx(ValueView, _extends({
+          namespace: [...namespace, key]
+        }, valueViewProps, {
           renderKey: renderKey,
           keyName: key,
           value: item

package/esm/semicolon.d.ts

@@ -15,6 +15,7 @@ export interface SemicolonProps extends LabelProps {
     quotes?: JsonViewProps<object>['quotes'];
     value?: object;
     label?: string;
+    namespace?: Array<string | number>;
     render?: (props: SemicolonProps) => React.ReactNode;
 }
 export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;

package/esm/semicolon.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "parentName"];
+var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "namespace", "parentName"];
 import { useMemo, useRef, useEffect } from 'react';
 import { Label } from './value';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -68,6 +68,7 @@ export var Semicolon = _ref2 => {
       highlightUpdates,
       quotes,
       style,
+      namespace,
       parentName
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -78,6 +79,7 @@ export var Semicolon = _ref2 => {
       className
     }, props, {
       value,
+      namespace,
       style: _extends({}, style, {
         color
       }),
@@ -88,7 +90,6 @@ export var Semicolon = _ref2 => {
       children: content
     }));
   }
-  ;
   useHighlight({
     value,
     highlightUpdates,

package/esm/value.d.ts

@@ -52,6 +52,7 @@ interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSp
     data?: T;
     visible?: boolean;
     quotes?: JsonViewProps<T>['quotes'];
+    namespace?: Array<string | number>;
     setValue?: React.Dispatch<React.SetStateAction<T>>;
     keyName?: ValueViewProps<T>['keyName'];
 }
@@ -64,6 +65,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     enableClipboard: boolean;
     indentWidth: number;
     level?: number;
+    namespace?: Array<string | number>;
     quotes?: JsonViewProps<T>['quotes'];
     renderKey?: JSX.Element;
     renderBraces?: MetaProps['render'];

package/esm/value.js

@@ -1,7 +1,7 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "renderKey", "quotes", "level", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
+  _excluded2 = ["value", "setValue", "data", "keyName", "indentWidth", "namespace", "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';
@@ -116,6 +116,7 @@ export function ValueView(props) {
       data,
       keyName,
       indentWidth,
+      namespace,
       renderKey,
       quotes,
       renderValue,
@@ -175,6 +176,7 @@ export function ValueView(props) {
       data,
       quotes,
       keyName,
+      namespace,
       visible: showTools,
       content,
       children: content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -79,6 +79,9 @@
     "tree-view",
     "treeview"
   ],
+  "dependencies": {
+    "@babel/runtime": "^7.22.6"
+  },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/react-test-renderer": "^18.0.0",