@@ -132,7 +132,7 @@ describe('<Modal />', () => {
132
132
}
133
133
134
134
render (
135
- < Modal open BackdropComponent = { TestBackdrop } >
135
+ < Modal open slots = { { backdrop : TestBackdrop } } >
136
136
< div />
137
137
</ Modal > ,
138
138
) ;
@@ -165,7 +165,15 @@ describe('<Modal />', () => {
165
165
return < div data-testid = "backdrop" data-timeout = { transitionDuration } /> ;
166
166
}
167
167
render (
168
- < Modal open BackdropComponent = { TestBackdrop } BackdropProps = { { transitionDuration : 200 } } >
168
+ < Modal
169
+ open
170
+ slots = { { backdrop : TestBackdrop } }
171
+ slotProps = { {
172
+ backdrop : {
173
+ transitionDuration : 200 ,
174
+ } ,
175
+ } }
176
+ >
169
177
< div />
170
178
</ Modal > ,
171
179
) ;
@@ -176,7 +184,15 @@ describe('<Modal />', () => {
176
184
it ( 'should attach a handler to the backdrop that fires onClose' , ( ) => {
177
185
const onClose = spy ( ) ;
178
186
const { getByTestId } = render (
179
- < Modal onClose = { onClose } open BackdropProps = { { 'data-testid' : 'backdrop' } } >
187
+ < Modal
188
+ onClose = { onClose }
189
+ open
190
+ slotProps = { {
191
+ backdrop : {
192
+ 'data-testid' : 'backdrop' ,
193
+ } ,
194
+ } }
195
+ >
180
196
< div />
181
197
</ Modal > ,
182
198
) ;
@@ -220,7 +236,15 @@ describe('<Modal />', () => {
220
236
it ( 'should call through to the user specified onBackdropClick callback' , ( ) => {
221
237
const onBackdropClick = spy ( ) ;
222
238
const { getByTestId } = render (
223
- < Modal onBackdropClick = { onBackdropClick } open BackdropProps = { { 'data-testid' : 'backdrop' } } >
239
+ < Modal
240
+ onClose = { ( event , reason ) => {
241
+ if ( reason === 'backdropClick' ) {
242
+ onBackdropClick ( ) ;
243
+ }
244
+ } }
245
+ open
246
+ slotProps = { { backdrop : { 'data-testid' : 'backdrop' } } }
247
+ >
224
248
< div />
225
249
</ Modal > ,
226
250
) ;
@@ -241,7 +265,15 @@ describe('<Modal />', () => {
241
265
}
242
266
const onBackdropClick = spy ( ) ;
243
267
const { getByTestId } = render (
244
- < Modal onBackdropClick = { onBackdropClick } open BackdropComponent = { CustomBackdrop } >
268
+ < Modal
269
+ onClose = { ( event , reason ) => {
270
+ if ( reason === 'backdropClick' ) {
271
+ onBackdropClick ( ) ;
272
+ }
273
+ } }
274
+ open
275
+ slots = { { backdrop : CustomBackdrop } }
276
+ >
245
277
< div />
246
278
</ Modal > ,
247
279
) ;
0 commit comments