Replace material in Dialog Component

recipes/package-lock.json

@@ -1113,11 +1113,47 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/button": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/button/-/button-5.1.0.tgz",
+      "integrity": "sha512-umeuIEbeRRd0cY+5axhrBoM0dvJ4YfoTsUbKgz4ctFxHLBsgthFUIXSa3Ot15s284UP6kjslK0LCMqzhirZxeQ==",
+      "requires": {
+        "@material/density": "^5.1.0",
+        "@material/elevation": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/touch-target": "^5.1.0",
+        "@material/typography": "^5.1.0"
+      }
+    },
     "@material/density": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/density/-/density-5.1.0.tgz",
       "integrity": "sha512-jmp6AgiNYosl+HicxWCa8vib9pg9tNxRcf+6f9LDkDYJ9jtO90PXuypyd0hO64JZ9Df7BywFj5hTWPERG1FBbw=="
     },
+    "@material/dialog": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/dialog/-/dialog-5.1.0.tgz",
+      "integrity": "sha512-CxA0W0uzXuwJNivB6Gbb7DvtJL3+J7ghsaSL1HfycXVXfdrT1nSidLyOIthRMVBUBJrAMfusvtzFDgXr0TWqDg==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/button": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/elevation": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/touch-target": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/dom": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/dom/-/dom-5.1.0.tgz",
@@ -1126,11 +1162,37 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/elevation": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/elevation/-/elevation-5.1.0.tgz",
+      "integrity": "sha512-NsWIT+L6x3BLouCOh3H8x885/nCrNNmzCwHEodz/0PcYQsxx9RiIVFkagmJWw/w//jej/D4NotD0xHGKOWTrFA==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/theme": "^5.1.0"
+      }
+    },
     "@material/feature-targeting": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/feature-targeting/-/feature-targeting-5.1.0.tgz",
       "integrity": "sha512-z3JNWF7lP9WOzw1xBwul/HAOu4qC6EpK/8MkhjLNI9APvdYML82PWS1V0k0MiqA6Jk6uxm8DiVAk9VUqBa9/YA=="
     },
+    "@material/floating-label": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/floating-label/-/floating-label-5.1.0.tgz",
+      "integrity": "sha512-5EwPiBa5A4Q678tNWdkkBGDdSCDzudhVgBtRiA/7xRo4dHXiBxX5bhE+RHrF3ZQyEf6fsShspqwAFkTA1EaplQ==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/icon-button": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/icon-button/-/icon-button-5.1.0.tgz",
@@ -1144,6 +1206,32 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/line-ripple": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/line-ripple/-/line-ripple-5.1.0.tgz",
+      "integrity": "sha512-esf2/ROZl1eVpyGCWPvxMSGVkuIOG5Fm6qufOLp7XIx5IL1O0bsm+bV6cVC4JCCtmNOag4GOBgkKKbkOvp/R6g==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "@material/notched-outline": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/notched-outline/-/notched-outline-5.1.0.tgz",
+      "integrity": "sha512-mQ3NjJR1jLXnJi6jhs20ftTf0yU1gWpYlyx1GizU0f7pLEqcIrFnw6G+pavcnKqP+JXNkzAQeGbmZvYBQnxokA==",
+      "requires": {
+        "@material/base": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/floating-label": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/ripple": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/ripple/-/ripple-5.1.0.tgz",
@@ -1157,6 +1245,41 @@
         "tslib": "^1.9.3"
       }
     },
+    "@material/rtl": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/rtl/-/rtl-5.1.0.tgz",
+      "integrity": "sha512-Hij4KJIfjK63HArdQ3K1INMo0MbigDgL0JhjO1VDk5c+iYmYpjDI7wgPLmV5ISCBtenXRWpo1xbBO3uEmtCd4Q=="
+    },
+    "@material/shape": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/shape/-/shape-5.1.0.tgz",
+      "integrity": "sha512-/k27T9fhQ1zj7VCsS26nv0TzsOi142ncik2mycEXq8753PDBotob7Y19pbwivwt9QxkglhMGH0EaWdZPzBoQXw==",
+      "requires": {
+        "@material/feature-targeting": "^5.1.0",
+        "@material/rtl": "^5.1.0"
+      }
+    },
+    "@material/textfield": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/textfield/-/textfield-5.1.0.tgz",
+      "integrity": "sha512-Vipvw75AXj4G/BGXv3DyrGozbvHxGtcNGig1e5pz1ERvcmZN5epLyGStznxEIZYNf0Q+6O/NwSRxZGgrdI2w8w==",
+      "requires": {
+        "@material/animation": "^5.1.0",
+        "@material/base": "^5.1.0",
+        "@material/density": "^5.1.0",
+        "@material/dom": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0",
+        "@material/floating-label": "^5.1.0",
+        "@material/line-ripple": "^5.1.0",
+        "@material/notched-outline": "^5.1.0",
+        "@material/ripple": "^5.1.0",
+        "@material/rtl": "^5.1.0",
+        "@material/shape": "^5.1.0",
+        "@material/theme": "^5.1.0",
+        "@material/typography": "^5.1.0",
+        "tslib": "^1.9.3"
+      }
+    },
     "@material/theme": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/@material/theme/-/theme-5.1.0.tgz",
@@ -1165,6 +1288,24 @@
         "@material/feature-targeting": "^5.1.0"
       }
     },
