Fix column resize listener document context

[JustJarethB]

Suggested fix for #4483

Allows implementers to provide an alternative document for event listeners to be attached to in relation to the column resize extension. This fixes the use case that a new window has been opened but the table js code is running in the previous window.

[KevinVandy]

If this PR is remade with no conflicts, we can merge it.

[JustJarethB]

Rebased to main and cherry-picked relevant code. Attempting to re-open to pick up the latest change but will create a new PR if not

[JustJarethB]

@KevinVandy thanks for the comment. As per my above comment, I pulled fresh and reset my branch to mirror. The current diff now seems correct. Please let me know if anything is missing or incorrect.

Cheers

[antoniobeltran]

@JustJarethB Thanks for proposing a fix. I'm wondering how you passed in the document on your sandbox example from bug reported. I've been messing around trying to get this to work for me.

{headerGroup.headers.map((header) => {
	return <TableHeader

		key={header.id}
		{...getTableHeaderProps(header)}
		onMouseDown={header.getResizeHandler(popOutContainer)}
		onTouchStart={header.getResizeHandler(popOutContainer)}
	/>
})}

[JustJarethB]

@antoniobeltran happy to help! It's tricky to be certain without the context of your codebase, but I'll try to give a generally helpful answer.
Just by reading the semantic variable names, I assume popOutContainer is a reference to an HTMLElement in your new window (e.g. div, span...). You should pass the Document reference here rather than an HTMLElement.

A minimum (TS) example using your above snippet:

const TableHeadComponentRenderedInANewWindow = () => {
	const ref = useRef<HTMLDivElement>(null); //Can be any HTMLElement
	const popoutDocument = ref.current?.ownerDocument;
	return (
		<div ref={ref}>
			{headerGroup.headers.map((header) => {
				return <TableHeader key={header.id} {...getTableHeaderProps(header)}
					onMouseDown={header.getResizeHandler(popoutDocument)}
					onTouchStart={header.getResizeHandler(popoutDocument)} />
			})}
		</div>
	)
}

your type of popoutDocument in this example should be Document | undefined which matches the expected parameter value of getResizeHandler. In the scenario where ref.current is null, the default behaviour with document will be used, but this should not be the case when the component is rendering.

For your specific case, it could be as simple as replacing popOutContainer with popOutContainer.ownerDocument

Hope this helps :)

[antoniobeltran]

Thanks @JustJarethB . It looks about to be exactly what we tried, but we didn't swap popOutContainer with popOutContainer.ownerDocument. We will try that out. Thank you