[core] Improve support for extended props in theme

docs/pages/api-docs/autocomplete.json

@@ -69,7 +69,10 @@
     "renderTags": { "type": { "name": "func" } },
     "selectOnFocus": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "sx": { "type": { "name": "object" } },

docs/pages/api-docs/slider.json

@@ -5,7 +5,10 @@
     "aria-valuetext": { "type": { "name": "custom", "description": "string" } },
     "classes": { "type": { "name": "object" } },
     "color": {
-      "type": { "name": "enum", "description": "'primary'<br>&#124;&nbsp;'secondary'" },
+      "type": {
+        "name": "union",
+        "description": "'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;string"
+      },
       "default": "'primary'"
     },
     "component": { "type": { "name": "elementType" } },

docs/pages/api-docs/table.json

@@ -11,7 +11,10 @@
       "default": "'default'"
     },
     "size": {
-      "type": { "name": "enum", "description": "'medium'<br>&#124;&nbsp;'small'" },
+      "type": {
+        "name": "union",
+        "description": "'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
+      },
       "default": "'medium'"
     },
     "stickyHeader": { "type": { "name": "bool" } },

docs/pages/api-docs/toggle-button-group.json

@@ -18,8 +18,8 @@
     },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

docs/pages/api-docs/toggle-button.json

@@ -17,8 +17,8 @@
     "selected": { "type": { "name": "bool" } },
     "size": {
       "type": {
-        "name": "enum",
-        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'"
+        "name": "union",
+        "description": "'large'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'small'<br>&#124;&nbsp;string"
       },
       "default": "'medium'"
     },

packages/material-ui/src/Autocomplete/Autocomplete.d.ts

@@ -3,6 +3,7 @@ import { InternalStandardProps as StandardProps, Theme } from '@material-ui/core
 import { ChipProps, ChipTypeMap } from '@material-ui/core/Chip';
 import { PopperProps } from '@material-ui/core/Popper';
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import useAutocomplete, {
   AutocompleteChangeDetails,
   AutocompleteChangeReason,
@@ -59,6 +60,8 @@ export interface AutocompleteRenderInputParams {
   inputProps: ReturnType<ReturnType<typeof useAutocomplete>['getInputProps']>;
 }
 
+export interface AutocompletePropsSizeOverrides {}
+
 export interface AutocompleteProps<
   T,
   Multiple extends boolean | undefined,
@@ -266,7 +269,7 @@ export interface AutocompleteProps<
    * The size of the component.
    * @default 'medium'
    */
-  size?: 'small' | 'medium';
+  size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui/src/Autocomplete/Autocomplete.js

@@ -1046,7 +1046,10 @@ Autocomplete.propTypes /* remove-proptypes */ = {
    * The size of the component.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['medium', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui/src/Slider/Slider.d.ts

@@ -5,9 +5,12 @@ import {
   SliderUnstyledTypeMap,
 } from '@material-ui/unstyled/SliderUnstyled';
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import { Theme } from '../styles';
 import { OverrideProps } from '../OverridableComponent';
 
+export interface SliderPropsColorOverrides {}
+
 export type SliderTypeMap<
   D extends React.ElementType = 'span',
   P = {}
@@ -17,7 +20,7 @@ export type SliderTypeMap<
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'primary'
      */
-    color?: 'primary' | 'secondary';
+    color?: OverridableStringUnion<'primary' | 'secondary', SliderPropsColorOverrides>;
     /**
      * Override or extend the styles applied to the component.
      */

packages/material-ui/src/Slider/Slider.js

@@ -476,7 +476,10 @@ Slider.propTypes /* remove-proptypes */ = {
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'primary'
    */
-  color: PropTypes.oneOf(['primary', 'secondary']),
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['primary', 'secondary']),
+    PropTypes.string,
+  ]),
   /**
    * The components used for each slot inside the Slider.
    * Either a string to use a HTML element or a component.

packages/material-ui/src/Table/Table.d.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import { Theme } from '..';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 
 export type Padding = 'default' | 'checkbox' | 'none';
 
 export type Size = 'small' | 'medium';
 
+export interface TablePropsSizeOverrides {}
+
 export interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> {
   props: P & {
     /**
@@ -31,7 +34,7 @@ export interface TableTypeMap<P = {}, D extends React.ElementType = 'table'> {
      * Allows TableCells to inherit size of the Table.
      * @default 'medium'
      */
-    size?: Size;
+    size?: OverridableStringUnion<Size, TablePropsSizeOverrides>;
     /**
      * Set the header sticky.
      *

packages/material-ui/src/Table/Table.js

@@ -126,7 +126,10 @@ Table.propTypes /* remove-proptypes */ = {
    * Allows TableCells to inherit size of the Table.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['medium', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * Set the header sticky.
    *

packages/material-ui/src/ToggleButton/ToggleButton.d.ts

@@ -1,8 +1,11 @@
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 
+export interface ToggleButtonPropsSizeOverrides {}
+
 export type ToggleButtonTypeMap<
   P = {},
   D extends React.ElementType = 'button'
@@ -66,7 +69,7 @@ export type ToggleButtonTypeMap<
      * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
      * @default 'medium'
      */
-    size?: 'small' | 'medium' | 'large';
+    size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

packages/material-ui/src/ToggleButton/ToggleButton.js

@@ -261,7 +261,10 @@ ToggleButton.propTypes /* remove-proptypes */ = {
    * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['large', 'medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -1,8 +1,11 @@
 import * as React from 'react';
 import { SxProps } from '@material-ui/system';
+import { OverridableStringUnion } from '@material-ui/types';
 import { InternalStandardProps as StandardProps } from '..';
 import { Theme } from '../styles';
 
+export interface ToggleButtonGroupPropsSizeOverrides {}
+
 export interface ToggleButtonGroupProps
   extends StandardProps<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'> {
   /**
@@ -57,7 +60,7 @@ export interface ToggleButtonGroupProps
    * The size of the component.
    * @default 'medium'
    */
-  size?: 'small' | 'medium' | 'large';
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/material-ui/src/ToggleButtonGroup/ToggleButtonGroup.js

@@ -227,7 +227,10 @@ ToggleButtonGroup.propTypes /* remove-proptypes */ = {
    * The size of the component.
    * @default 'medium'
    */
-  size: PropTypes.oneOf(['large', 'medium', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['large', 'medium', 'small']),
+    PropTypes.string,
+  ]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */