Chakra UI upgrade

.github/workflows/build.yml

@@ -39,7 +39,7 @@ jobs:
       - run: npm ci
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.47 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
+      - run: npm install --no-save @microbit-foundation/python-editor-v3-microbit@0.2.0-dev.48 @microbit-foundation/website-deploy-aws@0.6.0 @microbit-foundation/website-deploy-aws-config@0.9.0 @microbit-foundation/circleci-npm-package-versioner@1
         if: github.repository_owner == 'microbit-foundation'
         env:
           NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package.json

@@ -6,16 +6,16 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@chakra-ui/icons": "^2.1.1",
-    "@chakra-ui/react": "^2.8.2",
+    "@chakra-ui/icons": "^2.2.6",
+    "@chakra-ui/react": "^2.10.10",
     "@codemirror/autocomplete": "^6.16.0",
     "@codemirror/commands": "6.5.0",
     "@codemirror/lang-python": "^6.1.6",
     "@codemirror/language": "^6.10.1",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.26.3",
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@microbit/microbit-connection": "^1.0.0-beta.0",
     "@microbit/microbit-fs": "^0.10.0",
     "@sanity/block-content-to-react": "^3.0.0",
@@ -55,7 +55,7 @@
     "xterm-addon-fit": "^0.5.0"
   },
   "devDependencies": {
-    "@chakra-ui/cli": "2.4.1",
+    "@chakra-ui/cli": "2.5.8",
     "@formatjs/cli": "^6.2.7",
     "@playwright/test": "^1.58.2",
     "@testing-library/jest-dom": "^5.14.1",

src/common/AreaHeading.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, Text } from "@chakra-ui/layout";
+import { Box, Text } from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 interface AreaHeadingProps {

src/common/CollapsibleButton.tsx

@@ -5,9 +5,9 @@
  */
 import {
   Button,
-  CSSObject,
   HTMLChakraProps,
   IconButton,
+  SystemStyleObject,
   ThemingProps,
 } from "@chakra-ui/react";
 import React, { ForwardedRef } from "react";
@@ -26,7 +26,7 @@ export interface CollapsibleButtonProps
   /**
    * Styles used only when collapsed.
    */
-  _collapsed?: CSSObject;
+  _collapsed?: SystemStyleObject;
 }
 
 export type CollapsibleButtonComposableProps = Omit<

src/common/ConfirmDialog.tsx

@@ -3,16 +3,16 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Button } from "@chakra-ui/button";
 import {
   AlertDialog,
   AlertDialogBody,
   AlertDialogContent,
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogOverlay,
-} from "@chakra-ui/modal";
-import { Text } from "@chakra-ui/react";
+  Button,
+  Text,
+} from "@chakra-ui/react";
 import { ReactNode, useRef } from "react";
 import { FormattedMessage } from "react-intl";
 

src/common/ErrorBoundary.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text } from "@chakra-ui/layout";
+import { Text } from "@chakra-ui/react";
 import React, { ErrorInfo, ReactNode } from "react";
 import { FormattedMessage } from "react-intl";
 import { LoggingContext } from "../logging/logging-hooks";

src/common/FileDropTarget.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, Center } from "@chakra-ui/layout";
+import { Box, BoxProps, Center } from "@chakra-ui/react";
 import { ReactNode, useCallback, useState } from "react";
 import { RiFolderOpenLine } from "react-icons/ri";
 import { useIntl } from "react-intl";

src/common/GenericDialog.tsx

@@ -4,14 +4,17 @@
  * SPDX-License-Identifier: MIT
  */
 import {
+  Button,
+  HStack,
+  Link,
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from "@chakra-ui/modal";
-import { Button, HStack, Link, Text } from "@chakra-ui/react";
+  Text,
+} from "@chakra-ui/react";
 import { ThemingProps } from "@chakra-ui/styled-system";
 import { ReactNode } from "react";
 import { FormattedMessage } from "react-intl";

