feat: add react 19 support

apps/react-17-tests/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@fluentui/react-components": "^9.54.13",
+    "@fluentui/react-components": "^9.70.0",
     "@fluentui/react-icons": "^2.0.249",
     "@testing-library/dom": "8.20.1",
     "@testing-library/react": "12.1.5",

apps/react-18-tests/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@fluentui/react-components": "^9.54.13",
+    "@fluentui/react-components": "^9.70.0",
     "@fluentui/react-icons": "^2.0.249",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.3.0",

apps/react-19-tests/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.1",
   "private": true,
   "dependencies": {
-    "@fluentui/react-components": "^9.54.13",
+    "@fluentui/react-components": "^9.70.0",
     "@fluentui/react-icons": "^2.0.249",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.3.0",

change/@fluentui-contrib-azure-theme-bcf0cdde-3f57-46b0-bcd7-a08a86da9b56.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/azure-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-pierce-dom-644b6a4f-d228-4448-81d1-102af5321948.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/pierce-dom",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-chat-45eeba88-b5e1-472f-b68c-adbfc8075f58.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-chat",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-data-grid-react-window-bb713b92-a2a4-4ecb-aaa4-a90c1935e2d5.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-data-grid-react-window",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-data-grid-react-window-grid-7dd5b62e-c685-40ca-a941-b19440e91b39.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-data-grid-react-window-grid",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-draggable-dialog-c8c9e5e7-a06f-4642-98f0-5319c2474067.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-draggable-dialog",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-gamepad-navigation-4cd21111-c9e1-4121-bf40-1e93a50b3806.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-gamepad-navigation",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-headless-provider-b32618db-0885-485d-844c-d2f6333a7c00.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-headless-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-interactive-tab-19a86d52-03c7-47ac-a91b-08a3c1785bf9.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-interactive-tab",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-keytips-ddc94213-34e9-4051-8d80-c0ff65c1b225.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-keytips",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-resize-handle-5d7f3604-7376-4e32-87ec-cad56d22a917.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-resize-handle",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-shadow-f3a63a63-1b80-4ada-bc89-e21f5200f36a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-shadow",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-themeless-provider-6239852a-3673-4cfd-8a3f-26f2028b595a.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-themeless-provider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-react-virtualizer-b3f3a9a0-5959-4433-bd86-5f910c8534e2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/react-virtualizer",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-teams-components-533dd2ca-2afd-42ba-a7f8-10e180ada2a3.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/teams-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

change/@fluentui-contrib-variant-theme-decfbe53-d5b9-4947-9e11-afc52844b14f.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add react 19 support",
+  "packageName": "@fluentui-contrib/variant-theme",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

package.json

@@ -29,7 +29,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fluentui/react": "^8.120.2",
-    "@fluentui/react-components": "^9.68.3",
+    "@fluentui/react-components": "^9.70.0",
     "@fluentui/react-icons": "^2.0.249",
     "@fluentui/react-migration-v8-v9": "^9.9.4",
     "@fluentui/react-shared-contexts": "^9.24.1",

packages/azure-theme/package.json

@@ -13,6 +13,6 @@
     ]
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.46.3 <10.0.0"
+    "@fluentui/react-components": ">=9.70.0 <10.0.0"
   }
 }

packages/azure-theme/stories/DataGrid.stories.tsx

@@ -24,10 +24,11 @@ import {
   createTableColumn,
   FluentProvider,
 } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 
 type FileCell = {
   label: string;
-  icon: JSX.Element;
+  icon: JSXElement;
 };
 
 type LastUpdatedCell = {
@@ -37,7 +38,7 @@ type LastUpdatedCell = {
 
 type LastUpdateCell = {
   label: string;
-  icon: JSX.Element;
+  icon: JSXElement;
 };
 
 type AuthorCell = {

packages/pierce-dom/package.json

@@ -5,7 +5,7 @@
     "@swc/helpers": "~0.5.11"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.46.3 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "tabster": ">=6.0.0"
   }
 }

packages/react-chat/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui-contrib/react-chat",
   "version": "0.1.11",
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.25.1 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "@fluentui/react-icons": ">=2.0.204 <3.0.0",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"

packages/react-contextual-pane/package.json

@@ -8,7 +8,7 @@
   },
   "private": true,
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.54.13 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"
   }

