fix(deps): update dependency @chakra-ui/react to v3 (#1802)

* fix(deps): update dependency @chakra-ui/react to v3

* Remove unnecessary packages

* Add snippets

* Updates

* Remove unused

* Remove ColorModeProvider?

* Fix

* Fix

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Nathan Bierema <[email protected]>

Author: renovate[bot]

packages/redux-devtools-rtk-query-monitor/demo/package.json

@@ -11,15 +11,13 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.27.1",
-    "@chakra-ui/react": "^2.10.9",
+    "@chakra-ui/react": "^3.19.1",
     "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.0",
     "@mswjs/data": "^0.16.2",
     "@redux-devtools/core": "workspace:^",
     "@redux-devtools/dock-monitor": "workspace:^",
     "@redux-devtools/rtk-query-monitor": "workspace:^",
     "@reduxjs/toolkit": "^2.8.2",
-    "framer-motion": "^12.15.0",
     "msw": "^2.8.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",

packages/redux-devtools-rtk-query-monitor/demo/src/App.tsx

@@ -1,7 +1,7 @@
 import PokemonView from './features/pokemon/PokemonView';
 import PostsView from './features/posts/PostsView';
-import { Box, Flex, Heading } from '@chakra-ui/react';
-import { Link, UnorderedList, ListItem } from '@chakra-ui/react';
+import { Box, Flex, Heading, List } from '@chakra-ui/react';
+import { Link } from '@chakra-ui/react';
 import { Code } from '@chakra-ui/react';
 import * as React from 'react';
 import { DevToolsSelector } from './features/DevTools/DevToolsSelector';
@@ -27,44 +27,48 @@ export function App() {
         </Box>
       </Flex>
       <Flex p="2" as="footer">
-        <UnorderedList p="2">
-          <ListItem>
+        <List.Root p="2">
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor/demo"
             >
               demo source
             </Link>
-          </ListItem>
-          <ListItem>
+          </List.Item>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/FaberVitale/redux-devtools/tree/feat/rtk-query-monitor/packages/redux-devtools-rtk-query-monitor"
             >
               @redux-devtools/rtk-query-monitor source
             </Link>
-          </ListItem>
-          <ListItem>
+          </List.Item>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/polling"
             >
               polling example
             </Link>
-          </ListItem>
-          <ListItem>
+          </List.Item>
+          <List.Item>
             <Link
               className="link"
-              isExternal
+              target="_blank"
+              rel="noopener noreferrer"
               href="https://github.com/reduxjs/redux-toolkit/tree/master/examples/query/react/mutations"
             >
               mutations example
             </Link>
-          </ListItem>
-        </UnorderedList>
+          </List.Item>
+        </List.Root>
       </Flex>
     </main>
   );

packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/provider.tsx

@@ -0,0 +1,8 @@
+'use client';
+
+import React from 'react';
+import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>;
+}

packages/redux-devtools-rtk-query-monitor/demo/src/components/ui/toaster.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import React from 'react';
+import {
+  Toaster as ChakraToaster,
+  Portal,
+  Spinner,
+  Stack,
+  Toast,
+  createToaster,
+} from '@chakra-ui/react';
+
+export const toaster = createToaster({
+  placement: 'bottom-end',
+  pauseOnPageIdle: true,
+});
+
+export const Toaster = () => {
+  return (
+    <Portal>
+      <ChakraToaster toaster={toaster} insetInline={{ mdDown: '4' }}>
+        {(toast) => (
+          <Toast.Root width={{ md: 'sm' }}>
+            {toast.type === 'loading' ? (
+              <Spinner size="sm" color="blue.solid" />
+            ) : (
+              <Toast.Indicator />
+            )}
+            <Stack gap="1" flex="1" maxWidth="100%">
+              {toast.title && <Toast.Title>{toast.title}</Toast.Title>}
+              {toast.description && (
+                <Toast.Description>{toast.description}</Toast.Description>
+              )}
+            </Stack>
+            {toast.action && (
+              <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+            )}
+            {toast.closable && <Toast.CloseTrigger />}
+          </Toast.Root>
+        )}
+      </ChakraToaster>
+    </Portal>
+  );
+};

packages/redux-devtools-rtk-query-monitor/demo/src/features/DevTools/DevToolsSelector.tsx

