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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 0.2.19
+
+### Patch Changes
+
+- [#65874](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/65874) [`282862992d2a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/282862992d2a) - [ux] added popup to table selector button using mouse movement
+
+## 0.2.18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.17
 
 ### Patch Changes

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

@@ -30,6 +30,7 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
 var _messages = require("./messages");
+var _tableSelectorPopupWithListeners = _interopRequireDefault(require("./table-selector-popup-with-listeners"));
 var _templateObject;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -55,7 +56,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  }");
 };
-var tableButtonWrapper = exports.tableButtonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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)");
+var tableButtonWrapper = exports.tableButtonWrapper = function tableButtonWrapper(_ref) {
+  var isTableSelectorOpen = _ref.isTableSelectorOpen,
+    isButtonDisabled = _ref.isButtonDisabled;
+  return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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
 var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
@@ -68,6 +73,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       args[_key] = arguments[_key];
     }
     _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableButtonRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "tableSelectorButtonRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
       isPlusMenuOpen: false,
       emojiPickerOpen: false,
@@ -110,8 +117,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         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();
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleEmojiPicker", function () {
@@ -169,6 +176,29 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _this.dropdownButtonRef = ref;
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggleTableSelector", function () {
+      var inputMethod = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _analytics.INPUT_METHOD.TOOLBAR;
+      _this.setState(function (prevState) {
+        return {
+          isTableSelectorOpen: !prevState.isTableSelectorOpen
+        };
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelectedTableSize", function (rowsCount, colsCount) {
+      _this.insertTableWithSize(_analytics.INPUT_METHOD.TOOLBAR, rowsCount, colsCount)();
+      _this.toggleTableSelector();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTableSelectorPressEscape", function () {
+      var _this$tableSelectorBu;
+      _this.toggleTableSelector(_analytics.INPUT_METHOD.KEYBOARD);
+      (_this$tableSelectorBu = _this.tableSelectorButtonRef.current) === null || _this$tableSelectorBu === void 0 || _this$tableSelectorBu.focus();
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleTableSelectorClickOutside", function (e) {
+      // Ignore click events for detached elements.
+      if (e.target && !isDetachedElement(e.target)) {
+        _this.toggleTableSelector(_analytics.INPUT_METHOD.TOOLBAR);
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
       _this.togglePlusMenuVisibility();
     });
@@ -329,9 +359,9 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       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);
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref2) {
-      var item = _ref2.item,
-        inputMethod = _ref2.inputMethod;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onItemActivated", function (_ref3) {
+      var item = _ref3.item,
+        inputMethod = _ref3.inputMethod;
       var _this$props11 = _this.props,
         editorView = _this$props11.editorView,
         editorActions = _this$props11.editorActions,
@@ -350,7 +380,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           _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) {
@@ -421,8 +451,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         inputMethod: _analytics.INPUT_METHOD.TOOLBAR
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (_ref3) {
-      var item = _ref3.item;
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "insertInsertMenuItem", function (_ref4) {
+      var item = _ref4.item;
       return _this.onItemActivated({
         item: item,
         inputMethod: _analytics.INPUT_METHOD.INSERT_MENU
@@ -433,10 +463,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
   (0, _createClass2.default)(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) {
@@ -461,8 +492,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         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;
@@ -487,6 +518,29 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         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 (0, _react2.jsx)(_tableSelectorPopupWithListeners.default, {
+        target: ref,
+        onSelection: this.handleSelectedTableSize,
+        popupsMountPoint: popupsMountPoint,
+        popupsBoundariesElement: popupsBoundariesElement,
+        popupsScrollableElement: popupsScrollableElement,
+        handleClickOutside: this.handleTableSelectorClickOutside,
+        handleEscapeKeydown: this.handleTableSelectorPressEscape
+      });
+    }
   }, {
     key: "render",
     value: function render() {
@@ -497,6 +551,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         _tableButton4,
         _tableButton5,
         _tableButton6,
+        _tableButton7,
         _tableSelectorButton,
         _tableSelectorButton2,
         _tableSelectorButton3,
@@ -508,10 +563,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
       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;
       }
@@ -558,20 +614,23 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
             "aria-keyshortcuts": btn['aria-keyshortcuts'],
             onItemClick: _this2.insertToolbarMenuItem
           });
-        }), this.props.tableSelectorSupported &&
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        (0, _react2.jsx)("div", {
-          css: tableButtonWrapper
+        }), this.props.tableSelectorSupported && (0, _react2.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
+          })
         }, (0, _react2.jsx)(_uiMenu.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,
@@ -581,10 +640,11 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           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,
@@ -592,7 +652,7 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
           onItemClick: this.insertToolbarMenuItem
         })), (0, _react2.jsx)("span", {
           css: _styles.wrapperStyle
-        }, this.renderPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
+        }, this.renderPopup(), this.renderTableSelectorPopup(), (0, _react2.jsx)(_blockInsertMenu.BlockInsertMenu, {
           popupsMountPoint: this.props.popupsMountPoint,
           popupsBoundariesElement: this.props.popupsBoundariesElement,
           popupsScrollableElement: this.props.popupsScrollableElement,

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

@@ -0,0 +1,114 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableSelectorPopup = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
+var _ui = require("@atlaskit/editor-common/ui");
+var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _colors = require("@atlaskit/theme/colors");
+var _tableSelectorPopup = _interopRequireWildcard(require("./table-selector-popup"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/** @jsx jsx */
+
+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 = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelectorPopup.default);
+var tableSelectorPopupWrapperStyles = (0, _react2.css)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")"),
+  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
+});
+var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopup(props) {
+  var _useState = (0, _react.useState)({
+      col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+      maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+      maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+    }),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var tablePopupRef = (0, _react.useRef)(null);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  var handleMouseMove = (0, _react.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 + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_SIZE));
+    var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.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]);
+  (0, _react.useEffect)(function () {
+    var unbind = (0, _bindEventListener.bind)(window, {
+      type: 'mousemove',
+      listener: handleMouseMove
+    });
+    return unbind;
+  }, [handleMouseMove]);
+  return (0, _react2.jsx)(_ui.Popup, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex
+  }, (0, _react2.jsx)("div", {
+    css: tableSelectorPopupWrapperStyles,
+    ref: tablePopupRef
+  }, (0, _react2.jsx)(TableSelectorWithListeners, {
+    handleClickOutside: props.handleClickOutside,
+    handleEscapeKeydown: props.handleEscapeKeydown,
+    maxCols: size.maxCol,
+    maxRows: size.maxRow,
+    onSelection: props.onSelection,
+    selectedCol: size.col,
+    selectedRow: size.row
+  })));
+};
+var _default = exports.default = TableSelectorPopup;

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

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_GAP = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _messages = require("@atlaskit/editor-common/messages");
+var _primitives = require("@atlaskit/primitives");
+/** @jsx jsx */
+
+var TABLE_SELECTOR_BUTTON_GAP = exports.TABLE_SELECTOR_BUTTON_GAP = 2;
+var TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_SIZE = 17;
+var selectedButtonStyles = (0, _react2.css)({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+});
+var buttonStyles = (0, _react2.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 = (0, _react2.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 (0, _react2.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 (0, _react2.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 = (0, _react.useMemo)(function () {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  return (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.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 (0, _react2.jsx)(TableSelectorButton, {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: "".concat(intl.formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
+    });
+  })), (0, _react2.jsx)("span", {
+    css: selectionSizeTextStyles
+  }, "".concat(selectedRow, " x ").concat(selectedCol)));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);