handsontable 0.0.0-next-2c41c5b-20250814 → 0.0.0-next-fce5825-20250822

package/plugins/pagination/pagination.js

@@ -14,6 +14,8 @@ var _a11yAnnouncer = require("../../utils/a11yAnnouncer");
 var _strategies = require("./strategies");
 var _templateLiteralTag = require("../../helpers/templateLiteralTag");
 var _console = require("../../helpers/console");
+var _focusController2 = require("./focusController");
+var _focusDetector2 = require("../../utils/focusDetector");
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _classPrivateFieldInitSpec(e, t, a) { _checkPrivateRedeclaration(e, t), t.set(e, a); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an object"); }
@@ -22,6 +24,8 @@ function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a),
 function _assertClassBrand(e, t, n) { if ("function" == typeof e ? e === t : e.has(t)) return arguments.length < 3 ? t : n; throw new TypeError("Private element is not present on this object"); }
 const PLUGIN_KEY = exports.PLUGIN_KEY = 'pagination';
 const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 900;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
 const AUTO_PAGE_SIZE_WARNING = (0, _templateLiteralTag.toSingleLine)`The \`auto\` page size setting requires the \`autoRowSize\`\x20
   plugin to be enabled. Set the \`autoRowSize: true\` in the configuration to ensure correct behavior.`;
 
@@ -106,13 +110,15 @@ var _ui = /*#__PURE__*/new WeakMap();
 var _calcStrategy = /*#__PURE__*/new WeakMap();
 var _internalExecutionCall = /*#__PURE__*/new WeakMap();
 var _internalRenderCall = /*#__PURE__*/new WeakMap();
