optimized-react-component-library-xyz123 2.8.7 → 2.8.9

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.
package/dist/index.mjs CHANGED
@@ -3708,7 +3708,7 @@ var Header = ({
3708
3708
  var HeaderStandard_default = Header;
3709
3709
 
3710
3710
  // src/components/layout/NavigationHeaderStandard/NavigationHeaderStandard.tsx
3711
- import { useEffect as useEffect14, useRef as useRef4, useState as useState11 } from "react";
3711
+ import { useRef as useRef4, useState as useState11 } from "react";
3712
3712
 
3713
3713
  // src/components/layout/NavigationStandard/NavigationStandard.tsx
3714
3714
  import { useEffect as useEffect13, useState as useState9, useRef as useRef3 } from "react";
@@ -3724,6 +3724,7 @@ var Navigation = ({
3724
3724
  }) => {
3725
3725
  const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
3726
3726
  const navRef = useRef3(null);
3727
+ const firstVisitRef = useRef3(true);
3727
3728
  const [openSubMenu, setOpenSubMenu] = useState9(null);
3728
3729
  const handleSubMenu = (label) => {
3729
3730
  setOpenSubMenu(openSubMenu === label ? null : label);
@@ -3781,85 +3782,98 @@ var Navigation = ({
3781
3782
  }
3782
3783
  return "\xD6ppna undermeny f\xF6r " + label["sv"];
3783
3784
  };
3784
- return /* @__PURE__ */ jsx28(Fragment18, { children: /* @__PURE__ */ jsxs24(
3785
- "nav",
3786
- {
3787
- id: "main-navigation",
3788
- ref: navRef,
3789
- "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
3790
- className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
3791
- inert: !isOpen,
3792
- children: [
3793
- /* @__PURE__ */ jsx28("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ jsxs24(
3794
- "button",
3795
- {
3796
- className: "pts-navigation-close-button",
3797
- onClick: () => handleMenuClick("close"),
3798
- type: "button",
3799
- children: [
3800
- /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(CloseIcon, {}) }),
3801
- /* @__PURE__ */ jsx28("span", { className: "pts-navigation-close-text", children: closeMenuText })
3802
- ]
3803
- }
3804
- ) }),
3805
- /* @__PURE__ */ jsx28("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ jsxs24(
3806
- "li",
3807
- {
3808
- className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3809
- lang: activatedLanguage,
3810
- children: [
3811
- /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
3812
- /* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(
3813
- LinkComponent,
3814
- {
3815
- onClick: () => {
3816
- handleMenuClick("link");
3817
- },
3818
- href,
3819
- children: label[activatedLanguage]
3820
- }
3821
- ) }),
3785
+ const [instruction, setInstruction] = useState9("");
3786
+ useEffect13(() => {
3787
+ if (firstVisitRef.current) {
3788
+ firstVisitRef.current = false;
3789
+ return;
3790
+ }
3791
+ if (isOpen)
3792
+ requestAnimationFrame(() => {
3793
+ setInstruction(
3794
+ activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened"
3795
+ );
3796
+ });
3797
+ }, [isOpen, activatedLanguage]);
3798
+ return /* @__PURE__ */ jsxs24(Fragment18, { children: [
3799
+ /* @__PURE__ */ jsx28("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
3800
+ /* @__PURE__ */ jsxs24(
3801
+ "nav",
3802
+ {
3803
+ id: "main-navigation",
3804
+ ref: navRef,
3805
+ "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
3806
+ className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
3807
+ inert: !isOpen,
3808
+ "aria-expanded": isOpen,
3809
+ children: [
3810
+ /* @__PURE__ */ jsx28("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ jsxs24(
3811
+ "button",
3812
+ {
3813
+ className: "pts-navigation-close-button",
3814
+ onClick: () => handleMenuClick("close"),
3815
+ type: "button",
3816
+ children: [
3817
+ /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(CloseIcon, {}) }),
3818
+ /* @__PURE__ */ jsx28("span", { className: "pts-navigation-close-text", children: closeMenuText })
3819
+ ]
3820
+ }
3821
+ ) }),
3822
+ /* @__PURE__ */ jsx28("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ jsxs24(
3823
+ "li",
3824
+ {
3825
+ className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3826
+ lang: activatedLanguage,
3827
+ children: [
3828
+ /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
3829
+ /* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(
3830
+ LinkComponent,
3831
+ {
3832
+ onClick: () => handleMenuClick("link"),
3833
+ href,
3834
+ children: label[activatedLanguage]
3835
+ }
3836
+ ) }),
3837
+ children && /* @__PURE__ */ jsx28(
3838
+ "button",
3839
+ {
3840
+ className: `pts-navigation-link-expand-button`,
3841
+ onClick: () => handleSubMenu(label[activatedLanguage]),
3842
+ "aria-label": getSubMenuAriaLabel(label),
3843
+ "aria-expanded": openSubMenu === label[activatedLanguage],
3844
+ "aria-controls": "sub-menu-" + index,
3845
+ type: "button",
3846
+ id: "menu-button-" + index,
3847
+ children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ jsx28(MinusIcon, {}) }) : /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ jsx28(AddIcon, {}) })
3848
+ }
3849
+ )
3850
+ ] }) }),
3822
3851
  children && /* @__PURE__ */ jsx28(
3823
- "button",
3852
+ "div",
3824
3853
  {
3825
- className: `pts-navigation-link-expand-button`,
3826
- onClick: () => handleSubMenu(label[activatedLanguage]),
3827
- "aria-label": getSubMenuAriaLabel(label),
3828
- "aria-expanded": openSubMenu === label[activatedLanguage],
3829
- "aria-controls": "sub-menu-" + index,
3830
- type: "button",
3831
- id: "menu-button-" + index,
3832
- children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ jsx28(MinusIcon, {}) }) : /* @__PURE__ */ jsx28("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ jsx28(AddIcon, {}) })
3854
+ hidden: openSubMenu !== label[activatedLanguage],
3855
+ "aria-hidden": openSubMenu !== label[activatedLanguage],
3856
+ className: "pts-sub-navigation-container",
3857
+ id: "sub-menu-" + index,
3858
+ role: "region",
3859
+ children: /* @__PURE__ */ jsx28("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ jsx28("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ jsx28(
3860
+ LinkComponent,
3861
+ {
3862
+ onClick: () => handleMenuClick("link"),
3863
+ href: href2,
3864
+ children: label2[activatedLanguage]
3865
+ }
3866
+ ) }, "nav-child-" + index2)) })
3833
3867
  }
3834
3868
  )
