handsontable 16.1.1 → 16.2.0-next-90d1117-20251117

package/plugins/pagination/strategies/autoPageSize.mjs

@@ -42,7 +42,7 @@ export class AutoPageSizeStrategy {
     const viewportSize = viewportSizeProvider();
     const pages = [];
     let startIndex = 0;
-    let totalSize = 1; // 1px border compensation for the first row
+    let totalSize = 0;
     let pageSize = 0;
     for (let index = 0; index < itemSizes.length; index++) {
       const itemSize = itemSizes[index];
@@ -53,7 +53,7 @@ export class AutoPageSizeStrategy {
           pageSize
         });
         startIndex = index;
-        totalSize = 1; // 1px border compensation for the first row
+        totalSize = 0;
         pageSize = 0;
       }
       totalSize += itemSize;

package/plugins/pagination/ui.js

@@ -149,6 +149,7 @@ class PaginationUI {
     } = elements.refs;
     _classPrivateFieldSet(_refs, this, elements.refs);
     container.setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
+    container.tabIndex = -1;
     const isDisabled = event => event.currentTarget.disabled;
     const addClickListener = (eventName, element, callback) => {
       element.addEventListener(eventName, event => {
@@ -158,14 +159,9 @@ class PaginationUI {
       });
     };
     addClickListener('click', first, () => this.runLocalHooks('firstPageClick'));
-    addClickListener('focus', first, () => this.runLocalHooks('focus', first));
     addClickListener('click', prev, () => this.runLocalHooks('prevPageClick'));
-    addClickListener('focus', prev, () => this.runLocalHooks('focus', prev));
     addClickListener('click', next, () => this.runLocalHooks('nextPageClick'));
-    addClickListener('focus', next, () => this.runLocalHooks('focus', next));
     addClickListener('click', last, () => this.runLocalHooks('lastPageClick'));
-    addClickListener('focus', last, () => this.runLocalHooks('focus', last));
-    addClickListener('focus', pageSizeSelect, () => this.runLocalHooks('focus', pageSizeSelect));
     pageSizeSelect.addEventListener('change', () => {
       const value = pageSizeSelect.value === 'auto' ? 'auto' : Number.parseInt(pageSizeSelect.value, 10);
       this.runLocalHooks('pageSizeChange', value);
@@ -314,7 +310,7 @@ class PaginationUI {
     pageSizeSelect.textContent = '';
     pageSizeLabel.textContent = `${pageSizeLabelText}:`;
     (0, _element.setAttribute)(pageNavSection, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_SECTION))]]);
-    (0, _element.setAttribute)(pageSizeSelect, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
+    (0, _element.setAttribute)(pageSizeSelect, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))]]);
     _classPrivateFieldGet(_a11yAnnouncer, this).call(this, navLabelText);
     this.refreshBorderState();
     pageSizeList.forEach(pageSizeItem => {
@@ -359,10 +355,10 @@ class PaginationUI {
         }
       }
     }
-    (0, _element.setAttribute)(first, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isFirstPage)], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
-    (0, _element.setAttribute)(prev, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isFirstPage)], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
-    (0, _element.setAttribute)(next, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isLastPage)], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
-    (0, _element.setAttribute)(last, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isLastPage)], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
+    (0, _element.setAttribute)(first, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isFirstPage)]]);
+    (0, _element.setAttribute)(prev, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isFirstPage)]]);
+    (0, _element.setAttribute)(next, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isLastPage)]]);
+    (0, _element.setAttribute)(last, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[(0, _a11y.A11Y_DISABLED)(isLastPage)]]);
     return this;
   }
 

package/plugins/pagination/ui.mjs

