@mui/material 5.12.0 → 5.12.2

package/Autocomplete/Autocomplete.js

@@ -138,7 +138,7 @@ const AutocompleteRoot = styled('div', {
       paddingRight: 52 + 4 + 9
     },
     [`& .${autocompleteClasses.input}`]: {
-      padding: '7.5px 4px 7.5px 6px'
+      padding: '7.5px 4px 7.5px 5px'
     },
     [`& .${autocompleteClasses.endAdornment}`]: {
       right: 9
@@ -151,7 +151,7 @@ const AutocompleteRoot = styled('div', {
     paddingBottom: 6,
     paddingLeft: 6,
     [`& .${autocompleteClasses.input}`]: {
-      padding: '2.5px 4px 2.5px 6px'
+      padding: '2.5px 4px 2.5px 8px'
     }
   },
   [`& .${filledInputClasses.root}`]: {

package/Badge/Badge.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { BadgeUnstyledTypeMap, ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
+import { BadgeTypeMap as BaseBadgeTypeMap, ExtendBadgeTypeMap } from '@mui/base/Badge';
 import { Theme } from '../styles';
 import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { BadgeClasses } from './badgeClasses';
@@ -15,10 +15,7 @@ export interface BadgeOrigin {
   horizontal: 'left' | 'right';
 }
 
-export type BadgeTypeMap<
-  D extends React.ElementType = 'span',
-  P = {},
-> = ExtendBadgeUnstyledTypeMap<{
+export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendBadgeTypeMap<{
   props: P & {
     /**
      * The anchor of the badge.
@@ -55,7 +52,7 @@ export type BadgeTypeMap<
      *
      * @default {}
      */
-    componentsProps?: BadgeUnstyledTypeMap['props']['slotProps'];
+    componentsProps?: BaseBadgeTypeMap['props']['slotProps'];
     /**
      * The components used for each slot inside.
      *

package/Button/Button.js

@@ -61,6 +61,8 @@ const ButtonRoot = styled(ButtonBase, {
   ownerState
 }) => {
   var _theme$palette$getCon, _theme$palette;
+  const inheritContainedBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey[300] : theme.palette.grey[800];
+  const inheritContainedHoverBackgroundColor = theme.palette.mode === 'light' ? theme.palette.grey.A100 : theme.palette.grey[700];
   return _extends({}, theme.typography.button, {
     minWidth: 64,
     padding: '6px 16px',
@@ -89,7 +91,7 @@ const ButtonRoot = styled(ButtonBase, {
         backgroundColor: 'transparent'
       }
     }, ownerState.variant === 'contained' && {
-      backgroundColor: (theme.vars || theme).palette.grey.A100,
+      backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedHoverBg : inheritContainedHoverBackgroundColor,
       boxShadow: (theme.vars || theme).shadows[4],
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
@@ -132,7 +134,7 @@ const ButtonRoot = styled(ButtonBase, {
     color: theme.vars ?
     // this is safe because grey does not change between default light/dark mode
     theme.vars.palette.text.primary : (_theme$palette$getCon = (_theme$palette = theme.palette).getContrastText) == null ? void 0 : _theme$palette$getCon.call(_theme$palette, theme.palette.grey[300]),
-    backgroundColor: (theme.vars || theme).palette.grey[300],
+    backgroundColor: theme.vars ? theme.vars.palette.Button.inheritContainedBg : inheritContainedBackgroundColor,
     boxShadow: (theme.vars || theme).shadows[2]
   }, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
     color: (theme.vars || theme).palette[ownerState.color].contrastText,

package/CHANGELOG.md

@@ -1,5 +1,147 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.12.2
+
+<!-- generated comparing v5.12.1..master -->
+
+_Apr 25, 2023_
+
+A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚠️ **[BREAKING CHANGE]** The `Unstyled` suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change.
+- 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.12.2`
+
+- &#8203;<!-- 10 -->[FormControl] Fix `filled` when value is set through `inputProps` (#36741) @sai6855
+- &#8203;<!-- 07 -->[Slider] `onChange` handler should be called only when value has changed (#36706) @gitstart
+- &#8203;<!-- 06 -->[Table] Fix `Sorting & Selecting` tables (#36898) @oliviertassinari
+
+### `@mui/base@5.0.0-alpha.127`
+
+#### Breaking changes
+
+- &#8203;<!-- 27 -->[base] Remove unstyled suffix from Base components + Codemod script (#36873) @hbjORbj
+
+  The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
+
+  You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration:
+
+  ```sh
+  npx @mui/codemod v5.0.0/base-remove-unstyled-suffix <path>
+  ```
+
+#### Changes
+
+- &#8203;<!-- 26 -->[codemod][base] Improve the removal of `component` prop codemod script (#36952) @hbjORbj
+- &#8203;<!-- 25 -->[codemod][base] Write a migration script for removal of `component` prop from components (#36831) @hbjORbj
+- &#8203;<!-- 24 -->[Base][useButton] Allow useButton params to be completely optional (#36922) @mj12albert
+
+### `@mui/joy@5.0.0-alpha.77`
+
+- &#8203;<!-- 23 -->[Joy][Chip] Chip button not showing up in Firefox browser (#36930) @TakhyunKim
+- &#8203;<!-- 09 -->[Joy] Add `invertedColors` to Menu and Alert (#36975) @siriwatknp
+- &#8203;<!-- 08 -->[joy][Select] Set focus visible on select options when navigating with arrow keys (#36689) @gitstart
+
+### Docs
+
+- &#8203;<!-- 21 -->[docs] Fix console error introduced by #36408 (#36980) @alexfauquette
+- &#8203;<!-- 20 -->[docs] Add stray Joy UI documentation improvements (#36921) @danilo-leal
+- &#8203;<!-- 19 -->[docs] Add Joy profile dashboard template (#36931) @siriwatknp
+- &#8203;<!-- 18 -->[docs] Fix 404 links (#36969) @oliviertassinari
+- &#8203;<!-- 17 -->[docs] Clarify when bundle size optimization is needed (#36823) @oliviertassinari
+- &#8203;<!-- 16 -->[docs] Fix Chakra UI theme scoping typo (#36950) @mj12albert
+- &#8203;<!-- 15 -->[docs] Add snackbar example using sonner (#36926) @PupoSDC
+- &#8203;<!-- 14 -->[docs] Adjust the Material Icons page design and formatting (#36937) @danilo-leal
+- &#8203;<!-- 13 -->[docs] Allows to customize menu with any icon (#36408) @alexfauquette
+- &#8203;<!-- 12 -->[docs] Add info about passing ref to input element (#36913) @tomaskebrle
+- &#8203;<!-- 11 -->[docs][material] Tabs API section cleanup (#36942) @mnajdova
+
+### Core
+
+- &#8203;<!-- 22 -->[core] Fix CI failure on `master` (#37016) @hbjORbj
+- &#8203;<!-- 05 -->[typescript] Add the missing explicit component return types (#36924) @michaldudak
+- &#8203;<!-- 04 -->[website] Update main data grid demo on X landing page (#37001) @cherniavskii
+- &#8203;<!-- 03 -->[website] Design role updates (#36997) @danilo-leal
+- &#8203;<!-- 02 -->[website] X component section improvements (#36598) @danilo-leal
+- &#8203;<!-- 01 -->[website] Developer Advocate role filled @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @cherniavskii, @danilo-leal, @gitstart, @hbjORbj, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @PupoSDC, @sai6855, @siriwatknp, @TakhyunKim, @tomaskebrle
+
+## 5.12.1
+
+<!-- generated comparing v5.12.0..master -->
+
+_Apr 17, 2023_
+
+A big thanks to the 16 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.12.1`
+
+- &#8203;<!-- 24 -->[Autocomplete] Fix autocomplete left padding (#36649) @mj12albert
+- &#8203;<!-- 17 -->[Button] Fix contained with inherit prop not adapting on dark mode (#34508) @jesrodri
+- &#8203;<!-- 07 -->[FormControlLabel] Add `required` prop (#34207) @emlai
+- &#8203;<!-- 04 -->[Tabs] Fix null reference in ScrollbarSize after unmounting (#36485) @rkdrnf
+- &#8203;<!-- 03 -->[TextField] Fix type error when using `inputTypeSearch` class for `outlined` and `filled` inputs (#36740) @sai6855
+- &#8203;<!-- 02 -->[ThemeProvider] Fix theme proptypes (#36852) @siriwatknp
+
+### `@mui/system@5.12.1`
+
+#### Breaking changes
+
+- &#8203;<!-- 06 -->[Grid2] Replace context with `cloneElement` (#36399) @siriwatknp
+
+  `Grid2` now uses `React.cloneElement` instead of React context for passing the spacing and columns to the next container. The change is close to how CSS flexbox behaves.
+
+#### Changes
+
+- &#8203;<!-- 14 -->[CssVarsProvider] Always generate new `css` object (#36853) @siriwatknp
+
+### `@mui/base@5.0.0-alpha.126`
+
+#### Breaking changes
+
+- &#8203;<!-- 23 -->[base] Refactor the compound components building blocks (#36400) @michaldudak
+  Components affected by the changes are:
+  - Menu
+    - `MenuUnstyledContext` is replaced by `MenuProvider`. The value to pass to the provider is returned by the `useMenu` hook.
+    - MenuUnstyled's `onClose` prop is replaced by `onOpenChange`. It has the `open` parameter and is called when a menu is opened or closed
+  - Select
+    - `SelectUnstyledContext` is replaced by `SelectProvider`. The value to pass to the provider is returned by the `useSelect` hook.
+    - `SelectUnstyled`'s popup is permanently mounted.
+    - The `defaultOpen` prop was added to the SelectUnstyled. The open/close state can now be controlled or uncontrolled, as a `value`.
+  - Tabs
+    - `TabsContext` is replaced by `TabsProvider`. The value to pass to the provider is returned by the `useTabs` hook.
+    - To deselect all tabs, pass in `null` to Tabs' `value` prop, instead of `false`. This is consistent with how Select works.
+    - The `value` prop is still technically not mandatory on TabUnstyled and TabPanel, but when omitted, the contents of the selected tab panel will not be rendered during SSR.
+
+### `@mui/joy@5.0.0-alpha.76`
+
+- &#8203;<!-- 05 -->[Table][Joy] Replace uses of css selector `*-child` to `*-of-type` (#36839) @keyvanm
+
+### Docs
+
+- &#8203;<!-- 25 --> [docs][base] Move styles to the bottom of demos code for `BadgeUnstyled` (#36723) @varunmulay22
+- &#8203;<!-- 22 -->[docs][base] Mention that the hook does not accept any parameters in the `Parameters` section of the API docs (#36773) @ZeeshanTamboli
+- &#8203;<!-- 21 -->[docs][base] Move styles to the bottom of demos code for `ModalUnstyled` (#36580) @gitstart
+- &#8203;<!-- 20 -->[docs][base] Move styles to the bottom of demos code for `Tabs` (#36577) @gitstart
+- &#8203;<!-- 19 -->[docs][base] Move styles to the bottom of demos code for `Popper` (#36578) @gitstart
+- &#8203;<!-- 18 -->[docs][base] Move styles to the bottom of demos code for `TablePagination` (#36593) @gitstart
+- &#8203;<!-- 13 -->[docs] Remove the incorrect info about useButton's ref parameter (#36883) @michaldudak
+- &#8203;<!-- 12 -->[docs] Sync <Stack> between projects (#36785) @oliviertassinari
+- &#8203;<!-- 11 -->[docs] Add guides to overriding component structure in Base UI and Joy UI docs (#34990) @samuelsycamore
+- &#8203;<!-- 10 -->[docs] Content changed from 'row' to 'orientation=horizontal' (#36858) @navedqb
+- &#8203;<!-- 09 -->[docs][Joy] `component`, `slots`, `slotProps` must be visible in Prop table in API docs (#36666) @hbjORbj
+- &#8203;<!-- 08 -->[docs][Select] Fix duplicate ID in small size Select demo (#36792) @sai6855
+
+### Core
+
+- &#8203;<!-- 16 -->[core] Use glob to find the test files in parseTest (#36305) @flaviendelangle
+- &#8203;<!-- 15 -->[core] Fix minor SEO issues @oliviertassinari
+- &#8203;<!-- 01 -->[website] Fix visual bug appbar (#36875) @oliviertassinari
+
+All contributors of this release in alphabetical order: @emlai, @flaviendelangle, @gitstart, @hbjORbj, @jesrodri, @keyvanm, @michaldudak, @mj12albert, @navedqb, @oliviertassinari, @rkdrnf, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli
+
 ## 5.12.0
 
 <!-- generated comparing v5.11.16..master -->

package/FilledInput/filledInputClasses.d.ts

@@ -33,6 +33,8 @@ export interface FilledInputClasses {
     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 FilledInputClassKey = keyof FilledInputClasses;
 export declare function getFilledInputUtilityClass(slot: string): string;

package/FormControl/FormControl.js

@@ -138,7 +138,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
         if (!isMuiElement(child, ['Input', 'Select'])) {
           return;
         }
-        if (isFilled(child.props, true)) {
+        if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
           initialFilled = true;
         }
       });

package/FormControlLabel/FormControlLabel.d.ts

@@ -59,6 +59,10 @@ export interface FormControlLabelProps
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange?: (event: React.SyntheticEvent, checked: boolean) => void;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required?: boolean;
   /**
    * The props used for each slot inside.
    * @default {}

package/FormControlLabel/FormControlLabel.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "slotProps", "value"];
+const _excluded = ["checked", "className", "componentsProps", "control", "disabled", "disableTypography", "inputRef", "label", "labelPlacement", "name", "onChange", "required", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -20,11 +20,13 @@ const useUtilityClasses = ownerState => {
     classes,
     disabled,
     labelPlacement,
-    error
+    error,
+    required
   } = ownerState;
   const slots = {
-    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error'],
-    label: ['label', disabled && 'disabled']
+    root: ['root', disabled && 'disabled', `labelPlacement${capitalize(labelPlacement)}`, error && 'error', required && 'required'],
+    label: ['label', disabled && 'disabled'],
+    asterisk: ['asterisk', error && 'error']
   };
   return composeClasses(slots, getFormControlLabelUtilityClasses, classes);
 };
@@ -73,13 +75,24 @@ export const FormControlLabelRoot = styled('label', {
     }
   }
 }));
+const AsteriskComponent = styled('span', {
+  name: 'MuiFormControlLabel',
+  slot: 'Asterisk',
+  overridesResolver: (props, styles) => styles.asterisk
+})(({
+  theme
+}) => ({
+  [`&.${formControlLabelClasses.error}`]: {
+    color: (theme.vars || theme).palette.error.main
+  }
+}));
 
 /**
  * Drop-in replacement of the `Radio`, `Switch` and `Checkbox` component.
  * Use this component if you want to display an extra label.
  */
 const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(inProps, ref) {
-  var _slotProps$typography;
+  var _ref, _slotProps$typography;
   const props = useThemeProps({
     props: inProps,
     name: 'MuiFormControlLabel'
@@ -92,19 +105,16 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
       disableTypography,
       label: labelProp,
       labelPlacement = 'end',
+      required: requiredProp,
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const muiFormControl = useFormControl();
-  let disabled = disabledProp;
-  if (typeof disabled === 'undefined' && typeof control.props.disabled !== 'undefined') {
-    disabled = control.props.disabled;
-  }
-  if (typeof disabled === 'undefined' && muiFormControl) {
-    disabled = muiFormControl.disabled;
-  }
+  const disabled = (_ref = disabledProp != null ? disabledProp : control.props.disabled) != null ? _ref : muiFormControl == null ? void 0 : muiFormControl.disabled;
+  const required = requiredProp != null ? requiredProp : control.props.required;
   const controlProps = {
-    disabled
+    disabled,
+    required
   };
   ['checked', 'name', 'onChange', 'value', 'inputRef'].forEach(key => {
     if (typeof control.props[key] === 'undefined' && typeof props[key] !== 'undefined') {
@@ -119,6 +129,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
   const ownerState = _extends({}, props, {
     disabled,
     labelPlacement,
+    required,
     error: fcs.error
   });
   const classes = useUtilityClasses(ownerState);
@@ -137,7 +148,12 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
     ownerState: ownerState,
     ref: ref
   }, other, {
-    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label]
+    children: [/*#__PURE__*/React.cloneElement(control, controlProps), label, required && /*#__PURE__*/_jsxs(AsteriskComponent, {
+      ownerState: ownerState,
+      "aria-hidden": true,
+      className: classes.asterisk,
+      children: ["\u2009", '*']
+    })]
   }));
 });
 process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-proptypes */ = {
@@ -200,6 +216,10 @@ process.env.NODE_ENV !== "production" ? FormControlLabel.propTypes /* remove-pro
    * You can pull out the new checked state by accessing `event.target.checked` (boolean).
    */
   onChange: PropTypes.func,
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   */
+  required: PropTypes.bool,
   /**
    * The props used for each slot inside.
    * @default {}

package/FormControlLabel/formControlLabelClasses.d.ts

@@ -13,6 +13,10 @@ export interface FormControlLabelClasses {
     label: string;
     /** State class applied to the root element if `error={true}`. */
     error: string;
+    /** State class applied to the root element if `required={true}`. */
+    required: string;
+    /** Styles applied to the asterisk element. */
+    asterisk: string;
 }
 export type FormControlLabelClassKey = keyof FormControlLabelClasses;
 export declare function getFormControlLabelUtilityClasses(slot: string): string;

package/FormControlLabel/formControlLabelClasses.js

@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
 export function getFormControlLabelUtilityClasses(slot) {
   return generateUtilityClass('MuiFormControlLabel', slot);
 }
-const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error']);
+const formControlLabelClasses = generateUtilityClasses('MuiFormControlLabel', ['root', 'labelPlacementStart', 'labelPlacementTop', 'labelPlacementBottom', 'disabled', 'label', 'error', 'required', 'asterisk']);
 export default formControlLabelClasses;

package/Modal/Modal.d.ts

@@ -2,7 +2,10 @@ import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
 import { SlotComponentProps } from '@mui/base';
-import { ModalUnstyledTypeMap, ModalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import {
+  ModalTypeMap as BaseModalTypeMap,
+  ModalClasses as BaseModalClasses,
+} from '@mui/base/Modal';
 import { Theme } from '../styles';
 import Backdrop, { BackdropProps } from '../Backdrop';
 import { OverridableComponent } from '../OverridableComponent';
@@ -38,7 +41,7 @@ export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
     /**
      * Override or extend the styles applied to the component.
      */
-    classes?: Partial<ModalUnstyledClasses>;
+    classes?: Partial<BaseModalClasses>;
     /**
      * @ignore
      */
@@ -88,7 +91,7 @@ export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-  } & Omit<ModalUnstyledTypeMap['props'], 'slotProps'>;
+  } & Omit<BaseModalTypeMap['props'], 'slotProps'>;
   defaultComponent: D;
 }
 

package/Modal/Modal.js

@@ -1,10 +1,10 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
+const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
+import ModalUnstyled, { modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
 import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
 import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
 import styled from '../styles/styled';
@@ -70,6 +70,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       className,
       closeAfterTransition = false,
       children,
+      container,
       component,
       components = {},
       componentsProps = {},
@@ -81,6 +82,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
       disableScrollLock = false,
       hideBackdrop = false,
       keepMounted = false,
+      onBackdropClick,
+      onClose,
+      open,
       slotProps,
       slots,
       // eslint-disable-next-line react/prop-types
@@ -89,6 +93,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const [exited, setExited] = React.useState(true);
   const commonProps = {
+    container,
     closeAfterTransition,
     disableAutoFocus,
     disableEnforceFocus,
@@ -97,7 +102,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
     disableRestoreFocus,
     disableScrollLock,
     hideBackdrop,
-    keepMounted
+    keepMounted,
+    onBackdropClick,
+    onClose,
+    open
   };
   const ownerState = _extends({}, props, commonProps, {
     exited

package/Modal/index.d.ts

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

package/Modal/index.js

@@ -1,3 +1,3 @@
-export * from '@mui/base/ModalUnstyled';
+export { ModalManager } from '@mui/base/Modal';
 export { default } from './Modal';
 export * from './Modal';

package/OutlinedInput/outlinedInputClasses.d.ts

@@ -29,6 +29,8 @@ export interface OutlinedInputClasses {
     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;

package/OverridableComponent.d.ts

@@ -11,7 +11,7 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
   // If you make any changes to this interface, please make sure to update the
   // `OverridableComponent` type in `mui-types/index.d.ts` as well.
   // Also, there are types in Base UI that have a similar shape to this interface
-  // (e.g. SelectUnstyledType, OptionUnstyledType, etc.).
+  // (e.g. SelectType, OptionType, etc.).
   <C extends React.ElementType>(
     props: {
       /**

package/Popper/Popper.d.ts

@@ -1,8 +1,8 @@
-import { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
+import { PopperProps as BasePopperProps } from '@mui/base/Popper';
 import { SxProps } from '@mui/system';
 import * as React from 'react';
 import { Theme } from '../styles';
-export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
+export type PopperProps = Omit<BasePopperProps, 'direction'> & {
     /**
      * The components used for each slot inside the Popper.
      * Either a string to use a HTML element or a component.
@@ -15,7 +15,7 @@ export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
      * The props used for each slot inside the Popper.
      * @default {}
      */
-    componentsProps?: PopperUnstyledProps['slotProps'];
+    componentsProps?: BasePopperProps['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -33,7 +33,7 @@ export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Omit<PopperUnstyledProps<"div", {}>, "direction"> & {
+declare const Popper: React.ForwardRefExoticComponent<Omit<BasePopperProps<"div", {}>, "direction"> & {
     /**
      * The components used for each slot inside the Popper.
      * Either a string to use a HTML element or a component.
@@ -46,7 +46,7 @@ declare const Popper: React.ForwardRefExoticComponent<Omit<PopperUnstyledProps<"
      * The props used for each slot inside the Popper.
      * @default {}
      */
-    componentsProps?: PopperUnstyledProps['slotProps'];
+    componentsProps?: BasePopperProps['slotProps'];
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */

package/Popper/Popper.js

@@ -1,14 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["components", "componentsProps", "slots", "slotProps"];
-import PopperUnstyled from '@mui/base/PopperUnstyled';
+const _excluded = ["anchorEl", "component", "components", "componentsProps", "container", "disablePortal", "keepMounted", "modifiers", "open", "placement", "popperOptions", "popperRef", "transition", "slots", "slotProps"];
+import BasePopper from '@mui/base/Popper';
 import { useThemeWithoutDefault as useTheme } from '@mui/system';
 import { HTMLElementType, refType } from '@mui/utils';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { styled, useThemeProps } from '../styles';
 import { jsx as _jsx } from "react/jsx-runtime";
-const PopperRoot = styled(PopperUnstyled, {
+const PopperRoot = styled(BasePopper, {
   name: 'MuiPopper',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
@@ -34,20 +34,44 @@ const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
     name: 'MuiPopper'
   });
   const {
+      anchorEl,
+      component,
       components,
       componentsProps,
+      container,
+      disablePortal,
+      keepMounted,
+      modifiers,
+      open,
+      placement,
+      popperOptions,
+      popperRef,
+      transition,
       slots,
       slotProps
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
+  const otherProps = _extends({
+    anchorEl,
+    component,
+    container,
+    disablePortal,
+    keepMounted,
+    modifiers,
+    open,
+    placement,
+    popperOptions,
+    popperRef,
+    transition
+  }, other);
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction,
     slots: {
       root: RootComponent
     },
     slotProps: slotProps != null ? slotProps : componentsProps
-  }, other, {
+  }, otherProps, {
     ref: ref
   }));
 });

package/Popper/index.d.ts

@@ -1,3 +1,3 @@
 export { default } from './Popper';
 export * from './Popper';
-export { PopperPlacementType } from '@mui/base/PopperUnstyled';
+export { PopperPlacementType } from '@mui/base/Popper';

package/Stack/Stack.d.ts

@@ -28,7 +28,7 @@ export interface StackTypeMap<P = {}, D extends React.ElementType = 'div'> {
       /**
        * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
        *
-       * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+       * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
        * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
        *
        * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/Stack/Stack.js

@@ -49,7 +49,7 @@ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ =
   /**
    * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
    *
-   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack#limitations),
+   * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
    * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
    *
    * To enable this flag globally, follow the [theme's default props](https://mui.com/material-ui/customization/theme-components/#default-props) configuration.

package/Tabs/ScrollbarSize.js

@@ -4,7 +4,7 @@ const _excluded = ["onChange"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import debounce from '../utils/debounce';
-import { ownerWindow } from '../utils';
+import { ownerWindow, unstable_useEnhancedEffect as useEnhancedEffect } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 const styles = {
   width: 99,
@@ -29,7 +29,7 @@ export default function ScrollbarSize(props) {
   const setMeasurements = () => {
     scrollbarHeight.current = nodeRef.current.offsetHeight - nodeRef.current.clientHeight;
   };
-  React.useEffect(() => {
+  useEnhancedEffect(() => {
     const handleResize = debounce(() => {
       const prevHeight = scrollbarHeight.current;
       setMeasurements();