@uiw/react-json-view 1.11.1 → 1.12.1

package/README.md

@@ -5,9 +5,9 @@ react-json-view
 [![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 +26,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
@@ -229,9 +231,11 @@ const customTheme = {
   '--w-rjv-type-boolean-color': '#559bd4',
   '--w-rjv-type-date-color': '#586e75',
   '--w-rjv-type-url-color': '#0969da',
-  '--w-rjv-type-null-color': '#d33682',
   '--w-rjv-type-nan-color': '#859900',
   '--w-rjv-type-undefined-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-set-color': '#268bd2',
+  '--w-rjv-type-map-color': '#268bd2',
 };
 
 export default function Demo() {
@@ -686,7 +690,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/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/objectKey.js

@@ -16,7 +16,6 @@ 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 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;

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) {
@@ -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/node.d.ts

@@ -7,6 +7,8 @@ export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: T;
+    isSet?: boolean;
+    isMap?: boolean;
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }

package/cjs/node.js

@@ -19,7 +19,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", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "isSet", "isMap", "onCopied", "onExpand", "parentValue", "setParentValue"];
 function getLength(obj) {
   try {
     return Object.keys(obj).length;
@@ -62,7 +62,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,
@@ -72,6 +72,10 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
     _props$namespace = props.namespace,
     namespace = _props$namespace === void 0 ? [] : _props$namespace,
+    _props$isSet = props.isSet,
+    isSet = _props$isSet === void 0 ? false : _props$isSet,
+    _props$isMap = props.isMap,
+    isMap = _props$isMap === void 0 ? false : _props$isMap,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
     parentValue = props.parentValue,
@@ -220,6 +224,10 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           parentName: keyName,
           color: typeof keyName === 'number' ? _value.typeMap['number'].color : ''
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Colon, {})]
+      }), isSet && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
+        type: "Set"
+      }), isMap && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Type, {
+        type: "Map"
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_meta.Meta, {
         start: true,
         isArray: isArray,
@@ -250,35 +258,40 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           key = _ref11[0],
           itemVal = _ref11[1];
         var item = itemVal;
-        var isEmpty = Array.isArray(item) && item.length === 0 || (0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
-        if (Array.isArray(item) && !isEmpty) {
+        var isMySet = item instanceof Set;
+        var isMyMap = item instanceof Map;
+        var myValue = isMySet ? Array.from(item) : isMyMap ? Object.fromEntries(item) : item;
+        var isEmpty = Array.isArray(myValue) && myValue.length === 0 || (0, _typeof2["default"])(myValue) === 'object' && myValue && !(myValue instanceof Date) && Object.keys(myValue).length === 0;
+        if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
-              value: item,
+              value: myValue,
+              isSet: isMySet,
+              isMap: isMyMap,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [label]),
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
-        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
+        if ((0, _typeof2["default"])(myValue) === 'object' && myValue && !(myValue instanceof Date) && !isEmpty) {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootNode, (0, _objectSpread2["default"])({
-              value: item,
+              value: myValue,
               namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
           }, key + '' + idx);
         }
-        if (typeof item === 'function') {
+        if (typeof myValue === 'function') {
           return;
         }
         var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
-          value: item,
+          value: myValue,
           "data-keys": keyid,
           quotes: quotes,
           namespace: [].concat((0, _toConsumableArray2["default"])(namespace), [key]),
@@ -288,7 +301,7 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           color: typeof key === 'number' ? _value.typeMap['number'].color : '',
           keyName: key
         });
-        var length = Array.isArray(item) ? item.length : getLength(item);
+        var length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
         countInfo = /*#__PURE__*/(0, _jsxRuntime.jsx)(CountInfo, {
           children: length
         });
@@ -306,7 +319,8 @@ var RootNode = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
           countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
-          value: item
+          isSet: isSet,
+          value: myValue
         }), idx);
       })
     }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {

package/cjs/value.d.ts

@@ -35,6 +35,14 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    Set: {
+        color: string;
+        label: string;
+    };
+    Map: {
+        color: string;
+        label: string;
+    };
     NaN: {
         color: string;
         label: string;
@@ -53,6 +61,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
+    isSet: boolean;
     indentWidth: number;
     level?: number;
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
@@ -64,7 +73,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     setValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function getValueString<T>(value: T): {
-    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/cjs/value.js

@@ -19,7 +19,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
   _excluded2 = ["children", "length", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
-  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _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) {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
@@ -63,6 +63,14 @@ var typeMap = {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
   },
+  Set: {
+    color: 'var(--w-rjv-type-set-color, #268bd2)',
+    label: 'Set'
+  },
+  Map: {
+    color: 'var(--w-rjv-type-map-color, #268bd2)',
+    label: 'Map'
+  },
   NaN: {
     color: 'var(--w-rjv-type-nan-color, #859900)',
     label: 'NaN'
@@ -145,10 +153,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() {
-    console.log(shorten);
-    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), {}, {
@@ -193,6 +202,7 @@ function ValueView(props) {
     data = props.data,
     keyName = props.keyName,
     indentWidth = props.indentWidth,
+    isSet = props.isSet,
     namespace = props.namespace,
     renderKey = props.renderKey,
     _props$components = props.components,

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) {
@@ -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.d.ts

@@ -7,6 +7,8 @@ export interface RootNodeProps<T extends object> extends JsonViewProps<T> {
     keyid?: string;
     level?: number;
     parentValue?: T;
+    isSet?: boolean;
+    isMap?: boolean;
     namespace?: Array<string | number>;
     setParentValue?: React.Dispatch<React.SetStateAction<T>>;
 }

package/esm/node.js

@@ -1,8 +1,8 @@
 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", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "onCopied", "onExpand", "parentValue", "setParentValue"];
+var _excluded = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "shortenTextAfterLength", "collapsed", "level", "keyid", "quotes", "namespace", "isSet", "isMap", "onCopied", "onExpand", "parentValue", "setParentValue"];
 import { Fragment, useId, cloneElement, useState, useEffect, forwardRef } from 'react';
-import { ValueView, Colon, Label, Line, typeMap } from './value';
+import { ValueView, Type, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { Semicolon } from './semicolon';
@@ -46,12 +46,14 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       highlightUpdates = true,
       objectSortKeys = false,
       indentWidth = 15,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       collapsed,
       level = 1,
       keyid = 'root',
       quotes = '"',
       namespace = [],
+      isSet = false,
+      isMap = false,
       onCopied,
       onExpand,
       parentValue,
@@ -181,6 +183,10 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           parentName: keyName,
           color: typeof keyName === 'number' ? typeMap['number'].color : ''
         }), /*#__PURE__*/_jsx(Colon, {})]
+      }), isSet && /*#__PURE__*/_jsx(Type, {
+        type: "Set"
+      }), isMap && /*#__PURE__*/_jsx(Type, {
+        type: "Map"
       }), /*#__PURE__*/_jsx(Meta, {
         start: true,
         isArray: isArray,
@@ -209,35 +215,40 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
       children: entries.length > 0 && [...entries].map((_ref6, idx) => {
         var [key, itemVal] = _ref6;
         var item = itemVal;
-        var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
-        if (Array.isArray(item) && !isEmpty) {
+        var isMySet = item instanceof Set;
+        var isMyMap = item instanceof Map;
+        var myValue = isMySet ? Array.from(item) : isMyMap ? Object.fromEntries(item) : item;
+        var isEmpty = Array.isArray(myValue) && myValue.length === 0 || typeof myValue === 'object' && myValue && !(myValue instanceof Date) && Object.keys(myValue).length === 0;
+        if ((Array.isArray(myValue) || isMySet || isMyMap) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: item,
+              value: myValue,
+              isSet: isMySet,
+              isMap: isMyMap,
               namespace: [...namespace, label],
               keyName: label,
               keyid: keyid + subkeyid + label
             }, subNodeProps))
           }, label + idx);
         }
-        if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
+        if (typeof myValue === 'object' && myValue && !(myValue instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
             className: "w-rjv-wrap",
             children: /*#__PURE__*/_jsx(RootNode, _extends({
-              value: item,
+              value: myValue,
               namespace: [...namespace, key],
               keyName: key,
               keyid: keyid + subkeyid + key
             }, subNodeProps))
           }, key + '' + idx);
         }
-        if (typeof item === 'function') {
+        if (typeof myValue === 'function') {
           return;
         }
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
+          value: myValue,
           "data-keys": keyid,
           quotes: quotes,
           namespace: [...namespace, key],
@@ -247,7 +258,7 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           color: typeof key === 'number' ? typeMap['number'].color : '',
           keyName: key
         });
