@uiw/react-json-view 2.0.0-alpha.4 → 2.0.0-alpha.40

package/dark.d.ts

@@ -1,3 +1,4 @@
 declare module '@uiw/react-json-view/dark' {
-  export const darkTheme: import('react').CSSProperties;
+  import type * as CSS from 'csstype';
+  export const darkTheme: CSS.Properties<string | number>;
 }

package/editor.d.ts

@@ -2,35 +2,37 @@
 
 declare module '@uiw/react-json-view/editor' {
   import { JsonViewProps } from '@uiw/react-json-view';
-  import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
+  // import type { CountInfoExtraProps } from '@uiw/react-json-view/cjs/editor/countInfoExtra';
   type Option = {
-      value: string;
-      prevValue: string;
-      keyName: string | number;
+    value: string;
+    prevValue: string;
+    keyName: string | number;
   };
 
   export interface JsonViewEditorProps<T extends object> extends JsonViewProps<T> {
     /** Callback when value edit functionality */
     onEdit?: (option: {
-        value: unknown;
-        oldValue: unknown;
-        keyName?: string | number;
-        parentName?: string | number;
-        type?: 'value' | 'key';
+      value: unknown;
+      oldValue: unknown;
+      keyName?: string | number;
+      parentName?: string | number;
+      type?: 'value' | 'key';
     }) => void;
-    /**
-     * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
-     * @returns {boolean} Returning false from onAdd will prevent the change from being made.
-     */
-    onAdd?: CountInfoExtraProps<T>['onAdd'];
-    /**
-     * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed. 
-     * @returns Returning false from onDelete will prevent the change from being made. 
-     */
-    onDelete?: CountInfoExtraProps<T>['onDelete'];
+    // /**
+    //  * When a callback function is passed in, add functionality is enabled. The callback is invoked before additions are completed.
+    //  * @returns {boolean} Returning false from onAdd will prevent the change from being made.
+    //  */
+    // onAdd?: CountInfoExtraProps<T>['onAdd'];
+    // /**
+    //  * When a callback function is passed in, delete functionality is enabled. The callback is invoked before deletions are completed.
+    //  * @returns Returning false from onDelete will prevent the change from being made.
+    //  */
+    // onDelete?: CountInfoExtraProps<T>['onDelete'];
     /** Whether enable edit feature. @default true */
     editable?: boolean;
   }
-  const JsonViewEditor: import("react").ForwardRefExoticComponent<Omit<JsonViewEditorProps<object>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  const JsonViewEditor: import('react').ForwardRefExoticComponent<
+    Omit<JsonViewEditorProps<object>, 'ref'> & import('react').RefAttributes<HTMLDivElement>
+  >;
   export default JsonViewEditor;
 }

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,24 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keyName"];
-import React, { forwardRef, useId } from 'react';
-import { NestedClose } from './comps/NestedClose';
-import { NestedOpen } from './comps/NestedOpen';
-import { KeyValues } from './comps/KeyValues';
-import { useShowToolsDispatch } from './store/ShowTools';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+var _excluded = ["className", "children", "parentValue", "keyid", "level", "value", "initialValue", "keys", "keyName"];
+import React, { forwardRef } from 'react';
+import { NestedClose } from "./comps/NestedClose.js";
+import { NestedOpen } from "./comps/NestedOpen.js";
+import { KeyValues } from "./comps/KeyValues.js";
+import { useIdCompat } from "./comps/useIdCompat.js";
+import { useShowToolsDispatch } from "./store/ShowTools.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var Container = /*#__PURE__*/forwardRef((props, ref) => {
   var {
       className = '',
+      parentValue,
       level = 1,
       value,
       initialValue,
+      keys,
       keyName
     } = 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({
@@ -36,16 +38,24 @@ export var Container = /*#__PURE__*/forwardRef((props, ref) => {
       expandKey: subkeyid,
       value: value,
       level: level,
+      keys: keys,
+      parentValue: parentValue,
       keyName: keyName,
       initialValue: initialValue
     }), /*#__PURE__*/_jsx(KeyValues, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys,
+      parentValue: parentValue,
+      keyName: keyName
     }), /*#__PURE__*/_jsx(NestedClose, {
       expandKey: subkeyid,
       value: value,
-      level: level
+      level: level,
+      keys: keys,
+      parentValue: parentValue,
+      keyName: keyName
     })]
   }));
 });

