@tanstack/query-devtools 5.91.0 → 5.91.1

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.
package/build/dev.cjs CHANGED
@@ -12155,6 +12155,7 @@ function Explorer(props) {
12155
12155
  });
12156
12156
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
12157
12157
  const currentDataPath = props.dataPath ?? [];
12158
+ const inputId = createUniqueId();
12158
12159
  return (() => {
12159
12160
  var _el$6 = _tmpl$72();
12160
12161
  insert(_el$6, createComponent(Show, {
@@ -12230,15 +12231,17 @@ function Explorer(props) {
12230
12231
  }
12231
12232
  }), null);
12232
12233
  createRenderEffect((_p$) => {
12233
- var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
12234
+ var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = expanded() ? "true" : "false", _v$6 = styles().info;
12234
12235
  _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
12235
12236
  _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
12236
- _v$5 !== _p$.a && className(_el$10, _p$.a = _v$5);
12237
+ _v$5 !== _p$.a && setAttribute(_el$8, "aria-expanded", _p$.a = _v$5);
12238
+ _v$6 !== _p$.o && className(_el$10, _p$.o = _v$6);
12237
12239
  return _p$;
12238
12240
  }, {
12239
12241
  e: void 0,
12240
12242
  t: void 0,
12241
- a: void 0
12243
+ a: void 0,
12244
+ o: void 0
12242
12245
  });
12243
12246
  return _el$7;
12244
12247
  })(), createComponent(Show, {
@@ -12343,9 +12346,9 @@ function Explorer(props) {
12343
12346
  }
12344
12347
  }), null);
