Make ref optional in @mui/base

packages/mui-base/src/Badge/Badge.types.ts

@@ -83,7 +83,7 @@ export type BadgeRootSlotProps = {
   children?: React.ReactNode;
   className?: string;
   ownerState: BadgeOwnerState;
-  ref: React.Ref<HTMLSpanElement>;
+  ref?: React.Ref<HTMLSpanElement>;
 };
 
 export type BadgeBadgeSlotProps = {

packages/mui-base/src/Input/Input.types.ts

@@ -190,7 +190,7 @@ export type InputInputSlotProps = Simplify<
     ownerState: InputOwnerState;
     placeholder: string | undefined;
     readOnly: boolean | undefined;
-    ref: React.Ref<HTMLInputElement>;
+    ref?: React.Ref<HTMLInputElement>;
     type: React.HTMLInputTypeAttribute | undefined;
   }
 >;

packages/mui-base/src/MenuItem/MenuItem.types.ts

@@ -77,7 +77,7 @@ export type MenuItemRootSlotProps = Simplify<
   UseMenuItemRootSlotProps & {
     children?: React.ReactNode;
     className: string;
-    ref: React.Ref<HTMLElement>;
+    ref?: React.Ref<HTMLElement>;
     ownerState: MenuItemOwnerState;
   }
 >;

packages/mui-base/src/Option/Option.types.ts

@@ -82,7 +82,7 @@ export type OptionRootSlotProps<OptionValue> = Simplify<
   UseOptionRootSlotProps & {
     children?: React.ReactNode;
     className: string;
-    ref: React.Ref<HTMLElement>;
+    ref?: React.Ref<HTMLElement>;
     ownerState: OptionOwnerState<OptionValue>;
   }
 >;

packages/mui-base/src/OptionGroup/OptionGroup.types.ts

