@uiw/react-json-view 2.0.0-alpha.2 → 2.0.0-alpha.21

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

@@ -12,18 +12,16 @@ 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';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+  _excluded13 = ["as", "render"];
+import { Fragment, useEffect, useState } from 'react';
+import { useTypesStore } from '../store/Types';
+import { useStore } from '../store';
+import { ValueQuote } from '../symbol';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var SetComp = _ref => {
   var {
-    value
+    value,
+    keyName
   } = _ref;
   var {
     Set: Comp = {},
@@ -39,7 +37,8 @@ export var SetComp = _ref => {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value
+    value,
+    keyName
   });
   if (type) return type;
   var Elm = as || 'span';
@@ -48,7 +47,8 @@ export var SetComp = _ref => {
 SetComp.displayName = 'JVR.SetComp';
 export var MapComp = _ref2 => {
   var {
-    value
+    value,
+    keyName
   } = _ref2;
   var {
     Map: Comp = {},
@@ -64,7 +64,8 @@ export var MapComp = _ref2 => {
   var isRender = render && typeof render === 'function';
   var type = isRender && render(reset, {
     type: 'type',
-    value
+    value,
+    keyName
   });
   if (type) return type;
   var Elm = as || 'span';
@@ -78,7 +79,6 @@ var defalutStyle = {
 export var TypeString = _ref3 => {
   var {
     children = '',
-    expandKey,
     keyName
   } = _ref3;
   var {
@@ -86,7 +86,7 @@ export var TypeString = _ref3 => {
     displayDataTypes
   } = useTypesStore();
   var {
-    shortenTextAfterLength: length = 20
+    shortenTextAfterLength: length = 30
   } = useStore();
   var {
       as,
@@ -95,6 +95,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) {
@@ -103,7 +104,6 @@ export var TypeString = _ref3 => {
     });
     if (childrenStr.length > length) {
       reset.onClick = () => {
-        if (length && childrenStr.length <= length) return setShorten(false);
         setShorten(!shorten);
       };
     }
@@ -114,25 +114,25 @@ 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, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
+    }))), child || /*#__PURE__*/_jsxs(Fragment, {
+      children: [/*#__PURE__*/_jsx(ValueQuote, {}), /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
+        className: "w-rjv-value",
+        children: text
+      })), /*#__PURE__*/_jsx(ValueQuote, {})]
     })]
   });
 };
@@ -140,7 +140,6 @@ TypeString.displayName = 'JVR.TypeString';
 export var TypeTrue = _ref4 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref4;
   var {
@@ -159,14 +158,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, {
@@ -174,18 +175,13 @@ export var TypeTrue = _ref4 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeTrue.displayName = 'JVR.TypeTrue';
 export var TypeFalse = _ref5 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref5;
   var {
@@ -204,14 +200,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, {
@@ -219,18 +217,13 @@ export var TypeFalse = _ref5 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeFalse.displayName = 'JVR.TypeFalse';
 export var TypeFloat = _ref6 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref6;
   var {
@@ -249,14 +242,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, {
@@ -264,18 +259,13 @@ export var TypeFloat = _ref6 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeFloat.displayName = 'JVR.TypeFloat';
 export var TypeInt = _ref7 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref7;
   var {
@@ -294,14 +284,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, {
@@ -309,18 +301,13 @@ export var TypeInt = _ref7 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: children == null ? void 0 : children.toString()
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeInt.displayName = 'JVR.TypeInt';
 export var TypeBigint = _ref8 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref8;
   var {
@@ -339,14 +326,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, {
@@ -354,18 +343,13 @@ export var TypeBigint = _ref8 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: (children == null ? void 0 : children.toString()) + 'n'
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeBigint.displayName = 'JVR.TypeFloat';
 export var TypeUrl = _ref9 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref9;
   var {
@@ -384,14 +368,16 @@ export var TypeUrl = _ref9 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     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, {
@@ -402,18 +388,13 @@ export var TypeUrl = _ref9 => {
     }, reset, {
       className: "w-rjv-value",
       children: [/*#__PURE__*/_jsx(ValueQuote, {}), children == null ? void 0 : children.href, /*#__PURE__*/_jsx(ValueQuote, {})]
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeUrl.displayName = 'JVR.TypeUrl';
 export var TypeDate = _ref10 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref10;
   var {
@@ -432,15 +413,17 @@ export var TypeDate = _ref10 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
-  var childStr = children == null ? void 0 : children.toString();
+  var childStr = children instanceof Date ? children.toLocaleString() : children;
   var child = isRender && render(_extends({}, reset, {
     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, {
@@ -448,18 +431,13 @@ export var TypeDate = _ref10 => {
     }))), child || /*#__PURE__*/_jsx(Comp, _extends({}, reset, {
       className: "w-rjv-value",
       children: childStr
-    })), /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))]
   });
 };
 TypeDate.displayName = 'JVR.TypeDate';
 export var TypeUndefined = _ref11 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref11;
   var {
@@ -478,30 +456,27 @@ 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, {
       style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))), child]
   });
 };
 TypeUndefined.displayName = 'JVR.TypeUndefined';
 export var TypeNull = _ref12 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref12;
   var {
@@ -520,30 +495,27 @@ 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, {
       style: style
-    }))), child, /*#__PURE__*/_jsx(Copied, {
-      keyName: keyName,
-      value: children,
-      expandKey: expandKey
-    })]
+    }))), child]
   });
 };
 TypeNull.displayName = 'JVR.TypeNull';
 export var TypeNan = _ref13 => {
   var {
     children,
-    expandKey,
     keyName
   } = _ref13;
   var {
@@ -562,65 +534,21 @@ export var TypeNan = _ref13 => {
     style
   }), {
     type: 'type',
-    value: children
+    value: children,
+    keyName
   });
   var child = isRender && render(_extends({}, reset, {
     children: children == null ? void 0 : children.toString(),
     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,
-    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
-    })]
+    }))), child]
   });
 };
-TypeEmptyValue.displayName = 'JVR.TypeEmptyValue';
+TypeNan.displayName = 'JVR.TypeNan';

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/githubDark.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/githubDark' {
+  export const githubDarkTheme: import('react').CSSProperties;
+}

package/githubLight.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/githubLight' {
+  export const githubLightTheme: import('react').CSSProperties;
+}

package/gruvbox.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/gruvbox' {
+  export const gruvboxTheme: import('react').CSSProperties;
+}

package/monokai.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/monokai' {
+  export const monokaiTheme: import('react').CSSProperties;
+}

package/nord.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/nord' {
+  export const nordTheme: import('react').CSSProperties;
+}

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.21",
   "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",
     ".": {
@@ -85,11 +86,18 @@
     "react-dom": ">=18.0.0"
   },
   "files": [
-    "editor.d.ts",
+    "basic.d.ts",
     "dark.d.ts",
+    "editor.d.ts",
+    "githubDark.d.ts",
+    "githubLight.d.ts",
+    "gruvbox.d.ts",
     "light.d.ts",
+    "monokai.d.ts",
+    "nord.d.ts",
     "triangle-arrow.d.ts",
     "triangle-solid-arrow.d.ts",
+    "vscode.d.ts",
     "cjs",
     "esm"
   ],
@@ -114,10 +122,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/vscode.d.ts

@@ -0,0 +1,3 @@
+declare module '@uiw/react-json-view/vscode' {
+  export const vscodeTheme: import('react').CSSProperties;
+}

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;
-};