@atlaskit/editor-plugin-table 7.16.11 → 7.16.13

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -4,9 +4,9 @@ import React, { useState } from 'react';
 import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
 import {
-  ArrowKeyNavigationProvider,
-  ArrowKeyNavigationType,
-  DropdownMenuItem,
+	ArrowKeyNavigationProvider,
+	ArrowKeyNavigationType,
+	DropdownMenuItem,
 } from '@atlaskit/editor-common/ui-menu';
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
@@ -14,177 +14,167 @@ import { MenuGroup, Section } from '@atlaskit/menu';
 
 import { dragMenuDropdownWidth } from '../consts';
 
-const DropListWithOutsideListeners =
-  withReactEditorViewOuterListeners(DropList);
+const DropListWithOutsideListeners = withReactEditorViewOuterListeners(DropList);
 
 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;
+	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,
+	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);
-  };
+	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
-  let offsetY =
-    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
-  let offsetX =
-    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+	// more offsets calculation as offsets depend on the direction and updated placement here
+	let offsetY = direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+	let 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/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}
-              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 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/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}
+							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>
+		);
+	};
 
-  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
-        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
-      >
-        {disableKeyboardHandling ? (
-          innerMenu()
-        ) : (
-          <ArrowKeyNavigationProvider
-            closeOnTab
-            type={ArrowKeyNavigationType.MENU}
-            handleClose={() => handleClose('handle')}
-            onSelection={(index) => {
-              const results = items.flatMap((item) =>
-                'items' in item ? item.items : item,
-              );
+	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
+				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
+			>
+				{disableKeyboardHandling ? (
+					innerMenu()
+				) : (
+					<ArrowKeyNavigationProvider
+						closeOnTab
+						type={ArrowKeyNavigationType.MENU}
+						handleClose={() => handleClose('handle')}
+						onSelection={(index) => {
+							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;
+							// 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) =>
-                keys.includes(value.key!),
-              );
+							const firstIndex = results.findIndex((value) => keys.includes(value.key!));
 
-              if (firstIndex === -1 || index <= firstIndex) {
-                onItemActivated && onItemActivated({ item: results[index] });
-                return;
-              }
+							if (firstIndex === -1 || index <= firstIndex) {
+								onItemActivated && onItemActivated({ item: results[index] });
+								return;
+							}
 
-              for (let i = firstIndex; i < results.length; i += 1) {
-                if (keys.includes(results[i].key!)) {
-                  doubleItemCount += 1;
-                }
-                if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-                  onItemActivated && onItemActivated({ item: results[i] });
-                  return;
-                }
+							for (let i = firstIndex; i < results.length; i += 1) {
+								if (keys.includes(results[i].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;
-                }
-              }
-            }}
-          >
-            {innerMenu()}
-          </ArrowKeyNavigationProvider>
-        )}
-      </Popup>
-    </div>
-  );
+								if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+									onItemActivated && onItemActivated({ item: results[i] });
+									return;
+								}
+							}
+						}}
+					>
+						{innerMenu()}
+					</ArrowKeyNavigationProvider>
+				)}
+			</Popup>
+		</div>
+	);
 };

package/src/ui/FloatingDragMenu/index.tsx

