@mui/material 5.14.16 → 5.14.18

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 (36) hide show
  1. package/Autocomplete/Autocomplete.d.ts +3 -0
  2. package/Autocomplete/Autocomplete.js +15 -4
  3. package/CHANGELOG.md +129 -7
  4. package/FilledInput/FilledInput.js +8 -5
  5. package/FormControlLabel/FormControlLabel.js +1 -2
  6. package/InputBase/InputBase.d.ts +4 -2
  7. package/Rating/Rating.js +4 -6
  8. package/TablePagination/TablePagination.d.ts +23 -0
  9. package/TablePagination/TablePagination.js +47 -12
  10. package/TablePagination/TablePaginationActions.d.ts +19 -0
  11. package/TablePagination/TablePaginationActions.js +35 -15
  12. package/index.js +1 -1
  13. package/legacy/Autocomplete/Autocomplete.js +8 -2
  14. package/legacy/FilledInput/FilledInput.js +8 -5
  15. package/legacy/FormControlLabel/FormControlLabel.js +1 -2
  16. package/legacy/Rating/Rating.js +4 -5
  17. package/legacy/TablePagination/TablePagination.js +47 -11
  18. package/legacy/TablePagination/TablePaginationActions.js +35 -14
  19. package/legacy/index.js +1 -1
  20. package/modern/Autocomplete/Autocomplete.js +15 -4
  21. package/modern/FilledInput/FilledInput.js +8 -5
  22. package/modern/FormControlLabel/FormControlLabel.js +1 -2
  23. package/modern/Rating/Rating.js +4 -6
  24. package/modern/TablePagination/TablePagination.js +46 -12
  25. package/modern/TablePagination/TablePaginationActions.js +34 -15
  26. package/modern/index.js +1 -1
  27. package/node/Autocomplete/Autocomplete.js +15 -4
  28. package/node/FilledInput/FilledInput.js +8 -5
  29. package/node/FormControlLabel/FormControlLabel.js +1 -2
  30. package/node/Rating/Rating.js +4 -6
  31. package/node/TablePagination/TablePagination.js +47 -12
  32. package/node/TablePagination/TablePaginationActions.js +35 -15
  33. package/node/index.js +1 -1
  34. package/package.json +6 -6
  35. package/umd/material-ui.development.js +114 -46
  36. package/umd/material-ui.production.min.js +18 -18
@@ -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.16
2
+ * @mui/material v5.14.18
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -39,7 +39,8 @@ var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
39
39
  var _jsxRuntime = require("react/jsx-runtime");
40
40
  var _ClearIcon, _ArrowDropDownIcon;
