@atlaskit/editor-plugin-table 0.0.0 → 0.0.2

package/dist/esm/plugins/table/ui/TableFloatingControls/NumberColumn/index.js

@@ -0,0 +1,126 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import { Selection } from 'prosemirror-state';
+import { isRowSelected } from '@atlaskit/editor-tables/utils';
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowHeights } from '../../../utils';
+
+var NumberColumn = /*#__PURE__*/function (_Component) {
+  _inherits(NumberColumn, _Component);
+
+  var _super = _createSuper(NumberColumn);
+
+  function NumberColumn() {
+    var _this;
+
+    _classCallCheck(this, NumberColumn);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "hoverRows", function (index) {
+      return _this.props.tableActive ? _this.props.hoverRows([index]) : null;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "selectRow", function (index, event) {
+      var _this$props = _this.props,
+          tableActive = _this$props.tableActive,
+          editorView = _this$props.editorView,
+          selectRow = _this$props.selectRow; // If selection is outside the table then first reset the selection inside table
+
+      if (!tableActive && event.target && event.target instanceof Node) {
+        var _editorView$state = editorView.state,
+            doc = _editorView$state.doc,
+            selection = _editorView$state.selection,
+            tr = _editorView$state.tr;
+        var pos = editorView.posAtDOM(event.target, 1);
+        var $pos = doc.resolve(pos);
+        var newPos = selection.head > pos ? // Selection is after table
+        // nodeSize - 3 will move the position inside last table cell
+        Selection.near(doc.resolve(pos + ($pos.parent.nodeSize - 3)), -1) : // Selection is before table
+        Selection.near($pos);
+        editorView.dispatch(tr.setSelection(newPos));
+      }
+
+      selectRow(index, event.shiftKey);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+      var _this$props2 = _this.props,
+          tableActive = _this$props2.tableActive,
+          editorView = _this$props2.editorView;
+
+      if (tableActive) {
+        var state = editorView.state,
+            dispatch = editorView.dispatch;
+        clearHoverSelection()(state, dispatch);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "getClassNames", function (index) {
+      var _this$props3 = _this.props,
+          hoveredRows = _this$props3.hoveredRows,
+          editorView = _this$props3.editorView,
+          isInDanger = _this$props3.isInDanger,
+          isResizing = _this$props3.isResizing;
+      var isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
+      return [ClassName.NUMBERED_COLUMN_BUTTON, isActive ? ClassName.HOVERED_CELL_ACTIVE : '', isActive && isInDanger ? ClassName.HOVERED_CELL_IN_DANGER : ''].join(' ');
+    });
+
+    return _this;
+  }
+
+  _createClass(NumberColumn, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props4 = this.props,
+          tableRef = _this$props4.tableRef,
+          hasHeaderRow = _this$props4.hasHeaderRow;
+      var rowHeights = getRowHeights(tableRef);
+      return /*#__PURE__*/React.createElement("div", {
+        className: ClassName.NUMBERED_COLUMN,
+        style: {
+          marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined
+        }
+      }, rowHeights.map(function (rowHeight, index) {
+        return /*#__PURE__*/React.createElement("div", {
+          key: "wrapper-".concat(index),
+          className: _this2.getClassNames(index),
+          "data-index": index,
+          style: {
+            height: rowHeight,
+            top: _this2.props.stickyTop !== undefined && hasHeaderRow && index === 0 ? "".concat(_this2.props.stickyTop, "px") : undefined
+          },
+          onClick: function onClick(event) {
+            return _this2.selectRow(index, event);
+          },
+          onMouseOver: function onMouseOver() {
+            return _this2.hoverRows(index);
+          },
+          onMouseOut: _this2.clearHoverSelection
+        }, hasHeaderRow ? index > 0 ? index : null : index + 1);
+      }));
+    }
+  }]);
+
+  return NumberColumn;
+}(Component);
+
+export { NumberColumn as default };

package/dist/esm/plugins/table/ui/TableFloatingControls/RowControls/index.js

