@aws/mynah-ui 4.18.1 → 4.20.0

package/dist/static.d.ts

@@ -239,6 +239,9 @@ export interface ChatItemContent {
         actions?: Record<string, FileNodeAction[]>;
         details?: Record<string, TreeNodeDetails>;
     } | null;
+    /**
+     * @deprecated starting from version v5.0.0, it will no longer render the buttons in a reversed order, but rather in the order of the array.
+     */
     buttons?: ChatItemButton[] | null;
     formItems?: ChatItemFormItem[] | null;
     footer?: ChatItemContent | null;
@@ -302,6 +305,7 @@ export interface ChatItemButton {
     description?: string;
     status?: 'main' | 'primary' | 'clear' | Status;
     flash?: 'infinite' | 'once';
+    fillState?: 'hover' | 'always';
     icon?: MynahIcons;
     position?: 'inside' | 'outside';
 }

package/docs/CONFIG.md

@@ -113,7 +113,7 @@ const mynahUI = new MynahUI({
 
 # `texts`
 All static texts will be shown on UI. 
-Please take a look at each image to identify which text blongs to which item on UI.
+Please take a look at each image to identify which text belongs to which item on UI.
 
 ## mainTitle
 Default tab title text if it is not set through store data for that tab.

package/docs/DATAMODEL.md

@@ -1876,6 +1876,7 @@ interface ChatItemButton {
   description?: string; // A text to be shown inside a tooltip and it can be markdown
   status?: 'main' | 'primary' | 'clear' | Status;
   flash?: 'infinite' | 'once'; // Flashes the card
+  fillState?: 'hover' | 'always'; // background is filled always or only when hover
   icon?: MynahIcons; // in case if you want to put an icon to the button.
   position?: 'inside' | 'outside'; // Whether the button shows up inside or oustide a card, default is 'inside'
 }
@@ -1995,6 +1996,30 @@ mynahUI.addChatItem(tabId, {
   <img src="./img/data-model/chatItems/buttonFlash.png" alt="button flash" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
+#### Button fillState
+
+You can make the filled buttons filled always or filled only on hover.
+
+```typescript
+mynahUI.addChatItem(tabId, {
+    type: ChatItemType.ANSWER,
+    ...
+    buttons: [
+    {
+        ...
+        fillState: 'hover',
+        ...
+    },
+    ...,
+    ],
+});
+```
+
+<p align="center">
+  <img src="./img/data-model/chatItems/fillState.png" alt="button fill when hover" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+  <img src="./img/data-model/chatItems/fillState-hover.png" alt="button fill when hover (on hover)" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>
+
 ---
 
 ## `formItems`

package/docs/DEVELOPER.md

@@ -254,7 +254,7 @@ Ok, now it is getting better but let's also add some icons. For the answer's we
 
 Assuming that you alread find your `svg` file which is the only supported type for `mynah-ui` because of the responsive design concerns. Then navigate to folder `src/components/icon/icons` and rename your file to match the pattern with others, no spaces allowed.
 
-And then open the `icon-imporer.ts` placed in one parent folder and add your import and name with the same pattern with others.
+And then open the `icon-importer.ts` placed in one parent folder and add your import and name with the same pattern with others.
 
 ```typescript
 // ICONS

package/docs/PROPERTIES.md

@@ -149,7 +149,7 @@ export interface MynahUIProps {
 _Let's deep dive into each property you can set._
 
 ### But before that, what is `eventId`?
-You may notice that a wast majority of the event functions have `eventId` property. We're sending a unique `eventId` **for all real intended user actions** like clicks, prompts or tab related actions. 
+You may notice that a vast majority of the event functions have `eventId` property. We're sending a unique `eventId` **for all real intended user actions** like clicks, prompts or tab related actions. 
 It is mandatory to send it as an argument for some functions like `mynahUI.selectTab`.You need to send the incoming `eventId` from the connected event function to change a tab programmatically. Because without a user intent, you cannot change a tab. 
 
 And those kind of functions **will only work** with the last `eventId`. So you cannot store an id and send it after several different user actions. 

package/docs/USAGE.md

@@ -25,6 +25,8 @@ mynahUI.getSelectedTabId(...);
 mynahUI.getAllTabs(...);
 mynahUI.notify(...);
 mynahUI.showCustomForm(...);
+mynahUI.updateTabDefaults(...);
+mynahUI.toggleSplashLoader(...);
 ```
 
 <p><br/></p>
@@ -58,7 +60,7 @@ So if it reached to the max number of tabs can be opened, it will return undefin
 ```typescript
 const mynahUI = new MynahUI({...});
 
-const newTabId: sring | undefined = mynahUI.updateStore('', {
+const newTabId: string | undefined = mynahUI.updateStore('', {
   tabTitle: 'My new tab!'
 });
 if(typeof newTabId !== string){
@@ -424,7 +426,7 @@ And when user sends the prompt attached code will be appended to the bottom.
 
 ## Getting all tabs with their store data (`getAllTabs`)
 
-You can get all tabs and their latest updated store data. Do not use this function to handle the data. This function aims to help you wit your test scenarios which you can grab the data and do your comparisons.
+You can get all tabs and their latest updated store data. Do not use this function to handle the data. This function aims to help you with your test scenarios which you can grab the data and do your comparisons.
 
 ```typescript
 mynahUI.getAllTabs();
@@ -499,4 +501,39 @@ mynahUI.showCustomForm(
   <img src="./img/customForm.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
 </p>
 
-To see the form item objects structure and the buttons structure, please go take a look to [DATAMODEL / formItems](./DATAMODEL.md#formItems) and [DATAMODEL / buttons](./DATAMODEL.md#buttons) ** because the structure of the items are identical. **
+To see the form item objects structure and the buttons structure, please go take a look to [DATAMODEL / formItems](./DATAMODEL.md#formItems) and [DATAMODEL / buttons](./DATAMODEL.md#buttons) ** because the structure of the items are identical. **
+
+
+
+<p><br/></p>
+
+# Update tab defaults (`updateTabDefaults`)
+
+You can use this method by providing the same value for the construcor property (`defaults`) to update the tab default values. **Do not foget that it will not effect anything in an already created tab**.
+
+```typescript
+mynahUI.updateTabDefaults({store: {
+  chatItems: [
+    {
+      ...,
+      body: 'Hello!',
+      ...
+    }
+  ]
+}});
+```
+<p align="center">
+</br>
+</p>
+
+
+# Show splash screen spinner (`toggleSplashLoader`)
+
+You can enable or disable window wide splash screen spinner with or without text.
+
+```typescript
+mynahUI.toggleSplashLoader(true, 'Initializing');
+```
+<p align="center">
+  <img src="./img/splashLoader.png" alt="mainTitle" style="max-width:500px; width:100%;border: 1px solid #e0e0e0;">
+</p>

package/package.json

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

package/postinstall.js

@@ -1,6 +1,7 @@
 const deprecationList = [
     'Config.texts.clickFileToViewDiff will be deprecated after 5.x.x',
     'MynahUIProps.onOpenDiff will be deprecated after 5.x.x',
+    'ChatItemContent.buttons will render in the order of the array starting from v5.0.0, instead of reverse order.',
     'MynahUIProps.onCodeInsertToCursorPosition will be deprecated after 5.x.x',
     'MynahUIProps.onCopyCodeToClipboard will be changed to be used only on keyboard and context menu copy actions after 5.x.x',
 ];