@tanstack/query-devtools 5.20.1 → 5.21.0

package/build/index.d.cts

@@ -3,7 +3,7 @@ import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
 type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
-type DevtoolsButtonPosition = `${YPosition}-${XPosition}`;
+type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
 interface DevToolsErrorType {
     /**
      * The name of the error.

package/build/index.d.ts

@@ -3,7 +3,7 @@ import { Query, QueryClient, onlineManager } from '@tanstack/query-core';
 type XPosition = 'left' | 'right';
 type YPosition = 'top' | 'bottom';
 type DevtoolsPosition = XPosition | YPosition;
-type DevtoolsButtonPosition = `${YPosition}-${XPosition}`;
+type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative';
 interface DevToolsErrorType {
     /**
      * The name of the error.

package/build/index.js

@@ -1,4 +1,4 @@
-import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/6HEWUOJS.js';
+import { createSignal, render, lazy, setupStyleSheet, createComponent, mergeProps } from './chunk/XKKA3NOX.js';
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -56,6 +56,7 @@ var TanstackQueryDevtools = class {
       throw new Error("Devtools is already mounted");
     }
     const dispose = render(() => {
+      const _self$ = this;
       const [btnPosition] = this.#buttonPosition;
       const [pos] = this.#position;
       const [isOpen] = this.#initialIsOpen;
@@ -65,11 +66,10 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./Devtools/4MFZ6GJ2.js'));
+        Devtools = lazy(() => import('./Devtools/4IXB5NHK.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);
-      const _self$ = this;
       return createComponent(Devtools, mergeProps({
         get queryFlavor() {
           return _self$.#queryFlavor;

package/build/index.jsx

@@ -3,7 +3,7 @@ import {
   lazy,
   render,
   setupStyleSheet
-} from "./chunk/LF7D7ABG.jsx";
+} from "./chunk/AZNCIVVX.jsx";
 
 // src/index.tsx
 var TanstackQueryDevtools = class {
@@ -70,7 +70,7 @@ var TanstackQueryDevtools = class {
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import("./Devtools/SLJ7V32M.jsx"));
+        Devtools = lazy(() => import("./Devtools/2ACMJH2B.jsx"));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.20.1",
+  "version": "5.21.0",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -42,15 +42,15 @@
     "@solid-primitives/keyed": "^1.2.0",
     "@solid-primitives/resize-observer": "^2.0.22",
     "@solid-primitives/storage": "^1.3.11",
-    "@tanstack/match-sorter-utils": "^8.8.4",
+    "@tanstack/match-sorter-utils": "^8.11.8",
     "clsx": "^2.0.0",
     "goober": "^2.1.13",
-    "solid-js": "^1.8.7",
+    "solid-js": "^1.8.14",
     "solid-transition-group": "^0.2.3",
     "superjson": "^1.13.3",
     "tsup-preset-solid": "^2.2.0",
-    "vite-plugin-solid": "^2.8.0",
-    "@tanstack/query-core": "5.20.1"
+    "vite-plugin-solid": "^2.9.1",
+    "@tanstack/query-core": "5.20.5"
   },
   "scripts": {
     "clean": "rimraf ./build && rimraf ./coverage",

package/src/Context.ts

@@ -5,7 +5,7 @@ import type { Query, QueryClient, onlineManager } from '@tanstack/query-core'
 type XPosition = 'left' | 'right'
 type YPosition = 'top' | 'bottom'
 export type DevtoolsPosition = XPosition | YPosition
-export type DevtoolsButtonPosition = `${YPosition}-${XPosition}`
+export type DevtoolsButtonPosition = `${YPosition}-${XPosition}` | 'relative'
 
 export interface DevToolsErrorType {
   /**

package/src/Devtools.tsx

@@ -219,15 +219,19 @@ const Devtools: Component<DevtoolsPanelProps> = (props) => {
             transition:
               opacity 0.3s,
               transform 0.3s;
+            opacity: 1;
           }
 
           & .tsqd-button-transition-exit-to,
           & .tsqd-button-transition-enter {
-            transform: ${buttonPosition() === 'top-left'
-              ? `translateX(-72px);`
-              : buttonPosition() === 'top-right'
-                ? `translateX(72px);`
-                : `translateY(72px);`};
+            transform: ${buttonPosition() === 'relative'
+              ? `none;`
+              : buttonPosition() === 'top-left'
+                ? `translateX(-72px);`
+                : buttonPosition() === 'top-right'
+                  ? `translateX(72px);`
+                  : `translateY(72px);`};
+            opacity: 0;
           }
         `,
         'tsqd-transitions-container',
@@ -2263,6 +2267,9 @@ const stylesFactory = (theme: 'light' | 'dark') => {
       top: 12px;
       right: 12px;
     `,
+    'devtoolsBtn-position-relative': css`
+      position: relative;
+    `,
     'panel-position-top': css`
       top: 0;
       right: 0;