@tanstack/react-query-devtools 5.53.3 → 5.54.0

package/build/modern/ReactQueryDevtools.d.ts

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

package/build/{legacy/devtools.js → modern/ReactQueryDevtools.js}

@@ -1,6 +1,6 @@
 "use client";
 
-// src/devtools.tsx
+// src/ReactQueryDevtools.tsx
 import * as React from "react";
 import { onlineManager, useQueryClient } from "@tanstack/react-query";
 import { TanstackQueryDevtools } from "@tanstack/query-devtools";
@@ -62,4 +62,4 @@ function ReactQueryDevtools(props) {
 export {
   ReactQueryDevtools
 };
-//# sourceMappingURL=devtools.js.map
+//# sourceMappingURL=ReactQueryDevtools.js.map

package/build/modern/ReactQueryDevtools.js.map

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

package/build/modern/ReactQueryDevtoolsPanel-D9deyZtU.d.cts

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

package/build/modern/ReactQueryDevtoolsPanel-D9deyZtU.d.ts

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

package/build/modern/ReactQueryDevtoolsPanel.cjs

@@ -0,0 +1,91 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/ReactQueryDevtoolsPanel.tsx
+var ReactQueryDevtoolsPanel_exports = {};
+__export(ReactQueryDevtoolsPanel_exports, {
+  ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel
+});
+module.exports = __toCommonJS(ReactQueryDevtoolsPanel_exports);
+var React = __toESM(require("react"), 1);
+var import_react_query = require("@tanstack/react-query");
+var import_query_devtools = require("@tanstack/query-devtools");
+var import_jsx_runtime = require("react/jsx-runtime");
+function ReactQueryDevtoolsPanel(props) {
+  const queryClient = (0, import_react_query.useQueryClient)(props.client);
+  const ref = React.useRef(null);
+  const { errorTypes, styleNonce, shadowDOMTarget } = props;
+  const [devtools] = React.useState(
+    new import_query_devtools.TanstackQueryDevtoolsPanel({
+      client: queryClient,
+      queryFlavor: "React Query",
+      version: "5",
+      onlineManager: import_react_query.onlineManager,
+      buttonPosition: "bottom-left",
+      position: "bottom",
+      initialIsOpen: true,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose: props.onClose
+    })
+  );
+  React.useEffect(() => {
+    devtools.setClient(queryClient);
+  }, [queryClient, devtools]);
+  React.useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  }, [props.onClose, devtools]);
+  React.useEffect(() => {
+    devtools.setErrorTypes(errorTypes || []);
+  }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current);
+    }
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { height: "500px", ...props.style },
+      className: "tsqd-parent-container",
+      ref
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ReactQueryDevtoolsPanel
+});
+//# sourceMappingURL=ReactQueryDevtoolsPanel.cjs.map

