npm - optimized-react-component-library-xyz123 - Versions diffs - 2.8.3 → 2.8.5 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.d.mts CHANGED Viewed

@@ -849,6 +849,7 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
+    setKeyboardNavigationClose?: () => void;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;

package/dist/index.d.ts CHANGED Viewed

@@ -849,6 +849,7 @@ interface NavigationProps {
     isOpen: boolean;
     openButtonRef: RefObject<HTMLButtonElement | null>;
     linkComponent?: ElementType;
+    setKeyboardNavigationClose?: () => void;
 }
 type Locale = 'sv' | 'en';
 type Label = Record<Locale, string>;

package/dist/index.js CHANGED Viewed

@@ -1507,7 +1507,7 @@ var MenuIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { wid
   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "7", x2: "20.6665", y2: "7", stroke: "#6E3282", strokeWidth: "2" }),
   /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "13", x2: "20.6665", y2: "13", stroke: "#6E3282", strokeWidth: "2" })
 ] });
-var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -1516,7 +1516,7 @@ var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xm
     fill: "white"
   }
 ) });
-var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
   "path",
   {
     fillRule: "evenodd",
@@ -3802,11 +3802,11 @@ var Navigation = ({
   activatedLanguage = "sv",
   menuLinks = [],
   openButtonRef = null,
-  linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props })
+  linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props }),
+  setKeyboardNavigationClose
 }) => {
   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);
@@ -3822,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") {
@@ -3860,80 +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]);
-  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, 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, 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;
@@ -4004,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");
@@ -4018,14 +4024,7 @@ var NavigationHeader = ({
   };
   const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
   const [hasBeenOpen, setHasBeenOpen] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
-    var _a;
-    console.log(navigationCloseFocusId);
-    if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen) {
-      (_a = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _a.focus();
-      console.log(navigationCloseFocusId, document.getElementById(navigationCloseFocusId));
-    }
-  }, [isMenuOpen]);
+  const menuButtonFocusRef = (0, import_react18.useRef)(null);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => {
       const open = !prev;
@@ -4035,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",
@@ -4111,17 +4119,22 @@ var NavigationHeader = ({
         )
       ] }) })
     ] }) }),
-    useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-      NavigationStandard_default,
-      {
-        activatedLanguage,
-        setIsMenyOpen: setIsMenuOpen,
-        menuLinks,
-        isOpen: isMenuOpen,
-        openButtonRef: menuButtonFocusRef,
-        linkComponent: LinkComponent
-      }
-    ),
+    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",
       {
@@ -4293,7 +4306,7 @@ var Collapse = ({
         "aria-controls": contentId,
         children: [
           `${isOpen ? closeLabel : openLabel} ${title}`,
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pts-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandIcon, {}) })
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pts-collapse-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandIcon, {}) })
         ]
       }
     ),