Skip to content

Commit 31ff494

Browse files
hbjORbjhbjORbj
committed
Apply useSlot to more components & Rename components to slots, componentsProps to slotProps
1 parent bd625af commit 31ff494

File tree

25 files changed

+510
-349
lines changed

25 files changed

+510
-349
lines changed

‎packages/mui-joy/src/Alert/Alert.tsx‎

Lines changed: 48 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import PropTypes from 'prop-types';
66
import * as React from 'react';
77
import styled from '../styles/styled';
88
import useThemeProps from '../styles/useThemeProps';
9+
import useSlot from '../utils/useSlot';
910
import { getAlertUtilityClass } from './alertClasses';
1011
import { AlertProps, AlertTypeMap } from './AlertProps';
1112

@@ -121,29 +122,42 @@ const Alert = React.forwardRef(function Alert(inProps, ref) {
121122
};
122123

123124
const classes = useUtilityClasses(ownerState);
125+
const externalForwardedProps = { ...other, component };
126+
127+
const [SlotRoot, rootProps] = useSlot('root', {
128+
ref,
129+
className: clsx(classes.root, className),
130+
elementType: AlertRoot,
131+
externalForwardedProps,
132+
ownerState,
133+
additionalProps: {
134+
role,
135+
},
136+
});
137+
138+
const [SlotStartDecorator, startDecoratorProps] = useSlot('startDecorator', {
139+
className: classes.startDecorator,
140+
elementType: AlertStartDecorator,
141+
externalForwardedProps,
142+
ownerState,
143+
});
144+
145+
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
146+
className: classes.startDecorator,
147+
elementType: AlertEndDecorator,
148+
externalForwardedProps,
149+
ownerState,
150+
});
124151

125152
return (
126-
<AlertRoot
127-
as={component}
128-
role={role}
129-
ownerState={ownerState}
130-
className={clsx(classes.root, className)}
131-
ref={ref}
132-
{...other}
133-
>
153+
<SlotRoot {...rootProps}>
134154
{startDecorator && (
135-
<AlertStartDecorator className={classes.startDecorator} ownerState={ownerState}>
136-
{startDecorator}
137-
</AlertStartDecorator>
155+
<SlotStartDecorator {...startDecoratorProps}>{startDecorator}</SlotStartDecorator>
138156
)}
139157

140158
{children}
141-
{endDecorator && (
142-
<AlertEndDecorator className={classes.endDecorator} ownerState={ownerState}>
143-
{endDecorator}
144-
</AlertEndDecorator>
145-
)}
146-
</AlertRoot>
159+
{endDecorator && <SlotEndDecorator {...endDecoratorProps}>{endDecorator}</SlotEndDecorator>}
160+
</SlotRoot>
147161
);
148162
}) as OverridableComponent<AlertTypeMap>;
149163

@@ -190,6 +204,23 @@ Alert.propTypes /* remove-proptypes */ = {
190204
PropTypes.oneOf(['sm', 'md', 'lg']),
191205
PropTypes.string,
192206
]),
207+
/**
208+
* The props used for each slot inside.
209+
* @default {}
210+
*/
211+
slotProps: PropTypes.shape({
212+
endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
213+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
214+
startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
215+
}),
216+
/**
217+
* Replace the default slots.
218+
*/
219+
slots: PropTypes.shape({
220+
endDecorator: PropTypes.elementType,
221+
root: PropTypes.elementType,
222+
startDecorator: PropTypes.elementType,
223+
}),
193224
/**
194225
* Element placed before the children.
195226
*/

‎packages/mui-joy/src/Alert/AlertProps.ts‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
import { OverridableStringUnion, OverrideProps } from '@mui/types';
21
import * as React from 'react';
2+
import { OverridableStringUnion, OverrideProps } from '@mui/types';
3+
import { SlotComponentProps } from '@mui/base/utils';
34
import { ColorPaletteProp, SxProps, VariantProp } from '../styles/types';
45

56
export type AlertSlot = 'root' | 'startDecorator' | 'endDecorator';
@@ -8,13 +9,44 @@ export interface AlertPropsVariantOverrides {}
89
export interface AlertPropsColorOverrides {}
910
export interface AlertPropsSizeOverrides {}
1011