src/common/HeadedScrollablePanel.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, Divider, VStack } from "@chakra-ui/layout";
+import { Box, BoxProps, Divider, VStack } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { zIndexBreadcrumbContainer } from "../common/zIndex";
 import ScrollablePanel from "./ScrollablePanel";

src/common/InputDialog.tsx

@@ -3,16 +3,18 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Button } from "@chakra-ui/button";
-import { Box, Text, VStack } from "@chakra-ui/layout";
 import {
+  Box,
+  Button,
   Modal,
   ModalBody,
   ModalContent,
   ModalFooter,
   ModalHeader,
   ModalOverlay,
-} from "@chakra-ui/modal";
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { ThemeTypings } from "@chakra-ui/styled-system";
 import { ReactNode, useCallback, useState } from "react";
 import { FormattedMessage } from "react-intl";

src/common/MaybeLink.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Link, LinkProps } from "@chakra-ui/layout";
+import { Link, LinkProps } from "@chakra-ui/react";
 
 /**
  * Chakra's link but renders the children directly if there's no href passed.

src/common/ProgressDialog.tsx

@@ -9,9 +9,10 @@ import {
   ModalContent,
   ModalHeader,
   ModalOverlay,
-} from "@chakra-ui/modal";
-import { Progress } from "@chakra-ui/progress";
-import { Text, VStack } from "@chakra-ui/react";
+  Progress,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { ReactNode } from "react";
 
 const doNothing = () => {};

src/common/Spinner.tsx

@@ -3,8 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box } from "@chakra-ui/react";
-import { Spinner as ChakraSpinner } from "@chakra-ui/spinner";
+import { Box, Spinner as ChakraSpinner } from "@chakra-ui/react";
 import { useIntl } from "react-intl";
 
 const Spinner = () => {

src/common/SplitView/SplitView.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Flex, FlexProps } from "@chakra-ui/layout";
+import { Flex, FlexProps } from "@chakra-ui/react";
 import React, {
   useCallback,
   useEffect,

src/common/SplitView/SplitViewRemainer.tsx

@@ -9,7 +9,7 @@ import {
   separatorPixels,
   useSplitViewContext,
 } from "./context";
-import { Box, BoxProps } from "@chakra-ui/layout";
+import { Box, BoxProps } from "@chakra-ui/react";
 
 interface SplitViewRemainderProps extends BoxProps {
   children: ReactNode;

src/common/SplitView/SplitViewSized.tsx

@@ -5,7 +5,7 @@
  */
 import { createRef, useEffect } from "react";
 import { dimensionPropName, useSplitViewContext } from "./context";
-import { Box } from "@chakra-ui/layout";
+import { Box } from "@chakra-ui/react";
 
 interface SizedPaneProps {
   children: JSX.Element;

src/common/use-action-feedback.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { useToast, ToastPosition } from "@chakra-ui/toast";
+import { ToastPosition, useToast } from "@chakra-ui/react";
 import { ReactNode, useMemo } from "react";
 import { IntlShape, useIntl } from "react-intl";
 import { deployment } from "../deployment";

src/documentation/IdeasArea.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text } from "@chakra-ui/layout";
+import { Text } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import IdeasDocumentation from "./ideas/IdeasDocumentation";
 import Spinner from "../common/Spinner";

src/documentation/ReferenceArea.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text } from "@chakra-ui/layout";
+import { Text } from "@chakra-ui/react";
 import { FormattedMessage } from "react-intl";
 import ReferenceToolkit from "./reference/ReferenceDocumentation";
 import Spinner from "../common/Spinner";

src/documentation/api/ApiDocumentation.tsx

@@ -3,8 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { BoxProps, Divider, List, ListItem } from "@chakra-ui/layout";
-import { Link } from "@chakra-ui/react";
+import { BoxProps, Divider, Link, List, ListItem } from "@chakra-ui/react";
 import sortBy from "lodash.sortby";
 import { ReactNode, useCallback } from "react";
 import { FormattedMessage, useIntl } from "react-intl";

src/documentation/api/ApiNode.tsx

