Fix forward red type inference

mui · Sep 16, 2024 · a5548f5 · a5548f5
1 parent 624ba8c
commit a5548f5
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 143 deletions.
diff --git a/packages/mui-base/src/Modal/Modal.tsx b/packages/mui-base/src/Modal/Modal.tsx
@@ -44,10 +44,9 @@ const useUtilityClasses = (ownerState: ModalOwnerState) => {
  *
  * - [Modal API](https://mui.com/base-ui/react-modal/components-api/#modal)
  */
-const Modal = React.forwardRef(function Modal<RootComponentType extends React.ElementType>(
-  props: ModalProps<RootComponentType>,
-  forwardedRef: React.ForwardedRef<HTMLElement>,
-) {
+const Modal = React.forwardRef<HTMLElement, ModalProps>(function Modal<
+  RootComponentType extends React.ElementType,
+>(props: ModalProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLElement>) {
   const {
     children,
     closeAfterTransition = false,

diff --git a/packages/mui-base/src/Option/Option.tsx b/packages/mui-base/src/Option/Option.tsx
@@ -21,6 +21,7 @@ function useUtilityClasses<OptionValue>(ownerState: OptionOwnerState<OptionValue
 }
 
 const InnerOption = React.memo(
+  // @ts-ignore TEST
   React.forwardRef(function Option<OptionValue, RootComponentType extends React.ElementType>(
     props: OptionProps<OptionValue, RootComponentType>,
     forwardedRef: React.ForwardedRef<Element>,

diff --git a/packages/mui-base/src/Popper/Popper.tsx b/packages/mui-base/src/Popper/Popper.tsx
@@ -75,7 +75,7 @@ const useUtilityClasses = () => {
 
 const defaultPopperOptions = {};
 
-const PopperTooltip = React.forwardRef(function PopperTooltip<
+const PopperTooltip = React.forwardRef<HTMLDivElement, PopperTooltipProps>(function PopperTooltip<
   RootComponentType extends React.ElementType,
 >(props: PopperTooltipProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
   const {
@@ -245,10 +245,9 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
  *
  * - [Popper API](https://mui.com/base-ui/react-popper/components-api/#popper)
  */
-const Popper = React.forwardRef(function Popper<RootComponentType extends React.ElementType>(
-  props: PopperProps<RootComponentType>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+const Popper = React.forwardRef<HTMLDivElement, PopperProps>(function Popper<
+  RootComponentType extends React.ElementType,
+>(props: PopperProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
   const {
     anchorEl,
     children,

diff --git a/packages/mui-base/src/TablePagination/TablePagination.tsx b/packages/mui-base/src/TablePagination/TablePagination.tsx
@@ -59,7 +59,7 @@ const useUtilityClasses = () => {
  *
  * - [TablePagination API](https://mui.com/base-ui/react-table-pagination/components-api/#table-pagination)
  */
-const TablePagination = React.forwardRef(function TablePagination<
+const TablePagination = React.forwardRef<Element, TablePaginationProps>(function TablePagination<
   RootComponentType extends React.ElementType,
 >(props: TablePaginationProps<RootComponentType>, forwardedRef: React.ForwardedRef<Element>) {
   const {

diff --git a/packages/mui-base/src/TablePagination/TablePaginationActions.tsx b/packages/mui-base/src/TablePagination/TablePaginationActions.tsx
@@ -29,136 +29,136 @@ function defaultGetAriaLabel(type: ItemAriaLabelType) {
 /**
  * @ignore - internal component.
  */
-const TablePaginationActions = React.forwardRef(function TablePaginationActions<
-  RootComponentType extends React.ElementType,
->(
-  props: TablePaginationActionsProps<RootComponentType>,
-  forwardedRef: React.ForwardedRef<Element>,
-) {
-  const {
-    count,
-    getItemAriaLabel = defaultGetAriaLabel,
-    onPageChange,
-    page,
-    rowsPerPage,
-    showFirstButton = false,
-    showLastButton = false,
-    direction,
-    // @ts-ignore
-    ownerState: ownerStateProp,
-    slotProps = {},
-    slots = {},
-    ...other
-  } = props;
-
-  const ownerState = props;
-
-  const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, 0);
-  };
-
-  const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page - 1);
-  };
-
-  const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, page + 1);
-  };
-
-  const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
-  };
-
-  const Root = slots.root ?? 'div';
-  const rootProps: WithOptionalOwnerState<TablePaginationActionsRootSlotProps> = useSlotProps({
-    elementType: Root,
-    externalSlotProps: slotProps.root,
-    externalForwardedProps: other,
-    additionalProps: { ref: forwardedRef },
-    ownerState,
-  });
-
-  const FirstButton = slots.firstButton ?? 'button';
-  const firstButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
-    useSlotProps({
-      elementType: FirstButton,
-      externalSlotProps: slotProps.firstButton,
-      additionalProps: {
-        onClick: handleFirstPageButtonClick,
-        disabled: page === 0,
-        'aria-label': getItemAriaLabel('first', page),
-        title: getItemAriaLabel('first', page),
-      },
+const TablePaginationActions = React.forwardRef<Element, TablePaginationActionsProps>(
+  function TablePaginationActions<RootComponentType extends React.ElementType>(
+    props: TablePaginationActionsProps<RootComponentType>,
+    forwardedRef: React.ForwardedRef<Element>,
+  ) {
+    const {
+      count,
+      getItemAriaLabel = defaultGetAriaLabel,
+      onPageChange,
+      page,
+      rowsPerPage,
+      showFirstButton = false,
+      showLastButton = false,
+      direction,
+      // @ts-ignore
+      ownerState: ownerStateProp,
+      slotProps = {},
+      slots = {},
+      ...other
+    } = props;
+
+    const ownerState = props;
+
+    const handleFirstPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onPageChange(event, 0);
+    };
+
+    const handleBackButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onPageChange(event, page - 1);
+    };
+
+    const handleNextButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onPageChange(event, page + 1);
+    };
+
+    const handleLastPageButtonClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1));
+    };
+
+    const Root = slots.root ?? 'div';
+    const rootProps: WithOptionalOwnerState<TablePaginationActionsRootSlotProps> = useSlotProps({
+      elementType: Root,
+      externalSlotProps: slotProps.root,
+      externalForwardedProps: other,
+      additionalProps: { ref: forwardedRef },
       ownerState,
     });
 
-  const LastButton = slots.lastButton ?? 'button';
-  const lastButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
-    useSlotProps({
-      elementType: LastButton,
-      externalSlotProps: slotProps.lastButton,
-      additionalProps: {
-        onClick: handleLastPageButtonClick,
-        disabled: page >= Math.ceil(count / rowsPerPage) - 1,
-        'aria-label': getItemAriaLabel('last', page),
-        title: getItemAriaLabel('last', page),
-      },
-      ownerState,
-    });
-
-  const NextButton = slots.nextButton ?? 'button';
-  const nextButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
-    useSlotProps({
-      elementType: NextButton,
-      externalSlotProps: slotProps.nextButton,
-      additionalProps: {
-        onClick: handleNextButtonClick,
-        disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
-        'aria-label': getItemAriaLabel('next', page),
-        title: getItemAriaLabel('next', page),
-      },
-      ownerState,
-    });
-
-  const BackButton = slots.backButton ?? 'button';
-  const backButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
-    useSlotProps({
-      elementType: BackButton,
-      externalSlotProps: slotProps.backButton,
-      additionalProps: {
-        onClick: handleBackButtonClick,
-        disabled: page === 0,
-        'aria-label': getItemAriaLabel('previous', page),
-        title: getItemAriaLabel('previous', page),
-      },
-      ownerState,
-    });
-
-  const LastPageIcon = slots.lastPageIcon ?? LastPageIconDefault;
-  const FirstPageIcon = slots.firstPageIcon ?? FirstPageIconDefault;
-  const NextPageIcon = slots.nextPageIcon ?? NextPageIconDefault;
-  const BackPageIcon = slots.backPageIcon ?? BackPageIconDefault;
-
-  return (
-    <Root {...rootProps}>
-      {showFirstButton && (
-        <FirstButton {...firstButtonProps}>
-          {direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
-        </FirstButton>
-      )}
-      <BackButton {...backButtonProps}>
-        {direction === 'rtl' ? <NextPageIcon /> : <BackPageIcon />}
-      </BackButton>
-      <NextButton {...nextButtonProps}>
-        {direction === 'rtl' ? <BackPageIcon /> : <NextPageIcon />}
-      </NextButton>
-      {showLastButton && (
-        <LastButton {...lastButtonProps}>
-          {direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
-        </LastButton>
-      )}
-    </Root>
-  );
-}) as PolymorphicComponent<TablePaginationActionsTypeMap>;
+    const FirstButton = slots.firstButton ?? 'button';
+    const firstButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
+      useSlotProps({
+        elementType: FirstButton,
+        externalSlotProps: slotProps.firstButton,
+        additionalProps: {
+          onClick: handleFirstPageButtonClick,
+          disabled: page === 0,
+          'aria-label': getItemAriaLabel('first', page),
+          title: getItemAriaLabel('first', page),
+        },
+        ownerState,
+      });
+
+    const LastButton = slots.lastButton ?? 'button';
+    const lastButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
+      useSlotProps({
+        elementType: LastButton,
+        externalSlotProps: slotProps.lastButton,
+        additionalProps: {
+          onClick: handleLastPageButtonClick,
+          disabled: page >= Math.ceil(count / rowsPerPage) - 1,
+          'aria-label': getItemAriaLabel('last', page),
+          title: getItemAriaLabel('last', page),
+        },
+        ownerState,
+      });
+
+    const NextButton = slots.nextButton ?? 'button';
+    const nextButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
+      useSlotProps({
+        elementType: NextButton,
+        externalSlotProps: slotProps.nextButton,
+        additionalProps: {
+          onClick: handleNextButtonClick,
+          disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
+          'aria-label': getItemAriaLabel('next', page),
+          title: getItemAriaLabel('next', page),
+        },
+        ownerState,
+      });
+
+    const BackButton = slots.backButton ?? 'button';
+    const backButtonProps: WithOptionalOwnerState<TablePaginationActionsButtonSlotProps> =
+      useSlotProps({
+        elementType: BackButton,
+        externalSlotProps: slotProps.backButton,
+        additionalProps: {
+          onClick: handleBackButtonClick,
+          disabled: page === 0,
+          'aria-label': getItemAriaLabel('previous', page),
+          title: getItemAriaLabel('previous', page),
+        },
+        ownerState,
+      });
+
+    const LastPageIcon = slots.lastPageIcon ?? LastPageIconDefault;
+    const FirstPageIcon = slots.firstPageIcon ?? FirstPageIconDefault;
+    const NextPageIcon = slots.nextPageIcon ?? NextPageIconDefault;
+    const BackPageIcon = slots.backPageIcon ?? BackPageIconDefault;
+
+    return (
+      <Root {...rootProps}>
+        {showFirstButton && (
+          <FirstButton {...firstButtonProps}>
+            {direction === 'rtl' ? <LastPageIcon /> : <FirstPageIcon />}
+          </FirstButton>
+        )}
+        <BackButton {...backButtonProps}>
+          {direction === 'rtl' ? <NextPageIcon /> : <BackPageIcon />}
+        </BackButton>
+        <NextButton {...nextButtonProps}>
+          {direction === 'rtl' ? <BackPageIcon /> : <NextPageIcon />}
+        </NextButton>
+        {showLastButton && (
+          <LastButton {...lastButtonProps}>
+            {direction === 'rtl' ? <FirstPageIcon /> : <LastPageIcon />}
+          </LastButton>
+        )}
+      </Root>
+    );
+  },
+) as PolymorphicComponent<TablePaginationActionsTypeMap>;
 
 export { TablePaginationActions };
diff --git a/packages/mui-material/src/Popper/BasePopper.tsx b/packages/mui-material/src/Popper/BasePopper.tsx
@@ -77,7 +77,7 @@ const useUtilityClasses = (ownerState: any) => {
 
 const defaultPopperOptions = {};
 
-const PopperTooltip = React.forwardRef(function PopperTooltip<
+const PopperTooltip = React.forwardRef<HTMLDivElement, PopperTooltipProps>(function PopperTooltip<
   RootComponentType extends React.ElementType,
 >(props: PopperTooltipProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
   const {
@@ -239,10 +239,9 @@ const PopperTooltip = React.forwardRef(function PopperTooltip<
 /**
  * @ignore - internal component.
  */
-const Popper = React.forwardRef(function Popper<RootComponentType extends React.ElementType>(
-  props: PopperProps<RootComponentType>,
-  forwardedRef: React.ForwardedRef<HTMLDivElement>,
-) {
+const Popper = React.forwardRef<HTMLDivElement, PopperProps>(function Popper<
+  RootComponentType extends React.ElementType,
+>(props: PopperProps<RootComponentType>, forwardedRef: React.ForwardedRef<HTMLDivElement>) {
   const {
     anchorEl,
     children,