@mui/material 5.14.17 → 5.14.19

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 (113) hide show
  1. package/Autocomplete/Autocomplete.d.ts +3 -0
  2. package/Autocomplete/Autocomplete.js +24 -5
  3. package/BottomNavigation/BottomNavigation.js +0 -0
  4. package/Box/Box.js +2 -1
  5. package/Box/boxClasses.d.ts +7 -0
  6. package/Box/boxClasses.js +3 -0
  7. package/Box/index.d.ts +3 -0
  8. package/Box/index.js +3 -1
  9. package/CHANGELOG.md +154 -6
  10. package/Chip/Chip.js +2 -2
  11. package/FilledInput/FilledInput.js +9 -6
  12. package/FormControlLabel/FormControlLabel.js +1 -2
  13. package/InputAdornment/InputAdornment.js +2 -2
  14. package/InputLabel/InputLabel.js +5 -1
  15. package/Modal/Modal.d.ts +3 -0
  16. package/Modal/Modal.js +3 -0
  17. package/Popper/Popper.js +3 -0
  18. package/Rating/Rating.js +4 -6
  19. package/Select/Select.d.ts +1 -2
  20. package/Select/SelectInput.js +2 -1
  21. package/StepButton/StepButton.js +1 -1
  22. package/TablePagination/TablePagination.d.ts +23 -0
  23. package/TablePagination/TablePagination.js +47 -12
  24. package/TablePagination/TablePaginationActions.d.ts +19 -0
  25. package/TablePagination/TablePaginationActions.js +35 -15
  26. package/index.js +1 -1
  27. package/legacy/Accordion/Accordion.js +4 -5
  28. package/legacy/AccordionSummary/AccordionSummary.js +5 -6
  29. package/legacy/Autocomplete/Autocomplete.js +55 -41
  30. package/legacy/AvatarGroup/AvatarGroup.js +2 -3
  31. package/legacy/BottomNavigation/BottomNavigation.js +0 -0
  32. package/legacy/Box/Box.js +2 -1
  33. package/legacy/Box/boxClasses.js +3 -0
  34. package/legacy/Box/index.js +3 -1
  35. package/legacy/Button/Button.js +10 -11
  36. package/legacy/ButtonBase/ButtonBase.js +4 -5
  37. package/legacy/ButtonGroup/ButtonGroup.js +4 -5
  38. package/legacy/CardActionArea/CardActionArea.js +4 -5
  39. package/legacy/CardHeader/CardHeader.js +1 -2
  40. package/legacy/Checkbox/Checkbox.js +3 -4
  41. package/legacy/Chip/Chip.js +29 -32
  42. package/legacy/FilledInput/FilledInput.js +20 -17
  43. package/legacy/FormControlLabel/FormControlLabel.js +1 -2
  44. package/legacy/FormHelperText/FormHelperText.js +4 -5
  45. package/legacy/FormLabel/FormLabel.js +5 -6
  46. package/legacy/Input/Input.js +7 -8
  47. package/legacy/InputAdornment/InputAdornment.js +2 -2
  48. package/legacy/InputBase/InputBase.js +5 -6
  49. package/legacy/InputLabel/InputLabel.js +5 -1
  50. package/legacy/ListItem/ListItem.js +4 -5
  51. package/legacy/ListItemButton/ListItemButton.js +6 -7
  52. package/legacy/MenuItem/MenuItem.js +11 -12
  53. package/legacy/Modal/Modal.js +3 -0
  54. package/legacy/NativeSelect/NativeSelectInput.js +6 -7
  55. package/legacy/OutlinedInput/OutlinedInput.js +7 -8
  56. package/legacy/PaginationItem/PaginationItem.js +9 -10
  57. package/legacy/Popper/Popper.js +3 -0
  58. package/legacy/Rating/Rating.js +8 -10
  59. package/legacy/Select/SelectInput.js +2 -1
  60. package/legacy/Slider/Slider.js +11 -14
  61. package/legacy/SpeedDialIcon/SpeedDialIcon.js +4 -5
  62. package/legacy/StepButton/StepButton.js +1 -1
  63. package/legacy/StepIcon/StepIcon.js +5 -6
  64. package/legacy/StepLabel/StepLabel.js +10 -12
  65. package/legacy/Switch/Switch.js +14 -17
  66. package/legacy/Tab/Tab.js +10 -11
  67. package/legacy/TablePagination/TablePagination.js +53 -19
  68. package/legacy/TablePagination/TablePaginationActions.js +35 -14
  69. package/legacy/TableRow/TableRow.js +4 -5
  70. package/legacy/Tabs/Tabs.js +1 -2
  71. package/legacy/ToggleButton/ToggleButton.js +4 -5
  72. package/legacy/Tooltip/Tooltip.js +10 -12
  73. package/legacy/index.js +1 -1
  74. package/legacy/styles/createMixins.js +4 -5
  75. package/modern/Autocomplete/Autocomplete.js +24 -5
  76. package/modern/BottomNavigation/BottomNavigation.js +0 -0
  77. package/modern/Box/Box.js +2 -1
  78. package/modern/Box/boxClasses.js +3 -0
  79. package/modern/Box/index.js +3 -1
  80. package/modern/Chip/Chip.js +2 -2
  81. package/modern/FilledInput/FilledInput.js +9 -6
  82. package/modern/FormControlLabel/FormControlLabel.js +1 -2
  83. package/modern/InputAdornment/InputAdornment.js +2 -2
  84. package/modern/InputLabel/InputLabel.js +5 -1
  85. package/modern/Modal/Modal.js +3 -0
  86. package/modern/Popper/Popper.js +3 -0
  87. package/modern/Rating/Rating.js +4 -6
  88. package/modern/Select/SelectInput.js +2 -1
  89. package/modern/StepButton/StepButton.js +1 -1
  90. package/modern/TablePagination/TablePagination.js +46 -12
  91. package/modern/TablePagination/TablePaginationActions.js +34 -15
  92. package/modern/index.js +1 -1
  93. package/node/Autocomplete/Autocomplete.js +24 -5
  94. package/node/BottomNavigation/BottomNavigation.js +0 -0
  95. package/node/Box/Box.js +2 -1
  96. package/node/Box/boxClasses.js +9 -0
  97. package/node/Box/index.js +24 -1
  98. package/node/Chip/Chip.js +2 -2
  99. package/node/FilledInput/FilledInput.js +9 -6
  100. package/node/FormControlLabel/FormControlLabel.js +1 -2
  101. package/node/InputAdornment/InputAdornment.js +2 -2
  102. package/node/InputLabel/InputLabel.js +5 -1
  103. package/node/Modal/Modal.js +3 -0
  104. package/node/Popper/Popper.js +3 -0
  105. package/node/Rating/Rating.js +4 -6
  106. package/node/Select/SelectInput.js +2 -1
  107. package/node/StepButton/StepButton.js +1 -1
  108. package/node/TablePagination/TablePagination.js +47 -12
  109. package/node/TablePagination/TablePaginationActions.js +35 -15
  110. package/node/index.js +1 -1
  111. package/package.json +9 -9
  112. package/umd/material-ui.development.js +180 -102
  113. package/umd/material-ui.production.min.js +21 -21
