optimized-react-component-library-xyz123 2.8.19 → 2.8.21

package/dist/index.d.mts

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

package/dist/index.js

@@ -2296,28 +2296,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,
-  selectedValue,
-  TextQuestionId,
+  optionInfoText,
+  selectedLabel,
+  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": "polite",
+      ...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" ? `Information about selected option - ${selectedValue}` : `Information om valt alternativ - ${selectedValue}` }),
+      children: optionInfoText.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { id: questionOptionTextId + "-placeholder", className: "pts-root-question 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 +2366,15 @@ var CustomDropdownStandard = ({
   showPreview = false,
   activatedLanguage = "sv"
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  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);
@@ -2385,16 +2413,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 : "",
-          selectedValue: (_f = question.answer) != null ? _f : "",
-          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 })
   ] });