@tanstack/react-query-devtools 4.24.10 → 4.24.13

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 (16) hide show
  1. package/build/lib/devtools.esm.js +3 -3
  2. package/build/lib/devtools.esm.js.map +1 -1
  3. package/build/lib/devtools.js +3 -3
  4. package/build/lib/devtools.js.map +1 -1
  5. package/build/lib/devtools.mjs +3 -3
  6. package/build/lib/devtools.mjs.map +1 -1
  7. package/build/lib/index.prod.esm.js +3 -3
  8. package/build/lib/index.prod.esm.js.map +1 -1
  9. package/build/lib/index.prod.js +3 -3
  10. package/build/lib/index.prod.js.map +1 -1
  11. package/build/lib/index.prod.mjs +3 -3
  12. package/build/lib/index.prod.mjs.map +1 -1
  13. package/build/umd/index.development.js +3 -3
  14. package/build/umd/index.development.js.map +1 -1
  15. package/package.json +1 -1
  16. package/src/devtools.tsx +89 -101
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tanstack/react-query-devtools",
3
- "version": "4.24.10",
3
+ "version": "4.24.13",
4
4
  "description": "Developer tools to interact with and visualize the TanStack/react-query cache",
5
5
  "author": "tannerlinsley",
6
6
  "license": "MIT",
package/src/devtools.tsx CHANGED
@@ -621,106 +621,94 @@ export const ReactQueryDevtoolsPanel = React.forwardRef<
621
621
  width: '100%',
622
622
  }}
623
623
  />