@@ -14,7 +14,7 @@ export function DevToolsSelector() {
   return (
     <Box as="section" p="2">
       <Heading as="h2">Set active devTools</Heading>
-      <ButtonGroup variant="outline" spacing="4" p="4">
+      <ButtonGroup variant="outline" gap="4" p="4">
         <Button
           aria-selected={!extensionEnabled}
           colorScheme="blue"

packages/redux-devtools-rtk-query-monitor/demo/src/features/pokemon/Pokemon.tsx

@@ -1,15 +1,17 @@
 import React, { useState } from 'react';
-import { Button, Select } from '@chakra-ui/react';
+import { Button, createListCollection, Portal, Select } from '@chakra-ui/react';
 import { useGetPokemonByNameQuery } from '../../services/pokemon';
 import type { PokemonName } from '../../pokemon.data';
 
-const intervalOptions = [
-  { label: 'Off', value: 0 },
-  { label: '3s', value: 3000 },
-  { label: '5s', value: 5000 },
-  { label: '10s', value: 10000 },
-  { label: '1m', value: 60000 },
-];
+const intervalOptions = createListCollection({
+  items: [
+    { label: 'Off', value: '0' },
+    { label: '3s', value: '3000' },
+    { label: '5s', value: '5000' },
+    { label: '10s', value: '10000' },
+    { label: '1m', value: '60000' },
+  ],
+});
 
 export function Pokemon({ name }: { name: PokemonName }) {
   const [pollingInterval, setPollingInterval] = useState(60000);
@@ -41,19 +43,39 @@ export function Pokemon({ name }: { name: PokemonName }) {
             />
           </div>
           <div>
-            <label style={{ display: 'block' }}>Polling interval</label>
-            <Select
-              value={pollingInterval}
-              onChange={({ target: { value } }) =>
-                setPollingInterval(Number(value))
+            <Select.Root
+              collection={intervalOptions}
+              value={[pollingInterval.toString()]}
+              onValueChange={({ value }) =>
+                setPollingInterval(Number(value[0]))
               }
             >
-              {intervalOptions.map(({ label, value }) => (
-                <option key={value} value={value}>
-                  {label}
-                </option>
-              ))}
-            </Select>
+              <Select.HiddenSelect />
+              <Select.Label>Polling interval</Select.Label>
+              <Select.Control>
+                <Select.Trigger>
+                  <Select.ValueText placeholder="Polling interval" />
+                </Select.Trigger>
+                <Select.IndicatorGroup>
+                  <Select.Indicator />
+                </Select.IndicatorGroup>
+              </Select.Control>
+              <Portal>
+                <Select.Positioner>
+                  <Select.Content>
+                    {intervalOptions.items.map((intervalOption) => (
+                      <Select.Item
+                        item={intervalOption}
+                        key={intervalOption.value}
+                      >
+                        {intervalOption.label}
+                        <Select.ItemIndicator />
+                      </Select.Item>
+                    ))}
+                  </Select.Content>
+                </Select.Positioner>
+              </Portal>
+            </Select.Root>
           </div>
           <div>
             <Button

packages/redux-devtools-rtk-query-monitor/demo/src/features/posts/PostDetail.tsx

@@ -15,8 +15,8 @@ import {
   Input,
   Spacer,
   Stack,
-  useToast,
 } from '@chakra-ui/react';
+import { toaster } from '../../components/ui/toaster';
 
 const EditablePostName = ({
   name: initialName,
@@ -50,8 +50,8 @@ const EditablePostName = ({
       </Box>
       <Spacer />
       <Box>
-        <Stack spacing={4} direction="row" align="center">
-          <Button onClick={handleUpdate} isLoading={isLoading}>
+        <Stack gap={4} direction="row" align="center">
+          <Button onClick={handleUpdate} loading={isLoading}>
             Update
           </Button>
           <CloseButton bg="red" onClick={handleCancel} disabled={isLoading} />
@@ -75,8 +75,6 @@ export const PostDetail = () => {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
 
-  const toast = useToast();
-
   const [isEditing, setIsEditing] = useState(false);
 
   const { data: post, isLoading } = useGetPostQuery(id!);
@@ -108,12 +106,12 @@ export const PostDetail = () => {
             try {
               await updatePost({ id: id!, name }).unwrap();
             } catch {
-              toast({
+              toaster.create({
                 title: 'An error occurred',
                 description: "We couldn't save your changes, try again!",
-                status: 'error',
+                type: 'error',
                 duration: 2000,
-                isClosable: true,
+                closable: true,
               });
             } finally {
               setIsEditing(false);
@@ -129,7 +127,7 @@ export const PostDetail = () => {
           </Box>
           <Spacer />
           <Box>
-            <Stack spacing={4} direction="row" align="center">
+            <Stack gap={4} direction="row" align="center">
               <Button
                 onClick={() => setIsEditing(true)}
                 disabled={isDeleting || isUpdating}