Merge from main

.github/workflows/beta.yml

@@ -10,7 +10,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
       - run: npm ci

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
       - run: npm ci

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
 

.github/workflows/publish.yml

@@ -16,7 +16,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
       - name: Install dependencies and build

.github/workflows/unit-tests.yml

@@ -11,7 +11,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: '20.x'
+          node-version: '24.x'
           registry-url: 'https://registry.npmjs.org'
           scope: '@aws'
 

example/src/config.ts

@@ -312,15 +312,18 @@ export const mynahUIDefaults: Partial<MynahUITabStoreTab> = {
                 options: [
                     {
                         label: 'Fast',
-                        value: 'fast'
+                        value: 'fast',
+                        description: 'Quick responses with good accuracy'
                     },
                     {
                         label: 'Fast 2.0 (Exp.)',
-                        value: 'fast-2-experimental'
+                        value: 'fast-2-experimental',
+                        description: 'Experimental faster model with enhanced capabilities'
                     },
                     {
                         label: 'Decisive',
-                        value: 'decisive'
+                        value: 'decisive',
+                        description: 'More thorough analysis with detailed responses'
                     },
                 ]
             }

package.json

@@ -1,7 +1,7 @@
 {
     "name": "@aws/mynah-ui",
     "displayName": "AWS Mynah UI",
-    "version": "4.36.6",
+    "version": "4.36.8",
     "description": "AWS Toolkit VSCode and Intellij IDE Extension Mynah UI",
     "publisher": "Amazon Web Services",
     "license": "Apache License 2.0",
@@ -74,7 +74,7 @@
         "@types/jest": "^29.5.5",
         "@types/json-schema": "7.0.7",
         "@types/minimatch": "^5.1.2",
-        "@types/node": "17.0.29",
+        "@types/node": "^24.0.0",
         "@types/sanitize-html": "^2.11.0",
         "@typescript-eslint/eslint-plugin": "^5.34.0",
         "@typescript-eslint/parser": "^5.62.0",

src/components/form-items/select.ts

@@ -83,41 +83,17 @@ export class SelectInternal {
               value: '',
               description: undefined
             } ]
-          : []), ...props.options ?? [] ].flatMap(option => {
-          const mainOption = {
-            type: 'option',
-            testId: props.optionTestId,
-            classNames: option.value === '' ? [ 'empty-option' ] : [],
-            attributes: {
-              value: option.value,
-              ...(option.description != null && option.description.trim() !== '' ? { 'data-description': option.description } : {})
-            },
-            children: [
-              option.label
-            ]
-          };
-
-          // Add disabled description option if description exists
-          if (option.description != null && option.description.trim() !== '') {
-            return [
-              mainOption,
-              {
-                type: 'option',
-                testId: props.optionTestId,
-                classNames: [ 'description-option' ],
-                attributes: {
-                  value: '',
-                  disabled: 'disabled'
-                },
-                children: [
-                  `  ${option.description}`
-                ]
-              }
-            ];
-          }
-
-          return [ mainOption ];
-        }) as DomBuilderObject[]
+          : []), ...props.options ?? [] ].map(option => ({
+          type: 'option',
+          testId: props.optionTestId,
+          classNames: option.value === '' ? [ 'empty-option' ] : [],
+          attributes: {
+            value: option.value,
+          },
+          children: [
+            option.label
+          ]
+        })) as DomBuilderObject[]
     });
     if (props.value !== undefined) {
       this.selectElement.value = props.value;
@@ -149,22 +125,36 @@ export class SelectInternal {
       ]
     });
 
-    // Add tooltip functionality if tooltip is provided
-    if (props.tooltip != null && props.tooltip.trim() !== '') {
-      this.selectContainer.update({
-        events: {
-          mouseenter: () => {
-            if (props.tooltip != null && props.tooltip.trim() !== '') {
-              this.showTooltip(props.tooltip);
-            }
-          },
-          mouseleave: () => {
-            this.hideTooltip();
+    // Add tooltip functionality
+    this.setupTooltip();
+  }
+
+  private readonly setupTooltip = (): void => {
+    this.selectContainer.update({
+      events: {
+        mouseenter: () => {
+          const currentTooltip = this.getCurrentTooltip();
+          if (currentTooltip != null && currentTooltip.trim() !== '') {
+            this.showTooltip(currentTooltip);
           }
+        },
+        mouseleave: () => {
+          this.hideTooltip();
         }
-      });
+      }
+    });
+  };
+
+  private readonly getCurrentTooltip = (): string => {
+    const currentValue = this.selectElement.value;
+    const selectedOption = this.props.options?.find(option => option.value === currentValue);
+
+    // If there's a selected option, show label and description; otherwise use the base tooltip
+    if (selectedOption?.description != null) {
+      return `<strong>${selectedOption.label}</strong><br>${selectedOption.description}`;
     }
-  }
+    return this.props.tooltip ?? '';
+  };
 
   setValue = (value: string): void => {
     this.selectElement.value = value;