@buoy-gg/react-query 7.0.41 → 7.0.43

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

@@ -1,54 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-/**
- * Small toggle used in the query browser to mock offline/online behavior.
- */
-const NetworkToggleButton = ({
-  isOffline,
-  onToggle
-}) => {
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
-    "sentry-label": "ignore devtools network toggle button",
-    style: [styles.button, isOffline && styles.offlineButton],
-    onPress: onToggle,
-    activeOpacity: 0.7,
-    accessibilityLabel: isOffline ? "Unset offline mocking behavior" : "Mock offline behavior",
-    accessibilityRole: "button",
-    accessibilityState: {
-      selected: isOffline
-    },
-    children: isOffline ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
-      size: 16,
-      color: _sharedUi.buoyColors.error,
-      strokeWidth: 2
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.Wifi, {
-      size: 16,
-      color: _sharedUi.buoyColors.success,
-      strokeWidth: 2
-    })
-  });
-};
-const styles = _reactNative.StyleSheet.create({
-  button: {
-    width: 32,
-    height: 32,
-    borderRadius: 6,
-    backgroundColor: "rgba(16, 185, 129, 0.1)",
-    justifyContent: "center",
-    alignItems: "center",
-    borderWidth: 1,
-    borderColor: "rgba(16, 185, 129, 0.2)"
-  },
-  offlineButton: {
-    backgroundColor: "rgba(239, 68, 68, 0.1)",
-    borderColor: "rgba(239, 68, 68, 0.2)"
-  }
-});
-var _default = exports.default = NetworkToggleButton;
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const NetworkToggleButton=({isOffline:e,onToggle:t})=>{return(0,_jsxRuntime.jsx)(_reactNative.TouchableOpacity,{"sentry-label":"ignore devtools network toggle button",style:[styles.button,e&&styles.offlineButton],onPress:t,activeOpacity:.7,accessibilityLabel:e?"Unset offline mocking behavior":"Mock offline behavior",accessibilityRole:"button",accessibilityState:{selected:e},children:e?(0,_jsxRuntime.jsx)(_sharedUi.Wifi,{size:16,color:_sharedUi.buoyColors.error,strokeWidth:2}):(0,_jsxRuntime.jsx)(_sharedUi.Wifi,{size:16,color:_sharedUi.buoyColors.success,strokeWidth:2})})};const styles=_reactNative.StyleSheet.create({button:{width:32,height:32,borderRadius:6,backgroundColor:"rgba(16, 185, 129, 0.1)",justifyContent:"center",alignItems:"center",borderWidth:1,borderColor:"rgba(16, 185, 129, 0.2)"},offlineButton:{backgroundColor:"rgba(239, 68, 68, 0.1)",borderColor:"rgba(239, 68, 68, 0.2)"}});var _default=exports.default=NetworkToggleButton;

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

