optimized-react-component-library-xyz123 3.3.0 → 3.3.2

package/dist/index.mjs

@@ -289,7 +289,7 @@ var PreviewCheckboxGroup = ({
 };
 
 // src/components/input-components/TextAreaStandard/TextAreaStandard.tsx
-import { useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
 import DOMPurify from "dompurify";
 import { Fragment as Fragment4, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var InputTextarea = ({
@@ -298,20 +298,31 @@ var InputTextarea = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const questionId = `question-${question.id}`;
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
-  const [localAnswer, setLocalAnswer] = useState3(question.answer);
+  const [localAnswer, setLocalAnswer] = useState3((_a = question.answer) != null ? _a : "");
+  const lastSyncedAnswer = useRef((_b = question.answer) != null ? _b : "");
+  useEffect3(() => {
+    var _a2;
+    const incomingFromRedux = (_a2 = question.answer) != null ? _a2 : "";
+    if (incomingFromRedux !== lastSyncedAnswer.current) {
+      setLocalAnswer(incomingFromRedux);
+      lastSyncedAnswer.current = incomingFromRedux;
+    }
+  }, [question.answer]);
   const defaultMaxLength = 1e3;
-  const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 0;
-  const maxLength = (_d = (_c = question.questionExtraAttribute) == null ? void 0 : _c.answerMaxLength) != null ? _d : defaultMaxLength;
+  const answerLength = (_d = (_c = question.answer) == null ? void 0 : _c.length) != null ? _d : 0;
+  const maxLength = (_f = (_e = question.questionExtraAttribute) == null ? void 0 : _e.answerMaxLength) != null ? _f : defaultMaxLength;
   const isTooLong = answerLength > maxLength;
   const counterText = activatedLanguage === "en" ? `${answerLength} of ${maxLength} characters` : `${answerLength} av ${maxLength} tecken`;
   const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r inte vara l\xE4ngre \xE4n ${maxLength} tecken`;
-  const onChange = (e) => {
-    setLocalAnswer(e.target.value);
+  const handleOnChange = (e) => {
+    const value = e.target.value;
+    setLocalAnswer(value);
+    lastSyncedAnswer.current = value;
     handleQuestionInputChange(e, question);
   };
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
@@ -340,7 +351,7 @@ var InputTextarea = ({
             "textarea",
             {
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
-              onChange: (e) => onChange(e),
+              onChange: handleOnChange,
               value: localAnswer,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
@@ -350,13 +361,13 @@ var InputTextarea = ({
             }
           ),
           /* @__PURE__ */ jsxs5("div", { className: "pts-textarea-counter-error-container", children: [
-            !((_e = question.questionExtraAttribute) == null ? void 0 : _e.hideTextCounter) && /* @__PURE__ */ jsx5("div", { "aria-live": "polite", className: `pts-character-counter`, children: counterText }),
+            !((_g = question.questionExtraAttribute) == null ? void 0 : _g.hideTextCounter) && /* @__PURE__ */ jsx5("div", { "aria-live": "polite", className: `pts-character-counter`, children: counterText }),
             !isTooLong && question.hasValidationError && /* @__PURE__ */ jsx5(
               ValidationMessage_default,
               {
                 showValidationMessage: true,
                 validationId: errorId,
-                validationMessesege: (_f = question.validationDefaultMessesege) != null ? _f : "",
+                validationMessesege: (_h = question.validationDefaultMessesege) != null ? _h : "",
                 activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
               }
             ),
@@ -397,7 +408,7 @@ var PreviewTextarea = ({
 };
 
 // src/components/input-components/TextFieldStandard/TextFieldStandard.tsx
-import { useState as useState4, useRef, useEffect as useEffect3 } from "react";
+import { useState as useState4, useRef as useRef2, useEffect as useEffect4 } from "react";
 import DOMPurify2 from "dompurify";
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextFieldStandard = ({
@@ -406,20 +417,22 @@ var TextFieldStandard = ({
   showPreview = false,
   activatedLanguage
 }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o;
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p;
   const questionId = `question-${question.id}`;
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
   const [localAnswer, setLocalAnswer] = useState4((_a = question.answer) != null ? _a : "");
-  const lastSyncedAnswer = useRef(question.answer);
-  useEffect3(() => {
-    if (question.answer && question.answer !== lastSyncedAnswer.current) {
-      setLocalAnswer(question.answer);
-      lastSyncedAnswer.current = question.answer;
+  const lastSyncedAnswer = useRef2((_b = question.answer) != null ? _b : "");
+  useEffect4(() => {
+    var _a2;
+    const incomingFromRedux = (_a2 = question.answer) != null ? _a2 : "";
+    if (incomingFromRedux !== lastSyncedAnswer.current) {
+      setLocalAnswer(incomingFromRedux);
+      lastSyncedAnswer.current = incomingFromRedux;
     }
   }, [question.answer]);
-  const answerLength = (_b = localAnswer == null ? void 0 : localAnswer.length) != null ? _b : 0;
+  const answerLength = (_c = localAnswer == null ? void 0 : localAnswer.length) != null ? _c : 0;
   const maxLength = 100;
   const isTooLong = answerLength > maxLength;
   const maxLengthErrorText = activatedLanguage === "en" ? `The text must be ${maxLength} characters or less` : `Texten f\xE5r inte vara l\xE4ngre \xE4n ${maxLength} tecken`;
@@ -434,7 +447,7 @@ var TextFieldStandard = ({
       "div",
       {
         id: questionId,
-        className: `pts-root-question pts-textField-container ${((_c = question.questionExtraAttribute) == null ? void 0 : _c.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
+        className: `pts-root-question pts-textField-container ${((_d = question.questionExtraAttribute) == null ? void 0 : _d.disabled) ? " pts-textField-disabled" : ""}${question.aboutText ? " pts-question-hasAbout" : ""}`.trim(),
         children: [
           /* @__PURE__ */ jsxs6("label", { htmlFor: inputId, children: [
             question.questionLabel,
@@ -454,21 +467,21 @@ var TextFieldStandard = ({
           /* @__PURE__ */ jsx6(
             "input",
             {
-              type: (_e = (_d = question.questionExtraAttribute) == null ? void 0 : _d.inputType) != null ? _e : "text",
-              autoComplete: (_g = (_f = question.questionExtraAttribute) == null ? void 0 : _f.autoComplete) != null ? _g : void 0,
-              inputMode: (_i = (_h = question.questionExtraAttribute) == null ? void 0 : _h.inputMode) != null ? _i : void 0,
+              type: (_f = (_e = question.questionExtraAttribute) == null ? void 0 : _e.inputType) != null ? _f : "text",
+              autoComplete: (_h = (_g = question.questionExtraAttribute) == null ? void 0 : _g.autoComplete) != null ? _h : void 0,
+              inputMode: (_j = (_i = question.questionExtraAttribute) == null ? void 0 : _i.inputMode) != null ? _j : void 0,
               name: `question-name-${question.id}`,
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
               onChange: handleOnChange,
               value: localAnswer,
               id: inputId,
-              disabled: (_j = question.questionExtraAttribute) == null ? void 0 : _j.disabled,
+              disabled: (_k = question.questionExtraAttribute) == null ? void 0 : _k.disabled,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-describedby": [question.aboutText ? aboutId : null, question.hasValidationError ? errorId : null].filter(Boolean).join(" ") || void 0,
               "aria-invalid": question.hasValidationError,
-              spellCheck: (_l = (_k = question.questionExtraAttribute) == null ? void 0 : _k.spellCheck) != null ? _l : void 0,
-              autoCapitalize: (_n = (_m = question.questionExtraAttribute) == null ? void 0 : _m.autoCapitalize) != null ? _n : void 0
+              spellCheck: (_m = (_l = question.questionExtraAttribute) == null ? void 0 : _l.spellCheck) != null ? _m : void 0,
+              autoCapitalize: (_o = (_n = question.questionExtraAttribute) == null ? void 0 : _n.autoCapitalize) != null ? _o : void 0
             }
           ),
           !isTooLong && question.hasValidationError && /* @__PURE__ */ jsx6(
@@ -476,7 +489,7 @@ var TextFieldStandard = ({
             {
               showValidationMessage: true,
               validationId: errorId,
-              validationMessesege: (_o = question.validationDefaultMessesege) != null ? _o : "",
+              validationMessesege: (_p = question.validationDefaultMessesege) != null ? _p : "",
               activatedLanguage: activatedLanguage != null ? activatedLanguage : "sv"
             }
           ),
@@ -516,7 +529,7 @@ var PreviewTextField = ({
 };
 
 // src/components/input-components/AddFilesStandard/AddFilesStandard.tsx
-import { useCallback, useEffect as useEffect6, useState as useState7 } from "react";
+import { useCallback, useEffect as useEffect7, useState as useState7 } from "react";
 import clsx3 from "clsx";
 
 // src/components/input-components/AddFilesStandard/DropFilesStandard.tsx
@@ -568,7 +581,7 @@ var DropFiles = ({ FilesSelected, DropFilesText = "Dra och sl\xE4pp dina filer h
 var DropFilesStandard_default = DropFiles;
 
 // src/components/input-components/AddFilesStandard/ExploreFilesStandard.tsx
-import { useRef as useRef2 } from "react";
+import { useRef as useRef3 } from "react";
 import clsx from "clsx";
 
 // src/components/input-components/AddFilesStandard/ScreenReaderErrors.tsx
@@ -611,8 +624,8 @@ var ExploreFiles = ({
   showErrors,
   errorMessageAddingFile
 }) => {
-  const fileInputRef = useRef2(null);
-  const buttonInputRef = useRef2(null);
+  const fileInputRef = useRef3(null);
+  const buttonInputRef = useRef3(null);
   const handleFiles = (event) => {
     const files = Array.from(event.target.files || []);
     FilesSelected(files);
@@ -680,7 +693,7 @@ var ExploreFiles = ({
 var ExploreFilesStandard_default = ExploreFiles;
 
 // src/components/input-components/AddFilesStandard/SelectedFilesStandard.tsx
-import React6, { useEffect as useEffect5, useState as useState6, useRef as useRef3 } from "react";
+import React6, { useEffect as useEffect6, useState as useState6, useRef as useRef4 } from "react";
 import { Col, Row } from "react-bootstrap";
 
 // src/components/input-components/AddFilesStandard/IndicatorStandard.tsx
@@ -708,7 +721,7 @@ var SelectedFiles = ({
   setNumberOfFiles,
   removeUploadErrors
 }) => {
-  const theDiv = useRef3(null);
+  const theDiv = useRef4(null);
   const remove = (file) => {
     let newFiles = questionObject.files.filter((f) => f !== file);
     const newCountOfFiles = newFiles.length;
@@ -721,7 +734,7 @@ var SelectedFiles = ({
   };
   const useWindowWidth = () => {
     const [windowWidth2, setWindowWidth] = useState6(window.innerWidth);
-    useEffect5(() => {
+    useEffect6(() => {
       const handleResize = () => {
         setWindowWidth(window.innerWidth);
       };
@@ -895,14 +908,14 @@ var AddFiles = ({
   const [errorMessageAddingFile, setErrorMessageAddingFile] = useState7([]);
   const [newFiles, setNewFiles] = useState7([]);
   const [dropFilesText, setDropFilesText] = useState7("Dra och sl\xE4pp dina filer h\xE4r");
-  useEffect6(() => {
+  useEffect7(() => {
     if (activatedLanguage === "sv") {
       setDropFilesText("Dra och sl\xE4pp dina filer h\xE4r");
     } else {
       setDropFilesText("Drag and drop your files here");
     }
   }, [activatedLanguage]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (questionObject.files && questionObject.files.length > 0) {
       setNumberOfFiles(questionObject.files.length);
     }
@@ -997,7 +1010,7 @@ var AddFiles = ({
       reader.readAsDataURL(file);
     });
   };
-  useEffect6(() => {
+  useEffect7(() => {
     if (newFiles.length > 0) {
       const currentFiles = questionObject.files ? questionObject.files : [];
       const e = {
@@ -1117,7 +1130,7 @@ var PreviewAddFiles = ({
 };
 
 // src/components/input-components/SingleCheckboxStandard/SingleCheckboxStandard.tsx
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState8 } from "react";
 import DOMPurify3 from "dompurify";
 import { Fragment as Fragment12, jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var SingleCheckbox = ({
@@ -1132,7 +1145,7 @@ var SingleCheckbox = ({
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
   const [checked, setChecked] = useState8(false);
-  useEffect7(() => {
+  useEffect8(() => {
     if (question.answer && question.answer === "true") {
       setChecked(true);
     } else {
@@ -2063,7 +2076,7 @@ var InfoOnlyStandard_default = InputInfoOnly;
 import React9 from "react";
 
 // src/components/input-components/RadioMultipleWithInfoStandard/RadioCollapseItem.tsx
-import { useEffect as useEffect8, useState as useState9 } from "react";
+import { useEffect as useEffect9, useState as useState9 } from "react";
 import DOMPurify7 from "dompurify";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioCollapseItem = ({
@@ -2085,7 +2098,7 @@ var RadioCollapseItem = ({
   const openLabel = activatedLanguage === "sv" ? "Visa mer information om" : "Show more information about";
   const closeLabel = activatedLanguage === "sv" ? "D\xF6lj mer information om" : "Hide more information about";
   const buttonLabel = `${isOpen ? closeLabel : openLabel} "${label}"`;
-  useEffect8(() => {
+  useEffect9(() => {
     if (questionAnswer === value) {
       setIsOpen(true);
     } else {
@@ -3038,7 +3051,7 @@ var useFormStatusModal = (formStatus, handleModalOpen, handleModalClose, mainSel
 };
 
 // src/hooks/usePTSPageTitle/usePTSPageTitle.ts
-import { useMemo, useEffect as useEffect10 } from "react";
+import { useMemo, useEffect as useEffect11 } from "react";
 var usePTSPageTitle = ({
   formStatus,
   activeStep,
@@ -3056,19 +3069,19 @@ var usePTSPageTitle = ({
     if (activeStep === 0 && baseTitle) return baseTitle;
     return stepTitle || baseTitle || fallbackTitle;
   }, [formStatus, activeStep, applicationContent, thankYouBlock, steps, fallbackTitle]);
-  useEffect10(() => {
+  useEffect11(() => {
     document.title = computedTitle;
   }, [computedTitle]);
   return computedTitle;
 };
 
 // src/hooks/useInputMethodDetection/useInputMethodDetection.ts
-import { useEffect as useEffect11 } from "react";
+import { useEffect as useEffect12 } from "react";
 var useInputMethodDetection = ({
   mouseClassName = "using-mouse",
   keyboardToggleKey = "Tab"
 } = {}) => {
-  useEffect11(() => {
+  useEffect12(() => {
     const handleMouseDown = () => {
       document.body.classList.add(mouseClassName);
     };
@@ -3087,7 +3100,7 @@ var useInputMethodDetection = ({
 };
 
 // src/hooks/useCookieConsent/useCookieConsent.ts
-import { useCallback as useCallback2, useEffect as useEffect12, useMemo as useMemo2, useState as useState10 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect13, useMemo as useMemo2, useState as useState10 } from "react";
 var useCookieConsent = ({
   cookieName,
   choiceKey,
@@ -3116,7 +3129,7 @@ var useCookieConsent = ({
     }
     setShowBanner(false);
   }, [areCookiesAccepted, onConsentChange]);
-  useEffect12(() => {
+  useEffect13(() => {
     const cookiesAccepted = areCookiesAccepted();
     const choiceMade = hasChoiceBeenMade();
     setShowBanner(!cookiesAccepted && !choiceMade);
@@ -3245,7 +3258,7 @@ var QuestionRenderer = ({
 var QuestionRenderer_default = QuestionRenderer;
 
 // src/components/question-rendering/QuestionGroup/QuestionGroup.tsx
-import { useEffect as useEffect13, Fragment as Fragment18 } from "react";
+import { useEffect as useEffect14, Fragment as Fragment18 } from "react";
 import { Fragment as Fragment19, jsx as jsx25, jsxs as jsxs21 } from "react/jsx-runtime";
 var QuestionGroup = ({
   questions,
@@ -3265,7 +3278,7 @@ var QuestionGroup = ({
   const groupMandatory = (_a = firstQuestion.validationType) == null ? void 0 : _a.find(
     (e) => e.startsWith("groupCheck-")
   );
-  useEffect13(() => {
+  useEffect14(() => {
     questions.forEach((question) => {
       if (question.visible && !question.isDisplayed) {
         markQuestionAsDisplayed(question);
@@ -3945,10 +3958,10 @@ var Header = ({
 var HeaderStandard_default = Header;
 
 // src/components/layout/NavigationHeaderStandard/NavigationHeaderStandard.tsx
-import { useRef as useRef5, useState as useState13 } from "react";
+import { useRef as useRef6, useState as useState13 } from "react";
 
 // src/components/layout/NavigationStandard/NavigationStandard.tsx
-import { useEffect as useEffect14, useState as useState11, useRef as useRef4 } from "react";
+import { useEffect as useEffect15, useState as useState11, useRef as useRef5 } from "react";
 import { Fragment as Fragment20, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var Navigation = ({
   setIsMenyOpen,
@@ -3961,8 +3974,8 @@ var Navigation = ({
   activePath = null
 }) => {
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
-  const navRef = useRef4(null);
-  const firstVisitRef = useRef4(true);
+  const navRef = useRef5(null);
+  const firstVisitRef = useRef5(true);
   const [openSubMenu, setOpenSubMenu] = useState11(null);
   const handleSubMenu = (label) => {
     setOpenSubMenu(openSubMenu === label ? null : label);
@@ -3972,7 +3985,7 @@ var Navigation = ({
     setIsMenyOpen == null ? void 0 : setIsMenyOpen(false);
     typeOfInteraction === "close" ? (_a = openButtonRef == null ? void 0 : openButtonRef.current) == null ? void 0 : _a.focus() : navigationCloseFocusId && ((_b = document.getElementById(navigationCloseFocusId)) == null ? void 0 : _b.focus());
   };
-  useEffect14(() => {
+  useEffect15(() => {
     var _a, _b;
     if (!isOpen) {
       setOpenSubMenu(null);
@@ -3984,7 +3997,7 @@ var Navigation = ({
     })) == null ? void 0 : _a.label[activatedLanguage]) != null ? _b : null;
     setOpenSubMenu(defaultOpenSubMenu);
   }, [isOpen, activePath, menuLinks, activatedLanguage]);
-  useEffect14(() => {
+  useEffect15(() => {
     if (!isOpen || !navRef.current) {
       return;
     }
@@ -4035,7 +4048,7 @@ var Navigation = ({
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
   const [instruction, setInstruction] = useState11("");
-  useEffect14(() => {
+  useEffect15(() => {
     if (firstVisitRef.current) {
       firstVisitRef.current = false;
       return;
@@ -4203,7 +4216,7 @@ var NavigationHeader = ({
     else return "Svenska";
   };
   const [isMenuOpen, setIsMenuOpen] = useState13(false);
-  const menuButtonFocusRef = useRef5(null);
+  const menuButtonFocusRef = useRef6(null);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => !prev);
   };