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

package/cjs/index.d.ts

@@ -1,72 +1,94 @@
-import React from 'react';
-import type { SemicolonProps } from './semicolon';
-import type { ValueViewProps, TypeProps } from './value';
-import type { CopiedProps } from './copied';
-import type { EllipsisProps } from './comps/ellipsis';
-import type { MetaProps } from './comps/meta';
-import type { CountInfoExtraProps } from './editor/countInfoExtra';
-export * from './node';
-export * from './value';
-export * from './semicolon';
-export interface CountInfoProps {
-    count: number;
-    level: number;
-    visible: boolean;
-}
-interface RenderValueProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement> {
-    type: TypeProps['type'];
-    value?: unknown;
-    parentValue?: T;
-    data?: T;
-    visible?: boolean;
-    quotes?: JsonViewProps<T>['quotes'];
-    namespace?: Array<string | number>;
-    setValue?: React.Dispatch<React.SetStateAction<T>>;
-    keyName?: ValueViewProps<T>['keyName'];
-}
+/// <reference types="react" />
+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';
+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 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);
     /** Set the indent-width for nested objects @default 15 */
     indentWidth?: number;
-    /** When set to `true`, data type labels prefix values @default true */
-    displayDataTypes?: boolean;
     /** When set to `true`, `objects` and `arrays` are labeled with size @default true */
     displayObjectSize?: boolean;
-    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
-    shortenTextAfterLength?: number;
-    /** Define the root node name. @default undefined */
-    keyName?: string | number;
+    /** When set to `true`, data type labels prefix values @default true */
+    displayDataTypes?: boolean;
     /** The user can copy objects and arrays to clipboard by clicking on the clipboard icon. @default true */
     enableClipboard?: boolean;
-    /** Whether to highlight updates. @default true */
-    highlightUpdates?: boolean;
-    /** Whether sort keys through `String.prototype.localeCompare()` @default false */
-    objectSortKeys?: boolean | ((a: string, b: string) => number);
-    /** Display for quotes in object-key @default " */
-    quotes?: "'" | '"' | '';
     /** When set to true, all nodes will be collapsed by default. Use an integer value to collapse at a particular depth. @default false */
     collapsed?: boolean | number;
+    /** Whether to highlight updates. @default true */
+    highlightUpdates?: boolean;
+    /** Shorten long JSON strings, Set to `0` to disable this feature @default 20 */
+    shortenTextAfterLength?: number;
     /** Callback function for when a treeNode is expanded or collapsed */
     onExpand?: (props: {
         expand: boolean;
-        value: T;
+        value?: T;
         keyid: string;
         keyName?: string | number;
     }) => void;
     /** Fires event when you copy */
-    onCopied?: CopiedProps<T>['onCopied'];
-    /** Redefine interface elements to re-render. */
-    components?: {
-        braces?: MetaProps['render'];
-        ellipsis?: EllipsisProps['render'];
-        arrow?: JSX.Element;
-        objectKey?: SemicolonProps['render'];
-        value?: (props: RenderValueProps<T>) => JSX.Element;
-        copied?: CopiedProps<T>['render'];
-        countInfo?: (props: CountInfoProps) => JSX.Element;
-        countInfoExtra?: (props: Omit<CountInfoExtraProps<T>, 'editable'>) => JSX.Element;
-    };
+    onCopied?: (text: string, value?: T) => void;
 }
-declare const JsonView: React.ForwardRefExoticComponent<Omit<JsonViewProps<object>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
+    Bigint: typeof Bigint;
+    Date: typeof Date;
+    False: typeof False;
+    Float: typeof Float;
+    Int: typeof Int;
+    Map: typeof Map;
+    Nan: typeof Nan;
+    Null: typeof Null;
+    Set: typeof Set;
+    String: typeof StringText;
+    True: typeof True;
+    Undefined: typeof Undefined;
+    Url: typeof Url;
+    BraceLeft: typeof BraceLeft;
+    BraceRight: typeof BraceRight;
+    BracketsLeft: typeof BracketsLeft;
+    BracketsRight: typeof BracketsRight;
+    Colon: typeof Colon;
+    Ellipsis: typeof Ellipsis;
+    Quote: typeof Quote;
+    ValueQuote: typeof ValueQuote;
+    Arrow: typeof Arrow;
+    Copied: typeof Copied;
+    CountInfo: typeof CountInfo;
+    CountInfoExtra: typeof CountInfoExtra;
+    KeyName: typeof KeyName;
+};
+declare const JsonView: JsonViewComponent;
 export default JsonView;

