@tanstack/react-query-devtools 5.105.2 → 5.106.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/build/legacy/{ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts → ReactQueryDevtoolsPanel-CNrIoVcr.d.cts} +2 -2
  2. package/build/{modern/ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map → legacy/ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map} +1 -1
  3. package/build/legacy/{ReactQueryDevtoolsPanel-C2_VXpks.d.ts → ReactQueryDevtoolsPanel-ChIBbCUS.d.ts} +2 -2
  4. package/build/{modern/ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map → legacy/ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map} +1 -1
  5. package/build/legacy/ReactQueryDevtoolsPanel.cjs +3 -1
  6. package/build/legacy/ReactQueryDevtoolsPanel.cjs.map +1 -1
  7. package/build/legacy/ReactQueryDevtoolsPanel.d.cts +1 -1
  8. package/build/legacy/ReactQueryDevtoolsPanel.d.ts +1 -1
  9. package/build/legacy/ReactQueryDevtoolsPanel.js +3 -1
  10. package/build/legacy/ReactQueryDevtoolsPanel.js.map +1 -1
  11. package/build/legacy/index.d.cts +1 -1
  12. package/build/legacy/index.d.ts +1 -1
  13. package/build/legacy/production.d.cts +1 -1
  14. package/build/legacy/production.d.ts +1 -1
  15. package/build/modern/{ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts → ReactQueryDevtoolsPanel-CNrIoVcr.d.cts} +2 -2
  16. package/build/{legacy/ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map → modern/ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map} +1 -1
  17. package/build/modern/{ReactQueryDevtoolsPanel-C2_VXpks.d.ts → ReactQueryDevtoolsPanel-ChIBbCUS.d.ts} +2 -2
  18. package/build/{legacy/ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map → modern/ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map} +1 -1
  19. package/build/modern/ReactQueryDevtoolsPanel.cjs +3 -1
  20. package/build/modern/ReactQueryDevtoolsPanel.cjs.map +1 -1
  21. package/build/modern/ReactQueryDevtoolsPanel.d.cts +1 -1
  22. package/build/modern/ReactQueryDevtoolsPanel.d.ts +1 -1
  23. package/build/modern/ReactQueryDevtoolsPanel.js +3 -1
  24. package/build/modern/ReactQueryDevtoolsPanel.js.map +1 -1
  25. package/build/modern/index.d.cts +1 -1
  26. package/build/modern/index.d.ts +1 -1
  27. package/build/modern/production.d.cts +1 -1
  28. package/build/modern/production.d.ts +1 -1
  29. package/package.json +5 -5
  30. package/src/ReactQueryDevtoolsPanel.tsx +7 -2
@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
27
27
  shadowDOMTarget?: ShadowRoot;
28
28
  /**
29
29
  * Custom styles for the devtools panel
30
- * @default { height: '500px' }
30
+ * @default { height: '100%', display: 'flex', flexDirection: 'column' }
31
31
  * @example { height: '100%' }
32
32
  * @example { height: '100%', width: '100%' }
33
33
  */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
54
54
  */
55
55
  declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
56
56
  export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
57
- //# sourceMappingURL=ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map
57
+ //# sourceMappingURL=ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map
@@ -1 +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"}
1
+ {"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"}
@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
27
27
  shadowDOMTarget?: ShadowRoot;
28
28
  /**
29
29
  * Custom styles for the devtools panel
30
- * @default { height: '500px' }
30
+ * @default { height: '100%', display: 'flex', flexDirection: 'column' }
31
31
  * @example { height: '100%' }
32
32
  * @example { height: '100%', width: '100%' }
33
33
  */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
54
54
  */
55
55
  declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
56
56
  export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
57
- //# sourceMappingURL=ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map
57
+ //# sourceMappingURL=ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -51,7 +51,9 @@ function ReactQueryDevtoolsPanel(props) {
51
51
  }, [devtools]);
52
52
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
53
53
  style: {
54
- height: "500px",
54
+ height: "100%",
55
+ display: "flex",
56
+ flexDirection: "column",
55
57
  ...props.style
56
58
  },
