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

package/esm/index.d.ts

@@ -1,72 +1,92 @@
-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;
+    /** 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/esm/index.js

@@ -1,20 +1,60 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["value", "style", "className"];
-import React, { useId } from 'react';
+var _excluded = ["className", "style", "value", "children", "collapsed", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand"];
 import { forwardRef } from 'react';
-import { RootNode } from './node';
+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";
-export * from './node';
-export * from './value';
-export * from './semicolon';
+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 './comps/ReRender/Symbols';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
   var {
-      value,
+      className = '',
       style,
-      className
+      value,
+      children,
+      collapsed,
+      indentWidth = 15,
+      displayObjectSize = true,
+      shortenTextAfterLength = 20,
+      highlightUpdates = true,
+      enableClipboard = true,
+      displayDataTypes = true,
+      objectSortKeys = false,
+      onExpand
     } = props,
-    reset = _objectWithoutPropertiesLoose(props, _excluded);
+    elmProps = _objectWithoutPropertiesLoose(props, _excluded);
   var defaultStyle = _extends({
     lineHeight: 1.4,
     fontFamily: 'var(--w-rjv-font-family, Menlo, monospace)',
@@ -23,15 +63,55 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
     fontSize: 13
   }, style);
   var cls = "w-json-view-container w-rjv " + (className || '');
-  var keyid = useId();
-  return /*#__PURE__*/_jsx(RootNode, _extends({
-    className: cls,
-    value: value
-  }, reset, {
-    ref: ref,
-    keyid: keyid,
-    style: defaultStyle
-  }));
+  return /*#__PURE__*/_jsxs(Provider, {
+    initialState: {
+      value,
+      objectSortKeys,
+      indentWidth,
+      displayObjectSize,
+      collapsed,
+      enableClipboard,
+      shortenTextAfterLength,
+      highlightUpdates,
+      onExpand
+    },
+    initialTypes: {
+      displayDataTypes
+    },
+    children: [/*#__PURE__*/_jsx(Container, _extends({
+      value: value
+    }, elmProps, {
+      ref: ref,
+      className: cls,
+      style: defaultStyle
+    })), children]
+  });
 });
+JsonView.Bigint = Bigint;
+JsonView.Date = Date;
+JsonView.False = False;
+JsonView.Float = Float;
+JsonView.Int = Int;
+JsonView.Map = Map;
+JsonView.Nan = Nan;
+JsonView.Null = Null;
+JsonView.Set = Set;
+JsonView.String = StringText;
+JsonView.True = True;
+JsonView.Undefined = Undefined;
+JsonView.Url = Url;
+JsonView.ValueQuote = ValueQuote;
+JsonView.Arrow = Arrow;
+JsonView.Colon = Colon;
+JsonView.Quote = Quote;
+JsonView.Ellipsis = Ellipsis;
+JsonView.BraceLeft = BraceLeft;
+JsonView.BraceRight = BraceRight;
+JsonView.BracketsLeft = BracketsLeft;
+JsonView.BracketsRight = BracketsRight;
+JsonView.Copied = Copied;
+JsonView.CountInfo = CountInfo;
+JsonView.CountInfoExtra = CountInfoExtra;
+JsonView.KeyName = KeyName;
 JsonView.displayName = 'JVR.JsonView';
 export default JsonView;

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

@@ -0,0 +1,10 @@
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+export var Copied = props => {
+  var {
+    Copied: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'Copied');
+  return null;
+};
+Copied.displayName = 'JVR.Copied';

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

@@ -0,0 +1,10 @@
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+export var CountInfo = props => {
+  var {
+    CountInfo: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'CountInfo');
+  return null;
+};
+CountInfo.displayName = 'JVR.CountInfo';

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

@@ -0,0 +1,10 @@
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+export var CountInfoExtra = props => {
+  var {
+    CountInfoExtra: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'CountInfoExtra');
+  return null;
+};
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';

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

@@ -0,0 +1,10 @@
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+export var Ellipsis = props => {
+  var {
+    Ellipsis: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'Ellipsis');
+  return null;
+};
+Ellipsis.displayName = 'JVR.Ellipsis';

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

