@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/src/Devtools.tsx CHANGED
@@ -1000,7 +1000,7 @@ export const ContentView: Component<ContentViewProps> = (props) => {
1000
1000
  'tsqd-action-open-pip',
1001
1001
  )}
1002
1002
  aria-label="Open in picture-in-picture mode"
1003
- title={`Open in picture-in-picture mode`}
1003
+ title="Open in picture-in-picture mode"
1004
1004
  >
1005
1005
  <PiPIcon />
1006
1006
  </button>
@@ -1013,6 +1013,8 @@ export const ContentView: Component<ContentViewProps> = (props) => {
1013
1013
  'tsqd-actions-btn',
1014
1014
  'tsqd-action-settings',
1015
1015
  )}
1016
+ aria-label="Open settings menu"
1017
+ title="Open settings menu"
1016
1018
  >
1017
1019
  <Settings />
1018
1020
  </DropdownMenu.Trigger>
@@ -1061,62 +1063,58 @@ export const ContentView: Component<ContentViewProps> = (props) => {
1061
1063
  'tsqd-settings-submenu',
1062
1064
  )}
1063
1065
  >
1064
- <DropdownMenu.Item
1065
- onSelect={() => {
1066
- setDevtoolsPosition('top')
1067
- }}
1068
- as="button"
1069
- class={cx(
1070
- styles().settingsSubButton,
1071
- 'tsqd-settings-menu-position-btn',
1072
- 'tsqd-settings-menu-position-btn-top',
1073
- )}
1074
- >
1075
- <span>Top</span>
1076
- <ArrowUp />
1077
- </DropdownMenu.Item>
1078
- <DropdownMenu.Item
1079
- onSelect={() => {
1080
- setDevtoolsPosition('bottom')
1081
- }}
1082
- as="button"
1083
- class={cx(
1084
- styles().settingsSubButton,
1085
- 'tsqd-settings-menu-position-btn',
1086
- 'tsqd-settings-menu-position-btn-bottom',
1087
- )}
1088
- >
1089
- <span>Bottom</span>
1090
- <ArrowDown />
1091
- </DropdownMenu.Item>
1092
- <DropdownMenu.Item
1093
- onSelect={() => {
1094
- setDevtoolsPosition('left')
1095
- }}
1096
- as="button"
1097
- class={cx(
1098
- styles().settingsSubButton,
1099
- 'tsqd-settings-menu-position-btn',
1100
- 'tsqd-settings-menu-position-btn-left',
1101
- )}
1102
- >
1103
- <span>Left</span>
1104
- <ArrowLeft />
1105
- </DropdownMenu.Item>
1106
- <DropdownMenu.Item
1107
- onSelect={() => {
1108
- setDevtoolsPosition('right')
1109
- }}
1110
- as="button"
1111
- class={cx(
1112
- styles().settingsSubButton,
1113
- 'tsqd-settings-menu-position-btn',
1114
- 'tsqd-settings-menu-position-btn-right',
1115
- )}
1066
+ <DropdownMenu.RadioGroup
1067
+ aria-label="Position settings"
1068
+ value={props.localStore.position}
1069
+ onChange={(value) =>
1070
+ setDevtoolsPosition(value as DevtoolsPosition)
1071
+ }
1116
1072
  >
