react-native-inapp-inspector 2.5.7 → 2.5.9

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

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

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

@@ -1,19 +1,19 @@
-import{useState as N,useEffect as G,useRef as R}from"react";import{Animated as r,Linking as J,StyleSheet as K,Text as S,TouchableOpacity as P,View as T}from"react-native";import B,{Path as C}from"react-native-svg";import{useInspector as Q}from"./InspectorContext";import{LIB_VERSION as X}from"../../constants";import{NpmIcon as Z}from"../NetworkIcons";import{copyToClipboard as ee}from"../../helpers";import{showToast as te}from"../../helpers/toast";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as oe}from"../../styles/AppFonts";import{useTranslation as ie}from"../../i18n";const Ce=({size:t=13,color:i=e.slate400})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+import{useState as N,useEffect as J,useRef as B}from"react";import{Animated as r,Linking as K,StyleSheet as Q,Text as S,TouchableOpacity as _,View as T}from"react-native";import I,{Path as C}from"react-native-svg";import{useInspector as X}from"./InspectorContext";import{LIB_VERSION as Z}from"../../constants";import{NpmIcon as Ce}from"../NetworkIcons";import{copyToClipboard as Ve}from"../../helpers";import{showToast as xe}from"../../helpers/toast";import{AppColors as e}from"../../styles/AppColors";import{AppFonts as Te}from"../../styles/AppFonts";import{useTranslation as Se}from"../../i18n";const Le=({size:t=13,color:i=e.slate400})=><I width={t}height={t}viewBox="0 0 24 24"fill="none">
     <C d="M18 6L6 18M6 6l12 12"stroke={i}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </B>,Ve=({size:t=11,color:i=e.slate400})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </I>,Re=({size:t=11,color:i=e.slate400})=><I width={t}height={t}viewBox="0 0 24 24"fill="none">
     <C d="M8 4v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2h-8a2 2 0 0 0-2 2z"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <C d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </B>,Te=({size:t=11,color:i=e.greenColor})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </I>,Be=({size:t=11,color:i=e.greenColor})=><I width={t}height={t}viewBox="0 0 24 24"fill="none">
     <C d="M20 6L9 17l-5-5"stroke={i}strokeWidth="2.4"strokeLinecap="round"strokeLinejoin="round"/>
-  </B>,Se=({size:t=11,color:i=e.white})=><B width={t}height={t}viewBox="0 0 24 24"fill="none">
+  </I>,Ie=({size:t=11,color:i=e.white})=><I width={t}height={t}viewBox="0 0 24 24"fill="none">
     <C d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <C d="M15 3h6v6"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
     <C d="M10 14L21 3"stroke={i}strokeWidth="2"strokeLinecap="round"strokeLinejoin="round"/>
