fixes

ni · May 16, 2024 · 40fa0f9 · 40fa0f9
1 parent 000776f
commit 40fa0f9
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 25 deletions.
diff --git a/packages/nimble-components/src/table-column/base/models/column-internals.ts b/packages/nimble-components/src/table-column/base/models/column-internals.ts
@@ -31,7 +31,7 @@ export interface ColumnInternalsOptions<
      * The tag to use to render the group header content for a column.
      * The element this tag refers to must derive from TableGroupHeaderView.
      */
-    readonly groupHeaderViewTag: string | undefined;
+    readonly groupHeaderViewTag: string;
 
     /**
      * The names of events that should be delegated from the cell view to the column.
@@ -115,7 +115,7 @@ export class ColumnInternals<
     /**
      * Template for the group header view
      */
-    public readonly groupHeaderViewTemplate: ViewTemplate<TableGroupRow> | undefined;
+    public readonly groupHeaderViewTemplate: ViewTemplate<TableGroupRow>;
 
     /**
      * Whether or not this column can be used to group rows by
@@ -196,9 +196,9 @@ export class ColumnInternals<
     public constructor(options: ColumnInternalsOptions<TColumnValidator>) {
         this.cellRecordFieldNames = options.cellRecordFieldNames;
         this.cellViewTemplate = createCellViewTemplate(options.cellViewTag);
-        this.groupHeaderViewTemplate = options.groupHeaderViewTag ? createGroupHeaderViewTemplate(
+        this.groupHeaderViewTemplate = createGroupHeaderViewTemplate(
             options.groupHeaderViewTag
-        ) : undefined;
+        );
         this.delegatedEvents = options.delegatedEvents;
         this.slotNames = options.slotNames ?? [];
         this.sortOperation = options.sortOperation ?? TableColumnSortOperation.basic;

diff --git a/packages/nimble-components/src/table-column/menu-button/cell-view/index.ts b/packages/nimble-components/src/table-column/menu-button/cell-view/index.ts
@@ -1,4 +1,5 @@
 import { DesignSystem } from '@microsoft/fast-foundation';
+import { observable } from '@microsoft/fast-element';
 import { TableCellView } from '../../base/cell-view';
 import type { TableColumnMenuButtonCellRecord, TableColumnMenuButtonColumnConfig } from '..';
 import { template } from './templates';
@@ -21,6 +22,11 @@ export class TableColumnMenuButtonCellView extends TableCellView<TableColumnMenu
     /** @internal */
     public menuButton?: MenuButton;
 
+    // TODO: This doesn't work the way it should because the title is only added to the button when hovering over the span.
+    /** @internal */
+    @observable
+    public hasOverflow = false;
+
     public override focusedRecycleCallback(): void {
         this.menuButton?.blur();
     }
@@ -29,7 +35,7 @@ export class TableColumnMenuButtonCellView extends TableCellView<TableColumnMenu
         const configuredSlotName = this.columnConfig?.menuSlot;
         if (configuredSlotName && event.detail.newState) {
             const eventDetail: CellViewSlotRequestedEventDetail = {
-                slotNames: [configuredSlotName]
+                slots: [{ name: configuredSlotName, slot: menuSlotName }]
             };
             this.$emit('cell-view-slots-requested', eventDetail);
         }

diff --git a/packages/nimble-components/src/table-column/menu-button/cell-view/templates.ts b/packages/nimble-components/src/table-column/menu-button/cell-view/templates.ts
@@ -3,6 +3,7 @@ import type { TableColumnMenuButtonCellView } from '.';
 import { menuButtonTag } from '../../../menu-button';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 import { iconArrowExpanderDownTag } from '../../../icons/arrow-expander-down';
