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

package/cjs/comps/Value.js

@@ -6,13 +6,12 @@ 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) {
+var isFloat = exports.isFloat = function isFloat(n) {
   return Number(n) === n && n % 1 !== 0 || isNaN(n);
 };
-exports.isFloat = isFloat;
-var Value = function Value(props) {
+var Value = exports.Value = function Value(props) {
   var value = props.value,
     keyName = props.keyName,
     expandKey = props.expandKey;
@@ -21,58 +20,57 @@ 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
     }));
   }
   return null;
 };
-exports.Value = Value;
 Value.displayName = 'JVR.Value';

package/cjs/editor/KeyName.d.ts

@@ -0,0 +1,2 @@
+import { SectionElementProps } from '../store/Section';
+export declare const KeyNameRender: SectionElementProps['render'];

package/cjs/editor/KeyName.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyNameRender = 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 _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children"],
+  _excluded2 = ["value", "parentValue", "keyName"];
+var KeyNameRender = exports.KeyNameRender = function KeyNameRender(_ref, _ref2) {
+  var children = _ref.children,
+    reset = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var value = _ref2.value,
+    parentValue = _ref2.parentValue,
+    keyName = _ref2.keyName;
+  if (typeof children === 'number') {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Child, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    children: children
+  }));
+};
+var Child = function Child(props) {
+  var value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded2);
+  var $dom = (0, _react.useRef)(null);
+  var _useState = (0, _react.useState)(props.children),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    currentValue = _useState2[0],
+    setCurrentValue = _useState2[1];
+  var _useStore = (0, _store.useStore)(),
+    onEdit = _useStore.onEdit;
+  var onKeyDown = function onKeyDown(evn) {
+    if (evn.key === 'Enter') {
+      var _$dom$current;
+      (_$dom$current = $dom.current) === null || _$dom$current === void 0 || _$dom$current.setAttribute('contentEditable', 'false');
+    }
+  };
+  var onClick = function onClick(evn) {
+    var _$dom$current2, _$dom$current3;
+    evn.stopPropagation();
+    (_$dom$current2 = $dom.current) === null || _$dom$current2 === void 0 || _$dom$current2.setAttribute('contentEditable', 'true');
+    (_$dom$current3 = $dom.current) === null || _$dom$current3 === void 0 || _$dom$current3.focus();
+  };
+  var onBlur = function onBlur(evn) {
+    var _$dom$current4;
+    (_$dom$current4 = $dom.current) === null || _$dom$current4 === void 0 || _$dom$current4.setAttribute('contentEditable', 'false');
+    var callback = onEdit && onEdit({
+      value: evn.target.textContent,
+      oldValue: value,
+      keyName: keyName
+    });
+    if (callback) {
+      setCurrentValue(evn.target.textContent);
+    }
+  };
+  var spanProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    onKeyDown: onKeyDown,
+    onClick: onClick,
+    onBlur: onBlur,
+    spellCheck: false,
+    contentEditable: 'false',
+    suppressContentEditableWarning: true,
+    children: currentValue
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, spanProps), {}, {
+    ref: $dom
+  }));
+};

package/cjs/editor/index.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { type JsonViewProps } from '../';
+export interface JsonViewEditorProps<T extends object> extends Omit<JsonViewProps<T>, 'shortenTextAfterLength'> {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+    /** Whether enable edit feature. @default true */
+    editable?: boolean;
+}
+declare const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export default JsonViewEditor;

package/cjs/editor/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = 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 _ = _interopRequireDefault(require("../"));
+var _KeyName = require("./KeyName");
+var _store = require("./store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["children", "onEdit", "editable"];
+var JsonViewEditor = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var children = props.children,
+    onEdit = props.onEdit,
+    _props$editable = props.editable,
+    editable = _props$editable === void 0 ? true : _props$editable,
+    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  var _useStoreReducer = (0, _store.useStoreReducer)({
+      onEdit: onEdit
+    }),
+    _useStoreReducer2 = (0, _slicedToArray2["default"])(_useStoreReducer, 2),
+    state = _useStoreReducer2[0],
+    dispatch = _useStoreReducer2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.Context.Provider, {
+    value: state,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_store.Dispatch.Provider, {
+      value: dispatch,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_["default"], (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+        shortenTextAfterLength: 0,
+        ref: ref,
+        children: [editable && /*#__PURE__*/(0, _jsxRuntime.jsx)(_["default"].KeyName, {
+          render: _KeyName.KeyNameRender
+        }), children]
+      }))
+    })
+  });
+});
+var _default = exports["default"] = JsonViewEditor;
+module.exports = exports.default;

package/cjs/editor/store.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+type InitialState = {
+    /**
+     * When a callback function is passed in, edit functionality is enabled. The callback is invoked before edits are completed.
+     * @returns {boolean}  Returning false from onEdit will prevent the change from being made.
+     */
+    onEdit?: (option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number;
+        parentName?: string | number;
+        type?: 'value' | 'key';
+    }) => boolean;
+};
+type Dispatch = React.Dispatch<InitialState>;
+export declare const Context: import("react").Context<InitialState>;
+export declare const Dispatch: import("react").Context<Dispatch>;
+export declare const useStore: () => InitialState;
+export declare function useStoreReducer(initialState: InitialState): [{
+    onEdit?: ((option: {
+        value: unknown;
+        oldValue: unknown;
+        keyName?: string | number | undefined;
+        parentName?: string | number | undefined;
+        type?: "value" | "key" | undefined;
+    }) => boolean) | undefined;
+}, import("react").Dispatch<InitialState>];
+export {};

