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

package/cjs/section/KeyName.js

@@ -1,11 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KeyName = void 0;
+exports.KeyNameComp = exports.KeyName = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
 var KeyName = function KeyName(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$KeyN = _useSectionStore.KeyName,
@@ -14,4 +19,33 @@ var KeyName = function KeyName(props) {
   return null;
 };
 exports.KeyName = KeyName;
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+var KeyNameComp = function KeyNameComp(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 _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Key = _useSectionStore2.KeyName,
+    Comp = _useSectionStore2$Key === void 0 ? {} : _useSectionStore2$Key;
+  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((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }), {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }));
+};
+exports.KeyNameComp = KeyNameComp;
+KeyNameComp.displayName = 'JVR.KeyNameComp';

package/cjs/store/Symbols.js

@@ -15,6 +15,7 @@ var _jsxRuntime = require("react/jsx-runtime");
 var initialState = {
   Arrow: {
     as: 'span',
+    className: 'w-rjv-arrow',
     style: {
       transform: 'rotate(0deg)',
       transition: 'all 0.3s'

package/{esm/comps/ReRender/Symbols.d.ts → cjs/symbol/index.d.ts}

@@ -1,16 +1,14 @@
 /// <reference types="react" />
-import { type SymbolsElement } from '../../store/Symbols';
-import { type TagType } from '../../store/Types';
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType } from '../store/Types';
 export declare const Quote: {
     (props: {
         isNumber?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
-    (props: {
-        isNumber?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    (props: React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Colon: {

package/cjs/{comps/ReRender/Symbols.js → symbol/index.js}

@@ -5,32 +5,37 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ValueQuote = exports.Quote = exports.Colon = exports.BracketsOpen = exports.BracketsClose = exports.Arrow = void 0;
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _Symbols = require("../../store/Symbols");
-var _Expands = require("../../store/Expands");
+var _Symbols = require("../store/Symbols");
+var _Expands = require("../store/Expands");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "render"],
+var _excluded = ["isNumber"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
-  _excluded4 = ["as", "style", "render"],
-  _excluded5 = ["as", "render"],
+  _excluded4 = ["as", "render"],
+  _excluded5 = ["as", "style", "render"],
   _excluded6 = ["as", "render"],
   _excluded7 = ["as", "render"],
-  _excluded8 = ["as", "render"];
+  _excluded8 = ["as", "render"],
+  _excluded9 = ["as", "render"];
 var Quote = function Quote(props) {
   var _useSymbolsStore = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore$Quot = _useSymbolsStore.Quote,
     Comp = _useSymbolsStore$Quot === void 0 ? {} : _useSymbolsStore$Quot;
-  var isNumber = props.isNumber;
+  var isNumber = props.isNumber,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (isNumber) return null;
   var as = Comp.as,
     render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
+  var child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
 exports.Quote = Quote;
 Quote.displayName = 'JVR.Quote';
@@ -38,15 +43,15 @@ var ValueQuote = function ValueQuote(props) {
   var _useSymbolsStore2 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore2$Val = _useSymbolsStore2.ValueQuote,
     Comp = _useSymbolsStore2$Val === void 0 ? {} : _useSymbolsStore2$Val;
-  var isNumber = props.isNumber;
-  if (isNumber) return null;
+  var other = (0, _extends2["default"])({}, ((0, _objectDestructuringEmpty2["default"])(props), props));
   var as = Comp.as,
     render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded3);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
+  var child = render && typeof render === 'function' && render(elmProps);
   if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
 exports.ValueQuote = ValueQuote;
 ValueQuote.displayName = 'JVR.ValueQuote';
@@ -56,7 +61,7 @@ var Colon = function Colon() {
     Comp = _useSymbolsStore3$Col === void 0 ? {} : _useSymbolsStore3$Col;
   var as = Comp.as,
     render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded3);
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
   var Elm = as || 'span';
   var child = render && typeof render === 'function' && render(reset);
   if (child) return child;
@@ -74,7 +79,7 @@ var Arrow = function Arrow(props) {
   var as = Comp.as,
     style = Comp.style,
     render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
@@ -98,7 +103,7 @@ var BracketsOpen = function BracketsOpen(_ref) {
   if (isBrackets) {
     var as = BracketsLeft.as,
       _render = BracketsLeft.render,
-      reset = (0, _objectWithoutProperties2["default"])(BracketsLeft, _excluded5);
+      reset = (0, _objectWithoutProperties2["default"])(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
     var _child = _render && typeof _render === 'function' && _render(reset);
     if (_child) return _child;
@@ -106,7 +111,7 @@ var BracketsOpen = function BracketsOpen(_ref) {
   }
   var elm = BraceLeft.as,
     render = BraceLeft.render,
-    props = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded6);
+    props = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
   var child = render && typeof render === 'function' && render(props);
   if (child) return child;
@@ -126,7 +131,7 @@ var BracketsClose = function BracketsClose(_ref2) {
   if (isBrackets) {
     var as = BracketsRight.as,
       _render2 = BracketsRight.render,
-      _reset = (0, _objectWithoutProperties2["default"])(BracketsRight, _excluded7);
+      _reset = (0, _objectWithoutProperties2["default"])(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
     var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
     if (_child2) return _child2;
@@ -134,7 +139,7 @@ var BracketsClose = function BracketsClose(_ref2) {
   }
   var elm = BraceRight.as,
     render = BraceRight.render,
-    reset = (0, _objectWithoutProperties2["default"])(BraceRight, _excluded8);
+    reset = (0, _objectWithoutProperties2["default"])(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
   var child = render && typeof render === 'function' && render(reset);
   if (child) return child;

package/{esm/comps/ReRender/Types.d.ts → cjs/types/index.d.ts}

@@ -1,16 +1,10 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const SetComp: {
-    ({ isSet }: {
-        isSet: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export declare const MapComp: {
-    ({ isMap }: {
-        isMap: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const SetComp: FC<PropsWithChildren<{
+    value: unknown;
+}>>;
+export declare const MapComp: FC<PropsWithChildren<{
+    value: unknown;
+}>>;
 type TypeProps = PropsWithChildren<{
     expandKey: string;
     keyName: string | number;
@@ -32,5 +26,4 @@ export declare const TypeDate: FC<{
 export declare const TypeUndefined: FC<TypeProps>;
 export declare const TypeNull: FC<TypeProps>;
 export declare const TypeNan: FC<TypeProps>;
-export declare const TypeEmptyValue: FC<TypeProps>;
 export {};

package/cjs/{comps/ReRender/Types.js → types/index.js}

@@ -4,15 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TypeUrl = exports.TypeUndefined = exports.TypeTrue = exports.TypeString = exports.TypeNull = exports.TypeNan = exports.TypeInt = exports.TypeFloat = exports.TypeFalse = exports.TypeEmptyValue = exports.TypeDate = exports.TypeBigint = exports.SetComp = exports.MapComp = void 0;
+exports.TypeUrl = exports.TypeUndefined = exports.TypeTrue = exports.TypeString = exports.TypeNull = exports.TypeNan = exports.TypeInt = exports.TypeFloat = exports.TypeFalse = exports.TypeDate = exports.TypeBigint = exports.SetComp = exports.MapComp = void 0;
 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 _Types = require("../../store/Types");
-var _store = require("../../store");
-var _Symbols = require("./Symbols");
-var _Copied = require("../Copied");
+var _Types = require("../store/Types");
+var _store = require("../store");
+var _symbol = require("../symbol");
+var _Copied = require("../comps/Copied");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["as", "render"],
   _excluded2 = ["as", "render"],
@@ -26,45 +26,48 @@ var _excluded = ["as", "render"],
   _excluded10 = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"],
-  _excluded14 = ["as", "render"];
+  _excluded13 = ["as", "render"];
 var SetComp = function SetComp(_ref) {
-  var isSet = _ref.isSet;
+  var value = _ref.value;
   var _useTypesStore = (0, _Types.useTypesStore)(),
     _useTypesStore$Set = _useTypesStore.Set,
-    Set = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set,
+    Comp = _useTypesStore$Set === void 0 ? {} : _useTypesStore$Set,
     displayDataTypes = _useTypesStore.displayDataTypes;
+  var isSet = value instanceof Set;
   if (!isSet || !displayDataTypes) return null;
-  var as = Set.as,
-    render = Set.render,
-    reset = (0, _objectWithoutProperties2["default"])(Set, _excluded);
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value: value
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
 exports.SetComp = SetComp;
 SetComp.displayName = 'JVR.SetComp';
 var MapComp = function MapComp(_ref2) {
-  var isMap = _ref2.isMap;
+  var value = _ref2.value;
   var _useTypesStore2 = (0, _Types.useTypesStore)(),
     _useTypesStore2$Map = _useTypesStore2.Map,
-    Map = _useTypesStore2$Map === void 0 ? {} : _useTypesStore2$Map,
+    Comp = _useTypesStore2$Map === void 0 ? {} : _useTypesStore2$Map,
     displayDataTypes = _useTypesStore2.displayDataTypes;
+  var isMap = value instanceof Map;
   if (!isMap || !displayDataTypes) return null;
-  var as = Map.as,
-    render = Map.render,
-    reset = (0, _objectWithoutProperties2["default"])(Map, _excluded2);
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value: value
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
 exports.MapComp = MapComp;
 MapComp.displayName = 'JVR.MapComp';
@@ -100,7 +103,6 @@ var TypeString = function TypeString(_ref3) {
     });
     if (childrenStr.length > length) {
       reset.onClick = function () {
-        if (length && childrenStr.length <= length) return setShorten(false);
         setShorten(!shorten);
       };
     }
@@ -123,10 +125,12 @@ var TypeString = function TypeString(_ref3) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       style: style
-    }))), child || /*#__PURE__*/(0, _jsxRuntime.jsxs)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-      className: "w-rjv-value",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.ValueQuote, {}), text, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.ValueQuote, {})]
-    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
+    }))), child || /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        className: "w-rjv-value",
+        children: text
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
       keyName: keyName,
       value: children,
       expandKey: expandKey
@@ -366,7 +370,7 @@ var TypeUrl = function TypeUrl(_ref9) {
     value: children
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: children,
+    children: children === null || children === void 0 ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
@@ -380,7 +384,7 @@ var TypeUrl = function TypeUrl(_ref9) {
       target: "_blank"
     }, reset), {}, {
       className: "w-rjv-value",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.ValueQuote, {}), children === null || children === void 0 ? void 0 : children.href, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.ValueQuote, {})]
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {}), children === null || children === void 0 ? void 0 : children.href, /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.ValueQuote, {})]
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
       keyName: keyName,
       value: children,
@@ -410,8 +414,9 @@ var TypeDate = function TypeDate(_ref10) {
     type: 'type',
     value: children
   });
+  var childStr = children === null || children === void 0 ? void 0 : children.toString();
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: children,
+    children: childStr,
     className: 'w-rjv-value'
   }), {
     type: 'value',
@@ -422,7 +427,7 @@ var TypeDate = function TypeDate(_ref10) {
       style: style
     }))), child || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       className: "w-rjv-value",
-      children: children === null || children === void 0 ? void 0 : children.toString()
+      children: childStr
     })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
       keyName: keyName,
       value: children,
@@ -531,7 +536,7 @@ var TypeNan = function TypeNan(_ref13) {
     value: children
   });
   var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: children,
+    children: children === null || children === void 0 ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
@@ -548,43 +553,4 @@ var TypeNan = function TypeNan(_ref13) {
   });
 };
 exports.TypeNan = TypeNan;
