[code-infra] Enable undefined addition to optional properties

docs/src/sw.js

@@ -1,4 +1,4 @@
-/* eslint-env serviceworker */
+/* global self */
 // https://github.com/airbnb/javascript/issues/1632
 
 // See https://developer.chrome.com/docs/workbox/remove-buggy-service-workers/

eslint.config.mjs

@@ -220,7 +220,21 @@ export default defineConfig(
     },
   },
   {
-    files: [`packages/*/src/*/*${EXTENSION_TS}`],
+    files: [`packages/*/src/**/*${EXTENSION_TS}`, `packages/*/src/**/*${EXTENSION_DTS}`],
+    ignores: [
+      '**/*.spec.*',
+      '**/*.test.*',
+      // deprecated library
+      '**/mui-joy/**/*',
+      // used internally, not used on app router yet
+      '**/mui-docs/**/*',
+    ],
+    rules: {
+      'mui/add-undef-to-optional': 'error',
+    },
+  },
+  {
+    files: [`packages/*/src/**/*${EXTENSION_TS}`],
     ignores: [
       '**/*.spec.*',
       '**/*.test.*',

packages-internal/scripts/typescript-to-proptypes/src/getPropTypesFromFile.ts

@@ -412,21 +412,58 @@ function checkSymbol({
   // but not
   // { a?: React.ElementType, b: React.ReactElement }
   // get around this by not using the TypeChecker
-  if (
-    declaration &&
-    ts.isPropertySignature(declaration) &&
-    declaration.type &&
-    ts.isTypeReferenceNode(declaration.type)
-  ) {
-    const name = declaration.type.typeName.getText();
-    if (
-      name === 'React.ElementType' ||
-      name === 'React.ComponentType' ||
-      name === 'React.JSXElementConstructor' ||
-      name === 'React.ReactElement'
-    ) {
+  if (declaration && ts.isPropertySignature(declaration) && declaration.type) {
+    // Helper to check if a type node is a React element type reference
+    const getElementTypeName = (typeNode: ts.TypeNode): string | null => {
+      if (ts.isTypeReferenceNode(typeNode)) {
+        const name = typeNode.typeName.getText();
+        if (
+          name === 'React.ElementType' ||
+          name === 'React.ComponentType' ||
+          name === 'React.JSXElementConstructor' ||
+          name === 'React.ReactElement'
+        ) {
+          return name;
+        }
+      }
+      return null;
+    };
+
+    // Check for direct type reference (e.g., `prop: React.ElementType`)
+    let elementTypeName = getElementTypeName(declaration.type);
+
+    // Also check for union types like `React.ElementType | undefined`
+    // but NOT for unions with other types like `string | React.ReactElement | undefined`
+    if (!elementTypeName && ts.isUnionTypeNode(declaration.type)) {
+      let foundElementType: string | null = null;
+      let hasOtherNonUndefinedTypes = false;
+
+      for (const typeNode of declaration.type.types) {
+        const name = getElementTypeName(typeNode);
+        if (name) {
+          foundElementType = name;
+        } else if (
+          // Check if this is an undefined type (keyword or literal)
+          !(
+            typeNode.kind === ts.SyntaxKind.UndefinedKeyword ||
+            (ts.isLiteralTypeNode(typeNode) &&
+              typeNode.literal.kind === ts.SyntaxKind.UndefinedKeyword)
+          )
+        ) {
+          // Found a type that's neither an element type nor undefined
+          hasOtherNonUndefinedTypes = true;
+        }
+      }
+
+      // Only use the element type if the union doesn't have other non-undefined types
+      if (foundElementType && !hasOtherNonUndefinedTypes) {
+        elementTypeName = foundElementType;
+      }
+    }
+
+    if (elementTypeName) {
       const elementNode = createElementType({
-        elementType: name === 'React.ReactElement' ? 'element' : 'elementType',
+        elementType: elementTypeName === 'React.ReactElement' ? 'element' : 'elementType',
         jsDoc,
       });
 

packages/mui-lab/src/Masonry/Masonry.d.ts

@@ -11,38 +11,38 @@ export interface MasonryOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<MasonryClasses>;
+  classes?: Partial<MasonryClasses> | undefined;
   /**
    * Number of columns.
    * @default 4
    */
-  columns?: ResponsiveStyleValue<number | string>;
+  columns?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * The default number of columns of the component. This is provided for server-side rendering.
    */
-  defaultColumns?: number;
+  defaultColumns?: number | undefined;
   /**
    * The default height of the component in px. This is provided for server-side rendering.
    */
-  defaultHeight?: number;
+  defaultHeight?: number | undefined;
   /**
    * The default spacing of the component. Like `spacing`, it is a factor of the theme's spacing. This is provided for server-side rendering.
    */
-  defaultSpacing?: number;
+  defaultSpacing?: number | undefined;
   /**
    * Defines the space between children. It is a factor of the theme's spacing.
    * @default 1
    */
-  spacing?: ResponsiveStyleValue<number | string>;
+  spacing?: ResponsiveStyleValue<number | string> | undefined;
   /**
    * Allows using sequential order rather than adding to shortest column
    * @default false
    */
-  sequential?: boolean;
+  sequential?: boolean | undefined;
   /**
    * Allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 export interface MasonryTypeMap<

packages/mui-lab/src/TabPanel/TabPanel.d.ts

@@ -12,11 +12,11 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TabPanelClasses>;
+  classes?: Partial<TabPanelClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The `value` of the corresponding `Tab`. Must use the index of the `Tab` when
    * no `value` was passed to `Tab`.
@@ -26,7 +26,7 @@ export interface TabPanelProps extends StandardProps<React.HTMLAttributes<HTMLDi
    * Always keep the children in the DOM.
    * @default false
    */
-  keepMounted?: boolean;
+  keepMounted?: boolean | undefined;
 }
 
 /**

packages/mui-lab/src/Timeline/Timeline.types.ts

@@ -8,21 +8,21 @@ export interface TimelineProps extends StandardProps<React.ComponentProps<'ul'>>
    * The position where the TimelineContent should appear relative to the time axis.
    * @default 'right'
    */
-  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse' | undefined;
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineClasses>;
+  classes?: Partial<TimelineClasses> | undefined;
   /**
    * className applied to the root element.
    */
-  className?: string;
+  className?: string | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }

packages/mui-lab/src/TimelineConnector/TimelineConnector.d.ts

@@ -14,11 +14,11 @@ export interface TimelineConnectorProps extends StandardProps<
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineConnectorClasses>;
+  classes?: Partial<TimelineConnectorClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**

packages/mui-lab/src/TimelineContent/TimelineContent.d.ts

@@ -13,11 +13,11 @@ export interface TimelineContentProps extends StandardProps<TypographyProps> {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineContentClasses>;
+  classes?: Partial<TimelineContentClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**

packages/mui-lab/src/TimelineDot/TimelineDot.d.ts

@@ -17,24 +17,28 @@ export interface TimelineDotProps extends StandardProps<React.HTMLAttributes<HTM
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineDotClasses>;
+  classes?: Partial<TimelineDotClasses> | undefined;
   /**
    * The dot can have a different colors.
    * @default 'grey'
    */
-  color?: OverridableStringUnion<
-    'inherit' | 'grey' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
-    TimelineDotPropsColorOverrides
-  >;
+  color?:
+    | OverridableStringUnion<
+        'inherit' | 'grey' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning',
+        TimelineDotPropsColorOverrides
+      >
+    | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The dot can appear filled or outlined.
    * @default 'filled'
    */
-  variant?: OverridableStringUnion<'filled' | 'outlined', TimelineDotPropsVariantOverrides>;
+  variant?:
+    | OverridableStringUnion<'filled' | 'outlined', TimelineDotPropsVariantOverrides>
+    | undefined;
 }
 
 /**

packages/mui-lab/src/TimelineItem/TimelineItem.d.ts

@@ -8,19 +8,19 @@ export interface TimelineItemProps extends StandardProps<React.HTMLAttributes<HT
   /**
    * The position where the timeline's item should appear.
    */
-  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse';
+  position?: 'left' | 'right' | 'alternate' | 'alternate-reverse' | undefined;
   /**
    * The content of the component.
    */
   children?: React.ReactNode;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineItemClasses>;
+  classes?: Partial<TimelineItemClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**

packages/mui-lab/src/TimelineOppositeContent/TimelineOppositeContent.d.ts

@@ -13,11 +13,11 @@ export interface TimelineOppositeContentProps extends StandardProps<TypographyPr
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineOppositeContentClasses>;
+  classes?: Partial<TimelineOppositeContentClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**

packages/mui-lab/src/TimelineSeparator/TimelineSeparator.d.ts

@@ -14,11 +14,11 @@ export interface TimelineSeparatorProps extends StandardProps<
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TimelineSeparatorClasses>;
+  classes?: Partial<TimelineSeparatorClasses> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 
 /**