@mui/material 5.2.8 → 5.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (171) hide show
  1. package/Accordion/accordionClasses.d.ts +18 -18
  2. package/AccordionActions/accordionActionsClasses.d.ts +10 -10
  3. package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
  4. package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
  5. package/Alert/alertClasses.d.ts +44 -44
  6. package/AlertTitle/alertTitleClasses.d.ts +8 -8
  7. package/AppBar/appBarClasses.d.ts +28 -28
  8. package/Autocomplete/Autocomplete.d.ts +2 -0
  9. package/Autocomplete/Autocomplete.js +8 -6
  10. package/Autocomplete/autocompleteClasses.d.ts +54 -54
  11. package/Avatar/avatarClasses.d.ts +20 -20
  12. package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
  13. package/Badge/Badge.js +2 -6
  14. package/BottomNavigation/BottomNavigation.js +0 -0
  15. package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
  16. package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
  17. package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
  18. package/Button/buttonClasses.d.ts +76 -76
  19. package/ButtonBase/buttonBaseClasses.d.ts +12 -12
  20. package/ButtonBase/touchRippleClasses.d.ts +20 -20
  21. package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
  22. package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
  23. package/CHANGELOG.md +73 -0
  24. package/Card/cardClasses.d.ts +8 -8
  25. package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
  26. package/CardActions/cardActionsClasses.d.ts +10 -10
  27. package/CardContent/cardContentClasses.d.ts +8 -8
  28. package/CardHeader/cardHeaderClasses.d.ts +18 -18
  29. package/CardMedia/cardMediaClasses.d.ts +12 -12
  30. package/Checkbox/checkboxClasses.d.ts +18 -18
  31. package/Chip/chipClasses.d.ts +80 -80
  32. package/CircularProgress/circularProgressClasses.d.ts +26 -26
  33. package/ClickAwayListener/index.d.ts +2 -2
  34. package/Collapse/collapseClasses.d.ts +18 -18
  35. package/Container/containerClasses.d.ts +22 -22
  36. package/Dialog/DialogContext.d.ts +6 -6
  37. package/Dialog/dialogClasses.d.ts +36 -36
  38. package/DialogActions/dialogActionsClasses.d.ts +10 -10
  39. package/DialogContent/dialogContentClasses.d.ts +10 -10
  40. package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
  41. package/DialogTitle/dialogTitleClasses.d.ts +8 -8
  42. package/Divider/dividerClasses.d.ts +34 -34
  43. package/Drawer/drawerClasses.d.ts +30 -30
  44. package/Fab/fabClasses.d.ts +26 -26
  45. package/FilledInput/filledInputClasses.d.ts +40 -40
  46. package/FormControl/formControlClasses.d.ts +14 -14
  47. package/FormControlLabel/formControlLabelClasses.d.ts +18 -18
  48. package/FormGroup/formGroupClasses.d.ts +10 -10
  49. package/FormHelperText/formHelperTextClasses.d.ts +22 -22
  50. package/FormLabel/formLabelClasses.d.ts +22 -22
  51. package/Grid/gridClasses.d.ts +48 -48
  52. package/Icon/iconClasses.d.ts +24 -24
  53. package/IconButton/iconButtonClasses.d.ts +26 -26
  54. package/ImageList/imageListClasses.d.ts +16 -16
  55. package/ImageListItem/imageListItemClasses.d.ts +18 -18
  56. package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
  57. package/Input/inputClasses.d.ts +34 -34
  58. package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
  59. package/InputBase/inputBaseClasses.d.ts +44 -44
  60. package/InputLabel/inputLabelClasses.d.ts +32 -32
  61. package/LinearProgress/linearProgressClasses.d.ts +42 -42
  62. package/Link/linkClasses.d.ts +18 -18
  63. package/List/listClasses.d.ts +14 -14
  64. package/ListItem/listItemClasses.d.ts +30 -30
  65. package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
  66. package/ListItemButton/listItemButtonClasses.d.ts +22 -22
  67. package/ListItemIcon/listItemIconClasses.d.ts +10 -10
  68. package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
  69. package/ListItemText/listItemTextClasses.d.ts +18 -18
  70. package/ListSubheader/listSubheaderClasses.d.ts +18 -18
  71. package/Menu/menuClasses.d.ts +12 -12
  72. package/MenuItem/menuItemClasses.d.ts +20 -20
  73. package/MobileStepper/mobileStepperClasses.d.ts +22 -22
  74. package/NativeSelect/nativeSelectClasses.d.ts +32 -32
  75. package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
  76. package/Pagination/paginationClasses.d.ts +14 -14
  77. package/PaginationItem/paginationItemClasses.d.ts +42 -42
  78. package/Paper/paperClasses.d.ts +39 -39
  79. package/Popover/popoverClasses.d.ts +10 -10
  80. package/Popper/Popper.d.ts +17 -17
  81. package/README.md +3 -3
  82. package/Radio/radioClasses.d.ts +16 -16
  83. package/RadioGroup/RadioGroupContext.d.ts +11 -11
  84. package/RadioGroup/useRadioGroup.d.ts +4 -4
  85. package/Rating/ratingClasses.d.ts +40 -40
  86. package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
  87. package/Select/Select.d.ts +9 -1
  88. package/Select/Select.js +10 -1
  89. package/Select/SelectInput.d.ts +1 -0
  90. package/Select/SelectInput.js +25 -4
  91. package/Select/selectClasses.d.ts +30 -30
  92. package/Skeleton/skeletonClasses.d.ts +24 -24
  93. package/Slider/Slider.js +109 -54
  94. package/Snackbar/snackbarClasses.d.ts +20 -20
  95. package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
  96. package/SpeedDial/speedDialClasses.d.ts +22 -22
  97. package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
  98. package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
  99. package/Step/stepClasses.d.ts +16 -16
  100. package/StepButton/stepButtonClasses.d.ts +14 -14
  101. package/StepConnector/stepConnectorClasses.d.ts +26 -26
  102. package/StepContent/stepContentClasses.d.ts +12 -12
  103. package/StepIcon/stepIconClasses.d.ts +16 -16
  104. package/StepLabel/stepLabelClasses.d.ts +28 -28
  105. package/Stepper/stepperClasses.d.ts +14 -14
  106. package/SvgIcon/svgIconClasses.d.ts +24 -24
  107. package/Switch/switchClasses.d.ts +32 -32
  108. package/Tab/tabClasses.d.ts +26 -26
  109. package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
  110. package/Table/tableClasses.d.ts +10 -10
  111. package/TableBody/tableBodyClasses.d.ts +8 -8
  112. package/TableCell/tableCellClasses.d.ts +32 -32
  113. package/TableContainer/tableContainerClasses.d.ts +8 -8
  114. package/TableFooter/tableFooterClasses.d.ts +8 -8
  115. package/TableHead/tableHeadClasses.d.ts +8 -8
  116. package/TablePagination/tablePaginationClasses.d.ts +28 -28
  117. package/TableRow/tableRowClasses.d.ts +16 -16
  118. package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
  119. package/Tabs/tabsClasses.d.ts +32 -32
  120. package/TextField/textFieldClasses.d.ts +8 -8
  121. package/ToggleButton/toggleButtonClasses.d.ts +24 -24
  122. package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
  123. package/Toolbar/toolbarClasses.d.ts +14 -14
  124. package/Tooltip/tooltipClasses.d.ts +30 -30
  125. package/Typography/typographyClasses.d.ts +50 -50
  126. package/darkScrollbar/index.d.ts +28 -28
  127. package/index.js +1 -1
  128. package/internal/switchBaseClasses.d.ts +12 -12
  129. package/legacy/Autocomplete/Autocomplete.js +8 -6
  130. package/legacy/Badge/Badge.js +2 -6
  131. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  132. package/legacy/Select/Select.js +11 -1
  133. package/legacy/Select/SelectInput.js +29 -7
  134. package/legacy/Slider/Slider.js +110 -55
  135. package/legacy/index.js +1 -1
  136. package/legacy/utils/shouldSpreadAdditionalProps.js +7 -0
  137. package/locale/index.d.ts +68 -68
  138. package/modern/Autocomplete/Autocomplete.js +7 -5
  139. package/modern/Badge/Badge.js +2 -6
  140. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  141. package/modern/Select/Select.js +10 -1
  142. package/modern/Select/SelectInput.js +25 -4
  143. package/modern/Slider/Slider.js +109 -54
  144. package/modern/index.js +1 -1
  145. package/modern/utils/shouldSpreadAdditionalProps.js +7 -0
  146. package/node/Autocomplete/Autocomplete.js +8 -6
  147. package/node/Badge/Badge.js +4 -7
  148. package/node/BottomNavigation/BottomNavigation.js +0 -0
  149. package/node/Select/Select.js +10 -1
  150. package/node/Select/SelectInput.js +25 -4
  151. package/node/Slider/Slider.js +95 -46
  152. package/node/index.js +1 -1
  153. package/node/utils/shouldSpreadAdditionalProps.js +15 -0
  154. package/package.json +7 -7
  155. package/styles/components.d.ts +452 -113
  156. package/styles/createTheme.d.ts +12 -6
  157. package/styles/overrides.d.ts +16 -4
  158. package/styles/useThemeProps.d.ts +2 -1
  159. package/transitions/index.d.ts +1 -1
  160. package/transitions/transition.d.ts +13 -13
  161. package/transitions/utils.d.ts +23 -23
  162. package/umd/material-ui.development.js +464 -255
  163. package/umd/material-ui.production.min.js +21 -21
  164. package/useMediaQuery/useMediaQuery.d.ts +27 -27
  165. package/useTouchRipple/index.d.ts +1 -1
  166. package/useTouchRipple/useTouchRipple.d.ts +28 -28
  167. package/utils/getScrollbarSize.d.ts +2 -2
  168. package/utils/ownerDocument.d.ts +2 -2
  169. package/utils/ownerWindow.d.ts +2 -2
  170. package/utils/setRef.d.ts +2 -2
  171. package/utils/shouldSpreadAdditionalProps.js +7 -0
