react-native-inapp-inspector 2.5.10 → 2.5.12

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

@@ -1,28 +1,28 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,t,a){a===void 0&&(a=t);var i=Object.getOwnPropertyDescriptor(r,t);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(l,a,i)}):(function(l,r,t,a){a===void 0&&(a=t),l[a]=r[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(t){var a=[];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var t={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(t,r,a[i]);return __setModuleDefault(t,r),t}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:t,setSearch:a,setSearchScope:i,quickFilter:V,setQuickFilter:q,handleDelete:J,isGroupByPageEnabled:u,setIsGroupByPageEnabled:Y,selectedLogs:v,sortOrder:Z,setSortOrder:x,statusFilters:p,setStatusFilters:m,methodFilters:f,setMethodFilters:S,latencyFilter:h,setLatencyFilter:z,protocolFilter:y,setProtocolFilter:F,networkSortBy:b,setNetworkSortBy:I,filteredLogs:w,logs:T,toggleSectionFilter:E,toggleSectionCollapse:N,minStart:$,totalRange:H,newLogIds:j,toggleSelect:W,setSelected:G,maxNetworkLogs:B}=(0,InspectorContext_1.useInspector)(),{t:L}=(0,i18n_1.useTranslation)(),ee=(0,react_1.useRef)(null),[te,Q]=react_1.default.useState(!1),[K,U]=react_1.default.useState(!1),[R,X]=react_1.default.useState(B||50);react_1.default.useEffect(()=>{X(B||50)},[t,V,B]);const M=(0,react_1.useMemo)(()=>u?l:l.slice(0,R),[u,l,R]),oe=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>p.size>0&&!p.has("all")||f.size>0&&!f.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[p,f,h,y,b]),re=(0,react_1.useMemo)(()=>{let e=0;return p.size>0&&!p.has("all")&&(e+=p.size),f.size>0&&!f.has("all")&&(e+=f.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[p,f,h,y,b]),le=(0,react_1.useMemo)(()=>({statusCodes:p.size>0?new Set(p):new Set(["all"]),methods:f.size>0?new Set(f):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[p,f,h,y,b]),ae=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?m(new Set):m(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(n=>n))),z(e.latency||"all"),F(e.protocol||"all"),I(e.sortBy||"time_desc"),e.sortBy==="time_asc"?x("oldest"):x("newest")},[m,S,z,F,I,x]),g=(0,react_1.useMemo)(()=>{let e=0,n=0,s=0,c=0,A=0,k=0;return T.forEach(d=>{const o=typeof d.status=="number"?d.status:parseInt(String(d.status),10);d.status===0||d.status==null||!isNaN(o)&&o>=400?e++:!isNaN(o)&&o>=200&&o<400&&n++,(d.duration||0)>=500&&s++;const O=(d.method||"").toUpperCase();O==="POST"&&c++,O==="GET"&&A++;const _=(d.url||"").toLowerCase(),P=(d.client||"").toLowerCase();(_.includes("graphql")||P.includes("graphql")||P.includes("apollo"))&&k++}),{all:T.length,errors:e,success:n,slow:s,post:c,get:A,graphql:k}},[T]),ie=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:g.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:g.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:g.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:g.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:g.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:g.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:g.graphql,color:AppColors_1.AppColors.graphqlPink}],[g]),ne=(0,react_1.useCallback)(({item:e,index:n})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={n}distance={8}>
-            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={E}isCollapsed={e.isCollapsed}onToggleCollapse={N}isFirst={e.isFirst}timestamp={e.timestamp}/>
-          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:d,color:o,remainingCount:O,totalCount:_,loadedCount:P,loadMoreStep:D,hasMore:se}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?(function(l,r,t,a){a===void 0&&(a=t);var i=Object.getOwnPropertyDescriptor(r,t);(!i||("get"in i?!r.__esModule:i.writable||i.configurable))&&(i={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(l,a,i)}):(function(l,r,t,a){a===void 0&&(a=t),l[a]=r[t]})),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?(function(l,r){Object.defineProperty(l,"default",{enumerable:!0,value:r})}):function(l,r){l.default=r}),__importStar=this&&this.__importStar||(function(){var l=function(r){return l=Object.getOwnPropertyNames||function(t){var a=[];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(a[a.length]=i);return a},l(r)};return function(r){if(r&&r.__esModule)return r;var t={};if(r!=null)for(var a=l(r),i=0;i<a.length;i++)a[i]!=="default"&&__createBinding(t,r,a[i]);return __setModuleDefault(t,r),t}})(),__importDefault=this&&this.__importDefault||function(l){return l&&l.__esModule?l:{default:l}};Object.defineProperty(exports,"__esModule",{value:!0});const react_1=__importStar(require("react")),react_native_1=require("react-native"),InspectorContext_1=require("./InspectorContext"),TouchableScale_1=__importDefault(require("../TouchableScale")),AnimatedEntrance_1=__importDefault(require("../AnimatedEntrance")),DomainHeader_1=__importDefault(require("../DomainHeader")),LogCard_1=__importDefault(require("../LogCard")),EmptyState_1=__importDefault(require("../EmptyState")),EndOfListFooter_1=__importDefault(require("../EndOfListFooter")),NetworkFilterModal_1=__importDefault(require("./NetworkFilterModal")),styles_1=__importDefault(require("../../styles")),AppColors_1=require("../../styles/AppColors"),AppFonts_1=require("../../styles/AppFonts"),constants_1=require("../../constants"),helpers_1=require("../../helpers"),i18n_1=require("../../i18n"),NetworkIcons_1=require("../NetworkIcons"),NetworkTab=react_1.default.memo(()=>{const{groupedData:l,loadMoreSection:r,search:t,setSearch:a,setSearchScope:i,quickFilter:A,setQuickFilter:M,handleDelete:Z,isGroupByPageEnabled:u,setIsGroupByPageEnabled:ee,selectedLogs:V,sortOrder:te,setSortOrder:v,statusFilters:p,setStatusFilters:m,methodFilters:f,setMethodFilters:S,latencyFilter:h,setLatencyFilter:x,protocolFilter:y,setProtocolFilter:z,networkSortBy:b,setNetworkSortBy:F,filteredLogs:w,logs:I,hiddenUrlPatterns:L,toggleSectionFilter:$,toggleSectionCollapse:H,minStart:j,totalRange:W,newLogIds:G,toggleSelect:Q,setSelected:U,maxNetworkLogs:D}=(0,InspectorContext_1.useInspector)(),{t:R}=(0,i18n_1.useTranslation)(),oe=(0,react_1.useRef)(null),[re,K]=react_1.default.useState(!1),[X,J]=react_1.default.useState(!1),[k,Y]=react_1.default.useState(D||50);react_1.default.useEffect(()=>{Y(D||50)},[t,A,D]);const E=(0,react_1.useMemo)(()=>u?l:l.slice(0,k),[u,l,k]),le=(0,react_1.useCallback)(e=>e?.id?String(e.id):"",[]),C=(0,react_1.useMemo)(()=>p.size>0&&!p.has("all")||f.size>0&&!f.has("all")||h!=="all"||y!=="all"||b!=="time_desc",[p,f,h,y,b]),ae=(0,react_1.useMemo)(()=>{let e=0;return p.size>0&&!p.has("all")&&(e+=p.size),f.size>0&&!f.has("all")&&(e+=f.size),h!=="all"&&e++,y!=="all"&&e++,b!=="time_desc"&&e++,e},[p,f,h,y,b]),ie=(0,react_1.useMemo)(()=>({statusCodes:p.size>0?new Set(p):new Set(["all"]),methods:f.size>0?new Set(f):new Set(["all"]),latency:h,protocol:y,sortBy:b}),[p,f,h,y,b]),ne=(0,react_1.useCallback)(e=>{e.statusCodes.has("all")||e.statusCodes.size===0?m(new Set):m(new Set(e.statusCodes)),e.methods.has("all")||e.methods.size===0?S(new Set):S(new Set([...e.methods].map(n=>n))),x(e.latency||"all"),z(e.protocol||"all"),F(e.sortBy||"time_desc"),e.sortBy==="time_asc"?v("oldest"):v("newest")},[m,S,x,z,F,v]),P=(0,react_1.useMemo)(()=>!L||L.length===0?I:I.filter(e=>!(0,helpers_1.isUrlHidden)(e.url,L)),[I,L]),g=(0,react_1.useMemo)(()=>{let e=0,n=0,s=0,c=0,T=0,q=0;return P.forEach(d=>{const o=typeof d.status=="number"?d.status:parseInt(String(d.status),10);d.status===0||d.status==null||!isNaN(o)&&o>=400?e++:!isNaN(o)&&o>=200&&o<400&&n++,(d.duration||0)>=500&&s++;const B=(d.method||"").toUpperCase();B==="POST"&&c++,B==="GET"&&T++;const _=(d.url||"").toLowerCase(),O=(d.client||"").toLowerCase();(_.includes("graphql")||O.includes("graphql")||O.includes("apollo"))&&q++}),{all:P.length,errors:e,success:n,slow:s,post:c,get:T,graphql:q}},[P]),se=(0,react_1.useMemo)(()=>[{id:"all",label:"All",count:g.all,color:AppColors_1.AppColors.purple},{id:"errors",label:"Errors",count:g.errors,color:AppColors_1.AppColors.errorColor},{id:"success",label:"2xx OK",count:g.success,color:AppColors_1.AppColors.greenColor},{id:"slow",label:"Slow >500ms",count:g.slow,color:AppColors_1.AppColors.warningIconGold},{id:"POST",label:"POST",count:g.post,color:constants_1.METHOD_COLORS.POST||AppColors_1.AppColors.blue500},{id:"GET",label:"GET",count:g.get,color:constants_1.METHOD_COLORS.GET||AppColors_1.AppColors.emerald500},{id:"graphql",label:"GraphQL",count:g.graphql,color:AppColors_1.AppColors.graphqlPink}],[g]),ce=(0,react_1.useCallback)(({item:e,index:n})=>{if(e.type==="header")return<AnimatedEntrance_1.default index={n}distance={8}>
+            <DomainHeader_1.default pageName={e.pageName}color={e.color}stats={e.stats}activeFilters={e.activeFilters}onToggleFilter={$}isCollapsed={e.isCollapsed}onToggleCollapse={H}isFirst={e.isFirst}timestamp={e.timestamp}/>
+          </AnimatedEntrance_1.default>;if(e.type==="loadMore"){const{pageName:d,color:o,remainingCount:B,totalCount:_,loadedCount:O,loadMoreStep:N,hasMore:de}=e;return<react_native_1.View style={[styles_1.default.treeNodeRow,styles_1.default.treeNodeRowLast]}>
             <react_native_1.View style={styles_1.default.treeLines}>
               <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:o},styles_1.default.modernTreeLineLast]}/>
             </react_native_1.View>
             <react_native_1.View style={styles_1.default.treeCardWrapper}>
-              {se?<TouchableScale_1.default onPress={()=>r(d,D||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${o}14`,borderWidth:1.5,borderColor:`${o}40`,shadowColor:o,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
+              {de?<TouchableScale_1.default onPress={()=>r(d,N||10)}hitSlop={6}style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",paddingVertical:9,paddingHorizontal:12,marginVertical:3,marginRight:2,borderRadius:10,backgroundColor:`${o}14`,borderWidth:1.5,borderColor:`${o}40`,shadowColor:o,shadowOffset:{width:0,height:1.5},shadowOpacity:.1,shadowRadius:3,elevation:2}}>
                   <react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:8}}>
                     <react_native_1.View style={{width:22,height:22,borderRadius:11,backgroundColor:o,alignItems:"center",justifyContent:"center",shadowColor:o,shadowOffset:{width:0,height:1},shadowOpacity:.25,shadowRadius:2,elevation:1}}>
                       <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white}size={9}direction="down"/>
                     </react_native_1.View>
                     <react_native_1.View>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:12,color:o}}>
-                        {L("footer.loadMoreRequests",{count:D,defaultValue:`Load ${D} More Requests`})}
+                        {R("footer.loadMoreRequests",{count:N,defaultValue:`Load ${N} More Requests`})}
                       </react_native_1.Text>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9.5,color:AppColors_1.AppColors.grayTextWeak,marginTop:1}}>
-                        Showing {P} of {_} requests
+                        Showing {O} of {_} requests
                       </react_native_1.Text>
                     </react_native_1.View>
                   </react_native_1.View>
 
                   <react_native_1.View style={{flexDirection:"row",alignItems:"center",backgroundColor:`${o}25`,paddingHorizontal:8,paddingVertical:4,borderRadius:8,borderWidth:1,borderColor:`${o}40`,gap:3}}>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:o}}>
-                      +{O}
+                      +{B}
                     </react_native_1.Text>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interRegular,fontSize:9,color:o}}>
                       more
@@ -34,7 +34,7 @@
                       <NetworkIcons_1.CheckIcon color={o}size={8}/>
                     </react_native_1.View>
                     <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:11,color:AppColors_1.AppColors.grayTextStrong}}>
-                      {L("footer.allLoaded",{count:_,defaultValue:`All ${_} requests loaded`})}
+                      {R("footer.allLoaded",{count:_,defaultValue:`All ${_} requests loaded`})}
                     </react_native_1.Text>
                   </react_native_1.View>
 
@@ -45,21 +45,21 @@
                   </react_native_1.View>
                 </react_native_1.View>}
             </react_native_1.View>
-          </react_native_1.View>}const{log:s,isLast:c,color:A}=e,k=M.slice(0,n).filter(d=>!d.type).length;return<AnimatedEntrance_1.default index={n}distance={8}style={u?[styles_1.default.treeNodeRow,c&&styles_1.default.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
+          </react_native_1.View>}const{log:s,isLast:c,color:T}=e,q=E.slice(0,n).filter(d=>!d.type).length;return<AnimatedEntrance_1.default index={n}distance={8}style={u?[styles_1.default.treeNodeRow,c&&styles_1.default.treeNodeRowLast]:{marginBottom:5,marginHorizontal:5}}>
           {u&&<react_native_1.View style={styles_1.default.treeLines}>
-              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:A},c&&styles_1.default.modernTreeLineLast]}/>
-              {!c&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:A}]}/>}
+              <react_native_1.View style={[styles_1.default.modernTreeLine,{borderColor:T},c&&styles_1.default.modernTreeLineLast]}/>
+              {!c&&<react_native_1.View style={[styles_1.default.modernTreeBranch,{borderColor:T}]}/>}
             </react_native_1.View>}
           <react_native_1.View style={u?styles_1.default.treeCardWrapper:{flex:1}}>
-            <LogCard_1.default testID={`inspector.network.item.${k}`}item={s}isSelected={v.has(s.id)}onToggleSelect={W}onPress={()=>{G(s)}}timelineMinStart={$}timelineTotalRange={H}isNew={j.has(s.id)}searchStr={t}/>
+            <LogCard_1.default testID={`inspector.network.item.${q}`}item={s}isSelected={V.has(s.id)}onToggleSelect={Q}onPress={()=>{U(s)}}timelineMinStart={j}timelineTotalRange={W}isNew={G.has(s.id)}searchStr={t}/>
           </react_native_1.View>
-        </AnimatedEntrance_1.default>},[M,u,$,H,j,v,W,t,E,N,r,G,L]);return<react_native_1.View style={{flex:1}}>
+        </AnimatedEntrance_1.default>},[E,u,j,W,G,V,Q,t,$,H,r,U,R]);return<react_native_1.View style={{flex:1}}>
       <react_native_1.View style={{marginTop:6}}>
             
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={[styles_1.default.searchContainer,K&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
-                <NetworkIcons_1.SearchIcon color={K?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
-                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={t}onChangeText={a}onFocus={()=>U(!0)}onBlur={()=>U(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
+              <react_native_1.View style={[styles_1.default.searchContainer,X&&{borderColor:AppColors_1.AppColors.purple,borderWidth:1.5}]}>
+                <NetworkIcons_1.SearchIcon color={X?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextWeak}size={15}/>
+                <react_native_1.TextInput placeholder="Search URL, status, method, headers, body..."placeholderTextColor={AppColors_1.AppColors.grayTextWeak}value={t}onChangeText={a}onFocus={()=>J(!0)}onBlur={()=>J(!1)}style={styles_1.default.searchInput}autoCorrect={!1}autoCapitalize="none"/>
 
                 {t.length>0&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",gap:4}}>
                     <react_native_1.View style={{backgroundColor:`${AppColors_1.AppColors.purple}20`,borderRadius:10,paddingHorizontal:6,paddingVertical:1.5}}>
@@ -74,22 +74,22 @@
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={J}hitSlop={6}>
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,{borderColor:`${AppColors_1.AppColors.errorColor}38`,backgroundColor:`${AppColors_1.AppColors.errorColor}0F`}]}onPress={Z}hitSlop={6}>
                   <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor}size={15}/>
-                  {v.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
+                  {V.size>0&&<react_native_1.View style={styles_1.default.trashBadge}>
                       <react_native_1.Text style={styles_1.default.trashBadgeText}>
-                        {v.size}
+                        {V.size}
                       </react_native_1.Text>
                     </react_native_1.View>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,u&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>Y(e=>!e)}hitSlop={6}accessibilityLabel={u?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
+                <TouchableScale_1.default style={[styles_1.default.toolbarBtn,u&&{borderColor:AppColors_1.AppColors.purple,backgroundColor:`${AppColors_1.AppColors.purple}15`}]}onPress={()=>ee(e=>!e)}hitSlop={6}accessibilityLabel={u?"Page Accordion Grouping Enabled (Tap for Plain List)":"Plain List Enabled (Tap for Page Accordion)"}accessibilityRole="button">
                   <NetworkIcons_1.LayersIcon color={u?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayTextStrong}size={16}/>
                   {u&&<react_native_1.View style={styles_1.default.activeFilterDot}/>}
                 </TouchableScale_1.default>
 
-                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>x(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
-                  <NetworkIcons_1.SortArrowIcon direction={Z==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
+                <TouchableScale_1.default style={styles_1.default.toolbarBtn}onPress={()=>v(e=>e==="newest"?"oldest":"newest")}hitSlop={10}>
+                  <NetworkIcons_1.SortArrowIcon direction={te==="newest"?"down":"up"}color={AppColors_1.AppColors.grayTextStrong}size={18}/>
                 </TouchableScale_1.default>
               </react_native_1.View>
             </react_native_1.View>
@@ -97,7 +97,7 @@
             
             <react_native_1.View style={{flexDirection:"row",alignItems:"center",marginBottom:8,paddingHorizontal:8,gap:6}}>
               <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={!1}style={{flex:1}}contentContainerStyle={{flexDirection:"row",alignItems:"center",gap:6,paddingRight:6}}>
-                {ie.map(e=>{const n=V===e.id,s=e.color||AppColors_1.AppColors.purple,c=n?AppColors_1.AppColors.white:s;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{q(n?"all":e.id)}}>
+                {se.map(e=>{const n=A===e.id,s=e.color||AppColors_1.AppColors.purple,c=n?AppColors_1.AppColors.white:s;return<TouchableScale_1.default testID={`inspector.network.filter.${e.id.toLowerCase()}`}key={e.id}onPress={()=>{M(n?"all":e.id)}}>
                       <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:9,paddingVertical:4.5,borderRadius:8,backgroundColor:n?s:`${s}12`,borderWidth:1,borderColor:n?s:`${s}30`,gap:5}}>
                         {e.id==="all"&&<NetworkIcons_1.LayersIcon size={11}color={c}/>}
                         {e.id==="errors"&&<NetworkIcons_1.CircleXIcon size={11}color={c}/>}
@@ -118,15 +118,15 @@
                     </TouchableScale_1.default>})}
               </react_native_1.ScrollView>
 
-              <TouchableScale_1.default onPress={()=>Q(!0)}style={{flexShrink:0}}>
+              <TouchableScale_1.default onPress={()=>K(!0)}style={{flexShrink:0}}>
                 <react_native_1.View style={{flexDirection:"row",alignItems:"center",paddingHorizontal:10,paddingVertical:4.5,borderRadius:8,backgroundColor:C?`${AppColors_1.AppColors.purple}20`:AppColors_1.AppColors.grayBackground,borderWidth:1,borderColor:C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayBorderSecondary,gap:5,shadowColor:AppColors_1.AppColors.black,shadowOpacity:.04,shadowRadius:2,shadowOffset:{width:0,height:1},elevation:1}}>
                   <NetworkIcons_1.FilterIcon size={11}color={C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}/>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:C?AppColors_1.AppColors.purple:AppColors_1.AppColors.grayText}}>
-                    {L("network.moreFilters","More Filters")}
+                    {R("network.moreFilters","More Filters")}
                   </react_native_1.Text>
                   {C&&<react_native_1.View style={{backgroundColor:AppColors_1.AppColors.purple,paddingHorizontal:4.5,paddingVertical:1,borderRadius:6}}>
                       <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:8.5,color:AppColors_1.AppColors.white}}>
-                        {re}
+                        {ae}
                       </react_native_1.Text>
                     </react_native_1.View>}
                 </react_native_1.View>
@@ -134,11 +134,11 @@
             </react_native_1.View>
 
             
-            {(V!=="all"||t.trim().length>0||C||w.length!==T.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
+            {(A!=="all"||t.trim().length>0||C||w.length!==I.length)&&<react_native_1.View style={{flexDirection:"row",alignItems:"center",justifyContent:"space-between",marginHorizontal:8,marginBottom:8,paddingHorizontal:8,paddingVertical:5.5,backgroundColor:`${AppColors_1.AppColors.purple}10`,borderRadius:8,borderWidth:1,borderColor:`${AppColors_1.AppColors.purple}25`}}>
                 <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interMedium,fontSize:10.5,color:AppColors_1.AppColors.purple}}>
-                  Showing {w.length} of {T.length} requests
+                  Showing {w.length} of {P.length} requests
                 </react_native_1.Text>
-                <TouchableScale_1.default onPress={()=>{a(""),q("all"),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),i("all")}}>
+                <TouchableScale_1.default onPress={()=>{a(""),M("all"),m(new Set),S(new Set),x("all"),z("all"),F("time_desc"),i("all")}}>
                   <react_native_1.Text style={{fontFamily:AppFonts_1.AppFonts.interBold,fontSize:10.5,color:AppColors_1.AppColors.errorColor}}>
                     Clear All Filters
                   </react_native_1.Text>
@@ -146,8 +146,10 @@
               </react_native_1.View>}
           </react_native_1.View>
 
-        <react_native_1.FlatList ref={ee}data={M}keyExtractor={oe}renderItem={ne}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||C||V!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),m(new Set),S(new Set),z("all"),F("all"),I("time_desc"),q("all"),i("all")}}/>}ListFooterComponent={l.length>0?<EndOfListFooter_1.default count={u?w.length:Math.min(R,w.length)}totalCount={w.length}label="requests"hasMore={!u&&w.length>R}loadMoreStep={30}onLoadMore={()=>X(e=>e+30)}/>:null}style={{flex:1}}contentContainerStyle={[styles_1.default.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
+        <react_native_1.FlatList ref={oe}data={E}keyExtractor={le}renderItem={ce}initialNumToRender={10}maxToRenderPerBatch={8}windowSize={5}updateCellsBatchingPeriod={40}removeClippedSubviews={!0}renderToHardwareTextureAndroid={!0}showsVerticalScrollIndicator={!1}nestedScrollEnabled={!0}ListEmptyComponent={<EmptyState_1.default isSearch={t.length>0||C||A!=="all"}searchQuery={t}customTitle={t.length>0?"No matching API requests":"No network activity"}onClearSearch={()=>{a(""),m(new Set),S(new Set),x("all"),z("all"),F("time_desc"),M("all"),i("all")}}/>}ListFooterComponent={l.length>0?<react_native_1.View style={{paddingBottom:24}}>
+              <EndOfListFooter_1.default count={u?w.length:Math.min(k,w.length)}totalCount={w.length}label="requests"hasMore={!u&&w.length>k}loadMoreStep={30}onLoadMore={()=>Y(e=>e+30)}/>
+            </react_native_1.View>:null}style={{flex:1}}contentContainerStyle={[styles_1.default.listContent,{flexGrow:1}]}keyboardShouldPersistTaps="handled"/>
 
       
-      <NetworkFilterModal_1.default visible={te}onClose={()=>Q(!1)}filters={le}onApply={ae}searchQuery={t}/>
+      <NetworkFilterModal_1.default visible={re}onClose={()=>K(!1)}filters={ie}onApply={ne}searchQuery={t}/>
     </react_native_1.View>});exports.default=NetworkTab;

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

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