handsontable 0.0.0-next-f86a877-20250819 → 0.0.0-next-fce5825-20250822

package/dist/handsontable.js

@@ -25,8 +25,8 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-f86a877-20250819
- * Release date: 10/07/2025 (built at 19/08/2025 13:12:52)
+ * Version: 0.0.0-next-fce5825-20250822
+ * Release date: 10/07/2025 (built at 22/08/2025 10:30:06)
  */
 (function webpackUniversalModuleDefinition(root, factory) {
 	if(typeof exports === 'object' && typeof module === 'object')
@@ -104,8 +104,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "19/08/2025 13:12:52";
-Handsontable.version = "0.0.0-next-f86a877-20250819";
+Handsontable.buildDate = "22/08/2025 10:30:06";
+Handsontable.version = "0.0.0-next-fce5825-20250822";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,
@@ -332,6 +332,14 @@ function Core(rootContainer, userSettings) {
    */
   this.rootWrapperElement = undefined;
 
+  /**
+   * Reference to the grid element.
+   *
+   * @private
+   * @type {HTMLElement}
+   */
+  this.rootGridElement = undefined;
+
   /**
    * Reference to the portal element.
    *
@@ -366,10 +374,13 @@ function Core(rootContainer, userSettings) {
   this.rootWindow = this.rootDocument.defaultView;
   if ((0, _rootInstance.isRootInstance)(this)) {
     this.rootWrapperElement = this.rootDocument.createElement('div');
+    this.rootGridElement = this.rootDocument.createElement('div');
     this.rootPortalElement = this.rootDocument.createElement('div');
     (0, _element.addClass)(this.rootElement, ['ht-wrapper', 'handsontable']);
     (0, _element.addClass)(this.rootWrapperElement, 'ht-root-wrapper');
-    this.rootWrapperElement.appendChild(this.rootElement);
+    (0, _element.addClass)(this.rootGridElement, 'ht-grid');
+    this.rootGridElement.appendChild(this.rootElement);
+    this.rootWrapperElement.appendChild(this.rootGridElement);
     this.rootContainer.appendChild(this.rootWrapperElement);
     (0, _element.addClass)(this.rootPortalElement, 'ht-portal');
     this.rootDocument.body.appendChild(this.rootPortalElement);
@@ -482,9 +493,6 @@ function Core(rootContainer, userSettings) {
   const pluginsRegistry = (0, _uniqueMap.createUniqueMap)();
   this.container = this.rootDocument.createElement('div');
   this.rootElement.insertBefore(this.container, this.rootElement.firstChild);
-  if ((0, _rootInstance.isRootInstance)(this)) {
-    (0, _mixed._injectProductInfo)(mergedUserSettings.licenseKey, this.rootWrapperElement);
-  }
   this.guid = `ht_${(0, _string.randomString)()}`; // this is the namespace for global events
 
   foreignHotInstances.set(this.guid, this);
@@ -1321,6 +1329,7 @@ function Core(rootContainer, userSettings) {
     if ((0, _rootInstance.isRootInstance)(this)) {
       (0, _index.installFocusCatcher)(instance);
       (0, _a11yAnnouncer.install)(instance.rootPortalElement);
+      (0, _mixed._injectProductInfo)(mergedUserSettings.licenseKey, this.rootWrapperElement);
     }
     instance.runHooks('init');
     this.render();
@@ -10485,6 +10494,8 @@ module.exports = __WEBPACK_EXTERNAL_MODULE__161__;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 exports._injectProductInfo = _injectProductInfo;
+exports.getMostBottomEndPosition = getMostBottomEndPosition;
+exports.getMostTopStartPosition = getMostTopStartPosition;
 exports.isDefined = isDefined;
 exports.isEmpty = isEmpty;
 exports.isRegExp = isRegExp;
@@ -10616,7 +10627,7 @@ const domMessages = {
 function _injectProductInfo(key, element) {
   const hasValidType = !isEmpty(key);
   const isNonCommercial = typeof key === 'string' && key.toLowerCase() === 'non-commercial-and-evaluation';
-  const hotVersion = "0.0.0-next-f86a877-20250819";
+  const hotVersion = "0.0.0-next-fce5825-20250822";
   let keyValidityDate;
   let consoleMessageState = 'invalid';
   let domMessageState = 'invalid';
@@ -10690,6 +10701,67 @@ function _checkKeySchema(v) {
   }
   return p === z;
 }
+
+/**
+ * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostTopStartPosition(hot) {
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
+  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
+  if (topRow === 0) {
+    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
+  }
+  if (startColumn === 0) {
+    startColumn = columnIndexMapper.getVisualFromRenderableIndex(startColumn);
+  }
+  if (topRow === null || startColumn === null) {
+    return null;
+  }
+  return hot._createCellCoords(topRow, startColumn);
+}
+
+/**
+ * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
+ *
+ * @param {Core} hot The Handsontable instance.
+ * @returns {CellCoords|null}
+ */
+function getMostBottomEndPosition(hot) {
+  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
+  const {
+    rowIndexMapper,
+    columnIndexMapper
+  } = hot;
+  const {
+    navigableHeaders
+  } = hot.getSettings();
+  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
+  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
+  if (bottomRow < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    bottomRow = -1;
+  }
+  if (endColumn < 0) {
+    if (!navigableHeaders || hot.countColHeaders() === 0) {
+      return null;
+    }
+    endColumn = -1;
+  }
+  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
+}
+
 /* eslint-enable */
 
 /***/ }),
@@ -11230,6 +11302,8 @@ const A11Y_OPTION = () => ['role', 'option'];
 exports.A11Y_OPTION = A11Y_OPTION;
 const A11Y_CHECKBOX = () => ['role', 'checkbox'];
 exports.A11Y_CHECKBOX = A11Y_CHECKBOX;
+const A11Y_DIALOG = () => ['role', 'dialog'];
+exports.A11Y_DIALOG = A11Y_DIALOG;
 const A11Y_SCOPE_COL = () => ['scope', 'col'];
 exports.A11Y_SCOPE_COL = A11Y_SCOPE_COL;
 const A11Y_SCOPE_ROW = () => ['scope', 'row'];
@@ -11283,6 +11357,8 @@ const A11Y_SETSIZE = val => ['aria-setsize', val];
 exports.A11Y_SETSIZE = A11Y_SETSIZE;
 const A11Y_POSINSET = val => ['aria-posinset', val];
 exports.A11Y_POSINSET = A11Y_POSINSET;
+const A11Y_MODAL = () => ['aria-modal', 'true'];
+exports.A11Y_MODAL = A11Y_MODAL;
 
 /***/ }),
 /* 169 */
@@ -15355,6 +15431,7 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @param {'from_above' | 'from_below'} tabActivationDir The browsers Tab navigation direction. Depending on
  * whether the user activated the table from the element above or below, another cell can be selected.
  * @param {CellCoords} visualCoords The coords that will be used to select a cell.
+ * @returns {undefined|boolean} If `false` is returned, the table will not be focused.
  */
 'modifyFocusOnTabNavigation',
 /**
@@ -16525,6 +16602,63 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * Returning `true` removes those restrictions.
  */
 'beforeBeginEditing',
+/**
+ * Fired by {@link Dialog} plugin after hiding the dialog. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#afterDialogHide
+ */
+'afterDialogHide',
+/**
+ * Fired by {@link Dialog} plugin after showing the dialog. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#afterDialogShow
+ */
+'afterDialogShow',
+/**
+ * Fired by {@link Dialog} plugin before hiding the dialog. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#beforeDialogHide
+ */
+'beforeDialogHide',
+/**
+ * Fired by {@link Dialog} plugin before showing the dialog. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#beforeDialogShow
+ */
+'beforeDialogShow',
+/**
+ * Fired by {@link Dialog} plugin before focusing the previous element. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#dialogFocusPreviousElement
+ */
+'dialogFocusPreviousElement',
+/**
+ * Fired by {@link Dialog} plugin before focusing the next element. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#dialogFocusNextElement
+ */
+'dialogFocusNextElement',
+/**
+ * Fired by {@link Dialog} plugin when the focus is set. This hook is fired when {@link Options#dialog}
+ * option is enabled.
+ *
+ * @since 16.1.0
+ * @event Hooks#afterDialogFocus
+ * @param {'tab_from_above' | 'tab_from_below' | 'click' | 'show'} focusSource The source of the focus.
+ */
+'afterDialogFocus',
 /**
  * Fired after the editor is opened and rendered.
  *
@@ -19129,6 +19263,7 @@ class TableView {
    */
   registerEvents() {
     const {
+      rootWrapperElement,
       rootElement,
       rootDocument,
       selection,
@@ -19162,15 +19297,19 @@ class TableView {
       }
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
+      var _rootDocument$querySe;
       if (selection.isInProgress() && (0, _event.isLeftClick)(event)) {
         selection.finish();
       }
       _classPrivateFieldSet(_mouseDown, this, false);
       const isOutsideInputElement = (0, _element.isOutsideInput)(rootDocument.activeElement);
-      if ((0, _element.isInput)(rootDocument.activeElement) && !isOutsideInputElement) {
+      // TODO: This is a workaround to prevent the unlisten event from being triggered when the active element is inside a dialog.
+      // Should be removed when the focus manager is implemented.
+      const isInsideDialog = (_rootDocument$querySe = rootDocument.querySelector('.ht-dialog')) === null || _rootDocument$querySe === void 0 ? void 0 : _rootDocument$querySe.contains(rootDocument.activeElement);
+      if ((0, _element.isInput)(rootDocument.activeElement) && !isOutsideInputElement || isInsideDialog) {
         return;
       }
-      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !(0, _event.isRightClick)(event)) {
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !(rootWrapperElement !== null && rootWrapperElement !== void 0 ? rootWrapperElement : rootElement).contains(event.target) && !(0, _event.isRightClick)(event)) {
         this.hot.unlisten();
       }
     });
