@tanstack/query-devtools 5.90.1 → 5.91.1

package/build/index.js

@@ -15,6 +15,7 @@ var TanstackQueryDevtools = class {
   #errorTypes;
   #hideDisabledQueries;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -28,7 +29,8 @@ var TanstackQueryDevtools = class {
       errorTypes,
       styleNonce,
       shadowDOMTarget,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -41,6 +43,7 @@ var TanstackQueryDevtools = class {
     this.#initialIsOpen = createSignal(initialIsOpen);
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -57,6 +60,9 @@ var TanstackQueryDevtools = class {
   setClient(client) {
     this.#client[1](client);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -69,11 +75,12 @@ var TanstackQueryDevtools = class {
       const [errors] = this.#errorTypes;
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsComponent/NCMVHL6D.js'));
+        Devtools = lazy(() => import('./DevtoolsComponent/Q7LWSL4U.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -108,6 +115,9 @@ var TanstackQueryDevtools = class {
         },
         get hideDisabledQueries() {
           return hideDisabledQueries();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);
@@ -139,6 +149,7 @@ var TanstackQueryDevtoolsPanel = class {
   #hideDisabledQueries;
   #onClose;
   #Component;
+  #theme;
   #dispose;
   constructor(config) {
     const {
@@ -153,7 +164,8 @@ var TanstackQueryDevtoolsPanel = class {
       styleNonce,
       shadowDOMTarget,
       onClose,
-      hideDisabledQueries
+      hideDisabledQueries,
+      theme
     } = config;
     this.#client = createSignal(client);
     this.#queryFlavor = queryFlavor;
@@ -167,6 +179,7 @@ var TanstackQueryDevtoolsPanel = class {
     this.#errorTypes = createSignal(errorTypes);
     this.#hideDisabledQueries = createSignal(hideDisabledQueries);
     this.#onClose = createSignal(onClose);
+    this.#theme = createSignal(theme);
   }
   setButtonPosition(position) {
     this.#buttonPosition[1](position);
@@ -186,6 +199,9 @@ var TanstackQueryDevtoolsPanel = class {
   setOnClose(onClose) {
     this.#onClose[1](() => onClose);
   }
+  setTheme(theme) {
+    this.#theme[1](theme);
+  }
   mount(el) {
     if (this.#isMounted) {
       throw new Error("Devtools is already mounted");
@@ -199,11 +215,12 @@ var TanstackQueryDevtoolsPanel = class {
       const [hideDisabledQueries] = this.#hideDisabledQueries;
       const [queryClient] = this.#client;
       const [onClose] = this.#onClose;
+      const [theme] = this.#theme;
       let Devtools;
       if (this.#Component) {
         Devtools = this.#Component;
       } else {
-        Devtools = lazy(() => import('./DevtoolsPanelComponent/2AITGKQY.js'));
+        Devtools = lazy(() => import('./DevtoolsPanelComponent/VLTTJS3N.js'));
         this.#Component = Devtools;
       }
       setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -241,6 +258,9 @@ var TanstackQueryDevtoolsPanel = class {
         },
         get onClose() {
           return onClose();
+        },
+        get theme() {
+          return theme();
         }
       }));
     }, el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tanstack/query-devtools",
-  "version": "5.90.1",
+  "version": "5.91.1",
   "description": "Developer tools to interact with and visualize the TanStack Query cache",
   "author": "tannerlinsley",
   "license": "MIT",
@@ -57,7 +57,7 @@
     "superjson": "^2.2.2",
     "tsup-preset-solid": "^2.2.0",
     "vite-plugin-solid": "^2.11.6",
-    "@tanstack/query-core": "5.90.1"
+    "@tanstack/query-core": "5.90.10"
   },
   "scripts": {
     "clean": "premove ./build ./coverage ./dist-ts",

package/src/Devtools.tsx

@@ -1000,7 +1000,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                   'tsqd-action-open-pip',
                 )}
                 aria-label="Open in picture-in-picture mode"
-                title={`Open in picture-in-picture mode`}
+                title="Open in picture-in-picture mode"
               >
                 <PiPIcon />
               </button>
@@ -1013,6 +1013,8 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                   'tsqd-actions-btn',
                   'tsqd-action-settings',
                 )}
+                aria-label="Open settings menu"
+                title="Open settings menu"
               >
                 <Settings />
               </DropdownMenu.Trigger>
@@ -1061,62 +1063,58 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                             'tsqd-settings-submenu',
                           )}
                         >
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('top')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-top',
-                            )}
-                          >
-                            <span>Top</span>
-                            <ArrowUp />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('bottom')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-bottom',
-                            )}
-                          >
-                            <span>Bottom</span>
-                            <ArrowDown />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('left')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-left',
-                            )}
-                          >
-                            <span>Left</span>
-                            <ArrowLeft />
-                          </DropdownMenu.Item>
-                          <DropdownMenu.Item
-                            onSelect={() => {
-                              setDevtoolsPosition('right')
-                            }}
-                            as="button"
-                            class={cx(
-                              styles().settingsSubButton,
-                              'tsqd-settings-menu-position-btn',
-                              'tsqd-settings-menu-position-btn-right',
-                            )}
+                          <DropdownMenu.RadioGroup
+                            aria-label="Position settings"
+                            value={props.localStore.position}
+                            onChange={(value) =>
+                              setDevtoolsPosition(value as DevtoolsPosition)
+                            }
                           >
