@telia/teddy 0.0.38 → 0.0.40

package/dist/components/navigation-menu/global-navigation/global-navigation-desktop.cjs

@@ -6,4 +6,7 @@ require("../navigation-menu.cjs");
 const components_navigationMenu_globalNavigation_globalNavigationMyPages = require("./global-navigation-my-pages.cjs");
 require("./utils.cjs");
 require("../../box/box.cjs");
+require("../../../utils/useSize.cjs");
+require("../../../utils/generate-styling/index.cjs");
+require("../../../utils/useCallbackRef.cjs");
 exports.Desktop = components_navigationMenu_globalNavigation_globalNavigationMyPages.Desktop;

package/dist/components/navigation-menu/global-navigation/global-navigation-desktop.js

@@ -4,6 +4,9 @@ import "../navigation-menu.js";
 import { D } from "./global-navigation-my-pages.js";
 import "./utils.js";
 import "../../box/box.js";
+import "../../../utils/useSize.js";
+import "../../../utils/generate-styling/index.js";
+import "../../../utils/useCallbackRef.js";
 export {
   D as Desktop
 };

package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.cjs

@@ -19,18 +19,29 @@ const utils_composeRefs = require("../../../utils/composeRefs.cjs");
 require("../../badge/badge.cjs");
 require("../../badge/alert-badge.cjs");
 const components_badge_counterBadge = require("../../badge/counter-badge.cjs");
