@mui/material 5.12.1 → 5.12.3

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 (92) hide show
  1. package/Accordion/Accordion.d.ts +71 -57
  2. package/Badge/Badge.d.ts +3 -6
  3. package/BottomNavigationAction/BottomNavigationAction.js +4 -1
  4. package/ButtonGroup/ButtonGroup.js +8 -2
  5. package/CHANGELOG.md +188 -0
  6. package/Chip/Chip.js +1 -1
  7. package/Divider/Divider.js +10 -11
  8. package/FormControl/FormControl.js +1 -1
  9. package/Input/inputClasses.d.ts +4 -0
  10. package/InputBase/InputBase.js +1 -1
  11. package/Modal/Modal.d.ts +6 -3
  12. package/Modal/Modal.js +11 -3
  13. package/Modal/index.d.ts +1 -1
  14. package/Modal/index.js +1 -1
  15. package/OverridableComponent.d.ts +1 -1
  16. package/Paper/Paper.d.ts +6 -1
  17. package/Popper/Popper.d.ts +15 -5
  18. package/Popper/Popper.js +31 -6
  19. package/Popper/index.d.ts +1 -1
  20. package/Select/SelectInput.js +4 -1
  21. package/Slider/Slider.js +1 -1
  22. package/Snackbar/Snackbar.js +4 -3
  23. package/SwipeableDrawer/SwipeableDrawer.js +1 -1
  24. package/TextField/TextField.d.ts +21 -2
  25. package/TextField/TextField.js +7 -1
  26. package/index.js +1 -1
  27. package/legacy/ButtonGroup/ButtonGroup.js +7 -3
  28. package/legacy/Divider/Divider.js +17 -17
  29. package/legacy/Drawer/Drawer.js +4 -4
  30. package/legacy/FormControl/FormControl.js +1 -1
  31. package/legacy/InputBase/InputBase.js +1 -1
  32. package/legacy/ListItem/ListItem.js +4 -4
  33. package/legacy/Menu/Menu.js +4 -4
  34. package/legacy/Modal/Modal.js +11 -3
  35. package/legacy/Modal/index.js +1 -1
  36. package/legacy/Popover/Popover.js +4 -4
  37. package/legacy/Popper/Popper.js +32 -7
  38. package/legacy/Slider/Slider.js +1 -1
  39. package/legacy/Snackbar/Snackbar.js +16 -15
  40. package/legacy/SpeedDial/SpeedDial.js +8 -8
  41. package/legacy/SwipeableDrawer/SwipeableDrawer.js +4 -4
  42. package/legacy/TextField/TextField.js +7 -1
  43. package/legacy/index.js +1 -1
  44. package/legacy/useMediaQuery/useMediaQuery.js +8 -0
  45. package/modern/BottomNavigationAction/BottomNavigationAction.js +4 -1
  46. package/modern/ButtonGroup/ButtonGroup.js +8 -2
  47. package/modern/Chip/Chip.js +1 -1
  48. package/modern/Divider/Divider.js +10 -11
  49. package/modern/FormControl/FormControl.js +1 -1
  50. package/modern/InputBase/InputBase.js +1 -1
  51. package/modern/Modal/Modal.js +11 -3
  52. package/modern/Modal/index.js +1 -1
  53. package/modern/Popper/Popper.js +31 -6
  54. package/modern/Select/SelectInput.js +4 -1
  55. package/modern/Slider/Slider.js +1 -1
  56. package/modern/Snackbar/Snackbar.js +4 -3
  57. package/modern/SwipeableDrawer/SwipeableDrawer.js +1 -1
  58. package/modern/TextField/TextField.js +7 -1
  59. package/modern/index.js +1 -1
  60. package/modern/useMediaQuery/useMediaQuery.js +8 -0
  61. package/node/BottomNavigationAction/BottomNavigationAction.js +4 -1
  62. package/node/ButtonBase/Ripple.js +1 -2
  63. package/node/ButtonGroup/ButtonGroup.js +8 -2
  64. package/node/Chip/Chip.js +1 -1
  65. package/node/Divider/Divider.js +10 -11
  66. package/node/FormControl/FormControl.js +1 -1
  67. package/node/Grid/Grid.js +10 -1
  68. package/node/Hidden/Hidden.js +2 -2
  69. package/node/Hidden/HiddenJs.js +1 -2
  70. package/node/InputBase/InputBase.js +1 -1
  71. package/node/Modal/Modal.js +13 -5
  72. package/node/Modal/index.js +15 -18
  73. package/node/Popper/Popper.js +31 -6
  74. package/node/Select/SelectInput.js +4 -1
  75. package/node/Slide/Slide.js +2 -3
  76. package/node/Slider/Slider.js +1 -1
  77. package/node/Snackbar/Snackbar.js +4 -3
  78. package/node/SpeedDialAction/SpeedDialAction.js +1 -1
  79. package/node/SwipeableDrawer/SwipeableDrawer.js +3 -4
  80. package/node/Switch/Switch.js +1 -1
  81. package/node/TabScrollButton/TabScrollButton.js +1 -0
  82. package/node/TablePagination/TablePaginationActions.js +2 -2
  83. package/node/TextField/TextField.js +7 -1
  84. package/node/ToggleButton/ToggleButton.js +1 -1
  85. package/node/index.js +1 -1
  86. package/node/styles/index.js +5 -1
  87. package/node/useMediaQuery/useMediaQuery.js +12 -0
  88. package/node/utils/createSvgIcon.js +1 -2
  89. package/package.json +5 -5
  90. package/umd/material-ui.development.js +164 -103
  91. package/umd/material-ui.production.min.js +21 -21
  92. package/useMediaQuery/useMediaQuery.js +8 -0