12+
interface ComponentsProps {
13+
root?: SlotComponentProps<
14+
'div',
15+
{ component?: React.ElementType; sx?: SxProps },
16+
AlertOwnerState
17+
>;
18+
startDecorator?: SlotComponentProps<
19+
'span',
20+
{ component?: React.ElementType; sx?: SxProps },
21+
AlertOwnerState
22+
>;
23+
endDecorator?: SlotComponentProps<
24+
'span',
25+
{ component?: React.ElementType; sx?: SxProps },
26+
AlertOwnerState
27+
>;
28+
}
29+
1130
export interface AlertTypeMap<P = {}, D extends React.ElementType = 'div'> {
1231
props: P & {
1332
/**
1433
* The color of the component. It supports those theme colors that make sense for this component.
1534
* @default 'primary'
1635
*/
1736
color?: OverridableStringUnion<ColorPaletteProp, AlertPropsColorOverrides>;
37+
/**
38+
* Replace the default slots.
39+
*/
40+
slots?: {
41+
root?: React.ElementType;
42+
startDecorator?: React.ElementType;
43+
endDecorator?: React.ElementType;
44+
};
45+
/**
46+
* The props used for each slot inside.
47+
* @default {}
48+
*/
49+
slotProps?: ComponentsProps;
1850
/**
1951
* Element placed after the children.
2052
*/

‎packages/mui-joy/src/AspectRatio/AspectRatio.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import * as React from 'react';
22
import PropTypes from 'prop-types';
33
import { unstable_composeClasses as composeClasses } from '@mui/base';
4-
import { useSlotProps } from '@mui/base/utils';
54
import { OverridableComponent } from '@mui/types';
65
import { unstable_capitalize as capitalize } from '@mui/utils';
7-
import { useThemeProps } from '../styles';
6+
import useThemeProps from '../styles/useThemeProps';
7+
import useSlot from '../utils/useSlot';
88
import styled from '../styles/styled';
99
import { getAspectRatioUtilityClass } from './aspectRatioClasses';
1010
import { AspectRatioProps, AspectRatioOwnerState, AspectRatioTypeMap } from './AspectRatioProps';
@@ -91,7 +91,6 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
9191
const {
9292
component = 'div',
9393
children,
94-
componentsProps = {},
9594
ratio = '16 / 9',
9695
minHeight,
9796
maxHeight,
@@ -114,35 +113,33 @@ const AspectRatio = React.forwardRef(function AspectRatio(inProps, ref) {
114113

115114
const classes = useUtilityClasses(ownerState);
116115

117-
const rootProps = useSlotProps({
116+
const externalForwardedProps = { ...other, component };
117+
118+
const [SlotRoot, rootProps] = useSlot('root', {
119+
ref,
120+
className: classes.root,
118121
elementType: AspectRatioRoot,
122+
externalForwardedProps,
119123
ownerState,
120-
externalSlotProps: componentsProps.root,
121-
externalForwardedProps: other,
122-
additionalProps: {
123-
ref,
124-
as: component,
125-
},
126-
className: classes.root,
127124
});
128125

129-
const contentProps = useSlotProps({
126+
const [SlotContent, contentProps] = useSlot('content', {
127+
className: classes.content,
130128
elementType: AspectRatioContent,
129+
externalForwardedProps,
131130
ownerState,
132-
externalSlotProps: componentsProps.content,
133-
className: classes.content,
134131
});
135132

136133
return (
137-
<AspectRatioRoot {...rootProps}>
138-
<AspectRatioContent {...contentProps}>
134+
<SlotRoot {...rootProps}>
135+
<SlotContent {...contentProps}>
139136
{React.Children.map(children, (child, index) =>
140137
index === 0 && React.isValidElement(child)
141138
? React.cloneElement(child, { 'data-first-child': '' } as Record<string, string>)
142139
: child,
143140
)}
144-
</AspectRatioContent>
145-
</AspectRatioRoot>
141+
</SlotContent>
142+
</SlotRoot>
146143
);
147144
}) as OverridableComponent<AspectRatioTypeMap>;
148145

@@ -166,14 +163,6 @@ AspectRatio.propTypes /* remove-proptypes */ = {
166163
* Either a string to use a HTML element or a component.
167164
*/
168165
component: PropTypes.elementType,
169-
/**
170-
* The props used for each slot inside the component.
171-
* @default {}
172-
*/
173-
componentsProps: PropTypes.shape({
174-
content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
175-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
176-
}),
177166
/**
178167
* The maximum calculated height of the element (not the CSS height).
179168
*/
@@ -204,6 +193,21 @@ AspectRatio.propTypes /* remove-proptypes */ = {
204193
* @default '16 / 9'
205194
*/
206195
ratio: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
196+
/**
197+
* The props used for each slot inside the component.
198+
* @default {}
199+
*/
200+
slotProps: PropTypes.shape({
201+
content: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
202+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
203+
}),
204+
/**
205+
* Replace the default slots.
206+
*/
207+
slots: PropTypes.shape({
208+
content: PropTypes.elementType,
209+
root: PropTypes.elementType,
210+
}),
207211
/**
208212
* The system prop that allows defining system overrides as well as additional CSS styles.
209213
*/

‎packages/mui-joy/src/AspectRatio/AspectRatioProps.ts‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,16 @@ export interface AspectRatioPropsColorOverrides {}
99
export interface AspectRatioPropsVariantOverrides {}
1010

1111
interface ComponentsProps {
12-
root?: SlotComponentProps<'div', { sx?: SxProps }, AspectRatioOwnerState>;
13-
content?: SlotComponentProps<'div', { sx?: SxProps }, AspectRatioOwnerState>;
12+
root?: SlotComponentProps<
13+
'div',
14+
{ component?: React.ElementType; sx?: SxProps },
15+
AspectRatioOwnerState
16+
>;
17+
content?: SlotComponentProps<
18+
'div',
19+
{ component?: React.ElementType; sx?: SxProps },
20+
AspectRatioOwnerState
21+
>;
1422
}
1523

1624
export interface AspectRatioTypeMap<P = {}, D extends React.ElementType = 'div'> {
@@ -25,11 +33,18 @@ export interface AspectRatioTypeMap<P = {}, D extends React.ElementType = 'div'>
2533
* This can be an element, or just a string.
2634
*/
2735
children?: React.ReactNode;
36+
/**
37+
* Replace the default slots.
38+
*/
39+
slots?: {
40+
root?: React.ElementType;
41+
content?: React.ElementType;
42+
};
2843
/**
2944
* The props used for each slot inside the component.
3045
* @default {}
3146
*/
32-
componentsProps?: ComponentsProps;
47+
slotProps?: ComponentsProps;
3348
/**
3449
* The minimum calculated height of the element (not the CSS height).
3550
*/

‎packages/mui-joy/src/Avatar/Avatar.tsx‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
149149
alt,
150150
color: colorProp = 'neutral',
151151
component = 'div',
152-
componentsProps = {},
152+
slotProps = {},
153153
className,
154154
size: sizeProp = 'md',
155155
variant: variantProp = 'soft',
@@ -177,9 +177,9 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
177177
// Use a hook instead of onError on the img element to support server-side rendering.
178178
const loaded = useLoaded({
179179
...imgProps,
180-
...(typeof componentsProps.img === 'function'
181-
? componentsProps.img(ownerState)
182-
: componentsProps.img),
180+
...(typeof slotProps.img === 'function'
181+
? slotProps.img(ownerState)
182+
: slotProps.img),
183183
src,
184184
srcSet,
185185
});
@@ -188,7 +188,7 @@ const Avatar = React.forwardRef(function Avatar(inProps, ref) {
188188
const hasImgNotFailing = hasImg && loaded !== 'error';
189189

190190
const classes = useUtilityClasses(ownerState);
191-
const externalForwardedProps = { ...other, component, componentsProps };
191+
const externalForwardedProps = { ...other, component, slotProps };
192192

193193
const [SlotRoot, rootProps] = useSlot('root', {
194194
ref,
@@ -263,23 +263,6 @@ Avatar.propTypes /* remove-proptypes */ = {
263263
* Either a string to use a HTML element or a component.
264264
*/
265265
component: PropTypes.elementType,
266-
/**
267-
* Replace the default slots.
268-
*/
269-
components: PropTypes.shape({
270-
fallback: PropTypes.elementType,
271-
img: PropTypes.elementType,
272-
root: PropTypes.elementType,
273-
}),
274-
/**
275-
* The props used for each slot inside the component.
276-
* @default {}
277-
*/
278-
componentsProps: PropTypes.shape({
279-
fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
280-
img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
281-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
282-
}),
283266
/**
284267
* [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
285268
* It can be used to listen for the loading error event.
@@ -294,6 +277,23 @@ Avatar.propTypes /* remove-proptypes */ = {
294277
PropTypes.oneOf(['lg', 'md', 'sm']),
295278
PropTypes.string,
296279
]),
280+
/**
281+
* The props used for each slot inside the component.
282+
* @default {}
283+
*/
284+
slotProps: PropTypes.shape({
285+
fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
286+
img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
287+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
288+
}),
289+
/**
290+
* Replace the default slots.
291+
*/
292+
slots: PropTypes.shape({
293+
fallback: PropTypes.elementType,
294+
img: PropTypes.elementType,
295+
root: PropTypes.elementType,
296+
}),
297297
/**
298298
* The `src` attribute for the `img` element.
299299
*/

‎packages/mui-joy/src/Avatar/AvatarProps.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
4242
/**
4343
* Replace the default slots.
4444
*/
45-
components?: {
45+
slots?: {
4646
root?: React.ElementType;
4747
img?: React.ElementType;
4848
fallback?: React.ElementType;
@@ -51,7 +51,7 @@ export interface AvatarTypeMap<P = {}, D extends React.ElementType = 'div'> {
5151
* The props used for each slot inside the component.
5252
* @default {}
5353
*/
54-
componentsProps?: ComponentsProps;
54+
slotProps?: ComponentsProps;
5555
/**
5656
* The color of the component. It supports those theme colors that make sense for this component.
5757
* @default 'neutral'

0 commit comments

Comments
 (0)