@kodiak-finance/orderly-ui-scaffold 2.8.20 → 2.8.21-beta.3

package/dist/index.js

@@ -3658,7 +3658,7 @@ var isExternalUrl = (href) => {
   }
 };
 var NotificationUI = (props) => {
-  const { dataSource, showAnnouncement } = props;
+  const { dataSource, className, showAnnouncement } = props;
   const { routerAdapter } = useScaffoldContext();
   const onItemClick = (url) => {
     if (!url)
@@ -3669,74 +3669,30 @@ var NotificationUI = (props) => {
       target: isExternalUrl(url) ? "_blank" : void 0
     });
   };
-  const notificationRef = React6.useRef(null);
   const len = React6.useMemo(() => dataSource?.length ?? 0, [dataSource]);
-  const onClose = React6.useCallback(() => {
-    if (len === 0) {
-      return;
-    }
-    orderlyUtils.windowGuard(() => {
-      if (notificationRef.current) {
-        const animationendHandler = () => {
-          props.onClose();
-          notificationRef.current.removeEventListener(
-            "transitionend",
-            animationendHandler
-          );
-        };
-        notificationRef.current.addEventListener(
-          "transitionend",
-          animationendHandler
-        );
-        requestAnimationFrame(() => {
-          notificationRef.current.style.transform = "translateY(120%)";
-        });
-      }
-    });
-  }, [props.onClose, len]);
-  React6.useEffect(() => {
-    if (len === 0) {
-      return;
-    }
-    if (showAnnouncement) {
-      orderlyUtils.windowGuard(() => {
-        if (notificationRef.current) {
-          requestAnimationFrame(() => {
-            notificationRef.current.style.transform = "translateY(0)";
-          });
-        }
-      });
-    }
-  }, [showAnnouncement, len]);
   if (len === 0) {
     return null;
   }
+  if (!showAnnouncement) {
+    return null;
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    orderlyUiNotification.AnnouncementBannerUI,
     {
-      ref: notificationRef,
-      "data-state": showAnnouncement ? "open" : "closed",
-      className: orderlyUi.cn(
-        "oui-fixed oui-bottom-[calc(env(safe-area-inset-bottom)+8px)] oui-left-2 oui-z-50 oui-w-[calc(100%_-_16px)] oui-translate-y-[120%] oui-rounded-lg oui-border oui-border-line-6 oui-bg-base-8 md:oui-bottom-10 md:oui-left-auto md:oui-right-3 md:oui-w-[420px]",
-        "oui-transition-all oui-duration-300 oui-ease-in-out",
-        showAnnouncement ? "oui-visible" : "oui-invisible"
-      ),
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        orderlyUiNotification.NotificationUI,
-        {
-          dataSource,
-          onClose,
-          onItemClick
-        }
-      )
+      dataSource,
+      showAnnouncement,
+      onClose: props.onClose,
+      onItemClick,
+      className: orderlyUi.cn("oui-mx-auto", className)
     }
   );
 };
-var NotificationWidget = () => {
+var NotificationWidget = ({ className }) => {
   const { announcementState } = useScaffoldContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
     NotificationUI,
     {
+      className,
       dataSource: announcementState.tips,
       onClose: announcementState.closeTips,
       showAnnouncement: announcementState.showAnnouncement
@@ -3777,6 +3733,7 @@ var MobileScaffold = (props) => {
         classNames?.root
       ),
       children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-mx-1 oui-mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(NotificationWidget, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           "header",
           {
@@ -3833,8 +3790,7 @@ var MobileScaffold = (props) => {
               }
             ) })
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(NotificationWidget, {})
+        )
       ]
     }
   );
@@ -4301,18 +4257,20 @@ var DesktopScaffold = (props) => {
               classNames?.container
             ),
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { px: 2, ref: announcementRef, children: /* @__PURE__ */ jsxRuntime.jsx(
-                exports.RestrictedInfoWidget,
-                {
-                  className: orderlyUi.cn(
-                    "oui-scaffold-restricted-info",
-                    "oui-relative oui-z-[1]",
-                    "oui-mt-2",
-                    "oui-bg-base-9",
-                    "oui-min-w-[994px]"
-                  )
-                }
-              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs(orderlyUi.Box, { px: 2, ref: announcementRef, className: orderlyUi.cn("oui-space-y-2", "oui-mt-2"), children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  exports.RestrictedInfoWidget,
+                  {
+                    className: orderlyUi.cn(
+                      "oui-scaffold-restricted-info",
+                      "oui-relative oui-z-[1]",
+                      "oui-bg-base-9",
+                      "oui-min-w-[994px]"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(NotificationWidget, { className: "oui-mx-auto" })
+              ] }),
               !hasLeftSidebar ? (
                 // ----------No leftSidebar layout start ---------
                 /* @__PURE__ */ jsxRuntime.jsx(orderlyUi.Box, { height: "100%", className: orderlyUi.cn(classNames?.content), children })
@@ -4361,8 +4319,7 @@ var DesktopScaffold = (props) => {
             ),
             children: footer || /* @__PURE__ */ jsxRuntime.jsx(FooterWidget, { ...footerProps })
           }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(NotificationWidget, {})
+        )
       ]
     }
   );