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

package/README.md

@@ -19,20 +19,19 @@ A React component for displaying and editing javascript arrays and JSON objects.
 
 ## Features
 
-📚 Use Typescript to write, better code hints.  
-🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
-🌒 Support dark/light mode  
-📦 Zero dependencies  
-📋 Copy to Clipboard  
-✏️ Support editing and adding features  
-♻️ Whether to highlight updates.
+🚀 **Improved with TypeScript** – Better code hints for a smoother development experience.  
+🎨 **Customizable Themes** – Supports theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme).  
+🌒 **Dark/Light Mode** – Seamless switching between themes.  
+📦 **Zero Dependencies** – Lightweight and efficient.  
+📋 **Clipboard Support** – Easily copy JSON data.  
+✏️ **Editable & Extendable** – Supports editing and adding new properties.  
+♻️ **Update Highlighting** – Option to highlight changes.  
 
-The new version [**v2**](https://uiwjs.github.io/react-json-view/) 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. Preview [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/). 
-
-- [x] Complete all features of displaying JSON in v1.
-- [ ] Add editing functionality to v2.
-- [x] Add test cases to v2.
+The latest version [**v2**](https://uiwjs.github.io/react-json-view/) features a redesigned API for better maintainability, a more flexible component customization system, and fully customizable rendering, making it more aligned with React’s component model. 📖 Check out the [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/).  
 
+- [x] Fully implemented all v1 JSON display features.  
+- [ ] Adding editing functionality to v2.  
+- [x] Added comprehensive test cases for v2.  
 
 ## Quick Start
 
@@ -888,6 +887,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
   highlightUpdates?: boolean;
   /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
   shortenTextAfterLength?: number;
+  /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+  stringEllipsis?: number;
   /** Callback function for when a treeNode is expanded or collapsed */
   onExpand?: (props: { expand: boolean; value?: T; keyid: string; keyName?: string | number }) => void;
   /** Fires event when you copy */

package/cjs/comps/Copied.js

@@ -12,7 +12,7 @@ var _react = require("react");
 var _store = require("../store");
 var _Section = require("../store/Section");
 var _ShowTools = require("../store/ShowTools");
-var _types = require("../types");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys"],
   _excluded2 = ["as", "render"];

package/cjs/comps/KeyValues.js

@@ -18,7 +18,7 @@ var _Value = require("./Value");
 var _KeyName = require("../section/KeyName");
 var _Row = require("../section/Row");
 var _Container = require("../Container");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _useHighlight = require("../utils/useHighlight");
 var _Copied = require("../comps/Copied");
 var _useIdCompat = require("../comps/useIdCompat");
@@ -80,9 +80,9 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
     className: "w-rjv-wrap",
     style: style,
     children: entries.map(function (_ref9, idx) {
-      var _ref10 = (0, _slicedToArray2["default"])(_ref9, 2),
-        key = _ref10[0],
-        val = _ref10[1];
+      var _ref0 = (0, _slicedToArray2["default"])(_ref9, 2),
+        key = _ref0[0],
+        val = _ref0[1];
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyValuesItem, {
         parentValue: value,
         keyName: key,

package/cjs/comps/NestedClose.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NestedClose = void 0;
 var _store = require("../store");
 var _Expands = require("../store/Expands");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _jsxRuntime = require("react/jsx-runtime");
 var NestedClose = exports.NestedClose = function NestedClose(props) {
   var _expands$expandKey;

package/cjs/comps/NestedOpen.js

@@ -14,9 +14,9 @@ var _store = require("../store");
 var _Copied = require("./Copied");
 var _CountInfoExtra = require("../section/CountInfoExtra");
 var _CountInfo = require("../section/CountInfo");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _Ellipsis = require("../section/Ellipsis");
-var _types = require("../types");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
 var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   var _expands$expandKey;

package/cjs/comps/Value.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFloat = exports.Value = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _types = require("../types");
+var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
 var isFloat = exports.isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);

package/cjs/index.d.ts

@@ -30,7 +30,7 @@ export * from './store/Expands';
 export * from './store/ShowTools';
 export * from './store/Symbols';
 export * from './store/Types';
-export * from './symbol';
+export * from './symbol/';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -58,6 +58,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
+    /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+    stringEllipsis?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;

package/cjs/index.js

@@ -98,7 +98,7 @@ Object.keys(_Types).forEach(function (key) {
     }
   });
 });
-var _symbol = require("./symbol");
+var _symbol = require("./symbol/");
 Object.keys(_symbol).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -125,6 +125,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
     _props$shortenTextAft = props.shortenTextAfterLength,
     shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
+    stringEllipsis = props.stringEllipsis,
     _props$highlightUpdat = props.highlightUpdates,
     highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
     _props$enableClipboar = props.enableClipboard,
@@ -154,6 +155,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       collapsed: collapsed,
       enableClipboard: enableClipboard,
       shortenTextAfterLength: shortenTextAfterLength,
+      stringEllipsis: stringEllipsis,
       highlightUpdates: highlightUpdates,
       onCopied: onCopied,
       onExpand: onExpand

package/cjs/store.d.ts

@@ -9,6 +9,7 @@ export interface InitialState<T extends object> {
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];

package/cjs/types/index.js

@@ -11,7 +11,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = require("react");
 var _store = require("../store");
 var _Types = require("../store/Types");
-var _symbol = require("../symbol");
+var _symbol = require("../symbol/");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["as", "render"],
   _excluded2 = ["as", "render"],
@@ -22,10 +22,10 @@ var _excluded = ["as", "render"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"],
+  _excluded0 = ["as", "render"],
+  _excluded1 = ["as", "render"],
   _excluded10 = ["as", "render"],
-  _excluded11 = ["as", "render"],
-  _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"];
+  _excluded11 = ["as", "render"];
 var bigIntToString = exports.bigIntToString = function bigIntToString(bi) {
   if (bi === undefined) {
     return '0n';
@@ -98,7 +98,9 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
     displayDataTypes = _useTypesStore3.displayDataTypes;
   var _useStore = (0, _store.useStore)(),
     _useStore$shortenText = _useStore.shortenTextAfterLength,
-    length = _useStore$shortenText === void 0 ? 30 : _useStore$shortenText;
+    length = _useStore$shortenText === void 0 ? 30 : _useStore$shortenText,
+    _useStore$stringEllip = _useStore.stringEllipsis,
+    stringEllipsis = _useStore$stringEllip === void 0 ? '...' : _useStore$stringEllip;
   var as = Str.as,
     render = Str.render,
     reset = (0, _objectWithoutProperties2["default"])(Str, _excluded3);
@@ -122,7 +124,7 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
       };
     }
   }
-  var text = shorten ? "".concat(childrenStr.slice(0, length), "...") : childrenStr;
+  var text = shorten ? "".concat(childrenStr.slice(0, length)).concat(stringEllipsis) : childrenStr;
   var isRender = render && typeof render === 'function';
   var type = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     style: style
@@ -131,9 +133,10 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
     value: children,
     keyName: keyName
   });
