@uiw/react-json-view 1.3.0 → 1.4.0

package/README.md

@@ -487,6 +487,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
   enableClipboard?: boolean;
   /** Whether to highlight updates. @default true */
   highlightUpdates?: boolean;
+  /** Whether sort keys through `String.prototype.localeCompare()` @default false */
+  objectSortKeys?: boolean | ((a: string, b: string) => number);
   /** Display for quotes in object-key @default " */
   quotes?: "'" | '"' | '';
   /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
@@ -498,6 +500,8 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     keyid: string;
     keyName?: string | number;
   }) => void;
+  /** Fires event when you copy */
+  onCopied?: CopiedProps<T>['onCopied'];
   /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];
@@ -505,6 +509,7 @@ export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttr
     arrow?: JSX.Element;
     objectKey?: SemicolonProps['render'];
     value?: ValueViewProps<T>['renderValue'];
+    copied?: CopiedProps<T>['render'];
   };
 }
 declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/cjs/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { MetaProps, SemicolonProps, EllipsisProps } from './node';
+import { MetaProps, EllipsisProps } from './node';
+import { SemicolonProps } from './semicolon';
 import { ValueViewProps } from './value';
 import { CopiedProps } from './copied';
 export * from './node';
@@ -19,6 +20,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
+    /** Whether sort keys through `String.prototype.localeCompare()` @default false */
+    objectSortKeys?: boolean | ((a: string, b: string) => number);
     /** Display for quotes in object-key @default " */
     quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

package/cjs/node.d.ts

@@ -6,20 +6,11 @@ export interface MetaProps extends LabelProps {
     start?: boolean;
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
-export declare function usePrevious<T>(value: T): T | undefined;
 export declare function Meta(props: MetaProps): JSX.Element;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
 }
 export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
-export interface SemicolonProps extends LabelProps {
-    show?: boolean;
-    highlightUpdates?: boolean;
-    quotes?: JsonViewProps<object>['quotes'];
-    value?: object;
-    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
-}
-export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
 export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;

package/cjs/node.js

@@ -7,10 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.Ellipsis = exports.CountInfo = void 0;
 exports.Meta = Meta;
 exports.RooNode = RooNode;
-exports.Semicolon = void 0;
-exports.usePrevious = usePrevious;
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
@@ -18,18 +16,11 @@ var _value = require("./value");
 var _TriangleArrow = require("./arrow/TriangleArrow");
 var _store = require("./store");
 var _copied = require("./copied");
+var _semicolon = require("./semicolon");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes"],
-  _excluded4 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-function usePrevious(value) {
-  var ref = (0, _react.useRef)();
-  (0, _react.useEffect)(function () {
-    ref.current = value;
-  });
-  return ref.current;
-}
+  _excluded3 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
 function Meta(props) {
   var _props$isArray = props.isArray,
     isArray = _props$isArray === void 0 ? false : _props$isArray,
@@ -77,79 +68,8 @@ var Ellipsis = function Ellipsis(_ref) {
   }));
 };
 exports.Ellipsis = Ellipsis;
