@tanstack/react-query-devtools - npm Package Compare versions

Comparing version 5.90.2 to 5.91.0

build/legacy/ReactQueryDevtools-ChNsB-ya.d.cts

+import * as React from 'react';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+
+type Devtools_DevtoolsOptions = DevtoolsOptions;
+declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
+declare namespace Devtools {
+  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
+}
+
+export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/legacy/ReactQueryDevtools-ChNsB-ya.d.ts

+import * as React from 'react';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+
+type Devtools_DevtoolsOptions = DevtoolsOptions;
+declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
+declare namespace Devtools {
+  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
+}
+
+export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/legacy/ReactQueryDevtoolsPanel-D67eVd_j.d.cts

+import * as React from 'react';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
+
+type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
+declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
+declare namespace DevtoolsPanel {
+  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
+}
+
+export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/legacy/ReactQueryDevtoolsPanel-D67eVd_j.d.ts

+import * as React from 'react';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
+
+type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
+declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
+declare namespace DevtoolsPanel {
+  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
+}
+
+export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/modern/ReactQueryDevtools-ChNsB-ya.d.cts

+import * as React from 'react';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+
+type Devtools_DevtoolsOptions = DevtoolsOptions;
+declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
+declare namespace Devtools {
+  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
+}
+
+export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/modern/ReactQueryDevtools-ChNsB-ya.d.ts