@@ -36866,6 +37005,7 @@ Object.keys(_highlight).forEach(function (key) {
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 __webpack_require__(5);
+__webpack_require__(87);
 __webpack_require__(101);
 __webpack_require__(112);
 __webpack_require__(114);
@@ -36895,6 +37035,15 @@ function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("C
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 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"); }
+/**
+ * @typedef {object} SelectionState
+ * @property {CellRange[]} ranges The array of all ranges.
+ * @property {CellRange} activeRange The active range.
+ * @property {number} activeSelectionLayer The active selection layer.
+ * @property {number[]} selectedByRowHeader The state of the selected row headers.
+ * @property {number[]} selectedByColumnHeader The state of the selected column headers.
+ * @property {boolean} disableHeadersHighlight The state of the disable headers highlight.
+ */
 /**
  * @class Selection
  * @util
@@ -37216,6 +37365,7 @@ class Selection {
     // We are creating copy. We would like to modify just the start of the selection by below hook. Then original coords
     // should be handled by next methods.
     const coordsClone = coords.clone();
+    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
     _classPrivateFieldSet(_isFocusSelectionChanged, this, false);
     this.runLocalHooks(`beforeSetRangeStart${fragment ? 'Only' : ''}`, coordsClone);
     if (!isMultipleMode || isMultipleMode && !isMultipleSelection && (0, _mixed.isUndefined)(multipleSelection)) {
@@ -37813,7 +37963,6 @@ class Selection {
       focusPosition,
       disableHeadersHighlight
     } = options;
-    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     if (focusPosition && Number.isInteger(focusPosition === null || focusPosition === void 0 ? void 0 : focusPosition.row) && Number.isInteger(focusPosition === null || focusPosition === void 0 ? void 0 : focusPosition.col)) {
       highlight = this.tableProps.createCellCoords((0, _number.clamp)(focusPosition.row, rowFrom, nrOfRows - 1), (0, _number.clamp)(focusPosition.col, columnFrom, nrOfColumns - 1));
     }
@@ -37822,6 +37971,7 @@ class Selection {
     this.clear();
     this.runLocalHooks('beforeSelectAll', startCoords, endCoords, highlight);
     this.setRangeStartOnly(startCoords, undefined, highlight);
+    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
     if (columnFrom < 0) {
       this.selectedByRowHeader.add(this.getLayerLevel());
     }
@@ -37831,7 +37981,6 @@ class Selection {
     this.setRangeEnd(endCoords);
     this.runLocalHooks('afterSelectAll', startCoords, endCoords, highlight);
     this.finish();
-    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
   }
 
   /**
@@ -37998,6 +38147,57 @@ class Selection {
     return isValid;
   }
 
+  /**
+   * Allows importing the selection for all layers from the provided array of CellRange objects.
+   * The method clears the current selection and sets the new one without triggering any
+   * selection related hooks.
+   *
+   * @param {SelectionState} selectionState The selection state to import.
+   */
+  importSelection(_ref) {
+    let {
+      ranges,
+      activeRange,
+      activeSelectionLayer,
+      selectedByRowHeader,
+      selectedByColumnHeader,
+      disableHeadersHighlight
+    } = _ref;
+    if (ranges.length === 0) {
+      return;
+    }
+    this.selectedRange.clear();
+    this.highlight.clear();
+    this.inProgress = true;
+    _classPrivateFieldSet(_disableHeadersHighlight, this, disableHeadersHighlight);
+    this.selectedByRowHeader = new Set(selectedByRowHeader);
+    this.selectedByColumnHeader = new Set(selectedByColumnHeader);
+    this.setActiveSelectionLayerIndex(0);
+    ranges.forEach((cellRange, selectionLayerIndex) => {
+      this.selectedRange.push(cellRange);
+      this.applyAndCommit(cellRange, selectionLayerIndex);
+    });
+    this.setRangeFocus(activeRange.highlight, activeSelectionLayer);
+    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
+    this.inProgress = false;
+  }
+
+  /**
+   * Exports all selection layers with other properties related to the selection state.
+   *
+   * @returns {SelectionState}
+   */
+  exportSelection() {
+    return {
+      ranges: Array.from(this.selectedRange).map(range => range.clone()),
+      activeRange: this.getActiveSelectedRange(),
+      activeSelectionLayer: this.getActiveSelectionLayerIndex(),
+      selectedByRowHeader: Array.from(this.selectedByRowHeader),
+      selectedByColumnHeader: Array.from(this.selectedByColumnHeader),
+      disableHeadersHighlight: _classPrivateFieldGet(_disableHeadersHighlight, this)
+    };
+  }
+
   /**
    * Refreshes the whole selection by clearing, reapplying and committing (calculating visual to renderable indexes)
    * the selection by using already added visual ranges. The method can be useful when underneath some indexes
@@ -39165,6 +39365,17 @@ class SelectionRange {
     return this;
   }
 
+  /**
+   * Pushes a new CellRange instance to the collection.
+   *
+   * @param {CellRange} cellRange The CellRange instance with defined visual coordinates.
+   * @returns {SelectionRange}
+   */
+  push(cellRange) {
+    this.ranges.push(cellRange);
+    return this;
+  }
+
   /**
    * Removes from the stack the last added coordinates.
    *
@@ -40042,9 +40253,10 @@ function normalizeSelectionFactory(type) {
       rowEnd = Math.max(origRowStart, origRowEnd);
       columnEnd = Math.max(origColumnStart, origColumnEnd);
     }
+    const highlight = isObjectType ? selection.highlight.clone() : createCellCoords(rowStart, columnStart);
     const from = createCellCoords(rowStart, columnStart);
     const to = createCellCoords(rowEnd, columnEnd);
-    return createCellRange(from, from, to);
+    return createCellRange(highlight, from, to);
   };
 }
 
@@ -43646,6 +43858,101 @@ var _default = () => {
      * ```
      */
     disableVisualSelection: false,
+    /**
+     * @description
+     * The `dialog` option configures the [`Dialog`](@/api/dialog.md) plugin.
+     *
+     * You can set the `dialog` option to one of the following:
+     *
+     * | Setting   | Description                                                                 |
+     * | --------- | --------------------------------------------------------------------------- |
+     * | `false`   | Disable the [`Dialog`](@/api/dialog.md) plugin                              |
+     * | `true`    | Enable the [`Dialog`](@/api/dialog.md) plugin with default options          |
+     *
+     * ##### dialog: Additional options
+     *
+     * | Option                   | Possible settings                                                                                      | Description                             |
+     * | ------------------------ | ------------------------------------------------------------------------------------------------------ | ----------------------------------------|
+     * | `content`                | A string, HTMLElement or DocumentFragment (default: `''`)                                              | The content of the dialog               |
+     * | `customClassName`        | A string (default: `''`)                                                                               | The custom class name of the dialog     |
+     * | `background`             | One of the options: `'solid'` or `'semi-transparent'` (default: `'solid'`)                             | The background of the dialog            |
+     * | `contentBackground`      | Boolean (default: `false`)                                                                             | Whether to show the content background  |
+     * | `contentDirections`      | One of the options: `'row'` or `'row-reverse'` or `'column'` or `'column-reverse'` (default: `'row'`)  | The direction of the content            |
+     * | `animation`              | Boolean (default: `true`)                                                                              | Whether to show the animation           |
+     * | `closable`               | Boolean (default: `false`)                                                                             | Whether to show the close button        |
+     *
+     * Read more:
+     * - [Plugins: `Dialog`](@/api/dialog.md)
+     *
+     * @since 16.1.0
+     * @memberof Options#
+     * @type {boolean|object}
+     * @default false
+     * @category Dialog
+     *
+     * @example
+     * ::: only-for javascript
+     * ```js
+     * // enable the Dialog plugin with default option
+     * dialog: true,
+     *
+     * // enable the Dialog plugin with custom configuration
+     * dialog: {
+     *   content: 'Dialog content',
+     *   customClassName: 'custom-dialog',
+     *   background: 'semi-transparent',
+     *   contentBackground: false,
+     *   contentDirections: 'column',
+     *   animation: false,
+     *   closable: true,
+     * }
+     * ```
+     * :::
+     *
+     * ::: only-for react
+     * ```jsx
+     * // enable the Dialog plugin with default option
+     * <HotTable
+     *   dialog={true}
+     * />
+     *
+     * // enable the Dialog plugin with custom configuration
+     * <HotTable
+     *   dialog={{
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }}
+     * />
+     * ```
+     * :::
+     *
+     * ::: only-for angular
+     * ```ts
+     * settings = {
+     *   dialog: {
+     *     content: 'Dialog content',
+     *     customClassName: 'custom-dialog',
+     *     background: 'semi-transparent',
+     *     contentBackground: false,
+     *     contentDirections: 'column',
+     *     animation: false,
+     *     closable: true,
+     *   }
+     * };
+     * ```
+     *
+     * ```html
+     * <hot-table [settings]="settings" />
+     * ```
+     * :::
+     *
+     */
+    dialog: false,
     /**
      * @description
      * The `dragToScroll` option configures the [`DragToScroll`](@/api/dragToScroll.md) plugin.
@@ -48088,6 +48395,7 @@ exports.installFocusCatcher = installFocusCatcher;
 var _shortcutContexts = __webpack_require__(360);
 var _focusDetector = __webpack_require__(412);
 var _utils = __webpack_require__(413);
+var _mixed = __webpack_require__(162);
 /**
  * Installs a focus catcher module. The module observes when the table is focused and depending on
  * from the which side it was focused on it selects a specified cell or releases the TAB navigation
@@ -48101,22 +48409,26 @@ function installFocusCatcher(hot) {
   const {
     activate,
     deactivate
-  } = (0, _focusDetector.installFocusDetector)(hot, {
-    onFocusFromTop() {
-      var _clampCoordsIfNeeded;
-      const mostTopStartCoords = (_clampCoordsIfNeeded = clampCoordsIfNeeded(recentlyAddedFocusCoords)) !== null && _clampCoordsIfNeeded !== void 0 ? _clampCoordsIfNeeded : (0, _utils.getMostTopStartPosition)(hot);
-      if (mostTopStartCoords) {
-        hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
-        hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
-      }
-      hot.listen();
-    },
-    onFocusFromBottom() {
-      var _clampCoordsIfNeeded2;
-      const mostBottomEndCoords = (_clampCoordsIfNeeded2 = clampCoordsIfNeeded(recentlyAddedFocusCoords)) !== null && _clampCoordsIfNeeded2 !== void 0 ? _clampCoordsIfNeeded2 : (0, _utils.getMostBottomEndPosition)(hot);
-      if (mostBottomEndCoords) {
-        hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
-        hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+  } = (0, _focusDetector.installFocusDetector)(hot, hot.rootGridElement, {
+    onFocus(from) {
+      if (from === 'from_above') {
+        var _clampCoordsIfNeeded;
+        const mostTopStartCoords = (_clampCoordsIfNeeded = clampCoordsIfNeeded(recentlyAddedFocusCoords)) !== null && _clampCoordsIfNeeded !== void 0 ? _clampCoordsIfNeeded : (0, _mixed.getMostTopStartPosition)(hot);
+        if (mostTopStartCoords) {
+          const result = hot.runHooks('modifyFocusOnTabNavigation', 'from_above', mostTopStartCoords);
+          if (result !== false) {
+            hot.selectCell(mostTopStartCoords.row, mostTopStartCoords.col);
+          }
+        }
+      } else {
+        var _clampCoordsIfNeeded2;
+        const mostBottomEndCoords = (_clampCoordsIfNeeded2 = clampCoordsIfNeeded(recentlyAddedFocusCoords)) !== null && _clampCoordsIfNeeded2 !== void 0 ? _clampCoordsIfNeeded2 : (0, _mixed.getMostBottomEndPosition)(hot);
+        if (mostBottomEndCoords) {
+          const result = hot.runHooks('modifyFocusOnTabNavigation', 'from_below', mostBottomEndCoords);
+          if (result !== false) {
+            hot.selectCell(mostBottomEndCoords.row, mostBottomEndCoords.col);
+          }
+        }
       }
       hot.listen();
     }
@@ -48128,8 +48440,20 @@ function installFocusCatcher(hot) {
   let isSavingCoordsEnabled = true;
   let isTabOrShiftTabPressed = false;
   let preventViewportScroll = false;
-  hot.addHook('afterListen', () => deactivate());
-  hot.addHook('afterUnlisten', () => activate());
+  hot.addHook('afterListen', () => {
+    const activeContextName = hot.getShortcutManager().getActiveContextName();
+    const activeContext = hot.getShortcutManager().getContext(activeContextName);
+    if ((activeContext === null || activeContext === void 0 ? void 0 : activeContext.scope) === 'table') {
+      deactivate();
+    }
+  });
+  hot.addHook('afterUnlisten', () => {
+    const activeContextName = hot.getShortcutManager().getActiveContextName();
+    const activeContext = hot.getShortcutManager().getContext(activeContextName);
+    if ((activeContext === null || activeContext === void 0 ? void 0 : activeContext.scope) === 'table') {
+      activate();
+    }
+  });
   hot.addHook('afterSelection', (row, column, row2, column2, preventScrolling) => {
     if (isTabOrShiftTabPressed && (rowWrapState.wrapped && rowWrapState.flipped || preventViewportScroll)) {
       preventViewportScroll = false;
@@ -48187,7 +48511,7 @@ function installFocusCatcher(hot) {
       isSavingCoordsEnabled = true;
       if (!tabNavigation || !hot.selection.isSelected() || autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped || !autoWrapRow && rowWrapState.wrapped) {
         if (autoWrapRow && rowWrapState.wrapped && rowWrapState.flipped) {
-          recentlyAddedFocusCoords = event.shiftKey ? (0, _utils.getMostTopStartPosition)(hot) : (0, _utils.getMostBottomEndPosition)(hot);
+          recentlyAddedFocusCoords = event.shiftKey ? (0, _mixed.getMostTopStartPosition)(hot) : (0, _mixed.getMostBottomEndPosition)(hot);
         }
         deactivateTable();
         return false;
@@ -48678,6 +49002,7 @@ class BaseEditor {
       this.hot.removeHook('afterScroll', openEditor);
       openEditor();
     }
+    this.addHook('beforeDialogShow', () => this.cancelChanges());
   }
 
   /**
@@ -50440,6 +50765,12 @@ exports.__esModule = true;
 exports.installFocusDetector = installFocusDetector;
 var _element = __webpack_require__(159);
 var _a11y = __webpack_require__(168);
+/**
+ * @typedef {object} FocusDetector
+ * @property {function(): void} activate Activates the focus detector.
+ * @property {function(): void} deactivate Deactivates the focus detector.
+ * @property {function('from_above' | 'from_below'): void} focus Focuses the input element in the given direction.
+ */
 /**
  * Installs a focus detector module. The module appends two input elements into the DOM side by side.
  * When the first input is focused, then it means that a user entered to the component using the TAB key
@@ -50447,19 +50778,31 @@ var _a11y = __webpack_require__(168);
  * the element below the table. Each action, once detected, triggers the specific hook.
  *
  * @param {Handsontable} hot The Handsontable instance.
- * @param {{ onFocusFromTop: Function, onFocusFromBottom: Function }} hooks An object with defined callbacks to call.
- * @returns {{ activate: Function, deactivate: Function }}
+ * @param {HTMLElement} wrapperElement The wrapper element to install the focus detector into.
+ * @param {{ onFocus: Function }} hooks An object with defined callbacks to call.
+ * @returns {FocusDetector}
  */
-function installFocusDetector(hot) {
-  let hooks = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-  const rootElement = hot.rootElement;
+function installFocusDetector(hot, wrapperElement) {
+  let hooks = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const inputTrapTop = createInputElement(hot);
   const inputTrapBottom = createInputElement(hot);
-  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromTop());
-  inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocusFromBottom());
-  rootElement.before(inputTrapTop);
-  rootElement.after(inputTrapBottom);
+  inputTrapTop.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_above'));
+  inputTrapBottom.addEventListener('focus', () => hooks === null || hooks === void 0 ? void 0 : hooks.onFocus('from_below'));
+  wrapperElement.prepend(inputTrapTop);
+  wrapperElement.append(inputTrapBottom);
   return {
+    /**
+     * Focuses the input element in the given direction.
+     *
+     * @param {string} direction The direction to focus the input element in.
+     */
+    focus(direction) {
+      if (direction === 'from_above') {
+        inputTrapTop.focus();
+      } else {
+        inputTrapBottom.focus();
+      }
+    },
     /**
      * Activates the detector by resetting the tabIndex of the input elements.
      */
@@ -50507,10 +50850,9 @@ function createInputElement(hot) {
 
 
 exports.__esModule = true;
-exports.getMostBottomEndPosition = getMostBottomEndPosition;
-exports.getMostTopStartPosition = getMostTopStartPosition;
 exports.normalizeCoordsIfNeeded = normalizeCoordsIfNeeded;
 var _number = __webpack_require__(205);
+var _mixed = __webpack_require__(162);
 /**
  * Normalizes the coordinates (clamps to nearest visible cell position within dataset range).
  *
@@ -50529,74 +50871,14 @@ function normalizeCoordsIfNeeded(hot) {
     if (rowIndexMapper.isHidden(coords.row) || columnIndexMapper.isHidden(coords.col)) {
       return null;
     }
-    const mostTopStartCoords = getMostTopStartPosition(hot);
-    const mostBottomEndCoords = getMostBottomEndPosition(hot);
+    const mostTopStartCoords = (0, _mixed.getMostTopStartPosition)(hot);
+    const mostBottomEndCoords = (0, _mixed.getMostBottomEndPosition)(hot);
     coords.row = (0, _number.clamp)(coords.row, mostTopStartCoords.row, mostBottomEndCoords.row);
     coords.col = (0, _number.clamp)(coords.col, mostTopStartCoords.col, mostBottomEndCoords.col);
     return coords;
   };
 }
 
-/**
- * Gets the coordinates of the most top-start cell or header (depends on the table settings and its size).
- *
- * @param {Core} hot The Handsontable instance.
- * @returns {CellCoords|null}
- */
-function getMostTopStartPosition(hot) {
-  const {
-    rowIndexMapper,
-    columnIndexMapper
-  } = hot;
-  const {
-    navigableHeaders
-  } = hot.getSettings();
-  let topRow = navigableHeaders && hot.countColHeaders() > 0 ? -hot.countColHeaders() : 0;
-  let startColumn = navigableHeaders && hot.countRowHeaders() > 0 ? -hot.countRowHeaders() : 0;
-  if (topRow === 0) {
-    topRow = rowIndexMapper.getVisualFromRenderableIndex(topRow);
-  }
-  if (startColumn === 0) {
-    startColumn = columnIndexMapper.getVisualFromRenderableIndex(startColumn);
-  }
-  if (topRow === null || startColumn === null) {
-    return null;
-  }
-  return hot._createCellCoords(topRow, startColumn);
-}
-
-/**
- * Gets the coordinates of the most bottom-end cell or header (depends on the table settings and its size).
- *
- * @param {Core} hot The Handsontable instance.
- * @returns {CellCoords|null}
- */
-function getMostBottomEndPosition(hot) {
-  var _rowIndexMapper$getVi, _columnIndexMapper$ge;
-  const {
-    rowIndexMapper,
-    columnIndexMapper
-  } = hot;
-  const {
-    navigableHeaders
-  } = hot.getSettings();
-  let bottomRow = rowIndexMapper.getRenderableIndexesLength() - 1;
-  let endColumn = columnIndexMapper.getRenderableIndexesLength() - 1;
-  if (bottomRow < 0) {
-    if (!navigableHeaders || hot.countColHeaders() === 0) {
-      return null;
-    }
-    bottomRow = -1;
-  }
-  if (endColumn < 0) {
-    if (!navigableHeaders || hot.countColHeaders() === 0) {
-      return null;
-    }
-    endColumn = -1;
-  }
-  return hot._createCellCoords((_rowIndexMapper$getVi = rowIndexMapper.getVisualFromRenderableIndex(bottomRow)) !== null && _rowIndexMapper$getVi !== void 0 ? _rowIndexMapper$getVi : bottomRow, (_columnIndexMapper$ge = columnIndexMapper.getVisualFromRenderableIndex(endColumn)) !== null && _columnIndexMapper$ge !== void 0 ? _columnIndexMapper$ge : endColumn);
-}
-
 /***/ }),
 /* 414 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
@@ -51086,10 +51368,12 @@ const createShortcutManager = _ref => {
    *
    * @memberof ShortcutManager#
    * @param {string} contextName The name of the new shortcut context
+   * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
    * @returns {object}
    */
-  const addContext = contextName => {
-    const context = (0, _context.createContext)(contextName);
+  const addContext = function (contextName) {
+    let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
+    const context = (0, _context.createContext)(contextName, scope);
     CONTEXTS.addItem(contextName, context);
     return context;
   };
@@ -51189,12 +51473,24 @@ const createShortcutManager = _ref => {
     return isExecutionCancelled;
   };
 
+  /**
+   * Handle the event with the scope of the active context.
+   *
+   * @param {KeyboardEvent} event The keyboard event.
+   * @returns {boolean}
+   */
+  const handleEventWithScope = event => {
+    const context = getActiveContextName();
+    const activeContext = (0, _context.isContextObject)(context) ? context : getContext(context);
+    return handleEvent(event, activeContext.scope);
+  };
+
   /**
    * Internal key recorder.
    *
    * @private
    */
-  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEvent, beforeKeyDown, afterKeyDown, recorderCallback);
+  const keyRecorder = (0, _recorder.useRecorder)(ownerWindow, handleEventWithScope, beforeKeyDown, afterKeyDown, recorderCallback);
   keyRecorder.mount();
   return {
     addContext,
@@ -51268,9 +51564,11 @@ function isContextObject(objectToCheck) {
  * @alias ShortcutContext
  * @class ShortcutContext
  * @param {string} name The name of the keyboard shortcut context
+ * @param {string} [scope='table'] The scope of the shortcut: `'table'` or `'global'`
  * @returns {object}
  */
-const createContext = name => {
+const createContext = function (name) {
+  let scope = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'table';
   const SHORTCUTS = (0, _uniqueMap.createUniqueMap)({
     errorIdExists: keys => `The "${keys}" shortcut is already registered in the "${name}" context.`
   });
@@ -51446,6 +51744,7 @@ const createContext = name => {
   };
   return {
     __kindOf,
+    scope,
     addShortcut,
     addShortcuts,
     getShortcuts,
@@ -56961,18 +57260,20 @@ var _nestedRows = __webpack_require__(738);
 exports.NestedRows = _nestedRows.NestedRows;
 var _pagination = __webpack_require__(746);
 exports.Pagination = _pagination.Pagination;
-var _persistentState = __webpack_require__(753);
+var _persistentState = __webpack_require__(754);
 exports.PersistentState = _persistentState.PersistentState;
-var _search = __webpack_require__(756);
+var _search = __webpack_require__(757);
 exports.Search = _search.Search;
-var _stretchColumns = __webpack_require__(758);
+var _stretchColumns = __webpack_require__(759);
 exports.StretchColumns = _stretchColumns.StretchColumns;
-var _touchScroll = __webpack_require__(764);
+var _touchScroll = __webpack_require__(765);
 exports.TouchScroll = _touchScroll.TouchScroll;
-var _trimRows = __webpack_require__(766);
+var _trimRows = __webpack_require__(767);
 exports.TrimRows = _trimRows.TrimRows;
-var _undoRedo = __webpack_require__(768);
+var _undoRedo = __webpack_require__(769);
 exports.UndoRedo = _undoRedo.UndoRedo;
+var _dialog = __webpack_require__(786);
+exports.Dialog = _dialog.Dialog;
 var _registry = __webpack_require__(203);
 exports.registerPlugin = _registry.registerPlugin;
 exports.getPlugin = _registry.getPlugin;
@@ -57016,6 +57317,7 @@ function registerAllPlugins() {
   (0, _registry.registerPlugin)(_touchScroll.TouchScroll);
   (0, _registry.registerPlugin)(_trimRows.TrimRows);
   (0, _registry.registerPlugin)(_undoRedo.UndoRedo);
+  (0, _registry.registerPlugin)(_dialog.Dialog);
 }
 
 /***/ }),
@@ -57807,9 +58109,11 @@ var _registry3 = __webpack_require__(182);
 var _registry4 = __webpack_require__(208);
 var _registry5 = __webpack_require__(209);
 var _eventManager = _interopRequireDefault(__webpack_require__(194));
+var _console = __webpack_require__(184);
 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"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 function _classPrivateFieldGet(s, a) { return s.get(_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 DEPS_TYPE_CHECKERS = new Map([['plugin', _registry.hasPlugin], ['cell-type', _registry2.hasCellType], ['editor', _registry3.hasEditor], ['renderer', _registry4.hasRenderer], ['validator', _registry5.hasValidator]]);
@@ -57822,6 +58126,7 @@ let initializedPlugins = null;
  * @util
  * @property {Core} hot Handsontable instance.
  */
+var _pluginSettings = /*#__PURE__*/new WeakMap();
 var _hooks = /*#__PURE__*/new WeakMap();
 var _BasePlugin_brand = /*#__PURE__*/new WeakSet();
 class BasePlugin {
@@ -57852,9 +58157,18 @@ class BasePlugin {
   }
 
   /**
-   * The instance of the {@link EventManager} class.
+   * Validators for plugin settings.
    *
-   * @type {EventManager}
+   * @type {Function|object|null}
+   */
+  static get SETTINGS_VALIDATORS() {
+    return null;
+  }
+
+  /**
+   * Plugin settings.
+   *
+   * @type {object|null}
    */
 
   /**
@@ -57871,6 +58185,12 @@ class BasePlugin {
      * @returns {boolean}
      */
     _classPrivateMethodInitSpec(this, _BasePlugin_brand);
+    _classPrivateFieldInitSpec(this, _pluginSettings, null);
+    /**
+     * The instance of the {@link EventManager} class.
+     *
+     * @type {EventManager}
+     */
     (0, _defineProperty2.default)(this, "eventManager", new _eventManager.default(this));
     /**
      * @type {string}
@@ -57911,6 +58231,7 @@ class BasePlugin {
   }
   init() {
     this.pluginName = this.hot.getPluginName(this);
+    this.updatePluginSettings(this.hot.getSettings()[this.constructor.PLUGIN_KEY]);
     const pluginDeps = this.constructor.PLUGIN_DEPS;
     const deps = Array.isArray(pluginDeps) ? pluginDeps : [];
     if (deps.length > 0) {
@@ -57978,25 +58299,65 @@ class BasePlugin {
    * @returns {*}
    */
   getSetting(settingName) {
-    const pluginSettings = this.hot.getSettings()[this.constructor.PLUGIN_KEY];
     if (settingName === undefined) {
-      return pluginSettings;
+      return _classPrivateFieldGet(_pluginSettings, this);
     }
     const defaultSettings = this.constructor.DEFAULT_SETTINGS;
-    if ((Array.isArray(pluginSettings) || (0, _object.isObject)(pluginSettings)) && defaultSettings[defaultMainSettingSymbol] === settingName) {
-      var _pluginSettings$setti;
-      if (Array.isArray(pluginSettings)) {
-        return pluginSettings;
+    if ((Array.isArray(_classPrivateFieldGet(_pluginSettings, this)) || (0, _object.isObject)(_classPrivateFieldGet(_pluginSettings, this))) && defaultSettings[defaultMainSettingSymbol] === settingName) {
+      var _classPrivateFieldGet2;
+      if (Array.isArray(_classPrivateFieldGet(_pluginSettings, this))) {
+        return _classPrivateFieldGet(_pluginSettings, this);
       }
-      return (_pluginSettings$setti = pluginSettings[settingName]) !== null && _pluginSettings$setti !== void 0 ? _pluginSettings$setti : defaultSettings[settingName];
+      return (_classPrivateFieldGet2 = _classPrivateFieldGet(_pluginSettings, this)[settingName]) !== null && _classPrivateFieldGet2 !== void 0 ? _classPrivateFieldGet2 : defaultSettings[settingName];
     }
-    if ((0, _object.isObject)(pluginSettings)) {
-      var _pluginSettings$setti2;
-      return (_pluginSettings$setti2 = pluginSettings[settingName]) !== null && _pluginSettings$setti2 !== void 0 ? _pluginSettings$setti2 : defaultSettings[settingName];
+    if ((0, _object.isObject)(_classPrivateFieldGet(_pluginSettings, this))) {
+      var _classPrivateFieldGet3;
+      return (_classPrivateFieldGet3 = _classPrivateFieldGet(_pluginSettings, this)[settingName]) !== null && _classPrivateFieldGet3 !== void 0 ? _classPrivateFieldGet3 : defaultSettings[settingName];
     }
     return defaultSettings[settingName];
   }
 
+  /**
+   * Update plugin settings.
+   *
+   * @param {*} newSettings New settings.
+   * @returns {object} Updated settings object.
+   */
+  updatePluginSettings(newSettings) {
+    const settingsValidators = this.constructor.SETTINGS_VALIDATORS;
+    if (settingsValidators && typeof settingsValidators === 'function' && typeof newSettings !== 'object') {
+      const isValid = settingsValidators(newSettings);
+      if (isValid === false) {
+        (0, _console.warn)(`${this.pluginName} Plugin: option is not valid and it will be ignored.`);
+        return;
+      }
+      _classPrivateFieldSet(_pluginSettings, this, newSettings);
+      return _classPrivateFieldGet(_pluginSettings, this);
+    }
+    if (settingsValidators && typeof settingsValidators === 'object' && typeof newSettings === 'object') {
+      if (_classPrivateFieldGet(_pluginSettings, this) === null || typeof _classPrivateFieldGet(_pluginSettings, this) !== 'object') {
+        _classPrivateFieldSet(_pluginSettings, this, {
+          ...this.constructor.DEFAULT_SETTINGS
+        });
+      }
+      Object.keys(settingsValidators).forEach(key => {
+        if (!(key in newSettings)) {
+          return;
+        }
+        const validator = settingsValidators[key];
+        const isValid = validator ? validator(newSettings[key]) : true;
+        if (isValid === false) {
+          (0, _console.warn)(`${this.pluginName} Plugin: "${key}" option is not valid and it will be ignored.`);
+          return;
+        }
+        _classPrivateFieldGet(_pluginSettings, this)[key] = newSettings[key];
+      });
+      return _classPrivateFieldGet(_pluginSettings, this);
+    }
+    _classPrivateFieldSet(_pluginSettings, this, newSettings);
+    return newSettings;
+  }
+
   /**
    * Add listener to plugin hooks system.
    *
@@ -58074,6 +58435,7 @@ class BasePlugin {
         this.enablePlugin();
       }
       if (this.enabled && this.isEnabled() && relevantToSettings) {
+        this.updatePluginSettings(newSettings[this.constructor.PLUGIN_KEY]);
         this.updatePlugin(newSettings);
       }
     }
@@ -58091,6 +58453,7 @@ class BasePlugin {
    */
   destroy() {
     var _this$eventManager2;
+    _classPrivateFieldSet(_pluginSettings, this, null);
     (_this$eventManager2 = this.eventManager) === null || _this$eventManager2 === void 0 || _this$eventManager2.destroy();
     this.clearHooks();
     (0, _object.objectEach)(this, (value, property) => {
@@ -66579,6 +66942,7 @@ class ContextMenu extends _base.BasePlugin {
       return _this.executeCommand.call(_this, ...params);
     });
     this.addHook('afterOnCellContextMenu', event => _assertClassBrand(_ContextMenu_brand, this, _onAfterOnCellContextMenu).call(this, event));
+    this.addHook('beforeDialogShow', () => this.close());
     this.registerShortcuts();
     super.enablePlugin();
   }
@@ -71895,6 +72259,7 @@ class DropdownMenu extends _base.BasePlugin {
       }
       return _assertClassBrand(_DropdownMenu_brand, _this, _onBeforeViewportScrollHorizontally).call(_this, ...args);
     });
+    this.addHook('beforeDialogShow', () => this.close());
     const settings = this.hot.getSettings()[PLUGIN_KEY];
     const predefinedItems = {
       items: this.itemsFactory.getItems(settings)
@@ -95652,6 +96017,8 @@ var _a11yAnnouncer = __webpack_require__(432);
 var _strategies = __webpack_require__(750);
 var _templateLiteralTag = __webpack_require__(164);
 var _console = __webpack_require__(184);
+var _focusController2 = __webpack_require__(753);
+var _focusDetector2 = __webpack_require__(412);
 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"); }
@@ -95660,6 +96027,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.`;
 
@@ -95744,13 +96113,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);
     /**
@@ -95800,6 +96171,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.
@@ -95868,7 +96251,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,
@@ -95879,8 +96262,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.
@@ -95962,6 +96372,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();
   }
@@ -95983,9 +96405,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.
@@ -96241,6 +96663,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.
    */
@@ -96254,6 +96681,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();
@@ -96326,10 +96806,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
@@ -96480,6 +96966,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.
  */
@@ -96502,19 +97006,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.
  *
@@ -96523,6 +97014,27 @@ 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();
+}
 
 /***/ }),
 /* 748 */
@@ -96550,12 +97062,12 @@ function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
 function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
 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 TEMPLATE = `
-<div data-ref="container" class="ht-pagination-container handsontable">
-  <div class="ht-pagination-container__inner">
+<div data-ref="container" class="ht-pagination handsontable">
+  <div class="ht-pagination__inner">
     <div data-ref="pageSizeSection" class="ht-page-size-section">
       <span data-ref="pageSizeLabel" class="ht-page-size-section__label"></span>
       <div class="ht-page-size-section__select-wrapper">
-        <select data-ref="pageSizeSelect" name="pageSize"></select>
+        <select data-ref="pageSizeSelect" name="pageSize" data-hot-input></select>
       </div>
     </div>
     <div data-ref="pageCounterSection" class="ht-page-counter-section"></div>
@@ -96681,26 +97193,22 @@ class PaginationUI {
     _classPrivateFieldSet(_refs, this, elements.refs);
     container.setAttribute('dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr');
     const isDisabled = event => event.currentTarget.disabled;
-    first.addEventListener('click', event => {
-      if (!isDisabled(event)) {
-        this.runLocalHooks('firstPageClick');
-      }
-    });
-    prev.addEventListener('click', event => {
-      if (!isDisabled(event)) {
-        this.runLocalHooks('prevPageClick');
-      }
-    });
-    next.addEventListener('click', event => {
-      if (!isDisabled(event)) {
-        this.runLocalHooks('nextPageClick');
-      }
-    });
-    last.addEventListener('click', event => {
-      if (!isDisabled(event)) {
-        this.runLocalHooks('lastPageClick');
-      }
-    });
+    const addClickListener = (eventName, element, callback) => {
+      element.addEventListener(eventName, event => {
+        if (!isDisabled(event)) {
+          callback();
+        }
+      });
+    };
+    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);
@@ -96716,6 +97224,31 @@ class PaginationUI {
     }
   }
 
+  /**
+   * Gets the pagination element.
+   *
+   * @returns {HTMLElement} The pagination element.
+   */
+  getContainer() {
+    return _classPrivateFieldGet(_refs, this).container;
+  }
+
+  /**
+   * Gets the focusable elements.
+   *
+   * @returns {HTMLElement[]} The focusable elements.
+   */
+  getFocusableElements() {
+    const {
+      first,
+      prev,
+      next,
+      last,
+      pageSizeSelect
+    } = _classPrivateFieldGet(_refs, this);
+    return [pageSizeSelect, first, prev, next, last].filter(element => !element.disabled);
+  }
+
   /**
    * Updates the width of the pagination container.
    *
@@ -96766,9 +97299,9 @@ class PaginationUI {
       container
     } = _classPrivateFieldGet(_refs, this);
     if (_classPrivateFieldGet(_uiContainer, this) || _classPrivateFieldGet(_shouldHaveBorder, this).call(this)) {
-      (0, _element.addClass)(container, 'ht-pagination-container--bordered');
+      (0, _element.addClass)(container, 'ht-pagination--bordered');
     } else {
-      (0, _element.removeClass)(container, 'ht-pagination-container--bordered');
+      (0, _element.removeClass)(container, 'ht-pagination--bordered');
     }
     return this;
   }
@@ -96824,7 +97357,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, _element.setAttribute)(pageSizeSelect, [...[(0, _a11y.A11Y_LABEL)(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))], ...[(0, _a11y.A11Y_TABINDEX)(-1)]]);
     _classPrivateFieldGet(_a11yAnnouncer, this).call(this, navLabelText);
     this.refreshBorderState();
     pageSizeList.forEach(pageSizeItem => {
@@ -96837,40 +97370,42 @@ class PaginationUI {
     });
     const isFirstPage = currentPage === 1;
     const isLastPage = currentPage === totalPages;
-    const activeElement = _classPrivateFieldGet(_rootElement, this).ownerDocument.activeElement;
-    if (isFirstPage) {
-      (0, _element.addClass)(first, 'ht-page-navigation-section__button--disabled');
-      (0, _element.addClass)(prev, 'ht-page-navigation-section__button--disabled');
-      first.disabled = true;
-      prev.disabled = true;
-    } else {
-      (0, _element.removeClass)(first, 'ht-page-navigation-section__button--disabled');
-      (0, _element.removeClass)(prev, 'ht-page-navigation-section__button--disabled');
-      first.disabled = false;
-      prev.disabled = false;
-    }
-    if (isLastPage) {
-      (0, _element.addClass)(next, 'ht-page-navigation-section__button--disabled');
-      (0, _element.addClass)(last, 'ht-page-navigation-section__button--disabled');
-      next.disabled = true;
-      last.disabled = true;
-    } else {
-      (0, _element.removeClass)(next, 'ht-page-navigation-section__button--disabled');
-      (0, _element.removeClass)(last, 'ht-page-navigation-section__button--disabled');
-      next.disabled = false;
-      last.disabled = false;
-    }
-    if ([first, prev, next, last].includes(activeElement)) {
-      if (prev.disabled) {
-        next.focus();
-      } else if (next.disabled) {
-        prev.focus();
-      }
-    }
-    (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)]]);
+    if (pageNavSection.style.display !== 'none') {
+      const activeElement = _classPrivateFieldGet(_rootElement, this).ownerDocument.activeElement;
+      if (isFirstPage) {
+        (0, _element.addClass)(first, 'ht-page-navigation-section__button--disabled');
+        (0, _element.addClass)(prev, 'ht-page-navigation-section__button--disabled');
+        first.disabled = true;
+        prev.disabled = true;
+      } else {
+        (0, _element.removeClass)(first, 'ht-page-navigation-section__button--disabled');
+        (0, _element.removeClass)(prev, 'ht-page-navigation-section__button--disabled');
+        first.disabled = false;
+        prev.disabled = false;
+      }
+      if (isLastPage) {
+        (0, _element.addClass)(next, 'ht-page-navigation-section__button--disabled');
+        (0, _element.addClass)(last, 'ht-page-navigation-section__button--disabled');
+        next.disabled = true;
+        last.disabled = true;
+      } else {
+        (0, _element.removeClass)(next, 'ht-page-navigation-section__button--disabled');
+        (0, _element.removeClass)(last, 'ht-page-navigation-section__button--disabled');
+        next.disabled = false;
+        last.disabled = false;
+      }
+      if ([first, prev, next, last].includes(activeElement)) {
+        if (prev.disabled) {
+          next.focus();
+        } else if (next.disabled) {
+          prev.focus();
+        }
+      }
+    }
+    (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)]]);
     return this;
   }
 
@@ -96881,7 +97416,12 @@ class PaginationUI {
    * @returns {PaginationUI} The instance of the PaginationUI for method chaining.
    */
   setPageSizeSectionVisibility(isVisible) {
-    _classPrivateFieldGet(_refs, this).pageSizeSection.style.display = isVisible ? '' : 'none';
+    const {
+      pageSizeSection,
+      pageSizeSelect
+    } = _classPrivateFieldGet(_refs, this);
+    pageSizeSection.style.display = isVisible ? '' : 'none';
+    pageSizeSelect.disabled = !isVisible;
     _assertClassBrand(_PaginationUI_brand, this, _updateContainerVisibility).call(this);
     return this;
   }
@@ -96905,7 +97445,18 @@ class PaginationUI {
    * @returns {PaginationUI} The instance of the PaginationUI for method chaining.
    */
   setNavigationSectionVisibility(isVisible) {
-    _classPrivateFieldGet(_refs, this).pageNavSection.style.display = isVisible ? '' : 'none';
+    const {
+      pageNavSection,
+      first,
+      prev,
+      next,
+      last
+    } = _classPrivateFieldGet(_refs, this);
+    pageNavSection.style.display = isVisible ? '' : 'none';
+    first.disabled = !isVisible;
+    prev.disabled = !isVisible;
+    next.disabled = !isVisible;
+    last.disabled = !isVisible;
     _assertClassBrand(_PaginationUI_brand, this, _updateContainerVisibility).call(this);
     return this;
   }
@@ -96931,9 +97482,9 @@ function _updateContainerVisibility() {
   // adds or removes the corner around the Handsontable root element
   if (!_classPrivateFieldGet(_uiContainer, this)) {
     if (isSectionVisible) {
-      (0, _element.addClass)(_classPrivateFieldGet(_rootElement, this), 'htPagination');
+      (0, _element.addClass)(_classPrivateFieldGet(_rootElement, this).querySelector('.ht-wrapper'), 'htPagination');
     } else {
-      (0, _element.removeClass)(_classPrivateFieldGet(_rootElement, this), 'htPagination');
+      (0, _element.removeClass)(_classPrivateFieldGet(_rootElement, this).querySelector('.ht-wrapper'), 'htPagination');
     }
   }
   container.style.display = isSectionVisible ? '' : 'none';
@@ -97202,13 +97753,46 @@ exports.AutoPageSizeStrategy = AutoPageSizeStrategy;
 
 
 exports.__esModule = true;
-var _persistentState = __webpack_require__(754);
+exports.createPaginationFocusController = createPaginationFocusController;
+var _paginator = __webpack_require__(585);
+/**
+ * Creates a pagination focus controller instance.
+ *
+ * @private
+ * @param {object} options The options for the pagination focus controller.
+ * @param {HTMLElement[]} options.focusableElements The focusable elements.
+ * @returns {PaginationController} The pagination controller instance.
+ */
+function createPaginationFocusController(_ref) {
+  let {
+    focusableElements
+  } = _ref;
+  const navigator = (0, _paginator.createPaginator)({
+    initialPage: 0,
+    size: () => focusableElements().length,
+    onItemSelect: currentIndex => {
+      const elements = focusableElements();
+      elements[currentIndex].focus();
+    }
+  });
+  return navigator;
+}
+
+/***/ }),
+/* 754 */
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+var _persistentState = __webpack_require__(755);
 exports.PLUGIN_KEY = _persistentState.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _persistentState.PLUGIN_PRIORITY;
 exports.PersistentState = _persistentState.PersistentState;
 
 /***/ }),
-/* 754 */
+/* 755 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -97218,7 +97802,7 @@ var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
 var _base = __webpack_require__(520);
-var _storage = _interopRequireDefault(__webpack_require__(755));
+var _storage = _interopRequireDefault(__webpack_require__(756));
 var _hooks = __webpack_require__(183);
 _hooks.Hooks.getSingleton().register('persistentStateSave');
 _hooks.Hooks.getSingleton().register('persistentStateLoad');
@@ -97359,7 +97943,7 @@ class PersistentState extends _base.BasePlugin {
 exports.PersistentState = PersistentState;
 
 /***/ }),
-/* 755 */
+/* 756 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -97483,20 +98067,20 @@ class Storage {
 var _default = exports["default"] = Storage;
 
 /***/ }),
-/* 756 */
+/* 757 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 
 exports.__esModule = true;
-var _search = __webpack_require__(757);
+var _search = __webpack_require__(758);
 exports.PLUGIN_KEY = _search.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _search.PLUGIN_PRIORITY;
 exports.Search = _search.Search;
 
 /***/ }),
-/* 757 */
+/* 758 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -97804,20 +98388,20 @@ function _onBeforeRenderer(TD, row, col, prop, value, cellProperties) {
 }
 
 /***/ }),
