@uiw/react-json-view 2.0.0-alpha.3 → 2.0.0-alpha.30

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,23 +16,37 @@ 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 _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,
     _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;
   var expands = (0, _Expands.useExpandsStore)();
   var _useStore = (0, _store.useStore)(),
     objectSortKeys = _useStore.objectSortKeys,
     indentWidth = _useStore.indentWidth,
-    collapsed = _useStore.collapsed;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   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;
+  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 : defaultExpanded;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded) {
     return null;
   }
@@ -47,11 +62,13 @@ var KeyValues = function KeyValues(props) {
         b = _ref4[0];
       return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
     }) : entries.sort(function (_ref5, _ref6) {
-      var _ref7 = (0, _slicedToArray2["default"])(_ref5, 1),
-        a = _ref7[0];
-      var _ref8 = (0, _slicedToArray2["default"])(_ref6, 1),
-        b = _ref8[0];
-      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+      var _ref7 = (0, _slicedToArray2["default"])(_ref5, 2),
+        a = _ref7[0],
+        valA = _ref7[1];
+      var _ref8 = (0, _slicedToArray2["default"])(_ref6, 2),
+        b = _ref8[0],
+        valB = _ref8[1];
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b, valA, valB) : 0;
     });
   }
   var style = {
@@ -69,16 +86,18 @@ var KeyValues = function KeyValues(props) {
       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;
@@ -89,33 +108,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;
@@ -130,6 +154,7 @@ var KeyValuesItem = function KeyValuesItem(props) {
       value: myValue,
       parentValue: parentValue,
       initialValue: value,
+      keys: keys,
       level: level + 1
     });
   }
