@tanstack/react-query-devtools 5.104.1 → 5.104.3

package/build/legacy/ReactQueryDevtools.cjs

@@ -7,6 +7,12 @@ let _tanstack_react_query = require("@tanstack/react-query");
 let _tanstack_query_devtools = require("@tanstack/query-devtools");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ReactQueryDevtools.tsx
+/**
+* Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+* nearest `QueryClient`.
+* @param props - The devtools options.
+* @returns The element the devtools are mounted in.
+*/
 function ReactQueryDevtools(props) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)(props.client);
 	const ref = react.useRef(null);

package/build/legacy/ReactQueryDevtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.cjs","names":["useQueryClient","React","TanstackQueryDevtools"],"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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   *\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   *\n   * @defaultValue 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   *\n   * @defaultValue 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":";;;;;;;;;AA2DA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}
+{"version":3,"file":"ReactQueryDevtools.cjs","names":["useQueryClient","React","TanstackQueryDevtools"],"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\n/**\n * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens\n * them.\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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * @defaultValue 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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or\n * nearest `QueryClient`.\n * @param props - The devtools options.\n * @returns The element the devtools are mounted in.\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":";;;;;;;;;;;;;;;AAmEA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}

package/build/legacy/ReactQueryDevtools.d.cts

@@ -4,6 +4,10 @@ import { QueryClient } from "@tanstack/react-query";
 declare namespace ReactQueryDevtools_d_exports {
   export { DevtoolsOptions, ReactQueryDevtools };
 }
+/**
+ * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens
+ * them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -12,14 +16,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition;
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition;
@@ -36,7 +38,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -45,11 +48,16 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+ * nearest `QueryClient`.
+ * @param props - The devtools options.
+ * @returns The element the devtools are mounted in.
+ */
 export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtools_d_exports as t };

package/build/legacy/ReactQueryDevtools.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.d.cts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;iBAYiB;;;;EAIf;;;;;;;EAOA,iBAAiB;;;;;;;EAOjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;EAIlB;;;;;;EAMA,QAAQ;;wBAGM,mBACd,OAAO,kBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtools.d.cts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;;;;;iBAgBiB;;;;EAIf;;;;;;EAMA,iBAAiB;;;;;;EAMjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;EAIlB;;;;;EAKA,QAAQ;;;;;;;;wBASM,mBACd,OAAO,kBACN,MAAM"}

package/build/legacy/ReactQueryDevtools.d.ts

@@ -4,6 +4,10 @@ import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } fr
 declare namespace ReactQueryDevtools_d_exports {
   export { DevtoolsOptions, ReactQueryDevtools };
 }
+/**
+ * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens
+ * them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -12,14 +16,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition;
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition;
@@ -36,7 +38,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -45,11 +48,16 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+ * nearest `QueryClient`.
+ * @param props - The devtools options.
+ * @returns The element the devtools are mounted in.
+ */
 export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtools_d_exports as t };

package/build/legacy/ReactQueryDevtools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.d.ts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;iBAYiB;;;;EAIf;;;;;;;EAOA,iBAAiB;;;;;;;EAOjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;EAIlB;;;;;;EAMA,QAAQ;;wBAGM,mBACd,OAAO,kBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtools.d.ts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;;;;;iBAgBiB;;;;EAIf;;;;;;EAMA,iBAAiB;;;;;;EAMjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;EAIlB;;;;;EAKA,QAAQ;;;;;;;;wBASM,mBACd,OAAO,kBACN,MAAM"}

package/build/legacy/ReactQueryDevtools.js

@@ -4,6 +4,12 @@ import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
 import { jsx } from "react/jsx-runtime";
 //#region src/ReactQueryDevtools.tsx
