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

package/esm/section/Ellipsis.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = props => {
   var {
@@ -34,7 +34,7 @@ export var EllipsisComp = _ref => {
     keyName
   });
   if (child) return child;
-  if (!isExpanded) return null;
+  if (!isExpanded || typeof value === 'object' && Object.keys(value).length == 0) return null;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
 EllipsisComp.displayName = 'JVR.EllipsisComp';

package/esm/section/KeyName.d.ts

@@ -1,13 +1,14 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
-type KeyNameCompProps = {
-    keyName: string | number;
-    value?: unknown;
+export interface KeyNameCompProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement>, SectionElementResult<T> {
+}
+export declare const KeyNameComp: {
+    <T extends object>(props: PropsWithChildren<KeyNameCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
-export {};

package/esm/section/KeyName.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["as", "render"];
-import { useSectionStore } from '../store/Section';
-import { useSectionRender } from '../utils/useRender';
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyName = props => {
   var {
@@ -16,7 +16,9 @@ export var KeyNameComp = props => {
   var {
     children,
     value,
-    keyName
+    parentValue,
+    keyName,
+    keys
   } = props;
   var isNumber = typeof children === 'number';
   var style = {
@@ -36,7 +38,9 @@ export var KeyNameComp = props => {
     children
   }), {
     value,
-    keyName
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
   });
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {

package/esm/section/Row.d.ts

@@ -0,0 +1,13 @@
+import { type TagType } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
+export declare const Row: {
+    <K extends TagType>(props: SectionElement<K>): null;
+    displayName: string;
+};
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement>, SectionElementResult<T> {
+}
+export declare const RowComp: {
+    <T extends object>(props: React.PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};

package/esm/section/Row.js

@@ -0,0 +1,47 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
+  _excluded2 = ["as", "render", "children"];
+import { useSectionStore } from "../store/Section.js";
+import { useSectionRender } from "../utils/useRender.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var Row = props => {
+  var {
+    Row: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'Row');
+  return null;
+};
+Row.displayName = 'JVR.Row';
+export var RowComp = props => {
+  var {
+      children,
+      value,
+      parentValue,
+      keyName,
+      keys
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    Row: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  var Elm = as || 'div';
+  var child = render && typeof render === 'function' && render(_extends({}, other, reset, {
+    children
+  }), {
+    value,
+    keyName,
+    parentValue,
+    keys
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, other, reset, {
+    children: children
+  }));
+};
+RowComp.displayName = 'JVR.RowComp';

package/esm/store/Section.d.ts

@@ -1,18 +1,23 @@
 import React, { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
-export type SectionElementProps<T extends TagType> = {
+export interface SectionElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
+export type SectionElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SectionElement<T>, result: {
-        value: unknown;
-        keyName: string | number;
-    }) => React.ReactNode;
+    render?: (props: SectionElement<T>, result: SectionElementResult<object>) => React.ReactNode;
 };
-export type SectionElement<T extends TagType> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
+export type SectionElement<T extends TagType = 'span'> = SectionElementProps<T> & ComponentPropsWithoutRef<T>;
 type InitialState<T extends TagType> = {
     Copied?: SectionElement<T>;
     CountInfo?: SectionElement<T>;
     CountInfoExtra?: SectionElement<T>;
     Ellipsis?: SectionElement<T>;
+    Row?: SectionElement<T>;
     KeyName?: SectionElement<T>;
 };
 type Dispatch = React.Dispatch<InitialState<TagType>>;
@@ -22,6 +27,7 @@ export declare function useSection(): [{
     CountInfo?: SectionElement<TagType> | undefined;
     CountInfoExtra?: SectionElement<TagType> | undefined;
     Ellipsis?: SectionElement<TagType> | undefined;
+    Row?: SectionElement<TagType> | undefined;
     KeyName?: SectionElement<TagType> | undefined;
 }, React.Dispatch<InitialState<TagType>>];
 export declare function useSectionDispatch(): Dispatch;

package/esm/store/Section.js

@@ -38,6 +38,10 @@ var initialState = {
     className: 'w-rjv-ellipsis',
     children: '...'
   },
+  Row: {
+    as: 'div',
+    className: 'w-rjv-line'
+  },
   KeyName: {
     as: 'span',
     className: 'w-rjv-object-key'

package/esm/store/Symbols.d.ts

@@ -1,11 +1,18 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
-type SymbolsElementProps<T extends TagType> = {
+export interface SymbolsElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
+type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
     'data-type'?: string;
 };
-export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
+export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
 type InitialState<T extends ElementType = 'span'> = {
     Arrow?: SymbolsElement<T>;
     Colon?: SymbolsElement<T>;

package/esm/store/Symbols.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import { createContext, useContext, useReducer } from 'react';
-import { TriangleArrow } from '../arrow/TriangleArrow';
+import { TriangleArrow } from "../arrow/TriangleArrow.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 var initialState = {
   Arrow: {

package/esm/store/Types.d.ts

@@ -1,34 +1,36 @@
-import { FC, PropsWithChildren, ComponentPropsWithoutRef } from 'react';
+import { PropsWithChildren, ComponentPropsWithoutRef } from 'react';
 export type TagType = React.ElementType | keyof JSX.IntrinsicElements;
-type TypesElementProps<T extends TagType> = {
+type TypesElementProps<T extends TagType = 'span'> = {
     as?: T;
     render?: (props: TypesElement<T>, result: {
         type: 'type' | 'value';
         value?: unknown;
+        keyName: string | number;
+        keys?: (string | number)[];
     }) => React.ReactNode;
     'data-type'?: string;
 };
 export type TypesElement<T extends TagType> = TypesElementProps<T> & ComponentPropsWithoutRef<T>;
-export type InitialTypesState = {
+export type InitialTypesState<T extends TagType = 'span'> = {
     displayDataTypes?: boolean;
-    Url?: TypesElement<TagType>;
-    Str?: TypesElement<TagType>;
-    Undefined?: TypesElement<TagType>;
-    Null?: TypesElement<TagType>;
-    True?: TypesElement<TagType>;
-    False?: TypesElement<TagType>;
-    Date?: TypesElement<TagType>;
-    Float?: TypesElement<TagType>;
-    Set?: TypesElement<TagType>;
-    Int?: TypesElement<TagType>;
-    Map?: TypesElement<TagType>;
-    Nan?: TypesElement<TagType>;
-    Bigint?: TypesElement<TagType>;
+    Url?: TypesElement<T>;
+    Str?: TypesElement<T>;
+    Undefined?: TypesElement<T>;
+    Null?: TypesElement<T>;
+    True?: TypesElement<T>;
+    False?: TypesElement<T>;
+    Date?: TypesElement<T>;
+    Float?: TypesElement<T>;
+    Set?: TypesElement<T>;
+    Int?: TypesElement<T>;
+    Map?: TypesElement<T>;
+    Nan?: TypesElement<T>;
+    Bigint?: TypesElement<T>;
 };
-type Dispatch = React.Dispatch<InitialTypesState>;
-export declare const useTypesStore: () => InitialTypesState;
+type Dispatch<T extends TagType> = React.Dispatch<InitialTypesState<T>>;
+export declare const useTypesStore: () => InitialTypesState<TagType>;
 export declare function useTypes(): [{
-    displayDataTypes?: boolean | undefined;
+    displayDataTypes?: boolean;
     Url?: TypesElement<TagType> | undefined;
     Str?: TypesElement<TagType> | undefined;
     Undefined?: TypesElement<TagType> | undefined;
@@ -42,11 +44,14 @@ export declare function useTypes(): [{
     Map?: TypesElement<TagType> | undefined;
     Nan?: TypesElement<TagType> | undefined;
     Bigint?: TypesElement<TagType> | undefined;
-}, import("react").Dispatch<InitialTypesState>];
-export declare function useTypesDispatch(): Dispatch;
-interface TypesProps {
-    initial: InitialTypesState;
-    dispatch: Dispatch;
+}, import("react").Dispatch<InitialTypesState<TagType>>];
+export declare function useTypesDispatch(): Dispatch<TagType>;
+interface TypesProps<T extends TagType> {
+    initial: InitialTypesState<T>;
+    dispatch: Dispatch<TagType>;
+}
+export declare function Types<T extends TagType>({ initial, dispatch, children }: PropsWithChildren<TypesProps<T>>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Types {
+    var displayName: string;
 }
-export declare const Types: FC<PropsWithChildren<TypesProps>>;
 export {};

package/esm/store/Types.js

@@ -40,7 +40,8 @@ var initialState = {
   },
   Map: {
     style: {
-      color: 'var(--w-rjv-type-map-color, #268bd2)'
+      color: 'var(--w-rjv-type-map-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'map',
@@ -76,7 +77,8 @@ var initialState = {
   },
   Set: {
     style: {
-      color: 'var(--w-rjv-type-set-color, #268bd2)'
+      color: 'var(--w-rjv-type-set-color, #268bd2)',
+      marginRight: 3
     },
     as: 'span',
     'data-type': 'set',
@@ -133,7 +135,7 @@ export function useTypes() {
 export function useTypesDispatch() {
   return useContext(DispatchTypes);
 }
-export var Types = _ref => {
+export function Types(_ref) {
   var {
     initial,
     dispatch,
@@ -146,5 +148,5 @@ export var Types = _ref => {
       children: children
     })
   });
-};
+}
 Types.displayName = 'JVR.Types';

package/esm/store.d.ts

@@ -1,17 +1,20 @@
-import React, { PropsWithChildren } from 'react';
-import { JsonViewProps } from './';
-import { type InitialTypesState } from './store/Types';
+import React, { type PropsWithChildren } from 'react';
+import { type JsonViewProps } from './';
+import { type InitialTypesState, type TagType } from './store/Types';
 export type BlockTagType = keyof JSX.IntrinsicElements;
 export interface InitialState<T extends object> {
     value?: object;
     onExpand?: JsonViewProps<object>['onExpand'];
     onCopied?: JsonViewProps<object>['onCopied'];
+    beforeCopy?: JsonViewProps<T>['beforeCopy'];
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];
+    stringEllipsis?: JsonViewProps<T>['stringEllipsis'];
     enableClipboard?: JsonViewProps<T>['enableClipboard'];
     highlightUpdates?: JsonViewProps<T>['highlightUpdates'];
     collapsed?: JsonViewProps<T>['collapsed'];
+    shouldExpandNodeInitially?: JsonViewProps<T>['shouldExpandNodeInitially'];
     indentWidth?: number;
 }
 export declare const initialState: InitialState<object>;
@@ -20,10 +23,13 @@ export declare const Context: React.Context<InitialState<object>>;
 export declare function reducer(state: InitialState<object>, action: InitialState<object>): InitialState<object>;
 export declare const useStore: () => InitialState<object>;
 export declare const useDispatchStore: () => Dispatch;
-export interface ProviderProps {
+export interface ProviderProps<T extends TagType> {
     initialState?: InitialState<object>;
-    initialTypes?: InitialTypesState;
+    initialTypes?: InitialTypesState<T>;
 }
-export declare const Provider: React.FC<PropsWithChildren<ProviderProps>>;
+export declare const Provider: {
+    <T extends TagType>({ children, initialState: init, initialTypes, }: PropsWithChildren<ProviderProps<T>>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
 export declare function useDispatch(): Dispatch;
 export {};

package/esm/store.js

@@ -1,10 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { createContext, useContext, useEffect, useReducer } from 'react';
-import { useShowTools, ShowTools } from './store/ShowTools';
-import { useExpands, Expands } from './store/Expands';
-import { useTypes, Types } from './store/Types';
-import { useSymbols, Symbols } from './store/Symbols';
-import { useSection, Section } from './store/Section';
+import { useShowTools, ShowTools } from "./store/ShowTools.js";
+import { useExpands, Expands } from "./store/Expands.js";
+import { useTypes, Types } from "./store/Types.js";
+import { useSymbols, Symbols } from "./store/Symbols.js";
+import { useSection, Section } from "./store/Section.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var initialState = {
   objectSortKeys: false,

package/esm/symbol/Arrow.d.ts

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

package/esm/symbol/Arrow.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Arrow = props => {
   var {
     Arrow: Comp = {}

package/esm/symbol/BraceLeft.d.ts

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

package/esm/symbol/BraceLeft.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BraceLeft = props => {
   var {
     BraceLeft: Comp = {}

package/esm/symbol/BraceRight.d.ts

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

package/esm/symbol/BraceRight.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BraceRight = props => {
   var {
     BraceRight: Comp = {}

package/esm/symbol/BracketsLeft.d.ts

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

package/esm/symbol/BracketsLeft.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BracketsLeft = props => {
   var {
     BracketsLeft: Comp = {}

package/esm/symbol/BracketsRight.d.ts

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

package/esm/symbol/BracketsRight.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var BracketsRight = props => {
   var {
     BracketsRight: Comp = {}

package/esm/symbol/Colon.d.ts

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

package/esm/symbol/Colon.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Colon = props => {
   var {
     Colon: Comp = {}

package/esm/symbol/Quote.d.ts

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

package/esm/symbol/Quote.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var Quote = props => {
   var {
     Quote: Comp = {}

package/esm/symbol/ValueQuote.d.ts

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

package/esm/symbol/ValueQuote.js

@@ -1,5 +1,5 @@
-import { useSymbolsStore } from '../store/Symbols';
-import { useSymbolsRender } from '../utils/useRender';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useSymbolsRender } from "../utils/useRender.js";
 export var ValueQuote = props => {
   var {
     ValueQuote: Comp = {}

package/esm/symbol/index.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
-        isNumber?: boolean | undefined;
-    } & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <T extends object>(props: {
+        isNumber?: boolean;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -12,31 +11,27 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: {
-        as?: T | undefined;
-        render?: ((props: SymbolsElement<T>) => import("react").ReactNode) | undefined;
-        'data-type'?: string | undefined;
-    } & import("react").PropsWithoutRef<import("react").ComponentProps<T>> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
-        isBrackets?: boolean | undefined;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <K extends object>(props: {
+        isBrackets?: boolean;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-type BracketsCloseProps = {
+type BracketsProps = {
     isBrackets?: boolean;
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};