@uiw/react-json-view 2.0.0-alpha.35 → 2.0.0-alpha.37

package/basic.d.ts

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

package/cjs/comps/Copied.d.ts

@@ -7,6 +7,7 @@ export type CopiedOption<T extends object> = {
 };
 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/cjs/comps/Copied.js

@@ -14,7 +14,7 @@ var _Section = require("../store/Section");
 var _ShowTools = require("../store/ShowTools");
 var _types = require("../types/");
 var _jsxRuntime = require("react/jsx-runtime");
-var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys"],
+var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys", "beforeCopy"],
   _excluded2 = ["as", "render"];
 var Copied = exports.Copied = function Copied(props) {
   var keyName = props.keyName,
@@ -22,10 +22,12 @@ var Copied = exports.Copied = function Copied(props) {
     parentValue = props.parentValue,
     expandKey = props.expandKey,
     keys = props.keys,
+    beforeCopy = props.beforeCopy,
     other = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var _useStore = (0, _store.useStore)(),
     onCopied = _useStore.onCopied,
-    enableClipboard = _useStore.enableClipboard;
+    enableClipboard = _useStore.enableClipboard,
+    globalBeforeCopy = _useStore.beforeCopy;
   var showTools = (0, _ShowTools.useShowToolsStore)();
   var isShowTools = showTools[expandKey];
   var _useState = (0, _react.useState)(false),
@@ -35,6 +37,7 @@ var Copied = exports.Copied = function Copied(props) {
   var _useSectionStore = (0, _Section.useSectionStore)(),
     _useSectionStore$Copi = _useSectionStore.Copied,
     Comp = _useSectionStore$Copi === void 0 ? {} : _useSectionStore$Copi;
+  var sectionBeforeCopy = Comp === null || Comp === void 0 ? void 0 : Comp.beforeCopy;
   if (enableClipboard === false || !isShowTools) return null;
   var click = function click(event) {
     event.stopPropagation();
@@ -52,6 +55,13 @@ var Copied = exports.Copied = function Copied(props) {
         return typeof v === 'bigint' ? (0, _types.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 || {

package/cjs/index.d.ts

@@ -72,6 +72,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     }) => void;
     /** Fires event when you copy */
     onCopied?: (text: string, value?: T) => void;
+    /** Transform the text before copying to clipboard */
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: T, parentValue?: T, expandKey?: string, keys?: (number | string)[]) => string;
 }
 type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     Bigint: typeof Bigint;

package/cjs/index.js

@@ -110,7 +110,7 @@ Object.keys(_symbol).forEach(function (key) {
     }
   });
 });
-var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied", "beforeCopy"];
 var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var _props$className = props.className,
     className = _props$className === void 0 ? '' : _props$className,
@@ -136,6 +136,7 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     objectSortKeys = _props$objectSortKeys === void 0 ? false : _props$objectSortKeys,
     onExpand = props.onExpand,
     onCopied = props.onCopied,
