optimized-react-component-library-xyz123 0.1.57 → 0.1.59

package/dist/index.css

@@ -2,336 +2,6 @@
 /* src/NewInputComponentStandard/MultipleCheckboxesStandard/MultipleCheckboxesStandard.css */
 /* src/NewInputComponentStandard/TextAreaStandard/TextAreaStandard.css */
 /* src/NewInputComponentStandard/FilesUploadStandard/FilesUploadStandard.css */
-.files-upload {
-  width: 100%;
-  max-width: 800px;
-  margin: 0 auto;
-  font-family:
-    "Segoe UI",
-    Tahoma,
-    Geneva,
-    Verdana,
-    sans-serif;
-}
-.files-drop-zone {
-  border: 2px dashed #6e3282;
-  border-radius: 12px;
-  padding: 3rem 2rem;
-  text-align: center;
-  transition: all 0.3s ease;
-  background-color: #fafafa;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-}
-.files-drop-zone:hover {
-  border-color: #6e3282;
-  background-color: #f5ebf8;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(220, 148, 253, 0.15);
-}
-.files-drop-zone.drag-active {
-  border-color: #6e3282;
-  background-color: #f5ebf8;
-  transform: scale(1.02);
-  box-shadow: 0 8px 25px rgba(30, 167, 253, 0.2);
-}
-.files-drop-zone:focus {
-  border: 0.2rem solid #6e3282;
-}
-.files-drop-zone:focus-visible {
-  outline-offset: 0 !important;
-  outline-style: solid !important;
-  outline-color: #fff !important;
-  outline-width: 2px !important;
-  box-shadow: 0 0 0 4px #000 !important;
-}
-.files-drop-content {
-  pointer-events: none;
-}
-.files-icon {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  opacity: 0.7;
-  animation: float 3s ease-in-out infinite;
-}
-@keyframes float {
-  0%, 100% {
-    transform: translateY(0px);
-  }
-  50% {
-    transform: translateY(-10px);
-  }
-}
-.files-drop-text {
-  font-size: 1.2rem;
-  margin-bottom: 0.5rem;
-  color: #333;
-  font-weight: 500;
-}
-.files-drop-info {
-  font-size: 0.9rem;
-  color: #666;
-  margin: 0;
-}
-.files-allowed-types {
-  font-size: 0.85rem;
-  color: #555;
-  margin: 0.75rem 0 0 0;
-  padding: 0.5rem;
-  background-color: rgba(146, 64, 252, 0.1);
-  border-radius: 6px;
-  border-left: 3px solid #ce95e0;
-}
-.files-allowed-types strong {
-  color: #6e3282;
-}
-.files-input-hidden {
-  display: none;
-}
-.files-summary {
-  margin: 1.5rem 0;
-  padding: 1rem;
-  background-color: #f8f9fa;
-  border-radius: 8px;
-  border: 1px solid #e9ecef;
-}
-.files-summary-stats {
-  display: flex;
-  gap: 1rem;
-  margin-bottom: 1rem;
-  flex-wrap: wrap;
-}
-.stat {
-  padding: 0.5rem 1rem;
-  border-radius: 20px;
-  background-color: #e9ecef;
-  font-size: 0.9rem;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.stat.pending {
-  background-color: #fff3cd;
-  color: #856404;
-}
-.stat.completed {
-  background-color: #d1e7dd;
-  color: #0a3622;
-}
-.stat.error {
-  background-color: #f8d7da;
-  color: #721c24;
-}
-.files-summary-actions {
-  display: flex;
-  gap: 0.5rem;
-  flex-wrap: wrap;
-}
-.action-button {
-  padding: 0.75rem 1.5rem;
-  border: none;
-  border-radius: 6px;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-.action-button.primary {
-  background-color: #1ea7fd;
-  color: white;
-}
-.action-button.primary:hover {
-  background-color: #1890ff;
-  transform: translateY(-1px);
-}
-.action-button.secondary {
-  background-color: #6c757d;
-  color: white;
-}
-.action-button.secondary:hover {
-  background-color: #5a6268;
-  transform: translateY(-1px);
-}
-.files-list {
-  margin-top: 1.5rem;
-}
-.files-list h4 {
-  margin-bottom: 1rem;
-  color: #333;
-  font-size: 1.1rem;
-  font-weight: 600;
-}
-.files-items {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-.file-item {
-  display: flex;
-  align-items: center;
-  gap: 1rem;
-  padding: 1rem;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  margin-bottom: 0.75rem;
-  background-color: white;
-  transition: all 0.2s ease;
-  position: relative;
-}
-.file-item:hover {
-  background-color: #f8f9fa;
-  border-color: #dee2e6;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-.file-item.uploading {
-  background-color: #e6f7ff;
-  border-color: #91d5ff;
-}
-.file-item.completed {
-  background-color: #f6ffed;
-  border-color: #b7eb8f;
-}
-.file-item.error {
-  background-color: #fff2f0;
-  border-color: #ffccc7;
-}
-.file-icon-status {
-  font-size: 1.5rem;
-  min-width: 2rem;
-  text-align: center;
-}
-.file-info {
-  flex: 1;
-  min-width: 0;
-}
-.file-name {
-  font-weight: 500;
-  color: #333;
-  margin-bottom: 0.5rem;
-  word-break: break-word;
-}
-.file-details {
-  display: flex;
-  gap: 1rem;
-  font-size: 0.85rem;
-  color: #666;
-  flex-wrap: wrap;
-}
-.file-size {
-  color: #666;
-}
-.file-status {
-  color: #1ea7fd;
-  font-weight: 500;
-}
-.file-error {
-  color: #dc3545;
-  font-weight: 500;
-}
-.progress-bar {
-  width: 100%;
-  height: 4px;
-  background-color: #e9ecef;
-  border-radius: 2px;
-  margin-top: 0.5rem;
-  overflow: hidden;
-}
-.progress-fill {
-  height: 100%;
-  background-color: #1ea7fd;
-  transition: width 0.3s ease;
-  border-radius: 2px;
-}
-.file-actions {
-  display: flex;
-  gap: 0.5rem;
-}
-.action-btn {
-  background: none;
-  border: 1px solid transparent;
-  padding: 0.5rem;
-  border-radius: 6px;
-  cursor: pointer;
-  font-size: 1rem;
-  transition: all 0.2s ease;
-  min-width: 2.5rem;
-  height: 2.5rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.action-btn.upload {
-  color: #1ea7fd;
-  border-color: #1ea7fd;
-}
-.action-btn.upload:hover {
-  background-color: #1ea7fd;
-  color: white;
-}
-.action-btn.retry {
-  color: #fd7e14;
-  border-color: #fd7e14;
-}
-.action-btn.retry:hover {
-  background-color: #fd7e14;
-  color: white;
-}
-.action-btn.remove {
-  color: #6e3282;
-  border-color: #6e3282;
-}
-.action-btn.remove:hover {
-  background-color: #6e3282;
-  color: white;
-}
-@media (max-width: 768px) {
-  .files-drop-zone {
-    padding: 2rem 1rem;
-  }
-  .files-icon {
-    font-size: 3rem;
-  }
-  .files-drop-text {
-    font-size: 1rem;
-  }
-  .files-summary-stats {
-    flex-direction: column;
-    gap: 0.5rem;
-  }
-  .files-summary-actions {
-    flex-direction: column;
-  }
-  .action-button {
-    justify-content: center;
-  }
-  .file-item {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 0.75rem;
-  }
-  .file-details {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-  .file-actions {
-    align-self: flex-end;
-  }
-}
-@media (max-width: 480px) {
-  .files-upload {
-    padding: 0 0.5rem;
-  }
-  .files-drop-zone {
-    padding: 1.5rem 1rem;
-  }
-  .file-item {
-    padding: 0.75rem;
-  }
-}
-
 /* src/NewInputComponentStandard/AddFilesStandard/AddFilesStandard.css */
 .invisible {
   display: none;

package/dist/index.js

@@ -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 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_clsx2 = __toESM(require("clsx"));
 
 // src/NewInputComponentStandard/AddFilesStandard/ScreenReaderErrors.tsx
@@ -829,11 +829,7 @@ var import_react3 = __toESM(require("react"));
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var ScreenReaderErrors = ({
   errorMessageAddingFile,
-  activatedLanguage,
-  removeUploadErrors,
-  putFocusOnButton = () => {
-    alert("no function");
-  }
+  activatedLanguage
 }) => {
   const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = import_react3.default.useState(false);
   const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = import_react3.default.useState("");
@@ -849,15 +845,6 @@ var ScreenReaderErrors = ({
       setActivateErrorMessagesForScreenReader(true);
     }
   }, [errorMessageAddingFile]);
-  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.jsx)(import_jsx_runtime7.Fragment, { children: activateErrorMessagesForScreenReader && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", className: "sr-only", "aria-atomic": "true", children: errorMessagesForScreenReader }) });
 };
 var ScreenReaderErrors_default = ScreenReaderErrors;
@@ -875,24 +862,10 @@ var ExploreFiles = ({
   errorId,
   questionObject,
   showErrors,
-  errorMessageAddingFile,
-  removeUploadErrors = () => {
-  }
+  errorMessageAddingFile
 }) => {
   const fileInputRef = (0, import_react4.useRef)(null);
   const buttonInputRef = (0, import_react4.useRef)(null);
-  const [showErrorMessagesForScreenReader, setShowErrorMessagesForScreenReader] = import_react4.default.useState(false);
-  (0, import_react4.useEffect)(() => {
-    const button = buttonInputRef.current;
-    if (!button) return;
-    const handleFocus = () => {
-      setShowErrorMessagesForScreenReader(!showErrorMessagesForScreenReader);
-    };
-    button.addEventListener("focus", handleFocus);
-    return () => {
-      button.removeEventListener("focus", handleFocus);
-    };
-  }, []);
   const handleFiles = (event) => {
     const files = Array.from(event.target.files || []);
     FilesSelected(files);
@@ -902,10 +875,6 @@ var ExploreFiles = ({
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  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)(
@@ -946,7 +915,7 @@ var ExploreFiles = ({
               id: inputId
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "filePickText", children: addFilesInfoText })
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText })
         ]
       }
     ),
@@ -954,9 +923,7 @@ var ExploreFiles = ({
       ScreenReaderErrors_default,
       {
         errorMessageAddingFile,
-        removeUploadErrors,
-        activatedLanguage,
-        putFocusOnButton
+        activatedLanguage
       }
     )
   ] }) });
@@ -990,7 +957,8 @@ var SelectedFiles = ({
   errorMessageAddingFile,
   activatedLanguage,
   numberOfFiles,
-  setNumberOfFiles
+  setNumberOfFiles,
+  removeUploadErrors
 }) => {
   const theDiv = (0, import_react6.useRef)(null);
   const remove = (file) => {
@@ -1020,62 +988,53 @@ var SelectedFiles = ({
   };
   const windowWidth = useWindowWidth();
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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",
+    /* @__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,
               {
-                "aria-hidden": "true",
-                className: (0, import_clsx4.default)("uploadedDot", "uploadFailed"),
-                children: "!"
+                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.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,
-            {
-              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
-            }
-          ) }),
-          errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-            "button",
-            {
-              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!"
-            }
-          ),
-          /* @__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}`) });
-      })
-    ] }) }),
+            /* @__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) => {
       const indicatorfileName = file.FileName;
       let mobileFirstFileName = file.FileName.split(".").shift();
@@ -1355,7 +1314,8 @@ var AddFiles = ({
           errorMessageAddingFile,
           activatedLanguage,
           numberOfFiles,
-          setNumberOfFiles
+          setNumberOfFiles,
+          removeUploadErrors: handleRemoveErrors
         }
       )
     ] }) }),

package/dist/index.mjs

@@ -756,7 +756,7 @@ var DropFiles = ({ FilesSelected, DropFilesText = "Dra och sl\xE4pp dina filer h
 var DropFilesStandard_default = DropFiles;
 
 // src/NewInputComponentStandard/AddFilesStandard/ExploreFilesStandard.tsx
-import React3, { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useRef as useRef2 } from "react";
 import clsx2 from "clsx";
 
 // src/NewInputComponentStandard/AddFilesStandard/ScreenReaderErrors.tsx
@@ -764,11 +764,7 @@ import React2 from "react";
 import { Fragment as Fragment7, jsx as jsx7 } from "react/jsx-runtime";
 var ScreenReaderErrors = ({
   errorMessageAddingFile,
-  activatedLanguage,
-  removeUploadErrors,
-  putFocusOnButton = () => {
-    alert("no function");
-  }
+  activatedLanguage
 }) => {
   const [activateErrorMessagesForScreenReader, setActivateErrorMessagesForScreenReader] = React2.useState(false);
   const [errorMessagesForScreenReader, setErrorMessagesForScreenReader] = React2.useState("");
@@ -784,15 +780,6 @@ var ScreenReaderErrors = ({
       setActivateErrorMessagesForScreenReader(true);
     }
   }, [errorMessageAddingFile]);
-  const handleRemoveErrors = () => {
-    const errorMessages = activatedLanguage === "sv" ? `Felmeddelande raderat.` : `Error message deleted.`;
-    setErrorMessagesForScreenReader(errorMessages);
-    removeUploadErrors();
-    putFocusOnButton();
-    setTimeout(() => {
-      setActivateErrorMessagesForScreenReader(false);
-    }, 1e3);
-  };
   return /* @__PURE__ */ jsx7(Fragment7, { children: activateErrorMessagesForScreenReader && /* @__PURE__ */ jsx7("p", { role: "alert", className: "sr-only", "aria-atomic": "true", children: errorMessagesForScreenReader }) });
 };
 var ScreenReaderErrors_default = ScreenReaderErrors;
@@ -810,24 +797,10 @@ var ExploreFiles = ({
   errorId,
   questionObject,
   showErrors,
-  errorMessageAddingFile,
-  removeUploadErrors = () => {
-  }
+  errorMessageAddingFile
 }) => {
   const fileInputRef = useRef2(null);
   const buttonInputRef = useRef2(null);
-  const [showErrorMessagesForScreenReader, setShowErrorMessagesForScreenReader] = React3.useState(false);
-  useEffect3(() => {
-    const button = buttonInputRef.current;
-    if (!button) return;
-    const handleFocus = () => {
-      setShowErrorMessagesForScreenReader(!showErrorMessagesForScreenReader);
-    };
-    button.addEventListener("focus", handleFocus);
-    return () => {
-      button.removeEventListener("focus", handleFocus);
-    };
-  }, []);
   const handleFiles = (event) => {
     const files = Array.from(event.target.files || []);
     FilesSelected(files);
@@ -837,10 +810,6 @@ var ExploreFiles = ({
     var _a;
     (_a = fileInputRef.current) == null ? void 0 : _a.click();
   };
-  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__ */ jsx8(Fragment8, { children: /* @__PURE__ */ jsxs7("div", { className: "inputContainer", children: [
     /* @__PURE__ */ jsxs7(
@@ -881,7 +850,7 @@ var ExploreFiles = ({
               id: inputId
             }
           ),
-          /* @__PURE__ */ jsx8("span", { className: "filePickText", children: addFilesInfoText })
+          /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "filePickText", children: addFilesInfoText })
         ]
       }
     ),
@@ -889,9 +858,7 @@ var ExploreFiles = ({
       ScreenReaderErrors_default,
       {
         errorMessageAddingFile,
-        removeUploadErrors,
-        activatedLanguage,
-        putFocusOnButton
+        activatedLanguage
       }
     )
   ] }) });
@@ -925,7 +892,8 @@ var SelectedFiles = ({
   errorMessageAddingFile,
   activatedLanguage,
   numberOfFiles,
-  setNumberOfFiles
+  setNumberOfFiles,
+  removeUploadErrors
 }) => {
   const theDiv = useRef3(null);
   const remove = (file) => {
@@ -955,62 +923,53 @@ var SelectedFiles = ({
   };
   const windowWidth = useWindowWidth();
   return /* @__PURE__ */ jsxs8(Fragment10, { children: [
-    /* @__PURE__ */ jsx10("div", { children: errorMessageAddingFile.length > 0 && /* @__PURE__ */ jsxs8("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__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(React5.Fragment, { children: /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs8("div", { className: "fileInList", children: [
-          /* @__PURE__ */ jsxs8(Row, { children: [
-            /* @__PURE__ */ jsx10(Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ jsx10(
-              "span",
+    /* @__PURE__ */ jsxs8("div", { children: [
+      errorMessageAddingFile.length > 0 && /* @__PURE__ */ jsxs8("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__ */ jsx10("li", { children: /* @__PURE__ */ jsx10(React5.Fragment, { children: /* @__PURE__ */ jsx10("div", { children: /* @__PURE__ */ jsx10("div", { className: "fileInListContainer", children: /* @__PURE__ */ jsxs8("div", { className: "fileInList", children: [
+            /* @__PURE__ */ jsxs8(Row, { children: [
+              /* @__PURE__ */ jsx10(Col, { style: { maxWidth: "30px" }, children: /* @__PURE__ */ jsx10(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: clsx4("uploadedDot", "uploadFailed"),
+                  children: "!"
+                }
+              ) }),
+              /* @__PURE__ */ jsx10(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsx10("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ jsx10("span", { className: "desktopFileName", children: errorObj.FileName }) }),
+              /* @__PURE__ */ jsx10(Col, { className: "lastCol" })
+            ] }),
+            /* @__PURE__ */ jsx10(Row, { children: /* @__PURE__ */ jsx10(
+              Col,
               {
-                "aria-hidden": "true",
-                className: clsx4("uploadedDot", "uploadFailed"),
-                children: "!"
+                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__ */ jsx10(Col, { children: windowWidth < 768 ? /* @__PURE__ */ jsx10("span", { className: "mobileFirstFileName", children: mobileFirstFileName }) : /* @__PURE__ */ jsx10("span", { className: "desktopFileName", children: errorObj.FileName }) }),
-            /* @__PURE__ */ jsx10(Col, { className: "lastCol" })
-          ] }),
-          /* @__PURE__ */ jsx10(Row, { children: /* @__PURE__ */ jsx10(
-            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
-            }
-          ) }),
-          errorMessageAddingFile.length > 0 && /* @__PURE__ */ jsx10(
-            "button",
-            {
-              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!"
-            }
-          ),
-          /* @__PURE__ */ jsx10(Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx10(Col, { className: "makeSpace" }) })
-        ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
-      })
-    ] }) }),
+            /* @__PURE__ */ jsx10(Row, { style: { marginTop: "12px", marginBottom: "12px" }, children: /* @__PURE__ */ jsx10(Col, { className: "makeSpace" }) })
+          ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
+        })
+      ] }),
+      errorMessageAddingFile.length > 0 && /* @__PURE__ */ jsxs8("button", { onClick: removeUploadErrors, className: "errorMessageAddingFile", children: [
+        /* @__PURE__ */ jsx10("span", { "aria-hidden": true, className: "errorDot", children: "X" }),
+        /* @__PURE__ */ jsx10("span", { className: "sr-only", children: "Ta bort felmeddelande f\xF6r uppladdning av filer" })
+      ] })
+    ] }),
     questionObject.Files.length > 0 && /* @__PURE__ */ jsx10("ul", { className: "fileListUnorderedList", "aria-label": "Uppladdade filer", children: questionObject.Files.map((file, index) => {
       const indicatorfileName = file.FileName;
       let mobileFirstFileName = file.FileName.split(".").shift();
@@ -1290,7 +1249,8 @@ var AddFiles = ({
           errorMessageAddingFile,
           activatedLanguage,
           numberOfFiles,
-          setNumberOfFiles
+          setNumberOfFiles,
+          removeUploadErrors: handleRemoveErrors
         }
       )
     ] }) }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "optimized-react-component-library-xyz123",
-  "version": "0.1.57",
+  "version": "0.1.59",
   "description": "A modern React component library using TypeScript with React 19 support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",