@tanstack/react-query-devtools 5.0.0-alpha.1 → 5.0.0-alpha.11

package/build/lib/devtools.js

@@ -1,3 +1,4 @@
+'use client';
 'use strict';
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
@@ -40,7 +41,8 @@ function ReactQueryDevtools({
   containerElement: Container = 'aside',
   queryClient,
   styleNonce,
-  panelPosition: initialPanelPosition = 'bottom'
+  panelPosition: initialPanelPosition = 'bottom',
+  errorTypes = []
 }) {
   const rootRef = React__namespace.useRef(null);
   const panelRef = React__namespace.useRef(null);
@@ -93,7 +95,7 @@ function ReactQueryDevtools({
     document.addEventListener('mouseup', unsub, false);
   };
   React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
+    setIsResolvedOpen(isOpen != null ? isOpen : false);
   }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
   // Toggle panel visibility before/after transition (depending on direction).
@@ -121,7 +123,8 @@ function ReactQueryDevtools({
     return;
   }, [isResolvedOpen]);
   React__namespace.useEffect(() => {
-    if (isResolvedOpen && rootRef.current?.parentElement) {
+    var _rootRef$current;
+    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
       const {
         parentElement
       } = rootRef.current;
@@ -205,7 +208,8 @@ function ReactQueryDevtools({
     style: style,
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
-    onDragStart: e => handleDragStart(panelRef.current, e)
+    onDragStart: e => handleDragStart(panelRef.current, e),
+    errorTypes: errorTypes
   }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({
     type: "button"
   }, otherToggleButtonProps, {
@@ -215,7 +219,7 @@ function ReactQueryDevtools({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick?.(e);
+      onToggleClick == null ? void 0 : onToggleClick(e);
     },
     style: {
       background: 'none',
@@ -268,6 +272,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     showCloseButton,
     position,
     closeButtonProps = {},
+    errorTypes = [],
     ...panelProps
   } = props;
   const {
@@ -401,19 +406,20 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   }, "Bottom")) : null), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      flexWrap: 'wrap',
+      gap: '0.5em'
     }
   }, /*#__PURE__*/React__namespace.createElement(styledComponents.Input, {
     placeholder: "Filter",
     "aria-label": "Filter by queryhash",
-    value: filter ?? '',
+    value: filter != null ? filter : '',
     onChange: e => setFilter(e.target.value),
     onKeyDown: e => {
       if (e.key === 'Escape') setFilter('');
     },
     style: {
       flex: '1',
-      marginRight: '.5em',
       width: '100%'
     }
   }), /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
@@ -445,6 +451,7 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
       } else {
         reactQuery.onlineManager.setOnline(false);
         setMockOffline(true);
+        window.dispatchEvent(new Event('offline'));
       }
     },
     "aria-label": isMockOffline ? 'Restore offline mock' : 'Mock offline behavior',
@@ -513,7 +520,8 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
   }))), activeQueryHash && isOpen ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
-    queryClient: client
+    queryClient: client,
+    errorTypes: errorTypes
   }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers.extends({
     type: "button",
     "aria-controls": "ReactQueryDevtoolsPanel",
@@ -530,26 +538,67 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     },
     onClick: e => {
       setIsOpen(false);
-      onCloseClick?.(e);
+      onCloseClick == null ? void 0 : onCloseClick(e);
     }
   }), "Close") : null));
 });
 const ActiveQuery = ({
   queryCache,
   activeQueryHash,
-  queryClient
+  queryClient,
+  errorTypes
 }) => {
+  var _useSubscribeToQueryC, _useSubscribeToQueryC2;
   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 activeQueryState = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi;
+    return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
+  });
+  const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi2;
+    return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
+  })) != null ? _useSubscribeToQueryC : false;
+  const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$getAll$fi3;
+    return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
+  })) != null ? _useSubscribeToQueryC2 : 0;
   const handleRefetch = () => {
-    const promise = activeQuery?.fetch();
-    promise?.catch(noop);
+    const promise = activeQuery == null ? void 0 : activeQuery.fetch();
+    promise == null ? void 0 : promise.catch(noop);
   };
