@atlaskit/editor-plugin-table 7.16.10 → 7.16.12

package/src/ui/FloatingContextualButton/index.tsx

@@ -22,129 +22,123 @@ import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 
 import FixedButton from './FixedButton';
-import {
-  tableFloatingCellButtonSelectedStyles,
-  tableFloatingCellButtonStyles,
-} from './styles';
+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;
+	editorView: EditorView;
+	tableWrapper?: HTMLElement;
+	tableNode?: PMNode;
+	targetCellPosition: number;
+	isContextualMenuOpen?: boolean;
+	mountPoint?: HTMLElement;
+	boundariesElement?: HTMLElement;
+	scrollableElement?: HTMLElement;
+	isNumberColumnEnabled?: boolean;
+	stickyHeader?: RowStickyState;
+	dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 }
 
 const BUTTON_OFFSET = 3;
 
-const FloatingContextualButtonInner = React.memo(
-  (props: Props & WrappedComponentProps) => {
-    const {
-      editorView,
-      isContextualMenuOpen,
-      mountPoint,
-      scrollableElement,
-      stickyHeader,
-      tableWrapper,
-      targetCellPosition,
-      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);
-    let targetCellRef: Node | undefined;
-    targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-
-    if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
-      return null;
-    }
-
-    const labelCellOptions = formatMessage(messages.cellOptions);
-
-    const button = (
-      <div
-        css={[
-          tableFloatingCellButtonStyles(),
-          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}
-          onClick={handleClick}
-          iconBefore={<ExpandIcon label="" />}
-          aria-label={labelCellOptions}
-        />
-      </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 FloatingContextualButtonInner = React.memo((props: Props & WrappedComponentProps) => {
+	const {
+		editorView,
+		isContextualMenuOpen,
+		mountPoint,
+		scrollableElement,
+		stickyHeader,
+		tableWrapper,
+		targetCellPosition,
+		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);
+	let targetCellRef: Node | undefined;
+	targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+
+	if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+		return null;
+	}
+
+	const labelCellOptions = formatMessage(messages.cellOptions);
+
+	const button = (
+		<div
+			css={[
+				tableFloatingCellButtonStyles(),
+				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}
+				onClick={handleClick}
+				iconBefore={<ExpandIcon label="" />}
+				aria-label={labelCellOptions}
+			/>
+		</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 {...props} />
-    </ErrorBoundary>
-  );
+	return (
+		<ErrorBoundary
+			component={ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON}
+			dispatchAnalyticsEvent={props.dispatchAnalyticsEvent}
+			fallbackComponent={null}
+		>
+			<FloatingContextualButton {...props} />
+		</ErrorBoundary>
+	);
 }

package/src/ui/FloatingContextualButton/styles.ts

@@ -6,51 +6,48 @@ import { token } from '@atlaskit/tokens';
 import { contextualMenuTriggerSize } from '../consts';
 
 export const tableFloatingCellButtonStyles = () =>
-  css({
-    '> div': {
-      // Sits behind button to provide surface-color background
-      background: token('elevation.surface', N20),
-      borderRadius: token('border.radius', '3px'),
-      display: 'flex',
-      height: `${contextualMenuTriggerSize + 2}px`,
-      flexDirection: 'column',
-    },
-    '&& 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',
-    },
-    '&& button:hover': {
-      background: token('color.background.neutral.hovered', N30A),
-    },
-    '&& button:active': {
-      background: token(
-        'color.background.neutral.pressed',
-        'rgba(179, 212, 255, 0.6)',
-      ),
-    },
-    '&& button > span': {
-      margin: `0px ${token('space.negative.050', '-4px')}`,
-    },
-    '&& span': {
-      pointerEvents: 'none',
-    },
-  });
+	css({
+		'> div': {
+			// Sits behind button to provide surface-color background
+			background: token('elevation.surface', N20),
+			borderRadius: token('border.radius', '3px'),
+			display: 'flex',
+			height: `${contextualMenuTriggerSize + 2}px`,
+			flexDirection: 'column',
+		},
+		'&& 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',
+		},
+		'&& button:hover': {
+			background: token('color.background.neutral.hovered', N30A),
+		},
+		'&& button:active': {
+			background: token('color.background.neutral.pressed', 'rgba(179, 212, 255, 0.6)'),
+		},
+		'&& button > span': {
+			margin: `0px ${token('space.negative.050', '-4px')}`,
+		},
+		'&& span': {
+			pointerEvents: 'none',
+		},
+	});
 
 export const tableFloatingCellButtonSelectedStyles = () =>
-  css({
-    '&& button': {
-      background: token('color.background.selected', N700),
-    },
-    '&& button:hover': {
-      background: token('color.background.selected.hovered', N700),
-    },
-    '&& button:active': {
-      background: token('color.background.selected.pressed', N700),
-    },
-  });
+	css({
+		'&& button': {
+			background: token('color.background.selected', N700),
+		},
+		'&& button:hover': {
+			background: token('color.background.selected.hovered', N700),
+		},
+		'&& button:active': {
+			background: token('color.background.selected.pressed', N700),
+		},
+	});