fui-material 2.7.11 → 2.7.12

package/dist/f-ui-kit.es.js

@@ -1009,20 +1009,22 @@ const FTableFooter = ({
     }
   );
 };
-const active$4 = "_active_16jkc_16";
-const hide = "_hide_16jkc_37";
+const entering = "_entering_dwagt_17";
+const exiting = "_exiting_dwagt_23";
+const hide = "_hide_dwagt_45";
 const styles$r = {
-  "f-dialog": "_f-dialog_16jkc_1",
-  "active-dialog": "_active-dialog_16jkc_16",
-  "f-dialog__content": "_f-dialog__content_16jkc_20",
-  active: active$4,
+  "f-dialog": "_f-dialog_dwagt_1",
+  entering,
+  "f-dialog__content": "_f-dialog__content_dwagt_20",
+  exiting,
   hide,
-  "f-dialog__header": "_f-dialog__header_16jkc_41",
-  "f-dialog__header_title": "_f-dialog__header_title_16jkc_53",
-  "f-dialog__header_close": "_f-dialog__header_close_16jkc_64",
-  "f-dialog__body": "_f-dialog__body_16jkc_79",
-  "f-dialog__footer": "_f-dialog__footer_16jkc_84"
+  "f-dialog__header": "_f-dialog__header_dwagt_49",
+  "f-dialog__header_title": "_f-dialog__header_title_dwagt_61",
+  "f-dialog__header_close": "_f-dialog__header_close_dwagt_72",
+  "f-dialog__body": "_f-dialog__body_dwagt_87",
+  "f-dialog__footer": "_f-dialog__footer_dwagt_92"
 };
+let openDialogsCount = 0;
 const FDialog = ({
   openAndClose,
   closeButtonBackPage,
@@ -1033,22 +1035,55 @@ const FDialog = ({
   st,
   width = "lg"
 }) => {
+  const [isMounted, setIsMounted] = useState(openAndClose);
+  const [isClosing, setIsClosing] = useState(false);
   useEffect(() => {
-    if (!openAndClose) return;
-    const dialogCount = document.querySelectorAll(".active-dialog").length;
-    if (dialogCount > 0) {
-      document.body.classList.add("open-dialog");
-    } else {
-      document.body.classList.remove("open-dialog");
+    if (openAndClose) {
+      setIsMounted(true);
+      setIsClosing(false);
+    } else if (isMounted) {
+      setIsClosing(true);
     }
-    return () => {
-      const updatedCount = document.querySelectorAll(".active-dialog").length;
-      if (updatedCount === 0) {
-        document.body.classList.remove("open-dialog");
-      }
-    };
   }, [openAndClose]);
-  if (!openAndClose) return null;
+  const handleAnimationEnd = (e) => {
+    if (isClosing && e.target === e.currentTarget) {
+      setIsMounted(false);
+      setIsClosing(false);
+    }
+  };
+  useEffect(() => {
+    if (isClosing) {
+      const timer = setTimeout(() => {
+        setIsMounted(false);
+        setIsClosing(false);
+      }, 300);
+      return () => clearTimeout(timer);
+    }
+  }, [isClosing]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      openDialogsCount += 1;
+      document.body.classList.add("open-dialog");
+      return () => {
+        openDialogsCount = Math.max(0, openDialogsCount - 1);
+        if (openDialogsCount === 0) {
+          document.body.classList.remove("open-dialog");
+        }
+      };
+    }
+  }, [isMounted, isClosing]);
+  const handleKeyDown = useCallback((e) => {
+    if (e.key === "Escape" && openAndClose && !isClosing) {
+      closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+    }
+  }, [openAndClose, isClosing, closeButtonBackPage]);
+  useEffect(() => {
+    if (isMounted && !isClosing) {
+      window.addEventListener("keydown", handleKeyDown);
+      return () => window.removeEventListener("keydown", handleKeyDown);
+    }
+  }, [isMounted, isClosing, handleKeyDown]);
+  if (!isMounted) return null;
   const widthStyles = {
     xs: "50vw",
     md: "65vw",
@@ -1057,22 +1092,28 @@ const FDialog = ({
     adaptive: "fit-content"
   };
   const contentWidth = widthStyles[width];
+  const animationClass = isClosing ? styles$r["exiting"] : styles$r["entering"];
   return ReactDOM.createPortal(
     /* @__PURE__ */ jsx(
       "div",
       {
         id,
         style: st,
-        className: `${styles$r["f-dialog"]} ${openAndClose ? styles$r["active-dialog"] : ""} ${className || ""}`,
-        onClick: () => closeButtonBackPage == null ? void 0 : closeButtonBackPage(false),
+        className: `${styles$r["f-dialog"]} ${animationClass} ${className || ""}`,
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) {
+            closeButtonBackPage == null ? void 0 : closeButtonBackPage(false);
+          }
+        },
+        onAnimationEnd: handleAnimationEnd,
         children: /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$r["f-dialog__content"]} ${openAndClose ? styles$r["active"] : ""} ${hide2 ? styles$r["hide"] : ""}`,
+            className: `${styles$r["f-dialog__content"]} ${hide2 ? styles$r["hide"] : ""}`,
             style: {
               width: contentWidth
             },
-            onClick: (e) => e.stopPropagation(),
+            onMouseDown: (e) => e.stopPropagation(),
             children
           }
         )