@buoy-gg/react-query 7.0.40 → 7.0.42

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

@@ -1,250 +1 @@
-"use strict";
-
-import { useQueryClient } from "@tanstack/react-query";
-import { JsModal, useSafeAreaInsets, ModalHeader, TabSelector } from "@buoy-gg/shared-ui";
-import { useGetQueryByQueryKey } from "../../hooks/useSelectedQuery";
-import { ReactQueryModalHeader } from "./ReactQueryModalHeader";
-import { QueryBrowserMode } from "../QueryBrowserMode";
-import { QueryBrowserFooter } from "./QueryBrowserFooter";
-import { QueryFilterViewV3 } from "../QueryFilterViewV3";
-import { useState, useCallback, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
-import { devToolsStorageKeys, persistentStorage } from "@buoy-gg/shared-ui";
-import useAllQueries from "../../hooks/useAllQueries";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * Specialized modal for query browsing following "Decompose by Responsibility"
- * Single purpose: Display query browser when no query is selected
- */
-export function QueryBrowserModal({
-  visible,
-  selectedQueryKey,
-  onQuerySelect,
-  onClose,
-  onMinimize,
-  activeFilter: externalActiveFilter,
-  onFilterChange: externalOnFilterChange,
-  enableSharedModalDimensions = false,
-  onTabChange,
-  searchText = "",
-  onSearchChange
-}) {
-  const queryClient = useQueryClient();
-  const selectedQuery = useGetQueryByQueryKey(selectedQueryKey);
-  const allQueries = useAllQueries();
-
-  // Clear query cache handler
-  const handleClearCache = useCallback(() => {
-    queryClient.getQueryCache().clear();
-  }, [queryClient]);
-
-  // Use external filter state if provided (for persistence), otherwise use internal state
-  const [internalActiveFilter, setInternalActiveFilter] = useState(null);
-  const activeFilter = externalActiveFilter ?? internalActiveFilter;
-  const setActiveFilter = externalOnFilterChange ?? setInternalActiveFilter;
-
-  // Filter modal state
-  const [showFilterView, setShowFilterView] = useState(false);
-  const [ignoredPatterns, setIgnoredPatterns] = useState(new Set());
-  const [includedPatterns, setIncludedPatterns] = useState(new Set());
-
-  // Load ignored patterns from storage on mount
-  useEffect(() => {
-    const loadFilters = async () => {
-      try {
-        const stored = await persistentStorage.getItem(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
-  useEffect(() => {
-    const loadFilters = async () => {
-      try {
-        const stored = await persistentStorage.getItem(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
-  useEffect(() => {
-    const saveFilters = async () => {
-      try {
-        const patterns = Array.from(ignoredPatterns);
-        await persistentStorage.setItem(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
-  useEffect(() => {
-    const saveFilters = async () => {
-      try {
-        const patterns = Array.from(includedPatterns);
-        await persistentStorage.setItem(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 = 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 = 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] = useState("bottomSheet");
-  const storagePrefix = enableSharedModalDimensions ? devToolsStorageKeys.reactQuery.modal() : devToolsStorageKeys.reactQuery.browserModal();
-  const handleModeChange = 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 = 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__*/_jsxs(ModalHeader, {
-        children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-          onBack: () => setShowFilterView(false)
-        }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-          title: "",
-          noMargin: true,
-          children: /*#__PURE__*/_jsx(TabSelector, {
-            tabs: tabs,
-            activeTab: "filters",
-            testIDPrefix: "buoy-rq-filterview-tab",
-            onTabChange: () => {}
-          })
-        })]
-      });
-    }
-
-    // Normal query browser header
-    return /*#__PURE__*/_jsx(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__*/_jsx(QueryBrowserFooter, {
-    activeFilter: activeFilter,
-    onFilterChange: setActiveFilter,
-    isFloatingMode: modalMode === "floating"
-  });
-  return /*#__PURE__*/_jsx(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__*/_jsx(View, {
-      style: styles.container,
-      children: showFilterView ?
-      /*#__PURE__*/
-      /* Show filter view */
-      _jsx(QueryFilterViewV3, {
-        queries: allQueries,
-        activeFilter: activeFilter,
-        onFilterChange: setActiveFilter,
-        ignoredPatterns: ignoredPatterns,
-        onPatternToggle: handlePatternToggle,
-        includedPatterns: includedPatterns,
-        onIncludedPatternToggle: handleIncludedPatternToggle
-      }) :
-      /*#__PURE__*/
-      /* Show query browser */
-      _jsx(QueryBrowserMode, {
-        selectedQuery: selectedQuery,
-        onQuerySelect: onQuerySelect,
-        activeFilter: activeFilter,
-        searchText: searchText,
-        ignoredPatterns: ignoredPatterns,
-        includedPatterns: includedPatterns,
-        onFilterPress: () => setShowFilterView(true)
-      })
-    })
-  });
-}
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  }
-});
+"use strict";import{useQueryClient as D}from"@tanstack/react-query";import{JsModal as R,useSafeAreaInsets as W,ModalHeader as g,TabSelector as L}from"@buoy-gg/shared-ui";import{useGetQueryByQueryKey as U}from"../../hooks/useSelectedQuery";import{ReactQueryModalHeader as X}from"./ReactQueryModalHeader";import{QueryBrowserMode as Y}from"../QueryBrowserMode";import{QueryBrowserFooter as Z}from"./QueryBrowserFooter";import{QueryFilterViewV3 as $}from"../QueryFilterViewV3";import{useState as l,useCallback as d,useEffect as u}from"react";import{View as ee,StyleSheet as te}from"react-native";import{devToolsStorageKeys as n,persistentStorage as f}from"@buoy-gg/shared-ui";import re from"../../hooks/useAllQueries";import{jsx as o,jsxs as oe}from"react/jsx-runtime";export function QueryBrowserModal({visible:m,selectedQueryKey:b,onQuerySelect:h,onClose:v,onMinimize:M,activeFilter:A,onFilterChange:T,enableSharedModalDimensions:I=false,onTabChange:x,searchText:F="",onSearchChange:B}){const p=D();const w=U(b);const N=re();const k=d(()=>{p.getQueryCache().clear()},[p]);const[H,J]=l(null);const c=A??H;const S=T??J;const[s,y]=l(false);const[a,C]=l(new Set);const[i,P]=l(new Set);u(()=>{const t=async()=>{try{const e=await f.getItem(n.reactQuery.ignoredPatterns());if(e){const r=JSON.parse(e);if(Array.isArray(r)){C(new Set(r))}}}catch(e){console.error("Failed to load ignored patterns:",e)}};t()},[]);u(()=>{const t=async()=>{try{const e=await f.getItem(n.reactQuery.includedPatterns());if(e){const r=JSON.parse(e);if(Array.isArray(r)){P(new Set(r))}}}catch(e){console.error("Failed to load included patterns:",e)}};t()},[]);u(()=>{const t=async()=>{try{const e=Array.from(a);await f.setItem(n.reactQuery.ignoredPatterns(),JSON.stringify(e))}catch(e){console.error("Failed to save ignored patterns:",e)}};t()},[a]);u(()=>{const t=async()=>{try{const e=Array.from(i);await f.setItem(n.reactQuery.includedPatterns(),JSON.stringify(e))}catch(e){console.error("Failed to save included patterns:",e)}};t()},[i]);const V=d(t=>{C(e=>{const r=new Set(e);if(r.has(t)){r.delete(t)}else{r.add(t)}return r})},[]);const j=d(t=>{P(e=>{const r=new Set(e);if(r.has(t)){r.delete(t)}else{r.add(t)}return r})},[]);const[Q,q]=l("bottomSheet");const O=I?n.reactQuery.modal():n.reactQuery.browserModal();const z=d(t=>{q(t)},[]);const K=W({minBottom:16});const E=Q==="floating"?56:48+K.bottom;if(!m)return null;const G=()=>{if(s){const t=[{key:"filters",label:"Filters"}];return oe(g,{children:[o(g.Navigation,{onBack:()=>y(false)}),o(g.Content,{title:"",noMargin:true,children:o(L,{tabs:t,activeTab:"filters",testIDPrefix:"buoy-rq-filterview-tab",onTabChange:()=>{}})})]})}return o(X,{selectedQuery:w,activeTab:"queries",onTabChange:x,onBack:()=>h(void 0),searchText:F,onSearchChange:B,onFilterPress:()=>y(true),hasActiveFilters:c!==null||a.size>0||i.size>0,onClearCache:k})};const _=o(Z,{activeFilter:c,onFilterChange:S,isFloatingMode:Q==="floating"});return o(R,{visible:m,onClose:v,onMinimize:M,persistenceKey:O,header:{customContent:G(),showToggleButton:true},onModeChange:z,enablePersistence:true,initialMode:"bottomSheet",enableGlitchEffects:true,disableScrollWrapper:!s,styles:{},footer:!s?_:void 0,footerHeight:!s?E:void 0,children:o(ee,{style:ne.container,children:s?o($,{queries:N,activeFilter:c,onFilterChange:S,ignoredPatterns:a,onPatternToggle:V,includedPatterns:i,onIncludedPatternToggle:j}):o(Y,{selectedQuery:w,onQuerySelect:h,activeFilter:c,searchText:F,ignoredPatterns:a,includedPatterns:i,onFilterPress:()=>y(true)})})})}const ne=te.create({container:{flex:1,backgroundColor:"transparent"}});

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

@@ -1,79 +1 @@
-"use strict";
-
-import { QueryBrowserModal } from "./QueryBrowserModal";
-import { DataEditorModal } from "./DataEditorModal";
-import { MutationBrowserModal } from "./MutationBrowserModal";
-import { MutationEditorModal } from "./MutationEditorModal";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "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
- */
-export 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__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(QueryBrowserModal, {
-      visible: showQueryBrowserModal,
-      selectedQueryKey: selectedQueryKey,
-      onQuerySelect: onQuerySelect,
-      onTabChange: onTabChange,
-      searchText: searchText,
-      onSearchChange: onSearchChange,
-      ...commonProps
-    }), /*#__PURE__*/_jsx(MutationBrowserModal, {
-      visible: showMutationBrowserModal,
-      selectedMutationId: selectedMutationId,
-      onMutationSelect: onMutationSelect,
-      onTabChange: onTabChange,
-      searchText: searchText,
-      onSearchChange: onSearchChange,
-      ...commonProps
-    }), /*#__PURE__*/_jsx(DataEditorModal, {
-      visible: showDataEditorModal,
-      selectedQueryKey: selectedQueryKey,
-      onQuerySelect: onQuerySelect,
-      onTabChange: onTabChange,
-      ...commonProps
-    }), /*#__PURE__*/_jsx(MutationEditorModal, {
-      visible: showMutationEditorModal,
-      selectedMutationId: selectedMutationId,
-      onMutationSelect: onMutationSelect,
-      onTabChange: onTabChange,
-      ...commonProps
-    })]
-  });
-}
+"use strict";import{QueryBrowserModal as Q}from"./QueryBrowserModal";import{DataEditorModal as y}from"./DataEditorModal";import{MutationBrowserModal as D}from"./MutationBrowserModal";import{MutationEditorModal as S}from"./MutationEditorModal";import{jsx as i,Fragment as _,jsxs as C}from"react/jsx-runtime";export function ReactQueryModal({visible:o,selectedQueryKey:t,selectedMutationId:r,onQuerySelect:e,onMutationSelect:M,onClose:h,onMinimize:w,activeFilter:f,onFilterChange:p,activeTab:m,onTabChange:s,enableSharedModalDimensions:x=false,searchText:c="",onSearchChange:u}){const a=!!t||!!r;const d=m==="queries";const l=m==="mutations";const n={onClose:h,onMinimize:w,activeFilter:f,onFilterChange:p,enableSharedModalDimensions:x};const g=o&&!a&&d;const j=o&&!a&&l;const B=o&&a&&d&&!!t;const E=o&&a&&l&&!!r;return C(_,{children:[i(Q,{visible:g,selectedQueryKey:t,onQuerySelect:e,onTabChange:s,searchText:c,onSearchChange:u,...n}),i(D,{visible:j,selectedMutationId:r,onMutationSelect:M,onTabChange:s,searchText:c,onSearchChange:u,...n}),i(y,{visible:B,selectedQueryKey:t,onQuerySelect:e,onTabChange:s,...n}),i(S,{visible:E,selectedMutationId:r,onMutationSelect:M,onTabChange:s,...n})]})}

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

@@ -1,190 +1 @@
-"use strict";
-
-import { ModalHeader, TabSelector, Search, Filter, Trash, night } from "@buoy-gg/shared-ui";
-import { useState, useRef, useEffect } from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
-import { WifiToggle } from "../WifiToggle";
-import { jsx as _jsx, jsxs as _jsxs } from "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.
- */
-export function ReactQueryModalHeader({
-  selectedQuery,
-  selectedMutation,
-  activeTab,
-  onTabChange,
-  onBack,
-  searchText = "",
-  onSearchChange,
-  onFilterPress,
-  hasActiveFilters = false,
-  onClearCache,
-  showWifiToggle = false
-}) {
-  const [isSearchActive, setIsSearchActive] = 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 = useRef(false);
-  const searchInputRef = useRef(null);
-
-  // Auto-focus search input when search becomes active
-  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__*/_jsxs(ModalHeader, {
-      children: [/*#__PURE__*/_jsx(ModalHeader.Navigation, {
-        onBack: onBack
-      }), /*#__PURE__*/_jsx(ModalHeader.Content, {
-        title: getItemText(selectedQuery ?? selectedMutation),
-        testID: "buoy-rq-detail-title"
-      })]
-    });
-  }
-
-  // Show browser view with tabs when no item is selected
-  return /*#__PURE__*/_jsxs(ModalHeader, {
-    children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
-      title: "",
-      noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/_jsx(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__*/_jsxs(View, {
-        style: styles.tabRow,
-        children: [/*#__PURE__*/_jsx(View, {
-          style: styles.tabSelectorWrap,
-          children: /*#__PURE__*/_jsx(TabSelector, {
-            tabs: tabs,
-            activeTab: activeTab,
-            testIDPrefix: "buoy-rq-tab",
-            onTabChange: tab => onTabChange(tab)
-          })
-        }), /*#__PURE__*/_jsx(WifiToggle, {
-          size: 16,
-          testID: "buoy-rq-wifi"
-        })]
-      }) : /*#__PURE__*/_jsx(TabSelector, {
-        tabs: tabs,
-        activeTab: activeTab,
-        testIDPrefix: "buoy-rq-tab",
-        onTabChange: tab => onTabChange(tab)
-      })
-    }), /*#__PURE__*/_jsxs(ModalHeader.Actions, {
-      children: [/*#__PURE__*/_jsx(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__*/_jsx(Search, {
-          size: 14,
-          color: night.color.textSecondary
-        })
-      }), onFilterPress && /*#__PURE__*/_jsx(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__*/_jsx(Filter, {
-          size: 14,
-          color: hasActiveFilters ? night.color.accent : night.color.textSecondary
-        })
-      }), onClearCache && /*#__PURE__*/_jsx(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__*/_jsx(Trash, {
-          size: 14,
-          color: night.color.warning
-        })
-      })]
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  tabRow: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 12
-  },
-  tabSelectorWrap: {
-    flex: 1
-  },
-  headerActionButton: {
-    padding: 6,
-    borderRadius: 4
-  },
-  activeFilterButton: {
-    backgroundColor: night.color.accentSoft
-  },
-  clearCacheButton: {
-    backgroundColor: night.color.warningSoft
-  }
-});
+"use strict";import{ModalHeader as r,TabSelector as I,Search as j,Filter as P,Trash as v,night as n}from"@buoy-gg/shared-ui";import{useState as z,useRef as D,useEffect as C}from"react";import{View as T,TouchableOpacity as f,StyleSheet as M}from"react-native";import{WifiToggle as L}from"../WifiToggle";import{jsx as t,jsxs as c}from"react/jsx-runtime";export function ReactQueryModalHeader({selectedQuery:h,selectedMutation:d,activeTab:l,onTabChange:p,onBack:B,searchText:R="",onSearchChange:s,onFilterPress:g,hasActiveFilters:u=false,onClearCache:S,showWifiToggle:k=false}){const[a,y]=z(false);const Q=D(false);const m=D(null);C(()=>{if(a&&m.current){m.current.focus()}},[a]);const w=()=>{y(!a);if(a&&s){s("")}};const q=e=>{if(s){s(e)}};const A=e=>{if(!e?.queryKey)return"Unknown Query";const i=Array.isArray(e.queryKey)?e.queryKey:[e.queryKey];return i.filter(b=>b!=null).map(b=>String(b)).join(" \u203A ")||"Unknown Query"};const K=e=>{if("queryKey"in e){return A(e)}else{return e.options.mutationKey?(Array.isArray(e.options.mutationKey)?e.options.mutationKey:[e.options.mutationKey]).filter(i=>i!=null).map(i=>String(i)).join(" \u203A ")||`Mutation #${e.mutationId}`:`Mutation #${e.mutationId}`}};const x=[{key:"queries",label:"Queries"},{key:"mutations",label:"Mutations"}];if(h||d){return c(r,{children:[t(r.Navigation,{onBack:B}),t(r.Content,{title:K(h??d),testID:"buoy-rq-detail-title"})]})}return c(r,{children:[t(r.Content,{title:"",noMargin:true,children:a?t(r.Search,{value:R,onChangeText:q,onCancel:()=>{q("");y(false)},onDismiss:()=>y(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"}}):k?c(T,{style:o.tabRow,children:[t(T,{style:o.tabSelectorWrap,children:t(I,{tabs:x,activeTab:l,testIDPrefix:"buoy-rq-tab",onTabChange:e=>p(e)})}),t(L,{size:16,testID:"buoy-rq-wifi"})]}):t(I,{tabs:x,activeTab:l,testIDPrefix:"buoy-rq-tab",onTabChange:e=>p(e)})}),c(r.Actions,{children:[t(f,{"sentry-label":"ignore open search",testID:"buoy-rq-search-open",accessibilityRole:"button",accessibilityLabel:"Search queries and mutations",onPress:w,style:o.headerActionButton,children:t(j,{size:14,color:n.color.textSecondary})}),g&&t(f,{"sentry-label":"ignore open filter",testID:"buoy-rq-filters",accessibilityRole:"button",accessibilityLabel:u?"Filters, active":"Filters",onPress:g,style:[o.headerActionButton,u&&o.activeFilterButton],children:t(P,{size:14,color:u?n.color.accent:n.color.textSecondary})}),S&&t(f,{"sentry-label":"ignore clear cache",testID:"buoy-rq-clear-cache",accessibilityRole:"button",onPress:S,style:[o.headerActionButton,o.clearCacheButton],accessibilityLabel:`Clear ${l} cache`,children:t(v,{size:14,color:n.color.warning})})]})]})}const o=M.create({tabRow:{flex:1,flexDirection:"row",alignItems:"center",gap:12},tabSelectorWrap:{flex:1},headerActionButton:{padding:6,borderRadius:4},activeFilterButton:{backgroundColor:n.color.accentSoft},clearCacheButton:{backgroundColor:n.color.warningSoft}});