@mui/material 5.2.3 → 5.2.7

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 (56) hide show
  1. package/Avatar/Avatar.d.ts +4 -2
  2. package/Badge/Badge.d.ts +25 -0
  3. package/Badge/Badge.js +40 -10
  4. package/Breadcrumbs/Breadcrumbs.d.ts +1 -1
  5. package/ButtonGroup/ButtonGroupContext.d.ts +1 -1
  6. package/CHANGELOG.md +227 -0
  7. package/CssBaseline/CssBaseline.d.ts +1 -1
  8. package/GlobalStyles/GlobalStyles.d.ts +2 -1
  9. package/Grid/Grid.js +74 -66
  10. package/InputBase/InputBase.d.ts +6 -0
  11. package/InputBase/InputBase.js +10 -2
  12. package/ListItem/ListItem.d.ts +1 -1
  13. package/ListItemButton/ListItemButton.d.ts +1 -1
  14. package/MenuItem/MenuItem.d.ts +1 -1
  15. package/OutlinedInput/OutlinedInput.js +14 -1
  16. package/README.md +15 -27
  17. package/Select/SelectInput.js +11 -3
  18. package/SvgIcon/SvgIcon.d.ts +8 -0
  19. package/SvgIcon/SvgIcon.js +19 -3
  20. package/Tabs/Tabs.d.ts +1 -1
  21. package/TextField/TextField.js +2 -9
  22. package/index.js +1 -1
  23. package/legacy/Badge/Badge.js +46 -11
  24. package/legacy/Grid/Grid.js +84 -78
  25. package/legacy/InputBase/InputBase.js +10 -2
  26. package/legacy/OutlinedInput/OutlinedInput.js +14 -1
  27. package/legacy/Select/SelectInput.js +11 -5
  28. package/legacy/SvgIcon/SvgIcon.js +20 -3
  29. package/legacy/TextField/TextField.js +2 -9
  30. package/legacy/index.js +1 -1
  31. package/legacy/locale/index.js +319 -142
  32. package/locale/index.d.ts +2 -0
  33. package/locale/index.js +220 -50
  34. package/modern/Badge/Badge.js +40 -10
  35. package/modern/Grid/Grid.js +74 -66
  36. package/modern/InputBase/InputBase.js +10 -2
  37. package/modern/OutlinedInput/OutlinedInput.js +14 -1
  38. package/modern/Select/SelectInput.js +11 -3
  39. package/modern/SvgIcon/SvgIcon.js +19 -3
  40. package/modern/TextField/TextField.js +2 -7
  41. package/modern/index.js +1 -1
  42. package/modern/locale/index.js +220 -50
  43. package/node/Badge/Badge.js +40 -10
  44. package/node/Grid/Grid.js +75 -65
  45. package/node/InputBase/InputBase.js +10 -2
  46. package/node/OutlinedInput/OutlinedInput.js +15 -1
  47. package/node/Select/SelectInput.js +11 -3
  48. package/node/SvgIcon/SvgIcon.js +19 -3
  49. package/node/TextField/TextField.js +1 -8
  50. package/node/index.js +1 -1
  51. package/node/locale/index.js +223 -51
  52. package/package.json +3 -3
  53. package/styles/createTheme.d.ts +1 -1
  54. package/transitions/transition.d.ts +1 -2
  55. package/umd/material-ui.development.js +278 -171
  56. package/umd/material-ui.production.min.js +21 -21
package/locale/index.d.ts CHANGED
@@ -29,6 +29,7 @@ export declare const bnBD: Localization;
29
29
  export declare const bgBG: Localization;
30
30
  export declare const caES: Localization;
31
31
  export declare const csCZ: Localization;
32
+ export declare const daDK: Localization;
32
33
  export declare const deDE: Localization;
33
34
  export declare const elGR: Localization;
34
35
  export declare const enUS: Localization;
