@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -1,221 +0,0 @@
-/* eslint-disable @atlaskit/design-system/prefer-primitives */
-import React, { useCallback, useState } from 'react';
-
-import { DropList, type DropListProps, Popup } from '@atlaskit/editor-common/ui';
-import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
-import {
-	ArrowKeyNavigationProvider,
-	ArrowKeyNavigationType,
-	DropdownMenuItem,
-} from '@atlaskit/editor-common/ui-menu';
-import {
-	OutsideClickTargetRefContext,
-	withReactEditorViewOuterListeners,
-} from '@atlaskit/editor-common/ui-react';
-import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
-import { MenuGroup, Section } from '@atlaskit/menu';
-import { fg } from '@atlaskit/platform-feature-flags';
-
-import { dragMenuDropdownWidth } from '../consts';
-
-const DropListWithOutsideClickTargetRef = (props: DropListProps) => {
-	const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
-	// Ignored via go/ees005
-	// eslint-disable-next-line react/jsx-props-no-spreading
-	return <DropList onDroplistRef={setOutsideClickTargetRef} {...props} />;
-};
-const DropListWithOutsideListeners = withReactEditorViewOuterListeners(
-	DropListWithOutsideClickTargetRef,
-);
-
-type DropdownMenuProps = {
-	items: Array<{
-		items: MenuItem[];
-	}>;
-	/**
-	 * use to toggle top level menu keyboard navigation and action keys
-	 * e.g. should be false if submenu is rendered as a child to avoid multiple keydown handlers
-	 */
-	disableKeyboardHandling: boolean;
-	section: { hasSeparator?: boolean; title?: string };
-	onItemActivated?: (attrs: { item: MenuItem; shouldCloseMenu?: boolean }) => void;
-	handleClose: (focusTarget: 'editor' | 'handle') => void;
-	onMouseEnter: (attrs: { item: MenuItem }) => void;
-	onMouseLeave: (attrs: { item: MenuItem }) => void;
-	fitWidth?: number;
-	fitHeight?: number;
-	direction?: string;
-	offset?: Array<number>;
-	mountPoint?: HTMLElement;
-	boundariesElement?: HTMLElement;
-	scrollableElement?: HTMLElement;
-};
-
-export const DropdownMenu = ({
-	items,
-	section,
-	disableKeyboardHandling,
-	onItemActivated,
-	handleClose,
-	onMouseEnter,
-	onMouseLeave,
-	fitWidth,
-	fitHeight,
-	direction,
-	mountPoint,
-	boundariesElement,
-	scrollableElement,
-}: DropdownMenuProps) => {
-	const [popupPlacement, setPopupPlacement] = useState(['bottom', 'left']);
-	const [targetRefDiv, setTargetRefDiv] = useState<HTMLDivElement | null>(null);
-	const handleRef = (ref: HTMLDivElement | null) => {
-		setTargetRefDiv(ref);
-	};
-
-	// more offsets calculation as offsets depend on the direction and updated placement here
-	const offsetY = direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
-	const offsetX = direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
-
-	const innerMenu = () => {
-		return (
-			<DropListWithOutsideListeners
-				isOpen
-				shouldFitContainer
-				position={popupPlacement.join(' ')}
-				handleClickOutside={() => handleClose('editor')}
-				handleEscapeKeydown={() => {
-					if (!disableKeyboardHandling) {
-						handleClose('handle');
-					}
-				}}
-				handleEnterKeydown={(e: KeyboardEvent) => {
-					if (!disableKeyboardHandling) {
-						e.preventDefault();
-						e.stopPropagation();
-					}
-				}}
-				targetRef={targetRefDiv}
-			>
-				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766 */}
-				<div style={{ height: 0, minWidth: dragMenuDropdownWidth }} />
-				<MenuGroup role="menu">
-					{items.map((group, index) => (
-						<Section
-							hasSeparator={section?.hasSeparator && index > 0}
-							title={section?.title}
-							// Ignored via go/ees005
-							// eslint-disable-next-line react/no-array-index-key
-							key={index}
-						>
-							{group.items.map((item) => (
-								<DropdownMenuItem
-									shouldUseDefaultRole={false}
-									key={item.key ?? String(item.content)}
-									item={item}
-									onItemActivated={onItemActivated}
-									onMouseEnter={onMouseEnter}
-									onMouseLeave={onMouseLeave}
-								/>
-							))}
-						</Section>
-					))}
-				</MenuGroup>
-			</DropListWithOutsideListeners>
-		);
-	};
-
-	const onClose = useCallback(() => handleClose('handle'), [handleClose]);
-	const onSelection = useCallback(
-		(index: number) => {
-			const results = items.flatMap((item) => ('items' in item ? item.items : item));
-
-			// onSelection is called when any focusable element is 'activated'
-			// this is an issue as some menu items have toggles, which cause the index value
-			// in the callback to be outside of array length.
-			// The logic below normalises the index value based on the number
-			// of menu items with 2 focusable elements, and adjusts the index to ensure
-			// the correct menu item is sent in onItemActivated callback
-			const keys = ['row_numbers', 'header_row', 'header_column'];
-			let doubleItemCount = 0;
-
-			const firstIndex = results.findIndex((value) => {
-				const key = value.key;
-				return key !== undefined && keys.includes(key);
-			});
-
-			if (firstIndex === -1 || index <= firstIndex) {
-				onItemActivated && onItemActivated({ item: results[index] });
-				return;
-			}
-
-			for (let i = firstIndex; i < results.length; i += 1) {
-				const key = results[i].key;
-				if (key !== undefined && keys.includes(key)) {
-					doubleItemCount += 1;
-				}
-				if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-					onItemActivated && onItemActivated({ item: results[i] });
-					return;
-				}
-
-				if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-					onItemActivated && onItemActivated({ item: results[i] });
-					return;
-				}
-			}
-		},
-		[items, onItemActivated],
-	);
-
-	return (
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-		<div className="drag-dropdown-menu-wrapper">
-			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-			<div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
-			<Popup
-				// Ignored via go/ees005
-				// eslint-disable-next-line @atlaskit/editor/no-as-casting
-				target={targetRefDiv as HTMLElement}
-				mountTo={mountPoint}
-				boundariesElement={boundariesElement}
-				scrollableElement={scrollableElement}
-				onPlacementChanged={(placement: [string, string]) => {
-					setPopupPlacement(placement);
-				}}
-				fitHeight={fitHeight}
-				fitWidth={fitWidth}
-				zIndex={akEditorFloatingPanelZIndex}
-				offset={[offsetX, offsetY]}
-				allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-			>
-				{fg('platform_editor_table_drag_menu_flickers_fix') ? (
-					<ArrowKeyNavigationProvider
-						closeOnTab={!disableKeyboardHandling}
-						type={ArrowKeyNavigationType.MENU}
-						handleClose={onClose}
-						onSelection={onSelection}
-						// disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
-						// When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
-						// At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
-						// In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
-						// Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
-						disableArrowKeyNavigation={disableKeyboardHandling}
-					>
-						{innerMenu()}
-					</ArrowKeyNavigationProvider>
-				) : disableKeyboardHandling ? (
-					innerMenu()
-				) : (
-					<ArrowKeyNavigationProvider
-						closeOnTab
-						type={ArrowKeyNavigationType.MENU}
-						handleClose={onClose}
-						onSelection={onSelection}
-					>
-						{innerMenu()}
-					</ArrowKeyNavigationProvider>
-				)}
-			</Popup>
-		</div>
-	);
-};

