@atlaskit/editor-plugin-insert-block 3.2.0 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 3.2.1
+
+### Patch Changes
+
+- [#142852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142852)
+  [`ca0f841e860ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca0f841e860ab) -
+  [ux] [ED-27466] When table option in quick insert typeahead is selected, shows table size picker
+  allow user selecting the table size before inserting
+- Updated dependencies
+
 ## 3.2.0
 
 ### Minor Changes

package/dist/cjs/ui/ElementBrowser/InsertMenu.js

@@ -18,6 +18,7 @@ var _elementBrowser = require("@atlaskit/editor-common/element-browser");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _theme = require("@atlaskit/theme");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["children"];
@@ -144,7 +145,7 @@ var InsertMenu = function InsertMenu(_ref) {
     }, (0, _react2.jsx)(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
-      closeOnTab: true
+      closeOnTab: !(0, _platformFeatureFlags.fg)('editor_a11y_tab_does_not_close_menus')
     }, (0, _react2.jsx)(_elementBrowser.ElementBrowser, {
       mode: "inline",
       getItems: getItems,

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

@@ -29,7 +29,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _blockInsertMenu = require("./block-insert-menu");
 var _createItems3 = require("./create-items");
-var _tableSelectorPopupWithListeners = _interopRequireDefault(require("./table-selector-popup-with-listeners"));
 var _templateObject;
 /* eslint-disable @atlaskit/ui-styling-standard/no-imported-style-values */
 /**
@@ -39,8 +38,6 @@ var _templateObject;
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-namespace
-// Ignored via go/ees005
-// eslint-disable-next-line import/no-named-as-default
 function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
@@ -48,6 +45,9 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+// Ignored via go/ees005
+// eslint-disable-next-line import/no-named-as-default
+
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
@@ -630,7 +630,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
         var _pluginInjectionApi$c8;
         return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || (_pluginInjectionApi$c8 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.focus();
       };
-      return (0, _react2.jsx)(_tableSelectorPopupWithListeners.default, {
+      return (0, _react2.jsx)(_ui.TableSelectorPopup, {
+        allowOutsideSelection: true,
         target: ref,
         onUnmount: onUnmount,
         onSelection: this.handleSelectedTableSize,

package/dist/es2019/ui/ElementBrowser/InsertMenu.js

@@ -16,6 +16,7 @@ import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, I
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { fg } from '@atlaskit/platform-feature-flags';
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 export const DEFAULT_HEIGHT = 560;
@@ -120,7 +121,7 @@ const InsertMenu = ({
     }, jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
-      closeOnTab: true
+      closeOnTab: !fg('editor_a11y_tab_does_not_close_menus')
     }, jsx(ElementBrowser, {
       mode: "inline",
       getItems: getItems,

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

@@ -13,7 +13,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { Popup, TableSelectorPopup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -26,7 +26,7 @@ import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-import TableSelectorPopup from './table-selector-popup-with-listeners';
+
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
@@ -696,6 +696,7 @@ export class ToolbarInsertBlock extends React.PureComponent {
       return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : (_pluginInjectionApi$c9 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c9 === void 0 ? void 0 : _pluginInjectionApi$c9.focus();
     };
     return jsx(TableSelectorPopup, {
+      allowOutsideSelection: true,
       target: ref,
       onUnmount: onUnmount,
       onSelection: this.handleSelectedTableSize,

package/dist/esm/ui/ElementBrowser/InsertMenu.js

@@ -23,6 +23,7 @@ import { IconCode, IconDate, IconDecision, IconDivider, IconExpand, IconPanel, I
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 // AFP-2532 TODO: Fix automatic suppressions below
 // eslint-disable-next-line @atlassian/tangerine/import/entry-points
+import { fg } from '@atlaskit/platform-feature-flags';
 import { borderRadius } from '@atlaskit/theme';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 export var DEFAULT_HEIGHT = 560;
@@ -141,7 +142,7 @@ var InsertMenu = function InsertMenu(_ref) {
     }, jsx(ElementBrowserWrapper, {
       handleClickOutside: toggleVisiblity,
       handleEscapeKeydown: toggleVisiblity,
-      closeOnTab: true
+      closeOnTab: !fg('editor_a11y_tab_does_not_close_menus')
     }, jsx(ElementBrowser, {
       mode: "inline",
       getItems: getItems,

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

@@ -28,7 +28,7 @@ import { injectIntl } from 'react-intl-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
-import { Popup } from '@atlaskit/editor-common/ui';
+import { Popup, TableSelectorPopup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners as withOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
@@ -41,7 +41,7 @@ import { BlockInsertMenu } from './block-insert-menu';
 import { createItems } from './create-items';
 // Ignored via go/ees005
 // eslint-disable-next-line import/no-named-as-default
-import TableSelectorPopup from './table-selector-popup-with-listeners';
+
 /**
  * Checks if an element is detached (i.e. not in the current document)
  */
@@ -625,6 +625,7 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
         return pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$c8 = pluginInjectionApi.core) === null || _pluginInjectionApi$c8 === void 0 || (_pluginInjectionApi$c8 = _pluginInjectionApi$c8.actions) === null || _pluginInjectionApi$c8 === void 0 ? void 0 : _pluginInjectionApi$c8.focus();
       };
       return jsx(TableSelectorPopup, {
+        allowOutsideSelection: true,
         target: ref,
         onUnmount: onUnmount,
         onSelection: this.handleSelectedTableSize,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "3.2.0",
+	"version": "3.2.1",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,43 +34,43 @@
 	},
 	"dependencies": {
 		"@atlaskit/button": "^23.0.0",
-		"@atlaskit/editor-common": "^103.4.0",
+		"@atlaskit/editor-common": "^103.12.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-block-type": "^5.1.0",
-		"@atlaskit/editor-plugin-code-block": "^4.3.0",
+		"@atlaskit/editor-plugin-code-block": "^4.4.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
 		"@atlaskit/editor-plugin-date": "^4.2.0",
-		"@atlaskit/editor-plugin-emoji": "^3.5.0",
+		"@atlaskit/editor-plugin-emoji": "^3.6.0",
 		"@atlaskit/editor-plugin-expand": "^3.2.0",
 		"@atlaskit/editor-plugin-extension": "^5.2.0",
 		"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
 		"@atlaskit/editor-plugin-hyperlink": "^4.4.0",
 		"@atlaskit/editor-plugin-image-upload": "^2.0.0",
-		"@atlaskit/editor-plugin-layout": "^2.4.0",
-		"@atlaskit/editor-plugin-media": "^2.4.0",
+		"@atlaskit/editor-plugin-layout": "^2.5.0",
+		"@atlaskit/editor-plugin-media": "^2.6.0",
 		"@atlaskit/editor-plugin-media-insert": "^6.2.0",
 		"@atlaskit/editor-plugin-mentions": "^4.4.0",
 		"@atlaskit/editor-plugin-metrics": "^3.4.0",
 		"@atlaskit/editor-plugin-panel": "^4.3.0",
 		"@atlaskit/editor-plugin-placeholder-text": "^2.2.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.2.0",
-		"@atlaskit/editor-plugin-quick-insert": "^2.3.0",
+		"@atlaskit/editor-plugin-quick-insert": "^2.4.0",
 		"@atlaskit/editor-plugin-rule": "^2.1.0",
 		"@atlaskit/editor-plugin-status": "^3.1.0",
-		"@atlaskit/editor-plugin-table": "^10.7.0",
+		"@atlaskit/editor-plugin-table": "^10.8.0",
 		"@atlaskit/editor-plugin-tasks-and-decisions": "^5.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
+		"@atlaskit/editor-plugin-type-ahead": "^2.5.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^69.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.5.0",
-		"@atlaskit/icon-lab": "^4.6.0",
+		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon-lab": "^4.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^4.6.0",
-		"@atlaskit/tokens": "^4.7.0",
+		"@atlaskit/tmp-editor-statsig": "^4.12.0",
+		"@atlaskit/tokens": "^4.8.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -133,6 +133,9 @@
 		"platform_editor_toolbar_responsive_fixes": {
 			"type": "boolean"
 		},
+		"editor_a11y_tab_does_not_close_menus": {
+			"type": "boolean"
+		},
 		"platform_editor_ease_of_use_metrics": {
 			"type": "boolean"
 		},

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

@@ -1,258 +0,0 @@
-"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-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 DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
-var TableSelectorWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelectorPopup.default);
-var initialSizeState = {
-  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
-  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
-};
-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)(initialSizeState),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    size = _useState2[0],
-    setSize = _useState2[1];
-  var tablePopupRef = (0, _react.useRef)(null);
-  // If popup opened by keyboard enable keyboard mode
-  var isKeyboardMode = (0, _react.useRef)(props.isOpenedByKeyboard);
-  var enableKeyboardMode = (0, _react.useCallback)(function () {
-    if (!isKeyboardMode.current) {
-      isKeyboardMode.current = true;
-    }
-  }, [isKeyboardMode]);
-  var disableKeyboardMode = (0, _react.useCallback)(function () {
-    if (isKeyboardMode.current) {
-      isKeyboardMode.current = false;
-    }
-  }, [isKeyboardMode]);
-
-  // 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;
-    }
-    disableKeyboardMode();
-    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
-    var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
-    if (selectedGridCols < 1) {
-      selectedGridCols = 1;
-    }
-    if (selectedGridCols > size.maxCol) {
-      selectedGridCols = size.maxCol;
-    }
-    if (selectedGridRows < 1) {
-      selectedGridRows = 1;
-    }
-
-    // Expand grid when row selection is greater than the default grid size
-    if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS && selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-      gridRows = selectedGridRows + 1;
-    }
-    if (selectedGridRows >= DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-      selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-      gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-    }
-    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
-      setSize({
-        col: selectedGridCols,
-        row: selectedGridRows,
-        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
-        maxRow: gridRows
-      });
-    }
-  }, [disableKeyboardMode, size, setSize]);
-  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
-    var nextNumber = prevNumber - 1;
-    if (prevNumber === 1) {
-      nextNumber = maxNumber;
-    }
-    return nextNumber;
-  };
-  var getMaxRow = function getMaxRow(prevSize, eventKey) {
-    switch (eventKey) {
-      case 'ArrowDown':
-        // Expand the grid size when last row selected
-        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
-          return prevSize.maxRow + 1;
-        }
-        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
-          return DEFAULT_TABLE_SELECTOR_ROWS;
-        }
-        return prevSize.maxRow;
-      case 'ArrowLeft':
-        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
-        var moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
-        // Expand the popup to max size when selected row wraps around to last row
-        if (moveToLastRow) {
-          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-        }
-        // Decrease the popup when decreased row selection
-        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
-          return prevSize.row;
-        }
-        return prevSize.maxRow;
-      case 'ArrowUp':
-        if (prevSize.row === 1) {
-          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-          // Decrease the popup size when decreased row selection
-        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
-          return prevSize.row;
-        }
-        return prevSize.maxRow;
-      case 'ArrowRight':
-        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        var increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
-
-        // Decrease popup size for wrap around to selection 1 x 1
-        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.col === DEFAULT_TABLE_SELECTOR_COLS) {
-          return DEFAULT_TABLE_SELECTOR_ROWS;
-          // Decrease the popup size when decreased row selection
-        } else if (increaseMaxRow) {
-          return prevSize.maxRow + 1;
-        }
-        return prevSize.maxRow;
-      default:
-        return prevSize.maxRow;
-    }
-  };
-  var handleInitialButtonFocus = (0, _react.useCallback)(function () {
-    if (isKeyboardMode.current !== true) {
-      enableKeyboardMode();
-      setSize(initialSizeState);
-    }
-  }, [enableKeyboardMode, setSize]);
-  var handleKeyDown = (0, _react.useCallback)(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  function (event) {
-    if (event.key === 'ArrowDown') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          row: prevSize.row % prevSize.maxRow + 1,
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-    if (event.key === 'ArrowRight') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
-          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-    if (event.key === 'ArrowLeft') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        var getRow = function getRow(prevRow, prevCol) {
-          var row = prevRow;
-          // Move to previous row for wrap around
-          if (prevSize.col === 1 && prevSize.row > 1) {
-            return prevRow - 1;
-            // Increase the selection to max size when selected row and column wraps around
-          } else if (prevRow === 1 && prevCol === 1) {
-            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
-          }
-          return row;
-        };
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          col: decreasingSequence(prevSize.maxCol, prevSize.col),
-          row: getRow(prevSize.row, prevSize.col),
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-    if (event.key === 'ArrowUp') {
-      enableKeyboardMode();
-      setSize(function (prevSize) {
-        var moveToLastRow = prevSize.row === 1;
-        return _objectSpread(_objectSpread({}, prevSize), {}, {
-          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
-          maxRow: getMaxRow(prevSize, event.key)
-        });
-      });
-    }
-  }, [enableKeyboardMode, 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,
-    onUnmount: props.onUnmount,
-    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,
-    onKeyDown: handleKeyDown,
-    isFocused: isKeyboardMode.current,
-    handleInitialButtonFocus: handleInitialButtonFocus
-  })));
-};
-var _default = exports.default = TableSelectorPopup;

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

@@ -1,158 +0,0 @@
-"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 _uiReact = require("@atlaskit/editor-common/ui-react");
-var _primitives = require("@atlaskit/primitives");
-var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-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',
-  '&:focus': {
-    outline: 'none',
-    border: "1px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
-    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
-  }
-});
-var selectionSizeTextStyles = (0, _react2.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  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,
-    onKeyDown = _ref.onKeyDown,
-    isFocused = _ref.isFocused,
-    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
-  var btnRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    if (btnRef.current) {
-      if (isFocused) {
-        btnRef.current.focus();
-      } else {
-        btnRef.current.blur();
-      }
-    }
-  }, [isFocused, btnRef]);
-  var handleFocus = col === 1 && row === 1 ? function () {
-    return handleInitialButtonFocus();
-  } : undefined;
-  return (0, _react2.jsx)("button", {
-    type: "button",
-    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
-    onClick: function onClick() {
-      return _onClick(row, col);
-    },
-    "aria-label": label,
-    onKeyDown: onKeyDown,
-    ref: btnRef,
-    onFocus: handleFocus
-  });
-};
-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',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    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,
-    onKeyDown = _ref3.onKeyDown,
-    isFocused = _ref3.isFocused,
-    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
-    formatMessage = _ref3.intl.formatMessage;
-  var buttons = (0, _react.useMemo)(function () {
-    return createArray(maxCols, maxRows);
-  }, [maxCols, maxRows]);
-  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
-  return (0, _react2.jsx)(_primitives.Stack, {
-    ref: setOutsideClickTargetRef
-  }, (0, _react2.jsx)("div", {
-    "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
-    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 isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
-    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
-    return (0, _react2.jsx)(TableSelectorButton
-    // Ignored via go/ees005
-    // eslint-disable-next-line react/no-array-index-key
-    , {
-      key: index,
-      isActive: isActive,
-      col: col,
-      row: row,
-      onClick: onSelection,
-      label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton, {
-        numberOfColumns: col,
-        numberOfRows: row
-      })),
-      onKeyDown: onKeyDown,
-      isFocused: isCurrentFocused,
-      handleInitialButtonFocus: handleInitialButtonFocus
-    });
-  })), (0, _react2.jsx)("span", {
-    css: selectionSizeTextStyles,
-    "aria-hidden": true
-  }, "".concat(selectedCol, " x ").concat(selectedRow)));
-};
-var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);