package/build/modern/ReactQueryDevtoolsPanel.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevtoolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n  /**\n   * Use this so you can attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n\n  /**\n   * Custom styles for the devtools panel\n   * @default { height: '500px' }\n   * @example { height: '100%' }\n   * @example { height: '100%', width: '100%' }\n   */\n  style?: React.CSSProperties\n\n  /**\n   * Callback function that is called when the devtools panel is closed\n   */\n  onClose?: () => unknown\n}\n\nexport function ReactQueryDevtoolsPanel(\n  props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient(props.client)\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { errorTypes, styleNonce, shadowDOMTarget } = 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    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(queryClient)\n  }, [queryClient, devtools])\n\n  React.useEffect(() => {\n    devtools.setOnClose(props.onClose ?? (() => {}))\n  }, [props.onClose, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return (\n    <div\n      style={{ height: '500px', ...props.style }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAA2C;AAiFvC;AA7CG,SAAS,wBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,YAAY,YAAY,gBAAgB,IAAI;AACpD,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,iDAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/modern/ReactQueryDevtoolsPanel.d.cts

@@ -0,0 +1,4 @@
+import 'react';
+import '@tanstack/query-devtools';
+import '@tanstack/react-query';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D9deyZtU.cjs';

package/build/modern/ReactQueryDevtoolsPanel.d.ts

@@ -0,0 +1,4 @@
+import 'react';
+import '@tanstack/query-devtools';
+import '@tanstack/react-query';
+export { a as DevtoolsPanelOptions, R as ReactQueryDevtoolsPanel } from './ReactQueryDevtoolsPanel-D9deyZtU.js';

package/build/modern/ReactQueryDevtoolsPanel.js

@@ -0,0 +1,57 @@
+"use client";
+
+// src/ReactQueryDevtoolsPanel.tsx
+import * as React from "react";
+import { onlineManager, useQueryClient } from "@tanstack/react-query";
+import { TanstackQueryDevtoolsPanel } from "@tanstack/query-devtools";
+import { jsx } from "react/jsx-runtime";
+function ReactQueryDevtoolsPanel(props) {
+  const queryClient = useQueryClient(props.client);
+  const ref = React.useRef(null);
+  const { errorTypes, styleNonce, shadowDOMTarget } = props;
+  const [devtools] = React.useState(
+    new TanstackQueryDevtoolsPanel({
+      client: queryClient,
+      queryFlavor: "React Query",
+      version: "5",
+      onlineManager,
+      buttonPosition: "bottom-left",
+      position: "bottom",
+      initialIsOpen: true,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose: props.onClose
+    })
+  );
+  React.useEffect(() => {
+    devtools.setClient(queryClient);
+  }, [queryClient, devtools]);
+  React.useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {
+    }));
+  }, [props.onClose, devtools]);
+  React.useEffect(() => {
+    devtools.setErrorTypes(errorTypes || []);
+  }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current);
+    }
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: { height: "500px", ...props.style },
+      className: "tsqd-parent-container",
+      ref
+    }
+  );
+}
+export {
+  ReactQueryDevtoolsPanel
+};
+//# sourceMappingURL=ReactQueryDevtoolsPanel.js.map

package/build/modern/ReactQueryDevtoolsPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/ReactQueryDevtoolsPanel.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport { onlineManager, useQueryClient } from '@tanstack/react-query'\nimport { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'\nimport type { DevtoolsErrorType } from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsPanelOptions {\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevtoolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n  /**\n   * Use this so you can attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n\n  /**\n   * Custom styles for the devtools panel\n   * @default { height: '500px' }\n   * @example { height: '100%' }\n   * @example { height: '100%', width: '100%' }\n   */\n  style?: React.CSSProperties\n\n  /**\n   * Callback function that is called when the devtools panel is closed\n   */\n  onClose?: () => unknown\n}\n\nexport function ReactQueryDevtoolsPanel(\n  props: DevtoolsPanelOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient(props.client)\n  const ref = React.useRef<HTMLDivElement>(null)\n  const { errorTypes, styleNonce, shadowDOMTarget } = 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    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(queryClient)\n  }, [queryClient, devtools])\n\n  React.useEffect(() => {\n    devtools.setOnClose(props.onClose ?? (() => {}))\n  }, [props.onClose, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return (\n    <div\n      style={{ height: '500px', ...props.style }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;AACA,YAAY,WAAW;AACvB,SAAS,eAAe,sBAAsB;AAC9C,SAAS,kCAAkC;AAiFvC;AA7CG,SAAS,wBACd,OAC2B;AAC3B,QAAM,cAAc,eAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM,EAAE,YAAY,YAAY,gBAAgB,IAAI;AACpD,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,2BAA2B;AAAA,MAC7B,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA,gBAAgB;AAAA,MAChB,UAAU;AAAA,MACV,eAAe;AAAA,MACf;AAAA,MACA;AAAA,MACA;AAAA,MACA,SAAS,MAAM;AAAA,IACjB,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,aAAS,WAAW,MAAM,YAAY,MAAM;AAAA,IAAC,EAAE;AAAA,EACjD,GAAG,CAAC,MAAM,SAAS,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO,EAAE,QAAQ,SAAS,GAAG,MAAM,MAAM;AAAA,MACzC,WAAU;AAAA,MACV;AAAA;AAAA,EACD;AAEL;","names":[]}

package/build/modern/index.cjs

@@ -31,15 +31,21 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ReactQueryDevtools: () => ReactQueryDevtools2
+  ReactQueryDevtools: () => ReactQueryDevtools2,
+  ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
 });
 module.exports = __toCommonJS(src_exports);
