@buoy-gg/react-query 7.0.40 → 7.0.42

package/lib/commonjs/react-query/components/modals/QueryBrowserModal.js

@@ -1,254 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.QueryBrowserModal = QueryBrowserModal;
-var _reactQuery = require("@tanstack/react-query");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _useSelectedQuery = require("../../hooks/useSelectedQuery");
-var _ReactQueryModalHeader = require("./ReactQueryModalHeader");
-var _QueryBrowserMode = require("../QueryBrowserMode");
-var _QueryBrowserFooter = require("./QueryBrowserFooter");
-var _QueryFilterViewV = require("../QueryFilterViewV3");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _useAllQueries = _interopRequireDefault(require("../../hooks/useAllQueries"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Specialized modal for query browsing following "Decompose by Responsibility"
- * Single purpose: Display query browser when no query is selected
- */
-function QueryBrowserModal({
-  visible,
-  selectedQueryKey,
-  onQuerySelect,
-  onClose,
-  onMinimize,
-  activeFilter: externalActiveFilter,
-  onFilterChange: externalOnFilterChange,
-  enableSharedModalDimensions = false,
-  onTabChange,
-  searchText = "",
-  onSearchChange
-}) {
-  const queryClient = (0, _reactQuery.useQueryClient)();
-  const selectedQuery = (0, _useSelectedQuery.useGetQueryByQueryKey)(selectedQueryKey);
-  const allQueries = (0, _useAllQueries.default)();
-
-  // Clear query cache handler
-  const handleClearCache = (0, _react.useCallback)(() => {
-    queryClient.getQueryCache().clear();
-  }, [queryClient]);
-
-  // Use external filter state if provided (for persistence), otherwise use internal state
-  const [internalActiveFilter, setInternalActiveFilter] = (0, _react.useState)(null);
-  const activeFilter = externalActiveFilter ?? internalActiveFilter;
-  const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
-
-  // Filter modal state
-  const [showFilterView, setShowFilterView] = (0, _react.useState)(false);
-  const [ignoredPatterns, setIgnoredPatterns] = (0, _react.useState)(new Set());
-  const [includedPatterns, setIncludedPatterns] = (0, _react.useState)(new Set());
-
-  // Load ignored patterns from storage on mount
-  (0, _react.useEffect)(() => {
-    const loadFilters = async () => {
-      try {
-        const stored = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns());
-        if (stored) {
-          const patterns = JSON.parse(stored);
-          if (Array.isArray(patterns)) {
-            setIgnoredPatterns(new Set(patterns));
-          }
-        }
-      } catch (error) {
-        console.error("Failed to load ignored patterns:", error);
-      }
-    };
-    loadFilters();
-  }, []);
-
-  // Load included patterns from storage on mount
-  (0, _react.useEffect)(() => {
-    const loadFilters = async () => {
-      try {
-        const stored = await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns());
-        if (stored) {
-          const patterns = JSON.parse(stored);
-          if (Array.isArray(patterns)) {
-            setIncludedPatterns(new Set(patterns));
-          }
-        }
-      } catch (error) {
-        console.error("Failed to load included patterns:", error);
-      }
-    };
-    loadFilters();
-  }, []);
-
-  // Save ignored patterns to storage when they change
-  (0, _react.useEffect)(() => {
-    const saveFilters = async () => {
-      try {
-        const patterns = Array.from(ignoredPatterns);
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns(), JSON.stringify(patterns));
-      } catch (error) {
-        console.error("Failed to save ignored patterns:", error);
-      }
-    };
-    saveFilters();
-  }, [ignoredPatterns]);
-
-  // Save included patterns to storage when they change
-  (0, _react.useEffect)(() => {
-    const saveFilters = async () => {
-      try {
-        const patterns = Array.from(includedPatterns);
-        await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns(), JSON.stringify(patterns));
-      } catch (error) {
-        console.error("Failed to save included patterns:", error);
-      }
-    };
-    saveFilters();
-  }, [includedPatterns]);
-
-  // Toggle pattern in ignored set
-  const handlePatternToggle = (0, _react.useCallback)(pattern => {
-    setIgnoredPatterns(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(pattern)) {
-        newSet.delete(pattern);
-      } else {
-        newSet.add(pattern);
-      }
-      return newSet;
-    });
-  }, []);
-
-  // Toggle pattern in included set
-  const handleIncludedPatternToggle = (0, _react.useCallback)(pattern => {
-    setIncludedPatterns(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(pattern)) {
-        newSet.delete(pattern);
-      } else {
-        newSet.add(pattern);
-      }
-      return newSet;
-    });
-  }, []);
-
-  // Track modal mode for conditional styling
-  const [modalMode, setModalMode] = (0, _react.useState)("bottomSheet");
-  const storagePrefix = enableSharedModalDimensions ? _sharedUi.devToolsStorageKeys.reactQuery.modal() : _sharedUi.devToolsStorageKeys.reactQuery.browserModal();
-  const handleModeChange = (0, _react.useCallback)(mode => {
-    setModalMode(mode);
-  }, []);
-
-  // JsModal overlays the footer on the content and only reserves `footerHeight`
-  // of padding beneath it. QueryBrowserFooter grows by the safe-area inset when
-  // docked, so the reserve must track that or the list bottom hides behind the
-  // footer.
-  const insets = (0, _sharedUi.useSafeAreaInsets)({
-    minBottom: 16
-  });
-  const footerHeight = modalMode === "floating" ? 56 : 48 + insets.bottom;
-  if (!visible) return null;
-  const renderHeaderContent = () => {
-    // Filter view header with back button
-    if (showFilterView) {
-      const tabs = [{
-        key: "filters",
-        label: "Filters"
-      }];
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation, {
-          onBack: () => setShowFilterView(false)
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-          title: "",
-          noMargin: true,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-            tabs: tabs,
-            activeTab: "filters",
-            testIDPrefix: "buoy-rq-filterview-tab",
-            onTabChange: () => {}
-          })
-        })]
-      });
-    }
-
-    // Normal query browser header
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactQueryModalHeader.ReactQueryModalHeader, {
-      selectedQuery: selectedQuery,
-      activeTab: "queries",
-      onTabChange: onTabChange,
-      onBack: () => onQuerySelect(undefined),
-      searchText: searchText,
-      onSearchChange: onSearchChange,
-      onFilterPress: () => setShowFilterView(true),
-      hasActiveFilters: activeFilter !== null || ignoredPatterns.size > 0 || includedPatterns.size > 0,
-      onClearCache: handleClearCache
-    });
-  };
-  const footerNode = /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryBrowserFooter.QueryBrowserFooter, {
-    activeFilter: activeFilter,
-    onFilterChange: setActiveFilter,
-    isFloatingMode: modalMode === "floating"
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.JsModal, {
-    visible: visible,
-    onClose: onClose,
-    onMinimize: onMinimize,
-    persistenceKey: storagePrefix,
-    header: {
-      customContent: renderHeaderContent(),
-      showToggleButton: true
-    },
-    onModeChange: handleModeChange,
-    enablePersistence: true,
-    initialMode: "bottomSheet",
-    enableGlitchEffects: true
-    // The query list virtualizes itself (see QueryBrowser) — it must own
-    // scrolling. The filter view keeps the wrapper.
-    ,
-    disableScrollWrapper: !showFilterView,
-    styles: {},
-    footer: !showFilterView ? footerNode : undefined,
-    footerHeight: !showFilterView ? footerHeight : undefined,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-      style: styles.container,
-      children: showFilterView ?
-      /*#__PURE__*/
-      /* Show filter view */
-      (0, _jsxRuntime.jsx)(_QueryFilterViewV.QueryFilterViewV3, {
-        queries: allQueries,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter,
-        ignoredPatterns: ignoredPatterns,
-        onPatternToggle: handlePatternToggle,
-        includedPatterns: includedPatterns,
-        onIncludedPatternToggle: handleIncludedPatternToggle
-      }) :
-      /*#__PURE__*/
-      /* Show query browser */
-      (0, _jsxRuntime.jsx)(_QueryBrowserMode.QueryBrowserMode, {
-        selectedQuery: selectedQuery,
-        onQuerySelect: onQuerySelect,
-        activeFilter: activeFilter,
-        searchText: searchText,
-        ignoredPatterns: ignoredPatterns,
-        includedPatterns: includedPatterns,
-        onFilterPress: () => setShowFilterView(true)
-      })
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.QueryBrowserModal=QueryBrowserModal;var _reactQuery=require("@tanstack/react-query");var _sharedUi=require("@buoy-gg/shared-ui");var _useSelectedQuery=require("../../hooks/useSelectedQuery");var _ReactQueryModalHeader=require("./ReactQueryModalHeader");var _QueryBrowserMode=require("../QueryBrowserMode");var _QueryBrowserFooter=require("./QueryBrowserFooter");var _QueryFilterViewV=require("../QueryFilterViewV3");var _react=require("react");var _reactNative=require("react-native");var _useAllQueries=_interopRequireDefault(require("../../hooks/useAllQueries"));var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(s){return s&&s.__esModule?s:{default:s}}function QueryBrowserModal({visible:s,selectedQueryKey:v,onQuerySelect:c,onClose:Q,onMinimize:F,activeFilter:w,onFilterChange:b,enableSharedModalDimensions:C=false,onTabChange:M,searchText:u="",onSearchChange:P}){const d=(0,_reactQuery.useQueryClient)();const y=(0,_useSelectedQuery.useGetQueryByQueryKey)(v);const p=(0,_useAllQueries.default)();const x=(0,_react.useCallback)(()=>{d.getQueryCache().clear()},[d]);const[m,q]=(0,_react.useState)(null);const i=w??m;const g=b??q;const[a,l]=(0,_react.useState)(false);const[o,f]=(0,_react.useState)(new Set);const[n,h]=(0,_react.useState)(new Set);(0,_react.useEffect)(()=>{const t=async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns());if(e){const r=JSON.parse(e);if(Array.isArray(r)){f(new Set(r))}}}catch(e){console.error("Failed to load ignored patterns:",e)}};t()},[]);(0,_react.useEffect)(()=>{const t=async()=>{try{const e=await _sharedUi.persistentStorage.getItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns());if(e){const r=JSON.parse(e);if(Array.isArray(r)){h(new Set(r))}}}catch(e){console.error("Failed to load included patterns:",e)}};t()},[]);(0,_react.useEffect)(()=>{const t=async()=>{try{const e=Array.from(o);await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.ignoredPatterns(),JSON.stringify(e))}catch(e){console.error("Failed to save ignored patterns:",e)}};t()},[o]);(0,_react.useEffect)(()=>{const t=async()=>{try{const e=Array.from(n);await _sharedUi.persistentStorage.setItem(_sharedUi.devToolsStorageKeys.reactQuery.includedPatterns(),JSON.stringify(e))}catch(e){console.error("Failed to save included patterns:",e)}};t()},[n]);const T=(0,_react.useCallback)(t=>{f(e=>{const r=new Set(e);if(r.has(t)){r.delete(t)}else{r.add(t)}return r})},[]);const _=(0,_react.useCallback)(t=>{h(e=>{const r=new Set(e);if(r.has(t)){r.delete(t)}else{r.add(t)}return r})},[]);const[S,j]=(0,_react.useState)("bottomSheet");const A=C?_sharedUi.devToolsStorageKeys.reactQuery.modal():_sharedUi.devToolsStorageKeys.reactQuery.browserModal();const B=(0,_react.useCallback)(t=>{j(t)},[]);const k=(0,_sharedUi.useSafeAreaInsets)({minBottom:16});const I=S==="floating"?56:48+k.bottom;if(!s)return null;const H=()=>{if(a){const t=[{key:"filters",label:"Filters"}];return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:()=>l(false)}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:t,activeTab:"filters",testIDPrefix:"buoy-rq-filterview-tab",onTabChange:()=>{}})})]})}return(0,_jsxRuntime.jsx)(_ReactQueryModalHeader.ReactQueryModalHeader,{selectedQuery:y,activeTab:"queries",onTabChange:M,onBack:()=>c(void 0),searchText:u,onSearchChange:P,onFilterPress:()=>l(true),hasActiveFilters:i!==null||o.size>0||n.size>0,onClearCache:x})};const V=(0,_jsxRuntime.jsx)(_QueryBrowserFooter.QueryBrowserFooter,{activeFilter:i,onFilterChange:g,isFloatingMode:S==="floating"});return(0,_jsxRuntime.jsx)(_sharedUi.JsModal,{visible:s,onClose:Q,onMinimize:F,persistenceKey:A,header:{customContent:H(),showToggleButton:true},onModeChange:B,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:!a,styles:{},footer:!a?V:void 0,footerHeight:!a?I:void 0,children:(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.container,children:a?(0,_jsxRuntime.jsx)(_QueryFilterViewV.QueryFilterViewV3,{queries:p,activeFilter:i,onFilterChange:g,ignoredPatterns:o,onPatternToggle:T,includedPatterns:n,onIncludedPatternToggle:_}):(0,_jsxRuntime.jsx)(_QueryBrowserMode.QueryBrowserMode,{selectedQuery:y,onQuerySelect:c,activeFilter:i,searchText:u,ignoredPatterns:o,includedPatterns:n,onFilterPress:()=>l(true)})})})}const styles=_reactNative.StyleSheet.create({container:{flex:1,backgroundColor:"transparent"}});

