@mui/material 5.14.4 → 5.14.6

package/Modal/Modal.js

@@ -6,14 +6,30 @@ const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className",
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { Modal as ModalUnstyled, modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
-import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
+import { useSlotProps } from '@mui/base';
+import { unstable_useModal as useModal } from '@mui/base/unstable_useModal';
+import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
+import FocusTrap from '../Unstable_TrapFocus';
+import Portal from '../Portal';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import Backdrop from '../Backdrop';
+import { getModalUtilityClass } from './modalClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-export const modalClasses = modalUnstyledClasses;
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const useUtilityClasses = ownerState => {
+  const {
+    open,
+    exited,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['root', !open && exited && 'hidden'],
+    backdrop: ['backdrop']
+  };
+  return composeClasses(slots, getModalUtilityClass, classes);
+};
 const ModalRoot = styled('div', {
   name: 'MuiModal',
   slot: 'Root',
@@ -68,7 +84,6 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
   const {
       BackdropComponent = ModalBackdrop,
       BackdropProps,
-      classes,
       className,
       closeAfterTransition = false,
       children,
@@ -85,17 +100,13 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       hideBackdrop = false,
       keepMounted = false,
       onBackdropClick,
-      onClose,
       open,
       slotProps,
-      slots,
+      slots
       // eslint-disable-next-line react/prop-types
-      theme
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
-  const [exited, setExited] = React.useState(true);
-  const commonProps = {
-    container,
+  const propsWithDefaults = _extends({}, props, {
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -104,40 +115,90 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted,
-    onBackdropClick,
-    onClose,
-    open
-  };
-  const ownerState = _extends({}, props, commonProps, {
+    keepMounted
+  });
+  const {
+    getRootProps,
+    getBackdropProps,
+    getTransitionProps,
+    portalRef,
+    isTopModal,
+    exited,
+    hasTransition
+  } = useModal(_extends({}, propsWithDefaults, {
+    rootRef: ref
+  }));
+  const ownerState = _extends({}, propsWithDefaults, {
     exited
   });
+  const classes = useUtilityClasses(ownerState);
+  const childProps = {};
+  if (children.props.tabIndex === undefined) {
+    childProps.tabIndex = '-1';
+  }
+
+  // It's a Transition like component
+  if (hasTransition) {
+    const {
+      onEnter,
+      onExited
+    } = getTransitionProps();
+    childProps.onEnter = onEnter;
+    childProps.onExited = onExited;
+  }
   const RootSlot = (_ref = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components.Root) != null ? _ref : ModalRoot;
   const BackdropSlot = (_ref2 = (_slots$backdrop = slots == null ? void 0 : slots.backdrop) != null ? _slots$backdrop : components.Backdrop) != null ? _ref2 : BackdropComponent;
   const rootSlotProps = (_slotProps$root = slotProps == null ? void 0 : slotProps.root) != null ? _slotProps$root : componentsProps.root;
   const backdropSlotProps = (_slotProps$backdrop = slotProps == null ? void 0 : slotProps.backdrop) != null ? _slotProps$backdrop : componentsProps.backdrop;
-  return /*#__PURE__*/_jsx(ModalUnstyled, _extends({
-    slots: {
-      root: RootSlot,
-      backdrop: BackdropSlot
+  const rootProps = useSlotProps({
+    elementType: RootSlot,
+    externalSlotProps: rootSlotProps,
+    externalForwardedProps: other,
+    getSlotProps: getRootProps,
+    additionalProps: {
+      ref,
+      as: component
     },
-    slotProps: {
-      root: () => _extends({}, resolveComponentProps(rootSlotProps, ownerState), !isHostComponent(RootSlot) && {
-        as: component,
-        theme
-      }, {
-        className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
-      }),
-      backdrop: () => _extends({}, BackdropProps, resolveComponentProps(backdropSlotProps, ownerState), {
-        className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop)
-      })
+    ownerState,
+    className: clsx(className, rootSlotProps == null ? void 0 : rootSlotProps.className, classes == null ? void 0 : classes.root, !ownerState.open && ownerState.exited && (classes == null ? void 0 : classes.hidden))
+  });
+  const backdropProps = useSlotProps({
+    elementType: BackdropSlot,
+    externalSlotProps: backdropSlotProps,
+    additionalProps: BackdropProps,
+    getSlotProps: otherHandlers => {
+      return getBackdropProps(_extends({}, otherHandlers, {
+        onClick: e => {
+          if (onBackdropClick) {
+            onBackdropClick(e);
+          }
+          if (otherHandlers != null && otherHandlers.onClick) {
+            otherHandlers.onClick(e);
+          }
+        }
+      }));
     },
-    onTransitionEnter: () => setExited(false),
-    onTransitionExited: () => setExited(true),
-    ref: ref
-  }, other, commonProps, {
-    children: children
-  }));
+    className: clsx(backdropSlotProps == null ? void 0 : backdropSlotProps.className, BackdropProps == null ? void 0 : BackdropProps.className, classes == null ? void 0 : classes.backdrop),
+    ownerState
+  });
+  if (!keepMounted && !open && (!hasTransition || exited)) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(Portal, {
+    ref: portalRef,
+    container: container,
+    disablePortal: disablePortal,
+    children: /*#__PURE__*/_jsxs(RootSlot, _extends({}, rootProps, {
+      children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/_jsx(BackdropSlot, _extends({}, backdropProps)) : null, /*#__PURE__*/_jsx(FocusTrap, {
+        disableEnforceFocus: disableEnforceFocus,
+        disableAutoFocus: disableAutoFocus,
+        disableRestoreFocus: disableRestoreFocus,
+        isEnabled: isTopModal,
+        open: open,
+        children: /*#__PURE__*/React.cloneElement(children, childProps)
+      })]
+    }))
+  });
 });
 process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/Modal/index.d.ts

@@ -1,4 +1,7 @@
-export { ModalManager } from '@mui/base/Modal'; // exporting ModalManager
+export { ModalManager } from '@mui/base/unstable_useModal'; // exporting ModalManager
 
 export { default } from './Modal';
 export * from './Modal';
+
+export { default as modalClasses } from './modalClasses';
+export * from './modalClasses';

package/Modal/index.js

@@ -1,5 +1,6 @@
 'use client';
 
-export { ModalManager } from '@mui/base/Modal';
+export { ModalManager } from '@mui/base/unstable_useModal';
 export { default } from './Modal';
-export * from './Modal';
+export { default as modalClasses } from './modalClasses';
+export * from './modalClasses';

package/Modal/modalClasses.d.ts

@@ -0,0 +1,12 @@
+export interface ModalClasses {
+    /** Class name applied to the root element. */
+    root: string;
+    /** Class name applied to the root element if the `Modal` has exited. */
+    hidden: string;
+    /** Class name applied to the backdrop element. */
+    backdrop: string;
+}
+export type ModalClassKey = keyof ModalClasses;
+export declare function getModalUtilityClass(slot: string): string;
+declare const modalClasses: ModalClasses;
+export default modalClasses;

package/Modal/modalClasses.js

@@ -0,0 +1,7 @@
+import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
+import generateUtilityClass from '../generateUtilityClass';
+export function getModalUtilityClass(slot) {
+  return generateUtilityClass('MuiModal', slot);
+}
+const modalClasses = generateUtilityClasses('MuiModal', ['root', 'hidden', 'backdrop']);
+export default modalClasses;

package/NativeSelect/nativeSelectClasses.d.ts

@@ -1,34 +1,34 @@
-export interface NativeSelectClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the select component `select` class. */
-    select: string;
-    /** Styles applied to the select component if `multiple={true}`. */
-    multiple: string;
-    /** Styles applied to the select component if `variant="filled"`. */
-    filled: string;
-    /** Styles applied to the select component if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the select component if `variant="standard"`. */
-    standard: string;
-    /** State class applied to the select component `disabled` class. */
-    disabled: string;
-    /** Styles applied to the icon component. */
-    icon: string;
-    /** Styles applied to the icon component if the popup is open. */
-    iconOpen: string;
-    /** Styles applied to the icon component if `variant="filled"`. */
-    iconFilled: string;
-    /** Styles applied to the icon component if `variant="outlined"`. */
-    iconOutlined: string;
-    /** Styles applied to the icon component if `variant="standard"`. */
-    iconStandard: string;
-    /** Styles applied to the underlying native input component. */
-    nativeInput: string;
-    /** State class applied to the select component `error` class. */
-    error: string;
-}
-export type NativeSelectClassKey = keyof NativeSelectClasses;
-export declare function getNativeSelectUtilityClasses(slot: string): string;
-declare const nativeSelectClasses: NativeSelectClasses;
-export default nativeSelectClasses;
+export interface NativeSelectClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the select component `select` class. */
+    select: string;
+    /** Styles applied to the select component if `multiple={true}`. */
+    multiple: string;
+    /** Styles applied to the select component if `variant="filled"`. */
+    filled: string;
+    /** Styles applied to the select component if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the select component if `variant="standard"`. */
+    standard: string;
+    /** State class applied to the select component `disabled` class. */
+    disabled: string;
+    /** Styles applied to the icon component. */
+    icon: string;
+    /** Styles applied to the icon component if the popup is open. */
+    iconOpen: string;
+    /** Styles applied to the icon component if `variant="filled"`. */
+    iconFilled: string;
+    /** Styles applied to the icon component if `variant="outlined"`. */
+    iconOutlined: string;
+    /** Styles applied to the icon component if `variant="standard"`. */
+    iconStandard: string;
+    /** Styles applied to the underlying native input component. */
+    nativeInput: string;
+    /** State class applied to the select component `error` class. */
+    error: string;
+}
+export type NativeSelectClassKey = keyof NativeSelectClasses;
+export declare function getNativeSelectUtilityClasses(slot: string): string;
+declare const nativeSelectClasses: NativeSelectClasses;
+export default nativeSelectClasses;

package/OutlinedInput/outlinedInputClasses.d.ts

@@ -1,38 +1,38 @@
-export interface OutlinedInputClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if the color is secondary. */
-    colorSecondary: string;
-    /** Styles applied to the root element if the component is focused. */
-    focused: string;
-    /** Styles applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** Styles applied to the root element if `startAdornment` is provided. */
-    adornedStart: string;
-    /** Styles applied to the root element if `endAdornment` is provided. */
-    adornedEnd: string;
-    /** State class applied to the root element if `error={true}`. */
-    error: string;
-    /** Styles applied to the input element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `multiline={true}`. */
-    multiline: string;
-    /** Styles applied to the NotchedOutline element. */
-    notchedOutline: string;
-    /** Styles applied to the input element. */
-    input: string;
-    /** Styles applied to the input element if `size="small"`. */
-    inputSizeSmall: string;
-    /** Styles applied to the input element if `multiline={true}`. */
-    inputMultiline: string;
-    /** Styles applied to the input element if `startAdornment` is provided. */
-    inputAdornedStart: string;
-    /** Styles applied to the input element if `endAdornment` is provided. */
-    inputAdornedEnd: string;
-    /** Styles applied to the input element if `type="search"`. */
-    inputTypeSearch: string;
-}
-export type OutlinedInputClassKey = keyof OutlinedInputClasses;
-export declare function getOutlinedInputUtilityClass(slot: string): string;
-declare const outlinedInputClasses: OutlinedInputClasses;
-export default outlinedInputClasses;
+export interface OutlinedInputClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if the color is secondary. */
+    colorSecondary: string;
+    /** Styles applied to the root element if the component is focused. */
+    focused: string;
+    /** Styles applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** Styles applied to the root element if `startAdornment` is provided. */
+    adornedStart: string;
+    /** Styles applied to the root element if `endAdornment` is provided. */
+    adornedEnd: string;
+    /** State class applied to the root element if `error={true}`. */
+    error: string;
+    /** Styles applied to the input element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `multiline={true}`. */
+    multiline: string;
+    /** Styles applied to the NotchedOutline element. */
+    notchedOutline: string;
+    /** Styles applied to the input element. */
+    input: string;
+    /** Styles applied to the input element if `size="small"`. */
+    inputSizeSmall: string;
+    /** Styles applied to the input element if `multiline={true}`. */
+    inputMultiline: string;
+    /** Styles applied to the input element if `startAdornment` is provided. */
+    inputAdornedStart: string;
+    /** Styles applied to the input element if `endAdornment` is provided. */
+    inputAdornedEnd: string;
+    /** Styles applied to the input element if `type="search"`. */
+    inputTypeSearch: string;
+}
+export type OutlinedInputClassKey = keyof OutlinedInputClasses;
+export declare function getOutlinedInputUtilityClass(slot: string): string;
+declare const outlinedInputClasses: OutlinedInputClasses;
+export default outlinedInputClasses;