-var devtools = __toESM(require("./devtools.cjs"), 1);
+var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
+var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
 var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
   return null;
-} : devtools.ReactQueryDevtools;
+} : Devtools.ReactQueryDevtools;
+var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : DevtoolsPanel.ReactQueryDevtoolsPanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ReactQueryDevtools
+  ReactQueryDevtools,
+  ReactQueryDevtoolsPanel
 });
 //# sourceMappingURL=index.cjs.map

package/build/modern/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA;AAAA;AAEA,eAA0B;AAEnB,IAAMA,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;","names":["ReactQueryDevtools"]}
+{"version":3,"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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}

package/build/modern/index.d.cts

@@ -1,8 +1,10 @@
-import { d as devtools } from './devtools-5wO_5H1h.cjs';
+import { D as Devtools } from './ReactQueryDevtools-Cn7cKi7o.cjs';
+import { D as DevtoolsPanel } from './ReactQueryDevtoolsPanel-D9deyZtU.cjs';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
 
-declare const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'];
+declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
+declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
 
-export { ReactQueryDevtools };
+export { ReactQueryDevtools, ReactQueryDevtoolsPanel };

package/build/modern/index.d.ts

@@ -1,8 +1,10 @@
-import { d as devtools } from './devtools-5wO_5H1h.js';
+import { D as Devtools } from './ReactQueryDevtools-Cn7cKi7o.js';
+import { D as DevtoolsPanel } from './ReactQueryDevtoolsPanel-D9deyZtU.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
 
-declare const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'];
+declare const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'];
+declare const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'];
 
-export { ReactQueryDevtools };
+export { ReactQueryDevtools, ReactQueryDevtoolsPanel };

package/build/modern/index.js

@@ -1,11 +1,16 @@
 "use client";
 
 // src/index.ts
-import * as devtools from "./devtools.js";
+import * as Devtools from "./ReactQueryDevtools.js";
+import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
 var ReactQueryDevtools2 = process.env.NODE_ENV !== "development" ? function() {
   return null;
-} : devtools.ReactQueryDevtools;
+} : Devtools.ReactQueryDevtools;
+var ReactQueryDevtoolsPanel2 = process.env.NODE_ENV !== "development" ? function() {
+  return null;
+} : DevtoolsPanel.ReactQueryDevtoolsPanel;
 export {
-  ReactQueryDevtools2 as ReactQueryDevtools
+  ReactQueryDevtools2 as ReactQueryDevtools,
+  ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
 };
 //# sourceMappingURL=index.js.map

package/build/modern/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/index.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =\n  process.env.NODE_ENV !== 'development'\n    ? function () {\n        return null\n      }\n    : devtools.ReactQueryDevtools\n"],"mappings":";;;AAEA,YAAY,cAAc;AAEnB,IAAMA,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;","names":["ReactQueryDevtools"]}
+{"version":3,"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"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACS;AAER,IAAMC,2BACX,QAAQ,IAAI,aAAa,gBACrB,WAAY;AACV,SAAO;AACT,IACc;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}

package/build/modern/production.cjs

@@ -31,13 +31,17 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/production.ts
 var production_exports = {};
 __export(production_exports, {
-  ReactQueryDevtools: () => ReactQueryDevtools2
+  ReactQueryDevtools: () => ReactQueryDevtools2,
+  ReactQueryDevtoolsPanel: () => ReactQueryDevtoolsPanel2
 });
 module.exports = __toCommonJS(production_exports);