package/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,50 +8,131 @@ var _exportNames = {};
 exports["default"] = void 0;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _node = require("./node");
-Object.keys(_node).forEach(function (key) {
+var _react = require("react");
+var _store = require("./store");
+Object.keys(_store).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _node[key]) return;
+  if (key in exports && exports[key] === _store[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _node[key];
+      return _store[key];
     }
   });
 });
+var _Container = require("./Container");
+var _BraceLeft = require("./symbol/BraceLeft");
+var _BraceRight = require("./symbol/BraceRight");
+var _BracketsLeft = require("./symbol/BracketsLeft");
+var _BracketsRight = require("./symbol/BracketsRight");
+var _Arrow = require("./symbol/Arrow");
+var _Colon = require("./symbol/Colon");
+var _Quote = require("./symbol/Quote");
+var _ValueQuote = require("./symbol/ValueQuote");
+var _Bigint = require("./types/Bigint");
+var _Date = require("./types/Date");
+var _False = require("./types/False");
+var _Float = require("./types/Float");
+var _Int = require("./types/Int");
+var _Map = require("./types/Map");
+var _Nan = require("./types/Nan");
+var _Null = require("./types/Null");
+var _Set = require("./types/Set");
+var _String = require("./types/String");
+var _True = require("./types/True");
+var _Undefined = require("./types/Undefined");
+var _Url = require("./types/Url");
+var _Copied = require("./section/Copied");
+var _CountInfo = require("./section/CountInfo");
+var _CountInfoExtra = require("./section/CountInfoExtra");
+var _Ellipsis = require("./section/Ellipsis");
+var _KeyName = require("./section/KeyName");
 var _jsxRuntime = require("react/jsx-runtime");
-var _value = require("./value");
-Object.keys(_value).forEach(function (key) {
+var _Expands = require("./store/Expands");
+Object.keys(_Expands).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _value[key]) return;
+  if (key in exports && exports[key] === _Expands[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _value[key];
+      return _Expands[key];
     }
   });
 });
-var _semicolon = require("./semicolon");
-Object.keys(_semicolon).forEach(function (key) {
+var _ShowTools = require("./store/ShowTools");
+Object.keys(_ShowTools).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _semicolon[key]) return;
+  if (key in exports && exports[key] === _ShowTools[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _semicolon[key];
+      return _ShowTools[key];
     }
   });
 });
-var _excluded = ["value", "style", "className"];
+var _Symbols = require("./store/Symbols");
+Object.keys(_Symbols).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Symbols[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Symbols[key];
+    }
+  });
+});
+var _Types = require("./store/Types");
+Object.keys(_Types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _Types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Types[key];
+    }
+  });
+});
+var _Symbols2 = require("./comps/ReRender/Symbols");
+Object.keys(_Symbols2).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;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _Symbols2[key];
+    }
+  });
+});
+var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var value = props.value,
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
     style = props.style,