-/* 758 */
+/* 759 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 
 exports.__esModule = true;
-var _stretchColumns = __webpack_require__(759);
+var _stretchColumns = __webpack_require__(760);
 exports.PLUGIN_KEY = _stretchColumns.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _stretchColumns.PLUGIN_PRIORITY;
 exports.StretchColumns = _stretchColumns.StretchColumns;
 
 /***/ }),
-/* 759 */
+/* 760 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -97828,7 +98412,7 @@ __webpack_require__(5);
 __webpack_require__(125);
 __webpack_require__(145);
 var _base = __webpack_require__(520);
-var _calculator = __webpack_require__(760);
+var _calculator = __webpack_require__(761);
 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"); }
@@ -98058,7 +98642,7 @@ function _onBeforeRender(fullRender) {
 }
 
 /***/ }),
-/* 760 */
+/* 761 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -98070,8 +98654,8 @@ __webpack_require__(125);
 __webpack_require__(145);
 var _src = __webpack_require__(211);
 var _element = __webpack_require__(159);
-var _all = __webpack_require__(761);
-var _last = __webpack_require__(763);
+var _all = __webpack_require__(762);
+var _last = __webpack_require__(764);
 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"); }
@@ -98231,7 +98815,7 @@ function _overwriteColumnWidthFn(columnWidth, columnVisualIndex) {
 }
 
 /***/ }),
