chore: fix react 19 integration tests type issues for v9 (#34722)

dmytrokirpa · web-flow · commit 3e65d7d69695 · 2025-07-31T14:06:24.000+02:00
diff --git a/change/@fluentui-react-accordion-ca27b37d-06d6-45af-8cb8-dcf25eead957.json b/change/@fluentui-react-accordion-ca27b37d-06d6-45af-8cb8-dcf25eead957.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: adjust compoponent props type to support react 19",
+  "packageName": "@fluentui/react-accordion",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-motion-759418fe-b5e1-43ac-b902-c109482e83d9.json b/change/@fluentui-react-motion-759418fe-b5e1-43ac-b902-c109482e83d9.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: adjust PresenseGroup types to support react 19",
+  "packageName": "@fluentui/react-motion",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/@fluentui-react-virtualizer-130d4aca-8026-402b-a617-ae6cbd2ec199.json b/change/@fluentui-react-virtualizer-130d4aca-8026-402b-a617-ae6cbd2ec199.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "\"fix: addjust type for ref props to add null to support react 19\"  ",
+  "packageName": "@fluentui/react-virtualizer",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-accordion/library/etc/react-accordion.api.md b/packages/react-components/react-accordion/library/etc/react-accordion.api.md
@@ -149,7 +149,7 @@ export type AccordionPanelState = ComponentState<AccordionPanelSlots> & {
 };
 
 // @public (undocumented)
-export type AccordionProps<Value = AccordionItemValue> = ComponentProps<AccordionSlots> & {
+export type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {
     defaultOpenItems?: Value | Value[];
     collapsible?: boolean;
     multiple?: boolean;
diff --git a/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts b/packages/react-components/react-accordion/library/src/components/Accordion/Accordion.types.ts
@@ -25,7 +25,7 @@ export type AccordionToggleData<Value = AccordionItemValue> = {
   openItems: Value[];
 };
 
-export type AccordionProps<Value = AccordionItemValue> = ComponentProps<AccordionSlots> & {
+export type AccordionProps<Value = AccordionItemValue> = Omit<ComponentProps<AccordionSlots>, 'onToggle'> & {
   /**
    * Default value for the uncontrolled state of the panel.
    */
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Collapse/CollapseCustomization.stories.tsx
@@ -71,7 +71,7 @@ const LoremIpsum = () => (
 
 export const Customization = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [animateOpacity, setAnimateOpacity] = React.useState(true);
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Fade/FadeCustomization.stories.tsx
@@ -69,7 +69,7 @@ const LoremIpsum = () => (
 
 export const Customization = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx b/packages/react-components/react-motion-components-preview/stories/src/Scale/ScaleCustomization.stories.tsx
@@ -79,7 +79,7 @@ const LoremIpsum = () => (
 
 export const Customization = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [animateOpacity, setAnimateOpacity] = React.useState(false);
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
diff --git a/packages/react-components/react-motion/library/etc/react-motion.api.md b/packages/react-components/react-motion/library/etc/react-motion.api.md
@@ -127,7 +127,7 @@ export type PresenceDirection = 'enter' | 'exit';
 
 // @public (undocumented)
 export class PresenceGroup extends React_2.Component<PresenceGroupProps, PresenceGroupState> {
-    constructor(props: PresenceGroupProps, context: unknown);
+    constructor(props: PresenceGroupProps, context?: unknown);
     // (undocumented)
     componentDidMount(): void;
     // (undocumented)
diff --git a/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx b/packages/react-components/react-motion/library/src/components/PresenceGroup.tsx
@@ -33,7 +33,7 @@ export class PresenceGroup extends React.Component<PresenceGroupProps, PresenceG
     };
   }
 
-  constructor(props: PresenceGroupProps, context: unknown) {
+  constructor(props: PresenceGroupProps, context?: unknown) {
     // eslint-disable-next-line @typescript-eslint/no-deprecated
     super(props, context);
 
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentArrays.stories.tsx
@@ -93,7 +93,7 @@ const FadeFastGrowSlow = createMotionComponent([
 export const CreateMotionComponentArrays = () => {
   const classes = useClasses();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const ref = React.useRef<HTMLDivElement>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(10);
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentDefault.stories.tsx
@@ -49,7 +49,7 @@ const FadeEnter = createMotionComponent({
 
 export const CreateMotionComponentDefault = (props: MotionComponentProps) => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   // Heads up!
   // This is optional and is intended solely to slow down the animations, making motions more visible in the examples.
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctionParams.stories.tsx
@@ -91,8 +91,8 @@ const Scale = createMotionComponent<{ startFrom?: number }>(({ startFrom = 0.5 }
 export const CreateMotionComponentFunctionParams = () => {
   const classes = useClasses();
 
-  const motionBRef = React.useRef<MotionImperativeRef>();
-  const motionARef = React.useRef<MotionImperativeRef>();
+  const motionBRef = React.useRef<MotionImperativeRef>(null);
+  const motionARef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(20);
 
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentFunctions.stories.tsx
@@ -77,7 +77,7 @@ const Grow = createMotionComponent(({ element }) => ({
 export const CreateMotionComponentFunctions = () => {
   const classes = useClasses();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const [playbackRate, setPlaybackRate] = React.useState<number>(20);
 
   // Heads up!
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentImperativeRefPlayState.stories.tsx
@@ -74,7 +74,7 @@ const FadeEnter = createMotionComponent({
 
 export const CreateMotionComponentImperativeRefPlayState = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [isRunning, setIsRunning] = React.useState<boolean>(false);
diff --git a/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.stories.tsx b/packages/react-components/react-motion/stories/src/CreateMotionComponent/CreateMotionComponentLifecycleCallbacks.stories.tsx
@@ -97,7 +97,7 @@ export const CreateMotionComponentLifecycleCallbacks = () => {
   const classes = useClasses();
   const logLabelId = useId();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const [statusLog, setStatusLog] = React.useState<[number, string][]>([]);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentAppear.stories.tsx
@@ -74,7 +74,7 @@ const Fade = createPresenceComponent({
 
 export const CreatePresenceComponentAppear = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [isMounted, setIsMounted] = React.useState<boolean>(false);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentArrays.stories.tsx
@@ -98,7 +98,7 @@ const FastFadeSlowScale = createPresenceComponent({
 export const CreatePresenceComponentArrays = () => {
   const classes = useClasses();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const ref = React.useRef<HTMLDivElement>(null);
 
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFactory.stories.tsx
@@ -70,7 +70,7 @@ const DropIn = createPresenceComponent({
 export const CreatePresenceComponentFactory = () => {
   const classes = useClasses();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const [visible, setVisible] = React.useState<boolean>(false);
 
   return (
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctionParams.stories.tsx
@@ -94,8 +94,8 @@ const Scale = createPresenceComponent<{ startFrom?: number }>(({ startFrom = 0.5
 export const CreatePresenceComponentFunctionParams = () => {
   const classes = useClasses();
 
-  const motionBRef = React.useRef<MotionImperativeRef>();
-  const motionARef = React.useRef<MotionImperativeRef>();
+  const motionBRef = React.useRef<MotionImperativeRef>(null);
+  const motionARef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentFunctions.stories.tsx
@@ -90,8 +90,8 @@ const Collapse = createPresenceComponent(collapseMotion);
 export const CreatePresenceComponentFunctions = () => {
   const classes = useClasses();
 
-  const motionInRef = React.useRef<MotionImperativeRef>();
-  const motionOutRef = React.useRef<MotionImperativeRef>();
+  const motionInRef = React.useRef<MotionImperativeRef>(null);
+  const motionOutRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentLifecycleCallbacks.stories.tsx
@@ -102,7 +102,7 @@ export const CreatePresenceComponentLifecycleCallbacks = () => {
   const classes = useClasses();
   const logLabelId = useId();
 
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
   const [statusLog, setStatusLog] = React.useState<[number, string, string][]>([]);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentReducedMotion.stories.tsx
@@ -91,7 +91,7 @@ const FadeAndScale = createPresenceComponent({
 
 export const CreatePresenceComponentReducedMotion = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.stories.tsx b/packages/react-components/react-motion/stories/src/CreatePresenceComponent/CreatePresenceComponentUnmountOnExit.stories.tsx
@@ -74,7 +74,7 @@ const Fade = createPresenceComponent({
 
 export const CreatePresenceComponentUnmountOnExit = () => {
   const classes = useClasses();
-  const motionRef = React.useRef<MotionImperativeRef>();
+  const motionRef = React.useRef<MotionImperativeRef>(null);
 
   const [playbackRate, setPlaybackRate] = React.useState<number>(30);
   const [visible, setVisible] = React.useState<boolean>(true);
diff --git a/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerWithTooltip.stories.tsx b/packages/react-components/react-swatch-picker/stories/src/SwatchPicker/SwatchPickerWithTooltip.stories.tsx
@@ -54,8 +54,8 @@ export const SwatchPickerWithTooltip = () => {
         {renderSwatchPickerGrid({
           items: colors,
           columnCount: 3,
-          renderSwatch: (item: SwatchProps) => (
-            <ColorSwatchWithTooltip key={item.value} color={item.color ?? ''} {...item} />
+          renderSwatch: ({ color = '', ...item }: SwatchProps) => (
+            <ColorSwatchWithTooltip key={item.value} color={color} {...item} />
           ),
         })}
       </SwatchPicker>
diff --git a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumns.stories.tsx
@@ -196,7 +196,11 @@ export const ResizableColumns = () => {
               dataGrid.resizableColumns ? (
                 <Menu openOnContext>
                   <MenuTrigger>
-                    <DataGridHeaderCell ref={el => (refMap.current[columnId] = el)}>
+                    <DataGridHeaderCell
+                      ref={el => {
+                        refMap.current[columnId] = el;
+                      }}
+                    >
                       {renderHeaderCell()}
                     </DataGridHeaderCell>
                   </MenuTrigger>
diff --git a/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx b/packages/react-components/react-table/stories/src/DataGrid/ResizableColumnsDisableAutoFit.stories.tsx
@@ -199,7 +199,11 @@ export const ResizableColumns = () => {
               dataGrid.resizableColumns ? (
                 <Menu openOnContext>
                   <MenuTrigger>
-                    <DataGridHeaderCell ref={el => (refMap.current[columnId] = el)}>
+                    <DataGridHeaderCell
+                      ref={el => {
+                        refMap.current[columnId] = el;
+                      }}
+                    >
                       {renderHeaderCell()}
                     </DataGridHeaderCell>
                   </MenuTrigger>
diff --git a/packages/react-components/react-tree/stories/src/Tree/Virtualization.stories.tsx b/packages/react-components/react-tree/stories/src/Tree/Virtualization.stories.tsx
@@ -49,7 +49,7 @@ type FixedSizeTreeProps = Omit<FlatTreeProps, 'children'> & {
 /**
  * FixedSizeTree is a recomposition of Tree component that uses react-window FixedSizeList to render items.
  */
-const FixedSizeTree: ForwardRefComponent<FixedSizeTreeProps> = React.forwardRef((props, ref) => {
+const FixedSizeTree = React.forwardRef<HTMLElement, FixedSizeTreeProps>((props, ref) => {
   const state = useFlatTree_unstable(props, ref);
   useFlatTreeStyles_unstable(state);
   const contextValues = useFlatTreeContextValues_unstable(state);
@@ -68,7 +68,7 @@ const FixedSizeTree: ForwardRefComponent<FixedSizeTreeProps> = React.forwardRef(
       </state.root>
     </TreeProvider>
   );
-});
+}) as ForwardRefComponent<FixedSizeTreeProps>;
 
 interface FixedSizeTreeItemProps extends ListChildComponentProps {
   data: HeadlessFlatTreeItem<ItemProps>[];
diff --git a/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md b/packages/react-components/react-virtualizer/library/etc/react-virtualizer.api.md
@@ -195,7 +195,7 @@ export type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<Virtualiz
     getItemSize?: (index: number) => number;
     numItems: number;
     children: VirtualizerChildRenderFunction;
-    imperativeRef?: React_2.RefObject<ScrollToInterface>;
+    imperativeRef?: React_2.RefObject<ScrollToInterface | null>;
     enablePagination?: boolean;
     virtualizerContext?: DynamicVirtualizerContextProps;
 };
@@ -211,7 +211,7 @@ export type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrol
     itemSize: number;
     numItems: number;
     children: VirtualizerChildRenderFunction;
-    imperativeRef?: React_2.RefObject<ScrollToInterface>;
+    imperativeRef?: React_2.RefObject<ScrollToInterface | null>;
     enablePagination?: boolean;
 };
 
diff --git a/packages/react-components/react-virtualizer/library/src/components/Virtualizer/Virtualizer.types.ts b/packages/react-components/react-virtualizer/library/src/components/Virtualizer/Virtualizer.types.ts
@@ -202,7 +202,7 @@ export type VirtualizerConfigProps = {
   /**
    * Imperative ref contains our scrollTo index functionality for user control.
    */
-  imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef>;
+  imperativeVirtualizerRef?: React.RefObject<VirtualizerDataRef | null>;
 
   /**
    * A ref that provides the size of container (vertical - height, horizontal - width), set by a resize observer.
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollView/VirtualizerScrollView.types.ts
@@ -47,7 +47,7 @@ export type VirtualizerScrollViewProps = ComponentProps<Partial<VirtualizerScrol
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
-    imperativeRef?: React.RefObject<ScrollToInterface>;
+    imperativeRef?: React.RefObject<ScrollToInterface | null>;
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
diff --git a/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts b/packages/react-components/react-virtualizer/library/src/components/VirtualizerScrollViewDynamic/VirtualizerScrollViewDynamic.types.ts
@@ -49,7 +49,7 @@ export type VirtualizerScrollViewDynamicProps = ComponentProps<Partial<Virtualiz
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
-    imperativeRef?: React.RefObject<ScrollToInterface>;
+    imperativeRef?: React.RefObject<ScrollToInterface | null>;
     /**
      * Imperative ref contains our scrollTo index functionality for user control.
      */
diff --git a/packages/react-components/react-virtualizer/stories/src/Virtualizer/Dynamic.stories.tsx b/packages/react-components/react-virtualizer/stories/src/Virtualizer/Dynamic.stories.tsx
@@ -35,15 +35,15 @@ export const Dynamic = () => {
   const [flag, toggleFlag] = React.useState(false);
   const styles = useStyles();
   const childLength = 1000;
-  const timeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
+  const timeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
 
   React.useEffect(() => {
     updateTimeout();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const updateTimeout = () => {
-    clearTimeout(timeoutRef.current);
+    timeoutRef.current && clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
       toggleFlag(iFlag => !iFlag);
       updateTimeout();

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export class PresenceGroup extends React.Component<PresenceGroupProps, PresenceG`
`33`	`33`	`};`
`34`	`34`	`}`
`35`	`35`
`36`		`- constructor(props: PresenceGroupProps, context: unknown) {`
	`36`	`+ constructor(props: PresenceGroupProps, context?: unknown) {`
`37`	`37`	`// eslint-disable-next-line @typescript-eslint/no-deprecated`
`38`	`38`	`super(props, context);`
`39`	`39`