feat: Add move devtools select menu

Added the option to move devtools to one of these sides `left`,  `right`, `top`, and `bottom` and refactored the code to accommodate the new capability

docs/devtools.md

@@ -59,6 +59,9 @@ function App() {
 - `position?: "top-left" | "top-right" | "bottom-left" | "bottom-right"`
   - Defaults to `bottom-left`
   - The position of the React Query logo to open and close the devtools panel
+- `origi?: "top" | "bottom" | "left" | "right"`
+  - Defaults to `bottom`
+  - The position of the React Query devtools panel
 - `context?: React.Context<QueryClient | undefined>`
   - Use this to use a custom React Query context. Otherwise, `defaultContext` will be used.
 
@@ -87,3 +90,7 @@ Use these options to style the dev tools.
   - The standard React style object used to style a component with inline styles
 - `className: string`
   - The standard React className property used to style a component with classes
+- `showCloseButton?: boolean`
+  - Show a close button inside the devtools panel
+- `closeButtonProps: PropsObject`
+  - 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.

packages/react-query-devtools/src/__tests__/devtools.test.tsx

@@ -763,4 +763,103 @@ describe('ReactQueryDevtools', () => {
       consoleErrorMock.mockRestore()
     })
   })
+
+  it('should render a menu to select panel position', async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+    })
+
+    const positionSelect = (await screen.findByLabelText(
+      'Panel position',
+    )) as HTMLSelectElement
+
+    expect(positionSelect.value).toBe('bottom')
+  })
+
+  it(`should render the panel to the left if panelPosition is set to 'left'`, async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+      panelPosition: 'left',
+    })
+
+    const positionSelect = (await screen.findByLabelText(
+      'Panel position',
+    )) as HTMLSelectElement
+
+    expect(positionSelect.value).toBe('left')
+
+    const panel = (await screen.getByLabelText(
+      'React Query Devtools Panel',
+    )) as HTMLDivElement
+
+    expect(panel.style.left).toBe('0px')
+    expect(panel.style.width).toBe('500px')
+    expect(panel.style.height).toBe('100vh')
+  })
+
+  it('should change the panel position if user select different option from the menu', async () => {
+    const { queryClient } = createQueryClient()
+
+    function Page() {
+      const { data = 'default' } = useQuery(['check'], async () => 'test')
+
+      return (
+        <div>
+          <h1>{data}</h1>
+        </div>
+      )
+    }
+
+    renderWithClient(queryClient, <Page />, {
+      initialIsOpen: true,
+    })
+
+    const positionSelect = (await screen.findByLabelText(
+      'Panel position',
+    )) as HTMLSelectElement
+
+    expect(positionSelect.value).toBe('bottom')
+
+    const panel = (await screen.getByLabelText(
+      'React Query Devtools Panel',
+    )) as HTMLDivElement
+
+    expect(panel.style.bottom).toBe('0px')
+    expect(panel.style.height).toBe('500px')
+    expect(panel.style.width).toBe('100%')
+
+    await act(async () => {
+      fireEvent.change(positionSelect, { target: { value: 'right' } })
+    })
+
+    expect(positionSelect.value).toBe('right')
+
+    expect(panel.style.right).toBe('0px')
+    expect(panel.style.width).toBe('500px')
+    expect(panel.style.height).toBe('100vh')
+  })
 })