+    "@material/touch-target": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/touch-target/-/touch-target-5.1.0.tgz",
+      "integrity": "sha512-lR3eoL1D0I/hyEK6I7bMFDBy/pE0yYvjYUZtL1vC7+2i54A4FgQ2hwnpQJVaZQXzrHdj6xsXmODphmUsH5gqPA==",
+      "requires": {
+        "@material/base": "^5.1.0",
+        "@material/feature-targeting": "^5.1.0"
+      }
+    },
+    "@material/typography": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/@material/typography/-/typography-5.1.0.tgz",
+      "integrity": "sha512-yh02koa6JLyPT5u7Zb31kyqhoZoppL0n9FmZK+eHXZcfeDF7ROL0UmtRsEjQxfnCNZRR+FIhAgrzdYxClwH05g==",
+      "requires": {
+        "@material/feature-targeting": "^5.1.0",
+        "@material/theme": "^5.1.0"
+      }
+    },
     "@mrmlnc/readdir-enhanced": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -1206,6 +1347,41 @@
         "tslib": "^1.10.0"
       }
     },
+    "@rmwc/button": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/button/-/button-6.0.14.tgz",
+      "integrity": "sha512-suejaZsM60NxSwLA0CROLiEzDMxAFiahhxJEmzwpLK3Wpe3i99X+nPPvlrZ1BjhoYktTZq6rAS8SFCbIQgiiCw==",
+      "requires": {
+        "@material/button": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/icon": "^6.0.14",
+        "@rmwc/provider": "^6.0.14",
+        "@rmwc/ripple": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
+    "@rmwc/dialog": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rmwc/dialog/-/dialog-6.1.0.tgz",
+      "integrity": "sha512-bAZzEQnvw2m6gb4y2500TDF680wHUEgmt1k/pm9sNt1sckcQJHVuPycjaucSZgk+yqWABOyot2u1cLkk6PpEYg==",
+      "requires": {
+        "@material/dialog": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/button": "^6.0.14",
+        "@rmwc/textfield": "^6.1.0",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
+    "@rmwc/floating-label": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/floating-label/-/floating-label-6.0.14.tgz",
+      "integrity": "sha512-SX9LydoINmCSRQEmrPe1AvtAhe/eSH7HqjNxFsuXAvf5HHzwgcUgLlHcW45v+1iUnSREPCkSGO6M6jJbxR51KQ==",
+      "requires": {
+        "@material/floating-label": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/icon": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/@rmwc/icon/-/icon-6.0.14.tgz",
@@ -1228,6 +1404,26 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/line-ripple": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/line-ripple/-/line-ripple-6.0.14.tgz",
+      "integrity": "sha512-BqJ6Gq823LKVP7kPPWvwQiX0hzqArtDSXeqTH93SrT1kpGs3m69mGL+/8uayHMKa/8osC1dQ8Q/iGozqqA5yFg==",
+      "requires": {
+        "@material/line-ripple": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
+    "@rmwc/notched-outline": {
+      "version": "6.0.14",
+      "resolved": "https://registry.npmjs.org/@rmwc/notched-outline/-/notched-outline-6.0.14.tgz",
+      "integrity": "sha512-kylokye/R8Hc6xseDwPZzwIZXkwnEb9Ee0vh1wwFUS8FzfzeNGtwbExxE/Pnduz5BYmAQvZMrqoF+76BOQ7uzQ==",
+      "requires": {
+        "@material/notched-outline": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/provider": {
       "version": "6.0.14",
       "resolved": "https://registry.npmjs.org/@rmwc/provider/-/provider-6.0.14.tgz",
@@ -1248,6 +1444,21 @@
         "@rmwc/types": "^6.0.5"
       }
     },
+    "@rmwc/textfield": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/@rmwc/textfield/-/textfield-6.1.0.tgz",
+      "integrity": "sha512-jRnPolOSXJaP8lOLpPouKfHJ4hJjPY26qRwOao8Jrhj73GlsQoAHdHMY2u7brAKGQ0qYyDfRj+FJFgHqwxIyNw==",
+      "requires": {
+        "@material/textfield": "^5.1.0",
+        "@rmwc/base": "^6.0.14",
+        "@rmwc/floating-label": "^6.0.14",
+        "@rmwc/icon": "^6.0.14",
+        "@rmwc/line-ripple": "^6.0.14",
+        "@rmwc/notched-outline": "^6.0.14",
+        "@rmwc/ripple": "^6.0.14",
+        "@rmwc/types": "^6.0.5"
+      }
+    },
     "@rmwc/types": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/@rmwc/types/-/types-6.0.5.tgz",

recipes/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@rmwc/dialog": "^6.1.0",
     "@rmwc/icon": "^6.0.14",
     "@rmwc/icon-button": "^6.0.14",
     "@types/classnames": "^2.2.9",

recipes/src/components/Dialog/index.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
-import Dialog, {
+import {
+  Dialog,
   DialogContent
-} from '@material/react-dialog';
+} from '@rmwc/dialog';
 import Button from 'components/Button';
 
-import '@material/react-dialog/dist/dialog.min.css';
+import '@rmwc/dialog/styles';
 import './styles.scss'
 
 interface DialogProps {
@@ -21,10 +22,14 @@ interface DialogProps {
 const CBK_Dialog = ({ isOpen, actions, children }: DialogProps) => {
   return (
     <Dialog
-      scrimClickAction={''}
-      escapeKeyAction={''}
       open={isOpen}
-      onClose={(action: string) => actions[action] && actions[action].onSelect() }
+      onClose={
+        (evt) => {
+          if (evt.detail.action) {
+            return actions[evt.detail.action] && actions[evt.detail.action].onSelect()
+          }
+        }
+      }
       className='cbk-dialog'
     >
       <DialogContent className='cbk-dialog__content'>