handsontable 17.1.0 → 18.0.0-rc2

package/plugins/emptyDataState/emptyDataState.mjs

@@ -52,6 +52,15 @@ import { BasePlugin } from '../base/index.mjs';
 import { EmptyDataStateUI } from './ui.mjs';
 import { isObject } from '../../helpers/object.mjs';
 import * as C from '../../i18n/constants.mjs';
+/**
+ * Local type-guard narrowing `unknown` to `Record<string, unknown>`.
+ * The public `isObject` is intentionally non-narrowing, so we wrap it here.
+ *
+ * @param {unknown} v The value to check.
+ * @returns {boolean}
+ */ function isPlainRecord(v) {
+    return isObject(v);
+}
 export const PLUGIN_KEY = 'emptyDataState';
 export const PLUGIN_PRIORITY = 370;
 const SOURCE = Object.freeze({
@@ -69,10 +78,6 @@ var /**
    *
    * @type {EmptyDataStateUI}
    */ _ui = /*#__PURE__*/ new WeakMap(), /**
-   * MutationObserver instance for monitoring DOM changes.
-   *
-   * @type {MutationObserver}
-   */ _observer = /*#__PURE__*/ new WeakMap(), /**
    * Flag indicating if there are filter conditions.
    *
    * @type {boolean}
@@ -87,14 +92,10 @@ var /**
    */ _loadingActive = /*#__PURE__*/ new WeakMap(), /**
    * Registers the DOM listeners.
    */ _registerEvents = /*#__PURE__*/ new WeakSet(), /**
-   * Registers the mutation observers for the emptyDataState plugin.
-   */ _registerObservers = /*#__PURE__*/ new WeakSet(), /**
    * Sets the loading active flag and toggles the emptyDataState.
    */ _setLoadingActive = /*#__PURE__*/ new WeakSet(), /**
    * Clears the loading active flag and hides the emptyDataState.
    */ _clearLoadingActive = /*#__PURE__*/ new WeakSet(), /**
-   * Disconnects the mutation observers for the emptyDataState plugin.
-   */ _disconnectObservers = /*#__PURE__*/ new WeakSet(), /**
    * Registers the focus scope for the emptyDataState plugin.
    */ _registerFocusScope = /*#__PURE__*/ new WeakSet(), /**
    * Unregisters the focus scope for the emptyDataState plugin.
@@ -121,15 +122,15 @@ var /**
    */ _onMouseWheel = /*#__PURE__*/ new WeakSet(), /**
    * Called after the initialization of the table is completed.
    * It toggles the emptyDataState.
-   */ _onAfterInit = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterInit = /*#__PURE__*/ new WeakMap(), /**
    * Called after the rendering of the table is completed.
    * It updates the height and class names of the emptyDataState element.
-   */ _onAfterRender = /*#__PURE__*/ new WeakSet(), /**
+   */ _onAfterRender = /*#__PURE__*/ new WeakMap(), /**
    * Called before the filtering of the table is completed.
    * It updates the flag indicating if there are filter conditions.
    *
    * @param {Array} conditions - The filter conditions.
-   */ _onBeforeFilter = /*#__PURE__*/ new WeakSet();
+   */ _onBeforeFilter = /*#__PURE__*/ new WeakMap();
 /**
  * @plugin EmptyDataState
  * @class EmptyDataState
@@ -298,23 +299,39 @@ var /**
  * ```
  * :::
  */ export class EmptyDataState extends BasePlugin {
-    static get PLUGIN_KEY() {
+    /**
+   * Returns the plugin key used to identify this plugin in Handsontable settings.
+   */ static get PLUGIN_KEY() {
         return PLUGIN_KEY;
     }
-    static get PLUGIN_PRIORITY() {
+    /**
+   * Returns the priority order used to determine the order in which plugins are initialized.
+   */ static get PLUGIN_PRIORITY() {
         return PLUGIN_PRIORITY;
     }
-    static get DEFAULT_SETTINGS() {
+    /**
+   * Returns the default settings applied when the plugin is enabled without explicit configuration.
+   */ static get DEFAULT_SETTINGS() {
         return {
             message: undefined
         };
     }
-    static get SETTINGS_VALIDATORS() {
+    /**
+   * Returns validator functions for each plugin setting to verify their values are valid before applying them.
+   */ static get SETTINGS_VALIDATORS() {
         return {
-            message: (value)=>typeof value === 'string' || typeof value === 'function' || isObject(value) && (typeof value?.title === 'undefined' || typeof value?.title === 'string') && (typeof value?.description === 'undefined' || typeof value?.description === 'string') && (typeof value?.buttons === 'undefined' || Array.isArray(value?.buttons) && value?.buttons.every((item)=>typeof item === 'object' && typeof item.text === 'string' && typeof item.type === 'string' && [
+            message: (value)=>{
+                if (typeof value === 'string' || typeof value === 'function' || value === undefined) {
+                    return true;
+                }
+                if (!isPlainRecord(value)) {
+                    return false;
+                }
+                return (typeof value.title === 'undefined' || typeof value.title === 'string') && (typeof value.description === 'undefined' || typeof value.description === 'string') && (typeof value.buttons === 'undefined' || Array.isArray(value.buttons) && value.buttons.every((item)=>typeof item === 'object' && typeof item.text === 'string' && typeof item.type === 'string' && [
                         'primary',
                         'secondary'
-                    ].includes(item.type) && typeof item.callback === 'function')) || value === undefined
+                    ].includes(item.type) && typeof item.callback === 'function'));
+            }
         };
     }
     /**
@@ -332,22 +349,21 @@ var /**
         }
         if (!_class_private_field_get(this, _ui)) {
             _class_private_field_set(this, _ui, new EmptyDataStateUI({
-                rootElement: this.hot.rootGridElement,
+                gridContainer: this.hot.rootGridElement,
                 rootDocument: this.hot.rootDocument
             }));
             _class_private_method_get(this, _registerFocusScope, registerFocusScope).call(this);
             _class_private_method_get(this, _registerEvents, registerEvents).call(this);
-            _class_private_method_get(this, _registerObservers, registerObservers).call(this);
         }
-        this.addHook('afterInit', ()=>_class_private_method_get(this, _onAfterInit, onAfterInit).call(this));
-        this.addHook('afterRender', ()=>_class_private_method_get(this, _onAfterRender, onAfterRender).call(this));
+        this.addHook('afterInit', _class_private_field_get(this, _onAfterInit));
+        this.addHook('afterRender', _class_private_field_get(this, _onAfterRender));
         this.addHook('afterRowSequenceCacheUpdate', ()=>{
             _class_private_method_get(this, _toggleEmptyDataState, toggleEmptyDataState).call(this);
         });
         this.addHook('afterColumnSequenceCacheUpdate', ()=>{
             _class_private_method_get(this, _toggleEmptyDataState, toggleEmptyDataState).call(this);
         });
-        this.addHook('beforeFilter', (conditions)=>_class_private_method_get(this, _onBeforeFilter, onBeforeFilter).call(this, conditions));
+        this.addHook('beforeFilter', _class_private_field_get(this, _onBeforeFilter));
         this.addHook('beforeDataProviderFetch', (queryParameters)=>{
             if (!queryParameters.skipLoading) {
                 _class_private_method_get(this, _setLoadingActive, setLoadingActive).call(this);
@@ -365,7 +381,7 @@ var /**
         this.enablePlugin();
         _class_private_method_get(this, _update, update).call(this);
         if (this.isVisible()) {
-            _class_private_field_get(this, _ui).show();
+            _class_private_field_get(this, _ui)?.show();
         }
         super.updatePlugin();
     }
@@ -374,8 +390,7 @@ var /**
    */ disablePlugin() {
         _class_private_field_set(this, _loadingActive, false);
         _class_private_method_get(this, _unregisterFocusScope, unregisterFocusScope).call(this);
-        _class_private_method_get(this, _disconnectObservers, disconnectObservers).call(this);
-        _class_private_field_get(this, _ui).destroy();
+        _class_private_field_get(this, _ui)?.destroy();
         _class_private_field_set(this, _ui, null);
         super.disablePlugin();
     }
@@ -393,21 +408,17 @@ var /**
         _class_private_field_set(this, _isVisible, false);
         _class_private_field_get(this, _ui)?.destroy();
         _class_private_field_set(this, _ui, null);
-        _class_private_field_set(this, _observer, null);
         _class_private_field_set(this, _hasFilterConditions, false);
         _class_private_field_set(this, _selectionState, null);
         super.destroy();
     }
     constructor(...args){
-        super(...args), _class_private_method_init(this, _registerEvents), _class_private_method_init(this, _registerObservers), _class_private_method_init(this, _setLoadingActive), _class_private_method_init(this, _clearLoadingActive), _class_private_method_init(this, _disconnectObservers), _class_private_method_init(this, _registerFocusScope), _class_private_method_init(this, _unregisterFocusScope), _class_private_method_init(this, _getMessage), _class_private_method_init(this, _toggleEmptyDataState), _class_private_method_init(this, _show), _class_private_method_init(this, _update), _class_private_method_init(this, _hide), _class_private_method_init(this, _onMouseWheel), _class_private_method_init(this, _onAfterInit), _class_private_method_init(this, _onAfterRender), _class_private_method_init(this, _onBeforeFilter), _class_private_field_init(this, _isVisible, {
+        super(...args), _class_private_method_init(this, _registerEvents), _class_private_method_init(this, _setLoadingActive), _class_private_method_init(this, _clearLoadingActive), _class_private_method_init(this, _registerFocusScope), _class_private_method_init(this, _unregisterFocusScope), _class_private_method_init(this, _getMessage), _class_private_method_init(this, _toggleEmptyDataState), _class_private_method_init(this, _show), _class_private_method_init(this, _update), _class_private_method_init(this, _hide), _class_private_method_init(this, _onMouseWheel), _class_private_field_init(this, _isVisible, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _ui, {
             writable: true,
             value: void 0
-        }), _class_private_field_init(this, _observer, {
-            writable: true,
-            value: void 0
         }), _class_private_field_init(this, _hasFilterConditions, {
             writable: true,
             value: void 0
@@ -417,25 +428,34 @@ var /**
         }), _class_private_field_init(this, _loadingActive, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _isVisible, false), _class_private_field_set(this, _ui, null), _class_private_field_set(this, _observer, null), _class_private_field_set(this, _hasFilterConditions, false), _class_private_field_set(this, _selectionState, null), _class_private_field_set(this, _loadingActive, false);
+        }), _class_private_field_init(this, _onAfterInit, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onAfterRender, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_init(this, _onBeforeFilter, {
+            writable: true,
+            value: void 0
+        }), _class_private_field_set(this, _isVisible, false), _class_private_field_set(this, _ui, null), _class_private_field_set(this, _hasFilterConditions, false), _class_private_field_set(this, _selectionState, null), _class_private_field_set(this, _loadingActive, false), _class_private_field_set(this, _onAfterInit, ()=>{
+            _class_private_method_get(this, _toggleEmptyDataState, toggleEmptyDataState).call(this);
+            this.hot.render();
+        }), _class_private_field_set(this, _onAfterRender, ()=>{
+            if (_class_private_field_get(this, _ui)?.getElement() && this.isVisible() && this.hot.view) {
+                _class_private_field_get(this, _ui).updateSize(this.hot.view, _class_private_field_get(this, _loadingActive));
+                _class_private_field_get(this, _ui).updateClassNames(this.hot.view);
+            }
+        }), _class_private_field_set(this, _onBeforeFilter, (conditions)=>{
+            _class_private_field_set(this, _hasFilterConditions, conditions?.length > 0);
+            if (this.isVisible()) {
+                _class_private_method_get(this, _update, update).call(this);
+            }
+        });
     }
 }
 function registerEvents() {
-    this.eventManager.addEventListener(_class_private_field_get(this, _ui).getElement(), 'wheel', (event)=>_class_private_method_get(this, _onMouseWheel, onMouseWheel).call(this, event));
-}
-function registerObservers() {
-    // Observe the root element for changes and move the emptyDataState element to the correct position
-    _class_private_field_set(this, _observer, new MutationObserver(()=>{
-        if (!this.hot) {
-            return;
-        }
-        const element = _class_private_field_get(this, _ui).getElement();
-        if (this.hot.rootGridElement.nextElementSibling !== element) {
-            this.hot.rootGridElement.after(element);
-        }
-    }));
-    _class_private_field_get(this, _observer).observe(this.hot.rootWrapperElement, {
-        childList: true
+    this.eventManager.addEventListener(_class_private_field_get(this, _ui).getElement(), 'wheel', (event)=>{
+        _class_private_method_get(this, _onMouseWheel, onMouseWheel).call(this, event);
     });
 }
 function setLoadingActive() {
@@ -454,21 +474,17 @@ function clearLoadingActive() {
     _class_private_method_get(this, _toggleEmptyDataState, toggleEmptyDataState).call(this);
     this.hot.render();
 }
-function disconnectObservers() {
-    _class_private_field_get(this, _observer).disconnect();
-    _class_private_field_set(this, _observer, null);
-}
 function registerFocusScope() {
     this.hot.getFocusScopeManager().registerScope(PLUGIN_KEY, _class_private_field_get(this, _ui).getElement(), {
         shortcutsContextName: SHORTCUTS_CONTEXT_NAME,
         runOnlyIf: ()=>this.isVisible(),
         onActivate: (focusSource)=>{
-            const focusableElements = _class_private_field_get(this, _ui)?.getFocusableElements();
+            const focusableElements = _class_private_field_get(this, _ui)?.getFocusableElements() ?? [];
             if (focusableElements.length > 0) {
                 if (focusSource === 'tab_from_above') {
-                    focusableElements.at(0).focus();
+                    focusableElements.at(0)?.focus();
                 } else if (focusSource === 'tab_from_below') {
-                    focusableElements.at(-1).focus();
+                    focusableElements.at(-1)?.focus();
                 }
             }
         }
@@ -478,11 +494,12 @@ function unregisterFocusScope() {
     this.hot.getFocusScopeManager().unregisterScope(PLUGIN_KEY);
 }
 function getMessage(source) {
+    const messageSetting = this.getSetting('message');
     let message;
-    if (typeof this.getSetting('message') === 'function') {
-        message = this.getSetting('message')(source);
+    if (typeof messageSetting === 'function') {
+        message = messageSetting(source);
     } else {
-        message = this.getSetting('message');
+        message = messageSetting;
     }
     // If the message is a string, set the title
     if (typeof message === 'string') {
@@ -492,11 +509,11 @@ function getMessage(source) {
     }
     // If the message is not set, set the default message object
     if (!message?.title && !message?.description && !message?.buttons) {
-        message = {};
+        const result = {};
         if (source === SOURCE.FILTERS) {
-            message.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE_FILTERS);
-            message.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION_FILTERS);
-            message.buttons = [
+            result.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE_FILTERS);
+            result.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION_FILTERS);
+            result.buttons = [
                 {
                     text: this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_BUTTONS_FILTERS_RESET),
                     type: 'secondary',
@@ -510,13 +527,16 @@ function getMessage(source) {
                 }
             ];
         } else if (source === SOURCE.LOADING) {
-            message.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE_LOADING);
-            message.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION_LOADING);
+            result.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE_LOADING);
+            result.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION_LOADING);
         } else {
-            message.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE);
-            message.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION);
+            result.title = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_TITLE);
+            result.description = this.hot.getTranslatedPhrase(C.EMPTY_DATA_STATE_DESCRIPTION);
         }
+        return result;
     }
+    // At this point message is a Record<string, unknown> (string was already converted above).
+    // The union type is narrowed to Record<string, unknown> by the checks above.
     return message;
 }
 function toggleEmptyDataState() {
@@ -543,7 +563,7 @@ function show() {
     }
     this.hot.runHooks('beforeEmptyDataStateShow');
     _class_private_method_get(this, _update, update).call(this);
-    _class_private_field_get(this, _ui).show();
+    _class_private_field_get(this, _ui)?.show();
     _class_private_field_set(this, _isVisible, true);
     _class_private_field_set(this, _selectionState, this.hot.selection.exportSelection());
     this.hot.getFocusScopeManager().activateScope(PLUGIN_KEY);
@@ -551,11 +571,11 @@ function show() {
 }
 function update() {
     if (_class_private_field_get(this, _loadingActive)) {
-        _class_private_field_get(this, _ui).updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.LOADING), true);
+        _class_private_field_get(this, _ui)?.updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.LOADING), true);
     } else if (_class_private_field_get(this, _hasFilterConditions)) {
-        _class_private_field_get(this, _ui).updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.FILTERS), false);
+        _class_private_field_get(this, _ui)?.updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.FILTERS), false);
     } else {
-        _class_private_field_get(this, _ui).updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.UNKNOWN), false);
+        _class_private_field_get(this, _ui)?.updateContent(_class_private_method_get(this, _getMessage, getMessage).call(this, SOURCE.UNKNOWN), false);
     }
 }
 function hide() {
@@ -563,11 +583,14 @@ function hide() {
         return;
     }
     this.hot.runHooks('beforeEmptyDataStateHide');
-    _class_private_field_get(this, _ui).hide();
+    _class_private_field_get(this, _ui)?.hide();
     _class_private_field_set(this, _isVisible, false);
     this.hot.getFocusScopeManager().deactivateScope(PLUGIN_KEY);
-    if (_class_private_field_get(this, _selectionState)?.ranges.length > 0) {
-        this.hot.selection.importSelection(_class_private_field_get(this, _selectionState));
+    if (_class_private_field_get(this, _selectionState) && _class_private_field_get(this, _selectionState).ranges.length > 0) {
+        this.hot.selection.importSelection({
+            ..._class_private_field_get(this, _selectionState),
+            activeRange: _class_private_field_get(this, _selectionState).activeRange
+        });
         this.hot.view.render();
         _class_private_field_set(this, _selectionState, null);
     } else {
@@ -576,7 +599,10 @@ function hide() {
     this.hot.runHooks('afterEmptyDataStateHide');
 }
 function onMouseWheel(event) {
-    const deltaX = Number.isNaN(event.deltaX) ? -1 * event.wheelDeltaX : event.deltaX;
+    // wheelDeltaX is a non-standard property present in some browsers (e.g. Safari)
+    const extendedEvent = event;
+    const wheelDeltaX = extendedEvent.wheelDeltaX ?? 0;
+    const deltaX = Number.isNaN(event.deltaX) ? -1 * wheelDeltaX : event.deltaX;
     if (deltaX !== 0 && this.hot.view.hasHorizontalScroll() && !this.hot.view.isHorizontallyScrollableByWindow()) {
         this.hot.view.setTableScrollPosition({
             left: this.hot.view.getTableScrollPosition().left + deltaX
@@ -584,19 +610,3 @@ function onMouseWheel(event) {
         event.preventDefault();
     }
 }
-function onAfterInit() {
-    _class_private_method_get(this, _toggleEmptyDataState, toggleEmptyDataState).call(this);
-    this.hot.render();
-}
-function onAfterRender() {
-    if (_class_private_field_get(this, _ui)?.getElement() && this.isVisible() && this.hot.view) {
-        _class_private_field_get(this, _ui).updateSize(this.hot.view, _class_private_field_get(this, _loadingActive));
-        _class_private_field_get(this, _ui).updateClassNames(this.hot.view);
-    }
-}
-function onBeforeFilter(conditions) {
-    _class_private_field_set(this, _hasFilterConditions, conditions?.length > 0);
-    if (this.isVisible()) {
-        _class_private_method_get(this, _update, update).call(this);
-    }
-}

package/plugins/emptyDataState/index.d.mts

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

package/plugins/emptyDataState/index.d.ts

@@ -1 +1 @@
-export * from './emptyDataState';
+export { PLUGIN_KEY, PLUGIN_PRIORITY, EmptyDataState, } from './emptyDataState';

package/plugins/emptyDataState/ui.d.mts

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

package/plugins/emptyDataState/ui.d.ts

@@ -0,0 +1,67 @@
+import type { default as ViewInstance } from '../../tableView';
+/**
+ * EmptyDataStateUI is a UI component that renders and manages empty data state elements.
+ *
+ * @private
+ * @class EmptyDataStateUI
+ */
+export declare class EmptyDataStateUI {
+    #private;
+    /**
+     * Initializes the empty data state UI with the grid container and document, then builds and inserts the DOM structure.
+     */
+    constructor({ gridContainer, rootDocument, }: {
+        gridContainer: HTMLElement;
+        rootDocument: Document;
+    });
+    /**
+     * Creates the emptyDataState UI elements and sets up the structure.
+     */
+    install(): void;
+    /**
+     * Gets the emptyDataState element.
+     *
+     * @returns {HTMLElement} The empty data state element.
+     */
+    getElement(): HTMLElement | undefined;
+    /**
+     * Gets the focusable elements of the emptyDataState element.
+     *
+     * @returns {HTMLElement[]} The focusable elements.
+     */
+    getFocusableElements(): HTMLElement[];
+    /**
+     * Shows the emptyDataState element.
+     */
+    show(): void;
+    /**
+     * Hides the emptyDataState element.
+     */
+    hide(): void;
+    /**
+     * Updates the content of the emptyDataState element.
+     *
+     * @param {string | object} message - The message to update.
+     * @param {boolean} isLoading - When `true`, shows a loading spinner.
+     * @returns {void}
+     */
+    updateContent(message: string | Record<string, unknown>, isLoading?: boolean): void;
+    /**
+     * Updates the class names of the emptyDataState element.
+     *
+     * @param {View} view - The view instance.
+     */
+    updateClassNames(view: ViewInstance): void;
+    /**
+     * Updates the size of the emptyDataState element.
+     *
+     * @param {View} view - The view instance.
+     * @param {boolean} [isLoading] - When `true` and the grid has renderable columns, use the same
+     *   workspace sizing as when renderable rows exist (e.g. DataProvider fetch while a page is still shown).
+     */
+    updateSize(view: ViewInstance, isLoading?: boolean): void;
+    /**
+     * Removes the emptyDataState UI elements from the DOM and clears the refs.
+     */
+    destroy(): void;
+}

package/plugins/emptyDataState/ui.js

@@ -69,8 +69,8 @@ const templateContent = ({ title, description, buttons }, isLoading = false)=>{
   </div>
   <div
     data-ref="emptyDataStateButtons"
-    class="${EMPTY_DATA_STATE_CLASS_NAME}__buttons${buttons?.length > 0 ? ` ${EMPTY_DATA_STATE_CLASS_NAME}__buttons--has-buttons` : ''}"
-  >${!isLoading && buttons?.length > 0 ? buttons.map((button)=>`<button class="ht-button ht-button--${button.type}">${(0, _string.stripTags)(button.text)}</button>`).join('') : ''}</div>`;
+    class="${EMPTY_DATA_STATE_CLASS_NAME}__buttons${buttons?.length && buttons.length > 0 ? ` ${EMPTY_DATA_STATE_CLASS_NAME}__buttons--has-buttons` : ''}"
+  >${!isLoading && buttons?.length && buttons.length > 0 ? buttons.map((button)=>`<button class="ht-button ht-button--${button.type}">${(0, _string.stripTags)(button.text)}</button>`).join('') : ''}</div>`;
 };
 /**
  * Creates, updates, or removes the min-height placeholder when there are no renderable rows.
@@ -139,10 +139,11 @@ const templateContent = ({ title, description, buttons }, isLoading = false)=>{
     return height;
 }
 var /**
-   * The root element where the emptyDataState UI will be installed.
+   * The grid container where the emptyDataState UI will be installed (`ht-grid`). It overlays the
+   * grid, so it is a sibling of the grid content rather than a wrapper-level slot.
    *
    * @type {HTMLElement}
-   */ _rootElement = /*#__PURE__*/ new WeakMap(), /**
+   */ _gridContainer = /*#__PURE__*/ new WeakMap(), /**
    * The root document where the emptyDataState UI will be installed.
    *
    * @type {Document}
@@ -171,7 +172,9 @@ class EmptyDataStateUI {
         (0, _element.setAttribute)(emptyDataStateElement, [
             (0, _a11y.A11Y_TABINDEX)(-1)
         ]);
-        _class_private_field_get(this, _rootElement).after(elements.fragment);
+        if (_class_private_field_get(this, _gridContainer)) {
+            _class_private_field_get(this, _gridContainer).appendChild(elements.fragment);
+        }
     }
     /**
    * Gets the emptyDataState element.
@@ -186,7 +189,8 @@ class EmptyDataStateUI {
    * @returns {HTMLElement[]} The focusable elements.
    */ getFocusableElements() {
         const { emptyDataStateButtons, emptyDataStateInner } = _class_private_field_get(this, _refs);
-        const emptyDataStateButtonsElements = Array.from(emptyDataStateButtons?.children);
+        // HTMLCollection<Element> → cast once here so callers receive HTMLElement[]
+        const emptyDataStateButtonsElements = Array.from(emptyDataStateButtons?.children ?? []);
         if (emptyDataStateButtonsElements.length === 0) {
             return [
                 emptyDataStateInner
@@ -220,7 +224,7 @@ class EmptyDataStateUI {
    * @returns {void}
    */ updateContent(message, isLoading = false) {
         const { emptyDataStateElement, emptyDataStateInner } = _class_private_field_get(this, _refs);
-        let content = '';
+        let content;
         if (typeof message === 'string') {
             content = {
                 title: message
@@ -248,7 +252,7 @@ class EmptyDataStateUI {
         });
         emptyDataStateInner.innerHTML = '';
         emptyDataStateInner.appendChild(template.fragment);
-        if (!isLoading && content.buttons?.length > 0) {
+        if (!isLoading && content.buttons?.length && content.buttons.length > 0) {
             Array.from(_class_private_field_get(this, _refs).emptyDataStateButtons.children).forEach((button, index)=>{
                 button.addEventListener('click', content.buttons[index].callback);
             });
@@ -310,8 +314,10 @@ class EmptyDataStateUI {
         _class_private_field_set(this, _placeholderElement, null);
         _class_private_field_set(this, _refs, null);
     }
-    constructor({ rootElement, rootDocument }){
-        _class_private_field_init(this, _rootElement, {
+    /**
+   * Initializes the empty data state UI with the grid container and document, then builds and inserts the DOM structure.
+   */ constructor({ gridContainer, rootDocument }){
+        _class_private_field_init(this, _gridContainer, {
             writable: true,
             value: void 0
         });
@@ -327,7 +333,9 @@ class EmptyDataStateUI {
             writable: true,
             value: void 0
         });
-        _class_private_field_set(this, _rootElement, rootElement);
+        _class_private_field_set(this, _refs, null);
+        _class_private_field_set(this, _placeholderElement, null);
+        _class_private_field_set(this, _gridContainer, gridContainer);
         _class_private_field_set(this, _rootDocument, rootDocument);
         this.install();
     }

package/plugins/emptyDataState/ui.mjs

@@ -59,8 +59,8 @@ const templateContent = ({ title, description, buttons }, isLoading = false)=>{
   </div>
   <div
     data-ref="emptyDataStateButtons"
-    class="${EMPTY_DATA_STATE_CLASS_NAME}__buttons${buttons?.length > 0 ? ` ${EMPTY_DATA_STATE_CLASS_NAME}__buttons--has-buttons` : ''}"
-  >${!isLoading && buttons?.length > 0 ? buttons.map((button)=>`<button class="ht-button ht-button--${button.type}">${stripTags(button.text)}</button>`).join('') : ''}</div>`;
+    class="${EMPTY_DATA_STATE_CLASS_NAME}__buttons${buttons?.length && buttons.length > 0 ? ` ${EMPTY_DATA_STATE_CLASS_NAME}__buttons--has-buttons` : ''}"
+  >${!isLoading && buttons?.length && buttons.length > 0 ? buttons.map((button)=>`<button class="ht-button ht-button--${button.type}">${stripTags(button.text)}</button>`).join('') : ''}</div>`;
 };
 /**
  * Creates, updates, or removes the min-height placeholder when there are no renderable rows.
@@ -129,10 +129,11 @@ const templateContent = ({ title, description, buttons }, isLoading = false)=>{
     return height;
 }
 var /**
-   * The root element where the emptyDataState UI will be installed.
+   * The grid container where the emptyDataState UI will be installed (`ht-grid`). It overlays the
+   * grid, so it is a sibling of the grid content rather than a wrapper-level slot.
    *
    * @type {HTMLElement}
-   */ _rootElement = /*#__PURE__*/ new WeakMap(), /**
+   */ _gridContainer = /*#__PURE__*/ new WeakMap(), /**
    * The root document where the emptyDataState UI will be installed.
    *
    * @type {Document}
@@ -166,7 +167,9 @@ var /**
         setAttribute(emptyDataStateElement, [
             A11Y_TABINDEX(-1)
         ]);
-        _class_private_field_get(this, _rootElement).after(elements.fragment);
+        if (_class_private_field_get(this, _gridContainer)) {
+            _class_private_field_get(this, _gridContainer).appendChild(elements.fragment);
+        }
     }
     /**
    * Gets the emptyDataState element.
@@ -181,7 +184,8 @@ var /**
    * @returns {HTMLElement[]} The focusable elements.
    */ getFocusableElements() {
         const { emptyDataStateButtons, emptyDataStateInner } = _class_private_field_get(this, _refs);
-        const emptyDataStateButtonsElements = Array.from(emptyDataStateButtons?.children);
+        // HTMLCollection<Element> → cast once here so callers receive HTMLElement[]
+        const emptyDataStateButtonsElements = Array.from(emptyDataStateButtons?.children ?? []);
         if (emptyDataStateButtonsElements.length === 0) {
             return [
                 emptyDataStateInner
@@ -215,7 +219,7 @@ var /**
    * @returns {void}
    */ updateContent(message, isLoading = false) {
         const { emptyDataStateElement, emptyDataStateInner } = _class_private_field_get(this, _refs);
-        let content = '';
+        let content;
         if (typeof message === 'string') {
             content = {
                 title: message
@@ -243,7 +247,7 @@ var /**
         });
         emptyDataStateInner.innerHTML = '';
         emptyDataStateInner.appendChild(template.fragment);
-        if (!isLoading && content.buttons?.length > 0) {
+        if (!isLoading && content.buttons?.length && content.buttons.length > 0) {
             Array.from(_class_private_field_get(this, _refs).emptyDataStateButtons.children).forEach((button, index)=>{
                 button.addEventListener('click', content.buttons[index].callback);
             });
@@ -305,8 +309,10 @@ var /**
         _class_private_field_set(this, _placeholderElement, null);
         _class_private_field_set(this, _refs, null);
     }
-    constructor({ rootElement, rootDocument }){
-        _class_private_field_init(this, _rootElement, {
+    /**
+   * Initializes the empty data state UI with the grid container and document, then builds and inserts the DOM structure.
+   */ constructor({ gridContainer, rootDocument }){
+        _class_private_field_init(this, _gridContainer, {
             writable: true,
             value: void 0
         });
@@ -322,7 +328,9 @@ var /**
             writable: true,
             value: void 0
         });
-        _class_private_field_set(this, _rootElement, rootElement);
+        _class_private_field_set(this, _refs, null);
+        _class_private_field_set(this, _placeholderElement, null);
+        _class_private_field_set(this, _gridContainer, gridContainer);
         _class_private_field_set(this, _rootDocument, rootDocument);
         this.install();
     }

package/plugins/exportFile/contextMenuItem/exportItem.d.mts

@@ -0,0 +1,2 @@
+export * from './exportItem.js';
+export { default } from './exportItem.js';

package/plugins/exportFile/contextMenuItem/exportItem.d.ts

@@ -0,0 +1,13 @@
+import type { ExportFile } from '../exportFile';
+/**
+ * Returns the ExportFile context menu item descriptor with a submenu
+ * containing "To CSV" and "To Excel" sub-items.
+ *
+ * The parent item is hidden when `exportFile` is not explicitly configured
+ * in the Handsontable settings.
+ * The "To Excel" sub-item is hidden when no XLSX engine is configured.
+ *
+ * @param {ExportFile} exportFilePlugin The plugin instance.
+ * @returns {object}
+ */
+export default function exportItem(exportFilePlugin: ExportFile): object;

package/plugins/exportFile/contextMenuItem/utils.d.mts

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