@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.
- package/Avatar/Avatar.d.ts +4 -2
- package/Badge/Badge.d.ts +25 -0
- package/Badge/Badge.js +40 -10
- package/Breadcrumbs/Breadcrumbs.d.ts +1 -1
- package/ButtonGroup/ButtonGroupContext.d.ts +1 -1
- package/CHANGELOG.md +227 -0
- package/CssBaseline/CssBaseline.d.ts +1 -1
- package/GlobalStyles/GlobalStyles.d.ts +2 -1
- package/Grid/Grid.js +74 -66
- package/InputBase/InputBase.d.ts +6 -0
- package/InputBase/InputBase.js +10 -2
- package/ListItem/ListItem.d.ts +1 -1
- package/ListItemButton/ListItemButton.d.ts +1 -1
- package/MenuItem/MenuItem.d.ts +1 -1
- package/OutlinedInput/OutlinedInput.js +14 -1
- package/README.md +15 -27
- package/Select/SelectInput.js +11 -3
- package/SvgIcon/SvgIcon.d.ts +8 -0
- package/SvgIcon/SvgIcon.js +19 -3
- package/Tabs/Tabs.d.ts +1 -1
- package/TextField/TextField.js +2 -9
- package/index.js +1 -1
- package/legacy/Badge/Badge.js +46 -11
- package/legacy/Grid/Grid.js +84 -78
- package/legacy/InputBase/InputBase.js +10 -2
- package/legacy/OutlinedInput/OutlinedInput.js +14 -1
- package/legacy/Select/SelectInput.js +11 -5
- package/legacy/SvgIcon/SvgIcon.js +20 -3
- package/legacy/TextField/TextField.js +2 -9
- package/legacy/index.js +1 -1
- package/legacy/locale/index.js +319 -142
- package/locale/index.d.ts +2 -0
- package/locale/index.js +220 -50
- package/modern/Badge/Badge.js +40 -10
- package/modern/Grid/Grid.js +74 -66
- package/modern/InputBase/InputBase.js +10 -2
- package/modern/OutlinedInput/OutlinedInput.js +14 -1
- package/modern/Select/SelectInput.js +11 -3
- package/modern/SvgIcon/SvgIcon.js +19 -3
- package/modern/TextField/TextField.js +2 -7
- package/modern/index.js +1 -1
- package/modern/locale/index.js +220 -50
- package/node/Badge/Badge.js +40 -10
- package/node/Grid/Grid.js +75 -65
- package/node/InputBase/InputBase.js +10 -2
- package/node/OutlinedInput/OutlinedInput.js +15 -1
- package/node/Select/SelectInput.js +11 -3
- package/node/SvgIcon/SvgIcon.js +19 -3
- package/node/TextField/TextField.js +1 -8
- package/node/index.js +1 -1
- package/node/locale/index.js +223 -51
- package/package.json +3 -3
- package/styles/createTheme.d.ts +1 -1
- package/transitions/transition.d.ts +1 -2
- package/umd/material-ui.development.js +278 -171
- 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:'
|
|
1130
|
-
|
|
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
|
-
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3272
|
+
MuiBreadcrumbs: {
|
|
3273
|
+
defaultProps: {
|
|
3274
|
+
expandText: 'Mở ra'
|
|
3275
|
+
}
|
|
3276
|
+
},
|
|
3114
3277
|
MuiTablePagination: {
|
|
3115
3278
|
defaultProps: {
|
|
3116
|
-
|
|
3117
|
-
|
|
3118
|
-
|
|
3119
|
-
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
|
|
3123
|
-
|
|
3124
|
-
|
|
3125
|
-
|
|
3126
|
-
|
|
3127
|
-
|
|
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: '
|
|
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
|
-
}
|
|
3157
|
-
|
|
3158
|
-
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
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 = {
|
package/modern/Badge/Badge.js
CHANGED
|
@@ -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
|
-
|
|
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, (
|
|
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, (
|
|
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.
|
package/modern/Grid/Grid.js
CHANGED
|
@@ -28,69 +28,84 @@ function getOffset(val) {
|
|
|
28
28
|
return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
function generateGrid(
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
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
|
-
|
|
80
|
-
|
|
81
|
-
|
|
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
|
-
|
|
88
|
-
|
|
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
|
*/
|