react-native-inapp-inspector 1.1.12 → 1.1.13

package/dist/commonjs/components/SectionHeader.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { SectionHeaderProps } from '../types';
-declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }: SectionHeaderProps) => React.JSX.Element;
+declare const SectionHeader: ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }: SectionHeaderProps) => React.JSX.Element;
 export default SectionHeader;

package/dist/commonjs/components/SectionHeader.js

@@ -47,7 +47,7 @@ const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 const NetworkIcons_1 = require("./NetworkIcons");
 // Stylesheet
 const styles_1 = __importDefault(require("../styles"));
-const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, }) => {
+const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDiffing, onToggleDiff, showSearch, isSearching, onToggleSearch, }) => {
     const isOpen = expanded === undefined ? false : !!expanded;
     const chevronAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
     (0, react_1.useEffect)(() => {
@@ -68,6 +68,12 @@ const SectionHeader = ({ title, value, expanded, onToggleExpand, showDiff, isDif
           <react_native_1.Text style={styles_1.default.sectionTitle}>{title}</react_native_1.Text>
         </react_native_1.Pressable>
         <react_native_1.View style={styles_1.default.sectionHeaderActions}>
+          {showSearch && (<TouchableScale_1.default onPress={onToggleSearch} hitSlop={12} style={[
+                styles_1.default.iconSquareBtn,
+                isSearching ? styles_1.default.iconSquareBtnActive : null,
+            ]}>
+              <NetworkIcons_1.SearchIcon color={isSearching ? AppColors_1.AppColors.skyBlue : AppColors_1.AppColors.grayTextWeak} size={14}/>
+            </TouchableScale_1.default>)}
           {showDiff && (<TouchableScale_1.default onPress={onToggleDiff} hitSlop={12} style={[
                 styles_1.default.iconSquareBtn,
                 isDiffing ? styles_1.default.iconSquareBtnActive : null,

package/dist/commonjs/constants/version.d.ts

@@ -1 +1 @@
-export declare const LIB_VERSION = "1.1.12";
+export declare const LIB_VERSION = "1.1.13";

package/dist/commonjs/constants/version.js

@@ -3,4 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LIB_VERSION = void 0;
 // AUTO-GENERATED FILE — do not edit by hand.
 // Regenerated from package.json on every build by scripts/gen-version.js.
-exports.LIB_VERSION = '1.1.12';
+exports.LIB_VERSION = '1.1.13';

package/dist/commonjs/customHooks/reduxLogger.d.ts

@@ -4,6 +4,8 @@ export interface ReduxHistoryEntry {
     payload: any;
     timestamp: string;
     affectedSlices: string[];
+    prevState?: any;
+    nextState?: any;
 }
 export declare const getReduxState: () => any;
 export declare const setReduxAutoRefresh: (val: boolean) => void;

package/dist/commonjs/customHooks/reduxLogger.js

@@ -98,6 +98,8 @@ function recordAction(action, prevState, nextState) {
         payload,
         timestamp,
         affectedSlices,
+        prevState,
+        nextState,
     });
     if (actionHistory.length > MAX_HISTORY) {
         actionHistory.length = MAX_HISTORY;

package/dist/commonjs/helpers/index.d.ts

@@ -21,3 +21,4 @@ export declare const isAllValuesEmpty: (obj: Record<string, any>) => boolean;
 export declare const formatDateTimeToAnalytics: (ts: number) => string;
 export declare const getBundleIdentifier: () => string;
 export declare const getAppName: () => string;
+export declare const handleOpenExternalLink: (url: string) => void;

package/dist/commonjs/helpers/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
+exports.handleOpenExternalLink = exports.getAppName = exports.getBundleIdentifier = exports.formatDateTimeToAnalytics = exports.isAllValuesEmpty = exports.getLocalizedFilePathWithSlash = exports.getLocalizedFilePath = exports.formatDisplayUrl = exports.getDiff = exports.flattenObject = exports.getNavigationInfo = exports.escapeRegex = exports.deduplicateLogs = exports.getFetchCommand = exports.getCurlCommand = exports.getBaseUrl = exports.getPath = exports.copyToClipboard = exports.getSize = exports.getDurationColor = exports.getStatusColor = exports.formatDateTime = exports.getDomainColor = void 0;
 const react_native_1 = require("react-native");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
@@ -327,3 +327,17 @@ const getAppName = () => {
     return 'App';
 };
 exports.getAppName = getAppName;
+const handleOpenExternalLink = (url) => {
+    if (!url)
+        return;
+    react_native_1.Alert.alert('Open Link', `Do you want to open this link in your web browser?\n\n${url}`, [
+        { text: 'Cancel', style: 'cancel' },
+        {
+            text: 'Open',
+            onPress: () => {
+                react_native_1.Linking.openURL(url).catch(() => { });
+            },
+        },
+    ]);
+};
+exports.handleOpenExternalLink = handleOpenExternalLink;

package/dist/commonjs/helpers/settingsStore.d.ts

@@ -27,3 +27,4 @@ export declare function loadSettings(): Promise<PersistedSettings>;
 export declare function saveSettings(settings: PersistedSettings): void;
 export declare function clearPersistedSettings(): Promise<void>;
 export declare const isPersistentStorageAvailable: () => boolean;
+export declare function getCustomStorage(): InspectorStorage | null;

package/dist/commonjs/helpers/settingsStore.js

@@ -9,6 +9,7 @@ exports.setCustomStorage = setCustomStorage;
 exports.loadSettings = loadSettings;
 exports.saveSettings = saveSettings;
 exports.clearPersistedSettings = clearPersistedSettings;
+exports.getCustomStorage = getCustomStorage;
 const react_native_1 = require("react-native");
 // In-memory fallback (settings survive for the app session only).
 const memory = new Map();
@@ -90,3 +91,6 @@ const isPersistentStorageAvailable = () => {
     return customStorage !== null || react_native_1.Platform.OS === 'ios';
 };
 exports.isPersistentStorageAvailable = isPersistentStorageAvailable;
+function getCustomStorage() {
+    return customStorage;
+}

package/dist/commonjs/index.js

@@ -193,6 +193,7 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
     const [sectionFilters, setSectionFilters] = (0, react_1.useState)({});
     const [collapsedSections, setCollapsedSections] = (0, react_1.useState)(new Set());
     const [showNetworkMenu, setShowNetworkMenu] = (0, react_1.useState)(false);
+    const [showHeaderInfo, setShowHeaderInfo] = (0, react_1.useState)(false);
     const [showUiMenu, setShowUiMenu] = (0, react_1.useState)(false);
     const [sortOrder, setSortOrder] = (0, react_1.useState)('newest');
     // #7 — sort order for the Logs (console) tab
@@ -3750,16 +3751,16 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                         <NetworkIcons_1.WhiteBackNavigation />
                       </TouchableScale_1.default>
 
-                      {selected == null && selectedEvent == null ? (<react_native_1.View style={{
+                      {selected == null && selectedEvent == null ? (<TouchableScale_1.default onPress={() => setShowHeaderInfo(prev => !prev)} style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 14,
+                    gap: 10,
                     flex: 1,
                 }}>
                           <react_native_1.View style={{
-                    width: 50,
-                    height: 50,
-                    borderRadius: 10,
+                    width: 38,
+                    height: 38,
+                    borderRadius: 19,
                     backgroundColor: 'rgba(255,255,255,0.13)',
                     borderWidth: 1.5,
                     borderColor: 'rgba(255,255,255,0.25)',
@@ -3770,17 +3771,13 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
                 }}>
-                            <NetworkIcons_1.BrandSquareIcon size={45}/>
+                            <NetworkIcons_1.BrandCircleIcon size={34}/>
                           </react_native_1.View>
                           <react_native_1.View style={{ gap: 2, flex: 1 }}>
                             <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
                               <react_native_1.Text style={[styles_1.default.headerTitle]} numberOfLines={1}>
-                                {(0, helpers_1.getAppName)()}{' '}
-                                <react_native_1.Text style={{ fontFamily: AppFonts_1.AppFonts.interRegular, fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>
-                                  (Inspector)
-                                </react_native_1.Text>
+                                {(0, helpers_1.getAppName)()}
                               </react_native_1.Text>
-                              {/* #1 — pulsing dot when a newer version is on NPM */}
                               {updateAvailable && (<react_native_1.Pressable hitSlop={10} onPress={() => react_native_1.Alert.alert('Update Available', `react-native-inapp-inspector v${latestNpmVersion} is available on NPM (installed: v${constants_1.LIB_VERSION}).`, [
                         { text: 'Later', style: 'cancel' },
                         {
@@ -3803,98 +3800,120 @@ const NetworkInspector = ({ enabled = true, storage, navigationRef, }) => {
                     }}/>
                                 </react_native_1.Pressable>)}
                             </react_native_1.View>
-                            <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interRegular,
-                    fontSize: 10.5,
-                    color: 'rgba(255, 255, 255, 0.6)',
-                    marginTop: 1,
-                }} selectable={true} numberOfLines={1}>
-                              {(0, helpers_1.getBundleIdentifier)()}
-                            </react_native_1.Text>
                             <react_native_1.View style={{
                     flexDirection: 'row',
                     alignItems: 'center',
-                    gap: 6,
-                    marginTop: 4,
-                }}>
-                              {/* OS chip */}
-                              <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
+                    alignSelf: 'flex-start',
+                    backgroundColor: 'rgba(255,255,255,0.1)',
+                    borderRadius: 10,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    gap: 5,
                     borderWidth: 1,
-                    borderColor: 'rgba(255,255,255,0.18)',
+                    borderColor: 'rgba(255,255,255,0.15)',
                 }}>
-                                <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.28)',
-                }}>
-                                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                                    {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}
-                                  </react_native_1.Text>
-                                </react_native_1.View>
-                                <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.12)',
-                }}>
-                                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: 'rgba(255,255,255,0.92)',
-                }}>
-                                    {String(react_native_1.Platform.Version)}
-                                  </react_native_1.Text>
-                                </react_native_1.View>
-                              </react_native_1.View>
-
-                              {/* npm chip */}
                               <react_native_1.View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    borderRadius: 6,
-                    overflow: 'hidden',
-                    borderWidth: 1,
-                    borderColor: 'rgba(255,255,255,0.18)',
+                    width: 6,
+                    height: 6,
+                    borderRadius: 3,
+                    backgroundColor: '#4ADE80',
+                }}/>
+                              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10,
+                    color: 'rgba(255, 255, 255, 0.85)',
+                    letterSpacing: 0.2,
+                }} numberOfLines={1}>
+                                {(0, helpers_1.getBundleIdentifier)()}
+                              </react_native_1.Text>
+                              <react_native_1.Animated.View style={{
+                    transform: [{ rotate: showHeaderInfo ? '180deg' : '0deg' }],
+                    marginLeft: 2,
                 }}>
+                                <NetworkIcons_1.ChevronIcon color="rgba(255,255,255,0.6)" size={12}/>
+                              </react_native_1.Animated.View>
+                            </react_native_1.View>
+                            {showHeaderInfo && (<react_native_1.View style={{
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        gap: 6,
+                        marginTop: 4,
+                    }}>
                                 <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.28)',
-                }}>
-                                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interBold,
-                    fontSize: 9,
-                    color: '#FFFFFF',
-                    letterSpacing: 0.3,
-                }}>
-                                    npm
-                                  </react_native_1.Text>
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: 6,
+                        overflow: 'hidden',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.18)',
+                    }}>
+                                  <react_native_1.View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.28)',
+                    }}>
+                                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                                      {react_native_1.Platform.OS === 'ios' ? 'iOS' : 'Android'}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
+                                  <react_native_1.View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.12)',
+                    }}>
+                                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 9.5,
+                        color: 'rgba(255,255,255,0.92)',
+                    }}>
+                                      {String(react_native_1.Platform.Version)}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
                                 <react_native_1.View style={{
-                    paddingHorizontal: 5,
-                    paddingVertical: 2,
-                    backgroundColor: 'rgba(255,255,255,0.12)',
-                }}>
-                                  <react_native_1.Text style={{
-                    fontFamily: AppFonts_1.AppFonts.interMedium,
-                    fontSize: 9.5,
-                    color: 'rgba(255,255,255,0.92)',
-                }}>
-                                    v{constants_1.LIB_VERSION}
-                                  </react_native_1.Text>
+                        flexDirection: 'row',
+                        alignItems: 'center',
+                        borderRadius: 6,
+                        overflow: 'hidden',
+                        borderWidth: 1,
+                        borderColor: 'rgba(255,255,255,0.18)',
+                    }}>
+                                  <react_native_1.View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.28)',
+                    }}>
+                                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: '#FFFFFF',
+                        letterSpacing: 0.3,
+                    }}>
+                                      npm
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
+                                  <react_native_1.View style={{
+                        paddingHorizontal: 5,
+                        paddingVertical: 2,
+                        backgroundColor: 'rgba(255,255,255,0.12)',
+                    }}>
+                                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interMedium,
+                        fontSize: 9.5,
+                        color: 'rgba(255,255,255,0.92)',
+                    }}>
+                                      v{constants_1.LIB_VERSION}
+                                    </react_native_1.Text>
+                                  </react_native_1.View>
                                 </react_native_1.View>
