@atlaskit/editor-common 103.11.2 → 103.12.1

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-common
 
+## 103.12.1
+
+### Patch Changes
+
+- [#142352](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142352)
+  [`05903fde6d94d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05903fde6d94d) -
+  Internal change to use Compiled variant of `@atlaskit/primitives`.
+
+## 103.12.0
+
+### Minor 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
+
+### Patch Changes
+
+- [#142798](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142798)
+  [`9dd2803c4c1dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9dd2803c4c1dc) -
+  Preserved the previously set value for width provider
+
 ## 103.11.2
 
 ### Patch Changes

package/afm-cc/tsconfig.json

@@ -143,6 +143,9 @@
         {
             "path": "../../../design-system/textfield/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics/types/enums.js

@@ -433,6 +433,7 @@ var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTIO
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["PICKER_TABLE_SIZE"] = "tableSizePicker";
   ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -19,7 +19,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _menu = require("@atlaskit/menu");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
 var _quickInsert = require("../../../quick-insert");
@@ -444,18 +444,18 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref8) {
         className: "item-body"
       }, (0, _react2.jsx)("div", {
         css: itemText
-      }, (0, _react2.jsx)(_primitives.Stack, {
+      }, (0, _react2.jsx)(_compiled.Stack, {
         space: "space.025"
       }, (0, _react2.jsx)("div", {
         css: itemTitleWrapper
-      }, (0, _react2.jsx)(_primitives.Text, {
+      }, (0, _react2.jsx)(_compiled.Text, {
         color: isDisabled ? 'color.text.disabled' : undefined,
         maxLines: 1
       }, title), (0, _react2.jsx)("div", {
         css: itemAfter
       }, keyshortcut && (0, _react2.jsx)("div", {
         css: _shortcut.shortcutStyle
-      }, keyshortcut))), description && (0, _react2.jsx)(_primitives.Text, {
+      }, keyshortcut))), description && (0, _react2.jsx)(_compiled.Text, {
         color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
         size: "small",
         maxLines: 2

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "103.11.2";
+var packageVersion = "103.12.1";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "103.11.2";
+var packageVersion = "103.12.1";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

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

@@ -0,0 +1,270 @@
+"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 _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _uiReact = require("../../ui-react");
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _tableSelector = _interopRequireWildcard(require("./table-selector"));
+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)(_tableSelector.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)(_objectSpread(_objectSpread({}, initialSizeState), props.defaultSize)),
+    _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 + _tableSelector.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelector.TABLE_SELECTOR_BUTTON_GAP + _tableSelector.TABLE_SELECTOR_BUTTON_SIZE));
+    var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + _tableSelector.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelector.TABLE_SELECTOR_BUTTON_GAP + _tableSelector.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 ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+    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)
+        });
+      });
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+  }, [enableKeyboardMode, setSize]);
+  (0, _react.useEffect)(function () {
+    var unbind;
+    var target = props.allowOutsideSelection ? window : tablePopupRef.current;
+    if (target) {
+      unbind = (0, _bindEventListener.bind)(target, {
+        type: 'mousemove',
+        listener: handleMouseMove
+      });
+    }
+    return unbind;
+  }, [handleMouseMove, props.allowOutsideSelection, tablePopupRef]);
+  return (0, _react2.jsx)(_Popup.default, {
+    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/TableSelector/table-selector.js

@@ -0,0 +1,162 @@
+"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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _messages = require("../../messages");
+var _uiReact = require("../../ui-react");
+/**
+ * @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({
+          preventScroll: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker') ? true : undefined
+        });
+      } 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)(_compiled.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);

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

@@ -93,6 +93,7 @@ var WidthProvider = exports.WidthProvider = function WidthProvider(_ref) {
       if (!isMountedRef.current) {
         return;
       }
+      widthRef.current = nextWidth;
       setWidth(nextWidth);
     });
   }, []);

package/dist/cjs/ui/index.js

@@ -203,6 +203,12 @@ Object.defineProperty(exports, "SmallerEditIcon", {
     return _SmallerEditIcon.SmallerEditIcon;
   }
 });
+Object.defineProperty(exports, "TableSelectorPopup", {
+  enumerable: true,
+  get: function get() {
+    return _TableSelector.default;
+  }
+});
 Object.defineProperty(exports, "ToolbarButtonGroup", {
   enumerable: true,
   get: function get() {
@@ -485,5 +491,6 @@ var _ExpandIcon = require("./Toolbar/ExpandIcon");
 var _Separator2 = require("./Toolbar/Separator");
 var _DropList = _interopRequireDefault(require("./DropList"));
 var _MultiBodiedExtension = require("./MultiBodiedExtension");
+var _TableSelector = _interopRequireDefault(require("./TableSelector"));
 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; }

package/dist/cjs/utils/get-dom-ref-from-selection.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDomRefFromSelection = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _analytics = require("../analytics");
+var getDomRefFromSelection = exports.getDomRefFromSelection = function getDomRefFromSelection(view, actionSubjectId, dispatchAnalyticsEvent) {
+  try {
+    var domRef = (0, _utils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      // If element is not a paragraph, we need to find the closest paragraph parent
+      if (domRef.nodeName !== 'P') {
+        var paragraphRef = domRef.closest('p');
+        if (paragraphRef) {
+          return paragraphRef;
+        }
+      }
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: _analytics.ACTION.ERRORED,
+        actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+        actionSubjectId: actionSubjectId,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};

package/dist/es2019/analytics/types/enums.js

@@ -427,6 +427,7 @@ export let ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["PICKER_TABLE_SIZE"] = "tableSizePicker";
   ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -15,7 +15,7 @@ import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { ButtonItem } from '@atlaskit/menu';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Stack, Text } from '@atlaskit/primitives';
+import { Stack, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../../analytics';
 import { IconFallback } from '../../../quick-insert';

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "103.11.2";
+const packageVersion = "103.12.1";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "103.11.2";
+const packageVersion = "103.12.1";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005