@tanstack/react-query-devtools 5.0.0-alpha.2 → 5.0.0-alpha.21

package/build/lib/CachePanel/ActiveQuery.mjs

@@ -0,0 +1,257 @@
+import React__default from 'react';
+import useSubscribeToQueryCache from '../useSubscribeToQueryCache.mjs';
+import { ActiveQueryPanel, Code, Button, Select } from '../styledComponents.mjs';
+import { displayValue, getQueryStatusColor, getQueryStatusLabel } from '../utils.mjs';
+import Explorer from '../Explorer.mjs';
+import { defaultTheme } from '../theme.mjs';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+function noop() {}
+
+/**
+ * Panel for the query currently being inspected
+ *
+ * It displays query details (key, observers...), query actions,
+ * the data explorer and the query explorer
+ */
+const ActiveQuery = ({
+  queryCache,
+  activeQueryHash,
+  queryClient,
+  errorTypes
+}) => {
+  const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
+  const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
+  const handleRefetch = () => {
+    const promise = activeQuery?.fetch();
+    promise?.catch(noop);
+  };
+  const currentErrorTypeName = React__default.useMemo(() => {
+    if (activeQuery && activeQueryState?.error) {
+      const errorType = errorTypes.find(type => type.initializer(activeQuery).toString() === activeQueryState.error?.toString());
+      return errorType?.name;
+    }
+    return undefined;
+  }, [activeQuery, activeQueryState?.error, errorTypes]);
+  if (!activeQuery || !activeQueryState) {
+    return null;
+  }
+  const triggerError = errorType => {
+    const error = errorType?.initializer(activeQuery) ?? new Error('Unknown error from devtools');
+    const __previousQueryOptions = activeQuery.options;
+    activeQuery.setState({
+      status: 'error',
+      error,
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+      fetchMeta: {
+        ...activeQuery.state.fetchMeta,
+        __previousQueryOptions
+      }
+    });
+  };
+  const restoreQueryAfterLoadingOrError = () => {
+    activeQuery.fetch(activeQuery.state.fetchMeta.__previousQueryOptions, {
+      // Make sure this fetch will cancel the previous one
+      cancelRefetch: true
+    });
+  };
+  return /*#__PURE__*/React__default.createElement(ActiveQueryPanel, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '.5em',
+      background: defaultTheme.backgroundAlt,
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Query Details"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginBottom: '.5em',
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default.createElement(Code, {
+    style: {
+      lineHeight: '1.8em'
+    }
+  }, /*#__PURE__*/React__default.createElement("pre", {
+    style: {
+      margin: 0,
+      padding: 0,
+      overflow: 'auto'
+    }
+  }, displayValue(activeQuery.queryKey, true))), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      padding: '0.3em .6em',
+      borderRadius: '0.4em',
+      fontWeight: 'bold',
+      textShadow: '0 2px 10px black',
+      background: getQueryStatusColor({
+        queryState: activeQueryState,
+        isStale: isStale,
+        observerCount: observerCount,
+        theme: defaultTheme
+      }),
+      flexShrink: 0
+    }
+  }, getQueryStatusLabel(activeQuery))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      marginBottom: '.5em',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, "Observers: ", /*#__PURE__*/React__default.createElement(Code, null, observerCount)), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between'
+    }
+  }, "Last Updated:", ' ', /*#__PURE__*/React__default.createElement(Code, null, new Date(activeQueryState.dataUpdatedAt).toLocaleTimeString()))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      background: defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Actions"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '0.5em',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '0.5em',
+      alignItems: 'flex-end'
+    }
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: handleRefetch,
+    disabled: activeQueryState.fetchStatus === 'fetching',
+    style: {
+      background: defaultTheme.active
+    }
+  }, "Refetch"), ' ', /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => queryClient.invalidateQueries(activeQuery),
+    style: {
+      background: defaultTheme.warning,
+      color: defaultTheme.inputTextColor
+    }
+  }, "Invalidate"), ' ', /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => queryClient.resetQueries(activeQuery),
+    style: {
+      background: defaultTheme.gray
+    }
+  }, "Reset"), ' ', /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => queryClient.removeQueries(activeQuery),
+    style: {
+      background: defaultTheme.danger
+    }
+  }, "Remove"), ' ', /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => {
+      if (activeQuery.state.data === undefined) {
+        restoreQueryAfterLoadingOrError();
+      } else {
+        const __previousQueryOptions = activeQuery.options;
+        // Trigger a fetch in order to trigger suspense as well.
+        activeQuery.fetch({
+          ...__previousQueryOptions,
+          queryFn: () => {
+            return new Promise(() => {
+              // Never resolve
+            });
+          },
+          gcTime: -1
+        });
+        activeQuery.setState({
+          data: undefined,
+          status: 'pending',
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+          fetchMeta: {
+            ...activeQuery.state.fetchMeta,
+            __previousQueryOptions
+          }
+        });
+      }
+    },
+    style: {
+      background: defaultTheme.paused
+    }
+  }, activeQuery.state.status === 'pending' ? 'Restore' : 'Trigger', ' ', "loading"), ' ', errorTypes.length === 0 || activeQuery.state.status === 'error' ? /*#__PURE__*/React__default.createElement(Button, {
+    type: "button",
+    onClick: () => {
+      if (!activeQuery.state.error) {
+        triggerError();
+      } else {
+        queryClient.resetQueries(activeQuery);
+      }
+    },
+    style: {
+      background: defaultTheme.danger
+    }
+  }, activeQuery.state.status === 'error' ? 'Restore' : 'Trigger', " error") : /*#__PURE__*/React__default.createElement("label", null, "Trigger error:", /*#__PURE__*/React__default.createElement(Select, {
+    value: currentErrorTypeName ?? '',
+    style: {
+      marginInlineStart: '.5em'
+    },
+    onChange: e => {
+      const errorType = errorTypes.find(t => t.name === e.target.value);
+      triggerError(errorType);
+    }
+  }, /*#__PURE__*/React__default.createElement("option", {
+    key: "",
+    value: ""
+  }), errorTypes.map(errorType => /*#__PURE__*/React__default.createElement("option", {
+    key: errorType.name,
+    value: errorType.name
+  }, errorType.name))))), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      background: defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Data Explorer"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
+    label: "Data",
+    value: activeQueryState.data,
+    defaultExpanded: {},
+    copyable: true
+  })), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      background: defaultTheme.backgroundAlt,
+      padding: '.5em',
+      position: 'sticky',
+      top: 0,
+      zIndex: 1
+    }
+  }, "Query Explorer"), /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      padding: '.5em'
+    }
+  }, /*#__PURE__*/React__default.createElement(Explorer, {
+    label: "Query",
+    value: activeQuery,
+    defaultExpanded: {
+      queryKey: true
+    }
+  })));
+};
+ActiveQuery.displayName = 'ActiveQuery';
+var ActiveQuery$1 = ActiveQuery;
+
+export { ActiveQuery$1 as default };
+//# sourceMappingURL=ActiveQuery.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ActiveQuery.mjs","sources":["../../../src/CachePanel/ActiveQuery.tsx"],"sourcesContent":["import React from 'react'\nimport type { QueryCache, QueryClient } from '@tanstack/react-query'\n\nimport useSubscribeToQueryCache from '../useSubscribeToQueryCache'\nimport { Button, Code, Select, ActiveQueryPanel } from '../styledComponents'\n\nimport {\n  getQueryStatusLabel,\n  getQueryStatusColor,\n  displayValue,\n} from '../utils'\nimport Explorer from '../Explorer'\nimport type { DevToolsErrorType } from '../types'\nimport { defaultTheme as theme } from '../theme'\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nfunction noop() {}\n\n/**\n * Panel for the query currently being inspected\n *\n * It displays query details (key, observers...), query actions,\n * the data explorer and the query explorer\n */\nconst ActiveQuery = ({\n  queryCache,\n  activeQueryHash,\n  queryClient,\n  errorTypes,\n}: {\n  queryCache: QueryCache\n  activeQueryHash: string\n  queryClient: QueryClient\n  errorTypes: DevToolsErrorType[]\n}) => {\n  const activeQuery = useSubscribeToQueryCache(queryCache, () =>\n    queryCache.getAll().find((query) => query.queryHash === activeQueryHash),\n  )\n\n  const activeQueryState = useSubscribeToQueryCache(\n    queryCache,\n    () =>\n      queryCache.getAll().find((query) => query.queryHash === activeQueryHash)\n        ?.state,\n  )\n\n  const isStale =\n    useSubscribeToQueryCache(queryCache, () =>\n      queryCache\n        .getAll()\n        .find((query) => query.queryHash === activeQueryHash)\n        ?.isStale(),\n    ) ?? false\n\n  const observerCount =\n    useSubscribeToQueryCache(queryCache, () =>\n      queryCache\n        .getAll()\n        .find((query) => query.queryHash === activeQueryHash)\n        ?.getObserversCount(),\n    ) ?? 0\n\n  const handleRefetch = () => {\n    const promise = activeQuery?.fetch()\n    promise?.catch(noop)\n  }\n\n  const currentErrorTypeName = React.useMemo(() => {\n    if (activeQuery && activeQueryState?.error) {\n      const errorType = errorTypes.find(\n        (type) =>\n          type.initializer(activeQuery).toString() ===\n          activeQueryState.error?.toString(),\n      )\n      return errorType?.name\n    }\n    return undefined\n  }, [activeQuery, activeQueryState?.error, errorTypes])\n\n  if (!activeQuery || !activeQueryState) {\n    return null\n  }\n\n  const triggerError = (errorType?: DevToolsErrorType) => {\n    const error =\n      errorType?.initializer(activeQuery) ??\n      new Error('Unknown error from devtools')\n\n    const __previousQueryOptions = activeQuery.options\n\n    activeQuery.setState({\n      status: 'error',\n      error,\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n      fetchMeta: {\n        ...activeQuery.state.fetchMeta,\n        __previousQueryOptions,\n      } as any,\n    })\n  }\n\n  const restoreQueryAfterLoadingOrError = () => {\n    activeQuery.fetch(\n      (activeQuery.state.fetchMeta as any).__previousQueryOptions,\n      {\n        // Make sure this fetch will cancel the previous one\n        cancelRefetch: true,\n      },\n    )\n  }\n\n  return (\n    <ActiveQueryPanel>\n      <div\n        style={{\n          padding: '.5em',\n          background: theme.backgroundAlt,\n          position: 'sticky',\n          top: 0,\n          zIndex: 1,\n        }}\n      >\n        Query Details\n      </div>\n      <div\n        style={{\n          padding: '.5em',\n        }}\n      >\n        <div\n          style={{\n            marginBottom: '.5em',\n            display: 'flex',\n            alignItems: 'flex-start',\n            justifyContent: 'space-between',\n          }}\n        >\n          <Code\n            style={{\n              lineHeight: '1.8em',\n            }}\n          >\n            <pre\n              style={{\n                margin: 0,\n                padding: 0,\n                overflow: 'auto',\n              }}\n            >\n              {displayValue(activeQuery.queryKey, true)}\n            </pre>\n          </Code>\n          <span\n            style={{\n              padding: '0.3em .6em',\n              borderRadius: '0.4em',\n              fontWeight: 'bold',\n              textShadow: '0 2px 10px black',\n              background: getQueryStatusColor({\n                queryState: activeQueryState,\n                isStale: isStale,\n                observerCount: observerCount,\n                theme,\n              }),\n              flexShrink: 0,\n            }}\n          >\n            {getQueryStatusLabel(activeQuery)}\n          </span>\n        </div>\n        <div\n          style={{\n            marginBottom: '.5em',\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n          }}\n        >\n          Observers: <Code>{observerCount}</Code>\n        </div>\n        <div\n          style={{\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'space-between',\n          }}\n        >\n          Last Updated:{' '}\n          <Code>\n            {new Date(activeQueryState.dataUpdatedAt).toLocaleTimeString()}\n          </Code>\n        </div>\n      </div>\n      <div\n        style={{\n          background: theme.backgroundAlt,\n          padding: '.5em',\n          position: 'sticky',\n          top: 0,\n          zIndex: 1,\n        }}\n      >\n        Actions\n      </div>\n      <div\n        style={{\n          padding: '0.5em',\n          display: 'flex',\n          flexWrap: 'wrap',\n          gap: '0.5em',\n          alignItems: 'flex-end',\n        }}\n      >\n        <Button\n          type=\"button\"\n          onClick={handleRefetch}\n          disabled={activeQueryState.fetchStatus === 'fetching'}\n          style={{\n            background: theme.active,\n          }}\n        >\n          Refetch\n        </Button>{' '}\n        <Button\n          type=\"button\"\n          onClick={() => queryClient.invalidateQueries(activeQuery)}\n          style={{\n            background: theme.warning,\n            color: theme.inputTextColor,\n          }}\n        >\n          Invalidate\n        </Button>{' '}\n        <Button\n          type=\"button\"\n          onClick={() => queryClient.resetQueries(activeQuery)}\n          style={{\n            background: theme.gray,\n          }}\n        >\n          Reset\n        </Button>{' '}\n        <Button\n          type=\"button\"\n          onClick={() => queryClient.removeQueries(activeQuery)}\n          style={{\n            background: theme.danger,\n          }}\n        >\n          Remove\n        </Button>{' '}\n        <Button\n          type=\"button\"\n          onClick={() => {\n            if (activeQuery.state.data === undefined) {\n              restoreQueryAfterLoadingOrError()\n            } else {\n              const __previousQueryOptions = activeQuery.options\n              // Trigger a fetch in order to trigger suspense as well.\n              activeQuery.fetch({\n                ...__previousQueryOptions,\n                queryFn: () => {\n                  return new Promise(() => {\n                    // Never resolve\n                  })\n                },\n                gcTime: -1,\n              })\n              activeQuery.setState({\n                data: undefined,\n                status: 'pending',\n                // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion\n                fetchMeta: {\n                  ...activeQuery.state.fetchMeta,\n                  __previousQueryOptions,\n                } as any,\n              })\n            }\n          }}\n          style={{\n            background: theme.paused,\n          }}\n        >\n          {activeQuery.state.status === 'pending' ? 'Restore' : 'Trigger'}{' '}\n          loading\n        </Button>{' '}\n        {errorTypes.length === 0 || activeQuery.state.status === 'error' ? (\n          <Button\n            type=\"button\"\n            onClick={() => {\n              if (!activeQuery.state.error) {\n                triggerError()\n              } else {\n                queryClient.resetQueries(activeQuery)\n              }\n            }}\n            style={{\n              background: theme.danger,\n            }}\n          >\n            {activeQuery.state.status === 'error' ? 'Restore' : 'Trigger'} error\n          </Button>\n        ) : (\n          <label>\n            Trigger error:\n            <Select\n              value={currentErrorTypeName ?? ''}\n              style={{ marginInlineStart: '.5em' }}\n              onChange={(e) => {\n                const errorType = errorTypes.find(\n                  (t) => t.name === e.target.value,\n                )\n\n                triggerError(errorType)\n              }}\n            >\n              <option key=\"\" value=\"\" />\n              {errorTypes.map((errorType) => (\n                <option key={errorType.name} value={errorType.name}>\n                  {errorType.name}\n                </option>\n              ))}\n            </Select>\n          </label>\n        )}\n      </div>\n      <div\n        style={{\n          background: theme.backgroundAlt,\n          padding: '.5em',\n          position: 'sticky',\n          top: 0,\n          zIndex: 1,\n        }}\n      >\n        Data Explorer\n      </div>\n      <div\n        style={{\n          padding: '.5em',\n        }}\n      >\n        <Explorer\n          label=\"Data\"\n          value={activeQueryState.data}\n          defaultExpanded={{}}\n          copyable\n        />\n      </div>\n      <div\n        style={{\n          background: theme.backgroundAlt,\n          padding: '.5em',\n          position: 'sticky',\n          top: 0,\n          zIndex: 1,\n        }}\n      >\n        Query Explorer\n      </div>\n      <div\n        style={{\n          padding: '.5em',\n        }}\n      >\n        <Explorer\n          label=\"Query\"\n          value={activeQuery}\n          defaultExpanded={{\n            queryKey: true,\n          }}\n        />\n      </div>\n    </ActiveQueryPanel>\n  )\n}\n\nActiveQuery.displayName = 'ActiveQuery'\n\nexport default ActiveQuery\n"],"names":["noop","ActiveQuery","queryCache","activeQueryHash","queryClient","errorTypes","activeQuery","useSubscribeToQueryCache","getAll","find","query","queryHash","activeQueryState","state","isStale","observerCount","getObserversCount","handleRefetch","promise","fetch","catch","currentErrorTypeName","React","useMemo","error","errorType","type","initializer","toString","name","undefined","triggerError","Error","__previousQueryOptions","options","setState","status","fetchMeta","restoreQueryAfterLoadingOrError","cancelRefetch","padding","background","theme","backgroundAlt","position","top","zIndex","marginBottom","display","alignItems","justifyContent","lineHeight","margin","overflow","displayValue","queryKey","borderRadius","fontWeight","textShadow","getQueryStatusColor","queryState","flexShrink","getQueryStatusLabel","Date","dataUpdatedAt","toLocaleTimeString","flexWrap","gap","fetchStatus","active","invalidateQueries","warning","color","inputTextColor","resetQueries","gray","removeQueries","danger","data","queryFn","Promise","gcTime","paused","length","marginInlineStart","e","t","target","value","map","displayName"],"mappings":"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"}

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

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { QueryClient } from '@tanstack/react-query';
+import type { Side } from '../utils';
+import type { DevToolsErrorType } from '../types';
+interface DevtoolsPanelOptions {
+    /**
+     * The standard React style object used to style a component with inline styles
+     */
+    style?: React.CSSProperties;
+    /**
+     * The standard React className property used to style a component with classes
+     */
+    className?: string;
+    /**
+     * A boolean variable indicating whether the panel is open or closed
+     */
+    isOpen?: boolean;
+    /**
+     * nonce for style element for CSP
+     */
+    styleNonce?: string;
+    /**
+     * A function that toggles the open and close state of the panel
+     */
+    setIsOpen: (isOpen: boolean) => void;
+    /**
+     * Handles the opening and closing the devtools panel
+     */
+    onDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * The position of the React Query devtools panel.
+     * Defaults to 'bottom'.
+     */
+    position?: Side;
+    /**
+     * Handles the panel position select change
+     */
+    onPositionChange?: (side: Side) => void;
+    /**
+     * Show a close button inside the panel
+     */
+    showCloseButton?: boolean;
+    /**
+     * 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.
+     */
+    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
+    /**
+     * Custom instance of QueryClient
+     */
+    queryClient?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: DevToolsErrorType[];
+}
+export declare const ReactQueryDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
+export default ReactQueryDevtoolsPanel;

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

@@ -0,0 +1,310 @@
+import { extends as _extends } from '../_virtual/_rollupPluginBabelHelpers.esm.js';
+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.esm.js';
+import useSubscribeToQueryCache from '../useSubscribeToQueryCache.esm.js';
+import QueryStatusCount from './Header/QueryStatusCount.esm.js';
+import QueryRow from './QueryRow.esm.js';
+import ActiveQuery from './ActiveQuery.esm.js';
+import { sortFns, defaultPanelSize, getResizeHandleStyle } from '../utils.esm.js';
+import { ThemeProvider, defaultTheme } from '../theme.esm.js';
+import useLocalStorage from '../useLocalStorage.esm.js';
+import Logo from '../Logo.esm.js';
+import ScreenReader from '../screenreader.esm.js';
+
+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 != null ? 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 == null ? void 0 : onCloseClick(e);
+    }
+  }), "Close") : null));
+});
+ReactQueryDevtoolsPanel.displayName = 'ReactQueryDevtoolsPanel';
+var ReactQueryDevtoolsPanel$1 = ReactQueryDevtoolsPanel;
+
+export { ReactQueryDevtoolsPanel, ReactQueryDevtoolsPanel$1 as default };
+//# sourceMappingURL=CachePanel.esm.js.map