handsontable 16.1.1 → 16.2.0-next-90d1117-20251117

package/plugins/filters/filters.mjs

@@ -100,6 +100,16 @@ export class Filters extends BasePlugin {
   static get PLUGIN_PRIORITY() {
     return PLUGIN_PRIORITY;
   }
+  static get DEFAULT_SETTINGS() {
+    return {
+      searchMode: 'show'
+    };
+  }
+  static get SETTINGS_VALIDATORS() {
+    return {
+      searchMode: value => typeof value === 'string' && ['show', 'apply'].includes(value)
+    };
+  }
   static get PLUGIN_DEPS() {
     return ['plugin:DropdownMenu', 'plugin:HiddenRows', 'cell-type:checkbox'];
   }
@@ -236,9 +246,11 @@ export class Filters extends BasePlugin {
       this.components.set('filter_by_condition2', addConfirmationHooks(conditionComponent));
     }
     if (!this.components.get('filter_by_value')) {
+      const searchMode = this.getSetting('searchMode');
       this.components.set('filter_by_value', addConfirmationHooks(new ValueComponent(this.hot, {
         id: 'filter_by_value',
-        name: filterValueLabel
+        name: filterValueLabel,
+        searchMode
       })));
     }
     if (!this.components.get('filter_action_bar')) {
@@ -310,6 +322,15 @@ export class Filters extends BasePlugin {
     super.enablePlugin();
   }
 
+  /**
+   * Update plugin state after Handsontable settings update.
+   */
+  updatePlugin() {
+    this.disablePlugin();
+    this.enablePlugin();
+    super.updatePlugin();
+  }
+
   /**
    * Disables the plugin functionality for this Handsontable instance.
    */

package/plugins/filters/ui/multipleSelect.js

@@ -212,6 +212,7 @@ class MultipleSelectUI extends _base.BaseUI {
    * Build DOM structure.
    */
   build() {
+    var _classPrivateFieldGet3;
     super.build();
     const {
       rootDocument
@@ -224,79 +225,74 @@ class MultipleSelectUI extends _base.BaseUI {
     this._element.appendChild(_classPrivateFieldGet(_searchInput, this).element);
     this._element.appendChild(selectionControl.element);
     this._element.appendChild(itemsBoxWrapper);
-    const hotInitializer = wrapper => {
-      var _classPrivateFieldGet3;
-      if (!this._element) {
-        return;
-      }
-      (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
-      (0, _element.addClass)(wrapper, 'htUIMultipleSelectHot');
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
+    (0, _element.addClass)(itemsBoxWrapper, 'htUIMultipleSelectHot');
 
-      // Constructs and initializes a new Handsontable instance
-      _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(wrapper, {
-        data: _classPrivateFieldGet(_items, this),
-        columns: [{
-          data: 'checked',
-          type: 'checkbox',
-          label: {
-            property: 'visualValue',
-            position: 'after'
-          }
-        }],
-        beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
-          TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
-        },
-        afterListen: () => {
-          this.runLocalHooks('focus', this);
-        },
-        beforeOnCellMouseUp: () => {
-          _classPrivateFieldGet(_itemsBox, this).listen();
-        },
-        modifyColWidth: width => {
-          const minWidth = _classPrivateFieldGet(_itemsBox, this).container.scrollWidth - (0, _element.getScrollbarWidth)(rootDocument);
-          if (width !== undefined && width < minWidth) {
-            return minWidth;
-          }
-          return width;
-        },
-        maxCols: 1,
-        autoWrapCol: true,
-        height: 110,
-        copyPaste: false,
-        disableVisualSelection: 'area',
-        fillHandle: false,
-        fragmentSelection: 'cell',
-        tabMoves: {
-          row: 1,
-          col: 0
-        },
-        themeName: this.hot.getCurrentThemeName(),
-        layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
-      }));
-      _classPrivateFieldGet(_itemsBox, this).init();
-      const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
-      const gridContext = shortcutManager.getContext('grid');
-      gridContext.removeShortcutsByKeys(['Tab']);
-      gridContext.removeShortcutsByKeys(['Shift', 'Tab']);
-      gridContext.addShortcut({
-        keys: [['Escape']],
-        callback: event => {
-          this.runLocalHooks('keydown', event, this);
-        },
-        group: SHORTCUTS_GROUP
-      });
-      gridContext.addShortcut({
-        keys: [['Tab'], ['Shift', 'Tab']],
-        callback: event => {
-          _classPrivateFieldGet(_itemsBox, this).deselectCell();
-          this.runLocalHooks('keydown', event, this);
-          this.runLocalHooks('listTabKeydown', event, this);
-        },
-        group: SHORTCUTS_GROUP
-      });
-    };
-    hotInitializer(itemsBoxWrapper);
-    this.hot._registerTimeout(() => hotInitializer(itemsBoxWrapper), 100);
+    // Constructs and initializes a new Handsontable instance
+    _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(itemsBoxWrapper, {
+      data: [[]],
+      columns: [{
+        data: 'checked',
+        type: 'checkbox',
+        label: {
+          property: 'visualValue',
+          position: 'after'
+        }
+      }],
+      beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
+        TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
+      },
+      afterListen: () => {
+        this.runLocalHooks('focus', this);
+      },
+      beforeOnCellMouseUp: () => {
+        _classPrivateFieldGet(_itemsBox, this).listen();
+      },
+      modifyColWidth: width => {
+        const minWidth = _classPrivateFieldGet(_itemsBox, this).container.scrollWidth - (0, _element.getScrollbarWidth)(rootDocument);
+        if (width !== undefined && width < minWidth) {
+          return minWidth;
+        }
+        return width;
+      },
+      autoColumnSize: true,
+      autoRowSize: false,
+      hiddenRows: true,
+      maxCols: 1,
+      autoWrapCol: true,
+      height: 110,
+      copyPaste: false,
+      disableVisualSelection: 'area',
+      fillHandle: false,
+      fragmentSelection: 'cell',
+      tabMoves: {
+        row: 1,
+        col: 0
+      },
+      themeName: this.hot.getCurrentThemeName(),
+      layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
+    }));
+    _classPrivateFieldGet(_itemsBox, this).init();
+    const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
+    const gridContext = shortcutManager.getContext('grid');
+    gridContext.removeShortcutsByKeys(['Tab']);
+    gridContext.removeShortcutsByKeys(['Shift', 'Tab']);
+    gridContext.addShortcut({
+      keys: [['Escape']],
+      callback: event => {
+        this.runLocalHooks('keydown', event, this);
+      },
+      group: SHORTCUTS_GROUP
+    });
+    gridContext.addShortcut({
+      keys: [['Tab'], ['Shift', 'Tab']],
+      callback: event => {
+        _classPrivateFieldGet(_itemsBox, this).deselectCell();
+        this.runLocalHooks('keydown', event, this);
+        this.runLocalHooks('listTabKeydown', event, this);
+      },
+      group: SHORTCUTS_GROUP
+    });
   }
 
   /**
@@ -321,10 +317,12 @@ class MultipleSelectUI extends _base.BaseUI {
    * Update DOM structure.
    */
   update() {
-    if (!this.isBuilt()) {
+    if (!this.isBuilt() || _classPrivateFieldGet(_itemsBox, this).rootElement.offsetHeight === 0) {
       return;
     }
-    _classPrivateFieldGet(_itemsBox, this).loadData(valueToItems(_classPrivateFieldGet(_items, this), this.options.value));
+    _classPrivateFieldGet(_itemsBox, this).updateSettings({
+      data: valueToItems(_classPrivateFieldGet(_items, this), this.options.value)
+    });
     super.update();
   }
 
@@ -348,13 +346,26 @@ class MultipleSelectUI extends _base.BaseUI {
 exports.MultipleSelectUI = MultipleSelectUI;
 function _onInput(event) {
   const value = event.target.value.toLocaleLowerCase(this.getLocale());
-  let filteredItems;
-  if (value === '') {
-    filteredItems = [..._classPrivateFieldGet(_items, this)];
+  if (this.options.searchMode === 'apply') {
+    const hiddenRows = _classPrivateFieldGet(_itemsBox, this).getPlugin('hiddenRows');
+    hiddenRows.showRows(hiddenRows.getHiddenRows());
+    _classPrivateFieldGet(_items, this).forEach((item, index) => {
+      item.checked = `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0;
+      if (!item.checked) {
+        hiddenRows.hideRow(index);
+      }
+    });
+    _classPrivateFieldGet(_itemsBox, this).view.adjustElementsSize();
+    _classPrivateFieldGet(_itemsBox, this).render();
   } else {
-    filteredItems = _classPrivateFieldGet(_items, this).filter(item => `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+    let filteredItems;
+    if (value === '') {
+      filteredItems = [..._classPrivateFieldGet(_items, this)];
+    } else {
+      filteredItems = _classPrivateFieldGet(_items, this).filter(item => `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+    }
+    _classPrivateFieldGet(_itemsBox, this).loadData(filteredItems);
   }
-  _classPrivateFieldGet(_itemsBox, this).loadData(filteredItems);
 }
 /**
  * 'keydown' event listener for input element.

package/plugins/filters/ui/multipleSelect.mjs

@@ -208,6 +208,7 @@ export class MultipleSelectUI extends BaseUI {
    * Build DOM structure.
    */
   build() {
+    var _classPrivateFieldGet3;
     super.build();
     const {
       rootDocument
@@ -220,79 +221,74 @@ export class MultipleSelectUI extends BaseUI {
     this._element.appendChild(_classPrivateFieldGet(_searchInput, this).element);
     this._element.appendChild(selectionControl.element);
     this._element.appendChild(itemsBoxWrapper);
-    const hotInitializer = wrapper => {
-      var _classPrivateFieldGet3;
-      if (!this._element) {
-        return;
-      }
-      (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
-      addClass(wrapper, 'htUIMultipleSelectHot');
+    (_classPrivateFieldGet3 = _classPrivateFieldGet(_itemsBox, this)) === null || _classPrivateFieldGet3 === void 0 || _classPrivateFieldGet3.destroy();
+    addClass(itemsBoxWrapper, 'htUIMultipleSelectHot');
 
-      // Constructs and initializes a new Handsontable instance
-      _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(wrapper, {
-        data: _classPrivateFieldGet(_items, this),
-        columns: [{
-          data: 'checked',
-          type: 'checkbox',
-          label: {
-            property: 'visualValue',
-            position: 'after'
-          }
-        }],
-        beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
-          TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
-        },
-        afterListen: () => {
-          this.runLocalHooks('focus', this);
-        },
-        beforeOnCellMouseUp: () => {
-          _classPrivateFieldGet(_itemsBox, this).listen();
-        },
-        modifyColWidth: width => {
-          const minWidth = _classPrivateFieldGet(_itemsBox, this).container.scrollWidth - getScrollbarWidth(rootDocument);
-          if (width !== undefined && width < minWidth) {
-            return minWidth;
-          }
-          return width;
-        },
-        maxCols: 1,
-        autoWrapCol: true,
-        height: 110,
-        copyPaste: false,
-        disableVisualSelection: 'area',
-        fillHandle: false,
-        fragmentSelection: 'cell',
-        tabMoves: {
-          row: 1,
-          col: 0
-        },
-        themeName: this.hot.getCurrentThemeName(),
-        layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
-      }));
-      _classPrivateFieldGet(_itemsBox, this).init();
-      const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
-      const gridContext = shortcutManager.getContext('grid');
-      gridContext.removeShortcutsByKeys(['Tab']);
-      gridContext.removeShortcutsByKeys(['Shift', 'Tab']);
-      gridContext.addShortcut({
-        keys: [['Escape']],
-        callback: event => {
-          this.runLocalHooks('keydown', event, this);
-        },
-        group: SHORTCUTS_GROUP
-      });
-      gridContext.addShortcut({
-        keys: [['Tab'], ['Shift', 'Tab']],
-        callback: event => {
-          _classPrivateFieldGet(_itemsBox, this).deselectCell();
-          this.runLocalHooks('keydown', event, this);
-          this.runLocalHooks('listTabKeydown', event, this);
-        },
-        group: SHORTCUTS_GROUP
-      });
-    };
-    hotInitializer(itemsBoxWrapper);
-    this.hot._registerTimeout(() => hotInitializer(itemsBoxWrapper), 100);
+    // Constructs and initializes a new Handsontable instance
+    _classPrivateFieldSet(_itemsBox, this, new this.hot.constructor(itemsBoxWrapper, {
+      data: [[]],
+      columns: [{
+        data: 'checked',
+        type: 'checkbox',
+        label: {
+          property: 'visualValue',
+          position: 'after'
+        }
+      }],
+      beforeRenderer: (TD, row, col, prop, value, cellProperties) => {
+        TD.title = cellProperties.instance.getDataAtRowProp(row, cellProperties.label.property);
+      },
+      afterListen: () => {
+        this.runLocalHooks('focus', this);
+      },
+      beforeOnCellMouseUp: () => {
+        _classPrivateFieldGet(_itemsBox, this).listen();
+      },
+      modifyColWidth: width => {
+        const minWidth = _classPrivateFieldGet(_itemsBox, this).container.scrollWidth - getScrollbarWidth(rootDocument);
+        if (width !== undefined && width < minWidth) {
+          return minWidth;
+        }
+        return width;
+      },
+      autoColumnSize: true,
+      autoRowSize: false,
+      hiddenRows: true,
+      maxCols: 1,
+      autoWrapCol: true,
+      height: 110,
+      copyPaste: false,
+      disableVisualSelection: 'area',
+      fillHandle: false,
+      fragmentSelection: 'cell',
+      tabMoves: {
+        row: 1,
+        col: 0
+      },
+      themeName: this.hot.getCurrentThemeName(),
+      layoutDirection: this.hot.isRtl() ? 'rtl' : 'ltr'
+    }));
+    _classPrivateFieldGet(_itemsBox, this).init();
+    const shortcutManager = _classPrivateFieldGet(_itemsBox, this).getShortcutManager();
+    const gridContext = shortcutManager.getContext('grid');
+    gridContext.removeShortcutsByKeys(['Tab']);
+    gridContext.removeShortcutsByKeys(['Shift', 'Tab']);
+    gridContext.addShortcut({
+      keys: [['Escape']],
+      callback: event => {
+        this.runLocalHooks('keydown', event, this);
+      },
+      group: SHORTCUTS_GROUP
+    });
+    gridContext.addShortcut({
+      keys: [['Tab'], ['Shift', 'Tab']],
+      callback: event => {
+        _classPrivateFieldGet(_itemsBox, this).deselectCell();
+        this.runLocalHooks('keydown', event, this);
+        this.runLocalHooks('listTabKeydown', event, this);
+      },
+      group: SHORTCUTS_GROUP
+    });
   }
 
   /**
@@ -317,10 +313,12 @@ export class MultipleSelectUI extends BaseUI {
    * Update DOM structure.
    */
   update() {
-    if (!this.isBuilt()) {
+    if (!this.isBuilt() || _classPrivateFieldGet(_itemsBox, this).rootElement.offsetHeight === 0) {
       return;
     }
-    _classPrivateFieldGet(_itemsBox, this).loadData(valueToItems(_classPrivateFieldGet(_items, this), this.options.value));
+    _classPrivateFieldGet(_itemsBox, this).updateSettings({
+      data: valueToItems(_classPrivateFieldGet(_items, this), this.options.value)
+    });
     super.update();
   }
 
@@ -343,13 +341,26 @@ export class MultipleSelectUI extends BaseUI {
 }
 function _onInput(event) {
   const value = event.target.value.toLocaleLowerCase(this.getLocale());
-  let filteredItems;
-  if (value === '') {
-    filteredItems = [..._classPrivateFieldGet(_items, this)];
+  if (this.options.searchMode === 'apply') {
+    const hiddenRows = _classPrivateFieldGet(_itemsBox, this).getPlugin('hiddenRows');
+    hiddenRows.showRows(hiddenRows.getHiddenRows());
+    _classPrivateFieldGet(_items, this).forEach((item, index) => {
+      item.checked = `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0;
+      if (!item.checked) {
+        hiddenRows.hideRow(index);
+      }
+    });
+    _classPrivateFieldGet(_itemsBox, this).view.adjustElementsSize();
+    _classPrivateFieldGet(_itemsBox, this).render();
   } else {
-    filteredItems = _classPrivateFieldGet(_items, this).filter(item => `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+    let filteredItems;
+    if (value === '') {
+      filteredItems = [..._classPrivateFieldGet(_items, this)];
+    } else {
+      filteredItems = _classPrivateFieldGet(_items, this).filter(item => `${item.value}`.toLocaleLowerCase(this.getLocale()).indexOf(value) >= 0);
+    }
+    _classPrivateFieldGet(_itemsBox, this).loadData(filteredItems);
   }
-  _classPrivateFieldGet(_itemsBox, this).loadData(filteredItems);
 }
 /**
  * 'keydown' event listener for input element.

package/plugins/index.d.ts

@@ -34,6 +34,7 @@ import { StretchColumns } from './stretchColumns';
 import { TouchScroll } from './touchScroll';
 import { TrimRows } from './trimRows';
 import { Dialog } from './dialog';
+import { EmptyDataState } from './emptyDataState';
 import { Loading } from './loading';
 import { UndoRedo } from './undoRedo';
 
@@ -74,6 +75,7 @@ export interface Plugins {
   touchScroll: TouchScroll;
   trimRows: TrimRows;
   dialog: Dialog;
+  emptyDataState: EmptyDataState;
   loading: Loading;
   undoRedo: UndoRedo;
 }
@@ -118,6 +120,7 @@ export {
   TouchScroll,
   TrimRows,
   Dialog,
+  EmptyDataState,
   Loading,
   UndoRedo
 };

package/plugins/index.js

@@ -78,6 +78,8 @@ var _dialog = require("./dialog");
 exports.Dialog = _dialog.Dialog;
 var _loading = require("./loading");
 exports.Loading = _loading.Loading;
+var _emptyDataState = require("./emptyDataState");
+exports.EmptyDataState = _emptyDataState.EmptyDataState;
 var _registry = require("./registry");
 exports.registerPlugin = _registry.registerPlugin;
 exports.getPlugin = _registry.getPlugin;
@@ -123,4 +125,5 @@ function registerAllPlugins() {
   (0, _registry.registerPlugin)(_undoRedo.UndoRedo);
   (0, _registry.registerPlugin)(_dialog.Dialog);
   (0, _registry.registerPlugin)(_loading.Loading);
+  (0, _registry.registerPlugin)(_emptyDataState.EmptyDataState);
 }

package/plugins/index.mjs

@@ -36,6 +36,7 @@ import { TrimRows } from "./trimRows/index.mjs";
 import { UndoRedo } from "./undoRedo/index.mjs";
 import { Dialog } from "./dialog/index.mjs";
 import { Loading } from "./loading/index.mjs";
+import { EmptyDataState } from "./emptyDataState/index.mjs";
 import { registerPlugin } from "./registry.mjs";
 /**
  * Registers all available plugins.
@@ -78,6 +79,7 @@ export function registerAllPlugins() {
   registerPlugin(UndoRedo);
   registerPlugin(Dialog);
   registerPlugin(Loading);
+  registerPlugin(EmptyDataState);
 }
-export { AutoColumnSize, Autofill, AutoRowSize, BasePlugin, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, PersistentState, Search, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading };
+export { AutoColumnSize, Autofill, AutoRowSize, BasePlugin, BindRowsWithHeaders, CollapsibleColumns, ColumnSorting, ColumnSummary, Comments, ContextMenu, CopyPaste, CustomBorders, DragToScroll, DropdownMenu, ExportFile, Filters, Formulas, HiddenColumns, HiddenRows, ManualColumnFreeze, ManualColumnMove, ManualColumnResize, ManualRowMove, ManualRowResize, MergeCells, MultiColumnSorting, MultipleSelectionHandles, NestedHeaders, NestedRows, Pagination, PersistentState, Search, StretchColumns, TouchScroll, TrimRows, UndoRedo, Dialog, Loading, EmptyDataState };
 export { getPlugin, getPluginsNames, registerPlugin } from "./registry.mjs";

package/plugins/mergeCells/utils.js

@@ -15,15 +15,11 @@ function sumCellsHeights(hotInstance, row, rowspan) {
     rowIndexMapper,
     stylesHandler
   } = hotInstance;
-  const defaultHeight = stylesHandler.getDefaultRowHeight();
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {
     if (!rowIndexMapper.isHidden(i)) {
       var _hotInstance$getRowHe;
-      height += (_hotInstance$getRowHe = hotInstance.getRowHeight(i)) !== null && _hotInstance$getRowHe !== void 0 ? _hotInstance$getRowHe : defaultHeight;
-      if (i === 0 && !stylesHandler.isClassicTheme()) {
-        height += 1; // border-top-width
-      }
+      height += (_hotInstance$getRowHe = hotInstance.getRowHeight(i)) !== null && _hotInstance$getRowHe !== void 0 ? _hotInstance$getRowHe : stylesHandler.getDefaultRowHeight(i);
     }
   }
   return height;

package/plugins/mergeCells/utils.mjs

@@ -11,15 +11,11 @@ export function sumCellsHeights(hotInstance, row, rowspan) {
     rowIndexMapper,
     stylesHandler
   } = hotInstance;
-  const defaultHeight = stylesHandler.getDefaultRowHeight();
   let height = 0;
   for (let i = row; i < row + rowspan; i++) {
     if (!rowIndexMapper.isHidden(i)) {
       var _hotInstance$getRowHe;
-      height += (_hotInstance$getRowHe = hotInstance.getRowHeight(i)) !== null && _hotInstance$getRowHe !== void 0 ? _hotInstance$getRowHe : defaultHeight;
-      if (i === 0 && !stylesHandler.isClassicTheme()) {
-        height += 1; // border-top-width
-      }
+      height += (_hotInstance$getRowHe = hotInstance.getRowHeight(i)) !== null && _hotInstance$getRowHe !== void 0 ? _hotInstance$getRowHe : stylesHandler.getDefaultRowHeight(i);
     }
   }
   return height;