optimized-react-component-library-xyz123 2.8.8 → 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.
Files changed (5) hide show
  1. package/dist/index.js +89 -72
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +89 -72
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -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,82 +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
- "aria-expanded": isOpen,
3793
- children: [
3794
- /* @__PURE__ */ jsx28("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ jsxs24(
3795
- "button",
3796
- {
3797
- className: "pts-navigation-close-button",
3798
- onClick: () => handleMenuClick("close"),
3799
- type: "button",
3800
- children: [
3801
- /* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(CloseIcon, {}) }),
3802
- /* @__PURE__ */ jsx28("span", { className: "pts-navigation-close-text", children: closeMenuText })
3803
- ]
3804
- }
3805
- ) }),
3806
- /* @__PURE__ */ jsx28("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ jsxs24(
3807
- "li",
3808
- {
3809
- className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3810
- lang: activatedLanguage,
3811
- children: [
3812
- /* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
3813
- /* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(
3814
- LinkComponent,
3815
- {
3816
- onClick: () => handleMenuClick("link"),
3817
- href,
3818
- children: label[activatedLanguage]
3819
- }
3820
- ) }),
3821
- children && /* @__PURE__ */ jsx28(
3822
- "button",
3823
- {
3824
- className: `pts-navigation-link-expand-button`,
3825
- onClick: () => handleSubMenu(label[activatedLanguage]),
3826
- "aria-label": getSubMenuAriaLabel(label),
3827
- "aria-expanded": openSubMenu === label[activatedLanguage],
3828
- "aria-controls": "sub-menu-" + index,
3829
- type: "button",
3830
- id: "menu-button-" + index,
3831
- 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, {}) })
3832
- }
3833
- )
3834
- ] }) }),
3835
- children && /* @__PURE__ */ jsx28(
3836
- "div",
3837
- {
3838
- hidden: openSubMenu !== label[activatedLanguage],
3839
- "aria-hidden": openSubMenu !== label[activatedLanguage],
3840
- className: "pts-sub-navigation-container",
3841
- id: "sub-menu-" + index,
3842
- role: "region",
3843
- 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(
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(
3844
3830
  LinkComponent,
3845
3831
  {
3846
3832
  onClick: () => handleMenuClick("link"),
3847
- href: href2,
3848
- children: label2[activatedLanguage]
3833
+ href,
3834
+ children: label[activatedLanguage]
3849
3835
  }
3850
- ) }, "nav-child-" + index2)) })
3851
- }
3852
- )
3853
- ]
3854
- },
3855
- "nav-" + index
3856
- )) })
3857
- ]
3858
- }
3859
- ) });
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
+ ] }) }),
3851
+ children && /* @__PURE__ */ jsx28(
3852
+ "div",
3853
+ {
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)) })
3867
+ }
3868
+ )
3869
+ ]
3870
+ },
3871
+ "nav-" + index
3872
+ )) })
3873
+ ]
3874
+ }
3875
+ )
3876
+ ] });
3860
3877
  };
3861
3878
  var NavigationStandard_default = Navigation;
3862
3879