handsontable 18.0.0 → 18.1.0-rc7

package/renderSizeProbe.js

@@ -0,0 +1,163 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "RenderSizeProbe", {
+    enumerable: true,
+    get: function() {
+        return RenderSizeProbe;
+    }
+});
+const _element = require("./helpers/dom/element");
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
+var /**
+   * Measures every rendered row of one table body and stores the height under its source row index.
+   * The formula matches `markOversizedRows` (`axisSizing/oversizedRows`)'s stored value exactly (a row with a row header is
+   * measured from the TH; otherwise from the TR minus the content-box border, then the content-box
+   * `+1` is folded back so the stored value equals the engine's).
+   *
+   * @param {object} wtTable The engine table (master or bottom clone) whose TBODY is measured.
+   * @param {boolean} borderBoxSizing Whether cells use `box-sizing: border-box` (the theme axis).
+   */ _measureRows = /*#__PURE__*/ new WeakSet(), /**
+   * Measures the rendered column-header heights per level. Matches
+   * `Table.markIfOversizedColumnHeader`, which reads `innerHeight` of each header CELL (TH) and keeps
+   * the tallest per level — not the THEAD row height, which is a border taller. Each THEAD child is a
+   * header row (one per level); its TH cells are the per-column headers.
+   *
+   * @param {object} wtTable The master engine table whose THEAD is measured.
+   */ _measureColumnHeaders = /*#__PURE__*/ new WeakSet();
+class RenderSizeProbe {
+    /**
+   * Measures the rendered grid and refreshes the stored maps. A pure read — no DOM writes, no size
+   * feedback, no re-draw. Safe to call on every full draw.
+   *
+   * @param {WalkontableInstance} wt The Walkontable facade for the rendered instance.
+   */ measure(wt) {
+        this.rowHeights.clear();
+        this.columnHeaderHeights.clear();
+        if (!wt?.wtTable) {
+            return;
+        }
+        const borderBoxSizing = wt.wtSettings.getSetting('stylesHandler').areCellsBorderBox();
+        _class_private_method_get(this, _measureRows, measureRows).call(this, wt.wtTable, borderBoxSizing);
+        // Frozen rows render in the top and bottom overlays' own tables, not the master TBODY, and the
+        // master's band leaves them behind as soon as the grid is scrolled. Every table that can hold a
+        // row the shared `oversizedRows` has a record for must be measured, or the probe silently stops
+        // mirroring it:
+        //
+        // - the bottom clone measures itself (`markOversizedRows`, from `renderCellBand`);
+        // - frozen ROW heights that came from a frozen COLUMN are measured off the inline-start clone
+        //   and the two corners by `syncOversizedRowsWithFrozenOverlays`, which then applies them to the
+        //   top and bottom clones — so those clones carry the final height by the time this runs.
+        //
+        // The master's band and these two together cover every row that can be recorded. The
+        // inline-start clone mirrors the master's band, so it adds no rows of its own.
+        [
+            wt.wtOverlays?.topOverlay?.clone,
+            wt.wtOverlays?.bottomOverlay?.clone
+        ].forEach((clone)=>{
+            if (clone?.wtTable) {
+                _class_private_method_get(this, _measureRows, measureRows).call(this, clone.wtTable, borderBoxSizing);
+            }
+        });
+        _class_private_method_get(this, _measureColumnHeaders, measureColumnHeaders).call(this, wt.wtTable);
+    }
+    /**
+   * Whether any measured column-header level is taller than the default header height, i.e. a
+   * content-driven (or configured) header that the overlays must be re-synced to. Used to gate the
+   * post-draw header reconcile so normal single-line headers pay nothing.
+   *
+   * @param {number} defaultHeight The default header (row) height in px.
+   * @returns {boolean}
+   */ hasColumnHeaderTallerThan(defaultHeight) {
+        for (const height of this.columnHeaderHeights.values()){
+            if (height > defaultHeight) {
+                return true;
+            }
+        }
+        return false;
+    }
+    constructor(){
+        _class_private_method_init(this, _measureRows);
+        _class_private_method_init(this, _measureColumnHeaders);
+        /**
+   * Measured row heights, keyed by the engine's source row index (equivalently, Handsontable's
+   * renderable row index). Mirrors the values the engine writes to `wtViewport.oversizedRows` for the
+   * rows it deems oversized; this map holds every rendered row, so the pinned subset is
+   * `oversizedRows`'s keys.
+   *
+   * @type {Map<number, number>}
+   */ this.rowHeights = new Map();
+        /**
+   * Measured column-header row heights, keyed by header level. Mirrors the rendered THEAD row heights
+   * the engine reads into `wtViewport.oversizedColumnHeaders`.
+   *
+   * @type {Map<number, number>}
+   */ this.columnHeaderHeights = new Map();
+    }
+}
+function measureRows(wtTable, borderBoxSizing) {
+    const { TBODY, rowFilter } = wtTable;
+    if (!TBODY || !rowFilter) {
+        return;
+    }
+    const heightFn = borderBoxSizing ? _element.outerHeight : _element.innerHeight;
+    const borderCompensation = borderBoxSizing ? 0 : 1;
+    let renderedRowIndex = TBODY.childNodes.length;
+    while(renderedRowIndex){
+        renderedRowIndex -= 1;
+        const sourceRowIndex = rowFilter.renderedToSource(renderedRowIndex);
+        const currentTr = TBODY.childNodes[renderedRowIndex];
+        const rowHeader = currentTr.querySelector('th');
+        let rowCurrentHeight;
+        if (rowHeader) {
+            rowCurrentHeight = heightFn(rowHeader);
+        } else {
+            rowCurrentHeight = heightFn(currentTr) - borderCompensation;
+        }
+        if (!borderBoxSizing) {
+            rowCurrentHeight += 1;
+        }
+        this.rowHeights.set(sourceRowIndex, rowCurrentHeight);
+    }
+}
+function measureColumnHeaders(wtTable) {
+    const { THEAD } = wtTable;
+    if (!THEAD) {
+        return;
+    }
+    const headerRows = THEAD.childNodes;
+    for(let level = 0, len = headerRows.length; level < len; level++){
+        const cells = headerRows[level].childNodes;
+        let maxHeight;
+        for(let col = 0; col < cells.length; col++){
+            const cell = cells[col];
+            // Skip cells that span more than one header row (nested-header rowspan). Their height covers
+            // several levels, so measuring it as this level's height would push the lower levels down.
+            // Only single-row header cells carry a content-driven per-level height.
+            if (cell instanceof HTMLTableCellElement && cell.rowSpan <= 1) {
+                const cellHeight = (0, _element.innerHeight)(cell);
+                if (maxHeight === undefined || cellHeight > maxHeight) {
+                    maxHeight = cellHeight;
+                }
+            }
+        }
+        if (maxHeight !== undefined) {
+            this.columnHeaderHeights.set(level, maxHeight);
+        }
+    }
+}

