@atlaskit/editor-plugin-table 7.6.2 → 7.6.4

package/src/toolbar.tsx

@@ -51,7 +51,6 @@ import {
 import DistributeColumnIcon from '@atlaskit/icon/glyph/editor/layout-three-equal';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import TableOptionsIcon from '@atlaskit/icon/glyph/preferences';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import {
   clearHoverSelection,
@@ -135,10 +134,7 @@ export const getToolbarMenuConfig = (
     },
   ];
 
-  if (
-    state.isDragAndDropEnabled &&
-    getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-  ) {
+  if (state.isDragAndDropEnabled) {
     return {
       id: 'editor.table.tableOptions',
       type: 'dropdown',
@@ -454,8 +450,15 @@ export const getToolbarConfig =
     const isWidthResizing = tableWidthState?.resizing;
 
     const { isTableScalingEnabled, widthToWidest } = pluginState;
-
-    if (isTableScalingEnabled && isWidthResizing && widthToWidest) {
+    const currentTableNodeLocalId = tableObject?.node?.attrs?.localId ?? '';
+
+    if (
+      isTableScalingEnabled &&
+      isWidthResizing &&
+      widthToWidest &&
+      currentTableNodeLocalId &&
+      widthToWidest[currentTableNodeLocalId]
+    ) {
       const { stickyScrollbar } = getEditorFeatureFlags();
 
       const nodeType = state.schema.nodes.table;
@@ -526,18 +529,16 @@ export const getToolbarConfig =
           );
 
       let columnSettingsItems;
-      columnSettingsItems =
-        pluginState.isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? getColumnSettingItems(
-              state,
-              getEditorView(),
-              intl,
-              getEditorContainerWidth,
-              editorAnalyticsAPI,
-              isTableScalingEnabled,
-            )
-          : [];
+      columnSettingsItems = pluginState.isDragAndDropEnabled
+        ? getColumnSettingItems(
+            state,
+            getEditorView(),
+            intl,
+            getEditorContainerWidth,
+            editorAnalyticsAPI,
+            isTableScalingEnabled,
+          )
+        : [];
       const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI);
 
       // Check if we need to show confirm dialog for delete button

package/src/types.ts

@@ -16,7 +16,7 @@ import type { DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import type { Rect } from '@atlaskit/editor-tables/table-map';
 import type { Edge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
 
-import type tablePlugin from './plugin';
+import type { TablePlugin } from './plugin';
 
 export const RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
 export type RowInsertPosition = 'TOP' | 'BOTTOM';
@@ -33,7 +33,33 @@ export interface InsertRowOptions {
   moveCursorToInsertedRow: boolean;
 }
 
-export type PluginInjectionAPI = ExtractInjectionAPI<typeof tablePlugin>;
+export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
+
+// override getPluginState but do not expose publicly as this type is experimental and will change
+// in the future
+export type TableSharedStateInternal = Pick<
+  TablePluginState,
+  | 'isFullWidthModeEnabled'
+  | 'wasFullWidthModeEnabled'
+  | 'isHeaderRowEnabled'
+  | 'isHeaderColumnEnabled'
+  | 'ordering'
+  | 'isInDanger'
+  | 'hoveredRows'
+  | 'hoveredCell'
+  | 'isTableHovered'
+  | 'tableNode'
+  | 'widthToWidest'
+> & {
+  isResizing: boolean;
+  isTableResizing?: boolean;
+  isWholeTableInDanger?: boolean;
+};
+
+export type TableSharedState = Pick<
+  TablePluginState,
+  'isFullWidthModeEnabled' | 'wasFullWidthModeEnabled'
+>;
 
 export type InsertRowMethods =
   | INPUT_METHOD.CONTEXT_MENU
@@ -96,6 +122,9 @@ export interface CellHoverMeta {
   colIndex?: number;
   rowIndex?: number;
 }
+export interface WidthToWidest {
+  [tableLocalId: string]: boolean;
+}
 
 export interface TablePluginState {
   editorHasFocus?: boolean;
@@ -130,7 +159,7 @@ export interface TablePluginState {
   // for table wrap/collapse
   isTableCollapsed?: boolean; // is the current table already in an expand?
   canCollapseTable?: boolean; // enabled/disabled state of collapse option
-  widthToWidest?: boolean; // is the current table set to the widest width regarding view port
+  widthToWidest?: WidthToWidest; // is the current table set to the widest width regarding view port
 
   getIntl: () => IntlShape;
 
@@ -221,7 +250,7 @@ export type TablePluginAction =
   | {
       type: 'UPDATE_TABLE_WIDTH_TO_WIDEST';
       data: {
-        widthToWidest: boolean | undefined;
+        widthToWidest: WidthToWidest | undefined;
       };
     }
   | {

package/src/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -126,11 +126,9 @@ export class ContextualMenu extends Component<
     const { isOpen, mountPoint, offset, boundariesElement, editorView } =
       this.props;
     const { isDragAndDropEnabled } = getPluginState(editorView.state);
-    const items =
-      isDragAndDropEnabled &&
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-        ? this.createNewContextMenuItems()
-        : this.createOriginalContextMenuItems();
+    const items = isDragAndDropEnabled
+      ? this.createNewContextMenuItems()
+      : this.createOriginalContextMenuItems();
 
     return (
       <div
@@ -161,9 +159,6 @@ export class ContextualMenu extends Component<
           offset={offset}
           section={
             isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) &&
             getBooleanFF('platform.editor.menu.group-items')
               ? { hasSeparator: true }
               : undefined
@@ -210,33 +205,24 @@ export class ContextualMenu extends Component<
         node?.attrs?.background || '#ffffff',
       );
       return {
-        content:
-          isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-            ? formatMessage(messages.backgroundColor)
-            : formatMessage(messages.cellBackground),
+        content: isDragAndDropEnabled
+          ? formatMessage(messages.backgroundColor)
+          : formatMessage(messages.cellBackground),
         value: { name: 'background' },
-        elemBefore:
-          isDragAndDropEnabled &&
-          getBooleanFF(
-            'platform.editor.table.new-cell-context-menu-styling',
-          ) ? (
-            <span css={elementBeforeIconStyles}>
-              <EditorBackgroundColorIcon
-                label={formatMessage(messages.backgroundColor)}
-                size="medium"
-              />
-            </span>
-          ) : undefined,
+        elemBefore: isDragAndDropEnabled ? (
+          <span css={elementBeforeIconStyles}>
+            <EditorBackgroundColorIcon
+              label={formatMessage(messages.backgroundColor)}
+              size="medium"
+            />
+          </span>
+        ) : undefined,
         elemAfter: (
           <div className={DropdownMenuSharedCssClassName.SUBMENU}>
             <div
               css={cellColourPreviewStyles(background)}
               className={
-                isDragAndDropEnabled &&
-                getBooleanFF(
-                  'platform.editor.table.new-cell-context-menu-styling',
-                )
+                isDragAndDropEnabled
                   ? ClassName.CONTEXTUAL_MENU_ICON_SMALL
                   : ClassName.CONTEXTUAL_MENU_ICON
               }
@@ -280,29 +266,21 @@ export class ContextualMenu extends Component<
           content: formatMessage(messages.mergeCells),
           value: { name: 'merge' },
           isDisabled: !canMergeCells(state.tr),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <MergeCellsIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <MergeCellsIcon />
+            </span>
+          ) : undefined,
         },
         {
           content: formatMessage(messages.splitCell),
           value: { name: 'split' },
           isDisabled: !splitCell(state),
-          elemBefore:
-            isDragAndDropEnabled &&
-            getBooleanFF(
-              'platform.editor.table.new-cell-context-menu-styling',
-            ) ? (
-              <span css={elementBeforeIconStyles}>
-                <SplitCellIcon />
-              </span>
-            ) : undefined,
+          elemBefore: isDragAndDropEnabled ? (
+            <span css={elementBeforeIconStyles}>
+              <SplitCellIcon />
+            </span>
+          ) : undefined,
         },
       ] as MenuItem[];
     }
@@ -318,20 +296,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addColumnRight
-          : messages.insertColumn,
+        isDragAndDropEnabled ? messages.addColumnRight : messages.insertColumn,
       ),
       value: { name: 'insert_column' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addColumnAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddColRightIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddColRightIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -344,20 +317,15 @@ export class ContextualMenu extends Component<
 
     return {
       content: formatMessage(
-        isDragAndDropEnabled &&
-          getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-          ? messages.addRowBelow
-          : messages.insertRow,
+        isDragAndDropEnabled ? messages.addRowBelow : messages.insertRow,
       ),
       value: { name: 'insert_row' },
       elemAfter: <div css={shortcutStyle}>{tooltip(addRowAfter)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <AddRowBelowIcon />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <AddRowBelowIcon />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -378,17 +346,15 @@ export class ContextualMenu extends Component<
       }),
       value: { name: 'clear' },
       elemAfter: <div css={shortcutStyle}>{tooltip(backspace)}</div>,
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <CrossCircleIcon
-              label={formatMessage(messages.clearCells, {
-                0: Math.max(noOfColumns, noOfRows),
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <CrossCircleIcon
+            label={formatMessage(messages.clearCells, {
+              0: Math.max(noOfColumns, noOfRows),
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -408,17 +374,15 @@ export class ContextualMenu extends Component<
         0: noOfColumns,
       }),
       value: { name: 'delete_column' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeColumns, {
-                0: noOfColumns,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeColumns, {
+              0: noOfColumns,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -438,17 +402,15 @@ export class ContextualMenu extends Component<
         0: noOfRows,
       }),
       value: { name: 'delete_row' },
-      elemBefore:
-        isDragAndDropEnabled &&
-        getBooleanFF('platform.editor.table.new-cell-context-menu-styling') ? (
-          <span css={elementBeforeIconStyles}>
-            <RemoveIcon
-              label={formatMessage(messages.removeRows, {
-                0: noOfRows,
-              })}
-            />
-          </span>
-        ) : undefined,
+      elemBefore: isDragAndDropEnabled ? (
+        <span css={elementBeforeIconStyles}>
+          <RemoveIcon
+            label={formatMessage(messages.removeRows, {
+              0: noOfRows,
+            })}
+          />
+        </span>
+      ) : undefined,
     } as MenuItem;
   };
 
@@ -463,11 +425,7 @@ export class ContextualMenu extends Component<
       isDragAndDropEnabled,
       pluginConfig: { allowDistributeColumns },
     } = getPluginState(editorView.state);
-    if (
-      allowDistributeColumns &&
-      (!isDragAndDropEnabled ||
-        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
-    ) {
+    if (allowDistributeColumns && !isDragAndDropEnabled) {
       const { isTableScalingEnabled = false } = getPluginState(
         editorView.state,
       );
@@ -498,11 +456,7 @@ export class ContextualMenu extends Component<
     } = this.props;
     const { isDragAndDropEnabled } = getPluginState(editorView.state);
 
-    if (
-      allowColumnSorting &&
-      (!isDragAndDropEnabled ||
-        !getBooleanFF('platform.editor.table.new-cell-context-menu-styling'))
-    ) {
+    if (allowColumnSorting && !isDragAndDropEnabled) {
       const hasMergedCellsInTable =
         getMergedCellsPositions(editorView.state.tr).length > 0;
       const warning = hasMergedCellsInTable

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -620,27 +620,18 @@ export const DragMenu = React.memo(
       return null;
     }
 
-    if (
-      allowBackgroundColor &&
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling')
-    ) {
+    if (allowBackgroundColor) {
       menuItems[0].items.unshift(createBackgroundColorMenuItem());
     }
 
     // If first row, add toggle for Header row, default is true
     // If first column, add toggle for Header column, default is false
-    if (
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
-      index === 0
-    ) {
+    if (index === 0) {
       menuItems.push({ items: [createHeaderRowColumnMenuItem(direction)] });
     }
 
     // All rows, add toggle for numbered rows, default is false
-    if (
-      getBooleanFF('platform.editor.table.new-cell-context-menu-styling') &&
-      direction === 'row'
-    ) {
+    if (direction === 'row') {
       index === 0
         ? menuItems[menuItems.length - 1].items.push(createRowNumbersMenuItem())
         : menuItems.push({ items: [createRowNumbersMenuItem()] });

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,7 +11,6 @@ import {
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -150,39 +149,31 @@ export const DropdownMenu = ({
             // 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
-            if (
-              getBooleanFF(
-                'platform.editor.table.new-cell-context-menu-styling',
-              )
-            ) {
-              const keys = ['row_numbers', 'header_row', 'header_column'];
-              let doubleItemCount = 0;
+            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] });
+            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;
-                }
+              if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+                onItemActivated && onItemActivated({ item: results[i] });
+                return;
               }
-            } else {
-              onItemActivated && onItemActivated({ item: results[index] });
             }
           }}
         >

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -2,7 +2,9 @@
 import type { MouseEvent } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
 
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
@@ -16,6 +18,7 @@ import {
   selectColumn,
   selectColumns,
 } from '../../../commands';
+import type { TablePlugin } from '../../../plugin';
 import { toggleDragMenu } from '../../../pm-plugins/drag-and-drop/commands';
 import type { TriggerType } from '../../../pm-plugins/drag-and-drop/types';
 import type { CellHoverMeta, HandleTypes } from '../../../types';
@@ -69,8 +72,11 @@ export const ColumnControls = ({
   isNumberColumnEnabled,
   isDragging,
   getScrollOffset,
-}: ColumnControlsProps) => {
+  api,
+}: ColumnControlsProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
   const columnControlsRef = useRef<HTMLDivElement>(null);
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
   const widths =
     colWidths
       ?.map((width) =>
@@ -82,7 +88,9 @@ export const ColumnControls = ({
   // TODO: reusing getRowsParams here because it's generic enough to work for columns -> rename
   const columnParams = getRowsParams(colWidths ?? []);
   const colIndex = hoveredCell?.colIndex;
-  const selectedColIndexes = getSelectedColumns(editorView.state.selection);
+  const selectedColIndexes = getSelectedColumns(
+    selectionState?.selection || editorView.state.selection,
+  );
 
   const firstRow = tableRef.querySelector('tr');
   const hasHeaderRow = firstRow

package/src/ui/TableFloatingColumnControls/index.tsx

@@ -5,10 +5,15 @@ import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
-import type { CellHoverMeta, DraggableSourceData } from '../../types';
+import type {
+  CellHoverMeta,
+  DraggableSourceData,
+  PluginInjectionAPI,
+} from '../../types';
 import { TableCssClassName as ClassName } from '../../types';
 import {
   containsHeaderColumn,
@@ -39,6 +44,7 @@ export interface Props {
   isNumberColumnEnabled?: boolean;
   getScrollOffset?: () => number;
   tableWrapperHeight?: number;
+  api?: PluginInjectionAPI;
 }
 
 export const TableFloatingColumnControls = ({
@@ -57,6 +63,7 @@ export const TableFloatingColumnControls = ({
   isNumberColumnEnabled,
   getScrollOffset,
   tableWrapperHeight,
+  api,
 }: Props) => {
   const [isDragging, setIsDragging] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -136,6 +143,11 @@ export const TableFloatingColumnControls = ({
         isNumberColumnEnabled={isNumberColumnEnabled}
         isDragging={isDragging}
         getScrollOffset={getScrollOffset}
+        api={
+          getBooleanFF('platform.editor.table.use-shared-state-hook')
+            ? api
+            : undefined
+        }
       />
       {isDragging && (
         <ColumnDropTargets

package/src/ui/TableFloatingControls/CornerControls/DragCornerControls.tsx

@@ -4,7 +4,9 @@ import classnames from 'classnames';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import {
   findTable,
   isTableSelected,
@@ -12,6 +14,7 @@ import {
 } from '@atlaskit/editor-tables/utils';
 
 import { clearHoverSelection } from '../../../commands';
+import type { TablePlugin } from '../../../plugin';
 import { TableCssClassName as ClassName } from '../../../types';
 
 import type { CornerControlProps } from './types';
@@ -62,4 +65,59 @@ const DragCornerControlsComponent = ({
   );
 };
 
+const DragCornerControlsComponentWithSelection = ({
+  editorView,
+  isInDanger,
+  isResizing,
+  intl: { formatMessage },
+  api,
+}: CornerControlProps &
+  WrappedComponentProps & { api?: ExtractInjectionAPI<TablePlugin> }) => {
+  const { selectionState } = useSharedPluginState(api, ['selection']);
+
+  const handleOnClick = () => {
+    const { state, dispatch } = editorView;
+    dispatch(selectTable(state.tr).setMeta('addToHistory', false));
+  };
+
+  const handleMouseOut = () => {
+    const { state, dispatch } = editorView;
+    clearHoverSelection()(state, dispatch);
+  };
+  const isActive = useMemo(() => {
+    if (!selectionState?.selection) {
+      return;
+    }
+    const table = findTable(selectionState.selection);
+    if (!table) {
+      return false;
+    }
+    return isTableSelected(selectionState.selection);
+  }, [selectionState]);
+
+  if (isResizing) {
+    return null;
+  }
+
+  return (
+    <button
+      className={classnames(ClassName.DRAG_CORNER_BUTTON, {
+        active: isActive,
+        danger: isActive && isInDanger,
+      })}
+      aria-label={formatMessage(messages.cornerControl)}
+      type="button"
+      onClick={handleOnClick}
+      onMouseOut={handleMouseOut}
+      contentEditable={false}
+    >
+      <div className={ClassName.DRAG_CORNER_BUTTON_INNER} />
+    </button>
+  );
+};
+
+export const DragCornerControlsWithSelection = injectIntl(
+  DragCornerControlsComponentWithSelection,
+);
+
 export const DragCornerControls = injectIntl(DragCornerControlsComponent);

package/src/ui/TableFloatingControls/CornerControls/index.tsx

@@ -1,2 +1,5 @@
 export { CornerControls } from './ClassicCornerControls';
-export { DragCornerControls } from './DragCornerControls';
+export {
+  DragCornerControls,
+  DragCornerControlsWithSelection,
+} from './DragCornerControls';