@@ -0,0 +1,113 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import { clearHoverSelection } from '../../../commands';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getRowClassNames, getRowHeights, getRowsParams } from '../../../utils';
+import { tableControlsSpacing, tableToolbarSize } from '../../consts';
+
+var RowControls = /*#__PURE__*/function (_Component) {
+  _inherits(RowControls, _Component);
+
+  var _super = _createSuper(RowControls);
+
+  function RowControls() {
+    var _this;
+
+    _classCallCheck(this, RowControls);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      clearHoverSelection()(state, dispatch);
+    });
+
+    return _this;
+  }
+
+  _createClass(RowControls, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          editorView = _this$props.editorView,
+          tableRef = _this$props.tableRef,
+          hoveredRows = _this$props.hoveredRows,
+          isInDanger = _this$props.isInDanger,
+          isResizing = _this$props.isResizing;
+
+      if (!tableRef) {
+        return null;
+      }
+
+      var selection = editorView.state.selection;
+      var rowHeights = getRowHeights(tableRef);
+      var rowsParams = getRowsParams(rowHeights);
+      var firstRow = tableRef.querySelector('tr');
+      var hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+      return /*#__PURE__*/React.createElement("div", {
+        className: ClassName.ROW_CONTROLS
+      }, /*#__PURE__*/React.createElement("div", {
+        className: ClassName.ROW_CONTROLS_INNER
+      }, rowsParams.map(function (_ref, index) {
+        var startIndex = _ref.startIndex,
+            endIndex = _ref.endIndex,
+            height = _ref.height;
+        // if previous row was header row, add its height to our margin
+        var marginTop = -1;
+
+        if (index === 1 && hasHeaderRow && _this2.props.stickyTop !== undefined) {
+          marginTop += rowHeights[index - 1] + tableToolbarSize;
+        }
+
+        var thisRowSticky = _this2.props.stickyTop !== undefined && index === 0 && hasHeaderRow;
+        return /*#__PURE__*/React.createElement("div", {
+          className: "".concat(ClassName.ROW_CONTROLS_BUTTON_WRAP, " ").concat(getRowClassNames(startIndex, selection, hoveredRows, isInDanger, isResizing), " ").concat(thisRowSticky ? 'sticky' : ''),
+          key: startIndex,
+          style: {
+            height: height,
+            marginTop: "".concat(marginTop, "px"),
+            top: thisRowSticky ? "".concat(_this2.props.stickyTop + 3, "px") : undefined,
+            paddingTop: thisRowSticky ? "".concat(tableControlsSpacing, "px") : undefined
+          }
+        }, /*#__PURE__*/React.createElement("button", {
+          type: "button",
+          className: "".concat(ClassName.ROW_CONTROLS_BUTTON, "\n                  ").concat(ClassName.CONTROLS_BUTTON, "\n                "),
+          onClick: function onClick(event) {
+            return _this2.props.selectRow(startIndex, event.shiftKey);
+          },
+          onMouseOver: function onMouseOver() {
+            return _this2.props.hoverRows([startIndex]);
+          },
+          onMouseOut: _this2.clearHoverSelection,
+          "data-start-index": startIndex,
+          "data-end-index": endIndex
+        }), /*#__PURE__*/React.createElement("div", {
+          className: ClassName.CONTROLS_INSERT_MARKER
+        }));
+      })));
+    }
+  }]);
+
+  return RowControls;
+}(Component);
+
+export { RowControls as default };

package/dist/esm/plugins/table/ui/TableFloatingControls/index.js

