@atlaskit/editor-plugin-table 7.6.14 → 7.7.0

package/dist/cjs/ui/ColumnResizeWidget/index.js

@@ -8,6 +8,7 @@ exports.ColumnResizeWidget = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _types = require("../../types");
@@ -27,7 +28,10 @@ var ColumnResizeWidget = exports.ColumnResizeWidget = function ColumnResizeWidge
     });
   }
   return (0, _react.jsx)(_tooltip.default, {
-    content: formatMessage(_messages.tableMessages.adjustColumns),
+    content: (0, _react.jsx)(_keymaps.ToolTipContent, {
+      description: formatMessage(_messages.tableMessages.adjustColumns),
+      keymap: _keymaps.startColumnResizing
+    }),
     hideTooltipOnClick: true,
     hideTooltipOnMouseDown: true,
     position: "mouse",

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

@@ -17,7 +17,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _types = require("../types");
 var _consts = require("./consts");
 var _uiStyles = require("./ui-styles");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 var cornerControlHeight = _consts.tableToolbarSize + 1;
 
@@ -65,25 +65,18 @@ var tableStickyHeaderFirefoxFixStyle = function tableStickyHeaderFirefoxFixStyle
     return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n      .", " > tbody::before {\n        content: '';\n      }\n    "])), _types.TableCssClassName.TABLE_STICKY);
   }
 };
