@uiw/react-json-view 0.1.0 → 1.1.0

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,23 @@ 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 eventProps = {};
+  if (enableClipboard) {
+    eventProps.onMouseEnter = function () {
+      return setShowTools(true);
+    };
+    eventProps.onMouseLeave = function () {
+      return setShowTools(false);
+    };
+  }
   if (content && typeof content === 'string') {
     var valueView = renderValue ? renderValue({
       className: 'w-rjv-value',
@@ -137,12 +165,37 @@ 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, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      style: {
+        paddingLeft: indentWidth
+      }
+    }, eventProps), {}, {
+      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, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    style: {
+      paddingLeft: indentWidth
+    }
+  }, eventProps), {}, {
+    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) {

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "style", "text", "render", "show"];
+import { useState } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+export function Copied(props) {
+  var {
+      style,
+      text = '',
+      render,
+      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 (render) return render(_extends({}, props, svgProps));
+  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

@@ -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/esm/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/esm/node.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["isArray", "start", "className", "render"],
   _excluded2 = ["style", "render"],
-  _excluded3 = ["children", "render", "color", "value", "className", "show"],
-  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "indentWidth", "keyid"];
-import { Fragment, useId, cloneElement } from 'react';
-import { ValueView, Colon, Label, typeMap } from './value';
+  _excluded3 = ["children", "render", "color", "value", "className", "show", "quotes"],
+  _excluded4 = ["value", "keyName", "displayDataTypes", "components", "displayObjectSize", "enableClipboard", "indentWidth", "collapsed", "level", "keyid", "quotes", "onExpand"];
+import { Fragment, useId, cloneElement, useState } from 'react';
+import { ValueView, Colon, Label, Line, typeMap } from './value';
 import { TriangleArrow } from './arrow/TriangleArrow';
 import { useExpandsStatus, store } from './store';
+import { Copied } from './copied';
 import { 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,
@@ -66,10 +66,11 @@ export var Semicolon = _ref2 => {
       color,
       value,
       className = 'w-rjv-object-key',
-      show
+      show,
+      quotes
     } = _ref2,
     props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
-  var content = show ? "\"" + children + "\"" : children;
+  var content = show ? "" + quotes + children + quotes : children;
   if (render) return render(_extends({
     className
   }, props, {
@@ -108,20 +109,31 @@ export function RooNode(props) {
       displayDataTypes = true,
       components = {},
       displayObjectSize = true,
+      enableClipboard = true,
       indentWidth = 15,
-      keyid = 'root'
+      collapsed,
+      level = 1,
+      keyid = 'root',
+      quotes = '"',
+      onExpand
     } = props,
     reset = _objectWithoutPropertiesLoose(props, _excluded4);
   var isArray = Array.isArray(value);
   var nameKeys = isArray ? Object.keys(value).map(m => Number(m)) : Object.keys(value);
   var subkeyid = useId();
   var expands = useExpandsStatus();
-  var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : true;
+  var expand = (_expands$keyid = expands[keyid]) != null ? _expands$keyid : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level <= collapsed : true;
   var arrowStyle = {
     transform: "rotate(" + (expand ? '0' : '-90') + "deg)",
     transition: 'all 0.3s'
   };
   var handle = () => {
+    onExpand && typeof onExpand === 'function' && onExpand({
+      expand: !expand,
+      keyid,
+      keyName,
+      value: value
+    });
     !expand ? store.expand(keyid) : store.collapse(keyid);
   };
   var subNodeProps = {
@@ -129,12 +141,20 @@ export function RooNode(props) {
     indentWidth,
     displayDataTypes,
     displayObjectSize,
+    enableClipboard,
+    onExpand,
+    collapsed,
+    quotes,
+    level: level + 1,
     style: {
       paddingLeft: indentWidth
     }
   };
   var valueViewProps = {
     displayDataTypes,
+    displayObjectSize,
+    enableClipboard,
+    indentWidth,
     renderValue: components.value
   };
   var arrowView = components.arrow ? /*#__PURE__*/cloneElement(components.arrow, {
@@ -143,7 +163,18 @@ export function RooNode(props) {
   }) : /*#__PURE__*/_jsx(TriangleArrow, {
     style: arrowStyle
   });
-  return /*#__PURE__*/_jsxs("div", _extends({}, reset, {
+  var [showTools, setShowTools] = useState(false);
+  var tools = enableClipboard ? /*#__PURE__*/_jsx(Copied, {
+    show: showTools,
+    text: value,
+    render: components.copied
+  }) : undefined;
+  var eventProps = {};
+  if (enableClipboard) {
+    eventProps.onMouseEnter = () => setShowTools(true);
+    eventProps.onMouseLeave = () => setShowTools(false);
+  }
+  return /*#__PURE__*/_jsxs("div", _extends({}, reset, eventProps, {
     children: [/*#__PURE__*/_jsxs(Line, {
       style: {
         display: 'inline-flex',
@@ -153,6 +184,7 @@ export function RooNode(props) {
       children: [arrowView, (typeof keyName === 'string' || typeof keyName === 'number') && /*#__PURE__*/_jsxs(Fragment, {
         children: [/*#__PURE__*/_jsx(Semicolon, {
           value: value,
+          quotes: quotes,
           render: components.objectKey,
           color: typeof keyName === 'number' ? typeMap['number'].color : '',
           show: typeof keyName === 'string',
@@ -169,15 +201,24 @@ 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,
+          quotes: quotes,
+          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 +228,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 +240,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,16 @@ 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 eventProps = {};
+  if (enableClipboard) {
+    eventProps.onMouseEnter = () => setShowTools(true);
+    eventProps.onMouseLeave = () => setShowTools(false);
+  }
   if (content && typeof content === 'string') {
     var valueView = renderValue ? renderValue({
       className: 'w-rjv-value',
@@ -126,12 +143,37 @@ 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, _extends({
+      style: {
+        paddingLeft: indentWidth
+      }
+    }, eventProps, {
+      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, _extends({
+    style: {
+      paddingLeft: indentWidth
+    }
+  }, eventProps, {
+    children: /*#__PURE__*/_jsxs(Label, _extends({}, reset, {
+      children: [renderKey, /*#__PURE__*/_jsx(Colon, {}), typeView, empty, tools]
+    }))
   }));
 }
 export var Label = _ref2 => {