-/* 761 */
+/* 762 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -98243,7 +98827,7 @@ __webpack_require__(125);
 __webpack_require__(145);
 __webpack_require__(165);
 var _src = __webpack_require__(211);
-var _base = __webpack_require__(762);
+var _base = __webpack_require__(763);
 /**
  * The strategy calculates the column widths by stretching all columns evenly.
  *
@@ -98308,7 +98892,7 @@ class StretchAllStrategy extends _base.StretchStrategy {
 exports.StretchAllStrategy = StretchAllStrategy;
 
 /***/ }),
-/* 762 */
+/* 763 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -98397,7 +98981,7 @@ class StretchStrategy {
 exports.StretchStrategy = StretchStrategy;
 
 /***/ }),
-/* 763 */
+/* 764 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -98407,7 +98991,7 @@ exports.__esModule = true;
 __webpack_require__(5);
 __webpack_require__(125);
 __webpack_require__(165);
-var _base = __webpack_require__(762);
+var _base = __webpack_require__(763);
 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"); }
 function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
@@ -98482,20 +99066,20 @@ class StretchLastStrategy extends _base.StretchStrategy {
 exports.StretchLastStrategy = StretchLastStrategy;
 
 /***/ }),
-/* 764 */
+/* 765 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 
 exports.__esModule = true;
-var _touchScroll = __webpack_require__(765);
+var _touchScroll = __webpack_require__(766);
 exports.PLUGIN_KEY = _touchScroll.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _touchScroll.PLUGIN_PRIORITY;
 exports.TouchScroll = _touchScroll.TouchScroll;
 
 /***/ }),
