@buoy-gg/highlight-updates 7.0.40 → 7.0.42

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

@@ -1,293 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SearchSection = exports.MainListHeader = exports.HeaderActions = exports.FilterViewHeader = exports.DetailViewHeader = exports.CopySettingsViewHeader = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _StatsDisplay = require("./StatsDisplay");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-/**
- * ModalHeaderContent
- *
- * Memoized header content components for the HighlightUpdatesModal.
- * Extracted to prevent re-renders when parent state changes unrelated to header.
- *
- * Following the optimization guide: extract inline JSX to memoized components.
- */
-
-// ============================================================================
-// Search Section - isolated component for search UI
-// ============================================================================
-
-const SearchSectionInner = /*#__PURE__*/(0, _react.memo)(function SearchSection({
-  isActive,
-  searchText,
-  onSearchChange,
-  onSearchClose
-}) {
-  if (!isActive) return null;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
-    value: searchText,
-    onChangeText: onSearchChange,
-    onCancel: () => {
-      onSearchChange("");
-      onSearchClose();
-    },
-    onDismiss: onSearchClose,
-    dismissOnBlur: true,
-    clearOnlyWhenText: true,
-    placeholder: "Search testID, nativeID, component...",
-    accessibilityLabel: "Search renders",
-    iconSize: 14,
-    testID: "buoy-highlight-search-field",
-    containerTestID: "buoy-highlight-search-container",
-    containerNativeID: "__rn_buoy__search-container",
-    clearTestID: "buoy-highlight-search-clear"
-  });
-});
-const SearchSection = exports.SearchSection = SearchSectionInner;
-
-// ============================================================================
-// Header Actions - isolated component for action buttons
-// ============================================================================
-
-const HeaderActionsInner = /*#__PURE__*/(0, _react.memo)(function HeaderActions({
-  onSearchToggle,
-  onFilterToggle,
-  onToggleTracking,
-  onToggleFreeze,
-  onClear,
-  onOpenCopySettings,
-  isTracking,
-  isFrozen,
-  activeFilterCount,
-  hasRenders
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-search",
-      accessibilityRole: "button",
-      accessibilityLabel: "Search renders",
-      onPress: onSearchToggle,
-      style: styles.headerActionButton,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-        size: 14,
-        color: _sharedUi.night.color.textSecondary
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-filters",
-      accessibilityRole: "button",
-      accessibilityLabel: activeFilterCount > 0 ? `Filters, ${activeFilterCount} active` : "Filters",
-      onPress: onFilterToggle,
-      style: [styles.headerActionButton, activeFilterCount > 0 && styles.activeFilterButton],
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-        size: 14,
-        color: activeFilterCount > 0 ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-copy",
-      accessibilityRole: "button",
-      onPress: onOpenCopySettings,
-      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
-      disabled: !hasRenders,
-      accessibilityLabel: "Open copy settings",
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Copy, {
-        size: 14,
-        color: hasRenders ? _sharedUi.night.color.textSecondary : _sharedUi.night.color.textTertiary
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-freeze",
-      accessibilityRole: "button",
-      accessibilityLabel: isFrozen ? "Unfreeze frame" : "Freeze frame",
-      onPress: onToggleFreeze,
-      style: [styles.headerActionButton, isFrozen && styles.freezeButton, !isTracking && styles.headerActionButtonDisabled],
-      disabled: !isTracking,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Pause, {
-        size: 14,
-        color: !isTracking ? _sharedUi.night.color.textTertiary : isFrozen ? _sharedUi.night.color.accent : _sharedUi.night.color.textTertiary
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.PowerToggleButton, {
-      testID: "buoy-highlight-power",
-      isEnabled: isTracking,
-      onToggle: onToggleTracking,
-      accessibilityLabel: "Toggle render tracking"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-      testID: "buoy-highlight-clear",
-      accessibilityRole: "button",
-      accessibilityLabel: "Clear tracked renders",
-      onPress: onClear,
-      style: [styles.headerActionButton, !hasRenders && styles.headerActionButtonDisabled],
-      disabled: !hasRenders,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash2, {
-        size: 14,
-        color: hasRenders ? _sharedUi.night.color.textTertiary : _sharedUi.night.color.textTertiary
-      })
-    })]
-  });
-});
-const HeaderActions = exports.HeaderActions = HeaderActionsInner;
-
-// ============================================================================
-// Main List Header - complete header for main list view
-// ============================================================================
-
-const MainListHeader = exports.MainListHeader = /*#__PURE__*/(0, _react.memo)(function MainListHeader({
-  onBack,
-  isSearchActive,
-  searchText,
-  onSearchChange,
-  onSearchToggle,
-  onSearchClose,
-  onFilterToggle,
-  onToggleTracking,
-  onToggleFreeze,
-  onClear,
-  onOpenCopySettings,
-  isTracking,
-  isFrozen,
-  activeFilterCount,
-  hasRenders,
-  searchInputRef
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [onBack && /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(SearchSection, {
-        isActive: isSearchActive,
-        searchText: searchText,
-        onSearchChange: onSearchChange,
-        onSearchClose: onSearchClose,
-        searchInputRef: searchInputRef
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_StatsDisplay.StatsDisplay, {})
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(HeaderActions, {
-      onSearchToggle: onSearchToggle,
-      onFilterToggle: onFilterToggle,
-      onToggleTracking: onToggleTracking,
-      onToggleFreeze: onToggleFreeze,
-      onClear: onClear,
-      onOpenCopySettings: onOpenCopySettings,
-      isTracking: isTracking,
-      isFrozen: isFrozen,
-      activeFilterCount: activeFilterCount,
-      hasRenders: hasRenders
-    })]
-  });
-});
-
-// ============================================================================
-// Filter View Header
-// ============================================================================
-
-const FilterViewHeader = exports.FilterViewHeader = /*#__PURE__*/(0, _react.memo)(function FilterViewHeader({
-  onBack,
-  activeTab,
-  onTabChange,
-  activeFilterCount = 0
-}) {
-  const tabs = [{
-    key: "filters",
-    label: `Filters${activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}`
-  }, {
-    key: "settings",
-    label: "Settings"
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab),
-        testIDPrefix: "buoy-highlight-filter-tab"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
-  });
-});
-
-// ============================================================================
-// Detail View Header
-// ============================================================================
-
-const DetailViewHeader = exports.DetailViewHeader = /*#__PURE__*/(0, _react.memo)(function DetailViewHeader({
-  onBack,
-  activeTab,
-  onTabChange,
-  hasHistory = true
-}) {
-  const tabs = [{
-    key: "details",
-    label: "Details"
-  }, {
-    key: "history",
-    label: "History",
-    disabled: !hasHistory
-  }];
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        onTabChange: tab => onTabChange(tab),
-        testIDPrefix: "buoy-highlight-detail-tab"
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions, {})]
-  });
-});
-
-// ============================================================================
-// Copy Settings View Header
-// ============================================================================
-
-const CopySettingsViewHeader = exports.CopySettingsViewHeader = /*#__PURE__*/(0, _react.memo)(function CopySettingsViewHeader({
-  onBack
-}) {
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-      onBack: onBack
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "Copy Settings",
-      testID: "buoy-highlight-copy-title"
-    })]
-  });
-});
-
-// ============================================================================
-// Styles
-// ============================================================================
-
-const styles = _reactNative.StyleSheet.create({
-  headerActionButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 8,
-    backgroundColor: _sharedUi.night.color.buttonSurface,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border,
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  headerActionButtonDisabled: {
-    opacity: 0.55
-  },
-  activeFilterButton: {
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderColor: _sharedUi.night.color.accentBorderStrong
-  },
-  freezeButton: {
-    backgroundColor: _sharedUi.night.color.accentSoft,
-    borderColor: _sharedUi.night.color.accentBorderStrong
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.SearchSection=exports.MainListHeader=exports.HeaderActions=exports.FilterViewHeader=exports.DetailViewHeader=exports.CopySettingsViewHeader=void 0;var _react=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _StatsDisplay=require("./StatsDisplay");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireWildcard(d,t){if("function"==typeof WeakMap)var i=new WeakMap,a=new WeakMap;return(_interopRequireWildcard=function(e,c){if(!c&&e&&e.__esModule)return e;var r,n,s={__proto__:null,default:e};if(null===e||"object"!=typeof e&&"function"!=typeof e)return s;if(r=c?a:i){if(r.has(e))return r.get(e);r.set(e,s)}for(const o in e)"default"!==o&&{}.hasOwnProperty.call(e,o)&&((n=(r=Object.defineProperty)&&Object.getOwnPropertyDescriptor(e,o))&&(n.get||n.set)?r(s,o,n):s[o]=e[o]);return s})(d,t)}const SearchSectionInner=(0,_react.memo)(function d({isActive:t,searchText:i,onSearchChange:a,onSearchClose:e}){if(!t)return null;return(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:i,onChangeText:a,onCancel:()=>{a("");e()},onDismiss:e,dismissOnBlur:true,clearOnlyWhenText:true,placeholder:"Search testID, nativeID, component...",accessibilityLabel:"Search renders",iconSize:14,testID:"buoy-highlight-search-field",containerTestID:"buoy-highlight-search-container",containerNativeID:"__rn_buoy__search-container",clearTestID:"buoy-highlight-search-clear"})});const SearchSection=exports.SearchSection=SearchSectionInner;const HeaderActionsInner=(0,_react.memo)(function d({onSearchToggle:t,onFilterToggle:i,onToggleTracking:a,onToggleFreeze:e,onClear:c,onOpenCopySettings:r,isTracking:n,isFrozen:s,activeFilterCount:o,hasRenders:l}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-search",accessibilityRole:"button",accessibilityLabel:"Search renders",onPress:t,style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-filters",accessibilityRole:"button",accessibilityLabel:o>0?`Filters, ${o} active`:"Filters",onPress:i,style:[styles.headerActionButton,o>0&&styles.activeFilterButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:o>0?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-copy",accessibilityRole:"button",onPress:r,style:[styles.headerActionButton,!l&&styles.headerActionButtonDisabled],disabled:!l,accessibilityLabel:"Open copy settings",children:(0,_jsxRuntime.jsx)(_sharedUi.Copy,{size:14,color:l?_sharedUi.night.color.textSecondary:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-freeze",accessibilityRole:"button",accessibilityLabel:s?"Unfreeze frame":"Freeze frame",onPress:e,style:[styles.headerActionButton,s&&styles.freezeButton,!n&&styles.headerActionButtonDisabled],disabled:!n,children:(0,_jsxRuntime.jsx)(_sharedUi.Pause,{size:14,color:!n?_sharedUi.night.color.textTertiary:s?_sharedUi.night.color.accent:_sharedUi.night.color.textTertiary})}),(0,_jsxRuntime.jsx)(_sharedUi.PowerToggleButton,{testID:"buoy-highlight-power",isEnabled:n,onToggle:a,accessibilityLabel:"Toggle render tracking"}),(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{testID:"buoy-highlight-clear",accessibilityRole:"button",accessibilityLabel:"Clear tracked renders",onPress:c,style:[styles.headerActionButton,!l&&styles.headerActionButtonDisabled],disabled:!l,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash2,{size:14,color:l?_sharedUi.night.color.textTertiary:_sharedUi.night.color.textTertiary})})]})});const HeaderActions=exports.HeaderActions=HeaderActionsInner;const MainListHeader=exports.MainListHeader=(0,_react.memo)(function d({onBack:t,isSearchActive:i,searchText:a,onSearchChange:e,onSearchToggle:c,onSearchClose:r,onFilterToggle:n,onToggleTracking:s,onToggleFreeze:o,onClear:l,onOpenCopySettings:h,isTracking:u,isFrozen:g,activeFilterCount:b,hasRenders:y,searchInputRef:x}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[t&&(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:t}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",children:i?(0,_jsxRuntime.jsx)(SearchSection,{isActive:i,searchText:a,onSearchChange:e,onSearchClose:r,searchInputRef:x}):(0,_jsxRuntime.jsx)(_StatsDisplay.StatsDisplay,{})}),(0,_jsxRuntime.jsx)(HeaderActions,{onSearchToggle:c,onFilterToggle:n,onToggleTracking:s,onToggleFreeze:o,onClear:l,onOpenCopySettings:h,isTracking:u,isFrozen:g,activeFilterCount:b,hasRenders:y})]})});const FilterViewHeader=exports.FilterViewHeader=(0,_react.memo)(function d({onBack:t,activeTab:i,onTabChange:a,activeFilterCount:e=0}){const c=[{key:"filters",label:`Filters${e>0?` (${e})`:""}`},{key:"settings",label:"Settings"}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:t}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:c,activeTab:i,onTabChange:r=>a(r),testIDPrefix:"buoy-highlight-filter-tab"})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})});const DetailViewHeader=exports.DetailViewHeader=(0,_react.memo)(function d({onBack:t,activeTab:i,onTabChange:a,hasHistory:e=true}){const c=[{key:"details",label:"Details"},{key:"history",label:"History",disabled:!e}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:t}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:c,activeTab:i,onTabChange:r=>a(r),testIDPrefix:"buoy-highlight-detail-tab"})}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Actions,{})]})});const CopySettingsViewHeader=exports.CopySettingsViewHeader=(0,_react.memo)(function d({onBack:t}){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:t}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"Copy Settings",testID:"buoy-highlight-copy-title"})]})});const styles=_reactNative.StyleSheet.create({headerActionButton:{width:32,height:32,borderRadius:8,backgroundColor:_sharedUi.night.color.buttonSurface,borderWidth:1,borderColor:_sharedUi.night.color.border,alignItems:"center",justifyContent:"center"},headerActionButtonDisabled:{opacity:.55},activeFilterButton:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong},freezeButton:{backgroundColor:_sharedUi.night.color.accentSoft,borderColor:_sharedUi.night.color.accentBorderStrong}});