@@ -1,124 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = QueryActions;
-var _reactQuery = require("@tanstack/react-query");
-var _ActionButton = _interopRequireDefault(require("./ActionButton"));
-var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
-var _triggerLoading = _interopRequireDefault(require("../../utils/actions/triggerLoading"));
-var _refetch = _interopRequireDefault(require("../../utils/actions/refetch"));
-var _reset = _interopRequireDefault(require("../../utils/actions/reset"));
-var _remove = _interopRequireDefault(require("../../utils/actions/remove"));
-var _invalidate = _interopRequireDefault(require("../../utils/actions/invalidate"));
-var _triggerError = _interopRequireDefault(require("../../utils/actions/triggerError"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Action panel rendered in query detail views providing mutation simulation and removal controls.
- */
-function QueryActions({
-  query,
-  setSelectedQuery
-}) {
-  const queryClient = (0, _reactQuery.useQueryClient)();
-  if (query === undefined) {
-    return null;
-  }
-  const queryStatus = query.state.status;
-  const isFetching = (0, _getQueryStatusLabel.getQueryStatusLabel)(query) === "fetching";
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.container,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sectionLabel,
-        children: "Actions"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.buttonsRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: isFetching,
-          onClick: () => (0, _refetch.default)({
-            query
-          }),
-          variant: "refetch",
-          text: "Refetch"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: queryStatus === "pending",
-          onClick: () => (0, _invalidate.default)({
-            query,
-            queryClient
-          }),
-          variant: "invalidate",
-          text: "Invalidate"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: queryStatus === "pending",
-          onClick: () => (0, _reset.default)({
-            queryClient,
-            query
-          }),
-          variant: "reset",
-          text: "Reset"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: isFetching,
-          onClick: () => {
-            (0, _remove.default)({
-              queryClient,
-              query
-            });
-            setSelectedQuery(undefined);
-          },
-          variant: "remove",
-          text: "Remove"
-        })]
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.section,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.sectionLabel,
-        children: "Triggers"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-        style: styles.buttonsRow,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: false,
-          onClick: () => (0, _triggerLoading.default)({
-            query
-          }),
-          variant: "triggerLoading",
-          text: query.state.fetchStatus === "fetching" ? "Restore Loading" : "Trigger Loading"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.default, {
-          disabled: queryStatus === "pending",
-          onClick: () => (0, _triggerError.default)({
-            query,
-            queryClient
-          }),
-          variant: "triggerError",
-          text: queryStatus === "error" ? "Restore Error" : "Trigger Error"
-        })]
-      })]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    gap: 16
-  },
-  section: {
-    gap: 8
-  },
-  sectionLabel: {
-    fontSize: 11,
-    fontWeight: "600",
-    color: _sharedUi.night.color.textTertiary,
-    textTransform: "uppercase",
-    letterSpacing: 0.5
-  },
-  buttonsRow: {
-    flexDirection: "row",
-    flexWrap: "wrap",
-    gap: 8
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=QueryActions;var _reactQuery=require("@tanstack/react-query");var _ActionButton=_interopRequireDefault(require("./ActionButton"));var _getQueryStatusLabel=require("../../utils/getQueryStatusLabel");var _triggerLoading=_interopRequireDefault(require("../../utils/actions/triggerLoading"));var _refetch=_interopRequireDefault(require("../../utils/actions/refetch"));var _reset=_interopRequireDefault(require("../../utils/actions/reset"));var _remove=_interopRequireDefault(require("../../utils/actions/remove"));var _invalidate=_interopRequireDefault(require("../../utils/actions/invalidate"));var _triggerError=_interopRequireDefault(require("../../utils/actions/triggerError"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function QueryActions({query:e,setSelectedQuery:a}){const t=(0,_reactQuery.useQueryClient)();if(e===void 0){return null}const r=e.state.status;const i=(0,_getQueryStatusLabel.getQueryStatusLabel)(e)==="fetching";return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.container,children:[(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionLabel,children:"Actions"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.buttonsRow,children:[(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:i,onClick:()=>(0,_refetch.default)({query:e}),variant:"refetch",text:"Refetch"}),(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:r==="pending",onClick:()=>(0,_invalidate.default)({query:e,queryClient:t}),variant:"invalidate",text:"Invalidate"}),(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:r==="pending",onClick:()=>(0,_reset.default)({queryClient:t,query:e}),variant:"reset",text:"Reset"}),(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:i,onClick:()=>{(0,_remove.default)({queryClient:t,query:e});a(void 0)},variant:"remove",text:"Remove"})]})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.section,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.sectionLabel,children:"Triggers"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.buttonsRow,children:[(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:false,onClick:()=>(0,_triggerLoading.default)({query:e}),variant:"triggerLoading",text:e.state.fetchStatus==="fetching"?"Restore Loading":"Trigger Loading"}),(0,_jsxRuntime.jsx)(_ActionButton.default,{disabled:r==="pending",onClick:()=>(0,_triggerError.default)({query:e,queryClient:t}),variant:"triggerError",text:r==="error"?"Restore Error":"Trigger Error"})]})]})]})}const styles=_reactNative.StyleSheet.create({container:{gap:16},section:{gap:8},sectionLabel:{fontSize:11,fontWeight:"600",color:_sharedUi.night.color.textTertiary,textTransform:"uppercase",letterSpacing:.5},buttonsRow:{flexDirection:"row",flexWrap:"wrap",gap:8}});

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

