@atlaskit/editor-plugin-table 12.2.6 → 12.2.7

package/src/ui/FloatingContextualMenu/index.tsx

@@ -1,141 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/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 { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-	akEditorFloatingDialogZIndex,
-	akEditorFloatingOverlapPanelZIndex,
-} from '@atlaskit/editor-shared-styles';
-import {
-	findCellRectClosestToPos,
-	getSelectionRect,
-	isSelectionType,
-} from '@atlaskit/editor-tables/utils';
-
-import { getPluginState } from '../../pm-plugins/plugin-factory';
-import type { PluginConfig, PluginInjectionAPI } from '../../types';
-import {
-	contextualMenuDropdownWidth,
-	contextualMenuDropdownWidthDnD,
-	contextualMenuTriggerSize,
-	tablePopupMenuFitHeight,
-} from '../consts';
-
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
-import ContextualMenu from './ContextualMenu';
-import { tablePopupStyles } from './styles';
-
-interface Props {
-	editorView: EditorView;
-	isOpen: boolean;
-	getEditorContainerWidth: GetEditorContainerWidth;
-	api: PluginInjectionAPI | undefined | null;
-	getEditorFeatureFlags?: GetEditorFeatureFlags;
-	targetCellPosition?: number;
-	mountPoint?: HTMLElement;
-	boundariesElement?: HTMLElement;
-	scrollableElement?: HTMLElement;
-	pluginConfig?: PluginConfig;
-	editorAnalyticsAPI?: EditorAnalyticsAPI;
-	isCellMenuOpenByKeyboard?: boolean;
-	isCommentEditor?: boolean;
-}
-
-const FloatingContextualMenu = ({
-	mountPoint,
-	boundariesElement,
-	scrollableElement,
-	editorView,
-	isOpen,
-	pluginConfig,
-	editorAnalyticsAPI,
-	getEditorContainerWidth,
-	getEditorFeatureFlags,
-	isCellMenuOpenByKeyboard,
-	isCommentEditor,
-	api,
-}: Props) => {
-	// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
-	const { targetCellPosition, isDragAndDropEnabled } = getPluginState(editorView.state);
-	if (!isOpen || !targetCellPosition || editorView.state.doc.nodeSize <= targetCellPosition) {
-		return null;
-	}
-
-	const { selection } = editorView.state;
-	const selectionRect = isSelectionType(selection, 'cell')
-		? // Ignored via go/ees005
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			getSelectionRect(selection)!
-		: findCellRectClosestToPos(selection.$from);
-
-	if (!selectionRect) {
-		return null;
-	}
-	const domAtPos = editorView.domAtPos.bind(editorView);
-	const targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-	if (!targetCellRef) {
-		return null;
-	}
-
-	const parentSticky =
-		targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-
-	return (
-		<Popup
-			alignX="right"
-			alignY="top"
-			// Ignored via go/ees005
-			// eslint-disable-next-line @atlaskit/editor/no-as-casting
-			target={targetCellRef as HTMLElement}
-			mountTo={mountPoint}
-			boundariesElement={boundariesElement}
-			scrollableElement={scrollableElement}
-			fitHeight={tablePopupMenuFitHeight}
-			fitWidth={isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}
-			// 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.
-			zIndex={parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex}
-			forcePlacement={true}
-			offset={[-7, 0]}
-			stick={true}
-		>
-			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */}
-			<div css={tablePopupStyles(isDragAndDropEnabled)}>
-				<ContextualMenu
-					editorView={editorView}
-					offset={[contextualMenuTriggerSize / 2, -contextualMenuTriggerSize]}
-					isOpen={isOpen}
-					targetCellPosition={targetCellPosition}
-					allowColumnSorting={pluginConfig && pluginConfig.allowColumnSorting}
-					// Ignored via go/ees005
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					allowMergeCells={pluginConfig!.allowMergeCells}
-					// Ignored via go/ees005
-					// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-					allowBackgroundColor={pluginConfig!.allowBackgroundColor}
-					selectionRect={selectionRect}
-					boundariesElement={boundariesElement}
-					editorAnalyticsAPI={editorAnalyticsAPI}
-					getEditorContainerWidth={getEditorContainerWidth}
-					getEditorFeatureFlags={getEditorFeatureFlags}
-					isCellMenuOpenByKeyboard={isCellMenuOpenByKeyboard}
-					isCommentEditor={isCommentEditor}
-					api={api}
-				/>
-			</div>
-		</Popup>
-	);
-};
-
-FloatingContextualMenu.displayName = 'FloatingContextualMenu';
-
-export default FloatingContextualMenu;

package/src/ui/FloatingContextualMenu/styles.ts

