handsontable 16.0.1 → 16.1.0-next-abd8f2e-20250904

package/plugins/dialog/ui.js

@@ -0,0 +1,264 @@
+"use strict";
+
+exports.__esModule = true;
+require("core-js/modules/es.error.cause.js");
+var _templateLiteralTag = require("../../helpers/templateLiteralTag");
+var _object = require("../../helpers/object");
+var _localHooks = _interopRequireDefault(require("../../mixins/localHooks"));
+var _element = require("../../helpers/dom/element");
+var _a11y = require("../../helpers/a11y");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+const DIALOG_CLASS_NAME = 'ht-dialog';
+const TEMPLATE = `
+<div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
+  <div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
+    <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
+  </div>
+</div>
+`;
+
+/**
+ * DialogUI is a UI component that renders and manages dialog elements.
+ * It handles dialog creation, content updates, visibility toggling, and styling.
+ *
+ * @private
+ * @class DialogUI
+ */
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _refs = /*#__PURE__*/new WeakMap();
+var _isRtl = /*#__PURE__*/new WeakMap();
+class DialogUI {
+  constructor(_ref) {
+    let {
+      rootElement,
+      isRtl
+    } = _ref;
+    /**
+     * The root element where the dialog UI will be installed.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The references to the UI elements.
+     *
+     * @type {object}
+     */
+    _classPrivateFieldInitSpec(this, _refs, void 0);
+    /**
+     * Indicates if the UI is in RTL mode.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isRtl, false);
+    _classPrivateFieldSet(_rootElement, this, rootElement);
+    _classPrivateFieldSet(_isRtl, this, isRtl);
+    this.install();
+  }
+
+  /**
+   * Creates the dialog UI elements and sets up the structure.
+   */
+  install() {
+    var _classPrivateFieldGet2;
+    if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
+      return;
+    }
+    const elements = (0, _templateLiteralTag.html)`${TEMPLATE}`;
+    _classPrivateFieldSet(_refs, this, elements.refs);
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
+
+    // Set ARIA attributes
+    (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_MODAL)(), (0, _a11y.A11Y_TABINDEX)(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+
+    // Append to Handsontable after table grid element
+    _classPrivateFieldGet(_rootElement, this).after(elements.fragment);
+  }
+
+  /**
+   * Returns the dialog element.
+   *
+   * @returns {HTMLElement} The dialog element.
+   */
+  getDialogElement() {
+    return _classPrivateFieldGet(_refs, this).dialogElement;
+  }
+
+  /**
+   * Checks if the given element is inside the dialog.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
+   */
+  isInsideDialog(element) {
+    return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
+  }
+
+  /**
+   * Updates the dialog content and class name.
+   *
+   * @param {object} options - Class name update options.
+   * @param {boolean} options.isVisible - Whether the dialog is visible.
+   * @param {string|HTMLElement} options.content - The content to render in the dialog.
+   * @param {string} options.customClassName - The custom class name to add to the dialog.
+   * @param {string} options.background - The background to add to the dialog.
+   * @param {boolean} options.contentBackground - Whether to show content background.
+   * @param {boolean} options.animation - Whether to add the animation class to the dialog.
+   * @param {object} options.a11y - The accessibility options for the dialog.
+   *
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateDialog(_ref2) {
+    let {
+      isVisible,
+      content,
+      customClassName,
+      background,
+      contentBackground,
+      animation,
+      a11y
+    } = _ref2;
+    const {
+      dialogElement,
+      contentElement
+    } = _classPrivateFieldGet(_refs, this);
+
+    // Dialog class name
+    const customClass = customClassName ? ` ${customClassName}` : '';
+    const backgroundClass = background ? ` ${DIALOG_CLASS_NAME}--background-${background}` : '';
+    const animationClass = animation ? ` ${DIALOG_CLASS_NAME}--animation` : '';
+    const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
+
+    // Update dialog class name
+    dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
+
+    // Dialog aria attributes
+    (0, _element.setAttribute)(dialogElement, [a11y.role === 'alertdialog' ? (0, _a11y.A11Y_ALERTDIALOG)() : (0, _a11y.A11Y_DIALOG)()]);
+    if (a11y.ariaLabel && !a11y.ariaLabelledby) {
+      (0, _element.setAttribute)(dialogElement, [a11y.ariaLabel ? (0, _a11y.A11Y_LABEL)(a11y.ariaLabel) : undefined]);
+    } else {
+      (0, _element.removeAttribute)(dialogElement, 'aria-label');
+    }
+    if (a11y.ariaLabelledby) {
+      (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_LABELED_BY)(a11y.ariaLabelledby)]);
+    } else {
+      (0, _element.removeAttribute)(dialogElement, 'aria-labelledby');
+    }
+    if (a11y.ariaDescribedby) {
+      (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_DESCRIBED_BY)(a11y.ariaDescribedby)]);
+    } else {
+      (0, _element.removeAttribute)(dialogElement, 'aria-describedby');
+    }
+
+    // Dialog content class name
+    const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
+
+    // Update content class name
+    contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`;
+
+    // Clear existing dialog content
+    contentElement.innerHTML = '';
+
+    // Render new dialog content
+    if (typeof content === 'string') {
+      (0, _element.fastInnerHTML)(contentElement, content);
+    } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+      contentElement.appendChild(content);
+    }
+    return this;
+  }
+
+  /**
+   * Shows the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  showDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.style.display = 'block';
+    if (animation) {
+      // Triggers style and layout recalculation, so the display: block is fully committed before adding
+      // the class ht-dialog--show.
+      // eslint-disable-next-line no-unused-expressions
+      dialogElement.offsetHeight;
+    }
+    (0, _element.addClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    return this;
+  }
+
+  /**
+   * Hides the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  hideDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    (0, _element.removeClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    if (animation) {
+      dialogElement.addEventListener('transitionend', () => {
+        if (!(0, _element.hasClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
+          dialogElement.style.display = 'none';
+        }
+      }, {
+        once: true
+      });
+    } else {
+      dialogElement.style.display = 'none';
+    }
+    return this;
+  }
+
+  /**
+   * Focuses the dialog element.
+   */
+  focusDialog() {
+    _classPrivateFieldGet(_refs, this).dialogElement.focus();
+  }
+
+  /**
+   * Updates the width of the dialog container to the same size as the table.
+   *
+   * @param {number} width - The width of the table.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateWidth(width) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.width = `${width}px`;
+    return this;
+  }
+
+  /**
+   * Updates the height of the dialog container.
+   *
+   * @param {number} licenseInfoHeight - The height of the license info.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateHeight(licenseInfoHeight) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
+    return this;
+  }
+
+  /**
+   * Removes the dialog UI elements from the DOM and clears the refs.
+   */
+  destroyDialog() {
+    var _classPrivateFieldGet3;
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_refs, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.dialogElement.remove();
+    _classPrivateFieldSet(_refs, this, null);
+  }
+}
+exports.DialogUI = DialogUI;
+(0, _object.mixin)(DialogUI, _localHooks.default);

package/plugins/dialog/ui.mjs

@@ -0,0 +1,259 @@
+import "core-js/modules/es.error.cause.js";
+function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
+function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+import { html } from "../../helpers/templateLiteralTag.mjs";
+import { mixin } from "../../helpers/object.mjs";
+import localHooks from "../../mixins/localHooks.mjs";
+import { addClass, removeClass, hasClass, fastInnerHTML, setAttribute, removeAttribute } from "../../helpers/dom/element.mjs";
+import { A11Y_DIALOG, A11Y_MODAL, A11Y_TABINDEX, A11Y_LABEL, A11Y_LABELED_BY, A11Y_DESCRIBED_BY, A11Y_ALERTDIALOG } from "../../helpers/a11y.mjs";
+const DIALOG_CLASS_NAME = 'ht-dialog';
+const TEMPLATE = `
+<div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
+  <div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
+    <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
+  </div>
+</div>
+`;
+
+/**
+ * DialogUI is a UI component that renders and manages dialog elements.
+ * It handles dialog creation, content updates, visibility toggling, and styling.
+ *
+ * @private
+ * @class DialogUI
+ */
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _refs = /*#__PURE__*/new WeakMap();
+var _isRtl = /*#__PURE__*/new WeakMap();
+export class DialogUI {
+  constructor(_ref) {
+    let {
+      rootElement,
+      isRtl
+    } = _ref;
+    /**
+     * The root element where the dialog UI will be installed.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The references to the UI elements.
+     *
+     * @type {object}
+     */
+    _classPrivateFieldInitSpec(this, _refs, void 0);
+    /**
+     * Indicates if the UI is in RTL mode.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isRtl, false);
+    _classPrivateFieldSet(_rootElement, this, rootElement);
+    _classPrivateFieldSet(_isRtl, this, isRtl);
+    this.install();
+  }
+
+  /**
+   * Creates the dialog UI elements and sets up the structure.
+   */
+  install() {
+    var _classPrivateFieldGet2;
+    if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
+      return;
+    }
+    const elements = html`${TEMPLATE}`;
+    _classPrivateFieldSet(_refs, this, elements.refs);
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
+
+    // Set ARIA attributes
+    setAttribute(dialogElement, [A11Y_MODAL(), A11Y_TABINDEX(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+
+    // Append to Handsontable after table grid element
+    _classPrivateFieldGet(_rootElement, this).after(elements.fragment);
+  }
+
+  /**
+   * Returns the dialog element.
+   *
+   * @returns {HTMLElement} The dialog element.
+   */
+  getDialogElement() {
+    return _classPrivateFieldGet(_refs, this).dialogElement;
+  }
+
+  /**
+   * Checks if the given element is inside the dialog.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
+   */
+  isInsideDialog(element) {
+    return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
+  }
+
+  /**
+   * Updates the dialog content and class name.
+   *
+   * @param {object} options - Class name update options.
+   * @param {boolean} options.isVisible - Whether the dialog is visible.
+   * @param {string|HTMLElement} options.content - The content to render in the dialog.
+   * @param {string} options.customClassName - The custom class name to add to the dialog.
+   * @param {string} options.background - The background to add to the dialog.
+   * @param {boolean} options.contentBackground - Whether to show content background.
+   * @param {boolean} options.animation - Whether to add the animation class to the dialog.
+   * @param {object} options.a11y - The accessibility options for the dialog.
+   *
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateDialog(_ref2) {
+    let {
+      isVisible,
+      content,
+      customClassName,
+      background,
+      contentBackground,
+      animation,
+      a11y
+    } = _ref2;
+    const {
+      dialogElement,
+      contentElement
+    } = _classPrivateFieldGet(_refs, this);
+
+    // Dialog class name
+    const customClass = customClassName ? ` ${customClassName}` : '';
+    const backgroundClass = background ? ` ${DIALOG_CLASS_NAME}--background-${background}` : '';
+    const animationClass = animation ? ` ${DIALOG_CLASS_NAME}--animation` : '';
+    const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
+
+    // Update dialog class name
+    dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
+
+    // Dialog aria attributes
+    setAttribute(dialogElement, [a11y.role === 'alertdialog' ? A11Y_ALERTDIALOG() : A11Y_DIALOG()]);
+    if (a11y.ariaLabel && !a11y.ariaLabelledby) {
+      setAttribute(dialogElement, [a11y.ariaLabel ? A11Y_LABEL(a11y.ariaLabel) : undefined]);
+    } else {
+      removeAttribute(dialogElement, 'aria-label');
+    }
+    if (a11y.ariaLabelledby) {
+      setAttribute(dialogElement, [A11Y_LABELED_BY(a11y.ariaLabelledby)]);
+    } else {
+      removeAttribute(dialogElement, 'aria-labelledby');
+    }
+    if (a11y.ariaDescribedby) {
+      setAttribute(dialogElement, [A11Y_DESCRIBED_BY(a11y.ariaDescribedby)]);
+    } else {
+      removeAttribute(dialogElement, 'aria-describedby');
+    }
+
+    // Dialog content class name
+    const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
+
+    // Update content class name
+    contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}`;
+
+    // Clear existing dialog content
+    contentElement.innerHTML = '';
+
+    // Render new dialog content
+    if (typeof content === 'string') {
+      fastInnerHTML(contentElement, content);
+    } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+      contentElement.appendChild(content);
+    }
+    return this;
+  }
+
+  /**
+   * Shows the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  showDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.style.display = 'block';
+    if (animation) {
+      // Triggers style and layout recalculation, so the display: block is fully committed before adding
+      // the class ht-dialog--show.
+      // eslint-disable-next-line no-unused-expressions
+      dialogElement.offsetHeight;
+    }
+    addClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    return this;
+  }
+
+  /**
+   * Hides the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  hideDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    removeClass(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    if (animation) {
+      dialogElement.addEventListener('transitionend', () => {
+        if (!hasClass(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
+          dialogElement.style.display = 'none';
+        }
+      }, {
+        once: true
+      });
+    } else {
+      dialogElement.style.display = 'none';
+    }
+    return this;
+  }
+
+  /**
+   * Focuses the dialog element.
+   */
+  focusDialog() {
+    _classPrivateFieldGet(_refs, this).dialogElement.focus();
+  }
+
+  /**
+   * Updates the width of the dialog container to the same size as the table.
+   *
+   * @param {number} width - The width of the table.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateWidth(width) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.width = `${width}px`;
+    return this;
+  }
+
+  /**
+   * Updates the height of the dialog container.
+   *
+   * @param {number} licenseInfoHeight - The height of the license info.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateHeight(licenseInfoHeight) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
+    return this;
+  }
+
+  /**
+   * Removes the dialog UI elements from the DOM and clears the refs.
+   */
+  destroyDialog() {
+    var _classPrivateFieldGet3;
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_refs, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.dialogElement.remove();
+    _classPrivateFieldSet(_refs, this, null);
+  }
+}
+mixin(DialogUI, localHooks);

package/plugins/dropdownMenu/dropdownMenu.js

@@ -193,6 +193,7 @@ class DropdownMenu extends _base.BasePlugin {
       }
       return _assertClassBrand(_DropdownMenu_brand, _this, _onBeforeViewportScrollHorizontally).call(_this, ...args);
     });
+    this.addHook('beforeDialogShow', () => this.close());
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -267,12 +268,12 @@ class DropdownMenu extends _base.BasePlugin {
     const callback = () => {
       const {
         highlight
-      } = this.hot.getSelectedRangeLast();
+      } = this.hot.getSelectedRangeActive();
       if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
         this.hot.selectColumns(highlight.col, highlight.col, -1);
         const {
           from
-        } = this.hot.getSelectedRangeLast();
+        } = this.hot.getSelectedRangeActive();
         const offset = (0, _utils.getDocumentOffsetByElement)(this.menu.container, this.hot.rootDocument);
         const target = this.hot.getCell(-1, from.col, true).querySelector(`.${BUTTON_CLASS_NAME}`);
         const rect = target.getBoundingClientRect();
@@ -295,7 +296,7 @@ class DropdownMenu extends _base.BasePlugin {
       callback,
       runOnlyIf: () => {
         var _this$hot$getSelected;
-        const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
+        const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isHeader() && !this.menu.isOpened();
       },
       captureCtrl: true,
@@ -305,7 +306,7 @@ class DropdownMenu extends _base.BasePlugin {
       callback,
       runOnlyIf: () => {
         var _this$hot$getSelected2;
-        const highlight = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
+        const highlight = (_this$hot$getSelected2 = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isCell() && !this.menu.isOpened();
       },
       group: SHORTCUTS_GROUP

package/plugins/dropdownMenu/dropdownMenu.mjs

@@ -190,6 +190,7 @@ export class DropdownMenu extends BasePlugin {
       }
       return _assertClassBrand(_DropdownMenu_brand, _this, _onBeforeViewportScrollHorizontally).call(_this, ...args);
     });
+    this.addHook('beforeDialogShow', () => this.close());
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -264,12 +265,12 @@ export class DropdownMenu extends BasePlugin {
     const callback = () => {
       const {
         highlight
-      } = this.hot.getSelectedRangeLast();
+      } = this.hot.getSelectedRangeActive();
       if ((highlight.isHeader() && highlight.row === -1 || highlight.isCell()) && highlight.col >= 0) {
         this.hot.selectColumns(highlight.col, highlight.col, -1);
         const {
           from
-        } = this.hot.getSelectedRangeLast();
+        } = this.hot.getSelectedRangeActive();
         const offset = getDocumentOffsetByElement(this.menu.container, this.hot.rootDocument);
         const target = this.hot.getCell(-1, from.col, true).querySelector(`.${BUTTON_CLASS_NAME}`);
         const rect = target.getBoundingClientRect();
@@ -292,7 +293,7 @@ export class DropdownMenu extends BasePlugin {
       callback,
       runOnlyIf: () => {
         var _this$hot$getSelected;
-        const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
+        const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isHeader() && !this.menu.isOpened();
       },
       captureCtrl: true,
@@ -302,7 +303,7 @@ export class DropdownMenu extends BasePlugin {
       callback,
       runOnlyIf: () => {
         var _this$hot$getSelected2;
-        const highlight = (_this$hot$getSelected2 = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
+        const highlight = (_this$hot$getSelected2 = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected2 === void 0 ? void 0 : _this$hot$getSelected2.highlight;
         return highlight && this.hot.selection.isCellVisible(highlight) && highlight.isCell() && !this.menu.isOpened();
       },
       group: SHORTCUTS_GROUP

package/plugins/filters/filters.js

@@ -661,7 +661,7 @@ class Filters extends _base.BasePlugin {
       this.importConditions(_classPrivateFieldGet(_previousConditionStack, this));
     }
     if (this.hot.selection.isSelected()) {
-      this.hot.selectCell(navigableHeaders ? -1 : 0, this.hot.getSelectedRangeLast().highlight.col);
+      this.hot.selectCell(navigableHeaders ? -1 : 0, this.hot.getSelectedRangeActive().highlight.col);
     }
     if (allowFiltering !== false) {
       this.hot.runHooks('afterFilter', conditions);
@@ -679,7 +679,7 @@ class Filters extends _base.BasePlugin {
    */
   getSelectedColumn() {
     var _this$hot$getSelected;
-    const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
+    const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
     if (!highlight) {
       return null;
     }

package/plugins/filters/filters.mjs

@@ -656,7 +656,7 @@ export class Filters extends BasePlugin {
       this.importConditions(_classPrivateFieldGet(_previousConditionStack, this));
     }
     if (this.hot.selection.isSelected()) {
-      this.hot.selectCell(navigableHeaders ? -1 : 0, this.hot.getSelectedRangeLast().highlight.col);
+      this.hot.selectCell(navigableHeaders ? -1 : 0, this.hot.getSelectedRangeActive().highlight.col);
     }
     if (allowFiltering !== false) {
       this.hot.runHooks('afterFilter', conditions);
@@ -674,7 +674,7 @@ export class Filters extends BasePlugin {
    */
   getSelectedColumn() {
     var _this$hot$getSelected;
-    const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeLast()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
+    const highlight = (_this$hot$getSelected = this.hot.getSelectedRangeActive()) === null || _this$hot$getSelected === void 0 ? void 0 : _this$hot$getSelected.highlight;
     if (!highlight) {
       return null;
     }

package/plugins/hiddenColumns/contextMenuItem/hideColumn.js

@@ -13,7 +13,7 @@ function hideColumnItem(hiddenColumnsPlugin) {
   return {
     key: 'hidden_columns_hide',
     name() {
-      const selection = this.getSelectedLast();
+      const selection = this.getSelectedActive();
       let pluralForm = 0;
       if (Array.isArray(selection)) {
         const [, fromColumn,, toColumn] = selection;
@@ -27,7 +27,7 @@ function hideColumnItem(hiddenColumnsPlugin) {
       const {
         from,
         to
-      } = this.getSelectedRangeLast();
+      } = this.getSelectedRangeActive();
       const start = Math.max(Math.min(from.col, to.col), 0);
       const end = Math.max(from.col, to.col);
       const columnsToHide = [];
@@ -42,8 +42,8 @@ function hideColumnItem(hiddenColumnsPlugin) {
       } else {
         this.deselectCell();
       }
-      this.render();
       this.view.adjustElementsSize();
+      this.render();
     },
     disabled: false,
     hidden() {