@telia/teddy 0.1.35 → 0.1.37

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

@@ -29,8 +29,6 @@ type RootContext = {
     setPathname: (v: string) => void;
     specifiedLink?: string;
     setSpecifiedLink: (v: string) => void;
-    showMenu?: boolean | null;
-    setShowMenu: (v: boolean) => void;
 } & Pick<RootProps, 'onSearchSubmit' | 'additionalSearchContent' | '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, additionalSearchContent, isCartOpen, onCartOpenChange, drawerSize, isSimplified, currentPath, ...props }: RootProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/radio-card-group/radio-card-group-item-title.cjs

@@ -681,23 +681,23 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1587l_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1587l_6",
-  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1587l_26",
-  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1587l_31",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1587l_35",
-  "teddy-global-navigation__header": "_teddy-global-navigation__header_1587l_48",
-  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1587l_51",
-  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1587l_54",
-  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1587l_58",
-  "teddy-global-navigation__list": "_teddy-global-navigation__list_1587l_64",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1587l_69",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1587l_72",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1587l_76",
-  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1587l_83",
-  "close-viewport": "_close-viewport_1587l_1",
-  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1587l_99",
-  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1587l_102"
+  "teddy-global-navigation": "_teddy-global-navigation_16lml_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_16lml_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_16lml_26",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_16lml_31",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_16lml_35",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_16lml_48",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_16lml_51",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_16lml_54",
+  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_16lml_58",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_16lml_64",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_16lml_69",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_16lml_72",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_16lml_76",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_16lml_83",
+  "close-viewport": "_close-viewport_16lml_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_16lml_99",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_16lml_102"
 };
 function MyPages(props) {
   var _a, _b;
@@ -856,11 +856,8 @@ const ShoppingCart = React.forwardRef(() => {
 ShoppingCart.displayName = "ShoppingCart";
 const Desktop = React.forwardRef(() => {
   const rootContext = React.useContext(RootContext);
-  const lastScrollDirection = React.useRef();
-  const scrollStartPos = React.useRef(0);
-  const lastScrollPos = React.useRef(0);
+  const [showMenu, setShowMenu] = React.useState(false);
   const topMenuRef = React.useRef(null);
-  const viewPortRef = React.useRef(null);
   const shouldShowViewport = [...components_navigationMenu_globalNavigation_utils.PRIVATE_LINKS.links, ...components_navigationMenu_globalNavigation_utils.BUSINESS_LINKS.links, ...components_navigationMenu_globalNavigation_utils.MDU_LINKS.links].some(
     (link) => {
       const sameParent = link.link.split("/")[1] === (rootContext == null ? void 0 : rootContext.pathname.split("/")[1]) || !link.link && (rootContext == null ? void 0 : rootContext.pathname) === "/";
@@ -871,12 +868,7 @@ const Desktop = React.forwardRef(() => {
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
   if (!rootContext)
     return null;
-  function resetAndShowMenu() {
-    lastScrollDirection.current = null;
-    scrollStartPos.current = window.scrollY;
-    lastScrollPos.current = window.scrollY;
-  }
-  const { showMenu, selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -891,7 +883,7 @@ const Desktop = React.forwardRef(() => {
           { ["--teddy-top-menu-height"]: topMenuHeight }
         ),
         className: styles[`${rootClassName}__top-menu-wrapper`],
-        children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
+        children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.TopMenuList, { ref: topMenuRef, children: components_navigationMenu_globalNavigation_utils.LINKS.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
           NavigationMenu.TopMenuTrigger,
           {
             value: link.name,
@@ -907,87 +899,95 @@ const Desktop = React.forwardRef(() => {
     ) }),
     components_navigationMenu_globalNavigation_utils.LINKS.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
-        (_a = link.links) == null ? void 0 : _a.map(
-          (subLink) => {
-            var _a2, _b, _c;
-            return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.Item, { value: subLink.name, children: [
-              subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, onMouseEnter: () => handleInteractions(), onClick: () => handleInteractions(), children: /* @__PURE__ */ jsxRuntime.jsx(
-                "img",
-                {
-                  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                  draggable: "false",
-                  alt: "Telia logo"
-                }
-              ) }) : /* @__PURE__ */ jsxRuntime.jsx(
-                "a",
-                {
-                  href: subLink.link,
-                  onMouseEnter: () => handleInteractions(),
-                  onClick: () => handleInteractions(),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    "img",
-                    {
-                      src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                      draggable: "false",
-                      alt: "Telia logo"
-                    }
-                  )
-                }
-              ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenu.Trigger,
-                {
-                  asChild: true,
-                  active: currentLocation === subLink.link,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), children: subLink.name })
-                }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenu.Link,
-                {
-                  asChild: true,
-                  active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
-                  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name })
-                }
-              ),
-              typeof window !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "150", children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: subLink.name, links: subLink.links }) }),
-                ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", links: subLink.highlightedLinks }) })
-              ] }) })
-            ] }, subLink.name);
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ml: "auto" }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Search, {}) }),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
-      ] }, link.name);
-    }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: utils_generateStyling_index.mergeStyles(
-          { ["--teddy-viewport-wrapper-height"]: viewPortHeight }
-        ),
-        className: styles[`${rootClassName}__viewport-wrapper`],
-        "data-state": showMenu ? "open" : "closed",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          NavigationMenu.Viewport,
-          {
-            onFocus: resetAndShowMenu,
-            ref: viewPortRef,
-            className: styles[`${rootClassName}__viewport`]
-          }
-        )
-      }
-    )
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        NavigationMenu.List,
+        {
+          value: link.name,
+          children: [
+            (_a = link.links) == null ? void 0 : _a.map(
+              (subLink) => {
+                var _a2, _b, _c;
+                return /* @__PURE__ */ jsxRuntime.jsxs(
+                  NavigationMenu.Item,
+                  {
+                    value: subLink.name,
+                    onMouseEnter: () => setShowMenu(true),
+                    onMouseLeave: () => setShowMenu(false),
+                    children: [
+                      subLink.name === "Logo" ? /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Link, { asChild: true, variant: "button", children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, onMouseEnter: () => handleInteractions(), onClick: () => handleInteractions(), children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "img",
+                        {
+                          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                          draggable: "false",
+                          alt: "Telia logo"
+                        }
+                      ) }) : /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: subLink.link,
+                          onMouseEnter: () => handleInteractions(),
+                          onClick: () => handleInteractions(),
+                          children: /* @__PURE__ */ jsxRuntime.jsx(
+                            "img",
+                            {
+                              src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                              draggable: "false",
+                              alt: "Telia logo"
+                            }
+                          )
+                        }
+                      ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsxRuntime.jsx(
+                        NavigationMenu.Trigger,
+                        {
+                          asChild: true,
+                          active: currentLocation === subLink.link,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(components_button_button.Button, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), children: subLink.name })
+                        }
+                      ) : /* @__PURE__ */ jsxRuntime.jsx(
+                        NavigationMenu.Link,
+                        {
+                          asChild: true,
+                          active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
+                          children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name })
+                        }
+                      ),
+                      typeof window !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          style: utils_generateStyling_index.mergeStyles(
+                            { ["--teddy-viewport-wrapper-height"]: viewPortHeight }
+                          ),
+                          className: styles[`${rootClassName}__viewport-wrapper`],
+                          "data-state": showMenu ? "open" : "closed",
+                          children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                            ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "150", pb: "250", children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: subLink.name, setShowMenu, links: subLink.links }) }),
+                            ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx(components_flex_flex.Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", setShowMenu, links: subLink.highlightedLinks }) })
+                          ] }) })
+                        }
+                      )
+                    ]
+                  },
+                  subLink.name
+                );
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ml: "auto" }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(ShoppingCart, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(Search, {}) }),
+            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(MyPages, {}) })
+          ]
+        },
+        link.name
+      );
+    })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName }) => {
+const HightlightedLinksDesktop = ({ links, listName, setShowMenu }) => {
   const rootContext = React.useContext(RootContext);
   if (!rootContext)
     return null;
-  const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem, setShowMenu } = rootContext;
+  const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
@@ -1198,7 +1198,6 @@ function Root({
   const [selectedDomainItem, setSelectedDomainItem] = React.useState(getInitialDomain(currentPath));
   const [pathname, setPathname] = React.useState(currentPath || "");
   const [specifiedLink, setSpecifiedLink] = React.useState(getInitialMenuItem(currentPath));
-  const [showMenu, setShowMenu] = React.useState(false);
   const classes = clsx([styles[`${rootClassName}`]], className);
   React.useEffect(() => {
     setPathname(currentPath || "");
@@ -1237,9 +1236,7 @@ function Root({
         onCartOpenChange,
         drawerSize,
         specifiedLink,
-        setSpecifiedLink,
-        showMenu,
-        setShowMenu
+        setSpecifiedLink
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,
@@ -1252,8 +1249,6 @@ function Root({
               return;
             setSelectedMenuItem(v);
           },
-          onMouseEnter: () => setShowMenu(true),
-          onMouseLeave: () => setShowMenu(false),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { display: { sm: "none", lg: "block" }, children: [
               isSimplified && /* @__PURE__ */ jsxRuntime.jsx(DesktopSimplified, {}),

package/dist/components/radio-card-group/radio-card-group-item-title.js

@@ -660,23 +660,23 @@ const NavigationMenu = Object.assign(Root$1, {
   TopMenuTrigger
 });
 const styles = {
-  "teddy-global-navigation": "_teddy-global-navigation_1587l_1",
-  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_1587l_6",
-  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_1587l_26",
-  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_1587l_31",
-  "teddy-global-navigation__link": "_teddy-global-navigation__link_1587l_35",
-  "teddy-global-navigation__header": "_teddy-global-navigation__header_1587l_48",
-  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_1587l_51",
-  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_1587l_54",
-  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_1587l_58",
-  "teddy-global-navigation__list": "_teddy-global-navigation__list_1587l_64",
-  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_1587l_69",
-  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_1587l_72",
-  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_1587l_76",
-  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_1587l_83",
-  "close-viewport": "_close-viewport_1587l_1",
-  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_1587l_99",
-  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_1587l_102"
+  "teddy-global-navigation": "_teddy-global-navigation_16lml_1",
+  "teddy-global-navigation__mobile": "_teddy-global-navigation__mobile_16lml_6",
+  "teddy-global-navigation__top-icon-wrapper": "_teddy-global-navigation__top-icon-wrapper_16lml_26",
+  "teddy-global-navigation__top-menu-icons": "_teddy-global-navigation__top-menu-icons_16lml_31",
+  "teddy-global-navigation__link": "_teddy-global-navigation__link_16lml_35",
+  "teddy-global-navigation__header": "_teddy-global-navigation__header_16lml_48",
+  "teddy-global-navigation__colored-box": "_teddy-global-navigation__colored-box_16lml_51",
+  "teddy-global-navigation__colored-box--mobile": "_teddy-global-navigation__colored-box--mobile_16lml_54",
+  "teddy-global-navigation__sublink-button--mobile": "_teddy-global-navigation__sublink-button--mobile_16lml_58",
+  "teddy-global-navigation__list": "_teddy-global-navigation__list_16lml_64",
+  "teddy-global-navigation__viewport": "_teddy-global-navigation__viewport_16lml_69",
+  "teddy-global-navigation__item-wrapper": "_teddy-global-navigation__item-wrapper_16lml_72",
+  "teddy-global-navigation__item-count": "_teddy-global-navigation__item-count_16lml_76",
+  "teddy-global-navigation__viewport-wrapper": "_teddy-global-navigation__viewport-wrapper_16lml_83",
+  "close-viewport": "_close-viewport_16lml_1",
+  "teddy-global-navigation__top-menu-color": "_teddy-global-navigation__top-menu-color_16lml_99",
+  "teddy-global-navigation__top-menu-wrapper": "_teddy-global-navigation__top-menu-wrapper_16lml_102"
 };
 function MyPages(props) {
   var _a, _b;
@@ -835,11 +835,8 @@ const ShoppingCart = React__default.forwardRef(() => {
 ShoppingCart.displayName = "ShoppingCart";
 const Desktop = React__default.forwardRef(() => {
   const rootContext = React__default.useContext(RootContext);
-  const lastScrollDirection = React__default.useRef();
-  const scrollStartPos = React__default.useRef(0);
-  const lastScrollPos = React__default.useRef(0);
+  const [showMenu, setShowMenu] = React__default.useState(false);
   const topMenuRef = React__default.useRef(null);
-  const viewPortRef = React__default.useRef(null);
   const shouldShowViewport = [...PRIVATE_LINKS.links, ...BUSINESS_LINKS.links, ...MDU_LINKS.links].some(
     (link) => {
       const sameParent = link.link.split("/")[1] === (rootContext == null ? void 0 : rootContext.pathname.split("/")[1]) || !link.link && (rootContext == null ? void 0 : rootContext.pathname) === "/";
@@ -850,12 +847,7 @@ const Desktop = React__default.forwardRef(() => {
   const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
   if (!rootContext)
     return null;
-  function resetAndShowMenu() {
-    lastScrollDirection.current = null;
-    scrollStartPos.current = window.scrollY;
-    lastScrollPos.current = window.scrollY;
-  }
-  const { showMenu, selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
+  const { selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   const handleInteractions = (linkName) => {
     setSpecifiedLink(linkName || "");
@@ -870,7 +862,7 @@ const Desktop = React__default.forwardRef(() => {
           { ["--teddy-top-menu-height"]: topMenuHeight }
         ),
         className: styles[`${rootClassName}__top-menu-wrapper`],
-        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
+        children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
           NavigationMenu.TopMenuTrigger,
           {
             value: link.name,
@@ -886,87 +878,95 @@ const Desktop = React__default.forwardRef(() => {
     ) }),
     LINKS.map((link) => {
       var _a;
-      return /* @__PURE__ */ jsxs(NavigationMenu.List, { onFocus: resetAndShowMenu, value: link.name, children: [
-        (_a = link.links) == null ? void 0 : _a.map(
-          (subLink) => {
-            var _a2, _b, _c;
-            return /* @__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, onMouseEnter: () => handleInteractions(), onClick: () => handleInteractions(), children: /* @__PURE__ */ jsx(
-                "img",
-                {
-                  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                  draggable: "false",
-                  alt: "Telia logo"
-                }
-              ) }) : /* @__PURE__ */ jsx(
-                "a",
-                {
-                  href: subLink.link,
-                  onMouseEnter: () => handleInteractions(),
-                  onClick: () => handleInteractions(),
-                  children: /* @__PURE__ */ jsx(
-                    "img",
-                    {
-                      src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
-                      draggable: "false",
-                      alt: "Telia logo"
-                    }
-                  )
-                }
-              ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
-                NavigationMenu.Trigger,
-                {
-                  asChild: true,
-                  active: currentLocation === subLink.link,
-                  children: /* @__PURE__ */ jsx(Button, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), children: subLink.name })
-                }
-              ) : /* @__PURE__ */ jsx(
-                NavigationMenu.Link,
-                {
-                  asChild: true,
-                  active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
-                  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name })
-                }
-              ),
-              typeof window !== "undefined" && /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
-                ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "150", children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: subLink.name, links: subLink.links }) }),
-                ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", links: subLink.highlightedLinks }) })
-              ] }) })
-            ] }, subLink.name);
-          }
-        ),
-        /* @__PURE__ */ jsx(Box, { ml: "auto" }),
-        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
-        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
-        /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
-      ] }, link.name);
-    }),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: mergeStyles(
-          { ["--teddy-viewport-wrapper-height"]: viewPortHeight }
-        ),
-        className: styles[`${rootClassName}__viewport-wrapper`],
-        "data-state": showMenu ? "open" : "closed",
-        children: /* @__PURE__ */ jsx(
-          NavigationMenu.Viewport,
-          {
-            onFocus: resetAndShowMenu,
-            ref: viewPortRef,
-            className: styles[`${rootClassName}__viewport`]
-          }
-        )
-      }
-    )
+      return /* @__PURE__ */ jsxs(
+        NavigationMenu.List,
+        {
+          value: link.name,
+          children: [
+            (_a = link.links) == null ? void 0 : _a.map(
+              (subLink) => {
+                var _a2, _b, _c;
+                return /* @__PURE__ */ jsxs(
+                  NavigationMenu.Item,
+                  {
+                    value: subLink.name,
+                    onMouseEnter: () => setShowMenu(true),
+                    onMouseLeave: () => setShowMenu(false),
+                    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, onMouseEnter: () => handleInteractions(), onClick: () => handleInteractions(), children: /* @__PURE__ */ jsx(
+                        "img",
+                        {
+                          src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                          draggable: "false",
+                          alt: "Telia logo"
+                        }
+                      ) }) : /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          href: subLink.link,
+                          onMouseEnter: () => handleInteractions(),
+                          onClick: () => handleInteractions(),
+                          children: /* @__PURE__ */ jsx(
+                            "img",
+                            {
+                              src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
+                              draggable: "false",
+                              alt: "Telia logo"
+                            }
+                          )
+                        }
+                      ) }) : ((_a2 = subLink.links) == null ? void 0 : _a2.length) ? /* @__PURE__ */ jsx(
+                        NavigationMenu.Trigger,
+                        {
+                          asChild: true,
+                          active: currentLocation === subLink.link,
+                          children: /* @__PURE__ */ jsx(Button, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), children: subLink.name })
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        NavigationMenu.Link,
+                        {
+                          asChild: true,
+                          active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
+                          children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { onMouseEnter: () => handleInteractions(subLink.name), onClick: () => handleInteractions(subLink.name), href: subLink.link, children: subLink.name })
+                        }
+                      ),
+                      typeof window !== "undefined" && /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          style: mergeStyles(
+                            { ["--teddy-viewport-wrapper-height"]: viewPortHeight }
+                          ),
+                          className: styles[`${rootClassName}__viewport-wrapper`],
+                          "data-state": showMenu ? "open" : "closed",
+                          children: /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            ((_b = subLink.links) == null ? void 0 : _b.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "150", pb: "250", children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: subLink.name, setShowMenu, links: subLink.links }) }),
+                            ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "250", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", setShowMenu, links: subLink.highlightedLinks }) })
+                          ] }) })
+                        }
+                      )
+                    ]
+                  },
+                  subLink.name
+                );
+              }
+            ),
+            /* @__PURE__ */ jsx(Box, { ml: "auto" }),
+            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(ShoppingCart, {}) }),
+            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(Search, {}) }),
+            /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsx(MyPages, {}) })
+          ]
+        },
+        link.name
+      );
+    })
   ] });
 });
 Desktop.displayName = "Desktop";
