@tanstack/query-devtools 5.27.3 → 5.27.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/build/Devtools/{ZI3HPF3S.jsx → 3GD3OJ5X.jsx} +30 -24
  2. package/build/Devtools/{DBFR2OSQ.js → DNNKSY26.js} +42 -24
  3. package/build/Devtools/{UXHVNKJK.js → TSTTTWSP.js} +42 -24
  4. package/build/Devtools/{MZG6MFIN.jsx → XCT7HWYW.jsx} +30 -24
  5. package/build/dev.cjs +43 -25
  6. package/build/dev.js +1 -1
  7. package/build/dev.jsx +1 -1
  8. package/build/index.cjs +43 -25
  9. package/build/index.js +1 -1
  10. package/build/index.jsx +1 -1
  11. package/package.json +2 -2
  12. package/src/Explorer.tsx +31 -10
package/src/Explorer.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { stringify } from 'superjson'
2
- import { css } from 'goober'
3
2
  import { clsx as cx } from 'clsx'
4
3
  import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
5
4
  import { Key } from '@solid-primitives/keyed'
5
+ import * as goober from 'goober'
6
6
  import { tokens } from './theme'
7
7
  import {
8
8
  deleteNestedDataByPath,
@@ -38,8 +38,11 @@ function chunkArray<T extends { label: string; value: unknown }>(
38
38
 
39
39
  const Expander = (props: { expanded: boolean }) => {
40
40
  const theme = useTheme()
41
+ const css = useQueryDevtoolsContext().shadowDOMTarget
42
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
43
+ : goober.css
41
44
  const styles = createMemo(() => {
42
- return theme() === 'dark' ? darkStyles : lightStyles
45
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
43
46
  })
44
47
 
45
48
  return (
@@ -78,8 +81,11 @@ const Expander = (props: { expanded: boolean }) => {
78
81
  type CopyState = 'NoCopy' | 'SuccessCopy' | 'ErrorCopy'
79
82
  const CopyButton = (props: { value: unknown }) => {
80
83
  const theme = useTheme()
84
+ const css = useQueryDevtoolsContext().shadowDOMTarget
85
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
86
+ : goober.css
81
87
  const styles = createMemo(() => {
82
- return theme() === 'dark' ? darkStyles : lightStyles
88
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
83
89
  })
84
90
  const [copyState, setCopyState] = createSignal<CopyState>('NoCopy')
85
91
 
@@ -136,8 +142,11 @@ const ClearArrayButton = (props: {
136
142
  activeQuery: Query
137
143
  }) => {
138
144
  const theme = useTheme()
145
+ const css = useQueryDevtoolsContext().shadowDOMTarget
146
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
147
+ : goober.css
139
148
  const styles = createMemo(() => {
140
- return theme() === 'dark' ? darkStyles : lightStyles
149
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
141
150
  })
142
151
  const queryClient = useQueryDevtoolsContext().client
143
152
 
@@ -162,8 +171,11 @@ const DeleteItemButton = (props: {
162
171
  activeQuery: Query
163
172
  }) => {
164
173
  const theme = useTheme()
174
+ const css = useQueryDevtoolsContext().shadowDOMTarget
175
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
176
+ : goober.css
165
177
  const styles = createMemo(() => {
166
- return theme() === 'dark' ? darkStyles : lightStyles
178
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
167
179
  })
168
180
  const queryClient = useQueryDevtoolsContext().client
169
181
 
@@ -189,8 +201,11 @@ const ToggleValueButton = (props: {
189
201
  value: boolean
190
202
  }) => {
191
203
  const theme = useTheme()
204
+ const css = useQueryDevtoolsContext().shadowDOMTarget
205
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
206
+ : goober.css
192
207
  const styles = createMemo(() => {
193
- return theme() === 'dark' ? darkStyles : lightStyles
208
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
194
209
  })
195
210
  const queryClient = useQueryDevtoolsContext().client
196
211
 
@@ -236,8 +251,11 @@ function isIterable(x: any): x is Iterable<unknown> {
236
251
 
237
252
  export default function Explorer(props: ExplorerProps) {
238
253
  const theme = useTheme()
254
+ const css = useQueryDevtoolsContext().shadowDOMTarget
255
+ ? goober.css.bind({ target: useQueryDevtoolsContext().shadowDOMTarget })
256
+ : goober.css
239
257
  const styles = createMemo(() => {
240
- return theme() === 'dark' ? darkStyles : lightStyles
258
+ return theme() === 'dark' ? darkStyles(css) : lightStyles(css)
241
259
  })
242
260
  const queryClient = useQueryDevtoolsContext().client
243
261
 
@@ -482,7 +500,10 @@ export default function Explorer(props: ExplorerProps) {
482
500
  )
483
501
  }
484
502
 
485
- const stylesFactory = (theme: 'light' | 'dark') => {
503
+ const stylesFactory = (
504
+ theme: 'light' | 'dark',
505
+ css: (typeof goober)['css'],
506
+ ) => {
486
507
  const { colors, font, size, border } = tokens
487
508
  const t = (light: string, dark: string) => (theme === 'light' ? light : dark)
488
509
  return {
@@ -612,5 +633,5 @@ const stylesFactory = (theme: 'light' | 'dark') => {
612
633
  }
613
634
  }
614
635
 
615
- const lightStyles = stylesFactory('light')
616
- const darkStyles = stylesFactory('dark')
636
+ const lightStyles = (css: (typeof goober)['css']) => stylesFactory('light', css)
637
+ const darkStyles = (css: (typeof goober)['css']) => stylesFactory('dark', css)