@akinon/app-client - npm Package Compare versions

Comparing version 0.10.0 to 0.11.0

dist/cjs/app-client-provider.d.ts

@@ -1,2 +0,2 @@
-import { ApplicationData, ApplicationNavigation, ApplicationParams, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
 import React from 'react';
@@ -6,23 +6,97 @@ /**
  * loading status, and methods for invoking actions and navigating.
- *
- * @typedef {Object} AppClientContextState
- * @property {ApplicationData} [data] - Optional application data shared across micro frontends.
- * @property {ApplicationParams} [params] - Optional. Additional parameters to be passed to the application.
- * @property {boolean} isLoading - Indicates whether the application data is currently loading.
- * @property {Function} invokeAction - Method to invoke an action defined in the AppShell.
- * @property {Function} navigate - Method to navigate to a specified path within the application.
- * Additional helper methods for invoking default actions like showing dialogs or toasts.
+ * Additional helper methods include showing dialogs, toasts, and error messages.
  */
 interface AppClientContextState {
+    /**
+     * Shared application data across micro frontends.
+     */
     data?: ApplicationData;
+    /**
+     * Additional parameters to be passed to the application.
+     */
     params?: ApplicationParams;
+    /**
+     * Indicates whether the application data is currently loading.
+     */
     isLoading: boolean;
-    invokeAction: <T = any>(actionKey: string, ...args: any[]) => Promise<T>;
+    /**
+     * Method to invoke an action defined in the AppShell.
+     */
+    invokeAction: (actionKey: string, ...args: Array<unknown>) => Promise<unknown>;
+    /**
+     * Method to navigate to a specified path within the application.
+     * @param {ShellNavigationPayload} payload - The payload containing the navigation details.
+     */
     navigate: (payload: ShellNavigationPayload) => void;
-    showModalDialog?: (title: string, content: string) => void;
-    showConfirmationDialog?: (title: string, content: string) => boolean;
-    showToast?: (content: string, type: 'success' | 'warning' | 'error' | 'loading' | 'destroy') => void;
-    showErrorMessage?: (title: string, content: string) => void;
-    showRichModal?: (path: string, context?: any) => void;
+    /**
+     * Shows a modal dialog with the specified options.
+     * This method communicates with the AppShell to display the modal dialog.
+     *
+     * @param {Object} options - The options for the modal dialog.
+     * @param {string} options.title - The title of the modal dialog.
+     * @param {string} options.content - The content of the modal dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showModalDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a confirmation dialog with the specified options.
+     * This method communicates with the AppShell to display the confirmation dialog.
+     *
+     * @param {Object} options - The options for the confirmation dialog.
+     * @param {string} options.title - The title of the confirmation dialog.
+     * @param {string} options.content - The content of the confirmation dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showConfirmationDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: (data: unknown) => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a toast message with the specified content and type.
+     * This method communicates with the AppShell to display the toast message.
+     *
+     * @param {string} content - The content of the toast message.
+     * @param {ApplicationToastType} type - The type of the toast message.
+     */
+    showToast?: (content: string, type: ApplicationToastType) => boolean;
+    /**
+     * Shows an error message dialog with the specified title and content.
+     * This method communicates with the AppShell to display the error message.
+     *
+     * @param {string} title - The title of the error message dialog.
+     * @param {string} content - The content of the error message dialog.
+     */
+    showErrorMessage?: (title: string, content: string) => boolean;
+    /**
+     * Displays a rich-contentful modal with the specified path and context.
+     * This method communicates with the AppShell to display the rich-contentful modal.
+     *
+     * @param {string} path - The path of displayed iframe.
+     * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+     * @param {Object} size - Optional size of the modal.
+     * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+     * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+     * @param {string} closeIconColor - Optional color of the close icon.
+     */
+    showRichModal?: (path: string, context?: unknown, size?: ApplicationModalSize, closeIconColor?: string) => boolean;
+    /**
+     * The current locale of the application.
+     */
     locale: string;
+    /**
+     * Method to handle locale changes.
+     * @param {Function} callback - Callback function to be executed when the locale changes.
+     * @returns {Function} - Function to remove the callback.
+     */
     onLocaleChange: (callback: (newLocale: string) => void) => void;
@@ -32,9 +106,11 @@ }
  * Props for the AppClientProvider component.
- *
- * @typedef {Object} AppClientProviderProps
- * @property {React.ReactNode} children - Children components to be rendered within the provider.
- * @property {ApplicationConfig} config - Configuration for the application, including settings like `isDev` and `forceRedirect`.
  */
 interface AppClientProviderProps {
+    /**
+     * Children components to be rendered within the provider.
+     */
     children: React.ReactNode;
+    /**
+     * Configuration for the application, including settings like `isDev` and `forceRedirect`.
+     */
     config: FullpageApplicationConfig | PluginApplicationConfig;
@@ -41,0 +117,0 @@ }

dist/cjs/app-client-provider.js

@@ -16,2 +16,5 @@ "use strict";
 const react_1 = require("react");
+/**
+ * Default context state for the AppClient.
+ */
 const defaultContextState = {
@@ -22,6 +25,13 @@ isLoading: true,
     }),