@@ -1,16 +1,13 @@
 import React from 'react';
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type {
-  GetEditorContainerWidth,
-  GetEditorFeatureFlags,
-} from '@atlaskit/editor-common/types';
+import type { GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import { Popup } from '@atlaskit/editor-common/ui';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import {
-  akEditorFloatingDialogZIndex,
-  akEditorFloatingOverlapPanelZIndex,
+	akEditorFloatingDialogZIndex,
+	akEditorFloatingOverlapPanelZIndex,
 } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 
@@ -21,111 +18,100 @@ import { dragMenuDropdownWidth, tablePopupMenuFitHeight } from '../consts';
 import DragMenu from './DragMenu';
 
 export interface Props {
-  editorView: EditorView;
-  isOpen: boolean;
-  tableRef?: HTMLTableElement;
-  tableNode?: PmNode;
-  mountPoint?: HTMLElement;
-  boundariesElement?: HTMLElement;
-  scrollableElement?: HTMLElement;
-  direction?: TableDirection;
-  index?: number;
-  targetCellPosition?: number;
-  getEditorContainerWidth: GetEditorContainerWidth;
-  editorAnalyticsAPI?: EditorAnalyticsAPI;
-  stickyHeaders?: RowStickyState;
-  pluginConfig?: PluginConfig;
-  isTableScalingEnabled?: boolean;
-  getEditorFeatureFlags?: GetEditorFeatureFlags;
+	editorView: EditorView;
+	isOpen: boolean;
+	tableRef?: HTMLTableElement;
+	tableNode?: PmNode;
+	mountPoint?: HTMLElement;
+	boundariesElement?: HTMLElement;
+	scrollableElement?: HTMLElement;
+	direction?: TableDirection;
+	index?: number;
+	targetCellPosition?: number;
+	getEditorContainerWidth: GetEditorContainerWidth;
+	editorAnalyticsAPI?: EditorAnalyticsAPI;
+	stickyHeaders?: RowStickyState;
+	pluginConfig?: PluginConfig;
+	isTableScalingEnabled?: boolean;
+	getEditorFeatureFlags?: GetEditorFeatureFlags;
 }
 
 const FloatingDragMenu = ({
-  mountPoint,
-  boundariesElement,
-  scrollableElement,
-  editorView,
-  isOpen,
-  tableNode,
-  direction,
-  index,
-  targetCellPosition,
-  getEditorContainerWidth,
-  editorAnalyticsAPI,
-  stickyHeaders,
-  pluginConfig,
-  isTableScalingEnabled,
-  getEditorFeatureFlags,
+	mountPoint,
+	boundariesElement,
+	scrollableElement,
+	editorView,
+	isOpen,
+	tableNode,
+	direction,
+	index,
+	targetCellPosition,
+	getEditorContainerWidth,
+	editorAnalyticsAPI,
+	stickyHeaders,
+	pluginConfig,
+	isTableScalingEnabled,
+	getEditorFeatureFlags,
 }: Props) => {
-  if (
-    !isOpen ||
-    !targetCellPosition ||
-    editorView.state.doc.nodeSize <= targetCellPosition
-  ) {
-    return null;
-  }
-  const inStickyMode = stickyHeaders?.sticky;
+	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 targetHandleRef =
+		direction === 'row'
+			? document.querySelector('#drag-handle-button-row')
+			: document.querySelector('#drag-handle-button-column');
 
-  const offset = direction === 'row' ? [-9, 0] : [0, -7];
+	const offset = direction === 'row' ? [-9, 0] : [0, -7];
 
-  if (
-    !targetHandleRef ||
-    !(editorView.state.selection instanceof CellSelection)
-  ) {
-    return null;
-  }
+	if (!targetHandleRef || !(editorView.state.selection instanceof CellSelection)) {
+		return null;
+	}
 
-  const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
-    ? getEditorFeatureFlags()
-    : {};
+	const { tableDuplicateCellColouring = false } = getEditorFeatureFlags
+		? getEditorFeatureFlags()
+		: {};
 
-  return (
-    <Popup
-      alignX={direction === 'row' ? 'right' : undefined}
-      alignY={direction === 'row' ? 'start' : undefined}
-      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}
-        tableDuplicateCellColouring={tableDuplicateCellColouring}
-      />
-    </Popup>
-  );
+	return (
+		<Popup
+			alignX={direction === 'row' ? 'right' : undefined}
+			alignY={direction === 'row' ? 'start' : undefined}
+			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}
+				tableDuplicateCellColouring={tableDuplicateCellColouring}
+			/>
+		</Popup>
+	);
 };
 
 FloatingDragMenu.displayName = 'FloatingDragMenu';