@mui/material 7.3.8 → 7.3.10

package/styles/useThemeProps.d.ts

@@ -1,7 +1,7 @@
 import { Theme } from "./createTheme.js";
 import { Components } from "./components.js";
 export interface ThemeWithProps {
-  components?: Components<Omit<Theme, 'components'>>;
+  components?: Components<Omit<Theme, 'components'>> | undefined;
 }
 export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
   components: Record<Name, {

package/transitions/transition.d.ts

@@ -4,8 +4,8 @@ export type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'on
 export type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
 export interface EasingProps {
   easing: string | {
-    enter?: string;
-    exit?: string;
+    enter?: string | undefined;
+    exit?: string | undefined;
   };
 }
 export type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;

package/transitions/utils.d.ts

@@ -2,13 +2,13 @@ import * as React from 'react';
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
-    enter?: string;
-    exit?: string;
+    enter?: string | undefined;
+    exit?: string | undefined;
   } | undefined;
   style: React.CSSProperties | undefined;
   timeout: number | {
-    enter?: number;
-    exit?: number;
+    enter?: number | undefined;
+    exit?: number | undefined;
   };
 }
 interface Options {
@@ -19,5 +19,12 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
+type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
 export {};

package/transitions/utils.js

@@ -3,10 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
+function normalizedTransitionCallback(nodeRef, callback) {
+  return maybeIsAppearing => {
+    if (callback) {
+      const node = nodeRef.current;
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 function getTransitionProps(props, options) {
   const {
     timeout,

package/types/OverridableComponentAugmentation.d.ts

@@ -20,12 +20,12 @@ declare module '@mui/material/OverridableComponent' {
    * Props of the component if `component={Component}` is used.
    */
   type OverridePropsVer2<TypeMap extends OverridableTypeMap, RootComponent extends React.ElementType> = (BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithoutRef<RootComponent>, keyof BaseProps<TypeMap>> & {
-    ref?: React.Ref<Element>;
+    ref?: (React.Ref<Element>) | undefined;
   });
   /**
    * Props if `component={Component}` is NOT used.
    */
   type DefaultComponentPropsVer2<TypeMap extends OverridableTypeMap> = BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithoutRef<TypeMap['defaultComponent']>, keyof BaseProps<TypeMap>> & {
-    ref?: React.Ref<Element>;
+    ref?: (React.Ref<Element>) | undefined;
   };
 }

package/useAutocomplete/useAutocomplete.d.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { PartiallyRequired } from '@mui/types';
 export interface CreateFilterOptionsConfig<Value> {
-  ignoreAccents?: boolean;
-  ignoreCase?: boolean;
-  limit?: number;
-  matchFrom?: 'any' | 'start';
-  stringify?: (option: Value) => string;
-  trim?: boolean;
+  ignoreAccents?: boolean | undefined;
+  ignoreCase?: boolean | undefined;
+  limit?: number | undefined;
+  matchFrom?: 'any' | 'start' | undefined;
+  stringify?: ((option: Value) => string) | undefined;
+  trim?: boolean | undefined;
 }
 export interface FilterOptionsState<Value> {
   inputValue: string;
@@ -26,25 +26,25 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @internal The prefix of the state class name, temporary for Joy UI
    * @default 'Mui'
    */
-  unstable_classNamePrefix?: string;
+  unstable_classNamePrefix?: string | undefined;
   /**
    * @internal
    * Temporary for Joy UI because the parent listbox is the document object
    * TODO v6: Normalize the logic and remove this param.
    */
-  unstable_isActiveElementInListbox?: (listbox: React.RefObject<HTMLElement | null>) => boolean;
+  unstable_isActiveElementInListbox?: ((listbox: React.RefObject<HTMLElement | null>) => boolean) | undefined;
   /**
    * If `true`, the portion of the selected suggestion that the user hasn't typed,
    * known as the completion string, appears inline after the input cursor in the textbox.
    * The inline completion string is visually highlighted and has a selected state.
    * @default false
    */
-  autoComplete?: boolean;
+  autoComplete?: boolean | undefined;
   /**
    * If `true`, the first option is automatically highlighted.
    * @default false
    */
-  autoHighlight?: boolean;
+  autoHighlight?: boolean | undefined;
   /**
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
@@ -54,7 +54,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * if the Autocomplete loses focus without highlighting an option.
    * @default false
    */
-  autoSelect?: boolean;
+  autoSelect?: boolean | undefined;
   /**
    * Control if the input should be blurred when an option is selected:
    *
@@ -64,7 +64,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * - `mouse` the input is blurred after a mouse event.
    * @default false
    */
-  blurOnSelect?: 'touch' | 'mouse' | true | false;
+  blurOnSelect?: 'touch' | 'mouse' | true | false | undefined;
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
@@ -72,46 +72,46 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * Set it to `false` if you want to help the user resume their search.
    * @default !props.freeSolo
    */
-  clearOnBlur?: boolean;
+  clearOnBlur?: boolean | undefined;
   /**
    * If `true`, clear all values when the user presses escape and the popup is closed.
    * @default false
    */
-  clearOnEscape?: boolean;
+  clearOnEscape?: boolean | undefined;
   /**
    * The component name that is using this hook. Used for warnings.
    */
-  componentName?: string;
+  componentName?: string | undefined;
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
    */
-  defaultValue?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>;
+  defaultValue?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo> | undefined;
   /**
    * If `true`, the input can't be cleared.
    * @default false
    */
-  disableClearable?: DisableClearable;
+  disableClearable?: DisableClearable | undefined;
   /**
    * If `true`, the popup won't close when a value is selected.
    * @default false
    */
-  disableCloseOnSelect?: boolean;
+  disableCloseOnSelect?: boolean | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
-  disabledItemsFocusable?: boolean;
+  disabledItemsFocusable?: boolean | undefined;
   /**
    * If `true`, the list box in the popup will not wrap focus.
    * @default false
    */
-  disableListWrap?: boolean;
+  disableListWrap?: boolean | undefined;
   /**
    * A function that determines the filtered options to be rendered on search.
    *
@@ -120,17 +120,17 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {object} state The state of the component.
    * @returns {Value[]}
    */
-  filterOptions?: (options: Value[], state: FilterOptionsState<Value>) => Value[];
+  filterOptions?: ((options: Value[], state: FilterOptionsState<Value>) => Value[]) | undefined;
   /**
    * If `true`, hide the selected options from the list box.
    * @default false
    */
-  filterSelectedOptions?: boolean;
+  filterSelectedOptions?: boolean | undefined;
   /**
    * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
    * @default false
    */
-  freeSolo?: FreeSolo;
+  freeSolo?: FreeSolo | undefined;
   /**
    * Used to determine the disabled state for a given option.
    *
@@ -138,7 +138,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @template Value The option shape. Will be the same shape as an item of the options.
    * @returns {boolean}
    */
-  getOptionDisabled?: (option: Value) => boolean;
+  getOptionDisabled?: ((option: Value) => boolean) | undefined;
   /**
    * Used to determine the key for a given option.
    * This can be useful when the labels of options are not unique (since labels are used as keys by default).
@@ -146,7 +146,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {Value} option The option to get the key for.
    * @returns {string | number}
    */
-  getOptionKey?: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string | number;
+  getOptionKey?: ((option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string | number) | undefined;
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
@@ -157,7 +157,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @returns {string}
    * @default (option) => option.label ?? option
    */
-  getOptionLabel?: (option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string;
+  getOptionLabel?: ((option: Value | AutocompleteFreeSoloValueMapping<FreeSolo>) => string) | undefined;
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
@@ -165,28 +165,28 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {Value} option The Autocomplete option.
    * @returns {string}
    */
-  groupBy?: (option: Value) => string;
+  groupBy?: ((option: Value) => string) | undefined;
 
   /**
    * If `true`, the component handles the "Home" and "End" keys when the popup is open.
    * It should move focus to the first option and last option, respectively.
    * @default !props.freeSolo
    */
-  handleHomeEndKeys?: boolean;
+  handleHomeEndKeys?: boolean | undefined;
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide an id it will fall back to a randomly generated one.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * If `true`, the highlight can move to the input.
    * @default false
    */
-  includeInputInList?: boolean;
+  includeInputInList?: boolean | undefined;
   /**
    * The input value.
    */
-  inputValue?: string;
+  inputValue?: string | undefined;
   /**
    * Used to determine if the option represents the given value.
    * Uses strict equality by default.
@@ -196,12 +196,12 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {Value} value The value to test against.
    * @returns {boolean}
    */
-  isOptionEqualToValue?: (option: Value, value: Value) => boolean;
+  isOptionEqualToValue?: ((option: Value, value: Value) => boolean) | undefined;
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
-  multiple?: Multiple;
+  multiple?: Multiple | undefined;
   /**
    * Callback fired when the value changes.
    *
@@ -210,7 +210,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {string} reason One of "createOption", "selectOption", "removeOption", "blur" or "clear".
    * @param {string} [details]
    */
-  onChange?: (event: React.SyntheticEvent, value: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<Value>) => void;
+  onChange?: ((event: React.SyntheticEvent, value: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>, reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<Value>) => void) | undefined;
   /**
    * Callback fired when the popup requests to be closed.
    * Use in controlled mode (see open).
@@ -218,7 +218,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {React.SyntheticEvent} event The event source of the callback.
    * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
    */
-  onClose?: (event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void;
+  onClose?: ((event: React.SyntheticEvent, reason: AutocompleteCloseReason) => void) | undefined;
   /**
    * Callback fired when the highlight option changes.
    *
@@ -226,7 +226,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {Value} option The highlighted option.
    * @param {string} reason Can be: `"keyboard"`, `"mouse"`, `"touch"`.
    */
-  onHighlightChange?: (event: React.SyntheticEvent, option: Value | null, reason: AutocompleteHighlightChangeReason) => void;
+  onHighlightChange?: ((event: React.SyntheticEvent, option: Value | null, reason: AutocompleteHighlightChangeReason) => void) | undefined;
   /**
    * Callback fired when the input value changes.
    *
@@ -234,23 +234,23 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @param {string} value The new value of the text input.
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`, `"blur"`, `"selectOption"`, `"removeOption"`
    */
-  onInputChange?: (event: React.SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => void;
+  onInputChange?: ((event: React.SyntheticEvent, value: string, reason: AutocompleteInputChangeReason) => void) | undefined;
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).
    *
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
-  onOpen?: (event: React.SyntheticEvent) => void;
+  onOpen?: ((event: React.SyntheticEvent) => void) | undefined;
   /**
    * If `true`, the component is shown.
    */
-  open?: boolean;
+  open?: boolean | undefined;
   /**
    * If `true`, the popup will open on input focus.
    * @default false
    */
-  openOnFocus?: boolean;
+  openOnFocus?: boolean | undefined;
   /**
    * A list of options that will be shown in the Autocomplete.
    */
@@ -259,20 +259,20 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
    * @default !props.freeSolo
    */
-  selectOnFocus?: boolean;
+  selectOnFocus?: boolean | undefined;
   /**
    * The value of the autocomplete.
    *
    * The value must have reference equality with the option in order to be selected.
    * You can customize the equality behavior with the `isOptionEqualToValue` prop.
    */
-  value?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo>;
+  value?: AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo> | undefined;
 }
 export interface UseAutocompleteParameters<Value, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined> extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo> {}
 export type AutocompleteHighlightChangeReason = 'keyboard' | 'mouse' | 'touch';
@@ -290,7 +290,7 @@ export type AutocompleteGetItemProps<Multiple extends boolean | undefined> = Mul
   tabIndex: -1;
   onDelete: (event: any) => void;
 } : (args?: {
-  index?: number;
+  index?: number | undefined;
 }) => {
   'data-item-index': number;
   tabIndex: -1;

package/useAutocomplete/useAutocomplete.js

@@ -64,6 +64,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -102,7 +103,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -134,6 +135,7 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
@@ -179,8 +181,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -498,6 +522,21 @@ function useAutocomplete(props) {
       syncHighlightedIndex();
     }
   }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
+
+  // Listen for browser window blur to detect when the user switches tabs or windows.
+  // This helps prevent the popup from reopening automatically when the window regains focus.
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleWindowBlur = () => {
+      windowLostFocus.current = true;
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, []);
   const handleOpen = event => {
     if (open) {
       return;
@@ -833,6 +872,14 @@ function useAutocomplete(props) {
       // Ensure DOM focus lands on the input
       focusItem(-1);
     }
+
+    // If the window previously lost focus while the popup was open,
+    // ignore this focus event to prevent unintended reopening.
+    // Reset the flag so normal focus behavior resumes.
+    if (windowLostFocus.current) {
+      windowLostFocus.current = false;
+      return;
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -923,6 +970,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
@@ -934,6 +985,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     inputRef.current.focus();
     if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
       inputRef.current.select();
@@ -1062,7 +1117,7 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),

package/usePagination/usePagination.d.ts

@@ -4,62 +4,62 @@ export interface UsePaginationProps {
    * Number of always visible pages at the beginning and end.
    * @default 1
    */
-  boundaryCount?: number;
+  boundaryCount?: number | undefined;
   /**
    * The name of the component where this hook is used.
    */
-  componentName?: string;
+  componentName?: string | undefined;
   /**
    * The total number of pages.
    * @default 1
    */
-  count?: number;
+  count?: number | undefined;
   /**
    * The page selected by default when the component is uncontrolled.
    * @default 1
    */
-  defaultPage?: number;
+  defaultPage?: number | undefined;
   /**
    * If `true`, the component is disabled.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * If `true`, hide the next-page button.
    * @default false
    */
-  hideNextButton?: boolean;
+  hideNextButton?: boolean | undefined;
   /**
    * If `true`, hide the previous-page button.
    * @default false
    */
-  hidePrevButton?: boolean;
+  hidePrevButton?: boolean | undefined;
   /**
    * Callback fired when the page is changed.
    *
    * @param {React.ChangeEvent<unknown>} event The event source of the callback.
    * @param {number} page The page selected.
    */
-  onChange?: (event: React.ChangeEvent<unknown>, page: number) => void;
+  onChange?: ((event: React.ChangeEvent<unknown>, page: number) => void) | undefined;
   /**
    * The current page. Unlike `TablePagination`, which starts numbering from `0`, this pagination starts from `1`.
    */
-  page?: number;
+  page?: number | undefined;
   /**
    * If `true`, show the first-page button.
    * @default false
    */
-  showFirstButton?: boolean;
+  showFirstButton?: boolean | undefined;
   /**
    * If `true`, show the last-page button.
    * @default false
    */
-  showLastButton?: boolean;
+  showLastButton?: boolean | undefined;
   /**
    * Number of always visible pages before and after the current page.
    * @default 1
    */
-  siblingCount?: number;
+  siblingCount?: number | undefined;
 }
 export interface UsePaginationItem {
   onClick: React.ReactEventHandler;

package/useScrollTrigger/useScrollTrigger.d.ts

@@ -1,6 +1,6 @@
 export interface UseScrollTriggerOptions {
-  disableHysteresis?: boolean;
-  target?: Node | Window | null;
-  threshold?: number;
+  disableHysteresis?: boolean | undefined;
+  target?: Node | Window | null | undefined;
+  threshold?: number | undefined;
 }
 export default function useScrollTrigger(options?: UseScrollTriggerOptions): boolean;

package/utils/isLayoutSupported.d.ts

@@ -0,0 +1 @@
+export default function isLayoutSupported(): boolean;

package/utils/isLayoutSupported.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isLayoutSupported;
+function isLayoutSupported() {
+  return !(/jsdom|HappyDOM/.test(window.navigator.userAgent) ||
+  // TODO(v9): Remove the test environment check
+  // eslint-disable-next-line mui/consistent-production-guard
+  process.env.NODE_ENV === 'test');
+}

package/utils/types.d.ts

@@ -3,8 +3,8 @@ import { SlotComponentProps } from '@mui/utils/types';
 import { Theme } from "../styles/index.js";
 export type { EventHandlers, WithOptionalOwnerState, SlotComponentProps, SlotComponentPropsWithSlotState } from '@mui/utils/types';
 export type SlotCommonProps = {
-  component?: React.ElementType;
-  sx?: SxProps<Theme>;
+  component?: React.ElementType | undefined;
+  sx?: SxProps<Theme> | undefined;
 };
 export type SlotProps<TSlotComponent extends React.ElementType, TOverrides, TOwnerState> = SlotComponentProps<TSlotComponent, SlotCommonProps & TOverrides, TOwnerState>;
 /**
@@ -17,10 +17,10 @@ export type CreateSlotsAndSlotProps<Slots, K extends Record<keyof Slots, any>> =
    * The components used for each slot inside.
    * @default {}
    */
-  slots?: Partial<Slots>;
+  slots?: Partial<Slots> | undefined;
   /**
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps?: { [P in keyof K]?: K[P] };
+  slotProps?: { [P in keyof K]?: K[P] } | undefined;
 };