chore(deps): upgrade React to 19.2.0

components/empty-view/package.json

@@ -31,17 +31,17 @@
     "@axiscommunications/fluent-illustrations": "workspace:*"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "esbuild": "^0.25.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.62.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react-components": "^9.72.7",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"

components/empty-view/src/view.tsx

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren } from "react";
+import { PropsWithChildren } from "react";
 
 import {
   Body1,

components/password-input/package.json

@@ -26,19 +26,19 @@
     "lint": "tsc --noEmit && biome check"
   },
   "devDependencies": {
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "esbuild": "^0.25.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.62.0",
-    "@fluentui/react-icons": "^2.0.297",
-    "@fluentui/react-utilities": "^9.19.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react-components": "^9.72.7",
+    "@fluentui/react-icons": "^2.0.315",
+    "@fluentui/react-utilities": "^9.25.4",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"

components/slider/package.json

@@ -30,23 +30,23 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.2.1",
+    "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "esbuild": "^0.25.3",
     "jsdom": "^26.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.1.2"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.62.0",
-    "@fluentui/react-icons": "^2.0.297",
-    "@fluentui/react-utilities": "^9.19.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react-components": "^9.72.7",
+    "@fluentui/react-icons": "^2.0.315",
+    "@fluentui/react-utilities": "^9.25.4",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"

components/slider/src/__snapshots__/range-slider.spec.tsx.snap

@@ -25,7 +25,7 @@ exports[`range-slider > should render 1`] = `
           >
             <input
               data-index="0"
-              id="slider-thumb-r0"
+              id="slider-thumb-_r_0_"
               max="100"
               min="0"
               type="range"
@@ -43,7 +43,7 @@ exports[`range-slider > should render 1`] = `
           >
             <input
               data-index="1"
-              id="slider-thumb-r1"
+              id="slider-thumb-_r_1_"
               max="100"
               min="0"
               type="range"
@@ -80,7 +80,7 @@ exports[`range-slider > should render 1`] = `
         >
           <input
             data-index="0"
-            id="slider-thumb-r0"
+            id="slider-thumb-_r_0_"
             max="100"
             min="0"
             type="range"
@@ -98,7 +98,7 @@ exports[`range-slider > should render 1`] = `
         >
           <input
             data-index="1"
-            id="slider-thumb-r1"
+            id="slider-thumb-_r_1_"
             max="100"
             min="0"
             type="range"

components/slider/src/__snapshots__/slider.spec.tsx.snap

@@ -25,7 +25,7 @@ exports[`slider > should render 1`] = `
           >
             <input
               data-index="0"
-              id="slider-thumb-r0"
+              id="slider-thumb-_r_0_"
               max="100"
               min="0"
               type="range"
@@ -62,7 +62,7 @@ exports[`slider > should render 1`] = `
         >
           <input
             data-index="0"
-            id="slider-thumb-r0"
+            id="slider-thumb-_r_0_"
             max="100"
             min="0"
             type="range"

components/slider/src/mark/label/render-mark-label.tsx

@@ -1,6 +1,5 @@
 import { getSlots } from "@fluentui/react-utilities";
 
-import React from "react";
 import { MarkLabelSlots, MarkLabelState } from "./mark-label.types";
 
 export const renderMarkLabel_unstable = (state: MarkLabelState) => {

components/slider/src/mark/render-mark.tsx

@@ -1,6 +1,5 @@
 import { getSlots } from "@fluentui/react-utilities";
 
-import React from "react";
 import { MarkSlots, MarkState } from "./mark.types";
 
 export const renderMark_unstable = (state: MarkState) => {

components/slider/src/range-slider.spec.tsx

@@ -1,6 +1,5 @@
 import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import React from "react";
 import { describe, expect, it, vi } from "vitest";
 import "@testing-library/jest-dom";
 

components/slider/src/render-slider.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import { getSlots } from "@fluentui/react-utilities";
 
 import { SliderContextProvider } from "./context/slider-context";

components/slider/src/section/render-section.tsx

@@ -1,6 +1,5 @@
 import { getSlots } from "@fluentui/react-utilities";
 
-import React from "react";
 import { SectionSlots, SectionState } from "./section.types";
 
 export const renderSection_unstable = (state: SectionState) => {

components/slider/src/slider.spec.tsx

@@ -2,7 +2,6 @@ import { fireEvent, render } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import "@testing-library/jest-dom";
 import { FluentProvider } from "@fluentui/react-components";
-import React from "react";
 import { describe, expect, it, vi } from "vitest";
 import { Slider } from "./slider";
 import { getControlRoot } from "./test-helpers";

components/slider/src/thumb/render-thumb.tsx

@@ -1,6 +1,5 @@
 import { getSlots } from "@fluentui/react-utilities";
 
-import React from "react";
 import { ThumbSlots, ThumbState } from "./thumb.types";
 
 export const renderThumb_unstable = (state: ThumbState) => {

components/slider/src/use-range-slider.ts

@@ -339,7 +339,7 @@ export const useRangeSlider_unstable = (
     removeListeners();
   });
 
-  const touchId = useRef<number>();
+  const touchId = useRef<number | undefined>(undefined);
 
   const handleTouchStart = useEventCallback((event: TouchEvent) => {
     // prevent scrolling

components/stepper/package.json

@@ -29,22 +29,22 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.2.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "esbuild": "^0.25.3",
     "jsdom": "^26.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.1.2"
   },
   "peerDependencies": {
-    "@fluentui/react-components": "^9.62.0",
-    "@fluentui/react-icons": "^2.0.297",
-    "@fluentui/react-utilities": "^9.19.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react-components": "^9.72.7",
+    "@fluentui/react-icons": "^2.0.315",
+    "@fluentui/react-utilities": "^9.25.4",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"

components/stepper/src/step-symbol/render-step-symbol.tsx

@@ -1,5 +1,4 @@
 import { getSlots } from "@fluentui/react-utilities";
-import React from "react";
 import type { StepSymbolSlots, StepSymbolState } from "./step-symbol.types";
 
 export const renderStepSymbol_unstable = (state: StepSymbolState) => {

components/stepper/src/step-symbol/use-step-symbol.ts

@@ -3,7 +3,7 @@ import {
   getNativeElementProps,
   resolveShorthand,
 } from "@fluentui/react-utilities";
-import React from "react";
+import { createElement } from "react";
 import type { StepSymbolProps, StepSymbolState } from "./step-symbol.types";
 
 export const useStepSymbol_unstable = (
@@ -26,7 +26,7 @@ export const useStepSymbol_unstable = (
     icon: resolveShorthand(props.icon, {
       required: true,
       defaultProps: {
-        children: React.createElement(CheckmarkFilled),
+        children: createElement(CheckmarkFilled),
       },
     }),
   };

components/stepper/src/step/render-step.tsx

@@ -1,5 +1,4 @@
 import { getSlots } from "@fluentui/react-utilities";
-import React from "react";
 import { StepSymbol } from "../step-symbol";
 import type { StepSlots, StepState } from "./step.types";
 

components/stepper/src/stepper-dialog.spec.tsx

@@ -1,5 +1,4 @@
 import { render } from "@testing-library/react";
-import React from "react";
 import { vi } from "vitest";
 import { StepperDialog } from "./stepper-dialog";
 import { DialogStep } from "./stepper-dialog.types";

components/stepper/src/stepper-dialog.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@fluentui/react-components";
-import React, { useCallback } from "react";
+import { useCallback } from "react";
 import { Stepper } from "./stepper";
 import { useStepperDialogStyles } from "./stepper-dialog.styles";
 import { StepperDialogProps } from "./stepper-dialog.types";

components/stepper/src/stepper-dialog.types.ts

@@ -1,14 +1,15 @@
+import { ReactElement } from "react";
 import { TStep } from "./stepper.types";
 
 export type DialogStep = TStep & {
-  content: JSX.Element;
+  content: ReactElement;
 };
 
 export type StepperDialogProps = {
   currentStep: number;
   steps: DialogStep[];
   hideSteps?: boolean;
-  footerContent?: JSX.Element;
+  footerContent?: ReactElement;
   vertical?: boolean;
   onStepChange: (newStep: number) => void;
   onFinish: () => void;

components/topbar/package.json

@@ -34,23 +34,23 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^14.2.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@testing-library/react": "^16.3.0",
+    "@types/react": "^19.2.6",
+    "@types/react-dom": "^19.2.3",
     "esbuild": "^0.25.3",
     "jsdom": "^26.1.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "typescript": "^5.8.3",
     "vitest": "^3.1.2"
   },
   "peerDependencies": {
     "@axiscommunications/fluent-theme": ">=9.0.0",
-    "@fluentui/react-components": "^9.62.0",
-    "@fluentui/react-icons": "^2.0.297",
-    "@fluentui/react-utilities": "^9.19.0",
-    "react": ">=16.8.0 <19.0.0",
-    "react-dom": ">=16.8.0 <19.0.0"
+    "@fluentui/react-components": "^9.72.7",
+    "@fluentui/react-icons": "^2.0.315",
+    "@fluentui/react-utilities": "^9.25.4",
+    "react": ">=16.14.0 <20.0.0",
+    "react-dom": ">=16.14.0 <20.0.0"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/"

components/topbar/src/application-drawer-v1.tsx

@@ -12,7 +12,7 @@ import {
   tokens,
 } from "@fluentui/react-components";
 import { ArrowRightRegular, Dismiss20Regular } from "@fluentui/react-icons";
-import React, { useState } from "react";
+import { ReactElement, useState } from "react";
 import { useApplicationDrawerStyles } from "./application-drawer-v1.styles";
 import {
   ApplicationDrawerContent,
@@ -95,7 +95,7 @@ const ApplicationGroupTitle = ({
   application,
 }: {
   application: ApplicationDrawerContent;
-}): JSX.Element => {
+}): ReactElement => {
   const styles = useApplicationDrawerStyles();
   const appStyles = useApplicationStyles();
 
@@ -117,7 +117,7 @@ const ApplicationGroupTitle = ({
 };
 
 const iconConverter = (
-  icon: JSX.Element,
+  icon: ReactElement,
   isCurrent: boolean,
   applicationArea: ApplicationArea
 ) => {
@@ -141,7 +141,7 @@ const SingleApplication = ({
   currentSelectionId: string;
   onChange: (id: string) => void;
   applicationArea: ApplicationArea;
-}): JSX.Element => {
+}): ReactElement => {
   const styles = useApplicationDrawerStyles();
 
   return (
@@ -174,7 +174,7 @@ const ApplicationWithChildren = ({
   currentSelectionId: string;
   onChange: (id: string) => void;
   applicationArea: ApplicationArea;
-}): JSX.Element => {
+}): ReactElement => {
   const styles = useApplicationDrawerStyles();
 
   return (