@mui/material 5.5.3 → 5.6.0
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/Accordion/accordionClasses.d.ts +18 -18
- package/AccordionActions/accordionActionsClasses.d.ts +10 -10
- package/AccordionDetails/accordionDetailsClasses.d.ts +8 -8
- package/AccordionSummary/accordionSummaryClasses.d.ts +22 -22
- package/Alert/alertClasses.d.ts +44 -44
- package/AlertTitle/alertTitleClasses.d.ts +8 -8
- package/AppBar/appBarClasses.d.ts +28 -28
- package/Autocomplete/autocompleteClasses.d.ts +54 -54
- package/Avatar/avatarClasses.d.ts +20 -20
- package/AvatarGroup/avatarGroupClasses.d.ts +10 -10
- package/Backdrop/backdropClasses.d.ts +10 -10
- package/Badge/Badge.d.ts +20 -7
- package/Badge/Badge.js +43 -21
- package/Badge/badgeClasses.d.ts +24 -0
- package/Badge/badgeClasses.js +8 -0
- package/Badge/index.d.ts +3 -0
- package/Badge/index.js +2 -1
- package/BottomNavigation/BottomNavigation.js +0 -0
- package/BottomNavigation/bottomNavigationClasses.d.ts +8 -8
- package/BottomNavigationAction/bottomNavigationActionClasses.d.ts +14 -14
- package/Breadcrumbs/breadcrumbsClasses.d.ts +14 -14
- package/Button/Button.js +101 -96
- package/Button/buttonClasses.d.ts +76 -76
- package/ButtonBase/buttonBaseClasses.d.ts +12 -12
- package/ButtonBase/touchRippleClasses.d.ts +20 -20
- package/ButtonGroup/ButtonGroupContext.d.ts +18 -18
- package/ButtonGroup/buttonGroupClasses.d.ts +58 -58
- package/CHANGELOG.md +74 -0
- package/Card/cardClasses.d.ts +8 -8
- package/CardActionArea/cardActionAreaClasses.d.ts +12 -12
- package/CardActions/cardActionsClasses.d.ts +10 -10
- package/CardContent/cardContentClasses.d.ts +8 -8
- package/CardHeader/cardHeaderClasses.d.ts +18 -18
- package/CardMedia/cardMediaClasses.d.ts +12 -12
- package/Checkbox/checkboxClasses.d.ts +18 -18
- package/Chip/chipClasses.d.ts +80 -80
- package/CircularProgress/circularProgressClasses.d.ts +26 -26
- package/ClickAwayListener/index.d.ts +2 -2
- package/Collapse/collapseClasses.d.ts +18 -18
- package/Container/containerClasses.d.ts +22 -22
- package/Dialog/DialogContext.d.ts +6 -6
- package/Dialog/dialogClasses.d.ts +36 -36
- package/DialogActions/dialogActionsClasses.d.ts +10 -10
- package/DialogContent/dialogContentClasses.d.ts +10 -10
- package/DialogContentText/dialogContentTextClasses.d.ts +8 -8
- package/DialogTitle/dialogTitleClasses.d.ts +8 -8
- package/Divider/dividerClasses.d.ts +34 -34
- package/Drawer/drawerClasses.d.ts +30 -30
- package/Fab/fabClasses.d.ts +26 -26
- package/FilledInput/filledInputClasses.d.ts +40 -40
- package/FormControl/formControlClasses.d.ts +14 -14
- package/FormControlLabel/formControlLabelClasses.d.ts +20 -20
- package/FormGroup/formGroupClasses.d.ts +12 -12
- package/FormHelperText/formHelperTextClasses.d.ts +22 -22
- package/FormLabel/formLabelClasses.d.ts +22 -22
- package/Grid/gridClasses.d.ts +48 -48
- package/Icon/iconClasses.d.ts +24 -24
- package/IconButton/iconButtonClasses.d.ts +26 -26
- package/ImageList/imageListClasses.d.ts +16 -16
- package/ImageListItem/imageListItemClasses.d.ts +18 -18
- package/ImageListItemBar/imageListItemBarClasses.d.ts +30 -30
- package/Input/inputClasses.d.ts +34 -34
- package/InputAdornment/inputAdornmentClasses.d.ts +24 -24
- package/InputBase/inputBaseClasses.d.ts +44 -44
- package/InputLabel/inputLabelClasses.d.ts +32 -32
- package/LinearProgress/linearProgressClasses.d.ts +42 -42
- package/Link/Link.js +12 -5
- package/Link/linkClasses.d.ts +18 -18
- package/List/listClasses.d.ts +14 -14
- package/ListItem/listItemClasses.d.ts +30 -30
- package/ListItemAvatar/listItemAvatarClasses.d.ts +10 -10
- package/ListItemButton/ListItemButton.js +1 -0
- package/ListItemButton/listItemButtonClasses.d.ts +22 -22
- package/ListItemIcon/listItemIconClasses.d.ts +10 -10
- package/ListItemSecondaryAction/listItemSecondaryActionClasses.d.ts +10 -10
- package/ListItemText/listItemTextClasses.d.ts +18 -18
- package/ListSubheader/listSubheaderClasses.d.ts +18 -18
- package/Menu/menuClasses.d.ts +12 -12
- package/MenuItem/menuItemClasses.d.ts +20 -20
- package/MobileStepper/mobileStepperClasses.d.ts +22 -22
- package/NativeSelect/nativeSelectClasses.d.ts +32 -32
- package/OutlinedInput/outlinedInputClasses.d.ts +36 -36
- package/Pagination/paginationClasses.d.ts +14 -14
- package/PaginationItem/paginationItemClasses.d.ts +42 -42
- package/Paper/paperClasses.d.ts +39 -39
- package/Popover/popoverClasses.d.ts +10 -10
- package/Popper/Popper.d.ts +29 -29
- package/Radio/radioClasses.d.ts +16 -16
- package/RadioGroup/RadioGroupContext.d.ts +11 -11
- package/RadioGroup/useRadioGroup.d.ts +4 -4
- package/Rating/ratingClasses.d.ts +40 -40
- package/ScopedCssBaseline/scopedCssBaselineClasses.d.ts +8 -8
- package/Select/selectClasses.d.ts +30 -30
- package/Skeleton/skeletonClasses.d.ts +24 -24
- package/Snackbar/snackbarClasses.d.ts +20 -20
- package/SnackbarContent/snackbarContentClasses.d.ts +12 -12
- package/SpeedDial/speedDialClasses.d.ts +22 -22
- package/SpeedDialAction/speedDialActionClasses.d.ts +20 -20
- package/SpeedDialIcon/speedDialIconClasses.d.ts +18 -18
- package/Step/StepContext.d.ts +20 -20
- package/Step/stepClasses.d.ts +16 -16
- package/StepButton/stepButtonClasses.d.ts +14 -14
- package/StepConnector/stepConnectorClasses.d.ts +26 -26
- package/StepContent/stepContentClasses.d.ts +12 -12
- package/StepIcon/stepIconClasses.d.ts +16 -16
- package/StepLabel/stepLabelClasses.d.ts +28 -28
- package/Stepper/stepperClasses.d.ts +14 -14
- package/SvgIcon/svgIconClasses.d.ts +24 -24
- package/Switch/switchClasses.d.ts +32 -32
- package/Tab/tabClasses.d.ts +26 -26
- package/TabScrollButton/tabScrollButtonClasses.d.ts +12 -12
- package/Table/tableClasses.d.ts +10 -10
- package/TableBody/tableBodyClasses.d.ts +8 -8
- package/TableCell/tableCellClasses.d.ts +32 -32
- package/TableContainer/tableContainerClasses.d.ts +8 -8
- package/TableFooter/tableFooterClasses.d.ts +8 -8
- package/TableHead/tableHeadClasses.d.ts +8 -8
- package/TablePagination/tablePaginationClasses.d.ts +28 -28
- package/TableRow/tableRowClasses.d.ts +16 -16
- package/TableSortLabel/tableSortLabelClasses.d.ts +16 -16
- package/Tabs/tabsClasses.d.ts +32 -32
- package/TextField/TextField.d.ts +0 -1
- package/TextField/textFieldClasses.d.ts +8 -8
- package/ToggleButton/toggleButtonClasses.d.ts +24 -24
- package/ToggleButtonGroup/toggleButtonGroupClasses.d.ts +18 -18
- package/Toolbar/toolbarClasses.d.ts +14 -14
- package/Tooltip/tooltipClasses.d.ts +30 -30
- package/Typography/typographyClasses.d.ts +50 -50
- package/className/index.d.ts +8 -8
- package/darkScrollbar/index.d.ts +28 -28
- package/index.js +1 -1
- package/internal/switchBaseClasses.d.ts +12 -12
- package/legacy/Badge/Badge.js +44 -21
- package/legacy/Badge/badgeClasses.js +8 -0
- package/legacy/Badge/index.js +2 -1
- package/legacy/BottomNavigation/BottomNavigation.js +0 -0
- package/legacy/Button/Button.js +30 -29
- package/legacy/Link/Link.js +12 -4
- package/legacy/ListItemButton/ListItemButton.js +1 -0
- package/legacy/index.js +1 -1
- package/legacy/locale/index.js +115 -111
- package/legacy/styles/CssVarsProvider.js +31 -0
- package/legacy/styles/experimental_extendTheme.js +96 -0
- package/legacy/styles/index.js +3 -1
- package/locale/index.d.ts +71 -71
- package/locale/index.js +6 -3
- package/modern/Badge/Badge.js +40 -18
- package/modern/Badge/badgeClasses.js +8 -0
- package/modern/Badge/index.js +2 -1
- package/modern/BottomNavigation/BottomNavigation.js +0 -0
- package/modern/Button/Button.js +29 -28
- package/modern/Link/Link.js +12 -5
- package/modern/ListItemButton/ListItemButton.js +1 -0
- package/modern/index.js +1 -1
- package/modern/locale/index.js +6 -3
- package/modern/styles/CssVarsProvider.js +28 -0
- package/modern/styles/experimental_extendTheme.js +89 -0
- package/modern/styles/index.js +3 -1
- package/node/Badge/Badge.js +53 -32
- package/node/Badge/badgeClasses.js +22 -0
- package/node/Badge/index.js +17 -5
- package/node/BottomNavigation/BottomNavigation.js +0 -0
- package/node/Button/Button.js +101 -96
- package/node/Link/Link.js +13 -5
- package/node/ListItemButton/ListItemButton.js +1 -0
- package/node/index.js +1 -1
- package/node/locale/index.js +6 -3
- package/node/styles/CssVarsProvider.js +41 -0
- package/node/styles/experimental_extendTheme.js +105 -0
- package/node/styles/index.js +58 -0
- package/package.json +7 -7
- package/styles/CssVarsProvider.d.ts +28 -0
- package/styles/CssVarsProvider.js +28 -0
- package/styles/createPalette.d.ts +26 -0
- package/styles/experimental_extendTheme.d.ts +90 -0
- package/styles/experimental_extendTheme.js +91 -0
- package/styles/index.d.ts +5 -0
- package/styles/index.js +3 -1
- package/transitions/index.d.ts +1 -1
- package/transitions/transition.d.ts +13 -13
- package/transitions/utils.d.ts +23 -23
- package/umd/material-ui.development.js +1075 -258
- package/umd/material-ui.production.min.js +21 -21
- package/useMediaQuery/useMediaQuery.d.ts +31 -31
- package/useTouchRipple/index.d.ts +1 -1
- package/useTouchRipple/useTouchRipple.d.ts +28 -28
- package/utils/getScrollbarSize.d.ts +2 -2
- package/utils/ownerDocument.d.ts +2 -2
- package/utils/ownerWindow.d.ts +2 -2
- package/utils/setRef.d.ts +2 -2
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.useColorScheme = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _system = require("@mui/system");
|
|
13
|
+
|
|
14
|
+
var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
|
|
15
|
+
|
|
16
|
+
var _createTypography = _interopRequireDefault(require("./createTypography"));
|
|
17
|
+
|
|
18
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
19
|
+
const defaultTheme = (0, _experimental_extendTheme.default)();
|
|
20
|
+
const {
|
|
21
|
+
CssVarsProvider: Experimental_CssVarsProvider,
|
|
22
|
+
useColorScheme,
|
|
23
|
+
getInitColorSchemeScript
|
|
24
|
+
} = (0, _system.unstable_createCssVarsProvider)({
|
|
25
|
+
theme: defaultTheme,
|
|
26
|
+
defaultColorScheme: {
|
|
27
|
+
light: 'light',
|
|
28
|
+
dark: 'dark'
|
|
29
|
+
},
|
|
30
|
+
prefix: 'md',
|
|
31
|
+
resolveTheme: theme => {
|
|
32
|
+
const newTheme = (0, _extends2.default)({}, theme, {
|
|
33
|
+
typography: (0, _createTypography.default)(theme.palette, theme.typography)
|
|
34
|
+
});
|
|
35
|
+
return newTheme;
|
|
36
|
+
},
|
|
37
|
+
shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
|
|
38
|
+
});
|
|
39
|
+
exports.getInitColorSchemeScript = getInitColorSchemeScript;
|
|
40
|
+
exports.useColorScheme = useColorScheme;
|
|
41
|
+
exports.Experimental_CssVarsProvider = Experimental_CssVarsProvider;
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.defaultOpacity = exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
+
|
|
12
|
+
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
13
|
+
|
|
14
|
+
var _utils = require("@mui/utils");
|
|
15
|
+
|
|
16
|
+
var _system = require("@mui/system");
|
|
17
|
+
|
|
18
|
+
var _createTheme = _interopRequireDefault(require("./createTheme"));
|
|
19
|
+
|
|
20
|
+
var _createPalette = _interopRequireDefault(require("./createPalette"));
|
|
21
|
+
|
|
22
|
+
const _excluded = ["colorSchemes", "opacity"],
|
|
23
|
+
_excluded2 = ["palette"];
|
|
24
|
+
const defaultOpacity = {
|
|
25
|
+
active: 0.54,
|
|
26
|
+
hover: 0.04,
|
|
27
|
+
selected: 0.08,
|
|
28
|
+
disabled: 0.26,
|
|
29
|
+
focus: 0.12
|
|
30
|
+
};
|
|
31
|
+
exports.defaultOpacity = defaultOpacity;
|
|
32
|
+
|
|
33
|
+
function createTheme(options = {}, ...args) {
|
|
34
|
+
var _colorSchemesInput$li, _colorSchemesInput$da;
|
|
35
|
+
|
|
36
|
+
const {
|
|
37
|
+
colorSchemes: colorSchemesInput = {},
|
|
38
|
+
opacity: opacityInput = {}
|
|
39
|
+
} = options,
|
|
40
|
+
input = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded); // eslint-disable-next-line prefer-const
|
|
41
|
+
|
|
42
|
+
let _createThemeWithoutVa = (0, _createTheme.default)((0, _extends2.default)({}, input, colorSchemesInput.light && {
|
|
43
|
+
palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
|
|
44
|
+
})),
|
|
45
|
+
{
|
|
46
|
+
palette: lightPalette
|
|
47
|
+
} = _createThemeWithoutVa,
|
|
48
|
+
muiTheme = (0, _objectWithoutPropertiesLoose2.default)(_createThemeWithoutVa, _excluded2);
|
|
49
|
+
|
|
50
|
+
const {
|
|
51
|
+
palette: darkPalette
|
|
52
|
+
} = (0, _createTheme.default)({
|
|
53
|
+
palette: (0, _extends2.default)({
|
|
54
|
+
mode: 'dark'
|
|
55
|
+
}, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
|
|
56
|
+
});
|
|
57
|
+
colorSchemesInput.light = {
|
|
58
|
+
palette: lightPalette
|
|
59
|
+
};
|
|
60
|
+
colorSchemesInput.dark = {
|
|
61
|
+
palette: darkPalette
|
|
62
|
+
};
|
|
63
|
+
const colorSchemes = {};
|
|
64
|
+
Object.keys(colorSchemesInput).forEach(key => {
|
|
65
|
+
const palette = (0, _createPalette.default)(colorSchemesInput[key].palette);
|
|
66
|
+
Object.keys(palette).forEach(color => {
|
|
67
|
+
const colors = palette[color];
|
|
68
|
+
|
|
69
|
+
if (colors.main) {
|
|
70
|
+
palette[color].mainChannel = (0, _system.colorChannel)(colors.main);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
if (colors.light) {
|
|
74
|
+
palette[color].lightChannel = (0, _system.colorChannel)(colors.light);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
if (colors.dark) {
|
|
78
|
+
palette[color].darkChannel = (0, _system.colorChannel)(colors.dark);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
if (colors.primary) {
|
|
82
|
+
palette[color].primaryChannel = (0, _system.colorChannel)(colors.primary);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
if (colors.secondary) {
|
|
86
|
+
palette[color].secondaryChannel = (0, _system.colorChannel)(colors.secondary);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
if (colors.disabled) {
|
|
90
|
+
palette[color].disabledChannel = (0, _system.colorChannel)(colors.disabled);
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
colorSchemes[key] = {
|
|
94
|
+
palette
|
|
95
|
+
};
|
|
96
|
+
});
|
|
97
|
+
const opacity = (0, _extends2.default)({}, defaultOpacity, opacityInput);
|
|
98
|
+
muiTheme.colorSchemes = colorSchemes;
|
|
99
|
+
muiTheme.opacity = opacity;
|
|
100
|
+
muiTheme = args.reduce((acc, argument) => (0, _utils.deepmerge)(acc, argument), muiTheme);
|
|
101
|
+
return muiTheme;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
var _default = createTheme;
|
|
105
|
+
exports.default = _default;
|
package/node/styles/index.js
CHANGED
|
@@ -5,6 +5,42 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
+
var _exportNames = {
|
|
9
|
+
adaptV4Theme: true,
|
|
10
|
+
hexToRgb: true,
|
|
11
|
+
rgbToHex: true,
|
|
12
|
+
hslToRgb: true,
|
|
13
|
+
decomposeColor: true,
|
|
14
|
+
recomposeColor: true,
|
|
15
|
+
getContrastRatio: true,
|
|
16
|
+
getLuminance: true,
|
|
17
|
+
emphasize: true,
|
|
18
|
+
alpha: true,
|
|
19
|
+
darken: true,
|
|
20
|
+
lighten: true,
|
|
21
|
+
css: true,
|
|
22
|
+
keyframes: true,
|
|
23
|
+
experimental_sx: true,
|
|
24
|
+
StyledEngineProvider: true,
|
|
25
|
+
createTheme: true,
|
|
26
|
+
createMuiTheme: true,
|
|
27
|
+
unstable_createMuiStrictModeTheme: true,
|
|
28
|
+
createStyles: true,
|
|
29
|
+
unstable_getUnit: true,
|
|
30
|
+
unstable_toUnitless: true,
|
|
31
|
+
responsiveFontSizes: true,
|
|
32
|
+
duration: true,
|
|
33
|
+
easing: true,
|
|
34
|
+
useTheme: true,
|
|
35
|
+
useThemeProps: true,
|
|
36
|
+
styled: true,
|
|
37
|
+
experimentalStyled: true,
|
|
38
|
+
ThemeProvider: true,
|
|
39
|
+
makeStyles: true,
|
|
40
|
+
withStyles: true,
|
|
41
|
+
withTheme: true,
|
|
42
|
+
experimental_extendTheme: true
|
|
43
|
+
};
|
|
8
44
|
Object.defineProperty(exports, "StyledEngineProvider", {
|
|
9
45
|
enumerable: true,
|
|
10
46
|
get: function () {
|
|
@@ -89,6 +125,12 @@ Object.defineProperty(exports, "experimentalStyled", {
|
|
|
89
125
|
return _styled.default;
|
|
90
126
|
}
|
|
91
127
|
});
|
|
128
|
+
Object.defineProperty(exports, "experimental_extendTheme", {
|
|
129
|
+
enumerable: true,
|
|
130
|
+
get: function () {
|
|
131
|
+
return _experimental_extendTheme.default;
|
|
132
|
+
}
|
|
133
|
+
});
|
|
92
134
|
Object.defineProperty(exports, "experimental_sx", {
|
|
93
135
|
enumerable: true,
|
|
94
136
|
get: function () {
|
|
@@ -234,6 +276,22 @@ var _withStyles = _interopRequireDefault(require("./withStyles"));
|
|
|
234
276
|
|
|
235
277
|
var _withTheme = _interopRequireDefault(require("./withTheme"));
|
|
236
278
|
|
|
279
|
+
var _CssVarsProvider = require("./CssVarsProvider");
|
|
280
|
+
|
|
281
|
+
Object.keys(_CssVarsProvider).forEach(function (key) {
|
|
282
|
+
if (key === "default" || key === "__esModule") return;
|
|
283
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
284
|
+
if (key in exports && exports[key] === _CssVarsProvider[key]) return;
|
|
285
|
+
Object.defineProperty(exports, key, {
|
|
286
|
+
enumerable: true,
|
|
287
|
+
get: function () {
|
|
288
|
+
return _CssVarsProvider[key];
|
|
289
|
+
}
|
|
290
|
+
});
|
|
291
|
+
});
|
|
292
|
+
|
|
293
|
+
var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
|
|
294
|
+
|
|
237
295
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
238
296
|
|
|
239
297
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/material",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.6.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"peerDependencies": {
|
|
30
30
|
"@emotion/react": "^11.5.0",
|
|
31
31
|
"@emotion/styled": "^11.3.0",
|
|
32
|
-
"@types/react": "^16.8.6 || ^17.0.0",
|
|
33
|
-
"react": "^17.0.0",
|
|
34
|
-
"react-dom": "^17.0.0"
|
|
32
|
+
"@types/react": "^16.8.6 || ^17.0.0 || ^18.0.0",
|
|
33
|
+
"react": "^17.0.0 || ^18.0.0",
|
|
34
|
+
"react-dom": "^17.0.0 || ^18.0.0"
|
|
35
35
|
},
|
|
36
36
|
"peerDependenciesMeta": {
|
|
37
37
|
"@types/react": {
|
|
@@ -46,10 +46,10 @@
|
|
|
46
46
|
},
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@babel/runtime": "^7.17.2",
|
|
49
|
-
"@mui/base": "5.0.0-alpha.
|
|
50
|
-
"@mui/system": "^5.
|
|
49
|
+
"@mui/base": "5.0.0-alpha.75",
|
|
50
|
+
"@mui/system": "^5.6.0",
|
|
51
51
|
"@mui/types": "^7.1.3",
|
|
52
|
-
"@mui/utils": "^5.
|
|
52
|
+
"@mui/utils": "^5.6.0",
|
|
53
53
|
"@types/react-transition-group": "^4.4.4",
|
|
54
54
|
"clsx": "^1.1.1",
|
|
55
55
|
"csstype": "^3.0.11",
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
2
|
+
import { CreateCssVarsProviderResult } from '@mui/system';
|
|
3
|
+
import { ThemeOptions, SupportedColorScheme } from './experimental_extendTheme';
|
|
4
|
+
import { PaletteWithChannels } from './createPalette';
|
|
5
|
+
|
|
6
|
+
export interface ThemeInput extends Omit<ThemeOptions, 'colorSchemes'> {
|
|
7
|
+
colorSchemes: Partial<
|
|
8
|
+
Record<
|
|
9
|
+
SupportedColorScheme,
|
|
10
|
+
{
|
|
11
|
+
palette: PaletteWithChannels;
|
|
12
|
+
}
|
|
13
|
+
>
|
|
14
|
+
>;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
type MDCreateCssVarsProviderResult = CreateCssVarsProviderResult<SupportedColorScheme, ThemeInput>;
|
|
18
|
+
|
|
19
|
+
declare const useColorScheme: MDCreateCssVarsProviderResult['useColorScheme'];
|
|
20
|
+
declare const getInitColorSchemeScript: MDCreateCssVarsProviderResult['getInitColorSchemeScript'];
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* This component is an experimental Theme Provider that generates CSS variabels out of the theme tokens.
|
|
24
|
+
* It should preferably be used at **the root of your component tree**.
|
|
25
|
+
*/
|
|
26
|
+
declare const Experimental_CssVarsProvider: MDCreateCssVarsProviderResult['CssVarsProvider'];
|
|
27
|
+
|
|
28
|
+
export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
|
|
3
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
4
|
+
import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
|
|
5
|
+
import experimental_extendTheme from './experimental_extendTheme';
|
|
6
|
+
import createTypography from './createTypography';
|
|
7
|
+
const defaultTheme = experimental_extendTheme();
|
|
8
|
+
const {
|
|
9
|
+
CssVarsProvider: Experimental_CssVarsProvider,
|
|
10
|
+
useColorScheme,
|
|
11
|
+
getInitColorSchemeScript
|
|
12
|
+
} = createCssVarsProvider({
|
|
13
|
+
theme: defaultTheme,
|
|
14
|
+
defaultColorScheme: {
|
|
15
|
+
light: 'light',
|
|
16
|
+
dark: 'dark'
|
|
17
|
+
},
|
|
18
|
+
prefix: 'md',
|
|
19
|
+
resolveTheme: theme => {
|
|
20
|
+
const newTheme = _extends({}, theme, {
|
|
21
|
+
typography: createTypography(theme.palette, theme.typography)
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
return newTheme;
|
|
25
|
+
},
|
|
26
|
+
shouldSkipGeneratingVar: keys => !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/)
|
|
27
|
+
});
|
|
28
|
+
export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };
|
|
@@ -98,6 +98,32 @@ export interface Palette {
|
|
|
98
98
|
augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
|
|
99
99
|
}
|
|
100
100
|
|
|
101
|
+
export interface Channels {
|
|
102
|
+
mainChannel: string;
|
|
103
|
+
lightChannel: string;
|
|
104
|
+
darkChannel: string;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
export interface PaletteWithChannels {
|
|
108
|
+
common: CommonColors;
|
|
109
|
+
mode: PaletteMode;
|
|
110
|
+
contrastThreshold: number;
|
|
111
|
+
tonalOffset: PaletteTonalOffset;
|
|
112
|
+
primary: PaletteColor & Channels;
|
|
113
|
+
secondary: PaletteColor & Channels;
|
|
114
|
+
error: PaletteColor & Channels;
|
|
115
|
+
warning: PaletteColor & Channels;
|
|
116
|
+
info: PaletteColor & Channels;
|
|
117
|
+
success: PaletteColor & Channels;
|
|
118
|
+
grey: Color;
|
|
119
|
+
text: TypeText & { primaryChannel: string; secondaryChannel: string; disabledChannel: string };
|
|
120
|
+
divider: TypeDivider;
|
|
121
|
+
action: TypeAction & { disabledChannel: string };
|
|
122
|
+
background: TypeBackground;
|
|
123
|
+
getContrastText: (background: string) => string;
|
|
124
|
+
augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
|
|
125
|
+
}
|
|
126
|
+
|
|
101
127
|
export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
|
|
102
128
|
|
|
103
129
|
export interface PaletteOptions {
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/* eslint-disable @typescript-eslint/naming-convention */
|
|
2
|
+
import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
|
|
3
|
+
import { OverridableStringUnion } from '@mui/types';
|
|
4
|
+
import { Mixins, MixinsOptions } from './createMixins';
|
|
5
|
+
import { Palette, PaletteOptions } from './createPalette';
|
|
6
|
+
import { Typography, TypographyOptions } from './createTypography';
|
|
7
|
+
import { Shadows } from './shadows';
|
|
8
|
+
import { Transitions, TransitionsOptions } from './createTransitions';
|
|
9
|
+
import { ZIndex, ZIndexOptions } from './zIndex';
|
|
10
|
+
import { Components } from './components';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* default MD color-schemes
|
|
14
|
+
*/
|
|
15
|
+
export type DefaultColorScheme = 'light' | 'dark';
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* The application can add more color-scheme by extending this interface via module augmentation
|
|
19
|
+
*
|
|
20
|
+
* Ex.
|
|
21
|
+
* declare module @mui/material/styles {
|
|
22
|
+
* interface ColorSchemeOverrides {
|
|
23
|
+
* foo: true;
|
|
24
|
+
* }
|
|
25
|
+
* }
|
|
26
|
+
*
|
|
27
|
+
* // SupportedColorScheme = 'light' | 'dark' | 'foo';
|
|
28
|
+
*/
|
|
29
|
+
export interface ColorSchemeOverrides {}
|
|
30
|
+
export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverrides>;
|
|
31
|
+
|
|
32
|
+
/**
|
|
33
|
+
* All color-schemes that the application has
|
|
34
|
+
*/
|
|
35
|
+
export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
|
|
36
|
+
|
|
37
|
+
export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
|
|
38
|
+
mixins?: MixinsOptions;
|
|
39
|
+
components?: Components<BaseTheme>;
|
|
40
|
+
// palette?: PaletteOptions;
|
|
41
|
+
colorSchemes?: Record<SupportedColorScheme, { palette: PaletteOptions }>;
|
|
42
|
+
shadows?: Shadows;
|
|
43
|
+
transitions?: TransitionsOptions;
|
|
44
|
+
typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
|
|
45
|
+
zIndex?: ZIndexOptions;
|
|
46
|
+
unstable_strictMode?: boolean;
|
|
47
|
+
opacity?: {
|
|
48
|
+
active?: number;
|
|
49
|
+
hover?: number;
|
|
50
|
+
selected?: number;
|
|
51
|
+
disabled?: number;
|
|
52
|
+
focus?: number;
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
interface BaseTheme extends SystemTheme {
|
|
57
|
+
mixins: Mixins;
|
|
58
|
+
palette: Palette;
|
|
59
|
+
shadows: Shadows;
|
|
60
|
+
transitions: Transitions;
|
|
61
|
+
typography: Typography;
|
|
62
|
+
zIndex: ZIndex;
|
|
63
|
+
unstable_strictMode?: boolean;
|
|
64
|
+
colorSchemes: Record<string, { palette: Palette }>;
|
|
65
|
+
opacity: {
|
|
66
|
+
active: number;
|
|
67
|
+
hover: number;
|
|
68
|
+
selected: number;
|
|
69
|
+
disabled: number;
|
|
70
|
+
focus: number;
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// shut off automatic exporting for the `BaseTheme` above
|
|
75
|
+
export {};
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* Our [TypeScript guide on theme customization](https://mui.com/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
|
|
79
|
+
*/
|
|
80
|
+
export interface Theme extends BaseTheme {
|
|
81
|
+
components?: Components<BaseTheme>;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
/**
|
|
85
|
+
* Generate a theme base on the options received.
|
|
86
|
+
* @param options Takes an incomplete theme object and adds the missing parts.
|
|
87
|
+
* @param args Deep merge the arguments with the about to be returned theme.
|
|
88
|
+
* @returns A complete, ready-to-use theme object.
|
|
89
|
+
*/
|
|
90
|
+
export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["colorSchemes", "opacity"],
|
|
4
|
+
_excluded2 = ["palette"];
|
|
5
|
+
import { deepmerge } from '@mui/utils';
|
|
6
|
+
import { colorChannel } from '@mui/system';
|
|
7
|
+
import createThemeWithoutVars from './createTheme';
|
|
8
|
+
import createPalette from './createPalette';
|
|
9
|
+
export const defaultOpacity = {
|
|
10
|
+
active: 0.54,
|
|
11
|
+
hover: 0.04,
|
|
12
|
+
selected: 0.08,
|
|
13
|
+
disabled: 0.26,
|
|
14
|
+
focus: 0.12
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
function createTheme(options = {}, ...args) {
|
|
18
|
+
var _colorSchemesInput$li, _colorSchemesInput$da;
|
|
19
|
+
|
|
20
|
+
const {
|
|
21
|
+
colorSchemes: colorSchemesInput = {},
|
|
22
|
+
opacity: opacityInput = {}
|
|
23
|
+
} = options,
|
|
24
|
+
input = _objectWithoutPropertiesLoose(options, _excluded); // eslint-disable-next-line prefer-const
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
let _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
|
|
28
|
+
palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
|
|
29
|
+
})),
|
|
30
|
+
{
|
|
31
|
+
palette: lightPalette
|
|
32
|
+
} = _createThemeWithoutVa,
|
|
33
|
+
muiTheme = _objectWithoutPropertiesLoose(_createThemeWithoutVa, _excluded2);
|
|
34
|
+
|
|
35
|
+
const {
|
|
36
|
+
palette: darkPalette
|
|
37
|
+
} = createThemeWithoutVars({
|
|
38
|
+
palette: _extends({
|
|
39
|
+
mode: 'dark'
|
|
40
|
+
}, (_colorSchemesInput$da = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da.palette)
|
|
41
|
+
});
|
|
42
|
+
colorSchemesInput.light = {
|
|
43
|
+
palette: lightPalette
|
|
44
|
+
};
|
|
45
|
+
colorSchemesInput.dark = {
|
|
46
|
+
palette: darkPalette
|
|
47
|
+
};
|
|
48
|
+
const colorSchemes = {};
|
|
49
|
+
Object.keys(colorSchemesInput).forEach(key => {
|
|
50
|
+
const palette = createPalette(colorSchemesInput[key].palette);
|
|
51
|
+
Object.keys(palette).forEach(color => {
|
|
52
|
+
const colors = palette[color];
|
|
53
|
+
|
|
54
|
+
if (colors.main) {
|
|
55
|
+
palette[color].mainChannel = colorChannel(colors.main);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
if (colors.light) {
|
|
59
|
+
palette[color].lightChannel = colorChannel(colors.light);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
if (colors.dark) {
|
|
63
|
+
palette[color].darkChannel = colorChannel(colors.dark);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
if (colors.primary) {
|
|
67
|
+
palette[color].primaryChannel = colorChannel(colors.primary);
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
if (colors.secondary) {
|
|
71
|
+
palette[color].secondaryChannel = colorChannel(colors.secondary);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
if (colors.disabled) {
|
|
75
|
+
palette[color].disabledChannel = colorChannel(colors.disabled);
|
|
76
|
+
}
|
|
77
|
+
});
|
|
78
|
+
colorSchemes[key] = {
|
|
79
|
+
palette
|
|
80
|
+
};
|
|
81
|
+
});
|
|
82
|
+
|
|
83
|
+
const opacity = _extends({}, defaultOpacity, opacityInput);
|
|
84
|
+
|
|
85
|
+
muiTheme.colorSchemes = colorSchemes;
|
|
86
|
+
muiTheme.opacity = opacity;
|
|
87
|
+
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
|
|
88
|
+
return muiTheme;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export default createTheme;
|
package/styles/index.d.ts
CHANGED
|
@@ -89,3 +89,8 @@ export interface StyledComponentProps<ClassKey extends string = string> {
|
|
|
89
89
|
export { default as makeStyles } from './makeStyles';
|
|
90
90
|
export { default as withStyles } from './withStyles';
|
|
91
91
|
export { default as withTheme } from './withTheme';
|
|
92
|
+
|
|
93
|
+
export * from './CssVarsProvider';
|
|
94
|
+
|
|
95
|
+
export { default as experimental_extendTheme } from './experimental_extendTheme';
|
|
96
|
+
export * from './experimental_extendTheme';
|
package/styles/index.js
CHANGED
|
@@ -16,4 +16,6 @@ export { StyledEngineProvider } from '@mui/system'; // The legacy utilities from
|
|
|
16
16
|
|
|
17
17
|
export { default as makeStyles } from './makeStyles';
|
|
18
18
|
export { default as withStyles } from './withStyles';
|
|
19
|
-
export { default as withTheme } from './withTheme';
|
|
19
|
+
export { default as withTheme } from './withTheme';
|
|
20
|
+
export * from './CssVarsProvider';
|
|
21
|
+
export { default as experimental_extendTheme } from './experimental_extendTheme';
|
package/transitions/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export * from './transition';
|
|
1
|
+
export * from './transition';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
|
|
4
|
-
export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
|
|
5
|
-
export interface EasingProps {
|
|
6
|
-
easing: string | {
|
|
7
|
-
enter?: string;
|
|
8
|
-
exit?: string;
|
|
9
|
-
};
|
|
10
|
-
}
|
|
11
|
-
export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
|
|
12
|
-
export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
|
|
13
|
-
}
|
|
1
|
+
import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
|
|
4
|
+
export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
|
|
5
|
+
export interface EasingProps {
|
|
6
|
+
easing: string | {
|
|
7
|
+
enter?: string;
|
|
8
|
+
exit?: string;
|
|
9
|
+
};
|
|
10
|
+
}
|
|
11
|
+
export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
|
|
12
|
+
export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
|
|
13
|
+
}
|
package/transitions/utils.d.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export declare const reflow: (node: Element) => number;
|
|
3
|
-
interface ComponentProps {
|
|
4
|
-
easing: string | {
|
|
5
|
-
enter?: string;
|
|
6
|
-
exit?: string;
|
|
7
|
-
} | undefined;
|
|
8
|
-
style: React.CSSProperties | undefined;
|
|
9
|
-
timeout: number | {
|
|
10
|
-
enter?: number;
|
|
11
|
-
exit?: number;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
interface Options {
|
|
15
|
-
mode: 'enter' | 'exit';
|
|
16
|
-
}
|
|
17
|
-
interface TransitionProps {
|
|
18
|
-
duration: string | number;
|
|
19
|
-
easing: string | undefined;
|
|
20
|
-
delay: string | undefined;
|
|
21
|
-
}
|
|
22
|
-
export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
|
|
23
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
export declare const reflow: (node: Element) => number;
|
|
3
|
+
interface ComponentProps {
|
|
4
|
+
easing: string | {
|
|
5
|
+
enter?: string;
|
|
6
|
+
exit?: string;
|
|
7
|
+
} | undefined;
|
|
8
|
+
style: React.CSSProperties | undefined;
|
|
9
|
+
timeout: number | {
|
|
10
|
+
enter?: number;
|
|
11
|
+
exit?: number;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
interface Options {
|
|
15
|
+
mode: 'enter' | 'exit';
|
|
16
|
+
}
|
|
17
|
+
interface TransitionProps {
|
|
18
|
+
duration: string | number;
|
|
19
|
+
easing: string | undefined;
|
|
20
|
+
delay: string | undefined;
|
|
21
|
+
}
|
|
22
|
+
export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
|
|
23
|
+
export {};
|