+  const currentErrorTypeName = React.useMemo(() => {
+    if (activeQuery && activeQueryState != null && activeQueryState.error) {
+      const errorType = errorTypes.find(type => {
+        var _activeQueryState$err;
+        return type.initializer(activeQuery).toString() === ((_activeQueryState$err = activeQueryState.error) == null ? void 0 : _activeQueryState$err.toString());
+      });
+      return errorType == null ? void 0 : errorType.name;
+    }
+    return undefined;
+  }, [activeQuery, activeQueryState == null ? void 0 : activeQueryState.error, errorTypes]);
   if (!activeQuery || !activeQueryState) {
     return null;
   }
+  const triggerError = errorType => {
+    var _errorType$initialize;
+    const error = (_errorType$initialize = errorType == null ? void 0 : errorType.initializer(activeQuery)) != null ? _errorType$initialize : 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__namespace.createElement(styledComponents.ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       padding: '.5em',
@@ -566,7 +615,7 @@ const ActiveQuery = ({
     style: {
       marginBottom: '.5em',
       display: 'flex',
-      alignItems: 'stretch',
+      alignItems: 'flex-start',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React__namespace.createElement(styledComponents.Code, {
@@ -616,7 +665,11 @@ const ActiveQuery = ({
     }
   }, "Actions"), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
-      padding: '0.5em'
+      padding: '0.5em',
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '0.5em',
+      alignItems: 'flex-end'
     }
   }, /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
     type: "button",
@@ -644,7 +697,65 @@ const ActiveQuery = ({
     style: {
       background: theme.defaultTheme.danger
     }
-  }, "Remove")), /*#__PURE__*/React__namespace.createElement("div", {
+  }, "Remove"), ' ', /*#__PURE__*/React__namespace.createElement(styledComponents.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: theme.defaultTheme.paused
+    }
+  }, activeQuery.state.status === 'pending' ? 'Restore' : 'Trigger', ' ', "loading"), ' ', errorTypes.length === 0 || activeQuery.state.status === 'error' ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, {
+    type: "button",
+    onClick: () => {
+      if (!activeQuery.state.error) {
+        triggerError();
+      } else {
+        queryClient.resetQueries(activeQuery);
+      }
+    },
+    style: {
+      background: theme.defaultTheme.danger
+    }
+  }, activeQuery.state.status === 'error' ? 'Restore' : 'Trigger', " error") : /*#__PURE__*/React__namespace.createElement("label", null, "Trigger error:", /*#__PURE__*/React__namespace.createElement(styledComponents.Select, {
+    value: currentErrorTypeName != null ? currentErrorTypeName : '',
+    style: {
+      marginInlineStart: '.5em'
+    },
+    onChange: e => {
+      const errorType = errorTypes.find(t => t.name === e.target.value);
+      triggerError(errorType);
+    }
+  }, /*#__PURE__*/React__namespace.createElement("option", {
+    key: "",
+    value: ""
+  }), errorTypes.map(errorType => /*#__PURE__*/React__namespace.createElement("option", {
+    key: errorType.name,
+    value: errorType.name
+  }, errorType.name))))), /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       background: theme.defaultTheme.backgroundAlt,
       padding: '.5em',
@@ -724,21 +835,37 @@ const QueryRow = /*#__PURE__*/React__namespace.memo(({
   activeQueryHash,
   queryCache
 }) => {
-  const queryHash = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.queryHash) ?? '';
-  const queryState = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.state);
-  const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.isStale()) ?? false;
-  const isDisabled = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.isDisabled()) ?? false;
-  const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.find({
-    queryKey
-  })?.getObserversCount()) ?? 0;
+  var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
+  const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find;
+    return (_queryCache$find = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find.queryHash;
+  })) != null ? _useSubscribeToQueryC3 : '';
+  const queryState = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find2;
+    return (_queryCache$find2 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find2.state;
+  });
+  const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find3;
+    return (_queryCache$find3 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find3.isStale();
+  })) != null ? _useSubscribeToQueryC4 : false;
+  const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find4;
+    return (_queryCache$find4 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find4.isDisabled();
+  })) != null ? _useSubscribeToQueryC5 : false;
+  const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
+    var _queryCache$find5;
+    return (_queryCache$find5 = queryCache.find({
+      queryKey
+    })) == null ? void 0 : _queryCache$find5.getObserversCount();
+  })) != null ? _useSubscribeToQueryC6 : 0;
   if (!queryState) {
     return null;
   }

