@atlaskit/editor-plugin-table 7.6.13 → 7.7.0

package/src/ui/ColumnResizeWidget/index.tsx

@@ -2,6 +2,10 @@
 import { jsx } from '@emotion/react';
 import { useIntl } from 'react-intl-next';
 
+import {
+  startColumnResizing,
+  ToolTipContent,
+} from '@atlaskit/editor-common/keymaps';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import Tooltip from '@atlaskit/tooltip';
 
@@ -32,7 +36,12 @@ export const ColumnResizeWidget = ({
 
   return (
     <Tooltip
-      content={formatMessage(messages.adjustColumns)}
+      content={
+        <ToolTipContent
+          description={formatMessage(messages.adjustColumns)}
+          keymap={startColumnResizing}
+        />
+      }
       hideTooltipOnClick
       hideTooltipOnMouseDown
       position="mouse"

package/src/ui/FloatingContextualButton/index.tsx

@@ -5,7 +5,6 @@ import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import { injectIntl } from 'react-intl-next';
 
-import type { TableLayout } from '@atlaskit/adf-schema';
 import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
@@ -37,7 +36,6 @@ export interface Props {
   mountPoint?: HTMLElement;
   boundariesElement?: HTMLElement;
   scrollableElement?: HTMLElement;
-  layout?: TableLayout;
   isNumberColumnEnabled?: boolean;
   stickyHeader?: RowStickyState;
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;

package/src/ui/FloatingDragMenu/DropdownMenu.tsx

@@ -11,6 +11,7 @@ import {
 import { withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 
 import { dragMenuDropdownWidth } from '../consts';
 
@@ -63,6 +64,13 @@ export const DropdownMenu = ({
   const handleRef = (ref: HTMLDivElement | null) => {
     setTargetRefDiv(ref);
   };
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  let offsetY =
+    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
+  let offsetX =
+    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
+
   const innerMenu = () => {
     return (
       <DropListWithOutsideListeners
@@ -109,15 +117,38 @@ export const DropdownMenu = ({
   };
 
   if (disableKeyboardHandling) {
-    return innerMenu();
+    if (
+      getBooleanFF(
+        'platform.editor.table.background-color-flicker-in-drag-menu',
+      )
+    ) {
+      // This part need be refactor when clean up the ff, to reuse the wrapper
+      return (
+        <div className="drag-dropdown-menu-wrapper">
+          <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
+          <Popup
+            target={targetRefDiv as HTMLElement}
+            mountTo={mountPoint}
+            boundariesElement={boundariesElement}
+            scrollableElement={scrollableElement}
+            onPlacementChanged={(placement: [string, string]) => {
+              setPopupPlacement(placement);
+            }}
+            fitHeight={fitHeight}
+            fitWidth={fitWidth}
+            zIndex={akEditorFloatingPanelZIndex}
+            offset={[offsetX, offsetY]}
+            allowOutOfBounds // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
+          >
+            {innerMenu()}
+          </Popup>
+        </div>
+      );
+    } else {
+      return innerMenu();
+    }
   }
 
-  // more offsets calculation as offsets depend on the direction and updated placement here
-  let offsetY =
-    direction === 'row' ? (popupPlacement[0] === 'bottom' ? -8 : -34) : 0;
-  let offsetX =
-    direction === 'column' ? (popupPlacement[1] === 'left' ? 0 : -7) : 0;
-
   return (
     <div className="drag-dropdown-menu-wrapper">
       <div className="drag-dropdown-menu-popup-ref" ref={handleRef}></div>
@@ -138,6 +169,7 @@ export const DropdownMenu = ({
         <ArrowKeyNavigationProvider
           closeOnTab
           type={ArrowKeyNavigationType.MENU}
+          handleClose={() => handleClose('handle')}
           onSelection={(index) => {
             const results = items.flatMap((item) =>
               'items' in item ? item.items : item,

package/src/ui/common-styles.ts

@@ -23,7 +23,7 @@ import {
 } from '@atlaskit/editor-shared-styles';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
+import { N0, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { token } from '@atlaskit/tokens';
 
@@ -259,36 +259,6 @@ const tableStickyHeaderFirefoxFixStyle = () => {
   }
 };
 
-const tableWrapperStyles = () => {
-  if (getBooleanFF('platform.editor.custom-table-width')) {
-    return css`
-      .${ClassName.TABLE_NODE_WRAPPER} {
-        padding-bottom: 0px;
-        /* fixes gap cursor height */
-        overflow: auto;
-        overflow-y: hidden;
-        position: relative;
-
-        > table[data-number-column='true'] {
-          width: calc(100% - 1px);
-        }
-      }
-    `;
-  } else {
-    return css`
-      .${ClassName.TABLE_NODE_WRAPPER} {
-        padding-right: ${insertColumnButtonOffset}px;
-        margin-right: -${insertColumnButtonOffset}px;
-        padding-bottom: 0px;
-        /* fixes gap cursor height */
-        overflow: auto;
-        overflow-y: hidden;
-        position: relative;
-      }
-    `;
-  }
-};
-
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   ${tableSharedStyle()};
@@ -608,9 +578,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
 
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
     .${ClassName.CORNER_CONTROLS}, .${ClassName.CONTROLS_CORNER_BUTTON} {
-      width: ${getBooleanFF('platform.editor.custom-table-width')
-        ? akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1
-        : akEditorTableToolbarSize + akEditorTableNumberColumnWidth}px;
+      width: ${akEditorTableToolbarSize + akEditorTableNumberColumnWidth + 1}px;
     }
     .${ClassName.ROW_CONTROLS} .${ClassName.CONTROLS_BUTTON} {
       border-right-width: 0;
@@ -861,9 +829,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   .${ClassName.NUMBERED_COLUMN} {
     position: relative;
     float: right;
-    margin-left: ${getBooleanFF('platform.editor.custom-table-width')
-      ? akEditorTableToolbarSize
-      : akEditorTableToolbarSize - 1}px;
+    margin-left: ${akEditorTableToolbarSize}px;
     top: ${props.featureFlags?.tableDragAndDrop
       ? 0
       : akEditorTableToolbarSize}px;
@@ -914,9 +880,7 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
       display: block;
     }
     .${ClassName.NUMBERED_COLUMN} {
-      padding-left: ${getBooleanFF('platform.editor.custom-table-width')
-        ? 0
-        : 1}px;
+      padding-left: 0px;
 
       .${ClassName.NUMBERED_COLUMN_BUTTON} {
         border-left: 0 none;
@@ -1082,23 +1046,21 @@ export const baseTableStyles = (props: { featureFlags?: FeatureFlags }) => css`
     z-index: ${akEditorTableCellOnStickyHeaderZIndex - 4};
   }
 
-  ${tableWrapperStyles()}
+  .${ClassName.TABLE_NODE_WRAPPER} {
+    padding-bottom: 0px;
+    /* fixes gap cursor height */
+    overflow: auto;
+    overflow-y: hidden;
+    position: relative;
+
+    > table[data-number-column='true'] {
+      width: calc(100% - 1px);
+    }
+  }
 `;
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4139
 export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
-  .${ClassName.LAYOUT_BUTTON} button {
-    background: ${token('color.background.neutral', N20A)};
-    color: ${token('color.icon', N300)};
-    cursor: none;
-  }
-
-  .${ClassName.LAYOUT_BUTTON}:not(.${ClassName.IS_RESIZING}) button:hover {
-    background: ${token('color.background.neutral.hovered', B300)};
-    color: ${token('color.icon', 'white')} !important;
-    cursor: pointer;
-  }
-
   .ProseMirror {
     ${baseTableStyles(props)}
   }

package/src/ui/ui-styles.ts

@@ -374,9 +374,7 @@ export const OverflowShadow = (
         ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
         transparent 1px
       );
-    left: ${getBooleanFF('platform.editor.custom-table-width')
-      ? `calc(100% - ${tableOverflowShadowWidthWide}px)`
-      : `calc(100% - ${tableOverflowShadowWidthWide - 10}px)`};
+    left: calc(100% - ${tableOverflowShadowWidthWide}px);
   }
   .${ClassName.WITH_CONTROLS} {
     ${overflowShadowWidhoutDnD(isDragAndDropEnabled)}
@@ -439,26 +437,24 @@ const columnHeaderButtonSelected = () =>
   });
 
 const getFloatingDotOverrides = () => {
-  return getBooleanFF('platform.editor.custom-table-width')
-    ? css`
-        tr
-          th:last-child
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
-          tr
-          td:last-child
-          .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
-          content: '';
-          background-color: ${tableBorderColor};
-          position: absolute;
-          height: ${lineMarkerSize}px;
-          width: ${lineMarkerSize}px;
-          border-radius: 50%;
-          pointer-events: none;
-          top: ${token('space.025', '2px')};
-          right: 0px;
-        }
-      `
-    : '';
+  return css`
+    tr
+      th:last-child
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before,
+      tr
+      td:last-child
+      .${ClassName.COLUMN_CONTROLS_DECORATIONS}::before {
+      content: '';
+      background-color: ${tableBorderColor};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: ${token('space.025', '2px')};
+      right: 0px;
+    }
+  `;
 };
 
 export const floatingColumnControls = () => {
@@ -755,29 +751,6 @@ export const hoveredWarningCell = css`
   }
 `;
 
-// move the resize handle zone completely inside the table cell to avoid overflow
-const getLastColumnResizerOverrides = () => {
-  return getBooleanFF('platform.editor.custom-table-width')
-    ? css`
-        tr
-          th:last-child
-          .${ClassName.RESIZE_HANDLE_DECORATION},
-          tr
-          td:last-child
-          .${ClassName.RESIZE_HANDLE_DECORATION} {
-          background-color: transparent;
-          position: absolute;
-          width: ${resizeHandlerAreaWidth / 2}px;
-          height: 100%;
-          top: 0;
-          right: 0;
-          cursor: col-resize;
-          z-index: ${resizeHandlerZIndex};
-        }
-      `
-    : '';
-};
-
 // Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const resizeHandleOverrides = (isDragAndDropEnabled: boolean | undefined) => {
@@ -868,7 +841,21 @@ export const resizeHandle = (isDragAndDropEnabled: boolean | undefined) => css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    ${getLastColumnResizerOverrides()}
+    tr
+      th:last-child
+      .${ClassName.RESIZE_HANDLE_DECORATION},
+      tr
+      td:last-child
+      .${ClassName.RESIZE_HANDLE_DECORATION} {
+      background-color: transparent;
+      position: absolute;
+      width: ${resizeHandlerAreaWidth / 2}px;
+      height: 100%;
+      top: 0;
+      right: 0;
+      cursor: col-resize;
+      z-index: ${resizeHandlerZIndex};
+    }
 
     ${resizeHandleOverrides(isDragAndDropEnabled)}
 

package/src/utils/index.ts

@@ -23,7 +23,6 @@ export {
   checkIfHeaderColumnEnabled,
   checkIfHeaderRowEnabled,
   checkIfNumberColumnEnabled,
-  isLayoutSupported,
   getTableWidth,
   tablesHaveDifferentColumnWidths,
   tablesHaveDifferentNoOfColumns,

package/src/utils/nodes.ts

@@ -4,12 +4,9 @@ import type {
   EditorState,
   Selection,
 } from '@atlaskit/editor-prosemirror/state';
-import { hasParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
 
-import { pluginKey } from '../pm-plugins/plugin-key';
-
 export const isIsolating = (node: PmNode): boolean => {
   return !!node.type.spec.isolating;
 };
@@ -63,26 +60,6 @@ export const checkIfNumberColumnEnabled = (selection: Selection): boolean =>
     false,
   );
 
-export const isLayoutSupported = (state: EditorState): boolean => {
-  const { permittedLayouts } = pluginKey.getState(state)?.pluginConfig || {};
-  const { bodiedExtension, layoutSection, expand, extensionFrame } =
-    state.schema.nodes;
-
-  return (
-    !hasParentNodeOfType([
-      expand,
-      layoutSection,
-      bodiedExtension,
-      extensionFrame,
-    ])(state.selection) &&
-    !!permittedLayouts &&
-    (permittedLayouts === 'all' ||
-      (permittedLayouts.indexOf('default') > -1 &&
-        permittedLayouts.indexOf('wide') > -1 &&
-        permittedLayouts.indexOf('full-width') > -1))
-  );
-};
-
 export const getTableWidth = (node: PmNode) => {
   return getTableWidths(node).reduce((acc, current) => acc + current, 0);
 };

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

@@ -1,206 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-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 = _interopRequireWildcard(require("react"));
-var _classnames2 = _interopRequireDefault(require("classnames"));
-var _reactIntlNext = require("react-intl-next");
-var _messages = _interopRequireDefault(require("@atlaskit/editor-common/messages"));
-var _ui = require("@atlaskit/editor-common/ui");
-var _uiMenu = require("@atlaskit/editor-common/ui-menu");
-var _utils = require("@atlaskit/editor-prosemirror/utils");
-var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
-var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
-var _commandsWithAnalytics = require("../../commands-with-analytics");
-var _types = require("../../types");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var addPopupOffset = function addPopupOffset(pos) {
-  return _objectSpread(_objectSpread({}, pos), {}, {
-    // add 12 pixels to align y position with
-    //the columns controls
-    top: pos.top ? pos.top + 12 : undefined
-  });
-};
-var getMessage = function getMessage(layout) {
-  switch (layout) {
-    case 'default':
-      return _messages.default.layoutWide;
-    case 'wide':
-      return _messages.default.layoutFullWidth;
-    default:
-      return _messages.default.layoutFixedWidth;
-  }
-};
-var LayoutButton = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2.default)(LayoutButton, _React$Component);
-  var _super = _createSuper(LayoutButton);
-  function LayoutButton() {
-    var _this;
-    (0, _classCallCheck2.default)(this, LayoutButton);
-    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), "stickyButtonRef", /*#__PURE__*/(0, _react.createRef)());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "resizeObserver", new ResizeObserver(function (entries) {
-      entries.forEach(function () {
-        var resizeButton = _this.stickyButtonRef.current;
-        var tableWrapper = _this.props.targetRef;
-        if (resizeButton && tableWrapper) {
-          var clientRect = tableWrapper.getBoundingClientRect();
-          resizeButton.style.left = "".concat(clientRect.right, "px");
-        }
-      });
-    }));
-    (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;
-      (0, _commandsWithAnalytics.toggleTableLayoutWithAnalytics)(_this.props.editorAnalyticsAPI)(state, dispatch);
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(LayoutButton, [{
-    key: "getTitle",
-    value: function getTitle() {
-      var _this$props = this.props,
-        formatMessage = _this$props.intl.formatMessage,
-        _this$props$layout = _this$props.layout,
-        layout = _this$props$layout === void 0 ? 'default' : _this$props$layout;
-      return formatMessage(getMessage(layout));
-    }
-  }, {
-    key: "toolbarButton",
-    value: function toolbarButton() {
-      var _this$props2 = this.props,
-        isResizing = _this$props2.isResizing,
-        _this$props2$layout = _this$props2.layout,
-        layout = _this$props2$layout === void 0 ? 'default' : _this$props2$layout;
-      var title = this.getTitle();
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: (0, _classnames2.default)(_types.TableCssClassName.LAYOUT_BUTTON, (0, _defineProperty2.default)({}, _types.TableCssClassName.IS_RESIZING, isResizing))
-      }, /*#__PURE__*/_react.default.createElement(_uiMenu.ToolbarButton, {
-        title: title,
-        onClick: this.handleClick,
-        iconBefore: layout === 'full-width' ? /*#__PURE__*/_react.default.createElement(_collapse.default, {
-          label: title
-        }) : /*#__PURE__*/_react.default.createElement(_expand.default, {
-          label: title
-        })
-      }));
-    }
-  }, {
-    key: "getStickyTargetRef",
-    value: function getStickyTargetRef(pos) {
-      var editorView = this.props.editorView;
-      var domAtPos = editorView.domAtPos.bind(editorView);
-      var node = (0, _utils.findDomRefAtPos)(pos, domAtPos);
-      return node.dataset['headerRow'] && node.classList.contains('sticky') ? node : null;
-    }
-  }, {
-    key: "renderSticky",
-    value: function renderSticky(button, targetRef, tableRef) {
-      var title = this.getTitle();
-      if (!(targetRef instanceof HTMLElement) || !(tableRef instanceof HTMLElement)) {
-        return null;
-      }
-      var pos = targetRef.getBoundingClientRect();
-      var tablePos = tableRef.getBoundingClientRect();
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: this.stickyButtonRef,
-        "aria-label": title,
-        style: {
-          position: 'fixed',
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          top: pos.top + 22,
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
-          left: tablePos.right
-        }
-      }, button);
-    }
-  }, {
-    key: "renderPopup",
-    value: function renderPopup(button) {
-      var _this$props3 = this.props,
-        mountPoint = _this$props3.mountPoint,
-        boundariesElement = _this$props3.boundariesElement,
-        scrollableElement = _this$props3.scrollableElement,
-        targetRef = _this$props3.targetRef;
-      if (!targetRef) {
-        return null;
-      }
-      var title = this.getTitle();
-      return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
-        ariaLabel: title,
-        target: targetRef,
-        alignY: "start",
-        alignX: "end",
-        onPositionCalculated: addPopupOffset,
-        stick: true,
-        mountTo: mountPoint,
-        boundariesElement: boundariesElement,
-        scrollableElement: scrollableElement,
-        forcePlacement: true
-      }, button);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var stickyHeader = this.props.stickyHeader;
-      var button = this.toolbarButton();
-      var stickyTargetRef = stickyHeader && stickyHeader.sticky && stickyHeader.pos ? this.getStickyTargetRef(stickyHeader.pos) : null;
-      if (stickyTargetRef && this.props.targetRef) {
-        return this.renderSticky(button, stickyTargetRef, this.props.targetRef);
-      } else {
-        return this.renderPopup(button);
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var dom = this.props.editorView.dom;
-      var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-      if (scrollPanel instanceof HTMLElement) {
-        this.resizeObserver.observe(scrollPanel);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      var dom = this.props.editorView.dom;
-      var scrollPanel = dom.closest('.fabric-editor-popup-scroll-parent');
-      if (scrollPanel instanceof HTMLElement) {
-        this.resizeObserver.unobserve(scrollPanel);
-      }
-    }
-  }, {
-    key: "shouldComponentUpdate",
-    value: function shouldComponentUpdate(nextProps) {
-      var _this$props4 = this.props,
-        targetRef = _this$props4.targetRef,
-        layout = _this$props4.layout,
-        isResizing = _this$props4.isResizing,
-        stickyHeader = _this$props4.stickyHeader;
-      return stickyHeader !== nextProps.stickyHeader || targetRef !== nextProps.targetRef || layout !== nextProps.layout || isResizing !== nextProps.isResizing;
-    }
-  }]);
-  return LayoutButton;
-}(_react.default.Component);
-(0, _defineProperty2.default)(LayoutButton, "displayName", 'LayoutButton');
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(LayoutButton);