@uiw/react-json-view 0.0.1 → 1.0.0

package/README.md

@@ -3,13 +3,24 @@ 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.
 
+<!--rehype:ignore:start-->
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-json-view/assets/1680273/b8b8300b-2a43-4173-878b-73e50cfac19c" />
+</a>
+<a href="https://uiwjs.github.io/react-json-view/" target="_blank">
+  <img width="360" alt="react-json-view" src="https://github.com/uiwjs/react-code-preview-layout/assets/1680273/da8e8499-6de3-4d4f-8316-8b2a3b616170" />
+</a>
+
+<!--rehype:ignore:end-->
+
 ## Features
 
 📚 Use Typescript to write, better code hints.  
-🎨 Support theme customization  
+🎨 Support theme customization & [`online editing`](https://uiwjs.github.io/react-json-view/#online-editing-theme) theme  
 🌒 Support dark/light mode  
 
 ## Quick Start
@@ -96,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',
@@ -121,6 +134,94 @@ export default function Demo() {
 }
 ```
 
+## Online Editing Theme
+
+Online custom style example, please check in the [documentation website](https://uiwjs.github.io/react-json-view/)
+
+```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';
+
+const object = {
+  avatar: 'https://i.imgur.com/MK3eW3As.jpg',
+  string: 'Lorem ipsum dolor sit amet',
+  integer: 42,
+  float: 114.514,
+  bigint: 10086n,
+  null: null,
+  undefined,
+  timer: 0,
+  date: new Date('Tue Sep 13 2022 14:07:44 GMT-0500 (Central Daylight Time)'),
+  array: [19, 100.86, 'test', NaN, Infinity],
+  nestedArray: [
+    [1, 2],
+    [3, 4],
+  ],
+  object: {
+    'first-child': true,
+    'second-child': false,
+    'last-child': null,
+  },
+  string_number: '1234',
+}
+const customTheme = {
+  '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-background-color': '#1e1e1e',
+  '--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',
+
+  '--w-rjv-type-string-color': '#ce9178',
+  '--w-rjv-type-int-color': '#268bd2',
+  '--w-rjv-type-float-color': '#859900',
+  '--w-rjv-type-bigint-color': '#268bd2',
+  '--w-rjv-type-boolean-color': '#559bd4',
+  '--w-rjv-type-date-color': '#586e75',
+  '--w-rjv-type-null-color': '#d33682',
+  '--w-rjv-type-nan-color': '#859900',
+  '--w-rjv-type-undefined-color': '#586e75',
+};
+
+export default function Demo() {
+  const [cssvar, setCssvar] = useState('--w-rjv-background-color');
+  const [hex, setHex] = useState("#1e1e1e");
+  const [theme, setTheme] = useState(customTheme);
+  const onChange = ({ hexa }) => {
+    setHex(hexa);
+    setTheme({ ...theme, [cssvar]: hexa });
+  };
+  return (
+    <React.Fragment>
+      <div style={{ display: 'flex', gap: '1rem' }}>
+        <JsonView value={object} keyName="root" style={{ flex: 1, ...theme }} />
+        <div>
+          <Colorful color={hex} onChange={onChange} />
+          <div style={{ display: 'flex', gap: '0.4rem', flexWrap: 'wrap' }}>
+            {Object.keys(customTheme).map((varname, idx) => {
+              const click = () => {
+                setCssvar(varname);
+                setHex(customTheme[varname]);
+              };
+              const active = cssvar === varname ? '#a8a8a8' : '';
+              return <button key={idx} style={{ background: active }} onClick={click}>{varname}</button>
+            })}
+          </div>
+        </div>
+      </div>
+      Copy the theme configuration below into your project.
+      <pre>
+        {JSON.stringify(theme, null, 2)}
+      </pre>
+    </React.Fragment>
+  )
+}
+```
 ## Render
 
 ```tsx mdx:preview
@@ -281,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/dark.d.ts

@@ -0,0 +1,19 @@
+declare module '@uiw/react-json-view/dark' {
+  export const darkTheme: {
+    '--w-rjv-font-family': string;
+    '--w-rjv-color': string;
+    '--w-rjv-background-color': string;
+    '--w-rjv-border-left': string;
+    '--w-rjv-arrow-color': string;
+    '--w-rjv-info-color': string;
+    '--w-rjv-type-string-color': string;
+    '--w-rjv-type-int-color': string;
+    '--w-rjv-type-float-color': string;
+    '--w-rjv-type-bigint-color': string;
+    '--w-rjv-type-boolean-color': string;
+    '--w-rjv-type-date-color': string;
+    '--w-rjv-type-null-color': string;
+    '--w-rjv-type-nan-color': string;
+    '--w-rjv-type-undefined-color': string;
+  };
+}