-var devtools = __toESM(require("./devtools.cjs"), 1);
-var ReactQueryDevtools2 = devtools.ReactQueryDevtools;
+var Devtools = __toESM(require("./ReactQueryDevtools.cjs"), 1);
+var DevtoolsPanel = __toESM(require("./ReactQueryDevtoolsPanel.cjs"), 1);
+var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
+var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ReactQueryDevtools
+  ReactQueryDevtools,
+  ReactQueryDevtoolsPanel
 });
 //# sourceMappingURL=production.cjs.map

package/build/modern/production.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools = devtools.ReactQueryDevtools\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA;AAAA;AAEA,eAA0B;AAEnB,IAAMA,sBAA8B;","names":["ReactQueryDevtools"]}
+{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA,4BAAAA;AAAA,EAAA,+BAAAC;AAAA;AAAA;AAEA,eAA0B;AAC1B,oBAA+B;AAExB,IAAMD,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}

package/build/modern/production.d.cts

@@ -1,8 +1,10 @@
-import { R as ReactQueryDevtools$1 } from './devtools-5wO_5H1h.cjs';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-Cn7cKi7o.cjs';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D9deyZtU.cjs';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
 
 declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
+declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 
-export { ReactQueryDevtools };
+export { ReactQueryDevtools, ReactQueryDevtoolsPanel };

package/build/modern/production.d.ts

@@ -1,8 +1,10 @@
-import { R as ReactQueryDevtools$1 } from './devtools-5wO_5H1h.js';
+import { R as ReactQueryDevtools$1 } from './ReactQueryDevtools-Cn7cKi7o.js';
+import { R as ReactQueryDevtoolsPanel$1 } from './ReactQueryDevtoolsPanel-D9deyZtU.js';
 import 'react';
 import '@tanstack/query-devtools';
 import '@tanstack/react-query';
 
 declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
+declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 
-export { ReactQueryDevtools };
+export { ReactQueryDevtools, ReactQueryDevtoolsPanel };

package/build/modern/production.js

@@ -1,9 +1,12 @@
 "use client";
 
 // src/production.ts
-import * as devtools from "./devtools.js";
-var ReactQueryDevtools2 = devtools.ReactQueryDevtools;
+import * as Devtools from "./ReactQueryDevtools.js";
+import * as DevtoolsPanel from "./ReactQueryDevtoolsPanel.js";
+var ReactQueryDevtools2 = Devtools.ReactQueryDevtools;
+var ReactQueryDevtoolsPanel2 = DevtoolsPanel.ReactQueryDevtoolsPanel;
 export {
-  ReactQueryDevtools2 as ReactQueryDevtools
+  ReactQueryDevtools2 as ReactQueryDevtools,
+  ReactQueryDevtoolsPanel2 as ReactQueryDevtoolsPanel
 };
 //# sourceMappingURL=production.js.map