-/* 765 */
+/* 766 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -98684,20 +99268,20 @@ function _onAfterMomentumScroll() {
 }
 
 /***/ }),
-/* 766 */
+/* 767 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 
 exports.__esModule = true;
-var _trimRows = __webpack_require__(767);
+var _trimRows = __webpack_require__(768);
 exports.PLUGIN_KEY = _trimRows.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _trimRows.PLUGIN_PRIORITY;
 exports.TrimRows = _trimRows.TrimRows;
 
 /***/ }),
-/* 767 */
+/* 768 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99090,20 +99674,20 @@ function _onMapInit() {
 }
 
 /***/ }),
-/* 768 */
+/* 769 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
 
 exports.__esModule = true;
-var _undoRedo = __webpack_require__(769);
+var _undoRedo = __webpack_require__(770);
 exports.PLUGIN_KEY = _undoRedo.PLUGIN_KEY;
 exports.PLUGIN_PRIORITY = _undoRedo.PLUGIN_PRIORITY;
 exports.UndoRedo = _undoRedo.UndoRedo;
 
 /***/ }),
-/* 769 */
+/* 770 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99126,7 +99710,7 @@ var _hooks = __webpack_require__(183);
 var _object = __webpack_require__(170);
 var _templateLiteralTag = __webpack_require__(164);
 var _console = __webpack_require__(184);
-var _actions = __webpack_require__(770);
+var _actions = __webpack_require__(771);
 function _classPrivateMethodInitSpec(e, a) { _checkPrivateRedeclaration(e, a), a.add(e); }
 function _checkPrivateRedeclaration(e, t) { if (t.has(e)) throw new TypeError("Cannot initialize the same private elements twice on an 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"); }
@@ -99496,7 +100080,7 @@ function _removeAPIFromCore() {
 }
 
 /***/ }),