@@ -12,7 +12,7 @@ import { mixin } from "../../helpers/object.mjs";
 import localHooks from "../../mixins/localHooks.mjs";
 import * as C from "../../i18n/constants.mjs";
 import { addClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
-import { A11Y_DISABLED, A11Y_LABEL, A11Y_TABINDEX } from "../../helpers/a11y.mjs";
+import { A11Y_DISABLED, A11Y_LABEL } from "../../helpers/a11y.mjs";
 const TEMPLATE = `
 <div data-ref="container" class="ht-pagination handsontable">
   <div class="ht-pagination__inner">
@@ -144,6 +144,7 @@ export class PaginationUI {
     } = elements.refs;
     _classPrivateFieldSet(_refs, this, elements.refs);
     container.setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
+    container.tabIndex = -1;
     const isDisabled = event => event.currentTarget.disabled;
     const addClickListener = (eventName, element, callback) => {
       element.addEventListener(eventName, event => {
@@ -153,14 +154,9 @@ export class PaginationUI {
       });
     };
     addClickListener('click', first, () => this.runLocalHooks('firstPageClick'));
-    addClickListener('focus', first, () => this.runLocalHooks('focus', first));
     addClickListener('click', prev, () => this.runLocalHooks('prevPageClick'));
-    addClickListener('focus', prev, () => this.runLocalHooks('focus', prev));
     addClickListener('click', next, () => this.runLocalHooks('nextPageClick'));
-    addClickListener('focus', next, () => this.runLocalHooks('focus', next));
     addClickListener('click', last, () => this.runLocalHooks('lastPageClick'));
-    addClickListener('focus', last, () => this.runLocalHooks('focus', last));
-    addClickListener('focus', pageSizeSelect, () => this.runLocalHooks('focus', pageSizeSelect));
     pageSizeSelect.addEventListener('change', () => {
       const value = pageSizeSelect.value === 'auto' ? 'auto' : Number.parseInt(pageSizeSelect.value, 10);
       this.runLocalHooks('pageSizeChange', value);
@@ -309,7 +305,7 @@ export class PaginationUI {
     pageSizeSelect.textContent = '';
     pageSizeLabel.textContent = `${pageSizeLabelText}:`;
     setAttribute(pageNavSection, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_SECTION))]]);
-    setAttribute(pageSizeSelect, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))], ...[A11Y_TABINDEX(-1)]]);
+    setAttribute(pageSizeSelect, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))]]);
     _classPrivateFieldGet(_a11yAnnouncer, this).call(this, navLabelText);
     this.refreshBorderState();
     pageSizeList.forEach(pageSizeItem => {
@@ -354,10 +350,10 @@ export class PaginationUI {
         }
       }
     }
-    setAttribute(first, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[A11Y_DISABLED(isFirstPage)], ...[A11Y_TABINDEX(-1)]]);
-    setAttribute(prev, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[A11Y_DISABLED(isFirstPage)], ...[A11Y_TABINDEX(-1)]]);
-    setAttribute(next, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[A11Y_DISABLED(isLastPage)], ...[A11Y_TABINDEX(-1)]]);
-    setAttribute(last, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[A11Y_DISABLED(isLastPage)], ...[A11Y_TABINDEX(-1)]]);
+    setAttribute(first, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[A11Y_DISABLED(isFirstPage)]]);
+    setAttribute(prev, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[A11Y_DISABLED(isFirstPage)]]);
+    setAttribute(next, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[A11Y_DISABLED(isLastPage)]]);
+    setAttribute(last, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[A11Y_DISABLED(isLastPage)]]);
     return this;
   }
 

package/plugins/stretchColumns/calculator.js

@@ -129,6 +129,8 @@ function _willVerticalScrollAppear() {
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
   const defaultRowHeight = stylesHandler.getDefaultRowHeight();
+  const isLegacyTheme = stylesHandler.isClassicTheme();
+  const firstRowBorderCompensation = row => isLegacyTheme && row === 0 ? 1 : 0;
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
@@ -137,7 +139,7 @@ function _willVerticalScrollAppear() {
       // eslint-disable-next-line no-continue
       continue;
     }
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + firstRowBorderCompensation(row);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

package/plugins/stretchColumns/calculator.mjs

@@ -125,6 +125,8 @@ function _willVerticalScrollAppear() {
   const viewportHeight = view.getViewportHeight();
   const totalRows = _classPrivateFieldGet(_hot, this).countRows();
   const defaultRowHeight = stylesHandler.getDefaultRowHeight();
+  const isLegacyTheme = stylesHandler.isClassicTheme();
+  const firstRowBorderCompensation = row => isLegacyTheme && row === 0 ? 1 : 0;
   let totalHeight = 0;
   let hasVerticalScroll = false;
   for (let row = 0; row < totalRows; row++) {
@@ -133,7 +135,7 @@ function _willVerticalScrollAppear() {
       // eslint-disable-next-line no-continue
       continue;
     }
-    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + (row === 0 ? 1 : 0);
+    totalHeight += ((_classPrivateFieldGet2 = _classPrivateFieldGet(_hot, this).getRowHeight(row)) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultRowHeight) + firstRowBorderCompensation(row);
     if (totalHeight > viewportHeight) {
       hasVerticalScroll = true;
       break;

package/plugins/undoRedo/undoRedo.js

@@ -21,7 +21,7 @@ function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("C
 function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
+function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); } /* eslint-disable jsdoc/require-description-complete-sentence */
 const SHORTCUTS_GROUP = 'undoRedo';
 const PLUGIN_KEY = exports.PLUGIN_KEY = 'undoRedo';
 const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 1000;
@@ -322,7 +322,9 @@ function _exposeAPIToCore() {
   };
 
   /**
-   * {@link UndoRedo#undo}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#undo-2) plugin.
+   * :::
    *
    * @alias undo
    * @memberof! Core#
@@ -332,7 +334,9 @@ function _exposeAPIToCore() {
     this.undo();
   };
   /**
-   * {@link UndoRedo#redo}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#redo) plugin.
+   * :::
    *
    * @alias redo
    * @memberof! Core#
@@ -342,7 +346,9 @@ function _exposeAPIToCore() {
     this.redo();
   };
   /**
-   * {@link UndoRedo#isUndoAvailable}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#isundoavailable) plugin.
+   * :::
    *
    * @alias isUndoAvailable
    * @memberof! Core#
@@ -353,7 +359,9 @@ function _exposeAPIToCore() {
     return this.isUndoAvailable();
   };
   /**
-   * {@link UndoRedo#isRedoAvailable}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#isredoavailable) plugin.
+   * :::
    *
    * @alias isRedoAvailable
    * @memberof! Core#
@@ -364,7 +372,9 @@ function _exposeAPIToCore() {
     return this.isRedoAvailable();
   };
   /**
-   * {@link UndoRedo#clear}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#clear) plugin.
+   * :::
    *
    * @alias clearUndo
    * @memberof! Core#

package/plugins/undoRedo/undoRedo.mjs

@@ -13,6 +13,7 @@ import "core-js/modules/es.set.is-subset-of.v2.js";
 import "core-js/modules/es.set.is-superset-of.v2.js";
 import "core-js/modules/es.set.symmetric-difference.v2.js";
 import "core-js/modules/es.set.union.v2.js";
+/* eslint-disable jsdoc/require-description-complete-sentence */
 import { BasePlugin } from "../base/index.mjs";
 import { Hooks } from "../../core/hooks/index.mjs";
 import { deepClone } from "../../helpers/object.mjs";
@@ -318,7 +319,9 @@ function _exposeAPIToCore() {
   };
 
   /**
-   * {@link UndoRedo#undo}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#undo-2) plugin.
+   * :::
    *
    * @alias undo
    * @memberof! Core#
@@ -328,7 +331,9 @@ function _exposeAPIToCore() {
     this.undo();
   };
   /**
-   * {@link UndoRedo#redo}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#redo) plugin.
+   * :::
    *
    * @alias redo
    * @memberof! Core#
@@ -338,7 +343,9 @@ function _exposeAPIToCore() {
     this.redo();
   };
   /**
-   * {@link UndoRedo#isUndoAvailable}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#isundoavailable) plugin.
+   * :::
    *
    * @alias isUndoAvailable
    * @memberof! Core#
@@ -349,7 +356,9 @@ function _exposeAPIToCore() {
     return this.isUndoAvailable();
   };
   /**
-   * {@link UndoRedo#isRedoAvailable}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#isredoavailable) plugin.
+   * :::
    *
    * @alias isRedoAvailable
    * @memberof! Core#
@@ -360,7 +369,9 @@ function _exposeAPIToCore() {
     return this.isRedoAvailable();
   };
   /**
-   * {@link UndoRedo#clear}.
+   * ::: warning
+   * This method is deprecated and it will be removed from the Core API in the future. Please use the method from the [`UndoRedo`](@/api/undoRedo.md#clear) plugin.
+   * :::
    *
    * @alias clearUndo
    * @memberof! Core#

package/renderers/checkboxRenderer/checkboxRenderer.js

@@ -30,24 +30,21 @@ _hooks.Hooks.getSingleton().add('modifyAutoColumnSizeSeed', function (bundleSeed
     column,
     prop
   } = cellMeta;
-  if (type !== RENDERER_TYPE) {
+  if (type !== RENDERER_TYPE || !label) {
     return;
   }
-  if (label) {
-    const {
-      value: labelValue,
-      property: labelProperty
-    } = label;
-    let labelText = cellValue;
-    if (labelValue) {
-      labelText = typeof labelValue === 'function' ? labelValue(row, column, prop, cellValue) : labelValue;
-    } else if (labelProperty) {
-      const labelData = this.getDataAtRowProp(row, labelProperty);
-      labelText = labelData !== null ? labelData : cellValue;
-    }
-    bundleSeed = labelText;
+  const {
+    value: labelValue,
+    property: labelProperty
+  } = label;
+  let labelText = cellValue;
+  if (labelValue) {
+    labelText = typeof labelValue === 'function' ? labelValue(row, column, prop, cellValue) : labelValue;
+  } else if (labelProperty) {
+    const labelData = this.getDataAtRowProp(row, labelProperty);
+    labelText = labelData !== null ? labelData : cellValue;
   }
-  return bundleSeed;
+  return `${(0, _mixed.stringify)(labelText).length}`;
 });
 /**
  * Checkbox renderer.

package/renderers/checkboxRenderer/checkboxRenderer.mjs

@@ -25,24 +25,21 @@ Hooks.getSingleton().add('modifyAutoColumnSizeSeed', function (bundleSeed, cellM
     column,
     prop
   } = cellMeta;
-  if (type !== RENDERER_TYPE) {
+  if (type !== RENDERER_TYPE || !label) {
     return;
   }
-  if (label) {
-    const {
-      value: labelValue,
-      property: labelProperty
-    } = label;
-    let labelText = cellValue;
-    if (labelValue) {
-      labelText = typeof labelValue === 'function' ? labelValue(row, column, prop, cellValue) : labelValue;
-    } else if (labelProperty) {
-      const labelData = this.getDataAtRowProp(row, labelProperty);
-      labelText = labelData !== null ? labelData : cellValue;
-    }
-    bundleSeed = labelText;
+  const {
+    value: labelValue,
+    property: labelProperty
+  } = label;
+  let labelText = cellValue;
+  if (labelValue) {
+    labelText = typeof labelValue === 'function' ? labelValue(row, column, prop, cellValue) : labelValue;
+  } else if (labelProperty) {
+    const labelData = this.getDataAtRowProp(row, labelProperty);
+    labelText = labelData !== null ? labelData : cellValue;
   }
-  return bundleSeed;
+  return `${stringify(labelText).length}`;
 });
 /**
  * Checkbox renderer.

package/selection/selection.js

@@ -1168,7 +1168,7 @@ class Selection {
     }
     this.selectedRange.clear();
     this.highlight.clear();
-    this.inProgress = true;
+    this.inProgress = false;
     _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     this.selectedByRowHeader = new Set(selectedByRowHeader);
     this.selectedByColumnHeader = new Set(selectedByColumnHeader);

package/selection/selection.mjs

@@ -1163,7 +1163,7 @@ class Selection {
     }
     this.selectedRange.clear();
     this.highlight.clear();
-    this.inProgress = true;
+    this.inProgress = false;
     _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     this.selectedByRowHeader = new Set(selectedByRowHeader);
     this.selectedByColumnHeader = new Set(selectedByColumnHeader);

package/settings.d.ts

@@ -43,6 +43,7 @@ import { Settings as SearchSettings } from './plugins/search';
 import { Settings as TrimRowsSettings } from './plugins/trimRows';
 import { Settings as DialogSettings } from './plugins/dialog';
 import { Settings as LoadingSettings } from './plugins/loading';
+import { Settings as EmptyDataStateSettings } from './plugins/emptyDataState';
 import { Settings as UndoRedoSettings } from './plugins/undoRedo';
 import { EditorType, BaseEditor } from './editors';
 import { RendererType } from './renderers';
@@ -181,6 +182,7 @@ export interface GridSettings extends Events {
   maxRows?: number;
   mergeCells?: MergeCellsSettings;
   minCols?: number;
+  minRowHeights?: number | string | number[] | string[] | undefined[] | Array<number | string | undefined> | ((index: number) => string | number | undefined);
   minRows?: number;
   minSpareCols?: number;
   minSpareRows?: number;
@@ -229,6 +231,7 @@ export interface GridSettings extends Events {
   uncheckedTemplate?: boolean | string | number;
   dialog?: DialogSettings;
   loading?: LoadingSettings;
+  emptyDataState?: EmptyDataStateSettings;
   undo?: UndoRedoSettings;
   validator?: BaseValidator | RegExp | ValidatorType | string;
   valueGetter?: (this: Core, value: CellValue, row: number, column: number, cellProperties: CellProperties) => CellValue;

package/shortcutContexts/commands/index.js

@@ -10,7 +10,8 @@ var _scrollToFocusedCell = require("./scrollToFocusedCell");
 var _selectAllCells = require("./selectAllCells");
 var _selectAllCellsAndHeaders = require("./selectAllCellsAndHeaders");
 var _populateSelectedCellsData = require("./populateSelectedCellsData");
-const allCommands = [...(0, _editor.getAllCommands)(), ...(0, _extendCellsSelection.getAllCommands)(), ...(0, _moveCellSelection.getAllCommands)(), _emptySelectedCells.command, _scrollToFocusedCell.command, _selectAllCells.command, _selectAllCellsAndHeaders.command, _populateSelectedCellsData.command];
+var _tabNavigation = require("./tabNavigation");
+const allCommands = [...(0, _editor.getAllCommands)(), ...(0, _extendCellsSelection.getAllCommands)(), ...(0, _moveCellSelection.getAllCommands)(), _emptySelectedCells.command, _scrollToFocusedCell.command, _selectAllCells.command, _selectAllCellsAndHeaders.command, _populateSelectedCellsData.command, _tabNavigation.command];
 
 /**
  * Prepares and creates an object with all available commands to trigger.

package/shortcutContexts/commands/index.mjs

@@ -6,7 +6,8 @@ import { command as scrollToFocusedCell } from "./scrollToFocusedCell.mjs";
 import { command as selectAllCells } from "./selectAllCells.mjs";
 import { command as selectAllCellsAndHeaders } from "./selectAllCellsAndHeaders.mjs";
 import { command as populateSelectedCellsData } from "./populateSelectedCellsData.mjs";
-const allCommands = [...getAllEditorCommands(), ...getAllSelectionExtendCommands(), ...getAllSelectionMoveCommands(), emptySelectedCells, scrollToFocusedCell, selectAllCells, selectAllCellsAndHeaders, populateSelectedCellsData];
+import { command as tabNavigation } from "./tabNavigation.mjs";
+const allCommands = [...getAllEditorCommands(), ...getAllSelectionExtendCommands(), ...getAllSelectionMoveCommands(), emptySelectedCells, scrollToFocusedCell, selectAllCells, selectAllCellsAndHeaders, populateSelectedCellsData, tabNavigation];
 
 /**
  * Prepares and creates an object with all available commands to trigger.

package/shortcutContexts/commands/tabNavigation.js

@@ -0,0 +1,51 @@
+"use strict";
+
+exports.__esModule = true;
+const command = exports.command = {
+  name: 'tabNavigation',
+  callback(hot) {
+    const rowWrapState = {
+      wrapped: false,
+      flipped: false
+    };
+    let isTabOrShiftTabPressed = false;
+    let preventViewportScroll = false;
+    hot.addHook('afterSelection', (row, column, row2, column2, preventScrolling) => {
+      if (isTabOrShiftTabPressed && (rowWrapState.wrapped && rowWrapState.flipped || preventViewportScroll)) {
+        preventViewportScroll = false;
+        preventScrolling.value = true;
+      }
+    });
+    hot.addHook('beforeRowWrap', (interruptedByAutoInsertMode, newCoords, isFlipped) => {
+      rowWrapState.wrapped = true;
+      rowWrapState.flipped = isFlipped;
+    });
+    return {
+      before() {
+        const {
+          tabNavigation
+        } = hot.getSettings();
+        isTabOrShiftTabPressed = true;
+        if (!tabNavigation) {
+          preventViewportScroll = true;
+        }
+      },
+      after(event) {
+        const {
+          tabNavigation,
+          autoWrapRow
+        } = hot.getSettings();
+        isTabOrShiftTabPressed = false;
+        if (!tabNavigation || !hot.selection.isSelected() || autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped || !autoWrapRow && rowWrapState.wrapped) {
+          rowWrapState.wrapped = false;
+          rowWrapState.flipped = false;
+          hot.deselectCell();
+          return false;
+        }
+
+        // if the selection is still within the table's range then prevent default action
+        event.preventDefault();
+      }
+    };
+  }
+};

package/shortcutContexts/commands/tabNavigation.mjs

@@ -0,0 +1,48 @@
+export const command = {
+  name: 'tabNavigation',
+  callback(hot) {
+    const rowWrapState = {
+      wrapped: false,
+      flipped: false
+    };
+    let isTabOrShiftTabPressed = false;
+    let preventViewportScroll = false;
+    hot.addHook('afterSelection', (row, column, row2, column2, preventScrolling) => {
+      if (isTabOrShiftTabPressed && (rowWrapState.wrapped && rowWrapState.flipped || preventViewportScroll)) {
+        preventViewportScroll = false;
+        preventScrolling.value = true;
+      }
+    });
+    hot.addHook('beforeRowWrap', (interruptedByAutoInsertMode, newCoords, isFlipped) => {
+      rowWrapState.wrapped = true;
+      rowWrapState.flipped = isFlipped;
+    });
+    return {
+      before() {
+        const {
+          tabNavigation
+        } = hot.getSettings();
+        isTabOrShiftTabPressed = true;
+        if (!tabNavigation) {
+          preventViewportScroll = true;
+        }
+      },
+      after(event) {
+        const {
+          tabNavigation,
+          autoWrapRow
+        } = hot.getSettings();
+        isTabOrShiftTabPressed = false;
+        if (!tabNavigation || !hot.selection.isSelected() || autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped || !autoWrapRow && rowWrapState.wrapped) {
+          rowWrapState.wrapped = false;
+          rowWrapState.flipped = false;
+          hot.deselectCell();
+          return false;
+        }
+
+        // if the selection is still within the table's range then prevent default action
+        event.preventDefault();
+      }
+    };
+  }
+};

package/shortcutContexts/constants.js

@@ -1,11 +1,26 @@
 "use strict";
 
 exports.__esModule = true;
+/* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * Group name for keyboard shortcuts that are active when the cell is selected.
  */
 const GRID_GROUP = exports.GRID_GROUP = 'gridDefault';
+/**
+ * Scope name for the grid.
+ */
+const GRID_SCOPE = exports.GRID_SCOPE = 'grid';
+/**
+ * A special group that is used to group keyboard shortcuts that listen to tab navigation events only to
+ * handle the tab navigation logic and proper focus movement between the grid and other UI elements
+ * provided by the plugin (e.g. dialog or pagination).
+ */
+const GRID_TAB_NAVIGATION_GROUP = exports.GRID_TAB_NAVIGATION_GROUP = 'grid.tabNavigation';
 /**
  * Group name for keyboard shortcuts that are active when the cell editor is active.
  */
-const EDITOR_EDIT_GROUP = exports.EDITOR_EDIT_GROUP = 'editorManager.handlingEditor';
+const EDITOR_EDIT_GROUP = exports.EDITOR_EDIT_GROUP = 'editorManager.handlingEditor';
+/**
+ * Scope name for the editor.
+ */
+const EDITOR_SCOPE = exports.EDITOR_SCOPE = 'editor';

package/shortcutContexts/constants.mjs

@@ -1,8 +1,23 @@
+/* eslint-disable jsdoc/require-description-complete-sentence */
 /**
  * Group name for keyboard shortcuts that are active when the cell is selected.
  */
 export const GRID_GROUP = 'gridDefault';
+/**
+ * Scope name for the grid.
+ */
+export const GRID_SCOPE = 'grid';
+/**
+ * A special group that is used to group keyboard shortcuts that listen to tab navigation events only to
+ * handle the tab navigation logic and proper focus movement between the grid and other UI elements
+ * provided by the plugin (e.g. dialog or pagination).
+ */
+export const GRID_TAB_NAVIGATION_GROUP = 'grid.tabNavigation';
 /**
  * Group name for keyboard shortcuts that are active when the cell editor is active.
  */
-export const EDITOR_EDIT_GROUP = 'editorManager.handlingEditor';
+export const EDITOR_EDIT_GROUP = 'editorManager.handlingEditor';
+/**
+ * Scope name for the editor.
+ */
+export const EDITOR_SCOPE = 'editor';

package/shortcutContexts/editor.js

@@ -10,7 +10,7 @@ var _commands = require("./commands");
  * @param {Handsontable} hot The Handsontable instance.
  */
 function shortcutsEditorContext(hot) {
-  const context = hot.getShortcutManager().addContext('editor');
+  const context = hot.getShortcutManager().addContext(_constants.EDITOR_SCOPE);
   const commandsPool = (0, _commands.createKeyboardShortcutCommandsPool)(hot);
   const config = {
     group: _constants.EDITOR_EDIT_GROUP
@@ -24,7 +24,7 @@ function shortcutsEditorContext(hot) {
     callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
   }, {
     keys: [['Tab'], ['Tab', 'Shift'], ['PageDown'], ['PageUp']],
-    forwardToContext: hot.getShortcutManager().getContext('grid'),
+    forwardToContext: hot.getShortcutManager().getContext(_constants.GRID_SCOPE),
     callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
   }, {
     keys: [['ArrowDown'], ['ArrowUp'], ['ArrowLeft'], ['ArrowRight']],

package/shortcutContexts/editor.mjs

@@ -1,4 +1,4 @@
-import { EDITOR_EDIT_GROUP } from "./constants.mjs";
+import { EDITOR_EDIT_GROUP, EDITOR_SCOPE, GRID_SCOPE } from "./constants.mjs";
 import { createKeyboardShortcutCommandsPool } from "./commands/index.mjs";
 /**
  * The context that defines a base shortcut list available for cells editors.
@@ -6,7 +6,7 @@ import { createKeyboardShortcutCommandsPool } from "./commands/index.mjs";
  * @param {Handsontable} hot The Handsontable instance.
  */
 export function shortcutsEditorContext(hot) {
-  const context = hot.getShortcutManager().addContext('editor');
+  const context = hot.getShortcutManager().addContext(EDITOR_SCOPE);
   const commandsPool = createKeyboardShortcutCommandsPool(hot);
   const config = {
     group: EDITOR_EDIT_GROUP
@@ -20,7 +20,7 @@ export function shortcutsEditorContext(hot) {
     callback: (event, keys) => commandsPool.editorCloseAndSaveByEnter(event, keys)
   }, {
     keys: [['Tab'], ['Tab', 'Shift'], ['PageDown'], ['PageUp']],
-    forwardToContext: hot.getShortcutManager().getContext('grid'),
+    forwardToContext: hot.getShortcutManager().getContext(GRID_SCOPE),
     callback: (event, keys) => commandsPool.editorCloseAndSave(event, keys)
   }, {
     keys: [['ArrowDown'], ['ArrowUp'], ['ArrowLeft'], ['ArrowRight']],