@tanstack/react-query-devtools 4.10.4 → 4.11.0

package/build/umd/index.development.js

@@ -2146,18 +2146,108 @@
     'Query Hash': queryHashSort,
     'Last Updated': dateSort
   };
+  const minPanelSize = 70;
+  const defaultPanelSize = 500;
+  const sides = {
+    top: 'bottom',
+    bottom: 'top',
+    left: 'right',
+    right: 'left'
+  };
 
-  function ScreenReader({
-    text
+  /**
+   * Check if the given side is vertical (left/right)
+   */
+  function isVerticalSide(side) {
+    return ['left', 'right'].includes(side);
+  }
+  /**
+   * Get the opposite side, eg 'left' => 'right'. 'top' => 'bottom', etc
+   */
+
+  function getOppositeSide(side) {
+    return sides[side];
+  }
+  /**
+   * Given as css prop it will return a sided css prop based on a given side
+   * Example given `border` and `right` it return `borderRight`
+   */
+
+  function getSidedProp(prop, side) {
+    return "" + prop + (side.charAt(0).toUpperCase() + side.slice(1));
+  }
+  function getSidePanelStyle({
+    position = 'bottom',
+    height,
+    width,
+    devtoolsTheme,
+    isOpen,
+    isResizing,
+    panelStyle
   }) {
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      style: {
-        position: 'absolute',
-        width: '0.1px',
-        height: '0.1px',
-        overflow: 'hidden'
-      }
-    }, text);
+    const oppositeSide = getOppositeSide(position);
+    const borderSide = getSidedProp('border', oppositeSide);
+    const isVertical = isVerticalSide(position);
+    return { ...panelStyle,
+      direction: 'ltr',
+      position: 'fixed',
+      [position]: 0,
+      [borderSide]: "1px solid " + devtoolsTheme.gray,
+      transformOrigin: oppositeSide,
+      boxShadow: '0 0 20px rgba(0,0,0,.3)',
+      zIndex: 99999,
+      // visibility will be toggled after transitions, but set initial state here
+      visibility: isOpen ? 'visible' : 'hidden',
+      ...(isResizing ? {
+        transition: "none"
+      } : {
+        transition: "all .2s ease"
+      }),
+      ...(isOpen ? {
+        opacity: 1,
+        pointerEvents: 'all',
+        transform: isVertical ? "translateX(0) scale(1)" : "translateY(0) scale(1)"
+      } : {
+        opacity: 0,
+        pointerEvents: 'none',
+        transform: isVertical ? "translateX(15px) scale(1.02)" : "translateY(15px) scale(1.02)"
+      }),
+      ...(isVertical ? {
+        top: 0,
+        height: '100vh',
+        maxWidth: '90%',
+        width: typeof width === 'number' && width >= minPanelSize ? width : defaultPanelSize
+      } : {
+        left: 0,
+        width: '100%',
+        maxHeight: '90%',
+        height: typeof height === 'number' && height >= minPanelSize ? height : defaultPanelSize
+      })
+    };
+  }
+  /**
+   * Get resize handle style based on a given side
+   */
+
+  function getResizeHandleStyle(position = 'bottom') {
+    const isVertical = isVerticalSide(position);
+    const oppositeSide = getOppositeSide(position);
+    const marginSide = getSidedProp('margin', oppositeSide);
+    return {
+      position: 'absolute',
+      cursor: isVertical ? 'col-resize' : 'row-resize',
+      zIndex: 100000,
+      [oppositeSide]: 0,
+      [marginSide]: "-4px",
+      ...(isVertical ? {
+        top: 0,
+        height: '100%',
+        width: '4px'
+      } : {
+        width: '100%',
+        height: '4px'
+      })
+    };
   }
 
   const Panel = styled('div', (_props, theme) => ({
@@ -2248,6 +2338,19 @@
     }
   });
 
