@atlaskit/editor-plugin-table 1.6.1 → 1.6.3

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

@@ -1,128 +1,96 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
-import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import FixedButton from './FixedButton';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { tableFloatingCellButtonStyles, tableFloatingCellButtonSelectedStyles } from './styles';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-export class FloatingContextualButtonInner extends React.Component {
-  constructor(...args) {
-    super(...args);
-    _defineProperty(this, "handleClick", () => {
-      const {
-        state,
-        dispatch
-      } = this.props.editorView;
-      // 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) {
-        toggleContextualMenu()(state, dispatch);
-      }
-    });
-  }
-  render() {
-    const {
-      mountPoint,
-      scrollableElement,
-      editorView,
-      targetCellPosition,
-      isContextualMenuOpen,
-      intl: {
-        formatMessage
-      },
-      dispatchAnalyticsEvent
-    } = this.props; //  : Props & WrappedComponentProps
-    const domAtPos = editorView.domAtPos.bind(editorView);
-    let targetCellRef;
-    try {
-      targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
-      if (dispatchAnalyticsEvent) {
-        const payload = {
-          action: ACTION.ERRORED,
-          actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
-          eventType: EVENT_TYPE.OPERATIONAL,
-          attributes: {
-            component: 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;
+const BUTTON_OFFSET = 3;
+const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
+  const {
+    editorView,
+    isContextualMenuOpen,
+    mountPoint,
+    scrollableElement,
+    stickyHeader,
+    tableWrapper,
+    targetCellPosition,
+    intl: {
+      formatMessage
     }
-    const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
-    const labelCellOptions = formatMessage(messages.cellOptions);
-    const button = jsx("div", {
-      css: theme => [tableFloatingCellButtonStyles({
-        theme
-      }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
-        theme
-      })]
-    }, jsx(ToolbarButton, {
-      className: ClassName.CONTEXTUAL_MENU_BUTTON,
-      selected: isContextualMenuOpen,
-      title: labelCellOptions,
-      onClick: this.handleClick,
-      iconBefore: jsx(ExpandIcon, {
-        label: ""
-      }),
-      "aria-label": labelCellOptions
-    }));
-    const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-    if (this.props.stickyHeader && parentSticky) {
-      const pos = targetCellRef.getBoundingClientRect();
-      return jsx("div", {
-        style: {
-          position: 'fixed',
-          top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
-          zIndex: akEditorFloatingOverlapPanelZIndex,
-          left: pos.left + targetCellRef.clientWidth - 20 - 3
-        }
-      }, button);
+  } = props; //  : Props & WrappedComponentProps
+
+  const handleClick = () => {
+    const {
+      state,
+      dispatch
+    } = editorView;
+    // 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) {
+      toggleContextualMenu()(state, dispatch);
     }
-    return jsx(Popup, {
-      alignX: "right",
-      alignY: "start",
-      target: targetCellRef,
-      mountTo: tableWrapper || mountPoint,
-      boundariesElement: targetCellRef,
-      scrollableElement: scrollableElement,
-      offset: [3, -3],
-      forcePlacement: true,
-      allowOutOfBounds: true,
-      zIndex: akEditorSmallZIndex
-    }, button);
+  };
+  const domAtPos = editorView.domAtPos.bind(editorView);
+  let targetCellRef;
+  targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+    return null;
   }
-  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;
+  const labelCellOptions = formatMessage(messages.cellOptions);
+  const button = jsx("div", {
+    css: theme => [tableFloatingCellButtonStyles({
+      theme
+    }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
+      theme
+    })]
+  }, jsx(ToolbarButton, {
+    className: ClassName.CONTEXTUAL_MENU_BUTTON,
+    selected: isContextualMenuOpen,
+    title: labelCellOptions,
+    onClick: handleClick,
+    iconBefore: jsx(ExpandIcon, {
+      label: ""
+    }),
+    "aria-label": labelCellOptions
+  }));
+  const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if (stickyHeader && parentSticky && tableWrapper) {
+    return jsx(FixedButton, {
+      offset: BUTTON_OFFSET,
+      stickyHeader: stickyHeader,
+      tableWrapper: tableWrapper,
+      targetCellPosition: targetCellPosition,
+      targetCellRef: targetCellRef,
+      mountTo: tableWrapper,
+      isContextualMenuOpen: isContextualMenuOpen
+    }, button);
   }
-}
-_defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+  return jsx(Popup, {
+    alignX: "right",
+    alignY: "start",
+    target: targetCellRef,
+    mountTo: tableWrapper || mountPoint,
+    boundariesElement: targetCellRef,
+    scrollableElement: scrollableElement,
+    offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
+    forcePlacement: true,
+    allowOutOfBounds: true,
+    zIndex: akEditorSmallZIndex
+  }, button);
+});
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
   return jsx(ErrorBoundary, {

package/dist/es2019/version.json

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

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

@@ -254,7 +254,8 @@ var tablesPlugin = function 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/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -225,7 +225,8 @@ export 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;
@@ -246,6 +247,7 @@ export var TableRowNodeView = /*#__PURE__*/function () {
       }
       _this.dom.style.top = "".concat(domTop, "px");
       updateTableMargin(table);
+      _this.dom.scrollLeft = wrapper.scrollLeft;
       _this.emitOn(domTop, _this.colControlsOffset);
     });
     _defineProperty(this, "makeRowHeaderNotSticky", function (table) {

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

@@ -90,6 +90,7 @@ export var TableCssClassName = _objectSpread(_objectSpread({}, TableSharedCssCla
   CONTEXTUAL_SUBMENU: "".concat(tablePrefixSelector, "-contextual-submenu"),
   CONTEXTUAL_MENU_BUTTON_WRAP: "".concat(tablePrefixSelector, "-contextual-menu-button-wrap"),
   CONTEXTUAL_MENU_BUTTON: "".concat(tablePrefixSelector, "-contextual-menu-button"),
+  CONTEXTUAL_MENU_BUTTON_FIXED: "".concat(tablePrefixSelector, "-contextual-menu-button-fixed"),
   CONTEXTUAL_MENU_ICON: "".concat(tablePrefixSelector, "-contextual-submenu-icon"),
   // come from prosemirror-table
   SELECTED_CELL: 'selectedCell',

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

@@ -0,0 +1,118 @@
+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 var BUTTON_WIDTH = 20;
+export var calcLeftPos = function calcLeftPos(_ref) {
+  var buttonWidth = _ref.buttonWidth,
+    cellRectLeft = _ref.cellRectLeft,
+    cellRefWidth = _ref.cellRefWidth,
+    offset = _ref.offset;
+  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+};
+export var calcObserverTargetMargin = function calcObserverTargetMargin(tableWrapper, fixedButtonRefCurrent) {
+  var tableWrapperRect = tableWrapper.getBoundingClientRect();
+  var fixedButtonRect = fixedButtonRefCurrent.getBoundingClientRect();
+  var scrollLeft = tableWrapper.scrollLeft;
+  return fixedButtonRect.left - tableWrapperRect.left + scrollLeft;
+};
+export 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 = useRef(null);
+  var observerTargetRef = useRef(null);
+
+  // Using refs here rather than state to prevent heaps of renders on scroll
+  var scrollDataRef = useRef(0);
+  var leftPosDataRef = useRef(0);
+  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(insertColumnButtonOffset, "px 0px 0px"),
+        threshold: 1
+      });
+      var handleScroll = rafSchedule(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__*/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: "".concat(BUTTON_WIDTH, "px"),
+      height: "".concat(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: offset
+      }),
+      width: "".concat(BUTTON_WIDTH, "px"),
+      height: "".concat(BUTTON_WIDTH, "px")
+    },
+    className: ClassName.CONTEXTUAL_MENU_BUTTON_FIXED
+  }, children)), mountTo);
+};
+export default FixedButton;

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

