@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.
@@ -10007,16 +10007,17 @@ function chunkArray(array, size2) {
10007
10007
  }
10008
10008
  var Expander = (props) => {
10009
10009
  const theme = useTheme();
10010
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10010
10011
  const styles = createMemo(() => {
10011
- return theme() === "dark" ? darkStyles : lightStyles;
10012
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10012
10013
  });
10013
10014
  return <span
10014
10015
  class={clsx(
10015
10016
  styles().expander,
10016
- u`
10017
+ css`
10017
10018
  transform: rotate(${props.expanded ? 90 : 0}deg);
10018
10019
  `,
10019
- props.expanded && u`
10020
+ props.expanded && css`
10020
10021
  & svg {
10021
10022
  top: -1px;
10022
10023
  }
@@ -10037,8 +10038,9 @@ var Expander = (props) => {
10037
10038
  };
10038
10039
  var CopyButton = (props) => {
10039
10040
  const theme = useTheme();
10041
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10040
10042
  const styles = createMemo(() => {
10041
- return theme() === "dark" ? darkStyles : lightStyles;
10043
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10042
10044
  });
10043
10045
  const [copyState, setCopyState] = createSignal("NoCopy");
10044
10046
  return <button
@@ -10070,8 +10072,9 @@ var CopyButton = (props) => {
10070
10072
  };
10071
10073
  var ClearArrayButton = (props) => {
10072
10074
  const theme = useTheme();
10075
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10073
10076
  const styles = createMemo(() => {
10074
- return theme() === "dark" ? darkStyles : lightStyles;
10077
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10075
10078
  });
10076
10079
  const queryClient = useQueryDevtoolsContext().client;
10077
10080
  return <button
@@ -10087,8 +10090,9 @@ var ClearArrayButton = (props) => {
10087
10090
  };
10088
10091
  var DeleteItemButton = (props) => {
10089
10092
  const theme = useTheme();
10093
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10090
10094
  const styles = createMemo(() => {
10091
- return theme() === "dark" ? darkStyles : lightStyles;
10095
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10092
10096
  });
10093
10097
  const queryClient = useQueryDevtoolsContext().client;
10094
10098
  return <button
@@ -10104,14 +10108,15 @@ var DeleteItemButton = (props) => {
10104
10108
  };
10105
10109
  var ToggleValueButton = (props) => {
10106
10110
  const theme = useTheme();
10111
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10107
10112
  const styles = createMemo(() => {
10108
- return theme() === "dark" ? darkStyles : lightStyles;
10113
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10109
10114
  });
10110
10115
  const queryClient = useQueryDevtoolsContext().client;
10111
10116
  return <button
10112
10117
  class={clsx(
10113
10118
  styles().actionButton,
10114
- u`
10119
+ css`
10115
10120
  width: ${tokens.size[3.5]};
10116
10121
  height: ${tokens.size[3.5]};
10117
10122
  `
@@ -10134,8 +10139,9 @@ function isIterable(x) {
10134
10139
  }
10135
10140
  function Explorer(props) {
10136
10141
  const theme = useTheme();
10142
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({ target: useQueryDevtoolsContext().shadowDOMTarget }) : u;
10137
10143
  const styles = createMemo(() => {
10138
- return theme() === "dark" ? darkStyles : lightStyles;
10144
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
10139
10145
  });
10140
10146
  const queryClient = useQueryDevtoolsContext().client;
10141
10147
  const [expanded, setExpanded] = createSignal(
@@ -10301,11 +10307,11 @@ function Explorer(props) {
10301
10307
  </div></Show>
10302
10308
  </div>;
10303
10309
  }
10304
- var stylesFactory = (theme) => {
10310
+ var stylesFactory = (theme, css) => {
10305
10311
  const { colors, font, size: size2, border } = tokens;
10306
10312
  const t2 = (light, dark) => theme === "light" ? light : dark;
10307
10313
  return {
10308
- entry: u`
10314
+ entry: css`
10309
10315
  & * {
10310
10316
  font-size: ${font.size.xs};
10311
10317
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -10315,13 +10321,13 @@ var stylesFactory = (theme) => {
10315
10321
  outline: none;
10316
10322
  word-break: break-word;
10317
10323
  `,
10318
- subEntry: u`
10324
+ subEntry: css`
10319
10325
  margin: 0 0 0 0.5em;
10320
10326
  padding-left: 0.75em;
10321
10327
  border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
10322
10328
  /* outline: 1px solid ${colors.teal[400]}; */
10323
10329
  `,
10324
- expander: u`
10330
+ expander: css`
10325
10331
  & path {
10326
10332
  stroke: ${colors.gray[400]};
10327
10333
  }
@@ -10334,14 +10340,14 @@ var stylesFactory = (theme) => {
10334
10340
  transition: all 0.1s ease;
10335
10341
  /* outline: 1px solid ${colors.blue[400]}; */
10336
10342
  `,
10337
- expanderButtonContainer: u`
10343
+ expanderButtonContainer: css`
10338
10344
  display: flex;
10339
10345
  align-items: center;
10340
10346
  line-height: ${size2[4]};
10341
10347
  min-height: ${size2[4]};
10342
10348
  gap: ${size2[2]};
10343
10349
  `,
10344
- expanderButton: u`
10350
+ expanderButton: css`
10345
10351
  cursor: pointer;
10346
10352
  color: inherit;
10347
10353
  font: inherit;
@@ -10366,26 +10372,26 @@ var stylesFactory = (theme) => {
10366
10372
  left: 1px;
10367
10373
  }
10368
10374
  `,
10369
- info: u`
10375
+ info: css`
10370
10376
  color: ${t2(colors.gray[500], colors.gray[500])};
10371
10377
  font-size: ${font.size.xs};
10372
10378
  margin-left: ${size2[1]};
10373
10379
  /* outline: 1px solid ${colors.yellow[400]}; */
10374
10380
  `,
10375
- label: u`
10381
+ label: css`
10376
10382
  color: ${t2(colors.gray[700], colors.gray[300])};
10377
10383
  white-space: nowrap;
10378
10384
  `,
10379
- value: u`
10385
+ value: css`
10380
10386
  color: ${t2(colors.purple[600], colors.purple[400])};
10381
10387
  flex-grow: 1;
10382
10388
  `,
10383
- actions: u`
10389
+ actions: css`
10384
10390
  display: inline-flex;
10385
10391
  gap: ${size2[2]};
10386
10392
  align-items: center;
10387
10393
  `,
10388
- row: u`
10394
+ row: css`
10389
10395
  display: inline-flex;
10390
10396
  gap: ${size2[2]};
10391
10397
  width: 100%;
@@ -10393,7 +10399,7 @@ var stylesFactory = (theme) => {
10393
10399
  line-height: ${size2[4.5]};
10394
10400
  align-items: center;
10395
10401
  `,
10396
- editableInput: u`
10402
+ editableInput: css`
10397
10403
  border: none;
10398
10404
  padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
10399
10405
  flex-grow: 1;
@@ -10404,7 +10410,7 @@ var stylesFactory = (theme) => {
10404
10410
  background-color: ${t2(colors.gray[300], colors.darkGray[600])};
10405
10411
  }
10406
10412
  `,
10407
- actionButton: u`
10413
+ actionButton: css`
10408
10414
  background-color: transparent;
10409
10415
  color: ${t2(colors.gray[500], colors.gray[500])};
10410
10416
  border: none;
@@ -10430,8 +10436,8 @@ var stylesFactory = (theme) => {
10430
10436
  `
10431
10437
  };
10432
10438
  };
10433
- var lightStyles = stylesFactory("light");
10434
- var darkStyles = stylesFactory("dark");
10439
+ var lightStyles = (css) => stylesFactory("light", css);
10440
+ var darkStyles = (css) => stylesFactory("dark", css);
10435
10441
 
10436
10442
  // src/Devtools.tsx
10437
10443
  var firstBreakpoint = 1024;
package/build/dev.cjs CHANGED
@@ -12239,8 +12239,11 @@ function isIterable(x) {
12239
12239
  }
12240
12240
  function Explorer(props) {
12241
12241
  const theme = useTheme();
12242
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12243
+ target: useQueryDevtoolsContext().shadowDOMTarget
12244
+ }) : u;
12242
12245
  const styles = createMemo(() => {
12243
- return theme() === "dark" ? darkStyles : lightStyles;
12246
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12244
12247
  });
12245
12248
  const queryClient = useQueryDevtoolsContext().client;
12246
12249
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -12583,10 +12586,10 @@ var init_Explorer = __esm({
12583
12586
  init_web();
12584
12587
  init_web();
12585
12588
  init_esm();
12586
- init_goober_modern();
12587
12589
  init_clsx();
12588
12590
  init_solid();
12589
12591
  init_dist6();
12592
+ init_goober_modern();
12590
12593
  init_theme();
12591
12594
  init_utils();
12592
12595
  init_icons();
@@ -12604,14 +12607,17 @@ var init_Explorer = __esm({
12604
12607
  _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
12605
12608
  Expander = (props) => {
12606
12609
  const theme = useTheme();
12610
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12611
+ target: useQueryDevtoolsContext().shadowDOMTarget
12612
+ }) : u;
12607
12613
  const styles = createMemo(() => {
12608
- return theme() === "dark" ? darkStyles : lightStyles;
12614
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12609
12615
  });
12610
12616
  return (() => {
12611
12617
  const _el$ = _tmpl$23();
12612
- createRenderEffect(() => className(_el$, clsx(styles().expander, u`
12618
+ createRenderEffect(() => className(_el$, clsx(styles().expander, css`
12613
12619
  transform: rotate(${props.expanded ? 90 : 0}deg);
12614
- `, props.expanded && u`
12620
+ `, props.expanded && css`
12615
12621
  & svg {
12616
12622
  top: -1px;
12617
12623
  }
@@ -12621,8 +12627,11 @@ var init_Explorer = __esm({
12621
12627
  };
12622
12628
  CopyButton = (props) => {
12623
12629
  const theme = useTheme();
12630
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12631
+ target: useQueryDevtoolsContext().shadowDOMTarget
12632
+ }) : u;
12624
12633
  const styles = createMemo(() => {
12625
- return theme() === "dark" ? darkStyles : lightStyles;
12634
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12626
12635
  });
12627
12636
  const [copyState, setCopyState] = createSignal("NoCopy");
12628
12637
  return (() => {
@@ -12685,8 +12694,11 @@ var init_Explorer = __esm({
12685
12694
  };
12686
12695
  ClearArrayButton = (props) => {
12687
12696
  const theme = useTheme();
12697
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12698
+ target: useQueryDevtoolsContext().shadowDOMTarget
12699
+ }) : u;
12688
12700
  const styles = createMemo(() => {
12689
- return theme() === "dark" ? darkStyles : lightStyles;
12701
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12690
12702
  });
12691
12703
  const queryClient = useQueryDevtoolsContext().client;
12692
12704
  return (() => {
@@ -12703,8 +12715,11 @@ var init_Explorer = __esm({
12703
12715
  };
12704
12716
  DeleteItemButton = (props) => {
12705
12717
  const theme = useTheme();
12718
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12719
+ target: useQueryDevtoolsContext().shadowDOMTarget
12720
+ }) : u;
12706
12721
  const styles = createMemo(() => {
12707
- return theme() === "dark" ? darkStyles : lightStyles;
12722
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12708
12723
  });
12709
12724
  const queryClient = useQueryDevtoolsContext().client;
12710
12725
  return (() => {
@@ -12721,8 +12736,11 @@ var init_Explorer = __esm({
12721
12736
  };
12722
12737
  ToggleValueButton = (props) => {
12723
12738
  const theme = useTheme();
12739
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12740
+ target: useQueryDevtoolsContext().shadowDOMTarget
12741
+ }) : u;
12724
12742
  const styles = createMemo(() => {
12725
- return theme() === "dark" ? darkStyles : lightStyles;
12743
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12726
12744
  });
12727
12745
  const queryClient = useQueryDevtoolsContext().client;
12728
12746
  return (() => {
@@ -12740,14 +12758,14 @@ var init_Explorer = __esm({
12740
12758
  return props.value;
12741
12759
  }
12742
12760
  }));
12743
- createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
12761
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
12744
12762
  width: ${tokens.size[3.5]};
12745
12763
  height: ${tokens.size[3.5]};
12746
12764
  `)));
12747
12765
  return _el$5;
12748
12766
  })();
12749
12767
  };
12750
- stylesFactory = (theme) => {
12768
+ stylesFactory = (theme, css) => {
12751
12769
  const {
12752
12770
  colors,
12753
12771
  font,
@@ -12756,7 +12774,7 @@ var init_Explorer = __esm({
12756
12774
  } = tokens;
12757
12775
  const t2 = (light, dark) => theme === "light" ? light : dark;
12758
12776
  return {
12759
- entry: u`
12777
+ entry: css`
12760
12778
  & * {
12761
12779
  font-size: ${font.size.xs};
12762
12780
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -12766,13 +12784,13 @@ var init_Explorer = __esm({
12766
12784
  outline: none;
12767
12785
  word-break: break-word;
12768
12786
  `,
12769
- subEntry: u`
12787
+ subEntry: css`
12770
12788
  margin: 0 0 0 0.5em;
12771
12789
  padding-left: 0.75em;
12772
12790
  border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
12773
12791
  /* outline: 1px solid ${colors.teal[400]}; */
12774
12792
  `,
12775
- expander: u`
12793
+ expander: css`
12776
12794
  & path {
12777
12795
  stroke: ${colors.gray[400]};
12778
12796
  }
@@ -12785,14 +12803,14 @@ var init_Explorer = __esm({
12785
12803
  transition: all 0.1s ease;
12786
12804
  /* outline: 1px solid ${colors.blue[400]}; */
12787
12805
  `,
12788
- expanderButtonContainer: u`
12806
+ expanderButtonContainer: css`
12789
12807
  display: flex;
12790
12808
  align-items: center;
12791
12809
  line-height: ${size2[4]};
12792
12810
  min-height: ${size2[4]};
12793
12811
  gap: ${size2[2]};
12794
12812
  `,
12795
- expanderButton: u`
12813
+ expanderButton: css`
12796
12814
  cursor: pointer;
12797
12815
  color: inherit;
12798
12816
  font: inherit;
@@ -12817,26 +12835,26 @@ var init_Explorer = __esm({
12817
12835
  left: 1px;
12818
12836
  }
12819
12837
  `,
12820
- info: u`
12838
+ info: css`
12821
12839
  color: ${t2(colors.gray[500], colors.gray[500])};
12822
12840
  font-size: ${font.size.xs};
12823
12841
  margin-left: ${size2[1]};
12824
12842
  /* outline: 1px solid ${colors.yellow[400]}; */
12825
12843
  `,
12826
- label: u`
12844
+ label: css`
12827
12845
  color: ${t2(colors.gray[700], colors.gray[300])};
12828
12846
  white-space: nowrap;
12829
12847
  `,
12830
- value: u`
12848
+ value: css`
12831
12849
  color: ${t2(colors.purple[600], colors.purple[400])};
12832
12850
  flex-grow: 1;
12833
12851
  `,
12834
- actions: u`
12852
+ actions: css`
12835
12853
  display: inline-flex;
12836
12854
  gap: ${size2[2]};
12837
12855
  align-items: center;
12838
12856
  `,
12839
- row: u`
12857
+ row: css`
12840
12858
  display: inline-flex;
12841
12859
  gap: ${size2[2]};
12842
12860
  width: 100%;
@@ -12844,7 +12862,7 @@ var init_Explorer = __esm({
12844
12862
  line-height: ${size2[4.5]};
12845
12863
  align-items: center;
12846
12864
  `,
12847
- editableInput: u`
12865
+ editableInput: css`
12848
12866
  border: none;
12849
12867
  padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
12850
12868
  flex-grow: 1;
@@ -12855,7 +12873,7 @@ var init_Explorer = __esm({
12855
12873
  background-color: ${t2(colors.gray[300], colors.darkGray[600])};
12856
12874
  }
12857
12875
  `,
12858
- actionButton: u`
12876
+ actionButton: css`
12859
12877
  background-color: transparent;
12860
12878
  color: ${t2(colors.gray[500], colors.gray[500])};
12861
12879
  border: none;
@@ -12881,8 +12899,8 @@ var init_Explorer = __esm({
12881
12899
  `
12882
12900
  };
12883
12901
  };
12884
- lightStyles = stylesFactory("light");
12885
- darkStyles = stylesFactory("dark");
12902
+ lightStyles = (css) => stylesFactory("light", css);
12903
+ darkStyles = (css) => stylesFactory("dark", css);
12886
12904
  delegateEvents(["click"]);
12887
12905
  }
12888
12906
  });
package/build/dev.js CHANGED
@@ -69,7 +69,7 @@ var TanstackQueryDevtools = class {
69
69
  if (this.#Component) {
70
70
  Devtools = this.#Component;
71
71
  } else {
72
- Devtools = lazy(() => import('./Devtools/UXHVNKJK.js'));
72
+ Devtools = lazy(() => import('./Devtools/TSTTTWSP.js'));
73
73
  this.#Component = Devtools;
74
74
  }
75
75
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
package/build/dev.jsx CHANGED
@@ -73,7 +73,7 @@ var TanstackQueryDevtools = class {
73
73
  if (this.#Component) {
74
74
  Devtools = this.#Component;
75
75
  } else {
76
- Devtools = lazy(() => import("./Devtools/MZG6MFIN.jsx"));
76
+ Devtools = lazy(() => import("./Devtools/XCT7HWYW.jsx"));
77
77
  this.#Component = Devtools;
78
78
  }
79
79
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
package/build/index.cjs CHANGED
@@ -12238,8 +12238,11 @@ function isIterable(x) {
12238
12238
  }
12239
12239
  function Explorer(props) {
12240
12240
  const theme = useTheme();
12241
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12242
+ target: useQueryDevtoolsContext().shadowDOMTarget
12243
+ }) : u;
12241
12244
  const styles = createMemo(() => {
12242
- return theme() === "dark" ? darkStyles : lightStyles;
12245
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12243
12246
  });
12244
12247
  const queryClient = useQueryDevtoolsContext().client;
12245
12248
  const [expanded, setExpanded] = createSignal((props.defaultExpanded || []).includes(props.label));
@@ -12582,10 +12585,10 @@ var init_Explorer = __esm({
12582
12585
  init_web();
12583
12586
  init_web();
12584
12587
  init_esm();
12585
- init_goober_modern();
12586
12588
  init_clsx();
12587
12589
  init_solid();
12588
12590
  init_dist6();
12591
+ init_goober_modern();
12589
12592
  init_theme();
12590
12593
  init_utils();
12591
12594
  init_icons();
@@ -12603,14 +12606,17 @@ var init_Explorer = __esm({
12603
12606
  _tmpl$112 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
12604
12607
  Expander = (props) => {
12605
12608
  const theme = useTheme();
12609
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12610
+ target: useQueryDevtoolsContext().shadowDOMTarget
12611
+ }) : u;
12606
12612
  const styles = createMemo(() => {
12607
- return theme() === "dark" ? darkStyles : lightStyles;
12613
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12608
12614
  });
12609
12615
  return (() => {
12610
12616
  const _el$ = _tmpl$23();
12611
- createRenderEffect(() => className(_el$, clsx(styles().expander, u`
12617
+ createRenderEffect(() => className(_el$, clsx(styles().expander, css`
12612
12618
  transform: rotate(${props.expanded ? 90 : 0}deg);
12613
- `, props.expanded && u`
12619
+ `, props.expanded && css`
12614
12620
  & svg {
12615
12621
  top: -1px;
12616
12622
  }
@@ -12620,8 +12626,11 @@ var init_Explorer = __esm({
12620
12626
  };
12621
12627
  CopyButton = (props) => {
12622
12628
  const theme = useTheme();
12629
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12630
+ target: useQueryDevtoolsContext().shadowDOMTarget
12631
+ }) : u;
12623
12632
  const styles = createMemo(() => {
12624
- return theme() === "dark" ? darkStyles : lightStyles;
12633
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12625
12634
  });
12626
12635
  const [copyState, setCopyState] = createSignal("NoCopy");
12627
12636
  return (() => {
@@ -12683,8 +12692,11 @@ var init_Explorer = __esm({
12683
12692
  };
12684
12693
  ClearArrayButton = (props) => {
12685
12694
  const theme = useTheme();
12695
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12696
+ target: useQueryDevtoolsContext().shadowDOMTarget
12697
+ }) : u;
12686
12698
  const styles = createMemo(() => {
12687
- return theme() === "dark" ? darkStyles : lightStyles;
12699
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12688
12700
  });
12689
12701
  const queryClient = useQueryDevtoolsContext().client;
12690
12702
  return (() => {
@@ -12701,8 +12713,11 @@ var init_Explorer = __esm({
12701
12713
  };
12702
12714
  DeleteItemButton = (props) => {
12703
12715
  const theme = useTheme();
12716
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12717
+ target: useQueryDevtoolsContext().shadowDOMTarget
12718
+ }) : u;
12704
12719
  const styles = createMemo(() => {
12705
- return theme() === "dark" ? darkStyles : lightStyles;
12720
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12706
12721
  });
12707
12722
  const queryClient = useQueryDevtoolsContext().client;
12708
12723
  return (() => {
@@ -12719,8 +12734,11 @@ var init_Explorer = __esm({
12719
12734
  };
12720
12735
  ToggleValueButton = (props) => {
12721
12736
  const theme = useTheme();
12737
+ const css = useQueryDevtoolsContext().shadowDOMTarget ? u.bind({
12738
+ target: useQueryDevtoolsContext().shadowDOMTarget
12739
+ }) : u;
12722
12740
  const styles = createMemo(() => {
12723
- return theme() === "dark" ? darkStyles : lightStyles;
12741
+ return theme() === "dark" ? darkStyles(css) : lightStyles(css);
12724
12742
  });
12725
12743
  const queryClient = useQueryDevtoolsContext().client;
12726
12744
  return (() => {
@@ -12738,14 +12756,14 @@ var init_Explorer = __esm({
12738
12756
  return props.value;
12739
12757
  }
12740
12758
  }));
12741
- createRenderEffect(() => className(_el$5, clsx(styles().actionButton, u`
12759
+ createRenderEffect(() => className(_el$5, clsx(styles().actionButton, css`
12742
12760
  width: ${tokens.size[3.5]};
12743
12761
  height: ${tokens.size[3.5]};
12744
12762
  `)));
12745
12763
  return _el$5;
12746
12764
  })();
12747
12765
  };
12748
- stylesFactory = (theme) => {
12766
+ stylesFactory = (theme, css) => {
12749
12767
  const {
12750
12768
  colors,
12751
12769
  font,
@@ -12754,7 +12772,7 @@ var init_Explorer = __esm({
12754
12772
  } = tokens;
12755
12773
  const t2 = (light, dark) => theme === "light" ? light : dark;
12756
12774
  return {
12757
- entry: u`
12775
+ entry: css`
12758
12776
  & * {
12759
12777
  font-size: ${font.size.xs};
12760
12778
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
@@ -12764,13 +12782,13 @@ var init_Explorer = __esm({
12764
12782
  outline: none;
12765
12783
  word-break: break-word;
12766
12784
  `,
12767
- subEntry: u`
12785
+ subEntry: css`
12768
12786
  margin: 0 0 0 0.5em;
12769
12787
  padding-left: 0.75em;
12770
12788
  border-left: 2px solid ${t2(colors.gray[300], colors.darkGray[400])};
12771
12789
  /* outline: 1px solid ${colors.teal[400]}; */
12772
12790
  `,
12773
- expander: u`
12791
+ expander: css`
12774
12792
  & path {
12775
12793
  stroke: ${colors.gray[400]};
12776
12794
  }
@@ -12783,14 +12801,14 @@ var init_Explorer = __esm({
12783
12801
  transition: all 0.1s ease;
12784
12802
  /* outline: 1px solid ${colors.blue[400]}; */
12785
12803
  `,
12786
- expanderButtonContainer: u`
12804
+ expanderButtonContainer: css`
12787
12805
  display: flex;
12788
12806
  align-items: center;
12789
12807
  line-height: ${size2[4]};
12790
12808
  min-height: ${size2[4]};
12791
12809
  gap: ${size2[2]};
12792
12810
  `,
12793
- expanderButton: u`
12811
+ expanderButton: css`
12794
12812
  cursor: pointer;
12795
12813
  color: inherit;
12796
12814
  font: inherit;
@@ -12815,26 +12833,26 @@ var init_Explorer = __esm({
12815
12833
  left: 1px;
12816
12834
  }
12817
12835
  `,
12818
- info: u`
12836
+ info: css`
12819
12837
  color: ${t2(colors.gray[500], colors.gray[500])};
12820
12838
  font-size: ${font.size.xs};
12821
12839
  margin-left: ${size2[1]};
12822
12840
  /* outline: 1px solid ${colors.yellow[400]}; */
12823
12841
  `,
12824
- label: u`
12842
+ label: css`
12825
12843
  color: ${t2(colors.gray[700], colors.gray[300])};
12826
12844
  white-space: nowrap;
12827
12845
  `,
12828
- value: u`
12846
+ value: css`
12829
12847
  color: ${t2(colors.purple[600], colors.purple[400])};
12830
12848
  flex-grow: 1;
12831
12849
  `,
12832
- actions: u`
12850
+ actions: css`
12833
12851
  display: inline-flex;
12834
12852
  gap: ${size2[2]};
12835
12853
  align-items: center;
12836
12854
  `,
12837
- row: u`
12855
+ row: css`
12838
12856
  display: inline-flex;
12839
12857
  gap: ${size2[2]};
12840
12858
  width: 100%;
@@ -12842,7 +12860,7 @@ var init_Explorer = __esm({
12842
12860
  line-height: ${size2[4.5]};
12843
12861
  align-items: center;
12844
12862
  `,
12845
- editableInput: u`
12863
+ editableInput: css`
12846
12864
  border: none;
12847
12865
  padding: ${size2[0.5]} ${size2[1]} ${size2[0.5]} ${size2[1.5]};
12848
12866
  flex-grow: 1;
@@ -12853,7 +12871,7 @@ var init_Explorer = __esm({
12853
12871
  background-color: ${t2(colors.gray[300], colors.darkGray[600])};
12854
12872
  }
12855
12873
  `,
12856
- actionButton: u`
12874
+ actionButton: css`
12857
12875
  background-color: transparent;
12858
12876
  color: ${t2(colors.gray[500], colors.gray[500])};
12859
12877
  border: none;
@@ -12879,8 +12897,8 @@ var init_Explorer = __esm({
12879
12897
  `
12880
12898
  };
12881
12899
  };
12882
- lightStyles = stylesFactory("light");
12883
- darkStyles = stylesFactory("dark");
12900
+ lightStyles = (css) => stylesFactory("light", css);
12901
+ darkStyles = (css) => stylesFactory("dark", css);
12884
12902
  delegateEvents(["click"]);
12885
12903
  }
12886
12904
  });
package/build/index.js CHANGED
@@ -69,7 +69,7 @@ var TanstackQueryDevtools = class {
69
69
  if (this.#Component) {
70
70
  Devtools = this.#Component;
71
71
  } else {
72
- Devtools = lazy(() => import('./Devtools/DBFR2OSQ.js'));
72
+ Devtools = lazy(() => import('./Devtools/DNNKSY26.js'));
73
73
  this.#Component = Devtools;
74
74
  }
75
75
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
package/build/index.jsx CHANGED
@@ -73,7 +73,7 @@ var TanstackQueryDevtools = class {
73
73
  if (this.#Component) {
74
74
  Devtools = this.#Component;
75
75
  } else {
76
- Devtools = lazy(() => import("./Devtools/ZI3HPF3S.jsx"));
76
+ Devtools = lazy(() => import("./Devtools/3GD3OJ5X.jsx"));
77
77
  this.#Component = Devtools;
78
78
  }
79
79
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/query-devtools",
3
- "version": "5.27.3",
3
+ "version": "5.27.6",
4
4
  "description": "Developer tools to interact with and visualize the TanStack Query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
@@ -50,7 +50,7 @@
50
50
  "superjson": "^1.13.3",
51
51
  "tsup-preset-solid": "^2.2.0",
52
52
  "vite-plugin-solid": "^2.9.1",
53
- "@tanstack/query-core": "5.27.3"
53
+ "@tanstack/query-core": "5.27.5"
54
54
  },
55
55
  "scripts": {
56
56
  "clean": "rimraf ./build && rimraf ./coverage",