+const utils_useSize = require("../../../utils/useSize.cjs");
+const utils_generateStyling_index = require("../../../utils/generate-styling/index.cjs");
+const utils_useCallbackRef = require("../../../utils/useCallbackRef.cjs");
 const components_flex_flex = require("../../flex/flex.cjs");
 const components_accordion_index = require("../../accordion/index.cjs");
 const components_visuallyHidden_visuallyHidden = require("../../visually-hidden/visually-hidden.cjs");
 const components_link_link = require("../../link/link.cjs");
 const components_list_index = require("../../list/index.cjs");
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_y8nb6_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_y8nb6_6",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_y8nb6_20",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_y8nb6_23",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_y8nb6_26",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_y8nb6_29"
+  "teddy-global-navigation": "_teddy-global-navigation_1ue02_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1ue02_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1ue02_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1ue02_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1ue02_26",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1ue02_29",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1ue02_32",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1ue02_35",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1ue02_43",
+  "expand-viewport": "_expand-viewport_1ue02_1",
+  "close-viewport": "_close-viewport_1ue02_1",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1ue02_53",
+  "expand-top-menu": "_expand-top-menu_1ue02_1",
+  "close-top-menu": "_close-top-menu_1ue02_1"
 };
 function MyPages(props) {
   var _a, _b;
@@ -162,6 +173,8 @@ const ShoppingCart = React.forwardRef(() => {
   const shoppingCartContent = rootContext == null ? void 0 : rootContext.shoppingCart;
   const numberOfItemsInCart = (rootContext == null ? void 0 : rootContext.shoppingCartNumberOfItems) || 0;
   const titleSuffix = numberOfItemsInCart > 0 ? `(${numberOfItemsInCart})` : "";
+  if (!numberOfItemsInCart)
+    return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(components_drawer_index.Drawer, { open: rootContext == null ? void 0 : rootContext.isCartOpen, onOpenChange: rootContext == null ? void 0 : rootContext.onCartOpenChange, children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsxRuntime.jsx(components_drawer_index.Drawer.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("button", { children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx([styles[`${rootClassName}__item-wrapper`]]), children: [
@@ -182,15 +195,79 @@ const ShoppingCart = React.forwardRef(() => {
   ] });
 });
 ShoppingCart.displayName = "ShoppingCart";
+const scrollDistanceDownThreshold = 200;
+const scrollDistanceUpThreshold = 50;
+const ANIMATION_DURATION = 300;
 const Desktop = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
+  const [hideMenu, setHideMenu] = React.useState(false);
+  const lastScrollDirection = React.useRef();
+  const scrollStartPos = React.useRef(0);
+  const lastScrollPos = React.useRef(0);
+  const topMenuRef = React.useRef(null);
+  const viewPortRef = React.useRef(null);
+  const viewPortSize = utils_useSize.useSize(viewPortRef.current);
+  const topMenuSize = utils_useSize.useSize(topMenuRef.current);
+  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const viewPortHeight = (viewPortSize == null ? void 0 : viewPortSize.height) ? `${viewPortSize.height}px` : void 0;
+  const animationTimer = React.useRef(0);
+  const handleScroll = () => {
+    let compensateHight = 0;
+    if (animationTimer.current > 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (animationTimer.current + ANIMATION_DURATION > currentTime) {
+        compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
+      } else {
+        animationTimer.current = 0;
+      }
+    }
+    const scrollY = window.scrollY;
+    const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
+    const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
+    if (scrollDirection !== lastScrollDirection.current) {
+      scrollStartPos.current = scrollY;
+    }
+    if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
+      setHideMenu(true);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
+      setHideMenu(false);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    lastScrollDirection.current = scrollDirection;
+    lastScrollPos.current = scrollY;
+  };
+  const throttledScrollHandler = useDebounceCallback(handleScroll, 5);
+  React.useEffect(() => {
+    window.addEventListener("scroll", throttledScrollHandler);
+    return () => {
+      window.removeEventListener("scroll", throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
   if (!rootContext)
     return null;
+  function resetAndShowMenu() {
+    lastScrollDirection.current = null;
+    scrollStartPos.current = window.scrollY;
+    lastScrollPos.current = window.scrollY;
+    setHideMenu(false);
+  }
   const { setSelectedMenuItem, linkComponent: Link } = rootContext;
   const currentLocation = rootContext.pathname;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuList, { children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: link.link, children: link.name }) }) }, link.name)) }),
-    components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(components_navigationMenu_navigationMenu.NavigationMenu.List, { value: link.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: utils_generateStyling_index.mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
+        className: styles[`${rootClassName}__top-menu-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link, { href: link.link, children: link.name }) }) }, link.name)) })
+      }
+    ),
+    components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(components_navigationMenu_navigationMenu.NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
       link.links.map((subLink) => /* @__PURE__ */ jsxRuntime.jsxs(components_navigationMenu_navigationMenu.NavigationMenu.Item, { value: subLink.name, children: [
         subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
           "img",
@@ -221,7 +298,7 @@ const Desktop = React.forwardRef(() => {
           components_navigationMenu_navigationMenu.NavigationMenu.Link,
           {
             asChild: true,
-            active: currentLocation === subSubLink.link,
+            active: currentLocation.startsWith(subSubLink.link),
             onClick: () => {
               rootContext.setPathname(subSubLink.link);
             },
@@ -235,10 +312,34 @@ const Desktop = React.forwardRef(() => {
       /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
       /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
     ] }, link.name)),
-    /* @__PURE__ */ jsxRuntime.jsx(components_navigationMenu_navigationMenu.NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: utils_generateStyling_index.mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          components_navigationMenu_navigationMenu.NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
   ] });
 });
 Desktop.displayName = "Desktop";
+function useDebounceCallback(callback, delay) {
+  const handleCallback = utils_useCallbackRef.useCallbackRef(callback);
+  const debounceTimerRef = React.useRef(0);
+  React.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
 function Mobile(props) {
   const rootContext = React.useContext(RootContext);
   const drawerRef = React.useRef(null);
@@ -272,7 +373,7 @@ function Mobile(props) {
                 value: rootContext.selectedMenuItem,
                 onValueChange: rootContext.setSelectedMenuItem,
                 children: link.links.filter((l) => l.name !== "Logo").map((subLink) => /* @__PURE__ */ jsxRuntime.jsxs(components_accordion_index.Accordion.Item, { value: subLink.name, children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs(components_accordion_index.Accordion.Header, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(components_accordion_index.Accordion.Header, { className: styles[`${rootClassName}__mobile-header`], children: [
                     /* @__PURE__ */ jsxRuntime.jsx(
                       components_link_link.Link,
                       {
@@ -289,7 +390,7 @@ function Mobile(props) {
                         children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(NavLink, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(components_accordion_index.Accordion.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsxs(components_visuallyHidden_visuallyHidden.VisuallyHidden, { children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(components_accordion_index.Accordion.Trigger, { className: styles[`${rootClassName}__mobile-trigger`], children: /* @__PURE__ */ jsxRuntime.jsxs(components_visuallyHidden_visuallyHidden.VisuallyHidden, { children: [
                       subLink.name,
                       " linker"
                     ] }) })
@@ -299,7 +400,7 @@ function Mobile(props) {
                     {
                       asChild: true,
                       variant: "small",
-                      active: currentLocation === subSubLink.link,
+                      active: currentLocation.startsWith(subSubLink.link),
                       onClick: () => {
                         var _a;
                         (_a = drawerRef.current) == null ? void 0 : _a.click();
@@ -383,12 +484,23 @@ function Root({
   onCartOpenChange,
   drawerSize = "md",
   isSimplified,
+  initialDomain = "Privat",
+  initialMenuItem,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem());
-  const [selectedDomainItem, setSelectedDomainItem] = React.useState(getInitialDomain());
-  const [pathname, setPathname] = React.useState(typeof window !== "undefined" ? window.location.pathname : "");
+  const [selectedMenuItem, setSelectedMenuItem] = React.useState(initialMenuItem);
+  const [selectedDomainItem, setSelectedDomainItem] = React.useState(initialDomain);
+  const [pathname, setPathname] = React.useState("");
   const classes = clsx([styles[`${rootClassName}`]], className);
+  React.useEffect(() => {
+    setPathname(window.location.pathname);
+    if (!initialDomain) {
+      setSelectedDomainItem(getInitialDomain());
+    }
+    if (!initialMenuItem) {
+      setSelectedMenuItem(getInitialMenuItem());
+    }
+  }, []);
   return /* @__PURE__ */ jsxRuntime.jsx(
     RootContext.Provider,
     {

package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React__default from "react";
+import React__default, { useEffect } from "react";
 import clsx from "clsx";
 import { MY_PAGE_LINKS, LOGGED_IN_LINKS_BUSINESS, LINKS, PRIVATE_LINKS, BUSINESS_LINKS, MDU_LINKS } from "./utils.js";
 import { NavigationMenu } from "../navigation-menu.js";
@@ -17,18 +17,29 @@ import { useComposedRefs } from "../../../utils/composeRefs.js";
 import "../../badge/badge.js";
 import "../../badge/alert-badge.js";
 import { CounterBadge } from "../../badge/counter-badge.js";
+import { useSize } from "../../../utils/useSize.js";
+import { mergeStyles } from "../../../utils/generate-styling/index.js";
+import { useCallbackRef } from "../../../utils/useCallbackRef.js";
 import { Flex } from "../../flex/flex.js";
 import { Accordion } from "../../accordion/index.js";
 import { VisuallyHidden } from "../../visually-hidden/visually-hidden.js";
 import { Link } from "../../link/link.js";
 import { List } from "../../list/index.js";
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_y8nb6_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_y8nb6_6",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_y8nb6_20",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_y8nb6_23",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_y8nb6_26",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_y8nb6_29"
+  "teddy-global-navigation": "_teddy-global-navigation_1ue02_1",
+  "teddy-global-navigation__mobile-trigger": "_teddy-global-navigation__mobile-trigger_1ue02_6",
+  "teddy-global-navigation__mobile-header": "_teddy-global-navigation__mobile-header_1ue02_9",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1ue02_6",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_1ue02_26",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1ue02_29",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1ue02_32",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1ue02_35",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1ue02_43",
+  "expand-viewport": "_expand-viewport_1ue02_1",
+  "close-viewport": "_close-viewport_1ue02_1",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1ue02_53",
+  "expand-top-menu": "_expand-top-menu_1ue02_1",
+  "close-top-menu": "_close-top-menu_1ue02_1"
 };
 function MyPages(props) {
   var _a, _b;
@@ -160,6 +171,8 @@ const ShoppingCart = React__default.forwardRef(() => {
   const shoppingCartContent = rootContext == null ? void 0 : rootContext.shoppingCart;
   const numberOfItemsInCart = (rootContext == null ? void 0 : rootContext.shoppingCartNumberOfItems) || 0;
   const titleSuffix = numberOfItemsInCart > 0 ? `(${numberOfItemsInCart})` : "";
+  if (!numberOfItemsInCart)
+    return null;
   return /* @__PURE__ */ jsxs(Drawer, { open: rootContext == null ? void 0 : rootContext.isCartOpen, onOpenChange: rootContext == null ? void 0 : rootContext.onCartOpenChange, children: [
     /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: /* @__PURE__ */ jsx(Drawer.Trigger, { children: /* @__PURE__ */ jsxs("button", { children: [
       /* @__PURE__ */ jsxs("div", { className: clsx([styles[`${rootClassName}__item-wrapper`]]), children: [
@@ -180,15 +193,79 @@ const ShoppingCart = React__default.forwardRef(() => {
   ] });
 });
 ShoppingCart.displayName = "ShoppingCart";
+const scrollDistanceDownThreshold = 200;
+const scrollDistanceUpThreshold = 50;
+const ANIMATION_DURATION = 300;
 const Desktop = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
+  const [hideMenu, setHideMenu] = React__default.useState(false);
+  const lastScrollDirection = React__default.useRef();
+  const scrollStartPos = React__default.useRef(0);
+  const lastScrollPos = React__default.useRef(0);
+  const topMenuRef = React__default.useRef(null);
+  const viewPortRef = React__default.useRef(null);
+  const viewPortSize = useSize(viewPortRef.current);
+  const topMenuSize = useSize(topMenuRef.current);
+  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
+  const viewPortHeight = (viewPortSize == null ? void 0 : viewPortSize.height) ? `${viewPortSize.height}px` : void 0;
+  const animationTimer = React__default.useRef(0);
+  const handleScroll = () => {
+    let compensateHight = 0;
+    if (animationTimer.current > 0) {
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      if (animationTimer.current + ANIMATION_DURATION > currentTime) {
+        compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
+      } else {
+        animationTimer.current = 0;
+      }
+    }
+    const scrollY = window.scrollY;
+    const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
+    const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
+    if (scrollDirection !== lastScrollDirection.current) {
+      scrollStartPos.current = scrollY;
+    }
+    if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
+      setHideMenu(true);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
+      setHideMenu(false);
+      const currentTime = (/* @__PURE__ */ new Date()).getTime();
+      animationTimer.current = currentTime;
+    }
+    lastScrollDirection.current = scrollDirection;
+    lastScrollPos.current = scrollY;
+  };
+  const throttledScrollHandler = useDebounceCallback(handleScroll, 5);
+  React__default.useEffect(() => {
+    window.addEventListener("scroll", throttledScrollHandler);
+    return () => {
+      window.removeEventListener("scroll", throttledScrollHandler);
+    };
+  }, [throttledScrollHandler]);
   if (!rootContext)
     return null;
+  function resetAndShowMenu() {
+    lastScrollDirection.current = null;
+    scrollStartPos.current = window.scrollY;
+    lastScrollPos.current = window.scrollY;
+    setHideMenu(false);
+  }
   const { setSelectedMenuItem, linkComponent: Link2 } = rootContext;
   const currentLocation = rootContext.pathname;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) }) }, link.name)) }),
-    LINKS.map((link) => /* @__PURE__ */ jsxs(NavigationMenu.List, { value: link.name, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles({ ["--teddy-top-menu-height"]: topMenuHeight }),
+        className: styles[`${rootClassName}__top-menu-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuTrigger, { value: link.name, asChild: true, children: /* @__PURE__ */ jsx(Link2, { href: link.link, children: link.name }) }) }, link.name)) })
+      }
+    ),
+    LINKS.map((link) => /* @__PURE__ */ jsxs(NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
       link.links.map((subLink) => /* @__PURE__ */ jsxs(NavigationMenu.Item, { value: subLink.name, children: [
         subLink.name === "Logo" ? /* @__PURE__ */ jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
           "img",
@@ -219,7 +296,7 @@ const Desktop = React__default.forwardRef(() => {
           NavigationMenu.Link,
           {
             asChild: true,
-            active: currentLocation === subSubLink.link,
+            active: currentLocation.startsWith(subSubLink.link),
             onClick: () => {
               rootContext.setPathname(subSubLink.link);
             },
@@ -233,10 +310,34 @@ const Desktop = React__default.forwardRef(() => {
       /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
       /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
     ] }, link.name)),
-    /* @__PURE__ */ jsx(NavigationMenu.Viewport, { className: styles[`${rootClassName}__viewport`] })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: mergeStyles({ ["--teddy-viewport-wrapper-height"]: viewPortHeight }),
+        className: styles[`${rootClassName}__viewport-wrapper`],
+        "data-state": hideMenu ? "closed" : "open",
+        children: /* @__PURE__ */ jsx(
+          NavigationMenu.Viewport,
+          {
+            onFocus: resetAndShowMenu,
+            ref: viewPortRef,
+            className: styles[`${rootClassName}__viewport`]
+          }
+        )
+      }
+    )
   ] });
 });
 Desktop.displayName = "Desktop";
