@usero/sdk 1.1.2 → 1.1.3

package/dist/react.js

@@ -1039,21 +1039,22 @@ function initUseroFeedbackWidget(props) {
     screenshotError = null;
     if (!file.type.startsWith("image/")) {
       screenshotError = "Image files only";
-      render();
+      updateUploadExtras();
       return;
     }
     if (file.size > MAX_SCREENSHOT_BYTES) {
       screenshotError = "Max 10MB";
-      render();
+      updateUploadExtras();
       return;
     }
     if (screenshots.length >= MAX_SCREENSHOTS) {
       screenshotError = `Max ${MAX_SCREENSHOTS} screenshots`;
-      render();
+      updateUploadExtras();
       return;
     }
     isUploadingScreenshot = true;
-    render();
+    updateUploadButton();
+    updateUploadExtras();
     try {
       const uploaded = await apiClient.uploadScreenshot(file, clientId);
       screenshots = [...screenshots, uploaded];
@@ -1061,12 +1062,14 @@ function initUseroFeedbackWidget(props) {
       screenshotError = err instanceof Error ? err.message : "Upload failed";
     } finally {
       isUploadingScreenshot = false;
-      render();
+      updateUploadButton();
+      updateUploadExtras();
     }
   }
   function removeScreenshot(index) {
     screenshots = screenshots.filter((_, i) => i !== index);
-    render();
+    updateUploadButton();
+    updateUploadExtras();
   }
   function close() {
     if (!isOpen) return;
@@ -1074,6 +1077,57 @@ function initUseroFeedbackWidget(props) {
     onClose?.();
     render();
   }
+  function buildUploadButtonInner() {
+    return isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot";
+  }
+  function buildUploadButtonHtml() {
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const btnDisabled = isUploadingScreenshot || atMax;
+    return `
+			<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
+			<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
+				${buildUploadButtonInner()}
+			</button>
+		`;
+  }
+  function buildUploadExtrasHtml() {
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const previewsHtml = screenshots.map(
+      (shot, i) => `
+					<div class="fb-sp">
+						<img src="${escapeHtml(shot.url)}" alt="Screenshot ${i + 1}" class="fb-si" />
+						<button type="button" class="fb-sr" data-role="screenshot-remove" data-index="${i}" aria-label="Remove screenshot">\u2715</button>
+					</div>
+				`
+    ).join("");
+    const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
+    const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
+    return screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
+  }
+  function updateUploadButton() {
+    if (!showScreenshotOption) return;
+    const pickBtn = panelEl.querySelector(
+      'button[data-role="screenshot-pick"]'
+    );
+    if (!pickBtn) return;
+    const atMax = screenshots.length >= MAX_SCREENSHOTS;
+    const btnDisabled = isUploadingScreenshot || atMax;
+    pickBtn.disabled = btnDisabled;
+    pickBtn.classList.toggle("fb-upb--dis", btnDisabled);
+    pickBtn.innerHTML = buildUploadButtonInner();
+  }
+  function updateUploadExtras() {
+    if (!showScreenshotOption) return;
+    const container = panelEl.querySelector(".fb-up");
+    if (!container) return;
+    container.innerHTML = buildUploadExtrasHtml();
+    container.querySelectorAll('button[data-role="screenshot-remove"]').forEach((btn) => {
+      btn.addEventListener("click", () => {
+        const idx = Number(btn.dataset.index);
+        if (Number.isInteger(idx)) removeScreenshot(idx);
+      });
+    });
+  }
   async function submitForm() {
     if (isSubmitting) return;
     isSubmitting = true;
@@ -1191,30 +1245,8 @@ function initUseroFeedbackWidget(props) {
 				`;
     }).join("");
     const messageHtml = submitMessage ? `<div class="fb-msg fb-msg--header ${submitMessage.type === "success" ? "fb-msg--ok" : "fb-msg--err"}">${submitMessage.type === "success" ? "\u2713" : "\u26A0"} ${escapeHtml(submitMessage.text)}</div>` : "";
-    const uploadBtnHtml = showScreenshotOption ? (() => {
-      const atMax = screenshots.length >= MAX_SCREENSHOTS;
-      const btnDisabled = isUploadingScreenshot || atMax;
-      return `
-						<input type="file" accept="image/*" data-role="screenshot-input" style="display:none;" aria-label="Choose screenshot" />
-						<button type="button" class="fb-upb ${btnDisabled ? "fb-upb--dis" : ""}" data-role="screenshot-pick" ${btnDisabled ? "disabled" : ""} style="border:1px solid ${theme.border};color:${theme.text};">
-							${isUploadingScreenshot ? '<span class="fb-ups"></span> Uploading...' : "\u{1F4F7} Add screenshot"}
-						</button>
-					`;
-    })() : "";
-    const uploadExtrasHtml = showScreenshotOption ? (() => {
-      const atMax = screenshots.length >= MAX_SCREENSHOTS;
-      const previewsHtml = screenshots.map(
-        (shot, i) => `
-								<div class="fb-sp">
-									<img src="${escapeHtml(shot.url)}" alt="Screenshot ${i + 1}" class="fb-si" />
-									<button type="button" class="fb-sr" data-role="screenshot-remove" data-index="${i}" aria-label="Remove screenshot">\u2715</button>
-								</div>
-							`
-      ).join("");
-      const errorHtml = screenshotError ? `<div class="fb-upe">\u26A0 ${escapeHtml(screenshotError)}</div>` : "";
-      const limitHtml = atMax ? `<div class="fb-sl">Max ${MAX_SCREENSHOTS}</div>` : "";
-      return screenshotError || screenshots.length > 0 || atMax ? `<div class="fb-up-extras">${errorHtml}${screenshots.length > 0 ? `<div class="fb-ss">${previewsHtml}</div>` : ""}${limitHtml}</div>` : "";
-    })() : "";
+    const uploadBtnHtml = showScreenshotOption ? buildUploadButtonHtml() : "";
+    const uploadExtrasHtml = showScreenshotOption ? buildUploadExtrasHtml() : "";
     const emailBlockHtml = showEmailOption ? `
 				<div class="fb-email">
 					<label class="fb-email-lbl" style="color:${theme.text}">
@@ -1240,7 +1272,7 @@ function initUseroFeedbackWidget(props) {
 						${uploadBtnHtml}
 						<div class="fb-charcount${lowChars ? " fb-charcount--low" : ""}" data-role="charcount" style="color:${lowChars ? "#dc2626" : theme.text};opacity:${lowChars ? 1 : 0.6};">${remaining} chars remaining</div>
 					</div>
-					${uploadExtrasHtml ? `<div class="fb-up">${uploadExtrasHtml}</div>` : ""}
+					${showScreenshotOption ? `<div class="fb-up">${uploadExtrasHtml}</div>` : ""}
 					${emailBlockHtml}
 					<button class="fb-sub ${submitDisabled ? "fb-sub--dis" : ""}" type="submit" aria-label="Submit" ${submitDisabled ? "disabled" : ""} style="${submitStyle}">
 						${isSubmitting ? '<span class="fb-spin"></span>' : ""}
@@ -1337,10 +1369,16 @@ function initUseroFeedbackWidget(props) {
     if (isOpen) close();
     else open();
   });
-  backdropEl.addEventListener("click", close);
+  backdropEl.addEventListener("click", () => {
+    if (isUploadingScreenshot || isSubmitting) return;
+    close();
+  });
   const onKeyDown = (e) => {
     if (!isOpen) return;
-    if (e.key === "Escape") close();
+    if (e.key === "Escape") {
+      if (isUploadingScreenshot || isSubmitting) return;
+      close();
+    }
     if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
       e.preventDefault();
       void submitForm();