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

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}

@@ -26,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,8 +26,7 @@ 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 value = _ref.value;
   var _useTypesStore = (0, _Types.useTypesStore)(),
@@ -104,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);
       };
     }
@@ -127,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
@@ -384,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,
@@ -553,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;
-TypeEmptyValue.displayName = 'JVR.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/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";
@@ -36,9 +36,9 @@ export var KeyValues = props => {
       var [b] = _ref2;
       return typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : 0;
     }) : entries.sort((_ref3, _ref4) => {
-      var [a] = _ref3;
-      var [b] = _ref4;
-      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b) : 0;
+      var [a, valA] = _ref3;
+      var [b, valB] = _ref4;
+      return typeof a === 'string' && typeof b === 'string' ? objectSortKeys(a, b, valA, valB) : 0;
     });
   }
   var style = {
@@ -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 => {
@@ -68,17 +69,17 @@ export var NestedOpen = props => {
       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,14 +30,14 @@ 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;
     /** Define the root node name. @default undefined */
     keyName?: string | number;
     /** Whether sort keys through `String.prototype.localeCompare()` @default false */
-    objectSortKeys?: boolean | ((a: string, b: string) => number);
+    objectSortKeys?: boolean | ((keyA: string, keyB: string, valueA: T, valueB: T) => number);
     /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */

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 = '',

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;
+};

package/esm/section/CountInfo.js

@@ -1,5 +1,11 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { useStore } from '../store';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfo = props => {
   var {
     CountInfo: Comp = {}
@@ -7,4 +13,40 @@ export var CountInfo = props => {
   useSectionRender(Comp, props, 'CountInfo');
   return null;
 };
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+export var CountInfoComp = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    displayObjectSize
+  } = useStore();
+  var {
+    CountInfo: Comp = {}
+  } = useSectionStore();
+  if (!displayObjectSize) return null;
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  var Elm = as || 'span';
+  reset.style = _extends({}, reset.style, props.style);
+  var len = Object.keys(value).length;
+  if (!reset.children) {
+    reset.children = len + " items";
+  }
+  var elmProps = _extends({}, reset, other);
+  var isRender = render && typeof render === 'function';
+  var child = isRender && render(_extends({}, elmProps, {
+    'data-length': len
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoComp.displayName = 'JVR.CountInfoComp';

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

@@ -1,5 +1,10 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfoExtra = props => {
   var {
     CountInfoExtra: Comp = {}
@@ -7,4 +12,30 @@ export var CountInfoExtra = props => {
   useSectionRender(Comp, props, 'CountInfoExtra');
   return null;
 };
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+export var CountInfoExtraComps = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    CountInfoExtra: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  if (!render && !reset.children) return null;
+  var Elm = as || 'span';
+  var isRender = render && typeof render === 'function';
+  var elmProps = _extends({}, reset, other);
+  var child = isRender && render(elmProps, {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = props => {
   var {
     Ellipsis: Comp = {}
@@ -7,4 +11,30 @@ export var Ellipsis = props => {
   useSectionRender(Comp, props, 'Ellipsis');
   return null;
 };
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+export var EllipsisComp = _ref => {
+  var {
+    isExpanded,
+    value,
+    keyName
+  } = _ref;
+  var {
+    Ellipsis: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    'data-expanded': isExpanded
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
+};
+EllipsisComp.displayName = 'JVR.EllipsisComp';

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

@@ -1,5 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyName = props => {
   var {
     KeyName: Comp = {}
@@ -7,4 +11,36 @@ export var KeyName = props => {
   useSectionRender(Comp, props, 'KeyName');
   return null;
 };
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+export var KeyNameComp = props => {
+  var {
+    children,
+    value,
+    keyName
+  } = props;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var {
+    KeyName: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  reset.style = _extends({}, reset.style, style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    children
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
+    children: children
+  }));
+};
+KeyNameComp.displayName = 'JVR.KeyNameComp';

package/{cjs/comps/ReRender/Symbols.d.ts → esm/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: {