-    navigate: () => { },
+    navigate: () => {
+        return;
+    },
     locale: 'en',
-    onLocaleChange: () => { }
+    onLocaleChange: () => {
+        return;
+    }
 };
+/**
+ * Context for the AppClient, providing access to application state and methods.
+ */
 const AppClientContext = (0, react_1.createContext)(defaultContextState);
@@ -36,21 +46,34 @@ /**
 /**
- * This method communicates with the AppShell to perform
- * the navigation on the shell.
- *
- * @param {string} path - The path to navigate to.
+ * Navigates to the specified path within the application.
+ * This method communicates with the AppShell to perform the navigation.
  */
-const navigate = (payload) => {
+const navigate = ({ id, path, external }) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.NAVIGATE, Object.assign({}, payload));
+    bus.emit(app_shared_1.EVENTS.NAVIGATE, { id, path, external });
 };
 /**
- * Shows a modal dialog with the specified title and content. This method communicates
- * with the AppShell to display the modal dialog.
+ * Shows a modal dialog with the specified title and content.
+ * This method communicates with the AppShell to display the modal dialog.
  *
- * @param {string} title - The title of the modal dialog.
- * @param {string} content - The content of the modal dialog.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showModalDialog = (title, content) => {
+const showModalDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    function handleActionConfirmed() {
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    }
+    function handleActionCanceled() {
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showModalDialog,
@@ -61,11 +84,25 @@ args: [title, content]
 /**
- * Shows a confirmation dialog with the specified title and content. This method communicates
- * with the AppShell to display the confirmation dialog and waits for user input.
+ * Shows a confirmation dialog with the specified title and content and can handle the user's input.
+ * This method communicates with the AppShell to display the confirmation dialog.
  *
- * @param {string} title - The title of the confirmation dialog.
- * @param {string} content - The content of the confirmation dialog.
- * @returns The result of the confirmation dialog action.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showConfirmationDialog = (title, content) => {
+const showConfirmationDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new framebus_1.default();
+    function handleActionConfirmed(data) {
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
+    }
+    function handleActionCanceled() {
+        bus.off(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(app_shared_1.EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(app_shared_1.EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
     return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
@@ -77,11 +114,12 @@ actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showConfirmationDialog,
 /**
- * Displays a toast message with the specified content and type. This method communicates
- * with the AppShell to display the toast message.
+ * Displays a toast message with the specified content and type.
+ * This method communicates with the AppShell to display the toast message.
  *
  * @param {string} content - The content of the toast message.
- * @param {'success' | 'warning' | 'error' | 'loading' | 'destroy'} type - The type of the toast message.
+ * @param {ApplicationToastType} type - The type of the toast message.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showToast = (content, type) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showToast,
@@ -93,10 +131,11 @@ args: [content, type]
  * Displays an error message dialog with the specified title and content.
- * This method communicateswith the AppShell to display the error message.
+ * This method communicates with the AppShell to display the error message.
  *
  * @param {string} title - The title of the error message dialog.
  * @param {string} content - The content of the error message dialog.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showErrorMessage = (title, content) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showErrorMessage,
@@ -112,8 +151,12 @@ args: [title, content]
  * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+ * @param {Object} size - Optional size of the modal.
+ * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+ * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+ * @param {string} closeIconColor - Optional color of the close icon.
  */
