optimized-react-component-library-xyz123 0.1.58 → 0.1.60

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)(
@@ -930,7 +899,7 @@ var ExploreFiles = ({
                 showErrors && questionObject.error ? "filePickButton error" : ""
               ),
               "aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
-              "aria-label": `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
+              "aria-label": `${activatedLanguage === "sv" ? "Knap aria-label V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
               children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
             }
           ),
@@ -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 + "span aria-hidden=true" })
         ]
       }
     ),
@@ -954,9 +923,7 @@ var ExploreFiles = ({
       ScreenReaderErrors_default,
       {
         errorMessageAddingFile,
-        removeUploadErrors,
-        activatedLanguage,
-        putFocusOnButton
+        activatedLanguage
       }
     )
   ] }) });
@@ -1063,15 +1030,10 @@ var SelectedFiles = ({
           ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
         })
       ] }),
-      errorMessageAddingFile.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        "button",
-        {
-          onClick: removeUploadErrors,
-          className: "errorMessageAddingFile",
-          "aria-label": activatedLanguage === "sv" ? "Ta bort felmeddelande f\xF6r uppladdning av filer" : "Remove error message for file uploads",
-          children: "X"
-        }
-      )
+      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;

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(
@@ -865,7 +834,7 @@ var ExploreFiles = ({
                 showErrors && questionObject.error ? "filePickButton error" : ""
               ),
               "aria-describedby": `${aboutId} ${questionObject.hasValidationError ? errorId : ""}`.trim(),
-              "aria-label": `${activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
+              "aria-label": `${activatedLanguage === "sv" ? "Knap aria-label V\xE4lj fil" : "Choose file"} ${addFilesInfoText}`,
               children: activatedLanguage === "sv" ? "V\xE4lj fil" : "Choose file"
             }
           ),
@@ -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 + "span aria-hidden=true" })
         ]
       }
     ),
@@ -889,9 +858,7 @@ var ExploreFiles = ({
       ScreenReaderErrors_default,
       {
         errorMessageAddingFile,
-        removeUploadErrors,
-        activatedLanguage,
-        putFocusOnButton
+        activatedLanguage
       }
     )
   ] }) });
@@ -998,15 +965,10 @@ var SelectedFiles = ({
           ] }, index) }) }) }, `error-${errorObj.FileName}-${index}`) });
         })
       ] }),
-      errorMessageAddingFile.length > 0 && /* @__PURE__ */ jsx10(
-        "button",
-        {
-          onClick: removeUploadErrors,
-          className: "errorMessageAddingFile",
-          "aria-label": activatedLanguage === "sv" ? "Ta bort felmeddelande f\xF6r uppladdning av filer" : "Remove error message for file uploads",
-          children: "X"
-        }
-      )
+      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;

package/package.json

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