optimized-react-component-library-xyz123 2.8.4 → 2.8.6

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 +108 -118
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +108 -118
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3802,18 +3802,19 @@ var Navigation = ({
3802
3802
  activatedLanguage = "sv",
3803
3803
  menuLinks = [],
3804
3804
  openButtonRef = null,
3805
- linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props }),
3806
- setKeyboardNavigationClose
3805
+ linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props })
3806
+ //setKeyboardNavigationClose,
3807
3807
  }) => {
3808
3808
  const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
3809
3809
  const navRef = (0, import_react16.useRef)(null);
3810
- const firstVisitRef = (0, import_react16.useRef)(true);
3811
3810
  const [openSubMenu, setOpenSubMenu] = (0, import_react16.useState)(null);
3812
3811
  const handleSubMenu = (label) => {
3813
3812
  setOpenSubMenu(openSubMenu === label ? null : label);
3814
3813
  };
3815
- const handleCloseButton = () => {
3814
+ const handleCloseButton = (type) => {
3815
+ var _a, _b;
3816
3816
  setIsMenyOpen && setIsMenyOpen(false);
3817
+ type === "close" ? (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus() : (_b = document.getElementById("page-start")) == null ? void 0 : _b.focus();
3817
3818
  };
3818
3819
  (0, import_react16.useEffect)(() => {
3819
3820
  if (!isOpen || !navRef.current) return;
@@ -3823,7 +3824,9 @@ var Navigation = ({
3823
3824
  const firstElement = focusableElements[0];
3824
3825
  const lastElement = focusableElements[focusableElements.length - 1];
3825
3826
  if (!firstElement || !lastElement) return;
3826
- firstElement == null ? void 0 : firstElement.focus();
3827
+ requestAnimationFrame(() => {
3828
+ firstElement.focus();
3829
+ });
3827
3830
  const handleKeyDown = (event) => {
3828
3831
  var _a;
3829
3832
  if (event.key === "Escape") {
@@ -3861,101 +3864,85 @@ var Navigation = ({
3861
3864
  }
3862
3865
  return "\xD6ppna undermeny f\xF6r " + label["sv"];
3863
3866
  };
3864
- const [instruction, setInstruction] = (0, import_react16.useState)("");
3865
- (0, import_react16.useEffect)(() => {
3866
- if (firstVisitRef.current) {
3867
- firstVisitRef.current = false;
3868
- return;
3869
- }
3870
- setInstruction(
3871
- isOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed"
3872
- );
3873
- }, [isOpen, activatedLanguage]);
3874
- const handleLinkKeyDown = (event) => {
3875
- if (event.key === "Enter") {
3876
- setKeyboardNavigationClose == null ? void 0 : setKeyboardNavigationClose();
3877
- }
3878
- };
3879
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
3880
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
3881
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3882
- "nav",
3883
- {
3884
- id: "main-navigation",
3885
- ref: navRef,
3886
- "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
3887
- className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
3888
- inert: !isOpen,
3889
- children: [
3890
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3891
- "button",
3892
- {
3893
- className: "pts-navigation-close-button",
3894
- onClick: handleCloseButton,
3895
- type: "button",
3896
- children: [
3897
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
3898
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
3899
- ]
3900
- }
3901
- ) }),
3902
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3903
- "li",
3904
- {
3905
- className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3906
- lang: activatedLanguage,
3907
- children: [
3908
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
3909
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3910
- LinkComponent,
3911
- {
3912
- onClick: handleCloseButton,
3913
- href,
3914
- onKeyDown: handleLinkKeyDown,
3915
- children: label[activatedLanguage]
3916
- }
3917
- ) }),
3918
- children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3919
- "button",
3920
- {
3921
- className: `pts-navigation-link-expand-button`,
3922
- onClick: () => handleSubMenu(label[activatedLanguage]),
3923
- "aria-label": getSubMenuAriaLabel(label),
3924
- "aria-expanded": openSubMenu === label[activatedLanguage],
3925
- "aria-controls": "sub-menu-" + index,
3926
- type: "button",
3927
- id: "menu-button-" + index,
3928
- children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddIcon, {}) })
3929
- }
3930
- )
3931
- ] }) }),
3867
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3868
+ "nav",
3869
+ {
3870
+ id: "main-navigation",
3871
+ ref: navRef,
3872
+ "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
3873
+ className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
3874
+ inert: !isOpen,
3875
+ children: [
3876
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3877
+ "button",
3878
+ {
3879
+ className: "pts-navigation-close-button",
3880
+ onClick: () => handleCloseButton("close"),
3881
+ type: "button",
3882
+ children: [
3883
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
3884
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
3885
+ ]
3886
+ }
3887
+ ) }),
3888
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3889
+ "li",
3890
+ {
3891
+ className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3892
+ lang: activatedLanguage,
3893
+ children: [
3894
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
3895
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: href && href.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3896
+ LinkComponent,
3897
+ {
3898
+ onClick: () => {
3899
+ handleCloseButton("link");
3900
+ },
3901
+ href,
3902
+ children: label[activatedLanguage]
3903
+ }
3904
+ ) }),
3932
3905
  children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3933