-/* 770 */
+/* 771 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99504,18 +100088,18 @@ function _removeAPIFromCore() {
 
 exports.__esModule = true;
 exports.registerActions = registerActions;
-var _cellAlignment = __webpack_require__(771);
-var _columnMove = __webpack_require__(773);
-var _columnSort = __webpack_require__(774);
-var _createColumn = __webpack_require__(775);
-var _createRow = __webpack_require__(776);
-var _dataChange = __webpack_require__(777);
-var _filters = __webpack_require__(778);
-var _mergeCells = __webpack_require__(779);
-var _removeColumn = __webpack_require__(780);
-var _removeRow = __webpack_require__(782);
-var _rowMove = __webpack_require__(783);
-var _unmergeCells = __webpack_require__(784);
+var _cellAlignment = __webpack_require__(772);
+var _columnMove = __webpack_require__(774);
+var _columnSort = __webpack_require__(775);
+var _createColumn = __webpack_require__(776);
+var _createRow = __webpack_require__(777);
+var _dataChange = __webpack_require__(778);
+var _filters = __webpack_require__(779);
+var _mergeCells = __webpack_require__(780);
+var _removeColumn = __webpack_require__(781);
+var _removeRow = __webpack_require__(783);
+var _rowMove = __webpack_require__(784);
+var _unmergeCells = __webpack_require__(785);
 /**
  * Register all undo/redo actions.
  *
@@ -99527,7 +100111,7 @@ function registerActions(hot, undoRedoPlugin) {
 }
 
 /***/ }),
-/* 771 */
+/* 772 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99536,7 +100120,7 @@ function registerActions(hot, undoRedoPlugin) {
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 var _utils = __webpack_require__(560);
 var _array = __webpack_require__(167);
 /**
@@ -99616,7 +100200,7 @@ class CellAlignmentAction extends _base.BaseAction {
 exports.CellAlignmentAction = CellAlignmentAction;
 
 /***/ }),
-/* 772 */
+/* 773 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99650,7 +100234,7 @@ class BaseAction {
 exports.BaseAction = BaseAction;
 
 /***/ }),
-/* 773 */
+/* 774 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99661,7 +100245,7 @@ exports.__esModule = true;
 __webpack_require__(125);
 __webpack_require__(145);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 var _moves = __webpack_require__(674);
 /**
  * Action that tracks column move changes.
@@ -99738,7 +100322,7 @@ class ColumnMoveAction extends _base.BaseAction {
 exports.ColumnMoveAction = ColumnMoveAction;
 
 /***/ }),
-/* 774 */
+/* 775 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99747,7 +100331,7 @@ exports.ColumnMoveAction = ColumnMoveAction;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks column sort changes.
  *
@@ -99815,7 +100399,7 @@ class ColumnSortAction extends _base.BaseAction {
 exports.ColumnSortAction = ColumnSortAction;
 
 /***/ }),
-/* 775 */
+/* 776 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99824,7 +100408,7 @@ exports.ColumnSortAction = ColumnSortAction;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks column creation.
  *
@@ -99879,7 +100463,7 @@ class CreateColumnAction extends _base.BaseAction {
 exports.CreateColumnAction = CreateColumnAction;
 
 /***/ }),
-/* 776 */
+/* 777 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99888,7 +100472,7 @@ exports.CreateColumnAction = CreateColumnAction;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks row creation.
  *
@@ -99948,7 +100532,7 @@ class CreateRowAction extends _base.BaseAction {
 exports.CreateRowAction = CreateRowAction;
 
 /***/ }),
-/* 777 */
+/* 778 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -99962,7 +100546,7 @@ __webpack_require__(191);
 __webpack_require__(145);
 __webpack_require__(165);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 var _object = __webpack_require__(170);
 /**
  * Action that tracks data changes.
@@ -100075,7 +100659,7 @@ class DataChangeAction extends _base.BaseAction {
 exports.DataChangeAction = DataChangeAction;
 
 /***/ }),
-/* 778 */
+/* 779 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100086,7 +100670,7 @@ exports.__esModule = true;
 __webpack_require__(125);
 __webpack_require__(136);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks filter changes.
  *
@@ -100145,7 +100729,7 @@ class FiltersAction extends _base.BaseAction {
 exports.FiltersAction = FiltersAction;
 
 /***/ }),
-/* 779 */
+/* 780 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100154,7 +100738,7 @@ exports.FiltersAction = FiltersAction;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks changes in merged cells.
  *
@@ -100215,7 +100799,7 @@ class MergeCellsAction extends _base.BaseAction {
 exports.MergeCellsAction = MergeCellsAction;
 
 /***/ }),
-/* 780 */
+/* 781 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100227,8 +100811,8 @@ __webpack_require__(87);
 __webpack_require__(125);
 __webpack_require__(145);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
-var _utils = __webpack_require__(781);
+var _base = __webpack_require__(773);
+var _utils = __webpack_require__(782);
 var _number = __webpack_require__(205);
 var _array = __webpack_require__(167);
 /**
@@ -100402,7 +100986,7 @@ class RemoveColumnAction extends _base.BaseAction {
 exports.RemoveColumnAction = RemoveColumnAction;
 
 /***/ }),
-/* 781 */
+/* 782 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100445,7 +101029,7 @@ function getCellMetas(hot, fromRow, toRow, fromColumn, toColumn) {
 }
 
 /***/ }),
-/* 782 */
+/* 783 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100457,8 +101041,8 @@ __webpack_require__(87);
 __webpack_require__(125);
 __webpack_require__(145);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
-var _utils = __webpack_require__(781);
+var _base = __webpack_require__(773);
+var _utils = __webpack_require__(782);
 var _object = __webpack_require__(170);
 /**
  * Action that tracks changes in row removal.
@@ -100576,7 +101160,7 @@ class RemoveRowAction extends _base.BaseAction {
 exports.RemoveRowAction = RemoveRowAction;
 
 /***/ }),
-/* 783 */
+/* 784 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100587,7 +101171,7 @@ exports.__esModule = true;
 __webpack_require__(125);
 __webpack_require__(145);
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 var _moves = __webpack_require__(674);
 /**
  * Action that tracks row move changes.
@@ -100664,7 +101248,7 @@ class RowMoveAction extends _base.BaseAction {
 exports.RowMoveAction = RowMoveAction;
 
 /***/ }),
-/* 784 */
+/* 785 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100673,7 +101257,7 @@ exports.RowMoveAction = RowMoveAction;
 var _interopRequireDefault = __webpack_require__(1);
 exports.__esModule = true;
 var _defineProperty2 = _interopRequireDefault(__webpack_require__(176));
-var _base = __webpack_require__(772);
+var _base = __webpack_require__(773);
 /**
  * Action that tracks changes in merged cells.
  *
@@ -100727,7 +101311,741 @@ class UnmergeCellsAction extends _base.BaseAction {
 exports.UnmergeCellsAction = UnmergeCellsAction;
 
 /***/ }),