1117
- <span>Right</span>
1118
- <ArrowRight />
1119
- </DropdownMenu.Item>
1073
+ <DropdownMenu.RadioItem
1074
+ value="top"
1075
+ class={cx(
1076
+ styles().settingsSubButton,
1077
+ 'tsqd-settings-menu-position-btn',
1078
+ 'tsqd-settings-menu-position-btn-top',
1079
+ )}
1080
+ >
1081
+ <span>Top</span>
1082
+ <ArrowUp />
1083
+ </DropdownMenu.RadioItem>
1084
+ <DropdownMenu.RadioItem
1085
+ value="bottom"
1086
+ class={cx(
1087
+ styles().settingsSubButton,
1088
+ 'tsqd-settings-menu-position-btn',
1089
+ 'tsqd-settings-menu-position-btn-bottom',
1090
+ )}
1091
+ >
1092
+ <span>Bottom</span>
1093
+ <ArrowDown />
1094
+ </DropdownMenu.RadioItem>
1095
+ <DropdownMenu.RadioItem
1096
+ value="left"
1097
+ class={cx(
1098
+ styles().settingsSubButton,
1099
+ 'tsqd-settings-menu-position-btn',
1100
+ 'tsqd-settings-menu-position-btn-left',
1101
+ )}
1102
+ >
1103
+ <span>Left</span>
1104
+ <ArrowLeft />
1105
+ </DropdownMenu.RadioItem>
1106
+ <DropdownMenu.RadioItem
1107
+ value="right"
1108
+ class={cx(
1109
+ styles().settingsSubButton,
1110
+ 'tsqd-settings-menu-position-btn',
1111
+ 'tsqd-settings-menu-position-btn-right',
1112
+ )}
1113
+ >
1114
+ <span>Right</span>
1115
+ <ArrowRight />
1116
+ </DropdownMenu.RadioItem>
1117
+ </DropdownMenu.RadioGroup>
1120
1118
  </DropdownMenu.SubContent>
1121
1119
  </DropdownMenu.Portal>
1122
1120
  </DropdownMenu.Sub>
@@ -1146,54 +1144,47 @@ export const ContentView: Component<ContentViewProps> = (props) => {
1146
1144
  'tsqd-settings-submenu',
1147
1145
  )}
1148
1146
  >
