@tanstack/react-query-devtools 4.10.3 → 4.11.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Tanner Linsley
+Copyright (c) 2021-present Tanner Linsley
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/build/lib/devtools.d.ts

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ContextOptions } from '@tanstack/react-query';
+import type { Corner, Side } from './utils';
 export interface DevtoolsOptions extends ContextOptions {
     /**
      * Set this true if you want the dev tools to default to being open
@@ -8,20 +9,25 @@ export interface DevtoolsOptions extends ContextOptions {
     /**
      * Use this to add props to the panel. For example, you can add className, style (merge and override default style), etc.
      */
-    panelProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
+    panelProps?: React.ComponentPropsWithoutRef<'div'>;
     /**
      * 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.
      */
-    closeButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
     /**
      * 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.
      */
-    toggleButtonProps?: React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+    toggleButtonProps?: React.ComponentPropsWithoutRef<'button'>;
     /**
      * The position of the React Query logo to open and close the devtools panel.
      * Defaults to 'bottom-left'.
      */
-    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    position?: Corner;
+    /**
+     * The position of the React Query devtools panel.
+     * Defaults to 'bottom'.
+     */
+    panelPosition?: Side;
     /**
      * Use this to render the devtools inside a different type of container element for a11y purposes.
      * Any string which corresponds to a valid intrinsic JSX element is allowed.
@@ -57,8 +63,25 @@ interface DevtoolsPanelOptions extends ContextOptions {
     /**
      * Handles the opening and closing the devtools panel
      */
-    handleDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onDragStart: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * The position of the React Query devtools panel.
+     * Defaults to 'bottom'.
+     */
+    position?: Side;
+    /**
+     * Handles the panel position select change
+     */
+    onPositionChange?: (side: Side) => void;
+    /**
+     * Show a close button inside the panel
+     */
+    showCloseButton?: boolean;
+    /**
+     * 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.
+     */
+    closeButtonProps?: React.ComponentPropsWithoutRef<'button'>;
 }
-export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, context, styleNonce, }: DevtoolsOptions): React.ReactElement | null;
+export declare function ReactQueryDevtools({ initialIsOpen, panelProps, closeButtonProps, toggleButtonProps, position, containerElement: Container, context, styleNonce, panelPosition: initialPanelPosition, }: DevtoolsOptions): React.ReactElement | null;
 export declare const ReactQueryDevtoolsPanel: React.ForwardRefExoticComponent<DevtoolsPanelOptions & React.RefAttributes<HTMLDivElement>>;
 export {};

package/build/lib/devtools.esm.js

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { useQueryClient, onlineManager, notifyManager } from '@tanstack/react-query';
 import { rankItem } from '@tanstack/match-sorter-utils';
 import useLocalStorage from './useLocalStorage.esm.js';
-import { useIsMounted, sortFns, getQueryStatusColor, getQueryStatusLabel } from './utils.esm.js';
+import { defaultPanelSize, useIsMounted, getSidedProp, getSidePanelStyle, sortFns, getResizeHandleStyle, getQueryStatusColor, getQueryStatusLabel, isVerticalSide, minPanelSize } from './utils.esm.js';
+import { Panel, Select, Input, Button, ActiveQueryPanel, Code, QueryKeys, QueryKey } from './styledComponents.esm.js';
 import ScreenReader from './screenreader.esm.js';
-import { Button, Panel, Input, Select, ActiveQueryPanel, Code, QueryKeys, QueryKey } from './styledComponents.esm.js';
-import { ThemeProvider, defaultTheme } from './theme.esm.js';
+import { defaultTheme, ThemeProvider } from './theme.esm.js';
 import Explorer from './Explorer.esm.js';
 import Logo from './Logo.esm.js';
 import { useSyncExternalStore } from 'use-sync-external-store/shim/index.js';
