Skip to content

Commit 0d1bebe

Browse files
hbjORbjhbjORbj
committed
Apply useSlot, add slots prop, rename componentsProps to slotProps for all other Joy components
1 parent 272e27e commit 0d1bebe

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

+994
-704
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
@@ -2060,14 +2060,14 @@ describe('Joy <Autocomplete />', () => {
20602060
expect(handleSubmit.callCount).to.equal(1);
20612061
});
20622062

2063-
describe('prop: componentsProps', () => {
2063+
describe('prop: slotProps', () => {
20642064
it('should apply the props on the AutocompleteClearIndicator component', () => {
20652065
render(
20662066
<Autocomplete
20672067
open
20682068
options={['one', 'two']}
20692069
value="one"
2070-
componentsProps={{
2070+
slotProps={{
20712071
clearIndicator: {
20722072
// @ts-ignore
20732073
'data-testid': 'clearIndicator',
@@ -2086,7 +2086,7 @@ describe('Joy <Autocomplete />', () => {
20862086
<Autocomplete
20872087
open
20882088
options={['one', 'two']}
2089-
componentsProps={{
2089+
slotProps={{
20902090
popupIndicator: {
20912091
// @ts-ignore
20922092
'data-testid': 'popupIndicator',
@@ -2105,7 +2105,7 @@ describe('Joy <Autocomplete />', () => {
21052105
render(
21062106
<Autocomplete
21072107
options={['one', 'two']}
2108-
componentsProps={{
2108+
slotProps={{
21092109
listbox: {
21102110
// @ts-ignore
21112111
'data-testid': 'popperRoot',

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

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -749,41 +749,6 @@ Autocomplete.propTypes /* remove-proptypes */ = {
749749
* @default 'neutral'
750750
*/
751751
color: PropTypes.oneOf(['danger', 'info', 'neutral', 'primary', 'success', 'warning']),
752-
/**
753-
* Replace the default slots.
754-
*/
755-
components: PropTypes.shape({
756-
clearIndicator: PropTypes.elementType,
757-
endDecorator: PropTypes.elementType,
758-
input: PropTypes.elementType,
759-
limitTag: PropTypes.elementType,
760-
listbox: PropTypes.elementType,
761-
loading: PropTypes.elementType,
762-
noOptions: PropTypes.elementType,
763-
option: PropTypes.elementType,
764-
popupIndicator: PropTypes.elementType,
765-
root: PropTypes.elementType,
766-
startDecorator: PropTypes.elementType,
767-
wrapper: PropTypes.elementType,
768-
}),
769-
/**
770-
* The props used for each slot inside.
771-
* @default {}
772-
*/
773-
componentsProps: PropTypes.shape({
774-
clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
775-
endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
776-
input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
777-
limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
778-
listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
779-
loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
780-
noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
781-
option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
782-
popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
783-
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
784-
startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
785-
wrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
786-
}),
787752
/**
788753
* The default value. Use when the component is not controlled.
789754
* @default props.multiple ? [] : null
@@ -1035,6 +1000,41 @@ Autocomplete.propTypes /* remove-proptypes */ = {
10351000
PropTypes.oneOf(['sm', 'md', 'lg']),
10361001
PropTypes.string,
10371002
]),
1003+
/**
1004+
* The props used for each slot inside.
1005+
* @default {}
1006+
*/
1007+
slotProps: PropTypes.shape({
1008+
clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1009+
endDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1010+
input: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1011+
limitTag: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1012+
listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1013+
loading: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1014+
noOptions: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1015+
option: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1016+
popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1017+
root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1018+
startDecorator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1019+
wrapper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
1020+
}),
1021+
/**
1022+
* Replace the default slots.
1023+
*/
1024+
slots: PropTypes.shape({
1025+
clearIndicator: PropTypes.elementType,
1026+
endDecorator: PropTypes.elementType,
1027+
input: PropTypes.elementType,
1028+
limitTag: PropTypes.elementType,
1029+
listbox: PropTypes.elementType,
1030+
loading: PropTypes.elementType,
1031+
noOptions: PropTypes.elementType,
1032+
option: PropTypes.elementType,
1033+
popupIndicator: PropTypes.elementType,
1034+
root: PropTypes.elementType,
1035+
startDecorator: PropTypes.elementType,
1036+
wrapper: PropTypes.elementType,
1037+
}),
10381038
/**
10391039
* Leading adornment for this input.
10401040
*/

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ interface AutocompleteOwnProps<
176176
/**
177177
* Replace the default slots.
178178
*/
179-
components?: {
179+
slots?: {
180180
root?: React.ElementType;
181181
wrapper?: React.ElementType;
182182
input?: React.ElementType;
@@ -194,7 +194,7 @@ interface AutocompleteOwnProps<
194194
* The props used for each slot inside.
195195
* @default {}
196196
*/
197-
componentsProps?: ComponentsProps;
197+
slotProps?: ComponentsProps;
198198
/**
199199
* The default value. Use when the component is not controlled.
200200
* @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)