+import { overflow } from '../../../utilities/directive/overflow';
 
 // prettier-ignore
 export const template = html<TableColumnMenuButtonCellView>`
@@ -12,8 +13,9 @@ export const template = html<TableColumnMenuButtonCellView>`
             appearance="${x => x.columnConfig?.appearance}"
             appearance-variant="${x => x.columnConfig?.appearanceVariant}"
             @beforetoggle="${(x, c) => x.onMenuButtonBeforeToggle(c.event as CustomEvent<MenuButtonToggleEventDetail>)}"
+            title=${x => (x.hasOverflow && x.cellRecord!.value ? x.cellRecord!.value : null)}
         >
-            <span class="value-label">${x => x.cellRecord?.value}</span>
+            <span class="value-label" ${overflow('hasOverflow')}>${x => x.cellRecord?.value}</span>
             <${iconArrowExpanderDownTag} slot="end"></${iconArrowExpanderDownTag}>
 
             <slot name="menu" slot="menu"></slot>

diff --git a/packages/nimble-components/src/table-column/menu-button/index.ts b/packages/nimble-components/src/table-column/menu-button/index.ts
@@ -10,6 +10,8 @@ import { mixinFractionalWidthColumnAPI } from '../mixins/fractional-width-column
 import { TableColumn } from '../base';
 import { ButtonAppearance, ButtonAppearanceVariant } from '../../button/types';
 import { menuSlotName } from './types';
+import { tableColumnTextGroupHeaderViewTag } from '../text/group-header-view';
+import { mixinGroupableColumnAPI } from '../mixins/groupable-column';
 
 export type TableColumnMenuButtonCellRecord = TableStringField<'value'>;
 
