@tanstack/react-query-devtools 5.105.3 → 5.106.1

package/build/legacy/ReactQueryDevtools.cjs

@@ -56,7 +56,6 @@ function ReactQueryDevtools(props) {
 		};
 	}, [devtools]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		dir: "ltr",
 		className: "tsqd-parent-container",
 		ref
 	});

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;;;;AAoEA,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,eAErB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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 className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoEA,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,eAErB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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,WAAU;EAA6B;CAAU,CAAA;AAC/D"}

package/build/legacy/ReactQueryDevtools.js

@@ -53,7 +53,6 @@ function ReactQueryDevtools(props) {
 		};
 	}, [devtools]);
 	return /* @__PURE__ */ jsx("div", {
-		dir: "ltr",
 		className: "tsqd-parent-container",
 		ref
 	});

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;AAoEA,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,eAErB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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 className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;AAoEA,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,eAErB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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,WAAU;EAA6B;CAAU,CAAA;AAC/D"}

package/build/legacy/{ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts → ReactQueryDevtoolsPanel-CNrIoVcr.d.cts}

@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot;
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', display: 'flex', flexDirection: 'column' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
  */
 declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
-//# sourceMappingURL=ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map
+//# sourceMappingURL=ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map

package/build/{modern/ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map → legacy/ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map}

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

package/build/legacy/{ReactQueryDevtoolsPanel-C2_VXpks.d.ts → ReactQueryDevtoolsPanel-ChIBbCUS.d.ts}

@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot;
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', display: 'flex', flexDirection: 'column' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
  */
 declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
-//# sourceMappingURL=ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map
+//# sourceMappingURL=ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map

package/build/{modern/ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map → legacy/ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map}

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

package/build/legacy/ReactQueryDevtoolsPanel.cjs

@@ -51,7 +51,9 @@ function ReactQueryDevtoolsPanel(props) {
 	}, [devtools]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
-			height: "500px",
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
 			...props.style
 		},
 		className: "tsqd-parent-container",

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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: '100%', display: 'flex', flexDirection: 'column' }\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...props.style,\n      }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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;GACL,QAAQ;GACR,SAAS;GACT,eAAe;GACf,GAAG,MAAM;EACX;EACA,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/legacy/ReactQueryDevtoolsPanel.d.cts

@@ -1,2 +1,2 @@
-import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };

package/build/legacy/ReactQueryDevtoolsPanel.d.ts

@@ -1,2 +1,2 @@
-import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };

package/build/legacy/ReactQueryDevtoolsPanel.js

@@ -48,7 +48,9 @@ function ReactQueryDevtoolsPanel(props) {
 	}, [devtools]);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			height: "500px",
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
 			...props.style
 		},
 		className: "tsqd-parent-container",

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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: '100%', display: 'flex', flexDirection: 'column' }\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...props.style,\n      }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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;GACL,QAAQ;GACR,SAAS;GACT,eAAe;GACf,GAAG,MAAM;EACX;EACA,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/legacy/index.d.cts

@@ -1,5 +1,5 @@
 import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
-import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
 /**

package/build/legacy/index.d.ts

@@ -1,5 +1,5 @@
 import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
-import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
 /**

package/build/legacy/production.d.cts

@@ -1,5 +1,5 @@
 import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
-import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
 export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 //# sourceMappingURL=production.d.cts.map

package/build/legacy/production.d.ts

@@ -1,5 +1,5 @@
 import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
-import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
 export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 //# sourceMappingURL=production.d.ts.map

package/build/modern/ReactQueryDevtools.cjs

@@ -56,7 +56,6 @@ function ReactQueryDevtools(props) {
 		};
 	}, [devtools]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		dir: "ltr",
 		className: "tsqd-parent-container",
 		ref
 	});

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;;;;AAoEA,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,eAErB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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 className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoEA,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,eAErB,IAAIC,yBAAAA,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT,eAAA,sBAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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,WAAU;EAA6B;CAAU,CAAA;AAC/D"}

package/build/modern/ReactQueryDevtools.js

@@ -53,7 +53,6 @@ function ReactQueryDevtools(props) {
 		};
 	}, [devtools]);
 	return /* @__PURE__ */ jsx("div", {
-		dir: "ltr",
 		className: "tsqd-parent-container",
 		ref
 	});

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;AAoEA,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,eAErB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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 className=\"tsqd-parent-container\" ref={ref}></div>\n}\n"],"mappings":";;;;;;;;;;;;AAoEA,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,eAErB,IAAI,sBAAsB;EACxB,QAAQ;EACR,aAAa;EACb,SAAS;EACT;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC,CACL;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,WAAU;EAA6B;CAAU,CAAA;AAC/D"}

package/build/modern/{ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts → ReactQueryDevtoolsPanel-CNrIoVcr.d.cts}

@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot;
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', display: 'flex', flexDirection: 'column' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
  */
 declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
-//# sourceMappingURL=ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map
+//# sourceMappingURL=ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map

