@@ -26,8 +26,7 @@ import {
26
26
MDCDismissibleDrawerFoundation ,
27
27
MDCModalDrawerFoundation ,
28
28
util ,
29
- // @ts -ignore no .d.ts file
30
- } from '@material/drawer/dist/mdc.drawer' ;
29
+ } from '@material/drawer' ;
31
30
// @ts -ignore no .d.ts file
32
31
import { MDCListFoundation } from '@material/list/dist/mdc.list' ;
33
32
import DrawerHeader from './Header' ;
@@ -62,7 +61,7 @@ const isRefObject = function(ref: DrawerProps['innerRef']): ref is React.RefObje
62
61
63
62
class Drawer extends React . Component < DrawerProps , DrawerState > {
64
63
previousFocus : HTMLElement | null = null ;
65
- foundation : MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation ;
64
+ foundation ? : MDCDismissibleDrawerFoundation | MDCModalDrawerFoundation ;
66
65
focusTrap ?: FocusTrap ;
67
66
drawerElement : React . RefObject < HTMLDivElement > = React . createRef ( ) ;
68
67
@@ -113,7 +112,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
113
112
if ( changedToModal || changedToDismissible ) {
114
113
this . initFoundation ( ) ;
115
114
}
116
- if ( open !== prevProps . open ) {
115
+ if ( open !== prevProps . open && this . foundation ) {
117
116
open ? this . foundation . open ( ) : this . foundation . close ( ) ;
118
117
}
119
118
}
@@ -124,7 +123,7 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
124
123
}
125
124
126
125
private initializeFocusTrap = ( ) => {
127
- this . focusTrap = util . createFocusTrapInstance ( this . drawerElement . current ) ;
126
+ this . focusTrap = util . createFocusTrapInstance ( this . drawerElement . current ! ) ;
128
127
} ;
129
128
130
129
get classes ( ) {
@@ -191,13 +190,13 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
191
190
handleKeyDown = ( evt : React . KeyboardEvent < HTMLElement > ) => {
192
191
this . props . onKeyDown ! ( evt ) ;
193
192
if ( ! this . foundation ) return ;
194
- this . foundation . handleKeydown ( evt ) ;
193
+ this . foundation . handleKeydown ( evt . nativeEvent ) ;
195
194
} ;
196
195
197
196
handleTransitionEnd = ( evt : React . TransitionEvent < HTMLElement > ) => {
198
197
this . props . onTransitionEnd ! ( evt ) ;
199
198
if ( ! this . foundation ) return ;
200
- this . foundation . handleTransitionEnd ( evt ) ;
199
+ this . foundation . handleTransitionEnd ( evt . nativeEvent ) ;
201
200
} ;
202
201
203
202
attachRef = ( node : HTMLElement ) => {
@@ -230,9 +229,9 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
230
229
children,
231
230
className,
232
231
innerRef,
232
+ modal,
233
233
/* eslint-enable no-unused-vars */
234
234
tag : Tag ,
235
- modal,
236
235
...otherProps
237
236
} = this . props ;
238
237
@@ -253,11 +252,12 @@ class Drawer extends React.Component<DrawerProps, DrawerState> {
253
252
</ React . Fragment >
254
253
) ;
255
254
}
255
+
256
256
renderScrim ( ) {
257
257
return (
258
258
< div
259
259
className = 'mdc-drawer-scrim'
260
- onClick = { ( ) => this . foundation . handleScrimClick ( ) }
260
+ onClick = { ( ) => ( this . foundation as MDCModalDrawerFoundation ) . handleScrimClick ( ) }
261
261
/>
262
262
) ;
263
263
}
0 commit comments