@@ -1,64 +1,71 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
- import { InternalStandardProps as StandardProps, Theme } from '..';
3
+ import { Theme } from '..';
4
4
  import { TransitionProps } from '../transitions/transition';
5
- import { PaperProps } from '../Paper';
6
5
  import { AccordionClasses } from './accordionClasses';
6
+ import { OverridableComponent, OverrideProps } from '../OverridableComponent';
7
+ import { ExtendPaperTypeMap } from '../Paper/Paper';
7
8
 
8
- export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
9
- /**
10
- * The content of the component.
11
- */
12
- children: NonNullable<React.ReactNode>;
13
- /**
14
- * Override or extend the styles applied to the component.
15
- */
16
- classes?: Partial<AccordionClasses>;
17
- /**
18
- * If `true`, expands the accordion by default.
19
- * @default false
20
- */
21
- defaultExpanded?: boolean;
22
- /**
23
- * If `true`, the component is disabled.
24
- * @default false
25
- */
26
- disabled?: boolean;
27
- /**
28
- * If `true`, it removes the margin between two expanded accordion items and the increase of height.
29
- * @default false
30
- */
31
- disableGutters?: boolean;
32
- /**
33
- * If `true`, expands the accordion, otherwise collapse it.
34
- * Setting this prop enables control over the accordion.
35
- */
36
- expanded?: boolean;
37
- /**
38
- * Callback fired when the expand/collapse state is changed.
39
- *
40
- * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
41
- * @param {boolean} expanded The `expanded` state of the accordion.
42
- */
43
- onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
44
- /**
45
- * The system prop that allows defining system overrides as well as additional CSS styles.
46
- */
47
- sx?: SxProps<Theme>;
48
- /**
49
- * The component used for the transition.
50
- * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
51
- * @default Collapse
52
- */
53
- TransitionComponent?: React.JSXElementConstructor<
54
- TransitionProps & { children?: React.ReactElement<any, any> }
55
- >;
56
- /**
57
- * Props applied to the transition element.
58
- * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
59
- */
60
- TransitionProps?: TransitionProps;
61
- }
9
+ export type AccordionTypeMap<P = {}, D extends React.ElementType = 'div'> = ExtendPaperTypeMap<
10
+ {
11
+ props: P & {
12
+ /**
13
+ * The content of the component.
14
+ */
15
+ children: NonNullable<React.ReactNode>;
16
+ /**
17
+ * Override or extend the styles applied to the component.
18
+ */
19
+ classes?: Partial<AccordionClasses>;
20
+ /**
21
+ * If `true`, expands the accordion by default.
22
+ * @default false
23
+ */
24
+ defaultExpanded?: boolean;
25
+ /**
26
+ * If `true`, the component is disabled.
27
+ * @default false
28
+ */
29
+ disabled?: boolean;
30
+ /**
31
+ * If `true`, it removes the margin between two expanded accordion items and the increase of height.
32
+ * @default false
33
+ */
34
+ disableGutters?: boolean;
35
+ /**
36
+ * If `true`, expands the accordion, otherwise collapse it.
37
+ * Setting this prop enables control over the accordion.
38
+ */
39
+ expanded?: boolean;
40
+ /**
41
+ * Callback fired when the expand/collapse state is changed.
42
+ *
43
+ * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
44
+ * @param {boolean} expanded The `expanded` state of the accordion.
45
+ */
46
+ onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
47
+ /**
48
+ * The system prop that allows defining system overrides as well as additional CSS styles.
49
+ */
50
+ sx?: SxProps<Theme>;
51
+ /**
52
+ * The component used for the transition.
53
+ * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
54
+ * @default Collapse
55
+ */
56
+ TransitionComponent?: React.JSXElementConstructor<
57
+ TransitionProps & { children?: React.ReactElement<any, any> }
58
+ >;
59
+ /**
60
+ * Props applied to the transition element.
61
+ * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
62
+ */
63
+ TransitionProps?: TransitionProps;
64
+ };
65
+ defaultComponent: D;
66
+ },
67
+ 'onChange' | 'classes'
68
+ >;
62
69
 
