piral-forms 1.9.2 → 1.10.0-beta.22286977124

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2019 - 2025 smapiot
+Copyright (c) 2019 - 2026 smapiot
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -37,6 +37,17 @@ Returns a higher-order component for providing the form-related props such as `e
 
 ## Usage
 
+When creating a new form the following options are relevant:
+
+- `allowSubmitUnchanged` allows you to disable the default behavior of not submitting forms when the form's data is unchanged
+- `silent` will prevent dialogs to show up when the user is to navigate away from the form containing changed data
+- Setting `wait` to `false` will not immediately navigate away from forms upon submission
+- The data loss message (in case of navigations when the form has changed data) can be set via `message`
+- `loadData` is an optional function that can be set to define how the initial form data is loaded
+- `emptyData` is the initial form data
+- `onSubmit` is the callback to use when a form has been submitted
+- `onChange` is the callback to use when the form data has changed
+
 ::: summary: For pilet authors
 
 You can use the `createForm` function from the Pilet API to create a global state container managed form inside the Piral instance.
@@ -58,11 +69,37 @@ export function setup(piral: PiletApi) {
       // return promise with data
     },
   });
-  piral.registerPage('/sample-form', withSimpleForm(MyPage));
+  piral.registerPage('/sample-form', withSimpleForm(MyPage)); // changes <MyPage /> to <form><MyPage /></form>
 }
 ```
 
-Calling `createForm` returns a higher-order component that injects new props from the `FormProps<TFormData>` interface into the component. These props contain among others a `formData` record and a `submit` function.
+Calling `createForm` returns a higher-order component that 
+
+1. injects new props from the `FormProps<TFormData>` interface into the component and
+2. wraps the component into a `<form>` element.
+
+The injected props contain - among the originally defined props - a `formData` record and a `submit` function.
+
+If you wish to avoid the `<form>` element wrapping then provide an argument `skipForm` such as:
+
+```ts
+import { PiletApi } from '<name-of-piral-instance>';
+import { MyPage } from './MyPage';
+
+export function setup(piral: PiletApi) {
+  const withSimpleForm = piral.createForm({
+    message: `Really lose the data?`,
+    emptyData: {
+      firstName: '',
+      lastName: '',
+    },
+    onSubmit(data) {
+      // return promise with data
+    },
+  });
+  piral.registerPage('/sample-form', withSimpleForm(MyPage, { skipForm: true })); // does not change <MyPage />
+}
+```
 
 :::
 
@@ -88,6 +125,12 @@ const instance = createInstance({
 
 There are no options available.
 
+Using the library directly also allows you to use the provided hooks direcly:
+
+- `useForm` is used implicitly in the higher-order component to create the dynamic form handler data
+- `withForm` creates an higher-order component for the provided component using the given options - this HOC still wraps the provided component in a `<form>`
+- `withFormHandler` creates an higher-order component for the provided component using the given options - without wrapping the provided component in a `<form>`
+
 :::
 
 ## License

package/lib/actions.d.ts

@@ -1,3 +1,3 @@
 import { GlobalStateContext } from 'piral-core';
-import { FormDataState } from './types';
+import type { FormDataState } from './types';
 export declare function updateFormState(ctx: GlobalStateContext, id: string, initial: FormDataState, patch: Partial<FormDataState>): void;

package/lib/actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAG5E,SAAS,eAAe,CAAC,QAAuB,EAAE,KAA6B;IAC7E,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QACnD,OAAO,eAAe,CAAC;IACzB,CAAC;IAED,OAAO,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,UAAU,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC;AACjG,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,GAAuB,EACvB,EAAU,EACV,OAAsB,EACtB,KAA6B;IAE7B,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG;YACf,GAAG,OAAO;YACV,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;YAC1B,GAAG,KAAK;SACT,CAAC;QACF,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACtD,OAAO;YACL,GAAG,KAAK;YACR,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,EAAE,YAAY,CAAC;SAChD,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}
+{"version":3,"file":"actions.js","sourceRoot":"","sources":["../src/actions.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,eAAe,EAAsB,MAAM,YAAY,CAAC;AAI5E,SAAS,eAAe,CAAC,QAAuB,EAAE,KAA6B;IAC7E,IAAI,KAAK,CAAC,MAAM,KAAK,KAAK,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QACnD,OAAO,eAAe,CAAC;IACzB,CAAC;IAED,OAAO,QAAQ,CAAC,MAAM,IAAI,QAAQ,CAAC,UAAU,IAAI,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC;AACjG,CAAC;AAED,MAAM,UAAU,eAAe,CAC7B,GAAuB,EACvB,EAAU,EACV,OAAsB,EACtB,KAA6B;IAE7B,GAAG,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE;QACrB,MAAM,QAAQ,GAAG;YACf,GAAG,OAAO;YACV,GAAG,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;YAC1B,GAAG,KAAK;SACT,CAAC;QACF,MAAM,YAAY,GAAG,eAAe,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC;QACtD,OAAO;YACL,GAAG,KAAK;YACR,KAAK,EAAE,SAAS,CAAC,KAAK,CAAC,KAAK,EAAE,EAAE,EAAE,YAAY,CAAC;SAChD,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}

package/lib/create.d.ts

@@ -1,5 +1,5 @@
 import { PiralPlugin } from 'piral-core';
-import { PiletFormsApi } from './types';
+import type { PiletFormsApi } from './types';
 /**
  * Available configuration options for the forms plugin.
  */

package/lib/create.js

@@ -1,5 +1,6 @@
 import * as actions from './actions';
 import { withForm } from './withForm';
+import { withFormHandler } from './withFormHandler';
 /**
  * Creates new Pilet API extensions for enhancing forms.
  */
@@ -12,7 +13,10 @@ export function createFormsApi(config = {}) {
         }));
         return {
             createForm(options) {
-                return (component) => withForm(component, options);
+                return (component, config) => {
+                    const hoc = config?.skipForm ? withFormHandler : withForm;
+                    return hoc(component, options);
+                };
             },
         };
     };