@@ -0,0 +1,10 @@
+import { useSectionStore } from '../store/Section';
+import { useSectionRender } from '../utils/useRender';
+export var KeyName = props => {
+  var {
+    KeyName: Comp = {}
+  } = useSectionStore();
+  useSectionRender(Comp, props, 'KeyName');
+  return null;
+};
+KeyName.displayName = 'JVR.KeyName';

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

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var initialState = {};
+var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var useExpandsStore = () => {
+  return useContext(Context);
+};
+var DispatchExpands = /*#__PURE__*/createContext(() => {});
+DispatchExpands.displayName = 'JVR.DispatchExpands';
+export function useExpands() {
+  return useReducer(reducer, initialState);
+}
+export function useExpandsDispatch() {
+  return useContext(DispatchExpands);
+}
+export var Expands = _ref => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/_jsx(DispatchExpands.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+Expands.displayName = 'JVR.Expands';

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

package/esm/store/Section.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { createContext, useContext, useReducer } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var initialState = {
+  Copied: {
+    className: 'w-rjv-copied',
+    style: {
+      height: '1em',
+      width: '1em',
+      cursor: 'pointer',
+      verticalAlign: 'middle',
+      marginLeft: 5
+    }
+  },
+  CountInfo: {
+    as: 'span',
+    className: 'w-rjv-object-size',
+    style: {
+      color: 'var(--w-rjv-info-color, #0000004d)',
+      paddingLeft: 8,
+      fontStyle: 'italic'
+    }
+  },
+  CountInfoExtra: {
+    as: 'span',
+    className: 'w-rjv-object-extra',
+    style: {
+      paddingLeft: 8
+    }
+  },
+  Ellipsis: {
+    as: 'span',
+    style: {
+      cursor: 'pointer',
+      color: 'var(--w-rjv-ellipsis-color, #cb4b16)',
+      userSelect: 'none'
+    },
+    className: 'w-rjv-ellipsis',
+    children: '...'
+  },
+  KeyName: {
+    as: 'span',
+    className: 'w-rjv-object-key'
+  }
+};
+var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var useSectionStore = () => {
+  return useContext(Context);
+};
+var DispatchSection = /*#__PURE__*/createContext(() => {});
+DispatchSection.displayName = 'JVR.DispatchSection';
+export function useSection() {
+  return useReducer(reducer, initialState);
+}
+export function useSectionDispatch() {
+  return useContext(DispatchSection);
+}
+export var Section = _ref => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/_jsx(DispatchSection.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+Section.displayName = 'JVR.Section';

package/esm/store/ShowTools.d.ts

@@ -0,0 +1,14 @@
+import { FC, PropsWithChildren } from 'react';
+type InitialState = Record<string, boolean>;
+type Dispatch = React.Dispatch<InitialState>;
+export declare const useShowToolsStore: () => InitialState;
+export declare function useShowTools(): [{
+    [x: string]: boolean;
+}, import("react").Dispatch<InitialState>];
+export declare function useShowToolsDispatch(): Dispatch;
+interface ShowToolsProps {
+    initial: InitialState;
+    dispatch: Dispatch;
+}
+export declare const ShowTools: FC<PropsWithChildren<ShowToolsProps>>;
+export {};

package/esm/store/ShowTools.js

@@ -0,0 +1,32 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { createContext, useContext, useReducer } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+var initialState = {};
+var Context = /*#__PURE__*/createContext(initialState);
+var reducer = (state, action) => _extends({}, state, action);
+export var useShowToolsStore = () => {
+  return useContext(Context);
+};
+var DispatchShowTools = /*#__PURE__*/createContext(() => {});
+DispatchShowTools.displayName = 'JVR.DispatchShowTools';
+export function useShowTools() {
+  return useReducer(reducer, initialState);
+}
+export function useShowToolsDispatch() {
+  return useContext(DispatchShowTools);
+}
+export var ShowTools = _ref => {
+  var {
+    initial,
+    dispatch,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(Context.Provider, {
+    value: initial,
+    children: /*#__PURE__*/_jsx(DispatchShowTools.Provider, {
+      value: dispatch,
+      children: children
+    })
+  });
+};
+ShowTools.displayName = 'JVR.ShowTools';

package/esm/store/Symbols.d.ts

@@ -0,0 +1,37 @@
+import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
+import { type TagType } from './Types';
+type SymbolsElementProps<T extends TagType> = {
+    as?: T;
+    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    'data-type'?: string;
+};
+export type SymbolsElement<T extends TagType> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;
+type InitialState<T extends ElementType = 'span'> = {
+    Arrow?: SymbolsElement<T>;
+    Colon?: SymbolsElement<T>;
+    Quote?: SymbolsElement<T>;
+    ValueQuote?: SymbolsElement<T>;
+    BracketsRight?: SymbolsElement<T>;
+    BracketsLeft?: SymbolsElement<T>;
+    BraceRight?: SymbolsElement<T>;
+    BraceLeft?: SymbolsElement<T>;
+};
+type Dispatch = React.Dispatch<InitialState<TagType>>;
+export declare const useSymbolsStore: () => InitialState<TagType>;
+export declare function useSymbols(): [{
+    Arrow?: SymbolsElement<TagType> | undefined;
+    Colon?: SymbolsElement<TagType> | undefined;
+    Quote?: SymbolsElement<TagType> | undefined;
+    ValueQuote?: SymbolsElement<TagType> | undefined;
+    BracketsRight?: SymbolsElement<TagType> | undefined;
+    BracketsLeft?: SymbolsElement<TagType> | undefined;
+    BraceRight?: SymbolsElement<TagType> | undefined;
+    BraceLeft?: SymbolsElement<TagType> | undefined;
+}, import("react").Dispatch<InitialState<TagType>>];
+export declare function useSymbolsDispatch(): Dispatch;
+interface SymbolsProps {
+    initial: InitialState<TagType>;
+    dispatch: Dispatch;
+}
+export declare const Symbols: FC<PropsWithChildren<SymbolsProps>>;
+export {};