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

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 */
@@ -1213,7 +1218,6 @@ function deepExtendOne(destination, source) {
     let property,
         propValue,
         propType,
-        propInit,
         destProp;
 
     for (property in source) {
@@ -1224,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;
         }
@@ -1298,13 +1291,6 @@ const scrollbar = function(refresh) {
     return result;
 };
 
-const createFragment = function(content) {
-    const template = document.createElement('template');
-    template.innerHTML = content;
-
-    return template.content;
-};
-
 function toCamelCase(str) {
     return str.replace(/\-(\w)/g, function(strMatch, g1) {
         return g1.toUpperCase();
@@ -1368,6 +1354,14 @@ 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 {
 
@@ -1406,6 +1400,9 @@ function createKendoObj(calc, CalcError, Ref, CellRef, RangeRef) {
 }
 
 /* eslint-disable max-params */
+/* eslint-disable complexity */
+/* eslint-disable no-unused-vars */
+
 
 let calc = {
     runtime: {
@@ -2941,7 +2938,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);
@@ -3162,6 +3159,7 @@ const dom = {
 
 //--------------------------------------------------- custom number format.
 
+
 let RX_COLORS = /^\[(black|green|white|blue|magenta|yellow|cyan|red)\]/i;
 let RX_CONDITION = /^\[(<=|>=|<>|<|>|=)(-?[0-9.]+)\]/;
 
@@ -4127,6 +4125,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
@@ -5932,6 +5952,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$/;
 
@@ -6557,6 +6583,7 @@ class Controller {
         this._workbook.trigger("contextmenu", {
             objectRef: object.ref,
             targetType: object.type,
+            isComposite,
             showUnhide,
             showUnmerge,
             originalEvent: event
@@ -7071,7 +7098,7 @@ class Controller {
             this.clipboardElement.focus();
             this.navigator.navigateInSelection(ENTRY_ACTIONS[action]);
         }
-        
+
         if (action === 'tab') {
             e.preventDefault();
         }
@@ -7774,6 +7801,9 @@ class SparseRangeList extends RangeList {
 }
 
 /* eslint-disable default-case */
+/* eslint-disable camelcase */
+/* eslint-disable no-param-reassign */
+
 
 class Property {
     constructor(list) {
@@ -8097,6 +8127,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}")';
@@ -8428,6 +8462,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 = [
@@ -10487,6 +10543,7 @@ class PaneAxis {
 }
 
 /* eslint-disable no-param-reassign */
+/* eslint-disable camelcase */
 
 class Rectangle {
     constructor(left, top, width, height) {
@@ -10874,6 +10931,9 @@ Sorter.descendingComparer = function(a, b) {
 };
 
 /* eslint-disable no-constant-condition */
+/* eslint-disable key-spacing */
+/* eslint-disable no-param-reassign */
+
 
 class AxisManager {
     constructor(sheet) {
@@ -11184,6 +11244,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) {
@@ -11858,16 +11933,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);
 
@@ -11911,9 +12011,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));
     }
@@ -11931,7 +12031,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;
@@ -11960,7 +12060,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;
@@ -11977,7 +12077,7 @@ class SheetDataSourceBinder {
 
             normalizedRefs = normalizedRef.refs;
 
-            normalizedRefs.forEach(function(ref) {
+            normalizedRefs.forEach(function (ref) {
                 values.push(sheet.range(ref).values());
             });
 
@@ -11993,7 +12093,7 @@ class SheetDataSourceBinder {
     }
 
     _normalizeColumns(columns) {
-        return columns.map(function(column) {
+        return columns.map(function (column) {
             var field = column.field || column;
             return {
                 field: field,
@@ -12005,23 +12105,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() {
@@ -12055,11 +12155,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++) {
@@ -12109,6 +12209,10 @@ const kendoDate = (function() {
 })();
 
 /* eslint-disable no-var */
+/* eslint-disable no-implicit-coercion */
+/* eslint-disable no-param-reassign */
+/* eslint-disable no-loop-func */
+
 
 const logic = {
     or: {
@@ -12238,6 +12342,21 @@ const transformCompositeFilter = function (filter) {
 };
 
 /* 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;
@@ -12688,6 +12807,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)
@@ -12829,6 +12963,12 @@ class Selection {
     }
 }
 
+let EDITORS = {};
+
+function registerEditor(name, editor) {
+    EDITORS[name] = editor;
+}
+
 class Sheet extends Observable {
     constructor() {
         super();
@@ -12850,10 +12990,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 || {};
@@ -13055,7 +13220,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;
@@ -14860,6 +15026,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;
 
@@ -15501,7 +15674,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);
 }
@@ -15904,7 +16077,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",
@@ -15955,6 +16128,7 @@ const paneClassNames = {
 
 /* eslint-disable complexity */
 
+
 function cellBorder(value) {
     return (value.size || 1) + "px solid " + (value.color || "#000");
 }
@@ -16166,9 +16340,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) {
@@ -16524,18 +16699,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",
@@ -16553,7 +16733,7 @@ class Pane {
             let button = dom.element(
                 "span",
                 { className: classes, style: style },
-                [ icon(classNames.iconFilterDefault) ]
+                [ pane.icon(classNames.iconFilterDefault) ]
             );
 
             return button;
@@ -16710,11 +16890,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);
             });
         }
@@ -16789,6 +16969,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",
@@ -17120,8 +17305,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();
@@ -17649,6 +17835,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();
@@ -17752,7 +17945,7 @@ function addCell(table, row, cell) {
                 break;
             case "boolean":
                 style.textAlign = "center";
-            break;
+                break;
         }
     }
 
@@ -17843,7 +18036,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" }));
@@ -17862,14 +18055,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++;
@@ -17882,7 +18075,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)
         ]);
@@ -17910,12 +18103,6 @@ class View extends Observable {
 
         this._dialogs = [];
 
-        // const contents = VIEW_CONTENTS({
-        //     classNames: classNames,
-        //     messages: messages.menus
-        // });
-        // element.appendChild(createFragment(contents));
-
         this._formulaInput();
 
         this.wrapper = element.querySelector(DOT + classNames.view);
@@ -17937,6 +18124,8 @@ class View extends Observable {
         this.editor = new SheetEditor(this);
 
         this._sheetsbar();
+
+        this.options.createContextMenus?.();
     }
 
     enableClipboard(enable) {
@@ -17980,7 +18169,7 @@ class View extends Observable {
         this.formulaBar = new FormulaBar(formulaBar, { input: this.options.formulaBarInputRef });
 
         // if (this.options.toolbar) {
-        //     this._tabstrip();
+        this._tabstrip();
         // }
     }
 
@@ -17996,10 +18185,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 = [];
@@ -18058,7 +18249,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;
         });
 
@@ -18074,7 +18265,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;
         });
 
@@ -18090,8 +18281,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);
@@ -18241,7 +18432,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;
             }
@@ -18266,7 +18457,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));
@@ -18283,7 +18474,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) {
@@ -18310,19 +18501,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() {
@@ -18375,11 +18565,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: {
@@ -18395,10 +18585,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));
     }
 
@@ -18410,7 +18602,7 @@ class View extends Observable {
             return;
         }
 
-        let onClose = function() {
+        let onClose = function () {
             currentDialogs.pop();
             // let dlg = e.sender;
             this.selectClipboardContents();
@@ -18456,19 +18648,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;
         }
     }
 
@@ -18488,8 +18679,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");
@@ -18503,7 +18694,7 @@ class View extends Observable {
             contentWidth: contentWidth,
             contentHeight: contentHeight
         };
-        this.panes.forEach(function(pane) {
+        this.panes.forEach(function (pane) {
             content.push(pane.render(args));
         });
 
@@ -18530,11 +18721,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();
         }
     }
@@ -18568,7 +18759,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 })
         ]);
@@ -18606,11 +18797,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);
         });
 
@@ -18618,7 +18809,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]) {
@@ -18633,13 +18824,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;
     }
@@ -18647,6 +18838,9 @@ class View extends Observable {
 
 View.classNames = viewClassNames;
 
+const reTable = /<table[^>]+>/gmi;
+const tables = contentStr => ((contentStr || '').match(reTable) || []);
+
 class Clipboard {
     constructor(workbook) {
         this._content = {};
@@ -18812,13 +19006,10 @@ class Clipboard {
             return true;
         }
 
-        let internalHTML = Boolean(createFragment(this._externalContent.html)
-            .querySelector("table.kendo-clipboard-" + this._uid));
+        const uid = "kendo-clipboard-" + this._uid;
+        const includeUid = tablesArr => tablesArr.some(table => table.includes(uid));
 
-        let internalPlain = Boolean(createFragment(this._externalContent.plain)
-            .querySelector("table.kendo-clipboard-" + this._uid));
-
-        return (internalHTML || internalPlain);
+        return includeUid(tables(this._externalContent.html)) || includeUid(tables(this._externalContent.plain));
     }
 }
 
@@ -19037,6 +19228,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",
@@ -20852,6 +21047,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.
@@ -22221,6 +22423,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",
@@ -22439,7 +22646,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) {
@@ -22558,7 +22771,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;
@@ -23237,7 +23451,10 @@ const events = [
     "select",
     "changeFormat",
     "dataBinding",
-    "dataBound"
+    "dataBound",
+    "update",
+    "message",
+    "contextmenu",
 ];
 
 class SpreadsheetWidget extends Widget {
@@ -23255,7 +23472,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);
@@ -23265,6 +23488,7 @@ class SpreadsheetWidget extends Widget {
         this._autoRefresh = true;
 
         this._bindWorkbookEvents();
+        this._bindViewEvents();
 
         this._view.workbook(this._workbook);
 
@@ -23294,35 +23518,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) {
@@ -23332,17 +23550,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");
         }
     }
 
@@ -23653,6 +23874,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);
     }
@@ -23686,6 +23915,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);
@@ -23736,6 +23970,7 @@ class SpreadsheetWidget extends Widget {
 
 /* -----[ Excel operators ]----- */
 
+
 const {
     FUNCS,
     defineBuiltinFunction,
@@ -43883,4 +44118,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 };