chore: upgrade @FluentUI deps and use react v17

Updates all @FluentUI dependencies to latest version. Since there is a problem with @types/react v18 causing type errors in slot properties, all react dependencies used in the repo are set to v17, which is the same version @FluentUI uses. Peer dependencies for react still allow v18.
AxisCommunications · Oct 4, 2023 · 380fa85 · 380fa85
1 parent 4f3e024
commit 380fa85
Show file tree

Hide file tree

Showing 16 changed files with 4,157 additions and 990 deletions.
diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@
 
 **Warning**: _The code and packages developed here should be considered experimental. Some Fluent UI v9 components are release candidates, and some are still in beta/alpha, and others are not in a usable state or not developed yet._
 
+**React**: The components work with a range of React versions as specified in the peer dependencies. However, we've experienced type errors in slots when using a `@types/react` version other than 17 (which is the version used by Fluent v9).
+
 The React packages are based on the `@fluentui/react-*` **v9** packages.
 
 - [`@axiscommunications/fluent-theme`](theme/docs/README.md) - an Axis branded theme

diff --git a/components/notification-bar/package.json b/components/notification-bar/package.json
@@ -32,18 +32,18 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.32.1",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "^9.13.3",
-    "@griffel/react": "^1.5.15",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@griffel/react": "^1.5.16",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^7.0.0",
     "jsdom": "^21.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.5.5",
     "vitest": "^0.30.1"
   },

diff --git a/components/password-input/package.json b/components/password-input/package.json
@@ -32,18 +32,18 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.32.1",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "^9.13.3",
-    "@griffel/react": "^1.5.15",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@griffel/react": "^1.5.16",
     "@testing-library/jest-dom": "^5.16.5",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^7.0.0",
     "jsdom": "^21.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "typescript": "^4.5.5",
     "vitest": "^0.30.1"
   },

diff --git a/components/slider/package.json b/components/slider/package.json
@@ -23,28 +23,28 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.32.1",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "9.6.0",
-    "@griffel/react": "^1.5.15",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@griffel/react": "^1.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^14.4.3",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^7.0.0",
     "jsdom": "^21.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "scheduler": "^0.20.0",
     "typescript": "^4.5.5",
     "vitest": "^0.30.1"
   },
   "peerDependencies": {
     "@fluentui/react-components": "^9.32.1",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.13.0",
     "@griffel/react": "^1.5.15",
     "react": ">=16.8.0 <19.0.0",
     "react-dom": ">=16.8.0 <19.0.0",

diff --git a/components/stepper/package.json b/components/stepper/package.json
@@ -23,19 +23,19 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.32.1",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "^9.13.3",
-    "@griffel/react": "^1.5.15",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@griffel/react": "^1.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^7.0.0",
     "jsdom": "^21.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "scheduler": "^0.20.0",
     "typescript": "^4.5.5",
     "vitest": "^0.30.1"

diff --git a/components/topbar/package.json b/components/topbar/package.json
@@ -32,19 +32,19 @@
     "test:watch": "vitest watch"
   },
   "devDependencies": {
-    "@fluentui/react-components": "^9.32.1",
+    "@fluentui/react-components": "^9.33.0",
     "@fluentui/react-icons": "^2.0.218",
-    "@fluentui/react-utilities": "^9.13.3",
-    "@griffel/react": "^1.5.15",
+    "@fluentui/react-utilities": "^9.13.5",
+    "@griffel/react": "^1.5.16",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/react": ">=16.8.0 <19.0.0",
-    "@types/react-dom": ">=16.8.0 <19.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "@vitest/coverage-c8": "^0.30.1",
     "eslint": "^7.0.0",
     "jsdom": "^21.1.1",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "scheduler": "^0.20.0",
     "typescript": "^4.5.5",
     "vitest": "^0.30.1"

diff --git a/examples/package.json b/examples/package.json
@@ -28,20 +28,20 @@
     "@axiscommunications/fluent-styles": "workspace:*",
     "@axiscommunications/fluent-theme": "workspace:*",
     "@axiscommunications/fluent-topbar": "workspace:*",
-    "@fluentui/react-components": "^9.32.1",
-    "@fluentui/react-context-selector": "^9.1.34",
+    "@fluentui/react-components": "^9.33.0",
+    "@fluentui/react-context-selector": "^9.1.36",
     "@fluentui/react-icons": "^2.0.218",
-    "@griffel/react": "^1.5.15",
+    "@griffel/react": "^1.5.16",
     "@vitejs/plugin-react": "^1.3.2",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "react-router-dom": "6.8.1",
     "scheduler": "0.20.0",
     "vite": "^3.0.9"
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-dom": "^18.0.0",
+    "@types/react": "^17.0.67",
+    "@types/react-dom": "^17.0.21",
     "eslint": "^7.0.0",
     "typescript": "^4.5.5"
   },

