@byline/admin 6.2.1 → 6.4.0

package/dist/forms/form-context.js

@@ -1,8 +1,9 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
-import { normalizeHooks } from "@byline/core";
-import { get, hasExistingIdTargets, setWithResult } from "./nested-path.js";
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useSyncExternalStore } from "react";
+import { normalizeHooks, validateDocumentFields } from "@byline/core";
+import { FormDomScopeProvider } from "./form-dom-scope.js";
+import { get, hasExistingIdTargets, withValue } from "./nested-path.js";
 import { deletePendingUploadsUnderPath } from "./pending-uploads.js";
 import { useTrackedSlot } from "./use-tracked-slot.js";
 const sameLocaleSet = (a, b)=>{
@@ -25,7 +26,6 @@ const useFormContext = ()=>{
 };
 const FormProvider = ({ children, initialData = {}, documentId = null, collectionPath = null })=>{
     const fieldValues = useRef(JSON.parse(JSON.stringify(initialData?.fields ?? initialData)));
-    const initialValues = useRef(initialData?.fields ?? initialData);
     const errorsRef = useRef([]);
     const dirtyFields = useRef(new Set());
     const patchesRef = useRef([]);
@@ -93,10 +93,8 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
             ]
     });
     const updateFieldStoreInternal = useCallback((name, value)=>{
-        const newFieldValues = {
-            ...fieldValues.current
-        };
-        if (!setWithResult(newFieldValues, name, value)) return false;
+        const newFieldValues = withValue(fieldValues.current, name, value);
+        if (!newFieldValues) return false;
         fieldValues.current = newFieldValues;
         dirtyFields.current.add(name);
         notifyFieldListeners(name, value);
@@ -149,12 +147,7 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
     }, [
         notifyMetaListeners
     ]);
