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

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();
     });
@@ -172,9 +202,9 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
     _defineProperty(_assertThisInitialized(_this), "toggleLinkPanel", function (inputMethod) {
-      var _pluginInjectionApi$c, _pluginInjectionApi$h;
+      var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$h;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === 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 || (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === 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(_assertThisInitialized(_this), "insertMention", function (inputMethod) {
       var _pluginInjectionApi$m, _pluginInjectionApi$m2;
@@ -209,15 +239,15 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
     });
     _defineProperty(_assertThisInitialized(_this), "insertTableWithSize", function (inputMethod, rowsCount, colsCount) {
       return function () {
-        var _pluginInjectionApi$t5;
+        var _pluginInjectionApi$c3, _pluginInjectionApi$t5;
         var pluginInjectionApi = _this.props.pluginInjectionApi;
-        return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === 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 || (_pluginInjectionApi$c3 = pluginInjectionApi.core) === null || _pluginInjectionApi$c3 === void 0 ? void 0 : _pluginInjectionApi$c3.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$t5 = pluginInjectionApi.table) === null || _pluginInjectionApi$t5 === void 0 ? void 0 : _pluginInjectionApi$t5.commands.insertTableWithSize(rowsCount, colsCount, INPUT_METHOD.PICKER));
       };
     });
     _defineProperty(_assertThisInitialized(_this), "createDate", function (inputMethod) {
-      var _pluginInjectionApi$d;
+      var _pluginInjectionApi$c4, _pluginInjectionApi$d;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
-      pluginInjectionApi === null || pluginInjectionApi === void 0 || pluginInjectionApi.core.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 || _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d = pluginInjectionApi.date) === null || _pluginInjectionApi$d === void 0 || (_pluginInjectionApi$d = _pluginInjectionApi$d.commands) === null || _pluginInjectionApi$d === void 0 ? void 0 : _pluginInjectionApi$d.insertDate({
         inputMethod: inputMethod
       }));
       return true;
@@ -307,21 +337,21 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
       };
     });
     _defineProperty(_assertThisInitialized(_this), "handleSelectedEmoji", function (emojiId) {
-      var _pluginInjectionApi$e3;
+      var _pluginInjectionApi$c5, _pluginInjectionApi$e3;
       var pluginInjectionApi = _this.props.pluginInjectionApi;
       _this.props.editorView.focus();
-      pluginInjectionApi === null || pluginInjectionApi === 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 || (_pluginInjectionApi$c5 = pluginInjectionApi.core) === null || _pluginInjectionApi$c5 === 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(_assertThisInitialized(_this), "openElementBrowser", function () {
-      var _pluginInjectionApi$q;
+      var _pluginInjectionApi$c6, _pluginInjectionApi$q;
       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);
+      pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c6 = pluginInjectionApi.core) === null || _pluginInjectionApi$c6 === void 0 || _pluginInjectionApi$c6.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,

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

@@ -0,0 +1,104 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @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';
+var TABLE_SELECTOR_PADDING_TOP = 8;
+var TABLE_SELECTOR_PADDING_SIDE = 10;
+var DEFAULT_TABLE_SELECTOR_ROWS = 5;
+var DEFAULT_TABLE_SELECTOR_COLS = 10;
+var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
+var tableSelectorPopupWrapperStyles = css({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(N0, ")"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")"),
+  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
+});
+export var TableSelectorPopup = function TableSelectorPopup(props) {
+  var _useState = useState({
+      col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+      maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var tablePopupRef = useRef(null);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  var handleMouseMove = useCallback(function (e) {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    var tablePopup = tablePopupRef.current;
+    var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
+      left = _tablePopup$getBoundi.left,
+      top = _tablePopup$getBoundi.top;
+
+    // Mouse position on popup
+    var selectedWidth = e.clientX - left;
+    var selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
+    var 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(function () {
+    var 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/esm/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 var TABLE_SELECTOR_BUTTON_GAP = 2;
+export var TABLE_SELECTOR_BUTTON_SIZE = 17;
+var selectedButtonStyles = css({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+});
+var buttonStyles = css({
+  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  border: "1px solid ".concat("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 ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+  }
+});
+var selectionSizeTextStyles = css({
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+var TableSelectorButton = function TableSelectorButton(_ref) {
+  var row = _ref.row,
+    col = _ref.col,
+    isActive = _ref.isActive,
+    _onClick = _ref.onClick,
+    label = _ref.label;
+  return jsx("button", {
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: function onClick() {
+      return _onClick(row, col);
+    },
+    "aria-label": label
+  });
+};
+var createArray = function createArray(maxCols, maxRows) {
+  var arr = [];
+  for (var i = 1; i < maxRows + 1; i++) {
+    for (var j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+var gridWrapperStyles = function gridWrapperStyles(_ref2) {
+  var maxCols = _ref2.maxCols,
+    maxRows = _ref2.maxRows;
+  return css({
+    display: 'grid',
+    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
+    gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
+    gap: "".concat("var(--ds-space-025, ".concat("".concat(TABLE_SELECTOR_BUTTON_GAP, "px"), ")"))
+  });
+};
+var TableSelectorPopup = function TableSelectorPopup(_ref3) {
+  var maxCols = _ref3.maxCols,
+    maxRows = _ref3.maxRows,
+    onSelection = _ref3.onSelection,
+    selectedCol = _ref3.selectedCol,
+    selectedRow = _ref3.selectedRow,
+    intl = _ref3.intl;
+  var buttons = useMemo(function () {
+    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(function (_ref4, index) {
+    var col = _ref4.col,
+      row = _ref4.row;
+    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return jsx(TableSelectorButton, {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: "".concat(intl.formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
+    });
+  })), jsx("span", {
+    css: selectionSizeTextStyles
+  }, "".concat(selectedRow, " x ").concat(selectedCol)));
+};
+export default injectIntl(TableSelectorPopup);

package/dist/types/ui/ToolbarInsertBlock/index.d.ts

@@ -3,11 +3,16 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { Props, State } from './types';
-export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisabled, }: {
+    isTableSelectorOpen: boolean;
+    isButtonDisabled: boolean | undefined;
+}) => import("@emotion/react").SerializedStyles;
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private plusButtonRef?;
+    private tableButtonRef;
+    private tableSelectorButtonRef;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -20,6 +25,11 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiButtonRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
+    private toggleTableSelector;
+    private renderTableSelectorPopup;
+    private handleSelectedTableSize;
+    private handleTableSelectorPressEscape;
+    private handleTableSelectorClickOutside;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { OnTableSizeSelection } from './table-selector-popup';
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -0,0 +1,25 @@
+import type { SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;
+};
+export default _default;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/index.d.ts

@@ -3,11 +3,16 @@ import React from 'react';
 import { jsx } from '@emotion/react';
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { Props, State } from './types';
-export declare const tableButtonWrapper: import("@emotion/react").SerializedStyles;
+export declare const tableButtonWrapper: ({ isTableSelectorOpen, isButtonDisabled, }: {
+    isTableSelectorOpen: boolean;
+    isButtonDisabled: boolean | undefined;
+}) => import("@emotion/react").SerializedStyles;
 export declare class ToolbarInsertBlock extends React.PureComponent<Props & WrappedComponentProps, State> {
     private dropdownButtonRef?;
     private emojiButtonRef?;
     private plusButtonRef?;
+    private tableButtonRef;
+    private tableSelectorButtonRef;
     state: State;
     static getDerivedStateFromProps(props: Props & WrappedComponentProps, state: State): State | null;
     componentDidUpdate(prevProps: Props): void;
@@ -20,6 +25,11 @@ export declare class ToolbarInsertBlock extends React.PureComponent<Props & Wrap
     private handleEmojiButtonRef;
     private handlePlusButtonRef;
     private handleDropDownButtonRef;
+    private toggleTableSelector;
+    private renderTableSelectorPopup;
+    private handleSelectedTableSize;
+    private handleTableSelectorPressEscape;
+    private handleTableSelectorClickOutside;
     render(): jsx.JSX.Element | null;
     private handleClick;
     private handleOpenByKeyboard;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.d.ts

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { OnTableSizeSelection } from './table-selector-popup';
+type SimpleEventHandler<T> = (event: T) => void;
+export interface TableSelectorPopupProps {
+    onSelection: OnTableSizeSelection;
+    target?: HTMLElement;
+    popupsMountPoint?: HTMLElement;
+    popupsBoundariesElement?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    handleClickOutside?: SimpleEventHandler<MouseEvent>;
+    handleEscapeKeydown?: SimpleEventHandler<KeyboardEvent>;
+}
+export declare const TableSelectorPopup: (props: TableSelectorPopupProps) => jsx.JSX.Element;
+export default TableSelectorPopup;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/table-selector-popup.d.ts

@@ -0,0 +1,25 @@
+import type { SyntheticEvent } from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+export declare const TABLE_SELECTOR_BUTTON_GAP = 2;
+export declare const TABLE_SELECTOR_BUTTON_SIZE = 17;
+export interface TableSelectorButtonProps {
+    row: number;
+    col: number;
+    isActive: boolean;
+    onClick: OnTableSizeSelection;
+    label: string;
+}
+export interface OnTableSizeSelection {
+    (rowsCount: number, colsCount: number, event?: SyntheticEvent): void;
+}
+interface TableSelectorPopupProps {
+    maxCols: number;
+    maxRows: number;
+    onSelection: OnTableSizeSelection;
+    selectedCol: number;
+    selectedRow: number;
+}
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<TableSelectorPopupProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<TableSelectorPopupProps & WrappedComponentProps<"intl">>;
+};
+export default _default;