@atlaskit/editor-plugin-table 0.0.0 → 0.0.1

package/dist/cjs/plugins/table/transforms/replace-table.js

@@ -0,0 +1,48 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.replaceSelectedTable = void 0;
+
+var _prosemirrorState = require("prosemirror-state");
+
+var _prosemirrorModel = require("prosemirror-model");
+
+var _utils = require("@atlaskit/editor-tables/utils");
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var _utils2 = require("../utils");
+
+var replaceSelectedTable = function replaceSelectedTable(state, content, inputMethod, editorAnalyticsAPI) {
+  if ((0, _utils.isTableSelected)(state.selection)) {
+    var table = (0, _utils.findTable)(state.selection);
+
+    if (table) {
+      var slice = typeof content === 'string' ? new _prosemirrorModel.Slice(_prosemirrorModel.Fragment.from(state.schema.text(content)), 0, 0) : content;
+      var tr = state.tr.replace(table.pos, table.pos + table.node.nodeSize, slice);
+      tr.setSelection(_prosemirrorState.TextSelection.create(tr.doc, table.pos + slice.size + 1));
+
+      var _getSelectedTableInfo = (0, _utils2.getSelectedTableInfo)(state.selection),
+          totalRowCount = _getSelectedTableInfo.totalRowCount,
+          totalColumnCount = _getSelectedTableInfo.totalColumnCount;
+
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
+        action: _analytics.TABLE_ACTION.REPLACED,
+        actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+        attributes: {
+          totalColumnCount: totalColumnCount,
+          totalRowCount: totalRowCount,
+          inputMethod: inputMethod
+        },
+        eventType: _analytics.EVENT_TYPE.TRACK
+      })(tr);
+      return tr;
+    }
+  }
+
+  return state.tr;
+};
+
+exports.replaceSelectedTable = replaceSelectedTable;

package/dist/cjs/plugins/table/transforms/split.js

@@ -0,0 +1,92 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitCellsInColumns = splitCellsInColumns;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _tableMap = require("@atlaskit/editor-tables/table-map");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+/**
+ * Helper to split all the cells in a range of columns
+ * @param tr
+ * @param tablePos
+ * @param columnStart - Start of the rect included (rect.left)
+ * @param columnEnd - End of the rect not included (rect.right)
+ */
+function splitCellsInColumns(tr, tablePos, columnStart, columnEnd) {
+  var mapStart = tr.mapping.maps.length;
+  var table = tr.doc.nodeAt(tablePos);
+
+  if (!table) {
+    return tr;
+  }
+
+  var tableStart = tr.doc.resolve(tablePos).start(1);
+
+  var map = _tableMap.TableMap.get(table);
+
+  for (var column = columnStart; column < columnEnd; column++) {
+    for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
+      var cellIndex = rowIndex * map.width + column;
+      var cellPos = map.map[cellIndex]; // Check if the cell is contained by another by another row/column
+
+      var hasMergedCellsBefore = column > 0 && map.map[cellIndex - 1] === cellPos || rowIndex > 0 && map.map[(rowIndex - 1) * map.width + column] === cellPos; // Check if the cell contains another row/column
+
+      var hasMergedCellsAfter = column < map.width - 1 && map.map[cellIndex + 1] === cellPos || rowIndex < map.height - 1 && map.map[(rowIndex + 1) * map.width + column] === cellPos;
+
+      if (!hasMergedCellsBefore && hasMergedCellsAfter) {
+        // Is a merged cell that start in this row/column
+        var cellNode = table.nodeAt(cellPos);
+
+        if (!cellNode) {
+          continue;
+        }
+
+        var _ref = cellNode.attrs,
+            colwidth = _ref.colwidth,
+            _ref$colspan = _ref.colspan,
+            colspan = _ref$colspan === void 0 ? 1 : _ref$colspan,
+            _ref$rowspan = _ref.rowspan,
+            rowspan = _ref$rowspan === void 0 ? 1 : _ref$rowspan;
+        var mapping = tr.mapping.slice(mapStart); // Update current node with the simple colspan
+
+        var baseAttrs = _objectSpread(_objectSpread({}, cellNode.attrs), {}, {
+          colspan: 1,
+          rowspan: 1
+        }); // Add the new cells
+
+
+        for (var cellRowIndex = rowIndex; cellRowIndex < rowIndex + rowspan; cellRowIndex++) {
+          for (var i = 0; i < colspan; i++) {
+            var _mapping = tr.mapping.slice(mapStart);
+
+            var _cellPos = map.positionAt(cellRowIndex, column + i, table);
+
+            tr.insert(_mapping.map(_cellPos + tableStart), cellNode.type.createAndFill(_objectSpread(_objectSpread({}, baseAttrs), {}, {
+              colwidth: colwidth ? [colwidth[i]] : undefined
+            })));
+          }
+        } // Delete the original cell
+
+
+        mapping = tr.mapping.slice(mapStart);
+        tr.delete(mapping.map(cellPos + tableStart), mapping.map(cellPos + tableStart + cellNode.nodeSize)); // Skip rows based on rowspan
+
+        if (rowspan && rowspan > 1) {
+          rowIndex += rowspan - 1;
+        }
+      }
+    }
+  }
+
+  return tr;
+}

