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

package/build/umd/index.development.js

@@ -4,10 +4,7 @@
   (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactQueryDevtools = {}, global.React, global.ReactQuery));
 })(this, (function (exports, React, reactQuery) { 'use strict';
 
-  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-  function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
+  function _interopNamespaceDefault(e) {
     var n = Object.create(null);
     if (e) {
       Object.keys(e).forEach(function (k) {
@@ -20,285 +17,27 @@
         }
       });
     }
-    n["default"] = e;
+    n.default = e;
     return Object.freeze(n);
   }
 
-  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
   }
 
-  var shim = {exports: {}};
-
-  var useSyncExternalStoreShim_development = {};
-
-  /**
-   * @license React
-   * use-sync-external-store-shim.development.js
-   *
-   * Copyright (c) Facebook, Inc. and its affiliates.
-   *
-   * This source code is licensed under the MIT license found in the
-   * LICENSE file in the root directory of this source tree.
-   */
-
-  var hasRequiredUseSyncExternalStoreShim_development;
-
-  function requireUseSyncExternalStoreShim_development () {
-  	if (hasRequiredUseSyncExternalStoreShim_development) return useSyncExternalStoreShim_development;
-  	hasRequiredUseSyncExternalStoreShim_development = 1;
-
-  	{
-  	  (function() {
-
-  	/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  	if (
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart ===
-  	    'function'
-  	) {
-  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error());
-  	}
-  	          var React = React__default["default"];
-
-  	var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-
-  	function error(format) {
-  	  {
-  	    {
-  	      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-  	        args[_key2 - 1] = arguments[_key2];
-  	      }
-
-  	      printWarning('error', format, args);
-  	    }
-  	  }
-  	}
-
-  	function printWarning(level, format, args) {
-  	  // When changing this logic, you might want to also
-  	  // update consoleWithStackDev.www.js as well.
-  	  {
-  	    var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
-  	    var stack = ReactDebugCurrentFrame.getStackAddendum();
-
-  	    if (stack !== '') {
-  	      format += '%s';
-  	      args = args.concat([stack]);
-  	    } // eslint-disable-next-line react-internal/safe-string-coercion
-
-
-  	    var argsWithFormat = args.map(function (item) {
-  	      return String(item);
-  	    }); // Careful: RN currently depends on this prefix
-
-  	    argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
-  	    // breaks IE9: https://github.com/facebook/react/issues/13610
-  	    // eslint-disable-next-line react-internal/no-production-logging
-
-  	    Function.prototype.apply.call(console[level], console, argsWithFormat);
-  	  }
-  	}
-
-  	/**
-  	 * inlined Object.is polyfill to avoid requiring consumers ship their own
-  	 * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is
-  	 */
-  	function is(x, y) {
-  	  return x === y && (x !== 0 || 1 / x === 1 / y) || x !== x && y !== y // eslint-disable-line no-self-compare
-  	  ;
-  	}
-
-  	var objectIs = typeof Object.is === 'function' ? Object.is : is;
-
-  	// dispatch for CommonJS interop named imports.
-
-  	var useState = React.useState,
-  	    useEffect = React.useEffect,
-  	    useLayoutEffect = React.useLayoutEffect,
-  	    useDebugValue = React.useDebugValue;
-  	var didWarnOld18Alpha = false;
-  	var didWarnUncachedGetSnapshot = false; // Disclaimer: This shim breaks many of the rules of React, and only works
-  	// because of a very particular set of implementation details and assumptions
-  	// -- change any one of them and it will break. The most important assumption
-  	// is that updates are always synchronous, because concurrent rendering is
-  	// only available in versions of React that also have a built-in
-  	// useSyncExternalStore API. And we only use this shim when the built-in API
-  	// does not exist.
-  	//
-  	// Do not assume that the clever hacks used by this hook also work in general.
-  	// The point of this shim is to replace the need for hacks by other libraries.
-
-  	function useSyncExternalStore(subscribe, getSnapshot, // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-  	// React do not expose a way to check if we're hydrating. So users of the shim
-  	// will need to track that themselves and return the correct value
-  	// from `getSnapshot`.
-  	getServerSnapshot) {
-  	  {
-  	    if (!didWarnOld18Alpha) {
-  	      if (React.startTransition !== undefined) {
-  	        didWarnOld18Alpha = true;
-
-  	        error('You are using an outdated, pre-release alpha of React 18 that ' + 'does not support useSyncExternalStore. The ' + 'use-sync-external-store shim will not work correctly. Upgrade ' + 'to a newer pre-release.');
-  	      }
-  	    }
-  	  } // Read the current snapshot from the store on every render. Again, this
-  	  // breaks the rules of React, and only works here because of specific
-  	  // implementation details, most importantly that updates are
-  	  // always synchronous.
-
-
-  	  var value = getSnapshot();
-
-  	  {
-  	    if (!didWarnUncachedGetSnapshot) {
-  	      var cachedValue = getSnapshot();
-
-  	      if (!objectIs(value, cachedValue)) {
-  	        error('The result of getSnapshot should be cached to avoid an infinite loop');
-
-  	        didWarnUncachedGetSnapshot = true;
-  	      }
-  	    }
-  	  } // Because updates are synchronous, we don't queue them. Instead we force a
-  	  // re-render whenever the subscribed state changes by updating an some
-  	  // arbitrary useState hook. Then, during render, we call getSnapshot to read
-  	  // the current value.
-  	  //
-  	  // Because we don't actually use the state returned by the useState hook, we
-  	  // can save a bit of memory by storing other stuff in that slot.
-  	  //
-  	  // To implement the early bailout, we need to track some things on a mutable
-  	  // object. Usually, we would put that in a useRef hook, but we can stash it in
-  	  // our useState hook instead.
-  	  //
-  	  // To force a re-render, we call forceUpdate({inst}). That works because the
-  	  // new object always fails an equality check.
-
-
-  	  var _useState = useState({
-  	    inst: {
-  	      value: value,
-  	      getSnapshot: getSnapshot
-  	    }
-  	  }),
-  	      inst = _useState[0].inst,
-  	      forceUpdate = _useState[1]; // Track the latest getSnapshot function with a ref. This needs to be updated
-  	  // in the layout phase so we can access it during the tearing check that
-  	  // happens on subscribe.
-
-
-  	  useLayoutEffect(function () {
-  	    inst.value = value;
-  	    inst.getSnapshot = getSnapshot; // Whenever getSnapshot or subscribe changes, we need to check in the
-  	    // commit phase if there was an interleaved mutation. In concurrent mode
-  	    // this can happen all the time, but even in synchronous mode, an earlier
-  	    // effect may have mutated the store.
-
-  	    if (checkIfSnapshotChanged(inst)) {
-  	      // Force a re-render.
-  	      forceUpdate({
-  	        inst: inst
-  	      });
-  	    }
-  	  }, [subscribe, value, getSnapshot]);
-  	  useEffect(function () {
-  	    // Check for changes right before subscribing. Subsequent changes will be
-  	    // detected in the subscription handler.
-  	    if (checkIfSnapshotChanged(inst)) {
-  	      // Force a re-render.
-  	      forceUpdate({
-  	        inst: inst
-  	      });
-  	    }
-
-  	    var handleStoreChange = function () {
-  	      // TODO: Because there is no cross-renderer API for batching updates, it's
-  	      // up to the consumer of this library to wrap their subscription event
-  	      // with unstable_batchedUpdates. Should we try to detect when this isn't
-  	      // the case and print a warning in development?
-  	      // The store changed. Check if the snapshot changed since the last time we
-  	      // read from the store.
-  	      if (checkIfSnapshotChanged(inst)) {
-  	        // Force a re-render.
-  	        forceUpdate({
-  	          inst: inst
-  	        });
-  	      }
-  	    }; // Subscribe to the store and return a clean-up function.
-
-
-  	    return subscribe(handleStoreChange);
-  	  }, [subscribe]);
-  	  useDebugValue(value);
-  	  return value;
-  	}
-
-  	function checkIfSnapshotChanged(inst) {
-  	  var latestGetSnapshot = inst.getSnapshot;
-  	  var prevValue = inst.value;
-
-  	  try {
-  	    var nextValue = latestGetSnapshot();
-  	    return !objectIs(prevValue, nextValue);
-  	  } catch (error) {
-  	    return true;
-  	  }
-  	}
-
-  	function useSyncExternalStore$1(subscribe, getSnapshot, getServerSnapshot) {
-  	  // Note: The shim does not use getServerSnapshot, because pre-18 versions of
-  	  // React do not expose a way to check if we're hydrating. So users of the shim
-  	  // will need to track that themselves and return the correct value
-  	  // from `getSnapshot`.
-  	  return getSnapshot();
-  	}
-
-  	var canUseDOM = !!(typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined');
-
-  	var isServerEnvironment = !canUseDOM;
-
-  	var shim = isServerEnvironment ? useSyncExternalStore$1 : useSyncExternalStore;
-  	var useSyncExternalStore$2 = React.useSyncExternalStore !== undefined ? React.useSyncExternalStore : shim;
-
-  	useSyncExternalStoreShim_development.useSyncExternalStore = useSyncExternalStore$2;
-  	          /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */
-  	if (
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  	  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop ===
-  	    'function'
-  	) {
-  	  __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop(new Error());
-  	}
-  	        
-  	  })();
-  	}
-  	return useSyncExternalStoreShim_development;
-  }
-
-  (function (module) {
-
-  	{
-  	  module.exports = requireUseSyncExternalStoreShim_development();
-  	}
-  } (shim));
-
   /**
    * match-sorter-utils
    *
@@ -1000,22 +739,18 @@
   const getItem = key => {
     try {
       const itemValue = localStorage.getItem(key);
-
       if (typeof itemValue === 'string') {
         return JSON.parse(itemValue);
       }
-
       return undefined;
     } catch {
       return undefined;
     }
   };
-
   function useLocalStorage(key, defaultValue) {
     const [value, setValue] = React__namespace.useState();
     React__namespace.useEffect(() => {
       const initialValue = getItem(key);
-
       if (typeof initialValue === 'undefined' || initialValue === null) {
         setValue(typeof defaultValue === 'function' ? defaultValue() : defaultValue);
       } else {
@@ -1025,15 +760,12 @@
     const setter = React__namespace.useCallback(updater => {
       setValue(old => {
         let newVal = updater;
-
         if (typeof updater == 'function') {
           newVal = updater(old);
         }
-
         try {
           localStorage.setItem(key, JSON.stringify(newVal));
         } catch {}
-
         return newVal;
       });
     }, [key]);
@@ -2020,27 +1752,27 @@
       if (typeof window !== 'undefined') {
         return window.matchMedia(query).matches;
       }
-
       return;
-    }); // Watch for changes
+    });
 
+    // Watch for changes
     React__namespace.useEffect(() => {
       if (typeof window !== 'undefined') {
         // Create a matcher
-        const matcher = window.matchMedia(query); // Create our handler
+        const matcher = window.matchMedia(query);
 
+        // Create our handler
         const onChange = ({
           matches
-        }) => setIsMatch(matches); // Listen for changes
-
+        }) => setIsMatch(matches);
 
+        // Listen for changes
         matcher.addListener(onChange);
         return () => {
           // Stop listening for changes
           matcher.removeListener(onChange);
         };
       }
-
       return;
     }, [isMatch, query, setIsMatch]);
     return isMatch;
@@ -2065,12 +1797,15 @@
       const theme = useTheme();
       const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        return useMediaQuery(key) ? { ...current,
+        return useMediaQuery(key) ? {
+          ...current,
           ...(typeof value === 'function' ? value(rest, theme) : value)
         } : current;
       }, {});
-      return /*#__PURE__*/React__namespace.createElement(type, { ...rest,
-        style: { ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
+      return /*#__PURE__*/React__namespace.createElement(type, {
+        ...rest,
+        style: {
+          ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
           ...style,
           ...mediaStyles
         },
@@ -2089,33 +1824,30 @@
     }, []);
     return isMounted;
   }
+
   /**
    * Displays a string regardless the type of the data
    * @param {unknown} value Value to be stringified
    * @param {boolean} beautify Formats json to multiline
    */
-
   const displayValue = (value, beautify = false) => {
     const {
       json
     } = superjson.serialize(value);
     return JSON.stringify(json, null, beautify ? 2 : undefined);
-  }; // Sorting functions
+  };
 
-  const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
+  // Sorting functions
 
+  const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
   const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
-
   const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
-
   const statusAndDateSort = (a, b) => {
     if (getStatusRank(a) === getStatusRank(b)) {
       return dateSort(a, b);
     }
-
     return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
   };
-
   const sortFns = {
     'Status > Last Updated': statusAndDateSort,
     'Query Hash': queryHashSort,
@@ -2129,7 +1861,6 @@
     left: 'right',
     right: 'left'
   };
-
   /**
    * Check if the given side is vertical (left/right)
    */
@@ -2139,7 +1870,6 @@
   /**
    * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
    */
-
   function getOppositeSide(side) {
     return sides[side];
   }
@@ -2147,9 +1877,8 @@
    * Given as css prop it will return a sided css prop based on a given side
    * Example given `border` and `right` it return `borderRight`
    */
-
   function getSidedProp(prop, side) {
-    return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+    return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
   }
   function getSidePanelStyle({
     position = 'bottom',
@@ -2163,29 +1892,30 @@
     const oppositeSide = getOppositeSide(position);
     const borderSide = getSidedProp('border', oppositeSide);
     const isVertical = isVerticalSide(position);
-    return { ...panelStyle,
+    return {
+      ...panelStyle,
       direction: 'ltr',
       position: 'fixed',
       [position]: 0,
-      [borderSide]: "1px solid " + devtoolsTheme.gray,
+      [borderSide]: `1px solid ${devtoolsTheme.gray}`,
       transformOrigin: oppositeSide,
       boxShadow: '0 0 20px rgba(0,0,0,.3)',
       zIndex: 99999,
       // visibility will be toggled after transitions, but set initial state here
       visibility: isOpen ? 'visible' : 'hidden',
       ...(isResizing ? {
-        transition: "none"
+        transition: `none`
       } : {
-        transition: "all .2s ease"
+        transition: `all .2s ease`
       }),
       ...(isOpen ? {
         opacity: 1,
         pointerEvents: 'all',
-        transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+        transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
       } : {
         opacity: 0,
         pointerEvents: 'none',
-        transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+        transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
       }),
       ...(isVertical ? {
         top: 0,
@@ -2200,10 +1930,10 @@
       })
     };
   }
+
   /**
    * Get resize handle style based on a given side
    */
-
   function getResizeHandleStyle(position = 'bottom') {
     const isVertical = isVerticalSide(position);
     const oppositeSide = getOppositeSide(position);
@@ -2213,7 +1943,7 @@
       cursor: isVertical ? 'col-resize' : 'row-resize',
       zIndex: 100000,
       [oppositeSide]: 0,
-      [marginSide]: "-4px",
+      [marginSide]: `-4px`,
       ...(isVertical ? {
         top: 0,
         height: '100%',
@@ -2227,7 +1957,7 @@
 
   const Panel = styled('div', (_props, theme) => ({
     fontSize: 'clamp(12px, 1.5vw, 14px)',
-    fontFamily: "sans-serif",
+    fontFamily: `sans-serif`,
     display: 'flex',
     backgroundColor: theme.background,
     color: theme.foreground
@@ -2236,10 +1966,11 @@
       flexDirection: 'column'
     },
     '(max-width: 600px)': {
-      fontSize: '.9em' // flexDirection: 'column',
-
+      fontSize: '.9em'
+      // flexDirection: 'column',
     }
   });
+
   const ActiveQueryPanel = styled('div', () => ({
     flex: '1 1 500px',
     display: 'flex',
@@ -2248,7 +1979,7 @@
     height: '100%'
   }), {
     '(max-width: 700px)': (_props, theme) => ({
-      borderTop: "2px solid " + theme.gray
+      borderTop: `2px solid ${theme.gray}`
     })
   });
   const Button = styled('button', (props, theme) => ({
@@ -2286,26 +2017,26 @@
     borderRadius: '.2em',
     color: theme.inputTextColor,
     fontSize: '.9em',
-    lineHeight: "1.3",
+    lineHeight: `1.3`,
     padding: '.3em .4em'
   }));
   const Select = styled('select', (_props, theme) => ({
-    display: "inline-block",
-    fontSize: ".9em",
-    fontFamily: "sans-serif",
+    display: `inline-block`,
+    fontSize: `.9em`,
+    fontFamily: `sans-serif`,
     fontWeight: 'normal',
-    lineHeight: "1.3",
-    padding: ".3em 1.5em .3em .5em",
+    lineHeight: `1.3`,
+    padding: `.3em 1.5em .3em .5em`,
     height: 'auto',
     border: 0,
-    borderRadius: ".2em",
-    appearance: "none",
+    borderRadius: `.2em`,
+    appearance: `none`,
     WebkitAppearance: 'none',
     backgroundColor: theme.inputBackgroundColor,
-    backgroundImage: "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>\")",
-    backgroundRepeat: "no-repeat",
-    backgroundPosition: "right .55em center",
-    backgroundSize: ".65em auto, 100%",
+    backgroundImage: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>")`,
+    backgroundRepeat: `no-repeat`,
+    backgroundPosition: `right .55em center`,
+    backgroundSize: `.65em auto, 100%`,
     color: theme.inputTextColor
   }), {
     '(max-width: 500px)': {
@@ -2398,11 +2129,10 @@
     style: {
       display: 'inline-block',
       transition: 'all .1s ease',
-      transform: "rotate(" + (expanded ? 90 : 0) + "deg) " + (style.transform || ''),
+      transform: `rotate(${expanded ? 90 : 0}deg) ${style.transform || ''}`,
       ...style
     }
   }, "\u25B6");
-
   const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
     "aria-label": "Copy object to clipboard",
     title: "Copy object to clipboard",
@@ -2420,7 +2150,6 @@
     fill: "currentColor",
     d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z"
   })));
-
   const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
     "aria-label": "Failed copying to clipboard",
     title: "Failed copying to clipboard",
@@ -2446,7 +2175,6 @@
       top: '2px'
     }
   }, "See console"));
