@tanstack/react-query-devtools 5.14.1 → 5.14.2

package/build/legacy/{devtools-ZdlRR-0P.d.ts → devtools-0Hr18ibL.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 

package/build/legacy/devtools.cjs

@@ -34,16 +34,15 @@ __export(devtools_exports, {
   ReactQueryDevtools: () => ReactQueryDevtools
 });
 module.exports = __toCommonJS(devtools_exports);
-var import_react = require("react");
+var React = __toESM(require("react"), 1);
 var import_react_query = require("@tanstack/react-query");
 var import_query_devtools = require("@tanstack/query-devtools");
-var import_react2 = __toESM(require("react"), 1);
 function ReactQueryDevtools(props) {
   const queryClient = (0, import_react_query.useQueryClient)();
   const client = props.client || queryClient;
-  const ref = (0, import_react.useRef)(null);
+  const ref = React.useRef(null);
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } = props;
-  const [devtools] = (0, import_react.useState)(
+  const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtools({
       client,
       queryFlavor: "React Query",
@@ -56,26 +55,26 @@ function ReactQueryDevtools(props) {
       styleNonce
     })
   );
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setClient(client);
   }, [client, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);
     }
   }, [buttonPosition, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position);
     }
   }, [position, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false);
   }, [initialIsOpen, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);
     }
@@ -83,7 +82,7 @@ function ReactQueryDevtools(props) {
       devtools.unmount();
     };
   }, [devtools]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "tsqd-parent-container", ref });
+  return /* @__PURE__ */ React.createElement("div", { className: "tsqd-parent-container", ref });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/legacy/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useEffect, useRef, useState } from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nimport type {\n  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4C;AAC5C,yBAA8C;AAC9C,4BAAsC;AACtC,IAAAA,gBAAkB;AAuCX,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,QAAI;AAAA,IACjB,IAAI,4CAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,8BAAU,MAAM;AACd,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,8BAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,8BAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,8BAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,8BAAAC,QAAA,cAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":["import_react","React"]}
+{"version":3,"sources":["../../src/devtools.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  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = React.useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  React.useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  React.useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  React.useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AAuC/B,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}

package/build/legacy/devtools.d.cts

@@ -1,4 +1,4 @@
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-ZdlRR-0P.js';
+export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-0Hr18ibL.js';

package/build/legacy/devtools.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-ZdlRR-0P.js';
+export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-0Hr18ibL.js';

package/build/legacy/devtools.js

@@ -1,16 +1,15 @@
 "use client";
 
 // src/devtools.tsx
-import { useEffect, useRef, useState } from "react";
+import * as React from "react";
 import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
-import React from "react";
 function ReactQueryDevtools(props) {
   const queryClient = useQueryClient();
   const client = props.client || queryClient;
-  const ref = useRef(null);
+  const ref = React.useRef(null);
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } = props;
-  const [devtools] = useState(
+  const [devtools] = React.useState(
     new TanstackQueryDevtools({
       client,
       queryFlavor: "React Query",
@@ -23,26 +22,26 @@ function ReactQueryDevtools(props) {
       styleNonce
     })
   );
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setClient(client);
   }, [client, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);
     }
   }, [buttonPosition, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position);
     }
   }, [position, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false);
   }, [initialIsOpen, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);
     }