package/esm/arrow/TriangleArrow.js

@@ -13,7 +13,7 @@ export function TriangleArrow(props) {
     height: '1em',
     width: '1em',
     userSelect: 'none',
-    display: 'flex'
+    display: 'inline-flex'
   }, style);
   return /*#__PURE__*/_jsx("svg", _extends({
     viewBox: "0 0 24 24",

package/esm/comps/Copied.d.ts

@@ -1,14 +1,13 @@
-/// <reference types="react" />
+import { type SectionElementResult } from '../store/Section';
 import { type TagType } from '../store/Types';
 export type CopiedOption<T extends object> = {
     value?: T;
     copied: boolean;
     setCopied: React.Dispatch<React.SetStateAction<boolean>>;
 };
-export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement> {
-    value?: T;
-    keyName: string | number;
+export interface CopiedProps<T extends object> extends React.SVGProps<SVGSVGElement>, SectionElementResult<T> {
     expandKey: string;
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: T, parentValue?: T, expandKey?: string, keys?: (number | string)[]) => string;
 }
 export declare const Copied: {
     <T extends object, K extends TagType>(props: CopiedProps<T>): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;

package/esm/comps/Copied.js

@@ -1,22 +1,27 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["keyName", "value", "expandKey"],
+var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys", "beforeCopy"],
   _excluded2 = ["as", "render"];
 import { useState } from 'react';
-import { useStore } from '../store';
-import { useShowToolsStore } from '../store/ShowTools';
-import { useSectionStore } from '../store/Section';
+import { useStore } from "../store.js";
+import { useSectionStore } from "../store/Section.js";
+import { useShowToolsStore } from "../store/ShowTools.js";
+import { bigIntToString } from "../types/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var Copied = props => {
   var {
       keyName,
       value,
-      expandKey
+      parentValue,
+      expandKey,
+      keys,
+      beforeCopy
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   var {
     onCopied,
-    enableClipboard
+    enableClipboard,
+    beforeCopy: globalBeforeCopy
   } = useStore();
   var showTools = useShowToolsStore();
   var isShowTools = showTools[expandKey];
@@ -24,21 +29,51 @@ export var Copied = props => {
   var {
     Copied: Comp = {}
   } = useSectionStore();
+  var sectionBeforeCopy = Comp == null ? void 0 : Comp.beforeCopy;
   if (enableClipboard === false || !isShowTools) return null;
   var click = event => {
     event.stopPropagation();
-    var copyText = JSON.stringify(value, (key, value) => {
-      if (typeof value === 'bigint') {
-        return value.toString();
+    var copyText = '';
+    if (typeof value === 'number' && value === Infinity) {
+      copyText = 'Infinity';
+    } else if (typeof value === 'number' && isNaN(value)) {
+      copyText = 'NaN';
+    } else if (typeof value === 'bigint') {
+      copyText = bigIntToString(value);
+    } else if (value instanceof Date) {
+      copyText = value.toLocaleString();
+    } else {
+      copyText = JSON.stringify(value, (_, v) => typeof v === 'bigint' ? bigIntToString(v) : v, 2);
+    }
+
+    // Apply beforeCopy transformation if provided
+    // Priority: component prop > section prop > global prop
+    var finalBeforeCopy = beforeCopy || sectionBeforeCopy || globalBeforeCopy;
+    if (finalBeforeCopy && typeof finalBeforeCopy === 'function') {
+      copyText = finalBeforeCopy(copyText, keyName, value, parentValue, expandKey, keys);
+    }
+    onCopied && onCopied(copyText, value);
+    setCopied(true);
+    var _clipboard = navigator.clipboard || {
+      writeText(text) {
+        return new Promise((reslove, reject) => {
+          var textarea = document.createElement('textarea');
+          textarea.style.position = 'absolute';
+          textarea.style.opacity = '0';
+          textarea.style.left = '-99999999px';
+          textarea.value = text;
+          document.body.appendChild(textarea);
+          textarea.select();
+          if (!document.execCommand('copy')) {
+            reject();
+          } else {
+            reslove();
+          }
+          textarea.remove();
+        });
       }
-      return value;
-    }, 2);
-    if (typeof value === 'number' && value === Infinity) copyText = 'Infinity';
-    if (typeof value === 'number' && isNaN(value)) copyText = 'NaN';
-    if (typeof value === 'bigint') copyText = value + 'n';
-    navigator.clipboard.writeText(copyText).then(() => {
-      onCopied && onCopied(copyText, value);
-      setCopied(true);
+    };
+    _clipboard.writeText(copyText).then(() => {
       var timer = setTimeout(() => {
         setCopied(false);
         clearTimeout(timer);
@@ -46,6 +81,9 @@ export var Copied = props => {
     }).catch(error => {});
   };
   var svgProps = {
+    style: {
+      display: 'inline-flex'
+    },
     fill: copied ? 'var(--w-rjv-copied-success-color, #28a745)' : 'var(--w-rjv-copied-color, currentColor)',
     onClick: click
   };
@@ -53,13 +91,17 @@ export var Copied = props => {
       render
     } = Comp,
     reset = _objectWithoutPropertiesLoose(Comp, _excluded2);
-  var elmProps = _extends({}, reset, other, svgProps);
+  var elmProps = _extends({}, reset, other, svgProps, {
+    style: _extends({}, reset.style, other.style, svgProps.style)
+  });
   var isRender = render && typeof render === 'function';
   var child = isRender && render(_extends({}, elmProps, {
     'data-copied': copied
   }), {
     value,
-    keyName
+    keyName,
+    keys,
+    parentValue
   });
   if (child) return child;
   if (copied) {

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

@@ -1,33 +1,56 @@
 import _extends from "@babel/runtime/helpers/extends";
-import { Fragment, useId, useRef } from 'react';
-import { useStore } from '../store';
-import { useExpandsStore } from '../store/Expands';
-import { useShowToolsDispatch } from '../store/ShowTools';
-import { Value } from './Value';
-import { KeyNameComp } from '../section/KeyName';
-import { Container } from '../Container';
-import { Quote, Colon } from '../symbol';
-import { useHighlight } from '../utils/useHighlight';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useRef } from 'react';
+import { useStore } from "../store.js";
+import { useExpandsStore } from "../store/Expands.js";
+import { useShowToolsDispatch } from "../store/ShowTools.js";
+import { Value } from "./Value.js";
+import { KeyNameComp } from "../section/KeyName.js";
+import { RowComp } from "../section/Row.js";
+import { Container } from "../Container.js";
+import { Quote, Colon } from "../symbol/index.js";
+import { useHighlight } from "../utils/useHighlight.js";
+import { Copied } from "../comps/Copied.js";
+import { useIdCompat } from "../comps/useIdCompat.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export var KeyValues = props => {
   var _expands$expandKey;
   var {
+    keyName,
     value,
     expandKey = '',
-    level
+    level,
+    keys = [],
+    parentValue
   } = props;
   var expands = useExpandsStore();
   var {
     objectSortKeys,
     indentWidth,
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
-  var isMyArray = Array.isArray(value);
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value,
+    keys,
+    level,
+    keyName,
+    parentValue
+  });
+  if (shouldExpandNodeInitially && collapsed === false) {
+    if (expands[expandKey] === undefined && !shouldExpand) {
+      return null;
+    }
+  } else {
+    if (expands[expandKey] === undefined && shouldExpand) {
+      return null;
+    }
+  }
   if (isExpanded) {
     return null;
   }
+  var isMyArray = Array.isArray(value);
   // object
   var entries = isMyArray ? Object.entries(value).map(m => [Number(m[0]), m[1]]) : Object.entries(value);
   if (objectSortKeys) {
@@ -54,6 +77,7 @@ export var KeyValues = props => {
       return /*#__PURE__*/_jsx(KeyValuesItem, {
         parentValue: value,
         keyName: key,
+        keys: [...keys, key],
         value: val,
         level: level
       }, idx);
@@ -64,6 +88,8 @@ KeyValues.displayName = 'JVR.KeyValues';
 export var KayName = props => {
   var {
     keyName,
+    parentValue,
+    keys,
     value
   } = props;
   var {
@@ -76,21 +102,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,
+      }, 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';
@@ -99,10 +129,11 @@ export var KeyValuesItem = props => {
     keyName,
     value,
     parentValue,
-    level = 0
+    level = 0,
+    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;
@@ -117,6 +148,7 @@ export var KeyValuesItem = props => {
       value: myValue,
       parentValue: parentValue,
       initialValue: value,
+      keys: keys,
       level: level + 1
     });
   }
@@ -128,15 +160,27 @@ export var KeyValuesItem = props => {
       [subkeyid]: false
     })
   };
-  return /*#__PURE__*/_jsxs("div", _extends({
-    className: "w-rjv-line"
+  return /*#__PURE__*/_jsxs(RowComp, _extends({
+    className: "w-rjv-line",
+    value: value,
+    keyName: keyName,
+    keys: keys,
+    parentValue: parentValue
   }, reset, {
     children: [/*#__PURE__*/_jsx(KayName, {
       keyName: keyName,
-      value: value
+      value: value,
+      keys: keys,
+      parentValue: parentValue
     }), /*#__PURE__*/_jsx(Value, {
       keyName: keyName,
       value: value,
+      keys: keys
+    }), /*#__PURE__*/_jsx(Copied, {
+      keyName: keyName,
+      value: value,
+      keys: keys,
+      parentValue: parentValue,
       expandKey: subkeyid
     })]
   }));

package/esm/comps/NestedClose.d.ts

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

package/esm/comps/NestedClose.js

@@ -1,21 +1,41 @@
-import { useStore } from '../store';
-import { useExpandsStore } from '../store/Expands';
-import { BracketsClose } from '../symbol';
+import _extends from "@babel/runtime/helpers/extends";
+import { useStore } from "../store.js";
+import { useExpandsStore } from "../store/Expands.js";
+import { BracketsClose } from "../symbol/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export var NestedClose = props => {
   var _expands$expandKey;
   var {
+    keyName,
     value,
     expandKey,
-    level
+    parentValue,
+    level,
+    keys = []
   } = props;
   var expands = useExpandsStore();
-  var isArray = Array.isArray(value);
   var {
-    collapsed
+    collapsed,
+    shouldExpandNodeInitially
   } = useStore();
-  var isMySet = value instanceof Set;
-  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var defaultExpanded = typeof collapsed === 'boolean' ? collapsed : typeof collapsed === 'number' ? level > collapsed : false;
+  var isExpanded = (_expands$expandKey = expands[expandKey]) != null ? _expands$expandKey : shouldExpandNodeInitially ? false : defaultExpanded;
+  var shouldExpand = shouldExpandNodeInitially && shouldExpandNodeInitially(!isExpanded, {
+    value,
+    keys,
+    level,
+    keyName,
+    parentValue
+  });
+  if (shouldExpandNodeInitially && collapsed === false) {
+    if (expands[expandKey] === undefined && !shouldExpand) {
+      return null;
+    }
+  } else {
+    if (expands[expandKey] === undefined && shouldExpand) {
+      return null;
+    }
+  }
   var len = Object.keys(value).length;
   if (isExpanded || len === 0) {
     return null;
@@ -23,12 +43,21 @@ export var NestedClose = props => {
   var style = {
     paddingLeft: 4
   };
+  var compProps = {
+    keyName,
+    value,
+    keys,
+    parentValue
+  };
+  var isArray = Array.isArray(value);
+  var isMySet = value instanceof Set;
   return /*#__PURE__*/_jsx("div", {
     style: style,
-    children: /*#__PURE__*/_jsx(BracketsClose, {
-      isBrackets: isArray || isMySet,
+    children: /*#__PURE__*/_jsx(BracketsClose, _extends({
+      isBrackets: isArray || isMySet
+    }, compProps, {
       isVisiable: true
-    })
+    }))
   });
 };
 NestedClose.displayName = 'JVR.NestedClose';

package/esm/comps/NestedOpen.d.ts

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