-var tableWrapperStyles = function tableWrapperStyles() {
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width')) {
-    return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        padding-bottom: 0px;\n        /* fixes gap cursor height */\n        overflow: auto;\n        overflow-y: hidden;\n        position: relative;\n\n        > table[data-number-column='true'] {\n          width: calc(100% - 1px);\n        }\n      }\n    "])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
-  } else {
-    return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n      .", " {\n        padding-right: ", "px;\n        margin-right: -", "px;\n        padding-bottom: 0px;\n        /* fixes gap cursor height */\n        overflow: auto;\n        overflow-y: hidden;\n        position: relative;\n      }\n    "])), _types.TableCssClassName.TABLE_NODE_WRAPPER, insertColumnButtonOffset, insertColumnButtonOffset);
-  }
-};
 
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 var baseTableStyles = exports.baseTableStyles = function baseTableStyles(props) {
   var _props$featureFlags, _props$featureFlags2, _props$featureFlags3, _props$featureFlags4;
-  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  .", " {\n    margin-bottom: 0;\n  }\n\n  .", " {\n    td.", ", th.", " {\n      position: relative;\n      overflow: visible;\n    }\n\n    td.", " {\n      background-color: ", ";\n\n      // ED-15246: Trello card is visible through a border of a table border\n      // This fixes a border issue caused by relative positioned table cells\n      &::after {\n        height: 100%;\n        content: '';\n        border-left: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        position: absolute;\n        right: 0px;\n        top: 0px;\n        bottom: 0;\n        width: 100%;\n        display: inline-block;\n        pointer-events: none;\n      }\n    }\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n    margin-top: ", "px;\n    width: ", "px;\n\n    position: fixed !important;\n    z-index: ", " !important;\n    box-shadow: 0px -", "px ", ";\n    border-right: 0 none;\n    /* top set by NumberColumn component */\n  }\n\n  .", " .", ".sticky {\n    position: fixed !important;\n    /* needs to be above row controls */\n    z-index: ", " !important;\n    background: ", ";\n\n    width: ", "px;\n    height: ", "px;\n  }\n\n  .", ".sticky .", " {\n    border-bottom: 0px none;\n    border-right: 0px none;\n\n    height: ", "px;\n    width: ", "px;\n  }\n\n  ", "\n\n  ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n    position: fixed !important;\n    z-index: ", " !important;\n    display: flex;\n    border-left: ", "px solid\n      ", ";\n    margin-left: -", "px;\n  }\n\n  .", " col:first-of-type {\n    /* moving rows out of a table layout does weird things in Chrome */\n    border-right: 1px solid ", ";\n  }\n\n  tr.sticky {\n    padding-top: ", "px;\n    position: fixed;\n    display: grid;\n\n    /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n    z-index: ", ";\n\n    overflow-y: visible;\n    overflow-x: hidden;\n\n    grid-auto-flow: column;\n\n    /* background for where controls apply */\n    background: ", ";\n    box-sizing: content-box;\n\n    margin-top: 2px;\n\n    box-shadow: 0 6px 4px -4px ", ";\n    margin-left: -1px;\n\n    &.no-pointer-events {\n      pointer-events: none;\n    }\n  }\n\n  .", " .", " {\n    left: unset;\n    position: fixed;\n    /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n    z-index: ", ";\n  }\n\n  .", ".", "\n    .", " {\n    padding-bottom: ", "px;\n  }\n\n  tr.sticky th {\n    border-bottom: ", "px solid ", ";\n    margin-right: -1px;\n  }\n\n  .", " tr.sticky > th:last-child {\n    border-right-width: 1px;\n  }\n\n  /* add left edge for first cell */\n  .", " tr.sticky > th:first-of-type {\n    margin-left: 0px;\n  }\n\n  /* add a little bit so the scroll lines up with the table */\n  .", " tr.sticky::after {\n    content: ' ';\n    width: ", "px;\n  }\n\n  /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n  .", " .sticky + tr {\n    min-height: 0px;\n  }\n\n  /* move resize line a little in sticky bar */\n  .", ".", " {\n    tr.sticky\n      td.", ",\n      tr.sticky\n      th.", " {\n      .", "::after {\n        right: ", "px;\n      }\n    }\n\n    /* when selected put it back to normal -- :not selector would be nicer */\n    tr.sticky\n      td.", ".", ",\n      tr.sticky\n      th.", ".", " {\n      .", "::after {\n        right: ", "px;\n      }\n    }\n  }\n\n  tr.sticky .", ", tr.sticky .", " {\n    z-index: 1;\n  }\n\n  .", " tr.sticky {\n    padding-top: ", "px;\n  }\n\n  .", ".", "\n    .", "\n    .", ":first-of-type {\n    margin-top: ", "px;\n  }\n\n  .", ".sticky {\n    border-top: ", "px solid\n      ", ";\n  }\n\n  ", "\n  ", "\n    ", "\n\n    .", " .", " {\n    height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n  }\n\n  .less-padding {\n    padding: 0 ", "px;\n\n    .", ",\n      .", " {\n      padding: 0 ", "px;\n\n      // https://product-fabric.atlassian.net/browse/ED-16386\n      // Fixes issue where the extra padding that is added here throws off the position\n      // of the rows control dot\n      &::after {\n        right: 6px !important;\n      }\n    }\n\n    .", " {\n      padding: 0 ", "px;\n    }\n\n    &.", "[data-number-column='true'] {\n      padding-left: ", "px;\n    }\n    .", ", .", " {\n      width: ", "px;\n    }\n\n    .", " {\n      left: 6px;\n    }\n\n    .", " {\n      left: calc(100% - 6px);\n    }\n  }\n\n  > .", " {\n    /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n  }\n\n  /* Breakout only works on top level unless wrapped in fragment mark */\n  ", "\n\n  ", ";\n  ", ";\n\n  /* Corner controls */\n  .", " {\n    width: ", "px;\n    height: ", "px;\n    display: none;\n\n    .", " {\n      position: relative;\n\n      ", ";\n    }\n  }\n\n  .", ".sticky {\n    .", " {\n      /* sticky row insert dot overlaps other row insert and messes things up */\n      display: none !important;\n    }\n  }\n\n  .", " {\n    position: absolute;\n    top: 0;\n    width: ", "px;\n    height: ", "px;\n    border: 1px solid ", ";\n    border-radius: 0;\n    border-top-left-radius: ", "px;\n    background: ", ";\n    box-sizing: border-box;\n    padding: 0;\n    :focus {\n      outline: none;\n    }\n  }\n  .active .", " {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  .", "[data-number-column='true'] {\n    .", ", .", " {\n      width: ", "px;\n    }\n    .", " .", " {\n      border-right-width: 0;\n    }\n  }\n\n  :not(.", ") .", ":hover {\n    border-color: ", ";\n    background: ", ";\n    cursor: pointer;\n  }\n\n  :not(.", ")\n    .", ".", " {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  /* Row controls */\n  .", " {\n    width: ", "px;\n    box-sizing: border-box;\n    display: none;\n    position: relative;\n\n    ", ";\n\n    .", " {\n      display: flex;\n      flex-direction: column;\n    }\n    .", ":last-child > button {\n      border-bottom-left-radius: ", "px;\n    }\n    .", " {\n      position: relative;\n      margin-top: -1px;\n    }\n    .", ":hover,\n      .", ".active,\n      .", ":hover {\n      z-index: ", ";\n    }\n\n    ", "\n  }\n\n  .", " {\n    display: grid;\n    align-items: center;\n    position: absolute;\n    z-index: ", ";\n\n    .", " {\n      position: absolute;\n      align-self: end;\n      height: 100%;\n      width: 18px;\n    }\n\n    .", " {\n      position: absolute;\n      bottom: -3px;\n      left: 2px;\n      background-color: ", ";\n      height: 4px;\n      width: 4px;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n  }\n\n  .", " {\n    .", " {\n      height: 24px;\n      position: absolute;\n      top: ", ";\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      height: 24px;\n      width: 100%;\n    }\n\n    .", " {\n      background-color: ", ";\n      height: 4px;\n      width: 4px;\n      border-radius: 50%;\n      position: absolute;\n      right: -2px;\n    }\n  }\n\n  .", " {\n    background: none;\n    border: none;\n    outline: none;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  .", " {\n    cursor: grab;\n    pointer-events: auto;\n\n    line-height: 0;\n    padding: 0;\n    border-radius: 6px;\n    width: max-content;\n    border: 2px solid ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    outline: none;\n\n    &.placeholder {\n      background-color: transparent;\n      border: 2px solid transparent;\n    }\n\n    &.", " {\n      cursor: pointer;\n      & svg {\n        & > rect.", " {\n          fill: ", ";\n        }\n        & > rect {\n          fill: ", ";\n        }\n        & > g > rect {\n          fill: ", ";\n        }\n      }\n    }\n\n    &:not(.", ") {\n      & svg {\n        rect {\n          fill: ", ";\n        }\n        g {\n          fill: ", ";\n        }\n      }\n\n      &:hover {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &:active {\n        cursor: grabbing;\n      }\n\n      &.selected {\n        :focus {\n          outline: 2px solid ", ";\n          outline-offset: 1px;\n        }\n\n        &:active {\n          outline: none;\n        }\n\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.danger {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n\n  ", "\n\n  :not(.", ") .", " {\n    ", "\n    ", "\n  }\n\n  /* Numbered column */\n  .", " {\n    position: relative;\n    float: right;\n    margin-left: ", "px;\n    top: ", "px;\n    width: ", "px;\n    box-sizing: border-box;\n  }\n\n  .", " {\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    margin-top: -1px;\n    padding-bottom: 2px;\n    padding: 10px 2px;\n    text-align: center;\n    font-size: ", ";\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n\n    :first-child:not(style),\n    style:first-child + * {\n      margin-top: 0;\n    }\n    :last-child {\n      border-bottom: 1px solid ", ";\n    }\n  }\n\n  // add a background above the first numbered column cell when sticky header is engaged\n  // which hides the table when scrolling\n  .", " {\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n  }\n\n  .", " {\n    .", ", .", " {\n      display: block;\n    }\n    .", " {\n      padding-left: ", "px;\n\n      .", " {\n        border-left: 0 none;\n      }\n\n      .", ".active {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n    }\n  }\n  :not(.", ") .", " {\n    .", ":not(.", ") {\n      cursor: pointer;\n    }\n    .", ":not(.", "):hover {\n      border-bottom: 1px solid ", ";\n      border-color: ", ";\n      background-color: ", ";\n      position: relative;\n      z-index: ", ";\n      color: ", ";\n    }\n    .", ".", " {\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-left: 0;\n      color: ", ";\n      position: relative;\n      z-index: ", ";\n    }\n  }\n\n  /* Table */\n  .", " > table {\n    table-layout: fixed;\n    white-space: normal;\n    border-top: none;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    // Allows better positioning for the shadow sentinels - ED-16668\n    position: relative;\n\n    > tbody > tr {\n      white-space: pre-wrap;\n    }\n\n    .", " + * {\n      margin-top: 0;\n    }\n\n    /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n    th.", " > .fabric-editor-block-mark {\n      > h1:first-of-type,\n      > h2:first-of-type,\n      > h3:first-of-type,\n      > h4:first-of-type,\n      > h5:first-of-type,\n      > h6:first-of-type {\n        margin-top: 0;\n      }\n    }\n\n    .", ", .", " {\n      position: relative;\n    }\n    /* Give selected cells a blue overlay */\n    .", "::after,\n      .", "::after {\n      z-index: ", ";\n      position: absolute;\n      content: '';\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      width: 100%;\n      pointer-events: none;\n    }\n    .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n      z-index: ", ";\n    }\n    th.", "::after,\n      td.", "::after {\n      background: ", ";\n      z-index: ", ";\n    }\n    // ED-15246: Trello card is visible through a border of a table border\n    /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n    td.", ",\n      td.", ",\n      th.", ".", ",\n      th.", ".", " {\n      &::after {\n        height: 100%;\n        width: 100%;\n        border: 1px solid ", ";\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        bottom: 0;\n        z-index: ", ";\n        display: inline-block;\n        pointer-events: none;\n      }\n      &.", "::after {\n        ", ";\n        z-index: ", ";\n      }\n\n      &.", ".", "::after {\n        ", ";\n        z-index: ", ";\n      }\n    }\n  }\n\n  // override for DnD controls\n  .", " {\n    position: absolute;\n    margin-top: ", "px;\n    left: -", "px;\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n    top: ", "px;\n    left: -", "px;\n  }\n\n  .", ".", ",\n    .", ".", " {\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    top: ", "px;\n  }\n\n  .", " .", " {\n    position: fixed;\n    /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n    z-index: ", ";\n  }\n\n  ", "\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts.tableCellBackgroundColor, _consts.tableBorderColor, _consts.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, _consts.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, _consts.tableBorderColor, _consts.tableBorderRadiusSize, _consts.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1 : _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? _editorSharedStyles.akEditorTableToolbarSize : _editorSharedStyles.akEditorTableToolbarSize - 1, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.tableHeaderCellBackgroundColor, _consts.tableTextColor, _consts.tableBorderColor, _consts.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? 0 : 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts.tableToolbarSize + 1, _consts.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts.tableToolbarSize, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, tableWrapperStyles());
+  return (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n\n  .", " {\n    margin-bottom: 0;\n  }\n\n  .", " {\n    td.", ", th.", " {\n      position: relative;\n      overflow: visible;\n    }\n\n    td.", " {\n      background-color: ", ";\n\n      // ED-15246: Trello card is visible through a border of a table border\n      // This fixes a border issue caused by relative positioned table cells\n      &::after {\n        height: 100%;\n        content: '';\n        border-left: 1px solid ", ";\n        border-bottom: 1px solid ", ";\n        position: absolute;\n        right: 0px;\n        top: 0px;\n        bottom: 0;\n        width: 100%;\n        display: inline-block;\n        pointer-events: none;\n      }\n    }\n  }\n\n  .", " {\n    ", "\n  }\n\n  .", " {\n    ", "\n  }\n\n  ", "\n\n  ", "\n\n    /* Delete button */\n    ", "\n    /* Ends Delete button */\n\n    /* sticky styles */\n    .", " .", " .", ":first-of-type {\n    margin-top: ", "px;\n    width: ", "px;\n\n    position: fixed !important;\n    z-index: ", " !important;\n    box-shadow: 0px -", "px ", ";\n    border-right: 0 none;\n    /* top set by NumberColumn component */\n  }\n\n  .", " .", ".sticky {\n    position: fixed !important;\n    /* needs to be above row controls */\n    z-index: ", " !important;\n    background: ", ";\n\n    width: ", "px;\n    height: ", "px;\n  }\n\n  .", ".sticky .", " {\n    border-bottom: 0px none;\n    border-right: 0px none;\n\n    height: ", "px;\n    width: ", "px;\n  }\n\n  ", "\n\n  ", "\n\n    .", "\n      .", "\n      .", ".sticky {\n    position: fixed !important;\n    z-index: ", " !important;\n    display: flex;\n    border-left: ", "px solid\n      ", ";\n    margin-left: -", "px;\n  }\n\n  .", " col:first-of-type {\n    /* moving rows out of a table layout does weird things in Chrome */\n    border-right: 1px solid ", ";\n  }\n\n  tr.sticky {\n    padding-top: ", "px;\n    position: fixed;\n    display: grid;\n\n    /* to keep it above cell selection but below date and other nodes popups that are inside sticky header */\n    z-index: ", ";\n\n    overflow-y: visible;\n    overflow-x: hidden;\n\n    grid-auto-flow: column;\n\n    /* background for where controls apply */\n    background: ", ";\n    box-sizing: content-box;\n\n    margin-top: 2px;\n\n    box-shadow: 0 6px 4px -4px ", ";\n    margin-left: -1px;\n\n    &.no-pointer-events {\n      pointer-events: none;\n    }\n  }\n\n  .", " .", " {\n    left: unset;\n    position: fixed;\n    /* needs to be above sticky header row and below date and other nodes popups that are inside sticky header */\n    z-index: ", ";\n  }\n\n  .", ".", "\n    .", " {\n    padding-bottom: ", "px;\n  }\n\n  tr.sticky th {\n    border-bottom: ", "px solid ", ";\n    margin-right: -1px;\n  }\n\n  .", " tr.sticky > th:last-child {\n    border-right-width: 1px;\n  }\n\n  /* add left edge for first cell */\n  .", " tr.sticky > th:first-of-type {\n    margin-left: 0px;\n  }\n\n  /* add a little bit so the scroll lines up with the table */\n  .", " tr.sticky::after {\n    content: ' ';\n    width: ", "px;\n  }\n\n  /* To fix jumpiness caused in Chrome Browsers for sticky headers */\n  .", " .sticky + tr {\n    min-height: 0px;\n  }\n\n  /* move resize line a little in sticky bar */\n  .", ".", " {\n    tr.sticky\n      td.", ",\n      tr.sticky\n      th.", " {\n      .", "::after {\n        right: ", "px;\n      }\n    }\n\n    /* when selected put it back to normal -- :not selector would be nicer */\n    tr.sticky\n      td.", ".", ",\n      tr.sticky\n      th.", ".", " {\n      .", "::after {\n        right: ", "px;\n      }\n    }\n  }\n\n  tr.sticky .", ", tr.sticky .", " {\n    z-index: 1;\n  }\n\n  .", " tr.sticky {\n    padding-top: ", "px;\n  }\n\n  .", ".", "\n    .", "\n    .", ":first-of-type {\n    margin-top: ", "px;\n  }\n\n  .", ".sticky {\n    border-top: ", "px solid\n      ", ";\n  }\n\n  ", "\n  ", "\n    ", "\n\n    .", " .", " {\n    height: 0; // stop overflow flash & set correct height in update-overflow-shadows.ts\n  }\n\n  .less-padding {\n    padding: 0 ", "px;\n\n    .", ",\n      .", " {\n      padding: 0 ", "px;\n\n      // https://product-fabric.atlassian.net/browse/ED-16386\n      // Fixes issue where the extra padding that is added here throws off the position\n      // of the rows control dot\n      &::after {\n        right: 6px !important;\n      }\n    }\n\n    .", " {\n      padding: 0 ", "px;\n    }\n\n    &.", "[data-number-column='true'] {\n      padding-left: ", "px;\n    }\n    .", ", .", " {\n      width: ", "px;\n    }\n\n    .", " {\n      left: 6px;\n    }\n\n    .", " {\n      left: calc(100% - 6px);\n    }\n  }\n\n  > .", " {\n    /**\n       * Prevent margins collapsing, aids with placing the gap-cursor correctly\n       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing\n       *\n       * TODO: Enable this, many tests will fail!\n       * border-top: 1px solid transparent;\n       */\n  }\n\n  /* Breakout only works on top level unless wrapped in fragment mark */\n  ", "\n\n  ", ";\n  ", ";\n\n  /* Corner controls */\n  .", " {\n    width: ", "px;\n    height: ", "px;\n    display: none;\n\n    .", " {\n      position: relative;\n\n      ", ";\n    }\n  }\n\n  .", ".sticky {\n    .", " {\n      /* sticky row insert dot overlaps other row insert and messes things up */\n      display: none !important;\n    }\n  }\n\n  .", " {\n    position: absolute;\n    top: 0;\n    width: ", "px;\n    height: ", "px;\n    border: 1px solid ", ";\n    border-radius: 0;\n    border-top-left-radius: ", "px;\n    background: ", ";\n    box-sizing: border-box;\n    padding: 0;\n    :focus {\n      outline: none;\n    }\n  }\n  .active .", " {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  .", "[data-number-column='true'] {\n    .", ", .", " {\n      width: ", "px;\n    }\n    .", " .", " {\n      border-right-width: 0;\n    }\n  }\n\n  :not(.", ") .", ":hover {\n    border-color: ", ";\n    background: ", ";\n    cursor: pointer;\n  }\n\n  :not(.", ")\n    .", ".", " {\n    border-color: ", ";\n    background: ", ";\n  }\n\n  /* Row controls */\n  .", " {\n    width: ", "px;\n    box-sizing: border-box;\n    display: none;\n    position: relative;\n\n    ", ";\n\n    .", " {\n      display: flex;\n      flex-direction: column;\n    }\n    .", ":last-child > button {\n      border-bottom-left-radius: ", "px;\n    }\n    .", " {\n      position: relative;\n      margin-top: -1px;\n    }\n    .", ":hover,\n      .", ".active,\n      .", ":hover {\n      z-index: ", ";\n    }\n\n    ", "\n  }\n\n  .", " {\n    display: grid;\n    align-items: center;\n    position: absolute;\n    z-index: ", ";\n\n    .", " {\n      position: absolute;\n      align-self: end;\n      height: 100%;\n      width: 18px;\n    }\n\n    .", " {\n      position: absolute;\n      bottom: -3px;\n      left: 2px;\n      background-color: ", ";\n      height: 4px;\n      width: 4px;\n      border-radius: 50%;\n      pointer-events: none;\n    }\n  }\n\n  .", " {\n    .", " {\n      height: 24px;\n      position: absolute;\n      top: ", ";\n      z-index: ", ";\n    }\n\n    .", " {\n      position: absolute;\n      height: 24px;\n      width: 100%;\n    }\n\n    .", " {\n      background-color: ", ";\n      height: 4px;\n      width: 4px;\n      border-radius: 50%;\n      position: absolute;\n      right: -2px;\n    }\n  }\n\n  .", " {\n    background: none;\n    border: none;\n    outline: none;\n    position: absolute;\n    margin: 0;\n    padding: 0;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n\n    :focus {\n      outline: none;\n    }\n  }\n\n  .", " {\n    cursor: grab;\n    pointer-events: auto;\n\n    line-height: 0;\n    padding: 0;\n    border-radius: 6px;\n    width: max-content;\n    border: 2px solid ", ";\n\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    background: transparent;\n    outline: none;\n\n    &.placeholder {\n      background-color: transparent;\n      border: 2px solid transparent;\n    }\n\n    &.", " {\n      cursor: pointer;\n      & svg {\n        & > rect.", " {\n          fill: ", ";\n        }\n        & > rect {\n          fill: ", ";\n        }\n        & > g > rect {\n          fill: ", ";\n        }\n      }\n    }\n\n    &:not(.", ") {\n      & svg {\n        rect {\n          fill: ", ";\n        }\n        g {\n          fill: ", ";\n        }\n      }\n\n      &:hover {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &:active {\n        cursor: grabbing;\n      }\n\n      &.selected {\n        :focus {\n          outline: 2px solid ", ";\n          outline-offset: 1px;\n        }\n\n        &:active {\n          outline: none;\n        }\n\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n\n      &.danger {\n        svg {\n          rect {\n            fill: ", ";\n          }\n          g {\n            fill: ", ";\n          }\n        }\n      }\n    }\n  }\n\n  ", "\n\n  :not(.", ") .", " {\n    ", "\n    ", "\n  }\n\n  /* Numbered column */\n  .", " {\n    position: relative;\n    float: right;\n    margin-left: ", "px;\n    top: ", "px;\n    width: ", "px;\n    box-sizing: border-box;\n  }\n\n  .", " {\n    border: 1px solid ", ";\n    box-sizing: border-box;\n    margin-top: -1px;\n    padding-bottom: 2px;\n    padding: 10px 2px;\n    text-align: center;\n    font-size: ", ";\n    background-color: ", ";\n    color: ", ";\n    border-color: ", ";\n\n    :first-child:not(style),\n    style:first-child + * {\n      margin-top: 0;\n    }\n    :last-child {\n      border-bottom: 1px solid ", ";\n    }\n  }\n\n  // add a background above the first numbered column cell when sticky header is engaged\n  // which hides the table when scrolling\n  .", " {\n    .", ":first-of-type::after {\n      content: '';\n      display: block;\n      height: 33px;\n      width: 100%;\n      background-color: ", ";\n      position: absolute;\n\n      // the extra pixel is accounting for borders\n      top: -34px;\n      left: -1px;\n    }\n  }\n\n  .", " {\n    .", ", .", " {\n      display: block;\n    }\n    .", " {\n      padding-left: 0px;\n\n      .", " {\n        border-left: 0 none;\n      }\n\n      .", ".active {\n        border-bottom: 1px solid ", ";\n        border-color: ", ";\n        background-color: ", ";\n        position: relative;\n        z-index: ", ";\n        color: ", ";\n      }\n    }\n  }\n  :not(.", ") .", " {\n    .", ":not(.", ") {\n      cursor: pointer;\n    }\n    .", ":not(.", "):hover {\n      border-bottom: 1px solid ", ";\n      border-color: ", ";\n      background-color: ", ";\n      position: relative;\n      z-index: ", ";\n      color: ", ";\n    }\n    .", ".", " {\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-left: 0;\n      color: ", ";\n      position: relative;\n      z-index: ", ";\n    }\n  }\n\n  /* Table */\n  .", " > table {\n    table-layout: fixed;\n    white-space: normal;\n    border-top: none;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    // Allows better positioning for the shadow sentinels - ED-16668\n    position: relative;\n\n    > tbody > tr {\n      white-space: pre-wrap;\n    }\n\n    .", " + * {\n      margin-top: 0;\n    }\n\n    /*\n       * Headings have a top margin by default, but we don't want this on the\n       * first heading within table header cells.\n       *\n       * This specifically sets margin-top for the first heading within a header\n       * cell when center/right aligned.\n       */\n    th.", " > .fabric-editor-block-mark {\n      > h1:first-of-type,\n      > h2:first-of-type,\n      > h3:first-of-type,\n      > h4:first-of-type,\n      > h5:first-of-type,\n      > h6:first-of-type {\n        margin-top: 0;\n      }\n    }\n\n    .", ", .", " {\n      position: relative;\n    }\n    /* Give selected cells a blue overlay */\n    .", "::after,\n      .", "::after {\n      z-index: ", ";\n      position: absolute;\n      content: '';\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      width: 100%;\n      pointer-events: none;\n    }\n    .", " {\n      border: 1px solid ", ";\n    }\n    .", "::after {\n      background: ", ";\n      z-index: ", ";\n    }\n    th.", "::after,\n      td.", "::after {\n      background: ", ";\n      z-index: ", ";\n    }\n    // ED-15246: Trello card is visible through a border of a table border\n    /* ED-19064: To fix when enable header column in the table,\n       and selection the header column, the right border is not tableBorderSelectedColor\n       when deleting the header column, the right border is not tableToolbarDeleteColor */\n    td.", ",\n      td.", ",\n      th.", ".", ",\n      th.", ".", " {\n      &::after {\n        height: 100%;\n        width: 100%;\n        border: 1px solid ", ";\n        content: '';\n        position: absolute;\n        left: -1px;\n        top: -1px;\n        bottom: 0;\n        z-index: ", ";\n        display: inline-block;\n        pointer-events: none;\n      }\n      &.", "::after {\n        ", ";\n        z-index: ", ";\n      }\n\n      &.", ".", "::after {\n        ", ";\n        z-index: ", ";\n      }\n    }\n  }\n\n  // override for DnD controls\n  .", " {\n    position: absolute;\n    margin-top: ", "px;\n    left: -", "px;\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    /* top of corner control is table margin top - corner control height + 1 pixel of table border. */\n    top: ", "px;\n    left: -", "px;\n  }\n\n  .", ".", ",\n    .", ".", " {\n    z-index: ", ";\n  }\n\n  .", " {\n    position: absolute;\n    top: ", "px;\n  }\n\n  .", " .", " {\n    position: fixed;\n    /* higher zIndex than sticky header which is akEditorTableCellOnStickyHeaderZIndex - 5 */\n    z-index: ", ";\n  }\n\n  .", " {\n    padding-bottom: 0px;\n    /* fixes gap cursor height */\n    overflow: auto;\n    overflow-y: hidden;\n    position: relative;\n\n    > table[data-number-column='true'] {\n      width: calc(100% - 1px);\n    }\n  }\n"])), (0, _styles.tableSharedStyle)(), (0, _uiStyles.columnControlsLineMarker)(), (0, _uiStyles.hoveredDeleteButton)(), (0, _uiStyles.hoveredCell)(), _uiStyles.hoveredWarningCell, ((_props$featureFlags = props.featureFlags) === null || _props$featureFlags === void 0 ? void 0 : _props$featureFlags.tableDragAndDrop) && (0, _uiStyles.insertLine)(), (0, _uiStyles.resizeHandle)((_props$featureFlags2 = props.featureFlags) === null || _props$featureFlags2 === void 0 ? void 0 : _props$featureFlags2.tableDragAndDrop), rangeSelectionStyles, _types.TableCssClassName.LAST_ITEM_IN_CELL, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.TABLE_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.TABLE_CELL, _consts.tableCellBackgroundColor, _consts.tableBorderColor, _consts.tableBorderColor, _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_COLUMN, (0, _uiStyles.insertColumnButtonWrapper)(), _types.TableCssClassName.CONTROLS_FLOATING_BUTTON_ROW, (0, _uiStyles.insertRowButtonWrapper)(), (0, _uiStyles.dragInsertButtonWrapper)(), (0, _uiStyles.dragCornerControlButton)(), (0, _uiStyles.DeleteButton)(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.stickyRowOffsetTop + 2, _editorSharedStyles.akEditorTableNumberColumnWidth, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.stickyRowOffsetTop, "var(--ds-surface, white)", _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.CORNER_CONTROLS, _editorSharedStyles.akEditorSmallZIndex, "var(--ds-surface, white)", _consts.tableToolbarSize, _consts.tableToolbarSize, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize, _consts.tableToolbarSize, tableStickyHeaderColumnControlsDecorationsStyle(), tableStickyHeaderFirefoxFixStyle(), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _editorSharedStyles.akEditorStickyHeaderZIndex, _consts.tableToolbarSize, "var(--ds-surface, white)", _consts.tableToolbarSize, _types.TableCssClassName.TABLE_STICKY, "var(--ds-surface, green)", _consts.stickyRowOffsetTop, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 5, "var(--ds-surface, white)", "var(--ds-shadow-overflow-perimeter, ".concat(_colors.N40A, ")"), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tableToolbarSize, _consts.stickyHeaderBorderBottomWidth, _consts.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY, insertColumnButtonOffset + 1, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2 + 1, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, (_consts.resizeHandlerAreaWidth - _consts.resizeLineWidth) / 2, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.WITH_CONTROLS, _consts.tableControlsSpacing, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableControlsSpacing + 2, _types.TableCssClassName.CORNER_CONTROLS, _consts.tableControlsSpacing - _consts.tableToolbarSize + 2, "var(--ds-surface, white)", sentinelStyles, (0, _uiStyles.OverflowShadow)((_props$featureFlags3 = props.featureFlags) === null || _props$featureFlags3 === void 0 ? void 0 : _props$featureFlags3.tableDragAndDrop), stickyScrollbarStyles(props.featureFlags), _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.TABLE_STICKY_SHADOW, _consts.tablePadding, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _consts.tablePadding, _types.TableCssClassName.TABLE_CONTAINER, _editorSharedStyles.akEditorTableNumberColumnWidth + _consts.tablePadding - 1, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _consts.tableOverflowShadowWidth, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.NODEVIEW_WRAPPER, breakoutWidthStyling(), (0, _uiStyles.columnControlsDecoration)(), (0, _uiStyles.rowControlsWrapperDotStyle)(), _types.TableCssClassName.CORNER_CONTROLS, _consts.tableToolbarSize + 1, cornerControlHeight, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, (0, _uiStyles.InsertMarker)("\n          left: -11px;\n          top: 9px;\n        "), _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableToolbarSize + 1, _consts.tableToolbarSize + 1, _consts.tableBorderColor, _consts.tableBorderRadiusSize, _consts.tableHeaderCellBackgroundColor, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _editorSharedStyles.akEditorTableToolbarSize + _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.CONTROLS_BUTTON, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.CONTROLS_CORNER_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableBorderDeleteColor, _consts.tableToolbarDeleteColor, _types.TableCssClassName.ROW_CONTROLS, _consts.tableToolbarSize, (0, _uiStyles.InsertMarker)("\n        bottom: -1px;\n        left: -11px;\n      "), _types.TableCssClassName.ROW_CONTROLS_INNER, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _consts.tableBorderRadiusSize, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.ROW_CONTROLS_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_BUTTON, _editorSharedStyles.akEditorUnitZIndex, (0, _uiStyles.HeaderButton)("\n        border-bottom: 1px solid ".concat(_consts.tableBorderColor, ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(_consts.tableToolbarSize, "px;\n\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(_types.TableCssClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), _types.TableCssClassName.DRAG_ROW_CONTROLS, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_ROW_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, "var(--ds-space-negative-150, -12px)", _consts.resizeHandlerZIndex, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT_WRAPPER, _types.TableCssClassName.DRAG_COLUMN_FLOATING_INSERT_DOT, "var(--ds-background-accent-gray-subtler, #C1C7D0)", _types.TableCssClassName.DRAG_HANDLE_BUTTON_CLICKABLE_ZONE, _types.TableCssClassName.DRAG_HANDLE_BUTTON_CONTAINER, "var(--ds-surface, ".concat(_colors.N0, ")"), _types.TableCssClassName.DRAG_HANDLE_DISABLED, _types.TableCssClassName.DRAG_HANDLE_MINIMISED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-background-accent-gray-subtlest, #F4F5F7)", "var(--ds-icon-disabled, #BFDBF847)", _types.TableCssClassName.DRAG_HANDLE_DISABLED, "var(--ds-background-accent-gray-subtler, #DCDFE4)", "var(--ds-icon-subtle, #626f86)", "var(--ds-background-accent-blue-subtle, #579DFF)", "var(--ds-icon-inverse, #FFF)", "var(--ds-border-focused, #2684FF)", "var(--ds-background-accent-blue-subtle, #579dff)", "var(--ds-icon-inverse, #fff)", "var(--ds-background-accent-red-subtler-pressed, #F87462)", "var(--ds-border-inverse, #FFF)", (0, _uiStyles.floatingColumnControls)(), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.ROW_CONTROLS, (0, _uiStyles.HeaderButtonHover)(), (0, _uiStyles.HeaderButtonDanger)(), _types.TableCssClassName.NUMBERED_COLUMN, _editorSharedStyles.akEditorTableToolbarSize, (_props$featureFlags4 = props.featureFlags) !== null && _props$featureFlags4 !== void 0 && _props$featureFlags4.tableDragAndDrop ? 0 : _editorSharedStyles.akEditorTableToolbarSize, _editorSharedStyles.akEditorTableNumberColumnWidth + 1, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderColor, (0, _editorSharedStyles.relativeFontSizeToBase16)((0, _constants.fontSize)()), _consts.tableHeaderCellBackgroundColor, _consts.tableTextColor, _consts.tableBorderColor, _consts.tableBorderColor, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, "var(--ds-surface, white)", _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.CORNER_CONTROLS, _types.TableCssClassName.ROW_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.WITH_CONTROLS, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.NUMBERED_COLUMN_BUTTON_DISABLED, _consts.tableBorderSelectedColor, _consts.tableBorderSelectedColor, _consts.tableToolbarSelectedColor, _editorSharedStyles.akEditorUnitZIndex, "var(--ds-text-selected, ".concat(_colors.N0, ")"), _types.TableCssClassName.NUMBERED_COLUMN_BUTTON, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableToolbarDeleteColor, _consts.tableBorderDeleteColor, "var(--ds-text-danger, ".concat(_colors.R500, ")"), _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.TABLE_NODE_WRAPPER, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.SELECTED_CELL, _consts.tableBorderSelectedColor, _types.TableCssClassName.SELECTED_CELL, _consts.tableCellSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, _consts.tableCellDeleteColor, _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.SELECTED_CELL, _types.TableCssClassName.TABLE_HEADER_CELL, _types.TableCssClassName.HOVERED_CELL, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorSmallZIndex, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.HOVERED_NO_HIGHLIGHT, _types.TableCssClassName.HOVERED_CELL_IN_DANGER, tableBorderStyles(), _editorSharedStyles.akEditorUnitZIndex * 100, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _styles.tableMarginTop, _consts.tableToolbarSize + 1, _consts.rowControlsZIndex + 4, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _styles.tableMarginTop - cornerControlHeight + 1, _consts.tableToolbarSize, _types.TableCssClassName.DRAG_ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _types.TableCssClassName.ROW_CONTROLS_WRAPPER, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorUnitZIndex, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _styles.tableMarginTop, _types.TableCssClassName.TABLE_STICKY, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_WRAPPER, _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex - 4, _types.TableCssClassName.TABLE_NODE_WRAPPER);
 };
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 var tableStyles = exports.tableStyles = function tableStyles(props) {
-  return (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .", " button {\n    background: ", ";\n    color: ", ";\n    cursor: none;\n  }\n\n  .", ":not(.", ") button:hover {\n    background: ", ";\n    color: ", " !important;\n    cursor: pointer;\n  }\n\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  ", "\n"])), _types.TableCssClassName.LAYOUT_BUTTON, "var(--ds-background-neutral, ".concat(_colors.N20A, ")"), "var(--ds-icon, ".concat(_colors.N300, ")"), _types.TableCssClassName.LAYOUT_BUTTON, _types.TableCssClassName.IS_RESIZING, "var(--ds-background-neutral-hovered, ".concat(_colors.B300, ")"), "var(--ds-icon, white)", baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    ", "\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  ", "\n"])), baseTableStyles(props), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles, _types.TableCssClassName.RESIZE_CURSOR, shadowSentinelStyles);
 };
 
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
-var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);
+var tableFullPageEditorStyles = exports.tableFullPageEditorStyles = (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    // 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212\n    margin-right: -1px;\n    width: 100%;\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER);
+var tableCommentEditorStyles = exports.tableCommentEditorStyles = (0, _react.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), _types.TableCssClassName.TABLE_NODE_WRAPPER, _scrollbar.scrollbarStyles);

package/dist/cjs/ui/ui-styles.js

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _types = require("../types");
 var _consts = require("./consts");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
 var InsertLine = function InsertLine(cssString) {
   return (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    background: ", ";\n    display: none;\n    position: absolute;\n    z-index: ", ";\n    ", "\n  }\n"])), _types.TableCssClassName.CONTROLS_INSERT_LINE, _consts.tableBorderSelectedColor, _editorSharedStyles.akEditorUnitZIndex, cssString);
 };
@@ -73,7 +73,7 @@ var DeleteButton = exports.DeleteButton = function DeleteButton() {
   return (0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  .", ",\n    .", " {\n    height: ", "px;\n    width: ", "px;\n  }\n  .", " {\n    .", " {\n      ", "\n    }\n  }\n\n  .", ":hover {\n    background: ", ";\n    color: ", ";\n    cursor: pointer;\n  }\n"])), _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableDeleteButtonSize, _consts.tableDeleteButtonSize, _types.TableCssClassName.CONTROLS_DELETE_BUTTON_WRAP, _types.TableCssClassName.CONTROLS_DELETE_BUTTON, Button("\n        background: ".concat(_consts.tableCellSelectedDeleteIconBackground, ";\n        color: ").concat(_consts.tableCellSelectedDeleteIconColor, ";\n      ")), _types.TableCssClassName.CONTROLS_DELETE_BUTTON, _consts.tableCellHoverDeleteIconBackground, _consts.tableCellHoverDeleteIconColor);
 };
 var OverflowShadow = exports.OverflowShadow = function OverflowShadow(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: ", ";\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide, "px)") : "calc(100% - ".concat(_consts.tableOverflowShadowWidthWide - 10, "px)"), _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
+  return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  .", ", .", " {\n    display: block;\n    height: calc(100% - ", "px);\n    position: absolute;\n    pointer-events: none;\n    top: ", "px;\n    z-index: ", ";\n    width: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to left,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to right,\n        ", " 0px,\n        transparent 1px\n      );\n    left: 0px;\n  }\n  .", "[data-number-column='true'] > :not(.", ").", " {\n    left: ", "px;\n  }\n  .", " {\n    background: linear-gradient(\n        to right,\n        transparent 0,\n        ", " 140%\n      ),\n      linear-gradient(\n        to left,\n        ", " 0px,\n        transparent 1px\n      );\n    left: calc(100% - ", "px);\n  }\n  .", " {\n    ", "\n    .", " {\n      border-left: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.TABLE_RIGHT_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _styles.tableMarginTop, _styles.tableMarginTop, _editorSharedStyles.akEditorShadowZIndex, _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.TABLE_LEFT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.TABLE_STICKY_SHADOW, _types.TableCssClassName.TABLE_LEFT_SHADOW, _editorSharedStyles.akEditorTableNumberColumnWidth - 1, _types.TableCssClassName.TABLE_RIGHT_SHADOW, "var(--ds-shadow-overflow-spread, ".concat(_colors.N40A, ")"), "var(--ds-shadow-overflow-perimeter, transparent)", _consts.tableOverflowShadowWidthWide, _types.TableCssClassName.WITH_CONTROLS, overflowShadowWidhoutDnD(isDragAndDropEnabled), _types.TableCssClassName.TABLE_LEFT_SHADOW, _consts.tableBorderColor);
 };
 var overflowShadowWidhoutDnD = function overflowShadowWidhoutDnD(isDragAndDropEnabled) {
   if (!isDragAndDropEnabled) {
@@ -113,7 +113,7 @@ var columnHeaderButtonSelected = function columnHeaderButtonSelected() {
   });
 };
 var getFloatingDotOverrides = function getFloatingDotOverrides() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", "::before,\n          tr\n          td:last-child\n          .", "::before {\n          content: '';\n          background-color: ", ";\n          position: absolute;\n          height: ", "px;\n          width: ", "px;\n          border-radius: 50%;\n          pointer-events: none;\n          top: ", ";\n          right: 0px;\n        }\n      "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)") : '';