+  var cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     children: text,
-    className: 'w-rjv-value'
+    className: cls
   }), {
     type: 'value',
     value: children,
@@ -144,7 +147,7 @@ var TypeString = exports.TypeString = function TypeString(_ref3) {
       style: style
     }))), child || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-        className: "w-rjv-value",
+        className: cls,
         children: text
       })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {})]
     })]
@@ -382,16 +385,16 @@ var TypeUrl = exports.TypeUrl = function TypeUrl(_ref9) {
   });
 };
 TypeUrl.displayName = 'JVR.TypeUrl';
-var TypeDate = exports.TypeDate = function TypeDate(_ref10) {
-  var children = _ref10.children,
-    keyName = _ref10.keyName;
-  var _useTypesStore10 = (0, _Types.useTypesStore)(),
-    _useTypesStore10$Date = _useTypesStore10.Date,
-    CompData = _useTypesStore10$Date === void 0 ? {} : _useTypesStore10$Date,
-    displayDataTypes = _useTypesStore10.displayDataTypes;
+var TypeDate = exports.TypeDate = function TypeDate(_ref0) {
+  var children = _ref0.children,
+    keyName = _ref0.keyName;
+  var _useTypesStore0 = (0, _Types.useTypesStore)(),
+    _useTypesStore0$Date = _useTypesStore0.Date,
+    CompData = _useTypesStore0$Date === void 0 ? {} : _useTypesStore0$Date,
+    displayDataTypes = _useTypesStore0.displayDataTypes;
   var as = CompData.as,
     render = CompData.render,
-    reset = (0, _objectWithoutProperties2["default"])(CompData, _excluded10);
+    reset = (0, _objectWithoutProperties2["default"])(CompData, _excluded0);
   var Comp = as || 'span';
   var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), CompData.style || {});
   var isRender = render && typeof render === 'function';
