@uiw/react-json-view 2.0.0-alpha.13 → 2.0.0-alpha.14

package/cjs/Container.d.ts

@@ -6,5 +6,7 @@ export interface ContainerProps<T extends object> extends React.HTMLAttributes<H
     level?: number;
     value?: T;
     initialValue?: T;
+    /** Index of the parent `keyName` */
+    keys?: (string | number)[];
 }
 export declare const Container: React.ForwardRefExoticComponent<ContainerProps<object> & React.RefAttributes<HTMLDivElement>>;

package/cjs/Container.js

@@ -15,7 +15,7 @@ var _NestedOpen = require("./comps/NestedOpen");
 var _KeyValues = require("./comps/KeyValues");
 var _ShowTools = require("./store/ShowTools");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
+var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
 var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -26,6 +26,7 @@ var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function
     level = _props$level === void 0 ? 1 : _props$level,
     value = props.value,
     initialValue = props.initialValue,
+    keys = props.keys,
     keyName = props.keyName,
     elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var dispatch = (0, _ShowTools.useShowToolsDispatch)();
@@ -52,7 +53,8 @@ var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyValues.KeyValues, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_NestedClose.NestedClose, {
       expandKey: subkeyid,
       value: value,

package/cjs/comps/KeyValues.d.ts

@@ -1,7 +1,5 @@
-interface KeyValuesProps<T extends object> {
-    keyName?: string | number;
-    value?: T;
-    parentValue?: T;
+import { type SectionElementResult } from '../store/Section';
+interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
     expandKey?: string;
     level: number;
 }

package/cjs/comps/KeyValues.js

@@ -8,6 +8,7 @@ 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 _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _store = require("../store");
@@ -25,7 +26,9 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
   var value = props.value,
     _props$expandKey = props.expandKey,
     expandKey = _props$expandKey === void 0 ? '' : _props$expandKey,
-    level = props.level;
+    level = props.level,
+    _props$keys = props.keys,
+    keys = _props$keys === void 0 ? [] : _props$keys;
   var expands = (0, _Expands.useExpandsStore)();
   var _useStore = (0, _store.useStore)(),
     objectSortKeys = _useStore.objectSortKeys,
@@ -72,6 +75,7 @@ var KeyValues = exports.KeyValues = function KeyValues(props) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(KeyValuesItem, {
         parentValue: value,
         keyName: key,
+        keys: [].concat((0, _toConsumableArray2["default"])(keys), [key]),
         value: val,
         level: level
       }, idx);
@@ -116,7 +120,9 @@ var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
     value = props.value,
     parentValue = props.parentValue,
     _props$level = props.level,
-    level = _props$level === void 0 ? 0 : _props$level;
+    level = _props$level === void 0 ? 0 : _props$level,
+    _props$keys2 = props.keys,
+    keys = _props$keys2 === void 0 ? [] : _props$keys2;
   var dispatch = (0, _ShowTools.useShowToolsDispatch)();
   var subkeyid = (0, _react.useId)();
   var isMyArray = Array.isArray(value);
@@ -133,6 +139,7 @@ var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
       value: myValue,
       parentValue: parentValue,
       initialValue: value,
+      keys: keys,
       level: level + 1
     });
   }