-                            <span>Right</span>
-                            <ArrowRight />
-                          </DropdownMenu.Item>
+                            <DropdownMenu.RadioItem
+                              value="top"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-top',
+                              )}
+                            >
+                              <span>Top</span>
+                              <ArrowUp />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="bottom"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-bottom',
+                              )}
+                            >
+                              <span>Bottom</span>
+                              <ArrowDown />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="left"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-left',
+                              )}
+                            >
+                              <span>Left</span>
+                              <ArrowLeft />
+                            </DropdownMenu.RadioItem>
+                            <DropdownMenu.RadioItem
+                              value="right"
+                              class={cx(
+                                styles().settingsSubButton,
+                                'tsqd-settings-menu-position-btn',
+                                'tsqd-settings-menu-position-btn-right',
+                              )}
+                            >
+                              <span>Right</span>
+                              <ArrowRight />
+                            </DropdownMenu.RadioItem>
+                          </DropdownMenu.RadioGroup>
                         </DropdownMenu.SubContent>
                       </DropdownMenu.Portal>
                     </DropdownMenu.Sub>
@@ -1146,54 +1144,47 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           'tsqd-settings-submenu',
                         )}
                       >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'light')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'light' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-top',
-                          )}
-                        >
-                          <span>Light</span>
-                          <Sun />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'dark')
+                        <DropdownMenu.RadioGroup
+                          value={props.localStore.theme_preference}
+                          onChange={(value) => {
+                            props.setLocalStore('theme_preference', value)
                           }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'dark' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-bottom',
-                          )}
+                          aria-label="Theme preference"
                         >
-                          <span>Dark</span>
-                          <Moon />
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('theme_preference', 'system')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.theme_preference === 'system' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-left',
-                          )}
-                        >
-                          <span>System</span>
-                          <Monitor />
-                        </DropdownMenu.Item>
+                          <DropdownMenu.RadioItem
+                            value="light"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-top',
+                            )}
+                          >
+                            <span>Light</span>
+                            <Sun />
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="dark"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-bottom',
+                            )}
+                          >
+                            <span>Dark</span>
+                            <Moon />
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="system"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-left',
+                            )}
+                          >
+                            <span>System</span>
+                            <Monitor />
+                          </DropdownMenu.RadioItem>
+                        </DropdownMenu.RadioGroup>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
@@ -1221,51 +1212,49 @@ export const ContentView: Component<ContentViewProps> = (props) => {
                           styles().settingsMenu,
                           'tsqd-settings-submenu',
                         )}
+                        aria-label="Hide disabled queries setting"
                       >
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('hideDisabledQueries', 'false')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.hideDisabledQueries !== 'true' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-show',
-                          )}
+                        <DropdownMenu.RadioGroup
+                          value={props.localStore.hideDisabledQueries}
+                          onChange={(value) =>
+                            props.setLocalStore('hideDisabledQueries', value)
+                          }
                         >
-                          <span>Show</span>
-                          <Show
-                            when={
-                              props.localStore.hideDisabledQueries !== 'true'
-                            }
+                          <DropdownMenu.RadioItem
+                            value="false"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-show',
+                            )}
                           >
