optimized-react-component-library-xyz123 2.8.2 → 2.8.4

package/dist/index.mjs

@@ -1421,7 +1421,7 @@ var MenuIcon = () => /* @__PURE__ */ jsxs13("svg", { width: "15", height: "15",
   /* @__PURE__ */ jsx16("line", { x1: "0.666504", y1: "7", x2: "20.6665", y2: "7", stroke: "#6E3282", strokeWidth: "2" }),
   /* @__PURE__ */ jsx16("line", { x1: "0.666504", y1: "13", x2: "20.6665", y2: "13", stroke: "#6E3282", strokeWidth: "2" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx16(
+var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx16(
   "path",
   {
     fillRule: "evenodd",
@@ -1430,7 +1430,7 @@ var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/
     fill: "white"
   }
 ) });
-var CollapseIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx16(
+var CollapseIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx16(
   "path",
   {
     fillRule: "evenodd",
@@ -3719,7 +3719,8 @@ var Navigation = ({
   activatedLanguage = "sv",
   menuLinks = [],
   openButtonRef = null,
-  linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx28("a", { ...props })
+  linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx28("a", { ...props }),
+  setKeyboardNavigationClose
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
   const navRef = useRef3(null);
@@ -3777,15 +3778,23 @@ var Navigation = ({
     }
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
-  const setInstruction = () => {
+  const [instruction, setInstruction] = useState9("");
+  useEffect13(() => {
     if (firstVisitRef.current) {
       firstVisitRef.current = false;
-      return "";
+      return;
+    }
+    setInstruction(
+      isOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed"
+    );
+  }, [isOpen, activatedLanguage]);
+  const handleLinkKeyDown = (event) => {
+    if (event.key === "Enter") {
+      setKeyboardNavigationClose == null ? void 0 : setKeyboardNavigationClose();
     }
-    return isOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed";
   };
   return /* @__PURE__ */ jsxs24(Fragment18, { children: [
-    /* @__PURE__ */ jsx28("div", { "aria-live": "polite", className: "sr-only", children: setInstruction() }),
+    /* @__PURE__ */ jsx28("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
     /* @__PURE__ */ jsxs24(
       "nav",
       {
@@ -3814,7 +3823,15 @@ var Navigation = ({
               lang: activatedLanguage,
               children: [
                 /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
-                  /* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(LinkComponent, { onClick: handleCloseButton, href, children: label[activatedLanguage] }) }),
+                  /* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(
+                    LinkComponent,
+                    {
+                      onClick: handleCloseButton,
+                      href,
+                      onKeyDown: handleLinkKeyDown,
+                      children: label[activatedLanguage]
+                    }
+                  ) }),
                   children && /* @__PURE__ */ jsx28(
                     "button",
                     {
@@ -3837,7 +3854,15 @@ var Navigation = ({
                     className: "pts-sub-navigation-container",
                     id: "sub-menu-" + index,
                     role: "region",
-                    children: /* @__PURE__ */ jsx28("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ jsx28("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ jsx28(LinkComponent, { onClick: handleCloseButton, href: href2, children: label2[activatedLanguage] }) }, "nav-child-" + index2)) })
+                    children: /* @__PURE__ */ jsx28("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ jsx28("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ jsx28(
+                      LinkComponent,
+                      {
+                        onClick: handleCloseButton,
+                        href: href2,
+                        onKeyDown: handleLinkKeyDown,
+                        children: label2[activatedLanguage]
+                      }
+                    ) }, "nav-child-" + index2)) })
                   }
                 )
               ]
@@ -3932,14 +3957,14 @@ var NavigationHeader = ({
   };
   const [isMenuOpen, setIsMenuOpen] = useState11(false);
   const [hasBeenOpen, setHasBeenOpen] = useState11(false);
+  const shouldRestoreFocusRef = useRef4(false);
   useEffect14(() => {
     var _a;
-    console.log(navigationCloseFocusId);
-    if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen) {
+    if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen && shouldRestoreFocusRef.current) {
       (_a = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _a.focus();
-      console.log(navigationCloseFocusId, document.getElementById(navigationCloseFocusId));
+      shouldRestoreFocusRef.current = false;
     }
-  }, [isMenuOpen]);
+  }, [isMenuOpen, navigationCloseFocusId, hasBeenOpen]);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => {
       const open = !prev;
@@ -4033,7 +4058,10 @@ var NavigationHeader = ({
         menuLinks,
         isOpen: isMenuOpen,
         openButtonRef: menuButtonFocusRef,
-        linkComponent: LinkComponent
+        linkComponent: LinkComponent,
+        setKeyboardNavigationClose: () => {
+          shouldRestoreFocusRef.current = true;
+        }
       }
     ),
     isMenuOpen && /* @__PURE__ */ jsx31(
@@ -4207,7 +4235,7 @@ var Collapse = ({
         "aria-controls": contentId,
         children: [
           `${isOpen ? closeLabel : openLabel} ${title}`,
-          /* @__PURE__ */ jsx36("span", { className: "pts-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx36(CollapseIcon, {}) : /* @__PURE__ */ jsx36(ExpandIcon, {}) })
+          /* @__PURE__ */ jsx36("span", { className: "pts-collapse-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx36(CollapseIcon, {}) : /* @__PURE__ */ jsx36(ExpandIcon, {}) })
         ]
       }
     ),