@dnanpm/ui-components 0.6.0 → 0.7.0

package/dist/components/MainNavigation/MainNavigation.js

@@ -0,0 +1,1110 @@
+import { jsxs, jsx, Fragment as Fragment$1 } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect, Fragment } from "react";
+import { Globe, Search, Cart, Close, Menu, ChevronRight, Open, ArrowRight } from "@dnanpm/icons";
+import focusStyles from "../../styles/utils/focus.module.css.js";
+import overlayStyles from "../../styles/utils/overlay.module.css.js";
+import elevationStyles from "../../styles/utils/elevation.module.css.js";
+import textDecorationStyles from "../../styles/utils/text-decoration.module.css.js";
+import styles from "./MainNavigation.module.css.js";
+import { assignRef, isMobileViewportByEnvironment, isMobileIosDeviceByEnvironment, isDesktopViewportByEnvironment, getLinkTarget, getLinkRel, toNavigableHref, isExternalLink, isItemInCurrentPath, isExternalTarget, isLinkInCurrentPage } from "./MainNavigation.utils.js";
+import { cn } from "../../utils/cn/cn.js";
+import { Button } from "../Button/Button.js";
+import { IconButton } from "../IconButton/IconButton.js";
+const defaultOrganizations = [];
+const defaultItems = [];
+const defaultLogoSvg = '<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_6509_143)"><g clip-path="url(#clip1_6509_143)"><rect width="40" height="40" fill="white"/><path fill-rule="evenodd" clip-rule="evenodd" d="M-0.0314789 40V0H40.0019V40H-0.0314789ZM9.33519 27.05C11.6685 27.05 13.5685 25.15 13.5685 22.7667V17.1667C13.5685 14.7833 11.6685 12.8833 9.33519 12.8833H5.10186V27.05H9.33519ZM21.6352 27.05H24.1685V17.1167C24.1685 14.7833 22.2685 12.8833 19.9352 12.8833H15.7019V27.05H18.1852V15.4167H19.9352C20.9019 15.4167 21.6352 16.15 21.6352 17.1167V27.05ZM32.4019 27.05H34.9352V17.05C34.9352 14.7167 33.0352 12.8167 30.7019 12.8167H30.6519C28.3185 12.8167 26.4185 14.7167 26.4185 17.05V27.0667H28.9519V22H32.4019V27.05ZM30.65 15.3333H30.7C31.6167 15.3333 32.4 16.1 32.4 17.0333V19.6167H28.95V17.0333C28.95 16.1167 29.6833 15.3333 30.65 15.3333ZM7.56667 15.4333H9.36667C10.3 15.4333 11.0833 16.15 11.0667 17.1333V22.8333C11.0667 23.75 10.3 24.5333 9.36667 24.5333H7.56667V15.4333Z" fill="#FF007D"/></g></g><defs><clipPath id="clip0_6509_143"><rect width="40" height="40" fill="white"/></clipPath><clipPath id="clip1_6509_143"><rect width="40" height="40" fill="white"/></clipPath></defs></svg>';
+const defaultLogoSrc = `data:image/svg+xml,${encodeURIComponent(defaultLogoSvg)}`;
+const mobilePanelAnimationDurationMs = 200;
+const mobileBodyScrollLockClass = "dds-un-scrollable";
+const defaultOverflowCategoryLabel = "Muut kategoriat";
+const desktopMinWidthMediaQuery = "(min-width: 1024px)";
+const defaultRenderLink = (props) => /* @__PURE__ */ jsx("a", { ...props });
+const MainNavigation = ({
+  organizations = defaultOrganizations,
+  items = defaultItems,
+  loginHref = "#",
+  loginLabel = "Kirjaudu",
+  logoHref = "/",
+  languageSelectorLabel = "FI",
+  searchLabel = "Haku",
+  cartLabel = "Ostoskori",
+  showLanguageSelector = false,
+  showSearch = false,
+  showCart = false,
+  cartCounter,
+  cartCounterLabel = "tuotetta ostoskorissa",
+  onLanguageSelectorClick,
+  onSearchClick,
+  onCartClick,
+  mobileMenuOpenAriaLabel = "Avaa valikko",
+  mobileMenuCloseAriaLabel = "Sulje valikko",
+  organizationStripAriaLabel = "Sivustot",
+  logoAriaLabel = "Siirry etusivulle",
+  mobilePrimaryNavigationAriaLabel = "Päävalikko",
+  externalLinkAriaLabel = "avautuu uuteen välilehteen",
+  defaultMobileMenuOpen = false,
+  defaultOpenItemIndex = null,
+  currentPathname,
+  overflowCategoryLabel = defaultOverflowCategoryLabel,
+  onMobileMenuToggle,
+  onDesktopItemToggle,
+  renderLink = defaultRenderLink,
+  className,
+  "aria-label": ariaLabel = "Päänavigaatio",
+  ref,
+  ...props
+}) => {
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(defaultMobileMenuOpen);
+  const [isMobileMenuClosing, setIsMobileMenuClosing] = useState(false);
+  const [openTopLevelItemIndex, setOpenTopLevelItemIndex] = useState(
+    defaultOpenItemIndex
+  );
+  const [isDesktopHeaderOpen, setIsDesktopHeaderOpen] = useState(true);
+  const [mobileActiveCategoryIndex, setMobileActiveCategoryIndex] = useState(null);
+  const [isMobileSecondPanelClosing, setIsMobileSecondPanelClosing] = useState(false);
+  const [isMobileThirdPanelClosing, setIsMobileThirdPanelClosing] = useState(false);
+  const mobileSecondPanelCloseTimeoutRef = useRef(null);
+  const mobileThirdPanelCloseTimeoutRef = useRef(null);
+  const mobileMenuCloseResetTimeoutRef = useRef(null);
+  const focusMobileSecondPanelTimeoutRef = useRef(null);
+  const focusMobileThirdPanelTimeoutRef = useRef(null);
+  const focusReturnToMobileTopLevelItemTimeoutRef = useRef(
+    null
+  );
+  const resetMobileThirdPanelScrollTimeoutRef = useRef(
+    null
+  );
+  const headerElementRef = useRef(null);
+  const desktopPanelTriggerButtonRefs = useRef([]);
+  const mobilePrimaryNavRef = useRef(null);
+  const mobileMenuToggleButtonRef = useRef(null);
+  const mobileModalPanelRef = useRef(null);
+  const mobileThirdPanelRef = useRef(null);
+  const mobilePanelBackButtonRef = useRef(null);
+  const mobileThirdPanelBackButtonRef = useRef(null);
+  const mobileLevelTwoCategoryButtonRefs = useRef([]);
+  const focusMobilePanelBackOnOpenRef = useRef(false);
+  const focusMobileThirdPanelBackOnOpenRef = useRef(false);
+  const focusReturnToMobileCategoryTimeoutRef = useRef(
+    null
+  );
+  const setHeaderRef = useCallback(
+    (node) => {
+      headerElementRef.current = node;
+      assignRef(ref, node);
+    },
+    [ref]
+  );
+  useEffect(() => {
+    return () => {
+      if (mobileSecondPanelCloseTimeoutRef.current != null) {
+        clearTimeout(mobileSecondPanelCloseTimeoutRef.current);
+      }
+      if (mobileThirdPanelCloseTimeoutRef.current != null) {
+        clearTimeout(mobileThirdPanelCloseTimeoutRef.current);
+      }
+      if (focusMobileSecondPanelTimeoutRef.current != null) {
+        clearTimeout(focusMobileSecondPanelTimeoutRef.current);
+      }
+      if (focusMobileThirdPanelTimeoutRef.current != null) {
+        clearTimeout(focusMobileThirdPanelTimeoutRef.current);
+      }
+      clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
+      if (resetMobileThirdPanelScrollTimeoutRef.current != null) {
+        clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current);
+      }
+      if (mobileMenuCloseResetTimeoutRef.current != null) {
+        clearTimeout(mobileMenuCloseResetTimeoutRef.current);
+      }
+      if (focusReturnToMobileCategoryTimeoutRef.current != null) {
+        clearTimeout(focusReturnToMobileCategoryTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const headerElement = headerElementRef.current;
+    const desktopQuery = window.matchMedia(desktopMinWidthMediaQuery);
+    let previousScrollY = window.pageYOffset;
+    let headerHeight = parseFloat(window.getComputedStyle(headerElement).height.replace("px", "")) || headerElement.offsetHeight;
+    const openHeader = () => {
+      setIsDesktopHeaderOpen(true);
+    };
+    const closeHeader = () => {
+      setIsDesktopHeaderOpen(false);
+    };
+    const handleScroll = () => {
+      const currentScrollY = window.pageYOffset;
+      if (!desktopQuery.matches) {
+        openHeader();
+        previousScrollY = currentScrollY;
+        return;
+      }
+      if (mobileMenuOpen || openTopLevelItemIndex != null) {
+        openHeader();
+        previousScrollY = currentScrollY;
+        return;
+      }
+      if (currentScrollY <= headerHeight) {
+        openHeader();
+      } else if (currentScrollY > previousScrollY) {
+        closeHeader();
+      } else if (currentScrollY < previousScrollY) {
+        openHeader();
+      }
+      previousScrollY = currentScrollY;
+    };
+    const handleViewportChange = () => {
+      openHeader();
+      previousScrollY = window.pageYOffset;
+      headerHeight = parseFloat(window.getComputedStyle(headerElement).height.replace("px", "")) || headerElement.offsetHeight;
+    };
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    window.addEventListener("resize", handleViewportChange);
+    desktopQuery.addEventListener("change", handleViewportChange);
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+      window.removeEventListener("resize", handleViewportChange);
+      desktopQuery.removeEventListener("change", handleViewportChange);
+    };
+  }, [mobileMenuOpen, openTopLevelItemIndex]);
+  useEffect(() => {
+    const browserWindow = globalThis.window;
+    const browserDocument = globalThis.document;
+    if (!mobileMenuOpen || browserWindow == null || browserDocument == null) {
+      return;
+    }
+    const isMobileViewport = isMobileViewportByEnvironment(browserWindow);
+    if (!isMobileViewport) {
+      return;
+    }
+    const body = browserDocument.body;
+    if (isMobileIosDeviceByEnvironment(browserWindow, globalThis.navigator)) {
+      const scrollY = browserWindow.pageYOffset;
+      body.style.position = "fixed";
+      body.style.top = `-${scrollY}px`;
+      body.style.width = "100%";
+      return () => {
+        const top = body.style.top;
+        body.style.position = "";
+        body.style.top = "";
+        body.style.width = "";
+        if (top !== "") {
+          browserWindow.scrollTo(0, Number.parseInt(top, 10) * -1);
+        }
+      };
+    }
+    body.classList.add(mobileBodyScrollLockClass);
+    return () => {
+      body.classList.remove(mobileBodyScrollLockClass);
+    };
+  }, [mobileMenuOpen]);
+  useEffect(() => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+      return;
+    }
+    const desktopQuery = window.matchMedia(desktopMinWidthMediaQuery);
+    const applyViewportModeChange = ({ matches: isDesktopViewport2 }) => {
+      if (isDesktopViewport2) {
+        clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
+        mobileSecondPanelCloseTimeoutRef.current = null;
+        clearTimeout(mobileThirdPanelCloseTimeoutRef.current ?? void 0);
+        mobileThirdPanelCloseTimeoutRef.current = null;
+        clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+        resetMobileThirdPanelScrollTimeoutRef.current = null;
+        setMobileMenuOpen((previous) => {
+          if (previous) {
+            onMobileMenuToggle?.(false);
+          }
+          return false;
+        });
+        setMobileActiveCategoryIndex(null);
+        setIsMobileSecondPanelClosing(false);
+        setIsMobileThirdPanelClosing(false);
+        return;
+      }
+      setOpenTopLevelItemIndex((previous) => {
+        if (previous !== null) {
+          onDesktopItemToggle?.(null);
+        }
+        return null;
+      });
+    };
+    applyViewportModeChange(desktopQuery);
+    desktopQuery.addEventListener("change", applyViewportModeChange);
+    return () => {
+      desktopQuery.removeEventListener("change", applyViewportModeChange);
+    };
+  }, [onDesktopItemToggle, onMobileMenuToggle]);
+  const resetMobilePanelState = useCallback(() => {
+    setOpenTopLevelItemIndex(null);
+    setMobileActiveCategoryIndex(null);
+    setIsMobileSecondPanelClosing(false);
+    setIsMobileThirdPanelClosing(false);
+  }, []);
+  const closeMobileMenu = useCallback(() => {
+    clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
+    mobileSecondPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileThirdPanelCloseTimeoutRef.current ?? void 0);
+    mobileThirdPanelCloseTimeoutRef.current = null;
+    clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+    resetMobileThirdPanelScrollTimeoutRef.current = null;
+    if (!mobileMenuOpen && openTopLevelItemIndex === null) {
+      return;
+    }
+    const shouldAnimateMobileClose = mobileMenuOpen;
+    clearTimeout(mobileMenuCloseResetTimeoutRef.current ?? void 0);
+    setIsMobileMenuClosing(shouldAnimateMobileClose);
+    setMobileMenuOpen((previous) => {
+      if (previous) {
+        onMobileMenuToggle?.(false);
+      }
+      return false;
+    });
+    setOpenTopLevelItemIndex((previous) => {
+      if (previous !== null) {
+        onDesktopItemToggle?.(null);
+      }
+      return null;
+    });
+    if (shouldAnimateMobileClose) {
+      mobileMenuCloseResetTimeoutRef.current = setTimeout(() => {
+        resetMobilePanelState();
+        setIsMobileMenuClosing(false);
+        mobileMenuCloseResetTimeoutRef.current = null;
+      }, mobilePanelAnimationDurationMs);
+      return;
+    }
+    resetMobilePanelState();
+    setIsMobileMenuClosing(false);
+  }, [
+    mobileMenuOpen,
+    onDesktopItemToggle,
+    onMobileMenuToggle,
+    openTopLevelItemIndex,
+    resetMobilePanelState
+  ]);
+  const toggleMobileMenu = () => {
+    if (mobileMenuOpen) {
+      closeMobileMenu();
+      return;
+    }
+    setMobileMenuOpen(true);
+    setIsMobileMenuClosing(false);
+    onMobileMenuToggle?.(true);
+  };
+  const toggleTopLevelItem = (index) => {
+    setOpenTopLevelItemIndex((previous) => {
+      const next = previous === index ? null : index;
+      setMobileActiveCategoryIndex(null);
+      setIsMobileSecondPanelClosing(false);
+      setIsMobileThirdPanelClosing(false);
+      onDesktopItemToggle?.(next);
+      return next;
+    });
+  };
+  const isDesktopViewport = useCallback(() => {
+    return isDesktopViewportByEnvironment(globalThis.window);
+  }, []);
+  const isFocusable = useCallback((element) => {
+    if (element.tabIndex < 0 || element.hasAttribute("disabled")) {
+      return false;
+    }
+    if (element.getAttribute("aria-hidden") === "true") {
+      return false;
+    }
+    if (element.closest("[hidden]") != null) {
+      return false;
+    }
+    let currentElement = element;
+    while (currentElement != null) {
+      const computedStyle = window.getComputedStyle(currentElement);
+      if (computedStyle.display === "none" || computedStyle.visibility === "hidden") {
+        return false;
+      }
+      currentElement = currentElement.parentElement;
+    }
+    return true;
+  }, []);
+  const getFocusableElements = useCallback(
+    (container, selector) => (
+      /* v8 ignore next -- defensive null guard for transient panel refs */
+      container == null ? [] : Array.from(container.querySelectorAll(selector)).filter(isFocusable)
+    ),
+    [isFocusable]
+  );
+  const getDesktopPanelInteractiveElements = useCallback(() => {
+    return getFocusableElements(
+      headerElementRef.current,
+      `.${styles["main-navigation__panel--desktop"]} a[href], .${styles["main-navigation__panel--desktop"]} button:not([disabled]), .${styles["main-navigation__panel--desktop"]} [tabindex]:not([tabindex="-1"])`
+    );
+  }, [getFocusableElements]);
+  const getDesktopFocusLoopElements = useCallback(
+    (openDesktopItemIndex) => {
+      const focusLoopElements = /* @__PURE__ */ new Set();
+      const triggerButton = desktopPanelTriggerButtonRefs.current[openDesktopItemIndex];
+      if (triggerButton != null && isFocusable(triggerButton)) {
+        focusLoopElements.add(triggerButton);
+      }
+      getDesktopPanelInteractiveElements().forEach((element) => {
+        focusLoopElements.add(element);
+      });
+      return Array.from(focusLoopElements);
+    },
+    [getDesktopPanelInteractiveElements, isFocusable]
+  );
+  const getMobileFocusableElements = useCallback(() => {
+    const focusableElements = [];
+    const addFocusableElements = (elements) => {
+      focusableElements.push(...elements);
+    };
+    if (mobileMenuToggleButtonRef.current != null && isFocusable(mobileMenuToggleButtonRef.current)) {
+      focusableElements.push(mobileMenuToggleButtonRef.current);
+    }
+    if (openTopLevelItemIndex == null) {
+      addFocusableElements(
+        getFocusableElements(
+          mobilePrimaryNavRef.current,
+          `.${styles["main-navigation__primary-list"]} .${styles["main-navigation__item-toggle"]}, .${styles["main-navigation__primary-list"]} .${styles["main-navigation__item-link"]}`
+        )
+      );
+      return Array.from(new Set(focusableElements));
+    }
+    if (mobileActiveCategoryIndex == null) {
+      addFocusableElements(
+        getFocusableElements(
+          mobileModalPanelRef.current,
+          `.${styles["main-navigation__mobile-back-item"]}, .${styles["main-navigation__mobile-feature-link"]}, .${styles["main-navigation__mobile-level-2-category-button"]}`
+        )
+      );
+      return Array.from(new Set(focusableElements));
+    }
+    addFocusableElements(
+      getFocusableElements(
+        mobileThirdPanelRef.current,
+        `.${styles["main-navigation__mobile-back-item"]}, .${styles["main-navigation__mobile-level-3-link"]}`
+      )
+    );
+    return Array.from(new Set(focusableElements));
+  }, [getFocusableElements, isFocusable, mobileActiveCategoryIndex, openTopLevelItemIndex]);
+  const openMobileCategoryPanel = useCallback((index) => {
+    clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+    setIsMobileThirdPanelClosing(false);
+    setMobileActiveCategoryIndex(index);
+    resetMobileThirdPanelScrollTimeoutRef.current = setTimeout(() => {
+      (mobileThirdPanelRef.current ?? { scrollTop: 0 }).scrollTop = 0;
+      resetMobileThirdPanelScrollTimeoutRef.current = null;
+    }, 0);
+  }, []);
+  const closeMenus = useCallback(() => {
+    clearTimeout(mobileSecondPanelCloseTimeoutRef.current ?? void 0);
+    mobileSecondPanelCloseTimeoutRef.current = null;
+    clearTimeout(mobileThirdPanelCloseTimeoutRef.current ?? void 0);
+    mobileThirdPanelCloseTimeoutRef.current = null;
+    clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
+    focusMobileSecondPanelTimeoutRef.current = null;
+    clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
+    focusMobileThirdPanelTimeoutRef.current = null;
+    clearTimeout(resetMobileThirdPanelScrollTimeoutRef.current ?? void 0);
+    resetMobileThirdPanelScrollTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0);
+    focusReturnToMobileTopLevelItemTimeoutRef.current = null;
+    clearTimeout(focusReturnToMobileCategoryTimeoutRef.current ?? void 0);
+    focusReturnToMobileCategoryTimeoutRef.current = null;
+    closeMobileMenu();
+  }, [closeMobileMenu]);
+  const closeMobilePanel = useCallback(
+    ({
+      isClosing,
+      setIsClosing,
+      closeTimeoutRef,
+      onClosed
+    }) => {
+      if (isClosing) {
+        return;
+      }
+      clearTimeout(closeTimeoutRef.current ?? void 0);
+      setIsClosing(true);
+      closeTimeoutRef.current = setTimeout(() => {
+        onClosed?.();
+        setIsClosing(false);
+        closeTimeoutRef.current = null;
+      }, mobilePanelAnimationDurationMs);
+    },
+    []
+  );
+  const renderNavigationLink = useCallback(
+    ({
+      link,
+      className: className2,
+      children,
+      ariaCurrent,
+      onKeyDown
+    }) => renderLink(
+      {
+        href: toNavigableHref(link.href),
+        className: className2,
+        rel: getLinkRel(link.target),
+        target: getLinkTarget(link.target),
+        "aria-current": ariaCurrent,
+        onKeyDown,
+        children
+      },
+      { external: isExternalLink(link) }
+    ),
+    [renderLink]
+  );
+  const renderUtilityLink = useCallback(
+    (props2) => renderLink(props2, { external: false }),
+    [renderLink]
+  );
+  const openItem = openTopLevelItemIndex != null ? items[openTopLevelItemIndex] : void 0;
+  const openPanel = openItem?.panel;
+  const isMobilePanelClosingOut = isMobileMenuClosing && !mobileMenuOpen;
+  const showPageOverlay = mobileMenuOpen || openPanel != null || isMobilePanelClosingOut;
+  const isOverlayClosingOut = isMobilePanelClosingOut && openPanel == null;
+  const cartAccessibleLabel = cartCounter != null ? `${cartLabel} ${cartCounter} ${cartCounterLabel}` : cartLabel;
+  useEffect(() => {
+    if (!showPageOverlay) {
+      return;
+    }
+    const handleOutsidePointerDown = (event) => {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (headerElementRef.current?.contains(target)) {
+        return;
+      }
+      closeMenus();
+    };
+    document.addEventListener("pointerdown", handleOutsidePointerDown, true);
+    return () => {
+      document.removeEventListener("pointerdown", handleOutsidePointerDown, true);
+    };
+  }, [closeMenus, showPageOverlay]);
+  useEffect(() => {
+    if (!focusMobilePanelBackOnOpenRef.current || openTopLevelItemIndex == null || mobileMenuOpen === false) {
+      return;
+    }
+    if (isDesktopViewport()) {
+      focusMobilePanelBackOnOpenRef.current = false;
+      return;
+    }
+    clearTimeout(focusMobileSecondPanelTimeoutRef.current ?? void 0);
+    focusMobileSecondPanelTimeoutRef.current = setTimeout(() => {
+      mobilePanelBackButtonRef.current?.focus();
+      focusMobilePanelBackOnOpenRef.current = false;
+      focusMobileSecondPanelTimeoutRef.current = null;
+    }, mobilePanelAnimationDurationMs);
+  }, [isDesktopViewport, mobileMenuOpen, openTopLevelItemIndex]);
+  useEffect(() => {
+    if (!focusMobileThirdPanelBackOnOpenRef.current || mobileActiveCategoryIndex == null) {
+      return;
+    }
+    focusMobileThirdPanelBackOnOpenRef.current = focusMobileThirdPanelBackOnOpenRef.current && !isDesktopViewport();
+    if (focusMobileThirdPanelBackOnOpenRef.current) {
+      clearTimeout(focusMobileThirdPanelTimeoutRef.current ?? void 0);
+      focusMobileThirdPanelTimeoutRef.current = setTimeout(() => {
+        mobileThirdPanelBackButtonRef.current?.focus();
+        focusMobileThirdPanelBackOnOpenRef.current = false;
+        focusMobileThirdPanelTimeoutRef.current = null;
+      }, mobilePanelAnimationDurationMs);
+    }
+  }, [isDesktopViewport, mobileActiveCategoryIndex]);
+  useEffect(() => {
+    if (!mobileMenuOpen || openTopLevelItemIndex == null || isDesktopViewport()) {
+      return;
+    }
+    const mobileSecondPanel = mobileModalPanelRef.current;
+    if (mobileSecondPanel == null) {
+      return;
+    }
+    mobileSecondPanel.scrollTop = 0;
+  }, [isDesktopViewport, mobileMenuOpen, openTopLevelItemIndex]);
+  const renderPanel = (panelClassName, isMobileModal = false) => {
+    if (openPanel == null || openItem == null) {
+      return null;
+    }
+    const hasFeatureLinks = openPanel.featureLinks != null && openPanel.featureLinks.length > 0;
+    const panelColumns = openPanel.columns ?? [];
+    const lastDesktopVisibleColumnIndex = panelColumns.reduce((lastIndex, column, index) => {
+      if (column.mobileOnly) {
+        return lastIndex;
+      }
+      return index;
+    }, -1);
+    const mobilePanelColumns = panelColumns.filter((column) => !column.desktopOnly);
+    const getColumnHeading = (heading, isOverflow) => {
+      if (!isOverflow) {
+        return heading;
+      }
+      return heading.trim() === "" ? overflowCategoryLabel : heading;
+    };
+    if (isMobileModal) {
+      const selectedColumn = mobileActiveCategoryIndex != null ? mobilePanelColumns[mobileActiveCategoryIndex] : null;
+      const isLevelThreePanelOpen = selectedColumn != null && !isMobileThirdPanelClosing;
+      const shouldHideLevelTwoFromAssistiveTech = isLevelThreePanelOpen;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: mobileModalPanelRef,
+          className: cn(
+            panelClassName,
+            isMobileSecondPanelClosing && styles["main-navigation__panel--is-closing"]
+          ),
+          "aria-label": openItem.label,
+          "aria-hidden": isMobilePanelClosingOut || void 0,
+          children: /* @__PURE__ */ jsxs("div", { className: styles["main-navigation__mobile-level-2-content"], children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                ref: mobilePanelBackButtonRef,
+                type: "button",
+                className: cn(
+                  styles["main-navigation__mobile-back-item"],
+                  focusStyles.focusableInset,
+                  focusStyles.focusableRadiusSm
+                ),
+                onClick: () => closeMobilePanel({
+                  isClosing: isMobileSecondPanelClosing,
+                  setIsClosing: setIsMobileSecondPanelClosing,
+                  closeTimeoutRef: mobileSecondPanelCloseTimeoutRef,
+                  onClosed: () => {
+                    const closedTopLevelItemIndex = openTopLevelItemIndex;
+                    setOpenTopLevelItemIndex(null);
+                    setMobileActiveCategoryIndex(null);
+                    onDesktopItemToggle?.(null);
+                    clearTimeout(
+                      focusReturnToMobileTopLevelItemTimeoutRef.current ?? void 0
+                    );
+                    focusReturnToMobileTopLevelItemTimeoutRef.current = setTimeout(() => {
+                      desktopPanelTriggerButtonRefs.current[closedTopLevelItemIndex]?.focus();
+                      focusReturnToMobileTopLevelItemTimeoutRef.current = null;
+                    }, 0);
+                  }
+                }),
+                children: [
+                  /* @__PURE__ */ jsx(ChevronRight, { className: styles["main-navigation__mobile-back-icon"] }),
+                  /* @__PURE__ */ jsx("span", { className: styles["main-navigation__mobile-back-label"], children: openItem.label })
+                ]
+              }
+            ),
+            hasFeatureLinks && /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: styles["main-navigation__mobile-level-2-feature-links"],
+                "aria-hidden": shouldHideLevelTwoFromAssistiveTech || void 0,
+                children: /* @__PURE__ */ jsx(
+                  "ul",
+                  {
+                    className: styles["main-navigation__mobile-level-2-feature-list"],
+                    children: openPanel.featureLinks.map((link, index) => {
+                      const href = toNavigableHref(link.href);
+                      const isExternalFeatureLink = isExternalTarget(link.target);
+                      const MobileFeatureIcon = isExternalFeatureLink ? Open : ArrowRight;
+                      return /* @__PURE__ */ jsx(
+                        "li",
+                        {
+                          className: styles["main-navigation__mobile-level-2-feature-list-item"],
+                          children: /* @__PURE__ */ jsxs(
+                            IconButton,
+                            {
+                              href,
+                              renderLink: (linkProps) => renderLink(linkProps, {
+                                external: isExternalLink(link)
+                              }),
+                              className: styles["main-navigation__mobile-feature-link"],
+                              icon: MobileFeatureIcon,
+                              size: "small",
+                              labelBehavior: "wrap",
+                              rel: getLinkRel(link.target),
+                              target: getLinkTarget(link.target),
+                              children: [
+                                link.label,
+                                isExternalFeatureLink && externalLinkAriaLabel && /* @__PURE__ */ jsx(
+                                  "span",
+                                  {
+                                    className: styles["main-navigation__sr-only"],
+                                    children: ` (${externalLinkAriaLabel})`
+                                  }
+                                )
+                              ]
+                            }
+                          )
+                        },
+                        `mobile-feature-${index}`
+                      );
+                    })
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "ul",
+              {
+                className: styles["main-navigation__mobile-level-2-category-list"],
+                "aria-hidden": shouldHideLevelTwoFromAssistiveTech || void 0,
+                children: mobilePanelColumns.map((column, index) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    className: styles["main-navigation__mobile-level-2-category-item"],
+                    children: /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        ref: (node) => {
+                          mobileLevelTwoCategoryButtonRefs.current[index] = node;
+                        },
+                        type: "button",
+                        className: cn(
+                          styles["main-navigation__mobile-level-2-category-button"],
+                          focusStyles.focusableInset,
+                          focusStyles.focusableRadiusSm
+                        ),
+                        onClick: () => openMobileCategoryPanel(index),
+                        onKeyDown: (event) => {
+                          if (event.key !== "Enter" || isDesktopViewport()) {
+                            return;
+                          }
+                          event.preventDefault();
+                          focusMobileThirdPanelBackOnOpenRef.current = true;
+                          openMobileCategoryPanel(index);
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx("span", { children: getColumnHeading(column.heading, column.overflow) }),
+                          /* @__PURE__ */ jsx(ChevronRight, {})
+                        ]
+                      }
+                    )
+                  },
+                  `mobile-category-${column.heading}-${index}`
+                ))
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: mobileThirdPanelRef,
+                className: cn(
+                  styles["main-navigation__mobile-level-3-panel"],
+                  isLevelThreePanelOpen && styles["main-navigation__mobile-level-3-panel--open"],
+                  isMobileThirdPanelClosing && styles["main-navigation__mobile-level-3-panel--is-closing"]
+                ),
+                children: selectedColumn != null && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      ref: mobileThirdPanelBackButtonRef,
+                      type: "button",
+                      className: cn(
+                        styles["main-navigation__mobile-back-item"],
+                        focusStyles.focusableInset,
+                        focusStyles.focusableRadiusSm
+                      ),
+                      onClick: () => closeMobilePanel({
+                        isClosing: isMobileThirdPanelClosing,
+                        setIsClosing: setIsMobileThirdPanelClosing,
+                        closeTimeoutRef: mobileThirdPanelCloseTimeoutRef,
+                        onClosed: () => {
+                          const closedCategoryIndex = mobileActiveCategoryIndex;
+                          setMobileActiveCategoryIndex(null);
+                          clearTimeout(
+                            focusReturnToMobileCategoryTimeoutRef.current ?? void 0
+                          );
+                          focusReturnToMobileCategoryTimeoutRef.current = setTimeout(() => {
+                            mobileLevelTwoCategoryButtonRefs.current[closedCategoryIndex]?.focus();
+                            focusReturnToMobileCategoryTimeoutRef.current = null;
+                          }, 0);
+                        }
+                      }),
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          ChevronRight,
+                          {
+                            className: styles["main-navigation__mobile-back-icon"]
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: styles["main-navigation__mobile-back-label"],
+                            children: selectedColumn.heading
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__mobile-level-3-list"], children: selectedColumn.links.map((link, index) => /* @__PURE__ */ jsx(
+                    "li",
+                    {
+                      className: styles["main-navigation__mobile-level-3-item"],
+                      children: renderNavigationLink({
+                        link,
+                        className: cn(
+                          styles["main-navigation__mobile-level-3-link"],
+                          focusStyles.focusableInset,
+                          focusStyles.focusableRadiusSm
+                        ),
+                        children: link.label
+                      })
+                    },
+                    `${selectedColumn.heading}-${index}`
+                  )) })
+                ] })
+              }
+            )
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("div", { className: panelClassName, "aria-label": openItem.label, children: /* @__PURE__ */ jsxs("div", { className: styles["main-navigation__panel-content"], children: [
+      /* @__PURE__ */ jsx("div", { className: styles["main-navigation__panel-main"], children: /* @__PURE__ */ jsx("div", { className: styles["main-navigation__panel-columns"], children: panelColumns.map((column, columnIndex) => /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: cn(
+            styles["main-navigation__panel-column"],
+            column.highlighted && styles["main-navigation__panel-column--highlighted"],
+            column.mobileOnly && styles["main-navigation__panel-column--mobile-only"],
+            column.desktopOnly && styles["main-navigation__panel-column--desktop-only"],
+            !hasFeatureLinks && columnIndex === lastDesktopVisibleColumnIndex && styles["main-navigation__panel-column--last"]
+          ),
+          children: [
+            /* @__PURE__ */ jsx("h2", { className: styles["main-navigation__panel-heading"], children: getColumnHeading(column.heading, column.overflow) }),
+            /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__panel-list"], children: column.links.map((link, index) => {
+              const isInCurrentPage = isLinkInCurrentPage(
+                link,
+                currentPathname
+              );
+              return /* @__PURE__ */ jsx(
+                "li",
+                {
+                  className: styles["main-navigation__panel-list-item"],
+                  children: renderNavigationLink({
+                    link,
+                    className: cn(
+                      styles["main-navigation__panel-link"],
+                      focusStyles.focusableInset,
+                      focusStyles.focusableRadiusSm,
+                      textDecorationStyles.underlineLinkOnHover,
+                      isInCurrentPage && styles["main-navigation__panel-link--current"]
+                    ),
+                    ariaCurrent: isInCurrentPage ? "page" : void 0,
+                    children: link.label
+                  })
+                },
+                `${column.heading}-${index}`
+              );
+            }) })
+          ]
+        },
+        `column-${columnIndex}`
+      )) }) }),
+      /* @__PURE__ */ jsx(
+        "aside",
+        {
+          className: cn(
+            elevationStyles.elevationHigh,
+            styles["main-navigation__panel-column"],
+            styles["main-navigation__feature-links"],
+            styles["main-navigation__panel-column--last"],
+            openPanel.featureLinksHighlighted && styles["main-navigation__panel-column--highlighted"],
+            !hasFeatureLinks && styles["main-navigation__feature-links--empty"]
+          ),
+          children: /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__feature-list"], children: (openPanel.featureLinks ?? []).map((link, index) => {
+            const href = toNavigableHref(link.href);
+            const isExternalFeatureLink = isExternalTarget(link.target);
+            return /* @__PURE__ */ jsx(
+              "li",
+              {
+                className: styles["main-navigation__panel-list-item"],
+                children: renderNavigationLink({
+                  link: { ...link, href },
+                  className: cn(
+                    styles["main-navigation__feature-link"],
+                    textDecorationStyles.underlineLinkOnHover,
+                    focusStyles.focusableInset,
+                    focusStyles.focusableRadiusSm
+                  ),
+                  children: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+                    isExternalFeatureLink ? /* @__PURE__ */ jsx(
+                      Open,
+                      {
+                        className: styles["main-navigation__feature-link-icon"]
+                      }
+                    ) : /* @__PURE__ */ jsx(
+                      ArrowRight,
+                      {
+                        className: styles["main-navigation__feature-link-icon"]
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: styles["main-navigation__feature-link-label"],
+                        children: link.label
+                      }
+                    ),
+                    isExternalFeatureLink && externalLinkAriaLabel && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: styles["main-navigation__sr-only"],
+                        children: ` (${externalLinkAriaLabel})`
+                      }
+                    )
+                  ] })
+                })
+              },
+              `feature-${index}`
+            );
+          }) })
+        }
+      )
+    ] }) });
+  };
+  const renderPrimaryList = () => /* @__PURE__ */ jsx("ul", { className: styles["main-navigation__primary-list"], children: items.map((item, index) => {
+    const hasPanel = item.panel != null;
+    const isOpen = openTopLevelItemIndex === index;
+    const isCurrentPathItem = isItemInCurrentPath(item, currentPathname);
+    return /* @__PURE__ */ jsx("li", { className: styles["main-navigation__item"], children: hasPanel ? /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: (node) => {
+          desktopPanelTriggerButtonRefs.current[index] = node;
+        },
+        type: "button",
+        className: cn(
+          styles["main-navigation__item-toggle"],
+          focusStyles.focusableInset,
+          focusStyles.focusableRadiusSm,
+          isCurrentPathItem && styles["main-navigation__item-toggle--current"],
+          isOpen && styles["main-navigation__item-toggle--open"]
+        ),
+        "aria-expanded": isOpen,
+        onClick: () => toggleTopLevelItem(index),
+        onKeyDown: (event) => {
+          if (event.key === "Enter" && !isDesktopViewport()) {
+            focusMobilePanelBackOnOpenRef.current = true;
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: styles["main-navigation__item-label"], children: item.label }),
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              className: styles["main-navigation__top-level-toggle-icon"]
+            }
+          )
+        ]
+      }
+    ) : renderNavigationLink({
+      link: item,
+      className: cn(
+        styles["main-navigation__item-link"],
+        focusStyles.focusableInset,
+        focusStyles.focusableRadiusSm,
+        isCurrentPathItem && styles["main-navigation__item-link--current"]
+      ),
+      ariaCurrent: isCurrentPathItem ? "page" : void 0,
+      children: /* @__PURE__ */ jsx("span", { className: styles["main-navigation__item-label"], children: item.label })
+    }) }, item.label);
+  }) });
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      ref: setHeaderRef,
+      className: cn(
+        styles["main-navigation"],
+        isDesktopHeaderOpen && styles["main-navigation--open"],
+        mobileMenuOpen && styles["main-navigation--menu-open"],
+        isMobileMenuClosing && styles["main-navigation--menu-closing"],
+        showPageOverlay && styles["main-navigation--overlay"],
+        showPageOverlay && overlayStyles.overlayStrong,
+        isOverlayClosingOut && overlayStyles.overlayClosing,
+        className
+      ),
+      ...props,
+      onKeyDown: (event) => {
+        if (event.key === "Tab" && mobileMenuOpen && !isDesktopViewport()) {
+          const focusableElements = getMobileFocusableElements();
+          if (focusableElements.length > 0) {
+            event.preventDefault();
+            const currentIndex = focusableElements.indexOf(
+              document.activeElement
+            );
+            const direction = event.shiftKey ? -1 : 1;
+            const nextIndex = currentIndex === -1 ? event.shiftKey ? focusableElements.length - 1 : 0 : (currentIndex + direction + focusableElements.length) % focusableElements.length;
+            focusableElements[nextIndex]?.focus();
+          }
+          return;
+        }
+        if (event.key === "Tab" && openTopLevelItemIndex != null && isDesktopViewport()) {
+          const focusLoopElements = getDesktopFocusLoopElements(openTopLevelItemIndex);
+          if (focusLoopElements.length > 0) {
+            event.preventDefault();
+            const currentIndex = focusLoopElements.indexOf(
+              document.activeElement
+            );
+            const direction = event.shiftKey ? -1 : 1;
+            const nextIndex = currentIndex === -1 ? event.shiftKey ? focusLoopElements.length - 1 : 0 : (currentIndex + direction + focusLoopElements.length) % focusLoopElements.length;
+            focusLoopElements[nextIndex]?.focus();
+            return;
+          }
+        }
+        if (event.key === "Escape") {
+          closeMenus();
+        }
+        props.onKeyDown?.(event);
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "nav",
+          {
+            "aria-label": organizationStripAriaLabel,
+            className: styles["main-navigation__organization-strip"],
+            children: organizations.map((organization) => /* @__PURE__ */ jsx(Fragment, { children: renderNavigationLink({
+              link: organization,
+              className: cn(
+                styles["main-navigation__organization-link"],
+                focusStyles.focusable,
+                organization.current && styles["main-navigation__organization-link--current"]
+              ),
+              ariaCurrent: organization.current ? "page" : void 0,
+              children: organization.label
+            }) }, organization.label))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: styles["main-navigation__navbar"], children: [
+          renderUtilityLink({
+            href: toNavigableHref(logoHref),
+            className: cn(
+              styles["main-navigation__logo"],
+              focusStyles.focusable,
+              focusStyles.focusableRadiusSm
+            ),
+            "aria-label": logoAriaLabel,
+            children: /* @__PURE__ */ jsx("img", { src: defaultLogoSrc, alt: "", "aria-hidden": "true" })
+          }),
+          /* @__PURE__ */ jsxs(
+            "nav",
+            {
+              ref: mobilePrimaryNavRef,
+              "aria-label": mobileMenuOpen ? mobilePrimaryNavigationAriaLabel : ariaLabel,
+              "data-open": mobileMenuOpen ? "true" : "false",
+              className: cn(
+                styles["main-navigation__primary"],
+                mobileMenuOpen && styles["main-navigation__primary--open"]
+              ),
+              children: [
+                renderPrimaryList(),
+                (mobileMenuOpen || isMobileMenuClosing) && renderPanel(
+                  cn(
+                    styles["main-navigation__panel"],
+                    styles["main-navigation__panel--mobile"]
+                  ),
+                  true
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: styles["main-navigation__icon-nav"], children: [
+            showLanguageSelector && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  styles["main-navigation__icon-nav-item"],
+                  focusStyles.focusableInset,
+                  focusStyles.focusableRadiusSm
+                ),
+                "aria-label": languageSelectorLabel,
+                onClick: onLanguageSelectorClick,
+                children: [
+                  /* @__PURE__ */ jsx(Globe, {}),
+                  /* @__PURE__ */ jsx("span", { className: styles["main-navigation__icon-nav-label"], children: languageSelectorLabel })
+                ]
+              }
+            ),
+            showSearch && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  styles["main-navigation__icon-nav-item"],
+                  focusStyles.focusableInset,
+                  focusStyles.focusableRadiusSm
+                ),
+                "aria-label": searchLabel,
+                onClick: onSearchClick,
+                children: [
+                  /* @__PURE__ */ jsx(Search, {}),
+                  /* @__PURE__ */ jsx("span", { className: styles["main-navigation__icon-nav-label"], children: searchLabel })
+                ]
+              }
+            ),
+            showCart && /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: cn(
+                  styles["main-navigation__icon-nav-item"],
+                  focusStyles.focusableInset,
+                  focusStyles.focusableRadiusSm
+                ),
+                "aria-label": cartAccessibleLabel,
+                onClick: onCartClick,
+                children: [
+                  /* @__PURE__ */ jsx(Cart, {}),
+                  /* @__PURE__ */ jsx("span", { className: styles["main-navigation__icon-nav-label"], children: cartLabel }),
+                  cartCounter != null && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": "true",
+                      className: styles["main-navigation__icon-nav-item--counter"],
+                      children: cartCounter
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                href: toNavigableHref(loginHref),
+                size: "small",
+                renderLink: renderUtilityLink,
+                children: loginLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              ref: mobileMenuToggleButtonRef,
+              type: "button",
+              className: cn(
+                styles["main-navigation__menu-toggle"],
+                mobileMenuOpen && styles["main-navigation__menu-toggle--open"],
+                focusStyles.focusableInset,
+                focusStyles.focusableRadiusSm
+              ),
+              "aria-label": mobileMenuOpen ? mobileMenuCloseAriaLabel : mobileMenuOpenAriaLabel,
+              "aria-expanded": mobileMenuOpen,
+              onClick: toggleMobileMenu,
+              children: mobileMenuOpen ? /* @__PURE__ */ jsx(Close, { size: "32px" }) : /* @__PURE__ */ jsx(Menu, { size: "32px" })
+            }
+          )
+        ] }),
+        !mobileMenuOpen && renderPanel(
+          cn(styles["main-navigation__panel"], styles["main-navigation__panel--desktop"])
+        )
+      ]
+    }
+  );
+};
+export {
+  MainNavigation
+};
+//# sourceMappingURL=MainNavigation.js.map