handsontable 0.0.0-next-9059914-20231025 → 0.0.0-next-21d91d0-20231025

package/tableView.mjs

@@ -10,12 +10,13 @@ function _classApplyDescriptorGet(receiver, descriptor) { if (descriptor.get) {
 function _classPrivateFieldSet(receiver, privateMap, value) { var descriptor = _classExtractFieldDescriptor(receiver, privateMap, "set"); _classApplyDescriptorSet(receiver, descriptor, value); return value; }
 function _classExtractFieldDescriptor(receiver, privateMap, action) { if (!privateMap.has(receiver)) { throw new TypeError("attempted to " + action + " private field on non-instance"); } return privateMap.get(receiver); }
 function _classApplyDescriptorSet(receiver, descriptor, value) { if (descriptor.set) { descriptor.set.call(receiver, value); } else { if (!descriptor.writable) { throw new TypeError("attempted to set read only private field"); } descriptor.value = value; } }
-import { addClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible } from "./helpers/dom/element.mjs";
+import { addClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute } from "./helpers/dom/element.mjs";
 import EventManager from "./eventManager.mjs";
 import { isImmediatePropagationStopped, isRightClick, isLeftClick } from "./helpers/dom/event.mjs";
 import Walkontable from "./3rdparty/walkontable/src/index.mjs";
 import { handleMouseEvent } from "./selection/mouseEventHandler.mjs";
 import { isRootInstance } from "./utils/rootInstance.mjs";
+import { A11Y_COLCOUNT, A11Y_MULTISELECTABLE, A11Y_PRESENTATION, A11Y_ROWCOUNT, A11Y_TREEGRID } from "./helpers/a11y.mjs";
 const privatePool = new WeakMap();
 
 /**
@@ -255,6 +256,10 @@ class TableView {
     if (this.instance.getSettings().tableClassName) {
       addClass(priv.table, this.instance.getSettings().tableClassName);
     }
+    if (this.settings.ariaTags) {
+      setAttribute(priv.table, [A11Y_PRESENTATION()]);
+      setAttribute(rootElement, [A11Y_TREEGRID(), A11Y_ROWCOUNT(this.instance.countRows()), A11Y_COLCOUNT(this.instance.countCols()), A11Y_MULTISELECTABLE()]);
+    }
     this.THEAD = rootDocument.createElement('THEAD');
     priv.table.appendChild(this.THEAD);
     this.TBODY = rootDocument.createElement('TBODY');
@@ -308,11 +313,14 @@ class TableView {
     });
     this.eventManager.addEventListener(documentElement, 'mouseup', event => {
       if (selection.isInProgress() && isLeftClick(event)) {
-        // is left mouse button
         selection.finish();
       }
       priv.mouseDown = false;
-      if (isOutsideInput(rootDocument.activeElement) || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
+      const isOutsideInputElement = isOutsideInput(rootDocument.activeElement);
+      if (!isOutsideInputElement) {
+        return;
+      }
+      if (isOutsideInputElement || !selection.isSelected() && !selection.isSelectedByAnyHeader() && !rootElement.contains(event.target) && !isRightClick(event)) {
         this.instance.unlisten();
       }
     });
@@ -546,6 +554,40 @@ class TableView {
     return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
   }
 
+  /**
+   * The function returns the number of renderable column indexes within the passed range of the visual indexes.
+   *
+   * @param {number} columnStart The column visual start index.
+   * @param {number} columnEnd The column visual end index.
+   * @returns {number}
+   */
+  countRenderableColumnsInRange(columnStart, columnEnd) {
+    let count = 0;
+    for (let column = columnStart; column <= columnEnd; column++) {
+      if (this.instance.columnIndexMapper.getRenderableFromVisualIndex(column) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
+  /**
+   * The function returns the number of renderable row indexes within the passed range of the visual indexes.
+   *
+   * @param {number} rowStart The row visual start index.
+   * @param {number} rowEnd The row visual end index.
+   * @returns {number}
+   */
+  countRenderableRowsInRange(rowStart, rowEnd) {
+    let count = 0;
+    for (let row = rowStart; row <= rowEnd; row++) {
+      if (this.instance.rowIndexMapper.getRenderableFromVisualIndex(row) !== null) {
+        count += 1;
+      }
+    }
+    return count;
+  }
+
   /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
@@ -566,6 +608,7 @@ class TableView {
   initializeWalkontable() {
     const priv = privatePool.get(this);
     const walkontableConfig = {
+      ariaTags: this.settings.ariaTags,
       rtlMode: this.instance.isRtl(),
       externalRowCalculator: this.instance.getPlugin('autoRowSize') && this.instance.getPlugin('autoRowSize').isEnabled(),
       table: priv.table,
@@ -765,20 +808,78 @@ class TableView {
       },
       beforeDraw: (force, skipRender) => this.beforeRender(force, skipRender),
       onDraw: force => this.afterRender(force),
-      onScrollVertically: () => this.instance.runHooks('afterScrollVertically'),
-      onScrollHorizontally: () => this.instance.runHooks('afterScrollHorizontally'),
+      onBeforeViewportScrollVertically: renderableRow => {
+        const rowMapper = this.instance.rowIndexMapper;
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+
+          // for an empty data return index as is
+          if (visualRow === null) {
+            return renderableRow;
+          }
+        }
+        visualRow = this.instance.runHooks('beforeViewportScrollVertically', visualRow);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(visualRow);
+        }
+        return visualRow;
+      },
+      onBeforeViewportScrollHorizontally: renderableColumn => {
+        const columnMapper = this.instance.columnIndexMapper;
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+
+          // for an empty data return index as is
+          if (visualColumn === null) {
+            return renderableColumn;
+          }
+        }
+        visualColumn = this.instance.runHooks('beforeViewportScrollHorizontally', visualColumn);
+        this.instance.runHooks('beforeViewportScroll');
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(visualColumn);
+        }
+        return visualColumn;
+      },
+      onScrollVertically: () => {
+        this.instance.runHooks('afterScrollVertically');
+        this.instance.runHooks('afterScroll');
+      },
+      onScrollHorizontally: () => {
+        this.instance.runHooks('afterScrollHorizontally');
+        this.instance.runHooks('afterScroll');
+      },
       onBeforeRemoveCellClassNames: () => this.instance.runHooks('beforeRemoveCellClassNames'),
       onBeforeHighlightingRowHeader: (renderableRow, headerLevel, highlightMeta) => {
         const rowMapper = this.instance.rowIndexMapper;
-        const visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        const areColumnHeadersSelected = renderableRow < 0;
+        let visualRow = renderableRow;
+        if (!areColumnHeadersSelected) {
+          visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+        }
         const newVisualRow = this.instance.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
-        return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        if (!areColumnHeadersSelected) {
+          return rowMapper.getRenderableFromVisualIndex(rowMapper.getNearestNotHiddenIndex(newVisualRow, 1));
+        }
+        return newVisualRow;
       },
       onBeforeHighlightingColumnHeader: (renderableColumn, headerLevel, highlightMeta) => {
         const columnMapper = this.instance.columnIndexMapper;
-        const visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        const areRowHeadersSelected = renderableColumn < 0;
+        let visualColumn = renderableColumn;
+        if (!areRowHeadersSelected) {
+          visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+        }
         const newVisualColumn = this.instance.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
-        return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        if (!areRowHeadersSelected) {
+          return columnMapper.getRenderableFromVisualIndex(columnMapper.getNearestNotHiddenIndex(newVisualColumn, 1));
+        }
+        return newVisualColumn;
       },
       onAfterDrawSelection: (currentRow, currentColumn, layerLevel) => {
         let cornersOfSelection;
@@ -786,10 +887,7 @@ class TableView {
         const selectedRange = this.instance.selection.getSelectedRange();
         const selectionRangeSize = selectedRange.size();
         if (selectionRangeSize > 0) {
-          // Selection layers are stored from the "oldest" to the "newest". We should calculate the offset.
-          // Please look at the `SelectedRange` class and it's method for getting selection's layer for more information.
-          const selectionOffset = (layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0) + 1 - selectionRangeSize;
-          const selectionForLayer = selectedRange.peekByIndex(selectionOffset);
+          const selectionForLayer = selectedRange.peekByIndex(layerLevel !== null && layerLevel !== void 0 ? layerLevel : 0);
           cornersOfSelection = [selectionForLayer.from.row, selectionForLayer.from.col, selectionForLayer.to.row, selectionForLayer.to.col];
         }
         return this.instance.runHooks('afterDrawSelection', visualRowIndex, visualColumnIndex, cornersOfSelection, layerLevel);
@@ -942,7 +1040,7 @@ class TableView {
    */
   isSelectedOnlyCell() {
     var _this$instance$getSel, _this$instance$getSel2;
-    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingle()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
+    return (_this$instance$getSel = (_this$instance$getSel2 = this.instance.getSelectedRangeLast()) === null || _this$instance$getSel2 === void 0 ? void 0 : _this$instance$getSel2.isSingleCell()) !== null && _this$instance$getSel !== void 0 ? _this$instance$getSel : false;
   }
 
   /**

package/utils/paginator.js

@@ -0,0 +1,151 @@
+"use strict";
+
+exports.__esModule = true;
+exports.createPaginator = createPaginator;
+var _number = require("../helpers/number");
+/**
+ * @typedef Paginator
+ * @property {function(number): void} setCurrentPage Sets the current index to the specific page.
+ * @property {function(): number} getCurrentPage Gets the current page.
+ * @property {function(): number} getSize Gets the total number of pages.
+ * @property {function(): void} toFirstItem Move the index to the first page.
+ * @property {function(): void} toLastItem Move the index to the last page.
+ * @property {function(): void} toNextItem Move the index to the next page.
+ * @property {function(): void} toPreviousItem Move the index to the previous page.
+ * @property {function(): void} clear Clear the internal state of the paginator.
+ */
+/**
+ * @param {object} options Paginator options.
+ * @param {number} [options.initialPage] Initial index from which paging starts. Also, after clearing the paginator
+ * the page is cleared to the initial page.
+ * @param {function(): number} [options.size] Sets the max size of the pages.
+ * @param {function(number): boolean | void} [options.onItemSelect] Fires the function on each page change.
+ * @param {function(): void} [options.onClear] Fires the function after clearing the state.
+ * @returns {Paginator}
+ */
+function createPaginator(_ref) {
+  let {
+    initialPage = -1,
+    size = () => 0,
+    onItemSelect = () => {},
+    onClear = () => {}
+  } = _ref;
+  const visitedPages = new Set();
+  let currentIndex = (0, _number.clamp)(initialPage, -1, getSize() - 1);
+
+  /**
+   * Updates the internal state of the paginator.
+   *
+   * @param {number} newIndex The page index to switch.
+   * @param {-1|1} direction The direction of traversing the pages in case when they are disabled.
+   * @returns {number} Returns the final index of the page.
+   */
+  function _updateState(newIndex, direction) {
+    const lastIndex = getSize() - 1;
+    if (newIndex < 0) {
+      newIndex = lastIndex;
+    }
+    if (newIndex > lastIndex) {
+      newIndex = 0;
+    }
+    if (visitedPages.has(newIndex)) {
+      return -1;
+    }
+    visitedPages.add(newIndex);
+    const changeProceed = onItemSelect(newIndex, false);
+    if (changeProceed === false) {
+      newIndex = _updateState(direction === 1 ? ++newIndex : --newIndex,
+      // eslint-disable-line no-plusplus
+      direction);
+    }
+    return newIndex;
+  }
+
+  /**
+   * Sets the page index as current one.
+   *
+   * @param {number} index The index to set.
+   */
+  function setCurrentPage(index) {
+    if (index > -1 && index < getSize() && onItemSelect(index, true) !== false) {
+      currentIndex = index;
+    }
+  }
+
+  /**
+   * Gets the current page.
+   *
+   * @returns {number}
+   */
+  function getCurrentPage() {
+    return currentIndex;
+  }
+
+  /**
+   * Moves the index to the first page.
+   */
+  function toFirstItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(0, 1);
+    }
+  }
+
+  /**
+   * Moves the index to the last page.
+   */
+  function toLastItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(getSize() - 1, -1);
+    }
+  }
+
+  /**
+   * Moves the index to the next page.
+   */
+  function toNextItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(++currentIndex, 1); // eslint-disable-line no-plusplus
+    }
+  }
+
+  /**
+   * Moves the index to the previous page.
+   */
+  function toPreviousItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(--currentIndex, -1); // eslint-disable-line no-plusplus
+    }
+  }
+
+  /**
+   * Gets the total number of pages.
+   *
+   * @returns {number}
+   */
+  function getSize() {
+    return Math.max(size(), 0);
+  }
+
+  /**
+   * Clears the internal state of the paginator.
+   */
+  function clear() {
+    visitedPages.clear();
+    currentIndex = initialPage;
+    onClear();
+  }
+  return {
+    setCurrentPage,
+    getCurrentPage,
+    toFirstItem,
+    toLastItem,
+    toNextItem,
+    toPreviousItem,
+    getSize,
+    clear
+  };
+}