@@ -1,17 +1,17 @@
1
- import * as React from 'react';
2
- import { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
3
- export declare type PopperProps = Omit<PopperUnstyledProps, 'direction'>;
4
- /**
5
- *
6
- * Demos:
7
- *
8
- * - [Autocomplete](https://mui.com/components/autocomplete/)
9
- * - [Menus](https://mui.com/components/menus/)
10
- * - [Popper](https://mui.com/components/popper/)
11
- *
12
- * API:
13
- *
14
- * - [Popper API](https://mui.com/api/popper/)
15
- */
16
- declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "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" | "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" | "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" | "container" | "disablePortal" | "keepMounted" | "placement" | "anchorEl" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
17
- export default Popper;
1
+ import * as React from 'react';
2
+ import { PopperUnstyledProps } from '@mui/base/PopperUnstyled';
3
+ export declare type PopperProps = Omit<PopperUnstyledProps, 'direction'>;
4
+ /**
5
+ *
6
+ * Demos:
7
+ *
8
+ * - [Autocomplete](https://mui.com/components/autocomplete/)
9
+ * - [Menus](https://mui.com/components/menus/)
10
+ * - [Popper](https://mui.com/components/popper/)
11
+ *
12
+ * API:
13
+ *
14
+ * - [Popper API](https://mui.com/api/popper/)
15
+ */
16
+ declare const Popper: React.ForwardRefExoticComponent<Pick<PopperProps, "hidden" | "color" | "style" | "open" | "translate" | "transition" | "slot" | "title" | "children" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "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" | "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" | "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" | "container" | "disablePortal" | "keepMounted" | "placement" | "anchorEl" | "modifiers" | "popperOptions" | "popperRef"> & React.RefAttributes<HTMLDivElement>>;
17
+ export default Popper;
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  <!-- markdownlint-disable-next-line -->
2
2
  <p align="center">
3
- <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="https://mui.com/static/logo.svg" alt="MUI logo"></a></p>
3
+ <a href="https://mui.com/" rel="noopener" target="_blank"><img width="150" src="https://mui.com/static/logo.svg" alt="MUI logo"></a>
4
4
  </p>
5
5
 
6
6
  <h1 align="center">MUI</h1>
@@ -15,7 +15,7 @@ Quickly build beautiful [React](https://reactjs.org/) apps. MUI is a simple and
15
15
  [![npm downloads](https://img.shields.io/npm/dm/@mui/material.svg)](https://www.npmjs.com/package/@mui/material)
16
16
  [![CircleCI](https://circleci.com/gh/mui-org/material-ui/tree/master.svg?style=shield)](https://app.circleci.com/pipelines/github/mui-org/material-ui?branch=master)
17
17
  [![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/master.svg)](https://codecov.io/gh/mui-org/material-ui/branch/master)
18
- [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI)
18
+ [![Follow on Twitter](https://img.shields.io/twitter/follow/MUI_hq.svg?label=follow+MUI)](https://twitter.com/MUI_hq)
19
19
  [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui-org/material-ui/issues/27062)
20
20
  [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](https://isitmaintained.com/project/mui-org/material-ui 'Average time to resolve an issue')
21
21
  [![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.mui.com/project/material-ui-docs)
@@ -54,7 +54,7 @@ Please note that `@next` will only point to pre-releases; to get the latest stab
54
54
 
55
55
  <p align="center">
56
56
  <a href="https://octopus.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/1287123?s=256" alt="octopus" title="Repeatable, reliable deployments" loading="lazy" /></a>
57
- <a href="https://www.doit-intl.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/8424863?s=256" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
57
+ <a href="https://www.doit-intl.com/flexsave/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://avatars3.githubusercontent.com/u/8424863?s=256" alt="doit-intl" title="Management Platform for Google Cloud and AWS" loading="lazy" /></a>
58
58
  <a href="https://www.aptugo.com/?utm_source=MUI&utm_medium=referral&utm_content=readme" rel="noopener sponsored" target="_blank"><img height="128" width="128" src="https://www.aptugo.com/img/favicon.png" alt="aptugo" title="Augmented Software Development Platform" loading="lazy" /></a>
59
59
  </p>
60
60
 
@@ -1,16 +1,16 @@
1
- export interface RadioClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** State class applied to the root element if `checked={true}`. */
5
- checked: string;
6
- /** State class applied to the root element if `disabled={true}`. */
7
- disabled: string;
8
- /** Styles applied to the root element if `color="primary"`. */
9
- colorPrimary: string;
10
- /** Styles applied to the root element if `color="secondary"`. */
11
- colorSecondary: string;
12
- }
13
- export declare type RadioClassKey = keyof RadioClasses;
14
- export declare function getRadioUtilityClass(slot: string): string;
15
- declare const radioClasses: RadioClasses;
16
- export default radioClasses;
1
+ export interface RadioClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** State class applied to the root element if `checked={true}`. */
5
+ checked: string;
6
+ /** State class applied to the root element if `disabled={true}`. */
7
+ disabled: string;
8
+ /** Styles applied to the root element if `color="primary"`. */
9
+ colorPrimary: string;
10
+ /** Styles applied to the root element if `color="secondary"`. */
11
+ colorSecondary: string;
12
+ }
13
+ export declare type RadioClassKey = keyof RadioClasses;
14
+ export declare function getRadioUtilityClass(slot: string): string;
15
+ declare const radioClasses: RadioClasses;
16
+ export default radioClasses;
@@ -1,11 +1,11 @@
1
- import * as React from 'react';
2
- export interface RadioGroupContextValue {
3
- name: string | undefined;
4
- onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
5
- value: any;
6
- }
7
- /**
8
- * @ignore - internal component.
9
- */
10
- declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
11
- export default RadioGroupContext;
1
+ import * as React from 'react';
2
+ export interface RadioGroupContextValue {
3
+ name: string | undefined;
4
+ onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
5
+ value: any;
6
+ }
7
+ /**
8
+ * @ignore - internal component.
9
+ */
10
+ declare const RadioGroupContext: React.Context<RadioGroupContextValue | undefined>;
11
+ export default RadioGroupContext;
@@ -1,4 +1,4 @@
1
- import { RadioGroupContextValue } from './RadioGroupContext';
2
- export interface RadioGroupState extends RadioGroupContextValue {
3
- }
4
- export default function useRadioGroup(): RadioGroupState | undefined;
1
+ import { RadioGroupContextValue } from './RadioGroupContext';
2
+ export interface RadioGroupState extends RadioGroupContextValue {
3
+ }
4
+ export default function useRadioGroup(): RadioGroupState | undefined;
@@ -1,40 +1,40 @@
1
- export interface RatingClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `size="small"`. */
5
- sizeSmall: string;
6
- /** Styles applied to the root element if `size="medium"`. */
7
- sizeMedium: string;
8
- /** Styles applied to the root element if `size="large"`. */
9
- sizeLarge: string;
10
- /** Styles applied to the root element if `readOnly={true}`. */
11
- readOnly: string;
12
- /** State class applied to the root element if `disabled={true}`. */
13
- disabled: string;
14
- /** State class applied to the root element if keyboard focused. */
15
- focusVisible: string;
16
- /** Visually hide an element. */
17
- visuallyHidden: string;
18
- /** Styles applied to the label elements. */
19
- label: string;
20
- /** Styles applied to the label of the "no value" input when it is active. */
21
- labelEmptyValueActive: string;
22
- /** Styles applied to the icon wrapping elements. */
23
- icon: string;
24
- /** Styles applied to the icon wrapping elements when empty. */
25
- iconEmpty: string;
26
- /** Styles applied to the icon wrapping elements when filled. */
27
- iconFilled: string;
28
- /** Styles applied to the icon wrapping elements when hover. */
29
- iconHover: string;
30
- /** Styles applied to the icon wrapping elements when focus. */
31
- iconFocus: string;
32
- /** Styles applied to the icon wrapping elements when active. */
33
- iconActive: string;
34
- /** Styles applied to the icon wrapping elements when decimals are necessary. */
35
- decimal: string;
36
- }
37
- export declare type RatingClassKey = keyof RatingClasses;
38
- export declare function getRatingUtilityClass(slot: string): string;
39
- declare const ratingClasses: RatingClasses;
40
- export default ratingClasses;
1
+ export interface RatingClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `size="small"`. */
5
+ sizeSmall: string;
6
+ /** Styles applied to the root element if `size="medium"`. */
7
+ sizeMedium: string;
8
+ /** Styles applied to the root element if `size="large"`. */
9
+ sizeLarge: string;
10
+ /** Styles applied to the root element if `readOnly={true}`. */
11
+ readOnly: string;
12
+ /** State class applied to the root element if `disabled={true}`. */
13
+ disabled: string;
14
+ /** State class applied to the root element if keyboard focused. */
15
+ focusVisible: string;
16
+ /** Visually hide an element. */
17
+ visuallyHidden: string;
18
+ /** Styles applied to the label elements. */
19
+ label: string;
20
+ /** Styles applied to the label of the "no value" input when it is active. */
21
+ labelEmptyValueActive: string;
22
+ /** Styles applied to the icon wrapping elements. */
23
+ icon: string;
24
+ /** Styles applied to the icon wrapping elements when empty. */
25
+ iconEmpty: string;
26
+ /** Styles applied to the icon wrapping elements when filled. */
27
+ iconFilled: string;
28
+ /** Styles applied to the icon wrapping elements when hover. */
29
+ iconHover: string;
30
+ /** Styles applied to the icon wrapping elements when focus. */
31
+ iconFocus: string;
32
+ /** Styles applied to the icon wrapping elements when active. */
33
+ iconActive: string;
34
+ /** Styles applied to the icon wrapping elements when decimals are necessary. */
35
+ decimal: string;
36
+ }
37
+ export declare type RatingClassKey = keyof RatingClasses;
38
+ export declare function getRatingUtilityClass(slot: string): string;
39
+ declare const ratingClasses: RatingClasses;
40
+ export default ratingClasses;
@@ -1,8 +1,8 @@
1
- export interface ScopedCssBaselineClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- }
5
- export declare type ScopedCssBaselineClassKey = keyof ScopedCssBaselineClasses;
6
- export declare function getScopedCssBaselineUtilityClass(slot: string): string;
7
- declare const scopedCssBaselineClasses: Record<"root", string>;
8
- export default scopedCssBaselineClasses;
1
+ export interface ScopedCssBaselineClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ }
5
+ export declare type ScopedCssBaselineClassKey = keyof ScopedCssBaselineClasses;
6
+ export declare function getScopedCssBaselineUtilityClass(slot: string): string;
7
+ declare const scopedCssBaselineClasses: Record<"root", string>;
8
+ export default scopedCssBaselineClasses;
@@ -29,6 +29,12 @@ export interface SelectProps<T = unknown>
29
29
  * @default {}
30
30
  */
31
31
  classes?: Partial<SelectClasses>;
32
+ /**
33
+ * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
34
+ * You can only use it when the `native` prop is `false` (default).
35
+ * @default false
36
+ */
37
+ defaultOpen?: boolean;
32
38
  /**
33
39
  * The default value. Use when the component is not controlled.
34
40
  */
@@ -155,6 +161,8 @@ export interface SelectProps<T = unknown>
155
161
  * - [Select API](https://mui.com/api/select/)
156
162
  * - inherits [OutlinedInput API](https://mui.com/api/outlined-input/)
157
163
  */
158
- declare const Select: (<T>(props: SelectProps<T>) => JSX.Element) & { muiName: string };
164
+ declare const Select: (<T>(props: SelectProps<T>) => JSX.Element) & {
165
+ muiName: string;
166
+ };
159
167
 
160
168
  export default Select;
package/Select/Select.js CHANGED
@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
3
3
 
4
4
  var _Input, _FilledInput;
5
5
 
6
- const _excluded = ["autoWidth", "children", "classes", "className", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
6
+ const _excluded = ["autoWidth", "children", "classes", "className", "defaultOpen", "displayEmpty", "IconComponent", "id", "input", "inputProps", "label", "labelId", "MenuProps", "multiple", "native", "onClose", "onOpen", "open", "renderValue", "SelectDisplayProps", "variant"];
7
7
  import * as React from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import clsx from 'clsx';
@@ -38,6 +38,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
38
38
  children,
39
39
  classes: classesProp = {},
40
40
  className,
41
+ defaultOpen = false,
41
42
  displayEmpty = false,
42
43
  IconComponent = ArrowDropDownIcon,
43
44
  id,
@@ -94,6 +95,7 @@ const Select = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
94
95
  id
95
96
  } : {
96
97
  autoWidth,
98
+ defaultOpen,
97
99
  displayEmpty,
98
100
  labelId,
99
101
  MenuProps,
@@ -148,6 +150,13 @@ process.env.NODE_ENV !== "production" ? Select.propTypes
148
150
  */
149
151
  className: PropTypes.string,
150
152
 
153
+ /**
154
+ * If `true`, the component is initially open. Use when the component open state is not controlled (i.e. the `open` prop is not defined).
155
+ * You can only use it when the `native` prop is `false` (default).
156
+ * @default false
157
+ */
158
+ defaultOpen: PropTypes.bool,
159
+
151
160
  /**
152
161
  * The default value. Use when the component is not controlled.
153
162
  */
@@ -15,6 +15,7 @@ export type SelectChangeEvent<T = string> =
15
15
  export interface SelectInputProps<T = unknown> {
16
16
  autoFocus?: boolean;
17
17
  autoWidth: boolean;
18
+ defaultOpen?: boolean;
18
19
  disabled?: boolean;
19
20
  IconComponent?: React.ElementType;
20
21
  inputRef?: (
@@ -1,7 +1,7 @@
1
1
  import _extends from "@babel/runtime/helpers/esm/extends";
2
2
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
3
3
  import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
4
- const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
4
+ const _excluded = ["aria-describedby", "aria-label", "autoFocus", "autoWidth", "children", "className", "defaultOpen", "defaultValue", "disabled", "displayEmpty", "IconComponent", "inputRef", "labelId", "MenuProps", "multiple", "name", "onBlur", "onChange", "onClose", "onFocus", "onOpen", "open", "readOnly", "renderValue", "SelectDisplayProps", "tabIndex", "type", "value", "variant"];
5
5
  import * as React from 'react';
6
6
  import { isFragment } from 'react-is';
7
7
  import PropTypes from 'prop-types';
@@ -113,6 +113,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
113
113
  autoWidth,
114
114
  children,
115
115
  className,
116
+ defaultOpen,
116
117
  defaultValue,
117
118
  disabled,
118
119
  displayEmpty,
@@ -142,6 +143,11 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
142
143
  default: defaultValue,
143
144
  name: 'Select'
144
145
  });
146
+ const [openState, setOpenState] = useControlled({
147
+ controlled: openProp,
148
+ default: defaultOpen,
149
+ name: 'Select'
150
+ });
145
151
  const inputRef = React.useRef(null);
146
152
  const displayRef = React.useRef(null);
147
153
  const [displayNode, setDisplayNode] = React.useState(null);
@@ -149,7 +155,6 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
149
155
  current: isOpenControlled
150
156
  } = React.useRef(openProp != null);
151
157
  const [menuMinWidthState, setMenuMinWidthState] = React.useState();
152
- const [openState, setOpenState] = React.useState(false);
153
158
  const handleRef = useForkRef(ref, inputRefProp);
154
159
  const handleDisplayRef = React.useCallback(node => {
155
160
  displayRef.current = node;
@@ -164,7 +169,17 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
164
169
  },
165
170
  node: inputRef.current,
166
171
  value
167
- }), [value]);
172
+ }), [value]); // Resize menu on `defaultOpen` automatic toggle.
173
+
174
+ React.useEffect(() => {
175
+ if (defaultOpen && openState && displayNode && !isOpenControlled) {
176
+ setMenuMinWidthState(autoWidth ? null : displayNode.clientWidth);
177
+ displayRef.current.focus();
178
+ } // eslint-disable-next-line react-hooks/exhaustive-deps
179
+
180
+ }, [displayNode, autoWidth]); // `isOpenControlled` is ignored because the component should never switch between controlled and uncontrolled modes.
181
+ // `defaultOpen` and `openState` are ignored to avoid unnecessary callbacks.
182
+
168
183
  React.useEffect(() => {
169
184
  if (autoFocus) {
170
185
  displayRef.current.focus();
@@ -300,7 +315,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
300
315
  }
301
316
  };
302
317
 
303
- const open = displayNode !== null && (isOpenControlled ? openProp : openState);
318
+ const open = displayNode !== null && openState;
304
319
 
305
320
  const handleBlur = event => {
306
321
  // if open event.stopImmediatePropagation
@@ -559,6 +574,12 @@ process.env.NODE_ENV !== "production" ? SelectInput.propTypes = {
559
574
  */
560
575
  className: PropTypes.string,
561
576
 
577
+ /**
578
+ * If `true`, the component is toggled on mount. Use when the component open state is not controlled.
579
+ * You can only use it when the `native` prop is `false` (default).
580
+ */
581
+ defaultOpen: PropTypes.bool,
582
+
562
583
  /**
563
584
  * The default value. Use when the component is not controlled.
564
585
  */
@@ -1,30 +1,30 @@
1
- export interface SelectClasses {
2
- /** Styles applied to the select component `select` class. */
3
- select: string;
4
- /** Styles applied to the select component if `multiple={true}`. */
5
- multiple: string;
6
- /** Styles applied to the select component if `variant="filled"`. */
7
- filled: string;
8
- /** Styles applied to the select component if `variant="outlined"`. */
9
- outlined: string;
10
- /** Styles applied to the select component if `variant="standard"`. */
11
- standard: string;
12
- /** State class applied to the select component `disabled` class. */
13
- disabled: string;
14
- /** Styles applied to the icon component. */
15
- icon: string;
16
- /** Styles applied to the icon component if the popup is open. */
17
- iconOpen: string;
18
- /** Styles applied to the icon component if `variant="filled"`. */
19
- iconFilled: string;
20
- /** Styles applied to the icon component if `variant="outlined"`. */
21
- iconOutlined: string;
22
- /** Styles applied to the icon component if `variant="standard"`. */
23
- iconStandard: string;
24
- /** Styles applied to the underlying native input component. */
25
- nativeInput: string;
26
- }
27
- export declare type SelectClassKey = keyof SelectClasses;
28
- export declare function getSelectUtilityClasses(slot: string): string;
29
- declare const selectClasses: SelectClasses;
30
- export default selectClasses;
1
+ export interface SelectClasses {
2
+ /** Styles applied to the select component `select` class. */
3
+ select: string;
4
+ /** Styles applied to the select component if `multiple={true}`. */
5
+ multiple: string;
6
+ /** Styles applied to the select component if `variant="filled"`. */
7
+ filled: string;
8
+ /** Styles applied to the select component if `variant="outlined"`. */
9
+ outlined: string;
10
+ /** Styles applied to the select component if `variant="standard"`. */
11
+ standard: string;
12
+ /** State class applied to the select component `disabled` class. */
13
+ disabled: string;
14
+ /** Styles applied to the icon component. */
15
+ icon: string;
16
+ /** Styles applied to the icon component if the popup is open. */
17
+ iconOpen: string;
18
+ /** Styles applied to the icon component if `variant="filled"`. */
19
+ iconFilled: string;
20
+ /** Styles applied to the icon component if `variant="outlined"`. */
21
+ iconOutlined: string;
22
+ /** Styles applied to the icon component if `variant="standard"`. */
23
+ iconStandard: string;
24
+ /** Styles applied to the underlying native input component. */
25
+ nativeInput: string;
26
+ }
27
+ export declare type SelectClassKey = keyof SelectClasses;
28
+ export declare function getSelectUtilityClasses(slot: string): string;
29
+ declare const selectClasses: SelectClasses;
30
+ export default selectClasses;
@@ -1,24 +1,24 @@
1
- export interface SkeletonClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- /** Styles applied to the root element if `variant="text"`. */
5
- text: string;
6
- /** Styles applied to the root element if `variant="rectangular"`. */
7
- rectangular: string;
8
- /** Styles applied to the root element if `variant="circular"`. */
9
- circular: string;
10
- /** Styles applied to the root element if `animation="pulse"`. */
11
- pulse: string;
12
- /** Styles applied to the root element if `animation="wave"`. */
13
- wave: string;
14
- /** Styles applied when the component is passed children. */
15
- withChildren: string;
16
- /** Styles applied when the component is passed children and no width. */
17
- fitContent: string;
18
- /** Styles applied when the component is passed children and no height. */
19
- heightAuto: string;
20
- }
21
- export declare type SkeletonClassKey = keyof SkeletonClasses;
22
- export declare function getSkeletonUtilityClass(slot: string): string;
23
- declare const skeletonClasses: SkeletonClasses;
24
- export default skeletonClasses;
1
+ export interface SkeletonClasses {
2
+ /** Styles applied to the root element. */
3
+ root: string;
4
+ /** Styles applied to the root element if `variant="text"`. */
5
+ text: string;
6
+ /** Styles applied to the root element if `variant="rectangular"`. */
7
+ rectangular: string;
8
+ /** Styles applied to the root element if `variant="circular"`. */
9
+ circular: string;
10
+ /** Styles applied to the root element if `animation="pulse"`. */
11
+ pulse: string;
12
+ /** Styles applied to the root element if `animation="wave"`. */
13
+ wave: string;
14
+ /** Styles applied when the component is passed children. */
15
+ withChildren: string;
16
+ /** Styles applied when the component is passed children and no width. */
17
+ fitContent: string;
18
+ /** Styles applied when the component is passed children and no height. */
19
+ heightAuto: string;
20
+ }
21
+ export declare type SkeletonClassKey = keyof SkeletonClasses;
22
+ export declare function getSkeletonUtilityClass(slot: string): string;
23
+ declare const skeletonClasses: SkeletonClasses;
24
+ export default skeletonClasses;