package/src/ui/FloatingDragMenu/index.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
-import { Popup } from '@atlaskit/editor-common/ui';
-import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
-import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-	akEditorFloatingDialogZIndex,
-	akEditorFloatingOverlapPanelZIndex,
-} from '@atlaskit/editor-shared-styles';
-import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
-
-import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
-import type { PluginConfig, PluginInjectionAPI, TableDirection } from '../../types';
-import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
-
-import DragMenu from './DragMenu';
-
-interface Props {
-	editorView: EditorView;
-	isOpen: boolean;
-	tableRef?: HTMLTableElement;
-	tableNode?: PmNode;
-	mountPoint?: HTMLElement;
-	boundariesElement?: HTMLElement;
-	scrollableElement?: HTMLElement;
-	direction?: TableDirection;
-	index?: number;
-	targetCellPosition?: number;
-	getEditorContainerWidth: GetEditorContainerWidth;
-	api: PluginInjectionAPI | undefined | null;
-	editorAnalyticsAPI?: EditorAnalyticsAPI;
-	stickyHeaders?: RowStickyState;
-	pluginConfig?: PluginConfig;
-	isTableScalingEnabled?: boolean;
-	getEditorFeatureFlags?: GetEditorFeatureFlags;
-	ariaNotifyPlugin?: (
-		message: string,
-		ariaLiveElementAttributes?: AriaLiveElementAttributes,
-	) => void;
-	isCommentEditor?: boolean;
-}
-
-const FloatingDragMenu = ({
-	mountPoint,
-	boundariesElement,
-	scrollableElement,
-	editorView,
-	isOpen,
-	tableNode,
-	direction,
-	index,
-	targetCellPosition,
-	getEditorContainerWidth,
-	editorAnalyticsAPI,
-	stickyHeaders,
-	pluginConfig,
-	isTableScalingEnabled,
-	getEditorFeatureFlags,
-	ariaNotifyPlugin,
-	api,
-	isCommentEditor,
-}: Props) => {
-	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
-		return null;
-	}
-	const inStickyMode = stickyHeaders?.sticky;
-
-	const targetHandleRef =
-		direction === 'row'
-			? document.querySelector('#drag-handle-button-row')
-			: document.querySelector('#drag-handle-button-column');
-
-	const offset = direction === 'row' ? [-9, 0] : [0, -7];
-
-	if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
-		return null;
-	}
-
-	const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags?.() ?? {};
-
-	const shouldUseIncreasedScalingPercent =
-		isTableScalingEnabled && (tableWithFixedColumnWidthsOption || isCommentEditor);
-
-	return (
-		<Popup
-			alignX={direction === 'row' ? 'right' : undefined}
-			alignY={direction === 'row' ? 'start' : undefined}
-			// Ignored via go/ees005
-			// eslint-disable-next-line @atlaskit/editor/no-as-casting
-			target={targetHandleRef as HTMLElement}
-			mountTo={mountPoint}
-			boundariesElement={boundariesElement}
-			scrollableElement={scrollableElement}
-			fitWidth={dragMenuDropdownWidth}
-			fitHeight={tablePopupMenuFitHeight}
-			// z-index value below is to ensure that this menu is above other floating menu
-			// in table, but below floating dialogs like typeaheads, pickers, etc.
-			// In sticky mode, we want to show the menu above the sticky header
-			zIndex={inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex}
-			forcePlacement={true}
-			offset={offset}
-			stick={true}
-		>
-			<DragMenu
-				editorView={editorView}
-				isOpen={isOpen}
-				tableNode={tableNode}
-				direction={direction}
-				index={index}
-				target={targetHandleRef || undefined}
-				targetCellPosition={targetCellPosition}
-				getEditorContainerWidth={getEditorContainerWidth}
-				editorAnalyticsAPI={editorAnalyticsAPI}
-				pluginConfig={pluginConfig}
-				fitWidth={dragMenuDropdownWidth}
-				fitHeight={tablePopupMenuFitHeight}
-				mountPoint={mountPoint}
-				boundariesElement={boundariesElement}
-				scrollableElement={scrollableElement}
-				isTableScalingEnabled={isTableScalingEnabled}
-				shouldUseIncreasedScalingPercent={shouldUseIncreasedScalingPercent}
-				isTableFixedColumnWidthsOptionEnabled={tableWithFixedColumnWidthsOption}
-				ariaNotifyPlugin={ariaNotifyPlugin}
-				api={api}
-				isCommentEditor={isCommentEditor || false}
-			/>
-		</Popup>
-	);
-};
-
-FloatingDragMenu.displayName = 'FloatingDragMenu';
-
-export default FloatingDragMenu;

