@uiw/react-json-view 0.1.0 → 1.0.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.
 
@@ -106,9 +107,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 +138,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 +168,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 +193,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 +204,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>
             })}
@@ -375,14 +382,17 @@ 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;
+  /** Redefine interface elements to re-render. */
   components?: {
     braces?: MetaProps['render'];
     ellipsis?: EllipsisProps['render'];

package/cjs/copied.d.ts

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

package/cjs/copied.js

@@ -0,0 +1,72 @@
+"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", "show"];
+function Copied(props) {
+  var children = props.children,
+    style = props.style,
+    _props$text = props.text,
+    text = _props$text === void 0 ? '' : _props$text,
+    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 (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

@@ -6,14 +6,17 @@ export * from './value';
 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;
+    /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];
         ellipsis?: EllipsisProps['render'];

package/cjs/node.d.ts

@@ -7,7 +7,6 @@ export interface MetaProps extends LabelProps {
     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 interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => 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"];
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
 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,
@@ -122,6 +120,8 @@ 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,
     _props$keyid = props.keyid,
@@ -152,6 +152,9 @@ function RooNode(props) {
   };
   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 +163,24 @@ function RooNode(props) {
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_TriangleArrow.TriangleArrow, {
     style: arrowStyle
   });
+  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
+  }) : undefined;
+  var mouseEnter = function mouseEnter() {
+    return setShowTools(true);
+  };
+  var mouseLeave = function mouseLeave() {
+    return setShowTools(false);
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_value.Line, {
       style: {
         display: 'inline-flex',
         alignItems: 'center'
@@ -186,17 +205,25 @@ 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,
+          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 +231,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 +243,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;

package/cjs/value.js

@@ -4,17 +4,24 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Type = exports.Label = exports.Colon = void 0;
+exports.Type = exports.Line = exports.Label = exports.Colon = void 0;
 exports.ValueView = ValueView;
 exports.typeMap = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _react = require("react");
+var _node = require("./node");
+var _copied = require("./copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
+var Line = function Line(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", (0, _objectSpread2["default"])({}, props));
+};
+exports.Line = Line;
 var isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
 };
@@ -76,8 +83,12 @@ function ValueView(props) {
   var _typeMap$type;
   var value = props.value,
     keyName = props.keyName,
+    indentWidth = props.indentWidth,
     renderKey = props.renderKey,
     renderValue = props.renderValue,
+    renderBraces = props.renderBraces,
+    enableClipboard = props.enableClipboard,
+    displayObjectSize = props.displayObjectSize,
     displayDataTypes = props.displayDataTypes,
     reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
   var type = (0, _typeof2["default"])(value);
@@ -123,6 +134,20 @@ function ValueView(props) {
     typeView = /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
   }
   color = ((_typeMap$type = typeMap[type]) === null || _typeMap$type === void 0 ? void 0 : _typeMap$type.color) || '';
+  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
+  }) : undefined;
+  var mouseEnter = function mouseEnter() {
+    return setShowTools(true);
+  };
+  var mouseLeave = function mouseLeave() {
+    return setShowTools(false);
+  };
   if (content && typeof content === 'string') {
     var valueView = renderValue ? renderValue({
       className: 'w-rjv-value',
@@ -137,13 +162,40 @@ function ValueView(props) {
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-      children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView]
-    }));
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+      style: {
+        paddingLeft: indentWidth
+      },
+      onMouseEnter: mouseEnter,
+      onMouseLeave: mouseLeave,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, valueView, tools]
+      }))
+    });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView]
-  }));
+  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
+  var empty = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+      render: renderBraces,
+      start: true,
+      isArray: Array.isArray(value)
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.Meta, {
+      render: renderBraces,
+      isArray: Array.isArray(value)
+    }), displayObjectSize && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_node.CountInfo, {
+      children: [length, " items"]
+    })]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+    style: {
+      paddingLeft: indentWidth
+    },
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Label, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      children: [renderKey, /*#__PURE__*/(0, _jsxRuntime.jsx)(Colon, {}), typeView, empty, tools]
+    }))
+  });
 }
 var Label = function Label(_ref2) {
   var children = _ref2.children,

package/esm/copied.d.ts

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

package/esm/copied.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "style", "text", "show"];
+import { useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Copied(props) {
+  var {
+      style,
+      text = '',
+      show
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  if (!show) return null;
+  var [copied, setCopied] = useState(false);
+  var click = event => {
+    event.stopPropagation();
+    var copyText = JSON.stringify(text, (key, value) => {
+      if (typeof value === 'bigint') {
+        return value.toString();
+      }
+      return value;
+    }, 2);
+    if (text === Infinity) copyText = Infinity;
+    navigator.clipboard.writeText(copyText).then(() => {
+      setCopied(true);
+      var timer = setTimeout(() => {
+        setCopied(false);
+        clearTimeout(timer);
+      }, 3000);
+    }).catch(error => {});
+  };
+  var defalutStyle = _extends({}, style, {
+    cursor: 'pointer',
+    marginLeft: 5
+  });
+  var svgProps = _extends({
+    height: "1em",
+    width: "1em",
+    fill: "var(--w-rjv-copied-color, currentColor)",
+    onClick: click,
+    style: defalutStyle,
+    className: 'w-rjv-copied'
+  }, reset);
+  if (copied) {
+    return /*#__PURE__*/_jsx("svg", _extends({
+      viewBox: "0 0 38 38"
+    }, svgProps, {
+      fill: "var(--w-rjv-copied-success-color, #28a745)",
+      children: /*#__PURE__*/_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__*/_jsx("svg", _extends({
+    viewBox: "0 0 38 38"
+  }, svgProps, {
+    children: /*#__PURE__*/_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/esm/index.d.ts

@@ -6,14 +6,17 @@ export * from './value';
 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;
+    /** Redefine interface elements to re-render. */
     components?: {
         braces?: MetaProps['render'];
         ellipsis?: EllipsisProps['render'];

package/esm/node.d.ts

@@ -7,7 +7,6 @@ export interface MetaProps extends LabelProps {
     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 interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
     render?: (props: EllipsisProps) => JSX.Element;
 }

package/esm/node.js

@@ -3,11 +3,12 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutP
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
   _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
-import { Fragment, useId, cloneElement } from 'react';
-import { ValueView, Colon, Label, typeMap } from './value';
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "keyid"];
+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 { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export function Meta(props) {
@@ -36,7 +37,6 @@ export function Meta(props) {
     children: start ? mark.charAt(0) : mark.charAt(1)
   }));
 }
-export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 export var Ellipsis = _ref => {
   var {
       style,
@@ -108,6 +108,7 @@ export function RooNode(props) {
       displayDataTypes = true,
       components = {},
       displayObjectSize = true,
+      enableClipboard = true,
       indentWidth = 15,
       keyid = 'root'
     } = props,
@@ -135,6 +136,9 @@ export function RooNode(props) {
   };
   var valueViewProps = {
     displayDataTypes,
+    displayObjectSize,
+    enableClipboard,
+    indentWidth,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
@@ -143,7 +147,16 @@ export function RooNode(props) {
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle
   });
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
     children: [/*#__PURE__*/_jsxs(Line, {
       style: {
         display: 'inline-flex',
@@ -169,15 +182,23 @@ export function RooNode(props) {
         render: components.braces
       }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
         children: [nameKeys.length, " items"]
-      })]
+      }), tools]
     }), expand && /*#__PURE__*/_jsx(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((key, idx) => {
         var item = value[key];
-        if (Array.isArray(item)) {
+        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
+          value: item,
+          render: components.objectKey,
+          color: typeof key === 'number' ? typeMap['number'].color : '',
+          show: typeof key === 'string',
+          children: key
+        });
+        var isEmpty = Array.isArray(item) && item.length === 0 || typeof item === 'object' && item && !(item instanceof Date) && Object.keys(item).length === 0;
+        if (Array.isArray(item) && !isEmpty) {
           var label = isArray ? idx : key;
           return /*#__PURE__*/_jsx(Line, {
             children: /*#__PURE__*/_jsx(RooNode, _extends({
@@ -187,35 +208,7 @@ export function RooNode(props) {
             }, subNodeProps))
           }, label + idx);
         }
-        var renderKey = /*#__PURE__*/_jsx(Semicolon, {
-          value: item,
-          render: components.objectKey,
-          color: typeof key === 'number' ? typeMap['number'].color : '',
-          show: typeof key === 'string',
-          children: key
-        });
-        if (typeof item === 'object' && item && !(item instanceof Date)) {
-          if (Object.keys(item).length === 0) {
-            return /*#__PURE__*/_jsxs(Line, {
-              style: {
-                paddingLeft: indentWidth
-              },
-              children: [/*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-                renderKey: renderKey,
-                keyName: key,
-                value: item
-              })), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                start: true,
-                isArray: isArray
-              }), /*#__PURE__*/_jsx(Meta, {
-                render: components.braces,
-                isArray: isArray
-              }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
-                children: [Object.keys(item).length, " items"]
-              })]
-            }, key + idx);
-          }
+        if (typeof item === 'object' && item && !(item instanceof Date) && !isEmpty) {
           return /*#__PURE__*/_jsx(Line, {
             children: /*#__PURE__*/_jsx(RooNode, _extends({
               keyid: keyid + subkeyid + key,
@@ -227,16 +220,12 @@ export function RooNode(props) {
         if (typeof item === 'function') {
           return;
         }
-        return /*#__PURE__*/_jsx(Line, {
-          style: {
-            paddingLeft: indentWidth
-          },
-          children: /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
-            renderKey: renderKey,
-            keyName: key,
-            value: item
-          }))
-        }, idx);
+        return /*#__PURE__*/_jsx(ValueView, _extends({}, valueViewProps, {
+          renderBraces: components.braces,
+          renderKey: renderKey,
+          keyName: key,
+          value: item
+        }), idx);
       })
     }), expand && /*#__PURE__*/_jsx(Line, {
       style: {

package/esm/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/esm/theme/dark.js

@@ -2,9 +2,11 @@ export 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/esm/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/esm/theme/light.js

@@ -2,9 +2,11 @@ export 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/esm/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;

package/esm/value.js

@@ -1,11 +1,14 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["children", "style"],
-  _excluded2 = ["value", "keyName", "renderKey", "renderValue", "displayDataTypes"],
+  _excluded2 = ["value", "keyName", "indentWidth", "renderKey", "renderValue", "renderBraces", "enableClipboard", "displayObjectSize", "displayDataTypes"],
   _excluded3 = ["children", "color", "fontSize", "opacity", "paddingRight", "style"];
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
+import { Meta, CountInfo } from './node';
+import { Copied } from './copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Line = props => /*#__PURE__*/_jsx("div", _extends({}, props));
 var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var typeMap = {
   string: {
@@ -64,8 +67,12 @@ export function ValueView(props) {
   var _typeMap$type;
   var {
       value,
+      indentWidth,
       renderKey,
       renderValue,
+      renderBraces,
+      enableClipboard,
+      displayObjectSize,
       displayDataTypes
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded2);
@@ -112,6 +119,13 @@ export function ValueView(props) {
     typeView = /*#__PURE__*/_jsx(Fragment, {});
   }
   color = ((_typeMap$type = typeMap[type]) == null ? void 0 : _typeMap$type.color) || '';
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value
+  }) : undefined;
+  var mouseEnter = () => setShowTools(true);
+  var mouseLeave = () => setShowTools(false);
   if (content && typeof content === 'string') {
     var valueView = renderValue ? renderValue({
       className: 'w-rjv-value',
@@ -126,13 +140,40 @@ export function ValueView(props) {
       className: "w-rjv-value",
       children: content
     });
-    return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView]
-    }));
+    return /*#__PURE__*/_jsx(Line, {
+      style: {
+        paddingLeft: indentWidth
+      },
+      onMouseEnter: mouseEnter,
+      onMouseLeave: mouseLeave,
+      children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+        children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, valueView, tools]
+      }))
+    });
   }
-  return /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
-    children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView]
-  }));
+  var length = Array.isArray(value) ? value.length : Object.keys(value).length;
+  var empty = /*#__PURE__*/_jsxs(Fragment, {
+    children: [/*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      start: true,
+      isArray: Array.isArray(value)
+    }), /*#__PURE__*/_jsx(Meta, {
+      render: renderBraces,
+      isArray: Array.isArray(value)
+    }), displayObjectSize && /*#__PURE__*/_jsxs(CountInfo, {
+      children: [length, " items"]
+    })]
+  });
+  return /*#__PURE__*/_jsx(Line, {
+    style: {
+      paddingLeft: indentWidth
+    },
+    onMouseEnter: mouseEnter,
+    onMouseLeave: mouseLeave,
+    children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
+    }))
+  });
 }
 export var Label = _ref2 => {
   var {

package/package.json

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