@buoy-gg/react-query 1.7.2

package/lib/module/react-query/components/QueryBrowserMode.js

@@ -0,0 +1,77 @@
+"use strict";
+
+import { View, StyleSheet } from "react-native";
+import { useMemo } from "react";
+import { QueryBrowser } from "./query-browser/index";
+import { FilterStatusBadge } from "./FilterStatusBadge";
+import useAllQueries from "../hooks/useAllQueries";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Wrapper around the query list experience used inside the modal view. */
+export function QueryBrowserMode({
+  selectedQuery,
+  onQuerySelect,
+  activeFilter,
+  searchText = "",
+  ignoredPatterns = new Set(),
+  includedPatterns = new Set(),
+  onFilterPress
+}) {
+  const hasIncludeFilters = includedPatterns.size > 0;
+  const hasExcludeFilters = ignoredPatterns.size > 0;
+  const allQueries = useAllQueries();
+
+  // Calculate filtered count for the badge
+  const filteredCount = useMemo(() => {
+    let filtered = allQueries;
+
+    // Apply included patterns filter
+    if (includedPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return false;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter
+    if (ignoredPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return true;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+    return filtered.length;
+  }, [allQueries, includedPatterns, ignoredPatterns]);
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.queryListContainer,
+    children: [(hasIncludeFilters || hasExcludeFilters) && /*#__PURE__*/_jsx(FilterStatusBadge, {
+      totalCount: allQueries.length,
+      filteredCount: filteredCount,
+      onPress: onFilterPress
+    }), /*#__PURE__*/_jsx(QueryBrowser, {
+      selectedQuery: selectedQuery,
+      onQuerySelect: onQuerySelect,
+      activeFilter: activeFilter,
+      searchText: searchText,
+      ignoredPatterns: ignoredPatterns,
+      includedPatterns: includedPatterns,
+      emptyStateMessage: searchText ? `No queries found matching "${searchText}"` : activeFilter ? `No ${activeFilter} queries found` : hasIncludeFilters ? `No queries match your "include only" filters. ${includedPatterns.size} pattern(s) active.` : hasExcludeFilters ? `No queries match the current filters. ${ignoredPatterns.size} pattern(s) excluded.` : "No React Query queries are currently active.\n\nTo see queries here:\n• Make API calls using useQuery\n• Ensure queries are within QueryClientProvider\n• Check console for debugging info",
+      contentContainerStyle: styles.queryListContent
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  queryListContainer: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  queryListContent: {
+    padding: 8,
+    backgroundColor: buoyColors.base,
+    flexGrow: 1
+  }
+});

package/lib/module/react-query/components/QueryDebugInfo.js

@@ -0,0 +1,104 @@
+"use strict";
+
+import { View, Text, StyleSheet } from "react-native";
+import { useQueryClient } from "@tanstack/react-query";
+
+/**
+ * Lightweight debug panel that surfaces high-level QueryClient information and recently seen
+ * query keys. Intended primarily for the React Query dev tools modal.
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function QueryDebugInfo() {
+  try {
+    const queryClient = useQueryClient();
+    const queries = queryClient.getQueryCache().getAll();
+    const mutations = queryClient.getMutationCache().getAll();
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: "Debug Info"
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.info,
+        children: "QueryClient: \u2705 Available"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.info,
+        children: ["Queries: ", queries.length]
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.info,
+        children: ["Mutations: ", mutations.length]
+      }), queries.length > 0 && /*#__PURE__*/_jsxs(View, {
+        style: styles.queriesList,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.subtitle,
+          children: "Query Keys:"
+        }), queries.slice(0, 3).map((query, index) => /*#__PURE__*/_jsxs(Text, {
+          style: styles.queryKey,
+          children: ["\u2022", " ", Array.isArray(query.queryKey) ? query.queryKey.join(" - ") : String(query.queryKey)]
+        }, index)), queries.length > 3 && /*#__PURE__*/_jsxs(Text, {
+          style: styles.more,
+          children: ["... and ", queries.length - 3, " more"]
+        })]
+      })]
+    });
+  } catch (error) {
+    return /*#__PURE__*/_jsxs(View, {
+      style: styles.container,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: "Debug Info"
+      }), /*#__PURE__*/_jsxs(Text, {
+        style: styles.error,
+        children: ["\u274C QueryClient Error: ", String(error)]
+      })]
+    });
+  }
+}
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+    backgroundColor: "rgba(0, 0, 0, 0.3)",
+    borderRadius: 8,
+    margin: 16,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)"
+  },
+  title: {
+    color: "#FFFFFF",
+    fontSize: 14,
+    fontWeight: "600",
+    marginBottom: 8
+  },
+  subtitle: {
+    color: "#E5E7EB",
+    fontSize: 12,
+    fontWeight: "500",
+    marginTop: 8,
+    marginBottom: 4
+  },
+  info: {
+    color: "#9CA3AF",
+    fontSize: 12,
+    marginBottom: 4
+  },
+  error: {
+    color: "#EF4444",
+    fontSize: 12,
+    marginBottom: 4
+  },
+  queriesList: {
+    marginTop: 4
+  },
+  queryKey: {
+    color: "#60A5FA",
+    fontSize: 11,
+    marginLeft: 8,
+    marginBottom: 2
+  },
+  more: {
+    color: "#9CA3AF",
+    fontSize: 11,
+    fontStyle: "italic",
+    marginLeft: 8
+  }
+});