-  </B>,H=7e3;export const NpmUpdateToast=()=>{const{t}=ie(),{updateAvailable:i,latestNpmVersion:V,showUpdateToast:O}=Q(),[_,U]=N(!1),[F,j]=N(!1),[W,E]=N(!1),I=R(new r.Value(60)).current,D=R(new r.Value(0)).current,z=R(new r.Value(1)).current,A=R(null);G(()=>(O&&i&&V&&!_&&(j(!0),r.parallel([r.spring(I,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),r.timing(D,{toValue:1,duration:250,useNativeDriver:!0})]).start(),z.setValue(1),r.timing(z,{toValue:0,duration:H,useNativeDriver:!1}).start(),A.current=setTimeout(()=>{M()},H)),()=>{A.current&&clearTimeout(A.current)}),[O,i,V,_]);const M=()=>{r.parallel([r.timing(D,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(I,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{j(!1),U(!0)})},$=()=>{ee("npm install react-native-inapp-inspector@latest","Install Command"),E(!0),te(t("about.copiedInstallCommand","Copied npm install command!")),setTimeout(()=>{E(!1)},2e3)},Y=()=>{J.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),M()};if(typeof __DEV__>"u"||!__DEV__||!O||!F||!i||!V)return null;const q=z.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<r.View style={[o.container,{opacity:D,transform:[{translateY:I}]}]}>
+  </I>,U=7e3;export const NpmUpdateToast=()=>{const{t}=Se(),{updateAvailable:i,latestNpmVersion:V,showUpdateToast:O,setIsUpdatePopupVisible:R}=X(),[j,F]=N(!1),[$,E]=N(!1),[W,H]=N(!1),D=B(new r.Value(60)).current,P=B(new r.Value(0)).current,z=B(new r.Value(1)).current,A=B(null);J(()=>(O&&i&&V&&!j&&(E(!0),R?.(!0),r.parallel([r.spring(D,{toValue:0,friction:8,tension:40,useNativeDriver:!0}),r.timing(P,{toValue:1,duration:250,useNativeDriver:!0})]).start(),z.setValue(1),r.timing(z,{toValue:0,duration:U,useNativeDriver:!1}).start(),A.current=setTimeout(()=>{M()},U)),()=>{A.current&&clearTimeout(A.current),R?.(!1)}),[O,i,V,j,R]);const M=()=>{r.parallel([r.timing(P,{toValue:0,duration:180,useNativeDriver:!0}),r.timing(D,{toValue:60,duration:180,useNativeDriver:!0})]).start(()=>{E(!1),F(!0),R?.(!1)})},Y=()=>{Ve("npm install react-native-inapp-inspector@latest","Install Command"),H(!0),xe(t("about.copiedInstallCommand","Copied npm install command!")),setTimeout(()=>{H(!1)},2e3)},q=()=>{K.openURL("https://www.npmjs.com/package/react-native-inapp-inspector").catch(()=>{}),M()};if(typeof __DEV__>"u"||!__DEV__||!O||!$||!i||!V)return null;const G=z.interpolate({inputRange:[0,1],outputRange:["0%","100%"]});return<r.View style={[o.container,{opacity:P,transform:[{translateY:D}]}]}>
       <T style={o.contentRow}>
         
         <T style={o.npmIconContainer}>
-          <Z size={15}color={e.npmRed}/>
+          <Ce size={15}color={e.npmRed}/>
         </T>
 
         <T style={o.textContainer}>
@@ -24,32 +24,32 @@ import{useState as N,useEffect as G,useRef as R}from"react";import{Animated as r
             </T>
           </T>
           <S style={o.subtitleText}>
-            {t("header.updateAvailable",{latestVersion:V,currentVersion:X,defaultValue:`react-native-inapp-inspector v${V} is available on NPM.`})}
+            {t("header.updateAvailable",{latestVersion:V,currentVersion:Z,defaultValue:`react-native-inapp-inspector v${V} is available on NPM.`})}
           </S>
         </T>
 
         
-        <P style={o.copyButton}onPress={$}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}>
-          {W?<Te size={11}color={e.greenColor}/>:<Ve size={11}color={e.slate400}/>}
+        <_ style={o.copyButton}onPress={Y}activeOpacity={.7}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+          {W?<Be size={11}color={e.greenColor}/>:<Re size={11}color={e.slate400}/>}
           <S style={[o.copyButtonText,W&&{color:e.greenColor}]}>
             {W?t("common.copied","Copied"):t("header.copyCommand","Copy")}
           </S>
-        </P>
+        </_>
 
         
-        <P style={o.actionButton}onPress={Y}activeOpacity={.8}hitSlop={{top:8,bottom:8,left:4,right:4}}>
+        <_ style={o.actionButton}onPress={q}activeOpacity={.8}hitSlop={{top:8,bottom:8,left:4,right:4}}>
           <S style={o.actionButtonText}>{t("header.viewNpm","View")}</S>
-          <Se size={10}color={e.white}/>
-        </P>
+          <Ie size={10}color={e.white}/>
+        </_>
 
         
-        <P style={o.closeButton}onPress={M}activeOpacity={.7}hitSlop={{top:10,bottom:10,left:10,right:10}}>
-          <Ce size={12}color={e.slate400}/>
-        </P>
+        <_ style={o.closeButton}onPress={M}activeOpacity={.7}hitSlop={{top:10,bottom:10,left:10,right:10}}>
+          <Le size={12}color={e.slate400}/>
+        </_>
       </T>
 
       
       <T style={o.progressBarTrack}>
-        <r.View style={[o.progressBarFill,{width:q}]}/>
+        <r.View style={[o.progressBarFill,{width:G}]}/>
       </T>
-    </r.View>};const L={fontFamily:oe.interRegular},o=K.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:e.slate900,borderRadius:16,borderWidth:1,borderColor:e.slate700,shadowColor:e.black,shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:e.white,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.slate200,flexShrink:0,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:e.slate50,letterSpacing:-.2,...L},versionPill:{backgroundColor:`${e.offerPurple}33`,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:`${e.violet500}80`},versionPillText:{fontSize:10,fontWeight:"700",color:e.purpleLightMuted,...L},subtitleText:{fontSize:10.5,color:e.slate400,marginTop:1,...L},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.slate800,paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:e.slate700,flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:e.slate400,...L},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.offerPurple,paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:e.offerPurple,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:e.white,...L},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:e.slate800,justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:e.slate800},progressBarFill:{height:"100%",backgroundColor:e.violet500}});export default NpmUpdateToast;
+    </r.View>};const L={fontFamily:Te.interRegular},o=Q.create({container:{position:"absolute",bottom:24,left:14,right:14,backgroundColor:e.slate900,borderRadius:16,borderWidth:1,borderColor:e.slate700,shadowColor:e.black,shadowOffset:{width:0,height:12},shadowOpacity:.4,shadowRadius:24,elevation:24,overflow:"hidden",zIndex:99999},contentRow:{flexDirection:"row",alignItems:"center",paddingVertical:11,paddingHorizontal:12,gap:8},npmIconContainer:{width:32,height:32,borderRadius:9,backgroundColor:e.white,justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:e.slate200,flexShrink:0,shadowColor:e.black,shadowOffset:{width:0,height:1},shadowOpacity:.15,shadowRadius:2,elevation:2},textContainer:{flex:1,minWidth:0},titleRow:{flexDirection:"row",alignItems:"center",gap:5},titleText:{fontSize:12.5,fontWeight:"700",color:e.slate50,letterSpacing:-.2,...L},versionPill:{backgroundColor:`${e.offerPurple}33`,paddingHorizontal:5.5,paddingVertical:1.5,borderRadius:5,borderWidth:1,borderColor:`${e.violet500}80`},versionPillText:{fontSize:10,fontWeight:"700",color:e.purpleLightMuted,...L},subtitleText:{fontSize:10.5,color:e.slate400,marginTop:1,...L},copyButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.slate800,paddingVertical:5.5,paddingHorizontal:8,borderRadius:7,borderWidth:1,borderColor:e.slate700,flexShrink:0},copyButtonText:{fontSize:10.5,fontWeight:"600",color:e.slate400,...L},actionButton:{flexDirection:"row",alignItems:"center",gap:3.5,backgroundColor:e.offerPurple,paddingVertical:5.5,paddingHorizontal:9,borderRadius:7,flexShrink:0,shadowColor:e.offerPurple,shadowOffset:{width:0,height:2},shadowOpacity:.35,shadowRadius:4,elevation:3},actionButtonText:{fontSize:11,fontWeight:"700",color:e.white,...L},closeButton:{width:22,height:22,borderRadius:11,backgroundColor:e.slate800,justifyContent:"center",alignItems:"center",flexShrink:0},progressBarTrack:{height:2.5,width:"100%",backgroundColor:e.slate800},progressBarFill:{height:"100%",backgroundColor:e.violet500}});export default NpmUpdateToast;

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