@@ -1,148 +1,92 @@
-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; } }
 /** @jsx jsx */
 import React from 'react';
 import { jsx } from '@emotion/react';
 import { findDomRefAtPos } from 'prosemirror-utils';
 import { injectIntl } from 'react-intl-next';
 import { Popup } from '@atlaskit/editor-common/ui';
-import { akEditorFloatingOverlapPanelZIndex, akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
+import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
-import { closestElement } from '@atlaskit/editor-common/utils';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
-import { CONTENT_COMPONENT } from '@atlaskit/editor-common/analytics';
-import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import FixedButton from './FixedButton';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { tableFloatingCellButtonStyles, tableFloatingCellButtonSelectedStyles } from './styles';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
-export var FloatingContextualButtonInner = /*#__PURE__*/function (_React$Component) {
-  _inherits(FloatingContextualButtonInner, _React$Component);
-  var _super = _createSuper(FloatingContextualButtonInner);
-  function FloatingContextualButtonInner() {
-    var _this;
-    _classCallCheck(this, FloatingContextualButtonInner);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+var BUTTON_OFFSET = 3;
+var FloatingContextualButtonInner = /*#__PURE__*/React.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) {
+      toggleContextualMenu()(state, dispatch);
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_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) {
-        toggleContextualMenu()(state, dispatch);
-      }
-    });
-    return _this;
+  };
+  var domAtPos = editorView.domAtPos.bind(editorView);
+  var targetCellRef;
+  targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
+  if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
+    return null;
   }