624
- {!filter ? (
625
- <>
626
- <Select
627
- aria-label="Sort queries"
628
- value={sort}
629
- onChange={(e) => setSort(e.target.value)}
630
- style={{
631
- flex: '1',
632
- minWidth: 75,
633
- marginRight: '.5em',
634
- }}
635
- >
636
- {Object.keys(sortFns).map((key) => (
637
- <option key={key} value={key}>
638
- Sort by {key}
639
- </option>
640
- ))}
641
- </Select>
642
- <Button
643
- type="button"
644
- onClick={() => setBaseSort((old) => old * -1)}
645
- style={{
646
- padding: '.3em .4em',
647
- marginRight: '.5em',
648
- }}
649
- >
650
- {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
651
- </Button>
652
- <Button
653
- type="button"
654
- onClick={() => {
655
- if (isMockOffline) {
656
- onlineManager.setOnline(undefined)
657
- setMockOffline(false)
658
- window.dispatchEvent(new Event('online'))
659
- } else {
660
- onlineManager.setOnline(false)
661
- setMockOffline(true)
662
- }
663
- }}
664
- aria-label={
665
- isMockOffline
666
- ? 'Restore offline mock'
667
- : 'Mock offline behavior'
668
- }
669
- title={
670
- isMockOffline
671
- ? 'Restore offline mock'
672
- : 'Mock offline behavior'
673
- }
674
- style={{
675
- padding: '0',
676
- height: '2em',
677
- }}
678
- >
679
- <svg
680
- xmlns="http://www.w3.org/2000/svg"
681
- width="2em"
682
- height="2em"
683
- viewBox="0 0 24 24"
684
- stroke={isMockOffline ? theme.danger : 'currentColor'}
685
- fill="none"
686
- >
687
- {isMockOffline ? (
688
- <>
689
- <path
690
- stroke="none"
691
- d="M0 0h24v24H0z"
692
- fill="none"
693
- />
694
- <line x1="12" y1="18" x2="12.01" y2="18" />
695
- <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
696
- <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
697
- <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
698
- <line x1="3" y1="3" x2="21" y2="21" />
699
- </>
700
- ) : (
701
- <>
702
- <path
703
- stroke="none"
704
- d="M0 0h24v24H0z"
705
- fill="none"
706
- />
707
- <line x1="12" y1="18" x2="12.01" y2="18" />
708
- <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
709
- <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
710
- <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
711
- </>
712
- )}
713
- </svg>
714
- <ScreenReader
715
- text={
716
- isMockOffline
717
- ? 'Restore offline mock'
718
- : 'Mock offline behavior'
719
- }
720
- />
721
- </Button>
722
- </>
723
- ) : null}
624
+ <Select
625
+ aria-label="Sort queries"
626
+ value={sort}
627
+ onChange={(e) => setSort(e.target.value)}
628
+ style={{
629
+ flex: '1',
630
+ minWidth: 75,
631
+ marginRight: '.5em',
632
+ }}
633
+ >
634
+ {Object.keys(sortFns).map((key) => (
635
+ <option key={key} value={key}>
636
+ Sort by {key}
637
+ </option>
638
+ ))}
639
+ </Select>
640
+ <Button
641
+ type="button"
642
+ onClick={() => setBaseSort((old) => old * -1)}
643
+ style={{
644
+ padding: '.3em .4em',
645
+ marginRight: '.5em',
646
+ }}
647
+ >
648
+ {baseSort === 1 ? '⬆ Asc' : '⬇ Desc'}
649
+ </Button>
650
+ <Button
651
+ type="button"
652
+ onClick={() => {
653
+ if (isMockOffline) {
654
+ onlineManager.setOnline(undefined)
655
+ setMockOffline(false)
656
+ window.dispatchEvent(new Event('online'))
657
+ } else {
658
+ onlineManager.setOnline(false)
659
+ setMockOffline(true)
660
+ }
661
+ }}
662
+ aria-label={
663
+ isMockOffline
664
+ ? 'Restore offline mock'
665
+ : 'Mock offline behavior'
666
+ }
667
+ title={
668
+ isMockOffline
669
+ ? 'Restore offline mock'
670
+ : 'Mock offline behavior'
671
+ }
672
+ style={{
673
+ padding: '0',
674
+ height: '2em',
675
+ }}
676
+ >
677
+ <svg
678
+ xmlns="http://www.w3.org/2000/svg"
679
+ width="2em"
680
+ height="2em"
681
+ viewBox="0 0 24 24"
682
+ stroke={isMockOffline ? theme.danger : 'currentColor'}
683
+ fill="none"
684
+ >
685
+ {isMockOffline ? (
686
+ <>
687
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
688
+ <line x1="12" y1="18" x2="12.01" y2="18" />
689
+ <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
690
+ <path d="M6.343 12.343a7.963 7.963 0 0 1 3.864 -2.14m4.163 .155a7.965 7.965 0 0 1 3.287 2" />
691
+ <path d="M3.515 9.515a12 12 0 0 1 3.544 -2.455m3.101 -.92a12 12 0 0 1 10.325 3.374" />
692
+ <line x1="3" y1="3" x2="21" y2="21" />
693
+ </>
694
+ ) : (
695
+ <>
696
+ <path stroke="none" d="M0 0h24v24H0z" fill="none" />
697
+ <line x1="12" y1="18" x2="12.01" y2="18" />
698
+ <path d="M9.172 15.172a4 4 0 0 1 5.656 0" />
699
+ <path d="M6.343 12.343a8 8 0 0 1 11.314 0" />
700
+ <path d="M3.515 9.515c4.686 -4.687 12.284 -4.687 17 0" />
701
+ </>
702
+ )}
703
+ </svg>
704
+ <ScreenReader
705
+ text={
706
+ isMockOffline
707
+ ? 'Restore offline mock'
708
+ : 'Mock offline behavior'
709
+ }
710
+ />
711
+ </Button>
724
712
  </div>
725
713
  </div>
726
714
  </div>
@@ -848,7 +836,7 @@ const ActiveQuery = ({
848
836
  style={{
849
837
  marginBottom: '.5em',
850
838
  display: 'flex',
851
- alignItems: 'stretch',
839
+ alignItems: 'flex-start',
852
840
  justifyContent: 'space-between',
853
841
  }}
854
842
  >