-        var length = Array.isArray(item) ? item.length : getLength(item);
+        var length = Array.isArray(myValue) ? myValue.length : getLength(myValue);
         countInfo = /*#__PURE__*/_jsx(CountInfo, {
           children: length
         });
@@ -265,7 +276,8 @@ export var RootNode = /*#__PURE__*/forwardRef((props, ref) => {
           countInfo: countInfo,
           renderKey: renderKey,
           keyName: key,
-          value: item
+          isSet: isSet,
+          value: myValue
         }), idx);
       })
     }), expand && /*#__PURE__*/_jsx(Line, {

package/esm/value.d.ts

@@ -35,6 +35,14 @@ export declare const typeMap: {
         color: string;
         label: string;
     };
+    Set: {
+        color: string;
+        label: string;
+    };
+    Map: {
+        color: string;
+        label: string;
+    };
     NaN: {
         color: string;
         label: string;
@@ -53,6 +61,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     displayDataTypes: boolean;
     displayObjectSize: boolean;
     enableClipboard: boolean;
+    isSet: boolean;
     indentWidth: number;
     level?: number;
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
@@ -64,7 +73,7 @@ export interface ValueViewProps<T extends object> extends React.DetailedHTMLProp
     setValue?: React.Dispatch<React.SetStateAction<T>>;
 }
 export declare function getValueString<T>(value: T): {
-    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "NaN";
+    type: "string" | "number" | "bigint" | "boolean" | "undefined" | "date" | "url" | "float" | "null" | "Set" | "Map" | "NaN";
     content: string;
 };
 export declare function ValueView<T extends object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;

package/esm/value.js

@@ -3,9 +3,9 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
   _excluded2 = ["children", "length", "style"],
   _excluded3 = ["color", "style", "isURL", "href", "children"],
-  _excluded4 = ["value", "parentValue", "setValue", "countInfo", "data", "keyName", "indentWidth", "namespace", "renderKey", "components", "quotes", "level", "enableClipboard", "displayObjectSize", "displayDataTypes", "shortenTextAfterLength"],
+  _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";
@@ -46,6 +46,14 @@ export var typeMap = {
     color: 'var(--w-rjv-type-null-color, #d33682)',
     label: 'null'
   },
+  Set: {
+    color: 'var(--w-rjv-type-set-color, #268bd2)',
+    label: 'Set'
+  },
+  Map: {
+    color: 'var(--w-rjv-type-map-color, #268bd2)',
+    label: 'Map'
+  },
   NaN: {
     color: 'var(--w-rjv-type-nan-color, #859900)',
     label: 'NaN'
@@ -126,11 +134,8 @@ var RenderShortenTextValue = _ref2 => {
     rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
-  var click = () => {
-    console.log(shorten);
-    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,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.11.1",
+  "version": "1.12.1",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
@@ -93,6 +93,10 @@
     "cjs",
     "esm"
   ],
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
   "keywords": [
     "array-viewer",
     "component",