@tanstack/query-devtools 5.8.3 → 5.8.4

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

@@ -10511,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,
@@ -10521,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 → 4HZPHOEU.js}

@@ -9654,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,
@@ -9664,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/Devtools/{G2MVXYID.js → RC3HOX77.js}

@@ -9653,7 +9653,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 +9665,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 → W6R25HSA.jsx}

@@ -10510,7 +10510,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 +10522,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

@@ -13185,7 +13185,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 +13197,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/4HZPHOEU.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/3NHE6LPY.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/build/index.cjs

@@ -13183,7 +13183,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 +13195,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/RC3HOX77.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/W6R25HSA.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.4",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",

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'

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