-var Semicolon = function Semicolon(_ref2) {
-  var children = _ref2.children,
-    render = _ref2.render,
-    color = _ref2.color,
-    value = _ref2.value,
-    _ref2$className = _ref2.className,
-    className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
-    show = _ref2.show,
-    highlightUpdates = _ref2.highlightUpdates,
-    quotes = _ref2.quotes,
-    props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
-  var prevValue = usePrevious(value);
-  var highlightContainer = (0, _react.useRef)(null);
-  var isHighlight = (0, _react.useMemo)(function () {
-    if (!highlightUpdates || prevValue === undefined) return false;
-    // highlight if value type changed
-    if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
-      return true;
-    }
-    if (typeof value === 'number') {
-      // notice: NaN !== NaN
-      if (isNaN(value) && isNaN(prevValue)) return false;
-      return value !== prevValue;
-    }
-    // highlight if isArray changed
-    if (Array.isArray(value) !== Array.isArray(prevValue)) {
-      return true;
-    }
-    // not highlight object/function
-    // deep compare they will be slow
-    if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
-      return false;
-    }
-
-    // highlight if not equal
-    if (value !== prevValue) {
-      return true;
-    }
-    return false;
-  }, [highlightUpdates, value]);
-  (0, _react.useEffect)(function () {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
-      highlightContainer.current.animate([{
-        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
-      }, {
-        backgroundColor: ''
-      }], {
-        duration: 1000,
-        easing: 'ease-in'
-      });
-    }
-  }, [isHighlight, value]);
-  var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
-  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: className
-  }, props), {}, {
-    value: value,
-    style: {
-      color: color
-    },
-    children: content
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: className,
-    color: color
-  }, props), {}, {
-    ref: highlightContainer,
-    children: content
-  }));
-};
-exports.Semicolon = Semicolon;
-var CountInfo = function CountInfo(_ref3) {
-  var children = _ref3.children;
+var CountInfo = function CountInfo(_ref2) {
+  var children = _ref2.children;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, {
     style: {
       paddingLeft: 4,
@@ -177,6 +97,8 @@ function RooNode(props) {
     enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
     _props$highlightUpdat = props.highlightUpdates,
     highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
+    _props$objectSortKeys = props.objectSortKeys,
+    objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
     collapsed = props.collapsed,
@@ -188,11 +110,8 @@ function RooNode(props) {
     quotes = _props$quotes === void 0 ? '"' : _props$quotes,
     onCopied = props.onCopied,
     onExpand = props.onExpand,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded3);
   var isArray = Array.isArray(value);
-  var nameKeys = isArray ? Object.keys(value).map(function (m) {
-    return Number(m);
-  }) : Object.keys(value);
   var subkeyid = (0, _react.useId)();
   var expands = (0, _store.useExpandsStatus)();
   var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
@@ -260,6 +179,29 @@ function RooNode(props) {
       return setShowTools(false);
     };
   }
+  var nameKeys = isArray ? Object.keys(value).map(function (m) {
+    return Number(m);
+  }) : Object.keys(value);
+
+  // object
+  var entries = isArray ? Object.entries(value).map(function (m) {
+    return [Number(m[0]), m[1]];
+  }) : Object.entries(value);
+  if (objectSortKeys) {
+    entries = objectSortKeys === true ? entries.sort(function (_ref3, _ref4) {
+      var _ref5 = (0, _slicedToArray2["default"])(_ref3, 1),
+        a = _ref5[0];
+      var _ref6 = (0, _slicedToArray2["default"])(_ref4, 1),
+        b = _ref6[0];
+      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
+    }) : entries.sort(function (_ref7, _ref8) {
+      var _ref9 = (0, _slicedToArray2["default"])(_ref7, 1),
+        a = _ref9[0];
+      var _ref10 = (0, _slicedToArray2["default"])(_ref8, 1),
+        b = _ref10[0];
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+    });
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     className: "".concat(className, " w-rjv-inner")
   }, eventProps), {}, {
@@ -270,7 +212,7 @@ function RooNode(props) {
       },
       onClick: handle,
       children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
           value: value,
           quotes: quotes,
           render: components.objectKey,
@@ -296,9 +238,12 @@ function RooNode(props) {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
-        var item = value[key];
-        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+      children: entries.length > 0 && entries.map(function (_ref11, idx) {
+        var _ref12 = (0, _slicedToArray2["default"])(_ref11, 2),
+          key = _ref12[0],
+          itemVal = _ref12[1];
+        var item = itemVal;
+        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(_semicolon.Semicolon, {
           value: item,
           quotes: quotes,
           highlightUpdates: highlightUpdates,
@@ -327,7 +272,7 @@ function RooNode(props) {
               value: item,
               keyName: key
             }, subNodeProps))
-          }, key + idx);
+          }, key + '' + idx);
         }
         if (typeof item === 'function') {
           return;

package/cjs/semicolon.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren } from 'react';
+import { LabelProps } from './value';
+import { JsonViewProps } from './';
+export declare function usePrevious<T>(value: T): T | undefined;
+export interface SemicolonProps extends LabelProps {
+    show?: boolean;
+    highlightUpdates?: boolean;
+    quotes?: JsonViewProps<object>['quotes'];
+    value?: object;
+    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
+}
+export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;

package/cjs/semicolon.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Semicolon = void 0;
+exports.usePrevious = usePrevious;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _value = require("./value");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes", "style"];
+function usePrevious(value) {
+  var ref = (0, _react.useRef)();
+  (0, _react.useEffect)(function () {
+    ref.current = value;
+  });
+  return ref.current;
+}
+var Semicolon = function Semicolon(_ref) {
+  var children = _ref.children,
+    render = _ref.render,
+    color = _ref.color,
+    value = _ref.value,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? 'w-rjv-object-key' : _ref$className,
+    show = _ref.show,
+    highlightUpdates = _ref.highlightUpdates,
+    quotes = _ref.quotes,
+    style = _ref.style,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var prevValue = usePrevious(value);
+  var highlightContainer = (0, _react.useRef)(null);
+  var isHighlight = (0, _react.useMemo)(function () {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if ((0, _typeof2["default"])(value) !== (0, _typeof2["default"])(prevValue)) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if ((0, _typeof2["default"])(value) === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  (0, _react.useEffect)(function () {
+    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value]);
+  var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
+  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className
+  }, props), {}, {
+    value: value,
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+      color: color
+    }),
+    children: content
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: className,
+    color: color
+  }, props), {}, {
+    ref: highlightContainer,
+    children: content
+  }));
+};
+exports.Semicolon = Semicolon;