@@ -70,7 +70,7 @@ export type OptionGroupRootSlotProps = {
   children?: React.ReactNode;
   className?: string;
   ownerState: OptionGroupOwnerState;
-  ref: React.Ref<HTMLLIElement>;
+  ref?: React.Ref<HTMLLIElement>;
 };
 
 export type OptionGroupLabelSlotProps = {

packages/mui-base/src/Snackbar/Snackbar.types.ts

@@ -59,7 +59,7 @@ export type SnackbarRootSlotProps = {
   ownerState: SnackbarOwnerState;
   className?: string;
   children?: React.ReactNode;
-  ref: React.Ref<any>;
+  ref?: React.Ref<any>;
 };
 
 export interface SnackbarClickAwayListenerSlotProps extends ClickAwayListenerProps {

packages/mui-base/src/Tab/Tab.types.ts

@@ -62,7 +62,7 @@ export type TabOwnerState = Simplify<
 export type TabRootSlotProps = Simplify<
   UseTabRootSlotProps & {
     className?: string;
-    ref: React.Ref<any>;
+    ref?: React.Ref<any>;
     ownerState: TabOwnerState;
   }
 >;

packages/mui-base/src/useButton/useButton.types.ts

@@ -41,7 +41,7 @@ export interface UseButtonRootSlotOwnProps {
   onKeyUp: MuiCancellableEventHandler<React.KeyboardEvent>;
   onMouseDown: React.MouseEventHandler;
   onMouseLeave: React.MouseEventHandler;
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
 }
 
 export type UseButtonRootSlotProps<ExternalProps = {}> = ExternalProps & UseButtonRootSlotOwnProps;

packages/mui-base/src/useList/useList.types.ts

@@ -243,7 +243,7 @@ interface UseListRootSlotOwnProps {
   onBlur: MuiCancellableEventHandler<React.FocusEvent<HTMLElement>>;
   onKeyDown: MuiCancellableEventHandler<React.KeyboardEvent<HTMLElement>>;
   tabIndex: number;
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
 }
 
 export type UseListRootSlotProps<ExternalProps = {}> = ExternalProps & UseListRootSlotOwnProps;

packages/mui-base/src/useMenu/useMenu.types.ts

@@ -89,7 +89,7 @@ interface UseMenuListboxSlotEventHandlers {
 export type UseMenuListboxSlotProps<ExternalProps = {}> = UseListRootSlotProps<
   Omit<ExternalProps, keyof UseMenuListboxSlotEventHandlers> & UseMenuListboxSlotEventHandlers
 > & {
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
   role: React.AriaRole;
 };
 

packages/mui-base/src/useMenuItem/useMenuItem.types.ts

@@ -4,7 +4,7 @@ import { MuiCancellableEventHandler } from '../utils/MuiCancellableEvent';
 interface UseMenuItemRootSlotOwnProps {
   id: string | undefined;
   role: 'menuitem';
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
 }
 
 export interface MenuItemMetadata {

packages/mui-base/src/useSelect/useSelect.types.ts

@@ -143,7 +143,7 @@ export type UseSelectButtonSlotProps<TOther = {}> = UseButtonRootSlotProps<
     'aria-expanded': React.AriaAttributes['aria-expanded'];
     'aria-controls': React.AriaAttributes['aria-controls'];
     role: React.HTMLAttributes<Element>['role'];
-    ref: React.RefCallback<Element> | null;
+    ref?: React.RefCallback<Element> | null;
   };
 
 interface UseSelectHiddenInputSlotEventHandlers {

packages/mui-base/src/useSlider/useSlider.types.ts

@@ -114,7 +114,7 @@ export interface Mark {
 
 export type UseSliderRootSlotOwnProps = {
   onMouseDown: React.MouseEventHandler;
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
 };
 
 export type UseSliderRootSlotProps<ExternalProps = {}> = Omit<

packages/mui-base/src/useSwitch/useSwitch.types.ts

@@ -42,7 +42,7 @@ interface UseSwitchInputSlotOwnProps {
   onChange: React.ChangeEventHandler<HTMLInputElement>;
   onFocus: React.FocusEventHandler;
   readOnly?: boolean;
-  ref: React.RefCallback<HTMLInputElement> | null;
+  ref?: React.RefCallback<HTMLInputElement> | null;
   required?: boolean;
   type: React.HTMLInputTypeAttribute;
 }

packages/mui-base/src/useTab/useTab.types.ts

@@ -35,7 +35,7 @@ export type UseTabRootSlotProps<ExternalProps = {}> = UseButtonRootSlotProps<Ext
   'aria-controls': React.AriaAttributes['aria-controls'];
   'aria-selected': React.AriaAttributes['aria-selected'];
   id: string | undefined;
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
   role: React.AriaRole;
 };
 

packages/mui-base/src/useTabsList/useTabsList.types.ts

@@ -14,7 +14,7 @@ export type UseTabsListRootSlotProps<ExternalProps = {}> = ExternalProps & {
   'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
   'aria-orientation'?: React.AriaAttributes['aria-orientation'];
   role: React.AriaRole;
-  ref: React.RefCallback<Element> | null;
+  ref?: React.RefCallback<Element> | null;
   onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
 };
 

packages/mui-lab/src/Timeline/Timeline.tsx

@@ -62,7 +62,6 @@ const Timeline = React.forwardRef<HTMLUListElement, TimelineProps>(function Time
       <TimelineRoot
         className={clsx(classes.root, className)}
         ownerState={ownerState}
-        // @ts-expect-error TypeScript bug, need to keep unknown for DX
         ref={ref}
         {...other}
       />

packages/mui-utils/src/elementAcceptingRef/elementAcceptingRef.test.tsx

@@ -84,7 +84,7 @@ describe('elementAcceptingRef', () => {
     it('accepts lazy', async () => {
       const Component = React.lazy(() =>
         Promise.resolve({
-          default: React.forwardRef((props, ref) => <div {...props} ref={ref} />),
+          default: React.forwardRef<HTMLDivElement>((props, ref) => <div {...props} ref={ref} />),
         }),
       );
 

packages/mui-utils/src/elementTypeAcceptingRef/elementTypeAcceptingRef.test.tsx

@@ -81,7 +81,7 @@ describe('elementTypeAcceptingRef', () => {
     it('accepts lazy', async () => {
       const Component = React.lazy(() =>
         Promise.resolve({
-          default: React.forwardRef((props, ref) => <div ref={ref} {...props} />),
+          default: React.forwardRef<HTMLDivElement>((props, ref) => <div ref={ref} {...props} />),
         }),
       );