From 452578533942f6b85ab3b0ae488fd33f86cbc745 Mon Sep 17 00:00:00 2001 From: Saad Adnan <38024451+sdadn@users.noreply.github.com> Date: Wed, 25 Oct 2023 16:18:28 -0500 Subject: [PATCH] [worklist-data-grid] column header enhancements (#1859) --- packages/terra-data-grid/CHANGELOG.md | 6 +- packages/terra-data-grid/src/DataGrid.jsx | 61 +- .../terra-data-grid/src/DataGrid.module.scss | 2 + .../terra-data-grid/src/WorklistDataGrid.jsx | 2 +- .../ColumnResizeHandle.module.scss | 2 +- .../ColumnResizeHandle.module.scss | 2 +- .../src/subcomponents/ColumnHeader.jsx | 31 +- .../src/subcomponents/ColumnHeaderCell.jsx | 110 +- .../src/subcomponents/ColumnResizeHandle.jsx | 179 +- .../ColumnResizeHandle.module.scss | 16 +- .../tests/jest/ColumnHeader.test.jsx | 2 +- .../tests/jest/ColumnHeaderCell.test.jsx | 29 +- .../tests/jest/ColumnResizeHandle.test.jsx | 165 +- .../tests/jest/DataGrid.test.jsx | 5 - .../__snapshots__/ColumnHeader.test.jsx.snap | 16 + .../ColumnHeaderCell.test.jsx.snap | 61 +- .../ColumnResizeHandle.test.jsx.snap | 68 +- .../jest/__snapshots__/DataGrid.test.jsx.snap | 369 ++- .../WorklistDataGrid.test.jsx.snap | 2269 ++++++++++++++--- ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 45751 bytes .../column-header-0-1-focused.png | Bin 0 -> 46471 bytes .../column-header-0-2-focused.png | Bin 0 -> 25880 bytes .../column-header-0-3-focused.png | Bin 0 -> 25864 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 24741 bytes .../column-resize-handle-focused.png | Bin 0 -> 24806 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 24830 bytes .../data-grid-initial-focus.png | Bin 19584 -> 18647 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 19584 -> 18647 bytes .../sticky-header-scroll-fix.png | Bin 42523 -> 42522 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 40840 -> 40840 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 44842 bytes .../column-resize-handle-focused.png | Bin 0 -> 45629 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 46333 bytes .../hover-even-row-cell-selection.png | Bin 73110 -> 74756 bytes .../hover-odd-row-cell-selection.png | Bin 73134 -> 74775 bytes ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 45751 bytes .../column-header-0-1-focused.png | Bin 0 -> 46471 bytes .../column-header-0-2-focused.png | Bin 0 -> 25887 bytes .../column-header-0-3-focused.png | Bin 0 -> 25864 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 24741 bytes .../column-resize-handle-focused.png | Bin 0 -> 24806 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 24830 bytes .../data-grid-initial-focus.png | Bin 19297 -> 18376 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 19297 -> 18376 bytes ...cond-column-cell-focused-in-empty-grid.png | Bin 11105 -> 11105 bytes .../sticky-header-scroll-fix.png | Bin 40573 -> 40572 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 40105 -> 40105 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 44842 bytes .../column-resize-handle-focused.png | Bin 0 -> 45629 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 46333 bytes .../hover-even-row-cell-selection.png | Bin 73110 -> 74756 bytes .../hover-odd-row-cell-selection.png | Bin 73134 -> 74775 bytes ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 41529 bytes .../column-header-0-1-focused.png | Bin 0 -> 42437 bytes .../column-header-0-2-focused.png | Bin 0 -> 23056 bytes .../column-header-0-3-focused.png | Bin 0 -> 23035 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 21989 bytes .../column-resize-handle-focused.png | Bin 0 -> 22100 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 22126 bytes .../data-grid-initial-focus.png | Bin 17786 -> 16960 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 17786 -> 16960 bytes .../sticky-header-scroll-fix.png | Bin 47350 -> 47351 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 40714 -> 40714 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 41201 bytes .../column-resize-handle-focused.png | Bin 0 -> 41735 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 42328 bytes .../hover-even-row-cell-selection.png | Bin 64363 -> 66277 bytes .../hover-odd-row-cell-selection.png | Bin 64362 -> 66279 bytes ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 41529 bytes .../column-header-0-1-focused.png | Bin 0 -> 42437 bytes .../column-header-0-2-focused.png | Bin 0 -> 23056 bytes .../column-header-0-3-focused.png | Bin 0 -> 23035 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 21989 bytes .../column-resize-handle-focused.png | Bin 0 -> 22100 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 22126 bytes .../data-grid-initial-focus.png | Bin 17533 -> 16709 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 17533 -> 16709 bytes ...cond-column-cell-focused-in-empty-grid.png | Bin 10634 -> 10635 bytes .../sticky-header-scroll-fix.png | Bin 44547 -> 44548 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 40079 -> 40079 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 41201 bytes .../column-resize-handle-focused.png | Bin 0 -> 41735 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 42328 bytes .../hover-even-row-cell-selection.png | Bin 64363 -> 66277 bytes .../hover-odd-row-cell-selection.png | Bin 64362 -> 66279 bytes ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 47417 bytes .../column-header-0-1-focused.png | Bin 0 -> 47939 bytes .../column-header-0-2-focused.png | Bin 0 -> 27283 bytes .../column-header-0-3-focused.png | Bin 0 -> 27267 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 26430 bytes .../column-resize-handle-focused.png | Bin 0 -> 26342 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 26319 bytes .../data-grid-initial-focus.png | Bin 19206 -> 18635 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 19206 -> 18635 bytes .../sticky-header-scroll-fix.png | Bin 43750 -> 43749 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 42184 -> 42184 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 46663 bytes .../column-resize-handle-focused.png | Bin 0 -> 47287 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 47988 bytes .../hover-even-row-cell-selection.png | Bin 75566 -> 76743 bytes .../hover-odd-row-cell-selection.png | Bin 75556 -> 76729 bytes ...olumn-header-0-0-resize-handle-focused.png | Bin 0 -> 47417 bytes .../column-header-0-1-focused.png | Bin 0 -> 47939 bytes .../column-header-0-2-focused.png | Bin 0 -> 27283 bytes .../column-header-0-3-focused.png | Bin 0 -> 27267 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 26430 bytes .../column-resize-handle-focused.png | Bin 0 -> 26342 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 26319 bytes .../data-grid-initial-focus.png | Bin 18923 -> 18355 bytes .../data-grid-spec/data-grid-return-focus.png | Bin 18923 -> 18355 bytes ...cond-column-cell-focused-in-empty-grid.png | Bin 10801 -> 10802 bytes .../sticky-header-scroll-fix.png | Bin 41803 -> 41803 bytes .../data-grid-spec/sticky-header-scroll.png | Bin 41357 -> 41356 bytes .../column-resize-decrease-keyboard.png | Bin 0 -> 46663 bytes .../column-resize-handle-focused.png | Bin 0 -> 47287 bytes .../column-resize-increase-keyboard.png | Bin 0 -> 47988 bytes .../hover-even-row-cell-selection.png | Bin 75566 -> 76743 bytes .../hover-odd-row-cell-selection.png | Bin 75556 -> 76729 bytes .../tests/wdio/data-grid-spec.js | 166 +- packages/terra-data-grid/translations/de.json | 22 + .../terra-data-grid/translations/en-GB.json | 22 + .../terra-data-grid/translations/en-US.json | 4 + packages/terra-data-grid/translations/en.json | 4 + packages/terra-data-grid/translations/es.json | 23 + packages/terra-data-grid/translations/fr.json | 22 + packages/terra-data-grid/translations/nl.json | 22 + packages/terra-data-grid/translations/pt.json | 22 + packages/terra-data-grid/translations/sv.json | 22 + packages/terra-framework-docs/CHANGELOG.md | 12 +- .../Examples.3/RowSelection.jsx | 2 +- .../DataGridWithColumnResizing.test.jsx | 78 + 131 files changed, 3252 insertions(+), 564 deletions(-) create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/clinical-lowlight-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/orion-fusion-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_large/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-0-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-1-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-2-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-header-0-3-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-decrease-keyboard.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-handle-focused.png create mode 100644 packages/terra-data-grid/tests/wdio/__snapshots__/reference/terra-default-theme/en/chrome_medium/worklist-data-grid-spec/column-resize-increase-keyboard.png create mode 100644 packages/terra-data-grid/translations/de.json create mode 100644 packages/terra-data-grid/translations/en-GB.json create mode 100644 packages/terra-data-grid/translations/es.json create mode 100644 packages/terra-data-grid/translations/fr.json create mode 100644 packages/terra-data-grid/translations/nl.json create mode 100644 packages/terra-data-grid/translations/pt.json create mode 100644 packages/terra-data-grid/translations/sv.json create mode 100644 packages/terra-framework-docs/src/terra-dev-site/test/data-grid/data-grid/DataGridWithColumnResizing.test.jsx diff --git a/packages/terra-data-grid/CHANGELOG.md b/packages/terra-data-grid/CHANGELOG.md index 7128dabc109..f66538d0904 100644 --- a/packages/terra-data-grid/CHANGELOG.md +++ b/packages/terra-data-grid/CHANGELOG.md @@ -1,8 +1,10 @@ # Changelog ## Unreleased - * Added + * Added additional screen reader support to announce that column headers are interactable upon selection. + * Added keyboard support for column resizing. + * Added translations. * Added "No Result" cells to FlowsheetDataGrid. ## 0.8.1 - (October 17, 2023) @@ -42,7 +44,7 @@ * Updated the `terra-worklist-data-grid` component to set initial focus to the row selection header when row selection mode is enabled. ___ -All release notes below apply to the `terra-worklist-data-grid` package (renamed to `terra-data-grid` the 0.6 release above). +All release notes below apply to the `terra-worklist-data-grid` package (renamed to `terra-data-grid` with the 0.6 release above). ## 0.5.0 - (August 31, 2023) diff --git a/packages/terra-data-grid/src/DataGrid.jsx b/packages/terra-data-grid/src/DataGrid.jsx index 726c518f268..d348cd71131 100644 --- a/packages/terra-data-grid/src/DataGrid.jsx +++ b/packages/terra-data-grid/src/DataGrid.jsx @@ -65,6 +65,11 @@ const propTypes = { */ columnHeaderHeight: PropTypes.string, + /** + * Numeric increment in pixels to adjust column width when resizing via the keyboard. + */ + columnResizeIncrement: PropTypes.number, + /** * String that specifies the height for the rows in the grid. Any valid CSS value is accepted. */ @@ -136,6 +141,7 @@ const DataGrid = injectIntl((props) => { onColumnResize, defaultColumnWidth, columnHeaderHeight, + columnResizeIncrement, rowHeight, onColumnSelect, onCellSelect, @@ -174,18 +180,23 @@ const DataGrid = injectIntl((props) => { const activeColumnWidth = useRef(200); const tableWidth = useRef(0); + // Reference variable for WorklistDataGrid table element const grid = useRef(); const gridContainerRef = useRef(); const handleFocus = useRef(true); + const [checkResizable, setCheckResizable] = useState(false); const [focusedRow, setFocusedRow] = useState(0); const [focusedCol, setFocusedCol] = useState(0); + const [gridHasFocus, setGridHasFocus] = useState(false); + + // Aria live region message management + const [columnHeaderAriaLiveMessage, setColumnHeaderAriaLiveMessage] = useState(null); const [cellAriaLiveMessage, setCellAriaLiveMessage] = useState(null); // Define ColumnContext Provider value object - const columnContextValue = useMemo(() => ({ pinnedColumnOffsets, setCellAriaLiveMessage }), [pinnedColumnOffsets]); - + const columnContextValue = useMemo(() => ({ pinnedColumnOffsets, setColumnHeaderAriaLiveMessage, setCellAriaLiveMessage }), [pinnedColumnOffsets]); const theme = useContext(ThemeContext); // ------------------------------------- @@ -323,11 +334,12 @@ const DataGrid = injectIntl((props) => { setFocusedRowCol(toCell.row, toCell.col, true); }; - const handleColumnSelect = useCallback((columnId, cellCoordinates) => { + const handleColumnSelect = useCallback((columnId, cellCoordinates, isSelectable) => { setFocusedRow(cellCoordinates.row); setFocusedCol(cellCoordinates.col); - if (onColumnSelect) { + // Notify consumers of column header selection + if (isSelectable && onColumnSelect) { onColumnSelect(columnId); } }, [onColumnSelect]); @@ -401,10 +413,12 @@ const DataGrid = injectIntl((props) => { const cellCoordinates = { row: focusedRow, col: focusedCol }; let nextRow = cellCoordinates.row; let nextCol = cellCoordinates.col; + setCheckResizable(false); const targetElement = event.target; // Allow default behavior if the event target is an editable field + if (event.keyCode !== KeyCode.KEY_TAB && (isTextInput(targetElement) || ['textarea', 'select'].indexOf(targetElement.tagName.toLowerCase()) >= 0 @@ -434,6 +448,7 @@ const DataGrid = injectIntl((props) => { } else { // Left key nextCol -= 1; + setCheckResizable(cellCoordinates.row === 0); } break; case KeyCode.KEY_RIGHT: @@ -502,10 +517,31 @@ const DataGrid = injectIntl((props) => { activeColumnPageX.current = event.pageX; activeColumnWidth.current = resizeColumnWidth; + setFocusedRow(0); + setFocusedCol(index); + // Set the active index to the selected column setActiveIndex(index); }, []); + const onResizeHandleChange = useCallback((columnIndex, increment) => { + const { minimumWidth, maximumWidth, width } = dataGridColumns[columnIndex]; + const newColumnWidth = Math.min(Math.max(width + increment, minimumWidth), maximumWidth); + + // Update the width for the column in the state variable + const newGridColumns = [...dataGridColumns]; + newGridColumns[columnIndex].width = newColumnWidth; + setDataGridColumns(newGridColumns); + + // Update the column and table width + grid.current.style.width = `${grid.current.offsetWidth + increment}px`; + + // Notify consumers of the new column width + if (onColumnResize) { + onColumnResize(dataGridColumns[columnIndex].id, dataGridColumns[columnIndex].width); + } + }, [dataGridColumns, onColumnResize]); + const onMouseMove = (event) => { if (activeIndex == null) { return; @@ -540,17 +576,28 @@ const DataGrid = injectIntl((props) => { handleFocus.current = false; }; + /** + * Establishes selection state when the WorklistDataGrid gains focus + * @param {*} event focus event data + */ const onFocus = (event) => { if (!event.currentTarget.contains(event.relatedTarget)) { // Not triggered when swapping focus between children if (handleFocus.current) { setFocusedRowCol(focusedRow, focusedCol, true); + setGridHasFocus(true); } } handleFocus.current = true; }; + const onBlur = (event) => { + if (!event.currentTarget.contains(event.relatedTarget)) { + setGridHasFocus(false); + } + }; + // ------------------------------------- return ( @@ -564,6 +611,7 @@ const DataGrid = injectIntl((props) => { className={cx('data-grid', theme.className)} onKeyDown={handleKeyDown} onFocus={onFocus} + onBlur={onBlur} onMouseDown={onMouseDown} tabIndex={0} {...(activeIndex != null && { onMouseUp, onMouseMove, onMouseLeave: onMouseUp })} @@ -575,8 +623,12 @@ const DataGrid = injectIntl((props) => { columns={dataGridColumns} headerHeight={columnHeaderHeight} tableHeight={tableHeight} + activeColumnIndex={(gridHasFocus && focusedRow === 0) ? focusedCol : undefined} + isActiveColumnResizing={focusedRow === 0 && checkResizable} + columnResizeIncrement={columnResizeIncrement} onColumnSelect={handleColumnSelect} onResizeMouseDown={onResizeMouseDown} + onResizeHandleChange={onResizeHandleChange} />
{rows.map((row, index) => ( @@ -597,6 +649,7 @@ const DataGrid = injectIntl((props) => { +