packages/react-contextual-pane/src/components/Header/HeaderTitle.tsx

@@ -30,7 +30,7 @@ export function HeaderTitle({ caption }: HeaderTitleProps) {
       <span
         className={styles.title}
         data-testid="header-title-tooltip"
-        ref={titleRef}
+        ref={titleRef as React.Ref<HTMLSpanElement>}
         {...(titleHasEllipsis ? { tabIndex: 0, role: 'heading' } : {})}
       >
         {caption}

packages/react-data-grid-react-window-grid/package.json

@@ -2,7 +2,7 @@
   "name": "@fluentui-contrib/react-data-grid-react-window-grid",
   "version": "2.3.1",
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.30.0 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "@types/react": ">=16.8.0 <19.0.0",
     "react": ">=16.8.0 <19.0.0"
   },

packages/react-data-grid-react-window-grid/src/components/DataGrid/DataGrid.types.ts

@@ -5,8 +5,8 @@ import {
 import { RefObject } from 'react';
 import { VariableSizeGrid, VariableSizeList } from 'react-window';
 export type DataGridProps = BaseDataGridProps & {
-  bodyRef?: RefObject<VariableSizeGrid>;
-  headerRef?: RefObject<VariableSizeList>;
+  bodyRef?: RefObject<VariableSizeGrid | null>;
+  headerRef?: RefObject<VariableSizeList | null>;
 };
 
 export type DataGridState = BaseDataGridState &

packages/react-data-grid-react-window-grid/src/components/DataGridBody/DataGridBody.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
@@ -16,6 +17,6 @@ export const DataGridBody = React.forwardRef<HTMLElement, DataGridBodyProps>(
     return renderDataGridBody_unstable(state);
   }
 ) as ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSXElement);
 
 DataGridBody.displayName = 'DataGridBody';

packages/react-data-grid-react-window-grid/src/components/DataGridHeaderRow/DataGridHeaderRow.tsx

@@ -4,6 +4,7 @@ import type {
   DataGridRowState,
   ForwardRefComponent,
 } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import { useDataGridHeaderRow_unstable } from './useDataGridHeaderRow';
 import { renderDataGridHeaderRow_unstable } from './renderDataGridHeaderRow';
 import { DataGridHeaderRowProps } from './DataGridHeaderRow.types';
@@ -20,6 +21,6 @@ export const DataGridHeaderRow = React.forwardRef<
   useDataGridRowStyles_unstable(state as unknown as DataGridRowState);
   return renderDataGridHeaderRow_unstable(state);
 }) as ForwardRefComponent<DataGridHeaderRowProps> &
-  (<TItem>(props: DataGridHeaderRowProps<TItem>) => JSX.Element);
+  (<TItem>(props: DataGridHeaderRowProps<TItem>) => JSXElement);
 
 DataGridHeaderRow.displayName = 'DataGridHeaderRow';

packages/react-data-grid-react-window-grid/src/components/DataGridHeaderRow/useDataGridHeaderRow.tsx

@@ -9,7 +9,7 @@ import {
   DataGridHeaderRowState,
 } from './DataGridHeaderRow.types';
 import { useHeaderListRefContext } from '../../contexts/headerListRefContext';
-import { ListOnScrollProps } from 'react-window';
+import { ListOnScrollProps, VariableSizeList } from 'react-window';
 import { useBodyRefContext } from '../../contexts/bodyRefContext';
 import {
   ColumnIndexContextProvider,
@@ -69,7 +69,7 @@ export const useDataGridHeaderRow_unstable = (
     virtualizedCell,
     width,
     listProps,
-    listRef: listRef,
+    listRef: listRef as React.RefObject<VariableSizeList<any>>,
     onScroll,
   };
 };

packages/react-data-grid-react-window-grid/src/contexts/headerListRefContext.ts

