@buoy-gg/react-query 7.0.33 → 7.0.35

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

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, StyleSheet } from "react-native";
-import { useSafeAreaInsets, night } from "@buoy-gg/shared-ui";
+import { ToolFooter, useSafeAreaInsets } from "@buoy-gg/shared-ui";
 import QueryStatusCount from "../query-browser/QueryStatusCount";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
@@ -24,12 +24,11 @@ export function QueryBrowserFooter({
   const insets = useSafeAreaInsets({
     minBottom: 16
   });
-  return /*#__PURE__*/_jsx(View, {
-    style: [styles.filterFooter, {
-      paddingBottom: !isFloatingMode ? insets.bottom : 0
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+  return /*#__PURE__*/_jsx(ToolFooter, {
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: !isFloatingMode ? insets.bottom : 0,
+    style: styles.filterFooter,
     children: /*#__PURE__*/_jsx(View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/_jsx(QueryStatusCount, {
@@ -42,19 +41,8 @@ export function QueryBrowserFooter({
 }
 const styles = StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: night.color.border,
-    paddingVertical: 8,
-    paddingHorizontal: 0,
-    // Transparent so the night sheet's star field shows through.
-    // Night glass bar — matches the shared EventStepperFooter backing.
-    backgroundColor: "rgba(5, 5, 5, 0.92)",
-    borderBottomLeftRadius: 14,
-    borderBottomRightRadius: 14
-  },
-  dockedFooter: {
-    borderBottomLeftRadius: 0,
-    borderBottomRightRadius: 0
+    paddingTop: 8,
+    paddingHorizontal: 0
   },
   filterContainer: {
     minHeight: 32,

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

@@ -1,8 +1,8 @@
 "use strict";
 
-import { ModalHeader, TabSelector, Search, X, Filter, Trash, night } from "@buoy-gg/shared-ui";
+import { ModalHeader, TabSelector, Search, Filter, Trash, night } from "@buoy-gg/shared-ui";
 import { useState, useRef, useEffect } from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { WifiToggle } from "../WifiToggle";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -86,54 +86,29 @@ export function ReactQueryModalHeader({
     children: [/*#__PURE__*/_jsx(ModalHeader.Content, {
       title: "",
       noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/_jsxs(View, {
-        style: styles.headerSearchContainer,
-        testID: "buoy-rq-search-field",
-        children: [/*#__PURE__*/_jsx(Search, {
-          size: 14,
-          color: night.color.textSecondary
-        }), /*#__PURE__*/_jsx(TextInput, {
-          ref: searchInputRef,
-          testID: "buoy-rq-search",
-          style: styles.headerSearchInput,
-          placeholder: "Search query keys...",
-          placeholderTextColor: night.color.textTertiary,
-          value: searchText,
-          onChangeText: handleSearch,
-          onSubmitEditing: () => setIsSearchActive(false),
-          onBlur: () => {
-            if (!clearPressRef.current) setIsSearchActive(false);
-          },
-          "sentry-label": "ignore react query search header",
-          accessibilityLabel: "Search queries and mutations",
-          autoCapitalize: "none",
-          autoCorrect: false,
-          returnKeyType: "search"
-        }), searchText.length > 0 ? /*#__PURE__*/_jsx(TouchableOpacity
-        // react-native-web delays press-in ~50ms by default (native
-        // fires it immediately), which would put it AFTER the blur.
-        , {
-          delayPressIn: 0,
-          onPressIn: () => {
-            clearPressRef.current = true;
-          },
-          onPressOut: () => {
-            clearPressRef.current = false;
-          },
-          onPress: () => {
-            handleSearch("");
-            setIsSearchActive(false);
-          },
-          "sentry-label": "ignore clear search header",
-          testID: "buoy-rq-search-clear",
-          accessibilityRole: "button",
-          accessibilityLabel: "Clear search",
-          style: styles.headerSearchClear,
-          children: /*#__PURE__*/_jsx(X, {
-            size: 14,
-            color: night.color.textSecondary
-          })
-        }) : null]
+      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, {
@@ -202,29 +177,6 @@ const styles = StyleSheet.create({
   tabSelectorWrap: {
     flex: 1
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    gap: 6,
-    marginHorizontal: 12,
-    marginVertical: 8
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: night.color.text,
-    fontSize: 13,
-    fontFamily: "monospace",
-    padding: 0,
-    margin: 0,
-    minHeight: 18
-  },
-  headerSearchClear: {
-    padding: 2
-  },
   headerActionButton: {
     padding: 6,
     borderRadius: 4

package/lib/module/react-query/components/query-browser/MutationButton.js

@@ -2,7 +2,7 @@
 
 import { TouchableOpacity, Text, View, StyleSheet } from "react-native";
 import { CheckCircle, LoadingCircle, PauseCircle, XCircle } from "./svgs";
-import { buoyColors, night, useRelativeTime } from "@buoy-gg/shared-ui";
+import { buoyColors, night, useRelativeTime, monoFont } from "@buoy-gg/shared-ui";
 import { mutationRowTestID } from "../../utils/testIDs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const getMutationText = mutation => {
@@ -168,7 +168,7 @@ const styles = StyleSheet.create({
     paddingHorizontal: 12
   },
   mutationKey: {
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     fontSize: 12,
     color: night.color.text,
     lineHeight: 16
@@ -181,6 +181,6 @@ const styles = StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/react-query/components/query-browser/MutationDetails.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { View, Text, ScrollView, StyleSheet } from "react-native";
-import { displayValue, night } from "@buoy-gg/shared-ui";
+import { displayValue, night, monoFont } from "@buoy-gg/shared-ui";
 import MutationDetailsChips from "./MutationDetailsChips";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   row: {
     flexDirection: "row",
@@ -91,7 +91,7 @@ const styles = StyleSheet.create({
   flexWrap: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 18,
     flexShrink: 1,
     backgroundColor: night.color.accent + "15",
@@ -107,13 +107,13 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueText: {
     fontSize: 12,
     color: night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/react-query/components/query-browser/MutationDetailsChips.js

@@ -1,7 +1,7 @@
 "use strict";
 
 import { Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { buoyColors, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 const backgroundColors = {
   success: buoyColors.success + "15",
@@ -59,6 +59,6 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/react-query/components/query-browser/MutationInformation.js

@@ -3,7 +3,7 @@
 import DataExplorer from "./Explorer";
 import { ScrollView, Text, View, StyleSheet } from "react-native";
 import MutationDetails from "./MutationDetails";
-import { night } from "@buoy-gg/shared-ui";
+import { night, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Detailed information block for a selected mutation within the modal experience. */
 export default function MutationInformation({
@@ -97,7 +97,7 @@ const styles = StyleSheet.create({
     borderTopRightRadius: 8,
     borderBottomWidth: 1,
     borderBottomColor: night.color.accent + "33",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 1,
     textTransform: "uppercase"
   },

package/lib/module/react-query/components/query-browser/MutationStatusCount.js

@@ -1,9 +1,8 @@
 "use strict";
 
-import { View, StyleSheet, ScrollView } from "react-native";
+import { ChipStrip, useChipTap } from "@buoy-gg/shared-ui";
 import QueryStatus from "./QueryStatus";
 import { useMutationStatusCounts } from "../../hooks/useQueryStatusCounts";
-import { useRef, useState } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Horizontal status filter bar tailored for mutations. Integrates scroll detection to avoid
@@ -20,96 +19,61 @@ const MutationStatusCount = ({
     error,
     paused
   } = useMutationStatusCounts();
-  const [isScrolling, setIsScrolling] = useState(false);
-  const touchStartX = useRef(0);
-  const touchStartY = useRef(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = useChipTap();
   const handleFilterClick = (filter, event) => {
-    if (event) {
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return;
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       onFilterChange(activeFilter === filter ? null : filter);
     }
   };
-  const handleTouchStart = event => {
-    touchStartX.current = event.nativeEvent.pageX;
-    touchStartY.current = event.nativeEvent.pageY;
-  };
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.mutationStatusContainer,
-    children: /*#__PURE__*/_jsxs(ScrollView, {
-      "sentry-label": "ignore devtools mutation status count scroll",
-      horizontal: true,
-      showsHorizontalScrollIndicator: false,
-      style: styles.scrollView,
-      contentContainerStyle: styles.scrollContent,
-      onScrollBeginDrag: () => setIsScrolling(true),
-      onScrollEndDrag: () => setTimeout(() => setIsScrolling(false), 300),
-      onMomentumScrollBegin: () => setIsScrolling(true),
-      onMomentumScrollEnd: () => setTimeout(() => setIsScrolling(false), 300),
-      children: [/*#__PURE__*/_jsx(QueryStatus, {
-        label: "Pending",
-        color: "blue",
-        count: pending,
-        isActive: activeFilter === "pending",
-        onPress: event => handleFilterClick("pending", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-pending",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Success",
-        color: "green",
-        count: success,
-        isActive: activeFilter === "success",
-        onPress: event => handleFilterClick("success", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-success",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Error",
-        color: "red",
-        count: error,
-        isActive: activeFilter === "error",
-        onPress: event => handleFilterClick("error", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-error",
-        showLabel: true,
-        size: size
-      }), /*#__PURE__*/_jsx(QueryStatus, {
-        label: "Paused",
-        color: "purple",
-        count: paused,
-        isActive: activeFilter === "paused",
-        onPress: event => handleFilterClick("paused", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-mstatus-paused",
-        showLabel: true,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/_jsxs(ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools mutation status count scroll",
+    children: [/*#__PURE__*/_jsx(QueryStatus, {
+      label: "Pending",
+      color: "blue",
+      count: pending,
+      isActive: activeFilter === "pending",
+      onPress: event => handleFilterClick("pending", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-pending",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Success",
+      color: "green",
+      count: success,
+      isActive: activeFilter === "success",
+      onPress: event => handleFilterClick("success", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-success",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Error",
+      color: "red",
+      count: error,
+      isActive: activeFilter === "error",
+      onPress: event => handleFilterClick("error", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-error",
+      showLabel: true,
+      size: size
+    }), /*#__PURE__*/_jsx(QueryStatus, {
+      label: "Paused",
+      color: "purple",
+      count: paused,
+      isActive: activeFilter === "paused",
+      onPress: event => handleFilterClick("paused", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-mstatus-paused",
+      showLabel: true,
+      size: size
+    })]
   });
 };
-const styles = StyleSheet.create({
-  mutationStatusContainer: {
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    flexGrow: 1
-  }
-});
 export default MutationStatusCount;

package/lib/module/react-query/components/query-browser/MutationsList.js

@@ -5,7 +5,7 @@ import { View, StyleSheet, PanResponder, Animated, Dimensions, FlatList } from "
 import MutationButton from "./MutationButton";
 import MutationInformation from "./MutationInformation";
 import useAllMutations from "../../hooks/useAllMutations";
-import { night, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { night, ToolEmptyState, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Virtualized list of mutations with filtering and selection support for the mutation browser.
@@ -209,7 +209,7 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5
   }
 });

package/lib/module/react-query/components/query-browser/QueryBrowser.js

@@ -5,7 +5,7 @@ import { StyleSheet, FlatList } from "react-native";
 import QueryRow from "./QueryRow";
 import useAllQueries from "../../hooks/useAllQueries";
 import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
-import { night, ToolEmptyState } from "@buoy-gg/shared-ui";
+import { night, ToolEmptyState, EVENT_LIST_PRESET, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Scrollable list view of cached queries with filtering support and selection handling.
@@ -126,17 +126,8 @@ export default function QueryBrowser({
         isSelected: selectedQuery?.queryHash === query.queryHash,
         onSelect: handleQuerySelect
       }),
-      showsVerticalScrollIndicator: true
-      // Clipped cells fail Detox's hittability check even when they are on
-      // screen, so e2e bundles (Metro with EXPO_PUBLIC_E2E=1) turn clipping
-      // off. Inlined at bundle time; a non-inlining bundler keeps prod
-      // behavior.
-      ,
-      removeClippedSubviews: !(typeof process !== "undefined" && process.env?.EXPO_PUBLIC_E2E),
-      initialNumToRender: 12,
-      maxToRenderPerBatch: 8,
-      windowSize: 5,
-      updateCellsBatchingPeriod: 50
+      showsVerticalScrollIndicator: true,
+      ...EVENT_LIST_PRESET
     })
   );
 }
@@ -179,7 +170,7 @@ const styles = StyleSheet.create({
     color: night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     letterSpacing: 0.5
   }
 });

package/lib/module/react-query/components/query-browser/QueryDetails.js

@@ -2,7 +2,7 @@
 
 import QueryDetailsChip from "./QueryDetailsChip";
 import { View, Text, ScrollView, StyleSheet } from "react-native";
-import { displayValue, night } from "@buoy-gg/shared-ui";
+import { displayValue, night, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * Renders the primary metadata summary for a selected query, including fetch status and timings.
@@ -90,7 +90,7 @@ const styles = StyleSheet.create({
     borderBottomColor: night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   row: {
     flexDirection: "row",
@@ -108,7 +108,7 @@ const styles = StyleSheet.create({
   queryKeyText: {
     fontSize: 12,
     color: night.color.text,
-    fontFamily: "monospace",
+    fontFamily: monoFont,
     lineHeight: 18,
     flexShrink: 1,
     backgroundColor: night.color.accent + "15",
@@ -124,13 +124,13 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: monoFont
   },
   valueText: {
     fontSize: 12,
     color: night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });

package/lib/module/react-query/components/query-browser/QueryDetailsChip.js

@@ -2,7 +2,7 @@
 
 import { getQueryStatusLabel } from "../../utils/getQueryStatusLabel";
 import { Text, View, StyleSheet } from "react-native";
-import { buoyColors } from "@buoy-gg/shared-ui";
+import { buoyColors, monoFont } from "@buoy-gg/shared-ui";
 import { jsx as _jsx } from "react/jsx-runtime";
 const backgroundColors = {
   fresh: buoyColors.success + "15",
@@ -69,6 +69,6 @@ const styles = StyleSheet.create({
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: monoFont
   }
 });