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

package/build/lib/index.prod.js

@@ -1,17 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var reactQuery = require('@tanstack/react-query');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var SuperJSON = require('superjson');
-var index_js = require('use-sync-external-store/shim/index.js');
-
-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) {
@@ -24,25 +18,22 @@ function _interopNamespace(e) {
       }
     });
   }
-  n["default"] = e;
+  n.default = e;
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var SuperJSON__default = /*#__PURE__*/_interopDefaultLegacy(SuperJSON);
+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);
@@ -51,22 +42,18 @@ function _extends() {
 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 {
@@ -76,15 +63,12 @@ function useLocalStorage(key, defaultValue) {
   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]);
@@ -124,27 +108,27 @@ function useMediaQuery(query) {
     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;
@@ -169,12 +153,15 @@ function styled(type, newStyles, queries = {}) {
     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
       },
@@ -193,33 +180,30 @@ function useIsMounted() {
   }, []);
   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__default["default"].serialize(value);
+  } = 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,
@@ -233,7 +217,6 @@ const sides = {
   left: 'right',
   right: 'left'
 };
-
 /**
  * Check if the given side is vertical (left/right)
  */
@@ -243,7 +226,6 @@ function isVerticalSide(side) {
 /**
  * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
  */
-
 function getOppositeSide(side) {
   return sides[side];
 }
@@ -251,9 +233,8 @@ function getOppositeSide(side) {
  * 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',
@@ -267,29 +248,30 @@ function getSidePanelStyle({
   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,
@@ -304,10 +286,10 @@ function getSidePanelStyle({
     })
   };
 }
+
 /**
  * Get resize handle style based on a given side
  */
-
 function getResizeHandleStyle(position = 'bottom') {
   const isVertical = isVerticalSide(position);
   const oppositeSide = getOppositeSide(position);
@@ -317,7 +299,7 @@ function getResizeHandleStyle(position = 'bottom') {
     cursor: isVertical ? 'col-resize' : 'row-resize',
     zIndex: 100000,
     [oppositeSide]: 0,
-    [marginSide]: "-4px",
+    [marginSide]: `-4px`,
     ...(isVertical ? {
       top: 0,
       height: '100%',
@@ -331,7 +313,7 @@ function getResizeHandleStyle(position = 'bottom') {
 
 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
@@ -340,10 +322,11 @@ const Panel = styled('div', (_props, theme) => ({
     flexDirection: 'column'
   },
   '(max-width: 600px)': {
-    fontSize: '.9em' // flexDirection: 'column',
-
+    fontSize: '.9em'
+    // flexDirection: 'column',
   }
 });
+
 const ActiveQueryPanel = styled('div', () => ({
   flex: '1 1 500px',
   display: 'flex',
@@ -352,7 +335,7 @@ const ActiveQueryPanel = styled('div', () => ({
   height: '100%'
 }), {
   '(max-width: 700px)': (_props, theme) => ({
-    borderTop: "2px solid " + theme.gray
+    borderTop: `2px solid ${theme.gray}`
   })
 });
 const Button = styled('button', (props, theme) => ({
@@ -390,26 +373,26 @@ const Input = styled('input', (_props, theme) => ({
   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)': {
@@ -459,7 +442,7 @@ const CopyButton = ({
   const [copyState, setCopyState] = React__namespace.useState('NoCopy');
   return /*#__PURE__*/React__namespace.createElement("button", {
     onClick: copyState === 'NoCopy' ? () => {
-      navigator.clipboard.writeText(SuperJSON__default["default"].stringify(value)).then(() => {
+      navigator.clipboard.writeText(SuperJSON.stringify(value)).then(() => {
         setCopyState('SuccessCopy');
         setTimeout(() => {
           setCopyState('NoCopy');
@@ -502,11 +485,10 @@ const Expander = ({
   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",
@@ -524,7 +506,6 @@ const Copier = () => /*#__PURE__*/React__namespace.createElement("span", {
   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",
@@ -550,7 +531,6 @@ const ErrorCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
     top: '2px'
   }
 }, "See console"));
-
 const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
   "aria-label": "Object copied to clipboard",
   title: "Object copied to clipboard",
@@ -568,7 +548,6 @@ const CopiedCopier = () => /*#__PURE__*/React__namespace.createElement("span", {
   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
  *
@@ -582,12 +561,10 @@ function chunkArray(array, size) {
   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 = ({
@@ -609,7 +586,7 @@ const DefaultRenderer = ({
     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
@@ -619,11 +596,9 @@ const DefaultRenderer = ({
     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,
@@ -636,16 +611,15 @@ function Explorer({
   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({
@@ -665,7 +639,6 @@ function Explorer({
       value: val
     }));
   }
-
   const subEntryPages = chunkArray(subEntries, pageSize);
   return renderer({
     handleEntry: entry => /*#__PURE__*/React__namespace.createElement(Explorer, _extends({
@@ -720,7 +693,7 @@ function ReactQueryDevtools$1({
   toggleButtonProps = {},
   position = 'bottom-left',
   containerElement: Container = 'aside',
-  context,
+  queryClient,
   styleNonce,
   panelPosition: initialPanelPosition = 'bottom'
 }) {
@@ -733,11 +706,9 @@ function ReactQueryDevtools$1({
   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 {
@@ -747,12 +718,12 @@ function ReactQueryDevtools$1({
     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);
@@ -760,48 +731,41 @@ function ReactQueryDevtools$1({
         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 () => {
@@ -809,19 +773,15 @@ function ReactQueryDevtools$1({
         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,
@@ -835,20 +795,18 @@ function ReactQueryDevtools$1({
         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 () => {
@@ -859,7 +817,6 @@ function ReactQueryDevtools$1({
         };
       }
     }
-
     return;
   }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
   const {
@@ -870,8 +827,9 @@ function ReactQueryDevtools$1({
     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,
@@ -880,8 +838,9 @@ function ReactQueryDevtools$1({
     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,
@@ -891,7 +850,7 @@ function ReactQueryDevtools$1({
     theme: defaultTheme
   }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel$1, _extends({
     ref: panelRef,
-    context: context,
+    queryClient: queryClient,
     styleNonce: styleNonce,
     position: panelPosition,
     onPositionChange: setPanelPosition,
@@ -911,7 +870,7 @@ function ReactQueryDevtools$1({
     "aria-expanded": "false",
     onClick: e => {
       setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
+      onToggleClick?.(e);
     },
     style: {
       background: 'none',
@@ -945,22 +904,20 @@ function ReactQueryDevtools$1({
     text: "Open React Query Devtools"
   })) : null);
 }
-
 const useSubscribeToQueryCache = (queryCache, getSnapshot, skip = false) => {
-  return index_js.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,
@@ -972,10 +929,8 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     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);
@@ -984,11 +939,9 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
   const queries = React__namespace.useMemo(() => {
     const unsortedQueries = queryCache.getAll();
-
     if (queriesCount === 0) {
       return [];
     }
-
     const filtered = filter ? unsortedQueries.filter(item => matchSorterUtils.rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
     const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
     return sorted;
@@ -1010,7 +963,26 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   }), /*#__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),
@@ -1021,7 +993,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
       minHeight: '40%',
       maxHeight: '100%',
       overflow: 'auto',
-      borderRight: "1px solid " + defaultTheme.grayAlt,
+      borderRight: `1px solid ${defaultTheme.grayAlt}`,
       display: 'flex',
       flexDirection: 'column'
     }
@@ -1089,7 +1061,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   }, /*#__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('');
@@ -1196,7 +1168,7 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
   }))), 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",
@@ -1213,44 +1185,26 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     },
     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',
@@ -1267,7 +1221,7 @@ const ActiveQuery = ({
     style: {
       marginBottom: '.5em',
       display: 'flex',
-      alignItems: 'flex-start',
+      alignItems: 'stretch',
       justifyContent: 'space-between'
     }
   }, /*#__PURE__*/React__namespace.createElement(Code, {
@@ -1382,7 +1336,6 @@ const ActiveQuery = ({
     }
   })));
 };
-
 const QueryStatusCount = ({
   queryCache
 }) => {
@@ -1420,52 +1373,37 @@ const QueryStatusCount = ({
     }
   }, "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
     }
@@ -1501,9 +1439,10 @@ const QueryRow = /*#__PURE__*/React__namespace.memo(({
     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;