@progress/kendo-spreadsheet-common 1.1.3-develop.2 → 1.2.0-develop.1

package/dist/index-esm.js

@@ -1,4 +1,4 @@
-import { drawing, parseColor, geometry, drawDOM } from '@progress/kendo-drawing';
+import { drawing, parseColor, geometry, drawText as drawText$1 } from '@progress/kendo-drawing';
 import { dayOfWeek, getDate, addDays, firstDayOfMonth } from '@progress/kendo-date-math';
 import { browser } from '@progress/kendo-common';
 import JSZip from '@progress/jszip-esm';
@@ -1064,13 +1064,18 @@ const keys = {
     PAGEDOWN: 34,
     F2: 113,
     F10: 121,
+    F11: 122,
     F12: 123,
     NUMPAD_PLUS: 107,
     NUMPAD_MINUS: 109,
     NUMPAD_DOT: 110,
     B: 66,
     I: 73,
-    U: 85
+    U: 85,
+    N: 78,
+    H: 72,
+    A: 65,
+    R: 82
 };
 
 /* eslint-disable no-nested-ternary */
@@ -1165,66 +1170,36 @@ function withExit(f, obj) {
     }
 }
 
-const wrapExpression = function(members, paramName) {
-    let result = paramName || "d",
-        index,
-        idx,
-        length,
-        member,
-        count = 1;
-
-    for (idx = 0, length = members.length; idx < length; idx++) {
-        member = members[idx];
-        if (member !== "") {
-            index = member.indexOf("[");
-
-            if (index !== 0) {
-                if (index === -1) {
-                    member = "." + member;
-                } else {
-                    count++;
-                    member = "." + member.substring(0, index) + " || {})" + member.substring(index);
-                }
-            }
-
-            count++;
-            result += member + ((idx < length - 1) ? " || {})" : ")");
-        }
-    }
-    return new Array(count).join("(") + result;
-};
-
 const getterCache = {};
 
