@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

package/src/ui/FloatingContextualMenu/styles.ts

@@ -2,7 +2,6 @@ import { css } from '@emotion/react';
 
 import { tableBackgroundBorderColor } from '@atlaskit/adf-schema';
 import { N60A, N90 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../../types';
@@ -18,7 +17,7 @@ export const cellColourPreviewStyles = (selectedColor: string) => css`
 // TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 export const tablePopupStyles = css`
   .${ClassName.CONTEXTUAL_SUBMENU} {
-    border-radius: ${borderRadius()}px;
+    border-radius: ${token('border.radius', '3px')};
     background: ${token('elevation.surface.overlay', 'white')};
     box-shadow: ${token(
       'elevation.shadow.overlay',
@@ -42,7 +41,7 @@ export const tablePopupStyles = css`
       content: '';
       display: block;
       border: 1px solid ${tableBackgroundBorderColor};
-      border-radius: ${borderRadius()}px;
+      border-radius: ${token('border.radius', '3px')};
       width: 20px;
       height: 20px;
     }
@@ -54,4 +53,24 @@ export const tablePopupStyles = css`
       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/TableFloatingControls/NumberColumn/index.tsx

@@ -47,7 +47,7 @@ export default class NumberColumn extends Component<Props, any> {
               : undefined,
           borderLeft:
             isDragAndDropEnabled && tableActive
-              ? `1px solid ${tableBorderColor()}`
+              ? `1px solid ${tableBorderColor}`
               : undefined,
         }}
         contentEditable={false}

package/src/ui/common-styles.ts

@@ -23,7 +23,6 @@ import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
-import type { ThemeProps } from '@atlaskit/theme/types';
 import { token } from '@atlaskit/tokens';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -195,19 +194,15 @@ const breakoutWidthStyling = () => {
   `;
 };
 
-const tableBorderStyles = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableBorderStyles = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return `border-color: ${tableBorderDeleteColor(props)}`;
+    return `border-color: ${tableBorderDeleteColor}`;
   } else {
-    return `border: 1px solid ${tableBorderDeleteColor(props)}`;
+    return `border: 1px solid ${tableBorderDeleteColor}`;
   }
 };
 
-const tableStickyHeaderColumnControlsDecorationsStyle = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -217,7 +212,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
 
       .${ClassName.TABLE_STICKY}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor(props)};
+        border-left: 1px solid ${tableBorderColor};
       }
 
       .${ClassName.TABLE_STICKY}
@@ -239,9 +234,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
-const tableStickyHeaderFirefoxFixStyle = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => {
+const tableStickyHeaderFirefoxFixStyle = () => {
   /*
     This is MAGIC!
     This fixes a bug which occurs in firefox when the first row becomes sticky.
@@ -290,9 +283,7 @@ const tableWrapperStyles = () => {
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
-export const tableStyles = (
-  props: ThemeProps & { featureFlags?: FeatureFlags },
-) => css`
+export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   .${ClassName.LAYOUT_BUTTON} button {
     background: ${token('color.background.neutral', N20A)};
     color: ${token('color.icon', N300)};
@@ -306,13 +297,13 @@ export const tableStyles = (
   }
 
   .ProseMirror {
-    ${tableSharedStyle(props)};
+    ${tableSharedStyle()};
     ${columnControlsLineMarker()};
-    ${hoveredDeleteButton(props)};
-    ${hoveredCell(props)};
+    ${hoveredDeleteButton()};
+    ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
-    ${resizeHandle(props)};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
+    ${resizeHandle()};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -326,15 +317,15 @@ export const tableStyles = (
       }
 
       td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor(props)};
+        background-color: ${tableCellBackgroundColor};
 
         // ED-15246: Trello card is visible through a border of a table border
         // This fixes a border issue caused by relative positioned table cells
         &::after {
           height: 100%;
           content: '';
-          border-left: 1px solid ${tableBorderColor(props)};
-          border-bottom: 1px solid ${tableBorderColor(props)};
+          border-left: 1px solid ${tableBorderColor};
+          border-bottom: 1px solid ${tableBorderColor};
           position: absolute;
           right: 0px;
           top: 0px;
@@ -347,19 +338,19 @@ export const tableStyles = (
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper(props)}
+      ${insertColumnButtonWrapper()}
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper(props)}
+      ${insertRowButtonWrapper()}
     }
 
-    ${dragInsertButtonWrapper(props)}
+    ${dragInsertButtonWrapper()}
 
-    ${dragCornerControlButton(props)}
+    ${dragCornerControlButton()}
 
     /* Delete button */
-    ${DeleteButton(props)}
+    ${DeleteButton()}
     /* Ends Delete button */
 
     /* sticky styles */
@@ -392,9 +383,9 @@ export const tableStyles = (
       width: ${tableToolbarSize}px;
     }
 
-    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
+    ${tableStickyHeaderColumnControlsDecorationsStyle()}
 
-    ${tableStickyHeaderFirefoxFixStyle(props)}
+    ${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -453,7 +444,7 @@ export const tableStyles = (
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor(props)};
+        ${tableBorderColor};
       margin-right: -1px;
     }
 
@@ -522,7 +513,7 @@ export const tableStyles = (
     }
 
     ${sentinelStyles}
-    ${OverflowShadow(props)}
+    ${OverflowShadow()}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -577,8 +568,8 @@ export const tableStyles = (
     /* Breakout only works on top level unless wrapped in fragment mark */
     ${breakoutWidthStyling()}
 
-    ${columnControlsDecoration(props)};
-    ${rowControlsWrapperDotStyle(props)};
+    ${columnControlsDecoration()};
+    ${rowControlsWrapperDotStyle()};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -590,7 +581,6 @@ export const tableStyles = (
         position: relative;
 
         ${InsertMarker(
-          props,
           `
           left: -11px;
           top: 9px;
@@ -611,10 +601,10 @@ export const tableStyles = (
       top: 0;
       width: ${tableToolbarSize + 1}px;
       height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableHeaderCellBackgroundColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -622,8 +612,8 @@ export const tableStyles = (
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -638,15 +628,15 @@ export const tableStyles = (
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor(props)};
-      background: ${tableToolbarDeleteColor(props)};
+      border-color: ${tableBorderDeleteColor};
+      background: ${tableToolbarDeleteColor};
     }
 
     /* Row controls */
@@ -657,7 +647,6 @@ export const tableStyles = (
       position: relative;
 
       ${InsertMarker(
-        props,
         `
         bottom: -1px;
         left: -11px;
@@ -682,9 +671,8 @@ export const tableStyles = (
       }
 
       ${HeaderButton(
-        props,
         `
-        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -835,11 +823,11 @@ export const tableStyles = (
       }
     }
 
-    ${floatingColumnControls(props)}
+    ${floatingColumnControls()}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover(props)}
-      ${HeaderButtonDanger(props)}
+      ${HeaderButtonHover()}
+      ${HeaderButtonDanger()}
     }
 
     /* Numbered column */
@@ -857,23 +845,23 @@ export const tableStyles = (
     }
 
     .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       box-sizing: border-box;
       margin-top: -1px;
       padding-bottom: 2px;
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableHeaderCellBackgroundColor(props)};
-      color: ${tableTextColor(props)};
-      border-color: ${tableBorderColor(props)};
+      background-color: ${tableHeaderCellBackgroundColor};
+      color: ${tableTextColor};
+      border-color: ${tableBorderColor};
 
       :first-child:not(style),
       style:first-child + * {
         margin-top: 0;
       }
       :last-child {
-        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-bottom: 1px solid ${tableBorderColor};
       }
     }
 
@@ -908,9 +896,9 @@ export const tableStyles = (
         }
 
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-          border-color: ${tableBorderSelectedColor(props)};
-          background-color: ${tableToolbarSelectedColor(props)};
+          border-bottom: 1px solid ${tableBorderSelectedColor};
+          border-color: ${tableBorderSelectedColor};
+          background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
           color: ${token('color.text.selected', N0)};
@@ -922,16 +910,16 @@ export const tableStyles = (
         cursor: pointer;
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
-        border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-        border-color: ${tableBorderSelectedColor(props)};
-        background-color: ${tableToolbarSelectedColor(props)};
+        border-bottom: 1px solid ${tableBorderSelectedColor};
+        border-color: ${tableBorderSelectedColor};
+        background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
         color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+        background-color: ${tableToolbarDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
         color: ${token('color.text.danger', R500)};
         position: relative;
@@ -992,15 +980,15 @@ export const tableStyles = (
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {
-        border: 1px solid ${tableBorderSelectedColor(props)};
+        border: 1px solid ${tableBorderSelectedColor};
       }
       .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor(props)};
+        background: ${tableCellSelectedColor};
         z-index: ${akEditorSmallZIndex};
       }
       th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
         td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor(props)};
+        background: ${tableCellDeleteColor};
         z-index: ${akEditorUnitZIndex * 100};
       }
       // ED-15246: Trello card is visible through a border of a table border
@@ -1014,7 +1002,7 @@ export const tableStyles = (
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor(props)};
+          border: 1px solid ${tableBorderSelectedColor};
           content: '';
           position: absolute;
           left: -1px;
@@ -1025,12 +1013,12 @@ export const tableStyles = (
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
 
         &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

package/src/ui/consts.ts

@@ -4,22 +4,17 @@ import {
 } from '@atlaskit/editor-common/styles';
 import {
   akEditorTableBorder,
-  akEditorTableBorderDark,
   akEditorTableBorderSelected,
   akEditorTableCellBlanketDeleted,
   akEditorTableCellBlanketSelected,
   akEditorTableHeaderCellBackground,
-  akEditorTableHeaderCellBackgroundDark,
   akEditorTableToolbar,
-  akEditorTableToolbarDark,
   akEditorTableToolbarSize,
   akEditorUnitZIndex,
   akRichMediaResizeZIndex,
 } from '@atlaskit/editor-shared-styles';
 import {
   B200,
-  DN30,
-  DN400,
   N0,
   N20,
   N200,
@@ -29,8 +24,6 @@ import {
   R400,
   R75,
 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
 import { token } from '@atlaskit/tokens';
 
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
@@ -40,80 +33,66 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
  */
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
-export const tableCellBackgroundColor = themed({
-  light: token('elevation.surface', N0),
-  dark: token('elevation.surface', DN30),
-});
+export const tableCellBackgroundColor = token('elevation.surface', N0);
 
-export const tableHeaderCellBackgroundColor = themed({
-  light: token(
-    'color.background.accent.gray.subtlest',
-    akEditorTableHeaderCellBackground,
-  ),
-  dark: token(
-    'color.background.accent.gray.subtlest',
-    akEditorTableHeaderCellBackgroundDark,
-  ),
-});
+export const tableHeaderCellBackgroundColor = token(
+  'color.background.accent.gray.subtlest',
+  akEditorTableHeaderCellBackground,
+);
 
-export const tableToolbarColor = themed({
-  light: token('color.background.neutral.subtle', akEditorTableToolbar),
-  dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
-});
-export const tableTextColor = themed({
-  light: token('color.text.subtlest', N200),
-  dark: token('color.text.subtlest', DN400),
-});
-export const tableBorderColor = themed({
-  light: token('color.background.accent.gray.subtler', akEditorTableBorder),
-  dark: token('color.background.accent.gray.subtler', akEditorTableBorderDark),
-});
+export const tableToolbarColor = token(
+  'color.background.neutral.subtle',
+  akEditorTableToolbar,
+);
+export const tableTextColor = token('color.text.subtlest', N200);
+export const tableBorderColor = token(
+  'color.background.accent.gray.subtler',
+  akEditorTableBorder,
+);
 export const tableFloatingControlsColor = token(
   'color.background.neutral',
   N20,
 );
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-export const tableCellSelectedColor = themed({
-  light: token('color.blanket.selected', akEditorTableCellBlanketSelected),
-  dark: token('color.blanket.selected', akEditorTableCellBlanketSelected),
-});
-export const tableToolbarSelectedColor = themed({
-  light: token('color.background.selected.pressed', B200),
-  dark: token('color.background.selected.pressed', B200),
-});
-export const tableBorderSelectedColor = themed({
-  light: token('color.border.focused', akEditorTableBorderSelected),
-  dark: token('color.border.focused', akEditorTableBorderSelected),
-});
-export const tableCellSelectedDeleteIconColor = themed({
-  light: token('color.icon.subtle', N300),
-  dark: token('color.icon.subtle', N300),
-});
-export const tableCellSelectedDeleteIconBackground = themed({
-  light: token('color.background.accent.gray.subtlest', N20A),
-  dark: token('color.background.accent.gray.subtlest', N20A),
-});
-export const tableCellDeleteColor = themed({
-  light: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
-  dark: token('color.blanket.danger', akEditorTableCellBlanketDeleted),
-});
+export const tableCellSelectedColor = token(
+  'color.blanket.selected',
+  akEditorTableCellBlanketSelected,
+);
+export const tableToolbarSelectedColor = token(
+  'color.background.selected.pressed',
+  B200,
+);
+export const tableBorderSelectedColor = token(
+  'color.border.focused',
+  akEditorTableBorderSelected,
+);
+export const tableCellSelectedDeleteIconColor = token(
+  'color.icon.subtle',
+  N300,
+);
+export const tableCellSelectedDeleteIconBackground = token(
+  'color.background.accent.gray.subtlest',
+  N20A,
+);
+export const tableCellDeleteColor = token(
+  'color.blanket.danger',
+  akEditorTableCellBlanketDeleted,
+);
 
-export const tableBorderDeleteColor = themed({
-  light: token('color.border.danger', R400),
-  dark: token('color.border.danger', R400),
-});
-export const tableToolbarDeleteColor = themed({
-  light: token('color.background.danger.pressed', R75),
-  dark: token('color.background.danger.pressed', R75),
-});
-export const tableCellHoverDeleteIconColor = themed({
-  light: token('color.icon.inverse', 'white'),
-  dark: token('color.icon.inverse', 'white'),
-});
-export const tableCellHoverDeleteIconBackground = themed({
-  light: token('color.background.danger.bold', R300),
-  dark: token('color.background.danger.bold', R300),
-});
+export const tableBorderDeleteColor = token('color.border.danger', R400);
+export const tableToolbarDeleteColor = token(
+  'color.background.danger.pressed',
+  R75,
+);
+export const tableCellHoverDeleteIconColor = token(
+  'color.icon.inverse',
+  'white',
+);
+export const tableCellHoverDeleteIconBackground = token(
+  'color.background.danger.bold',
+  R300,
+);
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/src/ui/icons/MergeCellsIcon.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+export const MergeCellsIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M10 19C10.5523 19 11 18.5523 11 18C11 17.4477 10.5523 17 10 17H6V7L10 7C10.5523 7 11 6.55228 11 6C11 5.44771 10.5523 5 10 5H6C4.89543 5 4 5.89543 4 7V17C4 18.1046 4.89543 19 6 19H10ZM14 5C13.4477 5 13 5.44772 13 6C13 6.55228 13.4477 7 14 7H18V17L14 17C13.4477 17 13 17.4477 13 18C13 18.5523 13.4477 19 14 19H18C19.1046 19 20 18.1046 20 17V7C20 5.89543 19.1046 5 18 5H14Z"
+      fill="currentColor"
+    />
+    <path
+      d="M15.75 10L13.75 12L15.75 14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M8.25 14L10.25 12L8.25 10"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/ui/icons/SplitCellIcon.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+export const SplitCellIcon = () => (
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M19 18L14 18L14 6L19 6"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M5 6L10 6L9.99999 18L5 18"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M7 10L5 12L7 14"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+    <path
+      d="M17 14L19 12L17 10"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);

package/src/ui/icons/index.ts

@@ -2,6 +2,8 @@ export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
 export { MinimisedHandleIcon } from './MinimisedHandle';
+export { MergeCellsIcon } from './MergeCellsIcon';
+export { SplitCellIcon } from './SplitCellIcon';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';