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