@tanstack/react-query-devtools 5.0.0-alpha.12 → 5.0.0-alpha.17

package/build/lib/CachePanel/CachePanel.mjs

@@ -0,0 +1,310 @@
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.mjs';
+import React__default from 'react';
+import { useQueryClient, onlineManager } from '@tanstack/react-query';
+import { rankItem } from '@tanstack/match-sorter-utils';
+import { Panel, Select, Input, Button } from '../styledComponents.mjs';
+import useSubscribeToQueryCache from '../useSubscribeToQueryCache.mjs';
+import QueryStatusCount from './Header/QueryStatusCount.mjs';
+import QueryRow from './QueryRow.mjs';
+import ActiveQuery from './ActiveQuery.mjs';
+import { sortFns, defaultPanelSize, getResizeHandleStyle } from '../utils.mjs';
+import { ThemeProvider, defaultTheme } from '../theme.mjs';
+import useLocalStorage from '../useLocalStorage.mjs';
+import Logo from '../Logo.mjs';
+import ScreenReader from '../screenreader.mjs';
+
+const ReactQueryDevtoolsPanel = /*#__PURE__*/React__default.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
+  const {
+    isOpen = true,
+    styleNonce,
+    setIsOpen,
+    queryClient,
+    onDragStart,
+    onPositionChange,
+    showCloseButton,
+    position,
+    closeButtonProps = {},
+    errorTypes = [],
+    ...panelProps
+  } = props;
+  const {
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
+  const client = useQueryClient(queryClient);
+  const queryCache = client.getQueryCache();
+  const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
+  const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
+  const [baseSort, setBaseSort] = useLocalStorage('reactQueryDevtoolsBaseSort', 1);
+  const sortFn = React__default.useMemo(() => sortFns[sort], [sort]);
+  const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length, !isOpen);
+  const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
+  const queries = React__default.useMemo(() => {
+    const unsortedQueries = queryCache.getAll();
+    if (queriesCount === 0) {
+      return [];
+    }
+    const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
+    const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
+    return sorted;
+  }, [baseSort, sortFn, filter, queriesCount, queryCache]);
+  const [isMockOffline, setMockOffline] = React__default.useState(false);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    theme: defaultTheme
+  }, /*#__PURE__*/React__default.createElement(Panel, _extends({
+    ref: ref,
+    className: "ReactQueryDevtoolsPanel",
+    "aria-label": "React Query Devtools Panel",
+    id: "ReactQueryDevtoolsPanel"
+  }, panelProps, {
+    style: {
+      height: defaultPanelSize,
+      position: 'relative',
+      ...panelProps.style
+    }
+  }), /*#__PURE__*/React__default.createElement("style", {
+    nonce: styleNonce,
+    dangerouslySetInnerHTML: {
+      __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+          `
+    }
+  }), /*#__PURE__*/React__default.createElement("div", {
+    style: getResizeHandleStyle(position),
+    onMouseDown: onDragStart
+  }), isOpen && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      flex: '1 1 500px',
+      minHeight: '40%',
+      maxHeight: '100%',
+      overflow: 'auto',
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '.5em',
+      background: defaultTheme.backgroundAlt,
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center'
+    }
+  }, /*#__PURE__*/React__default.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__default.createElement(Logo, {
+    "aria-hidden": true
+  }), /*#__PURE__*/React__default.createElement(ScreenReader, {
+    text: "Close React Query Devtools"
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '.5em'
+    }
+  }, /*#__PURE__*/React__default.createElement(QueryStatusCount, {
+    queryCache: queryCache
+  }), position && onPositionChange ? /*#__PURE__*/React__default.createElement(Select, {
+    "aria-label": "Panel position",
+    value: position,
+    style: {
+      marginInlineStart: '.5em'
+    },
+    onChange: e => onPositionChange(e.target.value)
+  }, /*#__PURE__*/React__default.createElement("option", {
+    value: "left"
+  }, "Left"), /*#__PURE__*/React__default.createElement("option", {
+    value: "right"
+  }, "Right"), /*#__PURE__*/React__default.createElement("option", {
+    value: "top"
+  }, "Top"), /*#__PURE__*/React__default.createElement("option", {
+    value: "bottom"
+  }, "Bottom")) : null), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '0.5em'
+    }
+  }, /*#__PURE__*/React__default.createElement(Input, {
+    placeholder: "Filter",
+    "aria-label": "Filter by queryhash",
+    value: filter ?? '',
+    onChange: e => setFilter(e.target.value),
+    onKeyDown: e => {
+      if (e.key === 'Escape') setFilter('');
+    },
+    style: {
+      flex: '1',
+      width: '100%'
+    }
+  }), /*#__PURE__*/React__default.createElement(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__default.createElement("option", {
+    key: key,
+    value: key
+  }, "Sort by ", key))), /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => setBaseSort(old => old * -1),
+    style: {
+      padding: '.3em .4em',
+      marginRight: '.5em'
+    }
+  }, baseSort === 1 ? '⬆ Asc' : '⬇ Desc'), /*#__PURE__*/React__default.createElement(Button, {
+    title: "Clear cache",
+    "aria-label": "Clear cache",
+    type: "button",
+    onClick: () => queryCache.clear(),
+    style: {
+      padding: '.3em .4em',
+      marginRight: '.5em'
+    }
+  }, "Clear"), /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => {
+      if (isMockOffline) {
+        onlineManager.setOnline(undefined);
+        setMockOffline(false);
+        window.dispatchEvent(new Event('online'));
+      } else {
+        onlineManager.setOnline(false);
+        setMockOffline(true);
+        window.dispatchEvent(new Event('offline'));
+      }
+    },
+    "aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
+    title: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
+    style: {
+      padding: '0',
+      height: '2em'
+    }
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "2em",
+    height: "2em",
+    viewBox: "0 0 24 24",
+    stroke: isMockOffline ? defaultTheme.danger : 'currentColor',
+    fill: "none"
+  }, isMockOffline ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "18",
+    x2: "12.01",
+    y2: "18"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.172 15.172a4 4 0 0 1 5.656 0"
+  }), /*#__PURE__*/React__default.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__default.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__default.createElement("line", {
+    x1: "3",
+    y1: "3",
+    x2: "21",
+    y2: "21"
+  })) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("path", {
+    stroke: "none",
+    d: "M0 0h24v24H0z",
+    fill: "none"
+  }), /*#__PURE__*/React__default.createElement("line", {
+    x1: "12",
+    y1: "18",
+    x2: "12.01",
+    y2: "18"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M9.172 15.172a4 4 0 0 1 5.656 0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M6.343 12.343a8 8 0 0 1 11.314 0"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0"
+  }))), /*#__PURE__*/React__default.createElement(ScreenReader, {
+    text: isMockOffline ? 'Restore offline mock' : 'Mock offline behavior'
+  }))))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      overflowY: 'auto',
+      flex: '1'
+    }
+  }, queries.map(query => {
+    return /*#__PURE__*/React__default.createElement(QueryRow, {
+      queryKey: query.queryKey,
+      activeQueryHash: activeQueryHash,
+      setActiveQueryHash: setActiveQueryHash,
+      key: query.queryHash,
+      queryCache: queryCache
+    });
+  }))), activeQueryHash && isOpen ? /*#__PURE__*/React__default.createElement(ActiveQuery, {
+    activeQueryHash: activeQueryHash,
+    queryCache: queryCache,
+    queryClient: client,
+    errorTypes: errorTypes
+  }) : null, showCloseButton ? /*#__PURE__*/React__default.createElement(Button, _extends({
+    type: "button",
+    "aria-controls": "ReactQueryDevtoolsPanel",
+    "aria-haspopup": "true",
+    "aria-expanded": "true"
+  }, otherCloseButtonProps, {
+    style: {
+      position: 'absolute',
+      zIndex: 99999,
+      margin: '.5em',
+      bottom: 0,
+      left: 0,
+      ...otherCloseButtonProps.style
+    },
+    onClick: e => {
+      setIsOpen(false);
+      onCloseClick?.(e);
+    }
+  }), "Close") : null));
+});
+ReactQueryDevtoolsPanel.displayName = 'ReactQueryDevtoolsPanel';
+var ReactQueryDevtoolsPanel$1 = ReactQueryDevtoolsPanel;
+
+export { ReactQueryDevtoolsPanel, ReactQueryDevtoolsPanel$1 as default };
+//# sourceMappingURL=CachePanel.mjs.map

package/build/lib/CachePanel/CachePanel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"CachePanel.mjs","sources":["../../../src/CachePanel/CachePanel.tsx"],"sourcesContent":["import React from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport { rankItem } from '@tanstack/match-sorter-utils'\n\nimport { Panel, Button, Input, Select } from '../styledComponents'\nimport useSubscribeToQueryCache from '../useSubscribeToQueryCache'\nimport QueryStatusCount from './Header/QueryStatusCount'\nimport QueryRow from './QueryRow'\nimport ActiveQuery from './ActiveQuery'\nimport type { Side } from '../utils'\nimport { sortFns, getResizeHandleStyle, defaultPanelSize } from '../utils'\nimport { ThemeProvider, defaultTheme as theme } from '../theme'\nimport type { DevToolsErrorType } from '../types'\nimport useLocalStorage from '../useLocalStorage'\nimport Logo from '../Logo'\nimport ScreenReader from '../screenreader'\n\ninterface DevtoolsPanelOptions {\n  /**\n   * The standard React style object used to style a component with inline styles\n   */\n  style?: React.CSSProperties\n  /**\n   * The standard React className property used to style a component with classes\n   */\n  className?: string\n  /**\n   * A boolean variable indicating whether the panel is open or closed\n   */\n  isOpen?: boolean\n  /**\n   * nonce for style element for CSP\n   */\n  styleNonce?: string\n  /**\n   * A function that toggles the open and close state of the panel\n   */\n  setIsOpen: (isOpen: boolean) => void\n  /**\n   * Handles the opening and closing the devtools panel\n   */\n  onDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void\n  /**\n   * The position of the React Query devtools panel.\n   * Defaults to 'bottom'.\n   */\n  position?: Side\n  /**\n   * Handles the panel position select change\n   */\n  onPositionChange?: (side: Side) => void\n  /**\n   * Show a close button inside the panel\n   */\n  showCloseButton?: boolean\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * Custom instance of QueryClient\n   */\n  queryClient?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport const ReactQueryDevtoolsPanel = React.forwardRef<\n  HTMLDivElement,\n  DevtoolsPanelOptions\n>(function ReactQueryDevtoolsPanel(props, ref): React.ReactElement {\n  const {\n    isOpen = true,\n    styleNonce,\n    setIsOpen,\n    queryClient,\n    onDragStart,\n    onPositionChange,\n    showCloseButton,\n    position,\n    closeButtonProps = {},\n    errorTypes = [],\n    ...panelProps\n  } = props\n\n  const { onClick: onCloseClick, ...otherCloseButtonProps } = closeButtonProps\n\n  const client = useQueryClient(queryClient)\n  const queryCache = client.getQueryCache()\n\n  const [sort, setSort] = useLocalStorage(\n    'reactQueryDevtoolsSortFn',\n    Object.keys(sortFns)[0],\n  )\n\n  const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '')\n\n  const [baseSort, setBaseSort] = useLocalStorage(\n    'reactQueryDevtoolsBaseSort',\n    1,\n  )\n\n  const sortFn = React.useMemo(() => sortFns[sort as string], [sort])\n\n  const queriesCount = useSubscribeToQueryCache(\n    queryCache,\n    () => queryCache.getAll().length,\n    !isOpen,\n  )\n\n  const [activeQueryHash, setActiveQueryHash] = useLocalStorage(\n    'reactQueryDevtoolsActiveQueryHash',\n    '',\n  )\n\n  const queries = React.useMemo(() => {\n    const unsortedQueries = queryCache.getAll()\n\n    if (queriesCount === 0) {\n      return []\n    }\n\n    const filtered = filter\n      ? unsortedQueries.filter(\n          (item) => rankItem(item.queryHash, filter).passed,\n        )\n      : [...unsortedQueries]\n\n    const sorted = sortFn\n      ? filtered.sort((a, b) => sortFn(a, b) * (baseSort as number))\n      : filtered\n\n    return sorted\n  }, [baseSort, sortFn, filter, queriesCount, queryCache])\n\n  const [isMockOffline, setMockOffline] = React.useState(false)\n\n  return (\n    <ThemeProvider theme={theme}>\n      <Panel\n        ref={ref}\n        className=\"ReactQueryDevtoolsPanel\"\n        aria-label=\"React Query Devtools Panel\"\n        id=\"ReactQueryDevtoolsPanel\"\n        {...panelProps}\n        style={{\n          height: defaultPanelSize,\n          position: 'relative',\n          ...panelProps.style,\n        }}\n      >\n        <style\n          nonce={styleNonce}\n          dangerouslySetInnerHTML={{\n            __html: `\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: ${theme.backgroundAlt} ${theme.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.backgroundAlt};\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: ${theme.gray};\n              border-radius: .5em;\n              border: 3px solid ${theme.backgroundAlt};\n            }\n          `,\n          }}\n        />\n        <div\n          style={getResizeHandleStyle(position)}\n          onMouseDown={onDragStart}\n        ></div>\n\n        {isOpen && (\n          <div\n            style={{\n              flex: '1 1 500px',\n              minHeight: '40%',\n              maxHeight: '100%',\n              overflow: 'auto',\n              borderRight: `1px solid ${theme.grayAlt}`,\n              display: 'flex',\n              flexDirection: 'column',\n            }}\n          >\n            <div\n              style={{\n                padding: '.5em',\n                background: theme.backgroundAlt,\n                display: 'flex',\n                justifyContent: 'space-between',\n                alignItems: 'center',\n              }}\n            >\n              <button\n                type=\"button\"\n                aria-label=\"Close React Query Devtools\"\n                aria-controls=\"ReactQueryDevtoolsPanel\"\n                aria-haspopup=\"true\"\n                aria-expanded=\"true\"\n                onClick={() => setIsOpen(false)}\n                style={{\n                  display: 'inline-flex',\n                  background: 'none',\n                  border: 0,\n                  padding: 0,\n                  marginRight: '.5em',\n                  cursor: 'pointer',\n                }}\n              >\n                <Logo aria-hidden />\n                <ScreenReader text=\"Close React Query Devtools\" />\n              </button>\n              <div\n                style={{\n                  display: 'flex',\n                  flexDirection: 'column',\n                }}\n              >\n                <div\n                  style={{\n                    display: 'flex',\n                    justifyContent: 'space-between',\n                    alignItems: 'center',\n                    marginBottom: '.5em',\n                  }}\n                >\n                  <QueryStatusCount queryCache={queryCache} />\n                  {position && onPositionChange ? (\n                    <Select\n                      aria-label=\"Panel position\"\n                      value={position}\n                      style={{ marginInlineStart: '.5em' }}\n                      onChange={(e) => onPositionChange(e.target.value as Side)}\n                    >\n                      <option value=\"left\">Left</option>\n                      <option value=\"right\">Right</option>\n                      <option value=\"top\">Top</option>\n                      <option value=\"bottom\">Bottom</option>\n                    </Select>\n                  ) : null}\n                </div>\n                <div\n                  style={{\n                    display: 'flex',\n                    alignItems: 'center',\n                    flexWrap: 'wrap',\n                    gap: '0.5em',\n                  }}\n                >\n                  <Input\n                    placeholder=\"Filter\"\n                    aria-label=\"Filter by queryhash\"\n                    value={filter ?? ''}\n                    onChange={(e) => setFilter(e.target.value)}\n                    onKeyDown={(e) => {\n                      if (e.key === 'Escape') setFilter('')\n                    }}\n                    style={{\n                      flex: '1',\n                      width: '100%',\n                    }}\n                  />\n                  <Select\n                    aria-label=\"Sort queries\"\n                    value={sort}\n                    onChange={(e) => setSort(e.target.value)}\n                    style={{\n                      flex: '1',\n                      minWidth: 75,\n                      marginRight: '.5em',\n                    }}\n                  >\n                    {Object.keys(sortFns).map((key) => (\n                      <option key={key} value={key}>\n                        Sort by {key}\n                      </option>\n                    ))}\n                  </Select>\n                  <Button\n                    type=\"button\"\n                    onClick={() => setBaseSort((old) => old * -1)}\n                    style={{\n                      padding: '.3em .4em',\n                      marginRight: '.5em',\n                    }}\n                  >\n                    {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}\n                  </Button>\n                  <Button\n                    title=\"Clear cache\"\n                    aria-label=\"Clear cache\"\n                    type=\"button\"\n                    onClick={() => queryCache.clear()}\n                    style={{\n                      padding: '.3em .4em',\n                      marginRight: '.5em',\n                    }}\n                  >\n                    Clear\n                  </Button>\n                  <Button\n                    type=\"button\"\n                    onClick={() => {\n                      if (isMockOffline) {\n                        onlineManager.setOnline(undefined)\n                        setMockOffline(false)\n                        window.dispatchEvent(new Event('online'))\n                      } else {\n                        onlineManager.setOnline(false)\n                        setMockOffline(true)\n                        window.dispatchEvent(new Event('offline'))\n                      }\n                    }}\n                    aria-label={\n                      isMockOffline\n                        ? 'Restore offline mock'\n                        : 'Mock offline behavior'\n                    }\n                    title={\n                      isMockOffline\n                        ? 'Restore offline mock'\n                        : 'Mock offline behavior'\n                    }\n                    style={{\n                      padding: '0',\n                      height: '2em',\n                    }}\n                  >\n                    <svg\n                      xmlns=\"http://www.w3.org/2000/svg\"\n                      width=\"2em\"\n                      height=\"2em\"\n                      viewBox=\"0 0 24 24\"\n                      stroke={isMockOffline ? theme.danger : 'currentColor'}\n                      fill=\"none\"\n                    >\n                      {isMockOffline ? (\n                        <>\n                          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                          <line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\" />\n                          <path d=\"M9.172 15.172a4 4 0 0 1 5.656 0\" />\n                          <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\" />\n                          <path d=\"M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374\" />\n                          <line x1=\"3\" y1=\"3\" x2=\"21\" y2=\"21\" />\n                        </>\n                      ) : (\n                        <>\n                          <path stroke=\"none\" d=\"M0 0h24v24H0z\" fill=\"none\" />\n                          <line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\" />\n                          <path d=\"M9.172 15.172a4 4 0 0 1 5.656 0\" />\n                          <path d=\"M6.343 12.343a8 8 0 0 1 11.314 0\" />\n                          <path d=\"M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0\" />\n                        </>\n                      )}\n                    </svg>\n                    <ScreenReader\n                      text={\n                        isMockOffline\n                          ? 'Restore offline mock'\n                          : 'Mock offline behavior'\n                      }\n                    />\n                  </Button>\n                </div>\n              </div>\n            </div>\n            <div\n              style={{\n                overflowY: 'auto',\n                flex: '1',\n              }}\n            >\n              {queries.map((query) => {\n                return (\n                  <QueryRow\n                    queryKey={query.queryKey}\n                    activeQueryHash={activeQueryHash}\n                    setActiveQueryHash={setActiveQueryHash}\n                    key={query.queryHash}\n                    queryCache={queryCache}\n                  />\n                )\n              })}\n            </div>\n          </div>\n        )}\n\n        {activeQueryHash && isOpen ? (\n          <ActiveQuery\n            activeQueryHash={activeQueryHash}\n            queryCache={queryCache}\n            queryClient={client}\n            errorTypes={errorTypes}\n          />\n        ) : null}\n\n        {showCloseButton ? (\n          <Button\n            type=\"button\"\n            aria-controls=\"ReactQueryDevtoolsPanel\"\n            aria-haspopup=\"true\"\n            aria-expanded=\"true\"\n            {...(otherCloseButtonProps as Record<string, unknown>)}\n            style={{\n              position: 'absolute',\n              zIndex: 99999,\n              margin: '.5em',\n              bottom: 0,\n              left: 0,\n              ...otherCloseButtonProps.style,\n            }}\n            onClick={(e) => {\n              setIsOpen(false)\n              onCloseClick?.(e)\n            }}\n          >\n            Close\n          </Button>\n        ) : null}\n      </Panel>\n    </ThemeProvider>\n  )\n})\n\nReactQueryDevtoolsPanel.displayName = 'ReactQueryDevtoolsPanel'\n\nexport default ReactQueryDevtoolsPanel\n"],"names":["ReactQueryDevtoolsPanel","React","forwardRef","props","ref","isOpen","styleNonce","setIsOpen","queryClient","onDragStart","onPositionChange","showCloseButton","position","closeButtonProps","errorTypes","panelProps","onClick","onCloseClick","otherCloseButtonProps","client","useQueryClient","queryCache","getQueryCache","sort","setSort","useLocalStorage","Object","keys","sortFns","filter","setFilter","baseSort","setBaseSort","sortFn","useMemo","queriesCount","useSubscribeToQueryCache","getAll","length","activeQueryHash","setActiveQueryHash","queries","unsortedQueries","filtered","item","rankItem","queryHash","passed","sorted","a","b","isMockOffline","setMockOffline","useState","theme","height","defaultPanelSize","style","__html","backgroundAlt","gray","getResizeHandleStyle","flex","minHeight","maxHeight","overflow","borderRight","grayAlt","display","flexDirection","padding","background","justifyContent","alignItems","border","marginRight","cursor","marginBottom","marginInlineStart","e","target","value","flexWrap","gap","key","width","minWidth","map","old","clear","onlineManager","setOnline","undefined","window","dispatchEvent","Event","danger","overflowY","query","queryKey","zIndex","margin","bottom","left","displayName"],"mappings":"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"}

package/build/lib/CachePanel/Header/QueryStatusCount.d.ts

@@ -0,0 +1,7 @@
+import type { QueryCache } from '@tanstack/react-query';
+/**
+ * Displays the number of queries for each status
+ */
+export default function QueryStatusCount({ queryCache, }: {
+    queryCache: QueryCache;
+}): JSX.Element;

package/build/lib/CachePanel/Header/QueryStatusCount.esm.js

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { QueryKeys, QueryKey, Code } from '../../styledComponents.esm.js';
+import { getQueryStatusLabel } from '../../utils.esm.js';
+import useSubscribeToQueryCache from '../../useSubscribeToQueryCache.esm.js';
+import { defaultTheme } from '../../theme.esm.js';
+
+/**
+ * Displays the number of queries for each status
+ */
+function QueryStatusCount({
+  queryCache
+}) {
+  const hasFresh = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'fresh').length);
+  const hasFetching = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'fetching').length);
+  const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'paused').length);
+  const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'stale').length);
+  const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'inactive').length);
+  return /*#__PURE__*/React__default.createElement(QueryKeys, null, /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.success,
+      opacity: hasFresh ? 1 : 0.3
+    }
+  }, "fresh ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasFresh, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.active,
+      opacity: hasFetching ? 1 : 0.3
+    }
+  }, "fetching ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasFetching, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.paused,
+      opacity: hasPaused ? 1 : 0.3
+    }
+  }, "paused ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasPaused, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.warning,
+      color: 'black',
+      textShadow: '0',
+      opacity: hasStale ? 1 : 0.3
+    }
+  }, "stale ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasStale, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.gray,
+      opacity: hasInactive ? 1 : 0.3
+    }
+  }, "inactive ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasInactive, ")")));
+}
+
+export { QueryStatusCount as default };
+//# sourceMappingURL=QueryStatusCount.esm.js.map

package/build/lib/CachePanel/Header/QueryStatusCount.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryStatusCount.esm.js","sources":["../../../../src/CachePanel/Header/QueryStatusCount.tsx"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\n\nimport { Code, QueryKey, QueryKeys } from '../../styledComponents'\nimport { getQueryStatusLabel } from '../../utils'\nimport useSubscribeToQueryCache from '../../useSubscribeToQueryCache'\nimport { defaultTheme as theme } from '../../theme'\n\n/**\n * Displays the number of queries for each status\n */\nexport default function QueryStatusCount({\n  queryCache,\n}: {\n  queryCache: QueryCache\n}) {\n  const hasFresh = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fresh')\n        .length,\n  )\n  const hasFetching = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fetching')\n        .length,\n  )\n  const hasPaused = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'paused')\n        .length,\n  )\n  const hasStale = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'stale')\n        .length,\n  )\n  const hasInactive = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'inactive')\n        .length,\n  )\n  return (\n    <QueryKeys>\n      <QueryKey\n        style={{\n          background: theme.success,\n          opacity: hasFresh ? 1 : 0.3,\n        }}\n      >\n        fresh <Code>({hasFresh})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.active,\n          opacity: hasFetching ? 1 : 0.3,\n        }}\n      >\n        fetching <Code>({hasFetching})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.paused,\n          opacity: hasPaused ? 1 : 0.3,\n        }}\n      >\n        paused <Code>({hasPaused})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.warning,\n          color: 'black',\n          textShadow: '0',\n          opacity: hasStale ? 1 : 0.3,\n        }}\n      >\n        stale <Code>({hasStale})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.gray,\n          opacity: hasInactive ? 1 : 0.3,\n        }}\n      >\n        inactive <Code>({hasInactive})</Code>\n      </QueryKey>\n    </QueryKeys>\n  )\n}\n"],"names":["QueryStatusCount","queryCache","hasFresh","useSubscribeToQueryCache","getAll","filter","q","getQueryStatusLabel","length","hasFetching","hasPaused","hasStale","hasInactive","React","background","theme","success","opacity","active","paused","warning","color","textShadow","gray"],"mappings":";;;;;;AAQA;AACA;AACA;AACe,SAASA,gBAAgB,CAAC;AACvCC,EAAAA,UAAAA;AAGF,CAAC,EAAE;EACD,MAAMC,QAAQ,GAAGC,wBAAwB,CACvCF,UAAU,EACV,MACEA,UAAU,CAACG,MAAM,EAAE,CAACC,MAAM,CAAEC,CAAC,IAAKC,mBAAmB,CAACD,CAAC,CAAC,KAAK,OAAO,CAAC,CAClEE,MAAM,CACZ,CAAA;EACD,MAAMC,WAAW,GAAGN,wBAAwB,CAC1CF,UAAU,EACV,MACEA,UAAU,CAACG,MAAM,EAAE,CAACC,MAAM,CAAEC,CAAC,IAAKC,mBAAmB,CAACD,CAAC,CAAC,KAAK,UAAU,CAAC,CACrEE,MAAM,CACZ,CAAA;EACD,MAAME,SAAS,GAAGP,wBAAwB,CACxCF,UAAU,EACV,MACEA,UAAU,CAACG,MAAM,EAAE,CAACC,MAAM,CAAEC,CAAC,IAAKC,mBAAmB,CAACD,CAAC,CAAC,KAAK,QAAQ,CAAC,CACnEE,MAAM,CACZ,CAAA;EACD,MAAMG,QAAQ,GAAGR,wBAAwB,CACvCF,UAAU,EACV,MACEA,UAAU,CAACG,MAAM,EAAE,CAACC,MAAM,CAAEC,CAAC,IAAKC,mBAAmB,CAACD,CAAC,CAAC,KAAK,OAAO,CAAC,CAClEE,MAAM,CACZ,CAAA;EACD,MAAMI,WAAW,GAAGT,wBAAwB,CAC1CF,UAAU,EACV,MACEA,UAAU,CAACG,MAAM,EAAE,CAACC,MAAM,CAAEC,CAAC,IAAKC,mBAAmB,CAACD,CAAC,CAAC,KAAK,UAAU,CAAC,CACrEE,MAAM,CACZ,CAAA;AACD,EAAA,oBACEK,cAAC,CAAA,aAAA,CAAA,SAAS,EACR,IAAA,eAAAA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAA;AACP,IAAA,KAAK,EAAE;MACLC,UAAU,EAAEC,YAAK,CAACC,OAAO;AACzBC,MAAAA,OAAO,EAAEf,QAAQ,GAAG,CAAC,GAAG,GAAA;AAC1B,KAAA;AAAE,GAAA,EACH,QACO,eAAAW,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAC,GAAC,EAACX,QAAQ,EAAC,GAAC,CAAO,CACtB,EAAC,GAAG,eACfW,6BAAC,QAAQ,EAAA;AACP,IAAA,KAAK,EAAE;MACLC,UAAU,EAAEC,YAAK,CAACG,MAAM;AACxBD,MAAAA,OAAO,EAAER,WAAW,GAAG,CAAC,GAAG,GAAA;AAC7B,KAAA;AAAE,GAAA,EACH,WACU,eAAAI,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAC,GAAC,EAACJ,WAAW,EAAC,GAAC,CAAO,CAC5B,EAAC,GAAG,eACfI,6BAAC,QAAQ,EAAA;AACP,IAAA,KAAK,EAAE;MACLC,UAAU,EAAEC,YAAK,CAACI,MAAM;AACxBF,MAAAA,OAAO,EAAEP,SAAS,GAAG,CAAC,GAAG,GAAA;AAC3B,KAAA;AAAE,GAAA,EACH,SACQ,eAAAG,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAC,GAAC,EAACH,SAAS,EAAC,GAAC,CAAO,CACxB,EAAC,GAAG,eACfG,6BAAC,QAAQ,EAAA;AACP,IAAA,KAAK,EAAE;MACLC,UAAU,EAAEC,YAAK,CAACK,OAAO;AACzBC,MAAAA,KAAK,EAAE,OAAO;AACdC,MAAAA,UAAU,EAAE,GAAG;AACfL,MAAAA,OAAO,EAAEN,QAAQ,GAAG,CAAC,GAAG,GAAA;AAC1B,KAAA;AAAE,GAAA,EACH,QACO,eAAAE,cAAA,CAAA,aAAA,CAAC,IAAI,EAAA,IAAA,EAAC,GAAC,EAACF,QAAQ,EAAC,GAAC,CAAO,CACtB,EAAC,GAAG,eACfE,6BAAC,QAAQ,EAAA;AACP,IAAA,KAAK,EAAE;MACLC,UAAU,EAAEC,YAAK,CAACQ,IAAI;AACtBN,MAAAA,OAAO,EAAEL,WAAW,GAAG,CAAC,GAAG,GAAA;AAC7B,KAAA;GACD,EAAA,WACU,eAACC,cAAA,CAAA,aAAA,CAAA,IAAI,EAAC,IAAA,EAAA,GAAC,EAACD,WAAW,EAAC,GAAC,CAAO,CAC5B,CACD,CAAA;AAEhB;;;;"}

package/build/lib/CachePanel/Header/QueryStatusCount.js

@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var styledComponents = require('../../styledComponents.js');
+var utils = require('../../utils.js');
+var useSubscribeToQueryCache = require('../../useSubscribeToQueryCache.js');
+var theme = require('../../theme.js');
+
+/**
+ * Displays the number of queries for each status
+ */
+function QueryStatusCount({
+  queryCache
+}) {
+  const hasFresh = useSubscribeToQueryCache.default(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fresh').length);
+  const hasFetching = useSubscribeToQueryCache.default(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'fetching').length);
+  const hasPaused = useSubscribeToQueryCache.default(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'paused').length);
+  const hasStale = useSubscribeToQueryCache.default(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'stale').length);
+  const hasInactive = useSubscribeToQueryCache.default(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'inactive').length);
+  return /*#__PURE__*/React.createElement(styledComponents.QueryKeys, null, /*#__PURE__*/React.createElement(styledComponents.QueryKey, {
+    style: {
+      background: theme.defaultTheme.success,
+      opacity: hasFresh ? 1 : 0.3
+    }
+  }, "fresh ", /*#__PURE__*/React.createElement(styledComponents.Code, null, "(", hasFresh, ")")), ' ', /*#__PURE__*/React.createElement(styledComponents.QueryKey, {
+    style: {
+      background: theme.defaultTheme.active,
+      opacity: hasFetching ? 1 : 0.3
+    }
+  }, "fetching ", /*#__PURE__*/React.createElement(styledComponents.Code, null, "(", hasFetching, ")")), ' ', /*#__PURE__*/React.createElement(styledComponents.QueryKey, {
+    style: {
+      background: theme.defaultTheme.paused,
+      opacity: hasPaused ? 1 : 0.3
+    }
+  }, "paused ", /*#__PURE__*/React.createElement(styledComponents.Code, null, "(", hasPaused, ")")), ' ', /*#__PURE__*/React.createElement(styledComponents.QueryKey, {
+    style: {
+      background: theme.defaultTheme.warning,
+      color: 'black',
+      textShadow: '0',
+      opacity: hasStale ? 1 : 0.3
+    }
+  }, "stale ", /*#__PURE__*/React.createElement(styledComponents.Code, null, "(", hasStale, ")")), ' ', /*#__PURE__*/React.createElement(styledComponents.QueryKey, {
+    style: {
+      background: theme.defaultTheme.gray,
+      opacity: hasInactive ? 1 : 0.3
+    }
+  }, "inactive ", /*#__PURE__*/React.createElement(styledComponents.Code, null, "(", hasInactive, ")")));
+}
+
+exports.default = QueryStatusCount;
+//# sourceMappingURL=QueryStatusCount.js.map

package/build/lib/CachePanel/Header/QueryStatusCount.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryStatusCount.js","sources":["../../../../src/CachePanel/Header/QueryStatusCount.tsx"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\n\nimport { Code, QueryKey, QueryKeys } from '../../styledComponents'\nimport { getQueryStatusLabel } from '../../utils'\nimport useSubscribeToQueryCache from '../../useSubscribeToQueryCache'\nimport { defaultTheme as theme } from '../../theme'\n\n/**\n * Displays the number of queries for each status\n */\nexport default function QueryStatusCount({\n  queryCache,\n}: {\n  queryCache: QueryCache\n}) {\n  const hasFresh = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fresh')\n        .length,\n  )\n  const hasFetching = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fetching')\n        .length,\n  )\n  const hasPaused = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'paused')\n        .length,\n  )\n  const hasStale = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'stale')\n        .length,\n  )\n  const hasInactive = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'inactive')\n        .length,\n  )\n  return (\n    <QueryKeys>\n      <QueryKey\n        style={{\n          background: theme.success,\n          opacity: hasFresh ? 1 : 0.3,\n        }}\n      >\n        fresh <Code>({hasFresh})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.active,\n          opacity: hasFetching ? 1 : 0.3,\n        }}\n      >\n        fetching <Code>({hasFetching})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.paused,\n          opacity: hasPaused ? 1 : 0.3,\n        }}\n      >\n        paused <Code>({hasPaused})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.warning,\n          color: 'black',\n          textShadow: '0',\n          opacity: hasStale ? 1 : 0.3,\n        }}\n      >\n        stale <Code>({hasStale})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.gray,\n          opacity: hasInactive ? 1 : 0.3,\n        }}\n      >\n        inactive <Code>({hasInactive})</Code>\n      </QueryKey>\n    </QueryKeys>\n  )\n}\n"],"names":["QueryStatusCount","queryCache","hasFresh","useSubscribeToQueryCache","getAll","filter","q","getQueryStatusLabel","length","hasFetching","hasPaused","hasStale","hasInactive","QueryKeys","QueryKey","background","theme","success","opacity","Code","active","paused","warning","color","textShadow","gray"],"mappings":"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"}

package/build/lib/CachePanel/Header/QueryStatusCount.mjs

@@ -0,0 +1,49 @@
+import React__default from 'react';
+import { QueryKeys, QueryKey, Code } from '../../styledComponents.mjs';
+import { getQueryStatusLabel } from '../../utils.mjs';
+import useSubscribeToQueryCache from '../../useSubscribeToQueryCache.mjs';
+import { defaultTheme } from '../../theme.mjs';
+
+/**
+ * Displays the number of queries for each status
+ */
+function QueryStatusCount({
+  queryCache
+}) {
+  const hasFresh = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'fresh').length);
+  const hasFetching = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'fetching').length);
+  const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'paused').length);
+  const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'stale').length);
+  const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'inactive').length);
+  return /*#__PURE__*/React__default.createElement(QueryKeys, null, /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.success,
+      opacity: hasFresh ? 1 : 0.3
+    }
+  }, "fresh ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasFresh, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.active,
+      opacity: hasFetching ? 1 : 0.3
+    }
+  }, "fetching ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasFetching, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.paused,
+      opacity: hasPaused ? 1 : 0.3
+    }
+  }, "paused ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasPaused, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.warning,
+      color: 'black',
+      textShadow: '0',
+      opacity: hasStale ? 1 : 0.3
+    }
+  }, "stale ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasStale, ")")), ' ', /*#__PURE__*/React__default.createElement(QueryKey, {
+    style: {
+      background: defaultTheme.gray,
+      opacity: hasInactive ? 1 : 0.3
+    }
+  }, "inactive ", /*#__PURE__*/React__default.createElement(Code, null, "(", hasInactive, ")")));
+}
+
+export { QueryStatusCount as default };
+//# sourceMappingURL=QueryStatusCount.mjs.map

package/build/lib/CachePanel/Header/QueryStatusCount.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryStatusCount.mjs","sources":["../../../../src/CachePanel/Header/QueryStatusCount.tsx"],"sourcesContent":["import React from 'react'\nimport type { QueryCache } from '@tanstack/react-query'\n\nimport { Code, QueryKey, QueryKeys } from '../../styledComponents'\nimport { getQueryStatusLabel } from '../../utils'\nimport useSubscribeToQueryCache from '../../useSubscribeToQueryCache'\nimport { defaultTheme as theme } from '../../theme'\n\n/**\n * Displays the number of queries for each status\n */\nexport default function QueryStatusCount({\n  queryCache,\n}: {\n  queryCache: QueryCache\n}) {\n  const hasFresh = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fresh')\n        .length,\n  )\n  const hasFetching = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'fetching')\n        .length,\n  )\n  const hasPaused = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'paused')\n        .length,\n  )\n  const hasStale = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'stale')\n        .length,\n  )\n  const hasInactive = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().filter((q) => getQueryStatusLabel(q) === 'inactive')\n        .length,\n  )\n  return (\n    <QueryKeys>\n      <QueryKey\n        style={{\n          background: theme.success,\n          opacity: hasFresh ? 1 : 0.3,\n        }}\n      >\n        fresh <Code>({hasFresh})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.active,\n          opacity: hasFetching ? 1 : 0.3,\n        }}\n      >\n        fetching <Code>({hasFetching})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.paused,\n          opacity: hasPaused ? 1 : 0.3,\n        }}\n      >\n        paused <Code>({hasPaused})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.warning,\n          color: 'black',\n          textShadow: '0',\n          opacity: hasStale ? 1 : 0.3,\n        }}\n      >\n        stale <Code>({hasStale})</Code>\n      </QueryKey>{' '}\n      <QueryKey\n        style={{\n          background: theme.gray,\n          opacity: hasInactive ? 1 : 0.3,\n        }}\n      >\n        inactive <Code>({hasInactive})</Code>\n      </QueryKey>\n    </QueryKeys>\n  )\n}\n"],"names":["QueryStatusCount","queryCache","hasFresh","useSubscribeToQueryCache","getAll","filter","q","getQueryStatusLabel","length","hasFetching","hasPaused","hasStale","hasInactive","React","background","theme","success","opacity","active","paused","warning","color","textShadow","gray"],"mappings":"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"}

package/build/lib/CachePanel/QueryRow.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { QueryCache, QueryKey as QueryKeyType } from '@tanstack/react-query';
+interface QueryRowProps {
+    queryKey: QueryKeyType;
+    setActiveQueryHash: (hash: string) => void;
+    activeQueryHash?: string;
+    queryCache: QueryCache;
+}
+/**
+ * Row for a query in the query list
+ */
+declare const QueryRow: React.MemoExoticComponent<({ queryKey, setActiveQueryHash, activeQueryHash, queryCache, }: QueryRowProps) => JSX.Element | null>;
+export default QueryRow;