[terra-data-grid] Added event object to onCellSelect callback

packages/terra-data-grid/CHANGELOG.md

@@ -2,6 +2,9 @@
 
 ## Unreleased
 
+* Added
+  * Added `event` object to `onCellSelect` callback.
+
 ## 1.19.0 - (March 8, 2024)
 
 * Added

packages/terra-data-grid/src/DataGrid.jsx

@@ -89,6 +89,7 @@ const propTypes = {
    * Callback function that is called when a selectable cell is selected. Parameters:
    * @param {string} rowId rowId
    * @param {string} columnId columnId
+   * @param {object} event event
    */
   onCellSelect: PropTypes.func,
 

packages/terra-data-grid/src/FlowsheetDataGrid.jsx

@@ -71,6 +71,7 @@ const propTypes = {
   /**
    * Callback function that is called when a selectable cell is selected. Parameters:
    * @param {object} selectedCell object containing rowId, columnId and sectionId, all as strings.
+   * @param {object} event JavaScript event object.
    */
   onCellSelect: PropTypes.func,
 
@@ -293,7 +294,7 @@ function FlowsheetDataGrid(props) {
     }
   }, [rowsToSearch, flowsheetSections, columns, onCellRangeSelect]);
 
-  const handleCellSelection = useCallback((selectionDetails) => {
+  const handleCellSelection = useCallback((selectionDetails, event) => {
     // Call onRowSelect for row header column
     if (selectionDetails.columnIndex === 0) {
       if (onRowSelect) {
@@ -308,7 +309,7 @@ function FlowsheetDataGrid(props) {
         columnId: selectionDetails.columnId,
         sectionId: selectionDetails.sectionId,
         isMetaPressed: selectionDetails.isMetaPressed,
-      });
+      }, event);
     }
   }, [onCellSelect, onRowSelect, selectCellRange]);
 

packages/terra-data-grid/src/WorklistDataGrid.jsx

@@ -79,6 +79,7 @@ const propTypes = {
    * Callback function that is called when a selectable cell is selected. Parameters:
    * @param {string} rowId rowId
    * @param {string} columnId columnId
+   * @param {object} event event
    */
   onCellSelect: PropTypes.func,
 
@@ -319,11 +320,11 @@ function WorklistDataGrid(props) {
     }
   }, [hasSelectableRows, selectMultipleRows, selectRow]);
 
-  const handleCellSelection = useCallback((selectionDetails) => {
+  const handleCellSelection = useCallback((selectionDetails, event) => {
     if (hasSelectableRows || selectionDetails.isShiftPressed) {
       handleRowSelection(selectionDetails);
     } else if (selectionDetails.isCellSelectable && onCellSelect) {
-      onCellSelect(selectionDetails.rowId, selectionDetails.columnId);
+      onCellSelect(selectionDetails.rowId, selectionDetails.columnId, event);
     }
   }, [handleRowSelection, hasSelectableRows, onCellSelect]);
 

packages/terra-data-grid/tests/jest/DataGrid.test.jsx

@@ -162,8 +162,6 @@ describe('DataGrid', () => {
 
     // Validate mock function was called from simulated click event
     expect(mockCellSelect).toHaveBeenCalled();
-
-    expect(wrapper).toMatchSnapshot();
   });
 
   it('verifies onCellSelect callback is triggered when space is pressed on a non-selectable cell', () => {
@@ -187,8 +185,6 @@ describe('DataGrid', () => {
 
     // Validate mock function was called from simulated click event
     expect(mockCellSelect).toHaveBeenCalled();
-
-    expect(wrapper).toMatchSnapshot();
   });
 });
 

packages/terra-data-grid/tests/jest/FlowsheetDataGrid.test.jsx

@@ -64,6 +64,14 @@ const sectionData = [
   },
 ];
 
+const mockMouseDownEvent = {
+  type: 'mousedown',
+};
+
+const mockKeyDownEvent = {
+  type: 'keydown',
+};
+
 describe('FlowsheetDataGrid', () => {
   it('renders the row header column as pinned and remaining columns as overflow, all columns as not resizable or selectable and all row cells as selectable', () => {
     const wrapper = enzymeIntl.shallowWithIntl(
@@ -307,7 +315,7 @@ describe('Single cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
     expect(mockOnCellRangeSelect).not.toHaveBeenCalled();
   });
 
@@ -329,7 +337,7 @@ describe('Single cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockKeyDownEvent));
     expect(mockOnCellRangeSelect).not.toHaveBeenCalled();
   });
 
@@ -351,7 +359,7 @@ describe('Single cell selection', () => {
       rowId: '4',
       columnId: 'Column-2',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
     expect(mockOnCellRangeSelect).not.toHaveBeenCalled();
   });
 
@@ -373,7 +381,7 @@ describe('Single cell selection', () => {
       rowId: '4',
       columnId: 'Column-2',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockKeyDownEvent));
     expect(mockOnCellRangeSelect).not.toHaveBeenCalled();
   });
 });
