@atlaskit/editor-plugin-table 1.6.2 → 1.6.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 1.6.3
+
+### Patch Changes
+
+- [`1202f6f0a82`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1202f6f0a82) - ED-16692: add logic to position FloatingContextualButton correctly when sticky and scrolling
+
 ## 1.6.2
 
 ### Patch Changes

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

@@ -261,7 +261,8 @@ var tablesPlugin = function tablesPlugin(options, api) {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             layout: layout,
-            stickyHeader: stickyHeader
+            stickyHeader: stickyHeader,
+            tableWrapper: tableWrapperTarget
           }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
             tableNode: tableNode,
             tableRef: tableRef,

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -232,7 +232,8 @@ var TableRowNodeView = /*#__PURE__*/function () {
       if (_this.stickyRowHeight && _this.stickyRowHeight > window.innerHeight / 2) {
         return;
       }
-      var table = tree.table;
+      var table = tree.table,
+        wrapper = tree.wrapper;
 
       // ED-16035 Make sure sticky header is only applied to first row
       var tbody = _this.dom.parentElement;
@@ -253,6 +254,7 @@ var TableRowNodeView = /*#__PURE__*/function () {
       }
       _this.dom.style.top = "".concat(domTop, "px");
       (0, _dom.updateStickyMargins)(table);
+      _this.dom.scrollLeft = wrapper.scrollLeft;
       _this.emitOn(domTop, _this.colControlsOffset);
     });
     (0, _defineProperty2.default)(this, "makeRowHeaderNotSticky", function (table) {

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

@@ -98,6 +98,7 @@ var TableCssClassName = _objectSpread(_objectSpread({}, _styles.TableSharedCssCl
   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_BUTTON_FIXED: "".concat(_adfSchema.tablePrefixSelector, "-contextual-menu-button-fixed"),
   CONTEXTUAL_MENU_ICON: "".concat(_adfSchema.tablePrefixSelector, "-contextual-submenu-icon"),
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',

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

@@ -0,0 +1,133 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.calcObserverTargetMargin = exports.calcLeftPos = exports.FixedButton = exports.BUTTON_WIDTH = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _commonStyles = require("../common-styles");
+var _types = require("../../types");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var BUTTON_WIDTH = 20;
+exports.BUTTON_WIDTH = BUTTON_WIDTH;
+var calcLeftPos = function calcLeftPos(_ref) {
+  var buttonWidth = _ref.buttonWidth,
+    cellRectLeft = _ref.cellRectLeft,
+    cellRefWidth = _ref.cellRefWidth,
+    offset = _ref.offset;
+  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+};
+exports.calcLeftPos = calcLeftPos;
+var calcObserverTargetMargin = function calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent) {
+  var tableWrapperRect = tableWrapper.getBoundingClientRect();
+  var fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
+  var scrollLeft = tableWrapper.scrollLeft;
+  return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
+};
+exports.calcObserverTargetMargin = calcObserverTargetMargin;
+var FixedButton = function FixedButton(_ref2) {
+  var children = _ref2.children,
+    isContextualMenuOpen = _ref2.isContextualMenuOpen,
+    mountTo = _ref2.mountTo,
+    offset = _ref2.offset,
+    stickyHeader = _ref2.stickyHeader,
+    tableWrapper = _ref2.tableWrapper,
+    targetCellPosition = _ref2.targetCellPosition,
+    targetCellRef = _ref2.targetCellRef;
+  var fixedButtonRef = (0, _react.useRef)(null);
+  var observerTargetRef = (0, _react.useRef)(null);
+
+  // Using refs here rather than state to prevent heaps of renders on scroll
+  var scrollDataRef = (0, _react.useRef)(0);
+  var leftPosDataRef = (0, _react.useRef)(0);
+  (0, _react.useEffect)(function () {
+    var observerTargetRefCurrent = observerTargetRef.current;
+    var fixedButtonRefCurrent = fixedButtonRef.current;
+    if (fixedButtonRefCurrent && observerTargetRefCurrent) {
+      scrollDataRef.current = tableWrapper.scrollLeft;
+      leftPosDataRef.current = 0;
+      // Hide the button initially in case there's a flash of the button being
+      // outside the table before the Intersection Observer fires
+      fixedButtonRefCurrent.style.visibility = 'hidden';
+      var margin = calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent);
+
+      // Much more simple and predictable to add this margin to the observer target
+      // rather than using it to calculate the rootMargin values
+      observerTargetRefCurrent.style.marginLeft = "".concat(margin, "px");
+      var observer = new IntersectionObserver(function (entries) {
+        entries.forEach(function (entry) {
+          if (entry.isIntersecting) {
+            fixedButtonRefCurrent.style.visibility = 'visible';
+          } else {
+            fixedButtonRefCurrent.style.visibility = 'hidden';
+          }
+        });
+      }, {
+        root: tableWrapper,
+        rootMargin: "0px ".concat(_commonStyles.insertColumnButtonOffset, "px 0px 0px"),
+        threshold: 1
+      });
+      var handleScroll = (0, _rafSchd.default)(function (event) {
+        if (fixedButtonRef.current) {
+          var delta = event.target.scrollLeft - scrollDataRef.current;
+          var style = "translateX(".concat(leftPosDataRef.current - delta, "px)");
+          fixedButtonRef.current.style.transform = style;
+          scrollDataRef.current = event.target.scrollLeft;
+          leftPosDataRef.current = leftPosDataRef.current - delta;
+        }
+      });
+      observer.observe(observerTargetRefCurrent);
+      tableWrapper.addEventListener('scroll', handleScroll);
+      return function () {
+        tableWrapper.removeEventListener('scroll', handleScroll);
+        fixedButtonRefCurrent.style.transform = '';
+        observer.unobserve(observerTargetRefCurrent);
+      };
+    }
+  }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
+  var targetCellRect = targetCellRef.getBoundingClientRect();
+
+  // Using a portal here to ensure wrapperRef has the tableWrapper as an
+  // ancestor. This is required to make the Intersection Observer work.
+  return /*#__PURE__*/(0, _reactDom.createPortal)(
+  /*#__PURE__*/
+  // Using observerTargetRef here for our Intersection Observer. There is issues
+  // getting the observer to work just using the fixedButtonRef, possible due
+  // to using position fixed on this Element, or possibly due to its position
+  // being changed on scroll.
+  _react.default.createElement("div", {
+    ref: observerTargetRef,
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: "".concat(BUTTON_WIDTH, "px"),
+      height: "".concat(BUTTON_WIDTH, "px")
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: fixedButtonRef,
+    style: {
+      position: 'fixed',
+      top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
+      left: calcLeftPos({
+        buttonWidth: BUTTON_WIDTH,
+        cellRectLeft: targetCellRect.left,
+        cellRefWidth: targetCellRef.clientWidth,
+        offset: offset
+      }),
+      width: "".concat(BUTTON_WIDTH, "px"),
+      height: "".concat(BUTTON_WIDTH, "px")
+    },
+    className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON_FIXED
+  }, children)), mountTo);
+};
+exports.FixedButton = FixedButton;
+var _default = FixedButton;
+exports.default = _default;

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

@@ -4,15 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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");
@@ -21,135 +13,88 @@ 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 _FixedButton = _interopRequireDefault(require("./FixedButton"));
 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; } } /** @jsx jsx */