-const HightlightedLinksDesktop = ({ links, listName }) => {
+const HightlightedLinksDesktop = ({ links, listName, setShowMenu }) => {
   const rootContext = React__default.useContext(RootContext);
   if (!rootContext)
     return null;
-  const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem, setShowMenu } = rootContext;
+  const { linkComponent: Link2, setSpecifiedLink, setSelectedMenuItem } = rootContext;
   const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
@@ -1177,7 +1177,6 @@ function Root({
   const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath));
   const [pathname, setPathname] = React__default.useState(currentPath || "");
   const [specifiedLink, setSpecifiedLink] = React__default.useState(getInitialMenuItem(currentPath));
-  const [showMenu, setShowMenu] = React__default.useState(false);
   const classes = clsx([styles[`${rootClassName}`]], className);
   useEffect(() => {
     setPathname(currentPath || "");
@@ -1216,9 +1215,7 @@ function Root({
         onCartOpenChange,
         drawerSize,
         specifiedLink,
-        setSpecifiedLink,
-        showMenu,
-        setShowMenu
+        setSpecifiedLink
       },
       children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
@@ -1231,8 +1228,6 @@ function Root({
               return;
             setSelectedMenuItem(v);
           },
-          onMouseEnter: () => setShowMenu(true),
-          onMouseLeave: () => setShowMenu(false),
           children: [
             /* @__PURE__ */ jsxs(Box, { display: { sm: "none", lg: "block" }, children: [
               isSimplified && /* @__PURE__ */ jsx(DesktopSimplified, {}),

package/dist/style.css

@@ -5117,41 +5117,41 @@
   height: var(--radix-navigation-menu-viewport-height);
   transform-origin: top left;
   overflow: clip;
-}._teddy-global-navigation_1587l_1 {
+}._teddy-global-navigation_16lml_1 {
   position: sticky;
   inset: 0 0 auto 0;
   z-index: 39;
 }
-._teddy-global-navigation__mobile_1587l_6 {
+._teddy-global-navigation__mobile_16lml_6 {
   padding: var(--teddy-spacing-25) var(--teddy-spacing-200);
   border-bottom: var(--teddy-border-width-sm) solid var(--teddy-color-border-weak);
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__mobile_1587l_6 {
+  ._teddy-global-navigation__mobile_16lml_6 {
     padding: var(--teddy-spacing-25) 0;
   }
 }
-._teddy-global-navigation__mobile_1587l_6::before {
+._teddy-global-navigation__mobile_16lml_6::before {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
-._teddy-global-navigation__mobile_1587l_6::after {
+._teddy-global-navigation__mobile_16lml_6::after {
   content: "";
   display: block;
   width: var(--width-for-centering-element);
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__top-icon-wrapper_1587l_26 {
+  ._teddy-global-navigation__top-icon-wrapper_16lml_26 {
     gap: 0;
   }
 }
 @media screen and (max-width: 335px) {
-  ._teddy-global-navigation__top-menu-icons_1587l_31 {
+  ._teddy-global-navigation__top-menu-icons_16lml_31 {
     gap: 0;
   }
 }
-._teddy-global-navigation__link_1587l_35 {
+._teddy-global-navigation__link_16lml_35 {
   text-decoration: none;
   display: flex;
   justify-content: space-between;
@@ -5161,81 +5161,81 @@
   font-weight: var(--teddy-typography-weight-bold);
   font-size: var(--teddy-typography-scale-400);
 }
-._teddy-global-navigation__link_1587l_35:hover {
+._teddy-global-navigation__link_16lml_35:hover {
   background-color: var(--teddy-color-background-interactive-transparent-hover);
 }
-._teddy-global-navigation__header_1587l_48 {
+._teddy-global-navigation__header_16lml_48 {
   color: var(--teddy-color-text-interactive-primary);
 }
-._teddy-global-navigation__colored-box_1587l_51 {
+._teddy-global-navigation__colored-box_16lml_51 {
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-global-navigation__colored-box--mobile_1587l_54 {
+._teddy-global-navigation__colored-box--mobile_16lml_54 {
   margin: 0 -1.5rem;
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-global-navigation__sublink-button--mobile_1587l_58 {
+._teddy-global-navigation__sublink-button--mobile_16lml_58 {
   background-color: transparent;
   padding: 0;
   color: var(--teddy-color-text-interactive-primary);
   border-radius: unset;
 }
-._teddy-global-navigation__list_1587l_64 {
+._teddy-global-navigation__list_16lml_64 {
   column-count: 2;
   max-height: 13rem;
   column-gap: var(--teddy-spacing-300);
 }
-._teddy-global-navigation__viewport_1587l_69._teddy-global-navigation__viewport_1587l_69 {
+._teddy-global-navigation__viewport_16lml_69._teddy-global-navigation__viewport_16lml_69 {
   height: var(--teddy-viewport-wrapper-height);
 }
-._teddy-global-navigation__item-wrapper_1587l_72 {
+._teddy-global-navigation__item-wrapper_16lml_72 {
   position: relative;
   display: flex;
 }
-._teddy-global-navigation__item-count_1587l_76 {
+._teddy-global-navigation__item-count_16lml_76 {
   display: flex;
   justify-content: center;
   align-items: center;
   position: absolute;
   transform: translate(calc(var(--teddy-spacing-150) + var(--teddy-spacing-25)), calc(-1 * var(--teddy-spacing-100) + var(--teddy-spacing-10)));
 }
-._teddy-global-navigation__viewport-wrapper_1587l_83 {
+._teddy-global-navigation__viewport-wrapper_16lml_83 {
   position: absolute;
-  top: 112px;
   left: 0;
   width: 100%;
   overflow: hidden;
   transition: max-height var(--teddy-motion-duration-controlled, 0) ease;
   box-shadow: var(--teddy-shadow-md);
+  background-color: var(--teddy-color-background-primary);
 }
-._teddy-global-navigation__viewport-wrapper_1587l_83[data-state=open] {
+._teddy-global-navigation__viewport-wrapper_16lml_83[data-state=open] {
   max-height: var(--teddy-viewport-wrapper-height);
 }
-._teddy-global-navigation__viewport-wrapper_1587l_83[data-state=closed] {
+._teddy-global-navigation__viewport-wrapper_16lml_83[data-state=closed] {
   max-height: 0;
-  animation: _close-viewport_1587l_1 var(--teddy-motion-duration-controlled, 0) ease;
+  animation: _close-viewport_16lml_1 var(--teddy-motion-duration-controlled, 0) ease;
 }
-._teddy-global-navigation__top-menu-color_1587l_99 {
+._teddy-global-navigation__top-menu-color_16lml_99 {
   background-color: var(--teddy-color-background-secondary);
 }
-._teddy-global-navigation__top-menu-wrapper_1587l_102 {
+._teddy-global-navigation__top-menu-wrapper_16lml_102 {
   overflow: hidden;
   max-width: 84rem;
   transition: max-height var(--teddy-motion-duration-controlled, 0) ease;
   margin: 0 var(--teddy-spacing-600);
 }
 @media (min-width: 1440px) {
-  ._teddy-global-navigation__top-menu-wrapper_1587l_102 {
+  ._teddy-global-navigation__top-menu-wrapper_16lml_102 {
     margin: 0 auto;
   }
 }
-._teddy-global-navigation__top-menu-wrapper_1587l_102[data-state=open] {
+._teddy-global-navigation__top-menu-wrapper_16lml_102[data-state=open] {
   max-height: var(--teddy-top-menu-height, 47px);
 }
-._teddy-global-navigation__top-menu-wrapper_1587l_102[data-state=closed] {
+._teddy-global-navigation__top-menu-wrapper_16lml_102[data-state=closed] {
   max-height: 0;
 }
-@keyframes _close-viewport_1587l_1 {
+@keyframes _close-viewport_16lml_1 {
   0% {
     max-height: var(--teddy-viewport-wrapper-height);
   }

package/package.json

@@ -20,7 +20,7 @@
     "pnpm": ">=9"
   },
   "private": false,
-  "version": "0.1.35",
+  "version": "0.1.37",
   "sideEffects": [
     "**/*.css",
     "**/*.svg"