handsontable 17.1.0 → 18.0.0-rc2

package/tableView.mjs

@@ -48,9 +48,9 @@ function _class_private_method_init(obj, privateSet) {
     _check_private_redeclaration(obj, privateSet);
     privateSet.add(obj);
 }
-import { addClass, removeClass, clearTextSelection, empty, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute, getParentWindow } from './helpers/dom/element.mjs';
+import { addClass, removeClass, clearTextSelection, empty, eventTargetEl, fastInnerHTML, fastInnerText, getScrollbarWidth, hasClass, isChildOf, isInput, isOutsideInput, isVisible, setAttribute, getParentWindow } from './helpers/dom/element.mjs';
 import EventManager from './eventManager.mjs';
-import { isImmediatePropagationStopped, isRightClick, isLeftClick } from './helpers/dom/event.mjs';
+import { isImmediatePropagationStopped, isRightClick, isLeftClick, isMiddleClick } 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';
@@ -175,7 +175,7 @@ var /**
    * @returns {HTMLTableCellElement|null}
    */ getCellAtCoords(coords, topmost) {
         const td = this._wt.getCell(coords, topmost);
-        if (td < 0) {
+        if (typeof td === 'number' && td < 0) {
             return null;
         }
         return td;
@@ -225,10 +225,10 @@ var /**
         const { rootElement, rootDocument } = this.hot;
         const originalStyle = rootElement.getAttribute('style');
         if (originalStyle) {
-            rootElement.setAttribute('data-originalstyle', originalStyle); // needed to retrieve original style in jsFiddle link generator in HT examples. may be removed in future versions
+            rootElement.dataset.originalstyle = originalStyle; // needed to retrieve original style in jsFiddle link generator in HT examples. may be removed in future versions
         }
         addClass(rootElement, 'handsontable');
-        _class_private_field_set(this, _table, rootDocument.createElement('TABLE'));
+        _class_private_field_set(this, _table, rootDocument.createElement('table'));
         addClass(_class_private_field_get(this, _table), 'htCore');
         if (this.hot.getSettings().tableClassName) {
             addClass(_class_private_field_get(this, _table), this.hot.getSettings().tableClassName);
@@ -244,9 +244,9 @@ var /**
                 A11Y_MULTISELECTABLE()
             ]);
         }
-        this.THEAD = rootDocument.createElement('THEAD');
+        this.THEAD = rootDocument.createElement('thead');
         _class_private_field_get(this, _table).appendChild(this.THEAD);
-        this.TBODY = rootDocument.createElement('TBODY');
+        this.TBODY = rootDocument.createElement('tbody');
         _class_private_field_get(this, _table).appendChild(this.TBODY);
         this.hot.table = _class_private_field_get(this, _table);
         this.hot.container.insertBefore(_class_private_field_get(this, _table), this.hot.container.firstChild);
@@ -263,8 +263,14 @@ var /**
             if (_class_private_method_get(this, _isSyntheticMouseEvent, isSyntheticMouseEvent).call(this, event)) {
                 return;
             }
+            // Leave the middle mouse button (the scroll wheel) untouched so the browser can start its
+            // native autoscroll. Calling `preventDefault()` on a middle-button mousedown cancels that
+            // panning behavior, which is available on Windows and Linux (https://github.com/handsontable/handsontable/issues/2722).
+            if (isMiddleClick(event)) {
+                return;
+            }
             _class_private_field_set(this, _selectionMouseDown, true);
-            if (!this.isTextSelectionAllowed(event.target)) {
+            if (!this.isTextSelectionAllowed(eventTargetEl(event))) {
                 clearTextSelection(rootWindow);
                 event.preventDefault();
                 rootWindow.focus(); // make sure that window that contains HOT is active. Important when HOT is in iframe.
@@ -278,7 +284,7 @@ var /**
             _class_private_field_set(this, _selectionMouseDown, false);
         });
         this.eventManager.addEventListener(rootElement, 'mousemove', (event)=>{
-            if (_class_private_field_get(this, _selectionMouseDown) && !this.isTextSelectionAllowed(event.target)) {
+            if (_class_private_field_get(this, _selectionMouseDown) && !this.isTextSelectionAllowed(eventTargetEl(event))) {
                 // Clear selection only when fragmentSelection is enabled, otherwise clearing selection breaks the IME editor.
                 if (this.settings.fragmentSelection) {
                     clearTextSelection(rootWindow);
@@ -337,8 +343,8 @@ var /**
         });
         this.eventManager.addEventListener(documentElement, 'mousedown', (event)=>{
             const originalTarget = event.target;
-            const eventX = event.x || event.clientX;
-            const eventY = event.y || event.clientY;
+            const eventX = event.clientX;
+            const eventY = event.clientY;
             let next = event.target;
             if (_class_private_field_get(this, _mouseDown) || !rootElement || !this.hot.view) {
                 return; // it must have been started in a cell
@@ -355,6 +361,7 @@ var /**
                     return;
                 }
             } else {
+                const { rootPortalElement } = this.hot;
                 while(next !== documentElement){
                     if (next === null) {
                         if (event.isTargetWebComponent) {
@@ -363,8 +370,8 @@ var /**
                         // click on something that was a row but now is detached (possibly because your click triggered a rerender)
                         return;
                     }
-                    if (next === rootElement) {
-                        // click inside container
+                    if (next === rootElement || next === rootPortalElement) {
+                        // click inside container or portal
                         return;
                     }
                     next = next.parentNode;
@@ -386,7 +393,7 @@ var /**
             parentWindow = getParentWindow(parentWindow);
         }
         this.eventManager.addEventListener(_class_private_field_get(this, _table), 'selectstart', (event)=>{
-            if (this.settings.fragmentSelection || isInput(event.target)) {
+            if (this.settings.fragmentSelection || isInput(eventTargetEl(event))) {
                 return;
             }
             // https://github.com/handsontable/handsontable/issues/160
@@ -428,14 +435,10 @@ var /**
    */ translateFromRenderableToVisualIndex(renderableRow, renderableColumn) {
         // TODO: Some helper may be needed.
         // We perform translation for indexes (without headers).
-        let visualRow = renderableRow >= 0 ? this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
-        let visualColumn = renderableColumn >= 0 ? this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
-        if (visualRow === null) {
-            visualRow = renderableRow;
-        }
-        if (visualColumn === null) {
-            visualColumn = renderableColumn;
-        }
+        const mappedRow = renderableRow >= 0 ? this.hot.rowIndexMapper.getVisualFromRenderableIndex(renderableRow) : renderableRow;
+        const mappedColumn = renderableColumn >= 0 ? this.hot.columnIndexMapper.getVisualFromRenderableIndex(renderableColumn) : renderableColumn;
+        const visualRow = mappedRow === null ? renderableRow : mappedRow;
+        const visualColumn = mappedColumn === null ? renderableColumn : mappedColumn;
         return [
             visualRow,
             visualColumn
@@ -457,7 +460,7 @@ var /**
         if (firstNotHiddenIndex === null) {
             return 0;
         }
-        return indexMapper.getRenderableFromVisualIndex(firstNotHiddenIndex) + 1;
+        return (indexMapper.getRenderableFromVisualIndex(firstNotHiddenIndex) ?? 0) + 1;
     }
     /**
    * Returns the number of renderable columns.
@@ -506,9 +509,10 @@ var /**
         if (isNaN(visualIndex) || visualIndex < 0) {
             return 0;
         }
-        const firstVisibleIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, incrementBy);
+        const searchDirection = incrementBy < 0 ? -1 : 1;
+        const firstVisibleIndex = indexMapper.getNearestNotHiddenIndex(visualIndex, searchDirection);
         const renderableIndex = indexMapper.getRenderableFromVisualIndex(firstVisibleIndex);
-        if (!Number.isInteger(renderableIndex)) {
+        if (renderableIndex === null || !Number.isInteger(renderableIndex)) {
             return 0;
         }
         let notHiddenIndexes = 0;
@@ -527,7 +531,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedColumnsStart() {
         const countCols = this.hot.countCols();
-        const visualFixedColumnsStart = Math.min(parseInt(this.settings.fixedColumnsStart, 10), countCols) - 1;
+        const visualFixedColumnsStart = Math.min(Number(this.settings.fixedColumnsStart) || 0, countCols) - 1;
         return this.countNotHiddenColumnIndexes(visualFixedColumnsStart, -1);
     }
     /**
@@ -537,7 +541,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedRowsTop() {
         const countRows = this.hot.countRows();
-        const visualFixedRowsTop = Math.min(parseInt(this.settings.fixedRowsTop, 10), countRows) - 1;
+        const visualFixedRowsTop = Math.min(Number(this.settings.fixedRowsTop) || 0, countRows) - 1;
         return this.countNotHiddenRowIndexes(visualFixedRowsTop, -1);
     }
     /**
@@ -547,7 +551,7 @@ var /**
    * @returns {number}
    */ countNotHiddenFixedRowsBottom() {
         const countRows = this.hot.countRows();
-        const visualFixedRowsBottom = Math.max(countRows - parseInt(this.settings.fixedRowsBottom, 10), 0);
+        const visualFixedRowsBottom = Math.max(countRows - (Number(this.settings.fixedRowsBottom) || 0), 0);
         return this.countNotHiddenRowIndexes(visualFixedRowsBottom, 1);
     }
     /**
@@ -581,26 +585,6 @@ var /**
         return count;
     }
     /**
-   * Add a class name to the license information element.
-   *
-   * @param {string} className The class name to add.
-   */ addClassNameToLicenseElement(className) {
-        const licenseInfoElement = this.hot.rootElement.parentNode?.querySelector('.hot-display-license-info');
-        if (licenseInfoElement) {
-            addClass(licenseInfoElement, className);
-        }
-    }
-    /**
-   * Remove a class name from the license information element.
-   *
-   * @param {string} className The class name to remove.
-   */ removeClassNameFromLicenseElement(className) {
-        const licenseInfoElement = this.hot.rootElement.parentNode?.querySelector('.hot-display-license-info');
-        if (licenseInfoElement) {
-            removeClass(licenseInfoElement, className);
-        }
-    }
-    /**
    * Checks if at least one cell than belongs to the main table is not covered by the top, left or
    * bottom overlay.
    *
@@ -626,7 +610,8 @@ var /**
             viewportColumnRenderingThreshold: ()=>this.settings.viewportColumnRenderingThreshold,
             viewportRowRenderingThreshold: ()=>this.settings.viewportRowRenderingThreshold,
             data: (renderableRow, renderableColumn)=>{
-                return this.hot.getDataAtCell(...this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn));
+                const [visualRow, visualCol] = this.translateFromRenderableToVisualIndex(renderableRow, renderableColumn);
+                return this.hot.getDataAtCell(visualRow, visualCol);
             },
             totalRows: ()=>this.countRenderableRows(),
             totalColumns: ()=>this.countRenderableColumns(),
@@ -638,15 +623,15 @@ var /**
             fixedRowsBottom: ()=>this.countNotHiddenFixedRowsBottom(),
             // Enable the inline start overlay when conditions are met.
             shouldRenderInlineStartOverlay: ()=>{
-                return this.settings.fixedColumnsStart > 0 || walkontableConfig.rowHeaders().length > 0;
+                return (this.settings.fixedColumnsStart ?? 0) > 0 || walkontableConfig.rowHeaders().length > 0;
             },
             // Enable the top overlay when conditions are met.
             shouldRenderTopOverlay: ()=>{
-                return this.settings.fixedRowsTop > 0 || walkontableConfig.columnHeaders().length > 0;
+                return (this.settings.fixedRowsTop ?? 0) > 0 || walkontableConfig.columnHeaders().length > 0;
             },
             // Enable the bottom overlay when conditions are met.
             shouldRenderBottomOverlay: ()=>{
-                return this.settings.fixedRowsBottom > 0;
+                return (this.settings.fixedRowsBottom ?? 0) > 0;
             },
             minSpareRows: ()=>this.settings.minSpareRows,
             renderAllRows: this.settings.renderAllRows,
@@ -721,8 +706,11 @@ var /**
                 let formattedValue = value;
                 if (typeof cellProperties.valueFormatter === 'function') {
                     formattedValue = cellProperties.valueFormatter(formattedValue, cellProperties);
-                } else if (typeof renderer.valueFormatter === 'function') {
-                    formattedValue = renderer.valueFormatter.call(cellProperties, formattedValue, cellProperties);
+                } else if (typeof renderer === 'function' && 'valueFormatter' in renderer) {
+                    const { valueFormatter } = renderer;
+                    if (typeof valueFormatter === 'function') {
+                        formattedValue = valueFormatter.call(cellProperties, formattedValue, cellProperties);
+                    }
                 }
                 this.hot.runHooks('beforeRenderer', TD, visualRowIndex, visualColumnIndex, prop, value, cellProperties);
                 const rendererArgs = [
@@ -766,8 +754,8 @@ var /**
                 this.activeWt = wt;
                 _class_private_field_set(this, _mouseDown, true);
                 _class_private_field_set(this, _mouseDownLastPos, {
-                    x: event.clientX,
-                    y: event.clientY
+                    row: event.clientX,
+                    col: event.clientY
                 });
                 this.hot.runHooks('beforeOnCellMouseDown', event, visualCoords, TD, controller);
                 if (isImmediatePropagationStopped(event)) {
@@ -821,7 +809,7 @@ var /**
                 // Ignore mouseover events when the mouse has not moved. This solves an issue (#dev-1479) where
                 // column resizing triggered by the long text in the cell causes the mouseover event to be fired,
                 // thus selecting multiple cells with no user intention.
-                if (_class_private_field_get(this, _mouseDown) && (!_class_private_field_get(this, _mouseDownLastPos) || _class_private_field_get(this, _mouseDownLastPos).x !== event.clientX || _class_private_field_get(this, _mouseDownLastPos).y !== event.clientY)) {
+                if (_class_private_field_get(this, _mouseDown) && (!_class_private_field_get(this, _mouseDownLastPos) || _class_private_field_get(this, _mouseDownLastPos).row !== event.clientX || _class_private_field_get(this, _mouseDownLastPos).col !== event.clientY)) {
                     handleMouseEvent(event, {
                         coords: visualCoords,
                         selection: this.hot.selection,
@@ -833,6 +821,28 @@ var /**
                 this.activeWt = this._wt;
                 _class_private_field_set(this, _mouseDownLastPos, null);
             },
+            onCellMouseOverOutside: (event, coords, TD, wt)=>{
+                const visualCoords = this.translateFromRenderableToVisualCoords(coords);
+                const controller = {
+                    row: false,
+                    column: false,
+                    cell: false
+                };
+                this.activeWt = wt;
+                this.hot.runHooks('beforeOnCellMouseOverOutside', event, visualCoords, TD, controller);
+                if (isImmediatePropagationStopped(event)) {
+                    return;
+                }
+                handleMouseEvent(event, {
+                    coords: visualCoords,
+                    selection: this.hot.selection,
+                    controller,
+                    cellCoordsFactory: (row, column)=>this.hot._createCellCoords(row, column)
+                });
+                this.hot.runHooks('afterOnCellMouseOverOutside', event, visualCoords, TD);
+                this.activeWt = this._wt;
+                _class_private_field_set(this, _mouseDownLastPos, null);
+            },
             onCellMouseUp: (event, coords, TD, wt)=>{
                 const visualCoords = this.translateFromRenderableToVisualCoords(coords);
                 this.activeWt = wt;
@@ -867,11 +877,12 @@ var /**
                 const areColumnHeadersSelected = renderableRow < 0;
                 let visualRow = renderableRow;
                 if (!areColumnHeadersSelected) {
-                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+                    const mappedRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
                     // for an empty data return index as is
-                    if (visualRow === null) {
+                    if (mappedRow === null) {
                         return renderableRow;
                     }
+                    visualRow = mappedRow;
                 }
                 visualRow = this.hot.runHooks('beforeViewportScrollVertically', visualRow, snapping);
                 this.hot.runHooks('beforeViewportScroll');
@@ -885,11 +896,12 @@ var /**
                 const areRowHeadersSelected = renderableColumn < 0;
                 let visualColumn = renderableColumn;
                 if (!areRowHeadersSelected) {
-                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+                    const mappedColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
                     // for an empty data return index as is
-                    if (visualColumn === null) {
+                    if (mappedColumn === null) {
                         return renderableColumn;
                     }
+                    visualColumn = mappedColumn;
                 }
                 visualColumn = this.hot.runHooks('beforeViewportScrollHorizontally', visualColumn, snapping);
                 this.hot.runHooks('beforeViewportScroll');
@@ -912,7 +924,7 @@ var /**
                 const areColumnHeadersSelected = renderableRow < 0;
                 let visualRow = renderableRow;
                 if (!areColumnHeadersSelected) {
-                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow);
+                    visualRow = rowMapper.getVisualFromRenderableIndex(renderableRow) ?? renderableRow;
                 }
                 const newVisualRow = this.hot.runHooks('beforeHighlightingRowHeader', visualRow, headerLevel, highlightMeta);
                 if (!areColumnHeadersSelected) {
@@ -925,7 +937,7 @@ var /**
                 const areRowHeadersSelected = renderableColumn < 0;
                 let visualColumn = renderableColumn;
                 if (!areRowHeadersSelected) {
-                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn);
+                    visualColumn = columnMapper.getVisualFromRenderableIndex(renderableColumn) ?? renderableColumn;
                 }
                 const newVisualColumn = this.hot.runHooks('beforeHighlightingColumnHeader', visualColumn, headerLevel, highlightMeta);
                 if (!areRowHeadersSelected) {
@@ -995,30 +1007,24 @@ var /**
                 }
             },
             viewportRowCalculatorOverride: (calc)=>{
-                let viewportOffset = this.settings.viewportRowRenderingOffset;
-                if (viewportOffset === 'auto') {
-                    viewportOffset = 1;
-                }
-                if (viewportOffset > 0) {
+                const viewportOffset = this.settings.viewportRowRenderingOffset === 'auto' ? 1 : this.settings.viewportRowRenderingOffset;
+                if ((viewportOffset ?? 0) > 0) {
                     const renderableRows = this.countRenderableRows();
                     const firstRenderedRow = calc.startRow;
                     const lastRenderedRow = calc.endRow;
-                    calc.startRow = Math.max(firstRenderedRow - viewportOffset, 0);
-                    calc.endRow = Math.min(lastRenderedRow + viewportOffset, renderableRows - 1);
+                    calc.startRow = Math.max(firstRenderedRow - (viewportOffset ?? 0), 0);
+                    calc.endRow = Math.min(lastRenderedRow + (viewportOffset ?? 0), renderableRows - 1);
                 }
                 this.hot.runHooks('afterViewportRowCalculatorOverride', calc);
             },
             viewportColumnCalculatorOverride: (calc)=>{
-                let viewportOffset = this.settings.viewportColumnRenderingOffset;
-                if (viewportOffset === 'auto') {
-                    viewportOffset = 1;
-                }
-                if (viewportOffset > 0) {
+                const viewportOffset = this.settings.viewportColumnRenderingOffset === 'auto' ? 1 : this.settings.viewportColumnRenderingOffset;
+                if ((viewportOffset ?? 0) > 0) {
                     const renderableColumns = this.countRenderableColumns();
                     const firstRenderedColumn = calc.startColumn;
                     const lastRenderedColumn = calc.endColumn;
-                    calc.startColumn = Math.max(firstRenderedColumn - viewportOffset, 0);
-                    calc.endColumn = Math.min(lastRenderedColumn + viewportOffset, renderableColumns - 1);
+                    calc.startColumn = Math.max(firstRenderedColumn - (viewportOffset ?? 0), 0);
+                    calc.endColumn = Math.min(lastRenderedColumn + (viewportOffset ?? 0), renderableColumns - 1);
                 }
                 this.hot.runHooks('afterViewportColumnCalculatorOverride', calc);
             },
@@ -1096,7 +1102,7 @@ var /**
    * @returns {boolean}
    */ isCellEdited() {
         const activeEditor = this.hot.getActiveEditor();
-        return activeEditor && activeEditor.isOpened();
+        return activeEditor?.isOpened();
     }
     /**
    * `beforeDraw` callback.
@@ -1161,7 +1167,11 @@ var /**
    */ appendColHeader(visualColumnIndex, TH, label = this.hot.getColHeader, headerLevel = 0) {
         const getColumnHeaderClassNames = ()=>{
             const metaHeaderClassNames = visualColumnIndex >= 0 ? this.hot.getColumnMeta(visualColumnIndex).headerClassName : null;
-            return metaHeaderClassNames ? metaHeaderClassNames.split(' ') : [];
+            if (!metaHeaderClassNames) {
+                return [];
+            }
+            const classes = Array.isArray(metaHeaderClassNames) ? metaHeaderClassNames : metaHeaderClassNames.split(' ');
+            return classes.flatMap((cls)=>cls.split(' ')).filter((cls)=>cls.length > 0);
         };
         if (TH.firstChild) {
             const container = TH.firstChild;
@@ -1184,8 +1194,12 @@ var /**
             div.classList.add('relative', ...classNames);
             span.className = 'colHeader';
             if (this.settings.ariaTags) {
-                setAttribute(div, ...A11Y_PRESENTATION());
-                setAttribute(span, ...A11Y_PRESENTATION());
+                setAttribute(div, [
+                    A11Y_PRESENTATION()
+                ]);
+                setAttribute(span, [
+                    A11Y_PRESENTATION()
+                ]);
             }
             this.updateCellHeader(span, visualColumnIndex, label, headerLevel);
             div.appendChild(span);
@@ -1214,7 +1228,7 @@ var /**
             }
         }
         if (renderedIndex > -1) {
-            fastInnerHTML(element, content(index, headerLevel), this.hot.getSettings().sanitizer);
+            fastInnerHTML(element, String(content(index, headerLevel)), this.hot.getSettings().sanitizer ?? true, 'header', this.hot.rootGridElement ?? undefined);
         } else {
             // workaround for https://github.com/handsontable/handsontable/issues/1946
             fastInnerText(element, String.fromCharCode(160));
@@ -1620,6 +1634,8 @@ var /**
    * @type {boolean}
    */ this.postponedAdjustElementsSize = false;
         _class_private_field_set(this, _selectionMouseDown, false);
+        _class_private_field_set(this, _mouseDown, false);
+        _class_private_field_set(this, _table, null);
         _class_private_field_set(this, _lastWidth, 0);
         _class_private_field_set(this, _lastHeight, 0);
         _class_private_field_set(this, _mouseDownLastPos, null);
@@ -1640,11 +1656,13 @@ function isSyntheticMouseEvent(event) {
     return _class_private_field_get(this, _recentTouchEnd);
 }
 function getAriaColcount() {
-    return parseInt(this.hot.rootElement.getAttribute(A11Y_COLCOUNT()[0]), 10);
+    return parseInt(this.hot.rootElement.getAttribute('aria-colcount') ?? '0', 10);
 }
 function updateAriaColcount(delta) {
     const colCount = _class_private_method_get(this, _getAriaColcount, getAriaColcount).call(this) + delta;
-    setAttribute(this.hot.rootElement, ...A11Y_COLCOUNT(colCount));
+    setAttribute(this.hot.rootElement, [
+        A11Y_COLCOUNT(colCount)
+    ]);
 }
 function updateScrollbarClassNames() {
     const rootElement = this.hot.rootElement;

package/themes/engine/builder.d.mts

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

package/themes/engine/builder.d.ts

@@ -0,0 +1,56 @@
+import type { ThemeConfig, ThemeParams, ThemeColorScheme, DensityType } from '../types';
+/**
+ * ThemeBuilder class provides methods to build and configure themes.
+ *
+ * @class ThemeBuilder
+ */
+export declare class ThemeBuilder {
+    #private;
+    /**
+     * The theme builder constructor.
+     *
+     * @param {object} themeConfig - The theme config object with `name`, `sizing`, `density`, `icons`, `colors`, `tokens`, and `colorScheme` properties.
+     */
+    constructor(themeConfig: ThemeParams);
+    /**
+     * Subscribes to theme configuration changes.
+     *
+     * @param {Function} listener The callback invoked with the updated theme configuration.
+     * @returns {Function} An unsubscribe function.
+     */
+    subscribe(listener: (config: ThemeConfig) => void): () => boolean;
+    /**
+     * Sets theme configuration parameters.
+     *
+     * @param {object} paramsObject An object with theme configuration parameters.
+     * @returns {ThemeBuilder} The ThemeBuilder instance for chaining.
+     */
+    params(paramsObject: ThemeParams): ThemeBuilder;
+    /**
+     * Sets the color mode (light, dark, or auto).
+     *
+     * @param {string} mode The color mode ('light', 'dark', or 'auto').
+     * @returns {ThemeBuilder} The ThemeBuilder instance for chaining.
+     */
+    setColorScheme(mode: ThemeColorScheme): ThemeBuilder;
+    /**
+     * Sets the density type (compact, default, or comfortable).
+     *
+     * @param {string} type The density type ('compact', 'default', or 'comfortable').
+     * @returns {ThemeBuilder} The ThemeBuilder instance for chaining.
+     */
+    setDensityType(type: DensityType): ThemeBuilder;
+    /**
+     * Gets the current theme configuration.
+     *
+     * @returns {ThemeConfig} The theme configuration object.
+     */
+    getThemeConfig(): ThemeConfig;
+}
+/**
+ * Creates a new ThemeBuilder instance.
+ *
+ * @param {object} baseTheme The base theme object with theme configuration parameters.
+ * @returns {ThemeBuilder} The ThemeBuilder instance.
+ */
+export declare function createTheme(baseTheme: ThemeParams): ThemeBuilder;

package/themes/engine/builder.js

@@ -2,9 +2,17 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "createTheme", {
-    enumerable: true,
-    get: function() {
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get ThemeBuilder () {
+        return ThemeBuilder;
+    },
+    get createTheme () {
         return createTheme;
     }
 });
@@ -132,11 +140,7 @@ var /**
    * @private
    * @param {object} paramsObject The parameters object to set.
    */ _setParams = /*#__PURE__*/ new WeakSet();
-/**
- * ThemeBuilder class provides methods to build and configure themes.
- *
- * @class ThemeBuilder
- */ class ThemeBuilder {
+class ThemeBuilder {
     /**
    * Subscribes to theme configuration changes.
    *
@@ -246,13 +250,16 @@ function notifyChange() {
     _class_private_field_get(this, _listeners).forEach((listener)=>listener(config));
 }
 function applyDensityConfig(config, density) {
-    if ((0, _object.isObject)(density)) {
-        config.density = (0, _object.deepMerge)(config.density, density);
-        _class_private_field_set(this, _densityType, density.type);
-        if (_class_private_field_get(this, _initThemeConfig)?.density) {
-            _class_private_field_get(this, _initThemeConfig).density.type = density.type;
+    if (typeof density !== 'string') {
+        const mergedDensity = (0, _object.deepMerge)(config.density, density);
+        config.density = mergedDensity;
+        if (density.type !== undefined) {
+            _class_private_field_set(this, _densityType, density.type);
+            if (_class_private_field_get(this, _initThemeConfig)?.density) {
+                _class_private_field_get(this, _initThemeConfig).density.type = density.type;
+            }
         }
-    } else if (typeof density === 'string') {
+    } else {
         config.density.type = density;
         _class_private_field_set(this, _densityType, density);
         if (_class_private_field_get(this, _initThemeConfig)?.density) {
@@ -262,6 +269,7 @@ function applyDensityConfig(config, density) {
 }
 function setParams(paramsObject) {
     const config = (0, _object.deepClone)(_class_private_field_get(this, _initThemeConfig));
+    const paramsRecord = paramsObject;
     if (paramsObject.name !== undefined) {
         if (_class_private_field_get(this, _initThemeConfig).name !== undefined) {
             (0, _console.warn)('[ThemeBuilder] The "name" property can only be set during ' + '`registerTheme()` and cannot be updated via `params()`.');
@@ -271,8 +279,8 @@ function setParams(paramsObject) {
     }
     // Apply mergeable config keys
     MERGEABLE_CONFIG_KEYS.forEach((key)=>{
-        if (paramsObject[key] !== undefined && (0, _object.isObject)(paramsObject[key])) {
-            config[key] = (0, _object.deepMerge)(config[key], paramsObject[key]);
+        if (paramsRecord[key] !== undefined && (0, _object.isObject)(paramsRecord[key])) {
+            config[key] = (0, _object.deepMerge)(config[key], paramsRecord[key]);
         }
     });
     // Apply density (special handling for string or object)

package/themes/engine/builder.mjs

@@ -121,7 +121,7 @@ var /**
  * ThemeBuilder class provides methods to build and configure themes.
  *
  * @class ThemeBuilder
- */ class ThemeBuilder {
+ */ export class ThemeBuilder {
     /**
    * Subscribes to theme configuration changes.
    *
@@ -231,13 +231,16 @@ function notifyChange() {
     _class_private_field_get(this, _listeners).forEach((listener)=>listener(config));
 }
 function applyDensityConfig(config, density) {
-    if (isObject(density)) {
-        config.density = deepMerge(config.density, density);
-        _class_private_field_set(this, _densityType, density.type);
-        if (_class_private_field_get(this, _initThemeConfig)?.density) {
-            _class_private_field_get(this, _initThemeConfig).density.type = density.type;
+    if (typeof density !== 'string') {
+        const mergedDensity = deepMerge(config.density, density);
+        config.density = mergedDensity;
+        if (density.type !== undefined) {
+            _class_private_field_set(this, _densityType, density.type);
+            if (_class_private_field_get(this, _initThemeConfig)?.density) {
+                _class_private_field_get(this, _initThemeConfig).density.type = density.type;
+            }
         }
-    } else if (typeof density === 'string') {
+    } else {
         config.density.type = density;
         _class_private_field_set(this, _densityType, density);
         if (_class_private_field_get(this, _initThemeConfig)?.density) {
@@ -247,6 +250,7 @@ function applyDensityConfig(config, density) {
 }
 function setParams(paramsObject) {
     const config = deepClone(_class_private_field_get(this, _initThemeConfig));
+    const paramsRecord = paramsObject;
     if (paramsObject.name !== undefined) {
         if (_class_private_field_get(this, _initThemeConfig).name !== undefined) {
             warn('[ThemeBuilder] The "name" property can only be set during ' + '`registerTheme()` and cannot be updated via `params()`.');
@@ -256,8 +260,8 @@ function setParams(paramsObject) {
     }
     // Apply mergeable config keys
     MERGEABLE_CONFIG_KEYS.forEach((key)=>{
-        if (paramsObject[key] !== undefined && isObject(paramsObject[key])) {
-            config[key] = deepMerge(config[key], paramsObject[key]);
+        if (paramsRecord[key] !== undefined && isObject(paramsRecord[key])) {
+            config[key] = deepMerge(config[key], paramsRecord[key]);
         }
     });
     // Apply density (special handling for string or object)

package/themes/engine/index.d.mts

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

package/themes/engine/index.d.ts

@@ -0,0 +1,3 @@
+export { createTheme, ThemeBuilder } from './builder';
+export { createThemeManager, ThemeManager } from './manager';
+export type { ThemeConfig, ThemeParams, BaseTheme, ThemeColorScheme, DensityType } from '../types';

package/themes/engine/index.js

@@ -9,6 +9,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    get ThemeBuilder () {
+        return _builder.ThemeBuilder;
+    },
+    get ThemeManager () {
+        return _manager.ThemeManager;
+    },
     get createTheme () {
         return _builder.createTheme;
     },