@mui/material 5.14.8 → 5.14.10
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/AlertTitle/AlertTitle.d.ts +1 -0
- package/Avatar/Avatar.js +1 -1
- package/Breadcrumbs/Breadcrumbs.d.ts +1 -0
- package/Button/Button.js +4 -1
- package/ButtonGroup/ButtonGroup.js +86 -54
- package/ButtonGroup/ButtonGroupButtonContext.d.ts +6 -0
- package/ButtonGroup/ButtonGroupButtonContext.js +9 -0
- package/ButtonGroup/buttonGroupClasses.d.ts +6 -0
- package/ButtonGroup/buttonGroupClasses.js +1 -1
- package/CHANGELOG.md +179 -19
- package/Chip/Chip.js +2 -0
- package/DialogTitle/DialogTitle.d.ts +1 -0
- package/ListSubheader/listSubheaderClasses.js +1 -1
- package/Modal/Modal.js +1 -1
- package/README.md +9 -198
- package/Slider/Slider.js +9 -86
- package/TablePagination/TablePagination.d.ts +1 -0
- package/Tabs/Tabs.d.ts +1 -1
- package/Tabs/Tabs.js +2 -5
- package/index.js +1 -1
- package/legacy/Avatar/Avatar.js +1 -1
- package/legacy/Button/Button.js +4 -1
- package/legacy/ButtonGroup/ButtonGroup.js +81 -56
- package/legacy/ButtonGroup/ButtonGroupButtonContext.js +9 -0
- package/legacy/ButtonGroup/buttonGroupClasses.js +1 -1
- package/legacy/Chip/Chip.js +2 -0
- package/legacy/ListSubheader/listSubheaderClasses.js +1 -1
- package/legacy/Modal/Modal.js +3 -1
- package/legacy/Slider/Slider.js +9 -86
- package/legacy/Tabs/Tabs.js +2 -5
- package/legacy/index.js +1 -1
- package/legacy/useTouchRipple/useTouchRipple.js +4 -4
- package/modern/Avatar/Avatar.js +1 -1
- package/modern/Button/Button.js +4 -1
- package/modern/ButtonGroup/ButtonGroup.js +86 -54
- package/modern/ButtonGroup/ButtonGroupButtonContext.js +9 -0
- package/modern/ButtonGroup/buttonGroupClasses.js +1 -1
- package/modern/Chip/Chip.js +2 -0
- package/modern/ListSubheader/listSubheaderClasses.js +1 -1
- package/modern/Modal/Modal.js +1 -1
- package/modern/Slider/Slider.js +9 -86
- package/modern/Tabs/Tabs.js +2 -5
- package/modern/index.js +1 -1
- package/node/Avatar/Avatar.js +1 -1
- package/node/Button/Button.js +4 -1
- package/node/ButtonGroup/ButtonGroup.js +86 -54
- package/node/ButtonGroup/ButtonGroupButtonContext.js +18 -0
- package/node/ButtonGroup/buttonGroupClasses.js +1 -1
- package/node/Chip/Chip.js +2 -0
- package/node/ListSubheader/listSubheaderClasses.js +2 -2
- package/node/Modal/Modal.js +1 -1
- package/node/Slider/Slider.js +3 -73
- package/node/Tabs/Tabs.js +2 -5
- package/node/index.js +1 -1
- package/node/useTouchRipple/useTouchRipple.js +4 -4
- package/package.json +16 -16
- package/umd/material-ui.development.js +215 -235
- package/umd/material-ui.production.min.js +18 -18
- package/useTouchRipple/useTouchRipple.js +4 -4
|
@@ -13,6 +13,7 @@ import styled from '../styles/styled';
|
|
|
13
13
|
import useThemeProps from '../styles/useThemeProps';
|
|
14
14
|
import buttonGroupClasses, { getButtonGroupUtilityClass } from './buttonGroupClasses';
|
|
15
15
|
import ButtonGroupContext from './ButtonGroupContext';
|
|
16
|
+
import ButtonGroupButtonContext from './ButtonGroupButtonContext';
|
|
16
17
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
18
|
const overridesResolver = (props, styles) => {
|
|
18
19
|
const {
|
|
@@ -28,6 +29,12 @@ const overridesResolver = (props, styles) => {
|
|
|
28
29
|
[`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.orientation)}`]
|
|
29
30
|
}, {
|
|
30
31
|
[`& .${buttonGroupClasses.grouped}`]: styles[`grouped${capitalize(ownerState.variant)}${capitalize(ownerState.color)}`]
|
|
32
|
+
}, {
|
|
33
|
+
[`& .${buttonGroupClasses.firstButton}`]: styles.firstButton
|
|
34
|
+
}, {
|
|
35
|
+
[`& .${buttonGroupClasses.lastButton}`]: styles.lastButton
|
|
36
|
+
}, {
|
|
37
|
+
[`& .${buttonGroupClasses.middleButton}`]: styles.middleButton
|
|
31
38
|
}, styles.root, styles[ownerState.variant], ownerState.disableElevation === true && styles.disableElevation, ownerState.fullWidth && styles.fullWidth, ownerState.orientation === 'vertical' && styles.vertical];
|
|
32
39
|
};
|
|
33
40
|
const useUtilityClasses = ownerState => {
|
|
@@ -42,7 +49,10 @@ const useUtilityClasses = ownerState => {
|
|
|
42
49
|
} = ownerState;
|
|
43
50
|
const slots = {
|
|
44
51
|
root: ['root', variant, orientation === 'vertical' && 'vertical', fullWidth && 'fullWidth', disableElevation && 'disableElevation'],
|
|
45
|
-
grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled']
|
|
52
|
+
grouped: ['grouped', `grouped${capitalize(orientation)}`, `grouped${capitalize(variant)}`, `grouped${capitalize(variant)}${capitalize(orientation)}`, `grouped${capitalize(variant)}${capitalize(color)}`, disabled && 'disabled'],
|
|
53
|
+
firstButton: ['firstButton'],
|
|
54
|
+
lastButton: ['lastButton'],
|
|
55
|
+
middleButton: ['middleButton']
|
|
46
56
|
};
|
|
47
57
|
return composeClasses(slots, getButtonGroupUtilityClass, classes);
|
|
48
58
|
};
|
|
@@ -67,63 +77,63 @@ const ButtonGroupRoot = styled('div', {
|
|
|
67
77
|
}, {
|
|
68
78
|
[`& .${buttonGroupClasses.grouped}`]: _extends({
|
|
69
79
|
minWidth: 40,
|
|
70
|
-
'&:not(:first-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
|
|
71
|
-
borderTopLeftRadius: 0,
|
|
72
|
-
borderBottomLeftRadius: 0
|
|
73
|
-
}, ownerState.orientation === 'vertical' && {
|
|
74
|
-
borderTopRightRadius: 0,
|
|
75
|
-
borderTopLeftRadius: 0
|
|
76
|
-
}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
77
|
-
marginLeft: -1
|
|
78
|
-
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
79
|
-
marginTop: -1
|
|
80
|
-
}),
|
|
81
|
-
'&:not(:last-of-type)': _extends({}, ownerState.orientation === 'horizontal' && {
|
|
82
|
-
borderTopRightRadius: 0,
|
|
83
|
-
borderBottomRightRadius: 0
|
|
84
|
-
}, ownerState.orientation === 'vertical' && {
|
|
85
|
-
borderBottomRightRadius: 0,
|
|
86
|
-
borderBottomLeftRadius: 0
|
|
87
|
-
}, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
|
|
88
|
-
borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
|
89
|
-
[`&.${buttonGroupClasses.disabled}`]: {
|
|
90
|
-
borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
91
|
-
}
|
|
92
|
-
}, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
|
|
93
|
-
borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
|
94
|
-
[`&.${buttonGroupClasses.disabled}`]: {
|
|
95
|
-
borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
96
|
-
}
|
|
97
|
-
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
98
|
-
borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
|
|
99
|
-
}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
100
|
-
borderRightColor: 'transparent'
|
|
101
|
-
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
102
|
-
borderBottomColor: 'transparent'
|
|
103
|
-
}, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
|
|
104
|
-
borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
|
|
105
|
-
[`&.${buttonGroupClasses.disabled}`]: {
|
|
106
|
-
borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
107
|
-
}
|
|
108
|
-
}, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
|
|
109
|
-
borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
|
|
110
|
-
[`&.${buttonGroupClasses.disabled}`]: {
|
|
111
|
-
borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
112
|
-
}
|
|
113
|
-
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
114
|
-
borderColor: (theme.vars || theme).palette[ownerState.color].dark
|
|
115
|
-
}, {
|
|
116
|
-
'&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
117
|
-
borderRightColor: 'currentColor'
|
|
118
|
-
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
119
|
-
borderBottomColor: 'currentColor'
|
|
120
|
-
})
|
|
121
|
-
}),
|
|
122
80
|
'&:hover': _extends({}, ownerState.variant === 'contained' && {
|
|
123
81
|
boxShadow: 'none'
|
|
124
82
|
})
|
|
125
83
|
}, ownerState.variant === 'contained' && {
|
|
126
84
|
boxShadow: 'none'
|
|
85
|
+
}),
|
|
86
|
+
[`& .${buttonGroupClasses.firstButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
|
|
87
|
+
borderTopRightRadius: 0,
|
|
88
|
+
borderBottomRightRadius: 0
|
|
89
|
+
}, ownerState.orientation === 'vertical' && {
|
|
90
|
+
borderBottomRightRadius: 0,
|
|
91
|
+
borderBottomLeftRadius: 0
|
|
92
|
+
}, ownerState.variant === 'text' && ownerState.orientation === 'horizontal' && {
|
|
93
|
+
borderRight: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
|
94
|
+
[`&.${buttonGroupClasses.disabled}`]: {
|
|
95
|
+
borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
96
|
+
}
|
|
97
|
+
}, ownerState.variant === 'text' && ownerState.orientation === 'vertical' && {
|
|
98
|
+
borderBottom: theme.vars ? `1px solid rgba(${theme.vars.palette.common.onBackgroundChannel} / 0.23)` : `1px solid ${theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)'}`,
|
|
99
|
+
[`&.${buttonGroupClasses.disabled}`]: {
|
|
100
|
+
borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
101
|
+
}
|
|
102
|
+
}, ownerState.variant === 'text' && ownerState.color !== 'inherit' && {
|
|
103
|
+
borderColor: theme.vars ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / 0.5)` : alpha(theme.palette[ownerState.color].main, 0.5)
|
|
104
|
+
}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
105
|
+
borderRightColor: 'transparent'
|
|
106
|
+
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
107
|
+
borderBottomColor: 'transparent'
|
|
108
|
+
}, ownerState.variant === 'contained' && ownerState.orientation === 'horizontal' && {
|
|
109
|
+
borderRight: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
|
|
110
|
+
[`&.${buttonGroupClasses.disabled}`]: {
|
|
111
|
+
borderRight: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
112
|
+
}
|
|
113
|
+
}, ownerState.variant === 'contained' && ownerState.orientation === 'vertical' && {
|
|
114
|
+
borderBottom: `1px solid ${(theme.vars || theme).palette.grey[400]}`,
|
|
115
|
+
[`&.${buttonGroupClasses.disabled}`]: {
|
|
116
|
+
borderBottom: `1px solid ${(theme.vars || theme).palette.action.disabled}`
|
|
117
|
+
}
|
|
118
|
+
}, ownerState.variant === 'contained' && ownerState.color !== 'inherit' && {
|
|
119
|
+
borderColor: (theme.vars || theme).palette[ownerState.color].dark
|
|
120
|
+
}, {
|
|
121
|
+
'&:hover': _extends({}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
122
|
+
borderRightColor: 'currentColor'
|
|
123
|
+
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
124
|
+
borderBottomColor: 'currentColor'
|
|
125
|
+
})
|
|
126
|
+
}),
|
|
127
|
+
[`& .${buttonGroupClasses.lastButton},& .${buttonGroupClasses.middleButton}`]: _extends({}, ownerState.orientation === 'horizontal' && {
|
|
128
|
+
borderTopLeftRadius: 0,
|
|
129
|
+
borderBottomLeftRadius: 0
|
|
130
|
+
}, ownerState.orientation === 'vertical' && {
|
|
131
|
+
borderTopRightRadius: 0,
|
|
132
|
+
borderTopLeftRadius: 0
|
|
133
|
+
}, ownerState.variant === 'outlined' && ownerState.orientation === 'horizontal' && {
|
|
134
|
+
marginLeft: -1
|
|
135
|
+
}, ownerState.variant === 'outlined' && ownerState.orientation === 'vertical' && {
|
|
136
|
+
marginTop: -1
|
|
127
137
|
})
|
|
128
138
|
}));
|
|
129
139
|
const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps, ref) {
|
|
@@ -170,6 +180,20 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
|
|
|
170
180
|
size,
|
|
171
181
|
variant
|
|
172
182
|
}), [color, disabled, disableElevation, disableFocusRipple, disableRipple, fullWidth, size, variant, classes.grouped]);
|
|
183
|
+
const getButtonPositionClassName = (index, childrenParam) => {
|
|
184
|
+
const isFirstButton = index === 0;
|
|
185
|
+
const isLastButton = index === React.Children.count(childrenParam) - 1;
|
|
186
|
+
if (isFirstButton && isLastButton) {
|
|
187
|
+
return '';
|
|
188
|
+
}
|
|
189
|
+
if (isFirstButton) {
|
|
190
|
+
return classes.firstButton;
|
|
191
|
+
}
|
|
192
|
+
if (isLastButton) {
|
|
193
|
+
return classes.lastButton;
|
|
194
|
+
}
|
|
195
|
+
return classes.middleButton;
|
|
196
|
+
};
|
|
173
197
|
return /*#__PURE__*/_jsx(ButtonGroupRoot, _extends({
|
|
174
198
|
as: component,
|
|
175
199
|
role: "group",
|
|
@@ -179,7 +203,15 @@ const ButtonGroup = /*#__PURE__*/React.forwardRef(function ButtonGroup(inProps,
|
|
|
179
203
|
}, other, {
|
|
180
204
|
children: /*#__PURE__*/_jsx(ButtonGroupContext.Provider, {
|
|
181
205
|
value: context,
|
|
182
|
-
children: children
|
|
206
|
+
children: React.Children.map(children, (child, index) => {
|
|
207
|
+
if (! /*#__PURE__*/React.isValidElement(child)) {
|
|
208
|
+
return child;
|
|
209
|
+
}
|
|
210
|
+
return /*#__PURE__*/_jsx(ButtonGroupButtonContext.Provider, {
|
|
211
|
+
value: getButtonPositionClassName(index, children),
|
|
212
|
+
children: child
|
|
213
|
+
});
|
|
214
|
+
})
|
|
183
215
|
})
|
|
184
216
|
}));
|
|
185
217
|
});
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* @ignore - internal component.
|
|
4
|
+
*/
|
|
5
|
+
const ButtonGroupButtonContext = /*#__PURE__*/React.createContext(undefined);
|
|
6
|
+
if (process.env.NODE_ENV !== 'production') {
|
|
7
|
+
ButtonGroupButtonContext.displayName = 'ButtonGroupButtonContext';
|
|
8
|
+
}
|
|
9
|
+
export default ButtonGroupButtonContext;
|
|
@@ -3,5 +3,5 @@ import generateUtilityClass from '../generateUtilityClass';
|
|
|
3
3
|
export function getButtonGroupUtilityClass(slot) {
|
|
4
4
|
return generateUtilityClass('MuiButtonGroup', slot);
|
|
5
5
|
}
|
|
6
|
-
const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary']);
|
|
6
|
+
const buttonGroupClasses = generateUtilityClasses('MuiButtonGroup', ['root', 'contained', 'outlined', 'text', 'disableElevation', 'disabled', 'firstButton', 'fullWidth', 'vertical', 'grouped', 'groupedHorizontal', 'groupedVertical', 'groupedText', 'groupedTextHorizontal', 'groupedTextVertical', 'groupedTextPrimary', 'groupedTextSecondary', 'groupedOutlined', 'groupedOutlinedHorizontal', 'groupedOutlinedVertical', 'groupedOutlinedPrimary', 'groupedOutlinedSecondary', 'groupedContained', 'groupedContainedHorizontal', 'groupedContainedVertical', 'groupedContainedPrimary', 'groupedContainedSecondary', 'lastButton', 'middleButton']);
|
|
7
7
|
export default buttonGroupClasses;
|
package/modern/Chip/Chip.js
CHANGED
|
@@ -93,6 +93,8 @@ const ChipRoot = styled('div', {
|
|
|
93
93
|
borderRadius: 32 / 2,
|
|
94
94
|
whiteSpace: 'nowrap',
|
|
95
95
|
transition: theme.transitions.create(['background-color', 'box-shadow']),
|
|
96
|
+
// reset cursor explicitly in case ButtonBase is used
|
|
97
|
+
cursor: 'unset',
|
|
96
98
|
// We disable the focus ring for mouse, touch and keyboard users.
|
|
97
99
|
outline: 0,
|
|
98
100
|
textDecoration: 'none',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
|
|
2
2
|
import generateUtilityClass from '../generateUtilityClass';
|
|
3
3
|
export function getListSubheaderUtilityClass(slot) {
|
|
4
4
|
return generateUtilityClass('MuiListSubheader', slot);
|
package/modern/Modal/Modal.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
4
4
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
5
|
-
const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "open", "slotProps", "slots", "theme"];
|
|
5
|
+
const _excluded = ["BackdropComponent", "BackdropProps", "classes", "className", "closeAfterTransition", "children", "container", "component", "components", "componentsProps", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onTransitionEnter", "onTransitionExited", "open", "slotProps", "slots", "theme"];
|
|
6
6
|
import * as React from 'react';
|
|
7
7
|
import PropTypes from 'prop-types';
|
|
8
8
|
import clsx from 'clsx';
|
package/modern/Slider/Slider.js
CHANGED
|
@@ -15,14 +15,14 @@ import styled, { slotShouldForwardProp } from '../styles/styled';
|
|
|
15
15
|
import useTheme from '../styles/useTheme';
|
|
16
16
|
import shouldSpreadAdditionalProps from '../utils/shouldSpreadAdditionalProps';
|
|
17
17
|
import capitalize from '../utils/capitalize';
|
|
18
|
-
import
|
|
18
|
+
import BaseSliderValueLabel from './SliderValueLabel';
|
|
19
19
|
import sliderClasses, { getSliderUtilityClass } from './sliderClasses';
|
|
20
20
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
21
21
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
22
|
function Identity(x) {
|
|
23
23
|
return x;
|
|
24
24
|
}
|
|
25
|
-
const SliderRoot = styled('span', {
|
|
25
|
+
export const SliderRoot = styled('span', {
|
|
26
26
|
name: 'MuiSlider',
|
|
27
27
|
slot: 'Root',
|
|
28
28
|
overridesResolver: (props, styles) => {
|
|
@@ -84,18 +84,7 @@ const SliderRoot = styled('span', {
|
|
|
84
84
|
}
|
|
85
85
|
}
|
|
86
86
|
}));
|
|
87
|
-
|
|
88
|
-
// ----------------------------- Warning --------------------------------
|
|
89
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
90
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
91
|
-
// ----------------------------------------------------------------------
|
|
92
|
-
/**
|
|
93
|
-
* @ignore
|
|
94
|
-
*/
|
|
95
|
-
children: PropTypes.node
|
|
96
|
-
} : void 0;
|
|
97
|
-
export { SliderRoot };
|
|
98
|
-
const SliderRail = styled('span', {
|
|
87
|
+
export const SliderRail = styled('span', {
|
|
99
88
|
name: 'MuiSlider',
|
|
100
89
|
slot: 'Rail',
|
|
101
90
|
overridesResolver: (props, styles) => styles.rail
|
|
@@ -120,18 +109,7 @@ const SliderRail = styled('span', {
|
|
|
120
109
|
}, ownerState.track === 'inverted' && {
|
|
121
110
|
opacity: 1
|
|
122
111
|
}));
|
|
123
|
-
|
|
124
|
-
// ----------------------------- Warning --------------------------------
|
|
125
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
126
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
127
|
-
// ----------------------------------------------------------------------
|
|
128
|
-
/**
|
|
129
|
-
* @ignore
|
|
130
|
-
*/
|
|
131
|
-
children: PropTypes.node
|
|
132
|
-
} : void 0;
|
|
133
|
-
export { SliderRail };
|
|
134
|
-
const SliderTrack = styled('span', {
|
|
112
|
+
export const SliderTrack = styled('span', {
|
|
135
113
|
name: 'MuiSlider',
|
|
136
114
|
slot: 'Track',
|
|
137
115
|
overridesResolver: (props, styles) => styles.track
|
|
@@ -168,18 +146,7 @@ const SliderTrack = styled('span', {
|
|
|
168
146
|
borderColor: theme.vars ? theme.vars.palette.Slider[`${ownerState.color}Track`] : color
|
|
169
147
|
});
|
|
170
148
|
});
|
|
171
|
-
|
|
172
|
-
// ----------------------------- Warning --------------------------------
|
|
173
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
174
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
175
|
-
// ----------------------------------------------------------------------
|
|
176
|
-
/**
|
|
177
|
-
* @ignore
|
|
178
|
-
*/
|
|
179
|
-
children: PropTypes.node
|
|
180
|
-
} : void 0;
|
|
181
|
-
export { SliderTrack };
|
|
182
|
-
const SliderThumb = styled('span', {
|
|
149
|
+
export const SliderThumb = styled('span', {
|
|
183
150
|
name: 'MuiSlider',
|
|
184
151
|
slot: 'Thumb',
|
|
185
152
|
overridesResolver: (props, styles) => {
|
|
@@ -251,18 +218,7 @@ const SliderThumb = styled('span', {
|
|
|
251
218
|
}
|
|
252
219
|
}
|
|
253
220
|
}));
|
|
254
|
-
|
|
255
|
-
// ----------------------------- Warning --------------------------------
|
|
256
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
257
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
258
|
-
// ----------------------------------------------------------------------
|
|
259
|
-
/**
|
|
260
|
-
* @ignore
|
|
261
|
-
*/
|
|
262
|
-
children: PropTypes.node
|
|
263
|
-
} : void 0;
|
|
264
|
-
export { SliderThumb };
|
|
265
|
-
const StyledSliderValueLabel = styled(SliderValueLabel, {
|
|
221
|
+
export const SliderValueLabel = styled(BaseSliderValueLabel, {
|
|
266
222
|
name: 'MuiSlider',
|
|
267
223
|
slot: 'ValueLabel',
|
|
268
224
|
overridesResolver: (props, styles) => styles.valueLabel
|
|
@@ -320,18 +276,7 @@ const StyledSliderValueLabel = styled(SliderValueLabel, {
|
|
|
320
276
|
fontSize: theme.typography.pxToRem(12),
|
|
321
277
|
padding: '0.25rem 0.5rem'
|
|
322
278
|
}));
|
|
323
|
-
|
|
324
|
-
// ----------------------------- Warning --------------------------------
|
|
325
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
326
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
327
|
-
// ----------------------------------------------------------------------
|
|
328
|
-
/**
|
|
329
|
-
* @ignore
|
|
330
|
-
*/
|
|
331
|
-
children: PropTypes.node
|
|
332
|
-
} : void 0;
|
|
333
|
-
export { StyledSliderValueLabel as SliderValueLabel };
|
|
334
|
-
const SliderMark = styled('span', {
|
|
279
|
+
export const SliderMark = styled('span', {
|
|
335
280
|
name: 'MuiSlider',
|
|
336
281
|
slot: 'Mark',
|
|
337
282
|
shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markActive',
|
|
@@ -361,18 +306,7 @@ const SliderMark = styled('span', {
|
|
|
361
306
|
backgroundColor: (theme.vars || theme).palette.background.paper,
|
|
362
307
|
opacity: 0.8
|
|
363
308
|
}));
|
|
364
|
-
|
|
365
|
-
// ----------------------------- Warning --------------------------------
|
|
366
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
367
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
368
|
-
// ----------------------------------------------------------------------
|
|
369
|
-
/**
|
|
370
|
-
* @ignore
|
|
371
|
-
*/
|
|
372
|
-
children: PropTypes.node
|
|
373
|
-
} : void 0;
|
|
374
|
-
export { SliderMark };
|
|
375
|
-
const SliderMarkLabel = styled('span', {
|
|
309
|
+
export const SliderMarkLabel = styled('span', {
|
|
376
310
|
name: 'MuiSlider',
|
|
377
311
|
slot: 'MarkLabel',
|
|
378
312
|
shouldForwardProp: prop => slotShouldForwardProp(prop) && prop !== 'markLabelActive',
|
|
@@ -400,17 +334,6 @@ const SliderMarkLabel = styled('span', {
|
|
|
400
334
|
}, markLabelActive && {
|
|
401
335
|
color: (theme.vars || theme).palette.text.primary
|
|
402
336
|
}));
|
|
403
|
-
process.env.NODE_ENV !== "production" ? SliderMarkLabel.propTypes /* remove-proptypes */ = {
|
|
404
|
-
// ----------------------------- Warning --------------------------------
|
|
405
|
-
// | These PropTypes are generated from the TypeScript type definitions |
|
|
406
|
-
// | To update them edit the d.ts file and run "yarn proptypes" |
|
|
407
|
-
// ----------------------------------------------------------------------
|
|
408
|
-
/**
|
|
409
|
-
* @ignore
|
|
410
|
-
*/
|
|
411
|
-
children: PropTypes.node
|
|
412
|
-
} : void 0;
|
|
413
|
-
export { SliderMarkLabel };
|
|
414
337
|
const useUtilityClasses = ownerState => {
|
|
415
338
|
const {
|
|
416
339
|
disabled,
|
|
@@ -523,7 +446,7 @@ const Slider = /*#__PURE__*/React.forwardRef(function Slider(inputProps, ref) {
|
|
|
523
446
|
const RailSlot = slots?.rail ?? components.Rail ?? SliderRail;
|
|
524
447
|
const TrackSlot = slots?.track ?? components.Track ?? SliderTrack;
|
|
525
448
|
const ThumbSlot = slots?.thumb ?? components.Thumb ?? SliderThumb;
|
|
526
|
-
const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ??
|
|
449
|
+
const ValueLabelSlot = slots?.valueLabel ?? components.ValueLabel ?? SliderValueLabel;
|
|
527
450
|
const MarkSlot = slots?.mark ?? components.Mark ?? SliderMark;
|
|
528
451
|
const MarkLabelSlot = slots?.markLabel ?? components.MarkLabel ?? SliderMarkLabel;
|
|
529
452
|
const InputSlot = slots?.input ?? components.Input ?? 'input';
|
package/modern/Tabs/Tabs.js
CHANGED
|
@@ -190,10 +190,7 @@ const TabsIndicator = styled('span', {
|
|
|
190
190
|
width: 2,
|
|
191
191
|
right: 0
|
|
192
192
|
}));
|
|
193
|
-
const TabsScrollbarSize = styled(ScrollbarSize
|
|
194
|
-
name: 'MuiTabs',
|
|
195
|
-
slot: 'ScrollbarSize'
|
|
196
|
-
})({
|
|
193
|
+
const TabsScrollbarSize = styled(ScrollbarSize)({
|
|
197
194
|
overflowX: 'auto',
|
|
198
195
|
overflowY: 'hidden',
|
|
199
196
|
// Hide dimensionless scrollbar on macOS
|
|
@@ -801,7 +798,7 @@ process.env.NODE_ENV !== "production" ? Tabs.propTypes /* remove-proptypes */ =
|
|
|
801
798
|
*
|
|
802
799
|
* - `scrollable` will invoke scrolling properties and allow for horizontally
|
|
803
800
|
* scrolling (or swiping) of the tab bar.
|
|
804
|
-
*
|
|
801
|
+
* - `fullWidth` will make the tabs grow to use all the available space,
|
|
805
802
|
* which should be used for small views, like on mobile.
|
|
806
803
|
* - `standard` will render the default state.
|
|
807
804
|
* @default 'standard'
|
package/modern/index.js
CHANGED
package/node/Avatar/Avatar.js
CHANGED
|
@@ -166,8 +166,8 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
|
|
|
166
166
|
if (hasImgNotFailing) {
|
|
167
167
|
children = /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarImg, (0, _extends2.default)({
|
|
168
168
|
alt: alt,
|
|
169
|
-
src: src,
|
|
170
169
|
srcSet: srcSet,
|
|
170
|
+
src: src,
|
|
171
171
|
sizes: sizes,
|
|
172
172
|
ownerState: ownerState,
|
|
173
173
|
className: classes.img
|
package/node/Button/Button.js
CHANGED
|
@@ -20,6 +20,7 @@ var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
|
|
|
20
20
|
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
|
21
21
|
var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
|
|
22
22
|
var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupContext"));
|
|
23
|
+
var _ButtonGroupButtonContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupButtonContext"));
|
|
23
24
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
24
25
|
const _excluded = ["children", "color", "component", "className", "disabled", "disableElevation", "disableFocusRipple", "endIcon", "focusVisibleClassName", "fullWidth", "size", "startIcon", "type", "variant"];
|
|
25
26
|
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); }
|
|
@@ -228,6 +229,7 @@ const ButtonEndIcon = (0, _styled.default)('span', {
|
|
|
228
229
|
const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
229
230
|
// props priority: `inProps` > `contextProps` > `themeDefaultProps`
|
|
230
231
|
const contextProps = React.useContext(_ButtonGroupContext.default);
|
|
232
|
+
const buttonGroupButtonContextPositionClassName = React.useContext(_ButtonGroupButtonContext.default);
|
|
231
233
|
const resolvedProps = (0, _utils.internal_resolveProps)(contextProps, inProps);
|
|
232
234
|
const props = (0, _useThemeProps.default)({
|
|
233
235
|
props: resolvedProps,
|
|
@@ -272,9 +274,10 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
|
|
|
272
274
|
ownerState: ownerState,
|
|
273
275
|
children: endIconProp
|
|
274
276
|
});
|
|
277
|
+
const positionClassName = buttonGroupButtonContextPositionClassName || '';
|
|
275
278
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, (0, _extends2.default)({
|
|
276
279
|
ownerState: ownerState,
|
|
277
|
-
className: (0, _clsx.default)(contextProps.className, classes.root, className),
|
|
280
|
+
className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
|
|
278
281
|
component: component,
|
|
279
282
|
disabled: disabled,
|
|
280
283
|
focusRipple: !disableFocusRipple,
|