package/cjs/editor/store.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useStore = exports.Dispatch = exports.Context = void 0;
+exports.useStoreReducer = useStoreReducer;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var initialState = {};
+var Context = exports.Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var Dispatch = exports.Dispatch = /*#__PURE__*/(0, _react.createContext)(function () {});
+Dispatch.displayName = 'JVR.Editor.Dispatch';
+var useStore = exports.useStore = function useStore() {
+  return (0, _react.useContext)(Context);
+};
+function useStoreReducer(initialState) {
+  return (0, _react.useReducer)(reducer, initialState);
+}

package/cjs/index.d.ts

@@ -25,19 +25,20 @@ import { CountInfo } from './section/CountInfo';
 import { CountInfoExtra } from './section/CountInfoExtra';
 import { Ellipsis } from './section/Ellipsis';
 import { KeyName } from './section/KeyName';
+import { Row } from './section/Row';
 export * from './store';
 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 */
@@ -50,7 +51,7 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     collapsed?: boolean | number;
     /** Whether to highlight updates. @default true */
     highlightUpdates?: boolean;
-    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 30 */
     shortenTextAfterLength?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
@@ -89,6 +90,7 @@ type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     CountInfo: typeof CountInfo;
     CountInfoExtra: typeof CountInfoExtra;
     KeyName: typeof KeyName;
+    Row: typeof Row;
 };
 declare const JsonView: JsonViewComponent;
 export default JsonView;

package/cjs/index.js

@@ -48,6 +48,7 @@ var _CountInfo = require("./section/CountInfo");
 var _CountInfoExtra = require("./section/CountInfoExtra");
 var _Ellipsis = require("./section/Ellipsis");
 var _KeyName = require("./section/KeyName");
+var _Row = require("./section/Row");
 var _jsxRuntime = require("react/jsx-runtime");
 var _Expands = require("./store/Expands");
 Object.keys(_Expands).forEach(function (key) {
@@ -97,15 +98,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];
     }
   });
 });
@@ -122,7 +123,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _props$displayObjectS = props.displayObjectSize,
     displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
     _props$shortenTextAft = props.shortenTextAfterLength,
-    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 30 : _props$shortenTextAft,
     _props$highlightUpdat = props.highlightUpdates,
     highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
     _props$enableClipboar = props.enableClipboard,
@@ -140,7 +141,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     backgroundColor: 'var(--w-rjv-background-color, #00000000)',
     fontSize: 13
   }, style);
-  var cls = "w-json-view-container w-rjv ".concat(className || '');
+  var cls = ['w-json-view-container', 'w-rjv', className].filter(Boolean).join(' ');
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_store.Provider, {
     initialState: {
       value: value,
@@ -191,6 +192,6 @@ JsonView.Copied = _Copied.Copied;
 JsonView.CountInfo = _CountInfo.CountInfo;
 JsonView.CountInfoExtra = _CountInfoExtra.CountInfoExtra;
 JsonView.KeyName = _KeyName.KeyName;
+JsonView.Row = _Row.Row;
 JsonView.displayName = 'JVR.JsonView';
-var _default = JsonView;
-exports["default"] = _default;
+var _default = exports["default"] = JsonView;

package/cjs/section/Copied.d.ts

@@ -1,6 +1,6 @@
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const Copied: {
-    (props: SectionElement<TagType>): null;
+    <K extends TagType = "svg">(props: SectionElement<K>): null;
     displayName: string;
 };

package/cjs/section/Copied.js

@@ -6,12 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.Copied = void 0;
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
-var Copied = function Copied(props) {
+var Copied = exports.Copied = function Copied(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Copi = _useSectionStore.Copied,
     Comp = _useSectionStore$Copi === void 0 ? {} : _useSectionStore$Copi;
   (0, _useRender.useSectionRender)(Comp, props, 'Copied');
   return null;
 };
-exports.Copied = Copied;
 Copied.displayName = 'JVR.Copied';

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: {
+    <K extends TagType, T extends object>(props: SectionElementProps<K> & 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,17 +1,55 @@
 "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 CountInfo = function CountInfo(props) {
+var _store = require("../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
+var CountInfo = exports.CountInfo = function CountInfo(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Coun = _useSectionStore.CountInfo,
     Comp = _useSectionStore$Coun === void 0 ? {} : _useSectionStore$Coun;
   (0, _useRender.useSectionRender)(Comp, props, 'CountInfo');
   return null;
 };
-exports.CountInfo = CountInfo;
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+var CountInfoComp = exports.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));
+};
+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, K extends TagType>(props: SectionElementProps<K> & CountInfoExtraCompsProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

package/cjs/section/CountInfoExtra.js

@@ -1,17 +1,45 @@
 "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 CountInfoExtra = function CountInfoExtra(props) {
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
+var CountInfoExtra = exports.CountInfoExtra = function CountInfoExtra(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Coun = _useSectionStore.CountInfoExtra,
     Comp = _useSectionStore$Coun === void 0 ? {} : _useSectionStore$Coun;
   (0, _useRender.useSectionRender)(Comp, props, 'CountInfoExtra');
   return null;
 };
-exports.CountInfoExtra = CountInfoExtra;
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+var CountInfoExtraComps = exports.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));
+};
+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,17 +1,43 @@
 "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 Ellipsis = function Ellipsis(props) {
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
+var Ellipsis = exports.Ellipsis = function Ellipsis(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Elli = _useSectionStore.Ellipsis,
     Comp = _useSectionStore$Elli === void 0 ? {} : _useSectionStore$Elli;
   (0, _useRender.useSectionRender)(Comp, props, 'Ellipsis');
   return null;
 };
-exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+var EllipsisComp = exports.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));
+};
+EllipsisComp.displayName = 'JVR.EllipsisComp';

package/cjs/section/KeyName.d.ts

@@ -1,6 +1,14 @@
+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;
+    parentValue?: unknown;
+};
+export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
+export {};