12345
12348
  createRenderEffect((_p$) => {
12346
- var _v$0 = styles().entry, _v$1 = styles().expanderButton;
12347
- _v$0 !== _p$.e && className(_el$22, _p$.e = _v$0);
12348
- _v$1 !== _p$.t && className(_el$23, _p$.t = _v$1);
12349
+ var _v$1 = styles().entry, _v$10 = styles().expanderButton;
12350
+ _v$1 !== _p$.e && className(_el$22, _p$.e = _v$1);
12351
+ _v$10 !== _p$.t && className(_el$23, _p$.t = _v$10);
12349
12352
  return _p$;
12350
12353
  }, {
12351
12354
  e: void 0,
@@ -12368,6 +12371,7 @@ function Explorer(props) {
12368
12371
  },
12369
12372
  get children() {
12370
12373
  var _el$16 = _tmpl$110(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
12374
+ setAttribute(_el$17, "for", inputId);
12371
12375
  insert(_el$17, () => props.label, _el$18);
12372
12376
  insert(_el$16, createComponent(Show, {
12373
12377
  get when() {
@@ -12393,10 +12397,11 @@ function Explorer(props) {
12393
12397
  const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
12394
12398
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
12395
12399
  });
12400
+ setAttribute(_el$19, "id", inputId);
12396
12401
  createRenderEffect((_p$) => {
12397
- var _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
12398
- _v$6 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$6);
12399
- _v$7 !== _p$.t && className(_el$19, _p$.t = _v$7);
12402
+ var _v$7 = type() === "number" ? "number" : "text", _v$8 = clsx(styles().value, styles().editableInput);
12403
+ _v$7 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$7);
12404
+ _v$8 !== _p$.t && className(_el$19, _p$.t = _v$8);
12400
12405
  return _p$;
12401
12406
  }, {
12402
12407
  e: void 0,
@@ -12441,9 +12446,9 @@ function Explorer(props) {
12441
12446
  }
12442
12447
  }), null);
12443
12448
  createRenderEffect((_p$) => {
12444
- var _v$8 = styles().row, _v$9 = styles().label;
12445
- _v$8 !== _p$.e && className(_el$16, _p$.e = _v$8);
12446
- _v$9 !== _p$.t && className(_el$17, _p$.t = _v$9);
12449
+ var _v$9 = styles().row, _v$0 = styles().label;
12450
+ _v$9 !== _p$.e && className(_el$16, _p$.e = _v$9);
12451
+ _v$0 !== _p$.t && className(_el$17, _p$.t = _v$0);
12447
12452
  return _p$;
12448
12453
  }, {
12449
12454
  e: void 0,
@@ -12487,7 +12492,7 @@ var init_Explorer = __esm({
12487
12492
  _tmpl$82 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
12488
12493
  _tmpl$92 = /* @__PURE__ */ template(`<input>`);
12489
12494
  _tmpl$02 = /* @__PURE__ */ template(`<span>`);
12490
- _tmpl$110 = /* @__PURE__ */ template(`<div><span>:`);
12495
+ _tmpl$110 = /* @__PURE__ */ template(`<div><label>:`);
12491
12496
  _tmpl$102 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
12492
12497
  Expander = (props) => {
12493
12498
  const theme = useTheme();
@@ -12855,9 +12860,9 @@ var init_Devtools = __esm({
12855
12860
  _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
12856
12861
  _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
12857
12862
  _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
12858
- _tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12863
+ _tmpl$34 = /* @__PURE__ */ template(`<div><div>Query Details</div><div role=status aria-live=polite aria-atomic=true><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-observers-count><span>Observers:</span><span></span></div><div class=tsqd-query-details-last-updated><span>Last Updated:</span><span></span></div></div><div>Actions</div><div><button><span></span>Refetch</button><button><span></span>Invalidate</button><button><span></span>Reset</button><button><span></span>Remove</button><button><span></span> Loading</button></div><div>Data </div><div>Query Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12859
12864
  _tmpl$35 = /* @__PURE__ */ template(`<option>`);
12860
- _tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12865
+ _tmpl$36 = /* @__PURE__ */ template(`<div><div>Mutation Details</div><div role=status aria-live=polite aria-atomic=true><div class=tsqd-query-details-summary><pre><code></code></pre><span></span></div><div class=tsqd-query-details-last-updated><span>Submitted At:</span><span></span></div></div><div>Variables Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Context Details</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Data Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer"></div><div>Mutations Explorer</div><div class="tsqd-query-details-explorer-container tsqd-query-details-query-explorer">`);
12861
12866
  [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
12862
12867
  [selectedMutationId, setSelectedMutationId] = createSignal(null);
12863
12868
  [panelWidth, setPanelWidth] = createSignal(0);
@@ -13486,6 +13491,8 @@ var init_Devtools = __esm({
13486
13491
  get ["class"]() {
13487
13492
  return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
13488
13493
  },
13494
+ "aria-label": "Open settings menu",
13495
+ title: "Open settings menu",
13489
13496
  get children() {
13490
13497
  return createComponent(Settings, {});
13491
13498
  }
@@ -13532,51 +13539,48 @@ var init_Devtools = __esm({
13532
13539
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
13533
13540
  },
13534
13541
  get children() {
13535
- return [createComponent(dropdown_menu_exports.Item, {
13536
- onSelect: () => {
13537
- setDevtoolsPosition("top");
13538
- },
13539
- as: "button",
13540
- get ["class"]() {
13541
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
13542
- },
13543
- get children() {
13544
- return [_tmpl$111(), createComponent(ArrowUp, {})];
13545
- }
13546
- }), createComponent(dropdown_menu_exports.Item, {
13547
- onSelect: () => {
13548
- setDevtoolsPosition("bottom");
13549
- },
13550
- as: "button",
13551
- get ["class"]() {
13552
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
13553
- },
13554
- get children() {
13555
- return [_tmpl$103(), createComponent(ArrowDown, {})];
13556
- }
13557
- }), createComponent(dropdown_menu_exports.Item, {
13558
- onSelect: () => {
13559
- setDevtoolsPosition("left");
13560
- },
13561
- as: "button",
13562
- get ["class"]() {
13563
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
13564
- },
13565
- get children() {
13566
- return [_tmpl$112(), createComponent(ArrowLeft, {})];
13567
- }
13568
- }), createComponent(dropdown_menu_exports.Item, {
13569
- onSelect: () => {
13570
- setDevtoolsPosition("right");
13571
- },
13572
- as: "button",
13573
- get ["class"]() {
13574
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
13542
+ return createComponent(dropdown_menu_exports.RadioGroup, {
13543
+ "aria-label": "Position settings",
13544
+ get value() {
13545
+ return props.localStore.position;
13575
13546
  },
13547
+ onChange: (value) => setDevtoolsPosition(value),
13576
13548
  get children() {
13577
- return [_tmpl$122(), createComponent(ArrowRight, {})];
13549
+ return [createComponent(dropdown_menu_exports.RadioItem, {
13550
+ value: "top",
13551
+ get ["class"]() {
13552
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
13553
+ },
13554
+ get children() {
13555
+ return [_tmpl$111(), createComponent(ArrowUp, {})];
13556
+ }
13557
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13558
+ value: "bottom",
13559
+ get ["class"]() {
13560
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
13561
+ },
13562
+ get children() {
13563
+ return [_tmpl$103(), createComponent(ArrowDown, {})];
13564
+ }
13565
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13566
+ value: "left",
13567
+ get ["class"]() {
13568
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
13569
+ },
13570
+ get children() {
13571
+ return [_tmpl$112(), createComponent(ArrowLeft, {})];
13572
+ }
13573
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13574
+ value: "right",
13575
+ get ["class"]() {
13576
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
13577
+ },
13578
+ get children() {
13579
+ return [_tmpl$122(), createComponent(ArrowRight, {})];
13580
+ }
13581
+ })];
13578
13582
  }
13579
- })];
13583
+ });
13580
13584
  }
13581
13585
  });
13582
13586
  }
@@ -13607,40 +13611,42 @@ var init_Devtools = __esm({
13607
13611
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
13608
13612
  },
13609
13613
  get children() {
13610
- return [createComponent(dropdown_menu_exports.Item, {
13611
- onSelect: () => {
13612
- props.setLocalStore("theme_preference", "light");
13613
- },
13614
- as: "button",
13615
- get ["class"]() {
13616
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
13617
- },
13618
- get children() {
13619
- return [_tmpl$142(), createComponent(Sun, {})];
13620
- }
13621
- }), createComponent(dropdown_menu_exports.Item, {
13622
- onSelect: () => {
13623
- props.setLocalStore("theme_preference", "dark");
13614
+ return createComponent(dropdown_menu_exports.RadioGroup, {
13615
+ get value() {
13616
+ return props.localStore.theme_preference;
13624
13617
  },
13625
- as: "button",
13626
- get ["class"]() {
13627
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
13618
+ onChange: (value) => {
13619
+ props.setLocalStore("theme_preference", value);
13628
13620
  },
13621
+ "aria-label": "Theme preference",
13629
13622
  get children() {
13630
- return [_tmpl$152(), createComponent(Moon, {})];
13631
- }
13632
- }), createComponent(dropdown_menu_exports.Item, {
13633
- onSelect: () => {
13634
- props.setLocalStore("theme_preference", "system");
13635
- },
13636
- as: "button",
13637
- get ["class"]() {
13638
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
13639
- },
13640
- get children() {
13641
- return [_tmpl$162(), createComponent(Monitor, {})];
13623
+ return [createComponent(dropdown_menu_exports.RadioItem, {
13624
+ value: "light",
13625
+ get ["class"]() {
13626
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
13627
+ },
13628
+ get children() {
13629
+ return [_tmpl$142(), createComponent(Sun, {})];
13630
+ }
13631
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13632
+ value: "dark",
13633
+ get ["class"]() {
13634
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
13635
+ },
13636
+ get children() {
13637
+ return [_tmpl$152(), createComponent(Moon, {})];
13638
+ }
13639
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13640
+ value: "system",
13641
+ get ["class"]() {
13642
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
13643
+ },
13644
+ get children() {
13645
+ return [_tmpl$162(), createComponent(Monitor, {})];
13646
+ }
13647
+ })];
13642
13648
  }
13643
- })];
13649
+ });
13644
13650
  }
13645
13651
  });
13646
13652
  }
@@ -13668,44 +13674,47 @@ var init_Devtools = __esm({
13668
13674
  get ["class"]() {
13669
13675
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
13670
13676
  },
13677
+ "aria-label": "Hide disabled queries setting",
13671
13678
  get children() {
13672
- return [createComponent(dropdown_menu_exports.Item, {
13673
- onSelect: () => {
13674
- props.setLocalStore("hideDisabledQueries", "false");
13675
- },
13676
- as: "button",
13677
- get ["class"]() {
13678
- return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
13679
+ return createComponent(dropdown_menu_exports.RadioGroup, {
13680
+ get value() {
13681
+ return props.localStore.hideDisabledQueries;
13679
13682
  },
13683
+ onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
13680
13684
  get children() {
13681
- return [_tmpl$182(), createComponent(Show, {
13682
- get when() {
13683
- return props.localStore.hideDisabledQueries !== "true";
13685
+ return [createComponent(dropdown_menu_exports.RadioItem, {
13686
+ value: "false",
13687
+ get ["class"]() {
13688
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
13684
13689
  },
13685
13690
  get children() {
13686
- return createComponent(CheckCircle, {});
13691
+ return [_tmpl$182(), createComponent(Show, {
13692
+ get when() {
13693
+ return props.localStore.hideDisabledQueries !== "true";
13694
+ },
13695
+ get children() {
13696
+ return createComponent(CheckCircle, {});
13697
+ }
13698
+ })];
13687
13699
  }
13688
- })];
13689
- }
13690
- }), createComponent(dropdown_menu_exports.Item, {
13691
- onSelect: () => {
13692
- props.setLocalStore("hideDisabledQueries", "true");
13693
- },
13694
- as: "button",
13695
- get ["class"]() {
13696
- return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
13697
- },
13698
- get children() {
13699
- return [_tmpl$192(), createComponent(Show, {
13700
- get when() {
13701
- return props.localStore.hideDisabledQueries === "true";
13700
+ }), createComponent(dropdown_menu_exports.RadioItem, {
13701
+ value: "true",
13702
+ get ["class"]() {
13703
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
13702
13704
  },
13703
13705
  get children() {
13704
- return createComponent(CheckCircle, {});
13706
+ return [_tmpl$192(), createComponent(Show, {
13707
+ get when() {
13708
+ return props.localStore.hideDisabledQueries === "true";
13709
+ },
13710
+ get children() {
13711
+ return createComponent(CheckCircle, {});
13712
+ }
13713
+ })];
13705
13714
  }
13706
13715
  })];
13707
13716
  }
13708
- })];
13717
+ });
13709
13718
  }
13710
13719
  });
13711
13720
  }
@@ -15778,15 +15787,15 @@ var init_Devtools = __esm({
15778
15787
  outline-offset: 2px;
15779
15788
  outline: 2px solid ${colors.blue[800]};
15780
15789
  }
15781
- `,
15782
- themeSelectedButton: css`
15783
- background-color: ${t2(colors.purple[100], colors.purple[900])};
15784
- color: ${t2(colors.purple[700], colors.purple[300])};
15785
- & svg {
15786
- color: ${t2(colors.purple[700], colors.purple[300])};
15787
- }
15788
- &:hover {
15790
+ &[data-checked] {
15789
15791
  background-color: ${t2(colors.purple[100], colors.purple[900])};
15792
+ color: ${t2(colors.purple[700], colors.purple[300])};
15793
+ & svg {
15794
+ color: ${t2(colors.purple[700], colors.purple[300])};
15795
+ }
15796
+ &:hover {
15797
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
15798
+ }
15790
15799
  }
15791
15800
  `,
15792
15801
  viewToggle: css`
package/build/dev.js CHANGED
@@ -80,7 +80,7 @@ var TanstackQueryDevtools = class {
80
80
  if (this.#Component) {
81
81
  Devtools = this.#Component;
82
82
  } else {
83
- Devtools = lazy(() => import('./DevtoolsComponent/TO44TVBA.js'));
83
+ Devtools = lazy(() => import('./DevtoolsComponent/7HGFFDPC.js'));
84
84
  this.#Component = Devtools;
85
85
  }
86
86
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);
@@ -220,7 +220,7 @@ var TanstackQueryDevtoolsPanel = class {
220
220
  if (this.#Component) {
221
221
  Devtools = this.#Component;
222
222
  } else {
223
- Devtools = lazy(() => import('./DevtoolsPanelComponent/YK4QRCEX.js'));
223
+ Devtools = lazy(() => import('./DevtoolsPanelComponent/ONXD5SSW.js'));
224
224
  this.#Component = Devtools;
225
225
  }
226
226
  setupStyleSheet(this.#styleNonce, this.#shadowDOMTarget);