handsontable 17.1.0 → 18.0.0-rc2

package/plugins/filters/ui/multipleSelect.js

@@ -19,10 +19,10 @@ _export(exports, {
 const _element = require("../../../helpers/dom/element");
 const _object = require("../../../helpers/object");
 const _unicode = require("../../../helpers/unicode");
-const _function = require("../../../helpers/function");
 const _data = require("../../../helpers/data");
 const _constants = /*#__PURE__*/ _interop_require_wildcard(require("../../../i18n/constants"));
 const _event = require("../../../helpers/dom/event");
+const _string = require("../../../helpers/string");
 const _base = require("./_base");
 const _input = require("./input");
 const _link = require("./link");
@@ -124,25 +124,15 @@ var /**
    *
    * @type {Array}
    */ _items = /*#__PURE__*/ new WeakMap(), /**
-   * Handsontable instance used as items list element.
-   *
-   * @type {Handsontable}
+   * Nested Handsontable instance used to render the list of selectable filter values.
    */ _itemsBox = /*#__PURE__*/ new WeakMap(), /**
-   * A locale for the component used to compare filtered values.
-   *
-   * @type {string}
+   * Current locale string used for sorting and comparing filter values.
    */ _locale = /*#__PURE__*/ new WeakMap(), /**
-   * Input element.
-   *
-   * @type {InputUI}
+   * Input component for searching within the list of selectable filter values.
    */ _searchInput = /*#__PURE__*/ new WeakMap(), /**
-   * "Select all" UI element.
-   *
-   * @type {LinkUI}
+   * Link component for selecting all available filter values at once.
    */ _selectAllUI = /*#__PURE__*/ new WeakMap(), /**
-   * "Clear" UI element.
-   *
-   * @type {LinkUI}
+   * Link component for clearing all selected filter values at once.
    */ _clearAllUI = /*#__PURE__*/ new WeakMap(), /**
    * 'input' event listener for input element.
    *
@@ -161,7 +151,9 @@ var /**
    * @param {DOMEvent} event The mouse event object.
    */ _onClearAllClick = /*#__PURE__*/ new WeakSet();
 class MultipleSelectUI extends _base.BaseUI {
-    static get DEFAULTS() {
+    /**
+   * Returns the default configuration options for the multiple select UI component.
+   */ static get DEFAULTS() {
         return (0, _object.clone)({
             className: 'htUIMultipleSelect',
             value: []
@@ -177,10 +169,10 @@ class MultipleSelectUI extends _base.BaseUI {
     /**
    * Register all necessary hooks.
    */ registerHooks() {
-        _class_private_field_get(this, _searchInput).addLocalHook('keydown', (event)=>_class_private_method_get(this, _onInputKeyDown, onInputKeyDown).call(this, event));
-        _class_private_field_get(this, _searchInput).addLocalHook('input', (event)=>_class_private_method_get(this, _onInput, onInput).call(this, event));
-        _class_private_field_get(this, _selectAllUI).addLocalHook('click', (event)=>_class_private_method_get(this, _onSelectAllClick, onSelectAllClick).call(this, event));
-        _class_private_field_get(this, _clearAllUI).addLocalHook('click', (event)=>_class_private_method_get(this, _onClearAllClick, onClearAllClick).call(this, event));
+        _class_private_field_get(this, _searchInput)?.addLocalHook('keydown', (event)=>_class_private_method_get(this, _onInputKeyDown, onInputKeyDown).call(this, event));
+        _class_private_field_get(this, _searchInput)?.addLocalHook('input', (event)=>_class_private_method_get(this, _onInput, onInput).call(this, event));
+        _class_private_field_get(this, _selectAllUI)?.addLocalHook('click', (event)=>_class_private_method_get(this, _onSelectAllClick, onSelectAllClick).call(this, event));
+        _class_private_field_get(this, _clearAllUI)?.addLocalHook('click', (event)=>_class_private_method_get(this, _onClearAllClick, onClearAllClick).call(this, event));
     }
     /**
    * Set available options.
@@ -252,22 +244,33 @@ class MultipleSelectUI extends _base.BaseUI {
    * Build DOM structure.
    */ build() {
         super.build();
-        const { rootDocument } = this.hot;
+        if (!this.hot || !this._element) {
+            return;
+        }
+        const hot = this.hot;
+        const rootElement = this._element;
+        const { rootDocument } = hot;
         const itemsBoxWrapper = rootDocument.createElement('div');
-        const selectionControl = new _base.BaseUI(this.hot, {
+        const selectionControl = new _base.BaseUI(hot, {
             className: 'htUISelectionControls',
             children: [
                 _class_private_field_get(this, _selectAllUI),
                 _class_private_field_get(this, _clearAllUI)
-            ]
+            ].filter((x)=>x !== null)
         });
-        this._element.appendChild(_class_private_field_get(this, _searchInput).element);
-        this._element.appendChild(selectionControl.element);
-        this._element.appendChild(itemsBoxWrapper);
+        const searchEl = _class_private_field_get(this, _searchInput)?.element;
+        const selectionEl = selectionControl.element;
+        if (searchEl) {
+            rootElement.appendChild(searchEl);
+        }
+        if (selectionEl) {
+            rootElement.appendChild(selectionEl);
+        }
+        rootElement.appendChild(itemsBoxWrapper);
         _class_private_field_get(this, _itemsBox)?.destroy();
         (0, _element.addClass)(itemsBoxWrapper, 'htUIMultipleSelectHot');
         // Constructs and initializes a new Handsontable instance
-        _class_private_field_set(this, _itemsBox, new this.hot.constructor(itemsBoxWrapper, {
+        _class_private_field_set(this, _itemsBox, new hot.constructor(itemsBoxWrapper, {
             data: [
                 []
             ],
@@ -282,16 +285,17 @@ class MultipleSelectUI extends _base.BaseUI {
                 }
             ],
             beforeRenderer: (TD, row, col, prop, value, cellProperties)=>{
-                TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
+                const cp = cellProperties;
+                TD.title = cp.instance.getDataAtRowProp(row, cp.label.property);
             },
             afterListen: ()=>{
                 this.runLocalHooks('focus', this);
             },
             beforeOnCellMouseUp: ()=>{
-                _class_private_field_get(this, _itemsBox).listen();
+                _class_private_field_get(this, _itemsBox)?.listen();
             },
             modifyColWidth: (width)=>{
-                const minWidth = _class_private_field_get(this, _itemsBox).container.scrollWidth - (0, _element.getScrollbarWidth)(rootDocument);
+                const minWidth = (_class_private_field_get(this, _itemsBox)?.container.scrollWidth ?? 0) - (0, _element.getScrollbarWidth)(rootDocument);
                 if (width !== undefined && width < minWidth) {
                     return minWidth;
                 }
@@ -311,12 +315,15 @@ class MultipleSelectUI extends _base.BaseUI {
                 row: 1,
                 col: 0
             },
-            themeName: this.hot.getCurrentThemeName(),
-            layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
+            themeName: hot.getCurrentThemeName(),
+            layoutDirection: hot.isRtl() ? 'rtl' : 'ltr'
         }));
         _class_private_field_get(this, _itemsBox).init();
         const shortcutManager = _class_private_field_get(this, _itemsBox).getShortcutManager();
         const gridContext = shortcutManager.getContext('grid');
+        if (!gridContext) {
+            return;
+        }
         gridContext.removeShortcutsByKeys([
             'Tab'
         ]);
@@ -346,7 +353,7 @@ class MultipleSelectUI extends _base.BaseUI {
                 ]
             ],
             callback: (event)=>{
-                _class_private_field_get(this, _itemsBox).deselectCell();
+                _class_private_field_get(this, _itemsBox)?.deselectCell();
                 this.runLocalHooks('keydown', event, this);
                 this.runLocalHooks('listTabKeydown', event, this);
             },
@@ -357,20 +364,20 @@ class MultipleSelectUI extends _base.BaseUI {
    * Focus element.
    */ focus() {
         if (this.isBuilt()) {
-            _class_private_field_get(this, _itemsBox).listen();
+            _class_private_field_get(this, _itemsBox)?.listen();
         }
     }
     /**
    * Reset DOM structure.
    */ reset() {
-        _class_private_field_get(this, _searchInput).reset();
-        _class_private_field_get(this, _selectAllUI).reset();
-        _class_private_field_get(this, _clearAllUI).reset();
+        _class_private_field_get(this, _searchInput)?.reset();
+        _class_private_field_get(this, _selectAllUI)?.reset();
+        _class_private_field_get(this, _clearAllUI)?.reset();
     }
     /**
    * Update DOM structure.
    */ update() {
-        if (!this.isBuilt() || _class_private_field_get(this, _itemsBox).rootElement.offsetHeight === 0) {
+        if (!this.isBuilt() || !_class_private_field_get(this, _itemsBox) || _class_private_field_get(this, _itemsBox).rootElement.offsetHeight === 0) {
             return;
         }
         _class_private_field_get(this, _itemsBox).updateSettings({
@@ -382,17 +389,19 @@ class MultipleSelectUI extends _base.BaseUI {
    * Destroy instance.
    */ destroy() {
         _class_private_field_get(this, _itemsBox)?.destroy();
-        _class_private_field_get(this, _searchInput).destroy();
-        _class_private_field_get(this, _clearAllUI).destroy();
-        _class_private_field_get(this, _selectAllUI).destroy();
+        _class_private_field_get(this, _searchInput)?.destroy();
+        _class_private_field_get(this, _clearAllUI)?.destroy();
+        _class_private_field_get(this, _selectAllUI)?.destroy();
         _class_private_field_set(this, _searchInput, null);
         _class_private_field_set(this, _clearAllUI, null);
         _class_private_field_set(this, _selectAllUI, null);
         _class_private_field_set(this, _itemsBox, null);
-        _class_private_field_set(this, _items, null);
+        _class_private_field_get(this, _items).length = 0;
         super.destroy();
     }
-    constructor(hotInstance, options){
+    /**
+   * Initializes the multiple select UI component, creates child input and link components, and registers event hooks.
+   */ constructor(hotInstance, options){
         super(hotInstance, (0, _object.extend)(MultipleSelectUI.DEFAULTS, options)), _class_private_method_init(this, _onInput), _class_private_method_init(this, _onInputKeyDown), _class_private_method_init(this, _onSelectAllClick), _class_private_method_init(this, _onClearAllClick), _class_private_field_init(this, _items, {
             writable: true,
             value: void 0
@@ -411,16 +420,16 @@ class MultipleSelectUI extends _base.BaseUI {
         }), _class_private_field_init(this, _clearAllUI, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _items, []);
-        _class_private_field_set(this, _searchInput, new _input.InputUI(this.hot, {
+        }), _class_private_field_set(this, _items, []), _class_private_field_set(this, _itemsBox, null), _class_private_field_set(this, _locale, ''), _class_private_field_set(this, _searchInput, null), _class_private_field_set(this, _selectAllUI, null), _class_private_field_set(this, _clearAllUI, null);
+        _class_private_field_set(this, _searchInput, new _input.InputUI(hotInstance, {
             placeholder: _constants.FILTERS_BUTTONS_PLACEHOLDER_SEARCH,
             className: 'htUIMultipleSelectSearch'
         }));
-        _class_private_field_set(this, _selectAllUI, new _link.LinkUI(this.hot, {
+        _class_private_field_set(this, _selectAllUI, new _link.LinkUI(hotInstance, {
             textContent: _constants.FILTERS_BUTTONS_SELECT_ALL,
             className: 'htUISelectAll'
         }));
-        _class_private_field_set(this, _clearAllUI, new _link.LinkUI(this.hot, {
+        _class_private_field_set(this, _clearAllUI, new _link.LinkUI(hotInstance, {
             textContent: _constants.FILTERS_BUTTONS_CLEAR,
             className: 'htUIClearAll'
         }));
@@ -428,21 +437,25 @@ class MultipleSelectUI extends _base.BaseUI {
     }
 }
 function onInput(event) {
-    const trimmed = event.target.value.trim();
-    const value = trimmed.toLocaleLowerCase(this.getLocale());
+    const trimmed = (0, _element.eventTargetEl)(event).value.trim();
+    const value = (0, _string.localeLowerCase)(trimmed, this.getLocale());
     if (this.options.searchMode === 'apply') {
-        const hiddenRows = _class_private_field_get(this, _itemsBox).getPlugin('hiddenRows');
+        const hiddenRows = _class_private_field_get(this, _itemsBox)?.getPlugin('hiddenRows');
         const rowsToHide = [];
-        hiddenRows.showRows(hiddenRows.getHiddenRows());
+        if (hiddenRows) {
+            hiddenRows.showRows(hiddenRows.getHiddenRows());
+        }
         _class_private_field_get(this, _items).forEach((item, index)=>{
-            item.checked = `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0;
+            item.checked = (0, _string.localeLowerCase)(`${item.value}`, this.getLocale()).indexOf(value) >= 0;
             if (!item.checked) {
                 rowsToHide.push(index);
             }
         });
-        hiddenRows.hideRows(rowsToHide);
-        _class_private_field_get(this, _itemsBox).view.adjustElementsSize();
-        _class_private_field_get(this, _itemsBox).render();
+        if (hiddenRows) {
+            hiddenRows.hideRows(rowsToHide);
+        }
+        _class_private_field_get(this, _itemsBox)?.view.adjustElementsSize();
+        _class_private_field_get(this, _itemsBox)?.render();
     } else {
         let filteredItems;
         if (value === '') {
@@ -450,24 +463,26 @@ function onInput(event) {
                 ..._class_private_field_get(this, _items)
             ];
         } else {
-            filteredItems = _class_private_field_get(this, _items).filter((item)=>`${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+            filteredItems = _class_private_field_get(this, _items).filter((item)=>(0, _string.localeLowerCase)(`${item.value}`, this.getLocale()).indexOf(value) >= 0);
         }
-        _class_private_field_get(this, _itemsBox).loadData(filteredItems);
+        _class_private_field_get(this, _itemsBox)?.loadData(filteredItems);
     }
 }
 function onInputKeyDown(event) {
     this.runLocalHooks('keydown', event, this);
-    const isKeyCode = (0, _function.partial)(_unicode.isKey, event.keyCode);
-    if (isKeyCode('ARROW_DOWN')) {
+    if ((0, _unicode.isKey)(event.keyCode, 'ARROW_DOWN')) {
         event.preventDefault();
         (0, _event.stopImmediatePropagation)(event);
-        _class_private_field_get(this, _itemsBox).listen();
-        _class_private_field_get(this, _itemsBox).selectCell(0, 0);
+        _class_private_field_get(this, _itemsBox)?.listen();
+        _class_private_field_get(this, _itemsBox)?.selectCell(0, 0);
     }
 }
 function onSelectAllClick(event) {
     const changes = [];
     event.preventDefault();
+    if (!_class_private_field_get(this, _itemsBox)) {
+        return;
+    }
     _class_private_field_get(this, _itemsBox).getSourceData().forEach((row, rowIndex)=>{
         row.checked = true;
         changes.push((0, _data.dataRowToChangesArray)(row, rowIndex)[0]);
@@ -477,6 +492,9 @@ function onSelectAllClick(event) {
 function onClearAllClick(event) {
     const changes = [];
     event.preventDefault();
+    if (!_class_private_field_get(this, _itemsBox)) {
+        return;
+    }
     _class_private_field_get(this, _itemsBox).getSourceData().forEach((row, rowIndex)=>{
         row.checked = false;
         changes.push((0, _data.dataRowToChangesArray)(row, rowIndex)[0]);

package/plugins/filters/ui/multipleSelect.mjs

@@ -48,13 +48,13 @@ function _class_private_method_init(obj, privateSet) {
     _check_private_redeclaration(obj, privateSet);
     privateSet.add(obj);
 }
-import { addClass, getScrollbarWidth } from '../../../helpers/dom/element.mjs';
+import { addClass, eventTargetEl, getScrollbarWidth } from '../../../helpers/dom/element.mjs';
 import { clone, extend } from '../../../helpers/object.mjs';
 import { isKey } from '../../../helpers/unicode.mjs';
-import { partial } from '../../../helpers/function.mjs';
 import { dataRowToChangesArray } from '../../../helpers/data.mjs';
 import * as C from '../../../i18n/constants.mjs';
 import { stopImmediatePropagation } from '../../../helpers/dom/event.mjs';
+import { localeLowerCase } from '../../../helpers/string.mjs';
 import { BaseUI } from './_base.mjs';
 import { InputUI } from './input.mjs';
 import { LinkUI } from './link.mjs';
@@ -65,25 +65,15 @@ var /**
    *
    * @type {Array}
    */ _items = /*#__PURE__*/ new WeakMap(), /**
-   * Handsontable instance used as items list element.
-   *
-   * @type {Handsontable}
+   * Nested Handsontable instance used to render the list of selectable filter values.
    */ _itemsBox = /*#__PURE__*/ new WeakMap(), /**
-   * A locale for the component used to compare filtered values.
-   *
-   * @type {string}
+   * Current locale string used for sorting and comparing filter values.
    */ _locale = /*#__PURE__*/ new WeakMap(), /**
-   * Input element.
-   *
-   * @type {InputUI}
+   * Input component for searching within the list of selectable filter values.
    */ _searchInput = /*#__PURE__*/ new WeakMap(), /**
-   * "Select all" UI element.
-   *
-   * @type {LinkUI}
+   * Link component for selecting all available filter values at once.
    */ _selectAllUI = /*#__PURE__*/ new WeakMap(), /**
-   * "Clear" UI element.
-   *
-   * @type {LinkUI}
+   * Link component for clearing all selected filter values at once.
    */ _clearAllUI = /*#__PURE__*/ new WeakMap(), /**
    * 'input' event listener for input element.
    *
@@ -105,7 +95,9 @@ var /**
  * @private
  * @class MultipleSelectUI
  */ export class MultipleSelectUI extends BaseUI {
-    static get DEFAULTS() {
+    /**
+   * Returns the default configuration options for the multiple select UI component.
+   */ static get DEFAULTS() {
         return clone({
             className: 'htUIMultipleSelect',
             value: []
@@ -121,10 +113,10 @@ var /**
     /**
    * Register all necessary hooks.
    */ registerHooks() {
-        _class_private_field_get(this, _searchInput).addLocalHook('keydown', (event)=>_class_private_method_get(this, _onInputKeyDown, onInputKeyDown).call(this, event));
-        _class_private_field_get(this, _searchInput).addLocalHook('input', (event)=>_class_private_method_get(this, _onInput, onInput).call(this, event));
-        _class_private_field_get(this, _selectAllUI).addLocalHook('click', (event)=>_class_private_method_get(this, _onSelectAllClick, onSelectAllClick).call(this, event));
-        _class_private_field_get(this, _clearAllUI).addLocalHook('click', (event)=>_class_private_method_get(this, _onClearAllClick, onClearAllClick).call(this, event));
+        _class_private_field_get(this, _searchInput)?.addLocalHook('keydown', (event)=>_class_private_method_get(this, _onInputKeyDown, onInputKeyDown).call(this, event));
+        _class_private_field_get(this, _searchInput)?.addLocalHook('input', (event)=>_class_private_method_get(this, _onInput, onInput).call(this, event));
+        _class_private_field_get(this, _selectAllUI)?.addLocalHook('click', (event)=>_class_private_method_get(this, _onSelectAllClick, onSelectAllClick).call(this, event));
+        _class_private_field_get(this, _clearAllUI)?.addLocalHook('click', (event)=>_class_private_method_get(this, _onClearAllClick, onClearAllClick).call(this, event));
     }
     /**
    * Set available options.
@@ -196,22 +188,33 @@ var /**
    * Build DOM structure.
    */ build() {
         super.build();
-        const { rootDocument } = this.hot;
+        if (!this.hot || !this._element) {
+            return;
+        }
+        const hot = this.hot;
+        const rootElement = this._element;
+        const { rootDocument } = hot;
         const itemsBoxWrapper = rootDocument.createElement('div');
-        const selectionControl = new BaseUI(this.hot, {
+        const selectionControl = new BaseUI(hot, {
             className: 'htUISelectionControls',
             children: [
                 _class_private_field_get(this, _selectAllUI),
                 _class_private_field_get(this, _clearAllUI)
-            ]
+            ].filter((x)=>x !== null)
         });
-        this._element.appendChild(_class_private_field_get(this, _searchInput).element);
-        this._element.appendChild(selectionControl.element);
-        this._element.appendChild(itemsBoxWrapper);
+        const searchEl = _class_private_field_get(this, _searchInput)?.element;
+        const selectionEl = selectionControl.element;
+        if (searchEl) {
+            rootElement.appendChild(searchEl);
+        }
+        if (selectionEl) {
+            rootElement.appendChild(selectionEl);
+        }
+        rootElement.appendChild(itemsBoxWrapper);
         _class_private_field_get(this, _itemsBox)?.destroy();
         addClass(itemsBoxWrapper, 'htUIMultipleSelectHot');
         // Constructs and initializes a new Handsontable instance
-        _class_private_field_set(this, _itemsBox, new this.hot.constructor(itemsBoxWrapper, {
+        _class_private_field_set(this, _itemsBox, new hot.constructor(itemsBoxWrapper, {
             data: [
                 []
             ],
@@ -226,16 +229,17 @@ var /**
                 }
             ],
             beforeRenderer: (TD, row, col, prop, value, cellProperties)=>{
-                TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
+                const cp = cellProperties;
+                TD.title = cp.instance.getDataAtRowProp(row, cp.label.property);
             },
             afterListen: ()=>{
                 this.runLocalHooks('focus', this);
             },
             beforeOnCellMouseUp: ()=>{
-                _class_private_field_get(this, _itemsBox).listen();
+                _class_private_field_get(this, _itemsBox)?.listen();
             },
             modifyColWidth: (width)=>{
-                const minWidth = _class_private_field_get(this, _itemsBox).container.scrollWidth - getScrollbarWidth(rootDocument);
+                const minWidth = (_class_private_field_get(this, _itemsBox)?.container.scrollWidth ?? 0) - getScrollbarWidth(rootDocument);
                 if (width !== undefined && width < minWidth) {
                     return minWidth;
                 }
@@ -255,12 +259,15 @@ var /**
                 row: 1,
                 col: 0
             },
-            themeName: this.hot.getCurrentThemeName(),
-            layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
+            themeName: hot.getCurrentThemeName(),
+            layoutDirection: hot.isRtl() ? 'rtl' : 'ltr'
         }));
         _class_private_field_get(this, _itemsBox).init();
         const shortcutManager = _class_private_field_get(this, _itemsBox).getShortcutManager();
         const gridContext = shortcutManager.getContext('grid');
+        if (!gridContext) {
+            return;
+        }
         gridContext.removeShortcutsByKeys([
             'Tab'
         ]);
@@ -290,7 +297,7 @@ var /**
                 ]
             ],
             callback: (event)=>{
-                _class_private_field_get(this, _itemsBox).deselectCell();
+                _class_private_field_get(this, _itemsBox)?.deselectCell();
                 this.runLocalHooks('keydown', event, this);
                 this.runLocalHooks('listTabKeydown', event, this);
             },
@@ -301,20 +308,20 @@ var /**
    * Focus element.
    */ focus() {
         if (this.isBuilt()) {
-            _class_private_field_get(this, _itemsBox).listen();
+            _class_private_field_get(this, _itemsBox)?.listen();
         }
     }
     /**
    * Reset DOM structure.
    */ reset() {
-        _class_private_field_get(this, _searchInput).reset();
-        _class_private_field_get(this, _selectAllUI).reset();
-        _class_private_field_get(this, _clearAllUI).reset();
+        _class_private_field_get(this, _searchInput)?.reset();
+        _class_private_field_get(this, _selectAllUI)?.reset();
+        _class_private_field_get(this, _clearAllUI)?.reset();
     }
     /**
    * Update DOM structure.
    */ update() {
-        if (!this.isBuilt() || _class_private_field_get(this, _itemsBox).rootElement.offsetHeight === 0) {
+        if (!this.isBuilt() || !_class_private_field_get(this, _itemsBox) || _class_private_field_get(this, _itemsBox).rootElement.offsetHeight === 0) {
             return;
         }
         _class_private_field_get(this, _itemsBox).updateSettings({
@@ -326,17 +333,19 @@ var /**
    * Destroy instance.
    */ destroy() {
         _class_private_field_get(this, _itemsBox)?.destroy();
-        _class_private_field_get(this, _searchInput).destroy();
-        _class_private_field_get(this, _clearAllUI).destroy();
-        _class_private_field_get(this, _selectAllUI).destroy();
+        _class_private_field_get(this, _searchInput)?.destroy();
+        _class_private_field_get(this, _clearAllUI)?.destroy();
+        _class_private_field_get(this, _selectAllUI)?.destroy();
         _class_private_field_set(this, _searchInput, null);
         _class_private_field_set(this, _clearAllUI, null);
         _class_private_field_set(this, _selectAllUI, null);
         _class_private_field_set(this, _itemsBox, null);
-        _class_private_field_set(this, _items, null);
+        _class_private_field_get(this, _items).length = 0;
         super.destroy();
     }
-    constructor(hotInstance, options){
+    /**
+   * Initializes the multiple select UI component, creates child input and link components, and registers event hooks.
+   */ constructor(hotInstance, options){
         super(hotInstance, extend(MultipleSelectUI.DEFAULTS, options)), _class_private_method_init(this, _onInput), _class_private_method_init(this, _onInputKeyDown), _class_private_method_init(this, _onSelectAllClick), _class_private_method_init(this, _onClearAllClick), _class_private_field_init(this, _items, {
             writable: true,
             value: void 0
@@ -355,16 +364,16 @@ var /**
         }), _class_private_field_init(this, _clearAllUI, {
             writable: true,
             value: void 0
-        }), _class_private_field_set(this, _items, []);
-        _class_private_field_set(this, _searchInput, new InputUI(this.hot, {
+        }), _class_private_field_set(this, _items, []), _class_private_field_set(this, _itemsBox, null), _class_private_field_set(this, _locale, ''), _class_private_field_set(this, _searchInput, null), _class_private_field_set(this, _selectAllUI, null), _class_private_field_set(this, _clearAllUI, null);
+        _class_private_field_set(this, _searchInput, new InputUI(hotInstance, {
             placeholder: C.FILTERS_BUTTONS_PLACEHOLDER_SEARCH,
             className: 'htUIMultipleSelectSearch'
         }));
-        _class_private_field_set(this, _selectAllUI, new LinkUI(this.hot, {
+        _class_private_field_set(this, _selectAllUI, new LinkUI(hotInstance, {
             textContent: C.FILTERS_BUTTONS_SELECT_ALL,
             className: 'htUISelectAll'
         }));
-        _class_private_field_set(this, _clearAllUI, new LinkUI(this.hot, {
+        _class_private_field_set(this, _clearAllUI, new LinkUI(hotInstance, {
             textContent: C.FILTERS_BUTTONS_CLEAR,
             className: 'htUIClearAll'
         }));
@@ -372,21 +381,25 @@ var /**
     }
 }
 function onInput(event) {
-    const trimmed = event.target.value.trim();
-    const value = trimmed.toLocaleLowerCase(this.getLocale());
+    const trimmed = eventTargetEl(event).value.trim();
+    const value = localeLowerCase(trimmed, this.getLocale());
     if (this.options.searchMode === 'apply') {
-        const hiddenRows = _class_private_field_get(this, _itemsBox).getPlugin('hiddenRows');
+        const hiddenRows = _class_private_field_get(this, _itemsBox)?.getPlugin('hiddenRows');
         const rowsToHide = [];
-        hiddenRows.showRows(hiddenRows.getHiddenRows());
+        if (hiddenRows) {
+            hiddenRows.showRows(hiddenRows.getHiddenRows());
+        }
         _class_private_field_get(this, _items).forEach((item, index)=>{
-            item.checked = `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0;
+            item.checked = localeLowerCase(`${item.value}`, this.getLocale()).indexOf(value) >= 0;
             if (!item.checked) {
                 rowsToHide.push(index);
             }
         });
-        hiddenRows.hideRows(rowsToHide);
-        _class_private_field_get(this, _itemsBox).view.adjustElementsSize();
-        _class_private_field_get(this, _itemsBox).render();
+        if (hiddenRows) {
+            hiddenRows.hideRows(rowsToHide);
+        }
+        _class_private_field_get(this, _itemsBox)?.view.adjustElementsSize();
+        _class_private_field_get(this, _itemsBox)?.render();
     } else {
         let filteredItems;
         if (value === '') {
@@ -394,24 +407,26 @@ function onInput(event) {
                 ..._class_private_field_get(this, _items)
             ];
         } else {
-            filteredItems = _class_private_field_get(this, _items).filter((item)=>`${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+            filteredItems = _class_private_field_get(this, _items).filter((item)=>localeLowerCase(`${item.value}`, this.getLocale()).indexOf(value) >= 0);
         }
-        _class_private_field_get(this, _itemsBox).loadData(filteredItems);
+        _class_private_field_get(this, _itemsBox)?.loadData(filteredItems);
     }
 }
 function onInputKeyDown(event) {
     this.runLocalHooks('keydown', event, this);
-    const isKeyCode = partial(isKey, event.keyCode);
-    if (isKeyCode('ARROW_DOWN')) {
+    if (isKey(event.keyCode, 'ARROW_DOWN')) {
         event.preventDefault();
         stopImmediatePropagation(event);
-        _class_private_field_get(this, _itemsBox).listen();
-        _class_private_field_get(this, _itemsBox).selectCell(0, 0);
+        _class_private_field_get(this, _itemsBox)?.listen();
+        _class_private_field_get(this, _itemsBox)?.selectCell(0, 0);
     }
 }
 function onSelectAllClick(event) {
     const changes = [];
     event.preventDefault();
+    if (!_class_private_field_get(this, _itemsBox)) {
+        return;
+    }
     _class_private_field_get(this, _itemsBox).getSourceData().forEach((row, rowIndex)=>{
         row.checked = true;
         changes.push(dataRowToChangesArray(row, rowIndex)[0]);
@@ -421,6 +436,9 @@ function onSelectAllClick(event) {
 function onClearAllClick(event) {
     const changes = [];
     event.preventDefault();
+    if (!_class_private_field_get(this, _itemsBox)) {
+        return;
+    }
     _class_private_field_get(this, _itemsBox).getSourceData().forEach((row, rowIndex)=>{
         row.checked = false;
         changes.push(dataRowToChangesArray(row, rowIndex)[0]);

package/plugins/filters/ui/radioInput.d.mts

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

package/plugins/filters/ui/radioInput.d.ts

@@ -0,0 +1,42 @@
+import type { HotInstance } from '../../../core/types';
+import type { BaseUIOptions } from './_base';
+import { BaseUI } from './_base';
+/**
+ * @private
+ * @class RadioInputUI
+ */
+export declare class RadioInputUI extends BaseUI {
+    #private;
+    /**
+     * Returns the default configuration options for the radio input UI component, including type, tag name, and CSS class.
+     */
+    static get DEFAULTS(): BaseUIOptions;
+    /**
+     * Initializes the radio input UI component with the Handsontable instance and merged configuration options.
+     */
+    constructor(hotInstance: HotInstance, options: Record<string, unknown>);
+    /**
+     * Build DOM structure.
+     */
+    build(): void;
+    /**
+     * Update element.
+     */
+    update(): void;
+    /**
+     * Check if radio button is checked.
+     *
+     * @returns {boolean}
+     */
+    isChecked(): boolean;
+    /**
+     * Set input checked attribute.
+     *
+     * @param {boolean} value Set the component state.
+     */
+    setChecked(value?: boolean): void;
+    /**
+     * Focus element.
+     */
+    focus(): void;
+}