-const showRichModal = (path, context) => {
+const showRichModal = (path, context, size, closeIconColor) => {
     const bus = new framebus_1.default();
-    bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(app_shared_1.EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: app_shared_1.DEFAULT_ACTION_KEYS.showRichModal,
-        args: [path, context]
+        args: [path, context, size, closeIconColor]
     });
@@ -139,7 +182,13 @@ };
             bus.emit(app_shared_1.EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
-                if (response.success) {
-                    resolve(response.result);
+                if (typeof response === 'object' && response !== null) {
+                    const typedResponse = response;
+                    if (typedResponse.success) {
+                        resolve(typedResponse.result);
+                    }
+                    else {
+                        reject(new Error(typedResponse.error || 'Unknown error'));
+                    }
                 }
                 else {
-                    reject(new Error(response.error));
+                    reject(new Error('Invalid response format'));
                 }
@@ -167,3 +216,3 @@ });
         bus.on(app_shared_1.EVENTS.SET_DATA, (receivedData) => {
-            setData(receivedData);
+            setData(prevState => (Object.assign(Object.assign({}, prevState), receivedData)));
             setIsLoading(false);
@@ -170,0 +219,0 @@ });

dist/esm/app-client-provider.d.ts

@@ -1,2 +0,2 @@
-import { ApplicationData, ApplicationNavigation, ApplicationParams, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
+import type { ApplicationData, ApplicationModalSize, ApplicationNavigation, ApplicationParams, ApplicationToastType, FullpageApplicationConfig, PluginApplicationConfig, RegisteredApp, RegisteredAppType, ShellNavigation, ShellNavigationPayload } from '@akinon/app-shared';
 import React from 'react';
@@ -6,23 +6,97 @@ /**
  * loading status, and methods for invoking actions and navigating.
- *
- * @typedef {Object} AppClientContextState
- * @property {ApplicationData} [data] - Optional application data shared across micro frontends.
- * @property {ApplicationParams} [params] - Optional. Additional parameters to be passed to the application.
- * @property {boolean} isLoading - Indicates whether the application data is currently loading.
- * @property {Function} invokeAction - Method to invoke an action defined in the AppShell.
- * @property {Function} navigate - Method to navigate to a specified path within the application.
- * Additional helper methods for invoking default actions like showing dialogs or toasts.
+ * Additional helper methods include showing dialogs, toasts, and error messages.
  */
 interface AppClientContextState {
+    /**
+     * Shared application data across micro frontends.
+     */
     data?: ApplicationData;
+    /**
+     * Additional parameters to be passed to the application.
+     */
     params?: ApplicationParams;
+    /**
+     * Indicates whether the application data is currently loading.
+     */
     isLoading: boolean;
-    invokeAction: <T = any>(actionKey: string, ...args: any[]) => Promise<T>;
+    /**
+     * Method to invoke an action defined in the AppShell.
+     */
+    invokeAction: (actionKey: string, ...args: Array<unknown>) => Promise<unknown>;
+    /**
+     * Method to navigate to a specified path within the application.
+     * @param {ShellNavigationPayload} payload - The payload containing the navigation details.
+     */
     navigate: (payload: ShellNavigationPayload) => void;
-    showModalDialog?: (title: string, content: string) => void;
-    showConfirmationDialog?: (title: string, content: string) => boolean;
-    showToast?: (content: string, type: 'success' | 'warning' | 'error' | 'loading' | 'destroy') => void;
-    showErrorMessage?: (title: string, content: string) => void;
-    showRichModal?: (path: string, context?: any) => void;
+    /**
+     * Shows a modal dialog with the specified options.
+     * This method communicates with the AppShell to display the modal dialog.
+     *
+     * @param {Object} options - The options for the modal dialog.
+     * @param {string} options.title - The title of the modal dialog.
+     * @param {string} options.content - The content of the modal dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showModalDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: () => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a confirmation dialog with the specified options.
+     * This method communicates with the AppShell to display the confirmation dialog.
+     *
+     * @param {Object} options - The options for the confirmation dialog.
+     * @param {string} options.title - The title of the confirmation dialog.
+     * @param {string} options.content - The content of the confirmation dialog.
+     * @param {Function} options.onConfirm - Callback function to be executed when the dialog is confirmed.
+     * @param {Function} options.onCancel - Callback function to be executed when the dialog is canceled.
+     * @returns {boolean} - Indicates if the dialog was successfully shown.
+     */
+    showConfirmationDialog?: (options: {
+        title: string;
+        content: string;
+        onConfirm?: (data: unknown) => void;
+        onCancel?: () => void;
+    }) => boolean;
+    /**
+     * Shows a toast message with the specified content and type.
+     * This method communicates with the AppShell to display the toast message.
+     *
+     * @param {string} content - The content of the toast message.
+     * @param {ApplicationToastType} type - The type of the toast message.
+     */
+    showToast?: (content: string, type: ApplicationToastType) => boolean;
+    /**
+     * Shows an error message dialog with the specified title and content.
+     * This method communicates with the AppShell to display the error message.
+     *
+     * @param {string} title - The title of the error message dialog.
+     * @param {string} content - The content of the error message dialog.
+     */
+    showErrorMessage?: (title: string, content: string) => boolean;
+    /**
+     * Displays a rich-contentful modal with the specified path and context.
+     * This method communicates with the AppShell to display the rich-contentful modal.
+     *
+     * @param {string} path - The path of displayed iframe.
+     * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+     * @param {Object} size - Optional size of the modal.
+     * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+     * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+     * @param {string} closeIconColor - Optional color of the close icon.
+     */
+    showRichModal?: (path: string, context?: unknown, size?: ApplicationModalSize, closeIconColor?: string) => boolean;
+    /**
+     * The current locale of the application.
+     */
     locale: string;
+    /**
+     * Method to handle locale changes.
+     * @param {Function} callback - Callback function to be executed when the locale changes.
+     * @returns {Function} - Function to remove the callback.
+     */
     onLocaleChange: (callback: (newLocale: string) => void) => void;
@@ -32,9 +106,11 @@ }
  * Props for the AppClientProvider component.
- *
- * @typedef {Object} AppClientProviderProps
- * @property {React.ReactNode} children - Children components to be rendered within the provider.
- * @property {ApplicationConfig} config - Configuration for the application, including settings like `isDev` and `forceRedirect`.
  */
 interface AppClientProviderProps {
+    /**
+     * Children components to be rendered within the provider.
+     */
     children: React.ReactNode;
+    /**
+     * Configuration for the application, including settings like `isDev` and `forceRedirect`.
+     */
     config: FullpageApplicationConfig | PluginApplicationConfig;
@@ -41,0 +117,0 @@ }

dist/esm/app-client-provider.js

@@ -13,2 +13,5 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
 import React, { createContext, useCallback, useContext, useEffect, useRef, useState } from 'react';
+/**
+ * Default context state for the AppClient.
+ */
 const defaultContextState = {
@@ -19,6 +22,13 @@ isLoading: true,
     }),
