@atlaskit/editor-plugin-table 1.6.2 → 1.6.3

package/src/__tests__/playwright/extensions.spec.ts

@@ -0,0 +1,67 @@
+import {
+  EditorTableModel,
+  EditorNodeContainerModel,
+  EditorExtensionModel,
+  editorTestCase as test,
+  expect,
+} from '@af/editor-libra';
+import { tableInsideLayoutAfterExtension } from './__fixtures__/base-adfs';
+
+test.use({
+  editorProps: {
+    appearance: 'full-page',
+    allowTables: {
+      advanced: true,
+    },
+    allowLayouts: true,
+    allowExtension: true,
+  },
+
+  editorMountOptions: {
+    withConfluenceMacrosExtensionProvider: true,
+  },
+
+  adf: tableInsideLayoutAfterExtension,
+});
+
+test.describe('when the extension context panel opens', () => {
+  test('should not overflow the table', async ({ editor }) => {
+    const nodes = EditorNodeContainerModel.from(editor);
+    const extensionModel = EditorExtensionModel.from(nodes.bodiedExtension);
+    const tableModel = EditorTableModel.from(nodes.table);
+
+    await editor.selection.set({ anchor: 1, head: 1 });
+
+    await test.step('make sure the table is not overflowed already', async () => {
+      expect(await tableModel.hasOverflowed()).toBeFalsy();
+    });
+
+    await extensionModel.configuration(editor).openContextPanel();
+
+    expect(await tableModel.hasOverflowed()).toBeFalsy();
+  });
+});
+
+test('should not overflow the table when changing viewport', async ({
+  editor,
+}) => {
+  const nodes = EditorNodeContainerModel.from(editor);
+  const tableModel = EditorTableModel.from(nodes.table);
+  await editor.page.setViewportSize({ width: 1000, height: 1024 });
+  await editor.selection.set({ anchor: 1, head: 1 });
+  await tableModel.isSelected();
+  const cell = await tableModel.cell(0);
+  await cell.click();
+  await cell.resize({
+    mouse: editor.page.mouse,
+    cellSide: 'right',
+    moveDirection: 'right',
+    moveDistance: 100,
+  });
+  await test.step('make sure the table is not overflowed already', async () => {
+    expect(await tableModel.hasOverflowed()).toBeFalsy();
+  });
+  await editor.page.setViewportSize({ width: 1050, height: 1024 });
+  await tableModel.isSelected();
+  expect(await tableModel.hasOverflowed()).toBeFalsy();
+});

package/src/__tests__/unit/ui/FixedButton.tsx

