chore(data-grid): decouple from FAST Foundation (VIV-2022) (#2054)

* Remove FoundationElement * Fix linting * Decouple from FAST Foundation --------- Co-authored-by: TaylorJ76 <[email protected]>
Vonage · Dec 11, 2024 · 23640b0 · 23640b0
1 parent 62cf94d
commit 23640b0
Show file tree

Hide file tree

Showing 9 changed files with 1,534 additions and 131 deletions.
diff --git a/libs/components/src/lib/data-grid/data-grid-cell.spec.ts b/libs/components/src/lib/data-grid/data-grid-cell.spec.ts
@@ -182,32 +182,45 @@ describe('vwc-data-grid-cell', () => {
 				expect(hasActiveClassBeforeFocus).toBeFalsy();
 				expect(baseElement?.classList.contains('active')).toBeTruthy();
 			});
+
+			it('should ignore additional focusin events', async () => {
+				const spy = jest.fn();
+				element.addEventListener('cell-focused', spy);
+
+				element.dispatchEvent(new Event('focusin'));
+				element.dispatchEvent(new Event('focusin'));
+
+				expect(spy).toHaveBeenCalledTimes(1);
+			});
 		});
 
 		describe('handleKeydown', () => {
-			it('should focus on target element with enter key', async () => {
-				element.cellType = 'default';
-				element.columnDefinition = {
-					columnDataKey: 'name',
-					cellFocusTargetCallback: () => {
-						return elementToFocus;
-					},
-					cellInternalFocusQueue: true,
-				};
-				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
-				expect(document.activeElement).toEqual(elementToFocus);
-			});
+			it.each(['Enter', 'F2'])(
+				'should focus on target element with %s key',
+				async (key) => {
+					element.cellType = 'default';
+					element.columnDefinition = {
+						columnDataKey: 'name',
+						cellFocusTargetCallback: () => {
+							return elementToFocus;
+						},
+						cellInternalFocusQueue: true,
+					};
+					element.dispatchEvent(new KeyboardEvent('keydown', { key }));
+					expect(document.activeElement).toEqual(elementToFocus);
+				}
+			);
 
-			it('should focus on target element with F2 key', async () => {
-				element.cellType = 'default';
+			it('should focus on header target element when cellType is columnheader', async () => {
+				element.cellType = 'columnheader';
 				element.columnDefinition = {
 					columnDataKey: 'name',
-					cellFocusTargetCallback: () => {
+					headerCellFocusTargetCallback: () => {
 						return elementToFocus;
 					},
-					cellInternalFocusQueue: true,
+					headerCellInternalFocusQueue: true,
 				};
-				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'F2' }));
+				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
 				expect(document.activeElement).toEqual(elementToFocus);
 			});
 
@@ -222,6 +235,22 @@ describe('vwc-data-grid-cell', () => {
 				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Escape' }));
 				expect(document.activeElement).toEqual(element);
 			});
+
+			it('should not move focus if a child is already focused', async () => {
+				element.cellType = 'default';
+				element.columnDefinition = {
+					columnDataKey: 'name',
+					cellFocusTargetCallback: () => {
+						return elementToFocus;
+					},
+					cellInternalFocusQueue: true,
+				};
+				const focusedChild = document.createElement('input');
+				element.appendChild(focusedChild);
+				focusedChild.focus();
+				element.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }));
+				expect(document.activeElement).toBe(focusedChild);
+			});
 		});
 	});
 

diff --git a/libs/components/src/lib/data-grid/data-grid-cell.template.ts b/libs/components/src/lib/data-grid/data-grid-cell.template.ts
@@ -5,7 +5,7 @@ import type { VividElementDefinitionContext } from '../../shared/design-system/d
 import { DataGridCellRole, DataGridCellSortStates } from './data-grid.options';
 import type { DataGridCell } from './data-grid-cell';
 
-function shouldShowSortIcons<T extends DataGridCell>(x: T): boolean {
+function shouldShowSortIcons(x: DataGridCell): boolean {
 	if (x.columnDefinition) {
 		x.ariaSort = !x.columnDefinition.sortable
 			? null