package/utils/paginator.mjs

@@ -0,0 +1,147 @@
+import { clamp } from "../helpers/number.mjs";
+/**
+ * @typedef Paginator
+ * @property {function(number): void} setCurrentPage Sets the current index to the specific page.
+ * @property {function(): number} getCurrentPage Gets the current page.
+ * @property {function(): number} getSize Gets the total number of pages.
+ * @property {function(): void} toFirstItem Move the index to the first page.
+ * @property {function(): void} toLastItem Move the index to the last page.
+ * @property {function(): void} toNextItem Move the index to the next page.
+ * @property {function(): void} toPreviousItem Move the index to the previous page.
+ * @property {function(): void} clear Clear the internal state of the paginator.
+ */
+/**
+ * @param {object} options Paginator options.
+ * @param {number} [options.initialPage] Initial index from which paging starts. Also, after clearing the paginator
+ * the page is cleared to the initial page.
+ * @param {function(): number} [options.size] Sets the max size of the pages.
+ * @param {function(number): boolean | void} [options.onItemSelect] Fires the function on each page change.
+ * @param {function(): void} [options.onClear] Fires the function after clearing the state.
+ * @returns {Paginator}
+ */
+export function createPaginator(_ref) {
+  let {
+    initialPage = -1,
+    size = () => 0,
+    onItemSelect = () => {},
+    onClear = () => {}
+  } = _ref;
+  const visitedPages = new Set();
+  let currentIndex = clamp(initialPage, -1, getSize() - 1);
+
+  /**
+   * Updates the internal state of the paginator.
+   *
+   * @param {number} newIndex The page index to switch.
+   * @param {-1|1} direction The direction of traversing the pages in case when they are disabled.
+   * @returns {number} Returns the final index of the page.
+   */
+  function _updateState(newIndex, direction) {
+    const lastIndex = getSize() - 1;
+    if (newIndex < 0) {
+      newIndex = lastIndex;
+    }
+    if (newIndex > lastIndex) {
+      newIndex = 0;
+    }
+    if (visitedPages.has(newIndex)) {
+      return -1;
+    }
+    visitedPages.add(newIndex);
+    const changeProceed = onItemSelect(newIndex, false);
+    if (changeProceed === false) {
+      newIndex = _updateState(direction === 1 ? ++newIndex : --newIndex,
+      // eslint-disable-line no-plusplus
+      direction);
+    }
+    return newIndex;
+  }
+
+  /**
+   * Sets the page index as current one.
+   *
+   * @param {number} index The index to set.
+   */
+  function setCurrentPage(index) {
+    if (index > -1 && index < getSize() && onItemSelect(index, true) !== false) {
+      currentIndex = index;
+    }
+  }
+
+  /**
+   * Gets the current page.
+   *
+   * @returns {number}
+   */
+  function getCurrentPage() {
+    return currentIndex;
+  }
+
+  /**
+   * Moves the index to the first page.
+   */
+  function toFirstItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(0, 1);
+    }
+  }
+
+  /**
+   * Moves the index to the last page.
+   */
+  function toLastItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(getSize() - 1, -1);
+    }
+  }
+
+  /**
+   * Moves the index to the next page.
+   */
+  function toNextItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(++currentIndex, 1); // eslint-disable-line no-plusplus
+    }
+  }
+
+  /**
+   * Moves the index to the previous page.
+   */
+  function toPreviousItem() {
+    if (getSize() > 0) {
+      visitedPages.clear();
+      currentIndex = _updateState(--currentIndex, -1); // eslint-disable-line no-plusplus
+    }
+  }
+
+  /**
+   * Gets the total number of pages.
+   *
+   * @returns {number}
+   */
+  function getSize() {
+    return Math.max(size(), 0);
+  }
+
+  /**
+   * Clears the internal state of the paginator.
+   */
+  function clear() {
+    visitedPages.clear();
+    currentIndex = initialPage;
+    onClear();
+  }
+  return {
+    setCurrentPage,
+    getCurrentPage,
+    toFirstItem,
+    toLastItem,
+    toNextItem,
+    toPreviousItem,
+    getSize,
+    clear
+  };
+}