@tanstack/react-query-devtools 4.0.0 → 4.0.5

package/build/cjs/devtools.js

@@ -1,822 +0,0 @@
-/**
- * react-query-devtools
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var React = require('react');
-var index = require('use-sync-external-store/shim/index');
-var reactQuery = require('@tanstack/react-query');
-var matchSorterUtils = require('@tanstack/match-sorter-utils');
-var useLocalStorage = require('./useLocalStorage.js');
-var utils = require('./utils.js');
-var styledComponents = require('./styledComponents.js');
-var theme = require('./theme.js');
-var Explorer = require('./Explorer.js');
-var Logo = require('./Logo.js');
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n["default"] = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-
-const isServer = typeof window === 'undefined';
-function ReactQueryDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = 'bottom-left',
-  containerElement: Container = 'aside',
-  context,
-  styleNonce
-}) {
-  const rootRef = React__namespace.useRef(null);
-  const panelRef = React__namespace.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage["default"]('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactQueryDevtoolsHeight', null);
-  const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
-  const [isResizing, setIsResizing] = React__namespace.useState(false);
-  const isMounted = utils.useIsMounted();
-
-  const handleDragStart = (panelElement, startEvent) => {
-    var _panelElement$getBoun;
-
-    if (startEvent.button !== 0) return; // Only allow left click for drag
-
-    setIsResizing(true);
-    const dragInfo = {
-      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
-      pageY: startEvent.pageY
-    };
-
-    const run = moveEvent => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo.originalHeight + delta;
-      setDevtoolsHeight(newHeight);
-
-      if (newHeight < 70) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-
-    const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener('mousemove', run);
-      document.removeEventListener('mouseUp', unsub);
-    };
-
-    document.addEventListener('mousemove', run);
-    document.addEventListener('mouseup', unsub);
-  };
-
-  React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
-
-  React__namespace.useEffect(() => {
-    const ref = panelRef.current;
-
-    if (ref) {
-      const handlePanelTransitionStart = () => {
-        if (isResolvedOpen) {
-          ref.style.visibility = 'visible';
-        }
-      };
-
-      const handlePanelTransitionEnd = () => {
-        if (!isResolvedOpen) {
-          ref.style.visibility = 'hidden';
-        }
-      };
-
-      ref.addEventListener('transitionstart', handlePanelTransitionStart);
-      ref.addEventListener('transitionend', handlePanelTransitionEnd);
-      return () => {
-        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-      };
-    }
-  }, [isResolvedOpen]);
-  React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    if (isResolvedOpen) {
-      var _rootRef$current, _rootRef$current$pare;
-
-      const previousValue = (_rootRef$current = rootRef.current) == null ? void 0 : (_rootRef$current$pare = _rootRef$current.parentElement) == null ? void 0 : _rootRef$current$pare.style.paddingBottom;
-
-      const run = () => {
-        var _panelRef$current, _rootRef$current2;
-
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
-        if ((_rootRef$current2 = rootRef.current) != null && _rootRef$current2.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = containerHeight + "px";
-        }
-      };
-
-      run();
-
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run);
-        return () => {
-          var _rootRef$current3;
-
-          window.removeEventListener('resize', run);
-
-          if ((_rootRef$current3 = rootRef.current) != null && _rootRef$current3.parentElement && typeof previousValue === 'string') {
-            rootRef.current.parentElement.style.paddingBottom = previousValue;
-          }
-        };
-      }
-    }
-  }, [isResolvedOpen]);
-  const {
-    style: panelStyle = {},
-    ...otherPanelProps
-  } = panelProps;
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps;
-  const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick,
-    ...otherToggleButtonProps
-  } = toggleButtonProps; // Do not render on the server
-
-  if (!isMounted()) return null;
-  return /*#__PURE__*/React__namespace.createElement(Container, {
-    ref: rootRef,
-    className: "ReactQueryDevtools",
-    "aria-label": "React Query Devtools"
-  }, /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
-    theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers["extends"]({
-    ref: panelRef,
-    context: context,
-    styleNonce: styleNonce
-  }, otherPanelProps, {
-    style: {
-      position: 'fixed',
-      bottom: '0',
-      right: '0',
-      zIndex: 99999,
-      width: '100%',
-      height: devtoolsHeight != null ? devtoolsHeight : 500,
-      maxHeight: '90%',
-      boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: "1px solid " + theme.defaultTheme.gray,
-      transformOrigin: 'top',
-      // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden',
-      ...panelStyle,
-      ...(isResizing ? {
-        transition: "none"
-      } : {
-        transition: "all .2s ease"
-      }),
-      ...(isResolvedOpen ? {
-        opacity: 1,
-        pointerEvents: 'all',
-        transform: "translateY(0) scale(1)"
-      } : {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: "translateY(15px) scale(1.02)"
-      })
-    },
-    isOpen: isResolvedOpen,
-    setIsOpen: setIsOpen,
-    handleDragStart: e => handleDragStart(panelRef.current, e)
-  })), isResolvedOpen ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers["extends"]({
-    type: "button",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "true"
-  }, otherCloseButtonProps, {
-    onClick: e => {
-      setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
-    },
-    style: {
-      position: 'fixed',
-      zIndex: 99999,
-      margin: '.5em',
-      bottom: 0,
-      ...(position === 'top-right' ? {
-        right: '0'
-      } : position === 'top-left' ? {
-        left: '0'
-      } : position === 'bottom-right' ? {
-        right: '0'
-      } : {
-        left: '0'
-      }),
-      ...closeButtonStyle
-    }
-  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers["extends"]({
-    type: "button"
-  }, otherToggleButtonProps, {
-    "aria-label": "Open React Query Devtools",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "false",
-    onClick: e => {
-      setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
-    },
-    style: {
-      background: 'none',
-      border: 0,
-      padding: 0,
-      position: 'fixed',
-      zIndex: 99999,
-      display: 'inline-flex',
-      fontSize: '1.5em',
-      margin: '.5em',
-      cursor: 'pointer',
-      width: 'fit-content',
-      ...(position === 'top-right' ? {
-        top: '0',
-        right: '0'
-      } : position === 'top-left' ? {
-        top: '0',
-        left: '0'
-      } : position === 'bottom-right' ? {
-        bottom: '0',
-        right: '0'
-      } : {
-        bottom: '0',
-        left: '0'
-      }),
-      ...toggleButtonStyle
-    }
-  }), /*#__PURE__*/React__namespace.createElement(Logo["default"], {
-    "aria-hidden": true
-  })) : null);
-}
-
-const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
-
-const sortFns = {
-  'Status > Last Updated': (a, b) => {
-    var _sortFns$LastUpdated;
-
-    return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
-  },
-  'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
-  'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
-};
-
-const useSubscribeToQueryCache = (queryCache, getSnapshot) => {
-  return index.useSyncExternalStore(React__namespace.useCallback(onStoreChange => queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange)), [queryCache]), getSnapshot, getSnapshot);
-};
-
-const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
-  const {
-    isOpen = true,
-    styleNonce,
-    setIsOpen,
-    handleDragStart,
-    context,
-    ...panelProps
-  } = props;
-  const queryClient = reactQuery.useQueryClient({
-    context
-  });
-  const queryCache = queryClient.getQueryCache();
-  const [sort, setSort] = useLocalStorage["default"]('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
-  const [filter, setFilter] = useLocalStorage["default"]('reactQueryDevtoolsFilter', '');
-  const [sortDesc, setSortDesc] = useLocalStorage["default"]('reactQueryDevtoolsSortDesc', false);
-  const sortFn = React__namespace.useMemo(() => sortFns[sort], [sort]);
-  React__namespace[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
-    if (!sortFn) {
-      setSort(Object.keys(sortFns)[0]);
-    }
-  }, [setSort, sortFn]);
-  const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length);
-  const [activeQueryHash, setActiveQueryHash] = useLocalStorage["default"]('reactQueryDevtoolsActiveQueryHash', '');
-  const queries = React__namespace.useMemo(() => {
-    const unsortedQueries = queryCache.getAll();
-    const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : [];
-
-    if (sortDesc) {
-      sorted.reverse();
-    }
-
-    if (!filter) {
-      return sorted;
-    }
-
-    let ranked = sorted.map(item => [item, matchSorterUtils.rankItem(item.queryHash, filter)]);
-    ranked = ranked.filter(d => d[1].passed);
-    ranked = ranked.sort((a, b) => matchSorterUtils.compareItems(a[1], b[1]));
-    return ranked.map(d => d[0]);
-  }, [sortDesc, sortFn, filter, queriesCount, queryCache]);
-  const [isMockOffline, setMockOffline] = React__namespace.useState(false);
-  return /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
-    theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Panel, _rollupPluginBabelHelpers["extends"]({
-    ref: ref,
-    className: "ReactQueryDevtoolsPanel",
-    "aria-label": "React Query Devtools Panel",
-    id: "ReactQueryDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React__namespace.createElement("style", {
-    nonce: styleNonce,
-    dangerouslySetInnerHTML: {
-      __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.defaultTheme.backgroundAlt + ";\n            }\n          "
-    }
-  }), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '4px',
-      marginBottom: '-4px',
-      cursor: 'row-resize',
-      zIndex: 100000
-    },
-    onMouseDown: handleDragStart
-  }), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      flex: '1 1 500px',
-      minHeight: '40%',
-      maxHeight: '100%',
-      overflow: 'auto',
-      borderRight: "1px solid " + theme.defaultTheme.grayAlt,
-      display: isOpen ? 'flex' : 'none',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      display: 'flex',
-      justifyContent: 'space-between',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("button", {
-    type: "button",
-    "aria-label": "Close React Query Devtools",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "true",
-    onClick: () => setIsOpen(false),
-    style: {
-      display: 'inline-flex',
-      background: 'none',
-      border: 0,
-      padding: 0,
-      marginRight: '.5em',
-      cursor: 'pointer'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(Logo["default"], {
-    "aria-hidden": true
-  })), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      display: 'flex',
-      flexDirection: 'column'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(QueryStatusCount, {
-    queryCache: queryCache
-  }), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Input, {
-    placeholder: "Filter",
-    "aria-label": "Filter by queryhash",
-    value: filter != null ? filter : '',
-    onChange: e => setFilter(e.target.value),
-    onKeyDown: e => {
-      if (e.key === 'Escape') setFilter('');
-    },
-    style: {
-      flex: '1',
-      marginRight: '.5em',
-      width: '100%'
-    }
-  }), !filter ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
-    "aria-label": "Sort queries",
-    value: sort,
-    onChange: e => setSort(e.target.value),
-    style: {
-      flex: '1',
-      minWidth: 75,
-      marginRight: '.5em'
-    }
-  }, Object.keys(sortFns).map(key => /*#__PURE__*/React__namespace.createElement("option", {
-    key: key,
-    value: key
-  }, "Sort by ", key))), /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => setSortDesc(old => !old),
-    style: {
-      padding: '.3em .4em',
-      marginRight: '.5em'
-    }
-  }, sortDesc ? '⬇ Desc' : '⬆ Asc'), /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => {
-      if (isMockOffline) {
-        reactQuery.onlineManager.setOnline(undefined);
-        setMockOffline(false);
-        window.dispatchEvent(new Event('online'));
-      } else {
-        reactQuery.onlineManager.setOnline(false);
-        setMockOffline(true);
-      }
-    },
-    "aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
-    title: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
-    style: {
-      padding: '0',
-      height: '2em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "2em",
-    height: "2em",
-    viewBox: "0 0 24 24",
-    stroke: isMockOffline ? theme.defaultTheme.danger : 'currentColor',
-    fill: "none"
-  }, isMockOffline ? /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: "12",
-    y1: "18",
-    x2: "12.01",
-    y2: "18"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M9.172 15.172a4 4 0 0 1 5.656 0"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374"
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: "3",
-    y1: "3",
-    x2: "21",
-    y2: "21"
-  })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("path", {
-    stroke: "none",
-    d: "M0 0h24v24H0z",
-    fill: "none"
-  }), /*#__PURE__*/React__namespace.createElement("line", {
-    x1: "12",
-    y1: "18",
-    x2: "12.01",
-    y2: "18"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M9.172 15.172a4 4 0 0 1 5.656 0"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.343 12.343a8 8 0 0 1 11.314 0"
-  }), /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
-  }))))) : null))), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      overflowY: 'auto',
-      flex: '1'
-    }
-  }, queries.map(query => {
-    return /*#__PURE__*/React__namespace.createElement(QueryRow, {
-      queryKey: query.queryKey,
-      activeQueryHash: activeQueryHash,
-      setActiveQueryHash: setActiveQueryHash,
-      key: query.queryHash,
-      queryCache: queryCache
-    });
-  }))), activeQueryHash ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
-    activeQueryHash: activeQueryHash,
-    queryCache: queryCache,
-    queryClient: queryClient
-  }) : null));
-});
-
-const ActiveQuery = ({
-  queryCache,
-  activeQueryHash,
-  queryClient
-}) => {
-  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
-  const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-  const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi;
-
-    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-  });
-  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi2;
-
-    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-  })) != null ? _useSubscribeToQueryC : false;
-  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$getAll$fi3;
-
-    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-  })) != null ? _useSubscribeToQueryC2 : 0;
-
-  const handleRefetch = () => {
-    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-    promise == null ? void 0 : promise.catch(noop);
-  };
-
-  if (!activeQuery || !activeQueryState) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__namespace.createElement(styledComponents.ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5em',
-      background: theme.defaultTheme.backgroundAlt,
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Query Details"), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      marginBottom: '.5em',
-      display: 'flex',
-      alignItems: 'stretch',
-      justifyContent: 'space-between'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Code, {
-    style: {
-      lineHeight: '1.8em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement("pre", {
-    style: {
-      margin: 0,
-      padding: 0,
-      overflow: 'auto'
-    }
-  }, JSON.stringify(activeQuery.queryKey, null, 2))), /*#__PURE__*/React__namespace.createElement("span", {
-    style: {
-      padding: '0.3em .6em',
-      borderRadius: '0.4em',
-      fontWeight: 'bold',
-      textShadow: '0 2px 10px black',
-      background: utils.getQueryStatusColor({
-        queryState: activeQueryState,
-        isStale: isStale,
-        observerCount: observerCount,
-        theme: theme.defaultTheme
-      }),
-      flexShrink: 0
-    }
-  }, utils.getQueryStatusLabel(activeQuery))), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      marginBottom: '.5em',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, "Observers: ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, observerCount)), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'space-between'
-    }
-  }, "Last Updated:", ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, new Date(activeQueryState.dataUpdatedAt).toLocaleTimeString()))), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Actions"), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '0.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: handleRefetch,
-    disabled: activeQueryState.fetchStatus === 'fetching',
-    style: {
-      background: theme.defaultTheme.active
-    }
-  }, "Refetch"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => queryClient.invalidateQueries(activeQuery),
-    style: {
-      background: theme.defaultTheme.warning,
-      color: theme.defaultTheme.inputTextColor
-    }
-  }, "Invalidate"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => queryClient.resetQueries(activeQuery),
-    style: {
-      background: theme.defaultTheme.gray
-    }
-  }, "Reset"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
-    type: "button",
-    onClick: () => queryClient.removeQueries(activeQuery),
-    style: {
-      background: theme.defaultTheme.danger
-    }
-  }, "Remove")), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Data Explorer"), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
-    label: "Data",
-    value: activeQueryState.data,
-    defaultExpanded: {}
-  })), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      background: theme.defaultTheme.backgroundAlt,
-      padding: '.5em',
-      position: 'sticky',
-      top: 0,
-      zIndex: 1
-    }
-  }, "Query Explorer"), /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      padding: '.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(Explorer["default"], {
-    label: "Query",
-    value: activeQuery,
-    defaultExpanded: {
-      queryKey: true
-    }
-  })));
-};
-
-const QueryStatusCount = ({
-  queryCache
-}) => {
-  const hasFresh = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fresh').length);
-  const hasFetching = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fetching').length);
-  const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'paused').length);
-  const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'stale').length);
-  const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'inactive').length);
-  return /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKeys, {
-    style: {
-      marginBottom: '.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
-    style: {
-      background: theme.defaultTheme.success,
-      opacity: hasFresh ? 1 : 0.3
-    }
-  }, "fresh ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasFresh, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
-    style: {
-      background: theme.defaultTheme.active,
-      opacity: hasFetching ? 1 : 0.3
-    }
-  }, "fetching ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasFetching, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
-    style: {
-      background: theme.defaultTheme.paused,
-      opacity: hasPaused ? 1 : 0.3
-    }
-  }, "paused ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasPaused, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
-    style: {
-      background: theme.defaultTheme.warning,
-      color: 'black',
-      textShadow: '0',
-      opacity: hasStale ? 1 : 0.3
-    }
-  }, "stale ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasStale, ")")), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
-    style: {
-      background: theme.defaultTheme.gray,
-      opacity: hasInactive ? 1 : 0.3
-    }
-  }, "inactive ", /*#__PURE__*/React__namespace.createElement(styledComponents.Code, null, "(", hasInactive, ")")));
-};
-
-const QueryRow = ({
-  queryKey,
-  setActiveQueryHash,
-  activeQueryHash,
-  queryCache
-}) => {
-  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find;
-
-    return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-  })) != null ? _useSubscribeToQueryC3 : '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find2;
-
-    return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-  });
-  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find3;
-
-    return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-  })) != null ? _useSubscribeToQueryC4 : false;
-  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find4;
-
-    return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-  })) != null ? _useSubscribeToQueryC5 : false;
-  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-    var _queryCache$find5;
-
-    return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-  })) != null ? _useSubscribeToQueryC6 : 0;
-
-  if (!queryState) {
-    return null;
-  }
-
-  return /*#__PURE__*/React__namespace.createElement("div", {
-    role: "button",
-    "aria-label": "Open query details for " + queryHash,
-    onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
-    style: {
-      display: 'flex',
-      borderBottom: "solid 1px " + theme.defaultTheme.grayAlt,
-      cursor: 'pointer',
-      background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
-    }
-  }, /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      flex: '0 0 auto',
-      width: '2em',
-      height: '2em',
-      background: utils.getQueryStatusColor({
-        queryState,
-        isStale,
-        observerCount,
-        theme: theme.defaultTheme
-      }),
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      fontWeight: 'bold',
-      textShadow: isStale ? '0' : '0 0 10px black',
-      color: isStale ? 'black' : 'white'
-    }
-  }, observerCount), isDisabled ? /*#__PURE__*/React__namespace.createElement("div", {
-    style: {
-      flex: '0 0 auto',
-      height: '2em',
-      background: theme.defaultTheme.gray,
-      display: 'flex',
-      alignItems: 'center',
-      fontWeight: 'bold',
-      padding: '0 0.5em'
-    }
-  }, "disabled") : null, /*#__PURE__*/React__namespace.createElement(styledComponents.Code, {
-    style: {
-      padding: '.5em'
-    }
-  }, "" + queryHash));
-}; // eslint-disable-next-line @typescript-eslint/no-empty-function
-
-
-function noop() {}
-
-exports.ReactQueryDevtools = ReactQueryDevtools;
-exports.ReactQueryDevtoolsPanel = ReactQueryDevtoolsPanel;
-//# sourceMappingURL=devtools.js.map