react-native-inapp-inspector 2.5.10 → 2.5.12

package/dist/esm/components/Inspector/NetworkDetail.js

@@ -1,49 +1,49 @@
-import re from"react";import{useTranslation as ae}from"../../i18n";import{Alert as le,Image as Te,Linking as $,Pressable as P,ScrollView as Ce,Text as C,TextInput as L,View as T}from"react-native";import{animateNextLayout as Se,useInspector as Re}from"./InspectorContext";import K from"../TouchableScale";import Ve from"../SegmentedTabs";import De from"../MetaAccordion";import J from"../HeadersSection";import Be from"../SourcePageCard";import _ from"../SectionHeader";import G from"../JsonViewer";import Q from"../DiffViewer";import O from"../CopyButton";import Ie from"../ShareButton";import o from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as R}from"../../styles/AppFonts";import{METHOD_COLORS as X}from"../../constants";import{getStatusColor as z,getSize as Y,formatDateTime as He,getFetchCommand as $e,getCurlCommand as qe}from"../../helpers";import{shareApiReport as Pe}from"../../helpers/shareFormatter";import{FailIcon as We,StatusIcon as Le,HeadersIcon as Oe,RequestIcon as Fe,ResponseIcon as Ue,DownloadIcon as Ae,ClearIcon as F,SizeIcon as Ee,ExternalLinkIcon as Me,ClockIcon as Ne}from"../NetworkIcons";const Ke=re.memo(()=>{const{t:b}=ae(),{selected:e,detailDisplayUrl:S,apiDetailActiveTab:D,setApiDetailActiveTab:Z,detailSearch:k,setDetailSearch:V,reqExpanded:B,setReqExpanded:U,resExpanded:I,setResExpanded:A,showReqDiff:v,setShowReqDiff:ee,showResDiff:W,setShowResDiff:te,prevRequestData:E,prevResponseData:M,logRouteMapRef:oe}=Re(),N=()=>{le.alert(b("common.openInBrowser")||"Open in Browser",`${b("common.openInBrowserPrompt")||"Are you sure you want to open this URL in your external browser?"}
+import ae from"react";import{useTranslation as le}from"../../i18n";import{Alert as ne,Image as Te,Linking as $,Pressable as L,ScrollView as Ce,Text as S,TextInput as O,View as T}from"react-native";import{animateNextLayout as ke,useInspector as Se}from"./InspectorContext";import F from"../TouchableScale";import Re from"../SegmentedTabs";import Ve from"../MetaAccordion";import J from"../HeadersSection";import De from"../SourcePageCard";import _ from"../SectionHeader";import G from"../JsonViewer";import Q from"../DiffViewer";import U from"../CopyButton";import Be from"../ShareButton";import o from"../../styles";import{AppColors as t}from"../../styles/AppColors";import{AppFonts as V}from"../../styles/AppFonts";import{METHOD_COLORS as X}from"../../constants";import{getStatusColor as B,getSize as Y,formatDateTime as Ie,getFetchCommand as Pe,getCurlCommand as He,openWithPostman as Z}from"../../helpers";import{shareApiReport as $e}from"../../helpers/shareFormatter";import{FailIcon as Le,StatusIcon as We,HeadersIcon as Oe,RequestIcon as Fe,ResponseIcon as Ue,DownloadIcon as Ae,ClearIcon as A,SizeIcon as Ee,ExternalLinkIcon as Me,PostmanIcon as Ne,ClockIcon as Ke}from"../NetworkIcons";const je=ae.memo(()=>{const{t:C}=le(),{selected:e,detailDisplayUrl:R,apiDetailActiveTab:D,setApiDetailActiveTab:ee,detailSearch:k,setDetailSearch:z,reqExpanded:I,setReqExpanded:E,resExpanded:P,setResExpanded:M,showReqDiff:W,setShowReqDiff:te,showResDiff:v,setShowResDiff:oe,prevRequestData:N,prevResponseData:K,logRouteMapRef:re}=Se(),j=()=>{ne.alert(C("common.openInBrowser")||"Open URL",`${C("common.openInBrowserPrompt")||"Choose how you want to open or inspect this URL:"}
 
-${S}`,[{text:b("common.cancel")||"Cancel",style:"cancel"},{text:b("common.open")||"Open",onPress:()=>{$.canOpenURL(S).then(r=>{r?$.openURL(S):$.openURL(S).catch(()=>{})}).catch(()=>{})}}])};return e?<T style={{flex:1}}>
+${R}`,[{text:C("common.cancel")||"Cancel",style:"cancel"},{text:"Open in Postman",onPress:()=>{e&&Z(e)}},{text:C("common.open")||"Browser",onPress:()=>{$.canOpenURL(R).then(r=>{r?$.openURL(R):$.openURL(R).catch(()=>{})}).catch(()=>{})}}])};return e?<T style={{flex:1}}>
       
       <T style={{paddingHorizontal:8,paddingTop:4}}>
         <T style={o.detailInfoBar}>
-          {(()=>{const r=S.indexOf("://"),H=r!==-1?S.substring(0,r+3):"";return<>
+          {(()=>{const r=R.indexOf("://"),H=r!==-1?R.substring(0,r+3):"";return<>
                 
                 <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:6,paddingBottom:8,borderBottomWidth:1,borderBottomColor:t.dividerColor}}>
                   <T style={{flexDirection:"row",alignItems:"center",gap:5,flexWrap:"wrap",flex:1}}>
                     
                     <T style={[o.methodBadge,{backgroundColor:X[e.method]??X.ALL,paddingHorizontal:8,paddingVertical:3.5,borderRadius:6}]}>
-                      <C style={[o.methodBadgeText,{color:t.white,fontSize:10.5,fontFamily:R.interBold}]}>
+                      <S style={[o.methodBadgeText,{color:t.white,fontSize:10.5,fontFamily:V.interBold}]}>
                         {e.method}
-                      </C>
+                      </S>
                     </T>
 
                     
                     {e.client&&<T style={[o.chip,{backgroundColor:e.client==="axios"?`${t.purple}14`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}14`:e.client==="xhr"?`${t.amber500}14`:`${t.sky500}14`,borderColor:e.client==="axios"?`${t.purple}30`:e.client==="apollo"||e.client==="graphql"?`${t.pink500}30`:e.client==="xhr"?`${t.amber500}30`:`${t.sky500}30`,paddingHorizontal:6,paddingVertical:3,borderRadius:6}]}>
-                        <C style={[o.chipText,{fontFamily:R.interBold,fontSize:9.5,color:e.client==="axios"?t.purple:e.client==="apollo"||e.client==="graphql"?t.pink500:e.client==="xhr"?t.amber700:t.sky600}]}>
+                        <S style={[o.chipText,{fontFamily:V.interBold,fontSize:9.5,color:e.client==="axios"?t.purple:e.client==="apollo"||e.client==="graphql"?t.pink500:e.client==="xhr"?t.amber700:t.sky600}]}>
                           {e.client.toUpperCase()}
-                        </C>
+                        </S>
                       </T>}
 
                     
-                    {e.status!=null&&<T style={[o.chip,{backgroundColor:e.status===0?`${t.errorColor}18`:`${z(e.status)}18`,borderColor:e.status===0?`${t.errorColor}40`:`${z(e.status)}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
-                        {e.status===0?<We size={8}color={t.errorColor}/>:<T style={{width:6,height:6,borderRadius:3,backgroundColor:z(e.status)}}/>}
-                        <C style={[o.chipText,{color:e.status===0?t.errorColor:z(e.status),fontFamily:R.interBold,fontSize:10.5}]}>
+                    {e.status!=null&&<T style={[o.chip,{backgroundColor:e.status===0?`${t.errorColor}18`:`${B(e.status)}18`,borderColor:e.status===0?`${t.errorColor}40`:`${B(e.status)}40`,paddingHorizontal:7,paddingVertical:3,borderRadius:6}]}>
+                        {e.status===0?<Le size={8}color={t.errorColor}/>:<T style={{width:6,height:6,borderRadius:3,backgroundColor:B(e.status)}}/>}
+                        <S style={[o.chipText,{color:e.status===0?t.errorColor:B(e.status),fontFamily:V.interBold,fontSize:10.5}]}>
                           {e.status===0?"Failed":`${e.status} ${e.status===200?"OK":""}`}
-                        </C>
+                        </S>
                       </T>}
 
                     
                     {e.duration!=null&&<T style={[o.chip,{backgroundColor:`${t.brandPurple}14`,borderColor:`${t.brandPurple}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
-                        <Ne color={t.brandPurple}size={10}/>
-                        <C style={[o.chipText,{color:t.brandPurple,fontFamily:R.interBold,fontSize:10.5}]}>
+                        <Ke color={t.brandPurple}size={10}/>
+                        <S style={[o.chipText,{color:t.brandPurple,fontFamily:V.interBold,fontSize:10.5}]}>
                           {e.duration}ms
-                        </C>
+                        </S>
                       </T>}
 
                     
                     {e.response!=null&&<T style={[o.chip,{backgroundColor:`${t.sky600}14`,borderColor:`${t.sky600}30`,paddingHorizontal:7,paddingVertical:3,borderRadius:6,gap:4}]}>
                         <Ee color={t.sky600}size={10}/>
-                        <C style={[o.chipText,{color:t.sky600,fontFamily:R.interBold,fontSize:10.5}]}>
+                        <S style={[o.chipText,{color:t.sky600,fontFamily:V.interBold,fontSize:10.5}]}>
                           {Y(e.response)}
-                        </C>
+                        </S>
                       </T>}
                   </T>
                 </T>
@@ -54,64 +54,67 @@ ${S}`,[{text:b("common.cancel")||"Cancel",style:"cancel"},{text:b("common.open")
                   <T style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",flexWrap:"nowrap",gap:6}}>
                     <T style={{flexDirection:"row",alignItems:"center",gap:6,flexShrink:1,minWidth:0}}>
                       {H?<T style={{backgroundColor:H.startsWith("https")?`${t.green600}18`:`${t.amber500}18`,paddingHorizontal:6,paddingVertical:2,borderRadius:4}}>
-                          <C style={{fontFamily:R.interBold,fontSize:9,color:H.startsWith("https")?t.green600:t.amber500}}>
+                          <S style={{fontFamily:V.interBold,fontSize:9,color:H.startsWith("https")?t.green600:t.amber500}}>
                             {H.replace("://","").toUpperCase()}
-                          </C>
+                          </S>
                         </T>:null}
 
-                      <C style={{fontFamily:R.interBold,fontSize:10,color:t.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
+                      <S style={{fontFamily:V.interBold,fontSize:10,color:t.grayTextWeak,letterSpacing:.4,textTransform:"uppercase"}}numberOfLines={1}>
                         ENDPOINT URL
-                      </C>
+                      </S>
                     </T>
 
                     
                     <T style={{flexDirection:"row",alignItems:"center",gap:5,flexShrink:0}}>
-                      <O value={qe(e)}label="cURL"iconType="terminal"/>
-                      <Ie onShare={()=>Pe(e)}/>
-                      <O value={$e(e)}label="fetch()"iconType="fetch"/>
-                      <O value={S}label="URL"iconType="copy"/>
-                      <K style={[o.iconSquareBtn,{backgroundColor:`${t.sky600}15`,borderColor:`${t.sky600}35`}]}onPress={N}hitSlop={10}accessibilityLabel="Open in Browser">
+                      <U value={He(e)}label="cURL"iconType="terminal"/>
+                      <Be onShare={()=>$e(e)}/>
+                      <U value={Pe(e)}label="fetch()"iconType="fetch"/>
+                      <U value={R}label="URL"iconType="copy"/>
+                      <F style={[o.iconSquareBtn,{backgroundColor:"rgba(255, 108, 55, 0.12)",borderColor:"rgba(255, 108, 55, 0.35)"}]}onPress={()=>Z(e)}hitSlop={10}accessibilityLabel="Open in Postman">
+                        <Ne color="#FF6C37"size={13}/>
+                      </F>
+                      <F style={[o.iconSquareBtn,{backgroundColor:`${t.sky600}15`,borderColor:`${t.sky600}35`}]}onPress={j}hitSlop={10}accessibilityLabel="Open in Browser">
                         <Me color={t.sky600}size={13}/>
-                      </K>
+                      </F>
                     </T>
                   </T>
 
                   
-                  <P onPress={N}>
-                    <C selectable={!0}style={{fontFamily:R.interMedium,fontSize:12.5,color:t.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
-                      {S}
-                    </C>
-                  </P>
+                  <L onPress={j}>
+                    <S selectable={!0}style={{fontFamily:V.interMedium,fontSize:12.5,color:t.skyBlue,textDecorationLine:"underline",lineHeight:18}}>
+                      {R}
+                    </S>
+                  </L>
                 </T>
               </>})()}
         </T>
       </T>
 
       
-      <Ve tabs={[{key:"metadata",label:b("network.detailTabs.metadata"),icon:r=><Le color={r?t.white:t.grayText}/>},{key:"headers",label:b("network.detailTabs.headers"),icon:r=><Oe color={r?t.white:t.grayText}/>},...e.request!=null?[{key:"request",label:b("network.detailTabs.request"),icon:r=><Fe color={r?t.white:t.grayText}/>}]:[],{key:"response",label:b("network.detailTabs.response"),icon:r=><Ue color={r?t.white:t.grayText}/>}]}activeKey={D}onChange={r=>{Se(),Z(r)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
+      <Re tabs={[{key:"metadata",label:C("network.detailTabs.metadata"),icon:r=><We color={r?t.white:t.grayText}/>},{key:"headers",label:C("network.detailTabs.headers"),icon:r=><Oe color={r?t.white:t.grayText}/>},...e.request!=null?[{key:"request",label:C("network.detailTabs.request"),icon:r=><Fe color={r?t.white:t.grayText}/>}]:[],{key:"response",label:C("network.detailTabs.response"),icon:r=><Ue color={r?t.white:t.grayText}/>}]}activeKey={D}onChange={r=>{ke(),ee(r)}}style={{marginHorizontal:6,marginBottom:10,marginTop:6}}/>
 
       
       <Ce style={o.detailScroll}contentContainerStyle={{paddingHorizontal:6,paddingBottom:24}}showsVerticalScrollIndicator={!0}>
         {D==="metadata"&&<>
-            <De status={e.status}statusColor={z(e.status)}duration={e.duration}size={Y(e.response)}triggeredAt={He(e.startTime)}method={e.method}contentType={e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"]}url={e.url}/>
+            <Ve status={e.status}statusColor={B(e.status)}duration={e.duration}size={Y(e.response)}triggeredAt={Ie(e.startTime)}method={e.method}contentType={e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"]}url={e.url}/>
 
-            {(()=>{const r=oe.current.get(e.id)||e?.routeInfo;return!r||!r.path||r.path==="Navigators"?null:<Be routeInfo={r}/>})()}
+            {(()=>{const r=re.current.get(e.id)||e?.routeInfo;return!r||!r.path||r.path==="Navigators"?null:<De routeInfo={r}/>})()}
 
             {(e.responseHeaders?.["content-type"]||e.responseHeaders?.["Content-Type"])?.includes("image/")?<T style={o.imagePreviewWrapper}>
                     <Te source={{uri:e.url}}style={o.imagePreview}resizeMode="contain"/>
-                    <K style={o.imageDownloadBtn}onPress={()=>$.openURL(e.url)}hitSlop={10}>
+                    <F style={o.imageDownloadBtn}onPress={()=>$.openURL(e.url)}hitSlop={10}>
                       <Ae color={t.purple}size={18}/>
-                    </K>
+                    </F>
                   </T>:null}
           </>}
 
         {D==="headers"&&<>
             <T style={o.detailSearchRow}>
               <T style={o.detailSearchBox}>
-                <L placeholder={b("network.searchHeaders")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
-                    <F color={t.grayTextWeak}size={14}/>
-                  </P>}
+                <O placeholder={C("network.searchHeaders")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={z}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {k.length>0&&<L onPress={()=>z("")}hitSlop={10}style={{padding:8}}>
+                    <A color={t.grayTextWeak}size={14}/>
+                  </L>}
               </T>
             </T>
 
@@ -122,19 +125,19 @@ ${S}`,[{text:b("common.cancel")||"Cancel",style:"cancel"},{text:b("common.open")
         {D==="request"&&e.request!=null&&<>
               <T style={o.detailSearchRow}>
                 <T style={o.detailSearchBox}>
-                  <L placeholder={b("network.searchRequest")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                  {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
-                      <F color={t.grayTextWeak}size={14}/>
-                    </P>}
+                  <O placeholder={C("network.searchRequest")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={z}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                  {k.length>0&&<L onPress={()=>z("")}hitSlop={10}style={{padding:8}}>
+                      <A color={t.grayTextWeak}size={14}/>
+                    </L>}
                 </T>
               </T>
 
               <T style={o.sectionContainer}>
-                <_ title={b("network.requestTitle")}value={e.request}expanded={B}onToggleExpand={()=>U(r=>!r)}showDiff={E!=null}isDiffing={v}onToggleDiff={()=>{ee(r=>!r),!B&&!v&&U(!0)}}/>
-                {v?<Q oldData={E}newData={e.request}forceOpen={B}/>:B?<G data={e.request}search={k}/>:<T style={o.codeBlock}>
-                    <C style={[o.codeText,{color:t.grayTextWeak}]}>
-                      {b("network.bodyHidden")}
-                    </C>
+                <_ title={C("network.requestTitle")}value={e.request}expanded={I}onToggleExpand={()=>E(r=>!r)}showDiff={N!=null}isDiffing={W}onToggleDiff={()=>{te(r=>!r),!I&&!W&&E(!0)}}/>
+                {W?<Q oldData={N}newData={e.request}forceOpen={I}/>:I?<G data={e.request}search={k}/>:<T style={o.codeBlock}>
+                    <S style={[o.codeText,{color:t.grayTextWeak}]}>
+                      {C("network.bodyHidden")}
+                    </S>
                   </T>}
               </T>
             </>}
@@ -142,21 +145,21 @@ ${S}`,[{text:b("common.cancel")||"Cancel",style:"cancel"},{text:b("common.open")
         {D==="response"&&<>
             <T style={o.detailSearchRow}>
               <T style={o.detailSearchBox}>
-                <L placeholder={b("network.searchResponse")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={V}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
-                {k.length>0&&<P onPress={()=>V("")}hitSlop={10}style={{padding:8}}>
-                    <F color={t.grayTextWeak}size={14}/>
-                  </P>}
+                <O placeholder={C("network.searchResponse")}placeholderTextColor={t.grayTextWeak}value={k}onChangeText={z}style={o.detailSearchInput}autoCorrect={!1}autoCapitalize="none"/>
+                {k.length>0&&<L onPress={()=>z("")}hitSlop={10}style={{padding:8}}>
+                    <A color={t.grayTextWeak}size={14}/>
+                  </L>}
               </T>
             </T>
 
             <T style={o.sectionContainer}>
-              <_ title={b("network.responseTitle")}value={e.response}expanded={I}onToggleExpand={()=>A(r=>!r)}showDiff={M!=null}isDiffing={W}onToggleDiff={()=>{te(r=>!r),!I&&!W&&A(!0)}}/>
-              {W?<Q oldData={M}newData={e.response}forceOpen={I}/>:I?<G data={e.response}search={k}wrap/>:<T style={o.codeBlock}>
-                  <C style={[o.codeText,{color:t.grayTextWeak}]}>
-                    {b("network.bodyHidden")}
-                  </C>
+              <_ title={C("network.responseTitle")}value={e.response}expanded={P}onToggleExpand={()=>M(r=>!r)}showDiff={K!=null}isDiffing={v}onToggleDiff={()=>{oe(r=>!r),!P&&!v&&M(!0)}}/>
+              {v?<Q oldData={K}newData={e.response}forceOpen={P}/>:P?<G data={e.response}search={k}wrap/>:<T style={o.codeBlock}>
+                  <S style={[o.codeText,{color:t.grayTextWeak}]}>
+                    {C("network.bodyHidden")}
+                  </S>
                 </T>}
             </T>
           </>}
       </Ce>
-    </T>:null});export default Ke;
+    </T>:null});export default je;

package/dist/esm/components/Inspector/NetworkTab.js

@@ -1,40 +1,40 @@
-import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatList as We,Pressable as Ge,ScrollView as _e,Text as I,TextInput as Qe,View as C}from"react-native";import{useInspector as Ue}from"./InspectorContext";import M from"../TouchableScale";import Ie from"../AnimatedEntrance";import Ke from"../DomainHeader";import Xe from"../LogCard";import Je from"../EmptyState";import Ye from"../EndOfListFooter";import Ze from"./NetworkFilterModal";import S from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Ve}from"../../constants";import{useTranslation as eo}from"../../i18n";import{SearchIcon as Co,ClearIcon as So,TrashIcon as To,SortArrowIcon as Io,FilterIcon as Vo,ChevronIcon as Fo,CheckIcon as Ro,CircleCheckIcon as Lo,CircleXIcon as Bo,LayersIcon as Fe,ClockIcon as Po,RequestIcon as Eo,ResponseIcon as $o,AtomIcon as Do}from"../NetworkIcons";const Mo=_.memo(()=>{const{groupedData:j,loadMoreSection:ce,search:R,setSearch:Q,setSearchScope:ue,quickFilter:U,setQuickFilter:ae,handleDelete:Re,isGroupByPageEnabled:F,setIsGroupByPageEnabled:Le,selectedLogs:K,sortOrder:Be,setSortOrder:X,statusFilters:L,setStatusFilters:H,methodFilters:B,setMethodFilters:v,latencyFilter:N,setLatencyFilter:J,protocolFilter:O,setProtocolFilter:Y,networkSortBy:A,setNetworkSortBy:Z,filteredLogs:E,logs:W,toggleSectionFilter:ge,toggleSectionCollapse:pe,minStart:me,totalRange:he,newLogIds:ye,toggleSelect:fe,setSelected:we,maxNetworkLogs:ie}=Ue(),{t:ee}=eo(),Pe=He(null),[Ee,Ce]=_.useState(!1),[Se,be]=_.useState(!1),[oe,Te]=_.useState(ie||50);_.useEffect(()=>{Te(ie||50)},[R,U,ie]);const se=q(()=>F?j:j.slice(0,oe),[F,j,oe]),$e=de(e=>e?.id?String(e.id):"",[]),$=q(()=>L.size>0&&!L.has("all")||B.size>0&&!B.has("all")||N!=="all"||O!=="all"||A!=="time_desc",[L,B,N,O,A]),De=q(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),B.size>0&&!B.has("all")&&(e+=B.size),N!=="all"&&e++,O!=="all"&&e++,A!=="time_desc"&&e++,e},[L,B,N,O,A]),Me=q(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:B.size>0?new Set(B):new Set(["all"]),latency:N,protocol:O,sortBy:A}),[L,B,N,O,A]),Ne=de(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?H(new Set):H(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?v(new Set):v(new Set([...e.methods].map(T=>T))),J(e.latency||"all"),Y(e.protocol||"all"),Z(e.sortBy||"time_desc"),e.sortBy==="time_asc"?X("oldest"):X("newest")},[H,v,J,Y,Z,X]),P=q(()=>{let e=0,T=0,z=0,x=0,G=0,te=0;return W.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&z++;const re=(V.method||"").toUpperCase();re==="POST"&&x++,re==="GET"&&G++;const D=(V.url||"").toLowerCase(),le=(V.client||"").toLowerCase();(D.includes("graphql")||le.includes("graphql")||le.includes("apollo"))&&te++}),{all:W.length,errors:e,success:T,slow:z,post:x,get:G,graphql:te}},[W]),Oe=q(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Ve.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Ve.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ae=de(({item:e,index:T})=>{if(e.type==="header")return<Ie index={T}distance={8}>
-            <Ke pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={ge}isCollapsed={e.isCollapsed}onToggleCollapse={pe}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </Ie>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:re,totalCount:D,loadedCount:le,loadMoreStep:ne,hasMore:qe}=e;return<C style={[S.treeNodeRow,S.treeNodeRowLast]}>
+import G,{useCallback as ue,useMemo as M,useRef as qe}from"react";import{FlatList as We,Pressable as Ge,ScrollView as _e,Text as I,TextInput as Qe,View as C}from"react-native";import{useInspector as Ue}from"./InspectorContext";import N from"../TouchableScale";import Ie from"../AnimatedEntrance";import Ke from"../DomainHeader";import Xe from"../LogCard";import Je from"../EmptyState";import Ye from"../EndOfListFooter";import Ze from"./NetworkFilterModal";import S from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as k}from"../../styles/AppFonts";import{METHOD_COLORS as Ve}from"../../constants";import{isUrlHidden as eo}from"../../helpers";import{useTranslation as oo}from"../../i18n";import{SearchIcon as Co,ClearIcon as So,TrashIcon as To,SortArrowIcon as Io,FilterIcon as Vo,ChevronIcon as Fo,CheckIcon as Ro,CircleCheckIcon as Lo,CircleXIcon as Bo,LayersIcon as Fe,ClockIcon as Po,RequestIcon as Eo,ResponseIcon as $o,AtomIcon as Do}from"../NetworkIcons";const Mo=G.memo(()=>{const{groupedData:_,loadMoreSection:ge,search:R,setSearch:j,setSearchScope:pe,quickFilter:Q,setQuickFilter:se,handleDelete:Re,isGroupByPageEnabled:F,setIsGroupByPageEnabled:Le,selectedLogs:U,sortOrder:Be,setSortOrder:K,statusFilters:L,setStatusFilters:q,methodFilters:B,setMethodFilters:v,latencyFilter:O,setLatencyFilter:X,protocolFilter:A,setProtocolFilter:J,networkSortBy:H,setNetworkSortBy:Y,filteredLogs:E,logs:Z,hiddenUrlPatterns:ee,toggleSectionFilter:me,toggleSectionCollapse:he,minStart:ye,totalRange:fe,newLogIds:we,toggleSelect:Ce,setSelected:Se,maxNetworkLogs:ne}=Ue(),{t:oe}=oo(),Pe=qe(null),[Ee,be]=G.useState(!1),[Te,ze]=G.useState(!1),[te,xe]=G.useState(ne||50);G.useEffect(()=>{xe(ne||50)},[R,Q,ne]);const de=M(()=>F?_:_.slice(0,te),[F,_,te]),$e=ue(e=>e?.id?String(e.id):"",[]),$=M(()=>L.size>0&&!L.has("all")||B.size>0&&!B.has("all")||O!=="all"||A!=="all"||H!=="time_desc",[L,B,O,A,H]),De=M(()=>{let e=0;return L.size>0&&!L.has("all")&&(e+=L.size),B.size>0&&!B.has("all")&&(e+=B.size),O!=="all"&&e++,A!=="all"&&e++,H!=="time_desc"&&e++,e},[L,B,O,A,H]),Me=M(()=>({statusCodes:L.size>0?new Set(L):new Set(["all"]),methods:B.size>0?new Set(B):new Set(["all"]),latency:O,protocol:A,sortBy:H}),[L,B,O,A,H]),Ne=ue(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?q(new Set):q(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?v(new Set):v(new Set([...e.methods].map(T=>T))),X(e.latency||"all"),J(e.protocol||"all"),Y(e.sortBy||"time_desc"),e.sortBy==="time_asc"?K("oldest"):K("newest")},[q,v,X,J,Y,K]),re=M(()=>!ee||ee.length===0?Z:Z.filter(e=>!eo(e.url,ee)),[Z,ee]),P=M(()=>{let e=0,T=0,z=0,x=0,W=0,le=0;return re.forEach(V=>{const b=typeof V.status=="number"?V.status:parseInt(String(V.status),10);V.status===0||V.status==null||!isNaN(b)&&b>=400?e++:!isNaN(b)&&b>=200&&b<400&&T++,(V.duration||0)>=500&&z++;const ie=(V.method||"").toUpperCase();ie==="POST"&&x++,ie==="GET"&&W++;const D=(V.url||"").toLowerCase(),ae=(V.client||"").toLowerCase();(D.includes("graphql")||ae.includes("graphql")||ae.includes("apollo"))&&le++}),{all:re.length,errors:e,success:T,slow:z,post:x,get:W,graphql:le}},[re]),Oe=M(()=>[{id:"all",label:"All",count:P.all,color:o.purple},{id:"errors",label:"Errors",count:P.errors,color:o.errorColor},{id:"success",label:"2xx OK",count:P.success,color:o.greenColor},{id:"slow",label:"Slow >500ms",count:P.slow,color:o.warningIconGold},{id:"POST",label:"POST",count:P.post,color:Ve.POST||o.blue500},{id:"GET",label:"GET",count:P.get,color:Ve.GET||o.emerald500},{id:"graphql",label:"GraphQL",count:P.graphql,color:o.graphqlPink}],[P]),Ae=ue(({item:e,index:T})=>{if(e.type==="header")return<Ie index={T}distance={8}>
+            <Ke pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={me}isCollapsed={e.isCollapsed}onToggleCollapse={he}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </Ie>;if(e.type==="loadMore"){const{pageName:V,color:b,remainingCount:ie,totalCount:D,loadedCount:ae,loadMoreStep:ce,hasMore:He}=e;return<C style={[S.treeNodeRow,S.treeNodeRowLast]}>
             <C style={S.treeLines}>
               <C style={[S.modernTreeLine,{borderColor:b},S.modernTreeLineLast]}/>
             </C>
             <C style={S.treeCardWrapper}>
-              {qe?<M onPress={()=>ce(V,ne||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+              {He?<N onPress={()=>ge(V,ce||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${b}14`,borderWidth:1.5,borderColor:`${b}40`,shadowColor:b,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
                   <C style={{flexDirection:"row",alignItems:"center",gap:8}}>
                     <C style={{width:22,height:22,borderRadius:11,backgroundColor:b,alignItems:"center",justifyContent:"center",shadowColor:b,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
                       <Fo color={o.white}size={9}direction="down"/>
                     </C>
                     <C>
                       <I style={{fontFamily:k.interBold,fontSize:12,color:b}}>
-                        {ee("footer.loadMoreRequests",{count:ne,defaultValue:`Load ${ne} More Requests`})}
+                        {oe("footer.loadMoreRequests",{count:ce,defaultValue:`Load ${ce} More Requests`})}
                       </I>
                       <I style={{fontFamily:k.interRegular,fontSize:9.5,color:o.grayTextWeak,marginTop:1}}>
-                        Showing {le} of {D} requests
+                        Showing {ae} of {D} requests
                       </I>
                     </C>
                   </C>
 
                   <C style={{flexDirection:"row",alignItems:"center",backgroundColor:`${b}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${b}40`,gap:3}}>
                     <I style={{fontFamily:k.interBold,fontSize:10.5,color:b}}>
-                      +{re}
+                      +{ie}
                     </I>
                     <I style={{fontFamily:k.interRegular,fontSize:9,color:b}}>
                       more
                     </I>
                   </C>
-                </M>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
+                </N>:<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:7,paddingHorizontal:11,marginVertical:3,marginRight:2,borderRadius:9,backgroundColor:`${b}0A`,borderWidth:1,borderColor:`${b}25`}}>
                   <C style={{flexDirection:"row",alignItems:"center",gap:7}}>
                     <C style={{width:17,height:17,borderRadius:8.5,backgroundColor:`${b}25`,alignItems:"center",justifyContent:"center"}}>
                       <Ro color={b}size={8}/>
                     </C>
                     <I style={{fontFamily:k.interMedium,fontSize:11,color:o.grayTextStrong}}>
-                      {ee("footer.allLoaded",{count:D,defaultValue:`All ${D} requests loaded`})}
+                      {oe("footer.allLoaded",{count:D,defaultValue:`All ${D} requests loaded`})}
                     </I>
                   </C>
 
@@ -45,21 +45,21 @@ import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatLis
                   </C>
                 </C>}
             </C>
-          </C>}const{log:z,isLast:x,color:G}=e,te=se.slice(0,T).filter(V=>!V.type).length;return<Ie index={T}distance={8}style={F?[S.treeNodeRow,x&&S.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          </C>}const{log:z,isLast:x,color:W}=e,le=de.slice(0,T).filter(V=>!V.type).length;return<Ie index={T}distance={8}style={F?[S.treeNodeRow,x&&S.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
           {F&&<C style={S.treeLines}>
-              <C style={[S.modernTreeLine,{borderColor:G},x&&S.modernTreeLineLast]}/>
-              {!x&&<C style={[S.modernTreeBranch,{borderColor:G}]}/>}
+              <C style={[S.modernTreeLine,{borderColor:W},x&&S.modernTreeLineLast]}/>
+              {!x&&<C style={[S.modernTreeBranch,{borderColor:W}]}/>}
             </C>}
           <C style={F?S.treeCardWrapper:{flex:1}}>
-            <Xe testID={`inspector.network.item.${te}`}item={z}isSelected={K.has(z.id)}onToggleSelect={fe}onPress={()=>{we(z)}}timelineMinStart={me}timelineTotalRange={he}isNew={ye.has(z.id)}searchStr={R}/>
+            <Xe testID={`inspector.network.item.${le}`}item={z}isSelected={U.has(z.id)}onToggleSelect={Ce}onPress={()=>{Se(z)}}timelineMinStart={ye}timelineTotalRange={fe}isNew={we.has(z.id)}searchStr={R}/>
           </C>
-        </Ie>},[se,F,me,he,ye,K,fe,R,ge,pe,ce,we,ee]);return<C style={{flex:1}}>
+        </Ie>},[de,F,ye,fe,we,U,Ce,R,me,he,ge,Se,oe]);return<C style={{flex:1}}>
       <C style={{marginTop:6}}>
             
             <C style={S.toolbarRow}>
-              <C style={[S.searchContainer,Se&&{borderColor:o.purple,borderWidth:1.5}]}>
-                <Co color={Se?o.purple:o.grayTextWeak}size={15}/>
-                <Qe placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={R}onChangeText={Q}onFocus={()=>be(!0)}onBlur={()=>be(!1)}style={S.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              <C style={[S.searchContainer,Te&&{borderColor:o.purple,borderWidth:1.5}]}>
+                <Co color={Te?o.purple:o.grayTextWeak}size={15}/>
+                <Qe placeholder="Search URL, status, method, headers, body..."placeholderTextColor={o.grayTextWeak}value={R}onChangeText={j}onFocus={()=>ze(!0)}onBlur={()=>ze(!1)}style={S.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
                 {R.length>0&&<C style={{flexDirection:"row",alignItems:"center",gap:4}}>
                     <C style={{backgroundColor:`${o.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
@@ -67,37 +67,37 @@ import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatLis
                         {E.length}
                       </I>
                     </C>
-                    <Ge onPress={()=>Q("")}hitSlop={10}style={S.clearBtn}>
+                    <Ge onPress={()=>j("")}hitSlop={10}style={S.clearBtn}>
                       <So color={o.grayTextWeak}size={13}/>
                     </Ge>
                   </C>}
               </C>
 
               <C style={S.toolbarRight}>
-                <M style={[S.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Re}hitSlop={6}>
+                <N style={[S.toolbarBtn,{borderColor:`${o.errorColor}38`,backgroundColor:`${o.errorColor}0F`}]}onPress={Re}hitSlop={6}>
                   <To color={o.errorColor}size={15}/>
-                  {K.size>0&&<C style={S.trashBadge}>
+                  {U.size>0&&<C style={S.trashBadge}>
                       <I style={S.trashBadgeText}>
-                        {K.size}
+                        {U.size}
                       </I>
                     </C>}
-                </M>
+                </N>
 
-                <M style={[S.toolbarBtn,F&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Le(e=>!e)}hitSlop={6}accessibilityLabel={F?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                <N style={[S.toolbarBtn,F&&{borderColor:o.purple,backgroundColor:`${o.purple}15`}]}onPress={()=>Le(e=>!e)}hitSlop={6}accessibilityLabel={F?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
                   <Fe color={F?o.purple:o.grayTextStrong}size={16}/>
                   {F&&<C style={S.activeFilterDot}/>}
-                </M>
+                </N>
 
-                <M style={S.toolbarBtn}onPress={()=>X(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                <N style={S.toolbarBtn}onPress={()=>K(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
                   <Io direction={Be==="newest"?"down":"up"}color={o.grayTextStrong}size={18}/>
-                </M>
+                </N>
               </C>
             </C>
 
             
             <C style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <_e horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {Oe.map(e=>{const T=U===e.id,z=e.color||o.purple,x=T?o.white:z;return<M testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{ae(T?"all":e.id)}}>
+                {Oe.map(e=>{const T=Q===e.id,z=e.color||o.purple,x=T?o.white:z;return<N testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{se(T?"all":e.id)}}>
                       <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:T?z:`${z}12`,borderWidth:1,borderColor:T?z:`${z}30`,gap:5}}>
                         {e.id==="all"&&<Fe size={11}color={x}/>}
                         {e.id==="errors"&&<Bo size={11}color={x}/>}
@@ -115,14 +115,14 @@ import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatLis
                           </I>
                         </C>
                       </C>
-                    </M>})}
+                    </N>})}
               </_e>
 
-              <M onPress={()=>Ce(!0)}style={{flexShrink:0}}>
+              <N onPress={()=>be(!0)}style={{flexShrink:0}}>
                 <C style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:$?`${o.purple}20`:o.grayBackground,borderWidth:1,borderColor:$?o.purple:o.grayBorderSecondary,gap:5,shadowColor:o.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
                   <Vo size={11}color={$?o.purple:o.grayText}/>
                   <I style={{fontFamily:k.interBold,fontSize:10.5,color:$?o.purple:o.grayText}}>
-                    {ee("network.moreFilters","More Filters")}
+                    {oe("network.moreFilters","More Filters")}
                   </I>
                   {$&&<C style={{backgroundColor:o.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
                       <I style={{fontFamily:k.interBold,fontSize:8.5,color:o.white}}>
@@ -130,24 +130,26 @@ import _,{useCallback as de,useMemo as q,useRef as He}from"react";import{FlatLis
                       </I>
                     </C>}
                 </C>
-              </M>
+              </N>
             </C>
 
             
-            {(U!=="all"||R.trim().length>0||$||E.length!==W.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
+            {(Q!=="all"||R.trim().length>0||$||E.length!==Z.length)&&<C style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${o.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${o.purple}25`}}>
                 <I style={{fontFamily:k.interMedium,fontSize:10.5,color:o.purple}}>
-                  Showing {E.length} of {W.length} requests
+                  Showing {E.length} of {re.length} requests
                 </I>
-                <M onPress={()=>{Q(""),ae("all"),H(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ue("all")}}>
+                <N onPress={()=>{j(""),se("all"),q(new Set),v(new Set),X("all"),J("all"),Y("time_desc"),pe("all")}}>
                   <I style={{fontFamily:k.interBold,fontSize:10.5,color:o.errorColor}}>
                     Clear All Filters
                   </I>
-                </M>
+                </N>
               </C>}
           </C>
 
-        <We ref={Pe}data={se}keyExtractor={$e}renderItem={Ae}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Je isSearch={R.length>0||$||U!=="all"}searchQuery={R}customTitle={R.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{Q(""),H(new Set),v(new Set),J("all"),Y("all"),Z("time_desc"),ae("all"),ue("all")}}/>}ListFooterComponent={j.length>0?<Ye count={F?E.length:Math.min(oe,E.length)}totalCount={E.length}label="requests"hasMore={!F&&E.length>oe}loadMoreStep={30}onLoadMore={()=>Te(e=>e+30)}/>:null}style={{flex:1}}contentContainerStyle={[S.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <We ref={Pe}data={de}keyExtractor={$e}renderItem={Ae}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<Je isSearch={R.length>0||$||Q!=="all"}searchQuery={R}customTitle={R.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{j(""),q(new Set),v(new Set),X("all"),J("all"),Y("time_desc"),se("all"),pe("all")}}/>}ListFooterComponent={_.length>0?<C style={{paddingBottom:24}}>
+              <Ye count={F?E.length:Math.min(te,E.length)}totalCount={E.length}label="requests"hasMore={!F&&E.length>te}loadMoreStep={30}onLoadMore={()=>xe(e=>e+30)}/>
+            </C>:null}style={{flex:1}}contentContainerStyle={[S.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <Ze visible={Ee}onClose={()=>Ce(!1)}filters={Me}onApply={Ne}searchQuery={R}/>
+      <Ze visible={Ee}onClose={()=>be(!1)}filters={Me}onApply={Ne}searchQuery={R}/>
     </C>});export default Mo;

package/dist/esm/components/Inspector/PerformanceTab.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const PerformanceTab: React.FC;