optimized-react-component-library-xyz123 0.1.65 → 0.1.66

package/dist/index.js

@@ -200,10 +200,10 @@ var PrevieMultipleCheckboxes = ({
   const previewId = `preview-${question.id}`;
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dt", { id: `question-${previewId}`, children: (_a = question.previewLabel) != null ? _a : question.questionLabel }),
-    question.answer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
+    question.answer ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: question.options && question.options.length === 1 ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: question.options[0].label }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: "preview-answer-list", children: (_b = question.options) == null ? void 0 : _b.filter((option) => {
       var _a2;
       return (_a2 = question.answer) == null ? void 0 : _a2.includes(option.label);
-    }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { children: option.label }, index)) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }),
+    }).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("li", { children: option.label }, index)) }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("dd", { className: "no-answer-preview-page", children: activatedLanguage === "en" ? "No Answer" : "Inget svar" }),
     " "
   ] });
 };
@@ -821,7 +821,7 @@ var DropFiles = ({ FilesSelected, DropFilesText = "Dra och sl\xE4pp dina filer h
 var DropFilesStandard_default = DropFiles;
 
 // src/NewInputComponentStandard/AddFilesStandard/ExploreFilesStandard.tsx
-var import_react4 = require("react");
+var import_react4 = __toESM(require("react"));
 var import_clsx2 = __toESM(require("clsx"));
 
 // src/NewInputComponentStandard/AddFilesStandard/ScreenReaderErrors.tsx
@@ -829,7 +829,11 @@ var import_react3 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ScreenReaderErrors = ({
   errorMessageAddingFile,
-  activatedLanguage
+  activatedLanguage,
+  removeUploadErrors,
+  putFocusOnButton = () => {
+    alert("no function");
+  }
 }) => {
   const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = import_react3.default.useState(false);
   const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = import_react3.default.useState("");
@@ -845,7 +849,49 @@ var ScreenReaderErrors = ({
       setActivateErrorMessagesForScreenReader(true);
     }
   }, [errorMessageAddingFile]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_jsx_runtime7.Fragment, { children: activateErrorMessagesForScreenReader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", className: "sr-only", "aria-atomic": "true", children: errorMessagesForScreenReader }) });
+  const handleRemoveErrors = () => {
+    const errorMessages = activatedLanguage === "sv" ? `Felmeddelande raderat.` : `Error message deleted.`;
+    setErrorMessagesForScreenReader(errorMessages);
+    removeUploadErrors();
+    putFocusOnButton();
+    setTimeout(() => {
+      setActivateErrorMessagesForScreenReader(false);
+    }, 1e3);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "button",
+      {
+        onClick: handleRemoveErrors,
+        style: {
+          marginRight: "8px",
+          backgroundColor: "transparent",
+          border: "none",
+          textDecoration: "underline",
+          cursor: "pointer"
+        },
+        className: "errorMessageAddingFile",
+        "aria-label": activatedLanguage === "sv" ? "Ta bort felmeddelande f\xF6r uppladdning av filer" : "Remove error message for file uploads",
+        children: "Ta bort fel! / Remove errors!"
+      }
+    ),
+    activateErrorMessagesForScreenReader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "p",
+      {
+        role: "alert",
+        style: {
+          position: "absolute",
+          left: "-9999px",
+          top: "auto",
+          width: "1px",
+          height: "1px",
+          overflow: "hidden"
+        },
+        "aria-atomic": "true",
+        children: errorMessagesForScreenReader
+      }
+    )
+  ] });
 };
 var ScreenReaderErrors_default = ScreenReaderErrors;
 
