@buoy-gg/react-query 7.0.33 → 7.0.35

package/lib/commonjs/react-query/components/DataEditorMode.js

@@ -276,7 +276,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   queryExplorerContent: {
     padding: 8
@@ -309,7 +309,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   dataContent: {
     padding: 8

package/lib/commonjs/react-query/components/FilterStatusBadge.js

@@ -50,6 +50,6 @@ const styles = _reactNative.StyleSheet.create({
   text: {
     fontSize: 9,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

package/lib/commonjs/react-query/components/MutationEditorMode.js

@@ -236,7 +236,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   mutationExplorerContent: {
     padding: 8
@@ -268,7 +268,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   dataContent: {
     padding: 8

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

@@ -33,13 +33,12 @@ function MutationBrowserFooter({
   const paddingBottom = (0, _react.useMemo)(() => {
     return !isFloatingMode ? insets.bottom : 0;
   }, [isFloatingMode, insets.bottom]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolFooter, {
     // Force re-render with key change
-    style: [styles.filterFooter, {
-      paddingBottom
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: paddingBottom,
+    style: styles.filterFooter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_MutationStatusCount.default, {
@@ -52,19 +51,8 @@ function MutationBrowserFooter({
 }
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.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/commonjs/react-query/components/modals/QueryBrowserFooter.js

@@ -29,12 +29,11 @@ function QueryBrowserFooter({
   const insets = (0, _sharedUi.useSafeAreaInsets)({
     minBottom: 16
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.filterFooter, {
-      paddingBottom: !isFloatingMode ? insets.bottom : 0
-    },
-    // Remove border radius when docked to bottom
-    !isFloatingMode && styles.dockedFooter],
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolFooter, {
+    floating: isFloatingMode,
+    safeArea: false,
+    paddingBottom: !isFloatingMode ? insets.bottom : 0,
+    style: styles.filterFooter,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
       style: styles.filterContainer,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatusCount.default, {
@@ -47,19 +46,8 @@ function QueryBrowserFooter({
 }
 const styles = _reactNative.StyleSheet.create({
   filterFooter: {
-    borderTopWidth: 1,
-    borderTopColor: _sharedUi.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/commonjs/react-query/components/modals/ReactQueryModalHeader.js

@@ -90,54 +90,29 @@ function ReactQueryModalHeader({
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ModalHeader.Content, {
       title: "",
       noMargin: true,
-      children: isSearchActive ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.headerSearchContainer,
-        testID: "buoy-rq-search-field",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Search, {
-          size: 14,
-          color: _sharedUi.night.color.textSecondary
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TextInput, {
-          ref: searchInputRef,
-          testID: "buoy-rq-search",
-          style: styles.headerSearchInput,
-          placeholder: "Search query keys...",
-          placeholderTextColor: _sharedUi.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__*/(0, _jsxRuntime.jsx)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_sharedUi.X, {
-            size: 14,
-            color: _sharedUi.night.color.textSecondary
-          })
-        }) : null]
+      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, {
@@ -206,29 +181,6 @@ const styles = _reactNative.StyleSheet.create({
   tabSelectorWrap: {
     flex: 1
   },
-  headerSearchContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    backgroundColor: _sharedUi.night.color.surfaceElevated,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    gap: 6,
-    marginHorizontal: 12,
-    marginVertical: 8
-  },
-  headerSearchInput: {
-    flex: 1,
-    color: _sharedUi.night.color.text,
-    fontSize: 13,
-    fontFamily: "monospace",
-    padding: 0,
-    margin: 0,
-    minHeight: 18
-  },
-  headerSearchClear: {
-    padding: 2
-  },
   headerActionButton: {
     padding: 6,
     borderRadius: 4

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

@@ -172,7 +172,7 @@ const styles = _reactNative.StyleSheet.create({
     paddingHorizontal: 12
   },
   mutationKey: {
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     fontSize: 12,
     color: _sharedUi.night.color.text,
     lineHeight: 16
@@ -185,6 +185,6 @@ const styles = _reactNative.StyleSheet.create({
   bottomRightText: {
     fontSize: 9,
     color: _sharedUi.night.color.textTertiary,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -78,7 +78,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   row: {
     flexDirection: "row",
@@ -96,7 +96,7 @@ const styles = _reactNative.StyleSheet.create({
   flexWrap: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     lineHeight: 18,
     flexShrink: 1,
     backgroundColor: _sharedUi.night.color.accent + "15",
@@ -112,13 +112,13 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   valueText: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -63,6 +63,6 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -102,7 +102,7 @@ const styles = _reactNative.StyleSheet.create({
     borderTopRightRadius: 8,
     borderBottomWidth: 1,
     borderBottomColor: _sharedUi.night.color.accent + "33",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 1,
     textTransform: "uppercase"
   },

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

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _useQueryStatusCounts = require("../../hooks/useQueryStatusCounts");
-var _react = require("react");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -25,96 +24,61 @@ const MutationStatusCount = ({
     error,
     paused
   } = (0, _useQueryStatusCounts.useMutationStatusCounts)();
-  const [isScrolling, setIsScrolling] = (0, _react.useState)(false);
-  const touchStartX = (0, _react.useRef)(0);
-  const touchStartY = (0, _react.useRef)(0);
+  const {
+    scrollProps,
+    onTouchStart: handleTouchStart,
+    isTap
+  } = (0, _sharedUi.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: styles.mutationStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        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__*/(0, _jsxRuntime.jsxs)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools mutation status count scroll",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      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__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      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 = _reactNative.StyleSheet.create({
-  mutationStatusContainer: {
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    flex: 1
-  },
-  scrollContent: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    paddingHorizontal: 4,
-    paddingVertical: 4,
-    flexGrow: 1
-  }
-});
 var _default = exports.default = MutationStatusCount;

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

@@ -214,7 +214,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.5
   }
 });

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

@@ -131,17 +131,8 @@ 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,
+      ..._sharedUi.EVENT_LIST_PRESET
     })
   );
 }
@@ -184,7 +175,7 @@ const styles = _reactNative.StyleSheet.create({
     color: _sharedUi.night.color.textTertiary,
     fontSize: 14,
     textAlign: "center",
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     letterSpacing: 0.5
   }
 });

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

@@ -95,7 +95,7 @@ const styles = _reactNative.StyleSheet.create({
     borderBottomColor: _sharedUi.night.color.accent + "33",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   row: {
     flexDirection: "row",
@@ -113,7 +113,7 @@ const styles = _reactNative.StyleSheet.create({
   queryKeyText: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
-    fontFamily: "monospace",
+    fontFamily: _sharedUi.monoFont,
     lineHeight: 18,
     flexShrink: 1,
     backgroundColor: _sharedUi.night.color.accent + "15",
@@ -129,13 +129,13 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     letterSpacing: 0.5,
     textTransform: "uppercase",
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   },
   valueText: {
     fontSize: 12,
     color: _sharedUi.night.color.text,
     fontWeight: "500",
     fontVariant: ["tabular-nums"],
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });

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

@@ -73,6 +73,6 @@ const styles = _reactNative.StyleSheet.create({
     fontWeight: "600",
     textTransform: "uppercase",
     letterSpacing: 0.5,
-    fontFamily: "monospace"
+    fontFamily: _sharedUi.monoFont
   }
 });