-    navigate: () => { },
+    navigate: () => {
+        return;
+    },
     locale: 'en',
-    onLocaleChange: () => { }
+    onLocaleChange: () => {
+        return;
+    }
 };
+/**
+ * Context for the AppClient, providing access to application state and methods.
+ */
 const AppClientContext = createContext(defaultContextState);
@@ -32,21 +42,34 @@ /**
 /**
- * This method communicates with the AppShell to perform
- * the navigation on the shell.
- *
- * @param {string} path - The path to navigate to.
+ * Navigates to the specified path within the application.
+ * This method communicates with the AppShell to perform the navigation.
  */
-const navigate = (payload) => {
+const navigate = ({ id, path, external }) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.NAVIGATE, Object.assign({}, payload));
+    bus.emit(EVENTS.NAVIGATE, { id, path, external });
 };
 /**
- * Shows a modal dialog with the specified title and content. This method communicates
- * with the AppShell to display the modal dialog.
+ * Shows a modal dialog with the specified title and content.
+ * This method communicates with the AppShell to display the modal dialog.
  *
- * @param {string} title - The title of the modal dialog.
- * @param {string} content - The content of the modal dialog.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showModalDialog = (title, content) => {
+const showModalDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    function handleActionConfirmed() {
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm();
+    }
+    function handleActionCanceled() {
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showModalDialog,
@@ -57,11 +80,25 @@ args: [title, content]
 /**
- * Shows a confirmation dialog with the specified title and content. This method communicates
- * with the AppShell to display the confirmation dialog and waits for user input.
+ * Shows a confirmation dialog with the specified title and content and can handle the user's input.
+ * This method communicates with the AppShell to display the confirmation dialog.
  *
- * @param {string} title - The title of the confirmation dialog.
- * @param {string} content - The content of the confirmation dialog.
- * @returns The result of the confirmation dialog action.
+ * @returns {boolean} - Indicates if the dialog was successfully shown.
  */
