@uiw/react-json-view 0.1.0 → 1.1.0

package/README.md

@@ -3,6 +3,7 @@ react-json-view
 
 [![CI](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml/badge.svg)](https://github.com/uiwjs/react-json-view/actions/workflows/ci.yml)
 [![npm version](https://img.shields.io/npm/v/@uiw/react-json-view.svg)](https://www.npmjs.com/package/@uiw/react-json-view)
+[![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
 
 A React component for displaying and editing javascript arrays and JSON objects.
 
@@ -21,6 +22,7 @@ A React component for displaying and editing javascript arrays and JSON objects.
 📚 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
 
 ## Quick Start
 
@@ -106,9 +108,11 @@ const customTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#9cdcfe',
+  '--w-rjv-copied-success-color': '#28a745',
 
   '--w-rjv-curlybraces-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
@@ -135,7 +139,7 @@ export default function Demo() {
 
 Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
 
-```tsx mdx:preview
+```tsx mdx:preview:&title=Online Editing Theme
 import React, { useState, useRef } from 'react';
 import Colorful from '@uiw/react-color-colorful';
 import JsonView from '@uiw/react-json-view';
@@ -165,9 +169,11 @@ const object = {
 const customTheme = {
   '--w-rjv-color': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
-  '--w-rjv-border-left': '1px solid #323232',
-  '--w-rjv-arrow-color': 'var(--w-rjv-color)',
+  '--w-rjv-line-color': '#323232',
+  '--w-rjv-arrow-color': '#9cdcfe',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
 
   '--w-rjv-curlybraces-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
@@ -188,9 +194,8 @@ export default function Demo() {
   const [hex, setHex] = useState("#1e1e1e");
   const [theme, setTheme] = useState(customTheme);
   const onChange = ({ hexa }) => {
-    const value = cssvar === '--w-rjv-border-left' ? `1px solid ${hexa}` : hexa;
     setHex(hexa);
-    setTheme({ ...theme, [cssvar]: value });
+    setTheme({ ...theme, [cssvar]: hexa });
   };
   return (
     <React.Fragment>
@@ -200,7 +205,10 @@ export default function Demo() {
           <Colorful color={hex} onChange={onChange} />
           <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
             {Object.keys(customTheme).map((varname, idx) => {
-              const click = () => setCssvar(varname);
+              const click = () => {
+                setCssvar(varname);
+                setHex(customTheme[varname]);
+              };
               const active = cssvar === varname ? '#a8a8a8' : '';
               return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
             })}
@@ -236,6 +244,7 @@ export default function Demo() {
     <JsonView
       value={object}
       keyName="root"
+      quotes=""
       displayObjectSize={false}
       displayDataTypes={false}
       style={{
@@ -375,14 +384,26 @@ import { MetaProps, SemicolonProps, EllipsisProps, ValueViewProps } from '@uiw/r
 export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
   /** This property contains your input JSON */
   value?: T;
-  /** Set the indent-width for nested objects @default `15`*/
+  /** Set the indent-width for nested objects @default 15 */
   indentWidth?: number;
-  /** When set to `true`, data type labels prefix values @default `true` */
+  /** When set to `true`, data type labels prefix values @default true */
   displayDataTypes?: boolean;
-  /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+  /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
   displayObjectSize?: boolean;
-  /** Define the root node name. @default `undefined` */
+  /** Define the root node name. @default undefined */
   keyName?: string | number;
+  /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
+  enableClipboard?: boolean;
+  /** Display for quotes in object-key @default " */
+  quotes?: "'" | '"' | '';
+  /** Callback function for when a treeNode is expanded or collapsed */
+  onExpand?: (props: {
+    expand: boolean;
+    value: T;
+    keyid: string;
+    keyName?: string | number;
+  }) => void;
+  /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];
     ellipsis?: EllipsisProps['render'];
@@ -395,6 +416,22 @@ declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<objec
 export default JsonView;
 ```
 
+## Size and dependencies
+
+Here is the size benchmark (using [bundlephobia.com](https://bundlephobia.com)) against similar React libraries (found by [`npmjs.com/search`](https://www.npmjs.com/search?q=react%20json&ranking=popularity)):
+
+| Library | Bundle size | Bundle size (gzip) | Deps | Last commit |
+| ------- | ------- | ------- | ------- | ------- |
+| **@uiw/react-json-view** | [![](https://img.shields.io/bundlephobia/min/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/@uiw/react-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/%40uiw%2Freact-json-view?color=6ead0a&label=)](https://bundlephobia.com/result?p=@uiw/react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/uiwjs/react-json-view?style=flat&label=last)](https://github.com/uiwjs/react-json-view/commits) |
+| react-json-view-lite | [![](https://img.shields.io/bundlephobia/min/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view-lite?color=red&label=)](https://bundlephobia.com/result?p=react-json-view-lite)  | [![GitHub last commit](https://img.shields.io/github/last-commit/AnyRoad/react-json-view-lite?style=flat&label=last)](https://github.com/AnyRoad/react-json-view-lite/commits) |
+| react-json-pretty | [![](https://img.shields.io/bundlephobia/min/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-pretty?color=red&label=)](https://bundlephobia.com/result?p=react-json-pretty)  | [![GitHub last commit](https://img.shields.io/github/last-commit/chenckang/react-json-pretty?style=flat&label=last)](https://github.com/chenckang/react-json-pretty/commits) |
+| react-json-inspector | [![](https://img.shields.io/bundlephobia/min/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-inspector?color=red&label=)](https://bundlephobia.com/result?p=react-json-inspector)  | [![GitHub last commit](https://img.shields.io/github/last-commit/Lapple/react-json-inspector?style=flat&label=last)](https://github.com/Lapple/react-json-inspector/commits) |
+| react-json-tree | [![](https://img.shields.io/bundlephobia/min/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree)  | [![GitHub last commit](https://img.shields.io/github/last-commit/reduxjs/redux-devtools?style=flat&label=last)](https://github.com/reduxjs/redux-devtools/commits) |
+| react-json-view | [![](https://img.shields.io/bundlephobia/min/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-view?color=red&label=)](https://bundlephobia.com/result?p=react-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-view?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/mac-s-g/react-json-view?style=flat&label=last)](https://github.com/mac-s-g/react-json-view/commits) |
+| react-json-tree-viewer | [![](https://img.shields.io/bundlephobia/min/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![](https://img.shields.io/bundlephobia/minzip/react-json-tree-viewer?color=red&label=)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![](https://badgen.net/bundlephobia/dependency-count/react-json-tree-viewer?color=red&label=&t=123)](https://bundlephobia.com/result?p=react-json-tree-viewer)  | [![GitHub last commit](https://img.shields.io/github/last-commit/nsisodiya/react-json-viewer?style=flat&label=last)](https://github.com/nsisodiya/react-json-viewer/commits) |
+| react-domify | [![](https://img.shields.io/bundlephobia/min/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://img.shields.io/bundlephobia/minzip/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![](https://badgen.net/bundlephobia/dependency-count/react-domify?color=red&label=)](https://bundlephobia.com/result?p=react-domify)  | [![GitHub last commit](https://img.shields.io/github/last-commit/JedWatson/react-domify?style=flat&label=last)](https://github.com/JedWatson/react-domify/commits) |
+| react18-json-view | [![](https://img.shields.io/bundlephobia/min/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://img.shields.io/bundlephobia/minzip/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![](https://badgen.net/bundlephobia/dependency-count/react18-json-view?color=red&label=)](https://bundlephobia.com/result?p=react18-json-view)  | [![GitHub last commit](https://img.shields.io/github/last-commit/YYsuni/react18-json-view?style=flat&label=last)](https://github.com/YYsuni/react18-json-view/commits) |
+
 ## Development
 
 Runs the project in development mode.  

package/cjs/copied.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface CopiedProps<T = object> extends React.SVGProps<SVGSVGElement> {
+    show?: boolean;
+    text?: T;
+    render?: (props: Omit<CopiedProps<T>, 'render'>) => JSX.Element;
+}
+export declare function Copied<T>(props: CopiedProps<T>): JSX.Element | null;

package/cjs/copied.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Copied = Copied;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "style", "text", "render", "show"];
+function Copied(props) {
+  var children = props.children,
+    style = props.style,
+    _props$text = props.text,
+    text = _props$text === void 0 ? '' : _props$text,
+    render = props.render,
+    show = props.show,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  if (!show) return null;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    copied = _useState2[0],
+    setCopied = _useState2[1];
+  var click = function click(event) {
+    event.stopPropagation();
+    var copyText = JSON.stringify(text, function (key, value) {
+      if (typeof value === 'bigint') {
+        return value.toString();
+      }
+      return value;
+    }, 2);
+    if (text === Infinity) copyText = Infinity;
+    navigator.clipboard.writeText(copyText).then(function () {
+      setCopied(true);
+      var timer = setTimeout(function () {
+        setCopied(false);
+        clearTimeout(timer);
+      }, 3000);
+    })["catch"](function (error) {});
+  };
+  var defalutStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
+    cursor: 'pointer',
+    marginLeft: 5
+  });
+  var svgProps = (0, _objectSpread2["default"])({
+    height: '1em',
+    width: '1em',
+    fill: 'var(--w-rjv-copied-color, currentColor)',
+    onClick: click,
+    style: defalutStyle,
+    className: 'w-rjv-copied'
+  }, reset);
+  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), svgProps));
+  if (copied) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      viewBox: "0 0 38 38"
+    }, svgProps), {}, {
+      fill: "var(--w-rjv-copied-success-color, #28a745)",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+        d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,15.2249049 C29.1403264,13.8627542 29.9736597,13.1778155 30,13.1700887 C30,11.9705278 30,10.0804982 30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M31.5589286,15 L35.1589286,18.6 L21.0160714,33 L12.5303571,24.2571429 L16.1303571,20.6571429 L21.0160714,25.5428571 L31.5589286,15 Z M12.5,30 L12.5,32.5 L5,32.5 L5,30 L12.5,30 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+      })
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    viewBox: "0 0 38 38"
+  }, svgProps), {}, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M27.5,35 L2.5,35 L2.5,12.5 L27.5,12.5 L27.5,20 L30,20 L30,7.5 C30,6.1 28.9,5 27.5,5 L20,5 C20,2.2 17.8,0 15,0 C12.2,0 10,2.2 10,5 L2.5,5 C1.1,5 0,6.1 0,7.5 L0,35 C0,36.4 1.1,37.5 2.5,37.5 L27.5,37.5 C28.9,37.5 30,36.4 30,35 L30,30 L27.5,30 L27.5,35 Z M7.5,7.5 L10,7.5 C10,7.5 12.5,6.4 12.5,5 C12.5,3.6 13.6,2.5 15,2.5 C16.4,2.5 17.5,3.6 17.5,5 C17.5,6.4 18.8,7.5 20,7.5 L22.5,7.5 C22.5,7.5 25,8.6 25,10 L5,10 C5,8.5 6.1,7.5 7.5,7.5 Z M5,27.5 L10,27.5 L10,25 L5,25 L5,27.5 Z M22.5,22.5 L22.5,17.5 L12.5,25 L22.5,32.5 L22.5,27.5 L35,27.5 L35,22.5 L22.5,22.5 Z M5,32.5 L12.5,32.5 L12.5,30 L5,30 L5,32.5 Z M17.5,15 L5,15 L5,17.5 L17.5,17.5 L17.5,15 Z M10,20 L5,20 L5,22.5 L10,22.5 L10,20 Z"
+    })
+  }));
+}

package/cjs/index.d.ts

@@ -1,25 +1,41 @@
 import React from 'react';
 import { MetaProps, SemicolonProps, EllipsisProps } from './node';
 import { ValueViewProps } from './value';
+import { CopiedProps } from './copied';
 export * from './node';
 export * from './value';
-export interface JsonViewProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
-    /** Set the indent-width for nested objects @default `15`*/
+    /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
-    /** When set to `true`, data type labels prefix values @default `true` */
+    /** When set to `true`, data type labels prefix values @default true */
     displayDataTypes?: boolean;
-    /** When set to `true`, `objects` and `arrays` are labeled with size @default `true` */
+    /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
-    /** Define the root node name. @default `undefined` */
+    /** Define the root node name. @default undefined */
     keyName?: string | number;
+    /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
+    enableClipboard?: boolean;
+    /** 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 */
+    collapsed?: boolean | number;
+    /** Callback function for when a treeNode is expanded or collapsed */
+    onExpand?: (props: {
+        expand: boolean;
+        value: T;
+        keyid: string;
+        keyName?: string | number;
+    }) => void;
+    /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];
         ellipsis?: EllipsisProps['render'];
         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/node.d.ts

@@ -6,21 +6,22 @@ export interface MetaProps extends LabelProps {
     start?: boolean;
     render?: (props: Pick<MetaProps, 'start' | 'isArray' | 'className' | 'children'>) => JSX.Element;
 }
-export declare function Meta(props: MetaProps): import("react/jsx-runtime").JSX.Element;
-export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+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;
+    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 JsonViewProps<T> {
+export interface RooNodeProps<T extends object> extends JsonViewProps<T> {
     keyName?: string | number;
     keyid?: string;
+    level?: number;
 }
 export declare function RooNode<T extends object>(props: RooNodeProps<T>): import("react/jsx-runtime").JSX.Element;

package/cjs/node.js

@@ -4,22 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Line = exports.Ellipsis = exports.CountInfo = void 0;
+exports.Ellipsis = exports.CountInfo = void 0;
 exports.Meta = Meta;
 exports.RooNode = RooNode;
 exports.Semicolon = void 0;
 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");
 var _value = require("./value");
 var _TriangleArrow = require("./arrow/TriangleArrow");
 var _store = require("./store");
+var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
+  _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
 function Meta(props) {
   var _props$isArray = props.isArray,
     isArray = _props$isArray === void 0 ? false : _props$isArray,
@@ -46,10 +48,6 @@ function Meta(props) {
     children: start ? mark.charAt(0) : mark.charAt(1)
   }));
 }
-var Line = function Line(props) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
-};
-exports.Line = Line;
 var Ellipsis = function Ellipsis(_ref) {
   var style = _ref.style,
     render = _ref.render,
@@ -79,8 +77,9 @@ var Semicolon = function Semicolon(_ref2) {
     _ref2$className = _ref2.className,
     className = _ref2$className === void 0 ? 'w-rjv-object-key' : _ref2$className,
     show = _ref2.show,
+    quotes = _ref2.quotes,
     props = (0, _objectWithoutProperties2["default"])(_ref2, _excluded3);
-  var content = show ? "\"".concat(children, "\"") : children;
+  var content = show ? "".concat(quotes).concat(children).concat(quotes) : children;
   if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     className: className
   }, props), {}, {
@@ -122,10 +121,18 @@ function RooNode(props) {
     components = _props$components === void 0 ? {} : _props$components,
     _props$displayObjectS = props.displayObjectSize,
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
+    _props$enableClipboar = props.enableClipboard,
+    enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
     _props$indentWidth = props.indentWidth,
     indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    collapsed = props.collapsed,
+    _props$level = props.level,
+    level = _props$level === void 0 ? 1 : _props$level,
     _props$keyid = props.keyid,
     keyid = _props$keyid === void 0 ? 'root' : _props$keyid,
+    _props$quotes = props.quotes,
+    quotes = _props$quotes === void 0 ? '"' : _props$quotes,
+    onExpand = props.onExpand,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded4);
   var isArray = Array.isArray(value);
   var nameKeys = isArray ? Object.keys(value).map(function (m) {
@@ -133,12 +140,18 @@ function RooNode(props) {
   }) : 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 : true;
+  var expand = (_expands$keyid = expands[keyid]) !== null && _expands$keyid !== void 0 ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
   var arrowStyle = {
     transform: "rotate(".concat(expand ? '0' : '-90', "deg)"),
     transition: 'all 0.3s'
   };
   var handle = function handle() {
+    onExpand && typeof onExpand === 'function' && onExpand({
+      expand: !expand,
+      keyid: keyid,
+      keyName: keyName,
+      value: value
+    });
     !expand ? _store.store.expand(keyid) : _store.store.collapse(keyid);
   };
   var subNodeProps = {
@@ -146,12 +159,20 @@ function RooNode(props) {
     indentWidth: indentWidth,
     displayDataTypes: displayDataTypes,
     displayObjectSize: displayObjectSize,
+    enableClipboard: enableClipboard,
+    onExpand: onExpand,
+    collapsed: collapsed,
+    quotes: quotes,
+    level: level + 1,
     style: {
       paddingLeft: indentWidth
     }
   };
   var valueViewProps = {
     displayDataTypes: displayDataTypes,
+    displayObjectSize: displayObjectSize,
+    enableClipboard: enableClipboard,
+    indentWidth: indentWidth,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/(0, _react.cloneElement)(components.arrow, {
@@ -160,8 +181,26 @@ function RooNode(props) {
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
     style: arrowStyle
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    showTools = _useState2[0],
+    setShowTools = _useState2[1];
+  var tools = enableClipboard ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_copied.Copied, {
+    show: showTools,
+    text: value,
+    render: components.copied
+  }) : undefined;
+  var eventProps = {};
+  if (enableClipboard) {
+    eventProps.onMouseEnter = function () {
+      return setShowTools(true);
+    };
+    eventProps.onMouseLeave = function () {
+      return setShowTools(false);
+    };
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), eventProps), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
       style: {
         display: 'inline-flex',
         alignItems: 'center'
@@ -170,6 +209,7 @@ function RooNode(props) {
       children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
           value: value,
+          quotes: quotes,
           render: components.objectKey,
           color: typeof keyName === 'number' ? _value.typeMap['number'].color : '',
           show: typeof keyName === 'string',
@@ -186,17 +226,26 @@ function RooNode(props) {
         render: components.braces
       }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
         children: [nameKeys.length, " items"]
-      })]
-    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      }), tools]
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       style: {
-        borderLeft: 'var(--w-rjv-border-left, 1px solid #ebebeb)',
+        borderLeft: '1px solid var(--w-rjv-line-color, #ebebeb)',
         marginLeft: 6
       },
       children: nameKeys.length > 0 && nameKeys.map(function (key, idx) {
         var item = value[key];
-        if (Array.isArray(item)) {
+        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
+          value: item,
+          quotes: quotes,
+          render: components.objectKey,
+          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        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 label = isArray ? idx : key;
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               value: item,
               keyid: keyid + subkeyid + label,
@@ -204,36 +253,8 @@ function RooNode(props) {
             }, subNodeProps))
           }, label + idx);
         }
-        var renderKey = /*#__PURE__*/(0, _jsxRuntime.jsx)(Semicolon, {
-          value: item,
-          render: components.objectKey,
-          color: typeof key === 'number' ? _value.typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
-        });
-        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date)) {
-          if (Object.keys(item).length === 0) {
-            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
-              style: {
-                paddingLeft: indentWidth
-              },
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-                renderKey: renderKey,
-                keyName: key,
-                value: item
-              })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
-                render: components.braces,
-                start: true,
-                isArray: isArray
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Meta, {
-                render: components.braces,
-                isArray: isArray
-              }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(CountInfo, {
-                children: [Object.keys(item).length, " items"]
-              })]
-            }, key + idx);
-          }
-          return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        if ((0, _typeof2["default"])(item) === 'object' && item && !(item instanceof Date) && !isEmpty) {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RooNode, (0, _objectSpread2["default"])({
               keyid: keyid + subkeyid + key,
               value: item,
@@ -244,18 +265,14 @@ function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
-          style: {
-            paddingLeft: indentWidth
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
-            renderKey: renderKey,
-            keyName: key,
-            value: item
-          }))
-        }, idx);
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.ValueView, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, valueViewProps), {}, {
+          renderBraces: components.braces,
+          renderKey: renderKey,
+          keyName: key,
+          value: item
+        }), idx);
       })
-    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    }), expand && /*#__PURE__*/(0, _jsxRuntime.jsx)(_value.Line, {
       style: {
         paddingLeft: 2
       },

package/cjs/theme/dark.d.ts

@@ -2,9 +2,11 @@ export declare const darkTheme: {
     '--w-rjv-font-family': string;
     '--w-rjv-color': string;
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
     '--w-rjv-brackets-color': string;
     '--w-rjv-type-string-color': string;

package/cjs/theme/dark.js

@@ -8,9 +8,11 @@ var darkTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#0184a6',
   '--w-rjv-background-color': '#202020',
-  '--w-rjv-border-left': '1px solid #323232',
+  '--w-rjv-line-color': '#323232',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#656565',
+  '--w-rjv-copied-color': '#0184a6',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#1896b6',
   '--w-rjv-brackets-color': '#1896b6',
   '--w-rjv-type-string-color': '#cb4b16',

package/cjs/theme/light.d.ts

@@ -2,9 +2,11 @@ export declare const lightTheme: {
     '--w-rjv-font-family': string;
     '--w-rjv-color': string;
     '--w-rjv-background-color': string;
-    '--w-rjv-border-left': string;
+    '--w-rjv-line-color': string;
     '--w-rjv-arrow-color': string;
     '--w-rjv-info-color': string;
+    '--w-rjv-copied-color': string;
+    '--w-rjv-copied-success-color': string;
     '--w-rjv-curlybraces-color': string;
     '--w-rjv-brackets-color': string;
     '--w-rjv-type-string-color': string;

package/cjs/theme/light.js

@@ -8,9 +8,11 @@ var lightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#002b36',
   '--w-rjv-background-color': '#ffffff',
-  '--w-rjv-border-left': '1px solid #ebebeb',
+  '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
   '--w-rjv-info-color': '#0000004d',
+  '--w-rjv-copied-color': '#002b36',
+  '--w-rjv-copied-success-color': '#28a745',
   '--w-rjv-curlybraces-color': '#236a7c',
   '--w-rjv-brackets-color': '#236a7c',
   '--w-rjv-type-string-color': '#cb4b16',

package/cjs/value.d.ts

@@ -1,4 +1,6 @@
 import { FC, PropsWithChildren } from 'react';
+import { MetaProps } from './node';
+export declare const Line: FC<PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
 export declare const typeMap: {
     string: {
         color: string;
@@ -40,14 +42,18 @@ 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;
-    value: T;
+    value?: T;
     displayDataTypes: boolean;
+    displayObjectSize: boolean;
+    enableClipboard: boolean;
+    indentWidth: number;
     renderKey?: JSX.Element;
+    renderBraces?: MetaProps['render'];
     renderValue?: (props: React.HTMLAttributes<HTMLSpanElement> & {
         type: TypeProps['type'];
     }) => JSX.Element;
 }
-export declare function ValueView<T>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function ValueView<T = object>(props: ValueViewProps<T>): import("react/jsx-runtime").JSX.Element;
 export interface LabelProps extends React.HTMLAttributes<HTMLSpanElement> {
     color?: string;
     fontSize?: number;