@@ -421,16 +424,16 @@ var TypeDate = exports.TypeDate = function TypeDate(_ref10) {
   });
 };
 TypeDate.displayName = 'JVR.TypeDate';
-var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref11) {
-  var children = _ref11.children,
-    keyName = _ref11.keyName;
-  var _useTypesStore11 = (0, _Types.useTypesStore)(),
-    _useTypesStore11$Unde = _useTypesStore11.Undefined,
-    Undefined = _useTypesStore11$Unde === void 0 ? {} : _useTypesStore11$Unde,
-    displayDataTypes = _useTypesStore11.displayDataTypes;
+var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref1) {
+  var children = _ref1.children,
+    keyName = _ref1.keyName;
+  var _useTypesStore1 = (0, _Types.useTypesStore)(),
+    _useTypesStore1$Undef = _useTypesStore1.Undefined,
+    Undefined = _useTypesStore1$Undef === void 0 ? {} : _useTypesStore1$Undef,
+    displayDataTypes = _useTypesStore1.displayDataTypes;
   var as = Undefined.as,
     render = Undefined.render,
-    reset = (0, _objectWithoutProperties2["default"])(Undefined, _excluded11);
+    reset = (0, _objectWithoutProperties2["default"])(Undefined, _excluded1);
   var Comp = as || 'span';
   var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), Undefined.style || {});
   var isRender = render && typeof render === 'function';
@@ -456,16 +459,16 @@ var TypeUndefined = exports.TypeUndefined = function TypeUndefined(_ref11) {
   });
 };
 TypeUndefined.displayName = 'JVR.TypeUndefined';
-var TypeNull = exports.TypeNull = function TypeNull(_ref12) {
-  var children = _ref12.children,
-    keyName = _ref12.keyName;
-  var _useTypesStore12 = (0, _Types.useTypesStore)(),
-    _useTypesStore12$Null = _useTypesStore12.Null,
-    Null = _useTypesStore12$Null === void 0 ? {} : _useTypesStore12$Null,
-    displayDataTypes = _useTypesStore12.displayDataTypes;
+var TypeNull = exports.TypeNull = function TypeNull(_ref10) {
+  var children = _ref10.children,
+    keyName = _ref10.keyName;
+  var _useTypesStore10 = (0, _Types.useTypesStore)(),
+    _useTypesStore10$Null = _useTypesStore10.Null,
+    Null = _useTypesStore10$Null === void 0 ? {} : _useTypesStore10$Null,
+    displayDataTypes = _useTypesStore10.displayDataTypes;
   var as = Null.as,
     render = Null.render,
-    reset = (0, _objectWithoutProperties2["default"])(Null, _excluded12);
+    reset = (0, _objectWithoutProperties2["default"])(Null, _excluded10);
   var Comp = as || 'span';
   var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), Null.style || {});
   var isRender = render && typeof render === 'function';