@@ -3,8 +3,9 @@
3
3
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
4
  import _extends from "@babel/runtime/helpers/esm/extends";
5
5
  var _ClearIcon, _ArrowDropDownIcon;
6
- const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
7
- _excluded2 = ["ref"];
6
+ const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
7
+ _excluded2 = ["ref"],
8
+ _excluded3 = ["key"];
8
9
  import * as React from 'react';
9
10
  import PropTypes from 'prop-types';
10
11
  import clsx from 'clsx';
@@ -523,9 +524,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
523
524
  })]
524
525
  }, params.key);
525
526
  const renderGroup = renderGroupProp || defaultRenderGroup;
526
- const defaultRenderOption = (props2, option) => /*#__PURE__*/_jsx("li", _extends({}, props2, {
527
- children: getOptionLabel(option)
528
- }));
527
+ const defaultRenderOption = (props2, option) => {
528
+ const {
529
+ key
530
+ } = props2,
531
+ otherProps = _objectWithoutPropertiesLoose(props2, _excluded3);
532
+ return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
533
+ children: getOptionLabel(option)
534
+ }), key);
535
+ };
529
536
  const renderOption = renderOptionProp || defaultRenderOption;
530
537
  const renderListOption = (option, index) => {
531
538
  const optionProps = getOptionProps({
@@ -819,6 +826,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
819
826
  * @returns {boolean}
820
827
  */
821
828
  getOptionDisabled: PropTypes.func,
829
+ /**
830
+ * Used to determine the key for a given option.
831
+ * This can be useful when the labels of options are not unique (since labels are used as keys by default).
832
+ *
833
+ * @param {Value} option The option to get the key for.
834
+ * @returns {string | number}
835
+ */
836
+ getOptionKey: PropTypes.func,
822
837
  /**
823
838
  * Used to determine the string value for a given option.
824
839
  * It's used to fill the input (and the list box options if `renderOption` is not provided).
@@ -941,6 +956,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
941
956
  * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
942
957
  */
943
958
  onInputChange: PropTypes.func,
959
+ /**
960
+ * @ignore
961
+ */
962
+ onKeyDown: PropTypes.func,
944
963
  /**
945
964
  * Callback fired when the popup requests to be opened.
946
965
  * Use in controlled mode (see open).
File without changes
package/modern/Box/Box.js CHANGED
@@ -5,11 +5,12 @@ import PropTypes from 'prop-types';
5
5
  import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
6
6
  import { createTheme } from '../styles';
7
7
  import THEME_ID from '../styles/identifier';
8
+ import boxClasses from './boxClasses';
8
9
  const defaultTheme = createTheme();
9
10
  const Box = createBox({
10
11
  themeId: THEME_ID,
11
12
  defaultTheme,
12
- defaultClassName: 'MuiBox-root',
13
+ defaultClassName: boxClasses.root,
13
14
  generateClassName: ClassNameGenerator.generate
14
15
  });
15
16
  process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
@@ -0,0 +1,3 @@
1
+ import { unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ const boxClasses = generateUtilityClasses('MuiBox', ['root']);
3
+ export default boxClasses;
@@ -1,3 +1,5 @@
1
1
  'use client';
2
2
 
3
- export { default } from './Box';
3
+ export { default } from './Box';
4
+ export { default as boxClasses } from './boxClasses';
5
+ export * from './boxClasses';
@@ -358,10 +358,10 @@ const Chip = /*#__PURE__*/React.forwardRef(function Chip(inProps, ref) {
358
358
  }) : {};
359
359
  let deleteIcon = null;
360
360
  if (onDelete) {
361
- deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? /*#__PURE__*/React.cloneElement(deleteIconProp, {
361
+ deleteIcon = deleteIconProp && /*#__PURE__*/React.isValidElement(deleteIconProp) ? ( /*#__PURE__*/React.cloneElement(deleteIconProp, {
362
362
  className: clsx(deleteIconProp.props.className, classes.deleteIcon),
363
363
  onClick: handleDeleteIconClick
364
- }) : /*#__PURE__*/_jsx(CancelIcon, {
364
+ })) : /*#__PURE__*/_jsx(CancelIcon, {
365
365
  className: clsx(classes.deleteIcon),
366
366
  onClick: handleDeleteIconClick
367
367
  });
@@ -125,6 +125,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
125
125
  }, ownerState.hiddenLabel && {
126
126
  paddingTop: 16,
127
127
  paddingBottom: 17
128
+ }, ownerState.hiddenLabel && ownerState.size === 'small' && {
129
+ paddingTop: 8,
130
+ paddingBottom: 9
128
131
  }));
129
132
  });
130
133
  const FilledInputInput = styled(InputBaseInput, {
@@ -165,11 +168,6 @@ const FilledInputInput = styled(InputBaseInput, {
165
168
  }, ownerState.hiddenLabel && {
166
169
  paddingTop: 16,
167
170
  paddingBottom: 17
168
- }, ownerState.multiline && {
169
- paddingTop: 0,
170
- paddingBottom: 0,
171
- paddingLeft: 0,
172
- paddingRight: 0
173
171
  }, ownerState.startAdornment && {
174
172
  paddingLeft: 0
175
173
  }, ownerState.endAdornment && {
@@ -177,6 +175,11 @@ const FilledInputInput = styled(InputBaseInput, {
177
175
  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
178
176
  paddingTop: 8,
179
177
  paddingBottom: 9
178
+ }, ownerState.multiline && {
179
+ paddingTop: 0,
180
+ paddingBottom: 0,
181
+ paddingLeft: 0,
182
+ paddingRight: 0
180
183
  }));
181
184
  const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
182
185
  const props = useThemeProps({
@@ -210,7 +213,7 @@ const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps,
210
213
  ownerState
211
214
  }
212
215
  };
213
- const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(slotProps ?? componentsPropsProp, filledInputComponentsProps) : filledInputComponentsProps;
216
+ const componentsProps = slotProps ?? componentsPropsProp ? deepmerge(filledInputComponentsProps, slotProps ?? componentsPropsProp) : filledInputComponentsProps;
214
217
  const RootSlot = slots.root ?? components.Root ?? FilledInputRoot;
215
218
  const InputSlot = slots.input ?? components.Input ?? FilledInputInput;
216
219
  return /*#__PURE__*/_jsx(InputBase, _extends({
@@ -151,8 +151,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
151
151
  ref: ref
152
152
  }, other, {
153
153
  children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
154
- direction: "row",
155
- alignItems: "center",
154
+ display: "block",
156
155
  children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
157
156
  ownerState: ownerState,
158
157
  "aria-hidden": true,
@@ -114,10 +114,10 @@ const InputAdornment = /*#__PURE__*/React.forwardRef(function InputAdornment(inP
114
114
  color: "text.secondary",
115
115
  children: children
116
116
  }) : /*#__PURE__*/_jsxs(React.Fragment, {
117
- children: [position === 'start' ? /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
117
+ children: [position === 'start' ? ( /* notranslate needed while Google Translate will not fix zero-width space issue */_span || (_span = /*#__PURE__*/_jsx("span", {
118
118
  className: "notranslate",
119
119
  children: "\u200B"
120
- })) : null, children]
120
+ }))) : null, children]
121
121
  })
122
122
  }))
123
123
  });
