handsontable 0.0.0-next-9891faa-20240822 → 0.0.0-next-0306a1a-20240826

package/editors/autocompleteEditor/autocompleteEditor.d.ts

@@ -17,7 +17,7 @@ export class AutocompleteEditor extends HandsontableEditor {
   limitDropdownIfNeeded(spaceAvailable: number, dropdownHeight: number): void;
   flipDropdown(dropdownHeight: number): void;
   unflipDropdown(): void;
-  updateDropdownDimensions(): void;
+  updateDropdownHeight(): void;
   setDropdownHeight(height: number): void;
   highlightBestMatchingChoice(index?: number): void;
   getDropdownHeight(): number;

package/helpers/a11y.js

@@ -21,8 +21,6 @@ const A11Y_MENU = () => ['role', 'menu'];
 exports.A11Y_MENU = A11Y_MENU;
 const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
 exports.A11Y_MENU_ITEM = A11Y_MENU_ITEM;
-const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
-exports.A11Y_MENU_ITEM_CHECKBOX = A11Y_MENU_ITEM_CHECKBOX;
 const A11Y_COMBOBOX = () => ['role', 'combobox'];
 exports.A11Y_COMBOBOX = A11Y_COMBOBOX;
 const A11Y_LISTBOX = () => ['role', 'listbox'];

package/helpers/a11y.mjs

@@ -8,7 +8,6 @@ export const A11Y_COLUMNHEADER = () => ['role', 'columnheader'];
 export const A11Y_ROW = () => ['role', 'row'];
 export const A11Y_MENU = () => ['role', 'menu'];
 export const A11Y_MENU_ITEM = () => ['role', 'menuitem'];
-export const A11Y_MENU_ITEM_CHECKBOX = () => ['role', 'menuitemcheckbox'];
 export const A11Y_COMBOBOX = () => ['role', 'combobox'];
 export const A11Y_LISTBOX = () => ['role', 'listbox'];
 export const A11Y_OPTION = () => ['role', 'option'];

package/helpers/mixed.js

@@ -134,7 +134,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-9891faa-20240822";
+  const hotVersion = "0.0.0-next-0306a1a-20240826";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -142,7 +142,7 @@ function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = (0, _moment.default)("30/07/2024", 'DD/MM/YYYY');
+      const releaseDate = (0, _moment.default)("11/06/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = (0, _moment.default)((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

package/helpers/mixed.mjs

@@ -124,7 +124,7 @@ const domMessages = {
 export function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-9891faa-20240822";
+  const hotVersion = "0.0.0-next-0306a1a-20240826";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -132,7 +132,7 @@ export function _injectProductInfo(key, element) {
   const schemaValidity = _checkKeySchema(key);
   if (hasValidType || isNonCommercial || schemaValidity) {
     if (schemaValidity) {
-      const releaseDate = moment("30/07/2024", 'DD/MM/YYYY');
+      const releaseDate = moment("11/06/2024", 'DD/MM/YYYY');
       const releaseDays = Math.floor(releaseDate.toDate().getTime() / 8.64e7);
       const keyValidityDays = _extractTime(key);
       keyValidityDate = moment((keyValidityDays + 1) * 8.64e7, 'x').format('MMMM DD, YYYY');

package/package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/handsontable/handsontable/issues"
   },
   "author": "Handsoncode <hello@handsontable.com>",
-  "version": "0.0.0-next-9891faa-20240822",
+  "version": "0.0.0-next-0306a1a-20240826",
   "main": "index",
   "module": "index.mjs",
   "jsnext:main": "index.mjs",

package/pluginHooks.js

@@ -609,6 +609,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {object} preventScrolling A reference to the observable object with the `value` property.
  *                                  Property `preventScrolling.value` expects a boolean value that
  *                                  Handsontable uses to control scroll behavior after selection.
+ * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ::: only-for javascript

package/pluginHooks.mjs

@@ -605,6 +605,7 @@ const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-complete-s
  * @param {object} preventScrolling A reference to the observable object with the `value` property.
  *                                  Property `preventScrolling.value` expects a boolean value that
  *                                  Handsontable uses to control scroll behavior after selection.
+ * @param {object} preventScrolling Object with `value` property where its value change will be observed.
  * @param {number} selectionLayerLevel The number which indicates what selection layer is currently modified.
  * @example
  * ::: only-for javascript

package/plugins/autoColumnSize/autoColumnSize.js

@@ -482,7 +482,7 @@ class AutoColumnSize extends _base.BasePlugin {
     if (width === undefined) {
       width = this.columnWidthsMap.getValueAtIndex(this.hot.toPhysicalColumn(column));
       if (keepMinimum && typeof width === 'number') {
-        width = Math.max(width, _src.DEFAULT_COLUMN_WIDTH);
+        width = Math.max(width, _src.ViewportColumnsCalculator.DEFAULT_WIDTH);
       }
     }
     return width;

package/plugins/autoColumnSize/autoColumnSize.mjs

@@ -17,7 +17,7 @@ import { isObject, hasOwnProperty } from "../../helpers/object.mjs";
 import { valueAccordingPercent, rangeEach } from "../../helpers/number.mjs";
 import SamplesGenerator from "../../utils/samplesGenerator.mjs";
 import { isPercentValue } from "../../helpers/string.mjs";
-import { DEFAULT_COLUMN_WIDTH } from "../../3rdparty/walkontable/src/index.mjs";
+import { ViewportColumnsCalculator } from "../../3rdparty/walkontable/src/index.mjs";
 import { PhysicalIndexToValueMap as IndexToValueMap } from "../../translations/index.mjs";
 Hooks.getSingleton().register('modifyAutoColumnSizeSeed');
 export const PLUGIN_KEY = 'autoColumnSize';
@@ -478,7 +478,7 @@ export class AutoColumnSize extends BasePlugin {
     if (width === undefined) {
       width = this.columnWidthsMap.getValueAtIndex(this.hot.toPhysicalColumn(column));
       if (keepMinimum && typeof width === 'number') {
-        width = Math.max(width, DEFAULT_COLUMN_WIDTH);
+        width = Math.max(width, ViewportColumnsCalculator.DEFAULT_WIDTH);
       }
     }
     return width;

package/plugins/autoRowSize/autoRowSize.js

@@ -37,7 +37,8 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
+ * in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/autoRowSize/autoRowSize.mjs

@@ -33,7 +33,8 @@ const ROW_WIDTHS_MAP_NAME = 'autoRowSize';
  * resize the rows accordingly.
  * If you experience problems with the performance, try turning this feature off and declaring the row heights manually.
  *
- * But, to display Handsontable's scrollbar in a proper size, you need to enable the `AutoRowSize` plugin,
+ * But, to display Handsontable's [scrollbar](https://handsontable.com/docs/8.0.0/demo-scrolling.html)
+ * in a proper size, you need to enable the `AutoRowSize` plugin,
  * by setting the [`autoRowSize`](@/api/options.md#autoRowSize) option to `true`.
  *
  * Row height calculations are divided into sync and async part. Each of this parts has their own advantages and

package/plugins/columnSorting/columnSorting.js

@@ -722,16 +722,7 @@ class ColumnSorting extends _base.BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      const activeEditor = this.hot.getActiveEditor();
-      const nextConfig = this.getColumnNextConfig(coords.col);
-      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
-        // Postpone sorting until the cell's value is validated and saved.
-        this.hot.addHookOnce('postAfterValidate', () => {
-          this.sort(nextConfig);
-        });
-      } else {
-        this.sort(nextConfig);
-      }
+      this.sort(this.getColumnNextConfig(coords.col));
     }
   }
 

package/plugins/columnSorting/columnSorting.mjs

@@ -718,16 +718,7 @@ export class ColumnSorting extends BasePlugin {
         this.hot.deselectCell();
         this.hot.selectColumns(coords.col);
       }
-      const activeEditor = this.hot.getActiveEditor();
-      const nextConfig = this.getColumnNextConfig(coords.col);
-      if (activeEditor !== null && activeEditor !== void 0 && activeEditor.isOpened() && this.hot.getCellValidator(activeEditor.row, activeEditor.col)) {
-        // Postpone sorting until the cell's value is validated and saved.
-        this.hot.addHookOnce('postAfterValidate', () => {
-          this.sort(nextConfig);
-        });
-      } else {
-        this.sort(nextConfig);
-      }
+      this.sort(this.getColumnNextConfig(coords.col));
     }
   }
 

package/plugins/contextMenu/menu/menuItemRenderer.js

@@ -25,16 +25,17 @@ function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
+    if (TD.hasAttribute('ghost-table')) {
+      return;
+    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
-    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
-    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     (0, _element.empty)(TD);
     (0, _element.addClass)(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !(0, _utils.isItemDisabled)(item, mainTableHot) && !(0, _utils.isItemSelectionDisabled)(item) && !(0, _utils.isItemSeparator)(item);
-      (0, _element.setAttribute)(TD, [...((0, _utils.isItemCheckable)(item) ? [(0, _a11y.A11Y_MENU_ITEM_CHECKBOX)(), (0, _a11y.A11Y_LABEL)(ariaLabel), (0, _a11y.A11Y_CHECKED)(ariaChecked)] : [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue)]), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
+      (0, _element.setAttribute)(TD, [(0, _a11y.A11Y_MENU_ITEM)(), (0, _a11y.A11Y_LABEL)(itemValue), ...(isFocusable ? [(0, _a11y.A11Y_TABINDEX)(-1)] : []), ...((0, _utils.isItemDisabled)(item, mainTableHot) ? [(0, _a11y.A11Y_DISABLED)()] : []), ...((0, _utils.isItemSubMenu)(item) ? [(0, _a11y.A11Y_EXPANDED)(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/menuItemRenderer.mjs

@@ -1,6 +1,6 @@
-import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator, isItemCheckable } from "./utils.mjs";
+import { isItemSubMenu, isItemDisabled, isItemSelectionDisabled, isItemSeparator } from "./utils.mjs";
 import { addClass, empty, fastInnerHTML, setAttribute } from "../../../helpers/dom/element.mjs";
-import { A11Y_MENU_ITEM_CHECKBOX, A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX, A11Y_CHECKED } from "../../../helpers/a11y.mjs";
+import { A11Y_DISABLED, A11Y_EXPANDED, A11Y_LABEL, A11Y_MENU_ITEM, A11Y_TABINDEX } from "../../../helpers/a11y.mjs";
 /**
  * Creates the menu renderer function.
  *
@@ -21,16 +21,17 @@ export function createMenuItemRenderer(mainTableHot) {
    * @param {string} value The cell value.
    */
   return (menuHot, TD, row, col, prop, value) => {
+    if (TD.hasAttribute('ghost-table')) {
+      return;
+    }
     const item = menuHot.getSourceDataAtRow(row);
     const wrapper = mainTableHot.rootDocument.createElement('div');
     const itemValue = typeof value === 'function' ? value.call(mainTableHot) : value;
-    const ariaLabel = typeof item.ariaLabel === 'function' ? item.ariaLabel.call(mainTableHot) : item.ariaLabel;
-    const ariaChecked = typeof item.ariaChecked === 'function' ? item.ariaChecked.call(mainTableHot) : item.ariaChecked;
     empty(TD);
     addClass(wrapper, 'htItemWrapper');
     if (mainTableHot.getSettings().ariaTags) {
       const isFocusable = !isItemDisabled(item, mainTableHot) && !isItemSelectionDisabled(item) && !isItemSeparator(item);
-      setAttribute(TD, [...(isItemCheckable(item) ? [A11Y_MENU_ITEM_CHECKBOX(), A11Y_LABEL(ariaLabel), A11Y_CHECKED(ariaChecked)] : [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue)]), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
+      setAttribute(TD, [A11Y_MENU_ITEM(), A11Y_LABEL(itemValue), ...(isFocusable ? [A11Y_TABINDEX(-1)] : []), ...(isItemDisabled(item, mainTableHot) ? [A11Y_DISABLED()] : []), ...(isItemSubMenu(item) ? [A11Y_EXPANDED(false)] : [])]);
     }
     TD.className = '';
     TD.appendChild(wrapper);

package/plugins/contextMenu/menu/positioner.js

@@ -165,8 +165,12 @@ class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
+      const {
+        right: parentMenuRight
+      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -179,8 +183,12 @@ class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
-      left -= borderLeftWidth;
+      const {
+        left: parentMenuLeft
+      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }

package/plugins/contextMenu/menu/positioner.mjs

@@ -162,8 +162,12 @@ export class Positioner {
   setPositionOnRightOfCursor() {
     let left = _classPrivateFieldGet(_cursor, this).left;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const borderRightWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderRightWidth, 10);
-      left += _classPrivateFieldGet(_cursor, this).cellWidth + borderRightWidth;
+      const {
+        right: parentMenuRight
+      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left += _classPrivateFieldGet(_cursor, this).cellWidth + parentMenuRight - (_classPrivateFieldGet(_cursor, this).left + _classPrivateFieldGet(_cursor, this).cellWidth);
     } else {
       left += _classPrivateFieldGet(_offset, this).right;
     }
@@ -176,8 +180,12 @@ export class Positioner {
   setPositionOnLeftOfCursor() {
     let left = _classPrivateFieldGet(_offset, this).left + _classPrivateFieldGet(_cursor, this).left - _classPrivateFieldGet(_container, this).offsetWidth;
     if (_classPrivateFieldGet(_parentContainer, this)) {
-      const borderLeftWidth = Number.parseInt(getComputedStyle(_classPrivateFieldGet(_parentContainer, this).querySelector('.htCore')).borderLeftWidth, 10);
-      left -= borderLeftWidth;
+      const {
+        left: parentMenuLeft
+      } = _classPrivateFieldGet(_parentContainer, this).getBoundingClientRect();
+
+      // move the sub menu by the width of the parent's border (usually by 1-2 pixels)
+      left -= _classPrivateFieldGet(_cursor, this).left - parentMenuLeft;
     }
     _classPrivateFieldGet(_container, this).style.left = `${left}px`;
   }

package/plugins/contextMenu/menu/utils.js

@@ -4,7 +4,6 @@ exports.__esModule = true;
 exports.filterSeparators = filterSeparators;
 exports.hasSubMenu = hasSubMenu;
 exports.isDisabled = isDisabled;
-exports.isItemCheckable = isItemCheckable;
 exports.isItemDisabled = isItemDisabled;
 exports.isItemHidden = isItemHidden;
 exports.isItemSelectionDisabled = isItemSelectionDisabled;
@@ -175,14 +174,4 @@ function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
-}
-
-/**
- * Check if the provided element presents the checkboxable menu item.
- *
- * @param {object} itemToTest Item element.
- * @returns {boolean}
- */
-function isItemCheckable(itemToTest) {
-  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/menu/utils.mjs

@@ -160,14 +160,4 @@ export function filterSeparators(items) {
   result = popSeparators(result, separator);
   result = removeDuplicatedSeparators(result);
   return result;
-}
-
-/**
- * Check if the provided element presents the checkboxable menu item.
- *
- * @param {object} itemToTest Item element.
- * @returns {boolean}
- */
-export function isItemCheckable(itemToTest) {
-  return itemToTest.checkable === true;
 }

package/plugins/contextMenu/predefinedItems/alignment.js

@@ -9,17 +9,6 @@ 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; }
 const KEY = exports.KEY = 'alignment';
 
-/**
- * @param {object} hot The current Handsontable instance.
- * @param {string} rawName The raw name of the menu item.
- * @param {string} htClassName The class name to check.
- * @returns {string} The value of aria-label parameter.
- */
-function ariaLabel(hot, rawName, htClassName) {
-  const checkboxState = (0, _utils.hasSelectionAClass)(hot, htClassName) ? hot.getTranslatedPhrase(C.CHECKBOX_CHECKED) : hot.getTranslatedPhrase(C.CHECKBOX_UNCHECKED);
-  return `${rawName} ${checkboxState.toLowerCase()}`;
-}
-
 /**
  * @returns {object}
  */
@@ -45,16 +34,15 @@ function alignmentItem() {
     submenu: {
       items: [{
         key: `${KEY}:left`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT), 'htLeft');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htLeft');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_LEFT);
-          if ((0, _utils.hasSelectionAClass)(this, 'htLeft')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htLeft') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -71,16 +59,15 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:center`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER), 'htCenter');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htCenter');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_CENTER);
-          if ((0, _utils.hasSelectionAClass)(this, 'htCenter')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htCenter') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -97,16 +84,15 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:right`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT), 'htRight');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htRight');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_RIGHT);
-          if ((0, _utils.hasSelectionAClass)(this, 'htRight')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htRight') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -123,16 +109,15 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:justify`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY), 'htJustify');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htJustify');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_JUSTIFY);
-          if ((0, _utils.hasSelectionAClass)(this, 'htJustify')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htJustify') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -151,16 +136,15 @@ function alignmentItem() {
         name: _separator.KEY
       }, {
         key: `${KEY}:top`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP), 'htTop');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htTop');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_TOP);
-          if ((0, _utils.hasSelectionAClass)(this, 'htTop')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htTop') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -177,16 +161,15 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:middle`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE), 'htMiddle');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htMiddle');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_MIDDLE);
-          if ((0, _utils.hasSelectionAClass)(this, 'htMiddle')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htMiddle') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;
@@ -203,16 +186,15 @@ function alignmentItem() {
         disabled: false
       }, {
         key: `${KEY}:bottom`,
-        checkable: true,
-        ariaLabel() {
-          return ariaLabel(this, this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM), 'htBottom');
-        },
-        ariaChecked() {
-          return (0, _utils.hasSelectionAClass)(this, 'htBottom');
-        },
         name() {
           let label = this.getTranslatedPhrase(C.CONTEXTMENU_ITEMS_ALIGNMENT_BOTTOM);
-          if ((0, _utils.hasSelectionAClass)(this, 'htBottom')) {
+          const hasClass = (0, _utils.checkSelectionConsistency)(this.getSelectedRange(), (row, col) => {
+            const className = this.getCellMeta(row, col).className;
+            if (className && className.indexOf('htBottom') !== -1) {
+              return true;
+            }
+          });
+          if (hasClass) {
             label = (0, _utils.markLabelAsSelected)(label);
           }
           return label;