@oneblink/apps-react 8.5.1-beta.2 → 8.6.0-beta.10

package/dist/OneBlinkAutoSaveForm.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { OneBlinkFormUncontrolled } from './OneBlinkForm';
-declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
+declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
     /** Pass a unique key for this submission e.g. the `externalId` the parameter */
     autoSaveKey: string;
     /**

package/dist/OneBlinkAutoSaveForm.js

@@ -4,8 +4,8 @@ import Modal from './components/renderer/Modal';
 import OneBlinkFormBase from './OneBlinkFormBase';
 import useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState';
 import { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent';
-function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, ...props }) {
-    const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, } = useFormSubmissionAutoSaveState({
+function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, disabled, onCancel, onSubmit, onSaveDraft, resumeSectionState, ...props }) {
+    const { definition, submission, isLoadingAutoSaveSubmission, isAutoSaveSubmissionAvailable, startNewSubmission, continueAutoSaveSubmission, handleSubmit, handleCancel, handleSaveDraft, setFormSubmission, handleNavigateAway, lastElementUpdated, executedLookups, sectionState, } = useFormSubmissionAutoSaveState({
         form,
         initialSubmission,
         resumeAtElement,
@@ -16,6 +16,7 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
         onSubmit,
         onSaveDraft,
         formIsDisabled: disabled,
+        resumeSectionState,
     });
     if (isLoadingAutoSaveSubmission) {
         return (React.createElement("div", { className: "cypress-loading has-text-centered" },
@@ -32,7 +33,7 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
                     } }, "Start Again"),
                 React.createElement("button", { type: "button", className: "button ob-button is-primary cypress-continue-auto-save-continue-button", onClick: continueAutoSaveSubmission, autoFocus: true }, "Continue")) }, "We found an in progress submission, would you like to pick up where you left off or start again?"));
     }
-    return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups }));
+    return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState }));
 }
 /**
  * This component is a drop in replacement for {@link OneBlinkForm} with the

package/dist/OneBlinkAutoSaveForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAEnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAA;AAE3E,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,GAChB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;KACzB,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;IACH,CAAC;IAED,IAAI,6BAA6B,EAAE,CAAC;QAClC,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,EAAE,CAAA;wBACpB,wBAAwB,CAAC,uBAAuB,EAAE;4BAChD,MAAM,EAAE,UAAU,CAAC,EAAE;4BACrB,QAAQ,EAAE,UAAU,CAAC,IAAI;yBAC1B,CAAC,CAAA;oBACJ,CAAC,kBAGM;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,qBAGF,CACR,uGAKC,CACT,CAAA;IACH,CAAC;IAED,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\nimport { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent'\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  disabled,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n  /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n  autoSaveKey: string\n  /**\n   * By default, auto save data is removed when the user clicks Submit. If you\n   * would like auto save data to persist and clean up the auto save data later,\n   * pass `false`.\n   */\n  removeAutoSaveDataBeforeSubmit?: boolean\n  /**\n   * By default, auto save data is removed when the user clicks Save Draft. If\n   * you would like auto save data to persist and clean up the auto save data\n   * later, pass `false`.\n   */\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n  const {\n    definition,\n    submission,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    setFormSubmission,\n    handleNavigateAway,\n    lastElementUpdated,\n    executedLookups,\n  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\n    formIsDisabled: disabled,\n  })\n\n  if (isLoadingAutoSaveSubmission) {\n    return (\n      <div className=\"cypress-loading has-text-centered\">\n        <OnLoading className=\"has-text-centered\"></OnLoading>\n      </div>\n    )\n  }\n\n  if (isAutoSaveSubmissionAvailable) {\n    return (\n      <Modal\n        isOpen\n        title=\"Continue?\"\n        cardClassName=\"cypress-continue-auto-save\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n              onClick={() => {\n                startNewSubmission()\n                sendGoogleAnalyticsEvent('oneblink_form_abandon', {\n                  formId: definition.id,\n                  formName: definition.name,\n                })\n              }}\n            >\n              Start Again\n            </button>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n              onClick={continueAutoSaveSubmission}\n              autoFocus\n            >\n              Continue\n            </button>\n          </>\n        }\n      >\n        We found an in progress submission, would you like to pick up where you\n        left off or start again?\n      </Modal>\n    )\n  }\n\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      submission={submission}\n      definition={definition}\n      onCancel={handleCancel}\n      onSubmit={handleSubmit}\n      onSaveDraft={handleSaveDraft}\n      setFormSubmission={setFormSubmission}\n      handleNavigateAway={handleNavigateAway}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n    />\n  )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}
+{"version":3,"file":"OneBlinkAutoSaveForm.js","sourceRoot":"","sources":["../src/OneBlinkAutoSaveForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,SAAS,MAAM,iCAAiC,CAAA;AACvD,OAAO,KAAK,MAAM,6BAA6B,CAAA;AAC/C,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,8BAA8B,MAAM,wCAAwC,CAAA;AAEnF,OAAO,EAAE,wBAAwB,EAAE,MAAM,kCAAkC,CAAA;AAE3E,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,kBAAkB,EAClB,GAAG,KAAK,EAgBT;IACC,MAAM,EACJ,UAAU,EACV,UAAU,EACV,2BAA2B,EAC3B,6BAA6B,EAC7B,kBAAkB,EAClB,0BAA0B,EAC1B,YAAY,EACZ,YAAY,EACZ,eAAe,EACf,iBAAiB,EACjB,kBAAkB,EAClB,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;QACX,cAAc,EAAE,QAAQ;QACxB,kBAAkB;KACnB,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE,CAAC;QAChC,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;IACH,CAAC;IAED,IAAI,6BAA6B,EAAE,CAAC;QAClC,OAAO,CACL,oBAAC,KAAK,IACJ,MAAM,QACN,KAAK,EAAC,WAAW,EACjB,aAAa,EAAC,4BAA4B,EAC1C,OAAO,EACL;gBACE,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,yEAAyE,EACnF,OAAO,EAAE,GAAG,EAAE;wBACZ,kBAAkB,EAAE,CAAA;wBACpB,wBAAwB,CAAC,uBAAuB,EAAE;4BAChD,MAAM,EAAE,UAAU,CAAC,EAAE;4BACrB,QAAQ,EAAE,UAAU,CAAC,IAAI;yBAC1B,CAAC,CAAA;oBACJ,CAAC,kBAGM;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,EACnC,SAAS,qBAGF,CACR,uGAKC,CACT,CAAA;IACH,CAAC;IACD,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,QAAQ,EAAE,YAAY,EACtB,QAAQ,EAAE,YAAY,EACtB,WAAW,EAAE,eAAe,EAC5B,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAA;AACH,CAAC;AAED;;;;;;;;;;;GAWG;AACH,eAAe,KAAK,CAAC,IAAI,CAAC,oBAAoB,CAAC,CAAA","sourcesContent":["import * as React from 'react'\nimport OnLoading from './components/renderer/OnLoading'\nimport Modal from './components/renderer/Modal'\nimport OneBlinkFormBase from './OneBlinkFormBase'\nimport useFormSubmissionAutoSaveState from './hooks/useFormSubmissionAutoSaveState'\nimport { OneBlinkFormUncontrolled } from './OneBlinkForm'\nimport { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent'\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  disabled,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  resumeSectionState,\n  ...props\n}: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n  /** Pass a unique key for this submission e.g. the `externalId` the parameter */\n  autoSaveKey: string\n  /**\n   * By default, auto save data is removed when the user clicks Submit. If you\n   * would like auto save data to persist and clean up the auto save data later,\n   * pass `false`.\n   */\n  removeAutoSaveDataBeforeSubmit?: boolean\n  /**\n   * By default, auto save data is removed when the user clicks Save Draft. If\n   * you would like auto save data to persist and clean up the auto save data\n   * later, pass `false`.\n   */\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n}) {\n  const {\n    definition,\n    submission,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    setFormSubmission,\n    handleNavigateAway,\n    lastElementUpdated,\n    executedLookups,\n    sectionState,\n  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\n    formIsDisabled: disabled,\n    resumeSectionState,\n  })\n\n  if (isLoadingAutoSaveSubmission) {\n    return (\n      <div className=\"cypress-loading has-text-centered\">\n        <OnLoading className=\"has-text-centered\"></OnLoading>\n      </div>\n    )\n  }\n\n  if (isAutoSaveSubmissionAvailable) {\n    return (\n      <Modal\n        isOpen\n        title=\"Continue?\"\n        cardClassName=\"cypress-continue-auto-save\"\n        actions={\n          <>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-light cypress-continue-auto-save-start-again-button\"\n              onClick={() => {\n                startNewSubmission()\n                sendGoogleAnalyticsEvent('oneblink_form_abandon', {\n                  formId: definition.id,\n                  formName: definition.name,\n                })\n              }}\n            >\n              Start Again\n            </button>\n            <button\n              type=\"button\"\n              className=\"button ob-button is-primary cypress-continue-auto-save-continue-button\"\n              onClick={continueAutoSaveSubmission}\n              autoFocus\n            >\n              Continue\n            </button>\n          </>\n        }\n      >\n        We found an in progress submission, would you like to pick up where you\n        left off or start again?\n      </Modal>\n    )\n  }\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      submission={submission}\n      definition={definition}\n      onCancel={handleCancel}\n      onSubmit={handleSubmit}\n      onSaveDraft={handleSaveDraft}\n      setFormSubmission={setFormSubmission}\n      handleNavigateAway={handleNavigateAway}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n      sectionState={sectionState}\n    />\n  )\n}\n\n/**\n * This component is a drop in replacement for {@link OneBlinkForm} with the\n * addition of auto save happening periodically to prevent users from losing\n * submission data.\n *\n * If you need auto saving with a controlled form, see the\n * {@link OneBlinkFormControlled} component for a full example.\n *\n * @param props\n * @returns\n * @group Components\n */\nexport default React.memo(OneBlinkAutoSaveForm)\n"]}

package/dist/OneBlinkForm.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
 import { OneBlinkFormBaseProps, OneBlinkFormControlledProps, OneBlinkFormUncontrolledProps } from './OneBlinkFormBase';
+import { SectionState } from './types/form';
 export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
 /**
  * Similar to {@link OneBlinkForm}, however requires props to control the
@@ -341,7 +342,7 @@ declare const OneBlinkFormControlled: React.NamedExoticComponent<import("./OneBl
     handleNavigateAway?: () => unknown;
     isInfoPage?: "YES" | "NO" | "CALCULATED";
     onUploadAttachment?: typeof import("@oneblink/apps/dist/attachments-service").uploadAttachment;
-    captchaType?: import(".").CaptchaType;
+    captchaType?: import("./types/form").CaptchaType;
     shouldUseNavigableValidationErrorsNotification?: boolean;
     navigableValidationErrorsNotificationSettings?: {
         navigationTopOffset?: number;
@@ -583,7 +584,7 @@ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./One
     handleNavigateAway?: () => unknown;
     isInfoPage?: "YES" | "NO" | "CALCULATED";
     onUploadAttachment?: typeof import("@oneblink/apps/dist/attachments-service").uploadAttachment;
-    captchaType?: import(".").CaptchaType;
+    captchaType?: import("./types/form").CaptchaType;
     shouldUseNavigableValidationErrorsNotification?: boolean;
     navigableValidationErrorsNotificationSettings?: {
         navigationTopOffset?: number;
@@ -592,5 +593,6 @@ declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<import("./One
 } & OneBlinkFormUncontrolledProps & {
     /** The element to resume the form at. */
     resumeAtElement?: FormTypes.FormElement;
+    resumeSectionState?: SectionState;
 }>;
 export { OneBlinkFormControlled, OneBlinkFormUncontrolled };

package/dist/OneBlinkForm.js

@@ -550,9 +550,9 @@ const OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(props)
  * @returns
  * @group Components
  */
-const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, ...props }) {
-    const [{ definition, submission, lastElementUpdated, executedLookups }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement);
-    return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups }));
+const OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({ form, initialSubmission, resumeAtElement, resumeSectionState, ...props }) {
+    const [{ definition, submission, lastElementUpdated, executedLookups, sectionState, }, setFormSubmission,] = useFormSubmissionState(form, initialSubmission, resumeAtElement, resumeSectionState);
+    return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, definition: definition, submission: submission, setFormSubmission: setFormSubmission, lastElementUpdated: lastElementUpdated, executedLookups: executedLookups, sectionState: sectionState }));
 });
 export { OneBlinkFormControlled, OneBlinkFormUncontrolled };
 //# sourceMappingURL=OneBlinkForm.js.map

