@mui/material 6.4.5 → 6.4.6
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/Accordion.d.ts +14 -12
- package/Alert/Alert.d.ts +3 -15
- package/Backdrop/Backdrop.d.ts +14 -12
- package/CHANGELOG.md +38 -0
- package/CardHeader/CardHeader.d.ts +4 -20
- package/Checkbox/Checkbox.d.ts +45 -9
- package/Checkbox/Checkbox.js +51 -21
- package/Dialog/Dialog.d.ts +4 -4
- package/Drawer/Drawer.d.ts +92 -1
- package/Drawer/Drawer.js +108 -36
- package/InputBase/inputBaseClasses.d.ts +15 -6
- package/Menu/Menu.d.ts +88 -1
- package/Menu/Menu.js +58 -19
- package/Modal/Modal.js +9 -10
- package/Popover/Popover.d.ts +60 -6
- package/Popover/Popover.js +78 -51
- package/Radio/Radio.d.ts +45 -1
- package/Radio/Radio.js +59 -16
- package/Select/SelectInput.js +8 -8
- package/Snackbar/Snackbar.d.ts +79 -2
- package/Snackbar/Snackbar.js +110 -32
- package/SpeedDial/SpeedDial.d.ts +8 -6
- package/SpeedDialAction/SpeedDialAction.d.ts +82 -1
- package/SpeedDialAction/SpeedDialAction.js +108 -30
- package/StepContent/StepContent.d.ts +2 -2
- package/SwipeableDrawer/SwipeableDrawer.d.ts +28 -2
- package/SwipeableDrawer/SwipeableDrawer.js +60 -13
- package/Switch/Switch.js +2 -0
- package/Tabs/Tabs.d.ts +129 -29
- package/Tabs/Tabs.js +120 -52
- package/Tabs/tabsClasses.d.ts +4 -0
- package/Tabs/tabsClasses.js +1 -1
- package/Tooltip/Tooltip.d.ts +20 -12
- package/index.js +1 -1
- package/internal/SwitchBase.d.ts +35 -1
- package/internal/SwitchBase.js +84 -30
- package/modern/Checkbox/Checkbox.js +51 -21
- package/modern/Drawer/Drawer.js +108 -36
- package/modern/Menu/Menu.js +58 -19
- package/modern/Modal/Modal.js +9 -10
- package/modern/Popover/Popover.js +78 -51
- package/modern/Radio/Radio.js +59 -16
- package/modern/Select/SelectInput.js +8 -8
- package/modern/Snackbar/Snackbar.js +110 -32
- package/modern/SpeedDialAction/SpeedDialAction.js +108 -30
- package/modern/SwipeableDrawer/SwipeableDrawer.js +60 -13
- package/modern/Switch/Switch.js +2 -0
- package/modern/Tabs/Tabs.js +120 -52
- package/modern/Tabs/tabsClasses.js +1 -1
- package/modern/index.js +1 -1
- package/modern/internal/SwitchBase.js +84 -30
- package/modern/styles/createThemeNoVars.js +7 -2
- package/modern/version/index.js +2 -2
- package/node/Checkbox/Checkbox.js +51 -21
- package/node/Drawer/Drawer.js +108 -36
- package/node/Menu/Menu.js +58 -19
- package/node/Modal/Modal.js +9 -10
- package/node/Popover/Popover.js +78 -51
- package/node/Radio/Radio.js +59 -16
- package/node/Select/SelectInput.js +8 -8
- package/node/Snackbar/Snackbar.js +110 -32
- package/node/SpeedDialAction/SpeedDialAction.js +108 -30
- package/node/SwipeableDrawer/SwipeableDrawer.js +60 -13
- package/node/Switch/Switch.js +2 -0
- package/node/Tabs/Tabs.js +120 -52
- package/node/Tabs/tabsClasses.js +1 -1
- package/node/index.js +1 -1
- package/node/internal/SwitchBase.js +84 -30
- package/node/styles/createThemeNoVars.js +7 -2
- package/node/version/index.js +2 -2
- package/package.json +6 -6
- package/styles/createThemeNoVars.js +7 -2
- package/version/index.js +2 -2
package/node/Radio/Radio.js
CHANGED
|
@@ -24,6 +24,7 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
|
|
|
24
24
|
var _zeroStyled = require("../zero-styled");
|
|
25
25
|
var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
|
|
26
26
|
var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
|
|
27
|
+
var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
|
|
27
28
|
var _DefaultPropsProvider = require("../DefaultPropsProvider");
|
|
28
29
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
29
30
|
const useUtilityClasses = ownerState => {
|
|
@@ -132,6 +133,8 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
|
|
|
132
133
|
className,
|
|
133
134
|
disabled: disabledProp,
|
|
134
135
|
disableRipple = false,
|
|
136
|
+
slots = {},
|
|
137
|
+
slotProps = {},
|
|
135
138
|
...other
|
|
136
139
|
} = props;
|
|
137
140
|
const muiFormControl = (0, _useFormControl.default)();
|
|
@@ -162,23 +165,45 @@ const Radio = /*#__PURE__*/React.forwardRef(function Radio(inProps, ref) {
|
|
|
162
165
|
name = radioGroup.name;
|
|
163
166
|
}
|
|
164
167
|
}
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
fontSize: defaultIcon.props.fontSize ?? size
|
|
169
|
-
}),
|
|
170
|
-
checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
|
|
171
|
-
fontSize: defaultCheckedIcon.props.fontSize ?? size
|
|
172
|
-
}),
|
|
173
|
-
disabled: disabled,
|
|
174
|
-
ownerState: ownerState,
|
|
175
|
-
classes: classes,
|
|
176
|
-
name: name,
|
|
177
|
-
checked: checked,
|
|
178
|
-
onChange: onChange,
|
|
179
|
-
ref: ref,
|
|
168
|
+
const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
|
|
169
|
+
ref,
|
|
170
|
+
elementType: RadioRoot,
|
|
180
171
|
className: (0, _clsx.default)(classes.root, className),
|
|
181
|
-
|
|
172
|
+
shouldForwardComponentProp: true,
|
|
173
|
+
externalForwardedProps: {
|
|
174
|
+
slots,
|
|
175
|
+
slotProps,
|
|
176
|
+
...other
|
|
177
|
+
},
|
|
178
|
+
getSlotProps: handlers => ({
|
|
179
|
+
...handlers,
|
|
180
|
+
onChange: (event, ...args) => {
|
|
181
|
+
handlers.onChange?.(event, ...args);
|
|
182
|
+
onChange(event, ...args);
|
|
183
|
+
}
|
|
184
|
+
}),
|
|
185
|
+
ownerState,
|
|
186
|
+
additionalProps: {
|
|
187
|
+
type: 'radio',
|
|
188
|
+
icon: /*#__PURE__*/React.cloneElement(icon, {
|
|
189
|
+
fontSize: icon.props.fontSize ?? size
|
|
190
|
+
}),
|
|
191
|
+
checkedIcon: /*#__PURE__*/React.cloneElement(checkedIcon, {
|
|
192
|
+
fontSize: checkedIcon.props.fontSize ?? size
|
|
193
|
+
}),
|
|
194
|
+
disabled,
|
|
195
|
+
name,
|
|
196
|
+
checked,
|
|
197
|
+
slots,
|
|
198
|
+
slotProps: {
|
|
199
|
+
// Do not forward `slotProps.root` again because it's already handled by the `RootSlot` in this file.
|
|
200
|
+
input: typeof slotProps.input === 'function' ? slotProps.input(ownerState) : slotProps.input
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
|
|
205
|
+
...rootSlotProps,
|
|
206
|
+
classes: classes
|
|
182
207
|
});
|
|
183
208
|
});
|
|
184
209
|
process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ = {
|
|
@@ -230,10 +255,12 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
|
|
|
230
255
|
id: _propTypes.default.string,
|
|
231
256
|
/**
|
|
232
257
|
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.
|
|
258
|
+
* @deprecated Use `slotProps.input` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
233
259
|
*/
|
|
234
260
|
inputProps: _propTypes.default.object,
|
|
235
261
|
/**
|
|
236
262
|
* Pass a ref to the `input` element.
|
|
263
|
+
* @deprecated Use `slotProps.input.ref` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
237
264
|
*/
|
|
238
265
|
inputRef: _refType.default,
|
|
239
266
|
/**
|
|
@@ -259,6 +286,22 @@ process.env.NODE_ENV !== "production" ? Radio.propTypes /* remove-proptypes */ =
|
|
|
259
286
|
* @default 'medium'
|
|
260
287
|
*/
|
|
261
288
|
size: _propTypes.default /* @typescript-to-proptypes-ignore */.oneOfType([_propTypes.default.oneOf(['medium', 'small']), _propTypes.default.string]),
|
|
289
|
+
/**
|
|
290
|
+
* The props used for each slot inside.
|
|
291
|
+
* @default {}
|
|
292
|
+
*/
|
|
293
|
+
slotProps: _propTypes.default.shape({
|
|
294
|
+
input: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
295
|
+
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
296
|
+
}),
|
|
297
|
+
/**
|
|
298
|
+
* The components used for each slot inside.
|
|
299
|
+
* @default {}
|
|
300
|
+
*/
|
|
301
|
+
slots: _propTypes.default.shape({
|
|
302
|
+
input: _propTypes.default.elementType,
|
|
303
|
+
root: _propTypes.default.elementType
|
|
304
|
+
}),
|
|
262
305
|
/**
|
|
263
306
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
264
307
|
*/
|
|
@@ -507,16 +507,16 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
|
|
|
507
507
|
horizontal: 'center'
|
|
508
508
|
},
|
|
509
509
|
...MenuProps,
|
|
510
|
-
MenuListProps: {
|
|
511
|
-
'aria-labelledby': labelId,
|
|
512
|
-
role: 'listbox',
|
|
513
|
-
'aria-multiselectable': multiple ? 'true' : undefined,
|
|
514
|
-
disableListWrap: true,
|
|
515
|
-
id: listboxId,
|
|
516
|
-
...MenuProps.MenuListProps
|
|
517
|
-
},
|
|
518
510
|
slotProps: {
|
|
519
511
|
...MenuProps.slotProps,
|
|
512
|
+
list: {
|
|
513
|
+
'aria-labelledby': labelId,
|
|
514
|
+
role: 'listbox',
|
|
515
|
+
'aria-multiselectable': multiple ? 'true' : undefined,
|
|
516
|
+
disableListWrap: true,
|
|
517
|
+
id: listboxId,
|
|
518
|
+
...MenuProps.MenuListProps
|
|
519
|
+
},
|
|
520
520
|
paper: {
|
|
521
521
|
...paperProps,
|
|
522
522
|
style: {
|
|
@@ -10,7 +10,6 @@ exports.default = void 0;
|
|
|
10
10
|
var React = _interopRequireWildcard(require("react"));
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
13
|
-
var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
|
|
14
13
|
var _useSnackbar = _interopRequireDefault(require("./useSnackbar"));
|
|
15
14
|
var _ClickAwayListener = _interopRequireDefault(require("../ClickAwayListener"));
|
|
16
15
|
var _zeroStyled = require("../zero-styled");
|
|
@@ -20,6 +19,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
|
|
20
19
|
var _Grow = _interopRequireDefault(require("../Grow"));
|
|
21
20
|
var _SnackbarContent = _interopRequireDefault(require("../SnackbarContent"));
|
|
22
21
|
var _snackbarClasses = require("./snackbarClasses");
|
|
22
|
+
var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
|
|
23
23
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
24
24
|
const useUtilityClasses = ownerState => {
|
|
25
25
|
const {
|
|
@@ -127,8 +127,8 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
127
127
|
autoHideDuration = null,
|
|
128
128
|
children,
|
|
129
129
|
className,
|
|
130
|
-
ClickAwayListenerProps,
|
|
131
|
-
ContentProps,
|
|
130
|
+
ClickAwayListenerProps: ClickAwayListenerPropsProp,
|
|
131
|
+
ContentProps: ContentPropsProp,
|
|
132
132
|
disableWindowBlurListener = false,
|
|
133
133
|
message,
|
|
134
134
|
onBlur,
|
|
@@ -138,12 +138,14 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
138
138
|
onMouseLeave,
|
|
139
139
|
open,
|
|
140
140
|
resumeHideDuration,
|
|
141
|
-
|
|
141
|
+
slots = {},
|
|
142
|
+
slotProps = {},
|
|
143
|
+
TransitionComponent: TransitionComponentProp,
|
|
142
144
|
transitionDuration = defaultTransitionDuration,
|
|
143
145
|
TransitionProps: {
|
|
144
146
|
onEnter,
|
|
145
147
|
onExited,
|
|
146
|
-
...
|
|
148
|
+
...TransitionPropsProp
|
|
147
149
|
} = {},
|
|
148
150
|
...other
|
|
149
151
|
} = props;
|
|
@@ -155,7 +157,7 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
155
157
|
},
|
|
156
158
|
autoHideDuration,
|
|
157
159
|
disableWindowBlurListener,
|
|
158
|
-
TransitionComponent,
|
|
160
|
+
TransitionComponent: TransitionComponentProp,
|
|
159
161
|
transitionDuration
|
|
160
162
|
};
|
|
161
163
|
const classes = useUtilityClasses(ownerState);
|
|
@@ -166,16 +168,6 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
166
168
|
...ownerState
|
|
167
169
|
});
|
|
168
170
|
const [exited, setExited] = React.useState(true);
|
|
169
|
-
const rootProps = (0, _useSlotProps.default)({
|
|
170
|
-
elementType: SnackbarRoot,
|
|
171
|
-
getSlotProps: getRootProps,
|
|
172
|
-
externalForwardedProps: other,
|
|
173
|
-
ownerState,
|
|
174
|
-
additionalProps: {
|
|
175
|
-
ref
|
|
176
|
-
},
|
|
177
|
-
className: [classes.root, className]
|
|
178
|
-
});
|
|
179
171
|
const handleExited = node => {
|
|
180
172
|
setExited(true);
|
|
181
173
|
if (onExited) {
|
|
@@ -188,28 +180,84 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
|
|
|
188
180
|
onEnter(node, isAppearing);
|
|
189
181
|
}
|
|
190
182
|
};
|
|
183
|
+
const externalForwardedProps = {
|
|
184
|
+
slots: {
|
|
185
|
+
transition: TransitionComponentProp,
|
|
186
|
+
...slots
|
|
187
|
+
},
|
|
188
|
+
slotProps: {
|
|
189
|
+
content: ContentPropsProp,
|
|
190
|
+
clickAwayListener: ClickAwayListenerPropsProp,
|
|
191
|
+
transition: TransitionPropsProp,
|
|
192
|
+
...slotProps
|
|
193
|
+
}
|
|
194
|
+
};
|
|
195
|
+
const [Root, rootProps] = (0, _useSlot.default)('root', {
|
|
196
|
+
ref,
|
|
197
|
+
className: [classes.root, className],
|
|
198
|
+
elementType: SnackbarRoot,
|
|
199
|
+
getSlotProps: getRootProps,
|
|
200
|
+
externalForwardedProps: {
|
|
201
|
+
...externalForwardedProps,
|
|
202
|
+
...other
|
|
203
|
+
},
|
|
204
|
+
ownerState
|
|
205
|
+
});
|
|
206
|
+
const [ClickAwaySlot, clickAwayListenerProps] = (0, _useSlot.default)('clickAwayListener', {
|
|
207
|
+
elementType: _ClickAwayListener.default,
|
|
208
|
+
externalForwardedProps,
|
|
209
|
+
getSlotProps: handlers => ({
|
|
210
|
+
onClickAway: (...params) => {
|
|
211
|
+
handlers.onClickAway?.(...params);
|
|
212
|
+
onClickAway(...params);
|
|
213
|
+
}
|
|
214
|
+
}),
|
|
215
|
+
ownerState
|
|
216
|
+
});
|
|
217
|
+
const [ContentSlot, contentSlotProps] = (0, _useSlot.default)('content', {
|
|
218
|
+
elementType: _SnackbarContent.default,
|
|
219
|
+
shouldForwardComponentProp: true,
|
|
220
|
+
externalForwardedProps,
|
|
221
|
+
additionalProps: {
|
|
222
|
+
message,
|
|
223
|
+
action
|
|
224
|
+
},
|
|
225
|
+
ownerState
|
|
226
|
+
});
|
|
227
|
+
const [TransitionSlot, transitionProps] = (0, _useSlot.default)('transition', {
|
|
228
|
+
elementType: _Grow.default,
|
|
229
|
+
externalForwardedProps,
|
|
230
|
+
getSlotProps: handlers => ({
|
|
231
|
+
onEnter: (...params) => {
|
|
232
|
+
handlers.onEnter?.(...params);
|
|
233
|
+
handleEnter(...params);
|
|
234
|
+
},
|
|
235
|
+
onExited: (...params) => {
|
|
236
|
+
handlers.onExited?.(...params);
|
|
237
|
+
handleExited(...params);
|
|
238
|
+
}
|
|
239
|
+
}),
|
|
240
|
+
additionalProps: {
|
|
241
|
+
appear: true,
|
|
242
|
+
in: open,
|
|
243
|
+
timeout: transitionDuration,
|
|
244
|
+
direction: vertical === 'top' ? 'down' : 'up'
|
|
245
|
+
},
|
|
246
|
+
ownerState
|
|
247
|
+
});
|
|
191
248
|
|
|
192
249
|
// So we only render active snackbars.
|
|
193
250
|
if (!open && exited) {
|
|
194
251
|
return null;
|
|
195
252
|
}
|
|
196
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SnackbarRoot, {
|
|
253
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ClickAwaySlot, {
|
|
254
|
+
...clickAwayListenerProps,
|
|
255
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
|
|
200
256
|
...rootProps,
|
|
201
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
direction: vertical === 'top' ? 'down' : 'up',
|
|
206
|
-
onEnter: handleEnter,
|
|
207
|
-
onExited: handleExited,
|
|
208
|
-
...TransitionProps,
|
|
209
|
-
children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(_SnackbarContent.default, {
|
|
210
|
-
message: message,
|
|
211
|
-
action: action,
|
|
212
|
-
...ContentProps
|
|
257
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
|
|
258
|
+
...transitionProps,
|
|
259
|
+
children: children || /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentSlot, {
|
|
260
|
+
...contentSlotProps
|
|
213
261
|
})
|
|
214
262
|
})
|
|
215
263
|
})
|
|
@@ -256,10 +304,12 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
256
304
|
className: _propTypes.default.string,
|
|
257
305
|
/**
|
|
258
306
|
* Props applied to the `ClickAwayListener` element.
|
|
307
|
+
* @deprecated Use `slotProps.clickAwayListener` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
259
308
|
*/
|
|
260
309
|
ClickAwayListenerProps: _propTypes.default.object,
|
|
261
310
|
/**
|
|
262
311
|
* Props applied to the [`SnackbarContent`](https://mui.com/material-ui/api/snackbar-content/) element.
|
|
312
|
+
* @deprecated Use `slotProps.content` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
263
313
|
*/
|
|
264
314
|
ContentProps: _propTypes.default.object,
|
|
265
315
|
/**
|
|
@@ -316,6 +366,32 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
316
366
|
* we default to `autoHideDuration / 2` ms.
|
|
317
367
|
*/
|
|
318
368
|
resumeHideDuration: _propTypes.default.number,
|
|
369
|
+
/**
|
|
370
|
+
* The props used for each slot inside.
|
|
371
|
+
* @default {}
|
|
372
|
+
*/
|
|
373
|
+
slotProps: _propTypes.default.shape({
|
|
374
|
+
clickAwayListener: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
|
|
375
|
+
children: _propTypes.default.element.isRequired,
|
|
376
|
+
disableReactTree: _propTypes.default.bool,
|
|
377
|
+
mouseEvent: _propTypes.default.oneOf(['onClick', 'onMouseDown', 'onMouseUp', 'onPointerDown', 'onPointerUp', false]),
|
|
378
|
+
onClickAway: _propTypes.default.func,
|
|
379
|
+
touchEvent: _propTypes.default.oneOf(['onTouchEnd', 'onTouchStart', false])
|
|
380
|
+
})]),
|
|
381
|
+
content: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
382
|
+
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
383
|
+
transition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
384
|
+
}),
|
|
385
|
+
/**
|
|
386
|
+
* The components used for each slot inside.
|
|
387
|
+
* @default {}
|
|
388
|
+
*/
|
|
389
|
+
slots: _propTypes.default.shape({
|
|
390
|
+
clickAwayListener: _propTypes.default.elementType,
|
|
391
|
+
content: _propTypes.default.elementType,
|
|
392
|
+
root: _propTypes.default.elementType,
|
|
393
|
+
transition: _propTypes.default.elementType
|
|
394
|
+
}),
|
|
319
395
|
/**
|
|
320
396
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
321
397
|
*/
|
|
@@ -323,6 +399,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
323
399
|
/**
|
|
324
400
|
* The component used for the transition.
|
|
325
401
|
* [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
|
|
402
|
+
* @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
326
403
|
* @default Grow
|
|
327
404
|
*/
|
|
328
405
|
TransitionComponent: _propTypes.default.elementType,
|
|
@@ -342,6 +419,7 @@ process.env.NODE_ENV !== "production" ? Snackbar.propTypes /* remove-proptypes *
|
|
|
342
419
|
/**
|
|
343
420
|
* Props applied to the transition element.
|
|
344
421
|
* By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
|
|
422
|
+
* @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
345
423
|
* @default {}
|
|
346
424
|
*/
|
|
347
425
|
TransitionProps: _propTypes.default.object
|
|
@@ -20,6 +20,8 @@ var _Fab = _interopRequireDefault(require("../Fab"));
|
|
|
20
20
|
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
|
|
21
21
|
var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
|
|
22
22
|
var _speedDialActionClasses = _interopRequireWildcard(require("./speedDialActionClasses"));
|
|
23
|
+
var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
|
|
24
|
+
var _utils = require("../utils");
|
|
23
25
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
24
26
|
const useUtilityClasses = ownerState => {
|
|
25
27
|
const {
|
|
@@ -154,6 +156,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
|
|
|
154
156
|
tooltipOpen: tooltipOpenProp = false,
|
|
155
157
|
tooltipPlacement = 'left',
|
|
156
158
|
tooltipTitle,
|
|
159
|
+
slots = {},
|
|
160
|
+
slotProps = {},
|
|
157
161
|
...other
|
|
158
162
|
} = props;
|
|
159
163
|
const ownerState = {
|
|
@@ -161,7 +165,20 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
|
|
|
161
165
|
tooltipPlacement
|
|
162
166
|
};
|
|
163
167
|
const classes = useUtilityClasses(ownerState);
|
|
164
|
-
const
|
|
168
|
+
const externalForwardedProps = {
|
|
169
|
+
slots,
|
|
170
|
+
slotProps: {
|
|
171
|
+
fab: FabProps,
|
|
172
|
+
...slotProps,
|
|
173
|
+
tooltip: (0, _utils.mergeSlotProps)(typeof slotProps.tooltip === 'function' ? slotProps.tooltip(ownerState) : slotProps.tooltip, {
|
|
174
|
+
title: tooltipTitle,
|
|
175
|
+
open: tooltipOpenProp,
|
|
176
|
+
placement: tooltipPlacement,
|
|
177
|
+
classes: TooltipClasses
|
|
178
|
+
})
|
|
179
|
+
}
|
|
180
|
+
};
|
|
181
|
+
const [tooltipOpen, setTooltipOpen] = React.useState(externalForwardedProps.slotProps.tooltip?.open);
|
|
165
182
|
const handleTooltipClose = () => {
|
|
166
183
|
setTooltipOpen(false);
|
|
167
184
|
};
|
|
@@ -171,32 +188,71 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
|
|
|
171
188
|
const transitionStyle = {
|
|
172
189
|
transitionDelay: `${delay}ms`
|
|
173
190
|
};
|
|
174
|
-
const
|
|
175
|
-
|
|
191
|
+
const [FabSlot, fabSlotProps] = (0, _useSlot.default)('fab', {
|
|
192
|
+
elementType: SpeedDialActionFab,
|
|
193
|
+
externalForwardedProps,
|
|
194
|
+
ownerState,
|
|
195
|
+
shouldForwardComponentProp: true,
|
|
176
196
|
className: (0, _clsx.default)(classes.fab, className),
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
197
|
+
additionalProps: {
|
|
198
|
+
style: transitionStyle,
|
|
199
|
+
tabIndex: -1,
|
|
200
|
+
role: 'menuitem',
|
|
201
|
+
size: 'small'
|
|
202
|
+
}
|
|
203
|
+
});
|
|
204
|
+
const [TooltipSlot, tooltipSlotProps] = (0, _useSlot.default)('tooltip', {
|
|
205
|
+
elementType: _Tooltip.default,
|
|
206
|
+
externalForwardedProps,
|
|
207
|
+
shouldForwardComponentProp: true,
|
|
208
|
+
ref,
|
|
209
|
+
additionalProps: {
|
|
210
|
+
id
|
|
184
211
|
},
|
|
212
|
+
ownerState,
|
|
213
|
+
getSlotProps: handlers => ({
|
|
214
|
+
...handlers,
|
|
215
|
+
onClose: event => {
|
|
216
|
+
handlers.onClose?.(event);
|
|
217
|
+
handleTooltipClose();
|
|
218
|
+
},
|
|
219
|
+
onOpen: event => {
|
|
220
|
+
handlers.onOpen?.(event);
|
|
221
|
+
handleTooltipOpen();
|
|
222
|
+
}
|
|
223
|
+
})
|
|
224
|
+
});
|
|
225
|
+
const [StaticTooltipSlot, staticTooltipSlotProps] = (0, _useSlot.default)('staticTooltip', {
|
|
226
|
+
elementType: SpeedDialActionStaticTooltip,
|
|
227
|
+
externalForwardedProps,
|
|
228
|
+
ownerState,
|
|
229
|
+
ref,
|
|
230
|
+
className: classes.staticTooltip,
|
|
231
|
+
additionalProps: {
|
|
232
|
+
id
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
const [StaticTooltipLabelSlot, staticTooltipLabelSlotProps] = (0, _useSlot.default)('staticTooltipLabel', {
|
|
236
|
+
elementType: SpeedDialActionStaticTooltipLabel,
|
|
237
|
+
externalForwardedProps,
|
|
238
|
+
ownerState,
|
|
239
|
+
className: classes.staticTooltipLabel,
|
|
240
|
+
additionalProps: {
|
|
241
|
+
style: transitionStyle,
|
|
242
|
+
id: `${id}-label`
|
|
243
|
+
}
|
|
244
|
+
});
|
|
245
|
+
const fab = /*#__PURE__*/(0, _jsxRuntime.jsx)(FabSlot, {
|
|
246
|
+
...fabSlotProps,
|
|
185
247
|
children: icon
|
|
186
248
|
});
|
|
187
|
-
if (
|
|
188
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(
|
|
189
|
-
|
|
190
|
-
ref: ref,
|
|
191
|
-
className: classes.staticTooltip,
|
|
192
|
-
ownerState: ownerState,
|
|
249
|
+
if (tooltipSlotProps.open) {
|
|
250
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(StaticTooltipSlot, {
|
|
251
|
+
...staticTooltipSlotProps,
|
|
193
252
|
...other,
|
|
194
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
className: classes.staticTooltipLabel,
|
|
198
|
-
ownerState: ownerState,
|
|
199
|
-
children: tooltipTitle
|
|
253
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StaticTooltipLabelSlot, {
|
|
254
|
+
...staticTooltipLabelSlotProps,
|
|
255
|
+
children: tooltipSlotProps.title
|
|
200
256
|
}), /*#__PURE__*/React.cloneElement(fab, {
|
|
201
257
|
'aria-labelledby': `${id}-label`
|
|
202
258
|
})]
|
|
@@ -205,15 +261,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
|
|
|
205
261
|
if (!open && tooltipOpen) {
|
|
206
262
|
setTooltipOpen(false);
|
|
207
263
|
}
|
|
208
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
title: tooltipTitle,
|
|
212
|
-
placement: tooltipPlacement,
|
|
213
|
-
onClose: handleTooltipClose,
|
|
214
|
-
onOpen: handleTooltipOpen,
|
|
264
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TooltipSlot, {
|
|
265
|
+
...tooltipSlotProps,
|
|
266
|
+
title: tooltipSlotProps.title,
|
|
215
267
|
open: open && tooltipOpen,
|
|
216
|
-
|
|
268
|
+
placement: tooltipSlotProps.placement,
|
|
269
|
+
classes: tooltipSlotProps.classes,
|
|
217
270
|
...other,
|
|
218
271
|
children: fab
|
|
219
272
|
});
|
|
@@ -239,6 +292,7 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
|
|
|
239
292
|
/**
|
|
240
293
|
* Props applied to the [`Fab`](https://mui.com/material-ui/api/fab/) component.
|
|
241
294
|
* @default {}
|
|
295
|
+
* @deprecated Use `slotProps.fab` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
242
296
|
*/
|
|
243
297
|
FabProps: _propTypes.default.object,
|
|
244
298
|
/**
|
|
@@ -254,26 +308,50 @@ process.env.NODE_ENV !== "production" ? SpeedDialAction.propTypes /* remove-prop
|
|
|
254
308
|
* If `true`, the component is shown.
|
|
255
309
|
*/
|
|
256
310
|
open: _propTypes.default.bool,
|
|
311
|
+
/**
|
|
312
|
+
* The props used for each slot inside.
|
|
313
|
+
* @default {}
|
|
314
|
+
*/
|
|
315
|
+
slotProps: _propTypes.default.shape({
|
|
316
|
+
fab: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
317
|
+
staticTooltip: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
318
|
+
staticTooltipLabel: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
|
|
319
|
+
tooltip: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
|
|
320
|
+
}),
|
|
321
|
+
/**
|
|
322
|
+
* The components used for each slot inside.
|
|
323
|
+
* @default {}
|
|
324
|
+
*/
|
|
325
|
+
slots: _propTypes.default.shape({
|
|
326
|
+
fab: _propTypes.default.elementType,
|
|
327
|
+
staticTooltip: _propTypes.default.elementType,
|
|
328
|
+
staticTooltipLabel: _propTypes.default.elementType,
|
|
329
|
+
tooltip: _propTypes.default.elementType
|
|
330
|
+
}),
|
|
257
331
|
/**
|
|
258
332
|
* The system prop that allows defining system overrides as well as additional CSS styles.
|
|
259
333
|
*/
|
|
260
334
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
261
335
|
/**
|
|
262
336
|
* `classes` prop applied to the [`Tooltip`](https://mui.com/material-ui/api/tooltip/) element.
|
|
337
|
+
* @deprecated Use `slotProps.tooltip.classes` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
263
338
|
*/
|
|
264
339
|
TooltipClasses: _propTypes.default.object,
|
|
265
340
|
/**
|
|
266
341
|
* Make the tooltip always visible when the SpeedDial is open.
|
|
267
342
|
* @default false
|
|
343
|
+
* @deprecated Use `slotProps.tooltip.open` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
268
344
|
*/
|
|
269
345
|
tooltipOpen: _propTypes.default.bool,
|
|
270
346
|
/**
|
|
271
347
|
* Placement of the tooltip.
|
|
272
348
|
* @default 'left'
|
|
349
|
+
* @deprecated Use `slotProps.tooltip.placement` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
273
350
|
*/
|
|
274
351
|
tooltipPlacement: _propTypes.default.oneOf(['bottom-end', 'bottom-start', 'bottom', 'left-end', 'left-start', 'left', 'right-end', 'right-start', 'right', 'top-end', 'top-start', 'top']),
|
|
275
352
|
/**
|
|
276
353
|
* Label to display in the tooltip.
|
|
354
|
+
* @deprecated Use `slotProps.tooltip.title` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
|
|
277
355
|
*/
|
|
278
356
|
tooltipTitle: _propTypes.default.node
|
|
279
357
|
} : void 0;
|