chore: upgrade @FluentUI deps and use react v17 (#21)

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 · f829d89 · f829d89
1 parent 4f3e024
commit f829d89
Show file tree

Hide file tree

Showing 18 changed files with 2,637 additions and 1,034 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/react": "^12.1.5",
     "@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/slider/src/__snapshots__/range-slider.spec.tsx.snap b/components/slider/src/__snapshots__/range-slider.spec.tsx.snap
@@ -20,12 +20,12 @@ exports[`range-slider > should render 1`] = `
             />
           </span>
           <div
-            class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+            class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
             style="left: 20%;"
           >
             <input
               data-index="0"
-              id="slider-thumb-r0"
+              id="slider-thumb-1"
               max="100"
               min="0"
               type="range"
@@ -38,12 +38,12 @@ exports[`range-slider > should render 1`] = `
             </span>
           </div>
           <div
-            class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+            class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
             style="left: 40%;"
           >
             <input
               data-index="1"
-              id="slider-thumb-r1"
+              id="slider-thumb-2"
               max="100"
               min="0"
               type="range"
@@ -75,12 +75,12 @@ exports[`range-slider > should render 1`] = `
           />
         </span>
         <div
-          class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+          class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
           style="left: 20%;"
         >
           <input
             data-index="0"
-            id="slider-thumb-r0"
+            id="slider-thumb-1"
             max="100"
             min="0"
             type="range"
@@ -93,12 +93,12 @@ exports[`range-slider > should render 1`] = `
           </span>
         </div>
         <div
-          class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+          class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
           style="left: 40%;"
         >
           <input
             data-index="1"
-            id="slider-thumb-r1"
+            id="slider-thumb-2"
             max="100"
             min="0"
             type="range"

diff --git a/components/slider/src/__snapshots__/slider.spec.tsx.snap b/components/slider/src/__snapshots__/slider.spec.tsx.snap
@@ -20,12 +20,12 @@ exports[`slider > should render 1`] = `
             />
           </span>
           <div
-            class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+            class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
             style="left: 20%;"
           >
             <input
               data-index="0"
-              id="slider-thumb-r0"
+              id="slider-thumb-1"
               max="100"
               min="0"
               type="range"
@@ -57,12 +57,12 @@ exports[`slider > should render 1`] = `
           />
         </span>
         <div
-          class="axis-Slider__thumb ___yjt7u40_1dh3pfy f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 fj7ikun f1qcq4si f3llg7k f1hyzvmj fcetbih f1kt6s4o"
+          class="axis-Slider__thumb ___14hb9vm_jmfl5w0 f8fbkgy f1nfllo7 f1djnp8u f1s8kh49 f22iagw f4d9j23 f122n59 f1euv43f f1t2h5zl f4aqd28 f1i1t8d1 f1vcxb5z fk1lali f1ewtqcl frcgkvu feh19e8 f3j3guj fo75joz f1yag6sl fsc6avr f1w15cjc fkaq55s f1fp5o0y f163fonl f1yq6w5o f11yjt3y f1jpmc5p f10tv6oz f16xp3sf fwrmqbx f1seuxxq f1j7ml58 f14u7mkt f5zrw40 fto0uou f1ks5ppg fyl8oag f1wl9k8s f1mdlcz9 fmmikit f10awi5f f1mfomsq fftmtmu f13zj6fq fgougqc fprarqb f14vs0nd f1gtfqs9 f18zvfd9 f8sy9bk fufffdp f1sclg23 f132a78j fcetbih f1kt6s4o"
           style="left: 20%;"
         >
           <input
             data-index="0"
-            id="slider-thumb-r0"
+            id="slider-thumb-1"
             max="100"
             min="0"
             type="range"

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",
+    "@testing-library/react": "^12.1.5",
+    "@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",
+    "@testing-library/react": "^12.1.5",
+    "@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",