Skip to content

Commit 25a8a11

Browse files
hbjORbjhbjORbj
committed
Apply useSlot, add slots prop, rename componentsProps to slotProps for all other Joy components
1 parent b2a9ab5 commit 25a8a11

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+935
-696
lines changed

‎packages/mui-base/src/TabPanelUnstyled/TabPanelUnstyled.types.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,6 @@ export interface TabPanelUnstyledOwnProps {
2323
slots?: {
2424
root?: React.ElementType;
2525
};
26-
2726
/**
2827
* The props used for each slot inside the TabPanel.
2928
* @default {}

‎packages/mui-joy/src/AspectRatio/AspectRatio.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ describe('<AspectRatio />', () => {
7676

7777
it('able to pass the props to content slot', () => {
7878
const { getByTestId } = render(
79-
<AspectRatio componentsProps={{ content: { 'data-testid': 'content' } }} />,
79+
<AspectRatio slotProps={{ content: { 'data-testid': 'content' } }} />,
8080
);
8181
expect(getByTestId('content')).toBeVisible();
8282
});

‎packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2451,15 +2451,15 @@ describe('Joy <Autocomplete />', () => {
24512451
expect(handleSubmit.callCount).to.equal(1);
24522452
});
24532453

2454-
describe('prop: componentsProps', () => {
2454+
describe('prop: slotProps', () => {
24552455
it('should apply the props on the AutocompleteClearIndicator component', () => {
24562456
render(
24572457
<Autocomplete
24582458
open
24592459
options={['one', 'two']}
24602460
value="one"
24612461
renderInput={(params) => <Input {...params} />}
2462-
componentsProps={{
2462+
slotProps={{
24632463
clearIndicator: {
24642464
// @ts-ignore
24652465
'data-testid': 'clearIndicator',
@@ -2479,7 +2479,7 @@ describe('Joy <Autocomplete />', () => {
24792479
open
24802480
options={['one', 'two']}
24812481
renderInput={(params) => <Input {...params} />}
2482-
componentsProps={{
2482+
slotProps={{
24832483
popupIndicator: {
24842484
// @ts-ignore
24852485
'data-testid': 'popupIndicator',
@@ -2499,7 +2499,7 @@ describe('Joy <Autocomplete />', () => {
24992499
<Autocomplete
25002500
options={['one', 'two']}
25012501
renderInput={(params) => <Input {...params} />}
2502-
componentsProps={{
2502+
slotProps={{
25032503
listbox: {
25042504
// @ts-ignore
25052505
'data-testid': 'popperRoot',

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

Lines changed: 27 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -602,33 +602,6 @@ Autocomplete.propTypes /* remove-proptypes */ = {
602602
* @default 'Close'
603603
*/
604604
closeText: PropTypes.string,
605-
/**
606-
* Replace the default slots.
607-
*/
608-
components: PropTypes.shape({
609-
clearIndicator: PropTypes.elementType,
610-
limitTag: PropTypes.elementType,
611-
listbox: PropTypes.elementType,
612-
loading: PropTypes.elementType,
613-
noOptions: PropTypes.elementType,
614-
option: PropTypes.elementType,
615-
popupIndicator: PropTypes.elementType,
616-
root: PropTypes.elementType,
617-
}),
618-
/**
619-
* The props used for each slot inside.
620-
* @default {}
621-
*/
622-
componentsProps: PropTypes.shape({
623-
clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
624-
limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
625-
listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
626-
loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
627-
noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
628-
option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
629-
popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
630-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
631-
}),
632605
/**
633606
* The default value. Use when the component is not controlled.
634607
* @default props.multiple ? [] : null
@@ -874,6 +847,33 @@ Autocomplete.propTypes /* remove-proptypes */ = {
874847
PropTypes.oneOf(['sm', 'md', 'lg']),
875848
PropTypes.string,
876849
]),
850+
/**
851+
* The props used for each slot inside.
852+
* @default {}
853+
*/
854+
slotProps: PropTypes.shape({
855+
clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
856+
limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
857+
listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
858+
loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
859+
noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
860+
option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
861+
popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
862+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
863+
}),
864+
/**
865+
* Replace the default slots.
866+
*/
867+
slots: PropTypes.shape({
868+
clearIndicator: PropTypes.elementType,
869+
limitTag: PropTypes.elementType,
870+
listbox: PropTypes.elementType,
871+
loading: PropTypes.elementType,
872+
noOptions: PropTypes.elementType,
873+
option: PropTypes.elementType,
874+
popupIndicator: PropTypes.elementType,
875+
root: PropTypes.elementType,
876+
}),
877877
/**
878878
* The system prop that allows defining system overrides as well as additional CSS styles.
879879
*/

‎packages/mui-joy/src/Autocomplete/AutocompleteProps.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -144,7 +144,7 @@ interface AutocompleteOwnProps<
144144
/**
145145
* Replace the default slots.
146146
*/
147-
components?: {
147+
slots?: {
148148
root?: React.ElementType;
149149
clearIndicator?: React.ElementType;
150150
popupIndicator?: React.ElementType;
@@ -158,7 +158,7 @@ interface AutocompleteOwnProps<
158158
* The props used for each slot inside.
159159
* @default {}
160160
*/
161-
componentsProps?: ComponentsProps;
161+
slotProps?: ComponentsProps;
162162
/**
163163
* The default value. Use when the component is not controlled.
164164
* @default props.multiple ? [] : null

‎packages/mui-joy/src/Avatar/Avatar.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@ describe('<Avatar />', () => {
9797
it('should be able to add more props to the image', () => {
9898
const onError = spy();
9999
const { container } = render(
100-
<Avatar src="/fake.png" componentsProps={{ img: { onError } }} />,
100+
<Avatar src="/fake.png" slotProps={{ img: { onError } }} />,
101101
);
102102
const img = container.querySelector('img');
103103
fireEvent.error(img);
@@ -117,7 +117,7 @@ describe('<Avatar />', () => {
117117
it('should be able to add more props to the image', () => {
118118
const onError = spy();
119119
const { container } = render(
120-
<Avatar src="/fake.png" componentsProps={{ img: { onError } }} />,
120+
<Avatar src="/fake.png" slotProps={{ img: { onError } }} />,
121121
);
122122
const img = container.querySelector('img');
123123
fireEvent.error(img);

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,9 +177,7 @@ 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 slotProps.img === 'function'
181-
? slotProps.img(ownerState)
182-
: slotProps.img),
180+
...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
183181
src,
184182
srcSet,
185183
});

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

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -368,17 +368,6 @@ Checkbox.propTypes /* remove-proptypes */ = {
368368
* Either a string to use a HTML element or a component.
369369
*/
370370
component: PropTypes.elementType,
371-
/**
372-
* The props used for each slot inside the component.
373-
* @default {}
374-
*/
375-
slotProps: PropTypes.shape({
376-
action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
377-
checkbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
378-
input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
379-
label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
380-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
381-
}),
382371
/**
383372
* The default checked state. Use when the component is not controlled.
384373
*/
@@ -459,6 +448,27 @@ Checkbox.propTypes /* remove-proptypes */ = {
459448
PropTypes.oneOf(['sm', 'md', 'lg']),
460449
PropTypes.string,
461450
]),
451+
/**
452+
* The props used for each slot inside the component.
453+
* @default {}
454+
*/
455+
slotProps: PropTypes.shape({
456+
action: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
457+
checkbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
458+
input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
459+
label: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
460+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
461+
}),
462+
/**
463+
* Replace the default slots.
464+
*/
465+
slots: PropTypes.shape({
466+
action: PropTypes.elementType,
467+
checkbox: PropTypes.elementType,
468+
input: PropTypes.elementType,
469+
label: PropTypes.elementType,
470+
root: PropTypes.elementType,
471+
}),
462472
/**
463473
* The system prop that allows defining system overrides as well as additional CSS styles.
464474
*/

‎packages/mui-joy/src/Chip/Chip.test.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -110,15 +110,15 @@ describe('<Chip />', () => {
110110
expect(handleClick.callCount).to.equal(1);
111111
});
112112

113-
it('renders action element when `componentsProps.action` is provided', () => {
114-
const { getByRole } = render(<Chip componentsProps={{ action: {} }} />);
113+
it('renders action element when `slotProps.action` is provided', () => {
114+
const { getByRole } = render(<Chip slotProps={{ action: {} }} />);
115115

116116
expect(getByRole('button')).toBeVisible();
117117
});
118118

119119
it('renders custom action element', () => {
120120
const { getByRole } = render(
121-
<Chip componentsProps={{ action: { component: 'a', href: '#' } }} />,
121+
<Chip slotProps={{ action: { component: 'a', href: '#' } }} />,
122122
);
123123

124124
expect(getByRole('link')).to.have.attr('href', '#');

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

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -226,9 +226,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
226226
};
227227

228228
const resolvedActionProps =
229-
typeof slotProps.action === 'function'
230-
? slotProps.action(ownerState)
231-
: slotProps.action;
229+
typeof slotProps.action === 'function' ? slotProps.action(ownerState) : slotProps.action;
232230
const actionRef = React.useRef<HTMLElement | null>(null);
233231
const { focusVisible, getRootProps } = useButton({
234232
...resolvedActionProps,
@@ -279,7 +277,7 @@ const Chip = React.forwardRef(function Chip(inProps, ref) {
279277
ownerState,
280278
});
281279

282-
const [SlotEndDecorator, endDecoratorProps] = useSlot('startDecorator', {
280+
const [SlotEndDecorator, endDecoratorProps] = useSlot('endDecorator', {
283281
className: classes.startDecorator,
284282
elementType: ChipEndDecorator,
285283
externalForwardedProps: { ...other, slotProps },

0 commit comments

Comments
 (0)