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

package/esm/theme/gruvbox.js

@@ -1,6 +1,7 @@
 export var gruvboxTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#3c3836',
+  '--w-rjv-key-string': '#3c3836',
   '--w-rjv-background-color': '#fbf1c7',
   '--w-rjv-line-color': '#ebdbb2',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
@@ -12,6 +13,8 @@ export var gruvboxTheme = {
   '--w-rjv-curlybraces-color': '#236a7c',
   '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#3c3836',
   '--w-rjv-type-int-color': '#8f3f71',
   '--w-rjv-type-float-color': '#8f3f71',

package/esm/theme/light.js

@@ -1,6 +1,7 @@
 export var lightTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#002b36',
+  '--w-rjv-key-string': '#002b36',
   '--w-rjv-background-color': '#ffffff',
   '--w-rjv-line-color': '#ebebeb',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
@@ -12,6 +13,8 @@ export var lightTheme = {
   '--w-rjv-curlybraces-color': '#236a7c',
   '--w-rjv-colon-color': '#002b36',
   '--w-rjv-brackets-color': '#236a7c',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#cb4b16',
   '--w-rjv-type-int-color': '#268bd2',
   '--w-rjv-type-float-color': '#859900',

package/esm/theme/monokai.js

@@ -1,6 +1,7 @@
 export var monokaiTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#E6DB74',
+  '--w-rjv-key-string': '#E6DB74',
   '--w-rjv-background-color': '#272822',
   '--w-rjv-line-color': '#3e3d32',
   '--w-rjv-arrow-color': '#f8f8f2',
@@ -12,6 +13,8 @@ export var monokaiTheme = {
   '--w-rjv-curlybraces-color': '#f8f8f2',
   '--w-rjv-colon-color': '#f8f8f2',
   '--w-rjv-brackets-color': '#f8f8f2',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#E6DB74',
   '--w-rjv-type-int-color': '#AE81FF',
   '--w-rjv-type-float-color': '#AE81FF',

package/esm/theme/nord.js

@@ -1,6 +1,7 @@
 export var nordTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#88c0d0',
+  '--w-rjv-key-string': '#88c0d0',
   '--w-rjv-background-color': '#2e3440',
   '--w-rjv-line-color': '#4c566a',
   '--w-rjv-arrow-color': 'var(--w-rjv-color)',
@@ -12,6 +13,8 @@ export var nordTheme = {
   '--w-rjv-curlybraces-color': '#8fbcbb',
   '--w-rjv-colon-color': '#6d9fac',
   '--w-rjv-brackets-color': '#8fbcbb',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#a3be8c',
   '--w-rjv-type-int-color': '#b48ead',
   '--w-rjv-type-float-color': '#859900',

package/esm/theme/vscode.js

@@ -1,6 +1,7 @@
 export var vscodeTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#9cdcfe',
+  '--w-rjv-key-string': '#9cdcfe',
   '--w-rjv-background-color': '#1e1e1e',
   '--w-rjv-line-color': '#36334280',
   '--w-rjv-arrow-color': '#838383',
@@ -12,6 +13,8 @@ export var vscodeTheme = {
   '--w-rjv-curlybraces-color': '#d4d4d4',
   '--w-rjv-colon-color': '#d4d4d4',
   '--w-rjv-brackets-color': '#d4d4d4',
+  '--w-rjv-quotes-color': 'var(--w-rjv-key-string)',
+  '--w-rjv-quotes-string-color': 'var(--w-rjv-type-string-color)',
   '--w-rjv-type-string-color': '#ce9178',
   '--w-rjv-type-int-color': '#b5cea8',
   '--w-rjv-type-float-color': '#b5cea8',

package/esm/type.d.ts

@@ -0,0 +1,50 @@
+export declare const typeMap: {
+    string: {
+        color: string;
+        label: string;
+    };
+    number: {
+        color: string;
+        label: string;
+    };
+    float: {
+        color: string;
+        label: string;
+    };
+    bigint: {
+        color: string;
+        label: string;
+    };
+    boolean: {
+        color: string;
+        label: string;
+    };
+    date: {
+        color: string;
+        label: string;
+    };
+    url: {
+        color: string;
+        label: string;
+    };
+    null: {
+        color: string;
+        label: string;
+    };
+    NaN: {
+        color: string;
+        label: string;
+    };
+    undefined: {
+        color: string;
+        label: string;
+    };
+    Set: {
+        color: string;
+        label: string;
+    };
+    Map: {
+        color: string;
+        label: string;
+    };
+};

package/esm/type.js

@@ -0,0 +1,50 @@
+export var typeMap = {
+  string: {
+    color: 'var(--w-rjv-type-string-color, #cb4b16)',
+    label: 'string'
+  },
+  number: {
+    color: 'var(--w-rjv-type-int-color, #268bd2)',
+    label: 'int'
+  },
+  float: {
+    color: 'var(--w-rjv-type-float-color, #859900)',
+    label: 'float'
+  },
+  bigint: {
+    color: 'var(--w-rjv-type-bigint-color, #268bd2)',
+    label: 'bigint'
+  },
+  boolean: {
+    color: 'var(--w-rjv-type-boolean-color, #2aa198)',
+    label: 'bool'
+  },
+  date: {
+    color: 'var(--w-rjv-type-date-color, #586e75)',
+    label: 'date'
+  },
+  url: {
+    color: 'var(--w-rjv-type-url-color, #0969da)',
+    label: 'url'
+  },
+  null: {
+    color: 'var(--w-rjv-type-null-color, #d33682)',
+    label: 'null'
+  },
+  NaN: {
+    color: 'var(--w-rjv-type-nan-color, #859900)',
+    label: 'NaN'
+  },
+  undefined: {
+    color: 'var(--w-rjv-type-undefined-color, #586e75)',
+    label: 'undefined'
+  },
+  Set: {
+    color: 'var(--w-rjv-type-set-color, #268bd2)',
+    label: 'Set'
+  },
+  Map: {
+    color: 'var(--w-rjv-type-map-color, #268bd2)',
+    label: 'Map'
+  }
+};

package/esm/types/Bigint.d.ts

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

package/esm/types/Bigint.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Bigint = props => {
+  var {
+    Bigint: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Bigint');
+  return null;
+};
+Bigint.displayName = 'JVR.Bigint';

package/esm/types/Date.d.ts

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

package/esm/types/Date.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Date = props => {
+  var {
+    Date: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Date');
+  return null;
+};
+Date.displayName = 'JVR.Date';

package/esm/types/False.d.ts

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

package/esm/types/False.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var False = props => {
+  var {
+    False: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'False');
+  return null;
+};
+False.displayName = 'JVR.False';

package/esm/types/Float.d.ts

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

package/esm/types/Float.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Float = props => {
+  var {
+    Float: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Float');
+  return null;
+};
+Float.displayName = 'JVR.Float';

package/esm/types/Int.d.ts

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

package/esm/types/Int.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Int = props => {
+  var {
+    Int: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Int');
+  return null;
+};
+Int.displayName = 'JVR.Int';

package/esm/types/Map.d.ts

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

package/esm/types/Map.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Map = props => {
+  var {
+    Map: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Map');
+  return null;
+};
+Map.displayName = 'JVR.Map';

package/esm/types/Nan.d.ts

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

package/esm/types/Nan.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Nan = props => {
+  var {
+    Nan: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Nan');
+  return null;
+};
+Nan.displayName = 'JVR.Nan';

package/esm/types/Null.d.ts

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

package/esm/types/Null.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Null = props => {
+  var {
+    Null: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Null');
+  return null;
+};
+Null.displayName = 'JVR.Null';

package/esm/types/Set.d.ts

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

package/esm/types/Set.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Set = props => {
+  var {
+    Set: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Set');
+  return null;
+};
+Set.displayName = 'JVR.Set';

package/esm/types/String.d.ts

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

package/esm/types/String.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var StringText = props => {
+  var {
+    Str: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Str');
+  return null;
+};
+StringText.displayName = 'JVR.StringText';

package/esm/types/True.d.ts

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

package/esm/types/True.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var True = props => {
+  var {
+    True: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'True');
+  return null;
+};
+True.displayName = 'JVR.True';

package/esm/types/Undefined.d.ts

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

package/esm/types/Undefined.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Undefined = props => {
+  var {
+    Undefined: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Undefined');
+  return null;
+};
+Undefined.displayName = 'JVR.Undefined';

package/esm/types/Url.d.ts

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

package/esm/types/Url.js

@@ -0,0 +1,10 @@
+import { useTypesStore } from '../store/Types';
+import { useTypesRender } from '../utils/useRender';
+export var Url = props => {
+  var {
+    Url: Comp = {}
+  } = useTypesStore();
+  useTypesRender(Comp, props, 'Url');
+  return null;
+};
+Url.displayName = 'JVR.Url';

package/esm/utils/useHighlight.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare function usePrevious<T>(value: T): T | undefined;
+interface UseHighlight {
+    value: any;
+    highlightUpdates?: boolean;
+    highlightContainer: React.MutableRefObject<HTMLSpanElement | null>;
+}
+export declare function useHighlight({ value, highlightUpdates, highlightContainer }: UseHighlight): void;
+export {};

package/esm/{semicolon.js → utils/useHighlight.js}

@@ -1,9 +1,4 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "render", "color", "value", "className", "keyName", "highlightUpdates", "quotes", "style", "namespace", "parentName"];
 import { useMemo, useRef, useEffect } from 'react';
-import { Label } from './value';
-import { jsx as _jsx } from "react/jsx-runtime";
 export function usePrevious(value) {
   var ref = useRef();
   useEffect(() => {
@@ -57,50 +52,4 @@ export function useHighlight(_ref) {
       });
     }
   }, [isHighlight, value, highlightContainer]);
-}
-export var Semicolon = _ref2 => {
-  var {
-      render,
-      color,
-      value,
-      className = 'w-rjv-object-key',
-      keyName,
-      highlightUpdates,
-      quotes,
-      style,
-      namespace,
-      parentName
-    } = _ref2,
-    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
-  var highlightContainer = useRef(null);
-  var content = typeof keyName === 'string' ? "" + quotes + keyName + quotes : keyName;
-  if (render) {
-    return render(_extends({
-      className
-    }, props, {
-      value,
-      namespace,
-      style: _extends({}, style, {
-        color
-      }),
-      parentName,
-      keyName,
-      quotes,
-      label: keyName,
-      children: content
-    }));
-  }
-  useHighlight({
-    value,
-    highlightUpdates,
-    highlightContainer
-  });
-  return /*#__PURE__*/_jsx(Label, _extends({
-    className: className,
-    color: color
-  }, props, {
-    ref: highlightContainer,
-    children: content
-  }));
-};
-Semicolon.displayName = 'JSR.Semicolon';
+}

package/esm/utils/useRender.d.ts

@@ -0,0 +1,6 @@
+import { type SymbolsElement } from '../store/Symbols';
+import { type TagType, type TypesElement } from '../store/Types';
+import { type SectionElement } from '../store/Section';
+export declare function useSymbolsRender(currentProps: SymbolsElement<TagType>, props: SymbolsElement<TagType>, key: string): void;
+export declare function useTypesRender<K extends TagType>(currentProps: TypesElement<TagType>, props: TypesElement<K>, key: string): void;
+export declare function useSectionRender<K extends TagType>(currentProps: SectionElement<TagType>, props: SectionElement<K>, key: string): void;

package/esm/utils/useRender.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import { useEffect } from 'react';
+import { useSymbolsDispatch } from '../store/Symbols';
+import { useTypesDispatch } from '../store/Types';
+import { useSectionDispatch } from '../store/Section';
+export function useSymbolsRender(currentProps, props, key) {
+  var dispatch = useSymbolsDispatch();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = _extends({}, currentProps, props, {
+    className: cls,
+    style: _extends({}, currentProps.style, props.style),
+    children: props.children || currentProps.children
+  });
+  useEffect(() => dispatch({
+    [key]: reset
+  }), [props]);
+}
+export function useTypesRender(currentProps, props, key) {
+  var dispatch = useTypesDispatch();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = _extends({}, currentProps, props, {
+    className: cls,
+    style: _extends({}, currentProps.style, props.style),
+    children: props.children || currentProps.children
+  });
+  useEffect(() => dispatch({
+    [key]: reset
+  }), [props]);
+}
+export function useSectionRender(currentProps, props, key) {
+  var dispatch = useSectionDispatch();
+  var cls = [currentProps.className, props.className].filter(Boolean).join(' ');
+  var reset = _extends({}, currentProps, props, {
+    className: cls,
+    style: _extends({}, currentProps.style, props.style),
+    children: props.children || currentProps.children
+  });
+  useEffect(() => dispatch({
+    [key]: reset
+  }), [props]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "1.12.0",
+  "version": "2.0.0-alpha.1",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",

package/cjs/comps/ellipsis.d.ts

@@ -1,7 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-export interface EllipsisProps extends React.HTMLAttributes<HTMLSpanElement> {
-    count: number;
-    level: number;
-    render?: (props: EllipsisProps) => JSX.Element;
-}
-export declare const Ellipsis: FC<PropsWithChildren<EllipsisProps>>;

package/cjs/comps/ellipsis.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Ellipsis = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["style", "render", "count", "level"];
-var Ellipsis = function Ellipsis(_ref) {
-  var style = _ref.style,
-    render = _ref.render,
-    count = _ref.count,
-    level = _ref.level,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var styl = (0, _objectSpread2["default"])({
-    cursor: 'pointer'
-  }, style);
-  var className = "w-rjv-ellipsis ".concat(props.className || '');
-  if (render) return render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    style: styl,
-    count: count,
-    level: level
-  }, props), {}, {
-    className: className
-  }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
-    className: className,
-    style: styl
-  }, props), {}, {
-    children: "..."
-  }));
-};
-exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';

package/cjs/comps/meta.d.ts

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import { LabelProps } from '../value';
-export interface MetaProps extends LabelProps {
-    isArray?: boolean;
-    start?: boolean;
-    level?: number;
-    render?: (props: Pick<MetaProps, 'start' | 'level' | 'isArray' | 'className' | 'children'>) => JSX.Element;
-}
-export declare function Meta(props: MetaProps): JSX.Element;
-export declare namespace Meta {
-    var displayName: string;
-}