package/lib/commonjs/react-query/components/modals/ReactQueryModal.js

@@ -1,83 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactQueryModal = ReactQueryModal;
-var _QueryBrowserModal = require("./QueryBrowserModal");
-var _DataEditorModal = require("./DataEditorModal");
-var _MutationBrowserModal = require("./MutationBrowserModal");
-var _MutationEditorModal = require("./MutationEditorModal");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Refactored ReactQueryModal following composition principles
- *
- * Applied principles:
- * - Decompose by Responsibility: Separated query browser and data editor modals
- * - Prefer Composition over Configuration: Uses specialized modal components
- * - Extract Reusable Logic: Modal routing logic based on query selection
- * - Utilize Render Props: Each modal handles its own rendering responsibility
- */
-function ReactQueryModal({
-  visible,
-  selectedQueryKey,
-  selectedMutationId,
-  onQuerySelect,
-  onMutationSelect,
-  onClose,
-  onMinimize,
-  activeFilter,
-  onFilterChange,
-  activeTab,
-  onTabChange,
-  enableSharedModalDimensions = false,
-  searchText = "",
-  onSearchChange
-}) {
-  // Check if we have a key/id even if the query/mutation hasn't been found yet
-  const inDetail = !!selectedQueryKey || !!selectedMutationId;
-  const isQueryMode = activeTab === "queries";
-  const isMutationMode = activeTab === "mutations";
-  const commonProps = {
-    onClose,
-    onMinimize,
-    activeFilter,
-    onFilterChange,
-    enableSharedModalDimensions
-  };
-  const showQueryBrowserModal = visible && !inDetail && isQueryMode;
-  const showMutationBrowserModal = visible && !inDetail && isMutationMode;
-  const showDataEditorModal = visible && inDetail && isQueryMode && !!selectedQueryKey;
-  const showMutationEditorModal = visible && inDetail && isMutationMode && !!selectedMutationId;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryBrowserModal.QueryBrowserModal, {
-      visible: showQueryBrowserModal,
-      selectedQueryKey: selectedQueryKey,
-      onQuerySelect: onQuerySelect,
-      onTabChange: onTabChange,
-      searchText: searchText,
-      onSearchChange: onSearchChange,
-      ...commonProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationBrowserModal.MutationBrowserModal, {
-      visible: showMutationBrowserModal,
-      selectedMutationId: selectedMutationId,
-      onMutationSelect: onMutationSelect,
-      onTabChange: onTabChange,
-      searchText: searchText,
-      onSearchChange: onSearchChange,
-      ...commonProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DataEditorModal.DataEditorModal, {
-      visible: showDataEditorModal,
-      selectedQueryKey: selectedQueryKey,
-      onQuerySelect: onQuerySelect,
-      onTabChange: onTabChange,
-      ...commonProps
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationEditorModal.MutationEditorModal, {
-      visible: showMutationEditorModal,
-      selectedMutationId: selectedMutationId,
-      onMutationSelect: onMutationSelect,
-      onTabChange: onTabChange,
-      ...commonProps
-    })]
-  });
-}
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ReactQueryModal=ReactQueryModal;var _QueryBrowserModal=require("./QueryBrowserModal");var _DataEditorModal=require("./DataEditorModal");var _MutationBrowserModal=require("./MutationBrowserModal");var _MutationEditorModal=require("./MutationEditorModal");var _jsxRuntime=require("react/jsx-runtime");function ReactQueryModal({visible:o,selectedQueryKey:r,selectedMutationId:t,onQuerySelect:i,onMutationSelect:n,onClose:w,onMinimize:x,activeFilter:h,onFilterChange:j,activeTab:u,onTabChange:e,enableSharedModalDimensions:B=false,searchText:M="",onSearchChange:d}){const a=!!r||!!t;const l=u==="queries";const c=u==="mutations";const s={onClose:w,onMinimize:x,activeFilter:h,onFilterChange:j,enableSharedModalDimensions:B};const E=o&&!a&&l;const y=o&&!a&&c;const Q=o&&a&&l&&!!r;const _=o&&a&&c&&!!t;return(0,_jsxRuntime.jsxs)(_jsxRuntime.Fragment,{children:[(0,_jsxRuntime.jsx)(_QueryBrowserModal.QueryBrowserModal,{visible:E,selectedQueryKey:r,onQuerySelect:i,onTabChange:e,searchText:M,onSearchChange:d,...s}),(0,_jsxRuntime.jsx)(_MutationBrowserModal.MutationBrowserModal,{visible:y,selectedMutationId:t,onMutationSelect:n,onTabChange:e,searchText:M,onSearchChange:d,...s}),(0,_jsxRuntime.jsx)(_DataEditorModal.DataEditorModal,{visible:Q,selectedQueryKey:r,onQuerySelect:i,onTabChange:e,...s}),(0,_jsxRuntime.jsx)(_MutationEditorModal.MutationEditorModal,{visible:_,selectedMutationId:t,onMutationSelect:n,onTabChange:e,...s})]})}