-TypeNan.displayName = 'JVR.TypeNan';
-var TypeEmptyValue = function TypeEmptyValue(_ref14) {
-  var children = _ref14.children,
-    expandKey = _ref14.expandKey,
-    keyName = _ref14.keyName;
-  var _useTypesStore14 = (0, _Types.useTypesStore)(),
-    _useTypesStore14$Nan = _useTypesStore14.Nan,
-    Nan = _useTypesStore14$Nan === void 0 ? {} : _useTypesStore14$Nan,
-    displayDataTypes = _useTypesStore14.displayDataTypes;
-  var as = Nan.as,
-    render = Nan.render,
-    reset = (0, _objectWithoutProperties2["default"])(Nan, _excluded14);
-  var Comp = as || 'span';
-  var style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, defalutStyle), Nan.style || {});
-  var isRender = render && typeof render === 'function';
-  var type = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    style: style
-  }), {
-    type: 'type',
-    value: children
-  });
-  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: children,
-    className: 'w-rjv-value'
-  }), {
-    type: 'value',
-    value: children
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
-    children: [displayDataTypes && (type || /*#__PURE__*/(0, _jsxRuntime.jsx)(Comp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-      style: style
-    }))), child, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
-  });
-};
-exports.TypeEmptyValue = TypeEmptyValue;
 TypeNan.displayName = 'JVR.TypeNan';

