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

package/dist/index.js

@@ -3807,7 +3807,6 @@ var Navigation = ({
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
   const navRef = (0, import_react16.useRef)(null);
-  const firstVisitRef = (0, import_react16.useRef)(true);
   const [openSubMenu, setOpenSubMenu] = (0, import_react16.useState)(null);
   const handleSubMenu = (label) => {
     setOpenSubMenu(openSubMenu === label ? null : label);
@@ -3823,7 +3822,9 @@ var Navigation = ({
     const firstElement = focusableElements[0];
     const lastElement = focusableElements[focusableElements.length - 1];
     if (!firstElement || !lastElement) return;
-    firstElement == null ? void 0 : firstElement.focus();
+    requestAnimationFrame(() => {
+      firstElement.focus();
+    });
     const handleKeyDown = (event) => {
       var _a;
       if (event.key === "Escape") {
@@ -3861,101 +3862,85 @@ var Navigation = ({
     }
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
-  const [instruction, setInstruction] = (0, import_react16.useState)("");
-  (0, import_react16.useEffect)(() => {
-    if (firstVisitRef.current) {
-      firstVisitRef.current = false;
-      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 /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-      "nav",
-      {
-        id: "main-navigation",
-        ref: navRef,
-        "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
-        className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
-        inert: !isOpen,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            "button",
-            {
-              className: "pts-navigation-close-button",
-              onClick: handleCloseButton,
-              type: "button",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
-            "li",
-            {
-              className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
-              lang: activatedLanguage,
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    LinkComponent,
-                    {
-                      onClick: handleCloseButton,
-                      href,
-                      onKeyDown: handleLinkKeyDown,
-                      children: label[activatedLanguage]
-                    }
-                  ) }),
-                  children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                    "button",
-                    {
-                      className: `pts-navigation-link-expand-button`,
-                      onClick: () => handleSubMenu(label[activatedLanguage]),
-                      "aria-label": getSubMenuAriaLabel(label),
-                      "aria-expanded": openSubMenu === label[activatedLanguage],
-                      "aria-controls": "sub-menu-" + index,
-                      type: "button",
-                      id: "menu-button-" + index,
-                      children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddIcon, {}) })
-                    }
-                  )
-                ] }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    "nav",
+    {
+      id: "main-navigation",
+      ref: navRef,
+      "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
+      className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
+      inert: !isOpen,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "button",
+          {
+            className: "pts-navigation-close-button",
+            onClick: handleCloseButton,
+            type: "button",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          "li",
+          {
+            className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
+            lang: activatedLanguage,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                  LinkComponent,
+                  {
+                    onClick: () => {
+                      handleCloseButton();
+                    },
+                    href,
+                    children: label[activatedLanguage]
+                  }
+                ) }),
                 children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                  "div",
+                  "button",
                   {
-                    hidden: openSubMenu !== label[activatedLanguage],
-                    "aria-hidden": openSubMenu !== label[activatedLanguage],
-                    className: "pts-sub-navigation-container",
-                    id: "sub-menu-" + index,
-                    role: "region",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                      LinkComponent,
-                      {
-                        onClick: handleCloseButton,
-                        href: href2,
-                        onKeyDown: handleLinkKeyDown,
-                        children: label2[activatedLanguage]
-                      }
-                    ) }, "nav-child-" + index2)) })
+                    className: `pts-navigation-link-expand-button`,
+                    onClick: () => handleSubMenu(label[activatedLanguage]),
+                    "aria-label": getSubMenuAriaLabel(label),
+                    "aria-expanded": openSubMenu === label[activatedLanguage],
+                    "aria-controls": "sub-menu-" + index,
+                    type: "button",
+                    id: "menu-button-" + index,
+                    children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddIcon, {}) })
                   }
                 )
-              ]
-            },
-            "nav-" + index
-          )) })
-        ]
-      }
-    )
-  ] });
+              ] }) }),
+              children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                "div",
+                {
+                  hidden: openSubMenu !== label[activatedLanguage],
+                  "aria-hidden": openSubMenu !== label[activatedLanguage],
+                  className: "pts-sub-navigation-container",
+                  id: "sub-menu-" + index,
+                  role: "region",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                    LinkComponent,
+                    {
+                      onClick: () => {
+                        handleCloseButton();
+                      },
+                      href: href2,
+                      children: label2[activatedLanguage]
+                    }
+                  ) }, "nav-child-" + index2)) })
+                }
+              )
+            ]
+          },
+          "nav-" + index
+        )) })
+      ]
+    }
+  ) });
 };
 var NavigationStandard_default = Navigation;
 
@@ -4026,7 +4011,6 @@ var NavigationHeader = ({
 }) => {
   const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
   const hasHeadline = headline && headline.length > 0;
-  const menuButtonFocusRef = (0, import_react18.useRef)(null);
   const handleLanguageClick = () => {
     if (activatedLanguage === "sv") {
       SetActivatedLanguage("en");
@@ -4040,14 +4024,7 @@ var NavigationHeader = ({
   };
   const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
   const [hasBeenOpen, setHasBeenOpen] = (0, import_react18.useState)(false);
-  const shouldRestoreFocusRef = (0, import_react18.useRef)(false);
-  (0, import_react18.useEffect)(() => {
-    var _a;
-    if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen && shouldRestoreFocusRef.current) {
-      (_a = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _a.focus();
-      shouldRestoreFocusRef.current = false;
-    }
-  }, [isMenuOpen, navigationCloseFocusId, hasBeenOpen]);
+  const menuButtonFocusRef = (0, import_react18.useRef)(null);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => {
       const open = !prev;
@@ -4057,6 +4034,15 @@ var NavigationHeader = ({
       return open;
     });
   };
+  const [instruction, setInstruction] = (0, import_react18.useState)("");
+  (0, import_react18.useEffect)(() => {
+    if (!hasBeenOpen) {
+      return;
+    }
+    setInstruction(
+      isMenuOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed"
+    );
+  }, [isMenuOpen, activatedLanguage]);
   const getMenuLabel = () => {
     const labels = {
       sv: isMenuOpen ? "St\xE4ng meny" : "Meny",
@@ -4133,20 +4119,22 @@ var NavigationHeader = ({
         )
       ] }) })
     ] }) }),
-    useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      NavigationStandard_default,
-      {
-        activatedLanguage,
-        setIsMenyOpen: setIsMenuOpen,
-        menuLinks,
-        isOpen: isMenuOpen,
-        openButtonRef: menuButtonFocusRef,
-        linkComponent: LinkComponent,
-        setKeyboardNavigationClose: () => {
-          shouldRestoreFocusRef.current = true;
+    useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        NavigationStandard_default,
+        {
+          activatedLanguage,
+          setIsMenyOpen: setIsMenuOpen,
+          menuLinks,
+          isOpen: isMenuOpen,
+          openButtonRef: menuButtonFocusRef,
+          linkComponent: LinkComponent,
+          setKeyboardNavigationClose: () => {
+          }
         }
-      }
-    ),
+      )
+    ] }),
     isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {