@atlaskit/editor-plugin-table 12.2.5 → 12.2.7

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -1,203 +0,0 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-
-import rafSchedule from 'raf-schd';
-import { createPortal } from 'react-dom';
-
-import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import { token } from '@atlaskit/tokens';
-
-import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
-import { TableCssClassName as ClassName } from '../../types';
-import { insertColumnButtonOffset } from '../common-styles';
-
-const BUTTON_WIDTH = 20;
-
-interface Props {
-	children: React.ReactNode;
-	mountTo: HTMLElement;
-	offset: number;
-	stickyHeader: RowStickyState;
-	targetCellPosition: number;
-	targetCellRef: HTMLElement;
-	tableWrapper: HTMLElement;
-	isContextualMenuOpen: boolean | undefined;
-}
-
-interface CalcLeftPosData {
-	buttonWidth: number;
-	cellRectLeft: number;
-	cellRefWidth: number;
-	offset: number;
-}
-
-export const calcLeftPos = ({
-	buttonWidth,
-	cellRectLeft,
-	cellRefWidth,
-	offset,
-}: CalcLeftPosData) => {
-	return cellRectLeft + cellRefWidth - buttonWidth - offset;
-};
-
-export const calcObserverTargetMargin = (
-	tableWrapper: HTMLElement,
-	fixedButtonRefCurrent: HTMLElement,
-) => {
-	const tableWrapperRect = tableWrapper.getBoundingClientRect();
-	const fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
-	const scrollLeft = tableWrapper.scrollLeft;
-	return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
-};
-
-export const FixedButton = ({
-	children,
-	isContextualMenuOpen,
-	mountTo,
-	offset,
-	stickyHeader,
-	tableWrapper,
-	targetCellPosition,
-	targetCellRef,
-}: Props) => {
-	const fixedButtonRef = useRef<HTMLDivElement | null>(null);
-	const observerTargetRef = useRef<HTMLDivElement | null>(null);
-
-	// Using refs here rather than state to prevent heaps of renders on scroll
-	const scrollDataRef = useRef(0);
-	const leftPosDataRef = useRef(0);
-
-	useEffect(() => {
-		const observerTargetRefCurrent = observerTargetRef.current;
-		const fixedButtonRefCurrent = fixedButtonRef.current;
-
-		if (fixedButtonRefCurrent && observerTargetRefCurrent) {
-			scrollDataRef.current = tableWrapper.scrollLeft;
-			leftPosDataRef.current = 0;
-			// Hide the button initially in case there's a flash of the button being
-			// outside the table before the Intersection Observer fires
-			fixedButtonRefCurrent.style.visibility = 'hidden';
-
-			const margin = calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent);
-
-			// Much more simple and predictable to add this margin to the observer target
-			// rather than using it to calculate the rootMargin values
-			observerTargetRefCurrent.style.marginLeft = `${margin}px`;
-
-			const observer = new IntersectionObserver(
-				(entries) => {
-					entries.forEach((entry) => {
-						if (entry.isIntersecting) {
-							fixedButtonRefCurrent.style.visibility = 'visible';
-						} else {
-							fixedButtonRefCurrent.style.visibility = 'hidden';
-						}
-					});
-				},
-				{
-					root: tableWrapper,
-					rootMargin: `0px ${insertColumnButtonOffset}px 0px 0px`,
-					threshold: 1,
-				},
-			);
-
-			const handleScroll = rafSchedule((event) => {
-				if (fixedButtonRef.current) {
-					const delta = event.target.scrollLeft - scrollDataRef.current;
-					const style = `translateX(${leftPosDataRef.current - delta}px)`;
-					fixedButtonRef.current.style.transform = style;
-
-					scrollDataRef.current = event.target.scrollLeft;
-					leftPosDataRef.current = leftPosDataRef.current - delta;
-				}
-			});
-
-			observer.observe(observerTargetRefCurrent);
-			// Ignored via go/ees005
-			// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-			tableWrapper.addEventListener('scroll', handleScroll);
-
-			return () => {
-				// Ignored via go/ees005
-				// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
-				tableWrapper.removeEventListener('scroll', handleScroll);
-				fixedButtonRefCurrent.style.transform = '';
-				observer.unobserve(observerTargetRefCurrent);
-			};
-		}
-	}, [
-		fixedButtonRef,
-		observerTargetRef,
-		tableWrapper,
-		targetCellPosition,
-		targetCellRef,
-		isContextualMenuOpen,
-	]);
-
-	const fixedButtonTop = 0;
-
-	const containerLeft = useMemo(() => {
-		const container = targetCellRef.closest('[data-editor-container="true"]');
-		return container?.getBoundingClientRect().left || 0;
-	}, [targetCellRef]);
-
-	const left = useMemo(() => {
-		const targetCellRect = targetCellRef.getBoundingClientRect();
-		const baseLeft = calcLeftPos({
-			buttonWidth: BUTTON_WIDTH,
-			cellRectLeft: targetCellRect.left,
-			cellRefWidth: targetCellRef.clientWidth,
-			offset,
-		});
-
-		return baseLeft - containerLeft;
-	}, [containerLeft, targetCellRef, offset]);
-
-	// Using a portal here to ensure wrapperRef has the tableWrapper as an
-	// ancestor. This is required to make the Intersection Observer work.
-	return createPortal(
-		// Using observerTargetRef here for our Intersection Observer. There is issues
-		// getting the observer to work just using the fixedButtonRef, possible due
-		// to using position fixed on this Element, or possibly due to its position
-		// being changed on scroll.
-		<div
-			ref={observerTargetRef}
-			style={{
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				position: 'absolute',
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				top: token('space.0', '0px'),
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				left: token('space.0', '0px'),
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				width: token('space.250', '20px'), // BUTTON_WIDTH
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-				height: token('space.250', '20px'), // BUTTON_WIDTH
-			}}
-		>
-			<div
-				ref={fixedButtonRef}
-				style={{
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					position: 'fixed',
-					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					top: fixedButtonTop + stickyHeader.padding + offset * 2,
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-					zIndex: akEditorTableCellOnStickyHeaderZIndex,
-					// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-					left,
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					width: token('space.250', '20px'), // BUTTON_WIDTH
-					// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-					height: token('space.250', '20px'), // BUTTON_WIDTH
-				}}
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
-			>
-				{children}
-			</div>
-		</div>,
-		mountTo,
-	);
-};
-
-export default FixedButton;

