@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.
@@ -8785,7 +8785,7 @@ var _tmpl$72 = /* @__PURE__ */ template(`<div>`);
8785
8785
  var _tmpl$82 = /* @__PURE__ */ template(`<div><button> <span></span> <span> `);
8786
8786
  var _tmpl$92 = /* @__PURE__ */ template(`<input>`);
8787
8787
  var _tmpl$02 = /* @__PURE__ */ template(`<span>`);
8788
- var _tmpl$110 = /* @__PURE__ */ template(`<div><span>:`);
8788
+ var _tmpl$110 = /* @__PURE__ */ template(`<div><label>:`);
8789
8789
  var _tmpl$102 = /* @__PURE__ */ template(`<div><div><button> [<!>...<!>]`);
8790
8790
  function chunkArray(array, size3) {
8791
8791
  let i2 = 0;
@@ -9007,6 +9007,7 @@ function Explorer(props) {
9007
9007
  });
9008
9008
  const subEntryPages = createMemo(() => chunkArray(subEntries(), 100));
9009
9009
  const currentDataPath = props.dataPath ?? [];
9010
+ const inputId = createUniqueId();
9010
9011
  return (() => {
9011
9012
  var _el$6 = _tmpl$72();
9012
9013
  insert(_el$6, createComponent(Show, {
@@ -9082,15 +9083,17 @@ function Explorer(props) {
9082
9083
  }
9083
9084
  }), null);
9084
9085
  createRenderEffect((_p$) => {
9085
- var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = styles().info;
9086
+ var _v$3 = styles().expanderButtonContainer, _v$4 = styles().expanderButton, _v$5 = expanded() ? "true" : "false", _v$6 = styles().info;
9086
9087
  _v$3 !== _p$.e && className(_el$7, _p$.e = _v$3);
9087
9088
  _v$4 !== _p$.t && className(_el$8, _p$.t = _v$4);
9088
- _v$5 !== _p$.a && className(_el$10, _p$.a = _v$5);
9089
+ _v$5 !== _p$.a && setAttribute(_el$8, "aria-expanded", _p$.a = _v$5);
9090
+ _v$6 !== _p$.o && className(_el$10, _p$.o = _v$6);
9089
9091
  return _p$;
9090
9092
  }, {
9091
9093
  e: void 0,
9092
9094
  t: void 0,
9093
- a: void 0
9095
+ a: void 0,
9096
+ o: void 0
9094
9097
  });
9095
9098
  return _el$7;
9096
9099
  })(), createComponent(Show, {
@@ -9195,9 +9198,9 @@ function Explorer(props) {
9195
9198
  }
9196
9199
  }), null);