-
   const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
     "aria-label": "Object copied to clipboard",
     title: "Object copied to clipboard",
@@ -2464,7 +2192,6 @@
     fill: "green",
     d: "M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
   })));
-
   /**
    * Chunk elements in the array by size
    *
@@ -2478,12 +2205,10 @@
     if (size < 1) return [];
     let i = 0;
     const result = [];
-
     while (i < array.length) {
       result.push(array.slice(i, i + size));
       i = i + size;
     }
-
     return result;
   }
   const DefaultRenderer = ({
@@ -2505,7 +2230,7 @@
       onClick: () => toggleExpanded()
     }, /*#__PURE__*/React__namespace.createElement(Expander, {
       expanded: expanded
-    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? "items" : "item")), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
+    }), " ", label, ' ', /*#__PURE__*/React__namespace.createElement(Info, null, String(type).toLowerCase() === 'iterable' ? '(Iterable) ' : '', subEntries.length, " ", subEntries.length > 1 ? `items` : `item`)), copyable ? /*#__PURE__*/React__namespace.createElement(CopyButton, {
       value: value
     }) : null, expanded ? subEntryPages.length === 1 ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntries.map(handleEntry)) : /*#__PURE__*/React__namespace.createElement(SubEntries, null, subEntryPages.map((entries, index) => /*#__PURE__*/React__namespace.createElement("div", {
       key: index
@@ -2515,11 +2240,9 @@
       expanded: expanded
     }), " [", index * pageSize, " ...", ' ', index * pageSize + pageSize - 1, "]"), expandedPages.includes(index) ? /*#__PURE__*/React__namespace.createElement(SubEntries, null, entries.map(handleEntry)) : null)))) : null) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label, ":"), " ", /*#__PURE__*/React__namespace.createElement(Value, null, displayValue(value))));
   };
