chore: update react dependencies (#13749)

.github/workflows/ci.yaml

@@ -965,8 +965,8 @@ jobs:
         id: review
         uses: actions/dependency-review-action@v4.3.2
         with:
-          allow-licenses: Apache-2.0, BSD-2-Clause, BSD-3-Clause, CC0-1.0, ISC, MIT, MIT-0, MPL-2.0
-          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0, pkg:npm/pako@1.0.11"
+          allow-licenses: Apache-2.0, 0BSD, BSD-2-Clause, BSD-3-Clause, CC0-1.0, ISC, MIT, MIT-0, MPL-2.0
+          allow-dependencies-licenses: "pkg:golang/github.com/coder/wgtunnel@0.1.13-0.20240522110300-ade90dfb2da0, pkg:npm/pako@1.0.11, pkg:npm/caniuse-lite@1.0.30001639"
           license-check: true
           vulnerability-check: false
       - name: "Report"

offlinedocs/package.json

@@ -1,6 +1,5 @@
 {
   "name": "coder-docs-generator",
-  "version": "0.1.0",
   "private": true,
   "scripts": {
     "dev": "pnpm copy-images && next dev",
@@ -14,29 +13,27 @@
     "format:check": "prettier --cache --check './**/*.{css,html,js,json,jsx,md,ts,tsx,yaml,yml}'"
   },
   "dependencies": {
-    "@chakra-ui/react": "2.8.0",
-    "@emotion/react": "11",
-    "@emotion/styled": "11",
+    "@chakra-ui/react": "2.8.2",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@types/lodash": "4.14.196",
     "archiver": "6.0.0",
-    "framer-motion": "10",
+    "framer-motion": "^10.17.6",
     "front-matter": "4.0.2",
-    "fs-extra": "11.2.0",
     "lodash": "4.17.21",
-    "next": "14.0.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "next": "14.2.4",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-icons": "4.12.0",
     "react-markdown": "9.0.1",
     "rehype-raw": "7.0.0",
     "remark-gfm": "4.0.0"
   },
   "devDependencies": {
-    "@react-native-community/eslint-config": "3.2.0",
-    "@react-native-community/eslint-plugin": "1.3.0",
+    "@types/lodash": "4.14.196",
     "@types/node": "18.19.0",
-    "@types/react": "18.2.17",
-    "@types/react-dom": "18.2.7",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
     "eslint": "8.56.0",
     "eslint-config-next": "14.0.1",
     "prettier": "3.1.0",

site/package.json

@@ -33,8 +33,8 @@
     "@emoji-mart/data": "1.2.1",
     "@emoji-mart/react": "1.1.1",
     "@emotion/css": "11.11.2",
-    "@emotion/react": "11.11.1",
-    "@emotion/styled": "11.11.0",
+    "@emotion/react": "11.11.4",
+    "@emotion/styled": "11.11.5",
     "@fastly/performance-observer-polyfill": "2.0.0",
     "@fontsource-variable/inter": "5.0.15",
     "@fontsource/ibm-plex-mono": "5.0.5",
@@ -60,26 +60,25 @@
     "dayjs": "1.11.4",
     "emoji-mart": "5.6.0",
     "file-saver": "2.0.5",
-    "formik": "2.4.1",
+    "formik": "2.4.6",
     "front-matter": "4.0.2",
     "jszip": "3.10.1",
     "lodash": "4.17.21",
     "monaco-editor": "0.44.0",
     "pretty-bytes": "6.1.0",
-    "react": "18.2.0",
+    "react": "18.3.1",
     "react-chartjs-2": "5.2.0",
     "react-color": "2.19.3",
     "react-confetti": "6.1.0",
     "react-date-range": "1.4.0",
-    "react-dom": "18.2.0",
-    "react-helmet-async": "2.0.1",
+    "react-dom": "18.3.1",
+    "react-helmet-async": "2.0.5",
     "react-markdown": "9.0.1",
     "react-query": "npm:@tanstack/react-query@4.35.3",
-    "react-router-dom": "6.20.0",
+    "react-router-dom": "6.24.0",
     "react-syntax-highlighter": "15.5.0",
-    "react-use": "17.4.0",
-    "react-virtualized-auto-sizer": "1.0.20",
-    "react-window": "1.8.8",
+    "react-virtualized-auto-sizer": "1.0.24",
+    "react-window": "1.8.10",
     "remark-gfm": "4.0.0",
     "rollup-plugin-visualizer": "5.12.0",
     "semver": "7.5.3",
@@ -127,10 +126,9 @@
     "@types/react-color": "3.0.6",
     "@types/react-date-range": "1.4.4",
     "@types/react-dom": "18.2.4",
-    "@types/react-helmet": "6.1.5",
-    "@types/react-syntax-highlighter": "15.5.5",
-    "@types/react-virtualized-auto-sizer": "1.0.1",
-    "@types/react-window": "1.8.5",
+    "@types/react-syntax-highlighter": "15.5.13",
+    "@types/react-virtualized-auto-sizer": "1.0.4",
+    "@types/react-window": "1.8.8",
     "@types/semver": "7.5.0",
     "@types/ssh2": "1.11.13",
     "@types/ua-parser-js": "0.7.36",

site/src/hooks/useWindowSize.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+
+export function useWindowSize() {
+  const [windowSize, setWindowSize] = useState({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  });
+
+  useEffect(() => {
+    const onResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    };
+    window.addEventListener("resize", onResize);
+
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  return windowSize;
+}

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -1,10 +1,5 @@
-import {
-  css,
-  type CSSObject,
-  type Theme,
-  type Interpolation,
-  useTheme,
-} from "@emotion/react";
+import type { CSSInterpolation } from "@emotion/css";
+import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import BuildingIcon from "@mui/icons-material/Build";
 import DownloadIcon from "@mui/icons-material/CloudDownload";
 import UploadIcon from "@mui/icons-material/CloudUpload";
@@ -414,7 +409,7 @@ const getHealthErrors = (health: HealthcheckReport) => {
 
 const classNames = {
   summaryTooltip: (css, theme) => css`
-    ${theme.typography.body2 as CSSObject}
+    ${theme.typography.body2 as CSSInterpolation}
 
     margin: 0 0 4px 12px;
     width: 400px;

site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPage.tsx

@@ -1,8 +1,7 @@
-import { type FC, useEffect } from "react";
+import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useMutation, useQuery, useQueryClient } from "react-query";
 import { useSearchParams } from "react-router-dom";
-import useToggle from "react-use/lib/useToggle";
 import { API } from "api/api";
 import { getErrorMessage } from "api/errors";
 import { entitlements, refreshEntitlements } from "api/queries/entitlements";
@@ -15,7 +14,7 @@ const LicensesSettingsPage: FC = () => {
   const queryClient = useQueryClient();
   const [searchParams, setSearchParams] = useSearchParams();
   const success = searchParams.get("success");
-  const [confettiOn, toggleConfettiOn] = useToggle(false);
+  const [confettiOn, setConfettiOn] = useState(false);
 
   const { metadata } = useEmbeddedMetadata();
   const entitlementsQuery = useQuery(entitlements(metadata.entitlements));
@@ -52,15 +51,20 @@ const LicensesSettingsPage: FC = () => {
   });
 
   useEffect(() => {
-    if (success) {
-      toggleConfettiOn();
-      const timeout = setTimeout(() => {
-        toggleConfettiOn(false);
-        setSearchParams();
-      }, 2000);
-      return () => clearTimeout(timeout);
+    if (!success) {
+      return;
     }
-  }, [setSearchParams, success, toggleConfettiOn]);
+
+    setConfettiOn(true);
+    const timeout = setTimeout(() => {
+      setConfettiOn(false);
+      setSearchParams();
+    }, 2000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [setSearchParams, success]);
 
   return (
     <>

site/src/pages/DeploySettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -9,9 +9,9 @@ import Tooltip from "@mui/material/Tooltip";
 import type { FC } from "react";
 import Confetti from "react-confetti";
 import { Link } from "react-router-dom";
-import useWindowSize from "react-use/lib/useWindowSize";
 import type { GetLicensesResponse } from "api/api";
 import { Stack } from "components/Stack/Stack";
+import { useWindowSize } from "hooks/useWindowSize";
 import { Header } from "../Header";
 import { LicenseCard } from "./LicenseCard";
 

site/src/utils/formUtils.ts

@@ -50,10 +50,7 @@ interface FormHelpers {
 
 export const getFormHelpers =
   <TFormValues>(form: FormikContextType<TFormValues>, error?: unknown) =>
-  (
-    fieldName: keyof TFormValues | string,
-    options: GetFormHelperOptions = {},
-  ): FormHelpers => {
+  (fieldName: string, options: GetFormHelperOptions = {}): FormHelpers => {
     const {
       backendFieldName,
       helperText: defaultHelperText,