package/build/{legacy/ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map → modern/ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map}

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

package/build/modern/{ReactQueryDevtoolsPanel-C2_VXpks.d.ts → ReactQueryDevtoolsPanel-ChIBbCUS.d.ts}

@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
   shadowDOMTarget?: ShadowRoot;
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', display: 'flex', flexDirection: 'column' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
  */
 declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
 export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
-//# sourceMappingURL=ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map
+//# sourceMappingURL=ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map

package/build/{legacy/ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map → modern/ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map}

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

package/build/modern/ReactQueryDevtoolsPanel.cjs

@@ -51,7 +51,9 @@ function ReactQueryDevtoolsPanel(props) {
 	}, [devtools]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		style: {
-			height: "500px",
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
 			...props.style
 		},
 		className: "tsqd-parent-container",

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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: '100%', display: 'flex', flexDirection: 'column' }\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...props.style,\n      }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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;GACL,QAAQ;GACR,SAAS;GACT,eAAe;GACf,GAAG,MAAM;EACX;EACA,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/modern/ReactQueryDevtoolsPanel.d.cts

@@ -1,2 +1,2 @@
-import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };

package/build/modern/ReactQueryDevtoolsPanel.d.ts

@@ -1,2 +1,2 @@
-import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };

package/build/modern/ReactQueryDevtoolsPanel.js

@@ -48,7 +48,9 @@ function ReactQueryDevtoolsPanel(props) {
 	}, [devtools]);
 	return /* @__PURE__ */ jsx("div", {
 		style: {
-			height: "500px",
+			height: "100%",
+			display: "flex",
+			flexDirection: "column",
 			...props.style
 		},
 		className: "tsqd-parent-container",

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\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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":";;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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: '100%', display: 'flex', flexDirection: 'column' }\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   * This overrides the theme selected in the devtools Settings menu. When omitted, the\n   * selected theme is used, or `'system'` if none is selected.\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    () =>\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={{\n        height: '100%',\n        display: 'flex',\n        flexDirection: 'column',\n        ...props.style,\n      }}\n      className=\"tsqd-parent-container\"\n      ref={ref}\n    ></div>\n  )\n}\n"],"mappings":";;;;;;;;;;;AA0DA,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,eAErB,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,CACL;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;GACL,QAAQ;GACR,SAAS;GACT,eAAe;GACf,GAAG,MAAM;EACX;EACA,WAAU;EACL;CACD,CAAA;AAEV"}

package/build/modern/index.d.cts

@@ -1,5 +1,5 @@
 import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
-import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
 /**

package/build/modern/index.d.ts

@@ -1,5 +1,5 @@
 import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
-import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
 export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
 /**

package/build/modern/production.d.cts

@@ -1,5 +1,5 @@
 import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
-import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
+import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
 export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
 export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 //# sourceMappingURL=production.d.cts.map

package/build/modern/production.d.ts

@@ -1,5 +1,5 @@
 import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
-import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
+import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
 export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
 export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
 //# sourceMappingURL=production.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/react-query-devtools",
-  "version": "5.105.3",
+  "version": "5.106.1",
   "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -59,20 +59,20 @@
     "!src/__tests__"
   ],
   "dependencies": {
-    "@tanstack/query-devtools": "5.105.3"
+    "@tanstack/query-devtools": "5.106.1"
   },
   "devDependencies": {
     "@eslint-react/eslint-plugin": "^5.28.8",
-    "@tanstack/react-query": "5.105.3",
+    "@tanstack/react-query": "5.106.1",
     "@testing-library/react": "^16.1.0",
     "@types/react": "^19.3.0",
-    "@vitejs/plugin-react": "^6.1.1",
+    "@vitejs/plugin-react": "^6.2.1",
     "eslint-plugin-react-hooks": "^7.1.1",
     "react": "^19.3.1",
     "typescript": "6.0.3"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.105.3",
+    "@tanstack/react-query": "^5.106.1",
     "@types/react": "^18 || ^19",
     "react": "^18 || ^19"
   },

package/src/ReactQueryDevtools.tsx

@@ -137,5 +137,5 @@ export function ReactQueryDevtools(
     }
   }, [devtools])
 
-  return <div dir="ltr" className="tsqd-parent-container" ref={ref}></div>
+  return <div className="tsqd-parent-container" ref={ref}></div>
 }

package/src/ReactQueryDevtoolsPanel.tsx

@@ -29,7 +29,7 @@ export interface DevtoolsPanelOptions {
 
   /**
    * Custom styles for the devtools panel
-   * @default { height: '500px' }
+   * @default { height: '100%', display: 'flex', flexDirection: 'column' }
    * @example { height: '100%' }
    * @example { height: '100%', width: '100%' }
    */
@@ -115,7 +115,12 @@ export function ReactQueryDevtoolsPanel(
 
   return (
     <div
-      style={{ height: '500px', ...props.style }}
+      style={{
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        ...props.style,
+      }}
       className="tsqd-parent-container"
       ref={ref}
     ></div>