@atlaskit/editor-plugin-insert-block 0.2.17 → 0.2.19

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();
     });
@@ -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);

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

@@ -31,6 +31,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)
  */
@@ -45,7 +46,11 @@ var TABLE_SELECTOR_STRING = 'table selector';
 var getHoverStyles = function getHoverStyles(selector) {
   return "&:hover ".concat(selector, " {\n    background: ", "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N20A, ")"), ";\n\n    &:hover {\n      background: ", "var(--ds-background-neutral-hovered, ".concat(colors.N30A, ")"), ";\n    }\n  }");
 };
-export var tableButtonWrapper = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  ", "\n\n  .table-toolbar-btn {\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n    & > span {\n      margin: ", ";\n    }\n  }\n  .table-selector-toolbar-btn {\n    padding: ", ";\n    & > span {\n      margin: ", ";\n      width: 16px !important;\n      display: flex;\n      justify-content: center;\n    }\n\n    border-top-left-radius: ", " !important;\n    border-bottom-left-radius: ", " !important;\n  }\n"])), getHoverStyles('.table-selector-toolbar-btn'), getHoverStyles('.table-toolbar-btn'), "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-space-025, 1px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)");
+export var tableButtonWrapper = function tableButtonWrapper(_ref) {
+  var isTableSelectorOpen = _ref.isTableSelectorOpen,
+    isButtonDisabled = _ref.isButtonDisabled;
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  ", "\n  ", "\n\n  .table-toolbar-btn {\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n    margin-right: ", ";\n    padding: ", ";\n    & > span {\n      min-width: 16px;\n      margin: ", ";\n    }\n  }\n  .table-selector-toolbar-btn {\n    padding: ", ";\n    & > span {\n      margin: ", ";\n      width: 16px !important;\n      display: flex;\n      justify-content: center;\n    }\n\n    border-top-left-radius: ", " !important;\n    border-bottom-left-radius: ", " !important;\n  }\n"])), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-selector-toolbar-btn'), !isTableSelectorOpen && !isButtonDisabled && getHoverStyles('.table-toolbar-btn'), "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-space-025, 1px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius-200, 0px)", "var(--ds-border-radius-200, 0px)");
+};
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
@@ -58,6 +63,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "tableButtonRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_assertThisInitialized(_this), "tableSelectorButtonRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -100,8 +107,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         isPlusMenuOpen: !isPlusMenuOpen
       });
       if ((event === null || event === void 0 ? void 0 : event.key) === 'Escape') {
-        var _ref;
-        (_ref = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref === void 0 || _ref.focus();
+        var _ref2;
+        (_ref2 = _this.plusButtonRef || _this.dropdownButtonRef) === null || _ref2 === void 0 || _ref2.focus();
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleEmojiPicker", function () {
@@ -159,6 +166,29 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _this.dropdownButtonRef = ref;
       }
     });
+    _defineProperty(_assertThisInitialized(_this), "toggleTableSelector", function () {
+      var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : INPUT_METHOD.TOOLBAR;
+      _this.setState(function (prevState) {
+        return {
+          isTableSelectorOpen: !prevState.isTableSelectorOpen
+        };
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleSelectedTableSize", function (rowsCount, colsCount) {
+      _this.insertTableWithSize(INPUT_METHOD.TOOLBAR, rowsCount, colsCount)();
+      _this.toggleTableSelector();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTableSelectorPressEscape", function () {
+      var _this$tableSelectorBu;
+      _this.toggleTableSelector(INPUT_METHOD.KEYBOARD);
+      (_this$tableSelectorBu = _this.tableSelectorButtonRef.current) === null || _this$tableSelectorBu === void 0 || _this$tableSelectorBu.focus();
+    });
+    _defineProperty(_assertThisInitialized(_this), "handleTableSelectorClickOutside", function (e) {
+      // Ignore click events for detached elements.
+      if (e.target && !isDetachedElement(e.target)) {
+        _this.toggleTableSelector(INPUT_METHOD.TOOLBAR);
+      }
+    });
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
       _this.togglePlusMenuVisibility();
     });
