@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.
- package/Autocomplete/Autocomplete.d.ts +3 -0
- package/Autocomplete/Autocomplete.js +15 -4
- package/CHANGELOG.md +129 -7
- package/FilledInput/FilledInput.js +8 -5
- package/FormControlLabel/FormControlLabel.js +1 -2
- package/InputBase/InputBase.d.ts +4 -2
- package/Rating/Rating.js +4 -6
- package/TablePagination/TablePagination.d.ts +23 -0
- package/TablePagination/TablePagination.js +47 -12
- package/TablePagination/TablePaginationActions.d.ts +19 -0
- package/TablePagination/TablePaginationActions.js +35 -15
- package/index.js +1 -1
- package/legacy/Autocomplete/Autocomplete.js +8 -2
- package/legacy/FilledInput/FilledInput.js +8 -5
- package/legacy/FormControlLabel/FormControlLabel.js +1 -2
- package/legacy/Rating/Rating.js +4 -5
- package/legacy/TablePagination/TablePagination.js +47 -11
- package/legacy/TablePagination/TablePaginationActions.js +35 -14
- package/legacy/index.js +1 -1
- package/modern/Autocomplete/Autocomplete.js +15 -4
- package/modern/FilledInput/FilledInput.js +8 -5
- package/modern/FormControlLabel/FormControlLabel.js +1 -2
- package/modern/Rating/Rating.js +4 -6
- package/modern/TablePagination/TablePagination.js +46 -12
- package/modern/TablePagination/TablePaginationActions.js +34 -15
- package/modern/index.js +1 -1
- package/node/Autocomplete/Autocomplete.js +15 -4
- package/node/FilledInput/FilledInput.js +8 -5
- package/node/FormControlLabel/FormControlLabel.js +1 -2
- package/node/Rating/Rating.js +4 -6
- package/node/TablePagination/TablePagination.js +47 -12
- package/node/TablePagination/TablePaginationActions.js +35 -15
- package/node/index.js +1 -1
- package/package.json +6 -6
- package/umd/material-ui.development.js +114 -46
- package/umd/material-ui.production.min.js +18 -18
|
@@ -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';
|
|
@@ -19,16 +19,19 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
|
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
21
|
const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
|
|
22
|
+
var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
|
|
22
23
|
const {
|
|
23
24
|
backIconButtonProps,
|
|
24
25
|
count,
|
|
26
|
+
disabled = false,
|
|
25
27
|
getItemAriaLabel,
|
|
26
28
|
nextIconButtonProps,
|
|
27
29
|
onPageChange,
|
|
28
30
|
page,
|
|
29
31
|
rowsPerPage,
|
|
30
32
|
showFirstButton,
|
|
31
|
-
showLastButton
|
|
33
|
+
showLastButton,
|
|
34
|
+
slotProps
|
|
32
35
|
} = props,
|
|
33
36
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
34
37
|
const theme = useTheme();
|
|
@@ -47,35 +50,37 @@ const TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePagin
|
|
|
47
50
|
return /*#__PURE__*/_jsxs("div", _extends({
|
|
48
51
|
ref: ref
|
|
49
52
|
}, other, {
|
|
50
|
-
children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, {
|
|
53
|
+
children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
|
|
51
54
|
onClick: handleFirstPageButtonClick,
|
|
52
|
-
disabled: page === 0,
|
|
55
|
+
disabled: disabled || page === 0,
|
|
53
56
|
"aria-label": getItemAriaLabel('first', page),
|
|
54
|
-
title: getItemAriaLabel('first', page)
|
|
57
|
+
title: getItemAriaLabel('first', page)
|
|
58
|
+
}, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
|
|
55
59
|
children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
|
|
56
|
-
}), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
60
|
+
})), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
57
61
|
onClick: handleBackButtonClick,
|
|
58
|
-
disabled: page === 0,
|
|
62
|
+
disabled: disabled || page === 0,
|
|
59
63
|
color: "inherit",
|
|
60
64
|
"aria-label": getItemAriaLabel('previous', page),
|
|
61
65
|
title: getItemAriaLabel('previous', page)
|
|
62
|
-
}, backIconButtonProps, {
|
|
66
|
+
}, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
|
|
63
67
|
children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
|
|
64
68
|
})), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
65
69
|
onClick: handleNextButtonClick,
|
|
66
|
-
disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
|
|
70
|
+
disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
|
|
67
71
|
color: "inherit",
|
|
68
72
|
"aria-label": getItemAriaLabel('next', page),
|
|
69
73
|
title: getItemAriaLabel('next', page)
|
|
70
|
-
}, nextIconButtonProps, {
|
|
74
|
+
}, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
|
|
71
75
|
children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
|
|
72
|
-
})), showLastButton && /*#__PURE__*/_jsx(IconButton, {
|
|
76
|
+
})), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
|
|
73
77
|
onClick: handleLastPageButtonClick,
|
|
74
|
-
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
|
|
78
|
+
disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
|
|
75
79
|
"aria-label": getItemAriaLabel('last', page),
|
|
76
|
-
title: getItemAriaLabel('last', page)
|
|
80
|
+
title: getItemAriaLabel('last', page)
|
|
81
|
+
}, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
|
|
77
82
|
children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
|
|
78
|
-
})]
|
|
83
|
+
}))]
|
|
79
84
|
}));
|
|
80
85
|
});
|
|
81
86
|
process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
@@ -87,6 +92,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
|
87
92
|
* The total number of rows.
|
|
88
93
|
*/
|
|
89
94
|
count: PropTypes.number.isRequired,
|
|
95
|
+
/**
|
|
96
|
+
* If `true`, the component is disabled.
|
|
97
|
+
* @default false
|
|
98
|
+
*/
|
|
99
|
+
disabled: PropTypes.bool,
|
|
90
100
|
/**
|
|
91
101
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
92
102
|
*
|
|
@@ -123,6 +133,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
|
123
133
|
/**
|
|
124
134
|
* If `true`, show the last-page button.
|
|
125
135
|
*/
|
|
126
|
-
showLastButton: PropTypes.bool.isRequired
|
|
136
|
+
showLastButton: PropTypes.bool.isRequired,
|
|
137
|
+
/**
|
|
138
|
+
* The props used for each slot inside the TablePaginationActions.
|
|
139
|
+
* @default {}
|
|
140
|
+
*/
|
|
141
|
+
slotProps: PropTypes.shape({
|
|
142
|
+
firstButton: PropTypes.object,
|
|
143
|
+
lastButton: PropTypes.object,
|
|
144
|
+
nextButton: PropTypes.object,
|
|
145
|
+
previousButton: PropTypes.object
|
|
146
|
+
})
|
|
127
147
|
} : void 0;
|
|
128
148
|
export default TablePaginationActions;
|
package/index.js
CHANGED
|
@@ -540,9 +540,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
|
|
|
540
540
|
};
|
|
541
541
|
var renderGroup = renderGroupProp || defaultRenderGroup;
|
|
542
542
|
var defaultRenderOption = function defaultRenderOption(props2, option) {
|
|
543
|
-
|
|
543
|
+
var key = props2.key,
|
|
544
|
+
otherProps = _objectWithoutProperties(props2, ["key"]);
|
|
545
|
+
return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
|
|
544
546
|
children: getOptionLabel(option)
|
|
545
|
-
}));
|
|
547
|
+
}), key);
|
|
546
548
|
};
|
|
547
549
|
var renderOption = renderOptionProp || defaultRenderOption;
|
|
548
550
|
var renderListOption = function renderListOption(option, index) {
|
|
@@ -961,6 +963,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
|
|
|
961
963
|
* @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
|
|
962
964
|
*/
|
|
963
965
|
onInputChange: PropTypes.func,
|
|
966
|
+
/**
|
|
967
|
+
* @ignore
|
|
968
|
+
*/
|
|
969
|
+
onKeyDown: PropTypes.func,
|
|
964
970
|
/**
|
|
965
971
|
* Callback fired when the popup requests to be opened.
|
|
966
972
|
* Use in controlled mode (see open).
|
|
@@ -115,6 +115,9 @@ var FilledInputRoot = styled(InputBaseRoot, {
|
|
|
115
115
|
}, ownerState.hiddenLabel && {
|
|
116
116
|
paddingTop: 16,
|
|
117
117
|
paddingBottom: 17
|
|
118
|
+
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
|
119
|
+
paddingTop: 8,
|
|
120
|
+
paddingBottom: 9
|
|
118
121
|
}));
|
|
119
122
|
});
|
|
120
123
|
var FilledInputInput = styled(InputBaseInput, {
|
|
@@ -154,11 +157,6 @@ var FilledInputInput = styled(InputBaseInput, {
|
|
|
154
157
|
}, ownerState.hiddenLabel && {
|
|
155
158
|
paddingTop: 16,
|
|
156
159
|
paddingBottom: 17
|
|
157
|
-
}, ownerState.multiline && {
|
|
158
|
-
paddingTop: 0,
|
|
159
|
-
paddingBottom: 0,
|
|
160
|
-
paddingLeft: 0,
|
|
161
|
-
paddingRight: 0
|
|
162
160
|
}, ownerState.startAdornment && {
|
|
163
161
|
paddingLeft: 0
|
|
164
162
|
}, ownerState.endAdornment && {
|
|
@@ -166,6 +164,11 @@ var FilledInputInput = styled(InputBaseInput, {
|
|
|
166
164
|
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
|
167
165
|
paddingTop: 8,
|
|
168
166
|
paddingBottom: 9
|
|
167
|
+
}, ownerState.multiline && {
|
|
168
|
+
paddingTop: 0,
|
|
169
|
+
paddingBottom: 0,
|
|
170
|
+
paddingLeft: 0,
|
|
171
|
+
paddingRight: 0
|
|
169
172
|
});
|
|
170
173
|
});
|
|
171
174
|
var FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
|
|
@@ -148,8 +148,7 @@ var FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel(i
|
|
|
148
148
|
ref: ref
|
|
149
149
|
}, other, {
|
|
150
150
|
children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
|
|
151
|
-
|
|
152
|
-
alignItems: "center",
|
|
151
|
+
display: "block",
|
|
153
152
|
children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
|
|
154
153
|
ownerState: ownerState,
|
|
155
154
|
"aria-hidden": true,
|
package/legacy/Rating/Rating.js
CHANGED
|
@@ -346,14 +346,13 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
|
|
|
346
346
|
var rootNode = rootRef.current;
|
|
347
347
|
var _rootNode$getBounding = rootNode.getBoundingClientRect(),
|
|
348
348
|
right = _rootNode$getBounding.right,
|
|
349
|
-
left = _rootNode$getBounding.left
|
|
350
|
-
|
|
351
|
-
width = _rootNode$firstChild$.width;
|
|
349
|
+
left = _rootNode$getBounding.left,
|
|
350
|
+
containerWidth = _rootNode$getBounding.width;
|
|
352
351
|
var percent;
|
|
353
352
|
if (theme.direction === 'rtl') {
|
|
354
|
-
percent = (right - event.clientX) /
|
|
353
|
+
percent = (right - event.clientX) / containerWidth;
|
|
355
354
|
} else {
|
|
356
|
-
percent = (event.clientX - left) /
|
|
355
|
+
percent = (event.clientX - left) / containerWidth;
|
|
357
356
|
}
|
|
358
357
|
var newHover = roundValueToPrecision(max * percent + precision / 2, precision);
|
|
359
358
|
newHover = clamp(newHover, precision, max);
|
|
@@ -152,6 +152,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
|
|
|
152
152
|
* A `TableCell` based component for placing inside `TableFooter` for pagination.
|
|
153
153
|
*/
|
|
154
154
|
var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
|
|
155
|
+
var _slotProps$select;
|
|
155
156
|
var props = useThemeProps({
|
|
156
157
|
props: inProps,
|
|
157
158
|
name: 'MuiTablePagination'
|
|
@@ -164,6 +165,8 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
|
|
|
164
165
|
_props$component = props.component,
|
|
165
166
|
component = _props$component === void 0 ? TableCell : _props$component,
|
|
166
167
|
count = props.count,
|
|
168
|
+
_props$disabled = props.disabled,
|
|
169
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
167
170
|
_props$getItemAriaLab = props.getItemAriaLabel,
|
|
168
171
|
getItemAriaLabel = _props$getItemAriaLab === void 0 ? defaultGetAriaLabel : _props$getItemAriaLab,
|
|
169
172
|
_props$labelDisplayed = props.labelDisplayedRows,
|
|
@@ -183,17 +186,19 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
|
|
|
183
186
|
showFirstButton = _props$showFirstButto === void 0 ? false : _props$showFirstButto,
|
|
184
187
|
_props$showLastButton = props.showLastButton,
|
|
185
188
|
showLastButton = _props$showLastButton === void 0 ? false : _props$showLastButton,
|
|
186
|
-
|
|
189
|
+
slotProps = props.slotProps,
|
|
190
|
+
other = _objectWithoutProperties(props, ["ActionsComponent", "backIconButtonProps", "className", "colSpan", "component", "count", "disabled", "getItemAriaLabel", "labelDisplayedRows", "labelRowsPerPage", "nextIconButtonProps", "onPageChange", "onRowsPerPageChange", "page", "rowsPerPage", "rowsPerPageOptions", "SelectProps", "showFirstButton", "showLastButton", "slotProps"]);
|
|
187
191
|
var ownerState = props;
|
|
188
192
|
var classes = useUtilityClasses(ownerState);
|
|
189
|
-
var
|
|
193
|
+
var selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
|
|
194
|
+
var MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
|
|
190
195
|
var colSpan;
|
|
191
196
|
if (component === TableCell || component === 'td') {
|
|
192
197
|
colSpan = colSpanProp || 1000; // col-span over everything
|
|
193
198
|
}
|
|
194
199
|
|
|
195
|
-
var selectId = useId(
|
|
196
|
-
var labelId = useId(
|
|
200
|
+
var selectId = useId(selectProps.id);
|
|
201
|
+
var labelId = useId(selectProps.labelId);
|
|
197
202
|
var getLabelDisplayedRowsTo = function getLabelDisplayedRowsTo() {
|
|
198
203
|
if (count === -1) {
|
|
199
204
|
return (page + 1) * rowsPerPage;
|
|
@@ -217,21 +222,22 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
|
|
|
217
222
|
children: labelRowsPerPage
|
|
218
223
|
}), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
|
|
219
224
|
variant: "standard"
|
|
220
|
-
}, !
|
|
225
|
+
}, !selectProps.variant && {
|
|
221
226
|
input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
|
|
222
227
|
}, {
|
|
223
228
|
value: rowsPerPage,
|
|
224
229
|
onChange: onRowsPerPageChange,
|
|
225
230
|
id: selectId,
|
|
226
231
|
labelId: labelId
|
|
227
|
-
},
|
|
228
|
-
classes: _extends({},
|
|
232
|
+
}, selectProps, {
|
|
233
|
+
classes: _extends({}, selectProps.classes, {
|
|
229
234
|
// TODO v5 remove `classes.input`
|
|
230
|
-
root: clsx(classes.input, classes.selectRoot, (
|
|
231
|
-
select: clsx(classes.select, (
|
|
235
|
+
root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
|
|
236
|
+
select: clsx(classes.select, (selectProps.classes || {}).select),
|
|
232
237
|
// TODO v5 remove `selectIcon`
|
|
233
|
-
icon: clsx(classes.selectIcon, (
|
|
238
|
+
icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
|
|
234
239
|
}),
|
|
240
|
+
disabled: disabled,
|
|
235
241
|
children: rowsPerPageOptions.map(function (rowsPerPageOption) {
|
|
236
242
|
return /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
|
|
237
243
|
ownerState: ownerState
|
|
@@ -259,7 +265,9 @@ var TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inP
|
|
|
259
265
|
rowsPerPage: rowsPerPage,
|
|
260
266
|
showFirstButton: showFirstButton,
|
|
261
267
|
showLastButton: showLastButton,
|
|
262
|
-
|
|
268
|
+
slotProps: slotProps == null ? void 0 : slotProps.actions,
|
|
269
|
+
getItemAriaLabel: getItemAriaLabel,
|
|
270
|
+
disabled: disabled
|
|
263
271
|
})]
|
|
264
272
|
})
|
|
265
273
|
}));
|
|
@@ -277,6 +285,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
277
285
|
ActionsComponent: PropTypes.elementType,
|
|
278
286
|
/**
|
|
279
287
|
* Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
|
|
288
|
+
*
|
|
289
|
+
* This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
|
|
290
|
+
* @deprecated Use `slotProps.actions.previousButton` instead.
|
|
280
291
|
*/
|
|
281
292
|
backIconButtonProps: PropTypes.object,
|
|
282
293
|
/**
|
|
@@ -302,6 +313,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
302
313
|
* To enable server side pagination for an unknown number of items, provide -1.
|
|
303
314
|
*/
|
|
304
315
|
count: integerPropType.isRequired,
|
|
316
|
+
/**
|
|
317
|
+
* If `true`, the component is disabled.
|
|
318
|
+
* @default false
|
|
319
|
+
*/
|
|
320
|
+
disabled: PropTypes.bool,
|
|
305
321
|
/**
|
|
306
322
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
307
323
|
* This is important for screen reader users.
|
|
@@ -333,6 +349,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
333
349
|
labelRowsPerPage: PropTypes.node,
|
|
334
350
|
/**
|
|
335
351
|
* Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
352
|
+
*
|
|
353
|
+
* This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
|
|
354
|
+
* @deprecated Use `slotProps.actions.nextButton` instead.
|
|
336
355
|
*/
|
|
337
356
|
nextIconButtonProps: PropTypes.object,
|
|
338
357
|
/**
|
|
@@ -382,6 +401,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
382
401
|
})]).isRequired),
|
|
383
402
|
/**
|
|
384
403
|
* Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
|
|
404
|
+
*
|
|
405
|
+
* This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
|
|
406
|
+
* @deprecated Use `slotProps.select` instead.
|
|
407
|
+
*
|
|
385
408
|
* @default {}
|
|
386
409
|
*/
|
|
387
410
|
SelectProps: PropTypes.object,
|
|
@@ -395,6 +418,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
395
418
|
* @default false
|
|
396
419
|
*/
|
|
397
420
|
showLastButton: PropTypes.bool,
|
|
421
|
+
/**
|
|
422
|
+
* The props used for each slot inside the TablePagination.
|
|
423
|
+
* @default {}
|
|
424
|
+
*/
|
|
425
|
+
slotProps: PropTypes.shape({
|
|
426
|
+
actions: PropTypes.shape({
|
|
427
|
+
firstButton: PropTypes.object,
|
|
428
|
+
lastButton: PropTypes.object,
|
|
429
|
+
nextButton: PropTypes.object,
|
|
430
|
+
previousButton: PropTypes.object
|
|
431
|
+
}),
|
|
432
|
+
select: PropTypes.object
|
|
433
|
+
}),
|
|
398
434
|
/**
|
|
399
435
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
400
436
|
*/
|
|
@@ -18,8 +18,11 @@ import FirstPageIcon from '../internal/svg-icons/FirstPage';
|
|
|
18
18
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
19
19
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
20
20
|
var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginationActions(props, ref) {
|
|
21
|
+
var _slotProps$firstButto, _slotProps$previousBu, _slotProps$nextButton, _slotProps$lastButton;
|
|
21
22
|
var backIconButtonProps = props.backIconButtonProps,
|
|
22
23
|
count = props.count,
|
|
24
|
+
_props$disabled = props.disabled,
|
|
25
|
+
disabled = _props$disabled === void 0 ? false : _props$disabled,
|
|
23
26
|
getItemAriaLabel = props.getItemAriaLabel,
|
|
24
27
|
nextIconButtonProps = props.nextIconButtonProps,
|
|
25
28
|
onPageChange = props.onPageChange,
|
|
@@ -27,7 +30,8 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
|
|
|
27
30
|
rowsPerPage = props.rowsPerPage,
|
|
28
31
|
showFirstButton = props.showFirstButton,
|
|
29
32
|
showLastButton = props.showLastButton,
|
|
30
|
-
|
|
33
|
+
slotProps = props.slotProps,
|
|
34
|
+
other = _objectWithoutProperties(props, ["backIconButtonProps", "count", "disabled", "getItemAriaLabel", "nextIconButtonProps", "onPageChange", "page", "rowsPerPage", "showFirstButton", "showLastButton", "slotProps"]);
|
|
31
35
|
var theme = useTheme();
|
|
32
36
|
var handleFirstPageButtonClick = function handleFirstPageButtonClick(event) {
|
|
33
37
|
onPageChange(event, 0);
|
|
@@ -44,35 +48,37 @@ var TablePaginationActions = /*#__PURE__*/React.forwardRef(function TablePaginat
|
|
|
44
48
|
return /*#__PURE__*/_jsxs("div", _extends({
|
|
45
49
|
ref: ref
|
|
46
50
|
}, other, {
|
|
47
|
-
children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, {
|
|
51
|
+
children: [showFirstButton && /*#__PURE__*/_jsx(IconButton, _extends({
|
|
48
52
|
onClick: handleFirstPageButtonClick,
|
|
49
|
-
disabled: page === 0,
|
|
53
|
+
disabled: disabled || page === 0,
|
|
50
54
|
"aria-label": getItemAriaLabel('first', page),
|
|
51
|
-
title: getItemAriaLabel('first', page)
|
|
55
|
+
title: getItemAriaLabel('first', page)
|
|
56
|
+
}, (_slotProps$firstButto = slotProps == null ? void 0 : slotProps.firstButton) != null ? _slotProps$firstButto : {}, {
|
|
52
57
|
children: theme.direction === 'rtl' ? _LastPageIcon || (_LastPageIcon = /*#__PURE__*/_jsx(LastPageIcon, {})) : _FirstPageIcon || (_FirstPageIcon = /*#__PURE__*/_jsx(FirstPageIcon, {}))
|
|
53
|
-
}), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
58
|
+
})), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
54
59
|
onClick: handleBackButtonClick,
|
|
55
|
-
disabled: page === 0,
|
|
60
|
+
disabled: disabled || page === 0,
|
|
56
61
|
color: "inherit",
|
|
57
62
|
"aria-label": getItemAriaLabel('previous', page),
|
|
58
63
|
title: getItemAriaLabel('previous', page)
|
|
59
|
-
}, backIconButtonProps, {
|
|
64
|
+
}, (_slotProps$previousBu = slotProps == null ? void 0 : slotProps.previousButton) != null ? _slotProps$previousBu : backIconButtonProps, {
|
|
60
65
|
children: theme.direction === 'rtl' ? _KeyboardArrowRight || (_KeyboardArrowRight = /*#__PURE__*/_jsx(KeyboardArrowRight, {})) : _KeyboardArrowLeft || (_KeyboardArrowLeft = /*#__PURE__*/_jsx(KeyboardArrowLeft, {}))
|
|
61
66
|
})), /*#__PURE__*/_jsx(IconButton, _extends({
|
|
62
67
|
onClick: handleNextButtonClick,
|
|
63
|
-
disabled: count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false,
|
|
68
|
+
disabled: disabled || (count !== -1 ? page >= Math.ceil(count / rowsPerPage) - 1 : false),
|
|
64
69
|
color: "inherit",
|
|
65
70
|
"aria-label": getItemAriaLabel('next', page),
|
|
66
71
|
title: getItemAriaLabel('next', page)
|
|
67
|
-
}, nextIconButtonProps, {
|
|
72
|
+
}, (_slotProps$nextButton = slotProps == null ? void 0 : slotProps.nextButton) != null ? _slotProps$nextButton : nextIconButtonProps, {
|
|
68
73
|
children: theme.direction === 'rtl' ? _KeyboardArrowLeft2 || (_KeyboardArrowLeft2 = /*#__PURE__*/_jsx(KeyboardArrowLeft, {})) : _KeyboardArrowRight2 || (_KeyboardArrowRight2 = /*#__PURE__*/_jsx(KeyboardArrowRight, {}))
|
|
69
|
-
})), showLastButton && /*#__PURE__*/_jsx(IconButton, {
|
|
74
|
+
})), showLastButton && /*#__PURE__*/_jsx(IconButton, _extends({
|
|
70
75
|
onClick: handleLastPageButtonClick,
|
|
71
|
-
disabled: page >= Math.ceil(count / rowsPerPage) - 1,
|
|
76
|
+
disabled: disabled || page >= Math.ceil(count / rowsPerPage) - 1,
|
|
72
77
|
"aria-label": getItemAriaLabel('last', page),
|
|
73
|
-
title: getItemAriaLabel('last', page)
|
|
78
|
+
title: getItemAriaLabel('last', page)
|
|
79
|
+
}, (_slotProps$lastButton = slotProps == null ? void 0 : slotProps.lastButton) != null ? _slotProps$lastButton : {}, {
|
|
74
80
|
children: theme.direction === 'rtl' ? _FirstPageIcon2 || (_FirstPageIcon2 = /*#__PURE__*/_jsx(FirstPageIcon, {})) : _LastPageIcon2 || (_LastPageIcon2 = /*#__PURE__*/_jsx(LastPageIcon, {}))
|
|
75
|
-
})]
|
|
81
|
+
}))]
|
|
76
82
|
}));
|
|
77
83
|
});
|
|
78
84
|
process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
@@ -84,6 +90,11 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
|
84
90
|
* The total number of rows.
|
|
85
91
|
*/
|
|
86
92
|
count: PropTypes.number.isRequired,
|
|
93
|
+
/**
|
|
94
|
+
* If `true`, the component is disabled.
|
|
95
|
+
* @default false
|
|
96
|
+
*/
|
|
97
|
+
disabled: PropTypes.bool,
|
|
87
98
|
/**
|
|
88
99
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
89
100
|
*
|
|
@@ -120,6 +131,16 @@ process.env.NODE_ENV !== "production" ? TablePaginationActions.propTypes = {
|
|
|
120
131
|
/**
|
|
121
132
|
* If `true`, show the last-page button.
|
|
122
133
|
*/
|
|
123
|
-
showLastButton: PropTypes.bool.isRequired
|
|
134
|
+
showLastButton: PropTypes.bool.isRequired,
|
|
135
|
+
/**
|
|
136
|
+
* The props used for each slot inside the TablePaginationActions.
|
|
137
|
+
* @default {}
|
|
138
|
+
*/
|
|
139
|
+
slotProps: PropTypes.shape({
|
|
140
|
+
firstButton: PropTypes.object,
|
|
141
|
+
lastButton: PropTypes.object,
|
|
142
|
+
nextButton: PropTypes.object,
|
|
143
|
+
previousButton: PropTypes.object
|
|
144
|
+
})
|
|
124
145
|
} : void 0;
|
|
125
146
|
export default TablePaginationActions;
|
package/legacy/index.js
CHANGED
|
@@ -4,7 +4,8 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
|
|
|
4
4
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
5
5
|
var _ClearIcon, _ArrowDropDownIcon;
|
|
6
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"]
|
|
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) =>
|
|
527
|
-
|
|
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({
|
|
@@ -941,6 +948,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
|
|
|
941
948
|
* @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
|
|
942
949
|
*/
|
|
943
950
|
onInputChange: PropTypes.func,
|
|
951
|
+
/**
|
|
952
|
+
* @ignore
|
|
953
|
+
*/
|
|
954
|
+
onKeyDown: PropTypes.func,
|
|
944
955
|
/**
|
|
945
956
|
* Callback fired when the popup requests to be opened.
|
|
946
957
|
* Use in controlled mode (see open).
|
|
@@ -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({
|
|
@@ -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
|
-
|
|
155
|
-
alignItems: "center",
|
|
154
|
+
display: "block",
|
|
156
155
|
children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
|
|
157
156
|
ownerState: ownerState,
|
|
158
157
|
"aria-hidden": true,
|
package/modern/Rating/Rating.js
CHANGED
|
@@ -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) /
|
|
345
|
+
percent = (right - event.clientX) / containerWidth;
|
|
348
346
|
} else {
|
|
349
|
-
percent = (event.clientX - left) /
|
|
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);
|