1149
- <DropdownMenu.Item
1150
- onSelect={() => {
1151
- props.setLocalStore('theme_preference', 'light')
1152
- }}
1153
- as="button"
1154
- class={cx(
1155
- styles().settingsSubButton,
1156
- props.localStore.theme_preference === 'light' &&
1157
- styles().themeSelectedButton,
1158
- 'tsqd-settings-menu-position-btn',
1159
- 'tsqd-settings-menu-position-btn-top',
1160
- )}
1161
- >
1162
- <span>Light</span>
1163
- <Sun />
1164
- </DropdownMenu.Item>
1165
- <DropdownMenu.Item
1166
- onSelect={() => {
1167
- props.setLocalStore('theme_preference', 'dark')
1147
+ <DropdownMenu.RadioGroup
1148
+ value={props.localStore.theme_preference}
1149
+ onChange={(value) => {
1150
+ props.setLocalStore('theme_preference', value)
1168
1151
  }}
1169
- as="button"
1170
- class={cx(
1171
- styles().settingsSubButton,
1172
- props.localStore.theme_preference === 'dark' &&
1173
- styles().themeSelectedButton,
1174
- 'tsqd-settings-menu-position-btn',
1175
- 'tsqd-settings-menu-position-btn-bottom',
1176
- )}
1152
+ aria-label="Theme preference"
1177
1153
  >
1178
- <span>Dark</span>
1179
- <Moon />
1180
- </DropdownMenu.Item>
1181
- <DropdownMenu.Item
1182
- onSelect={() => {
1183
- props.setLocalStore('theme_preference', 'system')
1184
- }}
1185
- as="button"
1186
- class={cx(
1187
- styles().settingsSubButton,
1188
- props.localStore.theme_preference === 'system' &&
1189
- styles().themeSelectedButton,
1190
- 'tsqd-settings-menu-position-btn',
1191
- 'tsqd-settings-menu-position-btn-left',
1192
- )}
1193
- >
1194
- <span>System</span>
1195
- <Monitor />
1196
- </DropdownMenu.Item>
1154
+ <DropdownMenu.RadioItem
1155
+ value="light"
1156
+ class={cx(
1157
+ styles().settingsSubButton,
1158
+ 'tsqd-settings-menu-position-btn',
1159
+ 'tsqd-settings-menu-position-btn-top',
1160
+ )}
1161
+ >
1162
+ <span>Light</span>
1163
+ <Sun />
1164
+ </DropdownMenu.RadioItem>
1165
+ <DropdownMenu.RadioItem
1166
+ value="dark"
1167
+ class={cx(
1168
+ styles().settingsSubButton,
1169
+ 'tsqd-settings-menu-position-btn',
1170
+ 'tsqd-settings-menu-position-btn-bottom',
1171
+ )}
1172
+ >
1173
+ <span>Dark</span>
1174
+ <Moon />
1175
+ </DropdownMenu.RadioItem>
1176
+ <DropdownMenu.RadioItem
1177
+ value="system"
1178
+ class={cx(
1179
+ styles().settingsSubButton,
1180
+ 'tsqd-settings-menu-position-btn',
1181
+ 'tsqd-settings-menu-position-btn-left',
1182
+ )}
1183
+ >
1184
+ <span>System</span>
1185
+ <Monitor />
1186
+ </DropdownMenu.RadioItem>
1187
+ </DropdownMenu.RadioGroup>
1197
1188
  </DropdownMenu.SubContent>
1198
1189
  </DropdownMenu.Portal>
1199
1190
  </DropdownMenu.Sub>
@@ -1221,51 +1212,49 @@ export const ContentView: Component<ContentViewProps> = (props) => {
1221
1212
  styles().settingsMenu,
1222
1213
  'tsqd-settings-submenu',
1223
1214
  )}
1215
+ aria-label="Hide disabled queries setting"
1224
1216
  >
1225
- <DropdownMenu.Item
1226
- onSelect={() => {
1227
- props.setLocalStore('hideDisabledQueries', 'false')
1228
- }}
1229
- as="button"
1230
- class={cx(
1231
- styles().settingsSubButton,
1232
- props.localStore.hideDisabledQueries !== 'true' &&
1233
- styles().themeSelectedButton,
1234
- 'tsqd-settings-menu-position-btn',
1235
- 'tsqd-settings-menu-position-btn-show',
1236
- )}
1217
+ <DropdownMenu.RadioGroup
1218
+ value={props.localStore.hideDisabledQueries}
1219
+ onChange={(value) =>
1220
+ props.setLocalStore('hideDisabledQueries', value)
1221
+ }
1237
1222
  >
1238
- <span>Show</span>
1239
- <Show
1240
- when={
1241
- props.localStore.hideDisabledQueries !== 'true'
1242
- }
1223
+ <DropdownMenu.RadioItem
1224
+ value="false"
1225
+ class={cx(
1226
+ styles().settingsSubButton,
1227
+ 'tsqd-settings-menu-position-btn',
1228
+ 'tsqd-settings-menu-position-btn-show',
1229
+ )}
1243
1230
  >
1244
- <CheckCircle />
1245
- </Show>
1246
- </DropdownMenu.Item>
1247
- <DropdownMenu.Item
1248
- onSelect={() => {
1249
- props.setLocalStore('hideDisabledQueries', 'true')
1250
- }}
1251
- as="button"
1252
- class={cx(
1253
- styles().settingsSubButton,
1254
- props.localStore.hideDisabledQueries === 'true' &&
1255
- styles().themeSelectedButton,
1256
- 'tsqd-settings-menu-position-btn',
1257
- 'tsqd-settings-menu-position-btn-hide',
1258
- )}
1259
- >
1260
- <span>Hide</span>
1261
- <Show
1262
- when={
1263
- props.localStore.hideDisabledQueries === 'true'
1264
- }
1231
+ <span>Show</span>
1232
+ <Show
1233
+ when={
1234
+ props.localStore.hideDisabledQueries !== 'true'
1235
+ }
1236
+ >
1237
+ <CheckCircle />
1238
+ </Show>
1239
+ </DropdownMenu.RadioItem>
1240
+ <DropdownMenu.RadioItem
1241
+ value="true"
1242
+ class={cx(
1243
+ styles().settingsSubButton,
1244
+ 'tsqd-settings-menu-position-btn',
1245
+ 'tsqd-settings-menu-position-btn-hide',
1246
+ )}
1265
1247
  >
1266
- <CheckCircle />
1267
- </Show>
1268
- </DropdownMenu.Item>
1248
+ <span>Hide</span>
1249
+ <Show
1250
+ when={
1251
+ props.localStore.hideDisabledQueries === 'true'
1252
+ }
1253
+ >
1254
+ <CheckCircle />
1255
+ </Show>
1256
+ </DropdownMenu.RadioItem>
1257
+ </DropdownMenu.RadioGroup>
1269
1258
  </DropdownMenu.SubContent>
1270
1259
  </DropdownMenu.Portal>
1271
1260
  </DropdownMenu.Sub>
@@ -1961,6 +1950,9 @@ const QueryDetails = () => {
1961
1950
  styles().detailsBody,
1962
1951
  'tsqd-query-details-summary-container',
1963
1952
  )}