-                            <CheckCircle />
-                          </Show>
-                        </DropdownMenu.Item>
-                        <DropdownMenu.Item
-                          onSelect={() => {
-                            props.setLocalStore('hideDisabledQueries', 'true')
-                          }}
-                          as="button"
-                          class={cx(
-                            styles().settingsSubButton,
-                            props.localStore.hideDisabledQueries === 'true' &&
-                              styles().themeSelectedButton,
-                            'tsqd-settings-menu-position-btn',
-                            'tsqd-settings-menu-position-btn-hide',
-                          )}
-                        >
-                          <span>Hide</span>
-                          <Show
-                            when={
-                              props.localStore.hideDisabledQueries === 'true'
-                            }
+                            <span>Show</span>
+                            <Show
+                              when={
+                                props.localStore.hideDisabledQueries !== 'true'
+                              }
+                            >
+                              <CheckCircle />
+                            </Show>
+                          </DropdownMenu.RadioItem>
+                          <DropdownMenu.RadioItem
+                            value="true"
+                            class={cx(
+                              styles().settingsSubButton,
+                              'tsqd-settings-menu-position-btn',
+                              'tsqd-settings-menu-position-btn-hide',
+                            )}
                           >
-                            <CheckCircle />
-                          </Show>
-                        </DropdownMenu.Item>
+                            <span>Hide</span>
+                            <Show
+                              when={
+                                props.localStore.hideDisabledQueries === 'true'
+                              }
+                            >
+                              <CheckCircle />
+                            </Show>
+                          </DropdownMenu.RadioItem>
+                        </DropdownMenu.RadioGroup>
                       </DropdownMenu.SubContent>
                     </DropdownMenu.Portal>
                   </DropdownMenu.Sub>
@@ -1961,6 +1950,9 @@ const QueryDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -2372,6 +2364,9 @@ const MutationDetails = () => {
             styles().detailsBody,
             'tsqd-query-details-summary-container',
           )}
+          role="status"
+          aria-live="polite"
+          aria-atomic="true"
         >
           <div class="tsqd-query-details-summary">
             <pre>
@@ -3521,15 +3516,15 @@ const stylesFactory = (
         outline-offset: 2px;
         outline: 2px solid ${colors.blue[800]};
       }