diff --git a/examples/src/context/ApplicationStateProvider.tsx b/examples/src/context/ApplicationStateProvider.tsx
@@ -52,7 +52,7 @@ export function useAppContext<T>(
 }
 
 // provider to provide context for app
-export const ApplicationStateProvider: FC<PropsWithChildren> = ({
+export const ApplicationStateProvider: FC<PropsWithChildren<unknown>> = ({
   children,
 }) => {
   const [state, setState] = React.useState<

diff --git a/examples/src/main.tsx b/examples/src/main.tsx
@@ -1,16 +1,15 @@
 import React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 import { App } from "./App";
 import { ApplicationStateProvider } from "./context/ApplicationStateProvider";
 
 const container = document.getElementById("root");
-// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-const root = createRoot(container!);
 
-root.render(
+ReactDOM.render(
   <React.StrictMode>
     <ApplicationStateProvider>
       <App />
     </ApplicationStateProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
+  container
 );
diff --git a/examples/src/stories/slider-page.tsx b/examples/src/stories/slider-page.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useId, useState } from "react";
+import React, { useCallback, useState } from "react";
 
 import {
   RangeSlider,
@@ -13,6 +13,7 @@ import {
   makeStyles,
   mergeClasses,
   tokens,
+  useId,
 } from "@fluentui/react-components";
 import { useLayoutStyles, useScrollPageStyle } from "../styles/page";
 import { PageHeader } from "../components/page-header";

diff --git a/hooks/package.json b/hooks/package.json
@@ -29,9 +29,9 @@
     "lint": "tsc --noEmit && eslint . --cache"
   },
   "devDependencies": {
-    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react": "^18.2.24",
     "eslint": "^7.0.0",
-    "react": ">=16.8.0 <19.0.0",
+    "react": "^18.2.0",
     "typescript": "^4.5.5"
   },
   "peerDependencies": {

diff --git a/icons/package.json b/icons/package.json
@@ -36,13 +36,13 @@
     "react:svg:unfill": "find ./dist/react-svg -type f -name '*.svg' -exec sed -i.bak 's/fill=\"none\"//g' '{}' \\; && find ./dist/react-svg -type f -name '*.bak' -delete"
   },
   "devDependencies": {
-    "@griffel/react": "^1.5.15",
+    "@griffel/react": "^1.5.16",
     "@svgr/core": "^5.5.0",
     "@types/node": "^18.0.0",
-    "@types/react": ">=16.8.0 <19.0.0",
+    "@types/react": "^18.2.24",
     "eslint": "^7.0.0",
     "icon-font-generator": "^2.1.10",
-    "react": ">=16.8.0 <19.0.0",
+    "react": "^18.2.0",
     "replace": "^1.2.0",
     "svgo": "1.3.2",
     "ts-node": "^10.9.1",

diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     "eslint": "^8.34.0",
     "eslint-import-resolver-typescript": "^2.4.0",
     "eslint-plugin-deprecation": "^1.3.3",
-    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "sort-package-json": "2.5.1",
     "tools": "file:tools",