@@ -853,6 +899,7 @@ var ScreenReaderErrors_default = ScreenReaderErrors;
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ExploreFiles = ({
   FilesSelected,
+  //UploadButtonText = 'upload files',
   numberOfFiles,
   allowedNumberOfFiles,
   activatedLanguage,
@@ -862,10 +909,28 @@ var ExploreFiles = ({
   errorId,
   questionObject,
   showErrors,
-  errorMessageAddingFile
+  errorMessageAddingFile,
+  removeUploadErrors = () => {
+    alert("finns ingen funktion");
+  }
 }) => {
   const fileInputRef = (0, import_react4.useRef)(null);
   const buttonInputRef = (0, import_react4.useRef)(null);
+  const [showErrorMessagesForScreenReader, setShowErrorMessagesForScreenReader] = import_react4.default.useState(false);
+  const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = import_react4.default.useState("");
+  (0, import_react4.useEffect)(() => {
+    const button = buttonInputRef.current;
+    if (!button) return;
+    const handleFocus = () => {
+      setShowErrorMessagesForScreenReader(!showErrorMessagesForScreenReader);
+      console.log("FOCUS!!");
+      console.log("Error messages for screen reader: " + errorMessageAddingFile);
+    };
+    button.addEventListener("focus", handleFocus);
+    return () => {
+      button.removeEventListener("focus", handleFocus);
+    };
+  }, []);
   const handleFiles = (event) => {
     const files = Array.from(event.target.files || []);
     FilesSelected(files);
@@ -875,17 +940,32 @@ var ExploreFiles = ({
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
+  const handleRemoveErrors = () => {
+    const errorMessages = activatedLanguage === "sv" ? `Felmeddelande raderat.` : `Error message deleted.`;
+    setErrorMessagesForScreenReader(errorMessages);
+    removeUploadErrors();
+    putFocusOnButton();
+    setTimeout(() => {
+      setShowErrorMessagesForScreenReader(false);
+    }, 1e3);
+  };
+  const putFocusOnButton = () => {
+    var _a;
+    (_a = buttonInputRef.current) == null ? void 0 : _a.focus();
+  };
   let addFilesInfoText = numberOfFiles > 0 ? activatedLanguage === "sv" ? `${numberOfFiles} filer valda (max ${allowedNumberOfFiles})` : `${numberOfFiles} files chosed (max ${allowedNumberOfFiles})` : activatedLanguage === "sv" ? "Ingen fil vald" : "No file chosen";
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "inputContainer", children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
-      "div",
+      "label",
       {
+        tabIndex: -1,
         className: (0, import_clsx2.default)(
           ["form-control"],
           "filePickLabel",
           showErrors && questionObject.error ? ["form-control error"] : ""
         ),
         id: labelId,
+        htmlFor: inputId,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
             "button",
@@ -896,32 +976,34 @@ var ExploreFiles = ({
                 "filePickButton",
                 showErrors && questionObject.error ? "filePickButton error" : ""
               ),
-              "aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
-              "aria-label": `${activatedLanguage === "sv" ? "Knap aria-label V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
+              "aria-describedby": `${aboutId} ${showErrors && questionObject.error ? errorId : ""}`.trim(),
+              "aria-label": `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
               children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText + "span aria-hidden=true" })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              className: "invisible",
+              multiple: true,
+              onChange: handleFiles,
+              tabIndex: -1,
+              id: inputId
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "filePickText", children: addFilesInfoText })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
-      "input",
-      {
-        ref: fileInputRef,
-        type: "file",
-        className: "invisible",
-        multiple: true,
-        onChange: handleFiles,
-        tabIndex: -1,
-        id: inputId
-      }
-    ),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       ScreenReaderErrors_default,
       {
         errorMessageAddingFile,
-        activatedLanguage
+        removeUploadErrors,
+        activatedLanguage,
+        putFocusOnButton
       }
     )
   ] }) });
