piral-forms 1.9.2-beta.8358 → 1.9.2-beta.8388

package/lib/useForm.d.ts

@@ -1,10 +1,10 @@
-import type { History } from 'history';
+import { NavigationApi } from 'piral-core';
 import { 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.
- * @param history The history to listen / block for changes / transitions.
+ * @param navigation The navigation API.
  * @param options The options used for creating the form.
  * @param existingId The existing id of the form, if any.
  */
-export declare function useForm<TFormData>(initialData: TFormData, history: History, options: InputFormOptions<TFormData, any>, existingId?: string): FormProps<TFormData>;
+export declare function useForm<TFormData>(initialData: TFormData, navigation: NavigationApi, options: InputFormOptions<TFormData, any>, existingId?: string): FormProps<TFormData>;

package/lib/useForm.js

@@ -86,16 +86,16 @@ function createProps(id, state, updateState, options) {
 /**
  * Hook for using a form locally that blocks if a transition is performed.
  * @param initialData The initial data of the form.
- * @param history The history to listen / block for changes / transitions.
+ * @param navigation The navigation API.
  * @param options The options used for creating the form.
  * @param existingId The existing id of the form, if any.
  */
-export function useForm(initialData, history, options, existingId) {
+export function useForm(initialData, navigation, options, existingId) {
     const { silent, message = defaultMessage } = options;
     const [id] = useState(existingId || generateId);
     const state = useGlobalState((m) => m.forms[id] || createDefaultState(initialData));
     const updateState = useAction('updateFormState');
-    usePrompt(!silent && state.changed, history, message);
+    usePrompt(!silent && state.changed, navigation, message);
     useEffect(() => {
         updateState(id, state, {
             active: true,

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,10 +1,10 @@
-import type { History, Location } from 'history';
+import { NavigationApi, NavigationListener } from 'piral-core';
 import { PromptMessage } from './types';
 /**
  * Hook to notify the user in case of potential data loss when
  * performing a page transition (internal or external).
  * @param active True if the prompt should be shown, otherwise false.
- * @param history The history of the currently used router.
+ * @param navigation The navigation API.
  * @param message The message to display when the prompt is shown.
  */
-export declare function usePrompt(active: boolean, history: History, message: PromptMessage, onTransition?: (location: Location) => void): void;
+export declare function usePrompt(active: boolean, navigation: NavigationApi, message: PromptMessage, onTransition?: NavigationListener): void;

package/lib/usePrompt.js

@@ -4,10 +4,10 @@ import { isfunc } from 'piral-core';
  * Hook to notify the user in case of potential data loss when
  * performing a page transition (internal or external).
  * @param active True if the prompt should be shown, otherwise false.
- * @param history The history of the currently used router.
+ * @param navigation The navigation API.
  * @param message The message to display when the prompt is shown.
  */
-export function usePrompt(active, history, message, onTransition) {
+export function usePrompt(active, navigation, message, onTransition) {
     useEffect(() => {
         if (active) {
             const beforeUnload = (ev) => {
@@ -15,8 +15,9 @@ export function usePrompt(active, history, message, onTransition) {
                 ev.returnValue = msg;
                 return msg;
             };
-            const unlisten = onTransition && history.listen(onTransition);
-            const unblock = message && history.block(message);
+            const unlisten = onTransition && navigation.listen(onTransition);
+            const blocker = typeof message === 'function' ? message : () => message;
+            const unblock = message && navigation.block(blocker);
             window.addEventListener('beforeunload', beforeUnload);
             return () => {
                 unlisten && unlisten();

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,EAAE,MAAM,YAAY,CAAC;AAIpC;;;;;;GAMG;AACH,MAAM,UAAU,SAAS,CACvB,MAAe,EACf,OAAgB,EAChB,OAAsB,EACtB,YAA2C;IAE3C,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,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;YAC9D,MAAM,OAAO,GAAG,OAAO,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;YAClD,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;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"}

package/lib/withForm.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { withRouter } from 'react-router-dom';
-import { RegisteredLoadingIndicator, RegisteredErrorInfo } from 'piral-core';
+import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
 import { useForm } from './useForm';
 import { usePromise } from './usePromise';
 export function withForm(Component, options) {
     const FormView = (props) => {
-        const formProps = useForm(props.initialData, props.history, options);
+        const { navigation } = useGlobalStateContext();
+        const formProps = useForm(props.initialData, navigation, options);
         return (React.createElement("form", { onSubmit: formProps.submit },
             React.createElement(Component, { ...props, ...formProps })));
     };
@@ -22,6 +22,7 @@ export function withForm(Component, options) {
             return React.createElement(RegisteredErrorInfo, { type: "form", error: error });
         }
     };
-    return withRouter(FormLoader);
+    FormLoader.displayName = `withForm(${Component.displayName ?? 'Component'})`;
+    return FormLoader;
 }
 //# 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,UAAU,EAAuB,MAAM,kBAAkB,CAAC;AACnE,OAAO,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAC7E,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,GAAwE,CAAC,KAAK,EAAE,EAAE;QAC9F,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,WAAW,EAAE,KAAK,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QACrE,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,GAA2C,CAAC,KAAK,EAAE,EAAE;QACnE,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;IAEF,OAAO,UAAU,CAAC,UAAU,CAAQ,CAAC;AACvC,CAAC"}
+{"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "piral-forms",
-  "version": "1.9.2-beta.8358",
+  "version": "1.9.2-beta.8388",
   "description": "Plugin for providing advanced form support in Piral.",
   "keywords": [
     "piral",
@@ -22,8 +22,8 @@
   "exports": {
     ".": "./lib/index.js",
     "./lib/*": {
-      "import": "./lib/*",
-      "types": "./lib/*.d.ts"
+      "types": "./lib/*.d.ts",
+      "import": "./lib/*"
     },
     "./package.json": "./package.json"
   },
@@ -52,9 +52,8 @@
     "@types/history": "^4.7.8",
     "@types/react": "^18.0.0",
     "@types/react-router-dom": "^5.1.6",
-    "piral-core": "1.9.2-beta.8358",
-    "react": "^18.0.0",
-    "react-router-dom": "^5.2.0"
+    "piral-core": "1.9.2-beta.8388",
+    "react": "^18.0.0"
   },
-  "gitHead": "ce3cfa6949ab58c0a34af5732d81601d04b8178d"
+  "gitHead": "25023f913ae9423c9cecd23e44d70e959ff58c8a"
 }

package/piral-forms.min.js

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

package/src/create.test.tsx

@@ -18,7 +18,7 @@ function createMockContainer() {
       emit: vitest.fn(),
       defineActions() {},
       state,
-      dispatch(update) {
+      dispatch(update: any) {
         state.setState(update(state.getState()));
       },
     } as any,
@@ -38,6 +38,6 @@ describe('Create Forms API Extensions', () => {
       },
     });
     const NewComponent = create(StubComponent);
-    expect(NewComponent.displayName).toBe('withRouter(FormLoader)');
+    expect(NewComponent.displayName).toBe('withForm(StubComponent)');
   });
 });

package/src/useForm.ts

@@ -1,6 +1,5 @@
-import type { History } from 'history';
 import { useState, useEffect, FormEvent } from 'react';
-import { isfunc, useAction, useGlobalState, isSame, generateId } from 'piral-core';
+import { isfunc, useAction, useGlobalState, isSame, generateId, NavigationApi } from 'piral-core';
 import { usePrompt } from './usePrompt';
 import { FormProps, InputFormOptions, FormDataState } from './types';
 
@@ -124,13 +123,13 @@ function createProps<TFormData>(
 /**
  * Hook for using a form locally that blocks if a transition is performed.
  * @param initialData The initial data of the form.
- * @param history The history to listen / block for changes / transitions.
+ * @param navigation The navigation API.
  * @param options The options used for creating the form.
  * @param existingId The existing id of the form, if any.
  */
 export function useForm<TFormData>(
   initialData: TFormData,
-  history: History,
+  navigation: NavigationApi,
   options: InputFormOptions<TFormData, any>,
   existingId?: string,
 ) {
@@ -138,7 +137,7 @@ export function useForm<TFormData>(
   const [id] = useState(existingId || generateId);
   const state = useGlobalState((m) => m.forms[id] || createDefaultState(initialData));
   const updateState = useAction('updateFormState');
-  usePrompt(!silent && state.changed, history, message);
+  usePrompt(!silent && state.changed, navigation, message);
   useEffect(() => {
     updateState(id, state, {
       active: true,

package/src/usePrompt.ts

@@ -1,20 +1,19 @@
 import { useEffect } from 'react';
-import { isfunc } from 'piral-core';
-import type { History, Location } from 'history';
+import { isfunc, NavigationApi, NavigationListener, NavigationBlocker } from 'piral-core';
 import { PromptMessage } from './types';
 
 /**
  * Hook to notify the user in case of potential data loss when
  * performing a page transition (internal or external).
  * @param active True if the prompt should be shown, otherwise false.
- * @param history The history of the currently used router.
+ * @param navigation The navigation API.
  * @param message The message to display when the prompt is shown.
  */
 export function usePrompt(
   active: boolean,
-  history: History,
+  navigation: NavigationApi,
   message: PromptMessage,
-  onTransition?: (location: Location) => void,
+  onTransition?: NavigationListener,
 ) {
   useEffect(() => {
     if (active) {
@@ -23,8 +22,9 @@ export function usePrompt(
         ev.returnValue = msg;
         return msg;
       };
-      const unlisten = onTransition && history.listen(onTransition);
-      const unblock = message && history.block(message);
+      const unlisten = onTransition && navigation.listen(onTransition);
+      const blocker = typeof message === 'function' ? message : () => message;
+      const unblock = message && navigation.block(blocker);
       window.addEventListener('beforeunload', beforeUnload);
       return () => {
         unlisten && unlisten();

package/src/withForm.test.tsx

@@ -6,7 +6,6 @@ import * as piralCore from 'piral-core';
 import * as useForm from './useForm';
 import * as usePromise from './usePromise';
 import { describe, it, expect, vitest } from 'vitest';
-import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 import { withForm } from './withForm';
 
@@ -14,13 +13,6 @@ vitest.mock('piral-core');
 vitest.mock('./useForm');
 vitest.mock('./usePromise');
 
-const mountWithRouter = (node, url = '/') =>
-  render(
-    <MemoryRouter initialEntries={[url]} initialIndex={0}>
-      {node}
-    </MemoryRouter>,
-  );
-
 const StubComponent: React.FC<{ data: any }> = () => <div role="component" />;
 StubComponent.displayName = 'StubComponent';
 
@@ -32,6 +24,9 @@ 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', () => {
@@ -47,7 +42,7 @@ describe('withForm Module', () => {
     (useForm as any).useForm = usedForm;
     (usePromise as any).usePromise = usedPromise;
     const Component: any = withForm(StubComponent, options);
-    const node = mountWithRouter(<Component />);
+    const node = render(<Component />);
     expect(node.getAllByRole('error').length).toBe(1);
   });
 
@@ -64,7 +59,7 @@ describe('withForm Module', () => {
     (useForm as any).useForm = usedForm;
     (usePromise as any).usePromise = usedPromise;
     const Component: any = withForm(StubComponent, options);
-    const node = mountWithRouter(<Component />);
+    const node = render(<Component />);
     expect(node.getAllByRole('component').length).toBe(1);
   });
 
@@ -81,7 +76,7 @@ describe('withForm Module', () => {
     (useForm as any).useForm = usedForm;
     (usePromise as any).usePromise = usedPromise;
     const Component: any = withForm(StubComponent, options);
-    const node = mountWithRouter(<Component />);
+    const node = render(<Component />);
     expect(node.getAllByRole('loader').length).toBe(1);
   });
 
@@ -102,7 +97,7 @@ describe('withForm Module', () => {
     (usePromise as any).usePromise = usedPromise;
     const options: any = { emptyData: {}, loadData };
     const Component: any = withForm(StubComponent, options);
-    mountWithRouter(<Component />);
+    render(<Component />);
     expect(usedPromise).toHaveBeenCalledTimes(1);
     expect(loadData).toHaveBeenCalledTimes(1);
   });
@@ -124,7 +119,7 @@ describe('withForm Module', () => {
     (usePromise as any).usePromise = usedPromise;
     const options: any = { emptyData: {}, loadData };
     const Component: any = withForm(StubComponent, options);
-    mountWithRouter(<Component />);
+    render(<Component />);
     expect(usedPromise).toHaveBeenCalledTimes(1);
   });
 });

package/src/withForm.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-import { RegisteredLoadingIndicator, RegisteredErrorInfo } from 'piral-core';
+import { RegisteredLoadingIndicator, RegisteredErrorInfo, useGlobalStateContext } from 'piral-core';
 import { useForm } from './useForm';
 import { usePromise } from './usePromise';
 import { InputFormOptions, FormProps } from './types';
@@ -9,15 +8,16 @@ export function withForm<TFormData, TRequiredProps, TProps extends TRequiredProp
   Component: React.ComponentType<TProps & FormProps<TFormData>>,
   options: InputFormOptions<TFormData, TRequiredProps>,
 ): React.FC<TProps> {
-  const FormView: React.FC<TProps & RouteComponentProps & { initialData: TFormData }> = (props) => {
-    const formProps = useForm(props.initialData, props.history, options);
+  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} />
       </form>
     );
   };
-  const FormLoader: React.FC<TProps & RouteComponentProps> = (props) => {
+  const FormLoader: React.FC<TProps> = (props) => {
     const { loadData, emptyData } = options;
     const { loading, data, error } = usePromise(() =>
       typeof loadData !== 'function' ? Promise.resolve(emptyData) : loadData(props),
@@ -31,6 +31,7 @@ export function withForm<TFormData, TRequiredProps, TProps extends TRequiredProp
       return <RegisteredErrorInfo type="form" error={error} />;
     }
   };
+  FormLoader.displayName = `withForm(${Component.displayName ?? 'Component'})`;
 
-  return withRouter(FormLoader) as any;
+  return FormLoader;
 }