@uiw/react-json-view - npm Package Compare versions

Comparing version 2.0.0-alpha.2 to 2.0.0-alpha.3

cjs/comps/KeyValues.js

@@ -17,5 +17,5 @@ "use strict";
 var _Value = require("./Value");
-var _Key = require("./Key");
+var _KeyName = require("../section/KeyName");
 var _Container = require("../Container");
-var _Symbols = require("./ReRender/Symbols");
+var _symbol = require("../symbol");
 var _useHighlight = require("../utils/useHighlight");
@@ -96,12 +96,14 @@ var _jsxRuntime = require("react/jsx-runtime");
       ref: highlightContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Quote, {
-        isNumber: isNumber
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Key.Key, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+        isNumber: isNumber,
+        "data-placement": "left"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, {
         keyName: keyName,
         value: value,
         children: keyName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Quote, {
-        isNumber: isNumber
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+        isNumber: isNumber,
+        "data-placement": "right"
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Colon, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, {})]
   });
@@ -108,0 +110,0 @@ };

cjs/comps/NestedClose.js

@@ -9,3 +9,3 @@ "use strict";
 var _Expands = require("../store/Expands");
-var _Symbols = require("./ReRender/Symbols");
+var _symbol = require("../symbol");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -32,3 +32,3 @@ var NestedClose = function NestedClose(props) {
     style: style,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsClose, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
       isBrackets: isArray || isMySet,
@@ -35,0 +35,0 @@ isVisiable: true

cjs/comps/NestedOpen.js

@@ -15,6 +15,7 @@ "use strict";
 var _Copied = require("./Copied");
-var _CountInfo = require("./CountInfo");
-var _Symbols = require("./ReRender/Symbols");
-var _Ellipsis = require("./Ellipsis");
-var _Types = require("./ReRender/Types");
+var _CountInfoExtra = require("../section/CountInfoExtra");
+var _CountInfo = require("../section/CountInfo");
+var _symbol = require("../symbol");
+var _Ellipsis = require("../section/Ellipsis");
+var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -64,3 +65,3 @@ var NestedOpen = function NestedOpen(props) {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.Arrow, {
+    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, {
       style: arrowStyle,
@@ -70,19 +71,19 @@ expandKey: expandKey
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.SetComp, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
       value: initialValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.MapComp, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.MapComp, {
       value: initialValue
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsOpen, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, {
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.Ellipsis, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Symbols.BracketsClose, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfo, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
       value: value,
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoExtra, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfoExtra.CountInfoExtraComps, {
       value: value,
@@ -89,0 +90,0 @@ keyName: keyName

cjs/comps/Value.js

@@ -9,3 +9,3 @@ "use strict";
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-var _Types = require("./ReRender/Types");
+var _types = require("../types");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,3 +25,3 @@ var isFloat = function isFloat(n) {
   if (value instanceof URL) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUrl, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -31,3 +31,3 @@ }));
   if (typeof value === 'string') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeString, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeString, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -37,3 +37,3 @@ }));
   if (value === true) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeTrue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeTrue, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -43,3 +43,3 @@ }));
   if (value === false) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeFalse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeFalse, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -49,3 +49,3 @@ }));
   if (value === null) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeNull, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeNull, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -55,3 +55,3 @@ }));
   if (value === undefined) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeUndefined, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeUndefined, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -61,3 +61,3 @@ }));
   if (value instanceof Date) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeDate, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeDate, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -67,15 +67,15 @@ }));
   if (typeof value === 'number' && isNaN(value)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeNan, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeNan, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'number' && isFloat(value)) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeFloat, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeFloat, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'bigint') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeBigint, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeBigint, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
     }));
   } else if (typeof value === 'number') {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Types.TypeInt, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.TypeInt, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
       children: value
@@ -82,0 +82,0 @@ }));

cjs/index.d.ts

@@ -33,3 +33,3 @@ /// <reference types="react" />
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -36,0 +36,0 @@ /** This property contains your input JSON */

cjs/index.js

@@ -100,11 +100,11 @@ "use strict";
 });
-var _Symbols2 = require("./comps/ReRender/Symbols");
-Object.keys(_Symbols2).forEach(function (key) {
+var _symbol = require("./symbol");
+Object.keys(_symbol).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _Symbols2[key]) return;
+  if (key in exports && exports[key] === _symbol[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _Symbols2[key];
+      return _symbol[key];
     }
@@ -111,0 +111,0 @@ });

cjs/section/CountInfo.d.ts

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

