ba-js-common-header 0.0.21 → 0.0.24

package/dist/ba-js-common-header.es.js

@@ -23673,6 +23673,14 @@ function World(props) {
     });
   });
 })(commonThin);
+function useOutsideClickHandler(ref, handleOutsideClick) {
+  useEffect(() => {
+    document.addEventListener("click", handleOutsideClick);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, [ref]);
+}
 function isNotification(notifications) {
   return Array.isArray(notifications) && notifications.length > 0;
 }
@@ -23683,6 +23691,7 @@ function Notifications() {
   const {
     notifications: notificationsConfig
   } = useSelector((state) => state.titleBar);
+  const [showNotifications, setShowNotifications] = useState(false);
   const notifications = useSelector((state) => state.notifications);
   const userLanguage = useSelector((state) => state.userLanguage);
   const {
@@ -23692,6 +23701,10 @@ function Notifications() {
   const styles = useSpring({
     opacity: isMobileOrTablet && isOpen ? 0 : 1
   });
+  const ref = useRef();
+  useOutsideClickHandler(ref, () => {
+    setShowNotifications(false);
+  });
   const dispatch = useDispatch();
   useEffect(() => {
     (async () => {
@@ -23720,12 +23733,16 @@ function Notifications() {
       }) => acc + items.length, 0));
     }
   }, [userLanguage, notifications]);
+  if (!notificationsLang)
+    return null;
   return /* @__PURE__ */ jsx(animated.div, {
     className: cn("col-auto", "pe-lg-0", "order-lg-4", {
       "hd-ringing": !notified
     }),
-    onClick: () => {
+    onClick: (e2) => {
+      e2.stopPropagation();
       setNotified(true);
+      setShowNotifications(!showNotifications);
     },
     id: "hd-notifications",
     style: styles,
@@ -23739,8 +23756,6 @@ function Notifications() {
             className: "btn px-0 py-2 dropdown-toggle",
             type: "button",
             id: "hd-dropdown-notifications",
-            "aria-haspopup": "true",
-            "aria-expanded": "false",
             children: [/* @__PURE__ */ jsx(commonThin.Bell, {
               className: "hd-icon hd-icon-bell"
             }), notificationsCount > 0 && /* @__PURE__ */ jsxs(Fragment, {
@@ -23757,7 +23772,10 @@ function Notifications() {
             })]
           }), /* @__PURE__ */ jsx("ul", {
             className: "dropdown-menu",
-            "aria-labelledby": "hd-dropdown-notifications",
+            style: showNotifications ? {
+              display: "block"
+            } : {},
+            ref,
             children: notificationsLang.map((notification) => {
               const {
                 title,
@@ -26388,9 +26406,11 @@ function UserLanguage(props) {
               onClick: (e2) => {
                 e2.preventDefault();
                 e2.stopPropagation();
-                dispatch(setUserLanguage(code));
-                if (typeof handleLanguageChange === "function") {
-                  handleLanguageChange(code);
+                if (code !== selectedLanguage) {
+                  dispatch(setUserLanguage(code));
+                  if (typeof handleLanguageChange === "function") {
+                    handleLanguageChange(code);
+                  }
                 }
                 dispatch(removeSubMenu(label));
               },
@@ -26873,18 +26893,12 @@ function Header(props) {
     if (userLanguage) {
       dispatch(setUserLanguage(userLanguage));
     }
-  }, []);
-  useEffect(() => {
     if (hotelInfo) {
       dispatch(setHotelInfo(hotelInfo));
     }
-  }, []);
-  useEffect(() => {
     if (userInfo) {
       dispatch(setUserInfo(userInfo));
     }
-  }, []);
-  useEffect(() => {
     if (i18nFeed) {
       dispatch(setI18nFeed(i18nFeed));
     }
@@ -26920,7 +26934,7 @@ function Header(props) {
       headerRef.current.scrollTop = 0;
     }
   }, [subMenus.length]);
-  return /* @__PURE__ */ jsxs(Fragment, {
+  return /* @__PURE__ */ jsxs("div", {
     children: [/* @__PURE__ */ jsxs("div", {
       ref: headerRef,
       id: "hd-container",