optimized-react-component-library-xyz123 1.1.26 → 1.1.27

package/dist/index.d.mts

@@ -800,7 +800,6 @@ interface NavigationHeaderProps {
     useNavigationMenu: boolean;
     useSearch?: boolean;
     useBreadCrumbs?: boolean;
-    showNavigationCloseButton?: boolean;
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
     noLogoLink?: boolean;
@@ -810,7 +809,6 @@ declare const NavigationHeader: FC<NavigationHeaderProps>;
 
 interface NavigationProps {
     setIsMenyOpen?: (open: boolean) => void;
-    showCloseButton?: boolean;
     activatedLanguage?: string;
     menuLinks?: INavigationLink[];
     isOpen: boolean;
@@ -879,6 +877,7 @@ interface CollapseProps {
     onToggle?: (open: boolean) => void;
     id?: string;
     activatedLanguage?: string;
+    customClass?: string;
 }
 
 declare const Collapse: FC<CollapseProps>;

package/dist/index.d.ts

@@ -800,7 +800,6 @@ interface NavigationHeaderProps {
     useNavigationMenu: boolean;
     useSearch?: boolean;
     useBreadCrumbs?: boolean;
-    showNavigationCloseButton?: boolean;
     menuLinks: INavigationItem[];
     linkComponent?: ElementType;
     noLogoLink?: boolean;
@@ -810,7 +809,6 @@ declare const NavigationHeader: FC<NavigationHeaderProps>;
 
 interface NavigationProps {
     setIsMenyOpen?: (open: boolean) => void;
-    showCloseButton?: boolean;
     activatedLanguage?: string;
     menuLinks?: INavigationLink[];
     isOpen: boolean;
@@ -879,6 +877,7 @@ interface CollapseProps {
     onToggle?: (open: boolean) => void;
     id?: string;
     activatedLanguage?: string;
+    customClass?: string;
 }
 
 declare const Collapse: FC<CollapseProps>;

package/dist/index.js

@@ -3298,11 +3298,11 @@ var Navigation = ({
   isOpen = false,
   activatedLanguage = "sv",
   menuLinks = [],
-  showCloseButton = true,
   openButtonRef = null,
   linkComponent: LinkComponent = "a"
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
+  const navRef = (0, import_react13.useRef)(null);
   const [openSubMenu, setOpenSubMenu] = (0, import_react13.useState)(null);
   const handleSubMenu = (label) => {
     setOpenSubMenu(openSubMenu === label ? null : label);
@@ -3311,33 +3311,38 @@ var Navigation = ({
     setIsMenyOpen && setIsMenyOpen(false);
   };
   (0, import_react13.useEffect)(() => {
-    if (!isOpen) return;
+    if (!isOpen || !navRef.current) return;
+    const nav = navRef.current;
+    const focusableSelectors = 'a, button, input, textarea, select, [tabindex]:not([tabindex="-1"])';
+    const focusableElements = nav.querySelectorAll(focusableSelectors);
+    const firstElement = focusableElements[0];
+    const lastElement = focusableElements[focusableElements.length - 1];
+    firstElement == null ? void 0 : firstElement.focus();
     const handleKeyDown = (event) => {
       var _a;
       if (event.key === "Escape") {
         setIsMenyOpen == null ? void 0 : setIsMenyOpen(false);
-        openButtonRef && ((_a = openButtonRef.current) == null ? void 0 : _a.focus());
+        (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus();
+        return;
+      }
+      if (event.key !== "Tab") return;
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement == null ? void 0 : lastElement.focus();
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement == null ? void 0 : firstElement.focus();
+        }
       }
     };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [isOpen, setIsMenyOpen]);
-  (0, import_react13.useEffect)(() => {
-    const main = document.querySelector("main");
-    const footer = document.querySelector("footer");
-    if (!main) return;
-    if (isOpen) {
-      main.setAttribute("inert", "");
-      footer && footer.setAttribute("inert", "");
-    } else {
-      main.removeAttribute("inert");
-      footer && footer.removeAttribute("inert");
-    }
+    nav.addEventListener("keydown", handleKeyDown);
     return () => {
-      main.removeAttribute("inert");
-      footer && footer.removeAttribute("inert");
+      nav.removeEventListener("keydown", handleKeyDown);
     };
-  }, [isOpen]);
+  }, [isOpen, setIsMenyOpen, openButtonRef]);
   const getSubMenuAriaLabel = (label) => {
     if (activatedLanguage === "en" && openSubMenu === label[activatedLanguage]) {
       return "Close submenu for " + label[activatedLanguage];
@@ -3356,11 +3361,12 @@ var Navigation = ({
       "nav",
       {
         id: "main-navigation",
+        ref: navRef,
         "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
-        className: `${showCloseButton ? "pts-navigation-with-close-button" : ""} pts-navigation-menu-container`,
+        className: " pts-navigation-menu-container",
         hidden: !isOpen,
         children: [
-          showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pts-navigation-close-container", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
             "button",
             {
               className: "pts-navigation-close-button",
@@ -3378,7 +3384,7 @@ var Navigation = ({
               className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "pts-navigation-button", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, to: href, href, children: label[activatedLanguage] }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(LinkComponent, { onClick: handleCloseButton, href, to: href, children: label[activatedLanguage] }) }),
                   children && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
@@ -3504,13 +3510,13 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var NavigationHeader = ({
   headline = void 0,
   homelink = "",
+  //?? 
   activatedLanguage = "sv",
   useLanguage = false,
   useNavigationMenu = true,
   useSearch = false,
   useBreadCrumbs = false,
   menuLinks = void 0,
-  showNavigationCloseButton = false,
   SetActivatedLanguage = () => {
   },
   linkComponent: LinkComponent = "a",
@@ -3602,8 +3608,6 @@ var NavigationHeader = ({
             onClick: handleMenuClick,
             "aria-expanded": isMenuOpen,
             "aria-controls": "main-navigation",
-            role: "dialog",
-            "aria-modal": "true",
             ref: menuButtonFocusRef,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { "aria-hidden": "true", className: isMenuOpen ? "pts-close-icon" : "pts-open-icon", children: getMenuIcon() }),
@@ -3619,21 +3623,11 @@ var NavigationHeader = ({
         activatedLanguage,
         setIsMenyOpen: setIsMenuOpen,
         menuLinks,
-        showCloseButton: showNavigationCloseButton != null ? showNavigationCloseButton : true,
         isOpen: isMenuOpen,
         openButtonRef: menuButtonFocusRef,
         linkComponent: LinkComponent
       }
     ),
-    isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-      "div",
-      {
-        className: "pts-navigation-overlay",
-        onClick: () => setIsMenuOpen(false),
-        "aria-hidden": "true",
-        tabIndex: -1
-      }
-    ),
     !isMenuOpen && isSearchOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SearchBarStandard_default, { activatedLanguage }),
     !isMenuOpen && !isSearchOpen && useBreadCrumbs && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(BreadCrumbsStandard_default, { activatedLanguage })
   ] });
@@ -3769,7 +3763,8 @@ var Collapse = ({
   children,
   defaultOpen = false,
   id,
-  activatedLanguage = "sv"
+  activatedLanguage = "sv",
+  customClass = ""
 }) => {
   const [isOpen, setIsOpen] = (0, import_react19.useState)(defaultOpen);
   const uniqueId = id != null ? id : (0, import_react19.useId)();
@@ -3801,7 +3796,7 @@ var Collapse = ({
         "aria-labelledby": buttonId,
         "aria-hidden": !isOpen,
         role: "region",
-        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pts-collapse-content", children })
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: `pts-collapse-content ${customClass}`, children })
       }
     )
   ] }, uniqueId);