handsontable 16.0.1 → 16.1.0-next-abd8f2e-20250904

package/core.mjs

@@ -15,7 +15,7 @@ import "core-js/modules/esnext.iterator.map.js";
 import "core-js/modules/web.immediate.js";
 import { addClass, empty, observeVisibilityChangeOnce, removeClass } from "./helpers/dom/element.mjs";
 import { isFunction } from "./helpers/function.mjs";
-import { isDefined, isUndefined, isRegExp, _injectProductInfo, isEmpty, stringify } from "./helpers/mixed.mjs";
+import { isDefined, isUndefined, isRegExp, _injectProductInfo, isEmpty } from "./helpers/mixed.mjs";
 import { isMobileBrowser, isIpadOS } from "./helpers/browser.mjs";
 import EditorManager from "./editorManager.mjs";
 import EventManager from "./eventManager.mjs";
@@ -29,7 +29,7 @@ import { getRenderer } from "./renderers/registry.mjs";
 import { getEditor } from "./editors/registry.mjs";
 import { getValidator } from "./validators/registry.mjs";
 import { randomString, toUpperCaseFirst } from "./helpers/string.mjs";
-import { rangeEach, rangeEachReverse, isNumericLike } from "./helpers/number.mjs";
+import { rangeEach, rangeEachReverse } from "./helpers/number.mjs";
 import TableView from "./tableView.mjs";
 import DataSource from "./dataMap/dataSource.mjs";
 import { spreadsheetColumnLabel } from "./helpers/data.mjs";
@@ -47,8 +47,10 @@ import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
 import { getThemeClassName } from "./helpers/themes.mjs";
 import { StylesHandler } from "./utils/stylesHandler.mjs";
-import { warn } from "./helpers/console.mjs";
+import { deprecatedWarn, warn } from "./helpers/console.mjs";
 import { CellRangeToRenderableMapper } from "./core/coordsMapper/rangeToRenderableMapper.mjs";