41
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"];
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({
@@ -957,6 +964,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
957
964
  * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
958
965
  */
959
966
  onInputChange: _propTypes.default.func,
967
+ /**
968
+ * @ignore
969
+ */
970
+ onKeyDown: _propTypes.default.func,
960
971
  /**
961
972
  * Callback fired when the popup requests to be opened.
962
973
  * Use in controlled mode (see open).
@@ -134,6 +134,9 @@ const FilledInputRoot = (0, _styled.default)(_InputBase2.InputBaseRoot, {
134
134
  }, ownerState.hiddenLabel && {
135
135
  paddingTop: 16,
136
136
  paddingBottom: 17
137
+ }, ownerState.hiddenLabel && ownerState.size === 'small' && {
138
+ paddingTop: 8,
139
+ paddingBottom: 9
137
140
  }));
138
141
  });
139
142
  const FilledInputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
@@ -174,11 +177,6 @@ const FilledInputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
174
177
  }, ownerState.hiddenLabel && {
175
178
  paddingTop: 16,
176
179
  paddingBottom: 17
177
- }, ownerState.multiline && {
178
- paddingTop: 0,
179
- paddingBottom: 0,
180
- paddingLeft: 0,
181
- paddingRight: 0
182
180
  }, ownerState.startAdornment && {
183
181
  paddingLeft: 0
184
182
  }, ownerState.endAdornment && {
@@ -186,6 +184,11 @@ const FilledInputInput = (0, _styled.default)(_InputBase2.InputBaseComponent, {
186
184
  }, ownerState.hiddenLabel && ownerState.size === 'small' && {
187
185
  paddingTop: 8,
188
186
  paddingBottom: 9
187
+ }, ownerState.multiline && {
188
+ paddingTop: 0,
189
+ paddingBottom: 0,
190
+ paddingLeft: 0,
191
+ paddingRight: 0
189
192
  }));
190
193
  const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
191
194
  var _ref, _slots$root, _ref2, _slots$input;
@@ -159,8 +159,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
159
159
  ref: ref
160
160
  }, other, {
161
161
  children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Stack.default, {
162
- direction: "row",
163
- alignItems: "center",
162
+ display: "block",
164
163
  children: [label, /*#__PURE__*/(0, _jsxRuntime.jsxs)(AsteriskComponent, {
165
164
  ownerState: ownerState,
166
165
  "aria-hidden": true,
@@ -344,16 +344,14 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
344
344
  const rootNode = rootRef.current;
345
345
  const {
346
346
  right,
347
- left
347
+ left,
348
+ width: containerWidth
348
349
  } = rootNode.getBoundingClientRect();
349
- const {
350
- width
351
- } = rootNode.firstChild.getBoundingClientRect();
352
350
  let percent;
353
351
  if (theme.direction === 'rtl') {
354
- percent = (right - event.clientX) / (width * max);
352
+ percent = (right - event.clientX) / containerWidth;
355
353
  } else {
356
- percent = (event.clientX - left) / (width * max);
354
+ percent = (event.clientX - left) / containerWidth;
357
355
  }
358
356
  let newHover = roundValueToPrecision(max * percent + precision / 2, precision);
359
357
  newHover = clamp(newHover, precision, max);
@@ -26,7 +26,7 @@ var _useId = _interopRequireDefault(require("../utils/useId"));
26
26
  var _tablePaginationClasses = _interopRequireWildcard(require("./tablePaginationClasses"));
27
27
  var _jsxRuntime = require("react/jsx-runtime");
28
28
  var _InputBase;
29
- const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton"];
29
+ const _excluded = ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"];
30
30
  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); }
31
31
  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; }
32
32
  const TablePaginationRoot = (0, _styled.default)(_TableCell.default, {
@@ -151,6 +151,7 @@ const useUtilityClasses = ownerState => {
151
151
  * A `TableCell` based component for placing inside `TableFooter` for pagination.
152
152
  */
153
153
  const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
154
+ var _slotProps$select;
154
155
  const props = (0, _useThemeProps.default)({
155
156
  props: inProps,
156
157
  name: 'MuiTablePagination'
@@ -162,6 +163,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
162
163
  colSpan: colSpanProp,
163
164
  component = _TableCell.default,
164
165
  count,
166
+ disabled = false,
165
167
  getItemAriaLabel = defaultGetAriaLabel,
166
168
  labelDisplayedRows = defaultLabelDisplayedRows,
167
169
  labelRowsPerPage = 'Rows per page:',
@@ -173,19 +175,21 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
173
175
  rowsPerPageOptions = [10, 25, 50, 100],
174
176
  SelectProps = {},
175
177
  showFirstButton = false,
176
- showLastButton = false
178
+ showLastButton = false,
179
+ slotProps
177
180
  } = props,
178
181
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
179
182
  const ownerState = props;
180
183
  const classes = useUtilityClasses(ownerState);
181
- const MenuItemComponent = SelectProps.native ? 'option' : TablePaginationMenuItem;
184
+ const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
185
+ const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
182
186
  let colSpan;
183
187
  if (component === _TableCell.default || component === 'td') {
184
188
  colSpan = colSpanProp || 1000; // col-span over everything
185
189
  }
186
190
 
187
- const selectId = (0, _useId.default)(SelectProps.id);
188
- const labelId = (0, _useId.default)(SelectProps.labelId);
191
+ const selectId = (0, _useId.default)(selectProps.id);
192
+ const labelId = (0, _useId.default)(selectProps.labelId);
189
193
  const getLabelDisplayedRowsTo = () => {
190
194
  if (count === -1) {
191
195
  return (page + 1) * rowsPerPage;
@@ -209,21 +213,22 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
209
213
  children: labelRowsPerPage
210
214
  }), rowsPerPageOptions.length > 1 && /*#__PURE__*/(0, _jsxRuntime.jsx)(TablePaginationSelect, (0, _extends2.default)({
211
215
  variant: "standard"
212
- }, !SelectProps.variant && {
216
+ }, !selectProps.variant && {
213
217
  input: _InputBase || (_InputBase = /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputBase2.default, {}))
214
218
  }, {
215
219
  value: rowsPerPage,
216
220
  onChange: onRowsPerPageChange,
217
221
  id: selectId,
218
222
  labelId: labelId
219
- }, SelectProps, {
220
- classes: (0, _extends2.default)({}, SelectProps.classes, {
223
+ }, selectProps, {
224
+ classes: (0, _extends2.default)({}, selectProps.classes, {
221
225
  // TODO v5 remove `classes.input`
222
- root: (0, _clsx.default)(classes.input, classes.selectRoot, (SelectProps.classes || {}).root),
223
- select: (0, _clsx.default)(classes.select, (SelectProps.classes || {}).select),
226
+ root: (0, _clsx.default)(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
227
+ select: (0, _clsx.default)(classes.select, (selectProps.classes || {}).select),
224
228
  // TODO v5 remove `selectIcon`
225
- icon: (0, _clsx.default)(classes.selectIcon, (SelectProps.classes || {}).icon)
229
+ icon: (0, _clsx.default)(classes.selectIcon, (selectProps.classes || {}).icon)
226
230
  }),
231
+ disabled: disabled,
227
232
  children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/(0, _react.createElement)(MenuItemComponent, (0, _extends2.default)({}, !(0, _base.isHostComponent)(MenuItemComponent) && {
228
233
  ownerState
229
234
  }, {
@@ -249,7 +254,9 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
249
254
  rowsPerPage: rowsPerPage,
250
255
  showFirstButton: showFirstButton,
251
256
  showLastButton: showLastButton,
252
- getItemAriaLabel: getItemAriaLabel
257
+ slotProps: slotProps == null ? void 0 : slotProps.actions,
258
+ getItemAriaLabel: getItemAriaLabel,
259
+ disabled: disabled
253
260
  })]
254
261
  })
255
262
  }));
@@ -267,6 +274,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
267
274
  ActionsComponent: _propTypes.default.elementType,
268
275
  /**
269
276
  * Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
277
+ *
278
+ * This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
279
+ * @deprecated Use `slotProps.actions.previousButton` instead.
270
280
  */
271
281
  backIconButtonProps: _propTypes.default.object,
272
282
  /**
@@ -292,6 +302,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
292
302
  * To enable server side pagination for an unknown number of items, provide -1.
293
303
  */
294
304
  count: _utils.integerPropType.isRequired,
305
+ /**
306
+ * If `true`, the component is disabled.
307
+ * @default false
308
+ */
309
+ disabled: _propTypes.default.bool,
295
310
  /**
296
311
  * Accepts a function which returns a string value that provides a user-friendly name for the current page.
297
312
  * This is important for screen reader users.
@@ -323,6 +338,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
323
338
  labelRowsPerPage: _propTypes.default.node,
324
339
  /**
325
340
  * Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
341
+ *
342
+ * This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
343
+ * @deprecated Use `slotProps.actions.nextButton` instead.
326
344
  */
327
345
  nextIconButtonProps: _propTypes.default.object,
328
346
  /**
@@ -374,6 +392,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
374
392
  })]).isRequired),
375
393
  /**
376
394
  * Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
395
+ *
396
+ * This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
397
+ * @deprecated Use `slotProps.select` instead.
398
+ *
377
399
  * @default {}
378
400
  */
379
401
  SelectProps: _propTypes.default.object,
@@ -387,6 +409,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
387
409
  * @default false
388
410
  */
389
411
  showLastButton: _propTypes.default.bool,
412
+ /**
413
+ * The props used for each slot inside the TablePagination.
414
+ * @default {}
415
+ */
416
+ slotProps: _propTypes.default.shape({
417
+ actions: _propTypes.default.shape({
418
+ firstButton: _propTypes.default.object,
419
+ lastButton: _propTypes.default.object,
420
+ nextButton: _propTypes.default.object,
421
+ previousButton: _propTypes.default.object
422
+ }),
423
+ select: _propTypes.default.object
424
+ }),
390
425
  /**
391
426
  * The system prop that allows defining system overrides as well as additional CSS styles.
392
427
  */
@@ -18,23 +18,26 @@ var _LastPage = _interopRequireDefault(require("../internal/svg-icons/LastPage")
18
18
  var _FirstPage = _interopRequireDefault(require("../internal/svg-icons/FirstPage"));
19
19
  var _jsxRuntime = require("react/jsx-runtime");
20
20
  var _LastPageIcon, _FirstPageIcon, _KeyboardArrowRight, _KeyboardArrowLeft, _KeyboardArrowLeft2, _KeyboardArrowRight2, _FirstPageIcon2, _LastPageIcon2;
21
- const _excluded = ["backIconButtonProps", "count", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton"];
21
+ const _excluded = ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"];
22
22
  /**
23
23
  * @ignore - internal component.
24
24
  */
25
25
  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); }
26
26
  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; }
27
27
  const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
28
+ var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
28
29
  const {
29
30
  backIconButtonProps,
30
31
  count,
32
+ disabled = false,
31
33
  getItemAriaLabel,
32
34
  nextIconButtonProps,
33
35
  onPageChange,
34
36
  page,
35
37
  rowsPerPage,
36
38
  showFirstButton,
37
- showLastButton
39
+ showLastButton,
40
+ slotProps
38
41
  } = props,
39
42
  other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
40
43
  const theme = (0, _useTheme.default)();
@@ -53,35 +56,37 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
53
56
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", (0, _extends2.default)({
54
57
  ref: ref
55
58
  }, other, {
56
- children: [showFirstButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
59
+ children: [showFirstButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
57
60
  onClick: handleFirstPageButtonClick,
58
- disabled: page === 0,
61
+ disabled: disabled || page === 0,
59
62
  "aria-label": getItemAriaLabel('first', page),
60
- title: getItemAriaLabel('first', page),
63
+ title: getItemAriaLabel('first', page)
64
+ }, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
61
65
  children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_LastPage.default, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FirstPage.default, {}))
62
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
66
+ })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
63
67
  onClick: handleBackButtonClick,
64
- disabled: page === 0,
68
+ disabled: disabled || page === 0,
65
69
  color: "inherit",
66
70
  "aria-label": getItemAriaLabel('previous', page),
67
71
  title: getItemAriaLabel('previous', page)
68
- }, backIconButtonProps, {
72
+ }, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
69
73
  children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowRight3.default, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowLeft3.default, {}))