-function expr(expression, safe, paramName) {
-    expression = expression || "";
-
-    if (typeof safe == 'string') {
-        paramName = safe;
-        safe = false;
-    }
+getterCache["undefined"] = (obj) => obj;
 
-    paramName = paramName || "d";
+const FIELD_REGEX = /\[(?:(\d+)|['"](.*?)['"])\]|((?:(?!\[.*?\]|\.).)+)/g;
+function getter(field, safe) {
+    const key = field + safe;
 
-    if (expression && expression.charAt(0) !== "[") {
-        expression = "." + expression;
+    if (getterCache[key]) {
+        return getterCache[key];
     }
 
-    if (safe) {
-        expression = expression.replace(/"([^.]*)\.([^"]*)"/g,'"$1_$DOT$_$2"');
-        expression = expression.replace(/'([^.]*)\.([^']*)'/g,"'$1_$DOT$_$2'");
-        expression = wrapExpression(expression.split("."), paramName);
-        expression = expression.replace(/_\$DOT\$_/g, ".");
-    } else {
-        expression = paramName + expression;
-    }
+    const fields = [];
+    field.replace(FIELD_REGEX, (_, index, indexAccessor, field) => {
+        fields.push(isPresent(index) ? index : indexAccessor || field);
+        return undefined;
+    });
 
-    return expression;
-}
+    getterCache[key] = (obj) => {
+        let result = obj;
+        for (let idx = 0; idx < fields.length; idx++) {
+            result = result[fields[idx]];
+            if (!isPresent(result) && safe) {
+                return result;
+            }
+        }
+
+        return result;
+    };
 
-function getter(expression, safe) {
-    let key = expression + safe;
-    getterCache[key] = getterCache[key] || new Function("d", "return " + expr(expression, safe));
     return getterCache[key];
 }
 
@@ -1239,15 +1214,10 @@ function deepExtend(destination) {
     return destination;
 }
 
-function isFunction(fn) {
-    return typeof fn === "function";
-}
-
 function deepExtendOne(destination, source) {
     let property,
         propValue,
         propType,
-        propInit,
         destProp;
 
     for (property in source) {
@@ -1258,29 +1228,18 @@ function deepExtendOne(destination, source) {
         propValue = source[property];
         propType = typeof propValue;
 
-        if (propType === 'object' && propValue !== null) {
-            propInit = propValue.constructor;
-        } else {
-            propInit = null;
-        }
-
-        if (propInit &&
-            propInit !== Array && propInit !== RegExp &&
-            (!isFunction(window.ArrayBuffer) || propInit !== ArrayBuffer) && !(propValue instanceof HTMLElement)) {
-
-            if (propValue instanceof Date) {
-                destination[property] = new Date(propValue.getTime());
-            } else if (isFunction(propValue.clone)) {
-                destination[property] = propValue.clone();
-            } else {
-                destProp = destination[property];
-                if (typeof (destProp) === 'object') {
-                    destination[property] = destProp || {};
-                } else {
-                    destination[property] = {};
-                }
-                deepExtendOne(destination[property], propValue);
+        if (propValue instanceof Date) {
+            destination[property] = new Date(propValue.getTime());
+        } else if (isFunction(propValue?.clone)) {
+            destination[property] = propValue.clone();
+        } else if (propType === 'object' && propValue !== null && isPlainObject(propValue)) {
+            // Check if the property is a plain object before attempting to merge deeply
+            destProp = destination[property];
+            if (typeof destProp !== 'object' || destProp === null) {
+                destination[property] = {};
             }
+
+            deepExtendOne(destination[property], propValue);
         } else if (propType !== 'undefined') {
             destination[property] = propValue;
         }
@@ -1316,7 +1275,12 @@ const scrollbar = function(refresh) {
     let div = document.createElement("div"),
         result;
 
-    div.style.cssText = "overflow:scroll;overflow-x:hidden;zoom:1;clear:both;display:block";
+    div.style.overflow = "scroll";
+    div.style.overflowX = "hidden";
+    div.style.zoom = "1";
+    div.style.clear = "both";
+    div.style.display = "block";
+
     div.innerHTML = "&nbsp;";
     document.body.appendChild(div);
 
@@ -1391,6 +1355,21 @@ const _activeElement$1 = function() {
     }
 };
 
+const isPresent = (value) => value !== null && value !== undefined;
+const isBlank = (value) => !isPresent(value);
+const isDate = (value) => value && value.getTime;
+const isString = (value) => typeof value === "string";
+const isNumeric = (value) => !isNaN(value - parseFloat(value));
+const isFunction = (fn) => typeof fn === "function";
+const isPlainObject = function(obj) {
+    if (!obj || toString.call(obj) !== "[object Object]") {
+        return false;
+    }
+
+    const proto = Object.getPrototypeOf(obj);
+    return proto === null || proto.constructor === Object;
+};
+
 class CalcError {
 
     constructor(code) {
@@ -1428,6 +1407,9 @@ function createKendoObj(calc, CalcError, Ref, CellRef, RangeRef) {
 }
 
 /* eslint-disable max-params */
+/* eslint-disable complexity */
+/* eslint-disable no-unused-vars */
+
 
 let calc = {
     runtime: {
@@ -2963,7 +2945,7 @@ function Element(nodeName, attr, children) {
 }
 Element.prototype = new Node();
 Element.prototype.appendTo = function(parent) {
-    let node = document.createElement(this.nodeName);
+    let node = typeof(this.nodeName) === "string" ? document.createElement(this.nodeName) : this.nodeName;
     let children = this.children;
     for (let index = 0; index < children.length; index++) {
         children[index].render(node, NULL_NODE);
@@ -3184,6 +3166,7 @@ const dom = {
 
 //--------------------------------------------------- custom number format.
 
+
 let RX_COLORS = /^\[(black|green|white|blue|magenta|yellow|cyan|red)\]/i;
 let RX_CONDITION = /^\[(<=|>=|<>|<|>|=)(-?[0-9.]+)\]/;
 
@@ -4149,6 +4132,28 @@ const formatting = {
 };
 
 /* eslint-disable no-nested-ternary */
+/* eslint-disable space-infix-ops */
+/* eslint-disable indent */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable max-params */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable key-spacing */
+/* eslint-disable default-case */
+/* eslint-disable camelcase */
+/* eslint-disable brace-style */
+/* eslint-disable no-else-return */
+/* eslint-disable no-constant-condition */
+/* eslint-disable no-param-reassign */
+/* eslint-disable space-before-blocks */
+/* eslint-disable no-unused-labels */
+
 
 const kendo = createKendoObj(calc, CalcError, Ref, CellRef, RangeRef);
 calc.kendo = kendo; // XXX
@@ -5954,6 +5959,12 @@ class EventListener {
 }
 
 /* eslint-disable default-case */
+/* eslint-disable no-else-return */
+/* eslint-disable key-spacing */
+/* eslint-disable eqeqeq */
+/* eslint-disable brace-style */
+/* eslint-disable consistent-return */
+
 
 let alphaNumRegExp = /:alphanum$/;
 
@@ -6579,6 +6590,7 @@ class Controller {
         this._workbook.trigger("contextmenu", {
             objectRef: object.ref,
             targetType: object.type,
+            isComposite,
             showUnhide,
             showUnmerge,
             originalEvent: event
@@ -7093,7 +7105,7 @@ class Controller {
             this.clipboardElement.focus();
             this.navigator.navigateInSelection(ENTRY_ACTIONS[action]);
         }
-        
+
         if (action === 'tab') {
             e.preventDefault();
         }
@@ -7796,6 +7808,9 @@ class SparseRangeList extends RangeList {
 }
 
 /* eslint-disable default-case */
+/* eslint-disable camelcase */
+/* eslint-disable no-param-reassign */
+
 
 class Property {
     constructor(list) {
@@ -8119,6 +8134,10 @@ const ALL_PROPERTIES = propertyBagSpec.reduce(function(a, spec) {
 }, [ "borderTop", "borderRight", "borderBottom", "borderLeft" ]);
 
 /* eslint-disable no-param-reassign */
+/* eslint-disable no-useless-call */
+/* eslint-disable camelcase */
+/* eslint-disable default-case */
+
 
 let TRANSPOSE_FORMAT = "_matrix({0})";
 let DATE_FORMAT = 'DATEVALUE("{0}")';
@@ -8450,6 +8469,28 @@ validationExport.validationComparers = {
 validationExport.Validation = Validation;
 
 /* eslint-disable no-nested-ternary */
+/* eslint-disable curly */
+/* eslint-disable space-infix-ops */
+/* eslint-disable indent */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable max-params */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable key-spacing */
+/* eslint-disable default-case */
+/* eslint-disable camelcase */
+/* eslint-disable brace-style */
+/* eslint-disable no-else-return */
+/* eslint-disable no-constant-condition */
+/* eslint-disable no-param-reassign */
+/* eslint-disable space-before-blocks */
+
 const { measureText } = drawing.util;
 
 let PROPERTIES = [
@@ -9406,13 +9447,18 @@ function looksLikeANumber(str) {
 
 function getTextHeight(text, width, fontFamily, fontSize, wrap) {
     const measureBox = document.createElement("div");
-    measureBox.setAttribute(
-        "style",
-        "position: absolute !important; top: -4000px !important; height: auto !important;" +
-            "padding: 1px 3px !important; box-sizing: border-box; margin: 0 !important; border: 1px solid black !important;" +
-            "line-height: normal !important; visibility: hidden !important;" +
-            "white-space: pre-wrap;"
-    );
+
+    measureBox.style.setProperty('position', 'absolute', 'important');
+    measureBox.style.setProperty('top', '-4000px', 'important');
+    measureBox.style.setProperty('height', 'auto', 'important');
+    measureBox.style.setProperty('padding', '1px 3px', 'important');
+    measureBox.style.setProperty('box-sizing', 'border-box', 'important');
+    measureBox.style.setProperty('margin', '0', 'important');
+    measureBox.style.setProperty('border', '1px solid black', 'important');
+    measureBox.style.setProperty('line-height', 'normal', 'important');
+    measureBox.style.setProperty('visibility', 'hidden', 'important');
+    measureBox.style.setProperty('white-space', 'pre-wrap');
+
     let styles = {
         "baselineMarkerSize" : 0,
         "width" : (wrap === true) ? width + "px" : "auto",
@@ -10504,6 +10550,7 @@ class PaneAxis {
 }
 
 /* eslint-disable no-param-reassign */
+/* eslint-disable camelcase */
 
 class Rectangle {
     constructor(left, top, width, height) {
@@ -10891,6 +10938,9 @@ Sorter.descendingComparer = function(a, b) {
 };
 
 /* eslint-disable no-constant-condition */
+/* eslint-disable key-spacing */
+/* eslint-disable no-param-reassign */
+
 
 class AxisManager {
     constructor(sheet) {
@@ -11201,6 +11251,21 @@ class AutoFillCalculator {
 }
 
 /* eslint-disable max-params */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable brace-style */
+/* eslint-disable key-spacing */
+/* eslint-disable no-else-return */
+/* eslint-disable default-case */
+/* eslint-disable no-param-reassign */
+
 
 class EdgeNavigator {
     constructor(field, axis, rangeGetter, union) {
@@ -11875,16 +11940,41 @@ function makeWordMovement(sheet, pivot, isCol) {
 }
 
 /* eslint-disable max-params */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable brace-style */
+/* eslint-disable key-spacing */
+/* eslint-disable no-else-return */
+/* eslint-disable default-case */
+/* eslint-disable no-param-reassign */
+
 
 function numberToDate(val) {
     return val == null ? null : calc.runtime.serialToDate(val);
 }
 
-var identity = function(o) { return o; };
+function dateToNumber(val) {
+    return val == null ? null : calc.runtime.dateToSerial(val);
+}
+
+var identity = function (o) { return o; };
 
 class SheetDataSourceBinder {
     constructor(options) {
-        this.options = Object.assign({ columns: [] }, this.options, options);
+        this.options = Object.assign({ columns: [] }, this.options,
+            // skip undefined properties in options
+            Object.keys(options).reduce((acc, key) => {
+                if (options[key] !== undefined) acc[key] = options[key];
+                return acc;
+            }, {})
+        );
 
         this.columns = this._normalizeColumns(this.options.columns);
 
@@ -11928,9 +12018,9 @@ class SheetDataSourceBinder {
     }
 
     _header() {
-        this.sheet.batch(function() {
-            this.columns.forEach(function(column, index) {
-                this.sheet.range(0,index).value(column.title);
+        this.sheet.batch(function () {
+            this.columns.forEach(function (column, index) {
+                this.sheet.range(0, index).value(column.title);
             }.bind(this));
         }.bind(this));
     }
@@ -11948,7 +12038,7 @@ class SheetDataSourceBinder {
             var values = [];
             var sheet = this.sheet;
             var fields, getters, normalizedRef, i, rangeRef, normalizedRefs;
-            var setValues = function(ref) {
+            var setValues = function (ref) {
                 ref = ref.toRangeRef();
                 var record;
                 var valueIndex = 0;
@@ -11977,7 +12067,7 @@ class SheetDataSourceBinder {
                 columns = Object.keys(data[0].toJSON());
             }
 
-            getters = columns.map(function(column) {
+            getters = columns.map(function (column) {
                 var field = column.field;
                 if (field && fields && fields[field] && fields[field].type === "date") {
                     return numberToDate;
@@ -11994,7 +12084,7 @@ class SheetDataSourceBinder {
 
             normalizedRefs = normalizedRef.refs;
 
-            normalizedRefs.forEach(function(ref) {
+            normalizedRefs.forEach(function (ref) {
                 values.push(sheet.range(ref).values());
             });
 
@@ -12010,7 +12100,7 @@ class SheetDataSourceBinder {
     }
 
     _normalizeColumns(columns) {
-        return columns.map(function(column) {
+        return columns.map(function (column) {
             var field = column.field || column;
             return {
                 field: field,
@@ -12022,23 +12112,23 @@ class SheetDataSourceBinder {
     _dataSource() {
         var options = this.options;
         var dataSource = options.dataSource;
-        this.dataSource = { data: dataSource };
-        // dataSource = Array.isArray(dataSource) ? { data: dataSource } : dataSource;
-
-        // if (this.dataSource && this._changeHandler) {
-        //     this.dataSource.unbind("change", this._changeHandler)
-        //         .unbind("progress", this._progressHandler)
-        //         .unbind("error", this._errorHandler);
-        // } else {
-        //     this._changeHandler = this._change.bind(this);
-        //     this._progressHandler = this._requestStart.bind(this);
-        //     this._errorHandler = this._error.bind(this);
-        // }
 
-        // this.dataSource = kendo.data.DataSource.create(dataSource)
-        //     .bind("change", this._changeHandler)
-        //     .bind("progress", this._progressHandler)
-        //     .bind("error", this._errorHandler);
+        dataSource = Array.isArray(dataSource) ? { data: dataSource } : dataSource;
+
+        if (this.dataSource && this._changeHandler) {
+            this.dataSource.unbind("change", this._changeHandler)
+                .unbind("progress", this._progressHandler)
+                .unbind("error", this._errorHandler);
+        } else {
+            this._changeHandler = this._change.bind(this);
+            this._progressHandler = this._requestStart.bind(this);
+            this._errorHandler = this._error.bind(this);
+        }
+
+        this.dataSource = this.options.sheet.createSheetDataSource?.(dataSource)
+            .bind("change", this._changeHandler)
+            .bind("progress", this._progressHandler)
+            .bind("error", this._errorHandler);
     }
 
     _error() {
@@ -12072,11 +12162,11 @@ class SheetDataSourceBinder {
             this._header();
         }
 
-        var getters = columns.map(function(column) {
+        var getters = columns.map(function (column) {
             return getter(column.field);
         });
 
-        this.sheet.batch(function() {
+        this.sheet.batch(function () {
             var length = Math.max(data.length, this._boundRowsCount, this.sheet._grid.rowCount - 1);
 
             for (var idx = 0; idx < length; idx++) {
@@ -12126,214 +12216,154 @@ const kendoDate = (function() {
 })();
 
 /* eslint-disable no-var */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-loop-func */
 
-const dateRegExp = /^\/Date\((.*?)\)\/$/;
 
-var operators = (function() {
+const logic = {
+    or: {
+        concat: (acc, fn) => (a) => acc(a) || fn(a),
+        identity: () => false,
+    },
+    and: {
+        concat: (acc, fn) => (a) => acc(a) && fn(a),
+        identity: () => true,
+    },
+};
+
+const operatorsMap = {
+    contains: (a, b) => (a || "").indexOf(b) >= 0,
+    doesnotcontain: (a, b) => (a || "").indexOf(b) === -1,
+    doesnotendwith: (a, b) =>
+        (a || "").indexOf(b, (a || "").length - (b || "").length) < 0,
+    doesnotstartwith: (a, b) => (a || "").lastIndexOf(b, 0) === -1,
+    endswith: (a, b) =>
+        (a || "").indexOf(b, (a || "").length - (b || "").length) >= 0,
+    eq: (a, b) => a === b,
+    gt: (a, b) => a > b,
+    gte: (a, b) => a >= b,
+    isempty: (a) => a === "",
+    isnotempty: (a) => a !== "",
+    isnotnull: (a) => isPresent(a),
+    isnull: (a) => isBlank(a),
+    lt: (a, b) => a < b,
+    lte: (a, b) => a <= b,
+    neq: (a, b) => a != b, // tslint:disable-line:triple-equals
+    startswith: (a, b) => (a || "").lastIndexOf(b, 0) === 0,
+};
+
+const dateRegExp = /^\/Date\((.*?)\)\/$/;
 
-    function quote(str) {
-        if (typeof str == "string") {
-            str = str.replace(/[\r\n]+/g, "");
+const convertValue = (value, ignoreCase, accentFoldingFiltering) => {
+    if (value != null && isString(value)) {
+        const date = dateRegExp.exec(value);
+        if (date) {
+            return new Date(+date[1]).getTime();
+        } else if (ignoreCase) {
+            return accentFoldingFiltering
+                ? value.toLocaleLowerCase(accentFoldingFiltering)
+                : value.toLowerCase();
         }
-        return JSON.stringify(str);
+    } else if (value != null && isDate(value)) {
+        return value.getTime();
     }
+    return value;
+};
 
-    function textOp(impl) {
-        return function(a, b, ignore, accentFoldingFiltering) {
-            b += "";
-            if (ignore) {
-                a = "(" + a + " + '').toString()" + ((accentFoldingFiltering) ? ".toLocaleLowerCase('" + accentFoldingFiltering + "')" : ".toLowerCase()");
-                b = ((accentFoldingFiltering) ? b.toLocaleLowerCase(accentFoldingFiltering) : b.toLowerCase());
-            }
-            return impl(a, quote(b), ignore);
-        };
-    }
+const transformFilter = ({
+    field,
+    ignoreCase,
+    value,
+    operator,
+    accentFoldingFiltering,
+}) => {
+    field = !isPresent(field) ? (a) => a : field;
+
+    ignoreCase = isPresent(ignoreCase) ? ignoreCase : true;
+
+    const itemProp = typedGetter(
+        isFunction(field) ? field : getter(field, true),
+        value,
+        ignoreCase,
+        accentFoldingFiltering
+    );
 
-    function operator(op, a, b, ignore, accentFoldingFiltering) {
-        if (b != null) {
-            if (typeof b === 'string') {
-                var date = dateRegExp.exec(b);
-                if (date) {
-                    b = new Date(+date[1]);
-                } else if (ignore) {
-                    b = quote(((accentFoldingFiltering) ? b.toLocaleLowerCase(accentFoldingFiltering) : b.toLowerCase()));
-                    a = "((" + a + " || '')+'')" + ((accentFoldingFiltering) ? ".toLocaleLowerCase('" + accentFoldingFiltering + "')" : ".toLowerCase()");
-                } else {
-                    b = quote(b);
-                }
-            }
+    value = convertValue(value, ignoreCase, accentFoldingFiltering);
 
-            if (b.getTime) {
-                //b looks like a Date
-                a = "(" + a + "&&" + a + ".getTime?" + a + ".getTime():" + a + ")";
-                b = b.getTime();
-            }
-        }
+    const op = isFunction(operator) ? operator : operatorsMap[operator];
 
-        return a + " " + op + " " + b;
-    }
+    return (a) => op(itemProp(a), value, ignoreCase);
+};
 
-    function getMatchRegexp(pattern) {
-        // take a pattern, as supported by Excel match filter, and
-        // convert it to the equivalent JS regular expression.
-        // Excel patterns support:
-        //
-        //   * - match any sequence of characters
-        //   ? - match a single character
-        //
-        // to match a literal * or ?, they must be prefixed by a tilde (~)
-        var rx = "/^";
-        for (var esc = false, i = 0; i < pattern.length; ++i) {
-            var ch = pattern.charAt(i);
-            if (esc) {
-                rx += "\\" + ch;
-            } else if (ch === "~") {
-                esc = true;
-                continue;
-            } else if (ch === "*") {
-                rx += ".*";
-            } else if (ch === "?") {
-                rx += ".";
-            } else if (".+^$()[]{}|\\/\n\r\u2028\u2029\xA0".indexOf(ch) >= 0) {
-                rx += "\\" + ch;
-            } else {
-                rx += ch;
-            }
-            esc = false;
-        }
-        return rx + "$/";
+const typedGetter = (prop, value, ignoreCase, accentFoldingFiltering) => {
+    if (!isPresent(value)) {
+        return prop;
     }
 
-    return {
-        quote: function(value) {
-            if (value && value.getTime) {
-                return "new Date(" + value.getTime() + ")";
-            }
-            return quote(value);
-        },
-        eq: function(a, b, ignore, accentFoldingFiltering) {
-            return operator("==", a, b, ignore, accentFoldingFiltering);
-        },
-        neq: function(a, b, ignore, accentFoldingFiltering) {
-            return operator("!=", a, b, ignore, accentFoldingFiltering);
-        },
-        gt: function(a, b, ignore) {
-            return operator(">", a, b, ignore);
-        },
-        gte: function(a, b, ignore) {
-            return operator(">=", a, b, ignore);
-        },
-        lt: function(a, b, ignore) {
-            return operator("<", a, b, ignore);
-        },
-        lte: function(a, b, ignore) {
-            return operator("<=", a, b, ignore);
-        },
-        startswith: textOp(function(a, b) {
-            return a + ".lastIndexOf(" + b + ", 0) == 0";
-        }),
-        doesnotstartwith: textOp(function(a, b) {
-            return a + ".lastIndexOf(" + b + ", 0) == -1";
-        }),
-        endswith: textOp(function(a, b) {
-            var n = b ? b.length - 2 : 0;
-            return a + ".indexOf(" + b + ", " + a + ".length - " + n + ") >= 0";
-        }),
-        doesnotendwith: textOp(function(a, b) {
-            var n = b ? b.length - 2 : 0;
-            return a + ".indexOf(" + b + ", " + a + ".length - " + n + ") < 0";
-        }),
-        contains: textOp(function(a, b) {
-            return a + ".indexOf(" + b + ") >= 0";
-        }),
-        doesnotcontain: textOp(function(a, b) {
-            return a + ".indexOf(" + b + ") == -1";
-        }),
-        matches: textOp(function(a, b) {
-            b = b.substring(1, b.length - 1);
-            return getMatchRegexp(b) + ".test(" + a + ")";
-        }),
-        doesnotmatch: textOp(function(a, b) {
-            b = b.substring(1, b.length - 1);
-            return "!" + getMatchRegexp(b) + ".test(" + a + ")";
-        }),
-        isempty: function(a) {
-            return a + " === ''";
-        },
-        isnotempty: function(a) {
-            return a + " !== ''";
-        },
-        isnull: function(a) {
-            return "(" + a + " == null)";
-        },
-        isnotnull: function(a) {
-            return "(" + a + " != null)";
-        },
-        isnullorempty: function(a) {
-            return "(" + a + " === null) || (" + a + " === '')";
-        },
-        isnotnullorempty: function(a) {
-            return "(" + a + " !== null) && (" + a + " !== '')";
-        }
-    };
-})();
-
-const filterExpr = function(expression) {
-    var expressions = [],
-        logic = { and: " && ", or: " || " },
-        idx,
-        length,
-        filter,
-        expr$1,
-        fieldFunctions = [],
-        operatorFunctions = [],
-        field,
-        operator,
-        filters = expression.filters;
-
-    for (idx = 0, length = filters.length; idx < length; idx++) {
-        filter = filters[idx];
-        field = filter.field;
-        operator = filter.operator;
-
-        if (filter.filters) {
-            expr$1 = filterExpr(filter);
-            //Nested function fields or operators - update their index e.g. __o[0] -> __o[1]
-            filter = expr$1.expression
-            .replace(/__o\[(\d+)\]/g, function(match, index) {
-                index = +index;
-                return "__o[" + (operatorFunctions.length + index) + "]";
-            })
-            .replace(/__f\[(\d+)\]/g, function(match, index) {
-                index = +index;
-                return "__f[" + (fieldFunctions.length + index) + "]";
-            });
+    let acc = prop;
 
-            operatorFunctions.push.apply(operatorFunctions, expr$1.operators);
-            fieldFunctions.push.apply(fieldFunctions, expr$1.fields);
+    if (isString(value)) {
+        const date = dateRegExp.exec(value);
+        if (date) {
+            value = new Date(+date[1]);
         } else {
-            if (typeof field === 'function') {
-                expr$1 = "__f[" + fieldFunctions.length + "](d)";
-                fieldFunctions.push(field);
-            } else {
-                expr$1 = expr(field);
-            }
-
-            if (typeof operator === 'function') {
-                filter = "__o[" + operatorFunctions.length + "](" + expr$1 + ", " + operators.quote(filter.value) + ")";
-                operatorFunctions.push(operator);
-            } else {
-                filter = operators[(operator || "eq").toLowerCase()](expr$1, filter.value, filter.ignoreCase !== undefined ? filter.ignoreCase : true, expression.accentFoldingFiltering);
-            }
+            acc = (a) => {
+                const x = prop(a);
+                if (typeof x === "string" && ignoreCase) {
+                    return accentFoldingFiltering
+                        ? x.toLocaleLowerCase(accentFoldingFiltering)
+                        : x.toLowerCase();
+                } else {
+                    return isNumeric(x) ? x + "" : x;
+                }
+            };
         }
+    }
 
-        expressions.push(filter);
+    if (isDate(value)) {
+        return (a) => {
+            const x = acc(a);
+            return isDate(x) ? x.getTime() : x;
+        };
     }
+    return acc;
+};
 
-    return { expression: "(" + expressions.join(logic[expression.logic]) + ")", fields: fieldFunctions, operators: operatorFunctions };
+const transformCompositeFilter = function (filter) {
+    const accentFoldingFiltering = filter.accentFoldingFiltering;
+    const combiner = logic[filter.logic || "and"];
+
+    return filter.filters
+        .filter(isPresent)
+        .map((x) => {
+            const extendedFilter = isPresent(accentFoldingFiltering)
+                ? deepExtend({}, x, { accentFoldingFiltering })
+                : x;
+
+            return isPresent(x.filters)
+                ? transformCompositeFilter(extendedFilter)
+                : transformFilter(extendedFilter);
+        })
+        .reduce(combiner.concat, combiner.identity);
 };
 
 /* eslint-disable max-params */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable brace-style */
+/* eslint-disable key-spacing */
+/* eslint-disable no-else-return */
+/* eslint-disable default-case */
+/* eslint-disable no-param-reassign */
+
 
 let filtersObj = {};
 const dateToSerial$1 = calc.runtime.dateToSerial;
@@ -12445,13 +12475,11 @@ class CustomFilter extends Filter {
 
         this._criteria = options.criteria;
 
-        var expression = filterExpr({
+        this._matches = transformCompositeFilter({
             logic: this._logic,
             filters: this._criteria,
-            accentFoldingFiltering: culture().name
-        }).expression;
-
-        this._matches = new Function("d", "return " + expression);
+            accentFoldingFiltering: culture().name,
+        });
     }
     matches(value) {
         if (value === null) {
@@ -12786,6 +12814,21 @@ function sameWeek(a, b) {
 }
 
 /* eslint-disable max-params */
+/* eslint-disable no-empty */
+/* eslint-disable no-loop-func */
+/* eslint-disable consistent-return */
+/* eslint-disable block-scoped-var */
+/* eslint-disable no-redeclare */
+/* eslint-disable no-var */
+/* eslint-disable eqeqeq */
+/* eslint-disable complexity */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable brace-style */
+/* eslint-disable key-spacing */
+/* eslint-disable no-else-return */
+/* eslint-disable default-case */
+/* eslint-disable no-param-reassign */
+
 
 // This is a “dynamic variable” (see Greenspun's 10th rule).  It's
 // bound to an array via sheet._saveModifiedFormulas (which see)
@@ -12927,6 +12970,12 @@ class Selection {
     }
 }
 
+let EDITORS = {};
+
+function registerEditor(name, editor) {
+    EDITORS[name] = editor;
+}
+
 class Sheet extends Observable {
     constructor() {
         super();
@@ -12948,10 +12997,35 @@ class Sheet extends Observable {
             "dataBound",
             "progress"
         ];
+
+        this.createSheetDataSource = Array.from(arguments).pop();
+
         this._reinit.apply(this, arguments);
     }
 
-    activeCellCustomEditor() {}
+    activeCellCustomEditor() {
+        let cell = this.activeCell().first();
+
+        if (this.range(cell).enable()) {
+            let val = this.validation(cell);
+            let key = this._properties.get("editor", this._grid.cellRefIndex(cell));
+            let editor;
+
+            if (key != null) {
+                editor = EDITORS[key];
+            }
+            else if (val && val.showButton) {
+                key = "_validation_" + val.dataType;
+                editor = EDITORS[key];
+            }
+
+            if (typeof editor == "function") {
+                editor = EDITORS[key] = editor();
+            }
+
+            return editor;
+        }
+    }
 
     _reinit(rowCount, columnCount, rowHeight, columnWidth, headerHeight, headerWidth, defaultCellStyle) {
         defaultCellStyle = defaultCellStyle || {};
@@ -13153,7 +13227,8 @@ class Sheet extends Observable {
         this.dataSourceBinder = new SheetDataSourceBinder({
             dataSource: dataSource,
             sheet: this,
-            columns: columns
+            columns: columns,
+            createSheetDataSource: this.createSheetDataSource
         });
 
         this.dataSource = this.dataSourceBinder.dataSource;
@@ -14958,6 +15033,13 @@ function getPaperOptions(getOption) {
 }
 
 /* eslint-disable no-nested-ternary */
+/* eslint-disable default-case */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable no-else-return */
+/* eslint-disable key-spacing */
+/* eslint-disable eqeqeq */
+/* eslint-disable no-param-reassign */
+
 
 let GUIDELINE_WIDTH = 0.8;
 
@@ -15599,7 +15681,7 @@ function drawText(text, color, cell, group) {
     }
     if (vtrans < 0) { vtrans = 0; }
 
-    let textGroup = drawDOM.drawText(CONT);
+    let textGroup = drawText$1(CONT);
     textGroup.transform(geometry.Matrix.translate(cell.left, cell.top + vtrans));
     group.append(textGroup);
 }
@@ -16002,7 +16084,7 @@ const viewClassNames = {
     horizontalResize: "k-horizontal-resize",
     verticalResize: "k-vertical-resize",
     icon: "k-icon",
-    iconFilterDefault: "k-i-arrow-60-down",
+    iconFilterDefault: "k-i-caret-alt-down",
     sheetsBar: "k-spreadsheet-sheets-bar",
     sheetsBarActive: "k-spreadsheet-sheets-bar-active",
     sheetsBarInactive: "k-spreadsheet-sheets-bar-inactive",
@@ -16053,6 +16135,7 @@ const paneClassNames = {
 
 /* eslint-disable complexity */
 
+
 function cellBorder(value) {
     return (value.size || 1) + "px solid " + (value.color || "#000");
 }
@@ -16264,9 +16347,10 @@ function drawCell(collection, cell, cls, showGrid) {
 }
 
 class Pane {
-    constructor(sheet, grid) {
+    constructor(sheet, grid, getIconHTMLString) {
         this._sheet = sheet;
         this._grid = grid;
+        this.getIconHTMLString = getIconHTMLString;
     }
 
     refresh(width, height) {
@@ -16622,18 +16706,23 @@ class Pane {
         );
     }
 
+    icon(className) {
+        if (typeof this.getIconHTMLString === "function") {
+            return dom.element(this.getIconHTMLString(className));
+        }
+
+        return dom.element("span", {
+            className: viewClassNames.icon + " " + className
+        });
+    }
+
     renderFilterHeaders() {
+        let pane = this;
         let sheet = this._sheet;
         let children = [];
         let classNames = viewClassNames;
         let filter = sheet.filter();
 
-        function icon(className) {
-            return dom.element("span", {
-                className: classNames.icon + " " + className
-            });
-        }
-
         function filterButton(classNames, position, index) {
             let style = {
                 left: position.left + "px",
@@ -16651,7 +16740,7 @@ class Pane {
             let button = dom.element(
                 "span",
                 { className: classes, style: style },
-                [ icon(classNames.iconFilterDefault) ]
+                [ pane.icon(classNames.iconFilterDefault) ]
             );
 
             return button;
@@ -16808,11 +16897,11 @@ class Pane {
                         height : cell.height + "px"
                     }
                 });
+
                 if (ed.icon) {
-                    btn.children.push(dom.element("span", {
-                        className: "k-icon " + ed.icon
-                    }));
+                    btn.children.push(self.icon(ed.icon));
                 }
+
                 collection.push(btn);
             });
         }
@@ -16887,6 +16976,11 @@ function drawingResizeHandles(container) {
 }
 
 /* eslint-disable no-unused-vars */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-else-return */
+/* eslint-disable no-multi-spaces */
+/* eslint-disable no-nested-ternary */
+
 
 let styles = [
     "font-family",
@@ -17027,24 +17121,9 @@ class FormulaInput extends Widget {
             end = begin;
         }
         if (begin && end) {
-            let range = document.createRange();
-            range.setStart(begin.node, begin.pos);
-            range.setEnd(end.node, end.pos);
-            let sel = window.getSelection();
-            let currentRange = sel.getRangeAt(0);
-            if (differ(range, currentRange))  {
-                sel.removeAllRanges();
-                sel.addRange(range);
-            }
-        }
-        function differ(a, b) {
-            return (
-                a.startOffset !== b.startOffset ||
-                a.endOffset !== b.endOffset ||
-                a.startContainer !== b.endContainer ||
-                a.endContainer !== b.endContainer
-            );
+            this._setRange(begin, end);
         }
+
         function lookup(node, pos) {
             try {
                 (function loop(node) {
@@ -17082,6 +17161,27 @@ class FormulaInput extends Widget {
         return this.value().length;
     }
 
+    _setRange(begin, end) {
+        let range = document.createRange();
+        range.setStart(begin.node, begin.pos);
+        range.setEnd(end.node, end.pos);
+        let sel = window.getSelection();
+        let currentRange = sel.getRangeAt(0);
+        if (differ(range, currentRange))  {
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+
+        function differ(a, b) {
+            return (
+                a.startOffset !== b.startOffset ||
+                a.endOffset !== b.endOffset ||
+                a.startContainer !== b.endContainer ||
+                a.endContainer !== b.endContainer
+            );
+        }
+    }
+
     _formulaSource() {
         let result = [];
         let value;
@@ -17212,8 +17312,9 @@ class FormulaInput extends Widget {
                 return true;
             }
             if (key === keys.ENTER || key === keys.TAB) {
-                if (list.data()[list.focus()]) {
-                    this._formulaListChange(list.data()[list.focus()].value);
+                let focusIndex = typeof list.focusIndex === "function" ? list.focusIndex() : list.focus();
+                if (list.data()[focusIndex]) {
+                    this._formulaListChange(list.data()[focusIndex].value);
                 }
 
                 popup.close();
@@ -17741,6 +17842,13 @@ class SheetsBar extends Widget {
 }
 
 /* eslint-disable complexity */
+/* eslint-disable consistent-return */
+/* eslint-disable default-case */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable key-spacing */
+/* eslint-disable no-param-reassign */
+
 
 function selectElementContents(el) {
     let sel = window.getSelection();
@@ -17844,7 +17952,7 @@ function addCell(table, row, cell) {
                 break;
             case "boolean":
                 style.textAlign = "center";
-            break;
+                break;
         }
     }
 
@@ -17935,7 +18043,7 @@ class HtmlTable {
             text = dom.text(text);
         }
 
-        let children = [ text ];
+        let children = [text];
 
         if (validation && !validation.value) {
             children.push(dom.element("span", { className: "k-dirty" }));
@@ -17954,14 +18062,14 @@ class HtmlTable {
     }
 
     toDomTree(x, y, className) {
-        this.trs = this.trs.filter(function(tr) {
+        this.trs = this.trs.filter(function (tr) {
             return tr.visible;
         });
 
         let offset = 0;
-        this.cols = this.cols.filter(function(col, ci) {
+        this.cols = this.cols.filter(function (col, ci) {
             if (!col.visible) {
-                this.trs.forEach(function(tr) {
+                this.trs.forEach(function (tr) {
                     tr.children.splice(ci - offset, 1);
                 });
                 offset++;
@@ -17974,7 +18082,7 @@ class HtmlTable {
             style: { left: x + "px", top: y + "px", height: this._height + "px", width: this._width + "px" },
             className: className,
             role: "presentation"
-        },[
+        }, [
             dom.element("colgroup", null, this.cols),
             dom.element("tbody", null, this.trs)
         ]);
@@ -18029,6 +18137,8 @@ class View extends Observable {
         this.editor = new SheetEditor(this);
 
         this._sheetsbar();
+
+        this.options.createContextMenus?.();
     }
 
     enableClipboard(enable) {
@@ -18072,7 +18182,7 @@ class View extends Observable {
         this.formulaBar = new FormulaBar(formulaBar, { input: this.options.formulaBarInputRef });
 
         // if (this.options.toolbar) {
-        //     this._tabstrip();
+        this._tabstrip();
         // }
     }
 
@@ -18088,10 +18198,12 @@ class View extends Observable {
     _sheetsbar() {
         if (this.options.sheetsbar) {
             this.sheetsbar = new SheetsBar(this.element.querySelector(DOT + View.classNames.sheetsBar), this.options.sheetsbar);
+            this.options.createSheetBar?.(this.options.openDialogCallback);
         }
     }
 
     _tabstrip() {
+        this.tabstrip = this.options.createTabStrip?.();
         // let messages = this.options.messages.tabs;
         // let options = $.extend(true, { home: true, insert: true, data: true }, this.options.toolbar);
         // let tabs = [];
@@ -18150,7 +18262,7 @@ class View extends Observable {
             x += this.scroller.scrollLeft;
         }
 
-        col = this._sheet._grid._columns.locate(0, col, function(w) {
+        col = this._sheet._grid._columns.locate(0, col, function (w) {
             return Math.abs(x - w) <= RESIZE_HANDLE_WIDTH / 2;
         });
 
@@ -18166,7 +18278,7 @@ class View extends Observable {
             y += this.scroller.scrollTop;
         }
 
-        row = this._sheet._grid._rows.locate(0, row, function(h) {
+        row = this._sheet._grid._rows.locate(0, row, function (h) {
             return Math.abs(y - h) <= RESIZE_HANDLE_WIDTH / 2;
         });
 
@@ -18182,8 +18294,8 @@ class View extends Observable {
         x -= self._sheet._grid._headerWidth - scrollLeft;
         y -= self._sheet._grid._headerHeight - scrollTop;
 
-        return withExit(function(exit) {
-            self._sheet.forEachFilterHeader(ref, function(ref) {
+        return withExit(function (exit) {
+            self._sheet.forEachFilterHeader(ref, function (ref) {
                 let rect = self._rectangle(pane, ref);
                 if (pane.filterIconRect(rect).intersects(x, y)) {
                     exit(true);
@@ -18333,7 +18445,7 @@ class View extends Observable {
     }
 
     containingPane(cell) {
-        return this.panes.filter(function(pane) {
+        return this.panes.filter(function (pane) {
             if (pane._grid.contains(cell)) {
                 return true;
             }
@@ -18358,7 +18470,7 @@ class View extends Observable {
         //     this.tabstrip.refreshTools(sheet.range(sheet.activeCell()));
         // }
 
-        this.trigger('update', { reason, range: sheet.range(sheet.activeCell()) });
+        this.trigger('update', { reason, range: sheet.range(sheet.activeCell()), sheet });
 
         // if (reason.sheetSelection && this.sheetsbar) {
         //    this.sheetsbar.renderSheets(this._workbook.sheets(), this._workbook.sheetIndex(this._sheet));
@@ -18375,7 +18487,7 @@ class View extends Observable {
             let frozenRows = sheet.frozenRows();
 
             // main or bottom or right pane
-            this.panes = [ this._pane(frozenRows, frozenColumns) ];
+            this.panes = [this._pane(frozenRows, frozenColumns)];
 
             // left pane
             if (frozenColumns > 0) {
@@ -18402,19 +18514,18 @@ class View extends Observable {
         }
     }
 
-    createFilterMenu() { // createFilterMenu(column) {
-        // this._destroyFilterMenu();
+    createFilterMenu(column) {
+        this._destroyFilterMenu();
 
-        // let sheet = this._sheet;
-        // let ref = sheet.filter().ref;
-        // let range = new Range(ref, sheet);
-        // let element = $("<div />").appendTo(this.element);
-        // let options = { column: column, range: range };
-        // let filterMenu = new kendo.spreadsheet.FilterMenu(element, options);
+        let sheet = this._sheet;
+        let ref = sheet.filter().ref;
+        let range = new Range$1(ref, sheet);
 
-        // this._filterMenu = filterMenu;
+        let options = { column: column, range: range };
 
-        // return filterMenu;
+        this._filterMenu = this.options.createFilterMenu(options);
+
+        return this._filterMenu;
     }
 
     selectClipboardContents() {
@@ -18467,11 +18578,11 @@ class View extends Observable {
         let editor = self._sheet.activeCellCustomEditor();
         let range = self._sheet.range(cell);
         editor.edit({
-            range      : range,
-            rect       : self.activeCellRectangle(),
-            view       : this,
-            validation : this._sheet.validation(cell),
-            callback   : function(value, parse) {
+            range: range,
+            rect: self.activeCellRectangle(),
+            view: this,
+            validation: this._sheet.validation(cell),
+            callback: function (value, parse) {
                 self._executeCommand({
                     command: "EditCommand",
                     options: {
@@ -18487,10 +18598,12 @@ class View extends Observable {
 
     openDialog(name, options) {
         let sheet = this._sheet;
-        return sheet.withCultureDecimals(function() {
+        return sheet.withCultureDecimals(function () {
             let ref = sheet.activeCell();
             let range = new Range$1(ref, sheet);
-            this.trigger('message', { ...options, name, ref, range });
+            let args = { ...options, name, ref, range };
+            this.trigger('message', args);
+            return args.dialog;
         }.bind(this));
     }
 
@@ -18502,7 +18615,7 @@ class View extends Observable {
             return;
         }
 
-        let onClose = function() {
+        let onClose = function () {
             currentDialogs.pop();
             // let dlg = e.sender;
             this.selectClipboardContents();
@@ -18548,19 +18661,18 @@ class View extends Observable {
         //                         this.colHeaderContextMenu =
         //                         this.drawingContextMenu = null;
 
-        // if (this.tabstrip) {
-        //     this.tabstrip.destroy();
-        //     this.tabstrip = null;
-        // }
+        if (this.tabstrip) {
+            this.tabstrip.destroy();
+            this.tabstrip = null;
+        }
 
-        // this._destroyFilterMenu();
+        this._destroyFilterMenu();
     }
 
     _destroyFilterMenu() {
         if (this._filterMenu) {
             this._filterMenu.destroy();
             this._filterMenu = undefined;
-            this._filterMenuColumn = undefined;
         }
     }
 
@@ -18580,8 +18692,8 @@ class View extends Observable {
 
         let resizeDirection =
             !sheet.resizingInProgress() ? "none" :
-            sheet.resizeHandlePosition().col === -Infinity ? "column" :
-            "row";
+                sheet.resizeHandlePosition().col === -Infinity ? "column" :
+                    "row";
 
         this.wrapper.classList.toggle(viewClassNames.editContainer, this.editor.isActive());
         this.wrapper.classList.toggle(viewClassNames.horizontalResize, resizeDirection === "row");
@@ -18595,7 +18707,7 @@ class View extends Observable {
             contentWidth: contentWidth,
             contentHeight: contentHeight
         };
-        this.panes.forEach(function(pane) {
+        this.panes.forEach(function (pane) {
             content.push(pane.render(args));
         });
 
@@ -18622,11 +18734,11 @@ class View extends Observable {
         if (this.editor.isActive()) {
             this.editor.toggleTooltip(this.activeCellRectangle());
         } else if (!(reason.resize ||
-                        reason.comment ||
-                        sheet.selectionInProgress() ||
-                        sheet.resizingInProgress() ||
-                        sheet.draggingInProgress() ||
-                        sheet.isInEditMode())) {
+            reason.comment ||
+            sheet.selectionInProgress() ||
+            sheet.resizingInProgress() ||
+            sheet.draggingInProgress() ||
+            sheet.isInEditMode())) {
             this.renderClipboardContents();
         }
     }
@@ -18660,7 +18772,7 @@ class View extends Observable {
         return dom.element("div", {
             className: classNames.resizeHint + (!horizontal ? " " + classNames.resizeHintVertical : ""),
             style: style
-        },[
+        }, [
             dom.element("div", { className: classNames.resizeHintHandle }),
             dom.element("div", { className: classNames.resizeHintMarker })
         ]);
@@ -18698,11 +18810,11 @@ class View extends Observable {
 
         let selectionView = grid.rangeDimensions(selection);
 
-        selectionView.rows.forEach(function(height) {
+        selectionView.rows.forEach(function (height) {
             table.addRow(height);
         });
 
-        selectionView.columns.forEach(function(width) {
+        selectionView.columns.forEach(function (width) {
             table.addColumn(width);
         });
 
@@ -18710,7 +18822,7 @@ class View extends Observable {
         let primaryMergedCells = tmp.primary;
         let secondaryMergedCells = tmp.secondary;
 
-        sheet.forEach(selection, function(row, col, cell) {
+        sheet.forEach(selection, function (row, col, cell) {
             let location = new CellRef(row, col).print();
 
             if (!secondaryMergedCells[location]) {
@@ -18725,13 +18837,13 @@ class View extends Observable {
             }
         });
 
-        this.clipboardContents.render([ table.toDomTree(0, 0, "kendo-clipboard-" + this._workbook.clipboard()._uid) ]);
+        this.clipboardContents.render([table.toDomTree(0, 0, "kendo-clipboard-" + this._workbook.clipboard()._uid)]);
 
         this.selectClipboardContents();
     }
 
     _pane(row, column, rowCount, columnCount) {
-        let pane = new Pane(this._sheet, this._sheet._grid.pane({ row: row, column: column, rowCount: rowCount, columnCount: columnCount }));
+        let pane = new Pane(this._sheet, this._sheet._grid.pane({ row: row, column: column, rowCount: rowCount, columnCount: columnCount }), this.options.getIconHTMLString);
         pane.refresh(this.scroller.clientWidth, this.scroller.clientHeight);
         return pane;
     }
@@ -19129,6 +19241,10 @@ function parseTSV(data) {
 }
 
 /* eslint-disable no-else-return */
+/* eslint-disable consistent-return */
+/* eslint-disable space-before-blocks */
+/* eslint-disable no-implicit-coercion */
+
 
 let COMMAND_TYPES = {
     AUTO_FILL: "autoFill",
@@ -20944,6 +21060,13 @@ class Deferred {
 }
 
 /* eslint-disable complexity */
+/* eslint-disable camelcase */
+/* eslint-disable key-spacing */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable brace-style */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable no-loop-func */
+/* eslint-disable no-param-reassign */
 
 // WARNING: removing the following jshint declaration and turning
 // == into === to make JSHint happy will break functionality.
@@ -22313,6 +22436,11 @@ function excelToPixels(val) {
 }
 
 /* eslint-disable no-undef */
+/* eslint-disable no-nested-ternary */
+/* eslint-disable key-spacing */
+/* eslint-disable consistent-return */
+/* eslint-disable no-param-reassign */
+
 
 const events$1 = [
     "cut",
@@ -22531,7 +22659,13 @@ class Workbook extends Observable {
 
     execute(options) {
         let commandOptions = Object.assign({}, { workbook: this }, options.options);
-        let command = new commands[options.command](commandOptions);
+        let command;
+
+        if (this.options.getWorkbookCommand) {
+            command = this.options.getWorkbookCommand(options.command, commandOptions);
+        }
+
+        command = command || new commands[options.command](commandOptions);
         let sheet = this.activeSheet();
 
         if (commandOptions.origin) {
@@ -22650,7 +22784,8 @@ class Workbook extends Observable {
             options.columnWidth || this.options.columnWidth,
             options.headerHeight || this.options.headerHeight,
             options.headerWidth || this.options.headerWidth,
-            options.defaultCellStyle || this.options.defaultCellStyle
+            options.defaultCellStyle || this.options.defaultCellStyle,
+            options.createSheetDataSource || this.options.createSheetDataSource
         );
 
         sheet._workbook = this;
@@ -22974,12 +23109,16 @@ class Workbook extends Observable {
 
         if (file && !this.trigger("excelImport", { file, deferred })) {
             this._clearSheets();
-            readExcel(file, this, deferred);
+            this._readExcel(file, this, deferred);
         }
 
         return deferred.promise;
     }
 
+    _readExcel(file, workbook, deferred) {
+        readExcel(file, workbook, deferred);
+    }
+
     saveAsExcel(options) {
         let self = this;
         options = deepExtend({}, self.options.excel, options);
@@ -23325,7 +23464,10 @@ const events = [
     "select",
     "changeFormat",
     "dataBinding",
-    "dataBound"
+    "dataBound",
+    "update",
+    "message",
+    "contextmenu",
 ];
 
 class SpreadsheetWidget extends Widget {
@@ -23343,7 +23485,13 @@ class SpreadsheetWidget extends Widget {
             sheetsbar: this.options.sheetsbar,
             formulaBarInputRef: this.options.formulaBarInputRef,
             formulaCellInputRef: this.options.formulaCellInputRef,
-            nameBoxRef: this.options.nameBoxRef
+            nameBoxRef: this.options.nameBoxRef,
+            createTabStrip: this.options.createTabStrip,
+            createFilterMenu: this.options.createFilterMenu,
+            createContextMenus: this.options.createContextMenus,
+            createSheetBar: this.options.createSheetBar,
+            getIconHTMLString: this.options.getIconHTMLString,
+            openDialogCallback: this.openDialog.bind(this),
         });
 
         this._workbook = new Workbook(this.options, this._view);
@@ -23353,6 +23501,7 @@ class SpreadsheetWidget extends Widget {
         this._autoRefresh = true;
 
         this._bindWorkbookEvents();
+        this._bindViewEvents();
 
         this._view.workbook(this._workbook);
 
@@ -23382,35 +23531,29 @@ class SpreadsheetWidget extends Widget {
         this.trigger("keydown", e);
 
         if (key === keys.F11 && e.shiftKey) {
-            this._view.sheetsbar._onAddSelect();
+            this._view.sheetsbar.onAddSelect();
             e.preventDefault();
             return;
         } else if (e.altKey && key === keys.PAGEDOWN) {
-            this._view.sheetsbar.trigger("select", {
-                name: this._view.sheetsbar._sheets[this._view.sheetsbar._selectedIndex + 1].name(),
-                isAddButton: false
-            });
-        } else if (e.altKey && key === keys.PAGEUP) {
-            this._view.sheetsbar.trigger("select", {
-                name: this._view.sheetsbar._sheets[this._view.sheetsbar._selectedIndex - 1].name(),
-                isAddButton: false
-            });
-        } else if (e.altKey && key === keys.DELETE) {
-            let closeCallback = function(e) {
-                let dlg = e.sender;
+            let activeSheetIndex = this.sheetIndex(this.activeSheet());
+            let nextSheetName = this.sheetByIndex(activeSheetIndex + 1)?.name();
 
-                if (dlg.isConfirmed()) {
-                    this._view.sheetsbar.trigger("remove", { name: this.activeSheet()._name(), confirmation: true });
-                }
-            }.bind(this);
+            if (nextSheetName){
+                this._view.sheetsbar.onSheetSelect(nextSheetName);
+            }
+        } else if (e.altKey && key === keys.PAGEUP) {
+            let activeSheetIndex = this.sheetIndex(this.activeSheet());
+            let prevSheetName = this.sheetByIndex(activeSheetIndex - 1)?.name();
 
-            this._view.sheetsbar._openDialog("confirmation", {
-                close: closeCallback
-            });
+            if (prevSheetName) {
+                this._view.sheetsbar.onSheetSelect(prevSheetName);
+            }
+        } else if (e.altKey && key === keys.DELETE) {
+            this._view.sheetsbar.onSheetRemove(this.activeSheet()._name());
             e.preventDefault();
             return;
         } else if (e.altKey && key === keys.R) {
-            this._view.sheetsbar._createEditor();
+            this.options.createSheetEditor?.();
             e.preventDefault();
             return;
         } else if (controlKey && key === keys.B) {
@@ -23420,17 +23563,20 @@ class SpreadsheetWidget extends Widget {
         } else if (controlKey && key === keys.U) {
             this._handleTypographicalEmphasis('underline');
         } else if (e.altKey && key === keys.H) {
-            this._view.tabstrip.select(0);
+            this._view.tabstrip?.select(0);
             e.preventDefault();
             return;
         } else if (e.altKey && key === keys.N) {
-            this._view.tabstrip.select(1);
+            this._view.tabstrip?.select(1);
             e.preventDefault();
             return;
         } else if (e.altKey && key === keys.A) {
-            this._view.tabstrip.select(2);
+            this._view.tabstrip?.select(2);
             e.preventDefault();
             return;
+        } else if (key === keys.F10) {
+            e.preventDefault();
+            this._view.tabstrip?.wrapper?.find(".k-tabstrip-content.k-active .k-toolbar [tabindex=0]").trigger("focus");
         }
     }
 
@@ -23741,6 +23887,14 @@ class SpreadsheetWidget extends Widget {
         // kendo.ui.progress(this.element, e.toggle);
     }
 
+    _viewUpdate(e) {
+        this.trigger("update", e);
+    }
+
+    _viewMessage(e) {
+        this.trigger("message", e);
+    }
+
     _onContextMenu(e) {
         this.trigger("contextmenu", e);
     }
@@ -23774,6 +23928,11 @@ class SpreadsheetWidget extends Widget {
         this._workbook.bind("contextmenu", this._onContextMenu.bind(this));
     }
 
+    _bindViewEvents() {
+        this._view.bind("update", this._viewUpdate.bind(this));
+        this._view.bind("message", this._viewMessage.bind(this));
+    }
+
     destroy() {
         window.removeEventListener('resize', this._resizeHandler);
         this.element.removeEventListener("keydown", this._keyDownHandler);
@@ -23824,6 +23983,7 @@ class SpreadsheetWidget extends Widget {
 
 /* -----[ Excel operators ]----- */
 
+
 const {
     FUNCS,
     defineBuiltinFunction,
@@ -43971,4 +44131,4 @@ const {
     defineAlias
 } = calc.runtime;
 
-export { CalcError, CellRef, Context, Deferred, Matrix, NULLREF, NameRef, Range$1 as Range, RangeRef, Ref, Sheet, SpreadsheetWidget, UnionRef, View, Workbook, calc, dateToSerial, defineAlias, defineFunction, packDate, packTime, serialToDate, unpackDate, unpackTime };
+export { ALL_PROPERTIES, ALL_REASONS, AddColumnCommand, AddCommand, AddRowCommand, AdjustDecimalsCommand, AdjustRowHeightCommand, ApplyFilterCommand, AutoFillCalculator, AutoFillCommand, Axis, AxisManager, BorderChangeCommand, BringToFrontCommand, CalcError, CellRef, ClearContentCommand, ClearFilterCommand, Clipboard, ColumnWidthCommand, Command, Context, Controller, CopyCommand, CustomFilter, CutCommand, Deferred, DefineNameCommand, DeleteColumnCommand, DeleteCommand, DeleteDrawingCommand, DeleteNameCommand, DeleteRowCommand, Drawing, DrawingCommand, DrawingUpdateCommand, DynamicFilter, EditCommand, EditValidationCommand, EventListener, FIRSTREF, Filter, FilterCommand, FormulaBar, FormulaContext, FormulaInput, FreezePanesCommand, Grid, GridLinesChangeCommand, HideLineCommand, HyperlinkCommand, InsertCommentCommand, InsertImageCommand, Matrix, MergeCellCommand, NULLREF, NameCommand, NameEditor, NameRef, OpenCommand, Pane, PaneAxis, PaneGrid, PasteCommand, PropertyBag, PropertyChangeCommand, PropertyCleanCommand, Range$1 as Range, RangeList, RangeRef, RangeTree, Ref, ReorderDrawingsCommand, RowHeightCommand, SHEETREF, SaveAsCommand, SendToBackCommand, Sheet, SheetDataSourceBinder, SheetEditor, SheetNavigator, SortCommand, Sorter, SpreadsheetWidget, TargetValueCommand, TextWrapCommand, ToolbarCopyCommand, ToolbarCutCommand, ToolbarPasteCommand, TopFilter, UnHideLineCommand, UnionRef, ValidationFormulaContext, ValueFilter, View, Workbook, calc, dateToNumber, dateToSerial, defineAlias, defineFunction, draw, drawCell, formatting, initDynamicFilter, intl, numberToDate, packDate, packTime, registerEditor, serialToDate, unpackDate, unpackTime, validationExport as validation };