@@ -955,12 +1037,11 @@ var SelectedFiles = ({
   errorMessageAddingFile,
   activatedLanguage,
   numberOfFiles,
-  setNumberOfFiles,
-  removeUploadErrors
+  setNumberOfFiles
 }) => {
   const theDiv = (0, import_react6.useRef)(null);
   const remove = (file) => {
-    let newFiles = questionObject.files.filter((f) => f !== file);
+    let newFiles = questionObject.Files.filter((f) => f !== file);
     const newCountOfFiles = newFiles.length;
     setNumberOfFiles(newCountOfFiles);
     const e = { target: { value: `${newCountOfFiles} files`, files: newFiles } };
@@ -986,54 +1067,58 @@ var SelectedFiles = ({
   };
   const windowWidth = useWindowWidth();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-      errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { "aria-hidden": true, className: "fileListUnorderedList", children: [
-        " ",
-        errorMessageAddingFile.map((errorObj, index) => {
-          const errorFileName = errorObj.FileName;
-          let mobileFirstFileName = errorObj.FileName.split(".").shift();
-          mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
-          const fileType = errorObj.FileName.split(".").pop();
-          mobileFirstFileName = mobileFirstFileName + "." + fileType;
-          return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react6.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fileInListContainer", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fileInList", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_bootstrap.Row, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-                "span",
-                {
-                  "aria-hidden": "true",
-                  className: (0, import_clsx4.default)("uploadedDot", "uploadFailed"),
-                  children: "!"
-                }
-              ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { children: windowWidth < 768 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "desktopFileName", children: errorObj.FileName }) }),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { className: "lastCol" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              import_react_bootstrap.Col,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("ul", { className: "fileListUnorderedList", "aria-label": "Valideringsfelmeddelanden f\xF6r uppladdade filer", children: [
+      " ",
+      errorMessageAddingFile.map((errorObj, index) => {
+        const errorFileName = errorObj.FileName;
+        let mobileFirstFileName = errorObj.FileName.split(".").shift();
+        mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
+        const fileType = errorObj.FileName.split(".").pop();
+        mobileFirstFileName = mobileFirstFileName + "." + fileType;
+        return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react6.default.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "fileInListContainer", role: "alert", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fileInList", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react_bootstrap.Row, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "span",
               {
-                style: {
-                  width: "100%",
-                  color: "#8e0039"
-                },
-                className: "errorMessageAddingFile",
-                ...activatedLanguage === "sv" ? {
-                  "aria-label": `${errorFileName} ${errorObj.svMessage}`
-                } : {
-                  "aria-label": `${errorFileName} ${errorObj.enMessage}`
-                },
-                children: activatedLanguage === "sv" ? errorObj.svMessage : errorObj.enMessage
+                "aria-hidden": "true",
+                className: (0, import_clsx4.default)("uploadedDot", "uploadFailed"),
+                children: "!"
               }
             ) }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { className: "makeSpace" }) })
-          ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
-        })
-      ] }),
-      errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { onClick: removeUploadErrors, className: "errorMessageAddingFile", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "X" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sr-only", children: "Ta bort felmeddelande f\xF6r uppladdning av filer" })
-      ] })
-    ] }),
-    questionObject.files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "fileListUnorderedList", "aria-label": "Uppladdade filer", children: questionObject.files.map((file, index) => {
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { children: windowWidth < 768 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "desktopFileName", children: errorObj.FileName }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { className: "lastCol", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              "button",
+              {
+                className: "selectedFilesLinkButton",
+                onClick: () => {
+                  removeError(index);
+                },
+                "aria-label": activatedLanguage === "sv" ? `St\xE4ng felmeddelandet f\xF6r ${errorFileName}` : `Close error message for ${errorFileName}`,
+                children: activatedLanguage === "sv" ? "St\xE4ng" : "Close"
+              }
+            ) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Row, { children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+            import_react_bootstrap.Col,
+            {
+              style: {
+                width: "100%",
+                color: "#8e0039"
+              },
+              className: "errorMessageAddingFile",
+              ...activatedLanguage === "sv" ? {
+                "aria-label": `${errorFileName} ${errorObj.svMessage}`
+              } : {
+                "aria-label": `${errorFileName} ${errorObj.enMessage}`
+              },
+              children: activatedLanguage === "sv" ? errorObj.svMessage : errorObj.enMessage
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { className: "makeSpace" }) })
+        ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
+      })
+    ] }) }),
+    questionObject.Files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("ul", { className: "fileListUnorderedList", "aria-label": "Uppladdade filer", children: questionObject.Files.map((file, index) => {
       const indicatorfileName = file.FileName;
       let mobileFirstFileName = file.FileName.split(".").shift();
       mobileFirstFileName = mobileFirstFileName.length > 8 ? mobileFirstFileName.substring(0, 8) + ".." : mobileFirstFileName;
@@ -1064,12 +1149,13 @@ var SelectedFiles = ({
             mobileFirstFileName,
             " (",
             Math.ceil(file.FileSize / (1024 * 1024)),
-            " ",
-            "MB)"
+            " MB)"
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "desktopFileName", children: [
             file.FileName,
             " (",
-            file.FileSize < 1024 * 1024 ? `${Math.round(file.FileSize / 1024)} kB` : `${(file.FileSize / (1024 * 1024)).toFixed(1)} MB`,
+            file.FileSize < 1024 * 1024 ? `${Math.round(file.FileSize / 1024)} kB` : `${(file.FileSize / (1024 * 1024)).toFixed(
+              1
+            )} MB`,
             ")"
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_react_bootstrap.Col, { className: "lastCol", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -1263,6 +1349,7 @@ var AddFiles = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     !showPreview && visible && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { role: "group", children: [
+      !questionObject.hideQuestion && questionObject.questionLabel,
       questionObject.aboutText && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
         "p",
         {
@@ -1282,8 +1369,14 @@ var AddFiles = ({
       ),
       questionObject.hasValidationError && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "error addfileserror", id: errorId, children: [
         /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { "aria-hidden": true, className: "errorDot", children: "!" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "sr-only", children: "Valideringsfel" }),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "errorText", children: questionObject.validationDefaultMessesege })
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "span",
+          {
+            "aria-label": `Felmeddelande. ${questionObject.validationDefaultMessesege}`,
+            className: "errorText",
+            children: questionObject.validationDefaultMessesege
+          }
+        )
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         ExploreFilesStandard_default,
@@ -1312,8 +1405,7 @@ var AddFiles = ({
           errorMessageAddingFile,
           activatedLanguage,
           numberOfFiles,
-          setNumberOfFiles,
-          removeUploadErrors: handleRemoveErrors
+          setNumberOfFiles
         }
       )
     ] }) }),