@verbb/formie-browser 1.0.5 → 1.0.7

package/src/js/utils/form-started-at.ts

@@ -0,0 +1,25 @@
+const FORM_STARTED_AT_STORAGE_PREFIX = 'formie:formStartedAt:';
+
+export function ensureFormStartedAt(form: HTMLFormElement): void {
+    const startedAtInput = form.querySelector('input[name="formStartedAt"]') as HTMLInputElement | null;
+
+    if (!startedAtInput) {
+        return;
+    }
+
+    const renderIdInput = form.querySelector('input[name="renderId"]') as HTMLInputElement | null;
+    const renderId = renderIdInput?.value?.trim() ?? '';
+    const storageKey = renderId ? `${FORM_STARTED_AT_STORAGE_PREFIX}${renderId}` : null;
+
+    let startedAt = storageKey ? sessionStorage.getItem(storageKey) : null;
+
+    if (!startedAt) {
+        startedAt = String(Date.now());
+
+        if (storageKey) {
+            sessionStorage.setItem(storageKey, startedAt);
+        }
+    }
+
+    startedAtInput.value = startedAt;
+}

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/src/vendor.d.ts

@@ -94,7 +94,7 @@ declare module 'signature_pad' {
         on(): void;
         removeEventListener(eventName: string, listener: EventListener): void;
         toDataURL(type?: string, encoderOptions?: number): string;
-        fromDataURL(dataUrl: string): void;
+        fromDataURL(dataUrl: string, options?: Record<string, unknown>): Promise<void>;
         isEmpty(): boolean;
     }
 }