+var _focusController = /*#__PURE__*/new WeakMap();
+var _focusDetector = /*#__PURE__*/new WeakMap();
 var _Pagination_brand = /*#__PURE__*/new WeakSet();
 var _onIndexCacheUpdate = /*#__PURE__*/new WeakMap();
 class Pagination extends _base.BasePlugin {
   constructor() {
     super(...arguments);
     /**
-     * Updates the visibility state of the pagination sections based on the current settings.
+     * Bind the events used by the plugin.
      */
     _classPrivateMethodInitSpec(this, _Pagination_brand);
     /**
@@ -162,6 +168,18 @@ class Pagination extends _base.BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _internalRenderCall, false);
+    /**
+     * Pagination focus controller instance.
+     *
+     * @type {PaginationController}
+     */
+    _classPrivateFieldInitSpec(this, _focusController, null);
+    /**
+     * Pagination focus detector instance.
+     *
+     * @type {object}
+     */
+    _classPrivateFieldInitSpec(this, _focusDetector, null);
     /**
      * IndexMapper cache update listener. Once the cache is updated, we need to recompute
      * the pagination state.
@@ -230,7 +248,7 @@ class Pagination extends _base.BasePlugin {
     _classPrivateFieldSet(_calcStrategy, this, (0, _strategies.createPaginatorStrategy)(_classPrivateFieldGet(_pageSize, this) === 'auto' ? 'auto' : 'fixed'));
     if (!_classPrivateFieldGet(_ui, this)) {
       _classPrivateFieldSet(_ui, this, new _ui2.PaginationUI({
-        rootElement: this.hot.rootElement,
+        rootElement: this.hot.rootGridElement,
         uiContainer: this.getSetting('uiContainer'),
         isRtl: this.hot.isRtl(),
         themeName: this.hot.getSettings().themeName,
@@ -241,8 +259,35 @@ class Pagination extends _base.BasePlugin {
         a11yAnnouncer: message => (0, _a11yAnnouncer.announce)(message)
       }));
       _assertClassBrand(_Pagination_brand, this, _updateSectionsVisibilityState).call(this);
-      _classPrivateFieldGet(_ui, this).addLocalHook('firstPageClick', () => this.firstPage()).addLocalHook('prevPageClick', () => this.prevPage()).addLocalHook('nextPageClick', () => this.nextPage()).addLocalHook('lastPageClick', () => this.lastPage()).addLocalHook('pageSizeChange', pageSize => this.setPageSize(pageSize));
+      _classPrivateFieldGet(_ui, this).addLocalHook('firstPageClick', () => this.firstPage()).addLocalHook('prevPageClick', () => this.prevPage()).addLocalHook('nextPageClick', () => this.nextPage()).addLocalHook('lastPageClick', () => this.lastPage()).addLocalHook('pageSizeChange', pageSize => this.setPageSize(pageSize)).addLocalHook('focus', element => {
+        _classPrivateFieldGet(_focusController, this).setCurrentPage(_classPrivateFieldGet(_ui, this).getFocusableElements().indexOf(element));
+        this.hot.unlisten();
+        this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+        this.hot.listen();
+        _classPrivateFieldGet(_focusDetector, this).deactivate();
+      });
+    }
+    if (!_classPrivateFieldGet(_focusController, this)) {
+      _classPrivateFieldSet(_focusController, this, (0, _focusController2.createPaginationFocusController)({
+        focusableElements: () => _classPrivateFieldGet(_ui, this).getFocusableElements()
+      }));
     }
+    if (!_classPrivateFieldGet(_focusDetector, this)) {
+      _classPrivateFieldSet(_focusDetector, this, (0, _focusDetector2.installFocusDetector)(this.hot, _classPrivateFieldGet(_ui, this).getContainer(), {
+        onFocus: from => {
+          this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+          this.hot.listen();
+          if (from === 'from_above') {
+            _classPrivateFieldGet(_focusController, this).toFirstItem();
+          } else {
+            _classPrivateFieldGet(_focusController, this).toLastItem();
+          }
+          _classPrivateFieldGet(_focusDetector, this).deactivate();
+        }
+      }));
+    }
+    _assertClassBrand(_Pagination_brand, this, _registerEvents).call(this);
+    _assertClassBrand(_Pagination_brand, this, _registerShortcuts).call(this);
 
     // Place the onInit hook before others to make sure that the pagination state is computed
     // and applied to the index mapper before AutoColumnSize plugin begins calculate the column sizes.
@@ -324,6 +369,18 @@ class Pagination extends _base.BasePlugin {
       }
       return _assertClassBrand(_Pagination_brand, _this, _onAfterSetTheme).call(_this, ...args);
     });
+    this.addHook('afterDialogShow', function () {
+      for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+        args[_key12] = arguments[_key12];
+      }
+      return _assertClassBrand(_Pagination_brand, _this, _onAfterDialogShow).call(_this, ...args);
+    });
+    this.addHook('beforeDialogHide', function () {
+      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+        args[_key13] = arguments[_key13];
+      }
+      return _assertClassBrand(_Pagination_brand, _this, _onAfterDialogHide).call(_this, ...args);
+    });
     this.hot.rowIndexMapper.addLocalHook('cacheUpdated', _classPrivateFieldGet(_onIndexCacheUpdate, this));
     super.enablePlugin();
   }
@@ -345,9 +402,9 @@ class Pagination extends _base.BasePlugin {
     this.hot.rowIndexMapper.removeLocalHook('cacheUpdated', _classPrivateFieldGet(_onIndexCacheUpdate, this)).unregisterMap(this.pluginName);
     _classPrivateFieldGet(_ui, this).destroy();
     _classPrivateFieldSet(_ui, this, null);
+    _assertClassBrand(_Pagination_brand, this, _unregisterShortcuts).call(this);
     super.disablePlugin();
   }
-
   /**
    * Gets the pagination current state. Returns an object with the following properties:
    *  - `currentPage`: The current page number.
@@ -603,6 +660,11 @@ class Pagination extends _base.BasePlugin {
     _classPrivateFieldGet(_ui, this).setNavigationSectionVisibility(false);
     this.hot.runHooks('afterPageNavigationVisibilityChange', false);
   }
+
+  /**
+   * Updates the visibility state of the pagination sections based on the current settings.
+   */
+
   /**
    * Destroys the plugin instance.
    */
@@ -616,6 +678,59 @@ class Pagination extends _base.BasePlugin {
   }
 }
 exports.Pagination = Pagination;
+function _registerEvents() {
+  // TODO: move to general focus manager module
+  this.eventManager.addEventListener(this.hot.rootDocument, 'mouseup', event => {
+    const container = _classPrivateFieldGet(_ui, this).getContainer();
+    if (!container.contains(event.target) && this.hot.getShortcutManager().getActiveContextName() === SHORTCUTS_CONTEXT_NAME) {
+      _classPrivateFieldGet(_focusDetector, this).activate();
+      _classPrivateFieldGet(_focusController, this).clear();
+      this.hot.getShortcutManager().setActiveContextName('grid');
+    }
+  });
+}
+/**
+ * Register shortcuts responsible for navigating through the pagination.
+ */
+function _registerShortcuts() {
+  var _manager$getContext;
+  const manager = this.hot.getShortcutManager();
+  const pluginContext = (_manager$getContext = manager.getContext(SHORTCUTS_CONTEXT_NAME)) !== null && _manager$getContext !== void 0 ? _manager$getContext : manager.addContext(SHORTCUTS_CONTEXT_NAME, 'global');
+  pluginContext.addShortcut({
+    keys: [['Shift', 'Tab'], ['Tab']],
+    preventDefault: false,
+    callback: event => {
+      let previousIndex = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+      if (event.shiftKey) {
+        _classPrivateFieldGet(_focusController, this).toPreviousItem();
+        const currentPage = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+        if (currentPage >= previousIndex) {
+          _assertClassBrand(_Pagination_brand, this, _unFocusPagination).call(this);
+          return;
+        }
+        previousIndex = currentPage;
+      } else {
+        _classPrivateFieldGet(_focusController, this).toNextItem();
+        const currentPage = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+        if (currentPage <= previousIndex) {
+          _assertClassBrand(_Pagination_brand, this, _unFocusPagination).call(this);
+          return;
+        }
+        previousIndex = currentPage;
+      }
+      event.preventDefault();
+    },
+    group: SHORTCUTS_GROUP
+  });
+}
+/**
+ * Unregister shortcuts responsible for navigating through the pagination.
+ */
+function _unregisterShortcuts() {
+  const shortcutManager = this.hot.getShortcutManager();
+  const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
+  pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
+}
 function _updateSectionsVisibilityState() {
   if (this.getSetting('showPageSize')) {
     this.showPageSizeSection();
@@ -688,10 +803,16 @@ function _computeAndApplyState() {
     this.hot.rowIndexMapper.updateCache(true);
   }
   _classPrivateFieldSet(_internalExecutionCall, this, false);
+  const paginationData = this.getPaginationData();
   _classPrivateFieldGet(_ui, this).updateState({
-    ...this.getPaginationData(),
+    ...paginationData,
     totalRenderedRows: renderableRowsLength
   });
+  if ((this.getSetting('showPageSize') || this.getSetting('showNavigation')) && paginationData.totalPages > 1) {
+    _classPrivateFieldGet(_focusDetector, this).activate();
+  } else {
+    _classPrivateFieldGet(_focusDetector, this).deactivate();
+  }
 }
 /**
  * Based on the external factors (like the scroll position of the table, size etc.) it computes
@@ -842,6 +963,24 @@ function _onAfterRender() {
   const width = view.isHorizontallyScrollableByWindow() ? view.getTotalTableWidth() : view.getWorkspaceWidth();
   _classPrivateFieldGet(_ui, this).updateWidth(width).refreshBorderState();
 }
+/**
+ * Called before the height of the table is changed. It adjusts the table height to fit the pagination container
+ * in declared height.
+ *
+ * @param {number|string} height Table height.
+ * @returns {string} Returns the new table height.
+ */
+function _onBeforeHeightChange(height) {
+  if (this.getSetting('uiContainer')) {
+    return height;
+  }
+  const isPixelValue = typeof height === 'number' || typeof height === 'string' && /^\d+$/.test(height) || typeof height === 'string' && height.endsWith('px');
+  if (!isPixelValue) {
+    return height;
+  }
+  const heightValue = typeof height === 'string' && height.endsWith('px') ? height : `${height}px`;
+  return `calc(${heightValue} - ${_classPrivateFieldGet(_ui, this).getHeight()}px)`;
+}
 /**
  * Called after the initialization of the plugin. It computes the initial state of the pagination.
  */
@@ -864,19 +1003,6 @@ function _onAfterScrollVertically() {
 function _onAfterLanguageChange() {
   _assertClassBrand(_Pagination_brand, this, _computeAndApplyState).call(this);
 }
-/**
- * Called before the height of the table is changed. It adjusts the table height to fit the pagination container
- * in declared height.
- *
- * @param {number} height Table height.
- * @returns {string} Returns the new table height.
- */
-function _onBeforeHeightChange(height) {
-  if (this.getSetting('uiContainer')) {
-    return height;
-  }
-  return `calc(${height}${/[0-9]$/.test(height) ? 'px' : ''} - ${_classPrivateFieldGet(_ui, this).getHeight()}px)`;
-}
 /**
  * Called after the theme is set. It updates the theme of the pagination container.
  *
@@ -884,4 +1010,25 @@ function _onBeforeHeightChange(height) {
  */
 function _onAfterSetTheme(themeName) {
   _classPrivateFieldGet(_ui, this).updateTheme(themeName);
+}
+/**
+ * Unfocuses the pagination and sets the active context for the shortcuts.
+ */
+function _unFocusPagination() {
+  _classPrivateFieldGet(_focusDetector, this).activate();
+  _classPrivateFieldGet(_focusController, this).clear();
+  this.hot.unlisten();
+  this.hot.getShortcutManager().setActiveContextName('grid');
+}
+/**
+ * Called after the dialog is shown. It sets the active context for the shortcuts.
+ */
+function _onAfterDialogShow() {
+  _classPrivateFieldGet(_focusDetector, this).deactivate();
+}
+/**
+ * Called after the dialog is hidden. It sets the active context for the shortcuts.
+ */
+function _onAfterDialogHide() {
+  _classPrivateFieldGet(_focusDetector, this).activate();
 }

package/plugins/pagination/pagination.mjs

@@ -17,8 +17,12 @@ import { announce } from "../../utils/a11yAnnouncer.mjs";
 import { createPaginatorStrategy } from "./strategies/index.mjs";
 import { toSingleLine } from "../../helpers/templateLiteralTag.mjs";
 import { warn } from "../../helpers/console.mjs";
+import { createPaginationFocusController } from "./focusController.mjs";
+import { installFocusDetector } from "../../utils/focusDetector.mjs";
 export const PLUGIN_KEY = 'pagination';
 export const PLUGIN_PRIORITY = 900;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
 const AUTO_PAGE_SIZE_WARNING = toSingleLine`The \`auto\` page size setting requires the \`autoRowSize\`\x20
   plugin to be enabled. Set the \`autoRowSize: true\` in the configuration to ensure correct behavior.`;
 
@@ -103,13 +107,15 @@ var _ui = /*#__PURE__*/new WeakMap();
 var _calcStrategy = /*#__PURE__*/new WeakMap();
 var _internalExecutionCall = /*#__PURE__*/new WeakMap();
 var _internalRenderCall = /*#__PURE__*/new WeakMap();
+var _focusController = /*#__PURE__*/new WeakMap();
+var _focusDetector = /*#__PURE__*/new WeakMap();
 var _Pagination_brand = /*#__PURE__*/new WeakSet();
 var _onIndexCacheUpdate = /*#__PURE__*/new WeakMap();
 export class Pagination extends BasePlugin {
   constructor() {
     super(...arguments);
     /**
-     * Updates the visibility state of the pagination sections based on the current settings.
+     * Bind the events used by the plugin.
      */
     _classPrivateMethodInitSpec(this, _Pagination_brand);
     /**
@@ -159,6 +165,18 @@ export class Pagination extends BasePlugin {
      * @type {boolean}
      */
     _classPrivateFieldInitSpec(this, _internalRenderCall, false);
+    /**
+     * Pagination focus controller instance.
+     *
+     * @type {PaginationController}
+     */
+    _classPrivateFieldInitSpec(this, _focusController, null);
+    /**
+     * Pagination focus detector instance.
+     *
+     * @type {object}
+     */
+    _classPrivateFieldInitSpec(this, _focusDetector, null);
     /**
      * IndexMapper cache update listener. Once the cache is updated, we need to recompute
      * the pagination state.
@@ -227,7 +245,7 @@ export class Pagination extends BasePlugin {
     _classPrivateFieldSet(_calcStrategy, this, createPaginatorStrategy(_classPrivateFieldGet(_pageSize, this) === 'auto' ? 'auto' : 'fixed'));
     if (!_classPrivateFieldGet(_ui, this)) {
       _classPrivateFieldSet(_ui, this, new PaginationUI({
-        rootElement: this.hot.rootElement,
+        rootElement: this.hot.rootGridElement,
         uiContainer: this.getSetting('uiContainer'),
         isRtl: this.hot.isRtl(),
         themeName: this.hot.getSettings().themeName,
@@ -238,8 +256,35 @@ export class Pagination extends BasePlugin {
         a11yAnnouncer: message => announce(message)
       }));
       _assertClassBrand(_Pagination_brand, this, _updateSectionsVisibilityState).call(this);
-      _classPrivateFieldGet(_ui, this).addLocalHook('firstPageClick', () => this.firstPage()).addLocalHook('prevPageClick', () => this.prevPage()).addLocalHook('nextPageClick', () => this.nextPage()).addLocalHook('lastPageClick', () => this.lastPage()).addLocalHook('pageSizeChange', pageSize => this.setPageSize(pageSize));
+      _classPrivateFieldGet(_ui, this).addLocalHook('firstPageClick', () => this.firstPage()).addLocalHook('prevPageClick', () => this.prevPage()).addLocalHook('nextPageClick', () => this.nextPage()).addLocalHook('lastPageClick', () => this.lastPage()).addLocalHook('pageSizeChange', pageSize => this.setPageSize(pageSize)).addLocalHook('focus', element => {
+        _classPrivateFieldGet(_focusController, this).setCurrentPage(_classPrivateFieldGet(_ui, this).getFocusableElements().indexOf(element));
+        this.hot.unlisten();
+        this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+        this.hot.listen();
+        _classPrivateFieldGet(_focusDetector, this).deactivate();
+      });
+    }
+    if (!_classPrivateFieldGet(_focusController, this)) {
+      _classPrivateFieldSet(_focusController, this, createPaginationFocusController({
+        focusableElements: () => _classPrivateFieldGet(_ui, this).getFocusableElements()
+      }));
     }
+    if (!_classPrivateFieldGet(_focusDetector, this)) {
+      _classPrivateFieldSet(_focusDetector, this, installFocusDetector(this.hot, _classPrivateFieldGet(_ui, this).getContainer(), {
+        onFocus: from => {
+          this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+          this.hot.listen();
+          if (from === 'from_above') {
+            _classPrivateFieldGet(_focusController, this).toFirstItem();
+          } else {
+            _classPrivateFieldGet(_focusController, this).toLastItem();
+          }
+          _classPrivateFieldGet(_focusDetector, this).deactivate();
+        }
+      }));
+    }
+    _assertClassBrand(_Pagination_brand, this, _registerEvents).call(this);
+    _assertClassBrand(_Pagination_brand, this, _registerShortcuts).call(this);
 
     // Place the onInit hook before others to make sure that the pagination state is computed
     // and applied to the index mapper before AutoColumnSize plugin begins calculate the column sizes.
@@ -321,6 +366,18 @@ export class Pagination extends BasePlugin {
       }
       return _assertClassBrand(_Pagination_brand, _this, _onAfterSetTheme).call(_this, ...args);
     });
+    this.addHook('afterDialogShow', function () {
+      for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+        args[_key12] = arguments[_key12];
+      }
+      return _assertClassBrand(_Pagination_brand, _this, _onAfterDialogShow).call(_this, ...args);
+    });
+    this.addHook('beforeDialogHide', function () {
+      for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+        args[_key13] = arguments[_key13];
+      }
+      return _assertClassBrand(_Pagination_brand, _this, _onAfterDialogHide).call(_this, ...args);
+    });
     this.hot.rowIndexMapper.addLocalHook('cacheUpdated', _classPrivateFieldGet(_onIndexCacheUpdate, this));
     super.enablePlugin();
   }
@@ -342,9 +399,9 @@ export class Pagination extends BasePlugin {
     this.hot.rowIndexMapper.removeLocalHook('cacheUpdated', _classPrivateFieldGet(_onIndexCacheUpdate, this)).unregisterMap(this.pluginName);
     _classPrivateFieldGet(_ui, this).destroy();
     _classPrivateFieldSet(_ui, this, null);
+    _assertClassBrand(_Pagination_brand, this, _unregisterShortcuts).call(this);
     super.disablePlugin();
   }
-
   /**
    * Gets the pagination current state. Returns an object with the following properties:
    *  - `currentPage`: The current page number.
@@ -600,6 +657,11 @@ export class Pagination extends BasePlugin {
     _classPrivateFieldGet(_ui, this).setNavigationSectionVisibility(false);
     this.hot.runHooks('afterPageNavigationVisibilityChange', false);
   }
+
+  /**
+   * Updates the visibility state of the pagination sections based on the current settings.
+   */
+
   /**
    * Destroys the plugin instance.
    */
@@ -612,6 +674,59 @@ export class Pagination extends BasePlugin {
     super.destroy();
   }
 }
+function _registerEvents() {
+  // TODO: move to general focus manager module
+  this.eventManager.addEventListener(this.hot.rootDocument, 'mouseup', event => {
+    const container = _classPrivateFieldGet(_ui, this).getContainer();
+    if (!container.contains(event.target) && this.hot.getShortcutManager().getActiveContextName() === SHORTCUTS_CONTEXT_NAME) {
+      _classPrivateFieldGet(_focusDetector, this).activate();
+      _classPrivateFieldGet(_focusController, this).clear();
+      this.hot.getShortcutManager().setActiveContextName('grid');
+    }
+  });
+}
+/**
+ * Register shortcuts responsible for navigating through the pagination.
+ */
+function _registerShortcuts() {
+  var _manager$getContext;
+  const manager = this.hot.getShortcutManager();
+  const pluginContext = (_manager$getContext = manager.getContext(SHORTCUTS_CONTEXT_NAME)) !== null && _manager$getContext !== void 0 ? _manager$getContext : manager.addContext(SHORTCUTS_CONTEXT_NAME, 'global');
+  pluginContext.addShortcut({
+    keys: [['Shift', 'Tab'], ['Tab']],
+    preventDefault: false,
+    callback: event => {
+      let previousIndex = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+      if (event.shiftKey) {
+        _classPrivateFieldGet(_focusController, this).toPreviousItem();
+        const currentPage = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+        if (currentPage >= previousIndex) {
+          _assertClassBrand(_Pagination_brand, this, _unFocusPagination).call(this);
+          return;
+        }
+        previousIndex = currentPage;
+      } else {
+        _classPrivateFieldGet(_focusController, this).toNextItem();
+        const currentPage = _classPrivateFieldGet(_focusController, this).getCurrentPage();
+        if (currentPage <= previousIndex) {
+          _assertClassBrand(_Pagination_brand, this, _unFocusPagination).call(this);
+          return;
+        }
+        previousIndex = currentPage;
+      }
+      event.preventDefault();
+    },
+    group: SHORTCUTS_GROUP
+  });
+}
+/**
+ * Unregister shortcuts responsible for navigating through the pagination.
+ */
+function _unregisterShortcuts() {
+  const shortcutManager = this.hot.getShortcutManager();
+  const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
+  pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
+}
 function _updateSectionsVisibilityState() {
   if (this.getSetting('showPageSize')) {
     this.showPageSizeSection();
@@ -684,10 +799,16 @@ function _computeAndApplyState() {
     this.hot.rowIndexMapper.updateCache(true);
   }
   _classPrivateFieldSet(_internalExecutionCall, this, false);
+  const paginationData = this.getPaginationData();
   _classPrivateFieldGet(_ui, this).updateState({
-    ...this.getPaginationData(),
+    ...paginationData,
     totalRenderedRows: renderableRowsLength
   });
+  if ((this.getSetting('showPageSize') || this.getSetting('showNavigation')) && paginationData.totalPages > 1) {
+    _classPrivateFieldGet(_focusDetector, this).activate();
+  } else {
+    _classPrivateFieldGet(_focusDetector, this).deactivate();
+  }
 }
 /**
  * Based on the external factors (like the scroll position of the table, size etc.) it computes
@@ -838,6 +959,24 @@ function _onAfterRender() {
   const width = view.isHorizontallyScrollableByWindow() ? view.getTotalTableWidth() : view.getWorkspaceWidth();
   _classPrivateFieldGet(_ui, this).updateWidth(width).refreshBorderState();
 }
+/**
+ * Called before the height of the table is changed. It adjusts the table height to fit the pagination container
+ * in declared height.
+ *
+ * @param {number|string} height Table height.
+ * @returns {string} Returns the new table height.
+ */
+function _onBeforeHeightChange(height) {
+  if (this.getSetting('uiContainer')) {
+    return height;
+  }
+  const isPixelValue = typeof height === 'number' || typeof height === 'string' && /^\d+$/.test(height) || typeof height === 'string' && height.endsWith('px');
+  if (!isPixelValue) {
+    return height;
+  }
+  const heightValue = typeof height === 'string' && height.endsWith('px') ? height : `${height}px`;
+  return `calc(${heightValue} - ${_classPrivateFieldGet(_ui, this).getHeight()}px)`;
+}
 /**
  * Called after the initialization of the plugin. It computes the initial state of the pagination.
  */
@@ -860,19 +999,6 @@ function _onAfterScrollVertically() {
 function _onAfterLanguageChange() {
   _assertClassBrand(_Pagination_brand, this, _computeAndApplyState).call(this);
 }
-/**
- * Called before the height of the table is changed. It adjusts the table height to fit the pagination container
- * in declared height.
- *
- * @param {number} height Table height.
- * @returns {string} Returns the new table height.
- */
-function _onBeforeHeightChange(height) {
-  if (this.getSetting('uiContainer')) {
-    return height;
-  }
-  return `calc(${height}${/[0-9]$/.test(height) ? 'px' : ''} - ${_classPrivateFieldGet(_ui, this).getHeight()}px)`;
-}
 /**
  * Called after the theme is set. It updates the theme of the pagination container.
  *
@@ -880,4 +1006,25 @@ function _onBeforeHeightChange(height) {
  */
 function _onAfterSetTheme(themeName) {
   _classPrivateFieldGet(_ui, this).updateTheme(themeName);
+}
+/**
+ * Unfocuses the pagination and sets the active context for the shortcuts.
+ */
+function _unFocusPagination() {
+  _classPrivateFieldGet(_focusDetector, this).activate();
+  _classPrivateFieldGet(_focusController, this).clear();
+  this.hot.unlisten();
+  this.hot.getShortcutManager().setActiveContextName('grid');
+}
+/**
+ * Called after the dialog is shown. It sets the active context for the shortcuts.
+ */
+function _onAfterDialogShow() {
+  _classPrivateFieldGet(_focusDetector, this).deactivate();
+}
+/**
+ * Called after the dialog is hidden. It sets the active context for the shortcuts.
+ */
+function _onAfterDialogHide() {
+  _classPrivateFieldGet(_focusDetector, this).activate();
 }