feat(EventPopup): enhance popup animations and add unit tests for rendering and close functionality

Author: Ali-Sdg90

src/__tests__/components/EventPopup.test.jsx

@@ -0,0 +1,56 @@
+import React from "react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
+import moment from "jalali-moment";
+import EventPopup from "../../components/EventPopup";
+
+describe("EventPopup", () => {
+    it("renders with content and close button, and calls onClose when clicked", async () => {
+        const date = moment();
+        const onClose = jest.fn();
+
+        const anchorRect = {
+            left: 120,
+            top: 100,
+            bottom: 160,
+            width: 120,
+            height: 40,
+        };
+
+        const event = {
+            title: "جلسه تست",
+            fullName: "جلسه هفتگی تست",
+            color: "#ff5a5f",
+            link: "https://example.com",
+            resource: "https://resource.example",
+            time: "ساعت ۱۰:۰۰ تا ۱۱:۰۰",
+        };
+
+        const { container } = render(
+            <EventPopup
+                visible={true}
+                anchorRect={anchorRect}
+                date={date}
+                event={event}
+                onClose={onClose}
+            />
+        );
+
+        const root = container.querySelector(".event-popup");
+        expect(root).toBeInTheDocument();
+
+        // content should exist
+        const content = container.querySelector(".event-popup__content");
+        expect(content).toBeInTheDocument();
+
+        // wait for animation class to be applied
+        await waitFor(() => expect(content).toHaveClass("is-open"));
+
+        // check text content
+        expect(screen.getByText("جلسه هفتگی تست")).toBeInTheDocument();
+        expect(screen.getByText("ساعت ۱۰:۰۰ تا ۱۱:۰۰")).toBeInTheDocument();
+
+        // pressing Escape should call handler
+        fireEvent.keyDown(document, { key: "Escape" });
+        expect(onClose).toHaveBeenCalledTimes(1);
+    });
+});

src/assets/scss/components/_event-popup.scss

@@ -3,6 +3,24 @@
     position: absolute;
     box-sizing: border-box;
 
+    transition:
+        transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
+        opacity 200ms cubic-bezier(0.16, 1, 0.3, 1) !important;
+    transform-origin: top center;
+    will-change: transform, opacity;
+
+    &.is-mounted {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    &.is-closing {
+        opacity: 0;
+        transform: translateY(12px) scale(0.98);
+        transition:
+            transform 280ms cubic-bezier(0.22, 0.9, 0.28, 1),
+            opacity 240ms ease !important;
+    }
+
     .event-popup__arrow {
         position: absolute;
         width: 0;
@@ -12,7 +30,20 @@
         border-bottom: 10px solid var(--bg-color-alt, #fff);
         top: -10px;
         transform-origin: center;
-        filter: drop-shadow(0 6px 12px rgba(16, 24, 40, 0.08));
+        filter: drop-shadow(0 10px 18px rgba(16, 24, 40, 0.08));
+        transform: translateY(8px);
+        opacity: 0;
+        transition:
+            transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+            opacity 180ms ease !important;
+    }
+
+    &.is-closing .event-popup__arrow {
+        transform: translateY(14px);
+        opacity: 0;
+        transition:
+            transform 240ms cubic-bezier(0.22, 0.9, 0.28, 1),
+            opacity 200ms ease !important;
     }
 
     &.event-popup--above {
@@ -21,6 +52,7 @@
             bottom: -10px;
             border-bottom: 0;
             border-top: 10px solid var(--bg-color-alt, #fff);
+            transform-origin: bottom center;
         }
     }
 
@@ -34,14 +66,25 @@
         direction: rtl;
         overflow: hidden;
         border: 1px solid rgba(0, 0, 0, 0.06);
+        transform-origin: inherit;
+        transform: translateY(8px) scale(0.994);
+        opacity: 0;
         transition:
-            transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1),
-            opacity 140ms ease;
-        transform-origin: top center;
+            transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
+            opacity 200ms cubic-bezier(0.16, 1, 0.3, 1),
+            box-shadow 220ms ease !important;
 
         &.is-open {
-            transform: translateY(0);
+            transform: translateY(0) scale(1);
             opacity: 1;
+            box-shadow: 0 18px 48px rgba(16, 24, 40, 0.14);
+        }
+        &:not(.is-open) {
+            transform: translateY(6px) scale(0.985);
+            opacity: 0;
+            transition:
+                transform 280ms cubic-bezier(0.22, 0.9, 0.28, 1),
+                opacity 240ms ease !important;
         }
     }
 
@@ -52,7 +95,6 @@
         gap: 12px;
         margin-bottom: 10px;
     }
-
     .event-popup__subtitle {
         font-size: 12px;
         font-weight: 500;
@@ -67,20 +109,18 @@
     }
 
     .event-popup__header-left {
+        min-width: 0;
         display: flex;
         align-items: center;
         gap: 12px;
-        min-width: 0;
     }
-
     .event-popup__color-dot {
         width: 14px;
         height: 14px;
         border-radius: 50%;
         box-shadow: 0 4px 8px rgba(16, 24, 40, 0.08);
         flex: 0 0 14px;
     }
-
     .event-popup__header-title {
         font-weight: 700;
         font-size: 15px;
@@ -108,11 +148,15 @@
         justify-content: center;
         width: 34px;
         height: 34px;
-        &:hover {
-            background: rgba(0, 0, 0, 0.04);
-            color: rgba(0, 0, 0, 0.85);
-            transform: translateY(-1px);
-        }
+    }
+    .event-popup__close-btn:hover {
+        background: rgba(0, 0, 0, 0.045);
+        color: rgba(0, 0, 0, 0.85);
+        transform: translateY(-2px) scale(1.02);
+    }
+    .event-popup__close-btn:focus {
+        box-shadow: 0 0 0 4px rgba(47, 111, 237, 0.12);
+        outline: none;
     }
 
     .event-popup__row {
@@ -121,7 +165,6 @@
         margin-bottom: 10px;
         align-items: center;
     }
