@ni/nimble-components 18.4.0 → 18.4.1

package/dist/all-components-bundle.js

@@ -26875,6 +26875,12 @@
     __decorate$1([
         attr({ attribute: 'column-id' })
     ], TableColumn.prototype, "columnId", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-slot' })
+    ], TableColumn.prototype, "actionMenuSlot", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-label' })
+    ], TableColumn.prototype, "actionMenuLabel", void 0);
 
     /**
      * Helper class for the nimble-table to validate that the table's configuration
@@ -26981,9 +26987,7 @@
 
     .table-row-container {
         width: 100%;
-        position: sticky;
-        overflow: hidden;
-        top: 0px;
+        position: relative;
     }
 
     .header-container {
@@ -27005,6 +27009,7 @@
     .row {
         background: ${applicationBackgroundColor};
         position: relative;
+        box-sizing: border-box;
     }
 
     .row::before {
@@ -27080,6 +27085,19 @@
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
     }
+
+    nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: none;
+    }
+
+    nimble-table-cell[menu-open] {
+        --ni-private-table-cell-action-menu-display: block;
+    }
+
+    :host(.hover) nimble-table-cell,
+    :host(:hover) nimble-table-cell {
+        --ni-private-table-cell-action-menu-display: block;
+    }
 `;
 
     const styles$a = css `
@@ -27089,6 +27107,9 @@
         padding: 0px calc(${standardPadding} / 2);
         align-self: center;
         height: 100%;
+        grid-template-columns: 1fr auto;
+        /* A default value that will be overridden by the row */
+        --ni-private-table-cell-action-menu-display: block;
     }
 
     .cell-content-container {
@@ -27096,12 +27117,30 @@
         display: flex;
         align-items: center;
     }
+
+    .action-menu {
+        display: var(--ni-private-table-cell-action-menu-display);
+    }
 `;
 
     // prettier-ignore
     const template$6 = html `
     <template role="cell">
         <div ${ref('cellContentContainer')} class="cell-content-container"></div>
+
+        ${when(x => x.hasActionMenu, html `
+            <${DesignSystem.tagFor(MenuButton)}
+                content-hidden
+                appearance="${ButtonAppearance.ghost}"
+                @beforetoggle="${(x, c) => x.onActionMenuBeforeToggle(c.event)}"
+                @toggle="${(x, c) => x.onActionMenuToggle(c.event)}"
+                class="action-menu"
+            >
+                <${DesignSystem.tagFor(IconThreeDotsLine)} slot="start"></${DesignSystem.tagFor(IconThreeDotsLine)}>
+                ${x => x.actionMenuLabel}
+                <slot name="cellActionMenu" slot="menu"></slot>
+            </${DesignSystem.tagFor(MenuButton)}>
+        `)}
     </template>
 `;
 
@@ -27112,6 +27151,8 @@
     class TableCell extends FoundationElement {
         constructor() {
             super(...arguments);
+            this.hasActionMenu = false;
+            this.menuOpen = false;
             this.customCellView = undefined;
         }
         connectedCallback() {
@@ -27125,6 +27166,13 @@
                 this.customCellView = undefined;
             }
         }
+        onActionMenuBeforeToggle(event) {
+            this.$emit('cell-action-menu-beforetoggle', event.detail);
+        }
+        onActionMenuToggle(event) {
+            this.menuOpen = event.detail.newState;
+            this.$emit('cell-action-menu-toggle', event.detail);
+        }
         cellStateChanged() {
             this.customCellView?.bind(this.cellState, defaultExecutionContext);
         }
@@ -27151,6 +27199,15 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "cellStyles", void 0);
+    __decorate$1([
+        attr({ attribute: 'has-action-menu', mode: 'boolean' })
+    ], TableCell.prototype, "hasActionMenu", void 0);
+    __decorate$1([
+        attr({ attribute: 'menu-open', mode: 'boolean' })
+    ], TableCell.prototype, "menuOpen", void 0);
+    __decorate$1([
+        attr({ attribute: 'action-menu-label' })
+    ], TableCell.prototype, "actionMenuLabel", void 0);
     const nimbleTableCell = TableCell.compose({
         baseName: 'table-cell',
         template: template$6,
@@ -27167,7 +27224,18 @@
                 :cellTemplate="${x => x.column.cellTemplate}"
                 :cellStyles="${x => x.column.cellStyles}"
                 :cellState="${x => x.cellState}"
+                ?has-action-menu="${x => !!x.column.actionMenuSlot}"
+                action-menu-label="${x => x.column.actionMenuLabel}"
+                @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"
+                @cell-action-menu-toggle="${(x, c) => c.parent.onCellActionMenuToggle(c.event, x.column)}"
             >
+
+                ${when((x, c) => (c.parent.currentActionMenuColumn === x.column) && x.column.actionMenuSlot, html `
+                    <slot
+                        name="${x => `row-action-menu-${x.column.actionMenuSlot}`}"
+                        slot="cellActionMenu"
+                    ></slot>
+                `)}
             </${DesignSystem.tagFor(TableCell)}>
         `)}
     </template>
@@ -27181,6 +27249,7 @@
         constructor() {
             super(...arguments);
             this.columns = [];
+            this.menuOpen = false;
         }
         get columnStates() {
             return this.columns.map(column => {
@@ -27204,6 +27273,23 @@
                 return { column, cellState };
             });
         }
