@norges-domstoler/dds-components 22.5.0 → 22.6.0

package/dist/index.mjs

@@ -8825,8 +8825,12 @@ var File2 = (props) => {
     file: stateFile,
     removeFile,
     isValid,
+    uploadStatus,
+    errorMessage,
     disabled,
-    readOnly
+    readOnly,
+    onRetry,
+    fileId
   } = props;
   const [fileUrl, setFileUrl] = useState17();
   useEffect24(() => {
@@ -8837,63 +8841,109 @@ var File2 = (props) => {
       setFileUrl(url);
       return () => URL.revokeObjectURL(url);
     }
-  }, [stateFile.file]);
+  }, [stateFile.file, stateFile.url]);
   const errorsList = stateFile.errors.map((e, errorIndex) => ({
     id: derivativeIdGenerator(parentId, `file-${index}-error-${errorIndex}`),
     message: e
   }));
+  if (errorMessage)
+    errorsList.push({
+      id: derivativeIdGenerator(
+        parentId,
+        `file-${index}-error-${errorsList.length}`
+      ),
+      message: errorMessage
+    });
   const inactive = disabled || readOnly;
+  let displayStatus;
+  if (!isValid) displayStatus = "invalid";
+  else if (uploadStatus) displayStatus = uploadStatus;
+  else displayStatus = "valid";
+  const isInvalid = displayStatus === "invalid";
+  const hasError = displayStatus === "error" || isInvalid;
+  const hasRetry = displayStatus === "error" && onRetry;
+  let statusIndicator;
+  switch (displayStatus) {
+    case "uploading":
+      statusIndicator = /* @__PURE__ */ jsx279(Spinner, { size: "var(--dds-size-icon-component)" });
+      break;
+    case "success":
+    case "valid":
+      statusIndicator = /* @__PURE__ */ jsx279(
+        Icon,
+        {
+          icon: CheckCircledIcon,
+          iconSize: "component",
+          className: FileUploader_default[`file__icon--valid`]
+        }
+      );
+      break;
+    case "invalid":
+    case "error":
+      statusIndicator = /* @__PURE__ */ jsx279(
+        Icon,
+        {
+          icon: ErrorIcon,
+          iconSize: "component",
+          className: FileUploader_default[`file__icon--invalid`]
+        }
+      );
+      break;
+  }
   return /* @__PURE__ */ jsxs106("li", { children: [
     /* @__PURE__ */ jsxs106(
       Paper,
       {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: "x0.75",
         marginBlock: "x0.5 0",
         padding: "x0.5 x1",
-        border: disabled ? "border-subtle" : isValid ? "border-default" : "border-danger",
+        border: disabled ? "border-subtle" : !hasError ? "border-default" : "border-danger",
         background: inactive ? "surface-field-disabled" : "surface-subtle",
-        className: cn(!isValid && FileUploader_default["file--invalid"]),
+        className: cn(hasError && FileUploader_default["file--invalid"]),
         children: [
-          /* @__PURE__ */ jsx279(
-            Typography,
-            {
-              as: "span",
-              color: disabled ? "text-subtle" : readOnly ? "text-medium" : void 0,
-              className: cn(FileUploader_default.file__name),
-              children: fileUrl ? /* @__PURE__ */ jsx279(Link, { href: fileUrl, target: "_blank", children: stateFile.name }) : stateFile.name
-            }
-          ),
-          !inactive && /* @__PURE__ */ jsxs106(Fragment8, { children: [
+          /* @__PURE__ */ jsxs106(HStack, { alignItems: "center", justifyContent: "space-between", gap: "x0.75", children: [
             /* @__PURE__ */ jsx279(
-              Icon,
+              Typography,
               {
-                icon: isValid ? CheckCircledIcon : ErrorIcon,
-                iconSize: "component",
-                className: FileUploader_default[`file__icon--${isValid ? "valid" : "invalid"}`]
+                as: "span",
+                color: disabled ? "text-subtle" : readOnly ? "text-medium" : void 0,
+                className: cn(FileUploader_default.file__name),
+                children: fileUrl ? /* @__PURE__ */ jsx279(Link, { href: fileUrl, target: "_blank", children: stateFile.name }) : stateFile.name
               }
             ),
-            /* @__PURE__ */ jsx279(
-              Button,
-              {
-                size: "xsmall",
-                purpose: "tertiary",
-                type: "button",
-                onClick: removeFile,
-                icon: CloseIcon,
-                "aria-label": t(texts16.removeFile(stateFile.name)),
-                htmlProps: {
-                  "aria-invalid": !isValid ? true : void 0,
-                  "aria-errormessage": !isValid ? t(texts16.invalidFile) : void 0,
-                  "aria-describedby": spaceSeparatedIdListGenerator(
-                    errorsList.map((e) => e.id)
-                  )
+            !inactive && /* @__PURE__ */ jsxs106(Fragment8, { children: [
+              statusIndicator,
+              /* @__PURE__ */ jsx279(
+                Button,
+                {
+                  size: "xsmall",
+                  purpose: "tertiary",
+                  type: "button",
+                  onClick: removeFile,
+                  icon: CloseIcon,
+                  "aria-label": t(texts16.removeFile(stateFile.name)),
+                  htmlProps: {
+                    "aria-invalid": !isValid ? true : void 0,
+                    "aria-errormessage": !isValid ? t(texts16.invalidFile) : void 0,
+                    "aria-describedby": spaceSeparatedIdListGenerator(
+                      errorsList.map((e) => e.id)
+                    )
+                  }
                 }
-              }
-            )
-          ] })
+              )
+            ] })
+          ] }),
+          hasRetry && /* @__PURE__ */ jsx279(
+            Box,
+            {
+              as: Button,
+              marginBlock: "x0.75 0",
+              size: "small",
+              purpose: "secondary",
+              onClick: () => onRetry(fileId),
+              icon: RefreshIcon,
+              children: t(texts16.tryAgain)
+            }
+          )
         ]
       }
     ),
@@ -8914,6 +8964,14 @@ var texts16 = createTexts({
     nn: "Ugyldig fil",
     en: "Invalid file",
     se: "F\xE1mohis fiila"
+  },
+  tryAgain: {
+    nb: "Pr\xF8v igjen",
+    no: "Pr\xF8v igjen",
+    nn: "Pr\xF8v igjen",
+    en: "Try again",
+    // TODO: oversettelse
+    se: "Pr\xF8v igjen"
   }
 });
 
@@ -9274,6 +9332,9 @@ var FileUploader = (props) => {
     hideFileList,
     className,
     afterLabelContent,
+    fileStatusMap,
+    deriveId,
+    onRetry,
     ...rest
   } = props;
   const { t } = useTranslation();
@@ -9309,19 +9370,35 @@ var FileUploader = (props) => {
   const inputId = derivativeIdGenerator(uniqueId, "input");
   const fileListId = derivativeIdGenerator(uniqueId, "file-list");
   const fileListNameId = derivativeIdGenerator(uniqueId, "file-list-name");
-  const fileListElements = stateFiles.map((stateFile, index) => /* @__PURE__ */ jsx280(
-    File2,
-    {
-      parentId: uniqueId,
-      index,
-      file: stateFile,
-      isValid: stateFile.errors.length === 0,
-      removeFile: () => removeFile(stateFile),
-      disabled,
-      readOnly
-    },
-    stateFile.name
-  ));
+  function toPublicFile(sf) {
+    if (sf.file) return sf.file;
+    if (sf.url) return { name: sf.name, url: sf.url };
+    return null;
+  }
+  const fileListElements = stateFiles.map((stateFile, index) => {
+    var _a, _b, _c;
+    const pf = toPublicFile(stateFile);
+    const id2 = deriveId ? pf ? deriveId(pf) : stateFile.name : (_a = stateFile.url) != null ? _a : stateFile.name;
+    const uploadStatus = (_b = fileStatusMap == null ? void 0 : fileStatusMap.get(id2)) == null ? void 0 : _b.uploadStatus;
+    const errorMessage2 = (_c = fileStatusMap == null ? void 0 : fileStatusMap.get(id2)) == null ? void 0 : _c.errorMessage;
+    return /* @__PURE__ */ jsx280(
+      File2,
+      {
+        parentId: uniqueId,
+        index,
+        file: stateFile,
+        isValid: stateFile.errors.length === 0,
+        removeFile: () => removeFile(stateFile),
+        disabled,
+        readOnly,
+        uploadStatus,
+        errorMessage: errorMessage2,
+        fileId: id2,
+        onRetry
+      },
+      stateFile.name
+    );
+  });
   const rootErrorsList = rootErrors.map((e, index) => ({
     id: derivativeIdGenerator(uniqueId, `error-${index}`),
     message: e