package/dist/cjs/plugins/table/types.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableDecorations = exports.TableCssClassName = exports.ShadowEvent = exports.RESIZE_HANDLE_AREA_DECORATION_GAP = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _adfSchema = require("@atlaskit/adf-schema");
+
+var _styles = require("@atlaskit/editor-common/styles");
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var RESIZE_HANDLE_AREA_DECORATION_GAP = 30;
+exports.RESIZE_HANDLE_AREA_DECORATION_GAP = RESIZE_HANDLE_AREA_DECORATION_GAP;
+var TableDecorations;
+exports.TableDecorations = TableDecorations;
+
+(function (TableDecorations) {
+  TableDecorations["ALL_CONTROLS_HOVER"] = "CONTROLS_HOVER";
+  TableDecorations["ROW_CONTROLS_HOVER"] = "ROW_CONTROLS_HOVER";
+  TableDecorations["COLUMN_CONTROLS_HOVER"] = "COLUMN_CONTROLS_HOVER";
+  TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
+  TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
+  TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
+  TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
+  TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
+  TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
+})(TableDecorations || (exports.TableDecorations = TableDecorations = {}));
+
+var TableCssClassName = _objectSpread(_objectSpread({}, _styles.TableSharedCssClassName), {}, {
+  COLUMN_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls"),
+  COLUMN_CONTROLS_DECORATIONS: "".concat(_adfSchema.tablePrefixSelector, "-column-controls-decoration"),
+  COLUMN_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-column__selected"),
+  ROW_CONTROLS_WRAPPER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls-wrapper"),
+  ROW_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-row-controls"),
+  ROW_CONTROLS_INNER: "".concat(_adfSchema.tablePrefixSelector, "-row-controls__inner"),
+  ROW_CONTROLS_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-row-controls__button-wrap"),
+  ROW_CONTROLS_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-row-controls__button"),
+  CONTROLS_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-controls__button"),
+  CONTROLS_BUTTON_ICON: "".concat(_adfSchema.tablePrefixSelector, "-controls__button-icon"),
+  CONTROLS_INSERT_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-button"),
+  CONTROLS_INSERT_BUTTON_INNER: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-button-inner"),
+  CONTROLS_INSERT_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-button-wrap"),
+  CONTROLS_INSERT_LINE: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-line"),
+  CONTROLS_BUTTON_OVERLAY: "".concat(_adfSchema.tablePrefixSelector, "-controls__button-overlay"),
+  LAYOUT_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-layout-button"),
+  CONTROLS_INSERT_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-marker"),
+  CONTROLS_INSERT_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-column"),
+  CONTROLS_INSERT_ROW: "".concat(_adfSchema.tablePrefixSelector, "-controls__insert-row"),
+  CONTROLS_DELETE_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-controls__delete-button-wrap"),
+  CONTROLS_DELETE_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-controls__delete-button"),
+  CONTROLS_FLOATING_BUTTON_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-controls-floating__button-column"),
+  CONTROLS_FLOATING_BUTTON_ROW: "".concat(_adfSchema.tablePrefixSelector, "-controls-floating__button-row"),
+  CORNER_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-corner-controls"),
+  CORNER_CONTROLS_INSERT_ROW_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-corner-controls__insert-row-marker"),
+  CORNER_CONTROLS_INSERT_COLUMN_MARKER: "".concat(_adfSchema.tablePrefixSelector, "-corner-controls__insert-column-marker"),
+  CONTROLS_CORNER_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-corner-button"),
+  NUMBERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column"),
+  NUMBERED_COLUMN_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-numbered-column__button"),
+  HOVERED_COLUMN: "".concat(_adfSchema.tablePrefixSelector, "-hovered-column"),
+  HOVERED_ROW: "".concat(_adfSchema.tablePrefixSelector, "-hovered-row"),
+  HOVERED_TABLE: "".concat(_adfSchema.tablePrefixSelector, "-hovered-table"),
+  HOVERED_CELL: "".concat(_adfSchema.tablePrefixSelector, "-hovered-cell"),
+  HOVERED_CELL_IN_DANGER: 'danger',
+  HOVERED_CELL_ACTIVE: 'active',
+  HOVERED_CELL_WARNING: "".concat(_adfSchema.tablePrefixSelector, "-hovered-cell__warning"),
+  HOVERED_DELETE_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-hovered-delete-button"),
+  WITH_CONTROLS: "".concat(_adfSchema.tablePrefixSelector, "-with-controls"),
+  RESIZING_PLUGIN: "".concat(_adfSchema.tablePrefixSelector, "-resizing-plugin"),
+  RESIZE_CURSOR: "".concat(_adfSchema.tablePrefixSelector, "-resize-cursor"),
+  IS_RESIZING: "".concat(_adfSchema.tablePrefixSelector, "-is-resizing"),
+  RESIZE_HANDLE: "".concat(_adfSchema.tablePrefixSelector, "-resize-handle"),
+  RESIZE_HANDLE_DECORATION: "".concat(_adfSchema.tablePrefixSelector, "-resize-decoration"),
+  CONTEXTUAL_SUBMENU: "".concat(_adfSchema.tablePrefixSelector, "-contextual-submenu"),
+  CONTEXTUAL_MENU_BUTTON_WRAP: "".concat(_adfSchema.tablePrefixSelector, "-contextual-menu-button-wrap"),
+  CONTEXTUAL_MENU_BUTTON: "".concat(_adfSchema.tablePrefixSelector, "-contextual-menu-button"),
+  CONTEXTUAL_MENU_ICON: "".concat(_adfSchema.tablePrefixSelector, "-contextual-submenu-icon"),
+  // come from prosemirror-table
+  SELECTED_CELL: 'selectedCell',
+  // defined in ReactNodeView based on PM node name
+  NODEVIEW_WRAPPER: 'tableView-content-wrap',
+  TABLE_SELECTED: "".concat(_adfSchema.tablePrefixSelector, "-table__selected"),
+  TABLE_CELL: _adfSchema.tableCellSelector,
+  TABLE_HEADER_CELL: _adfSchema.tableHeaderSelector,
+  TABLE_STICKY: "".concat(_adfSchema.tablePrefixSelector, "-sticky"),
+  TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
+  LAST_ITEM_IN_CELL: "".concat(_adfSchema.tablePrefixSelector, "-last-item-in-cell"),
+  WITH_RESIZE_LINE: "".concat(_adfSchema.tablePrefixSelector, "-column-resize-line")
+});
+
+exports.TableCssClassName = TableCssClassName;
+var ShadowEvent;
+exports.ShadowEvent = ShadowEvent;
+
+(function (ShadowEvent) {
+  ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";
+  ShadowEvent["SHOW_AFTER_SHADOW"] = "showAfterShadow";
+})(ShadowEvent || (exports.ShadowEvent = ShadowEvent = {}));

