@tanstack/react-query-devtools 5.0.0-alpha.25 → 5.0.0-alpha.27

package/build/lib/CachePanel/ActiveQuery.mjs

@@ -1,261 +0,0 @@
-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: () => {
-      // Return early if the query is already restoring
-      if (activeQuery.state.fetchStatus === 'fetching' && typeof activeQuery.state.fetchMeta?.__previousQueryOptions === 'undefined') {
-        return;
-      }
-      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

@@ -1 +0,0 @@
-{"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            // Return early if the query is already restoring\n            if (\n              activeQuery.state.fetchStatus === 'fetching' &&\n              typeof (activeQuery.state.fetchMeta as any)\n                ?.__previousQueryOptions === 'undefined'\n            ) {\n              return\n            }\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

@@ -1,58 +0,0 @@
-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;
-//# sourceMappingURL=CachePanel.d.ts.map

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

@@ -1,310 +0,0 @@
-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