@@ -3,17 +3,15 @@ import { VariableSizeList } from 'react-window';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const headerListRefContext: React.Context<
-  React.RefObject<VariableSizeList<any>>
+  React.RefObject<VariableSizeList<any> | null>
 > =
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  React.createContext<React.RefObject<VariableSizeList<any>>>({
+  React.createContext<React.RefObject<VariableSizeList<any> | null>>({
     current: null,
   });
 
-export const headerListRefContextDefaultValue: React.RefObject<
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  VariableSizeList<any>
-> = { current: null };
+export const headerListRefContextDefaultValue: React.RefObject<// eslint-disable-next-line @typescript-eslint/no-explicit-any
+VariableSizeList<any> | null> = { current: null };
 
 export const useHeaderListRefContext = () =>
   React.useContext(headerListRefContext) ?? headerListRefContextDefaultValue;

packages/react-data-grid-react-window/package.json

@@ -6,7 +6,7 @@
     "react-window": "^1.8.5"
   },
   "peerDependencies": {
-    "@fluentui/react-components": ">=9.25.1 <10.0.0",
+    "@fluentui/react-components": ">=9.70.0 <10.0.0",
     "react": ">=16.8.0 <19.0.0"
   }
 }

packages/react-data-grid-react-window/src/components/DataGridBody/DataGridBody.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import { useDataGridBodyStyles_unstable } from './useDataGridBodyStyles.styles';
 import { useDataGridBody_unstable } from './useDataGridBody';
 import { renderDataGridBody_unstable } from './renderDataGridBody';
@@ -16,6 +17,6 @@ export const DataGridBody = React.forwardRef<HTMLElement, DataGridBodyProps>(
     return renderDataGridBody_unstable(state);
   }
 ) as ForwardRefComponent<DataGridBodyProps> &
-  (<TItem>(props: DataGridBodyProps<TItem>) => JSX.Element);
+  (<TItem>(props: DataGridBodyProps<TItem>) => JSXElement);
 
 DataGridBody.displayName = 'DataGridBody';

packages/react-data-grid-react-window/src/components/DataGridHeader/DataGridHeader.tsx

@@ -4,6 +4,7 @@ import {
   type DataGridHeaderProps,
   type ForwardRefComponent,
 } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import { useDataGridHeader_unstable } from './useDataGridHeader';
 import { useDataGridHeaderStyles_unstable } from './useDataGridHeaderStyles.styles';
 
@@ -19,6 +20,6 @@ export const DataGridHeader = React.forwardRef<
   useDataGridHeaderStyles_unstable(state);
   return renderDataGridHeader_unstable(state);
 }) as ForwardRefComponent<DataGridHeaderProps> &
-  ((props: DataGridHeaderProps) => JSX.Element);
+  ((props: DataGridHeaderProps) => JSXElement);
 
 DataGridHeader.displayName = 'DataGridHeader';

packages/react-data-grid-react-window/src/components/DataGridRow/DataGridRow.tsx

@@ -4,6 +4,7 @@ import {
   DataGridRowProps,
 } from '@fluentui/react-components';
 import type { ForwardRefComponent } from '@fluentui/react-components';
+import type { JSXElement } from '@fluentui/react-components';
 import { useDataGridRow_unstable } from './useDataGridRow';
 import { useDataGridRowStyles_unstable } from './useDataGridRow.styles';
 
@@ -18,6 +19,6 @@ export const DataGridRow = React.forwardRef<HTMLElement, DataGridRowProps>(
     return renderDataGridRow_unstable(state);
   }
 ) as ForwardRefComponent<DataGridRowProps> &
-  (<TItem>(props: DataGridRowProps<TItem>) => JSX.Element);
+  (<TItem>(props: DataGridRowProps<TItem>) => JSXElement);
 
 DataGridRow.displayName = 'DataGridRow';

packages/react-data-grid-react-window/stories/DataGrid/DataGridScrollingIndicators.stories.tsx

@@ -36,10 +36,11 @@ import {
   DataGridHeaderCell,
   RowRenderer,
 } from '@fluentui-contrib/react-data-grid-react-window';
+import type { JSXElement } from '@fluentui/react-components';
 
 type FileCell = {
   label: string;
-  icon: JSX.Element;
+  icon: JSXElement;
 };
 
 type LastUpdatedCell = {
@@ -49,7 +50,7 @@ type LastUpdatedCell = {
 
 type LastUpdateCell = {
   label: string;
-  icon: JSX.Element;
+  icon: JSXElement;
 };
 
 type AuthorCell = {