@mui/material 5.11.3 → 5.11.5

package/Autocomplete/Autocomplete.d.ts

@@ -52,6 +52,7 @@ export type AutocompleteRenderGetTagProps = ({ index }: { index: number }) => {
 
 export interface AutocompleteRenderOptionState {
   inputValue: string;
+  index: number;
   selected: boolean;
 }
 
@@ -286,7 +287,7 @@ export interface AutocompleteProps<
  */
 export default function Autocomplete<
   T,
-  Multiple extends boolean | undefined = undefined,
-  DisableClearable extends boolean | undefined = undefined,
-  FreeSolo extends boolean | undefined = undefined,
+  Multiple extends boolean | undefined = false,
+  DisableClearable extends boolean | undefined = false,
+  FreeSolo extends boolean | undefined = false,
 >(props: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>): JSX.Element;

package/Autocomplete/Autocomplete.js

@@ -503,6 +503,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       className: classes.option
     }), option, {
       selected: optionProps['aria-selected'],
+      index,
       inputValue
     });
   };

package/Box/Box.d.ts

@@ -1,24 +1,7 @@
-import { SxProps, SystemProps } from '@mui/system';
-import { OverridableComponent, OverrideProps } from '../OverridableComponent';
-import { Theme } from '../styles';
+import { createBox, BoxTypeMap } from '@mui/system';
+import { OverrideProps } from '../OverridableComponent';
+import { Theme as MaterialTheme } from '../styles';
 
-export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
-  props: P &
-    SystemProps<Theme> & {
-      children?: React.ReactNode;
-      /**
-       * The component used for the root node.
-       * Either a string to use a HTML element or a component.
-       */
-      component?: React.ElementType;
-      ref?: React.Ref<unknown>;
-      /**
-       * The system prop that allows defining system overrides as well as additional CSS styles.
-       */
-      sx?: SxProps<Theme>;
-    };
-  defaultComponent: D;
-}
 /**
  *
  * Demos:
@@ -29,11 +12,11 @@ export interface BoxTypeMap<P = {}, D extends React.ElementType = 'div'> {
  *
  * - [Box API](https://mui.com/material-ui/api/box/)
  */
-declare const Box: OverridableComponent<BoxTypeMap>;
+declare const Box: ReturnType<typeof createBox<MaterialTheme>>;
 
 export type BoxProps<
   D extends React.ElementType = BoxTypeMap['defaultComponent'],
   P = {},
-> = OverrideProps<BoxTypeMap<P, D>, D>;
+> = OverrideProps<BoxTypeMap<P, D, MaterialTheme>, D>;
 
 export default Box;

package/CHANGELOG.md

