@mui/material 7.3.7 → 7.3.9

package/esm/TableSortLabel/TableSortLabel.d.ts

@@ -12,12 +12,12 @@ export interface TableSortLabelSlots {
    * The component that renders the root slot.
    * @default span
    */
-  root?: React.ElementType;
+  root?: React.ElementType | undefined;
   /**
    * The component that renders the icon slot.
    * @default ArrowDownwardIcon
    */
-  icon?: React.ElementType;
+  icon?: React.ElementType | undefined;
 }
 export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<TableSortLabelSlots, {
   /**
@@ -35,7 +35,7 @@ export interface TableSortLabelOwnProps {
    * If `true`, the label will have the active styling (should be true for the sorted column).
    * @default false
    */
-  active?: boolean;
+  active?: boolean | undefined;
   /**
    * Label contents, the arrow will be appended automatically.
    */
@@ -43,28 +43,28 @@ export interface TableSortLabelOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TableSortLabelClasses>;
+  classes?: Partial<TableSortLabelClasses> | undefined;
   /**
    * The current sort direction.
    * @default 'asc'
    */
-  direction?: 'asc' | 'desc';
+  direction?: 'asc' | 'desc' | undefined;
   /**
    * Hide sort icon when active is false.
    * @default false
    */
-  hideSortIcon?: boolean;
+  hideSortIcon?: boolean | undefined;
   /**
    * Sort icon to use.
    * @default ArrowDownwardIcon
    */
   IconComponent?: React.JSXElementConstructor<{
     className: string;
-  }>;
+  }> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export type TableSortLabelTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'span'> = ExtendButtonBaseTypeMap<{
   props: AdditionalProps & TableSortLabelOwnProps & TableSortLabelSlotsAndSlotProps;
@@ -85,6 +85,6 @@ export type TableSortLabelTypeMap<AdditionalProps = {}, RootComponent extends Re
  */
 declare const TableSortLabel: ExtendButtonBase<TableSortLabelTypeMap>;
 export type TableSortLabelProps<RootComponent extends React.ElementType = TableSortLabelTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TableSortLabelTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default TableSortLabel;

package/esm/Tabs/Tabs.d.ts

@@ -8,6 +8,7 @@ import { OverridableComponent, OverrideProps } from "../OverridableComponent/ind
 import { TabsClasses } from "./tabsClasses.js";
 import SvgIcon from "../SvgIcon/index.js";
 export interface TabsPropsIndicatorColorOverrides {}
+export interface TabsPropsVariantOverrides {}
 export interface TabsRootSlotPropsOverrides {}
 export interface TabsScrollerSlotPropsOverrides {}
 export interface TabsListSlotPropsOverrides {}
@@ -79,7 +80,7 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
    * By default, the available props are based on the div element.
    */
   scrollbar: SlotProps<'div', {
-    onChange?: (scrollbarWidth: undefined | number) => void;
+    onChange?: ((scrollbarWidth: undefined | number) => void) | undefined;
   } & TabsScrollbarSlotPropsOverrides, TabsOwnerState>;
   /**
    * Props forwarded to the indicator slot.
@@ -106,12 +107,12 @@ export type TabsSlotsAndSlotProps = CreateSlotsAndSlotProps<TabsSlots, {
     /**
      * @deprecated Use `slots.startScrollButtonIcon` instead.
      */
-    StartScrollButtonIcon?: React.ElementType;
+    StartScrollButtonIcon?: React.ElementType | undefined;
     /**
      * @deprecated Use `slots.endScrollButtonIcon` instead.
      */
-    EndScrollButtonIcon?: React.ElementType;
-  };
+    EndScrollButtonIcon?: React.ElementType | undefined;
+  } | undefined;
 };
 export interface TabsOwnerState extends Omit<TabsProps, 'slots' | 'slotProps'> {
   vertical: boolean;
@@ -131,27 +132,27 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * @param {object} actions This object contains all possible actions
    * that can be triggered programmatically.
    */
-  action?: React.Ref<TabsActions>;
+  action?: React.Ref<TabsActions> | undefined;
   /**
    * If `true`, the scroll buttons aren't forced hidden on mobile.
    * By default the scroll buttons are hidden on mobile and takes precedence over `scrollButtons`.
    * @default false
    */
-  allowScrollButtonsMobile?: boolean;
+  allowScrollButtonsMobile?: boolean | undefined;
   /**
    * The label for the Tabs as a string.
    */
-  'aria-label'?: string;
+  'aria-label'?: string | undefined;
   /**
    * An id or list of ids separated by a space that label the Tabs.
    */
-  'aria-labelledby'?: string;
+  'aria-labelledby'?: string | undefined;
   /**
    * If `true`, the tabs are centered.
    * This prop is intended for large views.
    * @default false
    */
-  centered?: boolean;
+  centered?: boolean | undefined;
   /**
    * The content of the component.
    */
@@ -159,30 +160,30 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TabsClasses>;
+  classes?: Partial<TabsClasses> | undefined;
   /**
    * Determines the color of the indicator.
    * @default 'primary'
    */
-  indicatorColor?: OverridableStringUnion<'secondary' | 'primary', TabsPropsIndicatorColorOverrides>;
+  indicatorColor?: OverridableStringUnion<'secondary' | 'primary', TabsPropsIndicatorColorOverrides> | undefined;
   /**
    * Callback fired when the value changes.
    *
    * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
    * @param {any} value We default to the index of the child (number)
    */
-  onChange?: (event: React.SyntheticEvent, value: any) => void;
+  onChange?: ((event: React.SyntheticEvent, value: any) => void) | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical' | undefined;
   /**
    * The component used to render the scroll buttons.
    * @deprecated use the `slots.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default TabScrollButton
    */
-  ScrollButtonComponent?: React.ElementType;
+  ScrollButtonComponent?: React.ElementType | undefined;
   /**
    * Determine behavior of scroll buttons when tabs are set to scroll:
    *
@@ -194,31 +195,31 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    * This behavior can be disabled with `allowScrollButtonsMobile`.
    * @default 'auto'
    */
-  scrollButtons?: 'auto' | true | false;
+  scrollButtons?: 'auto' | true | false | undefined;
   /**
    * If `true` the selected tab changes on focus. Otherwise it only
    * changes on activation.
    */
-  selectionFollowsFocus?: boolean;
+  selectionFollowsFocus?: boolean | undefined;
   /**
    * Props applied to the tab indicator element.
    * @deprecated use the `slotProps.indicator` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default  {}
    */
-  TabIndicatorProps?: React.HTMLAttributes<HTMLDivElement> & {
-    sx?: SxProps<Theme>;
-  };
+  TabIndicatorProps?: (React.HTMLAttributes<HTMLDivElement> & {
+    sx?: SxProps<Theme> | undefined;
+  }) | undefined;
   /**
    * Props applied to the [`TabScrollButton`](https://mui.com/material-ui/api/tab-scroll-button/) element.
    * @deprecated use the `slotProps.scrollButtons` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    * @default {}
    */
-  TabScrollButtonProps?: Partial<TabScrollButtonProps>;
+  TabScrollButtonProps?: Partial<TabScrollButtonProps> | undefined;
   /**
    * Determines the color of the `Tab`.
    * @default 'primary'
    */
-  textColor?: 'secondary' | 'primary' | 'inherit';
+  textColor?: 'secondary' | 'primary' | 'inherit' | undefined;
   /**
    * The value of the currently selected `Tab`.
    * If you don't want any selected `Tab`, you can set this prop to `false`.
@@ -234,17 +235,17 @@ export interface TabsOwnProps extends TabsSlotsAndSlotProps {
    *  - `standard` will render the default state.
    * @default 'standard'
    */
-  variant?: 'standard' | 'scrollable' | 'fullWidth';
+  variant?: OverridableStringUnion<'standard' | 'scrollable' | 'fullWidth', TabsPropsVariantOverrides> | undefined;
   /**
    * If `true`, the scrollbar is visible. It can be useful when displaying
    * a long vertical list of tabs.
    * @default false
    */
-  visibleScrollbar?: boolean;
+  visibleScrollbar?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
 }
 export interface TabsTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'div'> {
   props: AdditionalProps & TabsOwnProps;
@@ -267,6 +268,6 @@ export interface TabsActions {
   updateScrollButtons(): void;
 }
 export type TabsProps<RootComponent extends React.ElementType = TabsTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<TabsTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default Tabs;

package/esm/Tabs/Tabs.js

@@ -20,6 +20,7 @@ import tabsClasses, { getTabsUtilityClass } from "./tabsClasses.js";
 import ownerDocument from "../utils/ownerDocument.js";
 import ownerWindow from "../utils/ownerWindow.js";
 import getActiveElement from "../utils/getActiveElement.js";
+import isLayoutSupported from "../utils/isLayoutSupported.js";
 import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const nextItem = (list, item) => {
@@ -378,7 +379,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(inProps, ref) {
         }
         tabMeta = tab ? tab.getBoundingClientRect() : null;
         if (process.env.NODE_ENV !== 'production') {
-          if (process.env.NODE_ENV !== 'test' && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
+          if (isLayoutSupported() && !warnedOnceTabPresent && tabMeta && tabMeta.width === 0 && tabMeta.height === 0 &&
           // if the whole Tabs component is hidden, don't warn
           tabsMeta.clientWidth !== 0) {
             tabsMeta = null;

package/esm/TextField/TextField.d.ts

@@ -92,27 +92,27 @@ export interface BaseTextFieldProps extends StandardProps<FormControlProps,
    * The name can be confusing, as it's more like an autofill.
    * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
    */
-  autoComplete?: string;
+  autoComplete?: string | undefined;
   /**
    * If `true`, the `input` element is focused during the first mount.
    * @default false
    */
-  autoFocus?: boolean;
+  autoFocus?: boolean | undefined;
   /**
    * @ignore
    */
-  children?: FormControlProps['children'];
+  children?: FormControlProps['children'] | undefined;
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<TextFieldClasses>;
+  classes?: Partial<TextFieldClasses> | undefined;
   /**
    * The color of the component.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'primary'
    */
-  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', TextFieldPropsColorOverrides>;
+  color?: OverridableStringUnion<'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', TextFieldPropsColorOverrides> | undefined;
   /**
    * The default value. Use when the component is not controlled.
    */
@@ -121,22 +121,22 @@ export interface BaseTextFieldProps extends StandardProps<FormControlProps,
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the label is displayed in an error state.
    * @default false
    */
-  error?: boolean;
+  error?: boolean | undefined;
   /**
    * Props applied to the [`FormHelperText`](https://mui.com/material-ui/api/form-helper-text/) element.
    * @deprecated Use `slotProps.formHelperText` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  FormHelperTextProps?: Partial<FormHelperTextProps>;
+  FormHelperTextProps?: Partial<FormHelperTextProps> | undefined;
   /**
    * If `true`, the input will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * The helper text content.
    */
@@ -145,22 +145,22 @@ export interface BaseTextFieldProps extends StandardProps<FormControlProps,
    * The id of the `input` element.
    * Use this prop to make `label` and `helperText` accessible for screen readers.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * Props applied to the [`InputLabel`](https://mui.com/material-ui/api/input-label/) element.
    * Pointer events like `onClick` are enabled if and only if `shrink` is `true`.
    * @deprecated Use `slotProps.inputLabel` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  InputLabelProps?: Partial<InputLabelProps>;
+  InputLabelProps?: Partial<InputLabelProps> | undefined;
   /**
    * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
    * @deprecated Use `slotProps.htmlInput` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  inputProps?: InputBaseProps['inputProps'];
+  inputProps?: InputBaseProps['inputProps'] | undefined;
   /**
    * Pass a ref to the `input` element.
    */
-  inputRef?: React.Ref<any>;
+  inputRef?: React.Ref<any> | undefined;
   /**
    * The label content.
    */
@@ -169,58 +169,58 @@ export interface BaseTextFieldProps extends StandardProps<FormControlProps,
    * If `true`, a `textarea` element is rendered instead of an input.
    * @default false
    */
-  multiline?: boolean;
+  multiline?: boolean | undefined;
   /**
    * Name attribute of the `input` element.
    */
-  name?: string;
-  onBlur?: InputBaseProps['onBlur'];
-  onFocus?: StandardInputProps['onFocus'];
+  name?: string | undefined;
+  onBlur?: InputBaseProps['onBlur'] | undefined;
+  onFocus?: StandardInputProps['onFocus'] | undefined;
   /**
    * The short hint displayed in the `input` before the user enters a value.
    */
-  placeholder?: string;
+  placeholder?: string | undefined;
   /**
    * If `true`, the label is displayed as required and the `input` element is required.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Number of rows to display when multiline option is set to true.
    */
-  rows?: string | number;
+  rows?: string | number | undefined;
   /**
    * Maximum number of rows to display when multiline option is set to true.
    */
-  maxRows?: string | number;
+  maxRows?: string | number | undefined;
   /**
    * Minimum number of rows to display when multiline option is set to true.
    */
-  minRows?: string | number;
+  minRows?: string | number | undefined;
   /**
    * Render a [`Select`](https://mui.com/material-ui/api/select/) element while passing the Input element to `Select` as `input` parameter.
    * If this option is set you must pass the options of the select as children.
    * @default false
    */
-  select?: boolean;
+  select?: boolean | undefined;
   /**
    * Props applied to the [`Select`](https://mui.com/material-ui/api/select/) element.
    * @deprecated Use `slotProps.select` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  SelectProps?: Partial<SelectProps>;
+  SelectProps?: Partial<SelectProps> | undefined;
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium', TextFieldPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium', TextFieldPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
    */
-  type?: React.InputHTMLAttributes<unknown>['type'];
+  type?: React.InputHTMLAttributes<unknown>['type'] | undefined;
   /**
    * The value of the `input` element, required for a controlled component.
    */
@@ -233,12 +233,12 @@ export interface StandardTextFieldProps extends BaseTextFieldProps, TextFieldSlo
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (string).
    */
-  onChange?: StandardInputProps['onChange'];
+  onChange?: StandardInputProps['onChange'] | undefined;
   /**
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'standard';
+  variant?: 'standard' | undefined;
   /**
    * Props applied to the Input element.
    * It will be a [`FilledInput`](https://mui.com/material-ui/api/filled-input/),
@@ -246,7 +246,7 @@ export interface StandardTextFieldProps extends BaseTextFieldProps, TextFieldSlo
    * component depending on the `variant` prop value.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  InputProps?: Partial<StandardInputProps>;
+  InputProps?: Partial<StandardInputProps> | undefined;
 }
 export interface FilledTextFieldProps extends BaseTextFieldProps, TextFieldSlotsAndSlotProps<FilledInputProps> {
   /**
@@ -255,7 +255,7 @@ export interface FilledTextFieldProps extends BaseTextFieldProps, TextFieldSlots
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (string).
    */
-  onChange?: FilledInputProps['onChange'];
+  onChange?: FilledInputProps['onChange'] | undefined;
   /**
    * The variant to use.
    * @default 'outlined'
@@ -268,7 +268,7 @@ export interface FilledTextFieldProps extends BaseTextFieldProps, TextFieldSlots
    * component depending on the `variant` prop value.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  InputProps?: Partial<FilledInputProps>;
+  InputProps?: Partial<FilledInputProps> | undefined;
 }
 export interface OutlinedTextFieldProps extends BaseTextFieldProps, TextFieldSlotsAndSlotProps<OutlinedInputProps> {
   /**
@@ -277,7 +277,7 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps, TextFieldSlo
    * @param {object} event The event source of the callback.
    * You can pull out the new value by accessing `event.target.value` (string).
    */
-  onChange?: OutlinedInputProps['onChange'];
+  onChange?: OutlinedInputProps['onChange'] | undefined;
   /**
    * The variant to use.
    * @default 'outlined'
@@ -290,7 +290,7 @@ export interface OutlinedTextFieldProps extends BaseTextFieldProps, TextFieldSlo
    * component depending on the `variant` prop value.
    * @deprecated Use `slotProps.input` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
-  InputProps?: Partial<OutlinedInputProps>;
+  InputProps?: Partial<OutlinedInputProps> | undefined;
 }
 export type TextFieldVariants = 'outlined' | 'standard' | 'filled';
 export type TextFieldProps<Variant extends TextFieldVariants = TextFieldVariants> = Variant extends 'filled' ? FilledTextFieldProps : Variant extends 'standard' ? StandardTextFieldProps : OutlinedTextFieldProps;
@@ -343,5 +343,5 @@ export default function TextField<Variant extends TextFieldVariants>(props: {
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: Variant;
+  variant?: Variant | undefined;
 } & Omit<TextFieldProps, 'variant'>): React.JSX.Element;

package/esm/TextareaAutosize/TextareaAutosize.types.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 export interface TextareaAutosizeProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'children' | 'rows'> {
-  ref?: React.Ref<HTMLTextAreaElement>;
+  ref?: React.Ref<HTMLTextAreaElement> | undefined;
   /**
    * Maximum number of rows to display.
    */
-  maxRows?: string | number;
+  maxRows?: string | number | undefined;
   /**
    * Minimum number of rows to display.
    * @default 1
    */
-  minRows?: string | number;
+  minRows?: string | number | undefined;
 }

package/esm/ToggleButton/ToggleButton.d.ts

@@ -15,57 +15,57 @@ export interface ToggleButtonOwnProps {
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ToggleButtonClasses>;
+  classes?: Partial<ToggleButtonClasses> | undefined;
   /**
    * The color of the button when it is in an active state.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
-  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonPropsColorOverrides>;
+  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonPropsColorOverrides> | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the  keyboard focus ripple is disabled.
    * @default false
    */
-  disableFocusRipple?: boolean;
+  disableFocusRipple?: boolean | undefined;
   /**
    * If `true`, the button will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * Callback fired when the state changes.
    *
    * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
    * @param {any} value of the selected button.
    */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  onChange?: ((event: React.MouseEvent<HTMLElement>, value: any) => void) | undefined;
   /**
    * Callback fired when the button is clicked.
    *
    * @param {React.MouseEvent<HTMLElement>} event The event source of the callback.
    * @param {any} value of the selected button.
    */
-  onClick?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  onClick?: ((event: React.MouseEvent<HTMLElement>, value: any) => void) | undefined;
   /**
    * If `true`, the button is rendered in an active state.
    */
-  selected?: boolean;
+  selected?: boolean | undefined;
   /**
    * The size of the component.
    * The prop defaults to the value inherited from the parent ToggleButtonGroup component.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The value to associate with the button when selected in a
    * ToggleButtonGroup.
@@ -90,6 +90,6 @@ export type ToggleButtonTypeMap<AdditionalProps = {}, RootComponent extends Reac
  */
 declare const ToggleButton: ExtendButtonBase<ToggleButtonTypeMap>;
 export type ToggleButtonProps<RootComponent extends React.ElementType = ToggleButtonTypeMap['defaultComponent'], AdditionalProps = {}> = OverrideProps<ToggleButtonTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
-  component?: React.ElementType;
+  component?: React.ElementType | undefined;
 };
 export default ToggleButton;

package/esm/ToggleButtonGroup/ToggleButtonGroup.d.ts

@@ -14,29 +14,29 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
   /**
    * Override or extend the styles applied to the component.
    */
-  classes?: Partial<ToggleButtonGroupClasses>;
+  classes?: Partial<ToggleButtonGroupClasses> | undefined;
   /**
    * The color of the button when it is selected.
    * It supports both default and custom theme colors, which can be added as shown in the
    * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
    * @default 'standard'
    */
-  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonGroupPropsColorOverrides>;
+  color?: OverridableStringUnion<'standard' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning', ToggleButtonGroupPropsColorOverrides> | undefined;
   /**
    * If `true`, only allow one of the child ToggleButton values to be selected.
    * @default false
    */
-  exclusive?: boolean;
+  exclusive?: boolean | undefined;
   /**
    * If `true`, the component is disabled. This implies that all ToggleButton children will be disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, the button group will take up the full width of its container.
    * @default false
    */
-  fullWidth?: boolean;
+  fullWidth?: boolean | undefined;
   /**
    * Callback fired when the value changes.
    *
@@ -45,21 +45,21 @@ export interface ToggleButtonGroupProps extends StandardProps<React.HTMLAttribut
    * this is a single value; when false an array of selected values. If no value
    * is selected and `exclusive` is true the value is null; when false an empty array.
    */
-  onChange?: (event: React.MouseEvent<HTMLElement>, value: any) => void;
+  onChange?: ((event: React.MouseEvent<HTMLElement>, value: any) => void) | undefined;
   /**
    * The component orientation (layout flow direction).
    * @default 'horizontal'
    */
-  orientation?: 'horizontal' | 'vertical';
+  orientation?: 'horizontal' | 'vertical' | undefined;
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides>;
+  size?: OverridableStringUnion<'small' | 'medium' | 'large', ToggleButtonGroupPropsSizeOverrides> | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
-  sx?: SxProps<Theme>;
+  sx?: SxProps<Theme> | undefined;
   /**
    * The currently selected value within the group or an array of selected
    * values when `exclusive` is false.

package/esm/ToggleButtonGroup/ToggleButtonGroupContext.d.ts

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import type { ToggleButtonGroupProps } from "./ToggleButtonGroup.js";
 interface ToggleButtonGroupContextType {
-  className?: string;
-  onChange?: ToggleButtonGroupProps['onChange'];
-  value?: ToggleButtonGroupProps['value'];
-  size?: ToggleButtonGroupProps['size'];
-  fullWidth?: ToggleButtonGroupProps['fullWidth'];
-  color?: ToggleButtonGroupProps['color'];
-  disabled?: ToggleButtonGroupProps['disabled'];
+  className?: string | undefined;
+  onChange?: ToggleButtonGroupProps['onChange'] | undefined;
+  value?: ToggleButtonGroupProps['value'] | undefined;
+  size?: ToggleButtonGroupProps['size'] | undefined;
+  fullWidth?: ToggleButtonGroupProps['fullWidth'] | undefined;
+  color?: ToggleButtonGroupProps['color'] | undefined;
+  disabled?: ToggleButtonGroupProps['disabled'] | undefined;
 }
 /**
  * @ignore - internal component.