npm - @tanstack/react-query-devtools - Versions diffs - 5.90.2 → 5.91.0 - Mend

@tanstack/react-query-devtools 5.90.2 → 5.91.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (43) hide show

package/build/legacy/{ReactQueryDevtools-DO8QvfQP.d.cts → ReactQueryDevtools-ChNsB-ya.d.cts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsOptions {
@@ -39,6 +39,11 @@ interface DevtoolsOptions {
      * 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;

package/build/legacy/{ReactQueryDevtools-DO8QvfQP.d.ts → ReactQueryDevtools-ChNsB-ya.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsOptions {
@@ -39,6 +39,11 @@ interface DevtoolsOptions {
      * 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;

package/build/legacy/ReactQueryDevtools.cjs CHANGED Viewed

@@ -48,7 +48,8 @@ function ReactQueryDevtools(props) {
     errorTypes,
     styleNonce,
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
   const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtools({
@@ -62,7 +63,8 @@ function ReactQueryDevtools(props) {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -84,6 +86,9 @@ function ReactQueryDevtools(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/legacy/ReactQueryDevtools.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;~~AA+G7B~~;~~AAhEF~~,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}

package/build/legacy/ReactQueryDevtools.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/legacy/ReactQueryDevtools.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/legacy/ReactQueryDevtools.js CHANGED Viewed

@@ -15,7 +15,8 @@ function ReactQueryDevtools(props) {
     errorTypes,
     styleNonce,
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
@@ -29,7 +30,8 @@ function ReactQueryDevtools(props) {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -51,6 +53,9 @@ function ReactQueryDevtools(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/legacy/ReactQueryDevtools.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;~~AA+G7B~~;~~AAhEF~~,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}

package/build/{modern/ReactQueryDevtoolsPanel-BAUD7o3r.d.cts → legacy/ReactQueryDevtoolsPanel-D67eVd_j.d.cts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsPanelOptions {
@@ -34,6 +34,11 @@ interface DevtoolsPanelOptions {
      * 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;

package/build/{modern/ReactQueryDevtoolsPanel-BAUD7o3r.d.ts → legacy/ReactQueryDevtoolsPanel-D67eVd_j.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsPanelOptions {
@@ -34,6 +34,11 @@ interface DevtoolsPanelOptions {
      * 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;

package/build/legacy/ReactQueryDevtoolsPanel.cjs CHANGED Viewed

@@ -41,7 +41,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function ReactQueryDevtoolsPanel(props) {
   const queryClient = (0, import_react_query.useQueryClient)(props.client);
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -55,7 +61,8 @@ function ReactQueryDevtoolsPanel(props) {
       styleNonce,
       shadowDOMTarget,
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -68,6 +75,9 @@ function ReactQueryDevtoolsPanel(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/legacy/ReactQueryDevtoolsPanel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;~~AAsFvC~~;~~AA9CG~~,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,~~EAAE~~,~~YAAY~~,~~YAAY~~,~~iBAAiB~~,~~oBAAoB~~,IAAI;~~AACzE~~,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/legacy/ReactQueryDevtoolsPanel.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/legacy/ReactQueryDevtoolsPanel.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/legacy/ReactQueryDevtoolsPanel.js CHANGED Viewed

@@ -8,7 +8,13 @@ import { jsx } from "react/jsx-runtime";
 function ReactQueryDevtoolsPanel(props) {
   const queryClient = useQueryClient(props.client);
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
     new TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -22,7 +28,8 @@ function ReactQueryDevtoolsPanel(props) {
       styleNonce,
       shadowDOMTarget,
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -35,6 +42,9 @@ function ReactQueryDevtoolsPanel(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/legacy/ReactQueryDevtoolsPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;~~AAsFvC~~;~~AA9CG~~,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,~~EAAE~~,~~YAAY~~,~~YAAY~~,~~iBAAiB~~,~~oBAAoB~~,IAAI;~~AACzE~~,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/legacy/index.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/production.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/production.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/{ReactQueryDevtools-DO8QvfQP.d.cts → ReactQueryDevtools-ChNsB-ya.d.cts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsOptions {
@@ -39,6 +39,11 @@ interface DevtoolsOptions {
      * 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;

package/build/modern/{ReactQueryDevtools-DO8QvfQP.d.ts → ReactQueryDevtools-ChNsB-ya.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsButtonPosition, DevtoolsPosition, DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsOptions {
@@ -39,6 +39,11 @@ interface DevtoolsOptions {
      * 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;

package/build/modern/ReactQueryDevtools.cjs CHANGED Viewed

@@ -48,7 +48,8 @@ function ReactQueryDevtools(props) {
     errorTypes,
     styleNonce,
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
   const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtools({
@@ -62,7 +63,8 @@ function ReactQueryDevtools(props) {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -84,6 +86,9 @@ function ReactQueryDevtools(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/modern/ReactQueryDevtools.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;~~AA+G7B~~;~~AAhEF~~,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}

package/build/modern/ReactQueryDevtools.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/modern/ReactQueryDevtools.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/modern/ReactQueryDevtools.js CHANGED Viewed

@@ -15,7 +15,8 @@ function ReactQueryDevtools(props) {
     errorTypes,
     styleNonce,
     shadowDOMTarget,
-    hideDisabledQueries
+    hideDisabledQueries,
+    theme
   } = props;
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
@@ -29,7 +30,8 @@ function ReactQueryDevtools(props) {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -51,6 +53,9 @@ function ReactQueryDevtools(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/modern/ReactQueryDevtools.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;~~AA+G7B~~;~~AAhEF~~,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport type {\n DevtoolsButtonPosition,\n DevtoolsErrorType,\n DevtoolsPosition,\n Theme,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n /*\n Set this true if you want the dev tools to default to being open\n /\n initialIsOpen?: boolean\n /\n The position of the React Query logo to open and close the devtools panel.\n * 'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'\n * Defaults to 'bottom-right'.\n /\n buttonPosition?: DevtoolsButtonPosition\n /\n The position of the React Query devtools panel.\n * 'top' \| 'bottom' \| 'left' \| 'right'\n * Defaults to 'bottom'.\n /\n position?: DevtoolsPosition\n /\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtools(\n props: DevtoolsOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtools({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition,\n position,\n initialIsOpen,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n if (buttonPosition) {\n devtools.setButtonPosition(buttonPosition)\n }\n }, [buttonPosition, devtools])\n\n React.useEffect(() => {\n if (position) {\n devtools.setPosition(position)\n }\n }, [position, devtools])\n\n React.useEffect(() => {\n devtools.setInitialIsOpen(initialIsOpen \|\| false)\n }, [initialIsOpen, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return <div dir=\"ltr\" className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AA2H7B;AAtEF,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oBAAC,SAAI,KAAI,OAAM,WAAU,yBAAwB,KAAU;AACpE;","names":[]}

package/build/{legacy/ReactQueryDevtoolsPanel-BAUD7o3r.d.cts → modern/ReactQueryDevtoolsPanel-D67eVd_j.d.cts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsPanelOptions {
@@ -34,6 +34,11 @@ interface DevtoolsPanelOptions {
      * 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;

package/build/{legacy/ReactQueryDevtoolsPanel-BAUD7o3r.d.ts → modern/ReactQueryDevtoolsPanel-D67eVd_j.d.ts} RENAMED Viewed

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DevtoolsErrorType } from '@tanstack/query-devtools';
+import { DevtoolsErrorType, Theme } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 interface DevtoolsPanelOptions {
@@ -34,6 +34,11 @@ interface DevtoolsPanelOptions {
      * 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;

package/build/modern/ReactQueryDevtoolsPanel.cjs CHANGED Viewed

@@ -41,7 +41,13 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function ReactQueryDevtoolsPanel(props) {
   const queryClient = (0, import_react_query.useQueryClient)(props.client);
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -55,7 +61,8 @@ function ReactQueryDevtoolsPanel(props) {
       styleNonce,
       shadowDOMTarget,
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -68,6 +75,9 @@ function ReactQueryDevtoolsPanel(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/modern/ReactQueryDevtoolsPanel.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;~~AAsFvC~~;~~AA9CG~~,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,~~EAAE~~,~~YAAY~~,~~YAAY~~,~~iBAAiB~~,~~oBAAoB~~,IAAI;~~AACzE~~,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/modern/ReactQueryDevtoolsPanel.d.cts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/modern/ReactQueryDevtoolsPanel.d.ts CHANGED Viewed

@@ -1,4 +1,4 @@
 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';

package/build/modern/ReactQueryDevtoolsPanel.js CHANGED Viewed

@@ -8,7 +8,13 @@ import { jsx } from "react/jsx-runtime";
 function ReactQueryDevtoolsPanel(props) {
   const queryClient = useQueryClient(props.client);
   const ref = React.useRef(null);
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props;
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme
+  } = props;
   const [devtools] = React.useState(
     new TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -22,7 +28,8 @@ function ReactQueryDevtoolsPanel(props) {
       styleNonce,
       shadowDOMTarget,
       onClose: props.onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     })
   );
   React.useEffect(() => {
@@ -35,6 +42,9 @@ function ReactQueryDevtoolsPanel(props) {
   React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    devtools.setTheme(theme);
+  }, [theme, devtools]);
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);

package/build/modern/ReactQueryDevtoolsPanel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n */\n hideDisabledQueries?: boolean\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;~~AAsFvC~~;~~AA9CG~~,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,~~EAAE~~,~~YAAY~~,~~YAAY~~,~~iBAAiB~~,~~oBAAoB~~,IAAI;~~AACzE~~,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}
1	+ {"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n /*\n Custom instance of QueryClient\n /\n client?: QueryClient\n /\n Use this so you can define custom errors that can be shown in the devtools.\n /\n errorTypes?: Array<DevtoolsErrorType>\n /\n 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.\n /\n styleNonce?: string\n /\n Use this so you can attach the devtool's styles to specific element in the DOM.\n /\n shadowDOMTarget?: ShadowRoot\n\n /\n Custom styles for the devtools panel\n * @default { height: '500px' }\n * @example { height: '100%' }\n * @example { height: '100%', width: '100%' }\n /\n style?: React.CSSProperties\n\n /\n Callback function that is called when the devtools panel is closed\n /\n onClose?: () => unknown\n /\n Set this to true to hide disabled queries from the devtools panel.\n /\n hideDisabledQueries?: boolean\n /\n Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.\n * Defaults to 'system'.\n */\n theme?: Theme\n}\n\nexport function ReactQueryDevtoolsPanel(\n props: DevtoolsPanelOptions,\n): React.ReactElement \| null {\n const queryClient = useQueryClient(props.client)\n const ref = React.useRef<HTMLDivElement>(null)\n const {\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n hideDisabledQueries,\n theme,\n } = props\n const [devtools] = React.useState(\n new TanstackQueryDevtoolsPanel({\n client: queryClient,\n queryFlavor: 'React Query',\n version: '5',\n onlineManager,\n buttonPosition: 'bottom-left',\n position: 'bottom',\n initialIsOpen: true,\n errorTypes,\n styleNonce,\n shadowDOMTarget,\n onClose: props.onClose,\n hideDisabledQueries,\n theme,\n }),\n )\n\n React.useEffect(() => {\n devtools.setClient(queryClient)\n }, [queryClient, devtools])\n\n React.useEffect(() => {\n devtools.setOnClose(props.onClose ?? (() => {}))\n }, [props.onClose, devtools])\n\n React.useEffect(() => {\n devtools.setErrorTypes(errorTypes \|\| [])\n }, [errorTypes, devtools])\n\n React.useEffect(() => {\n devtools.setTheme(theme)\n }, [theme, devtools])\n\n React.useEffect(() => {\n if (ref.current) {\n devtools.mount(ref.current)\n }\n\n return () => {\n devtools.unmount()\n }\n }, [devtools])\n\n return (\n <div\n style={{ height: '500px', ...props.style }}\n className=\"tsqd-parent-container\"\n ref={ref}\n ></div>\n )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAsGvC;AAzDG,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,MACf;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,aAAS,SAAS,KAAK;AAAA,EACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;AAEpB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/modern/index.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/production.d.cts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/production.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
-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';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "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",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -59,7 +59,7 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.90.1"
+    "@tanstack/query-devtools": "5.91.0"
   },
   "devDependencies": {
     "@testing-library/react": "^16.1.0",
@@ -67,11 +67,11 @@
     "@vitejs/plugin-react": "^4.3.4",
     "npm-run-all2": "^5.0.0",
     "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"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/ReactQueryDevtools.tsx CHANGED Viewed

@@ -6,6 +6,7 @@ import type {
   DevtoolsButtonPosition,
   DevtoolsErrorType,
   DevtoolsPosition,
+  Theme,
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
@@ -46,6 +47,11 @@ export interface DevtoolsOptions {
    * 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
 }
 export function ReactQueryDevtools(
@@ -61,6 +67,7 @@ export function ReactQueryDevtools(
     styleNonce,
     shadowDOMTarget,
     hideDisabledQueries,
+    theme,
   } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtools({
@@ -75,6 +82,7 @@ export function ReactQueryDevtools(
       styleNonce,
       shadowDOMTarget,
       hideDisabledQueries,
+      theme,
     }),
   )
@@ -102,6 +110,10 @@ export function ReactQueryDevtools(
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
+  React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)

package/src/ReactQueryDevtoolsPanel.tsx CHANGED Viewed

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import { onlineManager, useQueryClient } from '@tanstack/react-query'
 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'
 export interface DevtoolsPanelOptions {
@@ -39,6 +39,11 @@ export interface DevtoolsPanelOptions {
    * 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
 }
 export function ReactQueryDevtoolsPanel(
@@ -46,7 +51,13 @@ export function ReactQueryDevtoolsPanel(
 ): React.ReactElement | null {
   const queryClient = useQueryClient(props.client)
   const ref = React.useRef<HTMLDivElement>(null)
-  const { errorTypes, styleNonce, shadowDOMTarget, hideDisabledQueries } = props
+  const {
+    errorTypes,
+    styleNonce,
+    shadowDOMTarget,
+    hideDisabledQueries,
+    theme,
+  } = props
   const [devtools] = React.useState(
     new TanstackQueryDevtoolsPanel({
       client: queryClient,
@@ -61,6 +72,7 @@ export function ReactQueryDevtoolsPanel(
       shadowDOMTarget,
       onClose: props.onClose,
       hideDisabledQueries,
+      theme,
     }),
   )
@@ -76,6 +88,10 @@ export function ReactQueryDevtoolsPanel(
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
+  React.useEffect(() => {
+    devtools.setTheme(theme)
+  }, [theme, devtools])
   React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)