70
74
  })), /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
71
75
  onClick: handleNextButtonClick,
72
- disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
76
+ disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
73
77
  color: "inherit",
74
78
  "aria-label": getItemAriaLabel('next', page),
75
79
  title: getItemAriaLabel('next', page)
76
- }, nextIconButtonProps, {
80
+ }, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
77
81
  children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowLeft3.default, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_KeyboardArrowRight3.default, {}))
78
- })), showLastButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
82
+ })), showLastButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, (0, _extends2.default)({
79
83
  onClick: handleLastPageButtonClick,
80
- disabled: page >= Math.ceil(count / rowsPerPage) - 1,
84
+ disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
81
85
  "aria-label": getItemAriaLabel('last', page),
82
- title: getItemAriaLabel('last', page),
86
+ title: getItemAriaLabel('last', page)
87
+ }, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
83
88
  children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_FirstPage.default, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/(0, _jsxRuntime.jsx)(_LastPage.default, {}))
84
- })]
89
+ }))]
85
90
  }));
86
91
  });
87
92
  process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
@@ -93,6 +98,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
93
98
  * The total number of rows.
94
99
  */
95
100
  count: _propTypes.default.number.isRequired,
101
+ /**
102
+ * If `true`, the component is disabled.
103
+ * @default false
104
+ */
105
+ disabled: _propTypes.default.bool,
96
106
  /**
97
107
  * Accepts a function which returns a string value that provides a user-friendly name for the current page.
98
108
  *
@@ -129,6 +139,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
129
139
  /**
130
140
  * If `true`, show the last-page button.
131
141
  */
132
- showLastButton: _propTypes.default.bool.isRequired
142
+ showLastButton: _propTypes.default.bool.isRequired,
143
+ /**
144
+ * The props used for each slot inside the TablePaginationActions.
145
+ * @default {}
146
+ */
147
+ slotProps: _propTypes.default.shape({
148
+ firstButton: _propTypes.default.object,
149
+ lastButton: _propTypes.default.object,
150
+ nextButton: _propTypes.default.object,
151
+ previousButton: _propTypes.default.object
152
+ })
133
153
  } : void 0;
134
154
  var _default = exports.default = TablePaginationActions;
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/material v5.14.16
2
+ * @mui/material v5.14.18
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the