@buoy-gg/highlight-updates 2.1.6 → 2.1.8

package/lib/commonjs/highlight-updates/components/HighlightUpdatesModal.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUpdatesModal=HighlightUpdatesModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IsolatedRenderList=require("./IsolatedRenderList"),_ModalHeaderContent=require("./ModalHeaderContent"),_RenderHistoryViewer=require("./RenderHistoryViewer"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(s,t,i):s[t]=e[t]);return s})(e,t)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=_RenderTracker.RenderTracker.getRenders(),t={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,t)=>e+t.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(t,null,2)}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:i,onInitialNativeTagHandled:s}){const l=(0,_license.useIsPro)(),[o,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[g,_]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[h,p]=(0,_react.useState)(null),[f,R]=(0,_react.useState)(0),[T,m]=(0,_react.useState)(!1),[C,y]=(0,_react.useState)("filters"),[x,b]=(0,_react.useState)("details"),[k,S]=(0,_react.useState)(0),[v,w]=(0,_react.useState)(""),[H,U]=(0,_react.useState)(!1),I=(0,_react.useRef)(null),j=(0,_react.useRef)([]),D=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[P,F]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[N,V]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[M,q]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),E=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1),z=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!E.current&&(E.current=!0)},[e]),(0,_react.useEffect)(()=>{e&&!A.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};_RenderTracker.RenderTracker.setFilters(r);const a=_RenderTracker.RenderTracker.getFilters();D.current=a,V(a),F(a.includePatterns.length+a.excludePatterns.length)}A.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const e={includeTestID:Array.from(N.includeTestID),includeNativeID:Array.from(N.includeNativeID),includeViewType:Array.from(N.includeViewType),includeComponent:Array.from(N.includeComponent),excludeTestID:Array.from(N.excludeTestID),excludeNativeID:Array.from(N.excludeNativeID),excludeViewType:Array.from(N.excludeViewType),excludeComponent:Array.from(N.excludeComponent),includePatterns:N.includePatterns,excludePatterns:N.excludePatterns};await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[N]),(0,_react.useEffect)(()=>{e&&!z.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:a,...n}=t;_RenderTracker.RenderTracker.setSettings(n),q(_RenderTracker.RenderTracker.getSettings())}z.current=!0}catch(e){z.current=!0}})()},[e]),(0,_react.useEffect)(()=>{z.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=M;await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[M]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{H&&requestAnimationFrame(()=>{I.current?.focus()})},[H]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=i){const e=_RenderTracker.RenderTracker.getRender(String(i));e&&(p(e),R(0),m(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),s?.()}},[e,i,s]);const O=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),K=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),L=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),_(!1)},[]),B=(0,_react.useMemo)(()=>g?formatRenderDataForClipboard():"",[g]),W=(0,_react.useCallback)(e=>{w(e)},[]),J=(0,_react.useCallback)((e,t,r)=>{p(e),R(t),b("details"),S(0),j.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),G=(0,_react.useCallback)(e=>{j.current=e},[]),Q=(0,_react.useCallback)(()=>{p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),X=(0,_react.useCallback)(()=>{const e=j.current;if(f>0){const t=f-1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Y=(0,_react.useCallback)(()=>{const e=j.current;if(f<e.length-1){const t=f+1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Z=(0,_react.useCallback)(()=>{m(!1)},[]),$=(0,_react.useCallback)(()=>{m(!0)},[]),ee=(0,_react.useCallback)(()=>{U(!0)},[]),te=(0,_react.useCallback)(()=>{U(!1)},[]),re=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();D.current=t,V(t),F(t.includePatterns.length+t.excludePatterns.length)},[]),ae=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.RenderTracker.getFilters(),a={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.excludePatterns=[...r.excludePatterns,e]),Object.keys(a).length>0&&(re(a),p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),q(_RenderTracker.RenderTracker.getSettings())},[]),ie=(0,_react.useCallback)(e=>{_(e.totalComponents>0)},[]),se=(0,_react.useCallback)(()=>T?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:C,onTabChange:y,activeFilterCount:P}):h?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Q,activeTab:x,onTabChange:b,hasHistory:(h.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:H,searchText:v,onSearchChange:W,onSearchToggle:ee,onSearchClose:te,onFilterToggle:$,onToggleTracking:O,onToggleFreeze:K,onClear:L,copyData:B,isTracking:o,isFrozen:d,activeFilterCount:P,hasRenders:g,searchInputRef:I}),[T,h,r,H,v,o,d,P,g,C,x,Z,Q,W,ee,te,$,O,K,L,B]),le=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const oe=j.current.length,ce=h?"details"===x?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:f,totalItems:oe,onPrevious:X,onNext:Y,itemLabel:"Component",subtitle:h.componentName||h.displayName||h.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:h,selectedEventIndex:k,onEventIndexChange:S,isPro:l}):null;return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:le,header:{showToggleButton:!0,customContent:se()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:h&&("details"===x||(h.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:h?"details"===x?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:h,disableInternalFooter:!0,onAddFilter:ae,isPro:l}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:h,disableInternalFooter:!0,selectedEventIndex:k,onEventIndexChange:S,isPro:l}):T?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:N,onFilterChange:re,settings:M,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:C}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!o&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:v,filters:N,onSelectRender:J,onStatsChange:ie,onRendersChange:G,isTracking:o,isPro:l})]})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"20"},disabledText:{color:_sharedUi.buoyColors.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.HighlightUpdatesModal=HighlightUpdatesModal,exports.default=void 0;var _react=_interopRequireWildcard(require("react")),_reactNative=require("react-native"),_sharedUi=require("@buoy-gg/shared-ui"),_license=require("@buoy-gg/license"),_HighlightUpdatesController=_interopRequireDefault(require("../utils/HighlightUpdatesController")),_RenderTracker=require("../utils/RenderTracker"),_RenderDetailView=require("./RenderDetailView"),_HighlightFilterView=require("./HighlightFilterView"),_IsolatedRenderList=require("./IsolatedRenderList"),_ModalHeaderContent=require("./ModalHeaderContent"),_RenderHistoryViewer=require("./RenderHistoryViewer"),_jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function _interopRequireWildcard(e,t){if("function"==typeof WeakMap)var r=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,t){if(!t&&e&&e.__esModule)return e;var n,i,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(n=t?a:r){if(n.has(e))return n.get(e);n.set(e,s)}for(const t in e)"default"!==t&&{}.hasOwnProperty.call(e,t)&&((i=(n=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,t))&&(i.get||i.set)?n(s,t,i):s[t]=e[t]);return s})(e,t)}const DisabledBanner=_react.default.memo(function(){return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.disabledBanner,children:[(0,_jsxRuntime.jsx)(_sharedUi.Power,{size:14,color:_sharedUi.buoyColors.warning}),(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=_RenderTracker.RenderTracker.getRenders(),t={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,t)=>e+t.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(t,null,2)}function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:a,enableSharedModalDimensions:n=!1,initialNativeTag:i,onInitialNativeTagHandled:s}){const l=(0,_license.useIsPro)(),[o,c]=(0,_react.useState)(!1),[d,u]=(0,_react.useState)(()=>_HighlightUpdatesController.default.getFrozen()),[g,_]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getStats().totalComponents>0),[h,p]=(0,_react.useState)(null),[f,R]=(0,_react.useState)(0),[T,m]=(0,_react.useState)(!1),[C,y]=(0,_react.useState)("filters"),[x,b]=(0,_react.useState)("details"),[k,S]=(0,_react.useState)(0),[v,w]=(0,_react.useState)(""),[H,U]=(0,_react.useState)(!1),I=(0,_react.useRef)(null),j=(0,_react.useRef)([]),D=(0,_react.useRef)(_RenderTracker.RenderTracker.getFilters()),[P,F]=(0,_react.useState)(()=>{const e=_RenderTracker.RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[N,V]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getFilters()),[M,q]=(0,_react.useState)(()=>_RenderTracker.RenderTracker.getSettings()),E=(0,_react.useRef)(!1),A=(0,_react.useRef)(!1),z=(0,_react.useRef)(!1);(0,_react.useEffect)(()=>{e&&!E.current&&(E.current=!0)},[e]),(0,_react.useEffect)(()=>{e&&!A.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};_RenderTracker.RenderTracker.setFilters(r);const a=_RenderTracker.RenderTracker.getFilters();D.current=a,V(a),F(a.includePatterns.length+a.excludePatterns.length)}A.current=!0}catch(e){}})()},[e]),(0,_react.useEffect)(()=>{A.current&&(async()=>{try{const e={includeTestID:Array.from(N.includeTestID),includeNativeID:Array.from(N.includeNativeID),includeViewType:Array.from(N.includeViewType),includeComponent:Array.from(N.includeComponent),excludeTestID:Array.from(N.excludeTestID),excludeNativeID:Array.from(N.excludeNativeID),excludeViewType:Array.from(N.excludeViewType),excludeComponent:Array.from(N.excludeComponent),includePatterns:N.includePatterns,excludePatterns:N.excludePatterns};await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[N]),(0,_react.useEffect)(()=>{e&&!z.current&&(async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:a,...n}=t;_RenderTracker.RenderTracker.setSettings(n),q(_RenderTracker.RenderTracker.getSettings())}z.current=!0}catch(e){z.current=!0}})()},[e]),(0,_react.useEffect)(()=>{z.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=M;await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[M]),(0,_react.useEffect)(()=>{const e=_RenderTracker.RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{const e=_HighlightUpdatesController.default.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),(0,_react.useEffect)(()=>{H&&requestAnimationFrame(()=>{I.current?.focus()})},[H]),(0,_react.useEffect)(()=>{e||_HighlightUpdatesController.default.setSpotlight(null)},[e]),(0,_react.useEffect)(()=>{if(e&&null!=i){const e=_RenderTracker.RenderTracker.getRender(String(i));e&&(p(e),R(0),m(!1),_HighlightUpdatesController.default.setSpotlight(e.nativeTag)),s?.()}},[e,i,s]);const O=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.isInitialized()||_HighlightUpdatesController.default.initialize(),_HighlightUpdatesController.default.toggle()},[]),K=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.toggleFreeze()},[]),L=(0,_react.useCallback)(()=>{_HighlightUpdatesController.default.clearRenderCounts(),_(!1)},[]),B=g?formatRenderDataForClipboard:"",W=(0,_react.useCallback)(e=>{w(e)},[]),J=(0,_react.useCallback)((e,t,r)=>{p(e),R(t),b("details"),S(0),j.current=r,_HighlightUpdatesController.default.setSpotlight(e.nativeTag)},[]),G=(0,_react.useCallback)(e=>{j.current=e},[]),Q=(0,_react.useCallback)(()=>{p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null)},[]),X=(0,_react.useCallback)(()=>{const e=j.current;if(f>0){const t=f-1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Y=(0,_react.useCallback)(()=>{const e=j.current;if(f<e.length-1){const t=f+1,r=e[t];r&&(p(r),R(t),_HighlightUpdatesController.default.setSpotlight(r.nativeTag))}},[f]),Z=(0,_react.useCallback)(()=>{m(!1)},[]),$=(0,_react.useCallback)(()=>{m(!0)},[]),ee=(0,_react.useCallback)(()=>{U(!0)},[]),te=(0,_react.useCallback)(()=>{U(!1)},[]),re=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setFilters(e);const t=_RenderTracker.RenderTracker.getFilters();D.current=t,V(t),F(t.includePatterns.length+t.excludePatterns.length)},[]),ae=(0,_react.useCallback)((e,t)=>{const r=_RenderTracker.RenderTracker.getFilters(),a={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(a.excludePatterns=[...r.excludePatterns,e]),Object.keys(a).length>0&&(re(a),p(null),R(0),_HighlightUpdatesController.default.setSpotlight(null))},[re]),ne=(0,_react.useCallback)(e=>{_RenderTracker.RenderTracker.setSettings(e),q(_RenderTracker.RenderTracker.getSettings())},[]),ie=(0,_react.useCallback)(e=>{_(e.totalComponents>0)},[]),se=(0,_react.useCallback)(()=>T?(0,_jsxRuntime.jsx)(_ModalHeaderContent.FilterViewHeader,{onBack:Z,activeTab:C,onTabChange:y,activeFilterCount:P}):h?(0,_jsxRuntime.jsx)(_ModalHeaderContent.DetailViewHeader,{onBack:Q,activeTab:x,onTabChange:b,hasHistory:(h.renderHistory?.length??0)>0}):(0,_jsxRuntime.jsx)(_ModalHeaderContent.MainListHeader,{onBack:r,isSearchActive:H,searchText:v,onSearchChange:W,onSearchToggle:ee,onSearchClose:te,onFilterToggle:$,onToggleTracking:O,onToggleFreeze:K,onClear:L,copyData:B,isTracking:o,isFrozen:d,activeFilterCount:P,hasRenders:g,searchInputRef:I}),[T,h,r,H,v,o,d,P,g,C,x,Z,Q,W,ee,te,$,O,K,L,B]),le=n?_sharedUi.devToolsStorageKeys.modal.root():_sharedUi.devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const oe=j.current.length,ce=h?"details"===x?(0,_jsxRuntime.jsx)(_sharedUi.EventStepperFooter,{currentIndex:f,totalItems:oe,onPrevious:X,onNext:Y,itemLabel:"Component",subtitle:h.componentName||h.displayName||h.viewType}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryFooter,{render:h,selectedEventIndex:k,onEventIndexChange:S,isPro:l}):null;return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:e,onClose:t,onMinimize:a,persistenceKey:le,header:{showToggleButton:!0,customContent:se()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:h&&("details"===x||(h.renderHistory?.length??0)>1)?68:0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:h?"details"===x?(0,_jsxRuntime.jsx)(_RenderDetailView.RenderDetailView,{render:h,disableInternalFooter:!0,onAddFilter:ae,isPro:l}):(0,_jsxRuntime.jsx)(_RenderHistoryViewer.RenderHistoryViewer,{render:h,disableInternalFooter:!0,selectedEventIndex:k,onEventIndexChange:S,isPro:l}):T?(0,_jsxRuntime.jsx)(_HighlightFilterView.HighlightFilterView,{filters:N,onFilterChange:re,settings:M,onSettingsChange:ne,availableProps:_RenderTracker.RenderTracker.getAvailableProps(),activeTab:C}):(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[!o&&(0,_jsxRuntime.jsx)(DisabledBanner,{}),(0,_jsxRuntime.jsx)(_IsolatedRenderList.IsolatedRenderList,{searchText:v,filters:N,onSelectRender:J,onStatsChange:ie,onRendersChange:G,isTracking:o,isPro:l})]})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:_sharedUi.buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:_sharedUi.buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:_sharedUi.buoyColors.warning+"20"},disabledText:{color:_sharedUi.buoyColors.warning,fontSize:11,flex:1}});var _default=exports.default=HighlightUpdatesModal;

