diff --git a/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs b/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs index 5ad9061973..88e288ac7b 100644 --- a/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs +++ b/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs @@ -59,7 +59,7 @@ function onEditorNavigation({ return false; } -const measuringCellClassname = "mlln6zg7-0-0-beta-42"; +const measuringCellClassname = "mlln6zg7-0-0-beta-44"; function renderMeasuringCells(viewportColumns) { return viewportColumns.map(({ key, @@ -264,9 +264,9 @@ function canExitGrid({ return shiftKey ? atFirstCellInRow && atFirstRow : atLastCellInRow && atLastRow; } -const cell = "cj343x07-0-0-beta-42"; +const cell = "cj343x07-0-0-beta-44"; const cellClassname = `rdg-cell ${cell}`; -const cellFrozen = "csofj7r7-0-0-beta-42"; +const cellFrozen = "csofj7r7-0-0-beta-44"; const cellFrozenClassname = `rdg-cell-frozen ${cellFrozen}`; function getRowStyle(rowIdx, height) { @@ -336,13 +336,13 @@ function getHeaderCellRowSpan(column, rowIdx) { return column.parent === undefined ? rowIdx : column.level - column.parent.level; } -const checkboxLabel = "c1bn88vv7-0-0-beta-42"; +const checkboxLabel = "c1bn88vv7-0-0-beta-44"; const checkboxLabelClassname = `rdg-checkbox-label ${checkboxLabel}`; -const checkboxInput = "c1qt073l7-0-0-beta-42"; +const checkboxInput = "c1qt073l7-0-0-beta-44"; const checkboxInputClassname = `rdg-checkbox-input ${checkboxInput}`; -const checkbox = "cf71kmq7-0-0-beta-42"; +const checkbox = "cf71kmq7-0-0-beta-44"; const checkboxClassname = `rdg-checkbox ${checkbox}`; -const checkboxLabelDisabled = "c1lwve4p7-0-0-beta-42"; +const checkboxLabelDisabled = "c1lwve4p7-0-0-beta-44"; const checkboxLabelDisabledClassname = `rdg-checkbox-label-disabled ${checkboxLabelDisabled}`; function renderCheckbox({ onChange, @@ -364,9 +364,9 @@ function renderCheckbox({ }); } -const groupCellContent = "g1s9ylgp7-0-0-beta-42"; +const groupCellContent = "g1s9ylgp7-0-0-beta-44"; const groupCellContentClassname = `rdg-group-cell-content ${groupCellContent}`; -const caret = "cz54e4y7-0-0-beta-42"; +const caret = "cz54e4y7-0-0-beta-44"; const caretClassname = `rdg-caret ${caret}`; function renderToggleGroup(props) { return /*#__PURE__*/jsxRuntime.jsx(ToggleGroup, { @@ -810,6 +810,7 @@ function useGridDimensions() { const gridRef = react.useRef(null); const [inlineSize, setInlineSize] = react.useState(1); const [blockSize, setBlockSize] = react.useState(1); + const [horizontalScrollbarHeight, setHorizontalScrollbarHeight] = react.useState(0); useLayoutEffect(() => { const { ResizeObserver @@ -825,15 +826,22 @@ function useGridDimensions() { width, height } = gridRef.current.getBoundingClientRect(); + const initialHorizontalScrollbarHeight = offsetHeight - clientHeight; const initialWidth = width - offsetWidth + clientWidth; - const initialHeight = height - offsetHeight + clientHeight; + const initialHeight = height - initialHorizontalScrollbarHeight; setInlineSize(initialWidth); setBlockSize(initialHeight); + setHorizontalScrollbarHeight(initialHorizontalScrollbarHeight); const resizeObserver = new ResizeObserver(entries => { const size = entries[0].contentBoxSize[0]; + const { + clientHeight, + offsetHeight + } = gridRef.current; reactDom.flushSync(() => { setInlineSize(size.inlineSize); setBlockSize(size.blockSize); + setHorizontalScrollbarHeight(offsetHeight - clientHeight); }); }); resizeObserver.observe(gridRef.current); @@ -841,7 +849,7 @@ function useGridDimensions() { resizeObserver.disconnect(); }; }, []); - return [gridRef, inlineSize, blockSize]; + return [gridRef, inlineSize, blockSize, horizontalScrollbarHeight]; } function useLatestFunc(fn) { @@ -1027,9 +1035,9 @@ function useViewportRows({ }; } -const cellCopied = "c6ra8a37-0-0-beta-42"; +const cellCopied = "c6ra8a37-0-0-beta-44"; const cellCopiedClassname = `rdg-cell-copied ${cellCopied}`; -const cellDraggedOver = "cq910m07-0-0-beta-42"; +const cellDraggedOver = "cq910m07-0-0-beta-44"; const cellDraggedOverClassname = `rdg-cell-dragged-over ${cellDraggedOver}`; function Cell({ column, @@ -1135,8 +1143,8 @@ function defaultRenderCell(key, props) { }, key); } -const cellDragHandle = "c1w9bbhr7-0-0-beta-42"; -const cellDragHandleFrozenClassname = "c1creorc7-0-0-beta-42"; +const cellDragHandle = "c1w9bbhr7-0-0-beta-44"; +const cellDragHandleFrozenClassname = "c1creorc7-0-0-beta-44"; const cellDragHandleClassname = `rdg-cell-drag-handle ${cellDragHandle}`; function DragHandle({ gridRowStart, @@ -1241,7 +1249,7 @@ function DragHandle({ }); } -const cellEditing = "cis5rrm7-0-0-beta-42"; +const cellEditing = "cis5rrm7-0-0-beta-44"; function EditCell({ column, colSpan, @@ -1379,8 +1387,8 @@ function GroupedColumnHeaderCell({ }); } -const headerSortCellClassname = "h44jtk67-0-0-beta-42"; -const headerSortName = "hcgkhxz7-0-0-beta-42"; +const headerSortCellClassname = "h44jtk67-0-0-beta-44"; +const headerSortName = "hcgkhxz7-0-0-beta-44"; const headerSortNameClassname = `rdg-header-sort-name ${headerSortName}`; function renderHeaderCell({ column, @@ -1414,14 +1422,14 @@ function SortableHeaderCell({ }); } -const cellSortableClassname = "c6l2wv17-0-0-beta-42"; -const cellResizable = "c1kqdw7y7-0-0-beta-42"; +const cellSortableClassname = "c6l2wv17-0-0-beta-44"; +const cellResizable = "c1kqdw7y7-0-0-beta-44"; const cellResizableClassname = `rdg-cell-resizable ${cellResizable}`; -const resizeHandleClassname = "r1y6ywlx7-0-0-beta-42"; +const resizeHandleClassname = "r1y6ywlx7-0-0-beta-44"; const cellDraggableClassname = 'rdg-cell-draggable'; -const cellDragging = "c1bezg5o7-0-0-beta-42"; +const cellDragging = "c1bezg5o7-0-0-beta-44"; const cellDraggingClassname = `rdg-cell-dragging ${cellDragging}`; -const cellOver = "c1vc96037-0-0-beta-42"; +const cellOver = "c1vc96037-0-0-beta-44"; const cellOverClassname = `rdg-cell-drag-over ${cellOver}`; function HeaderCell({ column, @@ -1629,15 +1637,15 @@ function isEventPertinent(event) { return !event.currentTarget.contains(relatedTarget); } -const row = "r1upfr807-0-0-beta-42"; +const row = "r1upfr807-0-0-beta-44"; const rowClassname = `rdg-row ${row}`; -const rowSelected = "r190mhd37-0-0-beta-42"; +const rowSelected = "r190mhd37-0-0-beta-44"; const rowSelectedClassname = 'rdg-row-selected'; -const rowSelectedWithFrozenCell = "r139qu9m7-0-0-beta-42"; +const rowSelectedWithFrozenCell = "r139qu9m7-0-0-beta-44"; const topSummaryRowClassname = 'rdg-top-summary-row'; const bottomSummaryRowClassname = 'rdg-bottom-summary-row'; -const headerRow = "h10tskcx7-0-0-beta-42"; +const headerRow = "h10tskcx7-0-0-beta-44"; const headerRowClassname = `rdg-header-row ${headerRow}`; function HeaderRow({ rowIdx, @@ -1846,7 +1854,7 @@ function ScrollToCell({ }); } -const arrow = "a3ejtar7-0-0-beta-42"; +const arrow = "a3ejtar7-0-0-beta-44"; const arrowClassname = `rdg-sort-arrow ${arrow}`; function renderSortStatus({ sortDirection, @@ -1881,14 +1889,14 @@ function renderSortPriority({ return priority; } -const root = "rnvodz57-0-0-beta-42"; +const root = "rnvodz57-0-0-beta-44"; const rootClassname = `rdg ${root}`; -const viewportDragging = "vlqv91k7-0-0-beta-42"; +const viewportDragging = "vlqv91k7-0-0-beta-44"; const viewportDraggingClassname = `rdg-viewport-dragging ${viewportDragging}`; -const focusSinkClassname = "f1lsfrzw7-0-0-beta-42"; -const focusSinkHeaderAndSummaryClassname = "f1cte0lg7-0-0-beta-42"; +const focusSinkClassname = "f1lsfrzw7-0-0-beta-44"; +const focusSinkHeaderAndSummaryClassname = "f1cte0lg7-0-0-beta-44"; -const summaryCellClassname = "s8wc6fl7-0-0-beta-42"; +const summaryCellClassname = "s8wc6fl7-0-0-beta-44"; function SummaryCell({ column, colSpan, @@ -1931,8 +1939,8 @@ function SummaryCell({ } const SummaryCell$1 = /*#__PURE__*/react.memo(SummaryCell); -const summaryRow = "skuhp557-0-0-beta-42"; -const topSummaryRow = "tf8l5ub7-0-0-beta-42"; +const summaryRow = "skuhp557-0-0-beta-44"; +const topSummaryRow = "tf8l5ub7-0-0-beta-44"; const summaryRowClassname = `rdg-summary-row ${summaryRow}`; function SummaryRow({ rowIdx, @@ -2044,7 +2052,7 @@ function DataGrid(props, ref) { const getColumnWidth = react.useCallback(column => { return resizedColumnWidths.get(column.key) ?? measuredColumnWidths.get(column.key) ?? column.width; }, [measuredColumnWidths, resizedColumnWidths]); - const [gridRef, gridWidth, gridHeight] = useGridDimensions(); + const [gridRef, gridWidth, gridHeight, horizontalScrollbarHeight] = useGridDimensions(); const { columns, colSpanColumns, @@ -2083,7 +2091,8 @@ function DataGrid(props, ref) { const shouldFocusCellRef = react.useRef(false); const isTreeGrid = role === 'treegrid'; const headerRowsHeight = headerRowsCount * headerRowHeight; - const clientHeight = gridHeight - headerRowsHeight - summaryRowsCount * summaryRowHeight; + const summaryRowsHeight = summaryRowsCount * summaryRowHeight; + const clientHeight = gridHeight - headerRowsHeight - summaryRowsHeight; const isSelectable = selectedRows != null && onSelectedRowsChange != null; const isRtl = direction === 'rtl'; const leftKey = isRtl ? 'ArrowRight' : 'ArrowLeft'; @@ -2135,6 +2144,7 @@ function DataGrid(props, ref) { const maxColIdx = columns.length - 1; const selectedCellIsWithinSelectionBounds = isCellWithinSelectionBounds(selectedPosition); const selectedCellIsWithinViewportBounds = isCellWithinViewportBounds(selectedPosition); + const scrollHeight = headerRowHeight + totalRowHeight + summaryRowsHeight + horizontalScrollbarHeight; const handleColumnResizeLatest = useLatestFunc(handleColumnResize); const onColumnsReorderLastest = useLatestFunc(onColumnsReorder); const onSortColumnsChangeLatest = useLatestFunc(onSortColumnsChange); @@ -2750,6 +2760,7 @@ function DataGrid(props, ref) { gridTemplateRows: templateRows, '--rdg-header-row-height': `${headerRowHeight}px`, '--rdg-summary-row-height': `${summaryRowHeight}px`, + '--rdg-scroll-height': `${scrollHeight}px`, '--rdg-sign': isRtl ? -1 : 1, ...layoutCssVars }, @@ -2894,7 +2905,7 @@ function GroupCell({ } const GroupCell$1 = /*#__PURE__*/react.memo(GroupCell); -const groupRow = "g1yxluv37-0-0-beta-42"; +const groupRow = "g1yxluv37-0-0-beta-44"; const groupRowClassname = `rdg-group-row ${groupRow}`; function GroupedRow({ className, @@ -3284,7 +3295,7 @@ function isReadonlyArray(arr) { } const TreeDataGrid$1 = /*#__PURE__*/react.forwardRef(TreeDataGrid); -const textEditorInternalClassname = "t7vyx3i7-0-0-beta-42"; +const textEditorInternalClassname = "t7vyx3i7-0-0-beta-44"; const textEditorClassname = `rdg-text-editor ${textEditorInternalClassname}`; function autoFocusAndSelect(input) { input?.focus(); diff --git a/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs.map b/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs.map index 9bd3dede43..a0731d41f3 100644 --- a/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs.map +++ b/webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs.map @@ -1 +1 @@ -{"version":3,"file":"bundle.cjs","sources":["../src/utils/colSpanUtils.ts","../src/utils/domUtils.ts","../src/utils/eventUtils.ts","../src/utils/keyboardUtils.ts","../src/utils/renderMeasuringCells.tsx","../src/utils/selectedCellUtils.ts","../src/style/cell.ts","../src/utils/styleUtils.ts","../src/utils/index.ts","../src/cellRenderers/renderCheckbox.tsx","../src/cellRenderers/renderToggleGroup.tsx","../src/cellRenderers/renderValue.tsx","../src/DataGridDefaultRenderersProvider.ts","../src/cellRenderers/SelectCellFormatter.tsx","../src/hooks/useRowSelection.ts","../src/Columns.tsx","../src/hooks/useCalculatedColumns.ts","../src/hooks/useLayoutEffect.ts","../src/hooks/useColumnWidths.ts","../src/hooks/useGridDimensions.ts","../src/hooks/useLatestFunc.ts","../src/hooks/useRovingTabIndex.ts","../src/hooks/useViewportColumns.ts","../src/hooks/useViewportRows.ts","../src/Cell.tsx","../src/DragHandle.tsx","../src/EditCell.tsx","../src/GroupedColumnHeaderCell.tsx","../src/renderHeaderCell.tsx","../src/HeaderCell.tsx","../src/style/row.ts","../src/HeaderRow.tsx","../src/GroupedColumnHeaderRow.tsx","../src/Row.tsx","../src/ScrollToCell.tsx","../src/sortStatus.tsx","../src/style/core.ts","../src/SummaryCell.tsx","../src/SummaryRow.tsx","../src/DataGrid.tsx","../src/GroupCell.tsx","../src/GroupRow.tsx","../src/TreeDataGrid.tsx","../src/editors/textEditor.tsx"],"sourcesContent":["import type { CalculatedColumn, ColSpanArgs } from '../types';\n\nexport function getColSpan(\n column: CalculatedColumn,\n lastFrozenColumnIndex: number,\n args: ColSpanArgs\n): number | undefined {\n const colSpan = typeof column.colSpan === 'function' ? column.colSpan(args) : 1;\n if (\n Number.isInteger(colSpan) &&\n colSpan! > 1 &&\n // ignore colSpan if it spans over both frozen and regular columns\n (!column.frozen || column.idx + colSpan! - 1 <= lastFrozenColumnIndex)\n ) {\n return colSpan!;\n }\n return undefined;\n}\n","import type { Maybe } from '../types';\n\nexport function stopPropagation(event: React.SyntheticEvent) {\n event.stopPropagation();\n}\n\nexport function scrollIntoView(element: Maybe) {\n element?.scrollIntoView({ inline: 'nearest', block: 'nearest' });\n}\n","import type { CellEvent } from '../types';\n\nexport function createCellEvent>(\n event: E\n): CellEvent {\n let defaultPrevented = false;\n const cellEvent = {\n ...event,\n preventGridDefault() {\n defaultPrevented = true;\n },\n isGridDefaultPrevented() {\n return defaultPrevented;\n }\n };\n\n Object.setPrototypeOf(cellEvent, Object.getPrototypeOf(event));\n\n return cellEvent;\n}\n","// https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values\nconst nonInputKeys = new Set([\n // Special keys\n 'Unidentified',\n // Modifier keys\n 'Alt',\n 'AltGraph',\n 'CapsLock',\n 'Control',\n 'Fn',\n 'FnLock',\n 'Meta',\n 'NumLock',\n 'ScrollLock',\n 'Shift',\n // Whitespace keys\n 'Tab',\n // Navigation keys\n 'ArrowDown',\n 'ArrowLeft',\n 'ArrowRight',\n 'ArrowUp',\n 'End',\n 'Home',\n 'PageDown',\n 'PageUp',\n // Editing\n 'Insert',\n // UI keys\n 'ContextMenu',\n 'Escape',\n 'Pause',\n 'Play',\n // Device keys\n 'PrintScreen',\n // Function keys\n 'F1',\n // 'F2', /!\\ specifically allowed, do not edit\n 'F3',\n 'F4',\n 'F5',\n 'F6',\n 'F7',\n 'F8',\n 'F9',\n 'F10',\n 'F11',\n 'F12'\n]);\n\nexport function isCtrlKeyHeldDown(e: React.KeyboardEvent): boolean {\n return (e.ctrlKey || e.metaKey) && e.key !== 'Control';\n}\n\nexport function isDefaultCellInput(event: React.KeyboardEvent): boolean {\n const vKey = 86;\n if (isCtrlKeyHeldDown(event) && event.keyCode !== vKey) return false;\n return !nonInputKeys.has(event.key);\n}\n\n/**\n * By default, the following navigation keys are enabled while an editor is open, under specific conditions:\n * - Tab:\n * - The editor must be an , a