chore: update surveys package npm dependencies (#5302)

.vscode/settings.json

@@ -1,4 +1,8 @@
 {
+  "sonarlint.connectedMode.project": {
+    "connectionId": "formbricks",
+    "projectKey": "formbricks_formbricks"
+  },
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "typescript.tsdk": "node_modules/typescript/lib"
 }

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components/DateQuestionSummary.tsx

@@ -80,7 +80,7 @@ export const DateQuestionSummary = ({
                   </div>
                 )}
               </div>
-              <div className="ph-no-capture col-span-2 whitespace-pre-wrap pl-6 font-semibold">
+              <div className="ph-no-capture col-span-2 pl-6 font-semibold whitespace-pre-wrap">
                 {renderResponseValue(response.value)}
               </div>
               <div className="px-4 text-slate-500 md:px-6">

apps/web/modules/analysis/components/SingleResponseCard/components/RenderResponse.tsx

@@ -101,7 +101,7 @@ export const RenderResponse: React.FC<RenderResponseProps> = ({
               return (
                 <p
                   key={rowValueInSelectedLanguage}
-                  className="ph-no-capture my-1 font-normal capitalize text-slate-700">
+                  className="ph-no-capture my-1 font-normal text-slate-700 capitalize">
                   {rowValueInSelectedLanguage}:{processResponseData(responseData[rowValueInSelectedLanguage])}
                 </p>
               );

apps/web/modules/ee/insights/components/insight-sheet/index.tsx

@@ -151,10 +151,10 @@ export const InsightSheet = ({
         <div className="flex flex-1 flex-col gap-y-2 overflow-auto">
           {deferredDocuments.map((document, index) => (
             <Card key={`${document.id}-${index}`} className="transition-opacity duration-200">
-              <CardContent className="whitespace-pre-wrap p-4 text-sm">
+              <CardContent className="p-4 text-sm whitespace-pre-wrap">
                 <Markdown>{document.text}</Markdown>
               </CardContent>
-              <CardFooter className="flex justify-between rounded-bl-xl rounded-br-xl border-t border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600">
+              <CardFooter className="flex justify-between rounded-br-xl rounded-bl-xl border-t border-slate-200 bg-slate-50 px-4 py-3 text-xs text-slate-600">
                 <p>
                   Sentiment: <SentimentSelect documentId={document.id} sentiment={document.sentiment} />
                 </p>

apps/web/modules/survey/editor/components/how-to-send-card.tsx

@@ -106,7 +106,7 @@ export const HowToSendCard = ({ localSurvey, setLocalSurvey, environment }: HowT
         className="h-full w-full cursor-pointer"
         id="howToSendCardTrigger">
         <div className="inline-flex px-4 py-4">
-          <div className="flex items-center pl-2 pr-5">
+          <div className="flex items-center pr-5 pl-2">
             <CheckIcon
               strokeWidth={3}
               className="h-7 w-7 rounded-full border border-green-300 bg-green-100 p-1.5 text-green-600"

apps/web/playwright/survey.spec.ts

@@ -153,7 +153,7 @@ test.describe("Survey Create & Submit Response without logic", async () => {
       await expect(page.locator("#questionCard-8").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-8").getByRole("button", { name: "Back" })).toBeVisible();
       await expect(
-        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("div").nth(0)
+        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("button").nth(0)
       ).toBeVisible();
       await page.locator("input[type=file]").setInputFiles({
         name: "file.txt",
@@ -839,7 +839,7 @@ test.describe("Testing Survey with advanced logic", async () => {
       await expect(page.locator("#questionCard-10").getByRole("button", { name: "Next" })).toBeVisible();
       await expect(page.locator("#questionCard-10").getByRole("button", { name: "Back" })).toBeVisible();
       await expect(
-        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("div").nth(0)
+        page.locator("label").filter({ hasText: "Click or drag to upload files." }).locator("button").nth(0)
       ).toBeVisible();
       await page.locator("input[type=file]").setInputFiles({
         name: "file.txt",

packages/surveys/package.json

@@ -38,23 +38,23 @@
     "test:coverage": "vitest run --coverage"
   },
   "devDependencies": {
-    "@calcom/embed-snippet": "1.3.1",
+    "@calcom/embed-snippet": "1.3.2",
     "@formbricks/config-typescript": "workspace:*",
     "@formbricks/eslint-config": "workspace:*",
     "@formbricks/lib": "workspace:*",
     "@formbricks/types": "workspace:*",
-    "@preact/preset-vite": "2.9.3",
+    "@preact/preset-vite": "2.10.1",
     "@testing-library/preact": "3.2.4",
-    "@types/react": "19.0.1",
-    "autoprefixer": "10.4.20",
-    "concurrently": "9.1.0",
-    "isomorphic-dompurify": "2.19.0",
+    "@types/react": "19.1.0",
+    "autoprefixer": "10.4.21",
+    "concurrently": "9.1.2",
+    "isomorphic-dompurify": "2.23.0",
     "postcss": "8.5.3",
-    "preact": "10.25.2",
+    "preact": "10.26.5",
     "react-date-picker": "11.0.0",
     "serve": "14.2.4",
     "tailwindcss": "3.4.16",
-    "terser": "5.37.0",
+    "terser": "5.39.0",
     "vite": "6.2.5",
     "vite-plugin-dts": "4.5.3",
     "vite-tsconfig-paths": "5.1.4"

packages/surveys/src/components/general/file-input.tsx

@@ -1,7 +1,6 @@
 import { FILE_PICK_EVENT } from "@/lib/constants";
 import { getOriginalFileNameFromUrl } from "@/lib/storage";
-import { getMimeType } from "@/lib/utils";
-import { isFulfilled, isRejected } from "@/lib/utils";
+import { getMimeType, isFulfilled, isRejected } from "@/lib/utils";
 import { useAutoAnimate } from "@formkit/auto-animate/react";
 import { useEffect, useMemo, useState } from "preact/hooks";
 import { type JSXInternal } from "preact/src/jsx";
@@ -31,7 +30,7 @@ export function FileInput({
   maxSizeInMB,
   allowMultipleFiles,
   htmlFor = "",
-}: FileInputProps) {
+}: Readonly<FileInputProps>) {
   const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
   const [isUploading, setIsUploading] = useState(false);
   const [parent] = useAutoAnimate();
@@ -341,17 +340,11 @@ export function FileInput({
 
         <label htmlFor={uniqueHtmlFor} onDragOver={handleDragOver} onDrop={handleDrop}>
           {showUploader ? (
-            <div
+            <button
+              type="button"
               className="focus:fb-outline-brand fb-flex fb-flex-col fb-items-center fb-justify-center fb-py-6 hover:fb-cursor-pointer w-full"
-              role="button"
               aria-label="Upload files by clicking or dragging them here"
-              tabIndex={0}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  document.getElementById(uniqueHtmlFor)?.click();
-                }
-              }}>
+              onClick={() => document.getElementById(uniqueHtmlFor)?.click()}>
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 fill="none"
@@ -389,7 +382,7 @@ export function FileInput({
                 data-accept-multiple={allowMultipleFiles}
                 data-accept-extensions={mimeTypeForAllowedFileExtensions}
               />
-            </div>
+            </button>
           ) : null}
         </label>
       </div>

packages/surveys/src/components/general/label.tsx

@@ -2,6 +2,6 @@ interface LabelProps {
   text: string;
 }
 
-export function Label({ text }: LabelProps) {
+export function Label({ text }: Readonly<LabelProps>) {
   return <label className="fb-text-subheading fb-font-normal fb-text-sm">{text}</label>;
 }

packages/surveys/src/components/questions/file-upload-question.tsx

@@ -14,21 +14,21 @@ import { FileInput } from "../general/file-input";
 import { Subheader } from "../general/subheader";
 
 interface FileUploadQuestionProps {
-  question: TSurveyFileUploadQuestion;
-  value: string[];
-  onChange: (responseData: TResponseData) => void;
-  onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
-  onBack: () => void;
-  onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
-  isFirstQuestion: boolean;
-  isLastQuestion: boolean;
-  surveyId: string;
-  languageCode: string;
-  ttc: TResponseTtc;
-  setTtc: (ttc: TResponseTtc) => void;
-  autoFocusEnabled: boolean;
-  currentQuestionId: TSurveyQuestionId;
-  isBackButtonHidden: boolean;
+  readonly question: TSurveyFileUploadQuestion;
+  readonly value: string[];
+  readonly onChange: (responseData: TResponseData) => void;
+  readonly onSubmit: (data: TResponseData, ttc: TResponseTtc) => void;
+  readonly onBack: () => void;
+  readonly onFileUpload: (file: TJsFileUploadParams["file"], config?: TUploadFileConfig) => Promise<string>;
+  readonly isFirstQuestion: boolean;
+  readonly isLastQuestion: boolean;
+  readonly surveyId: string;
+  readonly languageCode: string;
+  readonly ttc: TResponseTtc;
+  readonly setTtc: (ttc: TResponseTtc) => void;
+  readonly autoFocusEnabled: boolean;
+  readonly currentQuestionId: TSurveyQuestionId;
+  readonly isBackButtonHidden: boolean;
 }
 
 export function FileUploadQuestion({