package/lib/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -1,194 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactQueryModalHeader = ReactQueryModalHeader;
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _react = require("react");
-var _reactNative = require("react-native");
-var _WifiToggle = require("../WifiToggle");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Shared header for all React Query modals. Handles tab switching when browsing and presents
- * breadcrumbs when a specific query or mutation is selected.
- */
-function ReactQueryModalHeader({
-  selectedQuery,
-  selectedMutation,
-  activeTab,
-  onTabChange,
-  onBack,
-  searchText = "",
-  onSearchChange,
-  onFilterPress,
-  hasActiveFilters = false,
-  onClearCache,
-  showWifiToggle = false
-}) {
-  const [isSearchActive, setIsSearchActive] = (0, _react.useState)(false);
-  // True while the header's clear ✕ is being pressed. With a mouse, pressing
-  // the ✕ blurs the input FIRST, and the blur handler closes search — which
-  // unmounts the ✕ before its own press can fire, so the query was never
-  // cleared (desktop). Press-in lands before the blur, so the blur handler can
-  // tell this dismissal apart from a click elsewhere.
-  const clearPressRef = (0, _react.useRef)(false);
-  const searchInputRef = (0, _react.useRef)(null);
-
-  // Auto-focus search input when search becomes active
-  (0, _react.useEffect)(() => {
-    if (isSearchActive && searchInputRef.current) {
-      searchInputRef.current.focus();
-    }
-  }, [isSearchActive]);
-  const handleSearchToggle = () => {
-    setIsSearchActive(!isSearchActive);
-    if (isSearchActive && onSearchChange) {
-      onSearchChange("");
-    }
-  };
-  const handleSearch = text => {
-    if (onSearchChange) {
-      onSearchChange(text);
-    }
-  };
-  // Simple function to get query display text
-  const getQueryText = query => {
-    if (!query?.queryKey) return "Unknown Query";
-    const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
-    return keys.filter(k => k != null).map(k => String(k)).join(" › ") || "Unknown Query";
-  };
-  const getItemText = item => {
-    if ("queryKey" in item) {
-      return getQueryText(item);
-    } else {
-      return item.options.mutationKey ? (Array.isArray(item.options.mutationKey) ? item.options.mutationKey : [item.options.mutationKey]).filter(k => k != null).map(k => String(k)).join(" › ") || `Mutation #${item.mutationId}` : `Mutation #${item.mutationId}`;
-    }
-  };
-  const tabs = [{
-    key: "queries",
-    label: "Queries"
-  }, {
-    key: "mutations",
-    label: "Mutations"
-  }];
-
-  // Show details view when an item is selected
-  if (selectedQuery || selectedMutation) {
-    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: getItemText(selectedQuery ?? selectedMutation),
-        testID: "buoy-rq-detail-title"
-      })]
-    });
-  }
-
-  // Show browser view with tabs when no item is selected
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Search, {
-        value: searchText,
-        onChangeText: handleSearch,
-        onCancel: () => {
-          handleSearch("");
-          setIsSearchActive(false);
-        },
-        onDismiss: () => setIsSearchActive(false),
-        dismissOnBlur: true,
-        clearOnlyWhenText: true,
-        placeholder: "Search query keys...",
-        accessibilityLabel: "Search queries and mutations",
-        iconSize: 14
-        // These handles predate the shared field and are the reverse of
-        // its convention (container = "-field", input = bare); kept as-is
-        // so the e2e suite keeps its targets.
-        ,
-        testID: "buoy-rq-search",
-        containerTestID: "buoy-rq-search-field",
-        clearTestID: "buoy-rq-search-clear",
-        inputProps: {
-          "sentry-label": "ignore react query search header"
-        }
-      }) : showWifiToggle ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.tabRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: styles.tabSelectorWrap,
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-            tabs: tabs,
-            activeTab: activeTab,
-            testIDPrefix: "buoy-rq-tab",
-            onTabChange: tab => onTabChange(tab)
-          })
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_WifiToggle.WifiToggle, {
-          size: 16,
-          testID: "buoy-rq-wifi"
-        })]
-      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        testIDPrefix: "buoy-rq-tab",
-        onTabChange: tab => onTabChange(tab)
-      })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions, {
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        "sentry-label": "ignore open search",
-        testID: "buoy-rq-search-open",
-        accessibilityRole: "button",
-        accessibilityLabel: "Search queries and mutations",
-        onPress: handleSearchToggle,
-        style: styles.headerActionButton,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        })
-      }), onFilterPress && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        "sentry-label": "ignore open filter",
-        testID: "buoy-rq-filters",
-        accessibilityRole: "button",
-        accessibilityLabel: hasActiveFilters ? "Filters, active" : "Filters",
-        onPress: onFilterPress,
-        style: [styles.headerActionButton, hasActiveFilters && styles.activeFilterButton],
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Filter, {
-          size: 14,
-          color: hasActiveFilters ? _sharedUi.night.color.accent : _sharedUi.night.color.textSecondary
-        })
-      }), onClearCache && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-        "sentry-label": "ignore clear cache",
-        testID: "buoy-rq-clear-cache",
-        accessibilityRole: "button",
-        onPress: onClearCache,
-        style: [styles.headerActionButton, styles.clearCacheButton],
-        accessibilityLabel: `Clear ${activeTab} cache`,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Trash, {
-          size: 14,
-          color: _sharedUi.night.color.warning
-        })
-      })]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  tabRow: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  tabSelectorWrap: {
-    flex: 1
-  },
-  headerActionButton: {
-    padding: 6,
-    borderRadius: 4
-  },
-  activeFilterButton: {
-    backgroundColor: _sharedUi.night.color.accentSoft
-  },
-  clearCacheButton: {
-    backgroundColor: _sharedUi.night.color.warningSoft
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.ReactQueryModalHeader=ReactQueryModalHeader;var _sharedUi=require("@buoy-gg/shared-ui");var _react=require("react");var _reactNative=require("react-native");var _WifiToggle=require("../WifiToggle");var _jsxRuntime=require("react/jsx-runtime");function ReactQueryModalHeader({selectedQuery:c,selectedMutation:l,activeTab:o,onTabChange:u,onBack:x,searchText:g="",onSearchChange:a,onFilterPress:y,hasActiveFilters:i=false,onClearCache:d,showWifiToggle:j=false}){const[t,s]=(0,_react.useState)(false);const T=(0,_react.useRef)(false);const b=(0,_react.useRef)(null);(0,_react.useEffect)(()=>{if(t&&b.current){b.current.focus()}},[t]);const p=()=>{s(!t);if(t&&a){a("")}};const h=e=>{if(a){a(e)}};const q=e=>{if(!e?.queryKey)return"Unknown Query";const r=Array.isArray(e.queryKey)?e.queryKey:[e.queryKey];return r.filter(n=>n!=null).map(n=>String(n)).join(" \u203A ")||"Unknown Query"};const S=e=>{if("queryKey"in e){return q(e)}else{return e.options.mutationKey?(Array.isArray(e.options.mutationKey)?e.options.mutationKey:[e.options.mutationKey]).filter(r=>r!=null).map(r=>String(r)).join(" \u203A ")||`Mutation #${e.mutationId}`:`Mutation #${e.mutationId}`}};const f=[{key:"queries",label:"Queries"},{key:"mutations",label:"Mutations"}];if(c||l){return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Navigation,{onBack:x}),(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:S(c??l),testID:"buoy-rq-detail-title"})]})}return(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader,{children:[(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Content,{title:"",noMargin:true,children:t?(0,_jsxRuntime.jsx)(_sharedUi.ModalHeader.Search,{value:g,onChangeText:h,onCancel:()=>{h("");s(false)},onDismiss:()=>s(false),dismissOnBlur:true,clearOnlyWhenText:true,placeholder:"Search query keys...",accessibilityLabel:"Search queries and mutations",iconSize:14,testID:"buoy-rq-search",containerTestID:"buoy-rq-search-field",clearTestID:"buoy-rq-search-clear",inputProps:{"sentry-label":"ignore react query search header"}}):j?(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.tabRow,children:[(0,_jsxRuntime.jsx)(_reactNative.View,{style:styles.tabSelectorWrap,children:(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:f,activeTab:o,testIDPrefix:"buoy-rq-tab",onTabChange:e=>u(e)})}),(0,_jsxRuntime.jsx)(_WifiToggle.WifiToggle,{size:16,testID:"buoy-rq-wifi"})]}):(0,_jsxRuntime.jsx)(_sharedUi.TabSelector,{tabs:f,activeTab:o,testIDPrefix:"buoy-rq-tab",onTabChange:e=>u(e)})}),(0,_jsxRuntime.jsxs)(_sharedUi.ModalHeader.Actions,{children:[(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore open search",testID:"buoy-rq-search-open",accessibilityRole:"button",accessibilityLabel:"Search queries and mutations",onPress:p,style:styles.headerActionButton,children:(0,_jsxRuntime.jsx)(_sharedUi.Search,{size:14,color:_sharedUi.night.color.textSecondary})}),y&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore open filter",testID:"buoy-rq-filters",accessibilityRole:"button",accessibilityLabel:i?"Filters, active":"Filters",onPress:y,style:[styles.headerActionButton,i&&styles.activeFilterButton],children:(0,_jsxRuntime.jsx)(_sharedUi.Filter,{size:14,color:i?_sharedUi.night.color.accent:_sharedUi.night.color.textSecondary})}),d&&(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore clear cache",testID:"buoy-rq-clear-cache",accessibilityRole:"button",onPress:d,style:[styles.headerActionButton,styles.clearCacheButton],accessibilityLabel:`Clear ${o} cache`,children:(0,_jsxRuntime.jsx)(_sharedUi.Trash,{size:14,color:_sharedUi.night.color.warning})})]})]})}const styles=_reactNative.StyleSheet.create({tabRow:{flex:1,flexDirection:"row",alignItems:"center",gap:12},tabSelectorWrap:{flex:1},headerActionButton:{padding:6,borderRadius:4},activeFilterButton:{backgroundColor:_sharedUi.night.color.accentSoft},clearCacheButton:{backgroundColor:_sharedUi.night.color.warningSoft}});