@uiw/react-json-view 2.0.0-alpha.4 → 2.0.0-alpha.41

package/cjs/comps/Copied.js

@@ -10,19 +10,24 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _store = require("../store");
-var _ShowTools = require("../store/ShowTools");
 var _Section = require("../store/Section");
+var _ShowTools = require("../store/ShowTools");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["keyName", "value", "expandKey"],
+var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys", "beforeCopy"],
   _excluded2 = ["as", "render"];
-var Copied = function Copied(props) {
+var Copied = exports.Copied = function Copied(props) {
   var keyName = props.keyName,
     value = props.value,
+    parentValue = props.parentValue,
     expandKey = props.expandKey,
+    keys = props.keys,
+    beforeCopy = props.beforeCopy,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useStore = (0, _store.useStore)(),
     onCopied = _useStore.onCopied,
-    enableClipboard = _useStore.enableClipboard;
+    enableClipboard = _useStore.enableClipboard,
+    globalBeforeCopy = _useStore.beforeCopy;
   var showTools = (0, _ShowTools.useShowToolsStore)();
   var isShowTools = showTools[expandKey];
   var _useState = (0, _react.useState)(false),
@@ -32,21 +37,53 @@ var Copied = function Copied(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Copi = _useSectionStore.Copied,
     Comp = _useSectionStore$Copi === void 0 ? {} : _useSectionStore$Copi;
+  var sectionBeforeCopy = Comp === null || Comp === void 0 ? void 0 : Comp.beforeCopy;
   if (enableClipboard === false || !isShowTools) return null;
   var click = function click(event) {
     event.stopPropagation();
-    var copyText = JSON.stringify(value, function (key, value) {
-      if (typeof value === 'bigint') {
-        return value.toString();
+    var copyText = '';
+    if (typeof value === 'number' && value === Infinity) {
+      copyText = 'Infinity';
+    } else if (typeof value === 'number' && isNaN(value)) {
+      copyText = 'NaN';
+    } else if (typeof value === 'bigint') {
+      copyText = (0, _types.bigIntToString)(value);
+    } else if (value instanceof Date) {
+      copyText = value.toLocaleString();
+    } else {
+      copyText = JSON.stringify(value, function (_, v) {
+        return typeof v === 'bigint' ? (0, _types.bigIntToString)(v) : v;
+      }, 2);
+    }
+
+    // Apply beforeCopy transformation if provided
+    // Priority: component prop > section prop > global prop
+    var finalBeforeCopy = beforeCopy || sectionBeforeCopy || globalBeforeCopy;
+    if (finalBeforeCopy && typeof finalBeforeCopy === 'function') {
+      copyText = finalBeforeCopy(copyText, keyName, value, parentValue, expandKey, keys);
+    }
+    onCopied && onCopied(copyText, value);
+    setCopied(true);
+    var _clipboard = navigator.clipboard || {
+      writeText: function writeText(text) {
+        return new Promise(function (reslove, reject) {
+          var textarea = document.createElement('textarea');
+          textarea.style.position = 'absolute';
+          textarea.style.opacity = '0';
+          textarea.style.left = '-99999999px';
+          textarea.value = text;
+          document.body.appendChild(textarea);
+          textarea.select();
+          if (!document.execCommand('copy')) {
+            reject();
+          } else {
+            reslove();
+          }
+          textarea.remove();
+        });
       }
-      return value;
-    }, 2);
-    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
-    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
-    if (typeof value === 'bigint') copyText = value + 'n';
-    navigator.clipboard.writeText(copyText).then(function () {
-      onCopied && onCopied(copyText, value);
-      setCopied(true);
+    };
+    _clipboard.writeText(copyText).then(function () {
       var timer = setTimeout(function () {
         setCopied(false);
         clearTimeout(timer);
@@ -54,19 +91,26 @@ var Copied = function Copied(props) {
     })["catch"](function (error) {});
   };
   var svgProps = {
+    style: {
+      display: 'inline-flex'
+    },
     fill: copied ? 'var(--w-rjv-copied-success-color, #28a745)' : 'var(--w-rjv-copied-color, currentColor)',
     onClick: click
   };
   var as = Comp.as,
     render = Comp.render,
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
-  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other), svgProps);
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other), svgProps), {}, {
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), other.style), svgProps.style)
+  });
   var isRender = render && typeof render === 'function';
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, elmProps), {}, {
     'data-copied': copied
   }), {
     value: value,
-    keyName: keyName
+    keyName: keyName,
+    keys: keys,
+    parentValue: parentValue
   });
   if (child) return child;
   if (copied) {
@@ -86,5 +130,4 @@ var Copied = function Copied(props) {
     })
   }));
 };