-const showConfirmationDialog = (title, content) => {
+const showConfirmationDialog = ({ title, content, onConfirm, onCancel }) => {
     const bus = new Framebus();
+    function handleActionConfirmed(data) {
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(data);
+    }
+    function handleActionCanceled() {
+        bus.off(EVENTS.ACTION_CANCELED, handleActionCanceled);
+        bus.off(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+        onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+    }
+    if (onConfirm) {
+        bus.on(EVENTS.ACTION_CONFIRMED, handleActionConfirmed);
+    }
+    if (onCancel) {
+        bus.on(EVENTS.ACTION_CANCELED, handleActionCanceled);
+    }
     return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
@@ -73,11 +110,12 @@ actionKey: DEFAULT_ACTION_KEYS.showConfirmationDialog,
 /**
- * Displays a toast message with the specified content and type. This method communicates
- * with the AppShell to display the toast message.
+ * Displays a toast message with the specified content and type.
+ * This method communicates with the AppShell to display the toast message.
  *
  * @param {string} content - The content of the toast message.
- * @param {'success' | 'warning' | 'error' | 'loading' | 'destroy'} type - The type of the toast message.
+ * @param {ApplicationToastType} type - The type of the toast message.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showToast = (content, type) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showToast,
@@ -89,10 +127,11 @@ args: [content, type]
  * Displays an error message dialog with the specified title and content.
- * This method communicateswith the AppShell to display the error message.
+ * This method communicates with the AppShell to display the error message.
  *
  * @param {string} title - The title of the error message dialog.
  * @param {string} content - The content of the error message dialog.
+ * @returns {boolean} - Indicates if the event was emitted successfully.
  */
 const showErrorMessage = (title, content) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showErrorMessage,
@@ -108,8 +147,12 @@ args: [title, content]
  * @param {unknown} context - Optional context. Its type must follow the rules: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm
+ * @param {Object} size - Optional size of the modal.
+ * @param {number | string} size.maxWidth - The maximum width of the modal. If falsish, the modal will be max 540px wide.
+ * @param {number | string} size.maxHeight - The maximum height of the modal. If falsish, the modal will be max 360px high.
+ * @param {string} closeIconColor - Optional color of the close icon.
  */
-const showRichModal = (path, context) => {
+const showRichModal = (path, context, size, closeIconColor) => {
     const bus = new Framebus();
-    bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
+    return bus.emit(EVENTS.INVOKE_DEFAULT_ACTION, {
         actionKey: DEFAULT_ACTION_KEYS.showRichModal,
-        args: [path, context]
+        args: [path, context, size, closeIconColor]
     });
@@ -135,7 +178,13 @@ };
             bus.emit(EVENTS.INVOKE_ACTION, { actionKey, args }, (response) => {
-                if (response.success) {
-                    resolve(response.result);
+                if (typeof response === 'object' && response !== null) {
+                    const typedResponse = response;
+                    if (typedResponse.success) {
+                        resolve(typedResponse.result);
+                    }
+                    else {
+                        reject(new Error(typedResponse.error || 'Unknown error'));
+                    }
                 }
                 else {
-                    reject(new Error(response.error));
+                    reject(new Error('Invalid response format'));
                 }
@@ -163,3 +212,3 @@ });
         bus.on(EVENTS.SET_DATA, (receivedData) => {
-            setData(receivedData);
+            setData(prevState => (Object.assign(Object.assign({}, prevState), receivedData)));
             setIsLoading(false);
@@ -166,0 +215,0 @@ });

package.json

 {
   "name": "@akinon/app-client",
   "description": "Akinon AppClient library. This library is used to create a new plugin or an application which will reside in Akinon's applications.",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "private": false,
@@ -13,4 +13,4 @@ "type": "module",
   "dependencies": {
-    "framebus": "^6.0.0",
-    "@akinon/app-shared": "0.11.0"
+    "framebus": "^6.0.1",
+    "@akinon/app-shared": "0.12.0"
   },
@@ -22,4 +22,2 @@ "devDependencies": {
     "typescript": "^5.2.2",
-    "@akinon/vite-config": "0.4.0",
-    "@akinon/eslint-config": "0.1.0",
     "@akinon/typescript-config": "0.2.0"
@@ -47,9 +45,4 @@ },
     "clean": "rimraf dist/",
-    "lint": "eslint *.ts*",
-    "test": "vitest run",
-    "test:coverage": "vitest run --coverage",
-    "test:ui": "vitest --ui",
-    "test:watch": "vitest watch",
     "typecheck": "tsc --noEmit"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

43530

increased by37.86%

Dev dependency count

5

decreased by-28.57%

Lines of code

818

increased by44.01%

Dependency changes

• + Added@akinon/app-shared@0.12.0(transitive)

• - Removed@akinon/app-shared@0.11.0(transitive)

• Updated@akinon/app-shared@0.12.0

• Updatedframebus@^6.0.1