+/**
+* Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+* nearest `QueryClient`.
+* @param props - The devtools options.
+* @returns The element the devtools are mounted in.
+*/
 function ReactQueryDevtools(props) {
 	const queryClient = useQueryClient(props.client);
 	const ref = React.useRef(null);

package/build/legacy/ReactQueryDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.js","names":[],"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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   *\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   *\n   * @defaultValue 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   *\n   * @defaultValue 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":";;;;;;AA2DA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,oBAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}
+{"version":3,"file":"ReactQueryDevtools.js","names":[],"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\n/**\n * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens\n * them.\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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * @defaultValue 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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or\n * nearest `QueryClient`.\n * @param props - The devtools options.\n * @returns The element the devtools are mounted in.\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":";;;;;;;;;;;;AAmEA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,oBAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}

package/build/legacy/ReactQueryDevtoolsPanel.cjs

@@ -7,6 +7,11 @@ let _tanstack_react_query = require("@tanstack/react-query");
 let _tanstack_query_devtools = require("@tanstack/query-devtools");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ReactQueryDevtoolsPanel.tsx
+/**
+* Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+* @param props - The devtools panel options.
+* @returns The element the devtools panel is mounted in.
+*/
 function ReactQueryDevtoolsPanel(props) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)(props.client);
 	const ref = react.useRef(null);

package/build/legacy/ReactQueryDevtoolsPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.cjs","names":["useQueryClient","React","TanstackQueryDevtoolsPanel"],"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?: () => void\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   *\n   * @defaultValue 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":";;;;;;;;;AAiDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.cjs","names":["useQueryClient","React","TanstackQueryDevtoolsPanel"],"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\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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?: () => void\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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.\n * @param props - The devtools panel options.\n * @returns The element the devtools panel is mounted in.\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":";;;;;;;;;;;;;;AAyDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/legacy/ReactQueryDevtoolsPanel.d.cts

@@ -4,6 +4,9 @@ import { QueryClient } from "@tanstack/react-query";
 declare namespace ReactQueryDevtoolsPanel_d_exports {
   export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
 }
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -18,7 +21,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -38,11 +42,15 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+ * @param props - The devtools panel options.
+ * @returns The element the devtools panel is mounted in.
+ */
 export declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtoolsPanel_d_exports as t };

package/build/legacy/ReactQueryDevtoolsPanel.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.d.cts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;iBAOiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;;EAMA,QAAQ;;wBAGM,wBACd,OAAO,uBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.d.cts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;;;;iBAUiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;EAKA,QAAQ;;;;;;;wBAQM,wBACd,OAAO,uBACN,MAAM"}

package/build/legacy/ReactQueryDevtoolsPanel.d.ts

@@ -4,6 +4,9 @@ import { DevtoolsErrorType, Theme } from "@tanstack/query-devtools";
 declare namespace ReactQueryDevtoolsPanel_d_exports {
   export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
 }
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -18,7 +21,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -38,11 +42,15 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+ * @param props - The devtools panel options.
+ * @returns The element the devtools panel is mounted in.
+ */
 export declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtoolsPanel_d_exports as t };

package/build/legacy/ReactQueryDevtoolsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.d.ts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;iBAOiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;;EAMA,QAAQ;;wBAGM,wBACd,OAAO,uBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.d.ts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;;;;iBAUiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;EAKA,QAAQ;;;;;;;wBAQM,wBACd,OAAO,uBACN,MAAM"}

package/build/legacy/ReactQueryDevtoolsPanel.js

@@ -4,6 +4,11 @@ import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
 import { jsx } from "react/jsx-runtime";
 //#region src/ReactQueryDevtoolsPanel.tsx
