@verbb/formie-browser 1.0.6 → 1.0.7

package/src/js/utils/scripts.ts

@@ -11,6 +11,16 @@ type LoadExternalScriptOptions = {
 
 const scriptLoadCache = new Map<string, Promise<HTMLScriptElement>>();
 
+function getDocumentCspNonce(): string | null {
+    const nonceMeta = document.querySelector('meta[property="csp-nonce"], meta[name="csp-nonce"]') as HTMLMetaElement | null;
+
+    if (!nonceMeta) {
+        return null;
+    }
+
+    return nonceMeta.nonce || nonceMeta.getAttribute('nonce') || nonceMeta.getAttribute('content') || null;
+}
+
 export async function ensureGlobal<T = unknown>(globalName: string, timeoutMs = 5000): Promise<T> {
     // Third-party SDKs often attach themselves to `window` after their script tag
     // loads, so callers wait on the global rather than assuming load == ready.
@@ -49,6 +59,12 @@ export async function loadExternalScript({
             script.src = src;
             script.async = async;
             script.defer = defer;
+            const nonce = getDocumentCspNonce();
+
+            if (nonce) {
+                script.setAttribute('nonce', nonce);
+            }
+
             script.onload = () => {
                 resolve(script);
             };

package/src/js/utils/unload-warning.ts

@@ -4,6 +4,7 @@ const DIRTY_TRACKING_IGNORED_FIELD_NAMES = new Set([
     'redirect',
     'requestToken',
     'renderId',
+    'formStartedAt',
     'submitAction',
     'pageId',
     'draftContextToken',

package/src/js/validation/enter-key-guard.ts

@@ -0,0 +1,63 @@
+import type { FormAction } from '#contracts/common';
+import { getValidationScope } from '#validation/scope';
+
+function isConditionallyInactive(element: Element): boolean {
+    return element.hasAttribute('data-formie-conditionally-hidden')
+        || !!element.closest('[data-formie-conditionally-hidden]')
+        || element.hasAttribute('data-formie-page-hidden')
+        || !!element.closest('[data-formie-page-hidden]');
+}
+
+function isActionControlVisible(form: HTMLFormElement, action: FormAction): boolean {
+    const controls = form.querySelectorAll(`[data-formie-action="${action}"]`);
+
+    return Array.from(controls).some((control) => {
+        return !isConditionallyInactive(control);
+    });
+}
+
+function resolveEnterKeyAction(form: HTMLFormElement): FormAction {
+    const { final } = getValidationScope(form);
+
+    return final ? 'submit' : 'submit';
+}
+
+function shouldBlockEnterSubmit(form: HTMLFormElement): boolean {
+    const action = resolveEnterKeyAction(form);
+
+    return !isActionControlVisible(form, action);
+}
+
+export function bindEnterKeyGuard(form: HTMLFormElement): () => void {
+    const handler = (event: KeyboardEvent) => {
+        if (event.key !== 'Enter' || event.defaultPrevented) {
+            return;
+        }
+
+        const target = event.target;
+
+        if (!(target instanceof HTMLInputElement || target instanceof HTMLSelectElement)) {
+            return;
+        }
+
+        if (target instanceof HTMLInputElement) {
+            if (target.type === 'button' || target.type === 'submit' || target.type === 'reset' || target.type === 'file') {
+                return;
+            }
+        }
+
+        if (!shouldBlockEnterSubmit(form)) {
+            return;
+        }
+
+        // Browsers can still implicit-submit through hidden/disabled submit
+        // controls; block that path when conditions hide the primary action.
+        event.preventDefault();
+    };
+
+    form.addEventListener('keydown', handler, true);
+
+    return () => {
+        form.removeEventListener('keydown', handler, true);
+    };
+}

package/src/js/validation/types.ts

@@ -15,6 +15,7 @@ export type ValidationRules = Record<string, ValidationRuleValue>;
 
 export type ValidationConfig = {
     live: boolean;
+    errorAriaLive: 'polite' | 'assertive' | 'off';
     errorMessage?: string;
     fieldContainerErrorClass: string[];
     inputErrorClass: string[];

package/src/js/validation/validator.ts

@@ -1,6 +1,7 @@
 import { ensureFieldErrorContainer } from '#core/field-error-container';
 import { syncPageTabErrors } from '#core/page-tab-errors';
 import rules from '#validation/rules';
+import { applyErrorAriaLive, resolveValidationErrorAriaLive } from '#core/error-aria-live';
 import type {
     ValidationConfig,
     ValidationContext,
@@ -101,6 +102,7 @@ export class FormieValidator {
         this.onInput = this.inputHandler.bind(this);
         this.config = {
             live: false,
+            errorAriaLive: 'polite',
             errorMessage: '',
             fieldContainerErrorClass: [],
             inputErrorClass: [],
@@ -336,8 +338,10 @@ export class FormieValidator {
         const handle = fieldContainer.getAttribute('data-formie-field-handle') || 'field';
         const errorId = `${handle}-error`;
         errorMessages.id = errorMessages.id || `${handle}-errors`;
-        errorMessages.setAttribute('aria-live', 'polite');
-        errorMessages.setAttribute('aria-atomic', 'true');
+        applyErrorAriaLive(
+            errorMessages,
+            resolveValidationErrorAriaLive(this.config.errorAriaLive, this.submitted),
+        );
 
         const errorElement = document.createElement('div');
         errorElement.setAttribute('data-formie-field-error', 'true');
@@ -490,9 +494,14 @@ export class FormieValidator {
     }
 
     isVisible(element: ValidationInput, options: ValidateOptions = {}): boolean {
-        // Conditionally hidden fields are treated as inactive inputs, and hidden
-        // pages are only re-included on the final page submit pass.
-        if (element.closest('[data-formie-conditionally-hidden]')) {
+        // Conditionally hidden/disabled fields are inactive for validation, and
+        // hidden pages are only re-included on the final page submit pass.
+        if (
+            element.disabled
+            || element.hasAttribute('data-formie-conditions-disabled')
+            || element.closest('[data-formie-conditions-disabled]')
+            || element.closest('[data-formie-conditionally-hidden]')
+        ) {
             return false;
         }
 

package/dist/chunks/recaptcha-v3-BtbbP111.js

@@ -1,27 +0,0 @@
-import { t as e } from "./api-DMK8NSUI.js";
-import { t } from "./recaptcha-shared-B4zAescW.js";
-//#region src/js/modules/captchas/recaptcha-v3.ts
-var n = e({
-	id: "recaptcha-v3",
-	defaultPlaceholderSelector: "[data-recaptcha-placeholder]",
-	defaultTokenFieldNames: ["g-recaptcha-response"],
-	load: ({ options: e }) => t(e.provider, !1, e.provider.siteKey || void 0),
-	mount: ({ api: e, provider: t }) => new Promise((n) => {
-		e.ready(() => {
-			n(t.siteKey || "recaptcha-v3");
-		});
-	}),
-	screen: async ({ api: e, provider: t, placeholder: n, services: r, stageCtx: i }) => {
-		if (r.tokens.has()) return;
-		let a = await e.execute(t.siteKey || "", { action: t.action || "submit" });
-		if (typeof a == "string" && a.trim() !== "" && r.tokens.write(a.trim()), !await r.tokens.wait(12e4)) {
-			let e = r.errors.getDefaultMessage();
-			r.errors.show(e, n), i.abort(e);
-		}
-	},
-	unmount: ({ services: e }) => {
-		e.tokens.clear();
-	}
-});
-//#endregion
-export { n as recaptchaV3Module };

package/dist/chunks/scripts-6CYSUGKQ.js

@@ -1,24 +0,0 @@
-import { r as e } from "./async-nPFRNQ06.js";
-//#region src/js/utils/scripts.ts
-var t = /* @__PURE__ */ new Map();
-async function n(t, n = 5e3) {
-	return e(() => window[t] ?? null, {
-		timeoutMs: n,
-		intervalMs: 30
-	});
-}
-async function r({ id: e, src: n, async: r = !0, defer: i = !0 }) {
-	return document.getElementById(e) || (t.has(e) || t.set(e, new Promise((a, o) => {
-		let s = document.createElement("script");
-		s.id = e, s.src = n, s.async = r, s.defer = i, s.onload = () => {
-			a(s);
-		}, s.onerror = () => {
-			t.delete(e), o(/* @__PURE__ */ Error(`Failed to load external script: ${n}`));
-		}, document.body.appendChild(s);
-	})), t.get(e));
-}
-async function i(e, t) {
-	return window[e] ?? (await r(t), n(e, t.timeoutMs));
-}
-//#endregion
-export { r as n, i as r, n as t };