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

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/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/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/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/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/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/{cjs/comps/ReRender/Types.d.ts → esm/types/index.d.ts}

@@ -1,16 +1,12 @@
 import { FC, PropsWithChildren } from 'react';
-export declare const SetComp: {
-    ({ isSet }: {
-        isSet: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export declare const MapComp: {
-    ({ isMap }: {
-        isMap: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: 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;
@@ -32,5 +28,4 @@ export declare const TypeDate: FC<{
 export declare const TypeUndefined: FC<TypeProps>;
 export declare const TypeNull: FC<TypeProps>;
 export declare const TypeNan: FC<TypeProps>;
-export declare const TypeEmptyValue: FC<TypeProps>;
 export {};

package/esm/{comps/ReRender/Types.js → types/index.js}

@@ -12,59 +12,66 @@ var _excluded = ["as", "render"],
   _excluded10 = ["as", "render"],
   _excluded11 = ["as", "render"],
   _excluded12 = ["as", "render"],
-  _excluded13 = ["as", "render"],
-  _excluded14 = ["as", "render"];
-import { Fragment, useState } from 'react';
-import { useTypesStore } from '../../store/Types';
-import { useStore } from '../../store';
-import { ValueQuote } from './Symbols';
-import { Copied } from '../Copied';
+  _excluded13 = ["as", "render"];
+import { Fragment, useEffect, useState } from 'react';
+import { useTypesStore } from '../store/Types';
+import { useStore } from '../store';
+import { ValueQuote } from '../symbol';
+import { Copied } from '../comps/Copied';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var SetComp = _ref => {
   var {
-    isSet
+    value,
+    keyName
   } = _ref;
   var {
-    Set = {},
+    Set: Comp = {},
     displayDataTypes
   } = useTypesStore();
+  var isSet = value instanceof Set;
   if (!isSet || !displayDataTypes) return null;
   var {
       as,
       render
-    } = Set,
-    reset = _objectWithoutPropertiesLoose(Set, _excluded);
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value,
+    keyName
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/_jsx(Comp, _extends({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
 SetComp.displayName = 'JVR.SetComp';
 export var MapComp = _ref2 => {
   var {
-    isMap
+    value,
+    keyName
   } = _ref2;
   var {
-    Map = {},
+    Map: Comp = {},
     displayDataTypes
   } = useTypesStore();
+  var isMap = value instanceof Map;
   if (!isMap || !displayDataTypes) return null;
   var {
       as,
       render
-    } = Map,
-    reset = _objectWithoutPropertiesLoose(Map, _excluded2);
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
-    type: 'type'
+    type: 'type',
+    value,
+    keyName
   });
   if (type) return type;
-  var Comp = as || 'span';
-  return /*#__PURE__*/_jsx(Comp, _extends({}, reset));
+  var Elm = as || 'span';
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
 };
 MapComp.displayName = 'JVR.MapComp';
 var defalutStyle = {
@@ -82,7 +89,7 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 20
+    shortenTextAfterLength: length = 30
   } = useStore();
   var {
       as,
@@ -91,6 +98,7 @@ export var TypeString = _ref3 => {
     reset = _objectWithoutPropertiesLoose(Str, _excluded3);
   var childrenStr = children;
   var [shorten, setShorten] = useState(length && childrenStr.length >= length);
+  useEffect(() => setShorten(length && childrenStr.length >= length), [length]);
   var Comp = as || 'span';
   var style = _extends({}, defalutStyle, Str.style || {});
   if (length > 0) {
@@ -99,7 +107,6 @@ export var TypeString = _ref3 => {
     });
     if (childrenStr.length > length) {
       reset.onClick = () => {
-        if (length && childrenStr.length <= length) return setShorten(false);
         setShorten(!shorten);
       };
     }
@@ -110,22 +117,26 @@ export var TypeString = _ref3 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children: text,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
-    }))), child || /*#__PURE__*/_jsxs(Comp, _extends({}, reset, {
-      className: "w-rjv-value",
-      children: [/*#__PURE__*/_jsx(ValueQuote, {}), text, /*#__PURE__*/_jsx(ValueQuote, {})]
-    })), /*#__PURE__*/_jsx(Copied, {
+    }))), child || /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
+        className: "w-rjv-value",
+        children: text
+      })), /*#__PURE__*/_jsx(ValueQuote, {})]
+    }), /*#__PURE__*/_jsx(Copied, {
       keyName: keyName,
       value: children,
       expandKey: expandKey
@@ -155,14 +166,16 @@ export var TypeTrue = _ref4 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -200,14 +213,16 @@ export var TypeFalse = _ref5 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -245,14 +260,16 @@ export var TypeFloat = _ref6 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -290,14 +307,16 @@ export var TypeInt = _ref7 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -335,14 +354,16 @@ export var TypeBigint = _ref8 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -380,14 +401,16 @@ export var TypeUrl = _ref9 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
-    children,
+    children: children == null ? void 0 : children.href,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -428,21 +451,24 @@ export var TypeDate = _ref10 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
+  var childStr = children instanceof Date ? children.toLocaleString() : children;
   var child = isRender && render(_extends({}, reset, {
-    children,
+    children: childStr,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       style: style
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
-      children: children == null ? void 0 : children.toString()
+      children: childStr
     })), /*#__PURE__*/_jsx(Copied, {
       keyName: keyName,
       value: children,
@@ -473,14 +499,16 @@ export var TypeUndefined = _ref11 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -515,14 +543,16 @@ export var TypeNull = _ref12 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children,
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
@@ -557,56 +587,16 @@ export var TypeNan = _ref13 => {
     style
   }), {
     type: 'type',
-    value: children
-  });
-  var child = isRender && render(_extends({}, reset, {
-    children,
-    className: 'w-rjv-value'
-  }), {
-    type: 'value',
-    value: children
-  });
-  return /*#__PURE__*/_jsxs(Fragment, {
-    children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
-      style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
-  });
-};
-TypeNan.displayName = 'JVR.TypeNan';
-export var TypeEmptyValue = _ref14 => {
-  var {
-    children,
-    expandKey,
+    value: children,
     keyName
-  } = _ref14;
-  var {
-    Nan = {},
-    displayDataTypes
-  } = useTypesStore();
-  var {
-      as,
-      render
-    } = Nan,
-    reset = _objectWithoutPropertiesLoose(Nan, _excluded14);
-  var Comp = as || 'span';
-  var style = _extends({}, defalutStyle, Nan.style || {});
-  var isRender = render && typeof render === 'function';
-  var type = isRender && render(_extends({}, reset, {
-    style
-  }), {
-    type: 'type',
-    value: children
   });
   var child = isRender && render(_extends({}, reset, {
-    children,
+    children: children == null ? void 0 : children.toString(),
     className: 'w-rjv-value'
   }), {
     type: 'value',
-    value: children
+    value: children,
+    keyName
   });
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [displayDataTypes && (type || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {

package/esm/utils/useHighlight.js

@@ -38,7 +38,6 @@ export function useHighlight(_ref) {
     if (value !== prevValue) {
       return true;
     }
-    return false;
   }, [highlightUpdates, value]);
   useEffect(() => {
     if (highlightContainer && highlightContainer.current && isHighlight && 'animate' in highlightContainer.current) {

package/esm/utils/useRender.d.ts

@@ -1,6 +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 useSymbolsRender<K extends TagType>(currentProps: SymbolsElement<TagType>, props: SymbolsElement<K>, 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/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.11",
   "description": "JSON viewer for react.",
   "main": "cjs/index.js",
   "module": "esm/index.js",
   "homepage": "https://uiwjs.github.io/react-json-view",
+  "funding": "https://jaywcjlove.github.io/#/sponsor",
   "exports": {
     "./README.md": "./README.md",
     ".": {
@@ -114,10 +115,8 @@
     "tree-view",
     "treeview"
   ],
-  "dependencies": {
-    "@babel/runtime": "^7.22.6"
-  },
   "devDependencies": {
+    "@babel/runtime": "^7.22.6",
     "@testing-library/react": "^14.0.0",
     "@types/react-test-renderer": "^18.0.0",
     "react": "^18.2.0",

package/cjs/comps/CountInfo.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react" />
-import { type SectionElementProps } from '../store/Section';
-import { type TagType } from '../store/Types';
-export interface CountInfoProps<T extends object> {
-    value?: T;
-    keyName: string | number;
-}
-export declare const CountInfo: {
-    <T extends object>(props: SectionElementProps<TagType> & CountInfoProps<T> & import("react").HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
-export interface CountInfoExtraProps<T extends object> {
-    value?: T;
-    keyName: string | number;
-}
-export declare const CountInfoExtra: {
-    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};

package/cjs/comps/CountInfo.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CountInfoExtra = exports.CountInfo = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _store = require("../store");
-var _Section = require("../store/Section");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["value", "keyName"],
-  _excluded2 = ["as", "render"],
-  _excluded3 = ["value", "keyName"],
-  _excluded4 = ["as", "render"];
-var CountInfo = function CountInfo(props) {
-  var _props$value = props.value,
-    value = _props$value === void 0 ? {} : _props$value,
-    keyName = props.keyName,
-    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
-  var _useStore = (0, _store.useStore)(),
-    displayObjectSize = _useStore.displayObjectSize;
-  var _useSectionStore = (0, _Section.useSectionStore)(),
-    _useSectionStore$Coun = _useSectionStore.CountInfo,
-    Comp = _useSectionStore$Coun === void 0 ? {} : _useSectionStore$Coun;
-  if (!displayObjectSize) return null;
-  var as = Comp.as,
-    render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
-  var Elm = as || 'span';
-  reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), props.style);
-  var len = Object.keys(value).length;
-  if (!reset.children) {
-    reset.children = "".concat(len, " items");
-  }
-  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other);
-  var isRender = render && typeof render === 'function';
-  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, elmProps), {}, {
-    'data-length': len
-  }), {
-    value: value,
-    keyName: keyName
-  });
-  if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
-};
-exports.CountInfo = CountInfo;
-CountInfo.displayName = 'JVR.CountInfo';
-var CountInfoExtra = function CountInfoExtra(props) {
-  var _props$value2 = props.value,
-    value = _props$value2 === void 0 ? {} : _props$value2,
-    keyName = props.keyName,
-    other = (0, _objectWithoutProperties2["default"])(props, _excluded3);
-  var _useSectionStore2 = (0, _Section.useSectionStore)(),
-    _useSectionStore2$Cou = _useSectionStore2.CountInfoExtra,
-    Comp = _useSectionStore2$Cou === void 0 ? {} : _useSectionStore2$Cou;
-  var as = Comp.as,
-    render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
-  var Elm = as || 'span';
-  var isRender = render && typeof render === 'function';
-  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), other);
-  var child = isRender && render(elmProps, {
-    value: value,
-    keyName: keyName
-  });
-  if (child) return child;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
-};
-exports.CountInfoExtra = CountInfoExtra;
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';

package/cjs/comps/Ellipsis.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="react" />
-export interface CountInfoProps<T extends object> {
-    value?: T;
-    keyName: string | number;
-    isExpanded: boolean;
-}
-export declare const Ellipsis: {
-    <T extends object>({ isExpanded, value, keyName }: CountInfoProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};

package/cjs/comps/Ellipsis.js

@@ -1,35 +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 _Section = require("../store/Section");
-var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["as", "render"];
-var Ellipsis = function Ellipsis(_ref) {
-  var isExpanded = _ref.isExpanded,
-    value = _ref.value,
-    keyName = _ref.keyName;
-  var _useSectionStore = (0, _Section.useSectionStore)(),
-    _useSectionStore$Elli = _useSectionStore.Ellipsis,
-    Comp = _useSectionStore$Elli === void 0 ? {} : _useSectionStore$Elli;
-  var as = Comp.as,
-    render = Comp.render,
-    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
-  var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    'data-expanded': isExpanded
-  }), {
-    value: value,
-    keyName: keyName
-  });
-  if (child) return child;
-  if (!isExpanded) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
-};
-exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';

package/cjs/comps/Key.d.ts

@@ -1,7 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-type KeyProps = {
-    keyName: string | number;
-    value?: unknown;
-};
-export declare const Key: FC<PropsWithChildren<KeyProps>>;
-export {};