-
   function isIterable(x) {
     return Symbol.iterator in x;
   }
-
   function Explorer({
     value,
     defaultExpanded,
@@ -2532,16 +2255,15 @@
     const toggleExpanded = React__namespace.useCallback(() => setExpanded(old => !old), []);
     let type = typeof value;
     let subEntries = [];
-
     const makeProperty = sub => {
       const subDefaultExpanded = defaultExpanded === true ? {
         [sub.label]: true
-      } : defaultExpanded == null ? void 0 : defaultExpanded[sub.label];
-      return { ...sub,
+      } : defaultExpanded?.[sub.label];
+      return {
+        ...sub,
         defaultExpanded: subDefaultExpanded
       };
     };
-
     if (Array.isArray(value)) {
       type = 'array';
       subEntries = value.map((d, i) => makeProperty({
@@ -2561,7 +2283,6 @@
         value: val
       }));
     }
-
     const subEntryPages = chunkArray(subEntries, pageSize);
     return renderer({
       handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
@@ -2616,7 +2337,7 @@
     toggleButtonProps = {},
     position = 'bottom-left',
     containerElement: Container = 'aside',
-    context,
+    queryClient,
     styleNonce,
     panelPosition: initialPanelPosition = 'bottom'
   }) {
@@ -2629,11 +2350,9 @@
     const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
     const [isResizing, setIsResizing] = React__namespace.useState(false);
     const isMounted = useIsMounted();
-
     const handleDragStart = (panelElement, startEvent) => {
       if (!panelElement) return;
       if (startEvent.button !== 0) return; // Only allow left click for drag
-
       const isVertical = isVerticalSide(panelPosition);
       setIsResizing(true);
       const {
@@ -2643,12 +2362,12 @@
       const startX = startEvent.clientX;
       const startY = startEvent.clientY;
       let newSize = 0;
-
       const run = moveEvent => {
         // prevent mouse selecting stuff with mouse drag
-        moveEvent.preventDefault(); // calculate the correct size based on mouse position and current panel position
-        // hint: it is different formula for the opposite sides
+        moveEvent.preventDefault();
 
+        // calculate the correct size based on mouse position and current panel position
+        // hint: it is different formula for the opposite sides
         if (isVertical) {
           newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
           setDevtoolsWidth(newSize);
@@ -2656,48 +2375,41 @@
           newSize = height + (panelPosition === 'bottom' ? startY - moveEvent.clientY : moveEvent.clientY - startY);
           setDevtoolsHeight(newSize);
         }
-
         if (newSize < minPanelSize) {
           setIsOpen(false);
         } else {
           setIsOpen(true);
         }
       };
-
       const unsub = () => {
         if (isResizing) {
           setIsResizing(false);
         }
-
         document.removeEventListener('mousemove', run, false);
         document.removeEventListener('mouseUp', unsub, false);
       };
-
       document.addEventListener('mousemove', run, false);
       document.addEventListener('mouseup', unsub, false);
     };
-
     React__namespace.useEffect(() => {
-      setIsResolvedOpen(isOpen != null ? isOpen : false);
-    }, [isOpen, isResolvedOpen, setIsResolvedOpen]); // Toggle panel visibility before/after transition (depending on direction).
-    // Prevents focusing in a closed panel.
+      setIsResolvedOpen(isOpen ?? false);
+    }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
 
+    // Toggle panel visibility before/after transition (depending on direction).
+    // Prevents focusing in a closed panel.
     React__namespace.useEffect(() => {
       const ref = panelRef.current;
-
       if (ref) {
         const handlePanelTransitionStart = () => {
           if (isResolvedOpen) {
             ref.style.visibility = 'visible';
           }
         };
-
         const handlePanelTransitionEnd = () => {
           if (!isResolvedOpen) {
             ref.style.visibility = 'hidden';
           }
         };
-
         ref.addEventListener('transitionstart', handlePanelTransitionStart);
         ref.addEventListener('transitionend', handlePanelTransitionEnd);
         return () => {
@@ -2705,19 +2417,15 @@
           ref.removeEventListener('transitionend', handlePanelTransitionEnd);
         };
       }
-
       return;
     }, [isResolvedOpen]);
     React__namespace.useEffect(() => {
-      var _rootRef$current;
-
-      if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
+      if (isResolvedOpen && rootRef.current?.parentElement) {
         const {
           parentElement
         } = rootRef.current;
         const styleProp = getSidedProp('padding', panelPosition);
         const isVertical = isVerticalSide(panelPosition);
-
         const previousPaddings = (({
           padding,
           paddingTop,
@@ -2731,20 +2439,18 @@
           paddingLeft,
           paddingRight
         }))(parentElement.style);
-
         const run = () => {
           // reset the padding
           parentElement.style.padding = '0px';
           parentElement.style.paddingTop = '0px';
           parentElement.style.paddingBottom = '0px';
           parentElement.style.paddingLeft = '0px';
-          parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+          parentElement.style.paddingRight = '0px';
+          // set the new padding based on the new panel position
 
-          parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
+          parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
         };
-
         run();
-
         if (typeof window !== 'undefined') {
           window.addEventListener('resize', run);
           return () => {
@@ -2755,7 +2461,6 @@
           };
         }
       }
-
       return;
     }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
     const {
@@ -2766,8 +2471,9 @@
       style: toggleButtonStyle = {},
       onClick: onToggleClick,
       ...otherToggleButtonProps
-    } = toggleButtonProps; // get computed style based on panel position
+    } = toggleButtonProps;
 
+    // get computed style based on panel position
     const style = getSidePanelStyle({
       position: panelPosition,
       devtoolsTheme: defaultTheme,
@@ -2776,8 +2482,9 @@
       width: devtoolsWidth,
       isResizing,
       panelStyle
-    }); // Do not render on the server
+    });
 
+    // Do not render on the server
     if (!isMounted()) return null;
     return /*#__PURE__*/React__namespace.createElement(Container, {
       ref: rootRef,
@@ -2787,7 +2494,7 @@
       theme: defaultTheme
     }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel$1, _extends({
       ref: panelRef,
-      context: context,
+      queryClient: queryClient,
       styleNonce: styleNonce,
       position: panelPosition,
       onPositionChange: setPanelPosition,
@@ -2807,7 +2514,7 @@
       "aria-expanded": "false",
       onClick: e => {
         setIsOpen(true);
-        onToggleClick == null ? void 0 : onToggleClick(e);
+        onToggleClick?.(e);
       },
       style: {
         background: 'none',
@@ -2841,22 +2548,20 @@
       text: "Open React Query Devtools"
     })) : null);
   }
