@verbb/formie-browser 1.0.13 → 1.0.15

package/src/js/core/validation-focus.ts

@@ -1,15 +1,6 @@
+import { appendDescribedBy, setErrorMessageReference } from '#core/field-error-aria';
 import { addThemeClasses } from '#theme/theme-classes';
-
-function appendDescribedBy(input: HTMLElement, describedById: string): void {
-    const current = (input.getAttribute('aria-describedby') || '').trim();
-    const items = current ? current.split(/\s+/) : [];
-
-    if (!items.includes(describedById)) {
-        items.push(describedById);
-    }
-
-    input.setAttribute('aria-describedby', items.join(' ').trim());
-}
+import { isValidationSkipped } from '#validation/skip';
 
 function getFirstErroredField(form: HTMLFormElement): HTMLElement | null {
     const fields = Array.from(form.querySelectorAll('[data-formie-field-handle]')) as HTMLElement[];
@@ -24,15 +15,19 @@ function getFirstErroredField(form: HTMLFormElement): HTMLElement | null {
 }
 
 function getFieldFocusTarget(field: HTMLElement): HTMLElement | null {
-    const invalidControl = field.querySelector('[aria-invalid="true"]') as HTMLElement | null;
+    const invalidControl = Array.from(field.querySelectorAll('[aria-invalid="true"]')).find((node) => {
+        return !isValidationSkipped(node);
+    }) as HTMLElement | undefined;
 
     if (invalidControl) {
         return invalidControl;
     }
 
-    return field.querySelector(
+    return Array.from(field.querySelectorAll(
         'input:not([type="hidden"]):not([disabled]), select:not([disabled]), textarea:not([disabled])',
-    ) as HTMLElement | null;
+    )).find((node) => {
+        return !isValidationSkipped(node);
+    }) as HTMLElement | undefined ?? null;
 }
 
 function getFormLevelErrorTarget(form: HTMLFormElement): HTMLElement | null {
@@ -54,23 +49,28 @@ export function enhanceServerRenderedFieldErrors(form: HTMLFormElement): void {
         field.setAttribute('data-formie-field-has-error', 'true');
         addThemeClasses(field, form, 'fieldLayoutError');
 
-        const errorContainer = field.querySelector('[data-formie-field-errors]') as HTMLElement | null;
-        const errorContainerId = errorContainer?.id || '';
         const primaryError = field.querySelector('[data-formie-field-error]') as HTMLElement | null;
         const primaryErrorId = primaryError?.id || '';
 
         field.querySelectorAll('input, select, textarea').forEach((input) => {
             const element = input as HTMLElement;
+
+            if (isValidationSkipped(element)) {
+                return;
+            }
+
             element.setAttribute('aria-invalid', 'true');
             addThemeClasses(element, form, 'fieldControlError');
             element.setAttribute('data-formie-input-has-error', 'true');
 
-            if (errorContainerId) {
-                appendDescribedBy(element, errorContainerId);
+            if (primaryErrorId) {
+                // Pair aria-errormessage + aria-describedby on the message id (#2946).
+                setErrorMessageReference(element, primaryErrorId);
             }
 
-            if (primaryErrorId) {
-                element.setAttribute('aria-errormessage', primaryErrorId);
+            const instructions = field.querySelector('[data-formie-instructions]') as HTMLElement | null;
+            if (instructions?.id) {
+                appendDescribedBy(element, instructions.id);
             }
         });
     });

package/src/js/modules/address/address-finder.ts

@@ -28,7 +28,7 @@ export const addressFinderModule = defineAddressModule<
     AddressFinderGlobal,
     AddressFinderWidget
 >({
-    id: 'address-finder',
+    moduleId: 'formie:address-finder',
     load: async () => {
         return loadScriptAndEnsureGlobal<AddressFinderGlobal>('AddressFinder', {
             id: SCRIPT_ID,

package/src/js/modules/address/factories.ts

@@ -1,6 +1,6 @@
 import type {
-    FormieModuleDefinition,
-    FormieModuleInstance,
+    BrowserModuleDefinition,
+    BrowserModuleInstance,
     ModuleSetupContext,
 } from '#contracts/modules';
 import {
@@ -30,7 +30,7 @@ export type ManagedAddressModuleAdapter<
     TApi,
     TWidget,
 > = {
-    id: string;
+    moduleId: string;
     load: (ctx: AddressModuleSetupContext<TProvider>) => Promise<TApi>;
     mount: (args: {
         api: TApi;
@@ -61,9 +61,11 @@ export function createManagedAddressModule<
     TProvider extends Record<string, unknown>,
     TApi,
     TWidget,
->(adapter: ManagedAddressModuleAdapter<TProvider, TApi, TWidget>): FormieModuleDefinition {
+>(adapter: ManagedAddressModuleAdapter<TProvider, TApi, TWidget>): BrowserModuleDefinition {
     return {
-        id: adapter.id,
+        moduleId: adapter.moduleId,
+        version: 2,
+        surfaces: ['server-rendered', 'client-rendered', 'cp-edit'],
         kind: 'address',
         match: (ctx) => {
             const input = ctx.target.querySelector('[data-formie-address-autocomplete-input]');
@@ -71,10 +73,10 @@ export function createManagedAddressModule<
             return !!input;
         },
         setup: async (ctx) => {
-            const options = normalizeAddressModuleOptions<TProvider>(adapter.id, ctx.options || {});
+            const options = normalizeAddressModuleOptions<TProvider>(adapter.moduleId.split(':')[1], ctx.options || {});
             const services = createAddressHostServices(ctx);
             debug.log('Setup module.', {
-                moduleId: adapter.id,
+                moduleId: adapter.moduleId,
             });
 
             const setupCtx: AddressModuleSetupContext<TProvider> = {
@@ -90,11 +92,11 @@ export function createManagedAddressModule<
 
             if (!input) {
                 console.warn(
-                    `[formie] Address module "${adapter.id}" skipped: no autocomplete input found in target. ` +
+                    `[formie] Address module "${adapter.moduleId}" skipped: no autocomplete input found in target. ` +
                     'Ensure the Address field has the Auto-Complete subfield enabled.',
                 );
                 debug.warn('Autocomplete input missing; skipping module.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
                 return {
                     destroy: () => { },
@@ -104,7 +106,7 @@ export function createManagedAddressModule<
             const getApi = async(): Promise<TApi> => {
                 if (!apiPromise) {
                     debug.log('Loading provider API.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                     apiPromise = adapter.load(setupCtx);
                 }
@@ -126,7 +128,7 @@ export function createManagedAddressModule<
                     provider: options.provider,
                 });
                 debug.log('Widget mounted.', {
-                    moduleId: adapter.id,
+                    moduleId: adapter.moduleId,
                 });
             };
 
@@ -178,7 +180,7 @@ export function createManagedAddressModule<
             return {
                 destroy: async () => {
                     debug.log('Destroying module.', {
-                        moduleId: adapter.id,
+                        moduleId: adapter.moduleId,
                     });
                     cleanups.forEach((c) => c());
 
@@ -193,7 +195,7 @@ export function createManagedAddressModule<
                             provider: options.provider,
                         });
                         debug.log('Widget unmounted.', {
-                            moduleId: adapter.id,
+                            moduleId: adapter.moduleId,
                         });
                     }
                 },

package/src/js/modules/address/google-address.ts

@@ -1,3 +1,6 @@
+import { appendFormCsrfToFormData } from '#utils/csrf';
+import { browserRequest } from '@verbb/formie-core';
+import { getFormBrowserRequestOptions } from '#utils/request-profile';
 import { defineAddressModule } from '#modules/address/api';
 import type { AddressHostServices } from '#modules/address/host';
 import { getAddressProviderEventName } from '#utils/event-names';
@@ -7,6 +10,7 @@ type GoogleMaps = typeof google;
 
 type GoogleAddressProviderOptions = {
     apiKey?: string;
+    geocodeEndpoint?: string;
     options?: Record<string, unknown>;
     countryDefaultValue?: string;
 };
@@ -26,7 +30,8 @@ async function loadGoogleMapsScript(apiKey: string): Promise<GoogleMaps> {
         if (maps?.places?.PlaceAutocompleteElement) {
             return existing as GoogleMaps;
         }
-        const imp = maps as { importLibrary?: (name: string) => Promise<unknown> } | undefined;
+        const imp = maps as
+            { importLibrary?: (name: string) => Promise<unknown> } | undefined;
         if (typeof imp?.importLibrary === 'function') {
             await imp.importLibrary('places');
         }
@@ -40,7 +45,8 @@ async function loadGoogleMapsScript(apiKey: string): Promise<GoogleMaps> {
     const existingScript = document.getElementById(SCRIPT_ID);
     if (existingScript) {
         const google = await ensureGlobal<GoogleMaps>('google', 10000);
-        const maps = google?.maps as { importLibrary?: (name: string) => Promise<unknown> } | undefined;
+        const maps = google?.maps as
+            { importLibrary?: (name: string) => Promise<unknown> } | undefined;
         if (typeof maps?.importLibrary === 'function') {
             await maps.importLibrary('places');
         }
@@ -76,7 +82,8 @@ async function loadGoogleMapsScript(apiKey: string): Promise<GoogleMaps> {
         });
 
         const google = await ready;
-        const maps = google?.maps as { importLibrary?: (name: string) => Promise<unknown> } | undefined;
+        const maps = google?.maps as
+            { importLibrary?: (name: string) => Promise<unknown> } | undefined;
         if (typeof maps?.importLibrary === 'function') {
             await maps.importLibrary('places');
         }
@@ -148,7 +155,13 @@ type AddressComponent = {
     long_text?: string;
 };
 
-function parseAddressComponents(components: AddressComponent[]): Record<string, string> {
+type GooglePostalAddress = {
+    addressLines?: unknown[];
+};
+
+function parseAddressComponents(
+    components: AddressComponent[],
+): Record<string, string> {
     const map = componentMap();
     const out: Record<string, string> = {};
 
@@ -158,10 +171,11 @@ function parseAddressComponents(components: AddressComponent[]): Record<string,
         if (!type || !map[type as keyof typeof map]) continue;
 
         const fieldKey = map[type as keyof typeof map];
-        const val = (comp as unknown as Record<string, string>)[fieldKey]
-            ?? comp.short_text
-            ?? comp.long_text
-            ?? '';
+        const val =
+            (comp as unknown as Record<string, string>)[fieldKey] ??
+            comp.short_text ??
+            comp.long_text ??
+            '';
 
         out[type] = val;
     }
@@ -169,17 +183,26 @@ function parseAddressComponents(components: AddressComponent[]): Record<string,
     return out;
 }
 
-function buildAddressFromComponents(formData: Record<string, string>): {
+export function buildAddressFromComponents(
+    formData: Record<string, string>,
+    postalAddress?: GooglePostalAddress,
+): {
     address1: string;
     city: string;
     state: string;
     zip: string;
     country: string;
 } {
-    let address1 = '';
+    const postalAddressLines = postalAddress?.addressLines?.filter(
+        (line): line is string =>
+            typeof line === 'string' && line.trim() !== '',
+    );
+    let address1 = postalAddressLines?.join(', ') || '';
 
-    if (formData.street_number || formData.route) {
-        address1 = [formData.street_number, formData.route].filter(Boolean).join(' ');
+    if (!address1 && (formData.street_number || formData.route)) {
+        address1 = [formData.street_number, formData.route]
+            .filter(Boolean)
+            .join(' ');
 
         if (formData.subpremise) {
             address1 = `${formData.subpremise}/${address1}`;
@@ -199,7 +222,8 @@ function hasCountryRestriction(options: Record<string, unknown>): boolean {
     const componentRestrictions = options.componentRestrictions;
 
     if (componentRestrictions && typeof componentRestrictions === 'object') {
-        const country = (componentRestrictions as { country?: unknown }).country;
+        const country = (componentRestrictions as { country?: unknown })
+            .country;
 
         if (Array.isArray(country) ? country.length > 0 : Boolean(country)) {
             return true;
@@ -211,7 +235,9 @@ function hasCountryRestriction(options: Record<string, unknown>): boolean {
     return Array.isArray(includedRegionCodes) && includedRegionCodes.length > 0;
 }
 
-export function buildGoogleAutocompleteOptions(provider: GoogleAddressProviderOptions): Record<string, unknown> {
+export function buildGoogleAutocompleteOptions(
+    provider: GoogleAddressProviderOptions,
+): Record<string, unknown> {
     const options = { types: ['geocode'], ...(provider.options || {}) };
     const country = provider.countryDefaultValue?.trim().toLowerCase();
 
@@ -231,7 +257,7 @@ export const googleAddressModule = defineAddressModule<
     GoogleMaps,
     google.maps.places.PlaceAutocompleteElement
 >({
-    id: 'google-address',
+    moduleId: 'formie:google-address',
     load: async ({ options }) => {
         const apiKey = options.provider.apiKey;
 
@@ -243,10 +269,13 @@ export const googleAddressModule = defineAddressModule<
     },
     mount: async ({ api, field, services, provider }) => {
         const input = services.input.getAutocomplete();
-        const PlaceAutocompleteElement = api?.maps?.places?.PlaceAutocompleteElement;
+        const PlaceAutocompleteElement =
+            api?.maps?.places?.PlaceAutocompleteElement;
 
         if (!input || typeof PlaceAutocompleteElement !== 'function') {
-            console.warn('[formie] Google Places API not ready; address autocomplete skipped.');
+            console.warn(
+                '[formie] Google Places API not ready; address autocomplete skipped.',
+            );
             return null;
         }
 
@@ -299,20 +328,40 @@ export const googleAddressModule = defineAddressModule<
         wrapper.appendChild(input);
 
         const onSelect = async (ev: Event): Promise<void> => {
-            const e = ev as unknown as { placePrediction?: { toPlace: () => Promise<{ addressComponents?: unknown[]; formattedAddress?: string; fetchFields: (opts: { fields: string[] }) => Promise<void> }> } };
+            const e = ev as unknown as {
+                placePrediction?: {
+                    toPlace: () => Promise<{
+                        addressComponents?: unknown[];
+                        formattedAddress?: string;
+                        postalAddress?: GooglePostalAddress;
+                        fetchFields: (opts: {
+                            fields: string[];
+                        }) => Promise<void>;
+                    }>;
+                };
+            };
             const pred = e.placePrediction;
 
             if (!pred) return;
 
             const place = await pred.toPlace();
-            await place.fetchFields({ fields: ['addressComponents', 'formattedAddress'] });
+            await place.fetchFields({
+                fields: [
+                    'addressComponents',
+                    'formattedAddress',
+                    'postalAddress',
+                ],
+            });
 
             if (!place.addressComponents) return;
 
             const formData = parseAddressComponents(
                 place.addressComponents as AddressComponent[],
             );
-            const address = buildAddressFromComponents(formData);
+            const address = buildAddressFromComponents(
+                formData,
+                place.postalAddress,
+            );
 
             setFieldValues(services, {
                 ...address,
@@ -320,46 +369,59 @@ export const googleAddressModule = defineAddressModule<
             });
 
             field.dispatchEvent(
-                new CustomEvent(getAddressProviderEventName('google', 'populate'), {
-                    bubbles: true,
-                    detail: {
-                        addressProvider: 'google',
-                        place,
-                        formattedAddress: place.formattedAddress,
-                        addressComponents: place.addressComponents,
+                new CustomEvent(
+                    getAddressProviderEventName('google', 'populate'),
+                    {
+                        bubbles: true,
+                        detail: {
+                            addressProvider: 'google',
+                            place,
+                            formattedAddress: place.formattedAddress,
+                            addressComponents: place.addressComponents,
+                            postalAddress: place.postalAddress,
+                        },
                     },
-                }),
+                ),
             );
         };
         autocomplete.addEventListener('gmp-select', onSelect as EventListener);
 
         return autocomplete;
     },
-    onCurrentLocation: async (position, { field, services }) => {
+    onCurrentLocation: async (position, { field, services, provider }) => {
         const { latitude, longitude } = position.coords;
         const form = services.form;
-        const actionUrl = form?.action || window.location.href;
-        const fieldHandle = field.getAttribute('data-formie-field-handle')?.trim();
-        const formHandle = (form?.querySelector('[name="handle"]') as HTMLInputElement | null)?.value?.trim();
+        const actionUrl =
+            provider.geocodeEndpoint || form?.action || window.location.href;
+        const fieldHandle = field
+            .getAttribute('data-formie-field-handle')
+            ?.trim();
+        const formHandle = (
+            form?.querySelector('[name="handle"]') as HTMLInputElement | null
+        )?.value?.trim();
 
         if (!formHandle || !fieldHandle) return;
 
         try {
             const formData = new FormData();
+            if (form) appendFormCsrfToFormData(formData, form);
             formData.append('action', 'formie/address/google-places-geocode');
             formData.append('latlng', `${latitude},${longitude}`);
             formData.append('handle', formHandle);
             formData.append('fieldHandle', fieldHandle);
 
-            const response = await fetch(actionUrl, {
-                method: 'POST',
-                body: formData,
-                credentials: 'include',
-                headers: {
-                    'X-Requested-With': 'XMLHttpRequest',
-                    Accept: 'application/json',
+            const response = await browserRequest(
+                actionUrl,
+                {
+                    method: 'POST',
+                    body: formData,
+                    headers: {
+                        'X-Requested-With': 'XMLHttpRequest',
+                        Accept: 'application/json',
+                    },
                 },
-            });
+                getFormBrowserRequestOptions(form),
+            );
 
             const data = await response.json();
 

package/src/js/modules/address/index.ts

@@ -1,6 +1,6 @@
-import type { FormieModuleDefinition } from '#contracts/modules';
+import type { BrowserModuleDefinition } from '#contracts/modules';
 
-export const builtinAddressModuleLoaders: Record<string, () => Promise<FormieModuleDefinition>> = {
+export const builtinAddressModuleLoaders: Record<string, () => Promise<BrowserModuleDefinition>> = {
     // Address providers stay behind lazy importer entries because their SDKs are
     // optional and often much heavier than the base form client.
     'address-finder': () => import('#modules/address/address-finder').then((m) => m.addressFinderModule),

package/src/js/modules/address/loqate.ts

@@ -35,7 +35,7 @@ export const loqateModule = defineAddressModule<
     PcaGlobal,
     PcaAddressInstance
 >({
-    id: 'loqate',
+    moduleId: 'formie:loqate',
     load: async () => {
         await loadScriptAndEnsureGlobal<PcaGlobal>('pca', {
             id: SCRIPT_ID,

package/src/js/modules/address/place-kit.ts

@@ -28,7 +28,7 @@ export const placeKitModule = defineAddressModule<
     (apiKey: string, options: Record<string, unknown>) => PlaceKitPicker,
     PlaceKitPicker
 >({
-    id: 'place-kit',
+    moduleId: 'formie:place-kit',
     load: async () => {
         const module = await import('@placekit/autocomplete-js');
 
@@ -58,13 +58,6 @@ export const placeKitModule = defineAddressModule<
         const picker = api(provider.apiKey, options as { target: HTMLInputElement });
 
         picker.on('pick', (value, item: PlaceKitItem) => {
-            field.dispatchEvent(
-                new CustomEvent(getAddressProviderEventName('place-kit', 'populate'), {
-                    bubbles: true,
-                    detail: { addressProvider: 'place-kit', addressComponents: item },
-                }),
-            );
-
             let address1 = '';
 
             if (item.street) {
@@ -87,6 +80,19 @@ export const placeKitModule = defineAddressModule<
             services.input.setValue('state', item.administrative || '');
             services.input.setValue('zip', typeof zip === 'string' ? zip : '');
             services.input.setValue('country', countryValue || item.country || '');
+
+            // Notify dependent state controls after all address values are applied.
+            // Keep the provider value available while country options are loading.
+            field.dispatchEvent(
+                new CustomEvent(getAddressProviderEventName('place-kit', 'populate'), {
+                    bubbles: true,
+                    detail: {
+                        addressProvider: 'place-kit',
+                        addressComponents: item,
+                        state: item.administrative || '',
+                    },
+                }),
+            );
         });
 
         return picker;

package/src/js/modules/captchas/captcha-eu.ts

@@ -34,7 +34,7 @@ async function loadCaptchaEuGlobal(options: CaptchaEuProviderOptions): Promise<C
 }
 
 export const captchaEuModule = defineCaptchaModule<CaptchaEuProviderOptions, CaptchaEuGlobal, HTMLElement>({
-    id: 'captcha-eu',
+    moduleId: 'formie:captcha-eu',
     defaultPlaceholderSelector: '[data-captcha-eu-placeholder]',
     defaultTokenFieldNames: ['captcha-eu-token'],
     load: ({ options }) => {
@@ -69,7 +69,7 @@ export const captchaEuModule = defineCaptchaModule<CaptchaEuProviderOptions, Cap
 
         return container;
     },
-    screen: async ({ placeholder, services, stageCtx }) => {
+    challenge: async ({ placeholder, services, stageCtx }) => {
         // Captcha.eu solves through its own widget lifecycle and callback. By
         // screen time we only need to wait for the shared transport layer to
         // contain the provider payload.