+        onCellActionMenuBeforeToggle(event, column) {
+            this.currentActionMenuColumn = column;
+            this.emitToggleEvent('row-action-menu-beforetoggle', event.detail, column);
+        }
+        onCellActionMenuToggle(event, column) {
+            this.menuOpen = event.detail.newState;
+            this.emitToggleEvent('row-action-menu-toggle', event.detail, column);
+        }
+        emitToggleEvent(eventType, menuButtonEventDetail, column) {
+            const detail = {
+                newState: menuButtonEventDetail.newState,
+                oldState: menuButtonEventDetail.oldState,
+                recordIds: [this.recordId],
+                columnId: column.columnId
+            };
+            this.$emit(eventType, detail);
+        }
         hasValidFieldNames(keys) {
             return keys.every(key => key !== undefined);
         }
@@ -27217,6 +27303,12 @@
     __decorate$1([
         observable
     ], TableRow.prototype, "columns", void 0);
+    __decorate$1([
+        observable
+    ], TableRow.prototype, "currentActionMenuColumn", void 0);
+    __decorate$1([
+        attr({ attribute: 'menu-open', mode: 'boolean' })
+    ], TableRow.prototype, "menuOpen", void 0);
     __decorate$1([
         volatile
     ], TableRow.prototype, "columnStates", null);
@@ -27243,7 +27335,7 @@
             </div>
             <div class="table-viewport" ${ref('viewport')}>
                 <div class="table-scroll" style="height: ${x => x.virtualizer.allRowsHeight}px;"></div>
-                <div class="table-row-container" role="rowgroup" style="transform: ${x => (x.virtualizer.rowContainerYOffset === 0 ? 'none' : `translateY(${x.virtualizer.rowContainerYOffset}px)`)};">
+                <div class="table-row-container" role="rowgroup" style="top: ${x => `${x.virtualizer.rowContainerYOffset}px;`}">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
                             <${DesignSystem.tagFor(TableRow)}
@@ -27251,8 +27343,18 @@
                                 record-id="${(x, c) => c.parent.tableData[x.index]?.id}"
                                 :dataRecord="${(x, c) => c.parent.tableData[x.index]?.record}"
                                 :columns="${(_, c) => c.parent.columns}"
+                                @row-action-menu-beforetoggle="${(_, c) => c.parent.onRowActionMenuBeforeToggle(c.event)}"
+                                @row-action-menu-toggle="${(_, c) => c.parent.onRowActionMenuToggle(c.event)}"
                                 style="height: ${x => x.size}px;"
                             >
+                            ${when((x, c) => c.parent.openActionMenuRecordId === c.parent.tableData[x.index]?.id, html `
+                                ${repeat((_, c) => c.parent.actionMenuSlots, html `
+                                    <slot
+                                        name="${x => x}"
+                                        slot="${x => `row-action-menu-${x}`}">
+                                    </slot>
+                                `)}
+                            `)}                        
                             </${DesignSystem.tagFor(TableRow)}>
                         `)}
                     `)}
@@ -27933,7 +28035,8 @@
             this.handleVirtualizerChange();
         }
         createVirtualizerOptions() {
-            const rowHeight = parseFloat(controlHeight.getValueFor(this.table));
+            const rowHeight = parseFloat(controlHeight.getValueFor(this.table))
+                + 2 * parseFloat(borderWidth.getValueFor(this.table));
             return {
                 count: this.table.tableData.length,
                 getScrollElement: () => {
@@ -27960,10 +28063,7 @@
             let rowContainerYOffset = 0;
             if (this.visibleItems.length > 0) {
                 const firstItem = this.visibleItems[0];
-                const lastItem = this.visibleItems[this.visibleItems.length - 1];
-                if (lastItem.end < this.allRowsHeight) {
-                    rowContainerYOffset = firstItem.start - virtualizer.scrollOffset;
-                }
+                rowContainerYOffset = firstItem.start;
             }
             this.rowContainerYOffset = rowContainerYOffset;
         }
@@ -27999,6 +28099,10 @@
              * @internal
              */
             this.childItems = [];
+            /**
+             * @internal
+             */
+            this.actionMenuSlots = [];
             /**
              * @internal
              */
@@ -28064,6 +28168,13 @@
                 }
             }
         }
+        onRowActionMenuBeforeToggle(event) {
+            this.openActionMenuRecordId = event.detail.recordIds[0];
+            this.$emit('action-menu-beforetoggle', event.detail);
+        }
+        onRowActionMenuToggle(event) {
+            this.$emit('action-menu-toggle', event.detail);
+        }
         childItemsChanged() {
             void this.updateColumnsFromChildItems();
         }
@@ -28077,6 +28188,13 @@
                 return;
             }
             this.validateAndObserveColumns();
+            const slots = new Set();
+            for (const column of this.columns) {
+                if (column.actionMenuSlot) {
+                    slots.add(column.actionMenuSlot);
+                }
+            }
+            this.actionMenuSlots = Array.from(slots);
         }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
@@ -28165,6 +28283,12 @@
     __decorate$1([
         observable
     ], Table.prototype, "childItems", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "actionMenuSlots", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "openActionMenuRecordId", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);