optimized-react-component-library-xyz123 3.0.0 → 3.0.2

package/dist/index.mjs

@@ -289,6 +289,7 @@ var PreviewCheckboxGroup = ({
 };
 
 // src/components/input-components/TextAreaStandard/TextAreaStandard.tsx
+import { 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 = ({
@@ -302,12 +303,17 @@ var InputTextarea = ({
   const inputId = `textarea-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
+  const [localAnswer, setLocalAnswer] = useState3(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 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);
+    handleQuestionInputChange(e, question);
+  };
   return /* @__PURE__ */ jsxs5(Fragment4, { children: [
     !showPreview && question.visible && /* @__PURE__ */ jsxs5(
       "div",
@@ -334,8 +340,8 @@ var InputTextarea = ({
             "textarea",
             {
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
-              onChange: (e) => handleQuestionInputChange(e, question),
-              value: question.answer,
+              onChange: (e) => onChange(e),
+              value: localAnswer,
               required: question.isQuestionMandatory,
               "aria-required": question.isQuestionMandatory,
               "aria-invalid": question.hasValidationError,
@@ -391,6 +397,7 @@ var PreviewTextarea = ({
 };
 
 // src/components/input-components/TextFieldStandard/TextFieldStandard.tsx
+import { useState as useState4 } from "react";
 import DOMPurify2 from "dompurify";
 import { Fragment as Fragment5, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var TextFieldStandard = ({
@@ -404,10 +411,15 @@ var TextFieldStandard = ({
   const inputId = `textField-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
+  const [localAnswer, setLocalAnswer] = useState4(question.answer);
   const answerLength = (_b = (_a = question.answer) == null ? void 0 : _a.length) != null ? _b : 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`;
+  const onChange = (e) => {
+    setLocalAnswer(e.target.value);
+    handleQuestionInputChange(e, question);
+  };
   return /* @__PURE__ */ jsxs6(Fragment5, { children: [
     !showPreview && question.visible && /* @__PURE__ */ jsxs6(
       "div",
@@ -438,8 +450,8 @@ var TextFieldStandard = ({
               inputMode: (_i = (_h = question.questionExtraAttribute) == null ? void 0 : _h.inputMode) != null ? _i : void 0,
               name: `question-name-${question.id}`,
               className: question.hasValidationError ? "pts-root-question-input-error-border" : void 0,
-              onChange: (e) => handleQuestionInputChange(e, question),
-              value: question.answer,
+              onChange: (e) => onChange(e),
+              value: localAnswer,
               id: inputId,
               disabled: (_j = question.questionExtraAttribute) == null ? void 0 : _j.disabled,
               required: question.isQuestionMandatory,
@@ -495,7 +507,7 @@ var PreviewTextField = ({
 };
 
 // src/components/input-components/AddFilesStandard/AddFilesStandard.tsx
-import { useCallback, useEffect as useEffect5, useState as useState5 } from "react";
+import { useCallback, useEffect as useEffect5, useState as useState7 } from "react";
 import clsx3 from "clsx";
 
 // src/components/input-components/AddFilesStandard/DropFilesStandard.tsx
@@ -551,15 +563,15 @@ import { useRef } from "react";
 import clsx from "clsx";
 
 // src/components/input-components/AddFilesStandard/ScreenReaderErrors.tsx
-import React from "react";
+import React3 from "react";
 import { Fragment as Fragment7, jsx as jsx8 } from "react/jsx-runtime";
 var ScreenReaderErrors = ({
   errorMessageAddingFile,
   activatedLanguage
 }) => {
-  const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = React.useState(false);
-  const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = React.useState("");
-  React.useEffect(() => {
+  const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = React3.useState(false);
+  const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = React3.useState("");
+  React3.useEffect(() => {
     if (errorMessageAddingFile.length > 0) {
       let errorMessages = "";
       errorMessages += errorMessageAddingFile.length;
@@ -659,16 +671,16 @@ var ExploreFiles = ({
 var ExploreFilesStandard_default = ExploreFiles;
 
 // src/components/input-components/AddFilesStandard/SelectedFilesStandard.tsx
-import React4, { useEffect as useEffect4, useState as useState4, useRef as useRef2 } from "react";
+import React6, { useEffect as useEffect4, useState as useState6, useRef as useRef2 } from "react";
 import { Col, Row } from "react-bootstrap";
 
 // src/components/input-components/AddFilesStandard/IndicatorStandard.tsx
-import { useState as useState3 } from "react";
+import { useState as useState5 } from "react";
 import clsx2 from "clsx";
 import { Fragment as Fragment9, jsx as jsx10 } from "react/jsx-runtime";
 var Indicator = (filename) => {
-  const [uploadPercentage, setUploadPercentage] = useState3(0);
-  const [uploadDone, setUploadDone] = useState3(false);
+  const [uploadPercentage, setUploadPercentage] = useState5(0);
+  const [uploadDone, setUploadDone] = useState5(false);
   return /* @__PURE__ */ jsx10(Fragment9, { children: /* @__PURE__ */ jsx10("div", { className: clsx2("uploadIndicator", "uploadDone") }) });
 };
 var IndicatorStandard_default = Indicator;
@@ -699,7 +711,7 @@ var SelectedFiles = ({
     removeFile(newCountOfFiles);
   };
   const useWindowWidth = () => {
-    const [windowWidth2, setWindowWidth] = useState4(window.innerWidth);
+    const [windowWidth2, setWindowWidth] = useState6(window.innerWidth);
     useEffect4(() => {
       const handleResize = () => {
         setWindowWidth(window.innerWidth);
@@ -723,7 +735,7 @@ var SelectedFiles = ({
           mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
           const fileType = errorObj.FileName.split(".").pop();
           mobileFirstFileName = mobileFirstFileName + "." + fileType;
-          return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React4.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
+          return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React6.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
             /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsx11("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ jsx11("span", { className: "desktopFileName", children: errorObj.FileName }) }) }),
             /* @__PURE__ */ jsx11(Row, { children: /* @__PURE__ */ jsx11(
               Col,
@@ -776,7 +788,7 @@ var SelectedFiles = ({
       mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
       const fileType = file.FileName.split(".").pop();
       mobileFirstFileName = mobileFirstFileName + "." + fileType;
-      return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React4.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
+      return /* @__PURE__ */ jsx11("li", { children: /* @__PURE__ */ jsx11(React6.Fragment, { children: /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsx11("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs9("div", { className: "fileInList", children: [
         /* @__PURE__ */ jsxs9("div", { className: "fileItem", children: [
           /* @__PURE__ */ jsx11(Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "uploadedDot", children: /* @__PURE__ */ jsx11(
             "svg",
@@ -869,11 +881,11 @@ var AddFiles = ({
   const errorId = `error-${questionObject.id}`;
   const labelId = `label-${questionObject.id}`;
   const maxSizeMB = Math.round(allowedTotalFileSize / 1048576);
-  const [numberOfFiles, setNumberOfFiles] = useState5(0);
-  const [totalFileSize, setTotalFileSize] = useState5(0);
-  const [errorMessageAddingFile, setErrorMessageAddingFile] = useState5([]);
-  const [newFiles, setNewFiles] = useState5([]);
-  const [dropFilesText, setDropFilesText] = useState5("Dra och sl\xE4pp dina filer h\xE4r");
+  const [numberOfFiles, setNumberOfFiles] = useState7(0);
+  const [totalFileSize, setTotalFileSize] = useState7(0);
+  const [errorMessageAddingFile, setErrorMessageAddingFile] = useState7([]);
+  const [newFiles, setNewFiles] = useState7([]);
+  const [dropFilesText, setDropFilesText] = useState7("Dra och sl\xE4pp dina filer h\xE4r");
   useEffect5(() => {
     if (activatedLanguage === "sv") {
       setDropFilesText("Dra och sl\xE4pp dina filer h\xE4r");
@@ -1096,7 +1108,7 @@ var PreviewAddFiles = ({
 };
 
 // src/components/input-components/SingleCheckboxStandard/SingleCheckboxStandard.tsx
-import { useEffect as useEffect6, useState as useState6 } from "react";
+import { useEffect as useEffect6, 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 = ({
@@ -1110,7 +1122,7 @@ var SingleCheckbox = ({
   const inputId = `checkbox-${question.id}`;
   const aboutId = `about-${question.id}`;
   const errorId = `error-${question.id}`;
-  const [checked, setChecked] = useState6(false);
+  const [checked, setChecked] = useState8(false);
   useEffect6(() => {
     if (question.answer && question.answer === "true") {
       setChecked(true);
@@ -2039,10 +2051,10 @@ var InputInfoOnly = ({
 var InfoOnlyStandard_default = InputInfoOnly;
 
 // src/components/input-components/RadioMultipleWithInfoStandard/RadioMultipleWithInfoStandard.tsx
-import React7 from "react";
+import React9 from "react";
 
 // src/components/input-components/RadioMultipleWithInfoStandard/RadioCollapseItem.tsx
-import { useEffect as useEffect7, useState as useState7 } from "react";
+import { useEffect as useEffect7, useState as useState9 } from "react";
 import DOMPurify7 from "dompurify";
 import { jsx as jsx20, jsxs as jsxs16 } from "react/jsx-runtime";
 var RadioCollapseItem = ({
@@ -2058,7 +2070,7 @@ var RadioCollapseItem = ({
   activatedLanguage = "sv",
   initialOpen = false
 }) => {
-  const [isOpen, setIsOpen] = useState7(initialOpen);
+  const [isOpen, setIsOpen] = useState9(initialOpen);
   const contentId = `${questionId}-content-${index}`;
   const buttonId = `${questionId}-button-${index}`;
   const openLabel = activatedLanguage === "sv" ? "Visa mer information om" : "Show more information about";
@@ -2174,7 +2186,7 @@ var RadioWithInfo = ({
           groupedOptionArray.map((group, g_index) => {
             var _a2;
             let subId = "subheading-" + g_index;
-            return /* @__PURE__ */ jsxs17(React7.Fragment, { children: [
+            return /* @__PURE__ */ jsxs17(React9.Fragment, { children: [
               /* @__PURE__ */ jsx21("legend", { className: "pts-radioWithInfo-sub-headline", id: subId, children: group.category }),
               /* @__PURE__ */ jsx21("div", { role: "group", "aria-labelledby": subId, children: (_a2 = group.items) == null ? void 0 : _a2.map((option, o_index) => {
                 var _a3, _b2, _c2, _d, _e;
@@ -3000,9 +3012,9 @@ var getGroupCheckIds = (validationType) => {
 var getGroupCheckIds_default = getGroupCheckIds;
 
 // src/hooks/useFormStatusModal/useFormStatusModal.ts
-import * as React8 from "react";
+import * as React10 from "react";
 var useFormStatusModal = (formStatus, handleModalOpen, handleModalClose, mainSelector = "#main-content") => {
-  React8.useEffect(() => {
+  React10.useEffect(() => {
     if (formStatus === "loading") {
       handleModalOpen();
     }
@@ -3066,7 +3078,7 @@ var useInputMethodDetection = ({
 };
 
 // src/hooks/useCookieConsent/useCookieConsent.ts
-import { useCallback as useCallback2, useEffect as useEffect11, useMemo as useMemo2, useState as useState8 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect11, useMemo as useMemo2, useState as useState10 } from "react";
 var useCookieConsent = ({
   cookieName,
   choiceKey,
@@ -3087,7 +3099,7 @@ var useCookieConsent = ({
     }),
     [cookieName, choiceKey, expiryYears]
   );
-  const [showBanner, setShowBanner] = useState8(false);
+  const [showBanner, setShowBanner] = useState10(false);
   const handleCookieStateChange = useCallback2(() => {
     const cookiesNowAccepted = areCookiesAccepted();
     if (onConsentChange) {
@@ -3923,10 +3935,10 @@ var Header = ({
 var HeaderStandard_default = Header;
 
 // src/components/layout/NavigationHeaderStandard/NavigationHeaderStandard.tsx
-import { useRef as useRef4, useState as useState11 } from "react";
+import { useRef as useRef4, useState as useState13 } from "react";
 
 // src/components/layout/NavigationStandard/NavigationStandard.tsx
-import { useEffect as useEffect13, useState as useState9, useRef as useRef3 } from "react";
+import { useEffect as useEffect13, useState as useState11, useRef as useRef3 } from "react";
 import { Fragment as Fragment20, jsx as jsx30, jsxs as jsxs26 } from "react/jsx-runtime";
 var Navigation = ({
   setIsMenyOpen,
@@ -3941,7 +3953,7 @@ var Navigation = ({
   const closeMenuText = activatedLanguage === "sv" ? "St\xE4ng meny" : "Close menu";
   const navRef = useRef3(null);
   const firstVisitRef = useRef3(true);
-  const [openSubMenu, setOpenSubMenu] = useState9(null);
+  const [openSubMenu, setOpenSubMenu] = useState11(null);
   const handleSubMenu = (label) => {
     setOpenSubMenu(openSubMenu === label ? null : label);
   };
@@ -4012,7 +4024,7 @@ var Navigation = ({
     }
     return "\xD6ppna undermeny f\xF6r " + label["sv"];
   };
-  const [instruction, setInstruction] = useState9("");
+  const [instruction, setInstruction] = useState11("");
   useEffect13(() => {
     if (firstVisitRef.current) {
       firstVisitRef.current = false;
@@ -4102,7 +4114,7 @@ var Navigation = ({
 var NavigationStandard_default = Navigation;
 
 // src/components/layout/SearchBarStandard/SearchBarStandard.tsx
-import { useState as useState10 } from "react";
+import { useState as useState12 } from "react";
 
 // src/components/layout/SearchBarStandard/Icons.tsx
 import { jsx as jsx31, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -4126,7 +4138,7 @@ var SearchIcon2 = ({ width = 15, height = 15, color = "#6E3282" }) => /* @__PURE
 // src/components/layout/SearchBarStandard/SearchBarStandard.tsx
 import { jsx as jsx32, jsxs as jsxs28 } from "react/jsx-runtime";
 var SearchBar = ({ activatedLanguage = "sv" }) => {
-  const [searchTerm, setSearchTerm] = useState10("");
+  const [searchTerm, setSearchTerm] = useState12("");
   const handleSearch = () => {
     console.log("S\xF6kt efter:", searchTerm);
   };
@@ -4180,7 +4192,7 @@ var NavigationHeader = ({
     if (activatedLanguage === "sv") return "English";
     else return "Svenska";
   };
-  const [isMenuOpen, setIsMenuOpen] = useState11(false);
+  const [isMenuOpen, setIsMenuOpen] = useState13(false);
   const menuButtonFocusRef = useRef4(null);
   const handleMenuClick = () => {
     setIsMenuOpen((prev) => !prev);
@@ -4195,7 +4207,7 @@ var NavigationHeader = ({
   const getMenuIcon = () => {
     return isMenuOpen ? /* @__PURE__ */ jsx33(CloseIcon, {}) : /* @__PURE__ */ jsx33(MenuIcon, {});
   };
-  const [isSearchOpen, setIsSearchOpen] = useState11(false);
+  const [isSearchOpen, setIsSearchOpen] = useState13(false);
   const handleSearchClick = () => {
     if (!isSearchOpen) {
       setIsSearchOpen(true);
@@ -4436,7 +4448,7 @@ var LinkList = ({
 var LinkListStandard_default = LinkList;
 
 // src/components/layout/CollapseStandard/CollapseStandard.tsx
-import { useState as useState12, useId as useId2 } from "react";
+import { useState as useState14, useId as useId2 } from "react";
 import { jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
 var Collapse = ({
   title,
@@ -4446,7 +4458,7 @@ var Collapse = ({
   activatedLanguage = "sv",
   customClass = ""
 }) => {
-  const [isOpen, setIsOpen] = useState12(defaultOpen);
+  const [isOpen, setIsOpen] = useState14(defaultOpen);
   const uniqueId = id != null ? id : useId2();
   const contentId = `${uniqueId}-content`;
   const openLabel = activatedLanguage === "sv" ? "Visa" : "Show";
@@ -4561,14 +4573,14 @@ var StepperButtons = ({
 var StepperButtonsStandard_default = StepperButtons;
 
 // src/components/stepper/StepperStandard/StepperStandard.tsx
-import React11 from "react";
+import React13 from "react";
 import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
 var Stepper = ({ arraySteps = [], activeStep = 1 }) => {
   return /* @__PURE__ */ jsx42("div", { className: "pts-stepper-container", "aria-hidden": "true", children: arraySteps.map((step, index) => {
     const isActive = step.step === activeStep;
     const lastElement = arraySteps.length;
     const isDone = step.step < activeStep;
-    return /* @__PURE__ */ jsxs34(React11.Fragment, { children: [
+    return /* @__PURE__ */ jsxs34(React13.Fragment, { children: [
       /* @__PURE__ */ jsxs34("div", { className: "pts-stepper-step", children: [
         /* @__PURE__ */ jsx42(
           "div",