optimized-react-component-library-xyz123 2.8.3 → 2.8.5
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +109 -96
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +109 -96
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/css/darkMode.css +2 -1
- package/src/css/styles.css +13 -2
package/dist/index.mjs
CHANGED
|
@@ -1421,7 +1421,7 @@ var MenuIcon = () => /* @__PURE__ */ jsxs13("svg", { width: "15", height: "15",
|
|
|
1421
1421
|
/* @__PURE__ */ jsx16("line", { x1: "0.666504", y1: "7", x2: "20.6665", y2: "7", stroke: "#6E3282", strokeWidth: "2" }),
|
|
1422
1422
|
/* @__PURE__ */ jsx16("line", { x1: "0.666504", y1: "13", x2: "20.6665", y2: "13", stroke: "#6E3282", strokeWidth: "2" })
|
|
1423
1423
|
] });
|
|
1424
|
-
var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "
|
|
1424
|
+
var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx16(
|
|
1425
1425
|
"path",
|
|
1426
1426
|
{
|
|
1427
1427
|
fillRule: "evenodd",
|
|
@@ -1430,7 +1430,7 @@ var ExpandIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/
|
|
|
1430
1430
|
fill: "white"
|
|
1431
1431
|
}
|
|
1432
1432
|
) });
|
|
1433
|
-
var CollapseIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "
|
|
1433
|
+
var CollapseIcon = () => /* @__PURE__ */ jsx16("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx16(
|
|
1434
1434
|
"path",
|
|
1435
1435
|
{
|
|
1436
1436
|
fillRule: "evenodd",
|
|
@@ -3719,11 +3719,11 @@ var Navigation = ({
|
|
|
3719
3719
|
activatedLanguage = "sv",
|
|
3720
3720
|
menuLinks = [],
|
|
3721
3721
|
openButtonRef = null,
|
|
3722
|
-
linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx28("a", { ...props })
|
|
3722
|
+
linkComponent: LinkComponent = (props) => /* @__PURE__ */ jsx28("a", { ...props }),
|
|
3723
|
+
setKeyboardNavigationClose
|
|
3723
3724
|
}) => {
|
|
3724
3725
|
const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
|
|
3725
3726
|
const navRef = useRef3(null);
|
|
3726
|
-
const firstVisitRef = useRef3(true);
|
|
3727
3727
|
const [openSubMenu, setOpenSubMenu] = useState9(null);
|
|
3728
3728
|
const handleSubMenu = (label) => {
|
|
3729
3729
|
setOpenSubMenu(openSubMenu === label ? null : label);
|
|
@@ -3739,7 +3739,9 @@ var Navigation = ({
|
|
|
3739
3739
|
const firstElement = focusableElements[0];
|
|
3740
3740
|
const lastElement = focusableElements[focusableElements.length - 1];
|
|
3741
3741
|
if (!firstElement || !lastElement) return;
|
|
3742
|
-
|
|
3742
|
+
requestAnimationFrame(() => {
|
|
3743
|
+
firstElement.focus();
|
|
3744
|
+
});
|
|
3743
3745
|
const handleKeyDown = (event) => {
|
|
3744
3746
|
var _a;
|
|
3745
3747
|
if (event.key === "Escape") {
|
|
@@ -3777,80 +3779,85 @@ var Navigation = ({
|
|
|
3777
3779
|
}
|
|
3778
3780
|
return "\xD6ppna undermeny f\xF6r " + label["sv"];
|
|
3779
3781
|
};
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
|
|
3786
|
-
|
|
3787
|
-
|
|
3788
|
-
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
|
|
3795
|
-
|
|
3796
|
-
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
|
|
3804
|
-
|
|
3805
|
-
|
|
3806
|
-
|
|
3807
|
-
children: [
|
|
3808
|
-
/* @__PURE__ */ jsx28("span", {
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
children: [
|
|
3819
|
-
/* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
|
|
3820
|
-
/* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(LinkComponent, { onClick: handleCloseButton, href, children: label[activatedLanguage] }) }),
|
|
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
|
-
] }) }),
|
|
3782
|
+
return /* @__PURE__ */ jsx28(Fragment18, { children: /* @__PURE__ */ jsxs24(
|
|
3783
|
+
"nav",
|
|
3784
|
+
{
|
|
3785
|
+
id: "main-navigation",
|
|
3786
|
+
ref: navRef,
|
|
3787
|
+
"aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
|
|
3788
|
+
className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
|
|
3789
|
+
inert: !isOpen,
|
|
3790
|
+
children: [
|
|
3791
|
+
/* @__PURE__ */ jsx28("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ jsxs24(
|
|
3792
|
+
"button",
|
|
3793
|
+
{
|
|
3794
|
+
className: "pts-navigation-close-button",
|
|
3795
|
+
onClick: handleCloseButton,
|
|
3796
|
+
type: "button",
|
|
3797
|
+
children: [
|
|
3798
|
+
/* @__PURE__ */ jsx28("span", { "aria-hidden": "true", children: /* @__PURE__ */ jsx28(CloseIcon, {}) }),
|
|
3799
|
+
/* @__PURE__ */ jsx28("span", { className: "pts-navigation-close-text", children: closeMenuText })
|
|
3800
|
+
]
|
|
3801
|
+
}
|
|
3802
|
+
) }),
|
|
3803
|
+
/* @__PURE__ */ jsx28("ul", { className: "pts-navigation-link-list", lang: activatedLanguage, children: menuLinks && menuLinks.map(({ label, href, children }, index) => /* @__PURE__ */ jsxs24(
|
|
3804
|
+
"li",
|
|
3805
|
+
{
|
|
3806
|
+
className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
|
|
3807
|
+
lang: activatedLanguage,
|
|
3808
|
+
children: [
|
|
3809
|
+
/* @__PURE__ */ jsx28("div", { children: /* @__PURE__ */ jsxs24("div", { className: "pts-navigation-button", children: [
|
|
3810
|
+
/* @__PURE__ */ jsx28("span", { children: href && href.length === 0 ? /* @__PURE__ */ jsx28("span", { children: label[activatedLanguage] }) : /* @__PURE__ */ jsx28(
|
|
3811
|
+
LinkComponent,
|
|
3812
|
+
{
|
|
3813
|
+
onClick: () => {
|
|
3814
|
+
handleCloseButton();
|
|
3815
|
+
},
|
|
3816
|
+
href,
|
|
3817
|
+
children: label[activatedLanguage]
|
|
3818
|
+
}
|
|
3819
|
+
) }),
|
|
3835
3820
|
children && /* @__PURE__ */ jsx28(
|
|
3836
|
-
"
|
|
3821
|
+
"button",
|
|
3837
3822
|
{
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
|
|
3823
|
+
className: `pts-navigation-link-expand-button`,
|
|
3824
|
+
onClick: () => handleSubMenu(label[activatedLanguage]),
|
|
3825
|
+
"aria-label": getSubMenuAriaLabel(label),
|
|
3826
|
+
"aria-expanded": openSubMenu === label[activatedLanguage],
|
|
3827
|
+
"aria-controls": "sub-menu-" + index,
|
|
3828
|
+
type: "button",
|
|
3829
|
+
id: "menu-button-" + index,
|
|
3830
|
+
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, {}) })
|
|
3844
3831
|
}
|
|
3845
3832
|
)
|
|
3846
|
-
]
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3833
|
+
] }) }),
|
|
3834
|
+
children && /* @__PURE__ */ jsx28(
|
|
3835
|
+
"div",
|
|
3836
|
+
{
|
|
3837
|
+
hidden: openSubMenu !== label[activatedLanguage],
|
|
3838
|
+
"aria-hidden": openSubMenu !== label[activatedLanguage],
|
|
3839
|
+
className: "pts-sub-navigation-container",
|
|
3840
|
+
id: "sub-menu-" + index,
|
|
3841
|
+
role: "region",
|
|
3842
|
+
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(
|
|
3843
|
+
LinkComponent,
|
|
3844
|
+
{
|
|
3845
|
+
onClick: () => {
|
|
3846
|
+
handleCloseButton();
|
|
3847
|
+
},
|
|
3848
|
+
href: href2,
|
|
3849
|
+
children: label2[activatedLanguage]
|
|
3850
|
+
}
|
|
3851
|
+
) }, "nav-child-" + index2)) })
|
|
3852
|
+
}
|
|
3853
|
+
)
|
|
3854
|
+
]
|
|
3855
|
+
},
|
|
3856
|
+
"nav-" + index
|
|
3857
|
+
)) })
|
|
3858
|
+
]
|
|
3859
|
+
}
|
|
3860
|
+
) });
|
|
3854
3861
|
};
|
|
3855
3862
|
var NavigationStandard_default = Navigation;
|
|
3856
3863
|
|
|
@@ -3921,7 +3928,6 @@ var NavigationHeader = ({
|
|
|
3921
3928
|
}) => {
|
|
3922
3929
|
const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
|
|
3923
3930
|
const hasHeadline = headline && headline.length > 0;
|
|
3924
|
-
const menuButtonFocusRef = useRef4(null);
|
|
3925
3931
|
const handleLanguageClick = () => {
|
|
3926
3932
|
if (activatedLanguage === "sv") {
|
|
3927
3933
|
SetActivatedLanguage("en");
|
|
@@ -3935,14 +3941,7 @@ var NavigationHeader = ({
|
|
|
3935
3941
|
};
|
|
3936
3942
|
const [isMenuOpen, setIsMenuOpen] = useState11(false);
|
|
3937
3943
|
const [hasBeenOpen, setHasBeenOpen] = useState11(false);
|
|
3938
|
-
|
|
3939
|
-
var _a;
|
|
3940
|
-
console.log(navigationCloseFocusId);
|
|
3941
|
-
if (!isMenuOpen && navigationCloseFocusId && hasBeenOpen) {
|
|
3942
|
-
(_a = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _a.focus();
|
|
3943
|
-
console.log(navigationCloseFocusId, document.getElementById(navigationCloseFocusId));
|
|
3944
|
-
}
|
|
3945
|
-
}, [isMenuOpen]);
|
|
3944
|
+
const menuButtonFocusRef = useRef4(null);
|
|
3946
3945
|
const handleMenuClick = () => {
|
|
3947
3946
|
setIsMenuOpen((prev) => {
|
|
3948
3947
|
const open = !prev;
|
|
@@ -3952,6 +3951,15 @@ var NavigationHeader = ({
|
|
|
3952
3951
|
return open;
|
|
3953
3952
|
});
|
|
3954
3953
|
};
|
|
3954
|
+
const [instruction, setInstruction] = useState11("");
|
|
3955
|
+
useEffect14(() => {
|
|
3956
|
+
if (!hasBeenOpen) {
|
|
3957
|
+
return;
|
|
3958
|
+
}
|
|
3959
|
+
setInstruction(
|
|
3960
|
+
isMenuOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed"
|
|
3961
|
+
);
|
|
3962
|
+
}, [isMenuOpen, activatedLanguage]);
|
|
3955
3963
|
const getMenuLabel = () => {
|
|
3956
3964
|
const labels = {
|
|
3957
3965
|
sv: isMenuOpen ? "St\xE4ng meny" : "Meny",
|
|
@@ -4028,17 +4036,22 @@ var NavigationHeader = ({
|
|
|
4028
4036
|
)
|
|
4029
4037
|
] }) })
|
|
4030
4038
|
] }) }),
|
|
4031
|
-
useNavigationMenu && /* @__PURE__ */
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
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
|
+
setKeyboardNavigationClose: () => {
|
|
4051
|
+
}
|
|
4052
|
+
}
|
|
4053
|
+
)
|
|
4054
|
+
] }),
|
|
4042
4055
|
isMenuOpen && /* @__PURE__ */ jsx31(
|
|
4043
4056
|
"div",
|
|
4044
4057
|
{
|
|
@@ -4210,7 +4223,7 @@ var Collapse = ({
|
|
|
4210
4223
|
"aria-controls": contentId,
|
|
4211
4224
|
children: [
|
|
4212
4225
|
`${isOpen ? closeLabel : openLabel} ${title}`,
|
|
4213
|
-
/* @__PURE__ */ jsx36("span", { className: "pts-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx36(CollapseIcon, {}) : /* @__PURE__ */ jsx36(ExpandIcon, {}) })
|
|
4226
|
+
/* @__PURE__ */ jsx36("span", { className: "pts-collapse-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ jsx36(CollapseIcon, {}) : /* @__PURE__ */ jsx36(ExpandIcon, {}) })
|
|
4214
4227
|
]
|
|
4215
4228
|
}
|
|
4216
4229
|
),
|