package/renderSizeProbe.mjs

@@ -0,0 +1,176 @@
+function _check_private_redeclaration(obj, privateCollection) {
+    if (privateCollection.has(obj)) {
+        throw new TypeError("Cannot initialize the same private elements twice on an object");
+    }
+}
+function _class_private_method_get(receiver, privateSet, fn) {
+    if (!privateSet.has(receiver)) {
+        throw new TypeError("attempted to get private field on non-instance");
+    }
+    return fn;
+}
+function _class_private_method_init(obj, privateSet) {
+    _check_private_redeclaration(obj, privateSet);
+    privateSet.add(obj);
+}
+import { innerHeight, outerHeight } from './helpers/dom/element.mjs';
+var /**
+   * Measures every rendered row of one table body and stores the height under its source row index.
+   * The formula matches `markOversizedRows` (`axisSizing/oversizedRows`)'s stored value exactly (a row with a row header is
+   * measured from the TH; otherwise from the TR minus the content-box border, then the content-box
+   * `+1` is folded back so the stored value equals the engine's).
+   *
+   * @param {object} wtTable The engine table (master or bottom clone) whose TBODY is measured.
+   * @param {boolean} borderBoxSizing Whether cells use `box-sizing: border-box` (the theme axis).
+   */ _measureRows = /*#__PURE__*/ new WeakSet(), /**
+   * Measures the rendered column-header heights per level. Matches
+   * `Table.markIfOversizedColumnHeader`, which reads `innerHeight` of each header CELL (TH) and keeps
+   * the tallest per level — not the THEAD row height, which is a border taller. Each THEAD child is a
+   * header row (one per level); its TH cells are the per-column headers.
+   *
+   * @param {object} wtTable The master engine table whose THEAD is measured.
+   */ _measureColumnHeaders = /*#__PURE__*/ new WeakSet();
+/**
+ * A measurement-only ("shadow") probe of the rendered grid.
+ *
+ * The single-pass refactor moves content-driven size discovery out of the rendering engine. Today
+ * Walkontable measures the rendered rows and headers mid-draw (`markOversizedRows` and
+ * `syncOversizedColumnHeadersWithFrozenOverlays`, both in `axisSizing/oversizedRows`) and re-runs
+ * its calculators in the same draw. The end
+ * state supplies every size to the engine up front, so the engine renders once; whatever content
+ * height cannot be known up front (wrapped cells and multi-line headers, with `AutoRowSize` off) is
+ * discovered by this Handsontable-side probe after the draw and fed back into the next one.
+ *
+ * This class is the first, deliberately inert, step of that move. It runs after a full master draw
+ * (from `TableView.afterRender`, the engine's `onDraw` callback, when the DOM is final), measures the
+ * rendered row and column-header heights, and stores them in its own maps. It does NOT feed the
+ * values into any size read and it does NOT trigger a re-draw — the engine's own oversized machinery
+ * still owns the frame, unchanged. Consuming these values (and deleting the engine machinery) is the
+ * next stage's work, gated behind the single-pass behavior change.
+ *
+ * Its only present job is to prove that an independent measurement produces the same numbers the
+ * engine records in `wtViewport.oversizedRows` / `wtViewport.oversizedColumnHeaders`. The
+ * characterization spec pins that equality, so the later deletion of the engine machinery rests on a
+ * verified replacement. The row and header measurement math is a faithful copy of the engine methods
+ * named above, including the border-box compensations.
+ */ export class RenderSizeProbe {
+    /**
+   * Measures the rendered grid and refreshes the stored maps. A pure read — no DOM writes, no size
+   * feedback, no re-draw. Safe to call on every full draw.
+   *
+   * @param {WalkontableInstance} wt The Walkontable facade for the rendered instance.
+   */ measure(wt) {
+        this.rowHeights.clear();
+        this.columnHeaderHeights.clear();
+        if (!wt?.wtTable) {
+            return;
+        }
+        const borderBoxSizing = wt.wtSettings.getSetting('stylesHandler').areCellsBorderBox();
+        _class_private_method_get(this, _measureRows, measureRows).call(this, wt.wtTable, borderBoxSizing);
+        // Frozen rows render in the top and bottom overlays' own tables, not the master TBODY, and the
+        // master's band leaves them behind as soon as the grid is scrolled. Every table that can hold a
+        // row the shared `oversizedRows` has a record for must be measured, or the probe silently stops
+        // mirroring it:
+        //
+        // - the bottom clone measures itself (`markOversizedRows`, from `renderCellBand`);
+        // - frozen ROW heights that came from a frozen COLUMN are measured off the inline-start clone
+        //   and the two corners by `syncOversizedRowsWithFrozenOverlays`, which then applies them to the
+        //   top and bottom clones — so those clones carry the final height by the time this runs.
+        //
+        // The master's band and these two together cover every row that can be recorded. The
+        // inline-start clone mirrors the master's band, so it adds no rows of its own.
+        [
+            wt.wtOverlays?.topOverlay?.clone,
+            wt.wtOverlays?.bottomOverlay?.clone
+        ].forEach((clone)=>{
+            if (clone?.wtTable) {
+                _class_private_method_get(this, _measureRows, measureRows).call(this, clone.wtTable, borderBoxSizing);
+            }
+        });
+        _class_private_method_get(this, _measureColumnHeaders, measureColumnHeaders).call(this, wt.wtTable);
+    }
+    /**
+   * Whether any measured column-header level is taller than the default header height, i.e. a
+   * content-driven (or configured) header that the overlays must be re-synced to. Used to gate the
+   * post-draw header reconcile so normal single-line headers pay nothing.
+   *
+   * @param {number} defaultHeight The default header (row) height in px.
+   * @returns {boolean}
+   */ hasColumnHeaderTallerThan(defaultHeight) {
+        for (const height of this.columnHeaderHeights.values()){
+            if (height > defaultHeight) {
+                return true;
+            }
+        }
+        return false;
+    }
+    constructor(){
+        _class_private_method_init(this, _measureRows);
+        _class_private_method_init(this, _measureColumnHeaders);
+        /**
+   * Measured row heights, keyed by the engine's source row index (equivalently, Handsontable's
+   * renderable row index). Mirrors the values the engine writes to `wtViewport.oversizedRows` for the
+   * rows it deems oversized; this map holds every rendered row, so the pinned subset is
+   * `oversizedRows`'s keys.
+   *
+   * @type {Map<number, number>}
+   */ this.rowHeights = new Map();
+        /**
+   * Measured column-header row heights, keyed by header level. Mirrors the rendered THEAD row heights
+   * the engine reads into `wtViewport.oversizedColumnHeaders`.
+   *
+   * @type {Map<number, number>}
+   */ this.columnHeaderHeights = new Map();
+    }
+}
+function measureRows(wtTable, borderBoxSizing) {
+    const { TBODY, rowFilter } = wtTable;
+    if (!TBODY || !rowFilter) {
+        return;
+    }
+    const heightFn = borderBoxSizing ? outerHeight : innerHeight;
+    const borderCompensation = borderBoxSizing ? 0 : 1;
+    let renderedRowIndex = TBODY.childNodes.length;
+    while(renderedRowIndex){
+        renderedRowIndex -= 1;
+        const sourceRowIndex = rowFilter.renderedToSource(renderedRowIndex);
+        const currentTr = TBODY.childNodes[renderedRowIndex];
+        const rowHeader = currentTr.querySelector('th');
+        let rowCurrentHeight;
+        if (rowHeader) {
+            rowCurrentHeight = heightFn(rowHeader);
+        } else {
+            rowCurrentHeight = heightFn(currentTr) - borderCompensation;
+        }
+        if (!borderBoxSizing) {
+            rowCurrentHeight += 1;
+        }
+        this.rowHeights.set(sourceRowIndex, rowCurrentHeight);
+    }
+}
+function measureColumnHeaders(wtTable) {
+    const { THEAD } = wtTable;
+    if (!THEAD) {
+        return;
+    }
+    const headerRows = THEAD.childNodes;
+    for(let level = 0, len = headerRows.length; level < len; level++){
+        const cells = headerRows[level].childNodes;
+        let maxHeight;
+        for(let col = 0; col < cells.length; col++){
+            const cell = cells[col];
+            // Skip cells that span more than one header row (nested-header rowspan). Their height covers
+            // several levels, so measuring it as this level's height would push the lower levels down.
+            // Only single-row header cells carry a content-driven per-level height.
+            if (cell instanceof HTMLTableCellElement && cell.rowSpan <= 1) {
+                const cellHeight = innerHeight(cell);
+                if (maxHeight === undefined || cellHeight > maxHeight) {
+                    maxHeight = cellHeight;
+                }
+            }
+        }
+        if (maxHeight !== undefined) {
+            this.columnHeaderHeights.set(level, maxHeight);
+        }
+    }
+}

