@headless-adminapp/app 1.4.20 → 1.4.21

package/app/LayoutProvider.js

@@ -9,6 +9,7 @@ const dialog_1 = require("../dialog");
 const header_1 = require("../header");
 const locale_1 = require("../locale");
 const metadata_1 = require("../metadata");
+const unsaved_changes_1 = require("../navigation/unsaved-changes");
 const progress_indicator_1 = require("../progress-indicator");
 const route_1 = require("../route");
 const toast_notification_1 = require("../toast-notification");
@@ -40,6 +41,6 @@ const defaultDataService = {
     },
 };
 const LayoutProvider = ({ authPlaceholder, authProps, dataService = defaultDataService, fileService, localeProps, metadataProps, queryClient = defaults_1.queryClient, routeProps, children, containers: { DialogContainer, ProgressIndicatorContainer, ToastNotificationContainer, }, }) => {
-    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(header_1.HeaderProvider, { children: (0, jsx_runtime_1.jsx)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: children }) }) })] }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(route_1.RouteProvider, { ...routeProps, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: (0, jsx_runtime_1.jsx)(locale_1.LocaleProvider, { ...localeProps, children: (0, jsx_runtime_1.jsx)(metadata_1.MetadataProvider, { ...metadataProps, children: (0, jsx_runtime_1.jsx)(transport_1.DataServiceContext.Provider, { value: dataService, children: (0, jsx_runtime_1.jsx)(context_1.FileServiceContext.Provider, { value: fileService ?? null, children: (0, jsx_runtime_1.jsx)(dialog_1.DialogProvider, { children: (0, jsx_runtime_1.jsx)(progress_indicator_1.ProgressIndicatorProvider, { children: (0, jsx_runtime_1.jsxs)(toast_notification_1.ToastNotificationProvider, { children: [(0, jsx_runtime_1.jsx)(DialogContainer, {}), (0, jsx_runtime_1.jsx)(ProgressIndicatorContainer, {}), (0, jsx_runtime_1.jsx)(ToastNotificationContainer, {}), (0, jsx_runtime_1.jsx)(auth_1.AuthProvider, { ...authProps, children: (0, jsx_runtime_1.jsx)(header_1.HeaderProvider, { children: (0, jsx_runtime_1.jsxs)(AuthWrapper_1.AuthWrapper, { Placeholder: authPlaceholder, children: [(0, jsx_runtime_1.jsx)(unsaved_changes_1.UnsavedChangesRouteGuard, {}), children] }) }) })] }) }) }) }) }) }) }) }) }));
 };
 exports.LayoutProvider = LayoutProvider;

package/command/types.d.ts

@@ -39,7 +39,7 @@ interface BaseCommandState {
     appearance?: 'subtle' | 'colored';
 }
 interface ActionableCommandState {
-    onClick?: () => void;
+    onClick?: () => void | Promise<void>;
     disabled?: boolean;
     hidden?: boolean;
 }

package/dataform/DataFormProvider/UnsavedChangesInfoSetter.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const UnsavedChangesInfoSetter: FC;

package/dataform/DataFormProvider/UnsavedChangesInfoSetter.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsavedChangesInfoSetter = void 0;
+const unsaved_changes_1 = require("@headless-adminapp/app/navigation/unsaved-changes");
+const react_1 = require("react");
+const hooks_1 = require("../hooks");
+const UnsavedChangesInfoSetter = () => {
+    const form = (0, hooks_1.useFormInstance)();
+    (0, react_1.useEffect)(() => {
+        if (!form.formState.isDirty) {
+            (0, unsaved_changes_1.setUnsavedChangesInfo)(null);
+        }
+        else {
+            (0, unsaved_changes_1.setUnsavedChangesInfo)({
+                title: 'Unsaved Changes',
+                message: 'You have unsaved changes. Are you sure you want to leave without saving?',
+            });
+        }
+        return () => {
+            (0, unsaved_changes_1.setUnsavedChangesInfo)(null);
+        };
+    }, [form.formState.isDirty]);
+    return null;
+};
+exports.UnsavedChangesInfoSetter = UnsavedChangesInfoSetter;

package/dataform/DataFormProvider/index.js

@@ -20,6 +20,7 @@ const DataResolver_1 = require("./DataResolver");
 const getRecord_1 = require("./getRecord");
 const InitialValueResolver_1 = require("./InitialValueResolver");
 const ReadonlyInfoResolver_1 = require("./ReadonlyInfoResolver");