-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];
+/** @jsx jsx */
+
+var BUTTON_OFFSET = 3;
+var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (props) {
+  var editorView = props.editorView,
+    isContextualMenuOpen = props.isContextualMenuOpen,
+    mountPoint = props.mountPoint,
+    scrollableElement = props.scrollableElement,
+    stickyHeader = props.stickyHeader,
+    tableWrapper = props.tableWrapper,
+    targetCellPosition = props.targetCellPosition,
+    formatMessage = props.intl.formatMessage; //  : Props & WrappedComponentProps
+
+  var handleClick = function handleClick() {
+    var state = editorView.state,
+      dispatch = editorView.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 (!isContextualMenuOpen) {
+      (0, _commands.toggleContextualMenu)()(state, dispatch);
     }
-    _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;
+  };
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef;
+  targetCellRef = (0, _prosemirrorUtils.findDomRefAtPos)(targetCellPosition, domAtPos);
+  if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+    return null;
   }
-  (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 instanceof Error ? error.message : String(error)
-            },
-            nonPrivacySafeAttributes: {
-              errorStack: error instanceof Error ? 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: function css(theme) {
-          return [(0, _styles.tableFloatingCellButtonStyles)({
-            theme: theme
-          }), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)({
-            theme: theme
-          })];
-        }
-      }, (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;
+  var labelCellOptions = formatMessage(_messages.default.cellOptions);
+  var button = (0, _react2.jsx)("div", {
+    css: function css(theme) {
+      return [(0, _styles.tableFloatingCellButtonStyles)({
+        theme: theme
+      }), isContextualMenuOpen && (0, _styles.tableFloatingCellButtonSelectedStyles)({
+        theme: theme
+      })];
     }
-  }]);
-  return FloatingContextualButtonInner;
-}(_react.default.Component);
-exports.FloatingContextualButtonInner = FloatingContextualButtonInner;
-(0, _defineProperty2.default)(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+  }, (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+    className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
+    selected: isContextualMenuOpen,
+    title: labelCellOptions,
+    onClick: handleClick,
+    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
+      label: ""
+    }),
+    "aria-label": labelCellOptions
+  }));
+  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if (stickyHeader && parentSticky && tableWrapper) {
+    return (0, _react2.jsx)(_FixedButton.default, {
+      offset: BUTTON_OFFSET,
+      stickyHeader: stickyHeader,
+      tableWrapper: tableWrapper,
+      targetCellPosition: targetCellPosition,
+      targetCellRef: targetCellRef,
+      mountTo: tableWrapper,
+      isContextualMenuOpen: isContextualMenuOpen
+    }, button);
+  }
+  return (0, _react2.jsx)(_ui.Popup, {
+    alignX: "right",
+    alignY: "start",
+    target: targetCellRef,
+    mountTo: tableWrapper || mountPoint,
+    boundariesElement: targetCellRef,
+    scrollableElement: scrollableElement,
+    offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
+    forcePlacement: true,
+    allowOutOfBounds: true,
+    zIndex: _editorSharedStyles.akEditorSmallZIndex
+  }, button);
+});
 var FloatingContextualButton = (0, _reactIntlNext.injectIntl)(FloatingContextualButtonInner);
 function _default(props) {
   return (0, _react2.jsx)(_errorBoundary.ErrorBoundary, {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.6.2",
+	"version": "1.6.3",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/index.js

@@ -251,7 +251,8 @@ const tablesPlugin = (options, api) => {
             dispatchAnalyticsEvent: dispatchAnalyticsEvent,
             isContextualMenuOpen: isContextualMenuOpen,
             layout: layout,
-            stickyHeader: stickyHeader
+            stickyHeader: stickyHeader,
+            tableWrapper: tableWrapperTarget
           }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
             tableNode: tableNode,
             tableRef: tableRef,

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -217,7 +217,8 @@ export class TableRowNodeView {
         return;
       }
       const {
-        table
+        table,
+        wrapper
       } = tree;
 
       // ED-16035 Make sure sticky header is only applied to first row
@@ -239,6 +240,7 @@ export class TableRowNodeView {
       }
       this.dom.style.top = `${domTop}px`;
       updateTableMargin(table);
+      this.dom.scrollLeft = wrapper.scrollLeft;
       this.emitOn(domTop, this.colControlsOffset);
     });
     _defineProperty(this, "makeRowHeaderNotSticky", (table, isEditorDestroyed = false) => {

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

@@ -88,6 +88,7 @@ export const TableCssClassName = {
   CONTEXTUAL_SUBMENU: `${tablePrefixSelector}-contextual-submenu`,
   CONTEXTUAL_MENU_BUTTON_WRAP: `${tablePrefixSelector}-contextual-menu-button-wrap`,
   CONTEXTUAL_MENU_BUTTON: `${tablePrefixSelector}-contextual-menu-button`,
+  CONTEXTUAL_MENU_BUTTON_FIXED: `${tablePrefixSelector}-contextual-menu-button-fixed`,
   CONTEXTUAL_MENU_ICON: `${tablePrefixSelector}-contextual-submenu-icon`,
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',

package/dist/es2019/plugins/table/ui/FloatingContextualButton/FixedButton.js

@@ -0,0 +1,120 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import rafSchedule from 'raf-schd';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { insertColumnButtonOffset } from '../common-styles';
+import { TableCssClassName as ClassName } from '../../types';
+export const BUTTON_WIDTH = 20;
+export const calcLeftPos = ({
+  buttonWidth,
+  cellRectLeft,
+  cellRefWidth,
+  offset
+}) => {
+  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+};
+export const calcObserverTargetMargin = (tableWrapper, fixedButtonRefCurrent) => {
+  const tableWrapperRect = tableWrapper.getBoundingClientRect();
+  const fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
+  const scrollLeft = tableWrapper.scrollLeft;
+  return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
+};
+export const FixedButton = ({
+  children,
+  isContextualMenuOpen,
+  mountTo,
+  offset,
+  stickyHeader,
+  tableWrapper,
+  targetCellPosition,
+  targetCellRef
+}) => {
+  const fixedButtonRef = useRef(null);
+  const observerTargetRef = useRef(null);
+
+  // Using refs here rather than state to prevent heaps of renders on scroll
+  const scrollDataRef = useRef(0);
+  const leftPosDataRef = useRef(0);
+  useEffect(() => {
+    const observerTargetRefCurrent = observerTargetRef.current;
+    const fixedButtonRefCurrent = fixedButtonRef.current;
+    if (fixedButtonRefCurrent && observerTargetRefCurrent) {
+      scrollDataRef.current = tableWrapper.scrollLeft;
+      leftPosDataRef.current = 0;
+      // Hide the button initially in case there's a flash of the button being
+      // outside the table before the Intersection Observer fires
+      fixedButtonRefCurrent.style.visibility = 'hidden';
+      const margin = calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent);
+
+      // Much more simple and predictable to add this margin to the observer target
+      // rather than using it to calculate the rootMargin values
+      observerTargetRefCurrent.style.marginLeft = `${margin}px`;
+      const observer = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            fixedButtonRefCurrent.style.visibility = 'visible';
+          } else {
+            fixedButtonRefCurrent.style.visibility = 'hidden';
+          }
+        });
+      }, {
+        root: tableWrapper,
+        rootMargin: `0px ${insertColumnButtonOffset}px 0px 0px`,
+        threshold: 1
+      });
+      const handleScroll = rafSchedule(event => {
+        if (fixedButtonRef.current) {
+          const delta = event.target.scrollLeft - scrollDataRef.current;
+          const style = `translateX(${leftPosDataRef.current - delta}px)`;
+          fixedButtonRef.current.style.transform = style;
+          scrollDataRef.current = event.target.scrollLeft;
+          leftPosDataRef.current = leftPosDataRef.current - delta;
+        }
+      });
+      observer.observe(observerTargetRefCurrent);
+      tableWrapper.addEventListener('scroll', handleScroll);
+      return () => {
+        tableWrapper.removeEventListener('scroll', handleScroll);
+        fixedButtonRefCurrent.style.transform = '';
+        observer.unobserve(observerTargetRefCurrent);
+      };
+    }
+  }, [fixedButtonRef, observerTargetRef, tableWrapper, targetCellPosition, targetCellRef, isContextualMenuOpen]);
+  const targetCellRect = targetCellRef.getBoundingClientRect();
+
+  // Using a portal here to ensure wrapperRef has the tableWrapper as an
+  // ancestor. This is required to make the Intersection Observer work.
+  return /*#__PURE__*/createPortal(
+  /*#__PURE__*/
+  // Using observerTargetRef here for our Intersection Observer. There is issues
+  // getting the observer to work just using the fixedButtonRef, possible due
+  // to using position fixed on this Element, or possibly due to its position
+  // being changed on scroll.
+  React.createElement("div", {
+    ref: observerTargetRef,
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: `${BUTTON_WIDTH}px`,
+      height: `${BUTTON_WIDTH}px`
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: fixedButtonRef,
+    style: {
+      position: 'fixed',
+      top: stickyHeader.top + stickyHeader.padding + offset * 2,
+      zIndex: akEditorFloatingPanelZIndex,
+      left: calcLeftPos({
+        buttonWidth: BUTTON_WIDTH,
+        cellRectLeft: targetCellRect.left,
+        cellRefWidth: targetCellRef.clientWidth,
+        offset
+      }),
+      width: `${BUTTON_WIDTH}px`,
+      height: `${BUTTON_WIDTH}px`
+    },
+    className: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
+  }, children)), mountTo);
+};
+export default FixedButton;