@oneblink/apps-react 4.0.0-beta.1 → 4.0.0-beta.10

package/dist/hooks/useDrafts.d.ts

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { SubmissionTypes } from '@oneblink/types';
+/** The value returned from `useDrafts()` hook */
+export type DraftsContextValue = {
+    /** `true` drafts are currently loading. */
+    isLoading: boolean;
+    /** An Error object if loading drafts fails */
+    loadError: Error | null;
+    /** The incomplete submissions that were saved for later */
+    drafts: SubmissionTypes.FormsAppDraft[];
+    /** A function to trigger loading of the drafts */
+    reloadDrafts: () => unknown;
+    /** A function to clear Error object from loading drafts */
+    clearLoadError: () => void;
+    /** `true` drafts are syncing with other devices */
+    isSyncing: boolean;
+    /** A function to trigger syncing of the drafts */
+    syncDrafts: () => unknown;
+    /** An Error object if syncing drafts fails */
+    syncError: Error | null;
+    /** A function to clear Error object from syncing drafts */
+    clearSyncError: () => void;
+    /** A function to remove a draft */
+    deleteDraft: (draftId: string) => Promise<void>;
+};
+/**
+ * React Component that provides the context for the `useDrafts()` hook to be
+ * used by components further down your component tree. **It should only be
+ * included in your component tree once and ideally at the root of the
+ * application.**
+ *
+ * #### Example
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { DraftsContextProvider, useDrafts } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const draftsContext = useDrafts()
+ *   // use drafts here
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DraftsContextProvider>
+ *       <Component />
+ *     </DraftsContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+export declare function DraftsContextProvider({ 
+/** The identifier for the forms app associated with the user's drafts */
+formsAppId, 
+/**
+ * `true` if drafts are enabled, otherwise `false`. Can be used for account
+ * tier validation.
+ */
+isDraftsEnabled, 
+/** Your application components */
+children, }: {
+    formsAppId: number;
+    isDraftsEnabled: boolean;
+    children: React.ReactNode;
+}): JSX.Element;
+/**
+ * React hook to get the context value for Drafts. Will throw an Error if used
+ * outside of the `<DraftsContextProvider />` component.
+ *
+ * @returns
+ * @group Hooks
+ */
+export default function useDrafts(): DraftsContextValue;

package/dist/hooks/useDrafts.js

@@ -0,0 +1,204 @@
+import * as React from 'react';
+import { draftService, submissionService } from '@oneblink/apps';
+import useAuth from './useAuth';
+import useIsMounted from './useIsMounted';
+import useIsOffline from './useIsOffline';
+const defaultLoadState = {
+    isLoading: false,
+    loadError: null,
+    drafts: [],
+};
+const defaultSyncState = {
+    isSyncing: false,
+    syncError: null,
+};
+const DraftsContext = React.createContext(undefined);
+/**
+ * React Component that provides the context for the `useDrafts()` hook to be
+ * used by components further down your component tree. **It should only be
+ * included in your component tree once and ideally at the root of the
+ * application.**
+ *
+ * #### Example
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { DraftsContextProvider, useDrafts } from '@oneblink/apps-react'
+ *
+ * function Component() {
+ *   const draftsContext = useDrafts()
+ *   // use drafts here
+ * }
+ *
+ * function App() {
+ *   return (
+ *     <DraftsContextProvider>
+ *       <Component />
+ *     </DraftsContextProvider>
+ *   )
+ * }
+ *
+ * const root = document.getElementById('root')
+ * if (root) {
+ *   ReactDOM.render(<App />, root)
+ * }
+ * ```
+ *
+ * @param props
+ * @returns
+ * @group Components
+ */
+export function DraftsContextProvider({ 
+/** The identifier for the forms app associated with the user's drafts */
+formsAppId, 
+/**
+ * `true` if drafts are enabled, otherwise `false`. Can be used for account
+ * tier validation.
+ */
+isDraftsEnabled, 
+/** Your application components */
+children, }) {
+    const isMounted = useIsMounted();
+    const isOffline = useIsOffline();
+    const { isLoggedIn, isUsingFormsKey } = useAuth();
+    const [syncState, setSyncState] = React.useState(defaultSyncState);
+    const clearSyncError = React.useCallback(() => {
+        setSyncState((currentState) => ({
+            ...currentState,
+            syncError: null,
+        }));
+    }, []);
+    const syncDrafts = React.useCallback(async () => {
+        if (!isDraftsEnabled || !isLoggedIn || isUsingFormsKey) {
+            return;
+        }
+        if (isMounted.current) {
+            setSyncState({
+                isSyncing: true,
+                syncError: null,
+            });
+        }
+        let newError = null;
+        try {
+            await draftService.syncDrafts({
+                formsAppId,
+                throwError: false,
+            });
+        }
+        catch (error) {
+            newError = error;
+        }
+        if (isMounted.current) {
+            setSyncState({
+                isSyncing: false,
+                syncError: newError,
+            });
+        }
+    }, [formsAppId, isDraftsEnabled, isLoggedIn, isMounted, isUsingFormsKey]);
+    const [loadState, setLoadState] = React.useState(defaultLoadState);
+    const clearLoadError = React.useCallback(() => {
+        setLoadState((currentState) => ({
+            ...currentState,
+            loadError: null,
+        }));
+    }, []);
+    const reloadDrafts = React.useCallback(async () => {
+        if (!isLoggedIn) {
+            if (isMounted.current) {
+                setLoadState({
+                    isLoading: false,
+                    loadError: null,
+                    drafts: [],
+                });
+            }
+            return;
+        }
+        if (isMounted.current) {
+            setLoadState((currentState) => ({
+                isLoading: true,
+                loadError: null,
+                drafts: currentState.drafts,
+            }));
+        }
+        let newError = null;
+        let newDrafts = [];
+        try {
+            newDrafts = await draftService.getDrafts();
+        }
+        catch (error) {
+            newError = error;
+        }
+        if (isMounted.current) {
+            setLoadState({
+                isLoading: false,
+                loadError: newError,
+                drafts: newDrafts,
+            });
+        }
+    }, [isMounted, isLoggedIn]);
+    const deleteDraft = React.useCallback((draftId) => {
+        return draftService.deleteDraft(draftId, formsAppId);
+    }, [formsAppId]);
+    const value = React.useMemo(() => ({
+        // Sync
+        syncDrafts,
+        isSyncing: syncState.isSyncing,
+        syncError: syncState.syncError,
+        clearSyncError,
+        // Load
+        reloadDrafts,
+        isLoading: loadState.isLoading,
+        drafts: loadState.drafts,
+        loadError: loadState.loadError,
+        clearLoadError,
+        // Delete,
+        deleteDraft,
+    }), [
+        clearLoadError,
+        clearSyncError,
+        loadState.drafts,
+        loadState.isLoading,
+        loadState.loadError,
+        reloadDrafts,
+        syncDrafts,
+        syncState.isSyncing,
+        syncState.syncError,
+        deleteDraft,
+    ]);
+    React.useEffect(() => {
+        reloadDrafts();
+        const unregisterPendingQueueListener = submissionService.registerPendingQueueListener(reloadDrafts);
+        const unregisterDraftsListener = draftService.registerDraftsListener((drafts) => {
+            setLoadState({
+                isLoading: false,
+                drafts,
+                loadError: null,
+            });
+        });
+        return () => {
+            unregisterPendingQueueListener();
+            unregisterDraftsListener();
+        };
+    }, [reloadDrafts]);
+    React.useEffect(() => {
+        if (!isOffline) {
+            syncDrafts();
+        }
+    }, [isOffline, syncDrafts]);
+    return (React.createElement(DraftsContext.Provider, { value: value }, children));
+}
+/**
+ * React hook to get the context value for Drafts. Will throw an Error if used
+ * outside of the `<DraftsContextProvider />` component.
+ *
+ * @returns
+ * @group Hooks
+ */
+export default function useDrafts() {
+    const value = React.useContext(DraftsContext);
+    if (!value) {
+        throw new Error(`"useDrafts" hook was used outside of the "<DraftsContextProvider />" component's children.`);
+    }
+    return value;
+}
+//# sourceMappingURL=useDrafts.js.map