package/lib/module/react-query/components/QueryFilterViewV3.js

@@ -0,0 +1,218 @@
+"use strict";
+
+import { useMemo } from "react";
+import { DynamicFilterView, buoyColors } from "@buoy-gg/shared-ui";
+import { XCircle, Clock, RefreshCw, Globe, Zap, Filter, Eye } from "@buoy-gg/shared-ui";
+import { getQueryStatusLabel } from "../utils/getQueryStatusLabel";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Comprehensive filter control panel for React Query DevTools matching the Network DevTools
+ * filter UI pattern. Provides status filtering and query key pattern-based filtering.
+ */
+export function QueryFilterViewV3({
+  queries,
+  activeFilter,
+  onFilterChange,
+  ignoredPatterns,
+  onPatternToggle,
+  includedPatterns,
+  onIncludedPatternToggle
+}) {
+  // Calculate status counts
+  const statusCounts = useMemo(() => {
+    const counts = {
+      all: queries.length,
+      disabled: 0,
+      fresh: 0,
+      stale: 0,
+      fetching: 0,
+      paused: 0,
+      inactive: 0,
+      error: 0
+    };
+    queries.forEach(query => {
+      const status = getQueryStatusLabel(query);
+      if (status === "disabled") counts.disabled++;else if (status === "fresh") counts.fresh++;else if (status === "stale") counts.stale++;else if (status === "fetching") counts.fetching++;else if (status === "paused") counts.paused++;else if (status === "inactive") counts.inactive++;
+      if (query.state.error) counts.error++;
+    });
+    return counts;
+  }, [queries]);
+
+  // Extract available query keys (excluding numeric-only keys)
+  const availableQueryKeys = useMemo(() => {
+    const keys = new Set();
+    queries.forEach(query => {
+      if (!query?.queryKey) return;
+      const queryKeys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+      queryKeys.forEach(key => {
+        if (key != null) {
+          const keyStr = String(key);
+          // Skip if key is purely numeric (likely a dynamic ID)
+          if (!/^\d+$/.test(keyStr)) {
+            keys.add(keyStr);
+          }
+        }
+      });
+    });
+    return Array.from(keys).sort().slice(0, 50); // Limit to 50
+  }, [queries]);
+
+  // Convert available query keys to suggestion items (just strings)
+  const suggestionItems = useMemo(() => {
+    return availableQueryKeys;
+  }, [availableQueryKeys]);
+
+  // Calculate filtered query count based on active patterns
+  const filteredCount = useMemo(() => {
+    let filtered = queries;
+
+    // Apply included patterns filter
+    if (includedPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return false;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+
+    // Apply ignored patterns filter
+    if (ignoredPatterns.size > 0) {
+      filtered = filtered.filter(query => {
+        if (!query?.queryKey) return true;
+        const keys = Array.isArray(query.queryKey) ? query.queryKey : [query.queryKey];
+        const keyString = keys.filter(k => k != null).map(k => String(k)).join(" ").toLowerCase();
+        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
+      });
+    }
+    return filtered.length;
+  }, [queries, includedPatterns, ignoredPatterns]);
+
+  // Build the filter configuration
+  const filterConfig = useMemo(() => {
+    return {
+      filterSummarySection: {
+        enabled: true,
+        totalCount: queries.length,
+        filteredCount: filteredCount,
+        includePatterns: includedPatterns,
+        excludePatterns: ignoredPatterns
+      },
+      sections: [
+      // Status section - radio button style
+      {
+        id: "status",
+        title: "Status",
+        type: "status",
+        data: [{
+          id: "status::all",
+          label: "All",
+          count: statusCounts.all,
+          icon: Globe,
+          color: buoyColors.primary,
+          isActive: !activeFilter || activeFilter === "all"
+        }, {
+          id: "status::disabled",
+          label: "Disabled",
+          count: statusCounts.disabled,
+          icon: XCircle,
+          color: buoyColors.textMuted,
+          isActive: activeFilter === "disabled"
+        }, {
+          id: "status::fresh",
+          label: "Fresh",
+          count: statusCounts.fresh,
+          icon: Zap,
+          color: buoyColors.success,
+          isActive: activeFilter === "fresh"
+        }, {
+          id: "status::stale",
+          label: "Stale",
+          count: statusCounts.stale,
+          icon: Clock,
+          color: buoyColors.warning,
+          isActive: activeFilter === "stale"
+        }, {
+          id: "status::fetching",
+          label: "Fetching",
+          count: statusCounts.fetching,
+          icon: RefreshCw,
+          color: buoyColors.primary,
+          isActive: activeFilter === "fetching"
+        }, {
+          id: "status::paused",
+          label: "Paused",
+          count: statusCounts.paused,
+          icon: Clock,
+          color: buoyColors.textMuted,
+          isActive: activeFilter === "paused"
+        }, {
+          id: "status::inactive",
+          label: "Inactive",
+          count: statusCounts.inactive,
+          icon: Clock,
+          color: buoyColors.textSecondary,
+          isActive: activeFilter === "inactive"
+        }, {
+          id: "status::error",
+          label: "Error",
+          count: statusCounts.error,
+          icon: XCircle,
+          color: buoyColors.error,
+          isActive: activeFilter === "error"
+        }]
+      }],
+      addFilterSection: {
+        enabled: true,
+        placeholder: "Enter pattern to exclude...",
+        title: "EXCLUDE FILTERS",
+        icon: Filter
+      },
+      includeOnlySection: {
+        enabled: true,
+        title: "INCLUDE ONLY FILTERS",
+        description: "Show ONLY queries matching these patterns. All non-matching queries will be hidden.",
+        placeholder: "Enter pattern to include...",
+        icon: Eye,
+        patterns: includedPatterns,
+        onPatternToggle: onIncludedPatternToggle,
+        onPatternAdd: onIncludedPatternToggle
+      },
+      availableItemsSection: {
+        enabled: true,
+        title: "AVAILABLE QUERY KEYS",
+        emptyMessage: "No queries found. Query keys will appear here once queries are active.",
+        items: suggestionItems
+      },
+      howItWorksSection: {
+        enabled: true,
+        title: "HOW QUERY FILTERS WORK",
+        description: "There are two types of query key filters:",
+        examples: ["", "INCLUDE ONLY (green):", "• Shows ONLY queries matching the pattern", "• Example: 'rewards' → shows only reward queries", "• When active, non-matching queries are hidden", "", "EXCLUDE (blue):", "• Hides queries matching the pattern", "• Example: 'analytics' → hides analytics queries", "", "Filters are case-insensitive and match partial keys."]
+      },
+      activePatterns: ignoredPatterns
+    };
+  }, [statusCounts, activeFilter, ignoredPatterns, includedPatterns, suggestionItems, onIncludedPatternToggle, queries.length, filteredCount]);
+
+  // Handle filter item clicks
+  const handleFilterSelect = itemId => {
+    const [section, value] = itemId.split("::");
+    if (section === "status") {
+      // Status filters are mutually exclusive
+      if (value === "all" || activeFilter === value) {
+        onFilterChange(null);
+      } else {
+        onFilterChange(value);
+      }
+    } else if (section === "suggestion") {
+      // Toggle pattern
+      onPatternToggle(value);
+    }
+  };
+  return /*#__PURE__*/_jsx(DynamicFilterView, {
+    ...filterConfig,
+    onFilterChange: handleFilterSelect,
+    onPatternToggle: onPatternToggle,
+    onPatternAdd: onPatternToggle
+  });
+}

package/lib/module/react-query/components/QuerySelector.js

@@ -0,0 +1,204 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity, Modal, ScrollView, Pressable } from "react-native";
+import { getQueryStatusColor } from "../utils/getQueryStatusColor";
+import { QueryDebugInfo } from "./QueryDebugInfo";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Modal selector that lists all known queries, highlighting status and enabling the user to focus
+ * a specific query within the dev tools experience.
+ */
+export function QuerySelector({
+  queries,
+  selectedQuery,
+  isOpen,
+  onClose,
+  onSelect
+}) {
+  const getQueryDisplayName = query => {
+    return Array.isArray(query.queryKey) ? query.queryKey.join(" - ") : String(query.queryKey);
+  };
+  return /*#__PURE__*/_jsx(Modal, {
+    accessibilityLabel: "Query selector",
+    accessibilityHint: "View query selector",
+    "sentry-label": "ignore query selector",
+    visible: isOpen,
+    transparent: true,
+    animationType: "fade",
+    onRequestClose: onClose,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: "Query selector overlay",
+      accessibilityHint: "View query selector overlay",
+      "sentry-label": "ignore query selector overlay",
+      style: styles.modalOverlay,
+      onPress: onClose,
+      children: /*#__PURE__*/_jsxs(View, {
+        accessibilityLabel: "Query selector content",
+        accessibilityHint: "View query selector content",
+        "sentry-label": "ignore query selector content",
+        style: styles.modalContent,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.modalHeader,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.modalTitle,
+            children: "Select Query"
+          }), /*#__PURE__*/_jsxs(Text, {
+            style: styles.modalSubtitle,
+            children: [queries.length, " ", queries.length === 1 ? "query" : "queries", " ", "available"]
+          })]
+        }), /*#__PURE__*/_jsx(ScrollView, {
+          accessibilityLabel: "Query selector scroll view",
+          accessibilityHint: "View query selector scroll view",
+          "sentry-label": "ignore query selector scroll view",
+          style: styles.scrollView,
+          contentContainerStyle: styles.scrollViewContent,
+          showsVerticalScrollIndicator: true,
+          children: queries.length === 0 ? /*#__PURE__*/_jsxs(View, {
+            style: styles.emptyState,
+            children: [/*#__PURE__*/_jsx(Text, {
+              style: styles.emptyTitle,
+              children: "No Queries Found"
+            }), /*#__PURE__*/_jsxs(Text, {
+              style: styles.emptyDescription,
+              children: ["No React Query queries are currently active.", "\n\n", "To see queries here:", "\n", "\u2022 Make API calls using useQuery", "\n", "\u2022 Ensure queries are within QueryClientProvider", "\n", "\u2022 Check console for debugging info"]
+            }), /*#__PURE__*/_jsx(QueryDebugInfo, {})]
+          }) : queries.map((query, index) => {
+            const displayName = getQueryDisplayName(query);
+            const statusColorName = getQueryStatusColor({
+              queryState: query.state,
+              observerCount: query.getObserversCount(),
+              isStale: query.isStale()
+            });
+
+            // Convert color names to hex colors
+            const colorMap = {
+              blue: "#3B82F6",
+              gray: "#6B7280",
+              purple: "#8B5CF6",
+              yellow: "#F59E0B",
+              green: "#10B981"
+            };
+            const statusColor = colorMap[statusColorName] || "#6B7280";
+            const isSelected = query === selectedQuery;
+            return /*#__PURE__*/_jsxs(TouchableOpacity, {
+              accessibilityLabel: `Query ${displayName}`,
+              accessibilityHint: `View query ${displayName}`,
+              "sentry-label": `ignore query ${displayName}`,
+              style: [styles.queryItem, isSelected && styles.selectedQueryItem],
+              onPress: () => onSelect(query),
+              children: [/*#__PURE__*/_jsx(View, {
+                style: [styles.statusDot, {
+                  backgroundColor: statusColor
+                }]
+              }), /*#__PURE__*/_jsx(Text, {
+                style: [styles.queryText, isSelected && styles.selectedQueryText],
+                numberOfLines: 1,
+                children: displayName
+              })]
+            }, `${query.queryHash}-${index}`);
+          })
+        })]
+      })
+    })
+  });
+}
+const styles = StyleSheet.create({
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    justifyContent: "center",
+    alignItems: "center"
+  },
+  modalContent: {
+    backgroundColor: "#1F1F1F",
+    borderRadius: 8,
+    width: "80%",
+    maxHeight: "80%",
+    minHeight: "50%",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    flex: 0
+  },
+  modalHeader: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.1)"
+  },
+  modalTitle: {
+    color: "#FFFFFF",
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4
+  },
+  modalSubtitle: {
+    color: "#9CA3AF",
+    fontSize: 12
+  },
+  scrollView: {
+    flex: 1
+  },
+  scrollViewContent: {
+    padding: 8,
+    flexGrow: 1
+  },
+  emptyState: {
+    padding: 32,
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  emptyTitle: {
+    color: "#E5E7EB",
+    fontSize: 16,
+    fontWeight: "500",
+    marginBottom: 8,
+    textAlign: "center"
+  },
+  emptyDescription: {
+    color: "#9CA3AF",
+    fontSize: 14,
+    textAlign: "center",
+    lineHeight: 20
+  },
+  queryItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 8,
+    borderRadius: 4
+  },
+  selectedQueryItem: {
+    backgroundColor: "rgba(255, 255, 255, 0.1)"
+  },
+  statusDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+    marginRight: 8
+  },
+  queryText: {
+    color: "#E5E7EB",
+    fontSize: 14,
+    flex: 1
+  },
+  selectedQueryText: {
+    color: "#FFFFFF",
+    fontWeight: "500"
+  },
+  trigger: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    borderRadius: 4,
+    paddingHorizontal: 8,
+    paddingVertical: 6,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.1)",
+    minWidth: 120,
+    maxWidth: 200
+  },
+  triggerText: {
+    color: "#E5E7EB",
+    fontSize: 12,
+    flex: 1,
+    marginHorizontal: 6
+  }
+});