package/build/modern/production.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as devtools from './devtools'\n\nexport const ReactQueryDevtools = devtools.ReactQueryDevtools\n"],"mappings":";;;AAEA,YAAY,cAAc;AAEnB,IAAMA,sBAA8B;","names":["ReactQueryDevtools"]}
+{"version":3,"sources":["../../src/production.ts"],"sourcesContent":["'use client'\n\nimport * as Devtools from './ReactQueryDevtools'\nimport * as DevtoolsPanel from './ReactQueryDevtoolsPanel'\n\nexport const ReactQueryDevtools = Devtools.ReactQueryDevtools\nexport const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel\n"],"mappings":";;;AAEA,YAAY,cAAc;AAC1B,YAAY,mBAAmB;AAExB,IAAMA,sBAA8B;AACpC,IAAMC,2BAAwC;","names":["ReactQueryDevtools","ReactQueryDevtoolsPanel"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.53.3",
+  "version": "5.54.0",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "src"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.52.3"
+    "@tanstack/query-devtools": "5.54.0"
   },
   "devDependencies": {
     "@types/react": "npm:types-react@rc",

package/src/ReactQueryDevtoolsPanel.tsx

@@ -0,0 +1,91 @@
+'use client'
+import * as React from 'react'
+import { onlineManager, useQueryClient } from '@tanstack/react-query'
+import { TanstackQueryDevtoolsPanel } from '@tanstack/query-devtools'
+import type { DevtoolsErrorType } from '@tanstack/query-devtools'
+import type { QueryClient } from '@tanstack/react-query'
+
+export interface DevtoolsPanelOptions {
+  /**
+   * Custom instance of QueryClient
+   */
+  client?: QueryClient
+  /**
+   * Use this so you can define custom errors that can be shown in the devtools.
+   */
+  errorTypes?: Array<DevtoolsErrorType>
+  /**
+   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.
+   */
+  styleNonce?: string
+  /**
+   * Use this so you can attach the devtool's styles to specific element in the DOM.
+   */
+  shadowDOMTarget?: ShadowRoot
+
+  /**
+   * Custom styles for the devtools panel
+   * @default { height: '500px' }
+   * @example { height: '100%' }
+   * @example { height: '100%', width: '100%' }
+   */
+  style?: React.CSSProperties
+
+  /**
+   * Callback function that is called when the devtools panel is closed
+   */
+  onClose?: () => unknown
+}
+
+export function ReactQueryDevtoolsPanel(
+  props: DevtoolsPanelOptions,
+): React.ReactElement | null {
+  const queryClient = useQueryClient(props.client)
+  const ref = React.useRef<HTMLDivElement>(null)
+  const { errorTypes, styleNonce, shadowDOMTarget } = props
+  const [devtools] = React.useState(
+    new TanstackQueryDevtoolsPanel({
+      client: queryClient,
+      queryFlavor: 'React Query',
+      version: '5',
+      onlineManager,
+      buttonPosition: 'bottom-left',
+      position: 'bottom',
+      initialIsOpen: true,
+      errorTypes,
+      styleNonce,
+      shadowDOMTarget,
+      onClose: props.onClose,
+    }),
+  )
+
+  React.useEffect(() => {
+    devtools.setClient(queryClient)
+  }, [queryClient, devtools])
+
+  React.useEffect(() => {
+    devtools.setOnClose(props.onClose ?? (() => {}))
+  }, [props.onClose, devtools])
+
+  React.useEffect(() => {
+    devtools.setErrorTypes(errorTypes || [])
+  }, [errorTypes, devtools])
+
+  React.useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current)
+    }
+
+    return () => {
+      devtools.unmount()
+    }
+  }, [devtools])
+
+  return (
+    <div
+      style={{ height: '500px', ...props.style }}
+      className="tsqd-parent-container"
+      ref={ref}
+    ></div>
+  )
+}

package/src/index.ts

@@ -1,10 +1,18 @@
 'use client'
 
-import * as devtools from './devtools'
+import * as Devtools from './ReactQueryDevtools'
+import * as DevtoolsPanel from './ReactQueryDevtoolsPanel'
 
-export const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'] =
+export const ReactQueryDevtools: (typeof Devtools)['ReactQueryDevtools'] =
   process.env.NODE_ENV !== 'development'
     ? function () {
         return null
       }
-    : devtools.ReactQueryDevtools
+    : Devtools.ReactQueryDevtools
+
+export const ReactQueryDevtoolsPanel: (typeof DevtoolsPanel)['ReactQueryDevtoolsPanel'] =
+  process.env.NODE_ENV !== 'development'
+    ? function () {
+        return null
+      }
+    : DevtoolsPanel.ReactQueryDevtoolsPanel

package/src/production.ts

@@ -1,5 +1,7 @@
 'use client'
 