63
70
  /**
64
71
  *
@@ -71,4 +78,11 @@ export interface AccordionProps extends StandardProps<PaperProps, 'onChange'> {
71
78
  * - [Accordion API](https://mui.com/material-ui/api/accordion/)
72
79
  * - inherits [Paper API](https://mui.com/material-ui/api/paper/)
73
80
  */
74
- export default function Accordion(props: AccordionProps): JSX.Element;
81
+ declare const Accordion: OverridableComponent<AccordionTypeMap>;
82
+
83
+ export type AccordionProps<
84
+ D extends React.ElementType = AccordionTypeMap['defaultComponent'],
85
+ P = {},
86
+ > = OverrideProps<AccordionTypeMap<P, D>, D>;
87
+
88
+ export default Accordion;
package/Badge/Badge.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { OverridableStringUnion } from '@mui/types';
4
- import { BadgeUnstyledTypeMap, ExtendBadgeUnstyledTypeMap } from '@mui/base/BadgeUnstyled';
4
+ import { BadgeTypeMap as BaseBadgeTypeMap, ExtendBadgeTypeMap } from '@mui/base/Badge';
5
5
  import { Theme } from '../styles';
6
6
  import { OverridableComponent, OverrideProps } from '../OverridableComponent';
7
7
  import { BadgeClasses } from './badgeClasses';
@@ -15,10 +15,7 @@ export interface BadgeOrigin {
15
15
  horizontal: 'left' | 'right';
16
16
  }
17
17
 