package/Pagination/paginationClasses.d.ts

@@ -1,14 +1,14 @@
-export interface PaginationClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the ul element. */
-    ul: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-}
-export type PaginationClassKey = keyof PaginationClasses;
-export declare function getPaginationUtilityClass(slot: string): string;
-declare const paginationClasses: PaginationClasses;
-export default paginationClasses;
+export interface PaginationClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the ul element. */
+    ul: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+}
+export type PaginationClassKey = keyof PaginationClasses;
+export declare function getPaginationUtilityClass(slot: string): string;
+declare const paginationClasses: PaginationClasses;
+export default paginationClasses;

package/PaginationItem/paginationItemClasses.d.ts

@@ -1,42 +1,42 @@
-export interface PaginationItemClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element if `type="page"`. */
-    page: string;
-    /** Styles applied to the root element if `size="small"`. */
-    sizeSmall: string;
-    /** Styles applied to the root element if `size="large"`. */
-    sizeLarge: string;
-    /** Styles applied to the root element if `variant="text"`. */
-    text: string;
-    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
-    textPrimary: string;
-    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
-    textSecondary: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
-    outlinedPrimary: string;
-    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
-    outlinedSecondary: string;
-    /** Styles applied to the root element if `rounded="true"`. */
-    rounded: string;
-    /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
-    ellipsis: string;
-    /** Styles applied to the root element if `type="first"` or type="last". */
-    firstLast: string;
-    /** Styles applied to the root element if `type="previous"` or type="next". */
-    previousNext: string;
-    /** State class applied to the root element if keyboard focused. */
-    focusVisible: string;
-    /** State class applied to the root element if `disabled={true}`. */
-    disabled: string;
-    /** State class applied to the root element if `selected={true}`. */
-    selected: string;
-    /** Styles applied to the icon to display. */
-    icon: string;
-}
-export type PaginationItemClassKey = keyof PaginationItemClasses;
-export declare function getPaginationItemUtilityClass(slot: string): string;
-declare const paginationItemClasses: PaginationItemClasses;
-export default paginationItemClasses;
+export interface PaginationItemClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element if `type="page"`. */
+    page: string;
+    /** Styles applied to the root element if `size="small"`. */
+    sizeSmall: string;
+    /** Styles applied to the root element if `size="large"`. */
+    sizeLarge: string;
+    /** Styles applied to the root element if `variant="text"`. */
+    text: string;
+    /** Styles applied to the root element if `variant="text"` and `color="primary"`. */
+    textPrimary: string;
+    /** Styles applied to the root element if `variant="text"` and `color="secondary"`. */
+    textSecondary: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="primary"`. */
+    outlinedPrimary: string;
+    /** Styles applied to the root element if `variant="outlined"` and `color="secondary"`. */
+    outlinedSecondary: string;
+    /** Styles applied to the root element if `rounded="true"`. */
+    rounded: string;
+    /** Styles applied to the root element if `type="start-ellipsis"` or `type="end-ellipsis"`. */
+    ellipsis: string;
+    /** Styles applied to the root element if `type="first"` or type="last". */
+    firstLast: string;
+    /** Styles applied to the root element if `type="previous"` or type="next". */
+    previousNext: string;
+    /** State class applied to the root element if keyboard focused. */
+    focusVisible: string;
+    /** State class applied to the root element if `disabled={true}`. */
+    disabled: string;
+    /** State class applied to the root element if `selected={true}`. */
+    selected: string;
+    /** Styles applied to the icon to display. */
+    icon: string;
+}
+export type PaginationItemClassKey = keyof PaginationItemClasses;
+export declare function getPaginationItemUtilityClass(slot: string): string;
+declare const paginationItemClasses: PaginationItemClasses;
+export default paginationItemClasses;

package/Paper/paperClasses.d.ts

@@ -1,39 +1,39 @@
-export interface PaperClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the root element unless `square={true}`. */
-    rounded: string;
-    /** Styles applied to the root element if `variant="outlined"`. */
-    outlined: string;
-    /** Styles applied to the root element if `variant="elevation"`. */
-    elevation: string;
-    elevation0: string;
-    elevation1: string;
-    elevation2: string;
-    elevation3: string;
-    elevation4: string;
-    elevation5: string;
-    elevation6: string;
-    elevation7: string;
-    elevation8: string;
-    elevation9: string;
-    elevation10: string;
-    elevation11: string;
-    elevation12: string;
-    elevation13: string;
-    elevation14: string;
-    elevation15: string;
-    elevation16: string;
-    elevation17: string;
-    elevation18: string;
-    elevation19: string;
-    elevation20: string;
-    elevation21: string;
-    elevation22: string;
-    elevation23: string;
-    elevation24: string;
-}
-export type PaperClassKey = keyof PaperClasses;
-export declare function getPaperUtilityClass(slot: string): string;
-declare const paperClasses: PaperClasses;
-export default paperClasses;
+export interface PaperClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the root element unless `square={true}`. */
+    rounded: string;
+    /** Styles applied to the root element if `variant="outlined"`. */
+    outlined: string;
+    /** Styles applied to the root element if `variant="elevation"`. */
+    elevation: string;
+    elevation0: string;
+    elevation1: string;
+    elevation2: string;
+    elevation3: string;
+    elevation4: string;
+    elevation5: string;
+    elevation6: string;
+    elevation7: string;
+    elevation8: string;
+    elevation9: string;
+    elevation10: string;
+    elevation11: string;
+    elevation12: string;
+    elevation13: string;
+    elevation14: string;
+    elevation15: string;
+    elevation16: string;
+    elevation17: string;
+    elevation18: string;
+    elevation19: string;
+    elevation20: string;
+    elevation21: string;
+    elevation22: string;
+    elevation23: string;
+    elevation24: string;
+}
+export type PaperClassKey = keyof PaperClasses;
+export declare function getPaperUtilityClass(slot: string): string;
+declare const paperClasses: PaperClasses;
+export default paperClasses;

package/Popover/popoverClasses.d.ts

@@ -1,10 +1,10 @@
-export interface PopoverClasses {
-    /** Styles applied to the root element. */
-    root: string;
-    /** Styles applied to the Paper component. */
-    paper: string;
-}
-export type PopoverClassKey = keyof PopoverClasses;
-export declare function getPopoverUtilityClass(slot: string): string;
-declare const popoverClasses: PopoverClasses;
-export default popoverClasses;
+export interface PopoverClasses {
+    /** Styles applied to the root element. */
+    root: string;
+    /** Styles applied to the Paper component. */
+    paper: string;
+}
+export type PopoverClassKey = keyof PopoverClasses;
+export declare function getPopoverUtilityClass(slot: string): string;
+declare const popoverClasses: PopoverClasses;
+export default popoverClasses;