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