@@ -0,0 +1,207 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+import React, { Component } from 'react';
+import { browser } from '@atlaskit/editor-common/utils';
+import { hoverRows, selectRow } from '../../commands';
+import { isSelectionUpdated } from '../../utils';
+import CornerControls from './CornerControls';
+import NumberColumn from './NumberColumn';
+import RowControls from './RowControls';
+
+var TableFloatingControls = /*#__PURE__*/function (_Component) {
+  _inherits(TableFloatingControls, _Component);
+
+  var _super = _createSuper(TableFloatingControls);
+
+  function TableFloatingControls() {
+    var _this;
+
+    _classCallCheck(this, TableFloatingControls);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "selectRow", function (row, expand) {
+      var editorView = _this.props.editorView;
+      var state = editorView.state,
+          dispatch = editorView.dispatch; // fix for issue ED-4665
+
+      if (browser.ie_version === 11) {
+        editorView.dom.blur();
+      }
+
+      selectRow(row, expand)(state, dispatch);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "hoverRows", function (rows, danger) {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch;
+      hoverRows(rows, danger)(state, dispatch);
+    });
+
+    return _this;
+  }
+
+  _createClass(TableFloatingControls, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.tryInitResizeObserver();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      // tableRef prop is not guaranteed to be defined after componentDidMount, so retry to init resize observer on update
+      this.tryInitResizeObserver();
+    } // tracking the table height changes to update floating controls
+
+  }, {
+    key: "tryInitResizeObserver",
+    value: function tryInitResizeObserver() {
+      var _window,
+          _this2 = this;
+
+      var tableRef = this.props.tableRef;
+
+      var _this$props$getEditor = this.props.getEditorFeatureFlags(),
+          tableRenderOptimization = _this$props$getEditor.tableRenderOptimization;
+
+      if (tableRenderOptimization && tableRef && !this.resizeObserver && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+        this.resizeObserver = new ResizeObserver(function (entries) {
+          var _iterator = _createForOfIteratorHelper(entries),
+              _step;
+
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var entry = _step.value;
+              var tableHeight = entry.contentRect.height;
+
+              _this2.setState({
+                tableHeight: tableHeight
+              });
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        });
+        this.resizeObserver.observe(tableRef);
+      }
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps, nextState) {
+      var _this$state;
+
+      var _this$props = this.props,
+          tableRef = _this$props.tableRef,
+          isInDanger = _this$props.isInDanger,
+          isResizing = _this$props.isResizing,
+          isHeaderRowEnabled = _this$props.isHeaderRowEnabled,
+          isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
+          hoveredRows = _this$props.hoveredRows,
+          selection = _this$props.selection,
+          tableActive = _this$props.tableActive,
+          isHeaderColumnEnabled = _this$props.isHeaderColumnEnabled,
+          ordering = _this$props.ordering,
+          headerRowHeight = _this$props.headerRowHeight,
+          stickyHeader = _this$props.stickyHeader;
+
+      var _this$props$getEditor2 = this.props.getEditorFeatureFlags(),
+          tableRenderOptimization = _this$props$getEditor2.tableRenderOptimization;
+
+      var tableHeight = tableRenderOptimization ? (_this$state = this.state) === null || _this$state === void 0 ? void 0 : _this$state.tableHeight : this.props.tableHeight;
+      var nextTableHeight = tableRenderOptimization ? nextState === null || nextState === void 0 ? void 0 : nextState.tableHeight : nextProps.tableHeight;
+      return ordering !== nextProps.ordering || tableRef !== nextProps.tableRef || tableHeight !== nextTableHeight || tableActive !== nextProps.tableActive || isInDanger !== nextProps.isInDanger || isResizing !== nextProps.isResizing || hoveredRows !== nextProps.hoveredRows || isHeaderRowEnabled !== nextProps.isHeaderRowEnabled || isHeaderColumnEnabled !== nextProps.isHeaderColumnEnabled || isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || isSelectionUpdated(selection, nextProps.selection) || headerRowHeight !== nextProps.headerRowHeight || stickyHeader !== nextProps.stickyHeader;
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          editorView = _this$props2.editorView,
+          tableRef = _this$props2.tableRef,
+          isInDanger = _this$props2.isInDanger,
+          isResizing = _this$props2.isResizing,
+          isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
+          isHeaderRowEnabled = _this$props2.isHeaderRowEnabled,
+          isHeaderColumnEnabled = _this$props2.isHeaderColumnEnabled,
+          tableActive = _this$props2.tableActive,
+          hasHeaderRow = _this$props2.hasHeaderRow,
+          hoveredRows = _this$props2.hoveredRows,
+          stickyHeader = _this$props2.stickyHeader;
+
+      if (!tableRef) {
+        return null;
+      }
+
+      var stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+      return /*#__PURE__*/React.createElement("div", {
+        onMouseDown: function onMouseDown(e) {
+          return e.preventDefault();
+        }
+      }, isNumberColumnEnabled ? /*#__PURE__*/React.createElement(NumberColumn, {
+        editorView: editorView,
+        hoverRows: this.hoverRows,
+        tableRef: tableRef,
+        tableActive: tableActive,
+        hoveredRows: hoveredRows,
+        hasHeaderRow: hasHeaderRow,
+        isInDanger: isInDanger,
+        isResizing: isResizing,
+        selectRow: this.selectRow,
+        stickyTop: stickyTop
+      }) : null, tableActive && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CornerControls, {
+        editorView: editorView,
+        tableRef: tableRef,
+        isInDanger: isInDanger,
+        isResizing: isResizing,
+        isHeaderRowEnabled: isHeaderRowEnabled,
+        isHeaderColumnEnabled: isHeaderColumnEnabled,
+        hoveredRows: hoveredRows,
+        stickyTop: tableActive ? stickyTop : undefined
+      }), /*#__PURE__*/React.createElement(RowControls, {
+        editorView: editorView,
+        tableRef: tableRef,
+        hoverRows: this.hoverRows,
+        hoveredRows: hoveredRows,
+        isInDanger: isInDanger,
+        isResizing: isResizing,
+        selectRow: this.selectRow,
+        stickyTop: tableActive ? stickyTop : undefined
+      })));
+    }
+  }]);
+
+  return TableFloatingControls;
+}(Component);
+
+_defineProperty(TableFloatingControls, "displayName", 'TableFloatingControls');
+
+export { TableFloatingControls as default };