package/build/legacy/devtools.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useEffect, useRef, useState } from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nimport type {\n  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AACtC,OAAO,WAAW;AAuCX,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,IAAI,sBAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,YAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,YAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}
+{"version":3,"sources":["../../src/devtools.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  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = React.useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  React.useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  React.useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  React.useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AAuC/B,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}

package/build/legacy/index.d.cts

@@ -1,4 +1,4 @@
-import { d as devtools } from './devtools-ZdlRR-0P.js';
+import { d as devtools } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/index.d.ts

@@ -1,4 +1,4 @@
-import { d as devtools } from './devtools-ZdlRR-0P.js';
+import { d as devtools } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/production.d.cts

@@ -1,4 +1,4 @@
-import { R as ReactQueryDevtools$1 } from './devtools-ZdlRR-0P.js';
+import { R as ReactQueryDevtools$1 } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/legacy/production.d.ts

@@ -1,4 +1,4 @@
-import { R as ReactQueryDevtools$1 } from './devtools-ZdlRR-0P.js';
+import { R as ReactQueryDevtools$1 } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/{devtools-ZdlRR-0P.d.ts → devtools-0Hr18ibL.d.ts}

@@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { DevtoolsButtonPosition, DevtoolsPosition, DevToolsErrorType } from '@tanstack/query-devtools';
 import { QueryClient } from '@tanstack/react-query';
 

package/build/modern/devtools.cjs

@@ -34,16 +34,15 @@ __export(devtools_exports, {
   ReactQueryDevtools: () => ReactQueryDevtools
 });
 module.exports = __toCommonJS(devtools_exports);
-var import_react = require("react");
+var React = __toESM(require("react"), 1);
 var import_react_query = require("@tanstack/react-query");
 var import_query_devtools = require("@tanstack/query-devtools");
-var import_react2 = __toESM(require("react"), 1);
 function ReactQueryDevtools(props) {
   const queryClient = (0, import_react_query.useQueryClient)();
   const client = props.client || queryClient;
-  const ref = (0, import_react.useRef)(null);
+  const ref = React.useRef(null);
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } = props;
-  const [devtools] = (0, import_react.useState)(
+  const [devtools] = React.useState(
     new import_query_devtools.TanstackQueryDevtools({
       client,
       queryFlavor: "React Query",
@@ -56,26 +55,26 @@ function ReactQueryDevtools(props) {
       styleNonce
     })
   );
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setClient(client);
   }, [client, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);
     }
   }, [buttonPosition, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position);
     }
   }, [position, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false);
   }, [initialIsOpen, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);
     }
@@ -83,7 +82,7 @@ function ReactQueryDevtools(props) {
       devtools.unmount();
     };
   }, [devtools]);
-  return /* @__PURE__ */ import_react2.default.createElement("div", { className: "tsqd-parent-container", ref });
+  return /* @__PURE__ */ React.createElement("div", { className: "tsqd-parent-container", ref });
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/build/modern/devtools.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useEffect, useRef, useState } from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nimport type {\n  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAA4C;AAC5C,yBAA8C;AAC9C,4BAAsC;AACtC,IAAAA,gBAAkB;AAuCX,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,UAAM,qBAAuB,IAAI;AACvC,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,QAAI;AAAA,IACjB,IAAI,4CAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,8BAAU,MAAM;AACd,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,8BAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,8BAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,8BAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,8BAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,8BAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,8BAAAC,QAAA,cAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":["import_react","React"]}
+{"version":3,"sources":["../../src/devtools.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  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = React.useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  React.useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  React.useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  React.useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AAuC/B,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}

package/build/modern/devtools.d.cts

@@ -1,4 +1,4 @@
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-ZdlRR-0P.js';
+export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-0Hr18ibL.js';

package/build/modern/devtools.d.ts

@@ -1,4 +1,4 @@
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
-export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-ZdlRR-0P.js';
+export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-0Hr18ibL.js';

package/build/modern/devtools.js

@@ -1,16 +1,15 @@
 "use client";
 
 // src/devtools.tsx
-import { useEffect, useRef, useState } from "react";
+import * as React from "react";
 import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
-import React from "react";
 function ReactQueryDevtools(props) {
   const queryClient = useQueryClient();
   const client = props.client || queryClient;
-  const ref = useRef(null);
+  const ref = React.useRef(null);
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } = props;
-  const [devtools] = useState(
+  const [devtools] = React.useState(
     new TanstackQueryDevtools({
       client,
       queryFlavor: "React Query",
@@ -23,26 +22,26 @@ function ReactQueryDevtools(props) {
       styleNonce
     })
   );
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setClient(client);
   }, [client, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition);
     }
   }, [buttonPosition, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position);
     }
   }, [position, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false);
   }, [initialIsOpen, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || []);
   }, [errorTypes, devtools]);
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current);
     }