-/* 785 */
+/* 786 */
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+var _dialog = __webpack_require__(787);
+exports.PLUGIN_KEY = _dialog.PLUGIN_KEY;
+exports.PLUGIN_PRIORITY = _dialog.PLUGIN_PRIORITY;
+exports.Dialog = _dialog.Dialog;
+
+/***/ }),
+/* 787 */
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+exports.__esModule = true;
+__webpack_require__(5);
+var _base = __webpack_require__(520);
+var _ui2 = __webpack_require__(788);
+var _focusDetector2 = __webpack_require__(412);
+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"); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+function _classPrivateFieldGet(s, a) { return s.get(_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 = 'dialog';
+const PLUGIN_PRIORITY = exports.PLUGIN_PRIORITY = 340;
+const SHORTCUTS_GROUP = PLUGIN_KEY;
+const SHORTCUTS_CONTEXT_NAME = `plugin:${PLUGIN_KEY}`;
+
+/* eslint-disable jsdoc/require-description-complete-sentence */
+/**
+ * @plugin Dialog
+ * @class Dialog
+ *
+ * @description
+ * The dialog plugin provides a modal dialog system for Handsontable. It allows you to display custom content in modal dialogs
+ * that overlay the table, providing a way to show notifications, error messages, loading indicators, or any other interactive content.
+ *
+ * In order to enable the dialog mechanism, {@link Options#dialog} option must be set to `true`.
+ *
+ * The plugin provides several configuration options to customize the dialog behavior and appearance:
+ * - `content`: The string or HTMLElement content to display in the dialog (default: '')
+ * - `customClassName`: Custom class name to apply to the dialog (default: '')
+ * - `background`: Dialog background variant 'solid' | 'semi-transparent' (default: 'solid')
+ * - `contentBackground`: Whether to show content background (default: false)
+ * - `contentDirections`: Content layout direction 'row' | 'row-reverse' | 'column' | 'column-reverse' (default: 'row')
+ * - `animation`: Whether to enable animations (default: true)
+ * - `closable`: Whether the dialog can be closed (default: false)
+ *
+ * @example
+ *
+ * ::: only-for javascript
+ * ```js
+ * // Enable dialog plugin with default options
+ * dialog: true,
+ *
+ * // Enable dialog plugin with custom configuration
+ * dialog: {
+ *   content: 'Dialog content',
+ *   customClassName: 'custom-dialog',
+ *   background: 'semi-transparent',
+ *   contentBackground: false,
+ *   contentDirections: 'column',
+ *   animation: false,
+ *   closable: true,
+ * }
+ *
+ * // Access to dialog plugin instance:
+ * const dialogPlugin = hot.getPlugin('dialog');
+ *
+ * // Show a dialog programmatically:
+ * dialogPlugin.show({
+ *    content: '<h2>Custom Dialog</h2><p>This is a custom dialog content.</p>',
+ *    closable: true,
+ *    contentDirections: 'column',
+ * });
+ *
+ * // Hide the dialog programmatically:
+ * dialogPlugin.hide();
+ *
+ * // Check if dialog is visible:
+ * const isVisible = dialogPlugin.isVisible();
+ * ```
+ * :::
+ *
+ * ::: only-for react
+ * ```jsx
+ * const MyComponent = () => {
+ *   const hotRef = useRef(null);
+ *
+ *   useEffect(() => {
+ *     const hot = hotRef.current.hotInstance;
+ *     const dialogPlugin = hot.getPlugin('dialog');
+ *
+ *     dialogPlugin.show({
+ *       content: <div>
+ *         <h2>React Dialog</h2>
+ *         <p>Dialog content rendered with React</p>
+ *       </div>,
+ *       closable: true
+ *     });
+ *   }, []);
+ *
+ *   return (
+ *     <HotTable
+ *       ref={hotRef}
+ *       settings={{
+ *         data: data,
+ *         dialog: {
+ *           customClassName: 'react-dialog',
+ *           contentDirections: 'column',
+ *           closable: true
+ *         }
+ *       }}
+ *     />
+ *   );
+ * }
+ * ```
+ * :::
+ *
+ * ::: only-for angular
+ * ```html
+ * <hot-table
+ *   [settings]="hotSettings">
+ * </hot-table>
+ * ```
+ *
+ * ```ts
+ * @Component({
+ *   // ... component decorator
+ * })
+ * export class MyComponent implements OnInit {
+ *   @ViewChild('hot') hot: HotTableComponent;
+ *
+ *   hotSettings: Handsontable.GridSettings = {
+ *     data: data,
+ *     dialog: {
+ *       customClassName: 'angular-dialog',
+ *       contentDirections: 'column',
+ *       closable: true
+ *     }
+ *   };
+ *
+ *   ngOnInit() {
+ *     const dialogPlugin = this.hot.hotInstance.getPlugin('dialog');
+ *
+ *     dialogPlugin.show({
+ *       content: `
+ *         <div>
+ *           <h2>Angular Dialog</h2>
+ *           <p>Dialog content in Angular component</p>
+ *         </div>
+ *       `,
+ *       closable: true
+ *     });
+ *   }
+ * }
+ * ```
+ * :::
+ */
+var _ui = /*#__PURE__*/new WeakMap();
+var _isVisible = /*#__PURE__*/new WeakMap();
+var _focusDetector = /*#__PURE__*/new WeakMap();
+var _selectionState = /*#__PURE__*/new WeakMap();
+var _Dialog_brand = /*#__PURE__*/new WeakSet();
+class Dialog extends _base.BasePlugin {
+  constructor() {
+    super(...arguments);
+    /**
+     * Register shortcuts responsible for closing the dialog and navigating through the dialog.
+     */
+    _classPrivateMethodInitSpec(this, _Dialog_brand);
+    /**
+     * UI instance of the dialog plugin.
+     *
+     * @type {DialogUI}
+     */
+    _classPrivateFieldInitSpec(this, _ui, null);
+    /**
+     * Flag indicating if dialog is currently visible.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isVisible, false);
+    /**
+     * Focus detector instance.
+     *
+     * @type {FocusDetector}
+     */
+    _classPrivateFieldInitSpec(this, _focusDetector, null);
+    /**
+     * Keeps the selection state that will be restored after the dialog is closed.
+     *
+     * @type {SelectionState | null}
+     */
+    _classPrivateFieldInitSpec(this, _selectionState, null);
+  }
+  static get PLUGIN_KEY() {
+    return PLUGIN_KEY;
+  }
+  static get PLUGIN_PRIORITY() {
+    return PLUGIN_PRIORITY;
+  }
+  static get DEFAULT_SETTINGS() {
+    return {
+      content: '',
+      customClassName: '',
+      background: 'solid',
+      contentBackground: false,
+      contentDirections: 'row',
+      animation: true,
+      closable: false
+    };
+  }
+  static get SETTINGS_VALIDATORS() {
+    return {
+      content: value => typeof value === 'string' || typeof HTMLElement !== 'undefined' && value instanceof HTMLElement || typeof DocumentFragment !== 'undefined' && value instanceof DocumentFragment,
+      customClassName: value => typeof value === 'string',
+      background: value => ['solid', 'semi-transparent'].includes(value),
+      contentBackground: value => typeof value === 'boolean',
+      contentDirections: value => ['row', 'row-reverse', 'column', 'column-reverse'].includes(value),
+      animation: value => typeof value === 'boolean',
+      closable: value => typeof value === 'boolean'
+    };
+  }
+  /**
+   * Check if the plugin is enabled in the handsontable settings.
+   *
+   * @returns {boolean}
+   */
+  isEnabled() {
+    return !!this.hot.getSettings()[PLUGIN_KEY];
+  }
+
+  /**
+   * Enable plugin for this Handsontable instance.
+   */
+  enablePlugin() {
+    if (this.enabled) {
+      return;
+    }
+    if (!_classPrivateFieldGet(_ui, this)) {
+      _classPrivateFieldSet(_ui, this, new _ui2.DialogUI({
+        rootElement: this.hot.rootGridElement,
+        isRtl: this.hot.isRtl()
+      }));
+      _classPrivateFieldGet(_ui, this).addLocalHook('clickDialogElement', () => _assertClassBrand(_Dialog_brand, this, _onDialogClick).call(this));
+      _classPrivateFieldSet(_focusDetector, this, (0, _focusDetector2.installFocusDetector)(this.hot, _classPrivateFieldGet(_ui, this).getDialogElement(), {
+        onFocus: from => {
+          this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+          this.hot.runHooks('afterDialogFocus', `tab_${from}`);
+          _classPrivateFieldGet(_focusDetector, this).deactivate();
+          this.hot.listen();
+        }
+      }));
+    }
+    _assertClassBrand(_Dialog_brand, this, _registerShortcuts).call(this);
+    this.addHook('modifyFocusOnTabNavigation', from => _assertClassBrand(_Dialog_brand, this, _onFocusTabNavigation).call(this, from), 1);
+    this.addHook('afterViewRender', () => _assertClassBrand(_Dialog_brand, this, _onAfterRender).call(this));
+    super.enablePlugin();
+  }
+
+  /**
+   * Update plugin state after Handsontable settings update.
+   */
+  updatePlugin() {
+    this.disablePlugin();
+    this.enablePlugin();
+    super.updatePlugin();
+  }
+
+  /**
+   * Disable plugin for this Handsontable instance.
+   */
+  disablePlugin() {
+    this.hide();
+    _assertClassBrand(_Dialog_brand, this, _unregisterShortcuts).call(this);
+    super.disablePlugin();
+  }
+  /**
+   * Check if the dialog is currently visible.
+   *
+   * @returns {boolean} True if the dialog is visible, false otherwise.
+   */
+  isVisible() {
+    return _classPrivateFieldGet(_isVisible, this);
+  }
+
+  /**
+   * Show dialog with given configuration.
+   * Displays the dialog with the specified content and options.
+   *
+   * @param {object} options Dialog configuration object containing content and display options.
+   * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
+   * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
+   * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
+   * @param {boolean} options.contentBackground Whether to show content background. Default: false.
+   * @param {'row'|'row-reverse'|'column'|'column-reverse'} options.contentDirections Content layout direction. Default: 'row'.
+   * @param {boolean} options.animation Whether to enable animations when showing/hiding the dialog. Default: true.
+   * @param {boolean} options.closable Whether the dialog can be closed by user interaction. Default: false.
+   */
+  show() {
+    let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    if (!this.enabled) {
+      return;
+    }
+    if (this.isVisible()) {
+      this.update(options);
+      return;
+    }
+    this.hot.runHooks('beforeDialogShow');
+    this.update(options);
+    _classPrivateFieldGet(_ui, this).showDialog(this.getSetting('animation'));
+    _classPrivateFieldSet(_isVisible, this, true);
+    _classPrivateFieldSet(_selectionState, this, this.hot.selection.exportSelection());
+    this.hot.deselectCell();
+    this.hot.runHooks('afterDialogShow');
+    const {
+      activeElement
+    } = this.hot.rootDocument;
+    if (this.hot.rootWrapperElement.contains(activeElement) || this.hot.rootPortalElement.contains(activeElement)) {
+      this.hot.unlisten();
+      this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+      this.hot.listen();
+      _classPrivateFieldGet(_focusDetector, this).activate();
+      this.hot.runHooks('afterDialogFocus', 'show');
+    }
+  }
+
+  /**
+   * Hide the currently open dialog.
+   * Closes the dialog and restores the focus to the table.
+   */
+  hide() {
+    if (!this.isVisible()) {
+      return;
+    }
+    this.hot.runHooks('beforeDialogHide');
+    _classPrivateFieldGet(_ui, this).hideDialog(this.getSetting('animation'));
+    this.hot.getShortcutManager().setActiveContextName('grid');
+    _classPrivateFieldSet(_isVisible, this, false);
+    _classPrivateFieldGet(_focusDetector, this).activate();
+    if (_classPrivateFieldGet(_selectionState, this)) {
+      this.hot.selection.importSelection(_classPrivateFieldGet(_selectionState, this));
+      this.hot.view.render();
+      _classPrivateFieldSet(_selectionState, this, null);
+    } else {
+      this.hot.selectCell(0, 0);
+    }
+    this.hot.runHooks('afterDialogHide');
+  }
+
+  /**
+   * Update the dialog configuration.
+   *
+   * @param {object} options Dialog configuration object containing content and display options.
+   * @param {string|HTMLElement|DocumentFragment} options.content The content to display in the dialog. Can be a string, HTMLElement, or DocumentFragment. Default: ''
+   * @param {string} options.customClassName Custom CSS class name to apply to the dialog container. Default: ''
+   * @param {'solid'|'semi-transparent'} options.background Dialog background variant. Default: 'solid'.
+   * @param {boolean} options.contentBackground Whether to show content background. Default: false.
+   * @param {'row'|'row-reverse'|'column'|'column-reverse'} options.contentDirections Content layout direction. Default: 'row'.
+   * @param {boolean} options.animation Whether to enable animations when showing/hiding the dialog. Default: true.
+   * @param {boolean} options.closable Whether the dialog can be closed by user interaction. Default: false.
+   */
+  update(options) {
+    if (!this.enabled) {
+      return;
+    }
+    this.updatePluginSettings(options);
+    _classPrivateFieldGet(_ui, this).updateDialog({
+      isVisible: this.isVisible(),
+      content: this.getSetting('content'),
+      customClassName: this.getSetting('customClassName'),
+      background: this.getSetting('background'),
+      contentBackground: this.getSetting('contentBackground'),
+      contentDirections: this.getSetting('contentDirections'),
+      animation: this.getSetting('animation')
+    });
+  }
+
+  /**
+   * Handle focus tab navigation event.
+   *
+   * @param {'from_above' | 'from_below'} from The direction from which the focus was modified.
+   * @returns {boolean} Returns `false` to prevent the default focus behavior.
+   */
+
+  /**
+   * Destroy dialog and reset plugin state.
+   */
+  destroy() {
+    var _classPrivateFieldGet2;
+    (_classPrivateFieldGet2 = _classPrivateFieldGet(_ui, this)) === null || _classPrivateFieldGet2 === void 0 || _classPrivateFieldGet2.destroyDialog();
+    _classPrivateFieldSet(_ui, this, null);
+    _classPrivateFieldSet(_isVisible, this, false);
+    _classPrivateFieldSet(_focusDetector, this, null);
+    _classPrivateFieldSet(_selectionState, this, null);
+    super.destroy();
+  }
+}
+exports.Dialog = Dialog;
+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);
+  pluginContext.addShortcut({
+    keys: [['Escape']],
+    callback: () => {
+      this.hide();
+    },
+    runOnlyIf: () => _classPrivateFieldGet(_isVisible, this) && this.getSetting('closable'),
+    group: SHORTCUTS_GROUP
+  });
+  pluginContext.addShortcut({
+    keys: [['Shift', 'Tab'], ['Tab']],
+    preventDefault: false,
+    callback: event => {
+      this.hot._registerTimeout(() => {
+        const {
+          activeElement
+        } = this.hot.rootDocument;
+        if (!_classPrivateFieldGet(_ui, this).isInsideDialog(activeElement)) {
+          _classPrivateFieldGet(_focusDetector, this).activate();
+          this.hot.unlisten();
+          return;
+        }
+        if (event.shiftKey) {
+          this.hot.runHooks('dialogFocusPreviousElement');
+        } else {
+          this.hot.runHooks('dialogFocusNextElement');
+        }
+      }, 0);
+    },
+    group: SHORTCUTS_GROUP
+  });
+}
+/**
+ * Unregister shortcuts responsible for closing the dialog and navigating through the dialog.
+ */
+function _unregisterShortcuts() {
+  const shortcutManager = this.hot.getShortcutManager();
+  const pluginContext = shortcutManager.getContext(SHORTCUTS_CONTEXT_NAME);
+  pluginContext.removeShortcutsByGroup(SHORTCUTS_GROUP);
+}
+function _onFocusTabNavigation(from) {
+  if (this.isVisible()) {
+    _classPrivateFieldGet(_focusDetector, this).focus(from);
+    return false;
+  }
+}
+/**
+ * Handle dialog click event.
+ */
+function _onDialogClick() {
+  if (this.isVisible() && !this.hot.isListening()) {
+    this.hot.getShortcutManager().setActiveContextName(SHORTCUTS_CONTEXT_NAME);
+    this.hot.runHooks('afterDialogFocus', 'click');
+  }
+  _classPrivateFieldGet(_focusDetector, this).activate();
+  this.hot.listen();
+}
+/**
+ * Called after the rendering of the table is completed. It updates the width and
+ * height of the dialog container to the same size as the table.
+ */
+function _onAfterRender() {
+  const {
+    view,
+    rootWrapperElement,
+    rootWindow
+  } = this.hot;
+  const width = view.isHorizontallyScrollableByWindow() ? view.getTotalTableWidth() : view.getWorkspaceWidth();
+  _classPrivateFieldGet(_ui, this).updateWidth(width);
+  const dialogInfo = rootWrapperElement.querySelector('.hot-display-license-info');
+  if (dialogInfo) {
+    const height = dialogInfo.offsetHeight;
+    const marginTop = parseFloat(rootWindow.getComputedStyle(dialogInfo).marginTop);
+    _classPrivateFieldGet(_ui, this).updateHeight(height + marginTop);
+  }
+}
+
+/***/ }),
+/* 788 */
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+var _interopRequireDefault = __webpack_require__(1);
+exports.__esModule = true;
+__webpack_require__(5);
+var _templateLiteralTag = __webpack_require__(164);
+var _object = __webpack_require__(170);
+var _localHooks = _interopRequireDefault(__webpack_require__(274));
+var _element = __webpack_require__(159);
+var _a11y = __webpack_require__(168);
+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"); }
+function _classPrivateFieldGet(s, a) { return s.get(_assertClassBrand(s, a)); }
+function _classPrivateFieldSet(s, a, r) { return s.set(_assertClassBrand(s, a), r), r; }
+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 DIALOG_CLASS_NAME = 'ht-dialog';
+const TEMPLATE = `
+<div data-ref="dialogElement" class="${DIALOG_CLASS_NAME}">
+  <div data-ref="contentWrapperElement" class="${DIALOG_CLASS_NAME}__content-wrapper">
+    <div data-ref="contentElement" class="${DIALOG_CLASS_NAME}__content"></div>
+  </div>
+</div>
+`;
+
+/**
+ * DialogUI is a UI component that renders and manages dialog elements.
+ * It handles dialog creation, content updates, visibility toggling, and styling.
+ *
+ * @private
+ * @class DialogUI
+ */
+var _rootElement = /*#__PURE__*/new WeakMap();
+var _refs = /*#__PURE__*/new WeakMap();
+var _isRtl = /*#__PURE__*/new WeakMap();
+class DialogUI {
+  constructor(_ref) {
+    let {
+      rootElement,
+      isRtl
+    } = _ref;
+    /**
+     * The root element where the dialog UI will be installed.
+     *
+     * @type {HTMLElement}
+     */
+    _classPrivateFieldInitSpec(this, _rootElement, void 0);
+    /**
+     * The references to the UI elements.
+     *
+     * @type {object}
+     */
+    _classPrivateFieldInitSpec(this, _refs, void 0);
+    /**
+     * Indicates if the UI is in RTL mode.
+     *
+     * @type {boolean}
+     */
+    _classPrivateFieldInitSpec(this, _isRtl, false);
+    _classPrivateFieldSet(_rootElement, this, rootElement);
+    _classPrivateFieldSet(_isRtl, this, isRtl);
+    this.install();
+  }
+
+  /**
+   * Creates the dialog UI elements and sets up the structure.
+   */
+  install() {
+    var _classPrivateFieldGet2;
+    if ((_classPrivateFieldGet2 = _classPrivateFieldGet(_refs, this)) !== null && _classPrivateFieldGet2 !== void 0 && _classPrivateFieldGet2.dialogElement) {
+      return;
+    }
+    const elements = (0, _templateLiteralTag.html)`${TEMPLATE}`;
+    _classPrivateFieldSet(_refs, this, elements.refs);
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.addEventListener('click', () => this.runLocalHooks('clickDialogElement'));
+
+    // Set ARIA attributes
+    (0, _element.setAttribute)(dialogElement, [(0, _a11y.A11Y_DIALOG)(), (0, _a11y.A11Y_MODAL)(), (0, _a11y.A11Y_TABINDEX)(-1), ['dir', _classPrivateFieldGet(_isRtl, this) ? 'rtl' : 'ltr']]);
+
+    // Append to Handsontable after table grid element
+    _classPrivateFieldGet(_rootElement, this).after(elements.fragment);
+  }
+
+  /**
+   * Returns the dialog element.
+   *
+   * @returns {HTMLElement} The dialog element.
+   */
+  getDialogElement() {
+    return _classPrivateFieldGet(_refs, this).dialogElement;
+  }
+
+  /**
+   * Checks if the given element is inside the dialog.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} Returns `true` if the element is inside the dialog, `false` otherwise.
+   */
+  isInsideDialog(element) {
+    return _classPrivateFieldGet(_refs, this).dialogElement.contains(element);
+  }
+
+  /**
+   * Updates the dialog content and class name.
+   *
+   * @param {object} options - Class name update options.
+   * @param {boolean} options.isVisible - Whether the dialog is visible.
+   * @param {string|HTMLElement} options.content - The content to render in the dialog.
+   * @param {string} options.customClassName - The custom class name to add to the dialog.
+   * @param {string} options.background - The background to add to the dialog.
+   * @param {boolean} options.contentBackground - Whether to show content background.
+   * @param {string} options.contentDirections - The flex direction for content layout.
+   * @param {boolean} options.animation - Whether to add the animation class to the dialog.
+   *
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateDialog(_ref2) {
+    let {
+      isVisible,
+      content,
+      customClassName,
+      background,
+      contentBackground,
+      contentDirections,
+      animation
+    } = _ref2;
+    const {
+      dialogElement,
+      contentElement
+    } = _classPrivateFieldGet(_refs, this);
+
+    // Dialog class name
+    const customClass = customClassName ? ` ${customClassName}` : '';
+    const backgroundClass = background ? ` ${DIALOG_CLASS_NAME}--background-${background}` : '';
+    const animationClass = animation ? ` ${DIALOG_CLASS_NAME}--animation` : '';
+    const showClass = isVisible ? ` ${DIALOG_CLASS_NAME}--show` : '';
+
+    // Update dialog class name
+    dialogElement.className = `${DIALOG_CLASS_NAME}${customClass}${backgroundClass}${animationClass}${showClass}`;
+
+    // Dialog content class name
+    const contentBackgroundClass = contentBackground ? ` ${DIALOG_CLASS_NAME}__content--background` : '';
+    const contentDirectionsClass = contentDirections ? ` ${DIALOG_CLASS_NAME}__content--flex-${contentDirections}` : '';
+
+    // Update content class name
+    contentElement.className = `${DIALOG_CLASS_NAME}__content${contentBackgroundClass}${contentDirectionsClass}`;
+
+    // Clear existing dialog content
+    contentElement.innerHTML = '';
+
+    // Render new dialog content
+    if (typeof content === 'string') {
+      (0, _element.fastInnerHTML)(contentElement, content);
+    } else if (content instanceof HTMLElement || content instanceof DocumentFragment) {
+      contentElement.appendChild(content);
+    }
+    return this;
+  }
+
+  /**
+   * Shows the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  showDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    dialogElement.style.display = 'block';
+    if (animation) {
+      // Triggers style and layout recalculation, so the display: block is fully committed before adding
+      // the class ht-dialog--show.
+      // eslint-disable-next-line no-unused-expressions
+      dialogElement.offsetHeight;
+    }
+    (0, _element.addClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    return this;
+  }
+
+  /**
+   * Hides the dialog with optional animation.
+   *
+   * @param {boolean} animation - Whether to add the animation class to the dialog.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  hideDialog(animation) {
+    const {
+      dialogElement
+    } = _classPrivateFieldGet(_refs, this);
+    (0, _element.removeClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`);
+    if (animation) {
+      dialogElement.addEventListener('transitionend', () => {
+        if (!(0, _element.hasClass)(dialogElement, `${DIALOG_CLASS_NAME}--show`)) {
+          dialogElement.style.display = 'none';
+        }
+      }, {
+        once: true
+      });
+    } else {
+      dialogElement.style.display = 'none';
+    }
+    return this;
+  }
+
+  /**
+   * Updates the width of the dialog container to the same size as the table.
+   *
+   * @param {number} width - The width of the table.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateWidth(width) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.width = `${width}px`;
+    return this;
+  }
+
+  /**
+   * Updates the height of the dialog container.
+   *
+   * @param {number} licenseInfoHeight - The height of the license info.
+   * @returns {DialogUI} The instance of the DialogUI.
+   */
+  updateHeight(licenseInfoHeight) {
+    _classPrivateFieldGet(_refs, this).dialogElement.style.height = `calc(100% - ${licenseInfoHeight}px)`;
+    return this;
+  }
+
+  /**
+   * Removes the dialog UI elements from the DOM and clears the refs.
+   */
+  destroyDialog() {
+    var _classPrivateFieldGet3;
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_refs, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.dialogElement.remove();
+    _classPrivateFieldSet(_refs, this, null);
+  }
+}
+exports.DialogUI = DialogUI;
+(0, _object.mixin)(DialogUI, _localHooks.default);
+
+/***/ }),
+/* 789 */
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -100836,7 +102154,7 @@ exports.CellRange = _base.CellRange;
 var _registry = __webpack_require__(443);
 var _eventManager = _interopRequireWildcard(__webpack_require__(194));
 var _translations = __webpack_require__(295);
-var _jquery = _interopRequireDefault(__webpack_require__(785));
+var _jquery = _interopRequireDefault(__webpack_require__(789));
 var _ghostTable = _interopRequireDefault(__webpack_require__(522));
 var parseTableHelpers = _interopRequireWildcard(__webpack_require__(196));
 var arrayHelpers = _interopRequireWildcard(__webpack_require__(167));