@uiw/react-json-view 2.0.0-alpha.26 → 2.0.0-alpha.28

package/README.md

@@ -127,7 +127,6 @@ export default function Demo() {
 }
 ```
 
-
 Example of custom `vscode` theme styles: 
 
 ```tsx mdx:preview
@@ -682,6 +681,35 @@ export default function Demo() {
 
 This feature can be disabled with `highlightUpdates={false}`, and the default color can be changed with `--w-rjv-update-color`.
 
+## Do not display array index
+
+```tsx mdx:preview
+import React, { Fragment } from 'react';
+import JsonView from '@uiw/react-json-view';
+
+export default function Demo() {
+  const value = { data: ["123", 23] }
+  return (
+    <JsonView value={value} style={{ '--w-rjv-background-color': '#ffffff' }}>
+        <JsonView.Colon render={(props, { parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && props.children == ":") {
+              return <span />
+            }
+            return <span {...props} />
+        }}/>
+        <JsonView.KeyName 
+          render={({ ...props }, { type, parentValue, value, keyName }) => {
+            if (Array.isArray(parentValue) && Number.isFinite( props.children)) {
+              return <span />
+            }
+            return <span {...props} />
+          }}
+        />
+    </JsonView>
+  )
+}
+```
+
 ## Modify Icon Style
 
 Use built-in default icons.

package/cjs/Container.js

@@ -13,6 +13,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _NestedClose = require("./comps/NestedClose");
 var _NestedOpen = require("./comps/NestedOpen");
 var _KeyValues = require("./comps/KeyValues");
+var _useIdCompat = require("./comps/useIdCompat");
 var _ShowTools = require("./store/ShowTools");
 var _jsxRuntime = require("react/jsx-runtime");
 var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
@@ -30,7 +31,7 @@ var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function
     keyName = props.keyName,
     elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var dispatch = (0, _ShowTools.useShowToolsDispatch)();
-  var subkeyid = (0, _react.useId)();
+  var subkeyid = (0, _useIdCompat.useIdCompat)();
   var defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   var reset = {
     onMouseEnter: function onMouseEnter() {

package/cjs/comps/KeyValues.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.KeyValuesItem = exports.KeyValues = exports.KayName = void 0;
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
@@ -21,6 +21,7 @@ var _Container = require("../Container");
 var _symbol = require("../symbol");
 var _useHighlight = require("../utils/useHighlight");
 var _Copied = require("../comps/Copied");
+var _useIdCompat = require("../comps/useIdCompat");
 var _jsxRuntime = require("react/jsx-runtime");
 var KeyValues = exports.KeyValues = function KeyValues(props) {
   var _expands$expandKey;
@@ -98,23 +99,25 @@ var KayName = exports.KayName = function KayName(props) {
     highlightUpdates: highlightUpdates,
     highlightContainer: highlightContainer
   });
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
       ref: highlightContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "left"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, {
-        keyName: keyName,
-        value: value,
-        keys: keys,
-        parentValue: parentValue,
+      }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyName.KeyNameComp, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, compProps), {}, {
         children: keyName
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, {
+      })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Quote, (0, _objectSpread2["default"])({
         isNumber: isNumber,
         "data-placement": "right"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, {})]
+      }, compProps))]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Colon, (0, _objectSpread2["default"])({}, compProps))]
   });
 };
 KayName.displayName = 'JVR.KayName';
@@ -127,7 +130,7 @@ var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
     _props$keys2 = props.keys,
     keys = _props$keys2 === void 0 ? [] : _props$keys2;
   var dispatch = (0, _ShowTools.useShowToolsDispatch)();
-  var subkeyid = (0, _react.useId)();
+  var subkeyid = (0, _useIdCompat.useIdCompat)();
   var isMyArray = Array.isArray(value);
   var isMySet = value instanceof Set;
   var isMyMap = value instanceof Map;

package/cjs/comps/NestedOpen.js