-    const getFieldValue = useCallback((name)=>{
-        const dirty = dirtyFields.current.has(name);
-        const currentValue = get(fieldValues.current, name);
-        if (void 0 !== currentValue) return currentValue;
-        if (!dirty) return get(initialValues.current, name);
-    }, []);
+    const getFieldValue = useCallback((name)=>get(fieldValues.current, name), []);
     const hasChanges = useCallback(()=>dirtyFields.current.size > 0, []);
     const resetHasChanges = useCallback(()=>{
         dirtyFields.current.clear();
@@ -253,58 +246,35 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
     useEffect(()=>()=>{
             for (const upload of pendingUploadsRef.current.values())URL.revokeObjectURL(upload.previewUrl);
         }, []);
-    const validateForm = useCallback((fields)=>{
-        const formErrors = [];
-        const data = getFieldValues();
-        for (const field of fields){
-            if (field.condition && !field.condition(data, data)) continue;
-            const value = getFieldValue(field.name);
-            if (!field.optional && (null == value || '' === value)) formErrors.push({
-                field: field.name,
-                message: `${field.label} is required`
-            });
-            if (null != value && '' !== value) switch(field.type){
-                case 'text':
-                    if ('string' != typeof value) formErrors.push({
-                        field: field.name,
-                        message: `${field.label} must be text`
-                    });
-                    break;
-                case 'checkbox':
-                    if ('boolean' != typeof value) formErrors.push({
-                        field: field.name,
-                        message: `${field.label} must be true or false`
-                    });
-                    break;
-                case 'select':
-                    if ('options' in field && field.options) {
-                        const validValues = field.options.map((opt)=>opt.value);
-                        if (!validValues.includes(value)) formErrors.push({
-                            field: field.name,
-                            message: `${field.label} must be one of: ${validValues.join(', ')}`
-                        });
-                    }
-                    break;
-                case 'datetime':
-                    if (value instanceof Date === false && 'string' != typeof value) formErrors.push({
-                        field: field.name,
-                        message: `${field.label} must be a valid date`
-                    });
-                    break;
-            }
-            if (field.validate) {
-                const error = field.validate(value, data);
-                if (error) formErrors.push({
-                    field: field.name,
-                    message: error
-                });
+    const fieldChanges = useRef(new Set());
+    const fieldChangeWaiters = useRef(new Set());
+    const trackFieldChange = useCallback((pending)=>{
+        fieldChanges.current.add(pending);
+        const release = ()=>{
+            fieldChanges.current.delete(pending);
+            if (0 === fieldChanges.current.size) {
+                for (const resolve of fieldChangeWaiters.current)resolve();
+                fieldChangeWaiters.current.clear();
             }
-        }
-        errorsRef.current = formErrors;
+        };
+        pending.then(release, release);
+        return release;
+    }, []);
+    const waitForFieldChanges = useCallback(async ()=>{
+        while(fieldChanges.current.size)await new Promise((resolve)=>fieldChangeWaiters.current.add(resolve));
+    }, []);
+    const validateForm = useCallback((fields, additionalErrors = [])=>{
+        const formErrors = validateDocumentFields(fields, getFieldValues(), {
+            respectConditions: true,
+            skip: (path)=>pendingUploadsRef.current.has(path)
+        });
+        errorsRef.current = [
+            ...additionalErrors,
+            ...formErrors
+        ];
         notifyErrorListeners();
-        return formErrors;
+        return errorsRef.current;
     }, [
-        getFieldValue,
         getFieldValues,
         notifyErrorListeners
     ]);
@@ -341,7 +311,13 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
         for (const field of fields){
             const fns = normalizeHooks(field.hooks?.beforeValidate);
             if (0 === fns.length) continue;
-            if (field.condition && !field.condition(data, data)) continue;
+            if (field.condition) {
+                let visible = true;
+                try {
+                    visible = Boolean(field.condition(data, data));
+                } catch  {}
+                if (!visible) continue;
+            }
             const path = field.name;
             const value = getFieldValue(path);
             const ctx = {
@@ -387,8 +363,11 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
         setFieldValue,
         notifyErrorListeners
     ]);
-    return /*#__PURE__*/ jsx(FormContext.Provider, {
-        value: {
+    const resetPatches = useCallback(()=>{
+        patchesRef.current = [];
+    }, []);
+    const getErrors = useCallback(()=>errorsRef.current, []);
+    const context = useMemo(()=>({
             documentId,
             collectionPath,
             setFieldValue,
@@ -397,15 +376,17 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
             getFieldValues,
             getPatches,
             appendPatch,
-            resetPatches: ()=>{
-                patchesRef.current = [];
-            },
+            resetPatches,
             hasChanges,
             resetHasChanges,
             runFieldHooks,
             validateForm,
-            errors: errorsRef.current,
-            getErrors: ()=>errorsRef.current,
+            get errors () {
+                return errorsRef.current;
+            },
+            getErrors,
+            trackFieldChange,
+            waitForFieldChanges,
             clearErrors,
             setFieldError,
             clearFieldError,
@@ -429,96 +410,100 @@ const FormProvider = ({ children, initialData = {}, documentId = null, collectio
             getSystemAvailableLocales: availableLocalesSlot.get,
             setSystemAvailableLocales: availableLocalesSlot.set,
             subscribeSystemAvailableLocales: availableLocalesSlot.subscribe
-        },
-        children: children
+        }), [
+        documentId,
+        collectionPath,
+        setFieldValue,
+        setFieldStore,
+        getFieldValue,
+        getFieldValues,
+        getPatches,
+        appendPatch,
+        resetPatches,
+        hasChanges,
+        resetHasChanges,
+        runFieldHooks,
+        validateForm,
+        getErrors,
+        trackFieldChange,
+        waitForFieldChanges,
+        clearErrors,
+        setFieldError,
+        clearFieldError,
+        isDirty,
+        getDirtyBreakdown,
+        subscribeField,
+        subscribeErrors,
+        subscribeMeta,
+        addPendingUpload,
+        removePendingUpload,
+        removePendingUploadsUnder,
+        getPendingUploads,
+        hasPendingUploads,
+        clearPendingUploads,
+        setFieldUploading,
+        getIsFieldUploading,
+        subscribeFieldUploading,
+        pathSlot.get,
+        pathSlot.set,
+        pathSlot.subscribe,
+        availableLocalesSlot.get,
+        availableLocalesSlot.set,
+        availableLocalesSlot.subscribe
+    ]);
+    return /*#__PURE__*/ jsx(FormContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/ jsx(FormDomScopeProvider, {
+            children: children
+        })
     });
 };
 const useSystemPath = ()=>{
     const { getSystemPath, subscribeSystemPath } = useFormContext();
-    const [value, setValue] = useState(()=>getSystemPath());
-    useEffect(()=>subscribeSystemPath((next)=>setValue(next)), [
-        subscribeSystemPath
-    ]);
-    return value;
+    return useSyncExternalStore(subscribeSystemPath, getSystemPath, getSystemPath);
 };
 const useSystemAvailableLocales = ()=>{
     const { getSystemAvailableLocales, subscribeSystemAvailableLocales } = useFormContext();
-    const [value, setValue] = useState(()=>getSystemAvailableLocales());
-    useEffect(()=>subscribeSystemAvailableLocales((next)=>setValue(next)), [
-        subscribeSystemAvailableLocales
-    ]);
-    return value;
+    return useSyncExternalStore(subscribeSystemAvailableLocales, getSystemAvailableLocales, getSystemAvailableLocales);
 };
 const useFormStore = ()=>useFormContext();
 const useFieldError = (name)=>{
     const { getErrors, subscribeErrors } = useFormContext();
-    const [error, setError] = useState(()=>getErrors().find((e)=>e.field === name)?.message);
-    useEffect(()=>{
-        const unsubscribe = subscribeErrors((currentErrors)=>{
-            const fieldError = currentErrors.find((e)=>e.field === name);
-            setError(fieldError?.message);
-        });
-        return unsubscribe;
-    }, [
-        subscribeErrors,
-        name
-    ]);
-    return error;
+    const errors = useSyncExternalStore(subscribeErrors, getErrors, getErrors);
+    return errors.find((error)=>error.field === name)?.message;
 };
 const useFormMeta = ()=>{
     const { hasChanges, subscribeMeta } = useFormContext();
-    const [hasChangesValue, setHasChangesValue] = useState(hasChanges());
-    useEffect(()=>{
-        const unsubscribe = subscribeMeta(()=>{
-            setHasChangesValue(hasChanges());
-        });
-        return unsubscribe;
-    }, [
-        subscribeMeta,
-        hasChanges
-    ]);
     return {
-        hasChanges: hasChangesValue
+        hasChanges: useSyncExternalStore(subscribeMeta, hasChanges, hasChanges)
     };
 };
 const useIsDirty = (name)=>{
     const { isDirty, subscribeMeta } = useFormContext();
-    const [dirty, setDirty] = useState(isDirty(name));
-    useEffect(()=>{
-        const unsubscribe = subscribeMeta(()=>{
-            setDirty(isDirty(name));
-        });
-        return unsubscribe;
-    }, [
-        subscribeMeta,
+    const snapshot = useCallback(()=>isDirty(name), [
         isDirty,
         name
     ]);
-    return dirty;
+    return useSyncExternalStore(subscribeMeta, snapshot, snapshot);
 };
 const useFieldValue = (name)=>{
-    const { getFieldValue, subscribeField } = useFormContext();
-    const [value, setValue] = useState(()=>getFieldValue(name));
-    useEffect(()=>{
-        const unsubscribe = subscribeField(name, (nextValue)=>{
-            setValue(nextValue);
-        });
-        return unsubscribe;
-    }, [
-        subscribeField,
+    const { getFieldValue, subscribeMeta } = useFormContext();
+    const snapshot = useCallback(()=>getFieldValue(name), [
+        getFieldValue,
         name
     ]);
-    return value;
+    return useSyncExternalStore(subscribeMeta, snapshot, snapshot);
 };
 const useIsFieldUploading = (fieldPath)=>{
     const { getIsFieldUploading, subscribeFieldUploading } = useFormContext();
-    const [uploading, setUploading] = useState(()=>getIsFieldUploading(fieldPath));
-    useEffect(()=>subscribeFieldUploading(fieldPath, (next)=>{
-            setUploading(next);
-        }), [
+    const subscribe = useCallback((notify)=>subscribeFieldUploading(fieldPath, notify), [
         subscribeFieldUploading,
         fieldPath
     ]);
-    return uploading;
+    const snapshot = useCallback(()=>getIsFieldUploading(fieldPath), [
+        getIsFieldUploading,
+        fieldPath
+    ]);
+    return useSyncExternalStore(subscribe, snapshot, snapshot);
 };
 export { FormProvider, useFieldError, useFieldValue, useFormContext, useFormMeta, useFormStore, useIsDirty, useIsFieldUploading, useSystemAvailableLocales, useSystemPath };

package/dist/forms/form-dom-scope.d.ts

@@ -0,0 +1,34 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+import type { ReactNode } from 'react';
+/**
+ * Establishes one DOM id scope. `FormProvider` wraps its children in this, so a
+ * scope exists wherever form state does and no caller has to opt in.
+ */
+export declare const FormDomScopeProvider: ({ children }: {
+    children: ReactNode;
+}) => ReactNode;
+/**
+ * The active scope, or `''` when rendered outside a form. Field widgets are also
+ * composed directly by the admin user and role screens, which have no
+ * `FormProvider`, so an absent scope degrades to the unprefixed id rather than
+ * throwing.
+ */
+export declare function useFormDomScope(): string;
+/**
+ * Scope a derived DOM id.
+ *
+ * A caller-supplied `id` is returned untouched: it is the author's identifier, it
+ * may already be referenced from outside the form, and scoping it would break that
+ * reference as well as double-prefix ids that pass through here twice.
+ *
+ * The result is a valid HTML id and a valid `for` / `aria-*` reference, but React's
+ * generated scope contains characters that need escaping in a CSS selector. Resolve
+ * these with `document.getElementById`, not `querySelector('#…')`.
+ */
+export declare function useScopedDomId(base: string, explicit?: string): string;

package/dist/forms/form-dom-scope.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useId } from "react";
+const FormDomScopeContext = /*#__PURE__*/ createContext(null);
+const FormDomScopeProvider = ({ children })=>{
+    const scope = useId();
+    return /*#__PURE__*/ jsx(FormDomScopeContext.Provider, {
+        value: scope,
+        children: children
+    });
+};
+function useFormDomScope() {
+    return useContext(FormDomScopeContext) ?? '';
+}
+function useScopedDomId(base, explicit) {
+    const scope = useFormDomScope();
+    if (null != explicit) return explicit;
+    return '' === scope ? base : `${scope}${base}`;
+}
+export { FormDomScopeProvider, useFormDomScope, useScopedDomId };

package/dist/forms/form-layout.js

@@ -1,12 +1,13 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Fragment as external_react_Fragment } from "react";
+import { Fragment as external_react_Fragment, useMemo } from "react";
 import clsx from "clsx";
 import { sliceFieldAdmin } from "../fields/field-admin.js";
 import { FieldRenderer } from "../fields/field-renderer.js";
 import { AdminGroup } from "../presentation/group.js";
 import { AdminRow } from "../presentation/row.js";
 import { AdminTabs, tabPanelId, tabTriggerId } from "../presentation/tabs.js";
+import { useFormDomScope } from "./form-dom-scope.js";
 import form_renderer_module from "./form-renderer.module.js";
 import { useFormLayout } from "./use-form-layout.js";
 import { useFormTabs } from "./use-form-tabs.js";
@@ -16,7 +17,13 @@ const BOTH_REGIONS = [
 ];
 const FormLayout = ({ fields, adminConfig, regions = BOTH_REGIONS, variant = 'split', activeLocale, initialData, activeTabBySet, onTabChange, sidebarSlot })=>{
     const { fieldByName, tabSetByName, rowByName, groupByName, layout, fieldToTabPath } = useFormLayout(adminConfig, fields);
-    const tabs = useFormTabs(fieldToTabPath, activeTabBySet);
+    const tabSets = useMemo(()=>[
+            ...tabSetByName.values()
+        ], [
+        tabSetByName
+    ]);
+    const tabs = useFormTabs(fieldToTabPath, activeTabBySet, tabSets);
+    const domScope = useFormDomScope();
     const renderField = (fieldName)=>{
         const field = fieldByName.get(fieldName);
         if (!field) return null;
@@ -47,7 +54,7 @@ const FormLayout = ({ fields, adminConfig, regions = BOTH_REGIONS, variant = 'sp
         }, `group:${group.name}`);
     const renderTabSet = (set)=>{
         const { visibleTabs, activeTabName, activeTab, errorCounts } = tabs.resolve(set);
-        const idBase = `tabset:${set.name}`;
+        const idBase = `${domScope}tabset:${set.name}`;
         return /*#__PURE__*/ jsxs("div", {
             className: clsx('byline-form-tabset', form_renderer_module.tabset),
             children: [

package/dist/forms/form-page-chrome.js

@@ -23,6 +23,18 @@ const FormHeadingRow = ({ heading, headerSlot })=>/*#__PURE__*/ jsxs("div", {
 const FormStatusBar = ({ disabled, initialData, workflowStatuses, publishedVersion, scheduling, hasChanges, isUploading, isSubmitting, onCancel, transitions, statusBusy, onStatusBusyChange, onStatusChange, onMutationError, isBlocked, onUnsavedChanges, onUnpublish, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, useAsTitle, contentLocale, contentLocales, defaultLocale })=>{
     const { t } = useTranslation('byline-admin');
     const { primaryStatus, secondaryStatuses, isTerminal } = transitions;
+    const runTransition = async (status)=>{
+        if (isBlocked() || !onStatusChange) return;
+        if (hasChanges) return void onUnsavedChanges();
+        onStatusBusyChange(true);
+        try {
+            await onStatusChange(status);
+        } catch (error) {
+            onMutationError?.(error);
+        } finally{
+            onStatusBusyChange(false);
+        }
+    };
     return /*#__PURE__*/ jsxs("div", {
         className: clsx('byline-form-status-bar', form_renderer_module["status-bar"]),
         children: [
@@ -90,30 +102,8 @@ const FormStatusBar = ({ disabled, initialData, workflowStatuses, publishedVersi
                             type: "button",
                             intent: isTerminal ? 'info' : 'success',
                             disabled: disabled || statusBusy,
-                            onOptionSelect: async (value)=>{
-                                if (isBlocked()) return;
-                                if (hasChanges) return void onUnsavedChanges();
-                                onStatusBusyChange(true);
-                                try {
-                                    await onStatusChange(value);
-                                } catch (error) {
-                                    onMutationError?.(error);
-                                } finally{
-                                    onStatusBusyChange(false);
-                                }
-                            },
-                            onButtonClick: isTerminal ? void 0 : async ()=>{
-                                if (isBlocked()) return;
-                                if (hasChanges) return void onUnsavedChanges();
-                                onStatusBusyChange(true);
-                                try {
-                                    await onStatusChange(primaryStatus.name);
-                                } catch (error) {
-                                    onMutationError?.(error);
-                                } finally{
-                                    onStatusBusyChange(false);
-                                }
-                            },
+                            onOptionSelect: runTransition,
+                            onButtonClick: isTerminal ? void 0 : ()=>runTransition(primaryStatus.name),
                             children: statusBusy ? '...' : isTerminal ? primaryStatus.label ?? primaryStatus.name : primaryStatus.verb ?? primaryStatus.label ?? primaryStatus.name
                         })
                     }),

package/dist/forms/form-renderer.d.ts

@@ -8,6 +8,7 @@
 import { type ReactNode } from 'react';
 import type { AdminResourceConfig, Field, WorkflowStatus } from '@byline/core';
 import { type ScheduledPublicationInfo, type SchedulePublicationInput } from './scheduled-publication-control.js';
+import { type SystemFieldsSubmitPayload } from './use-form-submission.js';
 import type { DocumentActionsLocaleOption } from './document-actions.js';
 import type { UseNavigationGuard } from './navigation-guard.js';
 export type { SystemFieldsSubmitPayload } from './use-form-submission.js';
@@ -32,7 +33,7 @@ export interface FormRendererProps {
     onReloadDocument?: () => void | Promise<void>;
     mode: 'create' | 'edit';
     fields: Field[];
-    onSubmit: (data: any) => void | Promise<void>;
+    onSubmit: (data: SystemFieldsSubmitPayload) => void | Promise<void>;
     onCancel: () => void;
     onStatusChange?: (nextStatus: string) => Promise<void>;
     onUnpublish?: () => Promise<void>;

package/dist/forms/form-renderer.js

@@ -13,15 +13,13 @@ import form_renderer_module from "./form-renderer.module.js";
 import { useNavigationGuardAdapter } from "./navigation-guard.js";
 import { useScheduledPublication } from "./scheduled-publication-control.js";
 import { computeStatusTransitions } from "./status-transitions.js";
+import { useDocumentReloadRecovery } from "./use-document-reload-recovery.js";
 import { useFormSubmission } from "./use-form-submission.js";
 const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRevision, onMutationError, onTreeMutationCommitted, scheduledPublicationsNeedReconfirmation = false, scheduledPublicationsHref, onReloadDocument, fields, onSubmit, onCancel, onStatusChange, onUnpublish, scheduledPublication, onSchedulePublication, onConfirmScheduledPublication, onCancelScheduledPublication, onDelete, onDuplicate, onCopyToLocale, onDeleteLocale, contentLocales, nextStatus, workflowStatuses, publishedVersion, initialData, adminConfig, useAsTitle, useAsPath, showPath = true, heading, advertiseLocales, tree, headingLabel, headerSlot, collectionPath, initialLocale, onLocaleChange, defaultLocale = 'en', useNavigationGuard: useNavigationGuardProp, restoreWarnings, _activeTabBySet, _onTabChange })=>{
     const { hasChanges: hasChangesFn, subscribeMeta } = useFormContext();
     const { t } = useTranslation('byline-admin');
     const [hasChanges, setHasChanges] = useState(hasChangesFn());
     const [statusBusy, setStatusBusy] = useState(false);
-    const formRef = useRef(null);
-    const focusBeforeBusyRef = useRef(null);
-    const restoreFocusAfterBusyRef = useRef(false);
     const [showUnsavedModal, setShowUnsavedModal] = useState(false);
     const [contentLocale, setContentLocale] = useState(initialLocale ?? defaultLocale);
     const scheduling = useScheduledPublication({
@@ -79,76 +77,38 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
     }) : 'create' === mode ? t('forms.heading.create') : t('forms.heading.edit'));
     const guardFromContext = useNavigationGuardAdapter();
     const useGuard = useNavigationGuardProp ?? guardFromContext;
-    const [discarding, setDiscarding] = useState(false);
-    const [reloadFailed, setReloadFailed] = useState(false);
-    const warningRef = useRef(null);
-    const mutationBlockedRef = useRef(mutationsBlocked);
-    mutationBlockedRef.current = mutationsBlocked || discarding;
-    const guard = useGuard(hasChanges && !discarding);
-    useEffect(()=>{
-        if (mutationIssue) warningRef.current?.focus();
-    }, [
-        mutationIssue
-    ]);
-    useEffect(()=>{
-        if (!discarding) return;
-        Promise.resolve().then(()=>onReloadDocument ? onReloadDocument() : window.location.reload()).catch(()=>{
-            setDiscarding(false);
-            setReloadFailed(true);
-        });
-    }, [
-        discarding,
-        onReloadDocument
-    ]);
     const currentStatus = initialData?.status;
     const { primaryStatus, secondaryStatuses, isTerminal } = computeStatusTransitions(currentStatus, workflowStatuses, nextStatus);
     useEffect(()=>subscribeMeta(()=>setHasChanges(hasChangesFn())), [
         subscribeMeta,
         hasChangesFn
     ]);
-    const captureFocusBeforeBusy = useCallback(()=>{
-        if (null != focusBeforeBusyRef.current) return;
-        const activeElement = document.activeElement;
-        if (!(activeElement instanceof HTMLElement) || !formRef.current?.contains(activeElement)) return;
-        focusBeforeBusyRef.current = activeElement;
-        restoreFocusAfterBusyRef.current = true;
-    }, []);
     const submission = useFormSubmission({
         mode,
         fields,
         documentId: 'edit' === mode && 'string' == typeof initialData?.id ? initialData.id : void 0,
         advertiseLocales,
         onSubmit,
-        isBlocked: ()=>mutationBlockedRef.current,
-        onBeforeBusy: captureFocusBeforeBusy
+        isBlocked: ()=>recovery.mutationBlockedRef.current,
+        onBeforeBusy: ()=>recovery.captureFocusBeforeBusy()
     });
+    const recovery = useDocumentReloadRecovery({
+        mutationsBlocked,
+        mutationIssue,
+        onReloadDocument,
+        isBusy: submission.isBusy
+    });
+    const { formRef, warningRef, mutationBlockedRef, discarding, reloadFailed, requestDiscard } = recovery;
+    const guard = useGuard(hasChanges && !discarding);
     const isUploading = 'uploading' === submission.phase.kind;
     const isSubmitting = 'submitting' === submission.phase.kind;
     const isBusy = submission.isBusy;
     const pendingSystemFieldsSubmit = 'confirmingSystemFields' === submission.phase.kind ? submission.phase.payload : null;
-    useEffect(()=>{
-        if (isBusy || !restoreFocusAfterBusyRef.current) return;
-        restoreFocusAfterBusyRef.current = false;
-        if (mutationIssue) {
-            warningRef.current?.focus();
-            focusBeforeBusyRef.current = null;
-            return;
-        }
-        const original = focusBeforeBusyRef.current;
-        focusBeforeBusyRef.current = null;
-        const originalCanReceiveFocus = original?.isConnected === true && !original.matches(':disabled, [aria-disabled="true"]');
-        const target = originalCanReceiveFocus ? original : formRef.current?.querySelector('input:not(:disabled), textarea:not(:disabled), select:not(:disabled), button:not(:disabled), [tabindex]:not([tabindex="-1"])');
-        target?.focus({
-            preventScroll: true
-        });
-    }, [
-        isBusy,
-        mutationIssue
-    ]);
     const handleCancel = ()=>{
         if (onCancel && 'function' == typeof onCancel) onCancel();
     };
     const handleSubmit = (e)=>{
+        if (e.target !== e.currentTarget) return;
         e.preventDefault();
         if (mutationBlockedRef.current) return;
         submission.submit();
@@ -215,10 +175,7 @@ const FormContent = ({ mode, mutationIssue, mutationsBlocked = false, observedRe
                             warningRef: warningRef,
                             discarding: discarding,
                             reloadFailed: reloadFailed,
-                            onDiscardRequested: ()=>{
-                                setReloadFailed(false);
-                                setDiscarding(true);
-                            },
+                            onDiscardRequested: requestDiscard,
                             scheduling: scheduling,
                             restoreWarnings: restoreWarnings
                         }),

package/dist/forms/nested-path.d.ts

@@ -26,3 +26,5 @@ export declare function hasExistingIdTargets(object: unknown, path: string): boo
 /** Set a path and report whether all stable-id selectors resolved. */
 export declare function setWithResult<T extends object>(object: T, path: string, value: unknown): boolean;
 export declare function set<T extends object>(object: T, path: string, value: unknown): T;
+/** Clone only the containers along a write path, preserving other snapshots. */
+export declare function withValue<T extends object>(object: T, path: string, value: unknown): T | undefined;

package/dist/forms/nested-path.js

@@ -95,4 +95,29 @@ function set(object, path, value) {
     setWithResult(object, path, value);
     return object;
 }
-export { get, hasExistingIdTargets, set, setWithResult, toPath };
+function withValue(object, path, value) {
+    const parsed = parseInstancePath(path);
+    if (!parsed.ok || !hasExistingIdTargets(object, path)) return;
+    const result = Array.isArray(object) ? [
+        ...object
+    ] : {
+        ...object
+    };
+    let current = result;
+    for (const [index, segment] of parsed.segments.entries()){
+        const key = 'field' === segment.kind ? segment.name : 'index' === segment.kind ? segment.index : 'id' === segment.kind ? selectId(current, segment.id) : void 0;
+        if (void 0 === key || -1 === key) break;
+        if (index === parsed.segments.length - 1) {
+            current[key] = value;
+            return result;
+        }
+        const existing = current[key];
+        current[key] = Array.isArray(existing) ? [
+            ...existing
+        ] : null != existing && 'object' == typeof existing ? {
+            ...existing
+        } : newContainer(parsed.segments[index + 1]);
+        current = current[key];
+    }
+}
+export { get, hasExistingIdTargets, set, setWithResult, toPath, withValue };