-exports.Copied = Copied;
 Copied.displayName = 'JVR.Copied';

package/cjs/comps/KeyValues.d.ts

@@ -1,7 +1,5 @@
-interface KeyValuesProps<T extends object> {
-    keyName?: string | number;
-    value?: T;
-    parentValue?: T;
+import { type SectionElementResult } from '../store/Section';
+interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
     expandKey?: string;
     level: number;
 }

package/cjs/comps/KeyValues.js

@@ -5,9 +5,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KeyValuesItem = exports.KeyValues = exports.KayName = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _store = require("../store");
@@ -15,26 +16,51 @@ var _Expands = require("../store/Expands");
 var _ShowTools = require("../store/ShowTools");
 var _Value = require("./Value");
 var _KeyName = require("../section/KeyName");
+var _Row = require("../section/Row");
 var _Container = require("../Container");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _useHighlight = require("../utils/useHighlight");
+var _Copied = require("../comps/Copied");
+var _useIdCompat = require("../comps/useIdCompat");
 var _jsxRuntime = require("react/jsx-runtime");
-var KeyValues = function KeyValues(props) {
+var KeyValues = exports.KeyValues = function KeyValues(props) {
   var _expands$expandKey;
-  var value = props.value,
+  var keyName = props.keyName,
+    value = props.value,
     _props$expandKey = props.expandKey,
     expandKey = _props$expandKey === void 0 ? '' : _props$expandKey,
-    level = props.level;
+    level = props.level,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys,
+    parentValue = props.parentValue;
   var expands = (0, _Expands.useExpandsStore)();
   var _useStore = (0, _store.useStore)(),
     objectSortKeys = _useStore.objectSortKeys,
     indentWidth = _useStore.indentWidth,
-    collapsed = _useStore.collapsed;
-  var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value: value,
+    keys: keys,
+    level: level,
+    keyName: keyName,
+    parentValue: parentValue
+  });
+  if (shouldExpandNodeInitially && collapsed === false) {
+    if (expands[expandKey] === undefined && !shouldExpand) {
+      return null;
+    }
+  } else {
+    if (expands[expandKey] === undefined && shouldExpand) {
+      return null;
+    }
+  }
   if (isExpanded) {
     return null;
   }
+  var isMyArray = Array.isArray(value);
   // object
   var entries = isMyArray ? Object.entries(value).map(function (m) {
     return [Number(m[0]), m[1]];
@@ -65,22 +91,24 @@ var KeyValues = function KeyValues(props) {
     className: "w-rjv-wrap",
     style: style,
     children: entries.map(function (_ref9, idx) {
-      var _ref10 = (0, _slicedToArray2["default"])(_ref9, 2),
-        key = _ref10[0],
-        val = _ref10[1];
+      var _ref0 = (0, _slicedToArray2["default"])(_ref9, 2),
+        key = _ref0[0],
+        val = _ref0[1];
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyValuesItem, {
         parentValue: value,
         keyName: key,
+        keys: [].concat((0, _toConsumableArray2["default"])(keys), [key]),
         value: val,
         level: level
       }, idx);
     })
   });
 };
-exports.KeyValues = KeyValues;
 KeyValues.displayName = 'JVR.KeyValues';
-var KayName = function KayName(props) {
+var KayName = exports.KayName = function KayName(props) {
   var keyName = props.keyName,
+    parentValue = props.parentValue,
+    keys = props.keys,
     value = props.value;
   var _useStore2 = (0, _store.useStore)(),
     highlightUpdates = _useStore2.highlightUpdates;
@@ -91,33 +119,38 @@ var KayName = function KayName(props) {
     highlightUpdates: highlightUpdates,
     highlightContainer: highlightContainer
   });
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       ref: highlightContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, {
-        keyName: keyName,
-        value: value,
+      }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, compProps), {}, {
         children: keyName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "right"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, {})]
+      }, compProps))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, (0, _objectSpread2["default"])({}, compProps))]
   });
 };
-exports.KayName = KayName;
 KayName.displayName = 'JVR.KayName';
