add dialog

src/components/Dialog.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { createComponent } from '@lit/react';
+import { MdDialog as MdDialogWebComponent } from '@material/web/dialog/dialog';
+
+const MdDialog = createComponent({
+	react: React,
+	tagName: 'md-dialog',
+	elementClass: MdDialogWebComponent,
+	events: {
+		onClose: 'close',
+		onShow: 'show',
+		onOpen: 'open',
+		onOpened: 'opened',
+		onClosed: 'closed',
+		onCancel: 'cancel',
+	},
+});
+
+type DialogProps = {
+	children: React.ReactNode;
+	quick?: boolean;
+	returnValue?: string;
+	noFocusTrap?: boolean;
+	open?: boolean;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+	onClose?: () => void;
+	onShow?: () => void;
+	onOpen?: () => void;
+	onOpened?: () => void;
+	onClosed?: () => void;
+	onCancel?: () => void;
+};
+
+export const Dialog = (props: DialogProps) => {
+	const { children, quick, returnValue, noFocusTrap, open, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
+	return <MdDialog quick={quick} returnValue={returnValue} noFocusTrap={noFocusTrap} open={open} style={style} className={className} id={id} onClose={onClose} onShow={onShow} onOpen={onOpen} onOpened={onOpened} onClosed={onClosed} onCancel={onCancel}>{children}</MdDialog>;
+};
+
+type DialogTitleProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogTitle = (props: DialogTitleProps) => {
+	return (
+		<div slot='headline' {...props}>
+			{props.children}
+		</div>
+	);
+};
+
+type DialogContentProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogContent = (props: DialogContentProps) => {
+	return (
+		<div slot='content' {...props}>
+			{props.children}
+		</div>
+	);
+};
+
+type DialogActionsProps = {
+	children: React.ReactNode;
+	style?: React.CSSProperties;
+	className?: string;
+	id?: string;
+};
+
+export const DialogActions = (props: DialogActionsProps) => {
+	return (
+		<div slot='actions' {...props}>
+			{props.children}
+		</div>
+	);
+};

src/index.tsx

@@ -10,6 +10,7 @@ import { Typography } from "./components/Typography";
 import { FormLabel } from "./components/Forms";
 import { Paper } from "./components/Paper";
 import { AssistChip, InputChip } from "./components/Chip";
+import { Dialog, DialogActions, DialogContent, DialogTitle } from "./components/Dialog";
 const mountApp = async () => {
 	const rootContainer = document.getElementById('root');
 
@@ -38,6 +39,13 @@ const mountApp = async () => {
 			</Paper>
 			<AssistChip label="Hello" />
 			<InputChip label="Hello" />
+			<Dialog open={true}>
+				<DialogTitle>Hello</DialogTitle>
+				<DialogContent>Hello</DialogContent>
+				<DialogActions>
+					<Button variant='filled'>Hello</Button>
+				</DialogActions>
+			</Dialog>
 		</ThemeProvider>
 	);
 };