@tanstack/react-query-devtools 5.0.0-alpha.25 → 5.0.0-alpha.27

package/build/lib/devtools.js

@@ -1,256 +1,57 @@
 'use client';
 'use strict';
 
-var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
-var useLocalStorage = require('./useLocalStorage.js');
-var utils = require('./utils.js');
-var screenreader = require('./screenreader.js');
-var theme = require('./theme.js');
-var Logo = require('./Logo.js');
-var CachePanel = require('./CachePanel/CachePanel.js');
+var reactQuery = require('@tanstack/react-query');
+var queryDevtools = require('@tanstack/query-devtools');
 
-function _interopNamespaceDefault(e) {
-  var n = Object.create(null);
-  if (e) {
-    Object.keys(e).forEach(function (k) {
-      if (k !== 'default') {
-        var d = Object.getOwnPropertyDescriptor(e, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: function () { return e[k]; }
-        });
-      }
-    });
-  }
-  n.default = e;
-  return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function ReactQueryDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = 'bottom-left',
-  containerElement: Container = 'aside',
-  queryClient,
-  styleNonce,
-  panelPosition: initialPanelPosition = 'bottom',
-  errorTypes = []
-}) {
-  const rootRef = React__namespace.useRef(null);
-  const panelRef = React__namespace.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage.default('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage.default('reactQueryDevtoolsHeight', utils.defaultPanelSize);
-  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage.default('reactQueryDevtoolsWidth', utils.defaultPanelSize);
-  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage.default('reactQueryDevtoolsPanelPosition', initialPanelPosition);
-  const [isResolvedOpen, setIsResolvedOpen] = React__namespace.useState(false);
-  const [isResizing, setIsResizing] = React__namespace.useState(false);
-  const isMounted = utils.useIsMounted();
-  const handleDragStart = (panelElement, startEvent) => {
-    if (!panelElement) return;
-    if (startEvent.button !== 0) return; // Only allow left click for drag
-    const isVertical = utils.isVerticalSide(panelPosition);
-    setIsResizing(true);
-    const {
-      height,
-      width
-    } = panelElement.getBoundingClientRect();
-    const startX = startEvent.clientX;
-    const startY = startEvent.clientY;
-    let newSize = 0;
-    const run = moveEvent => {
-      // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault();
-
-      // calculate the correct size based on mouse position and current panel position
-      // hint: it is different formula for the opposite sides
-      if (isVertical) {
-        newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
-        setDevtoolsWidth(newSize);
-      } else {
-        newSize = height + (panelPosition === 'bottom' ? startY - moveEvent.clientY : moveEvent.clientY - startY);
-        setDevtoolsHeight(newSize);
-      }
-      if (newSize < utils.minPanelSize) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-    const unsub = () => {
-      if (isResizing) {
-        setIsResizing(false);
-      }
-      document.removeEventListener('mousemove', run, false);
-      document.removeEventListener('mouseUp', unsub, false);
-    };
-    document.addEventListener('mousemove', run, false);
-    document.addEventListener('mouseup', unsub, false);
-  };
-  React__namespace.useEffect(() => {
-    setIsResolvedOpen(isOpen != null ? isOpen : false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-
-  // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
-  React__namespace.useEffect(() => {
-    const ref = panelRef.current;
-    if (ref) {
-      const handlePanelTransitionStart = () => {
-        if (isResolvedOpen) {
-          ref.style.visibility = 'visible';
-        }
-      };
-      const handlePanelTransitionEnd = () => {
-        if (!isResolvedOpen) {
-          ref.style.visibility = 'hidden';
-        }
-      };
-      ref.addEventListener('transitionstart', handlePanelTransitionStart);
-      ref.addEventListener('transitionend', handlePanelTransitionEnd);
-      return () => {
-        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-      };
+function ReactQueryDevtools(props) {
+  const queryClient = reactQuery.useQueryClient();
+  const ref = React.useRef(null);
+  const {
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  } = props;
+  const [devtools] = React.useState(new queryDevtools.TanstackQueryDevtools({
+    client: props.client || queryClient,
+    queryFlavor: 'React Query',
+    version: '5',
+    onlineManager: reactQuery.onlineManager,
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  }));
+  React.useEffect(() => {
+    if (buttonPosition) {
+      devtools.setButtonPosition(buttonPosition);
     }
-    return;
-  }, [isResolvedOpen]);
-  React__namespace.useEffect(() => {
-    var _rootRef$current;
-    if (isResolvedOpen && (_rootRef$current = rootRef.current) != null && _rootRef$current.parentElement) {
-      const {
-        parentElement
-      } = rootRef.current;
-      const styleProp = utils.getSidedProp('padding', panelPosition);
-      const isVertical = utils.isVerticalSide(panelPosition);
-      const previousPaddings = (({
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight
-      }) => ({
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight
-      }))(parentElement.style);
-      const run = () => {
-        // reset the padding
-        parentElement.style.padding = '0px';
-        parentElement.style.paddingTop = '0px';
-        parentElement.style.paddingBottom = '0px';
-        parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px';
-        // set the new padding based on the new panel position
-
-        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
-      };
-      run();
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run);
-        return () => {
-          window.removeEventListener('resize', run);
-          Object.entries(previousPaddings).forEach(([property, previousValue]) => {
-            parentElement.style[property] = previousValue;
-          });
-        };
-      }
+  }, [buttonPosition, devtools]);
+  React.useEffect(() => {
+    if (position) {
+      devtools.setPosition(position);
     }
-    return;
-  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
-  const {
-    style: panelStyle = {},
-    ...otherPanelProps
-  } = panelProps;
-  const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick,
-    ...otherToggleButtonProps
-  } = toggleButtonProps;
-
-  // get computed style based on panel position
-  const style = utils.getSidePanelStyle({
-    position: panelPosition,
-    devtoolsTheme: theme.defaultTheme,
-    isOpen: isResolvedOpen,
-    height: devtoolsHeight,
-    width: devtoolsWidth,
-    isResizing,
-    panelStyle
-  });
-
-  // Do not render on the server
-  if (!isMounted()) return null;
-  return /*#__PURE__*/React__namespace.createElement(Container, {
-    ref: rootRef,
-    className: "ReactQueryDevtools",
-    "aria-label": "React Query Devtools"
-  }, /*#__PURE__*/React__namespace.createElement(theme.ThemeProvider, {
-    theme: theme.defaultTheme
-  }, /*#__PURE__*/React__namespace.createElement(CachePanel.default, _rollupPluginBabelHelpers.extends({
-    ref: panelRef,
-    queryClient: queryClient,
-    styleNonce: styleNonce,
-    position: panelPosition,
-    onPositionChange: setPanelPosition,
-    showCloseButton: true,
-    closeButtonProps: closeButtonProps
-  }, otherPanelProps, {
-    style: style,
-    isOpen: isResolvedOpen,
-    setIsOpen: setIsOpen,
-    onDragStart: e => handleDragStart(panelRef.current, e),
-    errorTypes: errorTypes
-  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers.extends({
-    type: "button"
-  }, otherToggleButtonProps, {
-    "aria-label": "Open React Query Devtools",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "false",
-    onClick: e => {
-      setIsOpen(true);
-      onToggleClick == null ? void 0 : onToggleClick(e);
-    },
-    style: {
-      background: 'none',
-      border: 0,
-      padding: 0,
-      position: 'fixed',
-      zIndex: 99999,
-      display: 'inline-flex',
-      fontSize: '1.5em',
-      margin: '.5em',
-      cursor: 'pointer',
-      width: 'fit-content',
-      ...(position === 'top-right' ? {
-        top: '0',
-        right: '0'
-      } : position === 'top-left' ? {
-        top: '0',
-        left: '0'
-      } : position === 'bottom-right' ? {
-        bottom: '0',
-        right: '0'
-      } : {
-        bottom: '0',
-        left: '0'
-      }),
-      ...toggleButtonStyle
+  }, [position, devtools]);
+  React.useEffect(() => {
+    devtools.setInitialIsOpen(initialIsOpen || false);
+  }, [initialIsOpen, devtools]);
+  React.useEffect(() => {
+    devtools.setErrorTypes(errorTypes || []);
+  }, [errorTypes, devtools]);
+  React.useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current);
     }
-  }), /*#__PURE__*/React__namespace.createElement(Logo.default, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React__namespace.createElement(screenreader.default, {
-    text: "Open React Query Devtools"
-  })) : null);
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
 }
 
-exports.ReactQueryDevtoolsPanel = CachePanel.default;
 exports.ReactQueryDevtools = ReactQueryDevtools;
 //# sourceMappingURL=devtools.js.map

package/build/lib/devtools.js.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport useLocalStorage from './useLocalStorage'\nimport {\n  isVerticalSide,\n  useIsMounted,\n  getSidePanelStyle,\n  minPanelSize,\n  getSidedProp,\n  defaultPanelSize,\n} from './utils'\nimport type { Corner, Side } from './utils'\nimport ScreenReader from './screenreader'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\nimport Logo from './Logo'\n\nimport type { DevToolsErrorType } from './types'\nimport ReactQueryDevtoolsPanel from './CachePanel/CachePanel'\n\nexport { default as ReactQueryDevtoolsPanel } from './CachePanel/CachePanel'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.ComponentPropsWithoutRef<'div'>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: Corner\n  /**\n   * The position of the React Query devtools panel.\n   * Defaults to 'bottom'.\n   */\n  panelPosition?: Side\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'aside'.\n   */\n  containerElement?: string | any\n  /**\n   * nonce for style element for CSP\n   */\n  styleNonce?: string\n  /**\n   * Custom instance of QueryClient\n   */\n  queryClient?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport function ReactQueryDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'aside',\n  queryClient,\n  styleNonce,\n  panelPosition: initialPanelPosition = 'bottom',\n  errorTypes = [],\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'reactQueryDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number>(\n    'reactQueryDevtoolsHeight',\n    defaultPanelSize,\n  )\n  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage<number>(\n    'reactQueryDevtoolsWidth',\n    defaultPanelSize,\n  )\n\n  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage<Side>(\n    'reactQueryDevtoolsPanelPosition',\n    initialPanelPosition,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = React.useState(false)\n  const [isResizing, setIsResizing] = React.useState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (!panelElement) return\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    const isVertical = isVerticalSide(panelPosition)\n    setIsResizing(true)\n\n    const { height, width } = panelElement.getBoundingClientRect()\n    const startX = startEvent.clientX\n    const startY = startEvent.clientY\n    let newSize = 0\n\n    const run = (moveEvent: MouseEvent) => {\n      // prevent mouse selecting stuff with mouse drag\n      moveEvent.preventDefault()\n\n      // calculate the correct size based on mouse position and current panel position\n      // hint: it is different formula for the opposite sides\n      if (isVertical) {\n        newSize =\n          width +\n          (panelPosition === 'right'\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX)\n        setDevtoolsWidth(newSize)\n      } else {\n        newSize =\n          height +\n          (panelPosition === 'bottom'\n            ? startY - moveEvent.clientY\n            : moveEvent.clientY - startY)\n        setDevtoolsHeight(newSize)\n      }\n\n      if (newSize < minPanelSize) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      if (isResizing) {\n        setIsResizing(false)\n      }\n\n      document.removeEventListener('mousemove', run, false)\n      document.removeEventListener('mouseUp', unsub, false)\n    }\n\n    document.addEventListener('mousemove', run, false)\n    document.addEventListener('mouseup', unsub, false)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (!isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen && rootRef.current?.parentElement) {\n      const { parentElement } = rootRef.current\n      const styleProp = getSidedProp('padding', panelPosition)\n      const isVertical = isVerticalSide(panelPosition)\n\n      const previousPaddings = (({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }) => ({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }))(parentElement.style)\n\n      const run = () => {\n        // reset the padding\n        parentElement.style.padding = '0px'\n        parentElement.style.paddingTop = '0px'\n        parentElement.style.paddingBottom = '0px'\n        parentElement.style.paddingLeft = '0px'\n        parentElement.style.paddingRight = '0px'\n        // set the new padding based on the new panel position\n\n        parentElement.style[styleProp] = `${\n          isVertical ? devtoolsWidth : devtoolsHeight\n        }px`\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          Object.entries(previousPaddings).forEach(\n            ([property, previousValue]) => {\n              parentElement.style[property as keyof typeof previousPaddings] =\n                previousValue\n            },\n          )\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // get computed style based on panel position\n  const style = getSidePanelStyle({\n    position: panelPosition,\n    devtoolsTheme: theme,\n    isOpen: isResolvedOpen,\n    height: devtoolsHeight,\n    width: devtoolsWidth,\n    isResizing,\n    panelStyle,\n  })\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container\n      ref={rootRef}\n      className=\"ReactQueryDevtools\"\n      aria-label=\"React Query Devtools\"\n    >\n      <ThemeProvider theme={theme}>\n        <ReactQueryDevtoolsPanel\n          ref={panelRef as any}\n          queryClient={queryClient}\n          styleNonce={styleNonce}\n          position={panelPosition}\n          onPositionChange={setPanelPosition}\n          showCloseButton\n          closeButtonProps={closeButtonProps}\n          {...otherPanelProps}\n          style={style}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          onDragStart={(e) => handleDragStart(panelRef.current, e)}\n          errorTypes={errorTypes}\n        />\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open React Query Devtools\"\n          aria-controls=\"ReactQueryDevtoolsPanel\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick?.(e)\n          }}\n          style={{\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n              ? {\n                  top: '0',\n                  left: '0',\n                }\n              : position === 'bottom-right'\n              ? {\n                  bottom: '0',\n                  right: '0',\n                }\n              : {\n                  bottom: '0',\n                  left: '0',\n                }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n          <ScreenReader text=\"Open React Query Devtools\" />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n"],"names":["position","errorTypes","width","newSize","setIsResolvedOpen","ref","parentElement","paddingRight","run","window","Object","style","onClick","devtoolsTheme","isOpen","height","panelStyle","onToggleClick","background","border","padding","zIndex","display","fontSize","margin","cursor","top","right","left","bottom"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqEO;;;;;AAKLA;;;;;AAKAC;AACe;AACf;AACA;;;;AAcA;;;;AASA;;AAKE;AACA;;;;AAGgBC;AAAM;AACtB;AACA;;;AAIE;;;AAGA;AACA;AACA;AACEC;;AAMF;AACEA;;AAMF;;;AAIA;;AAEA;;;AAIA;;AAEA;;;;;;;;AAWFC;;;AAGF;AACA;;AAEE;AACA;;AAEI;AACEC;AACF;;;;AAKEA;AACF;;AAGFA;AACAA;AAEA;AACEA;AACAA;;AAEJ;AACA;AACF;;AAEsB;;;AAEVC;;AACR;AACA;;;;;;AAOEC;AACF;;;;;AAKEA;AACF;;AAGE;AACAD;AACAA;AACAA;AACAA;AACAA;AACA;;AAEAA;;AAKFE;AAEA;AACEC;AAEA;AACEA;AACAC;AAEIJ;AAEF;;AAGN;AACF;AACA;;;AAGMK;;AAA2C;;AAGjDA;AACAC;;AAEF;;AAEA;;AAEEZ;AACAa;AACAC;AACAC;AACAb;;AAEAc;AACF;;AAEA;AACA;AAEA;AAEI;AACA;;AACiC;AAElB;AAAa;AAExB;AACA;AACA;AACA;AACA;;AAEA;AAAmC;AAEnC;AACA;AACA;;AAEA;AAAuB;AAKvB;AAAa;AAEb;AACA;AACA;AACA;;;AAGEC;;AAEF;AACEC;AACAC;AACAC;AACApB;AACAqB;AACAC;AACAC;AACAC;AACAC;AACAvB;;AAGMwB;AACAC;AACF;AAGED;AACAE;AACF;AAGEC;AACAF;AACF;AAEEE;AACAD;AACF;;AAEN;AAAE;AAEI;;AACQ;;AAKxB;;;"}
+{"version":3,"file":"devtools.js","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n  DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes } = props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: props.client || queryClient,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n    }),\n  )\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={ref}></div>\n}\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools"],"mappings":";;;;;;;AAsCO;;AAIL;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEY;;AACd;;"}

package/build/lib/devtools.mjs

@@ -1,233 +1,55 @@
 'use client';
-import { extends as _extends } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import * as React from 'react';
-import useLocalStorage from './useLocalStorage.mjs';
-import { defaultPanelSize, useIsMounted, getSidedProp, getSidePanelStyle, isVerticalSide, minPanelSize } from './utils.mjs';
-import ScreenReader from './screenreader.mjs';
-import { defaultTheme, ThemeProvider } from './theme.mjs';
-import Logo from './Logo.mjs';
-import ReactQueryDevtoolsPanel from './CachePanel/CachePanel.mjs';
+import React, { useRef, useState, useEffect } from 'react';
+import { useQueryClient, onlineManager } from '@tanstack/react-query';
+import { TanstackQueryDevtools } from '@tanstack/query-devtools';
 
-function ReactQueryDevtools({
-  initialIsOpen,
-  panelProps = {},
-  closeButtonProps = {},
-  toggleButtonProps = {},
-  position = 'bottom-left',
-  containerElement: Container = 'aside',
-  queryClient,
-  styleNonce,
-  panelPosition: initialPanelPosition = 'bottom',
-  errorTypes = []
-}) {
-  const rootRef = React.useRef(null);
-  const panelRef = React.useRef(null);
-  const [isOpen, setIsOpen] = useLocalStorage('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('reactQueryDevtoolsHeight', defaultPanelSize);
-  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage('reactQueryDevtoolsWidth', defaultPanelSize);
-  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage('reactQueryDevtoolsPanelPosition', initialPanelPosition);
-  const [isResolvedOpen, setIsResolvedOpen] = React.useState(false);
-  const [isResizing, setIsResizing] = React.useState(false);
-  const isMounted = useIsMounted();
-  const handleDragStart = (panelElement, startEvent) => {
-    if (!panelElement) return;
-    if (startEvent.button !== 0) return; // Only allow left click for drag
-    const isVertical = isVerticalSide(panelPosition);
-    setIsResizing(true);
-    const {
-      height,
-      width
-    } = panelElement.getBoundingClientRect();
-    const startX = startEvent.clientX;
-    const startY = startEvent.clientY;
-    let newSize = 0;
-    const run = moveEvent => {
-      // prevent mouse selecting stuff with mouse drag
-      moveEvent.preventDefault();
-
-      // calculate the correct size based on mouse position and current panel position
-      // hint: it is different formula for the opposite sides
-      if (isVertical) {
-        newSize = width + (panelPosition === 'right' ? startX - moveEvent.clientX : moveEvent.clientX - startX);
-        setDevtoolsWidth(newSize);
-      } else {
-        newSize = height + (panelPosition === 'bottom' ? startY - moveEvent.clientY : moveEvent.clientY - startY);
-        setDevtoolsHeight(newSize);
-      }
-      if (newSize < minPanelSize) {
-        setIsOpen(false);
-      } else {
-        setIsOpen(true);
-      }
-    };
-    const unsub = () => {
-      if (isResizing) {
-        setIsResizing(false);
-      }
-      document.removeEventListener('mousemove', run, false);
-      document.removeEventListener('mouseUp', unsub, false);
-    };
-    document.addEventListener('mousemove', run, false);
-    document.addEventListener('mouseup', unsub, false);
-  };
-  React.useEffect(() => {
-    setIsResolvedOpen(isOpen ?? false);
-  }, [isOpen, isResolvedOpen, setIsResolvedOpen]);
-
-  // Toggle panel visibility before/after transition (depending on direction).
-  // Prevents focusing in a closed panel.
-  React.useEffect(() => {
-    const ref = panelRef.current;
-    if (ref) {
-      const handlePanelTransitionStart = () => {
-        if (isResolvedOpen) {
-          ref.style.visibility = 'visible';
-        }
-      };
-      const handlePanelTransitionEnd = () => {
-        if (!isResolvedOpen) {
-          ref.style.visibility = 'hidden';
-        }
-      };
-      ref.addEventListener('transitionstart', handlePanelTransitionStart);
-      ref.addEventListener('transitionend', handlePanelTransitionEnd);
-      return () => {
-        ref.removeEventListener('transitionstart', handlePanelTransitionStart);
-        ref.removeEventListener('transitionend', handlePanelTransitionEnd);
-      };
+function ReactQueryDevtools(props) {
+  const queryClient = useQueryClient();
+  const ref = useRef(null);
+  const {
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  } = props;
+  const [devtools] = useState(new TanstackQueryDevtools({
+    client: props.client || queryClient,
+    queryFlavor: 'React Query',
+    version: '5',
+    onlineManager,
+    buttonPosition,
+    position,
+    initialIsOpen,
+    errorTypes
+  }));
+  useEffect(() => {
+    if (buttonPosition) {
+      devtools.setButtonPosition(buttonPosition);
     }
-    return;
-  }, [isResolvedOpen]);
-  React.useEffect(() => {
-    if (isResolvedOpen && rootRef.current?.parentElement) {
-      const {
-        parentElement
-      } = rootRef.current;
-      const styleProp = getSidedProp('padding', panelPosition);
-      const isVertical = isVerticalSide(panelPosition);
-      const previousPaddings = (({
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight
-      }) => ({
-        padding,
-        paddingTop,
-        paddingBottom,
-        paddingLeft,
-        paddingRight
-      }))(parentElement.style);
-      const run = () => {
-        // reset the padding
-        parentElement.style.padding = '0px';
-        parentElement.style.paddingTop = '0px';
-        parentElement.style.paddingBottom = '0px';
-        parentElement.style.paddingLeft = '0px';
-        parentElement.style.paddingRight = '0px';
-        // set the new padding based on the new panel position
-
-        parentElement.style[styleProp] = `${isVertical ? devtoolsWidth : devtoolsHeight}px`;
-      };
-      run();
-      if (typeof window !== 'undefined') {
-        window.addEventListener('resize', run);
-        return () => {
-          window.removeEventListener('resize', run);
-          Object.entries(previousPaddings).forEach(([property, previousValue]) => {
-            parentElement.style[property] = previousValue;
-          });
-        };
-      }
+  }, [buttonPosition, devtools]);
+  useEffect(() => {
+    if (position) {
+      devtools.setPosition(position);
     }
-    return;
-  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
-  const {
-    style: panelStyle = {},
-    ...otherPanelProps
-  } = panelProps;
-  const {
-    style: toggleButtonStyle = {},
-    onClick: onToggleClick,
-    ...otherToggleButtonProps
-  } = toggleButtonProps;
-
-  // get computed style based on panel position
-  const style = getSidePanelStyle({
-    position: panelPosition,
-    devtoolsTheme: defaultTheme,
-    isOpen: isResolvedOpen,
-    height: devtoolsHeight,
-    width: devtoolsWidth,
-    isResizing,
-    panelStyle
-  });
-
-  // Do not render on the server
-  if (!isMounted()) return null;
-  return /*#__PURE__*/React.createElement(Container, {
-    ref: rootRef,
-    className: "ReactQueryDevtools",
-    "aria-label": "React Query Devtools"
-  }, /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: defaultTheme
-  }, /*#__PURE__*/React.createElement(ReactQueryDevtoolsPanel, _extends({
-    ref: panelRef,
-    queryClient: queryClient,
-    styleNonce: styleNonce,
-    position: panelPosition,
-    onPositionChange: setPanelPosition,
-    showCloseButton: true,
-    closeButtonProps: closeButtonProps
-  }, otherPanelProps, {
-    style: style,
-    isOpen: isResolvedOpen,
-    setIsOpen: setIsOpen,
-    onDragStart: e => handleDragStart(panelRef.current, e),
-    errorTypes: errorTypes
-  }))), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
-    type: "button"
-  }, otherToggleButtonProps, {
-    "aria-label": "Open React Query Devtools",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "false",
-    onClick: e => {
-      setIsOpen(true);
-      onToggleClick?.(e);
-    },
-    style: {
-      background: 'none',
-      border: 0,
-      padding: 0,
-      position: 'fixed',
-      zIndex: 99999,
-      display: 'inline-flex',
-      fontSize: '1.5em',
-      margin: '.5em',
-      cursor: 'pointer',
-      width: 'fit-content',
-      ...(position === 'top-right' ? {
-        top: '0',
-        right: '0'
-      } : position === 'top-left' ? {
-        top: '0',
-        left: '0'
-      } : position === 'bottom-right' ? {
-        bottom: '0',
-        right: '0'
-      } : {
-        bottom: '0',
-        left: '0'
-      }),
-      ...toggleButtonStyle
+  }, [position, devtools]);
+  useEffect(() => {
+    devtools.setInitialIsOpen(initialIsOpen || false);
+  }, [initialIsOpen, devtools]);
+  useEffect(() => {
+    devtools.setErrorTypes(errorTypes || []);
+  }, [errorTypes, devtools]);
+  useEffect(() => {
+    if (ref.current) {
+      devtools.mount(ref.current);
     }
-  }), /*#__PURE__*/React.createElement(Logo, {
-    "aria-hidden": true
-  }), /*#__PURE__*/React.createElement(ScreenReader, {
-    text: "Open React Query Devtools"
-  })) : null);
+    return () => {
+      devtools.unmount();
+    };
+  }, [devtools]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  });
 }
 
-export { ReactQueryDevtools, ReactQueryDevtoolsPanel };
+export { ReactQueryDevtools };
 //# sourceMappingURL=devtools.mjs.map

package/build/lib/devtools.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"devtools.mjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport * as React from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport useLocalStorage from './useLocalStorage'\nimport {\n  isVerticalSide,\n  useIsMounted,\n  getSidePanelStyle,\n  minPanelSize,\n  getSidedProp,\n  defaultPanelSize,\n} from './utils'\nimport type { Corner, Side } from './utils'\nimport ScreenReader from './screenreader'\nimport { ThemeProvider, defaultTheme as theme } from './theme'\nimport Logo from './Logo'\n\nimport type { DevToolsErrorType } from './types'\nimport ReactQueryDevtoolsPanel from './CachePanel/CachePanel'\n\nexport { default as ReactQueryDevtoolsPanel } from './CachePanel/CachePanel'\n\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.\n   */\n  panelProps?: React.ComponentPropsWithoutRef<'div'>\n  /**\n   * Use this to add props to the close button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  closeButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * Use this to add props to the toggle button. For example, you can add className, style (merge and override default style), onClick (extend default handler), etc.\n   */\n  toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * Defaults to 'bottom-left'.\n   */\n  position?: Corner\n  /**\n   * The position of the React Query devtools panel.\n   * Defaults to 'bottom'.\n   */\n  panelPosition?: Side\n  /**\n   * Use this to render the devtools inside a different type of container element for a11y purposes.\n   * Any string which corresponds to a valid intrinsic JSX element is allowed.\n   * Defaults to 'aside'.\n   */\n  containerElement?: string | any\n  /**\n   * nonce for style element for CSP\n   */\n  styleNonce?: string\n  /**\n   * Custom instance of QueryClient\n   */\n  queryClient?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport function ReactQueryDevtools({\n  initialIsOpen,\n  panelProps = {},\n  closeButtonProps = {},\n  toggleButtonProps = {},\n  position = 'bottom-left',\n  containerElement: Container = 'aside',\n  queryClient,\n  styleNonce,\n  panelPosition: initialPanelPosition = 'bottom',\n  errorTypes = [],\n}: DevtoolsOptions): React.ReactElement | null {\n  const rootRef = React.useRef<HTMLDivElement>(null)\n  const panelRef = React.useRef<HTMLDivElement>(null)\n  const [isOpen, setIsOpen] = useLocalStorage(\n    'reactQueryDevtoolsOpen',\n    initialIsOpen,\n  )\n  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage<number>(\n    'reactQueryDevtoolsHeight',\n    defaultPanelSize,\n  )\n  const [devtoolsWidth, setDevtoolsWidth] = useLocalStorage<number>(\n    'reactQueryDevtoolsWidth',\n    defaultPanelSize,\n  )\n\n  const [panelPosition = 'bottom', setPanelPosition] = useLocalStorage<Side>(\n    'reactQueryDevtoolsPanelPosition',\n    initialPanelPosition,\n  )\n\n  const [isResolvedOpen, setIsResolvedOpen] = React.useState(false)\n  const [isResizing, setIsResizing] = React.useState(false)\n  const isMounted = useIsMounted()\n\n  const handleDragStart = (\n    panelElement: HTMLDivElement | null,\n    startEvent: React.MouseEvent<HTMLDivElement, MouseEvent>,\n  ) => {\n    if (!panelElement) return\n    if (startEvent.button !== 0) return // Only allow left click for drag\n    const isVertical = isVerticalSide(panelPosition)\n    setIsResizing(true)\n\n    const { height, width } = panelElement.getBoundingClientRect()\n    const startX = startEvent.clientX\n    const startY = startEvent.clientY\n    let newSize = 0\n\n    const run = (moveEvent: MouseEvent) => {\n      // prevent mouse selecting stuff with mouse drag\n      moveEvent.preventDefault()\n\n      // calculate the correct size based on mouse position and current panel position\n      // hint: it is different formula for the opposite sides\n      if (isVertical) {\n        newSize =\n          width +\n          (panelPosition === 'right'\n            ? startX - moveEvent.clientX\n            : moveEvent.clientX - startX)\n        setDevtoolsWidth(newSize)\n      } else {\n        newSize =\n          height +\n          (panelPosition === 'bottom'\n            ? startY - moveEvent.clientY\n            : moveEvent.clientY - startY)\n        setDevtoolsHeight(newSize)\n      }\n\n      if (newSize < minPanelSize) {\n        setIsOpen(false)\n      } else {\n        setIsOpen(true)\n      }\n    }\n\n    const unsub = () => {\n      if (isResizing) {\n        setIsResizing(false)\n      }\n\n      document.removeEventListener('mousemove', run, false)\n      document.removeEventListener('mouseUp', unsub, false)\n    }\n\n    document.addEventListener('mousemove', run, false)\n    document.addEventListener('mouseup', unsub, false)\n  }\n\n  React.useEffect(() => {\n    setIsResolvedOpen(isOpen ?? false)\n  }, [isOpen, isResolvedOpen, setIsResolvedOpen])\n\n  // Toggle panel visibility before/after transition (depending on direction).\n  // Prevents focusing in a closed panel.\n  React.useEffect(() => {\n    const ref = panelRef.current\n    if (ref) {\n      const handlePanelTransitionStart = () => {\n        if (isResolvedOpen) {\n          ref.style.visibility = 'visible'\n        }\n      }\n\n      const handlePanelTransitionEnd = () => {\n        if (!isResolvedOpen) {\n          ref.style.visibility = 'hidden'\n        }\n      }\n\n      ref.addEventListener('transitionstart', handlePanelTransitionStart)\n      ref.addEventListener('transitionend', handlePanelTransitionEnd)\n\n      return () => {\n        ref.removeEventListener('transitionstart', handlePanelTransitionStart)\n        ref.removeEventListener('transitionend', handlePanelTransitionEnd)\n      }\n    }\n    return\n  }, [isResolvedOpen])\n\n  React.useEffect(() => {\n    if (isResolvedOpen && rootRef.current?.parentElement) {\n      const { parentElement } = rootRef.current\n      const styleProp = getSidedProp('padding', panelPosition)\n      const isVertical = isVerticalSide(panelPosition)\n\n      const previousPaddings = (({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }) => ({\n        padding,\n        paddingTop,\n        paddingBottom,\n        paddingLeft,\n        paddingRight,\n      }))(parentElement.style)\n\n      const run = () => {\n        // reset the padding\n        parentElement.style.padding = '0px'\n        parentElement.style.paddingTop = '0px'\n        parentElement.style.paddingBottom = '0px'\n        parentElement.style.paddingLeft = '0px'\n        parentElement.style.paddingRight = '0px'\n        // set the new padding based on the new panel position\n\n        parentElement.style[styleProp] = `${\n          isVertical ? devtoolsWidth : devtoolsHeight\n        }px`\n      }\n\n      run()\n\n      if (typeof window !== 'undefined') {\n        window.addEventListener('resize', run)\n\n        return () => {\n          window.removeEventListener('resize', run)\n          Object.entries(previousPaddings).forEach(\n            ([property, previousValue]) => {\n              parentElement.style[property as keyof typeof previousPaddings] =\n                previousValue\n            },\n          )\n        }\n      }\n    }\n    return\n  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth])\n\n  const { style: panelStyle = {}, ...otherPanelProps } = panelProps\n\n  const {\n    style: toggleButtonStyle = {},\n    onClick: onToggleClick,\n    ...otherToggleButtonProps\n  } = toggleButtonProps\n\n  // get computed style based on panel position\n  const style = getSidePanelStyle({\n    position: panelPosition,\n    devtoolsTheme: theme,\n    isOpen: isResolvedOpen,\n    height: devtoolsHeight,\n    width: devtoolsWidth,\n    isResizing,\n    panelStyle,\n  })\n\n  // Do not render on the server\n  if (!isMounted()) return null\n\n  return (\n    <Container\n      ref={rootRef}\n      className=\"ReactQueryDevtools\"\n      aria-label=\"React Query Devtools\"\n    >\n      <ThemeProvider theme={theme}>\n        <ReactQueryDevtoolsPanel\n          ref={panelRef as any}\n          queryClient={queryClient}\n          styleNonce={styleNonce}\n          position={panelPosition}\n          onPositionChange={setPanelPosition}\n          showCloseButton\n          closeButtonProps={closeButtonProps}\n          {...otherPanelProps}\n          style={style}\n          isOpen={isResolvedOpen}\n          setIsOpen={setIsOpen}\n          onDragStart={(e) => handleDragStart(panelRef.current, e)}\n          errorTypes={errorTypes}\n        />\n      </ThemeProvider>\n      {!isResolvedOpen ? (\n        <button\n          type=\"button\"\n          {...otherToggleButtonProps}\n          aria-label=\"Open React Query Devtools\"\n          aria-controls=\"ReactQueryDevtoolsPanel\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n          onClick={(e) => {\n            setIsOpen(true)\n            onToggleClick?.(e)\n          }}\n          style={{\n            background: 'none',\n            border: 0,\n            padding: 0,\n            position: 'fixed',\n            zIndex: 99999,\n            display: 'inline-flex',\n            fontSize: '1.5em',\n            margin: '.5em',\n            cursor: 'pointer',\n            width: 'fit-content',\n            ...(position === 'top-right'\n              ? {\n                  top: '0',\n                  right: '0',\n                }\n              : position === 'top-left'\n              ? {\n                  top: '0',\n                  left: '0',\n                }\n              : position === 'bottom-right'\n              ? {\n                  bottom: '0',\n                  right: '0',\n                }\n              : {\n                  bottom: '0',\n                  left: '0',\n                }),\n            ...toggleButtonStyle,\n          }}\n        >\n          <Logo aria-hidden />\n          <ScreenReader text=\"Open React Query Devtools\" />\n        </button>\n      ) : null}\n    </Container>\n  )\n}\n"],"names":["position","errorTypes","width","newSize","setIsResolvedOpen","ref","parentElement","paddingRight","run","window","Object","style","onClick","devtoolsTheme","isOpen","height","panelStyle","background","border","padding","zIndex","display","fontSize","margin","cursor","top","right","left","bottom"],"mappings":";;;;;;;;;;AAqEO;;;;;AAKLA;;;;;AAKAC;AACe;AACf;AACA;;;;AAcA;;;;AASA;;AAKE;AACA;;;;AAGgBC;AAAM;AACtB;AACA;;;AAIE;;;AAGA;AACA;AACA;AACEC;;AAMF;AACEA;;AAMF;;;AAIA;;AAEA;;;AAIA;;AAEA;;;;;;;;AAWFC;;;AAGF;AACA;;AAEE;AACA;;AAEI;AACEC;AACF;;;;AAKEA;AACF;;AAGFA;AACAA;AAEA;AACEA;AACAA;;AAEJ;AACA;AACF;;AAGE;;AACUC;;AACR;AACA;;;;;;AAOEC;AACF;;;;;AAKEA;AACF;;AAGE;AACAD;AACAA;AACAA;AACAA;AACAA;AACA;;AAEAA;;AAKFE;AAEA;AACEC;AAEA;AACEA;AACAC;AAEIJ;AAEF;;AAGN;AACF;AACA;;;AAGMK;;AAA2C;;AAGjDA;AACAC;;AAEF;;AAEA;;AAEEZ;AACAa;AACAC;AACAC;AACAb;;AAEAc;AACF;;AAEA;AACA;AAEA;AAEI;AACA;;AACiC;AAElB;AAAa;AAExB;AACA;AACA;AACA;AACA;;AAEA;AAAmC;AAEnC;AACA;AACA;;AAEA;AAAuB;AAKvB;AAAa;AAEb;AACA;AACA;AACA;;;;;AAKA;AACEC;AACAC;AACAC;AACAnB;AACAoB;AACAC;AACAC;AACAC;AACAC;AACAtB;;AAGMuB;AACAC;AACF;AAGED;AACAE;AACF;AAGEC;AACAF;AACF;AAEEE;AACAD;AACF;;AAEN;AAAE;AAEI;;AACQ;;AAKxB;;"}
+{"version":3,"file":"devtools.mjs","sources":["../../src/devtools.tsx"],"sourcesContent":["'use client'\nimport { useRef, useState, useEffect } from 'react'\nimport type { QueryClient } from '@tanstack/react-query'\nimport { useQueryClient, onlineManager } from '@tanstack/react-query'\nimport type {\n  DevtoolsButtonPosition,\n  DevtoolsPosition,\n  DevToolsErrorType,\n} from '@tanstack/query-devtools'\nimport { TanstackQueryDevtools } from '@tanstack/query-devtools'\nimport React from 'react'\nexport interface DevtoolsOptions {\n  /**\n   * Set this true if you want the dev tools to default to being open\n   */\n  initialIsOpen?: boolean\n  /**\n   * The position of the React Query logo to open and close the devtools panel.\n   * 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n   * Defaults to 'bottom-left'.\n   */\n  buttonPosition?: DevtoolsButtonPosition\n  /**\n   * The position of the React Query devtools panel.\n   * 'top' | 'bottom' | 'left' | 'right'\n   * Defaults to 'bottom'.\n   */\n  position?: DevtoolsPosition\n  /**\n   * Custom instance of QueryClient\n   */\n  client?: QueryClient\n  /**\n   * Use this so you can define custom errors that can be shown in the devtools.\n   */\n  errorTypes?: DevToolsErrorType[]\n}\n\nexport function ReactQueryDevtools(\n  props: DevtoolsOptions,\n): React.ReactElement | null {\n  const queryClient = useQueryClient()\n  const ref = useRef<HTMLDivElement>(null)\n  const { buttonPosition, position, initialIsOpen, errorTypes } = props\n  const [devtools] = useState(\n    new TanstackQueryDevtools({\n      client: props.client || queryClient,\n      queryFlavor: 'React Query',\n      version: '5',\n      onlineManager,\n      buttonPosition,\n      position,\n      initialIsOpen,\n      errorTypes,\n    }),\n  )\n\n  useEffect(() => {\n    if (buttonPosition) {\n      devtools.setButtonPosition(buttonPosition)\n    }\n  }, [buttonPosition, devtools])\n\n  useEffect(() => {\n    if (position) {\n      devtools.setPosition(position)\n    }\n  }, [position, devtools])\n\n  useEffect(() => {\n    devtools.setInitialIsOpen(initialIsOpen || false)\n  }, [initialIsOpen, devtools])\n\n  useEffect(() => {\n    devtools.setErrorTypes(errorTypes || [])\n  }, [errorTypes, devtools])\n\n  useEffect(() => {\n    if (ref.current) {\n      devtools.mount(ref.current)\n    }\n\n    return () => {\n      devtools.unmount()\n    }\n  }, [devtools])\n\n  return <div ref={ref}></div>\n}\n"],"names":["errorTypes","client","queryFlavor","version","useEffect","devtools"],"mappings":";;;;;AAsCO;;AAIL;;;;;AACiDA;AAAW;;AAGxDC;AACAC;AACAC;;;;;AAKAH;AACF;AAGFI;AACE;AACEC;AACF;AACF;AAEAD;AACE;AACEC;AACF;AACF;AAEAD;AACEC;AACF;AAEAD;AACEC;AACF;AAEAD;;AAEIC;AACF;AAEA;;;AAGF;;AAEY;;AACd;;"}

package/build/lib/index.d.ts

@@ -1,4 +1,3 @@
 import * as devtools from './devtools';
 export declare const ReactQueryDevtools: (typeof devtools)['ReactQueryDevtools'];
-export declare const ReactQueryDevtoolsPanel: (typeof devtools)['ReactQueryDevtoolsPanel'];
 //# sourceMappingURL=index.d.ts.map