package/lib/module/highlight-updates/components/HighlightUpdatesModal.js

@@ -1 +1 @@
-"use strict";import React,{useState,useEffect,useRef,useCallback,useMemo}from"react";import{View,Text,StyleSheet}from"react-native";import{Power,JsModal,devToolsStorageKeys,persistentStorage,buoyColors}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import HighlightUpdatesController from"../utils/HighlightUpdatesController";import{RenderTracker}from"../utils/RenderTracker";import{RenderDetailView}from"./RenderDetailView";import{EventStepperFooter}from"@buoy-gg/shared-ui";import{HighlightFilterView}from"./HighlightFilterView";import{IsolatedRenderList}from"./IsolatedRenderList";import{MainListHeader,FilterViewHeader,DetailViewHeader}from"./ModalHeaderContent";import{RenderHistoryViewer,RenderHistoryFooter}from"./RenderHistoryViewer";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DisabledBanner=React.memo(function(){return _jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:buoyColors.warning}),_jsx(Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=RenderTracker.getRenders(),t={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,t)=>e+t.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(t,null,2)}export function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:s=!1,initialNativeTag:a,onInitialNativeTagHandled:i}){const o=useIsPro(),[l,c]=useState(!1),[d,u]=useState(()=>HighlightUpdatesController.getFrozen()),[g,h]=useState(()=>RenderTracker.getStats().totalComponents>0),[p,m]=useState(null),[C,y]=useState(0),[f,T]=useState(!1),[S,b]=useState("filters"),[x,R]=useState("details"),[k,v]=useState(0),[w,I]=useState(""),[H,D]=useState(!1),F=useRef(null),P=useRef([]),_=useRef(RenderTracker.getFilters()),[V,N]=useState(()=>{const e=RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[U,j]=useState(()=>RenderTracker.getFilters()),[E,A]=useState(()=>RenderTracker.getSettings()),M=useRef(!1),z=useRef(!1),K=useRef(!1);useEffect(()=>{e&&!M.current&&(M.current=!0)},[e]),useEffect(()=>{e&&!z.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};RenderTracker.setFilters(r);const n=RenderTracker.getFilters();_.current=n,j(n),N(n.includePatterns.length+n.excludePatterns.length)}z.current=!0}catch(e){}})()},[e]),useEffect(()=>{z.current&&(async()=>{try{const e={includeTestID:Array.from(U.includeTestID),includeNativeID:Array.from(U.includeNativeID),includeViewType:Array.from(U.includeViewType),includeComponent:Array.from(U.includeComponent),excludeTestID:Array.from(U.excludeTestID),excludeNativeID:Array.from(U.excludeNativeID),excludeViewType:Array.from(U.excludeViewType),excludeComponent:Array.from(U.excludeComponent),includePatterns:U.includePatterns,excludePatterns:U.excludePatterns};await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[U]),useEffect(()=>{e&&!K.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:n,...s}=t;RenderTracker.setSettings(s),A(RenderTracker.getSettings())}K.current=!0}catch(e){K.current=!0}})()},[e]),useEffect(()=>{K.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=E;await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[E]),useEffect(()=>{const e=RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),useEffect(()=>{const e=HighlightUpdatesController.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),useEffect(()=>{H&&requestAnimationFrame(()=>{F.current?.focus()})},[H]),useEffect(()=>{e||HighlightUpdatesController.setSpotlight(null)},[e]),useEffect(()=>{if(e&&null!=a){const e=RenderTracker.getRender(String(a));e&&(m(e),y(0),T(!1),HighlightUpdatesController.setSpotlight(e.nativeTag)),i?.()}},[e,a,i]);const L=useCallback(()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()},[]),B=useCallback(()=>{HighlightUpdatesController.toggleFreeze()},[]),J=useCallback(()=>{HighlightUpdatesController.clearRenderCounts(),h(!1)},[]),O=useMemo(()=>g?formatRenderDataForClipboard():"",[g]),q=useCallback(e=>{I(e)},[]),G=useCallback((e,t,r)=>{m(e),y(t),R("details"),v(0),P.current=r,HighlightUpdatesController.setSpotlight(e.nativeTag)},[]),W=useCallback(e=>{P.current=e},[]),Q=useCallback(()=>{m(null),y(0),HighlightUpdatesController.setSpotlight(null)},[]),X=useCallback(()=>{const e=P.current;if(C>0){const t=C-1,r=e[t];r&&(m(r),y(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[C]),Y=useCallback(()=>{const e=P.current;if(C<e.length-1){const t=C+1,r=e[t];r&&(m(r),y(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[C]),Z=useCallback(()=>{T(!1)},[]),$=useCallback(()=>{T(!0)},[]),ee=useCallback(()=>{D(!0)},[]),te=useCallback(()=>{D(!1)},[]),re=useCallback(e=>{RenderTracker.setFilters(e);const t=RenderTracker.getFilters();_.current=t,j(t),N(t.includePatterns.length+t.excludePatterns.length)},[]),ne=useCallback((e,t)=>{const r=RenderTracker.getFilters(),n={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.excludePatterns=[...r.excludePatterns,e]),Object.keys(n).length>0&&(re(n),m(null),y(0),HighlightUpdatesController.setSpotlight(null))},[re]),se=useCallback(e=>{RenderTracker.setSettings(e),A(RenderTracker.getSettings())},[]),ae=useCallback(e=>{h(e.totalComponents>0)},[]),ie=useCallback(()=>f?_jsx(FilterViewHeader,{onBack:Z,activeTab:S,onTabChange:b,activeFilterCount:V}):p?_jsx(DetailViewHeader,{onBack:Q,activeTab:x,onTabChange:R,hasHistory:(p.renderHistory?.length??0)>0}):_jsx(MainListHeader,{onBack:r,isSearchActive:H,searchText:w,onSearchChange:q,onSearchToggle:ee,onSearchClose:te,onFilterToggle:$,onToggleTracking:L,onToggleFreeze:B,onClear:J,copyData:O,isTracking:l,isFrozen:d,activeFilterCount:V,hasRenders:g,searchInputRef:F}),[f,p,r,H,w,l,d,V,g,S,x,Z,Q,q,ee,te,$,L,B,J,O]),oe=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const le=P.current.length,ce=p?"details"===x?_jsx(EventStepperFooter,{currentIndex:C,totalItems:le,onPrevious:X,onNext:Y,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):_jsx(RenderHistoryFooter,{render:p,selectedEventIndex:k,onEventIndexChange:v,isPro:o}):null;return _jsx(JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:oe,header:{showToggleButton:!0,customContent:ie()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:p&&("details"===x||(p.renderHistory?.length??0)>1)?68:0,children:_jsx(View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:p?"details"===x?_jsx(RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:ne,isPro:o}):_jsx(RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:k,onEventIndexChange:v,isPro:o}):f?_jsx(HighlightFilterView,{filters:U,onFilterChange:re,settings:E,onSettingsChange:se,availableProps:RenderTracker.getAvailableProps(),activeTab:S}):_jsxs(_Fragment,{children:[!l&&_jsx(DisabledBanner,{}),_jsx(IsolatedRenderList,{searchText:w,filters:U,onSelectRender:G,onStatsChange:ae,onRendersChange:W,isTracking:l,isPro:o})]})})})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.warning+"20"},disabledText:{color:buoyColors.warning,fontSize:11,flex:1}});export default HighlightUpdatesModal;
+"use strict";import React,{useState,useEffect,useRef,useCallback}from"react";import{View,Text,StyleSheet}from"react-native";import{Power,JsModal,devToolsStorageKeys,persistentStorage,buoyColors}from"@buoy-gg/shared-ui";import{useIsPro}from"@buoy-gg/license";import HighlightUpdatesController from"../utils/HighlightUpdatesController";import{RenderTracker}from"../utils/RenderTracker";import{RenderDetailView}from"./RenderDetailView";import{EventStepperFooter}from"@buoy-gg/shared-ui";import{HighlightFilterView}from"./HighlightFilterView";import{IsolatedRenderList}from"./IsolatedRenderList";import{MainListHeader,FilterViewHeader,DetailViewHeader}from"./ModalHeaderContent";import{RenderHistoryViewer,RenderHistoryFooter}from"./RenderHistoryViewer";import{jsx as _jsx,jsxs as _jsxs,Fragment as _Fragment}from"react/jsx-runtime";const DisabledBanner=React.memo(function(){return _jsxs(View,{style:styles.disabledBanner,children:[_jsx(Power,{size:14,color:buoyColors.warning}),_jsx(Text,{style:styles.disabledText,children:"Render tracking is disabled"})]})});function formatRenderDataForClipboard(){const e=RenderTracker.getRenders(),t={exportedAt:(new Date).toISOString(),totalComponents:e.length,totalRenders:e.reduce((e,t)=>e+t.renderCount,0),components:e.map(e=>({componentName:e.componentName||e.displayName,viewType:e.viewType,nativeTag:e.nativeTag,testID:e.testID,nativeID:e.nativeID,accessibilityLabel:e.accessibilityLabel,renderCount:e.renderCount,firstRenderTime:e.firstRenderTime,lastRenderTime:e.lastRenderTime,lastRenderCause:e.lastRenderCause?{type:e.lastRenderCause.type,componentCause:e.lastRenderCause.componentCause,changedKeys:e.lastRenderCause.changedKeys,hookChanges:e.lastRenderCause.hookChanges?.map(e=>({type:e.type,index:e.index,description:e.description}))}:null,renderHistory:e.renderHistory?.map(e=>({renderNumber:e.renderNumber,timestamp:e.timestamp,cause:{type:e.cause.type,componentCause:e.cause.componentCause,changedKeys:e.cause.changedKeys}}))}))};return JSON.stringify(t,null,2)}export function HighlightUpdatesModal({visible:e,onClose:t,onBack:r,onMinimize:n,enableSharedModalDimensions:s=!1,initialNativeTag:a,onInitialNativeTagHandled:i}){const l=useIsPro(),[o,c]=useState(!1),[d,u]=useState(()=>HighlightUpdatesController.getFrozen()),[g,h]=useState(()=>RenderTracker.getStats().totalComponents>0),[p,m]=useState(null),[C,y]=useState(0),[f,T]=useState(!1),[S,b]=useState("filters"),[x,R]=useState("details"),[k,v]=useState(0),[w,I]=useState(""),[H,D]=useState(!1),F=useRef(null),P=useRef([]),_=useRef(RenderTracker.getFilters()),[V,N]=useState(()=>{const e=RenderTracker.getFilters();return e.includePatterns.length+e.excludePatterns.length}),[U,j]=useState(()=>RenderTracker.getFilters()),[E,A]=useState(()=>RenderTracker.getSettings()),z=useRef(!1),K=useRef(!1),M=useRef(!1);useEffect(()=>{e&&!z.current&&(z.current=!0)},[e]),useEffect(()=>{e&&!K.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.filters());if(e){const t=JSON.parse(e),r={includeTestID:new Set(t.includeTestID||[]),includeNativeID:new Set(t.includeNativeID||[]),includeViewType:new Set(t.includeViewType||[]),includeComponent:new Set(t.includeComponent||[]),excludeTestID:new Set(t.excludeTestID||[]),excludeNativeID:new Set(t.excludeNativeID||[]),excludeViewType:new Set(t.excludeViewType||[]),excludeComponent:new Set(t.excludeComponent||[]),includePatterns:t.includePatterns||[],excludePatterns:t.excludePatterns||[]};RenderTracker.setFilters(r);const n=RenderTracker.getFilters();_.current=n,j(n),N(n.includePatterns.length+n.excludePatterns.length)}K.current=!0}catch(e){}})()},[e]),useEffect(()=>{K.current&&(async()=>{try{const e={includeTestID:Array.from(U.includeTestID),includeNativeID:Array.from(U.includeNativeID),includeViewType:Array.from(U.includeViewType),includeComponent:Array.from(U.includeComponent),excludeTestID:Array.from(U.excludeTestID),excludeNativeID:Array.from(U.excludeNativeID),excludeViewType:Array.from(U.excludeViewType),excludeComponent:Array.from(U.excludeComponent),includePatterns:U.includePatterns,excludePatterns:U.excludePatterns};await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.filters(),JSON.stringify(e))}catch(e){}})()},[U]),useEffect(()=>{e&&!M.current&&(async()=>{try{const e=await persistentStorage.getItem(devToolsStorageKeys.highlightUpdates.settings());if(e){const t=JSON.parse(e),{performanceLogging:r,excludeDevTools:n,...s}=t;RenderTracker.setSettings(s),A(RenderTracker.getSettings())}M.current=!0}catch(e){M.current=!0}})()},[e]),useEffect(()=>{M.current&&(async()=>{try{const{performanceLogging:e,excludeDevTools:t,...r}=E;await persistentStorage.setItem(devToolsStorageKeys.highlightUpdates.settings(),JSON.stringify(r))}catch(e){}})()},[E]),useEffect(()=>{const e=RenderTracker.subscribeToState(e=>{c(e.isTracking)});return()=>{e()}},[]),useEffect(()=>{const e=HighlightUpdatesController.subscribeToFreeze(e=>{u(e)});return()=>{e()}},[]),useEffect(()=>{H&&requestAnimationFrame(()=>{F.current?.focus()})},[H]),useEffect(()=>{e||HighlightUpdatesController.setSpotlight(null)},[e]),useEffect(()=>{if(e&&null!=a){const e=RenderTracker.getRender(String(a));e&&(m(e),y(0),T(!1),HighlightUpdatesController.setSpotlight(e.nativeTag)),i?.()}},[e,a,i]);const L=useCallback(()=>{HighlightUpdatesController.isInitialized()||HighlightUpdatesController.initialize(),HighlightUpdatesController.toggle()},[]),B=useCallback(()=>{HighlightUpdatesController.toggleFreeze()},[]),J=useCallback(()=>{HighlightUpdatesController.clearRenderCounts(),h(!1)},[]),O=g?formatRenderDataForClipboard:"",q=useCallback(e=>{I(e)},[]),G=useCallback((e,t,r)=>{m(e),y(t),R("details"),v(0),P.current=r,HighlightUpdatesController.setSpotlight(e.nativeTag)},[]),W=useCallback(e=>{P.current=e},[]),Q=useCallback(()=>{m(null),y(0),HighlightUpdatesController.setSpotlight(null)},[]),X=useCallback(()=>{const e=P.current;if(C>0){const t=C-1,r=e[t];r&&(m(r),y(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[C]),Y=useCallback(()=>{const e=P.current;if(C<e.length-1){const t=C+1,r=e[t];r&&(m(r),y(t),HighlightUpdatesController.setSpotlight(r.nativeTag))}},[C]),Z=useCallback(()=>{T(!1)},[]),$=useCallback(()=>{T(!0)},[]),ee=useCallback(()=>{D(!0)},[]),te=useCallback(()=>{D(!1)},[]),re=useCallback(e=>{RenderTracker.setFilters(e);const t=RenderTracker.getFilters();_.current=t,j(t),N(t.includePatterns.length+t.excludePatterns.length)},[]),ne=useCallback((e,t)=>{const r=RenderTracker.getFilters(),n={};"include"===t?r.includePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.includePatterns=[...r.includePatterns,e]):r.excludePatterns.some(t=>t.type===e.type&&t.value===e.value)||(n.excludePatterns=[...r.excludePatterns,e]),Object.keys(n).length>0&&(re(n),m(null),y(0),HighlightUpdatesController.setSpotlight(null))},[re]),se=useCallback(e=>{RenderTracker.setSettings(e),A(RenderTracker.getSettings())},[]),ae=useCallback(e=>{h(e.totalComponents>0)},[]),ie=useCallback(()=>f?_jsx(FilterViewHeader,{onBack:Z,activeTab:S,onTabChange:b,activeFilterCount:V}):p?_jsx(DetailViewHeader,{onBack:Q,activeTab:x,onTabChange:R,hasHistory:(p.renderHistory?.length??0)>0}):_jsx(MainListHeader,{onBack:r,isSearchActive:H,searchText:w,onSearchChange:q,onSearchToggle:ee,onSearchClose:te,onFilterToggle:$,onToggleTracking:L,onToggleFreeze:B,onClear:J,copyData:O,isTracking:o,isFrozen:d,activeFilterCount:V,hasRenders:g,searchInputRef:F}),[f,p,r,H,w,o,d,V,g,S,x,Z,Q,q,ee,te,$,L,B,J,O]),le=s?devToolsStorageKeys.modal.root():devToolsStorageKeys.highlightUpdates.modal();if(!e)return null;const oe=P.current.length,ce=p?"details"===x?_jsx(EventStepperFooter,{currentIndex:C,totalItems:oe,onPrevious:X,onNext:Y,itemLabel:"Component",subtitle:p.componentName||p.displayName||p.viewType}):_jsx(RenderHistoryFooter,{render:p,selectedEventIndex:k,onEventIndexChange:v,isPro:l}):null;return _jsx(JsModal,{visible:e,onClose:t,onMinimize:n,persistenceKey:le,header:{showToggleButton:!0,customContent:ie()},enablePersistence:!0,initialMode:"bottomSheet",enableGlitchEffects:!0,styles:{},footer:ce,footerHeight:p&&("details"===x||(p.renderHistory?.length??0)>1)?68:0,children:_jsx(View,{nativeID:"__rn_buoy__highlight-modal",style:styles.container,children:p?"details"===x?_jsx(RenderDetailView,{render:p,disableInternalFooter:!0,onAddFilter:ne,isPro:l}):_jsx(RenderHistoryViewer,{render:p,disableInternalFooter:!0,selectedEventIndex:k,onEventIndexChange:v,isPro:l}):f?_jsx(HighlightFilterView,{filters:U,onFilterChange:re,settings:E,onSettingsChange:se,availableProps:RenderTracker.getAvailableProps(),activeTab:S}):_jsxs(_Fragment,{children:[!o&&_jsx(DisabledBanner,{}),_jsx(IsolatedRenderList,{searchText:w,filters:U,onSelectRender:G,onStatsChange:ae,onRendersChange:W,isTracking:o,isPro:l})]})})})}const styles=StyleSheet.create({container:{flex:1,backgroundColor:buoyColors.base},disabledBanner:{flexDirection:"row",alignItems:"center",gap:8,padding:10,marginHorizontal:12,marginTop:8,backgroundColor:buoyColors.warning+"15",borderRadius:8,borderWidth:1,borderColor:buoyColors.warning+"20"},disabledText:{color:buoyColors.warning,fontSize:11,flex:1}});export default HighlightUpdatesModal;

package/lib/typescript/highlight-updates/components/ModalHeaderContent.d.ts

@@ -22,7 +22,7 @@ interface HeaderActionsProps {
     onToggleTracking: () => void;
     onToggleFreeze: () => void;
     onClear: () => void;
-    copyData: string;
+    copyData: string | (() => string);
     isTracking: boolean;
     isFrozen: boolean;
     activeFilterCount: number;
@@ -40,7 +40,7 @@ interface MainListHeaderProps {
     onToggleTracking: () => void;
     onToggleFreeze: () => void;
     onClear: () => void;
-    copyData: string;
+    copyData: string | (() => string);
     isTracking: boolean;
     isFrozen: boolean;
     activeFilterCount: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buoy-gg/highlight-updates",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "description": "Control React DevTools highlight updates feature from your app",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -26,14 +26,14 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@buoy-gg/floating-tools-core": "2.1.6",
-    "@buoy-gg/shared-ui": "2.1.6"
+    "@buoy-gg/shared-ui": "2.1.8",
+    "@buoy-gg/floating-tools-core": "2.1.8"
   },
   "peerDependencies": {
-    "@buoy-gg/license": "2.1.6",
+    "@buoy-gg/license": "2.1.8",
     "react": "*",
     "react-native": "*",
-    "@buoy-gg/core": "2.1.6"
+    "@buoy-gg/core": "2.1.8"
   },
   "peerDependenciesMeta": {
     "@buoy-gg/core": {
@@ -44,8 +44,8 @@
     "@types/react": "^19.1.0",
     "@types/react-native": "^0.73.0",
     "typescript": "~5.8.3",
-    "@buoy-gg/core": "2.1.6",
-    "@buoy-gg/license": "2.1.6"
+    "@buoy-gg/core": "2.1.8",
+    "@buoy-gg/license": "2.1.8"
   },
   "react-native-builder-bob": {
     "source": "src",