-    className = props.className,
-    reset = (0, _objectWithoutProperties2["default"])(props, _excluded);
+    value = props.value,
+    children = props.children,
+    collapsed = props.collapsed,
+    _props$indentWidth = props.indentWidth,
+    indentWidth = _props$indentWidth === void 0 ? 15 : _props$indentWidth,
+    _props$displayObjectS = props.displayObjectSize,
+    displayObjectSize = _props$displayObjectS === void 0 ? true : _props$displayObjectS,
+    _props$shortenTextAft = props.shortenTextAfterLength,
+    shortenTextAfterLength = _props$shortenTextAft === void 0 ? 20 : _props$shortenTextAft,
+    _props$highlightUpdat = props.highlightUpdates,
+    highlightUpdates = _props$highlightUpdat === void 0 ? true : _props$highlightUpdat,
+    _props$enableClipboar = props.enableClipboard,
+    enableClipboard = _props$enableClipboar === void 0 ? true : _props$enableClipboar,
+    _props$displayDataTyp = props.displayDataTypes,
+    displayDataTypes = _props$displayDataTyp === void 0 ? true : _props$displayDataTyp,
+    _props$objectSortKeys = props.objectSortKeys,
+    objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
+    onExpand = props.onExpand,
+    elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var defaultStyle = (0, _objectSpread2["default"])({
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
@@ -61,16 +141,56 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv ".concat(className || '');
-  var keyid = (0, _react.useId)();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_node.RootNode, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: cls,
-    value: value
-  }, reset), {}, {
-    ref: ref,
-    keyid: keyid,
-    style: defaultStyle
-  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_store.Provider, {
+    initialState: {
+      value: value,
+      objectSortKeys: objectSortKeys,
+      indentWidth: indentWidth,
+      displayObjectSize: displayObjectSize,
+      collapsed: collapsed,
+      enableClipboard: enableClipboard,
+      shortenTextAfterLength: shortenTextAfterLength,
+      highlightUpdates: highlightUpdates,
+      onExpand: onExpand
+    },
+    initialTypes: {
+      displayDataTypes: displayDataTypes
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Container.Container, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
+      value: value
+    }, elmProps), {}, {
+      ref: ref,
+      className: cls,
+      style: defaultStyle
+    })), children]
+  });
 });
+JsonView.Bigint = _Bigint.Bigint;
+JsonView.Date = _Date.Date;
+JsonView.False = _False.False;
+JsonView.Float = _Float.Float;
+JsonView.Int = _Int.Int;
+JsonView.Map = _Map.Map;
+JsonView.Nan = _Nan.Nan;
+JsonView.Null = _Null.Null;
+JsonView.Set = _Set.Set;
+JsonView.String = _String.StringText;
+JsonView.True = _True.True;
+JsonView.Undefined = _Undefined.Undefined;
+JsonView.Url = _Url.Url;
+JsonView.ValueQuote = _ValueQuote.ValueQuote;
+JsonView.Arrow = _Arrow.Arrow;
+JsonView.Colon = _Colon.Colon;
+JsonView.Quote = _Quote.Quote;
+JsonView.Ellipsis = _Ellipsis.Ellipsis;
+JsonView.BraceLeft = _BraceLeft.BraceLeft;
+JsonView.BraceRight = _BraceRight.BraceRight;
+JsonView.BracketsLeft = _BracketsLeft.BracketsLeft;
+JsonView.BracketsRight = _BracketsRight.BracketsRight;
+JsonView.Copied = _Copied.Copied;
+JsonView.CountInfo = _CountInfo.CountInfo;
+JsonView.CountInfoExtra = _CountInfoExtra.CountInfoExtra;
+JsonView.KeyName = _KeyName.KeyName;
 JsonView.displayName = 'JVR.JsonView';
 var _default = JsonView;
 exports["default"] = _default;

package/cjs/section/Copied.d.ts

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

package/cjs/section/Copied.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Copied = void 0;
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var 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

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

package/cjs/section/CountInfo.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CountInfo = void 0;
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var 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';

package/cjs/section/CountInfoExtra.d.ts

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

package/cjs/section/CountInfoExtra.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CountInfoExtra = void 0;
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var 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';

package/cjs/section/Ellipsis.d.ts

@@ -0,0 +1,6 @@
+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;
+};

package/cjs/section/Ellipsis.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Ellipsis = void 0;
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var 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';

package/cjs/section/KeyName.d.ts