+import { install as installAccessibilityAnnouncer, uninstall as uninstallAccessibilityAnnouncer } from "./utils/a11yAnnouncer.mjs";
+import { getValueSetterValue } from "./utils/valueAccessors.mjs";
 let activeGuid = null;
 
 /**
@@ -158,7 +160,8 @@ const deprecationWarns = new Set();
  * @param {boolean} [rootInstanceSymbol=false] Indicates if the instance is root of all later instances created.
  */
 export default function Core(rootContainer, userSettings) {
-  var _userSettings$layoutD,
+  var _mergedUserSettings$l,
+    _this$rootWrapperElem,
     _this = this;
   let rootInstanceSymbol = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   let instance = this;
@@ -170,6 +173,10 @@ export default function Core(rootContainer, userSettings) {
   let focusManager;
   let viewportScroller;
   let firstRun = true;
+  const mergedUserSettings = {
+    ...userSettings.initialState,
+    ...userSettings
+  };
   if (hasValidParameter(rootInstanceSymbol)) {
     registerAsRootInstance(this);
   }
@@ -190,6 +197,14 @@ export default function Core(rootContainer, userSettings) {
    */
   this.rootWrapperElement = undefined;
 
+  /**
+   * Reference to the grid element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootGridElement = undefined;
+
   /**
    * Reference to the portal element.
    *
@@ -224,10 +239,13 @@ export default function Core(rootContainer, userSettings) {
   this.rootWindow = this.rootDocument.defaultView;
   if (isRootInstance(this)) {
     this.rootWrapperElement = this.rootDocument.createElement('div');
+    this.rootGridElement = this.rootDocument.createElement('div');
     this.rootPortalElement = this.rootDocument.createElement('div');
-    addClass(this.rootElement, 'ht-wrapper');
+    addClass(this.rootElement, ['ht-wrapper', 'handsontable']);
     addClass(this.rootWrapperElement, 'ht-root-wrapper');
-    this.rootWrapperElement.appendChild(this.rootElement);
+    addClass(this.rootGridElement, 'ht-grid');
+    this.rootGridElement.appendChild(this.rootElement);
+    this.rootWrapperElement.appendChild(this.rootGridElement);
     this.rootContainer.appendChild(this.rootWrapperElement);
     addClass(this.rootPortalElement, 'ht-portal');
     this.rootDocument.body.appendChild(this.rootPortalElement);
@@ -264,9 +282,10 @@ export default function Core(rootContainer, userSettings) {
    * @type {number}
    */
   this.executionSuspendedCounter = 0;
-  const layoutDirection = (_userSettings$layoutD = userSettings === null || userSettings === void 0 ? void 0 : userSettings.layoutDirection) !== null && _userSettings$layoutD !== void 0 ? _userSettings$layoutD : 'inherit';
+  const layoutDirection = (_mergedUserSettings$l = mergedUserSettings === null || mergedUserSettings === void 0 ? void 0 : mergedUserSettings.layoutDirection) !== null && _mergedUserSettings$l !== void 0 ? _mergedUserSettings$l : 'inherit';
   const rootElementDirection = ['rtl', 'ltr'].includes(layoutDirection) ? layoutDirection : this.rootWindow.getComputedStyle(this.rootElement).direction;
   this.rootElement.setAttribute('dir', rootElementDirection);
+  (_this$rootWrapperElem = this.rootWrapperElement) === null || _this$rootWrapperElem === void 0 || _this$rootWrapperElem.setAttribute('dir', rootElementDirection);
 
   /**
    * Checks if the grid is rendered using the right-to-left layout direction.
@@ -310,9 +329,26 @@ export default function Core(rootContainer, userSettings) {
    * @private
    * @type {StylesHandler}
    */
-  this.stylesHandler = new StylesHandler(instance.rootElement, instance.rootDocument);
-  userSettings.language = getValidLanguageCode(userSettings.language);
-  const settingsWithoutHooks = Object.fromEntries(Object.entries(userSettings).filter(_ref => {
+  this.stylesHandler = new StylesHandler({
+    rootElement: instance.rootElement,
+    rootDocument: instance.rootDocument,
+    onThemeChange: validThemeName => {
+      if (isRootInstance(this)) {
+        removeClass(this.rootWrapperElement, /ht-theme-.*/g);
+        removeClass(this.rootPortalElement, /ht-theme-.*/g);
+        if (validThemeName) {
+          addClass(this.rootWrapperElement, validThemeName);
+          addClass(this.rootPortalElement, validThemeName);
+          if (!getComputedStyle(this.rootWrapperElement).getPropertyValue('--ht-line-height')) {
+            warn(`The "${validThemeName}" theme is enabled, but its stylesheets are missing or not imported correctly. \
+              Import the correct CSS files in order to use that theme.`);
+          }
+        }
+      }
+    }
+  });
+  mergedUserSettings.language = getValidLanguageCode(mergedUserSettings.language);
+  const settingsWithoutHooks = Object.fromEntries(Object.entries(mergedUserSettings).filter(_ref => {
     let [key] = _ref;
     return !(Hooks.getSingleton().isRegistered(key) || Hooks.getSingleton().isDeprecated(key));
   }));
@@ -322,9 +358,6 @@ export default function Core(rootContainer, userSettings) {
   const pluginsRegistry = createUniqueMap();
   this.container = this.rootDocument.createElement('div');
   this.rootElement.insertBefore(this.container, this.rootElement.firstChild);
-  if (isRootInstance(this)) {
-    _injectProductInfo(userSettings.licenseKey, this.rootWrapperElement);
-  }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
   foreignHotInstances.set(this.guid, this);
@@ -557,45 +590,55 @@ export default function Core(rootContainer, userSettings) {
       args[_key7] = arguments[_key7];
     }
     return _this.runHooks('afterSelectRows', ...args);
-  }).addLocalHook('beforeModifyTransformStart', function () {
+  }).addLocalHook('beforeSelectAll', function () {
     for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
       args[_key8] = arguments[_key8];
     }
-    return _this.runHooks('modifyTransformStart', ...args);
-  }).addLocalHook('afterModifyTransformStart', function () {
+    return _this.runHooks('beforeSelectAll', ...args);
+  }).addLocalHook('afterSelectAll', function () {
     for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
       args[_key9] = arguments[_key9];
     }
-    return _this.runHooks('afterModifyTransformStart', ...args);
-  }).addLocalHook('beforeModifyTransformFocus', function () {
+    return _this.runHooks('afterSelectAll', ...args);
+  }).addLocalHook('beforeModifyTransformStart', function () {
     for (var _len0 = arguments.length, args = new Array(_len0), _key0 = 0; _key0 < _len0; _key0++) {
       args[_key0] = arguments[_key0];
     }
-    return _this.runHooks('modifyTransformFocus', ...args);
-  }).addLocalHook('afterModifyTransformFocus', function () {
+    return _this.runHooks('modifyTransformStart', ...args);
+  }).addLocalHook('afterModifyTransformStart', function () {
     for (var _len1 = arguments.length, args = new Array(_len1), _key1 = 0; _key1 < _len1; _key1++) {
       args[_key1] = arguments[_key1];
     }
-    return _this.runHooks('afterModifyTransformFocus', ...args);
-  }).addLocalHook('beforeModifyTransformEnd', function () {
+    return _this.runHooks('afterModifyTransformStart', ...args);
+  }).addLocalHook('beforeModifyTransformFocus', function () {
     for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
       args[_key10] = arguments[_key10];
     }
-    return _this.runHooks('modifyTransformEnd', ...args);
-  }).addLocalHook('afterModifyTransformEnd', function () {
+    return _this.runHooks('modifyTransformFocus', ...args);
+  }).addLocalHook('afterModifyTransformFocus', function () {
     for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
       args[_key11] = arguments[_key11];
     }
-    return _this.runHooks('afterModifyTransformEnd', ...args);
-  }).addLocalHook('beforeRowWrap', function () {
+    return _this.runHooks('afterModifyTransformFocus', ...args);
+  }).addLocalHook('beforeModifyTransformEnd', function () {
     for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
       args[_key12] = arguments[_key12];
     }
-    return _this.runHooks('beforeRowWrap', ...args);
-  }).addLocalHook('beforeColumnWrap', function () {
+    return _this.runHooks('modifyTransformEnd', ...args);
+  }).addLocalHook('afterModifyTransformEnd', function () {
     for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
       args[_key13] = arguments[_key13];
     }
+    return _this.runHooks('afterModifyTransformEnd', ...args);
+  }).addLocalHook('beforeRowWrap', function () {
+    for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+      args[_key14] = arguments[_key14];
+    }
+    return _this.runHooks('beforeRowWrap', ...args);
+  }).addLocalHook('beforeColumnWrap', function () {
+    for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+      args[_key15] = arguments[_key15];
+    }
     return _this.runHooks('beforeColumnWrap', ...args);
   }).addLocalHook('insertRowRequire', totalRows => this.alter('insert_row_above', totalRows, 1, 'auto')).addLocalHook('insertColRequire', totalCols => this.alter('insert_col_start', totalCols, 1, 'auto'));
   grid = {
@@ -723,7 +766,7 @@ export default function Core(rootContainer, userSettings) {
               if (selection.isSelected()) {
                 const {
                   row
-                } = instance.getSelectedRangeLast().highlight;
+                } = instance.getSelectedRangeActive().highlight;
                 if (row >= groupIndex && row <= groupIndex + groupAmount - 1) {
                   editorManager.closeEditor(true);
                 }
@@ -782,7 +825,7 @@ export default function Core(rootContainer, userSettings) {
               if (selection.isSelected()) {
                 const {
                   col
-                } = instance.getSelectedRangeLast().highlight;
+                } = instance.getSelectedRangeActive().highlight;
                 if (col >= groupIndex && col <= groupIndex + groupAmount - 1) {
                   editorManager.closeEditor(true);
                 }
@@ -823,8 +866,8 @@ export default function Core(rootContainer, userSettings) {
       if (!keepEmptyRows) {
         grid.adjustRowsAndCols(); // makes sure that we did not add rows that will be removed in next refresh
       }
-      instance.view.render();
       instance.view.adjustElementsSize();
+      instance.view.render();
     },
     /**
      * Makes sure there are empty rows at the bottom of the table.
@@ -1033,6 +1076,7 @@ export default function Core(rootContainer, userSettings) {
             }
             skippedColumn = 0;
             for (c = 0; c < clen; c++) {
+              var _instance$getSourceDa;
               if (end && current.col > end.col && colSelectionLength > colInputLength || !tableMeta.allowInsertColumn && current.col > instance.countCols() - 1 || current.col >= tableMeta.maxCols) {
                 break;
               }
@@ -1049,8 +1093,9 @@ export default function Core(rootContainer, userSettings) {
                 continue;
               }
               const visualColumn = c - skippedColumn;
+              const hasValueSetter = !!cellMeta.valueSetter;
               let value = getInputValue(visualRow, visualColumn);
-              let orgValue = instance.getDataAtCell(current.row, current.col);
+              let orgValue = (_instance$getSourceDa = instance.getSourceDataAtCell(current.row, current.col)) !== null && _instance$getSourceDa !== void 0 ? _instance$getSourceDa : null;
               if (value !== null && typeof value === 'object') {
                 // when 'value' is array and 'orgValue' is null, set 'orgValue' to
                 // an empty array so that the null value can be compared to 'value'
@@ -1058,20 +1103,23 @@ export default function Core(rootContainer, userSettings) {
                 if (Array.isArray(value) && orgValue === null) {
                   orgValue = [];
                 }
-                if (orgValue === null || typeof orgValue !== 'object') {
+                if (!hasValueSetter && (typeof orgValue !== 'object' || orgValue === null)) {
                   pushData = false;
-                } else {
+                } else if (orgValue !== null) {
                   const orgValueSchema = duckSchema(Array.isArray(orgValue) ? orgValue : orgValue[0] || orgValue);
                   const valueSchema = duckSchema(Array.isArray(value) ? value : value[0] || value);
 
                   // Allow overwriting values with the same object-based schema or any array-based schema.
-                  if (isObjectEqual(orgValueSchema, valueSchema) || Array.isArray(orgValueSchema) && Array.isArray(valueSchema)) {
+                  if (hasValueSetter ||
+                  // If the cell has a value setter, we don't know the value schema (it's dynamic)
+
+                  isObjectEqual(orgValueSchema, valueSchema) || Array.isArray(orgValueSchema) && Array.isArray(valueSchema)) {
                     value = deepClone(value);
                   } else {
                     pushData = false;
                   }
                 }
-              } else if (orgValue !== null && typeof orgValue === 'object') {
+              } else if (!hasValueSetter && orgValue !== null && typeof orgValue === 'object') {
                 pushData = false;
               }
               if (pushData) {
@@ -1143,17 +1191,15 @@ export default function Core(rootContainer, userSettings) {
     if (isMobileBrowser() || isIpadOS()) {
       addClass(instance.rootElement, 'mobile');
     }
-    this.updateSettings(userSettings, true);
+    this.updateSettings(mergedUserSettings, true);
     this.view = new TableView(this);
-    const themeName = tableMeta.themeName || getThemeClassName(instance.rootContainer);
-
-    // Use the theme defined in the settings object or set as a root container class name (in that order).
-    instance.useTheme(themeName);
     editorManager = EditorManager.getInstance(instance, tableMeta, selection);
     viewportScroller = createViewportScroller(instance);
     focusManager = new FocusManager(instance);
     if (isRootInstance(this)) {
       installFocusCatcher(instance);
+      installAccessibilityAnnouncer(instance.rootPortalElement);
+      _injectProductInfo(mergedUserSettings.licenseKey, this.rootWrapperElement);
     }
     instance.runHooks('init');
     this.render();
@@ -1163,8 +1209,8 @@ export default function Core(rootContainer, userSettings) {
       observeVisibilityChangeOnce(instance.rootElement, () => {
         // Update the spreader size cache before rendering.
         instance.view._wt.wtOverlays.updateLastSpreaderSize();
-        instance.render();
         instance.view.adjustElementsSize();
+        instance.render();
       });
     }
     if (typeof firstRun === 'object') {
@@ -1202,23 +1248,6 @@ export default function Core(rootContainer, userSettings) {
     };
   }
 
-  /**
-   * Get parsed number from numeric string.
-   *
-   * @private
-   * @param {string} numericData Float (separated by a dot or a comma) or integer.
-   * @returns {number} Number if we get data in parsable format, not changed value otherwise.
-   */
-  function getParsedNumber(numericData) {
-    // Unifying "float like" string. Change from value with comma determiner to value with dot determiner,
-    // for example from `450,65` to `450.65`.
-    const unifiedNumericData = numericData.replace(',', '.');
-    if (isNaN(parseFloat(unifiedNumericData)) === false) {
-      return parseFloat(unifiedNumericData);
-    }
-    return numericData;
-  }
-
   /**
    * @ignore
    * @param {Array} changes The 2D array containing information about each of the edited cells.
@@ -1240,7 +1269,7 @@ export default function Core(rootContainer, userSettings) {
       callback(); // called when async validators are resolved and beforeChange was not async
     };
     for (let i = changes.length - 1; i >= 0; i--) {
-      const [row, prop] = changes[i];
+      const [row, prop,, newValue] = changes[i];
       const visualCol = datamap.propToCol(prop);
       let cellProperties;
       if (Number.isInteger(visualCol)) {
@@ -1253,19 +1282,20 @@ export default function Core(rootContainer, userSettings) {
           ...tableMeta
         };
       }
-
-      /* eslint-disable no-loop-func */
       if (instance.getCellValidator(cellProperties)) {
+        /* eslint-disable no-loop-func */
         waitingForValidator.addValidatorToQueue();
-        instance.validateCell(changes[i][3], cellProperties, function (index, cellPropertiesReference) {
+        instance.validateCell(newValue, cellProperties, function (index, cellPropertiesReference) {
           return function (result) {
             if (typeof result !== 'boolean') {
               throw new Error('Validation error: result is not boolean');
             }
             if (result === false && cellPropertiesReference.allowInvalid === false) {
               shouldBeCanceled = false;
-              changes.splice(index, 1); // cancel the change
-              cellPropertiesReference.valid = true; // we cancelled the change, so cell value is still valid
+              // cancel the change
+              changes.splice(index, 1);
+              // we cancelled the change, so cell value is still valid
+              cellPropertiesReference.valid = true;
             }
             waitingForValidator.removeValidatorFormQueue();
           };
@@ -1333,9 +1363,9 @@ export default function Core(rootContainer, userSettings) {
       grid.adjustRowsAndCols();
       instance.runHooks('beforeChangeRender', changes, source);
       editorManager.closeEditor();
+      instance.view.adjustElementsSize();
       instance.render();
       editorManager.prepareEditor();
-      instance.view.adjustElementsSize();
       instance.runHooks('afterChange', changes, source || 'edit');
       const activeEditor = instance.getActiveEditor();
       if (activeEditor && isDefined(activeEditor.refreshValue)) {
@@ -1424,7 +1454,7 @@ export default function Core(rootContainer, userSettings) {
       // eslint-disable-next-line no-param-reassign
       value = instance.runHooks('beforeValidate', value, cellProperties.visualRow, cellProperties.prop, source);
 
-      // To provide consistent behaviour, validation should be always asynchronous
+      // To provide consistent behavior, validation should be always asynchronous
       instance._registerImmediate(() => {
         validator.call(cellProperties, value, valid => {
           if (!instance) {
@@ -1492,22 +1522,7 @@ export default function Core(rootContainer, userSettings) {
           ...tableMeta
         };
       }
-      const {
-        type,
-        checkedTemplate,
-        uncheckedTemplate
-      } = cellProperties;
-      if (type === 'numeric' && typeof newValue === 'string' && isNumericLike(newValue)) {
-        filteredChanges[i][3] = getParsedNumber(newValue);
-      }
-      if (type === 'checkbox') {
-        const stringifiedValue = stringify(newValue);
-        const isChecked = stringifiedValue === stringify(checkedTemplate);
-        const isUnchecked = stringifiedValue === stringify(uncheckedTemplate);
-        if (isChecked || isUnchecked) {
-          filteredChanges[i][3] = isChecked ? checkedTemplate : uncheckedTemplate;
-        }
-      }
+      filteredChanges[i][3] = getValueSetterValue(newValue, cellProperties);
     }
     return filteredChanges;
   }
@@ -1532,18 +1547,19 @@ export default function Core(rootContainer, userSettings) {
     let ilen;
     let prop;
     for (i = 0, ilen = input.length; i < ilen; i++) {
+      const [visualRow, visualColumn, newValue] = input[i];
       if (typeof input[i] !== 'object') {
         throw new Error('Method `setDataAtCell` accepts row number or changes array of arrays as its first parameter');
       }
-      if (typeof input[i][1] !== 'number') {
+      if (typeof visualColumn !== 'number') {
         throw new Error('Method `setDataAtCell` accepts row and column number as its parameters. If you want to use object property name, use method `setDataAtRowProp`'); // eslint-disable-line max-len
       }
-      if (input[i][1] >= this.countCols()) {
-        prop = input[i][1];
+      if (visualColumn >= this.countCols()) {
+        prop = visualColumn;
       } else {
-        prop = datamap.colToProp(input[i][1]);
+        prop = datamap.colToProp(visualColumn);
       }
-      changes.push([input[i][0], prop, dataSource.getAtCell(this.toPhysicalRow(input[i][0]), input[i][1]), input[i][2]]);
+      changes.push([visualRow, prop, dataSource.getAtCell(this.toPhysicalRow(visualRow), visualColumn), newValue]);
     }
     if (!changeSource && typeof row === 'object') {
       changeSource = column;
@@ -1574,7 +1590,8 @@ export default function Core(rootContainer, userSettings) {
     let i;
     let ilen;
     for (i = 0, ilen = input.length; i < ilen; i++) {
-      changes.push([input[i][0], input[i][1], dataSource.getAtCell(this.toPhysicalRow(input[i][0]), input[i][1]), input[i][2]]);
+      const [visualRow, inputProp, newValue] = input[i];
+      changes.push([visualRow, inputProp, dataSource.getAtCell(this.toPhysicalRow(visualRow), inputProp), newValue]);
     }
 
     // TODO: I don't think `prop` should be used as `changeSource` here, but removing it would be a breaking change.
@@ -1691,8 +1708,8 @@ export default function Core(rootContainer, userSettings) {
    * @returns {Array} Returns removed portion of columns.
    */
   this.spliceCol = function (column, index, amount) {
-    for (var _len14 = arguments.length, elements = new Array(_len14 > 3 ? _len14 - 3 : 0), _key14 = 3; _key14 < _len14; _key14++) {
-      elements[_key14 - 3] = arguments[_key14];
+    for (var _len16 = arguments.length, elements = new Array(_len16 > 3 ? _len16 - 3 : 0), _key16 = 3; _key16 < _len16; _key16++) {
+      elements[_key16 - 3] = arguments[_key16];
     }
     return datamap.spliceCol(column, index, amount, ...elements);
   };
@@ -1709,8 +1726,8 @@ export default function Core(rootContainer, userSettings) {
    * @returns {Array} Returns removed portion of rows.
    */
   this.spliceRow = function (row, index, amount) {
-    for (var _len15 = arguments.length, elements = new Array(_len15 > 3 ? _len15 - 3 : 0), _key15 = 3; _key15 < _len15; _key15++) {
-      elements[_key15 - 3] = arguments[_key15];
+    for (var _len17 = arguments.length, elements = new Array(_len17 > 3 ? _len17 - 3 : 0), _key17 = 3; _key17 < _len17; _key17++) {
+      elements[_key17 - 3] = arguments[_key17];
     }
     return datamap.spliceRow(row, index, amount, ...elements);
   };
@@ -1758,16 +1775,37 @@ export default function Core(rootContainer, userSettings) {
     return result;
   };
 
+  /**
+   * Returns the range coordinates of the active selection layer as an array. Active selection layer is the layer that
+   * has visible focus highlight.
+   *
+   * @memberof Core#
+   * @function getSelectedRangeActive
+   * @since 16.1.0
+   * @returns {number[]|undefined} Selected range as an array of coordinates or `undefined` if there is no selection.
+   */
+  this.getSelectedActive = function () {
+    const activeRange = this.getSelectedRangeActive();
+    if (!activeRange) {
+      return;
+    }
+    const {
+      from,
+      to
+    } = activeRange;
+    return [from.row, from.col, to.row, to.col];
+  };
+
   /**
    * Returns the current selection as an array of CellRange objects.
    *
    * The version 0.36.0 adds a non-consecutive selection feature. Since this version, the method returns an array of arrays.
-   * Additionally to collect the coordinates of the currently selected area (as it was previously done by the method)
-   * you need to use `getSelectedRangeLast` method.
+   * Additionally to collect the coordinates of the active selected area (as it was previously done by the method)
+   * you need to use `getSelectedRangeActive()` method.
    *
    * @memberof Core#
    * @function getSelectedRange
-   * @returns {CellRange[]|undefined} Selected range object or undefined if there is no selection.
+   * @returns {CellRange[]|undefined} Selected range object or `undefined` if there is no selection.
    */
   this.getSelectedRange = function () {
     // https://github.com/handsontable/handsontable/issues/44  //cjl
@@ -1782,7 +1820,7 @@ export default function Core(rootContainer, userSettings) {
    * @memberof Core#
    * @function getSelectedRangeLast
    * @since 0.36.0
-   * @returns {CellRange|undefined} Selected range object or undefined` if there is no selection.
+   * @returns {CellRange|undefined} Selected range object or `undefined` if there is no selection.
    */
   this.getSelectedRangeLast = function () {
     const selectedRange = this.getSelectedRange();
@@ -1793,6 +1831,32 @@ export default function Core(rootContainer, userSettings) {
     return result;
   };
 
+  /**
+   * Returns the range coordinates of the active selection layer. Active selection layer is the layer that
+   * has visible focus highlight.
+   *
+   * @memberof Core#
+   * @function getSelectedRangeActive
+   * @since 16.1.0
+   * @returns {CellRange|undefined} Selected range object or `undefined` if there is no selection.
+   */
+  this.getSelectedRangeActive = function () {
+    return selection.getActiveSelectedRange();
+  };
+
+  /**
+   * Returns the index of the active selection layer. Active selection layer is the layer that
+   * has visible focus highlight.
+   *
+   * @memberof Core#
+   * @function getActiveSelectionLayerIndex
+   * @since 16.1.0
+   * @returns {number} The index of the active selection layer. `0` to `N` where `0` is the last (oldest) layer and `N` is the first (newest) layer.
+   */
+  this.getActiveSelectionLayerIndex = function () {
+    return selection.getActiveSelectionLayerIndex();
+  };
+
   /**
    * Erases content from cells that have been selected in the table.
    *
@@ -2154,8 +2218,8 @@ export default function Core(rootContainer, userSettings) {
     }
     if (isSizeChanged || view._wt.wtOverlays.scrollableElement === instance.rootWindow) {
       view.setLastSize(width, height);
-      instance.render();
       view.adjustElementsSize();
+      instance.render();
     }
     instance.runHooks('afterRefreshDimensions', {
       width: lastWidth,
@@ -2364,6 +2428,20 @@ export default function Core(rootContainer, userSettings) {
     return datamap.getCopyable(row, datamap.colToProp(column));
   };
 
+  /**
+   * Returns the source data's copyable value at specified `row` and `column` index.
+   *
+   * @memberof Core#
+   * @function getCopyableSourceData
+   * @param {number} row Visual row index.
+   * @param {number} column Visual column index.
+   * @since 16.1.0
+   * @returns {string}
+   */
+  this.getCopyableSourceData = function (row, column) {
+    return dataSource.getCopyable(row, datamap.colToProp(column));
+  };
+
   /**
    * Returns schema provided by constructor settings. If it doesn't exist then it returns the schema based on the data
    * structure in the first row.
@@ -2419,9 +2497,6 @@ export default function Core(rootContainer, userSettings) {
     if (isDefined(settings.ganttChart)) {
       throw new Error('Since 8.0.0 the "ganttChart" setting is no longer supported.');
     }
-    if (settings.language) {
-      setLanguage(settings.language);
-    }
 
     // eslint-disable-next-line no-restricted-syntax
     for (i in settings) {
@@ -2446,6 +2521,20 @@ export default function Core(rootContainer, userSettings) {
         globalMeta[i] = settings[i];
       }
     }
+    if (init) {
+      // Use the theme defined in the settings object or set as a root container class name (in that order).
+      instance.useTheme(tableMeta.themeName || getThemeClassName(instance.rootContainer));
+    } else {
+      const currentThemeName = instance.getCurrentThemeName();
+      const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
+      if (themeNameOptionExists && currentThemeName !== settings.themeName) {
+        instance.useTheme(settings.themeName);
+      }
+    }
+    if (instance.stylesHandler.isClassicTheme()) {
+      // eslint-disable-next-line max-len
+      deprecatedWarn('Handsontable classic theme is a legacy theme and will be removed in version 17.0. Please update your theme settings to ensure compatibility with future versions.');
+    }
 
     // Load data or create data map
     if (settings.data === undefined && tableMeta.data === undefined) {
@@ -2458,6 +2547,9 @@ export default function Core(rootContainer, userSettings) {
       // The `column` property has changed - dataset may be expanded or narrowed down. The `loadData` do the same.
       instance.initIndexMappers();
     }
+    if (!firstRun && settings.language) {
+      setLanguage(settings.language);
+    }
     const clen = instance.countCols();
     const columnSetting = tableMeta.columns;
 
@@ -2492,44 +2584,43 @@ export default function Core(rootContainer, userSettings) {
     if (currentHeight !== '') {
       currentHeight = parseInt(instance.rootElement.style.height, 10);
     }
-    let height = settings.height;
-    if (isFunction(height)) {
-      height = height();
-    }
     if (init) {
       const initialStyle = instance.rootElement.getAttribute('style');
       if (initialStyle) {
         instance.rootElement.setAttribute('data-initialstyle', instance.rootElement.getAttribute('style'));
       }
     }
-    if (height === null) {
-      const initialStyle = instance.rootElement.getAttribute('data-initialstyle');
-      if (initialStyle && (initialStyle.indexOf('height') > -1 || initialStyle.indexOf('overflow') > -1)) {
-        instance.rootElement.setAttribute('style', initialStyle);
-      } else {
-        instance.rootElement.style.height = '';
-        instance.rootElement.style.overflow = '';
+    let height = settings.height;
+    if (typeof settings.height !== 'undefined') {
+      if (isFunction(height)) {
+        height = height();
+      }
+      height = instance.runHooks('beforeHeightChange', height);
+      if (height === null) {
+        const initialStyle = instance.rootElement.getAttribute('data-initialstyle');
+        if (initialStyle && (initialStyle.indexOf('height') > -1 || initialStyle.indexOf('overflow') > -1)) {
+          instance.rootElement.setAttribute('style', initialStyle);
+        } else {
+          instance.rootElement.style.height = '';
+          instance.rootElement.style.overflow = '';
+        }
+      } else if (height !== undefined) {
+        instance.rootElement.style.height = isNaN(height) ? `${height}` : `${height}px`;
+        instance.rootElement.style.overflow = 'hidden';
       }
-    } else if (height !== undefined) {
-      instance.rootElement.style.height = isNaN(height) ? `${height}` : `${height}px`;
-      instance.rootElement.style.overflow = 'hidden';
     }
     if (typeof settings.width !== 'undefined') {
       let width = settings.width;
       if (isFunction(width)) {
         width = width();
       }
+      width = instance.runHooks('beforeWidthChange', width);
       instance.rootElement.style.width = isNaN(width) ? `${width}` : `${width}px`;
     }
     if (!init) {
       if (instance.view) {
         instance.view._wt.wtViewport.resetHasOversizedColumnHeadersMarked();
         instance.view._wt.exportSettingsAsClassNames();
-        const currentThemeName = instance.getCurrentThemeName();
-        const themeNameOptionExists = hasOwnProperty(settings, 'themeName');
-        if (themeNameOptionExists && currentThemeName !== settings.themeName) {
-          instance.useTheme(settings.themeName);
-        }
       }
       instance.runHooks('afterUpdateSettings', settings);
     }
@@ -2553,16 +2644,17 @@ export default function Core(rootContainer, userSettings) {
    * @returns {*} The value of the focused cell.
    */
   this.getValue = function () {
-    const sel = instance.getSelectedLast();
+    const activeSelection = instance.getSelectedRangeActive();
     if (tableMeta.getValue) {
       if (isFunction(tableMeta.getValue)) {
         return tableMeta.getValue.call(instance);
-      } else if (sel) {
-        return instance.getData()[sel[0][0]][tableMeta.getValue];
+      } else if (activeSelection) {
+        return instance.getData()[activeSelection.highlight.row][tableMeta.getValue];
       }
-    } else if (sel) {
-      return instance.getDataAtCell(sel[0], sel[1]);
+    } else if (activeSelection) {
+      return instance.getDataAtCell(activeSelection.highlight.row, activeSelection.highlight.col);
     }
+    return null;
   };
 
   /**
@@ -2963,17 +3055,32 @@ export default function Core(rootContainer, userSettings) {
     const input = setDataInputToArray(row, column, value);
     const isThereAnySetSourceListener = this.hasHook('afterSetSourceDataAtCell');
     const changesForHook = [];
+    const getCellProperties = (changeRow, changeProp) => {
+      const visualRow = this.toVisualRow(changeRow);
+      const visualColumn = this.toVisualColumn(changeProp);
+      if (Number.isInteger(visualColumn)) {
+        return this.getCellMeta(visualRow, visualColumn);
+      }
+
+      // If there's no requested visual column, we can use the table meta as the cell properties
+      return {
+        ...Object.getPrototypeOf(tableMeta),
+        ...tableMeta
+      };
+    };
     if (isThereAnySetSourceListener) {
       arrayEach(input, _ref9 => {
         let [changeRow, changeProp, changeValue] = _ref9;
+        const newValue = getValueSetterValue(changeValue, getCellProperties(changeRow, changeProp));
         changesForHook.push([changeRow, changeProp, dataSource.getAtCell(changeRow, changeProp),
         // The previous value.
-        changeValue]);
+        newValue]);
       });
     }
     arrayEach(input, _ref0 => {
       let [changeRow, changeProp, changeValue] = _ref0;
-      dataSource.setAtCell(changeRow, changeProp, changeValue);
+      const newValue = getValueSetterValue(changeValue, getCellProperties(changeRow, changeProp));
+      dataSource.setAtCell(changeRow, changeProp, newValue);
     });
     if (isThereAnySetSourceListener) {
       this.runHooks('afterSetSourceDataAtCell', changesForHook, source);
@@ -3110,8 +3217,8 @@ export default function Core(rootContainer, userSettings) {
    */
   this.spliceCellsMeta = function (visualIndex) {
     let deleteAmount = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
-    for (var _len16 = arguments.length, cellMetaRows = new Array(_len16 > 2 ? _len16 - 2 : 0), _key16 = 2; _key16 < _len16; _key16++) {
-      cellMetaRows[_key16 - 2] = arguments[_key16];
+    for (var _len18 = arguments.length, cellMetaRows = new Array(_len18 > 2 ? _len18 - 2 : 0), _key18 = 2; _key18 < _len18; _key18++) {
+      cellMetaRows[_key18 - 2] = arguments[_key18];
     }
     if (cellMetaRows.length > 0 && !Array.isArray(cellMetaRows[0])) {
       throw new Error('The 3rd argument (cellMetaRows) has to be passed as an array of cell meta objects array.');
@@ -4293,7 +4400,7 @@ export default function Core(rootContainer, userSettings) {
     }
     const {
       highlight
-    } = this.getSelectedRangeLast();
+    } = this.getSelectedRangeActive();
     const isScrolled = this.scrollViewportTo(highlight.toObject());
     if (isScrolled) {
       // fast render triggers `afterScroll` hook
@@ -4323,6 +4430,9 @@ export default function Core(rootContainer, userSettings) {
       dataSource.destroy();
     }
     dataSource = null;
+    if (isRootInstance(this)) {
+      uninstallAccessibilityAnnouncer();
+    }
     this.getShortcutManager().destroy();
     moduleRegisterer.clear();
     metaManager.clearCache();
@@ -4748,18 +4858,6 @@ export default function Core(rootContainer, userSettings) {
     const isFirstRun = !!firstRun;
     this.stylesHandler.useTheme(themeName);
     const validThemeName = this.stylesHandler.getThemeName();
-    if (isRootInstance(this)) {
-      removeClass(this.rootWrapperElement, /ht-theme-.*/g);
-      removeClass(this.rootPortalElement, /ht-theme-.*/g);
-      if (validThemeName) {
-        addClass(this.rootWrapperElement, validThemeName);
-        addClass(this.rootPortalElement, validThemeName);
-        if (!getComputedStyle(this.rootWrapperElement).getPropertyValue('--ht-line-height')) {
-          warn(`The "${validThemeName}" theme is enabled, but its stylesheets are missing or not imported correctly. \
-            Import the correct CSS files in order to use that theme.`);
-        }
-      }
-    }
     if (!isFirstRun) {
       instance.render();
       instance.scrollViewportTo(0, 0);