@telia/teddy 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/components/card/card.cjs +52 -52
  2. package/dist/components/card/card.js +52 -52
  3. package/dist/components/navigation-menu/global-navigation/global-navigation-root.d.ts +2 -1
  4. package/dist/components/navigation-menu/global-navigation/utils.cjs +10 -10
  5. package/dist/components/navigation-menu/global-navigation/utils.d.ts +18 -18
  6. package/dist/components/navigation-menu/global-navigation/utils.js +10 -10
  7. package/dist/components/radio-card-group/radio-card-group-item-title.cjs +49 -58
  8. package/dist/components/radio-card-group/radio-card-group-item-title.js +49 -58
  9. package/dist/style.css +122 -116
  10. package/package.json +1 -1
package/dist/components/radio-card-group/radio-card-group-item-title.cjs CHANGED
@@ -874,25 +874,23 @@ const ShoppingCart = React.forwardRef(() => {
874
874
  ] });
875
875
  });
876
876
  ShoppingCart.displayName = "ShoppingCart";
877
- const scrollDistanceDownThreshold = 200;
878
- const scrollDistanceUpThreshold = 50;
879
- const ANIMATION_DURATION = 300;
880
877
  const Desktop = React.forwardRef(() => {
881
878
  const rootContext = React.useContext(RootContext);
882
- const [hideMenu, setHideMenu] = React.useState(null);
883
879
  const lastScrollDirection = React.useRef();
884
880
  const scrollStartPos = React.useRef(0);
885
881
  const lastScrollPos = React.useRef(0);
886
882
  const topMenuRef = React.useRef(null);
887
883
  const viewPortRef = React.useRef(null);
888
884
  const shouldShowViewport = [...components_navigationMenu_globalNavigation_utils.PRIVATE_LINKS.links, ...components_navigationMenu_globalNavigation_utils.BUSINESS_LINKS.links, ...components_navigationMenu_globalNavigation_utils.MDU_LINKS.links].some(
889
- (link) => link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink)
885
+ (link) => {
886
+ const highlightedLinkSelected = [...link.highlightedLinks].some((highlightedLink) => highlightedLink.link === (rootContext == null ? void 0 : rootContext.pathname));
887
+ const linkSelected = [...link.links].some((subLink) => subLink.link === (rootContext == null ? void 0 : rootContext.pathname));
888
+ return linkSelected || highlightedLinkSelected || link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink);
889
+ }
890
890
  );
891
- const viewPortSize = utils_useSize.useSize(viewPortRef.current);
892
891
  const topMenuSize = utils_useSize.useSize(topMenuRef.current);
893
892
  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
894
893
  const viewPortHeight = shouldShowViewport ? "288px" : void 0;
895
- const animationTimer = React.useRef(0);
896
894
  const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React.useState(false);
897
895
  const timerRef = React.useRef(void 0);
898
896
  React.useEffect(() => {
@@ -904,31 +902,11 @@ const Desktop = React.forwardRef(() => {
904
902
  };
905
903
  }, []);
906
904
  const handleScroll = () => {
907
- let compensateHight = 0;
908
- if (animationTimer.current > 0) {
909
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
910
- if (animationTimer.current + ANIMATION_DURATION > currentTime) {
911
- compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
912
- } else {
913
- animationTimer.current = 0;
914
- }
915
- }
916
905
  const scrollY = window.scrollY;
917
906
  const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
918
- const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
919
907
  if (scrollDirection !== lastScrollDirection.current) {
920
908
  scrollStartPos.current = scrollY;
921
909
  }
922
- if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
923
- setHideMenu(true);
924
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
925
- animationTimer.current = currentTime;
926
- }
927
- if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
928
- setHideMenu(false);
929
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
930
- animationTimer.current = currentTime;
931
- }
932
910
  lastScrollDirection.current = scrollDirection;
933
911
  lastScrollPos.current = scrollY;
934
912
  };