57
59
  className: "tsqd-parent-container",
@@ -1 +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"}
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: '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"}
@@ -1,2 +1,2 @@
1
- import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
1
+ import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
2
2
  export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
@@ -1,2 +1,2 @@
1
- import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
1
+ import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
2
2
  export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
@@ -48,7 +48,9 @@ function ReactQueryDevtoolsPanel(props) {
48
48
  }, [devtools]);
49
49
  return /* @__PURE__ */ jsx("div", {
50
50
  style: {
51
- height: "500px",
51
+ height: "100%",
52
+ display: "flex",
53
+ flexDirection: "column",
52
54
  ...props.style
53
55
  },
54
56
  className: "tsqd-parent-container",
@@ -1 +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"}
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: '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"}
@@ -1,5 +1,5 @@
1
1
  import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
2
- import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
2
+ import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
3
3
  export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
4
4
  export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
2
- import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
2
+ import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
3
3
  export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
4
4
  export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
2
- import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
2
+ import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
3
3
  export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
4
4
  export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
5
5
  //# sourceMappingURL=production.d.cts.map
@@ -1,5 +1,5 @@
1
1
  import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
2
- import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
2
+ import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
3
3
  export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
4
4
  export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
5
5
  //# sourceMappingURL=production.d.ts.map
@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
27
27
  shadowDOMTarget?: ShadowRoot;
28
28
  /**
29
29
  * Custom styles for the devtools panel
30
- * @default { height: '500px' }
30
+ * @default { height: '100%', display: 'flex', flexDirection: 'column' }
31
31
  * @example { height: '100%' }
32
32
  * @example { height: '100%', width: '100%' }
33
33
  */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
54
54
  */
55
55
  declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
56
56
  export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
57
- //# sourceMappingURL=ReactQueryDevtoolsPanel-DKrB7Z0x.d.cts.map
57
+ //# sourceMappingURL=ReactQueryDevtoolsPanel-CNrIoVcr.d.cts.map
@@ -1 +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"}
1
+ {"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"}
@@ -27,7 +27,7 @@ interface DevtoolsPanelOptions {
27
27
  shadowDOMTarget?: ShadowRoot;
28
28
  /**
29
29
  * Custom styles for the devtools panel
30
- * @default { height: '500px' }
30
+ * @default { height: '100%', display: 'flex', flexDirection: 'column' }
31
31
  * @example { height: '100%' }
32
32
  * @example { height: '100%', width: '100%' }
33
33
  */
@@ -54,4 +54,4 @@ interface DevtoolsPanelOptions {
54
54
  */
55
55
  declare function ReactQueryDevtoolsPanel(props: DevtoolsPanelOptions): React.ReactElement | null;
56
56
  export { ReactQueryDevtoolsPanel as n, ReactQueryDevtoolsPanel_d_exports as r, DevtoolsPanelOptions as t };
57
- //# sourceMappingURL=ReactQueryDevtoolsPanel-C2_VXpks.d.ts.map
57
+ //# sourceMappingURL=ReactQueryDevtoolsPanel-ChIBbCUS.d.ts.map
@@ -1 +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"}
1
+ {"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"}
@@ -51,7 +51,9 @@ function ReactQueryDevtoolsPanel(props) {
51
51
  }, [devtools]);
52
52
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
53
53
  style: {
54
- height: "500px",
54
+ height: "100%",
55
+ display: "flex",
56
+ flexDirection: "column",
55
57
  ...props.style
56
58
  },
57
59
  className: "tsqd-parent-container",
@@ -1 +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"}
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: '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"}
@@ -1,2 +1,2 @@
1
- import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
1
+ import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
2
2
  export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
@@ -1,2 +1,2 @@
1
- import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
1
+ import { n as ReactQueryDevtoolsPanel, t as DevtoolsPanelOptions } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
2
2
  export { DevtoolsPanelOptions, ReactQueryDevtoolsPanel };
@@ -48,7 +48,9 @@ function ReactQueryDevtoolsPanel(props) {
48
48
  }, [devtools]);
49
49
  return /* @__PURE__ */ jsx("div", {
50
50
  style: {
51
- height: "500px",
51
+ height: "100%",
52
+ display: "flex",
53
+ flexDirection: "column",
52
54
  ...props.style
53
55
  },
54
56
  className: "tsqd-parent-container",
@@ -1 +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"}
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: '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"}
@@ -1,5 +1,5 @@
1
1
  import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
2
- import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
2
+ import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
3
3
  export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
4
4
  export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
2
- import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
2
+ import { r as ReactQueryDevtoolsPanel_d_exports, t as DevtoolsPanelOptions$1 } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
3
3
  export declare const ReactQueryDevtools: (typeof ReactQueryDevtools_d_exports)['ReactQueryDevtools'];
4
4
  export declare const ReactQueryDevtoolsPanel: (typeof ReactQueryDevtoolsPanel_d_exports)['ReactQueryDevtoolsPanel'];
5
5
  /**
@@ -1,5 +1,5 @@
1
1
  import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-BhjVbJyl.cjs";
2
- import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-DKrB7Z0x.cjs";
2
+ import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-CNrIoVcr.cjs";
3
3
  export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
4
4
  export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
5
5
  //# sourceMappingURL=production.d.cts.map
@@ -1,5 +1,5 @@
1
1
  import { n as ReactQueryDevtools$1, r as ReactQueryDevtools_d_exports } from "./ReactQueryDevtools-CaecJz_D.js";
2
- import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-C2_VXpks.js";
2
+ import { n as ReactQueryDevtoolsPanel$1, r as ReactQueryDevtoolsPanel_d_exports } from "./ReactQueryDevtoolsPanel-ChIBbCUS.js";
3
3
  export declare const ReactQueryDevtools: typeof ReactQueryDevtools$1;
4
4
  export declare const ReactQueryDevtoolsPanel: typeof ReactQueryDevtoolsPanel$1;
5
5
  //# sourceMappingURL=production.d.ts.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/react-query-devtools",
3
- "version": "5.105.2",
3
+ "version": "5.106.0",
4
4
  "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -59,20 +59,20 @@
59
59
  "!src/__tests__"
60
60
  ],
61
61
  "dependencies": {
62
- "@tanstack/query-devtools": "5.105.2"
62
+ "@tanstack/query-devtools": "5.106.0"
63
63
  },
64
64
  "devDependencies": {
65
65
  "@eslint-react/eslint-plugin": "^5.28.8",
66
- "@tanstack/react-query": "5.105.2",
66
+ "@tanstack/react-query": "5.106.0",
67
67
  "@testing-library/react": "^16.1.0",
68
68
  "@types/react": "^19.3.0",
69
- "@vitejs/plugin-react": "^6.1.1",
69
+ "@vitejs/plugin-react": "^6.2.1",
70
70
  "eslint-plugin-react-hooks": "^7.1.1",
71
71
  "react": "^19.3.1",
72
72
  "typescript": "6.0.3"
73
73
  },
74
74
  "peerDependencies": {
75
- "@tanstack/react-query": "^5.105.2",
75
+ "@tanstack/react-query": "^5.106.0",
76
76
  "@types/react": "^18 || ^19",
77
77
  "react": "^18 || ^19"
78
78
  },
@@ -29,7 +29,7 @@ export interface DevtoolsPanelOptions {
29
29
 
30
30
  /**
31
31
  * Custom styles for the devtools panel
32
- * @default { height: '500px' }
32
+ * @default { height: '100%', display: 'flex', flexDirection: 'column' }
33
33
  * @example { height: '100%' }
34
34
  * @example { height: '100%', width: '100%' }
35
35
  */
@@ -115,7 +115,12 @@ export function ReactQueryDevtoolsPanel(
115
115
 
116
116
  return (
117
117
  <div
118
- style={{ height: '500px', ...props.style }}
118
+ style={{
119
+ height: '100%',
120
+ display: 'flex',
121
+ flexDirection: 'column',
122
+ ...props.style,
123
+ }}
119
124
  className="tsqd-parent-container"
120
125
  ref={ref}
121
126
  ></div>