-
     .event-popup__label {
         min-width: 84px;
         color: rgba(0, 0, 0, 0.58);
@@ -130,7 +173,6 @@
         letter-spacing: 0.2px;
         flex: 0 0 auto;
     }
-
     .event-popup__value {
         flex: 1 1 auto;
         word-break: break-word;
@@ -148,7 +190,6 @@
             background 120ms ease,
             transform 80ms ease;
     }
-
     .event-popup__link--primary {
         background: linear-gradient(
             90deg,
@@ -158,7 +199,6 @@
         border: 1px solid rgba(47, 111, 237, 0.1);
         color: var(--link-color, #2f6fed);
     }
-
     .event-popup__link:hover {
         background: rgba(47, 111, 237, 0.06);
         transform: translateY(-1px);
@@ -172,14 +212,12 @@
         align-items: center;
         gap: 12px;
     }
-
     .event-popup__meta {
         display: flex;
         gap: 12px;
         align-items: center;
         color: rgba(0, 0, 0, 0.65);
     }
-
     .event-popup__label.small {
         min-width: 60px;
         font-weight: 600;
@@ -189,13 +227,12 @@
     .event-popup__actions {
         display: flex;
         gap: 8px;
-
-        .ant-btn {
-            padding: 8px 14px;
-            border-radius: 8px;
-            font-weight: 600;
-            box-shadow: none;
-        }
+    }
+    .event-popup__actions .ant-btn {
+        padding: 8px 14px;
+        border-radius: 8px;
+        font-weight: 600;
+        box-shadow: none;
     }
 
     .event-popup__creator {

src/components/EventPopup.jsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import moment from "jalali-moment";
 import CalendarEventCreator from "./CalendarEventCreator";
+import "../assets/scss/components/_event-popup.scss";
 
 const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
     const popupRef = useRef(null);
 
+    const [mounted, setMounted] = useState(visible);
+    const [isOpen, setIsOpen] = useState(false);
+
     const justOpenedRef = useRef(false);
 
     useEffect(() => {
@@ -37,15 +41,28 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
     }, [visible, onClose]);
 
     useEffect(() => {
-        if (!visible) return undefined;
-        justOpenedRef.current = true;
-        const t = setTimeout(() => (justOpenedRef.current = false), 120);
+        if (visible) {
+            setMounted(true);
+
+            const t1 = setTimeout(() => setIsOpen(true), 12);
+
+            justOpenedRef.current = true;
+            const t2 = setTimeout(() => (justOpenedRef.current = false), 140);
+            return () => {
+                clearTimeout(t1);
+                clearTimeout(t2);
+            };
+        }
+
+        setIsOpen(false);
+
+        const t = setTimeout(() => setMounted(false), 300);
         return () => clearTimeout(t);
     }, [visible]);
 
-    if (!visible || !anchorRect) return null;
+    if (!mounted || !anchorRect) return null;
 
-    const defaultWidth = 320;
+    const defaultWidth = Math.min(380, Math.max(300, anchorRect?.width || 320));
     const popupPadding = 12;
 
     let left =
@@ -79,10 +96,14 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
         ? moment(date.toDate()).locale("fa").format("jYYYY/jMM/jDD")
         : "-";
 
+    const transformOrigin = prefersAbove ? "bottom center" : "top center";
+
     return (
         <div
             ref={popupRef}
-            className={`event-popup ${prefersAbove ? "event-popup--above" : ""}`}
+            className={`event-popup ${prefersAbove ? "event-popup--above" : ""} ${
+                isOpen ? "is-mounted" : "is-closing"
+            }`}
             style={{
                 position: "absolute",
                 top: top,
@@ -93,7 +114,11 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
             aria-modal="false"
         >
             <div className="event-popup__arrow" style={{ left: arrowLeft }} />
-            <div className="event-popup__content">
+            <div
+                className={`event-popup__content ${isOpen ? "is-open" : ""}`}
+                style={{ transformOrigin }}
+            >
+                {/* close button removed — using outside click / Escape to close */}
                 <div className="event-popup__header">
                     <div className="event-popup__header-left">
                         {event && (
@@ -162,32 +187,23 @@ const EventPopup = ({ visible, anchorRect, date, event, onClose }) => {
                     </>
                 )}
 
-                {date && event && (
-                    <div className="event-popup__creator">
-                        <CalendarEventCreator
-                            eventDate={date.format("YYYY-MM-DD")}
-                            eventText={event.fullName || event.title}
-                        />
-                    </div>
-                )}
-
                 <div className="event-popup__footer">
                     <div className="event-popup__meta">
                         <div className="event-popup__label small">زمان</div>
                         <div className="event-popup__value small">
-                            ساعت ۱۸:۰۰ تا ۱۹:۰۰
+                            {event?.time || "ساعت ۱۸:۰۰ تا ۱۹:۰۰"}
                         </div>
                     </div>
+                </div>
 
-                    <div className="event-popup__actions">
-                        <button
-                            onClick={onClose}
-                            className="ant-btn ant-btn-primary"
-                        >
-                            بستن
-                        </button>
+                {date && event && (
+                    <div className="event-popup__creator">
+                        <CalendarEventCreator
+                            eventDate={date.format("YYYY-MM-DD")}
+                            eventText={event.fullName || event.title}
+                        />
                     </div>
-                </div>
+                )}
             </div>
         </div>
     );