+  return (0, _react.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n    tr\n      th:last-child\n      .", "::before,\n      tr\n      td:last-child\n      .", "::before {\n      content: '';\n      background-color: ", ";\n      position: absolute;\n      height: ", "px;\n      width: ", "px;\n      border-radius: 50%;\n      pointer-events: none;\n      top: ", ";\n      right: 0px;\n    }\n  "])), _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS, _consts.tableBorderColor, _consts.lineMarkerSize, _consts.lineMarkerSize, "var(--ds-space-025, 2px)");
 };
 var floatingColumnControls = exports.floatingColumnControls = function floatingColumnControls() {
   return (0, _react.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n    .", " {\n      box-sizing: border-box;\n      position: absolute;\n      top: 0;\n\n      .", " {\n        display: flex;\n        flex-direction: row;\n      }\n    }\n\n    .", " {\n      box-sizing: border-box;\n\n      .", " {\n        display: grid;\n        justify-items: center;\n      }\n    }\n  "])), _types.TableCssClassName.DRAG_COLUMN_DROP_TARGET_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER, _types.TableCssClassName.DRAG_COLUMN_CONTROLS, _types.TableCssClassName.DRAG_COLUMN_CONTROLS_INNER);
@@ -136,21 +136,16 @@ var hoveredCell = exports.hoveredCell = function hoveredCell() {
 };
 var hoveredWarningCell = exports.hoveredWarningCell = (0, _react.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  :not(.", ")\n    .", ":not(.", ") {\n    td.", " {\n      background-color: ", " !important; // We need to override the background-color added to the cell\n      border: 1px solid ", ";\n    }\n  }\n"])), _types.TableCssClassName.IS_RESIZING, _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.HOVERED_DELETE_BUTTON, _types.TableCssClassName.HOVERED_CELL_WARNING, "var(--ds-background-warning, ".concat(_colors.Y50, ")"), "var(--ds-border-warning, ".concat(_colors.Y200, ")"));
 
-// move the resize handle zone completely inside the table cell to avoid overflow
-var getLastColumnResizerOverrides = function getLastColumnResizerOverrides() {
-  return (0, _platformFeatureFlags.getBooleanFF)('platform.editor.custom-table-width') ? (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n        tr\n          th:last-child\n          .", ",\n          tr\n          td:last-child\n          .", " {\n          background-color: transparent;\n          position: absolute;\n          width: ", "px;\n          height: 100%;\n          top: 0;\n          right: 0;\n          cursor: col-resize;\n          z-index: ", ";\n        }\n      "])), _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex) : '';
-};
-
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var resizeHandleOverrides = function resizeHandleOverrides(isDragAndDropEnabled) {
   if (isDragAndDropEnabled) {
-    return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
+    return (0, _react.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        left: ", ";\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n\n      th.", "::before,\n        td.", "::before {\n        content: ' ';\n        position: absolute;\n        right: -1px;\n        top: -1px;\n        width: ", "px;\n        height: calc(100% + 2px);\n        background-color: ", ";\n        z-index: ", ";\n      }\n    "])), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2);
   }
-  return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      left: ", ";\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      left: ", ";\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n\n    td.", "::before {\n      content: ' ';\n      position: absolute;\n      right: -1px;\n      top: -1px;\n      width: ", "px;\n      height: calc(100% + 2px);\n      background-color: ", ";\n      z-index: ", ";\n    }\n\n    th.", "::before {\n      content: ' ';\n      right: -1px;\n      position: absolute;\n      width: ", "px;\n      height: calc(100% + ", "px);\n      background-color: ", ";\n      z-index: ", ";\n      top: -", "px;\n    }\n  "])), _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE, "var(--ds-space-negative-025, -2px)", _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _types.TableCssClassName.WITH_RESIZE_LINE_LAST_COLUMN, _consts.resizeLineWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableBorderSelectedColor, _consts.columnControlsZIndex * 2, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 var resizeHandle = exports.resizeHandle = function resizeHandle(isDragAndDropEnabled) {
-  return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, getLastColumnResizerOverrides(), resizeHandleOverrides(isDragAndDropEnabled), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
+  return (0, _react.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: -", "px;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    tr\n      th:last-child\n      .", ",\n      tr\n      td:last-child\n      .", " {\n      background-color: transparent;\n      position: absolute;\n      width: ", "px;\n      height: 100%;\n      top: 0;\n      right: 0;\n      cursor: col-resize;\n      z-index: ", ";\n    }\n\n    ", "\n\n    table\n      tr:first-of-type\n      th.", "\n      .", "::after,\n      table\n      tr:first-of-type\n      td.", "\n      .", "::after {\n      top: -", "px;\n      height: calc(100% + ", "px);\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.resizeHandlerAreaWidth / 2, _consts.resizeHandlerZIndex, resizeHandleOverrides(isDragAndDropEnabled), _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _types.TableCssClassName.WITH_RESIZE_LINE, _types.TableCssClassName.RESIZE_HANDLE_DECORATION, _consts.tableToolbarSize + _styles.tableCellBorderWidth, _consts.tableToolbarSize + _styles.tableCellBorderWidth);
 };
 
 // Drag and Drop: drop target insert line
@@ -180,5 +175,5 @@ var insertLineInactiveColor = (0, _react.css)({
 // or column drag
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 var insertLine = exports.insertLine = function insertLine() {
-  return (0, _react.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
+  return (0, _react.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      left: ", ";\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      left: ", ";\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      right: -1px;\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      right: -1px;\n      top: -", "px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      top: -1px;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    td.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n\n    th.", "::before {\n      ", "\n      bottom: 0;\n      ", "\n    }\n  }\n"])), _types.TableCssClassName.TABLE_CONTAINER, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_FIRST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", insertLineInactiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, "var(--ds-space-negative-025, -2px)", _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_COLUMN_INSERT_LINE_INACTIVE, tableCellColumnInsertLineStyles, _styles.tableCellBorderWidth, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE, tableCellRowInsertLineStyles, insertLineActiveColor, _types.TableCssClassName.WITH_LAST_ROW_INSERT_LINE_INACTIVE, tableCellRowInsertLineStyles, insertLineInactiveColor);
 };

package/dist/cjs/utils/index.js

@@ -321,12 +321,6 @@ Object.defineProperty(exports, "isIsolating", {
     return _nodes.isIsolating;
   }
 });
-Object.defineProperty(exports, "isLayoutSupported", {
-  enumerable: true,
-  get: function get() {
-    return _nodes.isLayoutSupported;
-  }
-});
 Object.defineProperty(exports, "isResizeHandleDecoration", {
   enumerable: true,
   get: function get() {

package/dist/cjs/utils/nodes.js

@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isLayoutSupported = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = exports.anyChildCellMergedAcrossRow = void 0;
+exports.tablesHaveDifferentNoOfColumns = exports.tablesHaveDifferentColumnWidths = exports.supportedHeaderRow = exports.isTableNested = exports.isIsolating = exports.getTableWidth = exports.containsHeaderRow = exports.containsHeaderColumn = exports.checkIfNumberColumnEnabled = exports.checkIfHeaderRowEnabled = exports.checkIfHeaderColumnEnabled = exports.anyChildCellMergedAcrossRow = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _utils = require("@atlaskit/editor-common/utils");
-var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
-var _utils3 = require("@atlaskit/editor-tables/utils");
-var _pluginKey = require("../pm-plugins/plugin-key");
+var _utils2 = require("@atlaskit/editor-tables/utils");
 var isIsolating = exports.isIsolating = function isIsolating(node) {
   return !!node.type.spec.isolating;
 };
@@ -46,27 +44,16 @@ var containsHeaderRow = exports.containsHeaderRow = function containsHeaderRow(t
   return true;
 };
 var checkIfHeaderColumnEnabled = exports.checkIfHeaderColumnEnabled = function checkIfHeaderColumnEnabled(selection) {
-  return filterNearSelection(selection, _utils3.findTable, containsHeaderColumn, false);
+  return filterNearSelection(selection, _utils2.findTable, containsHeaderColumn, false);
 };
 var checkIfHeaderRowEnabled = exports.checkIfHeaderRowEnabled = function checkIfHeaderRowEnabled(selection) {
-  return filterNearSelection(selection, _utils3.findTable, containsHeaderRow, false);
+  return filterNearSelection(selection, _utils2.findTable, containsHeaderRow, false);
 };
 var checkIfNumberColumnEnabled = exports.checkIfNumberColumnEnabled = function checkIfNumberColumnEnabled(selection) {
-  return filterNearSelection(selection, _utils3.findTable, function (table) {
+  return filterNearSelection(selection, _utils2.findTable, function (table) {
     return !!table.attrs.isNumberColumnEnabled;
   }, false);
 };
-var isLayoutSupported = exports.isLayoutSupported = function isLayoutSupported(state) {
-  var _pluginKey$getState;
-  var _ref = ((_pluginKey$getState = _pluginKey.pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.pluginConfig) || {},
-    permittedLayouts = _ref.permittedLayouts;
-  var _state$schema$nodes = state.schema.nodes,
-    bodiedExtension = _state$schema$nodes.bodiedExtension,
-    layoutSection = _state$schema$nodes.layoutSection,
-    expand = _state$schema$nodes.expand,
-    extensionFrame = _state$schema$nodes.extensionFrame;
-  return !(0, _utils2.hasParentNodeOfType)([expand, layoutSection, bodiedExtension, extensionFrame])(state.selection) && !!permittedLayouts && (permittedLayouts === 'all' || permittedLayouts.indexOf('default') > -1 && permittedLayouts.indexOf('wide') > -1 && permittedLayouts.indexOf('full-width') > -1);
-};
 var getTableWidth = exports.getTableWidth = function getTableWidth(node) {
   return getTableWidths(node).reduce(function (acc, current) {
     return acc + current;

package/dist/es2019/commands/misc.js

@@ -24,7 +24,6 @@ export const setTableRef = ref => createCommand(state => {
   const tableNode = ref && foundTable ? foundTable.node : undefined;
   const tablePos = ref && foundTable ? foundTable.pos : undefined;
   const tableWrapperTarget = closestElement(tableRef, `.${ClassName.TABLE_NODE_WRAPPER}`) || undefined;
-  const layout = tableNode ? tableNode.attrs.layout : undefined;
   const {
     isDragAndDropEnabled
   } = getPluginState(state);
@@ -35,7 +34,6 @@ export const setTableRef = ref => createCommand(state => {
       tableNode,
       tablePos,
       tableWrapperTarget,
-      layout: layout || 'default',
       isNumberColumnEnabled: checkIfNumberColumnEnabled(state.selection),
       isHeaderRowEnabled: checkIfHeaderRowEnabled(state.selection),
       isHeaderColumnEnabled: checkIfHeaderColumnEnabled(state.selection),

package/dist/es2019/nodeviews/OverflowShadowsObserver.js

@@ -1,8 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import rafSchedule from 'raf-schd';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import { tableInsertColumnButtonSize } from '../ui/consts';
 import { updateShadowListForStickyStyles } from './update-overflow-shadows';
 export class OverflowShadowsObserver {
   // updateShadowState is a method to update shadow key
@@ -30,7 +28,7 @@ export class OverflowShadowsObserver {
         }, {
           threshold: [0, 1],
           root: this.wrapper,
-          rootMargin: getBooleanFF('platform.editor.custom-table-width') ? '0px' : `0px ${tableInsertColumnButtonSize / 2}px 0px 0px`
+          rootMargin: '0px'
         });
         return;
       }

package/dist/es2019/nodeviews/TableComponent.js

@@ -119,16 +119,12 @@ class TableComponent extends React.Component {
       const node = getNode();
       const prevAttrs = prevNode.attrs;
       const isNested = isTableNested(this.props.view.state, this.props.getPos());
-      // We only consider a layout change valid if it's done outside of an autoSize.
-      const layoutChanged = prevAttrs.layout !== node.attrs.layout && prevAttrs.__autoSize === node.attrs.__autoSize;
       const parentWidth = this.getParentNodeWidth();
       const parentWidthChanged = parentWidth && parentWidth !== this.state.parentWidth;
       const layoutSize = this.tableNodeLayoutSize(node, containerWidth.width, options);
       const hasNumberedColumnChanged = prevAttrs.isNumberColumnEnabled !== node.attrs.isNumberColumnEnabled;
       const noOfColumnsChanged = tablesHaveDifferentNoOfColumns(node, prevNode);
       if (
-      // Breakout mode/layout changed
-      layoutChanged ||
       // We need to react if our parent changes
       // Scales the cols widths relative to the new parent width.
       parentWidthChanged ||
@@ -142,8 +138,7 @@ class TableComponent extends React.Component {
         // If column has been inserted/deleted avoid multi dispatch
         if (shouldScaleTable) {
           this.scaleTable({
-            parentWidth,
-            layoutChanged
+            parentWidth
           });
         }
 
@@ -151,8 +146,7 @@ class TableComponent extends React.Component {
         if (options !== null && options !== void 0 && options.isTableResizingEnabled && hasNumberedColumnChanged) {
           if (!hasTableBeenResized(prevNode)) {
             this.scaleTable({
-              parentWidth: node.attrs.width,
-              layoutChanged
+              parentWidth: node.attrs.width
             });
           }
         }
@@ -239,22 +233,17 @@ class TableComponent extends React.Component {
       }
     });
     _defineProperty(this, "handleWindowResize", () => {
-      var _node$attrs, _node$attrs2;
       const {
         getNode,
         containerWidth
       } = this.props;
       const node = getNode();
-      const prevNode = this.node;
       const layoutSize = this.tableNodeLayoutSize(node);
-      const prevAttrs = prevNode === null || prevNode === void 0 ? void 0 : prevNode.attrs;
-      const layoutChanged = (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.layout) !== (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) && (prevAttrs === null || prevAttrs === void 0 ? void 0 : prevAttrs.__autoSize) === (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.__autoSize);
       if (containerWidth.width > layoutSize) {
         return;
       }
       const parentWidth = this.getParentNodeWidth();
       this.scaleTableDebounced({
-        layoutChanged: layoutChanged,
         parentWidth: parentWidth
       });
     });
@@ -702,7 +691,6 @@ class TableComponent extends React.Component {
       node: node,
       tableRef: tableRef,
       containerWidth: containerWidth,
-      isBreakoutEnabled: options === null || options === void 0 ? void 0 : options.isBreakoutEnabled,
       isNested: isNested,
       pluginInjectionApi: pluginInjectionApi,
       tableWrapperHeight: this.state.tableWrapperHeight,
@@ -773,10 +761,7 @@ class TableComponent extends React.Component {
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
       style: {
         position: 'absolute',
-        right: getBooleanFF('platform.editor.custom-table-width') ? `${"var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
-        }` :
-        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-        '22px'
+        right: "var(--ds-space-400, 32px)" // tableOverflowShadowWidthWide
       }
     }, /*#__PURE__*/React.createElement("div", {
       className: `${ClassName.TABLE_RIGHT_SHADOW} ${ClassName.TABLE_STICKY_SHADOW}`,

package/dist/es2019/nodeviews/TableContainer.js

@@ -2,22 +2,11 @@ import React, { forwardRef, useCallback, useRef, useState } from 'react';
 import classNames from 'classnames';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
-import { calcTableWidth } from '@atlaskit/editor-common/styles';
 import { akEditorDefaultLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
 import { TableCssClassName as ClassName } from '../types';
 import { TableResizer } from './TableResizer';
-const getMarginLeft = (lineLength, tableWidth) => {
-  let marginLeft;
-  if (tableWidth !== 'inherit' && lineLength) {
-    const containerWidth = tableWidth;
-    if (containerWidth) {
-      marginLeft = (lineLength - containerWidth) / 2;
-    }
-  }
-  return marginLeft;
-};
 export const InnerContainer = /*#__PURE__*/forwardRef(({
   className,
   style,
@@ -162,11 +151,9 @@ export const TableContainer = ({
   node,
   className,
   containerWidth: {
-    lineLength,
     width: editorWidth
   },
   isTableResizingEnabled,
-  isBreakoutEnabled,
   editorView,
   getPos,
   tableRef,
@@ -192,15 +179,13 @@ export const TableContainer = ({
       isWholeTableInDanger: isWholeTableInDanger
     }, children);
   }
-  const tableWidth = isBreakoutEnabled ? calcTableWidth(node.attrs.layout, editorWidth) : 'inherit';
   return /*#__PURE__*/React.createElement(InnerContainer, {
     node: node,
     className: classNames(className, {
       'less-padding': editorWidth < akEditorMobileBreakoutPoint && !isNested
     }),
     style: {
-      width: tableWidth,
-      marginLeft: getMarginLeft(lineLength, tableWidth)
+      width: 'inherit'
     }
   }, children);
 };

package/dist/es2019/nodeviews/table.js

@@ -246,7 +246,6 @@ export default class TableView extends ReactNodeView {
 export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi) => {
   const {
     pluginConfig,
-    isBreakoutEnabled,
     isFullWidthModeEnabled,
     wasFullWidthModeEnabled,
     isTableResizingEnabled,
@@ -267,7 +266,6 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
     eventDispatcher,
     getPos: getPos,
     options: {
-      isBreakoutEnabled,
       isFullWidthModeEnabled,
       wasFullWidthModeEnabled,
       isTableResizingEnabled,