package/build/lib/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport type {\n  QueryCache,\n  QueryClient,\n  QueryKey as QueryKeyType,\n} from '@tanstack/react-query'\nimport {\n  useQueryClient,\n  onlineManager,\n  notifyManager,\n} from '@tanstack/react-query'\nimport { rankItem } from '@tanstack/match-sorter-utils'\nimport useLocalStorage from './useLocalStorage'\nimport {\n  isVerticalSide,\n  sortFns,\n  useIsMounted,\n  getSidePanelStyle,\n  minPanelSize,\n  getResizeHandleStyle,\n  getSidedProp,\n  defaultPanelSize,\n  displayValue,\n} from './utils'\nimport type { Corner, Side } from './utils'\nimport {\n  Panel,\n  QueryKeys,\n  QueryKey,\n  Button,\n  Code,\n  Input,\n  Select,\n  ActiveQueryPanel,\n} from './styledComponents'\nimport ScreenReader from './screenreader'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\nimport { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\nimport Logo from './Logo'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.ComponentPropsWithoutRef<'div'>\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   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: Corner\n  /**\n   * The position of the React Query devtools panel.\n   * Defaults to 'bottom'.\n   */\n  panelPosition?: Side\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'aside'.\n   */\n  containerElement?: string | any\n  /**\n   * nonce for style element for CSP\n   */\n  styleNonce?: string\n  /**\n   * Custom instance of QueryClient\n   */\n  queryClient?: QueryClient\n}\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\nexport function ReactQueryDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'aside',\n  queryClient,\n  styleNonce,\n  panelPosition: initialPanelPosition = 'bottom',\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'reactQueryDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number>(\n    'reactQueryDevtoolsHeight',\n    defaultPanelSize,\n  )\n  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage<number>(\n    'reactQueryDevtoolsWidth',\n    defaultPanelSize,\n  )\n\n  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage<Side>(\n    'reactQueryDevtoolsPanelPosition',\n    initialPanelPosition,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = React.useState(false)\n  const [isResizing, setIsResizing] = React.useState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (!panelElement) return\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    const isVertical = isVerticalSide(panelPosition)\n    setIsResizing(true)\n\n    const { height, width } = panelElement.getBoundingClientRect()\n    const startX = startEvent.clientX\n    const startY = startEvent.clientY\n    let newSize = 0\n\n    const run = (moveEvent: MouseEvent) => {\n      // prevent mouse selecting stuff with mouse drag\n      moveEvent.preventDefault()\n\n      // calculate the correct size based on mouse position and current panel position\n      // hint: it is different formula for the opposite sides\n      if (isVertical) {\n        newSize =\n          width +\n          (panelPosition === 'right'\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX)\n        setDevtoolsWidth(newSize)\n      } else {\n        newSize =\n          height +\n          (panelPosition === 'bottom'\n            ? startY - moveEvent.clientY\n            : moveEvent.clientY - startY)\n        setDevtoolsHeight(newSize)\n      }\n\n      if (newSize < minPanelSize) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      if (isResizing) {\n        setIsResizing(false)\n      }\n\n      document.removeEventListener('mousemove', run, false)\n      document.removeEventListener('mouseUp', unsub, false)\n    }\n\n    document.addEventListener('mousemove', run, false)\n    document.addEventListener('mouseup', unsub, false)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (!isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen && rootRef.current?.parentElement) {\n      const { parentElement } = rootRef.current\n      const styleProp = getSidedProp('padding', panelPosition)\n      const isVertical = isVerticalSide(panelPosition)\n\n      const previousPaddings = (({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }) => ({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }))(parentElement.style)\n\n      const run = () => {\n        // reset the padding\n        parentElement.style.padding = '0px'\n        parentElement.style.paddingTop = '0px'\n        parentElement.style.paddingBottom = '0px'\n        parentElement.style.paddingLeft = '0px'\n        parentElement.style.paddingRight = '0px'\n        // set the new padding based on the new panel position\n\n        parentElement.style[styleProp] = `${\n          isVertical ? devtoolsWidth : devtoolsHeight\n        }px`\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          Object.entries(previousPaddings).forEach(\n            ([property, previousValue]) => {\n              parentElement.style[property as keyof typeof previousPaddings] =\n                previousValue\n            },\n          )\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // get computed style based on panel position\n  const style = getSidePanelStyle({\n    position: panelPosition,\n    devtoolsTheme: theme,\n    isOpen: isResolvedOpen,\n    height: devtoolsHeight,\n    width: devtoolsWidth,\n    isResizing,\n    panelStyle,\n  })\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container\n      ref={rootRef}\n      className=\"ReactQueryDevtools\"\n      aria-label=\"React Query Devtools\"\n    >\n      <ThemeProvider theme={theme}>\n        <ReactQueryDevtoolsPanel\n          ref={panelRef as any}\n          queryClient={queryClient}\n          styleNonce={styleNonce}\n          position={panelPosition}\n          onPositionChange={setPanelPosition}\n          showCloseButton\n          closeButtonProps={closeButtonProps}\n          {...otherPanelProps}\n          style={style}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          onDragStart={(e) => handleDragStart(panelRef.current, e)}\n        />\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open React Query Devtools\"\n          aria-controls=\"ReactQueryDevtoolsPanel\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick?.(e)\n          }}\n          style={{\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n              ? {\n                  top: '0',\n                  left: '0',\n                }\n              : position === 'bottom-right'\n              ? {\n                  bottom: '0',\n                  right: '0',\n                }\n              : {\n                  bottom: '0',\n                  left: '0',\n                }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n          <ScreenReader text=\"Open React Query Devtools\" />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nconst useSubscribeToQueryCache = <T,>(\n  queryCache: QueryCache,\n  getSnapshot: () => T,\n  skip: boolean = false,\n): T => {\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        if (!skip)\n          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n        return () => {\n          return\n        }\n      },\n      [queryCache, skip],\n    ),\n    getSnapshot,\n    getSnapshot,\n  )\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    ...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                  }}\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                      marginRight: '.5em',\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                    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                      }\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          />\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\nconst ActiveQuery = ({\n  queryCache,\n  activeQueryHash,\n  queryClient,\n}: {\n  queryCache: QueryCache\n  activeQueryHash: string\n  queryClient: QueryClient\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  if (!activeQuery || !activeQueryState) {\n    return null\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: 'stretch',\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        }}\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      </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\nconst QueryStatusCount = ({ queryCache }: { queryCache: QueryCache }) => {\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\ninterface QueryRowProps {\n  queryKey: QueryKeyType\n  setActiveQueryHash: (hash: string) => void\n  activeQueryHash?: string\n  queryCache: QueryCache\n}\n\nconst QueryRow = React.memo(\n  ({\n    queryKey,\n    setActiveQueryHash,\n    activeQueryHash,\n    queryCache,\n  }: QueryRowProps) => {\n    const queryHash =\n      useSubscribeToQueryCache(\n        queryCache,\n        () => queryCache.find({ queryKey })?.queryHash,\n      ) ?? ''\n\n    const queryState = useSubscribeToQueryCache(\n      queryCache,\n      () => queryCache.find({ queryKey })?.state,\n    )\n\n    const isStale =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.isStale(),\n      ) ?? false\n\n    const isDisabled =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.isDisabled(),\n      ) ?? false\n\n    const observerCount =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.getObserversCount(),\n      ) ?? 0\n\n    if (!queryState) {\n      return null\n    }\n\n    return (\n      <div\n        role=\"button\"\n        aria-label={`Open query details for ${queryHash}`}\n        onClick={() =>\n          setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)\n        }\n        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: 'pointer',\n          background:\n            queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,\n        }}\n      >\n        <div\n          style={{\n            flex: '0 0 auto',\n            width: '2em',\n            height: '2em',\n            background: getQueryStatusColor({\n              queryState,\n              isStale,\n              observerCount,\n              theme,\n            }),\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontWeight: 'bold',\n            textShadow: isStale ? '0' : '0 0 10px black',\n            color: isStale ? 'black' : 'white',\n          }}\n        >\n          {observerCount}\n        </div>\n        {isDisabled ? (\n          <div\n            style={{\n              flex: '0 0 auto',\n              height: '2em',\n              background: theme.gray,\n              display: 'flex',\n              alignItems: 'center',\n              fontWeight: 'bold',\n              padding: '0 0.5em',\n            }}\n          >\n            disabled\n          </div>\n        ) : null}\n        <Code\n          style={{\n            padding: '.5em',\n          }}\n        >\n          {`${queryHash}`}\n        </Code>\n      </div>\n    )\n  },\n)\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nfunction noop() {}\n"],"names":["ReactQueryDevtools","initialIsOpen","panelProps","closeButtonProps","toggleButtonProps","position","containerElement","Container","queryClient","styleNonce","panelPosition","initialPanelPosition","rootRef","React","useRef","panelRef","isOpen","setIsOpen","useLocalStorage","devtoolsHeight","setDevtoolsHeight","defaultPanelSize","devtoolsWidth","setDevtoolsWidth","setPanelPosition","isResolvedOpen","setIsResolvedOpen","useState","isResizing","setIsResizing","isMounted","useIsMounted","handleDragStart","panelElement","startEvent","button","isVertical","isVerticalSide","height","width","getBoundingClientRect","startX","clientX","startY","clientY","newSize","run","moveEvent","preventDefault","minPanelSize","unsub","document","removeEventListener","addEventListener","useEffect","ref","current","handlePanelTransitionStart","style","visibility","handlePanelTransitionEnd","parentElement","styleProp","getSidedProp","previousPaddings","padding","paddingTop","paddingBottom","paddingLeft","paddingRight","window","Object","entries","forEach","property","previousValue","panelStyle","otherPanelProps","toggleButtonStyle","onClick","onToggleClick","otherToggleButtonProps","getSidePanelStyle","devtoolsTheme","theme","ThemeProvider","_extends","e","background","border","zIndex","display","fontSize","margin","cursor","top","right","left","bottom","Logo","ScreenReader","useSubscribeToQueryCache","queryCache","getSnapshot","skip","useSyncExternalStore","useCallback","onStoreChange","subscribe","notifyManager","batchCalls","ReactQueryDevtoolsPanel","forwardRef","props","onDragStart","onPositionChange","showCloseButton","onCloseClick","otherCloseButtonProps","client","useQueryClient","getQueryCache","sort","setSort","keys","sortFns","filter","setFilter","baseSort","setBaseSort","sortFn","useMemo","queriesCount","getAll","length","activeQueryHash","setActiveQueryHash","queries","unsortedQueries","filtered","item","rankItem","queryHash","passed","sorted","a","b","isMockOffline","setMockOffline","Panel","__html","backgroundAlt","gray","getResizeHandleStyle","flex","minHeight","maxHeight","overflow","borderRight","grayAlt","flexDirection","justifyContent","alignItems","marginRight","marginBottom","Select","marginInlineStart","target","value","Input","key","minWidth","map","Button","old","onlineManager","setOnline","undefined","dispatchEvent","Event","danger","overflowY","query","queryKey","ActiveQuery","activeQuery","find","activeQueryState","state","isStale","observerCount","getObserversCount","handleRefetch","promise","fetch","catch","noop","ActiveQueryPanel","Code","lineHeight","displayValue","borderRadius","fontWeight","textShadow","getQueryStatusColor","queryState","flexShrink","getQueryStatusLabel","Date","dataUpdatedAt","toLocaleTimeString","fetchStatus","active","invalidateQueries","warning","color","inputTextColor","resetQueries","removeQueries","Explorer","data","QueryStatusCount","hasFresh","q","hasFetching","hasPaused","hasStale","hasInactive","QueryKeys","QueryKey","success","opacity","paused","QueryRow","memo","isDisabled","borderBottom"],"mappings":"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"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport type {\n  QueryCache,\n  QueryClient,\n  QueryKey as QueryKeyType,\n  Query,\n  DefaultError,\n} from '@tanstack/react-query'\nimport {\n  useQueryClient,\n  onlineManager,\n  notifyManager,\n} from '@tanstack/react-query'\nimport { rankItem } from '@tanstack/match-sorter-utils'\nimport useLocalStorage from './useLocalStorage'\nimport {\n  isVerticalSide,\n  sortFns,\n  useIsMounted,\n  getSidePanelStyle,\n  minPanelSize,\n  getResizeHandleStyle,\n  getSidedProp,\n  defaultPanelSize,\n  displayValue,\n} from './utils'\nimport type { Corner, Side } from './utils'\nimport {\n  Panel,\n  QueryKeys,\n  QueryKey,\n  Button,\n  Code,\n  Input,\n  Select,\n  ActiveQueryPanel,\n} from './styledComponents'\nimport ScreenReader from './screenreader'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\nimport { getQueryStatusLabel, getQueryStatusColor } from './utils'\nimport Explorer from './Explorer'\nimport Logo from './Logo'\nimport { useMemo } from 'react'\n\nexport interface DevToolsErrorType {\n  /**\n   * The name of the error.\n   */\n  name: string\n  /**\n   * How the error is initialized.\n   */\n  initializer: (query: Query) => DefaultError\n}\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.ComponentPropsWithoutRef<'div'>\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   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: Corner\n  /**\n   * The position of the React Query devtools panel.\n   * Defaults to 'bottom'.\n   */\n  panelPosition?: Side\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'aside'.\n   */\n  containerElement?: string | any\n  /**\n   * nonce for style element for CSP\n   */\n  styleNonce?: string\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\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 function ReactQueryDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'aside',\n  queryClient,\n  styleNonce,\n  panelPosition: initialPanelPosition = 'bottom',\n  errorTypes = [],\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'reactQueryDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number>(\n    'reactQueryDevtoolsHeight',\n    defaultPanelSize,\n  )\n  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage<number>(\n    'reactQueryDevtoolsWidth',\n    defaultPanelSize,\n  )\n\n  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage<Side>(\n    'reactQueryDevtoolsPanelPosition',\n    initialPanelPosition,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = React.useState(false)\n  const [isResizing, setIsResizing] = React.useState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (!panelElement) return\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    const isVertical = isVerticalSide(panelPosition)\n    setIsResizing(true)\n\n    const { height, width } = panelElement.getBoundingClientRect()\n    const startX = startEvent.clientX\n    const startY = startEvent.clientY\n    let newSize = 0\n\n    const run = (moveEvent: MouseEvent) => {\n      // prevent mouse selecting stuff with mouse drag\n      moveEvent.preventDefault()\n\n      // calculate the correct size based on mouse position and current panel position\n      // hint: it is different formula for the opposite sides\n      if (isVertical) {\n        newSize =\n          width +\n          (panelPosition === 'right'\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX)\n        setDevtoolsWidth(newSize)\n      } else {\n        newSize =\n          height +\n          (panelPosition === 'bottom'\n            ? startY - moveEvent.clientY\n            : moveEvent.clientY - startY)\n        setDevtoolsHeight(newSize)\n      }\n\n      if (newSize < minPanelSize) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      if (isResizing) {\n        setIsResizing(false)\n      }\n\n      document.removeEventListener('mousemove', run, false)\n      document.removeEventListener('mouseUp', unsub, false)\n    }\n\n    document.addEventListener('mousemove', run, false)\n    document.addEventListener('mouseup', unsub, false)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (!isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen && rootRef.current?.parentElement) {\n      const { parentElement } = rootRef.current\n      const styleProp = getSidedProp('padding', panelPosition)\n      const isVertical = isVerticalSide(panelPosition)\n\n      const previousPaddings = (({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }) => ({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }))(parentElement.style)\n\n      const run = () => {\n        // reset the padding\n        parentElement.style.padding = '0px'\n        parentElement.style.paddingTop = '0px'\n        parentElement.style.paddingBottom = '0px'\n        parentElement.style.paddingLeft = '0px'\n        parentElement.style.paddingRight = '0px'\n        // set the new padding based on the new panel position\n\n        parentElement.style[styleProp] = `${\n          isVertical ? devtoolsWidth : devtoolsHeight\n        }px`\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          Object.entries(previousPaddings).forEach(\n            ([property, previousValue]) => {\n              parentElement.style[property as keyof typeof previousPaddings] =\n                previousValue\n            },\n          )\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // get computed style based on panel position\n  const style = getSidePanelStyle({\n    position: panelPosition,\n    devtoolsTheme: theme,\n    isOpen: isResolvedOpen,\n    height: devtoolsHeight,\n    width: devtoolsWidth,\n    isResizing,\n    panelStyle,\n  })\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container\n      ref={rootRef}\n      className=\"ReactQueryDevtools\"\n      aria-label=\"React Query Devtools\"\n    >\n      <ThemeProvider theme={theme}>\n        <ReactQueryDevtoolsPanel\n          ref={panelRef as any}\n          queryClient={queryClient}\n          styleNonce={styleNonce}\n          position={panelPosition}\n          onPositionChange={setPanelPosition}\n          showCloseButton\n          closeButtonProps={closeButtonProps}\n          {...otherPanelProps}\n          style={style}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          onDragStart={(e) => handleDragStart(panelRef.current, e)}\n          errorTypes={errorTypes}\n        />\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open React Query Devtools\"\n          aria-controls=\"ReactQueryDevtoolsPanel\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick?.(e)\n          }}\n          style={{\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n              ? {\n                  top: '0',\n                  left: '0',\n                }\n              : position === 'bottom-right'\n              ? {\n                  bottom: '0',\n                  right: '0',\n                }\n              : {\n                  bottom: '0',\n                  left: '0',\n                }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n          <ScreenReader text=\"Open React Query Devtools\" />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n\nconst useSubscribeToQueryCache = <T,>(\n  queryCache: QueryCache,\n  getSnapshot: () => T,\n  skip: boolean = false,\n): T => {\n  return React.useSyncExternalStore(\n    React.useCallback(\n      (onStoreChange) => {\n        if (!skip)\n          return queryCache.subscribe(notifyManager.batchCalls(onStoreChange))\n        return () => {\n          return\n        }\n      },\n      [queryCache, skip],\n    ),\n    getSnapshot,\n    getSnapshot,\n  )\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                    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\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 = 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\nconst QueryStatusCount = ({ queryCache }: { queryCache: QueryCache }) => {\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\ninterface QueryRowProps {\n  queryKey: QueryKeyType\n  setActiveQueryHash: (hash: string) => void\n  activeQueryHash?: string\n  queryCache: QueryCache\n}\n\nconst QueryRow = React.memo(\n  ({\n    queryKey,\n    setActiveQueryHash,\n    activeQueryHash,\n    queryCache,\n  }: QueryRowProps) => {\n    const queryHash =\n      useSubscribeToQueryCache(\n        queryCache,\n        () => queryCache.find({ queryKey })?.queryHash,\n      ) ?? ''\n\n    const queryState = useSubscribeToQueryCache(\n      queryCache,\n      () => queryCache.find({ queryKey })?.state,\n    )\n\n    const isStale =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.isStale(),\n      ) ?? false\n\n    const isDisabled =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.isDisabled(),\n      ) ?? false\n\n    const observerCount =\n      useSubscribeToQueryCache(queryCache, () =>\n        queryCache.find({ queryKey })?.getObserversCount(),\n      ) ?? 0\n\n    if (!queryState) {\n      return null\n    }\n\n    return (\n      <div\n        role=\"button\"\n        aria-label={`Open query details for ${queryHash}`}\n        onClick={() =>\n          setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash)\n        }\n        style={{\n          display: 'flex',\n          borderBottom: `solid 1px ${theme.grayAlt}`,\n          cursor: 'pointer',\n          background:\n            queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined,\n        }}\n      >\n        <div\n          style={{\n            flex: '0 0 auto',\n            width: '2em',\n            height: '2em',\n            background: getQueryStatusColor({\n              queryState,\n              isStale,\n              observerCount,\n              theme,\n            }),\n            display: 'flex',\n            alignItems: 'center',\n            justifyContent: 'center',\n            fontWeight: 'bold',\n            textShadow: isStale ? '0' : '0 0 10px black',\n            color: isStale ? 'black' : 'white',\n          }}\n        >\n          {observerCount}\n        </div>\n        {isDisabled ? (\n          <div\n            style={{\n              flex: '0 0 auto',\n              height: '2em',\n              background: theme.gray,\n              display: 'flex',\n              alignItems: 'center',\n              fontWeight: 'bold',\n              padding: '0 0.5em',\n            }}\n          >\n            disabled\n          </div>\n        ) : null}\n        <Code\n          style={{\n            padding: '.5em',\n          }}\n        >\n          {`${queryHash}`}\n        </Code>\n      </div>\n    )\n  },\n)\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nfunction noop() {}\n"],"names":["position","errorTypes","width","newSize","setIsResolvedOpen","ref","parentElement","paddingRight","run","window","Object","style","onClick","devtoolsTheme","isOpen","height","panelStyle","onToggleClick","background","border","padding","zIndex","display","fontSize","margin","cursor","top","right","left","bottom","ReactQueryDevtoolsPanel","__html","flex","minHeight","maxHeight","overflow","borderRight","flexDirection","justifyContent","alignItems","marginRight","marginBottom","marginInlineStart","flexWrap","gap","minWidth","onlineManager","overflowY","onCloseClick","promise","status","fetchMeta","__previousQueryOptions","cancelRefetch","lineHeight","borderRadius","fontWeight","textShadow","queryState","isStale","observerCount","theme","flexShrink","restoreQueryAfterLoadingOrError","queryFn","gcTime","data","triggerError","queryClient","queryKey","queryCache","opacity","color","borderBottom"],"mappings":"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C;AACF;AACF;;;;AAOI;AACAC;AACF;;;AAOE;AACEjC;;AAEApB;AACA0B;AACAL;AACF;;AAKA;AACED;AACF;;AAGE;AACEqB;AACAnB;AACAiB;AACAD;AACF;AAAE;AAGA;AACEgB;AACF;;AAGE;AACE9B;AACAJ;AACAe;AACF;;AAMF;AACEf;AACAmC;AACAC;AACAC;;AAEEC;AACAC;AACAC;AACAC;AACF;AACAC;AACF;AAAE;AAMJ;AACErB;AACAnB;AACAiB;AACAD;AACF;AAAE;AAKF;AACEhB;AACAiB;AACAD;AACF;;AASF;;AAEElB;AACApB;AACA0B;AACAL;AACF;;AAKA;AACED;AACAE;AACAqB;AACAC;AACAL;AACF;AAAE;AAGA;AACA;AACA;AACA;;AAEA;AAAE;AAKF;AACA;AACA;;;AAGA;AAAE;AAKF;AACA;AACA;;AAEA;AAAE;AAKF;AACA;AACA;;AAEA;AAAE;AAKF;AACA;AACE;AACEwB;AACF;AACE;AACA;;AAEE;AACAC;;AAEI;AAAA;;AAGJC;AACF;;AAEEC;AACAhB;AACA;AACAC;AACE;AACAC;AACF;AACF;AACF;;AAEF;;AAEA;AAAE;AAOA;AACA;AACE;AACEe;AACF;AACEC;AACF;;AAEF;;AAEA;AAAE;AAQA;AACA;AAAS1B;;;AAEP;;AAKF;;AAEQ;AAAO;AAAQ;;;;AAW7B;;AAEEtB;AACApB;AACA0B;AACAL;AACF;;AAKA;AACED;AACF;AAAE;AAGA;;;;AAGQ;AAIV;;AAEEA;AACApB;AACA0B;AACAL;AACF;;AAKA;AACED;AACF;AAAE;AAGA;AACA;AACA;AACEiD;AACF;AAAE;AAKZ;AAEA;AAA4BC;AAAuC;;;;;;AA+BjE;AAGM;;AAEEC;AACF;AAAE;AAKF;;AAEEA;AACF;AAAE;AAKF;;AAEEA;AACF;AAAE;AAKF;;AAEEC;AACAf;AACAc;AACF;AAAE;AAKF;;AAEEA;AACF;;AAMR;AASA;;;;AAKID;AACa;AAAM;AACnB;AAGI;;AAAwBD;;AAAsB;AAGlD;AAEE;;AAAwBA;;;AAG1B;AACuC;;AACjBA;AAAS;AAAa;AAG5C;AACuC;;AACjBA;AAAS;AAAgB;AAG/C;AACuC;;AACjBA;AAAS;AAAuB;;AAIpD;AACF;;AAII;;;AAKA;AACE/C;AACAmD;AACAhD;AACAP;AAEF;;AAGE;AACEc;AACA9B;AACAa;;;;;AAKE8C;AACF;AACAvC;AACAiB;AACAD;AACAkB;AACAC;AACAe;AACF;AAAE;AAMA;AACExC;AACAjB;;AAEAO;AACAiB;AACAiB;AACApC;AACF;AAAE;AAMJ;AACEA;AACF;AAAE;AAMV;;AAGF;AACA;;;"}