@@ -62,11 +62,17 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName: keyName,
+    value: value,
+    keys: keys,
+    parentValue: parentValue
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, {
+    children: [showArrow && /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.Arrow, (0, _objectSpread2["default"])({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KayName, {
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.SetComp, {
       value: initialValue,
@@ -74,16 +80,16 @@ var NestedOpen = exports.NestedOpen = function NestedOpen(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_types.MapComp, {
       value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsOpen, (0, _objectSpread2["default"])({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Ellipsis.EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_symbol.BracketsClose, (0, _objectSpread2["default"])({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
+    }, compProps)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfo.CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CountInfoExtra.CountInfoExtraComps, {

package/cjs/comps/useIdCompat.d.ts

@@ -0,0 +1 @@
+export declare function useIdCompat(): string;

package/cjs/comps/useIdCompat.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIdCompat = useIdCompat;
+var _react = require("react");
+function useIdCompat() {
+  var idRef = (0, _react.useRef)(null);
+  if (idRef.current === null) {
+    idRef.current = 'custom-id-' + Math.random().toString(36).substr(2, 9);
+  }
+  return idRef.current;
+}

package/cjs/store/Symbols.d.ts

@@ -1,8 +1,15 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
+export interface SymbolsElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
 type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
     'data-type'?: string;
 };
 export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;

package/cjs/symbol/index.d.ts

@@ -1,9 +1,9 @@
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
+    <T extends object>(props: {
         isNumber?: boolean;
-    } & React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -11,19 +11,19 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: SymbolsElement<T> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
+    <K extends object>(props: {
         isBrackets?: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type BracketsCloseProps = {
@@ -31,7 +31,7 @@ type BracketsCloseProps = {
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

package/cjs/symbol/index.js

@@ -12,7 +12,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _Symbols = require("../store/Symbols");
 var _Expands = require("../store/Expands");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["isNumber"],
+var _excluded = ["isNumber", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render"],
   _excluded3 = ["as", "render"],
   _excluded4 = ["as", "render"],
@@ -26,6 +26,10 @@ var Quote = exports.Quote = function Quote(props) {
     _useSymbolsStore$Quot = _useSymbolsStore.Quote,
     Comp = _useSymbolsStore$Quot === void 0 ? {} : _useSymbolsStore$Quot;
   var isNumber = props.isNumber,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   if (isNumber) return null;
   var as = Comp.as,
@@ -33,7 +37,13 @@ var Quote = exports.Quote = function Quote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded2);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = render && typeof render === 'function' && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
@@ -48,12 +58,16 @@ var ValueQuote = exports.ValueQuote = function ValueQuote(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded3);
   var Elm = as || 'span';
   var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset);
-  var child = render && typeof render === 'function' && render(elmProps);
+  var child = render && typeof render === 'function' && render(elmProps, {});
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, elmProps));
 };
 ValueQuote.displayName = 'JVR.ValueQuote';
-var Colon = exports.Colon = function Colon() {
+var Colon = exports.Colon = function Colon(props) {
+  var value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore3 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore3$Col = _useSymbolsStore3.Colon,
     Comp = _useSymbolsStore3$Col === void 0 ? {} : _useSymbolsStore3$Col;
@@ -61,7 +75,12 @@ var Colon = exports.Colon = function Colon() {
     render = Comp.render,
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded4);
   var Elm = as || 'span';
-  var child = render && typeof render === 'function' && render(reset);
+  var child = render && typeof render === 'function' && render(reset, {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  });
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])({}, reset));
 };
@@ -71,7 +90,12 @@ var Arrow = exports.Arrow = function Arrow(props) {
     _useSymbolsStore4$Arr = _useSymbolsStore4.Arrow,
     Comp = _useSymbolsStore4$Arr === void 0 ? {} : _useSymbolsStore4$Arr;
   var expands = (0, _Expands.useExpandsStore)();
-  var expandKey = props.expandKey;
+  var expandKey = props.expandKey,
+    resetStyle = props.style,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var isExpanded = !!expands[expandKey];
   var as = Comp.as,
     style = Comp.style,
@@ -79,44 +103,71 @@ var Arrow = exports.Arrow = function Arrow(props) {
     reset = (0, _objectWithoutProperties2["default"])(Comp, _excluded5);
   var Elm = as || 'span';
   var isRender = render && typeof render === 'function';
-  var child = isRender && render((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
+  var elmProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
     'data-expanded': isExpanded,
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
-  }));
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
+  });
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
+  var child = isRender && render(elmProps, result);
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {
-    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), props.style)
+    style: (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, style), resetStyle)
   }));
 };
 Arrow.displayName = 'JVR.Arrow';
-var BracketsOpen = exports.BracketsOpen = function BracketsOpen(_ref) {
-  var isBrackets = _ref.isBrackets;
+var BracketsOpen = exports.BracketsOpen = function BracketsOpen(props) {
+  var isBrackets = props.isBrackets,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
   var _useSymbolsStore5 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore5$Bra = _useSymbolsStore5.BracketsLeft,
     BracketsLeft = _useSymbolsStore5$Bra === void 0 ? {} : _useSymbolsStore5$Bra,
     _useSymbolsStore5$Bra2 = _useSymbolsStore5.BraceLeft,
     BraceLeft = _useSymbolsStore5$Bra2 === void 0 ? {} : _useSymbolsStore5$Bra2;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (isBrackets) {
     var as = BracketsLeft.as,
       _render = BracketsLeft.render,
       reset = (0, _objectWithoutProperties2["default"])(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__*/(0, _jsxRuntime.jsx)(BracketsLeftComp, (0, _objectSpread2["default"])({}, reset));
   }
   var elm = BraceLeft.as,
     render = BraceLeft.render,
-    props = (0, _objectWithoutProperties2["default"])(BraceLeft, _excluded7);
+    resetProps = (0, _objectWithoutProperties2["default"])(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__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, props));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(BraceLeftComp, (0, _objectSpread2["default"])({}, resetProps));
 };
 BracketsOpen.displayName = 'JVR.BracketsOpen';
-var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
-  var isBrackets = _ref2.isBrackets,
-    isVisiable = _ref2.isVisiable;
+var BracketsClose = exports.BracketsClose = function BracketsClose(props) {
+  var isBrackets = props.isBrackets,
+    isVisiable = props.isVisiable,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys;
+  var result = {
+    value: value,
+    parentValue: parentValue,
+    keyName: keyName,
+    keys: keys || (keyName ? [keyName] : [])
+  };
   if (!isVisiable) return null;
   var _useSymbolsStore6 = (0, _Symbols.useSymbolsStore)(),
     _useSymbolsStore6$Bra = _useSymbolsStore6.BracketsRight,
@@ -128,7 +179,7 @@ var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
       _render2 = BracketsRight.render,
       _reset = (0, _objectWithoutProperties2["default"])(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__*/(0, _jsxRuntime.jsx)(BracketsRightComp, (0, _objectSpread2["default"])({}, _reset));
   }
@@ -136,7 +187,7 @@ var BracketsClose = exports.BracketsClose = function BracketsClose(_ref2) {
     render = BraceRight.render,
     reset = (0, _objectWithoutProperties2["default"])(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__*/(0, _jsxRuntime.jsx)(BraceRightComp, (0, _objectSpread2["default"])({}, reset));
 };

package/esm/Container.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
 var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
-import React, { forwardRef, useId } from 'react';
+import React, { forwardRef } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
 import { KeyValues } from './comps/KeyValues';
+import { useIdCompat } from './comps/useIdCompat';
 import { useShowToolsDispatch } from './store/ShowTools';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var Container = /*#__PURE__*/forwardRef((props, ref) => {
@@ -19,7 +20,7 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
   var dispatch = useShowToolsDispatch();
-  var subkeyid = useId();
+  var subkeyid = useIdCompat();
   var defaultClassNames = [className, 'w-rjv-inner'].filter(Boolean).join(' ');
   var reset = {
     onMouseEnter: () => dispatch({

package/esm/comps/KeyValues.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Fragment, useId, useRef } from 'react';
+import { Fragment, useRef } from 'react';
 import { useStore } from '../store';
 import { useExpandsStore } from '../store/Expands';
 import { useShowToolsDispatch } from '../store/ShowTools';
@@ -10,6 +10,7 @@ import { Container } from '../Container';
 import { Quote, Colon } from '../symbol';
 import { useHighlight } from '../utils/useHighlight';
 import { Copied } from '../comps/Copied';
+import { useIdCompat } from '../comps/useIdCompat';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var KeyValues = props => {
   var _expands$expandKey;
@@ -81,23 +82,25 @@ export var KayName = props => {
     highlightUpdates,
     highlightContainer
   });
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
   return /*#__PURE__*/_jsxs(Fragment, {
     children: [/*#__PURE__*/_jsxs("span", {
       ref: highlightContainer,
-      children: [/*#__PURE__*/_jsx(Quote, {
+      children: [/*#__PURE__*/_jsx(Quote, _extends({
         isNumber: isNumber,
         "data-placement": "left"
-      }), /*#__PURE__*/_jsx(KeyNameComp, {
-        keyName: keyName,
-        value: value,
-        keys: keys,
-        parentValue: parentValue,
+      }, compProps)), /*#__PURE__*/_jsx(KeyNameComp, _extends({}, compProps, {
         children: keyName
-      }), /*#__PURE__*/_jsx(Quote, {
+      })), /*#__PURE__*/_jsx(Quote, _extends({
         isNumber: isNumber,
         "data-placement": "right"
-      })]
-    }), /*#__PURE__*/_jsx(Colon, {})]
+      }, compProps))]
+    }), /*#__PURE__*/_jsx(Colon, _extends({}, compProps))]
   });
 };
 KayName.displayName = 'JVR.KayName';
@@ -110,7 +113,7 @@ export var KeyValuesItem = props => {
     keys = []
   } = props;
   var dispatch = useShowToolsDispatch();
-  var subkeyid = useId();
+  var subkeyid = useIdCompat();
   var isMyArray = Array.isArray(value);
   var isMySet = value instanceof Set;
   var isMyMap = value instanceof Map;

package/esm/comps/NestedOpen.js

@@ -58,11 +58,17 @@ export var NestedOpen = props => {
   if (showArrow) {
     reset.onClick = click;
   }
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
   return /*#__PURE__*/_jsxs("span", _extends({}, reset, {
-    children: [showArrow && /*#__PURE__*/_jsx(Arrow, {
+    children: [showArrow && /*#__PURE__*/_jsx(Arrow, _extends({
       style: arrowStyle,
       expandKey: expandKey
-    }), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
+    }, compProps)), (keyName || typeof keyName === 'number') && /*#__PURE__*/_jsx(KayName, {
       keyName: keyName
     }), /*#__PURE__*/_jsx(SetComp, {
       value: initialValue,
@@ -70,16 +76,16 @@ export var NestedOpen = props => {
     }), /*#__PURE__*/_jsx(MapComp, {
       value: initialValue,
       keyName: keyName
-    }), /*#__PURE__*/_jsx(BracketsOpen, {
+    }), /*#__PURE__*/_jsx(BracketsOpen, _extends({
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(EllipsisComp, {
+    }, compProps)), /*#__PURE__*/_jsx(EllipsisComp, {
       keyName: keyName,
       value: value,
       isExpanded: isExpanded
-    }), /*#__PURE__*/_jsx(BracketsClose, {
+    }), /*#__PURE__*/_jsx(BracketsClose, _extends({
       isVisiable: isExpanded || !showArrow,
       isBrackets: isArray || isMySet
-    }), /*#__PURE__*/_jsx(CountInfoComp, {
+    }, compProps)), /*#__PURE__*/_jsx(CountInfoComp, {
       value: value,
       keyName: keyName
     }), /*#__PURE__*/_jsx(CountInfoExtraComps, {

package/esm/comps/useIdCompat.d.ts

@@ -0,0 +1 @@
+export declare function useIdCompat(): string;

package/esm/comps/useIdCompat.js

@@ -0,0 +1,8 @@
+import { useRef } from 'react';
+export function useIdCompat() {
+  var idRef = useRef(null);
+  if (idRef.current === null) {
+    idRef.current = 'custom-id-' + Math.random().toString(36).substr(2, 9);
+  }
+  return idRef.current;
+}

package/esm/store/Symbols.d.ts

@@ -1,8 +1,15 @@
 import { FC, PropsWithChildren, ElementType, ComponentPropsWithoutRef } from 'react';
 import { type TagType } from './Types';
+export interface SymbolsElementResult<T extends object, K = string | number> {
+    value?: T;
+    parentValue?: T;
+    keyName?: K;
+    /** Index of the parent `keyName` */
+    keys?: K[];
+}
 type SymbolsElementProps<T extends TagType = 'span'> = {
     as?: T;
-    render?: (props: SymbolsElement<T>) => React.ReactNode;
+    render?: (props: SymbolsElement<T>, result: SymbolsElementResult<object>) => React.ReactNode;
     'data-type'?: string;
 };
 export type SymbolsElement<T extends TagType = 'span'> = SymbolsElementProps<T> & ComponentPropsWithoutRef<T>;

package/esm/symbol/index.d.ts

@@ -1,9 +1,9 @@
-import { type SymbolsElement } from '../store/Symbols';
+import { type SymbolsElement, type SymbolsElementResult } from '../store/Symbols';
 import { type TagType } from '../store/Types';
 export declare const Quote: {
-    (props: {
+    <T extends object>(props: {
         isNumber?: boolean;
-    } & React.HTMLAttributes<HTMLElement>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    } & React.HTMLAttributes<HTMLElement> & SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export declare const ValueQuote: {
@@ -11,19 +11,19 @@ export declare const ValueQuote: {
     displayName: string;
 };
 export declare const Colon: {
-    (): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: SymbolsElementResult<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const Arrow: {
-    <T extends TagType>(props: SymbolsElement<T> & {
+    <T extends TagType, K extends object>(props: SymbolsElement<T> & {
         expandKey: string;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const BracketsOpen: {
-    ({ isBrackets }: {
+    <K extends object>(props: {
         isBrackets?: boolean;
-    }): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    } & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 type BracketsCloseProps = {
@@ -31,7 +31,7 @@ type BracketsCloseProps = {
     isVisiable?: boolean;
 };
 export declare const BracketsClose: {
-    ({ isBrackets, isVisiable }: BracketsCloseProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
+    <K extends object>(props: BracketsCloseProps & SymbolsElementResult<K>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };
 export {};

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"],
@@ -18,7 +18,11 @@ export var Quote = props => {
     Quote: Comp = {}
   } = useSymbolsStore();
   var {
-      isNumber
+      isNumber,
+      value,
+      parentValue,
+      keyName,
+      keys
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   if (isNumber) return null;
@@ -29,7 +33,13 @@ 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);
+  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 +56,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 +77,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 +93,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 +109,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 +151,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 +159,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 +193,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 +203,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/package.json

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