+    beforeCopy = props.beforeCopy,
     elmProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var defaultStyle = (0, _objectSpread2["default"])({
     lineHeight: 1.4,
@@ -158,7 +159,8 @@ var JsonView = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
       stringEllipsis: stringEllipsis,
       highlightUpdates: highlightUpdates,
       onCopied: onCopied,
-      onExpand: onExpand
+      onExpand: onExpand,
+      beforeCopy: beforeCopy
     },
     initialTypes: {
       displayDataTypes: displayDataTypes

package/cjs/section/Copied.d.ts

@@ -1,6 +1,9 @@
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+export type CopiedSectionElement<T extends TagType = 'svg'> = SectionElement<T> & {
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: object, parentValue?: object, expandKey?: string, keys?: (number | string)[]) => string;
+};
 export declare const Copied: {
-    <K extends TagType = "svg">(props: SectionElement<K>): null;
+    <K extends TagType = "svg">(props: CopiedSectionElement<K>): null;
     displayName: string;
 };

package/cjs/store.d.ts

@@ -6,6 +6,7 @@ export interface InitialState<T extends object> {
     value?: object;
     onExpand?: JsonViewProps<object>['onExpand'];
     onCopied?: JsonViewProps<object>['onCopied'];
+    beforeCopy?: JsonViewProps<T>['beforeCopy'];
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];

package/cjs/theme/basic.d.ts

@@ -1 +1,2 @@
-export declare const basicTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const basicTheme: CSS.Properties<string | number>;

package/cjs/theme/dark.d.ts

@@ -1 +1,2 @@
-export declare const darkTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const darkTheme: CSS.Properties<string | number>;

package/cjs/theme/github.dark.d.ts

@@ -1 +1,2 @@
-export declare const githubDarkTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubDarkTheme: CSS.Properties<string | number>;

package/cjs/theme/github.light.d.ts

@@ -1 +1,2 @@
-export declare const githubLightTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubLightTheme: CSS.Properties<string | number>;

package/cjs/theme/gruvbox.d.ts

@@ -1 +1,2 @@
-export declare const gruvboxTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const gruvboxTheme: CSS.Properties<string | number>;

package/cjs/theme/light.d.ts

@@ -1 +1,2 @@
-export declare const lightTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const lightTheme: CSS.Properties<string | number>;

package/cjs/theme/monokai.d.ts

@@ -1 +1,2 @@
-export declare const monokaiTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const monokaiTheme: CSS.Properties<string | number>;

package/cjs/theme/nord.d.ts

@@ -1 +1,2 @@
-export declare const nordTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const nordTheme: CSS.Properties<string | number>;

package/cjs/theme/vscode.d.ts

@@ -1 +1,2 @@
-export declare const vscodeTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const vscodeTheme: CSS.Properties<string | number>;

package/cjs/types/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { type FC, type PropsWithChildren } from 'react';
 export declare const bigIntToString: (bi?: BigInt | string) => string;
 export declare const SetComp: FC<PropsWithChildren<{
     value: unknown;

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/esm/comps/Copied.d.ts

@@ -7,6 +7,7 @@ export type CopiedOption<T extends object> = {
 };
 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,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys"],
+var _excluded = ["keyName", "value", "parentValue", "expandKey", "keys", "beforeCopy"],
   _excluded2 = ["as", "render"];
 import { useState } from 'react';
 import { useStore } from "../store.js";
@@ -14,12 +14,14 @@ export var Copied = props => {
       value,
       parentValue,
       expandKey,
-      keys
+      keys,
+      beforeCopy
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   var {
     onCopied,
-    enableClipboard
+    enableClipboard,
+    beforeCopy: globalBeforeCopy
   } = useStore();
   var showTools = useShowToolsStore();
   var isShowTools = showTools[expandKey];
@@ -27,6 +29,7 @@ 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();
@@ -42,6 +45,13 @@ export var Copied = props => {
     } 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 || {

package/esm/index.d.ts

@@ -72,6 +72,8 @@ export interface JsonViewProps<T extends object> extends React.DetailedHTMLProps
     }) => void;
     /** Fires event when you copy */
     onCopied?: (text: string, value?: T) => void;
+    /** Transform the text before copying to clipboard */
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: T, parentValue?: T, expandKey?: string, keys?: (number | string)[]) => string;
 }
 type JsonViewComponent = React.FC<React.PropsWithRef<JsonViewProps<object>>> & {
     Bigint: typeof Bigint;

package/esm/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
-var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied"];
+var _excluded = ["className", "style", "value", "children", "collapsed", "shouldExpandNodeInitially", "indentWidth", "displayObjectSize", "shortenTextAfterLength", "stringEllipsis", "highlightUpdates", "enableClipboard", "displayDataTypes", "objectSortKeys", "onExpand", "onCopied", "beforeCopy"];
 import { forwardRef } from 'react';
 import { Provider } from "./store.js";
 import { Container } from "./Container.js";
@@ -55,7 +55,8 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       displayDataTypes = true,
       objectSortKeys = false,
       onExpand,
-      onCopied
+      onCopied,
+      beforeCopy
     } = props,
     elmProps = _objectWithoutPropertiesLoose(props, _excluded);
   var defaultStyle = _extends({
@@ -79,7 +80,8 @@ var JsonView = /*#__PURE__*/forwardRef((props, ref) => {
       stringEllipsis,
       highlightUpdates,
       onCopied,
-      onExpand
+      onExpand,
+      beforeCopy
     },
     initialTypes: {
       displayDataTypes

package/esm/section/Copied.d.ts

@@ -1,6 +1,9 @@
 import { type TagType } from '../store/Types';
 import { type SectionElement } from '../store/Section';
+export type CopiedSectionElement<T extends TagType = 'svg'> = SectionElement<T> & {
+    beforeCopy?: (copyText: string, keyName?: string | number, value?: object, parentValue?: object, expandKey?: string, keys?: (number | string)[]) => string;
+};
 export declare const Copied: {
-    <K extends TagType = "svg">(props: SectionElement<K>): null;
+    <K extends TagType = "svg">(props: CopiedSectionElement<K>): null;
     displayName: string;
 };

package/esm/store.d.ts

@@ -6,6 +6,7 @@ export interface InitialState<T extends object> {
     value?: object;
     onExpand?: JsonViewProps<object>['onExpand'];
     onCopied?: JsonViewProps<object>['onCopied'];
+    beforeCopy?: JsonViewProps<T>['beforeCopy'];
     objectSortKeys?: JsonViewProps<T>['objectSortKeys'];
     displayObjectSize?: JsonViewProps<T>['displayObjectSize'];
     shortenTextAfterLength?: JsonViewProps<T>['shortenTextAfterLength'];

package/esm/theme/basic.d.ts

@@ -1 +1,2 @@
-export declare const basicTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const basicTheme: CSS.Properties<string | number>;

package/esm/theme/dark.d.ts

@@ -1 +1,2 @@
-export declare const darkTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const darkTheme: CSS.Properties<string | number>;

package/esm/theme/github.dark.d.ts

@@ -1 +1,2 @@
-export declare const githubDarkTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubDarkTheme: CSS.Properties<string | number>;

package/esm/theme/github.light.d.ts

@@ -1 +1,2 @@
-export declare const githubLightTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const githubLightTheme: CSS.Properties<string | number>;

package/esm/theme/gruvbox.d.ts

@@ -1 +1,2 @@
-export declare const gruvboxTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const gruvboxTheme: CSS.Properties<string | number>;

package/esm/theme/light.d.ts

@@ -1 +1,2 @@
-export declare const lightTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const lightTheme: CSS.Properties<string | number>;

package/esm/theme/monokai.d.ts

@@ -1 +1,2 @@
-export declare const monokaiTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const monokaiTheme: CSS.Properties<string | number>;

package/esm/theme/nord.d.ts

@@ -1 +1,2 @@
-export declare const nordTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const nordTheme: CSS.Properties<string | number>;

package/esm/theme/vscode.d.ts

@@ -1 +1,2 @@
-export declare const vscodeTheme: React.CSSProperties;
+import type * as CSS from 'csstype';
+export declare const vscodeTheme: CSS.Properties<string | number>;

package/esm/types/index.d.ts

@@ -1,4 +1,4 @@
-import { FC, PropsWithChildren } from 'react';
+import { type FC, type PropsWithChildren } from 'react';
 export declare const bigIntToString: (bi?: BigInt | string) => string;
 export declare const SetComp: FC<PropsWithChildren<{
     value: unknown;

package/githubDark.d.ts

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

package/githubLight.d.ts

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

package/gruvbox.d.ts

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

package/light.d.ts

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

package/monokai.d.ts

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

package/nord.d.ts

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

package/package.json

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

package/triangle-arrow.d.ts

@@ -1,5 +1,5 @@
 declare module '@uiw/react-json-view/triangle-arrow' {
   import React from 'react';
-  export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> { }
-  export function TriangleArrow(props: TriangleArrowProps): import("react/jsx-runtime").JSX.Element;
+  export interface TriangleArrowProps extends React.SVGProps<SVGSVGElement> {}
+  export function TriangleArrow(props: TriangleArrowProps): import('react/jsx-runtime').JSX.Element;
 }

package/triangle-solid-arrow.d.ts

@@ -1,5 +1,5 @@
 declare module '@uiw/react-json-view/triangle-solid-arrow' {
   import React from 'react';
-  export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> { }
-  export function TriangleSolidArrow(props: TriangleSolidArrowProps): import("react/jsx-runtime").JSX.Element;
+  export interface TriangleSolidArrowProps extends React.SVGProps<SVGSVGElement> {}
+  export function TriangleSolidArrow(props: TriangleSolidArrowProps): import('react/jsx-runtime').JSX.Element;
 }

package/vscode.d.ts

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