@@ -405,7 +413,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
 
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: DOWN_ARROW_KEY });
     expect(mockOnCellRangeSelect).toHaveBeenCalledWith([
@@ -441,10 +449,11 @@ describe('Multi-cell selection', () => {
     const selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('keydown', { keyCode: SPACE_KEY });
     expect(mockOnCellSelect).toHaveBeenCalledWith({
-      rowId: '4',
+      rowId: '3',
       columnId: 'Column-2',
       sectionId: '',
-    });
+      isMetaPressed: undefined,
+    }, expect.objectContaining(mockMouseDownEvent));
 
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: LEFT_ARROW_KEY });
     expect(mockOnCellRangeSelect).toHaveBeenCalledWith([
@@ -479,7 +488,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
 
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: DOWN_ARROW_KEY });
     // Would go past last row
@@ -519,7 +528,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
 
     // Would select row header
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: LEFT_ARROW_KEY });
@@ -555,7 +564,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
 
     selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('mouseDown', { shiftKey: true });
@@ -585,7 +594,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockMouseDownEvent));
 
     selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: SPACE_KEY });
@@ -615,7 +624,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockKeyDownEvent));
 
     selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('mouseDown', { shiftKey: true });
@@ -645,7 +654,7 @@ describe('Multi-cell selection', () => {
       rowId: '3',
       columnId: 'Column-1',
       sectionId: '',
-    });
+    }, expect.objectContaining(mockKeyDownEvent));
 
     selectableCell = wrapper.find('Row').at(3).find('td.selectable').at(1);
     selectableCell.simulate('keydown', { shiftKey: true, keyCode: SPACE_KEY });

packages/terra-data-grid/tests/jest/WorklistDataGrid.test.jsx

@@ -322,14 +322,15 @@ describe('Row selection', () => {
     );
 
     const selectableCell = wrapper.find('Row').at(0).find('td.selectable');
-    selectableCell.at(0).simulate('mouseDown'); // Row selection is not on so cell will be selected.
-    expect(mockOnCellSelect).toHaveBeenCalledWith('1', 'Column-1'); // The first click to select the cell from which shift+Down will occur.
+    const mockMouseDownEvent = {
+      type: 'mousedown',
+    };
+    selectableCell.at(0).simulate('mouseDown', mockMouseDownEvent);// Row selection is not on so cell will be selected.
+    expect(mockOnCellSelect).toHaveBeenCalledWith('1', 'Column-1', expect.objectContaining(mockMouseDownEvent)); // The first click to select the cell from which shift+Down will occur.
 
     selectableCell.at(0).simulate('keydown', { shiftKey: true, keyCode: 40 });
     expect(mockOnRowSelect).toHaveBeenCalledWith([{ id: '1', selected: true }, { id: '2', selected: true }]);
     expect(mockOnEnableRowSelection).toHaveBeenCalled();
-
-    expect(wrapper).toMatchSnapshot();
   });
 
   it('verifies callbacks when Shift+Down is used and row selection mode is enabled.', () => {