@tanstack/react-query-devtools 4.3.0-beta.4 → 4.3.0

package/build/umd/index.production.js

@@ -1,12 +1,2 @@
-/**
- * react-query-devtools
- *
- * Copyright (c) TanStack
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE.md file in the root directory of this source tree.
- *
- * @license MIT
- */
 !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).ReactQueryDevtools={})}(this,(function(e){"use strict";e.ReactQueryDevtools=function(){return null},e.ReactQueryDevtoolsPanel=function(){return null},Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.production.js.map

package/build/umd/index.production.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import * as devtools from './devtools'\n\nexport const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":";;;;;;;;;;+QAIM,WACE,OAAO,gCAMR,WACC,OAAO"}
+{"version":3,"file":"index.production.js","sources":["../../src/index.ts"],"sourcesContent":["import * as devtools from './devtools'\n\nexport const ReactQueryDevtools: typeof devtools['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: typeof devtools['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? (function () {\n        return null\n      } as any)\n    : devtools.ReactQueryDevtoolsPanel\n"],"names":[],"mappings":"+QAIM,WACE,OAAO,gCAMR,WACC,OAAO"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "4.3.0-beta.4",
+  "version": "4.3.0",
   "description": "TODO",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -18,6 +18,11 @@
       "import": "./build/lib/index.mjs",
       "default": "./build/lib/index.js"
     },
+    "./production": {
+      "types": "./build/lib/index.d.ts",
+      "import": "./build/lib/index.prod.mjs",
+      "default": "./build/lib/index.prod.js"
+    },
     "./build/lib/index.prod.js": {
       "types": "./build/lib/index.d.ts",
       "import": "./build/lib/index.prod.mjs",
@@ -45,6 +50,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.0-beta.4"
+    "@tanstack/react-query": "4.3.0"
   }
 }

package/src/devtools.tsx

@@ -12,6 +12,7 @@ import {
 import { rankItem, compareItems } from '@tanstack/match-sorter-utils'
 import useLocalStorage from './useLocalStorage'
 import { sortFns, useIsMounted } from './utils'
+import ScreenReader from './screenreader'
 
 import {
   Panel,
@@ -98,8 +99,6 @@ interface DevtoolsPanelOptions extends ContextOptions {
   handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
 }
 
-const isServer = typeof window === 'undefined'
-
 export function ReactQueryDevtools({
   initialIsOpen,
   panelProps = {},
@@ -191,7 +190,7 @@ export function ReactQueryDevtools({
     }
   }, [isResolvedOpen])
 
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+  React.useEffect(() => {
     if (isResolvedOpen) {
       const previousValue = rootRef.current?.parentElement?.style.paddingBottom
 
@@ -368,6 +367,7 @@ export function ReactQueryDevtools({
           }}
         >
           <Logo aria-hidden />
+          <ScreenReader text="Open React Query Devtools" />
         </button>
       ) : null}
     </Container>
@@ -538,6 +538,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
               }}
             >
               <Logo aria-hidden />
+              <ScreenReader text="Close React Query Devtools" />
             </button>
             <div
               style={{
@@ -648,6 +649,13 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
                           </>
                         )}
                       </svg>
+                      <ScreenReader
+                        text={
+                          isMockOffline
+                            ? 'Restore offline mock'
+                            : 'Mock offline behavior'
+                        }
+                      />
                     </Button>
                   </>
                 ) : null}

package/src/screenreader.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react'
+
+export default function ScreenReader({ text }: { text: string }) {
+  return (
+    <span
+      style={{
+        position: 'absolute',
+        width: '0.1px',
+        height: '0.1px',
+        overflow: 'hidden',
+      }}
+    >
+      {text}
+    </span>
+  )
+}

package/src/utils.ts

@@ -4,8 +4,6 @@ import type { Query } from '@tanstack/react-query'
 import { Theme, useTheme } from './theme'
 import useMediaQuery from './useMediaQuery'
 
-export const isServer = typeof window === 'undefined'
-
 type StyledComponent<T> = T extends 'button'
   ? React.DetailedHTMLProps<
       React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -104,7 +102,7 @@ export function useIsMounted() {
   const mountedRef = React.useRef(false)
   const isMounted = React.useCallback(() => mountedRef.current, [])
 
-  React[isServer ? 'useEffect' : 'useLayoutEffect'](() => {
+  React.useEffect(() => {
     mountedRef.current = true
     return () => {
       mountedRef.current = false