@buoy-gg/react-query 7.0.33 → 7.0.34

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/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/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
     })
   );
 }

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

@@ -4,8 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
 var _QueryStatus = _interopRequireDefault(require("./QueryStatus"));
 var _useQueryStatusCounts = _interopRequireDefault(require("../../hooks/useQueryStatusCounts"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -25,122 +24,77 @@ const QueryStatusCount = ({
     paused,
     inactive
   } = (0, _useQueryStatusCounts.default)();
-
-  // Scroll state management like ChipTabs
-  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) {
-      // Calculate distance moved during touch (like ChipTabs)
-      const dx = Math.abs(event.nativeEvent.pageX - touchStartX.current);
-      const dy = Math.abs(event.nativeEvent.pageY - touchStartY.current);
-
-      // If touch moved more than 5px in any direction, it's a swipe, not a tap
-      if (dx > 5 || dy > 5 || isScrolling) {
-        return; // Don't trigger filter change
-      }
-    }
+    if (!isTap(event)) return;
     if (onFilterChange) {
       // Toggle filter: if already active, clear it; otherwise set it
       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.queryStatusContainer,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.ScrollView, {
-      "sentry-label": "ignore devtools query 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: "Fresh",
-        color: "green",
-        count: fresh,
-        isActive: activeFilter === "fresh",
-        onPress: event => handleFilterClick("fresh", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fresh",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Loading",
-        color: "blue",
-        count: fetching,
-        isActive: activeFilter === "fetching",
-        onPress: event => handleFilterClick("fetching", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-fetching",
-        showLabel: true // Always show labels now
-        ,
-        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-status-paused",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Stale",
-        color: "yellow",
-        count: stale,
-        isActive: activeFilter === "stale",
-        onPress: event => handleFilterClick("stale", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-stale",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
-        label: "Idle",
-        color: "gray",
-        count: inactive,
-        isActive: activeFilter === "inactive",
-        onPress: event => handleFilterClick("inactive", event),
-        onTouchStart: handleTouchStart,
-        testID: "buoy-rq-status-inactive",
-        showLabel: true // Always show labels now
-        ,
-        size: size
-      })]
-    })
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_sharedUi.ChipStrip, {
+    scrollProps: scrollProps,
+    sentryLabel: "ignore devtools query status count scroll",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Fresh",
+      color: "green",
+      count: fresh,
+      isActive: activeFilter === "fresh",
+      onPress: event => handleFilterClick("fresh", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fresh",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Loading",
+      color: "blue",
+      count: fetching,
+      isActive: activeFilter === "fetching",
+      onPress: event => handleFilterClick("fetching", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-fetching",
+      showLabel: true // Always show labels now
+      ,
+      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-status-paused",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Stale",
+      color: "yellow",
+      count: stale,
+      isActive: activeFilter === "stale",
+      onPress: event => handleFilterClick("stale", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-stale",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryStatus.default, {
+      label: "Idle",
+      color: "gray",
+      count: inactive,
+      isActive: activeFilter === "inactive",
+      onPress: event => handleFilterClick("inactive", event),
+      onTouchStart: handleTouchStart,
+      testID: "buoy-rq-status-inactive",
+      showLabel: true // Always show labels now
+      ,
+      size: size
+    })]
   });
 };
-const styles = _reactNative.StyleSheet.create({
-  queryStatusContainer: {
-    // Container for ScrollView - take full width
-    flex: 1,
-    minWidth: 0
-  },
-  scrollView: {
-    // ScrollView itself styles
-    flex: 1
-  },
-  scrollContent: {
-    // ScrollView content styles
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    // Spacing between chips
-    paddingHorizontal: 4,
-    // Small padding on ends
-    paddingVertical: 4,
-    flexGrow: 1 // Allow content to grow to fill available space
-  }
-});
 var _default = exports.default = QueryStatusCount;