@tanstack/query-devtools 5.8.3 → 5.8.8

package/build/Devtools/{G2DL2NKW.jsx → 3XM2XICE.jsx}

@@ -10364,6 +10364,7 @@ var stylesFactory = (theme) => {
     `,
     label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
     value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -10511,7 +10512,9 @@ var Devtools = (props) => {
       u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -10521,7 +10524,9 @@ var Devtools = (props) => {
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/Devtools/{RGHE4TS2.jsx → DKV2AFO3.jsx}

@@ -10363,6 +10363,7 @@ var stylesFactory = (theme) => {
     `,
     label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
     value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -10510,7 +10511,9 @@ var Devtools = (props) => {
       u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -10520,7 +10523,9 @@ var Devtools = (props) => {
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/Devtools/{VZTWBJH5.js → SZIKXSIQ.js}

@@ -9433,6 +9433,7 @@ var stylesFactory = (theme) => {
     `,
     label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
     value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -9654,7 +9655,9 @@ var Devtools = (props) => {
     createRenderEffect(() => className(_el$, clsx(u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -9664,7 +9667,9 @@ var Devtools = (props) => {
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/Devtools/{G2MVXYID.js → YNBGVEJ4.js}

@@ -9432,6 +9432,7 @@ var stylesFactory = (theme) => {
     `,
     label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
     value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -9653,7 +9654,9 @@ var Devtools = (props) => {
     createRenderEffect(() => className(_el$, clsx(u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -9663,7 +9666,9 @@ var Devtools = (props) => {
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/dev.cjs

@@ -12916,6 +12916,7 @@ var init_Explorer = __esm({
     `,
         label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
         value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -13185,7 +13186,9 @@ var init_Devtools = __esm({
         createRenderEffect(() => className(_el$, clsx(u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -13195,7 +13198,9 @@ var init_Devtools = __esm({
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/dev.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/VZTWBJH5.js'));
+        Devtools = lazy(() => import('./Devtools/SZIKXSIQ.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/G2DL2NKW.jsx"));
+        Devtools = lazy(() => import("./Devtools/3XM2XICE.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -12914,6 +12914,7 @@ var init_Explorer = __esm({
     `,
         label: u`
       color: ${t2(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
         value: u`
       color: ${t2(colors.purple[600], colors.purple[400])};
@@ -13183,7 +13184,9 @@ var init_Devtools = __esm({
         createRenderEffect(() => className(_el$, clsx(u`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -13193,7 +13196,9 @@ var init_Devtools = __esm({
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,

package/build/index.js

@@ -65,7 +65,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/G2MVXYID.js'));
+        Devtools = lazy(() => import('./Devtools/YNBGVEJ4.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/RGHE4TS2.jsx"));
+        Devtools = lazy(() => import("./Devtools/DKV2AFO3.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.8.3",
+  "version": "5.8.8",
   "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.8.3"
+    "@tanstack/query-core": "5.8.7"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Devtools.tsx

@@ -149,8 +149,8 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
     return props.localStore.open === 'true'
       ? true
       : props.localStore.open === 'false'
-      ? false
-      : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN
+        ? false
+        : useQueryDevtoolsContext().initialIsOpen || INITIAL_IS_OPEN
   })
 
   const position = createMemo(() => {
@@ -201,7 +201,9 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
         css`
           & .tsqd-panel-transition-exit-active,
           & .tsqd-panel-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-panel-transition-exit-to,
@@ -213,7 +215,9 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
 
           & .tsqd-button-transition-exit-active,
           & .tsqd-button-transition-enter-active {
-            transition: opacity 0.3s, transform 0.3s;
+            transition:
+              opacity 0.3s,
+              transform 0.3s;
           }
 
           & .tsqd-button-transition-exit-to,
@@ -221,8 +225,8 @@ export const Devtools: Component<DevtoolsPanelProps> = (props) => {
             transform: ${buttonPosition() === 'top-left'
               ? `translateX(-72px);`
               : buttonPosition() === 'top-right'
-              ? `translateX(72px);`
-              : `translateY(72px);`};
+                ? `translateX(72px);`
+                : `translateY(72px);`};
           }
         `,
         'tsqd-transitions-container',

package/src/Explorer.tsx

@@ -91,8 +91,8 @@ const CopyButton = (props: { value: unknown }) => {
         copyState() === 'NoCopy'
           ? 'Copy object to clipboard'
           : copyState() === 'SuccessCopy'
-          ? 'Object copied to clipboard'
-          : 'Error copying object to clipboard'
+            ? 'Object copied to clipboard'
+            : 'Error copying object to clipboard'
       }`}
       onClick={
         copyState() === 'NoCopy'
@@ -554,6 +554,7 @@ const stylesFactory = (theme: 'light' | 'dark') => {
     `,
     label: css`
       color: ${t(colors.gray[700], colors.gray[300])};
+      white-space: nowrap;
     `,
     value: css`
       color: ${t(colors.purple[600], colors.purple[400])};

package/src/utils.tsx

@@ -7,12 +7,12 @@ export function getQueryStatusLabel(query: Query) {
   return query.state.fetchStatus === 'fetching'
     ? 'fetching'
     : !query.getObserversCount()
-    ? 'inactive'
-    : query.state.fetchStatus === 'paused'
-    ? 'paused'
-    : query.isStale()
-    ? 'stale'
-    : 'fresh'
+      ? 'inactive'
+      : query.state.fetchStatus === 'paused'
+        ? 'paused'
+        : query.isStale()
+          ? 'stale'
+          : 'fresh'
 }
 
 export const queryStatusLabels = [
@@ -45,12 +45,12 @@ export function getQueryStatusColor({
   return queryState.fetchStatus === 'fetching'
     ? 'blue'
     : !observerCount
-    ? 'gray'
-    : queryState.fetchStatus === 'paused'
-    ? 'purple'
-    : isStale
-    ? 'yellow'
-    : 'green'
+      ? 'gray'
+      : queryState.fetchStatus === 'paused'
+        ? 'purple'
+        : isStale
+          ? 'yellow'
+          : 'green'
 }
 
 export function getMutationStatusColor({
@@ -63,24 +63,24 @@ export function getMutationStatusColor({
   return isPaused
     ? 'purple'
     : status === 'error'
-    ? 'red'
-    : status === 'pending'
-    ? 'yellow'
-    : status === 'success'
-    ? 'green'
-    : 'gray'
+      ? 'red'
+      : status === 'pending'
+        ? 'yellow'
+        : status === 'success'
+          ? 'green'
+          : 'gray'
 }
 
 export function getQueryStatusColorByLabel(label: IQueryStatusLabel) {
   return label === 'fresh'
     ? 'green'
     : label === 'stale'
-    ? 'yellow'
-    : label === 'paused'
-    ? 'purple'
-    : label === 'inactive'
-    ? 'gray'
-    : 'blue'
+      ? 'yellow'
+      : label === 'paused'
+        ? 'purple'
+        : label === 'inactive'
+          ? 'gray'
+          : 'blue'
 }
 
 /**
@@ -101,10 +101,10 @@ const getStatusRank = (q: Query) =>
   q.state.fetchStatus !== 'idle'
     ? 0
     : !q.getObserversCount()
-    ? 3
-    : q.isStale()
-    ? 2
-    : 1
+      ? 3
+      : q.isStale()
+        ? 2
+        : 1
 
 const queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)
 
@@ -131,10 +131,10 @@ const getMutationStatusRank = (m: Mutation) =>
   m.state.isPaused
     ? 0
     : m.state.status === 'error'
-    ? 2
-    : m.state.status === 'pending'
-    ? 1
-    : 3
+      ? 2
+      : m.state.status === 'pending'
+        ? 1
+        : 3
 
 const mutationDateSort: MutationSortFn = (a, b) =>
   a.state.submittedAt < b.state.submittedAt ? 1 : -1