@@ -29,10 +31,10 @@ declare global {
  * The table column for displaying string fields as text.
  */
 export class TableColumnMenuButton extends mixinFractionalWidthColumnAPI(
-    TableColumn<TableColumnMenuButtonColumnConfig>
+    mixinGroupableColumnAPI(
+        TableColumn<TableColumnMenuButtonColumnConfig>
+    )
 ) {
-    public override sortingDisabled = true;
-
     @attr
     public appearance: ButtonAppearance = ButtonAppearance.outline;
 
@@ -49,7 +51,7 @@ export class TableColumnMenuButton extends mixinFractionalWidthColumnAPI(
         return {
             cellRecordFieldNames: ['value'],
             cellViewTag: tableColumnMenuButtonCellViewTag,
-            groupHeaderViewTag: undefined,
+            groupHeaderViewTag: tableColumnTextGroupHeaderViewTag,
             delegatedEvents: ['beforetoggle', 'toggle'],
             slotNames: [menuSlotName],
             validator: new ColumnValidator<[]>([])

diff --git a/packages/nimble-components/src/table/components/row/index.ts b/packages/nimble-components/src/table/components/row/index.ts
@@ -242,7 +242,7 @@ export class TableRow<
             // mkreis TODO: is this a valid non-null assertion?
             rowId: this.recordId!,
             columnInternalId: column.columnInternals.uniqueId,
-            slotNames: event.detail.slotNames
+            slots: event.detail.slots
         };
         this.$emit('row-slots-requested', eventDetails);
     }

diff --git a/packages/nimble-components/src/table/index.ts b/packages/nimble-components/src/table/index.ts
@@ -223,7 +223,7 @@ export class Table<
 
     /** @internal */
     @observable
-    public slotsByRow: { [rowId: string]: string[] } = {};
+    public slotsByRow: { [rowId: string]: { name: string, slot: string }[] } = {};
 
     private readonly table: TanStackTable<TableNode<TData>>;
     private options: TanStackTableOptionsResolved<TableNode<TData>>;
@@ -240,8 +240,8 @@ export class Table<
     // the selection checkbox 'checked' value should be ingored.
     // https://github.com/microsoft/fast/issues/5750
     private ignoreSelectionChangeEvents = false;
-    // Map from internal unique column IDs to an object of the form { <slotname_string>: <row_id_string> }
-    private readonly columnSlotLocations: Map<string, { [slotName: string]: string }> = new Map<string, { [slotName: string]: string }>();
+    // Map from internal unique column IDs to an object of the form { <slot_string>: { rowId: <row_id_string>, name: <slot_name_string> } }
+    private readonly columnSlotLocations: Map<string, { [slot: string]: { rowId: string, name: string } }> = new Map<string, { [slotName: string]: { rowId: string, name: string } }>();
 
     public constructor() {
         super();
@@ -444,8 +444,8 @@ export class Table<
             this.columnSlotLocations.set(columnUniqueId, {});
         }
         const columnSlots = this.columnSlotLocations.get(columnUniqueId)!;
-        for (const slotName of event.detail.slotNames) {
-            columnSlots[slotName] = event.detail.rowId;
+        for (const slot of event.detail.slots) {
+            columnSlots[slot.slot] = { rowId: event.detail.rowId, name: slot.name };
         }
 
         this.regenerateSlotsByRowObject();
@@ -677,14 +677,19 @@ export class Table<
     }
 
     private regenerateSlotsByRowObject(): void {
-        const updatedValue: { [rowId: string]: string[] } = {};
+        const updatedValue: { [rowId: string]: { name: string, slot: string }[] } = {};
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        for (const [_columnId, slots] of this.columnSlotLocations) {
-            for (const [slotName, rowId] of Object.entries(slots)) {
+        for (const [columnId, slots] of this.columnSlotLocations) {
+            for (const [slot, otherInfo] of Object.entries(slots)) {
+                const rowId = otherInfo.rowId;
+                const slotName = otherInfo.name;
                 if (!updatedValue[rowId]) {
                     updatedValue[rowId] = [];
                 }
-                updatedValue[rowId]!.push(slotName);
+                updatedValue[rowId]!.push({
+                    name: slotName,
+                    slot: `${columnId}${slot}`
+                });
             }
         }
 

diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts
@@ -174,10 +174,10 @@ export const template = html<Table>`
                                             </slot>
                                         `)}
                                     `)}
-                                    ${repeat((x, c) => ((c.parent as Table).tableData[x.index]?.id ? (c.parent as Table).slotsByRow[(c.parent as Table).tableData[x.index]!.id] || [] : []), html<string>`
+                                    ${repeat((x, c) => ((c.parent as Table).tableData[x.index]?.id ? (c.parent as Table).slotsByRow[(c.parent as Table).tableData[x.index]!.id] || [] : []), html<{ name: string, slot: string }>`
                                         <slot
-                                            name="${x => x}"
-                                            slot="${x => x}"
+                                            name="${x => x.name}"
+                                            slot="${x => x.slot}"
                                         ></slot>
                                     `)}
                                     </${tableRowTag}>

diff --git a/packages/nimble-components/src/table/types.ts b/packages/nimble-components/src/table/types.ts
@@ -217,7 +217,7 @@ export interface TableRowState<TData extends TableRecord = TableRecord> {
  * @internal
  */
 export interface CellViewSlotRequestedEventDetail {
-    slotNames: string[];
+    slots: { slot: string, name: string }[];
 }
 
 /**
@@ -226,5 +226,5 @@ export interface CellViewSlotRequestedEventDetail {
 export interface RowSlotRequestedEventDetail {
     columnInternalId: string;
     rowId: string;
-    slotNames: string[];
+    slots: { slot: string, name: string }[];
 }
diff --git a/packages/storybook/src/nimble/table-column/menu-button/table-column-menu-button.stories.ts b/packages/storybook/src/nimble/table-column/menu-button/table-column-menu-button.stories.ts
@@ -121,6 +121,7 @@ export const menuButtonColumn: StoryObj<MenuButtonColumnTableArgs> = {
                 field-name="fullName"
                 appearance="${x => x.appearance}"
                 appearance-variant="${x => x.appearanceVariant}"
+                menu-slot="temp-menu"
                 @delegated-event="${(x, c) => x.updateMenuItems(x, c.event as CustomEvent<DelegatedEventEventDetails>)}"
             >
             Menu Button Column