@@ -3,13 +3,18 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, HStack, Stack, Text, VStack } from "@chakra-ui/layout";
 import {
+  Box,
+  BoxProps,
   Collapse,
+  HStack,
+  Stack,
+  Text,
   Tooltip,
   useClipboard,
   useDisclosure,
   VisuallyHidden,
+  VStack,
 } from "@chakra-ui/react";
 import { default as React, ReactNode, useCallback, useMemo } from "react";
 import { FormattedMessage, IntlShape, useIntl } from "react-intl";

src/documentation/common/CodeEmbed.tsx

@@ -3,15 +3,17 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps, HStack } from "@chakra-ui/layout";
-import { Portal } from "@chakra-ui/portal";
 import {
+  Box,
+  BoxProps,
+  forwardRef,
+  HStack,
+  Portal,
   Tooltip,
   useClipboard,
   useDisclosure,
   VisuallyHidden,
 } from "@chakra-ui/react";
-import { forwardRef } from "@chakra-ui/system";
 import React, {
   LegacyRef,
   Ref,

src/documentation/common/DocString.tsx

@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Box, BoxProps } from "@chakra-ui/layout";
+import { Box, BoxProps } from "@chakra-ui/react";
 import React from "react";
 import { renderMarkdown } from "../../editor/codemirror/language-server/documentation";
 

src/documentation/common/DocumentationBreadcrumbHeading.tsx

@@ -3,9 +3,15 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Button } from "@chakra-ui/button";
-import { Box, Stack, Text } from "@chakra-ui/layout";
-import { Collapse, HStack, VStack } from "@chakra-ui/react";
+import {
+  Box,
+  Button,
+  Collapse,
+  HStack,
+  Stack,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { RiArrowLeftSFill } from "react-icons/ri";
 import { SimpleImage } from "../../common/sanity";

src/documentation/common/DocumentationContent.test.tsx

@@ -11,11 +11,15 @@ import { vi } from "vitest";
 import { PortableText } from "../../common/sanity";
 import DocumentationContent from "./DocumentationContent";
 
-vi.mock("@chakra-ui/image", () => ({
-  Image: ({ src, w, h }: ImageProps) => (
-    <img src={src} width={w as string} height={h as string} />
-  ),
-}));
+vi.mock("@chakra-ui/react", async (importOriginal) => {
+  const actual = await importOriginal<typeof import("@chakra-ui/react")>();
+  return {
+    ...actual,
+    Image: ({ src, w, h }: ImageProps) => (
+      <img src={src} width={w as string} height={h as string} />
+    ),
+  };
+});
 
 describe("DocumentationContent", () => {
   it("renders external links", () => {

src/documentation/common/DocumentationContent.tsx

@@ -3,10 +3,15 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Icon } from "@chakra-ui/icon";
-import { Image } from "@chakra-ui/image";
-import { Box, Link, Stack, Text } from "@chakra-ui/layout";
-import { Collapse } from "@chakra-ui/react";
+import {
+  Box,
+  Collapse,
+  Icon,
+  Image,
+  Link,
+  Stack,
+  Text,
+} from "@chakra-ui/react";
 import BlockContent from "@sanity/block-content-to-react";
 import React, { ReactNode, useContext, useMemo } from "react";
 import { RiExternalLinkLine } from "react-icons/ri";

src/documentation/common/DocumentationHeading.tsx

@@ -3,8 +3,7 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { Text, TextProps } from "@chakra-ui/layout";
-import { Flex } from "@chakra-ui/react";
+import { Flex, Text, TextProps } from "@chakra-ui/react";
 import V2Tag from "../common/V2Tag";
 
 interface DocumentationHeadingProps extends TextProps {

src/documentation/common/DocumentationTopLevelItem.tsx

@@ -3,14 +3,15 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { IconButton } from "@chakra-ui/button";
-import { Box, VStack } from "@chakra-ui/layout";
 import {
+  Box,
   Divider,
   HStack,
+  IconButton,
   ListItem,
   ListItemProps,
   useMediaQuery,
+  VStack,
 } from "@chakra-ui/react";
 import { ReactNode } from "react";
 import { RiArrowRightLine } from "react-icons/ri";