@tanstack/react-query-devtools 4.3.8 → 4.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.3.8",
+  "version": "4.4.0",
   "description": "TODO",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -51,6 +51,6 @@
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
-    "@tanstack/react-query": "4.3.8"
+    "@tanstack/react-query": "4.4.0"
   }
 }

package/src/__tests__/devtools.test.tsx

@@ -2,7 +2,8 @@ import * as React from 'react'
 import { fireEvent, screen, waitFor, act } from '@testing-library/react'
 import { ErrorBoundary } from 'react-error-boundary'
 import '@testing-library/jest-dom'
-import { useQuery, QueryClient } from '@tanstack/react-query'
+import type { QueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { sortFns } from '../utils'
 import {
   getByTextContent,

package/src/__tests__/utils.tsx

@@ -1,4 +1,4 @@
-import { MatcherFunction } from '@testing-library/dom/types/matches'
+import type { MatcherFunction } from '@testing-library/dom/types/matches'
 import { render } from '@testing-library/react'
 import * as React from 'react'
 import { ReactQueryDevtools } from '../devtools'

package/src/devtools.tsx

@@ -1,14 +1,16 @@
 import * as React from 'react'
 import { useSyncExternalStore } from './useSyncExternalStore'
-import {
-  useQueryClient,
-  onlineManager,
-  notifyManager,
+import type {
   QueryCache,
   QueryClient,
   QueryKey as QueryKeyType,
   ContextOptions,
 } from '@tanstack/react-query'
+import {
+  useQueryClient,
+  onlineManager,
+  notifyManager,
+} from '@tanstack/react-query'
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
 import { sortFns, useIsMounted } from './utils'
@@ -192,12 +194,13 @@ export function ReactQueryDevtools({
 
   React.useEffect(() => {
     if (isResolvedOpen) {
-      const previousValue = rootRef.current?.parentElement?.style.paddingBottom
+      const root = rootRef.current
+      const previousValue = root?.parentElement?.style.paddingBottom
 
       const run = () => {
         const containerHeight = panelRef.current?.getBoundingClientRect().height
-        if (rootRef.current?.parentElement) {
-          rootRef.current.parentElement.style.paddingBottom = `${containerHeight}px`
+        if (root?.parentElement) {
+          root.parentElement.style.paddingBottom = `${containerHeight}px`
         }
       }
 
@@ -208,11 +211,8 @@ export function ReactQueryDevtools({
 
         return () => {
           window.removeEventListener('resize', run)
-          if (
-            rootRef.current?.parentElement &&
-            typeof previousValue === 'string'
-          ) {
-            rootRef.current.parentElement.style.paddingBottom = previousValue
+          if (root?.parentElement && typeof previousValue === 'string') {
+            root.parentElement.style.paddingBottom = previousValue
           }
         }
       }

package/src/utils.ts

@@ -1,7 +1,8 @@
 import * as React from 'react'
 import type { Query } from '@tanstack/react-query'
 
-import { Theme, useTheme } from './theme'
+import type { Theme } from './theme'
+import { useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
 
 type StyledComponent<T> = T extends 'button'