@ni/nimble-components 35.2.3 → 35.3.1

package/dist/esm/table/models/keyboard-navigation-manager.d.ts

@@ -16,6 +16,7 @@ export declare class KeyboardNavigationManager<TData extends TableRecord> implem
     private columnIndex;
     private focusWithinTable;
     private isCurrentlyFocusingElement;
+    private focusedViaPointer;
     private readonly tableNotifier;
     private readonly virtualizerNotifier;
     private visibleRowNotifiers;
@@ -30,6 +31,7 @@ export declare class KeyboardNavigationManager<TData extends TableRecord> implem
     onRowBlur(event: FocusEvent): void;
     onRowActionMenuToggle(event: CustomEvent<TableActionMenuToggleEventDetail>): void;
     private readonly onTableFocusIn;
+    private focusSomethingOtherThanTheTable;
     private readonly onTableFocusOut;
     private readonly onCellActionMenuBlur;
     private readonly onCellViewFocusIn;
@@ -37,6 +39,8 @@ export declare class KeyboardNavigationManager<TData extends TableRecord> implem
     private readonly onCellBlur;
     private readonly onCaptureKeyDown;
     private readonly onKeyDown;
+    private readonly onPointerDown;
+    private readonly onPointerUpOrCancel;
     private readonly onViewportKeyDown;
     private onEnterPressed;
     private onF2Pressed;
@@ -57,12 +61,13 @@ export declare class KeyboardNavigationManager<TData extends TableRecord> implem
     private onMoveUp;
     private onMoveDown;
     private updateFocusStateFromActiveElement;
+    private getActiveElementCellAndRow;
     private focusElement;
     private setElementFocusable;
     private setActionMenuButtonFocused;
-    private setFocusOnHeader;
     private setDefaultFocus;
     private scrollToAndFocusRow;
+    private rowIndexIsValid;
     private focusCurrentRow;
     private focusRowElement;
     private focusHeaderElement;

package/dist/esm/table/models/keyboard-navigation-manager.js