@@ -1,31 +1,31 @@
-import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollView as Ce,Text as P,TouchableOpacity as _,View as C}from"react-native";import{useInspector as ke}from"./InspectorContext";import{useTranslation as we}from"../../i18n";import I from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Re,AnalyticsIcon as Ie,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,QrCodeIcon as Oe,ScreencastIcon as Ve,ChevronIcon as Q,WebsocketIcon as De}from"../NetworkIcons";import{isReduxConnected as Ee}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as We}from"../../helpers";const r={themeColor:o.brandPurple,bgInactive:`${o.brandPurple}0D`,borderInactive:`${o.brandPurple}2B`,iconInactive:o.brandPurple,idBadgeBg:`${o.brandPurple}1C`,idBadgeBorder:`${o.brandPurple}3D`,idBadgeText:o.brandPurple},q={apis:r,logs:r,analytics:r,redux:r,storage:r,device:r,crash:r,push:r,socket:r,debugging:r,media:r},je=ce.memo(()=>{const{t:J}=we(),{activeTab:k,switchActiveTab:L,tabVisibility:B,logs:A,consoleLogs:O,analyticsEvents:K,crashRecords:V,pushRecords:D,socketRecords:E,unreadPushCount:N,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:oe,mediaCount:H}=ke(),te=Ee(),ie=He(),w=k==="media",x=(B?.media??!0)&&H>0,W=F(null),[z,ne]=U(!1),[j,re]=U(!0),$=F(0),le=e=>{const{contentOffset:t,layoutMeasurement:i,contentSize:n}=e.nativeEvent,S=t.x;$.current=S;const R=S>8,v=S<n.width-i.width-8;z!==R&&ne(R),j!==v&&re(v)},M=e=>{W.current?.scrollTo({x:Math.max(0,$.current+e),animated:!0})};return<C style={[I.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
+import ce,{useRef as _,useState as F}from"react";import{Platform as de,ScrollView as Ce,Text as P,TouchableOpacity as U,View as C}from"react-native";import{useInspector as ke}from"./InspectorContext";import{useTranslation as we}from"../../i18n";import v from"../../styles";import{AppColors as o}from"../../styles/AppColors";import{AppFonts as T}from"../../styles/AppFonts";import G from"../TouchableScale";import{SignalIcon as Se,TerminalIcon as Ie,AnalyticsIcon as Re,ReduxIcon as Te,CrashIcon as Be,BellIcon as Pe,SmartphoneIcon as Le,DatabaseIcon as Ae,QrCodeIcon as Ve,ScreencastIcon as Oe,ChevronIcon as Q,WebsocketIcon as De}from"../NetworkIcons";import{isReduxConnected as Ee}from"../../customHooks/reduxLogger";import{isAnalyticsConnected as He}from"../../customHooks/analyticsLogger";import{isLocalDebugEnvironment as We}from"../../helpers";const n={themeColor:o.brandPurple,bgInactive:`${o.brandPurple}0D`,borderInactive:`${o.brandPurple}2B`,iconInactive:o.brandPurple,idBadgeBg:`${o.brandPurple}1C`,idBadgeBorder:`${o.brandPurple}3D`,idBadgeText:o.brandPurple},q={apis:n,logs:n,analytics:n,redux:n,storage:n,device:n,crash:n,push:n,socket:n,debugging:n,media:n},$e=ce.memo(()=>{const{t:J}=we(),{activeTab:w,switchActiveTab:L,tabVisibility:B,logs:A,consoleLogs:V,analyticsEvents:K,crashRecords:O,pushRecords:D,socketRecords:E,unreadPushCount:N,unreadSocketCount:X,lastReadApisCount:Y,lastReadLogsCount:Z,lastReadCrashesCount:ee,lastReadSocketCount:oe,mediaCount:H}=ke(),te=Ee(),ie=He(),k=w==="media",x=(B?.media??!0)&&(H>0||k||__DEV__),W=_(null),[z,re]=F(!1),[$,ne]=F(!0),j=_(0),le=e=>{const{contentOffset:t,layoutMeasurement:i,contentSize:r}=e.nativeEvent,S=t.x;j.current=S;const I=S>8,R=S<r.width-i.width-8;z!==I&&re(I),$!==R&&ne(R)},M=e=>{W.current?.scrollTo({x:Math.max(0,j.current+e),animated:!0})};return<C style={[v.tabBarContainer,{flexDirection:"row",alignItems:"center",paddingHorizontal:0}]}>
       
-      {z&&<_ onPress={()=>M(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
+      {z&&<U onPress={()=>M(-160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:6,paddingRight:2,justifyContent:"center",alignItems:"center"}}>
           <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
             <Q direction="left"size={13}color={o.grayTextStrong}/>
           </C>
-        </_>}
+        </U>}
 
       
-      <Ce ref={W}horizontal showsHorizontalScrollIndicator={!1}onScroll={le}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:z?4:12,paddingRight:x?6:12}}>
-        {[{id:1,key:"apis",label:"APIs",count:A.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:O.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:K.length,icon:"analytics"},{id:4,key:"redux",label:"Redux",count:0,icon:"redux"},{id:5,key:"storage",label:"Storage",count:0,icon:"storage"},{id:6,key:"device",label:"Device",count:0,icon:"device"},{id:7,key:"crash",label:"Crash",count:V?.length||0,icon:"crash"},{id:8,key:"push",label:"Push",count:D?.length||0,icon:"push"},{id:9,key:"socket",label:"WebSocket",count:E?.length||0,icon:"socket"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?de.OS==="android"&&We()&&!!B?.debugging:!(!B?.[e.key]||e.key==="redux"&&!te||e.key==="analytics"&&!ie)).map(e=>{const t=k===e.key,i=q[e.key]||q.apis,n=t?o.white:i.iconInactive,S=e.count>99?"99+":String(e.count),R=k!=="apis"&&A.length>Y,v=k!=="logs"&&O.length>Z,ae=k!=="crash"&&(V?.length||0)>(ee||0),se=k!=="socket"&&((E?.length||0)>(oe||0)||X>0);return<G key={e.key}onPress={()=>{L(e.key)}}style={[I.contentTabButton,{backgroundColor:t?i.themeColor:i.bgInactive,borderColor:t?i.themeColor:i.borderInactive},t&&{shadowColor:i.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+      <Ce testID="inspector.tab.scrollview"ref={W}horizontal showsHorizontalScrollIndicator={!1}onScroll={le}scrollEventThrottle={16}style={{flex:1}}contentContainerStyle={{paddingLeft:z?4:12,paddingRight:x?6:12}}>
+        {[{id:1,key:"apis",label:"APIs",count:A.length,icon:"apis"},{id:2,key:"logs",label:"Logs",count:V.length,icon:"logs"},{id:3,key:"analytics",label:"Analytics",count:K.length,icon:"analytics"},{id:4,key:"redux",label:"Redux",count:0,icon:"redux"},{id:5,key:"storage",label:"Storage",count:0,icon:"storage"},{id:6,key:"device",label:"Device",count:0,icon:"device"},{id:7,key:"crash",label:"Crash",count:O?.length||0,icon:"crash"},{id:8,key:"push",label:"Push",count:D?.length||0,icon:"push"},{id:9,key:"socket",label:"WebSocket",count:E?.length||0,icon:"socket"},{id:10,key:"debugging",label:"Debugging",count:0,icon:"debugging"}].filter(e=>e.key==="debugging"?de.OS==="android"&&We()&&!!B?.debugging:!(!B?.[e.key]||e.key==="redux"&&!te||e.key==="analytics"&&!ie)).map(e=>{const t=w===e.key,i=q[e.key]||q.apis,r=t?o.white:i.iconInactive,S=e.count>99?"99+":String(e.count),I=w!=="apis"&&A.length>Y,R=w!=="logs"&&V.length>Z,se=w!=="crash"&&(O?.length||0)>(ee||0),ae=w!=="socket"&&((E?.length||0)>(oe||0)||X>0);return<G key={e.key}testID={`inspector.tab.${e.key}`}onPress={()=>{L(e.key)}}style={[v.contentTabButton,{backgroundColor:t?i.themeColor:i.bgInactive,borderColor:t?i.themeColor:i.borderInactive},t&&{shadowColor:i.themeColor,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
                 <C style={{flexDirection:"row",alignItems:"center",gap:6}}>
-                  {e.icon==="apis"&&<Se color={n}size={14}/>}
-                  {e.icon==="logs"&&<Re color={n}size={14}/>}
-                  {e.icon==="analytics"&&<Ie color={n}size={14}/>}
-                  {e.icon==="redux"&&<Te color={n}size={14}/>}
-                  {e.icon==="storage"&&<Ae color={n}size={14}/>}
-                  {e.icon==="device"&&<Le color={n}size={14}/>}
-                  {e.icon==="crash"&&<Be color={n}size={14}/>}
-                  {e.icon==="push"&&<Pe color={n}size={14}/>}
-                  {e.icon==="socket"&&<De color={n}size={14}/>}
-                  {e.icon==="debugging"&&<Oe color={n}size={14}/>}
+                  {e.icon==="apis"&&<Se color={r}size={14}/>}
+                  {e.icon==="logs"&&<Ie color={r}size={14}/>}
+                  {e.icon==="analytics"&&<Re color={r}size={14}/>}
+                  {e.icon==="redux"&&<Te color={r}size={14}/>}
+                  {e.icon==="storage"&&<Ae color={r}size={14}/>}
+                  {e.icon==="device"&&<Le color={r}size={14}/>}
+                  {e.icon==="crash"&&<Be color={r}size={14}/>}
+                  {e.icon==="push"&&<Pe color={r}size={14}/>}
+                  {e.icon==="socket"&&<De color={r}size={14}/>}
+                  {e.icon==="debugging"&&<Ve color={r}size={14}/>}
                   <C style={{minWidth:20,height:20,paddingHorizontal:4,borderRadius:10,backgroundColor:t?`${o.white}33`:i.idBadgeBg,borderWidth:1,borderColor:t?`${o.white}66`:i.idBadgeBorder,alignItems:"center",justifyContent:"center"}}>
                     <P style={{fontFamily:T.interBold,fontSize:9.5,lineHeight:12,color:t?o.white:i.idBadgeText}}>
                       #{e.id}
                     </P>
                   </C>
-                  <P numberOfLines={1}ellipsizeMode="tail"style={[I.contentTabButtonText,{color:t?o.white:o.grayTextStrong,fontFamily:t?T.interBold:T.interSemiBold}]}>
+                  <P numberOfLines={1}ellipsizeMode="tail"style={[v.contentTabButtonText,{color:t?o.white:o.grayTextStrong,fontFamily:t?T.interBold:T.interSemiBold}]}>
                     {J(`tabs.${e.key}`,e.label)}
                   </P>
                   {e.count>0&&e.key!=="push"&&<C style={{paddingHorizontal:5,paddingVertical:1,borderRadius:8,backgroundColor:t?o.overlayWhite25:i.idBadgeBg,borderWidth:.5,borderColor:t?o.overlayWhite45:i.idBadgeBorder,marginLeft:1,alignItems:"center",justifyContent:"center"}}>
@@ -33,25 +33,25 @@ import ce,{useRef as F,useState as U}from"react";import{Platform as de,ScrollVie
                         {S}
                       </P>
                     </C>}
-                  {(e.key==="apis"&&R||e.key==="logs"&&v||e.key==="crash"&&ae||e.key==="push"&&((D?.length||0)>0||N>0)||e.key==="socket"&&se)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
+                  {(e.key==="apis"&&I||e.key==="logs"&&R||e.key==="crash"&&se||e.key==="push"&&((D?.length||0)>0||N>0)||e.key==="socket"&&ae)&&<C style={{width:6,height:6,borderRadius:3,backgroundColor:o.errorColor,marginLeft:4,alignSelf:"center"}}/>}
                 </C>
               </G>})}
       </Ce>
 
       
-      {j&&<_ onPress={()=>M(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:x?4:8,justifyContent:"center",alignItems:"center"}}>
+      {$&&<U onPress={()=>M(160)}hitSlop={{top:6,bottom:6,left:6,right:6}}activeOpacity={.7}style={{paddingLeft:2,paddingRight:x?4:8,justifyContent:"center",alignItems:"center"}}>
           <C style={{width:22,height:22,borderRadius:11,backgroundColor:o.grayBorderSecondary,alignItems:"center",justifyContent:"center"}}>
             <Q direction="right"size={13}color={o.grayTextStrong}/>
           </C>
-        </_>}
+        </U>}
 
       
       {x&&<C style={{paddingLeft:6,paddingRight:10,borderLeftWidth:1,borderLeftColor:o.dividerColor,backgroundColor:o.primaryLight,justifyContent:"center",shadowColor:o.shadowColorString,shadowOffset:{width:-3,height:0},shadowOpacity:.12,shadowRadius:4,elevation:4,zIndex:10}}>
-          <G key="media"onPress={()=>{L("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[I.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:w?o.brandPurple:`${o.brandPurple}0D`,borderColor:w?o.brandPurple:`${o.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},w&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
+          <G key="media"testID="inspector.tab.media"onPress={()=>{L("media")}}accessibilityRole="button"accessibilityLabel="Media Gallery"style={[v.contentTabButton,{marginRight:0,borderRadius:8,backgroundColor:k?o.brandPurple:`${o.brandPurple}0D`,borderColor:k?o.brandPurple:`${o.brandPurple}2B`,borderWidth:1,paddingHorizontal:10,paddingVertical:7,alignItems:"center",justifyContent:"center"},k&&{shadowColor:o.brandPurple,shadowOffset:{width:0,height:2},shadowOpacity:.28,shadowRadius:3.5,elevation:3}]}>
             <C style={{position:"relative",alignItems:"center",justifyContent:"center"}}>
-              <Ve color={w?o.white:o.brandPurple}size={15}/>
-              {H>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:w?o.white:o.brandPurple,borderWidth:1.2,borderColor:w?o.brandPurple:o.white}}/>}
+              <Oe color={k?o.white:o.brandPurple}size={15}/>
+              {H>0&&<C style={{position:"absolute",top:-3,right:-4,width:7,height:7,borderRadius:3.5,backgroundColor:k?o.white:o.brandPurple,borderWidth:1.2,borderColor:k?o.brandPurple:o.white}}/>}
             </C>
           </G>
         </C>}
-    </C>});export default je;
+    </C>});export default $e;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import { LogCardProps } from '../types';
-declare function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }: LogCardProps): React.JSX.Element;
+declare function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, testID, }: LogCardProps): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof LogCard>;
 export default _default;