-
   const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-    return shim.exports.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
+    return React__namespace.useSyncExternalStore(React__namespace.useCallback(onStoreChange => {
       if (!skip) return queryCache.subscribe(reactQuery.notifyManager.batchCalls(onStoreChange));
       return () => {
         return;
       };
     }, [queryCache, skip]), getSnapshot, getSnapshot);
   };
-
   const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(function ReactQueryDevtoolsPanel(props, ref) {
     const {
       isOpen = true,
       styleNonce,
       setIsOpen,
-      context,
+      queryClient,
       onDragStart,
       onPositionChange,
       showCloseButton,
@@ -2868,10 +2573,8 @@
       onClick: onCloseClick,
       ...otherCloseButtonProps
     } = closeButtonProps;
-    const queryClient = reactQuery.useQueryClient({
-      context
-    });
-    const queryCache = queryClient.getQueryCache();
+    const client = reactQuery.useQueryClient(queryClient);
+    const queryCache = client.getQueryCache();
     const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
     const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
     const [baseSort, setBaseSort] = useLocalStorage('reactQueryDevtoolsBaseSort', 1);
@@ -2880,11 +2583,9 @@
     const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
     const queries = React__namespace.useMemo(() => {
       const unsortedQueries = queryCache.getAll();
-
       if (queriesCount === 0) {
         return [];
       }
-
       const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
       const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
       return sorted;
@@ -2906,7 +2607,26 @@
     }), /*#__PURE__*/React__namespace.createElement("style", {
       nonce: styleNonce,
       dangerouslySetInnerHTML: {
-        __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n          "
+        __html: `
+            .ReactQueryDevtoolsPanel * {
+              scrollbar-color: ${defaultTheme.backgroundAlt} ${defaultTheme.gray};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {
+              width: 1em;
+              height: 1em;
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {
+              background: ${defaultTheme.backgroundAlt};
+            }
+
+            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {
+              background: ${defaultTheme.gray};
+              border-radius: .5em;
+              border: 3px solid ${defaultTheme.backgroundAlt};
+            }
+          `
       }
     }), /*#__PURE__*/React__namespace.createElement("div", {
       style: getResizeHandleStyle(position),
@@ -2917,7 +2637,7 @@
         minHeight: '40%',
         maxHeight: '100%',
         overflow: 'auto',
-        borderRight: "1px solid " + defaultTheme.grayAlt,
+        borderRight: `1px solid ${defaultTheme.grayAlt}`,
         display: 'flex',
         flexDirection: 'column'
       }
@@ -2985,7 +2705,7 @@
     }, /*#__PURE__*/React__namespace.createElement(Input, {
       placeholder: "Filter",
       "aria-label": "Filter by queryhash",
-      value: filter != null ? filter : '',
+      value: filter ?? '',
       onChange: e => setFilter(e.target.value),
       onKeyDown: e => {
         if (e.key === 'Escape') setFilter('');
@@ -3092,7 +2812,7 @@
     }))), activeQueryHash && isOpen ? /*#__PURE__*/React__namespace.createElement(ActiveQuery, {
       activeQueryHash: activeQueryHash,
       queryCache: queryCache,
-      queryClient: queryClient
+      queryClient: client
     }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(Button, _extends({
       type: "button",
       "aria-controls": "ReactQueryDevtoolsPanel",
@@ -3109,44 +2829,26 @@
       },
       onClick: e => {
         setIsOpen(false);
-        onCloseClick == null ? void 0 : onCloseClick(e);
+        onCloseClick?.(e);
       }
     }), "Close") : null));
   });
