@tanstack/react-query-devtools 5.0.0-alpha.4 → 5.0.0-alpha.42

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 (109) hide show
  1. package/build/lib/__tests__/devtools.test.d.ts +1 -1
  2. package/build/lib/__tests__/devtools.test.d.ts.map +1 -0
  3. package/build/lib/__tests__/utils.d.ts +2 -1
  4. package/build/lib/__tests__/utils.d.ts.map +1 -0
  5. package/build/lib/devtools.d.ts +11 -75
  6. package/build/lib/devtools.d.ts.map +1 -0
  7. package/build/lib/devtools.esm.js +52 -766
  8. package/build/lib/devtools.esm.js.map +1 -1
  9. package/build/lib/devtools.js +49 -783
  10. package/build/lib/devtools.js.map +1 -1
  11. package/build/lib/devtools.mjs +52 -766
  12. package/build/lib/devtools.mjs.map +1 -1
  13. package/build/lib/index.d.ts +1 -1
  14. package/build/lib/index.d.ts.map +1 -0
  15. package/build/lib/index.esm.js +10 -5
  16. package/build/lib/index.esm.js.map +1 -1
  17. package/build/lib/index.js +8 -4
  18. package/build/lib/index.js.map +1 -1
  19. package/build/lib/index.mjs +10 -5
  20. package/build/lib/index.mjs.map +1 -1
  21. package/build/lib/{index.prod.d.ts → index.prod.d.ts/build/lib/index.d.ts} +1 -1
  22. package/build/lib/index.prod.esm.js +7892 -1302
  23. package/build/lib/index.prod.esm.js.map +1 -1
  24. package/build/lib/index.prod.js +7959 -1389
  25. package/build/lib/index.prod.js.map +1 -1
  26. package/build/lib/index.prod.mjs +7892 -1302
  27. package/build/lib/index.prod.mjs.map +1 -1
  28. package/build/umd/index.development.js +7016 -2089
  29. package/build/umd/index.development.js.map +1 -1
  30. package/build/umd/index.production.js +1 -1
  31. package/build/umd/index.production.js.map +1 -1
  32. package/package.json +10 -9
  33. package/src/__tests__/devtools.test.tsx +1 -860
  34. package/src/devtools.tsx +61 -1164
  35. package/src/index.ts +6 -6
  36. package/build/lib/Explorer.d.ts +0 -50
  37. package/build/lib/Explorer.esm.js +0 -253
  38. package/build/lib/Explorer.esm.js.map +0 -1
  39. package/build/lib/Explorer.js +0 -287
  40. package/build/lib/Explorer.js.map +0 -1
  41. package/build/lib/Explorer.mjs +0 -253
  42. package/build/lib/Explorer.mjs.map +0 -1
  43. package/build/lib/Logo.d.ts +0 -1
  44. package/build/lib/Logo.esm.js +0 -32
  45. package/build/lib/Logo.esm.js.map +0 -1
  46. package/build/lib/Logo.js +0 -55
  47. package/build/lib/Logo.js.map +0 -1
  48. package/build/lib/Logo.mjs +0 -32
  49. package/build/lib/Logo.mjs.map +0 -1
  50. package/build/lib/__tests__/Explorer.test.d.ts +0 -1
  51. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -17
  52. package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
  53. package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -19
  54. package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
  55. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -17
  56. package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
  57. package/build/lib/noop.d.ts +0 -2
  58. package/build/lib/screenreader.d.ts +0 -3
  59. package/build/lib/screenreader.esm.js +0 -17
  60. package/build/lib/screenreader.esm.js.map +0 -1
  61. package/build/lib/screenreader.js +0 -40
  62. package/build/lib/screenreader.js.map +0 -1
  63. package/build/lib/screenreader.mjs +0 -17
  64. package/build/lib/screenreader.mjs.map +0 -1
  65. package/build/lib/styledComponents.d.ts +0 -9
  66. package/build/lib/styledComponents.esm.js +0 -93
  67. package/build/lib/styledComponents.esm.js.map +0 -1
  68. package/build/lib/styledComponents.js +0 -102
  69. package/build/lib/styledComponents.js.map +0 -1
  70. package/build/lib/styledComponents.mjs +0 -93
  71. package/build/lib/styledComponents.mjs.map +0 -1
  72. package/build/lib/theme.d.ts +0 -36
  73. package/build/lib/theme.esm.js +0 -32
  74. package/build/lib/theme.esm.js.map +0 -1
  75. package/build/lib/theme.js +0 -55
  76. package/build/lib/theme.js.map +0 -1
  77. package/build/lib/theme.mjs +0 -32
  78. package/build/lib/theme.mjs.map +0 -1
  79. package/build/lib/useLocalStorage.d.ts +0 -1
  80. package/build/lib/useLocalStorage.esm.js +0 -40
  81. package/build/lib/useLocalStorage.esm.js.map +0 -1
  82. package/build/lib/useLocalStorage.js +0 -63
  83. package/build/lib/useLocalStorage.js.map +0 -1
  84. package/build/lib/useLocalStorage.mjs +0 -40
  85. package/build/lib/useLocalStorage.mjs.map +0 -1
  86. package/build/lib/useMediaQuery.d.ts +0 -1
  87. package/build/lib/useMediaQuery.esm.js +0 -36
  88. package/build/lib/useMediaQuery.esm.js.map +0 -1
  89. package/build/lib/useMediaQuery.js +0 -59
  90. package/build/lib/useMediaQuery.js.map +0 -1
  91. package/build/lib/useMediaQuery.mjs +0 -36
  92. package/build/lib/useMediaQuery.mjs.map +0 -1
  93. package/build/lib/utils.d.ts +0 -79
  94. package/build/lib/utils.esm.js +0 -184
  95. package/build/lib/utils.esm.js.map +0 -1
  96. package/build/lib/utils.js +0 -218
  97. package/build/lib/utils.js.map +0 -1
  98. package/build/lib/utils.mjs +0 -184
  99. package/build/lib/utils.mjs.map +0 -1
  100. package/src/Explorer.tsx +0 -385
  101. package/src/Logo.tsx +0 -32
  102. package/src/__tests__/Explorer.test.tsx +0 -149
  103. package/src/noop.ts +0 -7
  104. package/src/screenreader.tsx +0 -16
  105. package/src/styledComponents.ts +0 -108
  106. package/src/theme.tsx +0 -33
  107. package/src/useLocalStorage.ts +0 -52
  108. package/src/useMediaQuery.ts +0 -34
  109. package/src/utils.ts +0 -319
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.esm.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\nimport SuperJSON from 'superjson'\n\nimport type { Theme } from './theme'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React.useEffect(() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n * @param {boolean} beautify Formats json to multiline\n */\nexport const displayValue = (value: unknown, beautify: boolean = false) => {\n const { json } = SuperJSON.serialize(value)\n\n return JSON.stringify(json, null, beautify ? 2 : undefined)\n}\n\n// Sorting functions\ntype SortFn = (a: Query, b: Query) => number\n\nconst getStatusRank = (q: Query) =>\n q.state.fetchStatus !== 'idle'\n ? 0\n : !q.getObserversCount()\n ? 3\n : q.isStale()\n ? 2\n : 1\n\nconst queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)\n\nconst dateSort: SortFn = (a, b) =>\n a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1\n\nconst statusAndDateSort: SortFn = (a, b) => {\n if (getStatusRank(a) === getStatusRank(b)) {\n return dateSort(a, b)\n }\n\n return getStatusRank(a) > getStatusRank(b) ? 1 : -1\n}\n\nexport const sortFns: Record<string, SortFn> = {\n 'Status > Last Updated': statusAndDateSort,\n 'Query Hash': queryHashSort,\n 'Last Updated': dateSort,\n}\n\nexport const minPanelSize = 70\nexport const defaultPanelSize = 500\nexport const sides: Record<Side, Side> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n}\n\nexport type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\nexport type Side = 'left' | 'right' | 'top' | 'bottom'\n/**\n * Check if the given side is vertical (left/right)\n */\nexport function isVerticalSide(side: Side) {\n return ['left', 'right'].includes(side)\n}\n/**\n * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc\n */\nexport function getOppositeSide(side: Side): Side {\n return sides[side]\n}\n/**\n * Given as css prop it will return a sided css prop based on a given side\n * Example given `border` and `right` it return `borderRight`\n */\nexport function getSidedProp<T extends string>(prop: T, side: Side) {\n return `${prop}${\n side.charAt(0).toUpperCase() + side.slice(1)\n }` as `${T}${Capitalize<Side>}`\n}\n\nexport interface SidePanelStyleOptions {\n /**\n * Position of the panel\n * Defaults to 'bottom'\n */\n position?: Side\n /**\n * Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'\n * Defaults to 500\n */\n height?: number\n /**\n * Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'\n * Defaults to 500\n */\n width?: number\n /**\n * RQ devtools theme\n */\n devtoolsTheme: Theme\n /**\n * Sets the correct transition and visibility styles\n */\n isOpen?: boolean\n /**\n * If the panel is resizing set to true to apply the correct transition styles\n */\n isResizing?: boolean\n /**\n * Extra panel style passed by the user\n */\n panelStyle?: React.CSSProperties\n}\n\nexport function getSidePanelStyle({\n position = 'bottom',\n height,\n width,\n devtoolsTheme,\n isOpen,\n isResizing,\n panelStyle,\n}: SidePanelStyleOptions): React.CSSProperties {\n const oppositeSide = getOppositeSide(position)\n const borderSide = getSidedProp('border', oppositeSide)\n const isVertical = isVerticalSide(position)\n\n return {\n ...panelStyle,\n direction: 'ltr',\n position: 'fixed',\n [position]: 0,\n [borderSide]: `1px solid ${devtoolsTheme.gray}`,\n transformOrigin: oppositeSide,\n boxShadow: '0 0 20px rgba(0,0,0,.3)',\n zIndex: 99999,\n // visibility will be toggled after transitions, but set initial state here\n visibility: isOpen ? 'visible' : 'hidden',\n ...(isResizing\n ? {\n transition: `none`,\n }\n : { transition: `all .2s ease` }),\n ...(isOpen\n ? {\n opacity: 1,\n pointerEvents: 'all',\n transform: isVertical\n ? `translateX(0) scale(1)`\n : `translateY(0) scale(1)`,\n }\n : {\n opacity: 0,\n pointerEvents: 'none',\n transform: isVertical\n ? `translateX(15px) scale(1.02)`\n : `translateY(15px) scale(1.02)`,\n }),\n ...(isVertical\n ? {\n top: 0,\n height: '100vh',\n maxWidth: '90%',\n width:\n typeof width === 'number' && width >= minPanelSize\n ? width\n : defaultPanelSize,\n }\n : {\n left: 0,\n width: '100%',\n maxHeight: '90%',\n height:\n typeof height === 'number' && height >= minPanelSize\n ? height\n : defaultPanelSize,\n }),\n }\n}\n\n/**\n * Get resize handle style based on a given side\n */\nexport function getResizeHandleStyle(\n position: Side = 'bottom',\n): React.CSSProperties {\n const isVertical = isVerticalSide(position)\n const oppositeSide = getOppositeSide(position)\n const marginSide = getSidedProp('margin', oppositeSide)\n\n return {\n position: 'absolute',\n cursor: isVertical ? 'col-resize' : 'row-resize',\n zIndex: 100000,\n [oppositeSide]: 0,\n [marginSide]: `-4px`,\n ...(isVertical\n ? {\n top: 0,\n height: '100%',\n width: '4px',\n }\n : {\n width: '100%',\n height: '4px',\n }),\n }\n}\n"],"names":["getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","useEffect","displayValue","beautify","json","SuperJSON","serialize","JSON","stringify","undefined","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns","minPanelSize","defaultPanelSize","sides","top","bottom","left","right","isVerticalSide","side","includes","getOppositeSide","getSidedProp","prop","charAt","toUpperCase","slice","getSidePanelStyle","position","height","width","devtoolsTheme","isOpen","isResizing","panelStyle","oppositeSide","borderSide","isVertical","direction","transformOrigin","boxShadow","zIndex","visibility","transition","opacity","pointerEvents","transform","maxWidth","maxHeight","getResizeHandleStyle","marginSide","cursor"],"mappings":"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"}
@@ -1,218 +0,0 @@
1
- 'use strict';
2
-
3
- var React = require('react');
4
- var SuperJSON = require('superjson');
5
- var theme = require('./theme.js');
6
- var useMediaQuery = require('./useMediaQuery.js');
7
-
8
- function _interopNamespaceDefault(e) {
9
- var n = Object.create(null);
10
- if (e) {
11
- Object.keys(e).forEach(function (k) {
12
- if (k !== 'default') {
13
- var d = Object.getOwnPropertyDescriptor(e, k);
14
- Object.defineProperty(n, k, d.get ? d : {
15
- enumerable: true,
16
- get: function () { return e[k]; }
17
- });
18
- }
19
- });
20
- }
21
- n.default = e;
22
- return Object.freeze(n);
23
- }
24
-
25
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
26
-
27
- function getQueryStatusColor({
28
- queryState,
29
- observerCount,
30
- isStale,
31
- theme
32
- }) {
33
- return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
34
- }
35
- function getQueryStatusLabel(query) {
36
- return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
37
- }
38
- function styled(type, newStyles, queries = {}) {
39
- return /*#__PURE__*/React__namespace.forwardRef(({
40
- style,
41
- ...rest
42
- }, ref) => {
43
- const theme$1 = theme.useTheme();
44
- const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
45
- // eslint-disable-next-line react-hooks/rules-of-hooks
46
- return useMediaQuery.default(key) ? {
47
- ...current,
48
- ...(typeof value === 'function' ? value(rest, theme$1) : value)
49
- } : current;
50
- }, {});
51
- return /*#__PURE__*/React__namespace.createElement(type, {
52
- ...rest,
53
- style: {
54
- ...(typeof newStyles === 'function' ? newStyles(rest, theme$1) : newStyles),
55
- ...style,
56
- ...mediaStyles
57
- },
58
- ref
59
- });
60
- });
61
- }
62
- function useIsMounted() {
63
- const mountedRef = React__namespace.useRef(false);
64
- const isMounted = React__namespace.useCallback(() => mountedRef.current, []);
65
- React__namespace.useEffect(() => {
66
- mountedRef.current = true;
67
- return () => {
68
- mountedRef.current = false;
69
- };
70
- }, []);
71
- return isMounted;
72
- }
73
-
74
- /**
75
- * Displays a string regardless the type of the data
76
- * @param {unknown} value Value to be stringified
77
- * @param {boolean} beautify Formats json to multiline
78
- */
79
- const displayValue = (value, beautify = false) => {
80
- const {
81
- json
82
- } = SuperJSON.serialize(value);
83
- return JSON.stringify(json, null, beautify ? 2 : undefined);
84
- };
85
-
86
- // Sorting functions
87
-
88
- const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
89
- const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
90
- const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
91
- const statusAndDateSort = (a, b) => {
92
- if (getStatusRank(a) === getStatusRank(b)) {
93
- return dateSort(a, b);
94
- }
95
- return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
96
- };
97
- const sortFns = {
98
- 'Status > Last Updated': statusAndDateSort,
99
- 'Query Hash': queryHashSort,
100
- 'Last Updated': dateSort
101
- };
102
- const minPanelSize = 70;
103
- const defaultPanelSize = 500;
104
- const sides = {
105
- top: 'bottom',
106
- bottom: 'top',
107
- left: 'right',
108
- right: 'left'
109
- };
110
- /**
111
- * Check if the given side is vertical (left/right)
112
- */
113
- function isVerticalSide(side) {
114
- return ['left', 'right'].includes(side);
115
- }
116
- /**
117
- * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
118
- */
119
- function getOppositeSide(side) {
120
- return sides[side];
121
- }
122
- /**
123
- * Given as css prop it will return a sided css prop based on a given side
124
- * Example given `border` and `right` it return `borderRight`
125
- */
126
- function getSidedProp(prop, side) {
127
- return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
128
- }
129
- function getSidePanelStyle({
130
- position = 'bottom',
131
- height,
132
- width,
133
- devtoolsTheme,
134
- isOpen,
135
- isResizing,
136
- panelStyle
137
- }) {
138
- const oppositeSide = getOppositeSide(position);
139
- const borderSide = getSidedProp('border', oppositeSide);
140
- const isVertical = isVerticalSide(position);
141
- return {
142
- ...panelStyle,
143
- direction: 'ltr',
144
- position: 'fixed',
145
- [position]: 0,
146
- [borderSide]: `1px solid ${devtoolsTheme.gray}`,
147
- transformOrigin: oppositeSide,
148
- boxShadow: '0 0 20px rgba(0,0,0,.3)',
149
- zIndex: 99999,
150
- // visibility will be toggled after transitions, but set initial state here
151
- visibility: isOpen ? 'visible' : 'hidden',
152
- ...(isResizing ? {
153
- transition: `none`
154
- } : {
155
- transition: `all .2s ease`
156
- }),
157
- ...(isOpen ? {
158
- opacity: 1,
159
- pointerEvents: 'all',
160
- transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
161
- } : {
162
- opacity: 0,
163
- pointerEvents: 'none',
164
- transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
165
- }),
166
- ...(isVertical ? {
167
- top: 0,
168
- height: '100vh',
169
- maxWidth: '90%',
170
- width: typeof width === 'number' && width >= minPanelSize ? width : defaultPanelSize
171
- } : {
172
- left: 0,
173
- width: '100%',
174
- maxHeight: '90%',
175
- height: typeof height === 'number' && height >= minPanelSize ? height : defaultPanelSize
176
- })
177
- };
178
- }
179
-
180
- /**
181
- * Get resize handle style based on a given side
182
- */
183
- function getResizeHandleStyle(position = 'bottom') {
184
- const isVertical = isVerticalSide(position);
185
- const oppositeSide = getOppositeSide(position);
186
- const marginSide = getSidedProp('margin', oppositeSide);
187
- return {
188
- position: 'absolute',
189
- cursor: isVertical ? 'col-resize' : 'row-resize',
190
- zIndex: 100000,
191
- [oppositeSide]: 0,
192
- [marginSide]: `-4px`,
193
- ...(isVertical ? {
194
- top: 0,
195
- height: '100%',
196
- width: '4px'
197
- } : {
198
- width: '100%',
199
- height: '4px'
200
- })
201
- };
202
- }
203
-
204
- exports.defaultPanelSize = defaultPanelSize;
205
- exports.displayValue = displayValue;
206
- exports.getOppositeSide = getOppositeSide;
207
- exports.getQueryStatusColor = getQueryStatusColor;
208
- exports.getQueryStatusLabel = getQueryStatusLabel;
209
- exports.getResizeHandleStyle = getResizeHandleStyle;
210
- exports.getSidePanelStyle = getSidePanelStyle;
211
- exports.getSidedProp = getSidedProp;
212
- exports.isVerticalSide = isVerticalSide;
213
- exports.minPanelSize = minPanelSize;
214
- exports.sides = sides;
215
- exports.sortFns = sortFns;
216
- exports.styled = styled;
217
- exports.useIsMounted = useIsMounted;
218
- //# sourceMappingURL=utils.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.js","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\nimport SuperJSON from 'superjson'\n\nimport type { Theme } from './theme'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React.useEffect(() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n * @param {boolean} beautify Formats json to multiline\n */\nexport const displayValue = (value: unknown, beautify: boolean = false) => {\n const { json } = SuperJSON.serialize(value)\n\n return JSON.stringify(json, null, beautify ? 2 : undefined)\n}\n\n// Sorting functions\ntype SortFn = (a: Query, b: Query) => number\n\nconst getStatusRank = (q: Query) =>\n q.state.fetchStatus !== 'idle'\n ? 0\n : !q.getObserversCount()\n ? 3\n : q.isStale()\n ? 2\n : 1\n\nconst queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)\n\nconst dateSort: SortFn = (a, b) =>\n a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1\n\nconst statusAndDateSort: SortFn = (a, b) => {\n if (getStatusRank(a) === getStatusRank(b)) {\n return dateSort(a, b)\n }\n\n return getStatusRank(a) > getStatusRank(b) ? 1 : -1\n}\n\nexport const sortFns: Record<string, SortFn> = {\n 'Status > Last Updated': statusAndDateSort,\n 'Query Hash': queryHashSort,\n 'Last Updated': dateSort,\n}\n\nexport const minPanelSize = 70\nexport const defaultPanelSize = 500\nexport const sides: Record<Side, Side> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n}\n\nexport type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\nexport type Side = 'left' | 'right' | 'top' | 'bottom'\n/**\n * Check if the given side is vertical (left/right)\n */\nexport function isVerticalSide(side: Side) {\n return ['left', 'right'].includes(side)\n}\n/**\n * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc\n */\nexport function getOppositeSide(side: Side): Side {\n return sides[side]\n}\n/**\n * Given as css prop it will return a sided css prop based on a given side\n * Example given `border` and `right` it return `borderRight`\n */\nexport function getSidedProp<T extends string>(prop: T, side: Side) {\n return `${prop}${\n side.charAt(0).toUpperCase() + side.slice(1)\n }` as `${T}${Capitalize<Side>}`\n}\n\nexport interface SidePanelStyleOptions {\n /**\n * Position of the panel\n * Defaults to 'bottom'\n */\n position?: Side\n /**\n * Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'\n * Defaults to 500\n */\n height?: number\n /**\n * Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'\n * Defaults to 500\n */\n width?: number\n /**\n * RQ devtools theme\n */\n devtoolsTheme: Theme\n /**\n * Sets the correct transition and visibility styles\n */\n isOpen?: boolean\n /**\n * If the panel is resizing set to true to apply the correct transition styles\n */\n isResizing?: boolean\n /**\n * Extra panel style passed by the user\n */\n panelStyle?: React.CSSProperties\n}\n\nexport function getSidePanelStyle({\n position = 'bottom',\n height,\n width,\n devtoolsTheme,\n isOpen,\n isResizing,\n panelStyle,\n}: SidePanelStyleOptions): React.CSSProperties {\n const oppositeSide = getOppositeSide(position)\n const borderSide = getSidedProp('border', oppositeSide)\n const isVertical = isVerticalSide(position)\n\n return {\n ...panelStyle,\n direction: 'ltr',\n position: 'fixed',\n [position]: 0,\n [borderSide]: `1px solid ${devtoolsTheme.gray}`,\n transformOrigin: oppositeSide,\n boxShadow: '0 0 20px rgba(0,0,0,.3)',\n zIndex: 99999,\n // visibility will be toggled after transitions, but set initial state here\n visibility: isOpen ? 'visible' : 'hidden',\n ...(isResizing\n ? {\n transition: `none`,\n }\n : { transition: `all .2s ease` }),\n ...(isOpen\n ? {\n opacity: 1,\n pointerEvents: 'all',\n transform: isVertical\n ? `translateX(0) scale(1)`\n : `translateY(0) scale(1)`,\n }\n : {\n opacity: 0,\n pointerEvents: 'none',\n transform: isVertical\n ? `translateX(15px) scale(1.02)`\n : `translateY(15px) scale(1.02)`,\n }),\n ...(isVertical\n ? {\n top: 0,\n height: '100vh',\n maxWidth: '90%',\n width:\n typeof width === 'number' && width >= minPanelSize\n ? width\n : defaultPanelSize,\n }\n : {\n left: 0,\n width: '100%',\n maxHeight: '90%',\n height:\n typeof height === 'number' && height >= minPanelSize\n ? height\n : defaultPanelSize,\n }),\n }\n}\n\n/**\n * Get resize handle style based on a given side\n */\nexport function getResizeHandleStyle(\n position: Side = 'bottom',\n): React.CSSProperties {\n const isVertical = isVerticalSide(position)\n const oppositeSide = getOppositeSide(position)\n const marginSide = getSidedProp('margin', oppositeSide)\n\n return {\n position: 'absolute',\n cursor: isVertical ? 'col-resize' : 'row-resize',\n zIndex: 100000,\n [oppositeSide]: 0,\n [marginSide]: `-4px`,\n ...(isVertical\n ? {\n top: 0,\n height: '100%',\n width: '4px',\n }\n : {\n width: '100%',\n height: '4px',\n }),\n }\n}\n"],"names":["getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","useEffect","displayValue","beautify","json","SuperJSON","serialize","JSON","stringify","undefined","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns","minPanelSize","defaultPanelSize","sides","top","bottom","left","right","isVerticalSide","side","includes","getOppositeSide","getSidedProp","prop","charAt","toUpperCase","slice","getSidePanelStyle","position","height","width","devtoolsTheme","isOpen","isResizing","panelStyle","oppositeSide","borderSide","isVertical","direction","transformOrigin","boxShadow","zIndex","visibility","transition","opacity","pointerEvents","transform","maxWidth","maxHeight","getResizeHandleStyle","marginSide","cursor"],"mappings":"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"}
@@ -1,184 +0,0 @@
1
- import * as React from 'react';
2
- import SuperJSON from 'superjson';
3
- import { useTheme } from './theme.mjs';
4
- import useMediaQuery from './useMediaQuery.mjs';
5
-
6
- function getQueryStatusColor({
7
- queryState,
8
- observerCount,
9
- isStale,
10
- theme
11
- }) {
12
- return queryState.fetchStatus === 'fetching' ? theme.active : !observerCount ? theme.gray : queryState.fetchStatus === 'paused' ? theme.paused : isStale ? theme.warning : theme.success;
13
- }
14
- function getQueryStatusLabel(query) {
15
- return query.state.fetchStatus === 'fetching' ? 'fetching' : !query.getObserversCount() ? 'inactive' : query.state.fetchStatus === 'paused' ? 'paused' : query.isStale() ? 'stale' : 'fresh';
16
- }
17
- function styled(type, newStyles, queries = {}) {
18
- return /*#__PURE__*/React.forwardRef(({
19
- style,
20
- ...rest
21
- }, ref) => {
22
- const theme = useTheme();
23
- const mediaStyles = Object.entries(queries).reduce((current, [key, value]) => {
24
- // eslint-disable-next-line react-hooks/rules-of-hooks
25
- return useMediaQuery(key) ? {
26
- ...current,
27
- ...(typeof value === 'function' ? value(rest, theme) : value)
28
- } : current;
29
- }, {});
30
- return /*#__PURE__*/React.createElement(type, {
31
- ...rest,
32
- style: {
33
- ...(typeof newStyles === 'function' ? newStyles(rest, theme) : newStyles),
34
- ...style,
35
- ...mediaStyles
36
- },
37
- ref
38
- });
39
- });
40
- }
41
- function useIsMounted() {
42
- const mountedRef = React.useRef(false);
43
- const isMounted = React.useCallback(() => mountedRef.current, []);
44
- React.useEffect(() => {
45
- mountedRef.current = true;
46
- return () => {
47
- mountedRef.current = false;
48
- };
49
- }, []);
50
- return isMounted;
51
- }
52
-
53
- /**
54
- * Displays a string regardless the type of the data
55
- * @param {unknown} value Value to be stringified
56
- * @param {boolean} beautify Formats json to multiline
57
- */
58
- const displayValue = (value, beautify = false) => {
59
- const {
60
- json
61
- } = SuperJSON.serialize(value);
62
- return JSON.stringify(json, null, beautify ? 2 : undefined);
63
- };
64
-
65
- // Sorting functions
66
-
67
- const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
68
- const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
69
- const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
70
- const statusAndDateSort = (a, b) => {
71
- if (getStatusRank(a) === getStatusRank(b)) {
72
- return dateSort(a, b);
73
- }
74
- return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
75
- };
76
- const sortFns = {
77
- 'Status > Last Updated': statusAndDateSort,
78
- 'Query Hash': queryHashSort,
79
- 'Last Updated': dateSort
80
- };
81
- const minPanelSize = 70;
82
- const defaultPanelSize = 500;
83
- const sides = {
84
- top: 'bottom',
85
- bottom: 'top',
86
- left: 'right',
87
- right: 'left'
88
- };
89
- /**
90
- * Check if the given side is vertical (left/right)
91
- */
92
- function isVerticalSide(side) {
93
- return ['left', 'right'].includes(side);
94
- }
95
- /**
96
- * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
97
- */
98
- function getOppositeSide(side) {
99
- return sides[side];
100
- }
101
- /**
102
- * Given as css prop it will return a sided css prop based on a given side
103
- * Example given `border` and `right` it return `borderRight`
104
- */
105
- function getSidedProp(prop, side) {
106
- return `${prop}${side.charAt(0).toUpperCase() + side.slice(1)}`;
107
- }
108
- function getSidePanelStyle({
109
- position = 'bottom',
110
- height,
111
- width,
112
- devtoolsTheme,
113
- isOpen,
114
- isResizing,
115
- panelStyle
116
- }) {
117
- const oppositeSide = getOppositeSide(position);
118
- const borderSide = getSidedProp('border', oppositeSide);
119
- const isVertical = isVerticalSide(position);
120
- return {
121
- ...panelStyle,
122
- direction: 'ltr',
123
- position: 'fixed',
124
- [position]: 0,
125
- [borderSide]: `1px solid ${devtoolsTheme.gray}`,
126
- transformOrigin: oppositeSide,
127
- boxShadow: '0 0 20px rgba(0,0,0,.3)',
128
- zIndex: 99999,
129
- // visibility will be toggled after transitions, but set initial state here
130
- visibility: isOpen ? 'visible' : 'hidden',
131
- ...(isResizing ? {
132
- transition: `none`
133
- } : {
134
- transition: `all .2s ease`
135
- }),
136
- ...(isOpen ? {
137
- opacity: 1,
138
- pointerEvents: 'all',
139
- transform: isVertical ? `translateX(0) scale(1)` : `translateY(0) scale(1)`
140
- } : {
141
- opacity: 0,
142
- pointerEvents: 'none',
143
- transform: isVertical ? `translateX(15px) scale(1.02)` : `translateY(15px) scale(1.02)`
144
- }),
145
- ...(isVertical ? {
146
- top: 0,
147
- height: '100vh',
148
- maxWidth: '90%',
149
- width: typeof width === 'number' && width >= minPanelSize ? width : defaultPanelSize
150
- } : {
151
- left: 0,
152
- width: '100%',
153
- maxHeight: '90%',
154
- height: typeof height === 'number' && height >= minPanelSize ? height : defaultPanelSize
155
- })
156
- };
157
- }
158
-
159
- /**
160
- * Get resize handle style based on a given side
161
- */
162
- function getResizeHandleStyle(position = 'bottom') {
163
- const isVertical = isVerticalSide(position);
164
- const oppositeSide = getOppositeSide(position);
165
- const marginSide = getSidedProp('margin', oppositeSide);
166
- return {
167
- position: 'absolute',
168
- cursor: isVertical ? 'col-resize' : 'row-resize',
169
- zIndex: 100000,
170
- [oppositeSide]: 0,
171
- [marginSide]: `-4px`,
172
- ...(isVertical ? {
173
- top: 0,
174
- height: '100%',
175
- width: '4px'
176
- } : {
177
- width: '100%',
178
- height: '4px'
179
- })
180
- };
181
- }
182
-
183
- export { defaultPanelSize, displayValue, getOppositeSide, getQueryStatusColor, getQueryStatusLabel, getResizeHandleStyle, getSidePanelStyle, getSidedProp, isVerticalSide, minPanelSize, sides, sortFns, styled, useIsMounted };
184
- //# sourceMappingURL=utils.mjs.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"utils.mjs","sources":["../../src/utils.ts"],"sourcesContent":["import * as React from 'react'\nimport type { Query } from '@tanstack/react-query'\nimport SuperJSON from 'superjson'\n\nimport type { Theme } from './theme'\nimport { useTheme } from './theme'\nimport useMediaQuery from './useMediaQuery'\n\ntype StyledComponent<T> = T extends 'button'\n ? React.DetailedHTMLProps<\n React.ButtonHTMLAttributes<HTMLButtonElement>,\n HTMLButtonElement\n >\n : T extends 'input'\n ? React.DetailedHTMLProps<\n React.InputHTMLAttributes<HTMLInputElement>,\n HTMLInputElement\n >\n : T extends 'select'\n ? React.DetailedHTMLProps<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n >\n : T extends keyof HTMLElementTagNameMap\n ? React.HTMLAttributes<HTMLElementTagNameMap[T]>\n : never\n\nexport function getQueryStatusColor({\n queryState,\n observerCount,\n isStale,\n theme,\n}: {\n queryState: Query['state']\n observerCount: number\n isStale: boolean\n theme: Theme\n}) {\n return queryState.fetchStatus === 'fetching'\n ? theme.active\n : !observerCount\n ? theme.gray\n : queryState.fetchStatus === 'paused'\n ? theme.paused\n : isStale\n ? theme.warning\n : theme.success\n}\n\nexport function getQueryStatusLabel(query: Query) {\n return query.state.fetchStatus === 'fetching'\n ? 'fetching'\n : !query.getObserversCount()\n ? 'inactive'\n : query.state.fetchStatus === 'paused'\n ? 'paused'\n : query.isStale()\n ? 'stale'\n : 'fresh'\n}\n\ntype Styles =\n | React.CSSProperties\n | ((props: Record<string, any>, theme: Theme) => React.CSSProperties)\n\nexport function styled<T extends keyof HTMLElementTagNameMap>(\n type: T,\n newStyles: Styles,\n queries: Record<string, Styles> = {},\n) {\n return React.forwardRef<HTMLElementTagNameMap[T], StyledComponent<T>>(\n ({ style, ...rest }, ref) => {\n const theme = useTheme()\n\n const mediaStyles = Object.entries(queries).reduce(\n (current, [key, value]) => {\n // eslint-disable-next-line react-hooks/rules-of-hooks\n return useMediaQuery(key)\n ? {\n ...current,\n ...(typeof value === 'function' ? value(rest, theme) : value),\n }\n : current\n },\n {},\n )\n\n return React.createElement(type, {\n ...rest,\n style: {\n ...(typeof newStyles === 'function'\n ? newStyles(rest, theme)\n : newStyles),\n ...style,\n ...mediaStyles,\n },\n ref,\n })\n },\n )\n}\n\nexport function useIsMounted() {\n const mountedRef = React.useRef(false)\n const isMounted = React.useCallback(() => mountedRef.current, [])\n\n React.useEffect(() => {\n mountedRef.current = true\n return () => {\n mountedRef.current = false\n }\n }, [])\n\n return isMounted\n}\n\n/**\n * Displays a string regardless the type of the data\n * @param {unknown} value Value to be stringified\n * @param {boolean} beautify Formats json to multiline\n */\nexport const displayValue = (value: unknown, beautify: boolean = false) => {\n const { json } = SuperJSON.serialize(value)\n\n return JSON.stringify(json, null, beautify ? 2 : undefined)\n}\n\n// Sorting functions\ntype SortFn = (a: Query, b: Query) => number\n\nconst getStatusRank = (q: Query) =>\n q.state.fetchStatus !== 'idle'\n ? 0\n : !q.getObserversCount()\n ? 3\n : q.isStale()\n ? 2\n : 1\n\nconst queryHashSort: SortFn = (a, b) => a.queryHash.localeCompare(b.queryHash)\n\nconst dateSort: SortFn = (a, b) =>\n a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1\n\nconst statusAndDateSort: SortFn = (a, b) => {\n if (getStatusRank(a) === getStatusRank(b)) {\n return dateSort(a, b)\n }\n\n return getStatusRank(a) > getStatusRank(b) ? 1 : -1\n}\n\nexport const sortFns: Record<string, SortFn> = {\n 'Status > Last Updated': statusAndDateSort,\n 'Query Hash': queryHashSort,\n 'Last Updated': dateSort,\n}\n\nexport const minPanelSize = 70\nexport const defaultPanelSize = 500\nexport const sides: Record<Side, Side> = {\n top: 'bottom',\n bottom: 'top',\n left: 'right',\n right: 'left',\n}\n\nexport type Corner = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\nexport type Side = 'left' | 'right' | 'top' | 'bottom'\n/**\n * Check if the given side is vertical (left/right)\n */\nexport function isVerticalSide(side: Side) {\n return ['left', 'right'].includes(side)\n}\n/**\n * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc\n */\nexport function getOppositeSide(side: Side): Side {\n return sides[side]\n}\n/**\n * Given as css prop it will return a sided css prop based on a given side\n * Example given `border` and `right` it return `borderRight`\n */\nexport function getSidedProp<T extends string>(prop: T, side: Side) {\n return `${prop}${\n side.charAt(0).toUpperCase() + side.slice(1)\n }` as `${T}${Capitalize<Side>}`\n}\n\nexport interface SidePanelStyleOptions {\n /**\n * Position of the panel\n * Defaults to 'bottom'\n */\n position?: Side\n /**\n * Staring height for the panel, it is set if the position is horizontal eg 'top' or 'bottom'\n * Defaults to 500\n */\n height?: number\n /**\n * Staring width for the panel, it is set if the position is vertical eg 'left' or 'right'\n * Defaults to 500\n */\n width?: number\n /**\n * RQ devtools theme\n */\n devtoolsTheme: Theme\n /**\n * Sets the correct transition and visibility styles\n */\n isOpen?: boolean\n /**\n * If the panel is resizing set to true to apply the correct transition styles\n */\n isResizing?: boolean\n /**\n * Extra panel style passed by the user\n */\n panelStyle?: React.CSSProperties\n}\n\nexport function getSidePanelStyle({\n position = 'bottom',\n height,\n width,\n devtoolsTheme,\n isOpen,\n isResizing,\n panelStyle,\n}: SidePanelStyleOptions): React.CSSProperties {\n const oppositeSide = getOppositeSide(position)\n const borderSide = getSidedProp('border', oppositeSide)\n const isVertical = isVerticalSide(position)\n\n return {\n ...panelStyle,\n direction: 'ltr',\n position: 'fixed',\n [position]: 0,\n [borderSide]: `1px solid ${devtoolsTheme.gray}`,\n transformOrigin: oppositeSide,\n boxShadow: '0 0 20px rgba(0,0,0,.3)',\n zIndex: 99999,\n // visibility will be toggled after transitions, but set initial state here\n visibility: isOpen ? 'visible' : 'hidden',\n ...(isResizing\n ? {\n transition: `none`,\n }\n : { transition: `all .2s ease` }),\n ...(isOpen\n ? {\n opacity: 1,\n pointerEvents: 'all',\n transform: isVertical\n ? `translateX(0) scale(1)`\n : `translateY(0) scale(1)`,\n }\n : {\n opacity: 0,\n pointerEvents: 'none',\n transform: isVertical\n ? `translateX(15px) scale(1.02)`\n : `translateY(15px) scale(1.02)`,\n }),\n ...(isVertical\n ? {\n top: 0,\n height: '100vh',\n maxWidth: '90%',\n width:\n typeof width === 'number' && width >= minPanelSize\n ? width\n : defaultPanelSize,\n }\n : {\n left: 0,\n width: '100%',\n maxHeight: '90%',\n height:\n typeof height === 'number' && height >= minPanelSize\n ? height\n : defaultPanelSize,\n }),\n }\n}\n\n/**\n * Get resize handle style based on a given side\n */\nexport function getResizeHandleStyle(\n position: Side = 'bottom',\n): React.CSSProperties {\n const isVertical = isVerticalSide(position)\n const oppositeSide = getOppositeSide(position)\n const marginSide = getSidedProp('margin', oppositeSide)\n\n return {\n position: 'absolute',\n cursor: isVertical ? 'col-resize' : 'row-resize',\n zIndex: 100000,\n [oppositeSide]: 0,\n [marginSide]: `-4px`,\n ...(isVertical\n ? {\n top: 0,\n height: '100%',\n width: '4px',\n }\n : {\n width: '100%',\n height: '4px',\n }),\n }\n}\n"],"names":["getQueryStatusColor","queryState","observerCount","isStale","theme","fetchStatus","active","gray","paused","warning","success","getQueryStatusLabel","query","state","getObserversCount","styled","type","newStyles","queries","React","forwardRef","style","rest","ref","useTheme","mediaStyles","Object","entries","reduce","current","key","value","useMediaQuery","createElement","useIsMounted","mountedRef","useRef","isMounted","useCallback","useEffect","displayValue","beautify","json","SuperJSON","serialize","JSON","stringify","undefined","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns","minPanelSize","defaultPanelSize","sides","top","bottom","left","right","isVerticalSide","side","includes","getOppositeSide","getSidedProp","prop","charAt","toUpperCase","slice","getSidePanelStyle","position","height","width","devtoolsTheme","isOpen","isResizing","panelStyle","oppositeSide","borderSide","isVertical","direction","transformOrigin","boxShadow","zIndex","visibility","transition","opacity","pointerEvents","transform","maxWidth","maxHeight","getResizeHandleStyle","marginSide","cursor"],"mappings":"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"}