chore(react-experiments): resolve issues with React 18 migration

mainframev · mainframev · commit 15242596d527 · 2025-03-26T20:26:30.000+01:00
diff --git a/packages/react-components/react-combobox/library/config/tests.ts b/packages/react-components/react-combobox/library/config/tests.ts
@@ -0,0 +1,2 @@
+/** Jest test setup file. */
+import '@testing-library/jest-dom';
diff --git a/packages/react-experiments/src/components/Accordion/Accordion.tsx b/packages/react-experiments/src/components/Accordion/Accordion.tsx
@@ -42,8 +42,8 @@ const AccordionStatics = {
   defaultProps: {},
 };
 
-export const Accordion: React.FunctionComponent<IAccordionProps> & {
-  Item: React.FunctionComponent<ICollapsibleSectionProps>;
+export const Accordion: React.FunctionComponent<React.PropsWithChildren<IAccordionProps>> & {
+  Item: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>>;
 } = createComponent(AccordionView, {
   displayName: 'Accordion',
   styles,
diff --git a/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts b/packages/react-experiments/src/components/CollapsibleSection/CollapsibleSection.ts
@@ -5,20 +5,16 @@ import { collapsibleSectionStyles } from './CollapsibleSection.styles';
 import { createComponent } from '@fluentui/foundation-legacy';
 import type { ICollapsibleSectionProps } from './CollapsibleSection.types';
 
-export const CollapsibleSection: React.FunctionComponent<ICollapsibleSectionProps> = createComponent(
-  CollapsibleSectionView,
-  {
+export const CollapsibleSection: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>> =
+  createComponent(CollapsibleSectionView, {
     displayName: 'CollapsibleSection',
     state: useCollapsibleSectionState,
     styles: collapsibleSectionStyles,
-  },
-);
+  });
 
 // TODO: This is only here for testing createComponent and should be removed before promoting to production
-export const CollapsibleSectionStateless: React.FunctionComponent<ICollapsibleSectionProps> = createComponent(
-  CollapsibleSectionView,
-  {
+export const CollapsibleSectionStateless: React.FunctionComponent<React.PropsWithChildren<ICollapsibleSectionProps>> =
+  createComponent(CollapsibleSectionView, {
     displayName: 'CollapsibleSection',
     styles: collapsibleSectionStyles,
-  },
-);
+  });
diff --git a/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts b/packages/react-experiments/src/components/FolderCover/FolderCover.types.ts
@@ -9,7 +9,7 @@ export interface IFolderCoverChildrenProps {
   contentSize: ISize;
 }
 
-export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTMLDivElement> {
+export interface IFolderCoverProps extends IBaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   /**
    * The breakpoint size of the folder cover.
    */
@@ -39,5 +39,5 @@ export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTML
    * The children to pass into the content area of the folder cover.
    */
   // eslint-disable-next-line @typescript-eslint/no-deprecated
-  children?: React.Props<{}>['children'] | ((childrenProps: IFolderCoverChildrenProps) => JSX.Element | null);
+  children?: React.ReactNode | ((childrenProps: IFolderCoverChildrenProps) => JSX.Element | null);
 }
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/CopyableItem.tsx
@@ -17,7 +17,7 @@ export const CopyableItem = <T extends any>(
 ): CopyableItemWrappedComponent<T> => {
   return React.memo((selectedItemProps: ISelectedItemProps<T>) => {
     const onCopy = React.useCallback(
-      item => {
+      (item: T) => {
         const copyText = copyableItemProps.getCopyItemText([item]);
         const copyInput = document.createElement('input') as HTMLInputElement;
         document.body.appendChild(copyInput);
@@ -44,7 +44,7 @@ export const CopyableItem = <T extends any>(
       //   doesn't re-render the component."
       // eslint-disable-next-line react-hooks/exhaustive-deps
       [copyableItemProps.getCopyItemText],
-    );
+    ) as React.ClipboardEventHandler<HTMLElement>;
 
     const ItemComponent = copyableItemProps.itemComponent;
     return <ItemComponent {...selectedItemProps} onCopy={onCopy} />;
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemTrigger.types.ts
@@ -2,6 +2,7 @@ import * as React from 'react';
 import type { ISelectedItemProps } from '../SelectedItemsList.types';
 
 export type TriggerProps<T> = ISelectedItemProps<T> & {
+  item: T;
   onTrigger?: () => void;
 };
 
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/ItemWithContextMenu.tsx
@@ -21,7 +21,7 @@ export const ItemWithContextMenu = <T extends any>(
       setIsContextMenuOpen(true);
     }, [setIsContextMenuOpen]);
     const closeContextMenu = React.useCallback(
-      e => {
+      (e: React.MouseEvent) => {
         e.preventDefault();
         setIsContextMenuOpen(false);
       },
diff --git a/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx b/packages/react-experiments/src/components/SelectedItemsList/Items/TriggerOnContextMenu.tsx
@@ -8,7 +8,7 @@ export const TriggerOnContextMenu = <T extends any>(ItemComponent: React.Compone
     const { onTrigger } = props;
     // eslint-disable-next-line react-hooks/rules-of-hooks -- this is a component
     const trigger = React.useCallback(
-      e => {
+      (e: React.MouseEvent<HTMLElement>) => {
         e.preventDefault();
         e.stopPropagation();
         onTrigger?.();
diff --git a/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx b/packages/react-experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedPersona.tsx
@@ -81,7 +81,7 @@ const SelectedPersonaInner = React.memo(
         const dragDropOptions: IDragDropOptions = {
           eventMap: eventsToRegister,
           selectionIndex: index,
-          context: { data: item, index: index },
+          context: { data: item, index },
           ...dragDropEvents,
           updateDropState: _updateDroppingState,
         };
@@ -110,7 +110,7 @@ const SelectedPersonaInner = React.memo(
     );
 
     const onExpandClicked = React.useCallback(
-      ev => {
+      (ev: React.MouseEvent<HTMLElement>) => {
         ev.stopPropagation();
         ev.preventDefault();
         if (onItemChange && getExpandedItems) {
@@ -127,7 +127,7 @@ const SelectedPersonaInner = React.memo(
     );
 
     const onRemoveClicked = React.useCallback(
-      ev => {
+      (ev: React.MouseEvent<HTMLElement>) => {
         ev.stopPropagation();
         ev.preventDefault();
         onRemoveItem && onRemoveItem();
diff --git a/packages/react-experiments/src/components/Tile/Tile.tsx b/packages/react-experiments/src/components/Tile/Tile.tsx
@@ -94,8 +94,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
     const isModal = !!selection && !!selection.isModal && selection.isModal();
 
     this.state = {
-      isSelected: isSelected,
-      isModal: isModal,
+      isSelected,
+      isModal,
     };
 
     this._events = new EventGroup(this);
@@ -112,8 +112,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
       const isModal = !!nextSelection && nextSelection.isModal && nextSelection.isModal();
 
       this.setState({
-        isSelected: isSelected,
-        isModal: isModal,
+        isSelected,
+        isModal,
       });
     }
   }
@@ -191,8 +191,13 @@ export class Tile extends React.Component<ITileProps, ITileState> {
 
     const tileLayout = getTileLayoutFromProps(this.props);
 
-    const background = typeof propsBackground === 'function' ? propsBackground(tileLayout) : propsBackground;
-    const foreground = typeof propsForeground === 'function' ? propsForeground(tileLayout) : propsForeground;
+    const background = (
+      typeof propsBackground === 'function' ? propsBackground(tileLayout) : propsBackground
+    ) as React.JSX.Element;
+
+    const foreground = (
+      typeof propsForeground === 'function' ? propsForeground(tileLayout) : propsForeground
+    ) as React.JSX.Element;
 
     const onRenderBackground = propsOnRenderBackground
       ? composeRenderFunction(propsOnRenderBackground, this._onRenderBackground)
@@ -290,7 +295,7 @@ export class Tile extends React.Component<ITileProps, ITileState> {
         ) : null}
         {isSelectable
           ? this._onRenderCheck({
-              isSelected: isSelected,
+              isSelected,
             })
           : null}
       </div>
@@ -406,8 +411,8 @@ export class Tile extends React.Component<ITileProps, ITileState> {
     const isModal = !!selection && !!selection.isModal && selection.isModal();
 
     this.setState({
-      isSelected: isSelected,
-      isModal: isModal,
+      isSelected,
+      isModal,
     });
   };
 }
diff --git a/packages/react-experiments/src/components/TilesList/TilesList.types.ts b/packages/react-experiments/src/components/TilesList/TilesList.types.ts
@@ -3,7 +3,7 @@ import { TilesList } from './TilesList';
 import type { IRefObject, IBaseProps, ISize } from '@fluentui/react/lib/Utilities';
 import type { IFocusZone } from '@fluentui/react/lib/FocusZone';
 import type { IListProps } from '@fluentui/react/lib/List';
-import type { IRenderFunction } from '@fluentui/utilities';
+import type { IRenderFunction, IReactProps } from '@fluentui/utilities';
 
 export interface ITilesGridItemCellProps<TItem> {
   item: TItem;
@@ -135,7 +135,7 @@ export interface ITilesGridSegment<TItem> {
 
 export interface ITilesListProps<TItem>
   extends IBaseProps,
-    React.Props<TilesList<TItem>>, // eslint-disable-line @typescript-eslint/no-deprecated
+    IReactProps<TilesList<TItem>>, // eslint-disable-line @typescript-eslint/no-deprecated
     React.HTMLAttributes<HTMLDivElement> {
   /**
    * An array of items to assign to the list.
diff --git a/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx b/packages/react-experiments/src/utilities/scrolling/ScrollContainer.tsx
@@ -25,7 +25,7 @@ export const ScrollContainerContextTypes = {
   scrollContainer: PropTypes.object.isRequired,
 };
 
-export class ScrollContainer extends React.Component<IScrollContainerProps> implements IScrollContainer {
+export class ScrollContainer extends React.Component<React.PropsWithChildren<IScrollContainerProps>> implements IScrollContainer {
   public static childContextTypes: typeof ScrollContainerContextTypes = ScrollContainerContextTypes;
 
   private _observer: IntersectionObserver;

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+/** Jest test setup file. */`
	`2`	`+import '@testing-library/jest-dom';`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ export interface IFolderCoverChildrenProps {`
`9`	`9`	`contentSize: ISize;`
`10`	`10`	`}`
`11`	`11`
`12`		`-export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTMLDivElement> {`
	`12`	`+export interface IFolderCoverProps extends IBaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {`
`13`	`13`	`/**`
`14`	`14`	`* The breakpoint size of the folder cover.`
`15`	`15`	`*/`
`@@ -39,5 +39,5 @@ export interface IFolderCoverProps extends IBaseProps, React.HTMLAttributes<HTML`
`39`	`39`	`* The children to pass into the content area of the folder cover.`
`40`	`40`	`*/`
`41`	`41`	`// eslint-disable-next-line @typescript-eslint/no-deprecated`
`42`		`- children?: React.Props<{}>['children'] \| ((childrenProps: IFolderCoverChildrenProps) => JSX.Element \| null);`
	`42`	`+ children?: React.ReactNode \| ((childrenProps: IFolderCoverChildrenProps) => JSX.Element \| null);`
`43`	`43`	`}`