@@ -1,5 +1,111 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.5
+
+<!-- generated comparing v5.11.4..master -->
+
+_Jan 17, 2023_
+
+A big thanks to the 17 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.5`
+
+- [Material UI] Custom channel token should suppress the warning (#35804) @siriwatknp
+- [Autocomplete] Fix value type when `strictNullChecks` is `false` (#35367) @fenghan34
+- [Slider] Replace `SliderUnstyled` with `useSlider` hook (#35770) @ZeeshanTamboli
+- [l10n] Add Belarusian translation (#35742) @volhalink
+
+### `@mui/system@5.11.5`
+
+- [system] Improve the `createBox` types (#35532) @mnajdova
+
+### `@mui/codemod@5.11.5`
+
+- Add `joy-text-field-to-input` codemod (#35462) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.114`
+
+- [base] Fix typos (#35802) @nnmax
+- [Slider] Convert code to TypeScript (#35445) @sai6855
+
+### `@mui/joy@5.0.0-alpha.63`
+
+- [Tabs][joy] Don't apply `:hover, :active` styles when `selected` (#35750) @sai6855
+- Remove `TextField` component and replace its usage in docs with `FormControl`/`FormLabel`/`Input` (#35462) @hbjORbj
+- [TextField] Throw error with migration message (#35845) @siriwatknp
+- Miscellaneous fixes (#35847) @siriwatknp
+
+### Docs
+
+- [docs] Improve pickers lab migration stressing `mui-x` usage (#35740) @LukasTy
+- [docs] Fix incorrectly named AccessibleTable demo component (#35832) @HeVictor
+- [docs] Clarify where to find docs for MUI Base components in Material UI (#35799) @samuelsycamore
+- [docs] Fix typos (#35814) @alexfauquette
+- [docs] Revise and expand the Joy UI Card page (#35745) @samuelsycamore
+- [docs] Fix navigation layout shift (#35679) @oliviertassinari
+- [docs] Fix typo in the Composition page (#35774) @msoyka
+- [docs][joy] Update Customization section code example to use the correct API (#35765) @pupudu
+- [docs][joy] Fix grammar in `Typography` docs (#35796) @atrefonas
+- [examples] Remove `next-env.d.ts` from Next.js examples (#35772) @Juneezee
+
+### Core
+
+- [website] Improve pricing page (#35767) @oliviertassinari
+- [website] Add Greg in about page (#35816) @oliviertassinari
+- [website] Update the Accessibility Engineer role (#35751) @oliviertassinari
+- [website] Add docs for MUI for Figma @oliviertassinari
+
+All contributors of this release in alphabetical order: @alexfauquette, @atrefonas, @fenghan34, @hbjORbj, @HeVictor, @Juneezee, @LukasTy, @mnajdova, @msoyka, @nnmax, @oliviertassinari, @pupudu, @sai6855, @samuelsycamore, @siriwatknp, @volhalink, @ZeeshanTamboli
+
+## 5.11.4
+
+<!-- generated comparing v5.11.3..master -->
+
+_Jan 9, 2023_
+
+A big thanks to the 14 contributors who made this release possible.
+This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
+
+### `@mui/material@5.11.4`
+
+- [Autocomplete] Add index to renderOption's AutocompleteRenderOptionState (#35578) @CowDotDev
+- [Autocomplete] Fix grammar in console.error in `useAutocomplete` (#35723) @hamirmahal
+- [Modal] Fix can't override Backdrop Props using new Slots API (#35140) @ZeeshanTamboli
+- [Select] Revert "Update `renderValue` prop's TypeScript type (#34177)" (#35733) @michaldudak
+- [Tabs] Throw error only if individual `Tab` is hidden, not the whole `Tabs` (#34026) @Ryczko
+- [TextField] Improve WCAG 2.4.7 with error={true} (#35687) @oliviertassinari
+- [Tooltip] Remove `data-foo` attribute (#35736) @koolskateguy89
+
+### `@mui/joy@5.0.0-alpha.62`
+
+- [Autocomplete][joy] Specify `type` attribute for popup indicator (#35648) @hbjORbj
+- [Joy] Miscellaneous improvements (#35769) @siriwatknp
+- [Joy] Improve `onKeyDown` event handler for demo (#35642) @hbjORbj
+
+### `@mui/base@5.0.0-alpha.113`
+
+- [Portal][base] Convert code to TypeScript (#35657) @sai6855
+
+### Docs
+
+- [docs] Revise and expand Joy UI Button doc (#35737) @samuelsycamore
+- [docs] Document the workaround for crashing a translated page (#35720) @michaldudak
+- [docs] Fix API page for `MenuItem` to list all valid props (#35561) @mnajdova
+- [docs] Fix ad exception in Joy UI (#35685) @oliviertassinari
+- [docs] Fix content wider than screen regression @oliviertassinari
+- [examples] Add `Vite.js with TypeScript` example (#35683) @miha53cevic
+
+### Core
+
+- [core] Close 2022 developer survey @oliviertassinari
+- [core] Fix the product license reference name (#35703) @oliviertassinari
+- [core] Use TypeScript AST instead of TTP for component doc building (#35379) @flaviendelangle
+- [test] Always use & for nesting styles (#35702) @oliviertassinari
+- [website] Improve Lead Designer role description (#35684) @oliviertassinari
+
+All contributors of this release in alphabetical order: @CowDotDev, @flaviendelangle, @hamirmahal, @hbjORbj, @koolskateguy89, @michaldudak, @miha53cevic, @mnajdova, @oliviertassinari, @Ryczko, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
+
 ## 5.11.3
 
 <!-- generated comparing v5.11.2..master -->

package/FilledInput/FilledInput.js

@@ -90,12 +90,8 @@ const FilledInputRoot = styled(InputBaseRoot, {
     [`&.${filledInputClasses.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${theme.vars ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})` : bottomLineColor}`,
       left: 0,

package/Input/Input.js

@@ -73,12 +73,8 @@ const InputRoot = styled(InputBaseRoot, {
     [`&.${inputClasses.error}`]: {
       '&:before, &:after': {
         borderBottomColor: (theme.vars || theme).palette.error.main
-      },
-      '&:focus-within:after': {
-        transform: 'scaleX(1)' // error is always underlined in red
       }
     },
-
     '&:before': {
       borderBottom: `1px solid ${bottomLineColor}`,
       left: 0,
@@ -94,7 +90,7 @@ const InputRoot = styled(InputBaseRoot, {
     },
 
     [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
-      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
+      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/MenuItem/MenuItem.d.ts

@@ -38,7 +38,7 @@ export type MenuItemTypeMap<P = {}, D extends React.ElementType = 'li'> = Extend
      */
     divider?: boolean;
     /**
-     * Use to apply selected styling.
+     * If `true`, the component is selected.
      * @default false
      */
     selected?: boolean;

package/MenuItem/MenuItem.js

@@ -242,7 +242,8 @@ process.env.NODE_ENV !== "production" ? MenuItem.propTypes /* remove-proptypes *
    */
   role: PropTypes /* @typescript-to-proptypes-ignore */.string,
   /**
-   * @ignore
+   * If `true`, the component is selected.
+   * @default false
    */
   selected: PropTypes.bool,
   /**

package/Modal/Modal.d.ts

@@ -1,15 +1,19 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverrideProps } from '@mui/types';
-import {
-  ExtendModalUnstyledTypeMap,
-  ExtendModalUnstyled,
-  ModalUnstyledTypeMap,
-} from '@mui/base/ModalUnstyled';
+import { SlotComponentProps } from '@mui/base';
+import { ModalUnstyledTypeMap } from '@mui/base/ModalUnstyled';
 import { Theme } from '../styles';
-import { BackdropProps } from '../Backdrop';
+import Backdrop, { BackdropProps } from '../Backdrop';
+import { OverridableComponent } from '../OverridableComponent';
 
-export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendModalUnstyledTypeMap<{
+export interface ModalComponentsPropsOverrides {}
+
+export interface ModalOwnerState extends ModalProps {
+  exited: boolean;
+}
+
+export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
   props: P & {
     /**
      * A backdrop component. This prop enables custom backdrop rendering.
@@ -52,20 +56,39 @@ export type ModalTypeMap<D extends React.ElementType = 'div', P = {}> = ExtendMo
      *
      * @default {}
      */
-    componentsProps?: ModalUnstyledTypeMap['props']['slotProps'];
+    componentsProps?: {
+      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+      backdrop?: SlotComponentProps<
+        typeof Backdrop,
+        ModalComponentsPropsOverrides,
+        ModalOwnerState
+      >;
+    };
+    /**
+     * The props used for each slot inside the Modal.
+     * @default {}
+     */
+    slotProps?: {
+      root?: SlotComponentProps<'div', ModalComponentsPropsOverrides, ModalOwnerState>;
+      backdrop?: SlotComponentProps<
+        typeof Backdrop,
+        ModalComponentsPropsOverrides,
+        ModalOwnerState
+      >;
+    };
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
     sx?: SxProps<Theme>;
-  };
+  } & Omit<ModalUnstyledTypeMap['props'], 'slotProps'>;
   defaultComponent: D;
-}>;
+}
 
 type ModalRootProps = NonNullable<ModalTypeMap['props']['slotProps']>['root'];
 
 export declare const ModalRoot: React.FC<ModalRootProps>;
 
-export type ModalClassKey = keyof NonNullable<ModalTypeMap['props']['classes']>;
+export type ModalClassKey = keyof NonNullable<ModalProps['classes']>;
 
 /**
  * Modal is a lower-level construct that is leveraged by the following components:
@@ -88,7 +111,7 @@ export type ModalClassKey = keyof NonNullable<ModalTypeMap['props']['classes']>;
  *
  * - [Modal API](https://mui.com/material-ui/api/modal/)
  */
-declare const Modal: ExtendModalUnstyled<ModalTypeMap>;
+declare const Modal: OverridableComponent<ModalTypeMap>;
 
 export type ModalClasses = Record<ModalClassKey, string>;
 

package/Select/Select.d.ts

@@ -9,7 +9,7 @@ import { OutlinedInputProps } from '../OutlinedInput';
 
 export { SelectChangeEvent };
 
-interface CommonProps<T>
+export interface SelectProps<T = unknown>
   extends StandardProps<InputProps, 'value' | 'onChange'>,
     Omit<OutlinedInputProps, 'value' | 'onChange'>,
     Pick<SelectInputProps<T>, 'onChange'> {
@@ -41,6 +41,17 @@ interface CommonProps<T>
    * The default value. Use when the component is not controlled.
    */
   defaultValue?: T;
+  /**
+   * If `true`, a value is displayed even if no items are selected.
+   *
+   * In order to display a meaningful value, a function can be passed to the `renderValue` prop which
+   * returns the value to be displayed when no items are selected.
+   *
+   * ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value.
+   * The label should either be hidden or forced to a shrunk state.
+   * @default false
+   */
+  displayEmpty?: boolean;
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon
@@ -72,6 +83,11 @@ interface CommonProps<T>
    * Props applied to the [`Menu`](/material-ui/api/menu/) element.
    */
   MenuProps?: Partial<MenuProps>;
+  /**
+   * If `true`, `value` must be an array and the menu will support multiple selections.
+   * @default false
+   */
+  multiple?: boolean;
   /**
    * If `true`, the component uses a native `select` element.
    * @default false
@@ -105,6 +121,14 @@ interface CommonProps<T>
    * You can only use it when the `native` prop is `false` (default).
    */
   open?: boolean;
+  /**
+   * Render the selected value.
+   * You can only use it when the `native` prop is `false` (default).
+   *
+   * @param {any} value The `value` provided to the component.
+   * @returns {ReactNode}
+   */
+  renderValue?: (value: T) => React.ReactNode;
   /**
    * Props applied to the clickable div element.
    */
@@ -128,88 +152,6 @@ interface CommonProps<T>
   variant?: 'standard' | 'outlined' | 'filled';
 }
 
-type ConditionalRenderValueType<T> =
-  | {
-      /**
-       * If `true`, a value is displayed even if no items are selected.
-       *
-       * In order to display a meaningful value, a function can be passed to the `renderValue` prop which
-       * returns the value to be displayed when no items are selected.
-       *
-       * ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value.
-       * The label should either be hidden or forced to a shrunk state.
-       * @default false
-       */
-      displayEmpty?: false;
-      /**
-       * If `true`, `value` must be an array and the menu will support multiple selections.
-       * @default false
-       */
-      multiple?: boolean;
-      /**
-       * Render the selected value.
-       * You can only use it when the `native` prop is `false` (default).
-       *
-       * @param {any} value The `value` provided to the component.
-       * @returns {ReactNode}
-       */
-      renderValue?: (value: T) => React.ReactNode;
-    }
-  | {
-      /**
-       * If `true`, a value is displayed even if no items are selected.
-       *
-       * In order to display a meaningful value, a function can be passed to the `renderValue` prop which
-       * returns the value to be displayed when no items are selected.
-       *
-       * ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value.
-       * The label should either be hidden or forced to a shrunk state.
-       * @default false
-       */
-      displayEmpty: true;
-      /**
-       * If `true`, `value` must be an array and the menu will support multiple selections.
-       * @default false
-       */
-      multiple?: false;
-      /**
-       * Render the selected value.
-       * You can only use it when the `native` prop is `false` (default).
-       *
-       * @param {any} value The `value` provided to the component.
-       * @returns {ReactNode}
-       */
-      renderValue?: (value: T | '') => React.ReactNode;
-    }
-  | {
-      /**
-       * If `true`, a value is displayed even if no items are selected.
-       *
-       * In order to display a meaningful value, a function can be passed to the `renderValue` prop which
-       * returns the value to be displayed when no items are selected.
-       *
-       * ⚠️ When using this prop, make sure the label doesn't overlap with the empty displayed value.
-       * The label should either be hidden or forced to a shrunk state.
-       * @default false
-       */
-      displayEmpty: true;
-      /**
-       * If `true`, `value` must be an array and the menu will support multiple selections.
-       * @default false
-       */
-      multiple: true;
-      /**
-       * Render the selected value.
-       * You can only use it when the `native` prop is `false` (default).
-       *
-       * @param {any} value The `value` provided to the component.
-       * @returns {ReactNode}
-       */
-      renderValue?: (value: T) => React.ReactNode;
-    };
-
-export type SelectProps<T = unknown> = CommonProps<T> & ConditionalRenderValueType<T>;
-
 /**
  *
  * Demos:

package/Slider/Slider.d.ts

@@ -84,7 +84,7 @@ export type SliderTypeMap<
   defaultComponent: D;
 }>;
 
-export { SliderValueLabelProps } from '@mui/base/SliderUnstyled';
+export { SliderValueLabelProps };
 
 type SliderRootProps = NonNullable<SliderTypeMap['props']['componentsProps']>['root'];
 type SliderMarkProps = NonNullable<SliderTypeMap['props']['componentsProps']>['mark'];
@@ -110,7 +110,6 @@ export declare const SliderValueLabel: React.FC<SliderValueLabelProps>;
  * API:
  *
  * - [Slider API](https://mui.com/material-ui/api/slider/)
- * - inherits [SliderUnstyled API](https://mui.com/base/api/slider-unstyled/)
  */
 declare const Slider: ExtendSliderUnstyled<SliderTypeMap>;