handsontable 17.1.0 → 18.0.0-rc2

package/helpers/dom/element.mjs

@@ -1,8 +1,6 @@
-import { sanitize } from '../string.mjs';
 import { A11Y_HIDDEN } from '../a11y.mjs';
 import { isSafariBefore261, isMobileBrowser, isIpadOS, isWindowsOS } from '../browser.mjs';
-import { deprecatedWarn } from '../console.mjs';
-import { throwWithCause } from '../../helpers/errors.mjs';
+import { warnOnce } from '../../helpers/console.mjs';
 /**
  * Get the parent of the specified node in the DOM tree.
  *
@@ -15,10 +13,10 @@ import { throwWithCause } from '../../helpers/errors.mjs';
     let elementToCheck = element;
     while(elementToCheck !== null){
         if (iteration === level) {
-            parent = elementToCheck;
+            parent = isHTMLElement(elementToCheck) ? elementToCheck : null;
             break;
         }
-        if (elementToCheck.host && elementToCheck.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+        if (isShadowRoot(elementToCheck)) {
             elementToCheck = elementToCheck.host;
         } else {
             iteration += 1;
@@ -37,13 +35,25 @@ import { throwWithCause } from '../../helpers/errors.mjs';
     const closestHandsontableContainer = element.closest('.handsontable');
     return !!closestHandsontableContainer && (closestHandsontableContainer.parentNode === thisHotContainer || closestHandsontableContainer === thisHotContainer);
 }
+/**
+ * Gets the event target element cast to the specified HTML element type.
+ * Centralizes the `event.target as HTMLElement` cast pattern.
+ *
+ * @param {Event} event The event.
+ * @returns {T|null} The target element or null.
+ */ export function eventTargetEl(event) {
+    return event.target;
+}
 /**
  * Gets `frameElement` of the specified frame. Returns null if it is a top frame or if script has no access to read property.
  *
  * @param {Window} frame Frame from which should be get frameElement in safe way.
  * @returns {HTMLIFrameElement|null}
  */ export function getFrameElement(frame) {
-    return Object.getPrototypeOf(frame.parent) && frame.frameElement;
+    const { frameElement } = frame;
+    // `frame.parent` can be null when the iframe has been detached from the DOM. Guard before
+    // passing to Object.getPrototypeOf(), which throws on null/undefined.
+    return frame.parent && Object.getPrototypeOf(frame.parent) && frameElement instanceof HTMLIFrameElement ? frameElement : null;
 }
 /**
  * Gets parent frame of the specified frame. Returns null if it is a top frame or if script has no access to read property.
@@ -51,7 +61,7 @@ import { throwWithCause } from '../../helpers/errors.mjs';
  * @param {Window} frame Frame from which should get frameElement in a safe way.
  * @returns {Window|null}
  */ export function getParentWindow(frame) {
-    return getFrameElement(frame) && frame.parent;
+    return getFrameElement(frame) ? frame.parent : null;
 }
 /**
  * Checks if script has access to read from parent frame of specified frame.
@@ -74,12 +84,11 @@ import { throwWithCause } from '../../helpers/errors.mjs';
     let elementToCheck = element;
     while(elementToCheck !== null && elementToCheck !== undefined && elementToCheck !== until){
         const { nodeType, nodeName } = elementToCheck;
-        if (nodeType === ELEMENT_NODE && (nodes.includes(nodeName) || nodes.includes(elementToCheck))) {
+        if (nodeType === ELEMENT_NODE && isHTMLElement(elementToCheck) && (nodes.includes(nodeName) || nodes.includes(elementToCheck))) {
             return elementToCheck;
         }
-        const { host } = elementToCheck;
-        if (host && nodeType === DOCUMENT_FRAGMENT_NODE) {
-            elementToCheck = host;
+        if (isShadowRoot(elementToCheck)) {
+            elementToCheck = elementToCheck.host;
         } else {
             elementToCheck = elementToCheck.parentNode;
         }
@@ -95,17 +104,18 @@ import { throwWithCause } from '../../helpers/errors.mjs';
  * @returns {HTMLElement|null}
  */ export function closestDown(element, nodes, until) {
     const matched = [];
-    let elementToCheck = element;
+    let elementToCheck = isHTMLElement(element) ? element : null;
     while(elementToCheck){
         elementToCheck = closest(elementToCheck, nodes, until);
         if (!elementToCheck || until && !until.contains(elementToCheck)) {
             break;
         }
         matched.push(elementToCheck);
-        if (elementToCheck.host && elementToCheck.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-            elementToCheck = elementToCheck.host;
+        if (isShadowRoot(elementToCheck)) {
+            const { host } = elementToCheck;
+            elementToCheck = isHTMLElement(host) ? host : null;
         } else {
-            elementToCheck = elementToCheck.parentNode;
+            elementToCheck = elementToCheck.parentElement;
         }
     }
     const length = matched.length;
@@ -150,10 +160,10 @@ import { throwWithCause } from '../../helpers/errors.mjs';
     let node = child.parentNode;
     let queriedParents = [];
     if (typeof parent === 'string') {
-        if (child.defaultView) {
-            queriedParents = Array.prototype.slice.call(child.querySelectorAll(parent), 0);
+        if (child instanceof Document) {
+            queriedParents = Array.from(child.querySelectorAll(parent));
         } else {
-            queriedParents = Array.prototype.slice.call(child.ownerDocument.querySelectorAll(parent), 0);
+            queriedParents = Array.from(child.ownerDocument.querySelectorAll(parent));
         }
     } else {
         queriedParents.push(parent);
@@ -192,8 +202,8 @@ import { throwWithCause } from '../../helpers/errors.mjs';
  * @param {HTMLElement} root The root element.
  * @returns {boolean}
  */ export function overlayContainsElement(overlayType, element, root) {
-    const overlayElement = root.parentElement.querySelector(`.ht_clone_${overlayType}`);
-    return overlayElement ? overlayElement.contains(element) : null;
+    const overlayElement = root.parentElement?.querySelector(`.ht_clone_${overlayType}`);
+    return overlayElement ? overlayElement.contains(element) : false;
 }
 /**
  * Checks whether the provided TH belongs to the bottom-most visual layer of column headers.
@@ -209,9 +219,9 @@ import { throwWithCause } from '../../helpers/errors.mjs';
         return false;
     }
     const headerRow = TH.parentNode;
-    const headerRows = Array.from(headerRow.parentNode.childNodes);
-    const headerLevel = headerRows.indexOf(headerRow);
-    const rowspan = Number.parseInt(TH.getAttribute('rowspan'), 10) || 1;
+    const headerRows = Array.from(headerRow?.parentNode?.childNodes ?? []);
+    const headerLevel = headerRow ? headerRows.indexOf(headerRow) : -1;
+    const rowspan = Number.parseInt(TH.getAttribute('rowspan') ?? '', 10) || 1;
     return headerLevel + rowspan >= headerRows.length;
 }
 /**
@@ -317,13 +327,13 @@ import { throwWithCause } from '../../helpers/errors.mjs';
         attributes = [
             [
                 attributes,
-                attributeValue
+                attributeValue ?? ''
             ]
         ];
     }
     attributes.forEach((attributeInfo)=>{
         if (Array.isArray(attributeInfo) && attributeInfo[0] !== '') {
-            domElement.setAttribute(...attributeInfo);
+            domElement.setAttribute(attributeInfo[0], String(attributeInfo[1]));
         }
     });
 }
@@ -357,10 +367,10 @@ import { throwWithCause } from '../../helpers/errors.mjs';
     });
 }
 /**
- * @param {HTMLElement} element An element from the text is removed.
+ * @param {Node} element An element from the text is removed.
  */ export function removeTextNodes(element) {
     if (element.nodeType === 3) {
-        element.parentNode.removeChild(element); // bye text nodes!
+        element.parentNode?.removeChild(element); // bye text nodes!
     } else if ([
         'TABLE',
         'THEAD',
@@ -387,21 +397,43 @@ import { throwWithCause } from '../../helpers/errors.mjs';
         element.removeChild(child);
     }
 }
-export const HTML_CHARACTERS = /(<(.*)>|&(.*);)/;
-let dompurifyDeprecatedMessageShown = false;
+export const HTML_CHARACTERS = /(<([^>]*)>|&([^;]*);)/;
+/**
+ * Shared "warn once" key for every missing-sanitizer warning, so that all DOM
+ * write surfaces (headers, context menu, dialogs, notifications, editors)
+ * collapse into a single warning per Handsontable instance.
+ */ export const SANITIZER_WARN_KEY = 'sanitizer';
+/**
+ * Default scope used when a caller writes raw HTML without supplying a per-instance
+ * scope. Keeps the warning to once per process for such callers.
+ */ const defaultSanitizerWarnScope = {};
 /**
  * Insert content into element trying to avoid innerHTML method.
  *
  * @param {HTMLElement} element An element to write into.
  * @param {string} content The text to write.
- * @param {function(string): string | boolean} [sanitizer] The sanitizer to use for the content.
- */ export function fastInnerHTML(element, content, sanitizer = sanitize) {
+ * @param {boolean|function(string, string): string} [sanitizer] When a function, use it as the sanitizer; when `false`,
+ * write the content as raw HTML on purpose (no warning); when `true` (the default), write the content as raw HTML and
+ * warn once that no sanitizer is configured.
+ * @param {string} [context] The sanitization context passed as the second argument to a custom sanitizer function, and
+ * used in the missing-sanitizer warning to identify the write surface.
+ * @param {object} [scope] Object the "warn once" state is bound to (for example, `hot.rootGridElement`), so the warning
+ * is shown at most once per Handsontable instance.
+ */ export function fastInnerHTML(element, content, sanitizer = true, context = 'innerHTML', scope = defaultSanitizerWarnScope) {
     if (HTML_CHARACTERS.test(content)) {
-        if (!dompurifyDeprecatedMessageShown && sanitizer === sanitize) {
-            dompurifyDeprecatedMessageShown = true;
-            deprecatedWarn('The HTML sanitization using DOMPurify library is deprecated and will be removed in the next major release. ' + 'Use the `sanitizer` option instead.\n\n' + 'Migration guide: https://handsontable.com/docs/migration-from-16.2-to-17.0/\n' + '`sanitizer` documentation: https://handsontable.com/docs/api/options/#sanitizer');
+        let sanitized;
+        if (typeof sanitizer === 'function') {
+            sanitized = sanitizer(content, context);
+        } else {
+            // `false` means the caller renders raw HTML deliberately (for example, the `html` cell type).
+            // Any other non-function value (the default `true`) is an implicit raw write, so nudge once
+            // toward configuring a sanitizer to prevent XSS.
+            if (sanitizer !== false) {
+                warnOnce(scope, SANITIZER_WARN_KEY, `HTML content is being written to the DOM ("${context}") without a sanitizer. ` + 'Configure the "sanitizer" option to prevent XSS vulnerabilities.');
+            }
+            sanitized = content;
         }
-        element.innerHTML = typeof sanitizer === 'function' ? sanitizer(content, 'innerHTML') : content;
+        element.innerHTML = sanitized;
     } else {
         fastInnerText(element, content);
     }
@@ -428,26 +460,33 @@ let dompurifyDeprecatedMessageShown = false;
  * @param {HTMLElement} element An element to check.
  * @returns {boolean}
  */ export function isVisible(element) {
+    // Fast path: use the native checkVisibility() API (Chrome 105+, Firefox 106+, Safari 17.4+).
+    // With no options it checks whether the element has an associated box — returning false for
+    // display:none and display:contents — and whether any ancestor sets content-visibility:hidden.
+    // This is stricter than the legacy walk below (which only catches display:none), but the
+    // extra cases are also semantically invisible, so the stricter result is correct.
+    // The benefit over the legacy walk: O(1) browser-native time instead of O(DOM depth) with
+    // per-node getComputedStyle() calls that force full-document layout recalculation.
+    if (typeof element.checkVisibility === 'function') {
+        return element.checkVisibility();
+    }
+    // Legacy fallback: manual ancestor walk for browsers that do not support checkVisibility().
     const documentElement = element.ownerDocument.documentElement;
     const windowElement = element.ownerDocument.defaultView;
     let next = element;
     while(next !== documentElement){
         if (next === null) {
             return false;
-        } else if (next.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-            if (next.host) {
-                // see: http://w3c.github.io/webcomponents/spec/shadow/#encapsulation
-                // according to spec, should be if (next.ownerDocument !== window.document), but that doesn't work yet
-                if (next.host.impl) {
-                    return isVisible(next.host.impl);
-                } else if (next.host) {
-                    return isVisible(next.host);
-                }
-                throwWithCause('Lost in Web Components world');
+        } else if (isShadowRoot(next)) {
+            const host = next.host;
+            if (host.impl) {
+                return isVisible(host.impl);
             } else {
-                return false; // this is a node detached from document in IE8
+                return isVisible(host);
             }
-        } else if (windowElement.getComputedStyle(next).display === 'none') {
+        } else if (next.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
+            return false; // this is a node detached from document in IE8
+        } else if (next.nodeType === Node.ELEMENT_NODE && isHTMLElement(next) && windowElement?.getComputedStyle(next).display === 'none') {
             return false;
         }
         next = next.parentNode;
@@ -463,12 +502,12 @@ let dompurifyDeprecatedMessageShown = false;
     const rootDocument = element.ownerDocument;
     const rootWindow = rootDocument.defaultView;
     let currentElement = element;
-    while(currentElement.parentNode){
+    while(currentElement.parentElement){
         if (currentElement.style.height === '0px' || currentElement.style.height === '0') {
-            const computedOverflow = rootWindow.getComputedStyle(currentElement).getPropertyValue('overflow');
+            const computedOverflow = rootWindow?.getComputedStyle(currentElement).getPropertyValue('overflow');
             return computedOverflow === 'hidden' || computedOverflow === 'clip';
         }
-        currentElement = currentElement.parentNode;
+        currentElement = currentElement.parentElement;
     }
     return false;
 }
@@ -488,7 +527,7 @@ let dompurifyDeprecatedMessageShown = false;
     offsetLeft = elementToCheck.offsetLeft;
     offsetTop = elementToCheck.offsetTop;
     lastElem = elementToCheck;
-    /* eslint-disable no-cond-assign */ while(elementToCheck = elementToCheck.offsetParent){
+    /* eslint-disable no-cond-assign */ while(elementToCheck = isHTMLElement(elementToCheck.offsetParent) ? elementToCheck.offsetParent : null){
         // from my observation, document.body always has scrollLeft/scrollTop == 0
         if (elementToCheck === rootDocument.body) {
             break;
@@ -505,8 +544,8 @@ let dompurifyDeprecatedMessageShown = false;
     // slow - http://jsperf.com/offset-vs-getboundingclientrect/6
     if (lastElem && lastElem.style.position === 'fixed') {
         // if(lastElem !== document.body) { //faster but does gives false positive in Firefox
-        offsetLeft += rootWindow.pageXOffset || documentElement.scrollLeft;
-        offsetTop += rootWindow.pageYOffset || documentElement.scrollTop;
+        offsetLeft += (rootWindow?.pageXOffset ?? 0) || documentElement.scrollLeft;
+        offsetTop += (rootWindow?.pageYOffset ?? 0) || documentElement.scrollTop;
     }
     return {
         left: offsetLeft,
@@ -539,7 +578,7 @@ export function getWindowScrollLeft(rootWindow = window) {
  * @returns {number}
  */ // eslint-disable-next-line no-restricted-globals
 export function getScrollTop(element, rootWindow = window) {
-    if (element === rootWindow) {
+    if (element instanceof Window) {
         return getWindowScrollTop(rootWindow);
     }
     return element.scrollTop;
@@ -552,7 +591,7 @@ export function getScrollTop(element, rootWindow = window) {
  * @returns {number}
  */ // eslint-disable-next-line no-restricted-globals
 export function getScrollLeft(element, rootWindow = window) {
-    if (element === rootWindow) {
+    if (element instanceof Window) {
         return getWindowScrollLeft(rootWindow);
     }
     return element.scrollLeft;
@@ -563,17 +602,13 @@ export function getScrollLeft(element, rootWindow = window) {
  * @param {HTMLElement} element An element to get the scrollable element from.
  * @returns {HTMLElement} Element's scrollable parent.
  */ export function getScrollableElement(element) {
-    let rootDocument = element.ownerDocument;
-    let rootWindow = rootDocument ? rootDocument.defaultView : undefined;
-    if (!rootDocument) {
-        rootDocument = element.document ? element.document : element;
-        rootWindow = rootDocument.defaultView;
-    }
+    const rootDocument = element.ownerDocument;
+    const rootWindow = rootDocument.defaultView;
     const props = [
         'auto',
         'scroll'
     ];
-    let el = element.parentNode;
+    let el = element.parentElement;
     while(el && el.style && rootDocument.body !== el){
         let { overflow, overflowX, overflowY } = el.style;
         if ([
@@ -583,7 +618,9 @@ export function getScrollLeft(element, rootWindow = window) {
         ].includes('scroll')) {
             return el;
         } else {
-            ({ overflow, overflowX, overflowY } = rootWindow.getComputedStyle(el));
+            if (rootWindow) {
+                ({ overflow, overflowX, overflowY } = rootWindow.getComputedStyle(el));
+            }
             if (props.includes(overflow) || props.includes(overflowX) || props.includes(overflowY)) {
                 return el;
             }
@@ -595,9 +632,9 @@ export function getScrollLeft(element, rootWindow = window) {
         if (el.clientWidth <= el.scrollWidth + 1 && (props.includes(overflowX) || props.includes(overflow))) {
             return el;
         }
-        el = el.parentNode;
+        el = el.parentElement;
     }
-    return rootWindow;
+    return rootWindow ?? rootDocument.documentElement;
 }
 /**
  * Get the maximum available `scrollTop` value for the provided element.
@@ -623,27 +660,29 @@ export function getScrollLeft(element, rootWindow = window) {
  */ export function getTrimmingContainer(base) {
     const rootDocument = base.ownerDocument;
     const rootWindow = rootDocument.defaultView;
-    let el = base.parentNode;
+    let el = base.parentElement;
     while(el && el.style && rootDocument.body !== el){
         if (el.style.overflow !== 'visible' && el.style.overflow !== '') {
             return el;
         }
-        const computedStyle = rootWindow.getComputedStyle(el);
-        const allowedProperties = [
-            'scroll',
-            'hidden',
-            'auto',
-            'clip'
-        ];
-        const property = computedStyle.getPropertyValue('overflow');
-        const propertyY = computedStyle.getPropertyValue('overflow-y');
-        const propertyX = computedStyle.getPropertyValue('overflow-x');
-        if (allowedProperties.includes(property) || allowedProperties.includes(propertyY) || allowedProperties.includes(propertyX)) {
-            return el;
+        if (rootWindow) {
+            const computedStyle = rootWindow.getComputedStyle(el);
+            const allowedProperties = [
+                'scroll',
+                'hidden',
+                'auto',
+                'clip'
+            ];
+            const property = computedStyle.getPropertyValue('overflow');
+            const propertyY = computedStyle.getPropertyValue('overflow-y');
+            const propertyX = computedStyle.getPropertyValue('overflow-x');
+            if (allowedProperties.includes(property) || allowedProperties.includes(propertyY) || allowedProperties.includes(propertyX)) {
+                return el;
+            }
         }
-        el = el.parentNode;
+        el = el.parentElement;
     }
-    return rootWindow;
+    return rootWindow ?? rootDocument.documentElement;
 }
 /**
  * Returns a style property for the provided element. (Be it an inline or external style).
@@ -656,21 +695,22 @@ export function getScrollLeft(element, rootWindow = window) {
 export function getStyle(element, prop, rootWindow = window) {
     if (!element) {
         return;
-    } else if (element === rootWindow) {
+    } else if (element instanceof Window) {
         if (prop === 'width') {
-            return `${rootWindow.innerWidth}px`;
+            return `${element.innerWidth}px`;
         } else if (prop === 'height') {
-            return `${rootWindow.innerHeight}px`;
+            return `${element.innerHeight}px`;
         }
         return;
     }
-    const styleProp = element.style[prop];
+    const styleProp = element.style.getPropertyValue(prop) || element.style[prop];
     if (styleProp !== '' && styleProp !== undefined) {
         return styleProp;
     }
     const computedStyle = rootWindow.getComputedStyle(element);
-    if (computedStyle[prop] !== '' && computedStyle[prop] !== undefined) {
-        return computedStyle[prop];
+    const computedProp = computedStyle.getPropertyValue(prop) || computedStyle[prop];
+    if (computedProp !== '' && computedProp !== undefined) {
+        return computedProp;
     }
 }
 /**
@@ -680,13 +720,13 @@ export function getStyle(element, prop, rootWindow = window) {
  * @param {CSSRule} rule Selector text from CSSRule.
  * @returns {boolean}
  */ export function matchesCSSRules(element, rule) {
-    const { selectorText } = rule;
     let result = false;
-    if (rule.type === CSSRule.STYLE_RULE && selectorText) {
-        if (element.msMatchesSelector) {
-            result = element.msMatchesSelector(selectorText);
+    if (rule instanceof CSSStyleRule && rule.selectorText) {
+        const elementWithMs = element;
+        if ('msMatchesSelector' in element && typeof elementWithMs.msMatchesSelector === 'function') {
+            result = elementWithMs.msMatchesSelector(rule.selectorText);
         } else if (element.matches) {
-            result = element.matches(selectorText);
+            result = element.matches(rule.selectorText);
         }
     }
     return result;
@@ -713,7 +753,7 @@ export function getStyle(element, prop, rootWindow = window) {
  * @param {HTMLElement} element An element to get the height from.
  * @returns {number} Element's inner height.
  */ export function innerHeight(element) {
-    return element.clientHeight || element.innerHeight;
+    return element instanceof Window ? element.innerHeight : element.clientHeight;
 }
 /**
  * Returns the element's inner width.
@@ -721,7 +761,7 @@ export function getStyle(element, prop, rootWindow = window) {
  * @param {HTMLElement} element An element to get the width from.
  * @returns {number} Element's inner width.
  */ export function innerWidth(element) {
-    return element.clientWidth || element.innerWidth;
+    return element instanceof Window ? element.innerWidth : element.clientWidth;
 }
 /**
  * @param {HTMLElement} element An element to which the event is added.
@@ -741,7 +781,7 @@ export function getStyle(element, prop, rootWindow = window) {
  * Returns caret position in text input.
  *
  * @author https://stackoverflow.com/questions/263743/how-to-get-caret-position-in-textarea
- * @param {HTMLElement} el An element to check.
+ * @param {HTMLInputElement|HTMLTextAreaElement} el An element to check.
  * @returns {number}
  */ export function getCaretPosition(el) {
     if (el.selectionStart) {
@@ -752,7 +792,7 @@ export function getStyle(element, prop, rootWindow = window) {
 /**
  * Returns end of the selection in text input.
  *
- * @param {HTMLElement} el An element to check.
+ * @param {HTMLInputElement|HTMLTextAreaElement} el An element to check.
  * @returns {number}
  */ export function getSelectionEndPosition(el) {
     if (el.selectionEnd) {
@@ -770,9 +810,14 @@ export function getSelectionText(rootWindow = window) {
     const rootDocument = rootWindow.document;
     let text = '';
     if (rootWindow.getSelection) {
-        text = rootWindow.getSelection().toString();
-    } else if (rootDocument.selection && rootDocument.selection.type !== 'Control') {
-        text = rootDocument.selection.createRange().text;
+        text = rootWindow.getSelection()?.toString() ?? '';
+    } else {
+        if ('selection' in rootDocument) {
+            const docWithSel = rootDocument;
+            if (docWithSel.selection && docWithSel.selection.type !== 'Control') {
+                text = docWithSel.selection.createRange().text;
+            }
+        }
     }
     return text;
 }
@@ -784,10 +829,11 @@ export function getSelectionText(rootWindow = window) {
 export function clearTextSelection(rootWindow = window) {
     // http://stackoverflow.com/questions/3169786/clear-text-selection-with-javascript
     if (rootWindow.getSelection) {
-        if (rootWindow.getSelection().empty) {
-            rootWindow.getSelection().empty();
-        } else if (rootWindow.getSelection().removeAllRanges) {
-            rootWindow.getSelection().removeAllRanges();
+        const sel = rootWindow.getSelection();
+        if (sel?.empty) {
+            sel.empty();
+        } else if (sel?.removeAllRanges) {
+            sel.removeAllRanges();
         }
     }
 }
@@ -795,7 +841,7 @@ export function clearTextSelection(rootWindow = window) {
  * Sets caret position in text input.
  *
  * @author http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea/
- * @param {Element} element An element to process.
+ * @param {HTMLInputElement|HTMLTextAreaElement} element An element to process.
  * @param {number} pos The selection start position.
  * @param {number} endPos The selection end position.
  */ export function setCaretPosition(element, pos, endPos) {
@@ -807,14 +853,17 @@ export function clearTextSelection(rootWindow = window) {
         try {
             element.setSelectionRange(pos, endPos);
         } catch (err) {
-            const elementParent = element.parentNode;
-            const parentDisplayValue = elementParent.style.display;
-            elementParent.style.display = 'block';
-            element.setSelectionRange(pos, endPos);
-            elementParent.style.display = parentDisplayValue;
+            const elementParent = element.parentElement;
+            if (elementParent) {
+                const parentDisplayValue = elementParent.style.display;
+                elementParent.style.display = 'block';
+                element.setSelectionRange(pos, endPos);
+                elementParent.style.display = parentDisplayValue;
+            }
         }
     }
 }
+let cachedScrollbarWidth;
 /**
  * Returns the fractional scaling compensation for scrollbar width calculation.
  *
@@ -827,7 +876,7 @@ export function getFractionalScalingCompensation(rootDocument = document) {
     }
     // On Windows, fractional scaling makes the scrollbar wider to compensate for the anti-aliasing.
     // This is a workaround to calculate the correct scrollbar width.
-    return Number.isInteger(rootDocument.defaultView.devicePixelRatio || 1) ? 0 : 2;
+    return Number.isInteger(rootDocument.defaultView?.devicePixelRatio || 1) ? 0 : 2;
 }
 /**
  * Helper to calculate scrollbar width.
@@ -880,7 +929,6 @@ function walkontableCalculateScrollbarWidth(rootDocument = document) {
     }
     return defaultScrollbarWidth;
 }
-let cachedScrollbarWidth;
 /**
  * Returns the computed width of the native browser scroll bar.
  *
@@ -965,7 +1013,7 @@ export function getScrollbarWidth(rootDocument = document) {
  * @param {HTMLElement} element - DOM element.
  * @returns {boolean}
  */ export function isOutsideInput(element) {
-    return isInput(element) && element.hasAttribute('data-hot-input') === false;
+    return isInput(element) && 'hotInput' in element.dataset === false;
 }
 /**
  * Check if the given DOM element can be focused (by using "select" method).
@@ -973,7 +1021,7 @@ export function getScrollbarWidth(rootDocument = document) {
  * @param {HTMLElement} element - DOM element.
  */ export function selectElementIfAllowed(element) {
     const activeElement = element.ownerDocument.activeElement;
-    if (!isOutsideInput(activeElement)) {
+    if (isHTMLElement(activeElement) && !isOutsideInput(activeElement) && (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement)) {
         element.select();
     }
 }
@@ -1012,17 +1060,18 @@ export function getScrollbarWidth(rootDocument = document) {
  */ export function makeElementContentEditableAndSelectItsContent(element, invisibleSelection = true, ariaHidden = true) {
     const ownerDocument = element.ownerDocument;
     const range = ownerDocument.createRange();
-    const sel = ownerDocument.defaultView.getSelection();
+    const sel = ownerDocument.defaultView?.getSelection();
     setAttribute(element, 'contenteditable', true);
     if (ariaHidden) {
-        setAttribute(element, ...A11Y_HIDDEN());
+        const hiddenAttr = A11Y_HIDDEN();
+        setAttribute(element, hiddenAttr[0], hiddenAttr[1]);
     }
     if (invisibleSelection) {
         addClass(element, 'invisibleSelection');
     }
     range.selectNodeContents(element);
-    sel.removeAllRanges();
-    sel.addRange(range);
+    sel?.removeAllRanges();
+    sel?.addRange(range);
 }
 /**
  * Remove the `contenteditable` attribute, deselect the contents and optionally remove the `invisibleSelection`
@@ -1031,11 +1080,11 @@ export function getScrollbarWidth(rootDocument = document) {
  * @param {HTMLElement} selectedElement The element to be deselected.
  * @param {boolean} [removeInvisibleSelectionClass=true] `true` if the class should be removed from the element.
  */ export function removeContentEditableFromElementAndDeselect(selectedElement, removeInvisibleSelectionClass = true) {
-    const sel = selectedElement.ownerDocument.defaultView.getSelection();
+    const sel = selectedElement.ownerDocument.defaultView?.getSelection();
     if (selectedElement.hasAttribute('aria-hidden')) {
         selectedElement.removeAttribute('aria-hidden');
     }
-    sel.removeAllRanges();
+    sel?.removeAllRanges();
     if (removeInvisibleSelectionClass) {
         removeClass(selectedElement, 'invisibleSelection');
     }
@@ -1059,6 +1108,44 @@ export function getScrollbarWidth(rootDocument = document) {
  * @param {*} element Element to check.
  * @returns {boolean} `true` if the element is HTMLElement.
  */ export function isHTMLElement(element) {
-    const OwnElement = element?.ownerDocument?.defaultView.Element;
-    return !!(OwnElement && OwnElement !== null && element instanceof OwnElement);
+    if (typeof element !== 'object' || element === null) {
+        return false;
+    }
+    const OwnElement = element.ownerDocument?.defaultView?.Element;
+    return !!(OwnElement && element instanceof OwnElement);
+}
+/**
+ * Check if the element is an HTMLTableCellElement (TD or TH). Cross-realm safe: uses the
+ * element's own realm's constructor via `ownerDocument.defaultView`.
+ *
+ * @param {unknown} element Element to check.
+ * @returns {boolean} `true` if the element is an HTMLTableCellElement.
+ */ export function isHTMLTableCellElement(element) {
+    return isHTMLElement(element) && (element.tagName === 'TD' || element.tagName === 'TH');
+}
+/**
+ * Check if the element is an HTMLInputElement.
+ *
+ * @param {HTMLElement} element Element to check.
+ * @returns {boolean} `true` if the element is an HTMLInputElement.
+ */ export function isHTMLInputElement(element) {
+    return element.tagName === 'INPUT';
+}
+/**
+ * Check if the node is a ShadowRoot (a document fragment attached to a host element).
+ *
+ * @param {Node} node Node to check.
+ * @returns {boolean} `true` if the node is a ShadowRoot.
+ */ export function isShadowRoot(node) {
+    return node.nodeType === Node.DOCUMENT_FRAGMENT_NODE && 'host' in node;
+}
+/**
+ * Gets a child node at the specified index cast to the specified HTML element type.
+ *
+ * @param {ParentNode} parent The parent node.
+ * @param {number} index The child index.
+ * @returns {T|null} The child element or null.
+ */ export function getChildEl(parent, index) {
+    const node = parent.childNodes[index];
+    return node ? node : null;
 }