package/renderers/checkboxRenderer/checkboxRenderer.js

@@ -224,7 +224,12 @@ function checkboxRenderer(hotInstance, TD, row, col, prop, value, cellProperties
             }
             for(let visualRow = startRow; visualRow <= endRow; visualRow += 1){
                 for(let visualColumn = startColumn; visualColumn <= endColumn; visualColumn += 1){
-                    const cachedCellProperties = hotInstance.getCellMeta(visualRow, visualColumn);
+                    // The transient read keeps a toggle over a large selection (for example, a whole
+                    // column) from permanently materializing one meta object per selected cell. The
+                    // default-template writes below may land on a throwaway object - the render path
+                    // re-applies the same defaults on every draw, and all reads in this loop happen on
+                    // this same object.
+                    const cachedCellProperties = hotInstance.getCellMetaTransient(visualRow, visualColumn);
                     /* eslint-disable no-continue */ if (cachedCellProperties.hidden) {
                         continue;
                     }
@@ -370,7 +375,7 @@ function checkboxRenderer(hotInstance, TD, row, col, prop, value, cellProperties
             }
             for(let visualRow = topLeft.row; visualRow <= bottomRight.row; visualRow++){
                 for(let visualColumn = topLeft.col; visualColumn <= bottomRight.col; visualColumn++){
-                    const cellMeta = hotInstance.getCellMeta(visualRow, visualColumn);
+                    const cellMeta = hotInstance.getCellMetaTransient(visualRow, visualColumn);
                     /* eslint-disable no-continue */ if (cellMeta.readOnly) {
                         continue;
                     }
@@ -469,7 +474,7 @@ checkboxRenderer.RENDERER_TYPE = RENDERER_TYPE;
     }
     const row = Number.parseInt(target.getAttribute(ATTR_ROW), 10);
     const col = Number.parseInt(target.getAttribute(ATTR_COLUMN), 10);
-    const cellProperties = instance.getCellMeta(row, col);
+    const cellProperties = instance.getCellMetaTransient(row, col);
     if (cellProperties.readOnly) {
         event.preventDefault();
     }
@@ -489,7 +494,7 @@ checkboxRenderer.RENDERER_TYPE = RENDERER_TYPE;
     }
     const row = Number.parseInt(target.getAttribute(ATTR_ROW), 10);
     const col = Number.parseInt(target.getAttribute(ATTR_COLUMN), 10);
-    const cellProperties = instance.getCellMeta(row, col);
+    const cellProperties = instance.getCellMetaTransient(row, col);
     if (!cellProperties.readOnly) {
         let newCheckboxValue = null;
         if (target.checked) {

package/renderers/checkboxRenderer/checkboxRenderer.mjs

@@ -212,7 +212,12 @@ Hooks.getSingleton().add('modifyAutoColumnSizeSeed', function(_bundleSeed, cellM
             }
             for(let visualRow = startRow; visualRow <= endRow; visualRow += 1){
                 for(let visualColumn = startColumn; visualColumn <= endColumn; visualColumn += 1){
-                    const cachedCellProperties = hotInstance.getCellMeta(visualRow, visualColumn);
+                    // The transient read keeps a toggle over a large selection (for example, a whole
+                    // column) from permanently materializing one meta object per selected cell. The
+                    // default-template writes below may land on a throwaway object - the render path
+                    // re-applies the same defaults on every draw, and all reads in this loop happen on
+                    // this same object.
+                    const cachedCellProperties = hotInstance.getCellMetaTransient(visualRow, visualColumn);
                     /* eslint-disable no-continue */ if (cachedCellProperties.hidden) {
                         continue;
                     }
@@ -358,7 +363,7 @@ Hooks.getSingleton().add('modifyAutoColumnSizeSeed', function(_bundleSeed, cellM
             }
             for(let visualRow = topLeft.row; visualRow <= bottomRight.row; visualRow++){
                 for(let visualColumn = topLeft.col; visualColumn <= bottomRight.col; visualColumn++){
-                    const cellMeta = hotInstance.getCellMeta(visualRow, visualColumn);
+                    const cellMeta = hotInstance.getCellMetaTransient(visualRow, visualColumn);
                     /* eslint-disable no-continue */ if (cellMeta.readOnly) {
                         continue;
                     }
@@ -457,7 +462,7 @@ checkboxRenderer.RENDERER_TYPE = RENDERER_TYPE;
     }
     const row = Number.parseInt(target.getAttribute(ATTR_ROW), 10);
     const col = Number.parseInt(target.getAttribute(ATTR_COLUMN), 10);
-    const cellProperties = instance.getCellMeta(row, col);
+    const cellProperties = instance.getCellMetaTransient(row, col);
     if (cellProperties.readOnly) {
         event.preventDefault();
     }
@@ -477,7 +482,7 @@ checkboxRenderer.RENDERER_TYPE = RENDERER_TYPE;
     }
     const row = Number.parseInt(target.getAttribute(ATTR_ROW), 10);
     const col = Number.parseInt(target.getAttribute(ATTR_COLUMN), 10);
-    const cellProperties = instance.getCellMeta(row, col);
+    const cellProperties = instance.getCellMetaTransient(row, col);
     if (!cellProperties.readOnly) {
         let newCheckboxValue = null;
         if (target.checked) {

package/renderers/index.d.ts

@@ -6,6 +6,7 @@ import { checkboxRenderer, RENDERER_TYPE as CHECKBOX_RENDERER } from './checkbox
 import { handsontableRenderer, RENDERER_TYPE as HANDSONTABLE_RENDERER } from './handsontableRenderer';
 import { htmlRenderer, RENDERER_TYPE as HTML_RENDERER } from './htmlRenderer';
 import { intlDateRenderer, RENDERER_TYPE as INTL_DATE_RENDERER } from './intlDateRenderer';
+import { intlDatetimeRenderer, RENDERER_TYPE as INTL_DATETIME_RENDERER } from './intlDatetimeRenderer';
 import { intlTimeRenderer, RENDERER_TYPE as INTL_TIME_RENDERER } from './intlTimeRenderer';
 import { numericRenderer, RENDERER_TYPE as NUMERIC_RENDERER } from './numericRenderer';
 import { passwordRenderer, RENDERER_TYPE as PASSWORD_RENDERER } from './passwordRenderer';
@@ -17,10 +18,10 @@ import { dateRenderer, RENDERER_TYPE as DATE_RENDERER } from './dateRenderer';
  * Registers all available renderers.
  */
 export declare function registerAllRenderers(): void;
-export { autocompleteRenderer, AUTOCOMPLETE_RENDERER, baseRenderer, BASE_RENDERER, dropdownRenderer, DROPDOWN_RENDERER, checkboxRenderer, CHECKBOX_RENDERER, handsontableRenderer, HANDSONTABLE_RENDERER, htmlRenderer, HTML_RENDERER, intlDateRenderer, INTL_DATE_RENDERER, intlTimeRenderer, INTL_TIME_RENDERER, numericRenderer, NUMERIC_RENDERER, passwordRenderer, PASSWORD_RENDERER, selectRenderer, SELECT_RENDERER, textRenderer, TEXT_RENDERER, timeRenderer, TIME_RENDERER, dateRenderer, DATE_RENDERER, };
+export { autocompleteRenderer, AUTOCOMPLETE_RENDERER, baseRenderer, BASE_RENDERER, dropdownRenderer, DROPDOWN_RENDERER, checkboxRenderer, CHECKBOX_RENDERER, handsontableRenderer, HANDSONTABLE_RENDERER, htmlRenderer, HTML_RENDERER, intlDateRenderer, INTL_DATE_RENDERER, intlDatetimeRenderer, INTL_DATETIME_RENDERER, intlTimeRenderer, INTL_TIME_RENDERER, numericRenderer, NUMERIC_RENDERER, passwordRenderer, PASSWORD_RENDERER, selectRenderer, SELECT_RENDERER, textRenderer, TEXT_RENDERER, timeRenderer, TIME_RENDERER, dateRenderer, DATE_RENDERER, };
 export { getRegisteredRendererNames, getRegisteredRenderers, getRenderer, hasRenderer, registerRenderer, } from './registry';
 export { rendererFactory } from './factory';
 /**
  * All built-in renderer type names.
  */
-export type RendererType = typeof AUTOCOMPLETE_RENDERER | typeof BASE_RENDERER | typeof CHECKBOX_RENDERER | typeof DROPDOWN_RENDERER | typeof HANDSONTABLE_RENDERER | typeof HTML_RENDERER | typeof INTL_DATE_RENDERER | typeof INTL_TIME_RENDERER | typeof NUMERIC_RENDERER | typeof PASSWORD_RENDERER | typeof SELECT_RENDERER | typeof TEXT_RENDERER | typeof TIME_RENDERER | typeof DATE_RENDERER | string;
+export type RendererType = typeof AUTOCOMPLETE_RENDERER | typeof BASE_RENDERER | typeof CHECKBOX_RENDERER | typeof DROPDOWN_RENDERER | typeof HANDSONTABLE_RENDERER | typeof HTML_RENDERER | typeof INTL_DATE_RENDERER | typeof INTL_DATETIME_RENDERER | typeof INTL_TIME_RENDERER | typeof NUMERIC_RENDERER | typeof PASSWORD_RENDERER | typeof SELECT_RENDERER | typeof TEXT_RENDERER | typeof TIME_RENDERER | typeof DATE_RENDERER | string;

package/renderers/index.js

@@ -30,6 +30,9 @@ _export(exports, {
     get HTML_RENDERER () {
         return _htmlRenderer.RENDERER_TYPE;
     },
+    get INTL_DATETIME_RENDERER () {
+        return _intlDatetimeRenderer.RENDERER_TYPE;
+    },
     get INTL_DATE_RENDERER () {
         return _intlDateRenderer.RENDERER_TYPE;
     },
@@ -87,6 +90,9 @@ _export(exports, {
     get intlDateRenderer () {
         return _intlDateRenderer.intlDateRenderer;
     },
+    get intlDatetimeRenderer () {
+        return _intlDatetimeRenderer.intlDatetimeRenderer;
+    },
     get intlTimeRenderer () {
         return _intlTimeRenderer.intlTimeRenderer;
     },
@@ -122,6 +128,7 @@ const _checkboxRenderer = require("./checkboxRenderer");
 const _handsontableRenderer = require("./handsontableRenderer");
 const _htmlRenderer = require("./htmlRenderer");
 const _intlDateRenderer = require("./intlDateRenderer");
+const _intlDatetimeRenderer = require("./intlDatetimeRenderer");
 const _intlTimeRenderer = require("./intlTimeRenderer");
 const _numericRenderer = require("./numericRenderer");
 const _passwordRenderer = require("./passwordRenderer");
@@ -139,6 +146,7 @@ function registerAllRenderers() {
     (0, _registry.registerRenderer)(_handsontableRenderer.handsontableRenderer);
     (0, _registry.registerRenderer)(_htmlRenderer.htmlRenderer);
     (0, _registry.registerRenderer)(_intlDateRenderer.intlDateRenderer);
+    (0, _registry.registerRenderer)(_intlDatetimeRenderer.intlDatetimeRenderer);
     (0, _registry.registerRenderer)(_intlTimeRenderer.intlTimeRenderer);
     (0, _registry.registerRenderer)(_numericRenderer.numericRenderer);
     (0, _registry.registerRenderer)(_passwordRenderer.passwordRenderer);

package/renderers/index.mjs

@@ -5,6 +5,7 @@ import { checkboxRenderer, RENDERER_TYPE as CHECKBOX_RENDERER } from './checkbox
 import { handsontableRenderer, RENDERER_TYPE as HANDSONTABLE_RENDERER } from './handsontableRenderer/index.mjs';
 import { htmlRenderer, RENDERER_TYPE as HTML_RENDERER } from './htmlRenderer/index.mjs';
 import { intlDateRenderer, RENDERER_TYPE as INTL_DATE_RENDERER } from './intlDateRenderer/index.mjs';
+import { intlDatetimeRenderer, RENDERER_TYPE as INTL_DATETIME_RENDERER } from './intlDatetimeRenderer/index.mjs';
 import { intlTimeRenderer, RENDERER_TYPE as INTL_TIME_RENDERER } from './intlTimeRenderer/index.mjs';
 import { numericRenderer, RENDERER_TYPE as NUMERIC_RENDERER } from './numericRenderer/index.mjs';
 import { passwordRenderer, RENDERER_TYPE as PASSWORD_RENDERER } from './passwordRenderer/index.mjs';
@@ -23,6 +24,7 @@ import { registerRenderer } from './registry.mjs';
     registerRenderer(handsontableRenderer);
     registerRenderer(htmlRenderer);
     registerRenderer(intlDateRenderer);
+    registerRenderer(intlDatetimeRenderer);
     registerRenderer(intlTimeRenderer);
     registerRenderer(numericRenderer);
     registerRenderer(passwordRenderer);
@@ -31,6 +33,6 @@ import { registerRenderer } from './registry.mjs';
     registerRenderer(timeRenderer);
     registerRenderer(dateRenderer);
 }
-export { autocompleteRenderer, AUTOCOMPLETE_RENDERER, baseRenderer, BASE_RENDERER, dropdownRenderer, DROPDOWN_RENDERER, checkboxRenderer, CHECKBOX_RENDERER, handsontableRenderer, HANDSONTABLE_RENDERER, htmlRenderer, HTML_RENDERER, intlDateRenderer, INTL_DATE_RENDERER, intlTimeRenderer, INTL_TIME_RENDERER, numericRenderer, NUMERIC_RENDERER, passwordRenderer, PASSWORD_RENDERER, selectRenderer, SELECT_RENDERER, textRenderer, TEXT_RENDERER, timeRenderer, TIME_RENDERER, dateRenderer, DATE_RENDERER };
+export { autocompleteRenderer, AUTOCOMPLETE_RENDERER, baseRenderer, BASE_RENDERER, dropdownRenderer, DROPDOWN_RENDERER, checkboxRenderer, CHECKBOX_RENDERER, handsontableRenderer, HANDSONTABLE_RENDERER, htmlRenderer, HTML_RENDERER, intlDateRenderer, INTL_DATE_RENDERER, intlDatetimeRenderer, INTL_DATETIME_RENDERER, intlTimeRenderer, INTL_TIME_RENDERER, numericRenderer, NUMERIC_RENDERER, passwordRenderer, PASSWORD_RENDERER, selectRenderer, SELECT_RENDERER, textRenderer, TEXT_RENDERER, timeRenderer, TIME_RENDERER, dateRenderer, DATE_RENDERER };
 export { getRegisteredRendererNames, getRegisteredRenderers, getRenderer, hasRenderer, registerRenderer } from './registry.mjs';
 export { rendererFactory } from './factory.mjs';

package/renderers/intlDatetimeRenderer/index.d.mts

@@ -0,0 +1 @@
+export * from './index.js';

package/renderers/intlDatetimeRenderer/index.d.ts

@@ -0,0 +1 @@
+export { RENDERER_TYPE, intlDatetimeRenderer, valueFormatter, } from './intlDatetimeRenderer';

package/renderers/intlDatetimeRenderer/index.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RENDERER_TYPE () {
+        return _intlDatetimeRenderer.RENDERER_TYPE;
+    },
+    get intlDatetimeRenderer () {
+        return _intlDatetimeRenderer.intlDatetimeRenderer;
+    },
+    get valueFormatter () {
+        return _intlDatetimeRenderer.valueFormatter;
+    }
+});
+const _intlDatetimeRenderer = require("./intlDatetimeRenderer");

package/renderers/intlDatetimeRenderer/index.mjs

@@ -0,0 +1 @@
+export { RENDERER_TYPE, intlDatetimeRenderer, valueFormatter } from './intlDatetimeRenderer.mjs';

package/renderers/intlDatetimeRenderer/intlDatetimeRenderer.d.mts

@@ -0,0 +1 @@
+export * from './intlDatetimeRenderer.js';

package/renderers/intlDatetimeRenderer/intlDatetimeRenderer.d.ts

@@ -0,0 +1,26 @@
+export declare const RENDERER_TYPE: 'intl-datetime';
+type CellProperties = Record<string, unknown> & {
+    dateTimeFormat?: Intl.DateTimeFormatOptions;
+    locale?: string;
+    allowEmpty?: boolean;
+    instance?: object;
+};
+/**
+ * Formats a date-time value using Intl.DateTimeFormat.
+ *
+ * @param {unknown} value The raw ISO date-time value.
+ * @param {CellProperties} cellProperties The cell meta object.
+ * @returns {unknown} The formatted date-time string, or a placeholder for empty/invalid values.
+ */
+export declare function valueFormatter(value: unknown, cellProperties: CellProperties): unknown;
+type HotInstance = Record<string, unknown>;
+/**
+ * The intl-datetime renderer function interface.
+ */
+export interface IntlDatetimeRendererFn {
+    (this: unknown, hotInstance: HotInstance, TD: HTMLTableCellElement, row: number, col: number, prop: string | number, value: unknown, cellProperties: CellProperties): void;
+    RENDERER_TYPE: string;
+    valueFormatter: typeof valueFormatter;
+}
+export declare const intlDatetimeRenderer: IntlDatetimeRendererFn;
+export {};

package/renderers/intlDatetimeRenderer/intlDatetimeRenderer.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get RENDERER_TYPE () {
+        return RENDERER_TYPE;
+    },
+    get intlDatetimeRenderer () {
+        return intlDatetimeRenderer;
+    },
+    get valueFormatter () {
+        return valueFormatter;
+    }
+});
+const _textRenderer = require("../textRenderer");
+const _mixed = require("../../helpers/mixed");
+const _object = require("../../helpers/object");
+const _constants = require("../../helpers/constants");
+const _dateTime = require("../../helpers/dateTime");
+const _console = require("../../helpers/console");
+const RENDERER_TYPE = 'intl-datetime';
+const DEFAULT_INTL_FORMAT = {
+    year: 'numeric',
+    month: '2-digit',
+    day: '2-digit',
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+    hour12: false
+};
+const stringFormatWarnShown = new WeakSet();
+function valueFormatter(value, cellProperties) {
+    const { dateTimeFormat, locale, allowEmpty, instance } = cellProperties;
+    if ((0, _mixed.isEmpty)(value)) {
+        return allowEmpty ? value : _constants.BAD_VALUE_TEXT;
+    }
+    if (typeof dateTimeFormat === 'string') {
+        if (instance && !stringFormatWarnShown.has(instance)) {
+            stringFormatWarnShown.add(instance);
+            (0, _console.warn)('The dateTimeFormat option as a string is not supported. Use an Intl.DateTimeFormatOptions object instead.');
+        }
+        return value;
+    }
+    const date = (0, _dateTime.parseToLocalDateTime)(value);
+    if (date === null) {
+        return _constants.BAD_VALUE_TEXT;
+    }
+    const intlFormat = (0, _object.isObject)(dateTimeFormat) ? dateTimeFormat : DEFAULT_INTL_FORMAT;
+    return new Intl.DateTimeFormat(locale, intlFormat).format(date);
+}
+/**
+ * Intl-based date-time renderer.
+ *
+ * @private
+ * @param {Core} hotInstance The Handsontable instance.
+ * @param {HTMLTableCellElement} TD The rendered cell element.
+ * @param {number} row The visual row index.
+ * @param {number} col The visual column index.
+ * @param {number|string} prop The column property (passed when datasource is an array of objects).
+ * @param {*} value The rendered value.
+ * @param {object} cellProperties The cell meta object (see {@link Core#getCellMeta}).
+ */ function _intlDatetimeRenderer(hotInstance, TD, row, col, prop, value, cellProperties) {
+    _textRenderer.textRenderer.apply(this, [
+        hotInstance,
+        TD,
+        row,
+        col,
+        prop,
+        value,
+        cellProperties
+    ]);
+}
+_intlDatetimeRenderer.valueFormatter = valueFormatter;
+_intlDatetimeRenderer.RENDERER_TYPE = RENDERER_TYPE;
+const intlDatetimeRenderer = _intlDatetimeRenderer;