-
   const ActiveQuery = ({
     queryCache,
     activeQueryHash,
     queryClient
   }) => {
-    var _useSubscribeToQueryC, _useSubscribeToQueryC2;
-
     const activeQuery = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash));
-    const activeQueryState = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$getAll$fi;
-
-      return (_queryCache$getAll$fi = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi.state;
-    });
-    const isStale = (_useSubscribeToQueryC = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$getAll$fi2;
-
-      return (_queryCache$getAll$fi2 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi2.isStale();
-    })) != null ? _useSubscribeToQueryC : false;
-    const observerCount = (_useSubscribeToQueryC2 = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$getAll$fi3;
-
-      return (_queryCache$getAll$fi3 = queryCache.getAll().find(query => query.queryHash === activeQueryHash)) == null ? void 0 : _queryCache$getAll$fi3.getObserversCount();
-    })) != null ? _useSubscribeToQueryC2 : 0;
-
+    const activeQueryState = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.state);
+    const isStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.isStale()) ?? false;
+    const observerCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().find(query => query.queryHash === activeQueryHash)?.getObserversCount()) ?? 0;
     const handleRefetch = () => {
-      const promise = activeQuery == null ? void 0 : activeQuery.fetch();
-      promise == null ? void 0 : promise.catch(noop);
+      const promise = activeQuery?.fetch();
+      promise?.catch(noop);
     };