cjs/section/CountInfo.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfo = void 0;
+exports.CountInfoComp = exports.CountInfo = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
+var _store = require("../store");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 var CountInfo = function CountInfo(props) {
@@ -17,2 +24,35 @@ var _useSectionStore = (0, _Section.useSectionStore)(),
 exports.CountInfo = CountInfo;
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+var CountInfoComp = function CountInfoComp(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 _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Cou = _useSectionStore2.CountInfo,
+    Comp = _useSectionStore2$Cou === void 0 ? {} : _useSectionStore2$Cou;
+  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.CountInfoComp = CountInfoComp;
+CountInfoComp.displayName = 'JVR.CountInfoComp';

cjs/section/CountInfoExtra.d.ts

@@ -0,3 +1,4 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
-import { type SectionElement } from '../store/Section';
+import { type SectionElement, type SectionElementProps } from '../store/Section';
 export declare const CountInfoExtra: {
@@ -7,1 +8,9 @@ <K extends TagType>(props: SectionElement<K>): null;
 };
+export interface CountInfoExtraCompsProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+}
+export declare const CountInfoExtraComps: {
+    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraCompsProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

cjs/section/CountInfoExtra.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.CountInfoExtra = void 0;
+exports.CountInfoExtraComps = exports.CountInfoExtra = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 var CountInfoExtra = function CountInfoExtra(props) {
@@ -17,2 +23,26 @@ var _useSectionStore = (0, _Section.useSectionStore)(),
 exports.CountInfoExtra = CountInfoExtra;
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+var CountInfoExtraComps = function CountInfoExtraComps(props) {
+  var _props$value = props.value,
+    value = _props$value === void 0 ? {} : _props$value,
+    keyName = props.keyName,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
+  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, _excluded2);
+  if (!render && !reset.children) return null;
+  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.CountInfoExtraComps = CountInfoExtraComps;
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

cjs/section/Ellipsis.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
@@ -7,1 +8,10 @@ import { type SectionElement } from '../store/Section';
 };
+export interface EllipsisCompProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+    isExpanded: boolean;
+}
+export declare const EllipsisComp: {
+    <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

cjs/section/Ellipsis.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Ellipsis = void 0;
+exports.EllipsisComp = 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 _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
 var Ellipsis = function Ellipsis(props) {
@@ -17,2 +22,25 @@ var _useSectionStore = (0, _Section.useSectionStore)(),
 exports.Ellipsis = Ellipsis;
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+var EllipsisComp = function EllipsisComp(_ref) {
+  var isExpanded = _ref.isExpanded,
+    value = _ref.value,
+    keyName = _ref.keyName;
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Ell = _useSectionStore2.Ellipsis,
+    Comp = _useSectionStore2$Ell === void 0 ? {} : _useSectionStore2$Ell;
+  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.EllipsisComp = EllipsisComp;
+EllipsisComp.displayName = 'JVR.EllipsisComp';

cjs/section/KeyName.d.ts

@@ -0,1 +1,2 @@
+import { type FC, type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
@@ -7,1 +8,7 @@ import { type SectionElement } from '../store/Section';
 };
+type KeyNameCompProps = {
+    keyName: string | number;
+    value?: unknown;
+};
+export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
+export {};

cjs/section/KeyName.js

 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.KeyName = void 0;
+exports.KeyNameComp = exports.KeyName = void 0;
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
+var _jsxRuntime = require("react/jsx-runtime");
+var _excluded = ["as", "render"];
 var KeyName = function KeyName(props) {
@@ -17,2 +22,31 @@ var _useSectionStore = (0, _Section.useSectionStore)(),
 exports.KeyName = KeyName;
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+var KeyNameComp = function KeyNameComp(props) {
+  var children = props.children,
+    value = props.value,
+    keyName = props.keyName;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var _useSectionStore2 = (0, _Section.useSectionStore)(),
+    _useSectionStore2$Key = _useSectionStore2.KeyName,
+    Comp = _useSectionStore2$Key === void 0 ? {} : _useSectionStore2$Key;
+  var as = Comp.as,
+    render = Comp.render,
+    reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded);
+  reset.style = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset.style), style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }), {
+    value: value,
+    keyName: keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+    children: children
+  }));
+};
+exports.KeyNameComp = KeyNameComp;
+KeyNameComp.displayName = 'JVR.KeyNameComp';

cjs/utils/useHighlight.js

@@ -48,3 +48,2 @@ "use strict";
     }
-    return false;
   }, [highlightUpdates, value]);
@@ -51,0 +50,0 @@ (0, _react.useEffect)(function () {

esm/comps/KeyValues.js

@@ -7,5 +7,5 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Value } from './Value';
-import { Key } from './Key';
+import { KeyNameComp } from '../section/KeyName';
 import { Container } from '../Container';
-import { Quote, Colon } from './ReRender/Symbols';
+import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
@@ -84,4 +84,5 @@ import { jsx as _jsx } from "react/jsx-runtime";
       children: [/*#__PURE__*/_jsx(Quote, {
-        isNumber: isNumber
-      }), /*#__PURE__*/_jsx(Key, {
+        isNumber: isNumber,
+        "data-placement": "left"
+      }), /*#__PURE__*/_jsx(KeyNameComp, {
         keyName: keyName,
@@ -91,3 +92,4 @@ value: value,
       }), /*#__PURE__*/_jsx(Quote, {
-        isNumber: isNumber
+        isNumber: isNumber,
+        "data-placement": "right"
       })]
@@ -94,0 +96,0 @@ }), /*#__PURE__*/_jsx(Colon, {})]

