@tanstack/react-query-devtools 4.10.1 → 4.10.3

package/build/lib/utils.esm.js.map

@@ -1 +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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\n}\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\nexport const sortFns: Record<string, (a: Query, b: Query) => number> = {\n  'Status > Last Updated': (a, b) =>\n    getStatusRank(a) === getStatusRank(b)\n      ? (sortFns['Last Updated']?.(a, b) as number)\n      : getStatusRank(a) > getStatusRank(b)\n      ? 1\n      : -1,\n  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),\n  'Last Updated': (a, b) =>\n    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,\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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","sortFns","a","b","queryHash","dataUpdatedAt"],"mappings":"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"}
+{"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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\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"],"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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns"],"mappings":"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"}

package/build/lib/utils.js

@@ -83,18 +83,26 @@ const displayValue = value => {
     json
   } = SuperJSON__default["default"].serialize(value);
   return JSON.stringify(json);
-};
+}; // Sorting functions
 
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
 
-const sortFns = {
-  'Status > Last Updated': (a, b) => {
-    var _sortFns$LastUpdated;
+const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
+
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+const statusAndDateSort = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b);
+  }
+
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+};
 
-    return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
-  },
-  'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
-  'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+const sortFns = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort
 };
 
 exports.displayValue = displayValue;

package/build/lib/utils.js.map

@@ -1 +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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\n}\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\nexport const sortFns: Record<string, (a: Query, b: Query) => number> = {\n  'Status > Last Updated': (a, b) =>\n    getStatusRank(a) === getStatusRank(b)\n      ? (sortFns['Last Updated']?.(a, b) as number)\n      : getStatusRank(a) > getStatusRank(b)\n      ? 1\n      : -1,\n  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),\n  'Last Updated': (a, b) =>\n    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,\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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","sortFns","a","b","queryHash","dataUpdatedAt"],"mappings":"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"}
+{"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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\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"],"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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns"],"mappings":"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"}

package/build/lib/utils.mjs

@@ -56,18 +56,26 @@ const displayValue = value => {
     json
   } = SuperJSON.serialize(value);
   return JSON.stringify(json);
-};
+}; // Sorting functions
 
 const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
 
-const sortFns = {
-  'Status > Last Updated': (a, b) => {
-    var _sortFns$LastUpdated;
+const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
+
+const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+const statusAndDateSort = (a, b) => {
+  if (getStatusRank(a) === getStatusRank(b)) {
+    return dateSort(a, b);
+  }
 
-    return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
-  },
-  'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
-  'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+  return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+};
+
+const sortFns = {
+  'Status > Last Updated': statusAndDateSort,
+  'Query Hash': queryHashSort,
+  'Last Updated': dateSort
 };
 
 export { displayValue, getQueryStatusColor, getQueryStatusLabel, sortFns, styled, useIsMounted };

package/build/lib/utils.mjs.map

@@ -1 +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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\n}\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\nexport const sortFns: Record<string, (a: Query, b: Query) => number> = {\n  'Status > Last Updated': (a, b) =>\n    getStatusRank(a) === getStatusRank(b)\n      ? (sortFns['Last Updated']?.(a, b) as number)\n      : getStatusRank(a) > getStatusRank(b)\n      ? 1\n      : -1,\n  'Query Hash': (a, b) => (a.queryHash > b.queryHash ? 1 : -1),\n  'Last Updated': (a, b) =>\n    a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1,\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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","sortFns","a","b","queryHash","dataUpdatedAt"],"mappings":"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"}
+{"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 */\nexport const displayValue = (value: unknown) => {\n  const { json } = SuperJSON.serialize(value)\n\n  return JSON.stringify(json)\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"],"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","json","SuperJSON","serialize","JSON","stringify","getStatusRank","q","queryHashSort","a","b","queryHash","localeCompare","dateSort","dataUpdatedAt","statusAndDateSort","sortFns"],"mappings":"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"}

package/build/umd/index.development.js

@@ -932,17 +932,6 @@
     const spread = charNumber - firstIndex;
     return getRanking(spread);
   }
