Enable table column resizing on touch-based devices

change/@ni-nimble-components-3680232d-ba1a-47f0-8cdc-dc6effd176ed.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Enable table column resizing on touch-based devices",
+  "packageName": "@ni/nimble-components",
+  "email": "7282195+m-akinc@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/nimble-components/src/table/index.ts

@@ -545,11 +545,11 @@ export class Table<
     }
 
     /** @internal */
-    public onRightDividerMouseDown(
-        event: MouseEvent,
+    public onRightDividerPointerDown(
+        event: PointerEvent,
         columnIndex: number
     ): void {
-        if (event.button === 0) {
+        if (event.pointerType !== 'mouse' || event.button === 0) {
             this.layoutManager.beginColumnInteractiveSize(
                 event.clientX,
                 this.getRightDividerIndex(columnIndex)
@@ -558,11 +558,11 @@ export class Table<
     }
 
     /** @internal */
-    public onLeftDividerMouseDown(
-        event: MouseEvent,
+    public onLeftDividerPointerDown(
+        event: PointerEvent,
         columnIndex: number
     ): void {
-        if (event.button === 0) {
+        if (event.pointerType !== 'mouse' || event.button === 0) {
             this.layoutManager.beginColumnInteractiveSize(
                 event.clientX,
                 this.getLeftDividerIndex(columnIndex)

packages/nimble-components/src/table/models/table-layout-manager.ts

@@ -77,8 +77,8 @@ export class TableLayoutManager<TData extends TableRecord> {
         this.initialTableScrollableMinWidth = this.table.tableScrollableMinWidth;
         this.initialColumnTotalWidth = this.getTotalColumnFixedWidth();
         this.isColumnBeingSized = true;
-        document.addEventListener('mousemove', this.onDividerMouseMove);
-        document.addEventListener('mouseup', this.onDividerMouseUp);
+        document.addEventListener('pointermove', this.onDividerPointerMove);
+        document.addEventListener('pointerup', this.onDividerPointerUp);
     }
 
     /**
@@ -95,13 +95,12 @@ export class TableLayoutManager<TData extends TableRecord> {
         return this.getFirstRightResizableColumnIndex(columnIndex) !== -1;
     }
 
-    private readonly onDividerMouseMove = (event: Event): void => {
-        const mouseEvent = event as MouseEvent;
+    private readonly onDividerPointerMove = (event: PointerEvent): void => {
         for (let i = 0; i < this.visibleColumns.length; i++) {
             this.visibleColumns[i]!.columnInternals.currentPixelWidth = this.initialColumnWidths[i]?.initialPixelWidth;
         }
         this.currentTotalDelta = this.getAllowedSizeDelta(
-            mouseEvent.clientX - this.dragStart
+            event.clientX - this.dragStart
         );
         this.performCascadeSizeLeft(
             this.leftColumnIndex!,
@@ -120,9 +119,9 @@ export class TableLayoutManager<TData extends TableRecord> {
         }
     };
 
-    private readonly onDividerMouseUp = (): void => {
-        document.removeEventListener('mousemove', this.onDividerMouseMove);
-        document.removeEventListener('mouseup', this.onDividerMouseUp);
+    private readonly onDividerPointerUp = (): void => {
+        document.removeEventListener('pointermove', this.onDividerPointerMove);
+        document.removeEventListener('pointerup', this.onDividerPointerUp);
         this.resetGridSizedColumns();
         this.isColumnBeingSized = false;
         this.activeColumnIndex = undefined;

packages/nimble-components/src/table/styles.ts

@@ -150,6 +150,7 @@ export const styles = css`
         cursor: col-resize;
         position: absolute;
         z-index: ${ZIndexLevels.zIndex1};
+        touch-action: pan-y;
     }
 
     .column-divider:hover,

packages/nimble-components/src/table/template.ts

@@ -103,7 +103,7 @@ export const template = html<Table>`
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getLeftDividerIndex(c.index) ? 'divider-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index - 1) ? 'draggable' : ''}`}
                                             "
-                                            @mousedown="${(_, c) => c.parent.onLeftDividerMouseDown(c.event as MouseEvent, c.index)}">
+                                            @pointerdown="${(_, c) => c.parent.onLeftDividerPointerDown(c.event as PointerEvent, c.index)}">
                                         </div>
                                     `)}
                                         <${tableHeaderTag}
@@ -128,7 +128,7 @@ export const template = html<Table>`
                                                 ${(_, c) => `${c.parent.layoutManager.activeColumnDivider === c.parent.getRightDividerIndex(c.index) ? 'divider-active' : ''}`}
                                                 ${(_, c) => `${c.parent.layoutManager.hasResizableColumnToLeft(c.index) ? 'draggable' : ''}`}
                                             "
-                                             @mousedown="${(_, c) => c.parent.onRightDividerMouseDown(c.event as MouseEvent, c.index)}">
+                                            @pointerdown="${(_, c) => c.parent.onRightDividerPointerDown(c.event as PointerEvent, c.index)}">
                                         </div>
                                     `)}                        
                                 </div>

packages/nimble-components/src/table/testing/table.pageobject.ts

@@ -541,24 +541,7 @@ export class TablePageObject<T extends TableRecord> {
                 'The provided column index has no right divider associated with it.'
             );
         }
-        const dividerRect = divider.getBoundingClientRect();
-        let currentMouseX = (dividerRect.x + dividerRect.width) / 2;
-        const mouseDownEvent = new MouseEvent('mousedown', {
-            clientX: currentMouseX,
-            clientY: (dividerRect.y + dividerRect.height) / 2
-        });
-        divider.dispatchEvent(mouseDownEvent);
-
-        for (const delta of deltas) {
-            currentMouseX += delta;
-            const mouseMoveEvent = new MouseEvent('mousemove', {
-                clientX: currentMouseX
-            });
-            document.dispatchEvent(mouseMoveEvent);
-        }
-
-        const mouseUpEvent = new MouseEvent('mouseup');
-        document.dispatchEvent(mouseUpEvent);
+        this.dragSizeColumnByDivider(divider, deltas);
     }
 
     /**
@@ -576,24 +559,7 @@ export class TablePageObject<T extends TableRecord> {
                 'The provided column index has no left divider associated with it.'
             );
         }
-        const dividerRect = divider.getBoundingClientRect();
-        let currentMouseX = (dividerRect.x + dividerRect.width) / 2;
-        const mouseDownEvent = new MouseEvent('mousedown', {
-            clientX: currentMouseX,
-            clientY: (dividerRect.y + dividerRect.height) / 2
-        });
-        divider.dispatchEvent(mouseDownEvent);
-
-        for (const delta of deltas) {
-            currentMouseX += delta;
-            const mouseMoveEvent = new MouseEvent('mousemove', {
-                clientX: currentMouseX
-            });
-            document.dispatchEvent(mouseMoveEvent);
-        }
-
-        const mouseUpEvent = new MouseEvent('mouseup');
-        document.dispatchEvent(mouseUpEvent);
+        this.dragSizeColumnByDivider(divider, deltas);
     }
 
     public getColumnRightDivider(index: number): HTMLElement | null {
@@ -855,9 +821,33 @@ export class TablePageObject<T extends TableRecord> {
         return spinnerOrIcon;
     }
 
+    private dragSizeColumnByDivider(
+        divider: HTMLElement,
+        deltas: readonly number[]
+    ): void {
+        const dividerRect = divider.getBoundingClientRect();
+        let currentPointerX = (dividerRect.x + dividerRect.width) / 2;
+        const mouseDownEvent = new PointerEvent('pointerdown', {
+            clientX: currentPointerX,
+            clientY: (dividerRect.y + dividerRect.height) / 2
+        });
+        divider.dispatchEvent(mouseDownEvent);
+
+        for (const delta of deltas) {
+            currentPointerX += delta;
+            const pointerMoveEvent = new PointerEvent('pointermove', {
+                clientX: currentPointerX
+            });
+            document.dispatchEvent(pointerMoveEvent);
+        }
+
+        const pointerUpEvent = new PointerEvent('pointerup');
+        document.dispatchEvent(pointerUpEvent);
+    }
+
     private readonly isSlotElement = (
         element: Node | undefined
     ): element is HTMLSlotElement => {
-        return element?.nodeName === 'SLOT' ?? false;
+        return element?.nodeName === 'SLOT';
     };
 }