18
- export type BadgeTypeMap<
19
- D extends React.ElementType = 'span',
20
- P = {},
21
- > = ExtendBadgeUnstyledTypeMap<{
18
+ export type BadgeTypeMap<D extends React.ElementType = 'span', P = {}> = ExtendBadgeTypeMap<{
22
19
  props: P & {
23
20
  /**
24
21
  * The anchor of the badge.
@@ -55,7 +52,7 @@ export type BadgeTypeMap<
55
52
  *
56
53
  * @default {}
57
54
  */
58
- componentsProps?: BadgeUnstyledTypeMap['props']['slotProps'];
55
+ componentsProps?: BaseBadgeTypeMap['props']['slotProps'];
59
56
  /**
60
57
  * The components used for each slot inside.
61
58
  *
@@ -86,7 +86,10 @@ const BottomNavigationAction = /*#__PURE__*/React.forwardRef(function BottomNavi
86
86
  icon,
87
87
  label,
88
88
  onChange,
89
- onClick,
89
+ onClick
90
+ // eslint-disable-next-line react/prop-types -- private, always overridden by BottomNavigation
91
+ ,
92
+
90
93
  value
91
94
  } = props,
92
95
  other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -83,9 +83,15 @@ const ButtonGroupRoot = styled('div', {
83
83
  borderBottomRightRadius: 0,
84
84
  borderBottomLeftRadius: 0
85
85
  }, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
86
- borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
86
+ borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
87
+ [`&.${buttonGroupClasses.disabled}`]: {
88
+ borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
89
+ }
87
90
  }, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
88
- borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`
91
+ borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
92
+ [`&.${buttonGroupClasses.disabled}`]: {
93
+ borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
94
+ }
89
95
  }, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
90
96
  borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
91
97
  }, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
package/CHANGELOG.md CHANGED
@@ -1,5 +1,193 @@
1
1
  # [Versions](https://mui.com/versions/)
2
2
 
3
+ ## 5.12.3
4
+
5
+ <!-- generated comparing v5.12.2..master -->
6
+
7
+ _May 2, 2023_
8
+
9
+ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
10
+
11
+ - all planned breaking changes for Base UI are done. The first beta release should come next week 🎉
12
+ - 🐛 bug fixes and 📚 documentation improvements.
13
+
14
+ ### `@mui/material@5.12.3`
15
+
16
+ - &#8203;<!-- 43 -->[Accordion] Add missing `component` type (#37111) @sai6855
17
+ - &#8203;<!-- 23 -->[ButtonGroup] Should not retain divider color when it is disabled and variant is `text` (#36967) @DavidBoyer11
18
+ - &#8203;<!-- 21 -->[Divider] Fix styles on dividers with text (#35072) @maxdestors
19
+ - &#8203;<!-- 04 -->[TextField] Improve IntelliSense support for props (#36737) @sai6855
20
+ - &#8203;<!-- 03 -->[TextField] Fix running click event on disabled (#36892) @sai6855
21
+
22
+ ### `@mui/joy@5.0.0-alpha.78`
23
+
24
+ - &#8203;<!-- 09 -->[Joy] Miscellaneous fixes and docs improvement (#37026) @siriwatknp
25
+
26
+ ### `@mui/base@5.0.0-alpha.128`
27
+
28
+ #### Breaking changes
29
+
30
+ - The `component` prop is no longer supported because it can be replaced with the slots API. This is how the transformation will look like:
31
+
32
+ ```diff
33
+ <Button
34
+ - component="span"
35
+ + slots={{ root: "span" }}
36
+ />
37
+ ```
38
+
39
+ If using TypeScript, the custom component type should be added as a generic on the `Button` component.
40
+
41
+ ```diff
42
+ -<Button
43
+ +<Button<typeof CustomComponent>
44
+ slots={{ root: CustomComponent }}
45
+ customProp="foo"
46
+ />
47
+ ```
48
+
49
+ There is codemod that you can run in your project to do the transformation:
50
+
51
+ ```sh
52
+ npx @mui/codemod v5.0.0/base-remove-component-prop <path>
53
+ ```
54
+
55
+ The full documentation about the codemod can be found [here](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/README.md#base-remove-component-prop).
56
+
57
+ This is the list of PR related to this change:
58
+
59
+ - &#8203;<!-- 40 -->[Button][base] Drop `component` prop (#36677) @mnajdova
60
+ - &#8203;<!-- 42 -->[Badge][base] Drop `component` prop (#37028) @hbjORbj
61
+ - &#8203;<!-- 37 -->[FormControl][base] Drop component prop (#37031) @hbjORbj
62
+ - &#8203;<!-- 35 -->[Input][base] Drop component prop (#37057) @hbjORbj
63
+ - &#8203;<!-- 34 -->[Menu][base] Drop component prop (#37033) @hbjORbj
64
+ - &#8203;<!-- 33 -->[MenuItem][base] Drop component prop (#37032) @hbjORbj
65
+ - &#8203;<!-- 32 -->[Modal][base] Drop component prop (#37058) @hbjORbj
66
+ - &#8203;<!-- 31 -->[Option][base] Drop component prop (#37052) @hbjORbj
67
+ - &#8203;<!-- 30 -->[OptionGroup][base] Drop component prop (#37055) @hbjORbj
68
+ - &#8203;<!-- 31 -->[Popper][base] Drop component prop (#37084) @hbjORbj
69
+ - &#8203;<!-- 29 -->[Select][base] Drop component prop (#37035) @hbjORbj
70
+ - &#8203;<!-- 28 -->[Slider][base] Drop component prop (#37056) @hbjORbj
71
+ - &#8203;<!-- 27 -->[Snackbar][base] Drop component prop (#37041) @nicolas-ot
72
+ - &#8203;<!-- 26 -->[Switch][base] Drop component prop (#37053) @hbjORbj
73
+ - &#8203;<!-- 25 -->[Tab][base] Drop component prop (#36768) @sai6855
74
+ - &#8203;<!-- 24 -->[Tabs][base] Drop component prop (#36770) @sai6855
75
+ - &#8203;<!-- 08 -->[TablePagination][base] Drop component prop (#37059) @sai6855
76
+ - &#8203;<!-- 07 -->[TabPanel][base] Drop component prop (#37054) @sai6855
77
+ - &#8203;<!-- 06 -->[TabsList][base] Drop component prop (#37042) @sai6855
78
+
79
+ - &#8203;<!-- 41 -->[base] Improve API consistency (#36970) @michaldudak
80
+
81
+ Brought consistency to Base UI components and hooks' parameters and return values:
82
+
83
+ 1. Whenever a hook needs a ref, it's now called `<slot_name>Ref`, which matches the `get<slot_name>Props` in the return value.
84
+ 2. All hooks that accept external refs now return merged refs, making combining multiple hooks on one element easier. This was proven necessary in several compound components (like menuItem being both a button and a list item). The type of this value is `React.RefCallback` as using the more general `React.Ref` caused variance issues.
85
+ 3. Type of accepted refs is standardized to `React.Ref<Element>`
86
+ 4. Naming and typing of the forwarded ref in unstyled components were standardized - it's forwardedRef: React.ForwardedRef<Element> (unless a more specific type is needed).
87
+ 5. The shape of the definition of unstyled components was standardized - it's React.forwardRef(function Component(props: Props, forwardedRef: React.Ref<Element>) { ... });. Specifically, the generic parameters of forwardRef were removed as they are specified in function arguments.
88
+
89
+ #### Changes
90
+
91
+ - &#8203;<!-- 36 -->[FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) @michaldudak
92
+
93
+ ### Docs
94
+
95
+ - &#8203;<!-- 39 -->[base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert
96
+ - &#8203;<!-- 20 -->[docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova
97
+ - &#8203;<!-- 19 -->[docs] Fix pagination in the DataGrid demo (#37114) @cherniavskii
98
+ - &#8203;<!-- 18 -->[docs] Add notification to the release of the new Time Picker UI (#37065) @joserodolfofreitas
99
+ - &#8203;<!-- 17 -->[docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore
100
+ - &#8203;<!-- 16 -->[docs] Use focus-visible instead of focus for Menu demos (#36847) @michaldudak
101
+ - &#8203;<!-- 15 -->[docs] Fix small regressions API pages (#36972) @oliviertassinari
102
+ - &#8203;<!-- 14 -->[docs] Handle a few docs-feedback (#36977) @oliviertassinari
103
+ - &#8203;<!-- 13 -->[docs] Fix anchor link in customization (#37004) @oliviertassinari
104
+ - &#8203;<!-- 12 -->[docs] Add a note about minimal required version for theme merging to the guides (#36973) @jakub-stastny
105
+ - &#8203;<!-- 11 -->[docs] smooth scrolling added for `back to top` (#37011) @PunitSoniME
106
+ - &#8203;<!-- 10 -->[docs] Remove `useFormControl` return values from demos page (#37036) @ZeeshanTamboli
107
+ - &#8203;<!-- 47 --> [docs][base] Move styles to the bottom of demos code for `SwitchUnstyled` (#36720) @varunmulay22
108
+ - &#8203;<!-- 46 --> [docs][base] Move styles to the bottom of demos code for `InputUnstyled` (#36724) @varunmulay22
109
+ - &#8203;<!-- 45 --> [docs][base] Move styles to the bottom of demos code for `SliderUnstyled` (#36721) @varunmulay22
110
+ - &#8203;<!-- 44 --> [docs][base] Move styles to the bottom of demos code for `Snackbar` (#36719) @varunmulay22
111
+ - &#8203;<!-- 38 -->[docs][base] Move styles to the bottom of demos code for `SelectUnstyled` (#36718) @varunmulay22
112
+ - &#8203;<!-- 05 -->[templates] Image not displayed in blog layout of React template. (#36991) @navedqb
113
+ - &#8203;<!-- 02 -->[website] Take the design role offline @oliviertassinari
114
+ - &#8203;<!-- 01 -->[website] Fix URL convention @oliviertassinari
115
+ - &#8203;<!-- 21 -->[docs] Turn off job banner on docs (#36080) @joserodolfofreitas
116
+
117
+ ### Core
118
+
119
+ - &#8203;<!-- 22 -->[core] Allow type alias as well in hooks API docs generation (#37034) @ZeeshanTamboli
120
+
121
+ All contributors of this release in alphabetical order: @cherniavskii, @DavidBoyer11, @hbjORbj, @jakub-stastny, @joserodolfofreitas, @maxdestors, @michaldudak, @mj12albert, @mnajdova, @navedqb, @nicolas-ot, @oliviertassinari, @PunitSoniME, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli
122
+
123
+ ## 5.12.2
124
+
125
+ <!-- generated comparing v5.12.1..master -->
126
+
127
+ _Apr 25, 2023_
128
+
129
+ A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
130
+
131
+ - ⚠️ **[BREAKING CHANGE]** The `Unstyled` suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change.
132
+ - 🐛 bug fixes and 📚 documentation improvements.
133
+
134
+ ### `@mui/material@5.12.2`
135
+
136
+ - &#8203;<!-- 10 -->[FormControl] Fix `filled` when value is set through `inputProps` (#36741) @sai6855
137
+ - &#8203;<!-- 07 -->[Slider] `onChange` handler should be called only when value has changed (#36706) @gitstart
138
+ - &#8203;<!-- 06 -->[Table] Fix `Sorting & Selecting` tables (#36898) @oliviertassinari
139
+
140
+ ### `@mui/base@5.0.0-alpha.127`
141
+
142
+ #### Breaking changes
143
+
144
+ - &#8203;<!-- 27 -->[base] Remove unstyled suffix from Base components + Codemod script (#36873) @hbjORbj
145
+
146
+ The `Unstyled` suffix has been removed from all Base UI component names, including names of types and other related identifiers.
147
+
148
+ You can use this [codemod](https://github.com/mui/material-ui/blob/master/packages/mui-codemod/src/v5.0.0/base-remove-unstyled-suffix.js) to help with the migration:
149
+
150
+ ```sh
151
+ npx @mui/codemod v5.0.0/base-remove-unstyled-suffix <path>
152
+ ```
153
+
154
+ #### Changes
155
+
156
+ - &#8203;<!-- 26 -->[codemod][base] Improve the removal of `component` prop codemod script (#36952) @hbjORbj
157
+ - &#8203;<!-- 25 -->[codemod][base] Write a migration script for removal of `component` prop from components (#36831) @hbjORbj
158
+ - &#8203;<!-- 24 -->[Base][useButton] Allow useButton params to be completely optional (#36922) @mj12albert
159
+
160
+ ### `@mui/joy@5.0.0-alpha.77`
161
+
162
+ - &#8203;<!-- 23 -->[Joy][Chip] Chip button not showing up in Firefox browser (#36930) @TakhyunKim
163
+ - &#8203;<!-- 09 -->[Joy] Add `invertedColors` to Menu and Alert (#36975) @siriwatknp
164
+ - &#8203;<!-- 08 -->[joy][Select] Set focus visible on select options when navigating with arrow keys (#36689) @gitstart
165
+
166
+ ### Docs
167
+
168
+ - &#8203;<!-- 21 -->[docs] Fix console error introduced by #36408 (#36980) @alexfauquette
169
+ - &#8203;<!-- 20 -->[docs] Add stray Joy UI documentation improvements (#36921) @danilo-leal
170
+ - &#8203;<!-- 19 -->[docs] Add Joy profile dashboard template (#36931) @siriwatknp
171
+ - &#8203;<!-- 18 -->[docs] Fix 404 links (#36969) @oliviertassinari
172
+ - &#8203;<!-- 17 -->[docs] Clarify when bundle size optimization is needed (#36823) @oliviertassinari
173
+ - &#8203;<!-- 16 -->[docs] Fix Chakra UI theme scoping typo (#36950) @mj12albert
174
+ - &#8203;<!-- 15 -->[docs] Add snackbar example using sonner (#36926) @PupoSDC
175
+ - &#8203;<!-- 14 -->[docs] Adjust the Material Icons page design and formatting (#36937) @danilo-leal
176
+ - &#8203;<!-- 13 -->[docs] Allows to customize menu with any icon (#36408) @alexfauquette
177
+ - &#8203;<!-- 12 -->[docs] Add info about passing ref to input element (#36913) @tomaskebrle
178
+ - &#8203;<!-- 11 -->[docs][material] Tabs API section cleanup (#36942) @mnajdova
179
+
180
+ ### Core
181
+
182
+ - &#8203;<!-- 22 -->[core] Fix CI failure on `master` (#37016) @hbjORbj
183
+ - &#8203;<!-- 05 -->[typescript] Add the missing explicit component return types (#36924) @michaldudak
184
+ - &#8203;<!-- 04 -->[website] Update main data grid demo on X landing page (#37001) @cherniavskii
185
+ - &#8203;<!-- 03 -->[website] Design role updates (#36997) @danilo-leal
186
+ - &#8203;<!-- 02 -->[website] X component section improvements (#36598) @danilo-leal
187
+ - &#8203;<!-- 01 -->[website] Developer Advocate role filled @oliviertassinari
188
+
189
+ All contributors of this release in alphabetical order: @alexfauquette, @cherniavskii, @danilo-leal, @gitstart, @hbjORbj, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @PupoSDC, @sai6855, @siriwatknp, @TakhyunKim, @tomaskebrle
190
+
3
191
  ## 5.12.1
4
192
 
5
193
  <!-- generated comparing v5.12.0..master -->
package/Chip/Chip.js CHANGED
@@ -293,7 +293,7 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
293
293
  size = 'medium',
294
294
  variant = 'filled',
295
295
  tabIndex,
296
- skipFocusWhenDisabled = false
296
+ skipFocusWhenDisabled = false // TODO v6: Rename to `focusableWhenDisabled`.
297
297
  } = props,
298
298
  other = _objectWithoutPropertiesLoose(props, _excluded);
299
299
  const chipRef = React.useRef(null);
@@ -70,7 +70,6 @@ const DividerRoot = styled('div', {
70
70
  alignSelf: 'stretch',
71
71
  height: 'auto'
72
72
  }), ({
73
- theme,
74
73
  ownerState
75
74
  }) => _extends({}, ownerState.children && {
76
75
  display: 'flex',
@@ -78,12 +77,16 @@ const DividerRoot = styled('div', {
78
77
  textAlign: 'center',
79
78
  border: 0,
80
79
  '&::before, &::after': {
81
- position: 'relative',
82
- width: '100%',
83
- borderTop: `thin solid ${(theme.vars || theme).palette.divider}`,
84
- top: '50%',
85
80
  content: '""',
86
- transform: 'translateY(50%)'
81
+ alignSelf: 'center'
82
+ }
83
+ }), ({
84
+ theme,
85
+ ownerState
86
+ }) => _extends({}, ownerState.children && ownerState.orientation !== 'vertical' && {
87
+ '&::before, &::after': {
88
+ width: '100%',
89
+ borderTop: `thin solid ${(theme.vars || theme).palette.divider}`
87
90
  }
88
91
  }), ({
89
92
  theme,
@@ -92,11 +95,7 @@ const DividerRoot = styled('div', {
92
95
  flexDirection: 'column',
93
96
  '&::before, &::after': {
94
97
  height: '100%',
95
- top: '0%',
96
- left: '50%',
97
- borderTop: 0,
98
- borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`,
99
- transform: 'translateX(0%)'
98
+ borderLeft: `thin solid ${(theme.vars || theme).palette.divider}`
100
99
  }
101
100
  }), ({
102
101
  ownerState
@@ -138,7 +138,7 @@ const FormControl = /*#__PURE__*/React.forwardRef(function FormControl(inProps,
138
138
  if (!isMuiElement(child, ['Input', 'Select'])) {
139
139
  return;
140
140
  }
141
- if (isFilled(child.props, true)) {
141
+ if (isFilled(child.props, true) || isFilled(child.props.inputProps, true)) {
142
142
  initialFilled = true;
143
143
  }
144
144
  });
@@ -25,6 +25,10 @@ export interface InputClasses {
25
25
  inputSizeSmall: string;
26
26
  /** Styles applied to the input element if `multiline={true}`. */
27
27
  inputMultiline: string;
28
+ /** Styles applied to the input element if `startAdornment` is provided. */
29
+ inputAdornedStart: string;
30
+ /** Styles applied to the input element if `endAdornment` is provided. */
31
+ inputAdornedEnd: string;
28
32
  /** Styles applied to the input element if `type="search"`. */
29
33
  inputTypeSearch: string;
30
34
  }
@@ -372,7 +372,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
372
372
  if (inputRef.current && event.currentTarget === event.target) {
373
373
  inputRef.current.focus();
374
374
  }
375
- if (onClick) {
375
+ if (onClick && !fcs.disabled) {
376
376
  onClick(event);
377
377
  }
378
378
  };
package/Modal/Modal.d.ts CHANGED
@@ -2,7 +2,10 @@ import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { OverrideProps } from '@mui/types';
4
4
  import { SlotComponentProps } from '@mui/base';
5
- import { ModalUnstyledTypeMap, ModalUnstyledClasses } from '@mui/base/ModalUnstyled';
5
+ import {
6
+ ModalTypeMap as BaseModalTypeMap,
7
+ ModalClasses as BaseModalClasses,
8
+ } from '@mui/base/Modal';
6
9
  import { Theme } from '../styles';
7
10
  import Backdrop, { BackdropProps } from '../Backdrop';
8
11
  import { OverridableComponent } from '../OverridableComponent';
@@ -38,7 +41,7 @@ export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
38
41
  /**
39
42
  * Override or extend the styles applied to the component.
40
43
  */
41
- classes?: Partial<ModalUnstyledClasses>;
44
+ classes?: Partial<BaseModalClasses>;
42
45
  /**
43
46
  * @ignore
44
47
  */
@@ -88,7 +91,7 @@ export interface ModalTypeMap<D extends React.ElementType = 'div', P = {}> {
88
91
  * The system prop that allows defining system overrides as well as additional CSS styles.
89
92
  */
90
93
  sx?: SxProps<Theme>;
91
- } & Omit<ModalUnstyledTypeMap['props'], 'slotProps'>;
94
+ } & Omit<BaseModalTypeMap['props'], 'slotProps'>;
92
95
  defaultComponent: D;
93
96
  }
94
97
 
package/Modal/Modal.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "slotProps", "slots", "theme"];
3
+ const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import clsx from 'clsx';
7
- import ModalUnstyled, { modalUnstyledClasses } from '@mui/base/ModalUnstyled';
7
+ import ModalUnstyled, { modalClasses as modalUnstyledClasses } from '@mui/base/Modal';
8
8
  import { isHostComponent, resolveComponentProps } from '@mui/base/utils';
