Updates

components/(partials)/ModalComponent.tsx

@@ -3,7 +3,7 @@ import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
 import Button from "../layout/Button";
 import { X } from "lucide-react";
-import { TWUI_MODAL_PROPS } from "../elements/Modal";
+import { type TWUI_MODAL_PROPS } from "../elements/Modal";
 import Paper from "../elements/Paper";
 import _ from "lodash";
 
@@ -15,15 +15,20 @@ type Props = TWUI_MODAL_PROPS & {
 /**
  * # Modal Main Component
  */
-export default function ModalComponent({ open, setOpen, ...props }: Props) {
+export default function ModalComponent({
+    open,
+    setOpen,
+    no_cancel_button,
+    ...props
+}: Props) {
     if (!open) return null;
 
     return ReactDOM.createPortal(
         <div
             className={twMerge(
-                "fixed z-[200] top-0 left-0 w-screen h-screen",
+                "fixed z-200 top-0 left-0 w-screen h-screen",
                 "flex flex-col items-center justify-center p-4",
-                "twui-modal-root"
+                "twui-modal-root",
             )}
             role="dialog"
             aria-modal="true"
@@ -31,7 +36,7 @@ export default function ModalComponent({ open, setOpen, ...props }: Props) {
             <div
                 className={twMerge(
                     "absolute top-0 left-0 bg-dark/80 z-0",
-                    "w-screen h-screen"
+                    "w-screen h-screen",
                 )}
                 onClick={(e) => {
                     setOpen(false);
@@ -43,23 +48,25 @@ export default function ModalComponent({ open, setOpen, ...props }: Props) {
                     "z-10 max-w-modal bg-background-light dark:bg-background-dark",
                     "w-full relative max-h-[95vh] overflow-y-auto",
                     "twui-modal-content",
-                    props.className
+                    props.className,
                 )}
             >
                 {props.children}
-                <Button
-                    className="absolute top-0 right-0 p-2"
-                    variant="ghost"
-                    color="gray"
-                    onClick={() => {
-                        setOpen(false);
-                    }}
-                    title="Close Modal Button"
-                >
-                    <X size={30} />
-                </Button>
+                {!no_cancel_button && (
+                    <Button
+                        className="absolute top-0 right-0 p-2"
+                        variant="ghost"
+                        color="gray"
+                        onClick={() => {
+                            setOpen(false);
+                        }}
+                        title="Close Modal Button"
+                    >
+                        <X size={30} />
+                    </Button>
+                )}
             </Paper>
         </div>,
-        document.getElementById("twui-modal-root") as HTMLElement
+        document.getElementById("twui-modal-root") as HTMLElement,
     );
 }

components/(partials)/PopoverComponent.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { twMerge } from "tailwind-merge";
 import ReactDOM from "react-dom";
-import { TWUI_MODAL_PROPS } from "../elements/Modal";
+import type { TWUI_MODAL_PROPS } from "../elements/Modal";
 import Paper from "../elements/Paper";
 import _ from "lodash";
 import twuiGrabPopoverStyles from "../(functions)/popver/grab-popover-styles";
@@ -44,17 +44,18 @@ export default function PopoverComponent({
         }
     }, [open, targetElRef, position]);
 
-    let closeTimeout: any;
+    const closeTimeoutRef = React.useRef<any>(null);
 
     const popoverEnterFn = React.useCallback(() => {
         popoverContentActiveRef.current = true;
         popoverTargetActiveRef.current = false;
+        window.clearTimeout(closeTimeoutRef.current);
         setOpen(true);
     }, []);
 
     const popoverLeaveFn = React.useCallback(() => {
-        window.clearTimeout(closeTimeout);
-        closeTimeout = setTimeout(() => {
+        window.clearTimeout(closeTimeoutRef.current);
+        closeTimeoutRef.current = setTimeout(() => {
             if (popoverTargetActiveRef.current) {
                 popoverTargetActiveRef.current = false;
                 return;
@@ -71,7 +72,7 @@ export default function PopoverComponent({
             className={twMerge(
                 "max-w-[300px] z-[250]",
                 "twui-popover-content",
-                props.className
+                props.className,
             )}
             style={{ ...style, ...props.style }}
             onMouseEnter={
@@ -110,6 +111,6 @@ export default function PopoverComponent({
             /> */}
             {props.children}
         </Paper>,
-        document.getElementById("twui-popover-root") as HTMLElement
+        document.getElementById("twui-popover-root") as HTMLElement,
     );
 }