Skip to content

Commit

Permalink
CB-5213 chore: update react-data-grid (#2716)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Wroud
Wroud authored Jun 18, 2024
1 parent 240dab7 commit e779a23
Show file tree
Hide file tree
Showing 7 changed files with 190 additions and 167 deletions.
89 changes: 50 additions & 39 deletions webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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,
Expand All @@ -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, {
Expand Down Expand Up @@ -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
Expand All @@ -825,23 +826,30 @@ 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);
return () => {
resizeObserver.disconnect();
};
}, []);
return [gridRef, inlineSize, blockSize];
return [gridRef, inlineSize, blockSize, horizontalScrollbarHeight];
}

function useLatestFunc(fn) {
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -1241,7 +1249,7 @@ function DragHandle({
});
}

const cellEditing = "cis5rrm7-0-0-beta-42";
const cellEditing = "cis5rrm7-0-0-beta-44";
function EditCell({
column,
colSpan,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -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
},
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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();
Expand Down
2 changes: 1 addition & 1 deletion webapp/packages/plugin-react-data-grid/react-data-grid-dist/lib/bundle.cjs.map
View file

Large diffs are not rendered by default.

Loading

0 comments on commit e779a23

Please sign in to comment.