-var KeyValuesItem = function KeyValuesItem(props) {
+var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
   var keyName = props.keyName,
     value = props.value,
     parentValue = props.parentValue,
     _props$level = props.level,
-    level = _props$level === void 0 ? 0 : _props$level;
+    level = _props$level === void 0 ? 0 : _props$level,
+    _props$keys2 = props.keys,
+    keys = _props$keys2 === void 0 ? [] : _props$keys2;
   var dispatch = (0, _ShowTools.useShowToolsDispatch)();
-  var subkeyid = (0, _react.useId)();
+  var subkeyid = (0, _useIdCompat.useIdCompat)();
   var isMyArray = Array.isArray(value);
   var isMySet = value instanceof Set;
   var isMyMap = value instanceof Map;
@@ -132,6 +165,7 @@ var KeyValuesItem = function KeyValuesItem(props) {
       value: myValue,
       parentValue: parentValue,
       initialValue: value,
+      keys: keys,
       level: level + 1
     });
   }
@@ -143,18 +177,29 @@ var KeyValuesItem = function KeyValuesItem(props) {
       return dispatch((0, _defineProperty2["default"])({}, subkeyid, false));
     }
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: "w-rjv-line"
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Row.RowComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: "w-rjv-line",
+    value: value,
+    keyName: keyName,
+    keys: keys,
+    parentValue: parentValue
   }, reset), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(KayName, {
       keyName: keyName,
-      value: value
+      value: value,
+      keys: keys,
+      parentValue: parentValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Value.Value, {
       keyName: keyName,
       value: value,
+      keys: keys
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
+      keyName: keyName,
+      value: value,
+      keys: keys,
+      parentValue: parentValue,
       expandKey: subkeyid
     })]
   }));
 };
-exports.KeyValuesItem = KeyValuesItem;
 KeyValuesItem.displayName = 'JVR.KeyValuesItem';

package/cjs/comps/NestedClose.d.ts

@@ -1,5 +1,5 @@
-interface NestedCloseProps<T extends object> {
-    value?: T;
+import { type SectionElementResult } from '../store/Section';
+interface NestedCloseProps<T extends object> extends SectionElementResult<T> {
     expandKey: string;
     level: number;
 }

package/cjs/comps/NestedClose.js

@@ -1,24 +1,46 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.NestedClose = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _store = require("../store");
 var _Expands = require("../store/Expands");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _jsxRuntime = require("react/jsx-runtime");
-var NestedClose = function NestedClose(props) {
+var NestedClose = exports.NestedClose = function NestedClose(props) {
   var _expands$expandKey;
-  var value = props.value,
+  var keyName = props.keyName,
+    value = props.value,
     expandKey = props.expandKey,
-    level = props.level;
+    parentValue = props.parentValue,
+    level = props.level,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys;
   var expands = (0, _Expands.useExpandsStore)();
-  var isArray = Array.isArray(value);
   var _useStore = (0, _store.useStore)(),
-    collapsed = _useStore.collapsed;
-  var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value: value,
+    keys: keys,
+    level: level,
+    keyName: keyName,
+    parentValue: parentValue
+  });
+  if (shouldExpandNodeInitially && collapsed === false) {
+    if (expands[expandKey] === undefined && !shouldExpand) {
+      return null;
+    }
+  } else {
+    if (expands[expandKey] === undefined && shouldExpand) {
+      return null;
+    }
+  }
   var len = Object.keys(value).length;
   if (isExpanded || len === 0) {
     return null;
@@ -26,13 +48,21 @@ var NestedClose = function NestedClose(props) {
   var style = {
     paddingLeft: 4
   };
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
+  var isArray = Array.isArray(value);
+  var isMySet = value instanceof Set;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
-      isBrackets: isArray || isMySet,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      isBrackets: isArray || isMySet
+    }, compProps), {}, {
       isVisiable: true
-    })
+    }))
   });
 };
-exports.NestedClose = NestedClose;
 NestedClose.displayName = 'JVR.NestedClose';

package/cjs/comps/NestedOpen.d.ts

