@tanstack/react-query-devtools 4.10.3 → 4.11.0

package/build/lib/devtools.js

@@ -8,8 +8,8 @@ var reactQuery = require('@tanstack/react-query');
 var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var useLocalStorage = require('./useLocalStorage.js');
 var utils = require('./utils.js');
-var screenreader = require('./screenreader.js');
 var styledComponents = require('./styledComponents.js');
+var screenreader = require('./screenreader.js');
 var theme = require('./theme.js');
 var Explorer = require('./Explorer.js');
 var Logo = require('./Logo.js');
@@ -43,33 +43,47 @@ function ReactQueryDevtools({
   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["default"]('reactQueryDevtoolsOpen', initialIsOpen);
-  const [devtoolsHeight, setDevtoolsHeight] = useLocalStorage["default"]('reactQueryDevtoolsHeight', null);
+  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) => {
-    var _panelElement$getBoun;
-
+    if (!panelElement) return;
     if (startEvent.button !== 0) return; // Only allow left click for drag
 
+    const isVertical = utils.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 < utils.minPanelSize) {
         setIsOpen(false);
       } else {
         setIsOpen(true);
@@ -77,13 +91,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__namespace.useEffect(() => {
@@ -120,15 +137,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 = utils.getSidedProp('padding', panelPosition);
+      const isVertical = utils.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";
         }
       };
 
@@ -140,26 +162,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 = 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, {
@@ -171,67 +198,17 @@ function ReactQueryDevtools({
   }, /*#__PURE__*/React__namespace.createElement(ReactQueryDevtoolsPanel, _rollupPluginBabelHelpers["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 " + theme.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(styledComponents.Button, _rollupPluginBabelHelpers["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", _rollupPluginBabelHelpers["extends"]({
+    onDragStart: e => handleDragStart(panelRef.current, e)
+  }))), !isResolvedOpen ? /*#__PURE__*/React__namespace.createElement("button", _rollupPluginBabelHelpers["extends"]({
     type: "button"
   }, otherToggleButtonProps, {
     "aria-label": "Open React Query Devtools",
@@ -289,10 +266,18 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     isOpen = true,
     styleNonce,
     setIsOpen,
-    handleDragStart,
     context,
+    onDragStart,
+    onPositionChange,
+    showCloseButton,
+    position,
+    closeButtonProps = {},
     ...panelProps
   } = props;
+  const {
+    onClick: onCloseClick,
+    ...otherCloseButtonProps
+  } = closeButtonProps;
   const queryClient = reactQuery.useQueryClient({
     context
   });
@@ -322,23 +307,20 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     className: "ReactQueryDevtoolsPanel",
     "aria-label": "React Query Devtools Panel",
     id: "ReactQueryDevtoolsPanel"
-  }, panelProps), /*#__PURE__*/React__namespace.createElement("style", {
+  }, panelProps, {
+    style: {
+      height: utils.defaultPanelSize,
+      position: 'relative',
+      ...panelProps.style
+    }
+  }), /*#__PURE__*/React__namespace.createElement("style", {
     nonce: styleNonce,
     dangerouslySetInnerHTML: {
       __html: "\n            .ReactQueryDevtoolsPanel * {\n              scrollbar-color: " + theme.defaultTheme.backgroundAlt + " " + theme.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: " + theme.defaultTheme.backgroundAlt + ";\n            }\n\n            .ReactQueryDevtoolsPanel *::-webkit-scrollbar-thumb, .ReactQueryDevtoolsPanel scrollbar-thumb {\n              background: " + theme.defaultTheme.gray + ";\n              border-radius: .5em;\n              border: 3px solid " + theme.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: utils.getResizeHandleStyle(position),
+    onMouseDown: onDragStart
   }), isOpen && /*#__PURE__*/React__namespace.createElement("div", {
     style: {
       flex: '1 1 500px',
@@ -381,9 +363,31 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
       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(styledComponents.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'
@@ -499,7 +503,25 @@ const ReactQueryDevtoolsPanel = /*#__PURE__*/React__namespace.forwardRef(functio
     activeQueryHash: activeQueryHash,
     queryCache: queryCache,
     queryClient: queryClient
-  }) : null));
+  }) : null, showCloseButton ? /*#__PURE__*/React__namespace.createElement(styledComponents.Button, _rollupPluginBabelHelpers["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 = ({
@@ -674,11 +696,7 @@ const QueryStatusCount = ({
   const hasPaused = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'paused').length);
   const hasStale = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'stale').length);
   const hasInactive = useSubscribeToQueryCache(queryCache, () => queryCache.getAll().filter(q => utils.getQueryStatusLabel(q) === 'inactive').length);
-  return /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKeys, {
-    style: {
-      marginBottom: '.5em'
-    }
-  }, /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
+  return /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKeys, null, /*#__PURE__*/React__namespace.createElement(styledComponents.QueryKey, {
     style: {
       background: theme.defaultTheme.success,
       opacity: hasFresh ? 1 : 0.3