-
     if (!activeQuery || !activeQueryState) {
       return null;
     }
-
     return /*#__PURE__*/React__namespace.createElement(ActiveQueryPanel, null, /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         padding: '.5em',
@@ -3163,7 +2865,7 @@
       style: {
         marginBottom: '.5em',
         display: 'flex',
-        alignItems: 'flex-start',
+        alignItems: 'stretch',
         justifyContent: 'space-between'
       }
     }, /*#__PURE__*/React__namespace.createElement(Code, {
@@ -3278,7 +2980,6 @@
       }
     })));
   };
-
   const QueryStatusCount = ({
     queryCache
   }) => {
@@ -3316,52 +3017,37 @@
       }
     }, "inactive ", /*#__PURE__*/React__namespace.createElement(Code, null, "(", hasInactive, ")")));
   };
-
   const QueryRow = /*#__PURE__*/React__namespace.memo(({
     queryKey,
     setActiveQueryHash,
     activeQueryHash,
     queryCache
   }) => {
-    var _useSubscribeToQueryC3, _useSubscribeToQueryC4, _useSubscribeToQueryC5, _useSubscribeToQueryC6;
-
-    const queryHash = (_useSubscribeToQueryC3 = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$find;
-
-      return (_queryCache$find = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find.queryHash;
-    })) != null ? _useSubscribeToQueryC3 : '';
-    const queryState = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$find2;
-
-      return (_queryCache$find2 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find2.state;
-    });
-    const isStale = (_useSubscribeToQueryC4 = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$find3;
-
-      return (_queryCache$find3 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find3.isStale();
-    })) != null ? _useSubscribeToQueryC4 : false;
-    const isDisabled = (_useSubscribeToQueryC5 = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$find4;
-
-      return (_queryCache$find4 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find4.isDisabled();
-    })) != null ? _useSubscribeToQueryC5 : false;
-    const observerCount = (_useSubscribeToQueryC6 = useSubscribeToQueryCache(queryCache, () => {
-      var _queryCache$find5;
-
-      return (_queryCache$find5 = queryCache.find(queryKey)) == null ? void 0 : _queryCache$find5.getObserversCount();
-    })) != null ? _useSubscribeToQueryC6 : 0;
-
+    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;
     if (!queryState) {
       return null;
     }