@@ -1,77 +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 { contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } 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,
-		},
-	});
-
-export const tablePopupStyles = (
-	isDragAndDropEnabled: boolean | undefined,
-	// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
-) => css`
-	.${ClassName.CONTEXTUAL_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: 0;
-		left: ${isDragAndDropEnabled ? contextualMenuDropdownWidthDnD : contextualMenuDropdownWidth}px;
-		padding: ${token('space.100', '8px')};
-
-		> div {
-			padding: 0;
-		}
-	}
-
-	.${ClassName.CONTEXTUAL_MENU_ICON} {
-		display: flex;
-
-		&::before {
-			content: '';
-			display: block;
-			border: 1px solid ${tableBackgroundBorderColor};
-			border-radius: ${token('border.radius', '3px')};
-			width: 20px;
-			height: 20px;
-		}
-
-		&::after {
-			content: '›';
-			margin-left: ${token('space.050', '4px')};
-			line-height: 20px;
-			color: ${token('color.icon', N90)};
-		}
-	}
-
-	.${ClassName.CONTEXTUAL_MENU_ICON_SMALL} {
-		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)};
-		}
-	}
-`;

package/src/ui/FloatingDeleteButton/DeleteButton.tsx

@@ -1,54 +0,0 @@
-import type { SyntheticEvent } from 'react';
-import React from 'react';
-
-import type { MessageDescriptor, WrappedComponentProps } from 'react-intl-next';
-import { injectIntl } from 'react-intl-next';
-
-import { TableCssClassName as ClassName } from '../../types';
-
-interface ButtonProps {
-	removeLabel: MessageDescriptor;
-	style?: object;
-	onClick?: (event: SyntheticEvent) => void;
-	onMouseEnter?: (event: SyntheticEvent) => void;
-	onMouseLeave?: (event: SyntheticEvent) => void;
-}
-
-const DeleteButton = ({
-	style,
-	onClick,
-	onMouseEnter,
-	onMouseLeave,
-	removeLabel,
-	intl: { formatMessage },
-}: ButtonProps & WrappedComponentProps) => (
-	// eslint-disable-next-line jsx-a11y/no-static-element-interactions
-	<div
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-		className={ClassName.CONTROLS_DELETE_BUTTON_WRAP}
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-		style={style}
-		onMouseEnter={onMouseEnter}
-		onMouseLeave={onMouseLeave}
-	>
-		<button
-			type="button"
-			aria-label={formatMessage(removeLabel, { 0: 1 })}
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-			className={ClassName.CONTROLS_DELETE_BUTTON}
-			onMouseDown={onClick}
-			onMouseMove={(e) => e.preventDefault()}
-		>
-			{/* eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766  */}
-			<svg className={ClassName.CONTROLS_BUTTON_ICON}>
-				<path
-					d="M12.242 10.828L9.414 8l2.828-2.829a.999.999 0 1 0-1.414-1.414L8 6.587l-2.829-2.83a1 1 0 0 0-1.414 1.414l2.83 2.83-2.83 2.827a1 1 0 0 0 1.414 1.414l2.83-2.828 2.827 2.828a.999.999 0 1 0 1.414-1.414"
-					fill="currentColor"
-					fillRule="evenodd"
-				/>
-			</svg>
-		</button>
-	</div>
-);
-
-export default injectIntl(DeleteButton);

package/src/ui/FloatingDeleteButton/getPopUpOptions.ts

@@ -1,65 +0,0 @@
-import type { PopupProps } from '@atlaskit/editor-common/ui';
-
-import { tableDeleteButtonOffset, tableDeleteButtonSize, tableToolbarSize } from '../consts';
-
-import type { CellSelectionType } from './types';
-
-interface GetPopupOptions {
-	left: number;
-	top: number;
-	selectionType?: CellSelectionType;
-	tableWrapper: HTMLElement | null;
-}
-
-const DELETE_BUTTON_CONTROLS_OFFSET =
-	tableToolbarSize + tableDeleteButtonSize + tableDeleteButtonOffset;
-
-function getColumnOptions(left: number, tableWrapper: HTMLElement | null): Partial<PopupProps> {
-	return {
-		alignX: 'left',
-		alignY: 'start',
-		offset: [left, DELETE_BUTTON_CONTROLS_OFFSET],
-		shouldRenderPopup() {
-			if (tableWrapper) {
-				const rect = tableWrapper.getBoundingClientRect();
-				const maxVisibleLeftPosition = rect.width + tableWrapper.scrollLeft - tableDeleteButtonSize;
-				const minVisibleLeftPosition = tableWrapper.scrollLeft;
-				return maxVisibleLeftPosition - left > 0 && left > minVisibleLeftPosition;
-			}
-			return true;
-		},
-	};
-}
-
-function getRowOptions(top: number): Partial<PopupProps> {
-	return {
-		alignX: 'left',
-		alignY: 'start',
-		forcePlacement: true,
-		offset: [0, -top],
-		onPositionCalculated(position) {
-			return {
-				...position,
-				// We need to force left to always be the offset to not be affected by overflow
-				left: -DELETE_BUTTON_CONTROLS_OFFSET,
-			};
-		},
-	};
-}
-
-export default function getPopupOptions({
-	left,
-	top,
-	selectionType,
-	tableWrapper,
-}: GetPopupOptions): Partial<PopupProps> {
-	switch (selectionType) {
-		case 'column':
-			return getColumnOptions(left, tableWrapper);
-		case 'row':
-			return getRowOptions(top);
-		default: {
-			return {};
-		}
-	}
-}