@uiw/react-json-view 1.12.0 → 2.0.0-alpha.1

package/cjs/Container.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface ContainerProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
+    keyName?: string | number;
+    keyid?: string;
+    parentValue?: T;
+    level?: number;
+    value?: T;
+    initialValue?: T;
+}
+export declare const Container: React.ForwardRefExoticComponent<ContainerProps<object> & React.RefAttributes<HTMLDivElement>>;

package/cjs/Container.js

@@ -0,0 +1,67 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Container = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _NestedClose = require("./comps/NestedClose");
+var _NestedOpen = require("./comps/NestedOpen");
+var _KeyValues = require("./comps/KeyValues");
+var _ShowTools = require("./store/ShowTools");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
+var Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    children = props.children,
+    parentValue = props.parentValue,
+    keyid = props.keyid,
+    _props$level = props.level,
+    level = _props$level === void 0 ? 1 : _props$level,
+    value = props.value,
+    initialValue = props.initialValue,
+    keyName = props.keyName,
+    elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var $ref = (0, _react.useRef)(null);
+  var dispatch = (0, _ShowTools.useShowToolsDispatch)();
+  (0, _react.useImperativeHandle)(ref, function () {
+    return $ref.current;
+  }, [$ref]);
+  var subkeyid = (0, _react.useId)();
+  var defaultClassNames = "w-rjv-inner ".concat(className);
+  var reset = {
+    onMouseEnter: function onMouseEnter() {
+      return dispatch((0, _defineProperty2["default"])({}, subkeyid, true));
+    },
+    onMouseLeave: function onMouseLeave() {
+      return dispatch((0, _defineProperty2["default"])({}, subkeyid, false));
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: defaultClassNames
+  }, elmProps), reset), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedOpen.NestedOpen, {
+      expandKey: subkeyid,
+      value: value,
+      level: level,
+      keyName: keyName,
+      initialValue: initialValue
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KeyValues, {
+      expandKey: subkeyid,
+      value: value,
+      level: level
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedClose.NestedClose, {
+      expandKey: subkeyid,
+      value: value,
+      level: level
+    })]
+  }));
+});
+exports.Container = Container;
+Container.displayName = 'JVR.Container';

package/cjs/arrow/TriangleArrow.js

@@ -16,7 +16,9 @@ function TriangleArrow(props) {
   var defaultStyle = (0, _objectSpread2["default"])({
     cursor: 'pointer',
     height: '1em',
-    width: '1em'
+    width: '1em',
+    userSelect: 'none',
+    display: 'flex'
   }, style);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     viewBox: "0 0 24 24",

package/cjs/arrow/TriangleSolidArrow.js

@@ -16,15 +16,19 @@ function TriangleSolidArrow(props) {
   var defaultStyle = (0, _objectSpread2["default"])({
     cursor: 'pointer',
     height: '1em',
-    width: '1em'
+    width: '1em',
+    userSelect: 'none',
+    display: 'flex'
   }, style);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    viewBox: "0 0 15 15",
+    viewBox: "0 0 30 30",
     fill: "var(--w-rjv-arrow-color, currentColor)",
+    height: "1em",
+    width: "1em",
     style: defaultStyle
   }, reset), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
-      d: "M0 5l6 6 6-6z"
+      d: "M14.1758636,22.5690012 C14.3620957,22.8394807 14.6694712,23.001033 14.9978636,23.001033 C15.326256,23.001033 15.6336315,22.8394807 15.8198636,22.5690012 L24.8198636,9.56900125 C25.0322035,9.2633716 25.0570548,8.86504616 24.8843497,8.5353938 C24.7116447,8.20574144 24.3700159,7.99941506 23.9978636,8 L5.9978636,8 C5.62665,8.00153457 5.28670307,8.20817107 5.11443241,8.53699428 C4.94216175,8.86581748 4.96580065,9.26293681 5.1758636,9.56900125 L14.1758636,22.5690012 Z"
     })
   }));
 }