@@ -945,9 +923,8 @@ const Desktop = React.forwardRef(() => {
945
923
  lastScrollDirection.current = null;
946
924
  scrollStartPos.current = window.scrollY;
947
925
  lastScrollPos.current = window.scrollY;
948
- setHideMenu(false);
949
926
  }
950
- const { setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
927
+ const { hideMenu, selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
951
928
  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
952
929
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
953
930
  /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -958,7 +935,6 @@ const Desktop = React.forwardRef(() => {
958
935
  allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: tokens_motion_variables.teddyMotionDuration300 } : {}
959
936
  ),
960
937
  className: styles[`${rootClassName}__top-menu-wrapper`],
961
- "data-state": hideMenu ? "closed" : "open",
962
938
  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(
963
939
  NavigationMenu.TopMenuTrigger,
964
940
  {
@@ -980,14 +956,20 @@ const Desktop = React.forwardRef(() => {
980
956
  (subLink) => {
981
957
  var _a2, _b, _c;
982
958
  return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu.Item, { value: subLink.name, children: [
983
- 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, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
959
+ 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, onClick: () => {
960
+ setSelectedMenuItem("", true);
961
+ setSpecifiedLink("");
962
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(
984
963
  "img",
985
964
  {
986
965
  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
987
966
  draggable: "false",
988
967
  alt: "Telia logo"
989
968
  }
990
- ) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsxRuntime.jsx(
969
+ ) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, onClick: () => {
970
+ setSelectedMenuItem("", true);
971
+ setSpecifiedLink("");
972
+ }, children: /* @__PURE__ */ jsxRuntime.jsx(
991
973
  "img",
992
974
  {
993
975
  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
@@ -1009,17 +991,17 @@ const Desktop = React.forwardRef(() => {
1009
991
  NavigationMenu.Link,
1010
992
  {
1011
993
  asChild: true,
1012
- active: currentLocation === subLink.link,
994
+ active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
1013
995
  onClick: () => {
1014
996
  setSpecifiedLink(subLink.name);
1015
- setSelectedMenuItem(subLink.name);
997
+ setSelectedMenuItem(subLink.name, true);
1016
998
  },
1017
999
  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subLink.link, children: subLink.name })
1018
1000
  }
1019
1001
  ),
1020
1002
  /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1021
- ((_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, subLink, links: subLink.links }) }),
1022
- ((_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: "40px", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", subLink, links: subLink.highlightedLinks }) })
1003
+ ((_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 }) }),
1004
+ ((_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: "40px", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsxRuntime.jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", links: subLink.highlightedLinks }) })
1023
1005
  ] }) })
1024
1006
  ] }, subLink.name);
1025
1007
  }
@@ -1062,7 +1044,7 @@ function useDebounceCallback(callback, delay) {
1062
1044
  debounceTimerRef.current = window.setTimeout(handleCallback, delay);
1063
1045
  }, [handleCallback, delay]);
1064
1046
  }
1065
- const HightlightedLinksDesktop = ({ subLink, links, listName }) => {
1047
+ const HightlightedLinksDesktop = ({ links, listName }) => {
1066
1048
  const rootContext = React.useContext(RootContext);
1067
1049
  if (!rootContext)
1068
1050
  return null;
@@ -1070,24 +1052,26 @@ const HightlightedLinksDesktop = ({ subLink, links, listName }) => {
1070
1052
  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
1071
1053
  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
1072
1054
  /* @__PURE__ */ jsxRuntime.jsx(components_heading_heading.Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
1073
- /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map((subSubLink) => /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
1074
- NavigationMenu.Link,
1075
- {
1076
- asChild: true,
1077
- variant: "small",
1078
- active: components_navigationMenu_globalNavigation_utils.getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
1079
- onClick: () => {
1080
- rootContext.setPathname(subSubLink.link);
1081
- },
1082
- children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
1083
- subSubLink.name,
1084
- /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
1085
- ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
1086
- subSubLink.name,
1087
- /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
1088
- ] }) })
1089
- }
1090
- ) }, subSubLink.name)) })
1055
+ /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map(
1056
+ (subSubLink) => /* @__PURE__ */ jsxRuntime.jsx(components_list_index.List.Item, { children: /* @__PURE__ */ jsxRuntime.jsx(
1057
+ NavigationMenu.Link,
1058
+ {
1059
+ asChild: true,
1060
+ variant: "small",
1061
+ active: components_navigationMenu_globalNavigation_utils.getActiveSubLink(currentLocation, links || []) === subSubLink.link,
1062
+ onClick: () => {
1063
+ rootContext.setPathname(subSubLink.link);
1064
+ },
1065
+ children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsxRuntime.jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
1066
+ subSubLink.name,
1067
+ /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
1068
+ ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxRuntime.jsxs(components_flex_flex.Flex, { as: "span", gap: "100", align: "center", children: [
1069
+ subSubLink.name,
1070
+ /* @__PURE__ */ jsxRuntime.jsx(components_icon_icon.Icon, { name: "arrow-right" })
1071
+ ] }) })
1072
+ }
1073
+ ) }, subSubLink.name)
1074
+ ) })
1091
1075
  ] });
