Skip to content
This repository was archived by the owner on Jan 14, 2025. It is now read-only.

Commit bcda111

Browse files
guguMatt Goo
authored and
Matt Goo
committed
fix(dialog): mdc-web v1 upgrade (#779)
1 parent 8ff8695 commit bcda111

File tree

5 files changed

+142
-131
lines changed

5 files changed

+142
-131
lines changed

package-lock.json

Lines changed: 89 additions & 87 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -66,7 +66,7 @@
6666
"@material/card": "^0.41.0",
6767
"@material/checkbox": "^1.0.0",
6868
"@material/chips": "^1.0.0",
69-
"@material/dialog": "^0.43.0",
69+
"@material/dialog": "^1.1.0",
7070
"@material/dom": "^0.41.0",
7171
"@material/drawer": "^1.0.1",
7272
"@material/fab": "^0.41.0",

packages/dialog/index.tsx

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -23,10 +23,11 @@
2323
import * as React from 'react';
2424
import classnames from 'classnames';
2525

26-
// @ts-ignore no .d.ts file
27-
import {MDCDialogFoundation, MDCDialogAdapter, util} from '@material/dialog/dist/mdc.dialog';
28-
// @ts-ignore no .d.ts file
29-
import {ponyfill} from '@material/dom/dist/mdc.dom';
26+
import {MDCDialogFoundation} from '@material/dialog/foundation';
27+
import {MDCDialogAdapter} from '@material/dialog/adapter';
28+
import {createFocusTrapInstance, isScrollable, areTopsMisaligned} from '@material/dialog/util';
29+
import {strings} from '@material/dialog/constants';
30+
import {ponyfill} from '@material/dom';
3031
/* eslint-disable no-unused-vars */
3132
import DialogContent, {DialogContentProps} from './DialogContent';
3233
import DialogFooter, {DialogFooterProps} from './DialogFooter';
@@ -89,7 +90,7 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
8990
DialogState
9091
> {
9192
focusTrap?: FocusTrap;
92-
foundation: MDCDialogFoundation;
93+
foundation!: MDCDialogFoundation;
9394
dialogElement: React.RefObject<HTMLElement> = React.createRef();
9495
labelledBy?: string;
9596
describedBy?: string;
@@ -103,6 +104,8 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
103104
id: 'mdc-dialog',
104105
open: false,
105106
role: 'alertdialog',
107+
escapeKeyAction: strings.CLOSE_ACTION,
108+
scrimClickAction: strings.CLOSE_ACTION,
106109
};
107110

108111
state: DialogState = {classList: new Set()};
@@ -116,7 +119,7 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
116119
this.open();
117120
}
118121
if (!autoStackButtons) {
119-
this.foundation.setAutoStackButtons(autoStackButtons);
122+
this.foundation.setAutoStackButtons(autoStackButtons!);
120123
}
121124

122125
if (typeof escapeKeyAction === 'string') { // set even if empty string
@@ -136,15 +139,15 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
136139
const {open, autoStackButtons, escapeKeyAction, scrimClickAction} = this.props;
137140

138141
if (prevProps.autoStackButtons !== autoStackButtons) {
139-
this.foundation.setAutoStackButtons(autoStackButtons);
142+
this.foundation.setAutoStackButtons(autoStackButtons!);
140143
}
141144

142145
if (prevProps.escapeKeyAction !== escapeKeyAction) {
143-
this.foundation.setEscapeKeyAction(escapeKeyAction);
146+
this.foundation.setEscapeKeyAction(escapeKeyAction!);
144147
}
145148

146149
if (prevProps.scrimClickAction !== scrimClickAction) {
147-
this.foundation.setScrimClickAction(scrimClickAction);
150+
this.foundation.setScrimClickAction(scrimClickAction!);
148151
}
149152

150153
if (prevProps.open !== open) {
@@ -181,13 +184,12 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
181184
};
182185

183186
private initializeFocusTrap = (): void => {
184-
this.focusTrap = this.props.children && util.createFocusTrapInstance(this.dialogElement.current);
187+
this.focusTrap = this.props.children && createFocusTrapInstance(this.dialogElement.current!);
185188
};
186189

187-
get adapter(): Partial<MDCDialogAdapter> {
190+
get adapter(): MDCDialogAdapter {
188191
const strings = MDCDialogFoundation.strings;
189192
const {closest, matches} = ponyfill;
190-
const {isScrollable, areTopsMisaligned} = util;
191193
return {
192194
addClass: (className: string) => {
193195
const {classList} = this.state;
@@ -258,8 +260,8 @@ class Dialog<T extends HTMLElement = HTMLElement> extends React.Component<
258260
};
259261

260262
handleInteraction = (e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void =>
261-
this.foundation.handleInteraction(e);
262-
handleDocumentKeyDown = (e: Event): void =>
263+
this.foundation.handleInteraction(e.nativeEvent);
264+
handleDocumentKeyDown = (e: KeyboardEvent): void =>
263265
this.foundation.handleDocumentKeydown(e);
264266
handleLayout = (): void => this.foundation.layout();
265267

packages/dialog/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@
1515
"url": "https://github.com/material-components/material-components-web-react.git"
1616
},
1717
"dependencies": {
18-
"@material/dialog": "0.43.0",
19-
"@material/dom": "^0.41.0",
18+
"@material/dialog": "1.1.0",
19+
"@material/dom": "^1.0.0",
2020
"@material/react-button": "^0.11.0",
2121
"classnames": "^2.2.6",
2222
"focus-trap": "^4.0.2",

0 commit comments

Comments
 (0)