9197
9200
  createRenderEffect((_p$) => {
9198
- var _v$0 = styles().entry, _v$1 = styles().expanderButton;
9199
- _v$0 !== _p$.e && className(_el$22, _p$.e = _v$0);
9200
- _v$1 !== _p$.t && className(_el$23, _p$.t = _v$1);
9201
+ var _v$1 = styles().entry, _v$10 = styles().expanderButton;
9202
+ _v$1 !== _p$.e && className(_el$22, _p$.e = _v$1);
9203
+ _v$10 !== _p$.t && className(_el$23, _p$.t = _v$10);
9201
9204
  return _p$;
9202
9205
  }, {
9203
9206
  e: void 0,
@@ -9220,6 +9223,7 @@ function Explorer(props) {
9220
9223
  },
9221
9224
  get children() {
9222
9225
  var _el$16 = _tmpl$110(), _el$17 = _el$16.firstChild, _el$18 = _el$17.firstChild;
9226
+ setAttribute(_el$17, "for", inputId);
9223
9227
  insert(_el$17, () => props.label, _el$18);
9224
9228
  insert(_el$16, createComponent(Show, {
9225
9229
  get when() {
@@ -9245,10 +9249,11 @@ function Explorer(props) {
9245
9249
  const newData = updateNestedDataByPath(oldData, currentDataPath, type() === "number" ? changeEvent.target.valueAsNumber : changeEvent.target.value);
9246
9250
  queryClient.setQueryData(props.activeQuery.queryKey, newData);
9247
9251
  });
9252
+ setAttribute(_el$19, "id", inputId);
9248
9253
  createRenderEffect((_p$) => {
9249
- var _v$6 = type() === "number" ? "number" : "text", _v$7 = clsx(styles().value, styles().editableInput);
9250
- _v$6 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$6);
9251
- _v$7 !== _p$.t && className(_el$19, _p$.t = _v$7);
9254
+ var _v$7 = type() === "number" ? "number" : "text", _v$8 = clsx(styles().value, styles().editableInput);
9255
+ _v$7 !== _p$.e && setAttribute(_el$19, "type", _p$.e = _v$7);
9256
+ _v$8 !== _p$.t && className(_el$19, _p$.t = _v$8);
9252
9257
  return _p$;
9253
9258
  }, {
9254
9259
  e: void 0,
@@ -9293,9 +9298,9 @@ function Explorer(props) {
9293
9298
  }
9294
9299
  }), null);
9295
9300
  createRenderEffect((_p$) => {
9296
- var _v$8 = styles().row, _v$9 = styles().label;
9297
- _v$8 !== _p$.e && className(_el$16, _p$.e = _v$8);
9298
- _v$9 !== _p$.t && className(_el$17, _p$.t = _v$9);
9301
+ var _v$9 = styles().row, _v$0 = styles().label;
9302
+ _v$9 !== _p$.e && className(_el$16, _p$.e = _v$9);
9303
+ _v$0 !== _p$.t && className(_el$17, _p$.t = _v$0);
9299
9304
  return _p$;
9300
9305
  }, {
9301
9306
  e: void 0,
@@ -9483,9 +9488,9 @@ var _tmpl$30 = /* @__PURE__ */ template(`<button><span></span> Error`);
9483
9488
  var _tmpl$31 = /* @__PURE__ */ template(`<div><span></span>Trigger Error<select><option value=""disabled selected>`);
9484
9489
  var _tmpl$322 = /* @__PURE__ */ template(`<div class="tsqd-query-details-explorer-container tsqd-query-details-data-explorer">`);
9485
9490
  var _tmpl$332 = /* @__PURE__ */ template(`<form><textarea name=data></textarea><div><span></span><div><button type=button>Cancel</button><button>Save`);
9486
- var _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">`);
9491
+ var _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">`);
9487
9492
  var _tmpl$35 = /* @__PURE__ */ template(`<option>`);
9488
- var _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">`);
9493
+ var _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">`);
9489
9494
  var [selectedQueryHash, setSelectedQueryHash] = createSignal(null);
9490
9495
  var [selectedMutationId, setSelectedMutationId] = createSignal(null);
9491
9496
  var [panelWidth, setPanelWidth] = createSignal(0);
@@ -10114,6 +10119,8 @@ var ContentView = (props) => {
10114
10119
  get ["class"]() {
10115
10120
  return clsx(styles().actionsBtn, "tsqd-actions-btn", "tsqd-action-settings");
10116
10121
  },
10122
+ "aria-label": "Open settings menu",
10123
+ title: "Open settings menu",
10117
10124
  get children() {
10118
10125
  return createComponent(Settings, {});
10119
10126
  }
@@ -10160,51 +10167,48 @@ var ContentView = (props) => {
10160
10167
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10161
10168
  },
10162
10169
  get children() {
10163
- return [createComponent(dropdown_menu_exports.Item, {
10164
- onSelect: () => {
10165
- setDevtoolsPosition("top");
10166
- },
10167
- as: "button",
10168
- get ["class"]() {
10169
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10170
- },
10171
- get children() {
10172
- return [_tmpl$111(), createComponent(ArrowUp, {})];
10173
- }
10174
- }), createComponent(dropdown_menu_exports.Item, {
10175
- onSelect: () => {
10176
- setDevtoolsPosition("bottom");
10177
- },
10178
- as: "button",
10179
- get ["class"]() {
10180
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10181
- },
10182
- get children() {
10183
- return [_tmpl$103(), createComponent(ArrowDown, {})];
10184
- }
10185
- }), createComponent(dropdown_menu_exports.Item, {
10186
- onSelect: () => {
10187
- setDevtoolsPosition("left");
10188
- },
10189
- as: "button",
10190
- get ["class"]() {
10191
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10192
- },
10193
- get children() {
10194
- return [_tmpl$112(), createComponent(ArrowLeft, {})];
10195
- }
10196
- }), createComponent(dropdown_menu_exports.Item, {
10197
- onSelect: () => {
10198
- setDevtoolsPosition("right");
10199
- },
10200
- as: "button",
10201
- get ["class"]() {
10202
- return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10170
+ return createComponent(dropdown_menu_exports.RadioGroup, {
10171
+ "aria-label": "Position settings",
10172
+ get value() {
10173
+ return props.localStore.position;
10203
10174
  },
10175
+ onChange: (value) => setDevtoolsPosition(value),
10204
10176
  get children() {
10205
- return [_tmpl$122(), createComponent(ArrowRight, {})];
10177
+ return [createComponent(dropdown_menu_exports.RadioItem, {
10178
+ value: "top",
10179
+ get ["class"]() {
10180
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10181
+ },
10182
+ get children() {
10183
+ return [_tmpl$111(), createComponent(ArrowUp, {})];
10184
+ }
10185
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10186
+ value: "bottom",
10187
+ get ["class"]() {
10188
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10189
+ },
10190
+ get children() {
10191
+ return [_tmpl$103(), createComponent(ArrowDown, {})];
10192
+ }
10193
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10194
+ value: "left",
10195
+ get ["class"]() {
10196
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10197
+ },
10198
+ get children() {
10199
+ return [_tmpl$112(), createComponent(ArrowLeft, {})];
10200
+ }
10201
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10202
+ value: "right",
10203
+ get ["class"]() {
10204
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-right");
10205
+ },
10206
+ get children() {
10207
+ return [_tmpl$122(), createComponent(ArrowRight, {})];
10208
+ }
10209
+ })];
10206
10210
  }
10207
- })];
10211
+ });
10208
10212
  }
10209
10213
  });
10210
10214
  }
@@ -10235,40 +10239,42 @@ var ContentView = (props) => {
10235
10239
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10236
10240
  },
10237
10241
  get children() {
10238
- return [createComponent(dropdown_menu_exports.Item, {
10239
- onSelect: () => {
10240
- props.setLocalStore("theme_preference", "light");
10241
- },
10242
- as: "button",
10243
- get ["class"]() {
10244
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "light" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10245
- },
10246
- get children() {
10247
- return [_tmpl$142(), createComponent(Sun, {})];
10248
- }
10249
- }), createComponent(dropdown_menu_exports.Item, {
10250
- onSelect: () => {
10251
- props.setLocalStore("theme_preference", "dark");
10242
+ return createComponent(dropdown_menu_exports.RadioGroup, {
10243
+ get value() {
10244
+ return props.localStore.theme_preference;
10252
10245
  },
10253
- as: "button",
10254
- get ["class"]() {
10255
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "dark" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10246
+ onChange: (value) => {
10247
+ props.setLocalStore("theme_preference", value);
10256
10248
  },
10249
+ "aria-label": "Theme preference",
10257
10250
  get children() {
10258
- return [_tmpl$152(), createComponent(Moon, {})];
10259
- }
10260
- }), createComponent(dropdown_menu_exports.Item, {
10261
- onSelect: () => {
10262
- props.setLocalStore("theme_preference", "system");
10263
- },
10264
- as: "button",
10265
- get ["class"]() {
10266
- return clsx(styles().settingsSubButton, props.localStore.theme_preference === "system" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10267
- },
10268
- get children() {
10269
- return [_tmpl$162(), createComponent(Monitor, {})];
10251
+ return [createComponent(dropdown_menu_exports.RadioItem, {
10252
+ value: "light",
10253
+ get ["class"]() {
10254
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-top");
10255
+ },
10256
+ get children() {
10257
+ return [_tmpl$142(), createComponent(Sun, {})];
10258
+ }
10259
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10260
+ value: "dark",
10261
+ get ["class"]() {
10262
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-bottom");
10263
+ },
10264
+ get children() {
10265
+ return [_tmpl$152(), createComponent(Moon, {})];
10266
+ }
10267
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10268
+ value: "system",
10269
+ get ["class"]() {
10270
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-left");
10271
+ },
10272
+ get children() {
10273
+ return [_tmpl$162(), createComponent(Monitor, {})];
10274
+ }
10275
+ })];
10270
10276
  }
10271
- })];
10277
+ });
10272
10278
  }
10273
10279
  });
10274
10280
  }
@@ -10296,44 +10302,47 @@ var ContentView = (props) => {
10296
10302
  get ["class"]() {
10297
10303
  return clsx(styles().settingsMenu, "tsqd-settings-submenu");
10298
10304
  },
10305
+ "aria-label": "Hide disabled queries setting",
10299
10306
  get children() {
10300
- return [createComponent(dropdown_menu_exports.Item, {
10301
- onSelect: () => {
10302
- props.setLocalStore("hideDisabledQueries", "false");
10303
- },
10304
- as: "button",
10305
- get ["class"]() {
10306
- return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries !== "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
10307
+ return createComponent(dropdown_menu_exports.RadioGroup, {
10308
+ get value() {
10309
+ return props.localStore.hideDisabledQueries;
10307
10310
  },
10311
+ onChange: (value) => props.setLocalStore("hideDisabledQueries", value),
10308
10312
  get children() {
10309
- return [_tmpl$182(), createComponent(Show, {
10310
- get when() {
10311
- return props.localStore.hideDisabledQueries !== "true";
10313
+ return [createComponent(dropdown_menu_exports.RadioItem, {
10314
+ value: "false",
10315
+ get ["class"]() {
10316
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-show");
10312
10317
  },
10313
10318
  get children() {
10314
- return createComponent(CheckCircle, {});
10319
+ return [_tmpl$182(), createComponent(Show, {
10320
+ get when() {
10321
+ return props.localStore.hideDisabledQueries !== "true";
10322
+ },
10323
+ get children() {
10324
+ return createComponent(CheckCircle, {});
10325
+ }
10326
+ })];
10315
10327
  }
10316
- })];
10317
- }
10318
- }), createComponent(dropdown_menu_exports.Item, {
10319
- onSelect: () => {
10320
- props.setLocalStore("hideDisabledQueries", "true");
10321
- },
10322
- as: "button",
10323
- get ["class"]() {
10324
- return clsx(styles().settingsSubButton, props.localStore.hideDisabledQueries === "true" && styles().themeSelectedButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
10325
- },
10326
- get children() {
10327
- return [_tmpl$192(), createComponent(Show, {
10328
- get when() {
10329
- return props.localStore.hideDisabledQueries === "true";
10328
+ }), createComponent(dropdown_menu_exports.RadioItem, {
10329
+ value: "true",
10330
+ get ["class"]() {
10331
+ return clsx(styles().settingsSubButton, "tsqd-settings-menu-position-btn", "tsqd-settings-menu-position-btn-hide");
10330
10332
  },
10331
10333
  get children() {
10332
- return createComponent(CheckCircle, {});
10334
+ return [_tmpl$192(), createComponent(Show, {
10335
+ get when() {
10336
+ return props.localStore.hideDisabledQueries === "true";
10337
+ },
10338
+ get children() {
10339
+ return createComponent(CheckCircle, {});
10340
+ }
10341
+ })];
10333
10342
  }
10334
10343
  })];
10335
10344
  }
10336
- })];
10345
+ });
10337
10346
  }
10338
10347
  });
10339
10348
  }
@@ -12406,15 +12415,15 @@ var stylesFactory2 = (theme, css) => {
12406
12415
  outline-offset: 2px;
12407
12416
  outline: 2px solid ${colors.blue[800]};
12408
12417
  }
12409
- `,
12410
- themeSelectedButton: css`
12411
- background-color: ${t2(colors.purple[100], colors.purple[900])};
12412
- color: ${t2(colors.purple[700], colors.purple[300])};
12413
- & svg {
12414
- color: ${t2(colors.purple[700], colors.purple[300])};
12415
- }
12416
- &:hover {
12418
+ &[data-checked] {
12417
12419
  background-color: ${t2(colors.purple[100], colors.purple[900])};
12420
+ color: ${t2(colors.purple[700], colors.purple[300])};
12421
+ & svg {
12422
+ color: ${t2(colors.purple[700], colors.purple[300])};
12423
+ }
12424
+ &:hover {
12425
+ background-color: ${t2(colors.purple[100], colors.purple[900])};
12426
+ }
12418
12427
  }
12419
12428
  `,
12420
12429
  viewToggle: css`