@@ -26,25 +26,32 @@ export class KeyboardNavigationManager {
         this.columnIndex = -1;
         this.focusWithinTable = false;
         this.isCurrentlyFocusingElement = false;
+        this.focusedViaPointer = false;
         this.visibleRowNotifiers = [];
         this.onTableFocusIn = (event) => {
             this.focusWithinTable = true;
-            this.updateFocusStateFromActiveElement(false);
+            this.updateFocusStateFromActiveElement();
             // Sets initial focus on the appropriate table content
             const actionMenuOpen = this.table.openActionMenuRecordId !== undefined;
-            if ((event.target === this.table
-                || this.focusType === TableFocusType.none)
-                && !actionMenuOpen) {
-                let focusHeader = true;
-                if (this.hasRowOrCellFocusType()
-                    && this.scrollToAndFocusRow(this.rowIndex)) {
-                    focusHeader = false;
+            if (!actionMenuOpen) {
+                if (this.focusType === TableFocusType.none) {
+                    this.focusSomethingOtherThanTheTable();
                 }
-                if (focusHeader && !this.setFocusOnHeader()) {
-                    // nothing to focus
-                    this.table.blur();
+                else if (event.target === this.table) {
+                    // restore focus to last focused element
+                    if (this.hasRowOrCellFocusType() && this.rowIndexIsValid(this.rowIndex)) {
+                        this.scrollToAndFocusRow(this.rowIndex);
+                    }
+                    else if (this.hasHeaderFocusType()) {
+                        this.focusHeaderElement();
+                    }
+                    else {
+                        // should only get here if focusType was row/cell, but rowIndex was invalid
+                        this.focusSomethingOtherThanTheTable();
+                    }
                 }
             }
+            this.focusedViaPointer = false;
         };
         this.onTableFocusOut = () => {
             this.focusWithinTable = false;
@@ -59,12 +66,18 @@ export class KeyboardNavigationManager {
         };
         this.onCellViewFocusIn = (event) => {
             event.stopPropagation();
-            this.updateFocusStateFromActiveElement(false);
+            this.updateFocusStateFromActiveElement();
         };
         this.onCellFocusIn = (event) => {
             event.stopPropagation();
             const cell = event.detail;
-            this.updateFocusStateFromActiveElement(true);
+            const row = this.updateFocusStateFromActiveElement();
+            if (row) {
+                if (this.hasRowOrCellFocusType()
+                    && this.rowIndex !== row.resolvedRowIndex) {
+                    this.setRowFocusState(row.resolvedRowIndex);
+                }
+            }
             // Currently, clicking a non-interactive cell only updates the focus state to that row, it
             // doesn't focus the cell. If we revisit this, we most likely need to set the cells to tabindex=-1
             // upfront too, so their focusing behavior is consistent whether they've been previously keyboard
@@ -137,6 +150,12 @@ export class KeyboardNavigationManager {
                 }
             }
         };
+        this.onPointerDown = () => {
+            this.focusedViaPointer = true;
+        };
+        this.onPointerUpOrCancel = () => {
+            this.focusedViaPointer = false;
+        };
         this.onViewportKeyDown = (event) => {
             let handleEvent = !this.inNavigationMode
                 && (event.key === keyArrowUp || event.key === keyArrowDown);
@@ -174,6 +193,9 @@ export class KeyboardNavigationManager {
     connect() {
         this.table.addEventListener('keydown', this.onCaptureKeyDown, { capture: true });
         this.table.addEventListener('keydown', this.onKeyDown);
+        this.table.addEventListener('pointerdown', this.onPointerDown);
+        this.table.addEventListener('pointerup', this.onPointerUpOrCancel);
+        this.table.addEventListener('pointercancel', this.onPointerUpOrCancel);
         this.table.addEventListener('focusin', this.onTableFocusIn);
         this.table.addEventListener('focusout', this.onTableFocusOut);
         this.table.viewport.addEventListener('keydown', this.onViewportKeyDown);
@@ -185,6 +207,9 @@ export class KeyboardNavigationManager {
     disconnect() {
         this.table.removeEventListener('keydown', this.onCaptureKeyDown, { capture: true });
         this.table.removeEventListener('keydown', this.onKeyDown);
+        this.table.removeEventListener('pointerdown', this.onPointerDown);
+        this.table.removeEventListener('pointerup', this.onPointerUpOrCancel);
+        this.table.removeEventListener('pointercancel', this.onPointerUpOrCancel);
         this.table.removeEventListener('focusin', this.onTableFocusIn);
         this.table.removeEventListener('focusout', this.onTableFocusOut);
         this.table.viewport.removeEventListener('keydown', this.onViewportKeyDown);
@@ -276,6 +301,13 @@ export class KeyboardNavigationManager {
             this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
         }
     }
+    focusSomethingOtherThanTheTable() {
+        this.setDefaultFocus();
+        if (this.focusType === TableFocusType.none) {
+            // nothing within the table to focus
+            this.table.blur();
+        }
+    }
     onEnterPressed(ctrlKey) {
         let row;
         let rowElements;
@@ -451,7 +483,7 @@ export class KeyboardNavigationManager {
             this.headerActionIndex = nextFocusState.headerActionIndex ?? this.headerActionIndex;
             this.cellContentIndex = nextFocusState.cellContentIndex ?? this.cellContentIndex;
             if (this.hasRowOrCellFocusType()) {
-                this.focusCurrentRow(false);
+                this.focusCurrentRow(!this.focusedViaPointer);
             }
             else {
                 this.focusHeaderElement();
@@ -627,35 +659,39 @@ export class KeyboardNavigationManager {
         }
         return false;
     }
-    updateFocusStateFromActiveElement(setRowFocus) {
+    updateFocusStateFromActiveElement() {
         // If the user is interacting with the table with non-keyboard methods (like mouse), we need to
         // update our focus state based on the current active/focused element
-        const activeElement = this.getActiveElement();
-        if (activeElement) {
-            const row = this.getContainingRow(activeElement);
-            if (row) {
-                if (!(row instanceof TableGroupRow)) {
-                    const cell = this.getContainingCell(activeElement);
-                    if (cell) {
-                        const columnIndex = this.table.visibleColumns.indexOf(cell.column);
-                        if (cell.actionMenuButton === activeElement) {
-                            this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
-                            return;
-                        }
-                        const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
-                        if (contentIndex > -1) {
-                            this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
-                            return;
-                        }
-                    }
-                }
-                if (setRowFocus
-                    && this.hasRowOrCellFocusType()
-                    && this.rowIndex !== row.resolvedRowIndex) {
-                    this.setRowFocusState(row.resolvedRowIndex);
-                }
+        const { activeElement, row, cell } = this.getActiveElementCellAndRow();
+        if (!cell) {
+            return row;
+        }
+        const columnIndex = this.table.visibleColumns.indexOf(cell.column);
+        if (cell.actionMenuButton === activeElement) {
+            this.setCellActionMenuFocusState(row.resolvedRowIndex, columnIndex, false);
+        }
+        else {
+            const contentIndex = cell.cellView.tabbableChildren.indexOf(activeElement);
+            if (contentIndex > -1) {
+                this.setCellContentFocusState(contentIndex, row.resolvedRowIndex, columnIndex, false);
             }
         }
+        return row;
+    }
+    getActiveElementCellAndRow() {
+        const activeElement = this.getActiveElement();
+        if (!activeElement) {
+            return {};
+        }
+        const row = this.getContainingRow(activeElement);
+        if (!row) {
+            return { activeElement };
+        }
+        if (row instanceof TableGroupRow) {
+            return { activeElement, row };
+        }
+        const cell = this.getContainingCell(activeElement);
+        return { activeElement, row, cell };
     }
     focusElement(element, focusOptions) {
         const previousActiveElement = this.getActiveElement();
@@ -686,13 +722,6 @@ export class KeyboardNavigationManager {
             menuButton.classList.remove('cell-action-menu-focused');
         }
     }
-    setFocusOnHeader() {
-        if (this.hasHeaderFocusType()) {
-            return this.focusHeaderElement();
-        }
-        this.setDefaultFocus();
-        return this.focusType !== TableFocusType.none;
-    }
     setDefaultFocus() {
         const headerElements = this.getTableHeaderFocusableElements();
         if (!this.trySetHeaderActionFocus(headerElements, 0)
@@ -702,22 +731,19 @@ export class KeyboardNavigationManager {
         }
     }
     scrollToAndFocusRow(totalRowIndex, scrollOptions) {
-        if (totalRowIndex >= 0 && totalRowIndex < this.table.tableData.length) {
-            switch (this.focusType) {
-                case TableFocusType.none:
-                case TableFocusType.headerActions:
-                case TableFocusType.columnHeader:
-                    this.setRowFocusState(totalRowIndex);
-                    break;
-                default:
-                    break;
-            }
-            this.rowIndex = totalRowIndex;
-            this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
-            this.focusCurrentRow(true);
-            return true;
+        if (!this.rowIndexIsValid(totalRowIndex)) {
+            return false;
         }
-        return false;
+        if (!this.hasRowOrCellFocusType()) {
+            this.setRowFocusState();
+        }
+        this.rowIndex = totalRowIndex;
+        this.virtualizer.scrollToIndex(totalRowIndex, scrollOptions);
+        this.focusCurrentRow(!this.focusedViaPointer);
+        return true;
+    }
+    rowIndexIsValid(rowIndex) {
+        return rowIndex >= 0 && rowIndex < this.table.tableData.length;
     }
     focusCurrentRow(allowScroll) {
         const visibleRowIndex = this.getCurrentRowVisibleIndex();
@@ -791,7 +817,7 @@ export class KeyboardNavigationManager {
                 break;
         }
         if (focusableElement) {
-            this.focusElement(focusableElement);
+            this.focusElement(focusableElement, { preventScroll: this.focusedViaPointer });
             return true;
         }
         return false;
@@ -912,7 +938,7 @@ export class KeyboardNavigationManager {
     trySetRowSelectionCheckboxFocus(rowElements) {
         if (rowElements?.selectionCheckbox) {
             this.focusType = TableFocusType.rowSelectionCheckbox;
-            this.focusCurrentRow(true);
+            this.focusCurrentRow(!this.focusedViaPointer);
             return true;
         }
         return false;
@@ -1001,7 +1027,7 @@ export class KeyboardNavigationManager {
         this.rowIndex = rowIndex;
         this.columnIndex = columnIndex;
         if (focusElement) {
-            this.focusCurrentRow(true);
+            this.focusCurrentRow(!this.focusedViaPointer);
         }
     }
     isResolvedRowType(row) {