@@ -148,6 +155,7 @@ var KeyValuesItem = exports.KeyValuesItem = function KeyValuesItem(props) {
     className: "w-rjv-line",
     value: value,
     keyName: keyName,
+    keys: keys,
     parentValue: parentValue
   }, reset), {}, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(KayName, {

package/cjs/section/KeyName.d.ts

@@ -1,14 +1,14 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
-type KeyNameCompProps = {
-    keyName: string | number;
-    value?: unknown;
-    parentValue?: unknown;
+export interface KeyNameCompProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement>, SectionElementResult<T> {
+}
+export declare const KeyNameComp: {
+    <T extends object>(props: PropsWithChildren<KeyNameCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
-export {};

package/cjs/section/KeyName.js

@@ -23,7 +23,8 @@ var KeyNameComp = exports.KeyNameComp = function KeyNameComp(props) {
   var children = props.children,
     value = props.value,
     parentValue = props.parentValue,
-    keyName = props.keyName;
+    keyName = props.keyName,
+    keys = props.keys;
   var isNumber = typeof children === 'number';
   var style = {
     color: isNumber ? 'var(--w-rjv-key-number, #268bd2)' : 'var(--w-rjv-key-string, #002b36)'
@@ -41,7 +42,8 @@ var KeyNameComp = exports.KeyNameComp = function KeyNameComp(props) {
   }), {
     value: value,
     parentValue: parentValue,
-    keyName: keyName
+    keyName: keyName,
+    keys: keys
   });
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, reset), {}, {

package/cjs/section/Row.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const Row: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
-export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
-    value?: T;
-    keyName?: string | number;
-    parentValue?: unknown;
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement>, SectionElementResult<T> {
 }
 export declare const RowComp: {
-    <T extends object>({ children, value, keyName, parentValue, ...other }: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/cjs/section/Row.js

@@ -10,7 +10,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _Section = require("../store/Section");
 var _useRender = require("../utils/useRender");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["children", "value", "keyName", "parentValue"],
+var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render", "children"];
 var Row = exports.Row = function Row(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
@@ -20,13 +20,13 @@ var Row = exports.Row = function Row(props) {
   return null;
 };
 Row.displayName = 'JVR.Row';
-var RowComp = exports.RowComp = function RowComp(_ref) {
-  var children = _ref.children,
-    value = _ref.value,
-    _ref$keyName = _ref.keyName,
-    keyName = _ref$keyName === void 0 ? '' : _ref$keyName,
-    parentValue = _ref.parentValue,
-    other = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+var RowComp = exports.RowComp = function RowComp(props) {
+  var children = props.children,
+    value = props.value,
+    parentValue = props.parentValue,
+    keyName = props.keyName,
+    keys = props.keys,
+    other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useSectionStore2 = (0, _Section.useSectionStore)(),
     _useSectionStore2$Row = _useSectionStore2.Row,
     Comp = _useSectionStore2$Row === void 0 ? {} : _useSectionStore2$Row;
@@ -40,7 +40,8 @@ var RowComp = exports.RowComp = function RowComp(_ref) {
   }), {
     value: value,
     keyName: keyName,
-    parentValue: parentValue
+    parentValue: parentValue,
+    keys: keys
   });
   if (child) return child;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(Elm, (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, other), reset), {}, {

package/cjs/store/Section.d.ts

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

package/esm/Container.d.ts

@@ -6,5 +6,7 @@ export interface ContainerProps<T extends object> extends React.HTMLAttributes<H
     level?: number;
     value?: T;
     initialValue?: T;
+    /** Index of the parent `keyName` */
+    keys?: (string | number)[];
 }
 export declare const Container: React.ForwardRefExoticComponent<ContainerProps<object> & React.RefAttributes<HTMLDivElement>>;

package/esm/Container.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
+var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
 import React, { forwardRef, useId } from 'react';
 import { NestedClose } from './comps/NestedClose';
 import { NestedOpen } from './comps/NestedOpen';
@@ -14,6 +14,7 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
       level = 1,
       value,
       initialValue,
+      keys,
       keyName
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
@@ -41,7 +42,8 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
     }), /*#__PURE__*/_jsx(KeyValues, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys
     }), /*#__PURE__*/_jsx(NestedClose, {
       expandKey: subkeyid,
       value: value,

package/esm/comps/KeyValues.d.ts

@@ -1,7 +1,5 @@
-interface KeyValuesProps<T extends object> {
-    keyName?: string | number;
-    value?: T;
-    parentValue?: T;
+import { type SectionElementResult } from '../store/Section';
+interface KeyValuesProps<T extends object> extends SectionElementResult<T> {
     expandKey?: string;
     level: number;
 }

package/esm/comps/KeyValues.js

@@ -16,7 +16,8 @@ export var KeyValues = props => {
   var {
     value,
     expandKey = '',
-    level
+    level,
+    keys = []
   } = props;
   var expands = useExpandsStore();
   var {
@@ -55,6 +56,7 @@ export var KeyValues = props => {
       return /*#__PURE__*/_jsx(KeyValuesItem, {
         parentValue: value,
         keyName: key,
+        keys: [...keys, key],
         value: val,
         level: level
       }, idx);
@@ -102,7 +104,8 @@ export var KeyValuesItem = props => {
     keyName,
     value,
     parentValue,
-    level = 0
+    level = 0,
+    keys = []
   } = props;
   var dispatch = useShowToolsDispatch();
   var subkeyid = useId();
@@ -120,6 +123,7 @@ export var KeyValuesItem = props => {
       value: myValue,
       parentValue: parentValue,
       initialValue: value,
+      keys: keys,
       level: level + 1
     });
   }
@@ -135,6 +139,7 @@ export var KeyValuesItem = props => {
     className: "w-rjv-line",
     value: value,
     keyName: keyName,
+    keys: keys,
     parentValue: parentValue
   }, reset, {
     children: [/*#__PURE__*/_jsx(KayName, {

package/esm/section/KeyName.d.ts

@@ -1,14 +1,14 @@
-import { type FC, type PropsWithChildren } from 'react';
+import { type PropsWithChildren } from 'react';
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const KeyName: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
-type KeyNameCompProps = {
-    keyName: string | number;
-    value?: unknown;
-    parentValue?: unknown;
+export interface KeyNameCompProps<T extends object> extends React.HTMLAttributes<HTMLSpanElement>, SectionElementResult<T> {
+}
+export declare const KeyNameComp: {
+    <T extends object>(props: PropsWithChildren<KeyNameCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    displayName: string;
 };
-export declare const KeyNameComp: FC<PropsWithChildren<KeyNameCompProps>>;
-export {};

package/esm/section/KeyName.js

@@ -17,7 +17,8 @@ export var KeyNameComp = props => {
     children,
     value,
     parentValue,
-    keyName
+    keyName,
+    keys
   } = props;
   var isNumber = typeof children === 'number';
   var style = {
@@ -38,7 +39,8 @@ export var KeyNameComp = props => {
   }), {
     value,
     parentValue,
-    keyName
+    keyName,
+    keys
   });
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, reset, {

package/esm/section/Row.d.ts

@@ -1,16 +1,14 @@
 /// <reference types="react" />
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+import { type SectionElementResult } from '../store/Section';
 export declare const Row: {
     <K extends TagType>(props: SectionElement<K>): null;
     displayName: string;
 };
-export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement> {
-    value?: T;
-    keyName?: string | number;
-    parentValue?: unknown;
+export interface RowCompProps<T extends object> extends React.HTMLAttributes<HTMLDivElement>, SectionElementResult<T> {
 }
 export declare const RowComp: {
-    <T extends object>({ children, value, keyName, parentValue, ...other }: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
+    <T extends object>(props: import("react").PropsWithChildren<RowCompProps<T>>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/section/Row.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["children", "value", "keyName", "parentValue"],
+var _excluded = ["children", "value", "parentValue", "keyName", "keys"],
   _excluded2 = ["as", "render", "children"];
 import { useSectionStore } from '../store/Section';
 import { useSectionRender } from '../utils/useRender';
@@ -13,14 +13,15 @@ export var Row = props => {
   return null;
 };
 Row.displayName = 'JVR.Row';
-export var RowComp = _ref => {
+export var RowComp = props => {
   var {
       children,
       value,
-      keyName = '',
-      parentValue
-    } = _ref,
-    other = _objectWithoutPropertiesLoose(_ref, _excluded);
+      parentValue,
+      keyName,
+      keys
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   var {
     Row: Comp = {}
   } = useSectionStore();
@@ -35,7 +36,8 @@ export var RowComp = _ref => {
   }), {
     value,
     keyName,
-    parentValue
+    parentValue,
+    keys
   });
   if (child) return child;
   return /*#__PURE__*/_jsx(Elm, _extends({}, other, reset, {

package/esm/store/Section.d.ts

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

package/package.json

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