package/cjs/comps/Copied.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { type TagType } from '../store/Types';
+export type CopiedOption<T extends object> = {
+    value?: T;
+    copied: boolean;
+    setCopied: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
+    value?: T;
+    keyName: string | number;
+    expandKey: string;
+}
+export declare const Copied: {
+    <T extends object, K extends TagType>(props: CopiedProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/{copied.js → comps/Copied.js}

@@ -4,38 +4,48 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Copied = Copied;
+exports.Copied = void 0;
 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 _store = require("../store");
+var _ShowTools = require("../store/ShowTools");
+var _Section = require("../store/Section");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "style", "text", "onCopied", "render", "show"];
-function Copied(props) {
-  var children = props.children,
-    style = props.style,
-    _props$text = props.text,
-    text = _props$text === void 0 ? '' : _props$text,
-    onCopied = props.onCopied,
-    render = props.render,
-    show = props.show,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  if (!show) return null;
+var _excluded = ["keyName", "value", "expandKey"],
+  _excluded2 = ["as", "render"];
+var Copied = function Copied(props) {
+  var keyName = props.keyName,
+    value = props.value,
+    expandKey = props.expandKey,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStore = (0, _store.useStore)(),
+    onCopied = _useStore.onCopied,
+    enableClipboard = _useStore.enableClipboard;
+  var showTools = (0, _ShowTools.useShowToolsStore)();
+  var isShowTools = showTools[expandKey];
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     copied = _useState2[0],
     setCopied = _useState2[1];
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$Copi = _useSectionStore.Copied,
+    Comp = _useSectionStore$Copi === void 0 ? {} : _useSectionStore$Copi;
+  if (enableClipboard === false || !isShowTools) return null;
   var click = function click(event) {
     event.stopPropagation();
-    var copyText = JSON.stringify(text || '', function (key, value) {
+    var copyText = JSON.stringify(value, function (key, value) {
       if (typeof value === 'bigint') {
         return value.toString();
       }
       return value;
     }, 2);
-    if (text === Infinity) copyText = Infinity;
+    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
+    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
+    if (typeof value === 'bigint') copyText = value + 'n';
     navigator.clipboard.writeText(copyText).then(function () {
-      onCopied && onCopied(copyText, text);
+      onCopied && onCopied(copyText, value);
       setCopied(true);
       var timer = setTimeout(function () {
         setCopied(false);
@@ -43,25 +53,26 @@ function Copied(props) {
       }, 3000);
     })["catch"](function (error) {});
   };
-  var defalutStyle = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), {}, {
-    cursor: 'pointer',
-    verticalAlign: 'middle',
-    marginLeft: 5
+  var svgProps = {
+    fill: copied ? 'var(--w-rjv-copied-success-color, #28a745)' : 'var(--w-rjv-copied-color, currentColor)',
+    onClick: click
+  };
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other), svgProps);
+  var isRender = render && typeof render === 'function';
+  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, elmProps), {}, {
+    'data-copied': copied
+  }), {
+    value: value,
+    keyName: keyName
   });
-  var svgProps = (0, _objectSpread2["default"])({
-    height: '1em',
-    width: '1em',
-    fill: 'var(--w-rjv-copied-color, currentColor)',
-    onClick: click,
-    style: defalutStyle,
-    className: 'w-rjv-copied'
-  }, reset);
-  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, props), svgProps));
+  if (child) return child;
   if (copied) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
       viewBox: "0 0 32 36"
-    }, svgProps), {}, {
-      fill: "var(--w-rjv-copied-success-color, #28a745)",
+    }, elmProps), {}, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
         d: "M27.5,33 L2.5,33 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,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,26.1114493 L27.5,28.4926435 L27.5,33 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 M28.5589286,16 L32,19.6 L21.0160714,30.5382252 L13.5303571,24.2571429 L17.1303571,20.6571429 L21.0160714,24.5428571 L28.5589286,16 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"
       })
@@ -69,10 +80,11 @@ function Copied(props) {
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
     viewBox: "0 0 32 36"
-  }, svgProps), {}, {
+  }, elmProps), {}, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
       d: "M27.5,33 L2.5,33 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,33 C0,34.4 1.1,36 2.5,36 L27.5,36 C28.9,36 30,34.4 30,33 L30,29 L27.5,29 L27.5,33 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,21.5 L22.5,16.5 L12.5,24 L22.5,31.5 L22.5,26.5 L32,26.5 L32,21.5 L22.5,21.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"
     })
   }));
-}
+};
+exports.Copied = Copied;
 Copied.displayName = 'JVR.Copied';

