ar-design 0.2.65 → 0.2.67

package/dist/assets/css/components/feedback/modal/styles.css

@@ -1,6 +1,7 @@
 .ar-modal-wrapper {
   position: fixed;
   inset: 0;
+  z-index: 1050;
 }
 .ar-modal-wrapper > .ar-modal-bg {
   position: fixed;

package/dist/assets/css/components/feedback/popup/popup.css

@@ -1,3 +1,14 @@
+.ar-notification-popup-wrapper {
+  position: fixed;
+  inset: 0;
+  z-index: 1050;
+}
+.ar-notification-popup-wrapper > .ar-notification-popup-bg {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(var(--black-rgb), 0.5);
+}
+
 .ar-notification-popup {
   visibility: hidden;
   opacity: 0;
@@ -41,7 +52,7 @@
 }
 .ar-notification-popup > .icon.success::before {
   content: "";
-  width: 4rem;
+  width: 3rem;
   height: 1.75rem;
   transform: rotate(-45deg);
   border: solid 10.5px transparent;

package/dist/components/feedback/popup/index.js

@@ -1,12 +1,17 @@
 "use client";
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import "../../../assets/css/components/feedback/popup/popup.css";
 import Button from "../../form/button";
 import ReactDOM from "react-dom";
 import { NotificationContext } from "../../../libs/core/application/contexts/Notification";
 const Popup = ({ title, message, status, isOpen, buttons }) => {
+    // contexts
     const { setIsPopupOpen } = useContext(NotificationContext);
+    // refs
+    const _arNotificationPopupWrapper = useRef(null);
+    const _arNotificationPopup = useRef(null);
     // states
+    const _notificaitonPopupWrapperClassName = ["ar-notification-popup-wrapper"];
     const [className, setClassName] = useState(["ar-notification-popup", ""]);
     // useEffects
     useEffect(() => {
@@ -14,20 +19,36 @@ const Popup = ({ title, message, status, isOpen, buttons }) => {
             const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
             return updated;
         });
+        if (isOpen)
+            document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.removeProperty("overflow");
+        };
     }, [isOpen]);
     return (isOpen &&
-        ReactDOM.createPortal(React.createElement("div", { className: className.map((c) => c).join(" ") },
-            React.createElement("div", { className: `icon ${status}` }),
-            React.createElement("div", { className: "content" },
-                React.createElement("span", { className: `title ${status}` },
-                    title,
-                    "!"),
-                React.createElement("span", { className: "message" }, message)),
-            React.createElement(Button, { variant: "filled", status: status == "success" ? "success" : "danger", onClick: () => {
-                    (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
-                    (() => {
-                        setIsPopupOpen && setIsPopupOpen((prev) => !prev);
-                    })();
-                } }, buttons?.okay?.text ?? "Tamam")), document.body));
+        ReactDOM.createPortal(React.createElement("div", { ref: _arNotificationPopupWrapper, className: _notificaitonPopupWrapperClassName.map((c) => c).join(" ") },
+            React.createElement("div", { className: "ar-notification-popup-bg", onMouseDown: (event) => {
+                    event.stopPropagation();
+                    const target = event.target;
+                    if (_arNotificationPopup.current && !_arNotificationPopup.current.contains(target)) {
+                        setClassName((prev) => {
+                            const updated = [...prev.slice(0, -1), isOpen ? "open" : ""];
+                            return updated;
+                        });
+                    }
+                } }),
+            React.createElement("div", { ref: _arNotificationPopup, className: className.map((c) => c).join(" ") },
+                React.createElement("div", { className: `icon ${status}` }),
+                React.createElement("div", { className: "content" },
+                    React.createElement("span", { className: `title ${status}` },
+                        title,
+                        "!"),
+                    React.createElement("span", { className: "message" }, message)),
+                React.createElement(Button, { variant: "filled", status: status == "success" ? "success" : "danger", onClick: () => {
+                        (() => buttons?.okay?.onClick && buttons.okay?.onClick())();
+                        (() => {
+                            setIsPopupOpen && setIsPopupOpen((prev) => !prev);
+                        })();
+                    } }, buttons?.okay?.text ?? "Tamam"))), document.body));
 };
 export default Popup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ar-design",
-  "version": "0.2.65",
+  "version": "0.2.67",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",