@tanstack/query-devtools 5.13.3 → 5.13.5

package/build/Devtools/{VWYHBKXD.js → JDX7DFYK.js}

@@ -10236,6 +10236,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -11252,6 +11255,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{HI6IFUTD.jsx → KEJBG6PF.jsx}

@@ -10793,6 +10793,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -12058,6 +12062,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{XEIAQO4C.js → N66J3ZXT.js}

@@ -10235,6 +10235,9 @@ var ContentView = (props) => {
       const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
       _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
       _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -11251,6 +11254,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/Devtools/{EN5OW4QY.jsx → YGZHNM6M.jsx}

@@ -10794,6 +10794,10 @@ var ContentView = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+        panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
+            `,
         "tsqd-queries-container"
       )}
       ref={containerRef}
@@ -12059,6 +12063,22 @@ var stylesFactory2 = (theme) => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.cjs

@@ -13759,6 +13759,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -14775,6 +14778,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/dev.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/VWYHBKXD.js'));
+        Devtools = lazy(() => import('./Devtools/JDX7DFYK.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/dev.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/EN5OW4QY.jsx"));
+        Devtools = lazy(() => import("./Devtools/YGZHNM6M.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -13757,6 +13757,9 @@ var init_Devtools = __esm({
           const _v$6 = clsx(styles().queriesContainer, panelWidth() < secondBreakpoint && (selectedQueryHash() || selectedMutationId()) && u`
               height: 50%;
               max-height: 50%;
+            `, panelWidth() < secondBreakpoint && !(selectedQueryHash() || selectedMutationId()) && u`
+              height: 100%;
+              max-height: 100%;
             `, "tsqd-queries-container"), _v$7 = clsx(styles().row, "tsqd-header"), _v$8 = styles().logoAndToggleContainer, _v$9 = clsx(styles().logo, "tsqd-text-logo-container"), _v$10 = clsx(styles().tanstackLogo, "tsqd-text-logo-tanstack"), _v$11 = clsx(styles().queryFlavorLogo, "tsqd-text-logo-query-flavor"), _v$12 = clsx(styles().row, "tsqd-filters-actions-container"), _v$13 = clsx(styles().filtersContainer, "tsqd-filters-container"), _v$14 = clsx(styles().filterInput, "tsqd-query-filter-textfield-container"), _v$15 = clsx(styles().filterSelect, "tsqd-query-filter-sort-container"), _v$16 = `Sort order ${(selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1 ? "descending" : "ascending"}`, _v$17 = (selectedView() === "queries" ? sortOrder() : mutationSortOrder()) === -1, _v$18 = clsx(styles().actionsContainer, "tsqd-actions-container"), _v$19 = clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-clear-cache"), _v$20 = `Clear ${selectedView()} cache`, _v$21 = clsx(styles().actionsBtn, offline() && styles().actionsBtnOffline, "tsqd-actions-btn", "tsqd-action-mock-offline-behavior"), _v$22 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`, _v$23 = offline(), _v$24 = `${offline() ? "Unset offline mocking behavior" : "Mock offline behavior"}`;
           _v$6 !== _p$._v$6 && className(_el$8, _p$._v$6 = _v$6);
           _v$7 !== _p$._v$7 && className(_el$9, _p$._v$7 = _v$7);
@@ -14773,6 +14776,22 @@ var init_Devtools = __esm({
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t2(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t2(colors.gray[400], colors.darkGray[300])};
+      }
     `,
         "devtoolsBtn-position-bottom-right": u`
       bottom: 12px;

package/build/index.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/XEIAQO4C.js'));
+        Devtools = lazy(() => import('./Devtools/N66J3ZXT.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.jsx

@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/HI6IFUTD.jsx"));
+        Devtools = lazy(() => import("./Devtools/KEJBG6PF.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.13.3",
+  "version": "5.13.5",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -50,7 +50,7 @@
     "superjson": "^1.12.4",
     "tsup-preset-solid": "^2.1.0",
     "vite-plugin-solid": "^2.7.2",
-    "@tanstack/query-core": "5.12.1"
+    "@tanstack/query-core": "5.13.4"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -601,6 +601,12 @@ const ContentView: Component<DevtoolsPanelProps> = (props) => {
               height: 50%;
               max-height: 50%;
             `,
+          panelWidth() < secondBreakpoint &&
+            !(selectedQueryHash() || selectedMutationId()) &&
+            css`
+              height: 100%;
+              max-height: 100%;
+            `,
           'tsqd-queries-container',
         )}
         ref={containerRef}
@@ -2233,6 +2239,22 @@ const stylesFactory = (theme: 'light' | 'dark') => {
         box-sizing: border-box;
         text-transform: none;
       }
+
+      & *::-webkit-scrollbar {
+        width: 7px;
+      }
+
+      & *::-webkit-scrollbar-track {
+        background: transparent;
+      }
+
+      & *::-webkit-scrollbar-thumb {
+        background: ${t(colors.gray[300], colors.darkGray[200])};
+      }
+
+      & *::-webkit-scrollbar-thumb:hover {
+        background: ${t(colors.gray[400], colors.darkGray[300])};
+      }
     `,
     'devtoolsBtn-position-bottom-right': css`
       bottom: 12px;