package/lib/create.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAErC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,KAAK;YACR,KAAK,EAAE,EAAE;SACV,CAAC,CAAC,CAAC;QAEJ,OAAO;YACL,UAAU,CAAC,OAAO;gBAChB,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,QAAQ,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACrD,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}
+{"version":3,"file":"create.js","sourceRoot":"","sources":["../src/create.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,OAAO,MAAM,WAAW,CAAC;AAGrC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAQpD;;GAEG;AACH,MAAM,UAAU,cAAc,CAAC,SAAsB,EAAE;IACrD,OAAO,CAAC,OAAO,EAAE,EAAE;QACjB,OAAO,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/B,OAAO,CAAC,QAAQ,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YAC3B,GAAG,KAAK;YACR,KAAK,EAAE,EAAE;SACV,CAAC,CAAC,CAAC;QAEJ,OAAO;YACL,UAAU,CAAC,OAAO;gBAChB,OAAO,CAAC,SAAS,EAAE,MAAM,EAAE,EAAE;oBAC3B,MAAM,GAAG,GAAG,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,QAAQ,CAAC;oBAC1D,OAAO,GAAG,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;gBACjC,CAAC,CAAC;YACJ,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/lib/index.d.ts

@@ -2,4 +2,5 @@ export * from './create';
 export * from './types';
 export * from './useForm';
 export * from './usePrompt';
+export * from './withFormHandler';
 export * from './withForm';

package/lib/index.js

@@ -2,5 +2,6 @@ export * from './create';
 export * from './types';
 export * from './useForm';
 export * from './usePrompt';
+export * from './withFormHandler';
 export * from './withForm';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,mBAAmB,CAAC;AAClC,cAAc,YAAY,CAAC"}

package/lib/types.d.ts

@@ -118,13 +118,22 @@ export interface FormCreator<TFormData, TRequiredProps> {
     /**
      * Form function for wrapping a component.
      */
-    <TProps extends TRequiredProps>(component: ComponentType<TProps & FormProps<TFormData>>): FC<TProps>;
+    <TProps extends TRequiredProps>(component: ComponentType<TProps & FormProps<TFormData>>, config?: {
+        /**
+         * Indicates if the wrapping `<form>` element should be omitted.
+         */
+        skipForm?: boolean;
+    }): FC<TProps>;
 }
 /**
  * Potential value types for defining a prompt message.
  */
 export type PromptMessage = string | (() => string);
 export interface InputFormOptions<TFormData, TProps> {
+    /**
+     * If enabled does not prevent submission of unchanged forms.
+     */
+    allowSubmitUnchanged?: boolean;
     /**
      * If enabled does not notify the user that form data could be lost on page transitions.
      */

package/lib/useForm.d.ts

@@ -1,5 +1,5 @@
 import { NavigationApi } from 'piral-core';
-import { FormProps, InputFormOptions } from './types';
+import type { FormProps, InputFormOptions } from './types';
 /**
  * Hook for using a form locally that blocks if a transition is performed.
  * @param initialData The initial data of the form.

package/lib/useForm.js

@@ -61,7 +61,7 @@ function createProps(id, state, updateState, options) {
         error: state.error,
         submit(e) {
             e && e.preventDefault();
-            if (state.changed) {
+            if (options.allowSubmitUnchanged || state.changed) {
                 submitData(id, state, updateState, options);
             }
             return false;

package/lib/useForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../src/useForm.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useForm.js","sourceRoot":"","sources":["../src/useForm.ts"],"names":[],"mappings":"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"}

package/lib/usePrompt.d.ts

@@ -1,5 +1,5 @@
 import { NavigationApi, NavigationListener } from 'piral-core';
-import { PromptMessage } from './types';
+import type { PromptMessage } from './types';
 /**
  * Hook to notify the user in case of potential data loss when
  * performing a page transition (internal or external).

package/lib/usePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePrompt.js","sourceRoot":"","sources":["../src/usePrompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAwD,MAAM,YAAY,CAAC;AAG1F;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,MAAe,EACf,UAAyB,EACzB,OAAsB,EACtB,YAAiC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE;gBAC7C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;gBAClD,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC;gBACrB,OAAO,GAAG,CAAC;YACb,CAAC,CAAC;YACF,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACjE,MAAM,OAAO,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC;YACxE,MAAM,OAAO,GAAG,OAAO,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YACtD,OAAO,GAAG,EAAE;gBACV,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBACvB,OAAO,IAAI,OAAO,EAAE,CAAC;gBACrB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAC3D,CAAC,CAAC;QACJ,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACxB,CAAC"}
+{"version":3,"file":"usePrompt.js","sourceRoot":"","sources":["../src/usePrompt.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,MAAM,EAAwD,MAAM,YAAY,CAAC;AAI1F;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,MAAe,EACf,UAAyB,EACzB,OAAsB,EACtB,YAAiC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,MAAM,EAAE,CAAC;YACX,MAAM,YAAY,GAAG,CAAC,EAAqB,EAAE,EAAE;gBAC7C,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;gBAClD,EAAE,CAAC,WAAW,GAAG,GAAG,CAAC;gBACrB,OAAO,GAAG,CAAC;YACb,CAAC,CAAC;YACF,MAAM,QAAQ,GAAG,YAAY,IAAI,UAAU,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YACjE,MAAM,OAAO,GAAG,OAAO,OAAO,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,OAAO,CAAC;YACxE,MAAM,OAAO,GAAG,OAAO,IAAI,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YACrD,MAAM,CAAC,gBAAgB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YACtD,OAAO,GAAG,EAAE;gBACV,QAAQ,IAAI,QAAQ,EAAE,CAAC;gBACvB,OAAO,IAAI,OAAO,EAAE,CAAC;gBACrB,MAAM,CAAC,mBAAmB,CAAC,cAAc,EAAE,YAAY,CAAC,CAAC;YAC3D,CAAC,CAAC;QACJ,CAAC;QAED,OAAO,GAAG,EAAE,GAAE,CAAC,CAAC;IAClB,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC;AACxB,CAAC"}

package/lib/withForm.d.ts

@@ -1,3 +1,3 @@
 import * as React from 'react';
-import { InputFormOptions, FormProps } from './types';
+import type { InputFormOptions, FormProps } from './types';
 export declare function withForm<TFormData, TRequiredProps, TProps extends TRequiredProps>(Component: React.ComponentType<TProps & FormProps<TFormData>>, options: InputFormOptions<TFormData, TRequiredProps>): React.FC<TProps>;

package/lib/withForm.js

@@ -1,28 +1,9 @@
 import * as React from 'react';
-import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
-import { useForm } from './useForm';
-import { usePromise } from './usePromise';
+import { withFormHandler } from './withFormHandler';
 export function withForm(Component, options) {
-    const FormView = (props) => {
-        const { navigation } = useGlobalStateContext();
-        const formProps = useForm(props.initialData, navigation, options);
-        return (React.createElement("form", { onSubmit: formProps.submit },
-            React.createElement(Component, { ...props, ...formProps })));
-    };
-    const FormLoader = (props) => {
-        const { loadData, emptyData } = options;
-        const { loading, data, error } = usePromise(() => typeof loadData !== 'function' ? Promise.resolve(emptyData) : loadData(props));
-        if (loading) {
-            return React.createElement(RegisteredLoadingIndicator, null);
-        }
-        else if (data) {
-            return React.createElement(FormView, { ...props, initialData: data });
-        }
-        else {
-            return React.createElement(RegisteredErrorInfo, { type: "form", error: error });
-        }
-    };
-    FormLoader.displayName = `withForm(${Component.displayName ?? 'Component'})`;
-    return FormLoader;
+    const WrappedComponent = withFormHandler((props) => (React.createElement("form", { onSubmit: props.submit },
+        React.createElement(Component, { ...props }))), options);
+    WrappedComponent.displayName = `withForm(${Component.displayName ?? 'Component'})`;
+    return WrappedComponent;
 }
 //# sourceMappingURL=withForm.js.map

package/lib/withForm.js.map

@@ -1 +1 @@
-{"version":3,"file":"withForm.js","sourceRoot":"","sources":["../src/withForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AACpG,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,MAAM,UAAU,QAAQ,CACtB,SAA6D,EAC7D,OAAoD;IAEpD,MAAM,QAAQ,GAAkD,CAAC,KAAK,EAAE,EAAE;QACxE,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;QAClE,OAAO,CACL,8BAAM,QAAQ,EAAE,SAAS,CAAC,MAAM;YAC9B,oBAAC,SAAS,OAAK,KAAK,KAAM,SAAS,GAAI,CAClC,CACR,CAAC;IACJ,CAAC,CAAC;IACF,MAAM,UAAU,GAAqB,CAAC,KAAK,EAAE,EAAE;QAC7C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;QACxC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAC/C,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAC9E,CAAC;QAEF,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,oBAAC,0BAA0B,OAAG,CAAC;QACxC,CAAC;aAAM,IAAI,IAAI,EAAE,CAAC;YAChB,OAAO,oBAAC,QAAQ,OAAK,KAAK,EAAE,WAAW,EAAE,IAAI,GAAI,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,OAAO,oBAAC,mBAAmB,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAC3D,CAAC;IACH,CAAC,CAAC;IACF,UAAU,CAAC,WAAW,GAAG,YAAY,SAAS,CAAC,WAAW,IAAI,WAAW,GAAG,CAAC;IAE7E,OAAO,UAAU,CAAC;AACpB,CAAC"}
+{"version":3,"file":"withForm.js","sourceRoot":"","sources":["../src/withForm.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,MAAM,UAAU,QAAQ,CACtB,SAA6D,EAC7D,OAAoD;IAEpD,MAAM,gBAAgB,GAAG,eAAe,CACtC,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,8BAAM,QAAQ,EAAE,KAAK,CAAC,MAAM;QAC1B,oBAAC,SAAS,OAAK,KAAK,GAAI,CACnB,CACR,EACD,OAAO,CACR,CAAC;IACF,gBAAgB,CAAC,WAAW,GAAG,YAAY,SAAS,CAAC,WAAW,IAAI,WAAW,GAAG,CAAC;IACnF,OAAO,gBAAgB,CAAC;AAC1B,CAAC"}

package/lib/withFormHandler.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { InputFormOptions, FormProps } from './types';
+export declare function withFormHandler<TFormData, TRequiredProps, TProps extends TRequiredProps>(Component: React.ComponentType<TProps & FormProps<TFormData>>, options: InputFormOptions<TFormData, TRequiredProps>): React.FC<TProps>;

package/lib/withFormHandler.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
+import { useForm } from './useForm';
+import { usePromise } from './usePromise';
+export function withFormHandler(Component, options) {
+    const FormView = (props) => {
+        const { navigation } = useGlobalStateContext();
+        const formProps = useForm(props.initialData, navigation, options);
+        return React.createElement(Component, { ...props, ...formProps });
+    };
+    const FormLoader = (props) => {
+        const { loadData, emptyData } = options;
+        const { loading, data, error } = usePromise(() => typeof loadData !== 'function' ? Promise.resolve(emptyData) : loadData(props));
+        if (loading) {
+            return React.createElement(RegisteredLoadingIndicator, null);
+        }
+        else if (data) {
+            return React.createElement(FormView, { ...props, initialData: data });
+        }
+        else {
+            return React.createElement(RegisteredErrorInfo, { type: "form", error: error });
+        }
+    };
+    FormLoader.displayName = `withFormHandler(${Component.displayName ?? 'Component'})`;
+    return FormLoader;
+}
+//# sourceMappingURL=withFormHandler.js.map

package/lib/withFormHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"withFormHandler.js","sourceRoot":"","sources":["../src/withFormHandler.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAEpG,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,MAAM,UAAU,eAAe,CAC7B,SAA6D,EAC7D,OAAoD;IAEpD,MAAM,QAAQ,GAAkD,CAAC,KAAK,EAAE,EAAE;QACxE,MAAM,EAAE,UAAU,EAAE,GAAG,qBAAqB,EAAE,CAAC;QAC/C,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,UAAU,EAAE,OAAO,CAAC,CAAC;QAClE,OAAO,oBAAC,SAAS,OAAK,KAAK,KAAM,SAAS,GAAI,CAAC;IACjD,CAAC,CAAC;IACF,MAAM,UAAU,GAAqB,CAAC,KAAK,EAAE,EAAE;QAC7C,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,OAAO,CAAC;QACxC,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,UAAU,CAAC,GAAG,EAAE,CAC/C,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAC9E,CAAC;QAEF,IAAI,OAAO,EAAE,CAAC;YACZ,OAAO,oBAAC,0BAA0B,OAAG,CAAC;QACxC,CAAC;aAAM,IAAI,IAAI,EAAE,CAAC;YAChB,OAAO,oBAAC,QAAQ,OAAK,KAAK,EAAE,WAAW,EAAE,IAAI,GAAI,CAAC;QACpD,CAAC;aAAM,CAAC;YACN,OAAO,oBAAC,mBAAmB,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,KAAK,GAAI,CAAC;QAC3D,CAAC;IACH,CAAC,CAAC;IACF,UAAU,CAAC,WAAW,GAAG,mBAAmB,SAAS,CAAC,WAAW,IAAI,WAAW,GAAG,CAAC;IAEpF,OAAO,UAAU,CAAC;AACpB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-forms",
-  "version": "1.9.2",
+  "version": "1.10.0-beta.22286977124",
   "description": "Plugin for providing advanced form support in Piral.",
   "keywords": [
     "piral",
@@ -52,8 +52,8 @@
     "@types/history": "^4.7.8",
     "@types/react": "^18.0.0",
     "@types/react-router-dom": "^5.1.6",
-    "piral-core": "^1.9.2",
+    "piral-core": "1.10.0-beta.22286977124",
     "react": "^18.0.0"
   },
-  "gitHead": "3adb702cbb788889a05a30d2a7ee657ad713a468"
+  "gitHead": "5680202f7c708e9f728e8eb7bc8da368d668eba9"
 }

package/piral-forms.min.js

@@ -1 +1 @@
-var piralForms=(()=>{var A=Object.create;var F=Object.defineProperty;var C=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var f=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(r,o)=>(typeof require<"u"?require:r)[o]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var v=(t,r)=>{for(var o in r)F(t,o,{get:r[o],enumerable:!0})},S=(t,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of N(r))!U.call(t,e)&&e!==o&&F(t,e,{get:()=>r[e],enumerable:!(a=C(r,e))||a.enumerable});return t};var O=(t,r,o)=>(o=t!=null?A(E(t)):{},S(r||!t||!t.__esModule?F(o,"default",{value:t,enumerable:!0}):o,t)),L=t=>S(F({},"__esModule",{value:!0}),t);var K={};v(K,{createFormsApi:()=>V,useForm:()=>b,usePrompt:()=>T,withForm:()=>h});var P={};v(P,{updateFormState:()=>k});var d=f("piral-core");function w(t,r){return r.active===!1&&!t.submitting?d.removeIndicator:t.active||t.submitting||t.changed?t:d.removeIndicator}function k(t,r,o,a){t.dispatch(e=>{let i={...o,...e.forms[r]||{},...a},n=w(i,a);return{...e,forms:(0,d.updateKey)(e.forms,r,n)}})}var p=O(f("react")),l=f("piral-core");var D=f("react"),u=f("piral-core");var x=f("react"),y=f("piral-core");function T(t,r,o,a){(0,x.useEffect)(()=>{if(t){let e=s=>{let c=(0,y.isfunc)(o)?o():o;return s.returnValue=c,c},i=a&&r.listen(a),n=typeof o=="function"?o:()=>o,m=o&&r.block(n);return window.addEventListener("beforeunload",e),()=>{i&&i(),m&&m(),window.removeEventListener("beforeunload",e)}}return()=>{}},[t,o])}var G="Are you sure you want to discard the form data?";function q(t){return{active:!0,currentData:t,initialData:t,changed:!1,submitting:!1,error:void 0}}function R(t,r,o,a,e){let{onChange:i}=e;o(t,r,{currentData:a,changed:!(0,u.isSame)(a,r.initialData),error:void 0}),(0,u.isfunc)(i)&&Promise.resolve(i(a)).then(n=>{let m={...a,...n};o(t,r,{currentData:m,changed:!(0,u.isSame)(m,r.initialData),error:void 0})}).catch(n=>o(t,r,{error:n}))}function M(t,r,o,a){let{onSubmit:e,wait:i}=a;o(t,r,{changed:!!i,submitting:!0}),(0,u.isfunc)(e)&&Promise.resolve(e(r.currentData)).then(()=>o(t,r,{initialData:r.currentData,changed:!1,submitting:!1})).catch(n=>o(t,r,{error:n,changed:!0,submitting:!1}))}function B(t,r,o,a){return{changed:r.changed,formData:r.currentData,error:r.error,submit(e){return e&&e.preventDefault(),r.changed&&M(t,r,o,a),!1},submitting:r.submitting,reset(){o(t,r,{currentData:r.initialData,changed:!1,error:void 0})},setFormData(e){R(t,r,o,{...r.currentData,...e},a)},changeForm(e){let{name:i,value:n}=e.target;R(t,r,o,{...r.currentData,[i]:n},a)}}}function b(t,r,o,a){let{silent:e,message:i=G}=o,[n]=(0,D.useState)(a||u.generateId),m=(0,u.useGlobalState)(c=>c.forms[n]||q(t)),s=(0,u.useAction)("updateFormState");return T(!e&&m.changed,r,i),(0,D.useEffect)(()=>(s(n,m,{active:!0}),()=>s(n,m,{active:!1})),[m.submitting]),B(n,m,s,o)}var g=f("react");function I(t){let[r,o]=(0,g.useState)({loading:!0,data:void 0,error:void 0});return(0,g.useEffect)(()=>{let a=!1;return t().then(e=>!a&&o({data:e,error:void 0,loading:!1}),e=>!a&&o({data:void 0,error:e,loading:!1})),()=>{a=!0}},[]),r}function h(t,r){let o=e=>{let{navigation:i}=(0,l.useGlobalStateContext)(),n=b(e.initialData,i,r);return p.createElement("form",{onSubmit:n.submit},p.createElement(t,{...e,...n}))},a=e=>{let{loadData:i,emptyData:n}=r,{loading:m,data:s,error:c}=I(()=>typeof i!="function"?Promise.resolve(n):i(e));return m?p.createElement(l.RegisteredLoadingIndicator,null):s?p.createElement(o,{...e,initialData:s}):p.createElement(l.RegisteredErrorInfo,{type:"form",error:c})};return a.displayName=`withForm(${t.displayName??"Component"})`,a}function V(t={}){return r=>(r.defineActions(P),r.dispatch(o=>({...o,forms:{}})),{createForm(o){return a=>h(a,o)}})}return L(K);})();
+var piralForms=(()=>{var A=Object.create;var D=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var O=Object.getOwnPropertyNames;var U=Object.getPrototypeOf,q=Object.prototype.hasOwnProperty;var u=(t=>typeof require<"u"?require:typeof Proxy<"u"?new Proxy(t,{get:(r,o)=>(typeof require<"u"?require:r)[o]}):t)(function(t){if(typeof require<"u")return require.apply(this,arguments);throw Error('Dynamic require of "'+t+'" is not supported')});var S=(t,r)=>{for(var o in r)D(t,o,{get:r[o],enumerable:!0})},R=(t,r,o,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let e of O(r))!q.call(t,e)&&e!==o&&D(t,e,{get:()=>r[e],enumerable:!(a=E(r,e))||a.enumerable});return t};var x=(t,r,o)=>(o=t!=null?A(U(t)):{},R(r||!t||!t.__esModule?D(o,"default",{value:t,enumerable:!0}):o,t)),L=t=>R(D({},"__esModule",{value:!0}),t);var K={};S(K,{createFormsApi:()=>$,useForm:()=>y,usePrompt:()=>h,withForm:()=>v,withFormHandler:()=>F});var T={};S(T,{updateFormState:()=>G});var l=u("piral-core");function k(t,r){return r.active===!1&&!t.submitting?l.removeIndicator:t.active||t.submitting||t.changed?t:l.removeIndicator}function G(t,r,o,a){t.dispatch(e=>{let i={...o,...e.forms[r]||{},...a},n=k(i,a);return{...e,forms:(0,l.updateKey)(e.forms,r,n)}})}var b=x(u("react"));var d=x(u("react")),f=u("piral-core");var g=u("react"),s=u("piral-core");var C=u("react"),I=u("piral-core");function h(t,r,o,a){(0,C.useEffect)(()=>{if(t){let e=p=>{let c=(0,I.isfunc)(o)?o():o;return p.returnValue=c,c},i=a&&r.listen(a),n=typeof o=="function"?o:()=>o,m=o&&r.block(n);return window.addEventListener("beforeunload",e),()=>{i&&i(),m&&m(),window.removeEventListener("beforeunload",e)}}return()=>{}},[t,o])}var H="Are you sure you want to discard the form data?";function M(t){return{active:!0,currentData:t,initialData:t,changed:!1,submitting:!1,error:void 0}}function N(t,r,o,a,e){let{onChange:i}=e;o(t,r,{currentData:a,changed:!(0,s.isSame)(a,r.initialData),error:void 0}),(0,s.isfunc)(i)&&Promise.resolve(i(a)).then(n=>{let m={...a,...n};o(t,r,{currentData:m,changed:!(0,s.isSame)(m,r.initialData),error:void 0})}).catch(n=>o(t,r,{error:n}))}function B(t,r,o,a){let{onSubmit:e,wait:i}=a;o(t,r,{changed:!!i,submitting:!0}),(0,s.isfunc)(e)&&Promise.resolve(e(r.currentData)).then(()=>o(t,r,{initialData:r.currentData,changed:!1,submitting:!1})).catch(n=>o(t,r,{error:n,changed:!0,submitting:!1}))}function V(t,r,o,a){return{changed:r.changed,formData:r.currentData,error:r.error,submit(e){return e&&e.preventDefault(),(a.allowSubmitUnchanged||r.changed)&&B(t,r,o,a),!1},submitting:r.submitting,reset(){o(t,r,{currentData:r.initialData,changed:!1,error:void 0})},setFormData(e){N(t,r,o,{...r.currentData,...e},a)},changeForm(e){let{name:i,value:n}=e.target;N(t,r,o,{...r.currentData,[i]:n},a)}}}function y(t,r,o,a){let{silent:e,message:i=H}=o,[n]=(0,g.useState)(a||s.generateId),m=(0,s.useGlobalState)(c=>c.forms[n]||M(t)),p=(0,s.useAction)("updateFormState");return h(!e&&m.changed,r,i),(0,g.useEffect)(()=>(p(n,m,{active:!0}),()=>p(n,m,{active:!1})),[m.submitting]),V(n,m,p,o)}var P=u("react");function w(t){let[r,o]=(0,P.useState)({loading:!0,data:void 0,error:void 0});return(0,P.useEffect)(()=>{let a=!1;return t().then(e=>!a&&o({data:e,error:void 0,loading:!1}),e=>!a&&o({data:void 0,error:e,loading:!1})),()=>{a=!0}},[]),r}function F(t,r){let o=e=>{let{navigation:i}=(0,f.useGlobalStateContext)(),n=y(e.initialData,i,r);return d.createElement(t,{...e,...n})},a=e=>{let{loadData:i,emptyData:n}=r,{loading:m,data:p,error:c}=w(()=>typeof i!="function"?Promise.resolve(n):i(e));return m?d.createElement(f.RegisteredLoadingIndicator,null):p?d.createElement(o,{...e,initialData:p}):d.createElement(f.RegisteredErrorInfo,{type:"form",error:c})};return a.displayName=`withFormHandler(${t.displayName??"Component"})`,a}function v(t,r){let o=F(a=>b.createElement("form",{onSubmit:a.submit},b.createElement(t,{...a})),r);return o.displayName=`withForm(${t.displayName??"Component"})`,o}function $(t={}){return r=>(r.defineActions(T),r.dispatch(o=>({...o,forms:{}})),{createForm(o){return(a,e)=>(e?.skipForm?F:v)(a,o)}})}return L(K);})();

package/src/actions.ts

@@ -1,5 +1,6 @@
 import { updateKey, removeIndicator, GlobalStateContext } from 'piral-core';
-import { FormDataState } from './types';
+
+import type { FormDataState } from './types';
 
 function getNewFormState(newState: FormDataState, patch: Partial<FormDataState>) {
   if (patch.active === false && !newState.submitting) {

package/src/create.test.tsx

@@ -40,4 +40,18 @@ describe('Create Forms API Extensions', () => {
     const NewComponent = create(StubComponent);
     expect(NewComponent.displayName).toBe('withForm(StubComponent)');
   });
+
+  it('createCoreApi can also avoid wrapping in a form', () => {
+    const container = createMockContainer();
+    container.context.updateFormState = vitest.fn();
+    const api = createFormsApi()(container.context) as any;
+    const create = api.createForm({
+      emptyData: {},
+      onSubmit() {
+        return Promise.resolve();
+      },
+    });
+    const NewComponent = create(StubComponent, { skipForm: true });
+    expect(NewComponent.displayName).toBe('withFormHandler(StubComponent)');
+  });
 });

package/src/create.ts

@@ -1,7 +1,9 @@
 import * as actions from './actions';
 import { PiralPlugin } from 'piral-core';
+
 import { withForm } from './withForm';
-import { PiletFormsApi } from './types';
+import { withFormHandler } from './withFormHandler';
+import type { PiletFormsApi } from './types';
 
 /**
  * Available configuration options for the forms plugin.
@@ -22,7 +24,10 @@ export function createFormsApi(config: FormsConfig = {}): PiralPlugin<PiletForms
 
     return {
       createForm(options) {
-        return (component) => withForm(component, options);
+        return (component, config) => {
+          const hoc = config?.skipForm ? withFormHandler : withForm;
+          return hoc(component, options);
+        };
       },
     };
   };

package/src/index.ts

@@ -2,4 +2,5 @@ export * from './create';
 export * from './types';
 export * from './useForm';
 export * from './usePrompt';
+export * from './withFormHandler';
 export * from './withForm';

package/src/types.ts

@@ -127,7 +127,15 @@ export interface FormCreator<TFormData, TRequiredProps> {
   /**
    * Form function for wrapping a component.
    */
-  <TProps extends TRequiredProps>(component: ComponentType<TProps & FormProps<TFormData>>): FC<TProps>;
+  <TProps extends TRequiredProps>(
+    component: ComponentType<TProps & FormProps<TFormData>>,
+    config?: {
+      /**
+       * Indicates if the wrapping `<form>` element should be omitted.
+       */
+      skipForm?: boolean;
+    },
+  ): FC<TProps>;
 }
 
 /**
@@ -136,6 +144,10 @@ export interface FormCreator<TFormData, TRequiredProps> {
 export type PromptMessage = string | (() => string);
 
 export interface InputFormOptions<TFormData, TProps> {
+  /**
+   * If enabled does not prevent submission of unchanged forms.
+   */
+  allowSubmitUnchanged?: boolean;
   /**
    * If enabled does not notify the user that form data could be lost on page transitions.
    */

package/src/useForm.test.ts

@@ -127,6 +127,37 @@ describe('Form Hook Module', () => {
     testOptions,
   );
 
+  it(
+    'Submit with no changed data does something with allowSubmitUnchanged is on',
+    async () => {
+      const { useForm } = await import('./useForm');
+      const onSubmit = vitest.fn(() => Promise.resolve());
+
+      useGlobalState.mockImplementation((select: any) =>
+        select({
+          forms: {},
+        }),
+      );
+      const options = {
+        allowSubmitUnchanged: true,
+        wait: false,
+        silent: false,
+        message: '',
+        onSubmit,
+        onChange: undefined,
+        emptyData: {},
+      };
+      const { changed, submitting, formData, submit } = useForm({}, undefined as any, options);
+      submit();
+      expect(changed).toBeFalsy();
+      expect(submitting).toBeFalsy();
+      expect(onSubmit).toHaveBeenCalled();
+      expect(formData).toEqual({});
+      expect(setStateFake.mock.calls[0][0].length).toBe(36);
+    },
+    testOptions,
+  );
+
   it(
     'Submit with changed data submits successfully',
     async () => {

package/src/useForm.ts

@@ -1,7 +1,8 @@
 import { useState, useEffect, FormEvent } from 'react';
 import { isfunc, useAction, useGlobalState, isSame, generateId, NavigationApi } from 'piral-core';
+
 import { usePrompt } from './usePrompt';
-import { FormProps, InputFormOptions, FormDataState } from './types';
+import type { FormProps, InputFormOptions, FormDataState } from './types';
 
 const defaultMessage = 'Are you sure you want to discard the form data?';
 
@@ -96,7 +97,7 @@ function createProps<TFormData>(
     submit(e?: FormEvent) {
       e && e.preventDefault();
 
-      if (state.changed) {
+      if (options.allowSubmitUnchanged || state.changed) {
         submitData(id, state, updateState, options);
       }
 

package/src/usePrompt.ts

@@ -1,6 +1,7 @@
 import { useEffect } from 'react';
 import { isfunc, NavigationApi, NavigationListener, NavigationBlocker } from 'piral-core';
-import { PromptMessage } from './types';
+
+import type { PromptMessage } from './types';
 
 /**
  * Hook to notify the user in case of potential data loss when

package/src/withForm.tsx

@@ -1,37 +1,20 @@
 import * as React from 'react';
-import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
-import { useForm } from './useForm';
-import { usePromise } from './usePromise';
-import { InputFormOptions, FormProps } from './types';
+
+import { withFormHandler } from './withFormHandler';
+import type { InputFormOptions, FormProps } from './types';
 
 export function withForm<TFormData, TRequiredProps, TProps extends TRequiredProps>(
   Component: React.ComponentType<TProps & FormProps<TFormData>>,
   options: InputFormOptions<TFormData, TRequiredProps>,
 ): React.FC<TProps> {
-  const FormView: React.FC<TProps & { initialData: TFormData }> = (props) => {
-    const { navigation } = useGlobalStateContext();
-    const formProps = useForm(props.initialData, navigation, options);
-    return (
-      <form onSubmit={formProps.submit}>
-        <Component {...props} {...formProps} />
+  const WrappedComponent = withFormHandler<TFormData, TRequiredProps, TProps>(
+    (props) => (
+      <form onSubmit={props.submit}>
+        <Component {...props} />
       </form>
-    );
-  };
-  const FormLoader: React.FC<TProps> = (props) => {
-    const { loadData, emptyData } = options;
-    const { loading, data, error } = usePromise(() =>
-      typeof loadData !== 'function' ? Promise.resolve(emptyData) : loadData(props),
-    );
-
-    if (loading) {
-      return <RegisteredLoadingIndicator />;
-    } else if (data) {
-      return <FormView {...props} initialData={data} />;
-    } else {
-      return <RegisteredErrorInfo type="form" error={error} />;
-    }
-  };
-  FormLoader.displayName = `withForm(${Component.displayName ?? 'Component'})`;
-
-  return FormLoader;
+    ),
+    options,
+  );
+  WrappedComponent.displayName = `withForm(${Component.displayName ?? 'Component'})`;
+  return WrappedComponent;
 }

package/src/withFormHandler.test.tsx

@@ -0,0 +1,125 @@
+/**
+ * @vitest-environment jsdom
+ */
+import * as React from 'react';
+import * as piralCore from 'piral-core';
+import * as useForm from './useForm';
+import * as usePromise from './usePromise';
+import { describe, it, expect, vitest } from 'vitest';
+import { render } from '@testing-library/react';
+import { withFormHandler } from './withFormHandler';
+
+vitest.mock('piral-core');
+vitest.mock('./useForm');
+vitest.mock('./usePromise');
+
+const StubComponent: React.FC<{ data: any }> = () => <div role="component" />;
+StubComponent.displayName = 'StubComponent';
+
+const LoaderComponent: React.FC<{ data: any }> = () => <div role="loader" />;
+LoaderComponent.displayName = 'LoaderComponent';
+
+const ErrorComponent: React.FC<{ data: any }> = () => <div role="error" />;
+ErrorComponent.displayName = 'ErrorComponent';
+
+(piralCore as any).RegisteredErrorInfo = ErrorComponent;
+(piralCore as any).RegisteredLoadingIndicator = LoaderComponent;
+(piralCore as any).useGlobalStateContext = vitest.fn(() => ({
+  navigation: {},
+}));
+
+describe('withForm Module', () => {
+  it('shows error component if nothing is loading and no data is available', () => {
+    const options: any = { emptyData: {} };
+    const usedForm = vitest.fn(() => ({
+      submit() {},
+    }));
+    const usedPromise = vitest.fn(() => ({
+      loading: false,
+      data: undefined,
+      error: undefined,
+    }));
+    (useForm as any).useForm = usedForm;
+    (usePromise as any).usePromise = usedPromise;
+    const Component: any = withFormHandler(StubComponent, options);
+    const node = render(<Component />);
+    expect(node.getAllByRole('error').length).toBe(1);
+  });
+
+  it('shows data component if nothing is loading and data is available', () => {
+    const options: any = { emptyData: {} };
+    const usedForm = vitest.fn(() => ({
+      submit() {},
+    }));
+    const usedPromise = vitest.fn(() => ({
+      loading: false,
+      data: {},
+      error: undefined,
+    }));
+    (useForm as any).useForm = usedForm;
+    (usePromise as any).usePromise = usedPromise;
+    const Component: any = withFormHandler(StubComponent, options);
+    const node = render(<Component />);
+    expect(node.getAllByRole('component').length).toBe(1);
+  });
+
+  it('shows loading component if it is loading', () => {
+    const options: any = { emptyData: {} };
+    const usedForm = vitest.fn(() => ({
+      submit() {},
+    }));
+    const usedPromise = vitest.fn(() => ({
+      loading: true,
+      data: undefined,
+      error: undefined,
+    }));
+    (useForm as any).useForm = usedForm;
+    (usePromise as any).usePromise = usedPromise;
+    const Component: any = withFormHandler(StubComponent, options);
+    const node = render(<Component />);
+    expect(node.getAllByRole('loader').length).toBe(1);
+  });
+
+  it('calls load data if its there', () => {
+    const loadData = vitest.fn(() => () => Promise.resolve({}));
+    const usedForm = vitest.fn(() => ({
+      submit() {},
+    }));
+    const usedPromise = vitest.fn((fn) => {
+      fn();
+      return {
+        loading: false,
+        data: undefined,
+        error: undefined,
+      };
+    });
+    (useForm as any).useForm = usedForm;
+    (usePromise as any).usePromise = usedPromise;
+    const options: any = { emptyData: {}, loadData };
+    const Component: any = withFormHandler(StubComponent, options);
+    render(<Component />);
+    expect(usedPromise).toHaveBeenCalledTimes(1);
+    expect(loadData).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call load data if its missing', () => {
+    const loadData = undefined;
+    const usedForm = vitest.fn(() => ({
+      submit() {},
+    }));
+    const usedPromise = vitest.fn((fn) => {
+      const data = fn();
+      return {
+        loading: false,
+        data,
+        error: undefined,
+      };
+    });
+    (useForm as any).useForm = usedForm;
+    (usePromise as any).usePromise = usedPromise;
+    const options: any = { emptyData: {}, loadData };
+    const Component: any = withFormHandler(StubComponent, options);
+    render(<Component />);
+    expect(usedPromise).toHaveBeenCalledTimes(1);
+  });
+});

package/src/withFormHandler.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
+
+import { useForm } from './useForm';
+import { usePromise } from './usePromise';
+import type { InputFormOptions, FormProps } from './types';
+
+export function withFormHandler<TFormData, TRequiredProps, TProps extends TRequiredProps>(
+  Component: React.ComponentType<TProps & FormProps<TFormData>>,
+  options: InputFormOptions<TFormData, TRequiredProps>,
+): React.FC<TProps> {
+  const FormView: React.FC<TProps & { initialData: TFormData }> = (props) => {
+    const { navigation } = useGlobalStateContext();
+    const formProps = useForm(props.initialData, navigation, options);
+    return <Component {...props} {...formProps} />;
+  };
+  const FormLoader: React.FC<TProps> = (props) => {
+    const { loadData, emptyData } = options;
+    const { loading, data, error } = usePromise(() =>
+      typeof loadData !== 'function' ? Promise.resolve(emptyData) : loadData(props),
+    );
+
+    if (loading) {
+      return <RegisteredLoadingIndicator />;
+    } else if (data) {
+      return <FormView {...props} initialData={data} />;
+    } else {
+      return <RegisteredErrorInfo type="form" error={error} />;
+    }
+  };
+  FormLoader.displayName = `withFormHandler(${Component.displayName ?? 'Component'})`;
+
+  return FormLoader;
+}