@@ -319,9 +349,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$q = pluginInjectionApi.quickInsert) === null || _pluginInjectionApi$q === void 0 ? void 0 : _pluginInjectionApi$q.commands.openElementBrowserModal);
     });
-    _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref2) {
-      var item = _ref2.item,
-        inputMethod = _ref2.inputMethod;
+    _defineProperty(_assertThisInitialized(_this), "onItemActivated", function (_ref3) {
+      var item = _ref3.item,
+        inputMethod = _ref3.inputMethod;
       var _this$props11 = _this.props,
         editorView = _this$props11.editorView,
         editorActions = _this$props11.editorActions,
@@ -340,7 +370,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_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) {
@@ -411,8 +441,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         inputMethod: INPUT_METHOD.TOOLBAR
       });
     });
-    _defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref3) {
-      var item = _ref3.item;
+    _defineProperty(_assertThisInitialized(_this), "insertInsertMenuItem", function (_ref4) {
+      var item = _ref4.item;
       return _this.onItemActivated({
         item: item,
         inputMethod: INPUT_METHOD.INSERT_MENU
@@ -423,10 +453,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(ToolbarInsertBlock, [{
     key: "componentDidUpdate",
     value: function 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) {
@@ -451,8 +482,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         popupsScrollableElement = _this$props12.popupsScrollableElement,
         emojiProvider = _this$props12.emojiProvider,
         replacePlusMenuWithElementBrowser = _this$props12.replacePlusMenuWithElementBrowser;
-      var dropdownEmoji = this.state.dropdownItems.some(function (_ref4) {
-        var name = _ref4.value.name;
+      var dropdownEmoji = this.state.dropdownItems.some(function (_ref5) {
+        var name = _ref5.value.name;
         return name === 'emoji';
       });
       var dropDownButtonRef = replacePlusMenuWithElementBrowser ? this.plusButtonRef : this.dropdownButtonRef;
@@ -477,6 +508,29 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         handleEscapeKeydown: this.handleEmojiPressEscape
       }));
     }
+  }, {
+    key: "renderTableSelectorPopup",
+    value: function renderTableSelectorPopup() {
+      var _this$tableButtonRef$;
+      var isTableSelectorOpen = this.state.isTableSelectorOpen;
+      var _this$props13 = this.props,
+        popupsMountPoint = _this$props13.popupsMountPoint,
+        popupsBoundariesElement = _this$props13.popupsBoundariesElement,
+        popupsScrollableElement = _this$props13.popupsScrollableElement;
+      var 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
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -487,6 +541,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         _tableButton4,
         _tableButton5,
         _tableButton6,
+        _tableButton7,
         _tableSelectorButton,
         _tableSelectorButton2,
         _tableSelectorButton3,
@@ -498,10 +553,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       var _this$state = this.state,
         buttons = _this$state.buttons,
         dropdownItems = _this$state.dropdownItems,
-        emojiPickerOpen = _this$state.emojiPickerOpen;
-      var _this$props13 = this.props,
-        isDisabled = _this$props13.isDisabled,
-        isReducedSpacing = _this$props13.isReducedSpacing;
+        emojiPickerOpen = _this$state.emojiPickerOpen,
+        isTableSelectorOpen = _this$state.isTableSelectorOpen;
+      var _this$props14 = this.props,
+        isDisabled = _this$props14.isDisabled,
+        isReducedSpacing = _this$props14.isReducedSpacing;
       if (buttons.length === 0 && dropdownItems.length === 0) {
         return null;
       }
@@ -548,20 +604,23 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
             "aria-keyshortcuts": btn['aria-keyshortcuts'],
             onItemClick: _this2.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: 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,
@@ -571,10 +630,11 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_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,
@@ -582,7 +642,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_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,