@@ -19,33 +19,47 @@ function ReactQueryDevtools({
   position = 'bottom-left',
   containerElement: Container = 'aside',
   context,
-  styleNonce
+  styleNonce,
+  panelPosition: initialPanelPosition = 'bottom'
 }) {
   const rootRef = React.useRef(null);
   const panelRef = React.useRef(null);
   const [isOpen, setIsOpen] = useLocalStorage('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage('reactQueryDevtoolsHeight', null);
+  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) => {
-    var _panelElement$getBoun;
-
+    if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
 
+    const isVertical = isVerticalSide(panelPosition);
     setIsResizing(true);
-    const dragInfo = {
-      originalHeight: (_panelElement$getBoun = panelElement == null ? void 0 : panelElement.getBoundingClientRect().height) != null ? _panelElement$getBoun : 0,
-      pageY: startEvent.pageY
-    };
+    const {
+      height,
+      width
+    } = panelElement.getBoundingClientRect();
+    const startX = startEvent.clientX;
+    const startY = startEvent.clientY;
+    let newSize = 0;
 
     const run = moveEvent => {
-      const delta = dragInfo.pageY - moveEvent.pageY;
-      const newHeight = dragInfo.originalHeight + delta;
-      setDevtoolsHeight(newHeight);
+      // 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 (newHeight < 70) {
+      if (newSize < minPanelSize) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
@@ -53,13 +67,16 @@ function ReactQueryDevtools({
     };
 
     const unsub = () => {
-      setIsResizing(false);
-      document.removeEventListener('mousemove', run);
-      document.removeEventListener('mouseUp', unsub);
+      if (isResizing) {
+        setIsResizing(false);
+      }
+
+      document.removeEventListener('mousemove', run, false);
+      document.removeEventListener('mouseUp', unsub, false);
     };
 
-    document.addEventListener('mousemove', run);
-    document.addEventListener('mouseup', unsub);
+    document.addEventListener('mousemove', run, false);
+    document.addEventListener('mouseup', unsub, false);
   };
 
   React.useEffect(() => {
@@ -96,15 +113,20 @@ function ReactQueryDevtools({
       var _root$parentElement;
 
       const root = rootRef.current;
-      const previousValue = root == null ? void 0 : (_root$parentElement = root.parentElement) == null ? void 0 : _root$parentElement.style.paddingBottom;
+      const styleProp = getSidedProp('padding', panelPosition);
+      const isVertical = isVerticalSide(panelPosition);
+      const previousValue = root == null ? void 0 : (_root$parentElement = root.parentElement) == null ? void 0 : _root$parentElement.style[styleProp];
 
       const run = () => {
-        var _panelRef$current;
-
-        const containerHeight = (_panelRef$current = panelRef.current) == null ? void 0 : _panelRef$current.getBoundingClientRect().height;
-
         if (root != null && root.parentElement) {
-          root.parentElement.style.paddingBottom = containerHeight + "px";
+          // reset the padding
+          root.parentElement.style.padding = '0px';
+          root.parentElement.style.paddingTop = '0px';
+          root.parentElement.style.paddingBottom = '0px';
+          root.parentElement.style.paddingLeft = '0px';
+          root.parentElement.style.paddingRight = '0px'; // set the new padding based on the new panel position
+
+          root.parentElement.style[styleProp] = (isVertical ? devtoolsWidth : devtoolsHeight) + "px";
         }
       };
 
@@ -116,26 +138,31 @@ function ReactQueryDevtools({
           window.removeEventListener('resize', run);
 
           if (root != null && root.parentElement && typeof previousValue === 'string') {
-            root.parentElement.style.paddingBottom = previousValue;
+            root.parentElement.style[styleProp] = previousValue;
           }
         };
       }
     }
-  }, [isResolvedOpen]);
+  }, [isResolvedOpen, panelPosition, devtoolsHeight, devtoolsWidth]);
   const {
     style: panelStyle = {},
     ...otherPanelProps
   } = panelProps;
-  const {
-    style: closeButtonStyle = {},
-    onClick: onCloseClick,
-    ...otherCloseButtonProps
-  } = closeButtonProps;
   const {
     style: toggleButtonStyle = {},
     onClick: onToggleClick,
     ...otherToggleButtonProps
-  } = toggleButtonProps; // Do not render on the server
+  } = 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, {
@@ -147,67 +174,17 @@ function ReactQueryDevtools({
   }, /*#__PURE__*/React.createElement(ReactQueryDevtoolsPanel, _extends({
     ref: panelRef,
     context: context,
-    styleNonce: styleNonce
+    styleNonce: styleNonce,
+    position: panelPosition,
+    onPositionChange: setPanelPosition,
+    showCloseButton: true,
+    closeButtonProps: closeButtonProps
   }, otherPanelProps, {
-    style: {
-      position: 'fixed',
-      bottom: '0',
-      right: '0',
-      zIndex: 99999,
-      width: '100%',
-      height: devtoolsHeight != null ? devtoolsHeight : 500,
-      maxHeight: '90%',
-      boxShadow: '0 0 20px rgba(0,0,0,.3)',
-      borderTop: "1px solid " + defaultTheme.gray,
-      transformOrigin: 'top',
-      // visibility will be toggled after transitions, but set initial state here
-      visibility: isOpen ? 'visible' : 'hidden',
-      ...panelStyle,
-      ...(isResizing ? {
-        transition: "none"
-      } : {
-        transition: "all .2s ease"
-      }),
-      ...(isResolvedOpen ? {
-        opacity: 1,
-        pointerEvents: 'all',
-        transform: "translateY(0) scale(1)"
-      } : {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: "translateY(15px) scale(1.02)"
-      })
-    },
+    style: style,
     isOpen: isResolvedOpen,
     setIsOpen: setIsOpen,
-    handleDragStart: e => handleDragStart(panelRef.current, e)
-  })), isResolvedOpen ? /*#__PURE__*/React.createElement(Button, _extends({
-    type: "button",
-    "aria-controls": "ReactQueryDevtoolsPanel",
-    "aria-haspopup": "true",
-    "aria-expanded": "true"
-  }, otherCloseButtonProps, {
-    onClick: e => {
-      setIsOpen(false);
-      onCloseClick == null ? void 0 : onCloseClick(e);
-    },
-    style: {
-      position: 'fixed',
-      zIndex: 99999,
-      margin: '.5em',
-      bottom: 0,
-      ...(position === 'top-right' ? {
-        right: '0'
-      } : position === 'top-left' ? {
-        left: '0'
-      } : position === 'bottom-right' ? {
-        right: '0'
-      } : {
-        left: '0'
-      }),
-      ...closeButtonStyle
-    }
-  }), "Close") : null), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
+    onDragStart: e => handleDragStart(panelRef.current, e)
+  }))), !isResolvedOpen ? /*#__PURE__*/React.createElement("button", _extends({
     type: "button"
   }, otherToggleButtonProps, {
     "aria-label": "Open React Query Devtools",
@@ -265,10 +242,18 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     isOpen = true,
     styleNonce,
     setIsOpen,
-    handleDragStart,
     context,
+    onDragStart,
+    onPositionChange,
+    showCloseButton,
+    position,
+    closeButtonProps = {},
     ...panelProps
   } = props;
+  const {
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const queryClient = useQueryClient({
     context
   });
@@ -298,23 +283,20 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     className: "ReactQueryDevtoolsPanel",
     "aria-label": "React Query Devtools Panel",
     id: "ReactQueryDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React.createElement("style", {
+  }, panelProps, {
+    style: {
+      height: defaultPanelSize,
+      position: 'relative',
+      ...panelProps.style
+    }
+  }), /*#__PURE__*/React.createElement("style", {
     nonce: styleNonce,
     dangerouslySetInnerHTML: {
       __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + defaultTheme.backgroundAlt + " " + defaultTheme.gray + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar, .ReactQueryDevtoolsPanel scrollbar {\n              width: 1em;\n              height: 1em;\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-track, .ReactQueryDevtoolsPanel scrollbar-track {\n              background: " + defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + defaultTheme.backgroundAlt + ";\n            }\n          "
     }
   }), /*#__PURE__*/React.createElement("div", {
-    style: {
-      position: 'absolute',
-      left: 0,
-      top: 0,
-      width: '100%',
-      height: '4px',
-      marginBottom: '-4px',
-      cursor: 'row-resize',
-      zIndex: 100000
-    },
-    onMouseDown: handleDragStart
+    style: getResizeHandleStyle(position),
+    onMouseDown: onDragStart
   }), isOpen && /*#__PURE__*/React.createElement("div", {
     style: {
       flex: '1 1 500px',
@@ -357,9 +339,31 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
       display: 'flex',
       flexDirection: 'column'
     }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      marginBottom: '.5em'
+    }
   }, /*#__PURE__*/React.createElement(QueryStatusCount, {
     queryCache: queryCache
-  }), /*#__PURE__*/React.createElement("div", {
+  }), position && onPositionChange ? /*#__PURE__*/React.createElement(Select, {
+    "aria-label": "Panel position",
+    value: position,
+    style: {
+      marginInlineStart: '.5em'
+    },
+    onChange: e => onPositionChange(e.target.value)
+  }, /*#__PURE__*/React.createElement("option", {
+    value: "left"
+  }, "Left"), /*#__PURE__*/React.createElement("option", {
+    value: "right"
+  }, "Right"), /*#__PURE__*/React.createElement("option", {
+    value: "top"
+  }, "Top"), /*#__PURE__*/React.createElement("option", {
+    value: "bottom"
+  }, "Bottom")) : null), /*#__PURE__*/React.createElement("div", {
     style: {
       display: 'flex',
       alignItems: 'center'
@@ -475,7 +479,25 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React.forwardRef(function ReactQuer
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
     queryClient: queryClient
-  }) : null));
+  }) : null, showCloseButton ? /*#__PURE__*/React.createElement(Button, _extends({
+    type: "button",
+    "aria-controls": "ReactQueryDevtoolsPanel",
+    "aria-haspopup": "true",
+    "aria-expanded": "true"
+  }, otherCloseButtonProps, {
+    style: {
+      position: 'absolute',
+      zIndex: 99999,
+      margin: '.5em',
+      bottom: 0,
+      left: 0,
+      ...otherCloseButtonProps.style
+    },
+    onClick: e => {
+      setIsOpen(false);
+      onCloseClick == null ? void 0 : onCloseClick(e);
+    }
+  }), "Close") : null));
 });
 
 const ActiveQuery = ({
@@ -650,11 +672,7 @@ const QueryStatusCount = ({
   const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'paused').length);
   const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'stale').length);
   const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => getQueryStatusLabel(q) === 'inactive').length);
-  return /*#__PURE__*/React.createElement(QueryKeys, {
-    style: {
-      marginBottom: '.5em'
-    }
-  }, /*#__PURE__*/React.createElement(QueryKey, {
+  return /*#__PURE__*/React.createElement(QueryKeys, null, /*#__PURE__*/React.createElement(QueryKey, {
     style: {
       background: defaultTheme.success,
       opacity: hasFresh ? 1 : 0.3