- "div",
3906
+ "button",
3934
3907
  {
3935
- hidden: openSubMenu !== label[activatedLanguage],
3936
- "aria-hidden": openSubMenu !== label[activatedLanguage],
3937
- className: "pts-sub-navigation-container",
3938
- id: "sub-menu-" + index,
3939
- role: "region",
3940
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3941
- LinkComponent,
3942
- {
3943
- onClick: handleCloseButton,
3944
- href: href2,
3945
- onKeyDown: handleLinkKeyDown,
3946
- children: label2[activatedLanguage]
3947
- }
3948
- ) }, "nav-child-" + index2)) })
3908
+ className: `pts-navigation-link-expand-button`,
3909
+ onClick: () => handleSubMenu(label[activatedLanguage]),
3910
+ "aria-label": getSubMenuAriaLabel(label),
3911
+ "aria-expanded": openSubMenu === label[activatedLanguage],
3912
+ "aria-controls": "sub-menu-" + index,
3913
+ type: "button",
3914
+ id: "menu-button-" + index,
3915
+ children: openSubMenu === label[activatedLanguage] ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-contract-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MinusIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": true, className: "pts-expand-icon", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(AddIcon, {}) })
3949
3916
  }
3950
3917
  )
3951
- ]
3952
- },
3953
- "nav-" + index
3954
- )) })
3955
- ]
3956
- }
3957
- )
3958
- ] });
3918
+ ] }) }),
3919
+ children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3920
+ "div",
3921
+ {
3922
+ hidden: openSubMenu !== label[activatedLanguage],
3923
+ "aria-hidden": openSubMenu !== label[activatedLanguage],
3924
+ className: "pts-sub-navigation-container",
3925
+ id: "sub-menu-" + index,
3926
+ role: "region",
3927
+ children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("ul", { className: "pts-sub-navigation-list", lang: activatedLanguage, children: children.map(({ label: label2, href: href2 }, index2) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("li", { className: "pts-sub-navigation-item", lang: activatedLanguage, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3928
+ LinkComponent,
3929
+ {
3930
+ onClick: () => {
3931
+ handleCloseButton("link");
3932
+ },
3933
+ href: href2,
3934
+ children: label2[activatedLanguage]
3935
+ }
3936
+ ) }, "nav-child-" + index2)) })
3937
+ }
3938
+ )
3939
+ ]
3940
+ },
3941
+ "nav-" + index
3942
+ )) })
3943
+ ]
3944
+ }
3945
+ ) });
3959
3946
  };
3960
3947
  var NavigationStandard_default = Navigation;
3961
3948
 
@@ -4026,7 +4013,6 @@ var NavigationHeader = ({
4026
4013
  }) => {
4027
4014
  const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
4028
4015
  const hasHeadline = headline && headline.length > 0;
4029
- const menuButtonFocusRef = (0, import_react18.useRef)(null);
4030
4016
  const handleLanguageClick = () => {
4031
4017
  if (activatedLanguage === "sv") {
4032
4018
  SetActivatedLanguage("en");
@@ -4040,14 +4026,7 @@ var NavigationHeader = ({
4040
4026
  };
4041
4027
  const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
4042
4028
  const [hasBeenOpen, setHasBeenOpen] = (0, import_react18.useState)(false);
4043
- const shouldRestoreFocusRef = (0, import_react18.useRef)(false);
4044
- (0, import_react18.useEffect)(() => {
4045
- var _a;
4046
- if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen && shouldRestoreFocusRef.current) {
4047
- (_a = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _a.focus();
4048
- shouldRestoreFocusRef.current = false;
4049
- }
4050
- }, [isMenuOpen, navigationCloseFocusId, hasBeenOpen]);
4029
+ const menuButtonFocusRef = (0, import_react18.useRef)(null);
4051
4030
  const handleMenuClick = () => {
4052
4031
  setIsMenuOpen((prev) => {
4053
4032
  const open = !prev;
@@ -4057,6 +4036,15 @@ var NavigationHeader = ({
4057
4036
  return open;
4058
4037
  });
4059
4038
  };
4039
+ const [instruction, setInstruction] = (0, import_react18.useState)("");
4040
+ (0, import_react18.useEffect)(() => {
4041
+ if (!hasBeenOpen) {
4042
+ return;
4043
+ }
4044
+ setInstruction(
4045
+ isMenuOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed"
4046
+ );
4047
+ }, [isMenuOpen, activatedLanguage]);
4060
4048
  const getMenuLabel = () => {
4061
4049
  const labels = {
4062
4050
  sv: isMenuOpen ? "St\xE4ng meny" : "Meny",
@@ -4133,20 +4121,22 @@ var NavigationHeader = ({
4133
4121
  )
4134
4122
  ] }) })
4135
4123
  ] }) }),
4136
- useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4137
- NavigationStandard_default,
4138
- {
4139
- activatedLanguage,
4140
- setIsMenyOpen: setIsMenuOpen,
4141
- menuLinks,
4142
- isOpen: isMenuOpen,
4143
- openButtonRef: menuButtonFocusRef,
4144
- linkComponent: LinkComponent,
4145
- setKeyboardNavigationClose: () => {
4146
- shouldRestoreFocusRef.current = true;
4124
+ useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
4125
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { "aria-live": "polite", className: "sr-only", children: instruction }),
4126
+ /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4127
+ NavigationStandard_default,
4128
+ {
4129
+ activatedLanguage,
4130
+ setIsMenyOpen: setIsMenuOpen,
4131
+ menuLinks,
4132
+ isOpen: isMenuOpen,
4133
+ openButtonRef: menuButtonFocusRef,
4134
+ linkComponent: LinkComponent,
4135
+ setKeyboardNavigationClose: () => {
4136
+ }
4147
4137
  }
4148
- }
4149
- ),
4138
+ )
4139
+ ] }),
4150
4140
  isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4151
4141
  "div",
4152
4142
  {