9
9
  import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
10
10
  import styled from '../styles/styled';
@@ -70,6 +70,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
70
70
  className,
71
71
  closeAfterTransition = false,
72
72
  children,
73
+ container,
73
74
  component,
74
75
  components = {},
75
76
  componentsProps = {},
@@ -81,6 +82,9 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
81
82
  disableScrollLock = false,
82
83
  hideBackdrop = false,
83
84
  keepMounted = false,
85
+ onBackdropClick,
86
+ onClose,
87
+ open,
84
88
  slotProps,
85
89
  slots,
86
90
  // eslint-disable-next-line react/prop-types
@@ -89,6 +93,7 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
89
93
  other = _objectWithoutPropertiesLoose(props, _excluded);
90
94
  const [exited, setExited] = React.useState(true);
91
95
  const commonProps = {
96
+ container,
92
97
  closeAfterTransition,
93
98
  disableAutoFocus,
94
99
  disableEnforceFocus,
@@ -97,7 +102,10 @@ const Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
97
102
  disableRestoreFocus,
98
103
  disableScrollLock,
99
104
  hideBackdrop,
100
- keepMounted
105
+ keepMounted,
106
+ onBackdropClick,
107
+ onClose,
108
+ open
101
109
  };
102
110
  const ownerState = _extends({}, props, commonProps, {
103
111
  exited
package/Modal/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export * from '@mui/base/ModalUnstyled'; // exporting ModalManager
1
+ export { ModalManager } from '@mui/base/Modal'; // exporting ModalManager
2
2
 
3
3
  export { default } from './Modal';
4
4
  export * from './Modal';
package/Modal/index.js CHANGED
@@ -1,3 +1,3 @@
1
- export * from '@mui/base/ModalUnstyled';
1
+ export { ModalManager } from '@mui/base/Modal';
2
2
  export { default } from './Modal';
3
3
  export * from './Modal';
@@ -11,7 +11,7 @@ export interface OverridableComponent<M extends OverridableTypeMap> {
11
11
  // If you make any changes to this interface, please make sure to update the
12
12
  // `OverridableComponent` type in `mui-types/index.d.ts` as well.
13
13
  // Also, there are types in Base UI that have a similar shape to this interface
14
- // (e.g. SelectUnstyledType, OptionUnstyledType, etc.).
14
+ // (e.g. SelectType, OptionType, etc.).
15
15
  <C extends React.ElementType>(
16
16
  props: {
17
17
  /**
package/Paper/Paper.d.ts CHANGED
@@ -2,7 +2,7 @@ import * as React from 'react';
2
2
  import { SxProps } from '@mui/system';
3
3
  import { OverridableStringUnion } from '@mui/types';
4
4
  import { Theme } from '../styles';
5
- import { OverrideProps, OverridableComponent } from '../OverridableComponent';
5
+ import { OverrideProps, OverridableComponent, OverridableTypeMap } from '../OverridableComponent';
6
6
  import { PaperClasses } from './paperClasses';
7
7
 
8
8
  export interface PaperPropsVariantOverrides {}
@@ -54,6 +54,11 @@ export interface PaperTypeMap<P = {}, D extends React.ElementType = 'div'> {
54
54
  */
55
55
  declare const Paper: OverridableComponent<PaperTypeMap>;
56
56
 
57
+ export interface ExtendPaperTypeMap<M extends OverridableTypeMap, Keys extends string = ''> {
58
+ props: M['props'] & Omit<PaperTypeMap['props'], Keys>;
59
+ defaultComponent: M['defaultComponent'];
60
+ }
61
+
57
62
  export type PaperProps<
58
63
  D extends React.ElementType = PaperTypeMap['defaultComponent'],
59
64
  P = {},