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

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/Copied.js

@@ -27,18 +27,21 @@ export var Copied = props => {
   if (enableClipboard === false || !isShowTools) return null;
   var click = event => {
     event.stopPropagation();
-    var copyText = JSON.stringify(value, (key, value) => {
-      if (typeof value === 'bigint') {
-        return value.toString();
-      }
-      return value;
-    }, 2);
-    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
-    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
-    if (typeof value === 'bigint') copyText = value + 'n';
+    var copyText = '';
+    if (typeof value === 'number' && value === Infinity) {
+      copyText = 'Infinity';
+    } else if (typeof value === 'number' && isNaN(value)) {
+      copyText = 'NaN';
+    } else if (typeof value === 'bigint') {
+      copyText = value + 'n';
+    } else if (value instanceof Date) {
+      copyText = value.toLocaleString();
+    } else {
+      copyText = JSON.stringify(value, null, 2);
+    }
+    onCopied && onCopied(copyText, value);
+    setCopied(true);
     navigator.clipboard.writeText(copyText).then(() => {
-      onCopied && onCopied(copyText, value);
-      setCopied(true);
       var timer = setTimeout(() => {
         setCopied(false);
         clearTimeout(timer);

package/esm/comps/KeyValues.js

@@ -4,9 +4,10 @@ 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 { RowComp } from '../section/Row';
 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 +37,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 = {
@@ -64,6 +65,7 @@ KeyValues.displayName = 'JVR.KeyValues';
 export var KayName = props => {
   var {
     keyName,
+    parentValue,
     value
   } = props;
   var {
@@ -80,13 +82,16 @@ 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,
+        parentValue: parentValue,
         children: keyName
       }), /*#__PURE__*/_jsx(Quote, {
-        isNumber: isNumber
+        isNumber: isNumber,
+        "data-placement": "right"
       })]
     }), /*#__PURE__*/_jsx(Colon, {})]
   });
@@ -126,12 +131,16 @@ export var KeyValuesItem = props => {
       [subkeyid]: false
     })
   };
-  return /*#__PURE__*/_jsxs("div", _extends({
-    className: "w-rjv-line"
+  return /*#__PURE__*/_jsxs(RowComp, _extends({
+    className: "w-rjv-line",
+    value: value,
+    keyName: keyName,
+    parentValue: parentValue
   }, reset, {
     children: [/*#__PURE__*/_jsx(KayName, {
       keyName: keyName,
-      value: value
+      value: value,
+      parentValue: parentValue
     }), /*#__PURE__*/_jsx(Value, {
       keyName: keyName,
       value: value,

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,24 @@ export var NestedOpen = props => {
     }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
-      isSet: initialValue instanceof Set
+      value: initialValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(MapComp, {
-      isMap: initialValue instanceof Map
+      value: initialValue,
+      keyName: keyName
     }), /*#__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/editor/KeyName.d.ts

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

package/esm/editor/KeyName.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children"],
+  _excluded2 = ["value", "parentValue", "keyName"];
+import { useRef, useState } from 'react';
+import { useStore } from './store';
+import { jsx as _jsx } from "react/jsx-runtime";
+export var KeyNameRender = (_ref, _ref2) => {
+  var {
+      children
+    } = _ref,
+    reset = _objectWithoutPropertiesLoose(_ref, _excluded);
+  var {
+    value,
+    parentValue,
+    keyName
+  } = _ref2;
+  if (typeof children === 'number') {
+    return /*#__PURE__*/_jsx("span", _extends({}, reset, {
+      children: children
+    }));
+  }
+  return /*#__PURE__*/_jsx(Child, _extends({}, reset, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    children: children
+  }));
+};
+var Child = props => {
+  var {
+      value,
+      keyName
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded2);
+  var $dom = useRef(null);
+  var [currentValue, setCurrentValue] = useState(props.children);
+  var {
+    onEdit
+  } = useStore();
+  var onKeyDown = evn => {
+    if (evn.key === 'Enter') {
+      var _$dom$current;
+      (_$dom$current = $dom.current) == null || _$dom$current.setAttribute('contentEditable', 'false');
+    }
+  };
+  var onClick = evn => {
+    var _$dom$current2, _$dom$current3;
+    evn.stopPropagation();
+    (_$dom$current2 = $dom.current) == null || _$dom$current2.setAttribute('contentEditable', 'true');
+    (_$dom$current3 = $dom.current) == null || _$dom$current3.focus();
+  };
+  var onBlur = evn => {
+    var _$dom$current4;
+    (_$dom$current4 = $dom.current) == null || _$dom$current4.setAttribute('contentEditable', 'false');
+    var callback = onEdit && onEdit({
+      value: evn.target.textContent,
+      oldValue: value,
+      keyName
+    });
+    if (callback) {
+      setCurrentValue(evn.target.textContent);
+    }
+  };
+  var spanProps = _extends({}, reset, {
+    onKeyDown,
+    onClick,
+    onBlur,
+    spellCheck: false,
+    contentEditable: 'false',
+    suppressContentEditableWarning: true,
+    children: currentValue
+  });
+  return /*#__PURE__*/_jsx("span", _extends({}, spanProps, {
+    ref: $dom
+  }));
+};

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

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "onEdit", "editable"];
+import { forwardRef } from 'react';
+import JsonView from '../';
+import { KeyNameRender } from './KeyName';
+import { Context, Dispatch, useStoreReducer } from './store';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var JsonViewEditor = /*#__PURE__*/forwardRef((props, ref) => {
+  var {
+      children,
+      onEdit,
+      editable = true
+    } = props,
+    reset = _objectWithoutPropertiesLoose(props, _excluded);
+  var [state, dispatch] = useStoreReducer({
+    onEdit
+  });
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: state,
+    children: /*#__PURE__*/_jsx(Dispatch.Provider, {
+      value: dispatch,
+      children: /*#__PURE__*/_jsxs(JsonView, _extends({}, reset, {
+        shortenTextAfterLength: 0,
+        ref: ref,
+        children: [editable && /*#__PURE__*/_jsx(JsonView.KeyName, {
+          render: KeyNameRender
+        }), children]
+      }))
+    })
+  });
+});
+export default JsonViewEditor;

package/esm/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/esm/editor/store.js

@@ -0,0 +1,13 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+var initialState = {};
+export var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var Dispatch = /*#__PURE__*/createContext(() => {});
+Dispatch.displayName = 'JVR.Editor.Dispatch';
+export var useStore = () => {
+  return useContext(Context);
+};
+export function useStoreReducer(initialState) {
+  return useReducer(reducer, initialState);
+}

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

@@ -30,6 +30,7 @@ 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';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export * from './store';
@@ -37,7 +38,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 = '',
@@ -47,7 +48,7 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       collapsed,
       indentWidth = 15,
       displayObjectSize = true,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
       highlightUpdates = true,
       enableClipboard = true,
       displayDataTypes = true,
@@ -62,7 +63,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,
@@ -113,5 +114,6 @@ JsonView.Copied = Copied;
 JsonView.CountInfo = CountInfo;
 JsonView.CountInfoExtra = CountInfoExtra;
 JsonView.KeyName = KeyName;
+JsonView.Row = Row;
 JsonView.displayName = 'JVR.JsonView';
 export default JsonView;

package/esm/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/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: {
+    <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/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, 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/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;
+};