package/cjs/value.d.ts

@@ -41,7 +41,7 @@ export declare const typeMap: {
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
 export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    keyName?: string;
+    keyName?: string | number;
     value?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;

package/esm/index.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import { MetaProps, SemicolonProps, EllipsisProps } from './node';
+import { MetaProps, EllipsisProps } from './node';
+import { SemicolonProps } from './semicolon';
 import { ValueViewProps } from './value';
 import { CopiedProps } from './copied';
 export * from './node';
@@ -19,6 +20,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     enableClipboard?: boolean;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
+    /** Whether sort keys through `String.prototype.localeCompare()` @default false */
+    objectSortKeys?: boolean | ((a: string, b: string) => number);
     /** Display for quotes in object-key @default " */
     quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */

package/esm/node.d.ts

@@ -6,20 +6,11 @@ export interface MetaProps extends LabelProps {
     start?: boolean;
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
-export declare function usePrevious<T>(value: T): T | undefined;
 export declare function Meta(props: MetaProps): JSX.Element;
 export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
 }
 export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;
-export interface SemicolonProps extends LabelProps {
-    show?: boolean;
-    highlightUpdates?: boolean;
-    quotes?: JsonViewProps<object>['quotes'];
-    value?: object;
-    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
-}
-export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;
 export declare const CountInfo: FC<PropsWithChildren<LabelProps>>;
 export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;

package/esm/node.js

@@ -2,22 +2,15 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes"],
-  _excluded4 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
-import { Fragment, useId, cloneElement, useState, useMemo, useRef, useEffect } from 'react';
+  _excluded3 = ["value", "keyName", "className", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "highlightUpdates", "objectSortKeys", "indentWidth", "collapsed", "level", "keyid", "quotes", "onCopied", "onExpand"];
+import { Fragment, useId, cloneElement, useState } from 'react';
 import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
 import { Copied } from './copied';
+import { Semicolon } from './semicolon';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-export function usePrevious(value) {
-  var ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
 export function Meta(props) {
   var {
       isArray = false,
@@ -66,81 +59,10 @@ export var Ellipsis = _ref => {
     children: "..."
   }));
 };
-export var Semicolon = _ref2 => {
-  var {
-      children,
-      render,
-      color,
-      value,
-      className = 'w-rjv-object-key',
-      show,
-      highlightUpdates,
-      quotes
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-  var prevValue = usePrevious(value);
-  var highlightContainer = useRef(null);
-  var isHighlight = useMemo(() => {
-    if (!highlightUpdates || prevValue === undefined) return false;
-    // highlight if value type changed
-    if (typeof value !== typeof prevValue) {
-      return true;
-    }
-    if (typeof value === 'number') {
-      // notice: NaN !== NaN
-      if (isNaN(value) && isNaN(prevValue)) return false;
-      return value !== prevValue;
-    }
-    // highlight if isArray changed
-    if (Array.isArray(value) !== Array.isArray(prevValue)) {
-      return true;
-    }
-    // not highlight object/function
-    // deep compare they will be slow
-    if (typeof value === 'object' || typeof value === 'function') {
-      return false;
-    }
-
-    // highlight if not equal
-    if (value !== prevValue) {
-      return true;
-    }
-    return false;
-  }, [highlightUpdates, value]);
-  useEffect(() => {
-    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
-      highlightContainer.current.animate([{
-        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
-      }, {
-        backgroundColor: ''
-      }], {
-        duration: 1000,
-        easing: 'ease-in'
-      });
-    }
-  }, [isHighlight, value]);
-  var content = show ? "" + quotes + children + quotes : children;
-  if (render) return render(_extends({
-    className
-  }, props, {
-    value,
-    style: {
-      color
-    },
-    children: content
-  }));
-  return /*#__PURE__*/_jsx(Label, _extends({
-    className: className,
-    color: color
-  }, props, {
-    ref: highlightContainer,
-    children: content
-  }));
-};
-export var CountInfo = _ref3 => {
+export var CountInfo = _ref2 => {
   var {
     children
-  } = _ref3;
+  } = _ref2;
   return /*#__PURE__*/_jsx(Label, {
     style: {
       paddingLeft: 4,
@@ -162,6 +84,7 @@ export function RooNode(props) {
       displayObjectSize = true,
       enableClipboard = true,
       highlightUpdates = true,
+      objectSortKeys = false,
       indentWidth = 15,
       collapsed,
       level = 1,
@@ -170,9 +93,8 @@ export function RooNode(props) {
       onCopied,
       onExpand
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded4);
+    reset = _objectWithoutPropertiesLoose(props, _excluded3);
   var isArray = Array.isArray(value);
-  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
   var subkeyid = useId();
   var expands = useExpandsStatus();
   var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
@@ -233,6 +155,21 @@ export function RooNode(props) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
   }
+  var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
+
+  // object
+  var entries = isArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
+  if (objectSortKeys) {
+    entries = objectSortKeys === true ? entries.sort((_ref3, _ref4) => {
+      var [a] = _ref3;
+      var [b] = _ref4;
+      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
+    }) : entries.sort((_ref5, _ref6) => {
+      var [a] = _ref5;
+      var [b] = _ref6;
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+    });
+  }
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
     className: className + " w-rjv-inner"
   }, eventProps, {
@@ -269,8 +206,9 @@ export function RooNode(props) {
         borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
-      children: nameKeys.length > 0 && nameKeys.map((key, idx) => {
-        var item = value[key];
+      children: entries.length > 0 && entries.map((_ref7, idx) => {
+        var [key, itemVal] = _ref7;
+        var item = itemVal;
         var renderKey = /*#__PURE__*/_jsx(Semicolon, {
           value: item,
           quotes: quotes,
@@ -300,7 +238,7 @@ export function RooNode(props) {
               value: item,
               keyName: key
             }, subNodeProps))
-          }, key + idx);
+          }, key + '' + idx);
         }
         if (typeof item === 'function') {
           return;

package/esm/semicolon.d.ts

@@ -0,0 +1,12 @@
+import { FC, PropsWithChildren } from 'react';
+import { LabelProps } from './value';
+import { JsonViewProps } from './';
+export declare function usePrevious<T>(value: T): T | undefined;
+export interface SemicolonProps extends LabelProps {
+    show?: boolean;
+    highlightUpdates?: boolean;
+    quotes?: JsonViewProps<object>['quotes'];
+    value?: object;
+    render?: (props: Omit<SemicolonProps, 'show'> & {}) => JSX.Element;
+}
+export declare const Semicolon: FC<PropsWithChildren<SemicolonProps>>;

package/esm/semicolon.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "render", "color", "value", "className", "show", "highlightUpdates", "quotes", "style"];
+import { useMemo, useRef, useEffect } from 'react';
+import { Label } from './value';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function usePrevious(value) {
+  var ref = useRef();
+  useEffect(() => {
+    ref.current = value;
+  });
+  return ref.current;
+}
+export var Semicolon = _ref => {
+  var {
+      children,
+      render,
+      color,
+      value,
+      className = 'w-rjv-object-key',
+      show,
+      highlightUpdates,
+      quotes,
+      style
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var prevValue = usePrevious(value);
+  var highlightContainer = useRef(null);
+  var isHighlight = useMemo(() => {
+    if (!highlightUpdates || prevValue === undefined) return false;
+    // highlight if value type changed
+    if (typeof value !== typeof prevValue) {
+      return true;
+    }
+    if (typeof value === 'number') {
+      // notice: NaN !== NaN
+      if (isNaN(value) && isNaN(prevValue)) return false;
+      return value !== prevValue;
+    }
+    // highlight if isArray changed
+    if (Array.isArray(value) !== Array.isArray(prevValue)) {
+      return true;
+    }
+    // not highlight object/function
+    // deep compare they will be slow
+    if (typeof value === 'object' || typeof value === 'function') {
+      return false;
+    }
+
+    // highlight if not equal
+    if (value !== prevValue) {
+      return true;
+    }
+    return false;
+  }, [highlightUpdates, value]);
+  useEffect(() => {
+    if (highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {
+      highlightContainer.current.animate([{
+        backgroundColor: 'var(--w-rjv-update-color, #ebcb8b)'
+      }, {
+        backgroundColor: ''
+      }], {
+        duration: 1000,
+        easing: 'ease-in'
+      });
+    }
+  }, [isHighlight, value]);
+  var content = show ? "" + quotes + children + quotes : children;
+  if (render) return render(_extends({
+    className
+  }, props, {
+    value,
+    style: _extends({}, style, {
+      color
+    }),
+    children: content
+  }));
+  return /*#__PURE__*/_jsx(Label, _extends({
+    className: className,
+    color: color
+  }, props, {
+    ref: highlightContainer,
+    children: content
+  }));
+};

package/esm/value.d.ts

@@ -41,7 +41,7 @@ export declare const typeMap: {
 };
 export declare const Colon: FC<PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>>;
 export interface ValueViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement> {
-    keyName?: string;
+    keyName?: string | number;
     value?: T;
     displayDataTypes: boolean;
     displayObjectSize: boolean;

package/package.json

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