react-native-inapp-inspector 1.1.14 → 1.1.16

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -41,18 +41,19 @@ const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
+const helpers_1 = require("../helpers");
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
 // ─── Palette (Google Analytics colours) ───────────────────────────────────────
 const EVENT_PALETTE = [
-    '#4285F4', // blue
-    '#34A853', // green
-    '#9C27B0', // purple
-    '#00897B', // teal
-    '#E53935', // red
-    '#F57C00', // orange
-    '#1565C0', // dark blue
-    '#2E7D32', // dark green
+    AppColors_1.AppColors.googleBlue, // blue
+    AppColors_1.AppColors.googleGreen, // green
+    AppColors_1.AppColors.googlePurple, // purple
+    AppColors_1.AppColors.googleTeal, // teal
+    AppColors_1.AppColors.googleRed, // red
+    AppColors_1.AppColors.googleOrange, // orange
+    AppColors_1.AppColors.blue700, // dark blue
+    AppColors_1.AppColors.materialGreen, // dark green
 ];
 function getEventColor(name) {
     const safeName = typeof name === 'string' ? name : String(name || '');
@@ -63,24 +64,6 @@ function getEventColor(name) {
     return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
 }
 // ─── Helpers ──────────────────────────────────────────────────────────────────
-function formatTime(ts) {
-    const d = new Date(ts);
-    const hh = String(d.getHours()).padStart(2, '0');
-    const mm = String(d.getMinutes()).padStart(2, '0');
-    const ss = String(d.getSeconds()).padStart(2, '0');
-    const ms = String(d.getMilliseconds()).padStart(3, '0');
-    return `${hh}:${mm}:${ss}.${ms}`;
-}
-function formatGap(ms) {
-    if (ms < 1000)
-        return `+${ms}ms`;
-    const s = Math.round(ms / 1000);
-    if (s < 60)
-        return `+${s}s`;
-    const m = Math.floor(s / 60);
-    const rem = s % 60;
-    return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
-}
 function getEventCategory(name) {
     if (!name)
         return 'Custom';
@@ -114,27 +97,27 @@ function getCategoryColors(category) {
     switch (category) {
         case 'Page View':
             return {
-                bg: '#E3F2FD',
-                border: '#BBDEFB',
-                text: '#1976D2',
+                bg: AppColors_1.AppColors.blueBg,
+                border: AppColors_1.AppColors.blueBorder,
+                text: AppColors_1.AppColors.blue800,
             };
         case 'Ecommerce':
             return {
-                bg: '#E8F5E9',
-                border: '#C8E6C9',
-                text: '#2E7D32',
+                bg: AppColors_1.AppColors.greenBg,
+                border: AppColors_1.AppColors.greenBorder,
+                text: AppColors_1.AppColors.materialGreen,
             };
         case 'System':
             return {
-                bg: '#F5F5F5',
-                border: '#E0E0E0',
-                text: '#616161',
+                bg: AppColors_1.AppColors.greyBg,
+                border: AppColors_1.AppColors.greyBorder,
+                text: AppColors_1.AppColors.grey600,
             };
         default:
             return {
-                bg: '#F3E5F5',
-                border: '#E1BEE7',
-                text: '#7B1FA2',
+                bg: AppColors_1.AppColors.purpleBg,
+                border: AppColors_1.AppColors.purpleBorder,
+                text: AppColors_1.AppColors.purpleText,
             };
     }
 }
@@ -160,7 +143,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
-          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>{formatGap(msSincePrev)}</react_native_1.Text>
+          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>{(0, helpers_1.formatGap)(msSincePrev)}</react_native_1.Text>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
@@ -215,7 +198,7 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
               </react_native_1.View>) : null}
           </react_native_1.View>
           <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {formatTime(event.timestamp)}
+            {(0, helpers_1.formatTime)(event.timestamp)}
           </react_native_1.Text>
         </react_native_1.View>
 
@@ -254,8 +237,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.amberBg, borderColor: AppColors_1.AppColors.amberBorder }]}>
+                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.amber700, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                       🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
                     </react_native_1.Text>
                   </react_native_1.View>);
