optimized-react-component-library-xyz123 2.8.8 → 2.8.10

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 (11) hide show
  1. package/dist/index.d.mts +0 -2
  2. package/dist/index.d.ts +0 -2
  3. package/dist/index.js +79 -97
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +79 -97
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +1 -1
  8. package/src/css/darkMode.css +6 -4
  9. package/src/css/e-tjanst-root.css +2 -2
  10. package/src/css/questions.css +15 -4
  11. package/src/css/styles.css +18 -23
package/dist/index.d.mts CHANGED
@@ -837,7 +837,6 @@ interface NavigationHeaderProps {
837
837
  menuLinks: INavigationItem[];
838
838
  linkComponent?: ElementType;
839
839
  noLogoLink?: boolean;
840
- navigationCloseFocusId?: string;
841
840
  }
842
841
 
843
842
  declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -849,7 +848,6 @@ interface NavigationProps {
849
848
  isOpen: boolean;
850
849
  openButtonRef: RefObject<HTMLButtonElement | null>;
851
850
  linkComponent?: ElementType;
852
- navigationCloseFocusId?: string;
853
851
  }
854
852
  type Locale = 'sv' | 'en';
855
853
  type Label = Record<Locale, string>;
package/dist/index.d.ts CHANGED
@@ -837,7 +837,6 @@ interface NavigationHeaderProps {
837
837
  menuLinks: INavigationItem[];
838
838
  linkComponent?: ElementType;
839
839
  noLogoLink?: boolean;
840
- navigationCloseFocusId?: string;
841
840
  }
842
841
 
843
842
  declare const NavigationHeader: FC<NavigationHeaderProps>;
@@ -849,7 +848,6 @@ interface NavigationProps {
849
848
  isOpen: boolean;
850
849
  openButtonRef: RefObject<HTMLButtonElement | null>;
851
850
  linkComponent?: ElementType;
852
- navigationCloseFocusId?: string;
853
851
  }
854
852
  type Locale = 'sv' | 'en';
855
853
  type Label = Record<Locale, string>;
package/dist/index.js CHANGED
@@ -1507,7 +1507,7 @@ var MenuIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("svg", { wid
1507
1507
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "7", x2: "20.6665", y2: "7", stroke: "#6E3282", strokeWidth: "2" }),
1508
1508
  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("line", { x1: "0.666504", y1: "13", x2: "20.6665", y2: "13", stroke: "#6E3282", strokeWidth: "2" })
1509
1509
  ] });
1510
- var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1510
+ var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1511
1511
  "path",
1512
1512
  {
1513
1513
  fillRule: "evenodd",
@@ -1516,7 +1516,7 @@ var ExpandIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xm
1516
1516
  fill: "white"
1517
1517
  }
1518
1518
  ) });
1519
- var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1519
+ var CollapseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "16", viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
1520
1520
  "path",
