@axos-web-dev/shared-components 0.0.145 → 0.0.147

package/dist/NavigationMenu/AxosBank/SubNavBar.js

@@ -8,7 +8,7 @@ import "../../icons/CheckIcon/CheckIcon.css.js";
 /* empty css                                      */
 /* empty css                                                       */
 /* empty css                                                   */
-import { useState, useEffect } from "react";
+import { useState, useRef, useEffect } from "react";
 import "../../Chevron/Chevron.css.js";
 import "../../AlertBanner/AlertBanner.css.js";
 import "../../Article/Article.css.js";
@@ -96,16 +96,17 @@ import "../../StepItemSet/StepItemSet.css.js";
 import "next/script.js";
 /* empty css                                           */
 /* empty css                                                 */
+import { usePathname } from "next/navigation.js";
 import Image from "next/image.js";
 import Link from "next/link.js";
-import { usePathname } from "next/navigation.js";
 import { sub_nav, dd_media } from "./SubNavbar.css.js";
 function SubNavBar() {
   const pathname = usePathname();
   const [hoveredLink, setHoveredLink] = useState(void 0);
   const handleMouseEnter = (link) => setHoveredLink(link);
   const handleMouseLeave = () => setHoveredLink(void 0);
-  const hideOnClick = () => setHoveredLink(void 0);
+  const containerRef = useRef(null);
+  const [isClient, setIsClient] = useState(false);
   const [showNavbar, setShowNavbar] = useState(false);
   const support = subNavItems.support;
   const about = subNavItems.about;
@@ -127,6 +128,31 @@ function SubNavBar() {
       ].some((el) => pathname?.includes(el) || isHomepage)
     );
   }, [pathname]);
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+  useEffect(() => {
+    if (hoveredLink && containerRef.current && isClient) {
+      containerRef.current.focus();
+    }
+  }, [hoveredLink, isClient]);
+  const handleKeyDownContainer = (e, linkId) => {
+    if (e.key === "Tab") {
+      const focusableElements = containerRef.current?.querySelectorAll(
+        'button, [href], a, [tabindex]:not([tabindex="-1"])'
+      );
+      if (focusableElements && isClient) {
+        const lastElement = focusableElements[focusableElements.length - 1];
+        const isShiftPressed = e.shiftKey;
+        if (!isShiftPressed && document.activeElement === lastElement) {
+          e.preventDefault();
+          const triggeredLink = document.getElementById(linkId);
+          setHoveredLink(void 0);
+          triggeredLink?.focus();
+        }
+      }
+    }
+  };
   return showNavbar ? /* @__PURE__ */ jsx("div", { className: `${styles.sub_nav} ${sub_nav} ${styles.desktop_only}`, children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsx("div", { className: styles.header_sub_row, children: /* @__PURE__ */ jsxs("nav", { children: [
     /* @__PURE__ */ jsxs("ul", { className: "list_unstyled flex_row middle", children: [
       (isHomepage || pathname?.includes("/personal") || pathname?.includes("/invest/insights")) && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -137,7 +163,11 @@ function SubNavBar() {
             id: "personalNav1",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("bank"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("bank");
+              }
+            },
             children: [
               "Bank",
               /* @__PURE__ */ jsx(
@@ -168,7 +198,11 @@ function SubNavBar() {
             id: "personalNav2",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("borrow"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("borrow");
+              }
+            },
             children: [
               "Borrow",
               /* @__PURE__ */ jsx(
@@ -199,7 +233,11 @@ function SubNavBar() {
             id: "personalNav3",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("invest"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("invest");
+              }
+            },
             children: [
               "Invest",
               /* @__PURE__ */ jsx(
@@ -230,7 +268,11 @@ function SubNavBar() {
             id: "personalNav4",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("plan"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("plan");
+              }
+            },
             children: [
               "Plan",
               /* @__PURE__ */ jsx(
@@ -263,7 +305,11 @@ function SubNavBar() {
             id: "busNav1",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("sbb"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("sbb");
+              }
+            },
             children: [
               "Small Business Banking",
               /* @__PURE__ */ jsx(
@@ -294,7 +340,11 @@ function SubNavBar() {
             id: "busNav2",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("combank"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("combank");
+              }
+            },
             children: [
               "Commercial Banking",
               /* @__PURE__ */ jsx(
@@ -325,7 +375,11 @@ function SubNavBar() {
             id: "busNav3",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("comlending"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("comlending");
+              }
+            },
             children: [
               "Commercial Lending",
               /* @__PURE__ */ jsx(
@@ -368,7 +422,11 @@ function SubNavBar() {
             id: "partNav2",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("wholelending"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("wholelending");
+              }
+            },
             children: [
               "Wholesale Lending",
               /* @__PURE__ */ jsx(
@@ -399,7 +457,11 @@ function SubNavBar() {
             id: "partNav3",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("sbc"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("sbc");
+              }
+            },
             children: [
               "Small Balance Commercial",
               /* @__PURE__ */ jsx(
@@ -440,7 +502,11 @@ function SubNavBar() {
             id: "partNav5",
             role: "menuitem",
             onMouseEnter: () => handleMouseEnter("dealerservices"),
-            onClick: hideOnClick,
+            onKeyDown: (event) => {
+              if (event.key === "Enter") {
+                handleMouseEnter("dealerservices");
+              }
+            },
             children: [
               "Dealer Services",
               /* @__PURE__ */ jsx(
@@ -488,6 +554,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "personalNav2"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -495,8 +564,8 @@ function SubNavBar() {
                 className: `${styles.dd_media} ${styles.opacity} ${dd_media} w_auto text_center`,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: styles.dd_media_header, children: [
-                    /* @__PURE__ */ jsx("p", { role: "heading", children: "Checking" }),
-                    /* @__PURE__ */ jsx("p", { className: styles.mt_8, children: "Explore the benefits of our newest account bundle with up to 4.53% APY on Savings, 0.51% on Checking, plus early paydays and no monthly fees." })
+                    /* @__PURE__ */ jsx("p", { role: "heading", children: "Introducing Axos ONE" }),
+                    /* @__PURE__ */ jsx("p", { className: styles.mt_8, children: "Explore the benefits of our newest account bundle with up to 4.86% APY on Savings, 0.51% on Checking, plus early paydays and no monthly fees." })
                   ] }),
                   /* @__PURE__ */ jsx(
                     "div",
@@ -505,10 +574,10 @@ function SubNavBar() {
                       children: /* @__PURE__ */ jsx(
                         Image,
                         {
-                          src: `https://images.axos.com/o9ov1v03uwqk/eEwgc8g9ws7oWWUTh2G8X/de2e3ede3ca7c3762e052d9cba375de7/nav-submenu-bank.svg`,
+                          src: `https://images.axos.com/o9ov1v03uwqk/4dO1rYpd0H4ONDtLWCw5ze/2a843450436d41d18d91d6b97a7501bb/axos-one-nav.png`,
                           alt: "",
                           width: 233,
-                          height: 222
+                          height: 233
                         }
                       )
                     }
@@ -837,6 +906,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "personalNav3"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -1204,6 +1276,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "personalNav4"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -1474,6 +1549,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "personalNav4"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -1702,7 +1780,7 @@ function SubNavBar() {
                             href: findMoreAxosDomains(
                               "{AXOS}/invest/insights/investing-evolved"
                             ),
-                            children: "Investing Podcase"
+                            children: "Investing Podcast"
                           }
                         ) })
                       ] })
@@ -1720,6 +1798,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "busNav2"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -1989,6 +2070,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "busNav3"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -2217,6 +2301,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "busNav3"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -2427,6 +2514,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "partNav3"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -2557,6 +2647,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "partNav4"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",
@@ -2700,6 +2793,9 @@ function SubNavBar() {
           className: `${styles.dd_wrapper} ${styles.desktop_only} `,
           role: "menu",
           onMouseLeave: handleMouseLeave,
+          ref: containerRef,
+          tabIndex: 0,
+          onKeyDown: (event) => handleKeyDownContainer(event, "partNav6"),
           children: /* @__PURE__ */ jsx("div", { className: styles.wrapper, children: /* @__PURE__ */ jsxs("div", { className: `${styles.shadow} rounded flex_row`, children: [
             /* @__PURE__ */ jsxs(
               "div",