@tanstack/react-query-devtools 4.10.3 → 4.11.0

package/build/lib/index.prod.js

@@ -220,18 +220,108 @@ const sortFns = {
   '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) => ({
@@ -322,6 +412,19 @@ const Select = styled('select', (_props, theme) => ({
   }
 });
 
+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',
@@ -515,33 +618,47 @@ function ReactQueryDevtools$1({
   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 (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);
@@ -549,13 +666,16 @@ function ReactQueryDevtools$1({
     };
 
     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(() => {
@@ -592,15 +712,20 @@ function ReactQueryDevtools$1({
       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";
         }
       };
 
@@ -612,26 +737,31 @@ function ReactQueryDevtools$1({
           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, {
@@ -643,67 +773,17 @@ function ReactQueryDevtools$1({
   }, /*#__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: {
-      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",
@@ -761,10 +841,18 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     isOpen = true,
     styleNonce,
     setIsOpen,
-    handleDragStart,
     context,
+    onDragStart,
+    onPositionChange,
+    showCloseButton,
+    position,
+    closeButtonProps = {},
     ...panelProps
   } = props;
+  const {
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const queryClient = reactQuery.useQueryClient({
     context
   });
@@ -794,23 +882,20 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     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',
@@ -853,9 +938,31 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
       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'
@@ -971,7 +1078,25 @@ const ReactQueryDevtoolsPanel$1 = /*#__PURE__*/React__namespace.forwardRef(funct
     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 = ({
@@ -1146,11 +1271,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__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