+const UnsavedChangesInfoSetter_1 = require("./UnsavedChangesInfoSetter");
 const utils_2 = require("./utils");
 function mergeInitialWithHistory(initialValue, historyState) {
     return {
@@ -117,5 +118,5 @@ function DataFormProvider(props) {
         schemaStore,
         props.commands,
     ]);
-    return ((0, jsx_runtime_1.jsx)(context_1.DataFormContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, { ...formInstance, children: [(0, jsx_runtime_1.jsx)(DataResolver_1.DataResolver, { retriveRecordFn: props.retriveRecordFn ?? getRecord_1.getRecord }), (0, jsx_runtime_1.jsx)(InitialValueResolver_1.InitialValueResolver, {}), (0, jsx_runtime_1.jsx)(ReadonlyInfoResolver_1.ReadonlyInfoResolver, { setFormReadOnly: setFormReadOnly }), (0, jsx_runtime_1.jsx)(CustomHookExecuter_1.CustomHookExecuter, { useHookFn: props.form.experience.useHookFn }), (0, jsx_runtime_1.jsx)(CalculatedField_1.CalculatedField, {}), props.children] }) }));
+    return ((0, jsx_runtime_1.jsx)(context_1.DataFormContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(react_hook_form_1.FormProvider, { ...formInstance, children: [(0, jsx_runtime_1.jsx)(DataResolver_1.DataResolver, { retriveRecordFn: props.retriveRecordFn ?? getRecord_1.getRecord }), (0, jsx_runtime_1.jsx)(InitialValueResolver_1.InitialValueResolver, {}), (0, jsx_runtime_1.jsx)(ReadonlyInfoResolver_1.ReadonlyInfoResolver, { setFormReadOnly: setFormReadOnly }), (0, jsx_runtime_1.jsx)(CustomHookExecuter_1.CustomHookExecuter, { useHookFn: props.form.experience.useHookFn }), (0, jsx_runtime_1.jsx)(CalculatedField_1.CalculatedField, {}), (0, jsx_runtime_1.jsx)(UnsavedChangesInfoSetter_1.UnsavedChangesInfoSetter, {}), props.children] }) }));
 }

package/datagrid/hooks/useOpenRecord.d.ts

@@ -1 +1 @@
-export declare function useOpenRecord(): (id: string, logicalName: string) => void;
+export declare function useOpenRecord(): (id: string, logicalName: string) => Promise<void>;

package/datagrid/hooks/useOpenRecord.js

