@tanstack/react-query-devtools 5.0.0-alpha.9 → 5.0.0-alpha.90
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.
- package/build/legacy/devtools-d8b99e07.d.ts +42 -0
- package/build/legacy/devtools.cjs +91 -0
- package/build/legacy/devtools.cjs.map +1 -0
- package/build/legacy/devtools.d.cts +4 -0
- package/build/legacy/devtools.d.ts +4 -0
- package/build/legacy/devtools.js +57 -0
- package/build/legacy/devtools.js.map +1 -0
- package/build/legacy/index.cjs +45 -0
- package/build/legacy/index.cjs.map +1 -0
- package/build/legacy/index.d.cts +8 -0
- package/build/legacy/index.d.ts +8 -0
- package/build/legacy/index.js +11 -0
- package/build/legacy/index.js.map +1 -0
- package/build/legacy/production.cjs +43 -0
- package/build/legacy/production.cjs.map +1 -0
- package/build/legacy/production.d.cts +8 -0
- package/build/legacy/production.d.ts +8 -0
- package/build/legacy/production.js +9 -0
- package/build/legacy/production.js.map +1 -0
- package/build/modern/devtools-d8b99e07.d.ts +42 -0
- package/build/modern/devtools.cjs +91 -0
- package/build/modern/devtools.cjs.map +1 -0
- package/build/modern/devtools.d.cts +4 -0
- package/build/modern/devtools.d.ts +4 -0
- package/build/modern/devtools.js +57 -0
- package/build/modern/devtools.js.map +1 -0
- package/build/modern/index.cjs +45 -0
- package/build/modern/index.cjs.map +1 -0
- package/build/modern/index.d.cts +8 -0
- package/build/modern/index.d.ts +8 -0
- package/build/modern/index.js +11 -0
- package/build/modern/index.js.map +1 -0
- package/build/modern/production.cjs +43 -0
- package/build/modern/production.cjs.map +1 -0
- package/build/modern/production.d.cts +8 -0
- package/build/modern/production.d.ts +8 -0
- package/build/modern/production.js +9 -0
- package/build/modern/production.js.map +1 -0
- package/package.json +32 -27
- package/src/__tests__/devtools.test.tsx +1 -1009
- package/src/__tests__/utils.tsx +4 -4
- package/src/devtools.tsx +59 -1309
- package/src/index.ts +0 -7
- package/src/production.ts +5 -0
- package/build/lib/Explorer.d.ts +0 -50
- package/build/lib/Explorer.esm.js +0 -254
- package/build/lib/Explorer.esm.js.map +0 -1
- package/build/lib/Explorer.js +0 -288
- package/build/lib/Explorer.js.map +0 -1
- package/build/lib/Explorer.mjs +0 -254
- package/build/lib/Explorer.mjs.map +0 -1
- package/build/lib/Logo.d.ts +0 -1
- package/build/lib/Logo.esm.js +0 -32
- package/build/lib/Logo.esm.js.map +0 -1
- package/build/lib/Logo.js +0 -55
- package/build/lib/Logo.js.map +0 -1
- package/build/lib/Logo.mjs +0 -32
- package/build/lib/Logo.mjs.map +0 -1
- package/build/lib/__tests__/Explorer.test.d.ts +0 -1
- package/build/lib/__tests__/devtools.test.d.ts +0 -1
- package/build/lib/__tests__/utils.d.ts +0 -22
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.esm.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js +0 -19
- package/build/lib/_virtual/_rollupPluginBabelHelpers.js.map +0 -1
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs +0 -17
- package/build/lib/_virtual/_rollupPluginBabelHelpers.mjs.map +0 -1
- package/build/lib/devtools.d.ts +0 -113
- package/build/lib/devtools.esm.js +0 -900
- package/build/lib/devtools.esm.js.map +0 -1
- package/build/lib/devtools.js +0 -921
- package/build/lib/devtools.js.map +0 -1
- package/build/lib/devtools.mjs +0 -869
- package/build/lib/devtools.mjs.map +0 -1
- package/build/lib/index.d.ts +0 -3
- package/build/lib/index.esm.js +0 -12
- package/build/lib/index.esm.js.map +0 -1
- package/build/lib/index.js +0 -15
- package/build/lib/index.js.map +0 -1
- package/build/lib/index.mjs +0 -12
- package/build/lib/index.mjs.map +0 -1
- package/build/lib/index.prod.d.ts +0 -3
- package/build/lib/index.prod.esm.js +0 -1559
- package/build/lib/index.prod.esm.js.map +0 -1
- package/build/lib/index.prod.js +0 -1580
- package/build/lib/index.prod.js.map +0 -1
- package/build/lib/index.prod.mjs +0 -1528
- package/build/lib/index.prod.mjs.map +0 -1
- package/build/lib/noop.d.ts +0 -2
- package/build/lib/screenreader.d.ts +0 -3
- package/build/lib/screenreader.esm.js +0 -17
- package/build/lib/screenreader.esm.js.map +0 -1
- package/build/lib/screenreader.js +0 -40
- package/build/lib/screenreader.js.map +0 -1
- package/build/lib/screenreader.mjs +0 -17
- package/build/lib/screenreader.mjs.map +0 -1
- package/build/lib/styledComponents.d.ts +0 -8
- package/build/lib/styledComponents.esm.js +0 -95
- package/build/lib/styledComponents.esm.js.map +0 -1
- package/build/lib/styledComponents.js +0 -104
- package/build/lib/styledComponents.js.map +0 -1
- package/build/lib/styledComponents.mjs +0 -95
- package/build/lib/styledComponents.mjs.map +0 -1
- package/build/lib/theme.d.ts +0 -36
- package/build/lib/theme.esm.js +0 -33
- package/build/lib/theme.esm.js.map +0 -1
- package/build/lib/theme.js +0 -56
- package/build/lib/theme.js.map +0 -1
- package/build/lib/theme.mjs +0 -33
- package/build/lib/theme.mjs.map +0 -1
- package/build/lib/useLocalStorage.d.ts +0 -1
- package/build/lib/useLocalStorage.esm.js +0 -40
- package/build/lib/useLocalStorage.esm.js.map +0 -1
- package/build/lib/useLocalStorage.js +0 -63
- package/build/lib/useLocalStorage.js.map +0 -1
- package/build/lib/useLocalStorage.mjs +0 -40
- package/build/lib/useLocalStorage.mjs.map +0 -1
- package/build/lib/useMediaQuery.d.ts +0 -1
- package/build/lib/useMediaQuery.esm.js +0 -36
- package/build/lib/useMediaQuery.esm.js.map +0 -1
- package/build/lib/useMediaQuery.js +0 -59
- package/build/lib/useMediaQuery.js.map +0 -1
- package/build/lib/useMediaQuery.mjs +0 -36
- package/build/lib/useMediaQuery.mjs.map +0 -1
- package/build/lib/utils.d.ts +0 -79
- package/build/lib/utils.esm.js +0 -184
- package/build/lib/utils.esm.js.map +0 -1
- package/build/lib/utils.js +0 -218
- package/build/lib/utils.js.map +0 -1
- package/build/lib/utils.mjs +0 -184
- package/build/lib/utils.mjs.map +0 -1
- package/build/umd/index.development.js +0 -3195
- package/build/umd/index.development.js.map +0 -1
- package/build/umd/index.production.js +0 -2
- package/build/umd/index.production.js.map +0 -1
- package/src/Explorer.tsx +0 -385
- package/src/Logo.tsx +0 -32
- package/src/__tests__/Explorer.test.tsx +0 -150
- package/src/noop.ts +0 -7
- package/src/screenreader.tsx +0 -16
- package/src/styledComponents.ts +0 -110
- package/src/theme.tsx +0 -33
- package/src/useLocalStorage.ts +0 -52
- package/src/useMediaQuery.ts +0 -34
- package/src/utils.ts +0 -319
package/build/lib/utils.mjs
DELETED
|
@@ -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
|
package/build/lib/utils.mjs.map
DELETED
|
@@ -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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"}
|