@@ -48,6 +49,7 @@ export declare const jaJP: Localization;
48
49
  export declare const khKH: Localization;
49
50
  export declare const koKR: Localization;
50
51
  export declare const kzKZ: Localization;
52
+ export declare const nbNO: Localization;
51
53
  export declare const nlNL: Localization;
52
54
  export declare const plPL: Localization;
53
55
  export declare const ptBR: Localization;
package/locale/index.js CHANGED
@@ -641,6 +641,86 @@ export const csCZ = {
641
641
  }
642
642
  }
643
643
  };
644
+ export const daDK = {
645
+ components: {
646
+ MuiBreadcrumbs: {
647
+ defaultProps: {
648
+ expandText: 'Vis sti'
649
+ }
650
+ },
651
+ MuiTablePagination: {
652
+ defaultProps: {
653
+ getItemAriaLabel: type => {
654
+ if (type === 'first') {
655
+ return 'Gå til den første side';
656
+ }
657
+
658
+ if (type === 'last') {
659
+ return 'Gå til den sidste side';
660
+ }
661
+
662
+ if (type === 'next') {
663
+ return 'Gå til den næste side';
664
+ } // if (type === 'previous') {
665
+
666
+
667
+ return 'Gå til den forrige side';
668
+ },
669
+ labelRowsPerPage: 'Rækker pr side:',
670
+ labelDisplayedRows: ({
671
+ from,
672
+ to,
673
+ count
674
+ }) => `${from}-${to} af ${count !== -1 ? count : `mere end ${to}`}`
675
+ }
676
+ },
677
+ MuiRating: {
678
+ defaultProps: {
679
+ getLabelText: value => `${value} Stjern${value !== 1 ? 'er' : ''}`,
680
+ emptyLabelText: 'Tom'
681
+ }
682
+ },
683
+ MuiAutocomplete: {
684
+ defaultProps: {
685
+ clearText: 'Slet',
686
+ closeText: 'Luk',
687
+ loadingText: 'Indlæser…',
688
+ noOptionsText: 'Ingen muligheder',
689
+ openText: 'Åben'
690
+ }
691
+ },
692
+ MuiAlert: {
693
+ defaultProps: {
694
+ closeText: 'Luk'
695
+ }
696
+ },
697
+ MuiPagination: {
698
+ defaultProps: {
699
+ 'aria-label': 'Sideinddelings navigation',
700
+ getItemAriaLabel: (type, page, selected) => {
701
+ if (type === 'page') {
702
+ return `${selected ? '' : 'Go to '}page ${page}`;
703
+ }
704
+
705
+ if (type === 'first') {
706
+ return 'Gå til den første side';
707
+ }
708
+
709
+ if (type === 'last') {
710
+ return 'Gå til den sidste side';
711
+ }
712
+
713
+ if (type === 'next') {
714
+ return 'Gå til den næste side';
715
+ } // if (type === 'previous') {
716
+
717
+
718
+ return 'Gå til den forrige side';
719
+ }
720
+ }
721
+ }
722
+ }
723
+ };
644
724
  export const deDE = {
645
725
  components: {
646
726
  MuiBreadcrumbs: {
@@ -808,7 +888,7 @@ export const enUS = {
808
888
  MuiBreadcrumbs: { defaultProps: {
809
889
  expandText: 'Show path',
810
890
  }},
811
- MuiTablePagination: { defaultProps: {
891
+ MuiTablePagination: { defaultProps: {
812
892
  getItemAriaLabel: (type) => {
813
893
  if (type === 'first') {
814
894
  return 'Go to first page';
@@ -826,21 +906,21 @@ export const enUS = {
826
906
  labelDisplayedRows: ({ from, to, count }) =>
827
907
  `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`,
828
908
  }},
829
- MuiRating: { defaultProps: {
909
+ MuiRating: { defaultProps: {
830
910
  getLabelText: value => `${value} Star${value !== 1 ? 's' : ''}`,
831
911
  emptyLabelText: 'Empty',
832
912
  }},
833
- MuiAutocomplete: { defaultProps: {
913
+ MuiAutocomplete: { defaultProps: {
834
914
  clearText: 'Clear',
835
915
  closeText: 'Close',
836
916
  loadingText: 'Loading…',
837
917
  noOptionsText: 'No options',
838
918
  openText: 'Open',
839
919
  }},
840
- MuiAlert: { defaultProps: {
920
+ MuiAlert: { defaultProps: {
841
921
  closeText: 'Close',
842
922
  }},
843
- MuiPagination: { defaultProps: {
923
+ MuiPagination: { defaultProps: {
844
924
  'aria-label': 'Pagination navigation',
845
925
  getItemAriaLabel: (type, page, selected) => {
846
926
  if (type === 'page') {
@@ -858,7 +938,7 @@ export const enUS = {
858
938
  // if (type === 'previous') {
859
939
  return 'Go to previous page';
860
940
  },
861
- },
941
+ }},
862
942
  },
863
943
  */
864
944
  };
@@ -1126,9 +1206,12 @@ export const fiFI = {
1126
1206
 
1127
1207
  return 'Mene edelliselle sivulle';
1128
1208
  },
1129
- labelRowsPerPage: 'Rivejä per sivu:' // labelDisplayedRows: ({ from, to, count }) =>
1130
- // `${from}–${to} / ${count !== -1 ? count : `more than ${to}`}`,
1131
-
1209
+ labelRowsPerPage: 'Rivejä per sivu:',
1210
+ labelDisplayedRows: ({
1211
+ from,
1212
+ to,
1213
+ count
1214
+ }) => `${from}–${to} / ${count !== -1 ? count : `enemmän kuin ${to}`}`
1132
1215
  }
1133
1216
  },
1134
1217
  MuiRating: {
@@ -2106,6 +2189,86 @@ export const kzKZ = {
2106
2189
  }
2107
2190
  }
2108
2191
  };
2192
+ export const nbNO = {
2193
+ components: {
2194
+ MuiBreadcrumbs: {
2195
+ defaultProps: {
2196
+ expandText: 'Vis sti'
2197
+ }
2198
+ },
2199
+ MuiTablePagination: {
2200
+ defaultProps: {
2201
+ getItemAriaLabel: type => {
2202
+ if (type === 'first') {
2203
+ return 'Gå til første side';
2204
+ }
2205
+
2206
+ if (type === 'last') {
2207
+ return 'Gå til siste side';
2208
+ }
2209
+
2210
+ if (type === 'next') {
2211
+ return 'Gå til neste side';
2212
+ } // if (type === 'previous') {
2213
+
2214
+
2215
+ return 'Gå til forrige side';
2216
+ },
2217
+ labelRowsPerPage: 'Rader per side:',
2218
+ labelDisplayedRows: ({
2219
+ from,
2220
+ to,
2221
+ count
2222
+ }) => `${from}–${to} av ${count !== -1 ? count : `mer enn ${to}`}`
2223
+ }
2224
+ },
2225
+ MuiRating: {
2226
+ defaultProps: {
2227
+ getLabelText: value => `${value} Stjerne${value !== 1 ? 'r' : ''}`,
2228
+ emptyLabelText: 'Tom'
2229
+ }
2230
+ },
2231
+ MuiAutocomplete: {
2232
+ defaultProps: {
2233
+ clearText: 'Tøm',
2234
+ closeText: 'Lukk',
2235
+ loadingText: 'Laster inn…',
2236
+ noOptionsText: 'Ingen alternativer',
2237
+ openText: 'Åpne'
2238
+ }
2239
+ },
2240
+ MuiAlert: {
2241
+ defaultProps: {
2242
+ closeText: 'Lukk'
2243
+ }
2244
+ },
2245
+ MuiPagination: {
2246
+ defaultProps: {
2247
+ 'aria-label': 'Paginering navigasjon',
2248
+ getItemAriaLabel: (type, page, selected) => {
2249
+ if (type === 'page') {
2250
+ return `${selected ? '' : 'Gå til '}side ${page}`;
2251
+ }
2252
+
2253
+ if (type === 'first') {
2254
+ return 'Gå til første side';
2255
+ }
2256
+
2257
+ if (type === 'last') {
2258
+ return 'Gå til siste side';
2259
+ }
2260
+
2261
+ if (type === 'next') {
2262
+ return 'Gå til neste side';
2263
+ } // if (type === 'previous') {
2264
+
2265
+
2266
+ return 'Gå til forrige side';
2267
+ }
2268
+ }
2269
+ }
2270
+ }
2271
+ };
2109
2272
  export const nlNL = {
2110
2273
  components: {
2111
2274
  MuiBreadcrumbs: {
@@ -3106,26 +3269,29 @@ export const ukUA = {
3106
3269
  };
3107
3270
  export const viVN = {
3108
3271
  components: {
3109
- // MuiBreadcrumbs: {
3110
- // defaultProps: {
3111
- // expandText: 'Show path',
3112
- // },
3113
- // },
3272
+ MuiBreadcrumbs: {
3273
+ defaultProps: {
3274
+ expandText: 'Mở ra'
3275
+ }
3276
+ },
3114
3277
  MuiTablePagination: {
3115
3278
  defaultProps: {
3116
- // getItemAriaLabel: (type) => {
3117
- // if (type === 'first') {
3118
- // return 'Go to first page';
3119
- // }
3120
- // if (type === 'last') {
3121
- // return 'Go to last page';
3122
- // }
3123
- // if (type === 'next') {
3124
- // return 'Go to next page';
3125
- // }
3126
- // // if (type === 'previous') {
3127
- // return 'Go to previous page';
3128
- // },
3279
+ getItemAriaLabel: type => {
3280
+ if (type === 'first') {
3281
+ return 'Tới trang đầu tiên';
3282
+ }
3283
+
3284
+ if (type === 'last') {
3285
+ return 'Tới trang cuối cùng';
3286
+ }
3287
+
3288
+ if (type === 'next') {
3289
+ return 'Tới trang tiếp theo';
3290
+ } // if (type === 'previous') {
3291
+
3292
+
3293
+ return 'Về trang trước đó';
3294
+ },
3129
3295
  labelRowsPerPage: 'Số hàng mỗi trang:',
3130
3296
  labelDisplayedRows: ({
3131
3297
  from,
@@ -3137,7 +3303,7 @@ export const viVN = {
3137
3303
  MuiRating: {
3138
3304
  defaultProps: {
3139
3305
  getLabelText: value => `${value} sao`,
3140
- emptyLabelText: 'Trống'
3306
+ emptyLabelText: 'Không có dữ liệu'
3141
3307
  }
3142
3308
  },
3143
3309
  MuiAutocomplete: {
@@ -3145,7 +3311,7 @@ export const viVN = {
3145
3311
  clearText: 'Xóa',
3146
3312
  closeText: 'Đóng',
3147
3313
  loadingText: 'Đang tải…',
3148
- noOptionsText: 'Không có lựa chọn',
3314
+ noOptionsText: 'Không có lựa chọn nào',
3149
3315
  openText: 'Mở'
3150
3316
  }
3151
3317
  },
@@ -3153,28 +3319,32 @@ export const viVN = {
3153
3319
  defaultProps: {
3154
3320
  closeText: 'Đóng'
3155
3321
  }
3156
- } // MuiPagination: {
3157
- // defaultProps: {
3158
- // 'aria-label': 'Pagination navigation',
3159
- // getItemAriaLabel: (type, page, selected) => {
3160
- // if (type === 'page') {
3161
- // return `${selected ? '' : 'Go to '}page ${page}`;
3162
- // }
3163
- // if (type === 'first') {
3164
- // return 'Go to first page';
3165
- // }
3166
- // if (type === 'last') {
3167
- // return 'Go to last page';
3168
- // }
3169
- // if (type === 'next') {
3170
- // return 'Go to next page';
3171
- // }
3172
- // // if (type === 'previous') {
3173
- // return 'Go to previous page';
3174
- // },
3175
- // },
3176
- // },
3322
+ },
3323
+ MuiPagination: {
3324
+ defaultProps: {
3325
+ 'aria-label': 'Thanh điều khiển trang',
3326
+ getItemAriaLabel: (type, page, selected) => {
3327
+ if (type === 'page') {
3328
+ return `${selected ? '' : 'Tới '}trang ${page}`;
3329
+ }
3177
3330
 
3331
+ if (type === 'first') {
3332
+ return 'Tới trang đầu tiên';
3333
+ }
3334
+
3335
+ if (type === 'last') {
3336
+ return 'Tới trang cuối cùng';
3337
+ }
3338
+
3339
+ if (type === 'next') {
3340
+ return 'Tới trang tiếp theo';
3341
+ } // if (type === 'previous') {
3342
+
3343
+
3344
+ return 'Về trang trước đó';
3345
+ }
3346
+ }
3347
+ }
3178
3348
  }
3179
3349
  };
3180
3350
  export const zhCN = {
@@ -1,6 +1,6 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
- const _excluded = ["components", "componentsProps", "color", "invisible", "badgeContent", "showZero", "variant"];
3
+ const _excluded = ["anchorOrigin", "component", "components", "componentsProps", "overlap", "color", "invisible", "badgeContent", "showZero", "variant"];
4
4
  import * as React from 'react';
5
5
  import PropTypes from 'prop-types';
6
6
  import clsx from 'clsx';
@@ -11,17 +11,20 @@ import styled from '../styles/styled';
11
11
  import useThemeProps from '../styles/useThemeProps';
12
12
  import capitalize from '../utils/capitalize';
13
13
  import { jsx as _jsx } from "react/jsx-runtime";
14
- export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning']));
14
+ export const badgeClasses = _extends({}, badgeUnstyledClasses, generateUtilityClasses('MuiBadge', ['colorError', 'colorInfo', 'colorPrimary', 'colorSecondary', 'colorSuccess', 'colorWarning', 'overlapRectangular', 'overlapCircular', // TODO: v6 remove the overlap value from these class keys
15
+ 'anchorOriginTopLeftCircular', 'anchorOriginTopLeftRectangular', 'anchorOriginTopRightCircular', 'anchorOriginTopRightRectangular', 'anchorOriginBottomLeftCircular', 'anchorOriginBottomLeftRectangular', 'anchorOriginBottomRightCircular', 'anchorOriginBottomRightRectangular']));
15
16
  const RADIUS_STANDARD = 10;
16
17
  const RADIUS_DOT = 4;
17
18
 
18
19
  const extendUtilityClasses = ownerState => {
19
20
  const {
20
21
  color,
22
+ anchorOrigin,
23
+ overlap,
21
24
  classes = {}
22
25
  } = ownerState;
23
26
  return _extends({}, classes, {
24
- badge: clsx(classes.badge, color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
27
+ badge: clsx(classes.badge, getBadgeUtilityClass(`anchorOrigin${capitalize(anchorOrigin.vertical)}${capitalize(anchorOrigin.horizontal)}${capitalize(overlap)}`), getBadgeUtilityClass(`overlap${capitalize(overlap)}`), color !== 'default' && [getBadgeUtilityClass(`color${capitalize(color)}`), classes[`color${capitalize(color)}`]])
25
28
  });
26
29
  };
27
30
 
@@ -149,6 +152,11 @@ const BadgeBadge = styled('span', {
149
152
  duration: theme.transitions.duration.leavingScreen
150
153
  })
151
154
  }));
155
+
156
+ const shouldSpreadAdditionalProps = Slot => {
157
+ return !Slot || !isHostComponent(Slot);
158
+ };
159
+
152
160
  const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
153
161
  const props = useThemeProps({
154
162
  props: inProps,
@@ -156,8 +164,14 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
156
164
  });
157
165
 
158
166
  const {
167
+ anchorOrigin: anchorOriginProp = {
168
+ vertical: 'top',
169
+ horizontal: 'right'
170
+ },
171
+ component = 'span',
159
172
  components = {},
160
173
  componentsProps = {},
174
+ overlap: overlapProp = 'rectangular',
161
175
  color: colorProp = 'default',
162
176
  invisible: invisibleProp,
163
177
  badgeContent: badgeContentProp,
@@ -167,7 +181,9 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
167
181
  other = _objectWithoutPropertiesLoose(props, _excluded);
168
182
 
169
183
  const prevProps = usePreviousProps({
170
- color: colorProp
184
+ anchorOrigin: anchorOriginProp,
185
+ color: colorProp,
186
+ overlap: overlapProp
171
187
  });
172
188
  let invisible = invisibleProp;
173
189
 
@@ -176,16 +192,21 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
176
192
  }
177
193
 
178
194
  const {
179
- color = colorProp
195
+ color = colorProp,
196
+ overlap = overlapProp,
197
+ anchorOrigin = anchorOriginProp
180
198
  } = invisible ? prevProps : props;
181
199
 
182
200
  const ownerState = _extends({}, props, {
201
+ anchorOrigin,
183
202
  invisible,
184
- color
203
+ color,
204
+ overlap
185
205
  });
186
206
 
187
207
  const classes = extendUtilityClasses(ownerState);
188
208
  return /*#__PURE__*/_jsx(BadgeUnstyled, _extends({
209
+ anchorOrigin: anchorOrigin,
189
210
  invisible: invisibleProp,
190
211
  badgeContent: badgeContentProp,
191
212
  showZero: showZero,
@@ -196,14 +217,17 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
196
217
  Badge: BadgeBadge
197
218
  }, components),
198
219
  componentsProps: {
199
- root: _extends({}, componentsProps.root, (!components.Root || !isHostComponent(components.Root)) && {
220
+ root: _extends({}, componentsProps.root, shouldSpreadAdditionalProps(components.Root) && {
221
+ as: component,
200
222
  ownerState: _extends({}, componentsProps.root?.ownerState, {
201
- color
223
+ color,
224
+ overlap
202
225
  })
203
226
  }),
204
- badge: _extends({}, componentsProps.badge, (!components.Thumb || !isHostComponent(components.Thumb)) && {
227
+ badge: _extends({}, componentsProps.badge, shouldSpreadAdditionalProps(components.Badge) && {
205
228
  ownerState: _extends({}, componentsProps.badge?.ownerState, {
206
- color
229
+ color,
230
+ overlap
207
231
  })
208
232
  })
209
233
  },
@@ -254,6 +278,12 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
254
278
  /* @typescript-to-proptypes-ignore */
255
279
  .oneOfType([PropTypes.oneOf(['default', 'primary', 'secondary', 'error', 'info', 'success', 'warning']), PropTypes.string]),
256
280
 
281
+ /**
282
+ * The component used for the root node.
283
+ * Either a string to use a HTML element or a component.
284
+ */
285
+ component: PropTypes.elementType,
286
+
257
287
  /**
258
288
  * The components used for each slot inside the Badge.
259
289
  * Either a string to use a HTML element or a component.
@@ -28,69 +28,84 @@ function getOffset(val) {
28
28
  return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
29
29
  }
30
30
 
31
- function generateGrid(globalStyles, theme, breakpoint, ownerState) {
32
- const size = ownerState[breakpoint];
33
-
34
- if (!size) {
35
- return;
36
- }
37
-
38
- let styles = {};
39
-
40
- if (size === true) {
41
- // For the auto layouting
42
- styles = {
43
- flexBasis: 0,
44
- flexGrow: 1,
45
- maxWidth: '100%'
46
- };
47
- } else if (size === 'auto') {
48
- styles = {
49
- flexBasis: 'auto',
50
- flexGrow: 0,
51
- flexShrink: 0,
52
- maxWidth: 'none',
53
- width: 'auto'
54
- };
55
- } else {
56
- const columnsBreakpointValues = resolveBreakpointValues({
57
- values: ownerState.columns,
58
- breakpoints: theme.breakpoints.values
59
- });
60
- const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues; // Keep 7 significant numbers.
61
-
62
- const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
63
- let more = {};
64
-
65
- if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
66
- const themeSpacing = theme.spacing(ownerState.columnSpacing);
67
-
68
- if (themeSpacing !== '0px') {
69
- const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
70
- more = {
71
- flexBasis: fullWidth,
72
- maxWidth: fullWidth
73
- };
74
- }
75
- } // Close to the bootstrap implementation:
76
- // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
31
+ export function generateGrid({
32
+ theme,
33
+ ownerState
34
+ }) {
35
+ let size;
36
+ return theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
37
+ // Use side effect over immutability for better performance.
38
+ let styles = {};
77
39
 
40
+ if (ownerState[breakpoint]) {
41
+ size = ownerState[breakpoint];
42
+ }
78
43
 
79
- styles = _extends({
80
- flexBasis: width,
81
- flexGrow: 0,
82
- maxWidth: width
83
- }, more);
84
- } // No need for a media query for the first size.
44
+ if (!size) {
45
+ return globalStyles;
46
+ }
85
47
 
48
+ if (size === true) {
49
+ // For the auto layouting
50
+ styles = {
51
+ flexBasis: 0,
52
+ flexGrow: 1,
53
+ maxWidth: '100%'
54
+ };
55
+ } else if (size === 'auto') {
56
+ styles = {
57
+ flexBasis: 'auto',
58
+ flexGrow: 0,
59
+ flexShrink: 0,
60
+ maxWidth: 'none',
61
+ width: 'auto'
62
+ };
63
+ } else {
64
+ const columnsBreakpointValues = resolveBreakpointValues({
65
+ values: ownerState.columns,
66
+ breakpoints: theme.breakpoints.values
67
+ });
68
+ const columnValue = typeof columnsBreakpointValues === 'object' ? columnsBreakpointValues[breakpoint] : columnsBreakpointValues;
69
+
70
+ if (columnValue === undefined || columnValue === null) {
71
+ return globalStyles;
72
+ } // Keep 7 significant numbers.
73
+
74
+
75
+ const width = `${Math.round(size / columnValue * 10e7) / 10e5}%`;
76
+ let more = {};
77
+
78
+ if (ownerState.container && ownerState.item && ownerState.columnSpacing !== 0) {
79
+ const themeSpacing = theme.spacing(ownerState.columnSpacing);
80
+
81
+ if (themeSpacing !== '0px') {
82
+ const fullWidth = `calc(${width} + ${getOffset(themeSpacing)})`;
83
+ more = {
84
+ flexBasis: fullWidth,
85
+ maxWidth: fullWidth
86
+ };
87
+ }
88
+ } // Close to the bootstrap implementation:
89
+ // https://github.com/twbs/bootstrap/blob/8fccaa2439e97ec72a4b7dc42ccc1f649790adb0/scss/mixins/_grid.scss#L41
90
+
91
+
92
+ styles = _extends({
93
+ flexBasis: width,
94
+ flexGrow: 0,
95
+ maxWidth: width
96
+ }, more);
97
+ } // No need for a media query for the first size.
98
+
99
+
100
+ if (theme.breakpoints.values[breakpoint] === 0) {
101
+ Object.assign(globalStyles, styles);
102
+ } else {
103
+ globalStyles[theme.breakpoints.up(breakpoint)] = styles;
104
+ }
86
105
 
87
- if (theme.breakpoints.values[breakpoint] === 0) {
88
- Object.assign(globalStyles, styles);
89
- } else {
90
- globalStyles[theme.breakpoints.up(breakpoint)] = styles;
91
- }
106
+ return globalStyles;
107
+ }, {});
92
108
  }
93
-
94
109
  export function generateDirection({
95
110
  theme,
96
111
  ownerState
@@ -249,14 +264,7 @@ const GridRoot = styled('div', {
249
264
  flexWrap: 'nowrap'
250
265
  }, ownerState.wrap === 'reverse' && {
251
266
  flexWrap: 'wrap-reverse'
252
- }), generateDirection, generateRowGap, generateColumnGap, ({
253
- theme,
254
- ownerState
255
- }) => theme.breakpoints.keys.reduce((globalStyles, breakpoint) => {
256
- // Use side effect over immutability for better performance.
257
- generateGrid(globalStyles, theme, breakpoint, ownerState);
258
- return globalStyles;
259
- }, {}));
267
+ }), generateDirection, generateRowGap, generateColumnGap, generateGrid);
260
268
 
261
269
  const useUtilityClasses = ownerState => {
262
270
  const {
@@ -1,7 +1,7 @@
1
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
2
  import _extends from "@babel/runtime/helpers/esm/extends";
3
3
  import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
4
- const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
4
+ const _excluded = ["aria-describedby", "autoComplete", "autoFocus", "className", "color", "components", "componentsProps", "defaultValue", "disabled", "disableInjectingGlobalStyles", "endAdornment", "error", "fullWidth", "id", "inputComponent", "inputProps", "inputRef", "margin", "maxRows", "minRows", "multiline", "name", "onBlur", "onChange", "onClick", "onFocus", "onKeyDown", "onKeyUp", "placeholder", "readOnly", "renderSuffix", "rows", "size", "startAdornment", "type", "value"];
5
5
  import * as React from 'react';
6
6
  import PropTypes from 'prop-types';
7
7
  import clsx from 'clsx';
@@ -220,6 +220,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
220
220
  componentsProps = {},
221
221
  defaultValue,
222
222
  disabled,
223
+ disableInjectingGlobalStyles,
223
224
  endAdornment,
224
225
  fullWidth = false,
225
226
  id,
@@ -450,7 +451,7 @@ const InputBase = /*#__PURE__*/React.forwardRef(function InputBase(inProps, ref)
450
451
  const Input = components.Input || InputBaseComponent;
451
452
  inputProps = _extends({}, inputProps, componentsProps.input);
452
453
  return /*#__PURE__*/_jsxs(React.Fragment, {
453
- children: [inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
454
+ children: [!disableInjectingGlobalStyles && inputGlobalStyles, /*#__PURE__*/_jsxs(Root, _extends({}, rootProps, !isHostComponent(Root) && {
454
455
  ownerState: _extends({}, ownerState, rootProps.ownerState)
455
456
  }, {
456
457
  ref: ref,
@@ -564,6 +565,13 @@ process.env.NODE_ENV !== "production" ? InputBase.propTypes
564
565
  */
565
566
  disabled: PropTypes.bool,
566
567
 
568
+ /**
569
+ * If `true`, GlobalStyles for the auto-fill keyframes will not be injected/removed on mount/unmount. Make sure to inject them at the top of your application.
570
+ * This option is intended to help with boosting the initial rendering performance if you are loading a big amount of Input components at once.
571
+ * @default false
572
+ */
573
+ disableInjectingGlobalStyles: PropTypes.bool,
574
+
567
575
  /**
568
576
  * End `InputAdornment` for this component.
569
577
  */