package/src/ui/FloatingContextualButton/index.tsx

@@ -1,168 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import React, { useEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import type { WrappedComponentProps } from 'react-intl-next';
-import { injectIntl } from 'react-intl-next';
-
-import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
-import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
-import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-import { focusToContextMenuTrigger } from '@atlaskit/editor-common/keymaps';
-import { tableMessages as messages } from '@atlaskit/editor-common/messages';
-import { Popup } from '@atlaskit/editor-common/ui';
-import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
-import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
-import ExpandIcon from '@atlaskit/icon/core/migration/chevron-down';
-
-import { toggleContextualMenu } from '../../pm-plugins/commands';
-import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
-import { TableCssClassName as ClassName } from '../../types';
-
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
-import FixedButton from './FixedButton';
-import { tableFloatingCellButtonSelectedStyles, tableFloatingCellButtonStyles } from './styles';
-
-export interface Props {
-	editorView: EditorView;
-	tableWrapper?: HTMLElement;
-	tableNode?: PMNode;
-	targetCellPosition: number;
-	isContextualMenuOpen?: boolean;
-	mountPoint?: HTMLElement;
-	boundariesElement?: HTMLElement;
-	scrollableElement?: HTMLElement;
-	isNumberColumnEnabled?: boolean;
-	stickyHeader?: RowStickyState;
-	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
-	isCellMenuOpenByKeyboard?: boolean;
-}
-
-const BUTTON_OFFSET = 3;
-
-const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponentProps) => {
-	const {
-		editorView,
-		isContextualMenuOpen,
-		mountPoint,
-		scrollableElement,
-		stickyHeader,
-		tableWrapper,
-		targetCellPosition,
-		isCellMenuOpenByKeyboard,
-		intl: { formatMessage },
-	} = props; //  : Props & WrappedComponentProps
-
-	const handleClick = () => {
-		const { state, dispatch } = editorView;
-		// Clicking outside the dropdown handles toggling the menu closed
-		// (otherwise these two toggles combat each other).
-		// In the event a user clicks the chevron button again
-		// That will count as clicking outside the dropdown and
-		// will be toggled appropriately
-		if (!isContextualMenuOpen) {
-			toggleContextualMenu()(state, dispatch);
-		}
-	};
-
-	const domAtPos = editorView.domAtPos.bind(editorView);
-	const targetCellRef: Node | undefined = findDomRefAtPos(targetCellPosition, domAtPos);
-
-	useEffect(() => {
-		if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
-			const { state, dispatch } = editorView;
-			// open the menu when the keyboard shortcut is pressed
-			toggleContextualMenu()(state, dispatch);
-		}
-	}, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
-
-	if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
-		return null;
-	}
-
-	const labelCellOptions = formatMessage(messages.cellOptions);
-
-	const button = (
-		<div
-			css={[
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-				tableFloatingCellButtonStyles(),
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-				isContextualMenuOpen && tableFloatingCellButtonSelectedStyles(),
-			]}
-		>
-			<ToolbarButton
-				// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-				className={ClassName.CONTEXTUAL_MENU_BUTTON}
-				selected={isContextualMenuOpen}
-				title={labelCellOptions}
-				keymap={focusToContextMenuTrigger}
-				onClick={handleClick}
-				iconBefore={<ExpandIcon label="" color="currentColor" size="small" />}
-				aria-label={labelCellOptions}
-				aria-expanded={isContextualMenuOpen}
-			/>
-		</div>
-	);
-
-	const parentSticky =
-		targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-	if (stickyHeader && parentSticky && tableWrapper) {
-		return (
-			<FixedButton
-				offset={BUTTON_OFFSET}
-				stickyHeader={stickyHeader}
-				tableWrapper={tableWrapper}
-				targetCellPosition={targetCellPosition}
-				targetCellRef={targetCellRef}
-				mountTo={tableWrapper}
-				isContextualMenuOpen={isContextualMenuOpen}
-			>
-				{button}
-			</FixedButton>
-		);
-	}
-
-	return (
-		<Popup
-			alignX="right"
-			alignY="start"
-			target={targetCellRef}
-			mountTo={tableWrapper || mountPoint}
-			boundariesElement={targetCellRef}
-			scrollableElement={scrollableElement}
-			offset={[BUTTON_OFFSET, -BUTTON_OFFSET]}
-			forcePlacement
-			allowOutOfBounds
-			zIndex={akEditorSmallZIndex}
-		>
-			{button}
-		</Popup>
-	);
-});
-
-const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
-
-export default function (props: Props) {
-	return (
-		<ErrorBoundary
-			component={ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON}
-			dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
-			fallbackComponent={null}
-		>
-			<FloatingContextualButton
-				// Ignored via go/ees005
-				// eslint-disable-next-line react/jsx-props-no-spreading
-				{...props}
-			/>
-		</ErrorBoundary>
-	);
-}