@@ -13,13 +13,13 @@ function useOpenRecord() {
     const router = (0, route_1.useRouter)();
     const dataRef = (0, react_1.useRef)(data);
     dataRef.current = data;
-    return (0, react_1.useCallback)((id, logicalName) => {
+    return (0, react_1.useCallback)(async (id, logicalName) => {
         const path = routeResolver({
             logicalName: logicalName,
             type: app_1.PageType.EntityForm,
             id,
         });
-        router.push(path, {
+        await router.push(path, {
             state: {
                 navigator: logicalName === schema.logicalName
                     ? {

package/dialog/hooks/useCloseDialog.d.ts

@@ -1 +1,4 @@
+/**
+ * @zero-deps
+ */
 export declare function useCloseDialog(): (id: string) => void;

package/dialog/hooks/useCloseDialog.js

@@ -15,6 +15,9 @@ function markDialogAsClosed(items, id) {
 function excludeDialogItemById(items, id) {
     return items.filter((item) => item.id !== id);
 }
+/**
+ * @zero-deps
+ */
 function useCloseDialog() {
     const setValue = (0, context_1.useContextSetValue)(context_2.DialogContext);
     const closeDialog = (0, react_1.useCallback)((id) => {

package/dialog/hooks/useOpenConfirmDialog.d.ts

@@ -1,2 +1,5 @@
 import { ConfirmDialogOptions, ConfirmResult } from '@headless-adminapp/core/experience/dialog';
+/**
+ * @zero-deps
+ */
 export declare function useOpenConfirmDialog(): (options: Omit<ConfirmDialogOptions, "type" | "onConfirm" | "onDismiss" | "onCancel">) => Promise<ConfirmResult | null>;

package/dialog/hooks/useOpenConfirmDialog.js

@@ -3,6 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOpenConfirmDialog = useOpenConfirmDialog;
 const react_1 = require("react");
 const useOpenDialog_1 = require("./useOpenDialog");
+/**
+ * @zero-deps
+ */
 function useOpenConfirmDialog() {
     const openDialog = (0, useOpenDialog_1.useOpenDialog)();
     const openConfirmDialog = (0, react_1.useCallback)((options) => {

package/dialog/hooks/useOpenDialog.d.ts

@@ -1,4 +1,7 @@
 import { DialogOptions } from '@headless-adminapp/core/experience/dialog';
+/**
+ * @zero-deps
+ */
 export declare function useOpenDialog(): (options: DialogOptions) => {
     id: string;
     close: () => void;

package/dialog/hooks/useOpenDialog.js

@@ -6,6 +6,9 @@ const uuid_1 = require("uuid");
 const context_1 = require("../../mutable/context");
 const context_2 = require("../context");
 const useCloseDialog_1 = require("./useCloseDialog");
+/**
+ * @zero-deps
+ */
 function useOpenDialog() {
     const setValue = (0, context_1.useContextSetValue)(context_2.DialogContext);
     const closeDialog = (0, useCloseDialog_1.useCloseDialog)();

package/mutable/context.d.ts

@@ -8,6 +8,9 @@ export declare function useContextValue<T>(context: React.Context<ContextValue<T
     current: T;
 };
 export declare function useContextSelector<T, R>(context: React.Context<ContextValue<T>>, selector: (state: T) => R): R;
+/**
+ * @zero-deps
+ */
 export declare function useContextSetValue<T>(context: React.Context<ContextValue<T>>): (value: Partial<T> | ((state: T) => Partial<T>)) => void;
 type Setter<T, U extends unknown[]> = (setValue: ContextValue<T>['setValue']) => (...args: U) => void;
 export declare function useContextValueSetter<T, U extends unknown[]>(context: React.Context<ContextValue<T>>, setter: Setter<T, U>): (...args: U) => void;

package/mutable/context.js

@@ -33,6 +33,9 @@ function useContextSelector(context, selector) {
     }
     return (0, exports.useContextSelectorInternal)(contextValue, selector);
 }
+/**
+ * @zero-deps
+ */
 function useContextSetValue(context) {
     const contextValue = (0, react_1.useContext)(context);
     if (!contextValue) {

package/navigation/hooks/useOpenForm.d.ts

@@ -1,2 +1,2 @@
 import { OpenFormOptions } from '@headless-adminapp/core/experience/command';
-export declare function useOpenForm(): (options: OpenFormOptions) => void;
+export declare function useOpenForm(): (options: OpenFormOptions) => Promise<void>;

package/navigation/hooks/useOpenForm.js

@@ -8,7 +8,7 @@ const useRouteResolver_1 = require("../../route/hooks/useRouteResolver");
 function useOpenForm() {
     const routeResolver = (0, useRouteResolver_1.useRouteResolver)();
     const router = (0, hooks_1.useRouter)();
-    return (0, react_1.useCallback)((options) => {
+    return (0, react_1.useCallback)(async (options) => {
         const path = routeResolver({
             logicalName: options.logicalName,
             type: app_1.PageType.EntityForm,
@@ -29,7 +29,7 @@ function useOpenForm() {
             };
         }
         if (options.replace) {
-            router.replace(path, {
+            await router.replace(path, {
                 state: {
                     ...router.getState(),
                     ...state,
@@ -37,7 +37,7 @@ function useOpenForm() {
             });
         }
         else {
-            router.push(path, {
+            await router.push(path, {
                 state,
             });
         }

package/navigation/unsaved-changes/UnsavedChangesRouteGuard.d.ts

@@ -0,0 +1 @@
+export declare const UnsavedChangesRouteGuard: () => null;

package/navigation/unsaved-changes/UnsavedChangesRouteGuard.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsavedChangesRouteGuard = void 0;
+const useUnsavedChangesRouteGuard_1 = require("./useUnsavedChangesRouteGuard");
+const UnsavedChangesRouteGuard = () => {
+    (0, useUnsavedChangesRouteGuard_1.useUnsavedChangesRouteGuard)();
+    return null;
+};
+exports.UnsavedChangesRouteGuard = UnsavedChangesRouteGuard;

package/navigation/unsaved-changes/index.d.ts

@@ -0,0 +1,3 @@
+export { getUnsavedChangesInfo, setUnsavedChangesInfo, } from './unsavedChangesInfo';
+export { useUnsavedChangesRouteGuard } from './useUnsavedChangesRouteGuard';
+export { UnsavedChangesRouteGuard } from './UnsavedChangesRouteGuard';

package/navigation/unsaved-changes/index.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsavedChangesRouteGuard = exports.useUnsavedChangesRouteGuard = exports.setUnsavedChangesInfo = exports.getUnsavedChangesInfo = void 0;
+var unsavedChangesInfo_1 = require("./unsavedChangesInfo");
+Object.defineProperty(exports, "getUnsavedChangesInfo", { enumerable: true, get: function () { return unsavedChangesInfo_1.getUnsavedChangesInfo; } });
+Object.defineProperty(exports, "setUnsavedChangesInfo", { enumerable: true, get: function () { return unsavedChangesInfo_1.setUnsavedChangesInfo; } });
+var useUnsavedChangesRouteGuard_1 = require("./useUnsavedChangesRouteGuard");
+Object.defineProperty(exports, "useUnsavedChangesRouteGuard", { enumerable: true, get: function () { return useUnsavedChangesRouteGuard_1.useUnsavedChangesRouteGuard; } });
+var UnsavedChangesRouteGuard_1 = require("./UnsavedChangesRouteGuard");
+Object.defineProperty(exports, "UnsavedChangesRouteGuard", { enumerable: true, get: function () { return UnsavedChangesRouteGuard_1.UnsavedChangesRouteGuard; } });

package/navigation/unsaved-changes/unsavedChangesInfo.d.ts

@@ -0,0 +1,6 @@
+export interface UnsavedChangesInfo {
+    title: string;
+    message: string;
+}
+export declare function getUnsavedChangesInfo(): UnsavedChangesInfo | null;
+export declare function setUnsavedChangesInfo(info: UnsavedChangesInfo | null): void;

package/navigation/unsaved-changes/unsavedChangesInfo.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getUnsavedChangesInfo = getUnsavedChangesInfo;
+exports.setUnsavedChangesInfo = setUnsavedChangesInfo;
+let unsavedChangesInfo = null;
+function getUnsavedChangesInfo() {
+    return unsavedChangesInfo;
+}
+function setUnsavedChangesInfo(info) {
+    unsavedChangesInfo = info;
+}

package/navigation/unsaved-changes/useUnsavedChangesRouteGuard.d.ts

@@ -0,0 +1 @@
+export declare function useUnsavedChangesRouteGuard(): null;

package/navigation/unsaved-changes/useUnsavedChangesRouteGuard.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useUnsavedChangesRouteGuard = useUnsavedChangesRouteGuard;
+const dialog_1 = require("@headless-adminapp/app/dialog");
+const route_1 = require("@headless-adminapp/app/route");
+const react_1 = require("react");
+const unsavedChangesInfo_1 = require("./unsavedChangesInfo");
+function useUnsavedChangesRouteGuard() {
+    const router = (0, route_1.useRouter)();
+    const openConfirmDialog = (0, dialog_1.useOpenConfirmDialog)();
+    (0, react_1.useEffect)(() => {
+        const guard = async () => {
+            const unsavedChangesInfo = (0, unsavedChangesInfo_1.getUnsavedChangesInfo)();
+            if (!unsavedChangesInfo) {
+                return true;
+            }
+            const confirmResult = await openConfirmDialog({
+                title: unsavedChangesInfo.title,
+                text: unsavedChangesInfo.message,
+                confirmButtonLabel: 'Leave',
+                cancelButtonLabel: 'Stay',
+            });
+            if (!confirmResult?.confirmed) {
+                return false;
+            }
+            (0, unsavedChangesInfo_1.setUnsavedChangesInfo)(null);
+            return true;
+        };
+        router.registerGuard(guard);
+        return () => {
+            router.unregisterGuard(guard);
+        };
+    }, [router, openConfirmDialog]);
+    (0, react_1.useEffect)(() => {
+        function handleBeforeUnload(event) {
+            const unsavedChangesInfo = (0, unsavedChangesInfo_1.getUnsavedChangesInfo)();
+            if (unsavedChangesInfo) {
+                event.preventDefault();
+                event.returnValue = unsavedChangesInfo.message;
+            }
+        }
+        window.addEventListener('beforeunload', handleBeforeUnload);
+        return () => {
+            window.removeEventListener('beforeunload', handleBeforeUnload);
+        };
+    }, []);
+    return null;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@headless-adminapp/app",
-  "version": "1.4.20",
+  "version": "1.4.21",
   "description": "",
   "main": "index.js",
   "types": "index.d.ts",
@@ -38,5 +38,5 @@
     "uuid": "11.0.3",
     "yup": "^1.4.0"
   },
-  "gitHead": "be1677e04dcd2ac91082078c0b59f81b0799d469"
+  "gitHead": "2a993d2eb239ff24ffd73df81aba26240aaf1b2f"
 }

package/route/context.d.ts

@@ -5,16 +5,19 @@ export type InternalIsRouteActive = (path: string, item: NavPageItem) => boolean
 interface NavigateOptions {
     state?: any;
 }
+export type GuardFn = () => boolean | Promise<boolean>;
 export interface RouterInstance {
-    back: () => void;
-    forward: () => void;
-    push(href: string, options?: NavigateOptions): void;
-    replace(href: string, options?: NavigateOptions): void;
+    back: () => Promise<void>;
+    forward: () => Promise<void>;
+    push(href: string, options?: NavigateOptions): Promise<void>;
+    replace(href: string, options?: NavigateOptions): Promise<void>;
     prefetch(href: string): void;
     setState(state: any): void;
     setState(key: string, state: any): void;
     getState<T = any>(): T;
     getState<T = any>(key: string): T | undefined;
+    registerGuard(fn: GuardFn): void;
+    unregisterGuard(fn: GuardFn): void;
 }
 export declare const RouterContext: import("react").Context<RouterInstance>;
 export declare const RouterPathnameContext: import("react").Context<string>;