package/cjs/comps/CountInfo.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type SectionElementProps } from '../store/Section';
+import { type TagType } from '../store/Types';
+export interface CountInfoProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+}
+export declare const CountInfo: {
+    <T extends object>(props: SectionElementProps<TagType> & CountInfoProps<T> & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export interface CountInfoExtraProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+}
+export declare const CountInfoExtra: {
+    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/cjs/comps/CountInfo.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CountInfoExtra = exports.CountInfo = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _store = require("../store");
+var _Section = require("../store/Section");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"],
+  _excluded3 = ["value", "keyName"],
+  _excluded4 = ["as", "render"];
+var CountInfo = function CountInfo(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {} : _props$value,
+    keyName = props.keyName,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStore = (0, _store.useStore)(),
+    displayObjectSize = _useStore.displayObjectSize;
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$Coun = _useSectionStore.CountInfo,
+    Comp = _useSectionStore$Coun === void 0 ? {} : _useSectionStore$Coun;
+  if (!displayObjectSize) return null;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+  var Elm = as || 'span';
+  reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), props.style);
+  var len = Object.keys(value).length;
+  if (!reset.children) {
+    reset.children = "".concat(len, " items");
+  }
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other);
+  var isRender = render && typeof render === 'function';
+  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, elmProps), {}, {
+    'data-length': len
+  }), {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
+};
+exports.CountInfo = CountInfo;
+CountInfo.displayName = 'JVR.CountInfo';
+var CountInfoExtra = function CountInfoExtra(props) {
+  var _props$value2 = props.value,
+    value = _props$value2 === void 0 ? {} : _props$value2,
+    keyName = props.keyName,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded3);
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Cou = _useSectionStore2.CountInfoExtra,
+    Comp = _useSectionStore2$Cou === void 0 ? {} : _useSectionStore2$Cou;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
+  var Elm = as || 'span';
+  var isRender = render && typeof render === 'function';
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other);
+  var child = isRender && render(elmProps, {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
+};
+exports.CountInfoExtra = CountInfoExtra;
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';

package/cjs/comps/Ellipsis.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface CountInfoProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+    isExpanded: boolean;
+}
+export declare const Ellipsis: {
+    <T extends object>({ isExpanded, value, keyName }: CountInfoProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/comps/Ellipsis.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ellipsis = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Section = require("../store/Section");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
+var Ellipsis = function Ellipsis(_ref) {
+  var isExpanded = _ref.isExpanded,
+    value = _ref.value,
+    keyName = _ref.keyName;
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$Elli = _useSectionStore.Ellipsis,
+    Comp = _useSectionStore$Elli === void 0 ? {} : _useSectionStore$Elli;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    'data-expanded': isExpanded
+  }), {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
+};
+exports.Ellipsis = Ellipsis;
+Ellipsis.displayName = 'JVR.Ellipsis';

package/cjs/comps/Key.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+type KeyProps = {
+    keyName: string | number;
+    value?: unknown;
+};
+export declare const Key: FC<PropsWithChildren<KeyProps>>;
+export {};

package/cjs/comps/Key.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Key = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _Section = require("../store/Section");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
+var Key = function Key(props) {
+  var children = props.children,
+    value = props.value,
+    keyName = props.keyName;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$KeyN = _useSectionStore.KeyName,
+    Comp = _useSectionStore$KeyN === void 0 ? {} : _useSectionStore$KeyN;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+  reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(reset, {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }));
+};
+exports.Key = Key;
+Key.displayName = 'JVR.Key';

package/cjs/comps/KeyValues.d.ts

