fix(tablev2): keep RenderRow stable

[JeanMarcMilletScality]

No description provided.

[bert-e]

Hello jeanmarcmilletscality,

My role is to assist you with the merge of this
pull request. Please type @bert-e help to get information
on this process, or consult the user documentation.

Available options

name	description	privileged	authored
/after_pull_request	Wait for the given pull request id to be merged before continuing with the current one.
/bypass_author_approval	Bypass the pull request author's approval	⭐
/bypass_build_status	Bypass the build and test status	⭐
/bypass_commit_size	Bypass the check on the size of the changeset TBA	⭐
/bypass_incompatible_branch	Bypass the check on the source branch prefix	⭐
/bypass_jira_check	Bypass the Jira issue check	⭐
/bypass_peer_approval	Bypass the pull request peers' approval	⭐
/bypass_leader_approval	Bypass the pull request leaders' approval	⭐
/approve	Instruct Bert-E that the author has approved the pull request.		✍️
/create_pull_requests	Allow the creation of integration pull requests.
/create_integration_branches	Allow the creation of integration branches.
/no_octopus	Prevent Wall-E from doing any octopus merge and use multiple consecutive merge instead
/unanimity	Change review acceptance criteria from one reviewer at least to all reviewers
/wait	Instruct Bert-E not to run until further notice.

Available commands

name	description	privileged
/help	Print Bert-E's manual in the pull request.
/status	Print Bert-E's current status in the pull request TBA
/clear	Remove all comments from Bert-E from the history TBA
/retry	Re-start a fresh build TBA
/build	Re-start a fresh build TBA
/force_reset	Delete integration branches & pull requests, and restart merge process from the beginning.
/reset	Try to remove integration branches unless there are commits on them which do not appear on the source branch.

Status report is not available.

[bert-e]

Waiting for approval

The following approvals are needed before I can proceed with the merge:

• the author

• one peer

Peer approvals must include at least 1 approval from the following list:

• @ZiyangLinScality

• @hervedombya

• @JeanMarcMilletScality

• @damiengillesscality

• @MonPote

• @ChengYanJin

• @JBWatenbergScality

[claude]

onSingleRowSelected is captured from the ref at render time into a local variable, then used in the click handler ternary on line 169. The other refs (handleMultipleSelectedRowsRef, toggleAllRowsSelectedRef, selectedRowIdsRef) are correctly read from .current at click time — but this one isn't, so if the prop changes after the row renders, the click handler uses a stale reference and may pick the wrong branch (single-select vs multi-select).

Read the ref inside the click handler instead:

Suggested change

	const onSingleRowSelected = onSingleRowSelectedRef.current;
	const rowProps = {
	...row.getRowProps({
	/**
	* Note:We need to pass the style property to the row component.
	* Otherwise when we scroll down, the next rows are flashing
	* because they are re-rendered in loop.
	*/
	style: { ...style },
	}),
	onClick: () => {
	const onSingleRowSelected = onSingleRowSelectedRef.current;
	if (onSingleRowSelected) {
	onSingleRowSelected(row);
	toggleAllRowsSelectedRef.current(false);
	setActiveRowId(row.id);
	} else {
	handleMultipleSelectedRowsRef.current(
	selectedRowIdsRef.current,
	rows,
	row,
	index,
	);
	}
	},

The same change applies to the checkbox onClick on the selection column (line 207) — read onSingleRowSelectedRef.current there too.

[claude]

Same issue as in MultiSelectableContent — onRowSelected is captured from the ref at render time and used in the click/keyDown handlers. Read it from the ref at call time instead:

Suggested change

	const onRowSelected = onRowSelectedRef.current;
	const rowProps = {
	...rowProps,
	...{
	onClick: () => {
	const onRowSelected = onRowSelectedRef.current;
	if (onRowSelected) return onRowSelected(row);
	},
	tabIndex: onRowSelectedRef.current ? 0 : undefined,
	onKeyDown: (event) => {
	const onRowSelected = onRowSelectedRef.current;

[claude]

activeRowId in the useMemo deps means every row click (via onSingleRowSelected) creates a new component type, causing react-window to unmount and remount all visible rows — the same flashing problem this PR fixes for other re-render triggers. The same applies to selectedId in SingleSelectableContent.

To keep the component stable across selection changes, move activeRowId into a ref (like the other volatile values) and pass it through itemData so areEqual can trigger re-renders without changing the component identity:

const activeRowIdRef = useRef<string | null>(null);
activeRowIdRef.current = activeRowId;

// in useMemo deps: remove activeRowId, keep only [separationLineVariant]
// in the row component: read activeRowIdRef.current instead of activeRowId
// pass activeRowId through itemData so areEqual detects the change:
//   itemData={useMemo(() => ({ rows, activeRowId }), [rows, activeRowId])}

This changes the itemData shape from Row[] to { rows, activeRowId }, which touches VirtualizedRows and TableRows types — a bigger refactor, so it may belong in a follow-up.

[claude]

Hardcoded hex color bypasses the theme system. This won't adapt to dark/light mode or custom themes. Use a theme token instead:

Suggested change

	fill: #a14fbf;
	fill: ${({ theme }) => theme.infoPrimary};