package/dist/esm/plugins/table/ui/common-styles.js

@@ -0,0 +1,25 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+import { css } from '@emotion/react';
+import { tableMarginTop, tableSharedStyle } from '@atlaskit/editor-common/styles';
+import { fontSize } from '@atlaskit/theme/constants';
+import { N40A, B300, N300, N20A, N0, R500 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorSmallZIndex, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, akEditorTableToolbarSize, akEditorUnitZIndex, akEditorSelectedNodeClassName, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
+import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
+import { TableCssClassName as ClassName } from '../types';
+import { tableCellBackgroundColor, tableToolbarColor, tableBorderColor, tableCellSelectedColor, tableToolbarSelectedColor, tableBorderSelectedColor, tableCellDeleteColor, tableBorderDeleteColor, tableToolbarDeleteColor, tableBorderRadiusSize, tablePadding, tableScrollbarOffset, resizeHandlerAreaWidth, resizeLineWidth, tableToolbarSize, tableInsertColumnButtonSize, tableControlsSpacing, tableTextColor, stickyRowZIndex, columnControlsDecorationHeight, stickyRowOffsetTop, stickyHeaderBorderBottomWidth } from './consts';
+import { HeaderButton, HeaderButtonHover, HeaderButtonDanger, insertColumnButtonWrapper, insertRowButtonWrapper, columnControlsLineMarker, DeleteButton, OverflowShadow, columnControlsDecoration, hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, InsertMarker } from './ui-styles';
+import { token } from '@atlaskit/tokens';
+var cornerControlHeight = tableToolbarSize + 1;
+var rangeSelectionStyles = "\n.".concat(ClassName.NODEVIEW_WRAPPER, ".").concat(akEditorSelectedNodeClassName, " table tbody tr {\n  th,td {\n    ").concat(getSelectionStyles([SelectionStyle.Blanket, SelectionStyle.Border]), "\n  }\n}\n");
+var sentinelStyles = ".".concat(ClassName.TABLE_CONTAINER, " {\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, ", > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n    position: absolute;\n    width: 100%;\n    height: 1px;\n    margin-top: -1px;\n    // need this to avoid sentinel being focused via keyboard\n    // this still allows it to be detected by intersection observer\n    visibility: hidden;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n    top: ").concat(columnControlsDecorationHeight, "px;\n  }\n  > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      bottom: ").concat(tableScrollbarOffset + stickyRowOffsetTop + tablePadding * 2 + 23, "px;\n  }\n  &.").concat(ClassName.WITH_CONTROLS, " {\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_TOP, " {\n      top: 0px;\n    }\n    > .").concat(ClassName.TABLE_STICKY_SENTINEL_BOTTOM, " {\n      margin-bottom: ").concat(columnControlsDecorationHeight, "px;\n    }\n  }\n}"); // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
+
+export var tableStyles = function tableStyles(props) {
+  var _props$featureFlags;
+
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\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    ", ";\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    /* 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      z-index: 0;\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 */\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: ", ";\n      margin-left: -1px;\n\n      &.no-pointer-events {\n        pointer-events: none;\n      }\n    }\n\n    .", " .", " {\n      left: unset;\n      position: fixed;\n      z-index: ", ";\n    }\n\n    .", ".", "\n      .", " {\n      padding-bottom: ", "px;\n    }\n\n    tr.sticky th {\n      border-bottom: ", "px solid\n        ", ";\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: 1px;\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\n      .", ",\n      tr.sticky\n      .", " {\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      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        padding: 0 ", "px;\n      }\n\n      &.", "[data-number-column='true'] {\n        padding-left: ", "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 */\n    > * .", " .", " {\n      margin-left: unset !important;\n      width: 100% !important;\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        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    :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    .", " {\n      .", ", .", " {\n        display: block;\n      }\n      .", " {\n        padding-left: 1px;\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      .", " {\n        cursor: pointer;\n      }\n      .", ":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\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      td.", ", td.", " {\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          border: 1px solid ", ";\n          z-index: ", ";\n        }\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    }\n    .", ".", " {\n      z-index: ", ";\n    }\n    .", " {\n      left: -", "px;\n    }\n    .", " {\n      /*\n      compensating for half of the insert column button\n      that is aligned to the right edge initially on hover of the top right column control when table overflown,\n      its center should be aligned with the edge\n       */\n      padding-right: ", "px;\n      margin-right: -", "px;\n      padding-bottom: ", "px;\n      margin-bottom: -", "px;\n      /* fixes gap cursor height */\n      overflow: auto;\n      position: relative;\n    }\n  }\n\n  .ProseMirror.", " {\n    .", " {\n      overflow-x: auto;\n      ", ";\n    }\n  }\n\n  .ProseMirror.", " {\n    cursor: col-resize;\n  }\n\n  .ProseMirror .pm-table-cell-content-wrap ol[data-child-count='100+'] {\n    padding-left: revert;\n  }\n"])), ClassName.LAYOUT_BUTTON, token('color.background.neutral', N20A), token('color.icon', N300), ClassName.LAYOUT_BUTTON, ClassName.IS_RESIZING, token('color.background.neutral.hovered', B300), token('color.icon', 'white'), tableSharedStyle(props), columnControlsLineMarker(props), hoveredDeleteButton, hoveredCell, hoveredWarningCell, resizeHandle, rangeSelectionStyles, ClassName.LAST_ITEM_IN_CELL, ClassName.TABLE_NODE_WRAPPER, ClassName.TABLE_CELL, ClassName.TABLE_HEADER_CELL, ClassName.TABLE_CELL, tableCellBackgroundColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.CONTROLS_FLOATING_BUTTON_COLUMN, insertColumnButtonWrapper, ClassName.CONTROLS_FLOATING_BUTTON_ROW, insertRowButtonWrapper, DeleteButton, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, stickyRowOffsetTop + 2, akEditorTableNumberColumnWidth, akEditorStickyHeaderZIndex, stickyRowOffsetTop, token('elevation.surface', 'white'), ClassName.TABLE_STICKY, ClassName.CORNER_CONTROLS, akEditorSmallZIndex, token('elevation.surface', 'white'), tableToolbarSize, tableToolbarSize, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize, tableToolbarSize, ClassName.TABLE_STICKY, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_STICKY, ClassName.ROW_CONTROLS, ClassName.ROW_CONTROLS_BUTTON_WRAP, akEditorStickyHeaderZIndex, tableToolbarSize, token('elevation.surface', 'white'), tableToolbarSize, ClassName.TABLE_STICKY, token('elevation.surface', 'green'), stickyRowOffsetTop, stickyRowZIndex, token('elevation.surface', 'white'), token('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, stickyRowZIndex + 1, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tableToolbarSize, stickyHeaderBorderBottomWidth, tableBorderColor(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_STICKY, ClassName.TABLE_CONTAINER, ClassName.TABLE_STICKY, ClassName.WITH_RESIZE_LINE, ClassName.WITH_RESIZE_LINE, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2 + 1, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.WITH_RESIZE_LINE, ClassName.SELECTED_CELL, ClassName.RESIZE_HANDLE_DECORATION, (resizeHandlerAreaWidth - resizeLineWidth) / 2, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, ClassName.WITH_CONTROLS, tableControlsSpacing, ClassName.WITH_CONTROLS, ClassName.TABLE_STICKY, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, tableControlsSpacing + 2, ClassName.CORNER_CONTROLS, tableControlsSpacing - tableToolbarSize + 2, token('elevation.surface', 'white'), (_props$featureFlags = props.featureFlags) !== null && _props$featureFlags !== void 0 && _props$featureFlags.stickyHeadersOptimization ? sentinelStyles : '', OverflowShadow(props), ClassName.TABLE_STICKY, ClassName.TABLE_STICKY_SHADOW, tablePadding, ClassName.ROW_CONTROLS_WRAPPER, tablePadding, ClassName.TABLE_CONTAINER, akEditorTableNumberColumnWidth + tablePadding - 1, ClassName.TABLE_LEFT_SHADOW, ClassName.TABLE_RIGHT_SHADOW, ClassName.NODEVIEW_WRAPPER, ClassName.NODEVIEW_WRAPPER, ClassName.TABLE_CONTAINER, columnControlsDecoration(props), ClassName.CORNER_CONTROLS, tableToolbarSize + 1, cornerControlHeight, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, InsertMarker(props, "\n          left: -11px;\n          top: 9px;\n        "), ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER, InsertMarker(props, "\n          right: -1px;\n          top: -12px;\n        "), ClassName.CORNER_CONTROLS, ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER, ClassName.CONTROLS_CORNER_BUTTON, tableToolbarSize + 1, tableToolbarSize + 1, tableBorderColor(props), tableBorderRadiusSize, tableToolbarColor(props), ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.TABLE_CONTAINER, ClassName.CORNER_CONTROLS, ClassName.CONTROLS_CORNER_BUTTON, akEditorTableToolbarSize + akEditorTableNumberColumnWidth, ClassName.ROW_CONTROLS, ClassName.CONTROLS_BUTTON, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, tableBorderSelectedColor, tableToolbarSelectedColor, ClassName.IS_RESIZING, ClassName.CONTROLS_CORNER_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, tableToolbarDeleteColor, ClassName.ROW_CONTROLS, tableToolbarSize, InsertMarker(props, "\n        bottom: -1px;\n        left: -11px;\n      "), ClassName.ROW_CONTROLS_INNER, ClassName.ROW_CONTROLS_BUTTON_WRAP, tableBorderRadiusSize, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.ROW_CONTROLS_BUTTON_WRAP, ClassName.CONTROLS_BUTTON, akEditorUnitZIndex, HeaderButton(props, "\n        border-bottom: 1px solid ".concat(tableBorderColor(props), ";\n        border-right: 0px;\n        border-radius: 0;\n        height: 100%;\n        width: ").concat(tableToolbarSize, "px;\n\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, " {\n          position: absolute;\n          width: 30px;\n          height: 50%;\n          right: 0;\n          bottom: 0;\n        }\n        .").concat(ClassName.CONTROLS_BUTTON_OVERLAY, ":first-of-type {\n          top: 0;\n        }\n      ")), ClassName.IS_RESIZING, ClassName.ROW_CONTROLS, HeaderButtonHover(), HeaderButtonDanger(), ClassName.NUMBERED_COLUMN, akEditorTableToolbarSize - 1, akEditorTableToolbarSize, akEditorTableNumberColumnWidth + 1, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderColor(props), relativeFontSizeToBase16(fontSize()), tableToolbarColor(props), tableTextColor(props), tableBorderColor(props), tableBorderColor(props), ClassName.WITH_CONTROLS, ClassName.CORNER_CONTROLS, ClassName.ROW_CONTROLS, ClassName.NUMBERED_COLUMN, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.IS_RESIZING, ClassName.WITH_CONTROLS, ClassName.NUMBERED_COLUMN_BUTTON, ClassName.NUMBERED_COLUMN_BUTTON, tableBorderSelectedColor, tableBorderSelectedColor, tableToolbarSelectedColor, akEditorUnitZIndex, token('color.text.inverse', N0), ClassName.NUMBERED_COLUMN_BUTTON, ClassName.HOVERED_CELL_IN_DANGER, tableToolbarDeleteColor, tableBorderDeleteColor, token('color.text.inverse', R500), akEditorUnitZIndex, ClassName.TABLE_NODE_WRAPPER, ClassName.COLUMN_CONTROLS_DECORATIONS, ClassName.TABLE_HEADER_CELL, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, ClassName.SELECTED_CELL, ClassName.HOVERED_CELL_IN_DANGER, akEditorSmallZIndex, ClassName.SELECTED_CELL, tableBorderSelectedColor, ClassName.SELECTED_CELL, tableCellSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, ClassName.HOVERED_CELL_IN_DANGER, tableCellDeleteColor, akEditorUnitZIndex * 100, ClassName.HOVERED_CELL, ClassName.SELECTED_CELL, tableBorderSelectedColor, akEditorSmallZIndex, ClassName.HOVERED_CELL_IN_DANGER, tableBorderDeleteColor, akEditorUnitZIndex * 100, ClassName.ROW_CONTROLS_WRAPPER, tableMarginTop - cornerControlHeight + 1, ClassName.ROW_CONTROLS_WRAPPER, ClassName.TABLE_LEFT_SHADOW, akEditorUnitZIndex, ClassName.ROW_CONTROLS_WRAPPER, tableToolbarSize, ClassName.TABLE_NODE_WRAPPER, tableInsertColumnButtonSize / 2, tableInsertColumnButtonSize / 2, tableScrollbarOffset, tableScrollbarOffset, ClassName.IS_RESIZING, ClassName.TABLE_NODE_WRAPPER, scrollbarStyles, ClassName.RESIZE_CURSOR);
+};
+export var tableFullPageEditorStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    width: 100%;\n  }\n"])), ClassName.TABLE_NODE_WRAPPER);
+export var tableCommentEditorStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  .ProseMirror .", " > table {\n    margin-left: 0;\n    margin-right: 0;\n    ", ";\n  }\n"])), ClassName.TABLE_NODE_WRAPPER, scrollbarStyles);