1521
1521
  {
1522
1522
  fillRule: "evenodd",
@@ -1992,7 +1992,9 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
1992
1992
  var TextBody = ({ data }) => {
1993
1993
  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pts-textBody-container", children: [
1994
1994
  /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: `${!data.body || !data.linksForMoreInfo ? "" : "pts-textbody-createspace"}`, children: [
1995
- data.body && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(data.body) } }),
1995
+ data.body && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(data.body, {
1996
+ ALLOWED_ATTR: ["target", "href"]
1997
+ }) } }),
1996
1998
  data.linksForMoreInfo && data.linksForMoreInfo.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("ul", { className: "pts-moreinfo-list", children: data.linksForMoreInfo.map((link, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("li", { className: index > 0 ? "notFirstInList" : "", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
1997
1999
  "a",
1998
2000
  {
@@ -3802,8 +3804,7 @@ var Navigation = ({
3802
3804
  activatedLanguage = "sv",
3803
3805
  menuLinks = [],
3804
3806
  openButtonRef = null,
3805
- linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props }),
3806
- navigationCloseFocusId
3807
+ linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("a", { ...props })
3807
3808
  }) => {
3808
3809
  const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
3809
3810
  const navRef = (0, import_react16.useRef)(null);
@@ -3811,10 +3812,8 @@ var Navigation = ({
3811
3812
  const handleSubMenu = (label) => {
3812
3813
  setOpenSubMenu(openSubMenu === label ? null : label);
3813
3814
  };
3814
- const handleMenuClick = (typeOfInteraction) => {
3815
- var _a, _b;
3816
- setIsMenyOpen == null ? void 0 : setIsMenyOpen(false);
3817
- typeOfInteraction === "close" ? (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus() : navigationCloseFocusId && ((_b = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _b.focus());
3815
+ const handleCloseButton = () => {
3816
+ setIsMenyOpen && setIsMenyOpen(false);
3818
3817
  };
3819
3818
  (0, import_react16.useEffect)(() => {
3820
3819
  if (!isOpen || !navRef.current) return;
@@ -3824,9 +3823,7 @@ var Navigation = ({
3824
3823
  const firstElement = focusableElements[0];
3825
3824
  const lastElement = focusableElements[focusableElements.length - 1];
3826
3825
  if (!firstElement || !lastElement) return;
3827
- requestAnimationFrame(() => {
3828
- firstElement.focus();
3829
- });
3826
+ firstElement == null ? void 0 : firstElement.focus();
3830
3827
  const handleKeyDown = (event) => {
3831
3828
  var _a;
3832
3829
  if (event.key === "Escape") {
@@ -3864,82 +3861,70 @@ var Navigation = ({
3864
3861
  }
3865
3862
  return "\xD6ppna undermeny f\xF6r " + label["sv"];
3866
3863
  };
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
- "aria-expanded": isOpen,
3876
- children: [
3877
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3878
- "button",
3879
- {
3880
- className: "pts-navigation-close-button",
3881
- onClick: () => handleMenuClick("close"),
3882
- type: "button",
3883
- children: [
3884
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
3885
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
3886
- ]
3887
- }
3888
- ) }),
3889
- /* @__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)(
3890
- "li",
3891
- {
3892
- className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3893
- lang: activatedLanguage,
3894
- children: [
3895
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
3896
- /* @__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)(
3897
- LinkComponent,
3898
- {
3899
- onClick: () => handleMenuClick("link"),
3900
- href,
3901
- children: label[activatedLanguage]
3902
- }
3903
- ) }),
3864
+ return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
3865
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { "aria-live": "polite", className: "sr-only", children: isOpen ? activatedLanguage === "sv" ? "Navigationsmenyn \xF6ppnades" : "Navigation menu opened" : activatedLanguage === "sv" ? "Navigationsmenyn st\xE4ngdes" : "Navigation menu closed" }),
3866
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3867
+ "nav",
3868
+ {
3869
+ id: "main-navigation",
3870
+ ref: navRef,
3871
+ "aria-label": activatedLanguage === "sv" ? "Huvudnavigation" : "Main navigation",
3872
+ className: `pts-navigation-menu-container ${isOpen ? "open" : ""}`,
3873
+ inert: !isOpen,
3874
+ children: [
3875
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pts-navigation-close-container ", id: "menu-close", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
3876
+ "button",
3877
+ {
3878
+ className: "pts-navigation-close-button",
3879
+ onClick: handleCloseButton,
3880
+ type: "button",
3881
+ children: [
3882
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {}) }),
3883
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pts-navigation-close-text", children: closeMenuText })
3884
+ ]
3885
+ }
3886
+ ) }),
3887
+ /* @__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)(
3888
+ "li",
3889
+ {
3890
+ className: `pts-navigation-link ${openSubMenu === label[activatedLanguage] ? "open" : ""}`,
3891
+ lang: activatedLanguage,
3892
+ children: [
3893
+ /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "pts-navigation-button", children: [
3894
+ /* @__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)(LinkComponent, { onClick: handleCloseButton, href, children: label[activatedLanguage] }) }),
3895
+ children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3896
+ "button",
3897
+ {
3898
+ className: `pts-navigation-link-expand-button`,
3899
+ onClick: () => handleSubMenu(label[activatedLanguage]),
3900
+ "aria-label": getSubMenuAriaLabel(label),
3901
+ "aria-expanded": openSubMenu === label[activatedLanguage],
3902
+ "aria-controls": "sub-menu-" + index,
3903
+ type: "button",
3904
+ id: "menu-button-" + index,
3905
+ 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, {}) })
3906
+ }
3907
+ )
3908
+ ] }) }),
3904
3909
  children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3905
- "button",
3910
+ "div",
3906
3911
  {
3907
- className: `pts-navigation-link-expand-button`,
3908
- onClick: () => handleSubMenu(label[activatedLanguage]),
3909
- "aria-label": getSubMenuAriaLabel(label),
3910
- "aria-expanded": openSubMenu === label[activatedLanguage],
3911
- "aria-controls": "sub-menu-" + index,
3912
- type: "button",
3913
- id: "menu-button-" + index,
3914
- 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, {}) })
3912
+ hidden: openSubMenu !== label[activatedLanguage],
3913
+ "aria-hidden": openSubMenu !== label[activatedLanguage],
3914
+ className: "pts-sub-navigation-container",
3915
+ id: "sub-menu-" + index,
3916
+ role: "region",
3917
+ 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)(LinkComponent, { onClick: handleCloseButton, href: href2, children: label2[activatedLanguage] }) }, "nav-child-" + index2)) })
3915
3918
  }
3916
3919
  )
3917
- ] }) }),
3918
- children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
3919
- "div",
3920
- {
3921
- hidden: openSubMenu !== label[activatedLanguage],
3922
- "aria-hidden": openSubMenu !== label[activatedLanguage],
3923
- className: "pts-sub-navigation-container",
3924
- id: "sub-menu-" + index,
3925
- role: "region",
3926
- 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)(
3927
- LinkComponent,
3928
- {
3929
- onClick: () => handleMenuClick("link"),
3930
- href: href2,
3931
- children: label2[activatedLanguage]
3932
- }
3933
- ) }, "nav-child-" + index2)) })
3934
- }
3935
- )
3936
- ]
3937
- },
3938
- "nav-" + index
3939
- )) })
3940
- ]
3941
- }
3942
- ) });
3920
+ ]
3921
+ },
3922
+ "nav-" + index
3923
+ )) })
3924
+ ]
3925
+ }
3926
+ )
3927
+ ] });
3943
3928
  };
3944
3929
  var NavigationStandard_default = Navigation;
3945
3930
 
@@ -4005,11 +3990,11 @@ var NavigationHeader = ({
4005
3990
  SetActivatedLanguage = () => {
4006
3991
  },
4007
3992
  linkComponent: LinkComponent = (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("a", { ...props }),
4008
- noLogoLink = false,
4009
- navigationCloseFocusId
3993
+ noLogoLink = false
4010
3994
  }) => {
4011
3995
  const logoLink = activatedLanguage === "en" ? "https://pts.se/en" : "https://pts.se/";
4012
3996
  const hasHeadline = headline && headline.length > 0;
3997
+ const menuButtonFocusRef = (0, import_react18.useRef)(null);
4013
3998
  const handleLanguageClick = () => {
4014
3999
  if (activatedLanguage === "sv") {
4015
4000
  SetActivatedLanguage("en");
@@ -4022,7 +4007,6 @@ var NavigationHeader = ({
4022
4007
  else return "Svenska";
4023
4008
  };
4024
4009
  const [isMenuOpen, setIsMenuOpen] = (0, import_react18.useState)(false);
4025
- const menuButtonFocusRef = (0, import_react18.useRef)(null);
4026
4010
  const handleMenuClick = () => {
4027
4011
  setIsMenuOpen((prev) => !prev);
4028
4012
  };
@@ -4102,7 +4086,7 @@ var NavigationHeader = ({
4102
4086
  )
4103
4087
  ] }) })
4104
4088
  ] }) }),
4105
- useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4089
+ useNavigationMenu && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4106
4090
  NavigationStandard_default,
4107
4091
  {
4108
4092
  activatedLanguage,
@@ -4110,10 +4094,9 @@ var NavigationHeader = ({
4110
4094
  menuLinks,
4111
4095
  isOpen: isMenuOpen,
4112
4096
  openButtonRef: menuButtonFocusRef,
4113
- linkComponent: LinkComponent,
4114
- navigationCloseFocusId
4097
+ linkComponent: LinkComponent
4115
4098
  }
4116
- ) }),
4099
+ ),
4117
4100
  isMenuOpen && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
4118
4101
  "div",
4119
4102
  {
@@ -4222,7 +4205,6 @@ var LinkStandard = ({
4222
4205
  target: openTarget,
4223
4206
  rel: openTarget === "_blank" ? "noopener noreferrer" : void 0,
4224
4207
  "aria-label": ariaLabel || void 0,
4225
- lang: activatedLanguage,
4226
4208
  children: [
4227
4209
  IconComponent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: `pts-link-icon-circle ${iconClass} ${customClass}`, "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(IconComponent, {}) }),
4228
4210
  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pts-standard-link-text", children: linkTitle })
@@ -4242,15 +4224,15 @@ var LinkList = ({
4242
4224
  }) => {
4243
4225
  const uniqueId = (0, import_react19.useId)();
4244
4226
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pts-linkList-container", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ul", { children: linkArray && linkArray.map((link, index) => {
4245
- var _a, _b, _c;
4227
+ var _a, _b;
4246
4228
  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
4247
4229
  LinkStandard_default,
4248
4230
  {
4249
4231
  url: link.url,
4250
4232
  title: link.title,
4251
- activatedLanguage: (_a = link.activatedLanguage) != null ? _a : activatedLanguage,
4252
- ariaLabel: (_b = link.ariaLabel) != null ? _b : void 0,
4253
- openTarget: (_c = link.openTarget) != null ? _c : "_blank",
4233
+ activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv",
4234
+ ariaLabel: (_a = link.ariaLabel) != null ? _a : void 0,
4235
+ openTarget: (_b = link.openTarget) != null ? _b : "_blank",
4254
4236
  linkComponent: LinkComponent
4255
4237
  }
4256
4238
  ) }, uniqueId + "_" + index);
@@ -4285,7 +4267,7 @@ var Collapse = ({
4285
4267
  "aria-controls": contentId,
4286
4268
  children: [
4287
4269
  `${isOpen ? closeLabel : openLabel} ${title}`,
4288
- /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pts-collapse-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandIcon, {}) })
4270
+ /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pts-open-close-icon", "aria-hidden": "true", children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(CollapseIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ExpandIcon, {}) })
4289
4271
  ]
4290
4272
  }
4291
4273
  ),