@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -1,306 +0,0 @@
-import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-
-import {
-	COLUMN_MIN_WIDTH,
-	MAX_SCALING_PERCENT,
-	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
-} from './consts';
-import {
-	getScalingPercentForTableWithoutWidth,
-	getTableContainerElementWidth,
-	getTableScalingPercent,
-} from './misc';
-
-type Col = Array<string | { [name: string]: string }>;
-
-/**
- * This ensures the combined width of the columns (and tbody) of table is always smaller or equal
- * than the table and table wrapper elements. This is necessary as there is no longer
- * padding on the .pm-table-wrapper, so all elements need to be the same width to avoid
- * overflow.
- */
-export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
-	colwidth - 1 / tableColumnCount;
-
-const generateColStyle = (
-	fixedColWidth: number,
-	tableWidth: number,
-	isCommentEditor?: boolean,
-	isChromelessEditor?: boolean,
-	isNested?: boolean,
-	shouldUseIncreasedScalingPercent?: boolean,
-	isNumberColumnEnabled?: boolean,
-	isTableHasWidth?: boolean,
-	hasTableBeenResized?: boolean,
-) => {
-	const maxScalingPercent = shouldUseIncreasedScalingPercent
-		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
-		: MAX_SCALING_PERCENT;
-	const maxScaledRatio = 1 - maxScalingPercent;
-
-	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
-
-	// for nested tables, or chromeless editor, which used non resizable table container
-	if (isNested || isChromelessEditor) {
-		if (hasTableBeenResized) {
-			return `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`;
-		}
-		return `width: ${tableCellMinWidth}px)`;
-	}
-	if (isFullPageEditor || (!isFullPageEditor && isTableHasWidth)) {
-		const scaledPercent = isNumberColumnEnabled
-			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
-			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
-		return `width: max(calc(${fixedColWidth}px * ${maxScaledRatio}), calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
-	}
-	// table resized to full-width in comment editor
-	// it doesn't have a width attribute, and cols has been resized
-	if (hasTableBeenResized) {
-		const scaledPercent = isNumberColumnEnabled
-			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
-			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
-		return `width: max(calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
-	}
-	return `width: ${tableCellMinWidth}px`;
-};
-
-export const generateColgroupFromNode = (
-	table: PmNode,
-	isCommentEditor?: boolean,
-	isChromelessEditor?: boolean,
-	isNested?: boolean,
-	isTableScalingEnabled?: boolean,
-	shouldUseIncreasedScalingPercent?: boolean,
-) => {
-	const cols: Col[] = [];
-	const map = TableMap.get(table);
-	const isTableHasWidth = !!table.attrs.width;
-	const isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
-	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	table.content.firstChild!.content.forEach((cell) => {
-		const colspan = cell.attrs.colspan || 1;
-		// if the table has been resized
-		if (Array.isArray(cell.attrs.colwidth)) {
-			cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-				// existing logic for calculating the width of the column
-				const fixedColWidth = getColWidthFix(width, map.width);
-				const tableWidth =
-					isFullPageEditor || (!isFullPageEditor && isTableHasWidth)
-						? getTableContainerElementWidth(table)
-						: calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
-				if (isTableScalingEnabled) {
-					cols.push([
-						'col',
-						{
-							style: generateColStyle(
-								fixedColWidth,
-								tableWidth,
-								isCommentEditor,
-								isChromelessEditor,
-								isNested,
-								shouldUseIncreasedScalingPercent,
-								isNumberColumnEnabled,
-								isTableHasWidth,
-								true,
-							),
-						},
-					]);
-				} else {
-					cols.push([
-						'col',
-						{
-							style: `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`,
-						},
-					]);
-				}
-			});
-		} else {
-			// columns has not been resized, so distribute the width evenly
-			cols.push(
-				...Array.from({ length: colspan }, (_) => {
-					const tableWidth = getTableContainerElementWidth(table);
-					const columnWidth = tableWidth / map.width || 0;
-					const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
-
-					return [
-						'col',
-						{
-							style: generateColStyle(
-								fixedColWidth,
-								tableWidth,
-								isCommentEditor,
-								isChromelessEditor,
-								isNested,
-								shouldUseIncreasedScalingPercent,
-								isNumberColumnEnabled,
-								isTableHasWidth,
-							),
-						},
-					];
-				}),
-			);
-		}
-	});
-	return cols;
-};
-
-export const generateColgroup = (
-	table: PmNode,
-	tableRef?: HTMLElement,
-	shouldUseIncreasedScalingPercent?: boolean,
-	isCommentEditor?: boolean,
-) => {
-	const cols: Col[] = [];
-	const map = TableMap.get(table);
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	table.content.firstChild!.content.forEach((cell) => {
-		const colspan = cell.attrs.colspan || 1;
-		if (Array.isArray(cell.attrs.colwidth)) {
-			// We slice here to guard against our colwidth array having more entries
-			// Than the we actually span. We'll patch the document at a later point.
-			if (tableRef) {
-				// if we have tableRef here, isTableScalingEnabled is true
-				let scalePercent = 1;
-				if (isCommentEditor && !table.attrs?.width) {
-					scalePercent = getScalingPercentForTableWithoutWidth(table, tableRef);
-				} else {
-					scalePercent = getTableScalingPercent(table, tableRef, shouldUseIncreasedScalingPercent);
-				}
-
-				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-					// existing logic for calculating the width of the column
-					const fixedColWidth = getColWidthFix(width, map.width);
-					const scaledWidth = fixedColWidth * scalePercent;
-					const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
-					cols.push([
-						'col',
-						{
-							style: `width: ${finalWidth}px;`,
-						},
-					]);
-				});
-			} else {
-				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
-					cols.push([
-						'col',
-						{
-							style: `width: ${getColWidthFix(
-								width ? Math.max(width, tableCellMinWidth) : tableCellMinWidth,
-								map.width,
-							)}px;`,
-						},
-					]);
-				});
-			}
-		} else {
-			// When we have merged cells on the first row (firstChild),
-			// We want to ensure we're creating the appropriate amount of
-			// cols the table still has.
-			cols.push(
-				...Array.from({ length: colspan }, (_) => [
-					'col',
-					{ style: `width: ${tableCellMinWidth}px;` },
-				]),
-			);
-		}
-	});
-	return cols;
-};
-
-export const insertColgroupFromNode = (
-	tableRef: HTMLTableElement | null,
-	table: PmNode,
-	isTableScalingEnabled = false,
-	shouldRemove = true,
-	shouldUseIncreasedScalingPercent = false,
-	isCommentEditor = false,
-): HTMLCollection => {
-	// Ignored via go/ees005
-	// eslint-disable-next-line @atlaskit/editor/no-as-casting
-	let colgroup = tableRef?.querySelector('colgroup') as HTMLElement;
-	if (colgroup && shouldRemove) {
-		tableRef?.removeChild(colgroup);
-	}
-
-	colgroup = renderColgroupFromNode(
-		table,
-		isTableScalingEnabled ? tableRef ?? undefined : undefined,
-		shouldUseIncreasedScalingPercent,
-		isCommentEditor,
-	);
-	if (shouldRemove) {
-		tableRef?.insertBefore(colgroup, tableRef?.firstChild);
-	}
-
-	return colgroup.children;
-};
-
-export const hasTableBeenResized = (table: PmNode) => {
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	return !!getFragmentBackingArray(table.content.firstChild!.content).find(
-		(cell) => cell.attrs.colwidth,
-	);
-};
-
-export const hasTableColumnBeenResized = hasTableBeenResized;
-
-/**
- * Check if a table has all the column width set to tableCellMinWidth(48px) or null
- *
- * @param table
- * @returns true if all column width is equal to tableCellMinWidth or null, false otherwise
- */
-export const isMinCellWidthTable = (table: PmNode) => {
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const cellArray = getFragmentBackingArray(table.content.firstChild!.content);
-	const isTableMinCellWidth = cellArray.every((cell) => {
-		return (
-			(cell.attrs.colwidth && cell.attrs.colwidth[0] === tableCellMinWidth) ||
-			cell.attrs.colwidth === null
-		);
-	});
-
-	return isTableMinCellWidth;
-};
-
-function renderColgroupFromNode(
-	table: PmNode,
-	maybeTableRef: HTMLElement | undefined,
-	shouldUseIncreasedScalingPercent: boolean,
-	isCommentEditor: boolean,
-): HTMLElement {
-	const rendered = DOMSerializer.renderSpec(document, [
-		'colgroup',
-		{},
-		...generateColgroup(table, maybeTableRef, shouldUseIncreasedScalingPercent, isCommentEditor),
-	]);
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @atlaskit/editor/no-as-casting
-	return rendered.dom as HTMLElement;
-}
-
-export const getColgroupChildrenLength = (table: PmNode): number => {
-	const map = TableMap.get(table);
-	return map.width;
-};
-
-export const getResizerMinWidth = (node: PmNode) => {
-	const currentColumnCount = getColgroupChildrenLength(node);
-	const minColumnWidth = Math.min(3, currentColumnCount) * COLUMN_MIN_WIDTH;
-	// add an extra pixel as the scale table logic will scale columns to be tableContainerWidth - 1
-	// the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
-	return minColumnWidth + 1;
-};

