[pull] main from TanStack:main

packages/query-devtools/src/__tests__/Devtools.test.tsx

@@ -415,7 +415,11 @@ describe('Devtools', () => {
       | 'close'
     >
 
-    function stubPipWindow() {
+    function stubPipWindow(
+      overrides: Partial<
+        Pick<FakePipWindow, 'innerWidth' | 'innerHeight'>
+      > = {},
+    ) {
       const pipDocument = document.implementation.createHTMLDocument('PiP')
       const listeners = new Map<string, EventListener>()
       const fakeWindow: FakePipWindow = {
@@ -429,6 +433,7 @@ describe('Devtools', () => {
           listeners.delete(event)
         }),
         close: vi.fn(),
+        ...overrides,
       }
       const open = vi.fn(() => fakeWindow)
       vi.stubGlobal('open', open)
@@ -526,6 +531,27 @@ describe('Devtools', () => {
         rendered.getByLabelText('Open in picture-in-picture mode'),
       ).toBeInTheDocument()
     })
+
+    it('should render the PiP panel with the narrow layout when the PiP window is below the second breakpoint', () => {
+      // secondBreakpoint = 796; pick a width comfortably below it so the
+      // PiP panel evaluates its narrow (`flex-direction: column`) branch.
+      const { pipDocument } = stubPipWindow({ innerWidth: 500 })
+      queryClient.setQueryData(['narrow-pip-query'], { hello: 'world' })
+      const rendered = renderDevtools({ initialIsOpen: true })
+
+      fireEvent.click(
+        rendered.getByLabelText('Open in picture-in-picture mode'),
+      )
+
+      expect(
+        pipDocument.querySelector(
+          '[aria-label="Close Tanstack query devtools"]',
+        ),
+      ).not.toBeNull()
+      expect(
+        pipDocument.querySelector('[aria-label*="narrow-pip-query"]'),
+      ).not.toBeNull()
+    })
   })
 
   describe('status counts', () => {

packages/query-devtools/src/__tests__/Explorer.test.tsx

@@ -588,4 +588,46 @@ describe('Explorer', () => {
       ).not.toThrow()
     })
   })
+
+  describe('"shadowDOMTarget"', () => {
+    it('should render without throwing when a "shadowDOMTarget" is provided', () => {
+      const host = document.createElement('div')
+      document.body.appendChild(host)
+      const shadowRoot = host.attachShadow({ mode: 'open' })
+      const value = { items: ['a'], flag: true }
+      queryClient.setQueryData(['data'], value)
+
+      try {
+        expect(() =>
+          render(() => (
+            <QueryDevtoolsContext.Provider
+              value={{
+                client: queryClient,
+                queryFlavor: 'TanStack Query',
+                version: '5',
+                onlineManager,
+                shadowDOMTarget: shadowRoot,
+              }}
+            >
+              <ThemeContext.Provider value={() => 'dark'}>
+                <Explorer
+                  label="Data"
+                  value={value}
+                  defaultExpanded={['Data']}
+                  editable={true}
+                  activeQuery={
+                    queryClient
+                      .getQueryCache()
+                      .find({ queryKey: ['data'] }) as Query
+                  }
+                />
+              </ThemeContext.Provider>
+            </QueryDevtoolsContext.Provider>
+          )),
+        ).not.toThrow()
+      } finally {
+        host.remove()
+      }
+    })
+  })
 })

packages/query-devtools/src/__tests__/contexts/ThemeContext.test.tsx

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest'
+import { render } from '@solidjs/testing-library'
+import { createEffect, createSignal } from 'solid-js'
+import { ThemeContext, useTheme } from '../../contexts'
+
+type Theme = ReturnType<ReturnType<typeof useTheme>>
+
+function renderThemeProbe(provider?: () => Theme) {
+  let resolvedTheme: Theme | undefined
+  function ThemeProbe() {
+    const theme = useTheme()
+    resolvedTheme = theme()
+    return null
+  }
+
+  render(() =>
+    provider ? (
+      <ThemeContext.Provider value={provider}>
+        <ThemeProbe />
+      </ThemeContext.Provider>
+    ) : (
+      <ThemeProbe />
+    ),
+  )
+
+  return resolvedTheme
+}
+
+describe('ThemeContext', () => {
+  describe('default value', () => {
+    it('should resolve to "dark" when no "ThemeContext.Provider" wraps the consumer', () => {
+      expect(renderThemeProbe()).toBe('dark')
+    })
+  })
+
+  describe('with a "ThemeContext.Provider"', () => {
+    it('should resolve to the value provided by the "Provider"', () => {
+      expect(renderThemeProbe(() => 'light')).toBe('light')
+      expect(renderThemeProbe(() => 'dark')).toBe('dark')
+    })
+
+    it('should reflect updates when the "Provider" value is a reactive "Accessor"', () => {
+      const [theme, setTheme] = createSignal<Theme>('dark')
+      let observed: Theme | undefined
+      function ThemeProbe() {
+        const resolved = useTheme()
+        createEffect(() => {
+          observed = resolved()
+        })
+        return null
+      }
+
+      render(() => (
+        <ThemeContext.Provider value={theme}>
+          <ThemeProbe />
+        </ThemeContext.Provider>
+      ))
+
+      expect(observed).toBe('dark')
+
+      setTheme('light')
+      expect(observed).toBe('light')
+    })
+  })
+})