optimized-react-component-library-xyz123 2.8.20 → 2.8.22

package/dist/index.d.mts

@@ -925,11 +925,11 @@ interface AlertInTextProps {
 declare const AlertInTextStandard: FC<AlertInTextProps>;
 
 interface OptionTextBodyProps {
-    infoText: string;
+    optionInfoText: string;
     selectedLabel?: string;
     activatedLanguage?: string;
-    TextQuestionId: string;
-    connectedToSelect?: boolean;
+    questionOptionTextId: string;
+    hasOptionInfoText?: boolean;
     hideStepperButtons?: boolean;
 }
 

package/dist/index.d.ts

@@ -925,11 +925,11 @@ interface AlertInTextProps {
 declare const AlertInTextStandard: FC<AlertInTextProps>;
 
 interface OptionTextBodyProps {
-    infoText: string;
+    optionInfoText: string;
     selectedLabel?: string;
     activatedLanguage?: string;
-    TextQuestionId: string;
-    connectedToSelect?: boolean;
+    questionOptionTextId: string;
+    hasOptionInfoText?: boolean;
     hideStepperButtons?: boolean;
 }
 

package/dist/index.js

@@ -1985,9 +1985,12 @@ var import_jsx_runtime17 = require("react/jsx-runtime");
 var AlertInTextStandard = ({ content = "" }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "pts-alertInText-container", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pts-alertInText-left", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AlertInTextIcon, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pts-alertInText-right", role: "note", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { dangerouslySetInnerHTML: {
-      __html: import_dompurify5.default.sanitize(content, { ALLOWED_ATTR: ["style", "target", "href"] })
-    } }) })
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "pts-alertInText-right", role: "note", children: /<\/?[a-z][\s\S]*>/i.test(content) ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "div",
+      {
+        dangerouslySetInnerHTML: { __html: import_dompurify5.default.sanitize(content) }
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { children: content }) })
   ] });
 };
 var AlertInTextStandard_default = AlertInTextStandard;
@@ -2296,28 +2299,60 @@ var getInfoTextConnectionList = (questionLanguageSupport, language) => {
   var _a, _b;
   return (_b = (_a = questionLanguageSupport.find((item) => (item == null ? void 0 : item.language) === language)) == null ? void 0 : _a.optionsInfoText) != null ? _b : [];
 };
+var setOptionTextBodyProps = (question, activatedLanguage, questionId, errorId) => {
+  var _a, _b, _c, _d;
+  const infoTextId = `infotext-${questionId}`;
+  const optionsInfoText = getInfoTextConnectionList(
+    question.languageSupport,
+    activatedLanguage
+  );
+  const selectedInfo = optionsInfoText.find(
+    (option) => option.selectedValue === question.answer
+  );
+  const selectedLabel = (_c = (_b = (_a = question.options) == null ? void 0 : _a.find(
+    (option) => option.value === question.answer
+  )) == null ? void 0 : _b.label) != null ? _c : "";
+  const hasOptionInfoText = !!(selectedInfo == null ? void 0 : selectedInfo.infoText);
+  const describedBy = [
+    question.hasValidationError ? errorId : null,
+    hasOptionInfoText ? infoTextId : null
+  ].filter(Boolean).join(" ");
+  return {
+    describedBy,
+    hasOptionInfoText,
+    props: {
+      optionInfoText: (_d = selectedInfo == null ? void 0 : selectedInfo.infoText) != null ? _d : "",
+      selectedLabel,
+      questionOptionTextId: infoTextId,
+      activatedLanguage,
+      hasOptionInfoText: true
+    }
+  };
+};
 var OptionTextBody = ({
-  infoText,
+  optionInfoText,
   selectedLabel,
-  TextQuestionId,
+  questionOptionTextId,
   activatedLanguage,
-  connectedToSelect = false
+  hasOptionInfoText = false
   // hideStepperButtons = false 
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
-      ...connectedToSelect && {
-        id: `${TextQuestionId}`,
-        //"aria-live": {liveMode},
+      ...hasOptionInfoText && {
+        id: `${questionOptionTextId}`,
         "aria-atomic": "true"
       },
-      children: infoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id: TextQuestionId + "-placeholder", className: "pts-root-question pts-optionTextBody-container", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sr-only", children: `${activatedLanguage === "en" ? `More information about this option` : `Mer information om detta val`}.` }),
+      children: optionInfoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id: questionOptionTextId + "-placeholder", className: "pts-optionTextBody-container", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sr-only", children: [
+          selectedLabel,
+          `${activatedLanguage === "en" ? `More information about this option` : `Mer information om detta val`}.`
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           TextBody_default,
           {
-            data: { alertInText: infoText }
+            data: { alertInText: optionInfoText }
           }
         )
       ] })
@@ -2334,19 +2369,15 @@ var CustomDropdownStandard = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h;
+  var _a, _b, _c;
   const questionId = `question-${question.id}`;
   const selectId = `select-${question.id}`;
   const errorId = `error-${question.id}`;
-  const infoTextId = `infotext-${questionId}`;
-  const optionsInfoText = getInfoTextConnectionList(question.languageSupport, activatedLanguage);
-  const hasInfoText = optionsInfoText.some(
-    (option) => option.selectedValue === question.answer
-  );
-  const describedBy = [
-    question.hasValidationError ? errorId : null,
-    hasInfoText ? infoTextId : null
-  ].filter(Boolean).join(" ");
+  const {
+    describedBy,
+    hasOptionInfoText,
+    props: optionTextProps
+  } = setOptionTextBodyProps(question, activatedLanguage, questionId, errorId);
   const handleInputChange = (event) => {
     const e = { target: { value: event.target.value } };
     handleQuestionInputChange(e, question);
@@ -2368,6 +2399,7 @@ var CustomDropdownStandard = ({
           "aria-required": question.isQuestionMandatory,
           "aria-invalid": question.hasValidationError ? question.hasValidationError : void 0,
           "aria-describedby": describedBy || void 0,
+          className: describedBy === errorId ? "pts-root-question-input-error-border" : "",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("option", { value: "", children: activatedLanguage === "en" ? "Select an option" : "V\xE4lj alternativ" }),
             (_a = question.options) == null ? void 0 : _a.map((option, index) => {
@@ -2385,16 +2417,7 @@ var CustomDropdownStandard = ({
           activatedLanguage
         }
       ),
-      optionsInfoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-        OptionTextBody_default,
-        {
-          infoText: (_e = (_d = optionsInfoText.find((optionI) => optionI.selectedValue === question.answer)) == null ? void 0 : _d.infoText) != null ? _e : "",
-          selectedLabel: (_h = (_g = (_f = question.options) == null ? void 0 : _f.find((option) => option.value === question.answer)) == null ? void 0 : _g.label) != null ? _h : "",
-          TextQuestionId: infoTextId,
-          activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv",
-          connectedToSelect: true
-        }
-      )
+      hasOptionInfoText && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(OptionTextBody_default, { ...optionTextProps })
     ] }),
     showPreview && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PreviewDropdown, { question })
   ] });
@@ -3240,7 +3263,8 @@ var QuestionRenderer = ({
       {
         question,
         handleQuestionInputChange,
-        showPreview
+        showPreview,
+        activatedLanguage
       }
     )
   ] });