@uiw/react-json-view 1.12.0 → 1.12.2

package/README.md

@@ -1,13 +1,14 @@
 react-json-view
 ===
 
+[![Buy me a coffee](https://img.shields.io/badge/Buy%20me%20a%20coffee-048754?logo=buymeacoffee)](https://jaywcjlove.github.io/#/sponsor) 
 [![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![NPM Downloads](https://img.shields.io/npm/dm/@uiw/react-json-view.svg?style=flat&label=)](https://www.npmjs.com/package/@uiw/react-json-view)
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
-[![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
+[![Coverage Status](https://raw.githack.com/uiwjs/react-json-view/v1-docs/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-A React component for displaying and editing javascript arrays and JSON objects.
+A React component for displaying and editing javascript arrays and JSON objects. Preview of v1 documentation is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
@@ -26,6 +27,8 @@ A React component for displaying and editing javascript arrays and JSON objects.
 ✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
 
+The new version **[v2](https://github.com/uiwjs/react-json-view/tree/v2)** has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely.
+
 ## Quick Start
 
 ```bash
@@ -688,7 +691,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   displayDataTypes?: boolean;
   /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: 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;
   /** Define the root node name. @default undefined */
   keyName?: string | number;

package/cjs/comps/ellipsis.js

@@ -9,7 +9,7 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["style", "render", "count", "level"];
-var Ellipsis = function Ellipsis(_ref) {
+var Ellipsis = exports.Ellipsis = function Ellipsis(_ref) {
   var style = _ref.style,
     render = _ref.render,
     count = _ref.count,
@@ -33,5 +33,4 @@ var Ellipsis = function Ellipsis(_ref) {
     children: "..."
   }));
 };
-exports.Ellipsis = Ellipsis;
 Ellipsis.displayName = 'JVR.Ellipsis';

package/cjs/editor/countInfoExtra.js

@@ -15,7 +15,6 @@ var _add = require("./icon/add");
 var _delete = require("./icon/delete");
 var _jsxRuntime = require("react/jsx-runtime");
 function CountInfoExtra(props) {
-  var _ref, _ref2;
   var visible = props.visible,
     showTools = props.showTools,
     editable = props.editable,
@@ -28,8 +27,8 @@ function CountInfoExtra(props) {
     onAdd = props.onAdd,
     onDelete = props.onDelete;
   if (!visible || !showTools) return null;
-  var click = function click(_x) {
-    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
+  var click = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee(event) {
       var keyOrValue, isArray, isAdd, result, maybeAdd;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -55,10 +54,13 @@ function CountInfoExtra(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
-  var deleteHandle = function deleteHandle(_x2) {
-    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
+    }));
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(event) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -88,8 +90,11 @@ function CountInfoExtra(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [editable && onAdd && /*#__PURE__*/(0, _jsxRuntime.jsx)(_add.AddIcon, {
       onClick: click

package/cjs/editor/icon/add.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.AddIcon = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
-var AddIcon = function AddIcon(props) {
+var AddIcon = exports.AddIcon = function AddIcon(props) {
   var style = props.style;
   var defaultStyle = {
     verticalAlign: 'middle',
@@ -26,5 +26,4 @@ var AddIcon = function AddIcon(props) {
       d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.12022,21.8947368 L21.9056145,21.8947368 L21.9056145,30.1052632 C21.9056145,31.1410526 21.0462404,32 20.0099363,32 C18.9736323,32 18.1142582,31.1410526 18.1142582,30.1052632 L18.1142582,21.8947368 L9.89965272,21.8947368 C8.86334865,21.8947368 8.00397454,21.0357895 8.00397454,20 C8.00397454,18.9642105 8.86334865,18.1052632 9.89965272,18.1052632 L18.1142582,18.1052632 L18.1142582,9.89473684 C18.1142582,8.85894737 18.9736323,8 20.0099363,8 C21.0462404,8 21.9056145,8.85894737 21.9056145,9.89473684 L21.9056145,18.1052632 L30.12022,18.1052632 C31.156524,18.1052632 32.0158982,18.9642105 32.0158982,20 C32.0158982,21.0357895 31.156524,21.8947368 30.12022,21.8947368 Z"
     })
   }));
-};
-exports.AddIcon = AddIcon;
+};

package/cjs/editor/icon/delete.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DeleteIcon = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
-var DeleteIcon = function DeleteIcon(props) {
+var DeleteIcon = exports.DeleteIcon = function DeleteIcon(props) {
   var style = props.style;
   var defaultStyle = {
     verticalAlign: 'middle',
@@ -26,5 +26,4 @@ var DeleteIcon = function DeleteIcon(props) {
       d: "M28.3940997,0 L11.625773,0 C4.34215619,0 0,4.34 0,11.62 L0,28.36 C0,35.66 4.34215619,40 11.625773,40 L28.3740897,40 C35.6577066,40 39.9999316,35.66 39.9999316,28.38 L39.9999316,11.62 C40.0198727,4.34 35.6777165,0 28.3940997,0 Z M30.3428039,27.0681654 C31.2346195,27.9595381 31.2346195,29.4349136 30.3428039,30.3262862 C29.88152,30.7873411 29.2972271,31.0025 28.7129341,31.0025 C28.1286412,31.0025 27.5443483,30.7873411 27.0830644,30.3262862 L20.0100446,23.2567787 L12.9370249,30.3262862 C12.475741,30.7873411 11.891448,31.0025 11.3071551,31.0025 C10.7228621,31.0025 10.1385692,30.7873411 9.67728531,30.3262862 C8.78464325,29.4234847 8.78464325,27.9709669 9.67728531,27.0681654 L16.7503051,19.9986579 L9.67728531,12.9291504 C8.78464325,12.0263488 8.78464325,10.573831 9.67728531,9.67102951 C10.5691008,8.77965683 12.0452093,8.77965683 12.9370249,9.67102951 L20.0100446,16.740537 L27.0830644,9.67102951 C27.9748799,8.77965683 29.4509884,8.77965683 30.3428039,9.67102951 C31.2346195,10.5624022 31.2346195,12.0377777 30.3428039,12.9291504 L23.2697842,19.9986579 L30.3428039,27.0681654 L30.3428039,27.0681654 Z"
     })
   }));
-};
-exports.DeleteIcon = DeleteIcon;
+};

package/cjs/editor/icon/edit.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EditIcon = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _jsxRuntime = require("react/jsx-runtime");
-var EditIcon = function EditIcon(props) {
+var EditIcon = exports.EditIcon = function EditIcon(props) {
   var style = props.style;
   var defaultStyle = {
     verticalAlign: 'middle',
@@ -26,5 +26,4 @@ var EditIcon = function EditIcon(props) {
       d: "M18,0 L7.74666667,0 C2.89333333,0 0,2.89333333 0,7.74666667 L0,17.9066667 C0,22.7733333 2.89333333,26 7.74666667,26 L18,26 C22.8533333,26 26.0001422,22.7733333 26.0001422,17.92 L26.0001422,7.74666667 C26.0133333,2.89333333 22.8533333,0 18,0 Z M11.9333333,20.68 C11.5466667,21.0666667 10.8133333,21.44 10.28,21.52 L7,21.9866667 C6.88,22 6.76,22.0133333 6.64,22.0133333 C6.09333333,22.0133333 5.58666667,21.8266667 5.22666667,21.4666667 C4.78666667,21.0266667 4.6,20.3866667 4.70666667,19.68 L5.17333333,16.4 C5.25333333,15.8533333 5.61333333,15.1333333 6.01333333,14.7466667 L11.96,8.8 C12.1719034,9.3972484 12.4397602,9.97314063 12.76,10.52 C12.8933333,10.7466667 13.04,10.96 13.16,11.12 C13.3066667,11.3466667 13.48,11.56 13.5866667,11.68 C13.6533333,11.7733333 13.7066667,11.84 13.7333333,11.8666667 C14.0666667,12.2666667 14.4533333,12.64 14.7866667,12.92 C14.88,13.0133333 14.9333333,13.0666667 14.96,13.08 C15.16,13.24 15.36,13.4 15.5333333,13.52 C15.7466667,13.68 15.96,13.8266667 16.1866667,13.9466667 C16.4533333,14.1066667 16.7466667,14.2533333 17.04,14.4 C17.3466667,14.5333333 17.6266667,14.6533333 17.9066667,14.7466667 L11.9333333,20.68 L11.9333333,20.68 Z M20.4933333,12.12 L19.2666667,13.36 C19.1887174,13.4373865 19.0831716,13.4805643 18.9733333,13.4800055 C18.9333333,13.4800055 18.88,13.4800055 18.8533333,13.4666667 C16.1309823,12.6775025 14.0024975,10.5490177 13.2133333,7.82666667 C13.1733333,7.68 13.2133333,7.52 13.32,7.42666667 L14.56,6.18666667 C16.5866667,4.16 18.52,4.2 20.5066667,6.18666667 C21.52,7.2 22.0133333,8.17333333 22.0133333,9.18666667 C22,10.1466667 21.5066667,11.1066667 20.4933333,12.12 L20.4933333,12.12 Z"
     })
   }));
-};
-exports.EditIcon = EditIcon;
+};

package/cjs/editor/index.js

@@ -55,6 +55,5 @@ var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }));
 });
 JsonViewEditor.displayName = 'JVR.JsonViewEditor';
-var _default = JsonViewEditor;
-exports["default"] = _default;
+var _default = exports["default"] = JsonViewEditor;
 module.exports = exports.default;

package/cjs/editor/objectKey.js

@@ -15,8 +15,7 @@ var _semicolon = require("../semicolon");
 var _value = require("../value");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "value", "keyName", "parentName", "quotes", "label", "namespace", "editableValue", "onEdit", "highlightUpdates", "render"];
-var ObjectKey = function ObjectKey(props) {
-  var _ref;
+var ObjectKey = exports.ObjectKey = function ObjectKey(props) {
   var className = props.className,
     value = props.value,
     keyName = props.keyName,
@@ -59,8 +58,8 @@ var ObjectKey = function ObjectKey(props) {
       (_$edit$current = $edit.current) === null || _$edit$current === void 0 || _$edit$current.focus();
     }
   };
-  var blur = function blur() {
-    return (_ref = _ref || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  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) {
@@ -99,8 +98,11 @@ var ObjectKey = function ObjectKey(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = function focus() {
     if ($edit.current) {
       var _$edit$current3;
@@ -165,5 +167,4 @@ var ObjectKey = function ObjectKey(props) {
     ref: $edit
   }));
 };
-exports.ObjectKey = ObjectKey;
 ObjectKey.displayName = 'JVR.ObjectKey';

package/cjs/editor/value.js

@@ -27,7 +27,7 @@ var Quotes = function Quotes(_ref) {
   });
 };
 function ReValue(props) {
-  var _ref2, _typeMap$typeStr, _ref3;
+  var _typeMap$typeStr;
   var type = props.type,
     value = props.value,
     setValue = props.setValue,
@@ -81,8 +81,8 @@ function ReValue(props) {
       }
     }
   };
-  var blur = function blur() {
-    return (_ref2 = _ref2 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee() {
       var text, _typeStr, dt, result, _getValueString, oldChildStr;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
@@ -129,7 +129,7 @@ function ReValue(props) {
               _typeStr = 'undefined';
             } else if (typeof text === 'string') {
               try {
-                if (text && text.length > 10 && !isNaN(Date.parse(text))) {
+                if (text && text.length > 19 && !isNaN(Date.parse(text))) {
                   dt = new Date(text);
                   text = dt;
                   _typeStr = 'date';
@@ -161,8 +161,11 @@ function ReValue(props) {
             return _context.stop();
         }
       }, _callee);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -189,8 +192,8 @@ function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
-  var deleteHandle = function deleteHandle(_x) {
-    return (_ref3 = _ref3 || (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/(0, _regeneratorRuntime2["default"])().mark(function _callee2(evn) {
       var maybeDelete;
       return (0, _regeneratorRuntime2["default"])().wrap(function _callee2$(_context2) {
         while (1) switch (_context2.prev = _context2.next) {
@@ -215,8 +218,11 @@ function ReValue(props) {
             return _context2.stop();
         }
       }, _callee2);
-    }))).apply(this, arguments);
-  };
+    }));
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/(0, _jsxRuntime.jsx)(Quotes, {
       style: style,

package/cjs/index.d.ts

@@ -33,7 +33,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: 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;
     /** Define the root node name. @default undefined */
     keyName?: string | number;

package/cjs/index.js

@@ -72,5 +72,4 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   }));
 });
 JsonView.displayName = 'JVR.JsonView';
-var _default = JsonView;
-exports["default"] = _default;
+var _default = exports["default"] = JsonView;

package/cjs/node.js

@@ -27,7 +27,7 @@ function getLength(obj) {
     return -1;
   }
 }
-var CountInfo = function CountInfo(_ref) {
+var CountInfo = exports.CountInfo = function CountInfo(_ref) {
   var children = _ref.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Label, {
     style: {
@@ -39,9 +39,8 @@ var CountInfo = function CountInfo(_ref) {
     children: [children, " items"]
   });
 };
-exports.CountInfo = CountInfo;
 CountInfo.displayName = 'JVR.CountInfo';
-var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+var RootNode = exports.RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _expands$keyid;
   var _props$value = props.value,
     value = _props$value === void 0 ? {} : _props$value,
@@ -62,7 +61,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     _props$shortenTextAft = props.shortenTextAfterLength,
-    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
     collapsed = props.collapsed,
     _props$level = props.level,
     level = _props$level === void 0 ? 1 : _props$level,
@@ -132,11 +131,11 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
     transition: 'all 0.3s'
   };
-  var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
+  var arrowView = components.arrow ? ( /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
     style: arrowStyle,
     'data-expand': expand,
     className: 'w-rjv-arrow'
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
+  })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
     style: arrowStyle,
     className: "w-rjv-arrow"
   });
@@ -339,5 +338,4 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     })]
   }));
 });
-exports.RootNode = RootNode;
 RootNode.displayName = 'JVR.RootNode';

package/cjs/semicolon.js

@@ -66,7 +66,7 @@ function useHighlight(_ref) {
     }
   }, [isHighlight, value, highlightContainer]);
 }
-var Semicolon = function Semicolon(_ref2) {
+var Semicolon = exports.Semicolon = function Semicolon(_ref2) {
   var children = _ref2.children,
     render = _ref2.render,
     color = _ref2.color,
@@ -111,5 +111,4 @@ var Semicolon = function Semicolon(_ref2) {
     children: content
   }));
 };
-exports.Semicolon = Semicolon;
 Semicolon.displayName = 'JSR.Semicolon';

package/cjs/store.js

@@ -13,7 +13,7 @@ var _objectSpread4 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _react = require("react");
 var expands = {};
 var listeners = [];
-var store = {
+var store = exports.store = {
   collapse: function collapse(id) {
     expands = (0, _objectSpread4["default"])((0, _objectSpread4["default"])({}, expands), {}, (0, _defineProperty2["default"])({}, id, false));
     emitChange();
@@ -23,7 +23,6 @@ var store = {
     emitChange();
   }
 };
-exports.store = store;
 function getSnapshot() {
   return expands;
 }

package/cjs/theme/basic.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.basicTheme = void 0;
-var basicTheme = {
+var basicTheme = exports.basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
@@ -28,5 +28,4 @@ var basicTheme = {
   '--w-rjv-type-null-color': '#8abeb7',
   '--w-rjv-type-nan-color': '#8abeb7',
   '--w-rjv-type-undefined-color': '#8abeb7'
-};
-exports.basicTheme = basicTheme;
+};

package/cjs/theme/dark.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.darkTheme = void 0;
-var darkTheme = {
+var darkTheme = exports.darkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#0184a6',
   '--w-rjv-background-color': '#202020',
@@ -27,5 +27,4 @@ var darkTheme = {
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#586e75'
-};
-exports.darkTheme = darkTheme;
+};

package/cjs/theme/github.dark.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.githubDarkTheme = void 0;
-var githubDarkTheme = {
+var githubDarkTheme = exports.githubDarkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#79c0ff',
   '--w-rjv-background-color': '#0d1117',
@@ -28,5 +28,4 @@ var githubDarkTheme = {
   '--w-rjv-type-null-color': '#ff7b72',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#79c0ff'
-};
-exports.githubDarkTheme = githubDarkTheme;
+};

package/cjs/theme/github.light.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.githubLightTheme = void 0;
-var githubLightTheme = {
+var githubLightTheme = exports.githubLightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#6f42c1',
   '--w-rjv-background-color': '#ffffff',
@@ -28,5 +28,4 @@ var githubLightTheme = {
   '--w-rjv-type-null-color': '#d73a49',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#005cc5'
-};
-exports.githubLightTheme = githubLightTheme;
+};

package/cjs/theme/gruvbox.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.gruvboxTheme = void 0;
-var gruvboxTheme = {
+var gruvboxTheme = exports.gruvboxTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#3c3836',
   '--w-rjv-background-color': '#fbf1c7',
@@ -28,5 +28,4 @@ var gruvboxTheme = {
   '--w-rjv-type-null-color': '#076678',
   '--w-rjv-type-nan-color': '#076678',
   '--w-rjv-type-undefined-color': '#076678'
-};
-exports.gruvboxTheme = gruvboxTheme;
+};

package/cjs/theme/light.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.lightTheme = void 0;
-var lightTheme = {
+var lightTheme = exports.lightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#002b36',
   '--w-rjv-background-color': '#ffffff',
@@ -28,5 +28,4 @@ var lightTheme = {
   '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'
-};
-exports.lightTheme = lightTheme;
+};

package/cjs/theme/monokai.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.monokaiTheme = void 0;
-var monokaiTheme = {
+var monokaiTheme = exports.monokaiTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#E6DB74',
   '--w-rjv-background-color': '#272822',
@@ -28,5 +28,4 @@ var monokaiTheme = {
   '--w-rjv-type-null-color': '#FA2672',
   '--w-rjv-type-nan-color': '#FD971F',
   '--w-rjv-type-undefined-color': '#FD971F'
-};
-exports.monokaiTheme = monokaiTheme;
+};

package/cjs/theme/nord.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.nordTheme = void 0;
-var nordTheme = {
+var nordTheme = exports.nordTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#88c0d0',
   '--w-rjv-background-color': '#2e3440',
@@ -28,5 +28,4 @@ var nordTheme = {
   '--w-rjv-type-null-color': '#5e81ac',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75'
-};
-exports.nordTheme = nordTheme;
+};

package/cjs/theme/vscode.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.vscodeTheme = void 0;
-var vscodeTheme = {
+var vscodeTheme = exports.vscodeTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
@@ -28,5 +28,4 @@ var vscodeTheme = {
   '--w-rjv-type-null-color': '#569cd6',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#569cd6'
-};
-exports.vscodeTheme = vscodeTheme;
+};

package/cjs/value.js

@@ -21,16 +21,14 @@ var _excluded = ["children", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
   _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
   _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-var Line = function Line(props) {
+var Line = exports.Line = function Line(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
 };
-exports.Line = Line;
 Line.displayName = 'JVR.Line';
-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 typeMap = {
+var typeMap = exports.typeMap = {
   string: {
     color: 'var(--w-rjv-type-string-color, #cb4b16)',
     label: 'string'
@@ -80,8 +78,7 @@ var typeMap = {
     label: 'undefined'
   }
 };
-exports.typeMap = typeMap;
-var Colon = function Colon(_ref) {
+var Colon = exports.Colon = function Colon(_ref) {
   var _ref$children = _ref.children,
     children = _ref$children === void 0 ? ':' : _ref$children,
     style = _ref.style,
@@ -97,7 +94,6 @@ var Colon = function Colon(_ref) {
     children: children
   }));
 };
-exports.Colon = Colon;
 Colon.displayName = 'JVR.Colon';
 function getValueString(value) {
   var type = (0, _typeof2["default"])(value);
@@ -153,9 +149,11 @@ var RenderShortenTextValue = function RenderShortenTextValue(_ref2) {
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     shorten = _useState2[0],
     setShorten = _useState2[1];
+  (0, _react.useEffect)(function () {
+    return setShorten(length && childrenStr.length >= length);
+  }, [length]);
   var click = function click() {
-    if (length && childrenStr.length <= length) return setShorten(false);
-    setShorten(!shorten);
+    return setShorten(!shorten);
   };
   var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(RenderStringValue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, rest), {}, {
@@ -313,7 +311,7 @@ function ValueView(props) {
   }));
 }
 ValueView.displayName = 'JVR.ValueView';
-var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
+var Label = exports.Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
   var children = _ref4.children,
     color = _ref4.color,
     fontSize = _ref4.fontSize,
@@ -333,9 +331,8 @@ var Label = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, ref) {
     children: children
   }));
 });
-exports.Label = Label;
 Label.displayName = 'JVR.Label';
-var Type = function Type(props) {
+var Type = exports.Type = function Type(props) {
   var _typeMap$type2, _typeMap$type3;
   var type = props.type;
   var color = (_typeMap$type2 = typeMap[type]) === null || _typeMap$type2 === void 0 ? void 0 : _typeMap$type2.color;
@@ -352,5 +349,4 @@ var Type = function Type(props) {
     });
   }
 };
-exports.Type = Type;
 Type.displayName = 'JVR.Type';

package/esm/editor/countInfoExtra.js

@@ -6,7 +6,6 @@ import { DeleteIcon } from './icon/delete';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function CountInfoExtra(props) {
-  var _ref, _ref2;
   var {
     visible,
     showTools,
@@ -21,8 +20,8 @@ export function CountInfoExtra(props) {
     onDelete
   } = props;
   if (!visible || !showTools) return null;
-  var click = function click(_x) {
-    return (_ref = _ref || _asyncToGenerator(function* (event) {
+  var click = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* (event) {
       event.stopPropagation();
       var keyOrValue = 'AddKeyOrValue';
       var isArray = Array.isArray(value);
@@ -36,10 +35,13 @@ export function CountInfoExtra(props) {
           setValue(result);
         }
       }
-    })).apply(this, arguments);
-  };
-  var deleteHandle = function deleteHandle(_x2) {
-    return (_ref2 = _ref2 || _asyncToGenerator(function* (event) {
+    });
+    return function click(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* (event) {
       event.stopPropagation();
       if (onDelete && (keyName || typeof keyName === 'number') && parentValue) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -55,8 +57,11 @@ export function CountInfoExtra(props) {
           }
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function deleteHandle(_x2) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [editable && onAdd && /*#__PURE__*/_jsx(AddIcon, {
       onClick: click

package/esm/editor/objectKey.js

@@ -7,7 +7,6 @@ import { useHighlight } from '../semicolon';
 import { Label } from '../value';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var ObjectKey = props => {
-  var _ref;
   var {
       className,
       value,
@@ -43,8 +42,8 @@ export var ObjectKey = props => {
       (_$edit$current = $edit.current) == null || _$edit$current.focus();
     }
   };
-  var blur = function blur() {
-    return (_ref = _ref || _asyncToGenerator(function* () {
+  var blur = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(function* () {
       if ($edit.current) {
         var _$edit$current2;
         if (onEdit) {
@@ -66,8 +65,11 @@ export var ObjectKey = props => {
         (_$edit$current2 = $edit.current) == null || _$edit$current2.focus();
       }
       setEditable(false);
-    })).apply(this, arguments);
-  };
+    });
+    return function blur() {
+      return _ref.apply(this, arguments);
+    };
+  }();
   var focus = () => {
     if ($edit.current) {
       var _$edit$current3;

package/esm/editor/value.js

@@ -21,7 +21,7 @@ var Quotes = _ref => {
   });
 };
 export function ReValue(props) {
-  var _ref2, _typeMap$typeStr, _ref3;
+  var _typeMap$typeStr;
   var {
       type,
       value,
@@ -65,8 +65,8 @@ export function ReValue(props) {
       }
     }
   };
-  var blur = function blur() {
-    return (_ref2 = _ref2 || _asyncToGenerator(function* () {
+  var blur = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(function* () {
       if (!editableValue) return;
       setEditable(false);
       if ($edit.current) {
@@ -101,7 +101,7 @@ export function ReValue(props) {
           _typeStr = 'undefined';
         } else if (typeof text === 'string') {
           try {
-            if (text && text.length > 10 && !isNaN(Date.parse(text))) {
+            if (text && text.length > 19 && !isNaN(Date.parse(text))) {
               var dt = new Date(text);
               text = dt;
               _typeStr = 'date';
@@ -126,8 +126,11 @@ export function ReValue(props) {
           }
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function blur() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
   var defaultStyle = {
     minWidth: 34,
     minHeight: 18,
@@ -155,8 +158,8 @@ export function ReValue(props) {
   if (typeStr === 'null' || typeStr === 'undefined' || type.toLocaleLowerCase() === 'nan') {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
-  var deleteHandle = function deleteHandle(_x) {
-    return (_ref3 = _ref3 || _asyncToGenerator(function* (evn) {
+  var deleteHandle = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(function* (evn) {
       evn.stopPropagation();
       if (data && keyName && keyName in data && setValue && onDelete) {
         var maybeDelete = yield onDelete(keyName, value, parentValue, {
@@ -167,8 +170,11 @@ export function ReValue(props) {
           setValue(_extends({}, data));
         }
       }
-    })).apply(this, arguments);
-  };
+    });
+    return function deleteHandle(_x) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && typeView, /*#__PURE__*/_jsx(Quotes, {
       style: style,

package/esm/index.d.ts

@@ -33,7 +33,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: 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;
     /** Define the root node name. @default undefined */
     keyName?: string | number;

package/esm/node.js

@@ -46,7 +46,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       collapsed,
       level = 1,
       keyid = 'root',
@@ -108,11 +108,11 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
     transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
     transition: 'all 0.3s'
   };
-  var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
+  var arrowView = components.arrow ? ( /*#__PURE__*/cloneElement(components.arrow, {
     style: arrowStyle,
     'data-expand': expand,
     className: 'w-rjv-arrow'
-  }) : /*#__PURE__*/_jsx(TriangleArrow, {
+  })) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle,
     className: "w-rjv-arrow"
   });

package/esm/value.js

@@ -5,7 +5,7 @@ var _excluded = ["children", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
   _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "isSet", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
   _excluded5 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment, forwardRef, useMemo, useState } from 'react';
+import { Fragment, forwardRef, useMemo, useEffect, useState } from 'react';
 import { Meta } from './comps/meta';
 import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -134,10 +134,8 @@ var RenderShortenTextValue = _ref2 => {
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
-  var click = () => {
-    if (length && childrenStr.length <= length) return setShorten(false);
-    setShorten(!shorten);
-  };
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
+  var click = () => setShorten(!shorten);
   var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
   return /*#__PURE__*/_jsx(RenderStringValue, _extends({}, rest, {
     style: _extends({}, style, {

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.12.0",
+  "version": "1.12.2",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "homepage": "https://uiwjs.github.io/react-json-view",
+  "funding": "https://jaywcjlove.github.io/#/sponsor",
   "exports": {
     "./README.md": "./README.md",
     ".": {
@@ -93,6 +94,10 @@
     "cjs",
     "esm"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "keywords": [
     "array-viewer",
     "component",