package/src/ui/FloatingContextualButton/styles.ts

@@ -1,69 +0,0 @@
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css } from '@emotion/react';
-
-import { fg } from '@atlaskit/platform-feature-flags';
-import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
-import { token } from '@atlaskit/tokens';
-
-import { contextualMenuTriggerSize } from '../consts';
-
-export const tableFloatingCellButtonStyles = () =>
-	css({
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-		'> div': {
-			// Sits behind button to provide surface-color background
-			background: token('elevation.surface', N20),
-			borderRadius: token('border.radius', '3px'),
-			display: 'flex',
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-			height: `${contextualMenuTriggerSize + 2}px`,
-			flexDirection: 'column',
-			// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
-			...(fg('platform-visual-refresh-icons') && {
-				width: token('space.250', '20px'),
-			}),
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button': {
-			background: token('color.background.neutral', 'none'),
-			flexDirection: 'column',
-			margin: token('space.025', '2px'),
-			outline: `2px solid ${token('elevation.surface', N0)}`,
-			borderRadius: '1px',
-			padding: 0,
-			height: 'calc(100% - 4px)',
-			display: 'flex',
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button:hover': {
-			background: token('color.background.neutral.hovered', N30A),
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button:active': {
-			background: token('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button > span': {
-			margin: `0px ${token('space.negative.050', '-4px')}`,
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& span': {
-			pointerEvents: 'none',
-		},
-	});
-
-export const tableFloatingCellButtonSelectedStyles = () =>
-	css({
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button': {
-			background: token('color.background.selected', N700),
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button:hover': {
-			background: token('color.background.selected.hovered', N700),
-		},
-		// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-		'&& button:active': {
-			background: token('color.background.selected.pressed', N700),
-		},
-	});