+/**
+* Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+* @param props - The devtools panel options.
+* @returns The element the devtools panel is mounted in.
+*/
 function ReactQueryDevtoolsPanel(props) {
 	const queryClient = useQueryClient(props.client);
 	const ref = React.useRef(null);

package/build/legacy/ReactQueryDevtoolsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.js","names":[],"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?: () => void\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   *\n   * @defaultValue 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":";;;;;;AAiDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.js","names":[],"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\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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?: () => void\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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.\n * @param props - The devtools panel options.\n * @returns The element the devtools panel is mounted in.\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":";;;;;;;;;;;AAyDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/legacy/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,2BAAA;AAGN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,gCAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\n */\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,2BAAA;AAGN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,gCAAA"}

package/build/legacy/index.d.cts

@@ -3,6 +3,9 @@ import { DevtoolsPanelOptions as DevtoolsPanelOptions$1, t as ReactQueryDevtools
 //#region src/index.d.ts
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
 //#endregion
 //# sourceMappingURL=index.d.cts.map

package/build/legacy/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;YAOlC,uBAAuBC"}
+{"version":3,"file":"index.d.cts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;;;;YAUlC,uBAAuBC"}

package/build/legacy/index.d.ts

@@ -3,6 +3,9 @@ import { DevtoolsPanelOptions as DevtoolsPanelOptions$1, t as ReactQueryDevtools
 //#region src/index.d.ts
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
 //#endregion
 //# sourceMappingURL=index.d.ts.map

package/build/legacy/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;YAOlC,uBAAuBC"}
+{"version":3,"file":"index.d.ts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;;;;YAUlC,uBAAuBC"}

package/build/legacy/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Devtools.ReactQueryDevtools","DevtoolsPanel.ReactQueryDevtoolsPanel"],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAA;AAEN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAC"}
+{"version":3,"file":"index.js","names":["Devtools.ReactQueryDevtools","DevtoolsPanel.ReactQueryDevtoolsPanel"],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\n */\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAA;AAEN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAC"}

package/build/modern/ReactQueryDevtools.cjs

@@ -7,6 +7,12 @@ let _tanstack_react_query = require("@tanstack/react-query");
 let _tanstack_query_devtools = require("@tanstack/query-devtools");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ReactQueryDevtools.tsx
+/**
+* Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+* nearest `QueryClient`.
+* @param props - The devtools options.
+* @returns The element the devtools are mounted in.
+*/
 function ReactQueryDevtools(props) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)(props.client);
 	const ref = react.useRef(null);

package/build/modern/ReactQueryDevtools.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.cjs","names":["useQueryClient","React","TanstackQueryDevtools"],"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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   *\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   *\n   * @defaultValue 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   *\n   * @defaultValue 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":";;;;;;;;;AA2DA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}
+{"version":3,"file":"ReactQueryDevtools.cjs","names":["useQueryClient","React","TanstackQueryDevtools"],"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\n/**\n * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens\n * them.\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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * @defaultValue 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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or\n * nearest `QueryClient`.\n * @param props - The devtools options.\n * @returns The element the devtools are mounted in.\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":";;;;;;;;;;;;;;;AAmEA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}

package/build/modern/ReactQueryDevtools.d.cts

@@ -4,6 +4,10 @@ import { QueryClient } from "@tanstack/react-query";
 declare namespace ReactQueryDevtools_d_exports {
   export { DevtoolsOptions, ReactQueryDevtools };
 }
+/**
+ * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens
+ * them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -12,14 +16,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition;
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition;
@@ -36,7 +38,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -45,11 +48,16 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+ * nearest `QueryClient`.
+ * @param props - The devtools options.
+ * @returns The element the devtools are mounted in.
+ */
 export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtools_d_exports as t };

package/build/modern/ReactQueryDevtools.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.d.cts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;iBAYiB;;;;EAIf;;;;;;;EAOA,iBAAiB;;;;;;;EAOjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;EAIlB;;;;;;EAMA,QAAQ;;wBAGM,mBACd,OAAO,kBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtools.d.cts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;;;;;iBAgBiB;;;;EAIf;;;;;;EAMA,iBAAiB;;;;;;EAMjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;EAIlB;;;;;EAKA,QAAQ;;;;;;;;wBASM,mBACd,OAAO,kBACN,MAAM"}

package/build/modern/ReactQueryDevtools.d.ts

@@ -4,6 +4,10 @@ import { DevtoolsButtonPosition, DevtoolsErrorType, DevtoolsPosition, Theme } fr
 declare namespace ReactQueryDevtools_d_exports {
   export { DevtoolsOptions, ReactQueryDevtools };
 }
+/**
+ * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens
+ * them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -12,14 +16,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition;
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition;
@@ -36,7 +38,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -45,11 +48,16 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+ * nearest `QueryClient`.
+ * @param props - The devtools options.
+ * @returns The element the devtools are mounted in.
+ */
 export declare function ReactQueryDevtools(props: DevtoolsOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtools_d_exports as t };

package/build/modern/ReactQueryDevtools.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.d.ts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;iBAYiB;;;;EAIf;;;;;;;EAOA,iBAAiB;;;;;;;EAOjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;EAIlB;;;;;;EAMA,QAAQ;;wBAGM,mBACd,OAAO,kBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtools.d.ts","names":[],"sources":["../../src/ReactQueryDevtools.tsx"],"mappings":";;;;;;;;;;iBAgBiB;;;;EAIf;;;;;;EAMA,iBAAiB;;;;;;EAMjB,WAAW;;;;EAIX,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;EAIlB;;;;;EAKA,QAAQ;;;;;;;;wBASM,mBACd,OAAO,kBACN,MAAM"}

package/build/modern/ReactQueryDevtools.js

@@ -4,6 +4,12 @@ import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
 import { jsx } from "react/jsx-runtime";
 //#region src/ReactQueryDevtools.tsx
+/**
+* Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+* nearest `QueryClient`.
+* @param props - The devtools options.
+* @returns The element the devtools are mounted in.
+*/
 function ReactQueryDevtools(props) {
 	const queryClient = useQueryClient(props.client);
 	const ref = React.useRef(null);

package/build/modern/ReactQueryDevtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtools.js","names":[],"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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   *\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   *\n   * @defaultValue 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   *\n   * @defaultValue 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":";;;;;;AA2DA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,oBAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}
+{"version":3,"file":"ReactQueryDevtools.js","names":[],"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\n/**\n * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens\n * them.\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 TanStack logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'\n   * @defaultValue bottom-right\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * @defaultValue 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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or\n * nearest `QueryClient`.\n * @param props - The devtools options.\n * @returns The element the devtools are mounted in.\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":";;;;;;;;;;;;AAmEA,SAAgB,mBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,gBACA,UACA,eACA,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,IAAI,gBACF,SAAS,kBAAkB,cAAc;CAE7C,GAAG,CAAC,gBAAgB,QAAQ,CAAC;CAE7B,MAAM,gBAAgB;EACpB,IAAI,UACF,SAAS,YAAY,QAAQ;CAEjC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,gBAAgB;EACpB,SAAS,iBAAiB,iBAAiB,KAAK;CAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OAAO,oBAAC,OAAD;EAAK,KAAI;EAAM,WAAU;EAA6B;CAAU,CAAA;AACzE"}

package/build/modern/ReactQueryDevtoolsPanel.cjs

@@ -7,6 +7,11 @@ let _tanstack_react_query = require("@tanstack/react-query");
 let _tanstack_query_devtools = require("@tanstack/query-devtools");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/ReactQueryDevtoolsPanel.tsx
+/**
+* Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+* @param props - The devtools panel options.
+* @returns The element the devtools panel is mounted in.
+*/
 function ReactQueryDevtoolsPanel(props) {
 	const queryClient = (0, _tanstack_react_query.useQueryClient)(props.client);
 	const ref = react.useRef(null);

package/build/modern/ReactQueryDevtoolsPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.cjs","names":["useQueryClient","React","TanstackQueryDevtoolsPanel"],"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?: () => void\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   *\n   * @defaultValue 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":";;;;;;;;;AAiDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.cjs","names":["useQueryClient","React","TanstackQueryDevtoolsPanel"],"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\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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?: () => void\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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.\n * @param props - The devtools panel options.\n * @returns The element the devtools panel is mounted in.\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":";;;;;;;;;;;;;;AAyDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,eAAA,GAAcA,sBAAAA,eAAAA,CAAe,MAAM,MAAM;CAC/C,MAAM,MAAMC,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAYA,MAAM,SACvB,IAAIC,yBAAAA,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/modern/ReactQueryDevtoolsPanel.d.cts

@@ -4,6 +4,9 @@ import { QueryClient } from "@tanstack/react-query";
 declare namespace ReactQueryDevtoolsPanel_d_exports {
   export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
 }
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -18,7 +21,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -38,11 +42,15 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+ * @param props - The devtools panel options.
+ * @returns The element the devtools panel is mounted in.
+ */
 export declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtoolsPanel_d_exports as t };

package/build/modern/ReactQueryDevtoolsPanel.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.d.cts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;iBAOiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;;EAMA,QAAQ;;wBAGM,wBACd,OAAO,uBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.d.cts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;;;;iBAUiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;EAKA,QAAQ;;;;;;;wBAQM,wBACd,OAAO,uBACN,MAAM"}

package/build/modern/ReactQueryDevtoolsPanel.d.ts

@@ -4,6 +4,9 @@ import { DevtoolsErrorType, Theme } from "@tanstack/query-devtools";
 declare namespace ReactQueryDevtoolsPanel_d_exports {
   export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
 }
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -18,7 +21,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string;
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot;
   /**
@@ -38,11 +42,15 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean;
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme;
 }
+/**
+ * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+ * @param props - The devtools panel options.
+ * @returns The element the devtools panel is mounted in.
+ */
 export declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 //#endregion
 export { ReactQueryDevtoolsPanel_d_exports as t };

package/build/modern/ReactQueryDevtoolsPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.d.ts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;iBAOiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;EAIA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;;EAMA,QAAQ;;wBAGM,wBACd,OAAO,uBACN,MAAM"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.d.ts","names":[],"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"mappings":";;;;;;;;;iBAUiB;;;;EAIf,SAAS;;;;EAIT,aAAa,MAAM;;;;EAInB;;;;;EAKA,kBAAkB;;;;;;;EAQlB,QAAQ,MAAM;;;;EAKd;;;;EAIA;;;;;EAKA,QAAQ;;;;;;;wBAQM,wBACd,OAAO,uBACN,MAAM"}

package/build/modern/ReactQueryDevtoolsPanel.js

@@ -4,6 +4,11 @@ import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
 import { jsx } from "react/jsx-runtime";
 //#region src/ReactQueryDevtoolsPanel.tsx
+/**
+* Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+* @param props - The devtools panel options.
+* @returns The element the devtools panel is mounted in.
+*/
 function ReactQueryDevtoolsPanel(props) {
 	const queryClient = useQueryClient(props.client);
 	const ref = React.useRef(null);

package/build/modern/ReactQueryDevtoolsPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReactQueryDevtoolsPanel.js","names":[],"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?: () => void\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   *\n   * @defaultValue 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":";;;;;;AAiDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}
+{"version":3,"file":"ReactQueryDevtoolsPanel.js","names":[],"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\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\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 to pass a shadow DOM target to the devtools so that the styles will be applied\n   * within the shadow DOM instead of within the head tag in the light 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?: () => void\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   * @defaultValue system\n   */\n  theme?: Theme\n}\n\n/**\n * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.\n * @param props - The devtools panel options.\n * @returns The element the devtools panel is mounted in.\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":";;;;;;;;;;;AAyDA,SAAgB,wBACd,OAC2B;CAC3B,MAAM,cAAc,eAAe,MAAM,MAAM;CAC/C,MAAM,MAAM,MAAM,OAAuB,IAAI;CAC7C,MAAM,EACJ,YACA,YACA,iBACA,qBACA,UACE;CACJ,MAAM,CAAC,YAAY,MAAM,SACvB,IAAI,2BAA2B;EAC7B,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA,gBAAgB;EAChB,UAAU;EACV,eAAe;EACf;EACA;EACA;EACA,SAAS,MAAM;EACf;EACA;CACF,CAAC,CACH;CAEA,MAAM,gBAAgB;EACpB,SAAS,UAAU,WAAW;CAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;CAE1B,MAAM,gBAAgB;EACpB,SAAS,WAAW,MAAM,kBAAkB,CAAC,EAAE;CACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;CAE5B,MAAM,gBAAgB;EACpB,SAAS,cAAc,cAAc,CAAC,CAAC;CACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;CAEzB,MAAM,gBAAgB;EACpB,SAAS,SAAS,KAAK;CACzB,GAAG,CAAC,OAAO,QAAQ,CAAC;CAEpB,MAAM,gBAAgB;EACpB,IAAI,IAAI,SACN,SAAS,MAAM,IAAI,OAAO;EAG5B,aAAa;GACX,SAAS,QAAQ;EACnB;CACF,GAAG,CAAC,QAAQ,CAAC;CAEb,OACE,oBAAC,OAAD;EACE,OAAO;GAAE,QAAQ;GAAS,GAAG,MAAM;EAAM;EACzC,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/modern/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,2BAAA;AAGN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,gCAAA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\n */\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,2BAAA;AAGN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IAAA,gCAAA"}

package/build/modern/index.d.cts

@@ -3,6 +3,9 @@ import { DevtoolsPanelOptions as DevtoolsPanelOptions$1, t as ReactQueryDevtools
 //#region src/index.d.ts
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
 //#endregion
 //# sourceMappingURL=index.d.cts.map

package/build/modern/index.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.cts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;YAOlC,uBAAuBC"}
+{"version":3,"file":"index.d.cts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;;;;YAUlC,uBAAuBC"}

package/build/modern/index.d.ts

@@ -3,6 +3,9 @@ import { DevtoolsPanelOptions as DevtoolsPanelOptions$1, t as ReactQueryDevtools
 //#region src/index.d.ts
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export type DevtoolsPanelOptions = DevtoolsPanelOptions$1;
 //#endregion
 //# sourceMappingURL=index.d.ts.map

package/build/modern/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;YAOlC,uBAAuBC"}
+{"version":3,"file":"index.d.ts","names":["Devtools","DevtoolsPanel","DevtoolsPanel.DevtoolsPanelOptions"],"sources":["../../src/index.ts"],"mappings":";;;qBAKa,4BAA4BA;qBAO5B,iCAAiCC;;;;YAUlC,uBAAuBC"}

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Devtools.ReactQueryDevtools","DevtoolsPanel.ReactQueryDevtoolsPanel"],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAA;AAEN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAC"}
+{"version":3,"file":"index.js","names":["Devtools.ReactQueryDevtools","DevtoolsPanel.ReactQueryDevtoolsPanel"],"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : Devtools.ReactQueryDevtools\n\nexport const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : DevtoolsPanel.ReactQueryDevtoolsPanel\n\n/**\n * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.\n */\nexport type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions\n"],"mappings":";;;;AAKA,MAAa,qBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAA;AAEN,MAAa,0BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;CACV,OAAO;AACT,IACAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.104.1",
+  "version": "5.104.3",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -59,11 +59,11 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.104.1"
+    "@tanstack/query-devtools": "5.104.3"
   },
   "devDependencies": {
-    "@eslint-react/eslint-plugin": "^5.21.0",
-    "@tanstack/react-query": "5.104.1",
+    "@eslint-react/eslint-plugin": "^5.23.3",
+    "@tanstack/react-query": "5.104.3",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.2.7",
     "@vitejs/plugin-react": "^6.1.1",
@@ -72,21 +72,21 @@
     "typescript": "6.0.3"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.104.1",
+    "@tanstack/react-query": "^5.104.3",
     "@types/react": "^18 || ^19",
     "react": "^18 || ^19"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts ./.cache/test-types",
     "compile": "tsc --project tsconfig.json",
-    "test:eslint": "eslint --concurrency=auto ./src",
+    "test:oxlint": "oxlint ./src",
     "test:types": "npm-run-all --serial test:types:*",
-    "test:types:ts56": "node ../../node_modules/typescript56/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts56 --tsBuildInfoFile .cache/test-types/ts56.tsbuildinfo",
     "test:types:ts57": "node ../../node_modules/typescript57/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts57 --tsBuildInfoFile .cache/test-types/ts57.tsbuildinfo",
     "test:types:ts58": "node ../../node_modules/typescript58/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts58 --tsBuildInfoFile .cache/test-types/ts58.tsbuildinfo",
     "test:types:ts59": "node ../../node_modules/typescript59/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts59 --tsBuildInfoFile .cache/test-types/ts59.tsbuildinfo",
     "test:types:tscurrent": "tsc --project tsconfig.json --outDir .cache/test-types/tscurrent --tsBuildInfoFile .cache/test-types/tscurrent.tsbuildinfo",
     "test:types:ts70": "node ../../node_modules/typescript70/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts70 --tsBuildInfoFile .cache/test-types/ts70.tsbuildinfo",
+    "test:types:ts71": "node ../../node_modules/typescript71/lib/tsc.js --project tsconfig.legacy.json --outDir .cache/test-types/ts71 --tsBuildInfoFile .cache/test-types/ts71.tsbuildinfo",
     "test:lib": "vitest",
     "test:lib:dev": "pnpm run test:lib --watch",
     "test:build": "publint --strict && attw --pack",

package/src/ReactQueryDevtools.tsx

@@ -10,6 +10,10 @@ import type {
 } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 
+/**
+ * The props of `ReactQueryDevtools`, which renders the devtools with a toggle button that opens
+ * them.
+ */
 export interface DevtoolsOptions {
   /**
    * Set this true if you want the dev tools to default to being open
@@ -18,14 +22,12 @@ export interface DevtoolsOptions {
   /**
    * The position of the TanStack logo to open and close the devtools panel.
    * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'relative'
-   *
    * @defaultValue bottom-right
    */
   buttonPosition?: DevtoolsButtonPosition
   /**
    * The position of the React Query devtools panel.
    * 'top' | 'bottom' | 'left' | 'right'
-   *
    * @defaultValue bottom
    */
   position?: DevtoolsPosition
@@ -42,7 +44,8 @@ export interface DevtoolsOptions {
    */
   styleNonce?: string
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot
   /**
@@ -51,12 +54,17 @@ export interface DevtoolsOptions {
   hideDisabledQueries?: boolean
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme
 }
 
+/**
+ * Renders the TanStack Query devtools, with a toggle button that opens them, for the given or
+ * nearest `QueryClient`.
+ * @param props - The devtools options.
+ * @returns The element the devtools are mounted in.
+ */
 export function ReactQueryDevtools(
   props: DevtoolsOptions,
 ): React.ReactElement | null {

package/src/ReactQueryDevtoolsPanel.tsx

@@ -5,6 +5,9 @@ import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
 import type { DevtoolsErrorType, Theme } from '@tanstack/query-devtools'
 import type { QueryClient } from '@tanstack/react-query'
 
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export interface DevtoolsPanelOptions {
   /**
    * Custom instance of QueryClient
@@ -19,7 +22,8 @@ export interface DevtoolsPanelOptions {
    */
   styleNonce?: string
   /**
-   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   * Use this to pass a shadow DOM target to the devtools so that the styles will be applied
+   * within the shadow DOM instead of within the head tag in the light DOM.
    */
   shadowDOMTarget?: ShadowRoot
 
@@ -41,12 +45,16 @@ export interface DevtoolsPanelOptions {
   hideDisabledQueries?: boolean
   /**
    * Set this to 'light', 'dark', or 'system' to change the theme of the devtools panel.
-   *
    * @defaultValue system
    */
   theme?: Theme
 }
 
+/**
+ * Renders the TanStack Query devtools panel inline, for the given or nearest `QueryClient`.
+ * @param props - The devtools panel options.
+ * @returns The element the devtools panel is mounted in.
+ */
 export function ReactQueryDevtoolsPanel(
   props: DevtoolsPanelOptions,
 ): React.ReactElement | null {

package/src/index.ts

@@ -17,4 +17,7 @@ export const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtools
       }
     : DevtoolsPanel.ReactQueryDevtoolsPanel
 
+/**
+ * The props of `ReactQueryDevtoolsPanel`, which renders the devtools panel inline.
+ */
 export type DevtoolsPanelOptions = DevtoolsPanel.DevtoolsPanelOptions