fix: cannot close dialog

playground/src/examples/Dialog.jsx

@@ -0,0 +1,27 @@
+import { useState } from "react";
+import { DialogContent, Dialog, DialogAction, Button } from "kindle-ui";
+
+export default function () {
+	const [open, setOpen] = useState(false);
+
+	return (
+		<>
+			<Dialog
+				open={open}
+				onClose={() => {
+					setOpen(false);
+				}}
+			>
+				<DialogContent>This is a dialog</DialogContent>
+				<DialogAction></DialogAction>
+			</Dialog>
+			<Button
+				onClick={() => {
+					setOpen(true);
+				}}
+			>
+				Open Dialog
+			</Button>
+		</>
+	);
+}

playground/src/page/home.jsx

@@ -2,6 +2,7 @@ import { Typography, Button } from "kindle-ui";
 import CardExample from "../examples/Card";
 import List from "../examples/List";
 import TabExample from "../examples/Tab";
+import DialogExample from "../examples/Dialog";
 import { Card } from "kindle-ui";
 
 export default () => {
@@ -13,18 +14,13 @@ export default () => {
 			<main>
 				<Typography greyImage={true}>
 					<h1>Hi, kindle-ui!</h1>
-					<h2>Install</h2>
-					<p>
-						<code>npm i kindle-ui</code>
-					</p>
-					or
-					<p>
-						<code>yarn add kindle-ui</code>
-					</p>
 					<h2>Typography</h2>
 					<p>
-						kindle-ui is a react component library to build
-						Kindle-styled UI.
+						kindle-ui is a <b>react</b> component library inspired
+						by
+						<a>Amazon Kindle reader</a>. Though amazon has released
+						a <u>newer UI</u>, this classic desgin is still
+						valuable.
 					</p>
 					<img src="/Kindle-UI.png"></img>
 					<h2>Button</h2>
@@ -39,6 +35,8 @@ export default () => {
 					<TabExample />
 					<h2>Card</h2>
 					<CardExample />
+					<h2>Dialog</h2>
+					<DialogExample />
 				</Typography>
 			</main>
 		</div>

src/components/Popover/index.tsx

@@ -13,7 +13,6 @@ const Popover = ({ children, className }: any) => (
 
 interface IMask {
 	show: boolean;
-	index: number;
 	ref: React.MutableRefObject<undefined>;
 }
 
@@ -24,50 +23,56 @@ const Mask = styled.div`
 	bottom: 0;
 	right: 0;
 	display: ${(props: IMask) => (props.show ? "block" : "none")};
-	z-index: ${(props: IMask) => `${10 + props.index}`};
 `;
 
-const StyledPopover = styled(Popover)`
-	display: ${(props) => (props.open ? "block" : "none")};
-	z-index: ${(props) => props.index && 500 + props.index};
+const StyledPopover = styled.div`
+	z-index: 2;
+	height: 100%;
 `;
 
 /**
  * Popover
  * @author rivertwilight
  */
 export default ({ children, open, onClose }: IPopover) => {
-	const mask = useRef(null);
-	const [index, setIndex] = useState(1);
+	const mask = useRef();
+
+	const handleMouseDown = (event) => {
+		console.log("Click content");
+		// We don't want to close the dialog when clicking the dialog content.
+		// Make sure the event starts and ends on the same DOM element.
+		mask.current = event.target === event.currentTarget;
+	};
+
+	// const handleMouseUp = (event) => {
+	// 	mask = false;
+	// };
+
+	const handleClickMask = (event) => {
+		if (!mask.current) return;
+
+		console.log("Clicked mask");
+
+		mask.current = null;
 
-	const handleClick = () => {
 		onClose && onClose();
 	};
 
-	useEffect(() => {
-		if (mask.current) {
-			console.log("Useeffect");
-			if (window.maskNumber) {
-				window.maskNumber += 1;
-				setIndex(window.maskNumber);
-			} else {
-				window.maskNumber = 1;
-			}
-			mask.current.addEventListener("click", handleClick);
-		}
-		return () => {
-			if (mask.current) {
-				mask.current.removeEventListener("click", handleClick);
-			}
-		};
-	}, [open]);
+	//add props to children
+	const childrenWithProps = React.Children.map(children, (child) => {
+		return React.cloneElement(child as React.ReactElement, {
+			// onMouseDown: handleMouseDown,
+			// onMouseUp: handleMouseUp,
+		});
+	});
 
 	return (
 		<>
-			<Mask index={index} show={open} ref={mask} />
-			<StyledPopover index={index} open={open}>
-				{children}
-			</StyledPopover>
+			<Mask onClick={handleClickMask} show={open} ref={mask}>
+				<StyledPopover onMouseDown={handleMouseDown}>
+					{childrenWithProps}
+				</StyledPopover>
+			</Mask>
 		</>
 	);
 };