handsontable 11.1.0 → 12.1.0

package/renderers/timeRenderer/timeRenderer.d.ts

@@ -0,0 +1,5 @@
+import Core from '../../core';
+import { CellProperties } from '../../settings';
+
+export const RENDERER_TYPE: 'time';
+export function timeRenderer(instance: Core, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: any, cellProperties: CellProperties): void;

package/renderers/timeRenderer/timeRenderer.js

@@ -0,0 +1,31 @@
+"use strict";
+
+exports.__esModule = true;
+exports.RENDERER_TYPE = void 0;
+exports.timeRenderer = timeRenderer;
+
+var _textRenderer = require("../textRenderer");
+
+var RENDERER_TYPE = 'time';
+/**
+ * Default time renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+
+exports.RENDERER_TYPE = RENDERER_TYPE;
+
+function timeRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  _textRenderer.textRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+
+  TD.dir = 'ltr';
+}
+
+timeRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/renderers/timeRenderer/timeRenderer.mjs

@@ -0,0 +1,20 @@
+import { textRenderer } from "../textRenderer/index.mjs";
+export var RENDERER_TYPE = 'time';
+/**
+ * Default time renderer.
+ *
+ * @private
+ * @param {Core} instance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object ({@see Core#getCellMeta}).
+ */
+
+export function timeRenderer(instance, TD, row, col, prop, value, cellProperties) {
+  textRenderer.apply(this, [instance, TD, row, col, prop, value, cellProperties]);
+  TD.dir = 'ltr';
+}
+timeRenderer.RENDERER_TYPE = RENDERER_TYPE;

package/selection/highlight/visualSelection.js

@@ -2,6 +2,10 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
+require("core-js/modules/es.object.set-prototype-of.js");
+
+require("core-js/modules/es.object.get-prototype-of.js");
+
 require("core-js/modules/es.object.to-string.js");
 
 require("core-js/modules/es.reflect.construct.js");
@@ -22,48 +26,24 @@ require("core-js/modules/es.string.iterator.js");
 
 require("core-js/modules/web.dom-collections.iterator.js");
 
-require("core-js/modules/es.array.slice.js");
-
-require("core-js/modules/es.function.name.js");
-
-require("core-js/modules/es.array.from.js");
-
-require("core-js/modules/es.regexp.exec.js");
-
 exports.__esModule = true;
 exports.default = void 0;
 
-require("core-js/modules/es.object.set-prototype-of.js");
-
-require("core-js/modules/es.object.get-prototype-of.js");
-
 var _src = require("./../../3rdparty/walkontable/src");
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
 
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
 
-function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
+function _get() { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get.bind(); } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(arguments.length < 3 ? target : receiver); } return desc.value; }; } return _get.apply(this, arguments); }
 
 function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -73,24 +53,28 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 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;
 