package/build/modern/devtools.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useEffect, useRef, useState } from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nimport type {\n  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,SAAS,WAAW,QAAQ,gBAAgB;AAC5C,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AACtC,OAAO,WAAW;AAuCX,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAM,OAAuB,IAAI;AACvC,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAI;AAAA,IACjB,IAAI,sBAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,YAAU,MAAM;AACd,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,YAAU,MAAM;AACd,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,YAAU,MAAM;AACd,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,YAAU,MAAM;AACd,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,YAAU,MAAM;AACd,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,YAAU,MAAM;AACd,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}
+{"version":3,"sources":["../../src/devtools.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  DevToolsErrorType,\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevToolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const client = props.client || queryClient\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =\n    props\n  const [devtools] = React.useState(\n    new TanstackQueryDevtools({\n      client: client,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n      styleNonce,\n    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(client)\n  }, [client, devtools])\n\n  React.useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  React.useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  React.useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,6BAA6B;AAuC/B,SAAS,mBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe;AACnC,QAAM,SAAS,MAAM,UAAU;AAC/B,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,gBAAgB,UAAU,eAAe,YAAY,WAAW,IACtE;AACF,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,sBAAsB;AAAA,MACxB;AAAA,MACA,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,MAAM;AAAA,EAC3B,GAAG,CAAC,QAAQ,QAAQ,CAAC;AAErB,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,oCAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}

package/build/modern/index.d.cts

@@ -1,4 +1,4 @@
-import { d as devtools } from './devtools-ZdlRR-0P.js';
+import { d as devtools } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/index.d.ts

@@ -1,4 +1,4 @@
-import { d as devtools } from './devtools-ZdlRR-0P.js';
+import { d as devtools } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/production.d.cts

@@ -1,4 +1,4 @@
-import { R as ReactQueryDevtools$1 } from './devtools-ZdlRR-0P.js';
+import { R as ReactQueryDevtools$1 } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/build/modern/production.d.ts

@@ -1,4 +1,4 @@
-import { R as ReactQueryDevtools$1 } from './devtools-ZdlRR-0P.js';
+import { R as ReactQueryDevtools$1 } from './devtools-0Hr18ibL.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.14.1",
+  "version": "5.14.2",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -62,11 +62,11 @@
   "devDependencies": {
     "@types/react": "^18.2.31",
     "react": "^18.2.0",
-    "@tanstack/react-query": "5.14.1"
+    "@tanstack/react-query": "5.14.2"
   },
   "peerDependencies": {
     "react": "^18.0.0",
-    "@tanstack/react-query": "^5.14.1"
+    "@tanstack/react-query": "^5.14.2"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/devtools.tsx

@@ -1,8 +1,7 @@
 'use client'
-import { useEffect, useRef, useState } from 'react'
+import * as React from 'react'
 import { onlineManager, useQueryClient } from '@tanstack/react-query'
 import { TanstackQueryDevtools } from '@tanstack/query-devtools'
-import React from 'react'
 import type {
   DevToolsErrorType,
   DevtoolsButtonPosition,
@@ -46,10 +45,10 @@ export function ReactQueryDevtools(
 ): React.ReactElement | null {
   const queryClient = useQueryClient()
   const client = props.client || queryClient
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = React.useRef<HTMLDivElement>(null)
   const { buttonPosition, position, initialIsOpen, errorTypes, styleNonce } =
     props
-  const [devtools] = useState(
+  const [devtools] = React.useState(
     new TanstackQueryDevtools({
       client: client,
       queryFlavor: 'React Query',
@@ -63,31 +62,31 @@ export function ReactQueryDevtools(
     }),
   )
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setClient(client)
   }, [client, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (buttonPosition) {
       devtools.setButtonPosition(buttonPosition)
     }
   }, [buttonPosition, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (position) {
       devtools.setPosition(position)
     }
   }, [position, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setInitialIsOpen(initialIsOpen || false)
   }, [initialIsOpen, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     devtools.setErrorTypes(errorTypes || [])
   }, [errorTypes, devtools])
 
-  useEffect(() => {
+  React.useEffect(() => {
     if (ref.current) {
       devtools.mount(ref.current)
     }