+import * as React from 'react';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsOptions {
+    /**
+     * Set this true if you want the dev tools to default to being open
+     */
+    initialIsOpen?: boolean;
+    /**
+     * The position of the React Query logo to open and close the devtools panel.
+     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+     * Defaults to 'bottom-right'.
+     */
+    buttonPosition?: DevtoolsButtonPosition;
+    /**
+     * The position of the React Query devtools panel.
+     * 'top' | 'bottom' | 'left' | 'right'
+     * Defaults to 'bottom'.
+     */
+    position?: DevtoolsPosition;
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
+
+type Devtools_DevtoolsOptions = DevtoolsOptions;
+declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
+declare namespace Devtools {
+  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
+}
+
+export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/modern/ReactQueryDevtoolsPanel-D67eVd_j.d.cts

+import * as React from 'react';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
+
+type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
+declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
+declare namespace DevtoolsPanel {
+  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
+}
+
+export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/modern/ReactQueryDevtoolsPanel-D67eVd_j.d.ts

+import * as React from 'react';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
+import { QueryClient } from '@tanstack/react-query';
+
+interface DevtoolsPanelOptions {
+    /**
+     * Custom instance of QueryClient
+     */
+    client?: QueryClient;
+    /**
+     * Use this so you can define custom errors that can be shown in the devtools.
+     */
+    errorTypes?: Array<DevtoolsErrorType>;
+    /**
+     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+     */
+    styleNonce?: string;
+    /**
+     * Use this so you can attach the devtool's styles to specific element in the DOM.
+     */
+    shadowDOMTarget?: ShadowRoot;
+    /**
+     * Custom styles for the devtools panel
+     * @default { height: '500px' }
+     * @example { height: '100%' }
+     * @example { height: '100%', width: '100%' }
+     */
+    style?: React.CSSProperties;
+    /**
+     * Callback function that is called when the devtools panel is closed
+     */
+    onClose?: () => unknown;
+    /**
+     * Set this to true to hide disabled queries from the devtools panel.
+     */
+    hideDisabledQueries?: boolean;
+    /**
+     * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+     * Defaults to 'system'.
+     */
+    theme?: Theme;
+}
+declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
+
+type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
+declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
+declare namespace DevtoolsPanel {
+  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
+}
+
+export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/legacy/index.d.cts

@@ -1,3 +0,3 @@
-import { D as Devtools } from './ReactQueryDevtools-DO8QvfQP.cjs';
-import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
+import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/legacy/index.d.ts

@@ -1,3 +0,3 @@
-import { D as Devtools } from './ReactQueryDevtools-DO8QvfQP.js';
-import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.js';
+import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/legacy/production.d.cts

@@ -1,3 +0,3 @@
-import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-DO8QvfQP.cjs';
-import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.cjs';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/legacy/production.d.ts

@@ -1,3 +0,3 @@
-import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-DO8QvfQP.js';
-import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.js';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/legacy/ReactQueryDevtools.cjs

@@ -51,3 +51,4 @@ "use strict";
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
@@ -66,3 +67,4 @@ const [devtools] = React.useState(
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -90,2 +92,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -92,0 +97,0 @@ devtools.mount(ref.current);

build/legacy/ReactQueryDevtools.d.cts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-DO8QvfQP.cjs';
+export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.cjs';

build/legacy/ReactQueryDevtools.d.ts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-DO8QvfQP.js';
+export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.js';

build/legacy/ReactQueryDevtools.js

@@ -18,3 +18,4 @@ "use client";
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
@@ -33,3 +34,4 @@ const [devtools] = React.useState(
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -57,2 +59,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -59,0 +64,0 @@ devtools.mount(ref.current);

build/legacy/ReactQueryDevtoolsPanel.cjs

@@ -44,3 +44,9 @@ "use strict";
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
@@ -59,3 +65,4 @@ new import_query_devtools.TanstackQueryDevtoolsPanel({
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -74,2 +81,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -76,0 +86,0 @@ devtools.mount(ref.current);

build/legacy/ReactQueryDevtoolsPanel.d.cts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';

build/legacy/ReactQueryDevtoolsPanel.d.ts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.js';

build/legacy/ReactQueryDevtoolsPanel.js

@@ -11,3 +11,9 @@ "use client";
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
@@ -26,3 +32,4 @@ new TanstackQueryDevtoolsPanel({
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -41,2 +48,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -43,0 +53,0 @@ devtools.mount(ref.current);

build/modern/index.d.cts

@@ -1,3 +0,3 @@
-import { D as Devtools } from './ReactQueryDevtools-DO8QvfQP.cjs';
-import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.cjs';
+import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/modern/index.d.ts

@@ -1,3 +0,3 @@
-import { D as Devtools } from './ReactQueryDevtools-DO8QvfQP.js';
-import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+import { D as Devtools } from './ReactQueryDevtools-ChNsB-ya.js';
+import { D as DevtoolsPanel, a as DevtoolsPanelOptions$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/modern/production.d.cts

@@ -1,3 +0,3 @@
-import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-DO8QvfQP.cjs';
-import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.cjs';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/modern/production.d.ts

@@ -1,3 +0,3 @@
-import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-DO8QvfQP.js';
-import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-ChNsB-ya.js';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D67eVd_j.js';
 import 'react';
@@ -4,0 +4,0 @@ import '@tanstack/query-devtools';

build/modern/ReactQueryDevtools.cjs

@@ -51,3 +51,4 @@ "use strict";
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
@@ -66,3 +67,4 @@ const [devtools] = React.useState(
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -90,2 +92,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -92,0 +97,0 @@ devtools.mount(ref.current);

build/modern/ReactQueryDevtools.d.cts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-DO8QvfQP.cjs';
+export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.cjs';

build/modern/ReactQueryDevtools.d.ts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-DO8QvfQP.js';
+export { a as DevtoolsOptions, R as ReactQueryDevtools } from './ReactQueryDevtools-ChNsB-ya.js';

build/modern/ReactQueryDevtools.js

@@ -18,3 +18,4 @@ "use client";
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
@@ -33,3 +34,4 @@ const [devtools] = React.useState(
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -57,2 +59,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -59,0 +64,0 @@ devtools.mount(ref.current);

build/modern/ReactQueryDevtoolsPanel.cjs

@@ -44,3 +44,9 @@ "use strict";
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
@@ -59,3 +65,4 @@ new import_query_devtools.TanstackQueryDevtoolsPanel({
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -74,2 +81,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -76,0 +86,0 @@ devtools.mount(ref.current);

build/modern/ReactQueryDevtoolsPanel.d.cts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-BAUD7o3r.cjs';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.cjs';

build/modern/ReactQueryDevtoolsPanel.d.ts

 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-BAUD7o3r.js';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D67eVd_j.js';

build/modern/ReactQueryDevtoolsPanel.js

@@ -11,3 +11,9 @@ "use client";
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
@@ -26,3 +32,4 @@ new TanstackQueryDevtoolsPanel({
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
@@ -41,2 +48,5 @@ );
   React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
+  React.useEffect(() => {
     if (ref.current) {
@@ -43,0 +53,0 @@ devtools.mount(ref.current);

package.json

 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.90.2",
+  "version": "5.91.0",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
@@ -62,3 +62,3 @@ "author": "tannerlinsley",
   "dependencies": {
-    "@tanstack/query-devtools": "5.90.1"
+    "@tanstack/query-devtools": "5.91.0"
   },
@@ -71,7 +71,7 @@ "devDependencies": {
     "react": "^19.0.0",
-    "@tanstack/react-query": "5.90.2"
+    "@tanstack/react-query": "5.90.10"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
-    "@tanstack/react-query": "^5.90.2"
+    "@tanstack/react-query": "^5.90.10"
   },
@@ -78,0 +78,0 @@ "scripts": {

src/ReactQueryDevtools.tsx

@@ -9,2 +9,3 @@ 'use client'
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
@@ -50,2 +51,7 @@ import type { QueryClient } from '@tanstack/react-query'
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }
@@ -66,2 +72,3 @@
     hideDisabledQueries,
+    theme,
   } = props
@@ -81,2 +88,3 @@ const [devtools] = React.useState(
       hideDisabledQueries,
+      theme,
     }),
@@ -110,2 +118,6 @@ )
   React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  React.useEffect(() => {
     if (ref.current) {
@@ -112,0 +124,0 @@ devtools.mount(ref.current)

src/ReactQueryDevtoolsPanel.tsx

@@ -5,3 +5,3 @@ 'use client'
 import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
-import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
@@ -43,2 +43,7 @@
   hideDisabledQueries?: boolean
+  /**
+   * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
+   * Defaults to 'system'.
+   */
+  theme?: Theme
 }
@@ -51,3 +56,9 @@
   const ref = React.useRef<HTMLDivElement>(null)
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
   const [devtools] = React.useState(
@@ -67,2 +78,3 @@ new TanstackQueryDevtoolsPanel({
       hideDisabledQueries,
+      theme,
     }),
@@ -84,2 +96,6 @@ )
   React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
+
+  React.useEffect(() => {
     if (ref.current) {
@@ -86,0 +102,0 @@ devtools.mount(ref.current)

build/legacy/ReactQueryDevtools-DO8QvfQP.d.cts

-import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * The position of the React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
-     */
-    position?: DevtoolsPosition;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
-
-type Devtools_DevtoolsOptions = DevtoolsOptions;
-declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
-declare namespace Devtools {
-  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
-}
-
-export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/legacy/ReactQueryDevtools-DO8QvfQP.d.ts

-import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * The position of the React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
-     */
-    position?: DevtoolsPosition;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
-
-type Devtools_DevtoolsOptions = DevtoolsOptions;
-declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
-declare namespace Devtools {
-  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
-}
-
-export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/legacy/ReactQueryDevtoolsPanel-BAUD7o3r.d.cts

-import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: React.CSSProperties;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => unknown;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
-
-type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
-declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
-declare namespace DevtoolsPanel {
-  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
-}
-
-export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/legacy/ReactQueryDevtoolsPanel-BAUD7o3r.d.ts

-import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: React.CSSProperties;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => unknown;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
-
-type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
-declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
-declare namespace DevtoolsPanel {
-  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
-}
-
-export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/modern/ReactQueryDevtools-DO8QvfQP.d.cts

-import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * The position of the React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
-     */
-    position?: DevtoolsPosition;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
-
-type Devtools_DevtoolsOptions = DevtoolsOptions;
-declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
-declare namespace Devtools {
-  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
-}
-
-export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/modern/ReactQueryDevtools-DO8QvfQP.d.ts

-import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsOptions {
-    /**
-     * Set this true if you want the dev tools to default to being open
-     */
-    initialIsOpen?: boolean;
-    /**
-     * The position of the React Query logo to open and close the devtools panel.
-     * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
-     * Defaults to 'bottom-right'.
-     */
-    buttonPosition?: DevtoolsButtonPosition;
-    /**
-     * The position of the React Query devtools panel.
-     * 'top' | 'bottom' | 'left' | 'right'
-     * Defaults to 'bottom'.
-     */
-    position?: DevtoolsPosition;
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
-
-type Devtools_DevtoolsOptions = DevtoolsOptions;
-declare const Devtools_ReactQueryDevtools: typeof ReactQueryDevtools;
-declare namespace Devtools {
-  export { type Devtools_DevtoolsOptions as DevtoolsOptions, Devtools_ReactQueryDevtools as ReactQueryDevtools };
-}
-
-export { Devtools as D, ReactQueryDevtools as R, type DevtoolsOptions as a };

build/modern/ReactQueryDevtoolsPanel-BAUD7o3r.d.cts

-import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: React.CSSProperties;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => unknown;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
-
-type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
-declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
-declare namespace DevtoolsPanel {
-  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
-}
-
-export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

build/modern/ReactQueryDevtoolsPanel-BAUD7o3r.d.ts

-import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
-import { QueryClient } from '@tanstack/react-query';
-
-interface DevtoolsPanelOptions {
-    /**
-     * Custom instance of QueryClient
-     */
-    client?: QueryClient;
-    /**
-     * Use this so you can define custom errors that can be shown in the devtools.
-     */
-    errorTypes?: Array<DevtoolsErrorType>;
-    /**
-     * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
-     */
-    styleNonce?: string;
-    /**
-     * Use this so you can attach the devtool's styles to specific element in the DOM.
-     */
-    shadowDOMTarget?: ShadowRoot;
-    /**
-     * Custom styles for the devtools panel
-     * @default { height: '500px' }
-     * @example { height: '100%' }
-     * @example { height: '100%', width: '100%' }
-     */
-    style?: React.CSSProperties;
-    /**
-     * Callback function that is called when the devtools panel is closed
-     */
-    onClose?: () => unknown;
-    /**
-     * Set this to true to hide disabled queries from the devtools panel.
-     */
-    hideDisabledQueries?: boolean;
-}
-declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
-
-type DevtoolsPanel_DevtoolsPanelOptions = DevtoolsPanelOptions;
-declare const DevtoolsPanel_ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel;
-declare namespace DevtoolsPanel {
-  export { type DevtoolsPanel_DevtoolsPanelOptions as DevtoolsPanelOptions, DevtoolsPanel_ReactQueryDevtoolsPanel as ReactQueryDevtoolsPanel };
-}
-
-export { DevtoolsPanel as D, ReactQueryDevtoolsPanel as R, type DevtoolsPanelOptions as a };

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

106775

5.8%

Lines of code

1407

8.15%

Dependency changes

• + Added

  @tanstack/query-devtools@5.91.0
  (transitive)

• - Removed

  @tanstack/query-devtools@5.90.1
  (transitive)

• Updated

  @tanstack/query-devtools@5.91.0