-
     return /*#__PURE__*/React__namespace.createElement("div", {
       role: "button",
-      "aria-label": "Open query details for " + queryHash,
+      "aria-label": `Open query details for ${queryHash}`,
       onClick: () => setActiveQueryHash(activeQueryHash === queryHash ? '' : queryHash),
       style: {
         display: 'flex',
-        borderBottom: "solid 1px " + defaultTheme.grayAlt,
+        borderBottom: `solid 1px ${defaultTheme.grayAlt}`,
         cursor: 'pointer',
         background: queryHash === activeQueryHash ? 'rgba(255,255,255,.1)' : undefined
       }
@@ -3397,9 +3083,10 @@
       style: {
         padding: '.5em'
       }
-    }, "" + queryHash));
-  }); // eslint-disable-next-line @typescript-eslint/no-empty-function
+    }, `${queryHash}`));
+  });
 
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   function noop() {}
 
   const ReactQueryDevtools = ReactQueryDevtools$1;
@@ -3408,7 +3095,5 @@
   exports.ReactQueryDevtools = ReactQueryDevtools;
   exports.ReactQueryDevtoolsPanel = ReactQueryDevtoolsPanel;
 
-  Object.defineProperty(exports, '__esModule', { value: true });
-
 }));
 //# sourceMappingURL=index.development.js.map