package/dist/hooks/useDrafts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDrafts.js","sourceRoot":"","sources":["../../src/hooks/useDrafts.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport { draftService, submissionService } from '@oneblink/apps'\nimport { SubmissionTypes } from '@oneblink/types'\nimport useAuth from './useAuth'\nimport useIsMounted from './useIsMounted'\nimport useIsOffline from './useIsOffline'\n\n/** The value returned from `useDrafts()` hook */\nexport type DraftsContextValue = {\n  /** `true` drafts are currently loading. */\n  isLoading: boolean\n  /** An Error object if loading drafts fails */\n  loadError: Error | null\n  /** The incomplete submissions that were saved for later */\n  drafts: SubmissionTypes.FormsAppDraft[]\n  /** A function to trigger loading of the drafts */\n  reloadDrafts: () => unknown\n  /** A function to clear Error object from loading drafts */\n  clearLoadError: () => void\n  /** `true` drafts are syncing with other devices */\n  isSyncing: boolean\n  /** A function to trigger syncing of the drafts */\n  syncDrafts: () => unknown\n  /** An Error object if syncing drafts fails */\n  syncError: Error | null\n  /** A function to clear Error object from syncing drafts */\n  clearSyncError: () => void\n  /** A function to remove a draft */\n  deleteDraft: (draftId: string) => Promise<void>\n}\n\nconst defaultLoadState = {\n  isLoading: false,\n  loadError: null,\n  drafts: [],\n}\n\nconst defaultSyncState = {\n  isSyncing: false,\n  syncError: null,\n}\n\nconst DraftsContext = React.createContext<DraftsContextValue | undefined>(\n  undefined,\n)\n\n/**\n * React Component that provides the context for the `useDrafts()` hook to be\n * used by components further down your component tree. **It should only be\n * included in your component tree once and ideally at the root of the\n * application.**\n *\n * #### Example\n *\n * ```jsx\n * import * as React from 'react'\n * import { DraftsContextProvider, useDrafts } from '@oneblink/apps-react'\n *\n * function Component() {\n *   const draftsContext = useDrafts()\n *   // use drafts here\n * }\n *\n * function App() {\n *   return (\n *     <DraftsContextProvider>\n *       <Component />\n *     </DraftsContextProvider>\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 */\nexport function DraftsContextProvider({\n  /** The identifier for the forms app associated with the user's drafts */\n  formsAppId,\n  /**\n   * `true` if drafts are enabled, otherwise `false`. Can be used for account\n   * tier validation.\n   */\n  isDraftsEnabled,\n  /** Your application components */\n  children,\n}: {\n  formsAppId: number\n  isDraftsEnabled: boolean\n  children: React.ReactNode\n}) {\n  const isMounted = useIsMounted()\n  const isOffline = useIsOffline()\n  const { isLoggedIn, isUsingFormsKey } = useAuth()\n\n  const [syncState, setSyncState] = React.useState<{\n    isSyncing: boolean\n    syncError: Error | null\n  }>(defaultSyncState)\n  const clearSyncError = React.useCallback(() => {\n    setSyncState((currentState) => ({\n      ...currentState,\n      syncError: null,\n    }))\n  }, [])\n  const syncDrafts = React.useCallback(async () => {\n    if (!isDraftsEnabled || !isLoggedIn || isUsingFormsKey) {\n      return\n    }\n\n    if (isMounted.current) {\n      setSyncState({\n        isSyncing: true,\n        syncError: null,\n      })\n    }\n\n    let newError = null\n\n    try {\n      await draftService.syncDrafts({\n        formsAppId,\n        throwError: false,\n      })\n    } catch (error) {\n      newError = error as Error\n    }\n\n    if (isMounted.current) {\n      setSyncState({\n        isSyncing: false,\n        syncError: newError,\n      })\n    }\n  }, [formsAppId, isDraftsEnabled, isLoggedIn, isMounted, isUsingFormsKey])\n\n  const [loadState, setLoadState] = React.useState<{\n    isLoading: boolean\n    loadError: Error | null\n    drafts: SubmissionTypes.FormsAppDraft[]\n  }>(defaultLoadState)\n  const clearLoadError = React.useCallback(() => {\n    setLoadState((currentState) => ({\n      ...currentState,\n      loadError: null,\n    }))\n  }, [])\n  const reloadDrafts = React.useCallback(async () => {\n    if (!isLoggedIn) {\n      if (isMounted.current) {\n        setLoadState({\n          isLoading: false,\n          loadError: null,\n          drafts: [],\n        })\n      }\n      return\n    }\n\n    if (isMounted.current) {\n      setLoadState((currentState) => ({\n        isLoading: true,\n        loadError: null,\n        drafts: currentState.drafts,\n      }))\n    }\n\n    let newError = null\n    let newDrafts: SubmissionTypes.FormsAppDraft[] = []\n\n    try {\n      newDrafts = await draftService.getDrafts()\n    } catch (error) {\n      newError = error as Error\n    }\n\n    if (isMounted.current) {\n      setLoadState({\n        isLoading: false,\n        loadError: newError,\n        drafts: newDrafts,\n      })\n    }\n  }, [isMounted, isLoggedIn])\n\n  const deleteDraft = React.useCallback(\n    (draftId) => {\n      return draftService.deleteDraft(draftId, formsAppId)\n    },\n    [formsAppId],\n  )\n\n  const value = React.useMemo(\n    () => ({\n      // Sync\n      syncDrafts,\n      isSyncing: syncState.isSyncing,\n      syncError: syncState.syncError,\n      clearSyncError,\n      // Load\n      reloadDrafts,\n      isLoading: loadState.isLoading,\n      drafts: loadState.drafts,\n      loadError: loadState.loadError,\n      clearLoadError,\n      // Delete,\n      deleteDraft,\n    }),\n    [\n      clearLoadError,\n      clearSyncError,\n      loadState.drafts,\n      loadState.isLoading,\n      loadState.loadError,\n      reloadDrafts,\n      syncDrafts,\n      syncState.isSyncing,\n      syncState.syncError,\n      deleteDraft,\n    ],\n  )\n\n  React.useEffect(() => {\n    reloadDrafts()\n    const unregisterPendingQueueListener =\n      submissionService.registerPendingQueueListener(reloadDrafts)\n    const unregisterDraftsListener = draftService.registerDraftsListener(\n      (drafts) => {\n        setLoadState({\n          isLoading: false,\n          drafts,\n          loadError: null,\n        })\n      },\n    )\n    return () => {\n      unregisterPendingQueueListener()\n      unregisterDraftsListener()\n    }\n  }, [reloadDrafts])\n\n  React.useEffect(() => {\n    if (!isOffline) {\n      syncDrafts()\n    }\n  }, [isOffline, syncDrafts])\n\n  return (\n    <DraftsContext.Provider value={value}>{children}</DraftsContext.Provider>\n  )\n}\n\n/**\n * React hook to get the context value for Drafts. Will throw an Error if used\n * outside of the `<DraftsContextProvider />` component.\n *\n * @returns\n * @group Hooks\n */\nexport default function useDrafts(): DraftsContextValue {\n  const value = React.useContext(DraftsContext)\n  if (!value) {\n    throw new Error(\n      `\"useDrafts\" hook was used outside of the \"<DraftsContextProvider />\" component's children.`,\n    )\n  }\n  return value\n}\n"]}

package/dist/hooks/useFormSubmissionAutoSaveState.d.ts

@@ -1,7 +1,16 @@
 import * as React from 'react';
 import { submissionService } from '@oneblink/apps';
-import { FormTypes } from '@oneblink/types';
-import { FormSubmissionModel } from '../types/form';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+/**
+ * Use this if you want to implement a controlled auto saving form. See
+ * {@link OneBlinkFormControlled} for a full example. If you do not need to
+ * control the `submission` or `definition` properties, you can use the
+ * {@link OneBlinkAutoSaveForm} component.
+ *
+ * @param options
+ * @returns
+ * @group Hooks
+ */
 export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, onCancel, onSubmit, onSaveDraft, }: {
     form: FormTypes.Form;
     removeAutoSaveDataBeforeSubmit?: boolean;
@@ -9,12 +18,14 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
     autoSaveKey: string;
     onCancel: () => unknown;
     onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown;
-    initialSubmission?: FormSubmissionModel;
+    initialSubmission?: SubmissionTypes.S3SubmissionData['submission'];
     resumeAtElement?: FormTypes.FormElement;
     onSaveDraft?: (newDraftSubmission: submissionService.NewDraftSubmission) => unknown;
 }): {
     definition: FormTypes.Form;
-    submission: FormSubmissionModel;
+    submission: {
+        [name: string]: unknown;
+    };
     lastElementUpdated: FormTypes.FormElement | undefined;
     isLoadingAutoSaveSubmission: boolean;
     isAutoSaveSubmissionAvailable: boolean;
@@ -26,7 +37,9 @@ export default function useFormSubmissionAutoSaveState({ form, initialSubmission
     handleNavigateAway: () => void;
     setFormSubmission: React.Dispatch<React.SetStateAction<{
         definition: FormTypes.Form;
-        submission: FormSubmissionModel;
+        submission: {
+            [name: string]: unknown;
+        };
         lastElementUpdated: FormTypes.FormElement | undefined;
     }>>;
 };

package/dist/hooks/useFormSubmissionAutoSaveState.js

@@ -2,6 +2,16 @@ import * as React from 'react';
 import _throttle from 'lodash.throttle';
 import { autoSaveService, Sentry } from '@oneblink/apps';
 import useFormSubmissionState from './useFormSubmissionState';
+/**
+ * Use this if you want to implement a controlled auto saving form. See
+ * {@link OneBlinkFormControlled} for a full example. If you do not need to
+ * control the `submission` or `definition` properties, you can use the
+ * {@link OneBlinkAutoSaveForm} component.
+ *
+ * @param options
+ * @returns
+ * @group Hooks
+ */
 export default function useFormSubmissionAutoSaveState({ form, initialSubmission, resumeAtElement, removeAutoSaveDataBeforeSubmit, removeAutoSaveDataBeforeSaveDraft, autoSaveKey, onCancel, onSubmit, onSaveDraft, }) {
     const [{ definition, submission, lastElementUpdated }, setFormSubmission] = useFormSubmissionState(form, initialSubmission, resumeAtElement);
     const [{ isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement }, setAutoSaveState,] = React.useState({

package/dist/hooks/useFormSubmissionAutoSaveState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormSubmissionModel } from '../types/form'\nimport { FormElement } from '@oneblink/types/typescript/forms'\n\nexport default function useFormSubmissionAutoSaveState({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  autoSaveKey,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n}: {\n  form: FormTypes.Form\n  removeAutoSaveDataBeforeSubmit?: boolean\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n  autoSaveKey: string\n  onCancel: () => unknown\n  onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n  initialSubmission?: FormSubmissionModel\n  resumeAtElement?: FormTypes.FormElement\n  onSaveDraft?: (\n    newDraftSubmission: submissionService.NewDraftSubmission,\n  ) => unknown\n}) {\n  const [{ definition, submission, lastElementUpdated }, setFormSubmission] =\n    useFormSubmissionState(form, initialSubmission, resumeAtElement)\n\n  const [\n    { isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement },\n    setAutoSaveState,\n  ] = React.useState<{\n    isLoadingAutoSaveSubmission: boolean\n    autoSaveSubmission: FormSubmissionModel | null\n    autoSaveElement: FormElement | null\n  }>({\n    isLoadingAutoSaveSubmission: true,\n    autoSaveSubmission: null,\n    autoSaveElement: null,\n  })\n\n  const throttledAutoSave = React.useMemo(() => {\n    return _throttle(\n      (model: FormSubmissionModel, lastElementUpdated?: FormElement) => {\n        console.log('Auto saving...')\n        autoSaveService\n          .upsertAutoSaveData(definition.id, autoSaveKey, model)\n          .then(() => {\n            if (lastElementUpdated) {\n              return autoSaveService.upsertAutoSaveData<FormElement>(\n                definition.id,\n                `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n                lastElementUpdated,\n              )\n            }\n          })\n          .catch((error) => {\n            console.warn('Error while auto saving', error)\n            Sentry.captureException(error)\n          })\n      },\n      9580, // https://en.wikipedia.org/wiki/100_metres\n      { trailing: true, leading: false },\n    )\n  }, [autoSaveKey, definition.id])\n\n  const cancelAutoSave = React.useCallback(() => {\n    if (throttledAutoSave) {\n      throttledAutoSave.cancel()\n    }\n  }, [throttledAutoSave])\n\n  const deleteAutoSaveSubmission = React.useCallback(() => {\n    return autoSaveService\n      .deleteAutoSaveData(definition.id, autoSaveKey)\n      .catch((error) => {\n        console.warn('Error removing auto save data: ', error)\n        Sentry.captureException(error)\n      })\n  }, [autoSaveKey, definition.id])\n\n  const handleSubmit = React.useCallback(\n    (submissionResult: submissionService.NewFormSubmission) => {\n      cancelAutoSave()\n      if (removeAutoSaveDataBeforeSubmit !== false) {\n        deleteAutoSaveSubmission()\n      }\n      onSubmit(submissionResult)\n    },\n    [\n      cancelAutoSave,\n      deleteAutoSaveSubmission,\n      onSubmit,\n      removeAutoSaveDataBeforeSubmit,\n    ],\n  )\n\n  const handleSaveDraft = React.useMemo(() => {\n    if (onSaveDraft) {\n      return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n        cancelAutoSave()\n        if (removeAutoSaveDataBeforeSaveDraft !== false) {\n          deleteAutoSaveSubmission()\n        }\n        if (onSaveDraft) {\n          onSaveDraft(newDraftSubmission)\n        }\n      }\n    }\n  }, [\n    cancelAutoSave,\n    deleteAutoSaveSubmission,\n    onSaveDraft,\n    removeAutoSaveDataBeforeSaveDraft,\n  ])\n\n  const handleNavigateAway = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n  }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n  const handleCancel = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n    onCancel()\n  }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n  React.useEffect(() => {\n    let ignore = false\n    const loadAutoSaveData = async () => {\n      try {\n        const autoSaveSubmission =\n          await autoSaveService.getAutoSaveData<FormSubmissionModel>(\n            definition.id,\n            autoSaveKey,\n          )\n        const autoSaveElement =\n          await autoSaveService.getAutoSaveData<FormElement>(\n            definition.id,\n            `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n          )\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission,\n            autoSaveElement,\n          })\n        }\n      } catch (error) {\n        console.warn('Error loading auto save data', error)\n        Sentry.captureException(error)\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission: null,\n            autoSaveElement: null,\n          })\n        }\n      }\n    }\n    loadAutoSaveData()\n    return () => {\n      ignore = true\n    }\n  }, [autoSaveKey, definition.id])\n\n  // Clean up throttle function on unmount\n  React.useEffect(() => {\n    return () => {\n      cancelAutoSave()\n    }\n  }, [cancelAutoSave])\n\n  const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n    (formSubmission) => {\n      setFormSubmission((currentFormSubmission) => {\n        const newFormSubmission =\n          typeof formSubmission === 'function'\n            ? formSubmission(currentFormSubmission)\n            : formSubmission\n\n        throttledAutoSave(\n          newFormSubmission.submission,\n          newFormSubmission.lastElementUpdated,\n        )\n\n        return newFormSubmission\n      })\n    },\n    [setFormSubmission, throttledAutoSave],\n  )\n\n  const startNewSubmission = React.useCallback(() => {\n    deleteAutoSaveSubmission()\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [deleteAutoSaveSubmission])\n\n  const continueAutoSaveSubmission = React.useCallback(() => {\n    if (autoSaveSubmission) {\n      setFormSubmission((currentFormSubmission) => ({\n        ...currentFormSubmission,\n        submission: autoSaveSubmission,\n        lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n      }))\n    }\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [autoSaveSubmission, setFormSubmission, autoSaveElement])\n\n  return {\n    definition,\n    submission,\n    lastElementUpdated,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable: autoSaveSubmission !== null,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    handleNavigateAway,\n    setFormSubmission: setFormSubmissionAutoSave,\n  }\n}\n"]}
+{"version":3,"file":"useFormSubmissionAutoSaveState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionAutoSaveState.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react'\nimport _throttle from 'lodash.throttle'\nimport { autoSaveService, submissionService, Sentry } from '@oneblink/apps'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport useFormSubmissionState from './useFormSubmissionState'\nimport { FormElement } from '@oneblink/types/typescript/forms'\n\n/**\n * Use this if you want to implement a controlled auto saving form. See\n * {@link OneBlinkFormControlled} for a full example. If you do not need to\n * control the `submission` or `definition` properties, you can use the\n * {@link OneBlinkAutoSaveForm} component.\n *\n * @param options\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionAutoSaveState({\n  form,\n  initialSubmission,\n  resumeAtElement,\n  removeAutoSaveDataBeforeSubmit,\n  removeAutoSaveDataBeforeSaveDraft,\n  autoSaveKey,\n  onCancel,\n  onSubmit,\n  onSaveDraft,\n}: {\n  form: FormTypes.Form\n  removeAutoSaveDataBeforeSubmit?: boolean\n  removeAutoSaveDataBeforeSaveDraft?: boolean\n  autoSaveKey: string\n  onCancel: () => unknown\n  onSubmit: (newFormSubmission: submissionService.NewFormSubmission) => unknown\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission']\n  resumeAtElement?: FormTypes.FormElement\n  onSaveDraft?: (\n    newDraftSubmission: submissionService.NewDraftSubmission,\n  ) => unknown\n}) {\n  const [{ definition, submission, lastElementUpdated }, setFormSubmission] =\n    useFormSubmissionState(form, initialSubmission, resumeAtElement)\n\n  const [\n    { isLoadingAutoSaveSubmission, autoSaveSubmission, autoSaveElement },\n    setAutoSaveState,\n  ] = React.useState<{\n    isLoadingAutoSaveSubmission: boolean\n    autoSaveSubmission: SubmissionTypes.S3SubmissionData['submission'] | null\n    autoSaveElement: FormElement | null\n  }>({\n    isLoadingAutoSaveSubmission: true,\n    autoSaveSubmission: null,\n    autoSaveElement: null,\n  })\n\n  const throttledAutoSave = React.useMemo(() => {\n    return _throttle(\n      (\n        model: SubmissionTypes.S3SubmissionData['submission'],\n        lastElementUpdated?: FormElement,\n      ) => {\n        console.log('Auto saving...')\n        autoSaveService\n          .upsertAutoSaveData(definition.id, autoSaveKey, model)\n          .then(() => {\n            if (lastElementUpdated) {\n              return autoSaveService.upsertAutoSaveData<FormElement>(\n                definition.id,\n                `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n                lastElementUpdated,\n              )\n            }\n          })\n          .catch((error) => {\n            console.warn('Error while auto saving', error)\n            Sentry.captureException(error)\n          })\n      },\n      9580, // https://en.wikipedia.org/wiki/100_metres\n      { trailing: true, leading: false },\n    )\n  }, [autoSaveKey, definition.id])\n\n  const cancelAutoSave = React.useCallback(() => {\n    if (throttledAutoSave) {\n      throttledAutoSave.cancel()\n    }\n  }, [throttledAutoSave])\n\n  const deleteAutoSaveSubmission = React.useCallback(() => {\n    return autoSaveService\n      .deleteAutoSaveData(definition.id, autoSaveKey)\n      .catch((error) => {\n        console.warn('Error removing auto save data: ', error)\n        Sentry.captureException(error)\n      })\n  }, [autoSaveKey, definition.id])\n\n  const handleSubmit = React.useCallback(\n    (submissionResult: submissionService.NewFormSubmission) => {\n      cancelAutoSave()\n      if (removeAutoSaveDataBeforeSubmit !== false) {\n        deleteAutoSaveSubmission()\n      }\n      onSubmit(submissionResult)\n    },\n    [\n      cancelAutoSave,\n      deleteAutoSaveSubmission,\n      onSubmit,\n      removeAutoSaveDataBeforeSubmit,\n    ],\n  )\n\n  const handleSaveDraft = React.useMemo(() => {\n    if (onSaveDraft) {\n      return (newDraftSubmission: submissionService.NewDraftSubmission) => {\n        cancelAutoSave()\n        if (removeAutoSaveDataBeforeSaveDraft !== false) {\n          deleteAutoSaveSubmission()\n        }\n        if (onSaveDraft) {\n          onSaveDraft(newDraftSubmission)\n        }\n      }\n    }\n  }, [\n    cancelAutoSave,\n    deleteAutoSaveSubmission,\n    onSaveDraft,\n    removeAutoSaveDataBeforeSaveDraft,\n  ])\n\n  const handleNavigateAway = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n  }, [cancelAutoSave, deleteAutoSaveSubmission])\n\n  const handleCancel = React.useCallback(() => {\n    cancelAutoSave()\n    deleteAutoSaveSubmission()\n    onCancel()\n  }, [cancelAutoSave, deleteAutoSaveSubmission, onCancel])\n\n  React.useEffect(() => {\n    let ignore = false\n    const loadAutoSaveData = async () => {\n      try {\n        const autoSaveSubmission = await autoSaveService.getAutoSaveData<\n          SubmissionTypes.S3SubmissionData['submission']\n        >(definition.id, autoSaveKey)\n        const autoSaveElement =\n          await autoSaveService.getAutoSaveData<FormElement>(\n            definition.id,\n            `LAST_ELEMENT_UPDATED_${autoSaveKey}`,\n          )\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission,\n            autoSaveElement,\n          })\n        }\n      } catch (error) {\n        console.warn('Error loading auto save data', error)\n        Sentry.captureException(error)\n        if (!ignore) {\n          setAutoSaveState({\n            isLoadingAutoSaveSubmission: false,\n            autoSaveSubmission: null,\n            autoSaveElement: null,\n          })\n        }\n      }\n    }\n    loadAutoSaveData()\n    return () => {\n      ignore = true\n    }\n  }, [autoSaveKey, definition.id])\n\n  // Clean up throttle function on unmount\n  React.useEffect(() => {\n    return () => {\n      cancelAutoSave()\n    }\n  }, [cancelAutoSave])\n\n  const setFormSubmissionAutoSave: typeof setFormSubmission = React.useCallback(\n    (formSubmission) => {\n      setFormSubmission((currentFormSubmission) => {\n        const newFormSubmission =\n          typeof formSubmission === 'function'\n            ? formSubmission(currentFormSubmission)\n            : formSubmission\n\n        throttledAutoSave(\n          newFormSubmission.submission,\n          newFormSubmission.lastElementUpdated,\n        )\n\n        return newFormSubmission\n      })\n    },\n    [setFormSubmission, throttledAutoSave],\n  )\n\n  const startNewSubmission = React.useCallback(() => {\n    deleteAutoSaveSubmission()\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [deleteAutoSaveSubmission])\n\n  const continueAutoSaveSubmission = React.useCallback(() => {\n    if (autoSaveSubmission) {\n      setFormSubmission((currentFormSubmission) => ({\n        ...currentFormSubmission,\n        submission: autoSaveSubmission,\n        lastElementUpdated: autoSaveElement ? autoSaveElement : undefined,\n      }))\n    }\n    setAutoSaveState({\n      isLoadingAutoSaveSubmission: false,\n      autoSaveSubmission: null,\n      autoSaveElement: null,\n    })\n  }, [autoSaveSubmission, setFormSubmission, autoSaveElement])\n\n  return {\n    definition,\n    submission,\n    lastElementUpdated,\n    isLoadingAutoSaveSubmission,\n    isAutoSaveSubmissionAvailable: autoSaveSubmission !== null,\n    startNewSubmission,\n    continueAutoSaveSubmission,\n    handleSubmit,\n    handleCancel,\n    handleSaveDraft,\n    handleNavigateAway,\n    setFormSubmission: setFormSubmissionAutoSave,\n  }\n}\n"]}

package/dist/hooks/useFormSubmissionModelContext.d.ts

@@ -1,14 +1,14 @@
-import { FormTypes } from '@oneblink/types';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
 import { FormElement } from '@oneblink/types/typescript/forms';
 import * as React from 'react';
-import { FormElementsConditionallyShown, FormSubmissionModel } from '../types/form';
+import { FormElementsConditionallyShown } from '../types/form';
 export type FormSubmissionModelContextValue = {
-    formSubmissionModel: FormSubmissionModel;
+    formSubmissionModel: SubmissionTypes.S3SubmissionData['submission'];
     parent?: FormSubmissionModelContextValue;
     elements: FormElement[];
 };
 export declare function FormSubmissionModelContextProvider({ children, model, elements, formElementsConditionallyShown, }: {
-    model: FormSubmissionModel;
+    model: SubmissionTypes.S3SubmissionData['submission'];
     elements: FormTypes.FormElement[];
     formElementsConditionallyShown: FormElementsConditionallyShown | undefined;
     children: React.ReactNode;

package/dist/hooks/useFormSubmissionModelContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormSubmissionModelContext.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionModelContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,wBAAwB,MAAM,sCAAsC,CAAA;AAY3E,MAAM,0BAA0B,GAAG,KAAK,CAAC,aAAa,CAEpD,SAAS,CAAC,CAAA;AAEZ,MAAM,UAAU,kCAAkC,CAAC,EACjD,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,8BAA8B,GAM/B;IACC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACjD,0BAA0B,CAC3B,CAAA;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO;YACL,mBAAmB,EAAE,wBAAwB,CAC3C,KAAK,EACL,QAAQ,EACR,8BAA8B,EAC9B,IAAI,CACL,CAAC,KAAK;YACP,MAAM,EAAE,0BAA0B;YAClC,QAAQ;SACT,CAAA;IACH,CAAC,EAAE;QACD,KAAK;QACL,QAAQ;QACR,8BAA8B;QAC9B,0BAA0B;KAC3B,CAAC,CAAA;IACF,OAAO,CACL,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC9C,QAAQ,CAC2B,CACvC,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC5C,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACjD,0BAA0B,CAC3B,CAAA;IACD,IAAI,CAAC,0BAA0B,EAAE;QAC/B,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAA;KACF;IACD,OAAO,0BAA0B,CAAA;AACnC,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,IAAI,0BAA0B,GAAG,sBAAsB,EAAE,CAAA;IACzD,OAAO,0BAA0B,CAAC,MAAM,EAAE;QACxC,0BAA0B,GAAG,0BAA0B,CAAC,MAAM,CAAA;KAC/D;IACD,OAAO,0BAA0B,CAAA;AACnC,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport { FormElement } from '@oneblink/types/typescript/forms'\nimport * as React from 'react'\nimport cleanFormSubmissionModel from '../services/cleanFormSubmissionModel'\nimport {\n  FormElementsConditionallyShown,\n  FormSubmissionModel,\n} from '../types/form'\n\nexport type FormSubmissionModelContextValue = {\n  formSubmissionModel: FormSubmissionModel\n  parent?: FormSubmissionModelContextValue\n  elements: FormElement[]\n}\n\nconst FormSubmissionModelContext = React.createContext<\n  FormSubmissionModelContextValue | undefined\n>(undefined)\n\nexport function FormSubmissionModelContextProvider({\n  children,\n  model,\n  elements,\n  formElementsConditionallyShown,\n}: {\n  model: FormSubmissionModel\n  elements: FormTypes.FormElement[]\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  children: React.ReactNode\n}) {\n  const formSubmissionModelContext = React.useContext(\n    FormSubmissionModelContext,\n  )\n  const value = React.useMemo(() => {\n    return {\n      formSubmissionModel: cleanFormSubmissionModel(\n        model,\n        elements,\n        formElementsConditionallyShown,\n        true,\n      ).model,\n      parent: formSubmissionModelContext,\n      elements,\n    }\n  }, [\n    model,\n    elements,\n    formElementsConditionallyShown,\n    formSubmissionModelContext,\n  ])\n  return (\n    <FormSubmissionModelContext.Provider value={value}>\n      {children}\n    </FormSubmissionModelContext.Provider>\n  )\n}\n\nexport default function useFormSubmissionModel() {\n  const formSubmissionModelContext = React.useContext(\n    FormSubmissionModelContext,\n  )\n  if (!formSubmissionModelContext) {\n    throw new Error(\n      '\"FormSubmissionModelContext\" does not have a value in this context',\n    )\n  }\n  return formSubmissionModelContext\n}\n\nexport function useFormSubmissionModelParent() {\n  let formSubmissionModelContext = useFormSubmissionModel()\n  while (formSubmissionModelContext.parent) {\n    formSubmissionModelContext = formSubmissionModelContext.parent\n  }\n  return formSubmissionModelContext\n}\n"]}
+{"version":3,"file":"useFormSubmissionModelContext.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionModelContext.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,wBAAwB,MAAM,sCAAsC,CAAA;AAS3E,MAAM,0BAA0B,GAAG,KAAK,CAAC,aAAa,CAEpD,SAAS,CAAC,CAAA;AAEZ,MAAM,UAAU,kCAAkC,CAAC,EACjD,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,8BAA8B,GAM/B;IACC,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACjD,0BAA0B,CAC3B,CAAA;IACD,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC/B,OAAO;YACL,mBAAmB,EAAE,wBAAwB,CAC3C,KAAK,EACL,QAAQ,EACR,8BAA8B,EAC9B,IAAI,CACL,CAAC,KAAK;YACP,MAAM,EAAE,0BAA0B;YAClC,QAAQ;SACT,CAAA;IACH,CAAC,EAAE;QACD,KAAK;QACL,QAAQ;QACR,8BAA8B;QAC9B,0BAA0B;KAC3B,CAAC,CAAA;IACF,OAAO,CACL,oBAAC,0BAA0B,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAC9C,QAAQ,CAC2B,CACvC,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,sBAAsB;IAC5C,MAAM,0BAA0B,GAAG,KAAK,CAAC,UAAU,CACjD,0BAA0B,CAC3B,CAAA;IACD,IAAI,CAAC,0BAA0B,EAAE;QAC/B,MAAM,IAAI,KAAK,CACb,oEAAoE,CACrE,CAAA;KACF;IACD,OAAO,0BAA0B,CAAA;AACnC,CAAC;AAED,MAAM,UAAU,4BAA4B;IAC1C,IAAI,0BAA0B,GAAG,sBAAsB,EAAE,CAAA;IACzD,OAAO,0BAA0B,CAAC,MAAM,EAAE;QACxC,0BAA0B,GAAG,0BAA0B,CAAC,MAAM,CAAA;KAC/D;IACD,OAAO,0BAA0B,CAAA;AACnC,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport { FormElement } from '@oneblink/types/typescript/forms'\nimport * as React from 'react'\nimport cleanFormSubmissionModel from '../services/cleanFormSubmissionModel'\nimport { FormElementsConditionallyShown } from '../types/form'\n\nexport type FormSubmissionModelContextValue = {\n  formSubmissionModel: SubmissionTypes.S3SubmissionData['submission']\n  parent?: FormSubmissionModelContextValue\n  elements: FormElement[]\n}\n\nconst FormSubmissionModelContext = React.createContext<\n  FormSubmissionModelContextValue | undefined\n>(undefined)\n\nexport function FormSubmissionModelContextProvider({\n  children,\n  model,\n  elements,\n  formElementsConditionallyShown,\n}: {\n  model: SubmissionTypes.S3SubmissionData['submission']\n  elements: FormTypes.FormElement[]\n  formElementsConditionallyShown: FormElementsConditionallyShown | undefined\n  children: React.ReactNode\n}) {\n  const formSubmissionModelContext = React.useContext(\n    FormSubmissionModelContext,\n  )\n  const value = React.useMemo(() => {\n    return {\n      formSubmissionModel: cleanFormSubmissionModel(\n        model,\n        elements,\n        formElementsConditionallyShown,\n        true,\n      ).model,\n      parent: formSubmissionModelContext,\n      elements,\n    }\n  }, [\n    model,\n    elements,\n    formElementsConditionallyShown,\n    formSubmissionModelContext,\n  ])\n  return (\n    <FormSubmissionModelContext.Provider value={value}>\n      {children}\n    </FormSubmissionModelContext.Provider>\n  )\n}\n\nexport default function useFormSubmissionModel() {\n  const formSubmissionModelContext = React.useContext(\n    FormSubmissionModelContext,\n  )\n  if (!formSubmissionModelContext) {\n    throw new Error(\n      '\"FormSubmissionModelContext\" does not have a value in this context',\n    )\n  }\n  return formSubmissionModelContext\n}\n\nexport function useFormSubmissionModelParent() {\n  let formSubmissionModelContext = useFormSubmissionModel()\n  while (formSubmissionModelContext.parent) {\n    formSubmissionModelContext = formSubmissionModelContext.parent\n  }\n  return formSubmissionModelContext\n}\n"]}

package/dist/hooks/useFormSubmissionState.d.ts

@@ -1,12 +1,52 @@
 import * as React from 'react';
-import { FormTypes } from '@oneblink/types';
-import { FormSubmissionModel } from '../types/form';
-export default function useFormSubmissionState(form: FormTypes.Form, initialSubmission?: FormSubmissionModel, lastElementUpdated?: FormTypes.FormElement): [{
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+/**
+ * This function is a simple wrapper around the react hook `useState()`. The
+ * results can be passed to the [`<OneBlinkForm
+ * />`](https://oneblink.github.io/apps-react/somewhere) //TODO: Fix link
+ * component.
+ *
+ * ## Example
+ *
+ * ```js
+ * import {
+ *   useFormSubmissionState,
+ *   OneBlinkFormControlled,
+ * } from '@oneblink/apps-react'
+ *
+ * function Uncontrolled({ form, initialSubmission, ...props }) {
+ *   const [{ definition, submission }, setFormSubmission] =
+ *     useFormSubmissionState(form, initialSubmission)
+ *
+ *   return (
+ *     <OneBlinkFormControlled
+ *       {...props}
+ *       definition={definition}
+ *       submission={submission}
+ *       setFormSubmission={setFormSubmission}
+ *       lastElementUpdated={lastElementUpdated}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param form The OneBlink Form to render
+ * @param initialSubmission The initial submission data to populate the form
+ *   with
+ * @param lastElementUpdated
+ * @returns
+ * @group Hooks
+ */
+export default function useFormSubmissionState(form: FormTypes.Form, initialSubmission?: SubmissionTypes.S3SubmissionData['submission'], lastElementUpdated?: FormTypes.FormElement): [{
     definition: FormTypes.Form;
-    submission: FormSubmissionModel;
+    submission: {
+        [name: string]: unknown;
+    };
     lastElementUpdated: FormTypes.FormElement | undefined;
 }, React.Dispatch<React.SetStateAction<{
     definition: FormTypes.Form;
-    submission: FormSubmissionModel;
+    submission: {
+        [name: string]: unknown;
+    };
     lastElementUpdated: FormTypes.FormElement | undefined;
 }>>];

package/dist/hooks/useFormSubmissionState.js

@@ -1,6 +1,43 @@
 import * as React from 'react';
 import _cloneDeep from 'lodash.clonedeep';
 import generateDefaultData from '../services/generate-default-data';
+/**
+ * This function is a simple wrapper around the react hook `useState()`. The
+ * results can be passed to the [`<OneBlinkForm
+ * />`](https://oneblink.github.io/apps-react/somewhere) //TODO: Fix link
+ * component.
+ *
+ * ## Example
+ *
+ * ```js
+ * import {
+ *   useFormSubmissionState,
+ *   OneBlinkFormControlled,
+ * } from '@oneblink/apps-react'
+ *
+ * function Uncontrolled({ form, initialSubmission, ...props }) {
+ *   const [{ definition, submission }, setFormSubmission] =
+ *     useFormSubmissionState(form, initialSubmission)
+ *
+ *   return (
+ *     <OneBlinkFormControlled
+ *       {...props}
+ *       definition={definition}
+ *       submission={submission}
+ *       setFormSubmission={setFormSubmission}
+ *       lastElementUpdated={lastElementUpdated}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @param form The OneBlink Form to render
+ * @param initialSubmission The initial submission data to populate the form
+ *   with
+ * @param lastElementUpdated
+ * @returns
+ * @group Hooks
+ */
 export default function useFormSubmissionState(form, initialSubmission, lastElementUpdated) {
     return React.useState(() => {
         const definition = _cloneDeep(form);

package/dist/hooks/useFormSubmissionState.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormSubmissionState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AAGnE,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,IAAoB,EACpB,iBAAuC,EACvC,kBAA0C;IAE1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QACzB,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QACnC,MAAM,WAAW,GAAG,mBAAmB,CACrC,UAAU,CAAC,QAAQ,EACnB,iBAAiB,IAAI,EAAE,CACxB,CAAA;QACD,OAAO;YACL,UAAU;YACV,UAAU,EAAE,WAAW;YACvB,kBAAkB;SACnB,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import * as React from 'react'\nimport _cloneDeep from 'lodash.clonedeep'\nimport { FormTypes } from '@oneblink/types'\nimport generateDefaultData from '../services/generate-default-data'\nimport { FormSubmissionModel } from '../types/form'\n\nexport default function useFormSubmissionState(\n  form: FormTypes.Form,\n  initialSubmission?: FormSubmissionModel,\n  lastElementUpdated?: FormTypes.FormElement,\n) {\n  return React.useState(() => {\n    const definition = _cloneDeep(form)\n    const defaultData = generateDefaultData(\n      definition.elements,\n      initialSubmission || {},\n    )\n    return {\n      definition,\n      submission: defaultData,\n      lastElementUpdated,\n    }\n  })\n}\n"]}
+{"version":3,"file":"useFormSubmissionState.js","sourceRoot":"","sources":["../../src/hooks/useFormSubmissionState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,UAAU,MAAM,kBAAkB,CAAA;AAEzC,OAAO,mBAAmB,MAAM,mCAAmC,CAAA;AACnE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,IAAoB,EACpB,iBAAkE,EAClE,kBAA0C;IAE1C,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE;QACzB,MAAM,UAAU,GAAG,UAAU,CAAC,IAAI,CAAC,CAAA;QACnC,MAAM,WAAW,GAAG,mBAAmB,CACrC,UAAU,CAAC,QAAQ,EACnB,iBAAiB,IAAI,EAAE,CACxB,CAAA;QACD,OAAO;YACL,UAAU;YACV,UAAU,EAAE,WAAW;YACvB,kBAAkB;SACnB,CAAA;IACH,CAAC,CAAC,CAAA;AACJ,CAAC","sourcesContent":["import * as React from 'react'\nimport _cloneDeep from 'lodash.clonedeep'\nimport { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport generateDefaultData from '../services/generate-default-data'\n/**\n * This function is a simple wrapper around the react hook `useState()`. The\n * results can be passed to the [`<OneBlinkForm\n * />`](https://oneblink.github.io/apps-react/somewhere) //TODO: Fix link\n * component.\n *\n * ## Example\n *\n * ```js\n * import {\n *   useFormSubmissionState,\n *   OneBlinkFormControlled,\n * } from '@oneblink/apps-react'\n *\n * function Uncontrolled({ form, initialSubmission, ...props }) {\n *   const [{ definition, submission }, setFormSubmission] =\n *     useFormSubmissionState(form, initialSubmission)\n *\n *   return (\n *     <OneBlinkFormControlled\n *       {...props}\n *       definition={definition}\n *       submission={submission}\n *       setFormSubmission={setFormSubmission}\n *       lastElementUpdated={lastElementUpdated}\n *     />\n *   )\n * }\n * ```\n *\n * @param form The OneBlink Form to render\n * @param initialSubmission The initial submission data to populate the form\n *   with\n * @param lastElementUpdated\n * @returns\n * @group Hooks\n */\nexport default function useFormSubmissionState(\n  form: FormTypes.Form,\n  initialSubmission?: SubmissionTypes.S3SubmissionData['submission'],\n  lastElementUpdated?: FormTypes.FormElement,\n) {\n  return React.useState(() => {\n    const definition = _cloneDeep(form)\n    const defaultData = generateDefaultData(\n      definition.elements,\n      initialSubmission || {},\n    )\n    return {\n      definition,\n      submission: defaultData,\n      lastElementUpdated,\n    }\n  })\n}\n"]}

package/dist/hooks/useFormValidation.d.ts

@@ -1,7 +1,7 @@
-import { FormTypes } from '@oneblink/types';
-import { FormElementsConditionallyShown, FormSubmissionModel } from '../types/form';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
+import { FormElementsConditionallyShown } from '../types/form';
 export default function useFormValidation(pages: FormTypes.PageElement[]): {
     executedLookup: (element: FormTypes.LookupFormElement) => void;
     executeLookupFailed: (element: FormTypes.LookupFormElement) => void;
-    validate: (submission: FormSubmissionModel, formElementsConditionallyShown: FormElementsConditionallyShown) => import("../types/form").FormElementsValidation | undefined;
+    validate: (submission: SubmissionTypes.S3SubmissionData['submission'], formElementsConditionallyShown: FormElementsConditionallyShown) => import("../types/form").FormElementsValidation | undefined;
 };

package/dist/hooks/useFormValidation.js.map

@@ -1 +1 @@
-{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAMpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;aACF;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC;gBACpB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;aACF;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;aAC9B;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAA8C,EAAE,EAAE;YACjD,IAAI,oCAAoC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBAC7D,OAAO,oCAAoC,CAAA;aAC5C;YACD,OAAO,CAAC,GAAG,oCAAoC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;QAC9D,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAAoC,EAAE,EAAE;YACvC,OAAO,oCAAoC,CAAC,MAAM,CAChD,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CACxC,CAAA;QACH,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAC7B,uBAAuB,EACvB,6BAA6B,CAC9B,CAAA;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAA;IAE5D,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA+B,EAC/B,8BAA8D,EAC9D,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,CAC/B,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,cAAc;QACd,mBAAmB;QACnB,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport {\n  FormElementsConditionallyShown,\n  FormSubmissionModel,\n} from '../types/form'\n\nfunction stripFormElementsWithoutName(\n  formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n  return formElements.reduce<FormTypes.FormElementWithName[]>(\n    (memo, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          return [\n            ...memo,\n            ...stripFormElementsWithoutName(formElement.elements),\n          ]\n        }\n        case 'infoPage':\n        case 'form':\n        case 'repeatableSet': {\n          return [\n            ...memo,\n            {\n              ...formElement,\n              elements: stripFormElementsWithoutName(\n                formElement.elements || [],\n              ),\n            },\n          ]\n        }\n        default: {\n          return [...memo, formElement]\n        }\n      }\n    },\n    [],\n  )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const [elementIdsWithLookupsExecuted, setElementIdsWithLookupsExecuted] =\n    React.useState<string[]>([])\n\n  const executedLookup = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted: string[]) => {\n          if (currentElementIdsWithLookupsExecuted.includes(element.id)) {\n            return currentElementIdsWithLookupsExecuted\n          }\n          return [...currentElementIdsWithLookupsExecuted, element.id]\n        },\n      )\n    },\n    [],\n  )\n  const executeLookupFailed = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted) => {\n          return currentElementIdsWithLookupsExecuted.filter(\n            (elementId) => elementId !== element.id,\n          )\n        },\n      )\n    },\n    [],\n  )\n\n  const formElementsWithoutName = React.useMemo(() => {\n    return stripFormElementsWithoutName(pages)\n  }, [pages])\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(\n      formElementsWithoutName,\n      elementIdsWithLookupsExecuted,\n    )\n  }, [formElementsWithoutName, elementIdsWithLookupsExecuted])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: FormSubmissionModel,\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    executedLookup,\n    executeLookupFailed,\n    validate: handleValidate,\n  }\n}\n"]}
+{"version":3,"file":"useFormValidation.js","sourceRoot":"","sources":["../../src/hooks/useFormValidation.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EACL,kBAAkB,EAClB,wBAAwB,GACzB,MAAM,6BAA6B,CAAA;AAGpC,SAAS,4BAA4B,CACnC,YAAqC;IAErC,OAAO,YAAY,CAAC,MAAM,CACxB,CAAC,IAAI,EAAE,WAAW,EAAE,EAAE;QACpB,QAAQ,WAAW,CAAC,IAAI,EAAE;YACxB,KAAK,MAAM,CAAC;YACZ,KAAK,SAAS,CAAC,CAAC;gBACd,OAAO;oBACL,GAAG,IAAI;oBACP,GAAG,4BAA4B,CAAC,WAAW,CAAC,QAAQ,CAAC;iBACtD,CAAA;aACF;YACD,KAAK,UAAU,CAAC;YAChB,KAAK,MAAM,CAAC;YACZ,KAAK,eAAe,CAAC,CAAC;gBACpB,OAAO;oBACL,GAAG,IAAI;oBACP;wBACE,GAAG,WAAW;wBACd,QAAQ,EAAE,4BAA4B,CACpC,WAAW,CAAC,QAAQ,IAAI,EAAE,CAC3B;qBACF;iBACF,CAAA;aACF;YACD,OAAO,CAAC,CAAC;gBACP,OAAO,CAAC,GAAG,IAAI,EAAE,WAAW,CAAC,CAAA;aAC9B;SACF;IACH,CAAC,EACD,EAAE,CACH,CAAA;AACH,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,KAA8B;IACtE,MAAM,CAAC,6BAA6B,EAAE,gCAAgC,CAAC,GACrE,KAAK,CAAC,QAAQ,CAAW,EAAE,CAAC,CAAA;IAE9B,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAA8C,EAAE,EAAE;YACjD,IAAI,oCAAoC,CAAC,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE;gBAC7D,OAAO,oCAAoC,CAAA;aAC5C;YACD,OAAO,CAAC,GAAG,oCAAoC,EAAE,OAAO,CAAC,EAAE,CAAC,CAAA;QAC9D,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IACD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAC3C,CAAC,OAAoC,EAAE,EAAE;QACvC,gCAAgC,CAC9B,CAAC,oCAAoC,EAAE,EAAE;YACvC,OAAO,oCAAoC,CAAC,MAAM,CAChD,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,EAAE,CACxC,CAAA;QACH,CAAC,CACF,CAAA;IACH,CAAC,EACD,EAAE,CACH,CAAA;IAED,MAAM,uBAAuB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjD,OAAO,4BAA4B,CAAC,KAAK,CAAC,CAAA;IAC5C,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAA;IAEX,MAAM,gBAAgB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC1C,OAAO,wBAAwB,CAC7B,uBAAuB,EACvB,6BAA6B,CAC9B,CAAA;IACH,CAAC,EAAE,CAAC,uBAAuB,EAAE,6BAA6B,CAAC,CAAC,CAAA;IAE5D,MAAM,cAAc,GAAG,KAAK,CAAC,WAAW,CACtC,CACE,UAA0D,EAC1D,8BAA8D,EAC9D,EAAE;QACF,OAAO,kBAAkB,CACvB,gBAAgB,EAChB,UAAU,EACV,8BAA8B,CAC/B,CAAA;IACH,CAAC,EACD,CAAC,gBAAgB,CAAC,CACnB,CAAA;IAED,OAAO;QACL,cAAc;QACd,mBAAmB;QACnB,QAAQ,EAAE,cAAc;KACzB,CAAA;AACH,CAAC","sourcesContent":["import { FormTypes, SubmissionTypes } from '@oneblink/types'\nimport * as React from 'react'\n\nimport {\n  validateSubmission,\n  generateValidationSchema,\n} from '../services/form-validation'\nimport { FormElementsConditionallyShown } from '../types/form'\n\nfunction stripFormElementsWithoutName(\n  formElements: FormTypes.FormElement[],\n): FormTypes.FormElementWithName[] {\n  return formElements.reduce<FormTypes.FormElementWithName[]>(\n    (memo, formElement) => {\n      switch (formElement.type) {\n        case 'page':\n        case 'section': {\n          return [\n            ...memo,\n            ...stripFormElementsWithoutName(formElement.elements),\n          ]\n        }\n        case 'infoPage':\n        case 'form':\n        case 'repeatableSet': {\n          return [\n            ...memo,\n            {\n              ...formElement,\n              elements: stripFormElementsWithoutName(\n                formElement.elements || [],\n              ),\n            },\n          ]\n        }\n        default: {\n          return [...memo, formElement]\n        }\n      }\n    },\n    [],\n  )\n}\n\nexport default function useFormValidation(pages: FormTypes.PageElement[]) {\n  const [elementIdsWithLookupsExecuted, setElementIdsWithLookupsExecuted] =\n    React.useState<string[]>([])\n\n  const executedLookup = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted: string[]) => {\n          if (currentElementIdsWithLookupsExecuted.includes(element.id)) {\n            return currentElementIdsWithLookupsExecuted\n          }\n          return [...currentElementIdsWithLookupsExecuted, element.id]\n        },\n      )\n    },\n    [],\n  )\n  const executeLookupFailed = React.useCallback(\n    (element: FormTypes.LookupFormElement) => {\n      setElementIdsWithLookupsExecuted(\n        (currentElementIdsWithLookupsExecuted) => {\n          return currentElementIdsWithLookupsExecuted.filter(\n            (elementId) => elementId !== element.id,\n          )\n        },\n      )\n    },\n    [],\n  )\n\n  const formElementsWithoutName = React.useMemo(() => {\n    return stripFormElementsWithoutName(pages)\n  }, [pages])\n\n  const validationSchema = React.useMemo(() => {\n    return generateValidationSchema(\n      formElementsWithoutName,\n      elementIdsWithLookupsExecuted,\n    )\n  }, [formElementsWithoutName, elementIdsWithLookupsExecuted])\n\n  const handleValidate = React.useCallback(\n    (\n      submission: SubmissionTypes.S3SubmissionData['submission'],\n      formElementsConditionallyShown: FormElementsConditionallyShown,\n    ) => {\n      return validateSubmission(\n        validationSchema,\n        submission,\n        formElementsConditionallyShown,\n      )\n    },\n    [validationSchema],\n  )\n\n  return {\n    executedLookup,\n    executeLookupFailed,\n    validate: handleValidate,\n  }\n}\n"]}

package/dist/hooks/useInjectPages.d.ts

@@ -1,7 +1,6 @@
-import { FormTypes } from '@oneblink/types';
+import { FormTypes, SubmissionTypes } from '@oneblink/types';
 import * as React from 'react';
-import { FormSubmissionModel } from '../types/form';
-type InjectPagesContextValue = (lookupFormElement: FormTypes.LookupFormElement, pageElements: FormTypes.PageElement[], data?: FormSubmissionModel) => void;
+type InjectPagesContextValue = (lookupFormElement: FormTypes.LookupFormElement, pageElements: FormTypes.PageElement[], data?: SubmissionTypes.S3SubmissionData['submission']) => void;
 export declare const InjectPagesContext: React.Context<InjectPagesContextValue>;
 export default function useInjectPages(): InjectPagesContextValue;
 export {};