@aws/mynah-ui 4.35.0-beta.7 → 4.35.0

package/docs/PROPERTIES.md

@@ -6,6 +6,11 @@ export interface MynahUIProps {
   defaults?: MynahUITabStoreTab;
   tabs?: MynahUITabStoreModel;
   config?: Partial<ConfigModel>;
+  splashScreenInitialStatus?: {
+    visible: boolean;
+    text?: string;
+    actions?: Action[];
+  };
   onShowMoreWebResultsClick?: (
     tabId: string,
     messageId: string,
@@ -169,6 +174,9 @@ export interface MynahUIProps {
     tabId: string,
     buttonId: string,
     eventId?: string) => void;
+  onSplashLoaderActionClick?: (
+    action: Action,
+    eventId?: string) => void;
 }
 ```
 _Let's deep dive into each property you can set._
@@ -210,6 +218,23 @@ defaults: {
 
 ---
 
+### splashScreenInitialStatus
+_(default: `undefined`)_
+
+To initially show the splash loader with some text and actions, you can use this property. Even before the rest of the data is initialized, it will show you the splash loader.
+
+```typescript
+...
+splashScreenInitialStatus?: {
+  visible: boolean;
+  text?: string;
+  actions?: Action[];
+}, // default: undefined
+...
+```
+
+---
+
 ### `tabs`
 _(default: `undefined`)_
 
@@ -1118,3 +1143,28 @@ onTabBarButtonClick?: (
     };
 ...
 ```
+
+
+---
+
+### onSplashLoaderActionClick
+
+This event will be fired when user clicks to an action inside the splash loader. 
+
+
+<p align="center">
+  <img src="./img/splashLoaderActions.png" alt="splashLoaderActions" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+```typescript
+...
+onSplashLoaderActionClick?: (
+    action: Action,
+    eventId?: string) => void;
+onSplashLoaderActionClick?: (
+    action: Action,
+    eventId?: string)):void => {
+      console.log(`Splash loader action click ${action.id}`);
+    };
+...
+```

package/docs/USAGE.md

@@ -587,9 +587,34 @@ You can enable or disable window wide splash overlay with or without text.
 mynahUI.toggleSplashLoader(true, 'Showing splash loader...');
 ```
 <p align="center">
-  <img src="./img/splashLoader.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+  <img src="./img/splashLoader.png" alt="splashLoader" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
+In case, if you want to add actions, you can use the actions field.
+
+```typescript
+mynahUI.toggleSplashLoader(
+  true, 
+  'Saving **the MCP**', 
+  [
+      {
+          id: 'hide-mcp-save',
+          status: 'clear',
+          text: 'Hide',
+      },
+      {
+          id: 'cancel-mcp-save',
+          status: 'primary',
+          text: 'Cancel',
+      },
+  ]);
+```
+<p align="center">
+  <img src="./img/splashLoaderActions.png" alt="splashLoaderActions" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
+For the initial setup, please see [PROPERTIES / splashScreenInitialStatus](./PROPERTIES.md#splashScreenInitialStatus) and for the event handling see [PROPERTIES / onSplashLoaderActionClick](./PROPERTIES.md#onSplashLoaderActionClick)
+
 # Destroy Mynah UI State (`destroy`)
 
 You can use this method to tear down the existing Mynah UI state. This is useful if you want to run several tests on fresh instances of Mynah UI.

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.35.0-beta.7",
+    "version": "4.35.0",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",