package/dist/cjs/plugins/table/ui/FloatingContextualButton/index.js

@@ -0,0 +1,194 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingContextualButtonInner = void 0;
+exports.default = _default;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _prosemirrorUtils = require("prosemirror-utils");
+
+var _reactIntlNext = require("react-intl-next");
+
+var _ui = require("@atlaskit/editor-common/ui");
+
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+
+var _utils = require("@atlaskit/editor-common/utils");
+
+var _commands = require("../../commands");
+
+var _types = require("../../types");
+
+var _messages = _interopRequireDefault(require("../../ui/messages"));
+
+var _analytics = require("@atlaskit/editor-common/analytics");
+
+var _styles = require("./styles");
+
+var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+
+var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(FloatingContextualButtonInner, _React$Component);
+
+  var _super = _createSuper(FloatingContextualButtonInner);
+
+  function FloatingContextualButtonInner() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, FloatingContextualButtonInner);
+
+    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));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
+      var _this$props$editorVie = _this.props.editorView,
+          state = _this$props$editorVie.state,
+          dispatch = _this$props$editorVie.dispatch; // Clicking outside the dropdown handles toggling the menu closed
+      // (otherwise these two toggles combat each other).
+      // In the event a user clicks the chevron button again
+      // That will count as clicking outside the dropdown and
+      // will be toggled appropriately
+
+      if (!_this.props.isContextualMenuOpen) {
+        (0, _commands.toggleContextualMenu)()(state, dispatch);
+      }
+    });
+    return _this;
+  }
+
+  (0, _createClass2.default)(FloatingContextualButtonInner, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          mountPoint = _this$props.mountPoint,
+          scrollableElement = _this$props.scrollableElement,
+          editorView = _this$props.editorView,
+          targetCellPosition = _this$props.targetCellPosition,
+          isContextualMenuOpen = _this$props.isContextualMenuOpen,
+          formatMessage = _this$props.intl.formatMessage,
+          dispatchAnalyticsEvent = _this$props.dispatchAnalyticsEvent; //  : Props & WrappedComponentProps
+
+      var domAtPos = editorView.domAtPos.bind(editorView);
+      var targetCellRef;
+
+      try {
+        targetCellRef = (0, _prosemirrorUtils.findDomRefAtPos)(targetCellPosition, domAtPos);
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.warn(error);
+
+        if (dispatchAnalyticsEvent) {
+          var payload = {
+            action: _analytics.ACTION.ERRORED,
+            actionSubject: _analytics.ACTION_SUBJECT.CONTENT_COMPONENT,
+            eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+            attributes: {
+              component: _analytics.CONTENT_COMPONENT.FLOATING_CONTEXTUAL_BUTTON,
+              selection: editorView.state.selection.toJSON(),
+              position: targetCellPosition,
+              docSize: editorView.state.doc.nodeSize,
+              error: error.toString(),
+              errorStack: error.stack || undefined
+            }
+          };
+          dispatchAnalyticsEvent(payload);
+        }
+      }
+
+      if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+        return null;
+      }
+
+      var tableWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
+      var labelCellOptions = formatMessage(_messages.default.cellOptions);
+      var button = (0, _react2.jsx)("div", {
+        css: _styles.tableFloatingCellButtonStyles
+      }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+        className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
+        selected: isContextualMenuOpen,
+        title: labelCellOptions,
+        onClick: this.handleClick,
+        iconBefore: (0, _react2.jsx)(_chevronDown.default, {
+          label: ""
+        }),
+        "aria-label": labelCellOptions
+      }));
+      var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+
+      if (this.props.stickyHeader && parentSticky) {
+        var pos = targetCellRef.getBoundingClientRect();
+        return (0, _react2.jsx)("div", {
+          style: {
+            position: 'fixed',
+            top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
+            zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+            left: pos.left + targetCellRef.clientWidth - 20 - 3
+          }
+        }, button);
+      }
+
+      return (0, _react2.jsx)(_ui.Popup, {
+        alignX: "right",
+        alignY: "start",
+        target: targetCellRef,
+        mountTo: tableWrapper || mountPoint,
+        boundariesElement: targetCellRef,
+        scrollableElement: scrollableElement,
+        offset: [3, -3],
+        forcePlacement: true,
+        allowOutOfBounds: true,
+        zIndex: _editorSharedStyles.akEditorSmallZIndex
+      }, button);
+    }
+  }, {
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      return this.props.tableNode !== nextProps.tableNode || this.props.targetCellPosition !== nextProps.targetCellPosition || this.props.layout !== nextProps.layout || this.props.isContextualMenuOpen !== nextProps.isContextualMenuOpen || this.props.isNumberColumnEnabled !== nextProps.isNumberColumnEnabled || this.props.stickyHeader !== nextProps.stickyHeader;
+    } // TODO: restore
+
+  }]);
+  return FloatingContextualButtonInner;
+}(_react.default.Component);
+
+exports.FloatingContextualButtonInner = FloatingContextualButtonInner;
+(0, _defineProperty2.default)(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
+
+function _default(props) {
+  return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {
+    component: _analytics.ACTION_SUBJECT.FLOATING_CONTEXTUAL_BUTTON,
+    dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
+    fallbackComponent: null
+  }, (0, _react2.jsx)(FloatingContextualButton, props));
+}

package/dist/cjs/plugins/table/ui/FloatingContextualButton/styles.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableFloatingCellButtonStyles = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = require("@emotion/react");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _consts = require("../consts");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _templateObject;
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4462
+var tableFloatingCellButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    background: ", ";\n    border-radius: ", "px;\n    border: 2px solid ", ";\n    display: flex;\n    height: ", "px;\n    flex-direction: column;\n  }\n  && button {\n    flex-direction: column;\n    padding: 0;\n    height: 100%;\n    display: flex;\n  }\n  && button > span {\n    margin: 0px -4px;\n  }\n  && span {\n    pointer-events: none;\n  }\n"])), (0, _tokens.token)('color.background.neutral', _colors.N20), (0, _constants.borderRadius)(), (0, _tokens.token)('color.border.inverse', _colors.N0), _consts.contextualMenuTriggerSize - 2);
+exports.tableFloatingCellButtonStyles = tableFloatingCellButtonStyles;