@@ -491,16 +494,16 @@ var TypeNull = exports.TypeNull = function TypeNull(_ref12) {
   });
 };
 TypeNull.displayName = 'JVR.TypeNull';
-var TypeNan = exports.TypeNan = function TypeNan(_ref13) {
-  var children = _ref13.children,
-    keyName = _ref13.keyName;
-  var _useTypesStore13 = (0, _Types.useTypesStore)(),
-    _useTypesStore13$Nan = _useTypesStore13.Nan,
-    Nan = _useTypesStore13$Nan === void 0 ? {} : _useTypesStore13$Nan,
-    displayDataTypes = _useTypesStore13.displayDataTypes;
+var TypeNan = exports.TypeNan = function TypeNan(_ref11) {
+  var children = _ref11.children,
+    keyName = _ref11.keyName;
+  var _useTypesStore11 = (0, _Types.useTypesStore)(),
+    _useTypesStore11$Nan = _useTypesStore11.Nan,
+    Nan = _useTypesStore11$Nan === void 0 ? {} : _useTypesStore11$Nan,
+    displayDataTypes = _useTypesStore11.displayDataTypes;
   var as = Nan.as,
     render = Nan.render,
-    reset = (0, _objectWithoutProperties2["default"])(Nan, _excluded13);
+    reset = (0, _objectWithoutProperties2["default"])(Nan, _excluded11);
   var Comp = as || 'span';
   var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), Nan.style || {});
   var isRender = render && typeof render === 'function';

package/esm/Container.js

@@ -2,11 +2,11 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
 import React, { forwardRef } from 'react';