package/src/ui/FloatingDragMenu/styles.ts

@@ -1,83 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-
-import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
-import { N60A, N90 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-
-import { TableCssClassName as ClassName } from '../../types';
-import {
-	dragMenuDropdownWidth,
-	TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT,
-	TABLE_DRAG_MENU_PADDING_TOP,
-	TABLE_DRAG_MENU_SORT_GROUP_HEIGHT,
-} from '../consts';
-
-export const cellColourPreviewStyles = (selectedColor: string) =>
-	css({
-		'&::before': {
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-			background: selectedColor,
-		},
-	});
-
-// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-export const dragMenuBackgroundColorStyles = () => css`
-	.${ClassName.DRAG_SUBMENU} {
-		border-radius: ${token('border.radius', '3px')};
-		background: ${token('elevation.surface.overlay', 'white')};
-		box-shadow: ${token('elevation.shadow.overlay', `0 4px 8px -2px ${N60A}, 0 0 1px ${N60A}`)};
-		display: block;
-		position: absolute;
-		top: ${TABLE_DRAG_MENU_PADDING_TOP +
-		TABLE_DRAG_MENU_SORT_GROUP_HEIGHT +
-		TABLE_DRAG_MENU_MENU_GROUP_BEFORE_HEIGHT}px; /* move the submenu down when 'sort increasing/decreasing' appear before background color picker */
-		left: ${dragMenuDropdownWidth}px;
-		padding: ${token('space.100', '8px')};
-
-		> div {
-			padding: 0;
-		}
-	}
-
-	.${ClassName.DRAG_SUBMENU_ICON} {
-		display: flex;
-
-		&::before {
-			content: '';
-			display: block;
-			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${token('border.radius', '3px')};
-			width: 14px;
-			height: 14px;
-		}
-
-		&::after {
-			content: '›';
-			margin-left: ${token('space.050', '4px')};
-			line-height: 14px;
-			color: ${token('color.icon', N90)};
-		}
-	}
-`;
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const toggleStyles = css({
-	display: 'flex',
-	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-	"input[type='checkbox']": {
-		width: '30px',
-		height: '14px',
-		pointerEvents: 'initial',
-		cursor: 'pointer',
-	},
-	// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-	'> label': {
-		margin: '0px',
-		pointerEvents: 'none',
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-		'> span': {
-			pointerEvents: 'none',
-		},
-	},
-});

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -1,263 +0,0 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
-import type { SyntheticEvent } from 'react';
-import React from 'react';
-
-import classnames from 'classnames';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { injectIntl } from 'react-intl-next';
-
-import { addColumnAfter, addRowAfter, ToolTipContent } from '@atlaskit/editor-common/keymaps';
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { tableMarginTop } from '@atlaskit/editor-common/styles';
-import { closestElement } from '@atlaskit/editor-common/utils';
-import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-import Tooltip from '@atlaskit/tooltip';
-
-import type { TableDirection } from '../../types';
-import { TableCssClassName as ClassName } from '../../types';
-import { tableToolbarSize } from '../consts';
-
-interface ButtonProps {
-	type: TableDirection;
-	tableRef: HTMLElement;
-	onMouseDown: (event: SyntheticEvent<HTMLButtonElement>) => void;
-	hasStickyHeaders: boolean;
-	isChromelessEditor?: boolean;
-}
-
-const getInsertLineHeight = (
-	tableRef: HTMLElement,
-	hasStickyHeaders: boolean,
-	isDragAndDropEnabled?: boolean,
-) => {
-	// The line gets height 100% from the table,
-	// but since we have an overflow on the left,
-	// we should add an offset to make up for it.
-	const LINE_OFFSET = 3;
-
-	const ADDITIONAL_HEIGHT = hasStickyHeaders
-		? tableRef.getBoundingClientRect().top -
-			tableMarginTop * (isDragAndDropEnabled ? 3 : 4) -
-			LINE_OFFSET
-		: tableToolbarSize + LINE_OFFSET;
-	return tableRef.offsetHeight + ADDITIONAL_HEIGHT;
-};
-
-const getToolbarSize = (tableRef: HTMLElement): number => {
-	const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
-	if (parent) {
-		return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
-			? tableToolbarSize + akEditorTableNumberColumnWidth - 1
-			: tableToolbarSize;
-	}
-
-	return tableToolbarSize;
-};
-
-const getNumberColumnWidth = (tableRef: HTMLElement, isDragAndDropEnabled?: boolean): number => {
-	const parent = closestElement(tableRef, `.${ClassName.TABLE_CONTAINER}`);
-	if (parent && isDragAndDropEnabled) {
-		return parent.querySelector(`.${ClassName.NUMBERED_COLUMN}`)
-			? akEditorTableNumberColumnWidth - 1
-			: 0;
-	}
-	return 0;
-};
-
-const getInsertLineWidth = (
-	tableRef: HTMLElement,
-	isDragAndDropEnabled?: boolean,
-	isChromelessEditor?: boolean,
-) => {
-	// The line gets width 100% from the table,
-	// but since we have an overflow on the left,
-	// we should add an offset to make up for it.
-	const LINE_OFFSET = 4;
-	const DRAG_LINE_OFFSET = isChromelessEditor ? 14 : 6;
-	const { parentElement, offsetWidth } = tableRef;
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const parentOffsetWidth = parentElement!.offsetWidth;
-	// Ignored via go/ees005
-	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-	const { scrollLeft } = parentElement!;
-	const diff = offsetWidth - parentOffsetWidth;
-	const toolbarSize = isDragAndDropEnabled ? 0 : getToolbarSize(tableRef);
-	const lineOffset = isDragAndDropEnabled ? DRAG_LINE_OFFSET : LINE_OFFSET;
-
-	return (
-		Math.min(
-			offsetWidth + toolbarSize,
-			parentOffsetWidth + toolbarSize - Math.max(scrollLeft - diff, 0),
-		) +
-		lineOffset +
-		getNumberColumnWidth(tableRef, isDragAndDropEnabled)
-	);
-};
-
-const tooltipMessageByType = (type: TableDirection) => {
-	return type === 'row' ? messages.insertRow : messages.insertColumn;
-};
-
-const InsertButtonForDragAndDrop = ({
-	onMouseDown,
-	tableRef,
-	type,
-	intl: { formatMessage },
-	hasStickyHeaders,
-	isChromelessEditor,
-}: ButtonProps & WrappedComponentProps) => {
-	const isRow = type === 'row';
-
-	const content = (
-		<Tooltip
-			content={
-				<ToolTipContent
-					description={formatMessage(isRow ? messages.insertRowDrag : messages.insertColumnDrag)}
-					keymap={isRow ? addRowAfter : addColumnAfter}
-				/>
-			}
-			position="top"
-		>
-			<>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={classnames(ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER, {
-						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW]: isRow && !isChromelessEditor,
-						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_COLUMN]: !isRow,
-						[ClassName.DRAG_CONTROLS_INSERT_BUTTON_INNER_ROW_CHROMELESS]:
-							isRow && isChromelessEditor,
-					})}
-				>
-					<button
-						type="button"
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-						className={ClassName.DRAG_CONTROLS_INSERT_BUTTON}
-						onMouseDown={onMouseDown}
-					>
-						<svg
-							// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-							className={ClassName.CONTROLS_BUTTON_ICON}
-							width="16"
-							height="16"
-							viewBox="0 0 16 16"
-							fill="none"
-							xmlns="http://www.w3.org/2000/svg"
-						>
-							<path
-								d="M8 4C7.44771 4 7 4.44771 7 5V7H5C4.44771 7 4 7.44771 4 8C4 8.55229 4.44771 9 5 9H7V11C7 11.5523 7.44771 12 8 12C8.55229 12 9 11.5523 9 11V9H11C11.5523 9 12 8.55229 12 8C12 7.44771 11.5523 7 11 7H9V5C9 4.44771 8.55229 4 8 4Z"
-								fill="currentColor"
-							/>
-						</svg>
-					</button>
-				</div>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.CONTROLS_INSERT_LINE}
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					style={
-						type === 'row'
-							? {
-									width: getInsertLineWidth(tableRef, true, isChromelessEditor),
-									left: token('space.150', '12px'),
-								}
-							: {
-									height: getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
-									// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-									top: '-3px',
-								}
-					}
-				/>
-			</>
-		</Tooltip>
-	);
-
-	const floatingButtonClassName = isRow
-		? ClassName.CONTROLS_FLOATING_BUTTON_ROW
-		: ClassName.CONTROLS_FLOATING_BUTTON_COLUMN;
-
-	return (
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-		<div className={floatingButtonClassName}>
-			<div
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={`${ClassName.DRAG_CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
-			>
-				{content}
-			</div>
-		</div>
-	);
-};
-
-export const DragAndDropInsertButton = injectIntl(InsertButtonForDragAndDrop);
-
-const InsertButton = ({
-	onMouseDown,
-	tableRef,
-	type,
-	intl: { formatMessage },
-	hasStickyHeaders,
-}: ButtonProps & WrappedComponentProps) => {
-	const content = (
-		<Tooltip
-			content={
-				<ToolTipContent
-					description={formatMessage(tooltipMessageByType(type))}
-					keymap={type === 'row' ? addRowAfter : addColumnAfter}
-				/>
-			}
-			position="top"
-		>
-			<>
-				{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 */}
-				<div className={ClassName.CONTROLS_INSERT_BUTTON_INNER}>
-					<button
-						type="button"
-						// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-						className={ClassName.CONTROLS_INSERT_BUTTON}
-						onMouseDown={onMouseDown}
-					>
-						{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-						<svg className={ClassName.CONTROLS_BUTTON_ICON}>
-							<path
-								d="M10 4a1 1 0 0 1 1 1v4h4a1 1 0 0 1 0 2h-4v4a1 1 0 0 1-2 0v-4H5a1 1 0 1 1 0-2h4V5a1 1 0 0 1 1-1z"
-								fill="currentColor"
-								fillRule="evenodd"
-							/>
-						</svg>
-					</button>
-				</div>
-				<div
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-					className={ClassName.CONTROLS_INSERT_LINE}
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					style={
-						type === 'row'
-							? { width: getInsertLineWidth(tableRef) }
-							: { height: getInsertLineHeight(tableRef, hasStickyHeaders) }
-					}
-				/>
-			</>
-		</Tooltip>
-	);
-
-	const floatingButtonClassName =
-		type === 'column'
-			? ClassName.CONTROLS_FLOATING_BUTTON_COLUMN
-			: ClassName.CONTROLS_FLOATING_BUTTON_ROW;
-
-	return (
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-		<div className={floatingButtonClassName}>
-			<div
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={`${ClassName.CONTROLS_INSERT_BUTTON_WRAP} ${ClassName.CONTROLS_INSERT_ROW}`}
-			>
-				{content}
-			</div>
-		</div>
-	);
-};
-
-export default injectIntl(InsertButton);