@@ -1,181 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = QueryBrowser;
-var _react = require("react");
-var _reactNative = require("react-native");
-var _QueryRow = _interopRequireDefault(require("./QueryRow"));
-var _useAllQueries = _interopRequireDefault(require("../../hooks/useAllQueries"));
-var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Scrollable list view of cached queries with filtering support and selection handling.
- */
-function QueryBrowser({
-  selectedQuery,
-  onQuerySelect,
-  activeFilter,
-  emptyStateMessage,
-  emptyState,
-  contentContainerStyle,
-  queries: externalQueries,
-  searchText = "",
-  ignoredPatterns = new Set(),
-  includedPatterns = new Set()
-}) {
-  // Holds all queries using the working hook, or use external queries if provided
-  const internalQueries = (0, _useAllQueries.default)();
-  const allQueries = externalQueries ?? internalQueries;
-
-  // Filter queries based on active filter, search text, and ignored patterns
-  const filteredQueries = (0, _react.useMemo)(() => {
-    let filtered = allQueries;
-
-    // Apply status filter
-    if (activeFilter) {
-      filtered = filtered.filter(query => {
-        const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
-        return status === activeFilter;
-      });
-    }
-
-    // Apply search filter on query keys
-    if (searchText) {
-      const searchLower = searchText.toLowerCase();
-      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 keyString.includes(searchLower);
-      });
-    }
-
-    // Apply included patterns filter (show ONLY queries matching any pattern)
-    // This acts as a whitelist - if any include patterns exist, query must match at least one
-    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 true if query matches ANY included pattern
-        return Array.from(includedPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
-      });
-    }
-
-    // Apply ignored patterns filter (hide queries matching any pattern)
-    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 true if NO patterns match (i.e., keep the query)
-        return !Array.from(ignoredPatterns).some(pattern => keyString.includes(pattern.toLowerCase()));
-      });
-    }
-
-    // Sort by most recently updated (dataUpdatedAt descending)
-    filtered.sort((a, b) => {
-      const aTime = a.state.dataUpdatedAt || 0;
-      const bTime = b.state.dataUpdatedAt || 0;
-      return bTime - aTime; // Most recent first
-    });
-    return filtered;
-  }, [allQueries, activeFilter, searchText, includedPatterns, ignoredPatterns]);
-
-  // Function to handle query selection with stable comparison
-  const handleQuerySelect = (0, _react.useCallback)(query => {
-    // Compare queries by their queryKey and queryHash for stable selection
-    const isCurrentlySelected = selectedQuery?.queryHash === query.queryHash;
-    if (isCurrentlySelected) {
-      onQuerySelect(undefined); // Deselect
-      return;
-    }
-    onQuerySelect(query);
-  }, [selectedQuery?.queryHash, onQuerySelect]);
-  if (filteredQueries.length === 0) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.ToolEmptyState, {
-      testID: "buoy-rq-empty",
-      ...(emptyState ?? {
-        otto: "empty",
-        title: "No queries found",
-        message: emptyStateMessage || (activeFilter ? `No ${activeFilter} queries found` : "No queries found")
-      })
-    });
-  }
-  return (
-    /*#__PURE__*/
-    // Virtualized list with STABLE keys (queryHash). The previous
-    // ScrollView + map mounted every row, and its key included
-    // dataUpdatedAt/fetchStatus so rows REMOUNTED on each update — at 300
-    // seeded queries that measured 168% CPU with 546 row renders during a
-    // 5s idle dwell (tool-bench 2026-07-06). TanStack Query objects are
-    // mutable with stable identity, so `stateSig` carries the changing
-    // fields for the row's memo comparison.
-    (0, _jsxRuntime.jsx)(_reactNative.FlatList, {
-      testID: "buoy-rq-query-list",
-      style: styles.listWrapper,
-      contentContainerStyle: contentContainerStyle || styles.listContent,
-      data: filteredQueries,
-      keyExtractor: queryKeyExtractor,
-      renderItem: ({
-        item: query
-      }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryRow.default, {
-        query: query,
-        stateSig: computeQueryStateSig(query),
-        isSelected: selectedQuery?.queryHash === query.queryHash,
-        onSelect: handleQuerySelect
-      }),
-      showsVerticalScrollIndicator: true,
-      ..._sharedUi.EVENT_LIST_PRESET
-    })
-  );
-}
-const queryKeyExtractor = q => q.queryHash;
-
-/** The row-visible slice of a query's mutable state, as a comparable
- * string — drives QueryRow's memo (see comment above). */
-function computeQueryStateSig(q) {
-  let observers = 0;
-  let stale = false;
-  try {
-    observers = q.getObserversCount();
-    stale = q.isStale();
-  } catch {
-    // defensive: state reads on a disposed query must not break the list
-  }
-  return `${q.state.dataUpdatedAt}|${q.state.fetchStatus}|${q.state.status}|${observers}|${stale}`;
-}
-const styles = _reactNative.StyleSheet.create({
-  listWrapper: {
-    flexGrow: 1
-  },
-  listContent: {
-    paddingBottom: 16,
-    // Transparent so JsModal's ToolBackground shows through (the modal paints opaque base beneath it).
-    backgroundColor: "transparent"
-  },
-  emptyContainer: {
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
-    padding: 32,
-    backgroundColor: _sharedUi.night.color.surface,
-    margin: 16,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.border
-  },
-  emptyText: {
-    color: _sharedUi.night.color.textTertiary,
-    fontSize: 14,
-    textAlign: "center",
-    fontFamily: _sharedUi.monoFont,
-    letterSpacing: 0.5
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=QueryBrowser;var _react=require("react");var _reactNative=require("react-native");var _QueryRow=_interopRequireDefault(require("./QueryRow"));var _useAllQueries=_interopRequireDefault(require("../../hooks/useAllQueries"));var _getQueryStatusLabel=require("../../utils/getQueryStatusLabel");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(r){return r&&r.__esModule?r:{default:r}}function QueryBrowser({selectedQuery:r,onQuerySelect:u,activeFilter:a,emptyStateMessage:S,emptyState:m,contentContainerStyle:g,queries:p,searchText:i="",ignoredPatterns:l=new Set,includedPatterns:y=new Set}){const q=(0,_useAllQueries.default)();const f=p??q;const d=(0,_react.useMemo)(()=>{let e=f;if(a){e=e.filter(t=>{const o=(0,_getQueryStatusLabel.getQueryStatusLabel)(t);return o===a})}if(i){const t=i.toLowerCase();e=e.filter(o=>{if(!o?.queryKey)return false;const n=Array.isArray(o.queryKey)?o.queryKey:[o.queryKey];const s=n.filter(c=>c!=null).map(c=>String(c)).join(" ").toLowerCase();return s.includes(t)})}if(y.size>0){e=e.filter(t=>{if(!t?.queryKey)return false;const o=Array.isArray(t.queryKey)?t.queryKey:[t.queryKey];const n=o.filter(s=>s!=null).map(s=>String(s)).join(" ").toLowerCase();return Array.from(y).some(s=>n.includes(s.toLowerCase()))})}if(l.size>0){e=e.filter(t=>{if(!t?.queryKey)return true;const o=Array.isArray(t.queryKey)?t.queryKey:[t.queryKey];const n=o.filter(s=>s!=null).map(s=>String(s)).join(" ").toLowerCase();return!Array.from(l).some(s=>n.includes(s.toLowerCase()))})}e.sort((t,o)=>{const n=t.state.dataUpdatedAt||0;const s=o.state.dataUpdatedAt||0;return s-n});return e},[f,a,i,y,l]);const h=(0,_react.useCallback)(e=>{const t=r?.queryHash===e.queryHash;if(t){u(void 0);return}u(e)},[r?.queryHash,u]);if(d.length===0){return(0,_jsxRuntime.jsx)(_sharedUi.ToolEmptyState,{testID:"buoy-rq-empty",...m??{otto:"empty",title:"No queries found",message:S||(a?`No ${a} queries found`:"No queries found")}})}return(0,_jsxRuntime.jsx)(_reactNative.FlatList,{testID:"buoy-rq-query-list",style:styles.listWrapper,contentContainerStyle:g||styles.listContent,data:d,keyExtractor:queryKeyExtractor,renderItem:({item:e})=>(0,_jsxRuntime.jsx)(_QueryRow.default,{query:e,stateSig:computeQueryStateSig(e),isSelected:r?.queryHash===e.queryHash,onSelect:h}),showsVerticalScrollIndicator:true,..._sharedUi.EVENT_LIST_PRESET})}const queryKeyExtractor=r=>r.queryHash;function computeQueryStateSig(r){let u=0;let a=false;try{u=r.getObserversCount();a=r.isStale()}catch{}return`${r.state.dataUpdatedAt}|${r.state.fetchStatus}|${r.state.status}|${u}|${a}`}const styles=_reactNative.StyleSheet.create({listWrapper:{flexGrow:1},listContent:{paddingBottom:16,backgroundColor:"transparent"},emptyContainer:{flex:1,justifyContent:"center",alignItems:"center",padding:32,backgroundColor:_sharedUi.night.color.surface,margin:16,borderRadius:8,borderWidth:1,borderColor:_sharedUi.night.color.border},emptyText:{color:_sharedUi.night.color.textTertiary,fontSize:14,textAlign:"center",fontFamily:_sharedUi.monoFont,letterSpacing:.5}});

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

@@ -1,141 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = QueryDetails;
-var _QueryDetailsChip = _interopRequireDefault(require("./QueryDetailsChip"));
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-/**
- * Renders the primary metadata summary for a selected query, including fetch status and timings.
- */
-function QueryDetails({
-  query
-}) {
-  if (query === undefined) {
-    return null;
-  }
-  // Convert the timestamp to a Date object and format it
-  const lastUpdated = new Date(query.state.dataUpdatedAt).toLocaleTimeString("en-US", {
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
-    hour12: true
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-    style: styles.minWidth,
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      style: styles.headerText,
-      children: "Query Details"
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        "sentry-label": "ignore devtools query details scroll",
-        horizontal: true,
-        style: styles.flexOne,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-          testID: "buoy-rq-detail-key",
-          style: styles.queryKeyText,
-          children: (0, _sharedUi.displayValue)(query.queryKey, true)
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_QueryDetailsChip.default, {
-        query: query,
-        testID: "buoy-rq-detail-status"
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.labelText,
-        children: "Observers:"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        testID: "buoy-rq-detail-observers",
-        style: styles.valueText,
-        children: `${query.getObserversCount()}`
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
-      style: styles.row,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        style: styles.labelText,
-        children: "Last Updated:"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-        testID: "buoy-rq-detail-updated",
-        style: styles.valueText,
-        children: `${lastUpdated}`
-      })]
-    })]
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  minWidth: {
-    minWidth: 200,
-    backgroundColor: _sharedUi.night.color.surface,
-    borderRadius: 6,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accent + "4D",
-    overflow: "hidden",
-    shadowColor: _sharedUi.night.color.accent,
-    shadowOffset: {
-      width: 0,
-      height: 0
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 6
-  },
-  headerText: {
-    backgroundColor: _sharedUi.night.color.accent + "15",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    fontWeight: "600",
-    fontSize: 12,
-    color: _sharedUi.night.color.accent,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.night.color.accent + "33",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: _sharedUi.monoFont
-  },
-  row: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 12,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: _sharedUi.night.color.separator
-  },
-  flexOne: {
-    flex: 1,
-    marginRight: 8
-  },
-  queryKeyText: {
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    fontFamily: _sharedUi.monoFont,
-    lineHeight: 18,
-    flexShrink: 1,
-    backgroundColor: _sharedUi.night.color.accent + "15",
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderRadius: 4,
-    borderWidth: 1,
-    borderColor: _sharedUi.night.color.accent + "4D"
-  },
-  labelText: {
-    fontSize: 10,
-    color: _sharedUi.night.color.textSecondary,
-    fontWeight: "600",
-    letterSpacing: 0.5,
-    textTransform: "uppercase",
-    fontFamily: _sharedUi.monoFont
-  },
-  valueText: {
-    fontSize: 12,
-    color: _sharedUi.night.color.text,
-    fontWeight: "500",
-    fontVariant: ["tabular-nums"],
-    fontFamily: _sharedUi.monoFont
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=QueryDetails;var _QueryDetailsChip=_interopRequireDefault(require("./QueryDetailsChip"));var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}function QueryDetails({query:e}){if(e===void 0){return null}const t=new Date(e.state.dataUpdatedAt).toLocaleTimeString("en-US",{hour:"2-digit",minute:"2-digit",second:"2-digit",hour12:true});return(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.minWidth,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.headerText,children:"Query Details"}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[(0,_jsxRuntime.jsx)(_reactNative.ScrollView,{"sentry-label":"ignore devtools query details scroll",horizontal:true,style:styles.flexOne,children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-rq-detail-key",style:styles.queryKeyText,children:(0,_sharedUi.displayValue)(e.queryKey,true)})}),(0,_jsxRuntime.jsx)(_QueryDetailsChip.default,{query:e,testID:"buoy-rq-detail-status"})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.labelText,children:"Observers:"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-rq-detail-observers",style:styles.valueText,children:`${e.getObserversCount()}`})]}),(0,_jsxRuntime.jsxs)(_reactNative.View,{style:styles.row,children:[(0,_jsxRuntime.jsx)(_reactNative.Text,{style:styles.labelText,children:"Last Updated:"}),(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:"buoy-rq-detail-updated",style:styles.valueText,children:`${t}`})]})]})}const styles=_reactNative.StyleSheet.create({minWidth:{minWidth:200,backgroundColor:_sharedUi.night.color.surface,borderRadius:6,borderWidth:1,borderColor:_sharedUi.night.color.accent+"4D",overflow:"hidden",shadowColor:_sharedUi.night.color.accent,shadowOffset:{width:0,height:0},shadowOpacity:.1,shadowRadius:6},headerText:{backgroundColor:_sharedUi.night.color.accent+"15",paddingHorizontal:12,paddingVertical:10,fontWeight:"600",fontSize:12,color:_sharedUi.night.color.accent,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.accent+"33",letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont},row:{flexDirection:"row",justifyContent:"space-between",alignItems:"center",paddingHorizontal:12,paddingVertical:10,borderBottomWidth:1,borderBottomColor:_sharedUi.night.color.separator},flexOne:{flex:1,marginRight:8},queryKeyText:{fontSize:12,color:_sharedUi.night.color.text,fontFamily:_sharedUi.monoFont,lineHeight:18,flexShrink:1,backgroundColor:_sharedUi.night.color.accent+"15",paddingHorizontal:8,paddingVertical:4,borderRadius:4,borderWidth:1,borderColor:_sharedUi.night.color.accent+"4D"},labelText:{fontSize:10,color:_sharedUi.night.color.textSecondary,fontWeight:"600",letterSpacing:.5,textTransform:"uppercase",fontFamily:_sharedUi.monoFont},valueText:{fontSize:12,color:_sharedUi.night.color.text,fontWeight:"500",fontVariant:["tabular-nums"],fontFamily:_sharedUi.monoFont}});

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