@@ -141,18 +166,28 @@ 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
+    }), /*#__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

@@ -2,6 +2,7 @@ interface NestedCloseProps<T extends object> {
     value?: T;
     expandKey: string;
     level: number;
+    keys?: (string | number)[];
 }
 export declare const NestedClose: {
     <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;

package/cjs/comps/NestedClose.js

@@ -8,18 +8,29 @@ var _store = require("../store");
 var _Expands = require("../store/Expands");
 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,
     expandKey = props.expandKey,
-    level = props.level;
+    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;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   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 defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
   var len = Object.keys(value).length;
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  })) {
+    return null;
+  }
   if (isExpanded || len === 0) {
     return null;
   }
@@ -34,5 +45,4 @@ var NestedClose = function NestedClose(props) {
     })
   });
 };
-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

@@ -18,22 +18,35 @@ var _symbol = require("../symbol");
 var _Ellipsis = require("../section/Ellipsis");
 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;
+    collapsed = _useStore.collapsed,
+    shouldExpandNodeInitially = _useStore.shouldExpandNodeInitially;
   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 defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
   var isObject = (0, _typeof2["default"])(value) === 'object';
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(isExpanded, {
+    value: value,
+    keys: keys,
+    level: level
+  });
+  if (expands[expandKey] === undefined && shouldExpand !== undefined) {
+    isExpanded = shouldExpand;
+  }
   var click = function click() {
     var opt = {
       expand: !isExpanded,
@@ -60,26 +73,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 +107,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,7 @@
 export declare const isFloat: (n: number) => boolean;
 interface ValueProps {
-    value?: unknown;
+    value: unknown;
     keyName: string | number;
-    expandKey: string;
 }
 export declare const Value: {
     (props: ValueProps): import("react/jsx-runtime").JSX.Element | null;

package/cjs/comps/Value.js

@@ -8,17 +8,14 @@ exports.isFloat = exports.Value = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 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;
+    keyName = props.keyName;
   var reset = {
-    keyName: keyName,
-    expandKey: expandKey
+    keyName: keyName
   };
   if (value instanceof URL) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -74,5 +71,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'];

package/cjs/editor/KeyName.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyNameRender = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"],
+  _excluded2 = ["value", "parentValue", "keyName"];
+var KeyNameRender = exports.KeyNameRender = function KeyNameRender(_ref, _ref2) {
+  var children = _ref.children,
+    reset = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var value = _ref2.value,
+    parentValue = _ref2.parentValue,
+    keyName = _ref2.keyName;
+  if (typeof children === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Child, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    children: children
+  }));
+};
+var Child = function Child(props) {
+  var value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var $dom = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(props.children),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentValue = _useState2[0],
+    setCurrentValue = _useState2[1];
+  var _useStore = (0, _store.useStore)(),
+    onEdit = _useStore.onEdit;
+  var onKeyDown = function onKeyDown(evn) {
+    if (evn.key === 'Enter') {
+      var _$dom$current;
+      (_$dom$current = $dom.current) === null || _$dom$current === void 0 || _$dom$current.setAttribute('contentEditable', 'false');
+    }
+  };
+  var onClick = function onClick(evn) {
+    var _$dom$current2, _$dom$current3;
+    evn.stopPropagation();
+    (_$dom$current2 = $dom.current) === null || _$dom$current2 === void 0 || _$dom$current2.setAttribute('contentEditable', 'true');
+    (_$dom$current3 = $dom.current) === null || _$dom$current3 === void 0 || _$dom$current3.focus();
+  };
+  var onBlur = function onBlur(evn) {
+    var _$dom$current4;
+    (_$dom$current4 = $dom.current) === null || _$dom$current4 === void 0 || _$dom$current4.setAttribute('contentEditable', 'false');
+    var callback = onEdit && onEdit({
+      value: evn.target.textContent,
+      oldValue: value,
+      keyName: keyName
+    });
+    if (callback) {
+      setCurrentValue(evn.target.textContent);
+    }
+  };
+  var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onBlur: onBlur,
+    spellCheck: false,
+    contentEditable: 'false',
+    suppressContentEditableWarning: true,
+    children: currentValue
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
+    ref: $dom
+  }));
+};

package/cjs/editor/index.d.ts

@@ -0,0 +1,18 @@
+import { type JsonViewProps } from '../';
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
+}
+declare const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default JsonViewEditor;

package/cjs/editor/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _ = _interopRequireDefault(require("../"));
+var _KeyName = require("./KeyName");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "onEdit", "editable"];
+var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    onEdit = props.onEdit,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStoreReducer = (0, _store.useStoreReducer)({
+      onEdit: onEdit
+    }),
+    _useStoreReducer2 = (0, _slicedToArray2["default"])(_useStoreReducer, 2),
+    state = _useStoreReducer2[0],
+    dispatch = _useStoreReducer2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.Context.Provider, {
+    value: state,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.Dispatch.Provider, {
+      value: dispatch,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        shortenTextAfterLength: 0,
+        ref: ref,
+        children: [editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].KeyName, {
+          render: _KeyName.KeyNameRender
+        }), children]
+      }))
+    })
+  });
+});
+var _default = exports["default"] = JsonViewEditor;
+module.exports = exports.default;

package/cjs/editor/store.d.ts

@@ -0,0 +1,27 @@
+type InitialState = {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+};
+type Dispatch = React.Dispatch<InitialState>;
+export declare const Context: import("react").Context<InitialState>;
+export declare const Dispatch: import("react").Context<Dispatch>;
+export declare const useStore: () => InitialState;
+export declare function useStoreReducer(initialState: InitialState): [{
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: "value" | "key";
+    }) => boolean;
+}, import("react").Dispatch<InitialState>];
+export {};

package/cjs/editor/store.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = exports.Dispatch = exports.Context = void 0;
+exports.useStoreReducer = useStoreReducer;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var initialState = {};
+var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var Dispatch = exports.Dispatch = /*#__PURE__*/(0, _react.createContext)(function () {});
+Dispatch.displayName = 'JVR.Editor.Dispatch';
+var useStore = exports.useStore = function useStore() {
+  return (0, _react.useContext)(Context);
+};
+function useStoreReducer(initialState) {
+  return (0, _react.useReducer)(reducer, initialState);
+}

package/cjs/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BraceLeft } from './symbol/BraceLeft';
 import { BraceRight } from './symbol/BraceRight';
 import { BracketsLeft } from './symbol/BracketsLeft';
@@ -25,6 +24,7 @@ import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 export * from './store';
 export * from './store/Expands';
 export * from './store/ShowTools';
@@ -37,7 +37,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     /** Define the root node name. @default undefined */
     keyName?: string | number;
     /** Whether sort keys through `String.prototype.localeCompare()` @default false */
-    objectSortKeys?: boolean | ((a: string, b: string) => number);
+    objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
     /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
@@ -48,9 +48,15 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
     collapsed?: boolean | number;
+    /** Determine whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded). */
+    shouldExpandNodeInitially?: (isExpanded: boolean, props: {
+        value?: T;
+        keys: (number | string)[];
+        level: number;
+    }) => boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
-    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
@@ -89,6 +95,7 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     CountInfo: typeof CountInfo;
     CountInfoExtra: typeof CountInfoExtra;
     KeyName: typeof KeyName;
+    Row: typeof Row;
 };
 declare const JsonView: JsonViewComponent;
 export default JsonView;