@ni/nimble-components 18.6.2 → 18.6.4

package/dist/all-components-bundle.js

@@ -27175,6 +27175,8 @@
          */
         localeAwareCaseSensitive: 'localeAwareCaseSensitive'
     };
+    const defaultMinPixelWidth = 88;
+    const defaultFractionalWidth = 1;
 
     /**
      * The base class for table columns
@@ -27184,6 +27186,23 @@
             super();
             this.columnHidden = false;
             this.sortDirection = TableColumnSortDirection.none;
+            /**
+             * @internal
+             * Used by the Table in order to size a column proportionally to the available
+             * width of a row.
+             */
+            this.currentFractionalWidth = defaultFractionalWidth;
+            /**
+             * @internal
+             * Used by column plugins to size a column proportionally to the available
+             * width of a row. Sets currentFractionalWidth when changed.
+             */
+            this.internalFractionalWidth = defaultFractionalWidth;
+            /**
+             * @internal
+             * The minimum size in pixels according to the design doc
+             */
+            this.internalMinPixelWidth = defaultMinPixelWidth;
             /**
              * @internal
              *
@@ -27206,6 +27225,12 @@
             super.connectedCallback();
             this.setAttribute('slot', this.internalUniqueId);
         }
+        internalFractionalWidthChanged() {
+            this.currentFractionalWidth = this.internalFractionalWidth;
+        }
+        internalPixelWidthChanged() {
+            this.currentPixelWidth = this.internalPixelWidth;
+        }
     }
     __decorate$1([
         attr({ attribute: 'column-id' })
@@ -27225,6 +27250,21 @@
     __decorate$1([
         attr({ attribute: 'sort-direction' })
     ], TableColumn.prototype, "sortDirection", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "currentPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "currentFractionalWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalPixelWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalFractionalWidth", void 0);
+    __decorate$1([
+        observable
+    ], TableColumn.prototype, "internalMinPixelWidth", void 0);
     __decorate$1([
         observable
     ], TableColumn.prototype, "dataRecordFieldNames", void 0);
@@ -27333,6 +27373,7 @@
     }
 
     .table-container {
+        overflow: hidden;
         display: flex;
         flex-direction: column;
         width: 100%;
@@ -27341,7 +27382,7 @@
     }
 
     .table-viewport {
-        overflow-y: auto;
+        overflow: auto;
         display: block;
         height: 100%;
         position: relative;
@@ -27352,11 +27393,13 @@
         position: absolute;
         top: 0px;
         width: 100%;
+        height: var(--ni-private-table-scroll-height);
     }
 
     .table-row-container {
         width: 100%;
         position: relative;
+        top: var(--ni-private-table-row-container-top);
     }
 
     .header-container {
@@ -27365,10 +27408,17 @@
     }
 
     .header-row {
-        display: flex;
-        flex-direction: row;
+        display: grid;
         background: ${applicationBackgroundColor};
         position: relative;
+        width: fit-content;
+        min-width: 100%;
+        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
+        left: var(--ni-private-table-scroll-x);
+    }
+
+    .header-scrollbar-spacer {
+        width: var(--ni-private-table-header-scrollbar-spacer-width);
     }
 
     .header {
@@ -27492,10 +27542,13 @@
     ${display('grid')}
 
     :host {
-        height: ${controlHeight};
+        height: calc(${controlHeight} + 2 * ${borderWidth});
         border-top: calc(2 * ${borderWidth}) solid ${tableRowBorderColor};
         grid-auto-flow: column;
         grid-auto-columns: 1fr;
+        grid-template-columns: var(--ni-private-table-row-grid-columns) auto;
+        width: fit-content;
+        min-width: 100%;
     }
 
     nimble-table-cell {
@@ -27735,7 +27788,13 @@
     // prettier-ignore
     const template$4 = html `
     <template role="table" ${children$1({ property: 'childItems', filter: elements() })}>
-        <div class="table-container">
+        <div class="table-container" style="
+            --ni-private-table-scroll-x: -${x => x.scrollX}px;
+            --ni-private-table-header-scrollbar-spacer-width: ${x => x.virtualizer.headerContainerMarginRight}px;
+            --ni-private-table-scroll-height: ${x => x.virtualizer.allRowsHeight}px;
+            --ni-private-table-row-container-top: ${x => x.virtualizer.rowContainerYOffset}px; 
+            --ni-private-table-row-grid-columns: ${x => x.rowGridColumns ?? ''}
+            ">
             <div role="rowgroup" class="header-container">
                 <div class="header-row" role="row">
                     ${repeat(x => x.columns, html `
@@ -27749,12 +27808,13 @@
                             </${DesignSystem.tagFor(TableHeader)}>
                         `)}
                     `)}
-                    <div class="header-scrollbar-spacer" style="width: ${x => x.virtualizer.headerContainerMarginRight}px;"></div>
+                    <div class="header-scrollbar-spacer"></div>
                 </div>
             </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="top: ${x => `${x.virtualizer.rowContainerYOffset}px;`}">
+                <div class="table-scroll"></div>
+                <div class="table-row-container" 
+                     role="rowgroup">
                     ${when(x => x.columns.length > 0 && x.canRenderRows, html `
                         ${repeat(x => x.virtualizer.visibleItems, html `
                             <${DesignSystem.tagFor(TableRow)}
@@ -27764,7 +27824,6 @@
                                 :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 `
@@ -28426,7 +28485,7 @@
                     // If we have enough rows that a vertical scrollbar is shown, we need to offset the header widths
                     // by the same margin so the column headers align with the corresponding rendered cells
                     const viewportBoundingWidth = borderBoxSize.inlineSize;
-                    this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.scrollWidth;
+                    this.headerContainerMarginRight = viewportBoundingWidth - this.table.viewport.clientWidth;
                 }
             });
         }
@@ -28534,6 +28593,135 @@
         return 1;
     }
 
+    const isColumnProperty = (changedProperty, ...args) => {
+        for (const arg of args) {
+            if (changedProperty === arg) {
+                return true;
+            }
+        }
+        return false;
+    };
+    /**
+     * Helper class to track what updates are needed to the table based on configuration
+     * changes.
+     */
+    class UpdateTracker {
+        constructor(table) {
+            this.requiredUpdates = {
+                rowIds: false,
+                columnIds: false,
+                columnSort: false,
+                columnWidths: false,
+                columnDefinition: false,
+                actionMenuSlots: false
+            };
+            this.updateQueued = false;
+            this.table = table;
+        }
+        get updateRowIds() {
+            return this.requiredUpdates.rowIds;
+        }
+        get updateColumnIds() {
+            return this.requiredUpdates.columnIds;
+        }
+        get updateColumnSort() {
+            return this.requiredUpdates.columnSort;
+        }
+        get updateColumnWidths() {
+            return this.requiredUpdates.columnWidths;
+        }
+        get updateColumnDefinition() {
+            return this.requiredUpdates.columnDefinition;
+        }
+        get updateActionMenuSlots() {
+            return this.requiredUpdates.actionMenuSlots;
+        }
+        get requiresTanStackUpdate() {
+            return (this.requiredUpdates.rowIds
+                || this.requiredUpdates.columnSort
+                || this.requiredUpdates.columnDefinition);
+        }
+        get requiresTanStackDataReset() {
+            return (this.requiredUpdates.rowIds || this.requiredUpdates.columnDefinition);
+        }
+        trackAllStateChanged() {
+            this.setAllKeys(true);
+            this.queueUpdate();
+        }
+        trackColumnPropertyChanged(changedColumnProperty) {
+            if (isColumnProperty(changedColumnProperty, 'columnId')) {
+                this.requiredUpdates.columnIds = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'operandDataRecordFieldName', 'sortOperation')) {
+                this.requiredUpdates.columnDefinition = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'sortIndex', 'sortDirection')) {
+                this.requiredUpdates.columnSort = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'currentFractionalWidth', 'currentPixelWidth', 'internalMinPixelWidth', 'columnHidden')) {
+                this.requiredUpdates.columnWidths = true;
+            }
+            else if (isColumnProperty(changedColumnProperty, 'actionMenuSlot')) {
+                this.requiredUpdates.actionMenuSlots = true;
+            }
+            this.queueUpdate();
+        }
+        trackColumnInstancesChanged() {
+            this.requiredUpdates.columnIds = true;
+            this.requiredUpdates.columnDefinition = true;
+            this.requiredUpdates.columnSort = true;
+            this.requiredUpdates.columnWidths = true;
+            this.requiredUpdates.actionMenuSlots = true;
+            this.queueUpdate();
+        }
+        trackIdFieldNameChanged() {
+            this.requiredUpdates.rowIds = true;
+            this.queueUpdate();
+        }
+        setAllKeys(value) {
+            Object.keys(this.requiredUpdates).forEach(key => {
+                this.requiredUpdates[key] = value;
+            });
+        }
+        queueUpdate() {
+            if (!this.table.$fastController.isConnected) {
+                return;
+            }
+            if (!this.updateQueued) {
+                this.updateQueued = true;
+                DOM.queueUpdate(() => {
+                    this.table.update();
+                    this.setAllKeys(false);
+                    this.updateQueued = false;
+                });
+            }
+        }
+    }
+
+    /**
+     * This class provides helper methods for managing the layout of cells within
+     * a Table.
+     */
+    class TableLayoutHelper {
+        static getGridTemplateColumns(columns) {
+            return (columns
+                ?.filter(column => !column.columnHidden)
+                .reduce((accumulator, currentValue) => {
+                const gap = accumulator === '' ? '' : ' ';
+                const minPixelWidth = currentValue.internalMinPixelWidth;
+                if (currentValue.currentPixelWidth) {
+                    const pixelWidth = currentValue.currentPixelWidth;
+                    const gridPixelWidth = pixelWidth > minPixelWidth
+                        ? pixelWidth
+                        : minPixelWidth;
+                    return `${accumulator}${gap}${gridPixelWidth}px`;
+                }
+                const fractionalWidth = currentValue.currentFractionalWidth;
+                return `${accumulator}${gap}minmax(${minPixelWidth}px, ${fractionalWidth}fr)`;
+            }, '') ?? '');
+        }
+    }
+
     /**
      * A nimble-styled table.
      */