@@ -105,7 +105,11 @@ const InputLabelRoot = styled(FormLabel, {
105
105
  // but it feels a better when it bleeds a bit on the left, so 32px.
106
106
  maxWidth: 'calc(133% - 32px)',
107
107
  transform: 'translate(14px, -9px) scale(0.75)'
108
- })));
108
+ }), ownerState.variant === 'standard' && {
109
+ '&:not(label) + div': {
110
+ marginTop: 16
111
+ }
112
+ }));
109
113
  const InputLabel = /*#__PURE__*/React.forwardRef(function InputLabel(inProps, ref) {
110
114
  const props = useThemeProps({
111
115
  name: 'MuiInputLabel',
@@ -275,6 +275,9 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes /* remove-proptypes */ =
275
275
  * An HTML element or function that returns one.
276
276
  * The `container` will have the portal children appended to it.
277
277
  *
278
+ * You can also provide a callback, which is called in a React layout effect.
279
+ * This lets you set the container from a ref, and also makes server-side rendering possible.
280
+ *
278
281
  * By default, it uses the body of the top-level document object,
279
282
  * so it's simply `document.body` most of the time.
280
283
  */
@@ -116,6 +116,9 @@ process.env.NODE_ENV !== "production" ? Popper.propTypes /* remove-proptypes */
116
116
  * An HTML element or function that returns one.
117
117
  * The `container` will have the portal children appended to it.
118
118
  *
119
+ * You can also provide a callback, which is called in a React layout effect.
120
+ * This lets you set the container from a ref, and also makes server-side rendering possible.
121
+ *
119
122
  * By default, it uses the body of the top-level document object,
120
123
  * so it's simply `document.body` most of the time.
121
124
  */
@@ -337,16 +337,14 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
337
337
  const rootNode = rootRef.current;
338
338
  const {
339
339
  right,
340
- left
340
+ left,
341
+ width: containerWidth
341
342
  } = rootNode.getBoundingClientRect();
342
- const {
343
- width
344
- } = rootNode.firstChild.getBoundingClientRect();
345
343
  let percent;
346
344
  if (theme.direction === 'rtl') {
347
- percent = (right - event.clientX) / (width * max);
345
+ percent = (right - event.clientX) / containerWidth;
348
346
  } else {
349
- percent = (event.clientX - left) / (width * max);
347
+ percent = (event.clientX - left) / containerWidth;
350
348
  }
351
349
  let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
352
350
  newHover = clamp(newHover, precision, max);
@@ -434,6 +434,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
434
434
  const classes = useUtilityClasses(ownerState);
435
435
  const paperProps = _extends({}, MenuProps.PaperProps, MenuProps.slotProps?.paper);
436
436
  const listboxId = useId();
437
+ const hiddenInputId = useId();
437
438
  return /*#__PURE__*/_jsxs(React.Fragment, {
438
439
  children: [/*#__PURE__*/_jsx(SelectSelect, _extends({
439
440
  ref: handleDisplayRef,
@@ -464,7 +465,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
464
465
  })), /*#__PURE__*/_jsx(SelectNativeInput, _extends({
465
466
  "aria-invalid": error,
466
467
  value: Array.isArray(value) ? value.join(',') : value,
467
- name: name,
468
+ name: name ?? hiddenInputId,
468
469
  ref: inputRef,
469
470
  "aria-hidden": true,
470
471
  onChange: handleChange,
@@ -81,7 +81,7 @@ const StepButton = /*#__PURE__*/React.forwardRef(function StepButton(inProps, re
81
81
  icon,
82
82
  optional
83
83
  };
84
- const child = isMuiElement(children, ['StepLabel']) ? /*#__PURE__*/React.cloneElement(children, childProps) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
84
+ const child = isMuiElement(children, ['StepLabel']) ? ( /*#__PURE__*/React.cloneElement(children, childProps)) : /*#__PURE__*/_jsx(StepLabel, _extends({}, childProps, {
85
85
  children: children
86
86
  }));
87
87
  return /*#__PURE__*/_jsx(StepButtonRoot, _extends({
@@ -3,7 +3,7 @@
3
3
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
4
4
  import _extends from "@babel/runtime/helpers/esm/extends";
5
5
  var _InputBase;
6
- const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
6
+ const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
7
7
  import * as React from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import clsx from 'clsx';
@@ -155,6 +155,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
155
155
  colSpan: colSpanProp,
156
156
  component = TableCell,
157
157
  count,
158
+ disabled = false,
158
159
  getItemAriaLabel = defaultGetAriaLabel,
159
160
  labelDisplayedRows = defaultLabelDisplayedRows,
160
161
  labelRowsPerPage = 'Rows per page:',
@@ -166,19 +167,21 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
166
167
  rowsPerPageOptions = [10, 25, 50, 100],
167
168
  SelectProps = {},
168
169
  showFirstButton = false,
169
- showLastButton = false
170
+ showLastButton = false,
171
+ slotProps
170
172
  } = props,
171
173
  other = _objectWithoutPropertiesLoose(props, _excluded);
172
174
  const ownerState = props;
173
175
  const classes = useUtilityClasses(ownerState);
174
- const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
176
+ const selectProps = slotProps?.select ?? SelectProps;
177
+ const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
175
178
  let colSpan;
176
179
  if (component === TableCell || component === 'td') {
177
180
  colSpan = colSpanProp || 1000; // col-span over everything
178
181
  }
179
182
 
180
- const selectId = useId(SelectProps.id);
181
- const labelId = useId(SelectProps.labelId);
183
+ const selectId = useId(selectProps.id);
184
+ const labelId = useId(selectProps.labelId);
182
185
  const getLabelDisplayedRowsTo = () => {
183
186
  if (count === -1) {
184
187
  return (page + 1) * rowsPerPage;
@@ -202,21 +205,22 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
202
205
  children: labelRowsPerPage
203
206
  }), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
204
207
  variant: "standard"
205
- }, !SelectProps.variant && {
208
+ }, !selectProps.variant && {
206
209
  input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
207
210
  }, {
208
211
  value: rowsPerPage,
209
212
  onChange: onRowsPerPageChange,
210
213
  id: selectId,
211
214
  labelId: labelId
212
- }, SelectProps, {
213
- classes: _extends({}, SelectProps.classes, {
215
+ }, selectProps, {
216
+ classes: _extends({}, selectProps.classes, {
214
217
  // TODO v5 remove `classes.input`
215
- root: clsx(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
216
- select: clsx(classes.select, (SelectProps.classes || {}).select),
218
+ root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
219
+ select: clsx(classes.select, (selectProps.classes || {}).select),
217
220
  // TODO v5 remove `selectIcon`
218
- icon: clsx(classes.selectIcon, (SelectProps.classes || {}).icon)
221
+ icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
219
222
  }),
223
+ disabled: disabled,
220
224
  children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
221
225
  ownerState
222
226
  }, {
@@ -242,7 +246,9 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
242
246
  rowsPerPage: rowsPerPage,
243
247
  showFirstButton: showFirstButton,
244
248
  showLastButton: showLastButton,
245
- getItemAriaLabel: getItemAriaLabel
249
+ slotProps: slotProps?.actions,
250
+ getItemAriaLabel: getItemAriaLabel,
251
+ disabled: disabled
246
252
  })]
247
253
  })
248
254
  }));
@@ -260,6 +266,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
260
266
  ActionsComponent: PropTypes.elementType,
261
267
  /**
262
268
  * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
269
+ *
270
+ * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
271
+ * @deprecated Use `slotProps.actions.previousButton` instead.
263
272
  */
264
273
  backIconButtonProps: PropTypes.object,
265
274
  /**
@@ -285,6 +294,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
285
294
  * To enable server side pagination for an unknown number of items, provide -1.
286
295
  */
287
296
  count: integerPropType.isRequired,
297
+ /**
298
+ * If `true`, the component is disabled.
299
+ * @default false
300
+ */
301
+ disabled: PropTypes.bool,
288
302
  /**
289
303
  * Accepts a function which returns a string value that provides a user-friendly name for the current page.
290
304
  * This is important for screen reader users.
@@ -316,6 +330,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
316
330
  labelRowsPerPage: PropTypes.node,
317
331
  /**
318
332
  * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
333
+ *
334
+ * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
335
+ * @deprecated Use `slotProps.actions.nextButton` instead.
319
336
  */
320
337
  nextIconButtonProps: PropTypes.object,
321
338
  /**
@@ -367,6 +384,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
367
384
  })]).isRequired),
368
385
  /**
369
386
  * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
387
+ *
388
+ * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
389
+ * @deprecated Use `slotProps.select` instead.
390
+ *
370
391
  * @default {}
371
392
  */
372
393
  SelectProps: PropTypes.object,
@@ -380,6 +401,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
380
401
  * @default false
381
402
  */
382
403
  showLastButton: PropTypes.bool,
404
+ /**
405
+ * The props used for each slot inside the TablePagination.
406
+ * @default {}
407
+ */
408
+ slotProps: PropTypes.shape({
409
+ actions: PropTypes.shape({
410
+ firstButton: PropTypes.object,
411
+ lastButton: PropTypes.object,
412
+ nextButton: PropTypes.object,
413
+ previousButton: PropTypes.object
414
+ }),
415
+ select: PropTypes.object
416
+ }),
383
417
  /**
384
418
  * The system prop that allows defining system overrides as well as additional CSS styles.
385
419
  */
@@ -3,7 +3,7 @@
3
3
  import _extends from "@babel/runtime/helpers/esm/extends";
4
4
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
5
5
  var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
6
- const _excluded = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
6
+ const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
7
7
  import * as React from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import KeyboardArrowLeft from '../internal/svg-icons/KeyboardArrowLeft';
@@ -22,13 +22,15 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
22
22
  const {
23
23
  backIconButtonProps,
24
24
  count,
25
+ disabled = false,
25
26
  getItemAriaLabel,
26
27
  nextIconButtonProps,
27
28
  onPageChange,
28
29
  page,
29
30
  rowsPerPage,
30
31
  showFirstButton,
31
- showLastButton
32
+ showLastButton,
33
+ slotProps
32
34
  } = props,
33
35
  other = _objectWithoutPropertiesLoose(props, _excluded);
34
36
  const theme = useTheme();
@@ -47,35 +49,37 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
47
49
  return /*#__PURE__*/_jsxs("div", _extends({
48
50
  ref: ref
49
51
  }, other, {
50
- children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, {
52
+ children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
51
53
  onClick: handleFirstPageButtonClick,
52
- disabled: page === 0,
54
+ disabled: disabled || page === 0,
53
55
  "aria-label": getItemAriaLabel('first', page),
54
- title: getItemAriaLabel('first', page),
56
+ title: getItemAriaLabel('first', page)
57
+ }, slotProps?.firstButton ?? {}, {
55
58
  children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
56
- }), /*#__PURE__*/_jsx(IconButton, _extends({
59
+ })), /*#__PURE__*/_jsx(IconButton, _extends({
57
60
  onClick: handleBackButtonClick,
58
- disabled: page === 0,
61
+ disabled: disabled || page === 0,
59
62
  color: "inherit",
60
63
  "aria-label": getItemAriaLabel('previous', page),
61
64
  title: getItemAriaLabel('previous', page)
62
- }, backIconButtonProps, {
65
+ }, slotProps?.previousButton ?? backIconButtonProps, {
63
66
  children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
64
67
  })), /*#__PURE__*/_jsx(IconButton, _extends({
65
68
  onClick: handleNextButtonClick,
66
- disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
69
+ disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
67
70
  color: "inherit",
68
71
  "aria-label": getItemAriaLabel('next', page),
69
72
  title: getItemAriaLabel('next', page)
70
- }, nextIconButtonProps, {
73
+ }, slotProps?.nextButton ?? nextIconButtonProps, {
71
74
  children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
72
- })), showLastButton && /*#__PURE__*/_jsx(IconButton, {
75
+ })), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
73
76
  onClick: handleLastPageButtonClick,
74
- disabled: page >= Math.ceil(count / rowsPerPage) - 1,
77
+ disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
75
78
  "aria-label": getItemAriaLabel('last', page),
76
- title: getItemAriaLabel('last', page),
79
+ title: getItemAriaLabel('last', page)
80
+ }, slotProps?.lastButton ?? {}, {
77
81
  children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
78
- })]
82
+ }))]
79
83
  }));