+function useDebounceCallback(callback, delay) {
+  const handleCallback = useCallbackRef(callback);
+  const debounceTimerRef = React__default.useRef(0);
+  React__default.useEffect(() => () => window.clearTimeout(debounceTimerRef.current), []);
+  return React__default.useCallback(() => {
+    window.clearTimeout(debounceTimerRef.current);
+    debounceTimerRef.current = window.setTimeout(handleCallback, delay);
+  }, [handleCallback, delay]);
+}
 function Mobile(props) {
   const rootContext = React__default.useContext(RootContext);
   const drawerRef = React__default.useRef(null);
@@ -270,7 +371,7 @@ function Mobile(props) {
                 value: rootContext.selectedMenuItem,
                 onValueChange: rootContext.setSelectedMenuItem,
                 children: link.links.filter((l) => l.name !== "Logo").map((subLink) => /* @__PURE__ */ jsxs(Accordion.Item, { value: subLink.name, children: [
-                  /* @__PURE__ */ jsxs(Accordion.Header, { children: [
+                  /* @__PURE__ */ jsxs(Accordion.Header, { className: styles[`${rootClassName}__mobile-header`], children: [
                     /* @__PURE__ */ jsx(
                       Link,
                       {
@@ -287,7 +388,7 @@ function Mobile(props) {
                         children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(NavLink, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { href: subLink.link, children: subLink.name })
                       }
                     ),
-                    /* @__PURE__ */ jsx(Accordion.Trigger, { children: /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
+                    /* @__PURE__ */ jsx(Accordion.Trigger, { className: styles[`${rootClassName}__mobile-trigger`], children: /* @__PURE__ */ jsxs(VisuallyHidden, { children: [
                       subLink.name,
                       " linker"
                     ] }) })
@@ -297,7 +398,7 @@ function Mobile(props) {
                     {
                       asChild: true,
                       variant: "small",
-                      active: currentLocation === subSubLink.link,
+                      active: currentLocation.startsWith(subSubLink.link),
                       onClick: () => {
                         var _a;
                         (_a = drawerRef.current) == null ? void 0 : _a.click();
@@ -381,12 +482,23 @@ function Root({
   onCartOpenChange,
   drawerSize = "md",
   isSimplified,
+  initialDomain = "Privat",
+  initialMenuItem,
   ...props
 }) {
-  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem());
-  const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain());
-  const [pathname, setPathname] = React__default.useState(typeof window !== "undefined" ? window.location.pathname : "");
+  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(initialMenuItem);
+  const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(initialDomain);
+  const [pathname, setPathname] = React__default.useState("");
   const classes = clsx([styles[`${rootClassName}`]], className);
+  useEffect(() => {
+    setPathname(window.location.pathname);
+    if (!initialDomain) {
+      setSelectedDomainItem(getInitialDomain());
+    }
+    if (!initialMenuItem) {
+      setSelectedMenuItem(getInitialMenuItem());
+    }
+  }, []);
   return /* @__PURE__ */ jsx(
     RootContext.Provider,
     {

package/dist/components/navigation-menu/global-navigation/global-navigation-root.d.ts

@@ -17,6 +17,8 @@ export type RootProps = React.ComponentPropsWithoutRef<'div'> & {
     onCartOpenChange?: (open: boolean) => void;
     drawerSize: 'md' | 'lg';
     isSimplified?: boolean;
+    initialDomain?: 'Privat' | 'Bedrift' | 'Borettslag';
+    initialMenuItem?: string;
 };
 type RootContext = {
     selectedMenuItem: string | undefined;
@@ -27,7 +29,7 @@ type RootContext = {
     setPathname: (v: string) => void;
 } & Pick<RootProps, 'onSearchSubmit' | 'shoppingCart' | 'shoppingCartNumberOfItems' | 'loggedInUser' | 'appKey' | 'onLogoutClick' | 'linkComponent' | 'isCartOpen' | 'onCartOpenChange' | 'drawerSize'>;
 export declare const RootContext: React.Context<RootContext | null>;
-export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, isCartOpen, onCartOpenChange, drawerSize, isSimplified, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
+export declare function Root({ className, appKey, loggedInUser, linkComponent, onLogoutClick, shoppingCart, shoppingCartNumberOfItems, onSearchSubmit, isCartOpen, onCartOpenChange, drawerSize, isSimplified, initialDomain, initialMenuItem, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace Root {
     var displayName: string;
 }

package/dist/components/navigation-menu/global-navigation/utils.cjs

@@ -64,7 +64,7 @@ const BUSINESS_NET_LINKS = {
 const LOGGED_IN_LINKS_BUSINESS = [MY_BUSINESS_LINKS, MY_PORTAL_LINKS, BUSINESS_NET_LINKS];
 const LOGGED_IN_LINKS = [MY_PAGE_LINKS, ...LOGGED_IN_LINKS_BUSINESS];
 const PRIVATE_LINKS = {
-  name: "Private",
+  name: "Privat",
   link: "/",
   links: [
     {
@@ -107,6 +107,11 @@ const PRIVATE_LINKS = {
           name: "Påfyll kontantkort",
           link: "/mobil/mobilabonnement/kontantkort/lade/",
           appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Hjelp Mobil",
+          link: "/mobil/hjelp/",
+          appKey: APP_KEYS["open-pages"]
         }
       ]
     },
@@ -121,28 +126,38 @@ const PRIVATE_LINKS = {
           appKey: APP_KEYS["open-pages"]
         },
         {
-          name: "Strømmetjenester",
-          link: "/tv/strommetjenester/",
+          name: "Innholdsoversikt",
+          link: "/tv/innholdsoversikt/",
           appKey: APP_KEYS["open-pages"]
         },
+        // {
+        //   name: 'Strømmetjenester',
+        //   link: '/tv/strommetjenester/',
+        //   appKey: APP_KEYS['open-pages'],
+        // },
+        // {
+        //   name: 'TV-kanaler',
+        //   link: '/tv/tv-kanaler-og-kanalpakker/',
+        //   appKey: APP_KEYS['open-pages'],
+        // },
+        // {
+        //   name: 'Premiumtjenester',
+        //   link: '/tv/premiumtjenester/',
+        //   appKey: APP_KEYS['open-pages'],
+        // },
+        // {
+        //   name: 'Filmer',
+        //   link: '/tv/filmleie-og-filmkjop/',
+        //   appKey: APP_KEYS['open-pages'],
+        // },
         {
-          name: "TV-kanaler",
-          link: "/tv/tv-kanaler-og-kanalpakker/",
-          appKey: APP_KEYS["open-pages"]
-        },
-        {
-          name: "Premiumtjenester",
-          link: "/tv/premiumtjenester/",
-          appKey: APP_KEYS["open-pages"]
-        },
-        {
-          name: "Filmer",
-          link: "/tv/filmleie-og-filmkjop/",
+          name: "TV-bokser",
+          link: "/tv/tv-bokser/",
           appKey: APP_KEYS["open-pages"]
         },
         {
-          name: "TV-bokser",
-          link: "/tv/tv-bokser/",
+          name: "Hjelp TV",
+          link: "/tv/hjelp/",
           appKey: APP_KEYS["open-pages"]
         }
       ]
@@ -181,6 +196,11 @@ const PRIVATE_LINKS = {
           name: "Speedtest",
           link: "/internett/speedtest/",
           appKey: APP_KEYS["open-pages"]
+        },
+        {
+          name: "Hjelp Internett",
+          link: "/internett/hjelp/",
+          appKey: APP_KEYS["open-pages"]
         }
       ]
     },
@@ -213,12 +233,12 @@ const PRIVATE_LINKS = {
           name: "Finn butikk",
           link: "/hjelp/butikker/",
           appKey: APP_KEYS["open-pages"]
-        },
-        {
-          name: "Kontakt oss",
-          link: "/hjelp/kontakt-oss/",
-          appKey: APP_KEYS["open-pages"]
         }
+        // {
+        //   name: 'Kontakt oss',
+        //   link: '/hjelp/kontakt-oss/',
+        //   appKey: APP_KEYS['open-pages'],
+        // },
       ]
     }
   ]
@@ -247,17 +267,17 @@ const BUSINESS_LINKS = {
     },
     {
       name: "Nettbutikk",
-      link: "/bedrift/nettbutikk/",
+      link: "/bedrift/mobilabonnement/",
       appKey: APP_KEYS["web-shop"],
       links: [
         {
-          name: "Mobiltelefoner",
-          link: "/bedrift/mobiltelefoner/",
+          name: "Mobilabonnement",
+          link: "/bedrift/mobilabonnement/",
           appKey: APP_KEYS["web-shop"]
         },
         {
-          name: "Mobilabonnement",
-          link: "/bedrift/mobilabonnement/",
+          name: "Mobiltelefoner",
+          link: "/bedrift/mobiltelefoner/",
           appKey: APP_KEYS["web-shop"]
         },
         {
@@ -268,7 +288,13 @@ const BUSINESS_LINKS = {
       ]
     },
     {
-      name: "Kundeservice",
+      name: "Sikkerhet",
+      link: "/bedrift/sikkerhet/",
+      appKey: APP_KEYS["open-pages"],
+      links: []
+    },
+    {
+      name: "Hjelp",
       link: "/bedrift/kundeservice/",
       appKey: APP_KEYS["open-pages"],
       links: []