@@ -28560,8 +28748,16 @@
              * @internal
              */
             this.canRenderRows = true;
+            /**
+             * @internal
+             */
+            this.scrollX = 0;
             this.tableValidator = new TableValidator();
+            this.updateTracker = new UpdateTracker(this);
             this.columnNotifiers = [];
+            this.onViewPortScroll = (event) => {
+                this.scrollX = event.target.scrollLeft;
+            };
             this.options = {
                 data: [],
                 onStateChange: (_) => { },
@@ -28585,12 +28781,17 @@
         connectedCallback() {
             super.connectedCallback();
             this.virtualizer.connectedCallback();
-            this.validateAndObserveColumns();
+            this.updateTracker.trackAllStateChanged();
+            this.observeColumns();
+            this.viewport.addEventListener('scroll', this.onViewPortScroll, {
+                passive: true
+            });
         }
         disconnectedCallback() {
             super.disconnectedCallback();
             this.virtualizer.disconnectedCallback();
             this.removeColumnObservers();
+            this.viewport.removeEventListener('scroll', this.onViewPortScroll);
         }
         checkValidity() {
             return this.tableValidator.isValid();
@@ -28603,18 +28804,8 @@
          * is the string name of the property that changed on that column.
          */
         handleChange(source, args) {
-            if (source instanceof TableColumn) {
-                if (args === 'columnId') {
-                    this.validateColumnIds();
-                }
-                else if (args === 'operandDataRecordFieldName'
-                    || args === 'sortOperation') {
-                    this.generateTanStackColumns();
-                }
-                else if (args === 'sortIndex' || args === 'sortDirection') {
-                    this.validateColumnSortIndices();
-                    this.setSortState();
-                }
+            if (source instanceof TableColumn && typeof args === 'string') {
+                this.updateTracker.trackColumnPropertyChanged(args);
             }
         }
         onRowActionMenuBeforeToggle(event) {
@@ -28624,28 +28815,33 @@
         onRowActionMenuToggle(event) {
             this.$emit('action-menu-toggle', event.detail);
         }
-        childItemsChanged() {
-            void this.updateColumnsFromChildItems();
+        /**
+         * @internal
+         */
+        update() {
+            this.validate();
+            if (this.updateTracker.requiresTanStackUpdate) {
+                this.updateTanStack();
+            }
+            if (this.updateTracker.updateActionMenuSlots) {
+                this.updateActionMenuSlots();
+            }
+            if (this.updateTracker.updateColumnWidths) {
+                this.updateRowGridColumns();
+            }
         }
         idFieldNameChanged(_prev, _next) {
-            // Force TanStack to detect a data update because a row's ID is only
-            // generated when creating a new row model.
-            this.setTableData(this.table.options.data);
+            if (!this.$fastController.isConnected) {
+                return;
+            }
+            this.updateTracker.trackIdFieldNameChanged();
         }
         columnsChanged(_prev, _next) {
             if (!this.$fastController.isConnected) {
                 return;
             }
-            this.validateAndObserveColumns();
-            this.generateTanStackColumns();
-            this.setSortState();
-            const slots = new Set();
-            for (const column of this.columns) {
-                if (column.actionMenuSlot) {
-                    slots.add(column.actionMenuSlot);
-                }
-            }
-            this.actionMenuSlots = Array.from(slots);
+            this.observeColumns();
+            this.updateTracker.trackColumnInstancesChanged();
         }
         removeColumnObservers() {
             this.columnNotifiers.forEach(notifier => {
@@ -28653,28 +28849,21 @@
             });
             this.columnNotifiers = [];
         }
-        validateAndObserveColumns() {
+        observeColumns() {
             this.removeColumnObservers();
             for (const column of this.columns) {
                 const notifier = Observable.getNotifier(column);
                 notifier.subscribe(this);
                 this.columnNotifiers.push(notifier);
             }
-            this.validateColumnIds();
-            this.validateColumnSortIndices();
-        }
-        validateColumnIds() {
-            this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
-            this.canRenderRows = this.checkValidity();
-        }
-        validateColumnSortIndices() {
-            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
-            this.canRenderRows = this.checkValidity();
         }
         getColumnsParticipatingInSorting() {
             return this.columns.filter(x => x.sortDirection !== TableColumnSortDirection.none
                 && typeof x.sortIndex === 'number');
         }
+        childItemsChanged() {
+            void this.updateColumnsFromChildItems();
+        }
         async updateColumnsFromChildItems() {
             const definedElements = this.childItems.map(async (item) => (item.matches(':not(:defined)')
                 ? customElements.whenDefined(item.localName)
@@ -28682,18 +28871,53 @@
             await Promise.all(definedElements);
             this.columns = this.childItems.filter((x) => x instanceof TableColumn);
         }
+        updateTanStack() {
+            const updatedOptions = {
+                state: {}
+            };
+            if (this.updateTracker.updateColumnSort) {
+                updatedOptions.state.sorting = this.calculateTanStackSortState();
+            }
+            if (this.updateTracker.updateColumnDefinition) {
+                updatedOptions.columns = this.calculateTanStackColumns();
+            }
+            if (this.updateTracker.updateRowIds) {
+                updatedOptions.getRowId = this.calculateTanStackRowIdFunction();
+            }
+            if (this.updateTracker.requiresTanStackDataReset) {
+                // Perform a shallow copy of the data to trigger tanstack to regenerate the row models and columns.
+                updatedOptions.data = [...this.table.options.data];
+            }
+            this.updateTableOptions(updatedOptions);
+        }
+        updateActionMenuSlots() {
+            const slots = new Set();
+            for (const column of this.columns) {
+                if (column.actionMenuSlot) {
+                    slots.add(column.actionMenuSlot);
+                }
+            }
+            this.actionMenuSlots = Array.from(slots);
+        }
+        updateRowGridColumns() {
+            this.rowGridColumns = TableLayoutHelper.getGridTemplateColumns(this.columns);
+        }
+        validate() {
+            this.tableValidator.validateColumnIds(this.columns.map(x => x.columnId));
+            this.tableValidator.validateColumnSortIndices(this.getColumnsParticipatingInSorting().map(x => x.sortIndex));
+            this.validateWithData(this.table.options.data);
+        }
+        validateWithData(data) {
+            this.tableValidator.validateRecordIds(data, this.idFieldName);
+            this.canRenderRows = this.checkValidity();
+        }
         setTableData(newData) {
             const data = newData.map(record => {
                 return { ...record };
             });
-            this.tableValidator.validateRecordIds(data, this.idFieldName);
-            this.canRenderRows = this.checkValidity();
-            const getRowIdFunction = this.idFieldName === null || this.idFieldName === undefined
-                ? undefined
-                : (record) => record[this.idFieldName];
+            this.validateWithData(data);
             this.updateTableOptions({
-                data,
-                getRowId: getRowIdFunction
+                data
             });
         }
         refreshRows() {
@@ -28716,27 +28940,26 @@
             this.table.setOptions(this.options);
             this.refreshRows();
         }
-        setSortState() {
+        calculateTanStackSortState() {
             const sortedColumns = this.getColumnsParticipatingInSorting().sort((x, y) => x.sortIndex - y.sortIndex);
             this.firstSortedColumn = sortedColumns.length
                 ? sortedColumns[0]
                 : undefined;
-            const tanStackSortingState = sortedColumns.map(column => {
+            return sortedColumns.map(column => {
                 return {
                     id: column.internalUniqueId,
-                    desc: column.sortDirection
-                        === TableColumnSortDirection.descending
+                    desc: column.sortDirection === TableColumnSortDirection.descending
                 };
             });
-            this.updateTableOptions({
-                state: {
-                    sorting: tanStackSortingState
-                }
-            });
         }
-        generateTanStackColumns() {
-            const generatedColumns = this.columns.map(column => {
-                const columnDef = {
+        calculateTanStackRowIdFunction() {
+            return this.idFieldName === null || this.idFieldName === undefined
+                ? undefined
+                : (record) => record[this.idFieldName];
+        }
+        calculateTanStackColumns() {
+            return this.columns.map(column => {
+                return {
                     id: column.internalUniqueId,
                     accessorFn: (data) => {
                         const fieldName = column.operandDataRecordFieldName;
@@ -28747,13 +28970,6 @@
                     },
                     sortingFn: getTanStackSortingFunction(column.sortOperation)
                 };
-                return columnDef;
-            });
-            this.updateTableOptions({
-                // Force TanStack to detect a data update because a columns's accessor is
-                // referenced when creating a new row model.
-                data: [...this.table.options.data],
-                columns: generatedColumns
             });
         }
     }
@@ -28778,6 +28994,12 @@
     __decorate$1([
         observable
     ], Table.prototype, "canRenderRows", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "scrollX", void 0);
+    __decorate$1([
+        observable
+    ], Table.prototype, "rowGridColumns", void 0);
     __decorate$1([
         observable
     ], Table.prototype, "firstSortedColumn", void 0);
@@ -28793,14 +29015,61 @@
     :host {
         display: contents;
     }
+
+    .header-content {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
 `;
 
     const template$3 = html `
     <template>
-        <slot></slot>
+        <span class="header-content">
+            <slot></slot>
+        </span>
     </template>
 `;
 
+    // As the returned class is internal to the function, we can't write a signature that uses is directly, so rely on inference
+    // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types, @typescript-eslint/explicit-function-return-type
+    function mixinFractionalWidthColumnAPI(base) {
+        /**
+         * The Mixin that provides a concrete column with the API to support being resized
+         * proportionally within a Table.
+         */
+        class FractionalWidthColumn extends base {
+            constructor() {
+                super(...arguments);
+                this.fractionalWidth = defaultFractionalWidth;
+                this.minPixelWidth = defaultMinPixelWidth;
+            }
+            fractionalWidthChanged() {
+                if (typeof this.fractionalWidth === 'number') {
+                    this.internalFractionalWidth = this.fractionalWidth;
+                }
+                else {
+                    this.internalFractionalWidth = defaultFractionalWidth;
+                }
+            }
+            minPixelWidthChanged() {
+                if (typeof this.minPixelWidth === 'number') {
+                    this.internalMinPixelWidth = this.minPixelWidth;
+                }
+                else {
+                    this.internalMinPixelWidth = defaultMinPixelWidth;
+                }
+            }
+        }
+        attr({ attribute: 'fractional-width', converter: nullableNumberConverter })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        FractionalWidthColumn.prototype, 'fractionalWidth');
+        attr({ attribute: 'min-pixel-width', converter: nullableNumberConverter })(
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
+        FractionalWidthColumn.prototype, 'minPixelWidth');
+        return FractionalWidthColumn;
+    }
+
     const cellStyles = css `
     span {
         font: ${bodyFont};
@@ -28839,9 +29108,9 @@
 `;
 
     /**
-     * The table column for displaying strings.
+     * The base class for a table column for displaying strings.
      */
-    class TableColumnText extends TableColumn {
+    class TableColumnTextBase extends TableColumn {
         constructor() {
             super();
             this.cellRecordFieldNames = ['value'];
@@ -28859,10 +29128,15 @@
     }
     __decorate$1([
         attr({ attribute: 'field-name' })
-    ], TableColumnText.prototype, "fieldName", void 0);
+    ], TableColumnTextBase.prototype, "fieldName", void 0);
     __decorate$1([
         attr
-    ], TableColumnText.prototype, "placeholder", void 0);
+    ], TableColumnTextBase.prototype, "placeholder", void 0);
+    /**
+     * The table column for displaying strings.
+     */
+    class TableColumnText extends mixinFractionalWidthColumnAPI(TableColumnTextBase) {
+    }
     const nimbleTableColumnText = TableColumnText.compose({
         baseName: 'table-column-text',
         template: template$3,