handsontable 0.0.0-next-a1e4b4f-20230628 → 0.0.0-next-e697250-20230707

package/selection/highlight/highlight.js

@@ -5,6 +5,7 @@ require("core-js/modules/es.date.to-primitive.js");
 require("core-js/modules/es.number.constructor.js");
 require("core-js/modules/es.array.from.js");
 require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.regexp.to-string.js");
 require("core-js/modules/es.function.name.js");
 require("core-js/modules/es.regexp.exec.js");
 require("core-js/modules/es.object.keys.js");
@@ -65,8 +66,6 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-var _createHighlight = /*#__PURE__*/new WeakSet();
-_Symbol$iterator = Symbol.iterator;
 /**
  * Highlight class responsible for managing Walkontable Selection classes.
  *
@@ -82,102 +81,9 @@ _Symbol$iterator = Symbol.iterator;
  * @class Highlight
  * @util
  */
+var _createHighlight = /*#__PURE__*/new WeakSet();
+_Symbol$iterator = Symbol.iterator;
 var Highlight = /*#__PURE__*/function () {
-  /**
-   * Options consumed by Highlight class and Walkontable Selection classes.
-   *
-   * @type {object}
-   */
-
-  /**
-   * The property which describes which layer level of the visual selection will be modified.
-   * This option is valid only for `area` and `header` highlight types which occurs multiple times on
-   * the table (as a non-consecutive selection).
-   *
-   * An order of the layers is the same as the order of added new non-consecutive selections.
-   *
-   * @type {number}
-   * @default 0
-   */
-
-  /**
-   * `cell` highlight object which describes attributes for the currently selected cell.
-   * It can only occur only once on the table.
-   *
-   * @type {Selection}
-   */
-
-  /**
-   * `fill` highlight object which describes attributes for the borders for autofill functionality.
-   * It can only occur only once on the table.
-   *
-   * @type {Selection}
-   */
-
-  /**
-   * Collection of the `area` highlights. That objects describes attributes for the borders and selection of
-   * the multiple selected cells. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `highlight` highlights. That objects describes attributes for the borders and selection of
-   * the multiple selected cells. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `header` highlights. That objects describes attributes for the selection of
-   * the multiple selected rows in the table header. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `header` highlights. That objects describes attributes for the selection of
-   * the multiple selected columns in the table header. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `active-header` highlights. That objects describes attributes for the selection of
-   * the multiple selected rows in the table header. The table headers which have selected all items in
-   * a row will be marked as `active-header`.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `active-header` highlights. That objects describes attributes for the selection of
-   * the multiple selected columns in the table header. The table headers which have selected all items in
-   * a row will be marked as `active-header`.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `rows` highlights. That objects describes attributes for the selection of
-   * the multiple selected cells in a row. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `columns` highlights. That objects describes attributes for the selection of
-   * the multiple selected cells in a column. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `custom-selection`, holder for example borders added through CustomBorders plugin.
-   *
-   * @type {Selection[]}
-   */
-
   function Highlight(options) {
     _classCallCheck(this, Highlight);
     /**
@@ -188,18 +94,108 @@ var Highlight = /*#__PURE__*/function () {
      * @returns {VisualSelection}
      */
     _classPrivateMethodInitSpec(this, _createHighlight);
+    /**
+     * Options consumed by Highlight class and Walkontable Selection classes.
+     *
+     * @type {object}
+     */
     _defineProperty(this, "options", void 0);
+    /**
+     * The property which describes which layer level of the visual selection will be modified.
+     * This option is valid only for `area` and `header` highlight types which occurs multiple times on
+     * the table (as a non-consecutive selection).
+     *
+     * An order of the layers is the same as the order of added new non-consecutive selections.
+     *
+     * @type {number}
+     * @default 0
+     */
     _defineProperty(this, "layerLevel", 0);
+    /**
+     * `cell` highlight object which describes attributes for the currently selected cell.
+     * It can only occur only once on the table.
+     *
+     * @type {Selection}
+     */
     _defineProperty(this, "focus", void 0);
+    /**
+     * `fill` highlight object which describes attributes for the borders for autofill functionality.
+     * It can only occur only once on the table.
+     *
+     * @type {Selection}
+     */
     _defineProperty(this, "fill", void 0);
+    /**
+     * Collection of the `area` highlights. That objects describes attributes for the borders and selection of
+     * the multiple selected cells. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "layeredAreas", new Map());
+    /**
+     * Collection of the `highlight` highlights. That objects describes attributes for the borders and selection of
+     * the multiple selected cells. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "areas", new Map());
+    /**
+     * Collection of the `header` highlights. That objects describes attributes for the selection of
+     * the multiple selected rows in the table header. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "rowHeaders", new Map());
+    /**
+     * Collection of the `header` highlights. That objects describes attributes for the selection of
+     * the multiple selected columns in the table header. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "columnHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the multiple selected rows in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "activeRowHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the multiple selected columns in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "activeColumnHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the selected corner in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
+    _defineProperty(this, "activeCornerHeaders", new Map());
+    /**
+     * Collection of the `rows` highlights. That objects describes attributes for the selection of
+     * the multiple selected cells in a row. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "rowHighlights", new Map());
+    /**
+     * Collection of the `columns` highlights. That objects describes attributes for the selection of
+     * the multiple selected cells in a column. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "columnHighlights", new Map());
+    /**
+     * Collection of the `custom-selection`, holder for example borders added through CustomBorders plugin.
+     *
+     * @type {Selection[]}
+     */
     _defineProperty(this, "customSelections", []);
     this.options = options;
     this.focus = (0, _focus.createHighlight)(options);
@@ -408,6 +404,29 @@ var Highlight = /*#__PURE__*/function () {
       return _toConsumableArray(this.activeColumnHeaders.values());
     }
 
+    /**
+     * Creates (if not exist in the cache) Walkontable Selection instance created for controlling
+     * highlight for the headers corner.
+     *
+     * @returns {Selection}
+     */
+  }, {
+    key: "createActiveCornerHeader",
+    value: function createActiveCornerHeader() {
+      return _classPrivateMethodGet(this, _createHighlight, _createHighlight2).call(this, this.activeCornerHeaders, _activeHeader.createHighlight);
+    }
+
+    /**
+     * Get all Walkontable Selection instances which describes the state of the visual highlight of the headers corner.
+     *
+     * @returns {Selection[]}
+     */
+  }, {
+    key: "getActiveCornerHeaders",
+    value: function getActiveCornerHeaders() {
+      return _toConsumableArray(this.activeCornerHeaders.values());
+    }
+
     /**
      * Creates (if not exist in the cache) Walkontable Selection instance created for controlling
      * highlight cells in a row.
@@ -502,6 +521,9 @@ var Highlight = /*#__PURE__*/function () {
       (0, _array.arrayEach)(this.activeColumnHeaders.values(), function (highlight) {
         return void highlight.clear();
       });
+      (0, _array.arrayEach)(this.activeCornerHeaders.values(), function (highlight) {
+        return void highlight.clear();
+      });
       (0, _array.arrayEach)(this.rowHighlights.values(), function (highlight) {
         return void highlight.clear();
       });
@@ -518,7 +540,7 @@ var Highlight = /*#__PURE__*/function () {
      * @returns {Selection[]}
      */
     function value() {
-      return [this.focus, this.fill].concat(_toConsumableArray(this.areas.values()), _toConsumableArray(this.layeredAreas.values()), _toConsumableArray(this.rowHeaders.values()), _toConsumableArray(this.columnHeaders.values()), _toConsumableArray(this.activeRowHeaders.values()), _toConsumableArray(this.activeColumnHeaders.values()), _toConsumableArray(this.rowHighlights.values()), _toConsumableArray(this.columnHighlights.values()), _toConsumableArray(this.customSelections))[Symbol.iterator]();
+      return [this.focus, this.fill].concat(_toConsumableArray(this.areas.values()), _toConsumableArray(this.layeredAreas.values()), _toConsumableArray(this.rowHeaders.values()), _toConsumableArray(this.columnHeaders.values()), _toConsumableArray(this.activeRowHeaders.values()), _toConsumableArray(this.activeColumnHeaders.values()), _toConsumableArray(this.activeCornerHeaders.values()), _toConsumableArray(this.rowHighlights.values()), _toConsumableArray(this.columnHighlights.values()), _toConsumableArray(this.customSelections))[Symbol.iterator]();
     }
   }]);
   return Highlight;

package/selection/highlight/highlight.mjs

@@ -26,6 +26,7 @@ import "core-js/modules/es.date.to-primitive.js";
 import "core-js/modules/es.number.constructor.js";
 import "core-js/modules/es.array.from.js";
 import "core-js/modules/es.array.slice.js";
+import "core-js/modules/es.regexp.to-string.js";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.regexp.exec.js";
 import "core-js/modules/es.object.keys.js";
@@ -73,101 +74,6 @@ export { HIGHLIGHT_ACTIVE_HEADER_TYPE as ACTIVE_HEADER_TYPE, HIGHLIGHT_AREA_TYPE
 var _createHighlight = /*#__PURE__*/new WeakSet();
 _Symbol$iterator = Symbol.iterator;
 var Highlight = /*#__PURE__*/function () {
-  /**
-   * Options consumed by Highlight class and Walkontable Selection classes.
-   *
-   * @type {object}
-   */
-
-  /**
-   * The property which describes which layer level of the visual selection will be modified.
-   * This option is valid only for `area` and `header` highlight types which occurs multiple times on
-   * the table (as a non-consecutive selection).
-   *
-   * An order of the layers is the same as the order of added new non-consecutive selections.
-   *
-   * @type {number}
-   * @default 0
-   */
-
-  /**
-   * `cell` highlight object which describes attributes for the currently selected cell.
-   * It can only occur only once on the table.
-   *
-   * @type {Selection}
-   */
-
-  /**
-   * `fill` highlight object which describes attributes for the borders for autofill functionality.
-   * It can only occur only once on the table.
-   *
-   * @type {Selection}
-   */
-
-  /**
-   * Collection of the `area` highlights. That objects describes attributes for the borders and selection of
-   * the multiple selected cells. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `highlight` highlights. That objects describes attributes for the borders and selection of
-   * the multiple selected cells. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `header` highlights. That objects describes attributes for the selection of
-   * the multiple selected rows in the table header. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `header` highlights. That objects describes attributes for the selection of
-   * the multiple selected columns in the table header. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `active-header` highlights. That objects describes attributes for the selection of
-   * the multiple selected rows in the table header. The table headers which have selected all items in
-   * a row will be marked as `active-header`.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `active-header` highlights. That objects describes attributes for the selection of
-   * the multiple selected columns in the table header. The table headers which have selected all items in
-   * a row will be marked as `active-header`.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `rows` highlights. That objects describes attributes for the selection of
-   * the multiple selected cells in a row. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `columns` highlights. That objects describes attributes for the selection of
-   * the multiple selected cells in a column. It can occur multiple times on the table.
-   *
-   * @type {Map.<number, Selection>}
-   */
-
-  /**
-   * Collection of the `custom-selection`, holder for example borders added through CustomBorders plugin.
-   *
-   * @type {Selection[]}
-   */
-
   function Highlight(options) {
     _classCallCheck(this, Highlight);
     /**
@@ -178,18 +84,108 @@ var Highlight = /*#__PURE__*/function () {
      * @returns {VisualSelection}
      */
     _classPrivateMethodInitSpec(this, _createHighlight);
+    /**
+     * Options consumed by Highlight class and Walkontable Selection classes.
+     *
+     * @type {object}
+     */
     _defineProperty(this, "options", void 0);
+    /**
+     * The property which describes which layer level of the visual selection will be modified.
+     * This option is valid only for `area` and `header` highlight types which occurs multiple times on
+     * the table (as a non-consecutive selection).
+     *
+     * An order of the layers is the same as the order of added new non-consecutive selections.
+     *
+     * @type {number}
+     * @default 0
+     */
     _defineProperty(this, "layerLevel", 0);
+    /**
+     * `cell` highlight object which describes attributes for the currently selected cell.
+     * It can only occur only once on the table.
+     *
+     * @type {Selection}
+     */
     _defineProperty(this, "focus", void 0);
+    /**
+     * `fill` highlight object which describes attributes for the borders for autofill functionality.
+     * It can only occur only once on the table.
+     *
+     * @type {Selection}
+     */
     _defineProperty(this, "fill", void 0);
+    /**
+     * Collection of the `area` highlights. That objects describes attributes for the borders and selection of
+     * the multiple selected cells. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "layeredAreas", new Map());
+    /**
+     * Collection of the `highlight` highlights. That objects describes attributes for the borders and selection of
+     * the multiple selected cells. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "areas", new Map());
+    /**
+     * Collection of the `header` highlights. That objects describes attributes for the selection of
+     * the multiple selected rows in the table header. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "rowHeaders", new Map());
+    /**
+     * Collection of the `header` highlights. That objects describes attributes for the selection of
+     * the multiple selected columns in the table header. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "columnHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the multiple selected rows in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "activeRowHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the multiple selected columns in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "activeColumnHeaders", new Map());
+    /**
+     * Collection of the `active-header` highlights. That objects describes attributes for the selection of
+     * the selected corner in the table header. The table headers which have selected all items in
+     * a row will be marked as `active-header`.
+     *
+     * @type {Map.<number, Selection>}
+     */
+    _defineProperty(this, "activeCornerHeaders", new Map());
+    /**
+     * Collection of the `rows` highlights. That objects describes attributes for the selection of
+     * the multiple selected cells in a row. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "rowHighlights", new Map());
+    /**
+     * Collection of the `columns` highlights. That objects describes attributes for the selection of
+     * the multiple selected cells in a column. It can occur multiple times on the table.
+     *
+     * @type {Map.<number, Selection>}
+     */
     _defineProperty(this, "columnHighlights", new Map());
+    /**
+     * Collection of the `custom-selection`, holder for example borders added through CustomBorders plugin.
+     *
+     * @type {Selection[]}
+     */
     _defineProperty(this, "customSelections", []);
     this.options = options;
     this.focus = createFocusHighlight(options);
@@ -398,6 +394,29 @@ var Highlight = /*#__PURE__*/function () {
       return _toConsumableArray(this.activeColumnHeaders.values());
     }
 
+    /**
+     * Creates (if not exist in the cache) Walkontable Selection instance created for controlling
+     * highlight for the headers corner.
+     *
+     * @returns {Selection}
+     */
+  }, {
+    key: "createActiveCornerHeader",
+    value: function createActiveCornerHeader() {
+      return _classPrivateMethodGet(this, _createHighlight, _createHighlight2).call(this, this.activeCornerHeaders, createActiveHighlight);
+    }
+
+    /**
+     * Get all Walkontable Selection instances which describes the state of the visual highlight of the headers corner.
+     *
+     * @returns {Selection[]}
+     */
+  }, {
+    key: "getActiveCornerHeaders",
+    value: function getActiveCornerHeaders() {
+      return _toConsumableArray(this.activeCornerHeaders.values());
+    }
+
     /**
      * Creates (if not exist in the cache) Walkontable Selection instance created for controlling
      * highlight cells in a row.
@@ -492,6 +511,9 @@ var Highlight = /*#__PURE__*/function () {
       arrayEach(this.activeColumnHeaders.values(), function (highlight) {
         return void highlight.clear();
       });
+      arrayEach(this.activeCornerHeaders.values(), function (highlight) {
+        return void highlight.clear();
+      });
       arrayEach(this.rowHighlights.values(), function (highlight) {
         return void highlight.clear();
       });
@@ -508,7 +530,7 @@ var Highlight = /*#__PURE__*/function () {
      * @returns {Selection[]}
      */
     function value() {
-      return [this.focus, this.fill].concat(_toConsumableArray(this.areas.values()), _toConsumableArray(this.layeredAreas.values()), _toConsumableArray(this.rowHeaders.values()), _toConsumableArray(this.columnHeaders.values()), _toConsumableArray(this.activeRowHeaders.values()), _toConsumableArray(this.activeColumnHeaders.values()), _toConsumableArray(this.rowHighlights.values()), _toConsumableArray(this.columnHighlights.values()), _toConsumableArray(this.customSelections))[Symbol.iterator]();
+      return [this.focus, this.fill].concat(_toConsumableArray(this.areas.values()), _toConsumableArray(this.layeredAreas.values()), _toConsumableArray(this.rowHeaders.values()), _toConsumableArray(this.columnHeaders.values()), _toConsumableArray(this.activeRowHeaders.values()), _toConsumableArray(this.activeColumnHeaders.values()), _toConsumableArray(this.activeCornerHeaders.values()), _toConsumableArray(this.rowHighlights.values()), _toConsumableArray(this.columnHighlights.values()), _toConsumableArray(this.customSelections))[Symbol.iterator]();
     }
   }]);
   return Highlight;

package/selection/highlight/visualSelection.js

@@ -37,16 +37,15 @@ function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input ==
 var VisualSelection = /*#__PURE__*/function (_Selection) {
   _inherits(VisualSelection, _Selection);
   var _super = _createSuper(VisualSelection);
-  /**
-   * Range of selection visually. Visual representation may have representation in a rendered selection.
-   *
-   * @type {null|CellRange}
-   */
-
   function VisualSelection(settings, visualCellRange) {
     var _this;
     _classCallCheck(this, VisualSelection);
     _this = _super.call(this, settings, null);
+    /**
+     * Range of selection visually. Visual representation may have representation in a rendered selection.
+     *
+     * @type {null|CellRange}
+     */
     _defineProperty(_assertThisInitialized(_this), "visualCellRange", null);
     _this.visualCellRange = visualCellRange || null;
     _this.commit();
@@ -121,13 +120,13 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
     key: "getNearestNotHiddenCoords",
     value: function getNearestNotHiddenCoords(coords, rowSearchDirection) {
       var columnSearchDirection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : rowSearchDirection;
-      var nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper(), coords.row, rowSearchDirection);
+      var nextVisibleRow = this.getNearestNotHiddenIndex(this.settings.rowIndexMapper, coords.row, rowSearchDirection);
 
       // There are no more visual rows in the range.
       if (nextVisibleRow === null) {
         return null;
       }
-      var nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper(), coords.col, columnSearchDirection);
+      var nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper, coords.col, columnSearchDirection);
 
       // There are no more visual columns in the range.
       if (nextVisibleColumn === null) {
@@ -193,24 +192,38 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
   }, {
     key: "syncWith",
     value: function syncWith(broaderCellRange) {
+      var coordsFrom = broaderCellRange.from.clone().normalize();
       var rowDirection = broaderCellRange.getVerticalDirection() === 'N-S' ? 1 : -1;
       var columnDirection = broaderCellRange.getHorizontalDirection() === 'W-E' ? 1 : -1;
-      var singleCellRangeVisual = this.getNearestNotHiddenCoords(broaderCellRange.from.clone().normalize(), rowDirection, columnDirection);
-      if (singleCellRangeVisual !== null && broaderCellRange.overlaps(singleCellRangeVisual)) {
-        // We can't show selection visually now, but we found fist visible range in the broader cell range.
+      var renderableHighlight = this.settings.visualToRenderableCoords(this.visualCellRange.highlight);
+      var cellCoordsVisual = null;
+      if (renderableHighlight === null || renderableHighlight.col === null || renderableHighlight.row === null) {
+        cellCoordsVisual = this.getNearestNotHiddenCoords(coordsFrom, rowDirection, columnDirection);
+      }
+      if (cellCoordsVisual !== null && broaderCellRange.overlaps(cellCoordsVisual)) {
+        var currentHighlight = broaderCellRange.highlight.clone();
+        if (currentHighlight.row >= 0) {
+          currentHighlight.row = cellCoordsVisual.row;
+        }
+        if (currentHighlight.col >= 0) {
+          currentHighlight.col = cellCoordsVisual.col;
+        }
+
+        // We can't show selection visually now, but we found first visible range in the broader cell range.
         if (this.cellRange === null) {
-          var singleCellRangeRenderable = this.settings.visualToRenderableCoords(singleCellRangeVisual);
-          this.cellRange = this.settings.createCellRange(singleCellRangeRenderable);
+          var cellCoordsRenderable = this.settings.visualToRenderableCoords(currentHighlight);
+          this.cellRange = this.settings.createCellRange(cellCoordsRenderable);
         }
 
         // We set new highlight as it might change (for example, when showing/hiding some cells from the broader selection range)
         // TODO: It is also handled by the `MergeCells` plugin while adjusting already modified coordinates. Should it?
-        broaderCellRange.setHighlight(singleCellRangeVisual);
-        return this;
+        broaderCellRange.setHighlight(currentHighlight);
       }
 
-      // Fallback to the start of the range. It resets the previous highlight (for example, when all columns have been hidden).
-      broaderCellRange.setHighlight(broaderCellRange.from);
+      // Sync the highlight coords from the visual selection layer with logical coords.
+      if (this.settings.selectionType === 'focus' && renderableHighlight !== null && cellCoordsVisual === null) {
+        broaderCellRange.setHighlight(this.visualCellRange.highlight);
+      }
       return this;
     }