@atlaskit/editor-plugin-insert-block 0.2.18 → 0.2.20

package/dist/es2019/ui/ToolbarInsertBlock/index.js

@@ -15,6 +15,7 @@ import * as colors from '@atlaskit/theme/colors';
 import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 import { messages } from './messages';
+import TableSelectorPopup from './table-selector-popup-with-listeners';
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
@@ -31,10 +32,13 @@ const getHoverStyles = selector => `&:hover ${selector} {
       background: ${`var(--ds-background-neutral-hovered, ${colors.N30A})`};
     }
   }`;
-export const tableButtonWrapper = css`
+export const tableButtonWrapper = ({
+  isTableSelectorOpen,
+  isButtonDisabled
+}) => css`
   display: flex;
-  ${getHoverStyles('.table-selector-toolbar-btn')}
-  ${getHoverStyles('.table-toolbar-btn')}
+  ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn')}
+  ${!isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn')}
 
   .table-toolbar-btn {
     border-top-right-radius: ${"var(--ds-border-radius-200, 0px)"};
@@ -42,6 +46,7 @@ export const tableButtonWrapper = css`
     margin-right: ${"var(--ds-space-025, 1px)"};
     padding: ${"var(--ds-space-0, 0px)"};
     & > span {
+      min-width: 16px;
       margin: ${"var(--ds-space-0, 0px)"};
     }
   }
@@ -63,6 +68,8 @@ export const tableButtonWrapper = css`
 export class ToolbarInsertBlock extends React.PureComponent {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "tableButtonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(this, "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -169,6 +176,26 @@ export class ToolbarInsertBlock extends React.PureComponent {
         this.dropdownButtonRef = ref;
       }
     });
+    _defineProperty(this, "toggleTableSelector", (inputMethod = INPUT_METHOD.TOOLBAR) => {
+      this.setState(prevState => ({
+        isTableSelectorOpen: !prevState.isTableSelectorOpen
+      }));
+    });
+    _defineProperty(this, "handleSelectedTableSize", (rowsCount, colsCount) => {
+      this.insertTableWithSize(INPUT_METHOD.TOOLBAR, rowsCount, colsCount)();
+      this.toggleTableSelector();
+    });
+    _defineProperty(this, "handleTableSelectorPressEscape", () => {
+      var _this$tableSelectorBu;
+      this.toggleTableSelector(INPUT_METHOD.KEYBOARD);
+      (_this$tableSelectorBu = this.tableSelectorButtonRef.current) === null || _this$tableSelectorBu === void 0 ? void 0 : _this$tableSelectorBu.focus();
+    });
+    _defineProperty(this, "handleTableSelectorClickOutside", e => {
+      // Ignore click events for detached elements.
+      if (e.target && !isDetachedElement(e.target)) {
+        this.toggleTableSelector(INPUT_METHOD.TOOLBAR);
+      }
+    });
     _defineProperty(this, "handleClick", () => {
       this.togglePlusMenuVisibility();
     });
@@ -183,11 +210,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
       }
     });
     _defineProperty(this, "toggleLinkPanel", inputMethod => {
-      var _pluginInjectionApi$c, _pluginInjectionApi$h;
+      var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
       const {
         pluginInjectionApi
       } = this.props;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
+      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$h = pluginInjectionApi.hyperlink) === null || _pluginInjectionApi$h === void 0 ? void 0 : _pluginInjectionApi$h.commands.showLinkToolbar(inputMethod))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
     });
     _defineProperty(this, "insertMention", inputMethod => {
       var _pluginInjectionApi$m, _pluginInjectionApi$m2, _pluginInjectionApi$m3;
@@ -225,18 +252,18 @@ export class ToolbarInsertBlock extends React.PureComponent {
       })(state, dispatch)) !== null && _pluginInjectionApi$t !== void 0 ? _pluginInjectionApi$t : false;
     });
     _defineProperty(this, "insertTableWithSize", (inputMethod, rowsCount, colsCount) => () => {
-      var _pluginInjectionApi$t5;
+      var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
       const {
         pluginInjectionApi
       } = this.props;
-      return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
+      return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
     });
     _defineProperty(this, "createDate", inputMethod => {
-      var _pluginInjectionApi$d, _pluginInjectionApi$d2;
+      var _pluginInjectionApi$c4, _pluginInjectionApi$d, _pluginInjectionApi$d2;
       const {
         pluginInjectionApi
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 ? void 0 : (_pluginInjectionApi$d2 = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.insertDate({
         inputMethod
       }));
       return true;
@@ -335,21 +362,21 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return true;
     });
     _defineProperty(this, "handleSelectedEmoji", emojiId => {
-      var _pluginInjectionApi$e3;
+      var _pluginInjectionApi$c5, _pluginInjectionApi$e3;
       const {
         pluginInjectionApi
       } = this.props;
       this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === void 0 ? void 0 : _pluginInjectionApi$c5.actions.execute((_pluginInjectionApi$e3 = pluginInjectionApi.emoji) === null || _pluginInjectionApi$e3 === void 0 ? void 0 : _pluginInjectionApi$e3.commands.insertEmoji(emojiId, INPUT_METHOD.PICKER));
       this.toggleEmojiPicker();
       return true;
     });
     _defineProperty(this, "openElementBrowser", () => {
-      var _pluginInjectionApi$q;
+      var _pluginInjectionApi$c6, _pluginInjectionApi$q;
       const {
         pluginInjectionApi
       } = this.props;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 ? void 0 : _pluginInjectionApi$c6.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
     _defineProperty(this, "onItemActivated", ({
       item,
@@ -374,7 +401,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
           this.insertTable(inputMethod);
           break;
         case 'table selector':
-          this.insertTableWithSize(inputMethod, 4, 4)(); // adding command here to pass typecheck but will implement the actual feature in future ticket
+          this.toggleTableSelector(inputMethod);
           break;
         case 'image upload':
           if (handleImageUpload) {
@@ -490,10 +517,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
     };
   }
   componentDidUpdate(prevProps) {
-    // If number of visible buttons changed, close emoji picker
+    // If number of visible buttons changed, close emoji picker and table selector
     if (prevProps.buttons !== this.props.buttons) {
       this.setState({
-        emojiPickerOpen: false
+        emojiPickerOpen: false,
+        isTableSelectorOpen: false
       });
     }
     if (this.state.isOpenedByKeyboard) {
@@ -547,12 +575,37 @@ export class ToolbarInsertBlock extends React.PureComponent {
       handleEscapeKeydown: this.handleEmojiPressEscape
     }));
   }
+  renderTableSelectorPopup() {
+    var _this$tableButtonRef$;
+    const {
+      isTableSelectorOpen
+    } = this.state;
+    const {
+      popupsMountPoint,
+      popupsBoundariesElement,
+      popupsScrollableElement
+    } = this.props;
+    const ref = (_this$tableButtonRef$ = this.tableButtonRef.current) !== null && _this$tableButtonRef$ !== void 0 ? _this$tableButtonRef$ : undefined;
+    if (!isTableSelectorOpen) {
+      return null;
+    }
+    return jsx(TableSelectorPopup, {
+      target: ref,
+      onSelection: this.handleSelectedTableSize,
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      handleClickOutside: this.handleTableSelectorClickOutside,
+      handleEscapeKeydown: this.handleTableSelectorPressEscape
+    });
+  }
   render() {
-    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl;
+    var _tableButton, _tableButton2, _tableButton3, _tableButton4, _tableButton5, _tableButton6, _tableButton7, _tableSelectorButton, _tableSelectorButton2, _tableSelectorButton3, _tableSelectorButton4, _tableSelectorButton5, _tableSelectorButton6, _this$props$isDisable, _this$props$replacePl;
     const {
       buttons,
       dropdownItems,
-      emojiPickerOpen
+      emojiPickerOpen,
+      isTableSelectorOpen
     } = this.state;
     const {
       isDisabled,
@@ -595,20 +648,23 @@ export class ToolbarInsertBlock extends React.PureComponent {
           "aria-keyshortcuts": btn['aria-keyshortcuts'],
           onItemClick: this.insertToolbarMenuItem
         });
-      }), this.props.tableSelectorSupported &&
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      jsx("div", {
-        css: tableButtonWrapper
+      }), this.props.tableSelectorSupported && jsx("div", {
+        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+        css: tableButtonWrapper({
+          isTableSelectorOpen,
+          isButtonDisabled: (_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.isDisabled
+        })
       }, jsx(ToolbarButton, {
         className: "table-toolbar-btn",
         item: tableButton,
-        testId: String((_tableButton = tableButton) === null || _tableButton === void 0 ? void 0 : _tableButton.content),
-        key: (_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.value.name,
+        ref: this.tableButtonRef,
+        testId: String((_tableButton2 = tableButton) === null || _tableButton2 === void 0 ? void 0 : _tableButton2.content),
+        key: (_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.value.name,
         spacing: isReducedSpacing ? 'none' : 'default',
-        disabled: isDisabled || ((_tableButton3 = tableButton) === null || _tableButton3 === void 0 ? void 0 : _tableButton3.isDisabled),
-        iconBefore: (_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.elemBefore,
-        selected: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.isActive,
-        title: (_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.title,
+        disabled: isDisabled || ((_tableButton4 = tableButton) === null || _tableButton4 === void 0 ? void 0 : _tableButton4.isDisabled),
+        iconBefore: (_tableButton5 = tableButton) === null || _tableButton5 === void 0 ? void 0 : _tableButton5.elemBefore,
+        selected: ((_tableButton6 = tableButton) === null || _tableButton6 === void 0 ? void 0 : _tableButton6.isActive) || isTableSelectorOpen,
+        title: (_tableButton7 = tableButton) === null || _tableButton7 === void 0 ? void 0 : _tableButton7.title,
         "aria-label": tableButton ? tableButton['aria-label'] : undefined,
         "aria-haspopup": tableButton ? tableButton['aria-haspopup'] : undefined,
         "aria-keyshortcuts": tableButton ? tableButton['aria-keyshortcuts'] : undefined,
@@ -618,10 +674,11 @@ export class ToolbarInsertBlock extends React.PureComponent {
         item: tableSelectorButton,
         testId: String((_tableSelectorButton = tableSelectorButton) === null || _tableSelectorButton === void 0 ? void 0 : _tableSelectorButton.content),
         key: (_tableSelectorButton2 = tableSelectorButton) === null || _tableSelectorButton2 === void 0 ? void 0 : _tableSelectorButton2.value.name,
+        ref: this.tableSelectorButtonRef,
         spacing: isReducedSpacing ? 'none' : 'default',
         disabled: isDisabled || ((_tableSelectorButton3 = tableSelectorButton) === null || _tableSelectorButton3 === void 0 ? void 0 : _tableSelectorButton3.isDisabled),
         iconBefore: (_tableSelectorButton4 = tableSelectorButton) === null || _tableSelectorButton4 === void 0 ? void 0 : _tableSelectorButton4.elemBefore,
-        selected: (_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive,
+        selected: ((_tableSelectorButton5 = tableSelectorButton) === null || _tableSelectorButton5 === void 0 ? void 0 : _tableSelectorButton5.isActive) || isTableSelectorOpen,
         title: (_tableSelectorButton6 = tableSelectorButton) === null || _tableSelectorButton6 === void 0 ? void 0 : _tableSelectorButton6.title,
         "aria-label": tableSelectorButton ? tableSelectorButton['aria-label'] : undefined,
         "aria-haspopup": tableSelectorButton ? tableSelectorButton['aria-haspopup'] : undefined,
@@ -629,7 +686,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
         onItemClick: this.insertToolbarMenuItem
       })), jsx("span", {
         css: wrapperStyle
-      }, this.renderPopup(), jsx(BlockInsertMenu, {
+      }, this.renderPopup(), this.renderTableSelectorPopup(), jsx(BlockInsertMenu, {
         popupsMountPoint: this.props.popupsMountPoint,
         popupsBoundariesElement: this.props.popupsBoundariesElement,
         popupsScrollableElement: this.props.popupsScrollableElement,

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js

@@ -0,0 +1,101 @@
+/** @jsx jsx */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { bind } from 'bind-event-listener';
+import { Popup } from '@atlaskit/editor-common/ui';
+import { withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { N0, N30A, N60A } from '@atlaskit/theme/colors';
+import tableSelectorPopup, { TABLE_SELECTOR_BUTTON_GAP, TABLE_SELECTOR_BUTTON_SIZE } from './table-selector-popup';
+const TABLE_SELECTOR_PADDING_TOP = 8;
+const TABLE_SELECTOR_PADDING_SIDE = 10;
+const DEFAULT_TABLE_SELECTOR_ROWS = 5;
+const DEFAULT_TABLE_SELECTOR_COLS = 10;
+const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+const tableSelectorPopupWrapperStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`,
+  padding: `${`var(--ds-space-100, ${`${TABLE_SELECTOR_PADDING_TOP}px`})`} ${TABLE_SELECTOR_PADDING_SIDE}px`
+});
+export const TableSelectorPopup = props => {
+  const [size, setSize] = useState({
+    col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+    row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+    maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+    maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+  });
+  const tablePopupRef = useRef(null);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  const handleMouseMove = useCallback(e => {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    const tablePopup = tablePopupRef.current;
+    const {
+      left,
+      top
+    } = tablePopup.getBoundingClientRect();
+
+    // Mouse position on popup
+    const selectedWidth = e.clientX - left;
+    const selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    let selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    let selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+
+    // Keep the selected rows and columns within the defined bounds
+    if (selectedGridCols < 1) {
+      selectedGridCols = 1;
+    }
+    if (selectedGridCols > size.maxCol) {
+      selectedGridCols = size.maxCol;
+    }
+    if (selectedGridRows < 1) {
+      selectedGridRows = 1;
+    }
+    if (selectedGridRows > size.maxRow) {
+      selectedGridRows = size.maxRow;
+    }
+    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
+      setSize({
+        col: selectedGridCols,
+        row: selectedGridRows,
+        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+        maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+      });
+    }
+  }, [size, setSize]);
+  useEffect(() => {
+    const unbind = bind(window, {
+      type: 'mousemove',
+      listener: handleMouseMove
+    });
+    return unbind;
+  }, [handleMouseMove]);
+  return jsx(Popup, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    zIndex: akEditorMenuZIndex
+  }, jsx("div", {
+    css: tableSelectorPopupWrapperStyles,
+    ref: tablePopupRef
+  }, jsx(TableSelectorWithListeners, {
+    handleClickOutside: props.handleClickOutside,
+    handleEscapeKeydown: props.handleEscapeKeydown,
+    maxCols: size.maxCol,
+    maxRows: size.maxRow,
+    onSelection: props.onSelection,
+    selectedCol: size.col,
+    selectedRow: size.row
+  })));
+};
+export default TableSelectorPopup;

package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js

@@ -0,0 +1,102 @@
+/** @jsx jsx */
+import { useMemo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { injectIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { Stack } from '@atlaskit/primitives';
+export const TABLE_SELECTOR_BUTTON_GAP = 2;
+export const TABLE_SELECTOR_BUTTON_SIZE = 17;
+const selectedButtonStyles = css({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: `1px solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
+});
+const buttonStyles = css({
+  height: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
+  width: `${TABLE_SELECTOR_BUTTON_SIZE}px`,
+  border: `1px solid ${"var(--ds-border, #091e4224)"}`,
+  backgroundColor: "var(--ds-background-input, #ffffff)",
+  borderRadius: '3px',
+  cursor: 'pointer',
+  display: 'block',
+  '&:hover': {
+    backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+    border: `1px solid ${"var(--ds-background-accent-blue-subtle, #579DFF)"}`
+  }
+});
+const selectionSizeTextStyles = css({
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+const TableSelectorButton = ({
+  row,
+  col,
+  isActive,
+  onClick,
+  label
+}) => {
+  return jsx("button", {
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: () => onClick(row, col),
+    "aria-label": label
+  });
+};
+const createArray = (maxCols, maxRows) => {
+  const arr = [];
+  for (let i = 1; i < maxRows + 1; i++) {
+    for (let j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+const gridWrapperStyles = ({
+  maxCols,
+  maxRows
+}) => css({
+  display: 'grid',
+  gridTemplateColumns: `repeat(${maxCols}, 1fr)`,
+  gridTemplateRows: `repeat(${maxRows}, 1fr)`,
+  gap: `${`var(--ds-space-025, ${`${TABLE_SELECTOR_BUTTON_GAP}px`})`}`
+});
+const TableSelectorPopup = ({
+  maxCols,
+  maxRows,
+  onSelection,
+  selectedCol,
+  selectedRow,
+  intl
+}) => {
+  const buttons = useMemo(() => {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  return jsx(Stack, null, jsx("div", {
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    gridWrapperStyles({
+      maxCols: maxCols,
+      maxRows: maxRows
+    })
+  }, buttons.map(({
+    col,
+    row
+  }, index) => {
+    const isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return jsx(TableSelectorButton, {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: `${intl.formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
+    });
+  })), jsx("span", {
+    css: selectionSizeTextStyles
+  }, `${selectedRow} x ${selectedCol}`));
+};
+export default injectIntl(TableSelectorPopup);