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

package/esm/comps/NestedOpen.js

@@ -1,34 +1,44 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { KayName } from './KeyValues';
-import { useExpandsStore, useExpandsDispatch } from '../store/Expands';
-import { useStore } from '../store';
-import { Copied } from './Copied';
-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";
+import { KayName } from "./KeyValues.js";
+import { useExpandsStore, useExpandsDispatch } from "../store/Expands.js";
+import { useStore } from "../store.js";
+import { Copied } from "./Copied.js";
+import { CountInfoExtraComps } from "../section/CountInfoExtra.js";
+import { CountInfoComp } from "../section/CountInfo.js";
+import { Arrow, BracketsOpen, BracketsClose } from "../symbol/index.js";
+import { EllipsisComp } from "../section/Ellipsis.js";
+import { SetComp, MapComp } from "../types/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var NestedOpen = props => {
   var _expands$expandKey;
   var {
     keyName,
     expandKey,
+    keys = [],
     initialValue,
     value,
+    parentValue,
     level
   } = props;
   var expands = useExpandsStore();
   var dispatchExpands = useExpandsDispatch();
   var {
     onExpand,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
-  var isArray = Array.isArray(value);
-  var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
-  var isObject = typeof value === 'object';
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value,
+    keys,
+    level,
+    keyName,
+    parentValue
+  });
+  if (expands[expandKey] === undefined && shouldExpandNodeInitially) {
+    isExpanded = !shouldExpand;
+  }
   var click = () => {
     var opt = {
       expand: !isExpanded,
@@ -50,6 +60,9 @@ export var NestedOpen = props => {
     transition: 'all 0.3s'
   };
   var len = Object.keys(value).length;
+  var isObject = typeof value === 'object';
+  var isArray = Array.isArray(value);
+  var isMySet = value instanceof Set;
   var showArrow = len !== 0 && (isArray || isMySet || isObject);
   var reset = {
     style
@@ -57,26 +70,32 @@ export var NestedOpen = props => {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
   return /*#__PURE__*/_jsxs("span", _extends({}, reset, {
-    children: [showArrow && /*#__PURE__*/_jsx(Arrow, {
+    children: [showArrow && /*#__PURE__*/_jsx(Arrow, _extends({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, _extends({}, compProps)), /*#__PURE__*/_jsx(SetComp, {
+      value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/_jsx(SetComp, {
-      value: initialValue
     }), /*#__PURE__*/_jsx(MapComp, {
-      value: initialValue
-    }), /*#__PURE__*/_jsx(BracketsOpen, {
+      value: initialValue,
+      keyName: keyName
+    }), /*#__PURE__*/_jsx(BracketsOpen, _extends({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(EllipsisComp, {
+    }, compProps)), /*#__PURE__*/_jsx(EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/_jsx(BracketsClose, {
+    }), /*#__PURE__*/_jsx(BracketsClose, _extends({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(CountInfoComp, {
+    }, compProps)), /*#__PURE__*/_jsx(CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/_jsx(CountInfoExtraComps, {
@@ -85,7 +104,9 @@ export var NestedOpen = props => {
     }), /*#__PURE__*/_jsx(Copied, {
       keyName: keyName,
       value: value,
-      expandKey: expandKey
+      expandKey: expandKey,
+      parentValue: parentValue,
+      keys: keys
     })]
   }));
 };

package/esm/comps/Value.d.ts

@@ -1,8 +1,8 @@
 export declare const isFloat: (n: number) => boolean;
 interface ValueProps {
-    value?: unknown;
+    value: unknown;
     keyName: string | number;
-    expandKey: string;
+    keys?: (string | number)[];
 }
 export declare const Value: {
     (props: ValueProps): import("react/jsx-runtime").JSX.Element | null;

package/esm/comps/Value.js

@@ -1,16 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from '../types';
+import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from "../types/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);
 export var Value = props => {
   var {
     value,
     keyName,
-    expandKey
+    keys
   } = props;
   var reset = {
     keyName,
-    expandKey
+    keys
   };
   if (value instanceof URL) {
     return /*#__PURE__*/_jsx(TypeUrl, _extends({}, reset, {

package/esm/comps/useIdCompat.d.ts

@@ -0,0 +1 @@
+export declare function useIdCompat(): string;

package/esm/comps/useIdCompat.js

@@ -0,0 +1,8 @@
+import { useRef } from 'react';
+export function useIdCompat() {
+  var idRef = useRef(null);
+  if (idRef.current === null) {
+    idRef.current = 'custom-id-' + Math.random().toString(36).substr(2, 9);
+  }
+  return idRef.current;
+}

package/esm/editor/KeyName.d.ts

@@ -0,0 +1,2 @@
+import { type 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.js";
+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,18 @@
+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,33 @@
+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 "../index.js";
+import { KeyNameRender } from "./KeyName.js";
+import { Context, Dispatch, useStoreReducer } from "./store.js";
+import { jsx as _jsx, 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,27 @@
+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;
+        parentName?: string | number;
+        type?: "value" | "key";
+    }) => boolean;
+}, 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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { BraceLeft } from './symbol/BraceLeft';
 import { BraceRight } from './symbol/BraceRight';
 import { BracketsLeft } from './symbol/BracketsLeft';
@@ -25,12 +24,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 './symbol';
+export * from './symbol/';
+export type ShouldExpandNodeInitially<T extends object> = (isExpanded: boolean, props: {
+    keyName?: string | number;
+    value?: T;
+    parentValue?: T;
+    keys: (number | string)[];
+    level: number;
+}) => boolean;
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
     /** This property contains your input JSON */
     value?: T;
@@ -46,12 +53,24 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     displayDataTypes?: boolean;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
     enableClipboard?: boolean;
-    /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
+    /**
+     * When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a specific depth. @default false
+     * collapsed takes precedence over shouldExpandNodeInitially.
+     * @see {@link shouldExpandNodeInitially} for more details on how the initial expansion works.
+     */
     collapsed?: boolean | number;
+    /**
+     * Determines whether the node should be expanded on the first render, or you can use collapsed to control the level of expansion (by default, the root is expanded).
+     * If both collapsed and shouldExpandNodeInitially are set, the value of collapsed takes precedence.
+     * @see {@link collapsed} for more details on how this works.
+     */
+    shouldExpandNodeInitially?: ShouldExpandNodeInitially<T>;
     /** 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;
+    /** When the text exceeds the length, `...` will be displayed. Currently, this `...` can be customized. @default "..." */
+    stringEllipsis?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;
@@ -61,6 +80,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     }) => void;
     /** Fires event when you copy */
     onCopied?: (text: string, value?: T) => void;
+    /** Transform the text before copying to clipboard */
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: T, parentValue?: T, expandKey?: string, keys?: (number | string)[]) => string;
 }
 type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     Bigint: typeof Bigint;
@@ -89,6 +110,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

@@ -1,58 +1,62 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied", "beforeCopy"];
 import { forwardRef } from 'react';
-import { Provider } from './store';
-import { Container } from './Container';
-import { BraceLeft } from './symbol/BraceLeft';
-import { BraceRight } from './symbol/BraceRight';
-import { BracketsLeft } from './symbol/BracketsLeft';
-import { BracketsRight } from './symbol/BracketsRight';
-import { Arrow } from './symbol/Arrow';
-import { Colon } from './symbol/Colon';
-import { Quote } from './symbol/Quote';
-import { ValueQuote } from './symbol/ValueQuote';
-import { Bigint } from './types/Bigint';
-import { Date } from './types/Date';
-import { False } from './types/False';
-import { Float } from './types/Float';
-import { Int } from './types/Int';
-import { Map } from './types/Map';
-import { Nan } from './types/Nan';
-import { Null } from './types/Null';
-import { Set } from './types/Set';
-import { StringText } from './types/String';
-import { True } from './types/True';
-import { Undefined } from './types/Undefined';
-import { Url } from './types/Url';
-import { Copied } from './section/Copied';
-import { CountInfo } from './section/CountInfo';
-import { CountInfoExtra } from './section/CountInfoExtra';
-import { Ellipsis } from './section/Ellipsis';
-import { KeyName } from './section/KeyName';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export * from './store';
-export * from './store/Expands';
-export * from './store/ShowTools';
-export * from './store/Symbols';
-export * from './store/Types';
-export * from './symbol';
+import { Provider } from "./store.js";
+import { Container } from "./Container.js";
+import { BraceLeft } from "./symbol/BraceLeft.js";
+import { BraceRight } from "./symbol/BraceRight.js";
+import { BracketsLeft } from "./symbol/BracketsLeft.js";
+import { BracketsRight } from "./symbol/BracketsRight.js";
+import { Arrow } from "./symbol/Arrow.js";
+import { Colon } from "./symbol/Colon.js";
+import { Quote } from "./symbol/Quote.js";
+import { ValueQuote } from "./symbol/ValueQuote.js";
+import { Bigint } from "./types/Bigint.js";
+import { Date } from "./types/Date.js";
+import { False } from "./types/False.js";
+import { Float } from "./types/Float.js";
+import { Int } from "./types/Int.js";
+import { Map } from "./types/Map.js";
+import { Nan } from "./types/Nan.js";
+import { Null } from "./types/Null.js";
+import { Set } from "./types/Set.js";
+import { StringText } from "./types/String.js";
+import { True } from "./types/True.js";
+import { Undefined } from "./types/Undefined.js";
+import { Url } from "./types/Url.js";
+import { Copied } from "./section/Copied.js";
+import { CountInfo } from "./section/CountInfo.js";
+import { CountInfoExtra } from "./section/CountInfoExtra.js";
+import { Ellipsis } from "./section/Ellipsis.js";
+import { KeyName } from "./section/KeyName.js";
+import { Row } from "./section/Row.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export * from "./store.js";
+export * from "./store/Expands.js";
+export * from "./store/ShowTools.js";
+export * from "./store/Symbols.js";
+export * from "./store/Types.js";
+export * from "./symbol/index.js";
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       className = '',
       style,
       value,
       children,
-      collapsed,
+      collapsed = false,
+      shouldExpandNodeInitially,
       indentWidth = 15,
       displayObjectSize = true,
-      shortenTextAfterLength = 20,
+      shortenTextAfterLength = 30,
+      stringEllipsis,
       highlightUpdates = true,
       enableClipboard = true,
       displayDataTypes = true,
       objectSortKeys = false,
-      onExpand
+      onExpand,
+      onCopied,
+      beforeCopy
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
   var defaultStyle = _extends({
@@ -68,12 +72,16 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       value,
       objectSortKeys,
       indentWidth,
+      shouldExpandNodeInitially: collapsed === false ? shouldExpandNodeInitially : undefined,
       displayObjectSize,
       collapsed,
       enableClipboard,
       shortenTextAfterLength,
+      stringEllipsis,
       highlightUpdates,
-      onExpand
+      onCopied,
+      onExpand,
+      beforeCopy
     },
     initialTypes: {
       displayDataTypes
@@ -113,5 +121,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,9 @@
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+export type CopiedSectionElement<T extends TagType = 'svg'> = SectionElement<T> & {
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: object, parentValue?: object, expandKey?: string, keys?: (number | string)[]) => string;
+};
 export declare const Copied: {
-    (props: SectionElement<TagType>): null;
+    <K extends TagType = "svg">(props: CopiedSectionElement<K>): null;
     displayName: string;
 };

package/esm/section/Copied.js

@@ -1,5 +1,5 @@
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 export var Copied = props => {
   var {
     Copied: Comp = {}

package/esm/section/CountInfo.d.ts

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

package/esm/section/CountInfo.js

@@ -2,9 +2,9 @@ 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 { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
+import { useStore } from "../store.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfo = props => {
   var {
@@ -36,7 +36,7 @@ export var CountInfoComp = props => {
   reset.style = _extends({}, reset.style, props.style);
   var len = Object.keys(value).length;
   if (!reset.children) {
-    reset.children = len + " items";
+    reset.children = len + " item" + (len === 1 ? '' : 's');
   }
   var elmProps = _extends({}, reset, other);
   var isRender = render && typeof render === 'function';

package/esm/section/CountInfoExtra.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement, type SectionElementProps } from '../store/Section';
 export declare const CountInfoExtra: {
@@ -10,6 +9,6 @@ export interface CountInfoExtraCompsProps<T extends object> {
     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;
+    <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

@@ -2,8 +2,8 @@ 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 { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfoExtra = props => {
   var {

package/esm/section/Ellipsis.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
 export declare const Ellipsis: {