@@ -269,8 +252,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
             if (isPrimitive) {
                 const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#ECFDF5', borderColor: '#A7F3D0' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.emeraldBg, borderColor: AppColors_1.AppColors.emeraldBorder }]}>
+                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.emerald600, fontFamily: AppFonts_1.AppFonts.interBold }]}>
                       💰 {String(val)} {currencyStr}
                     </react_native_1.Text>
                   </react_native_1.View>);
@@ -299,12 +282,12 @@ const cardStyles = react_native_1.StyleSheet.create({
         letterSpacing: 0.5,
     },
     modernCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: AppColors_1.AppColors.dividerColor,
         padding: 8,
-        shadowColor: '#000',
+        shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
@@ -334,7 +317,7 @@ const cardStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
         color: AppColors_1.AppColors.primaryBlack,
         borderRadius: 2,
     },
@@ -372,8 +355,8 @@ const cardStyles = react_native_1.StyleSheet.create({
         marginRight: 4,
     },
     duplicateBadge: {
-        backgroundColor: '#FFE4E6',
-        borderColor: '#FCC2D7',
+        backgroundColor: AppColors_1.AppColors.roseBg,
+        borderColor: AppColors_1.AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
         paddingVertical: 2,
@@ -382,7 +365,7 @@ const cardStyles = react_native_1.StyleSheet.create({
     duplicateText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9,
-        color: '#E11D48',
+        color: AppColors_1.AppColors.rose600,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },

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

@@ -1,8 +1,4 @@
 import React from 'react';
-import { AnalyticsEvent } from '../types';
-interface Props {
-    event: AnalyticsEvent;
-    accentColor: string;
-}
-declare const AnalyticsGraph: ({ event, accentColor }: Props) => React.JSX.Element;
+import { AnalyticsGraphProps } from '../types';
+declare const AnalyticsGraph: ({ event, accentColor }: AnalyticsGraphProps) => React.JSX.Element;
 export default AnalyticsGraph;

package/dist/commonjs/components/AnalyticsGraph.js

@@ -91,7 +91,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     const typeData = [
         { label: 'Strings', value: paramTypes.string, color: AppColors_1.AppColors.purple },
         { label: 'Numbers', value: paramTypes.number, color: AppColors_1.AppColors.skyBlue },
-        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Booleans', value: paramTypes.boolean, color: AppColors_1.AppColors.amber500 }, // Amber
         { label: 'Objects', value: paramTypes.object, color: AppColors_1.AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -132,7 +132,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
           <BarChart data={filteredItems.map((item, i) => ({
                 label: item.item_name || item.item_id || `Item ${i + 1}`,
                 value: item.price,
-            }))} accentColor={AppColors_1.AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+            }))} accentColor={AppColors_1.AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
         </react_native_1.View>)}
     </react_native_1.View>);
 };
@@ -219,12 +219,12 @@ const GaugeChart = ({ data, accentColor, }) => {
             paddingTop: 6,
             paddingBottom: 6,
         }}>