@@ -1,78 +1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = QueryDetailsChip;
-var _getQueryStatusLabel = require("../../utils/getQueryStatusLabel");
-var _reactNative = require("react-native");
-var _sharedUi = require("@buoy-gg/shared-ui");
-var _jsxRuntime = require("react/jsx-runtime");
-const backgroundColors = {
-  fresh: _sharedUi.buoyColors.success + "15",
-  stale: _sharedUi.buoyColors.warning + "15",
-  fetching: _sharedUi.buoyColors.primary + "15",
-  paused: _sharedUi.buoyColors.textMuted + "1A",
-  noObserver: _sharedUi.buoyColors.textMuted + "1A",
-  error: _sharedUi.buoyColors.error + "15",
-  inactive: _sharedUi.buoyColors.textMuted + "1A"
-};
-const borderColors = {
-  fresh: _sharedUi.buoyColors.success + "33",
-  stale: _sharedUi.buoyColors.warning + "33",
-  fetching: _sharedUi.buoyColors.primary + "33",
-  paused: _sharedUi.buoyColors.textMuted + "33",
-  noObserver: _sharedUi.buoyColors.textMuted + "33",
-  error: _sharedUi.buoyColors.error + "33",
-  inactive: _sharedUi.buoyColors.textMuted + "33"
-};
-const textColors = {
-  fresh: _sharedUi.buoyColors.success,
-  stale: _sharedUi.buoyColors.warning,
-  fetching: _sharedUi.buoyColors.primary,
-  paused: _sharedUi.buoyColors.textMuted,
-  noObserver: _sharedUi.buoyColors.textMuted,
-  error: _sharedUi.buoyColors.error,
-  inactive: _sharedUi.buoyColors.textMuted
-};
-/**
- * Chip component used to display small query metadata values (status, observers, etc.).
- */
-function QueryDetailsChip({
-  query,
-  testID
-}) {
-  const status = (0, _getQueryStatusLabel.getQueryStatusLabel)(query);
-  const backgroundColor = backgroundColors[status];
-  const borderColor = borderColors[status];
-  const textColor = textColors[status];
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-    style: [styles.container, {
-      backgroundColor,
-      borderColor
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
-      testID: testID,
-      style: [styles.text, {
-        color: textColor
-      }],
-      children: status
-    })
-  });
-}
-const styles = _reactNative.StyleSheet.create({
-  container: {
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-    borderWidth: 1,
-    borderRadius: 6,
-    alignSelf: "flex-start"
-  },
-  text: {
-    fontSize: 11,
-    fontWeight: "600",
-    textTransform: "uppercase",
-    letterSpacing: 0.5,
-    fontFamily: _sharedUi.monoFont
-  }
-});
+"use strict";Object.defineProperty(exports,"__esModule",{value:true});exports.default=QueryDetailsChip;var _getQueryStatusLabel=require("../../utils/getQueryStatusLabel");var _reactNative=require("react-native");var _sharedUi=require("@buoy-gg/shared-ui");var _jsxRuntime=require("react/jsx-runtime");const backgroundColors={fresh:_sharedUi.buoyColors.success+"15",stale:_sharedUi.buoyColors.warning+"15",fetching:_sharedUi.buoyColors.primary+"15",paused:_sharedUi.buoyColors.textMuted+"1A",noObserver:_sharedUi.buoyColors.textMuted+"1A",error:_sharedUi.buoyColors.error+"15",inactive:_sharedUi.buoyColors.textMuted+"1A"};const borderColors={fresh:_sharedUi.buoyColors.success+"33",stale:_sharedUi.buoyColors.warning+"33",fetching:_sharedUi.buoyColors.primary+"33",paused:_sharedUi.buoyColors.textMuted+"33",noObserver:_sharedUi.buoyColors.textMuted+"33",error:_sharedUi.buoyColors.error+"33",inactive:_sharedUi.buoyColors.textMuted+"33"};const textColors={fresh:_sharedUi.buoyColors.success,stale:_sharedUi.buoyColors.warning,fetching:_sharedUi.buoyColors.primary,paused:_sharedUi.buoyColors.textMuted,noObserver:_sharedUi.buoyColors.textMuted,error:_sharedUi.buoyColors.error,inactive:_sharedUi.buoyColors.textMuted};function QueryDetailsChip({query:o,testID:r}){const e=(0,_getQueryStatusLabel.getQueryStatusLabel)(o);const t=backgroundColors[e];const s=borderColors[e];const u=textColors[e];return(0,_jsxRuntime.jsx)(_reactNative.View,{style:[styles.container,{backgroundColor:t,borderColor:s}],children:(0,_jsxRuntime.jsx)(_reactNative.Text,{testID:r,style:[styles.text,{color:u}],children:e})})}const styles=_reactNative.StyleSheet.create({container:{paddingHorizontal:8,paddingVertical:4,borderWidth:1,borderRadius:6,alignSelf:"flex-start"},text:{fontSize:11,fontWeight:"600",textTransform:"uppercase",letterSpacing:.5,fontFamily:_sharedUi.monoFont}});