@@ -0,0 +1,214 @@
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { render, screen, cleanup } from '@testing-library/react';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import FixedButton, {
+  BUTTON_WIDTH,
+  calcLeftPos,
+  calcObserverTargetMargin,
+} from '../../../plugins/table/ui/FloatingContextualButton/FixedButton';
+
+jest.mock('react-dom', () => ({
+  createPortal: jest.fn((node: React.ReactNode) => node),
+}));
+
+describe('calcLeftPos()', () => {
+  it('should calculate left position', () => {
+    let result = calcLeftPos({
+      buttonWidth: 0,
+      cellRectLeft: 0,
+      cellRefWidth: 0,
+      offset: 0,
+    });
+    expect(result).toEqual(0);
+    result = calcLeftPos({
+      buttonWidth: 20,
+      cellRectLeft: 400,
+      cellRefWidth: 250,
+      offset: 3,
+    });
+    expect(result).toEqual(627);
+  });
+});
+
+describe('calcObserverTargetMargin()', () => {
+  it('should calculate the margin', () => {
+    const mockTableWrapper = document.createElement('div');
+    mockTableWrapper.scrollLeft = 50;
+    const tableSpy = jest.spyOn(mockTableWrapper, 'getBoundingClientRect');
+    tableSpy.mockImplementation(() => ({ left: 800 } as DOMRect));
+
+    const mockButton = document.createElement('div');
+    const buttonSpy = jest.spyOn(mockButton, 'getBoundingClientRect');
+    buttonSpy.mockImplementation(() => ({ left: 1200 } as DOMRect));
+
+    const result = calcObserverTargetMargin(mockTableWrapper, mockButton);
+    expect(result).toEqual(450);
+  });
+});
+
+describe('<FixedButton />', () => {
+  const targetCellRef = document.createElement('div');
+  const fixedButtonRef = {
+    current: document.createElement('div'),
+  };
+  const observerTargetRef = {
+    current: document.createElement('div'),
+  };
+  const props = {
+    offset: 10,
+    stickyHeader: {
+      pos: 0,
+      top: 0,
+      padding: 0,
+      sticky: true,
+    },
+    targetCellPosition: 0,
+    targetCellRef,
+    mountTo: document.createElement('div'),
+    tableWrapper: document.createElement('div'),
+    fixedButtonRef,
+    observerTargetRef,
+    isContextualMenuOpen: false,
+  };
+  const MockChildren = () => <div data-testid="mock-children" />;
+
+  it('should render children', () => {
+    render(
+      <FixedButton {...props}>
+        <MockChildren />
+      </FixedButton>,
+    );
+    expect(screen.getByTestId('mock-children')).toBeInTheDocument();
+  });
+
+  it('should render using createPortal', () => {
+    render(
+      <FixedButton {...props}>
+        <MockChildren />
+      </FixedButton>,
+    );
+    expect(createPortal).toBeCalled();
+  });
+
+  describe('observerTargetRef', () => {
+    it('should have correct inital styles', () => {
+      const { container } = render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild).toHaveStyle(
+        `top: 0px; left: 0px; position: absolute; width: ${BUTTON_WIDTH}px; height: ${BUTTON_WIDTH}px`,
+      );
+    });
+
+    it('should have correct "margin-left" style', () => {
+      const mockTableWrapper = document.createElement('div');
+      mockTableWrapper.scrollLeft = 123;
+      const { container } = render(
+        <FixedButton {...props} tableWrapper={mockTableWrapper}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(container.firstChild).toHaveStyle(`margin-left: 123px;`);
+    });
+  });
+
+  describe('fixedButtonRef', () => {
+    it('should have correct "top" style', () => {
+      const { container, rerender } = render(
+        <FixedButton {...props} offset={10}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 20px;`);
+
+      rerender(
+        <FixedButton
+          {...props}
+          stickyHeader={{ pos: 0, top: 3, padding: 0, sticky: true }}
+        >
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 23px;`);
+
+      rerender(
+        <FixedButton
+          {...props}
+          stickyHeader={{ pos: 0, top: 0, padding: 2, sticky: true }}
+        >
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`top: 22px;`);
+    });
+
+    it('should have correct "left" style', () => {
+      const mockRef = document.createElement('div');
+      const mockRefSpy = jest.spyOn(mockRef, 'getBoundingClientRect');
+      mockRefSpy.mockImplementation(() => ({ left: 3 } as DOMRect));
+
+      const { container } = render(
+        <FixedButton {...props} targetCellRef={mockRef}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(`left: -27px;`);
+    });
+
+    it('should have correct "z-index" style', () => {
+      const { container } = render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+      expect(container.firstChild?.firstChild).toHaveStyle(
+        `z-index: ${akEditorFloatingPanelZIndex}`,
+      );
+    });
+  });
+
+  describe('useEffect()', () => {
+    const observe = jest.fn();
+    const unobserve = jest.fn();
+
+    window.IntersectionObserver = jest.fn((callback) => {
+      callback([{ isIntersecting: true }]);
+      return {
+        observe,
+        unobserve,
+      };
+    }) as any;
+
+    it('should add / remove event listener to the table wrapper', () => {
+      const mockTableWrapper = document.createElement('div');
+      const addSpy = jest.spyOn(mockTableWrapper, 'addEventListener');
+      const removeSpy = jest.spyOn(mockTableWrapper, 'removeEventListener');
+
+      render(
+        <FixedButton {...props} tableWrapper={mockTableWrapper}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(addSpy).toBeCalled();
+      cleanup();
+      expect(removeSpy).toBeCalled();
+    });
+
+    it('should observe / unobserve an InterSectionObserver', () => {
+      render(
+        <FixedButton {...props}>
+          <MockChildren />
+        </FixedButton>,
+      );
+
+      expect(observe).toHaveBeenCalled();
+      cleanup();
+      expect(unobserve).toHaveBeenCalled();
+    });
+  });
+});

package/src/plugins/table/index.tsx

@@ -387,6 +387,7 @@ const tablesPlugin: NextEditorPlugin<
                         isContextualMenuOpen={isContextualMenuOpen}
                         layout={layout}
                         stickyHeader={stickyHeader}
+                        tableWrapper={tableWrapperTarget}
                       />
                     )}
                   {allowControls && (

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -611,7 +611,7 @@ export class TableRowNodeView implements NodeView {
       return;
     }
 
-    const { table } = tree;
+    const { table, wrapper } = tree;
 
     // ED-16035 Make sure sticky header is only applied to first row
     const tbody = this.dom.parentElement;
@@ -639,6 +639,7 @@ export class TableRowNodeView implements NodeView {
 
     this.dom.style.top = `${domTop}px`;
     updateTableMargin(table);
+    this.dom.scrollLeft = wrapper.scrollLeft;
 
     this.emitOn(domTop, this.colControlsOffset);
   };

package/src/plugins/table/types.ts

@@ -289,6 +289,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

package/src/plugins/table/ui/FloatingContextualButton/FixedButton.tsx

@@ -0,0 +1,175 @@
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import rafSchedule from 'raf-schd';
+
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
+import { RowStickyState } from '../../pm-plugins/sticky-headers';
+import { insertColumnButtonOffset } from '../common-styles';
+import { TableCssClassName as ClassName } from '../../types';
+
+export 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 const calcLeftPos = ({
+  buttonWidth,
+  cellRectLeft,
+  cellRefWidth,
+  offset,
+}: CalcLeftPosData) => {
+  return cellRectLeft + cellRefWidth - buttonWidth - offset;
+};
+
+export const calcObserverTargetMargin = (
+  tableWrapper: HTMLElement,
+  fixedButtonRefCurrent: HTMLElement,
+) => {
+  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,
+}: Props) => {
+  const fixedButtonRef = useRef<HTMLDivElement | null>(null);
+  const observerTargetRef = useRef<HTMLDivElement | null>(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 createPortal(
+    // 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.
+    <div
+      ref={observerTargetRef}
+      style={{
+        position: 'absolute',
+        top: '0px',
+        left: '0px',
+        width: `${BUTTON_WIDTH}px`,
+        height: `${BUTTON_WIDTH}px`,
+      }}
+    >
+      <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}
+      </div>
+    </div>,
+    mountTo,
+  );
+};
+
+export default FixedButton;

package/src/plugins/table/ui/FloatingContextualButton/index.tsx

@@ -8,30 +8,19 @@ import { WrappedComponentProps, injectIntl } from 'react-intl-next';
 
 import { TableLayout } from '@atlaskit/adf-schema';
 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 { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
 import messages from '../../ui/messages';
+import FixedButton from './FixedButton';
 
-import {
-  DispatchAnalyticsEvent,
-  AnalyticsEventPayload,
-  CONTENT_COMPONENT,
-} from '@atlaskit/editor-common/analytics';
-import {
-  ACTION,
-  ACTION_SUBJECT,
-  EVENT_TYPE,
-} from '@atlaskit/editor-common/analytics';
+import { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
 import {
   tableFloatingCellButtonStyles,
   tableFloatingCellButtonSelectedStyles,
@@ -42,6 +31,7 @@ import { ThemeProps } from '@atlaskit/theme/types';
 
 export interface Props {
   editorView: EditorView;
+  tableWrapper?: HTMLElement;
   tableNode?: PMNode;
   targetCellPosition: number;
   isContextualMenuOpen?: boolean;
@@ -54,58 +44,41 @@ export interface Props {
   dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
 }
 
-export class FloatingContextualButtonInner extends React.Component<
-  Props & WrappedComponentProps,
-  any
-> {
-  static displayName = 'FloatingContextualButton';
+const BUTTON_OFFSET = 3;
 
-  render() {
+const FloatingContextualButtonInner = React.memo(
+  (props: Props & WrappedComponentProps) => {
     const {
+      editorView,
+      isContextualMenuOpen,
       mountPoint,
       scrollableElement,
-      editorView,
+      stickyHeader,
+      tableWrapper,
       targetCellPosition,
-      isContextualMenuOpen,
       intl: { formatMessage },
-      dispatchAnalyticsEvent,
-    } = this.props; //  : Props & WrappedComponentProps
+    } = 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);
+      }
+    };
+
     const domAtPos = editorView.domAtPos.bind(editorView);
     let targetCellRef: Node | undefined;
-    try {
-      targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
-    } catch (error) {
-      // eslint-disable-next-line no-console
-      console.warn(error);
-      if (dispatchAnalyticsEvent) {
-        const payload: AnalyticsEventPayload = {
-          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);
-      }
-    }
+    targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
 
     if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
       return null;
     }
 
-    const tableWrapper = closestElement(
-      targetCellRef,
-      `.${ClassName.TABLE_NODE_WRAPPER}`,
-    );
-
     const labelCellOptions = formatMessage(messages.cellOptions);
 
     const button = (
@@ -120,7 +93,7 @@ export class FloatingContextualButtonInner extends React.Component<
           className={ClassName.CONTEXTUAL_MENU_BUTTON}
           selected={isContextualMenuOpen}
           title={labelCellOptions}
-          onClick={this.handleClick}
+          onClick={handleClick}
           iconBefore={<ExpandIcon label="" />}
           aria-label={labelCellOptions}
         />
@@ -130,24 +103,19 @@ export class FloatingContextualButtonInner extends React.Component<
     const parentSticky =
       targetCellRef.parentElement &&
       targetCellRef.parentElement.className.indexOf('sticky') > -1;
-    if (this.props.stickyHeader && parentSticky) {
-      const pos = targetCellRef.getBoundingClientRect();
-
+    if (stickyHeader && parentSticky && tableWrapper) {
       return (
-        <div
-          style={{
-            position: 'fixed',
-            top:
-              this.props.stickyHeader.top +
-              this.props.stickyHeader.padding +
-              3 +
-              3,
-            zIndex: akEditorFloatingOverlapPanelZIndex,
-            left: pos.left + targetCellRef.clientWidth - 20 - 3,
-          }}
+        <FixedButton
+          offset={BUTTON_OFFSET}
+          stickyHeader={stickyHeader}
+          tableWrapper={tableWrapper}
+          targetCellPosition={targetCellPosition}
+          targetCellRef={targetCellRef}
+          mountTo={tableWrapper}
+          isContextualMenuOpen={isContextualMenuOpen}
         >
           {button}
-        </div>
+        </FixedButton>
       );
     }
 
@@ -159,7 +127,7 @@ export class FloatingContextualButtonInner extends React.Component<
         mountTo={tableWrapper || mountPoint}
         boundariesElement={targetCellRef}
         scrollableElement={scrollableElement}
-        offset={[3, -3]}
+        offset={[BUTTON_OFFSET, -BUTTON_OFFSET]}
         forcePlacement
         allowOutOfBounds
         zIndex={akEditorSmallZIndex}
@@ -167,30 +135,8 @@ export class FloatingContextualButtonInner extends React.Component<
         {button}
       </Popup>
     );
-  }
-
-  shouldComponentUpdate(nextProps: Props) {
-    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
-    );
-  }
-  private 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);
-    }
-  };
-}
+  },
+);
 
 const FloatingContextualButton = injectIntl(FloatingContextualButtonInner);