handsontable 17.1.0 → 18.0.0-rc2

package/editors/multiSelectEditor/controllers/inputController.mjs

@@ -16,9 +16,8 @@ function _class_private_method_init(obj, privateSet) {
 import { mixin } from '../../../helpers/object.mjs';
 import localHooks from '../../../mixins/localHooks.mjs';
 var /**
-   * Triggers the filtering.
-   *
-   * @param {string} value The value of the input.
+   * Runs all `triggerFilter` local hook callbacks with the current input value to initiate
+   * entry filtering in the dropdown.
    */ _triggerFilter = /*#__PURE__*/ new WeakSet();
 /**
  * Controller for managing the input.
@@ -27,23 +26,18 @@ var /**
  * @class InputController
  */ export class InputController {
     /**
-   * Gets the input element.
-   *
-   * @returns {HTMLInputElement} The input element.
+   * Returns the underlying `<input>` element managed by this controller.
    */ getInputElement() {
         return this.input;
     }
     /**
-   * Sets the value of the input.
-   *
-   * @param {string} value The value to set.
+   * Writes the given string into the input element's value property without firing a DOM input event.
    */ setValue(value) {
         this.input.value = value;
     }
     /**
-   * Toggles the input.
-   *
-   * @param {boolean} enabled If true, the input will be enabled.
+   * Enables or disables the input controller: passes `true` to start listening for input events,
+   * `false` to stop.
    */ toggle(enabled) {
         this.enabled = enabled;
         if (this.input) {
@@ -55,32 +49,30 @@ var /**
         }
     }
     /**
-   * Listens to the input keyup event.
+   * Registers the native `input` event listener on the managed element so that typing triggers `triggerFilter`.
    */ listen() {
         this.eventManager.addEventListener(this.input, 'input', this.onInput);
     }
     /**
-   * Unlistens to the input keyup event.
+   * Removes the previously registered `input` event listener from the managed element.
    */ unlisten() {
         this.eventManager.removeEventListener(this.input, 'input', this.onInput);
     }
     /**
-   * OnInput listener.
-   */ onInput() {
+   * Handles the native input event and delegates to the internal filter trigger.
+   */ _onInput() {
         _class_private_method_get(this, _triggerFilter, triggerFilter).call(this, this.input.value);
     }
     /**
-   * Creates a new InputController.
-   *
-   * @param {object} options Options object.
-   * @param {HTMLInputElement} options.input Input element.
-   * @param {EventManager} options.eventManager Event manager.
+   * Wires the given input element and event manager, and enables the controller immediately.
    */ constructor({ input, eventManager }){
         _class_private_method_init(this, _triggerFilter);
+        /**
+   * Bound handler for the native input event, used to trigger filtering.
+   */ this.onInput = this._onInput.bind(this);
         this.input = input;
         this.eventManager = eventManager;
         this.enabled = true;
-        this.onInput = this.onInput.bind(this);
     }
 }
 function triggerFilter(value) {

package/editors/multiSelectEditor/controllers/selectedItemsController.d.mts

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

package/editors/multiSelectEditor/controllers/selectedItemsController.d.ts

@@ -0,0 +1,62 @@
+/**
+ * Controller for managing the selected items.
+ *
+ * @private
+ * @class SelectedItemsController
+ */
+export declare class SelectedItemsController {
+    /**
+     * The set holding the currently selected item values.
+     */
+    selectedItems: Set<unknown>;
+    /**
+     * The maximum number of items that can be selected simultaneously.
+     */
+    maxSelectionsCount: number;
+    /**
+     * Creates a new SelectedItemsController.
+     *
+     * @param {Array<*>|undefined} selectedItems Array of selected items.
+     */
+    constructor(selectedItems?: unknown[]);
+    /**
+     * Sets the maximum number of selections.
+     */
+    setMaxSelectionCount(maxSelectionsCount: number): void;
+    /**
+     * Adds selected values (single or array) to the set.
+     *
+     * @param {string|object|Array<string|object>} items Items to add.
+     */
+    add(items: unknown | unknown[]): void;
+    /**
+     * Removes a selected value from the set.
+     *
+     * @param {string|object} item Item to remove.
+     * @returns {boolean} True if the item was removed, false otherwise.
+     */
+    remove(item: unknown): boolean;
+    /**
+     * Checks if a value is in the set.
+     *
+     * @param {*} value Value to check.
+     * @returns {boolean}
+     */
+    has(value: unknown): boolean;
+    /**
+     * Clears the set.
+     */
+    clear(): void;
+    /**
+     * Gets the number of selected items.
+     *
+     * @returns {number}
+     */
+    getSize(): number;
+    /**
+     * Gets the elements of the set.
+     *
+     * @returns {Array<*>}
+     */
+    getItemsArray(): unknown[];
+}

package/editors/multiSelectEditor/controllers/selectedItemsController.js

@@ -13,8 +13,6 @@ const _utils = require("../utils/utils");
 class SelectedItemsController {
     /**
    * Sets the maximum number of selections.
-   *
-   * @param {number} maxSelectionsCount Maximum number of selections.
    */ setMaxSelectionCount(maxSelectionsCount) {
         this.maxSelectionsCount = maxSelectionsCount;
     }
@@ -82,22 +80,11 @@ class SelectedItemsController {
    *
    * @param {Array<*>|undefined} selectedItems Array of selected items.
    */ constructor(selectedItems){
-        /**
-   * Set of selected items.
-   *
-   * @private
-   * @type {Set<*>}
-   */ this.selectedItems = this.selectedItems ?? new Set();
-        /**
-   * Maximum number of selections.
-   *
-   * @private
-   * @type {number}
-   */ this.maxSelectionsCount = Infinity;
         if (Array.isArray(selectedItems)) {
             this.selectedItems = new Set(selectedItems);
         } else {
             this.selectedItems = new Set();
         }
+        this.maxSelectionsCount = Infinity;
     }
 }

package/editors/multiSelectEditor/controllers/selectedItemsController.mjs

@@ -8,8 +8,6 @@ import { includesValue } from '../utils/utils.mjs';
  */ export class SelectedItemsController {
     /**
    * Sets the maximum number of selections.
-   *
-   * @param {number} maxSelectionsCount Maximum number of selections.
    */ setMaxSelectionCount(maxSelectionsCount) {
         this.maxSelectionsCount = maxSelectionsCount;
     }
@@ -77,22 +75,11 @@ import { includesValue } from '../utils/utils.mjs';
    *
    * @param {Array<*>|undefined} selectedItems Array of selected items.
    */ constructor(selectedItems){
-        /**
-   * Set of selected items.
-   *
-   * @private
-   * @type {Set<*>}
-   */ this.selectedItems = this.selectedItems ?? new Set();
-        /**
-   * Maximum number of selections.
-   *
-   * @private
-   * @type {number}
-   */ this.maxSelectionsCount = Infinity;
         if (Array.isArray(selectedItems)) {
             this.selectedItems = new Set(selectedItems);
         } else {
             this.selectedItems = new Set();
         }
+        this.maxSelectionsCount = Infinity;
     }
 }

package/editors/multiSelectEditor/controllers/utils.d.mts

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

package/editors/multiSelectEditor/controllers/utils.d.ts

@@ -0,0 +1,94 @@
+export declare const SELECTED_ITEM_CLASS = "ht-multi-select-editor-item-selected";
+/**
+ * Applies visual selection state and checks the checkbox.
+ *
+ * @param {HTMLLIElement} itemElement Dropdown row element.
+ */
+export declare function selectItem(itemElement: HTMLLIElement): void;
+/**
+ * Clears selection classes and unchecks the checkbox.
+ *
+ * @param {HTMLLIElement} itemElement Dropdown row element.
+ */
+export declare function deselectItem(itemElement: HTMLLIElement): void;
+/**
+ * Creates the wrapper div for the search input.
+ */
+export declare function createSearchInputWrapper({ root }: {
+    root: Document;
+}): HTMLDivElement;
+/**
+ * Creates the search icon element.
+ */
+export declare function createSearchIcon({ root }: {
+    root: Document;
+}): HTMLDivElement;
+/**
+ * Creates the search input element.
+ */
+export declare function createSearchInputElement({ root }: {
+    root: Document;
+}): HTMLInputElement;
+/**
+ * Creates the separator line element.
+ */
+export declare function createSeparatorElement({ root }: {
+    root: Document;
+}): HTMLElement;
+/**
+ * Creates the list element that holds dropdown items.
+ */
+export declare function createListElement({ root }: {
+    root: Document;
+}): HTMLUListElement;
+/**
+ * Gets the width of the dropdown.
+ */
+export declare function getDropdownWidth({ dropdownListElement }: {
+    dropdownListElement: HTMLUListElement;
+}): number;
+/**
+ * Deselects all items in the dropdown.
+ */
+export declare function deselectAllItems({ dropdownListElement }: {
+    dropdownListElement: HTMLUListElement;
+}): void;
+/**
+ * Defocuses the item at the given index.
+ */
+export declare function defocusItem({ dropdownListElement, index, }: {
+    dropdownListElement: HTMLUListElement;
+    index: number;
+}): void;
+/**
+ * Focuses the item at the given index.
+ */
+export declare function focusItemAt({ dropdownListElement, index, }: {
+    dropdownListElement: HTMLUListElement;
+    index: number;
+}): void;
+/**
+ * Disables the unchecked checkboxes in the dropdown.
+ */
+export declare function disableUncheckedCheckboxes({ dropdownListElement, }: {
+    dropdownListElement: HTMLUListElement;
+}): void;
+/**
+ * Enables all checkboxes in the dropdown.
+ */
+export declare function enableAllCheckboxes({ dropdownListElement, }: {
+    dropdownListElement: HTMLUListElement;
+}): void;
+export interface CreateListItemElementOptions {
+    rootDocument: Document;
+    instanceId: string;
+    itemKey?: string;
+    itemValue: string;
+    indexWithinList: number;
+    checked?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Creates a single dropdown row with a checkbox and label.
+ */
+export declare function createListItemElement({ rootDocument, instanceId, itemKey, itemValue, indexWithinList, checked, disabled, }: CreateListItemElementOptions): HTMLLIElement;

package/editors/multiSelectEditor/controllers/utils.js

@@ -70,14 +70,14 @@ const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 function selectItem(itemElement) {
     const checkbox = (0, _utils.getCheckboxElement)(itemElement);
     (0, _element.addClass)(itemElement, SELECTED_ITEM_CLASS);
-    if (!checkbox.checked) {
+    if (checkbox && !checkbox.checked) {
         checkbox.checked = true;
     }
 }
 function deselectItem(itemElement) {
     const checkbox = (0, _utils.getCheckboxElement)(itemElement);
     (0, _element.removeClass)(itemElement, SELECTED_ITEM_CLASS);
-    if (checkbox.checked) {
+    if (checkbox && checkbox.checked) {
         checkbox.checked = false;
     }
 }
@@ -152,12 +152,12 @@ function focusItemAt({ dropdownListElement, index }) {
 }
 function disableUncheckedCheckboxes({ dropdownListElement }) {
     dropdownListElement.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach((checkbox)=>{
-        checkbox.dataset.disabled = true;
+        checkbox.dataset.disabled = 'true';
     });
 }
 function enableAllCheckboxes({ dropdownListElement }) {
     dropdownListElement.querySelectorAll('input[type="checkbox"]').forEach((checkbox)=>{
-        checkbox.dataset.disabled = false;
+        checkbox.dataset.disabled = 'false';
     });
 }
 function createListItemElement({ rootDocument, instanceId, itemKey, itemValue, indexWithinList, checked = false, disabled = false }) {
@@ -168,8 +168,8 @@ function createListItemElement({ rootDocument, instanceId, itemKey, itemValue, i
     checkboxElement.id = `${instanceId}-${CHECKBOX_ID_PREFIX}${indexWithinList}`;
     checkboxElement.type = 'checkbox';
     checkboxElement.dataset.value = itemValue;
-    checkboxElement.dataset.index = indexWithinList;
-    checkboxElement.dataset.disabled = checked ? false : disabled;
+    checkboxElement.dataset.index = String(indexWithinList);
+    checkboxElement.dataset.disabled = disabled && !checked ? 'true' : 'false';
     if (itemKey) {
         checkboxElement.dataset.key = itemKey;
     }

package/editors/multiSelectEditor/controllers/utils.mjs

@@ -17,7 +17,7 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
  */ export function selectItem(itemElement) {
     const checkbox = getCheckboxElement(itemElement);
     addClass(itemElement, SELECTED_ITEM_CLASS);
-    if (!checkbox.checked) {
+    if (checkbox && !checkbox.checked) {
         checkbox.checked = true;
     }
 }
@@ -28,16 +28,12 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
  */ export function deselectItem(itemElement) {
     const checkbox = getCheckboxElement(itemElement);
     removeClass(itemElement, SELECTED_ITEM_CLASS);
-    if (checkbox.checked) {
+    if (checkbox && checkbox.checked) {
         checkbox.checked = false;
     }
 }
 /**
  * Creates the wrapper div for the search input.
- *
- * @param {object} options Options object.
- * @param {Document} options.root Root document element.
- * @returns {HTMLDivElement}
  */ export function createSearchInputWrapper({ root }) {
     const wrapperElement = root.createElement('div');
     wrapperElement.className = SEARCH_INPUT_WRAPPER_CLASS;
@@ -45,10 +41,6 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Creates the search icon element.
- *
- * @param {object} options Options object.
- * @param {Document} options.root Root document element.
- * @returns {HTMLElement}
  */ export function createSearchIcon({ root }) {
     const iconElement = root.createElement('div');
     addClass(iconElement, SEARCH_ICON_CLASS);
@@ -59,10 +51,6 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Creates the search input element.
- *
- * @param {object} options Options object.
- * @param {Document} options.root Root document element.
- * @returns {HTMLInputElement}
  */ export function createSearchInputElement({ root }) {
     const inputElement = root.createElement('input');
     setAttribute(inputElement, [
@@ -89,10 +77,6 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Creates the separator line element.
- *
- * @param {object} options Options object.
- * @param {Document} options.root Root document element.
- * @returns {HTMLElement}
  */ export function createSeparatorElement({ root }) {
     const separatorElement = root.createElement('div');
     separatorElement.className = SEPARATOR_CLASS;
@@ -100,36 +84,21 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Creates the list element that holds dropdown items.
- *
- * @param {object} options Options object.
- * @param {Document} options.root Root document element.
- * @returns {HTMLUListElement}
  */ export function createListElement({ root }) {
     return root.createElement('ul');
 }
 /**
  * Gets the width of the dropdown.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
- * @returns {number} Width of the dropdown.
  */ export function getDropdownWidth({ dropdownListElement }) {
     return dropdownListElement.offsetWidth;
 }
 /**
  * Deselects all items in the dropdown.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
  */ export function deselectAllItems({ dropdownListElement }) {
     dropdownListElement.querySelectorAll(`.${SELECTED_ITEM_CLASS}`).forEach((itemElement)=>deselectItem(itemElement));
 }
 /**
  * Defocuses the item at the given index.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
- * @param {number} options.index Index of the item to defocus.
  */ export function defocusItem({ dropdownListElement, index }) {
     const itemElement = dropdownListElement.children[index];
     if (itemElement) {
@@ -141,10 +110,6 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Focuses the item at the given index.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
- * @param {number} options.index Index of the item to focus.
  */ export function focusItemAt({ dropdownListElement, index }) {
     const itemElement = dropdownListElement.children[index];
     if (itemElement) {
@@ -156,36 +121,20 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
 }
 /**
  * Disables the unchecked checkboxes in the dropdown.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
  */ export function disableUncheckedCheckboxes({ dropdownListElement }) {
     dropdownListElement.querySelectorAll('input[type="checkbox"]:not(:checked)').forEach((checkbox)=>{
-        checkbox.dataset.disabled = true;
+        checkbox.dataset.disabled = 'true';
     });
 }
 /**
  * Enables all checkboxes in the dropdown.
- *
- * @param {object} options Options object.
- * @param {HTMLUListElement} options.dropdownListElement The dropdown list element.
  */ export function enableAllCheckboxes({ dropdownListElement }) {
     dropdownListElement.querySelectorAll('input[type="checkbox"]').forEach((checkbox)=>{
-        checkbox.dataset.disabled = false;
+        checkbox.dataset.disabled = 'false';
     });
 }
 /**
  * Creates a single dropdown row with a checkbox and label.
- *
- * @param {object} options Options object.
- * @param {Document} options.rootDocument Root document element.
- * @param {string} options.instanceId Handsontable instance id.
- * @param {string} options.itemKey Key stored in the associated checkbox dataset.
- * @param {string} options.itemValue Text shown next to the checkbox.
- * @param {number} options.indexWithinList Index of the item within the list.
- * @param {boolean} [options.checked=false] Flag indicating whether the checkbox starts selected.
- * @param {boolean} [options.disabled=false] Flag indicating whether the checkbox starts disabled.
- * @returns {HTMLLIElement}
  */ export function createListItemElement({ rootDocument, instanceId, itemKey, itemValue, indexWithinList, checked = false, disabled = false }) {
     const itemElement = rootDocument.createElement('li');
     const innerContainer = rootDocument.createElement('div');
@@ -194,8 +143,8 @@ export const SELECTED_ITEM_CLASS = `${classPrefix}-item-selected`;
     checkboxElement.id = `${instanceId}-${CHECKBOX_ID_PREFIX}${indexWithinList}`;
     checkboxElement.type = 'checkbox';
     checkboxElement.dataset.value = itemValue;
-    checkboxElement.dataset.index = indexWithinList;
-    checkboxElement.dataset.disabled = checked ? false : disabled;
+    checkboxElement.dataset.index = String(indexWithinList);
+    checkboxElement.dataset.disabled = disabled && !checked ? 'true' : 'false';
     if (itemKey) {
         checkboxElement.dataset.key = itemKey;
     }

package/editors/multiSelectEditor/index.d.mts

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

package/editors/multiSelectEditor/index.d.ts

@@ -0,0 +1 @@
+export { EDITOR_TYPE, MultiSelectEditor, } from './multiSelectEditor';

package/editors/multiSelectEditor/multiSelectEditor.d.mts

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

package/editors/multiSelectEditor/multiSelectEditor.d.ts

@@ -0,0 +1,88 @@
+import type { HotInstance } from '../../core/types';
+import type { CellProperties } from '../../settings';
+import { BaseEditor } from '../baseEditor';
+import EventManager from '../../eventManager';
+import { DropdownController } from './controllers/dropdownController';
+export declare const EDITOR_TYPE = "multiselect";
+/**
+ * Cell editor that lets users pick one or more values from a checkbox dropdown list.
+ * Saves on every check/uncheck rather than on editor close.
+ *
+ * @private
+ * @class MultiSelectEditor
+ */
+export declare class MultiSelectEditor extends BaseEditor {
+    #private;
+    /**
+     * Overrides the base flag to keep the editor open after data changes — multiselect saves on each selection.
+     */
+    _closeAfterDataChange: boolean;
+    /**
+     * The container element passed to `DropdownController` that holds the dropdown UI.
+     */
+    dropdownContainerElement: HTMLDivElement | null;
+    /**
+     * The controller responsible for rendering and managing the dropdown list.
+     */
+    dropdownController: DropdownController | null;
+    /**
+     * The event manager used to register and clean up DOM event listeners.
+     */
+    eventManager: InstanceType<typeof EventManager>;
+    /**
+     * Returns the unique editor type identifier for the multiselect editor.
+     */
+    static get EDITOR_TYPE(): string;
+    /**
+     * Initializes the editor, creates DOM elements, and binds dropdown and hook events.
+     */
+    constructor(hotInstance: HotInstance);
+    /**
+     * Creates the outer container, dropdown container, accessibility attributes, and the DropdownController instance.
+     */
+    createElements(): void;
+    /**
+     * Prepares the editor for the given cell, resets the dropdown, syncs the current selection, and applies cell settings.
+     */
+    prepare(row: number, col: number, prop: string | number, td: HTMLTableCellElement, value: unknown, cellProperties: CellProperties): void;
+    /**
+     * Delegates to the base finishEditing to complete saving or restoring the cell value.
+     */
+    finishEditing(restoreOriginalValue: boolean, ctrlDown: boolean, callback?: Function): void;
+    /**
+     * Wires dropdown check/uncheck hooks, scroll hooks, destroy cleanup, and the search filter trigger.
+     */
+    bindEvents(): void;
+    /**
+     * Shows the dropdown, positions it next to the edited cell, registers keyboard shortcuts, and focuses the appropriate element.
+     */
+    open(event?: Event | null): void;
+    /**
+     * Hides the dropdown element, unregisters keyboard shortcuts, and stops the search input listener.
+     */
+    close(): void;
+    /**
+     * Returns the currently selected values as an array to be written to the cell.
+     */
+    getValue(): unknown[];
+    /**
+     * No-op override — MultiSelectEditor saves data immediately on each check/uncheck event.
+     */
+    setValue(): void;
+    /**
+     * Repositions the dropdown next to the edited cell; closes the editor if the cell is no longer rendered.
+     */
+    refreshDimensions(): void;
+    /**
+     * Focuses the first dropdown item when search input is disabled, or the search input otherwise.
+     */
+    focus(): void;
+    /**
+     * Returns the underlying search input element from the dropdown's input controller.
+     */
+    getInputElement(): HTMLInputElement;
+    /**
+     * Closes the editor and resets the dropdown controller state, releasing DOM resources.
+     */
+    destroy(): void;
+}