80
84
  });
81
85
  process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
@@ -87,6 +91,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
87
91
  * The total number of rows.
88
92
  */
89
93
  count: PropTypes.number.isRequired,
94
+ /**
95
+ * If `true`, the component is disabled.
96
+ * @default false
97
+ */
98
+ disabled: PropTypes.bool,
90
99
  /**
91
100
  * Accepts a function which returns a string value that provides a user-friendly name for the current page.
92
101
  *
@@ -123,6 +132,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
123
132
  /**
124
133
  * If `true`, show the last-page button.
125
134
  */
126
- showLastButton: PropTypes.bool.isRequired
135
+ showLastButton: PropTypes.bool.isRequired,
136
+ /**
137
+ * The props used for each slot inside the TablePaginationActions.
138
+ * @default {}
139
+ */
140
+ slotProps: PropTypes.shape({
141
+ firstButton: PropTypes.object,
142
+ lastButton: PropTypes.object,
143
+ nextButton: PropTypes.object,
144
+ previousButton: PropTypes.object
145
+ })
127
146
  } : void 0;
128
147
  export default TablePaginationActions;
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.14.17
2
+ * @mui/material v5.14.19
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -38,8 +38,9 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
38
38
  var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
39
39
  var _jsxRuntime = require("react/jsx-runtime");