esm/comps/NestedClose.js

 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
-import { BracketsClose } from './ReRender/Symbols';
+import { BracketsClose } from '../symbol';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -5,0 +5,0 @@ export var NestedClose = props => {

esm/comps/NestedOpen.js

@@ -6,6 +6,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { Copied } from './Copied';
-import { CountInfo, CountInfoExtra } from './CountInfo';
-import { Arrow, BracketsOpen, BracketsClose } from './ReRender/Symbols';
-import { Ellipsis } from './Ellipsis';
-import { SetComp, MapComp } from './ReRender/Types';
+import { CountInfoExtraComps } from '../section/CountInfoExtra';
+import { CountInfoComp } from '../section/CountInfo';
+import { Arrow, BracketsOpen, BracketsClose } from '../symbol';
+import { EllipsisComp } from '../section/Ellipsis';
+import { SetComp, MapComp } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -72,3 +73,3 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(Ellipsis, {
+    }), /*#__PURE__*/_jsx(EllipsisComp, {
       keyName: keyName,
@@ -80,6 +81,6 @@ value: value,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(CountInfo, {
+    }), /*#__PURE__*/_jsx(CountInfoComp, {
       value: value,
       keyName: keyName
-    }), /*#__PURE__*/_jsx(CountInfoExtra, {
+    }), /*#__PURE__*/_jsx(CountInfoExtraComps, {
       value: value,
@@ -86,0 +87,0 @@ keyName: keyName

esm/comps/Value.js

 import _extends from "@babel/runtime/helpers/extends";
-import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from './ReRender/Types';
+import { TypeString, TypeTrue, TypeNull, TypeFalse, TypeFloat, TypeBigint, TypeInt, TypeDate, TypeUndefined, TypeNan, TypeUrl } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -4,0 +4,0 @@ export var isFloat = n => Number(n) === n && n % 1 !== 0 || isNaN(n);

esm/index.d.ts

@@ -33,3 +33,3 @@ /// <reference types="react" />
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
@@ -36,0 +36,0 @@ /** This property contains your input JSON */

esm/index.js

@@ -40,3 +40,3 @@ import _extends from "@babel/runtime/helpers/extends";
 export * from './store/Types';
-export * from './comps/ReRender/Symbols';
+export * from './symbol';
 var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
@@ -43,0 +43,0 @@ var {

esm/section/CountInfo.d.ts

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

esm/section/CountInfo.js

@@ -0,3 +1,9 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { useStore } from '../store';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfo = props => {
@@ -10,2 +16,38 @@ var {
 };
-CountInfo.displayName = 'JVR.CountInfo';
+CountInfo.displayName = 'JVR.CountInfo';
+export var CountInfoComp = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    displayObjectSize
+  } = useStore();
+  var {
+    CountInfo: Comp = {}
+  } = useSectionStore();
+  if (!displayObjectSize) return null;
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  var Elm = as || 'span';
+  reset.style = _extends({}, reset.style, props.style);
+  var len = Object.keys(value).length;
+  if (!reset.children) {
+    reset.children = len + " items";
+  }
+  var elmProps = _extends({}, reset, other);
+  var isRender = render && typeof render === 'function';
+  var child = isRender && render(_extends({}, elmProps, {
+    'data-length': len
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoComp.displayName = 'JVR.CountInfoComp';

esm/section/CountInfoExtra.d.ts

@@ -0,3 +1,4 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
-import { type SectionElement } from '../store/Section';
+import { type SectionElement, type SectionElementProps } from '../store/Section';
 export declare const CountInfoExtra: {
@@ -7,1 +8,9 @@ <K extends TagType>(props: SectionElement<K>): null;
 };
+export interface CountInfoExtraCompsProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+}
+export declare const CountInfoExtraComps: {
+    <T extends object>(props: SectionElementProps<TagType> & CountInfoExtraCompsProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

esm/section/CountInfoExtra.js

@@ -0,3 +1,8 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["value", "keyName"],
+  _excluded2 = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var CountInfoExtra = props => {
@@ -10,2 +15,28 @@ var {
 };
-CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+CountInfoExtra.displayName = 'JVR.CountInfoExtra';
+export var CountInfoExtraComps = props => {
+  var {
+      value = {},
+      keyName
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  var {
+    CountInfoExtra: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
+  if (!render && !reset.children) return null;
+  var Elm = as || 'span';
+  var isRender = render && typeof render === 'function';
+  var elmProps = _extends({}, reset, other);
+  var child = isRender && render(elmProps, {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, elmProps));
+};
+CountInfoExtraComps.displayName = 'JVR.CountInfoExtraComps';

esm/section/Ellipsis.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 import { type TagType } from '../store/Types';
@@ -7,1 +8,10 @@ import { type SectionElement } from '../store/Section';
 };
+export interface EllipsisCompProps<T extends object> {
+    value?: T;
+    keyName: string | number;
+    isExpanded: boolean;
+}
+export declare const EllipsisComp: {
+    <T extends object>({ isExpanded, value, keyName }: EllipsisCompProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    displayName: string;
+};

esm/section/Ellipsis.js

@@ -0,3 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var Ellipsis = props => {
@@ -10,2 +14,28 @@ var {
 };
-Ellipsis.displayName = 'JVR.Ellipsis';
+Ellipsis.displayName = 'JVR.Ellipsis';
+export var EllipsisComp = _ref => {
+  var {
+    isExpanded,
+    value,
+    keyName
+  } = _ref;
+  var {
+    Ellipsis: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    'data-expanded': isExpanded
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  if (!isExpanded) return null;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset));
+};
+EllipsisComp.displayName = 'JVR.EllipsisComp';

esm/section/KeyName.d.ts

@@ -0,1 +1,2 @@
+import { type FC, type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
@@ -7,1 +8,7 @@ import { type SectionElement } from '../store/Section';
 };
+type KeyNameCompProps = {
+    keyName: string | number;
+    value?: unknown;
+};
+export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
+export {};

esm/section/KeyName.js

@@ -0,3 +1,7 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["as", "render"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
+import { jsx as _jsx } from "react/jsx-runtime";
 export var KeyName = props => {
@@ -10,2 +14,34 @@ var {
 };
-KeyName.displayName = 'JVR.KeyName';
+KeyName.displayName = 'JVR.KeyName';
+export var KeyNameComp = props => {
+  var {
+    children,
+    value,
+    keyName
+  } = props;
+  var isNumber = typeof children === 'number';
+  var style = {
+    color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
+  };
+  var {
+    KeyName: Comp = {}
+  } = useSectionStore();
+  var {
+      as,
+      render
+    } = Comp,
+    reset = _objectWithoutPropertiesLoose(Comp, _excluded);
+  reset.style = _extends({}, reset.style, style);
+  var Elm = as || 'span';
+  var child = render && typeof render === 'function' && render(_extends({}, reset, {
+    children
+  }), {
+    value,
+    keyName
+  });
+  if (child) return child;
+  return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {
+    children: children
+  }));
+};
+KeyNameComp.displayName = 'JVR.KeyNameComp';

esm/utils/useHighlight.js

@@ -41,3 +41,2 @@ import { useMemo, useRef, useEffect } from 'react';
     }
-    return false;
   }, [highlightUpdates, value]);
@@ -44,0 +43,0 @@ useEffect(() => {

package.json

 {
   "name": "@uiw/react-json-view",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "description": "JSON viewer for react.",
@@ -5,0 +5,0 @@ "main": "cjs/index.js",

README.md

@@ -10,3 +10,3 @@ react-json-view
 
-A React component for displaying and editing javascript arrays and JSON objects.
+A React component for displaying and editing javascript arrays and JSON objects. Preview of [**v1 documentation**](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html) is available [here](https://raw.githack.com/uiwjs/react-json-view/v1-docs/index.html).
 
@@ -30,3 +30,3 @@ <!--rehype:ignore:start-->
 
-The new version [**v2**](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html) and [examples](https://raw.githack.com/uiwjs/react-json-view/v2-docs/index.html). 
+The new version [**v2**](https://uiwjs.github.io/react-json-view/) has redesigned the API to make the code more maintainable and introduced a simpler and more flexible component customization rendering API. Each component can now have custom rendering, and the new API resembles React more closely. Preview [v2 documentation](https://uiwjs.github.io/react-json-view/) and [examples](https://uiwjs.github.io/react-json-view/). 
 
@@ -37,2 +37,3 @@ - [x] Complete all features of displaying JSON in v1.
 
+
 ## Quick Start
@@ -676,3 +677,3 @@
 
-Migrate from kkt v1 to v2. The new v2 version has removed the ~~`quotes`~~ and ~~`components`~~ props.
+Migrate from JSON View v1 to v2. The new v2 version has removed the ~~`quotes`~~ and ~~`components`~~ props.
 
@@ -679,0 +680,0 @@ ```diff

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

826

increased by0.12%

Worsened metrics

Total package byte prevSize

288413

decreased by-0.43%

Number of package files

223

decreased by-5.11%

Lines of code

6837

decreased by-1.21%

No dependency changes