-import { NestedClose } from './comps/NestedClose';
-import { NestedOpen } from './comps/NestedOpen';
-import { KeyValues } from './comps/KeyValues';
-import { useIdCompat } from './comps/useIdCompat';
-import { useShowToolsDispatch } from './store/ShowTools';
+import { NestedClose } from "./comps/NestedClose.js";
+import { NestedOpen } from "./comps/NestedOpen.js";
+import { KeyValues } from "./comps/KeyValues.js";
+import { useIdCompat } from "./comps/useIdCompat.js";
+import { useShowToolsDispatch } from "./store/ShowTools.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var Container = /*#__PURE__*/forwardRef((props, ref) => {
   var {

package/esm/comps/Copied.js

@@ -3,10 +3,10 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys"],
   _excluded2 = ["as", "render"];
 import { useState } from 'react';
-import { useStore } from '../store';
-import { useSectionStore } from '../store/Section';
-import { useShowToolsStore } from '../store/ShowTools';
-import { bigIntToString } from '../types';
+import { useStore } from "../store.js";
+import { useSectionStore } from "../store/Section.js";
+import { useShowToolsStore } from "../store/ShowTools.js";
+import { bigIntToString } from "../types/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Copied = props => {
   var {

package/esm/comps/KeyValues.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { Fragment, useRef } from 'react';
-import { useStore } from '../store';
-import { useExpandsStore } from '../store/Expands';
-import { useShowToolsDispatch } from '../store/ShowTools';
-import { Value } from './Value';
-import { KeyNameComp } from '../section/KeyName';
-import { RowComp } from '../section/Row';
-import { Container } from '../Container';
-import { Quote, Colon } from '../symbol';
-import { useHighlight } from '../utils/useHighlight';
-import { Copied } from '../comps/Copied';
-import { useIdCompat } from '../comps/useIdCompat';
+import { useStore } from "../store.js";
+import { useExpandsStore } from "../store/Expands.js";
+import { useShowToolsDispatch } from "../store/ShowTools.js";
+import { Value } from "./Value.js";
+import { KeyNameComp } from "../section/KeyName.js";
+import { RowComp } from "../section/Row.js";
+import { Container } from "../Container.js";
+import { Quote, Colon } from "../symbol/index.js";
+import { useHighlight } from "../utils/useHighlight.js";
+import { Copied } from "../comps/Copied.js";
+import { useIdCompat } from "../comps/useIdCompat.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var KeyValues = props => {
   var _expands$expandKey;

package/esm/comps/NestedClose.js

@@ -1,6 +1,6 @@
-import { useStore } from '../store';
-import { useExpandsStore } from '../store/Expands';
-import { BracketsClose } from '../symbol';
+import { useStore } from "../store.js";
+import { useExpandsStore } from "../store/Expands.js";
+import { BracketsClose } from "../symbol/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var NestedClose = props => {
   var _expands$expandKey;

package/esm/comps/NestedOpen.js

@@ -1,13 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { KayName } from './KeyValues';
-import { useExpandsStore, useExpandsDispatch } from '../store/Expands';
-import { useStore } from '../store';
-import { Copied } from './Copied';
-import { CountInfoExtraComps } from '../section/CountInfoExtra';
-import { CountInfoComp } from '../section/CountInfo';
-import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
-import { EllipsisComp } from '../section/Ellipsis';
-import { SetComp, MapComp } from '../types';
+import { KayName } from "./KeyValues.js";
+import { useExpandsStore, useExpandsDispatch } from "../store/Expands.js";
+import { useStore } from "../store.js";
+import { Copied } from "./Copied.js";
+import { CountInfoExtraComps } from "../section/CountInfoExtra.js";
+import { CountInfoComp } from "../section/CountInfo.js";
+import { Arrow, BracketsOpen, BracketsClose } from "../symbol/index.js";
+import { EllipsisComp } from "../section/Ellipsis.js";
+import { SetComp, MapComp } from "../types/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var NestedOpen = props => {
   var _expands$expandKey;

package/esm/comps/Value.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from '../types';
+import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from "../types/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var Value = props => {

package/esm/editor/KeyName.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["children"],
   _excluded2 = ["value", "parentValue", "keyName"];
 import { useRef, useState } from 'react';
-import { useStore } from './store';
+import { useStore } from "./store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyNameRender = (_ref, _ref2) => {
   var {

package/esm/editor/index.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["children", "onEdit", "editable"];
 import { forwardRef } from 'react';
-import JsonView from '../';
-import { KeyNameRender } from './KeyName';
-import { Context, Dispatch, useStoreReducer } from './store';
+import JsonView from "../index.js";
+import { KeyNameRender } from "./KeyName.js";
+import { Context, Dispatch, useStoreReducer } from "./store.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
   var {

package/esm/index.d.ts

@@ -30,7 +30,7 @@ export * from './store/Expands';
 export * from './store/ShowTools';
 export * from './store/Symbols';
 export * from './store/Types';
-export * from './symbol';
+export * from './symbol/';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -58,6 +58,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     highlightUpdates?: boolean;
     /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
+    /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+    stringEllipsis?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;

package/esm/index.js

@@ -1,43 +1,43 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
 import { forwardRef } from 'react';
-import { Provider } from './store';
-import { Container } from './Container';
-import { BraceLeft } from './symbol/BraceLeft';
-import { BraceRight } from './symbol/BraceRight';
-import { BracketsLeft } from './symbol/BracketsLeft';
-import { BracketsRight } from './symbol/BracketsRight';
-import { Arrow } from './symbol/Arrow';
-import { Colon } from './symbol/Colon';
-import { Quote } from './symbol/Quote';
-import { ValueQuote } from './symbol/ValueQuote';
-import { Bigint } from './types/Bigint';
-import { Date } from './types/Date';
-import { False } from './types/False';
-import { Float } from './types/Float';
-import { Int } from './types/Int';
-import { Map } from './types/Map';
-import { Nan } from './types/Nan';
-import { Null } from './types/Null';
-import { Set } from './types/Set';
-import { StringText } from './types/String';
-import { True } from './types/True';
-import { Undefined } from './types/Undefined';
-import { Url } from './types/Url';
-import { Copied } from './section/Copied';
-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';
+import { Provider } from "./store.js";
+import { Container } from "./Container.js";
+import { BraceLeft } from "./symbol/BraceLeft.js";
+import { BraceRight } from "./symbol/BraceRight.js";
+import { BracketsLeft } from "./symbol/BracketsLeft.js";
+import { BracketsRight } from "./symbol/BracketsRight.js";
+import { Arrow } from "./symbol/Arrow.js";
+import { Colon } from "./symbol/Colon.js";
+import { Quote } from "./symbol/Quote.js";
+import { ValueQuote } from "./symbol/ValueQuote.js";
+import { Bigint } from "./types/Bigint.js";
+import { Date } from "./types/Date.js";
+import { False } from "./types/False.js";
+import { Float } from "./types/Float.js";
+import { Int } from "./types/Int.js";
+import { Map } from "./types/Map.js";
+import { Nan } from "./types/Nan.js";
+import { Null } from "./types/Null.js";
+import { Set } from "./types/Set.js";
+import { StringText } from "./types/String.js";
+import { True } from "./types/True.js";
+import { Undefined } from "./types/Undefined.js";
+import { Url } from "./types/Url.js";
+import { Copied } from "./section/Copied.js";
+import { CountInfo } from "./section/CountInfo.js";
+import { CountInfoExtra } from "./section/CountInfoExtra.js";
+import { Ellipsis } from "./section/Ellipsis.js";
+import { KeyName } from "./section/KeyName.js";
+import { Row } from "./section/Row.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export * from './store';
-export * from './store/Expands';
-export * from './store/ShowTools';
-export * from './store/Symbols';
-export * from './store/Types';
-export * from './symbol';
+export * from "./store.js";
+export * from "./store/Expands.js";
+export * from "./store/ShowTools.js";
+export * from "./store/Symbols.js";
+export * from "./store/Types.js";
+export * from "./symbol/index.js";
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       className = '',
@@ -49,6 +49,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       indentWidth = 15,
       displayObjectSize = true,
       shortenTextAfterLength = 30,
+      stringEllipsis,
       highlightUpdates = true,
       enableClipboard = true,
       displayDataTypes = true,
@@ -75,6 +76,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       collapsed,
       enableClipboard,
       shortenTextAfterLength,
+      stringEllipsis,
       highlightUpdates,
       onCopied,
       onExpand

package/esm/section/Copied.js

@@ -1,5 +1,5 @@
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 export var Copied = props => {
   var {
     Copied: Comp = {}

package/esm/section/CountInfo.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["value", "keyName"],
   _excluded2 = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
-import { useStore } from '../store';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
+import { useStore } from "../store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfo = props => {
   var {

package/esm/section/CountInfoExtra.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["value", "keyName"],
   _excluded2 = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfoExtra = props => {
   var {

package/esm/section/Ellipsis.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = props => {
   var {

package/esm/section/KeyName.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyName = props => {
   var {

package/esm/section/Row.js

@@ -2,8 +2,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render", "children"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Row = props => {
   var {

package/esm/store/Symbols.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { createContext, useContext, useReducer } from 'react';
-import { TriangleArrow } from '../arrow/TriangleArrow';
+import { TriangleArrow } from "../arrow/TriangleArrow.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var initialState = {
   Arrow: {

package/esm/store.d.ts

@@ -9,6 +9,7 @@ export interface InitialState<T extends object> {
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];

package/esm/store.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useEffect, useReducer } from 'react';
-import { useShowTools, ShowTools } from './store/ShowTools';
-import { useExpands, Expands } from './store/Expands';
-import { useTypes, Types } from './store/Types';
-import { useSymbols, Symbols } from './store/Symbols';
-import { useSection, Section } from './store/Section';
+import { useShowTools, ShowTools } from "./store/ShowTools.js";
+import { useExpands, Expands } from "./store/Expands.js";
+import { useTypes, Types } from "./store/Types.js";
+import { useSymbols, Symbols } from "./store/Symbols.js";
+import { useSection, Section } from "./store/Section.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var initialState = {
   objectSortKeys: false,

package/esm/symbol/Arrow.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Arrow = props => {
   var {
     Arrow: Comp = {}

package/esm/symbol/BraceLeft.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BraceLeft = props => {
   var {
     BraceLeft: Comp = {}

package/esm/symbol/BraceRight.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BraceRight = props => {
   var {
     BraceRight: Comp = {}

package/esm/symbol/BracketsLeft.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BracketsLeft = props => {
   var {
     BracketsLeft: Comp = {}

package/esm/symbol/BracketsRight.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BracketsRight = props => {
   var {
     BracketsRight: Comp = {}

package/esm/symbol/Colon.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Colon = props => {
   var {
     Colon: Comp = {}

package/esm/symbol/Quote.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Quote = props => {
   var {
     Quote: Comp = {}

package/esm/symbol/ValueQuote.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var ValueQuote = props => {
   var {
     ValueQuote: Comp = {}

package/esm/symbol/index.js

@@ -10,8 +10,8 @@ var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"];
-import { useSymbolsStore } from '../store/Symbols';
-import { useExpandsStore } from '../store/Expands';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useExpandsStore } from "../store/Expands.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Quote = props => {
   var {

package/esm/types/Bigint.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Bigint = props => {
   var {
     Bigint: Comp = {}

package/esm/types/Date.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Date = props => {
   var {
     Date: Comp = {}

package/esm/types/False.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var False = props => {
   var {
     False: Comp = {}

package/esm/types/Float.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Float = props => {
   var {
     Float: Comp = {}

package/esm/types/Int.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Int = props => {
   var {
     Int: Comp = {}

package/esm/types/Map.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Map = props => {
   var {
     Map: Comp = {}

package/esm/types/Nan.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Nan = props => {
   var {
     Nan: Comp = {}

package/esm/types/Null.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Null = props => {
   var {
     Null: Comp = {}

package/esm/types/Set.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Set = props => {
   var {
     Set: Comp = {}

package/esm/types/String.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var StringText = props => {
   var {
     Str: Comp = {}

package/esm/types/True.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var True = props => {
   var {
     True: Comp = {}

package/esm/types/Undefined.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Undefined = props => {
   var {
     Undefined: Comp = {}

package/esm/types/Url.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Url = props => {
   var {
     Url: Comp = {}

package/esm/types/index.js

@@ -9,14 +9,14 @@ var _excluded = ["as", "render"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"],
+  _excluded0 = ["as", "render"],
+  _excluded1 = ["as", "render"],
   _excluded10 = ["as", "render"],
-  _excluded11 = ["as", "render"],
-  _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"];
+  _excluded11 = ["as", "render"];
 import { Fragment, useEffect, useState } from 'react';
-import { useStore } from '../store';
-import { useTypesStore } from '../store/Types';
-import { ValueQuote } from '../symbol';
+import { useStore } from "../store.js";
+import { useTypesStore } from "../store/Types.js";
+import { ValueQuote } from "../symbol/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var bigIntToString = bi => {
   if (bi === undefined) {
@@ -98,7 +98,8 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 30
+    shortenTextAfterLength: length = 30,
+    stringEllipsis = '...'
   } = useStore();
   var {
       as,
@@ -120,7 +121,7 @@ export var TypeString = _ref3 => {
       };
     }
   }
-  var text = shorten ? childrenStr.slice(0, length) + "..." : childrenStr;
+  var text = shorten ? "" + childrenStr.slice(0, length) + stringEllipsis : childrenStr;
   var isRender = render && typeof render === 'function';
   var type = isRender && render(_extends({}, reset, {
     style
@@ -129,9 +130,10 @@ export var TypeString = _ref3 => {
     value: children,
     keyName
   });
+  var cls = shorten ? 'w-rjv-value w-rjv-value-short' : 'w-rjv-value';
   var child = isRender && render(_extends({}, reset, {
     children: text,
-    className: 'w-rjv-value'
+    className: cls
   }), {
     type: 'value',
     value: children,
@@ -142,7 +144,7 @@ export var TypeString = _ref3 => {
       style: style
     }))), child || /*#__PURE__*/_jsxs(Fragment, {
       children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
-        className: "w-rjv-value",
+        className: cls,
         children: text
       })), /*#__PURE__*/_jsx(ValueQuote, {})]
     })]
@@ -404,11 +406,11 @@ export var TypeUrl = _ref9 => {
   });
 };
 TypeUrl.displayName = 'JVR.TypeUrl';
-export var TypeDate = _ref10 => {
+export var TypeDate = _ref0 => {
   var {
     children,
     keyName
-  } = _ref10;
+  } = _ref0;
   var {
     Date: CompData = {},
     displayDataTypes
@@ -417,7 +419,7 @@ export var TypeDate = _ref10 => {
       as,
       render
     } = CompData,
-    reset = _objectWithoutPropertiesLoose(CompData, _excluded10);
+    reset = _objectWithoutPropertiesLoose(CompData, _excluded0);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, CompData.style || {});
   var isRender = render && typeof render === 'function';
@@ -447,11 +449,11 @@ export var TypeDate = _ref10 => {
   });
 };
 TypeDate.displayName = 'JVR.TypeDate';
-export var TypeUndefined = _ref11 => {
+export var TypeUndefined = _ref1 => {
   var {
     children,
     keyName
-  } = _ref11;
+  } = _ref1;
   var {
     Undefined = {},
     displayDataTypes
@@ -460,7 +462,7 @@ export var TypeUndefined = _ref11 => {
       as,
       render
     } = Undefined,
-    reset = _objectWithoutPropertiesLoose(Undefined, _excluded11);
+    reset = _objectWithoutPropertiesLoose(Undefined, _excluded1);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Undefined.style || {});
   var isRender = render && typeof render === 'function';
@@ -486,11 +488,11 @@ export var TypeUndefined = _ref11 => {
   });
 };
 TypeUndefined.displayName = 'JVR.TypeUndefined';
-export var TypeNull = _ref12 => {
+export var TypeNull = _ref10 => {
   var {
     children,
     keyName
-  } = _ref12;
+  } = _ref10;
   var {
     Null = {},
     displayDataTypes
@@ -499,7 +501,7 @@ export var TypeNull = _ref12 => {
       as,
       render
     } = Null,
-    reset = _objectWithoutPropertiesLoose(Null, _excluded12);
+    reset = _objectWithoutPropertiesLoose(Null, _excluded10);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Null.style || {});
   var isRender = render && typeof render === 'function';
@@ -525,11 +527,11 @@ export var TypeNull = _ref12 => {
   });
 };
 TypeNull.displayName = 'JVR.TypeNull';
-export var TypeNan = _ref13 => {
+export var TypeNan = _ref11 => {
   var {
     children,
     keyName
-  } = _ref13;
+  } = _ref11;
   var {
     Nan = {},
     displayDataTypes
@@ -538,7 +540,7 @@ export var TypeNan = _ref13 => {
       as,
       render
     } = Nan,
-    reset = _objectWithoutPropertiesLoose(Nan, _excluded13);
+    reset = _objectWithoutPropertiesLoose(Nan, _excluded11);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Nan.style || {});
   var isRender = render && typeof render === 'function';

package/esm/utils/useRender.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { useEffect } from 'react';
-import { useSymbolsDispatch } from '../store/Symbols';
-import { useTypesDispatch } from '../store/Types';
-import { useSectionDispatch } from '../store/Section';
+import { useSymbolsDispatch } from "../store/Symbols.js";
+import { useTypesDispatch } from "../store/Types.js";
+import { useSectionDispatch } from "../store/Section.js";
 export function useSymbolsRender(currentProps, props, key) {
   var dispatch = useSymbolsDispatch();
   var cls = [currentProps.className, props.className].filter(Boolean).join(' ');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.30",
+  "version": "2.0.0-alpha.32",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",