-  /**
-   * Sorts items that have a rank, index, and accessorIndex
-   * @param {Object} a - the first item to sort
-   * @param {Object} b - the second item to sort
-   * @return {Number} -1 if a should come first, 1 if b should come first, 0 if equal
-   */
-
-
-  function compareItems(a, b) {
-    return a.rank === b.rank ? 0 : a.rank > b.rank ? -1 : 1;
-  }
   /**
    * Prepares value for comparison by stringifying it, removing diacritics (if specified)
    * @param {String} value - the value to clean
@@ -2136,18 +2125,26 @@
       json
     } = SuperJSON.serialize(value);
     return JSON.stringify(json);
-  };
+  }; // Sorting functions
 
   const getStatusRank = q => q.state.fetchStatus !== 'idle' ? 0 : !q.getObserversCount() ? 3 : q.isStale() ? 2 : 1;
 
-  const sortFns = {
-    'Status > Last Updated': (a, b) => {
-      var _sortFns$LastUpdated;
+  const queryHashSort = (a, b) => a.queryHash.localeCompare(b.queryHash);
 
-      return getStatusRank(a) === getStatusRank(b) ? (_sortFns$LastUpdated = sortFns['Last Updated']) == null ? void 0 : _sortFns$LastUpdated.call(sortFns, a, b) : getStatusRank(a) > getStatusRank(b) ? 1 : -1;
-    },
-    'Query Hash': (a, b) => a.queryHash > b.queryHash ? 1 : -1,
-    'Last Updated': (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1
+  const dateSort = (a, b) => a.state.dataUpdatedAt < b.state.dataUpdatedAt ? 1 : -1;
+
+  const statusAndDateSort = (a, b) => {
+    if (getStatusRank(a) === getStatusRank(b)) {
+      return dateSort(a, b);
+    }
+
+    return getStatusRank(a) > getStatusRank(b) ? 1 : -1;
+  };
+
+  const sortFns = {
+    'Status > Last Updated': statusAndDateSort,
+    'Query Hash': queryHashSort,
+    'Last Updated': dateSort
   };
 
   function ScreenReader({
@@ -2700,27 +2697,21 @@
     const queryCache = queryClient.getQueryCache();
     const [sort, setSort] = useLocalStorage('reactQueryDevtoolsSortFn', Object.keys(sortFns)[0]);
     const [filter, setFilter] = useLocalStorage('reactQueryDevtoolsFilter', '');
-    const [sortDesc, setSortDesc] = useLocalStorage('reactQueryDevtoolsSortDesc', false);
+    const [baseSort, setBaseSort] = useLocalStorage('reactQueryDevtoolsBaseSort', 1);
     const sortFn = React__namespace.useMemo(() => sortFns[sort], [sort]);
     const queriesCount = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().length, !isOpen);
     const [activeQueryHash, setActiveQueryHash] = useLocalStorage('reactQueryDevtoolsActiveQueryHash', '');
     const queries = React__namespace.useMemo(() => {
       const unsortedQueries = queryCache.getAll();
-      const sorted = queriesCount > 0 ? [...unsortedQueries].sort(sortFn) : [];
-
-      if (sortDesc) {
-        sorted.reverse();
-      }
 
-      if (!filter) {
-        return sorted;
+      if (queriesCount === 0) {
+        return [];
       }
 
-      let ranked = sorted.map(item => [item, rankItem(item.queryHash, filter)]);
-      ranked = ranked.filter(d => d[1].passed);
-      ranked = ranked.sort((a, b) => compareItems(a[1], b[1]));
-      return ranked.map(d => d[0]);
-    }, [sortDesc, sortFn, filter, queriesCount, queryCache]);
+      const filtered = filter ? unsortedQueries.filter(item => rankItem(item.queryHash, filter).passed) : [...unsortedQueries];
+      const sorted = sortFn ? filtered.sort((a, b) => sortFn(a, b) * baseSort) : filtered;
+      return sorted;
+    }, [baseSort, sortFn, filter, queriesCount, queryCache]);
     const [isMockOffline, setMockOffline] = React__namespace.useState(false);
     return /*#__PURE__*/React__namespace.createElement(ThemeProvider, {
       theme: defaultTheme
@@ -2822,12 +2813,12 @@
       value: key
     }, "Sort by ", key))), /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
-      onClick: () => setSortDesc(old => !old),
+      onClick: () => setBaseSort(old => old * -1),
       style: {
         padding: '.3em .4em',
         marginRight: '.5em'
       }
-    }, sortDesc ? '⬇ Desc' : '⬆ Asc'), /*#__PURE__*/React__namespace.createElement(Button, {
+    }, baseSort === 1 ? '⬆ Asc' : '⬇ Desc'), /*#__PURE__*/React__namespace.createElement(Button, {
       type: "button",
       onClick: () => {
         if (isMockOffline) {