package/cjs/utils/useHighlight.js

@@ -45,7 +45,6 @@ function useHighlight(_ref) {
     if (value !== prevValue) {
       return true;
     }
-    return false;
   }, [highlightUpdates, value]);
   (0, _react.useEffect)(function () {
     if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {

package/esm/Container.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
-import React, { forwardRef, useId, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, useId } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
 import { KeyValues } from './comps/KeyValues';
@@ -17,11 +17,9 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
       keyName
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
-  var $ref = useRef(null);
   var dispatch = useShowToolsDispatch();
-  useImperativeHandle(ref, () => $ref.current, [$ref]);
   var subkeyid = useId();
-  var defaultClassNames = "w-rjv-inner " + className;
+  var defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   var reset = {
     onMouseEnter: () => dispatch({
       [subkeyid]: true
@@ -31,7 +29,8 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
     })
   };
   return /*#__PURE__*/_jsxs("div", _extends({
-    className: defaultClassNames
+    className: defaultClassNames,
+    ref: ref
   }, elmProps, reset, {
     children: [/*#__PURE__*/_jsx(NestedOpen, {
       expandKey: subkeyid,

package/esm/comps/KeyValues.js

@@ -4,9 +4,9 @@ import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
 import { useShowToolsDispatch } from '../store/ShowTools';
 import { Value } from './Value';
-import { Key } from './Key';
+import { KeyNameComp } from '../section/KeyName';
 import { Container } from '../Container';
-import { Quote, Colon } from './ReRender/Symbols';
+import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -80,13 +80,15 @@ export var KayName = props => {
     children: [/*#__PURE__*/_jsxs("span", {
       ref: highlightContainer,
       children: [/*#__PURE__*/_jsx(Quote, {
-        isNumber: isNumber
-      }), /*#__PURE__*/_jsx(Key, {
+        isNumber: isNumber,
+        "data-placement": "left"
+      }), /*#__PURE__*/_jsx(KeyNameComp, {
         keyName: keyName,
         value: value,
         children: keyName
       }), /*#__PURE__*/_jsx(Quote, {
-        isNumber: isNumber
+        isNumber: isNumber,
+        "data-placement": "right"
       })]
     }), /*#__PURE__*/_jsx(Colon, {})]
   });

package/esm/comps/NestedClose.js

@@ -1,6 +1,6 @@
 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
-import { BracketsClose } from './ReRender/Symbols';
+import { BracketsClose } from '../symbol';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var NestedClose = props => {
   var _expands$expandKey;

package/esm/comps/NestedOpen.js

@@ -3,10 +3,11 @@ import { KayName } from './KeyValues';
 import { useExpandsStore, useExpandsDispatch } from '../store/Expands';
 import { useStore } from '../store';
 import { Copied } from './Copied';
-import { CountInfo, CountInfoExtra } from './CountInfo';
-import { Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
-import { Ellipsis } from './Ellipsis';
-import { SetComp, MapComp } from './ReRender/Types';
+import { CountInfoExtraComps } from '../section/CountInfoExtra';
+import { CountInfoComp } from '../section/CountInfo';
+import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
+import { EllipsisComp } from '../section/Ellipsis';
+import { SetComp, MapComp } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var NestedOpen = props => {
@@ -63,22 +64,22 @@ export var NestedOpen = props => {
     }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
-      isSet: initialValue instanceof Set
+      value: initialValue
     }), /*#__PURE__*/_jsx(MapComp, {
-      isMap: initialValue instanceof Map
+      value: initialValue
     }), /*#__PURE__*/_jsx(BracketsOpen, {
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(Ellipsis, {
+    }), /*#__PURE__*/_jsx(EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
     }), /*#__PURE__*/_jsx(BracketsClose, {
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(CountInfo, {
+    }), /*#__PURE__*/_jsx(CountInfoComp, {
       value: value,
       keyName: keyName
-    }), /*#__PURE__*/_jsx(CountInfoExtra, {
+    }), /*#__PURE__*/_jsx(CountInfoExtraComps, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/_jsx(Copied, {

package/esm/comps/Value.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from './ReRender/Types';
+import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var Value = props => {

package/esm/index.d.ts

@@ -30,7 +30,7 @@ export * from './store/Expands';
 export * from './store/ShowTools';
 export * from './store/Symbols';
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;

package/esm/index.js

@@ -37,7 +37,7 @@ export * from './store/Expands';
 export * from './store/ShowTools';
 export * from './store/Symbols';
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       className = '',
@@ -62,7 +62,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     backgroundColor: 'var(--w-rjv-background-color, #00000000)',
     fontSize: 13
   }, style);
-  var cls = "w-json-view-container w-rjv " + (className || '');
+  var cls = ['w-json-view-container', 'w-rjv', className].filter(Boolean).join(' ');
   return /*#__PURE__*/_jsxs(Provider, {
     initialState: {
       value,

package/esm/section/CountInfo.d.ts

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