@oneblink/apps-react 13.0.0-beta.9 → 13.0.0

package/dist/OneBlinkFormBase.js

@@ -46,8 +46,9 @@ import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfi
 import { ValidationIconConfigurationContext } from './hooks/useValidationIconConfiguration';
 import { Clickable } from './components/Clickable';
 import { EditableFormElementIdsContext } from './hooks/useEditableFormElementIds';
+import { expandEditableFormElementIds } from './utils/read-only-form-elements';
 import { useRegisterFormSubmissionAttempt } from './hooks/useFormSubmissionAttempt';
-import { useRegisterFormIsDirty, FormMarkDirtyContextProvider, } from './hooks/useFormIsDirty';
+import { useRegisterFormIsDirty, useRegisterAllowFormNavigation, FormMarkDirtyContextProvider, } from './hooks/useFormIsDirty';
 var AttachmentUploadStatus;
 (function (AttachmentUploadStatus) {
     AttachmentUploadStatus["ATTACHMENTS_UPLOADED"] = "ATTACHMENTS_UPLOADED";
@@ -160,6 +161,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     const pagesWithDynamicElements = React.useMemo(() => {
         return injectDynamicElements(pages);
     }, [pages]);
+    const expandedEditableFormElementIds = React.useMemo(() => expandEditableFormElementIds(editableFormElementIds, pagesWithDynamicElements), [editableFormElementIds, pagesWithDynamicElements]);
     // #endregion
     //
     //
@@ -287,10 +289,10 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     // #region Validation
     const validationErrorToastFocusElementRef = React.useRef(null);
     const [isShowingValidationErrorsCard, setIsShowingValidationErrorsCard] = React.useState(false);
-    const { validate } = useFormValidation(pages);
+    const { validate } = useFormValidation(pages, definition.approvalSteps);
     const recaptchaType = React.useMemo(() => captchaType !== null && captchaType !== void 0 ? captchaType : 'CHECKBOX', [captchaType]);
-    const formElementsValidation = React.useMemo(() => !isReadOnly || editableFormElementIds !== undefined
-        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience, editableFormElementIds)
+    const formElementsValidation = React.useMemo(() => !isReadOnly || expandedEditableFormElementIds !== undefined
+        ? validate(submission, formElementsConditionallyShown, executedLookups !== null && executedLookups !== void 0 ? executedLookups : {}, recaptchaType, isOffline, audience, expandedEditableFormElementIds)
         : undefined, [
         isReadOnly,
         validate,
@@ -300,7 +302,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         recaptchaType,
         isOffline,
         audience,
-        editableFormElementIds,
+        expandedEditableFormElementIds,
     ]);
     React.useEffect(() => {
         if (!formElementsValidation) {
@@ -581,6 +583,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     }, [hostAttemptPhase, hostAttemptResolver]);
     useRegisterFormSubmissionAttempt(editableFormElementIds === undefined ? undefined : attemptFormSubmission);
     useRegisterFormIsDirty(definition.id, isDirty);
+    useRegisterAllowFormNavigation(definition.id, allowNavigationAfterHostAction);
     const handleSubmit = React.useCallback(async (event, continueWhilstAttachmentsAreUploading) => {
         event.preventDefault();
         // Approvers are not shown a submit button, so reaching here means the
@@ -749,10 +752,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         else {
             handleSubmit(e, false);
         }
-    }, [
-        handleSubmit,
-        hostAttemptPhase,
-    ]);
+    }, [handleSubmit, hostAttemptPhase]);
     // #endregion
     //
     //
@@ -922,7 +922,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                                                                 '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 ===
+                                                                    }), 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: expandedEditableFormElementIds, 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,