40
40
  var _ClearIcon, _ArrowDropDownIcon;
41
- const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
42
- _excluded2 = ["ref"];
41
+ const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionKey", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"],
42
+ _excluded2 = ["ref"],
43
+ _excluded3 = ["key"];
43
44
  function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
44
45
  function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
45
46
  const useUtilityClasses = ownerState => {
@@ -539,9 +540,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
539
540
  })]
540
541
  }, params.key);
541
542
  const renderGroup = renderGroupProp || defaultRenderGroup;
542
- const defaultRenderOption = (props2, option) => /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, props2, {
543
- children: getOptionLabel(option)
544
- }));
543
+ const defaultRenderOption = (props2, option) => {
544
+ const {
545
+ key
546
+ } = props2,
547
+ otherProps = (0, _objectWithoutPropertiesLoose2.default)(props2, _excluded3);
548
+ return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", (0, _extends2.default)({}, otherProps, {
549
+ children: getOptionLabel(option)
550
+ }), key);
551
+ };
545
552
  const renderOption = renderOptionProp || defaultRenderOption;
546
553
  const renderListOption = (option, index) => {
547
554
  const optionProps = getOptionProps({
@@ -835,6 +842,14 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
835
842
  * @returns {boolean}
836
843
  */
837
844
  getOptionDisabled: _propTypes.default.func,
845
+ /**
846
+ * Used to determine the key for a given option.
847
+ * This can be useful when the labels of options are not unique (since labels are used as keys by default).
848
+ *
849
+ * @param {Value} option The option to get the key for.
850
+ * @returns {string | number}
851
+ */
852
+ getOptionKey: _propTypes.default.func,
838
853
  /**
839
854
  * Used to determine the string value for a given option.
840
855
  * It's used to fill the input (and the list box options if `renderOption` is not provided).
@@ -957,6 +972,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
957
972
  * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
958
973
  */
959
974
  onInputChange: _propTypes.default.func,
975
+ /**
976
+ * @ignore
977
+ */
978
+ onKeyDown: _propTypes.default.func,
960
979
  /**
961
980
  * Callback fired when the popup requests to be opened.
962
981
  * Use in controlled mode (see open).
File without changes
package/node/Box/Box.js CHANGED
@@ -11,11 +11,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
11
11
  var _className = require("../className");
12
12
  var _styles = require("../styles");
13
13
  var _identifier = _interopRequireDefault(require("../styles/identifier"));
14
+ var _boxClasses = _interopRequireDefault(require("./boxClasses"));
14
15
  const defaultTheme = (0, _styles.createTheme)();
15
16
  const Box = (0, _system.createBox)({
16
17
  themeId: _identifier.default,
17
18
  defaultTheme,
18
- defaultClassName: 'MuiBox-root',
19
+ defaultClassName: _boxClasses.default.root,
19
20
  generateClassName: _className.unstable_ClassNameGenerator.generate
20
21
  });
21
22
  process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = void 0;
7
+ var _utils = require("@mui/utils");
8
+ const boxClasses = (0, _utils.unstable_generateUtilityClasses)('MuiBox', ['root']);
9
+ var _default = exports.default = boxClasses;
package/node/Box/index.js CHANGED
@@ -5,10 +5,33 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
+ var _exportNames = {
9
+ boxClasses: true
10
+ };
11
+ Object.defineProperty(exports, "boxClasses", {
12
+ enumerable: true,
13
+ get: function () {
14
+ return _boxClasses.default;
15
+ }
16
+ });
8
17
  Object.defineProperty(exports, "default", {
9
18
  enumerable: true,
10
19
  get: function () {
11
20
  return _Box.default;
12
21
  }
13
22
  });
14
- var _Box = _interopRequireDefault(require("./Box"));
23
+ var _Box = _interopRequireDefault(require("./Box"));
24
+ var _boxClasses = _interopRequireWildcard(require("./boxClasses"));
25
+ Object.keys(_boxClasses).forEach(function (key) {
26
+ if (key === "default" || key === "__esModule") return;
27
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
28
+ if (key in exports && exports[key] === _boxClasses[key]) return;
29
+ Object.defineProperty(exports, key, {
30
+ enumerable: true,
31
+ get: function () {
32
+ return _boxClasses[key];
33
+ }
34
+ });
35
+ });
36
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
37
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }