refactor: improve dropdown handling in DocksCommand and enhance DocksTabs layout for better visibility

Author: erdalkaraca

packages/core/src/components/command.ts

@@ -60,34 +60,37 @@ export class DocksCommand extends DocksWidget {
     @state()
     private dropdownContributions: Contribution[] = []
 
+    private closeDropdown(dropdown: { open?: boolean } | null | undefined) {
+        if (dropdown && dropdown.open !== undefined) {
+            dropdown.open = false
+        }
+    }
+
+    private closeParentDropdown() {
+        this.closeDropdown(this.closest('wa-dropdown') as { open?: boolean } | null)
+    }
+
     private handleClick(event?: Event) {
         if (this.disabled) return
 
         if (event) {
             event.stopPropagation()
         }
 
+        this.closeParentDropdown()
+
         if (this.action) {
             this.action(event)
             return
         }
 
         if (this.cmd) {
-            const dropdown = this.closest('wa-dropdown') as any;
-            if (dropdown && dropdown.open !== undefined) {
-                dropdown.open = false;
-            }
             void this.executeCommand(this.cmd, this.params);
         }
     }
 
     private handleSelect(event: CustomEvent) {
-        // Close dropdown immediately when any item is selected
-        // This ensures the dropdown is hidden before the command executes
-        const dropdown = event.target as any;
-        if (dropdown && dropdown.open !== undefined) {
-            dropdown.open = false;
-        }
+        this.closeDropdown(event.target as { open?: boolean })
     }
 
     private isInDropdown(): boolean {

packages/core/src/parts/tabs.ts

@@ -469,13 +469,27 @@ export class DocksTabs extends DocksContainer {
             overflow: hidden;
         }
 
-        :host(:is([placement="top"], [placement="bottom"])) wa-tab-group::part(base) {
+        /* Top: nav (order 0) → row 1 auto, body (order 2) → row 2 1fr. */
+        :host([placement="top"]) wa-tab-group::part(base) {
             display: grid;
             grid-template-rows: auto minmax(0, 1fr);
             height: 100%;
             width: 100%;
         }
 
+        /* Bottom: body (order 1) → row 1 1fr, nav (order 2) → row 2 auto. */
+        :host([placement="bottom"]) wa-tab-group::part(base) {
+            display: grid;
+            grid-template-rows: minmax(0, 1fr) auto;
+            height: 100%;
+            width: 100%;
+        }
+
+        :host([placement="bottom"]) wa-tab-group::part(body) {
+            min-height: 0;
+            overflow: hidden;
+        }
+
         :host(:is([placement="start"], [placement="end"])) wa-tab-group::part(base) {
             height: 100%;
             width: 100%;

packages/extension-dataviewer/package.json

@@ -17,6 +17,10 @@
     "./api": {
       "types": "./dist/api.d.ts",
       "import": "./dist/api.js"
+    },
+    "./table": {
+      "types": "./dist/docks-data-table.d.ts",
+      "import": "./dist/table.js"
     }
   },
   "files": [

packages/extension-dataviewer/vite.config.ts

@@ -22,6 +22,7 @@ export default defineConfig({
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
         api: path.resolve(__dirname, 'src/api.ts'),
+        table: path.resolve(__dirname, 'src/docks-data-table.ts'),
       },
       formats: ['es'],
       fileName: (_, name) => `${name}.js`,