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

package/plugins/pagination/ui.js

@@ -19,12 +19,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>
@@ -150,26 +150,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);
@@ -185,6 +181,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.
    *
@@ -235,9 +256,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;
   }
@@ -293,7 +314,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 => {
@@ -306,40 +327,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();
+    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, _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)]]);
+    (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;
   }
 
@@ -350,7 +373,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;
   }
@@ -374,7 +402,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;
   }
@@ -400,9 +439,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';

package/plugins/pagination/ui.mjs

@@ -12,14 +12,14 @@ import { mixin } from "../../helpers/object.mjs";
 import localHooks from "../../mixins/localHooks.mjs";
 import * as C from "../../i18n/constants.mjs";
 import { addClass, removeClass, setAttribute } from "../../helpers/dom/element.mjs";
-import { A11Y_DISABLED, A11Y_LABEL } from "../../helpers/a11y.mjs";
+import { A11Y_DISABLED, A11Y_LABEL, A11Y_TABINDEX } from "../../helpers/a11y.mjs";
 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>
@@ -145,26 +145,22 @@ export 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);
@@ -180,6 +176,31 @@ export 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.
    *
@@ -230,9 +251,9 @@ export class PaginationUI {
       container
     } = _classPrivateFieldGet(_refs, this);
     if (_classPrivateFieldGet(_uiContainer, this) || _classPrivateFieldGet(_shouldHaveBorder, this).call(this)) {
-      addClass(container, 'ht-pagination-container--bordered');
+      addClass(container, 'ht-pagination--bordered');
     } else {
-      removeClass(container, 'ht-pagination-container--bordered');
+      removeClass(container, 'ht-pagination--bordered');
     }
     return this;
   }
@@ -288,7 +309,7 @@ export class PaginationUI {
     pageSizeSelect.textContent = '';
     pageSizeLabel.textContent = `${pageSizeLabelText}:`;
     setAttribute(pageNavSection, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_SECTION))]]);
-    setAttribute(pageSizeSelect, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))]]);
+    setAttribute(pageSizeSelect, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PAGE_SIZE_SECTION))], ...[A11Y_TABINDEX(-1)]]);
     _classPrivateFieldGet(_a11yAnnouncer, this).call(this, navLabelText);
     this.refreshBorderState();
     pageSizeList.forEach(pageSizeItem => {
@@ -301,40 +322,42 @@ export class PaginationUI {
     });
     const isFirstPage = currentPage === 1;
     const isLastPage = currentPage === totalPages;
-    const activeElement = _classPrivateFieldGet(_rootElement, this).ownerDocument.activeElement;
-    if (isFirstPage) {
-      addClass(first, 'ht-page-navigation-section__button--disabled');
-      addClass(prev, 'ht-page-navigation-section__button--disabled');
-      first.disabled = true;
-      prev.disabled = true;
-    } else {
-      removeClass(first, 'ht-page-navigation-section__button--disabled');
-      removeClass(prev, 'ht-page-navigation-section__button--disabled');
-      first.disabled = false;
-      prev.disabled = false;
-    }
-    if (isLastPage) {
-      addClass(next, 'ht-page-navigation-section__button--disabled');
-      addClass(last, 'ht-page-navigation-section__button--disabled');
-      next.disabled = true;
-      last.disabled = true;
-    } else {
-      removeClass(next, 'ht-page-navigation-section__button--disabled');
-      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();
+    if (pageNavSection.style.display !== 'none') {
+      const activeElement = _classPrivateFieldGet(_rootElement, this).ownerDocument.activeElement;
+      if (isFirstPage) {
+        addClass(first, 'ht-page-navigation-section__button--disabled');
+        addClass(prev, 'ht-page-navigation-section__button--disabled');
+        first.disabled = true;
+        prev.disabled = true;
+      } else {
+        removeClass(first, 'ht-page-navigation-section__button--disabled');
+        removeClass(prev, 'ht-page-navigation-section__button--disabled');
+        first.disabled = false;
+        prev.disabled = false;
+      }
+      if (isLastPage) {
+        addClass(next, 'ht-page-navigation-section__button--disabled');
+        addClass(last, 'ht-page-navigation-section__button--disabled');
+        next.disabled = true;
+        last.disabled = true;
+      } else {
+        removeClass(next, 'ht-page-navigation-section__button--disabled');
+        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();
+        }
       }
     }
-    setAttribute(first, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[A11Y_DISABLED(isFirstPage)]]);
-    setAttribute(prev, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[A11Y_DISABLED(isFirstPage)]]);
-    setAttribute(next, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[A11Y_DISABLED(isLastPage)]]);
-    setAttribute(last, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[A11Y_DISABLED(isLastPage)]]);
+    setAttribute(first, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_FIRST_PAGE))], ...[A11Y_DISABLED(isFirstPage)], ...[A11Y_TABINDEX(-1)]]);
+    setAttribute(prev, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_PREV_PAGE))], ...[A11Y_DISABLED(isFirstPage)], ...[A11Y_TABINDEX(-1)]]);
+    setAttribute(next, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_NEXT_PAGE))], ...[A11Y_DISABLED(isLastPage)], ...[A11Y_TABINDEX(-1)]]);
+    setAttribute(last, [...[A11Y_LABEL(_classPrivateFieldGet(_phraseTranslator, this).call(this, C.PAGINATION_LAST_PAGE))], ...[A11Y_DISABLED(isLastPage)], ...[A11Y_TABINDEX(-1)]]);
     return this;
   }
 
@@ -345,7 +368,12 @@ export 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;
   }
@@ -369,7 +397,18 @@ export 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;
   }
@@ -394,9 +433,9 @@ function _updateContainerVisibility() {
   // adds or removes the corner around the Handsontable root element
   if (!_classPrivateFieldGet(_uiContainer, this)) {
     if (isSectionVisible) {
-      addClass(_classPrivateFieldGet(_rootElement, this), 'htPagination');
+      addClass(_classPrivateFieldGet(_rootElement, this).querySelector('.ht-wrapper'), 'htPagination');
     } else {
-      removeClass(_classPrivateFieldGet(_rootElement, this), 'htPagination');
+      removeClass(_classPrivateFieldGet(_rootElement, this).querySelector('.ht-wrapper'), 'htPagination');
     }
   }
   container.style.display = isSectionVisible ? '' : 'none';

package/selection/range.js

@@ -66,6 +66,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.
    *

package/selection/range.mjs

@@ -63,6 +63,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.
    *

package/selection/selection.js

@@ -2,6 +2,7 @@
 
 exports.__esModule = true;
 require("core-js/modules/es.error.cause.js");
+require("core-js/modules/es.array.push.js");
 require("core-js/modules/es.set.difference.v2.js");
 require("core-js/modules/es.set.intersection.v2.js");
 require("core-js/modules/es.set.is-disjoint-from.v2.js");
@@ -34,6 +35,15 @@ function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e =
 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
@@ -355,6 +365,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)) {
@@ -952,7 +963,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));
     }
@@ -961,6 +971,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());
     }
@@ -970,7 +981,6 @@ class Selection {
     this.setRangeEnd(endCoords);
     this.runLocalHooks('afterSelectAll', startCoords, endCoords, highlight);
     this.finish();
-    _classPrivateFieldSet(_disableHeadersHighlight, this, false);
   }
 
   /**
@@ -1137,6 +1147,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