3835
- ] }) }),
3836
- children && /* @__PURE__ */ jsx28(
3837
- "div",
3838
- {
3839
- hidden: openSubMenu !== label[activatedLanguage],
3840
- "aria-hidden": openSubMenu !== label[activatedLanguage],
3841
- className: "pts-sub-navigation-container",
3842
- id: "sub-menu-" + index,
3843
- role: "region",
3844
- children: /* @__PURE__ */ jsx28("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ jsx28("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ jsx28(
3845
- LinkComponent,
3846
- {
3847
- onClick: () => {
3848
- handleMenuClick("link");
3849
- },
3850
- href: href2,
3851
- children: label2[activatedLanguage]
3852
- }
3853
- ) }, "nav-child-" + index2)) })
3854
- }
3855
- )
3856
- ]
3857
- },
3858
- "nav-" + index
3859
- )) })
3860
- ]
3861
- }
3862
- ) });
3869
+ ]
3870
+ },
3871
+ "nav-" + index
3872
+ )) })
3873
+ ]
3874
+ }
3875
+ )
3876
+ ] });
3863
3877
  };
3864
3878
  var NavigationStandard_default = Navigation;
3865
3879
 
@@ -3942,24 +3956,10 @@ var NavigationHeader = ({
3942
3956
  else return "Svenska";
3943
3957
  };
3944
3958
  const [isMenuOpen, setIsMenuOpen] = useState11(false);
3945
- const [hasBeenOpen, setHasBeenOpen] = useState11(false);
3946
3959
  const menuButtonFocusRef = useRef4(null);
3947
3960
  const handleMenuClick = () => {
3948
- setIsMenuOpen((prev) => {
3949
- const open = !prev;
3950
- if (open) {
3951
- setHasBeenOpen(true);
3952
- }
3953
- return open;
3954
- });
3961
+ setIsMenuOpen((prev) => !prev);
3955
3962
  };
3956
- const [instruction, setInstruction] = useState11("");
3957
- useEffect14(() => {
3958
- if (!isMenuOpen)
3959
- return;
3960
- const message = activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened";
3961
- setInstruction(message);
3962
- }, [isMenuOpen, activatedLanguage]);
3963
3963
  const getMenuLabel = () => {
3964
3964
  const labels = {
3965
3965
  sv: isMenuOpen ? "St\xE4ng meny" : "Meny",
@@ -4036,21 +4036,18 @@ var NavigationHeader = ({
4036
4036
  )
4037
4037
  ] }) })
4038
4038
  ] }) }),
4039
- useNavigationMenu && /* @__PURE__ */ jsxs27(Fragment19, { children: [
4040
- /* @__PURE__ */ jsx31("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
4041
- /* @__PURE__ */ jsx31(
4042
- NavigationStandard_default,
4043
- {
4044
- activatedLanguage,
4045
- setIsMenyOpen: setIsMenuOpen,
4046
- menuLinks,
4047
- isOpen: isMenuOpen,
4048
- openButtonRef: menuButtonFocusRef,
4049
- linkComponent: LinkComponent,
4050
- navigationCloseFocusId
4051
- }
4052
- )
4053
- ] }),
4039
+ useNavigationMenu && /* @__PURE__ */ jsx31(Fragment19, { children: /* @__PURE__ */ jsx31(
4040
+ NavigationStandard_default,
4041
+ {
4042
+ activatedLanguage,
4043
+ setIsMenyOpen: setIsMenuOpen,
4044
+ menuLinks,
4045
+ isOpen: isMenuOpen,
4046
+ openButtonRef: menuButtonFocusRef,
4047
+ linkComponent: LinkComponent,
4048
+ navigationCloseFocusId
4049
+ }
4050
+ ) }),
4054
4051
  isMenuOpen && /* @__PURE__ */ jsx31(
4055
4052
  "div",
4056
4053
  {