@atlaskit/editor-plugin-table 5.6.6 → 5.7.0

package/dist/es2019/ui/common-styles.js

@@ -114,14 +114,14 @@ const breakoutWidthStyling = () => {
     }
   `;
 };
-const tableBorderStyles = props => {
+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 => {
+const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -131,7 +131,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
 
       .${ClassName.TABLE_STICKY}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor(props)};
+        border-left: 1px solid ${tableBorderColor};
       }
 
       .${ClassName.TABLE_STICKY}
@@ -152,7 +152,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
     `;
   }
 };
-const tableStickyHeaderFirefoxFixStyle = props => {
+const tableStickyHeaderFirefoxFixStyle = () => {
   /*
     This is MAGIC!
     This fixes a bug which occurs in firefox when the first row becomes sticky.
@@ -211,13 +211,13 @@ export const tableStyles = props => css`
   }
 
   .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} {
@@ -231,15 +231,15 @@ export const tableStyles = props => css`
       }
 
       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;
@@ -252,19 +252,19 @@ export const tableStyles = props => css`
     }
 
     .${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 */
@@ -297,9 +297,9 @@ export const tableStyles = props => css`
       width: ${tableToolbarSize}px;
     }
 
-    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
+    ${tableStickyHeaderColumnControlsDecorationsStyle()}
 
-    ${tableStickyHeaderFirefoxFixStyle(props)}
+    ${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -358,7 +358,7 @@ export const tableStyles = props => css`
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor(props)};
+        ${tableBorderColor};
       margin-right: -1px;
     }
 
@@ -427,7 +427,7 @@ export const tableStyles = props => css`
     }
 
     ${sentinelStyles}
-    ${OverflowShadow(props)}
+    ${OverflowShadow()}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -482,8 +482,8 @@ export const tableStyles = props => css`
     /* Breakout only works on top level unless wrapped in fragment mark */
     ${breakoutWidthStyling()}
 
-    ${columnControlsDecoration(props)};
-    ${rowControlsWrapperDotStyle(props)};
+    ${columnControlsDecoration()};
+    ${rowControlsWrapperDotStyle()};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -494,7 +494,7 @@ export const tableStyles = props => css`
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         position: relative;
 
-        ${InsertMarker(props, `
+        ${InsertMarker(`
           left: -11px;
           top: 9px;
         `)};
@@ -513,10 +513,10 @@ export const tableStyles = props => css`
       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 {
@@ -524,8 +524,8 @@ export const tableStyles = props => css`
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -538,15 +538,15 @@ export const tableStyles = props => css`
     }
 
     :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 */
@@ -556,7 +556,7 @@ export const tableStyles = props => css`
       display: none;
       position: relative;
 
-      ${InsertMarker(props, `
+      ${InsertMarker(`
         bottom: -1px;
         left: -11px;
       `)};
@@ -578,8 +578,8 @@ export const tableStyles = props => css`
         z-index: ${akEditorUnitZIndex};
       }
 
-      ${HeaderButton(props, `
-        border-bottom: 1px solid ${tableBorderColor(props)};
+      ${HeaderButton(`
+        border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -720,11 +720,11 @@ export const tableStyles = props => css`
       }
     }
 
-    ${floatingColumnControls(props)}
+    ${floatingColumnControls()}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover(props)}
-      ${HeaderButtonDanger(props)}
+      ${HeaderButtonHover()}
+      ${HeaderButtonDanger()}
     }
 
     /* Numbered column */
@@ -738,23 +738,23 @@ export const tableStyles = props => css`
     }
 
     .${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};
       }
     }
 