1953
+ role="status"
1954
+ aria-live="polite"
1955
+ aria-atomic="true"
1964
1956
  >
1965
1957
  <div class="tsqd-query-details-summary">
1966
1958
  <pre>
@@ -2372,6 +2364,9 @@ const MutationDetails = () => {
2372
2364
  styles().detailsBody,
2373
2365
  'tsqd-query-details-summary-container',
2374
2366
  )}
2367
+ role="status"
2368
+ aria-live="polite"
2369
+ aria-atomic="true"
2375
2370
  >
2376
2371
  <div class="tsqd-query-details-summary">
2377
2372
  <pre>
@@ -3521,15 +3516,15 @@ const stylesFactory = (
3521
3516
  outline-offset: 2px;
3522
3517
  outline: 2px solid ${colors.blue[800]};
3523
3518
  }
3524
- `,
3525
- themeSelectedButton: css`
3526
- background-color: ${t(colors.purple[100], colors.purple[900])};
3527
- color: ${t(colors.purple[700], colors.purple[300])};
3528
- & svg {
3529
- color: ${t(colors.purple[700], colors.purple[300])};
3530
- }
3531
- &:hover {
3519
+ &[data-checked] {
3532
3520
  background-color: ${t(colors.purple[100], colors.purple[900])};
3521
+ color: ${t(colors.purple[700], colors.purple[300])};
3522
+ & svg {
3523
+ color: ${t(colors.purple[700], colors.purple[300])};
3524
+ }
3525
+ &:hover {
3526
+ background-color: ${t(colors.purple[100], colors.purple[900])};
3527
+ }
3533
3528
  }
3534
3529
  `,
3535
3530
  viewToggle: css`
package/src/Explorer.tsx CHANGED
@@ -1,6 +1,14 @@
1
1
  import { serialize, stringify } from 'superjson'
2
2
  import { clsx as cx } from 'clsx'
3
- import { Index, Match, Show, Switch, createMemo, createSignal } from 'solid-js'
3
+ import {
4
+ Index,
5
+ Match,
6
+ Show,
7
+ Switch,
8
+ createMemo,
9
+ createSignal,
10
+ createUniqueId,
11
+ } from 'solid-js'
4
12
  import { Key } from '@solid-primitives/keyed'
5
13
  import * as goober from 'goober'
6
14
  import { tokens } from './theme'
@@ -325,6 +333,8 @@ export default function Explorer(props: ExplorerProps) {
325
333
 
326
334
  const currentDataPath = props.dataPath ?? []
327
335
 
336
+ const inputId = createUniqueId()
337
+
328
338
  return (
329
339
  <div class={styles().entry}>
330
340
  <Show when={subEntryPages().length}>
@@ -332,6 +342,7 @@ export default function Explorer(props: ExplorerProps) {
332
342
  <button
333
343
  class={styles().expanderButton}
334
344
  onClick={() => toggleExpanded()}
345
+ aria-expanded={expanded() ? 'true' : 'false'}
335
346
  >
336
347
  <Expander expanded={expanded()} /> <span>{props.label}</span>{' '}
337
348
  <span class={styles().info}>
@@ -446,7 +457,9 @@ export default function Explorer(props: ExplorerProps) {
446
457
  </Show>
447
458
  <Show when={subEntryPages().length === 0}>
448
459
  <div class={styles().row}>
449
- <span class={styles().label}>{props.label}:</span>
460
+ <label for={inputId} class={styles().label}>
461
+ {props.label}:
462
+ </label>
450
463
  <Show
451
464
  when={
452
465
  props.editable &&
@@ -467,6 +480,7 @@ export default function Explorer(props: ExplorerProps) {
467
480
  }
468
481
  >
469
482
  <input
483
+ id={inputId}
470
484
  type={type() === 'number' ? 'number' : 'text'}
471
485
  class={cx(styles().value, styles().editableInput)}
472
486
  value={props.value as string | number}