-      {data.map((d, i) => {
+      {data.map(d => {
             const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
             const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001); // avoid exact 0
             return (<react_native_1.View key={d.label} style={{ alignItems: 'center', width: 70 }}>
             <react_native_svg_1.default width="60" height="60" viewBox="0 0 60 60">
-              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={AppColors_1.AppColors.grayBorderSecondary} strokeWidth={stroke} fill="none"/>
               <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
             </react_native_svg_1.default>
             <react_native_1.View style={{
@@ -286,12 +286,12 @@ const CalendarChart = ({ data, accentColor, }) => {
             <react_native_1.View style={{
                     width: 58,
                     height: 62,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors_1.AppColors.white,
                     borderRadius: 8,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                    shadowColor: '#000',
+                    shadowColor: AppColors_1.AppColors.black,
                     shadowOpacity: 0.05,
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
@@ -307,7 +307,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 9,
-                    color: '#FFF',
+                    color: AppColors_1.AppColors.white,
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                 }}>
@@ -319,7 +319,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     flex: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
-                    backgroundColor: '#FAFAFA',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
                 }}>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+interface AnalyticsTabViewProps {
+    analyticsSearch: string;
+    onSetAnalyticsSearch: (val: string) => void;
+    onDeleteEvents: () => void;
+    selectedEvent: AnalyticsEvent | null;
+    onSelectEvent: (event: AnalyticsEvent | null) => void;
+    filteredAnalyticsEvents: AnalyticsEvent[];
+    visibleAnalyticsEvents: AnalyticsEvent[];
+    currentUserProperties: Record<string, any>;
+    currentUserId: string | null;
+}
+export declare const AnalyticsTabView: React.FC<AnalyticsTabViewProps>;
+export default AnalyticsTabView;

package/dist/commonjs/components/AnalyticsTabView.js

@@ -0,0 +1,157 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsTabView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const AnalyticsEventCard_1 = __importDefault(require("./AnalyticsEventCard"));
+const AnalyticsDetail_1 = __importDefault(require("./AnalyticsDetail"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+exports.AnalyticsTabView = react_1.default.memo(({ analyticsSearch, onSetAnalyticsSearch, onDeleteEvents, selectedEvent, onSelectEvent, filteredAnalyticsEvents, visibleAnalyticsEvents, currentUserProperties, currentUserId, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const [userPropsExpanded, setUserPropsExpanded] = react_1.default.useState(false);
+    const renderItem = react_1.default.useCallback(({ item, index }) => (<AnimatedEntrance_1.default index={index} distance={8}>
+        <AnalyticsEventCard_1.default event={item} searchStr={analyticsSearch} onPress={() => onSelectEvent(item)}/>
+      </AnimatedEntrance_1.default>), [analyticsSearch, onSelectEvent]);
+    const keyExtractor = react_1.default.useCallback((item, index) => item.id != null ? item.id.toString() : index.toString(), []);
+    const renderAnalyticsHeader = () => {
+        const hasProps = Object.keys(currentUserProperties ?? {}).length > 0;
+        const total = visibleAnalyticsEvents.length;
+        const filtered = filteredAnalyticsEvents.length;
+        return (<react_native_1.View style={{ paddingHorizontal: 16, paddingTop: 8, paddingBottom: 4 }}>
+        {(hasProps || currentUserId) && (<react_native_1.View style={{
+                    backgroundColor: AppColors_1.AppColors.primaryLight,
+                    borderRadius: 10,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    marginBottom: 10,
+                    overflow: 'hidden',
+                }}>
+            <react_native_1.Pressable onPress={() => setUserPropsExpanded(v => !v)} style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    padding: 10,
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                }}>
+              <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                <NetworkIcons_1.UserIcon color={AppColors_1.AppColors.purple} size={14}/>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 12,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                  {t('analytics.user_context')}
+                </react_native_1.Text>
+                {currentUserId && (<react_native_1.View style={{
+                        backgroundColor: 'rgba(104,75,155,0.1)',
+                        paddingHorizontal: 6,
+                        paddingVertical: 1,
+                        borderRadius: 4,
+                    }}>
+                    <react_native_1.Text style={{
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                        fontSize: 9,
+                        color: AppColors_1.AppColors.purple,
+                    }}>
+                      {t('analytics.id')}: {currentUserId}
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+              </react_native_1.View>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.purple,
+                }}>
+                {userPropsExpanded ? t('analytics.hide_props') : t('analytics.show_props')}
+              </react_native_1.Text>
+            </react_native_1.Pressable>
+
+            {userPropsExpanded && hasProps && (<react_native_1.View style={{
+                        padding: 10,
+                        borderTopWidth: 1,
+                        borderTopColor: AppColors_1.AppColors.dividerColor,
+                        gap: 4,
+                    }}>
+                {Object.entries(currentUserProperties ?? {}).map(([k, v]) => (<react_native_1.View key={k} style={{
+                            flexDirection: 'row',
+                            justifyContent: 'space-between',
+                        }}>
+                    <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interMedium,
+                            fontSize: 11,
+                            color: AppColors_1.AppColors.grayTextWeak,
+                        }}>
+                      {k}
+                    </react_native_1.Text>
+                    <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 11,
+                            color: AppColors_1.AppColors.primaryBlack,
+                        }}>
+                      {String(v)}
+                    </react_native_1.Text>
+                  </react_native_1.View>))}
+              </react_native_1.View>)}
+          </react_native_1.View>)}
+
+        <react_native_1.Text style={[styles_1.default.resultCount, { marginBottom: 4 }]}>
+          {t('filters.showing_analytics', { filtered, total })}
+        </react_native_1.Text>
+      </react_native_1.View>);
+    };
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent} onClose={() => onSelectEvent(null)}/>) : (<react_native_1.View style={{ flex: 1 }}>
+          <react_native_1.View style={{
+                backgroundColor: AppColors_1.AppColors.white,
+                borderBottomWidth: 1,
+                borderBottomColor: AppColors_1.AppColors.dividerColor,
+                paddingBottom: 6,
+            }}>
+            <react_native_1.View style={[
+                styles_1.default.toolbarRow,
+                { marginTop: 12, marginBottom: 8 },
+            ]}>
+              <react_native_1.View style={styles_1.default.searchContainer}>
+                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+                <react_native_1.TextInput placeholder={t('search.analytics_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={analyticsSearch} onChangeText={onSetAnalyticsSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {analyticsSearch.length > 0 && (<react_native_1.Pressable onPress={() => onSetAnalyticsSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                  </react_native_1.Pressable>)}
+              </react_native_1.View>
+
+              <react_native_1.View style={styles_1.default.toolbarRight}>
+                <TouchableScale_1.default style={[
+                styles_1.default.toolbarBtn,
+                {
+                    borderColor: 'rgba(255,46,87,0.22)',
+                    backgroundColor: 'rgba(255,46,87,0.06)',
+                },
+            ]} onPress={onDeleteEvents} hitSlop={6}>
+                  <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+          </react_native_1.View>
+
+          <react_native_1.FlatList data={filteredAnalyticsEvents} keyExtractor={keyExtractor} ListHeaderComponent={renderAnalyticsHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={analyticsSearch.length > 0}/>} contentContainerStyle={[
+                styles_1.default.listContent,
+                filteredAnalyticsEvents.length === 0 && { flexGrow: 1 },
+            ]} keyboardShouldPersistTaps="handled"/>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+});
+exports.default = exports.AnalyticsTabView;

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

@@ -8,5 +8,5 @@ interface AnimatedEntranceProps {
     index?: number;
     style?: ViewStyle | ViewStyle[];
 }
-declare const AnimatedEntrance: ({ children, delay, distance, duration, index, style, }: AnimatedEntranceProps) => React.JSX.Element;
+declare const AnimatedEntrance: React.NamedExoticComponent<AnimatedEntranceProps>;
 export default AnimatedEntrance;

package/dist/commonjs/components/AnimatedEntrance.js

@@ -35,7 +35,7 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
-const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) => {
+const AnimatedEntrance = react_1.default.memo(function AnimatedEntrance({ children, delay = 0, distance = 10, duration = 220, index = 0, style, }) {
     const progress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
     (0, react_1.useEffect)(() => {
         progress.setValue(0);
@@ -68,5 +68,5 @@ const AnimatedEntrance = ({ children, delay = 0, distance = 10, duration = 220,
         ]}>
       {children}
     </react_native_1.Animated.View>);
-};
+});
 exports.default = AnimatedEntrance;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { NetworkLog } from '../types';
+import { ApiDetailTab } from '../enums';
+interface ApiDetailViewProps {
+    selected: NetworkLog;
+    apiDetailActiveTab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response';
+    onSetApiDetailActiveTab: (tab: ApiDetailTab | 'metadata' | 'headers' | 'request' | 'response') => void;
+    detailSearch: string;
+    onSetDetailSearch: (val: string) => void;
+    reqExpanded: boolean;
+    onToggleReqExpanded: () => void;
+    resExpanded: boolean;
+    onToggleResExpanded: () => void;
+    showReqDiff: boolean;
+    onToggleShowReqDiff: () => void;
+    showResDiff: boolean;
+    onToggleShowResDiff: () => void;
+    prevRequestData: any;
+    prevResponseData: any;
+}
+export declare const ApiDetailView: React.FC<ApiDetailViewProps>;
+export default ApiDetailView;