@@ -787,9 +787,9 @@ export const tableStyles = props => css`
         }
 
         .${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: ${`var(--ds-text-selected, ${N0})`};
@@ -801,16 +801,16 @@ export const tableStyles = props => css`
         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: ${`var(--ds-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: ${`var(--ds-text-danger, ${R500})`};
         position: relative;
@@ -871,15 +871,15 @@ export const tableStyles = props => css`
         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
@@ -893,7 +893,7 @@ export const tableStyles = props => css`
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor(props)};
+          border: 1px solid ${tableBorderSelectedColor};
           content: '';
           position: absolute;
           left: -1px;
@@ -904,12 +904,12 @@ export const tableStyles = props => css`
           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/dist/es2019/ui/consts.js

@@ -1,8 +1,6 @@
 import { tableCellBorderWidth, tableMarginTop } 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, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { themed } from '@atlaskit/theme/components';
+import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
 import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
 
 /**
@@ -10,68 +8,24 @@ import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
  */
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
-export const tableCellBackgroundColor = themed({
-  light: `var(--ds-surface, ${N0})`,
-  dark: `var(--ds-surface, ${DN30})`
-});
-export const tableHeaderCellBackgroundColor = themed({
-  light: `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`,
-  dark: `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackgroundDark})`
-});
-export const tableToolbarColor = themed({
-  light: `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`,
-  dark: `var(--ds-background-neutral-subtle, ${akEditorTableToolbarDark})`
-});
-export const tableTextColor = themed({
-  light: `var(--ds-text-subtlest, ${N200})`,
-  dark: `var(--ds-text-subtlest, ${DN400})`
-});
-export const tableBorderColor = themed({
-  light: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`,
-  dark: `var(--ds-background-accent-gray-subtler, ${akEditorTableBorderDark})`
-});
+export const tableCellBackgroundColor = `var(--ds-surface, ${N0})`;
+export const tableHeaderCellBackgroundColor = `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`;
+export const tableToolbarColor = `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`;
+export const tableTextColor = `var(--ds-text-subtlest, ${N200})`;
+export const tableBorderColor = `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`;
 export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
+
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
-export const tableCellSelectedColor = themed({
-  light: `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`,
-  dark: `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`
-});
-export const tableToolbarSelectedColor = themed({
-  light: `var(--ds-background-selected-pressed, ${B200})`,
-  dark: `var(--ds-background-selected-pressed, ${B200})`
-});
-export const tableBorderSelectedColor = themed({
-  light: `var(--ds-border-focused, ${akEditorTableBorderSelected})`,
-  dark: `var(--ds-border-focused, ${akEditorTableBorderSelected})`
-});
-export const tableCellSelectedDeleteIconColor = themed({
-  light: `var(--ds-icon-subtle, ${N300})`,
-  dark: `var(--ds-icon-subtle, ${N300})`
-});
-export const tableCellSelectedDeleteIconBackground = themed({
-  light: `var(--ds-background-accent-gray-subtlest, ${N20A})`,
-  dark: `var(--ds-background-accent-gray-subtlest, ${N20A})`
-});
-export const tableCellDeleteColor = themed({
-  light: `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`,
-  dark: `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`
-});
-export const tableBorderDeleteColor = themed({
-  light: `var(--ds-border-danger, ${R400})`,
-  dark: `var(--ds-border-danger, ${R400})`
-});
-export const tableToolbarDeleteColor = themed({
-  light: `var(--ds-background-danger-pressed, ${R75})`,
-  dark: `var(--ds-background-danger-pressed, ${R75})`
-});
-export const tableCellHoverDeleteIconColor = themed({
-  light: "var(--ds-icon-inverse, white)",
-  dark: "var(--ds-icon-inverse, white)"
-});
-export const tableCellHoverDeleteIconBackground = themed({
-  light: `var(--ds-background-danger-bold, ${R300})`,
-  dark: `var(--ds-background-danger-bold, ${R300})`
-});
+export const tableCellSelectedColor = `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`;
+export const tableToolbarSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
+export const tableBorderSelectedColor = `var(--ds-border-focused, ${akEditorTableBorderSelected})`;
+export const tableCellSelectedDeleteIconColor = `var(--ds-icon-subtle, ${N300})`;
+export const tableCellSelectedDeleteIconBackground = `var(--ds-background-accent-gray-subtlest, ${N20A})`;
+export const tableCellDeleteColor = `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`;
+export const tableBorderDeleteColor = `var(--ds-border-danger, ${R400})`;
+export const tableToolbarDeleteColor = `var(--ds-background-danger-pressed, ${R75})`;
+export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
+export const tableCellHoverDeleteIconBackground = `var(--ds-background-danger-bold, ${R300})`;
 export const tableBorderRadiusSize = 3;
 export const tablePadding = 8;
 export const tableScrollbarOffset = 15;

package/dist/es2019/ui/icons/MergeCellsIcon.js

@@ -0,0 +1,25 @@
+import React from 'react';
+export const MergeCellsIcon = () => /*#__PURE__*/React.createElement("svg", {
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("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"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M15.75 10L13.75 12L15.75 14",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M8.25 14L10.25 12L8.25 10",
+  stroke: "currentColor",
+  strokeWidth: "1.5",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+}));

package/dist/es2019/ui/icons/SplitCellIcon.js

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

package/dist/es2019/ui/icons/index.js

@@ -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';