@@ -0,0 +1,22 @@
+interface KeyValuesProps<T extends object> {
+    keyName?: string | number;
+    value?: T;
+    parentValue?: T;
+    expandKey?: string;
+    level: number;
+}
+export declare const KeyValues: {
+    <T extends object>(props: KeyValuesProps<T>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+interface KayNameProps<T extends object> extends Omit<KeyValuesProps<T>, 'level'> {
+}
+export declare const KayName: {
+    <T extends object>(props: KayNameProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export declare const KeyValuesItem: {
+    <T extends object>(props: KeyValuesProps<T>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export {};

package/cjs/comps/KeyValues.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyValuesItem = exports.KeyValues = exports.KayName = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _store = require("../store");
+var _Expands = require("../store/Expands");
+var _ShowTools = require("../store/ShowTools");
+var _Value = require("./Value");
+var _Key = require("./Key");
+var _Container = require("../Container");
+var _Symbols = require("./ReRender/Symbols");
+var _useHighlight = require("../utils/useHighlight");
+var _jsxRuntime = require("react/jsx-runtime");
+var KeyValues = function KeyValues(props) {
+  var _expands$expandKey;
+  var value = props.value,
+    _props$expandKey = props.expandKey,
+    expandKey = _props$expandKey === void 0 ? '' : _props$expandKey,
+    level = props.level;
+  var expands = (0, _Expands.useExpandsStore)();
+  var _useStore = (0, _store.useStore)(),
+    objectSortKeys = _useStore.objectSortKeys,
+    indentWidth = _useStore.indentWidth,
+    collapsed = _useStore.collapsed;
+  var isMyArray = Array.isArray(value);
+  var isExpanded = (_expands$expandKey = expands[expandKey]) !== null && _expands$expandKey !== void 0 ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  if (isExpanded) {
+    return null;
+  }
+  // object
+  var entries = isMyArray ? Object.entries(value).map(function (m) {
+    return [Number(m[0]), m[1]];
+  }) : Object.entries(value);
+  if (objectSortKeys) {
+    entries = objectSortKeys === true ? entries.sort(function (_ref, _ref2) {
+      var _ref3 = (0, _slicedToArray2["default"])(_ref, 1),
+        a = _ref3[0];
+      var _ref4 = (0, _slicedToArray2["default"])(_ref2, 1),
+        b = _ref4[0];
+      return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
+    }) : entries.sort(function (_ref5, _ref6) {
+      var _ref7 = (0, _slicedToArray2["default"])(_ref5, 1),
+        a = _ref7[0];
+      var _ref8 = (0, _slicedToArray2["default"])(_ref6, 1),
+        b = _ref8[0];
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+    });
+  }
+  var style = {
+    borderLeft: 'var(--w-rjv-border-left-width, 1px) var(--w-rjv-line-style, solid) var(--w-rjv-line-color, #ebebeb)',
+    paddingLeft: indentWidth,
+    marginLeft: 6
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "w-rjv-wrap",
+    style: style,
+    children: entries.map(function (_ref9, idx) {
+      var _ref10 = (0, _slicedToArray2["default"])(_ref9, 2),
+        key = _ref10[0],
+        val = _ref10[1];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyValuesItem, {
+        parentValue: value,
+        keyName: key,
+        value: val,
+        level: level
+      }, idx);
+    })
+  });
+};
+exports.KeyValues = KeyValues;
+KeyValues.displayName = 'JVR.KeyValues';
+var KayName = function KayName(props) {
+  var keyName = props.keyName,
+    value = props.value;
+  var _useStore2 = (0, _store.useStore)(),
+    highlightUpdates = _useStore2.highlightUpdates;
+  var isNumber = typeof keyName === 'number';
+  var highlightContainer = (0, _react.useRef)(null);
+  (0, _useHighlight.useHighlight)({
+    value: value,
+    highlightUpdates: highlightUpdates,
+    highlightContainer: highlightContainer
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+      ref: highlightContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Quote, {
+        isNumber: isNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Key.Key, {
+        keyName: keyName,
+        value: value,
+        children: keyName
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Quote, {
+        isNumber: isNumber
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Colon, {})]
+  });
+};
+exports.KayName = KayName;
+KayName.displayName = 'JVR.KayName';
+var KeyValuesItem = function KeyValuesItem(props) {
+  var keyName = props.keyName,
+    value = props.value,
+    parentValue = props.parentValue,
+    _props$level = props.level,
+    level = _props$level === void 0 ? 0 : _props$level;
+  var dispatch = (0, _ShowTools.useShowToolsDispatch)();
+  var subkeyid = (0, _react.useId)();
+  var isMyArray = Array.isArray(value);
+  var isMySet = value instanceof Set;
+  var isMyMap = value instanceof Map;
+  var isDate = value instanceof Date;
+  var isUrl = value instanceof URL;
+  var isMyObject = value && (0, _typeof2["default"])(value) === 'object' && !isMyArray && !isMySet && !isMyMap && !isDate && !isUrl;
+  var isNested = isMyObject || isMyArray || isMySet || isMyMap;
+  if (isNested) {
+    var myValue = isMySet ? Array.from(value) : isMyMap ? Object.fromEntries(value) : value;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.Container, {
+      keyName: keyName,
+      value: myValue,
+      parentValue: parentValue,
+      initialValue: value,
+      level: level + 1
+    });
+  }
+  var reset = {
+    onMouseEnter: function onMouseEnter() {
+      return dispatch((0, _defineProperty2["default"])({}, subkeyid, true));
+    },
+    onMouseLeave: function onMouseLeave() {
+      return dispatch((0, _defineProperty2["default"])({}, subkeyid, false));
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+    className: "w-rjv-line"
+  }, reset), {}, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(KayName, {
+      keyName: keyName,
+      value: value
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Value.Value, {
+      keyName: keyName,
+      value: value,
+      expandKey: subkeyid
+    })]
+  }));
+};
+exports.KeyValuesItem = KeyValuesItem;
+KeyValuesItem.displayName = 'JVR.KeyValuesItem';

package/cjs/comps/NestedClose.d.ts

@@ -0,0 +1,10 @@
+interface NestedCloseProps<T extends object> {
+    value?: T;
+    expandKey: string;
+    level: number;
+}
+export declare const NestedClose: {
+    <T extends object>(props: NestedCloseProps<T>): import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};
+export {};