package/dist/OneBlinkForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AAInE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,GAAG,KAAK,EAKP;IACD,MAAM,CACJ,EAAE,UAAU,EAAE,UAAU,EAAE,kBAAkB,EAAE,eAAe,EAAE,EAC/D,iBAAiB,EAClB,GAAG,sBAAsB,CAAC,IAAI,EAAE,iBAAiB,EAAE,eAAe,CAAC,CAAA;IACpE,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,GAChC,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\n\nexport { OneBlinkFormBaseProps, OneBlinkFormControlledProps }\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n *   OneBlinkAppsError,\n *   draftService,\n *   submissionService,\n * } from '@oneblink/apps'\n * import {\n *   IsOfflineContextProvider,\n *   OneBlinkFormControlled,\n *   useIsMounted,\n *   useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n *   id: 1,\n *   name: 'Name of Form',\n *   description: '',\n *   organisationId: 'abc123',\n *   formsAppEnvironmentId: 1,\n *   formsAppIds: [],\n *   elements: [],\n *   isAuthenticated: false,\n *   isMultiPage: false,\n *   isInfoPage: false,\n *   publishStartDate: null,\n *   publishEndDate: null,\n *   postSubmissionAction: 'FORMS_LIBRARY',\n *   submissionEvents: [],\n *   tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n *   data: 1,\n * }\n *\n * function FormContainer() {\n *   const isMounted = useIsMounted()\n *\n *   const [{ definition, submission }, setFormSubmission] =\n *     useFormSubmissionState(form, initialSubmission)\n *\n *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n *     React.useState({\n *       isSavingDraft: false,\n *       saveDraftError: null,\n *     })\n *\n *   const [\n *     { isSubmitting, submitError, formSubmissionResult },\n *     setSubmitState,\n *   ] = React.useState({\n *     formSubmissionResult: null,\n *     isSubmitting: false,\n *     submitError: null,\n *   })\n *\n *   const handleSubmit = React.useCallback(\n *     async (newFormSubmission: FormTypes.NewFormSubmission) => {\n *       const formSubmission: FormSubmission = Object.assign(\n *         {},\n *         newFormSubmission,\n *         {\n *           formsAppId,\n *           jobId: null,\n *           externalId: null,\n *           draftId: null,\n *           preFillFormDataId: null,\n *         },\n *       )\n *\n *       setSubmitState({\n *         formSubmissionResult: null,\n *         submitError: null,\n *         isSubmitting: true,\n *       })\n *\n *       try {\n *         const newFormSubmissionResult = await submissionService.submit({\n *           formSubmission,\n *         })\n *         if (\n *           newFormSubmissionResult.isOffline &&\n *           !newFormSubmissionResult.isInPendingQueue\n *         ) {\n *           throw new OneBlinkAppsError(\n *             'You cannot submit this form while offline, please try again when connectivity is restored.',\n *             {\n *               isOffline: true,\n *             },\n *           )\n *         }\n *\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: newFormSubmissionResult,\n *             isSubmitting: false,\n *             submitError: null,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: null,\n *             isSubmitting: false,\n *             submitError: error,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleSaveDraft = React.useCallback(\n *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n *       const draftSubmission: FormTypes.DraftSubmission = {\n *         ...newDraftSubmission,\n *         formsAppId,\n *       }\n *       setSaveDraftState({\n *         saveDraftError: null,\n *         isSavingDraft: true,\n *       })\n *\n *       try {\n *         await draftService.addDraft(\n *           {\n *             title: form.name,\n *             formId: form.id,\n *             externalId: null,\n *             jobId: null,\n *           },\n *           draftSubmission,\n *         )\n *\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: null,\n *             isSavingDraft: false,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: error,\n *             isSavingDraft: false,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleCancel = React.useCallback(() => {\n *     // handle cancel here...\n *   }, [])\n *\n *   if (isSubmitting) {\n *     // Render submitting animation/loading\n *   }\n *\n *   if (submitError) {\n *     // Render error while submitting\n *   }\n *\n *   if (isSavingDraft) {\n *     // Render saving draft animation/loading\n *   }\n *\n *   if (saveDraftError) {\n *     // Render error while saving draft\n *   }\n *\n *   if (formSubmissionResult) {\n *     // Render submission success\n *   }\n *\n *   return (\n *     <OneBlinkFormControlled\n *       captchaSiteKey={captchaSiteKey}\n *       googleMapsApiKey={googleMapsApiKey}\n *       formsAppId={formsAppId}\n *       definition={definition}\n *       submission={submission}\n *       setFormSubmission={setFormSubmission}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *     />\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <FormContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n *   OneBlinkAutoSaveForm,\n *   OneBlinkFormControlled,\n *   useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n *   form,\n *   initialSubmission,\n *   autoSaveKey,\n *   onCancel,\n *   onSubmit,\n *   onSaveDraft,\n *   ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n *   const {\n *     definition,\n *     submission,\n *     isLoadingAutoSaveSubmission,\n *     isAutoSaveSubmissionAvailable,\n *     startNewSubmission,\n *     continueAutoSaveSubmission,\n *     handleSubmit,\n *     handleCancel,\n *     handleSaveDraft,\n *     setFormSubmission,\n *   } = useFormSubmissionAutoSaveState({\n *     form,\n *     initialSubmission,\n *     autoSaveKey,\n *     onCancel,\n *     onSubmit,\n *     onSaveDraft,\n *   })\n *\n *   // This is just an example of how you could intercept\n *   // the change event when a user enters/selects a value\n *   // on the form.\n *   const customSetFormSubmission = React.useCallback(\n *     (formSubmission) => {\n *       setFormSubmission((currentFormSubmission) => {\n *         const newFormSubmission =\n *           typeof formSubmission === 'function'\n *             ? formSubmission(currentFormSubmission)\n *             : formSubmission\n *\n *         // This is where you can access the updated\n *         // submission data or form definition.\n *         // You could even change the form definition\n *         // programmatically based on user inputs.\n *         console.log(\n *           'A change has occurred to the submission',\n *           newFormSubmission.submission,\n *         )\n *         newFormSubmission.definition.isInfoPage =\n *           !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n *         return newFormSubmission\n *       })\n *     },\n *     [setFormSubmission],\n *   )\n *\n *   if (isLoadingAutoSaveSubmission) {\n *     return <p>Checking for auto save data...</p>\n *   }\n *\n *   if (isAutoSaveSubmissionAvailable) {\n *     return (\n *       <>\n *         <p>Do you want to use the auto save data?</p>\n *         <button onClick={startNewSubmission}>No, start again</button>\n *         <button onClick={continueAutoSaveSubmission}>\n *           Yes, continue\n *         </button>\n *       </>\n *     )\n *   }\n *\n *   return (\n *     <OneBlinkFormControlled\n *       {...props}\n *       submission={submission}\n *       definition={definition}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *       setFormSubmission={customSetFormSubmission}\n *     />\n *   )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n  props: OneBlinkFormBaseProps & OneBlinkFormControlledProps,\n) {\n  return <OneBlinkFormBase {...props} isReadOnly={false} />\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n *   OneBlinkAppsError,\n *   draftService,\n *   submissionService,\n * } from '@oneblink/apps'\n * import {\n *   IsOfflineContextProvider,\n *   OneBlinkForm,\n *   useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n *   id: 1,\n *   name: 'Name of Form',\n *   description: '',\n *   organisationId: 'abc123',\n *   formsAppEnvironmentId: 1,\n *   formsAppIds: [],\n *   elements: [],\n *   isAuthenticated: false,\n *   isMultiPage: false,\n *   isInfoPage: false,\n *   publishStartDate: null,\n *   publishEndDate: null,\n *   postSubmissionAction: 'FORMS_LIBRARY',\n *   submissionEvents: [],\n *   tags: [],\n * }\n *\n * function FormContainer() {\n *   const isMounted = useIsMounted()\n *\n *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n *     React.useState({\n *       isSavingDraft: false,\n *       saveDraftError: null,\n *     })\n *\n *   const [\n *     { isSubmitting, submitError, formSubmissionResult },\n *     setSubmitState,\n *   ] = React.useState({\n *     formSubmissionResult: null,\n *     isSubmitting: false,\n *     submitError: null,\n *   })\n *\n *   const handleSubmit = React.useCallback(\n *     async (newFormSubmission: FormTypes.NewFormSubmission) => {\n *       const formSubmission: FormSubmission = Object.assign(\n *         {},\n *         newFormSubmission,\n *         {\n *           formsAppId,\n *           jobId: null,\n *           externalId: null,\n *           draftId: null,\n *           preFillFormDataId: null,\n *         },\n *       )\n *\n *       setSubmitState({\n *         formSubmissionResult: null,\n *         submitError: null,\n *         isSubmitting: true,\n *       })\n *\n *       try {\n *         const newFormSubmissionResult = await submissionService.submit({\n *           formSubmission,\n *         })\n *         if (\n *           newFormSubmissionResult.isOffline &&\n *           !newFormSubmissionResult.isInPendingQueue\n *         ) {\n *           throw new OneBlinkAppsError(\n *             'You cannot submit this form while offline, please try again when connectivity is restored.',\n *             {\n *               isOffline: true,\n *             },\n *           )\n *         }\n *\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: newFormSubmissionResult,\n *             isSubmitting: false,\n *             submitError: null,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: null,\n *             isSubmitting: false,\n *             submitError: error,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleSaveDraft = React.useCallback(\n *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n *       const draftSubmission: FormTypes.DraftSubmission = {\n *         ...newDraftSubmission,\n *         formsAppId,\n *       }\n *       setSaveDraftState({\n *         saveDraftError: null,\n *         isSavingDraft: true,\n *       })\n *\n *       try {\n *         await draftService.addDraft(\n *           {\n *             title: form.name,\n *             formId: form.id,\n *             externalId: null,\n *             jobId: null,\n *           },\n *           draftSubmission,\n *         )\n *\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: null,\n *             isSavingDraft: false,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: error,\n *             isSavingDraft: false,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleCancel = React.useCallback(() => {\n *     // handle cancel here...\n *   }, [isMounted])\n *\n *   if (isSubmitting) {\n *     // Render submitting animation/loading\n *   }\n *\n *   if (submitError) {\n *     // Render error while submitting\n *   }\n *\n *   if (isSavingDraft) {\n *     // Render saving draft animation/loading\n *   }\n *\n *   if (saveDraftError) {\n *     // Render error while saving draft\n *   }\n *\n *   if (formSubmissionResult) {\n *     // Render submission success\n *   }\n *\n *   return (\n *     <OneBlinkForm\n *       captchaSiteKey={captchaSiteKey}\n *       googleMapsApiKey={googleMapsApiKey}\n *       formsAppId={formsAppId}\n *       form={form}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *       attachmentRetentionInDays={1}\n *     />\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <FormContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  ...props\n}: OneBlinkFormBaseProps &\n  OneBlinkFormUncontrolledProps & {\n    /** The element to resume the form at. */\n    resumeAtElement?: FormTypes.FormElement\n  }) {\n  const [\n    { definition, submission, lastElementUpdated, executedLookups },\n    setFormSubmission,\n  ] = useFormSubmissionState(form, initialSubmission, resumeAtElement)\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      definition={definition}\n      submission={submission}\n      setFormSubmission={setFormSubmission}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n    />\n  )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}
+{"version":3,"file":"OneBlinkForm.js","sourceRoot":"","sources":["../src/OneBlinkForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,gBAIN,MAAM,oBAAoB,CAAA;AAC3B,OAAO,sBAAsB,MAAM,gCAAgC,CAAA;AAKnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoUG;AACH,MAAM,sBAAsB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,sBAAsB,CACvE,KAA0D;IAE1D,OAAO,oBAAC,gBAAgB,OAAK,KAAK,EAAE,UAAU,EAAE,KAAK,GAAI,CAAA;AAC3D,CAAC,CAAC,CAAA;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4NG;AACH,MAAM,wBAAwB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,wBAAwB,CAAC,EAC5E,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,EAClB,GAAG,KAAK,EAMP;IACD,MAAM,CACJ,EACE,UAAU,EACV,UAAU,EACV,kBAAkB,EAClB,eAAe,EACf,YAAY,GACb,EACD,iBAAiB,EAClB,GAAG,sBAAsB,CACxB,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,kBAAkB,CACnB,CAAA;IACD,OAAO,CACL,oBAAC,gBAAgB,OACX,KAAK,EACT,UAAU,EAAE,KAAK,EACjB,UAAU,EAAE,UAAU,EACtB,UAAU,EAAE,UAAU,EACtB,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB,EACtC,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,GAC1B,CACH,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,OAAO,EAAE,sBAAsB,EAAE,wBAAwB,EAAE,CAAA","sourcesContent":["import * as React from 'react'\nimport { FormTypes } from '@oneblink/types'\nimport OneBlinkFormBase, {\n  OneBlinkFormBaseProps,\n  OneBlinkFormControlledProps,\n  OneBlinkFormUncontrolledProps,\n} from './OneBlinkFormBase'\nimport useFormSubmissionState from './hooks/useFormSubmissionState'\nimport { SectionState } from './types/form'\n\nexport { OneBlinkFormBaseProps, OneBlinkFormControlledProps }\n\n/**\n * Similar to {@link OneBlinkForm}, however requires props to control the\n * `definition` and `submission` values.\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n *   OneBlinkAppsError,\n *   draftService,\n *   submissionService,\n * } from '@oneblink/apps'\n * import {\n *   IsOfflineContextProvider,\n *   OneBlinkFormControlled,\n *   useIsMounted,\n *   useFormSubmissionState,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n *   id: 1,\n *   name: 'Name of Form',\n *   description: '',\n *   organisationId: 'abc123',\n *   formsAppEnvironmentId: 1,\n *   formsAppIds: [],\n *   elements: [],\n *   isAuthenticated: false,\n *   isMultiPage: false,\n *   isInfoPage: false,\n *   publishStartDate: null,\n *   publishEndDate: null,\n *   postSubmissionAction: 'FORMS_LIBRARY',\n *   submissionEvents: [],\n *   tags: [],\n * }\n * const initialSubmission: Record<string, unknown> = {\n *   data: 1,\n * }\n *\n * function FormContainer() {\n *   const isMounted = useIsMounted()\n *\n *   const [{ definition, submission }, setFormSubmission] =\n *     useFormSubmissionState(form, initialSubmission)\n *\n *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n *     React.useState({\n *       isSavingDraft: false,\n *       saveDraftError: null,\n *     })\n *\n *   const [\n *     { isSubmitting, submitError, formSubmissionResult },\n *     setSubmitState,\n *   ] = React.useState({\n *     formSubmissionResult: null,\n *     isSubmitting: false,\n *     submitError: null,\n *   })\n *\n *   const handleSubmit = React.useCallback(\n *     async (newFormSubmission: FormTypes.NewFormSubmission) => {\n *       const formSubmission: FormSubmission = Object.assign(\n *         {},\n *         newFormSubmission,\n *         {\n *           formsAppId,\n *           jobId: null,\n *           externalId: null,\n *           draftId: null,\n *           preFillFormDataId: null,\n *         },\n *       )\n *\n *       setSubmitState({\n *         formSubmissionResult: null,\n *         submitError: null,\n *         isSubmitting: true,\n *       })\n *\n *       try {\n *         const newFormSubmissionResult = await submissionService.submit({\n *           formSubmission,\n *         })\n *         if (\n *           newFormSubmissionResult.isOffline &&\n *           !newFormSubmissionResult.isInPendingQueue\n *         ) {\n *           throw new OneBlinkAppsError(\n *             'You cannot submit this form while offline, please try again when connectivity is restored.',\n *             {\n *               isOffline: true,\n *             },\n *           )\n *         }\n *\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: newFormSubmissionResult,\n *             isSubmitting: false,\n *             submitError: null,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: null,\n *             isSubmitting: false,\n *             submitError: error,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleSaveDraft = React.useCallback(\n *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n *       const draftSubmission: FormTypes.DraftSubmission = {\n *         ...newDraftSubmission,\n *         formsAppId,\n *       }\n *       setSaveDraftState({\n *         saveDraftError: null,\n *         isSavingDraft: true,\n *       })\n *\n *       try {\n *         await draftService.addDraft(\n *           {\n *             title: form.name,\n *             formId: form.id,\n *             externalId: null,\n *             jobId: null,\n *           },\n *           draftSubmission,\n *         )\n *\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: null,\n *             isSavingDraft: false,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: error,\n *             isSavingDraft: false,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleCancel = React.useCallback(() => {\n *     // handle cancel here...\n *   }, [])\n *\n *   if (isSubmitting) {\n *     // Render submitting animation/loading\n *   }\n *\n *   if (submitError) {\n *     // Render error while submitting\n *   }\n *\n *   if (isSavingDraft) {\n *     // Render saving draft animation/loading\n *   }\n *\n *   if (saveDraftError) {\n *     // Render error while saving draft\n *   }\n *\n *   if (formSubmissionResult) {\n *     // Render submission success\n *   }\n *\n *   return (\n *     <OneBlinkFormControlled\n *       captchaSiteKey={captchaSiteKey}\n *       googleMapsApiKey={googleMapsApiKey}\n *       formsAppId={formsAppId}\n *       definition={definition}\n *       submission={submission}\n *       setFormSubmission={setFormSubmission}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *     />\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <FormContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * #### Implementing Controlled Auto Save\n *\n * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a\n * controlled form (i.e. having access to `submission` and `definition` values).\n * To implement a controlled version of the `<OneBlinkAutoSaveForm />`\n * component, use the example component below.\n *\n * ```tsx\n * import * as React from 'react'\n * import {\n *   OneBlinkAutoSaveForm,\n *   OneBlinkFormControlled,\n *   useFormSubmissionAutoSaveState,\n * } from '@oneblink/apps-react'\n *\n * function OneBlinkAutoSaveFormControlled({\n *   form,\n *   initialSubmission,\n *   autoSaveKey,\n *   onCancel,\n *   onSubmit,\n *   onSaveDraft,\n *   ...props\n * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {\n *   const {\n *     definition,\n *     submission,\n *     isLoadingAutoSaveSubmission,\n *     isAutoSaveSubmissionAvailable,\n *     startNewSubmission,\n *     continueAutoSaveSubmission,\n *     handleSubmit,\n *     handleCancel,\n *     handleSaveDraft,\n *     setFormSubmission,\n *   } = useFormSubmissionAutoSaveState({\n *     form,\n *     initialSubmission,\n *     autoSaveKey,\n *     onCancel,\n *     onSubmit,\n *     onSaveDraft,\n *   })\n *\n *   // This is just an example of how you could intercept\n *   // the change event when a user enters/selects a value\n *   // on the form.\n *   const customSetFormSubmission = React.useCallback(\n *     (formSubmission) => {\n *       setFormSubmission((currentFormSubmission) => {\n *         const newFormSubmission =\n *           typeof formSubmission === 'function'\n *             ? formSubmission(currentFormSubmission)\n *             : formSubmission\n *\n *         // This is where you can access the updated\n *         // submission data or form definition.\n *         // You could even change the form definition\n *         // programmatically based on user inputs.\n *         console.log(\n *           'A change has occurred to the submission',\n *           newFormSubmission.submission,\n *         )\n *         newFormSubmission.definition.isInfoPage =\n *           !newFormSubmission.submission.doesTheUserNeedToSubmit\n *\n *         return newFormSubmission\n *       })\n *     },\n *     [setFormSubmission],\n *   )\n *\n *   if (isLoadingAutoSaveSubmission) {\n *     return <p>Checking for auto save data...</p>\n *   }\n *\n *   if (isAutoSaveSubmissionAvailable) {\n *     return (\n *       <>\n *         <p>Do you want to use the auto save data?</p>\n *         <button onClick={startNewSubmission}>No, start again</button>\n *         <button onClick={continueAutoSaveSubmission}>\n *           Yes, continue\n *         </button>\n *       </>\n *     )\n *   }\n *\n *   return (\n *     <OneBlinkFormControlled\n *       {...props}\n *       submission={submission}\n *       definition={definition}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *       setFormSubmission={customSetFormSubmission}\n *     />\n *   )\n * }\n *\n * export default React.memo(OneBlinkAutoSaveFormControlled)\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormControlled = React.memo(function OneBlinkFormControlled(\n  props: OneBlinkFormBaseProps & OneBlinkFormControlledProps,\n) {\n  return <OneBlinkFormBase {...props} isReadOnly={false} />\n})\n\n/**\n * Component for rendering a OneBlink Form. This component will render the\n * submit, cancel and save draft buttons but it is up to the developer to\n * implement what happens when those buttons are clicked.\n *\n * It is also recommended to import the `css` from this library as well.\n *\n * ```js\n * import { OneBlinkForm } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n * ```\n *\n * #### Example\n *\n * ```tsx\n * import React from 'react'\n * import ReactDOM from 'react-dom'\n * import { FormTypes } from '@oneblink/types'\n * import {\n *   OneBlinkAppsError,\n *   draftService,\n *   submissionService,\n * } from '@oneblink/apps'\n * import {\n *   IsOfflineContextProvider,\n *   OneBlinkForm,\n *   useIsMounted,\n * } from '@oneblink/apps-react'\n * import '@oneblink/apps-react/dist/styles.css'\n *\n * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'\n * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'\n * const formsAppId = 1\n * const form: FormTypes.Form = {\n *   id: 1,\n *   name: 'Name of Form',\n *   description: '',\n *   organisationId: 'abc123',\n *   formsAppEnvironmentId: 1,\n *   formsAppIds: [],\n *   elements: [],\n *   isAuthenticated: false,\n *   isMultiPage: false,\n *   isInfoPage: false,\n *   publishStartDate: null,\n *   publishEndDate: null,\n *   postSubmissionAction: 'FORMS_LIBRARY',\n *   submissionEvents: [],\n *   tags: [],\n * }\n *\n * function FormContainer() {\n *   const isMounted = useIsMounted()\n *\n *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =\n *     React.useState({\n *       isSavingDraft: false,\n *       saveDraftError: null,\n *     })\n *\n *   const [\n *     { isSubmitting, submitError, formSubmissionResult },\n *     setSubmitState,\n *   ] = React.useState({\n *     formSubmissionResult: null,\n *     isSubmitting: false,\n *     submitError: null,\n *   })\n *\n *   const handleSubmit = React.useCallback(\n *     async (newFormSubmission: FormTypes.NewFormSubmission) => {\n *       const formSubmission: FormSubmission = Object.assign(\n *         {},\n *         newFormSubmission,\n *         {\n *           formsAppId,\n *           jobId: null,\n *           externalId: null,\n *           draftId: null,\n *           preFillFormDataId: null,\n *         },\n *       )\n *\n *       setSubmitState({\n *         formSubmissionResult: null,\n *         submitError: null,\n *         isSubmitting: true,\n *       })\n *\n *       try {\n *         const newFormSubmissionResult = await submissionService.submit({\n *           formSubmission,\n *         })\n *         if (\n *           newFormSubmissionResult.isOffline &&\n *           !newFormSubmissionResult.isInPendingQueue\n *         ) {\n *           throw new OneBlinkAppsError(\n *             'You cannot submit this form while offline, please try again when connectivity is restored.',\n *             {\n *               isOffline: true,\n *             },\n *           )\n *         }\n *\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: newFormSubmissionResult,\n *             isSubmitting: false,\n *             submitError: null,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSubmitState({\n *             formSubmissionResult: null,\n *             isSubmitting: false,\n *             submitError: error,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleSaveDraft = React.useCallback(\n *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {\n *       const draftSubmission: FormTypes.DraftSubmission = {\n *         ...newDraftSubmission,\n *         formsAppId,\n *       }\n *       setSaveDraftState({\n *         saveDraftError: null,\n *         isSavingDraft: true,\n *       })\n *\n *       try {\n *         await draftService.addDraft(\n *           {\n *             title: form.name,\n *             formId: form.id,\n *             externalId: null,\n *             jobId: null,\n *           },\n *           draftSubmission,\n *         )\n *\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: null,\n *             isSavingDraft: false,\n *           })\n *         }\n *       } catch (error) {\n *         if (isMounted.current) {\n *           setSaveDraftState({\n *             saveDraftError: error,\n *             isSavingDraft: false,\n *           })\n *         }\n *       }\n *     },\n *     [isMounted],\n *   )\n *\n *   const handleCancel = React.useCallback(() => {\n *     // handle cancel here...\n *   }, [isMounted])\n *\n *   if (isSubmitting) {\n *     // Render submitting animation/loading\n *   }\n *\n *   if (submitError) {\n *     // Render error while submitting\n *   }\n *\n *   if (isSavingDraft) {\n *     // Render saving draft animation/loading\n *   }\n *\n *   if (saveDraftError) {\n *     // Render error while saving draft\n *   }\n *\n *   if (formSubmissionResult) {\n *     // Render submission success\n *   }\n *\n *   return (\n *     <OneBlinkForm\n *       captchaSiteKey={captchaSiteKey}\n *       googleMapsApiKey={googleMapsApiKey}\n *       formsAppId={formsAppId}\n *       form={form}\n *       onCancel={handleCancel}\n *       onSubmit={handleSubmit}\n *       onSaveDraft={handleSaveDraft}\n *       attachmentRetentionInDays={1}\n *     />\n *   )\n * }\n *\n * function App() {\n *   return (\n *     <IsOfflineContextProvider>\n *       <FormContainer />\n *     </IsOfflineContextProvider>\n *   )\n * }\n *\n * const root = document.getElementById('root')\n * if (root) {\n *   ReactDOM.render(<App />, root)\n * }\n * ```\n *\n * @param props\n * @returns\n * @group Components\n */\nconst OneBlinkFormUncontrolled = React.memo(function OneBlinkFormUncontrolled({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  resumeSectionState,\n  ...props\n}: OneBlinkFormBaseProps &\n  OneBlinkFormUncontrolledProps & {\n    /** The element to resume the form at. */\n    resumeAtElement?: FormTypes.FormElement\n    resumeSectionState?: SectionState\n  }) {\n  const [\n    {\n      definition,\n      submission,\n      lastElementUpdated,\n      executedLookups,\n      sectionState,\n    },\n    setFormSubmission,\n  ] = useFormSubmissionState(\n    form,\n    initialSubmission,\n    resumeAtElement,\n    resumeSectionState,\n  )\n  return (\n    <OneBlinkFormBase\n      {...props}\n      isReadOnly={false}\n      definition={definition}\n      submission={submission}\n      setFormSubmission={setFormSubmission}\n      lastElementUpdated={lastElementUpdated}\n      executedLookups={executedLookups}\n      sectionState={sectionState}\n    />\n  )\n})\n\nexport { OneBlinkFormControlled, OneBlinkFormUncontrolled }\n"]}

package/dist/OneBlinkFormBase.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { submissionService, attachmentsService } from '@oneblink/apps';
 import { FormTypes, FormsAppsTypes, ScheduledTasksTypes, SubmissionTypes } from '@oneblink/types';
 import { ReplaceInjectablesOverrides } from './hooks/useReplaceInjectablesOverrides';
-import { CaptchaType, ExecutedLookups, SetFormSubmission } from './types/form';
+import { CaptchaType, ExecutedLookups, SetFormSubmission, SectionState } from './types/form';
 export type OneBlinkReadOnlyFormProps = {
     /**
      * A [Google Maps API
@@ -133,10 +133,11 @@ export type OneBlinkFormControlledProps = {
     setFormSubmission: SetFormSubmission;
     lastElementUpdated?: FormTypes.FormElement;
     executedLookups: ExecutedLookups;
+    sectionState?: SectionState;
 };
 type Props = OneBlinkFormBaseProps & OneBlinkFormControlledProps & {
     isReadOnly: boolean;
 };
-declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, }: Props): React.JSX.Element;
+declare function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, }: Props): React.JSX.Element;
 declare const _default: React.MemoExoticComponent<typeof OneBlinkFormBase>;
 export default _default;

package/dist/OneBlinkFormBase.js

@@ -40,7 +40,7 @@ import MaterialIcon from './components/MaterialIcon';
 import ValidationErrorsCard from './components/ValidationErrorsCard';
 import { sendGoogleAnalyticsEvent } from './utils/sendGoogleAnalyticsEvent';
 import { useUserProfileForInjectablesOutsideContext } from './hooks/useUserProfileForInjectables';
-function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, }) {
+function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captchaSiteKey, definition, disabled, isPreview, submission, isReadOnly, onCancel, onSubmit, onSaveDraft, setFormSubmission, buttons, primaryColour, attachmentRetentionInDays, isPendingQueueEnabled, handleNavigateAway, isInfoPage: isInfoPageProp, lastElementUpdated, executedLookups, task, taskGroup, taskGroupInstance, onUploadAttachment, captchaType, shouldUseNavigableValidationErrorsNotification = true, navigableValidationErrorsNotificationSettings, replaceInjectablesOverrides, sectionState, }) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
     const isOffline = useIsOffline();
     const { isUsingFormsKey } = useAuth();
@@ -496,6 +496,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                 submission,
                 backgroundUpload: continueWhilstAttachmentsAreUploading,
                 lastElementUpdated,
+                sectionState,
             });
         }
     }, [
@@ -507,6 +508,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         onSaveDraft,
         checkBsbAreValidating,
         lastElementUpdated,
+        sectionState,
     ]);
     const handleContinueWithAttachments = React.useCallback((e) => {
         setPromptUploadingAttachments(false);
@@ -538,7 +540,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
     //
     //
     // #region Submission/Definition Changes
-    const handleChange = React.useCallback((element, { value, executedLookups }) => {
+    const handleChange = React.useCallback((element, { value, executedLookups, deleteSection, sectionState }) => {
         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
@@ -546,16 +548,49 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         (disabled &&
             element.type !== 'summary' &&
             element.type !== 'calculation') ||
-            element.type === 'page' ||
-            element.type === 'section') {
+            element.type === 'page') {
             return;
         }
         setUnsavedChangesState((current) => ({
             ...current,
             isDirty: true,
         }));
+        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',
+                        },
+                    ];
+                }
+                return {
+                    ...currentFormSubmission,
+                    sectionState: newSectionState,
+                };
+            });
+        }
         // dont update the last element updated for elements the user cannot set the value of
-        if (element.type === 'summary' || element.type === 'calculation') {
+        else if (element.type === 'summary' || element.type === 'calculation') {
             setFormSubmission((currentFormSubmission) => ({
                 ...currentFormSubmission,
                 submission: {
@@ -584,6 +619,9 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                             ? executedLookups((_a = currentFormSubmission.executedLookups) === null || _a === void 0 ? void 0 : _a[element.name])
                             : executedLookups,
                     },
+                    sectionState: typeof sectionState === 'function'
+                        ? sectionState(currentFormSubmission.sectionState)
+                        : sectionState,
                 };
             });
         }
@@ -615,6 +653,14 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                     });
                 }
             }
+            if (sectionState) {
+                {
+                    setFormSubmission((currentFormSubmission) => ({
+                        ...currentFormSubmission,
+                        sectionState,
+                    }));
+                }
+            }
             setHasResumed(true);
         }
     }, [
@@ -623,6 +669,8 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
         lastElementUpdatedPage,
         lastElementUpdatedExistsOnForm,
         setPageId,
+        sectionState,
+        setFormSubmission,
     ]);
     if (conditionalLogicError) {
         return (React.createElement(React.Fragment, null,
@@ -698,7 +746,7 @@ function OneBlinkFormBase({ googleMapsApiKey, abnLookupAuthenticationGuid, captc
                                                                             React.createElement(TaskContext.Provider, { value: taskContextValue },
                                                                                 React.createElement(OnUploadAttachmentContext.Provider, { value: onUploadAttachment }, visiblePages.map((pageElement) => (React.createElement(PageFormElements, { key: pageElement.id, isActive: pageElement.id ===
                                                                                         currentPage.id, formId: definition.id, formElementsConditionallyShown: formElementsConditionallyShown, formElementsValidation: formElementsValidation, displayValidationMessages: hasAttemptedSubmit ||
-                                                                                        isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission })))))))))))),
+                                                                                        isDisplayingCurrentPageError, pageElement: pageElement, onChange: handleChange, model: submission, setFormSubmission: setFormSubmission, sectionState: sectionState })))))))))))),
                                                 isShowingMultiplePages && (React.createElement("div", { className: "steps-actions" },
                                                     React.createElement("div", { className: "steps-action" },
                                                         React.createElement("button", { type: "button", onClick: goToPreviousPage, disabled: isFirstVisiblePage, className: "button is-light cypress-pages-previous" },