1092
1076
  };
1093
1077
  function Mobile(props) {
@@ -1271,8 +1255,12 @@ function Root({
1271
1255
  const [selectedMenuItem, setSelectedMenuItem] = React.useState(getInitialMenuItem(currentPath));
1272
1256
  const [selectedDomainItem, setSelectedDomainItem] = React.useState(getInitialDomain(currentPath));
1273
1257
  const [pathname, setPathname] = React.useState(currentPath || "");
1274
- const [specifiedLink, setSpecifiedLink] = React.useState("");
1258
+ const [specifiedLink, setSpecifiedLink] = React.useState(getInitialMenuItem(currentPath));
1259
+ const [hideMenu, setHideMenu] = React.useState(null);
1275
1260
  const classes = clsx([styles[`${rootClassName}`]], className);
1261
+ React.useEffect(() => {
1262
+ setPathname(currentPath || "");
1263
+ }, [currentPath]);
1276
1264
  return /* @__PURE__ */ jsxRuntime.jsx(
1277
1265
  RootContext.Provider,
1278
1266
  {
@@ -1306,7 +1294,8 @@ function Root({
1306
1294
  onCartOpenChange,
1307
1295
  drawerSize,
1308
1296
  specifiedLink,
1309
- setSpecifiedLink
1297
+ setSpecifiedLink,
1298
+ hideMenu
1310
1299
  },
1311
1300
  children: /* @__PURE__ */ jsxRuntime.jsx(components_box_box.Box, { ...props, className: classes, children: /* @__PURE__ */ jsxRuntime.jsxs(
1312
1301
  NavigationMenu,
@@ -1319,6 +1308,8 @@ function Root({
1319
1308
  return;
1320
1309
  setSelectedMenuItem(v);
1321
1310
  },
1311
+ onMouseEnter: () => setHideMenu(false),
1312
+ onMouseLeave: () => setHideMenu(true),
1322
1313
  children: [
1323
1314
  /* @__PURE__ */ jsxRuntime.jsxs(components_box_box.Box, { display: { sm: "none", lg: "block" }, children: [
1324
1315
  isSimplified && /* @__PURE__ */ jsxRuntime.jsx(DesktopSimplified, {}),
@@ -1365,7 +1356,7 @@ function getInitialMenuItem(currentPath) {
1365
1356
  const mainMenuPartOfLocation = locationArray[1];
1366
1357
  return (_f = (_e = components_navigationMenu_globalNavigation_utils.PRIVATE_LINKS.links) == null ? void 0 : _e.find((link) => {
1367
1358
  var _a2;
1368
- return link.link === `/${mainMenuPartOfLocation}/` || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
1359
+ return link.name.toLowerCase() === mainMenuPartOfLocation || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
1369
1360
  })) == null ? void 0 : _f.name;
1370
1361
  }
1371
1362
  Root.displayName = "GlobalNavigation";
package/dist/components/radio-card-group/radio-card-group-item-title.js CHANGED
@@ -853,25 +853,23 @@ const ShoppingCart = React__default.forwardRef(() => {
853
853
  ] });
854
854
  });
855
855
  ShoppingCart.displayName = "ShoppingCart";
856
- const scrollDistanceDownThreshold = 200;
857
- const scrollDistanceUpThreshold = 50;
858
- const ANIMATION_DURATION = 300;
859
856
  const Desktop = React__default.forwardRef(() => {
860
857
  const rootContext = React__default.useContext(RootContext);
861
- const [hideMenu, setHideMenu] = React__default.useState(null);
862
858
  const lastScrollDirection = React__default.useRef();
863
859
  const scrollStartPos = React__default.useRef(0);
864
860
  const lastScrollPos = React__default.useRef(0);
865
861
  const topMenuRef = React__default.useRef(null);
866
862
  const viewPortRef = React__default.useRef(null);
867
863
  const shouldShowViewport = [...PRIVATE_LINKS.links, ...BUSINESS_LINKS.links, ...MDU_LINKS.links].some(
868
- (link) => link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink)
864
+ (link) => {
865
+ const highlightedLinkSelected = [...link.highlightedLinks].some((highlightedLink) => highlightedLink.link === (rootContext == null ? void 0 : rootContext.pathname));
866
+ const linkSelected = [...link.links].some((subLink) => subLink.link === (rootContext == null ? void 0 : rootContext.pathname));
867
+ return linkSelected || highlightedLinkSelected || link.links.length && link.name === (rootContext == null ? void 0 : rootContext.specifiedLink);
868
+ }
869
869
  );
870
- const viewPortSize = useSize(viewPortRef.current);
871
870
  const topMenuSize = useSize(topMenuRef.current);
872
871
  const topMenuHeight = (topMenuSize == null ? void 0 : topMenuSize.height) ? `${topMenuSize.height}px` : void 0;
873
872
  const viewPortHeight = shouldShowViewport ? "288px" : void 0;
874
- const animationTimer = React__default.useRef(0);
875
873
  const [allowAnimationOfHeight, setAllowAnimationOfHeight] = React__default.useState(false);
876
874
  const timerRef = React__default.useRef(void 0);
877
875
  React__default.useEffect(() => {
@@ -883,31 +881,11 @@ const Desktop = React__default.forwardRef(() => {
883
881
  };
884
882
  }, []);
885
883
  const handleScroll = () => {
886
- let compensateHight = 0;
887
- if (animationTimer.current > 0) {
888
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
889
- if (animationTimer.current + ANIMATION_DURATION > currentTime) {
890
- compensateHight = ((topMenuSize == null ? void 0 : topMenuSize.height) || 0) + ((viewPortSize == null ? void 0 : viewPortSize.height) || 0);
891
- } else {
892
- animationTimer.current = 0;
893
- }
894
- }
895
884
  const scrollY = window.scrollY;
896
885
  const scrollDirection = scrollY > lastScrollPos.current ? "down" : "up";
897
- const scrollDistance = Math.abs(scrollStartPos.current - scrollY);
898
886
  if (scrollDirection !== lastScrollDirection.current) {
899
887
  scrollStartPos.current = scrollY;
900
888
  }
901
- if (!hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "down" && scrollDistance > scrollDistanceDownThreshold + compensateHight) {
902
- setHideMenu(true);
903
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
904
- animationTimer.current = currentTime;
905
- }
906
- if (hideMenu && scrollDirection === lastScrollDirection.current && scrollDirection === "up" && scrollDistance > scrollDistanceUpThreshold + compensateHight || scrollY === 0) {
907
- setHideMenu(false);
908
- const currentTime = (/* @__PURE__ */ new Date()).getTime();
909
- animationTimer.current = currentTime;
910
- }
911
889
  lastScrollDirection.current = scrollDirection;
912
890
  lastScrollPos.current = scrollY;
913
891
  };
@@ -924,9 +902,8 @@ const Desktop = React__default.forwardRef(() => {
924
902
  lastScrollDirection.current = null;
925
903
  scrollStartPos.current = window.scrollY;
926
904
  lastScrollPos.current = window.scrollY;
927
- setHideMenu(false);
928
905
  }
929
- const { setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
906
+ const { hideMenu, selectedMenuItem, setSelectedMenuItem, linkComponent: Link2, specifiedLink, setSpecifiedLink } = rootContext;
930
907
  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
931
908
  return /* @__PURE__ */ jsxs(Fragment, { children: [
932
909
  /* @__PURE__ */ jsx("div", { className: styles[`${rootClassName}__top-menu-color`], children: /* @__PURE__ */ jsx(
@@ -937,7 +914,6 @@ const Desktop = React__default.forwardRef(() => {
937
914
  allowAnimationOfHeight ? { ["--teddy-motion-duration-controlled"]: teddyMotionDuration300 } : {}
938
915
  ),
939
916
  className: styles[`${rootClassName}__top-menu-wrapper`],
940
- "data-state": hideMenu ? "closed" : "open",
941
917
  children: /* @__PURE__ */ jsx(NavigationMenu.TopMenuList, { onFocus: resetAndShowMenu, ref: topMenuRef, children: LINKS.map((link) => /* @__PURE__ */ jsx(NavigationMenu.TopMenuItem, { children: /* @__PURE__ */ jsx(
942
918
  NavigationMenu.TopMenuTrigger,
943
919
  {
@@ -959,14 +935,20 @@ const Desktop = React__default.forwardRef(() => {
959
935
  (subLink) => {
960
936
  var _a2, _b, _c;
961
937
  return /* @__PURE__ */ jsxs(NavigationMenu.Item, { value: subLink.name, children: [
962
- 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(
938
+ 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: () => {
939
+ setSelectedMenuItem("", true);
940
+ setSpecifiedLink("");
941
+ }, children: /* @__PURE__ */ jsx(
963
942
  "img",
964
943
  {
965
944
  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
966
945
  draggable: "false",
967
946
  alt: "Telia logo"
968
947
  }
969
- ) }) : /* @__PURE__ */ jsx("a", { href: subLink.link, onClick: () => setSelectedMenuItem(""), children: /* @__PURE__ */ jsx(
948
+ ) }) : /* @__PURE__ */ jsx("a", { href: subLink.link, onClick: () => {
949
+ setSelectedMenuItem("", true);
950
+ setSpecifiedLink("");
951
+ }, children: /* @__PURE__ */ jsx(
970
952
  "img",
971
953
  {
972
954
  src: "https://cdn.voca.teliacompany.com/logo/Telia-primary-default-v2.svg",
@@ -988,17 +970,17 @@ const Desktop = React__default.forwardRef(() => {
988
970
  NavigationMenu.Link,
989
971
  {
990
972
  asChild: true,
991
- active: currentLocation === subLink.link,
973
+ active: selectedMenuItem === subLink.name && currentLocation === subLink.link,
992
974
  onClick: () => {
993
975
  setSpecifiedLink(subLink.name);
994
- setSelectedMenuItem(subLink.name);
976
+ setSelectedMenuItem(subLink.name, true);
995
977
  },
996
978
  children: subLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subLink.link, children: subLink.name }) : /* @__PURE__ */ jsx("a", { href: subLink.link, children: subLink.name })
997
979
  }
998
980
  ),
999
981
  /* @__PURE__ */ jsx(NavigationMenu.Content, { children: !!specifiedLink && subLink.name === specifiedLink && /* @__PURE__ */ jsxs(Fragment, { children: [
1000
- ((_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, subLink, links: subLink.links }) }),
1001
- ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "40px", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", subLink, links: subLink.highlightedLinks }) })
982
+ ((_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 }) }),
983
+ ((_c = subLink.highlightedLinks) == null ? void 0 : _c.length) > 0 && /* @__PURE__ */ jsx(Flex, { direction: "column", pt: "400", pl: "400", pr: "400", pb: "40px", className: styles[`${rootClassName}__colored-box`], children: /* @__PURE__ */ jsx(HightlightedLinksDesktop, { listName: "Nyttige snarveier", links: subLink.highlightedLinks }) })
1002
984
  ] }) })
1003
985
  ] }, subLink.name);
1004
986
  }
@@ -1041,7 +1023,7 @@ function useDebounceCallback(callback, delay) {
1041
1023
  debounceTimerRef.current = window.setTimeout(handleCallback, delay);
1042
1024
  }, [handleCallback, delay]);
1043
1025
  }
1044
- const HightlightedLinksDesktop = ({ subLink, links, listName }) => {
1026
+ const HightlightedLinksDesktop = ({ links, listName }) => {
1045
1027
  const rootContext = React__default.useContext(RootContext);
1046
1028
  if (!rootContext)
1047
1029
  return null;
@@ -1049,24 +1031,26 @@ const HightlightedLinksDesktop = ({ subLink, links, listName }) => {
1049
1031
  const currentLocation = rootContext.pathname.endsWith("/") ? rootContext.pathname : `${rootContext.pathname}/`;
1050
1032
  return /* @__PURE__ */ jsxs(Fragment, { children: [
1051
1033
  /* @__PURE__ */ jsx(Heading, { pl: "100", pb: "100", variant: "title-200", as: "h2", children: listName }),
1052
- /* @__PURE__ */ jsx(List$1, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map((subSubLink) => /* @__PURE__ */ jsx(List$1.Item, { children: /* @__PURE__ */ jsx(
1053
- NavigationMenu.Link,
1054
- {
1055
- asChild: true,
1056
- variant: "small",
1057
- active: getActiveSubLink(currentLocation, subLink.links || []) === subSubLink.link,
1058
- onClick: () => {
1059
- rootContext.setPathname(subSubLink.link);
1060
- },
1061
- children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
1062
- subSubLink.name,
1063
- /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
1064
- ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
1065
- subSubLink.name,
1066
- /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
1067
- ] }) })
1068
- }
1069
- ) }, subSubLink.name)) })
1034
+ /* @__PURE__ */ jsx(List$1, { className: styles[`${rootClassName}__list`], gap: "10", pl: "25", children: links == null ? void 0 : links.map(
1035
+ (subSubLink) => /* @__PURE__ */ jsx(List$1.Item, { children: /* @__PURE__ */ jsx(
1036
+ NavigationMenu.Link,
1037
+ {
1038
+ asChild: true,
1039
+ variant: "small",
1040
+ active: getActiveSubLink(currentLocation, links || []) === subSubLink.link,
1041
+ onClick: () => {
1042
+ rootContext.setPathname(subSubLink.link);
1043
+ },
1044
+ children: subSubLink.appKey === rootContext.appKey || rootContext.appKey === "storybook" ? /* @__PURE__ */ jsx(Link2, { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
1045
+ subSubLink.name,
1046
+ /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
1047
+ ] }) }) : /* @__PURE__ */ jsx("a", { href: subSubLink.link, children: /* @__PURE__ */ jsxs(Flex, { as: "span", gap: "100", align: "center", children: [
1048
+ subSubLink.name,
1049
+ /* @__PURE__ */ jsx(Icon, { name: "arrow-right" })
1050
+ ] }) })
1051
+ }
1052
+ ) }, subSubLink.name)
1053
+ ) })
1070
1054
  ] });
1071
1055
  };
1072
1056
  function Mobile(props) {
@@ -1250,8 +1234,12 @@ function Root({
1250
1234
  const [selectedMenuItem, setSelectedMenuItem] = React__default.useState(getInitialMenuItem(currentPath));
1251
1235
  const [selectedDomainItem, setSelectedDomainItem] = React__default.useState(getInitialDomain(currentPath));
1252
1236
  const [pathname, setPathname] = React__default.useState(currentPath || "");
1253
- const [specifiedLink, setSpecifiedLink] = React__default.useState("");
1237
+ const [specifiedLink, setSpecifiedLink] = React__default.useState(getInitialMenuItem(currentPath));
1238
+ const [hideMenu, setHideMenu] = React__default.useState(null);
1254
1239
  const classes = clsx([styles[`${rootClassName}`]], className);
1240
+ useEffect(() => {
1241
+ setPathname(currentPath || "");
1242
+ }, [currentPath]);
1255
1243
  return /* @__PURE__ */ jsx(
1256
1244
  RootContext.Provider,
1257
1245
  {
@@ -1285,7 +1273,8 @@ function Root({
1285
1273
  onCartOpenChange,
1286
1274
  drawerSize,
1287
1275
  specifiedLink,
1288
- setSpecifiedLink
1276
+ setSpecifiedLink,
1277
+ hideMenu
1289
1278
  },
1290
1279
  children: /* @__PURE__ */ jsx(Box, { ...props, className: classes, children: /* @__PURE__ */ jsxs(
1291
1280
  NavigationMenu,
@@ -1298,6 +1287,8 @@ function Root({
1298
1287
  return;
1299
1288
  setSelectedMenuItem(v);
1300
1289
  },
1290
+ onMouseEnter: () => setHideMenu(false),
1291
+ onMouseLeave: () => setHideMenu(true),
1301
1292
  children: [
1302
1293
  /* @__PURE__ */ jsxs(Box, { display: { sm: "none", lg: "block" }, children: [
1303
1294
  isSimplified && /* @__PURE__ */ jsx(DesktopSimplified, {}),
@@ -1344,7 +1335,7 @@ function getInitialMenuItem(currentPath) {
1344
1335
  const mainMenuPartOfLocation = locationArray[1];
1345
1336
  return (_f = (_e = PRIVATE_LINKS.links) == null ? void 0 : _e.find((link) => {
1346
1337
  var _a2;
1347
- return link.link === `/${mainMenuPartOfLocation}/` || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
1338
+ return link.name.toLowerCase() === mainMenuPartOfLocation || ((_a2 = link.links) == null ? void 0 : _a2.some((link2) => link2.link === `/${mainMenuPartOfLocation}/`));
1348
1339
  })) == null ? void 0 : _f.name;
1349
1340
  }
1350
1341
  Root.displayName = "GlobalNavigation";