-  _createClass(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 = findDomRefAtPos(targetCellPosition, domAtPos);
-      } catch (error) {
-        // eslint-disable-next-line no-console
-        console.warn(error);
-        if (dispatchAnalyticsEvent) {
-          var payload = {
-            action: ACTION.ERRORED,
-            actionSubject: ACTION_SUBJECT.CONTENT_COMPONENT,
-            eventType: EVENT_TYPE.OPERATIONAL,
-            attributes: {
-              component: 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 = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
-      var labelCellOptions = formatMessage(messages.cellOptions);
-      var button = jsx("div", {
-        css: function css(theme) {
-          return [tableFloatingCellButtonStyles({
-            theme: theme
-          }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
-            theme: theme
-          })];
-        }
-      }, jsx(ToolbarButton, {
-        className: ClassName.CONTEXTUAL_MENU_BUTTON,
-        selected: isContextualMenuOpen,
-        title: labelCellOptions,
-        onClick: this.handleClick,
-        iconBefore: jsx(ExpandIcon, {
-          label: ""
-        }),
-        "aria-label": labelCellOptions
-      }));
-      var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
-      if (this.props.stickyHeader && parentSticky) {
-        var pos = targetCellRef.getBoundingClientRect();
-        return jsx("div", {
-          style: {
-            position: 'fixed',
-            top: this.props.stickyHeader.top + this.props.stickyHeader.padding + 3 + 3,
-            zIndex: akEditorFloatingOverlapPanelZIndex,
-            left: pos.left + targetCellRef.clientWidth - 20 - 3
-          }
-        }, button);
-      }
-      return jsx(Popup, {
-        alignX: "right",
-        alignY: "start",
-        target: targetCellRef,
-        mountTo: tableWrapper || mountPoint,
-        boundariesElement: targetCellRef,
-        scrollableElement: scrollableElement,
-        offset: [3, -3],
-        forcePlacement: true,
-        allowOutOfBounds: true,
-        zIndex: akEditorSmallZIndex
-      }, button);
+  var labelCellOptions = formatMessage(messages.cellOptions);
+  var button = jsx("div", {
+    css: function css(theme) {
+      return [tableFloatingCellButtonStyles({
+        theme: theme
+      }), isContextualMenuOpen && tableFloatingCellButtonSelectedStyles({
+        theme: theme
+      })];
     }
-  }, {
-    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;
-    }
-  }]);
-  return FloatingContextualButtonInner;
-}(React.Component);
-_defineProperty(FloatingContextualButtonInner, "displayName", 'FloatingContextualButton');
+  }, jsx(ToolbarButton, {
+    className: ClassName.CONTEXTUAL_MENU_BUTTON,
+    selected: isContextualMenuOpen,
+    title: labelCellOptions,
+    onClick: handleClick,
+    iconBefore: jsx(ExpandIcon, {
+      label: ""
+    }),
+    "aria-label": labelCellOptions
+  }));
+  var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
+  if (stickyHeader && parentSticky && tableWrapper) {
+    return jsx(FixedButton, {
+      offset: BUTTON_OFFSET,
+      stickyHeader: stickyHeader,
+      tableWrapper: tableWrapper,
+      targetCellPosition: targetCellPosition,
+      targetCellRef: targetCellRef,
+      mountTo: tableWrapper,
+      isContextualMenuOpen: isContextualMenuOpen
+    }, button);
+  }
+  return jsx(Popup, {
+    alignX: "right",
+    alignY: "start",
+    target: targetCellRef,
+    mountTo: tableWrapper || mountPoint,
+    boundariesElement: targetCellRef,
+    scrollableElement: scrollableElement,
+    offset: [BUTTON_OFFSET, -BUTTON_OFFSET],
+    forcePlacement: true,
+    allowOutOfBounds: true,
+    zIndex: akEditorSmallZIndex
+  }, button);
+});
 var FloatingContextualButton = injectIntl(FloatingContextualButtonInner);
 export default function (props) {
   return jsx(ErrorBoundary, {

package/dist/esm/version.json

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

package/dist/types/plugins/table/types.d.ts

@@ -272,6 +272,7 @@ export declare const TableCssClassName: {
     CONTEXTUAL_SUBMENU: string;
     CONTEXTUAL_MENU_BUTTON_WRAP: string;
     CONTEXTUAL_MENU_BUTTON: string;
+    CONTEXTUAL_MENU_BUTTON_FIXED: string;
     CONTEXTUAL_MENU_ICON: string;
     SELECTED_CELL: string;
     NODEVIEW_WRAPPER: string;

package/dist/types/plugins/table/ui/FloatingContextualButton/FixedButton.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { RowStickyState } from '../../pm-plugins/sticky-headers';
+export declare const BUTTON_WIDTH = 20;
+export interface Props {
+    children: React.ReactNode;
+    mountTo: HTMLElement;
+    offset: number;
+    stickyHeader: RowStickyState;
+    targetCellPosition: number;
+    targetCellRef: HTMLElement;
+    tableWrapper: HTMLElement;
+    isContextualMenuOpen: boolean | undefined;
+}
+interface CalcLeftPosData {
+    buttonWidth: number;
+    cellRectLeft: number;
+    cellRefWidth: number;
+    offset: number;
+}
+export declare const calcLeftPos: ({ buttonWidth, cellRectLeft, cellRefWidth, offset, }: CalcLeftPosData) => number;
+export declare const calcObserverTargetMargin: (tableWrapper: HTMLElement, fixedButtonRefCurrent: HTMLElement) => number;
+export declare const FixedButton: ({ children, isContextualMenuOpen, mountTo, offset, stickyHeader, tableWrapper, targetCellPosition, targetCellRef, }: Props) => React.ReactPortal;
+export default FixedButton;

package/dist/types/plugins/table/ui/FloatingContextualButton/index.d.ts

@@ -1,14 +1,12 @@
-/** @jsx jsx */
-import React from 'react';
 import { jsx } from '@emotion/react';
 import { EditorView } from 'prosemirror-view';
-import { WrappedComponentProps } from 'react-intl-next';
 import { TableLayout } from '@atlaskit/adf-schema';
 import { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { Node as PMNode } from 'prosemirror-model';
 export interface Props {
     editorView: EditorView;
+    tableWrapper?: HTMLElement;
     tableNode?: PMNode;
     targetCellPosition: number;
     isContextualMenuOpen?: boolean;
@@ -20,10 +18,4 @@ export interface Props {
     stickyHeader?: RowStickyState;
     dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 }
-export declare class FloatingContextualButtonInner extends React.Component<Props & WrappedComponentProps, any> {
-    static displayName: string;
-    render(): jsx.JSX.Element | null;
-    shouldComponentUpdate(nextProps: Props): boolean;
-    private handleClick;
-}
 export default function (props: Props): jsx.JSX.Element;