package/lib/module/react-query/components/ReactQueryDevToolsModal.js

@@ -0,0 +1,72 @@
+"use strict";
+
+import { useCallback, useState } from "react";
+import { ReactQueryModal } from "./modals/ReactQueryModal";
+
+/** Configuration options for the high-level React Query dev tools modal wrapper. */
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Opinionated wrapper around `ReactQueryModal` that manages selection state and filters so
+ * consumers can drop in the full dev tools experience with a single component.
+ */
+export function ReactQueryDevToolsModal({
+  visible,
+  onClose,
+  onMinimize,
+  enableSharedModalDimensions = true
+}) {
+  const [selectedQueryKey, setSelectedQueryKey] = useState(undefined);
+  const [selectedMutationId, setSelectedMutationId] = useState(undefined);
+  const [activeFilter, setActiveFilter] = useState(null);
+  const [activeTab, setActiveTab] = useState("queries");
+  const [searchText, setSearchText] = useState("");
+  const resetState = useCallback(() => {
+    setSelectedQueryKey(undefined);
+    setSelectedMutationId(undefined);
+    setActiveFilter(null);
+    setActiveTab("queries");
+    setSearchText("");
+  }, []);
+  const handleClose = useCallback(() => {
+    resetState();
+    onClose();
+  }, [onClose, resetState]);
+  const handleQuerySelect = useCallback(query => {
+    setSelectedQueryKey(query?.queryKey);
+  }, []);
+  const handleMutationSelect = useCallback(mutation => {
+    setSelectedMutationId(mutation?.mutationId);
+  }, []);
+  const handleFilterChange = useCallback(filter => {
+    setActiveFilter(filter);
+  }, []);
+  const handleTabChange = useCallback(tab => {
+    setActiveTab(tab);
+    setActiveFilter(null);
+    setSelectedQueryKey(undefined);
+    setSelectedMutationId(undefined);
+    setSearchText("");
+  }, []);
+  const handleSearchChange = useCallback(text => {
+    setSearchText(text);
+  }, []);
+  if (!visible) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(ReactQueryModal, {
+    visible: visible,
+    selectedQueryKey: selectedQueryKey,
+    selectedMutationId: selectedMutationId,
+    onQuerySelect: handleQuerySelect,
+    onMutationSelect: handleMutationSelect,
+    onClose: handleClose,
+    onMinimize: onMinimize,
+    activeFilter: activeFilter,
+    onFilterChange: handleFilterChange,
+    activeTab: activeTab,
+    onTabChange: handleTabChange,
+    searchText: searchText,
+    onSearchChange: handleSearchChange,
+    enableSharedModalDimensions: enableSharedModalDimensions
+  });
+}