handsontable 0.0.0-next-802f59c-20241024 → 0.0.0-next-627918e-20241025

package/3rdparty/walkontable/src/viewport.mjs

@@ -1,4 +1,4 @@
-import { getScrollbarWidth, offset, outerHeight, outerWidth } from "../../../helpers/dom/element.mjs";
+import { getScrollbarWidth, getStyle, offset, outerHeight, outerWidth } from "../../../helpers/dom/element.mjs";
 import { objectEach } from "../../../helpers/object.mjs";
 import { FullyVisibleColumnsCalculationType, FullyVisibleRowsCalculationType, PartiallyVisibleColumnsCalculationType, PartiallyVisibleRowsCalculationType, RenderedAllColumnsCalculationType, RenderedAllRowsCalculationType, RenderedColumnsCalculationType, RenderedRowsCalculationType, ViewportColumnsCalculator, ViewportRowsCalculator } from "./calculator/index.mjs";
 /**
@@ -24,6 +24,7 @@ class Viewport {
     this.oversizedColumnHeaders = [];
     this.hasOversizedColumnHeadersMarked = {};
     this.clientHeight = 0;
+    this.containerWidth = NaN;
     this.rowHeaderWidth = NaN;
     this.rowsVisibleCalculator = null;
     this.columnsVisibleCalculator = null;
@@ -52,65 +53,55 @@ class Viewport {
     }
     return height;
   }
-
-  /**
-   * @returns {number}
-   */
-  getViewportHeight() {
-    let containerHeight = this.getWorkspaceHeight();
-    if (containerHeight === Infinity) {
-      return containerHeight;
-    }
-    const columnHeaderHeight = this.getColumnHeaderHeight();
-    if (columnHeaderHeight > 0) {
-      containerHeight -= columnHeaderHeight;
-    }
-    return containerHeight;
-  }
-
-  /**
-   * Gets the width of the table workspace (in pixels). The workspace size in the current
-   * implementation returns the width of the table holder element including scrollbar width when
-   * the table has defined size and the width of the window excluding scrollbar width when
-   * the table has no defined size (the window is a scrollable container).
-   *
-   * This is a bug, as the method should always return stable values, always without scrollbar width.
-   * Changing this behavior would break the column calculators, which would also need to be adjusted.
-   *
-   * @returns {number}
-   */
   getWorkspaceWidth() {
+    const {
+      wtSettings
+    } = this;
     const {
       rootDocument,
       rootWindow
     } = this.domBindings;
     const trimmingContainer = this.dataAccessObject.inlineStartOverlayTrimmingContainer;
+    const docOffsetWidth = rootDocument.documentElement.offsetWidth;
+    const totalColumns = wtSettings.getSetting('totalColumns');
+    const preventOverflow = wtSettings.getSetting('preventOverflow');
+    const isRtl = wtSettings.getSetting('rtlMode');
+    const tableRect = this.wtTable.TABLE.getBoundingClientRect();
+    const inlineStart = isRtl ? tableRect.right - docOffsetWidth : tableRect.left;
+    const tableOffset = docOffsetWidth - inlineStart;
     let width;
-    if (trimmingContainer === rootWindow) {
-      const totalColumns = this.wtSettings.getSetting('totalColumns');
-      width = this.wtTable.holder.offsetWidth;
-      if (this.getRowHeaderWidth() + this.sumColumnWidths(0, totalColumns) > width) {
-        width = rootDocument.documentElement.clientWidth;
-      }
+    let overflow;
+    if (preventOverflow) {
+      return outerWidth(this.wtTable.wtRootElement);
+    }
+    if (wtSettings.getSetting('freezeOverlays')) {
+      width = Math.min(tableOffset, docOffsetWidth);
     } else {
-      width = trimmingContainer.clientWidth;
+      width = Math.min(this.getContainerFillWidth(), tableOffset, docOffsetWidth);
     }
-    return width;
-  }
-
-  /**
-   * @returns {number}
-   */
-  getViewportWidth() {
-    const containerWidth = this.getWorkspaceWidth();
-    if (containerWidth === Infinity) {
-      return containerWidth;
+    if (trimmingContainer === rootWindow && totalColumns > 0 && this.sumColumnWidths(0, totalColumns - 1) > width) {
+      // in case sum of column widths is higher than available stylesheet width, let's assume using the whole window
+      // otherwise continue below, which will allow stretching
+      // this is used in `scroll_window.html`
+      // TODO test me
+      return rootDocument.documentElement.clientWidth;
     }
-    const rowHeaderWidth = this.getRowHeaderWidth();
-    if (rowHeaderWidth > 0) {
-      return containerWidth - rowHeaderWidth;
+    if (trimmingContainer !== rootWindow) {
+      overflow = getStyle(this.dataAccessObject.inlineStartOverlayTrimmingContainer, 'overflow', rootWindow);
+      if (overflow === 'scroll' || overflow === 'hidden' || overflow === 'auto') {
+        // this is used in `scroll.html`
+        // TODO test me
+        return Math.max(width, trimmingContainer.clientWidth);
+      }
     }
-    return containerWidth;
+    const stretchSetting = wtSettings.getSetting('stretchH');
+    if (stretchSetting === 'none' || !stretchSetting) {
+      // if no stretching is used, return the maximum used workspace width
+      return Math.max(width, outerWidth(this.wtTable.TABLE));
+    }
+
+    // if stretching is used, return the actual container width, so the columns can fit inside it
+    return width;
   }
 
   /**
@@ -131,24 +122,6 @@ class Viewport {
     return this.wtTable.hider.offsetWidth > this.getWorkspaceWidth();
   }
 
-  /**
-   * Checks if the table uses the window as a viewport and if there is a vertical scrollbar.
-   *
-   * @returns {boolean}
-   */
-  isVerticallyScrollableByWindow() {
-    return this.dataAccessObject.topOverlayTrimmingContainer === this.domBindings.rootWindow;
-  }
-
-  /**
-   * Checks if the table uses the window as a viewport and if there is a horizontal scrollbar.
-   *
-   * @returns {boolean}
-   */
-  isHorizontallyScrollableByWindow() {
-    return this.dataAccessObject.inlineStartOverlayTrimmingContainer === this.domBindings.rootWindow;
-  }
-
   /**
    * @param {number} from The visual column index from the width sum is start calculated.
    * @param {number} length The length of the column to traverse.
@@ -164,6 +137,24 @@ class Viewport {
     return sum;
   }
 
+  /**
+   * @returns {number}
+   */
+  getContainerFillWidth() {
+    if (this.containerWidth) {
+      return this.containerWidth;
+    }
+    const mainContainer = this.wtTable.holder;
+    const dummyElement = this.domBindings.rootDocument.createElement('div');
+    dummyElement.style.width = '100%';
+    dummyElement.style.height = '1px';
+    mainContainer.appendChild(dummyElement);
+    const fillWidth = dummyElement.offsetWidth;
+    this.containerWidth = fillWidth;
+    mainContainer.removeChild(dummyElement);
+    return fillWidth;
+  }
+
   /**
    * @returns {number}
    */
@@ -184,6 +175,21 @@ class Viewport {
     return this.columnHeaderHeight;
   }
 
+  /**
+   * @returns {number}
+   */
+  getViewportHeight() {
+    let containerHeight = this.getWorkspaceHeight();
+    if (containerHeight === Infinity) {
+      return containerHeight;
+    }
+    const columnHeaderHeight = this.getColumnHeaderHeight();
+    if (columnHeaderHeight > 0) {
+      containerHeight -= columnHeaderHeight;
+    }
+    return containerHeight;
+  }
+
   /**
    * @returns {number}
    */
@@ -218,6 +224,21 @@ class Viewport {
     return this.rowHeaderWidth;
   }
 
+  /**
+   * @returns {number}
+   */
+  getViewportWidth() {
+    const containerWidth = this.getWorkspaceWidth();
+    if (containerWidth === Infinity) {
+      return containerWidth;
+    }
+    const rowHeaderWidth = this.getRowHeaderWidth();
+    if (rowHeaderWidth > 0) {
+      return containerWidth - rowHeaderWidth;
+    }
+    return containerWidth;
+  }
+
   /**
    * Creates rows calculators. The type of the calculations can be chosen from the list:
    *  - 'rendered' Calculates rows that should be rendered within the current table's viewport;
@@ -260,6 +281,7 @@ class Viewport {
       viewportHeight: height,
       scrollOffset: pos,
       totalRows: wtSettings.getSetting('totalRows'),
+      defaultRowHeight: this.instance.stylesHandler.getDefaultRowHeight(),
       rowHeightFn: sourceRow => wtTable.getRowHeight(sourceRow),
       overrideFn: wtSettings.getSettingPure('viewportRowCalculatorOverride'),
       horizontalScrollbarHeight: scrollbarHeight

package/base.js

@@ -45,8 +45,8 @@ Handsontable.hooks = _hooks.Hooks.getSingleton();
 Handsontable.CellCoords = _src.CellCoords;
 Handsontable.CellRange = _src.CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/10/2024 07:23:05";
-Handsontable.version = "0.0.0-next-802f59c-20241024";
+Handsontable.buildDate = "25/10/2024 06:41:23";
+Handsontable.version = "0.0.0-next-627918e-20241025";
 Handsontable.languages = {
   dictionaryKeys: _registry.dictionaryKeys,
   getLanguageDictionary: _registry.getLanguageDictionary,

package/base.mjs

@@ -35,8 +35,8 @@ Handsontable.hooks = Hooks.getSingleton();
 Handsontable.CellCoords = CellCoords;
 Handsontable.CellRange = CellRange;
 Handsontable.packageName = 'handsontable';
-Handsontable.buildDate = "24/10/2024 07:23:11";
-Handsontable.version = "0.0.0-next-802f59c-20241024";
+Handsontable.buildDate = "25/10/2024 06:41:28";
+Handsontable.version = "0.0.0-next-627918e-20241025";
 Handsontable.languages = {
   dictionaryKeys,
   getLanguageDictionary,

package/core/hooks/constants.js

@@ -1368,7 +1368,6 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @event Hooks#modifyColWidth
  * @param {number} width Current column width.
  * @param {number} column Visual column index.
- * @param {string} [source] String that identifies source of hook call.
  */
 'modifyColWidth',
 /**
@@ -1405,7 +1404,6 @@ const REGISTERED_HOOKS = exports.REGISTERED_HOOKS = [/* eslint-disable jsdoc/req
  * @event Hooks#modifyRowHeight
  * @param {number} height Row height.
  * @param {number} row Visual row index.
- * @param {string} [source] String that identifies source of hook call.
  */
 'modifyRowHeight',
 /**

package/core/hooks/constants.mjs

@@ -1365,7 +1365,6 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
  * @event Hooks#modifyColWidth
  * @param {number} width Current column width.
  * @param {number} column Visual column index.
- * @param {string} [source] String that identifies source of hook call.
  */
 'modifyColWidth',
 /**
@@ -1402,7 +1401,6 @@ export const REGISTERED_HOOKS = [/* eslint-disable jsdoc/require-description-com
  * @event Hooks#modifyRowHeight
  * @param {number} height Row height.
  * @param {number} row Visual row index.
- * @param {string} [source] String that identifies source of hook call.
  */
 'modifyRowHeight',
 /**

package/core/hooks/index.d.ts

@@ -237,7 +237,7 @@ export interface Events {
   modifyColHeader?: (column: number) => void;
   modifyColumnHeaderHeight?: () => void;
   modifyColumnHeaderValue?: (headerValue: string, visualColumnIndex: number, headerLevel: number) => void | string;
-  modifyColWidth?: (width: number, column: number, source?: string) => void;
+  modifyColWidth?: (width: number, column: number) => void;
   modifyCopyableRange?: (copyableRanges: RangeType[]) => void;
   modifyFiltersMultiSelectValue?: (value: string, meta: CellProperties) => void | CellValue;
   modifyFocusedElement?: (row: number, column: number, focusedElement: HTMLElement) => void | HTMLElement;
@@ -248,7 +248,7 @@ export interface Events {
   modifyRowData?: (row: number) => void;
   modifyRowHeader?: (row: number) => void;
   modifyRowHeaderWidth?: (rowHeaderWidth: number) => void;
-  modifyRowHeight?: (height: number, row: number, source?: string) => void | number;
+  modifyRowHeight?: (height: number, row: number) => void | number;
   modifyRowHeightByOverlayName?: (height: number, row: number, overlayType: OverlayType) => void | number;
   modifySourceData?: (row: number, column: number, valueHolder: { value: CellValue }, ioMode: 'get' | 'set') => void;
   modifyTransformEnd?: (delta: CellCoords) => void;

package/core.d.ts

@@ -69,7 +69,7 @@ export default class Core {
   getColHeader(): Array<number | string>;
   getColHeader(column: number, headerLevel?: number): number | string;
   getColumnMeta(column: number): ColumnSettings;
-  getColWidth(column: number, source?: string): number;
+  getColWidth(column: number): number;
   getCoords(element: Element | null): CellCoords;
   getCopyableData(row: number, column: number): string;
   getCopyableText(startRow: number, startColumn: number, endRow: number, endColumn: number): string;
@@ -99,7 +99,7 @@ export default class Core {
   getPlugin(pluginName: string): Plugins['basePlugin'];
   getRowHeader(): Array<string | number>;
   getRowHeader(row: number): string | number;
-  getRowHeight(row: number, source?: string): number;
+  getRowHeight(row: number): number;
   getSchema(): RowObject;
   getSelected(): Array<[number, number, number, number]> | undefined;
   getSelectedLast(): number[] | undefined;

package/core.js

@@ -43,6 +43,7 @@ var _index3 = require("./core/index");
 var _uniqueMap = require("./utils/dataStructures/uniqueMap");
 var _shortcuts = require("./shortcuts");
 var _shortcutContexts = require("./shortcutContexts");
+var _themes = require("./helpers/themes");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 let activeGuid = null;
 
@@ -229,7 +230,20 @@ function Core(rootElement, userSettings) {
   this.renderCall = false;
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if ((0, _rootInstance.isRootInstance)(this)) {
+    var _rootElement$parentNo;
     (0, _mixed._injectProductInfo)(userSettings.licenseKey, rootElement);
+    (0, _element.addClass)(rootElement, 'ht-wrapper');
+    const rootThemeClassName = (0, _themes.getThemeClassName)(rootElement.className);
+    if (rootThemeClassName) {
+      tableMeta.themeName = rootThemeClassName;
+    }
+    if (tableMeta.themeName) {
+      (0, _element.addClass)(rootElement, tableMeta.themeName);
+    }
+    const licenseInfo = (_rootElement$parentNo = rootElement.parentNode) === null || _rootElement$parentNo === void 0 ? void 0 : _rootElement$parentNo.querySelector('.hot-display-license-info');
+    if (licenseInfo) {
+      (0, _element.addClass)(licenseInfo, tableMeta.themeName);
+    }
   }
   this.guid = `ht_${(0, _string.randomString)()}`; // this is the namespace for global events
 
@@ -3494,13 +3508,12 @@ function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getColWidth
    * @param {number} column Visual column index.
-   * @param {string} [source] The source of the call.
    * @returns {number} Column width.
    * @fires Hooks#modifyColWidth
    */
-  this.getColWidth = function (column, source) {
+  this.getColWidth = function (column) {
     let width = instance._getColWidthFromSettings(column);
-    width = instance.runHooks('modifyColWidth', width, column, source);
+    width = instance.runHooks('modifyColWidth', width, column);
     if (width === undefined) {
       width = _src.DEFAULT_COLUMN_WIDTH;
     }
@@ -3560,13 +3573,12 @@ function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getRowHeight
    * @param {number} row A visual row index.
-   * @param {string} [source] The source of the call.
    * @returns {number|undefined} The height of the specified row, in pixels.
    * @fires Hooks#modifyRowHeight
    */
-  this.getRowHeight = function (row, source) {
+  this.getRowHeight = function (row) {
     let height = instance._getRowHeightFromSettings(row);
-    height = instance.runHooks('modifyRowHeight', height, row, source);
+    height = instance.runHooks('modifyRowHeight', height, row);
     return height;
   };
 

package/core.mjs

@@ -39,6 +39,7 @@ import { installFocusCatcher, createViewportScroller } from "./core/index.mjs";
 import { createUniqueMap } from "./utils/dataStructures/uniqueMap.mjs";
 import { createShortcutManager } from "./shortcuts/index.mjs";
 import { registerAllShortcutContexts } from "./shortcutContexts/index.mjs";
+import { getThemeClassName } from "./helpers/themes.mjs";
 let activeGuid = null;
 
 /**
@@ -224,7 +225,20 @@ export default function Core(rootElement, userSettings) {
   this.renderCall = false;
   rootElement.insertBefore(this.container, rootElement.firstChild);
   if (isRootInstance(this)) {
+    var _rootElement$parentNo;
     _injectProductInfo(userSettings.licenseKey, rootElement);
+    addClass(rootElement, 'ht-wrapper');
+    const rootThemeClassName = getThemeClassName(rootElement.className);
+    if (rootThemeClassName) {
+      tableMeta.themeName = rootThemeClassName;
+    }
+    if (tableMeta.themeName) {
+      addClass(rootElement, tableMeta.themeName);
+    }
+    const licenseInfo = (_rootElement$parentNo = rootElement.parentNode) === null || _rootElement$parentNo === void 0 ? void 0 : _rootElement$parentNo.querySelector('.hot-display-license-info');
+    if (licenseInfo) {
+      addClass(licenseInfo, tableMeta.themeName);
+    }
   }
   this.guid = `ht_${randomString()}`; // this is the namespace for global events
 
@@ -3489,13 +3503,12 @@ export default function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getColWidth
    * @param {number} column Visual column index.
-   * @param {string} [source] The source of the call.
    * @returns {number} Column width.
    * @fires Hooks#modifyColWidth
    */
-  this.getColWidth = function (column, source) {
+  this.getColWidth = function (column) {
     let width = instance._getColWidthFromSettings(column);
-    width = instance.runHooks('modifyColWidth', width, column, source);
+    width = instance.runHooks('modifyColWidth', width, column);
     if (width === undefined) {
       width = DEFAULT_COLUMN_WIDTH;
     }
@@ -3555,13 +3568,12 @@ export default function Core(rootElement, userSettings) {
    * @memberof Core#
    * @function getRowHeight
    * @param {number} row A visual row index.
-   * @param {string} [source] The source of the call.
    * @returns {number|undefined} The height of the specified row, in pixels.
    * @fires Hooks#modifyRowHeight
    */
-  this.getRowHeight = function (row, source) {
+  this.getRowHeight = function (row) {
     let height = instance._getRowHeightFromSettings(row);
-    height = instance.runHooks('modifyRowHeight', height, row, source);
+    height = instance.runHooks('modifyRowHeight', height, row);
     return height;
   };
 

package/dataMap/metaManager/metaSchema.js

@@ -4313,6 +4313,23 @@ var _default = () => {
      * ```
      */
     tableClassName: undefined,
+    // TODO: add themeName description
+    /**
+     * The `themeName` option lets you add CSS class names
+     *
+     * @memberof Options#
+     * @type {string|string[]}
+     * @default undefined
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // add a `ht-theme-name` CSS class name
+     * // to every Handsontable instance inside the `container` element
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *

package/dataMap/metaManager/metaSchema.mjs

@@ -4310,6 +4310,23 @@ export default () => {
      * ```
      */
     tableClassName: undefined,
+    // TODO: add themeName description
+    /**
+     * The `themeName` option lets you add CSS class names
+     *
+     * @memberof Options#
+     * @type {string|string[]}
+     * @default undefined
+     * @category Core
+     *
+     * @example
+     * ```js
+     * // add a `ht-theme-name` CSS class name
+     * // to every Handsontable instance inside the `container` element
+     * themeName: 'ht-theme-name',
+     * ```
+     */
+    themeName: undefined,
     /**
      * The `tabMoves` option configures the action of the <kbd>**Tab**</kbd> key.
      *

package/dist/handsontable.css

@@ -25,13 +25,13 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-802f59c-20241024
- * Release date: 17/10/2024 (built at 24/10/2024 07:23:15)
+ * Version: 0.0.0-next-627918e-20241025
+ * Release date: 17/10/2024 (built at 25/10/2024 06:42:23)
  */
 /**
  * Fix for bootstrap styles
  */
-.handsontable .table th, .handsontable .table td {
+ .handsontable .table th, .handsontable .table td {
   border-top: none;
 }
 
@@ -589,6 +589,7 @@ innerBorderBottom - Property controlled by bottom overlay
   color: #000;
   border-radius: 0;
   background-color: #FFF;
+  box-sizing: border-box !important;
   /*overwrite styles potentionally made by a framework*/
 }
 
@@ -603,16 +604,25 @@ innerBorderBottom - Property controlled by bottom overlay
 }
 
 .htSelectEditor {
-  -webkit-appearance: menulist-button !important;
   position: absolute;
-  width: auto;
-  border: 2px solid #4b89ff;
+
+  select {
+    -webkit-appearance: menulist-button !important;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #4b89ff;
+    box-sizing: border-box !important;
+  }
 }
 
-.htSelectEditor:focus {
+.htSelectEditor select:focus {
   outline: none;
 }
 
+.htSelectEditor .htAutocompleteArrow {
+  display: none;
+}
+
 /*
 TextRenderer readOnly cell
 */
@@ -2056,5 +2066,3 @@ textarea.HandsontableCopyPaste {
   left: 0;
   right: unset;
 }
-
-/*# sourceMappingURL=handsontable.css.map*/

package/dist/handsontable.full.css

@@ -25,13 +25,13 @@
  * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM
  * USE OR INABILITY TO USE THIS SOFTWARE.
  *
- * Version: 0.0.0-next-802f59c-20241024
- * Release date: 17/10/2024 (built at 24/10/2024 07:23:15)
+ * Version: 0.0.0-next-627918e-20241025
+ * Release date: 17/10/2024 (built at 25/10/2024 06:42:23)
  */
 /**
  * Fix for bootstrap styles
  */
-.handsontable .table th, .handsontable .table td {
+ .handsontable .table th, .handsontable .table td {
   border-top: none;
 }
 
@@ -589,6 +589,7 @@ innerBorderBottom - Property controlled by bottom overlay
   color: #000;
   border-radius: 0;
   background-color: #FFF;
+  box-sizing: border-box !important;
   /*overwrite styles potentionally made by a framework*/
 }
 
@@ -603,16 +604,25 @@ innerBorderBottom - Property controlled by bottom overlay
 }
 
 .htSelectEditor {
-  -webkit-appearance: menulist-button !important;
   position: absolute;
-  width: auto;
-  border: 2px solid #4b89ff;
+
+  select {
+    -webkit-appearance: menulist-button !important;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #4b89ff;
+    box-sizing: border-box !important;
+  }
 }
 
-.htSelectEditor:focus {
+.htSelectEditor select:focus {
   outline: none;
 }
 
+.htSelectEditor .htAutocompleteArrow {
+  display: none;
+}
+
 /*
 TextRenderer readOnly cell
 */