-    `,
-    themeSelectedButton: css`
-      background-color: ${t(colors.purple[100], colors.purple[900])};
-      color: ${t(colors.purple[700], colors.purple[300])};
-      & svg {
-        color: ${t(colors.purple[700], colors.purple[300])};
-      }
-      &:hover {
+      &[data-checked] {
         background-color: ${t(colors.purple[100], colors.purple[900])};
+        color: ${t(colors.purple[700], colors.purple[300])};
+        & svg {
+          color: ${t(colors.purple[700], colors.purple[300])};
+        }
+        &:hover {
+          background-color: ${t(colors.purple[100], colors.purple[900])};
+        }
       }
     `,
     viewToggle: css`

package/src/DevtoolsComponent.tsx

@@ -4,6 +4,7 @@ import { Devtools } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
 import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import type { Theme } from './contexts'
 import type { DevtoolsComponentType } from './Devtools'
 
 const DevtoolsComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsComponent: DevtoolsComponentType = (props) => {
   const colorScheme = getPreferredColorScheme()
 
   const theme = createMemo(() => {
-    const preference = (localStore.theme_preference || THEME_PREFERENCE) as
-      | 'system'
-      | 'dark'
-      | 'light'
+    const preference = (props.theme ||
+      localStore.theme_preference ||
+      THEME_PREFERENCE) as Theme
     if (preference !== 'system') return preference
     return colorScheme()
   })

package/src/DevtoolsPanelComponent.tsx

@@ -4,6 +4,7 @@ import { ContentView, ParentPanel } from './Devtools'
 import { getPreferredColorScheme } from './utils'
 import { THEME_PREFERENCE } from './constants'
 import { PiPProvider, QueryDevtoolsContext, ThemeContext } from './contexts'
+import type { Theme } from './contexts'
 import type { DevtoolsComponentType } from './Devtools'
 
 const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
@@ -14,10 +15,9 @@ const DevtoolsPanelComponent: DevtoolsComponentType = (props) => {
   const colorScheme = getPreferredColorScheme()
 
   const theme = createMemo(() => {
-    const preference = (localStore.theme_preference || THEME_PREFERENCE) as
-      | 'system'
-      | 'dark'
-      | 'light'
+    const preference = (props.theme ||
+      localStore.theme_preference ||
+      THEME_PREFERENCE) as Theme
     if (preference !== 'system') return preference
     return colorScheme()
   })

package/src/Explorer.tsx

@@ -1,6 +1,14 @@
 import { serialize, stringify } from 'superjson'
 import { clsx as cx } from 'clsx'
-import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
+import {
+  Index,
+  Match,
+  Show,
+  Switch,
+  createMemo,
+  createSignal,
+  createUniqueId,
+} from 'solid-js'
 import { Key } from '@solid-primitives/keyed'
 import * as goober from 'goober'
 import { tokens } from './theme'
@@ -325,6 +333,8 @@ export default function Explorer(props: ExplorerProps) {
 
   const currentDataPath = props.dataPath ?? []
 
+  const inputId = createUniqueId()
+
   return (
     <div class={styles().entry}>
       <Show when={subEntryPages().length}>
@@ -332,6 +342,7 @@ export default function Explorer(props: ExplorerProps) {
           <button
             class={styles().expanderButton}
             onClick={() => toggleExpanded()}
+            aria-expanded={expanded() ? 'true' : 'false'}
           >
             <Expander expanded={expanded()} /> <span>{props.label}</span>{' '}
             <span class={styles().info}>
@@ -446,7 +457,9 @@ export default function Explorer(props: ExplorerProps) {
       </Show>
       <Show when={subEntryPages().length === 0}>
         <div class={styles().row}>
-          <span class={styles().label}>{props.label}:</span>
+          <label for={inputId} class={styles().label}>
+            {props.label}:
+          </label>
           <Show
             when={
               props.editable &&
@@ -467,6 +480,7 @@ export default function Explorer(props: ExplorerProps) {
               }
             >
               <input
+                id={inputId}
                 type={type() === 'number' ? 'number' : 'text'}
                 class={cx(styles().value, styles().editableInput)}
                 value={props.value as string | number}

package/src/TanstackQueryDevtools.tsx

@@ -11,6 +11,7 @@ import type {
   DevtoolsErrorType,
   DevtoolsPosition,
   QueryDevtoolsProps,
+  Theme,
 } from './contexts'
 import type { Signal } from 'solid-js'
 
@@ -33,6 +34,7 @@ class TanstackQueryDevtools {
   #errorTypes: Signal<Array<DevtoolsErrorType> | undefined>
   #hideDisabledQueries: Signal<boolean | undefined>
   #Component: DevtoolsComponentType | undefined
+  #theme: Signal<Theme | undefined>
   #dispose?: () => void
 
   constructor(config: TanstackQueryDevtoolsConfig) {
@@ -48,6 +50,7 @@ class TanstackQueryDevtools {
       styleNonce,
       shadowDOMTarget,
       hideDisabledQueries,
+      theme,
     } = config
     this.#client = createSignal(client)
     this.#queryFlavor = queryFlavor
@@ -60,6 +63,7 @@ class TanstackQueryDevtools {
     this.#initialIsOpen = createSignal(initialIsOpen)
     this.#errorTypes = createSignal(errorTypes)
     this.#hideDisabledQueries = createSignal(hideDisabledQueries)
+    this.#theme = createSignal(theme)
   }
 
   setButtonPosition(position: DevtoolsButtonPosition) {
@@ -82,6 +86,10 @@ class TanstackQueryDevtools {
     this.#client[1](client)
   }
 
+  setTheme(theme?: Theme) {
+    this.#theme[1](theme)
+  }
+
   mount<T extends HTMLElement>(el: T) {
     if (this.#isMounted) {
       throw new Error('Devtools is already mounted')
@@ -93,6 +101,7 @@ class TanstackQueryDevtools {
       const [errors] = this.#errorTypes
       const [hideDisabledQueries] = this.#hideDisabledQueries
       const [queryClient] = this.#client
+      const [theme] = this.#theme
       let Devtools: DevtoolsComponentType
 
       if (this.#Component) {
@@ -128,6 +137,9 @@ class TanstackQueryDevtools {
             get hideDisabledQueries() {
               return hideDisabledQueries()
             },
+            get theme() {
+              return theme()
+            },
           }}
         />
       )