+  function ScreenReader({
+    text
+  }) {
+    return /*#__PURE__*/React__namespace.createElement("span", {
+      style: {
+        position: 'absolute',
+        width: '0.1px',
+        height: '0.1px',
+        overflow: 'hidden'
+      }
+    }, text);
+  }
+
   const Entry = styled('div', {
     fontFamily: 'Menlo, monospace',
     fontSize: '1em',
@@ -2441,33 +2544,47 @@
     position = 'bottom-left',
     containerElement: Container = 'aside',
     context,
-    styleNonce
+    styleNonce,
+    panelPosition: initialPanelPosition = 'bottom'
   }) {
     const rootRef = React__namespace.useRef(null);
     const panelRef = React__namespace.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__namespace.useState(false);
     const [isResizing, setIsResizing] = React__namespace.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 (newHeight < 70) {
+        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);
@@ -2475,13 +2592,16 @@
       };
 
       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__namespace.useEffect(() => {
@@ -2518,15 +2638,20 @@
         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";
           }
         };
 
@@ -2538,26 +2663,31 @@
             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__namespace.createElement(Container, {
@@ -2569,68 +2699,17 @@
     }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel$1, _extends({
       ref: panelRef,
       context: context,
-      styleNonce: styleNonce
+      styleNonce: styleNonce,
+      position: panelPosition,
+      onPositionChange: setPanelPosition,
+      showCloseButton: true,
+      closeButtonProps: closeButtonProps
     }, otherPanelProps, {
-      style: {
-        direction: 'ltr',
-        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__namespace.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__namespace.createElement("button", _extends({
+      onDragStart: e => handleDragStart(panelRef.current, e)
+    }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _extends({
       type: "button"
     }, otherToggleButtonProps, {
       "aria-label": "Open React Query Devtools",
@@ -2688,10 +2767,18 @@
       isOpen = true,
       styleNonce,
       setIsOpen,
-      handleDragStart,
       context,
+      onDragStart,
+      onPositionChange,
+      showCloseButton,
+      position,
+      closeButtonProps = {},
       ...panelProps
     } = props;
+    const {
+      onClick: onCloseClick,
+      ...otherCloseButtonProps
+    } = closeButtonProps;
     const queryClient = reactQuery.useQueryClient({
       context
     });
@@ -2721,23 +2808,20 @@
       className: "ReactQueryDevtoolsPanel",
       "aria-label": "React Query Devtools Panel",
       id: "ReactQueryDevtoolsPanel"
-    }, panelProps), /*#__PURE__*/React__namespace.createElement("style", {
+    }, panelProps, {
+      style: {
+        height: defaultPanelSize,
+        position: 'relative',
+        ...panelProps.style
+      }
+    }), /*#__PURE__*/React__namespace.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__namespace.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__namespace.createElement("div", {
       style: {
         flex: '1 1 500px',
@@ -2780,9 +2864,31 @@
         display: 'flex',
         flexDirection: 'column'
       }
+    }, /*#__PURE__*/React__namespace.createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: '.5em'
+      }
     }, /*#__PURE__*/React__namespace.createElement(QueryStatusCount, {
       queryCache: queryCache
-    }), /*#__PURE__*/React__namespace.createElement("div", {
+    }), position && onPositionChange ? /*#__PURE__*/React__namespace.createElement(Select, {
+      "aria-label": "Panel position",
+      value: position,
+      style: {
+        marginInlineStart: '.5em'
+      },
+      onChange: e => onPositionChange(e.target.value)
+    }, /*#__PURE__*/React__namespace.createElement("option", {
+      value: "left"
+    }, "Left"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "right"
+    }, "Right"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "top"
+    }, "Top"), /*#__PURE__*/React__namespace.createElement("option", {
+      value: "bottom"
+    }, "Bottom")) : null), /*#__PURE__*/React__namespace.createElement("div", {
       style: {
         display: 'flex',
         alignItems: 'center'
@@ -2898,7 +3004,25 @@
       activeQueryHash: activeQueryHash,
       queryCache: queryCache,
       queryClient: queryClient
-    }) : null));
+    }) : null, showCloseButton ? /*#__PURE__*/React__namespace.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 = ({
@@ -3073,11 +3197,7 @@
     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__namespace.createElement(QueryKeys, {
-      style: {
-        marginBottom: '.5em'
-      }
-    }, /*#__PURE__*/React__namespace.createElement(QueryKey, {
+    return /*#__PURE__*/React__namespace.createElement(QueryKeys, null, /*#__PURE__*/React__namespace.createElement(QueryKey, {
       style: {
         background: defaultTheme.success,
         opacity: hasFresh ? 1 : 0.3