From 2a21226f8268589b9b323243234c5f6a7ddf44a8 Mon Sep 17 00:00:00 2001
From: Vineeth Asok Kumar <me@vineethasok.com>
Date: Sun, 22 Oct 2023 15:58:46 +0200
Subject: [PATCH] Add Dialog to components (#185)

* Add Dialog to components

* Add option to showOverlay
---
 src/components/Dialog/Dialog.tsx | 14 ++++++--------
 src/components/index.ts          |  1 +
 src/components/types.ts          |  2 ++
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
index eb8c36b7..aef487de 100644
--- a/src/components/Dialog/Dialog.tsx
+++ b/src/components/Dialog/Dialog.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import * as RadixDialog from "@radix-ui/react-dialog";
 import styled, { keyframes } from "styled-components";
 import { Button, Icon, Spacer, Title } from "@/components";
@@ -16,11 +16,7 @@ const Trigger = styled(RadixDialog.Trigger)`
   cursor: pointer;
 `;
 
-interface DialogTriggerProps extends RadixDialog.DialogTriggerProps {
-  children: React.ReactNode;
-}
-
-const DialogTrigger = ({ children, ...props }: DialogTriggerProps) => {
+const DialogTrigger = ({ children, ...props }: RadixDialog.DialogTriggerProps) => {
   return <Trigger {...props}>{children}</Trigger>;
 };
 
@@ -100,13 +96,14 @@ const CloseButton = ({ onClose }: { onClose?: () => void }) => (
   </RadixDialog.Close>
 );
 
-interface DialogContentProps extends RadixDialog.DialogContentProps {
+export interface DialogContentProps extends RadixDialog.DialogContentProps {
   title: string;
   showClose?: boolean;
   forceMount?: true;
   container?: HTMLElement | null;
   children: ReactNode;
   onClose?: () => void;
+  showOverlay?: boolean;
 }
 
 const DialogContent = ({
@@ -116,13 +113,14 @@ const DialogContent = ({
   onClose,
   forceMount,
   container,
+  showOverlay = true,
 }: DialogContentProps) => {
   return (
     <RadixDialog.Portal
       forceMount={forceMount}
       container={container}
     >
-      <DialogOverlay />
+      {showOverlay && <DialogOverlay />}
       <ContentArea>
         <TitleArea>
           <Title
diff --git a/src/components/index.ts b/src/components/index.ts
index 36a26ed5..8dc88e61 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -15,6 +15,7 @@ export { CardSecondary } from "./CardSecondary/CardSecondary";
 export { CardPrimary } from "./CardPrimary/CardPrimary";
 export { Checkbox } from "./Checkbox/Checkbox";
 export { CodeBlock } from "./CodeBlock/CodeBlock";
+export { Dialog } from "./Dialog/Dialog";
 export { EllipsisContent } from "./EllipsisContent/EllipsisContent";
 export { Flyout } from "./Flyout/Flyout";
 export { InlineCodeBlock } from "./CodeBlock/InlineCodeBlock";
diff --git a/src/components/types.ts b/src/components/types.ts
index a005926b..b84e86a9 100644
--- a/src/components/types.ts
+++ b/src/components/types.ts
@@ -32,6 +32,8 @@ export type { SelectOptionListItem } from "./Select/common/types";
 export type { MultiSelectProps } from "./Select/MultiSelect";
 export type { PanelProps } from "./Panel/Panel";
 export type { FlyoutProps, FlyoutFooterProps, FlyoutHeaderProps } from "./Flyout/Flyout";
+export type { DialogContentProps } from "./Dialog/Dialog";
+export type { DialogProps, DialogTriggerProps } from "@radix-ui/react-dialog";
 
 export type States = "default" | "active" | "disabled" | "error" | "hover";
 export type HorizontalDirection = "start" | "end";