From 866d578c079a34f1b4193dac3b72e607cb920e03 Mon Sep 17 00:00:00 2001
From: severinlandolt <sev.landolt@gmail.com>
Date: Fri, 6 Dec 2024 17:05:35 +0100
Subject: [PATCH] fix: dialog

---
 .../layout-elements/Dialog/Dialog.tsx         | 26 +++++--------------
 src/tests/layout-elements/Dialog.test.tsx     |  2 +-
 2 files changed, 8 insertions(+), 20 deletions(-)

diff --git a/src/components/layout-elements/Dialog/Dialog.tsx b/src/components/layout-elements/Dialog/Dialog.tsx
index 1b2afbd7c..df88bb87b 100644
--- a/src/components/layout-elements/Dialog/Dialog.tsx
+++ b/src/components/layout-elements/Dialog/Dialog.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Dialog as HeadlessuiDialog, Transition } from "@headlessui/react";
+import { Dialog as HeadlessUiDialog, DialogBackdrop, Transition } from "@headlessui/react";
 import { makeClassName, tremorTwMerge } from "lib";
 
 const makeDisplayClassName = makeClassName("dialog");
@@ -17,31 +17,19 @@ const Dialog = React.forwardRef<HTMLDivElement, DialogProps>((props, ref) => {
   const { children, className, ...other } = props;
   return (
     <Transition appear show={props.open}>
-      <HeadlessuiDialog
-        as="div"
+      <HeadlessUiDialog
         ref={ref}
         {...other}
         className={tremorTwMerge(makeDisplayClassName("root"), "relative z-50", className)}
       >
-        <Transition
-          as={React.Fragment}
-          enter="ease-out duration-300"
-          enterFrom="opacity-0"
-          enterTo="opacity-100"
-          leave="ease-in duration-200"
-          leaveFrom="opacity-100"
-          leaveTo="opacity-0"
-        >
-          <div
-            className={tremorTwMerge(
-              "fixed inset-0 bg-slate-950/30  dark:bg-slate-950/50 transition-opacity",
-            )}
-          ></div>
-        </Transition>
+        <DialogBackdrop
+          transition
+          className="fixed bg-slate-950/30  dark:bg-slate-950/50  inset-0  transition-opacity data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in"
+        />
         <div className="fixed inset-0 overflow-y-auto w-screen">
           <div className="flex min-h-full items-center justify-center p-4">{children}</div>
         </div>
-      </HeadlessuiDialog>
+      </HeadlessUiDialog>
     </Transition>
   );
 });
diff --git a/src/tests/layout-elements/Dialog.test.tsx b/src/tests/layout-elements/Dialog.test.tsx
index 4058ed172..c2efd36d5 100644
--- a/src/tests/layout-elements/Dialog.test.tsx
+++ b/src/tests/layout-elements/Dialog.test.tsx
@@ -6,7 +6,7 @@ import { Dialog, DialogPanel } from "components";
 describe("Dialog", () => {
   test("renders the Dialog component", async () => {
     const { findByText } = render(
-      <Dialog open onClose={() => {}}>
+      <Dialog open={true} onClose={() => {}} static={true}>
         <DialogPanel>Test</DialogPanel>
       </Dialog>,
     );