@oneblink/apps-react 4.1.0-beta.7 → 4.1.0-beta.8

package/README.md

@@ -2,12 +2,6 @@
 
 Helpers for OneBlink apps in ReactJS.
 
-## Installation
+## Documentation
 
-```sh
-npm install react@17 react-dom@17 @oneblink/apps-react --save
-```
-
-## Usage
-
-- [Usage Documentation](./docs/README.md)
+See the [Documentation](https://oneblink.github.io/apps-react/) for more details.

package/dist/OneBlinkAutoSaveForm.d.ts

@@ -1,12 +1,32 @@
 import * as React from 'react';
 import { OneBlinkFormUncontrolled } from './OneBlinkForm';
-import { FormTypes } from '@oneblink/types';
-type Props = React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
+declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, onCancel, onSubmit, onSaveDraft, ...props }: React.ComponentProps<typeof OneBlinkFormUncontrolled> & {
+    /** Pass a unique key for this submission e.g. the `externalId` the parameter */
     autoSaveKey: string;
+    /**
+     * By default, auto save data is removed when the user clicks Submit. If you
+     * would like auto save data to persist and clean up the auto save data later,
+     * pass `false`.
+     */
     removeAutoSaveDataBeforeSubmit?: boolean;
+    /**
+     * By default, auto save data is removed when the user clicks Save Draft. If
+     * you would like auto save data to persist and clean up the auto save data
+     * later, pass `false`.
+     */
     removeAutoSaveDataBeforeSaveDraft?: boolean;
-    resumeAtElement?: FormTypes.FormElement;
-};
-declare function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSaveKey, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, onCancel, onSubmit, onSaveDraft, ...props }: Props): JSX.Element;
+}): JSX.Element;
+/**
+ * This component is a drop in replacement for {@link OneBlinkForm} with the
+ * addition of auto save happening periodically to prevent users from losing
+ * submission data.
+ *
+ * If you need auto saving with a controlled form, see the
+ * {@link OneBlinkFormControlled} component for a full example.
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
 declare const _default: React.MemoExoticComponent<typeof OneBlinkAutoSaveForm>;
 export default _default;

package/dist/OneBlinkAutoSaveForm.js

@@ -26,5 +26,17 @@ function OneBlinkAutoSaveForm({ form, initialSubmission, resumeAtElement, autoSa
     }
     return (React.createElement(OneBlinkFormBase, { ...props, isReadOnly: false, submission: submission, definition: definition, onCancel: handleCancel, onSubmit: handleSubmit, onSaveDraft: handleSaveDraft, setFormSubmission: setFormSubmission, handleNavigateAway: handleNavigateAway, lastElementUpdated: lastElementUpdated }));
 }
+/**
+ * This component is a drop in replacement for {@link OneBlinkForm} with the
+ * addition of auto save happening periodically to prevent users from losing
+ * submission data.
+ *
+ * If you need auto saving with a controlled form, see the
+ * {@link OneBlinkFormControlled} component for a full example.
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
 export default React.memo(OneBlinkAutoSaveForm);
 //# sourceMappingURL=OneBlinkAutoSaveForm.js.map

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;AAWnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,GAAG,KAAK,EACF;IACN,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,GACnB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;KACF;IAED,IAAI,6BAA6B,EAAE;QACjC,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,kBAAkB,kBAGpB;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,eAG5B,CACR,uGAKC,CACT,CAAA;KACF;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,GACtC,CACH,CAAA;AACH,CAAC;AAED,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 { FormTypes } from '@oneblink/types'\n\ntype Props = React.ComponentProps<typeof OneBlinkFormUncontrolled> & {\n  autoSaveKey: string\n  removeAutoSaveDataBeforeSubmit?: boolean\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n  resumeAtElement?: FormTypes.FormElement\n}\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n  ...props\n}: Props) {\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  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\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={startNewSubmission}\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            >\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    />\n  )\n}\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;AAGnF,SAAS,oBAAoB,CAAC,EAC5B,IAAI,EACJ,iBAAiB,EACjB,eAAe,EACf,WAAW,EACX,8BAA8B,EAC9B,iCAAiC,EACjC,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,GACnB,GAAG,8BAA8B,CAAC;QACjC,IAAI;QACJ,iBAAiB;QACjB,eAAe;QACf,WAAW;QACX,8BAA8B;QAC9B,iCAAiC;QACjC,QAAQ;QACR,QAAQ;QACR,WAAW;KACZ,CAAC,CAAA;IAEF,IAAI,2BAA2B,EAAE;QAC/B,OAAO,CACL,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,SAAS,IAAC,SAAS,EAAC,mBAAmB,GAAa,CACjD,CACP,CAAA;KACF;IAED,IAAI,6BAA6B,EAAE;QACjC,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,kBAAkB,kBAGpB;gBACT,gCACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,wEAAwE,EAClF,OAAO,EAAE,0BAA0B,eAG5B,CACR,uGAKC,CACT,CAAA;KACF;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,GACtC,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'\n\nfunction OneBlinkAutoSaveForm({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  autoSaveKey,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\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  } = useFormSubmissionAutoSaveState({\n    form,\n    initialSubmission,\n    resumeAtElement,\n    autoSaveKey,\n    removeAutoSaveDataBeforeSubmit,\n    removeAutoSaveDataBeforeSaveDraft,\n    onCancel,\n    onSubmit,\n    onSaveDraft,\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={startNewSubmission}\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            >\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    />\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,12 +1,562 @@
 import * as React from 'react';
 import { FormTypes } from '@oneblink/types';
-import { BaseProps, ControlledProps } from './OneBlinkFormBase';
-import { FormSubmissionModel } from './types/form';
-declare const OneBlinkFormControlled: React.NamedExoticComponent<BaseProps & ControlledProps>;
-type UncontrolledProps = {
+import { OneBlinkFormBaseProps, OneBlinkFormControlledProps } from './OneBlinkFormBase';
+export { OneBlinkFormBaseProps, OneBlinkFormControlledProps };
+/**
+ * Similar to {@link OneBlinkForm}, however requires props to control the
+ * `definition` and `submission` values.
+ *
+ * #### Example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import ReactDOM from 'react-dom'
+ * import { FormTypes } from '@oneblink/types'
+ * import {
+ *   OneBlinkAppsError,
+ *   draftService,
+ *   submissionService,
+ * } from '@oneblink/apps'
+ * import {
+ *   IsOfflineContextProvider,
+ *   OneBlinkFormControlled,
+ *   useIsMounted,
+ *   useFormSubmissionState,
+ * } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ *
+ * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'
+ * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'
+ * const formsAppId = 1
+ * const form: FormTypes.Form = {
+ *   id: 1,
+ *   name: 'Name of Form',
+ *   description: '',
+ *   organisationId: 'abc123',
+ *   formsAppEnvironmentId: 1,
+ *   formsAppIds: [],
+ *   elements: [],
+ *   isAuthenticated: false,
+ *   isMultiPage: false,
+ *   isInfoPage: false,
+ *   publishStartDate: null,
+ *   publishEndDate: null,
+ *   postSubmissionAction: 'FORMS_LIBRARY',
+ *   submissionEvents: [],
+ *   tags: [],
+ * }
+ * const initialSubmission: Record<string, unknown> = {
+ *   data: 1,
+ * }
+ *
+ * function FormContainer() {
+ *   const isMounted = useIsMounted()
+ *
+ *   const [{ definition, submission }, setFormSubmission] =
+ *     useFormSubmissionState(form, initialSubmission)
+ *
+ *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =
+ *     React.useState({
+ *       isSavingDraft: false,
+ *       saveDraftError: null,
+ *     })
+ *
+ *   const [
+ *     { isSubmitting, submitError, formSubmissionResult },
+ *     setSubmitState,
+ *   ] = React.useState({
+ *     formSubmissionResult: null,
+ *     isSubmitting: false,
+ *     submitError: null,
+ *   })
+ *
+ *   const handleSubmit = React.useCallback(
+ *     async (newFormSubmission: FormTypes.NewFormSubmission) => {
+ *       const formSubmission: FormSubmission = Object.assign(
+ *         {},
+ *         newFormSubmission,
+ *         {
+ *           formsAppId,
+ *           jobId: null,
+ *           externalId: null,
+ *           draftId: null,
+ *           preFillFormDataId: null,
+ *         },
+ *       )
+ *
+ *       setSubmitState({
+ *         formSubmissionResult: null,
+ *         submitError: null,
+ *         isSubmitting: true,
+ *       })
+ *
+ *       try {
+ *         const newFormSubmissionResult = await submissionService.submit({
+ *           formSubmission,
+ *         })
+ *         if (
+ *           newFormSubmissionResult.isOffline &&
+ *           !newFormSubmissionResult.isInPendingQueue
+ *         ) {
+ *           throw new OneBlinkAppsError(
+ *             'You cannot submit this form while offline, please try again when connectivity is restored.',
+ *             {
+ *               isOffline: true,
+ *             },
+ *           )
+ *         }
+ *
+ *         if (isMounted.current) {
+ *           setSubmitState({
+ *             formSubmissionResult: newFormSubmissionResult,
+ *             isSubmitting: false,
+ *             submitError: null,
+ *           })
+ *         }
+ *       } catch (error) {
+ *         if (isMounted.current) {
+ *           setSubmitState({
+ *             formSubmissionResult: null,
+ *             isSubmitting: false,
+ *             submitError: error,
+ *           })
+ *         }
+ *       }
+ *     },
+ *     [isMounted],
+ *   )
+ *
+ *   const handleSaveDraft = React.useCallback(
+ *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {
+ *       const draftSubmission: FormTypes.DraftSubmission = {
+ *         ...newDraftSubmission,
+ *         formsAppId,
+ *       }
+ *       setSaveDraftState({
+ *         saveDraftError: null,
+ *         isSavingDraft: true,
+ *       })
+ *
+ *       try {
+ *         await draftService.addDraft(
+ *           {
+ *             title: form.name,
+ *             formId: form.id,
+ *             externalId: null,
+ *             jobId: null,
+ *           },
+ *           draftSubmission,
+ *         )
+ *
+ *         if (isMounted.current) {
+ *           setSaveDraftState({
+ *             saveDraftError: null,
+ *             isSavingDraft: false,
+ *           })
+ *         }
+ *       } catch (error) {
+ *         if (isMounted.current) {
+ *           setSaveDraftState({
+ *             saveDraftError: error,
+ *             isSavingDraft: false,
+ *           })
+ *         }
+ *       }
+ *     },
+ *     [isMounted],
+ *   )
+ *
+ *   const handleCancel = React.useCallback(() => {
+ *     // handle cancel here...
+ *   }, [])
+ *
+ *   if (isSubmitting) {
+ *     // Render submitting animation/loading
+ *   }
+ *
+ *   if (submitError) {
+ *     // Render error while submitting
+ *   }
+ *
+ *   if (isSavingDraft) {
+ *     // Render saving draft animation/loading
+ *   }
+ *
+ *   if (saveDraftError) {
+ *     // Render error while saving draft
+ *   }
+ *
+ *   if (formSubmissionResult) {
+ *     // Render submission success
+ *   }
+ *
+ *   return (
+ *     <OneBlinkFormControlled
+ *       captchaSiteKey={captchaSiteKey}
+ *       googleMapsApiKey={googleMapsApiKey}
+ *       formsAppId={formsAppId}
+ *       definition={definition}
+ *       submission={submission}
+ *       setFormSubmission={setFormSubmission}
+ *       onCancel={handleCancel}
+ *       onSubmit={handleSubmit}
+ *       onSaveDraft={handleSaveDraft}
+ *     />
+ *   )
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <IsOfflineContextProvider>
+ *       <FormContainer />
+ *     </IsOfflineContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * #### Implementing Controlled Auto Save
+ *
+ * The {@link OneBlinkAutoSaveForm} component does not offer props to allow for a
+ * controlled form (i.e. having access to `submission` and `definition` values).
+ * To implement a controlled version of the `<OneBlinkAutoSaveForm />`
+ * component, use the example component below.
+ *
+ * ```tsx
+ * import * as React from 'react'
+ * import {
+ *   OneBlinkAutoSaveForm,
+ *   OneBlinkFormControlled,
+ *   useFormSubmissionAutoSaveState,
+ * } from '@oneblink/apps-react'
+ *
+ * function OneBlinkAutoSaveFormControlled({
+ *   form,
+ *   initialSubmission,
+ *   autoSaveKey,
+ *   onCancel,
+ *   onSubmit,
+ *   onSaveDraft,
+ *   ...props
+ * }: React.ComponentProps<typeof OneBlinkAutoSaveForm>) {
+ *   const {
+ *     definition,
+ *     submission,
+ *     isLoadingAutoSaveSubmission,
+ *     isAutoSaveSubmissionAvailable,
+ *     startNewSubmission,
+ *     continueAutoSaveSubmission,
+ *     handleSubmit,
+ *     handleCancel,
+ *     handleSaveDraft,
+ *     setFormSubmission,
+ *   } = useFormSubmissionAutoSaveState({
+ *     form,
+ *     initialSubmission,
+ *     autoSaveKey,
+ *     onCancel,
+ *     onSubmit,
+ *     onSaveDraft,
+ *   })
+ *
+ *   // This is just an example of how you could intercept
+ *   // the change event when a user enters/selects a value
+ *   // on the form.
+ *   const customSetFormSubmission = React.useCallback(
+ *     (formSubmission) => {
+ *       setFormSubmission((currentFormSubmission) => {
+ *         const newFormSubmission =
+ *           typeof formSubmission === 'function'
+ *             ? formSubmission(currentFormSubmission)
+ *             : formSubmission
+ *
+ *         // This is where you can access the updated
+ *         // submission data or form definition.
+ *         // You could even change the form definition
+ *         // programmatically based on user inputs.
+ *         console.log(
+ *           'A change has occurred to the submission',
+ *           newFormSubmission.submission,
+ *         )
+ *         newFormSubmission.definition.isInfoPage =
+ *           !newFormSubmission.submission.doesTheUserNeedToSubmit
+ *
+ *         return newFormSubmission
+ *       })
+ *     },
+ *     [setFormSubmission],
+ *   )
+ *
+ *   if (isLoadingAutoSaveSubmission) {
+ *     return <p>Checking for auto save data...</p>
+ *   }
+ *
+ *   if (isAutoSaveSubmissionAvailable) {
+ *     return (
+ *       <>
+ *         <p>Do you want to use the auto save data?</p>
+ *         <button onClick={startNewSubmission}>No, start again</button>
+ *         <button onClick={continueAutoSaveSubmission}>
+ *           Yes, continue
+ *         </button>
+ *       </>
+ *     )
+ *   }
+ *
+ *   return (
+ *     <OneBlinkFormControlled
+ *       {...props}
+ *       submission={submission}
+ *       definition={definition}
+ *       onCancel={handleCancel}
+ *       onSubmit={handleSubmit}
+ *       onSaveDraft={handleSaveDraft}
+ *       setFormSubmission={customSetFormSubmission}
+ *     />
+ *   )
+ * }
+ *
+ * export default React.memo(OneBlinkAutoSaveFormControlled)
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+declare const OneBlinkFormControlled: React.NamedExoticComponent<OneBlinkFormBaseProps & OneBlinkFormControlledProps>;
+/**
+ * Component for rendering a OneBlink Form. This component will render the
+ * submit, cancel and save draft buttons but it is up to the developer to
+ * implement what happens when those buttons are clicked.
+ *
+ * It is also recommended to import the `css` from this library as well.
+ *
+ * ```js
+ * import { OneBlinkForm } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ * ```
+ *
+ * #### Example
+ *
+ * ```tsx
+ * import React from 'react'
+ * import ReactDOM from 'react-dom'
+ * import { FormTypes } from '@oneblink/types'
+ * import {
+ *   OneBlinkAppsError,
+ *   draftService,
+ *   submissionService,
+ * } from '@oneblink/apps'
+ * import {
+ *   IsOfflineContextProvider,
+ *   OneBlinkForm,
+ *   useIsMounted,
+ * } from '@oneblink/apps-react'
+ * import '@oneblink/apps-react/dist/styles.css'
+ *
+ * const captchaSiteKey = 'ENTER_YOUR_SITE_KEY_HERE'
+ * const googleMapsApiKey = 'ENTER_YOUR_MAPS_API_KEY_HERE'
+ * const formsAppId = 1
+ * const form: FormTypes.Form = {
+ *   id: 1,
+ *   name: 'Name of Form',
+ *   description: '',
+ *   organisationId: 'abc123',
+ *   formsAppEnvironmentId: 1,
+ *   formsAppIds: [],
+ *   elements: [],
+ *   isAuthenticated: false,
+ *   isMultiPage: false,
+ *   isInfoPage: false,
+ *   publishStartDate: null,
+ *   publishEndDate: null,
+ *   postSubmissionAction: 'FORMS_LIBRARY',
+ *   submissionEvents: [],
+ *   tags: [],
+ * }
+ *
+ * function FormContainer() {
+ *   const isMounted = useIsMounted()
+ *
+ *   const [{ isSavingDraft, saveDraftError }, setSaveDraftState] =
+ *     React.useState({
+ *       isSavingDraft: false,
+ *       saveDraftError: null,
+ *     })
+ *
+ *   const [
+ *     { isSubmitting, submitError, formSubmissionResult },
+ *     setSubmitState,
+ *   ] = React.useState({
+ *     formSubmissionResult: null,
+ *     isSubmitting: false,
+ *     submitError: null,
+ *   })
+ *
+ *   const handleSubmit = React.useCallback(
+ *     async (newFormSubmission: FormTypes.NewFormSubmission) => {
+ *       const formSubmission: FormSubmission = Object.assign(
+ *         {},
+ *         newFormSubmission,
+ *         {
+ *           formsAppId,
+ *           jobId: null,
+ *           externalId: null,
+ *           draftId: null,
+ *           preFillFormDataId: null,
+ *         },
+ *       )
+ *
+ *       setSubmitState({
+ *         formSubmissionResult: null,
+ *         submitError: null,
+ *         isSubmitting: true,
+ *       })
+ *
+ *       try {
+ *         const newFormSubmissionResult = await submissionService.submit({
+ *           formSubmission,
+ *         })
+ *         if (
+ *           newFormSubmissionResult.isOffline &&
+ *           !newFormSubmissionResult.isInPendingQueue
+ *         ) {
+ *           throw new OneBlinkAppsError(
+ *             'You cannot submit this form while offline, please try again when connectivity is restored.',
+ *             {
+ *               isOffline: true,
+ *             },
+ *           )
+ *         }
+ *
+ *         if (isMounted.current) {
+ *           setSubmitState({
+ *             formSubmissionResult: newFormSubmissionResult,
+ *             isSubmitting: false,
+ *             submitError: null,
+ *           })
+ *         }
+ *       } catch (error) {
+ *         if (isMounted.current) {
+ *           setSubmitState({
+ *             formSubmissionResult: null,
+ *             isSubmitting: false,
+ *             submitError: error,
+ *           })
+ *         }
+ *       }
+ *     },
+ *     [isMounted],
+ *   )
+ *
+ *   const handleSaveDraft = React.useCallback(
+ *     async (newDraftSubmission: FormTypes.NewDraftSubmission) => {
+ *       const draftSubmission: FormTypes.DraftSubmission = {
+ *         ...newDraftSubmission,
+ *         formsAppId,
+ *       }
+ *       setSaveDraftState({
+ *         saveDraftError: null,
+ *         isSavingDraft: true,
+ *       })
+ *
+ *       try {
+ *         await draftService.addDraft(
+ *           {
+ *             title: form.name,
+ *             formId: form.id,
+ *             externalId: null,
+ *             jobId: null,
+ *           },
+ *           draftSubmission,
+ *         )
+ *
+ *         if (isMounted.current) {
+ *           setSaveDraftState({
+ *             saveDraftError: null,
+ *             isSavingDraft: false,
+ *           })
+ *         }
+ *       } catch (error) {
+ *         if (isMounted.current) {
+ *           setSaveDraftState({
+ *             saveDraftError: error,
+ *             isSavingDraft: false,
+ *           })
+ *         }
+ *       }
+ *     },
+ *     [isMounted],
+ *   )
+ *
+ *   const handleCancel = React.useCallback(() => {
+ *     // handle cancel here...
+ *   }, [isMounted])
+ *
+ *   if (isSubmitting) {
+ *     // Render submitting animation/loading
+ *   }
+ *
+ *   if (submitError) {
+ *     // Render error while submitting
+ *   }
+ *
+ *   if (isSavingDraft) {
+ *     // Render saving draft animation/loading
+ *   }
+ *
+ *   if (saveDraftError) {
+ *     // Render error while saving draft
+ *   }
+ *
+ *   if (formSubmissionResult) {
+ *     // Render submission success
+ *   }
+ *
+ *   return (
+ *     <OneBlinkForm
+ *       captchaSiteKey={captchaSiteKey}
+ *       googleMapsApiKey={googleMapsApiKey}
+ *       formsAppId={formsAppId}
+ *       form={form}
+ *       onCancel={handleCancel}
+ *       onSubmit={handleSubmit}
+ *       onSaveDraft={handleSaveDraft}
+ *       attachmentRetentionInDays={1}
+ *     />
+ *   )
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <IsOfflineContextProvider>
+ *       <FormContainer />
+ *     </IsOfflineContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<OneBlinkFormBaseProps & {
+    /** The OneBlink Form to render */
     form: FormTypes.Form;
-    initialSubmission?: FormSubmissionModel;
-    resumeAtElement?: FormTypes.FormElement;
-};
-declare const OneBlinkFormUncontrolled: React.NamedExoticComponent<BaseProps & UncontrolledProps>;
+    /** The initial submission data */
+    initialSubmission?: {
+        [name: string]: unknown;
+    } | undefined;
+    /** The element to resume the form at. */
+    resumeAtElement?: FormTypes.FormElement | undefined;
+}>;
 export { OneBlinkFormControlled, OneBlinkFormUncontrolled };