handsontable 18.0.0 → 18.1.0-rc7

package/editors/multiSelectEditor/multiSelectEditor.mjs

@@ -52,8 +52,9 @@ import { BaseEditor } from '../baseEditor/index.mjs';
 import EventManager from '../../eventManager.mjs';
 import { DropdownController } from './controllers/dropdownController.mjs';
 import { SelectedItemsController } from './controllers/selectedItemsController.mjs';
-import { addClass, setAttribute } from '../../helpers/dom/element.mjs';
+import { addClass, getDeepActiveElement, setAttribute } from '../../helpers/dom/element.mjs';
 import { isPrintableChar } from '../../helpers/unicode.mjs';
+import { localeLowerCase } from '../../helpers/string.mjs';
 import { A11Y_LABEL, A11Y_GROUP } from '../../helpers/a11y.mjs';
 import { EDITOR_EDIT_GROUP } from '../../shortcuts/contexts/constants.mjs';
 import { getValuesIntersection, parseStringifiedValue } from './utils/utils.mjs';
@@ -95,8 +96,8 @@ var /**
    */ _syncSelectedValues = /*#__PURE__*/ new WeakSet(), /**
    * Reads a typed setting value from the cell properties by the given key.
    */ _getEditorSetting = /*#__PURE__*/ new WeakSet(), /**
-   * Handles the afterSetSourceDataAtCell hook to re-sync the dropdown when the renderer updates the source data for the edited cell.
-   */ _onAfterSetSourceDataAtCell = /*#__PURE__*/ new WeakSet();
+   * Handles the `afterChange` hook to re-sync the dropdown when the renderer removes a chip from the edited cell.
+   */ _onAfterChange = /*#__PURE__*/ new WeakSet();
 /**
  * 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.
@@ -169,7 +170,7 @@ var /**
             }
         });
         this.addHook('afterDestroy', ()=>this.destroy());
-        this.addHook('afterSetSourceDataAtCell', (changes, source)=>_class_private_method_get(this, _onAfterSetSourceDataAtCell, onAfterSetSourceDataAtCell).call(this, changes, source));
+        this.addHook('afterChange', (changes, source)=>_class_private_method_get(this, _onAfterChange, onAfterChange).call(this, changes, source));
         this.addHook('afterScrollHorizontally', ()=>this.refreshDimensions());
         this.addHook('afterScrollVertically', ()=>this.refreshDimensions());
         this.dropdownController.getInputController().addLocalHook('triggerFilter', (value)=>_class_private_method_get(this, _filterEntries, filterEntries).call(this, value));
@@ -248,7 +249,7 @@ var /**
     /**
    * Initializes the editor, creates DOM elements, and binds dropdown and hook events.
    */ constructor(hotInstance){
-        super(hotInstance), _class_private_method_init(this, _getSource), _class_private_method_init(this, _registerShortcuts), _class_private_method_init(this, _unregisterShortcuts), _class_private_method_init(this, _showEditableElement), _class_private_method_init(this, _hideEditableElement), _class_private_method_init(this, _blockNewSelections), _class_private_method_init(this, _unblockNewSelections), _class_private_method_init(this, _filterEntries), _class_private_method_init(this, _getAvailableSpace), _class_private_method_init(this, _saveCurrentSelection), _class_private_method_init(this, _addSelectedValue), _class_private_method_init(this, _removeSelectedValue), _class_private_method_init(this, _syncSelectedValues), _class_private_method_init(this, _getEditorSetting), _class_private_method_init(this, _onAfterSetSourceDataAtCell), _class_private_field_init(this, _selectedItems, {
+        super(hotInstance), _class_private_method_init(this, _getSource), _class_private_method_init(this, _registerShortcuts), _class_private_method_init(this, _unregisterShortcuts), _class_private_method_init(this, _showEditableElement), _class_private_method_init(this, _hideEditableElement), _class_private_method_init(this, _blockNewSelections), _class_private_method_init(this, _unblockNewSelections), _class_private_method_init(this, _filterEntries), _class_private_method_init(this, _getAvailableSpace), _class_private_method_init(this, _saveCurrentSelection), _class_private_method_init(this, _addSelectedValue), _class_private_method_init(this, _removeSelectedValue), _class_private_method_init(this, _syncSelectedValues), _class_private_method_init(this, _getEditorSetting), _class_private_method_init(this, _onAfterChange), _class_private_field_init(this, _selectedItems, {
             writable: true,
             value: void 0
         }), _class_private_field_init(this, _editorContainer, {
@@ -290,7 +291,7 @@ function registerShortcuts() {
                 ]
             ],
             callback: ()=>{
-                if (this.hot.rootDocument.activeElement === this.getInputElement()) {
+                if (getDeepActiveElement(this.hot.rootDocument) === this.getInputElement()) {
                     this.dropdownController.focusFirstItem();
                 } else {
                     this.dropdownController.focusNextItem();
@@ -322,7 +323,7 @@ function registerShortcuts() {
             ],
             runOnlyIf: ()=>!_class_private_method_get(this, _getEditorSetting, getEditorSetting).call(this, 'enterCommits'),
             callback: (event)=>{
-                const activeElement = this.hot.rootDocument.activeElement;
+                const activeElement = getDeepActiveElement(this.hot.rootDocument);
                 if (activeElement instanceof HTMLInputElement && activeElement.type === 'checkbox') {
                     activeElement.checked = !activeElement.checked;
                     activeElement.dispatchEvent(new Event('change'));
@@ -366,6 +367,7 @@ function unblockNewSelections() {
     this.dropdownController.enableCheckboxes();
 }
 function filterEntries(query, filterSelectedItems = _class_private_method_get(this, _getEditorSetting, getEditorSetting).call(this, 'filterSelectedItems') ?? true) {
+    const locale = this.cellProperties.locale;
     const filteredItems = _class_private_method_get(this, _getSource, getSource).call(this).filter((item)=>{
         const value = typeof item === 'object' && item !== null && 'value' in item ? item.value : item;
         if (!filterSelectedItems && _class_private_field_get(this, _selectedItems).has(item)) {
@@ -374,7 +376,7 @@ function filterEntries(query, filterSelectedItems = _class_private_method_get(th
         if (this.cellProperties.filteringCaseSensitive) {
             return String(value).includes(query);
         }
-        return String(value).toLowerCase().includes(query.toLowerCase());
+        return localeLowerCase(String(value), locale).includes(localeLowerCase(query, locale));
     });
     this.dropdownController.fillDropdown(filteredItems, _class_private_field_get(this, _selectedItems).getItemsArray());
     this.dropdownController.updateDimensions(_class_private_method_get(this, _getAvailableSpace, getAvailableSpace).call(this), true);
@@ -437,8 +439,8 @@ function syncSelectedValues(valuesArray) {
 function getEditorSetting(settingKey) {
     return this.cellProperties[settingKey];
 }
-function onAfterSetSourceDataAtCell(changes, source) {
-    if (this.isOpened() && source === `${EDITOR_TYPE}-renderer` && parseInt(String(changes[0][0]), 10) === this.cellProperties.visualRow && parseInt(String(changes[0][1]), 10) === this.cellProperties.visualCol) {
+function onAfterChange(changes, source) {
+    if (this.isOpened() && source === `${EDITOR_TYPE}-renderer` && Array.isArray(changes) && changes.length > 0 && changes[0][0] === this.cellProperties.visualRow && this.hot.propToCol(changes[0][1]) === this.cellProperties.visualCol) {
         _class_private_method_get(this, _syncSelectedValues, syncSelectedValues).call(this, changes[0][3]);
         this.dropdownController.fillDropdown(_class_private_method_get(this, _getSource, getSource).call(this), _class_private_field_get(this, _selectedItems).getItemsArray());
         this.dropdownController.focusItem(0);

package/editors/selectEditor/selectEditor.js

@@ -20,6 +20,7 @@ const _baseEditor = require("../baseEditor");
 const _element = require("../../helpers/dom/element");
 const _object = require("../../helpers/object");
 const _a11y = require("../../helpers/a11y");
+const _sanitizer = require("../../utils/sanitizer");
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 const EDITOR_TYPE = 'select';
@@ -119,7 +120,7 @@ class SelectEditor extends _baseEditor.BaseEditor {
             options = this.prepareOptions(selectOptions);
         }
         (0, _element.empty)(this.select);
-        const { sanitizer } = this.hot.getSettings();
+        const sanitizer = (0, _sanitizer.getSanitizer)(this.hot);
         if (Array.isArray(options)) {
             for(let i = 0; i < options.length; i++){
                 const optionElement = this.hot.rootDocument.createElement('OPTION');

package/editors/selectEditor/selectEditor.mjs

@@ -2,6 +2,7 @@ import { BaseEditor, EDITOR_STATE } from '../baseEditor/index.mjs';
 import { addClass, empty, fastInnerHTML, hasClass, removeClass } from '../../helpers/dom/element.mjs';
 import { objectEach } from '../../helpers/object.mjs';
 import { A11Y_HIDDEN } from '../../helpers/a11y.mjs';
+import { getSanitizer } from '../../utils/sanitizer.mjs';
 const EDITOR_VISIBLE_CLASS_NAME = 'ht_editor_visible';
 const SHORTCUTS_GROUP = 'selectEditor';
 export const EDITOR_TYPE = 'select';
@@ -104,7 +105,7 @@ export const EDITOR_TYPE = 'select';
             options = this.prepareOptions(selectOptions);
         }
         empty(this.select);
-        const { sanitizer } = this.hot.getSettings();
+        const sanitizer = getSanitizer(this.hot);
         if (Array.isArray(options)) {
             for(let i = 0; i < options.length; i++){
                 const optionElement = this.hot.rootDocument.createElement('OPTION');

package/editors/textEditor/textEditor.js

@@ -68,7 +68,7 @@ class TextEditor extends _baseEditor.BaseEditor {
    */ close() {
         this._opened = false;
         this.autoResize.unObserve();
-        if ((0, _element.isInternalElement)(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
+        if ((0, _element.isInternalElement)((0, _element.getDeepActiveElement)(this.hot.rootDocument), this.hot.rootElement)) {
             this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
         }
         this.hideEditableElement();

package/editors/textEditor/textEditor.mjs

@@ -1,7 +1,7 @@
 import { BaseEditor, EDITOR_STATE } from '../baseEditor/index.mjs';
 import EventManager from '../../eventManager.mjs';
 import { isEdge, isIOS } from '../../helpers/browser.mjs';
-import { addClass, isInternalElement, setCaretPosition, hasClass, removeClass, setAttribute } from '../../helpers/dom/element.mjs';
+import { addClass, getDeepActiveElement, isInternalElement, setCaretPosition, hasClass, removeClass, setAttribute } from '../../helpers/dom/element.mjs';
 import { rangeEach } from '../../helpers/number.mjs';
 import { createInputElementResizer } from '../../utils/autoResize.mjs';
 import { isDefined } from '../../helpers/mixed.mjs';
@@ -48,7 +48,7 @@ export const EDITOR_TYPE = 'text';
    */ close() {
         this._opened = false;
         this.autoResize.unObserve();
-        if (isInternalElement(this.hot.rootDocument.activeElement, this.hot.rootElement)) {
+        if (isInternalElement(getDeepActiveElement(this.hot.rootDocument), this.hot.rootElement)) {
             this.hot.listen(); // don't refocus the table if user focused some cell outside of HT on purpose
         }
         this.hideEditableElement();

package/eventManager.d.ts

@@ -1,5 +1,5 @@
 interface EventListenerEntry {
-    element: Element | Document | Window;
+    element: Element | Document | Window | ShadowRoot;
     event: string;
     callback: (event: Event) => void;
     callbackProxy: (event: Event) => void;
@@ -33,7 +33,7 @@ declare class EventManager {
      * @param {AddEventListenerOptions|boolean} [options] Listener options if object or useCapture if boolean.
      * @returns {Function} Returns function which you can easily call to remove that event.
      */
-    addEventListener<E extends Event = Event>(element: Element | Document | Window, eventName: string, callback: (event: E) => void, options?: boolean | AddEventListenerOptions): () => void;
+    addEventListener<E extends Event = Event>(element: Element | Document | Window | ShadowRoot, eventName: string, callback: (event: E) => void, options?: boolean | AddEventListenerOptions): () => void;
     /**
      * Remove the event listener previously registered.
      *
@@ -42,7 +42,7 @@ declare class EventManager {
      * @param {Function} callback Function to remove from the event target. It must be the same as during registration listener.
      * @param {boolean} [onlyOwnEvents] Whether whould remove only events registered using this instance of EventManager.
      */
-    removeEventListener(element: Element | Document | Window, eventName: string, callback: (event: Event) => void, onlyOwnEvents?: boolean): void;
+    removeEventListener(element: Element | Document | Window | ShadowRoot, eventName: string, callback: (event: Event) => void, onlyOwnEvents?: boolean): void;
     /**
      * Clear all previously registered events.
      *

package/focusManager/grid.d.ts

@@ -18,6 +18,34 @@ export declare class FocusGridManager {
      * Registers hooks to track selection changes and apply focus logic based on the configured focus mode.
      */
     init(): void;
+    /**
+     * Checks whether the browser focus currently sits inside the grid's root wrapper or portal.
+     * The state comes from focus events observed within the grid's own DOM tree, so it stays
+     * correct in environments where `document.activeElement` cannot be resolved through foreign
+     * shadow boundaries.
+     *
+     * @returns {boolean}
+     */
+    hasBrowserFocus(): boolean;
+    /**
+     * Checks whether the given focused element proves that the browser focus left the grid.
+     * Focus counts as foreign when the element is focusable, holds the browser focus, and is
+     * neither a part of the grid or its portal, nor one of the shadow hosts the grid is rendered
+     * within, nor the document body (a click on a non-focusable area keeps the focus where it
+     * was). Sandboxed hosts (e.g. Salesforce Lightning Web Security) hide the real focused
+     * element behind the host chain, so a focused ancestor host cannot prove the focus left the
+     * grid - only an unrelated element can.
+     *
+     * The check mirrors the scope-deactivation rule in the focus scope manager (`scopeManager`
+     * unlistens when a focus event lands outside every scope). Sandboxed hosts retarget the
+     * window-level focus events that rule depends on, so the mouseup path re-applies the same
+     * rule from the deepest reachable focused element. On a regular page both mechanisms agree -
+     * this adds no behavior that the scope manager does not already provide there.
+     *
+     * @param {HTMLElement | null} element The deepest reachable focused element.
+     * @returns {boolean}
+     */
+    isForeignFocusTarget(element: HTMLElement | null): boolean;
     /**
      * Get the current focus mode.
      *

package/focusManager/grid.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "FocusGridManager", {
         return FocusGridManager;
     }
 });
+const _eventManager = /*#__PURE__*/ _interop_require_default(require("../eventManager"));
 const _console = require("../helpers/console");
 const _element = require("../helpers/dom/element");
 const _function = require("../helpers/function");
@@ -61,6 +62,11 @@ function _class_private_method_init(obj, privateSet) {
     _check_private_redeclaration(obj, privateSet);
     privateSet.add(obj);
 }
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 /**
  * Possible focus modes.
  * - CELL - The browser's focus stays on the lastly selected cell element.
@@ -75,6 +81,17 @@ function _class_private_method_init(obj, privateSet) {
 var /**
    * The Handsontable instance.
    */ _hot = /*#__PURE__*/ new WeakMap(), /**
+   * Event manager used for the DOM listeners that track the browser focus within the grid.
+   *
+   * @type {EventManager}
+   */ _eventManager1 = /*#__PURE__*/ new WeakMap(), /**
+   * Tracks whether the browser focus currently sits inside the grid's root wrapper or portal.
+   * Maintained by `focusin`/`focusout` listeners bound within the grid's own DOM tree, where
+   * sandboxed hosts (e.g. Salesforce Lightning Web Security) still report true event targets -
+   * unlike `document.activeElement`, which such hosts collapse to the outermost shadow host.
+   *
+   * @type {boolean}
+   */ _hasBrowserFocus = /*#__PURE__*/ new WeakMap(), /**
    * The currently enabled focus mode.
    * Can be either:
    *
@@ -136,6 +153,60 @@ class FocusGridManager {
         _class_private_field_get(this, _hot).addHook('afterSelectionFocusSet', (...args)=>_class_private_method_get(this, _onAfterSelectionChange, onAfterSelectionChange).call(this));
         _class_private_field_get(this, _hot).addHook('afterSelectionEnd', (...args)=>_class_private_method_get(this, _focusEditorElement, focusEditorElement).call(this));
         _class_private_field_get(this, _hot).addHook('afterRender', (...args)=>_class_private_method_get(this, _onAfterRender, onAfterRender).call(this));
+        _class_private_field_set(this, _eventManager1, new _eventManager.default(_class_private_field_get(this, _hot)));
+        const focusRootElements = [
+            _class_private_field_get(this, _hot).rootWrapperElement ?? _class_private_field_get(this, _hot).rootElement,
+            _class_private_field_get(this, _hot).rootPortalElement
+        ].filter((element)=>(0, _element.isHTMLElement)(element));
+        focusRootElements.forEach((focusRootElement)=>{
+            _class_private_field_get(this, _eventManager1).addEventListener(focusRootElement, 'focusin', ()=>{
+                _class_private_field_set(this, _hasBrowserFocus, true);
+            });
+            _class_private_field_get(this, _eventManager1).addEventListener(focusRootElement, 'focusout', (event)=>{
+                const relatedTarget = event.relatedTarget;
+                _class_private_field_set(this, _hasBrowserFocus, (0, _element.isHTMLElement)(relatedTarget) && focusRootElements.some((focusRoot)=>focusRoot.contains(relatedTarget)));
+            });
+        });
+    }
+    /**
+   * Checks whether the browser focus currently sits inside the grid's root wrapper or portal.
+   * The state comes from focus events observed within the grid's own DOM tree, so it stays
+   * correct in environments where `document.activeElement` cannot be resolved through foreign
+   * shadow boundaries.
+   *
+   * @returns {boolean}
+   */ hasBrowserFocus() {
+        return _class_private_field_get(this, _hasBrowserFocus);
+    }
+    /**
+   * Checks whether the given focused element proves that the browser focus left the grid.
+   * Focus counts as foreign when the element is focusable, holds the browser focus, and is
+   * neither a part of the grid or its portal, nor one of the shadow hosts the grid is rendered
+   * within, nor the document body (a click on a non-focusable area keeps the focus where it
+   * was). Sandboxed hosts (e.g. Salesforce Lightning Web Security) hide the real focused
+   * element behind the host chain, so a focused ancestor host cannot prove the focus left the
+   * grid - only an unrelated element can.
+   *
+   * The check mirrors the scope-deactivation rule in the focus scope manager (`scopeManager`
+   * unlistens when a focus event lands outside every scope). Sandboxed hosts retarget the
+   * window-level focus events that rule depends on, so the mouseup path re-applies the same
+   * rule from the deepest reachable focused element. On a regular page both mechanisms agree -
+   * this adds no behavior that the scope manager does not already provide there.
+   *
+   * @param {HTMLElement | null} element The deepest reachable focused element.
+   * @returns {boolean}
+   */ isForeignFocusTarget(element) {
+        const { rootElement, rootWrapperElement, rootPortalElement, rootDocument } = _class_private_field_get(this, _hot);
+        // Grid-owned UI hosted in the root wrapper's layout slots or overlay layer (e.g. a
+        // plugin's formula bar) lives outside `rootElement`, so `isInternalElement` cannot
+        // recognize it. Elements inside `rootElement` are deliberately excluded here: a
+        // nested grid's focus must keep counting as foreign for this instance, exactly as
+        // `isInternalElement` decides.
+        const isWrapperHostedUi = !!rootWrapperElement && rootWrapperElement.contains(element) && !rootElement.contains(element);
+        if (element === null || element === rootDocument.body || element === rootDocument.documentElement || (0, _element.isInternalElement)(element, rootElement) || isWrapperHostedUi || rootPortalElement && rootPortalElement.contains(element)) {
+            return false;
+        }
+        return !(0, _element.getShadowHostChain)(rootElement).includes(element);
     }
     /**
    * Get the current focus mode.
@@ -279,6 +350,14 @@ class FocusGridManager {
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _eventManager1, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _hasBrowserFocus, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_init(this, _focusMode, {
             writable: true,
             value: void 0
@@ -303,6 +382,8 @@ class FocusGridManager {
             writable: true,
             value: void 0
         });
+        _class_private_field_set(this, _eventManager1, null);
+        _class_private_field_set(this, _hasBrowserFocus, false);
         _class_private_field_set(this, _refocusDelay, 1);
         _class_private_field_set(this, _refocusElementGetter, null);
         _class_private_field_set(this, _debouncedSelect, new Map());
@@ -337,7 +418,8 @@ function focusCell() {
     // have run. Reading `this.#isSuspended` inside the callback would miss the suspend window.
     const suspended = _class_private_field_get(this, _isSuspended);
     _class_private_method_get(this, _getSelectedCell, getSelectedCell).call(this, (selectedCell)=>{
-        const activeElement = _class_private_field_get(this, _hot).rootDocument.activeElement;
+        const deepActiveElement = (0, _element.getDeepActiveElement)(_class_private_field_get(this, _hot).rootDocument);
+        const activeElement = (0, _element.isHTMLElement)(deepActiveElement) ? deepActiveElement : null;
         // When focus management is suspended and an external focusable element (outside Handsontable)
         // currently owns the browser focus, keep it - do not blur and do not move focus to the cell.
         // This preserves the focus of inputs that live next to the grid when a programmatic selection
@@ -362,7 +444,8 @@ function focusEditorElement() {
     // owns focus, fall through so the default `imeFastEdit` behavior still moves focus to the
     // editor textarea (existing per-editor IME support tests rely on this). See #10038.
     if (_class_private_field_get(this, _isSuspended)) {
-        const activeElement = _class_private_field_get(this, _hot).rootDocument.activeElement;
+        const deepActiveElement = (0, _element.getDeepActiveElement)(_class_private_field_get(this, _hot).rootDocument);
+        const activeElement = (0, _element.isHTMLElement)(deepActiveElement) ? deepActiveElement : null;
         if (activeElement && (0, _element.isOutsideInput)(activeElement)) {
             return;
         }

package/focusManager/grid.mjs

@@ -48,8 +48,9 @@ function _class_private_method_init(obj, privateSet) {
     _check_private_redeclaration(obj, privateSet);
     privateSet.add(obj);
 }
+import EventManager from '../eventManager.mjs';
 import { warn } from '../helpers/console.mjs';
-import { isHTMLElement, isOutsideInput } from '../helpers/dom/element.mjs';
+import { getDeepActiveElement, getShadowHostChain, isHTMLElement, isInternalElement, isOutsideInput } from '../helpers/dom/element.mjs';
 import { debounce } from '../helpers/function.mjs';
 /**
  * Possible focus modes.
@@ -65,6 +66,17 @@ import { debounce } from '../helpers/function.mjs';
 var /**
    * The Handsontable instance.
    */ _hot = /*#__PURE__*/ new WeakMap(), /**
+   * Event manager used for the DOM listeners that track the browser focus within the grid.
+   *
+   * @type {EventManager}
+   */ _eventManager = /*#__PURE__*/ new WeakMap(), /**
+   * Tracks whether the browser focus currently sits inside the grid's root wrapper or portal.
+   * Maintained by `focusin`/`focusout` listeners bound within the grid's own DOM tree, where
+   * sandboxed hosts (e.g. Salesforce Lightning Web Security) still report true event targets -
+   * unlike `document.activeElement`, which such hosts collapse to the outermost shadow host.
+   *
+   * @type {boolean}
+   */ _hasBrowserFocus = /*#__PURE__*/ new WeakMap(), /**
    * The currently enabled focus mode.
    * Can be either:
    *
@@ -129,6 +141,60 @@ var /**
         _class_private_field_get(this, _hot).addHook('afterSelectionFocusSet', (...args)=>_class_private_method_get(this, _onAfterSelectionChange, onAfterSelectionChange).call(this));
         _class_private_field_get(this, _hot).addHook('afterSelectionEnd', (...args)=>_class_private_method_get(this, _focusEditorElement, focusEditorElement).call(this));
         _class_private_field_get(this, _hot).addHook('afterRender', (...args)=>_class_private_method_get(this, _onAfterRender, onAfterRender).call(this));
+        _class_private_field_set(this, _eventManager, new EventManager(_class_private_field_get(this, _hot)));
+        const focusRootElements = [
+            _class_private_field_get(this, _hot).rootWrapperElement ?? _class_private_field_get(this, _hot).rootElement,
+            _class_private_field_get(this, _hot).rootPortalElement
+        ].filter((element)=>isHTMLElement(element));
+        focusRootElements.forEach((focusRootElement)=>{
+            _class_private_field_get(this, _eventManager).addEventListener(focusRootElement, 'focusin', ()=>{
+                _class_private_field_set(this, _hasBrowserFocus, true);
+            });
+            _class_private_field_get(this, _eventManager).addEventListener(focusRootElement, 'focusout', (event)=>{
+                const relatedTarget = event.relatedTarget;
+                _class_private_field_set(this, _hasBrowserFocus, isHTMLElement(relatedTarget) && focusRootElements.some((focusRoot)=>focusRoot.contains(relatedTarget)));
+            });
+        });
+    }
+    /**
+   * Checks whether the browser focus currently sits inside the grid's root wrapper or portal.
+   * The state comes from focus events observed within the grid's own DOM tree, so it stays
+   * correct in environments where `document.activeElement` cannot be resolved through foreign
+   * shadow boundaries.
+   *
+   * @returns {boolean}
+   */ hasBrowserFocus() {
+        return _class_private_field_get(this, _hasBrowserFocus);
+    }
+    /**
+   * Checks whether the given focused element proves that the browser focus left the grid.
+   * Focus counts as foreign when the element is focusable, holds the browser focus, and is
+   * neither a part of the grid or its portal, nor one of the shadow hosts the grid is rendered
+   * within, nor the document body (a click on a non-focusable area keeps the focus where it
+   * was). Sandboxed hosts (e.g. Salesforce Lightning Web Security) hide the real focused
+   * element behind the host chain, so a focused ancestor host cannot prove the focus left the
+   * grid - only an unrelated element can.
+   *
+   * The check mirrors the scope-deactivation rule in the focus scope manager (`scopeManager`
+   * unlistens when a focus event lands outside every scope). Sandboxed hosts retarget the
+   * window-level focus events that rule depends on, so the mouseup path re-applies the same
+   * rule from the deepest reachable focused element. On a regular page both mechanisms agree -
+   * this adds no behavior that the scope manager does not already provide there.
+   *
+   * @param {HTMLElement | null} element The deepest reachable focused element.
+   * @returns {boolean}
+   */ isForeignFocusTarget(element) {
+        const { rootElement, rootWrapperElement, rootPortalElement, rootDocument } = _class_private_field_get(this, _hot);
+        // Grid-owned UI hosted in the root wrapper's layout slots or overlay layer (e.g. a
+        // plugin's formula bar) lives outside `rootElement`, so `isInternalElement` cannot
+        // recognize it. Elements inside `rootElement` are deliberately excluded here: a
+        // nested grid's focus must keep counting as foreign for this instance, exactly as
+        // `isInternalElement` decides.
+        const isWrapperHostedUi = !!rootWrapperElement && rootWrapperElement.contains(element) && !rootElement.contains(element);
+        if (element === null || element === rootDocument.body || element === rootDocument.documentElement || isInternalElement(element, rootElement) || isWrapperHostedUi || rootPortalElement && rootPortalElement.contains(element)) {
+            return false;
+        }
+        return !getShadowHostChain(rootElement).includes(element);
     }
     /**
    * Get the current focus mode.
@@ -272,6 +338,14 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_init(this, _eventManager, {
+            writable: true,
+            value: void 0
+        });
+        _class_private_field_init(this, _hasBrowserFocus, {
+            writable: true,
+            value: void 0
+        });
         _class_private_field_init(this, _focusMode, {
             writable: true,
             value: void 0
@@ -296,6 +370,8 @@ var /**
             writable: true,
             value: void 0
         });
+        _class_private_field_set(this, _eventManager, null);
+        _class_private_field_set(this, _hasBrowserFocus, false);
         _class_private_field_set(this, _refocusDelay, 1);
         _class_private_field_set(this, _refocusElementGetter, null);
         _class_private_field_set(this, _debouncedSelect, new Map());
@@ -330,7 +406,8 @@ function focusCell() {
     // have run. Reading `this.#isSuspended` inside the callback would miss the suspend window.
     const suspended = _class_private_field_get(this, _isSuspended);
     _class_private_method_get(this, _getSelectedCell, getSelectedCell).call(this, (selectedCell)=>{
-        const activeElement = _class_private_field_get(this, _hot).rootDocument.activeElement;
+        const deepActiveElement = getDeepActiveElement(_class_private_field_get(this, _hot).rootDocument);
+        const activeElement = isHTMLElement(deepActiveElement) ? deepActiveElement : null;
         // When focus management is suspended and an external focusable element (outside Handsontable)
         // currently owns the browser focus, keep it - do not blur and do not move focus to the cell.
         // This preserves the focus of inputs that live next to the grid when a programmatic selection
@@ -355,7 +432,8 @@ function focusEditorElement() {
     // owns focus, fall through so the default `imeFastEdit` behavior still moves focus to the
     // editor textarea (existing per-editor IME support tests rely on this). See #10038.
     if (_class_private_field_get(this, _isSuspended)) {
-        const activeElement = _class_private_field_get(this, _hot).rootDocument.activeElement;
+        const deepActiveElement = getDeepActiveElement(_class_private_field_get(this, _hot).rootDocument);
+        const activeElement = isHTMLElement(deepActiveElement) ? deepActiveElement : null;
         if (activeElement && isOutsideInput(activeElement)) {
             return;
         }

package/focusManager/scopeManager.js

@@ -166,7 +166,7 @@ function createFocusScopeManager(hotInstance) {
                 scope.disable();
             }
             if (scope === activeScope) {
-                if (scope.contains(hotInstance.rootDocument.activeElement)) {
+                if (scope.contains((0, _element.getDeepActiveElement)(hotInstance.rootDocument))) {
                     scope.deactivateFocusCatchers();
                 } else {
                     scope.activateFocusCatchers();

package/focusManager/scopeManager.mjs

@@ -3,7 +3,7 @@ import { throwWithCause } from '../helpers/errors.mjs';
 import { createFocusScope } from './scope.mjs';
 import { useEventListener } from './eventListener.mjs';
 import { FOCUS_SOURCES } from './constants.mjs';
-import { eventTargetEl, isVisible } from '../helpers/dom/element.mjs';
+import { eventTargetEl, getDeepActiveElement, isVisible } from '../helpers/dom/element.mjs';
 /**
  * @typedef {object} FocusScopeManager
  * @property {function(): string | null} getActiveScopeId Returns the ID of the active scope.
@@ -178,7 +178,7 @@ import { eventTargetEl, isVisible } from '../helpers/dom/element.mjs';
                 scope.disable();
             }
             if (scope === activeScope) {
-                if (scope.contains(hotInstance.rootDocument.activeElement)) {
+                if (scope.contains(getDeepActiveElement(hotInstance.rootDocument))) {
                     scope.deactivateFocusCatchers();
                 } else {
                     scope.activateFocusCatchers();

package/helpers/array.d.ts

@@ -93,6 +93,31 @@ export declare function arrayAvg(array: number[]): number;
  * @returns {Array}
  */
 export declare function arrayFlatten(array: unknown[]): unknown[];
+/**
+ * Removes the elements at the given indexes from the array. The array is compacted in one
+ * pass and mutated in place, so external references to it stay valid. Cost is O(array length)
+ * regardless of how many indexes are removed - unlike one `splice` call per removed index,
+ * which re-shifts the tail every time.
+ *
+ * @param {Array} array The array to mutate.
+ * @param {Set<number>} indexes The indexes of the elements to remove.
+ * @returns {Array} Returns the same, mutated array.
+ */
+export declare function removeIndexesInPlace<T>(array: T[], indexes: Set<number>): T[];
+/**
+ * Inserts `amount` copies of `value` into the array at the given index. The tail is shifted
+ * right once by `amount` and the array is mutated in place, so external references to it stay
+ * valid. An index greater than the array length is clamped to it (the values are appended),
+ * matching `Array.prototype.splice` semantics. Cost is O(array length + amount) regardless of
+ * `amount` - unlike one `splice` call per inserted value, which re-shifts the tail every time.
+ *
+ * @param {Array} array The array to mutate.
+ * @param {number} index The index at which to insert the values.
+ * @param {number} amount The number of copies to insert.
+ * @param {*} value The value to insert.
+ * @returns {Array} Returns the same, mutated array.
+ */
+export declare function insertValuesInPlace<T>(array: T[], index: number, amount: number, value: T): T[];
 /**
  * Unique values in the array.
  *

package/helpers/array.js

@@ -56,9 +56,15 @@ _export(exports, {
     get getUnionOfArrays () {
         return getUnionOfArrays;
     },
+    get insertValuesInPlace () {
+        return insertValuesInPlace;
+    },
     get pivot () {
         return pivot;
     },
+    get removeIndexesInPlace () {
+        return removeIndexesInPlace;
+    },
     get stringToArray () {
         return stringToArray;
     },
@@ -182,10 +188,36 @@ function arrayAvg(array) {
 function arrayFlatten(array) {
     return arrayReduce(array, (initial, value)=>initial.concat(Array.isArray(value) ? arrayFlatten(value) : value), []);
 }
+function removeIndexesInPlace(array, indexes) {
+    let writeIndex = 0;
+    for(let readIndex = 0; readIndex < array.length; readIndex++){
+        if (!indexes.has(readIndex)) {
+            array[writeIndex] = array[readIndex];
+            writeIndex += 1;
+        }
+    }
+    array.length = writeIndex;
+    return array;
+}
+function insertValuesInPlace(array, index, amount, value) {
+    if (amount <= 0) {
+        return array;
+    }
+    const oldLength = array.length;
+    const insertAt = Math.min(index, oldLength);
+    array.length = oldLength + amount;
+    for(let i = oldLength - 1; i >= insertAt; i--){
+        array[i + amount] = array[i];
+    }
+    array.fill(value, insertAt, insertAt + amount);
+    return array;
+}
 function arrayUnique(array) {
     const unique = [];
+    const seen = new Set();
     arrayEach(array, (value)=>{
-        if (unique.indexOf(value) === -1) {
+        if (!seen.has(value)) {
+            seen.add(value);
             unique.push(value);
         }
     });
@@ -197,7 +229,8 @@ function getDifferenceOfArrays(...arrays) {
     ];
     let filteredFirstArray = first;
     arrayEach(rest, (array)=>{
-        filteredFirstArray = filteredFirstArray.filter((value)=>!array.includes(value));
+        const lookup = new Set(array);
+        filteredFirstArray = filteredFirstArray.filter((value)=>!lookup.has(value));
     });
     return filteredFirstArray;
 }
@@ -213,11 +246,15 @@ function getIntersectionOfArrays(...args) {
             arrays.push(arg);
         }
     });
-    const isMatch = comparator ? (value, array)=>array.some((item)=>comparator(value, item)) : (value, array)=>array.includes(value);
     const [first, ...rest] = arrays;
     let filteredFirstArray = first;
     arrayEach(rest, (array)=>{
-        filteredFirstArray = filteredFirstArray.filter((value)=>isMatch(value, array));
+        if (comparator) {
+            filteredFirstArray = filteredFirstArray.filter((value)=>array.some((item)=>comparator(value, item)));
+        } else {
+            const lookup = new Set(array);
+            filteredFirstArray = filteredFirstArray.filter((value)=>lookup.has(value));
+        }
     });
     return filteredFirstArray;
 }