@mui/material 5.14.17 → 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/BottomNavigation/BottomNavigation.js +0 -0
- package/CHANGELOG.md +65 -5
- package/FilledInput/FilledInput.js +8 -5
- package/FormControlLabel/FormControlLabel.js +1 -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/BottomNavigation/BottomNavigation.js +0 -0
- 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/BottomNavigation/BottomNavigation.js +0 -0
- 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/BottomNavigation/BottomNavigation.js +0 -0
- 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 +111 -45
- package/umd/material-ui.production.min.js +18 -18
|
@@ -195,6 +195,9 @@ export interface AutocompleteProps<
|
|
|
195
195
|
* @default 'No options'
|
|
196
196
|
*/
|
|
197
197
|
noOptionsText?: React.ReactNode;
|
|
198
|
+
onKeyDown?: (
|
|
199
|
+
event: React.KeyboardEvent<HTMLDivElement> & { defaultMuiPrevented?: boolean },
|
|
200
|
+
) => void;
|
|
198
201
|
/**
|
|
199
202
|
* Override the default text for the *open popup* icon button.
|
|
200
203
|
*
|
|
@@ -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';
|
|
@@ -527,9 +528,15 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
|
|
|
527
528
|
})]
|
|
528
529
|
}, params.key);
|
|
529
530
|
const renderGroup = renderGroupProp || defaultRenderGroup;
|
|
530
|
-
const defaultRenderOption = (props2, option) =>
|
|
531
|
-
|
|
532
|
-
|
|
531
|
+
const defaultRenderOption = (props2, option) => {
|
|
532
|
+
const {
|
|
533
|
+
key
|
|
534
|
+
} = props2,
|
|
535
|
+
otherProps = _objectWithoutPropertiesLoose(props2, _excluded3);
|
|
536
|
+
return /*#__PURE__*/_jsx("li", _extends({}, otherProps, {
|
|
537
|
+
children: getOptionLabel(option)
|
|
538
|
+
}), key);
|
|
539
|
+
};
|
|
533
540
|
const renderOption = renderOptionProp || defaultRenderOption;
|
|
534
541
|
const renderListOption = (option, index) => {
|
|
535
542
|
const optionProps = getOptionProps({
|
|
@@ -945,6 +952,10 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
|
|
|
945
952
|
* @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
|
|
946
953
|
*/
|
|
947
954
|
onInputChange: PropTypes.func,
|
|
955
|
+
/**
|
|
956
|
+
* @ignore
|
|
957
|
+
*/
|
|
958
|
+
onKeyDown: PropTypes.func,
|
|
948
959
|
/**
|
|
949
960
|
* Callback fired when the popup requests to be opened.
|
|
950
961
|
* Use in controlled mode (see open).
|
|
File without changes
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,65 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## 5.14.18
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v5.14.17..master -->
|
|
6
|
+
|
|
7
|
+
_Nov 14, 2023_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
|
|
10
|
+
|
|
11
|
+
- 💫 Introduced new [Stepper](https://mui.com/joy-ui/react-stepper/) component in Joy UI (#39688) @siriwatknp
|
|
12
|
+
- other 🐛 bug fixes and 📚 documentation improvements
|
|
13
|
+
|
|
14
|
+
### `@mui/material@5.14.18`
|
|
15
|
+
|
|
16
|
+
- ​<!-- 32 -->[Autocomplete] Add `defaultMuiPrevented` to onKeyDown type (#39820) @sai6855
|
|
17
|
+
- ​<!-- 31 -->[Autocomplete] Fix React key warning in Next.js (#39795) @mj12albert
|
|
18
|
+
- ​<!-- 24 -->[Checkbox] Asterisk placement aligned correctly (#39721) @axelbostrom
|
|
19
|
+
- ​<!-- 04 -->[Rating] Fix the hover highlighting for spaced icons (#39775) @ZeeshanTamboli
|
|
20
|
+
- ​<!-- 03 -->[TablePagination] Implement `slotProps` pattern for the actions and the select slots (#39353) @anle9650
|
|
21
|
+
- ​<!-- 02 -->[TextField] Fix padding on small filled multiline TextField (#39769) @mj12albert
|
|
22
|
+
|
|
23
|
+
### `@mui/joy@5.0.0-beta.15`
|
|
24
|
+
|
|
25
|
+
- ​<!-- 11 -->[Stepper] Add new `Stepper` component (#39688) @siriwatknp
|
|
26
|
+
- ​<!-- 12 -->[Select] Fix displaying placeholder when multiple is true (#39806) @sai6855
|
|
27
|
+
|
|
28
|
+
### `@mui/material-next@6.0.0-alpha.110`
|
|
29
|
+
|
|
30
|
+
- ​<!-- 26 -->[ButtonGroup] Copy `ButtonGroup` to material next (#39739) @lhilgert9
|
|
31
|
+
- ​<!-- 09 -->[ProgressIndicator] Change `CircularProgress` files to ts (#39791) @lhilgert9
|
|
32
|
+
- ​<!-- 08 -->[ProgressIndicator] Change `LinearProgress` files to ts (#39793) @lhilgert9
|
|
33
|
+
- ​<!-- 07 -->[ProgressIndicator] Copy `LinearProgress` to material next (#39779) @lhilgert9
|
|
34
|
+
- ​<!-- 06 -->[ProgressIndicator] Copy `CircularProgress` to material next (#39780) @lhilgert9
|
|
35
|
+
- ​<!-- 05 -->[TextField] Add FormLabel and InputLabel components (#39483) @mj12albert
|
|
36
|
+
|
|
37
|
+
## Docs
|
|
38
|
+
|
|
39
|
+
- ​<!-- 30 -->[base-ui][NumberInput] Fix inconsistent demo component names (#39786) @mnajdova
|
|
40
|
+
- ​<!-- 29 -->[base-ui][Menu] Refine demos (#39823) @zanivan
|
|
41
|
+
- ​<!-- 28 -->[base-ui][Switch] Refine demos (#39822) @zanivan
|
|
42
|
+
- ​<!-- 16 -->[joy-ui] Fix API generation for Grid (#39861) @oliviertassinari
|
|
43
|
+
- ​<!-- 15 -->[joy-ui] Fix menu in color inversion header demo (#39785) @sai6855
|
|
44
|
+
- ​<!-- 14 -->[joy-ui] Change the design kit link on the Overview page (#39725) @danilo-leal
|
|
45
|
+
- ​<!-- 13 -->[joy-ui] Add `CssBaseline` to integration with Material UI page (#39790) @swillianc
|
|
46
|
+
- ​<!-- 10 -->[joy-ui][Tabs] Add wordBreak style to demo (#39821) @sai6855
|
|
47
|
+
|
|
48
|
+
## Core
|
|
49
|
+
|
|
50
|
+
- ​<!-- 27 -->[blog] MUI X late v6 blog post (#39700) @joserodolfofreitas
|
|
51
|
+
- ​<!-- 25 -->[CHANGELOG] Correct the Joy UI version in the changelog (#39788) @michaldudak
|
|
52
|
+
- ​<!-- 23 -->[core] Remove legacy docs files (#39860) @oliviertassinari
|
|
53
|
+
- ​<!-- 22 -->[core] Fix GitHub title tag consistency @oliviertassinari
|
|
54
|
+
- ​<!-- 21 -->[core] Make the API docs builder configurable per project (#39772) @michaldudak
|
|
55
|
+
- ​<!-- 20 -->[docs] Fix the default theme viewer font family (#39782) @danilo-leal
|
|
56
|
+
- ​<!-- 19 -->[docs-infra] Fix hydration api (#39706) @oliviertassinari
|
|
57
|
+
- ​<!-- 18 -->[docs-infra] Adjust the website & docs footer (#39810) @danilo-leal
|
|
58
|
+
- ​<!-- 17 -->[docs-infra] Fix bug on API prop copy experience (#39707) @oliviertassinari
|
|
59
|
+
- ​<!-- 01 -->[website] Change roadmap link destination (#39639) @danilo-leal
|
|
60
|
+
|
|
61
|
+
All contributors of this release in alphabetical order: @anle9650, @axelbostrom, @danilo-leal, @joserodolfofreitas, @lhilgert9, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @swillianc, @zanivan, @ZeeshanTamboli
|
|
62
|
+
|
|
3
63
|
## 5.14.17
|
|
4
64
|
|
|
5
65
|
<!-- generated comparing v5.14.16..master -->
|
|
@@ -14,7 +74,7 @@ This release was mostly about 🐛 bug fixes and 📚 documentation improvements
|
|
|
14
74
|
- [Dialog] Should not close until the IME is cancelled (#39713) @megos
|
|
15
75
|
- [InputBase] Add `sx` type to `input` and `root` slot (#39569) @sai6855
|
|
16
76
|
|
|
17
|
-
### `@mui/joy@5.0.0-beta.
|
|
77
|
+
### `@mui/joy@5.0.0-beta.14`
|
|
18
78
|
|
|
19
79
|
- [ModalDialog] Remove redundant code (#39719) @sai6855
|
|
20
80
|
- [ToggleButtonGroup] Fix toggling button state when `Button` is not immediate children (#39571) @sai6855
|
|
@@ -876,7 +936,7 @@ A big thanks to the 21 contributors who made this release possible. Here are som
|
|
|
876
936
|
|
|
877
937
|
### Core
|
|
878
938
|
|
|
879
|
-
- [
|
|
939
|
+
- [changelog] Fix issues in highlight @oliviertassinari
|
|
880
940
|
- [core] Remove redundant `@material-ui/` aliases from regression test webpack config (#38574) @ZeeshanTamboli
|
|
881
941
|
- [core] Fix CI error @oliviertassinari
|
|
882
942
|
- [core] Remove unnecessary Box (#38461) @oliviertassinari
|
|
@@ -1535,7 +1595,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
|
|
|
1535
1595
|
- ​<!-- 20 -->[docs-infra] Fix demos border radius (#37658) @oliviertassinari
|
|
1536
1596
|
- ​<!-- 19 -->[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot
|
|
1537
1597
|
- ​<!-- 18 -->[docs-infra] Simplify product id handling (#37593) @oliviertassinari
|
|
1538
|
-
- ​<!-- 35 -->[
|
|
1598
|
+
- ​<!-- 35 -->[changelog] Add missing release date for v5.13.5 @oliviertassinari
|
|
1539
1599
|
- ​<!-- 16 -->[examples] Shell command fix in the readme file of material-next-ts example (#37675) @bablukpik
|
|
1540
1600
|
- ​<!-- 15 -->[examples] Next.js v13 app router with Material UI (#37315) @smo043
|
|
1541
1601
|
|
|
@@ -6878,7 +6938,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
|
|
|
6878
6938
|
|
|
6879
6939
|
- [blog] MUI X v5 blog post (#29590) @DanailH
|
|
6880
6940
|
- [blog] Polish the Benny Joo joins MUI post (#29697) @oliviertassinari
|
|
6881
|
-
- [
|
|
6941
|
+
- [changelog] Explain why we do breaking changes @oliviertassinari
|
|
6882
6942
|
- [core] Update latest issue template for codesandbox CI (#29783) @eps1lon
|
|
6883
6943
|
- [core] Ensure `@mui/core` is an alias for `@mui/base` (#29762) @eps1lon
|
|
6884
6944
|
- [docs] Fix broken Next and Previous links (#29711) @scallaway
|
|
@@ -10121,7 +10181,7 @@ The prop didn't solve any important problem better than any of its alternatives
|
|
|
10121
10181
|
|
|
10122
10182
|
### Core
|
|
10123
10183
|
|
|
10124
|
-
- ​<!-- 01 -->[
|
|
10184
|
+
- ​<!-- 01 -->[changelog] Better document breaking changes @oliviertassinari
|
|
10125
10185
|
- ​<!-- 05 -->[core] Modernize icons `builder:src` (#25137) @eps1lon
|
|
10126
10186
|
- ​<!-- 04 -->[core] Properly use BABEL_ENV test and development (#25139) @eps1lon
|
|
10127
10187
|
- ​<!-- 15 -->[test] Add (manual) visual regression test for icons (#25160) @eps1lon
|
|
@@ -126,6 +126,9 @@ const FilledInputRoot = styled(InputBaseRoot, {
|
|
|
126
126
|
}, ownerState.hiddenLabel && {
|
|
127
127
|
paddingTop: 16,
|
|
128
128
|
paddingBottom: 17
|
|
129
|
+
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
|
130
|
+
paddingTop: 8,
|
|
131
|
+
paddingBottom: 9
|
|
129
132
|
}));
|
|
130
133
|
});
|
|
131
134
|
const FilledInputInput = styled(InputBaseInput, {
|
|
@@ -166,11 +169,6 @@ const FilledInputInput = styled(InputBaseInput, {
|
|
|
166
169
|
}, ownerState.hiddenLabel && {
|
|
167
170
|
paddingTop: 16,
|
|
168
171
|
paddingBottom: 17
|
|
169
|
-
}, ownerState.multiline && {
|
|
170
|
-
paddingTop: 0,
|
|
171
|
-
paddingBottom: 0,
|
|
172
|
-
paddingLeft: 0,
|
|
173
|
-
paddingRight: 0
|
|
174
172
|
}, ownerState.startAdornment && {
|
|
175
173
|
paddingLeft: 0
|
|
176
174
|
}, ownerState.endAdornment && {
|
|
@@ -178,6 +176,11 @@ const FilledInputInput = styled(InputBaseInput, {
|
|
|
178
176
|
}, ownerState.hiddenLabel && ownerState.size === 'small' && {
|
|
179
177
|
paddingTop: 8,
|
|
180
178
|
paddingBottom: 9
|
|
179
|
+
}, ownerState.multiline && {
|
|
180
|
+
paddingTop: 0,
|
|
181
|
+
paddingBottom: 0,
|
|
182
|
+
paddingLeft: 0,
|
|
183
|
+
paddingRight: 0
|
|
181
184
|
}));
|
|
182
185
|
const FilledInput = /*#__PURE__*/React.forwardRef(function FilledInput(inProps, ref) {
|
|
183
186
|
var _ref, _slots$root, _ref2, _slots$input;
|
|
@@ -152,8 +152,7 @@ const FormControlLabel = /*#__PURE__*/React.forwardRef(function FormControlLabel
|
|
|
152
152
|
ref: ref
|
|
153
153
|
}, other, {
|
|
154
154
|
children: [/*#__PURE__*/React.cloneElement(control, controlProps), required ? /*#__PURE__*/_jsxs(Stack, {
|
|
155
|
-
|
|
156
|
-
alignItems: "center",
|
|
155
|
+
display: "block",
|
|
157
156
|
children: [label, /*#__PURE__*/_jsxs(AsteriskComponent, {
|
|
158
157
|
ownerState: ownerState,
|
|
159
158
|
"aria-hidden": true,
|
package/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);
|
|
@@ -29,6 +29,9 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
|
|
|
29
29
|
ActionsComponent?: React.ElementType<TablePaginationActionsProps>;
|
|
30
30
|
/**
|
|
31
31
|
* Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
|
|
32
|
+
*
|
|
33
|
+
* This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
|
|
34
|
+
* @deprecated Use `slotProps.actions.previousButton` instead.
|
|
32
35
|
*/
|
|
33
36
|
backIconButtonProps?: Partial<IconButtonProps>;
|
|
34
37
|
/**
|
|
@@ -41,6 +44,11 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
|
|
|
41
44
|
* To enable server side pagination for an unknown number of items, provide -1.
|
|
42
45
|
*/
|
|
43
46
|
count: number;
|
|
47
|
+
/**
|
|
48
|
+
* If `true`, the component is disabled.
|
|
49
|
+
* @default false
|
|
50
|
+
*/
|
|
51
|
+
disabled?: boolean;
|
|
44
52
|
/**
|
|
45
53
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
46
54
|
* This is important for screen reader users.
|
|
@@ -72,6 +80,9 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
|
|
|
72
80
|
labelRowsPerPage?: React.ReactNode;
|
|
73
81
|
/**
|
|
74
82
|
* Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
83
|
+
*
|
|
84
|
+
* This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
|
|
85
|
+
* @deprecated Use `slotProps.actions.nextButton` instead.
|
|
75
86
|
*/
|
|
76
87
|
nextIconButtonProps?: Partial<IconButtonProps>;
|
|
77
88
|
/**
|
|
@@ -106,6 +117,10 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
|
|
|
106
117
|
rowsPerPageOptions?: Array<number | { value: number; label: string }>;
|
|
107
118
|
/**
|
|
108
119
|
* Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
|
|
120
|
+
*
|
|
121
|
+
* This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
|
|
122
|
+
* @deprecated Use `slotProps.select` instead.
|
|
123
|
+
*
|
|
109
124
|
* @default {}
|
|
110
125
|
*/
|
|
111
126
|
SelectProps?: Partial<SelectProps>;
|
|
@@ -119,6 +134,14 @@ export interface TablePaginationOwnProps extends TablePaginationBaseProps {
|
|
|
119
134
|
* @default false
|
|
120
135
|
*/
|
|
121
136
|
showLastButton?: boolean;
|
|
137
|
+
/**
|
|
138
|
+
* The props used for each slot inside the TablePagination.
|
|
139
|
+
* @default {}
|
|
140
|
+
*/
|
|
141
|
+
slotProps?: {
|
|
142
|
+
actions?: TablePaginationActionsProps['slotProps'];
|
|
143
|
+
select?: Partial<SelectProps>;
|
|
144
|
+
};
|
|
122
145
|
/**
|
|
123
146
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
124
147
|
*/
|
|
@@ -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';
|
|
@@ -144,6 +144,7 @@ const useUtilityClasses = ownerState => {
|
|
|
144
144
|
* A `TableCell` based component for placing inside `TableFooter` for pagination.
|
|
145
145
|
*/
|
|
146
146
|
const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(inProps, ref) {
|
|
147
|
+
var _slotProps$select;
|
|
147
148
|
const props = useThemeProps({
|
|
148
149
|
props: inProps,
|
|
149
150
|
name: 'MuiTablePagination'
|
|
@@ -155,6 +156,7 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
|
|
|
155
156
|
colSpan: colSpanProp,
|
|
156
157
|
component = TableCell,
|
|
157
158
|
count,
|
|
159
|
+
disabled = false,
|
|
158
160
|
getItemAriaLabel = defaultGetAriaLabel,
|
|
159
161
|
labelDisplayedRows = defaultLabelDisplayedRows,
|
|
160
162
|
labelRowsPerPage = 'Rows per page:',
|
|
@@ -166,19 +168,21 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
|
|
|
166
168
|
rowsPerPageOptions = [10, 25, 50, 100],
|
|
167
169
|
SelectProps = {},
|
|
168
170
|
showFirstButton = false,
|
|
169
|
-
showLastButton = false
|
|
171
|
+
showLastButton = false,
|
|
172
|
+
slotProps
|
|
170
173
|
} = props,
|
|
171
174
|
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
172
175
|
const ownerState = props;
|
|
173
176
|
const classes = useUtilityClasses(ownerState);
|
|
174
|
-
const
|
|
177
|
+
const selectProps = (_slotProps$select = slotProps == null ? void 0 : slotProps.select) != null ? _slotProps$select : SelectProps;
|
|
178
|
+
const MenuItemComponent = selectProps.native ? 'option' : TablePaginationMenuItem;
|
|
175
179
|
let colSpan;
|
|
176
180
|
if (component === TableCell || component === 'td') {
|
|
177
181
|
colSpan = colSpanProp || 1000; // col-span over everything
|
|
178
182
|
}
|
|
179
183
|
|
|
180
|
-
const selectId = useId(
|
|
181
|
-
const labelId = useId(
|
|
184
|
+
const selectId = useId(selectProps.id);
|
|
185
|
+
const labelId = useId(selectProps.labelId);
|
|
182
186
|
const getLabelDisplayedRowsTo = () => {
|
|
183
187
|
if (count === -1) {
|
|
184
188
|
return (page + 1) * rowsPerPage;
|
|
@@ -202,21 +206,22 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
|
|
|
202
206
|
children: labelRowsPerPage
|
|
203
207
|
}), rowsPerPageOptions.length > 1 && /*#__PURE__*/_jsx(TablePaginationSelect, _extends({
|
|
204
208
|
variant: "standard"
|
|
205
|
-
}, !
|
|
209
|
+
}, !selectProps.variant && {
|
|
206
210
|
input: _InputBase || (_InputBase = /*#__PURE__*/_jsx(InputBase, {}))
|
|
207
211
|
}, {
|
|
208
212
|
value: rowsPerPage,
|
|
209
213
|
onChange: onRowsPerPageChange,
|
|
210
214
|
id: selectId,
|
|
211
215
|
labelId: labelId
|
|
212
|
-
},
|
|
213
|
-
classes: _extends({},
|
|
216
|
+
}, selectProps, {
|
|
217
|
+
classes: _extends({}, selectProps.classes, {
|
|
214
218
|
// TODO v5 remove `classes.input`
|
|
215
|
-
root: clsx(classes.input, classes.selectRoot, (
|
|
216
|
-
select: clsx(classes.select, (
|
|
219
|
+
root: clsx(classes.input, classes.selectRoot, (selectProps.classes || {}).root),
|
|
220
|
+
select: clsx(classes.select, (selectProps.classes || {}).select),
|
|
217
221
|
// TODO v5 remove `selectIcon`
|
|
218
|
-
icon: clsx(classes.selectIcon, (
|
|
222
|
+
icon: clsx(classes.selectIcon, (selectProps.classes || {}).icon)
|
|
219
223
|
}),
|
|
224
|
+
disabled: disabled,
|
|
220
225
|
children: rowsPerPageOptions.map(rowsPerPageOption => /*#__PURE__*/_createElement(MenuItemComponent, _extends({}, !isHostComponent(MenuItemComponent) && {
|
|
221
226
|
ownerState
|
|
222
227
|
}, {
|
|
@@ -242,7 +247,9 @@ const TablePagination = /*#__PURE__*/React.forwardRef(function TablePagination(i
|
|
|
242
247
|
rowsPerPage: rowsPerPage,
|
|
243
248
|
showFirstButton: showFirstButton,
|
|
244
249
|
showLastButton: showLastButton,
|
|
245
|
-
|
|
250
|
+
slotProps: slotProps == null ? void 0 : slotProps.actions,
|
|
251
|
+
getItemAriaLabel: getItemAriaLabel,
|
|
252
|
+
disabled: disabled
|
|
246
253
|
})]
|
|
247
254
|
})
|
|
248
255
|
}));
|
|
@@ -260,6 +267,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
260
267
|
ActionsComponent: PropTypes.elementType,
|
|
261
268
|
/**
|
|
262
269
|
* Props applied to the back arrow [`IconButton`](/material-ui/api/icon-button/) component.
|
|
270
|
+
*
|
|
271
|
+
* This prop is an alias for `slotProps.actions.previousButton` and will be overriden by it if both are used.
|
|
272
|
+
* @deprecated Use `slotProps.actions.previousButton` instead.
|
|
263
273
|
*/
|
|
264
274
|
backIconButtonProps: PropTypes.object,
|
|
265
275
|
/**
|
|
@@ -285,6 +295,11 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
285
295
|
* To enable server side pagination for an unknown number of items, provide -1.
|
|
286
296
|
*/
|
|
287
297
|
count: integerPropType.isRequired,
|
|
298
|
+
/**
|
|
299
|
+
* If `true`, the component is disabled.
|
|
300
|
+
* @default false
|
|
301
|
+
*/
|
|
302
|
+
disabled: PropTypes.bool,
|
|
288
303
|
/**
|
|
289
304
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
290
305
|
* This is important for screen reader users.
|
|
@@ -316,6 +331,9 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
316
331
|
labelRowsPerPage: PropTypes.node,
|
|
317
332
|
/**
|
|
318
333
|
* Props applied to the next arrow [`IconButton`](/material-ui/api/icon-button/) element.
|
|
334
|
+
*
|
|
335
|
+
* This prop is an alias for `slotProps.actions.nextButton` and will be overriden by it if both are used.
|
|
336
|
+
* @deprecated Use `slotProps.actions.nextButton` instead.
|
|
319
337
|
*/
|
|
320
338
|
nextIconButtonProps: PropTypes.object,
|
|
321
339
|
/**
|
|
@@ -367,6 +385,10 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
367
385
|
})]).isRequired),
|
|
368
386
|
/**
|
|
369
387
|
* Props applied to the rows per page [`Select`](/material-ui/api/select/) element.
|
|
388
|
+
*
|
|
389
|
+
* This prop is an alias for `slotProps.select` and will be overriden by it if both are used.
|
|
390
|
+
* @deprecated Use `slotProps.select` instead.
|
|
391
|
+
*
|
|
370
392
|
* @default {}
|
|
371
393
|
*/
|
|
372
394
|
SelectProps: PropTypes.object,
|
|
@@ -380,6 +402,19 @@ process.env.NODE_ENV !== "production" ? TablePagination.propTypes /* remove-prop
|
|
|
380
402
|
* @default false
|
|
381
403
|
*/
|
|
382
404
|
showLastButton: PropTypes.bool,
|
|
405
|
+
/**
|
|
406
|
+
* The props used for each slot inside the TablePagination.
|
|
407
|
+
* @default {}
|
|
408
|
+
*/
|
|
409
|
+
slotProps: PropTypes.shape({
|
|
410
|
+
actions: PropTypes.shape({
|
|
411
|
+
firstButton: PropTypes.object,
|
|
412
|
+
lastButton: PropTypes.object,
|
|
413
|
+
nextButton: PropTypes.object,
|
|
414
|
+
previousButton: PropTypes.object
|
|
415
|
+
}),
|
|
416
|
+
select: PropTypes.object
|
|
417
|
+
}),
|
|
383
418
|
/**
|
|
384
419
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
385
420
|
*/
|
|
@@ -2,12 +2,21 @@ import * as React from 'react';
|
|
|
2
2
|
import { IconButtonProps } from '../IconButton/IconButton';
|
|
3
3
|
|
|
4
4
|
export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
5
|
+
/**
|
|
6
|
+
* This prop is an alias for `slotProps.previousButton` and will be overriden by it if both are used.
|
|
7
|
+
* @deprecated Use `slotProps.previousButton` instead.
|
|
8
|
+
*/
|
|
5
9
|
backIconButtonProps?: Partial<IconButtonProps>;
|
|
6
10
|
/**
|
|
7
11
|
* Override or extend the styles applied to the component.
|
|
8
12
|
*/
|
|
9
13
|
classes?: {};
|
|
10
14
|
count: number;
|
|
15
|
+
/**
|
|
16
|
+
* If `true`, the component is disabled.
|
|
17
|
+
* @default false
|
|
18
|
+
*/
|
|
19
|
+
disabled?: boolean;
|
|
11
20
|
/**
|
|
12
21
|
* Accepts a function which returns a string value that provides a user-friendly name for the current page.
|
|
13
22
|
* This is important for screen reader users.
|
|
@@ -17,12 +26,22 @@ export interface TablePaginationActionsProps extends React.HTMLAttributes<HTMLDi
|
|
|
17
26
|
* @returns {string}
|
|
18
27
|
*/
|
|
19
28
|
getItemAriaLabel: (type: 'first' | 'last' | 'next' | 'previous') => string;
|
|
29
|
+
/**
|
|
30
|
+
* This prop is an alias for `slotProps.nextButton` and will be overriden by it if both are used.
|
|
31
|
+
* @deprecated Use `slotProps.nextButton` instead.
|
|
32
|
+
*/
|
|
20
33
|
nextIconButtonProps?: Partial<IconButtonProps>;
|
|
21
34
|
onPageChange: (event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void;
|
|
22
35
|
page: number;
|
|
23
36
|
rowsPerPage: number;
|
|
24
37
|
showFirstButton: boolean;
|
|
25
38
|
showLastButton: boolean;
|
|
39
|
+
slotProps?: {
|
|
40
|
+
firstButton?: Partial<IconButtonProps>;
|
|
41
|
+
lastButton?: Partial<IconButtonProps>;
|
|
42
|
+
nextButton?: Partial<IconButtonProps>;
|
|
43
|
+
previousButton?: Partial<IconButtonProps>;
|
|
44
|
+
};
|
|
26
45
|
}
|
|
27
46
|
|
|
28
47
|
declare const TablePaginationActions: React.JSXElementConstructor<TablePaginationActionsProps>;
|
|
@@ -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).
|
|
File without changes
|