@@ -0,0 +1,6 @@
+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;
+};

package/cjs/section/KeyName.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.KeyName = void 0;
+var _Section = require("../store/Section");
+var _useRender = require("../utils/useRender");
+var KeyName = function KeyName(props) {
+  var _useSectionStore = (0, _Section.useSectionStore)(),
+    _useSectionStore$KeyN = _useSectionStore.KeyName,
+    Comp = _useSectionStore$KeyN === void 0 ? {} : _useSectionStore$KeyN;
+  (0, _useRender.useSectionRender)(Comp, props, 'KeyName');
+  return null;
+};
+exports.KeyName = KeyName;
+KeyName.displayName = 'JVR.KeyName';

package/cjs/store/Expands.d.ts

@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react';
+type InitialState = {
+    [key: string]: boolean;
+};
+type Dispatch = React.Dispatch<InitialState>;
+export declare const useExpandsStore: () => InitialState;
+export declare function useExpands(): [{
+    [x: string]: boolean;
+}, import("react").Dispatch<InitialState>];
+export declare function useExpandsDispatch(): Dispatch;
+interface ExpandsProps {
+    initial: InitialState;
+    dispatch: Dispatch;
+}
+export declare const Expands: FC<PropsWithChildren<ExpandsProps>>;
+export {};

package/cjs/store/Expands.js

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Expands = void 0;
+exports.useExpands = useExpands;
+exports.useExpandsDispatch = useExpandsDispatch;
+exports.useExpandsStore = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _react = require("react");
+var _jsxRuntime = require("react/jsx-runtime");
+var initialState = {};
+var Context = /*#__PURE__*/(0, _react.createContext)(initialState);
+var reducer = function reducer(state, action) {
+  return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, state), action);
+};
+var useExpandsStore = function useExpandsStore() {
+  return (0, _react.useContext)(Context);
+};
+exports.useExpandsStore = useExpandsStore;
+var DispatchExpands = /*#__PURE__*/(0, _react.createContext)(function () {});
+DispatchExpands.displayName = 'JVR.DispatchExpands';
+function useExpands() {
+  return (0, _react.useReducer)(reducer, initialState);
+}
+function useExpandsDispatch() {
+  return (0, _react.useContext)(DispatchExpands);
+}
+var Expands = function Expands(_ref) {
+  var initial = _ref.initial,
+    dispatch = _ref.dispatch,
+    children = _ref.children;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(DispatchExpands.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+exports.Expands = Expands;
+Expands.displayName = 'JVR.Expands';

package/cjs/store/Section.d.ts

@@ -0,0 +1,33 @@
+import React, { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+import { type TagType } from './Types';
+export type SectionElementProps<T extends TagType> = {
+    as?: T;
+    render?: (props: SectionElement<T>, result: {
+        value: unknown;
+        keyName: string | number;
+    }) => React.ReactNode;
+};
+export type SectionElement<T extends TagType> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
+type InitialState<T extends TagType> = {
+    Copied?: SectionElement<T>;
+    CountInfo?: SectionElement<T>;
+    CountInfoExtra?: SectionElement<T>;
+    Ellipsis?: SectionElement<T>;
+    KeyName?: SectionElement<T>;
+};
+type Dispatch = React.Dispatch<InitialState<TagType>>;
+export declare const useSectionStore: () => InitialState<TagType>;
+export declare function useSection(): [{
+    Copied?: SectionElement<TagType> | undefined;
+    CountInfo?: SectionElement<TagType> | undefined;
+    CountInfoExtra?: SectionElement<TagType> | undefined;
+    Ellipsis?: SectionElement<TagType> | undefined;
+    KeyName?: SectionElement<TagType> | undefined;
+}, React.Dispatch<InitialState<TagType>>];
+export declare function useSectionDispatch(): Dispatch;
+interface SectionProps {
+    initial: InitialState<TagType>;
+    dispatch: Dispatch;
+}
+export declare const Section: FC<PropsWithChildren<SectionProps>>;
+export {};