package/dist/esm/plugins/table/ui/consts.js

@@ -0,0 +1,61 @@
+import { B200, B300, N0, N20, R400, R75, DN400, N200, DN30 } from '@atlaskit/theme/colors';
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorTableBorder, akEditorTableBorderDark, akEditorTableToolbar, akEditorTableToolbarDark, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+import { themed } from '@atlaskit/theme/components';
+/**
+ * Basic colors added to prevent content overflow in table cells.
+ */
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
+
+export var tableCellBackgroundColor = themed({
+  light: N0,
+  dark: DN30
+});
+export var tableToolbarColor = themed({
+  light: akEditorTableToolbar,
+  dark: akEditorTableToolbarDark
+});
+export var tableTextColor = themed({
+  light: token('color.text.subtlest', N200),
+  dark: token('color.text.subtlest', DN400)
+});
+export var tableBorderColor = themed({
+  light: token('color.border', akEditorTableBorder),
+  dark: token('color.border', akEditorTableBorderDark)
+});
+export var tableFloatingControlsColor = token('color.background.neutral', N20); // TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+
+export var tableCellSelectedColor = token('color.blanket.selected', 'rgba(179, 212, 255, 0.3)');
+export var tableToolbarSelectedColor = token('color.background.selected.bold', B200);
+export var tableBorderSelectedColor = token('color.border.selected', B300);
+export var tableCellDeleteColor = token('color.blanket.danger', 'rgba(255, 235, 230, 0.3)');
+export var tableBorderDeleteColor = token('color.border.danger', R400);
+export var tableToolbarDeleteColor = token('color.background.danger.bold', R75);
+export var tableBorderRadiusSize = 3;
+export var tablePadding = 8;
+export var tableScrollbarOffset = 15;
+export var tableMarginFullWidthMode = 2;
+export var tableInsertColumnButtonSize = 20;
+export var tableDeleteButtonSize = 16;
+export var tableDeleteButtonOffset = 6;
+export var tableToolbarSize = akEditorTableToolbarSize;
+export var tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
+export var tableInsertColumnButtonOffset = 3;
+export var layoutButtonSize = 32;
+export var lineMarkerOffsetFromColumnControls = 13;
+export var lineMarkerSize = 4;
+export var columnControlsDecorationHeight = 25;
+export var columnControlsZIndex = akEditorUnitZIndex * 10;
+export var columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export var columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export var resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
+export var resizeLineWidth = 2;
+export var resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
+export var contextualMenuTriggerSize = 16;
+export var contextualMenuDropdownWidth = 180;
+export var stickyRowZIndex = resizeHandlerZIndex + 2;
+export var stickyRowOffsetTop = 8;
+export var stickyHeaderBorderBottomWidth = 1;

