@mui/material 5.11.0 → 5.11.2

package/CHANGELOG.md

@@ -1,5 +1,132 @@
 # [Versions](https://mui.com/versions/)
 
+## 5.11.2
+
+<!-- generated comparing v5.11.1..master -->
+
+_Dec 26, 2022_
+
+A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚙️ Several MUI Base components were converted to TypeScript by @trizotti, @leventdeniz and @danhuynhdev (#35005, #34793, #34771)
+- Many other 🐛 bug fixes abd 📚 documentation improvements.
+
+### `@mui/material@5.11.2`
+
+- &#8203;<!-- 10 -->[l10n] Add displayed rows label to `faIR` locale (#35587) @hootan-rocky
+- &#8203;<!-- 09 -->[l10n] Add Kurdish (Kurmanji) locale (#32508) @JagarYousef
+- &#8203;<!-- 06 -->[Select] Accept non-component children (#33530) @boutahlilsoufiane
+- &#8203;<!-- 05 -->[SelectInput] Update menu to use select wrapper as anchor (#34229) @EduardoSCosta
+- &#8203;<!-- 03 -->[TableCell] Fix `scope` prop to be not set when a data cell is rendered within a table head (#35559) @sai6855
+
+### `@mui/utils@5.11.2`
+
+- &#8203;<!-- 02 -->[utils] `mergedeep` deeply clones source key if it's an object (#35364) @sldk-yuri
+
+### `@mui/base@5.0.0-alpha.112`
+
+- &#8203;<!-- 16 -->[FocusTrap][base] Convert code to TypeScript (#35005) @trizotti
+- &#8203;<!-- 08 -->[Modal][base] Convert code to TypeScript (#34793) @leventdeniz
+- &#8203;<!-- 07 -->[Popper][base] Convert code to TypeScript (#34771) @danhuynhdev
+- &#8203;<!-- 04 -->[Slider] Exclude `isRtl` from Material UI's Slider props (#35564) @michaldudak
+
+### `@mui/joy@5.0.0-alpha.60`
+
+- &#8203;<!-- 15 -->[Joy] Fix radius adjustment (#35629) @siriwatknp
+- &#8203;<!-- 14 -->[Joy] Apply color inversion to components (#34602) @siriwatknp
+- &#8203;<!-- 13 -->[Joy] Improve cursor pointer and add fallback for outlined variant (#35573) @siriwatknp
+- &#8203;<!-- 12 -->[Joy] Miscellaneous fixes (#35552) @siriwatknp
+- &#8203;<!-- 11 -->[Radio][joy] Use precise dimensions for radio icon (#35548) @hbjORbj
+
+### `@mui/material-next@6.0.0-alpha.68`
+
+- &#8203;<!-- 36 -->[Material You] Update Button test & add active class name (#35497) @mnajdova
+
+### Docs
+
+- &#8203;<!-- 35 -->[docs] Fix GoogleMaps demo (#35545) @hbjORbj
+- &#8203;<!-- 25 -->[docs] Remove flow, its legacy (#35624) @oliviertassinari
+- &#8203;<!-- 24 -->[docs] Add a guide on using icon libraries with Joy UI (#35377) @siriwatknp
+- &#8203;<!-- 23 -->[docs] Clarify comment about `sortStability()` use case (#35570) @frontendlane
+- &#8203;<!-- 22 -->[docs] Improve the experimental API demos on the button page (#35560) @mnajdova
+- &#8203;<!-- 21 -->[docs] Force `light` theme mode when `activePage` is null (#35575) @LukasTy
+- &#8203;<!-- 20 -->[docs] Fix ListItem button deprecated use (#33970) @MickaelAustoni
+- &#8203;<!-- 19 -->[docs] Fix typo in `Progress` docs (#35553) @jasonsturges
+- &#8203;<!-- 18 -->[docs] Remove empty tags on the TransferList demos (#33127) @ekusiadadus
+- &#8203;<!-- 17 -->[docs][joy] Add documentation for `Stack` component (#35373) @hbjORbj
+- &#8203;<!-- 35 -->[docs][joy] Add documentation for `Grid` component (#35374) @hbjORbj
+- &#8203;<!-- 01 -->[website] Update sponsor grid (#35452) @danilo-leal
+
+### Core
+
+- &#8203;<!-- 34 -->[core] Shorthand notation to remove outline (#35623) @oliviertassinari
+- &#8203;<!-- 33 -->[core] Fix header link layout shift and clash (#35626) @oliviertassinari
+- &#8203;<!-- 32 -->[core] Hide keyboard shortcut if no hover feature (#35625) @oliviertassinari
+- &#8203;<!-- 31 -->[core] Fix confusing duplicated name in the log @oliviertassinari
+- &#8203;<!-- 30 -->[core] Fix API demos callout spacing (#35579) @oliviertassinari
+- &#8203;<!-- 29 -->[core] Fix a few title case (#35547) @oliviertassinari
+- &#8203;<!-- 28 -->[core] Cleanup mention of test-utils (#35577) @oliviertassinari
+- &#8203;<!-- 27 -->[core] Remove oudated pickers prop-type logic (#35571) @oliviertassinari
+- &#8203;<!-- 26 -->[core] Exclude documentation of Base props not used in styled libraries (#35562) @michaldudak
+
+All contributors of this release in alphabetical order: @boutahlilsoufiane, @danhuynhdev, @danilo-leal, @EduardoSCosta, @ekusiadadus, @frontendlane, @hbjORbj, @hootan-rocky, @JagarYousef, @jasonsturges, @leventdeniz, @LukasTy, @michaldudak, @MickaelAustoni, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sldk-yuri, @trizotti
+
+## 5.11.1
+
+<!-- generated comparing v5.11.0..master -->
+
+_Dec 20, 2022_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- 💅 @mnajdova added motion and shape design tokens to Material You package (#35384 and #35393).
+- Many other 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
+
+### `@mui/material@5.11.1`
+
+- [Chip] Fix hover and focus style with CSS Variables (#35502) @DimaAbr
+- [InputLabel] Enable `size` prop overrides via TypeScript module augmentation (#35460) @MickaelAustoni
+- [l10n] Change Kazakh locale name to match ISO-639-1 codes (#34664) @talgautb
+- [TextField] Fix error focus style (#35167) @42tte
+- [core] Bring `experimental_sx` back with error code (#35528) @siriwatknp
+
+### `@mui/utils@5.11.1`
+
+- [Theme] Merge components and slots props (#35477) @siriwatknp
+
+### `@mui/material-next@6.0.0-alpha.67`
+
+- [Material You] Add motion design tokens (#35384) @mnajdova
+- [Material You] Add shape design tokens (#35393) @mnajdova
+
+### `@mui/joy@5.0.0-alpha.59`
+
+- [Tooltip] Fix arrow does not appear (#35473) @siriwatknp
+- [Input] Fix autofill styles (#35056) @siriwatknp
+- [ChipDelete] Add onDelete prop to ChipDelete (#35412) @sai6855
+
+### `@mui/base@5.0.0-alpha.111`
+
+- [Button][base] Set active class when a subcomponent is clicked (#35410) @michaldudak
+- [Popper][base] Fix Tooltip Anchor Element Setter (#35469) @sydneyjodon-wk
+
+### Docs
+
+- [docs] Fixed the `Select` component `onChange` event type in the migration guide (#35509) @tzynwang
+- [docs] Add missing comma to `Providing the colors directly` section (#35507) @cassidoo
+- [docs] Add `CardMedia` example without `component="img"` prop (#35470) @lucasmfredmark
+- [docs] Fix `unstable_sxConfig` typo (#35478) @siriwatknp
+- [docs] List component introduction example default code is missing ListItemContent component (#35492) @Miigaarino
+- [website] Close our first people role @oliviertassinari
+- [website] Update product icons (#35413) @danilo-leal
+
+### Core
+
+- [test] Terminate BrowserStack after 5 minutes (#35454) @oliviertassinari
+- [test] Fix broken master branch (#35446) @oliviertassinari
+
+All contributors of this release in alphabetical order: @42tte, @cassidoo, @danilo-leal, @DimaAbr, @lucasmfredmark, @michaldudak, @MickaelAustoni, @Miigaarino, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sydneyjodon-wk, @talgautb, @tzynwang
+
 ## 5.11.0
 
 <!-- generated comparing v5.10.17..master -->

package/Chip/Chip.js

@@ -168,7 +168,7 @@ const ChipRoot = styled('div', {
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && {
     [`&.${chipClasses.focusVisible}`]: {
-      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+      backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
     }
   }, ownerState.onDelete && ownerState.color !== 'default' && {
     [`&.${chipClasses.focusVisible}`]: {
@@ -183,10 +183,10 @@ const ChipRoot = styled('div', {
   WebkitTapHighlightColor: 'transparent',
   cursor: 'pointer',
   '&:hover': {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.hoverOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
   },
   [`&.${chipClasses.focusVisible}`]: {
-    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? `rgba(${theme.vars.palette.action.selectedChannel} / calc(${theme.vars.palette.action.selectedOpacity} + ${theme.vars.palette.action.focusOpacity}))` : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   },
   '&:active': {
     boxShadow: (theme.vars || theme).shadows[1]

package/FilledInput/FilledInput.js

@@ -87,9 +87,13 @@ const FilledInputRoot = styled(InputBaseRoot, {
       // See https://github.com/mui/material-ui/issues/31766
       transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${filledInputClasses.error}:after`]: {
-      borderBottomColor: (theme.vars || theme).palette.error.main,
-      transform: 'scaleX(1)' // error is always underlined in red
+    [`&.${filledInputClasses.error}`]: {
+      '&:before, &:after': {
+        borderBottomColor: (theme.vars || theme).palette.error.main
+      },
+      '&:focus-within:after': {
+        transform: 'scaleX(1)' // error is always underlined in red
+      }
     },
 
     '&:before': {
@@ -106,7 +110,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
       pointerEvents: 'none' // Transparent to the hover style.
     },
 
-    [`&:hover:not(.${filledInputClasses.disabled}):before`]: {
+    [`&:hover:not(.${filledInputClasses.disabled}, .${filledInputClasses.error}):before`]: {
       borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`
     },
     [`&.${filledInputClasses.disabled}:before`]: {

package/Input/Input.js

@@ -70,9 +70,13 @@ const InputRoot = styled(InputBaseRoot, {
       // See https://github.com/mui/material-ui/issues/31766
       transform: 'scaleX(1) translateX(0)'
     },
-    [`&.${inputClasses.error}:after`]: {
-      borderBottomColor: (theme.vars || theme).palette.error.main,
-      transform: 'scaleX(1)' // error is always underlined in red
+    [`&.${inputClasses.error}`]: {
+      '&:before, &:after': {
+        borderBottomColor: (theme.vars || theme).palette.error.main
+      },
+      '&:focus-within:after': {
+        transform: 'scaleX(1)' // error is always underlined in red
+      }
     },
 
     '&:before': {
@@ -89,8 +93,8 @@ const InputRoot = styled(InputBaseRoot, {
       pointerEvents: 'none' // Transparent to the hover style.
     },
 
-    [`&:hover:not(.${inputClasses.disabled}):before`]: {
-      borderBottom: `2px solid ${(theme.vars || theme).palette.text.primary}`,
+    [`&:hover:not(.${inputClasses.disabled}, .${inputClasses.error}):before`]: {
+      borderBottom: `1px solid ${(theme.vars || theme).palette.text.primary}`,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
         borderBottom: `1px solid ${bottomLineColor}`

package/InputLabel/InputLabel.d.ts

@@ -1,10 +1,13 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
+import { OverridableStringUnion } from '@mui/types';
 import { InternalStandardProps as StandardProps } from '..';
 import { FormLabelProps } from '../FormLabel';
 import { Theme } from '../styles';
 import { InputLabelClasses } from './inputLabelClasses';
 
+export interface InputLabelPropsSizeOverrides {}
+
 export interface InputLabelProps extends StandardProps<FormLabelProps> {
   /**
    * The content of the component.
@@ -49,7 +52,7 @@ export interface InputLabelProps extends StandardProps<FormLabelProps> {
    * The size of the component.
    * @default 'normal'
    */
-  size?: 'small' | 'normal';
+  size?: OverridableStringUnion<'small' | 'normal', InputLabelPropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/InputLabel/InputLabel.js

@@ -197,7 +197,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
    * The size of the component.
    * @default 'normal'
    */
-  size: PropTypes.oneOf(['normal', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Popper/Popper.d.ts

@@ -33,5 +33,5 @@ export type PopperProps = Omit<PopperUnstyledProps, 'direction'> & {
  *
  * - [Popper API](https://mui.com/material-ui/api/popper/)
  */
-declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;
+declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "component" | "sx" | "ownerState" | "components" | "container" | "placement" | "disablePortal" | "modifiers" | "anchorEl" | "keepMounted" | "popperOptions" | "popperRef" | "slotProps" | "slots" | "componentsProps"> & React.RefAttributes<HTMLDivElement>>;
 export default Popper;

package/Popper/Popper.js

@@ -29,17 +29,17 @@ const PopperRoot = styled(PopperUnstyled, {
 const Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var _slots$root;
   const theme = useTheme();
-  const _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiPopper'
-    }),
-    {
+  const props = useThemeProps({
+    props: inProps,
+    name: 'MuiPopper'
+  });
+  const {
       components,
       componentsProps,
       slots,
       slotProps
-    } = _useThemeProps,
-    other = _objectWithoutPropertiesLoose(_useThemeProps, _excluded);
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction,
@@ -130,6 +130,10 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  ownerState: PropTypes.any,
   /**
    * Popper placement.
    * @default 'bottom'

package/Select/SelectInput.js

@@ -159,6 +159,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       setDisplayNode(node);
     }
   }, []);
+  const anchorElement = displayNode == null ? void 0 : displayNode.parentNode;
   React.useImperativeHandle(handleRef, () => ({
     focus: () => {
       displayRef.current.focus();
@@ -170,7 +171,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(() => {
     if (defaultOpen && openState && displayNode && !isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -209,7 +210,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       onClose(event);
     }
     if (!isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       setOpenState(open);
     }
   };
@@ -329,6 +330,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   }
   const items = childrenArray.map((child, index, arr) => {
+    var _arr$, _arr$$props, _arr$2, _arr$2$props;
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -365,7 +367,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       if (value) {
         return selected;
       }
-      const firstSelectableElement = arr.find(item => item.props.value !== undefined && item.props.disabled !== true);
+      const firstSelectableElement = arr.find(item => {
+        var _item$props;
+        return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
+      });
       if (child === firstSelectableElement) {
         return true;
       }
@@ -386,7 +391,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
         }
       },
       role: 'option',
-      selected: arr[0].props.value === undefined || arr[0].props.disabled === true ? isFirstSelectableElement() : selected,
+      selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.
@@ -423,7 +428,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
   // Avoid performing a layout computation in the render method.
   let menuMinWidth = menuMinWidthState;
   if (!autoWidth && isOpenControlled && displayNode) {
-    menuMinWidth = displayNode.clientWidth;
+    menuMinWidth = anchorElement.clientWidth;
   }
   let tabIndex;
   if (typeof tabIndexProp !== 'undefined') {
@@ -481,7 +486,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(Menu, _extends({
       id: `menu-${name || ''}`,
-      anchorEl: displayNode,
+      anchorEl: anchorElement,
       open: open,
       onClose: handleClose,
       anchorOrigin: {

package/Slider/Slider.js

@@ -620,11 +620,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * @returns {string}
    */
   getAriaValueText: PropTypes.func,
-  /**
-   * Indicates whether the theme context has rtl direction. It is set automatically.
-   * @default false
-   */
-  isRtl: PropTypes.bool,
   /**
    * Marks indicate predetermined values to which the user can move the slider.
    * If `true` the marks are spaced according the value of the `step` prop.

package/TableCell/TableCell.js

@@ -120,7 +120,11 @@ const TableCell = /*#__PURE__*/React.forwardRef(function TableCell(inProps, ref)
     component = isHeadCell ? 'th' : 'td';
   }
   let scope = scopeProp;
-  if (!scope && isHeadCell) {
+  // scope is not a valid attribute for <td/> elements.
+  // source: https://html.spec.whatwg.org/multipage/tables.html#the-td-element
+  if (component === 'td') {
+    scope = undefined;
+  } else if (!scope && isHeadCell) {
     scope = 'col';
   }
   const variant = variantProp || tablelvl2 && tablelvl2.variant;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.11.0
+/** @license MUI v5.11.2
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/Chip/Chip.js

@@ -134,7 +134,7 @@ var ChipRoot = styled('div', {
     backgroundColor: (theme.vars || theme).palette[ownerState.color].main,
     color: (theme.vars || theme).palette[ownerState.color].contrastText
   }, ownerState.onDelete && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), ownerState.onDelete && ownerState.color !== 'default' && _defineProperty({}, "&.".concat(chipClasses.focusVisible), {
     backgroundColor: (theme.vars || theme).palette[ownerState.color].dark
   }));
@@ -147,10 +147,10 @@ var ChipRoot = styled('div', {
     WebkitTapHighlightColor: 'transparent',
     cursor: 'pointer',
     '&:hover': {
-      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
+      backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.hoverOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.hoverOpacity)
     }
   }, _defineProperty(_ref15, "&.".concat(chipClasses.focusVisible), {
-    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity + theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
+    backgroundColor: theme.vars ? "rgba(".concat(theme.vars.palette.action.selectedChannel, " / calc(").concat(theme.vars.palette.action.selectedOpacity, " + ").concat(theme.vars.palette.action.focusOpacity, "))") : alpha(theme.palette.action.selected, theme.palette.action.selectedOpacity + theme.palette.action.focusOpacity)
   }), _defineProperty(_ref15, '&:active', {
     boxShadow: (theme.vars || theme).shadows[1]
   }), _ref15), ownerState.clickable && ownerState.color !== 'default' && _defineProperty({}, "&:hover, &.".concat(chipClasses.focusVisible), {

package/legacy/FilledInput/FilledInput.js

@@ -81,9 +81,13 @@ var FilledInputRoot = styled(InputBaseRoot, {
     // translateX(0) is a workaround for Safari transform scale bug
     // See https://github.com/mui/material-ui/issues/31766
     transform: 'scaleX(1) translateX(0)'
-  }), _defineProperty(_ref2, "&.".concat(filledInputClasses.error, ":after"), {
-    borderBottomColor: (theme.vars || theme).palette.error.main,
-    transform: 'scaleX(1)' // error is always underlined in red
+  }), _defineProperty(_ref2, "&.".concat(filledInputClasses.error), {
+    '&:before, &:after': {
+      borderBottomColor: (theme.vars || theme).palette.error.main
+    },
+    '&:focus-within:after': {
+      transform: 'scaleX(1)' // error is always underlined in red
+    }
   }), _defineProperty(_ref2, '&:before', {
     borderBottom: "1px solid ".concat(theme.vars ? "rgba(".concat(theme.vars.palette.common.onBackgroundChannel, " / ").concat(theme.vars.opacity.inputUnderline, ")") : bottomLineColor),
     left: 0,
@@ -96,7 +100,7 @@ var FilledInputRoot = styled(InputBaseRoot, {
       duration: theme.transitions.duration.shorter
     }),
     pointerEvents: 'none' // Transparent to the hover style.
-  }), _defineProperty(_ref2, "&:hover:not(.".concat(filledInputClasses.disabled, "):before"), {
+  }), _defineProperty(_ref2, "&:hover:not(.".concat(filledInputClasses.disabled, ", .").concat(filledInputClasses.error, "):before"), {
     borderBottom: "1px solid ".concat((theme.vars || theme).palette.text.primary)
   }), _defineProperty(_ref2, "&.".concat(filledInputClasses.disabled, ":before"), {
     borderBottomStyle: 'dotted'

package/legacy/Input/Input.js

@@ -67,9 +67,13 @@ var InputRoot = styled(InputBaseRoot, {
     // translateX(0) is a workaround for Safari transform scale bug
     // See https://github.com/mui/material-ui/issues/31766
     transform: 'scaleX(1) translateX(0)'
-  }), _defineProperty(_ref2, "&.".concat(inputClasses.error, ":after"), {
-    borderBottomColor: (theme.vars || theme).palette.error.main,
-    transform: 'scaleX(1)' // error is always underlined in red
+  }), _defineProperty(_ref2, "&.".concat(inputClasses.error), {
+    '&:before, &:after': {
+      borderBottomColor: (theme.vars || theme).palette.error.main
+    },
+    '&:focus-within:after': {
+      transform: 'scaleX(1)' // error is always underlined in red
+    }
   }), _defineProperty(_ref2, '&:before', {
     borderBottom: "1px solid ".concat(bottomLineColor),
     left: 0,
@@ -82,8 +86,8 @@ var InputRoot = styled(InputBaseRoot, {
       duration: theme.transitions.duration.shorter
     }),
     pointerEvents: 'none' // Transparent to the hover style.
-  }), _defineProperty(_ref2, "&:hover:not(.".concat(inputClasses.disabled, "):before"), {
-    borderBottom: "2px solid ".concat((theme.vars || theme).palette.text.primary),
+  }), _defineProperty(_ref2, "&:hover:not(.".concat(inputClasses.disabled, ", .").concat(inputClasses.error, "):before"), {
+    borderBottom: "1px solid ".concat((theme.vars || theme).palette.text.primary),
     // Reset on touch devices, it doesn't add specificity
     '@media (hover: none)': {
       borderBottom: "1px solid ".concat(bottomLineColor)

package/legacy/InputLabel/InputLabel.js

@@ -195,7 +195,7 @@ process.env.NODE_ENV !== "production" ? InputLabel.propTypes /* remove-proptypes
    * The size of the component.
    * @default 'normal'
    */
-  size: PropTypes.oneOf(['normal', 'small']),
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['normal', 'small']), PropTypes.string]),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/legacy/Popper/Popper.js

@@ -30,15 +30,15 @@ var PopperRoot = styled(PopperUnstyled, {
 var Popper = /*#__PURE__*/React.forwardRef(function Popper(inProps, ref) {
   var _slots$root;
   var theme = useTheme();
-  var _useThemeProps = useThemeProps({
-      props: inProps,
-      name: 'MuiPopper'
-    }),
-    components = _useThemeProps.components,
-    componentsProps = _useThemeProps.componentsProps,
-    slots = _useThemeProps.slots,
-    slotProps = _useThemeProps.slotProps,
-    other = _objectWithoutProperties(_useThemeProps, ["components", "componentsProps", "slots", "slotProps"]);
+  var props = useThemeProps({
+    props: inProps,
+    name: 'MuiPopper'
+  });
+  var components = props.components,
+    componentsProps = props.componentsProps,
+    slots = props.slots,
+    slotProps = props.slotProps,
+    other = _objectWithoutProperties(props, ["components", "componentsProps", "slots", "slotProps"]);
   var RootComponent = (_slots$root = slots == null ? void 0 : slots.root) != null ? _slots$root : components == null ? void 0 : components.Root;
   return /*#__PURE__*/_jsx(PopperRoot, _extends({
     direction: theme == null ? void 0 : theme.direction,
@@ -129,6 +129,10 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  ownerState: PropTypes.any,
   /**
    * Popper placement.
    * @default 'bottom'

package/legacy/Select/SelectInput.js

@@ -160,6 +160,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       setDisplayNode(node);
     }
   }, []);
+  var anchorElement = displayNode == null ? void 0 : displayNode.parentNode;
   React.useImperativeHandle(handleRef, function () {
     return {
       focus: function focus() {
@@ -173,7 +174,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
   // Resize menu on `defaultOpen` automatic toggle.
   React.useEffect(function () {
     if (defaultOpen && openState && displayNode && !isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       displayRef.current.focus();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -212,7 +213,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       onClose(event);
     }
     if (!isOpenControlled) {
-      setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
+      setMenuMinWidthState(autoWidth ? null : anchorElement.clientWidth);
       setOpenState(open);
     }
   };
@@ -336,6 +337,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   }
   var items = childrenArray.map(function (child, index, arr) {
+    var _arr$, _arr$$props, _arr$2, _arr$2$props;
     if (! /*#__PURE__*/React.isValidElement(child)) {
       return null;
     }
@@ -375,7 +377,8 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         return selected;
       }
       var firstSelectableElement = arr.find(function (item) {
-        return item.props.value !== undefined && item.props.disabled !== true;
+        var _item$props;
+        return (item == null ? void 0 : (_item$props = item.props) == null ? void 0 : _item$props.value) !== undefined && item.props.disabled !== true;
       });
       if (child === firstSelectableElement) {
         return true;
@@ -397,7 +400,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         }
       },
       role: 'option',
-      selected: arr[0].props.value === undefined || arr[0].props.disabled === true ? isFirstSelectableElement() : selected,
+      selected: ((_arr$ = arr[0]) == null ? void 0 : (_arr$$props = _arr$.props) == null ? void 0 : _arr$$props.value) === undefined || ((_arr$2 = arr[0]) == null ? void 0 : (_arr$2$props = _arr$2.props) == null ? void 0 : _arr$2$props.disabled) === true ? isFirstSelectableElement() : selected,
       value: undefined,
       // The value is most likely not a valid HTML attribute.
       'data-value': child.props.value // Instead, we provide it as a data attribute.
@@ -440,7 +443,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
   // Avoid performing a layout computation in the render method.
   var menuMinWidth = menuMinWidthState;
   if (!autoWidth && isOpenControlled && displayNode) {
-    menuMinWidth = displayNode.clientWidth;
+    menuMinWidth = anchorElement.clientWidth;
   }
   var tabIndex;
   if (typeof tabIndexProp !== 'undefined') {
@@ -498,7 +501,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
       ownerState: ownerState
     }), /*#__PURE__*/_jsx(Menu, _extends({
       id: "menu-".concat(name || ''),
-      anchorEl: displayNode,
+      anchorEl: anchorElement,
       open: open,
       onClose: handleClose,
       anchorOrigin: {

package/legacy/Slider/Slider.js

@@ -624,11 +624,6 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes /* remove-proptypes */
    * @returns {string}
    */
   getAriaValueText: PropTypes.func,
-  /**
-   * Indicates whether the theme context has rtl direction. It is set automatically.
-   * @default false
-   */
-  isRtl: PropTypes.bool,
   /**
    * Marks indicate predetermined values to which the user can move the slider.
    * If `true` the marks are spaced according the value of the `step` prop.