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

package/README.md

@@ -7,7 +7,7 @@ react-json-view
 [![react@^18](https://shields.io/badge/react-^18-green?style=flat&logo=react)](https://github.com/facebook/react/releases)
 [![Coverage Status](https://uiwjs.github.io/react-json-view/badges.svg)](https://uiwjs.github.io/react-json-view/lcov-report/)
 
-A React component for displaying and editing javascript arrays and JSON objects.
+A React component for displaying and editing javascript arrays and JSON objects. Preview of [**v1 documentation**](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html) is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
 <!--rehype:ignore:start-->
 <a href="https://uiwjs.github.io/react-json-view/" target="_blank">
@@ -26,12 +26,13 @@ A React component for displaying and editing javascript arrays and JSON objects.
 ✏️ Support editing and adding features  
 ♻️ Whether to highlight updates.
 
-The new version [**v2**](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) and [examples](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html). 
+The new version [**v2**](https://uiwjs.github.io/react-json-view/) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/). 
 
 - [x] Complete all features of displaying JSON in v1.
 - [ ] Add editing functionality to v2.
 - [x] Add test cases to v2.
 
+
 ## Quick Start
 
 ```bash
@@ -670,7 +671,7 @@ export default function Demo() {
 
 ## Props
 
-Migrate from kkt v1 to v2. The new v2 version has removed the ~~`quotes`~~ and ~~`components`~~ props.
+Migrate from JSON View v1 to v2. The new v2 version has removed the ~~`quotes`~~ and ~~`components`~~ props.
 
 ```diff
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {

package/cjs/comps/KeyValues.js

@@ -14,9 +14,9 @@ var _store = require("../store");
 var _Expands = require("../store/Expands");
 var _ShowTools = require("../store/ShowTools");
 var _Value = require("./Value");
-var _Key = require("./Key");
+var _KeyName = require("../section/KeyName");
 var _Container = require("../Container");
-var _Symbols = require("./ReRender/Symbols");
+var _symbol = require("../symbol");
 var _useHighlight = require("../utils/useHighlight");
 var _jsxRuntime = require("react/jsx-runtime");
 var KeyValues = function KeyValues(props) {
@@ -92,16 +92,18 @@ var KayName = function KayName(props) {
   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, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+        isNumber: isNumber,
+        "data-placement": "left"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, {
         keyName: keyName,
         value: value,
         children: keyName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Quote, {
-        isNumber: isNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+        isNumber: isNumber,
+        "data-placement": "right"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Colon, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, {})]
   });
 };
 exports.KayName = KayName;

package/cjs/comps/NestedClose.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.NestedClose = void 0;
 var _store = require("../store");
 var _Expands = require("../store/Expands");
-var _Symbols = require("./ReRender/Symbols");
+var _symbol = require("../symbol");
 var _jsxRuntime = require("react/jsx-runtime");
 var NestedClose = function NestedClose(props) {
   var _expands$expandKey;
@@ -28,7 +28,7 @@ var NestedClose = function NestedClose(props) {
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsClose, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
       isBrackets: isArray || isMySet,
       isVisiable: true
     })

package/cjs/comps/NestedOpen.js

@@ -12,10 +12,11 @@ var _KeyValues = require("./KeyValues");
 var _Expands = require("../store/Expands");
 var _store = require("../store");
 var _Copied = require("./Copied");
-var _CountInfo = require("./CountInfo");
-var _Symbols = require("./ReRender/Symbols");
-var _Ellipsis = require("./Ellipsis");
-var _Types = require("./ReRender/Types");
+var _CountInfoExtra = require("../section/CountInfoExtra");
+var _CountInfo = require("../section/CountInfo");
+var _symbol = require("../symbol");
+var _Ellipsis = require("../section/Ellipsis");
+var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 var NestedOpen = function NestedOpen(props) {
   var _expands$expandKey;
@@ -60,28 +61,28 @@ var NestedOpen = function NestedOpen(props) {
     reset.onClick = click;
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Arrow, {
+    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, {
       style: arrowStyle,
       expandKey: expandKey
     }), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.SetComp, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
       value: initialValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.MapComp, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.MapComp, {
       value: initialValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsOpen, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, {
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.Ellipsis, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsClose, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfo, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
       value: value,
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoExtra, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfoExtra.CountInfoExtraComps, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Copied.Copied, {

package/cjs/comps/Value.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFloat = exports.Value = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _Types = require("./ReRender/Types");
+var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
 var isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
@@ -21,54 +21,54 @@ var Value = function Value(props) {
     expandKey: expandKey
   };
   if (value instanceof URL) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (typeof value === 'string') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeString, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeString, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (value === true) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeTrue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeTrue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (value === false) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeFalse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeFalse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (value === null) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeNull, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeNull, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (value === undefined) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeUndefined, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUndefined, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (value instanceof Date) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeDate, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeDate, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }
   if (typeof value === 'number' && isNaN(value)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeNan, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeNan, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'number' && isFloat(value)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeFloat, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeFloat, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'bigint') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeBigint, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeBigint, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'number') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeInt, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeInt, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   }

package/cjs/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/cjs/index.js

@@ -97,15 +97,15 @@ Object.keys(_Types).forEach(function (key) {
     }
   });
 });
-var _Symbols2 = require("./comps/ReRender/Symbols");
-Object.keys(_Symbols2).forEach(function (key) {
+var _symbol = require("./symbol");
+Object.keys(_symbol).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Symbols2[key]) return;
+  if (key in exports && exports[key] === _symbol[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Symbols2[key];
+      return _symbol[key];
     }
   });
 });

package/cjs/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;
+};

package/cjs/section/CountInfo.js

@@ -1,11 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfo = void 0;
+exports.CountInfoComp = exports.CountInfo = 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 _store = require("../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 var CountInfo = function CountInfo(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Coun = _useSectionStore.CountInfo,
@@ -14,4 +21,37 @@ var CountInfo = function CountInfo(props) {
   return null;
 };
 exports.CountInfo = CountInfo;
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+var CountInfoComp = function CountInfoComp(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 _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Cou = _useSectionStore2.CountInfo,
+    Comp = _useSectionStore2$Cou === void 0 ? {} : _useSectionStore2$Cou;
+  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.CountInfoComp = CountInfoComp;
+CountInfoComp.displayName = 'JVR.CountInfoComp';

package/cjs/section/CountInfoExtra.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 CountInfoExtra: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+export interface CountInfoExtraCompsProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+}
+export declare const CountInfoExtraComps: {
+    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraCompsProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/section/CountInfoExtra.js

@@ -1,11 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfoExtra = void 0;
+exports.CountInfoExtraComps = exports.CountInfoExtra = 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 = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 var CountInfoExtra = function CountInfoExtra(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Coun = _useSectionStore.CountInfoExtra,
@@ -14,4 +20,28 @@ var CountInfoExtra = function CountInfoExtra(props) {
   return null;
 };
 exports.CountInfoExtra = CountInfoExtra;
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+var CountInfoExtraComps = function CountInfoExtraComps(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {} : _props$value,
+    keyName = props.keyName,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  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, _excluded2);
+  if (!render && !reset.children) return null;
+  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.CountInfoExtraComps = CountInfoExtraComps;
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

package/cjs/section/Ellipsis.d.ts

@@ -1,6 +1,16 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const Ellipsis: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+export interface EllipsisCompProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+    isExpanded: boolean;
+}
+export declare const EllipsisComp: {
+    <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/section/Ellipsis.js

@@ -1,11 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Ellipsis = void 0;
+exports.EllipsisComp = 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 _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
 var Ellipsis = function Ellipsis(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Elli = _useSectionStore.Ellipsis,
@@ -14,4 +19,27 @@ var Ellipsis = function Ellipsis(props) {
   return null;
 };
 exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+var EllipsisComp = function EllipsisComp(_ref) {
+  var isExpanded = _ref.isExpanded,
+    value = _ref.value,
+    keyName = _ref.keyName;
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Ell = _useSectionStore2.Ellipsis,
+    Comp = _useSectionStore2$Ell === void 0 ? {} : _useSectionStore2$Ell;
+  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.EllipsisComp = EllipsisComp;
+EllipsisComp.displayName = 'JVR.EllipsisComp';

package/cjs/section/KeyName.d.ts

@@ -1,6 +1,13 @@
+import { type FC, type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
+type KeyNameCompProps = {
+    keyName: string | number;
+    value?: unknown;
+};
+export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
+export {};

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/{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: {