package/src/pm-plugins/table-resizing/utils/column-state.ts

@@ -1,120 +0,0 @@
-import { tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import { TableMap } from '@atlaskit/editor-tables/table-map';
-
-import { contentWidth } from './content-width';
-import { unitToNumber } from './unit-to-number';
-
-export interface ColumnState {
-	index: number;
-	width: number;
-	minWidth: number;
-}
-
-// Reads `width` and `minWidth` of each column from DOM and returns `ColumnState` containing those values
-export const getColumnStateFromDOM = (
-	cells: HTMLElement[],
-	index: number,
-	minWidth: number,
-): ColumnState => {
-	const width = calculateColumnWidth(cells, calculateColumnWidthCallback);
-
-	const minColumnWidth =
-		width < minWidth
-			? // for newly created column (where width < minWidth) we set minWidth = tableNewColumnMinWidth (140px atm)
-				tableNewColumnMinWidth
-			: calculateColumnWidth(cells, calculateColumnMinWidthCallback(minWidth));
-
-	return {
-		index,
-		width: width < minWidth ? tableNewColumnMinWidth : width,
-		minWidth: minColumnWidth,
-	};
-};
-
-export const getFreeSpace = (state: ColumnState) => {
-	return Math.max(state.width - state.minWidth, 0);
-};
-
-// Returns DOM refs of all cells in a column by `columnIndex`
-export const getCellsRefsInColumn = (
-	columnIndex: number,
-	table: PMNode,
-	tableStart: number,
-	domAtPos: (pos: number) => { node: Node; offset: number },
-): HTMLElement[] => {
-	const map = TableMap.get(table);
-	const cellsPositions = map.cellsInRect({
-		left: columnIndex,
-		right: columnIndex + 1,
-		top: 0,
-		bottom: map.height,
-	});
-	const cells: HTMLElement[] = [];
-	cellsPositions.forEach((pos) => {
-		// Ignored via go/ees005
-		// eslint-disable-next-line @atlaskit/editor/no-as-casting
-		const col = findDomRefAtPos(pos + tableStart, domAtPos) as HTMLElement;
-		if (col) {
-			cells.push(col);
-		}
-	});
-	return cells;
-};
-
-// calculates column widths based on `cells` DOM refs
-export const calculateColumnWidth = (
-	cells: HTMLElement[],
-	calculateColumnWidthCb: (
-		css: CSSStyleDeclaration,
-		cellRef: HTMLElement,
-		colSpan: number,
-	) => number,
-): number => {
-	let maxColWidth = 0;
-	let colSpanWidth = 0;
-
-	cells.forEach((cellRef) => {
-		const css = getComputedStyle(cellRef);
-		const colspan = Number(cellRef.getAttribute('colspan') || 1);
-
-		if (colspan > 1) {
-			colSpanWidth = calculateColumnWidthCb(css, cellRef, colspan);
-			return;
-		}
-
-		if (css) {
-			const colWidth = calculateColumnWidthCb(css, cellRef, colspan);
-			maxColWidth = Math.max(colWidth, maxColWidth);
-		}
-	});
-
-	return maxColWidth || colSpanWidth;
-};
-
-export const addContainerLeftRightPadding = (amount: number, css: CSSStyleDeclaration): number =>
-	amount + unitToNumber(css.paddingLeft) + unitToNumber(css.paddingRight);
-
-function calculateColumnWidthCallback(css: CSSStyleDeclaration): number {
-	return unitToNumber(css.width);
-}
-
-function calculateColumnMinWidthCallback(
-	minColumnWidth: number,
-): (css: CSSStyleDeclaration, cellRef: HTMLElement, colSpan: number) => number {
-	return (css, cellRef, colSpan) => {
-		if (colSpan && colSpan > 1) {
-			return unitToNumber(css.width);
-		}
-
-		const { minWidth: minContentWidth } = contentWidth(cellRef, cellRef);
-		// Override the min width, if there is content that can't collapse
-		// Past a certain width.
-		return Math.max(
-			addContainerLeftRightPadding(minContentWidth, css),
-			minContentWidth,
-			minColumnWidth,
-		);
-	};
-}

package/src/pm-plugins/table-resizing/utils/consts.ts

@@ -1,11 +0,0 @@
-export const COLUMN_MIN_WIDTH = 48;
-export const TABLE_MAX_WIDTH = 1800;
-export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
-export const MAX_SCALING_PERCENT = 0.3;
-export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
-// Used to calculate the width of a table using the Editor width
-export const TABLE_EDITOR_MARGIN = 76;
-const COMMENT_AK_EDITOR_CONTENT_AREA_PADDING = 20;
-const COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN = 12;
-export const TABLE_OFFSET_IN_COMMENT_EDITOR =
-	2 * (COMMENT_AK_EDITOR_CONTENT_AREA_PADDING + COMMENT_PM_TABLE_RESIZING_PLUGIN_MARGIN);

package/src/pm-plugins/table-resizing/utils/content-width.ts

@@ -1,118 +0,0 @@
-import { unitToNumber } from './unit-to-number';
-
-// calculates content width of a cell
-export function contentWidth(
-	elem: HTMLElement,
-	container: HTMLElement,
-	colWidths: number[] = [],
-	canvas: HTMLCanvasElement = document.createElement('canvas'),
-): { minWidth: number; width: number } {
-	return calcContentWidth(elem, container || elem, canvas, colWidths);
-}
-
-function calcContentWidth(
-	elem: HTMLElement,
-	container: HTMLElement,
-	canvas: HTMLCanvasElement,
-	colWidths: number[],
-): { minWidth: number; width: number } {
-	const flowWidths = [] as number[];
-	let curWidth = 0;
-
-	for (let i = 0; i < elem.childNodes.length; i++) {
-		// Ignored via go/ees005
-		// eslint-disable-next-line @atlaskit/editor/no-as-casting
-		const child = elem.childNodes[i] as HTMLElement;
-
-		if (child.nodeType === Node.COMMENT_NODE) {
-			continue;
-		}
-
-		if (child.nodeType === Node.TEXT_NODE) {
-			// Ignored via go/ees005
-			// eslint-disable-next-line @atlaskit/editor/no-as-casting
-			const parent = child.parentNode as HTMLElement;
-			const parentStyle = getComputedStyle(parent);
-			let contentLength = 0;
-
-			if (parent.nodeName === 'CODE' || parent.nodeName === 'PRE') {
-				contentLength = handlePreText(canvas, parent, child.textContent, parentStyle.font);
-			} else {
-				contentLength = measureText(canvas, child.textContent, parentStyle.font);
-			}
-
-			const left = parent.offsetLeft - container.offsetLeft;
-			flowWidths.push(curWidth);
-
-			curWidth += contentLength + left;
-
-			// If the text isn't meant to wrap, we should set that as a hard limit.
-			if (parentStyle.whiteSpace === 'nowrap') {
-				// + 3 is for date offset plus cursor
-				// TODO: ED-26961 - There should be a programmatic way to get this.
-				colWidths.push(parent.offsetWidth + 3);
-			}
-		} else {
-			// TODO: ED-26961 - doesn't quite work right with spacing
-			const style = getComputedStyle(child);
-
-			if (style.minWidth && style.minWidth.endsWith('px') && style.minWidth !== '0px') {
-				colWidths.push(unitToNumber(style.minWidth));
-			}
-
-			const { width } = contentWidth(child, container, colWidths, canvas);
-			if (style.display && style.display.indexOf('inline') > -1) {
-				// is inline element, add to curWidth
-				curWidth += width;
-			} else {
-				// block element, reset curWidth
-				flowWidths.push(curWidth);
-				curWidth = width;
-			}
-		}
-	}
-
-	flowWidths.push(curWidth);
-
-	return {
-		minWidth: colWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
-		width: flowWidths.reduce((oldMax, width) => Math.max(width, oldMax), 0),
-	};
-}
-
-function measureText(canvas: HTMLCanvasElement, text: string | null, font: string | null): number {
-	const ctx = canvas.getContext('2d');
-	if (!ctx) {
-		return 0;
-	}
-	if (font) {
-		ctx.font = font;
-	}
-	return Math.round(ctx.measureText(text || '').width);
-}
-
-function handlePreText(
-	canvas: HTMLCanvasElement,
-	node: HTMLElement,
-	textContent: string | null,
-	font: string | null,
-): number {
-	let parent = node;
-	if (node.nodeName === 'CODE') {
-		// Ignored via go/ees005
-		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion, @atlaskit/editor/no-as-casting
-		parent = node.parentNode! as HTMLElement;
-	}
-
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const computedStyle = getComputedStyle(parent!);
-	if (textContent && computedStyle.whiteSpace === 'pre') {
-		// If white space is pre grab the longest line in the block.
-		return textContent
-			.split('\n')
-			.reduce((acc, current) => Math.max(measureText(canvas, current, font), acc), 0);
-	}
-
-	return measureText(canvas, textContent, font);
-}

package/src/pm-plugins/table-resizing/utils/dom.ts

@@ -1,132 +0,0 @@
-import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
-import { closestElement, containsClassName, parsePx } from '@atlaskit/editor-common/utils';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-
-import { TableCssClassName as ClassName } from '../../../types';
-import { getPluginState as getMainPluginState } from '../../plugin-factory';
-import { colWidthsForRow } from '../../utils/column-controls';
-import { getRowHeights } from '../../utils/row-controls';
-
-export const updateControls = () => (state: EditorState) => {
-	const { tableRef } = getMainPluginState(state);
-	if (!tableRef) {
-		return;
-	}
-	const tr = tableRef.querySelector('tr');
-	if (!tr) {
-		return;
-	}
-	const wrapper = tableRef.parentElement;
-	if (!(wrapper && wrapper.parentElement)) {
-		return;
-	}
-
-	const rowControls = wrapper.parentElement.querySelectorAll<HTMLElement>(
-		`.${ClassName.ROW_CONTROLS_BUTTON_WRAP}`,
-	);
-	const numberedRows = wrapper.parentElement.querySelectorAll<HTMLElement>(
-		ClassName.NUMBERED_COLUMN_BUTTON,
-	);
-
-	syncStickyRowToTable(tableRef);
-
-	const rowHeights = getRowHeights(tableRef);
-
-	// update rows controls height on resize
-	for (let i = 0, count = rowControls.length; i < count; i++) {
-		const height = rowHeights[i];
-		if (height) {
-			rowControls[i].style.height = `${height}px`;
-
-			if (numberedRows.length) {
-				numberedRows[i].style.height = `${height}px`;
-			}
-		}
-	}
-};
-
-export const isClickNear = (event: MouseEvent, click: { x: number; y: number }): boolean => {
-	const dx = click.x - event.clientX,
-		dy = click.y - event.clientY;
-	return dx * dx + dy * dy < 100;
-};
-
-export const getResizeCellPos = (view: EditorView, event: MouseEvent): number | null => {
-	// Ignored via go/ees005
-	// eslint-disable-next-line @atlaskit/editor/no-as-casting
-	const target = event.target as HTMLElement;
-
-	if (!containsClassName(target, ClassName.RESIZE_HANDLE_DECORATION)) {
-		return null;
-	}
-
-	const tableCell = closestElement(target, 'td, th');
-
-	if (!tableCell) {
-		return null;
-	}
-
-	const cellStartPosition = view.posAtDOM(tableCell, 0);
-	return cellStartPosition - 1;
-};
-
-export const updateStickyMargins = (table: HTMLElement) => {
-	const row = table.querySelector('tr.sticky');
-	if (!row) {
-		table.style.marginTop = '';
-		return;
-	}
-
-	const paddingTop = parsePx(window.getComputedStyle(row).paddingTop || '') || 0;
-
-	const firstRowHeight = row.getBoundingClientRect().height - paddingTop - tableCellBorderWidth;
-
-	table.style.marginTop = `${tableMarginTop + firstRowHeight}px`;
-};
-
-const applyColWidthsToStickyRow = (
-	// @ts-ignore - CCFE error TS6133: 'colGroup' is declared but its value is never read.
-	colGroup: HTMLTableColElement | null,
-	headerRow: HTMLTableRowElement,
-) => {
-	// sync column widths for the sticky row
-	const newCols = colWidthsForRow(headerRow);
-
-	if (newCols) {
-		headerRow.style.gridTemplateColumns = newCols;
-	}
-};
-
-export const syncStickyRowToTable = (tableRef?: HTMLElement | null) => {
-	if (!tableRef) {
-		return;
-	}
-
-	const headerRow = tableRef.querySelector('tr[data-header-row]') as HTMLTableRowElement;
-
-	if (!headerRow) {
-		return;
-	}
-	applyColWidthsToStickyRow(tableRef.querySelector('colgroup'), headerRow);
-	applyTableWidthToStickyRow(tableRef, headerRow);
-};
-
-const applyTableWidthToStickyRow = (tableRef: HTMLElement, headerRow: HTMLTableRowElement) => {
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const tbody = tableRef.querySelector('tbody')!;
-	const wrapper = tableRef.parentElement;
-
-	if (tbody && wrapper) {
-		// when resizing in Chrome, clientWidth will give us 759px
-		// but toggling the sticky class will reset it to 760px.
-		//
-		// both elements in the dom + inspector will
-		// be the same width but at layout will be different..
-		const newWidth = Math.min(tbody.offsetWidth + 1, wrapper.offsetWidth);
-
-		headerRow.style.width = `${newWidth}px`;
-		headerRow.scrollLeft = wrapper.scrollLeft;
-	}
-};