-import * as devtools from './devtools'
+import * as Devtools from './ReactQueryDevtools'
+import * as DevtoolsPanel from './ReactQueryDevtoolsPanel'
 
-export const ReactQueryDevtools = devtools.ReactQueryDevtools
+export const ReactQueryDevtools = Devtools.ReactQueryDevtools
+export const ReactQueryDevtoolsPanel = DevtoolsPanel.ReactQueryDevtoolsPanel

package/build/legacy/devtools.cjs.map

@@ -1 +0,0 @@
-{"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  DevtoolsButtonPosition,\n  DevtoolsErrorType,\n  DevtoolsPosition,\n} from '@tanstack/query-devtools'\nimport type { QueryClient } from '@tanstack/react-query'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-right'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: Array<DevtoolsErrorType>\n  /**\n   * Use this to pass a nonce to the style tag that is added to the document head. This is useful if you are using a Content Security Policy (CSP) nonce to allow inline styles.\n   */\n  styleNonce?: string\n  /**\n   * Use this so you can attach the devtool's styles to specific element in the DOM.\n   */\n  shadowDOMTarget?: ShadowRoot\n}\n\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  } = 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    }),\n  )\n\n  React.useEffect(() => {\n    devtools.setClient(queryClient)\n  }, [queryClient, devtools])\n\n  React.useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  React.useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  React.useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  React.useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  React.useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,YAAuB;AACvB,yBAA8C;AAC9C,4BAAsC;AAyG7B;AA9DF,SAAS,mBACd,OAC2B;AAC3B,QAAM,kBAAc,mCAAe,MAAM,MAAM;AAC/C,QAAM,MAAY,aAAuB,IAAI;AAC7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI;AACJ,QAAM,CAAC,QAAQ,IAAU;AAAA,IACvB,IAAI,4CAAsB;AAAA,MACxB,QAAQ;AAAA,MACR,aAAa;AAAA,MACb,SAAS;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAAA,EACH;AAEA,EAAM,gBAAU,MAAM;AACpB,aAAS,UAAU,WAAW;AAAA,EAChC,GAAG,CAAC,aAAa,QAAQ,CAAC;AAE1B,EAAM,gBAAU,MAAM;AACpB,QAAI,gBAAgB;AAClB,eAAS,kBAAkB,cAAc;AAAA,IAC3C;AAAA,EACF,GAAG,CAAC,gBAAgB,QAAQ,CAAC;AAE7B,EAAM,gBAAU,MAAM;AACpB,QAAI,UAAU;AACZ,eAAS,YAAY,QAAQ;AAAA,IAC/B;AAAA,EACF,GAAG,CAAC,UAAU,QAAQ,CAAC;AAEvB,EAAM,gBAAU,MAAM;AACpB,aAAS,iBAAiB,iBAAiB,KAAK;AAAA,EAClD,GAAG,CAAC,eAAe,QAAQ,CAAC;AAE5B,EAAM,gBAAU,MAAM;AACpB,aAAS,cAAc,cAAc,CAAC,CAAC;AAAA,EACzC,GAAG,CAAC,YAAY,QAAQ,CAAC;AAEzB,EAAM,gBAAU,MAAM;AACpB,QAAI,IAAI,SAAS;AACf,eAAS,MAAM,IAAI,OAAO;AAAA,IAC5B;AAEA,WAAO,MAAM;AACX,eAAS,QAAQ;AAAA,IACnB;AAAA,EACF,GAAG,CAAC,QAAQ,CAAC;AAEb,SAAO,4CAAC,SAAI,WAAU,yBAAwB,KAAU;AAC1D;","names":[]}

package/build/legacy/devtools.d.cts

@@ -1,4 +0,0 @@
-import 'react';
-import '@tanstack/query-devtools';
-import '@tanstack/react-query';
-export { D as DevtoolsOptions, R as ReactQueryDevtools } from './devtools-5wO_5H1h.cjs';

package/build/legacy/devtools.d.ts

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