@oneblink/apps-react 13.0.0-beta.3 → 13.0.0-beta.5

package/dist/OneBlinkFormBase.d.ts

@@ -3,7 +3,7 @@ import { submissionService, attachmentsService } from './apps';
 import { EnvironmentTypes, FormTypes, FormsAppsTypes, ScheduledTasksTypes, SubmissionTypes } from '@oneblink/types';
 import { ReplaceInjectablesOverrides } from './hooks/useReplaceInjectablesOverrides';
 import { CaptchaType, ExecutedLookups, SetFormSubmission, SectionState } from './types/form';
-export type OneBlinkReadOnlyFormProps = {
+type OneBlinkFormDisplayProps = {
     /**
      * A [Google Maps API
      * Key](https://developers.google.com/maps/documentation/javascript/get-api-key).
@@ -40,7 +40,27 @@ export type OneBlinkReadOnlyFormProps = {
      */
     audience: FormTypes.FormElementHiddenFromAudience;
 };
-export type OneBlinkFormBaseProps = OneBlinkReadOnlyFormProps & {
+export type OneBlinkReadOnlyFormProps = OneBlinkFormDisplayProps & ((OneBlinkFormControlledProps & {
+    /**
+     * Element ids that remain editable. All other elements are read-only.
+     * Requires the same controlled submission props as
+     * `OneBlinkFormControlled`.
+     */
+    editableFormElementIds: string[];
+    form?: never;
+    initialSubmission?: never;
+}) | (OneBlinkFormUncontrolledProps & {
+    /** Omit to render every form element as read-only. */
+    editableFormElementIds?: never;
+    definition?: never;
+    submission?: never;
+    setFormSubmission?: never;
+    lastElementUpdated?: never;
+    executedLookups?: never;
+    sectionState?: never;
+}));
+export type OneBlinkFormBaseProps = OneBlinkFormDisplayProps & {
+    editableFormElementIds?: string[];
     /** The function to call when the user cancels the form */
     onCancel: () => unknown;
     /**
@@ -162,6 +182,6 @@ export type OneBlinkFormControlledProps = {
 type Props = OneBlinkFormBaseProps & OneBlinkFormControlledProps & {
     isReadOnly: boolean;
 };
-declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, }: Props): import("react/jsx-runtime").JSX.Element;
+declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, editableFormElementIds, }: Props): import("react/jsx-runtime").JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OneBlinkFormBase>;
 export default _default;

package/dist/OneBlinkFormBase.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
+import { flushSync } from 'react-dom';
 import { createTheme as createMuiTheme, ThemeProvider } from '@mui/material';
 import Tooltip from './components/renderer/Tooltip';
 import { Prompt, useHistory } from 'react-router-dom';
@@ -44,7 +45,10 @@ import { getElementDisplayNameForAnalyticsEvent, sendGoogleAnalyticsEvent, } fro
 import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfileForInjectables';
 import { ValidationIconConfigurationContext } from './hooks/useValidationIconConfiguration';
 import { Clickable } from './components/Clickable';
-function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, }) {
+import { EditableFormElementIdsContext } from './hooks/useEditableFormElementIds';
+import { useRegisterFormSubmissionAttempt } from './hooks/useFormSubmissionAttempt';
+import { useRegisterFormIsDirty, FormMarkDirtyContextProvider, } from './hooks/useFormIsDirty';
+function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, validationIcon, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, scrollToTopOfPage, getCurrentSubmissionDuration, onBeforeUnload, audience, editableFormElementIds, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const isOffline = useIsOffline();
     const { isUsingFormsKey } = useAuth();
@@ -225,6 +229,13 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
             isNavigationAllowed: true,
         }));
     }, []);
+    const allowNavigationAfterHostAction = React.useCallback(() => {
+        // React Router DOM v5's <Prompt> has no imperative "proceed" API, so the
+        // guard must rerender as disabled before the host navigates in the same
+        // tick. Migrating to the React Router DOM v6 blocker APIs would allow the
+        // blocked transition to proceed directly without flushSync().
+        flushSync(allowNavigation);
+    }, [allowNavigation]);
     // #endregion Unsaved Changed
     //
     //
@@ -246,8 +257,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     const [isShowingValidationErrorsCard, setIsShowingValidationErrorsCard] = React.useState(false);
     const { validate } = useFormValidation(pages);
     const recaptchaType = React.useMemo(() => captchaType !== null && captchaType !== void 0 ? captchaType : 'CHECKBOX', [captchaType]);
-    const formElementsValidation = React.useMemo(() => !isReadOnly
-        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience)
+    const formElementsValidation = React.useMemo(() => !isReadOnly || editableFormElementIds !== undefined
+        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience, editableFormElementIds)
         : undefined, [
         isReadOnly,
         validate,
@@ -257,6 +268,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         recaptchaType,
         isOffline,
         audience,
+        editableFormElementIds,
     ]);
     React.useEffect(() => {
         if (!formElementsValidation) {
@@ -472,6 +484,24 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         setFormSubmission,
         shouldUseNavigableValidationErrorsNotification,
     ]);
+    const attemptFormSubmission = React.useCallback(async () => {
+        setHasAttemptedSubmit(true);
+        setIsPreparingToSubmit(true);
+        try {
+            if (!(await prepareSubmission(false))) {
+                return false;
+            }
+            // The host must call this after it has persisted the edits. Calling it
+            // here would let the user cancel a later confirmation dialog and leave
+            // without being prompted.
+            return allowNavigationAfterHostAction;
+        }
+        finally {
+            setIsPreparingToSubmit(false);
+        }
+    }, [allowNavigationAfterHostAction, prepareSubmission]);
+    useRegisterFormSubmissionAttempt(editableFormElementIds === undefined ? undefined : attemptFormSubmission);
+    useRegisterFormIsDirty(definition.id, isDirty);
     const handleSubmit = React.useCallback(async (event, continueWhilstAttachmentsAreUploading) => {
         event.preventDefault();
         // Approvers are not shown a submit button, so reaching here means the
@@ -588,109 +618,93 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     //
     //
     //
-    // #region Lookups
-    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission);
-    // #endregion
+    // #region Submission/Definition Changes
+    const markFormDirty = React.useCallback(() => {
+        setUnsavedChangesState((current) => ({
+            ...current,
+            isDirty: true,
+        }));
+    }, []);
     //
     //
+    // #region Lookups
+    const { handlePagesLookupResult } = useLookups(definition.id, setFormSubmission, markFormDirty);
+    // #endregion
     //
     //
-    // #region Submission/Definition Changes
-    const handleChange = React.useCallback((element, { value, executedLookups, deleteSection, sectionState }) => {
+    const handleChange = React.useCallback((element, { value, executedLookups, deleteSection, sectionState, isDerivedChange }) => {
         if (
-        //This will ensure on a read only form that the summary and calculation elements
-        //can still be displayed as it needs handleChange so it can render
-        //due to the dynamic nature of the summary element.
-        (disabled &&
-            element.type !== 'summary' &&
-            element.type !== 'calculation') ||
+        // Disabled forms still need derived writers (calculation, summary, …)
+        // so those elements can recompute and display from the current model.
+        (disabled && !isDerivedChange) ||
             element.type === 'page') {
             return;
         }
-        switch (element.type) {
-            case 'section': {
-                setFormSubmission((currentFormSubmission) => {
-                    const currentSectionState = currentFormSubmission.sectionState || [];
-                    const existingSectionIndex = currentSectionState.findIndex((section) => section.id === element.id);
-                    const sectionIsInState = existingSectionIndex >= 0;
-                    let newSectionState;
-                    if (sectionIsInState && deleteSection) {
-                        newSectionState = currentSectionState.filter((section) => section.id !== element.id);
-                    }
-                    else if (sectionIsInState) {
-                        // Update state of the section
-                        newSectionState = currentSectionState.map((section, index) => index === existingSectionIndex
-                            ? {
-                                ...section,
-                                state: section.state === 'COLLAPSED'
-                                    ? 'EXPANDED'
-                                    : 'COLLAPSED',
-                            }
-                            : section);
-                    }
-                    else {
-                        // Add the section to state
-                        newSectionState = [
-                            ...currentSectionState,
-                            {
-                                id: element.id,
-                                state: element.isCollapsed ? 'EXPANDED' : 'COLLAPSED',
-                            },
-                        ];
-                    }
-                    return {
-                        ...currentFormSubmission,
-                        sectionState: newSectionState,
-                    };
-                });
-                break;
-            }
-            // Don't update the last element updated for elements the user cannot set the value of
-            case 'summary':
-            case 'calculation': {
-                setFormSubmission((currentFormSubmission) => ({
-                    ...currentFormSubmission,
-                    submission: {
-                        ...currentFormSubmission.submission,
-                        [element.name]: typeof value === 'function'
-                            ? value(currentFormSubmission.submission[element.name])
-                            : value,
-                    },
-                }));
-                break;
-            }
-            default: {
-                setUnsavedChangesState((current) => ({
-                    ...current,
-                    isDirty: true,
-                }));
-                setFormSubmission((currentFormSubmission) => {
-                    var _a;
-                    return {
-                        ...currentFormSubmission,
-                        submission: {
-                            ...currentFormSubmission.submission,
-                            [element.name]: typeof value === 'function'
-                                ? value(currentFormSubmission.submission[element.name])
-                                : value,
-                        },
-                        lastElementUpdated: element,
-                        executedLookups: {
-                            ...currentFormSubmission.executedLookups,
-                            [element.name]: typeof executedLookups === 'function'
-                                ? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
-                                : executedLookups,
+        if (element.type === 'section') {
+            setFormSubmission((currentFormSubmission) => {
+                const currentSectionState = currentFormSubmission.sectionState || [];
+                const existingSectionIndex = currentSectionState.findIndex((section) => section.id === element.id);
+                const sectionIsInState = existingSectionIndex >= 0;
+                let newSectionState;
+                if (sectionIsInState && deleteSection) {
+                    newSectionState = currentSectionState.filter((section) => section.id !== element.id);
+                }
+                else if (sectionIsInState) {
+                    // Update state of the section
+                    newSectionState = currentSectionState.map((section, index) => index === existingSectionIndex
+                        ? {
+                            ...section,
+                            state: section.state === 'COLLAPSED' ? 'EXPANDED' : 'COLLAPSED',
+                        }
+                        : section);
+                }
+                else {
+                    // Add the section to state
+                    newSectionState = [
+                        ...currentSectionState,
+                        {
+                            id: element.id,
+                            state: element.isCollapsed ? 'EXPANDED' : 'COLLAPSED',
                         },
-                        sectionState: sectionState
-                            ? typeof sectionState === 'function'
-                                ? sectionState(currentFormSubmission.sectionState)
-                                : sectionState
-                            : currentFormSubmission.sectionState,
-                    };
-                });
-            }
+                    ];
+                }
+                return {
+                    ...currentFormSubmission,
+                    sectionState: newSectionState,
+                };
+            });
+            return;
         }
-    }, [disabled, setFormSubmission]);
+        if (!isDerivedChange) {
+            markFormDirty();
+        }
+        setFormSubmission((currentFormSubmission) => {
+            var _a;
+            return {
+                ...currentFormSubmission,
+                submission: {
+                    ...currentFormSubmission.submission,
+                    [element.name]: typeof value === 'function'
+                        ? value(currentFormSubmission.submission[element.name])
+                        : value,
+                },
+                lastElementUpdated: isDerivedChange
+                    ? currentFormSubmission.lastElementUpdated
+                    : element,
+                executedLookups: {
+                    ...currentFormSubmission.executedLookups,
+                    [element.name]: typeof executedLookups === 'function'
+                        ? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
+                        : executedLookups,
+                },
+                sectionState: sectionState
+                    ? typeof sectionState === 'function'
+                        ? sectionState(currentFormSubmission.sectionState)
+                        : sectionState
+                    : currentFormSubmission.sectionState,
+            };
+        }, { isDerivedChange });
+    }, [disabled, markFormDirty, setFormSubmission]);
     // #endregion
     //
     //
@@ -740,55 +754,60 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     if (conditionalLogicError) {
         return (_jsx(_Fragment, { children: _jsxs("div", { className: "has-text-centered", children: [_jsx(MaterialIcon, { className: "has-text-warning icon-x-large", children: "error" }), _jsx("h3", { className: "title is-3", children: "Bad Form Configuration" }), _jsx("p", { className: "cypress-conditional-logic-error-message", children: conditionalLogicError.message }), _jsx("p", { className: "has-text-grey", children: localisationService.formatDatetimeLong(new Date()) })] }) }));
     }
-    return (_jsx(ThemeProvider, { theme: theme, children: _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(ReplaceInjectablesOverridesContext.Provider, { value: replaceInjectablesOverrides, children: _jsx(FormDefinitionContext.Provider, { value: definition, children: _jsx(FormElementOptionsContextProvider, { formIsReadOnly: isReadOnly, children: _jsx(FormElementLookupsContextProvider, { children: _jsx(OneBlinkFormContainerContext.Provider, { value: obFormContainerHTMLElementRef, children: _jsxs("div", { className: clsx('ob-form-container', {
-                                        'is-showing-pages': isShowingMultiplePages,
-                                    }), ref: obFormContainerHTMLElementRef, children: [_jsx("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false), children: _jsxs("div", { children: [_jsx("div", { ref: scrollToTopOfPageHTMLElementRef }), isShowingMultiplePages && (_jsxs("div", { className: clsx('ob-steps-navigation', {
-                                                            'is-active': isStepsHeaderActive,
-                                                        }), children: [_jsxs(Clickable, { className: clsx('ob-steps-navigation__header', {
-                                                                    'is-active': isStepsHeaderActive,
-                                                                }), onClick: toggleStepsNavigation, children: [_jsx("span", { className: "icon is-invisible", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) }), _jsxs("div", { className: "steps-header-active-page", children: [isDisplayingCurrentPageError ? (_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-4", children: "warning" }) })) : (_jsx("span", { className: "steps-header-active-page-icon", children: currentPageNumber })), _jsx("span", { className: "steps-header-active-page-label cypress-tablet-step-title", children: currentPage ? currentPage.label : '' })] }), _jsx("span", { className: "dropdown icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) })] }), _jsx("div", { role: "navigation", className: clsx('ob-steps-navigation__steps', {
-                                                                    'is-active': isStepsHeaderActive,
-                                                                }), children: _jsx("div", { className: "steps is-small is-horizontal-tablet cypress-steps", children: visiblePages.map((page, index) => {
-                                                                        const hasErrors = checkDisplayPageError(page);
-                                                                        return (_jsxs(Clickable, { id: `steps-navigation-step-${page.id}`, "aria-label": `${page.label}, page ${index + 1} of ${visiblePages.length}`, "aria-current": currentPage.id === page.id
-                                                                                ? 'step'
-                                                                                : undefined, className: clsx('step-item cypress-step-item', {
-                                                                                'is-active': currentPage.id === page.id,
-                                                                                'is-completed': currentPageIndex > index,
-                                                                                'is-error': hasErrors,
-                                                                            }), onClick: (e) => {
-                                                                                e.stopPropagation();
-                                                                                if (page.id !== currentPage.id) {
-                                                                                    setPageId(page.id);
-                                                                                }
-                                                                            }, children: [_jsx("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker", 
-                                                                                    // @ts-expect-error ???
-                                                                                    name: `cypress-page-stepper-${index + 1}`, value: index + 1, children: hasErrors ? (_jsx(Tooltip, { title: "Page has errors", children: _jsx("span", { className: "icon tooltip has-tooltip-top cypress-page-error", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-3", children: "warning" }) }) })) : (_jsx("span", { children: index + 1 })) }), _jsx("div", { className: "step-details ob-step-details", children: _jsx("p", { className: "step-title ob-step-title cypress-desktop-step-title", id: `steps-navigation-step-label-${page.id}`, children: page.label }) })] }, page.id));
-                                                                    }) }) })] })), _jsx("div", { className: clsx('ob-steps-navigation__background', {
-                                                            'is-active': isStepsHeaderActive,
-                                                        }), onClick: toggleStepsNavigation }), _jsxs("div", { className: "steps", children: [_jsx("div", { className: clsx('steps-content', {
-                                                                    'is-single-step': !isShowingMultiplePages,
-                                                                }), children: _jsx(InjectPagesContext.Provider, { value: handlePagesLookupResult, children: _jsx(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey, children: _jsx(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid, children: _jsx(ValidationIconConfigurationContext.Provider, { value: validationIcon, children: _jsx(CaptchaContext.Provider, { value: captchaContextValue, children: _jsx(AttachmentBlobsProvider, { children: _jsx(FormIsReadOnlyContext.Provider, { value: isReadOnly, children: _jsx(FormAudienceContext.Provider, { value: audience, children: _jsx(TaskContext.Provider, { value: taskContextValue, children: _jsx(OnUploadAttachmentContext.Provider, { value: onUploadAttachment, children: visiblePages.map((pageElement) => (_jsx(PageFormElements, { isActive: pageElement.id ===
-                                                                                                                currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
-                                                                                                                isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, sectionState: sectionState }, pageElement.id))) }) }) }) }) }) }) }) }) }) }) }), isShowingMultiplePages && (_jsxs("div", { className: "steps-actions", children: [_jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous", children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_left" }) }), _jsx("span", { children: "Back" })] }) }), _jsx("div", { className: "step-progress-mobile cypress-steps-mobile", children: visiblePages.map((page, index) => (_jsx("div", { className: clsx('step-progress-mobile-dot', {
-                                                                                'is-active': currentPage.id === page.id,
-                                                                                'is-completed': currentPageIndex > index,
-                                                                                'has-background-danger': currentPage.id !== page.id &&
-                                                                                    checkDisplayPageError(page),
-                                                                            }) }, page.id))) }), _jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next", children: [_jsx("span", { children: "Next" }), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_right" }) })] }) })] }))] }), !isReadOnly && audience !== 'APPROVER' && (_jsxs("div", { className: "buttons ob-buttons ob-buttons-submit", children: [onSaveDraft && !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _a === void 0 ? void 0 : _a.label) || 'Save Draft', icon: (_b = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _b === void 0 ? void 0 : _b.icon }) })), _jsx("span", { className: "ob-buttons-submit__spacer" }), !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _c === void 0 ? void 0 : _c.label) || 'Cancel', icon: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _d === void 0 ? void 0 : _d.icon }) })), isLastVisiblePage && (_jsx(Tooltip, { title: submissionConditionallyEnabled
-                                                                    ? ''
-                                                                    : 'Submission disabled: Your inputs have not met the criteria for submission', children: _jsx("span", { children: _jsx("button", { type: "submit", className: clsx('button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form', { 'is-loading': isPreparingToSubmit }, {
-                                                                            'ob-button-submit-is-disabled': submissionConditionallyEnabled,
-                                                                        }), disabled: isPreview ||
-                                                                            disabled ||
-                                                                            isPreparingToSubmit ||
-                                                                            !submissionConditionallyEnabled, children: _jsx(CustomisableButtonInner, { label: isInfoPage
-                                                                                ? 'Done'
-                                                                                : ((_e = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _e === void 0 ? void 0 : _e.label) || 'Submit', icon: (_f = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _f === void 0 ? void 0 : _f.icon }) }) }) }))] }))] }) }), !isReadOnly && !isPreview && audience !== 'APPROVER' && (_jsxs(React.Fragment, { children: [_jsx(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }), _jsx(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_g = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _g === void 0 ? void 0 : _g.label) || 'Save Draft', icon: (_h = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _h === void 0 ? void 0 : _h.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing, children: _jsx(CustomisableButtonInner, { label: ((_j = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _j === void 0 ? void 0 : _j.label) || 'Back', icon: (_k = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _k === void 0 ? void 0 : _k.icon }) }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges, autoFocus: true, children: _jsx(CustomisableButtonInner, { label: ((_l = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _l === void 0 ? void 0 : _l.label) || 'Discard', icon: (_m = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _m === void 0 ? void 0 : _m.icon }) })] }), children: _jsx("p", { children: "You have unsaved changes, are you sure you want discard them?" }) }), _jsx(Modal, { isOpen: promptUploadingAttachments === true, title: "Attachment upload in progress", cardClassName: "cypress-attachments-wait-continue", titleClassName: "cypress-attachments-confirm-wait-title", bodyClassName: "cypress-attachments-confirm-wait-body", actions: _jsxs(_Fragment, { children: [_jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments, children: "Wait" }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments, autoFocus: true, children: "Continue" })] }), children: _jsx("p", { children: "Your attachments are still uploading, do you want to wait for the uploads to complete or continue using the app? If you click continue the attachments will upload in the background. Do not close the app until the upload has been completed." }) }), _jsxs(Modal, { isOpen: promptOfflineSubmissionAttempt, title: "It looks like you're Offline", className: "ob-modal__offline-submission-attempt", cardClassName: "cypress-submission-offline has-text-centered", titleClassName: "cypress-offline-title", bodyClassName: "cypress-offline-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_o = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _o === void 0 ? void 0 : _o.label) || 'Save Draft', icon: (_p = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _p === void 0 ? void 0 : _p.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false), children: "Cancel" }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
-                                                                    setPromptOfflineSubmissionAttempt(false);
-                                                                    handleSubmit(e, false);
-                                                                }, autoFocus: true, children: "Try Again" })] }), children: [_jsxs("p", { className: "ob-modal__offline-submission-attempt-message", children: ["You cannot submit this form while offline, please try again when connectivity is restored.", onSaveDraft && (_jsxs("span", { className: "ob-modal__offline-submission-attempt-save-draft-message", children: [' ', "Alternatively, click the", ' ', _jsx("b", { children: ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft' }), ' ', "button below to come back to this later."] }))] }), _jsx(MaterialIcon, { className: "has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon", children: "wifi_off" })] })] })), shouldUseNavigableValidationErrorsNotification &&
-                                            isShowingValidationErrorsCard && (_jsx(ValidationErrorsCard, { visiblePages: visiblePages, formElementsValidation: formElementsValidation, setPageId: setPageId, currentPage: currentPage, navigationTopOffset: (_r = navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.navigationTopOffset) !== null && _r !== void 0 ? _r : 'CALCULATE', scrollableContainerId: navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.scrollableContainerId, validationErrorToastFocusElementRef: validationErrorToastFocusElementRef }))] }) }) }) }) }) }) }) }));
+    return (_jsx(FormMarkDirtyContextProvider, { markDirty: markFormDirty, children: _jsx(ThemeProvider, { theme: theme, children: _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(ReplaceInjectablesOverridesContext.Provider, { value: replaceInjectablesOverrides, children: _jsx(FormDefinitionContext.Provider, { value: definition, children: _jsx(FormElementOptionsContextProvider, { formIsReadOnly: isReadOnly, children: _jsx(FormElementLookupsContextProvider, { children: _jsx(OneBlinkFormContainerContext.Provider, { value: obFormContainerHTMLElementRef, children: _jsxs("div", { className: clsx('ob-form-container', {
+                                            'is-showing-pages': isShowingMultiplePages,
+                                        }), ref: obFormContainerHTMLElementRef, children: [_jsx("form", { name: "obForm", className: `ob-form cypress-ob-form ob-form__page-${currentPageIndex + 1}`, noValidate: true, onSubmit: (e) => handleSubmit(e, false), children: _jsxs("div", { children: [_jsx("div", { ref: scrollToTopOfPageHTMLElementRef }), isShowingMultiplePages && (_jsxs("div", { className: clsx('ob-steps-navigation', {
+                                                                'is-active': isStepsHeaderActive,
+                                                            }), children: [_jsxs(Clickable, { className: clsx('ob-steps-navigation__header', {
+                                                                        'is-active': isStepsHeaderActive,
+                                                                    }), onClick: toggleStepsNavigation, children: [_jsx("span", { className: "icon is-invisible", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) }), _jsxs("div", { className: "steps-header-active-page", children: [isDisplayingCurrentPageError ? (_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-4", children: "warning" }) })) : (_jsx("span", { className: "steps-header-active-page-icon", children: currentPageNumber })), _jsx("span", { className: "steps-header-active-page-label cypress-tablet-step-title", children: currentPage ? currentPage.label : '' })] }), _jsx("span", { className: "dropdown icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_down" }) })] }), _jsx("div", { role: "navigation", className: clsx('ob-steps-navigation__steps', {
+                                                                        'is-active': isStepsHeaderActive,
+                                                                    }), children: _jsx("div", { className: "steps is-small is-horizontal-tablet cypress-steps", children: visiblePages.map((page, index) => {
+                                                                            const hasErrors = checkDisplayPageError(page);
+                                                                            return (_jsxs(Clickable, { id: `steps-navigation-step-${page.id}`, "aria-label": `${page.label}, page ${index + 1} of ${visiblePages.length}`, "aria-current": currentPage.id === page.id
+                                                                                    ? 'step'
+                                                                                    : undefined, className: clsx('step-item cypress-step-item', {
+                                                                                    'is-active': currentPage.id === page.id,
+                                                                                    'is-completed': currentPageIndex > index,
+                                                                                    'is-error': hasErrors,
+                                                                                }), onClick: (e) => {
+                                                                                    e.stopPropagation();
+                                                                                    if (page.id !== currentPage.id) {
+                                                                                        setPageId(page.id);
+                                                                                    }
+                                                                                }, children: [_jsx("div", { className: "step-marker step-marker-error ob-step-marker cypress-step-marker", 
+                                                                                        // @ts-expect-error ???
+                                                                                        name: `cypress-page-stepper-${index + 1}`, value: index + 1, children: hasErrors ? (_jsx(Tooltip, { title: "Page has errors", children: _jsx("span", { className: "icon tooltip has-tooltip-top cypress-page-error", children: _jsx(MaterialIcon, { className: "has-text-danger is-size-3", children: "warning" }) }) })) : (_jsx("span", { children: index + 1 })) }), _jsx("div", { className: "step-details ob-step-details", children: _jsx("p", { className: "step-title ob-step-title cypress-desktop-step-title", id: `steps-navigation-step-label-${page.id}`, children: page.label }) })] }, page.id));
+                                                                        }) }) })] })), _jsx("div", { className: clsx('ob-steps-navigation__background', {
+                                                                'is-active': isStepsHeaderActive,
+                                                            }), onClick: toggleStepsNavigation }), _jsxs("div", { className: "steps", children: [_jsx("div", { className: clsx('steps-content', {
+                                                                        'is-single-step': !isShowingMultiplePages,
+                                                                    }), children: _jsx(InjectPagesContext.Provider, { value: handlePagesLookupResult, children: _jsx(GoogleMapsApiKeyContext.Provider, { value: googleMapsApiKey, children: _jsx(AbnLookupAuthenticationGuidContext.Provider, { value: abnLookupAuthenticationGuid, children: _jsx(ValidationIconConfigurationContext.Provider, { value: validationIcon, children: _jsx(CaptchaContext.Provider, { value: captchaContextValue, children: _jsx(AttachmentBlobsProvider, { children: _jsx(FormIsReadOnlyContext.Provider, { value: isReadOnly, children: _jsx(EditableFormElementIdsContext.Provider, { value: editableFormElementIds, children: _jsx(FormAudienceContext.Provider, { value: audience, children: _jsx(TaskContext.Provider, { value: taskContextValue, children: _jsx(OnUploadAttachmentContext.Provider, { value: onUploadAttachment, children: visiblePages.map((pageElement) => (_jsx(PageFormElements, { isActive: pageElement.id ===
+                                                                                                                        currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
+                                                                                                                        isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, sectionState: sectionState }, pageElement.id))) }) }) }) }) }) }) }) }) }) }) }) }), isShowingMultiplePages && (_jsxs("div", { className: "steps-actions", children: [_jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous", children: [_jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_left" }) }), _jsx("span", { children: "Back" })] }) }), _jsx("div", { className: "step-progress-mobile cypress-steps-mobile", children: visiblePages.map((page, index) => (_jsx("div", { className: clsx('step-progress-mobile-dot', {
+                                                                                    'is-active': currentPage.id === page.id,
+                                                                                    'is-completed': currentPageIndex > index,
+                                                                                    'has-background-danger': currentPage.id !== page.id &&
+                                                                                        checkDisplayPageError(page),
+                                                                                }) }, page.id))) }), _jsx("div", { className: "steps-action", children: _jsxs("button", { type: "button", onClick: goToNextPage, disabled: isLastVisiblePage, className: "button is-light cypress-pages-next", children: [_jsx("span", { children: "Next" }), _jsx("span", { className: "icon", children: _jsx(MaterialIcon, { children: "keyboard_arrow_right" }) })] }) })] }))] }), !isReadOnly && audience !== 'APPROVER' && (_jsxs("div", { className: "buttons ob-buttons ob-buttons-submit", children: [onSaveDraft && !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-primary ob-button-save-draft cypress-save-draft-form", onClick: () => handleSaveDraft(false), disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_a = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _a === void 0 ? void 0 : _a.label) || 'Save Draft', icon: (_b = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _b === void 0 ? void 0 : _b.icon }) })), _jsx("span", { className: "ob-buttons-submit__spacer" }), !isInfoPage && (_jsx("button", { type: "button", className: "button ob-button is-light ob-button-submit-cancel cypress-cancel-form", onClick: handleCancel, disabled: isPreview || disabled, children: _jsx(CustomisableButtonInner, { label: ((_c = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _c === void 0 ? void 0 : _c.label) || 'Cancel', icon: (_d = buttons === null || buttons === void 0 ? void 0 : buttons.cancel) === null || _d === void 0 ? void 0 : _d.icon }) })), isLastVisiblePage && (_jsx(Tooltip, { title: submissionConditionallyEnabled
+                                                                        ? ''
+                                                                        : 'Submission disabled: Your inputs have not met the criteria for submission', children: _jsx("span", { children: _jsx("button", { type: "submit", className: clsx('button ob-button is-success ob-button-submit cypress-submit-form-button cypress-submit-form', { 'is-loading': isPreparingToSubmit }, {
+                                                                                'ob-button-submit-is-disabled': submissionConditionallyEnabled,
+                                                                            }), disabled: isPreview ||
+                                                                                disabled ||
+                                                                                isPreparingToSubmit ||
+                                                                                !submissionConditionallyEnabled, children: _jsx(CustomisableButtonInner, { label: isInfoPage
+                                                                                    ? 'Done'
+                                                                                    : ((_e = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _e === void 0 ? void 0 : _e.label) || 'Submit', icon: (_f = buttons === null || buttons === void 0 ? void 0 : buttons.submit) === null || _f === void 0 ? void 0 : _f.icon }) }) }) }))] }))] }) }), !isPreview &&
+                                                (editableFormElementIds !== undefined ||
+                                                    !isReadOnly) && (_jsxs(React.Fragment, { children: [_jsx(Prompt, { when: isDirty && !isNavigationAllowed, message: handleBlockedNavigation }), _jsx(Modal, { isOpen: hasConfirmedNavigation === false, title: "Unsaved Changes", cardClassName: "cypress-cancel-confirm", titleClassName: "cypress-cancel-confirm-title", bodyClassName: "cypress-cancel-confirm-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button is-success cypress-cancel-confirm-save-draft", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_g = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _g === void 0 ? void 0 : _g.label) ||
+                                                                            'Save Draft', icon: (_h = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _h === void 0 ? void 0 : _h.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-cancel-confirm-back", onClick: handleKeepGoing, children: _jsx(CustomisableButtonInner, { label: ((_j = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _j === void 0 ? void 0 : _j.label) || 'Back', icon: (_k = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptNo) === null || _k === void 0 ? void 0 : _k.icon }) }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-cancel-confirm-discard", onClick: handleDiscardUnsavedChanges, autoFocus: true, children: _jsx(CustomisableButtonInner, { label: ((_l = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _l === void 0 ? void 0 : _l.label) ||
+                                                                            'Discard', icon: (_m = buttons === null || buttons === void 0 ? void 0 : buttons.cancelPromptYes) === null || _m === void 0 ? void 0 : _m.icon }) })] }), children: _jsx("p", { children: "You have unsaved changes, are you sure you want discard them?" }) })] })), !isReadOnly && !isPreview && audience !== 'APPROVER' && (_jsxs(React.Fragment, { children: [_jsx(Modal, { isOpen: promptUploadingAttachments === true, title: "Attachment upload in progress", cardClassName: "cypress-attachments-wait-continue", titleClassName: "cypress-attachments-confirm-wait-title", bodyClassName: "cypress-attachments-confirm-wait-body", actions: _jsxs(_Fragment, { children: [_jsx("span", { style: { flex: 1 } }), _jsx("button", { type: "button", className: "button ob-button is-light cypress-attachments-confirm-wait", onClick: handleWaitForAttachments, children: "Wait" }), _jsx("button", { type: "button", className: "button ob-button is-primary cypress-attachments-confirm-continue", onClick: handleContinueWithAttachments, autoFocus: true, children: "Continue" })] }), children: _jsx("p", { children: "Your attachments are still uploading, do you want to wait for the uploads to complete or continue using the app? If you click continue the attachments will upload in the background. Do not close the app until the upload has been completed." }) }), _jsxs(Modal, { isOpen: promptOfflineSubmissionAttempt, title: "It looks like you're Offline", className: "ob-modal__offline-submission-attempt", cardClassName: "cypress-submission-offline has-text-centered", titleClassName: "cypress-offline-title", bodyClassName: "cypress-offline-body", actions: _jsxs(_Fragment, { children: [onSaveDraft && (_jsx("button", { type: "button", className: "button ob-button ob-button__offline-submission-attempt-save-draft is-success", onClick: () => handleSaveDraft(false), children: _jsx(CustomisableButtonInner, { label: ((_o = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _o === void 0 ? void 0 : _o.label) ||
+                                                                            'Save Draft', icon: (_p = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _p === void 0 ? void 0 : _p.icon }) })), _jsx("span", { style: { flex: 1 } }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-cancel is-light", onClick: () => setPromptOfflineSubmissionAttempt(false), children: "Cancel" }), _jsx("button", { className: "button ob-button ob-button__offline-submission-attempt-try-again is-primary", onClick: (e) => {
+                                                                        setPromptOfflineSubmissionAttempt(false);
+                                                                        handleSubmit(e, false);
+                                                                    }, autoFocus: true, children: "Try Again" })] }), children: [_jsxs("p", { className: "ob-modal__offline-submission-attempt-message", children: ["You cannot submit this form while offline, please try again when connectivity is restored.", onSaveDraft && (_jsxs("span", { className: "ob-modal__offline-submission-attempt-save-draft-message", children: [' ', "Alternatively, click the", ' ', _jsx("b", { children: ((_q = buttons === null || buttons === void 0 ? void 0 : buttons.saveDraft) === null || _q === void 0 ? void 0 : _q.label) || 'Save Draft' }), ' ', "button below to come back to this later."] }))] }), _jsx(MaterialIcon, { className: "has-text-warning icon-x-large ob-modal__offline-submission-attempt-icon", children: "wifi_off" })] })] })), shouldUseNavigableValidationErrorsNotification &&
+                                                isShowingValidationErrorsCard && (_jsx(ValidationErrorsCard, { visiblePages: visiblePages, formElementsValidation: formElementsValidation, setPageId: setPageId, currentPage: currentPage, navigationTopOffset: (_r = navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.navigationTopOffset) !== null && _r !== void 0 ? _r : 'CALCULATE', scrollableContainerId: navigableValidationErrorsNotificationSettings === null || navigableValidationErrorsNotificationSettings === void 0 ? void 0 : navigableValidationErrorsNotificationSettings.scrollableContainerId, validationErrorToastFocusElementRef: validationErrorToastFocusElementRef }))] }) }) }) }) }) }) }) }) }));
 }
 export default React.memo(OneBlinkFormBase);
 //# sourceMappingURL=OneBlinkFormBase.js.map