@@ -110,7 +94,7 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
     key: "add",
     value: function add(coords) {
       if (this.visualCellRange === null) {
-        this.visualCellRange = new _src.CellRange(coords);
+        this.visualCellRange = this.settings.createCellRange(coords);
       } else {
         this.visualCellRange.expand(coords);
       }
@@ -130,146 +114,95 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
       return _get(_getPrototypeOf(VisualSelection.prototype), "clear", this).call(this);
     }
     /**
-     * Search for the first visible coordinates in the range as range may start and/or end with the hidden index.
+     * Trims the passed cell range object by removing all coordinates that points to the hidden rows
+     * or columns. The result is a new cell range object that points only to the visible indexes or `null`.
      *
      * @private
-     * @param {CellCoords} startCoords Visual start coordinates for the range. Starting point for finding destination coordinates
-     * with visible coordinates (we are going from the starting coordinates to the end coordinates until the criteria are met).
-     * @param {CellCoords} endCoords Visual end coordinates for the range.
-     * @param {number} incrementByRow We are searching for a next visible rows by increasing (to be precise, or decreasing) indexes.
-     * This variable represent indexes shift. We are looking for an index:
-     * - for rows: from the left to the right (increasing indexes, then variable should have value 1) or
-     * other way around (decreasing indexes, then variable should have the value -1)
-     * - for columns: from the top to the bottom (increasing indexes, then variable should have value 1)
-     * or other way around (decreasing indexes, then variable should have the value -1).
-     * @param {number} incrementByColumn As above, just indexes shift for columns.
-     * @returns {null|CellCoords} Visual cell coordinates.
+     * @param {CellRange} cellRange Cells range object to be trimmed.
+     * @returns {CellRange} Visual non-hidden cells range coordinates.
      */
 
   }, {
-    key: "findVisibleCoordsInRange",
-    value: function findVisibleCoordsInRange(startCoords, endCoords, incrementByRow) {
-      var incrementByColumn = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : incrementByRow;
-      var nextVisibleRow = this.findVisibleCoordsInRowsRange(startCoords.row, endCoords.row, incrementByRow); // There are no more visual rows in the range.
-
-      if (nextVisibleRow === null) {
+    key: "trimToVisibleCellsRangeOnly",
+    value: function trimToVisibleCellsRangeOnly(_ref) {
+      var from = _ref.from,
+          to = _ref.to;
+      var visibleFromCoords = this.getNearestNotHiddenCoords(from, 1);
+      var visibleToCoords = this.getNearestNotHiddenCoords(to, -1);
+
+      if (visibleFromCoords === null || visibleToCoords === null) {
         return null;
       }
 
-      var nextVisibleColumn = this.findVisibleCoordsInColumnsRange(startCoords.col, endCoords.col, incrementByColumn); // There are no more visual columns in the range.
+      if (visibleFromCoords.row > visibleToCoords.row || visibleFromCoords.col > visibleToCoords.col) {
+        var isHeaderTypeSelection = this.settings.type === 'header' || this.settings.type === 'active-header';
 
-      if (nextVisibleColumn === null) {
-        return null;
+        if (!isHeaderTypeSelection) {
+          return null;
+        }
+
+        visibleFromCoords = from;
+        visibleToCoords = to;
       }
 
-      return new _src.CellCoords(nextVisibleRow, nextVisibleColumn);
+      return this.settings.createCellRange(visibleFromCoords, visibleFromCoords, visibleToCoords);
     }
     /**
-     * Searches the nearest visible row index, which is not hidden (is renderable).
+     * Gets nearest coordinates that points to the visible row and column indexes. If there are no visible
+     * rows and/or columns the `null` value is returned.
      *
      * @private
-     * @param {CellCoords} startVisibleRow Visual row index which starts the range. Starting point for finding
-     * destination coordinates with visible coordinates (we are going from the starting coordinates to the end
-     * coordinates until the criteria are met).
-     * @param {CellCoords} endVisibleRow Visual row index which ends the range.
-     * @param {number} incrementBy We are searching for a next visible rows by increasing (to be precise, or decreasing)
-     * indexes. This variable represent indexes shift. From the left to the right (increasing indexes, then variable
-     * should have value 1) or other way around (decreasing indexes, then variable should have the value -1).
-     * @returns {number|null} The visual row index.
+     * @param {CellCoords} coords The coords object as starting point for finding the nearest visible coordinates.
+     * @param {1|-1} rowSearchDirection The search direction. For value 1, it means searching from top to bottom for
+     *                                  rows and from left to right for columns. For -1, it is the other way around.
+     * @param {1|-1} columnSearchDirection The same as above but for rows.
+     * @returns {CellCoords|null} Visual cell coordinates.
      */
 
   }, {
-    key: "findVisibleCoordsInRowsRange",
-    value: function findVisibleCoordsInRowsRange(startVisibleRow, endVisibleRow, incrementBy) {
-      var _this$settings$visual = this.settings.visualToRenderableCoords({
-        row: startVisibleRow,
-        col: -1
-      }),
-          startRowRenderable = _this$settings$visual.row; // There are no more visual rows in the range.
-
+    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); // There are no more visual rows in the range.
 
-      if (endVisibleRow === startVisibleRow && startRowRenderable === null) {
+      if (nextVisibleRow === null) {
         return null;
-      } // We are looking for a next visible row in the range.
-
+      }
 
-      if (startRowRenderable === null) {
-        return this.findVisibleCoordsInRowsRange(startVisibleRow + incrementBy, endVisibleRow, incrementBy);
-      } // We found visible row index in the range.
+      var nextVisibleColumn = this.getNearestNotHiddenIndex(this.settings.columnIndexMapper(), coords.col, columnSearchDirection); // There are no more visual columns in the range.
 
+      if (nextVisibleColumn === null) {
+        return null;
+      }
 
-      return startVisibleRow;
+      return this.settings.createCellCoords(nextVisibleRow, nextVisibleColumn);
     }
     /**
-     * Searches the nearest visible column index, which is not hidden (is renderable).
+     * Gets nearest visual index. If there are no visible rows or columns the `null` value is returned.
      *
      * @private
-     * @param {CellCoords} startVisibleColumn Visual column index which starts the range. Starting point for finding
-     * destination coordinates with visible coordinates (we are going from the starting coordinates to the end
-     * coordinates until the criteria are met).
-     * @param {CellCoords} endVisibleColumn Visual column index which ends the range.
-     * @param {number} incrementBy We are searching for a next visible columns by increasing (to be precise, or decreasing)
-     * indexes. This variable represent indexes shift. From the top to the bottom (increasing indexes, then variable
-     * should have value 1) or other way around (decreasing indexes, then variable should have the value -1).
-     * @returns {number|null} The visual column index.
+     * @param {IndexMapper} indexMapper The IndexMapper instance for specific axis.
+     * @param {number} visualIndex The index as starting point for finding the nearest visible index.
+     * @param {1|-1} searchDirection The search direction. For value 1, it means searching from top to bottom for
+     *                               rows and from left to right for columns. For -1, it is the other way around.
+     * @returns {number|null} Visual row/column index.
      */
 
   }, {
-    key: "findVisibleCoordsInColumnsRange",
-    value: function findVisibleCoordsInColumnsRange(startVisibleColumn, endVisibleColumn, incrementBy) {
-      var _this$settings$visual2 = this.settings.visualToRenderableCoords({
-        row: -1,
-        col: startVisibleColumn
-      }),
-          startColumnRenderable = _this$settings$visual2.col; // There are no more visual columns in the range.
-
-
-      if (endVisibleColumn === startVisibleColumn && startColumnRenderable === null) {
-        return null;
-      } // We are looking for a next visible column in the range.
-
-
-      if (startColumnRenderable === null) {
-        return this.findVisibleCoordsInColumnsRange(startVisibleColumn + incrementBy, endVisibleColumn, incrementBy);
-      } // We found visible column index in the range.
+    key: "getNearestNotHiddenIndex",
+    value: function getNearestNotHiddenIndex(indexMapper, visualIndex, searchDirection) {
+      if (visualIndex < 0) {
+        return visualIndex;
+      }
 
+      var nearestVisualIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
+      var isHeaderSelectionType = this.settings.type === 'header' || this.settings.type === 'active-header';
 
-      return startVisibleColumn;
-    }
-    /**
-     * Searches the nearest visible column and row index, which is not hidden (is renderable). If one
-     * of the axes' range is entirely hidden, then created CellCoords object will hold the `null` value
-     * under a specific axis. For example, when we select the hidden column, then the calculated `col`
-     * prop will be `null`. In that case, rows are calculated further (regardless of the column result)
-     * to make rows header highlightable.
-     *
-     * @private
-     * @param {CellCoords} visualFromCoords Visual start coordinates for the range. Starting point for finding destination coordinates
-     * with visible coordinates (we are going from the starting coordinates to the end coordinates until the criteria are met).
-     * @param {CellCoords} visualToCoords Visual end coordinates for the range.
-     * @param {number} incrementByRow We are searching for a next visible rows by increasing (to be precise, or decreasing) indexes.
-     * This variable represent indexes shift. We are looking for an index:
-     * - for rows: from the left to the right (increasing indexes, then variable should have value 1) or
-     * other way around (decreasing indexes, then variable should have the value -1)
-     * - for columns: from the top to the bottom (increasing indexes, then variable should have value 1)
-     * or other way around (decreasing indexes, then variable should have the value -1).
-     * @param {number} incrementByColumn As above, just indexes shift for columns.
-     * @returns {CellCoords[]|null} Visual cell coordinates.
-     */
-
-  }, {
-    key: "findVisibleHeaderRange",
-    value: function findVisibleHeaderRange(visualFromCoords, visualToCoords, incrementByRow, incrementByColumn) {
-      var fromRangeVisualRow = this.findVisibleCoordsInRowsRange(visualFromCoords.row, visualToCoords.row, incrementByRow);
-      var toRangeVisualRow = this.findVisibleCoordsInRowsRange(visualToCoords.row, visualFromCoords.row, -incrementByRow);
-      var fromRangeVisualColumn = this.findVisibleCoordsInColumnsRange(visualFromCoords.col, visualToCoords.col, incrementByColumn);
-      var toRangeVisualColumn = this.findVisibleCoordsInColumnsRange(visualToCoords.col, visualFromCoords.col, -incrementByColumn); // All rows and columns ranges are hidden.
-
-      if (fromRangeVisualRow === null && toRangeVisualRow === null && fromRangeVisualColumn === null && toRangeVisualColumn === null) {
-        return null;
+      if (isHeaderSelectionType && nearestVisualIndex === null) {
+        return -1;
       }
 
-      return [new _src.CellCoords(fromRangeVisualRow, fromRangeVisualColumn), new _src.CellCoords(toRangeVisualRow, toRangeVisualColumn)];
+      return nearestVisualIndex;
     }
     /**
      * Override internally stored visual indexes added by the Selection's `add` function. It should be executed
@@ -286,39 +219,18 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
         return this;
       }
 
-      var _this$visualCellRange = this.visualCellRange,
-          visualFromCoords = _this$visualCellRange.from,
-          visualToCoords = _this$visualCellRange.to; // We may move in two different directions while searching for visible rows and visible columns.
-
-      var incrementByRow = this.getRowSearchDirection(this.visualCellRange);
-      var incrementByColumn = this.getColumnSearchDirection(this.visualCellRange);
-      var fromRangeVisual = this.findVisibleCoordsInRange(visualFromCoords, visualToCoords, incrementByRow, incrementByColumn);
-      var toRangeVisual = this.findVisibleCoordsInRange(visualToCoords, visualFromCoords, -incrementByRow, -incrementByColumn); // There is no visual start point (and also visual end point) in the range.
-      // We are looking for the first visible cell in a broader range.
-
-      if (fromRangeVisual === null || toRangeVisual === null) {
-        var isHeaderSelectionType = this.settings.type === 'header';
-        var cellRange = null; // For the "header" selection type, find rows and column indexes, which should be
-        // highlighted, although one of the axes is completely hidden.
-
-        if (isHeaderSelectionType) {
-          var _this$findVisibleHead = this.findVisibleHeaderRange(visualFromCoords, visualToCoords, incrementByRow, incrementByColumn),
-              _this$findVisibleHead2 = _slicedToArray(_this$findVisibleHead, 2),
-              fromRangeVisualHeader = _this$findVisibleHead2[0],
-              toRangeVisualHeader = _this$findVisibleHead2[1];
-
-          cellRange = this.createRenderableCellRange(fromRangeVisualHeader, toRangeVisualHeader);
-        }
+      var trimmedCellRange = this.trimToVisibleCellsRangeOnly(this.visualCellRange); // There is no visual start point (and also visual end point) in the range.
 
-        this.cellRange = cellRange;
+      if (trimmedCellRange === null) {
+        this.cellRange = null;
       } else {
-        this.cellRange = this.createRenderableCellRange(fromRangeVisual, toRangeVisual);
+        this.cellRange = this.createRenderableCellRange(trimmedCellRange.from, trimmedCellRange.to);
       }
 
       return this;
     }
     /**
-     * Some selection may be a part of broader cell range. This function adjusting coordinates of current selection
+     * Some selection may be a part of broader cell range. This function sync coordinates of current selection
      * and the broader cell range when needed (current selection can't be presented visually).
      *
      * @param {CellRange} broaderCellRange Visual range. Actual cell range may be contained in the broader cell range.
@@ -330,20 +242,17 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
      */
 
   }, {
-    key: "adjustCoordinates",
-    value: function adjustCoordinates(broaderCellRange) {
-      // We may move in two different directions while searching for visible rows and visible columns.
-      var incrementByRow = this.getRowSearchDirection(broaderCellRange);
-      var incrementByColumn = this.getColumnSearchDirection(broaderCellRange);
-      var normFromCoords = broaderCellRange.from.clone().normalize();
-      var normToCoords = broaderCellRange.to.clone().normalize();
-      var singleCellRangeVisual = this.findVisibleCoordsInRange(normFromCoords, normToCoords, incrementByRow, incrementByColumn);
-
-      if (singleCellRangeVisual !== null) {
+    key: "syncWith",
+    value: function syncWith(broaderCellRange) {
+      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.
         if (this.cellRange === null) {
           var singleCellRangeRenderable = this.settings.visualToRenderableCoords(singleCellRangeVisual);
-          this.cellRange = new _src.CellRange(singleCellRangeRenderable);
+          this.cellRange = this.settings.createCellRange(singleCellRangeRenderable);
         } // 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?
 
@@ -373,12 +282,13 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
           to = _this$cellRange.to;
       var isRowUndefined = from.row === null || to.row === null;
       var isColumnUndefined = from.col === null || to.col === null;
-      var topLeftCorner = new _src.CellCoords(isRowUndefined ? null : Math.min(from.row, to.row), isColumnUndefined ? null : Math.min(from.col, to.col));
-      var bottomRightCorner = new _src.CellCoords(isRowUndefined ? null : Math.max(from.row, to.row), isColumnUndefined ? null : Math.max(from.col, to.col));
+      var topLeftCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.min(from.row, to.row), isColumnUndefined ? null : Math.min(from.col, to.col));
+      var bottomRightCorner = this.settings.createCellCoords(isRowUndefined ? null : Math.max(from.row, to.row), isColumnUndefined ? null : Math.max(from.col, to.col));
       return [topLeftCorner.row, topLeftCorner.col, bottomRightCorner.row, bottomRightCorner.col];
     }
     /**
-     * Returns the top left (TL) and bottom right (BR) selection coordinates (visual indexes).
+     * Returns the top left (or top right in RTL) and bottom right (or bottom left in RTL) selection
+     * coordinates (visual indexes).
      *
      * @returns {Array} Returns array of coordinates for example `[1, 1, 5, 5]`.
      */
@@ -386,16 +296,16 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
   }, {
     key: "getVisualCorners",
     value: function getVisualCorners() {
-      var topLeft = this.settings.renderableToVisualCoords(this.cellRange.getTopLeftCorner());
-      var bottomRight = this.settings.renderableToVisualCoords(this.cellRange.getBottomRightCorner());
-      return [topLeft.row, topLeft.col, bottomRight.row, bottomRight.col];
+      var topStart = this.settings.renderableToVisualCoords(this.cellRange.getTopStartCorner());
+      var bottomEnd = this.settings.renderableToVisualCoords(this.cellRange.getBottomEndCorner());
+      return [topStart.row, topStart.col, bottomEnd.row, bottomEnd.col];
     }
     /**
      * Creates a new CellRange object based on visual coordinates which before object creation are
      * translated to renderable indexes.
      *
      * @param {CellCoords} visualFromCoords The CellCoords object which contains coordinates that
-     *                                      points to the begining of the selection.
+     *                                      points to the beginning of the selection.
      * @param {CellCoords} visualToCoords The CellCoords object which contains coordinates that
      *                                    points to the end of the selection.
      * @returns {CellRange}
@@ -406,43 +316,7 @@ var VisualSelection = /*#__PURE__*/function (_Selection) {
     value: function createRenderableCellRange(visualFromCoords, visualToCoords) {
       var renderableFromCoords = this.settings.visualToRenderableCoords(visualFromCoords);
       var renderableToCoords = this.settings.visualToRenderableCoords(visualToCoords);
-      return new _src.CellRange(renderableFromCoords, renderableFromCoords, renderableToCoords);
-    }
-    /**
-     * It returns rows shift needed for searching visual row.
-     *
-     * @private
-     * @param {CellRange} cellRange Selection range.
-     * @returns {number} Rows shift. It return 1 when we should increase indexes (moving from the top to the bottom) or
-     * -1 when we should decrease indexes (moving other way around).
-     */
-
-  }, {
-    key: "getRowSearchDirection",
-    value: function getRowSearchDirection(cellRange) {
-      if (cellRange.from.row < cellRange.to.row) {
-        return 1; // Increasing row indexes.
-      }
-
-      return -1; // Decreasing row indexes.
-    }
-    /**
-     * It returns columns shift needed for searching visual column.
-     *
-     * @private
-     * @param {CellRange} cellRange Selection range.
-     * @returns {number} Columns shift. It return 1 when we should increase indexes (moving from the left to the right) or
-     * -1 when we should decrease indexes (moving other way around).
-     */
-
-  }, {
-    key: "getColumnSearchDirection",
-    value: function getColumnSearchDirection(cellRange) {
-      if (cellRange.from.col < cellRange.to.col) {
-        return 1; // Increasing column indexes.
-      }
-
-      return -1; // Decreasing column indexes.
+      return this.settings.createCellRange(renderableFromCoords, renderableFromCoords, renderableToCoords);
     }
   }]);