@@ -1,6 +1,5 @@
-export interface NestedOpenProps<T extends object> {
-    keyName?: string | number;
-    value?: T;
+import { type SectionElementResult } from '../store/Section';
+export interface NestedOpenProps<T extends object> extends SectionElementResult<T> {
     initialValue?: T;
     expandKey: string;
     level: number;

package/cjs/comps/NestedOpen.js

@@ -6,34 +6,46 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.NestedOpen = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _KeyValues = require("./KeyValues");
 var _Expands = require("../store/Expands");
 var _store = require("../store");
 var _Copied = require("./Copied");
 var _CountInfoExtra = require("../section/CountInfoExtra");
 var _CountInfo = require("../section/CountInfo");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _Ellipsis = require("../section/Ellipsis");
-var _types = require("../types");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
-var NestedOpen = function NestedOpen(props) {
+var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var _expands$expandKey;
   var keyName = props.keyName,
     expandKey = props.expandKey,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys,
     initialValue = props.initialValue,
     value = props.value,
+    parentValue = props.parentValue,
     level = props.level;
   var expands = (0, _Expands.useExpandsStore)();
   var dispatchExpands = (0, _Expands.useExpandsDispatch)();
   var _useStore = (0, _store.useStore)(),
     onExpand = _useStore.onExpand,
-    collapsed = _useStore.collapsed;
-  var isArray = Array.isArray(value);
-  var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  var isObject = (0, _typeof2["default"])(value) === 'object';
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value: value,
+    keys: keys,
+    level: level,
+    keyName: keyName,
+    parentValue: parentValue
+  });
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially) {
+    isExpanded = !shouldExpand;
+  }
   var click = function click() {
     var opt = {
       expand: !isExpanded,
@@ -53,6 +65,9 @@ var NestedOpen = function NestedOpen(props) {
     transition: 'all 0.3s'
   };
   var len = Object.keys(value).length;
+  var isObject = (0, _typeof2["default"])(value) === 'object';
+  var isArray = Array.isArray(value);
+  var isMySet = value instanceof Set;
   var showArrow = len !== 0 && (isArray || isMySet || isObject);
   var reset = {
     style: style
@@ -60,26 +75,32 @@ var NestedOpen = function NestedOpen(props) {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, {
+    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, (0, _objectSpread2["default"])({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, (0, _objectSpread2["default"])({}, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
+      value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
-      value: initialValue
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.MapComp, {
-      value: initialValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, {
+      value: initialValue,
+      keyName: keyName
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, (0, _objectSpread2["default"])({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, (0, _objectSpread2["default"])({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfoExtra.CountInfoExtraComps, {
@@ -88,9 +109,10 @@ var NestedOpen = function NestedOpen(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
       keyName: keyName,
       value: value,
-      expandKey: expandKey
+      expandKey: expandKey,
+      parentValue: parentValue,
+      keys: keys
     })]
   }));
 };
-exports.NestedOpen = NestedOpen;
 NestedOpen.displayName = 'JVR.NestedOpen';

package/cjs/comps/Value.d.ts

@@ -1,8 +1,8 @@
 export declare const isFloat: (n: number) => boolean;
 interface ValueProps {
-    value?: unknown;
+    value: unknown;
     keyName: string | number;
-    expandKey: string;
+    keys?: (string | number)[];
 }
 export declare const Value: {
     (props: ValueProps): import("react/jsx-runtime").JSX.Element | null;

package/cjs/comps/Value.js

@@ -6,19 +6,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFloat = exports.Value = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _types = require("../types");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
-var isFloat = function isFloat(n) {
+var isFloat = exports.isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
 };
-exports.isFloat = isFloat;
-var Value = function Value(props) {
+var Value = exports.Value = function Value(props) {
   var value = props.value,
     keyName = props.keyName,
-    expandKey = props.expandKey;
+    keys = props.keys;
   var reset = {
     keyName: keyName,
-    expandKey: expandKey
+    keys: keys
   };
   if (value instanceof URL) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -74,5 +73,4 @@ var Value = function Value(props) {
   }
   return null;
 };
-exports.Value = Value;
 Value.displayName = 'JVR.Value';

package/cjs/comps/useIdCompat.d.ts

@@ -0,0 +1 @@
+export declare function useIdCompat(): string;

package/cjs/comps/useIdCompat.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIdCompat = useIdCompat;
+var _react = require("react");
+function useIdCompat() {
+  var idRef = (0, _react.useRef)(null);
+  if (idRef.current === null) {
+    idRef.current = 'custom-id-' + Math.random().toString(36).substr(2, 9);
+  }
+  return idRef.current;
+}

package/cjs/editor/KeyName.d.ts

@@ -0,0 +1,2 @@
+import { type SectionElementProps } from '../store/Section';
+export declare const KeyNameRender: SectionElementProps['render'];