package/dist/esm/plugins/table/ui/messages.js

@@ -0,0 +1,38 @@
+import { defineMessages } from 'react-intl-next';
+export default defineMessages({
+  insertColumn: {
+    id: 'fabric.editor.insertColumn',
+    defaultMessage: 'Insert column right',
+    description: 'Inserts a new column to the right of selected column.'
+  },
+  removeColumns: {
+    id: 'fabric.editor.removeColumns',
+    defaultMessage: 'Delete {0, plural, one {column} other {columns}}',
+    description: 'Deletes a table column.'
+  },
+  insertRow: {
+    id: 'fabric.editor.insertRow',
+    defaultMessage: 'Insert row below',
+    description: 'Inserts a new row below the selected row.'
+  },
+  removeRows: {
+    id: 'fabric.editor.removeRows',
+    defaultMessage: 'Delete {0, plural, one {row} other {rows}}',
+    description: 'Deletes a table row.'
+  },
+  cellOptions: {
+    id: 'fabric.editor.cellOptions',
+    defaultMessage: 'Cell options',
+    description: 'Opens a menu with options for the current table cell.'
+  },
+  confirmDeleteLinkedModalOKButton: {
+    id: 'fabric.editor.tables.confirmDeleteLinkedModalOKButton',
+    defaultMessage: 'Remove table and data',
+    description: 'Action button label for confirm modal when deleting a table linked to an extension.'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.tables.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Removing this table will break all the charts connected to it.',
+    description: 'Message for confirm modal when deleting a table linked to an extension.'
+  }
+});