@mui/material 7.3.7 → 7.3.9

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 {

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;
@@ -362,7 +362,7 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
    * @returns props that should be spread on the li element
    */
   getOptionProps: (renderedOption: UseAutocompleteRenderedOption<Value>) => React.HTMLAttributes<HTMLLIElement> & {
-    key: any;
+    key: React.Key;
   };
   /**
    * Id for the Autocomplete.

package/useAutocomplete/useAutocomplete.js

@@ -494,10 +494,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    if (filteredOptionsChanged || popupOpen) {
+    if (filteredOptionsChanged || popupOpen && !disableCloseOnSelect) {
       syncHighlightedIndex();
     }
-  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen]);
+  }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
   const handleOpen = event => {
     if (open) {
       return;
@@ -1051,6 +1051,7 @@ function useAutocomplete(props) {
       role: 'listbox',
       id: `${id}-listbox`,
       'aria-labelledby': `${id}-label`,
+      'aria-multiselectable': multiple || undefined,
       ref: handleListboxRef,
       onMouseDown: event => {
         // Prevent blur

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;
 };

package/utils/useSlot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { ClassValue } from 'clsx';
 export type WithCommonProps<T> = T & {
-  className?: string;
-  style?: React.CSSProperties;
-  ref?: React.Ref<any>;
+  className?: string | undefined;
+  style?: React.CSSProperties | undefined;
+  ref?: React.Ref<any> | undefined;
 };
 type EventHandlers = Record<string, React.EventHandler<any>>;
 type ExtractComponentProps<P> = P extends infer T | ((ownerState: any) => infer T) ? T : never;
@@ -22,12 +22,12 @@ type ExtractComponentProps<P> = P extends infer T | ((ownerState: any) => infer
  * - might contain `as` prop.
  */
 export default function useSlot<T extends string, ElementType extends React.ElementType, SlotProps, OwnerState extends {}, ExternalSlotProps extends {
-  component?: React.ElementType;
-  ref?: React.Ref<any>;
+  component?: React.ElementType | undefined;
+  ref?: React.Ref<any> | undefined;
 }, ExternalForwardedProps extends {
-  component?: React.ElementType;
-  slots?: { [k in T]?: React.ElementType };
-  slotProps?: { [k in T]?: ExternalSlotProps | ((ownerState: OwnerState) => ExternalSlotProps) };
+  component?: React.ElementType | undefined;
+  slots?: { [k in T]?: React.ElementType } | undefined;
+  slotProps?: { [k in T]?: ExternalSlotProps | ((ownerState: OwnerState) => ExternalSlotProps) } | undefined;
 }, AdditionalProps, SlotOwnerState extends {}>(
 /**
  * The slot's name. All Material UI components should have `root` slot.
@@ -38,7 +38,7 @@ export default function useSlot<T extends string, ElementType extends React.Elem
 name: T, parameters: (T extends 'root' ? {
   ref: React.ForwardedRef<any>;
 } : {
-  ref?: React.ForwardedRef<any>;
+  ref?: React.ForwardedRef<any> | undefined;
 }) & {
   /**
    * The slot's className
@@ -59,8 +59,8 @@ name: T, parameters: (T extends 'root' ? {
    * If the slot is not `root`, the rest of the `externalForwardedProps` are neglected.
    */
   externalForwardedProps: ExternalForwardedProps;
-  getSlotProps?: (other: EventHandlers) => WithCommonProps<SlotProps>;
-  additionalProps?: WithCommonProps<AdditionalProps>;
+  getSlotProps?: ((other: EventHandlers) => WithCommonProps<SlotProps>) | undefined;
+  additionalProps?: WithCommonProps<AdditionalProps> | undefined;
   /**
    * props forward to `T` only if the `slotProps.*.component` is not provided.
    * e.g. Autocomplete's listbox uses Popper + StyledComponent
@@ -73,7 +73,7 @@ name: T, parameters: (T extends 'root' ? {
    * This flag is used to forward the `component` and `slotProps.root.component` to the Paper component.
    * Otherwise, the `component` prop will be converted to `as` prop which replaces the Paper component (the paper styles are gone).
    */
-  shouldForwardComponentProp?: boolean;
+  shouldForwardComponentProp?: boolean | undefined;
 }): [ElementType, {
   className: string;
   ownerState: OwnerState & SlotOwnerState;

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "7.3.7";
+const version = exports.version = "7.3.9";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("7");
+const patch = exports.patch = Number("9");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;