@verbb/formie-browser 1.0.14 → 1.0.16

package/src/js/modules/fields/phone-country.ts

@@ -18,7 +18,7 @@ ensureModuleStyles(MODULE_ID, [intlTelInputCss]);
 
 type PhoneCountryOptions = {
     countryDefaultValue?: string;
-    countryAllowed?: string[];
+    allowedCountryCodes?: string[];
     countryPreselectFromIp?: boolean;
     countryFromIpAction?: string;
     language?: string;
@@ -93,7 +93,7 @@ function buildOptions(options: PhoneCountryOptions, form: HTMLFormElement | null
         loadUtils: () => import('intl-tel-input/utils'),
     };
 
-    const allowedCountries = (options.countryAllowed || [])
+    const allowedCountries = (options.allowedCountryCodes || [])
         .map((item) => {
             return item.toLowerCase();
         })
@@ -164,6 +164,27 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     phoneInput.addEventListener('blur', syncCountry);
     syncCountry();
 
+    // Hidden input values also change their native reset default, so retain the initial country.
+    let defaultCountry = countryInput.value;
+    let destroyed = false;
+    void validator.promise.then(() => {
+        if (!destroyed) {
+            defaultCountry ||= validator.getSelectedCountryData()?.iso2?.toUpperCase() || '';
+        }
+    }, () => {});
+
+    const form = phoneInput.form;
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (!destroyed && !event.defaultPrevented && defaultCountry) {
+                validator.setCountry(defaultCountry.toLowerCase() as IntlCountryCode);
+                validator.setNumber(phoneInput.defaultValue);
+                syncCountry();
+            }
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     // Keep the country dropdown button in sync when the tel input is enabled/disabled after
     // init (multi-page page-hidden, or conditions). intl-tel-input disables the button to match
     // a disabled input at init, but won't re-enable it when `disabled` is later removed.
@@ -199,6 +220,8 @@ function initPhoneField(phoneInput: PhoneInput, countryInput: HTMLInputElement,
     });
 
     return () => {
+        destroyed = true;
+        form?.removeEventListener('reset', onReset);
         phoneInput.removeEventListener('countrychange', syncCountry);
         phoneInput.removeEventListener('blur', syncCountry);
         countryButtonObserver.disconnect();

package/src/js/modules/fields/repeater.ts

@@ -32,6 +32,18 @@ function getRowCount(field: HTMLElement): number {
     return field.querySelectorAll(ROW_SELECTOR).length;
 }
 
+function focusRow(row: Element | null): boolean {
+    const control = Array.from(row?.querySelectorAll<HTMLElement>(
+        'input:not([type="hidden"]), select, textarea, button, a[href], [role="button"], [role="combobox"], [role="textbox"], [contenteditable="true"]',
+    ) || []).find((element) => {
+        return element.tabIndex >= 0 && !element.matches(':disabled')
+            && !element.closest('[hidden], [inert]') && element.getClientRects().length > 0;
+    });
+
+    control?.focus();
+    return !!control;
+}
+
 function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): void {
     if (!addButton) {
         return;
@@ -46,7 +58,7 @@ function syncAddButton(addButton: HTMLButtonElement | null, rowCount: number): v
     addButton.disabled = false;
 }
 
-function bindRepeaterField(field: HTMLElement): () => void {
+function bindRepeaterField(field: HTMLElement, isCpEdit: boolean): () => void {
     const container = field.matches(CONTAINER_SELECTOR)
         ? field
         : field.querySelector(CONTAINER_SELECTOR);
@@ -57,6 +69,9 @@ function bindRepeaterField(field: HTMLElement): () => void {
         return () => {};
     }
 
+    const form = field.closest('form');
+    let disposed = false;
+    let generation = 0;
     const removeHandlers = new Map<HTMLElement, EventListener>();
     // Start after the highest existing row id so SSR rows and client-added rows
     // keep producing unique `__ROW__` replacements across one repeater instance.
@@ -84,8 +99,17 @@ function bindRepeaterField(field: HTMLElement): () => void {
                     return;
                 }
 
+                const restoreFocus = row.contains(document.activeElement)
+                    && (!isCpEdit || (event instanceof MouseEvent && event.detail === 0));
+                const nextRow = row.nextElementSibling;
+                const previousRow = row.previousElementSibling;
                 row.remove();
                 syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+                // Removing the focused control otherwise sends keyboard users back
+                // to the document body. Keep them in the nearest surviving row.
+                if (restoreFocus && !focusRow(nextRow) && !focusRow(previousRow)) {
+                    if (addButton instanceof HTMLButtonElement) addButton.focus();
+                }
                 debug.log('Row removed.', {
                     rowCount: getRowCount(field),
                 });
@@ -100,7 +124,7 @@ function bindRepeaterField(field: HTMLElement): () => void {
         });
     };
 
-    const addRow = async() => {
+    const addRow = async(focusNewRow = false) => {
         if (!(addButton instanceof HTMLButtonElement)) {
             return;
         }
@@ -130,11 +154,16 @@ function bindRepeaterField(field: HTMLElement): () => void {
             return;
         }
 
+        const addedGeneration = generation;
         container.appendChild(row);
         // Give downstream field modules a tick to see the new row before we emit
         // the public append/init-row lifecycle events used for nested enhancements.
         await sleep(50);
+        if (disposed || addedGeneration !== generation || !row.isConnected) return;
         bindRemoveButtons();
+        // Rows are inserted before Add, so leaving focus there skips the new
+        // inputs on Tab. Do not steal focus if the user moved on while mounting.
+        if (focusNewRow && document.activeElement === addButton) focusRow(row);
         syncAddButton(addButton, getRowCount(field));
         debug.log('Row appended.', {
             rowCount: getRowCount(field),
@@ -151,7 +180,10 @@ function bindRepeaterField(field: HTMLElement): () => void {
 
     const addHandler = (event: Event) => {
         event.preventDefault();
-        void addRow();
+        // Pointer additions in the CP should not focus Craft's field wrappers
+        // and show a focus ring around the newly inserted field.
+        const focusNewRow = !isCpEdit || (event instanceof MouseEvent && event.detail === 0);
+        void addRow(focusNewRow);
     };
 
     if (addButton instanceof HTMLButtonElement) {
@@ -170,6 +202,23 @@ function bindRepeaterField(field: HTMLElement): () => void {
         }
     }
 
+    const initialRows = Array.from(container.children).map((row) => row.cloneNode(true));
+
+    const onReset = (event: Event) => {
+        queueMicrotask(() => {
+            if (event.defaultPrevented || disposed) return;
+            generation++;
+            removeHandlers.forEach((handler, button) => button.removeEventListener('click', handler));
+            removeHandlers.clear();
+            // Replace rows so removed initial rows return and added rows disappear.
+            // The module loader disposes old controls and hydrates the new rows.
+            container.replaceChildren(...initialRows.map((row) => row.cloneNode(true)));
+            bindRemoveButtons();
+            syncAddButton(addButton instanceof HTMLButtonElement ? addButton : null, getRowCount(field));
+        });
+    };
+    form?.addEventListener('reset', onReset);
+
     dispatchFieldEvent(field, MODULE_ID, 'init', {
         repeater: field,
     });
@@ -178,6 +227,8 @@ function bindRepeaterField(field: HTMLElement): () => void {
     });
 
     return () => {
+        disposed = true;
+        form?.removeEventListener('reset', onReset);
         if (addButton instanceof HTMLButtonElement) {
             addButton.removeEventListener('click', addHandler);
         }
@@ -211,7 +262,7 @@ export const repeaterModule: BrowserModuleDefinition = {
             });
 
         const destroyBindings = fields.map((field) => {
-            return bindRepeaterField(field);
+            return bindRepeaterField(field, ctx.surface === 'cp-edit');
         });
         debug.log('Module setup.', { fieldCount: fields.length });
 

package/src/js/modules/fields/rich-text.ts

@@ -168,6 +168,37 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     input.richText = editor;
     editor.content.innerHTML = input.value || '';
 
+    editor.content.setAttribute('role', 'textbox');
+    editor.content.setAttribute('aria-multiline', 'true');
+
+    const labels = Array.from(input.labels || []);
+    const ariaAttributes = ['aria-label', 'aria-labelledby', 'aria-invalid', 'aria-describedby', 'aria-errormessage'];
+    const syncAccessibility = () => {
+        ariaAttributes.forEach((attribute) => {
+            const value = input.getAttribute(attribute);
+
+            if (value !== null) {
+                editor.content.setAttribute(attribute, value);
+            } else {
+                editor.content.removeAttribute(attribute);
+            }
+        });
+
+        if (!input.hasAttribute('aria-label') && !input.hasAttribute('aria-labelledby') && labels.length) {
+            editor.content.setAttribute('aria-label', labels.map((label) => label.textContent?.trim() || '').join(' '));
+        }
+
+        editor.content.setAttribute('aria-required', input.getAttribute('aria-required') || String(input.required));
+    };
+    syncAccessibility();
+
+    // Validation updates the submitted textarea; expose the same state on the editor.
+    const accessibilityObserver = new MutationObserver(syncAccessibility);
+    accessibilityObserver.observe(input, { attributes: true, attributeFilter: [...ariaAttributes, 'aria-required', 'required'] });
+
+    const onLabelClick = () => editor.content.focus();
+    labels.forEach((label) => label.addEventListener('click', onLabelClick));
+
     const form = input.form;
     const onReset = (event: Event) => {
         // Wait for the textarea to regain its default value before updating Pell.
@@ -188,6 +219,8 @@ function initRichTextField(container: HTMLElement, input: RichTextInput, options
     });
 
     return () => {
+        accessibilityObserver.disconnect();
+        labels.forEach((label) => label.removeEventListener('click', onLabelClick));
         form?.removeEventListener('reset', onReset);
         container.innerHTML = '';
         delete input.richText;

package/src/js/modules/fields/summary.ts

@@ -1,6 +1,7 @@
 import summaryCss from '#theme-css/fields/_summary.css?inline';
 
 import type { BrowserModuleDefinition } from '#contracts/modules';
+import type { FormSubmitResult } from '#contracts/schema';
 import { dispatchFieldEvent, getModuleFieldContainers } from '#modules/fields/shared';
 import { ensureModuleStyles } from '#modules/styles';
 import { toggleThemeClasses } from '#theme/theme-classes';
@@ -28,8 +29,10 @@ function getSummaryRequestUrl(): string {
 }
 
 function getSummaryRequestState(field: HTMLElement): SummaryRequestState {
-    const summaryTokenInput = field.querySelector('[data-formie-summary-token]') as HTMLInputElement | null;
-    const accessToken = summaryTokenInput?.value?.trim() || null;
+    const tokenElement = field.querySelector('[data-formie-summary-token]');
+    const accessToken = (tokenElement instanceof HTMLInputElement
+        ? tokenElement.value
+        : tokenElement?.getAttribute('data-formie-summary-token'))?.trim() || null;
 
     return {
         accessToken,
@@ -71,6 +74,9 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     let dirtyVersion = 0;
     let requestVersion = 0;
     let activeRequest: AbortController | null = null;
+    let destroyed = false;
+    const initialState = getSummaryRequestState(field);
+    let accessToken = initialState.accessToken;
 
     const getBlocks = (): HTMLElement | null => {
         const blocks = field.querySelector(BLOCKS_SELECTOR);
@@ -101,11 +107,10 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         toggleThemeClasses(blocks, form, 'loading', false);
     };
 
-    const initialState = getSummaryRequestState(field);
     setLoadingState(!!initialState.accessToken);
 
     const queueFetch = (): void => {
-        if (!isVisible || (hasFetched && !isDirty)) {
+        if (destroyed || !isVisible || (hasFetched && !isDirty)) {
             return;
         }
 
@@ -114,7 +119,11 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     };
 
     const fetchSummary = debounce(async() => {
-        const state = getSummaryRequestState(field);
+        if (destroyed) {
+            return;
+        }
+
+        const state = { accessToken };
 
         if (!getBlocks() || !state.accessToken) {
             debug.warn('Missing state for fetch.', state);
@@ -170,7 +179,9 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
                 setLoadingState(false);
                 activeRequest = null;
 
-                if (isDirty) {
+                // Retry only when newer input arrived during this request. A
+                // failed request alone must not create an endless retry loop.
+                if (isDirty && dirtyVersion !== requestDirtyVersion) {
                     queueFetch();
                 }
             }
@@ -194,18 +205,56 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
         queueFetch();
     };
 
-    const handleSubmitResult = (): void => {
-        isDirty = true;
-        debug.log('Submit result received; refreshing.');
+    const handleSubmitResult = (event: Event): void => {
+        const result = (event as CustomEvent<FormSubmitResult>).detail;
+        const tokens = result?.meta?.summaryTokens;
+        const uid = field.dataset.formieFieldUid;
+
+        // AJAX navigation reuses the initial markup, which had no submission
+        // token. The accepted save now grants access to this summary field.
+        if (uid && tokens && typeof tokens === 'object') {
+            const token = (tokens as Record<string, unknown>)[uid];
+
+            if (typeof token === 'string' && token) {
+                accessToken = token;
+                // Page navigation can remount modules with updated configuration.
+                getContainer()?.setAttribute('data-formie-summary-token', token);
+            }
+        }
+
+        markDirty();
+        debug.log('Submit result received; refreshing.', { uid, hasToken: !!accessToken });
         queueFetch();
     };
 
     const handlePageNavigate = (): void => {
-        isDirty = true;
+        markDirty();
         debug.log('Page navigation received; refreshing.');
         queueFetch();
     };
 
+    const handleReset = (event: Event): void => {
+        queueMicrotask(() => {
+            if (event.defaultPrevented || destroyed) {
+                return;
+            }
+
+            // A new submission must not display or fetch the previous visitor's
+            // completed values while its initial markup is reused.
+            requestVersion += 1;
+            activeRequest?.abort();
+            activeRequest = null;
+            accessToken = null;
+            getContainer()?.removeAttribute('data-formie-summary-token');
+            field.querySelectorAll('input[data-formie-summary-token]').forEach((input) => input.remove());
+            hasFetched = false;
+            getBlocks()?.replaceChildren();
+            setLoadingState(false);
+            markDirty();
+            queueFetch();
+        });
+    };
+
     // Defer the summary fetch until the field is near view. This avoids extra
     // requests for hidden pages or summaries the user never reaches.
     const observer = new IntersectionObserver((entries) => {
@@ -228,14 +277,18 @@ function initSummaryField(field: HTMLElement, root: Element): () => void {
     observer.observe(field);
     form.addEventListener('input', handleFieldMutation);
     form.addEventListener('change', handleFieldMutation);
+    form.addEventListener('reset', handleReset);
     root.addEventListener('formie:page:navigate:after', handlePageNavigate as EventListener);
     root.addEventListener('formie:submit:result', handleSubmitResult as EventListener);
 
     return () => {
+        destroyed = true;
+        requestVersion += 1;
         activeRequest?.abort();
         observer.disconnect();
         form.removeEventListener('input', handleFieldMutation);
         form.removeEventListener('change', handleFieldMutation);
+        form.removeEventListener('reset', handleReset);
         root.removeEventListener('formie:page:navigate:after', handlePageNavigate as EventListener);
         root.removeEventListener('formie:submit:result', handleSubmitResult as EventListener);
         debug.log('Field destroyed.');

package/src/js/modules/fields/text-limit.ts

@@ -323,12 +323,23 @@ export const textLimitModule: BrowserModuleDefinition = {
             };
         });
 
+        const onReset = (event: Event) => {
+            // Native reset restores input values after the reset event.
+            queueMicrotask(() => {
+                if (!event.defaultPrevented) {
+                    counterInputs.forEach(updateCounter);
+                }
+            });
+        };
+        ctx.form?.addEventListener('reset', onReset);
+
         await ctx.emit('formie:module:text-limit:init', {
             count: inputs.length,
         });
 
         return {
             destroy: () => {
+                ctx.form?.removeEventListener('reset', onReset);
                 unbinds.forEach((unbind) => {
                     unbind();
                 });

package/src/js/modules/fields/upload-manager.ts

@@ -42,9 +42,9 @@ type UploadManagerOptions = {
     uploadEndpoint?: string;
     deleteEndpoint?: string;
     hydrateEndpoint?: string;
-    limitFiles?: number | null;
-    sizeMinLimit?: number | null;
-    sizeLimit?: number | null;
+    maxFiles?: number | null;
+    minFileSize?: number | null;
+    maxFileSize?: number | null;
     accept?: string | null;
     restrictFiles?: boolean;
 };
@@ -508,6 +508,19 @@ function markUploadComplete(listItem: HTMLElement): void {
     }, UPLOAD_COMPLETE_DISPLAY_MS);
 }
 
+function markUploadFailed(listItem: HTMLElement): void {
+    const { track, bar, label } = getProgressElements(listItem);
+
+    listItem.classList.add('is-error');
+    listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+    track?.setAttribute('data-indeterminate', 'false');
+    bar?.setAttribute('data-progress', 'error');
+
+    if (label) {
+        label.textContent = 'Upload failed';
+    }
+}
+
 function createSortButton(direction: 'up' | 'down'): HTMLButtonElement {
     const label = direction === 'up' ? 'Move file up' : 'Move file down';
     const button = document.createElement('button');
@@ -763,9 +776,9 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     const uploadEndpoint = getEndpoint(dropzone, options.uploadEndpoint, 'data-formie-file-upload-upload-endpoint', '/actions/formie/file-upload/upload');
     const deleteEndpoint = getEndpoint(dropzone, options.deleteEndpoint, 'data-formie-file-upload-delete-endpoint', '/actions/formie/file-upload/delete');
     const hydrateEndpoint = getEndpoint(dropzone, options.hydrateEndpoint, 'data-formie-file-upload-hydrate-endpoint', '/actions/formie/file-upload/hydrate');
-    const limitFiles = options.limitFiles ?? toPositiveInt(dropzone.getAttribute('data-formie-file-limit'));
-    const sizeLimit = options.sizeLimit ?? parseFloat(dropzone.getAttribute('data-formie-size-max-limit') || '');
-    const sizeMinLimit = options.sizeMinLimit ?? parseFloat(dropzone.getAttribute('data-formie-size-min-limit') || '');
+    const maxFiles = options.maxFiles ?? toPositiveInt(dropzone.getAttribute('data-formie-file-limit'));
+    const maxFileSize = options.maxFileSize ?? parseFloat(dropzone.getAttribute('data-formie-size-max-limit') || '');
+    const minFileSize = options.minFileSize ?? parseFloat(dropzone.getAttribute('data-formie-size-min-limit') || '');
     const accept = options.accept ?? dropzone.getAttribute('accept') ?? browseInput.accept;
     const allowedFileTypes = parseAcceptTypes(accept);
 
@@ -776,16 +789,16 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         allowedFileTypes?: string[] | null;
     } = {};
 
-    if (limitFiles) {
-        restrictions.maxNumberOfFiles = limitFiles;
+    if (maxFiles) {
+        restrictions.maxNumberOfFiles = maxFiles;
     }
 
-    if (sizeLimit) {
-        restrictions.maxFileSize = sizeLimit * 1000 * 1000;
+    if (maxFileSize) {
+        restrictions.maxFileSize = maxFileSize * 1000 * 1000;
     }
 
-    if (sizeMinLimit) {
-        restrictions.minFileSize = sizeMinLimit * 1000 * 1000;
+    if (minFileSize) {
+        restrictions.minFileSize = minFileSize * 1000 * 1000;
     }
 
     if (allowedFileTypes) {
@@ -797,6 +810,27 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         restrictions,
     });
 
+    const selectionError = document.createElement('div');
+    selectionError.className = 'formie-upload-manager-error';
+    selectionError.setAttribute('role', 'alert');
+    selectionError.hidden = true;
+    root.append(selectionError);
+
+    // Uppy stores restriction messages for UI plugins; this custom UI must render them.
+    uppy.on('info-visible', () => {
+        const messages = uppy.getState().info.filter((info) => info.type === 'error');
+
+        if (messages.length) {
+            selectionError.textContent = [...new Set(messages.map((info) => info.message))].join(' ');
+            selectionError.hidden = false;
+        }
+    });
+
+    const clearSelectionError = () => {
+        selectionError.textContent = '';
+        selectionError.hidden = true;
+    };
+
     // Resolve once for Uppy's allow-list; per-request meta/header refresh
     // still re-reads the live form token (including custom csrfTokenName).
     const initialCsrf = getFormCsrfToken(resolvedForm);
@@ -886,11 +920,11 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     };
 
     const remainingUploadCapacity = (): number | null => {
-        if (!limitFiles) {
+        if (!maxFiles) {
             return null;
         }
 
-        return Math.max(0, limitFiles - countManagedAssets(state));
+        return Math.max(0, maxFiles - countManagedAssets(state));
     };
 
     const setDropzoneActive = (active: boolean) => {
@@ -1147,8 +1181,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         const assetId = toPositiveInt(body.assetId);
 
         if (!body.success || !assetId) {
-            managedFile.listItem.classList.add('is-error');
-            managedFile.listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+            markUploadFailed(managedFile.listItem);
 
             if (errorEl instanceof HTMLElement) {
                 errorEl.hidden = false;
@@ -1184,8 +1217,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         const errorEl = managedFile.listItem.querySelector('[data-formie-upload-manager-error]');
-        managedFile.listItem.classList.add('is-error');
-        managedFile.listItem.classList.remove('is-uploading', 'is-upload-complete', 'is-processing', 'is-preparing');
+        markUploadFailed(managedFile.listItem);
 
         if (errorEl instanceof HTMLElement) {
             errorEl.hidden = false;
@@ -1254,6 +1286,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
 
         const files = Array.from(browseInput.files);
         browseInput.value = '';
+        clearSelectionError();
 
         try {
             uppy.addFiles(files.map((file) => {
@@ -1294,6 +1327,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
         }
 
         const files = Array.from(transfer.files);
+        clearSelectionError();
 
         try {
             uppy.addFiles(files.map((file) => {
@@ -1311,6 +1345,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     });
 
     const resetHandler = () => {
+        clearSelectionError();
         state.files.forEach((managedFile) => {
             managedFile.listItem.remove();
         });
@@ -1326,6 +1361,7 @@ function bindUploadManagerField(field: HTMLElement, form: HTMLFormElement | null
     return () => {
         resolvedForm?.removeEventListener(FORM_RESET_EVENT, resetHandler);
         uppy.destroy();
+        selectionError.remove();
         state.files = [];
     };
 }