-                              </react_native_1.View>
-                            </react_native_1.View>
+                              </react_native_1.View>)}
                           </react_native_1.View>
-                        </react_native_1.View>) : null}
+                        </TouchableScale_1.default>) : null}
                     </react_native_1.View>
 
                     <react_native_1.View style={styles_1.default.headerCenter}>

package/dist/commonjs/types/index.d.ts

@@ -89,6 +89,9 @@ export interface SectionHeaderProps {
     showDiff?: boolean;
     isDiffing?: boolean;
     onToggleDiff?: () => void;
+    showSearch?: boolean;
+    isSearching?: boolean;
+    onToggleSearch?: () => void;
 }
 export interface TreeNodeProps {
     data: unknown;

package/dist/esm/components/AnalyticsDetail.js

@@ -6,6 +6,7 @@ import JsonViewer from './JsonViewer';
 import TouchableScale from './TouchableScale';
 // Utils
 import { AppFonts } from '../styles/AppFonts';
+import { getSize } from '../helpers';
 // Stylesheet
 import { AppColors } from '../styles/AppColors';
 const AnalyticsDetail = ({ event, }) => {
@@ -14,6 +15,26 @@ const AnalyticsDetail = ({ event, }) => {
     const params = event.params ?? {};
     const userProperties = event.userProperties ?? {};
     const upCount = Object.keys(userProperties).length;
+    const jsonData = {
+        name: event.name,
+        params: params,
+        ...(upCount > 0 ? { userProperties } : {}),
+    };
+    const isObject = typeof jsonData === 'object' && jsonData !== null;
+    const isArray = Array.isArray(jsonData);
+    let typeLabel = typeof jsonData;
+    let countLabel = '';
+    if (jsonData === null) {
+        typeLabel = 'null';
+    }
+    else if (isArray) {
+        typeLabel = 'array';
+        countLabel = `${jsonData.length} items`;
+    }
+    else if (isObject) {
+        typeLabel = 'object';
+        countLabel = `${Object.keys(jsonData).length} keys`;
+    }
     return (<ScrollView style={[detailStyles.scroll, { backgroundColor: AppColors.grayBackground }]} contentContainerStyle={detailStyles.content} showsVerticalScrollIndicator contentInsetAdjustmentBehavior="never" automaticallyAdjustContentInsets={false}>
       
       {/* Clean Toolbar */}
@@ -27,7 +48,8 @@ const AnalyticsDetail = ({ event, }) => {
             borderBottomColor: AppColors.grayBorderSecondary,
             backgroundColor: AppColors.primaryLight,
         }}>
-        <TouchableScale style={{
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <TouchableScale style={{
             flexDirection: 'row',
             alignItems: 'center',
             gap: 6,
@@ -42,20 +64,49 @@ const AnalyticsDetail = ({ event, }) => {
             setExpandDepth(nextDepth);
             setTreeKey(prev => prev + 1);
         }}>
-          <Text style={{
+            <Text style={{
             fontFamily: AppFonts.interBold,
             fontSize: 12,
             color: AppColors.purple,
         }}>
-            {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
-          </Text>
-        </TouchableScale>
+              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+            </Text>
+          </TouchableScale>
+          <View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            overflow: 'hidden',
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }}>
+            <View style={{ paddingHorizontal: 6, paddingVertical: 4, backgroundColor: AppColors.purple + '18' }}>
+              <Text style={{ fontFamily: AppFonts.interBold, fontSize: 9, color: AppColors.purple, letterSpacing: 0.3 }}>
+                {typeLabel.toUpperCase()}
+              </Text>
+            </View>
+            {countLabel ? (<View style={{ paddingHorizontal: 6, paddingVertical: 4 }}>
+                <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+                  {countLabel}
+                </Text>
+              </View>) : null}
+          </View>
+          <View style={{
+            backgroundColor: AppColors.grayBackground,
+            borderRadius: 6,
+            paddingHorizontal: 6,
+            paddingVertical: 4,
+            borderWidth: 1,
+            borderColor: AppColors.grayBorderSecondary,
+        }}>
+            <Text style={{ fontFamily: AppFonts.interMedium, fontSize: 9, color: AppColors.grayText }}>
+              {getSize(jsonData)}
+            </Text>
+          </View>
+        </View>
 
-        <CopyButton value={JSON.stringify({
-            name: event.name,
-            params: params,
-            ...(upCount > 0 ? { userProperties } : {}),
-        }, null, 2)} label="Copy JSON"/>
+        <CopyButton value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
       </View>
 
       {/* Direct JSON Viewer View */}
@@ -67,15 +118,7 @@ const AnalyticsDetail = ({ event, }) => {
                 marginTop: 16,
             },
         ]}>
-        <JsonViewer key={treeKey} data={{
-            name: event.name,
-            params: params,
-            ...(upCount > 0
-                ? {
-                    userProperties: userProperties,
-                }
-                : {}),
-        }} defaultExpandDepth={expandDepth}/>
+        <JsonViewer key={treeKey} data={jsonData} defaultExpandDepth={expandDepth} fullHeight/>
       </View>
     </ScrollView>);
 };
@@ -87,8 +130,8 @@ const detailStyles = StyleSheet.create({
     },
     jsonBlockContainer: {
         marginHorizontal: 16,
-        marginTop: 8,
-        padding: 12,
+        marginTop: 16,
+        marginBottom: 16,
         borderWidth: 1,
         borderRadius: 12,
     },

package/dist/esm/components/HighlightText.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { Text, Linking } from 'react-native';
+import { Text } from 'react-native';
 // Helpers
-import { escapeRegex } from '../helpers';
+import { escapeRegex, handleOpenExternalLink } from '../helpers';
 const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
     const hasNumberOfLines = 'numberOfLines' in rest;
     const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
@@ -28,7 +28,7 @@ const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...re
                             color: '#007AFF', // skyBlue link color
                             textDecorationLine: 'underline',
                         }} onPress={() => {
-                            Linking.openURL(part).catch(() => { });
+                            handleOpenExternalLink(part);
                         }}>
                 {part}
               </Text>);

package/dist/esm/components/JsonViewer.d.ts

@@ -1,9 +1,11 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, onModeChange, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
     wrap?: boolean;
+    fullHeight?: boolean;
+    onModeChange?: (mode: "pretty" | "raw" | "table") => void;
 }) => React.JSX.Element;
 export default JsonViewer;