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

package/esm/symbol/index.js

@@ -1,7 +1,7 @@
 import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
   _excluded4 = ["as", "render"],
@@ -10,15 +10,19 @@ var _excluded = ["isNumber"],
   _excluded7 = ["as", "render"],
   _excluded8 = ["as", "render"],
   _excluded9 = ["as", "render"];
-import { useSymbolsStore } from '../store/Symbols';
-import { useExpandsStore } from '../store/Expands';
+import { useSymbolsStore } from "../store/Symbols.js";
+import { useExpandsStore } from "../store/Expands.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Quote = props => {
   var {
     Quote: Comp = {}
   } = useSymbolsStore();
   var {
-      isNumber
+      isNumber,
+      value,
+      parentValue,
+      keyName,
+      keys
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   if (isNumber) return null;
@@ -29,7 +33,20 @@ export var Quote = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
   var Elm = as || 'span';
   var elmProps = _extends({}, other, reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  // Trim the leading and trailing spaces in children,
+  // and set it to undefined if it's an empty string or contains only spaces.
+  // https://github.com/uiwjs/react-json-view/issues/86
+  if (typeof elmProps.children === 'string') {
+    var trimmed = elmProps.children.trim();
+    elmProps.children = trimmed || undefined;
+  }
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
@@ -46,12 +63,18 @@ export var ValueQuote = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded3);
   var Elm = as || 'span';
   var elmProps = _extends({}, other, reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
 };
 ValueQuote.displayName = 'JVR.ValueQuote';
-export var Colon = () => {
+export var Colon = props => {
+  var {
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
   var {
     Colon: Comp = {}
   } = useSymbolsStore();
@@ -61,7 +84,12 @@ export var Colon = () => {
     } = Comp,
     reset = _objectWithoutPropertiesLoose(Comp, _excluded4);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  });
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
@@ -72,7 +100,12 @@ export var Arrow = props => {
   } = useSymbolsStore();
   var expands = useExpandsStore();
   var {
-    expandKey
+    expandKey,
+    style: resetStyle,
+    value,
+    parentValue,
+    keyName,
+    keys
   } = props;
   var isExpanded = !!expands[expandKey];
   var {
@@ -83,24 +116,41 @@ export var Arrow = props => {
     reset = _objectWithoutPropertiesLoose(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
-  var child = isRender && render(_extends({}, reset, {
+  var elmProps = _extends({}, reset, {
     'data-expanded': isExpanded,
-    style: _extends({}, style, props.style)
-  }));
+    style: _extends({}, style, resetStyle)
+  });
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = isRender && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
-    style: _extends({}, style, props.style)
+    style: _extends({}, style, resetStyle)
   }));
 };
 Arrow.displayName = 'JVR.Arrow';
-export var BracketsOpen = _ref => {
+export var BracketsOpen = props => {
   var {
-    isBrackets
-  } = _ref;
+    isBrackets,
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
   var {
     BracketsLeft = {},
     BraceLeft = {}
   } = useSymbolsStore();
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
     var {
         as,
@@ -108,7 +158,7 @@ export var BracketsOpen = _ref => {
       } = BracketsLeft,
       reset = _objectWithoutPropertiesLoose(BracketsLeft, _excluded6);
     var BracketsLeftComp = as || 'span';
-    var _child = _render && typeof _render === 'function' && _render(reset);
+    var _child = _render && typeof _render === 'function' && _render(reset, result);
     if (_child) return _child;
     return /*#__PURE__*/_jsx(BracketsLeftComp, _extends({}, reset));
   }
@@ -116,18 +166,28 @@ export var BracketsOpen = _ref => {
       as: elm,
       render
     } = BraceLeft,
-    props = _objectWithoutPropertiesLoose(BraceLeft, _excluded7);
+    resetProps = _objectWithoutPropertiesLoose(BraceLeft, _excluded7);
   var BraceLeftComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(props);
+  var child = render && typeof render === 'function' && render(resetProps, result);
   if (child) return child;
-  return /*#__PURE__*/_jsx(BraceLeftComp, _extends({}, props));
+  return /*#__PURE__*/_jsx(BraceLeftComp, _extends({}, resetProps));
 };
 BracketsOpen.displayName = 'JVR.BracketsOpen';
-export var BracketsClose = _ref2 => {
+export var BracketsClose = props => {
   var {
     isBrackets,
-    isVisiable
-  } = _ref2;
+    isVisiable,
+    value,
+    parentValue,
+    keyName,
+    keys
+  } = props;
+  var result = {
+    value,
+    parentValue,
+    keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (!isVisiable) return null;
   var {
     BracketsRight = {},
@@ -140,7 +200,7 @@ export var BracketsClose = _ref2 => {
       } = BracketsRight,
       _reset = _objectWithoutPropertiesLoose(BracketsRight, _excluded8);
     var BracketsRightComp = as || 'span';
-    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset);
+    var _child2 = _render2 && typeof _render2 === 'function' && _render2(_reset, result);
     if (_child2) return _child2;
     return /*#__PURE__*/_jsx(BracketsRightComp, _extends({}, _reset));
   }
@@ -150,7 +210,7 @@ export var BracketsClose = _ref2 => {
     } = BraceRight,
     reset = _objectWithoutPropertiesLoose(BraceRight, _excluded9);
   var BraceRightComp = elm || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, result);
   if (child) return child;
   return /*#__PURE__*/_jsx(BraceRightComp, _extends({}, reset));
 };

package/esm/theme/basic.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const basicTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const basicTheme: CSS.Properties<string | number>;

package/esm/theme/basic.js

@@ -1,6 +1,7 @@
 export var basicTheme = {
   '--w-rjv-font-family': 'monospace',
   '--w-rjv-color': '#b5bd68',
+  '--w-rjv-key-number': '#002b36',
   '--w-rjv-key-string': '#b5bd68',
   '--w-rjv-background-color': '#2E3235',
   '--w-rjv-line-color': '#292d30',
@@ -13,6 +14,7 @@ export var basicTheme = {
   '--w-rjv-curlybraces-color': '#cc99cc',
   '--w-rjv-colon-color': '#bababa',
   '--w-rjv-brackets-color': '#808080',
+  '--w-rjv-ellipsis-color': '#cb4b16',
   '--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': '#b5bd68',

package/esm/theme/dark.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const darkTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const darkTheme: CSS.Properties<string | number>;

package/esm/theme/github.dark.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const githubDarkTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubDarkTheme: CSS.Properties<string | number>;

package/esm/theme/github.light.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const githubLightTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubLightTheme: CSS.Properties<string | number>;

package/esm/theme/gruvbox.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const gruvboxTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const gruvboxTheme: CSS.Properties<string | number>;

package/esm/theme/light.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const lightTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const lightTheme: CSS.Properties<string | number>;

package/esm/theme/monokai.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const monokaiTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const monokaiTheme: CSS.Properties<string | number>;

package/esm/theme/nord.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const nordTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const nordTheme: CSS.Properties<string | number>;

package/esm/theme/vscode.d.ts

@@ -1,2 +1,2 @@
-/// <reference types="react" />
-export declare const vscodeTheme: import("react").CSSProperties;
+import type * as CSS from 'csstype';
+export declare const vscodeTheme: CSS.Properties<string | number>;

package/esm/types/Bigint.d.ts

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

package/esm/types/Bigint.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Bigint = props => {
   var {
     Bigint: Comp = {}

package/esm/types/Date.d.ts

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

package/esm/types/Date.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Date = props => {
   var {
     Date: Comp = {}

package/esm/types/False.d.ts

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

package/esm/types/False.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var False = props => {
   var {
     False: Comp = {}

package/esm/types/Float.d.ts

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

package/esm/types/Float.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Float = props => {
   var {
     Float: Comp = {}

package/esm/types/Int.d.ts

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

package/esm/types/Int.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Int = props => {
   var {
     Int: Comp = {}

package/esm/types/Map.d.ts

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

package/esm/types/Map.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Map = props => {
   var {
     Map: Comp = {}

package/esm/types/Nan.d.ts

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

package/esm/types/Nan.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Nan = props => {
   var {
     Nan: Comp = {}

package/esm/types/Null.d.ts

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

package/esm/types/Null.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Null = props => {
   var {
     Null: Comp = {}

package/esm/types/Set.d.ts

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

package/esm/types/Set.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Set = props => {
   var {
     Set: Comp = {}

package/esm/types/String.d.ts

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

package/esm/types/String.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var StringText = props => {
   var {
     Str: Comp = {}

package/esm/types/True.d.ts

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

package/esm/types/True.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var True = props => {
   var {
     True: Comp = {}

package/esm/types/Undefined.d.ts

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

package/esm/types/Undefined.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Undefined = props => {
   var {
     Undefined: Comp = {}

package/esm/types/Url.d.ts

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

package/esm/types/Url.js

@@ -1,5 +1,5 @@
-import { useTypesStore } from '../store/Types';
-import { useTypesRender } from '../utils/useRender';
+import { useTypesStore } from "../store/Types.js";
+import { useTypesRender } from "../utils/useRender.js";
 export var Url = props => {
   var {
     Url: Comp = {}

package/esm/types/index.d.ts

@@ -1,13 +1,16 @@
-import { FC, PropsWithChildren } from 'react';
+import { type FC, type PropsWithChildren } from 'react';
+export declare const bigIntToString: (bi?: BigInt | string) => string;
 export declare const SetComp: FC<PropsWithChildren<{
     value: unknown;
+    keyName: string | number;
 }>>;
 export declare const MapComp: FC<PropsWithChildren<{
     value: unknown;
+    keyName: string | number;
 }>>;
 type TypeProps = PropsWithChildren<{
-    expandKey: string;
     keyName: string | number;
+    keys?: (string | number)[];
 }>;
 export declare const TypeString: FC<TypeProps>;
 export declare const TypeTrue: FC<TypeProps>;